/* Abschnitte der Startseite unter dem Hero. Block-Gruppen mit eigenen Klassen, Texte im Editor. */

/* ── Leistungen: Bento-Raster, große Karte links. Karten hell, beim Hover und Fokus Navy ── */
.sk-leistungen {
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) clamp(80px, 10vw, 140px);
}

/* Keine Lücke zwischen den Abschnitten: WordPress setzt sonst 32 px Abstand, durch den der stehende Hero durchschaut */
.entry-content > .sk-leistungen,
.entry-content > .sk-ablauf,
.entry-content > .sk-lp-intro {
	margin-block: 0;
}

.entry-content > .sk-hero + .sk-leistungen,
.entry-content > .sk-hero + .sk-ablauf,
.entry-content > .sk-hero + .sk-lp-intro {
	margin-top: -100svh;
}

/* Abschnittskopf: gleiche Abstände überall. Höhere Priorität, weil Kadence Absätzen eigene Abstände gibt */
.entry-content .sk-leistungen__head .sk-overline,
.entry-content .sk-leistungen__head h2,
.entry-content .sk-leistungen__head .sk-leistungen__intro {
	margin: 0;
}

.entry-content .sk-ablauf .sk-overline {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.entry-content .sk-ablauf h2 {
	margin: 0;
}

.entry-content .sk-ablauf .sk-ablauf__intro {
	margin: clamp(20px, 2.4vw, 32px) 0 0;
}

/* Abschnitts-Überschriften einheitlich: 40 bis 96 px, kleiner als die Hero-Überschrift */
.sk-leistungen h2,
.sk-ablauf h2 {
	font-size: clamp(2.5rem, 5.4vw, 6rem);
}

/* Kopf untereinander, alles bündig links: Zeile, Überschrift in zwei Zeilen, Einleitung */
.sk-leistungen__head {
	margin-bottom: clamp(40px, 5vw, 72px);
}

.sk-leistungen__head > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2.4vw, 32px);
}

/* Kleine Zeile über der Überschrift, mit Goldlinie. Text in Grau, Gold nur als Linie */
.sk-overline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font: 500 0.75rem/1 var(--sk-font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sk-grau);
}

.sk-overline::before {
	content: "";
	width: 40px;
	height: 1px;
	flex-shrink: 0;
	background: var(--sk-gold);
}

.sk-leistungen h2 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(2.5rem, 5.4vw, 6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.sk-leistungen h2 em {
	font-style: italic;
	color: var(--sk-navy-mittel);
}

.sk-leistungen__intro {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(1.0625rem, 0.7rem + 0.6vw, 1.375rem);
	line-height: 1.6;
	color: var(--sk-grau);
}

/* Raster: große Karte links über zwei Zeilen, zwei kleinere rechts */
.sk-leistungen__grid > .wp-block-group__inner-container,
.sk-leistungen__grid:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(16px, 1.8vw, 24px);
	align-items: stretch;
}

.sk-leistung:first-child {
	grid-row: span 2;
}

.sk-leistung:first-child h3 {
	font-size: clamp(2rem, 3.4vw, 3.25rem);
}

.sk-leistung {
	--sk-icon: none;
	--sk-icon-hover: none;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	margin: 0;
	padding: clamp(28px, 3vw, 44px);
	border: 1px solid rgba(10, 31, 68, 0.08);
	border-radius: 22px;
	background: #FDFBF7;
	color: var(--sk-grau);
	display: flex;
	flex-direction: column;
	transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

/* Inhalt füllt die Karte, Tags sitzen bei allen drei Karten unten auf einer Linie */
.sk-leistung > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
}

.sk-leistung .sk-tags {
	margin-top: auto !important;
	padding-top: clamp(20px, 2vw, 28px);
}

/* Icon im Kreis, Navy 10 Prozent */
.sk-leistung h3::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: clamp(20px, 2.4vw, 32px);
	border-radius: 50%;
	background: rgba(10, 31, 68, 0.08) var(--sk-icon) no-repeat center / 30px;
	transition: background-color 0.4s ease;
}

.sk-leistung h3 {
	margin: 0 0 14px;
	font-weight: 400;
	font-size: clamp(1.625rem, 2.4vw, 2.375rem);
	line-height: 1.12;
	color: var(--sk-navy);
	transition: color 0.4s ease;
}

.sk-leistung h3 a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Karte klickbar, wenn der Titel verlinkt ist */
.sk-leistung h3 a::after {
	content: "";
	position: absolute;
	inset: -100vmax;
}

.sk-leistung p {
	margin: 0;
	max-width: 48ch;
	font-size: clamp(1rem, 0.7rem + 0.4vw, 1.125rem);
	line-height: 1.65;
	transition: color 0.4s ease;
}

