/* ============================================================
   SL-WEBSERVICE — BLUE EDITORIAL
   Direkt portiert aus dem Mockup styles.css
   ============================================================ */

/* Fallback-Font-Metriken — verhindert sichtbaren Layout-Shift,
   während die Webfont nachgeladen wird. Diese Schnitte überschreiben
   die System-Schrift mit Metriken, die den Ziel-Webfonts ähneln:
   Inter Tight ≈ -apple-system / Segoe UI bei size-adjust 100 %
   Fraunces    ≈ Georgia mit size-adjust ~105 % */
@font-face {
	font-family: 'Inter Tight Fallback';
	src: local('Arial');
	size-adjust: 100%;
	ascent-override: 95%;
	descent-override: 24%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Fraunces Fallback';
	src: local('Georgia');
	size-adjust: 105%;
	ascent-override: 92%;
	descent-override: 22%;
	line-gap-override: 0%;
}

/* Universal box-sizing — verhindert, dass padding+border über width:100%
   hinaus überlaufen. Besonders kritisch für Form-Inputs in Flex-Spalten. */
*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	/* === COLOR ALIASES === */
	--c-marine:    var(--wp--preset--color--marine);
	--c-marine-d:  var(--wp--preset--color--marine-deep);
	--c-marine-l:  var(--wp--preset--color--marine-lift);
	--c-azur:      var(--wp--preset--color--azur);
	--c-azur-d:    var(--wp--preset--color--azur-deep);
	--c-azur-l:    var(--wp--preset--color--azur-light);
	--c-cream:     var(--wp--preset--color--cream);
	--c-paper:     var(--wp--preset--color--paper);
	--c-bone:      var(--wp--preset--color--bone);
	--c-ink:       var(--wp--preset--color--ink);
	--c-graphite:  var(--wp--preset--color--graphite);
	--c-mute:      var(--wp--preset--color--mute);
	--c-fog:       var(--wp--preset--color--fog);
	--c-glow:      var(--wp--preset--color--glow);
	--c-glow-d:    var(--wp--preset--color--glow-deep);

	--fg: var(--c-ink);
	--fg-mute: var(--c-mute);

	/* === TYPE === */
	--f-sans:  var(--wp--preset--font-family--sans);
	--f-serif: var(--wp--preset--font-family--serif);
	--f-mono:  var(--wp--preset--font-family--mono);
	--f-hand:  var(--wp--preset--font-family--serif);

	--fs-mega:    clamp(4rem, 16vw, 16rem);
	--fs-display: clamp(3rem, 9vw, 9rem);
	--fs-h2:      clamp(2.25rem, 5vw, 4.5rem);
	--fs-h3:      clamp(1.5rem, 2.6vw, 2.25rem);
	--fs-lead:    clamp(1.0625rem, 1.5vw, 1.375rem);
	--fs-sm:      0.8125rem;
	--fs-meta:    0.6875rem;

	--ls-mega:    -0.055em;
	--ls-display: -0.04em;
	--ls-tight:   -0.02em;
	--ls-meta:    0.14em;

	/* === LAYOUT === */
	--maxw: 1440px;
	--gutter: clamp(1rem, 4vw, 3rem);
	--section-y: clamp(5rem, 10vw, 10rem);
	--page-hero-top: clamp(4rem, 7vw, 6.5rem);
	--page-hero-bottom: clamp(3rem, 5.5vw, 4.5rem);
	--header-h: 64px;
	--bar-h: 32px;

	--bw: 1.5px;
	--bw-bold: 3px;
	--bw-mega: 6px;

	--ease:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out:cubic-bezier(0.16, 1, 0.3, 1);
	--d-1: 180ms;
	--d-2: 340ms;
	--d-3: 560ms;
}

/* === BASE === */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--bar-h) + 16px);
}
body.wp-singular,
body {
	font: 400 1rem/1.55 var(--f-sans);
	color: var(--fg);
	background: var(--c-cream);
	/* overflow-x auf body entfernt: bricht position:sticky bei Children
	   (z. B. .sl-contact-trust). Stattdessen wird overflow-x clip auf html
	   (siehe Layout-Konsolidierung) eingesetzt — das verhindert horizontalen
	   Scroll ohne einen neuen Scroll-Container zu erzeugen. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	padding-top: calc(var(--bar-h) + var(--header-h));
}
body::before {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none; z-index: 1;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.82' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.038 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
	opacity: 0.9;
}
main {
	position: relative;
	z-index: 2;
}

/* main soll keinen blockGap zwischen Sektionen einfügen — jede Sektion bestimmt
   ihr eigenes Padding über var(--section-y). Sonst entsteht doppelter Abstand. */
main > * + * {
	margin-block-start: 0 !important;
}
main .sl-hero + .sl-ticker-band,
main .sl-ticker-band + section,
main section + section {
	margin-block-start: 0;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--c-azur); color: var(--c-paper); }
:focus-visible { outline: 3px solid var(--c-azur); outline-offset: 3px; }

/* Screen-Reader-Text (WordPress-Standard, für Skip-Link und aria-Labels) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus,
.sl-skip-link:focus {
	background-color: var(--c-marine);
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: var(--c-paper);
	display: block;
	font: 500 var(--fs-sm)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	height: auto;
	left: 12px;
	top: 12px;
	padding: 16px 24px;
	text-decoration: none;
	width: auto;
	z-index: 100000;
	outline: 3px solid var(--c-azur);
	outline-offset: 3px;
}
.sl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}

/* Italics: Marine */
h1 em, h2 em, h3 em, h4 em,
.h-mega em, .h-display em, .h-2 em, .h-3 em {
	font-style: italic;
	color: var(--c-marine);
}

/* === PRIMITIVES === */
.mono,
.is-style-sl-eyebrow {
	font: 500 var(--fs-meta)/1.2 var(--f-mono) !important;
	letter-spacing: var(--ls-meta) !important;
	text-transform: uppercase !important;
	color: var(--fg-mute);
}

.eyebrow,
.sl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--fg-mute);
}
.eyebrow::before,
.sl-eyebrow::before {
	content: "";
	width: 32px;
	height: var(--bw);
	background: currentColor;
}

.tag {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px;
	border: var(--bw) solid var(--c-ink);
	background: var(--c-paper);
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-ink);
}
.tag.is-azur { background: var(--c-azur); color: var(--c-paper); border-color: var(--c-azur); }
.tag.is-marine { background: var(--c-marine); color: var(--c-paper); border-color: var(--c-marine); }
.tag.is-ink { background: var(--c-ink); color: var(--c-paper); }
.tag.is-bone { background: var(--c-bone); }
.tag::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: currentColor; opacity: 0.7;
}

.lead,
.is-style-sl-lead {
	font: 380 var(--fs-lead)/1.45 var(--f-serif) !important;
	letter-spacing: -0.01em !important;
}
.lead em, .is-style-sl-lead em { font-style: italic; color: var(--c-marine); }
.lead strong, .is-style-sl-lead strong { font-weight: 500; }

/* Mark / Highlight effects */
.mark {
	background: linear-gradient(180deg, transparent 58%, var(--c-glow) 58%, var(--c-glow) 94%, transparent 94%);
	padding: 0 0.08em;
	display: inline-block;
}
.mark-azur, .mark-y {
	background: var(--c-azur);
	color: var(--c-paper);
	padding: 0.04em 0.18em 0.06em;
	display: inline-block;
}
.mark-ink {
	background: var(--c-ink); color: var(--c-paper);
	padding: 0.04em 0.18em 0.06em;
	display: inline-block;
}
.mark-marine {
	background: var(--c-marine); color: var(--c-paper);
	padding: 0.04em 0.18em 0.06em;
	display: inline-block;
}
.mark-paper {
	background: var(--c-paper); color: var(--c-marine);
	padding: 0.04em 0.18em 0.06em;
	display: inline-block;
}

/* ============================================================
   BUTTONS — Brutalist editorial
   Hard-Shadow-Hover statt Slide-Background.
   Text bleibt jederzeit lesbar, Pfeil bleibt im Button-Container.
   ============================================================ */
.wp-element-button,
.wp-block-button__link,
.sl-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	background: var(--c-ink);
	color: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	border-radius: 0 !important;
	font: 500 0.9375rem/1 var(--f-sans);
	letter-spacing: -0.005em;
	text-decoration: none;
	cursor: pointer;
	overflow: visible;
	box-shadow: 4px 4px 0 var(--c-azur);
	transition: transform var(--d-2) var(--ease),
	            box-shadow var(--d-2) var(--ease),
	            background var(--d-2) var(--ease),
	            color var(--d-2) var(--ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-marine);
	background: var(--c-marine);
	color: var(--c-paper);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--c-marine);
}

/* Pfeil-Span am Ende */
.wp-block-button__link::after {
	content: "→";
	display: inline-block;
	transition: transform var(--d-2) var(--ease);
}
.wp-block-button__link:hover::after {
	transform: translateX(6px);
}

/* Button-Stil: Secondary (Outline / Ghost auf hellem BG) */
.wp-block-button.is-style-sl-secondary .wp-block-button__link,
.wp-block-button.is-style-sl-ghost .wp-block-button__link {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-ink);
}
.wp-block-button.is-style-sl-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-sl-ghost .wp-block-button__link:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

/* Button-Stil: Azur (Primary CI) */
.wp-block-button.is-style-sl-azur .wp-block-button__link {
	background: var(--c-azur);
	color: var(--c-paper);
	border-color: var(--c-azur);
}
.wp-block-button.is-style-sl-azur .wp-block-button__link::before {
	background: var(--c-marine);
}

/* Button-Stil: Marine */
.wp-block-button.is-style-sl-marine .wp-block-button__link {
	background: var(--c-marine);
	color: var(--c-paper);
	border-color: var(--c-marine);
}
.wp-block-button.is-style-sl-marine .wp-block-button__link::before {
	background: var(--c-azur);
}

/* Button-Stil: Light (auf dunklem BG) */
.wp-block-button.is-style-sl-light .wp-block-button__link {
	background: transparent;
	color: var(--c-paper);
	border-color: var(--c-paper);
}
.wp-block-button.is-style-sl-light .wp-block-button__link::before {
	background: var(--c-azur);
}

/* Button-Stil: Inverted (auf Marine-BG → Paper-Button) */
.wp-block-button.is-style-sl-inverted .wp-block-button__link {
	background: var(--c-paper);
	color: var(--c-marine);
	border-color: var(--c-paper);
}
.wp-block-button.is-style-sl-inverted .wp-block-button__link::before {
	background: var(--c-azur);
}
.wp-block-button.is-style-sl-inverted .wp-block-button__link:hover {
	color: var(--c-paper);
}

/* Button-Stil: mit Hard-Shadow (Marine) */
.wp-block-button.is-style-sl-with-shadow .wp-block-button__link {
	box-shadow: 6px 6px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.wp-block-button.is-style-sl-with-shadow .wp-block-button__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
}
.wp-block-button.is-style-sl-with-shadow .wp-block-button__link:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--c-marine);
}
/* Marine-Button mit Shadow → Azur-Shadow für Kontrast */
.wp-block-button.is-style-sl-marine.is-style-sl-with-shadow .wp-block-button__link {
	box-shadow: 6px 6px 0 var(--c-azur);
}
.wp-block-button.is-style-sl-marine.is-style-sl-with-shadow .wp-block-button__link:hover {
	box-shadow: 8px 8px 0 var(--c-azur);
}
/* Azur-Button mit Shadow → Marine */
.wp-block-button.is-style-sl-azur.is-style-sl-with-shadow .wp-block-button__link {
	box-shadow: 6px 6px 0 var(--c-marine);
}

/* Underline-Link */
.link-u {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	border-bottom: var(--bw) solid var(--c-ink);
	padding-bottom: 2px;
	color: var(--c-ink);
	text-decoration: none;
	transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.link-u::after {
	content: "→";
	transition: transform var(--d-2) var(--ease);
}
.link-u:hover {
	color: var(--c-azur);
	border-bottom-color: var(--c-azur);
}
.link-u:hover::after {
	transform: translateX(6px);
}

/* ============================================================
   TOPBAR — Fixed Marquee, Marine BG
   ============================================================ */
.sl-topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 99;
	height: var(--bar-h);
	background: var(--c-marine); color: var(--c-paper);
	border-bottom: var(--bw) solid var(--c-ink);
	overflow: hidden;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
}
.sl-topbar-inner {
	display: flex; align-items: center; gap: 32px;
	height: 100%;
	padding: 0 var(--gutter);
	width: max-content;
	animation: sl-marquee 80s linear infinite;
}
.sl-topbar:hover .sl-topbar-inner { animation-play-state: paused; }
.sl-topbar-item {
	display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap;
	color: inherit;
}
.sl-topbar-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(249, 246, 238, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 160ms;
}
.sl-topbar-link:hover,
.sl-topbar-link:focus-visible {
	text-decoration-color: var(--c-azur-l, #58a8ff);
	outline: none;
}
.sl-topbar-item .dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--c-azur-l);
	box-shadow: 0 0 0 2px rgba(88, 168, 255, 0.25);
}
.sl-topbar-item .dot.live { animation: sl-pulse 1.8s ease-in-out infinite; }
.sl-topbar-sep {
	color: var(--c-azur-l);
	opacity: 0.85;
	font-style: italic;
	margin: 0 2px;
	display: inline-block;
	transform: translateY(-0.06em);
}

@keyframes sl-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes sl-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(0.75); }
}

/* ============================================================
   HEADER — Fixed unter Topbar
   ============================================================ */
.sl-site-header {
	position: fixed;
	top: var(--bar-h);
	left: 0; right: 0;
	z-index: 98;
	height: var(--header-h);
	background: var(--c-cream);
	border-bottom: var(--bw) solid var(--c-ink);
	transition: background var(--d-2) var(--ease);
}
.sl-site-header.is-scrolled {
	background: rgba(242, 238, 227, 0.96);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.sl-header-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--gutter);
	height: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.sl-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 36px;
	color: var(--c-ink);
	text-decoration: none;
	transition: opacity var(--d-1) var(--ease);
	flex-shrink: 0;          /* Logo nicht stauchen, wenn Header eng wird */
	max-width: none;
	overflow: visible;
}
.sl-wordmark:hover { opacity: 0.75; }
.sl-wordmark img, .sl-wordmark svg {
	height: 100%;
	width: auto;
	max-width: none;         /* breites Logo nicht beschneiden */
	display: block;
}
.sl-wordmark .custom-logo {
	height: 36px;
	width: auto;
}

/* WordPress Site-Logo Block — sowohl WP-Logo als auch unser SVG-Fallback.
   Das Logo ist ein HORIZONTALES Wortmarken-Bild (Schneider & Liska Webservice).
   Strategie: Höhe ist das Leitmaß (passt in den Header), Breite läuft frei mit
   dem Seitenverhältnis. KEIN object-fit/object-position und KEINE enge max-width,
   sonst wird das breite Logo rechts abgeschnitten statt proportional skaliert. */
.sl-header-inner .wp-block-site-logo,
.sl-header-inner .wp-block-site-logo a,
.sl-header-inner .custom-logo-link,
.sl-site-header .wp-block-site-logo,
.sl-site-header .custom-logo-link {
	display: inline-flex !important;
	align-items: center !important;
	height: auto !important;
	max-height: 48px !important;
	line-height: 1 !important;
	width: auto !important;          /* gegen inline width-Constraint vom Block */
	max-width: none !important;      /* Breite frei — Höhe begrenzt ohnehin */
	overflow: visible !important;
}
.sl-header-inner .wp-block-site-logo img,
.sl-header-inner .custom-logo-link img,
.sl-header-inner .custom-logo,
.sl-site-header .wp-block-site-logo img,
.sl-site-header .custom-logo {
	height: 40px !important;         /* Leitmaß: feste Höhe */
	max-height: 40px !important;
	width: auto !important;          /* Breite folgt dem Seitenverhältnis */
	max-width: none !important;      /* NICHT beschneiden */
	object-fit: contain !important;
	display: block !important;
}
.sl-header-inner .sl-logo-svg svg {
	height: 32px;
	width: auto;
	display: block;
}
.sl-header-inner .sl-logo-svg svg path,
.sl-header-inner .sl-logo-svg svg rect,
.sl-header-inner .sl-logo-svg svg polygon {
	fill: var(--c-ink);
}
/* Im Logo-SVG sind die Bildmarke (.cls-1) und der Text getrennt:
   .cls-1 = das SL-Glyph in Marine, alles andere ist Ink-Text. */
.sl-header-inner .sl-logo-svg svg .cls-1 {
	fill: var(--c-marine);
}
.sl-logo-text {
	font: 500 1.125rem/1 var(--f-sans);
	color: var(--c-ink);
	letter-spacing: -0.01em;
}

/* Footer-Logo (weiß) */
.sl-footer-brand .sl-logo-svg svg {
	height: 44px;
	width: auto;
	display: block;
}
.sl-footer-brand .sl-logo-img,
.sl-footer-brand img {
	height: 44px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
	display: block;
}
.sl-footer-brand .sl-logo-svg svg path,
.sl-footer-brand .sl-logo-svg svg rect,
.sl-footer-brand .sl-logo-svg svg polygon {
	fill: var(--c-paper);
}
.sl-footer-brand .sl-logo-svg svg .cls-1 {
	fill: var(--c-azur-l);
}

.sl-wordmark-pin {
	display: inline-block;
	padding: 3px 7px;
	font: 500 0.6875rem/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	background: var(--c-azur);
	color: var(--c-paper);
	border: var(--bw) solid var(--c-azur);
	transform: translateY(-1px);
}

/* Header-Navigation (WordPress Navigation Block) */
.sl-site-header .wp-block-navigation,
.sl-header-inner .wp-block-navigation {
	justify-self: center;
}
.sl-site-header .wp-block-navigation__container,
.sl-header-inner .wp-block-navigation__container {
	gap: 2px !important;
	list-style: none;
	padding: 0;
	margin: 0;
}
.sl-site-header .wp-block-navigation-item__content,
.sl-header-inner .wp-block-navigation-item__content {
	padding: 8px 14px;
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-ink);
	position: relative;
	text-decoration: none;
	transition: color var(--d-1) var(--ease);
}
.sl-site-header .wp-block-navigation-item__content::after,
.sl-header-inner .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 2px;
	background: var(--c-azur);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--d-2) var(--ease);
}
.sl-site-header .wp-block-navigation-item__content:hover::after,
.sl-header-inner .wp-block-navigation-item__content:hover::after,
.sl-site-header .current-menu-item .wp-block-navigation-item__content::after,
.sl-header-inner .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left center;
}
.sl-site-header .current-menu-item .wp-block-navigation-item__content,
.sl-header-inner .current-menu-item .wp-block-navigation-item__content {
	color: var(--c-marine);
}

/* Header-CTA (eigener Button-Stil) */
.sl-header-cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: var(--c-azur); color: var(--c-paper);
	border: var(--bw) solid var(--c-marine);
	font: 500 0.8125rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
	box-shadow: 4px 4px 0 var(--c-marine);
}
.sl-header-cta::after {
	content: "→";
	transition: transform var(--d-2) var(--ease);
}
.sl-header-cta:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-marine);
	background: var(--c-marine);
	color: var(--c-paper);
}
.sl-header-cta:hover::after { transform: translateX(4px); }

/* ============================================================
   MOBILE NAV-OVERLAY — v1.15.10
   Paper-Design, klare Hierarchie, robust gegen WordPress-inline-Styles.
   
   Problem zuvor: WordPress' Block-Navigation rendert `has-marine-background-color`
   als inline-style auf dem Container — das schlägt ein einfaches CSS-`background`
   selbst mit `!important`. Lösung: HÖHERE Selektor-Spezifität durch Verkettung
   mehrerer Klassen + body.sl-nav-open-Override.
   ============================================================ */

/* Wenn das Mobile-Menu offen ist: höchstmögliche Spezifität, um WP-Inline-Styles
   und alle "has-X-background-color"-Klassen zu überschreiben.
   
   WICHTIG: Das Overlay beginnt unterhalb des Headers (top: header-h + bar-h),
   damit Logo und Burger weiterhin sichtbar bleiben und kein Layout-Bruch
   entsteht. Header bekommt Paper-Hintergrund, damit alles durchgehend wirkt. */
html body .sl-site-header .wp-block-navigation__responsive-container.is-menu-open,
html body .sl-site-header .wp-block-navigation__responsive-container.has-modal-open,
html body.sl-nav-open .wp-block-navigation__responsive-container,
html body .wp-block-navigation__responsive-container.has-marine-background-color.is-menu-open,
html body .wp-block-navigation__responsive-container.has-background.is-menu-open {
	background: #F9F6EE !important;
	background-color: #F9F6EE !important;
	color: #0A0908 !important;
	position: fixed !important;
	top: calc(var(--bar-h) + var(--header-h)) !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	z-index: 200 !important;
	padding: 0 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	border-top: 1px solid color-mix(in srgb, #0A0908 15%, transparent) !important;
}

/* Wenn Menü offen: Header bekommt garantiert Paper-Hintergrund und liegt
   ÜBER dem Overlay. Damit ist alles eine durchgehende cremefarbene Fläche. */
html body.sl-nav-open .sl-site-header {
	background: #F9F6EE !important;
	z-index: 250 !important;
	border-bottom: 1px solid color-mix(in srgb, #0A0908 10%, transparent) !important;
}
html body.sl-nav-open .sl-topbar {
	z-index: 251 !important;
}

/* Inhalt-Wrapper: Padding für Inhalts-Items. Header-Reserve nicht nötig,
   weil Overlay schon unter dem Header beginnt. */
html body .sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100% !important;
	max-width: none !important;
	display: block !important;
	padding: 24px 20px calc(96px + env(safe-area-inset-bottom, 0)) 20px !important;
	box-sizing: border-box !important;
}

/* Schließen-Button beim Burger-Toggle versteckt — Burger-Toggle wird zum X */
html body .sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* Container der Item-Liste: vertikal gestapelt, linksbündig, kompakt */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	text-align: left !important;
}

/* Jedes Item: Trennlinie unten, kein Padding (kommt vom Link selbst) */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent) !important;
	list-style: none !important;
	display: block !important;
}

/* TOP-LEVEL Items (Leistungen, Über uns, Kontakt): groß, Display-Schrift */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > ul > li > a,
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > ul > li > .wp-block-navigation__submenu-container ~ a,
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	font-family: var(--f-serif) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.015em !important;
	color: var(--c-marine) !important;
	display: block !important;
	width: 100% !important;
	padding: 18px 0 18px 0 !important;
	text-decoration: none !important;
	text-align: left !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Hover/Active für Top-Level */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover {
	color: var(--c-azur) !important;
}

/* Verstecke alle ::after Pfeile/Carets */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after,
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	display: none !important;
	content: none !important;
}

/* SUBMENU-Container (sichtbar gestapelt, nicht overlay) */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 0 12px 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	width: 100% !important;
	list-style: none !important;
}

/* SUBMENU-Items: Sans, kleiner, eingerückt mit Marine-Akzent-Linie */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--f-sans) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 1rem !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	color: var(--c-ink) !important;
	opacity: 0.78;
	display: block !important;
	width: 100% !important;
	padding: 10px 0 10px 16px !important;
	margin: 0 0 0 4px !important;
	border-left: 2px solid color-mix(in srgb, var(--c-marine) 25%, transparent) !important;
	text-decoration: none !important;
	background: transparent !important;
	text-align: left !important;
}
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--c-marine) !important;
	border-left-color: var(--c-marine) !important;
	opacity: 1;
}

/* Toggle-Button neben "Leistungen" (das Caret) — komplett verstecken,
   weil das Submenu sowieso immer ausgeklappt ist */
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none !important;
	visibility: hidden !important;
}

/* Body-Scroll-Lock wenn Menü offen */
body:has(.wp-block-navigation__responsive-container.is-menu-open),
html.sl-nav-open,
body.sl-nav-open {
	overflow: hidden;
	touch-action: none;
}

/* ============================================================
   HERO — MEGA EDITORIAL
   - 4-zeilige Mega-Headline mit Highlight-Wort
   - Großer Background-Marquee „Heidelberg"
   - Meta-Bar mit Tag + Mono-Items + Italic-Num
   - Hero-Foot mit Lead + 2 großen CTA-Buttons
   ============================================================ */

.sl-hero {
	position: relative;
	padding: clamp(2rem, 5vw, 4rem) 0 calc(var(--section-y) + clamp(1rem, 3vw, 3rem));
	overflow: hidden;
	background: var(--c-cream);
}

/* Kompakte Variante für Unterseiten/Subhero */
.sl-hero--sub {
	padding-bottom: clamp(3rem, 5vw, 6rem);
}
.sl-hero--sub .sl-hero-title {
	font-size: clamp(2rem, 6vw, 5rem);
	line-height: 1;
}

/* ============================================================
   SUBHERO — Editorial Subpage-Header (Mockup-Variante)
   ============================================================ */
.sl-subhero {
	position: relative;
	overflow: hidden;
	background: var(--c-cream);
	border-bottom: var(--bw-bold) solid var(--c-ink);
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.sl-subhero::before {
	content: "";
	position: absolute;
	top: 0; right: -10%;
	width: 60%; height: 100%;
	background:
		radial-gradient(circle at 30% 70%, rgba(1, 119, 227, 0.16) 0, transparent 55%),
		radial-gradient(circle at 70% 25%, rgba(0, 51, 153, 0.10) 0, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.sl-subhero-inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	position: relative;
	z-index: 2;
}

/* Breadcrumb */
.sl-breadcrumb {
	display: flex; flex-wrap: wrap; gap: 8px;
	align-items: center;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin-bottom: 32px;
}
.sl-breadcrumb a {
	color: var(--c-mute);
	border-bottom: 1px solid transparent;
	text-decoration: none;
	transition: border-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.sl-breadcrumb a:hover { color: var(--c-ink); border-bottom-color: var(--c-azur); }
.sl-breadcrumb .sep { color: var(--c-fog); }
.sl-breadcrumb [aria-current="page"] { color: var(--c-ink); }

/* Subhero-Meta */
.sl-subhero-meta {
	display: flex; flex-wrap: wrap; gap: 12px 24px;
	align-items: baseline;
	padding-bottom: 24px;
	margin-bottom: 40px;
	border-bottom: var(--bw) solid var(--c-ink);
}
.sl-subhero-meta .tag-num {
	font: 350 italic 1.125rem/1 var(--f-serif);
	color: var(--c-marine);
}

/* Subhero-Grid: Headline links, Lede rechts */
.sl-subhero-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 64px;
	align-items: end;
}
.sl-subhero-title {
	font: 350 clamp(2.5rem, 7.5vw, 7rem)/0.94 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0;
}
.sl-subhero-title em {
	font-style: italic;
	color: var(--c-marine);
}
.sl-subhero-title .mark-azur {
	background: var(--c-azur);
	color: var(--c-paper);
	padding: 0.04em 0.18em 0.06em;
	display: inline-block;
}
.sl-subhero-lede {
	font: 380 var(--fs-lead)/1.45 var(--f-serif);
	color: var(--c-ink);
	max-width: 38ch;
	margin: 0;
}
.sl-subhero-lede em { font-style: italic; color: var(--c-marine); }
.sl-subhero-lede strong { font-weight: 500; }

@media (max-width: 900px) {
	.sl-subhero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* === HINTERGRUND-MARQUEE „Heidelberg" === */
.sl-hero-bg-marquee {
	position: absolute;
	top: 32%;
	left: -5%; right: -5%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.08;
	transform: rotate(-3deg);
}
.sl-hero-bg-marquee-track {
	display: flex; gap: 64px;
	width: max-content;
	animation: sl-marquee 120s linear infinite;
	align-items: center;
	font: 350 italic clamp(8rem, 22vw, 22rem)/1 var(--f-serif);
	color: var(--c-marine);
	white-space: nowrap;
	letter-spacing: var(--ls-mega);
}
.sl-hero-bg-dot {
	color: var(--c-azur);
	font-style: normal;
}

/* === Container === */
.sl-hero-inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	position: relative;
	z-index: 2;
}

/* === META-BAR über dem Titel === */
.sl-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: baseline;
	padding-bottom: 20px;
	border-bottom: var(--bw) solid var(--c-ink);
	margin-bottom: clamp(40px, 5vw, 64px);
}
.sl-hero-meta .tag {
	font-size: var(--fs-meta);
}
.sl-hero-meta .mono {
	font-size: var(--fs-meta);
	color: var(--c-mute);
}
.sl-hero-meta-sep {
	color: var(--c-fog) !important;
}
.sl-hero-meta-spacer {
	flex: 1;
	min-width: 0;
}
.sl-hero-meta-num {
	font: 350 italic 1.125rem/1 var(--f-serif);
	color: var(--c-marine);
	white-space: nowrap;
}

/* === MEGA HEADLINE === */
.sl-hero-main {
	margin-bottom: clamp(48px, 7vw, 96px);
}
.sl-hero-title {
	font-family: var(--f-serif);
	font-weight: 350;
	font-size: clamp(2.25rem, 8.5vw, 10rem);
	line-height: 0.92;
	letter-spacing: var(--ls-mega);
	color: var(--c-ink);
	margin: 0;
	font-style: normal;
}
.sl-hero-title-line {
	display: block;
}
.sl-hero-title em {
	font-style: italic;
	color: var(--c-marine);
	font-weight: 350;
}

/* === ROTATOR — wechselndes Wort mit Azur-Block === */
/* Wort-Rotator — CSS-Grid-Stack-Technik mit selbst-anpassendem Item-Hintergrund.
   
   Architektur:
   - Container ist inline-grid mit einer Zelle, die so breit wird wie das längste Wort
   - Alle Items liegen in derselben Zelle übereinander gestapelt
   - WICHTIG: justify-self/justify-content: start → Items sind nur so breit wie ihr Text
     (NICHT die volle Zellbreite), damit der Azur-Hintergrund das aktuelle Wort genau umschließt
   - Aktives Item via opacity sichtbar, andere unsichtbar */
.sl-rot {
	position: relative;
	display: inline-grid;
	grid-template-columns: max-content;
	grid-template-rows: 1fr;
	justify-content: start;
	vertical-align: baseline;
	line-height: inherit;
	/* clip-path begrenzt die Animation vertikal, ohne Breite zu beeinflussen */
	clip-path: inset(0 -0.15em 0 0);
	/* Right-Padding für italic-Schrift-Überschwang */
	padding-right: 0.1em;
}
.sl-rot-item {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	white-space: nowrap;
	width: max-content;          /* Item nur so breit wie sein Text */
	background: var(--c-azur);
	color: var(--c-paper);
	padding: 0 0.22em 0.06em 0.14em;
	font-style: italic;
	font-weight: 350;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 600ms var(--ease), transform 600ms var(--ease);
	pointer-events: none;
}
.sl-rot-item.is-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.sl-rot-item.is-leaving {
	opacity: 0;
	transform: translateY(-100%);
}

/* Legacy: Highlight-Wort (Azur-Block ohne Rotation) — falls noch irgendwo verwendet */
.sl-hero-mark {
	display: inline-block;
	background: var(--c-azur);
	color: var(--c-paper);
	padding: 0.04em 0.16em 0.08em;
	font-style: italic;
	font-weight: 350;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* === HERO-FOOT (Lead links, Buttons rechts) === */
.sl-hero-foot {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	align-items: end;
	gap: clamp(32px, 5vw, 64px);
	margin-top: clamp(28px, 4vw, 52px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: var(--bw) solid var(--c-ink);
}
.sl-hero-lede {
	font: 380 var(--fs-lead)/1.45 var(--f-serif);
	letter-spacing: -0.01em;
	max-width: 46ch;
	color: var(--c-ink);
}
.sl-hero-lede strong {
	font-weight: 500;
	color: var(--c-ink);
}
.sl-hero-lede em {
	font-style: italic;
	color: var(--c-marine);
}

/* === HERO-BUTTONS — im Theme-Stil (Versatz-Schatten wie .sl-btn) === */
.sl-hero-actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: stretch;
	justify-self: end;
	width: min(380px, 100%);
}

/* Der wp-block-button__link IST der Button — er trägt Background, Border,
   Schatten, Padding. Der .sl-hero-btn-Wrapper liefert nur die Variante. */
.sl-hero-actions .wp-block-button__link,
.sl-hero-actions .wp-element-button {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	border: var(--bw-bold) solid var(--c-ink) !important;
	border-radius: 0 !important;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sl-hero-actions .wp-block-button__link::after {
	content: "→";
	font: 350 1.25rem/1 var(--f-sans);
	transition: transform var(--d-2) var(--ease);
}
.sl-hero-actions .sl-hero-btn:hover .wp-block-button__link::after {
	transform: translateX(6px);
}

/* PRIMARY — „Projekt anfragen": groß, Azur, kräftiger Marine-Schatten */
.sl-hero-btn--azur .wp-block-button__link,
.sl-hero-btn--azur .wp-element-button {
	background: var(--c-azur) !important;
	color: var(--c-paper) !important;
	padding: 26px 30px !important;
	font: 600 1.125rem/1.1 var(--f-sans) !important;
	letter-spacing: -0.01em !important;
	box-shadow: 7px 7px 0 var(--c-marine) !important;
}
.sl-hero-btn--azur .wp-block-button__link:hover,
.sl-hero-btn--azur .wp-element-button:hover {
	background: var(--c-marine) !important;
	color: var(--c-paper) !important;
	transform: translate(-3px, -3px);
	box-shadow: 10px 10px 0 var(--c-marine) !important;
}
.sl-hero-btn--azur .wp-block-button__link:active {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 var(--c-marine) !important;
}

/* SECONDARY — „Projekte ansehen": kleiner, transparent, dezenter Schatten */
.sl-hero-btn--ghost .wp-block-button__link,
.sl-hero-btn--ghost .wp-element-button {
	background: transparent !important;
	color: var(--c-ink) !important;
	padding: 17px 28px !important;
	font: 500 0.9375rem/1.1 var(--f-sans) !important;
	letter-spacing: -0.005em !important;
	box-shadow: 4px 4px 0 var(--c-ink) !important;
}
.sl-hero-btn--ghost .wp-block-button__link:hover,
.sl-hero-btn--ghost .wp-element-button:hover {
	background: var(--c-ink) !important;
	color: var(--c-paper) !important;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-marine) !important;
}

/* Wrapper neutral — kein eigenes Styling mehr, der Link macht alles */
.sl-hero-btn {
	display: block;
	border: none;
	box-shadow: none;
	background: transparent;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
	.sl-hero-foot {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.sl-hero-actions {
		flex-direction: row;
		width: 100%;
		justify-self: start;
	}
	.sl-hero-actions .sl-hero-btn {
		flex: 1;
	}
}
@media (max-width: 640px) {
	.sl-hero-title {
		font-size: clamp(2rem, 12vw, 4rem);
		line-height: 0.95;
	}
	.sl-hero-meta {
		gap: 8px 16px;
	}
	.sl-hero-meta-num {
		font-size: 0.875rem;
		width: 100%;
		text-align: left;
	}
	.sl-hero-meta-spacer { display: none; }
	.sl-hero-actions {
		flex-direction: column;
	}
}
@media (max-width: 480px) {
	.sl-hero-btn {
		padding: 18px 22px;
		font-size: 0.9375rem;
	}
}

/* ============================================================
   TICKER-BAND (Azur)
   ============================================================ */
.sl-ticker-band {
	border-top: var(--bw-bold) solid var(--c-ink);
	border-bottom: var(--bw-bold) solid var(--c-ink);
	background: var(--c-azur);
	color: var(--c-paper);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.sl-ticker-track {
	display: flex; gap: 40px;
	width: max-content;
	padding: 18px 0;
	align-items: center;
	animation: sl-marquee 44s linear infinite;
}
.sl-ticker-band:hover .sl-ticker-track {
	animation-play-state: paused;
}
.sl-ticker-item {
	font: 350 italic clamp(1.5rem, 3vw, 2.5rem)/1 var(--f-serif);
	letter-spacing: -0.015em;
	white-space: nowrap;
	color: var(--c-paper);
}
.sl-ticker-glyph {
	display: inline-block;
	margin-left: 40px;
	color: var(--c-glow);
	font-style: italic;
	font-weight: 350;
	transform: translateY(-0.1em); /* § hängt unten — optisch ausgleichen */
}

/* ============================================================
   SECTION-MARK (Riesige Italic-Nummer + Meta rechts)
   ============================================================ */
.sl-section-mark {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 56px;
	border-bottom: var(--bw-bold) solid var(--c-ink);
}
.sl-section-mark-num {
	font: 350 italic clamp(3rem, 6vw, 5rem)/0.85 var(--f-serif);
	color: var(--c-marine);
	letter-spacing: -0.03em;
}
.sl-section-mark-label {
	text-align: right;
	font: 500 var(--fs-meta)/1.45 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--fg-mute);
	max-width: 28ch;
}
.sl-section-mark-label strong {
	color: var(--c-ink);
	font-weight: 500;
}

/* Auf dunklem Hintergrund (Audience/Manifesto) */
.sl-on-dark .sl-section-mark { border-bottom-color: var(--c-paper); }
.sl-on-dark .sl-section-mark-num,
.sl-on-dark .sl-section-mark-label strong { color: var(--c-azur-l); }
.sl-on-dark .sl-section-mark-label { color: rgba(249, 246, 238, 0.6); }

/* ============================================================
   PROOF / BONE-BAND
   ============================================================ */
.sl-proof {
	padding: 48px 0;
	border-bottom: var(--bw) solid var(--c-ink);
	background: var(--c-bone);
}
.sl-proof-head {
	display: flex; align-items: center;
	gap: 16px; margin-bottom: 28px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}
.sl-proof-head .tag {
	font-size: var(--fs-meta);
}
.sl-proof-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 32px;
	align-items: center;
}
.sl-proof-logos > * {
	height: 38px;
	display: flex; align-items: center; justify-content: center;
	filter: grayscale(1) contrast(1);
	opacity: 0.55;
	transition: opacity var(--d-2) var(--ease), filter var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sl-proof-logos > *:hover {
	opacity: 1; filter: none; transform: scale(1.05) rotate(-1deg);
}
.sl-proof-logos img { max-height: 100%; width: auto; }
.sl-proof-more {
	font: 350 italic 1.125rem/1 var(--f-serif);
	color: var(--c-marine);
}

/* ============================================================
   STANCE (3 Cards in Ink-Container mit Azur-Shadow)
   ============================================================ */
.sl-stance {
	padding: var(--section-y) 0;
}
.sl-stance-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: var(--bw-bold) solid var(--c-ink);
	background: var(--c-ink);
	box-shadow: 12px 12px 0 var(--c-azur);
}
.sl-stance-card {
	padding: 36px 28px;
	background: var(--c-cream);
	border-right: var(--bw) solid var(--c-ink);
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	overflow: hidden;
	transition: background var(--d-3) var(--ease), color var(--d-3) var(--ease);
}
.sl-stance-card:last-child { border-right: 0; }
.sl-stance-card:hover {
	background: var(--c-marine);
	color: var(--c-paper);
}
.sl-stance-card:hover .link-u { color: var(--c-azur-l); border-bottom-color: var(--c-azur-l); }
.sl-stance-card:hover p { color: rgba(249, 246, 238, 0.8); }
.sl-stance-card-num {
	font: 350 italic 4.5rem/0.85 var(--f-serif);
	color: var(--c-marine);
	transition: color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sl-stance-card:hover .sl-stance-card-num {
	color: var(--c-azur-l);
	transform: scale(1.05) rotate(-4deg);
}
.sl-stance-card h3 {
	font: 380 var(--fs-h3)/1.05 var(--f-serif);
	letter-spacing: var(--ls-tight);
}
.sl-stance-card h3 em {
	font-style: italic;
	color: var(--c-marine);
	transition: color var(--d-2) var(--ease);
}
.sl-stance-card:hover h3 em { color: var(--c-azur-l); }
.sl-stance-card p {
	color: var(--fg-mute);
	max-width: 32ch;
	line-height: 1.5;
}
.sl-stance-card .link-u {
	margin-top: auto;
	color: var(--c-ink);
}
.sl-stance-card-glyph {
	position: absolute;
	bottom: -20px; right: -20px;
	font: 350 italic 12rem/1 var(--f-serif);
	color: var(--c-ink);
	opacity: 0.04;
	pointer-events: none;
	transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease), color var(--d-3) var(--ease);
}
.sl-stance-card:hover .sl-stance-card-glyph {
	opacity: 0.18;
	color: var(--c-azur);
	transform: rotate(-8deg) scale(1.1);
}

/* ============================================================
   PROCESS-STAGE (4 Schritte mit Gradient-Hover)
   ============================================================ */
.sl-process {
	padding: var(--section-y) 0;
	background: var(--c-paper);
	border-block: var(--bw) solid var(--c-ink);
}
.sl-process-stage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: var(--bw) solid var(--c-ink);
	margin-top: 56px;
}
.sl-process-step {
	padding: 36px 28px;
	background: var(--c-cream);
	border-right: var(--bw) solid var(--c-ink);
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative;
	overflow: hidden;
	min-height: 320px;
	transition: background var(--d-3) var(--ease), color var(--d-3) var(--ease), transform var(--d-3) var(--ease);
}
.sl-process-step:last-child { border-right: 0; }
.sl-process-step:nth-child(1):hover { background: var(--c-bone); }
.sl-process-step:nth-child(2):hover { background: var(--c-glow); }
.sl-process-step:nth-child(3):hover { background: var(--c-azur); color: var(--c-paper); }
.sl-process-step:nth-child(4):hover { background: var(--c-marine); color: var(--c-paper); }
.sl-process-step:hover { transform: translateY(-6px); }
.sl-process-step-num {
	display: block;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--fg-mute);
	margin-bottom: 40px;
}
.sl-process-step:nth-child(3):hover .sl-process-step-num,
.sl-process-step:nth-child(4):hover .sl-process-step-num {
	color: rgba(249, 246, 238, 0.6);
}
.sl-process-step h3 {
	font: 380 1.75rem/1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	margin-bottom: 12px;
}
.sl-process-step h3 em {
	font-style: italic;
	color: var(--c-marine);
	transition: color var(--d-2) var(--ease);
}
.sl-process-step:nth-child(3):hover h3 em,
.sl-process-step:nth-child(4):hover h3 em {
	color: var(--c-azur-l);
}
.sl-process-step p {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--fg-mute);
}
.sl-process-step:nth-child(3):hover p,
.sl-process-step:nth-child(4):hover p {
	color: rgba(249, 246, 238, 0.85);
}
.sl-process-step-glyph {
	position: absolute;
	right: -14px; bottom: -14px;
	font: 350 italic 7rem/1 var(--f-serif);
	color: var(--c-ink);
	opacity: 0.06;
	pointer-events: none;
	transition: opacity var(--d-3) var(--ease), transform var(--d-3) var(--ease), color var(--d-3) var(--ease);
}
.sl-process-step:hover .sl-process-step-glyph {
	opacity: 0.45;
	color: var(--c-marine);
	transform: rotate(-8deg) scale(1.1);
}
.sl-process-step:nth-child(3):hover .sl-process-step-glyph,
.sl-process-step:nth-child(4):hover .sl-process-step-glyph {
	color: var(--c-paper);
	opacity: 0.18;
}