.sk-leistung:first-child p {
	font-size: clamp(1.0625rem, 0.7rem + 0.55vw, 1.25rem);
}

/* Tags auf hellem Gold */
.sk-leistung .sk-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: clamp(20px, 2vw, 28px) 0 0;
	padding: 0;
	list-style: none;
}

.sk-leistung .sk-tags li {
	margin: 0;
	padding: 7px 12px;
	border-radius: 6px;
	background: #F1E6D3;
	color: var(--sk-navy);
	font: 500 0.6875rem/1 var(--sk-font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 0.4s ease, color 0.4s ease;
}

/* Hover und Tastatur-Fokus: Karte wird Navy */
.sk-leistung:hover,
.sk-leistung:focus-within {
	background: var(--sk-navy);
	border-color: var(--sk-navy);
	box-shadow: 0 18px 40px rgba(10, 31, 68, 0.22);
	transform: translateY(-4px);
}

.sk-leistung:hover h3,
.sk-leistung:focus-within h3 {
	color: var(--sk-creme);
}

.sk-leistung:hover p,
.sk-leistung:focus-within p {
	color: rgba(248, 245, 239, 0.82);
}

.sk-leistung:hover h3::before,
.sk-leistung:focus-within h3::before {
	background-color: rgba(200, 169, 126, 0.18);
	background-image: var(--sk-icon-hover);
}

.sk-leistung:hover .sk-tags li,
.sk-leistung:focus-within .sk-tags li {
	background: rgba(200, 169, 126, 0.18);
	color: var(--sk-gold-hell);
}

/* Icons: Browser, Lupe, Werkzeug. Je einmal Navy und einmal Gold für den Hover */
.sk-leistung:nth-child(1) {
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8h18M6 6h.01M8.5 6h.01M7 12h4v4H7zM14 12h3M14 15h3'/%3E%3C/svg%3E");
	--sk-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8h18M6 6h.01M8.5 6h.01M7 12h4v4H7zM14 12h3M14 15h3'/%3E%3C/svg%3E");
}

.sk-leistung:nth-child(2) {
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E");
	--sk-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21M8 10.5h5M10.5 8v5'/%3E%3C/svg%3E");
}

.sk-leistung:nth-child(3) {
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-.5-.5-2.5 2.5-2.5z'/%3E%3C/svg%3E");
	--sk-icon-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-.5-.5-2.5 2.5-2.5z'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
	.sk-leistungen__head,
	.sk-leistungen__grid > .wp-block-group__inner-container,
	.sk-leistungen__grid:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: 1fr;
	}

	.sk-leistung:first-child {
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-leistung,
	.sk-leistung * {
		transition: none;
	}

	.sk-leistung:hover,
	.sk-leistung:focus-within {
		transform: none;
	}
}

/* Ablauf: Karten-Stapel. Jede Karte bleibt beim Scrollen stehen, die nächste schiebt sich darüber. */
.sk-ablauf {
	position: relative;
	z-index: 2; /* deckt wie das Leistungs-Blatt den stehenden Hero ab */
	margin: 0;
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) clamp(80px, 10vw, 140px);
	background: var(--sk-creme);
}

/* Kopf wie beim Leistungsbereich: kleine Zeile, Überschrift, Einleitung, gleiche Abstände */
.sk-ablauf .sk-overline {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.sk-ablauf h2 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(2.5rem, 5.4vw, 6rem); /* 40 bis 96 px, gleich wie die Leistungs-Überschrift */
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.sk-ablauf__intro {
	margin: clamp(20px, 2.4vw, 32px) 0 0;
	max-width: 52ch;
	font-size: clamp(1.0625rem, 0.7rem + 0.6vw, 1.375rem); /* wie .sk-leistungen__intro */
	line-height: 1.6;
	color: var(--sk-grau);
}

/* WordPress legt in klassischen Themes einen inneren Container in jede Gruppe */
.sk-ablauf__card > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
}

.sk-ablauf__cards {
	counter-reset: sk-schritt;
	margin-top: clamp(48px, 6vw, 80px);
}

/* Karte: kompakt, Icon oben, Kontur-Nummer im Hintergrund, Fortschrittslinie unten */
.sk-ablauf__card {
	--sk-i: 0;
	--sk-icon: none;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sk-header-h) + 24px + var(--sk-i) * 18px);
	overflow: hidden;
	box-sizing: border-box;
	padding: clamp(28px, 3.6vw, 52px) clamp(28px, 4vw, 60px) clamp(36px, 4vw, 60px);
	border-radius: 24px;
	border-top: 1px solid rgba(200, 169, 126, 0.35); /* feine Goldkante, damit man den Stapel sieht */
	background: var(--sk-navy);
	color: var(--sk-creme);
	box-shadow: 0 -12px 40px rgba(10, 31, 68, 0.22);
	counter-increment: sk-schritt;
}