/* ============================================================
   WORKS — 4-Spalten-Hover-Rows
   ============================================================ */
.sl-works {
	padding: var(--section-y) 0 0;
	border-bottom: var(--bw) solid var(--c-ink);
}
.sl-works-list {
	border-top: var(--bw-bold) solid var(--c-ink);
}
.sl-work-row {
	position: relative;
	display: grid;
	grid-template-columns: 140px minmax(0, 2.6fr) minmax(0, 1.1fr) auto;
	gap: 40px;
	align-items: center;
	padding: 36px 0;
	border-bottom: var(--bw) solid var(--c-ink);
	color: var(--c-ink);
	text-decoration: none;
	cursor: pointer;
	transition: padding var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
	overflow: hidden;
}
.sl-work-row::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-marine);
	transform: translateX(-101%);
	transition: transform var(--d-3) var(--ease);
	z-index: 0;
}
.sl-work-row > * {
	position: relative;
	z-index: 1;
}
.sl-work-row:hover {
	padding-left: 28px;
	color: var(--c-paper);
}
.sl-work-row:hover::before {
	transform: translateX(0);
}
.sl-work-row-num {
	font: 500 var(--fs-meta)/1.6 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--fg-mute);
	word-break: keep-all;
	overflow-wrap: break-word;
	hyphens: none;
	white-space: normal;
}
.sl-work-row:hover .sl-work-row-num {
	color: var(--c-azur-l);
}
.sl-work-row-title {
	font: 350 clamp(1.375rem, 2.5vw, 2.125rem)/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	min-width: 0;
}
.sl-work-row-title em {
	font-style: italic;
	color: var(--c-marine);
	transition: color var(--d-2) var(--ease);
	display: block;
	font-size: 0.72em;
	line-height: 1.35;
	margin-top: 6px;
	letter-spacing: -0.005em;
}
.sl-work-row:hover .sl-work-row-title em {
	color: var(--c-azur-l);
}
.sl-work-row-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}
.sl-work-row-tags .tag {
	white-space: nowrap;
}
.sl-work-row:hover .sl-work-row-tags .tag {
	background: var(--c-paper);
	color: var(--c-ink);
	border-color: var(--c-paper);
}
.sl-work-row-arrow {
	font: 350 2rem/1 var(--f-sans);
	transition: transform var(--d-2) var(--ease);
}
.sl-work-row:hover .sl-work-row-arrow {
	transform: translate(8px, -8px) rotate(-12deg);
}

/* Mobile: Stacked Layout statt 4-Spalten-Grid */
@media (max-width: 900px) {
	.sl-work-row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"meta arrow"
			"title arrow"
			"tags tags";
		gap: 12px 16px;
		padding: 28px 0;
	}
	.sl-work-row-num { grid-area: meta; }
	.sl-work-row-title { grid-area: title; }
	.sl-work-row-tags { grid-area: tags; margin-top: 4px; }
	.sl-work-row-arrow { grid-area: arrow; align-self: start; }
	.sl-work-row-title { font-size: 1.5rem; }
	.sl-work-row-title em { font-size: 0.85em; }
}

/* ============================================================
   AUDIENCE — Ink-BG mit Sticky-Title
   ============================================================ */
.sl-audience {
	background: var(--c-ink);
	color: var(--c-paper);
	padding: var(--section-y) 0;
	position: relative;
	overflow: hidden;
	border-block: var(--bw-bold) solid var(--c-ink);
}
.sl-audience::after {
	content: "";
	position: absolute;
	top: 0; right: -10%;
	width: 60%; height: 100%;
	background: radial-gradient(circle at 70% 30%, rgba(1, 119, 227, 0.22) 0, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.sl-audience > * { position: relative; z-index: 2; }
.sl-audience .sl-section-mark { border-bottom-color: var(--c-paper); }
.sl-audience .sl-section-mark-num,
.sl-audience .sl-section-mark-label strong { color: var(--c-azur-l); }
.sl-audience .sl-section-mark-label { color: rgba(249, 246, 238, 0.6); }

.sl-audience-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: start;
}
@media (max-width: 900px) {
	.sl-audience-grid { grid-template-columns: 1fr; gap: 40px; }
}
.sl-audience-headline {
	font: 350 clamp(2.5rem, 5vw, 4.5rem)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 16px 0 24px;
}
.sl-audience-headline em {
	font-style: italic;
	color: var(--c-azur-l);
}
.sl-audience-lede {
	font: 380 var(--fs-lead)/1.5 var(--f-serif);
	color: rgba(249, 246, 238, 0.85);
	max-width: 42ch;
}
.sl-audience-callout {
	margin-top: 32px;
	padding: 24px 28px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 3px solid var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-ink);
	max-width: 44ch;
}
.sl-audience-callout p {
	font: 380 1.0625rem/1.5 var(--f-serif);
	margin: 0;
	color: var(--c-paper);
}
.sl-audience-callout strong {
	background: var(--c-paper);
	color: var(--c-marine);
	padding: 0 4px;
	font-weight: 500;
}

.sl-audience-list {
	display: flex;
	flex-direction: column;
	border-top: 1.5px solid rgba(249, 246, 238, 0.2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-audience-list li {
	padding: 28px 0;
	border-bottom: 1.5px solid rgba(249, 246, 238, 0.2);
	display: grid;
	grid-template-columns: 60px 44px 1fr;
	gap: 20px;
	align-items: center;
}
.sl-audience-list li:last-child { border-bottom: none; }
.sl-audience-list .sl-audience-num {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l);
	align-self: center;
}
.sl-audience-list .sl-audience-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 28px;
	align-items: baseline;
}
@media (max-width: 900px) {
	.sl-audience-list li {
		grid-template-columns: 48px 40px 1fr;
		gap: 14px;
	}
	.sl-audience-list .sl-audience-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}
@media (max-width: 480px) {
	.sl-audience-list li {
		grid-template-columns: 36px 1fr;
		gap: 12px;
	}
	.sl-audience-list .sl-audience-num {
		display: none; /* Nummer auf kleinem Phone verbergen, Icon übernimmt */
	}
}
.sl-audience-list .sl-audience-row strong {
	font: 380 1.5rem/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-paper);
	display: block;
}
.sl-audience-list .sl-audience-row span {
	color: rgba(249, 246, 238, 0.7);
	font: 400 0.9375rem/1.55 var(--f-sans);
}

/* ============================================================
   MANIFESTO (Marine Quote)
   ============================================================ */
.sl-manifesto {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: var(--section-y) 0;
	position: relative;
	overflow: hidden;
}
.sl-manifesto::before {
	content: "\201C";
	position: absolute;
	top: -80px; left: -20px;
	font: 350 30rem/1 var(--f-serif);
	color: rgba(1, 119, 227, 0.32);
	pointer-events: none;
}
.sl-manifesto-quote {
	font: 350 clamp(2rem, 5.5vw, 5.5rem)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	max-width: 22ch;
	color: var(--c-paper);
}
.sl-manifesto-quote em {
	font-style: italic;
	color: var(--c-azur-l);
}
.sl-manifesto-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l);
	margin-bottom: 32px;
}
.sl-manifesto-eyebrow::before {
	content: "";
	width: 32px;
	height: 2px;
	background: currentColor;
	display: inline-block;
}
.sl-manifesto-sig-line {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: rgba(249, 246, 238, 0.7);
	margin-top: 48px;
}
.sl-manifesto-sig-line .sl-manifesto-sig-dash {
	color: var(--c-azur-l);
}

/* ============================================================
   VOICES (Testimonials, kantige Cards mit Rotation)
   ============================================================ */
.sl-voices {
	padding: var(--section-y) 0;
	background: var(--c-bone);
	border-bottom: var(--bw) solid var(--c-ink);
}
.sl-voices-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
	align-items: stretch;
	margin-top: 80px;
}
@media (max-width: 960px) {
	.sl-voices-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}
}
.sl-voice {
	background: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	padding: 56px 28px 28px;
	position: relative;
	box-shadow: 4px 4px 0 var(--c-marine);
	transition: transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease);
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 28px; /* Platz für die ::before-Quote-Glyphe */
}
.sl-voice:nth-child(1) { transform: rotate(-1deg); }
.sl-voice:nth-child(2) { transform: rotate(1deg); }
.sl-voice:nth-child(3) { transform: rotate(-0.5deg); }
.sl-voice:hover {
	transform: rotate(0) translateY(-4px);
	box-shadow: 8px 8px 0 var(--c-azur);
}
.sl-voice::before {
	content: "\201C";
	position: absolute;
	top: -28px; left: 20px;
	font: 350 5rem/1 var(--f-serif);
	background: var(--c-azur);
	color: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	padding: 4px 14px 12px;
	line-height: 0.55;
	z-index: 2;
}
.sl-voice blockquote,
.sl-voice .sl-voice-quote,
.sl-voice blockquote.wp-block-quote,
.sl-voice blockquote.wp-block-quote.sl-voice-quote {
	font-family: var(--f-hand) !important;
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.4;
	font-style: italic;
	color: var(--c-ink);
	margin: 0;
	border: none;
	padding: 0;
	background: none;
	max-width: none;
}
.sl-voice blockquote p,
.sl-voice .sl-voice-quote p,
.sl-voice blockquote.wp-block-quote p {
	font: inherit !important;
	color: inherit;
	margin: 0;
}
.sl-voice figcaption,
.sl-voice .sl-voice-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 16px;
	margin: 0;
	border-top: var(--bw) dashed var(--c-ink);
}
.sl-voice figcaption strong,
.sl-voice .sl-voice-meta strong {
	font: 600 0.9375rem/1.2 var(--f-sans);
	color: var(--c-ink);
	font-weight: 500;
}
.sl-voice figcaption span,
.sl-voice .sl-voice-meta span {
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}
.sl-voice-placeholder { opacity: 0.6; }
.sl-voice-placeholder blockquote { font-style: italic; }

/* ============================================================
   ABOUT — § 06 Über-uns Sektion
   ============================================================ */
.sl-about {
	padding: var(--section-y) 0;
	border-bottom: var(--bw) solid var(--c-ink);
	background: var(--c-cream);
}
.sl-about-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 64px;
	align-items: start;
}
.sl-about-text > p.sl-about-lead,
.sl-about-text > p {
	font: 380 var(--fs-lead)/1.45 var(--f-serif);
	margin-bottom: 24px;
	max-width: 56ch;
	color: var(--c-ink);
}
.sl-about-text > p strong { font-weight: 500; }
.sl-about-text > p em { font-style: italic; color: var(--c-marine); }

.sl-about-title {
	font-family: var(--f-serif);
	font-weight: 350;
	font-size: clamp(2rem, 5.5vw, 4.5rem);
	line-height: 1.0;
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 14ch;
}
.sl-about-title em {
	font-style: italic;
	color: var(--c-marine);
	font-weight: 350;
}

.sl-about-figure {
	margin: 0;
	border: var(--bw-bold) solid var(--c-ink);
	background: var(--c-paper);
	padding: 12px;
	transform: rotate(1deg);
	box-shadow: 12px 12px 0 var(--c-azur);
	transition: transform var(--d-3) var(--ease), box-shadow var(--d-3) var(--ease);
}
.sl-about-figure:hover {
	transform: rotate(0);
	box-shadow: 16px 16px 0 var(--c-marine);
}
.sl-about-figure img {
	width: 100%;
	display: block;
	filter: grayscale(0.4) contrast(1.05);
	transition: filter var(--d-3) var(--ease);
}
.sl-about-figure:hover img { filter: grayscale(0) contrast(1); }

.sl-about-figure figcaption {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	padding: 8px 4px 0;
	border-top: var(--bw) solid var(--c-ink);
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	gap: 16px;
}

/* Placeholder für fehlende Portraits */
.sl-about-figure-placeholder {
	background: var(--c-bone);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
	padding: 40px;
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-mute);
}

.sl-about-timeline {
	margin-top: 32px;
	border-top: var(--bw-bold) solid var(--c-ink);
	list-style: none;
	padding: 0;
}
.sl-about-timeline li {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 32px;
	padding: 20px 0;
	border-bottom: var(--bw) solid var(--c-ink);
	align-items: baseline;
}
.sl-about-timeline-year {
	font: 350 italic 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
}
.sl-about-timeline-event {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--c-mute);
}

.sl-link-u {
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-ink);
	padding-bottom: 2px;
	font-weight: 500;
	transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.sl-link-u:hover {
	color: var(--c-azur);
	border-bottom-color: var(--c-azur);
}
.sl-link-u::after {
	content: " →";
	display: inline-block;
	transition: transform var(--d-2) var(--ease);
}
.sl-link-u:hover::after {
	transform: translateX(4px);
}

@media (max-width: 900px) {
	.sl-about-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.sl-about-figure {
		max-width: 480px;
		margin-inline: auto;
	}
}

/* ============================================================
   CTA-BAND
   ============================================================ */
.sl-cta-band {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: var(--section-y) 0;
	position: relative;
	overflow: hidden;
	border-block: var(--bw-bold) solid var(--c-ink);
}
.sl-cta-band::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(1, 119, 227, 0.45) 0, transparent 45%),
		radial-gradient(circle at 80% 70%, rgba(88, 168, 255, 0.20) 0, transparent 50%);
	pointer-events: none;
}
.sl-cta-band > * {
	position: relative;
	z-index: 1;
}
.sl-cta-band-inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: end;
}
.sl-cta-band-title {
	font: 350 clamp(2.75rem, 6.5vw, 6rem)/0.94 var(--f-serif);
	letter-spacing: var(--ls-display);
	max-width: 14ch;
	color: var(--c-paper);
}
.sl-cta-band-title em {
	font-style: italic;
	color: var(--c-azur-l);
}
.sl-cta-band-side {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 36ch;
}
.sl-cta-band-text {
	font: 380 var(--fs-lead)/1.5 var(--f-serif);
	color: rgba(249, 246, 238, 0.9);
}
.sl-cta-band-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sl-cta-band-actions .wp-block-button__link,
.sl-cta-band-actions a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	letter-spacing: -0.005em;
	text-decoration: none;
	border-radius: 0;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sl-cta-band-actions .sl-cta-band-btn--solid,
.sl-cta-band-actions .is-style-fill .wp-block-button__link {
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 6px 6px 0 var(--c-azur);
}
.sl-cta-band-actions .sl-cta-band-btn--solid:hover,
.sl-cta-band-actions .is-style-fill .wp-block-button__link:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}
.sl-cta-band-actions .sl-cta-band-btn--ghost,
.sl-cta-band-actions .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--c-paper);
}
.sl-cta-band-actions .sl-cta-band-btn--ghost:hover,
.sl-cta-band-actions .is-style-outline .wp-block-button__link:hover {
	background: var(--c-paper);
	color: var(--c-marine);
}

/* ============================================================
   FOOTER — Ink mit Marquee oben
   ============================================================ */
.sl-site-footer {
	background: var(--c-ink);
	color: var(--c-paper);
	border-top: var(--bw-mega) solid var(--c-ink);
	position: relative;
}
.sl-footer-marquee {
	border-bottom: var(--bw) solid var(--c-azur);
	background: var(--c-marine);
	overflow: hidden;
	padding: 16px 0;
}
.sl-footer-marquee-track {
	display: flex; gap: 48px;
	width: max-content;
	align-items: center;
	animation: sl-marquee 70s linear infinite;
}
.sl-footer-marquee-item {
	font: 350 italic clamp(2.5rem, 6vw, 5rem)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	white-space: nowrap;
}
.sl-footer-marquee-item::after {
	content: "§";
	font-style: italic;
	font-weight: 350;
	color: var(--c-azur-l);
	margin-left: 40px;
	font-size: 0.85em;
	display: inline-block;
	transform: translateY(-0.08em);
}
.sl-footer-inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	padding-block: 0;
}
.sl-footer-top {
	padding: 64px 0 48px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	border-bottom: var(--bw) solid rgba(249,246,238,0.15);
}

/* Branchen-Zeile: dezent als Tag-Liste unter dem Haupt-Footer-Grid */
.sl-footer-industries {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 14px;
	padding: 28px 0 32px;
	border-bottom: 1px solid rgba(249,246,238,0.12);
}
.sl-footer-industries-label {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l);
	white-space: nowrap;
	margin-right: 8px;
}
.sl-footer-industries-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sl-footer-industries-list li {
	margin: 0;
	padding: 0;
}
.sl-footer-industries-list a {
	display: inline-block;
	padding: 7px 14px;
	font: 400 0.8125rem/1 var(--f-sans);
	color: rgba(249,246,238,0.78);
	text-decoration: none;
	background: transparent;
	border: 1px solid rgba(249,246,238,0.2);
	border-radius: 0;
	transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.sl-footer-industries-list a:hover {
	color: var(--c-marine);
	background: var(--c-paper);
	border-color: var(--c-paper);
}
/* Mobile-Anpassungen siehe FOOTER RESPONSIVE-Block am Dateiende. */
.sl-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sl-footer-tag {
	font: 380 0.9375rem/1.55 var(--f-serif);
	color: rgba(249,246,238,0.7);
	max-width: 36ch;
}
.sl-footer-contact {
	font: 400 0.875rem/1.6 var(--f-mono);
	letter-spacing: 0.04em;
	color: rgba(249,246,238,0.7);
}
.sl-footer-contact a {
	color: var(--c-paper);
	border-bottom: 1px solid transparent;
	text-decoration: none;
	transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.sl-footer-contact a:hover {
	color: var(--c-azur-l);
	border-bottom-color: var(--c-azur-l);
}
.sl-footer-col h4 {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	margin-bottom: 20px;
	color: var(--c-azur-l);
}
.sl-footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sl-footer-col a {
	font: 380 0.9375rem/1.4 var(--f-serif);
	color: var(--c-paper);
	text-decoration: none;
	transition: color var(--d-1) var(--ease), padding-left var(--d-1) var(--ease);
}
.sl-footer-col a:hover {
	color: var(--c-azur-l);
	padding-left: 8px;
}
.sl-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: rgba(249,246,238,0.6);
}
.sl-footer-bottom ul {
	display: flex;
	gap: 24px;
}
.sl-footer-bottom a {
	color: inherit;
	text-decoration: none;
	transition: color var(--d-1) var(--ease);
}
.sl-footer-bottom a:hover { color: var(--c-azur-l); }

/* ============================================================
   CONTAINER (Mockup-Style — direkt in Patterns nutzbar)
   Layout (max-width, margin, padding) zentral in der Konsolidierung am Dateiende.
   Hier nur position:relative für z-Stack-Kontexte (bg-marks etc.).
   ============================================================ */
.sl-container {
	position: relative;
}

/* ============================================================
   FORMULAR (jetzt im editorial Stil — Karte mit dicker Border + Shadow)
   ============================================================ */
.sl-contact-section {
	padding: var(--section-y) 0;
	background: var(--c-bone);
	border-block: var(--bw) solid var(--c-ink);
}
.sl-form-card {
	background: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-marine);
	padding: clamp(28px, 4vw, 48px);
}
.sl-form__header {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: var(--bw) solid var(--c-ink);
}
.sl-form__eyebrow {
	margin: 0 0 12px;
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur);
}
.sl-form__heading {
	margin: 0 0 12px;
	font: 350 clamp(1.75rem, 3.5vw, 2.5rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
}
.sl-form__heading em { font-style: italic; color: var(--c-marine); }
.sl-form__intro {
	margin: 0;
	font: 380 0.9375rem/1.5 var(--f-serif);
	color: var(--fg-mute);
}
.sl-form { display: flex; flex-direction: column; gap: 24px; }
.sl-form__fieldset {
	border: 0; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 18px;
}
.sl-form__legend {
	width: 100%;
	padding: 0 0 10px;
	margin: 0 0 8px;
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	border-bottom: var(--bw) solid var(--c-ink);
}
.sl-form__row {
	display: flex; gap: 20px;
}
@media (max-width: 640px) {
	.sl-form__row { flex-direction: column; gap: 18px; }
}
.sl-form__row--split > .sl-form__field { flex: 1; min-width: 0; }
.sl-form__field {
	display: flex; flex-direction: column; gap: 8px;
	min-width: 0;
}
.sl-form__field label {
	display: flex; align-items: baseline; gap: 10px;
	font: 500 0.8125rem/1 var(--f-sans);
	color: var(--c-ink);
	letter-spacing: -0.005em;
}
.sl-form__req { color: var(--c-marine); font-weight: 700; }
.sl-form__req-inline { color: var(--c-marine); font-weight: 700; }
.sl-form__opt {
	font: 400 0.6875rem/1 var(--f-mono);
	color: var(--fg-mute);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.sl-form input[type="text"],
.sl-form input[type="email"],
.sl-form input[type="tel"],
.sl-form input[type="url"],
.sl-form select,
.sl-form textarea {
	width: 100%;
	padding: 13px 16px;
	background: var(--c-cream);
	border: var(--bw) solid var(--c-ink);
	border-radius: 0;
	font: 400 1rem/1.4 var(--f-sans);
	color: var(--c-ink);
	transition: border-color var(--d-1) var(--ease), background var(--d-1) var(--ease), box-shadow var(--d-1) var(--ease);
	appearance: none;
	-webkit-appearance: none;
}
.sl-form input:hover, .sl-form select:hover, .sl-form textarea:hover {
	background: var(--c-paper);
}
.sl-form input:focus, .sl-form select:focus, .sl-form textarea:focus {
	outline: none;
	border-color: var(--c-azur);
	background: var(--c-paper);
	box-shadow: 0 0 0 3px rgba(1,119,227,0.18);
}
.sl-form input::placeholder, .sl-form textarea::placeholder {
	color: var(--c-fog);
}
.sl-form textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.55;
	font-family: inherit;
}
.sl-form select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%230A0908' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}
.sl-form input.has-error,
.sl-form select.has-error,
.sl-form textarea.has-error,
.sl-form input[aria-invalid="true"],
.sl-form select[aria-invalid="true"],
.sl-form textarea[aria-invalid="true"] {
	border-color: #C8302E;
	box-shadow: 0 0 0 3px rgba(200,48,46,0.12);
}
.sl-form__error {
	display: none;
	margin-top: 2px;
	font: 500 0.8125rem/1.4 var(--f-sans);
	color: #C8302E;
}
.sl-form__error.is-active { display: block; }
.sl-form__error::before { content: "⚠ "; margin-right: 4px; }
.sl-form__hint-inline {
	font: 400 0.8125rem/1.4 var(--f-sans);
	color: var(--fg-mute);
}
.sl-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
.sl-form__consent {
	background: var(--c-bone);
	border-left: var(--bw-bold) solid var(--c-marine);
	padding: 16px 20px;
}
.sl-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font: 380 0.9375rem/1.5 var(--f-serif);
	color: var(--c-graphite);
	cursor: pointer;
}
.sl-form__checkbox input[type="checkbox"] {
	width: 18px; height: 18px;
	margin-top: 2px;
	accent-color: var(--c-marine);
	flex-shrink: 0; cursor: pointer;
}
.sl-form__actions {
	display: flex; align-items: center; gap: 20px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding-top: 16px;
	border-top: var(--bw) solid var(--c-ink);
}
.sl-form__submit {
	position: relative;
	min-width: 200px;
	padding: 16px 28px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	border-radius: 0;
	font: 500 0.9375rem/1 var(--f-sans);
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
	box-shadow: 6px 6px 0 var(--c-marine);
	overflow: hidden;
}
.sl-form__submit:hover:not(:disabled) {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
	background: var(--c-marine);
}
.sl-form__submit:active:not(:disabled) {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--c-marine);
}
.sl-form__submit:disabled { opacity: 0.7; cursor: wait; box-shadow: none; }
.sl-form__hint {
	flex: 1; min-width: 0;
	font: 400 var(--fs-sm)/1.4 var(--f-mono);
	color: var(--fg-mute);
	letter-spacing: 0.04em;
	margin: 0;
}
.sl-form__status:not(:empty) {
	padding: 16px 20px;
	font: 500 0.9375rem/1.5 var(--f-sans);
	margin-bottom: 8px;
	border: var(--bw) solid var(--c-ink);
}
.sl-form__status.is-success {
	background: var(--c-glow);
	border-left: var(--bw-bold) solid var(--c-marine);
	color: var(--c-marine-d);
}
.sl-form__status.is-error {
	background: rgba(200,48,46,0.08);
	border-left: var(--bw-bold) solid #C8302E;
	color: #6E1413;
}

.sl-contact-section .sl-container > div[style*="grid-template-columns"] {
	display: grid;
	grid-template-columns: 36% 1fr;
	gap: 64px;
	align-items: start;
}
@media (max-width: 900px) {
	.sl-contact-section .sl-container > div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 48px !important;
	}
}

/* ============================================================
   GENERELLE TYPOGRAFISCHE KLASSEN (für Patterns nutzbar)
   ============================================================ */
.h-mega {
	font: 350 var(--fs-mega)/0.86 var(--f-serif);
	letter-spacing: var(--ls-mega);
}
.h-display {
	font: 350 var(--fs-display)/0.92 var(--f-serif);
	letter-spacing: var(--ls-display);
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   REVEAL ANIMATIONS (JS-getriggert)
   ============================================================ */
.reveal-words .rw {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	margin-right: 0.2em;
}
.reveal-words .rw-inner {
	display: inline-block;
	transform: translateY(110%) rotate(6deg);
	transition: transform 720ms var(--ease-out);
	transform-origin: top left;
	will-change: transform;
}
.reveal-words.is-in .rw-inner {
	transform: translateY(0) rotate(0);
}
.reveal-words .rw:nth-child(1) .rw-inner { transition-delay: 0ms; }
.reveal-words .rw:nth-child(2) .rw-inner { transition-delay: 60ms; }
.reveal-words .rw:nth-child(3) .rw-inner { transition-delay: 120ms; }
.reveal-words .rw:nth-child(4) .rw-inner { transition-delay: 180ms; }
.reveal-words .rw:nth-child(5) .rw-inner { transition-delay: 240ms; }
.reveal-words .rw:nth-child(6) .rw-inner { transition-delay: 300ms; }
.reveal-words .rw:nth-child(n+7) .rw-inner { transition-delay: 360ms; }

.reveal-up, .sl-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.reveal-up.is-in, .sl-reveal.is-in {
	opacity: 1;
	transform: none;
}
/* No-JS Fallback: bei deaktiviertem JS sollen reveal-Elemente sichtbar bleiben */
.no-js .reveal-up,
.no-js .sl-reveal,
.no-js [data-reveal-words] {
	opacity: 1 !important;
	transform: none !important;
}

/* ============================================================
   WORKS-PREVIEW (Cursor-folgende Image-Vorschau)
   Wird per JS in den Body eingefügt, position: fixed.
   ============================================================ */
.sl-works-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 200px;
	pointer-events: none;
	z-index: 99;
	background: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-azur);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 0, 0);
	transition: opacity var(--d-2) var(--ease), visibility 0s linear var(--d-2);
	will-change: transform, opacity;
}
.sl-works-preview.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--d-2) var(--ease), visibility 0s linear 0s;
}
.sl-works-preview img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.sl-works-placeholder {
	width: 100%; height: 100%;
	background: var(--c-bone);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
}
.sl-works-placeholder .mono { color: var(--c-mute); }
.sl-works-placeholder strong {
	font: 380 italic 1.125rem/1 var(--f-serif);
	color: var(--c-marine);
}

/* Mobile: keine Preview (kein Hover-fähiges Gerät) */
@media (max-width: 768px), (hover: none) {
	.sl-works-preview { display: none; }
}

/* ============================================================
   CUSTOM CURSOR (Desktop only)
   Wird per JS in den Body eingefügt. Folgt der Maus mit Easing.
   ============================================================ */
.sl-cursor {
	position: fixed;
	top: 0; left: 0;
	width: 24px; height: 24px;
	border: var(--bw-bold) solid var(--c-azur);
	background: rgba(1, 119, 227, 0.1);
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: difference;
	opacity: 0;
	transition: width var(--d-2) var(--ease), height var(--d-2) var(--ease), background var(--d-2) var(--ease), opacity var(--d-1) var(--ease);
}
.sl-cursor.is-on {
	opacity: 1;
}
.sl-cursor.is-hover {
	width: 48px;
	height: 48px;
	background: rgba(1, 119, 227, 0.25);
}

/* Mobile: kein Custom Cursor */
@media (max-width: 768px), (hover: none) {
	.sl-cursor { display: none !important; }
}

/* ============================================================
   MAGNETIC BUTTONS
   data-magnetic Attribut auf Buttons aktiviert sanftes Folgen.
   Die Transform wird per JS gesetzt, transitions hier definiert.
   ============================================================ */
[data-magnetic] {
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-magnetic]:hover {
	transition-duration: 100ms;
}

/* Mobile/kein Hover: Effekt deaktivieren */
@media (max-width: 768px), (hover: none) {
	[data-magnetic] {
		transform: none !important;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.sl-hero-foot { grid-template-columns: 1fr; gap: 32px; }
	.sl-hero-actions { flex-direction: row; align-items: stretch; }
	.sl-hero-actions .wp-block-button { width: auto; flex: 1; }
	.sl-stance-grid { grid-template-columns: 1fr; }
	.sl-stance-card { border-right: 0; border-bottom: var(--bw) solid var(--c-ink); }
	.sl-stance-card:last-child { border-bottom: 0; }
	.sl-process-stage { grid-template-columns: 1fr 1fr; }
	.sl-process-step:nth-child(2) { border-right: 0; }
	.sl-process-step:nth-child(1),
	.sl-process-step:nth-child(2) { border-bottom: var(--bw) solid var(--c-ink); }
	.sl-voices-grid { grid-template-columns: 1fr; }
	.sl-voice { transform: none !important; }
	.sl-cta-band-inner { grid-template-columns: 1fr; gap: 40px; }
	.sl-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
	.sl-topbar { font-size: 0.625rem; }
	.sl-process-stage { grid-template-columns: 1fr; }
	.sl-process-step { border-right: 0; border-bottom: var(--bw) solid var(--c-ink); }
	.sl-process-step:last-child { border-bottom: 0; }
	.sl-work-row {
		grid-template-columns: 50px 1fr auto;
		gap: 12px;
		padding: 24px 0;
	}
	.sl-work-row-tags { display: none; }
	.sl-footer-top { grid-template-columns: 1fr; }
	.sl-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sl-hero-title { font-size: clamp(3rem, 14vw, 6rem); }
}
@media (max-width: 480px) {
	/* (--gutter wird zentral in der Layout-Konsolidierung am Dateiende gesetzt) */
}

/* ============================================================
   EDITORIAL CONTENT BLOCKS — für Unterseiten
   Aufgerufen über is-style-* Klassen + sl-* Group-ClassNames
   ============================================================ */

/* === LEAD-PARAGRAPH (großer Subline-Absatz) === */
.sl-page-content .is-style-sl-lead,
.sl-page-content > p.is-style-sl-lead {
	font: 380 var(--fs-lead)/1.5 var(--f-serif);
	color: var(--c-ink);
	max-width: 56ch;
	margin-bottom: 48px;
	padding-bottom: 24px;
	border-bottom: 1.5px solid var(--c-ink);
}
.sl-page-content .is-style-sl-lead em {
	font-style: italic;
	color: var(--c-marine);
}

/* === STANDARD-FLOW (Vertikaler Rhythmus auf den Unterseiten) === */
.sl-page-content {
	color: var(--c-ink);
	font: 400 1.0625rem/1.65 var(--f-sans);
}
.sl-page-content > h2,
.sl-page-content .wp-block-heading.has-text-align-left,
.sl-page-content > .wp-block-heading {
	margin-top: clamp(48px, 6vw, 88px);
	margin-bottom: 20px;
}
.sl-page-content > h2 {
	font: 350 clamp(2rem, 4.5vw, 3.5rem)/1.05 var(--f-serif);
	letter-spacing: -0.015em;
	color: var(--c-ink);
	max-width: 22ch;
	position: relative;
	padding-top: 32px;
}
.sl-page-content > h2::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 56px; height: 3px;
	background: var(--c-marine);
}
.sl-page-content > h2 em {
	font-style: italic;
	color: var(--c-marine);
}
.sl-page-content > h3 {
	font: 500 1.375rem/1.3 var(--f-sans);
	margin-top: 32px;
	margin-bottom: 12px;
	color: var(--c-ink);
}
.sl-page-content > p {
	margin: 0 0 20px;
	max-width: 64ch;
}
.sl-page-content > p a,
.sl-page-content > ul a,
.sl-page-content > ol a {
	color: var(--c-marine);
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-marine);
	padding-bottom: 1px;
	transition: color var(--d-1) var(--ease), border-color var(--d-1) var(--ease);
}
.sl-page-content > p a:hover,
.sl-page-content > ul a:hover,
.sl-page-content > ol a:hover {
	color: var(--c-azur);
	border-bottom-color: var(--c-azur);
}

/* === LISTEN === */
.sl-page-content > ul,
.sl-page-content > ol {
	margin: 0 0 32px;
	padding-left: 0;
	max-width: 64ch;
	list-style: none;
}
.sl-page-content > ul > li,
.sl-page-content > ol > li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
	line-height: 1.55;
}
.sl-page-content > ul > li::before {
	content: "→";
	position: absolute;
	left: 0; top: 0;
	color: var(--c-marine);
	font-weight: 500;
}
.sl-page-content > ol {
	counter-reset: sl-list;
}
.sl-page-content > ol > li {
	counter-increment: sl-list;
	padding-left: 48px;
}
.sl-page-content > ol > li::before {
	content: counter(sl-list, decimal-leading-zero);
	position: absolute;
	left: 0; top: 0.05em;
	font: 500 italic 1rem/1 var(--f-serif);
	color: var(--c-marine);
	letter-spacing: 0.02em;
}

/* === BLOCKQUOTE / PULL-QUOTE === */
.sl-page-content > .wp-block-quote,
.sl-page-content > blockquote.wp-block-quote {
	margin: 56px 0;
	padding: 32px 0 32px 48px;
	border: none;
	border-left: 6px solid var(--c-azur);
	background: transparent;
	max-width: 60ch;
}
.sl-page-content > .wp-block-quote p,
.sl-page-content > blockquote.wp-block-quote p {
	font: 350 italic clamp(1.25rem, 2.2vw, 1.75rem)/1.3 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
}
.sl-page-content > .wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	font-style: normal;
}