/* Scrollweg zwischen den Karten. Höhere Priorität, weil WordPress in Gruppen eigene Abstände setzt
   (is-layout-flow). Ohne diesen Weg endet der Stapel, bevor die hinteren Karten oben ankommen. */
.sk-ablauf .sk-ablauf__cards .sk-ablauf__card {
	margin-block: 0 clamp(24px, 6vh, 64px);
}

/* Letzte Karte braucht Platz im Stapel-Container, damit sie auf Karte 3 haften bleibt.
   Kein margin: Bei sticky zählt der eigene Außenabstand zur Karte und schafft keinen Spielraum.
   Deshalb ein leerer Platzhalter nach der letzten Karte. Höhe = wie lange der fertige Stapel stehen bleibt */
.sk-ablauf .sk-ablauf__cards .sk-ablauf__card:last-child {
	margin-bottom: 0;
}

.sk-ablauf__cards > .wp-block-group__inner-container::after {
	content: "";
	display: block;
	height: 20vh;
}

/* verhindert, dass der Abstand der letzten Karte aus dem Container herausfällt */
.sk-ablauf__cards > .wp-block-group__inner-container {
	display: flow-root;
}

/* Große Kontur-Nummer rechts im Hintergrund */
.sk-ablauf__card::after {
	content: counter(sk-schritt, decimal-leading-zero);
	position: absolute;
	right: clamp(12px, 3vw, 48px);
	bottom: -0.18em;
	font: 300 clamp(7rem, 16vw, 15rem)/1 var(--sk-font-heading);
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(200, 169, 126, 0.45);
	pointer-events: none;
}

/* Fortschrittslinie: 25, 50, 75, 100 % */
.sk-ablauf__card::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc((var(--sk-i) + 1) * 25%);
	height: 3px;
	background: var(--sk-gold);
}

/* Icon im goldenen Kreis über dem Titel */
.sk-ablauf__card h3::before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	margin-bottom: clamp(18px, 2vw, 28px);
	border: 1px solid rgba(200, 169, 126, 0.6);
	border-radius: 50%;
	background: var(--sk-icon) no-repeat center / 28px;
}

.sk-ablauf__card h3 {
	margin: 0 0 12px;
	max-width: 62%;
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	line-height: 1.1;
	color: var(--sk-creme);
}

.sk-ablauf__card p {
	margin: 0;
	max-width: min(46ch, 62%);
	font-size: clamp(1rem, 0.6rem + 0.55vw, 1.25rem);
	line-height: 1.6;
	color: rgba(248, 245, 239, 0.85);
}

/* Icons je Schritt: Gespräch, Konzept, Umsetzung, Übergabe (Linien in Gold) */
.sk-ablauf__card:nth-child(1) {
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H9l-4 3v-3H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M19 8h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-1v3l-3-3h-4'/%3E%3C/svg%3E");
}

.sk-ablauf__card:nth-child(2) {
	--sk-i: 1;
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M9 9v11'/%3E%3C/svg%3E");
}

.sk-ablauf__card:nth-child(3) {
	--sk-i: 2;
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4M16 8l4 4-4 4M14 5l-4 14'/%3E%3C/svg%3E");
}

.sk-ablauf__card:nth-child(4) {
	--sk-i: 3;
	--sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A97E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4c3.5 0 6 2.5 6 6l-7.5 7.5-6-6L14 4z'/%3E%3Cpath d='M6.5 11.5L4 14l2 2M12.5 17.5L10 20l-2-2M5 19c-.5-1.5 0-3 1-4M15 9h.01'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.sk-ablauf__card {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sk-header-h) + 12px + var(--sk-i) * 10px);
	}

	.sk-ablauf__card h3,
	.sk-ablauf__card p {
		max-width: none;
	}

	.sk-ablauf__card::after {
		font-size: 6.5rem;
		-webkit-text-stroke-color: rgba(200, 169, 126, 0.3);
	}

	.sk-ablauf__card h3::before {
		width: 48px;
		height: 48px;
		background-size: 22px;
	}
}


/* ── Licht aus wie bei mercury.com: body.sk-dunkel (gesetzt von vergleich.js, sobald ein Abschnitt mit
      .sk-theme-dark die Bildschirmmitte erreicht) blendet die ganze sichtbare Seite auf Navy ── */
body,
.sk-leistungen,
.sk-ablauf,
.sk-vergleich,
.sk-ueber,
.sk-vergleich .sk-overline,
.sk-vergleich h2,
.sk-vergleich h2 em,
.sk-vergleich .sk-ba__hint,
.sk-header.is-solid {
	transition: background-color 0.6s cubic-bezier(0, 0, 0.6, 1), color 0.6s cubic-bezier(0, 0, 0.6, 1);
}