/* === DETAILS / FAQ === */
.sl-page-content > .wp-block-details {
	margin: 0 0 12px;
	max-width: 64ch;
	border-bottom: 1.5px solid var(--c-ink);
	padding: 16px 0;
}
.sl-page-content > .wp-block-details > summary {
	cursor: pointer;
	font: 500 1.0625rem/1.4 var(--f-sans);
	color: var(--c-ink);
	padding: 8px 0;
	position: relative;
	padding-right: 40px;
	list-style: none;
}
.sl-page-content > .wp-block-details > summary::-webkit-details-marker { display: none; }
.sl-page-content > .wp-block-details > summary::after {
	content: "+";
	position: absolute;
	right: 0; top: 50%;
	transform: translateY(-50%);
	font: 350 1.75rem/1 var(--f-serif);
	color: var(--c-marine);
	transition: transform var(--d-2) var(--ease);
}
.sl-page-content > .wp-block-details[open] > summary::after {
	content: "−";
	transform: translateY(-50%);
}
.sl-page-content > .wp-block-details > p {
	margin: 12px 0 8px;
	color: var(--c-mute);
	font-size: 1rem;
}

/* === GROUP-BLOCKS mit speziellen Klassen === */

/* sl-stat-row: 3 große Zahlen nebeneinander */
.sl-page-content .sl-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0;
	margin: 56px 0;
	border-top: 1.5px solid var(--c-ink);
	border-bottom: 1.5px solid var(--c-ink);
}
.sl-page-content .sl-stat-row > * {
	padding: 32px 24px 32px 0;
	border-right: 1px solid var(--c-bone);
}
.sl-page-content .sl-stat-row > *:last-child { border-right: none; }
.sl-page-content .sl-stat-row .sl-stat-num {
	font: 350 italic clamp(3rem, 6vw, 5rem)/1 var(--f-serif);
	color: var(--c-marine);
	display: block;
	margin-bottom: 12px;
}
.sl-page-content .sl-stat-row .sl-stat-label {
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	display: block;
	margin-bottom: 8px;
}
.sl-page-content .sl-stat-row .sl-stat-text {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	max-width: 28ch;
}

/* sl-versus: Nicht das · Sondern das */
.sl-page-content .sl-versus {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 48px 0;
	border: 1.5px solid var(--c-ink);
	background: var(--c-paper);
	box-shadow: 8px 8px 0 var(--c-marine);
}
.sl-page-content .sl-versus > div {
	padding: 28px 24px;
}
.sl-page-content .sl-versus > div:first-child {
	background: var(--c-bone);
	border-right: 1.5px solid var(--c-ink);
}
.sl-page-content .sl-versus .sl-versus-label {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	display: block;
	margin-bottom: 16px;
}
.sl-page-content .sl-versus > div:first-child .sl-versus-label::before {
	content: "✗  ";
	color: var(--c-mute);
}
.sl-page-content .sl-versus > div:last-child .sl-versus-label::before {
	content: "→  ";
	color: var(--c-marine);
}
.sl-page-content .sl-versus p {
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-ink);
	margin: 0 0 8px;
	max-width: none;
}
.sl-page-content .sl-versus > div:last-child p {
	font-weight: 500;
}

/* sl-callout: Marine-Bordered-Box */
.sl-page-content .sl-callout {
	margin: 48px 0;
	padding: 32px 36px;
	border-left: 6px solid var(--c-marine);
	background: var(--c-paper);
	max-width: 64ch;
}
.sl-page-content .sl-callout .sl-callout-label {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 12px;
}
.sl-page-content .sl-callout p {
	font: 400 1.0625rem/1.55 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
	max-width: none;
}
.sl-page-content .sl-callout p strong {
	color: var(--c-marine);
	font-weight: 500;
}

/* sl-checklist: dekorative Auflistung mit Marker */
.sl-page-content .sl-checklist {
	margin: 32px 0;
	padding: 0;
	list-style: none;
	max-width: 64ch;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.sl-page-content .sl-checklist li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 16px;
	padding: 16px 20px;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	position: relative;
}
.sl-page-content .sl-checklist li::before {
	content: "✓";
	font: 500 1.125rem/1 var(--f-sans);
	color: var(--c-marine);
	align-self: start;
	padding-top: 1px;
}
.sl-page-content .sl-checklist li strong {
	display: block;
	font: 500 1rem/1.3 var(--f-sans);
	color: var(--c-ink);
	margin-bottom: 4px;
}
.sl-page-content .sl-checklist li span {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-mute);
}

/* sl-process: nummerierte Großschritt-Liste */
.sl-page-content .sl-process {
	margin: 32px 0 48px;
	padding: 0;
	list-style: none;
	max-width: 100%;
	counter-reset: sl-proc;
	border-top: 1.5px solid var(--c-ink);
}
.sl-page-content .sl-process li {
	counter-increment: sl-proc;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	padding: 28px 4px;
	border-bottom: 1.5px solid var(--c-ink);
	align-items: baseline;
	position: relative;
}
.sl-page-content .sl-process li::before {
	content: counter(sl-proc, decimal-leading-zero);
	font: 350 italic clamp(2.25rem, 3.5vw, 3rem)/1 var(--f-serif);
	color: var(--c-marine);
	letter-spacing: -0.02em;
	min-width: 60px;
}
.sl-page-content .sl-process li strong {
	font: 500 1.25rem/1.3 var(--f-sans);
	color: var(--c-ink);
	display: block;
	margin-bottom: 8px;
}
.sl-page-content .sl-process li span {
	font: 400 1rem/1.55 var(--f-sans);
	color: var(--c-mute);
	display: block;
	max-width: 56ch;
}

/* sl-manifesto-inline: Großes Pull-Quote in Marine */
.sl-page-content .sl-manifesto-inline {
	margin: 80px -16px;
	padding: 56px 48px;
	background: var(--c-marine);
	color: var(--c-paper);
	position: relative;
}
.sl-page-content .sl-manifesto-inline::before {
	content: "\201C";
	position: absolute;
	top: 12px; left: 24px;
	font: 350 6rem/1 var(--f-serif);
	color: var(--c-azur-l);
	opacity: 0.6;
	line-height: 0.8;
}
.sl-page-content .sl-manifesto-inline p {
	font: 350 italic clamp(1.5rem, 3vw, 2.25rem)/1.3 var(--f-serif);
	color: var(--c-paper);
	margin: 0;
	max-width: none;
	padding-top: 32px;
}
.sl-page-content .sl-manifesto-inline p em {
	font-style: normal;
	color: var(--c-azur-l);
}
.sl-page-content .sl-manifesto-inline .sl-manifesto-sig {
	margin-top: 24px;
	padding-top: 0;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l);
	font-style: normal;
}

/* sl-cta-inline: Subtiler CTA-Block am Seitenende */
.sl-page-content .sl-cta-inline {
	margin: 64px 0 0;
	padding: 32px 0 0;
	border-top: 3px solid var(--c-marine);
}
.sl-page-content .sl-cta-inline h3 {
	font: 350 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--f-serif);
	color: var(--c-ink);
	margin-bottom: 16px;
	max-width: 22ch;
}
.sl-page-content .sl-cta-inline h3 em {
	font-style: italic;
	color: var(--c-marine);
}
.sl-page-content .sl-cta-inline p {
	font: 400 1.0625rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin-bottom: 24px;
}
.sl-page-content .sl-cta-inline .sl-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.sl-page-content .sl-cta-inline .sl-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 1.5px solid var(--c-marine);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
	box-shadow: 4px 4px 0 var(--c-azur);
}
.sl-page-content .sl-cta-inline .sl-cta-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azur);
}
.sl-page-content .sl-cta-inline .sl-cta-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-ink);
	box-shadow: none;
}
.sl-page-content .sl-cta-inline .sl-cta-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: none;
	box-shadow: none;
}

/* sl-section-marker: kleines Section-Marker als Trenner */
.sl-page-content .sl-section-marker {
	margin: 80px 0 24px;
	padding-top: 24px;
	border-top: 3px solid var(--c-marine);
	display: flex;
	align-items: center;
	gap: 16px;
}
.sl-page-content .sl-section-marker .sl-section-num {
	font: 350 italic 2rem/1 var(--f-serif);
	color: var(--c-marine);
}
.sl-page-content .sl-section-marker .sl-section-label {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

/* sl-city-grid: 2-Spalten für Stadt-Branchen */
.sl-page-content .sl-city-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	margin: 32px 0 48px;
	border: 1.5px solid var(--c-ink);
}
.sl-page-content .sl-city-grid > div {
	padding: 24px 28px;
	border-right: 1px solid var(--c-bone);
	border-bottom: 1px solid var(--c-bone);
	background: var(--c-paper);
}
.sl-page-content .sl-city-grid > div:hover {
	background: var(--c-bone);
}
.sl-page-content .sl-city-grid > div strong {
	font: 500 1.0625rem/1.3 var(--f-sans);
	color: var(--c-marine);
	display: block;
	margin-bottom: 6px;
}
.sl-page-content .sl-city-grid > div span {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-mute);
	display: block;
}

/* Mobile */
@media (max-width: 768px) {
	.sl-page-content .sl-versus {
		grid-template-columns: 1fr;
	}
	.sl-page-content .sl-versus > div:first-child {
		border-right: none;
		border-bottom: 1.5px solid var(--c-ink);
	}
	.sl-page-content .sl-stat-row > * {
		border-right: none;
		border-bottom: 1px solid var(--c-bone);
	}
	.sl-page-content .sl-stat-row > *:last-child { border-bottom: none; }
	.sl-page-content .sl-manifesto-inline {
		margin: 48px -16px;
		padding: 40px 24px;
	}
	.sl-page-content .sl-process li {
		grid-template-columns: 56px 1fr;
		gap: 16px;
	}
}

/* ============================================================
   PATTERN-HELPER-KLASSEN (für editierbare Block-Headlines)
   Ersetzen die alten inline-styles aus den Patterns
   ============================================================ */

.sl-stance-h2 {
	max-width: 18ch;
	margin-bottom: 56px;
}
.sl-process-h2 {
	max-width: 18ch;
	margin-bottom: 24px;
}
.sl-process-lead {
	max-width: 54ch;
}
.sl-works-h2 {
	max-width: 16ch;
	margin-bottom: 56px;
}

/* Stance-Card Link als Block-Paragraph */
.sl-stance-card .sl-stance-card-link {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 16px;
}


/* ============================================================
   CONTACT-FORM PATTERN — Linke Spalte (Kontakt-Kanäle)
   ============================================================ */

.sl-contact-grid {
	display: grid;
	grid-template-columns: 36% 1fr;
	gap: 64px;
	align-items: start;
}
@media (max-width: 900px) {
	.sl-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
.sl-contact-channels-h2 {
	font: 350 clamp(2rem, 4vw, 3rem)/1.05 var(--f-serif);
	letter-spacing: -0.025em;
	margin: 0 0 28px;
}
.sl-contact-channels-lede {
	font: 380 var(--fs-lead)/1.5 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 40px;
}
.sl-contact-channel {
	margin-bottom: 24px;
}
.sl-contact-channel:last-child { margin-bottom: 0; }
.sl-contact-channel-label {
	font: 500 0.6875rem/1 var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 6px;
	display: block;
}
.sl-contact-channel-value {
	font: 500 1.125rem/1.4 var(--f-sans);
	margin: 0;
}
.sl-contact-channel-value a {
	color: var(--c-ink);
	border-bottom: 1.5px solid var(--c-ink);
	text-decoration: none;
}
.sl-contact-channel-value--address {
	font: 400 0.9375rem/1.55 var(--f-mono);
	color: var(--c-mute);
}

/* ============================================================
   RESPONSIVE — Extra-Sanity für 360px (kleine Geräte)
   ============================================================ */
@media (max-width: 400px) {
	/* (--gutter und --section-y zentral in der Layout-Konsolidierung am Dateiende) */
	.sl-hero-meta { font-size: 0.65rem; gap: 6px 8px; flex-wrap: wrap; }
	.sl-hero-meta-num { display: none; }
	.sl-stance-card,
	.sl-process-step { padding: 24px; }
	.sl-cta-band-actions { flex-direction: column; align-items: stretch; }
	.sl-cta-band-actions .wp-block-button,
	.sl-cta-band-actions .sl-cta-band-actions a { width: 100%; justify-content: center; }
	/* Editorial Content auf Stadt-Hubs / Detailseiten */
	.sl-page-content .sl-stat-row > * { padding: 24px 0; }
	.sl-page-content .sl-process li { padding: 20px 0; }
	.sl-page-content .sl-checklist li { padding: 14px 16px; }
	.sl-page-content .sl-manifesto-inline { padding: 32px 20px; margin-left: -12px; margin-right: -12px; }
}

/* Sehr enge Geräte sollten Headlines noch sauber umbrechen */
@media (max-width: 360px) {
	.sl-page-content > h2 { font-size: 1.75rem; }
	.sl-hero-title { font-size: clamp(2.5rem, 14vw, 4rem); }
	.sl-section-mark-num { font-size: 1.25rem; }
}

/* ============================================================
   CASE-STUDY PAGES — Single-Projekt-Template
   ============================================================ */

.sl-case-hero {
	background: var(--c-bone);
	border-bottom: 1.5px solid var(--c-ink);
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	position: relative;
	overflow: hidden;
}

.sl-case-hero-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	position: relative;
	z-index: 2;
}

.sl-case-breadcrumb {
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin-bottom: 32px;
}
.sl-case-breadcrumb a {
	color: var(--c-mute);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.sl-case-breadcrumb a:hover { color: var(--c-marine); }
.sl-case-breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

.sl-case-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 24px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}
.sl-case-meta-bar .tag-num {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: 6px 10px;
}

.sl-case-title {
	font: 350 clamp(2.5rem, 7vw, 6rem)/0.95 var(--f-serif);
	letter-spacing: -0.025em;
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 18ch;
}
.sl-case-title em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-case-lede {
	font: 400 var(--fs-lead)/1.5 var(--f-serif);
	color: var(--c-ink);
	max-width: 60ch;
	margin: 0 0 48px;
	padding-bottom: 32px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-case-quickfacts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1.5px solid var(--c-ink);
	border-bottom: 1.5px solid var(--c-ink);
	background: var(--c-paper);
}
.sl-case-quickfact {
	padding: 24px 28px;
	border-right: 1px solid var(--c-bone);
}
.sl-case-quickfact:last-child { border-right: none; }
.sl-case-quickfact-label {
	font: 500 var(--fs-meta)/1.2 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 8px;
	display: block;
}
.sl-case-quickfact-value {
	font: 380 1rem/1.3 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
}
.sl-case-quickfact-value--year {
	font-style: italic;
	color: var(--c-marine);
}
.sl-case-quickfact-value a {
	color: var(--c-marine);
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-marine);
}

@media (max-width: 900px) {
	.sl-case-quickfacts { grid-template-columns: 1fr 1fr; }
	.sl-case-quickfact { border-right: none; border-bottom: 1px solid var(--c-bone); }
	.sl-case-quickfact:nth-child(odd) { border-right: 1px solid var(--c-bone); }
	.sl-case-quickfact:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 480px) {
	.sl-case-quickfacts { grid-template-columns: 1fr; }
	.sl-case-quickfact { border-right: none !important; border-bottom: 1px solid var(--c-bone) !important; }
	.sl-case-quickfact:last-child { border-bottom: none !important; }
}

/* Hero-Bild */
.sl-case-image {
	margin-top: clamp(40px, 6vw, 72px);
	padding: 0 var(--gutter);
	max-width: var(--maxw);
	margin-left: auto;
	margin-right: auto;
}
.sl-case-image img,
.sl-case-image .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border: 3px solid var(--c-ink);
	box-shadow: 12px 12px 0 var(--c-marine);
	display: block;
}

/* Case-Sections */
.sl-case-content {
	background: var(--c-cream);
}
.sl-case-section {
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) var(--gutter);
}
.sl-case-section-mark {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--c-marine);
}
.sl-case-section-num {
	font: 350 italic clamp(2rem, 4vw, 3rem)/1 var(--f-serif);
	color: var(--c-marine);
	flex-shrink: 0;
}
.sl-case-section-label {
	font: 500 var(--fs-meta)/1.2 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}
.sl-case-h2 {
	font: 350 clamp(2rem, 4.5vw, 3.5rem)/1.05 var(--f-serif);
	letter-spacing: -0.02em;
	color: var(--c-ink);
	margin: 0 0 24px;
	max-width: 22ch;
}
.sl-case-h2 em {
	font-style: italic;
	color: var(--c-marine);
}
.sl-case-section p {
	font: 400 1.0625rem/1.65 var(--f-sans);
	color: var(--c-ink);
	max-width: 64ch;
	margin: 0 0 16px;
}
.sl-case-section p:last-child { margin-bottom: 0; }
.sl-case-section strong { color: var(--c-marine); font-weight: 500; }

/* KPI-Result-Row */
.sl-case-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 32px 0;
	border-top: 1.5px solid var(--c-ink);
	border-bottom: 1.5px solid var(--c-ink);
	background: var(--c-paper);
}
.sl-case-kpi {
	padding: 32px 24px;
	border-right: 1px solid var(--c-bone);
	text-align: left;
}
.sl-case-kpi:last-child { border-right: none; }
.sl-case-kpi-num {
	font: 350 italic clamp(2.75rem, 6vw, 4.5rem)/1 var(--f-serif);
	color: var(--c-marine);
	display: block;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}
.sl-case-kpi-label {
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	display: block;
}
@media (max-width: 700px) {
	.sl-case-kpis { grid-template-columns: 1fr; }
	.sl-case-kpi { border-right: none; border-bottom: 1px solid var(--c-bone); }
	.sl-case-kpi:last-child { border-bottom: none; }
}

/* Leistungs-Chips (verlinkte Tags) */
.sl-case-services {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
.sl-case-services a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	color: var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sl-case-services a:hover {
	background: var(--c-marine);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--c-azur);
}
.sl-case-services a::after {
	content: "→";
	color: var(--c-marine);
	font-weight: 500;
	transition: color var(--d-2) var(--ease);
}
.sl-case-services a:hover::after { color: var(--c-azur-l); }

/* Final CTA */
.sl-case-cta {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: clamp(56px, 9vw, 112px) var(--gutter);
	position: relative;
	overflow: hidden;
}
.sl-case-cta-inner {
	max-width: 920px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: end;
}
@media (max-width: 800px) {
	.sl-case-cta-inner { grid-template-columns: 1fr; gap: 32px; }
}
.sl-case-cta-eyebrow {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l);
	margin: 0 0 24px;
}
.sl-case-cta h2 {
	font: 350 clamp(2.25rem, 5vw, 4rem)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0;
	max-width: 16ch;
}
.sl-case-cta h2 em {
	font-style: italic;
	color: var(--c-azur-l);
}
.sl-case-cta-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sl-case-cta-actions a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 28px;
	font: 500 1rem/1 var(--f-sans);
	letter-spacing: -0.005em;
	text-decoration: none;
	border: 3px solid var(--c-paper);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sl-case-cta-actions .sl-case-cta-btn--solid {
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 6px 6px 0 var(--c-azur);
}
.sl-case-cta-actions .sl-case-cta-btn--solid:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}
.sl-case-cta-actions .sl-case-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
}
.sl-case-cta-actions .sl-case-cta-btn--ghost:hover {
	background: var(--c-paper);
	color: var(--c-marine);
}

/* ============================================================
   PROJEKT-ARCHIV — Card-Grid statt Hover-Liste
   ============================================================ */

.sl-projects-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 80px) var(--gutter) clamp(80px, 12vw, 160px);
}
@media (max-width: 800px) {
	.sl-projects-grid { grid-template-columns: 1fr; gap: 24px; }
}

.sl-project-card {
	display: flex;
	flex-direction: column;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	text-decoration: none;
	color: var(--c-ink);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
	position: relative;
}
.sl-project-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: 12px 12px 0 var(--c-marine);
}
.sl-project-card-image {
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--c-bone);
	border-bottom: 1.5px solid var(--c-ink);
	position: relative;
}
.sl-project-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--d-3) var(--ease);
}
.sl-project-card:hover .sl-project-card-image img {
	transform: scale(1.04);
}
.sl-project-card-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 350 italic clamp(2rem, 5vw, 4rem)/1 var(--f-serif);
	color: var(--c-mute);
	background: linear-gradient(135deg, var(--c-bone) 0%, var(--c-paper) 100%);
}
.sl-project-card-body {
	padding: 28px 32px 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sl-project-card-meta {
	display: flex;
	gap: 16px;
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin-bottom: 12px;
}
.sl-project-card-meta-year {
	color: var(--c-marine);
}
.sl-project-card-title {
	font: 350 clamp(1.5rem, 2.6vw, 1.875rem)/1.15 var(--f-serif);
	letter-spacing: -0.015em;
	color: var(--c-ink);
	margin: 0 0 12px;
}
.sl-project-card-title em {
	font-style: italic;
	color: var(--c-marine);
}
.sl-project-card-excerpt {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-mute);
	margin: 0 0 20px;
	flex: 1;
}
.sl-project-card-services {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.sl-project-card-service {
	font: 500 0.6875rem/1 var(--f-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-marine);
	padding: 6px 10px;
	background: var(--c-glow);
	border: 1px solid var(--c-marine);
}
.sl-project-card-arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	font-size: 1.25rem;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
	z-index: 2;
}
.sl-project-card:hover .sl-project-card-arrow {
	background: var(--c-marine);
	color: var(--c-paper);
}

/* Empty State */
.sl-projects-empty {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(80px, 14vw, 140px) var(--gutter);
	text-align: center;
}
.sl-projects-empty-inner {
	padding: 64px 32px;
	border: 1.5px dashed var(--c-ink);
	background: var(--c-paper);
	max-width: 56ch;
	margin: 0 auto;
}
.sl-projects-empty p {
	font: 380 1.125rem/1.5 var(--f-serif);
	color: var(--c-mute);
	margin: 0;
}

/* Customer-Quote innerhalb sl-case-section */
.sl-case-section .sl-case-customer-quote {
	margin: 0;
	padding: 32px 0 32px 48px;
	border-left: 6px solid var(--c-azur);
	background: transparent;
	max-width: 60ch;
}
.sl-case-section .sl-case-customer-quote p {
	font: 350 italic clamp(1.5rem, 2.6vw, 2rem)/1.3 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 16px;
	max-width: none;
}
.sl-case-section .sl-case-customer-quote cite {
	display: block;
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	font-style: normal;
}

/* Hero-Image-Container — kein Padding-top, weil aus Hero rausragt */
.sl-case-image-wrap {
	background: var(--c-bone);
	padding-bottom: clamp(40px, 6vw, 80px);
}
.sl-case-image-wrap .sl-case-image {
	margin-top: 0;
}
.sl-case-image-wrap .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border: 3px solid var(--c-ink);
	box-shadow: 12px 12px 0 var(--c-marine);
	display: block;
}

/* Pagination im Archiv */
.sl-projects-pagination {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(80px, 12vw, 160px);
}
.sl-projects-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.sl-projects-pagination .page-numbers {
	padding: 12px 18px;
	font: 500 1rem/1 var(--f-sans);
	color: var(--c-ink);
	border: 1.5px solid var(--c-ink);
	background: var(--c-paper);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sl-projects-pagination .page-numbers:hover,
.sl-projects-pagination .page-numbers.current {
	background: var(--c-marine);
	color: var(--c-paper);
}

/* ============================================================
   REGION-SEKTION (Lokal-SEO auf Startseite)
   ============================================================ */

.sl-region {
	background: var(--c-paper);
	padding: var(--section-y) 0;
	border-block: 1.5px solid var(--c-ink);
}

.sl-region-h2 {
	max-width: 20ch;
	margin-bottom: 24px;
}

.sl-region-lede {
	max-width: 64ch;
	margin-bottom: 64px;
}

.sl-region-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1.5px solid var(--c-ink);
	background: var(--c-cream);
}
@media (max-width: 1024px) {
	.sl-region-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.sl-region-grid { grid-template-columns: 1fr; }
}

.sl-region-card {
	position: relative;
	padding: 32px 28px 36px;
	border-right: 1px solid var(--c-bone);
	background: var(--c-cream);
	display: flex;
	flex-direction: column;
	min-height: 240px;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sl-region-card:last-child { border-right: none; }
@media (max-width: 1024px) {
	.sl-region-card:nth-child(2) { border-right: none; }
	.sl-region-card:nth-child(odd) { border-right: 1px solid var(--c-bone); }
	.sl-region-card:nth-child(-n+2) { border-bottom: 1px solid var(--c-bone); }
}
@media (max-width: 640px) {
	.sl-region-card { border-right: none !important; border-bottom: 1px solid var(--c-bone) !important; }
	.sl-region-card:last-child { border-bottom: none !important; }
}

.sl-region-card:hover {
	background: var(--c-marine);
	color: var(--c-paper);
}
.sl-region-card:hover h3,
.sl-region-card:hover p { color: var(--c-paper); }
.sl-region-card:hover .sl-region-card-num { color: var(--c-azur-l); }
.sl-region-card:hover .sl-region-card-link a {
	color: var(--c-azur-l);
	border-bottom-color: var(--c-azur-l);
}

.sl-region-card-num {
	font: 350 italic 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
	margin-bottom: 12px;
	transition: color var(--d-2) var(--ease);
}

.sl-region-card h3 {
	font: 350 1.75rem/1.05 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 12px;
	transition: color var(--d-2) var(--ease);
}

.sl-region-card p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0 0 auto;
	flex: 1;
	transition: color var(--d-2) var(--ease);
}

.sl-region-card-link {
	margin-top: 20px !important;
	margin-bottom: 0 !important;
}
.sl-region-card-link a {
	font: 500 0.9375rem/1.4 var(--f-sans);
	color: var(--c-marine);
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-marine);
	padding-bottom: 2px;
	transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}

.sl-region-callout {
	margin-top: 40px;
	padding: 20px 28px;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	max-width: 64ch;
}
.sl-region-callout p {
	font: 400 1rem/1.55 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}
.sl-region-callout strong {
	color: var(--c-marine);
	font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 02 — PROBLEM / LÖSUNG (Startseite)
   ═══════════════════════════════════════════════════════════════════════════ */

.sl-problem {
	padding: var(--sp-section) 0;
	background: var(--c-paper);
}

.sl-problem-h2 {
	margin-bottom: 16px;
}

.sl-problem-lead {
	max-width: 56ch;
	margin: 0 0 56px;
	color: var(--c-mute);
}

.sl-problem-table {
	border-top: 2px solid var(--c-ink);
}

.sl-problem-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding: 36px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
	align-items: start;
}

.sl-problem-pain,
.sl-problem-fix {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-problem-row-num,
.sl-problem-row-label {
	font: 500 0.6875rem/1.2 var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-azur);
}

.sl-problem-row-label {
	color: var(--c-marine);
}

.sl-problem-pain strong {
	font: 350 1.5rem/1.2 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	font-weight: 400;
}

.sl-problem-fix p,
.sl-problem-pain p {
	font: 400 1rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-problem-fix p {
	color: var(--c-ink);
}

.sl-problem-fix strong {
	color: var(--c-marine);
	font-weight: 500;
}

@media (max-width: 768px) {
	.sl-problem-row {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 0;
	}
	.sl-problem-fix {
		padding-top: 20px;
		border-top: 1px dashed color-mix(in srgb, var(--c-marine) 35%, transparent);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 08 — FAQ (Startseite)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   FAQ — Editorial Re-Design v1.12.0
   Native <details>, smooth animiert (mit interpolate-size + transition-behavior:
   allow-discrete für moderne Browser, instant für ältere — kein Glitch).
   Marine linke Akzent-Linie bei Hover/Open, +/× Drehung im Plus-Symbol.
   ════════════════════════════════════════════════════════════════════════════ */

/* Modern smooth-Höhen-Animation (Chrome 129+, Safari 17+, FF 129+).
   Ältere Browser fallen zurück auf instant-open — kein visueller Bruch. */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
}

.sl-faq {
	padding: var(--sp-section) 0;
	background: var(--c-paper);
}

.sl-faq-h2 {
	margin-bottom: 56px;
}

.sl-faq-list {
	max-width: 920px;
	margin: 0 auto;
	border-top: 2px solid var(--c-ink);
	counter-reset: sl-faq;
}

.sl-faq-list details.wp-block-details {
	position: relative;
	border-bottom: 1.5px solid var(--c-ink);
	padding: 0;
	counter-increment: sl-faq;
	transition: background var(--d-2) var(--ease);
}

/* Marine-Akzent-Linie links — fährt bei Hover/Open ein */
.sl-faq-list details.wp-block-details::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--c-marine);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.sl-faq-list details.wp-block-details:hover::before,
.sl-faq-list details.wp-block-details[open]::before {
	transform: scaleY(1);
}

/* Summary — Klick-Bereich */
.sl-faq-list details.wp-block-details summary {
	display: flex;
	gap: 24px;
	align-items: baseline;
	padding: 28px 0 28px 24px;
	cursor: pointer;
	list-style: none;
	font: 350 clamp(1.0625rem, 1.4vw, 1.25rem)/1.35 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	transition: color var(--d-2) var(--ease), padding-left var(--d-2) var(--ease);
}
.sl-faq-list details.wp-block-details summary::-webkit-details-marker { display: none; }
.sl-faq-list details.wp-block-details summary::marker { content: ""; }

.sl-faq-list details.wp-block-details summary:hover,
.sl-faq-list details.wp-block-details[open] summary {
	color: var(--c-marine);
	padding-left: 36px;
}

/* Pseudo-Nummer (i. ii. iii.) — automatisch über CSS-Counter */
.sl-faq-list details.wp-block-details summary::before {
	content: counter(sl-faq, lower-roman) ".";
	font: 350 italic 1.125rem/1 var(--f-serif);
	color: var(--c-marine);
	min-width: 36px;
	letter-spacing: 0;
	flex-shrink: 0;
}

/* Mitte des Summary: Frage-Text füllt den Platz */
.sl-faq-list details.wp-block-details summary > strong,
.sl-faq-list details.wp-block-details summary > span:not([class]) {
	flex: 1;
	min-width: 0;
	font-weight: inherit;
}

/* +/× — Marine-Symbol, dreht beim Öffnen */
.sl-faq-list details.wp-block-details summary::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-left: auto;
	font: 350 1.625rem/1 var(--f-serif);
	color: var(--c-marine);
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1), color 0.2s var(--ease);
	transform-origin: center;
}
.sl-faq-list details.wp-block-details[open] summary::after {
	transform: rotate(135deg);
	color: var(--c-azur);
}

/* Antwort-Block — animiert ein/aus */
.sl-faq-list details.wp-block-details > :not(summary) {
	overflow: hidden;
}

.sl-faq-list details.wp-block-details > div,
.sl-faq-list details.wp-block-details > p {
	font: 400 1rem/1.65 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 82%, transparent);
	max-width: 64ch;
	padding: 0 0 28px 60px;
	margin: 0;
}
.sl-faq-list details.wp-block-details p {
	font: 400 1rem/1.65 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 82%, transparent);
	max-width: 64ch;
	padding: 0 0 16px 60px;
	margin: 0;
}
.sl-faq-list details.wp-block-details > p:last-of-type,
.sl-faq-list details.wp-block-details > div > p:last-of-type {
	padding-bottom: 28px;
}

/* Smooth Open/Close für moderne Browser */
@supports (transition-behavior: allow-discrete) {
	.sl-faq-list details.wp-block-details::details-content {
		height: 0;
		opacity: 0;
		overflow: hidden;
		transition:
			height 0.45s cubic-bezier(.2,.7,.2,1),
			opacity 0.32s ease-in-out,
			content-visibility 0.45s allow-discrete;
	}
	.sl-faq-list details.wp-block-details[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

/* Mobile-Anpassung */
@media (max-width: 700px) {
	.sl-faq-list details.wp-block-details summary {
		padding: 22px 0 22px 20px;
		gap: 16px;
		grid-template-columns: auto 1fr auto;
	}
	.sl-faq-list details.wp-block-details summary::before {
		min-width: 28px;
	}
	.sl-faq-list details.wp-block-details summary:hover,
	.sl-faq-list details.wp-block-details[open] summary {
		padding-left: 28px;
	}
	.sl-faq-list details.wp-block-details > div,
	.sl-faq-list details.wp-block-details > p,
	.sl-faq-list details.wp-block-details p {
		padding-left: 44px;
		padding-right: 8px;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.sl-faq-list details.wp-block-details,
	.sl-faq-list details.wp-block-details summary,
	.sl-faq-list details.wp-block-details summary::after,
	.sl-faq-list details.wp-block-details::before,
	.sl-faq-list details.wp-block-details::details-content {
		transition: none !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STANCE — Sub-Liste (Relaunch, SEO, Hosting) — Marine-Block unter Karten
   ═══════════════════════════════════════════════════════════════════════════ */

.sl-stance-sub {
	margin-top: 32px;
	padding: 32px 36px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-stance-sub-label {
	font: 500 0.6875rem/1.3 var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0 0 20px;
	opacity: 1;
}

.sl-stance-sub-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sl-stance-sub-list li {
	border-left: 2px solid var(--c-azur);
	padding-left: 16px;
	margin: 0;
}

.sl-stance-sub-list a {
	color: var(--c-paper);
	text-decoration: none;
	font: 400 0.9375rem/1.5 var(--f-sans);
	transition: color var(--d-2) var(--ease);
	display: block;
}

.sl-stance-sub-list a:hover {
	color: var(--c-azur-l, #aacaff);
}

.sl-stance-sub-list strong {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
	color: var(--c-paper);
}

@media (max-width: 900px) {
	.sl-stance-sub {
		padding: 28px 24px;
	}
	.sl-stance-sub-list {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════════ */

.sl-breadcrumbs {
	padding: 16px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
}

.sl-breadcrumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font: 500 0.75rem/1.2 var(--f-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-breadcrumbs-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sl-breadcrumbs-item:not(:last-child)::after {
	content: "/";
	color: color-mix(in srgb, var(--c-ink) 25%, transparent);
}

.sl-breadcrumbs-item a {
	color: var(--c-marine);
	text-decoration: none;
	transition: color var(--d-2) var(--ease);
}

.sl-breadcrumbs-item a:hover {
	color: var(--c-azur);
}

.sl-breadcrumbs-item.is-current {
	color: var(--c-ink);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASE-HERO — Quickfact-Note (für leere Live-URL)
   ═══════════════════════════════════════════════════════════════════════════ */

.sl-case-quickfact-note {
	color: var(--c-mute);
	font-style: italic;
	font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — feine Justierungen für 360, 390, 768
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.sl-hero-title {
		font-size: clamp(2.25rem, 11vw, 3.5rem);
		letter-spacing: -0.03em;
	}
	.sl-section-mark {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.sl-section-mark-num {
		font-size: 0.875rem;
	}
	.sl-faq-list details.wp-block-details summary {
		font-size: 1rem;
	}
	.sl-form__row--split {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	.sl-hero-title { font-size: clamp(2.75rem, 9vw, 4.25rem); }
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBALE LAYOUT-STABILISIERUNG · ABSTANDS-SYSTEM · RESPONSIVENESS-FINISH
   v1.7.0 Relaunch · Layout-Shift-Prävention und konsistente Abstände
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. LAYOUT-SHIFT-PRÄVENTION ─────────────────────────────────────────── */

/* Bilder: immer Aspect-Ratio, auch ohne width/height-Attribut */
img,
picture,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

img[width][height] {
	height: auto; /* responsives Verhalten, Browser nutzt Attribute für Reservierung */
}

/* Logo-SVG: feste Aspect-Ratio damit Header nicht springt beim Laden */
.sl-logo-img,
.sl-logo-svg {
	display: inline-block;
	height: 32px;
	width: auto;
	max-width: 240px;
}

/* Featured-Image-Container: reserviere Platz vor dem Laden */
.wp-block-post-featured-image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-bone);
}
.wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Buttons: gleiche Höhe egal ob mit/ohne Pfeil im CSS-State */
.wp-block-button__link,
.sl-header-cta,
.sl-form__submit {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

/* Form-Status-Bereich: reserviere Platz, damit Submit-Button nicht springt */
.sl-form__status {
	min-height: 0;
	transition: min-height var(--d-2) var(--ease);
}
.sl-form__status:not(:empty) {
	min-height: 56px;
	margin-bottom: 24px;
}

/* Details-Block: smooth open ohne Scrollbar-Springen */
details.wp-block-details {
	overflow: hidden;
}

/* Reduce-Motion-Respekt: alle Rotationen, Slides, Marquees aus */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sl-voice,
	.sl-voice:nth-child(1),
	.sl-voice:nth-child(2),
	.sl-voice:nth-child(3) {
		transform: none !important;
	}
	.sl-topbar-inner,
	.sl-footer-marquee-track,
	.sl-hero-bg-marquee-track {
		animation: none !important;
	}
}

/* ─── 2. KONSISTENTE SEKTIONS-ABSTÄNDE ────────────────────────────────────── */

/* Alle Top-Level-Sektionen nutzen --section-y. Doppelte Padding-Definitionen
   werden hier sanft überschrieben, damit das Raster konsistent bleibt. */
.sl-stance,
.sl-problem,
.sl-works,
.sl-audience,
.sl-process,
.sl-region,
.sl-voices,
.sl-faq,
.sl-about,
.sl-contact-section,
.sl-case-cta,
.sl-manifesto {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

/* Hero hat schon eigenes Padding, nicht überschreiben */

/* (.sl-container ist zentral in der Layout-Konsolidierung am Dateiende definiert) */

/* Section-Mark immer mit dem gleichen Abstand zum H2 */
.sl-section-mark {
	margin-bottom: 32px;
}

@media (max-width: 768px) {
	.sl-section-mark {
		margin-bottom: 20px;
	}
}

/* H2 → Lead → Grid: einheitlicher Rhythmus */
.sl-problem-h2,
.sl-region-h2,
.sl-works-h2,
.sl-process-h2,
.sl-stance-h2,
.sl-faq-h2,
.sl-audience-headline {
	margin-bottom: 24px;
}

.sl-problem-lead,
.sl-region-lede,
.sl-process-lead,
.sl-audience-lede {
	margin-bottom: 48px;
}

@media (max-width: 768px) {
	.sl-problem-lead,
	.sl-region-lede,
	.sl-process-lead,
	.sl-audience-lede {
		margin-bottom: 36px;
	}
}

/* ─── 3. RESPONSIVE BREAKPOINTS ─────────────────────────────────────────── */

/* Tablet 768px ─ Drei-Spalter werden zwei-spaltig */
@media (max-width: 1024px) {
	.sl-stance-grid,
	.sl-region-grid,
	.sl-works-grid {
		grid-template-columns: 1fr 1fr;
	}
	.sl-stance-card,
	.sl-region-card {
		border-right: none;
		border-bottom: var(--bw) solid var(--c-ink);
	}
}

/* Mobile 768px ─ alles einspaltig */
@media (max-width: 768px) {
	.sl-stance-grid,
	.sl-region-grid,
	.sl-works-grid,
	.sl-audience-grid,
	.sl-process-stage {
		grid-template-columns: 1fr;
	}
	.sl-audience-grid {
		gap: 32px;
	}
	/* Section-Mark wird untereinander gestapelt */
	.sl-section-mark-num {
		font-size: 0.875rem;
	}
}

/* Kleine Phones 480px ─ Padding und Schrift reduzieren */
@media (max-width: 480px) {
	/* (--gutter und --section-y zentral in der Layout-Konsolidierung am Dateiende) */

	.sl-hero-title {
		letter-spacing: -0.03em;
	}

	/* Buttons stack auf voller Breite */
	.sl-hero-actions {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}
	.sl-hero-btn,
	.sl-hero-btn .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* Problem-Lösung-Karten mehr Atemraum */
	.sl-problem-row {
		padding: 24px 0;
		gap: 18px;
	}

	/* Form-Reihen einspaltig */
	.sl-form__row--split {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	/* CTA-Inline-Buttons stack */
	.sl-cta-actions {
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}
	.sl-cta-btn {
		width: 100%;
		justify-content: center;
	}

	/* Voices auf Mobile: keine Rotation, sonst kratzen sie am Rand */
	.sl-voice,
	.sl-voice:nth-child(1),
	.sl-voice:nth-child(2),
	.sl-voice:nth-child(3) {
		transform: none;
	}

	/* FAQ-Summary kompakter */
	.sl-faq-list details.wp-block-details summary {
		font-size: 1rem;
		padding-right: 32px;
	}

	/* Stance-Sub Karten einspaltig (war schon da, hier nochmal als Sicherheit) */
	.sl-stance-sub {
		padding: 24px 20px;
	}
	.sl-stance-sub-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Ultra-klein 360px ─ kein Text wird abgeschnitten */
@media (max-width: 380px) {
	body {
		font-size: 0.9375rem;
	}
	.sl-hero-meta {
		font-size: 0.75rem;
	}
	.sl-stat-row {
		grid-template-columns: 1fr;
	}
	.sl-stance-card,
	.sl-region-card {
		padding: 24px 18px;
	}
}

/* ─── 4. ABSTÄNDE INNERHALB VON KARTEN-GRIDS ─────────────────────────────── */

/* Voices-Grid: Hover-Rotation darf nicht in den nächsten Inhalt klippen */
.sl-voices {
	overflow: hidden;
}

/* Problem-Lösung: Top-Border-Trennlinien dürfen nicht ab der ersten Zeile schweben */
.sl-problem-table .sl-problem-row:first-child {
	border-top: none;
}

/* Über uns Timeline auf mobil */
@media (max-width: 768px) {
	.sl-about-figure {
		max-width: 100%;
		margin-top: 32px;
	}
}

/* ─── 5. HEADER / NAVIGATION CONSISTENCY ─────────────────────────────────── */

/* Header-Höhe stabil halten, kein Spring beim Logo-Laden */
.sl-site-header {
	min-height: var(--header-h);
}

.sl-header-inner {
	min-height: var(--header-h);
	align-items: center;
}

/* ─── 6. TYPOGRAFIE-RHYTHMUS IN ARTIKEL-INHALTEN ─────────────────────────── */

/* Auf Leistungs-, Region- und Projekt-Seiten ist der Inhalt ein Mix aus
   Heading, Paragraph, List, Details. Hier konsistente Abstände sichern. */
.sl-page-content > h2,
.entry-content > h2 {
	margin-top: 48px;
	margin-bottom: 16px;
}

.sl-page-content > h3,
.entry-content > h3 {
	margin-top: 32px;
	margin-bottom: 12px;
}

.sl-page-content > p,
.entry-content > p {
	margin-bottom: 1.25em;
}

.sl-page-content > ul,
.sl-page-content > ol,
.entry-content > ul,
.entry-content > ol {
	margin-bottom: 1.5em;
}

.sl-page-content > .wp-block-details,
.entry-content > .wp-block-details {
	margin-bottom: 12px;
}

@media (max-width: 768px) {
	.sl-page-content > h2,
	.entry-content > h2 {
		margin-top: 36px;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   ICON-SYSTEM — SVG-Sprite mit Größen-Varianten
   ════════════════════════════════════════════════════════════════════════════ */

.sl-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
	flex-shrink: 0;
	stroke-width: 1.75;
	fill: none;
	stroke: currentColor;
}

.sl-icon--xs { width: 0.75em; height: 0.75em; vertical-align: -0.08em; }
.sl-icon--sm { width: 0.875em; height: 0.875em; }
.sl-icon--md { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
.sl-icon--lg { width: 1.75em; height: 1.75em; vertical-align: -0.3em; }
.sl-icon--xl { width: 2.5em; height: 2.5em; vertical-align: -0.4em; }

/* Pulse-Icon mit zarter Atemanimation */
.sl-icon use[href="#sl-i-pulse"],
svg.sl-icon[aria-hidden="true"] > use[href$="sl-i-pulse"] {
	animation: sl-pulse 1.8s ease-in-out infinite;
}
@keyframes sl-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-icon use { animation: none !important; }
}

/* Audience-Branchen-Icon in der Liste */
.sl-audience-list .sl-audience-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 30%, transparent);
	color: var(--c-azur-l, #aacaff);
	flex-shrink: 0;
}
.sl-audience-list .sl-audience-icon .sl-icon {
	width: 18px;
	height: 18px;
}

/* ════════════════════════════════════════════════════════════════════════════
   LEISTUNGS-ÜBERSICHT — Hero, Promise, Grid, FAQ
   v1.7.2 — Pattern-basiertes Layout, kein Lorem-Ipsum
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── SERVICES HERO ─────────────────────────────────────────────────────── */

.sl-services-hero {
	position: relative;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-cream);
	overflow: hidden;
	isolation: isolate;
}

.sl-services-hero-bg-mark {
	position: absolute;
	bottom: -0.2em;
	right: -0.05em;
	font: 350 italic clamp(8rem, 22vw, 22rem)/0.85 var(--f-serif);
	color: var(--c-paper);
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.sl-services-hero-inner {
	position: relative;
	z-index: 1;
	max-width: var(--maxw);
}

.sl-services-hero-meta {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 32px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.sl-services-hero-meta-sep {
	color: var(--c-azur);
}

.sl-services-hero-title {
	font: 350 clamp(2.5rem, 7vw, 6rem)/0.95 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 14ch;
}

.sl-services-hero-title em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-services-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 56ch;
	margin: 0 0 48px;
}

.sl-services-hero-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-top: 1.5px solid var(--c-ink);
	border-bottom: 1.5px solid var(--c-ink);
	margin: 0;
}

.sl-services-hero-nav a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	border-right: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
	flex: 1 1 auto;
	min-width: 0;
}

.sl-services-hero-nav a:last-child {
	border-right: 0;
}

.sl-services-hero-nav a:hover {
	background: var(--c-marine);
	color: var(--c-paper);
}

.sl-services-hero-nav a:hover .mono {
	color: var(--c-azur-l, #aacaff);
}

.sl-services-hero-nav .mono {
	font: 500 0.6875rem/1 var(--f-mono);
	letter-spacing: 0.14em;
	color: var(--c-marine);
	transition: color var(--d-2) var(--ease);
}

@media (max-width: 768px) {
	.sl-services-hero-nav {
		flex-direction: column;
	}
	.sl-services-hero-nav a {
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
		flex: 1 1 100%;
	}
	.sl-services-hero-nav a:last-child {
		border-bottom: 0;
	}
}

/* ─── DREI VERSPRECHEN ──────────────────────────────────────────────────── */

.sl-services-promise {
	padding: clamp(3rem, 6vw, 5rem) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-services-promise-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px;
}

@media (max-width: 900px) {
	.sl-services-promise-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.sl-services-promise-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sl-services-promise-num {
	font: 350 italic 2.25rem/1 var(--f-serif);
	color: var(--c-azur-l, #aacaff);
	margin-bottom: 4px;
}

.sl-services-promise-card h3 {
	font: 380 1.5rem/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-paper);
	margin: 0;
}

.sl-services-promise-card p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	margin: 0;
}

/* ─── SECHS LEISTUNGS-KARTEN ───────────────────────────────────────────── */

.sl-services {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-services-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 1fr;
	gap: 24px;
}

/* Layout-Verteilung (7 Karten in 3 Zeilen):
   Row 1: Karte 01 (Websites & WordPress): span 4 — Hero, large
          Karte 02 (Online-Shops):         span 2
   Row 2: Karte 03 (Native Apps):          span 2 — Marine, hervorgehoben
          Karte 04 (Individuelle Software): span 2
          Karte 05 (SEO & Marketing):      span 2
   Row 3: Karte 06 (Hosting & Wartung):    span 2
          Karte 07 (Design & Print):       span 4 — large */
.sl-services-grid > .sl-service-card:nth-child(1) { grid-column: span 4; }
.sl-services-grid > .sl-service-card:nth-child(2) { grid-column: span 2; }
.sl-services-grid > .sl-service-card:nth-child(3) { grid-column: span 2; }
.sl-services-grid > .sl-service-card:nth-child(4) { grid-column: span 2; }
.sl-services-grid > .sl-service-card:nth-child(5) { grid-column: span 2; }
.sl-services-grid > .sl-service-card:nth-child(6) { grid-column: span 2; }
.sl-services-grid > .sl-service-card:nth-child(7) { grid-column: span 4; }

@media (max-width: 1100px) {
	.sl-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sl-services-grid > .sl-service-card:nth-child(n) {
		grid-column: span 1;
	}
	.sl-services-grid > .sl-service-card--lg {
		grid-column: span 2;
	}
}

@media (max-width: 700px) {
	.sl-services-grid {
		grid-template-columns: 1fr;
	}
	.sl-services-grid > .sl-service-card:nth-child(n),
	.sl-services-grid > .sl-service-card--lg {
		grid-column: span 1;
	}
}

/* Karten-Basis */
.sl-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px 32px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
	scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 32px);
}

.sl-service-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 12px 12px 0 var(--c-azur);
}

.sl-service-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.sl-service-card-num {
	font: 350 italic 2.5rem/1 var(--f-serif);
	color: var(--c-marine);
}

.sl-service-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
}

.sl-service-card-icon .sl-icon {
	width: 28px;
	height: 28px;
}

.sl-service-card-title {
	font: 350 clamp(1.5rem, 2.5vw, 2.25rem)/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-service-card-title em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-service-card-lede {
	font: 400 1rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
	max-width: 50ch;
}

.sl-service-card-bullets {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-service-card-bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
}

.sl-service-card-bullets li .sl-icon {
	color: var(--c-azur);
	flex-shrink: 0;
}

.sl-service-card-foot {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 25%, transparent);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}

.sl-service-card-meta {
	font: 500 0.75rem/1.2 var(--f-mono);
	letter-spacing: 0.06em;
	color: var(--c-mute);
}

.sl-service-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-marine);
	text-decoration: none;
	font: 500 0.9375rem/1 var(--f-sans);
	border-bottom: 1.5px solid var(--c-marine);
	padding-bottom: 2px;
	transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease), gap var(--d-2) var(--ease);
}

.sl-service-card-link:hover {
	color: var(--c-azur);
	border-bottom-color: var(--c-azur);
	gap: 12px;
}

/* Marine-Variante (Karte 06) */
.sl-service-card--marine {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-service-card--marine:hover {
	box-shadow: 12px 12px 0 var(--c-ink);
}

.sl-service-card--marine .sl-service-card-num {
	color: var(--c-azur-l, #aacaff);
}

.sl-service-card--marine .sl-service-card-icon {
	background: var(--c-azur);
	color: var(--c-paper);
	border-color: var(--c-paper);
}

.sl-service-card--marine .sl-service-card-title,
.sl-service-card--marine .sl-service-card-title em {
	color: var(--c-paper);
}

.sl-service-card--marine .sl-service-card-lede {
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
}

.sl-service-card--marine .sl-service-card-bullets li {
	color: var(--c-paper);
}

.sl-service-card--marine .sl-service-card-bullets li .sl-icon {
	color: var(--c-azur-l, #aacaff);
}

.sl-service-card--marine .sl-service-card-foot {
	border-top-color: color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-service-card--marine .sl-service-card-meta {
	color: color-mix(in srgb, var(--c-paper) 65%, transparent);
}

.sl-service-card--marine .sl-service-card-link {
	color: var(--c-azur-l, #aacaff);
	border-bottom-color: var(--c-azur-l, #aacaff);
}

.sl-service-card--marine .sl-service-card-link:hover {
	color: var(--c-paper);
	border-bottom-color: var(--c-paper);
}

@media (max-width: 600px) {
	.sl-service-card {
		padding: 28px 22px;
	}
	.sl-service-card-foot {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   ÜBER UNS — Hero, Stats, Stance, Promises, Quote, Timeline
   v1.7.3 — Pattern-basiertes Layout im Editorial-Stil
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── ABOUT HERO ────────────────────────────────────────────────────────── */

.sl-about-hero {
	position: relative;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-cream);
	overflow: hidden;
	isolation: isolate;
}

.sl-about-hero-bg-mark {
	position: absolute;
	bottom: -0.15em;
	left: -0.05em;
	font: 350 italic clamp(10rem, 28vw, 28rem)/0.85 var(--f-serif);
	color: var(--c-paper);
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
	letter-spacing: -0.04em;
	white-space: nowrap;
}

.sl-about-hero-inner {
	position: relative;
	z-index: 1;
}

.sl-about-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

@media (max-width: 960px) {
	.sl-about-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

.sl-about-hero-meta {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 32px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.sl-about-hero-meta-sep {
	color: var(--c-azur);
}

.sl-about-hero-title {
	font: 350 clamp(2.5rem, 7vw, 6rem)/0.95 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
}

.sl-about-hero-title em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-about-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 50ch;
	margin: 0 0 40px;
}

.sl-about-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.sl-about-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-about-hero-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-about-hero-btn--azur:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
	background: var(--c-marine);
}

.sl-about-hero-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-ink);
}

.sl-about-hero-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
}

/* Hero-Figure (Portrait) */
.sl-about-hero-figure {
	margin: 0;
	position: relative;
	border: 3px solid var(--c-ink);
	box-shadow: 12px 12px 0 var(--c-marine);
	background: var(--c-bone);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sl-about-hero-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	flex: 1;
}

.sl-about-hero-figure-placeholder {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background:
		linear-gradient(135deg, var(--c-marine) 0%, var(--c-azur) 100%);
	color: var(--c-paper);
	padding: 24px;
}

.sl-about-hero-figure-initials {
	font: 350 italic clamp(4rem, 10vw, 7rem)/1 var(--f-serif);
	letter-spacing: -0.04em;
}

.sl-about-hero-figure-caption {
	font: 500 0.6875rem/1.3 var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	text-align: center;
}

.sl-about-hero-figcaption {
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 3px solid var(--c-ink);
}

.sl-about-hero-figcaption-name {
	font: 500 1rem/1.2 var(--f-sans);
	color: var(--c-paper);
}

.sl-about-hero-figcaption-role {
	font: 500 0.6875rem/1.3 var(--f-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-paper) 70%, transparent);
}

@media (max-width: 480px) {
	.sl-about-hero-actions {
		flex-direction: column;
	}
	.sl-about-hero-btn {
		justify-content: center;
		text-align: center;
	}
}

/* ─── ABOUT STATS ────────────────────────────────────────────────────────── */

.sl-about-stats {
	padding: clamp(3rem, 6vw, 5rem) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-about-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
}

@media (max-width: 900px) {
	.sl-about-stats-grid {
		grid-template-columns: 1fr;
	}
}

.sl-about-stat {
	padding: 36px 32px;
	border-right: 1px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-about-stat:last-child {
	border-right: 0;
}

@media (max-width: 900px) {
	.sl-about-stat {
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
	}
	.sl-about-stat:last-child {
		border-bottom: 0;
	}
}

.sl-about-stat--accent {
	background: color-mix(in srgb, var(--c-marine) 75%, var(--c-ink));
}

.sl-about-stat-num {
	font: 350 italic clamp(3rem, 6vw, 5rem)/0.95 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-azur-l, #aacaff);
	display: block;
}

.sl-about-stat-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-paper);
	display: block;
}

.sl-about-stat-text {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	margin: 8px 0 0;
}

/* ─── ABOUT STANCE ───────────────────────────────────────────────────────── */

.sl-about-stance {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-about-stance-h2 {
	font: 350 var(--fs-h2)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	max-width: 14ch;
	margin: 0 0 56px;
}

.sl-about-stance-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-about-stance-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 960px) {
	.sl-about-stance-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-about-stance-text p {
	font: 400 1.0625rem/1.6 var(--f-sans);
	color: var(--c-ink);
	margin: 0 0 1.25em;
	max-width: 50ch;
}

.sl-about-stance-text p:last-child {
	margin-bottom: 0;
}

.sl-about-versus {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 3px solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-marine);
}

@media (max-width: 720px) {
	.sl-about-versus {
		grid-template-columns: 1fr;
	}
}

.sl-about-versus-col {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sl-about-versus-col--them {
	background: var(--c-paper);
	border-right: 1.5px solid var(--c-ink);
}

@media (max-width: 720px) {
	.sl-about-versus-col--them {
		border-right: 0;
		border-bottom: 1.5px solid var(--c-ink);
	}
}

.sl-about-versus-col--us {
	background: var(--c-marine);
	color: var(--c-paper);
}

.sl-about-versus-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
}

.sl-about-versus-col--them .sl-about-versus-label {
	color: var(--c-mute);
}

.sl-about-versus-col--us .sl-about-versus-label {
	color: var(--c-azur-l, #aacaff);
}

.sl-about-versus-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sl-about-versus-list li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font: 400 0.9375rem/1.45 var(--f-sans);
}

.sl-about-versus-step {
	font: 350 italic 1rem/1 var(--f-serif);
	color: var(--c-mute);
	flex-shrink: 0;
	min-width: 24px;
}

.sl-about-versus-col--us .sl-about-versus-step {
	color: var(--c-azur-l, #aacaff);
}

.sl-about-versus-conclusion {
	margin: 8px 0 0;
	padding-top: 12px;
	border-top: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
	font: 380 italic 0.9375rem/1.4 var(--f-serif);
}

/* ─── ABOUT PROMISES ─────────────────────────────────────────────────────── */

.sl-about-promises {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-about-promises-h2 {
	margin-bottom: 16px;
}

.sl-about-promises-lead {
	max-width: 54ch;
	margin: 0 0 56px;
	color: var(--c-mute);
}

.sl-about-promises-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.sl-about-promises-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.sl-about-promises-grid {
		grid-template-columns: 1fr;
	}
}

.sl-about-promise {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-about-promise:hover {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--c-azur);
}

.sl-about-promise-num {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur);
}

.sl-about-promise-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 2px solid var(--c-ink);
}

.sl-about-promise-icon .sl-icon {
	width: 22px;
	height: 22px;
}

.sl-about-promise h3 {
	font: 380 1.375rem/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-about-promise p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

/* ─── ABOUT QUOTE ────────────────────────────────────────────────────────── */

.sl-about-quote {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	position: relative;
	overflow: hidden;
}

.sl-about-quote::before {
	content: "";
	position: absolute;
	top: -2px; left: 0; right: 0;
	height: 3px;
	background: var(--c-ink);
}

.sl-about-quote::after {
	content: "";
	position: absolute;
	bottom: -2px; left: 0; right: 0;
	height: 3px;
	background: var(--c-ink);
}

.sl-about-quote-fig {
	margin: 0;
	max-width: 880px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
	position: relative;
}

.sl-about-quote-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 3px solid var(--c-paper);
}

.sl-about-quote-mark .sl-icon {
	width: 32px;
	height: 32px;
}

.sl-about-quote-text {
	margin: 0;
	border: none;
	padding: 0;
}

.sl-about-quote-text p {
	font: 380 clamp(1.5rem, 3.5vw, 2.5rem)/1.3 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-paper);
	margin: 0;
	max-width: 24ch;
}

.sl-about-quote-sig {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 20px;
	border-top: 1px dashed color-mix(in srgb, var(--c-paper) 35%, transparent);
}

.sl-about-quote-sig-name {
	font: 500 1.0625rem/1.2 var(--f-sans);
	color: var(--c-paper);
}

.sl-about-quote-sig-role {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
}

/* ─── ABOUT TIMELINE — Über-uns-Sektion mit Editorial-Zeitstrahl ─────────── */

.sl-about-timeline-section {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-about-timeline-section .sl-about-timeline-h2 {
	font: 350 var(--fs-h2)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	max-width: 14ch;
	margin: 0 0 56px;
}

.sl-about-timeline-section .sl-about-timeline-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-about-timeline-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1.5px solid var(--c-ink);
}

.sl-about-timeline-list .sl-about-timeline-item {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 48px;
	padding: 40px 0;
	border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink) 25%, transparent);
	align-items: start;
}

.sl-about-timeline-list .sl-about-timeline-item:last-child {
	border-bottom: 1.5px solid var(--c-ink);
}

@media (max-width: 720px) {
	.sl-about-timeline-list .sl-about-timeline-item {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 32px 0;
	}
}

.sl-about-timeline-list .sl-about-timeline-year {
	font: 350 italic clamp(2.25rem, 4.5vw, 3.5rem)/1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-marine);
	display: block;
	margin: 0;
	padding-top: 0.1em;
	white-space: nowrap;
}

.sl-about-timeline-list .sl-about-timeline-item--now .sl-about-timeline-year {
	color: var(--c-azur);
}

.sl-about-timeline-list .sl-about-timeline-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 56ch;
	padding-top: 0.3em;
}

.sl-about-timeline-list .sl-about-timeline-body strong {
	font: 380 clamp(1.375rem, 2.2vw, 1.75rem)/1.2 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	font-weight: 400;
	display: block;
}

.sl-about-timeline-list .sl-about-timeline-body p {
	font: 400 1rem/1.6 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   ÜBER UNS — Briefing-Überarbeitung
   v1.7.7 — Hero-Trust-Bar, Audience-Sektion, Process, Works, FAQ, CTA
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO: TRUST-BAR (vier Werte) ──────────────────────────────────────── */

.sl-about-hero-trust {
	list-style: none;
	margin: 48px 0 0;
	padding: 24px 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sl-about-hero-trust li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sl-about-hero-trust-num {
	font: 350 italic clamp(1.5rem, 2.6vw, 2rem)/1 var(--f-serif);
	color: var(--c-marine);
	letter-spacing: var(--ls-tight);
}

.sl-about-hero-trust-label {
	font: 500 0.6875rem/1.35 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

@media (max-width: 720px) {
	.sl-about-hero-trust {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 380px) {
	.sl-about-hero-trust {
		grid-template-columns: 1fr;
	}
}

/* ─── § 02 ABOUT AUDIENCE — Zielgruppen + Pain-Points ─────────────────── */

.sl-about-audience {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-about-audience-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-about-audience-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-about-audience-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 64ch;
	margin: 0 0 56px;
}

.sl-about-audience-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-about-audience-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-about-audience-col-title {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-about-audience-types {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sl-about-audience-types li {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 400 1.0625rem/1.4 var(--f-sans);
	color: var(--c-ink);
	padding: 8px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-about-audience-types li:last-child {
	border-bottom: none;
}

.sl-about-audience-types li .sl-icon {
	color: var(--c-azur);
	flex-shrink: 0;
}

.sl-about-audience-pains {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sl-about-audience-pains li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	background: var(--c-paper);
	border-left: 3px solid var(--c-azur);
}

.sl-about-audience-pains strong {
	font: 380 italic 1.0625rem/1.4 var(--f-serif);
	color: var(--c-ink);
	font-weight: 400;
}

.sl-about-audience-pains span {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
}

.sl-about-audience-region {
	margin: 48px 0 0;
	padding: 24px 28px;
	background: var(--c-marine);
	color: var(--c-paper);
	font: 400 1rem/1.55 var(--f-sans);
	max-width: none;
}

.sl-about-audience-region .sl-link-u {
	color: var(--c-azur-l, #aacaff);
	border-bottom-color: var(--c-azur-l, #aacaff);
}

.sl-about-audience-region .sl-link-u:hover {
	color: var(--c-paper);
	border-bottom-color: var(--c-paper);
}

/* ─── § 04 ABOUT PROCESS — Sechs-Schritte-Prozess ─────────────────────── */

.sl-about-process {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-about-process-h2 {
	font: 350 var(--fs-h2)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	max-width: 14ch;
	margin: 0 0 24px;
}

.sl-about-process-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-about-process-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 62ch;
	margin: 0 0 56px;
}

.sl-about-process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	counter-reset: process;
}

@media (max-width: 1024px) {
	.sl-about-process-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.sl-about-process-list {
		grid-template-columns: 1fr;
	}
}

.sl-about-process-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-about-process-step:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-about-process-step--accent {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-about-process-step--accent:hover {
	box-shadow: 8px 8px 0 var(--c-ink);
}

.sl-about-process-num {
	font: 350 italic 2rem/1 var(--f-serif);
	color: var(--c-marine);
	display: block;
}

.sl-about-process-step--accent .sl-about-process-num {
	color: var(--c-azur-l, #aacaff);
}

.sl-about-process-body strong {
	font: 380 1.25rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	display: block;
	margin: 0 0 6px;
}

.sl-about-process-step--accent .sl-about-process-body strong {
	color: var(--c-paper);
}

.sl-about-process-body p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-about-process-step--accent .sl-about-process-body p {
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
}

/* ─── § 06 ABOUT WORKS — Projekte mit Mini-CTA ────────────────────────── */

.sl-about-works {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-about-works-h2 {
	font: 350 var(--fs-h2)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 20px;
	max-width: 18ch;
}

.sl-about-works-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-about-works-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 62ch;
	margin: 0 0 48px;
}

.sl-about-works .sl-works-list,
.sl-about-works .sl-about-works-list {
	margin: 0 0 40px;
}

.sl-about-works-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	padding: 28px 32px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-about-works-cta p {
	margin: 0;
	font: 400 1.0625rem/1.5 var(--f-sans);
	max-width: 60ch;
	color: var(--c-paper);
}

.sl-about-works-cta p strong {
	display: block;
	font: 380 1.25rem/1.2 var(--f-serif);
	font-weight: 400;
	margin-bottom: 4px;
}

.sl-about-works-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 2px solid var(--c-paper);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease);
	white-space: nowrap;
	flex-shrink: 0;
}

.sl-about-works-cta-link:hover {
	transform: translateX(4px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-about-works-foot {
	margin: 32px 0 0;
	text-align: center;
	font: 400 0.9375rem/1.4 var(--f-sans);
}

/* ─── § 08 ABOUT CTA — Abschluss mit Telefon + Meta ───────────────────── */

.sl-about-cta {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-about-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 960px) {
	.sl-about-cta-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-about-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-about-cta-h2 {
	font: 350 clamp(2rem, 5vw, 4rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-about-cta-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-about-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 40px;
}

.sl-about-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-about-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-about-cta-btn .sl-icon {
	width: 20px;
	height: 20px;
}

.sl-about-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}

.sl-about-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-about-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-about-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur-l, #aacaff);
}

@media (max-width: 480px) {
	.sl-about-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-about-cta-btn {
		justify-content: center;
	}
}

.sl-about-cta-side {
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
	padding: 28px 28px;
}

.sl-about-cta-meta {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.sl-about-cta-meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 20px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-about-cta-meta > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-about-cta-meta dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0;
}

.sl-about-cta-meta dt .sl-icon {
	color: var(--c-azur-l, #aacaff);
}

.sl-about-cta-meta dd {
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-paper);
	margin: 0;
}

.sl-about-cta-meta dd a {
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--c-azur-l, #aacaff);
}

.sl-about-cta-meta dd a:hover {
	border-bottom-color: var(--c-paper);
}

/* ════════════════════════════════════════════════════════════════════════════
   LEISTUNGSSEITE — Briefing-Überarbeitung v1.7.8
   Hero-Trust · Problem · Decision · Onehand · Process · Works · CTA
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO: Buttons + Trust-Bar ────────────────────────────────────────── */

.sl-services-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 40px 0 0;
}

.sl-services-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-services-hero-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-services-hero-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-services-hero-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-ink);
}

.sl-services-hero-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-services-hero-trust {
	list-style: none;
	margin: 56px 0 0;
	padding: 28px 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sl-services-hero-trust li {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sl-services-hero-trust-num {
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-azur);
}

.sl-services-hero-trust-label {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
}

@media (max-width: 900px) {
	.sl-services-hero-trust {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.sl-services-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-services-hero-btn {
		justify-content: center;
	}
}

@media (max-width: 380px) {
	.sl-services-hero-trust {
		grid-template-columns: 1fr;
	}
}

/* ─── § 01 PROBLEM/LÖSUNG ──────────────────────────────────────────────── */

.sl-services-problem {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-services-problem-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-services-problem-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-services-problem-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-services-problem-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-services-problem-text p {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 1.25em;
	max-width: 52ch;
}

.sl-services-problem-text p:last-child {
	margin-bottom: 0;
}

.sl-services-problem-list {
	list-style: none;
	margin: 0;
	padding: 28px 28px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-marine);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-services-problem-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 400 1rem/1.45 var(--f-sans);
	color: var(--c-ink);
	padding-bottom: 10px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-services-problem-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-services-problem-marker {
	font: 500 1.25rem/1 var(--f-mono);
	color: var(--c-marine);
	flex-shrink: 0;
}

/* ─── § 02 DECISION ────────────────────────────────────────────────────── */

.sl-services-decision {
	padding: var(--section-y) 0;
	background: var(--c-cream);
	scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 32px);
}

.sl-services-decision-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-services-decision-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-services-decision-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.sl-services-decision-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.sl-services-decision-grid {
		grid-template-columns: 1fr;
	}
}

.sl-services-decision-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-services-decision-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-services-decision-card--accent {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-services-decision-card--accent:hover {
	box-shadow: 8px 8px 0 var(--c-ink);
}

.sl-services-decision-when {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-services-decision-card--accent .sl-services-decision-when {
	color: var(--c-azur-l, #aacaff);
}

.sl-services-decision-then {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 380 1.5rem/1.15 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	margin: 0;
	letter-spacing: var(--ls-tight);
}

.sl-services-decision-card--accent .sl-services-decision-then {
	color: var(--c-paper);
}

.sl-services-decision-then .sl-icon {
	width: 28px;
	height: 28px;
	color: var(--c-azur);
	flex-shrink: 0;
}

.sl-services-decision-card--accent .sl-services-decision-then .sl-icon {
	color: var(--c-azur-l, #aacaff);
}

.sl-services-decision-text {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-services-decision-card--accent .sl-services-decision-text {
	color: color-mix(in srgb, var(--c-paper) 82%, transparent);
}

.sl-services-decision-link {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-marine);
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
	transition: gap var(--d-2) var(--ease);
}

.sl-services-decision-card--accent .sl-services-decision-link {
	color: var(--c-azur-l, #aacaff);
	border-top-color: color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-services-decision-card:hover .sl-services-decision-link {
	gap: 12px;
}

.sl-services-decision-foot {
	margin: 48px 0 0;
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-mute);
	text-align: center;
}

/* ─── § 03 GRID — Service-Cards (Erweiterungen) ────────────────────────── */

.sl-service-card-for {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

.sl-service-card-for strong {
	color: var(--c-marine);
	font-weight: 500;
}

.sl-service-card--marine .sl-service-card-for {
	color: var(--c-paper);
}

.sl-service-card--marine .sl-service-card-for strong {
	color: var(--c-azur-l, #aacaff);
}

.sl-services-grid-pricenote {
	margin: 40px 0 0;
	font: 400 italic 0.9375rem/1.5 var(--f-serif);
	color: var(--c-mute);
	max-width: 64ch;
}

.sl-services-grid-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	margin: 32px 0 0;
}

.sl-services-grid-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 26px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-azur);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-services-grid-cta-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-services-grid-cta-link {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
	border-bottom: 1.5px solid var(--c-marine);
	padding-bottom: 2px;
	text-decoration: none;
}

.sl-services-grid-cta-link:hover {
	color: var(--c-marine);
}

/* ─── § 04 ONEHAND ─────────────────────────────────────────────────────── */

.sl-services-onehand {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-section-mark--light .sl-section-mark-num {
	color: var(--c-azur-l, #aacaff);
}

.sl-section-mark--light .sl-section-mark-label {
	color: color-mix(in srgb, var(--c-paper) 75%, transparent);
}

.sl-section-mark--light .sl-section-mark-label strong {
	color: var(--c-paper);
}

.sl-services-onehand-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 32px;
	max-width: 22ch;
}

.sl-services-onehand-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-services-onehand-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 70ch;
	margin: 0 0 56px;
}

.sl-services-onehand-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1024px) {
	.sl-services-onehand-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sl-services-onehand-grid {
		grid-template-columns: 1fr;
	}
}

.sl-services-onehand-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
}

.sl-services-onehand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 2px solid var(--c-paper);
}

.sl-services-onehand-icon .sl-icon {
	width: 22px;
	height: 22px;
}

.sl-services-onehand-card h3 {
	font: 380 1.25rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-paper);
	margin: 0;
}

.sl-services-onehand-card p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 78%, transparent);
	margin: 0;
}

/* ─── § 05 PROCESS ─────────────────────────────────────────────────────── */

.sl-services-process {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-services-process-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-services-process-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-services-process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.sl-services-process-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sl-services-process-list {
		grid-template-columns: 1fr;
	}
}

.sl-services-process-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	position: relative;
}

.sl-services-process-step--accent {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-services-process-num {
	font: 350 italic 2.25rem/1 var(--f-serif);
	color: var(--c-marine);
	display: block;
}

.sl-services-process-step--accent .sl-services-process-num {
	color: var(--c-azur-l, #aacaff);
}

.sl-services-process-body strong {
	font: 380 1.25rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	display: block;
	margin: 0 0 6px;
}

.sl-services-process-step--accent .sl-services-process-body strong {
	color: var(--c-paper);
}

.sl-services-process-body p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-services-process-step--accent .sl-services-process-body p {
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
}

.sl-services-process-note {
	margin: 48px 0 0;
	padding: 24px 28px;
	background: var(--c-paper);
	border-left: 4px solid var(--c-azur);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-services-process-note-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur);
}

.sl-services-process-note p {
	font: 400 italic 1.0625rem/1.55 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
	max-width: 70ch;
}

/* ─── § 06 WORKS auf Leistungs-Seite ───────────────────────────────────── */

.sl-services-works {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-services-works-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 20px;
	max-width: 22ch;
}

.sl-services-works-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-services-works-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 64ch;
	margin: 0 0 48px;
}

.sl-services-works .sl-works-list,
.sl-services-works .sl-services-works-list {
	margin: 0 0 40px;
}

.sl-services-works-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: center;
	padding: 32px 0 0;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
}

.sl-services-works-foot-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 0.9375rem/1 var(--f-sans);
	color: var(--c-ink);
	text-decoration: none;
	padding: 12px 0;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-services-works-foot-link:hover {
	color: var(--c-marine);
	border-bottom-color: var(--c-marine);
}

.sl-services-works-foot-link--primary {
	background: var(--c-marine);
	color: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-azur);
	padding: 14px 24px;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-services-works-foot-link--primary:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azur);
	color: var(--c-paper);
}

/* ─── § 08 CTA ─────────────────────────────────────────────────────────── */

.sl-services-cta {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-services-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 960px) {
	.sl-services-cta-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-services-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-services-cta-h2 {
	font: 350 clamp(2rem, 5vw, 4rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-services-cta-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-services-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 40px;
}

.sl-services-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-services-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-services-cta-btn .sl-icon {
	width: 20px;
	height: 20px;
}

.sl-services-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}

.sl-services-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-services-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-services-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur-l, #aacaff);
}

@media (max-width: 480px) {
	.sl-services-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-services-cta-btn {
		justify-content: center;
	}
}

.sl-services-cta-side {
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
	padding: 28px 28px;
}

.sl-services-cta-meta {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.sl-services-cta-meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 20px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-services-cta-meta > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-services-cta-meta dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0;
}

.sl-services-cta-meta dd {
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-paper);
	margin: 0;
}

.sl-services-cta-meta dd a {
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--c-azur-l, #aacaff);
}

.sl-services-cta-meta dd a:hover {
	border-bottom-color: var(--c-paper);
}

/* ════════════════════════════════════════════════════════════════════════════
   KONTAKTSEITE — Briefing-Überarbeitung v1.7.9
   Hero · Channels · When · After · Form-Trust · FAQ · Final-CTA
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── HERO: Buttons + Trust ────────────────────────────────────────────── */

.sl-contact-hero {
	position: relative;
	overflow: hidden;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-paper);
}

.sl-contact-hero-bg-mark {
	position: absolute;
	right: -4vw;
	top: 20%;
	font: 350 italic clamp(8rem, 22vw, 22rem)/0.86 var(--f-serif);
	color: color-mix(in srgb, var(--c-marine) 6%, transparent);
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.sl-contact-hero-inner {
	position: relative;
	z-index: 1;
}

.sl-contact-hero-meta {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 32px;
}

.sl-contact-hero-meta-sep {
	color: var(--c-azur);
}

.sl-contact-hero-title {
	font: 350 var(--fs-display)/0.95 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 18ch;
}

.sl-contact-hero-title em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-contact-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 62ch;
	margin: 0 0 36px;
}

.sl-contact-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-contact-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-contact-hero-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-contact-hero-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-contact-hero-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-ink);
}

.sl-contact-hero-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-contact-hero-trust {
	list-style: none;
	margin: 56px 0 0;
	padding: 28px 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sl-contact-hero-trust li {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sl-contact-hero-trust-num {
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-azur);
}

.sl-contact-hero-trust-label {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
}

@media (max-width: 900px) {
	.sl-contact-hero-trust {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.sl-contact-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-contact-hero-btn {
		justify-content: center;
	}
}

@media (max-width: 380px) {
	.sl-contact-hero-trust {
		grid-template-columns: 1fr;
	}
}

/* ─── § 01 CHANNELS ────────────────────────────────────────────────────── */

.sl-contact-channels {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-contact-channels-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-contact-channels-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-contact-channels-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.sl-contact-channels-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.sl-contact-channels-grid {
		grid-template-columns: 1fr;
	}
}

.sl-contact-channel-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-contact-channel-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-contact-channel-card--static {
	cursor: default;
}

.sl-contact-channel-card--static:hover {
	transform: none;
	box-shadow: 4px 4px 0 var(--c-marine);
}

.sl-contact-channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--c-marine);
	color: var(--c-paper);
}

.sl-contact-channel-icon .sl-icon {
	width: 22px;
	height: 22px;
}

.sl-contact-channel-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-contact-channel-value {
	font: 400 1.125rem/1.25 var(--f-serif);
	color: var(--c-ink);
}

.sl-contact-channel-text {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-mute);
	margin-top: auto;
}

/* ─── § 02 WHEN ────────────────────────────────────────────────────────── */

.sl-contact-when {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-contact-when-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-contact-when-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-contact-when-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-contact-when-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-contact-when-text p {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 1.25em;
	max-width: 52ch;
}

.sl-contact-when-text p:last-child {
	margin-bottom: 0;
}

.sl-contact-when-quotes {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-contact-when-quotes li {
	font: 380 italic 1.125rem/1.4 var(--f-serif);
	color: var(--c-marine);
	padding-left: 16px;
	border-left: 3px solid var(--c-azur);
}

.sl-contact-when-occasions-h {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-contact-when-occasions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sl-contact-when-occasions-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
	font: 400 1rem/1.4 var(--f-sans);
}

.sl-contact-when-occasions-list li:last-child {
	border-bottom: none;
}

.sl-contact-when-occasions-list li .sl-icon {
	color: var(--c-azur);
	flex-shrink: 0;
}

.sl-contact-when-occasions-list li a {
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-contact-when-occasions-list li a:hover {
	color: var(--c-marine);
	border-bottom-color: var(--c-marine);
}

/* ─── § 03 AFTER ───────────────────────────────────────────────────────── */

.sl-contact-after {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-contact-after-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-contact-after-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-contact-after-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.sl-contact-after-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sl-contact-after-list {
		grid-template-columns: 1fr;
	}
}

.sl-contact-after-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
}

.sl-contact-after-step--accent {
	background: var(--c-azur);
	border-color: var(--c-paper);
}

.sl-contact-after-num {
	font: 350 italic 2.25rem/1 var(--f-serif);
	color: var(--c-azur-l, #aacaff);
	display: block;
}

.sl-contact-after-step--accent .sl-contact-after-num {
	color: var(--c-paper);
}

.sl-contact-after-body strong {
	font: 380 1.25rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-paper);
	display: block;
	margin: 0 0 6px;
}

.sl-contact-after-body p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	margin: 0;
}

.sl-contact-after-step--accent .sl-contact-after-body p {
	color: color-mix(in srgb, var(--c-paper) 92%, transparent);
}

/* ─── § 04 FORM — Vertrauensblock links ────────────────────────────────── */

.sl-contact-section {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 56px;
	align-items: start;
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.sl-contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-contact-trust {
	position: sticky;
	top: calc(var(--header-h) + var(--bar-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 28px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-azur);
}

@media (max-width: 1024px) {
	.sl-contact-trust {
		position: static;
	}
}

.sl-contact-trust-h2 {
	font: 350 clamp(1.5rem, 2.5vw, 2rem)/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-paper);
	margin: 0;
	max-width: 20ch;
}

.sl-contact-trust-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-contact-trust-lede {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	margin: 0;
}

.sl-contact-trust-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-contact-trust-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 22%, transparent);
	font: 400 0.9375rem/1.45 var(--f-sans);
	color: var(--c-paper);
}

.sl-contact-trust-points li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-contact-trust-points li .sl-icon {
	color: var(--c-azur-l, #aacaff);
	flex-shrink: 0;
	margin-top: 3px;
}

.sl-contact-trust-quick {
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1.5px solid color-mix(in srgb, var(--c-paper) 28%, transparent);
}

.sl-contact-trust-quick-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0 0 8px;
}

.sl-contact-trust-quick-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 350 1.5rem/1 var(--f-serif);
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1.5px solid var(--c-azur-l, #aacaff);
	padding-bottom: 4px;
}

.sl-contact-trust-quick-link:hover {
	border-bottom-color: var(--c-paper);
}

.sl-contact-trust-quick-link .sl-icon {
	color: var(--c-azur-l, #aacaff);
}

.sl-contact-trust-quick-hint {
	margin: 8px 0 0;
	font: 400 0.875rem/1.4 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 70%, transparent);
}

/* ─── § 06 FINAL CTA ───────────────────────────────────────────────────── */

.sl-contact-final-cta {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
}

.sl-contact-final-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 960px) {
	.sl-contact-final-cta-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-contact-final-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-contact-final-cta-h2 {
	font: 350 clamp(2rem, 5vw, 4rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-contact-final-cta-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-contact-final-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 40px;
}

.sl-contact-final-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-contact-final-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-contact-final-cta-btn .sl-icon {
	width: 20px;
	height: 20px;
}

.sl-contact-final-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}

.sl-contact-final-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-contact-final-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-contact-final-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur-l, #aacaff);
}