body.sk-dunkel,
body.sk-dunkel .sk-leistungen,
body.sk-dunkel .sk-ablauf,
body.sk-dunkel .sk-vergleich,
body.sk-dunkel .sk-ueber {
	background-color: var(--sk-navy);
}

body.sk-dunkel .sk-header.is-solid {
	background: var(--sk-navy);
	color: var(--sk-creme);
	box-shadow: 0 1px 0 rgba(248, 245, 239, 0.08);
}

/* ── Vorher/Nachher: hell, bis das Licht ausgeht, dann Navy mit heller Schrift ── */
.sk-vergleich {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) clamp(80px, 10vw, 140px);
	background: var(--sk-creme);
	color: var(--sk-navy);
}

.entry-content > .sk-vergleich {
	margin-block: 0;
}

/* Slider gleitet ins Licht, sobald es dunkel wird */
.sk-vergleich .sk-ba {
	opacity: 0.5;
	transform: translateY(48px) scale(0.96);
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.sk-dunkel .sk-vergleich .sk-ba {
	opacity: 1;
	transform: none;
}

/* Kopf wie überall */
.entry-content .sk-vergleich .sk-overline {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.entry-content .sk-vergleich h2 {
	margin: 0 0 clamp(36px, 4.5vw, 64px);
	font-weight: 300;
	font-size: clamp(2.5rem, 5.4vw, 6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--sk-navy);
}

.sk-vergleich h2 em {
	font-style: italic;
	color: var(--sk-navy-mittel);
}

body.sk-dunkel .sk-vergleich .sk-overline { color: rgba(248, 245, 239, 0.7); }
body.sk-dunkel .sk-vergleich h2 { color: var(--sk-creme); }
body.sk-dunkel .sk-vergleich h2 em { color: var(--sk-gold-hell); }
body.sk-dunkel .sk-vergleich .sk-ba__hint { color: rgba(248, 245, 239, 0.65); }

/* Slider, wie im Snippet. Farben: Weiß für Linie und Griff, Gold statt Orange für die Pfeile */
.sk-ba {
	--sk-ba-line: #fff;
	--sk-ba-handle: 52px;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
	user-select: none;
	touch-action: none;
	background: var(--sk-navy-hell);
}

.sk-ba picture,
.sk-ba img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.sk-ba img {
	object-fit: cover;
	pointer-events: none;
}

.sk-ba__after {
	clip-path: inset(0 0 0 50%);
}

.sk-ba__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	background: var(--sk-ba-line);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.sk-ba__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sk-ba-handle);
	height: var(--sk-ba-handle);
	margin: calc(var(--sk-ba-handle) / -2) 0 0 calc(var(--sk-ba-handle) / -2);
	border-radius: 50%;
	background: var(--sk-ba-line);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	color: #9a7a4e; /* Gold, dunkel genug auf Weiß */
	pointer-events: none;
}

.sk-ba__handle svg {
	width: 26px;
	height: 26px;
}

.sk-ba__label {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(10, 31, 68, 0.6);
	color: #fff;
	font: 600 0.78rem/1.2 var(--sk-font-body);
	letter-spacing: 0.04em;
	pointer-events: none;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.sk-ba__label--before { left: 16px; }
.sk-ba__label--after { right: 16px; }

.sk-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

/* Tastatur-Fokus sichtbar machen, obwohl das Range-Feld unsichtbar ist */
.sk-ba:has(.sk-ba__range:focus-visible) {
	outline: 2px solid var(--sk-gold);
	outline-offset: 4px;
}

.entry-content .sk-vergleich .sk-ba__hint {
	margin: 18px 0 0;
	font-size: 0.875rem;
	color: var(--sk-grau);
	text-align: center;
}

/* Reduced Motion: Farbe schaltet ohne Überblendung um, Slider ohne Hereingleiten */
@media (prefers-reduced-motion: reduce) {
	body,
	.sk-leistungen,
	.sk-ablauf,
	.sk-vergleich,
	.sk-vergleich *,
	.sk-ueber,
	.sk-header.is-solid {
		transition: none !important;
	}

	.sk-vergleich .sk-ba {
		opacity: 1;
		transform: none;
	}
}

/* ── Kundenstimmen: hell bis body.sk-dunkel gesetzt wird (Taschenlampe), gleiche Überblendung
      wie beim Vergleichsabschnitt. In der üblichen Scroll-Reihenfolge längst dunkel, sobald der
      Abschnitt in Sicht kommt, weil schon der Vergleich davor umschaltet ── */
.sk-stimmen {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) clamp(80px, 10vw, 140px);
	background: var(--sk-creme);
	color: var(--sk-navy);
	transition: background-color 0.6s cubic-bezier(0, 0, 0.6, 1), color 0.6s cubic-bezier(0, 0, 0.6, 1);
}

.entry-content > .sk-stimmen {
	margin-block: 0;
}

body.sk-dunkel .sk-stimmen {
	background-color: var(--sk-navy);
}

/* Kopf wie überall: kleine Zeile, Überschrift, Einleitung, alle bündig links untereinander */
.sk-stimmen__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2.4vw, 32px);
	margin: 0 0 clamp(40px, 5vw, 72px);
}

.entry-content .sk-stimmen__head .sk-overline,
.entry-content .sk-stimmen__head h2,
.entry-content .sk-stimmen__head .sk-stimmen__intro {
	margin: 0;
}

.sk-stimmen__head .sk-overline,
.entry-content .sk-stimmen__head h2,
.sk-stimmen__head h2 em,
.sk-stimmen__intro {
	transition: color 0.6s cubic-bezier(0, 0, 0.6, 1);
}

.entry-content .sk-stimmen__head h2 {
	font-weight: 300;
	font-size: clamp(2.75rem, 6vw, 6.5rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--sk-navy);
}

.sk-stimmen__head h2 em {
	font-style: italic;
	color: var(--sk-navy-mittel);
}

.sk-stimmen__intro {
	max-width: 52ch;
	font-size: clamp(1.0625rem, 0.7rem + 0.6vw, 1.375rem);
	line-height: 1.6;
	color: var(--sk-grau);
}

body.sk-dunkel .sk-stimmen__head .sk-overline { color: rgba(248, 245, 239, 0.7); }
body.sk-dunkel .sk-stimmen__head h2 { color: var(--sk-creme); }
body.sk-dunkel .sk-stimmen__head h2 em { color: var(--sk-gold-hell); }
body.sk-dunkel .sk-stimmen__intro { color: rgba(248, 245, 239, 0.75); }

/* Slider: horizontaler Scroll mit Snap, bleedet bis an den Viewport-Rand, damit die nächste
   Karte rechts hereinschaut. Nativer Scroll macht ihn am Handy automatisch wischbar. */
.sk-stimmen__slider {
	margin-inline: calc(-1 * max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)));
	padding: 4px max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2));
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Einrasten erst, wenn kundenstimmen.js den Abschnitt in der Nähe sieht (sonst NO_LCP auf der Startseite) */
.sk-stimmen__slider.sk-einrasten {
	scroll-snap-type: x mandatory;
}

.sk-stimmen__slider::-webkit-scrollbar {
	display: none;
}

.sk-stimmen__slider:focus-visible {
	outline: 2px solid var(--sk-gold);
	outline-offset: 6px;
}

.sk-stimmen__track {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Helle Karte mit Initialen im Goldring statt Foto (Variante B, entschieden 25.09.2026) */
.sk-stimmen__karte {
	flex: 0 0 clamp(320px, 64vw, 620px);
	padding: clamp(32px, 4vw, 48px);
	border: 1px solid rgba(10, 31, 68, 0.08);
	border-radius: 24px;
	scroll-snap-align: start;
	background: #FDFBF7;
	box-shadow: 0 18px 40px rgba(10, 31, 68, 0.1);
}

.sk-stimmen__kopf {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(28px, 3.4vw, 40px);
}

/* Initialen im Goldring, bis echte Kundenfotos vorliegen: gleicher Kreis, gleiche Stelle */
.sk-stimmen__avatar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1.5px solid var(--sk-gold);
	border-radius: 50%;
	font: 400 1.25rem/1 var(--sk-font-heading);
	color: var(--sk-navy);
}

.sk-stimmen__person {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.sk-stimmen__name {
	font: 500 0.9375rem/1.2 var(--sk-font-body);
	color: var(--sk-navy);
}

.sk-stimmen__quelle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 0.6875rem/1 var(--sk-font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sk-grau);
}

.sk-stimmen__quelle svg {
	width: 14px;
	height: 14px;
}

.sk-stimmen__sterne {
	flex: 0 0 auto;
	color: var(--sk-gold);
	font-size: 1.125rem;
	letter-spacing: 0.1em;
}

.sk-stimmen__zitat {
	margin: 0;
}

.sk-stimmen__zitat p {
	margin: 0;
	color: var(--sk-navy);
	font: 400 clamp(1.1875rem, 0.95rem + 0.7vw, 1.4375rem)/1.7 var(--sk-font-heading);
}

/* Leiste unter dem Slider: Pfeile links und rechts, Fortschrittsbalken als Timer dazwischen */
.sk-stimmen__leiste {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
	margin-top: clamp(24px, 3vw, 36px);
}