@media (max-width: 480px) {
	.sl-contact-final-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-contact-final-cta-btn {
		justify-content: center;
	}
}

.sl-contact-final-cta-side {
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
	padding: 28px 28px;
}

.sl-contact-final-cta-meta {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.sl-contact-final-cta-meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 20px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-contact-final-cta-meta > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-contact-final-cta-meta dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0;
}

.sl-contact-final-cta-meta dd {
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-paper);
	margin: 0;
}

.sl-contact-final-cta-meta dd a {
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--c-azur-l, #aacaff);
}

.sl-contact-final-cta-meta dd a:hover {
	border-bottom-color: var(--c-paper);
}

/* Anker-Sektion: scroll-margin damit Sticky-Header nicht überdeckt */
.sl-contact-form-anchor {
	scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 24px);
}

/* ════════════════════════════════════════════════════════════════════════════
   LEISTUNGS-DETAILSEITEN — Template v1.8.0
   Breadcrumb · Hero · Problem · Compare · Scope · Outcomes · Process · Works ·
   Region · FAQ · CTA
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── BREADCRUMB ───────────────────────────────────────────────────────── */

.sl-service-breadcrumb {
	padding: 24px 0 0;
}

.sl-service-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
}

.sl-service-breadcrumb li {
	color: var(--c-mute);
}

.sl-service-breadcrumb li.sep {
	color: var(--c-azur);
}

.sl-service-breadcrumb a {
	color: var(--c-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}

.sl-service-breadcrumb a:hover {
	color: var(--c-marine);
	border-bottom-color: var(--c-marine);
}

.sl-service-breadcrumb [aria-current="page"] {
	color: var(--c-ink);
	font-weight: 600;
}

/* ─── HERO ─────────────────────────────────────────────────────────────── */

.sl-service-hero {
	position: relative;
	overflow: hidden;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-paper);
}

.sl-service-hero-bg-mark {
	position: absolute;
	right: -3vw;
	top: 18%;
	font: 350 italic clamp(6rem, 18vw, 18rem)/0.86 var(--f-serif);
	color: color-mix(in srgb, var(--c-marine) 5%, transparent);
	pointer-events: none;
	z-index: 0;
	user-select: none;
	white-space: nowrap;
}

.sl-service-hero-inner {
	position: relative;
	z-index: 1;
}

.sl-service-hero-meta {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 32px;
}

.sl-service-hero-meta-sep {
	color: var(--c-azur);
}

.sl-service-hero-title {
	font: 350 var(--fs-display)/0.96 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 22ch;
}

.sl-service-hero-title em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-service-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 64ch;
	margin: 0 0 36px;
}

.sl-service-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 48px;
}

.sl-service-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-service-hero-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-service-hero-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-service-hero-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-ink);
}

.sl-service-hero-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-service-hero-trust {
	list-style: none;
	margin: 0;
	padding: 28px 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sl-service-hero-trust li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.sl-service-hero-trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--c-marine);
	color: var(--c-paper);
	flex-shrink: 0;
}

.sl-service-hero-trust-icon .sl-icon {
	width: 18px;
	height: 18px;
}

.sl-service-hero-trust-label {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
}

@media (max-width: 900px) {
	.sl-service-hero-trust {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.sl-service-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-service-hero-btn {
		justify-content: center;
	}
}

/* ─── § 01 PROBLEM ─────────────────────────────────────────────────────── */

.sl-service-problem {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-service-problem-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 24ch;
}

.sl-service-problem-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-service-problem-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-service-problem-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-service-problem-text p {
	font: 380 var(--fs-lead)/1.6 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
	max-width: 56ch;
}

.sl-service-problem-list {
	list-style: none;
	margin: 0;
	padding: 28px 28px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-marine);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-service-problem-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 400 0.9375rem/1.45 var(--f-sans);
	color: var(--c-ink);
	padding-bottom: 10px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-service-problem-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-service-problem-marker {
	font: 500 1.25rem/1 var(--f-mono);
	color: var(--c-marine);
	flex-shrink: 0;
}

/* ─── § 02 COMPARE ─────────────────────────────────────────────────────── */

.sl-service-compare {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-service-compare-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 24ch;
}

.sl-service-compare-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-service-compare-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

@media (max-width: 900px) {
	.sl-service-compare-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.sl-service-compare-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px 32px;
	border: 2px solid var(--c-ink);
}

.sl-service-compare-col--them {
	background: color-mix(in srgb, var(--c-bone) 80%, var(--c-paper));
	box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-mute) 60%, transparent);
}

.sl-service-compare-col--us {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-service-compare-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-service-compare-col--us .sl-service-compare-label {
	color: var(--c-azur-l, #aacaff);
}

.sl-service-compare-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-service-compare-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 400 1rem/1.5 var(--f-sans);
	padding-bottom: 10px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-service-compare-col--us .sl-service-compare-list li {
	border-bottom-color: color-mix(in srgb, var(--c-paper) 22%, transparent);
	color: color-mix(in srgb, var(--c-paper) 90%, transparent);
}

.sl-service-compare-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-service-compare-mark {
	font: 600 1.125rem/1 var(--f-mono);
	flex-shrink: 0;
}

.sl-service-compare-mark--x {
	color: var(--c-mute);
}

.sl-service-compare-mark--check {
	color: var(--c-azur-l, #aacaff);
}

.sl-service-compare-conclusion {
	font: 380 italic 1rem/1.5 var(--f-serif);
	margin: 0;
}

.sl-service-compare-col--them .sl-service-compare-conclusion {
	color: var(--c-mute);
}

.sl-service-compare-col--us .sl-service-compare-conclusion {
	color: var(--c-paper);
}

/* ─── § 03 SCOPE ───────────────────────────────────────────────────────── */

.sl-service-scope {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-service-scope-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-service-scope-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.sl-service-scope-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sl-service-scope-grid {
		grid-template-columns: 1fr;
	}
}

.sl-service-scope-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-service-scope-item:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-service-scope-num {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	color: var(--c-azur);
}

.sl-service-scope-title {
	font: 380 1.125rem/1.25 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	margin: 0;
}

.sl-service-scope-text {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

/* ─── § 04 OUTCOMES ────────────────────────────────────────────────────── */

.sl-service-outcomes {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-service-outcomes-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-service-outcomes-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-service-outcomes-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

@media (max-width: 1100px) {
	.sl-service-outcomes-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {
	.sl-service-outcomes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {
	.sl-service-outcomes-grid {
		grid-template-columns: 1fr;
	}
}

.sl-service-outcomes-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 20px;
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
}

.sl-service-outcomes-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 2px solid var(--c-paper);
}

.sl-service-outcomes-icon .sl-icon {
	width: 20px;
	height: 20px;
}

.sl-service-outcomes-title {
	font: 380 1.0625rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-paper);
	margin: 0;
}

.sl-service-outcomes-text {
	font: 400 0.875rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	margin: 0;
}

/* ─── § 05 PROCESS ─────────────────────────────────────────────────────── */

.sl-service-process {
	padding: var(--section-y) 0;
	background: var(--c-cream);
	scroll-margin-top: calc(var(--header-h, 80px) + 24px);
}

.sl-service-process-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-service-process-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 1024px) {
	.sl-service-process-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sl-service-process-list {
		grid-template-columns: 1fr;
	}
}

.sl-service-process-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
}

.sl-service-process-step--accent {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-service-process-num {
	font: 350 italic 2.25rem/1 var(--f-serif);
	color: var(--c-marine);
	display: block;
}

.sl-service-process-step--accent .sl-service-process-num {
	color: var(--c-azur-l, #aacaff);
}

.sl-service-process-body strong {
	font: 380 1.25rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	display: block;
	margin: 0 0 6px;
}

.sl-service-process-step--accent .sl-service-process-body strong {
	color: var(--c-paper);
}

.sl-service-process-body p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-service-process-step--accent .sl-service-process-body p {
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
}

/* ─── § 06 WORKS ───────────────────────────────────────────────────────── */

.sl-service-works {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-service-works-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-service-works-h2 em {
	font-style: italic;
	color: var(--c-marine);
}

.sl-service-works-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.sl-service-work-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px 28px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-service-work-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-service-work-branche {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur);
}

.sl-service-work-name {
	font: 350 1.75rem/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-service-work-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.sl-service-work-fields > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sl-service-work-fields dt {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0;
}

.sl-service-work-fields dd {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

.sl-service-work-link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
	font: 500 0.9375rem/1 var(--f-sans);
	color: var(--c-marine);
	text-decoration: none;
	transition: gap var(--d-2) var(--ease);
}

.sl-service-work-card:hover .sl-service-work-link {
	gap: 14px;
}

.sl-service-works-foot {
	margin: 32px 0 0;
	font: 400 0.9375rem/1.4 var(--f-sans);
	text-align: center;
}

/* ─── § 07 REGION ──────────────────────────────────────────────────────── */

.sl-service-region {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-service-region-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-service-region-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.sl-service-region-h2 {
	font: 350 var(--fs-h2)/1.1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0;
	max-width: 18ch;
}

.sl-service-region-text p {
	font: 380 var(--fs-lead)/1.6 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
	max-width: 62ch;
}

.sl-service-region-text strong {
	color: var(--c-marine);
	font-weight: 500;
}

/* ─── § 08 FAQ ────────────────────────────────────────────────────────── */

.sl-service-faq {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

/* nutzt bestehende .sl-faq-Klassen aus dem allgemeinen FAQ-Stil */

/* ─── § 09 CTA ────────────────────────────────────────────────────────── */

.sl-service-cta {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
}

.sl-service-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

@media (max-width: 960px) {
	.sl-service-cta-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.sl-service-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-service-cta-h2 {
	font: 350 clamp(2rem, 5vw, 3.5rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-service-cta-h2 em {
	font-style: italic;
	color: var(--c-azur-l, #aacaff);
}

.sl-service-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 40px;
}

.sl-service-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-service-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-service-cta-btn .sl-icon {
	width: 20px;
	height: 20px;
}

.sl-service-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}

.sl-service-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-service-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-service-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-azur-l, #aacaff);
}

@media (max-width: 480px) {
	.sl-service-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-service-cta-btn {
		justify-content: center;
	}
}

.sl-service-cta-side {
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
	padding: 28px 28px;
}

.sl-service-cta-meta {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

.sl-service-cta-meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 20px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-service-cta-meta > div:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-service-cta-meta dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0;
}

.sl-service-cta-meta dd {
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-paper);
	margin: 0;
}

.sl-service-cta-meta dd a {
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--c-azur-l, #aacaff);
}

.sl-service-cta-meta dd a:hover {
	border-bottom-color: var(--c-paper);
}

/* ════════════════════════════════════════════════════════════════════════════
   PROJEKTBEREICH — v1.8.1
   Archive (Hero · Filter · Grid · Common · CTA) + Detail (Hero · Brief ·
   Situation/Goals · Steps · Tech · Results · Quote · Learn · Services ·
   Related · CTA)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── ARCHIVE: HERO ────────────────────────────────────────────────────── */

.sl-projects-hero {
	position: relative;
	overflow: hidden;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-paper);
}

.sl-projects-hero-bg-mark {
	position: absolute;
	right: -4vw;
	top: 22%;
	font: 350 italic clamp(8rem, 22vw, 22rem)/0.86 var(--f-serif);
	color: color-mix(in srgb, var(--c-marine) 6%, transparent);
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.sl-projects-hero-inner { position: relative; z-index: 1; }

.sl-projects-hero-meta {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 32px;
}

.sl-projects-hero-meta-sep { color: var(--c-azur); }

.sl-projects-hero-title {
	font: 350 var(--fs-display)/0.95 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 22ch;
}

.sl-projects-hero-title em { font-style: italic; color: var(--c-marine); }

.sl-projects-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 64ch;
	margin: 0 0 36px;
}

.sl-projects-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-projects-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-projects-hero-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-projects-hero-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-marine);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-projects-hero-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-ink);
}

.sl-projects-hero-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-projects-hero-trust {
	list-style: none;
	margin: 56px 0 0;
	padding: 28px 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sl-projects-hero-trust li {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sl-projects-hero-trust-num {
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-azur);
}

.sl-projects-hero-trust-label {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
}

@media (max-width: 700px) {
	.sl-projects-hero-trust { grid-template-columns: 1fr; }
	.sl-projects-hero-actions { flex-direction: column; align-items: stretch; }
	.sl-projects-hero-btn { justify-content: center; }
}

/* ─── ARCHIVE: FILTER-LEISTE ──────────────────────────────────────────── */

.sl-projects-filter {
	padding: var(--section-y) 0 calc(var(--section-y) / 2);
	background: var(--c-cream);
}

.sl-projects-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}

.sl-projects-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

.sl-projects-filter-btn:hover {
	box-shadow: 3px 3px 0 var(--c-marine);
	transform: translate(-1px, -1px);
}

.sl-projects-filter-btn.is-active {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 3px 3px 0 var(--c-azur);
}

/* ─── ARCHIVE: GRID ───────────────────────────────────────────────────── */

.sl-projects-grid-section {
	padding: calc(var(--section-y) / 2) 0 var(--section-y);
	background: var(--c-cream);
}

.sl-projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}

.sl-project-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 36px 32px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-project-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--c-azur);
}

.sl-project-card-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 20px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-project-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-project-card-branche { color: var(--c-azur); }

.sl-project-card-title {
	font: 350 clamp(1.75rem, 3vw, 2.25rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-project-card-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color var(--d-2) var(--ease);
}

.sl-project-card-title a:hover { border-bottom-color: var(--c-marine); }

.sl-project-card-projektart {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.sl-project-card-projektart-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-project-card-projektart-value {
	font: 400 1rem/1.3 var(--f-sans);
	color: var(--c-ink);
}

.sl-project-card-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sl-project-card-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.sl-project-card-fields > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sl-project-card-fields dt {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0;
}

.sl-project-card-fields dd {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

.sl-project-card-field--accent dt { color: var(--c-azur); }

.sl-project-card-field--accent dd {
	font-weight: 500;
}

.sl-project-card-leistungen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sl-project-card-tag {
	display: inline-block;
	padding: 6px 12px;
	border: 1.5px solid var(--c-ink);
	background: var(--c-bone);
	font: 500 0.8125rem/1.3 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-project-card-tag:hover {
	background: var(--c-marine);
	color: var(--c-paper);
}

.sl-project-card-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
}

.sl-project-card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 0.9375rem/1 var(--f-sans);
	color: var(--c-marine);
	text-decoration: none;
	transition: gap var(--d-2) var(--ease);
}

.sl-project-card:hover .sl-project-card-link { gap: 14px; }

/* ─── ARCHIVE: COMMON-SECTION ─────────────────────────────────────────── */

.sl-projects-common {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-projects-common-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-projects-common-grid { grid-template-columns: 1fr; gap: 40px; }
}

.sl-projects-common-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 18ch;
}

.sl-projects-common-h2 em { font-style: italic; color: var(--c-azur-l, #aacaff); }

.sl-projects-common-text p {
	font: 380 var(--fs-lead)/1.6 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	margin: 0;
	max-width: 52ch;
}

.sl-projects-common-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-projects-common-list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 18%, transparent);
}

.sl-projects-common-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--c-azur);
	color: var(--c-paper);
	flex-shrink: 0;
}

.sl-projects-common-icon .sl-icon { width: 16px; height: 16px; }

.sl-projects-common-label {
	font: 400 1rem/1.4 var(--f-sans);
	color: var(--c-paper);
}

/* ─── ARCHIVE-CTA ────────────────────────────────────────────────────── */

.sl-projects-archive-cta {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-projects-archive-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
	background: var(--c-marine);
	color: var(--c-paper);
	padding: 56px 56px;
	border: 3px solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-azur);
}

@media (max-width: 960px) {
	.sl-projects-archive-cta-inner { grid-template-columns: 1fr; gap: 40px; padding: 40px 32px; }
}

.sl-projects-archive-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-projects-archive-cta-h2 {
	font: 350 clamp(2rem, 5vw, 3.5rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-projects-archive-cta-h2 em { font-style: italic; color: var(--c-azur-l, #aacaff); }

.sl-projects-archive-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 32px;
}

.sl-projects-archive-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-projects-archive-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-paper);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-projects-archive-cta-btn .sl-icon { width: 18px; height: 18px; }

.sl-projects-archive-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 5px 5px 0 var(--c-paper);
}

.sl-projects-archive-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-projects-archive-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 5px 5px 0 var(--c-azur);
}

.sl-projects-archive-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-projects-archive-cta-side {
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
	padding: 24px 24px;
}

.sl-projects-archive-cta-meta {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.sl-projects-archive-cta-meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 16px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 25%, transparent);
}

.sl-projects-archive-cta-meta > div:last-child { border-bottom: none; padding-bottom: 0; }

.sl-projects-archive-cta-meta dt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0;
}

.sl-projects-archive-cta-meta dd {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-paper);
	margin: 0;
}

.sl-projects-archive-cta-meta dd a {
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--c-azur-l, #aacaff);
}

.sl-projects-archive-cta-meta dd a:hover { border-bottom-color: var(--c-paper); }

@media (max-width: 480px) {
	.sl-projects-archive-cta-actions { flex-direction: column; align-items: stretch; }
	.sl-projects-archive-cta-btn { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   PROJEKT-DETAIL — Hero, Sektionen
   ════════════════════════════════════════════════════════════════════════ */

/* ─── DETAIL: HERO ────────────────────────────────────────────────────── */

.sl-project-hero {
	position: relative;
	overflow: hidden;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-paper);
}

.sl-project-hero-bg-mark {
	position: absolute;
	right: -3vw;
	top: 8%;
	font: 350 italic clamp(6rem, 16vw, 14rem)/0.86 var(--f-serif);
	color: color-mix(in srgb, var(--c-marine) 5%, transparent);
	pointer-events: none;
	z-index: 0;
	user-select: none;
	white-space: nowrap;
}

.sl-project-hero-inner { position: relative; z-index: 1; }

.sl-project-hero-meta {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 32px;
}

.sl-project-hero-meta-sep { color: var(--c-azur); }

.sl-project-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 1024px) {
	.sl-project-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.sl-project-hero-title {
	font: 350 var(--fs-display)/0.96 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 24px;
	max-width: 18ch;
}

.sl-project-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 56ch;
	margin: 0 0 36px;
}

.sl-project-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-project-hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-project-hero-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-project-hero-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-marine);
}

.sl-project-hero-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-ink);
}

.sl-project-hero-btn--ghost:hover {
	background: var(--c-ink);
	color: var(--c-paper);
	transform: translate(-2px, -2px);
}

.sl-project-hero-card {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: 32px 28px;
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-project-hero-card-h2 {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 30%, transparent);
}

.sl-project-hero-card-meta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.sl-project-hero-card-meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 12px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 22%, transparent);
}

.sl-project-hero-card-meta > div:last-child { border-bottom: none; padding-bottom: 0; }

.sl-project-hero-card-meta dt {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	margin: 0;
}

.sl-project-hero-card-meta dd {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-paper);
	margin: 0;
}

.sl-project-hero-card-meta dd a {
	color: var(--c-paper);
	text-decoration: none;
	border-bottom: 1px solid var(--c-azur-l, #aacaff);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sl-project-hero-card-meta dd a:hover { border-bottom-color: var(--c-paper); }

.sl-project-hero-card-leistungen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sl-project-hero-card-leistungen li a { border-bottom: none; }

.sl-project-hero-card-leistungen li a:hover {
	color: var(--c-azur-l, #aacaff);
}

@media (max-width: 480px) {
	.sl-project-hero-actions { flex-direction: column; align-items: stretch; }
	.sl-project-hero-btn { justify-content: center; }
}

/* ─── DETAIL § 01 BRIEF ───────────────────────────────────────────────── */

.sl-project-brief {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-project-brief-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 48px;
}

@media (max-width: 1024px) {
	.sl-project-brief-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.sl-project-brief-grid { grid-template-columns: 1fr; }
}

.sl-project-brief-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
}

.sl-project-brief-card--accent {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-project-brief-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
}

.sl-project-brief-card--accent .sl-project-brief-label {
	color: var(--c-azur-l, #aacaff);
}

.sl-project-brief-card p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

.sl-project-brief-card--accent p { color: var(--c-paper); }

/* ─── DETAIL § 02 SITUATION + GOALS ───────────────────────────────────── */

.sl-project-situation {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-project-situation-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-project-situation-grid { grid-template-columns: 1fr; gap: 32px; }
}

.sl-project-situation-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 24px;
	max-width: 18ch;
}

.sl-project-situation-h2 em { font-style: italic; color: var(--c-marine); }

.sl-project-situation-text p {
	font: 380 var(--fs-lead)/1.6 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
	max-width: 56ch;
}

.sl-project-situation-goals {
	padding: 28px 28px;
	background: var(--c-cream);
	border: 2px solid var(--c-ink);
}

.sl-project-situation-goals-h {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-project-situation-goals-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sl-project-situation-goals-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	padding-bottom: 8px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-project-situation-goals-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sl-project-situation-goals-mark {
	color: var(--c-azur);
	font-weight: 600;
	flex-shrink: 0;
}

/* ─── DETAIL § 04 STEPS + TECH ────────────────────────────────────────── */

.sl-project-steps {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-project-steps-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 56px;
	max-width: 22ch;
}

.sl-project-steps-h2 em { font-style: italic; color: var(--c-marine); }

.sl-project-steps-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.sl-project-steps-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
}

.sl-project-steps-num {
	font: 350 italic 2rem/1 var(--f-serif);
	color: var(--c-marine);
	display: block;
}

.sl-project-steps-body strong {
	font: 380 1.125rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	display: block;
	margin: 0 0 6px;
}

.sl-project-steps-body p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-project-tech {
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	margin: 0;
}

.sl-project-tech summary {
	cursor: pointer;
	padding: 20px 28px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	border-bottom: 1.5px solid transparent;
	transition: background var(--d-2) var(--ease), border-bottom-color var(--d-2) var(--ease);
}

.sl-project-tech summary::-webkit-details-marker { display: none; }

.sl-project-tech[open] summary {
	background: var(--c-bone);
	border-bottom-color: var(--c-ink);
}

.sl-project-tech-summary-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
}

.sl-project-tech-summary-hint {
	font: 400 0.875rem/1.4 var(--f-sans);
	color: var(--c-mute);
}

.sl-project-tech-list {
	margin: 0;
	padding: 8px 0;
}

.sl-project-tech-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 16px;
	padding: 14px 28px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-project-tech-row:last-child { border-bottom: none; }

@media (max-width: 600px) {
	.sl-project-tech-row { grid-template-columns: 1fr; gap: 4px; }
}

.sl-project-tech-row dt {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0;
}

.sl-project-tech-row dd {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

/* ─── DETAIL § 05 RESULTS ─────────────────────────────────────────────── */

.sl-project-results {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
	border-bottom: 3px solid var(--c-ink);
}

.sl-project-results-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-project-results-h2 em { font-style: italic; color: var(--c-azur-l, #aacaff); }

.sl-project-results-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 16px;
}

@media (max-width: 900px) {
	.sl-project-results-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
	.sl-project-results-kpis { grid-template-columns: 1fr; }
}

.sl-project-results-kpi {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px 24px;
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
}

.sl-project-results-kpi-value {
	font: 350 clamp(2rem, 4vw, 3rem)/1 var(--f-serif);
	color: var(--c-azur-l, #aacaff);
	font-variant-numeric: tabular-nums;
}

.sl-project-results-kpi-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-paper) 70%, transparent);
}

.sl-project-results-kpis-note {
	font: 400 italic 0.875rem/1.5 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 65%, transparent);
	margin: 0 0 48px;
	max-width: 70ch;
}

.sl-project-results-kpis-note-mark {
	color: var(--c-azur-l, #aacaff);
	margin-right: 6px;
}

.sl-project-results-outcomes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.sl-project-results-outcome {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 20px;
	background: color-mix(in srgb, var(--c-marine) 60%, var(--c-ink));
	border: 1.5px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
}

.sl-project-results-outcome-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 2px solid var(--c-paper);
}

.sl-project-results-outcome-icon .sl-icon { width: 20px; height: 20px; }

.sl-project-results-outcome h3 {
	font: 380 1.0625rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-paper);
	margin: 0;
}

.sl-project-results-outcome p {
	font: 400 0.875rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	margin: 0;
}

/* ─── DETAIL § 06 QUOTE ───────────────────────────────────────────────── */

.sl-project-quote {
	padding: var(--section-y) 0;
	background: var(--c-cream);
}

.sl-project-quote-admin-note {
	background: #fff8d0;
	border: 1.5px solid #cc9000;
	color: #6b4500;
	padding: 12px 16px;
	margin-bottom: 24px;
	font: 400 0.875rem/1.5 var(--f-sans);
}

.sl-project-quote-block {
	position: relative;
	margin: 0;
	padding: 40px 56px;
	background: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-marine);
	max-width: 880px;
}

.sl-project-quote-mark {
	position: absolute;
	top: -8px;
	left: 24px;
	font: 350 italic 6rem/1 var(--f-serif);
	color: var(--c-azur);
	line-height: 1;
}

.sl-project-quote-text {
	font: 350 italic clamp(1.25rem, 2.2vw, 1.6rem)/1.45 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 28px;
}

.sl-project-quote-foot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 20px;
	border-top: 1.5px solid var(--c-ink);
}

.sl-project-quote-author {
	font: 500 0.9375rem/1.3 var(--f-sans);
	color: var(--c-marine);
	font-style: normal;
}

.sl-project-quote-role {
	font: 400 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-project-quote.is-placeholder .sl-project-quote-block {
	border-style: dashed;
	background: color-mix(in srgb, var(--c-paper) 92%, var(--c-bone));
}

.sl-project-quote-pending {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 4px 10px;
	background: var(--c-azur);
	color: var(--c-paper);
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	width: fit-content;
}

@media (max-width: 600px) {
	.sl-project-quote-block { padding: 32px 24px; }
	.sl-project-quote-mark { left: 12px; font-size: 4rem; }
}

/* ─── DETAIL § 07 LEARN ───────────────────────────────────────────────── */

.sl-project-learn {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-project-learn-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-project-learn-grid { grid-template-columns: 1fr; gap: 32px; }
}

.sl-project-learn-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-project-learn-h2 em { font-style: italic; color: var(--c-marine); }

.sl-project-learn-text p {
	font: 380 var(--fs-lead)/1.6 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
	max-width: 56ch;
}

.sl-project-learn-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sl-project-learn-list li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 18px 22px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 3px 3px 0 var(--c-marine);
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-ink);
}

.sl-project-learn-mark {
	color: var(--c-azur);
	font-weight: 600;
	font-size: 1.25rem;
	flex-shrink: 0;
}

/* ─── DETAIL § 08 SERVICES ────────────────────────────────────────────── */

.sl-project-services {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-project-services-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-project-services-h2 em { font-style: italic; color: var(--c-marine); }

.sl-project-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.sl-project-services-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 24px;
	background: var(--c-cream);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	color: var(--c-ink);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
}

.sl-project-services-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azur);
	background: var(--c-paper);
}

.sl-project-services-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--c-marine);
	color: var(--c-paper);
	flex-shrink: 0;
}

.sl-project-services-icon .sl-icon { width: 22px; height: 22px; }

.sl-project-services-label {
	font: 400 1rem/1.3 var(--f-sans);
	flex: 1;
}

.sl-project-services-arrow {
	color: var(--c-marine);
	display: inline-flex;
	transition: transform var(--d-2) var(--ease);
}

.sl-project-services-card:hover .sl-project-services-arrow {
	transform: translateX(4px);
}

/* ─── DETAIL § 09 RELATED ─────────────────────────────────────────────── */

.sl-project-related {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-project-related-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-project-related-h2 em { font-style: italic; color: var(--c-marine); }

.sl-project-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.sl-project-related-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 28px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 5px 5px 0 var(--c-marine);
	color: var(--c-ink);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-project-related-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-project-related-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur);
}

.sl-project-related-card-title {
	font: 350 1.5rem/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-project-related-card-projektart {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.sl-project-related-card-projektart-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

.sl-project-related-card-projektart span:last-child {
	font: 400 0.9375rem/1.3 var(--f-sans);
	color: var(--c-ink);
}

.sl-project-related-card-lede {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-project-related-card-link {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-marine);
	transition: gap var(--d-2) var(--ease);
}

.sl-project-related-card:hover .sl-project-related-card-link { gap: 14px; }

.sl-project-related-foot {
	margin: 32px 0 0;
	text-align: center;
	font: 400 0.9375rem/1.4 var(--f-sans);
}

/* ─── DETAIL § 10 CTA ─────────────────────────────────────────────────── */

.sl-project-cta {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
}

.sl-project-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-project-cta-h2 {
	font: 350 clamp(2rem, 5vw, 3.5rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 22ch;
}

.sl-project-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 40px;
}

.sl-project-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-project-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-project-cta-btn .sl-icon { width: 20px; height: 20px; }

.sl-project-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}

.sl-project-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-project-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-project-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

@media (max-width: 480px) {
	.sl-project-cta-actions { flex-direction: column; align-items: stretch; }
	.sl-project-cta-btn { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BLOG / RATGEBER — v1.9.0
   Single (Hero · Progress · Layout · TOC · Inline-Patterns · Footer · Author · Related · CTA · Nav)
   Archive (Hero · Filter · Liste)
   Editor-Elemente (Heading, Liste, Tabelle, Zitat, Code, Bild)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── PROGRESS-BAR ───────────────────────────────────────────────────── */

.sl-article-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	z-index: 9999;
	pointer-events: none;
}

.sl-article-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--c-marine), var(--c-azur));
	transition: width 0.06s linear;
}

@supports (animation-timeline: scroll()) {
	.sl-article-progress-bar {
		width: 100%;
		transform-origin: 0 50%;
		animation: sl-progress-grow linear;
		animation-timeline: scroll(root);
	}
	@keyframes sl-progress-grow {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-article-progress { display: none; }
}

/* ─── BREADCRUMB (Artikel + Archive) ─────────────────────────────────── */

.sl-article-breadcrumb {
	margin: 0 0 32px;
}

.sl-article-breadcrumb ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font: 500 var(--fs-meta)/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
}

.sl-article-breadcrumb li { display: inline-flex; }

.sl-article-breadcrumb a {
	color: var(--c-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--d-2) var(--ease), border-bottom-color var(--d-2) var(--ease);
}

.sl-article-breadcrumb a:hover {
	color: var(--c-marine);
	border-bottom-color: var(--c-marine);
}

.sl-article-breadcrumb .sep { color: var(--c-azur); }

.sl-article-breadcrumb [aria-current="page"] { color: var(--c-ink); }

/* ─── ARTICLE HERO ───────────────────────────────────────────────────── */

.sl-article-hero {
	position: relative;
	overflow: hidden;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-paper);
}

/* Tönungen je Kategorie-Hue */
.sl-article-hero--marine { background: var(--c-paper); }
.sl-article-hero--azur   { background: var(--c-paper); }
.sl-article-hero--cream  { background: var(--c-cream); }
.sl-article-hero--bone   { background: var(--c-bone); }

.sl-article-hero-bg-mark {
	position: absolute;
	right: -3vw;
	top: 18%;
	font: 350 italic clamp(7rem, 18vw, 18rem)/0.86 var(--f-serif);
	color: color-mix(in srgb, var(--c-marine) 5%, transparent);
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.sl-article-hero-inner { position: relative; z-index: 1; }

.sl-article-hero-meta {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0 0 32px;
}

.sl-article-hero-meta-sep { color: var(--c-azur); }

.sl-article-hero-title {
	font: 350 clamp(2rem, 5.5vw, 4.5rem)/1 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 28px;
	max-width: 22ch;
	text-wrap: balance;
}

.sl-article-hero-title em { font-style: italic; color: var(--c-marine); }

.sl-article-hero-lede {
	font: 380 clamp(1.125rem, 2vw, 1.5rem)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 60ch;
	margin: 0 0 40px;
}

.sl-article-hero-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px 32px;
	margin: 0 0 48px;
	padding: 24px 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	max-width: 880px;
}

.sl-article-hero-meta-grid > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sl-article-hero-meta-grid dt {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 0;
}

.sl-article-hero-meta-grid dd {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

.sl-article-hero-image {
	margin: 0;
	max-width: 1040px;
}

.sl-article-hero-img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-article-hero-visual {
	position: relative;
	height: clamp(180px, 28vw, 320px);
	max-width: 880px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 8px 8px 0 var(--c-azur);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 56px;
	overflow: hidden;
}

.sl-article-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(135deg, transparent 0 24px, color-mix(in srgb, var(--c-paper) 6%, transparent) 24px 25px);
	pointer-events: none;
}

.sl-article-hero-visual-num {
	font: 350 italic clamp(4rem, 10vw, 8rem)/1 var(--f-serif);
	color: color-mix(in srgb, var(--c-azur-l, #aacaff) 60%, transparent);
}

.sl-article-hero-visual-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
}

@media (max-width: 600px) {
	.sl-article-hero-meta-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-article-hero-visual { padding: 24px 28px; }
}

/* ─── ARTICLE LAYOUT (Content + Sticky TOC) ───────────────────────────── */

.sl-article-layout {
	padding: calc(var(--section-y) / 1.5) 0 var(--section-y);
	background: var(--c-paper);
}

.sl-article-layout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 64px;
	align-items: start;
	max-width: 1280px;
}

@media (max-width: 1024px) {
	.sl-article-layout-grid { grid-template-columns: 1fr; gap: 40px; }
}

.sl-article-content {
	max-width: 720px;
	min-width: 0;
}

.sl-article-aside {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

@media (max-width: 1024px) {
	.sl-article-aside { position: static; max-height: none; }
}

/* TOC */
.sl-toc {
	background: var(--c-cream);
	border: 2px solid var(--c-ink);
	padding: 24px 24px;
}

.sl-toc--mobile {
	display: block;
	margin-bottom: 40px;
}
@media (min-width: 1025px) {
	.sl-toc--mobile { display: none; }
}

.sl-toc--desktop {
	display: none;
}
@media (min-width: 1025px) {
	.sl-toc--desktop { display: block; }
}

.sl-toc-head {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-toc-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 4px;
}

.sl-toc-h2 {
	font: 350 1.375rem/1.1 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 6px;
}

.sl-toc-meta {
	font: 400 0.8125rem/1.4 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

/* details/summary für mobile TOC */
.sl-toc--mobile summary {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--c-ink);
}
.sl-toc--mobile summary::-webkit-details-marker { display: none; }

.sl-toc-summary-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
}

.sl-toc-summary-hint {
	font: 400 0.8125rem/1.4 var(--f-sans);
	color: var(--c-mute);
}

.sl-toc-list ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sl-toc-list li { margin: 0; }