.sk-stimmen__pfeil {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(10, 31, 68, 0.15);
	border-radius: 50%;
	background: transparent;
	color: var(--sk-navy);
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
}

.sk-stimmen__pfeil svg {
	width: 20px;
	height: 20px;
}

.sk-stimmen__pfeil:hover,
.sk-stimmen__pfeil:focus-visible {
	background: var(--sk-navy);
	border-color: var(--sk-navy);
	color: var(--sk-creme);
}

.sk-stimmen__pfeil:active {
	transform: scale(0.94);
}

body.sk-dunkel .sk-stimmen__pfeil {
	border-color: rgba(248, 245, 239, 0.3);
	color: var(--sk-creme);
}

body.sk-dunkel .sk-stimmen__pfeil:hover,
body.sk-dunkel .sk-stimmen__pfeil:focus-visible {
	background: var(--sk-gold);
	border-color: var(--sk-gold);
	color: var(--sk-navy);
}

.sk-stimmen__balken {
	display: flex;
	flex: 1;
	gap: 8px;
}

.sk-stimmen__balken-btn {
	flex: 1;
	padding: 10px 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.sk-stimmen__spur {
	position: relative;
	display: block;
	height: 3px;
	border-radius: 999px;
	background: rgba(10, 31, 68, 0.14);
	overflow: hidden;
}

body.sk-dunkel .sk-stimmen__spur {
	background: rgba(248, 245, 239, 0.18);
}

.sk-stimmen__fuellung {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: var(--sk-gold);
	transform: scaleX(0);
	transform-origin: left;
}

.sk-stimmen__balken-btn.is-past .sk-stimmen__fuellung {
	transform: scaleX(1);
	background: rgba(200, 169, 126, 0.55);
}

.sk-stimmen__balken-btn[aria-current="true"] .sk-stimmen__fuellung {
	animation: sk-stimmen-timer var(--sk-stimmen-dauer, 7s) linear forwards;
}

/* Pausiert bei Hover und Fokus, egal wo im Slider oder in der Leiste */
.sk-stimmen__block:hover .sk-stimmen__fuellung,
.sk-stimmen__block:focus-within .sk-stimmen__fuellung {
	animation-play-state: paused;
}

@keyframes sk-stimmen-timer {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (max-width: 767px) {
	.sk-stimmen__karte {
		flex-basis: 84vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-stimmen,
	.sk-stimmen__head .sk-overline,
	.sk-stimmen__head h2,
	.sk-stimmen__head h2 em,
	.sk-stimmen__intro,
	.sk-stimmen__pfeil {
		transition: none !important;
	}

	.sk-stimmen__slider {
		scroll-behavior: auto;
	}

	.sk-stimmen__fuellung {
		animation: none !important;
		transform: scaleX(0);
	}

	.sk-stimmen__balken-btn[aria-current="true"] .sk-stimmen__fuellung {
		transform: scaleX(1);
	}
}

/* ── Über mich: Fotocollage rechts (Variante A, entschieden 25.09.2026) ── */
.sk-ueber {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) clamp(80px, 10vw, 140px);
	background: var(--sk-creme);
	color: var(--sk-navy);
}

.entry-content > .sk-ueber {
	margin-block: 0;
}

.sk-ueber__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, 2.4vw, 32px);
	margin: 0 0 clamp(40px, 5vw, 72px);
}

.entry-content .sk-ueber__head .sk-overline,
.entry-content .sk-ueber__head h2 {
	margin: 0;
}

.entry-content .sk-ueber__head h2 {
	font-weight: 300;
	font-size: clamp(2.75rem, 6vw, 6.5rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--sk-navy);
}

.sk-ueber__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.entry-content .sk-ueber__text p {
	max-width: 58ch;
	margin: 0 0 1.1em;
	font-size: clamp(1rem, 0.85rem + 0.3vw, 1.125rem);
	line-height: 1.7;
	color: var(--sk-grau);
}

.entry-content .sk-ueber__text p:last-of-type {
	margin-bottom: clamp(32px, 4vw, 48px);
}

/* Werte: vier Punkte, schlicht mit dünner Goldlinie wie die Overline */
.sk-ueber__werte {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sk-ueber__wert {
	position: relative;
	padding-left: 24px;
}

.sk-ueber__wert::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 14px;
	height: 1px;
	background: var(--sk-gold);
}

.sk-ueber__wert h3 {
	margin: 0 0 4px;
	font: 500 0.9375rem/1.3 var(--sk-font-body);
	color: var(--sk-navy);
}

.sk-ueber__wert p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--sk-grau);
}

/* Fotocollage: großes Foto hinten links, kleines mit Rand vorne rechts unten versetzt.
   Fährt hoch und skaliert sich ein, sobald body.sk-dunkel beim Erreichen von Über mich wieder
   auf hell wechselt, spiegelbildlich zu .sk-vergleich .sk-ba */