.sl-toc-list a {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	color: var(--c-ink);
	text-decoration: none;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 14%, transparent);
	font: 400 0.9375rem/1.4 var(--f-sans);
	transition: color var(--d-2) var(--ease), padding-left var(--d-2) var(--ease);
}

.sl-toc-list li:last-child a { border-bottom: none; }

.sl-toc-list a:hover {
	color: var(--c-marine);
	padding-left: 4px;
}

.sl-toc-num {
	font: 500 var(--fs-meta)/1 var(--f-mono);
	color: var(--c-azur);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.sl-toc-label { flex: 1; }

/* Sidebar-CTA */
.sl-aside-cta {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: 24px 24px;
	border: 2px solid var(--c-ink);
}

.sl-aside-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: block;
	margin-bottom: 6px;
}

.sl-aside-cta-h {
	font: 350 1.25rem/1.1 var(--f-serif);
	color: var(--c-paper);
	margin: 0 0 10px;
}

.sl-aside-cta p {
	font: 400 0.875rem/1.5 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 85%, transparent);
	margin: 0 0 16px;
}

.sl-aside-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 2px solid var(--c-paper);
	font: 500 0.875rem/1 var(--f-sans);
	text-decoration: none;
	width: 100%;
	justify-content: center;
	box-shadow: 3px 3px 0 var(--c-paper);
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-aside-cta-btn:hover {
	transform: translate(-1px, -1px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-aside-cta-phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font: 400 0.8125rem/1.3 var(--f-mono);
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--c-paper) 80%, transparent);
	text-decoration: none;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 30%, transparent);
}

.sl-aside-cta-phone:hover {
	color: var(--c-azur-l, #aacaff);
	border-bottom-color: var(--c-azur-l, #aacaff);
}

/* ─── ARTICLE CONTENT — Editor-Elemente ───────────────────────────────── */

.sl-article-content {
	font: 400 1.0625rem/1.7 var(--f-sans);
	color: var(--c-ink);
}

/* H2 / H3 / H4 im Content */
.sl-article-content h2 {
	font: 350 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 56px 0 20px;
	padding-top: 24px;
	border-top: 1.5px solid var(--c-ink);
	scroll-margin-top: 96px;
}

.sl-article-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.sl-article-content h3 {
	font: 380 1.375rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
	margin: 40px 0 14px;
	scroll-margin-top: 96px;
}

.sl-article-content h4 {
	font: 500 1.0625rem/1.3 var(--f-sans);
	color: var(--c-marine);
	margin: 32px 0 10px;
	text-transform: none;
	letter-spacing: 0;
}

/* Absätze */
.sl-article-content p {
	margin: 0 0 20px;
	max-width: 70ch;
}

/* Erster Absatz nach H2 — Drop-Cap-Variante (optional via Klasse) */
.sl-article-content p.has-dropcap::first-letter {
	float: left;
	font: 350 italic 4.5rem/1 var(--f-serif);
	color: var(--c-marine);
	margin: 8px 12px 0 0;
}

/* Links im Fließtext */
.sl-article-content a:not(.wp-block-button__link):not(.sl-blog-inline-cta-btn):not(.sl-blog-faq-item a) {
	color: var(--c-marine);
	text-decoration: none;
	border-bottom: 1.5px solid color-mix(in srgb, var(--c-marine) 45%, transparent);
	transition: border-bottom-color var(--d-2) var(--ease);
}

.sl-article-content a:not(.wp-block-button__link):not(.sl-blog-inline-cta-btn):hover {
	border-bottom-color: var(--c-marine);
}

/* Externe Links erkennbar markieren */
.sl-article-content a[href^="http"]:not([href*="sl-webservice.de"])::after {
	content: " ↗";
	font-size: 0.85em;
	color: var(--c-azur);
}

/* Listen */
.sl-article-content ul,
.sl-article-content ol {
	margin: 0 0 24px;
	padding-left: 28px;
	max-width: 70ch;
}

.sl-article-content ul li,
.sl-article-content ol li {
	margin-bottom: 8px;
}

.sl-article-content ul li::marker {
	color: var(--c-azur);
}

.sl-article-content ol li::marker {
	color: var(--c-marine);
	font: 500 0.9em var(--f-mono);
}

/* Zitate */
.sl-article-content blockquote,
.sl-article-content .wp-block-quote {
	position: relative;
	margin: 40px 0;
	padding: 24px 0 24px 32px;
	border-left: 4px solid var(--c-azur);
	font: 350 italic 1.25rem/1.5 var(--f-serif);
	color: var(--c-ink);
	max-width: 70ch;
}

.sl-article-content blockquote p:last-child,
.sl-article-content .wp-block-quote p:last-child { margin-bottom: 0; }

.sl-article-content blockquote cite,
.sl-article-content .wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font: 500 0.8125rem/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	font-style: normal;
}

/* Bilder */
.sl-article-content .wp-block-image,
.sl-article-content figure {
	margin: 32px 0;
}

.sl-article-content .wp-block-image img,
.sl-article-content figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 2px solid var(--c-ink);
}

.sl-article-content .wp-block-image figcaption,
.sl-article-content figure figcaption {
	margin-top: 12px;
	font: 400 italic 0.875rem/1.4 var(--f-serif);
	color: var(--c-mute);
	text-align: left;
}

/* Tabellen — responsiv mit horizontalem Scroll bei Bedarf */
.sl-article-content .wp-block-table,
.sl-article-content table {
	overflow-x: auto;
	margin: 32px 0;
}

.sl-article-content table {
	width: 100%;
	border-collapse: collapse;
	font: 400 0.9375rem/1.5 var(--f-sans);
}

.sl-article-content table thead {
	background: var(--c-marine);
	color: var(--c-paper);
}

.sl-article-content table th,
.sl-article-content table td {
	padding: 12px 16px;
	text-align: left;
	border: 1.5px solid var(--c-ink);
}

.sl-article-content table th {
	font-weight: 500;
	letter-spacing: 0.02em;
}

.sl-article-content table tbody tr:nth-child(even) {
	background: var(--c-cream);
}

/* Code */
.sl-article-content code,
.sl-article-content .wp-block-code {
	font: 400 0.9em var(--f-mono);
	background: var(--c-bone);
	border: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent);
	padding: 2px 6px;
	color: var(--c-marine);
}

.sl-article-content pre,
.sl-article-content .wp-block-code pre {
	margin: 24px 0;
	padding: 20px 24px;
	background: var(--c-ink);
	color: var(--c-paper);
	border: 2px solid var(--c-ink);
	overflow-x: auto;
	font: 400 0.875rem/1.5 var(--f-mono);
}

.sl-article-content pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--c-paper);
}

/* Separator */
.sl-article-content hr,
.sl-article-content .wp-block-separator {
	margin: 40px 0;
	border: 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	max-width: 70ch;
}

/* Buttons (WP-Block) */
.sl-article-content .wp-block-button {
	margin: 24px 0;
}

.sl-article-content .wp-block-button__link {
	display: inline-flex;
	padding: 14px 22px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease);
}

.sl-article-content .wp-block-button__link:hover {
	transform: translate(-2px, -2px);
}

/* ─── INLINE-PATTERNS IM ARTIKEL ──────────────────────────────────────── */

/* Inline-CTA */
.sl-blog-inline-cta {
	margin: 48px 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-azur);
	max-width: 760px;
}

.sl-blog-inline-cta-inner { padding: 32px 32px; }

.sl-blog-inline-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: block;
	margin-bottom: 12px;
}

.sl-blog-inline-cta-h {
	font: 350 clamp(1.5rem, 3vw, 2rem)/1.15 var(--f-serif);
	color: var(--c-paper);
	margin: 0 0 12px;
	max-width: 24ch;
}

.sl-blog-inline-cta-text {
	font: 400 1rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	margin: 0 0 24px;
	max-width: 60ch;
}

.sl-blog-inline-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sl-blog-inline-cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 14px 22px;
	border: 2.5px solid var(--c-paper);
	font: 500 0.9375rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-blog-inline-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-paper);
}

.sl-blog-inline-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-blog-inline-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
}

.sl-blog-inline-cta-btn--ghost:hover {
	background: var(--c-paper);
	color: var(--c-marine);
}

@media (max-width: 480px) {
	.sl-blog-inline-cta-actions { flex-direction: column; align-items: stretch; }
	.sl-blog-inline-cta-btn { justify-content: center; }
}

/* Hinweisbox */
.sl-blog-note {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 20px;
	margin: 32px 0;
	padding: 24px 24px;
	background: var(--c-cream);
	border-left: 4px solid var(--c-marine);
	max-width: 760px;
}

.sl-blog-note-mark {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font: 350 italic 2.5rem/1 var(--f-serif);
	color: var(--c-marine);
}

.sl-blog-note-body { min-width: 0; }

.sl-blog-note-label {
	display: block;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 6px;
}

.sl-blog-note-body p {
	margin: 0;
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-ink);
}

/* Checkliste */
.sl-blog-checklist {
	margin: 32px 0;
	padding: 28px 28px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	max-width: 760px;
}

.sl-blog-checklist-head {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-blog-checklist-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 4px;
}

.sl-blog-checklist-h {
	font: 350 1.375rem/1.1 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
}

.sl-blog-checklist-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: none !important;
}

.sl-blog-checklist-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	margin: 0 !important;
}

.sl-blog-checklist-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--c-azur);
	color: var(--c-paper);
	font: 500 0.875rem/1 var(--f-mono);
	flex-shrink: 0;
}

/* Vergleichstabelle */
.sl-blog-compare {
	margin: 32px 0;
	max-width: 880px;
}

.sl-blog-compare-head { margin-bottom: 20px; }

.sl-blog-compare-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 4px;
}

.sl-blog-compare-h {
	font: 350 1.5rem/1.1 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
}

.sl-blog-compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.sl-blog-compare-grid { grid-template-columns: 1fr; }
}

.sl-blog-compare-col {
	padding: 24px 24px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
}

.sl-blog-compare-col--accent {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-blog-compare-col-head {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1.5px solid currentColor;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sl-blog-compare-col-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
}

.sl-blog-compare-col--accent .sl-blog-compare-col-label {
	color: var(--c-azur-l, #aacaff);
}

.sl-blog-compare-col-title {
	font: 380 1.375rem/1.2 var(--f-serif);
	font-weight: 400;
	color: var(--c-ink);
}

.sl-blog-compare-col--accent .sl-blog-compare-col-title {
	color: var(--c-paper);
}

.sl-blog-compare-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: none !important;
}

.sl-blog-compare-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font: 400 0.9375rem/1.5 var(--f-sans);
	margin: 0 !important;
}

.sl-blog-compare-col--accent .sl-blog-compare-list li {
	color: var(--c-paper);
}

.sl-blog-compare-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font: 600 0.875rem/1 var(--f-mono);
	flex-shrink: 0;
}

.sl-blog-compare-mark--plus  { background: var(--c-azur); color: var(--c-paper); }
.sl-blog-compare-mark--minus { background: var(--c-mute); color: var(--c-paper); }

.sl-blog-compare-col--accent .sl-blog-compare-mark--plus  { background: var(--c-azur-l, #aacaff); color: var(--c-marine); }
.sl-blog-compare-col--accent .sl-blog-compare-mark--minus { background: color-mix(in srgb, var(--c-paper) 30%, transparent); color: var(--c-paper); }

/* Praxisbeispiel */
.sl-blog-example {
	margin: 32px 0;
	padding: 28px 32px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-azur);
	max-width: 760px;
}

.sl-blog-example-head { margin-bottom: 20px; }

.sl-blog-example-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: block;
	margin-bottom: 4px;
}

.sl-blog-example-h {
	font: 350 1.5rem/1.15 var(--f-serif);
	color: var(--c-paper);
	margin: 0;
}

.sl-blog-example-body p {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-paper);
	margin: 0 0 12px;
}

.sl-blog-example-body p:last-child { margin-bottom: 0; }

.sl-blog-example-body strong {
	color: var(--c-azur-l, #aacaff);
	font-weight: 500;
}

/* „Kurz gesagt"-Summary */
.sl-blog-summary {
	margin: 32px 0;
	padding: 28px 32px;
	background: var(--c-bone);
	border: 2px solid var(--c-ink);
	max-width: 760px;
}

.sl-blog-summary-head {
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1.5px solid var(--c-ink);
}

.sl-blog-summary-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 4px;
}

.sl-blog-summary-h {
	font: 350 1.5rem/1.15 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
}

.sl-blog-summary-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: none !important;
}

.sl-blog-summary-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font: 400 1rem/1.5 var(--f-sans);
	color: var(--c-ink);
	margin: 0 !important;
}

.sl-blog-summary-num {
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-azur);
	flex-shrink: 0;
}

/* FAQ — Blog-Variante: gleicher Editorial-Stil wie Sektions-FAQ */
.sl-blog-faq {
	margin: 48px 0;
	max-width: 920px;
	counter-reset: sl-blog-faq;
}

.sl-blog-faq-head { margin-bottom: 28px; }

.sl-blog-faq-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 8px;
}

.sl-blog-faq-h {
	font: 350 clamp(1.375rem, 2.4vw, 1.875rem)/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-blog-faq-item {
	position: relative;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--c-ink);
	margin: 0;
	counter-increment: sl-blog-faq;
	transition: background var(--d-2) var(--ease);
}

/* Wenn das erste Item, oberer Border auch */
.sl-blog-faq-item:first-of-type {
	border-top: 2px solid var(--c-ink);
}

/* Marine-Akzent-Linie links */
.sl-blog-faq-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--c-marine);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.sl-blog-faq-item:hover::before,
.sl-blog-faq-item[open]::before {
	transform: scaleY(1);
}

.sl-blog-faq-item summary {
	display: flex;
	gap: 24px;
	align-items: baseline;
	cursor: pointer;
	list-style: none;
	padding: 24px 0 24px 24px;
	font: 350 clamp(1rem, 1.3vw, 1.1875rem)/1.35 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	transition: color var(--d-2) var(--ease), padding-left var(--d-2) var(--ease);
}
.sl-blog-faq-item summary::-webkit-details-marker { display: none; }
.sl-blog-faq-item summary::marker { content: ""; }

.sl-blog-faq-item summary:hover,
.sl-blog-faq-item[open] summary {
	color: var(--c-marine);
	padding-left: 36px;
}

.sl-blog-faq-item summary::before {
	content: counter(sl-blog-faq, lower-roman) ".";
	font: 350 italic 1.0625rem/1 var(--f-serif);
	color: var(--c-marine);
	min-width: 36px;
	flex-shrink: 0;
}

/* Frage-Text füllt den Platz */
.sl-blog-faq-item summary > strong,
.sl-blog-faq-item summary > span:not([class]) {
	flex: 1;
	min-width: 0;
	font-weight: inherit;
}

.sl-blog-faq-item summary::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	flex-shrink: 0;
	font: 350 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1), color 0.2s var(--ease);
	transform-origin: center;
}
.sl-blog-faq-item[open] summary::after {
	transform: rotate(135deg);
	color: var(--c-azur);
}

.sl-blog-faq-answer {
	padding: 0 8px 24px 60px;
	overflow: hidden;
}
.sl-blog-faq-answer p {
	font: 400 0.9375rem/1.65 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 82%, transparent);
	margin: 0 0 12px;
	max-width: 64ch;
}
.sl-blog-faq-answer p:last-child { margin: 0; }

/* Smooth Animation für moderne Browser */
@supports (transition-behavior: allow-discrete) {
	.sl-blog-faq-item::details-content {
		height: 0;
		opacity: 0;
		overflow: hidden;
		transition:
			height 0.45s cubic-bezier(.2,.7,.2,1),
			opacity 0.32s ease-in-out,
			content-visibility 0.45s allow-discrete;
	}
	.sl-blog-faq-item[open]::details-content {
		height: auto;
		opacity: 1;
	}
}

/* Mobile */
@media (max-width: 700px) {
	.sl-blog-faq-item summary {
		padding: 20px 0 20px 20px;
		gap: 16px;
	}
	.sl-blog-faq-item summary:hover,
	.sl-blog-faq-item[open] summary {
		padding-left: 28px;
	}
	.sl-blog-faq-answer {
		padding-left: 44px;
		padding-right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-blog-faq-item,
	.sl-blog-faq-item summary,
	.sl-blog-faq-item summary::after,
	.sl-blog-faq-item::before,
	.sl-blog-faq-item::details-content {
		transition: none !important;
	}
}

/* ─── ARTICLE-FOOTER (Kategorien, Tags, Leistungen) ───────────────────── */

.sl-article-footer {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-article-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-article-footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

.sl-article-footer-meta {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sl-article-footer-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-article-footer-block--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 32px;
}

.sl-article-footer-block--inline > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sl-article-footer-label {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
}

.sl-article-footer-tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sl-article-footer-tags li a {
	display: inline-block;
	padding: 6px 12px;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	font: 500 0.8125rem/1.3 var(--f-mono);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-article-footer-tags li a:hover {
	background: var(--c-marine);
	color: var(--c-paper);
}

.sl-article-footer-tags--mute li a {
	background: transparent;
	border-color: color-mix(in srgb, var(--c-ink) 30%, transparent);
	color: var(--c-mute);
}

.sl-article-footer-time {
	font: 400 0.9375rem/1.3 var(--f-sans);
	color: var(--c-ink);
}

.sl-article-footer-services {
	background: var(--c-marine);
	color: var(--c-paper);
	padding: 28px 28px;
	border: 2px solid var(--c-ink);
}

.sl-article-footer-services-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: block;
	margin-bottom: 4px;
}

.sl-article-footer-services-h {
	font: 350 1.375rem/1.15 var(--f-serif);
	color: var(--c-paper);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px dashed color-mix(in srgb, var(--c-paper) 28%, transparent);
}

.sl-article-footer-services-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-article-footer-services-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: color-mix(in srgb, var(--c-marine) 70%, var(--c-ink));
	border: 1px solid color-mix(in srgb, var(--c-paper) 20%, transparent);
	color: var(--c-paper);
	text-decoration: none;
	font: 400 0.9375rem/1.3 var(--f-sans);
	transition: background var(--d-2) var(--ease);
}

.sl-article-footer-services-list li a:hover {
	background: var(--c-azur);
}

/* ─── AUTHOR-BOX ──────────────────────────────────────────────────────── */

.sl-author-box {
	padding: var(--section-y) 0;
	background: var(--c-paper);
}

.sl-author-box-inner {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 32px;
	align-items: start;
	padding: 40px 40px;
	background: var(--c-cream);
	border: 2px solid var(--c-ink);
}

@media (max-width: 700px) {
	.sl-author-box-inner { grid-template-columns: 1fr; gap: 20px; padding: 28px 28px; }
}

.sl-author-box-mark {
	width: 120px;
	height: 120px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 3px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-azur);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sl-author-box-mark-num {
	font: 350 italic 3rem/1 var(--f-serif);
}

.sl-author-box-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: block;
	margin-bottom: 6px;
}

.sl-author-box-h {
	font: 350 1.75rem/1.1 var(--f-serif);
	color: var(--c-ink);
	margin: 0 0 14px;
}

.sl-author-box-text {
	font: 400 1rem/1.6 var(--f-sans);
	color: var(--c-ink);
	margin: 0 0 20px;
	max-width: 60ch;
}

.sl-author-box-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sl-author-box-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

.sl-author-box-link:hover {
	background: var(--c-marine);
	color: var(--c-paper);
	transform: translate(-1px, -1px);
}

/* ─── RELATED POSTS ──────────────────────────────────────────────────── */

.sl-blog-related {
	padding: var(--section-y) 0;
	background: var(--c-bone);
}

.sl-blog-related-h2 {
	font: 350 var(--fs-h2)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 22ch;
}

.sl-blog-related-h2 em { font-style: italic; color: var(--c-marine); }

.sl-blog-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.sl-blog-related-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 28px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	color: var(--c-ink);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-blog-related-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-blog-related-card--azur  { box-shadow: 4px 4px 0 var(--c-azur);  }
.sl-blog-related-card--marine{ box-shadow: 4px 4px 0 var(--c-marine);}
.sl-blog-related-card--cream { background: var(--c-cream); }
.sl-blog-related-card--bone  { background: var(--c-bone);  }

.sl-blog-related-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur);
}

.sl-blog-related-card-title {
	font: 350 1.375rem/1.1 var(--f-serif);
	color: var(--c-ink);
	margin: 0;
}

.sl-blog-related-card-excerpt {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-blog-related-card-link {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-marine);
	transition: gap var(--d-2) var(--ease);
}

.sl-blog-related-card:hover .sl-blog-related-card-link { gap: 14px; }

.sl-blog-related-foot {
	margin: 32px 0 0;
	text-align: center;
	font: 400 0.9375rem/1.4 var(--f-sans);
}

/* ─── BLOG FINAL-CTA ──────────────────────────────────────────────────── */

.sl-blog-final-cta {
	padding: var(--section-y) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
}

.sl-blog-final-cta-inner {
	max-width: 880px;
}

.sl-blog-final-cta-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-blog-final-cta-h2 {
	font: 350 clamp(2rem, 5vw, 3.5rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 24ch;
}

.sl-blog-final-cta-h2 em { font-style: italic; color: var(--c-azur-l, #aacaff); }

.sl-blog-final-cta-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 60ch;
	margin: 0 0 40px;
}

.sl-blog-final-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sl-blog-final-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-blog-final-cta-btn .sl-icon { width: 20px; height: 20px; }

.sl-blog-final-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}

.sl-blog-final-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-blog-final-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}

.sl-blog-final-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

@media (max-width: 480px) {
	.sl-blog-final-cta-actions { flex-direction: column; align-items: stretch; }
	.sl-blog-final-cta-btn { justify-content: center; }
}

/* ─── BLOG-NAVIGATION (Prev/Next/Übersicht) ───────────────────────────── */

.sl-blog-nav {
	padding: var(--section-y) 0;
	background: var(--c-paper);
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
}

.sl-blog-nav-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
}

@media (max-width: 800px) {
	.sl-blog-nav-grid { grid-template-columns: 1fr; gap: 16px; }
}

.sl-blog-nav-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	background: var(--c-cream);
	border: 2px solid var(--c-ink);
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

.sl-blog-nav-item--prev { text-align: left; }
.sl-blog-nav-item--next { text-align: right; align-items: flex-end; }

.sl-blog-nav-item:hover {
	background: var(--c-marine);
	color: var(--c-paper);
	transform: translate(-1px, -1px);
}

.sl-blog-nav-item--disabled {
	background: transparent;
	border-color: color-mix(in srgb, var(--c-ink) 18%, transparent);
	color: var(--c-mute);
	cursor: not-allowed;
}

.sl-blog-nav-item--disabled:hover {
	background: transparent;
	color: var(--c-mute);
	transform: none;
}

.sl-blog-nav-direction {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sl-blog-nav-item:hover .sl-blog-nav-direction {
	color: var(--c-azur-l, #aacaff);
}

.sl-blog-nav-title {
	font: 380 1.0625rem/1.3 var(--f-serif);
	font-weight: 400;
}

.sl-blog-nav-overview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 22px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 2px solid var(--c-ink);
	font: 500 0.875rem/1 var(--f-sans);
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--c-azur);
	transition: transform var(--d-2) var(--ease);
}

.sl-blog-nav-overview:hover {
	transform: translate(-2px, -2px);
}

.sl-blog-nav-overview-mark {
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-azur-l, #aacaff);
}

/* ════════════════════════════════════════════════════════════════════════
   BLOG ARCHIVE — Übersicht /ratgeber/
   ════════════════════════════════════════════════════════════════════════ */

.sl-blog-archive-hero {
	position: relative;
	overflow: hidden;
	padding: var(--page-hero-top) 0 var(--page-hero-bottom);
	background: var(--c-paper);
}

.sl-blog-archive-hero-bg-mark {
	position: absolute;
	right: -4vw;
	top: 22%;
	font: 350 italic clamp(8rem, 22vw, 22rem)/0.86 var(--f-serif);
	color: color-mix(in srgb, var(--c-marine) 6%, transparent);
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.sl-blog-archive-hero-inner { position: relative; z-index: 1; }

.sl-blog-archive-hero-meta {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
	margin: 24px 0 28px;
}

.sl-blog-archive-hero-meta-sep { color: var(--c-azur); }

.sl-blog-archive-hero-title {
	font: 350 var(--fs-display)/0.95 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 32px;
	max-width: 22ch;
}

.sl-blog-archive-hero-title em { font-style: italic; color: var(--c-marine); }

.sl-blog-archive-hero-lede {
	font: 380 var(--fs-lead)/1.55 var(--f-serif);
	color: var(--c-ink);
	max-width: 64ch;
	margin: 0 0 40px;
}

.sl-blog-archive-hero-trust {
	list-style: none;
	margin: 0;
	padding: 28px 0 0;
	border-top: 1.5px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sl-blog-archive-hero-trust li {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sl-blog-archive-hero-trust-num {
	font: 350 italic 1.25rem/1 var(--f-serif);
	color: var(--c-azur);
}

.sl-blog-archive-hero-trust-label {
	font: 400 0.9375rem/1.4 var(--f-sans);
	color: var(--c-ink);
}

@media (max-width: 700px) {
	.sl-blog-archive-hero-trust { grid-template-columns: 1fr; }
}

/* Filter */
.sl-blog-archive-filter {
	padding: var(--section-y) 0 calc(var(--section-y) / 2);
	background: var(--c-cream);
}

.sl-blog-archive-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}

.sl-blog-archive-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--c-paper);
	border: 2px solid var(--c-ink);
	font: 500 0.875rem/1 var(--f-sans);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}

.sl-blog-archive-filter-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--c-marine);
}

.sl-blog-archive-filter-btn.is-active {
	background: var(--c-marine);
	color: var(--c-paper);
	box-shadow: 3px 3px 0 var(--c-azur);
}

/* Liste */
.sl-blog-archive-list-section {
	padding: calc(var(--section-y) / 2) 0 var(--section-y);
	background: var(--c-cream);
}

.sl-blog-archive-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

.sl-blog-archive-card {
	background: var(--c-paper);
	border: 2.5px solid var(--c-ink);
	box-shadow: 5px 5px 0 var(--c-marine);
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}

.sl-blog-archive-card--azur  { box-shadow: 5px 5px 0 var(--c-azur);  }
.sl-blog-archive-card--marine{ box-shadow: 5px 5px 0 var(--c-marine);}
.sl-blog-archive-card--cream { background: var(--c-cream); border-color: var(--c-ink); }
.sl-blog-archive-card--bone  { background: var(--c-bone);  }

.sl-blog-archive-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--c-azur);
}

.sl-blog-archive-card-link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 32px;
	color: var(--c-ink);
	text-decoration: none;
	height: 100%;
}

.sl-blog-archive-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
}

.sl-blog-archive-card-cat { color: var(--c-azur); }
.sl-blog-archive-card-sep { color: var(--c-mute); }
.sl-blog-archive-card-date,
.sl-blog-archive-card-reading { color: var(--c-mute); }

.sl-blog-archive-card-title {
	font: 350 clamp(1.5rem, 2.5vw, 2rem)/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0;
}

.sl-blog-archive-card-excerpt {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: var(--c-mute);
	margin: 0;
}

.sl-blog-archive-card-arrow {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed color-mix(in srgb, var(--c-ink) 22%, transparent);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 0.9375rem/1 var(--f-sans);
	color: var(--c-marine);
	transition: gap var(--d-2) var(--ease);
}

.sl-blog-archive-card:hover .sl-blog-archive-card-arrow { gap: 14px; }

.sl-blog-archive-empty {
	padding: 80px 0;
	text-align: center;
	border: 1.5px dashed var(--c-ink);
}

.sl-blog-archive-empty p {
	font: 380 1.125rem/1.4 var(--f-serif);
	color: var(--c-mute);
	margin: 0;
}

/* ─── EDITOR-PARITÄT (Klasse für Backend wird in editor.css gesetzt) ──── */

/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT-KONSOLIDIERUNG — v1.9.2
   Einheitliche Seitenabstände über alle Templates und Bildschirmgrößen.
   Dieser Block kommt zuletzt und überschreibt frühere Inkonsistenzen.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1) Container-Tokens FINAL ─────────────────────────────────────────────
   Ein einziger Token-Set für ALLE Container. Wirkt auf:
   - .sl-container        (Patterns)
   - .sl-header-inner     (Topbar/Header)
   - .sl-page-content     (Page-Templates)
   - .sl-article-layout-grid u.a. (Blog)
   Stufenfunktion statt clamp — gibt klar definierte Werte je Bildschirmgröße,
   und keine widersprüchlichen Overrides mehr.
*/
:root {
	/* Mobile bis 480 — kompakt */
	--gutter: 1rem;           /* 16px */
	--maxw:   1440px;
	--section-y: clamp(3rem, 9vw, 7rem);
}

@media (min-width: 481px) {
	:root {
		--gutter: 1.5rem;     /* 24px */
		--section-y: clamp(4rem, 9vw, 8rem);
	}
}

@media (min-width: 768px) {
	:root {
		--gutter: 2rem;       /* 32px */
		--section-y: clamp(5rem, 9vw, 9rem);
	}
}

@media (min-width: 1024px) {
	:root {
		--gutter: 2.5rem;     /* 40px */
		--section-y: clamp(6rem, 9vw, 10rem);
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: 3rem;       /* 48px */
		--section-y: 10rem;
	}
}

@media (min-width: 1600px) {
	:root {
		--gutter: 3.5rem;     /* 56px */
	}
}

/* ─── 2) Container-Selector EINHEITLICH ──────────────────────────────────── */

.sl-container,
.sl-header-inner {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	box-sizing: border-box;
}

/* Page-Content (page.html, 404.html etc.) hat in den Templates layout:constrained
   mit contentSize:760px. Im Theme ist useRootPaddingAwareAlignments=false,
   d.h. WordPress setzt KEIN Inner-Padding automatisch. Wir setzen den gleichen
   Gutter wie .sl-container, damit der Text bei kleinen Viewports nicht den Rand berührt. */
.sl-page-content {
	padding-inline: var(--gutter);
	box-sizing: border-box;
}

/* ─── 3) Hero-Title max-width auf Container begrenzen ──────────────────────
   22ch / 18ch / 14ch ist Lesbarkeits-Richtlinie. Bei großen Schriften wird
   das aber breiter als der Container und durchbricht ihn. min(...) cappt das.
*/
.sl-hero-title,
.sl-subhero-title,
.sl-services-hero-title,
.sl-about-hero-title,
.sl-contact-hero-title,
.sl-service-hero-title,
.sl-projects-hero-title,
.sl-project-hero-title,
.sl-article-hero-title,
.sl-blog-archive-hero-title {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Spezifischere Caps pro Hero — damit die Lesbarkeits-Begrenzung bleibt,
   aber nie über die Container-Innenbreite hinausgeht. */
.sl-services-hero-title  { max-width: min(14ch, 100%); }
.sl-about-hero-title     { max-width: min(20ch, 100%); }
.sl-contact-hero-title   { max-width: min(18ch, 100%); }
.sl-service-hero-title   { max-width: min(20ch, 100%); }
.sl-projects-hero-title  { max-width: min(20ch, 100%); }
.sl-project-hero-title   { max-width: min(18ch, 100%); }
.sl-article-hero-title   { max-width: min(22ch, 100%); }
.sl-blog-archive-hero-title { max-width: min(20ch, 100%); }

/* Display-Schrift bei sehr großen Viewports zähmen — damit 22ch nie über
   den Container hinausschwingen kann. */
@media (min-width: 1600px) {
	:root {
		--fs-display: clamp(3rem, 7.5vw, 7.5rem);
	}
}

/* ─── 4) Horizontal-Scroll-Schutz ─────────────────────────────────────────── */

/* Beide Elemente (html und body) bekommen overflow-x: clip.
   `clip` (im Gegensatz zu `hidden`) erzeugt KEINEN neuen Containing-Block für
   sticky-Children — d. h. position:sticky innerhalb des Bodys funktioniert
   weiterhin. `overflow-y: visible` muss explizit gesetzt werden, damit
   vertikales Scrollen nicht versehentlich mitgeclippt wird.
   Browser-Support: clip ist seit 2022 in allen modernen Browsern stabil. */
html {
	overflow-x: clip;
	overflow-y: visible;
}

body {
	overflow-x: clip;
	overflow-y: visible;
}

/* Die bg-mark-Elemente sind absichtlich groß und ragen aus dem Rand —
   ihr Parent (Hero-Section) hat overflow:hidden, das clippt sauber. */

/* ─── 5) Inner-Padding einheitlich für Sub-Section-Wrapper ────────────────── */

/* Die service-detail-*, project-detail-*, blog-* Patterns nutzen alle
   ein <section> mit <.sl-container> innen. Sicherstellen, dass das
   <section> selbst keine Outer-Paddings setzt, die mit Container kollidieren. */
.sl-service-process,
.sl-service-problem,
.sl-service-scope,
.sl-service-outcomes,
.sl-service-compare,
.sl-service-region,
.sl-service-works,
.sl-service-faq,
.sl-service-cta,
.sl-project-brief,
.sl-project-situation-goals,
.sl-project-steps,
.sl-project-quote,
.sl-project-services,
.sl-project-results,
.sl-project-learn,
.sl-project-cta,
.sl-project-related,
.sl-article-footer,
.sl-author-box,
.sl-blog-related,
.sl-blog-final-cta,
.sl-blog-nav,
.sl-blog-archive-filter,
.sl-blog-archive-list-section {
	padding-inline: 0;        /* horizontale Paddings übernimmt ausschließlich .sl-container innen */
}

/* ─── 6) Header-Inner Konsistenz bei breiten Viewports ────────────────────
   Topbar-Inner ist ein Marquee (width: max-content) — wird NICHT angefasst.
   Nur Haupt-Header-Inner bekommt die einheitliche Container-Logik (siehe Punkt 2). */

/* ─── 7) Marquee-Hintergründe — vom Hero-Overflow-Clip übernommen. */

/* ════════════════════════════════════════════════════════════════════════════
   HEADER-MOBILE-FIX — v1.10.2
   Sicherstellen, dass auf Mobile/Tablet das Burger-Menü klickbar ist und
   nicht vom CTA-Button überlagert wird.
   ════════════════════════════════════════════════════════════════════════════ */

.sl-site-header {
	/* Header bleibt fixed (Definition oben, Zeile 444) — wir erhöhen nur den z-index,
	   damit der Burger-Toggle und das Mobile-Overlay sauber über dem Page-Content stehen. */
	z-index: 100;
}

/* Header-CTA: kleiner, kompakter — ab 900px versteckt (siehe Mobile-Block oben).
   Bis dahin: schlanker Button ohne 6px-Schatten, kein Überlauf. */
@media (max-width: 1100px) {
	.sl-header-cta {
		padding: 8px 14px;
		font-size: 0.75rem;
		box-shadow: 3px 3px 0 var(--c-marine);
		min-height: 40px;
	}
	.sl-header-cta:hover {
		box-shadow: 4px 4px 0 var(--c-marine);
	}
}

/* WP-Block-Navigation Mobile-Toggle (Burger-Icon) IMMER klickbar.
   Position: relative + z-index sorgt dafür, dass es über jedem CTA liegt. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	position: relative;
	z-index: 101;
	cursor: pointer;
	padding: 8px;
}

/* Burger-Icon sichtbar gestalten — WP-Default ist unauffällig */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: var(--c-ink);
}

/* Wenn Menü offen: Schließen-Button in der Marine-Box weiß */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	fill: var(--c-paper);
}

/* Mobile-Header-Konfiguration: siehe Block "MOBILE HEADER — v1.15.16" am
   Ende der Datei. Die Definition wurde dorthin verschoben, weil hier mehrere
   konkurrierende Regeln zu Layout-Bugs (Logo + Burger ragen aus Header)
   geführt haben. */

/* ════════════════════════════════════════════════════════════════════════════
   EDITORIAL EFFECTS — v1.11.0
   1. Section-Mark Roll-In · 2. Link-Underline-Sweep · 3. Foto-Reveal Curtain
   4. Sticky-Section-Indicator · Card-Tilt / Hero-Scramble / Counter sind JS-only
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 2) SECTION-MARK-ROLL-IN ─────────────────────────────────────────────── */

.sl-section-mark-num {
	display: inline-block;
	opacity: 0;
	transform: translateY(-16px);
	transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.sl-section-mark-num.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.sl-section-mark-num {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ─── 5) LINK-UNDERLINE-SWEEP ─────────────────────────────────────────────── */

/* Greift auf Inline-Body-Links und Editorial-Links im Content.
   Nur, wenn die Klasse 'sl-fx-link-sweep' am <html> aktiv ist (JS-Trigger). */
.sl-fx-link-sweep .sl-article-content a:not(.wp-block-button__link):not(.sl-blog-inline-cta-btn):not(.sl-blog-faq-item a),
.sl-fx-link-sweep .sl-page-content a:not(.wp-block-button__link):not(.sl-link-u):not([class*="sl-btn"]):not([class*="-card-link"]),
.sl-fx-link-sweep .sl-link-u {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0% 1.5px;
	border-bottom-color: transparent !important;
	transition: background-size 0.42s cubic-bezier(.2,.7,.2,1), color 0.2s var(--ease);
	padding-bottom: 2px;
}
.sl-fx-link-sweep .sl-article-content a:not(.wp-block-button__link):not(.sl-blog-inline-cta-btn):not(.sl-blog-faq-item a):hover,
.sl-fx-link-sweep .sl-page-content a:not(.wp-block-button__link):not(.sl-link-u):not([class*="sl-btn"]):not([class*="-card-link"]):hover,
.sl-fx-link-sweep .sl-link-u:hover {
	background-size: 100% 1.5px;
}

@media (prefers-reduced-motion: reduce) {
	.sl-fx-link-sweep a {
		transition: none !important;
	}
}

/* ─── 6) FOTO-REVEAL CURTAIN ─────────────────────────────────────────────── */

.sl-reveal {
	display: block;
	position: relative;
	overflow: hidden;
}
.sl-reveal > img {
	display: block;
	transform: scale(1.06);
	transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.sl-reveal-curtain {
	position: absolute;
	inset: 0;
	background: var(--c-marine);
	transform: translateX(0);
	transition: transform 0.85s cubic-bezier(.6,.0,.2,1);
	pointer-events: none;
	z-index: 1;
}
.sl-reveal.is-revealed > img {
	transform: scale(1);
}
.sl-reveal.is-revealed > .sl-reveal-curtain {
	transform: translateX(101%);
}

@media (prefers-reduced-motion: reduce) {
	.sl-reveal > img {
		transform: none !important;
		transition: none !important;
	}
	.sl-reveal-curtain {
		display: none;
	}
}

/* ─── 7) STICKY-SECTION-INDICATOR ────────────────────────────────────────── */

.sl-section-indicator {
	position: fixed;
	top: calc(var(--bar-h, 38px) + var(--header-h, 76px) + 20px);
	right: clamp(16px, 3vw, 40px);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding: 8px 12px;
	background: var(--c-paper);
	border: 1.5px solid var(--c-ink);
	box-shadow: 3px 3px 0 var(--c-marine);
	pointer-events: none;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.32s cubic-bezier(.2,.7,.2,1), transform 0.32s cubic-bezier(.2,.7,.2,1);
}
.sl-section-indicator.is-visible {
	opacity: 1;
	transform: translateX(0);
}

.sl-section-indicator-num {
	font: 500 0.6875rem/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
}

.sl-section-indicator-label {
	font: 350 italic 0.875rem/1.1 var(--f-serif);
	color: var(--c-ink);
	max-width: 14ch;
	text-align: right;
}

/* Mobile/Tablet: Indicator versteckt (zu wenig Platz, blockt Reading-Progress) */
@media (max-width: 1100px) {
	.sl-section-indicator { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sl-section-indicator {
		transition: none !important;
	}
}

/* ─── HERO-SCRAMBLE — initialer FOUC-Schutz ──────────────────────────────── */

/* Beim Erst-Render scrambelt JS den Title-Text. Damit das Layout nicht
   springt, geben wir dem Wrapper-Span min-width: 0 und white-space: inherit. */
.sl-scramble-wrap {
	display: inline;
	white-space: inherit;
}


/* ════════════════════════════════════════════════════════════════════════════
   404-PAGE — v1.11.5
   Vielleicht-meinten-Sie-Liste + Suche + Direkt-Kontakt
   ════════════════════════════════════════════════════════════════════════════ */

.sl-404-suggest {
	padding-block: clamp(40px, 6vw, 96px);
}

.sl-404-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.sl-404-grid { grid-template-columns: 1fr; gap: 40px; }
}

.sl-404-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 16px;
}

.sl-404-suggest-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--bw) solid var(--c-ink);
}