.sk-ueber__fotos {
	position: relative;
	min-height: clamp(360px, 34vw, 480px);
	opacity: 0.5;
	transform: translateY(48px) scale(0.96);
	transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body:not(.sk-dunkel) .sk-ueber__fotos {
	opacity: 1;
	transform: none;
}

.sk-ueber__foto {
	position: absolute;
	overflow: hidden;
	border-radius: 20px;
	background: var(--sk-navy-hell);
}

.sk-ueber__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sk-ueber__foto--gross {
	top: 0;
	left: 0;
	width: 68%;
	aspect-ratio: 2 / 3;
	box-shadow: 0 24px 50px rgba(10, 31, 68, 0.18);
}

.sk-ueber__foto--klein {
	right: 0;
	bottom: 0;
	width: 50%;
	aspect-ratio: 2 / 3;
	border: 6px solid var(--sk-creme);
	box-shadow: 0 20px 40px rgba(10, 31, 68, 0.22);
}

@media (max-width: 900px) {
	.sk-ueber__grid {
		grid-template-columns: 1fr;
	}

	.sk-ueber__fotos {
		order: -1;
		min-height: clamp(320px, 78vw, 420px);
		max-width: 420px;
	}

	.sk-ueber__werte {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-ueber__fotos {
		transition: none !important;
		opacity: 1;
		transform: none;
	}
}

/* ── FAQ: links Kopf mit Button (bleibt stehen), rechts alle Fragen offen als H3 ── */
.sk-faq {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
	gap: clamp(40px, 6vw, 120px);
	align-items: start;
	margin: 0;
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2)) clamp(80px, 10vw, 140px);
	background: var(--sk-creme);
	color: var(--sk-navy);
}

.entry-content > .sk-faq {
	margin-block: 0;
}

.sk-faq__head {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--sk-header-h) + 32px);
}

.entry-content .sk-faq__head .sk-overline {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.entry-content .sk-faq__head h2 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(2.5rem, 5.4vw, 6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.sk-faq__head h2 em {
	font-style: italic;
	color: var(--sk-navy-mittel);
}

.sk-faq__eintrag {
	padding: clamp(24px, 2.6vw, 36px) 0;
	border-top: 1px solid rgba(10, 31, 68, 0.14);
}

.sk-faq__eintrag:last-child {
	border-bottom: 1px solid rgba(10, 31, 68, 0.14);
}

.entry-content .sk-faq__eintrag h3 {
	margin: 0 0 12px;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.2vw, 2.125rem);
	line-height: 1.2;
	color: var(--sk-navy);
}

.entry-content .sk-faq__eintrag p {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(1rem, 0.7rem + 0.4vw, 1.1875rem);
	line-height: 1.65;
	color: var(--sk-grau);
}

@media (max-width: 900px) {
	.sk-faq {
		grid-template-columns: 1fr;
	}

	.sk-faq__head {
		position: static;
	}
}

/* ── CTA: letzter Abschnitt, Navy-Hintergrund, heller Text, ein Button ── */
.sk-cta {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.4vw, 28px);
	margin: 0;
	padding: clamp(80px, 11vw, 160px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2));
	background: var(--sk-navy);
	color: var(--sk-creme);
	text-align: center;
}

.entry-content > .sk-cta {
	margin-block: 0;
}

.entry-content .sk-cta h2 {
	margin: 0;
	max-width: 20ch;
	font-weight: 300;
	font-size: clamp(2.5rem, 5.4vw, 6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--sk-creme);
}

.entry-content .sk-cta p {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1.0625rem, 0.7rem + 0.6vw, 1.375rem);
	line-height: 1.6;
	color: rgba(248, 245, 239, 0.78);
}

.sk-cta .sk-hero__cta {
	margin-top: clamp(4px, 1vw, 12px);
}

/* ── Kontaktseite: Navy wie Kundenstimmen, Foto und Text links, WPForms-Formular als helle Karte rechts ── */
/* Falls zwischen Vertrauens-Abschnitt und Footer noch Platz übrig bleibt (Cache, Seitenvorlage):
   Hintergrund der ganzen Kontaktseite auf Creme, dann fällt eine Lücke nicht mehr als Weiß auf.
   Eigene Klasse statt body.page-kontakt, die WordPress nie vergeben hat (kein page-{slug} ohne
   eigenen Filter, siehe sichtkraft_kontakt_body_class() in shortcodes.php) */
body.sk-kontaktseite {
	background: var(--sk-creme);
}

.sk-kontakt {
	position: relative;
	margin: 0;
	padding: clamp(64px, 9vw, 120px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2));
	background: var(--sk-navy);
	color: var(--sk-creme);
}

/* WordPress setzt zwischen Blöcken 32 px (is-layout-flow), höhere Priorität nötig, siehe .sk-cta */
.entry-content > .sk-kontakt {
	margin-block: 0;
}

.sk-kontakt__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.sk-kontakt__foto {
	display: block;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 4 / 3;
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	overflow: hidden;
	border: 1px solid rgba(200, 169, 126, 0.4);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.sk-kontakt__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.entry-content .sk-kontakt__info .sk-overline {
	margin: 0 0 clamp(16px, 2vw, 24px);
	color: rgba(248, 245, 239, 0.65);
}

.entry-content .sk-kontakt__info h1 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: var(--sk-creme);
}

.sk-kontakt__info h1 em {
	font-style: italic;
	color: var(--sk-gold-hell);
}

.entry-content .sk-kontakt__info p:not(.sk-overline) {
	margin: clamp(16px, 2vw, 24px) 0 0;
	max-width: 38ch;
	font-size: 0.95rem;
	line-height: 1.65;
	color: rgba(248, 245, 239, 0.78);
}

.sk-kontakt__form {
	background: var(--sk-creme);
	border-radius: 18px;
	padding: clamp(28px, 3vw, 40px);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

/* WPForms an das Sichtkraft-Designsystem anpassen: WPForms setzt seine Farben über eigene
   CSS-Variablen (--wpforms-…), die stärker wiegen als einfache Klassen-Regeln. Deshalb hier
   die Variablen selbst überschreiben statt einzelne Elemente anzusteuern */
.sk-kontakt__form {
	--wpforms-field-border-radius: 8px;
	--wpforms-field-border-color: rgba(10, 31, 68, 0.16);
	--wpforms-field-background-color: #fff;
	--wpforms-field-text-color: var(--sk-navy);
	--wpforms-label-color: var(--sk-navy);
	--wpforms-button-border-radius: 4px;
	--wpforms-button-background-color: var(--sk-gold);
	--wpforms-button-border-color: var(--sk-gold);
	--wpforms-button-text-color: var(--sk-navy);
}

.sk-kontakt__form .wpforms-field-label {
	font: 500 0.8rem/1.3 var(--sk-font-body);
}

.sk-kontakt__form input[type="text"],
.sk-kontakt__form input[type="email"],
.sk-kontakt__form select,
.sk-kontakt__form textarea {
	font: 400 0.9rem/1.4 var(--sk-font-body);
}

.sk-kontakt__form input:focus,
.sk-kontakt__form select:focus,
.sk-kontakt__form textarea:focus {
	outline: 2px solid var(--sk-gold);
	outline-offset: 1px;
	border-color: var(--sk-gold);
}

.sk-kontakt__form button.wpforms-submit {
	font: 500 0.85rem/1 var(--sk-font-body);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sk-kontakt__form button.wpforms-submit:hover {
	background-color: var(--sk-gold-hell) !important;
	border-color: var(--sk-gold-hell) !important;
}

@media (max-width: 900px) {
	.sk-kontakt__grid {
		grid-template-columns: 1fr;
	}

	.sk-kontakt__foto {
		max-width: 100%;
	}
}

/* Vertrauens-Abschnitt Kontaktseite: helle Karten mit Goldkante oben, Idee B aus dem Chat */
.sk-vertrauen {
	position: relative;
	margin: 0;
	padding: clamp(64px, 9vw, 120px) max(var(--sk-rand), calc((100% - var(--sk-inhalt)) / 2));
	background: var(--sk-creme);
}

.entry-content > .sk-vertrauen {
	margin-block: 0;
}

.sk-vertrauen__kopf {
	margin: 0 0 clamp(32px, 4vw, 56px);
}

.entry-content .sk-vertrauen__kopf .sk-overline {
	margin: 0 0 clamp(16px, 2vw, 24px);
}

.entry-content .sk-vertrauen__kopf h2 {
	margin: 0;
	font-weight: 300;
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
}

.sk-vertrauen__kopf h2 em {
	font-style: italic;
	color: var(--sk-navy-mittel);
}

.sk-vertrauen__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 28px);
}

.sk-vertrauen-karte {
	background: #fff;
	border-radius: 14px;
	padding: clamp(24px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px);
	box-shadow: 0 10px 30px rgba(10, 31, 68, 0.06);
	border-top: 3px solid var(--sk-gold);
}

.sk-vertrauen-karte__zahl {
	display: block;
	margin: 0 0 10px;
	font: 500 1.5rem/1.15 var(--sk-font-heading);
	color: var(--sk-navy);
}

.sk-vertrauen-karte p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--sk-grau);
}

@media (max-width: 900px) {
	.sk-vertrauen__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}