.sl-404-suggest-list li {
	border-bottom: var(--bw) solid var(--c-ink);
}

.sl-404-suggest-list a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 20px;
	padding: 22px 4px;
	text-decoration: none;
	color: var(--c-ink);
	transition: background var(--d-2) var(--ease), padding-left var(--d-2) var(--ease);
}

.sl-404-suggest-list a:hover,
.sl-404-suggest-list a:focus-visible {
	background: var(--c-paper);
	padding-left: 16px;
}

.sl-404-suggest-num {
	font: 350 italic 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
	min-width: 32px;
}

.sl-404-suggest-text {
	font: 400 1rem/1.4 var(--f-sans);
	color: var(--c-ink);
}
.sl-404-suggest-text strong {
	font: 350 1.375rem/1.2 var(--f-serif);
	display: block;
	margin-bottom: 4px;
	color: var(--c-ink);
}

.sl-404-suggest-arrow {
	font: 400 1.25rem/1 var(--f-sans);
	color: var(--c-marine);
	transition: transform var(--d-2) var(--ease);
}
.sl-404-suggest-list a:hover .sl-404-suggest-arrow {
	transform: translateX(6px);
}

.sl-404-aside {
	padding: 32px 28px;
	background: var(--c-paper);
	border: var(--bw) solid var(--c-ink);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-404-search {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}

.sl-404-search-label {
	font: 500 0.8125rem/1 var(--f-sans);
	color: var(--c-ink);
}

.sl-404-search input[type="search"] {
	width: 100%;
	padding: 13px 16px;
	background: var(--c-cream);
	border: var(--bw) solid var(--c-ink);
	border-radius: 0;
	font: 400 1rem/1.4 var(--f-sans);
	color: var(--c-ink);
	appearance: none;
	-webkit-appearance: none;
}
.sl-404-search input[type="search"]:focus {
	outline: 0;
	background: var(--c-paper);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-azur) 30%, transparent);
}

.sl-404-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: var(--bw) solid var(--c-marine);
	font: 500 0.875rem/1 var(--f-sans);
	cursor: pointer;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sl-404-search-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--c-azur);
}

.sl-404-direct {
	border-top: var(--bw) solid var(--c-ink);
	padding-top: 24px;
}

.sl-404-direct-phone,
.sl-404-direct-mail {
	display: block;
	padding: 14px 0;
	text-decoration: none;
	color: var(--c-ink);
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
	transition: color var(--d-2) var(--ease);
}
.sl-404-direct-mail { border-bottom: 0; }
.sl-404-direct-phone:hover,
.sl-404-direct-mail:hover {
	color: var(--c-marine);
}
.sl-404-direct-phone strong,
.sl-404-direct-mail strong {
	display: block;
	font: 350 1.5rem/1.2 var(--f-serif);
	letter-spacing: var(--ls-tight);
	margin-bottom: 4px;
}
.sl-404-direct-phone span,
.sl-404-direct-mail span {
	font: 500 0.75rem/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-mute);
}

/* ════════════════════════════════════════════════════════════════════════════
   NEWSLETTER — v1.11.5
   ════════════════════════════════════════════════════════════════════════════ */

.sl-newsletter {
	padding-block: clamp(60px, 9vw, 120px);
	background: var(--c-paper);
	border-top: var(--bw) solid var(--c-ink);
	border-bottom: var(--bw) solid var(--c-ink);
}

.sl-newsletter-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 56px;
	align-items: center;
}

@media (max-width: 900px) {
	.sl-newsletter-inner { grid-template-columns: 1fr; gap: 32px; }
}

.sl-newsletter-eyebrow {
	font: 500 var(--fs-meta)/1.3 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-marine);
	margin: 0 0 16px;
}

.sl-newsletter-h2 {
	font: 350 clamp(1.875rem, 4vw, 2.625rem)/1.1 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 16px;
	max-width: 22ch;
}
.sl-newsletter-h2 em {
	color: var(--c-marine);
}

.sl-newsletter-lede {
	font: 400 1.0625rem/1.6 var(--f-sans);
	color: var(--c-ink);
	max-width: 50ch;
	margin: 0;
}

.sl-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sl-newsletter-form__row {
	display: flex;
	gap: 0;
	border: var(--bw) solid var(--c-ink);
	box-shadow: 5px 5px 0 var(--c-marine);
	background: var(--c-cream);
}

@media (max-width: 540px) {
	.sl-newsletter-form__row { flex-direction: column; }
}

.sl-newsletter-form__row input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 16px 20px;
	border: 0;
	background: transparent;
	font: 400 1rem/1.4 var(--f-sans);
	color: var(--c-ink);
}
.sl-newsletter-form__row input[type="email"]:focus {
	outline: 0;
	background: var(--c-paper);
}

.sl-newsletter-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	background: var(--c-marine);
	color: var(--c-paper);
	border: 0;
	border-left: var(--bw) solid var(--c-ink);
	font: 500 0.9375rem/1 var(--f-sans);
	cursor: pointer;
	transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sl-newsletter-form__submit:hover {
	background: var(--c-azur);
}
.sl-newsletter-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.sl-newsletter-form__submit-arrow {
	transition: transform var(--d-2) var(--ease);
}
.sl-newsletter-form__submit:hover .sl-newsletter-form__submit-arrow {
	transform: translateX(4px);
}

@media (max-width: 540px) {
	.sl-newsletter-form__submit {
		border-left: 0;
		border-top: var(--bw) solid var(--c-ink);
		justify-content: center;
	}
}

.sl-newsletter-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font: 400 0.8125rem/1.5 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 80%, transparent);
	cursor: pointer;
}
.sl-newsletter-form__consent input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--c-marine);
	cursor: pointer;
}
.sl-newsletter-form__consent a {
	color: var(--c-marine);
	text-decoration: underline;
}

.sl-newsletter-form__status {
	font: 500 0.875rem/1.4 var(--f-sans);
	min-height: 1.2em;
	transition: color var(--d-2) var(--ease);
}
.sl-newsletter-form__status.is-success { color: var(--c-marine); }
.sl-newsletter-form__status.is-error   { color: #C0392B; }
.sl-newsletter-form__status.is-info    { color: var(--c-mute); }

.sl-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.sl-sr-only {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE BURGER-TOGGLE — v1.15.13
   Sicherstellen, dass der Burger-Button auf Mobile sichtbar ist und das
   Overlay korrekt rendert. Die eigentliche Paper-Styling-Definition steht
   im Hauptblock weiter oben in der Datei (Zeile ~668).
   ════════════════════════════════════════════════════════════════════════════ */

/* Default: Burger versteckt (Desktop). Mobile-Behandlung weiter unten
   in v1.15.16-Block am Dateiende. */
.sl-site-header .wp-block-navigation__responsive-container-open {
	display: none;
}

/* Desktop: WP-Container neu anordnen (Default-Verhalten wiederherstellen).
   Wichtig: höchste Spezifität, damit WP's "has-paper-background-color"-Klasse
   nicht zu einer hellen Pille hinter den Nav-Links wird. */
@media (min-width: 901px) {
	.sl-site-header .wp-block-navigation__responsive-container,
	.sl-site-header .wp-block-navigation__responsive-container.has-background,
	.sl-site-header .wp-block-navigation__responsive-container.has-paper-background-color,
	html body .sl-site-header .wp-block-navigation__responsive-container,
	html body .sl-site-header .wp-block-navigation__responsive-container.has-paper-background-color {
		position: static !important;
		background: transparent !important;
		background-color: transparent !important;
		padding: 0 !important;
		display: block !important;
		overflow: visible !important;
	}
	/* Auch die WP-Navigation selbst soll transparent sein */
	.sl-site-header .wp-block-navigation,
	.sl-site-header .wp-block-navigation.has-background,
	.sl-site-header .wp-block-navigation__container {
		background: transparent !important;
		background-color: transparent !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW-GUARD — v1.11.7
   Auf schmalen Viewports brechen Marine-Schatten (6–12px Versatz rechts/unten)
   teils aus dem Container und erzeugen horizontalen Scroll. Mit Container-Inset
   und kleineren Schatten auf Mobile vermeiden wir das.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* Container braucht etwas mehr rechten Innenabstand, damit Schatten
	   nicht aus dem Viewport ragen */
	.sl-container {
		padding-right: max(var(--gutter), 16px);
		padding-left: max(var(--gutter), 16px);
	}

	/* Große Editorial-Schatten verkleinert — bleibt der Stil, aber kein Overflow */
	.sl-form-card,
	.sl-contact-trust,
	.sl-blog-aside,
	.sl-blog-final-cta-inner,
	.sl-contact-final-cta-inner,
	.sl-services-cta-inner,
	.sl-service-cta-inner,
	.sl-projects-archive-cta-inner,
	.sl-project-cta-inner,
	.sl-about-cta-inner,
	.sl-newsletter-form__row,
	.sl-404-aside {
		box-shadow: 4px 4px 0 var(--c-marine) !important;
	}

	/* Cards mit Tilt: Schatten auf 3px reduziert (kombiniert mit Tilt-3D wirkt großer
	   Schatten überladen) */
	.sl-stance-card,
	.sl-project-card,
	.sl-project-related-card,
	.sl-blog-archive-card,
	.sl-service-card,
	.sl-region-card {
		box-shadow: none;
	}

	/* Image-Frames mit großem Schatten: kleiner */
	.sl-about-figure,
	.sl-about-hero-figure,
	.sl-article-hero-img,
	.sl-project-hero-image {
		box-shadow: 5px 5px 0 var(--c-marine) !important;
	}
}

/* Extra-Schutz: Section-Container haben overflow:hidden, damit nichts aus
   den Rändern bleibt. Aber: nicht auf body/html, sondern auf Sektion-Level. */
section[class*="sl-"]:not(.sl-hero):not(.sl-manifesto):not(.sl-cta-band) {
	/* Hero, Manifesto, CTA-Band haben absichtlich überlaufende Background-Effekte —
	   diese behalten ihr eigenes overflow-Handling */
}

/* ════════════════════════════════════════════════════════════════════════════
   FORM-ACTIONS MOBILE — v1.11.8
   Hint-Text unter dem Submit-Button stapeln, statt eng daneben.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
	.sl-form__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.sl-form__submit {
		min-width: 0;
		width: 100%;
		justify-content: center;
	}
	.sl-form__hint {
		font-family: var(--f-sans);
		font-size: 0.875rem;
		letter-spacing: 0;
		line-height: 1.5;
		text-align: left;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   PROJECT-DETAIL Situation/Goals — Layout-Fix v1.12.4
   Die rechte Goals-Box klebte am Container-Rand. Mehr Innenabstand und
   sicheres Grid mit min-width:0 verhindert Overflow.
   ════════════════════════════════════════════════════════════════════════════ */

.sl-project-situation-grid {
	padding-block: 8px; /* leichter Vertikal-Atemraum innerhalb Container */
}

.sl-project-situation-text,
.sl-project-situation-goals {
	min-width: 0;
}

.sl-project-situation-goals {
	/* Etwas mehr Innen-Padding, damit Items nicht am Border kleben */
	padding: 32px 32px;
}

/* Auf breiteren Viewports: zusätzlicher Right-Margin auf der Goals-Box,
   damit sie nicht den Container-Rand berührt */
@media (min-width: 901px) {
	.sl-project-situation-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: clamp(32px, 5vw, 72px);
	}
}

/* Mobile/Tablet (≤900) - Box volle Breite, schon vorher korrekt */
@media (max-width: 900px) {
	.sl-project-situation-goals {
		padding: 24px 22px;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   .sl-cta-btn — Universeller Body-CTA-Button v1.12.6
   Wird in den Leistungs- und Stadt-Pages (seed.php) verwendet. Vorher fehlte
   das CSS komplett, die Buttons wurden als nackte Links gerendert.
   Konsistent mit dem Stil der anderen CTA-Buttons im Theme.
   ════════════════════════════════════════════════════════════════════════════ */

.sl-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	background: var(--c-azur);
	color: var(--c-paper);
	border: var(--bw-bold) solid var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-marine);
	font: 500 0.9375rem/1 var(--f-sans);
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
	cursor: pointer;
}
.sl-cta-btn:hover,
.sl-cta-btn:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-marine);
	background: var(--c-marine);
	color: var(--c-paper);
}
.sl-cta-btn:active {
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 var(--c-marine);
}

.sl-cta-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 3px 3px 0 var(--c-ink);
}
.sl-cta-btn--ghost:hover,
.sl-cta-btn--ghost:focus-visible {
	background: var(--c-ink);
	color: var(--c-paper);
	box-shadow: 5px 5px 0 var(--c-marine);
}

/* CTA-Group: zwei CTAs nebeneinander, auf Mobile gestackt */
.sl-cta-group,
.sl-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0;
}

@media (max-width: 540px) {
	.sl-cta-btn {
		justify-content: center;
		width: 100%;
	}
}

/* ============================================================
   NEWSLETTER — Double-Opt-In Flash-Notice
   ============================================================ */
.sl-newsletter-flash {
	position: relative;
	padding: 14px 0;
	font: 500 0.9375rem/1.5 var(--f-sans);
	border-bottom: 1.5px solid currentColor;
	z-index: 100;
}
.sl-newsletter-flash--success {
	background: var(--c-marine);
	color: var(--c-paper);
}
.sl-newsletter-flash--warning {
	background: var(--c-cream);
	color: var(--c-marine);
	border-bottom-color: var(--c-marine);
}
.sl-newsletter-flash p {
	margin: 0;
}

/* ============================================================
   FOOTER — Social-Links (nur sichtbar, wenn URLs gepflegt)
   ============================================================ */
.sl-footer-social {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	border-top: 1px solid rgba(249, 246, 238, 0.15);
	padding-top: 20px;
}
.sl-footer-social li { margin: 0; }
.sl-footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font: 500 0.875rem/1.3 var(--f-mono);
	color: rgba(249, 246, 238, 0.75);
	text-decoration: none;
	letter-spacing: 0.04em;
	transition: color 160ms var(--ease-out);
}
.sl-footer-social a:hover,
.sl-footer-social a:focus-visible {
	color: var(--c-paper);
}
.sl-footer-social-arrow {
	font-size: 0.75em;
	opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════════
   CONSENT-BANNER v3 — Schlank, conversion-optimiert, responsive
   ──────────────────────────────────────────────────────────────────────────
   Banner unten zentriert, kompakt. Notwendig-Kategorie nur im Modal sichtbar.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Banner-Container ─── */
.sl-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	padding: 16px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.sl-consent.is-visible {
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0);
}
.sl-consent[hidden] { display: none !important; }

/* ─── Card im Service-Card-Stil ─── */
.sl-consent-card {
	max-width: 760px;
	margin: 0 auto;
	padding: 26px 30px 24px;
	background: var(--c-paper, #F9F6EE);
	border: 3px solid var(--c-ink, #0A0908);
	box-shadow: 8px 8px 0 var(--c-marine, #003399);
	border-radius: 0;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 22px;
	align-items: start;
}

/* SL-Icon links als visueller Anker */
.sl-consent-mark {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 6px;
}
.sl-consent-mark .sl-logo-svg,
.sl-consent-mark > span {
	display: inline-flex;
	width: 56px;
	height: 56px;
	background: transparent;
	flex-shrink: 0;
}
.sl-consent-mark svg {
	width: 100%;
	height: 100%;
	display: block;
}
/* Customizer-Icon (img) ebenfalls auf 56×56 begrenzen, nie das volle Logo */
.sl-consent-mark img,
.sl-consent-mark .sl-logo-img--icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}

.sl-consent-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* ─── Typo ─── */
.sl-consent-eyebrow {
	margin: 0;
	font: 500 0.6875rem/1.4 var(--f-mono, "JetBrains Mono", monospace);
	color: var(--c-marine, #003399);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-consent-eyebrow span {
	font-family: var(--f-display, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	margin-right: 4px;
	letter-spacing: 0;
}
.sl-consent-h {
	margin: 0;
	font: 700 1.5rem/1.15 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.015em;
}
.sl-consent-h em {
	font-style: italic;
	color: var(--c-marine, #003399);
	font-weight: 700;
}
.sl-consent-body {
	margin: 4px 0 0;
	font: 400 0.9375rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
}
.sl-consent-body a {
	color: var(--c-marine, #003399);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	font-weight: 500;
}
.sl-consent-body a:hover,
.sl-consent-body a:focus-visible { color: var(--c-azure, #0177E3); }

/* ─── Actions ─── */
.sl-consent-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
}

/* ─── Button-Basis ─── */
.sl-consent-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	font: 500 0.9375rem/1.2 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	letter-spacing: 0.005em;
	border: 2px solid var(--c-ink, #0A0908);
	cursor: pointer;
	transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 160ms;
	font-family: inherit;
	border-radius: 0;
	min-height: 48px; /* Touch-Target */
}

/* Primary: Alle akzeptieren */
.sl-consent-btn--accept {
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	font-weight: 600;
	box-shadow: 4px 4px 0 var(--c-azure, #0177E3);
}
.sl-consent-btn--accept:hover,
.sl-consent-btn--accept:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azure, #0177E3);
	outline: none;
}
.sl-consent-btn-arrow {
	display: inline-block;
	transition: transform 200ms var(--ease-out);
}
.sl-consent-btn--accept:hover .sl-consent-btn-arrow {
	transform: translateX(3px);
}

/* Secondary: Nur Notwendige (im Modal) */
.sl-consent-btn--deny {
	background: transparent;
	color: var(--c-ink, #0A0908);
}
.sl-consent-btn--deny:hover,
.sl-consent-btn--deny:focus-visible {
	background: var(--c-ink, #0A0908);
	color: var(--c-paper, #F9F6EE);
	outline: none;
}

/* Tertiary: Save (im Modal) */
.sl-consent-btn--save {
	background: var(--c-azure, #0177E3);
	color: var(--c-paper, #F9F6EE);
	font-weight: 600;
	box-shadow: 4px 4px 0 var(--c-marine, #003399);
}
.sl-consent-btn--save:hover,
.sl-consent-btn--save:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-marine, #003399);
	outline: none;
}

/* Text-Link: Weitere Einstellungen */
.sl-consent-link {
	background: none;
	border: none;
	padding: 8px 4px;
	color: var(--c-marine, #003399);
	font: 500 0.875rem/1.4 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	cursor: pointer;
	font-family: inherit;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.sl-consent-link:hover,
.sl-consent-link:focus-visible {
	color: var(--c-azure, #0177E3);
	outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */

/* Tablet (≤860px): Card schmaler, Icon kleiner */
@media (max-width: 860px) {
	.sl-consent { padding: 14px; }
	.sl-consent-card {
		padding: 22px 24px 20px;
		box-shadow: 6px 6px 0 var(--c-marine, #003399);
		grid-template-columns: 48px 1fr;
		gap: 18px;
	}
	.sl-consent-mark .sl-logo-svg,
	.sl-consent-mark > span {
		width: 48px;
		height: 48px;
	}
	.sl-consent-h { font-size: 1.375rem; }
}

/* Mobile (≤640px): Single-Column, Icon zentriert oben */
@media (max-width: 640px) {
	.sl-consent { padding: 10px; }
	.sl-consent-card {
		padding: 20px 20px 18px;
		box-shadow: 5px 5px 0 var(--c-marine, #003399);
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.sl-consent-mark {
		padding-top: 0;
		justify-content: flex-start;
	}
	.sl-consent-mark .sl-logo-svg,
	.sl-consent-mark > span {
		width: 40px;
		height: 40px;
	}
	.sl-consent-h { font-size: 1.25rem; line-height: 1.2; }
	.sl-consent-body { font-size: 0.875rem; line-height: 1.5; }
	.sl-consent-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 16px;
	}
	.sl-consent-btn {
		width: 100%;
		padding: 14px 20px;
		font-size: 0.9375rem;
	}
	.sl-consent-link {
		justify-content: center;
		padding: 6px 0;
	}
}

/* Sehr kleine Mobile (≤380px) */
@media (max-width: 380px) {
	.sl-consent { padding: 8px; }
	.sl-consent-card {
		padding: 18px 16px 16px;
		border-width: 2px;
		box-shadow: 4px 4px 0 var(--c-marine, #003399);
	}
	.sl-consent-mark .sl-logo-svg,
	.sl-consent-mark > span {
		width: 36px;
		height: 36px;
	}
	.sl-consent-h { font-size: 1.125rem; }
	.sl-consent-body { font-size: 0.8125rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL — Weitere Einstellungen
   ══════════════════════════════════════════════════════════════════════════ */
.sl-consent-modal {
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 240ms var(--ease-out);
}
.sl-consent-modal.is-visible { opacity: 1; }
.sl-consent-modal[hidden] { display: none !important; }

.sl-consent-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 9, 8, 0.55);
	cursor: pointer;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.sl-consent-modal-card {
	position: relative;
	max-width: 620px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--c-paper, #F9F6EE);
	border: 3px solid var(--c-ink, #0A0908);
	box-shadow: 10px 10px 0 var(--c-marine, #003399);
	transform: translateY(16px);
	transition: transform 280ms var(--ease-out);
	display: flex;
	flex-direction: column;
}
.sl-consent-modal.is-visible .sl-consent-modal-card {
	transform: translateY(0);
}

/* Modal Header */
.sl-consent-modal-head {
	position: relative;
	padding: 28px 32px 20px;
	border-bottom: 1px solid rgba(10, 9, 8, 0.1);
	flex-shrink: 0;
}
.sl-consent-modal-eyebrow {
	margin: 0 0 6px;
	font: 500 0.6875rem/1.4 var(--f-mono, "JetBrains Mono", monospace);
	color: var(--c-marine, #003399);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-consent-modal-h {
	margin: 0;
	font: 700 1.75rem/1.15 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.015em;
}
.sl-consent-modal-h em {
	font-style: italic;
	color: var(--c-marine, #003399);
}
.sl-consent-modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 2px solid var(--c-ink, #0A0908);
	color: var(--c-ink, #0A0908);
	font: 400 1.5rem/1 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	cursor: pointer;
	transition: background 160ms, color 160ms;
	border-radius: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sl-consent-modal-close:hover,
.sl-consent-modal-close:focus-visible {
	background: var(--c-ink, #0A0908);
	color: var(--c-paper, #F9F6EE);
	outline: none;
}

/* Modal Body — scrollbar */
.sl-consent-modal-body {
	padding: 24px 32px 18px;
	overflow-y: auto;
	flex: 1;
}
.sl-consent-modal-intro {
	margin: 0 0 24px;
	font: 400 0.9375rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
}

/* Kategorie-Block */
.sl-consent-cat {
	padding: 20px 0;
	border-top: 1px solid rgba(10, 9, 8, 0.12);
}
.sl-consent-cat:first-of-type {
	border-top: none;
	padding-top: 0;
}
.sl-consent-cat-row {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	margin-bottom: 10px;
	user-select: none;
}
.sl-consent-cat-row input[type="checkbox"] {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--c-marine, #003399);
}
.sl-consent-cat-row input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}
.sl-consent-cat-label {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	flex-wrap: wrap;
}
.sl-consent-cat-title {
	font: 600 1.0625rem/1.3 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
}
.sl-consent-cat-state {
	font: 500 0.6875rem/1 var(--f-mono, "JetBrains Mono", monospace);
	color: var(--c-marine, #003399);
	letter-spacing: 0.06em;
	padding: 5px 9px;
	border: 1px solid var(--c-marine, #003399);
	text-transform: uppercase;
}
.sl-consent-cat-state--always {
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
}
.sl-consent-cat-desc {
	margin: 4px 0 0 36px;
	font: 400 0.875rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	opacity: 0.82;
}

/* Modal Footer */
.sl-consent-modal-foot {
	padding: 22px 32px 26px;
	border-top: 2px solid var(--c-ink, #0A0908);
	background: rgba(10, 9, 8, 0.025);
	flex-shrink: 0;
}
.sl-consent-modal-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.sl-consent-modal-btns .sl-consent-btn {
	flex: 1 1 160px;
	min-width: 0;
}
.sl-consent-modal-legal {
	margin: 14px 0 0;
	font: 400 0.75rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	opacity: 0.7;
}
.sl-consent-modal-legal a {
	color: var(--c-marine, #003399);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Modal Responsive */
@media (max-width: 720px) {
	.sl-consent-modal { padding: 12px; }
	.sl-consent-modal-card {
		box-shadow: 6px 6px 0 var(--c-marine, #003399);
		max-height: calc(100vh - 24px);
	}
	.sl-consent-modal-head { padding: 24px 22px 16px; }
	.sl-consent-modal-body { padding: 20px 22px 12px; }
	.sl-consent-modal-foot { padding: 18px 22px 22px; }
	.sl-consent-modal-h { font-size: 1.5rem; }
	.sl-consent-modal-close { top: 14px; right: 14px; width: 32px; height: 32px; }
	.sl-consent-modal-btns { flex-direction: column; align-items: stretch; }
	.sl-consent-modal-btns .sl-consent-btn { width: 100%; flex: 1 1 auto; }
	.sl-consent-cat-desc { margin-left: 36px; font-size: 0.8125rem; }
}

@media (max-width: 380px) {
	.sl-consent-modal { padding: 8px; }
	.sl-consent-modal-card {
		border-width: 2px;
		box-shadow: 4px 4px 0 var(--c-marine, #003399);
	}
	.sl-consent-modal-head { padding: 22px 18px 14px; }
	.sl-consent-modal-body { padding: 18px 18px 10px; }
	.sl-consent-modal-foot { padding: 16px 18px 20px; }
	.sl-consent-modal-h { font-size: 1.25rem; }
	.sl-consent-cat-desc { margin-left: 0; }
	.sl-consent-cat-row { gap: 12px; }
}

/* Toast für Reset-Bestätigung */
.sl-consent-reset-info {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	padding: 14px 22px;
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	font: 500 0.9375rem/1.4 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	border: 2px solid var(--c-ink, #0A0908);
	box-shadow: 4px 4px 0 var(--c-azure, #0177E3);
	max-width: calc(100vw - 24px);
	text-align: center;
	animation: sl-consent-reset-in 280ms var(--ease-out);
}
@keyframes sl-consent-reset-in {
	from { opacity: 0; transform: translate(-50%, -16px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 480px) {
	.sl-consent-reset-info {
		left: 12px;
		right: 12px;
		transform: none;
		font-size: 0.875rem;
	}
	@keyframes sl-consent-reset-in {
		from { opacity: 0; transform: translateY(-16px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
	.sl-consent,
	.sl-consent-modal,
	.sl-consent-modal-card,
	.sl-consent-btn,
	.sl-consent-reset-info {
		transition: none !important;
		animation: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   STICKY MOBILE-CTA + EXIT-INTENT — Conversion-Boost
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Sticky Mobile-CTA (unten) ─── */
.sl-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9980;
	display: none; /* nur Mobile (siehe unten) */
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: var(--c-ink, #0A0908);
	border-top: 3px solid var(--c-marine, #003399);
	transform: translateY(0);
	transition: transform 240ms var(--ease-out);
}
.sl-sticky-cta.is-hidden {
	transform: translateY(100%);
}
.sl-sticky-cta-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px;
	color: var(--c-paper, #F9F6EE);
	text-decoration: none;
	font-family: var(--f-sans, "Inter Tight", system-ui, sans-serif);
	transition: background 160ms;
	min-height: 56px;
}
.sl-sticky-cta-btn:hover,
.sl-sticky-cta-btn:focus-visible {
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	outline: none;
}
.sl-sticky-cta-btn--call { border-right: 1px solid rgba(249,246,238,0.15); }
.sl-sticky-cta-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--c-azure, #0177E3);
}
.sl-sticky-cta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.1;
	min-width: 0;
}
.sl-sticky-cta-text strong {
	font-weight: 600;
	font-size: 0.9375rem;
}
.sl-sticky-cta-text small {
	font-size: 0.75rem;
	font-family: var(--f-mono, "JetBrains Mono", monospace);
	opacity: 0.7;
	letter-spacing: 0.02em;
}

/* Mobile: Sticky-CTA aktiv */
@media (max-width: 860px) {
	.sl-sticky-cta { display: grid; }
	/* Body-Padding, damit Footer-Content nicht vom CTA verdeckt wird */
	body { padding-bottom: 60px; }
}
@media (max-width: 380px) {
	.sl-sticky-cta-text small { display: none; }
	.sl-sticky-cta-text strong { font-size: 0.875rem; }
}

/* ─── Exit-Intent Popup (Desktop) ─── */
.sl-exit-intent {
	position: fixed;
	inset: 0;
	z-index: 9985;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 9, 8, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 240ms var(--ease-out);
}
.sl-exit-intent.is-visible { opacity: 1; }
.sl-exit-intent[hidden] { display: none !important; }

.sl-exit-intent-card {
	position: relative;
	max-width: 520px;
	width: 100%;
	padding: 32px 36px 28px;
	background: var(--c-paper, #F9F6EE);
	border: 3px solid var(--c-ink, #0A0908);
	box-shadow: 10px 10px 0 var(--c-azure, #0177E3);
	transform: translateY(16px);
	transition: transform 280ms var(--ease-out);
}
.sl-exit-intent.is-visible .sl-exit-intent-card { transform: translateY(0); }

.sl-exit-intent-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 2px solid var(--c-ink, #0A0908);
	color: var(--c-ink, #0A0908);
	font: 400 1.25rem/1 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
}
.sl-exit-intent-close:hover,
.sl-exit-intent-close:focus-visible {
	background: var(--c-ink, #0A0908);
	color: var(--c-paper, #F9F6EE);
	outline: none;
}

.sl-exit-intent-eyebrow {
	margin: 0 0 8px;
	font: 500 0.6875rem/1.4 var(--f-mono, "JetBrains Mono", monospace);
	color: var(--c-marine, #003399);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-exit-intent-eyebrow span {
	font-family: var(--f-display, "Fraunces", Georgia, serif);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	margin-right: 4px;
}
.sl-exit-intent-h {
	margin: 0 0 12px;
	font: 700 1.625rem/1.15 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.015em;
}
.sl-exit-intent-h em {
	font-style: italic;
	color: var(--c-marine, #003399);
}
.sl-exit-intent-body {
	margin: 0 0 22px;
	font: 400 0.9375rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
}

.sl-exit-intent-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sl-exit-intent-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	font: 600 0.9375rem/1.2 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	text-decoration: none;
	border: 2px solid var(--c-ink, #0A0908);
	transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 160ms;
	border-radius: 0;
	min-height: 48px;
}
.sl-exit-intent-btn--primary {
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	box-shadow: 4px 4px 0 var(--c-azure, #0177E3);
}
.sl-exit-intent-btn--primary:hover,
.sl-exit-intent-btn--primary:focus-visible {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-azure, #0177E3);
	color: var(--c-paper, #F9F6EE);
	outline: none;
}
.sl-exit-intent-btn--ghost {
	background: transparent;
	color: var(--c-ink, #0A0908);
	font-weight: 500;
}
.sl-exit-intent-btn--ghost:hover,
.sl-exit-intent-btn--ghost:focus-visible {
	background: var(--c-ink, #0A0908);
	color: var(--c-paper, #F9F6EE);
	outline: none;
}

/* Desktop only — Exit-Intent nur ≥860px */
@media (max-width: 860px) {
	.sl-exit-intent { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.sl-sticky-cta,
	.sl-exit-intent,
	.sl-exit-intent-card {
		transition: none !important;
	}
}

/* ──────────────────────────────────────────────────────────
   Service-Detail — Aktualisierungs-Meta
   ────────────────────────────────────────────────────────── */
.sl-service-region-meta {
	margin: 32px 0 0;
	padding: 16px 20px;
	border-left: 3px solid var(--c-marine, #003399);
	background: rgba(0, 51, 153, 0.04);
	font: 400 0.875rem/1.6 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	opacity: 0.85;
}
.sl-service-region-meta-eyebrow {
	display: inline-block;
	margin-right: 8px;
	font: 500 0.6875rem/1 var(--f-mono, "JetBrains Mono", monospace);
	color: var(--c-marine, #003399);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-service-region-meta time {
	font-weight: 500;
	color: var(--c-marine, #003399);
}

/* ════════════════════════════════════════════════════════════════════════════
   SERVICE-DETAIL — Weiterlesen (Internal-Linking)
   ════════════════════════════════════════════════════════════════════════════ */
.sl-service-reading {
	padding: 80px 0;
	background: var(--c-creme, #F2EEE3);
}
.sl-service-reading-h2 {
	margin: 24px 0 40px;
	font: 700 2.5rem/1.1 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.02em;
}
.sl-service-reading-h2 em {
	font-style: italic;
	color: var(--c-marine, #003399);
}

.sl-service-reading-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.sl-service-reading-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 26px 26px;
	background: var(--c-paper, #F9F6EE);
	border: 2px solid var(--c-ink, #0A0908);
	box-shadow: 6px 6px 0 var(--c-marine, #003399);
	text-decoration: none;
	color: var(--c-ink, #0A0908);
	transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.sl-service-reading-card:hover,
.sl-service-reading-card:focus-visible {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 var(--c-marine, #003399);
	outline: none;
	color: var(--c-ink, #0A0908);
}

.sl-service-reading-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font: 500 0.75rem/1 var(--f-mono, "JetBrains Mono", monospace);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sl-service-reading-cat {
	padding: 4px 8px;
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
}
.sl-service-reading-time {
	color: var(--c-marine, #003399);
}

.sl-service-reading-h3 {
	margin: 4px 0 0;
	font: 700 1.25rem/1.25 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.01em;
}
.sl-service-reading-excerpt {
	margin: 4px 0 0;
	font: 400 0.9375rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	opacity: 0.78;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sl-service-reading-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	font: 500 0.875rem/1.3 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-marine, #003399);
	letter-spacing: 0.005em;
}
.sl-service-reading-card:hover .sl-service-reading-link {
	color: var(--c-azure, #0177E3);
}

.sl-service-reading-foot {
	margin: 24px 0 0;
	text-align: center;
	font: 500 0.9375rem/1.4 var(--f-sans, "Inter Tight", system-ui, sans-serif);
}

@media (max-width: 1024px) {
	.sl-service-reading-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sl-service-reading { padding: 56px 0; }
	.sl-service-reading-h2 { font-size: 1.875rem; margin-bottom: 32px; }
	.sl-service-reading-grid { grid-template-columns: 1fr; }
	.sl-service-reading-card { box-shadow: 4px 4px 0 var(--c-marine, #003399); }
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME — Inline-CTA (Mid-Page Conversion-Anstoß)
   ════════════════════════════════════════════════════════════════════════════ */
.sl-home-inline-cta {
	padding: 64px 0;
	background: var(--c-cream, #F2EEE3);
}
.sl-home-inline-cta-card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	padding: 40px 48px;
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	border: 2px solid var(--c-ink, #0A0908);
	box-shadow: 8px 8px 0 var(--c-ink, #0A0908);
	position: relative;
	overflow: hidden;
}
.sl-home-inline-cta-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 240px;
	height: 240px;
	background: radial-gradient(circle at center, rgba(1,119,227,0.35), transparent 70%);
	transform: translate(40%, -40%);
	pointer-events: none;
}
.sl-home-inline-cta-text {
	position: relative;
	z-index: 1;
	min-width: 0;
}
.sl-home-inline-cta-eyebrow {
	display: inline-block;
	font: 500 0.75rem/1 var(--f-mono, "JetBrains Mono", monospace);
	color: var(--c-azure, #0177E3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.sl-home-inline-cta-h {
	margin: 0 0 12px;
	font: 700 clamp(1.625rem, 3vw, 2.25rem)/1.15 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-paper, #F9F6EE);
	letter-spacing: -0.015em;
}
.sl-home-inline-cta-h em {
	font-style: italic;
	color: var(--c-azure, #0177E3);
	font-weight: 600;
}
.sl-home-inline-cta-lede {
	margin: 0;
	font: 400 1rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-paper, #F9F6EE);
	opacity: 0.92;
	max-width: 540px;
}
.sl-home-inline-cta-actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
	min-width: 240px;
}
.sl-home-inline-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	font: 600 1rem/1.2 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	text-decoration: none;
	text-align: center;
	border: 2px solid var(--c-paper, #F9F6EE);
	transition: all 180ms var(--ease-out);
	min-height: 52px;
	letter-spacing: -0.005em;
}
.sl-home-inline-cta-btn--primary {
	background: var(--c-azure, #0177E3);
	color: var(--c-paper, #F9F6EE);
	border-color: var(--c-azure, #0177E3);
}
.sl-home-inline-cta-btn--primary:hover,
.sl-home-inline-cta-btn--primary:focus-visible {
	background: var(--c-paper, #F9F6EE);
	color: var(--c-marine, #003399);
	border-color: var(--c-paper, #F9F6EE);
	outline: none;
	transform: translate(-2px, -2px);
}
.sl-home-inline-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper, #F9F6EE);
}
.sl-home-inline-cta-btn--ghost:hover,
.sl-home-inline-cta-btn--ghost:focus-visible {
	background: var(--c-paper, #F9F6EE);
	color: var(--c-marine, #003399);
	outline: none;
	transform: translate(-2px, -2px);
}
.sl-home-inline-cta-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

@media (max-width: 860px) {
	.sl-home-inline-cta {
		padding: 48px 0;
	}
	.sl-home-inline-cta-card {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 32px 28px;
		box-shadow: 6px 6px 0 var(--c-ink, #0A0908);
	}
	.sl-home-inline-cta-actions {
		min-width: 0;
	}
}
@media (max-width: 480px) {
	.sl-home-inline-cta {
		padding: 36px 0;
	}
	.sl-home-inline-cta-card {
		padding: 24px 20px;
		box-shadow: 4px 4px 0 var(--c-ink, #0A0908);
	}
	.sl-home-inline-cta-btn {
		padding: 12px 18px;
		font-size: 0.9375rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   CITY × SERVICE — Landing-Pages (z. B. /heidelberg/online-shops/)
   ════════════════════════════════════════════════════════════════════════════ */

.sl-city-service {
	background: var(--c-paper, #F9F6EE);
}

/* ─── Hero ─── */
.sl-city-service-hero {
	padding: 60px 0 80px;
	border-bottom: 1px solid rgba(10, 9, 8, 0.1);
}
.sl-city-service-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 32px;
	font: 500 0.8125rem/1.4 var(--f-mono, "JetBrains Mono", monospace);
	letter-spacing: 0.04em;
	color: var(--c-ink, #0A0908);
	text-transform: uppercase;
}
.sl-city-service-breadcrumb a {
	color: var(--c-marine, #003399);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sl-city-service-breadcrumb-current { opacity: 0.7; }

.sl-city-service-hero-h1 {
	margin: 24px 0 24px;
	font: 700 3.5rem/1.05 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.02em;
	max-width: 900px;
}
.sl-city-service-hero-h1 em {
	font-style: italic;
	color: var(--c-marine, #003399);
}

.sl-city-service-hero-lede {
	margin: 0 0 36px;
	font: 400 1.25rem/1.5 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	max-width: 720px;
}

.sl-city-service-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ─── Intro ─── */
.sl-city-service-intro {
	padding: 70px 0;
	background: var(--c-creme, #F2EEE3);
}
.sl-city-service-intro-text {
	margin: 24px 0 0;
	font: 400 1.0625rem/1.65 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	max-width: 760px;
}

/* ─── Punkte (3 Schwerpunkte) ─── */
.sl-city-service-points {
	padding: 80px 0;
}
.sl-city-service-points-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 40px;
}
.sl-city-service-point {
	padding: 32px 28px;
	background: var(--c-paper, #F9F6EE);
	border: 2px solid var(--c-ink, #0A0908);
	box-shadow: 6px 6px 0 var(--c-marine, #003399);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sl-city-service-point-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	font: 600 1rem/1 var(--f-mono, "JetBrains Mono", monospace);
	letter-spacing: 0.04em;
}
.sl-city-service-point-h3 {
	margin: 0;
	font: 700 1.25rem/1.25 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.01em;
}
.sl-city-service-point-text {
	margin: 0;
	font: 400 0.9375rem/1.55 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	opacity: 0.85;
}

/* ─── CTA ─── */
.sl-city-service-cta {
	padding: 80px 0;
	background: var(--c-creme, #F2EEE3);
}
.sl-city-service-cta-card {
	max-width: 820px;
	padding: 48px 56px;
	background: var(--c-paper, #F9F6EE);
	border: 3px solid var(--c-ink, #0A0908);
	box-shadow: 10px 10px 0 var(--c-marine, #003399);
}
.sl-city-service-cta-h2 {
	margin: 24px 0 16px;
	font: 700 2.5rem/1.1 var(--f-display, "Fraunces", Georgia, serif);
	color: var(--c-ink, #0A0908);
	letter-spacing: -0.02em;
}
.sl-city-service-cta-h2 em {
	font-style: italic;
	color: var(--c-marine, #003399);
}
.sl-city-service-cta-text {
	margin: 0 0 28px;
	font: 400 1.0625rem/1.6 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
}
.sl-city-service-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ─── Verwandte Services ─── */
.sl-city-service-related {
	padding: 80px 0 100px;
}
.sl-city-service-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}
.sl-city-service-related-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	background: var(--c-paper, #F9F6EE);
	border: 2px solid var(--c-ink, #0A0908);
	text-decoration: none;
	color: var(--c-ink, #0A0908);
	transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background 160ms;
}
.sl-city-service-related-link:hover,
.sl-city-service-related-link:focus-visible {
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--c-azure, #0177E3);
	outline: none;
}
.sl-city-service-related-title {
	font: 600 1rem/1.3 var(--f-sans, "Inter Tight", system-ui, sans-serif);
}
.sl-city-service-related-city {
	font: 500 0.75rem/1 var(--f-mono, "JetBrains Mono", monospace);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}
.sl-city-service-related-link:hover .sl-city-service-related-city { opacity: 0.95; }

.sl-city-service-related-foot {
	margin: 32px 0 0;
	text-align: center;
	font: 500 0.9375rem/1.5 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
	.sl-city-service-points-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-city-service-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.sl-city-service-hero { padding: 40px 0 56px; }
	.sl-city-service-hero-h1 { font-size: 2.25rem; }
	.sl-city-service-hero-lede { font-size: 1.0625rem; }
	.sl-city-service-intro { padding: 56px 0; }
	.sl-city-service-points { padding: 56px 0; }
	.sl-city-service-points-grid { grid-template-columns: 1fr; gap: 20px; }
	.sl-city-service-point { box-shadow: 4px 4px 0 var(--c-marine, #003399); }
	.sl-city-service-cta { padding: 56px 0; }
	.sl-city-service-cta-card { padding: 32px 28px; box-shadow: 6px 6px 0 var(--c-marine, #003399); }
	.sl-city-service-cta-h2 { font-size: 1.875rem; }
	.sl-city-service-related { padding: 56px 0 72px; }
	.sl-city-service-related-grid { grid-template-columns: 1fr; }
}

/* Service-Detail-Region: Stadt-spezifische Cross-Links */
.sl-service-region-cities {
	margin: 32px 0 0;
	padding: 20px 24px;
	background: var(--c-paper, #F9F6EE);
	border: 2px solid var(--c-ink, #0A0908);
	box-shadow: 4px 4px 0 var(--c-azure, #0177E3);
}
.sl-service-region-cities-label {
	margin: 0 0 12px;
	font: 500 0.8125rem/1.3 var(--f-mono, "JetBrains Mono", monospace);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-marine, #003399);
}
.sl-service-region-cities-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.sl-service-region-city {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--c-creme, #F2EEE3);
	border: 1px solid var(--c-ink, #0A0908);
	font: 500 0.875rem/1.3 var(--f-sans, "Inter Tight", system-ui, sans-serif);
	color: var(--c-ink, #0A0908);
	text-decoration: none;
	transition: transform 200ms var(--ease-out), background 160ms;
}
.sl-service-region-city:hover,
.sl-service-region-city:focus-visible {
	background: var(--c-marine, #003399);
	color: var(--c-paper, #F9F6EE);
	transform: translateY(-2px);
	outline: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE POLISH — v1.15.9
   Zusätzliche Mobile-Anpassungen für Patterns mit großzügigem Desktop-Padding,
   sowie Konsistenz-Korrekturen für die häufigsten User-Sichtbaren-Mobile-Issues.
   ════════════════════════════════════════════════════════════════════════════ */

/* Auf schmalen Viewports: alle großen Inline-Paddings runter,
   damit Hero-Sections, Empty-States und CTAs nicht zu viel vertikalen Platz brauchen. */
@media (max-width: 768px) {
	.sl-proof {
		padding: 32px 0;
	}
	.sl-footer-top {
		padding: 40px 0 24px;
	}
	.sl-manifesto-inline {
		padding: 32px 0;
	}
	.sl-projects-empty-inner,
	.sl-blog-archive-empty {
		padding: 40px 20px;
	}
	.sl-city-service-intro {
		padding: 40px 0;
	}
	.sl-city-service-cta {
		padding: 48px 0;
	}
	.sl-city-service-cta-card {
		padding: 28px 20px;
	}
	.sl-city-service-related {
		padding: 48px 0;
	}
	.sl-city-service-hero {
		padding-top: clamp(2.5rem, 6vw, 4rem);
		padding-bottom: clamp(2rem, 5vw, 3rem);
	}
	.sl-city-service-points-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

@media (max-width: 480px) {
	.sl-city-service-intro,
	.sl-city-service-cta,
	.sl-city-service-related {
		padding: 32px 0;
	}
	.sl-city-service-cta-card {
		padding: 24px 18px;
	}
}

/* Hero-Headlines bei <= 380px nicht zu groß werden lassen */
@media (max-width: 380px) {
	.sl-hero-title {
		font-size: clamp(2rem, 8vw, 2.5rem) !important;
		letter-spacing: -0.02em;
	}
	.sl-services-hero-title,
	.sl-about-hero-title,
	.sl-contact-hero-title,
	.sl-article-hero-title,
	.sl-case-hero-title,
	.sl-city-service-hero-h1 {
		font-size: clamp(1.875rem, 7.5vw, 2.25rem) !important;
		line-height: 1.1;
	}
	/* Section-Marks etwas kleiner */
	.sl-section-mark-label {
		font-size: 0.8125rem !important;
	}
	.sl-section-mark-num {
		font-size: 0.8125rem !important;
	}
}

/* Form-Inputs Mobile: full-width und ausreichend Touch-Target-Höhe */
@media (max-width: 640px) {
	.sl-form input[type="text"],
	.sl-form input[type="email"],
	.sl-form input[type="tel"],
	.sl-form textarea,
	.sl-form select {
		min-height: 48px;
		font-size: 16px; /* >=16px verhindert iOS-Zoom-Bug beim Focus */
	}
	.sl-form__submit {
		width: 100%;
		justify-content: center;
	}
}

/* Mobile-Header-CTA bei ganz schmalen Viewports: weiter komprimieren */
@media (max-width: 480px) {
	.sl-header-cta {
		display: none; /* CTA wandert auf sticky-bar; Header bleibt clean */
	}
}

/* Topbar (Marquee) auf Mobile etwas kompakter */
@media (max-width: 640px) {
	.sl-topbar {
		font-size: 0.6875rem;
		letter-spacing: 0.02em;
		height: 26px;
	}
	.sl-topbar-inner {
		gap: 24px;
		animation-duration: 60s;
	}
}

/* Tabellen — falls in Pages eingebettet werden, scrollen statt brechen */
.sl-page-content table,
.sl-article-content table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	white-space: normal;
}
@media (max-width: 640px) {
	.sl-page-content table,
	.sl-article-content table {
		font-size: 0.875rem;
	}
}

/* Bilder im Article-Content sollen Mobile sauber laufen */
@media (max-width: 640px) {
	.sl-article-content img,
	.sl-page-content img {
		margin-inline: 0;
		max-width: 100%;
		height: auto;
		border-radius: 0;
	}
}

/* Service-Detail-Hero auf Mobile etwas Luft */
@media (max-width: 640px) {
	.sl-service-hero-title {
		font-size: clamp(2rem, 7vw, 2.5rem) !important;
	}
	.sl-service-hero-lede {
		font-size: 1rem !important;
		line-height: 1.5 !important;
	}
}

/* About-Foto-Frame Mobile: weniger margin oben */
@media (max-width: 640px) {
	.sl-about-figure,
	.sl-about-hero-figure {
		margin-top: 24px;
	}
}

/* Stat-Row in den City-Pages: bei Mobile als 1-Spalter, sonst 3-Spalter */
@media (max-width: 640px) {
	.sl-stat-row {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

/* Sticky-CTA: bei sehr schmal die Texte verschlanken */
@media (max-width: 360px) {
	.sl-sticky-cta-text strong {
		font-size: 0.875rem;
	}
	.sl-sticky-cta-text small {
		font-size: 0.6875rem;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE POLISH — v1.15.10
   Korrekturen aus echtem Live-Audit auf neu.sl-webservice.de:
   - Hero-Mark (das blasse Hintergrund-Wort) auf Mobile noch dezenter
   - Topbar-Ticker auf Mobile etwas reduziert in Höhe
   - Service-Hero Mark soll nicht hinter dem Headline-Text liegen
   ════════════════════════════════════════════════════════════════════════════ */

/* Hero-Mark — auf Mobile EXTREM dezent oder ganz weg (überlagert Hero-Text sonst) */
@media (max-width: 768px) {
	.sl-service-hero-bg-mark,
	.sl-services-hero-bg-mark,
	.sl-about-hero-bg-mark,
	.sl-contact-hero-bg-mark,
	.sl-projects-hero-bg-mark,
	.sl-project-hero-bg-mark,
	.sl-article-hero-bg-mark,
	.sl-blog-archive-hero-bg-mark {
		color: color-mix(in srgb, var(--c-marine) 2.5%, transparent) !important;
		font-size: clamp(4rem, 14vw, 8rem) !important;
		top: auto !important;
		bottom: -10% !important;
		right: -8vw !important;
	}
}

@media (max-width: 480px) {
	/* Auf ganz schmal: Hero-Mark komplett aus, da auf 360px kein Platz */
	.sl-service-hero-bg-mark,
	.sl-services-hero-bg-mark,
	.sl-about-hero-bg-mark,
	.sl-contact-hero-bg-mark,
	.sl-projects-hero-bg-mark,
	.sl-project-hero-bg-mark,
	.sl-article-hero-bg-mark,
	.sl-blog-archive-hero-bg-mark {
		display: none !important;
	}
}

/* Service-Hero-Title — Mobile-Reset, damit Text immer im Vordergrund liegt */
@media (max-width: 640px) {
	.sl-service-hero-title {
		font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
		line-height: 1.1 !important;
		letter-spacing: -0.02em !important;
		position: relative;
		z-index: 5 !important;
	}
	.sl-service-hero-lede {
		font-size: 1rem !important;
		line-height: 1.55 !important;
		max-width: 100% !important;
		position: relative;
		z-index: 5 !important;
	}
	.sl-service-hero-inner {
		position: relative;
		z-index: 5 !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE FIXES — v1.15.11
   Echte Live-Audit-Befunde:
   1) Works-Row: Meta-Spalte überlappt Title auf Mobile (Bild 1)
   2) Voice-Quote: Block-Anführungszeichen wirkt heavy, hart, nicht editorial
   3) Burger-Icon: Browser zeigt einzelnen Strich statt Hamburger — eigenes Icon
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1) Works-Row Mobile-Stack (Bild 1) ──────────────────────────────────── */
@media (max-width: 768px) {
	.sl-work-row {
		grid-template-columns: 1fr auto !important;
		grid-template-areas:
			"num arrow"
			"title arrow" !important;
		gap: 8px 16px !important;
		padding: 24px 0 !important;
		align-items: start !important;
	}
	.sl-work-row-num {
		grid-area: num;
		line-height: 1.4 !important;
		font-size: 0.75rem !important;
	}
	.sl-work-row-title {
		grid-area: title;
		font-size: clamp(1.25rem, 5.5vw, 1.75rem) !important;
		line-height: 1.15 !important;
	}
	.sl-work-row-arrow {
		grid-area: arrow;
		font-size: 1.5rem !important;
		align-self: center;
	}
	.sl-work-row-tags { display: none !important; }
	.sl-work-row:hover {
		padding-left: 16px !important; /* weniger aggressiv auf Mobile */
	}
}

/* ─── 2) Voice-Quote Editorial-Redesign ───────────────────────────────────── */
/* Statt heavy Marine-Block: dezenter, größerer Quote-Glyph in Marine, ohne Box */
.sl-voice {
	background: var(--c-paper);
	border: none !important;
	padding: 8px 4px 8px 32px !important;
	position: relative;
	box-shadow: none !important;
	transition: transform var(--d-3) var(--ease);
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 0 !important;
	border-left: 2px solid var(--c-marine) !important;
}
.sl-voice:nth-child(1),
.sl-voice:nth-child(2),
.sl-voice:nth-child(3) {
	transform: none !important; /* Kein Tilt mehr — zu unruhig */
}
.sl-voice:hover {
	transform: translateX(2px) !important;
	box-shadow: none !important;
	border-left-color: var(--c-azur) !important;
}

/* Quote-Glyph als großes, dezent platziertes Editorial-Element */
.sl-voice::before {
	content: "\201C" !important;
	position: absolute !important;
	top: -16px !important;
	left: -4px !important;
	font: 400 4.5rem/1 var(--f-serif) !important;
	background: transparent !important;
	color: var(--c-marine) !important;
	border: none !important;
	padding: 0 !important;
	line-height: 1 !important;
	z-index: 1 !important;
	font-style: italic !important;
	opacity: 0.6;
}

/* Quote-Text — etwas größer, in Fraunces italic */
.sl-voice blockquote,
.sl-voice .sl-voice-quote,
.sl-voice blockquote.wp-block-quote,
.sl-voice blockquote.wp-block-quote.sl-voice-quote {
	font-family: var(--f-serif) !important;
	font-weight: 400 !important;
	font-size: 1.25rem !important;
	line-height: 1.45 !important;
	font-style: italic !important;
	color: var(--c-ink);
	margin: 0;
	border: none;
	padding: 0;
	background: none;
	max-width: none;
	position: relative;
	z-index: 2;
}
.sl-voice blockquote p,
.sl-voice .sl-voice-quote p {
	font: inherit !important;
	color: inherit;
	margin: 0;
}

/* Caption: kompakt unter dem Quote */
.sl-voice figcaption,
.sl-voice .sl-voice-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 12px;
	margin: 0;
	border-top: 1px solid color-mix(in srgb, var(--c-ink) 15%, transparent) !important;
}

@media (max-width: 640px) {
	.sl-voice {
		padding-left: 24px !important;
	}
	.sl-voice::before {
		font-size: 3.5rem !important;
		top: -10px !important;
	}
	.sl-voice blockquote,
	.sl-voice .sl-voice-quote {
		font-size: 1.125rem !important;
	}
}

/* ─── 3) Burger-Icon — eigenes 3-Linien-Hamburger (über WP-SVG) ─────────── */
/* Verstecke das WP-eigene SVG im Burger-Button und render unseres */
.sl-site-header .wp-block-navigation__responsive-container-open svg {
	display: none !important;
}
.sl-site-header .wp-block-navigation__responsive-container-open::before {
	content: "" !important;
	display: block !important;
	width: 22px !important;
	height: 16px !important;
	background-image: linear-gradient(
		to bottom,
		currentColor 0,        currentColor 2px,
		transparent 2px,       transparent 7px,
		currentColor 7px,      currentColor 9px,
		transparent 9px,       transparent 14px,
		currentColor 14px,     currentColor 16px
	) !important;
	transition: background-image 200ms ease;
}

/* Wenn Menü offen (body.sl-nav-open): Burger-Button wird zum X — der Klick
   schließt das Menü, weil WordPress dann den container-close triggert.
   WICHTIG: Position + Größe müssen EXAKT mit dem geschlossenen Zustand
   übereinstimmen, sonst springt das Icon beim Öffnen/Schließen.
   Geschlossen: 44×44, vertikal zentriert im 64px-Header = 10px von oben,
   horizontal am Header-Padding (16px, bei ≤480px 14px). */
html body.sl-nav-open .sl-site-header .wp-block-navigation__responsive-container-open {
	position: fixed !important;
	/* Exakt auf Höhe des geschlossenen Hamburgers: unterhalb der Topbar (bar-h),
	   dann vertikal im Header zentriert ((header-h - 44) / 2). */
	top: calc(var(--bar-h, 26px) + (var(--header-h, 64px) - 44px) / 2) !important;
	right: 16px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 260 !important;
	background: transparent !important;
	border: 1.5px solid #0A0908 !important;
	color: #0A0908 !important;
}
html body.sl-nav-open .sl-site-header .wp-block-navigation__responsive-container-open::before {
	width: 22px !important;
	height: 22px !important;
	background-image: none !important;
	background:
		linear-gradient(45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%),
		linear-gradient(-45deg, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%) !important;
}

/* X-Close-Button (WordPress' eigener) ganz verstecken — wir nutzen den Toggle-Button als X */
.sl-site-header .wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* ─── 4) Sticky-Header braucht einen klaren Hintergrund auf Mobile ─── */
/* Bild 2: Header-Hintergrund war halbtransparent, weshalb der Voice-Quote
   dahinter durchschien. Klare Paper-Färbung + dünner Bottom-Border. */
@media (max-width: 768px) {
	.sl-site-header {
		background: var(--c-paper) !important;
		border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent) !important;
	}
	.sl-site-header.is-scrolled {
		background: var(--c-paper) !important;
		box-shadow: 0 2px 8px rgba(10, 9, 8, 0.04);
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE FIXES — v1.15.12
   Live-Audit Befunde:
   - Logo sprengt Header (war ~80px hoch wegen vertikalem Wordmark)
   - Header-Inner-Layout brauchte 2-Spalten Grid mit Logo links, Burger rechts
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE HEADER — v1.15.15 (Logo + Burger sauber im Header containieren)
   
   Höhen-Hierarchie:
   - Header-Container:  64 px (sl-Burger 44 + 10 oben + 10 unten = 64)
   - Logo (img):       max 40 px (passt mit etwas Luft)
   - Burger-Button:    44 × 44 px (Touch-Target-Norm)
   - Sticky-Topbar:    26 px
   
   Alle Elemente mit align-items: center → vertikal mittig im Header.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE HEADER — v1.15.16 KOMPLETT VEREINFACHT
   
   Eine zentrale Definition für Mobile (≤ 900 px). Klare Hierarchie:
   - Header-Höhe: 64 px (auf < 480 px: 60 px)
   - Inner: Flexbox mit space-between → Logo links, Burger rechts
   - Logo: max-height 40 px, vertikal mittig
   - Burger: 44 × 44 px, vertikal mittig
   - WordPress-Navigation: NICHT display:contents (das macht Probleme),
     sondern wir nutzen flex-basierte Anordnung
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	/* CSS-Variablen Mobile */
	:root {
		--header-h: 72px;
		--bar-h: 26px;
	}

	/* Header selbst — exakte Höhe */
	.sl-site-header {
		height: 72px !important;
		min-height: 72px !important;
		max-height: 72px !important;
		overflow: visible;
	}

	/* Inner — Flexbox-Layout: Logo links, Burger rechts */
	.sl-header-inner {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: 72px !important;
		gap: 12px;
		padding-inline: 16px !important;
		max-width: 100% !important;
		grid-template-columns: none !important;
	}

	/* Logo-Container — alle Varianten inklusive sl-logo-svg-Wrapper.
	   WICHTIG: Das Theme rendert das Logo als <a class="custom-logo-link">
	   <span class="sl-logo-svg"><svg>...</svg></span></a>, nicht als <img>. */
	.sl-header-inner .sl-wordmark,
	.sl-header-inner .wp-block-site-logo,
	.sl-site-header .wp-block-site-logo,
	.sl-header-inner .custom-logo-link,
	.sl-site-header .custom-logo-link,
	.sl-header-inner .sl-logo-svg,
	.sl-site-header .sl-logo-svg {
		display: inline-flex !important;
		align-items: center !important;
		max-height: 48px !important;
		height: auto !important;
		line-height: 1 !important;
		flex-shrink: 1;
		min-width: 0;
		order: 1;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Inline-SVG des Logos: hier wird die tatsächliche Höhe gesetzt */
	.sl-header-inner .sl-logo-svg svg,
	.sl-site-header .sl-logo-svg svg,
	.sl-header-inner .wp-block-site-logo svg,
	.sl-header-inner .custom-logo-link svg,
	.sl-header-inner .sl-wordmark svg {
		height: 40px !important;
		max-height: 40px !important;
		width: auto !important;
		max-width: 200px !important;
		display: block !important;
		object-fit: contain !important;
	}

	/* Falls Logo doch als img kommt (klassisches WP-Logo) */
	.sl-header-inner .wp-block-site-logo img,
	.sl-header-inner .custom-logo-link img,
	.sl-header-inner .custom-logo,
	.sl-header-inner img.custom-logo {
		max-height: 40px !important;
		max-width: 200px !important;
		height: auto !important;
		width: auto !important;
		object-fit: contain !important;
		display: block !important;
	}

	/* Navigation-Wrapper */
	.sl-site-header .wp-block-navigation {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex-shrink: 0;
		order: 2;
		justify-self: end !important;
	}

	/* Navigation-Container im geschlossenen Zustand: ausblenden */
	.sl-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Burger-Button: 44×44 */
	.sl-site-header .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		min-height: 44px !important;
		max-height: 44px !important;
		padding: 0 !important;
		background: transparent;
		border: 1.5px solid var(--c-ink);
		color: var(--c-ink);
		cursor: pointer;
		flex-shrink: 0;
	}

	/* Header-CTA aus */
	.sl-site-header .sl-header-cta {
		display: none !important;
	}
}

/* Extra-schmal: kleinerer Header */
@media (max-width: 480px) {
	:root {
		--header-h: 64px;
	}
	/* X-Button-Position an das schmalere Header-Padding (14px) angleichen,
	   damit Öffnen-Icon und Schließen-X exakt deckungsgleich sind. */
	html body.sl-nav-open .sl-site-header .wp-block-navigation__responsive-container-open {
		right: 14px !important;
		top: calc(var(--bar-h, 26px) + (var(--header-h, 64px) - 44px) / 2) !important;
	}
	.sl-site-header {
		height: 64px !important;
		min-height: 64px !important;
		max-height: 64px !important;
	}
	.sl-header-inner {
		max-height: 64px !important;
		padding-inline: 14px !important;
	}
	.sl-header-inner .sl-wordmark,
	.sl-header-inner .wp-block-site-logo,
	.sl-site-header .wp-block-site-logo,
	.sl-header-inner .custom-logo-link,
	.sl-site-header .custom-logo-link,
	.sl-header-inner .sl-logo-svg,
	.sl-site-header .sl-logo-svg {
		max-height: 42px !important;
	}
	.sl-header-inner .sl-logo-svg svg,
	.sl-site-header .sl-logo-svg svg,
	.sl-header-inner .wp-block-site-logo svg,
	.sl-header-inner .custom-logo-link svg,
	.sl-header-inner .sl-wordmark svg,
	.sl-header-inner .wp-block-site-logo img,
	.sl-header-inner .custom-logo-link img,
	.sl-header-inner .custom-logo {
		height: 36px !important;
		max-height: 36px !important;
		max-width: 170px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE NAV FINAL FIX — v1.15.13
   - Burger-Toggle bleibt sichtbar wenn Menü offen ist (wird zum X)
   - JS soll Klick auf Burger toggeln auch wenn das Menü offen ist
   ════════════════════════════════════════════════════════════════════════════ */

/* Erzwingen, dass der Toggle-Button immer sichtbar ist (auch bei aria-expanded=true) */
html body.sl-nav-open .sl-site-header .wp-block-navigation__responsive-container-open {
	display: inline-flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Mobile-Overlay-Items: ausreichend Abstand zum Container-Anfang */
@media (max-width: 900px) {
	html body .sl-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		padding-top: 8px !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO-ROTATOR FIX — v1.15.14
   "funktionieren." (14 Zeichen) wurde rechts abgeschnitten.
   ════════════════════════════════════════════════════════════════════════════ */

/* Hero-Container max-width und letter-spacing für lange Wörter anpassen */
.sl-rot {
	max-width: 100%;
	letter-spacing: -0.005em; /* minimal enger ziehen */
}

/* Bei besonders langen Wörtern muss das Item ggf. umbrechen können — auf
   ganz schmalen Viewports */
@media (max-width: 420px) {
	.sl-hero-title {
		font-size: clamp(1.875rem, 9.5vw, 3rem) !important;
		letter-spacing: -0.025em;
	}
	.sl-rot-item {
		font-size: 0.95em; /* Rotator-Items minimal kleiner als der Rest */
	}
}

/* Wenn der Browser das Grid-Stacking nicht versteht (sehr alt), Fallback */
@supports not (display: inline-grid) {
	.sl-rot {
		display: inline-block;
		position: relative;
		min-width: 14ch;
	}
	.sl-rot-item {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL CONTRAST SAFETY — v1.15.20
   
   Sicherheitsschicht: Jeder Block der "has-marine-background-color" trägt
   bekommt automatisch Paper-Text-Color, falls nicht explizit anders gesetzt.
   Das verhindert das "Schwarzer Text auf Marine-Block"-Problem, das bei
   manuell eingefügten WP-Blocks im Editor passieren kann.
   ════════════════════════════════════════════════════════════════════════════ */

/* WP-Marine-Backgrounds bekommen automatisch lesbaren Text */
.has-marine-background-color,
.has-marine-deep-background-color,
.has-ink-background-color {
	color: var(--c-paper);
}
.has-marine-background-color *:not(a):not([class*="has-"]),
.has-marine-deep-background-color *:not(a):not([class*="has-"]),
.has-ink-background-color *:not(a):not([class*="has-"]) {
	color: inherit;
}

/* Buttons auf marine-Hintergrund: garantiert lesbar */
.has-marine-background-color .wp-block-button__link:not(.has-text-color) {
	color: var(--c-marine);
	background: var(--c-paper);
}

/* ════════════════════════════════════════════════════════════════════════════
   INDUSTRY (BRANCHEN-SEITEN) — v1.15.21
   
   Pendant zu City-Service-Pages, aber nach Branche statt Stadt.
   URL-Struktur:
     /branchen/                          — Übersichts-Page (statisch)
     /branchen/{branche}/                — Hub mit Painpoints, Services
     /branchen/{branche}/{service}/      — Branche × Service Detail
   ════════════════════════════════════════════════════════════════════════════ */

.sl-industry-page { background: var(--c-cream); }

/* ─── HERO ──────────────────────────────────────────────────────────────── */
.sl-industry-hero {
	padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
}

.sl-industry-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	font: 500 0.75rem/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-ink) 60%, transparent);
	margin-bottom: 32px;
}

.sl-industry-breadcrumb a {
	color: var(--c-marine);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--c-marine) 30%, transparent);
	transition: border-color var(--d-2) var(--ease);
}
.sl-industry-breadcrumb a:hover { border-bottom-color: var(--c-marine); }
.sl-industry-breadcrumb-current { opacity: 0.7; }

.sl-industry-hero-h1 {
	font: 350 clamp(2.25rem, 5.5vw, 4.5rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-ink);
	margin: 0 0 24px;
	max-width: 28ch;
}
.sl-industry-hero-h1 em { font-style: italic; color: var(--c-marine); }

.sl-industry-hero-lede {
	font: 380 clamp(1.0625rem, 1.6vw, 1.375rem)/1.5 var(--f-serif);
	color: color-mix(in srgb, var(--c-ink) 80%, transparent);
	max-width: 60ch;
	margin: 0 0 40px;
}

.sl-industry-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* ─── INTRO ──────────────────────────────────────────────────────────────── */
.sl-industry-intro {
	padding: clamp(48px, 7vw, 96px) 0;
}

.sl-industry-intro-grid {
	max-width: 760px;
}

.sl-industry-intro-text p {
	font: 400 clamp(1rem, 1.3vw, 1.1875rem)/1.7 var(--f-sans);
	color: var(--c-ink);
	margin: 0;
}

/* ─── PAIN POINTS (nur Hub) ──────────────────────────────────────────────── */
.sl-industry-painpoints {
	padding: clamp(48px, 7vw, 96px) 0;
	background: var(--c-paper);
	border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
}

.sl-industry-painpoints-h2 {
	font: 350 clamp(1.75rem, 3.5vw, 2.75rem)/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 30ch;
}

.sl-industry-painpoints-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 48px 56px;
}

.sl-industry-painpoint {
	border-top: 2px solid var(--c-ink);
	padding-top: 20px;
}

.sl-industry-painpoint-num {
	display: inline-block;
	font: 500 0.75rem/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	color: var(--c-marine);
	margin-bottom: 16px;
}

.sl-industry-painpoint-h {
	font: 400 1.25rem/1.3 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 14px;
}

.sl-industry-painpoint-t {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 82%, transparent);
	margin: 0;
}

/* ─── SERVICES-AUSWAHL (nur Hub) ─────────────────────────────────────────── */
.sl-industry-services {
	padding: clamp(48px, 7vw, 96px) 0;
}

.sl-industry-services-h2 {
	font: 350 clamp(1.75rem, 3.5vw, 2.75rem)/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 32ch;
}

.sl-industry-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.sl-industry-service-card {
	display: block;
	padding: 28px 32px 28px;
	border: 2px solid var(--c-ink);
	background: var(--c-paper);
	text-decoration: none;
	position: relative;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sl-industry-service-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 6px 6px 0 var(--c-marine);
}

.sl-industry-service-card-h {
	font: 350 1.375rem/1.25 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-marine);
	margin: 0 0 12px;
}

.sl-industry-service-card-t {
	font: 400 0.9375rem/1.5 var(--f-sans);
	color: var(--c-ink);
	opacity: 0.82;
	margin: 0 0 16px;
}

.sl-industry-service-card-arrow {
	position: absolute;
	top: 20px;
	right: 24px;
	font: 400 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
}

/* ─── DETAIL-POINTS (nur Service-Page) ───────────────────────────────────── */
.sl-industry-points {
	padding: clamp(48px, 7vw, 96px) 0;
	background: var(--c-paper);
	border-top: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent);
}

.sl-industry-points-h2 {
	font: 350 clamp(1.75rem, 3.5vw, 2.75rem)/1.15 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 48px;
	max-width: 30ch;
}

.sl-industry-points-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 48px;
}

.sl-industry-point-num {
	display: inline-block;
	font: 350 italic 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
	margin-bottom: 12px;
}

.sl-industry-point-h {
	font: 400 1.25rem/1.3 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 12px;
}

.sl-industry-point-t {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 82%, transparent);
	margin: 0;
}

/* ─── CTA ────────────────────────────────────────────────────────────────── */
.sl-industry-cta {
	padding: clamp(56px, 8vw, 112px) 0;
	background: var(--c-marine);
	color: var(--c-paper);
	border-top: 3px solid var(--c-ink);
}

.sl-industry-cta-inner { max-width: 760px; }

.sl-industry-cta-eyebrow {
	font: 500 0.75rem/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: var(--c-azur-l, #aacaff);
	display: inline-block;
	margin-bottom: 24px;
}

.sl-industry-cta-h2 {
	font: 350 clamp(2rem, 4.5vw, 3.25rem)/1.05 var(--f-serif);
	letter-spacing: var(--ls-display);
	color: var(--c-paper);
	margin: 0 0 24px;
	max-width: 24ch;
}
.sl-industry-cta-h2 em { font-style: italic; color: var(--c-azur-l, #aacaff); }

.sl-industry-cta-lede {
	font: 380 clamp(1rem, 1.4vw, 1.1875rem)/1.55 var(--f-serif);
	color: color-mix(in srgb, var(--c-paper) 88%, transparent);
	max-width: 56ch;
	margin: 0 0 36px;
}

.sl-industry-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}

.sl-industry-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 28px;
	border: 3px solid var(--c-paper);
	font: 500 1rem/1 var(--f-sans);
	text-decoration: none;
	transition: transform var(--d-2) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}

.sl-industry-cta-btn--azur {
	background: var(--c-azur);
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-paper);
}
.sl-industry-cta-btn--azur:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-industry-cta-btn--ghost {
	background: transparent;
	color: var(--c-paper);
	box-shadow: 6px 6px 0 var(--c-azur);
}
.sl-industry-cta-btn--ghost:hover {
	transform: translate(-2px, -2px);
	background: var(--c-paper);
	color: var(--c-marine);
}

.sl-industry-cta-meta {
	font: 400 0.8125rem/1.4 var(--f-mono);
	letter-spacing: var(--ls-meta);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--c-paper) 70%, transparent);
	margin: 0;
}

/* ─── BRANCHEN-ÜBERSICHT (/branchen/) ────────────────────────────────────── */
.sl-branchen-overview {
	padding: clamp(48px, 7vw, 96px) 0;
}

.sl-branchen-overview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
	margin-top: 48px;
}

.sl-branchen-card {
	display: block;
	padding: 32px 36px;
	border: 2px solid var(--c-ink);
	background: var(--c-paper);
	text-decoration: none;
	position: relative;
	transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.sl-branchen-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: 8px 8px 0 var(--c-marine);
}

.sl-branchen-card-num {
	display: inline-block;
	font: 500 0.75rem/1 var(--f-mono);
	letter-spacing: var(--ls-meta);
	color: var(--c-marine);
	margin-bottom: 16px;
}

.sl-branchen-card-h {
	font: 350 1.625rem/1.2 var(--f-serif);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	margin: 0 0 16px;
}

.sl-branchen-card-t {
	font: 400 0.9375rem/1.55 var(--f-sans);
	color: color-mix(in srgb, var(--c-ink) 80%, transparent);
	margin: 0 0 0;
}

.sl-branchen-card-arrow {
	position: absolute;
	top: 24px;
	right: 28px;
	font: 400 1.5rem/1 var(--f-serif);
	color: var(--c-marine);
}

/* ─── MOBILE-Anpassungen ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.sl-industry-hero-actions,
	.sl-industry-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-industry-cta-btn,
	.sl-industry-hero-actions .sl-btn {
		justify-content: center;
	}
	.sl-industry-painpoints-grid,
	.sl-industry-services-grid,
	.sl-industry-points-grid,
	.sl-branchen-overview-grid {
		gap: 32px;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER RESPONSIVE — v1.15.22
   
   Zentrale Mobile-Anpassungen für Footer-Layout:
   - 1024px: 4 Spalten → 2x2 Grid
   - 700px:  2 Spalten → 1 Spalte gestapelt
   - Branchen-Tag-Zeile: bricht sauber um, kein Horizontal-Scroll
   - Bottom-Bar: Copyright + Links umbrechen wenn nötig
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.sl-footer-top {
		grid-template-columns: 1fr 1fr !important;
		gap: 40px 32px;
	}
	.sl-footer-brand {
		grid-column: 1 / -1;  /* Brand-Block über beide Spalten */
	}
}

@media (max-width: 700px) {
	.sl-footer-top {
		grid-template-columns: 1fr !important;
		gap: 36px;
		padding: 48px 0 36px;
	}
	.sl-footer-brand {
		grid-column: auto;
	}

	/* Branchen-Tag-Zeile: Label oben, Tags darunter */
	.sl-footer-industries {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 24px 0 28px;
	}
	.sl-footer-industries-label {
		margin-right: 0;
		margin-bottom: 4px;
	}
	.sl-footer-industries-list {
		gap: 8px;
		width: 100%;
	}
	.sl-footer-industries-list a {
		padding: 8px 12px;
		font-size: 0.8125rem;
	}

	/* Bottom-Bar: untereinander statt nebeneinander */
	.sl-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px 0;
	}
	.sl-footer-bottom ul {
		flex-wrap: wrap;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.sl-footer-top {
		padding: 40px 0 28px;
		gap: 32px;
	}
	.sl-footer-col h4 {
		margin-bottom: 16px;
	}
	.sl-footer-industries-list a {
		padding: 7px 11px;
		font-size: 0.75rem;
	}
}