/* Die-Schweiss-Profis 2026 · Child-Theme-CSS
   YOOtheme lädt diese Datei nach dem Theme-CSS. Klassen setzt ihr im Builder unter Element → Advanced → CSS Class. */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--sp-rot: #e30921;
	--sp-rot-dunkel: #c40819;
	--sp-ink: #16171a;
	--sp-ink-soft: #5b5f66;
	--sp-line: #e8e9ec;
	--sp-bg-soft: #f6f6f7;
	--sp-night: #0b0b0d;
	--sp-nav-h: 64px;
	--sp-nav-top: 34px;
	--sp-radius-sheet: 44px;
	--sp-radius-card: 28px;
	--sp-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--sp-halt: 55vh;
	--sp-lauf: 165vh;
}

/* Grundtypografie */

body {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3, .uk-heading-small, .uk-heading-medium, .uk-heading-large {
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.04;
	text-wrap: balance;
}

.sp-display { font-size: clamp(1.75rem, 3.2vw, 2.85rem); }
.sp-display--xl { font-size: clamp(2rem, 3.8vw, 3.4rem); }

.sp-lead {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	color: var(--sp-ink-soft);
	max-width: 58ch;
}
.uk-light .sp-lead { color: #b9bcc2; }

/* Lead-Textstil von YOOtheme auf den Prototyp gebracht (dort .sd-copy--lg) */
.uk-text-lead {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--sp-ink);
}
.uk-light .uk-text-lead { color: #b9bcc2; }
.uk-text-lead p { margin: 0; }
.uk-text-lead p + p { margin-top: 1.15rem; }

.sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sp-rot);
}
.sp-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }

/* Buttons als Pille */

.uk-button {
	height: 52px;
	padding: 0 1.75rem;
	border-radius: 999px;
	line-height: 52px;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	transition: none;
}
.uk-button-small { height: 40px; line-height: 40px; padding: 0 1.25rem; }
.uk-button-large { height: 60px; line-height: 60px; padding: 0 2.25rem; }

/* Beim Überfahren wechselt nicht der Hintergrund, sondern die Füllfläche von sp-swap fährt hoch (custom.js gibt jedem Button sp-swap).
   Grund, Schrift, Kontur und Füllung stehen je Stil als Variablen, wie .btn--accent, .btn und .btn--ghost im Prototyp */
.uk-button-primary { --sp-btn-bg: var(--sp-rot); --sp-btn-ink: #fff; --sp-btn-line: transparent; --sp-fill: var(--sp-ink); --sp-fill-ink: #fff; }
.uk-button-secondary { --sp-btn-bg: var(--sp-ink); --sp-btn-ink: #fff; --sp-btn-line: transparent; --sp-fill: var(--sp-rot); --sp-fill-ink: #fff; }
.uk-button-default { --sp-btn-bg: transparent; --sp-btn-ink: var(--sp-ink); --sp-btn-line: rgba(0, 0, 0, .22); --sp-fill: var(--sp-ink); --sp-fill-ink: #fff; }
:is(.uk-light, .uk-section-primary, .uk-section-secondary, .uk-tile-primary, .uk-tile-secondary, .uk-card-primary, .uk-card-secondary, .uk-overlay-primary) .uk-button-default { --sp-btn-ink: #fff; --sp-btn-line: rgba(255, 255, 255, .28); --sp-fill: #fff; --sp-fill-ink: var(--sp-ink); }

/* Doppelte Klasse und der Kontext: YOOtheme färbt Buttons auf dunklen Flächen über .uk-section-secondary:not(.uk-preserve-color) (vier Klassen) */
.uk-button.uk-button-primary, .uk-button.uk-button-secondary, .uk-button.uk-button-default,
.uk-button.uk-button-primary:is(:hover, :focus, :active), .uk-button.uk-button-secondary:is(:hover, :focus, :active), .uk-button.uk-button-default:is(:hover, :focus, :active),
:is(.uk-light, .uk-section-primary, .uk-section-secondary, .uk-tile-primary, .uk-tile-secondary, .uk-card-primary, .uk-card-secondary, .uk-overlay-primary) :is(.uk-button.uk-button-primary, .uk-button.uk-button-secondary, .uk-button.uk-button-default),
:is(.uk-light, .uk-section-primary, .uk-section-secondary, .uk-tile-primary, .uk-tile-secondary, .uk-card-primary, .uk-card-secondary, .uk-overlay-primary) :is(.uk-button.uk-button-primary, .uk-button.uk-button-secondary, .uk-button.uk-button-default):is(:hover, :focus, :active) {
	border: 0;
	background-color: var(--sp-btn-bg);
	color: var(--sp-btn-ink);
	box-shadow: inset 0 0 0 1px var(--sp-btn-line);
}

/* Kopfleiste: schwebende dunkle Kapsel wie im Prototyp */

.tm-header, .tm-header-mobile {
	position: fixed;
	top: var(--sp-nav-top);
	left: 50%;
	z-index: 300;
	width: min(calc(100% - 32px), 1120px);
	transform: translateX(-50%);
}
.tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container {
	height: var(--sp-nav-h);
	padding-inline: 1.9rem;
	border-radius: 999px;
	background: rgba(28, 29, 32, .6);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 40px rgba(0, 0, 0, .22);
	color: #fff;
}
.tm-header .uk-container, .tm-header-mobile .uk-container { padding-inline: 0; max-width: none; }
.tm-header .uk-navbar, .tm-header-mobile .uk-navbar { min-height: var(--sp-nav-h); }
.tm-header .uk-navbar-nav > li > a {
	min-height: var(--sp-nav-h);
	padding-inline: .9rem;
	font-family: inherit;
	font-size: .98rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
	border-bottom: 2px solid transparent;
}
.tm-header .uk-navbar-nav > li.uk-active > a { color: #fff; }
.tm-header .uk-navbar-nav > li:not(.sp-cta):hover > a,
.tm-header .uk-navbar-nav > li:not(.sp-cta) > a:focus-visible,
.tm-header .uk-navbar-nav > li:not(.sp-cta) > a[aria-expanded="true"] { color: var(--sp-rot); }
/* Kein Strich unter dem aktiven Eintrag: YOOtheme zeichnet ihn über ::before, der CTA braucht ::before für die Füllung */
.tm-header .uk-navbar-nav > li:not(.sp-cta) > a::before { display: none; }
.tm-header .uk-logo img, .tm-header-mobile .uk-logo img { height: 42px; width: auto; }
.tm-header .uk-navbar-dropdown { border-radius: 18px; padding: 18px; background: #16171a; color: #fff; box-shadow: 0 20px 48px rgba(0, 0, 0, .32); }
.tm-header .uk-navbar-dropdown-nav > li > a { color: #cfd2d6; padding: .45rem 0; font-size: .95rem; }
.tm-header .uk-navbar-dropdown-nav > li > a:hover { color: #fff; }

/* Menüeintrag mit Klasse sp-cta wird zum weißen Button rechts */
.tm-header .uk-navbar-nav > li.sp-cta { margin-left: .75rem; }
.tm-header .uk-navbar-nav > li.sp-cta > a {
	height: 36px;
	min-height: 0;
	margin-block: calc((var(--sp-nav-h) - 36px) / 2);
	padding-inline: 1.1rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--sp-ink);
	font-size: .9rem;
	font-weight: 600;
}
.tm-header .uk-navbar-nav > li.sp-cta > a:hover { color: var(--sp-ink); }

/* Beschriftungswechsel wie im Prototyp: die Füllfläche fährt von unten hoch, gleichzeitig wandert die Beschriftung nach oben aus und die zweite Fassung rückt von unten nach.
   Klasse sp-swap auf einen Link oder Button, custom.js baut die zweite Beschriftung ein. Der Menüeintrag sp-cta bekommt sie von selbst. */
/* Füllfarben nur als Vorgabe ohne Spezifität, damit die Werte der Button-Stile gelten */
:where(.sp-swap) {
	--sp-fill: var(--sp-rot);
	--sp-fill-ink: #fff;
}
/* YOOtheme-Buttons ohne Icon kommen ohne Flex, dann säße die Beschriftungsbox oben */
.uk-button.sp-swap { display: inline-flex; align-items: center; justify-content: center; }
.uk-button.sp-swap.uk-width-1-1 { display: flex; }
.sp-swap {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.sp-swap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sp-fill);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.sp-swap:hover::before, .sp-swap:focus-visible::before { transform: scaleY(1); }
/* YOOtheme setzt auf Navi-Links ein eigenes ::before für den Strich unter dem aktiven Eintrag. Das hier ist spezifischer und ersetzt es im CTA */
.tm-header .uk-navbar-nav > li.sp-cta > a.sp-swap::before {
	inset: 0;
	width: auto;
	height: auto;
	background: var(--sp-fill);
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.sp-swap__box { display: grid; overflow: hidden; line-height: 1.45; }
.sp-swap__row {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	white-space: nowrap;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1) .07s;
}
.sp-swap__row + .sp-swap__row { transform: translateY(120%); color: var(--sp-fill-ink); }
.sp-swap:hover .sp-swap__row:first-child, .sp-swap:focus-visible .sp-swap__row:first-child { transform: translateY(-120%); }
.sp-swap:hover .sp-swap__row + .sp-swap__row, .sp-swap:focus-visible .sp-swap__row + .sp-swap__row { transform: translateY(0); }

/* Damit der Seiteninhalt nicht unter der schwebenden Leiste beginnt: Klasse sp-top auf der ersten Section, wenn sie hell ist */
.sp-top { padding-top: calc(var(--sp-nav-top) + var(--sp-nav-h) + 3rem) !important; }

/* Kopf einer Leistungsseite: Section mit sp-hero, Grid halbe/halbe, links Text, rechts Bild oder Slideshow */

.sp-hero {
	min-height: 100svh;
	background: var(--sp-night);
	color: #fff;
	overflow: hidden;
}
.sp-hero .uk-container { max-width: none; padding: 0; }
/* Der Textblock bleibt in seiner halben Spalte und steht darin mittig, höchstens 36rem breit */
.sp-hero .sp-hero__copy > .uk-panel, .sp-hero .sp-hero__copy > .uk-margin, .sp-hero .sp-hero__copy > h1 {
	width: min(100%, 36rem);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 2.5vw, 2rem);
}
.sp-hero .sp-hero__copy { padding-block: clamp(7rem, 12vw, 9rem) clamp(7rem, 10vw, 9rem); }
.sp-hero h1 { font-size: clamp(1.85rem, 2.9vw, 3rem); color: #fff; }
.sp-hero__media, .sp-hero__media .uk-slideshow, .sp-hero__media .uk-slideshow-items, .sp-hero__media .el-image {
	height: 100%;
	min-height: 100svh;
}
.sp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.sp-hero__media { position: relative; }
.sp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(205deg, rgba(227, 9, 33, .22), transparent 48%),
		linear-gradient(90deg, rgba(11, 11, 13, .35), transparent 30%),
		linear-gradient(0deg, rgba(11, 11, 13, .62), transparent 20%);
}

/* Kopf mit wechselnden Motiven hinter mittigem Text wie auf Über uns im Prototyp: Section mit sp-hero-strecke, in der Spalte die Slideshow mit sp-strecke */
.sp-hero-strecke { position: relative; overflow: hidden; }
.sp-hero-strecke .uk-container:not(.uk-position-cover), .sp-hero-strecke .uk-grid, .sp-hero-strecke .uk-grid > * { position: static; }
.sp-hero-strecke .sp-strecke { position: absolute; inset: 0; z-index: 0; margin: 0 !important; }
.sp-hero-strecke .sp-strecke > .uk-position-relative,
.sp-hero-strecke .sp-strecke .uk-slideshow-items { height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; }
/* Der Verlauf liegt je Folie zwischen Bild und Text, der Text kommt aus den Feldern der Folie */
.sp-hero-strecke .sp-strecke .el-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(11, 11, 13, .78) 0%, rgba(11, 11, 13, .55) 52%, rgba(11, 11, 13, .35) 100%),
		linear-gradient(180deg, rgba(11, 11, 13, .6) 0%, rgba(11, 11, 13, .15) 40%, rgba(11, 11, 13, .75) 100%);
}
.sp-hero-strecke .sp-strecke .el-item > .uk-position-cover { z-index: 2; }
.sp-hero-strecke .sp-strecke .el-overlay { max-width: 920px; margin-inline: auto; text-align: center; }
.sp-hero-strecke .sp-strecke .el-content { color: #b9bcc2; }
.sp-hero-strecke .sp-strecke .uk-position-bottom-center { z-index: 4; }
.sp-hero-strecke .uk-grid > * > :not(.sp-strecke) { position: relative; z-index: 2; }

/* Punkte einer Slideshow wie im Prototyp: hochkant unten rechts, nur Kontur, der aktive rot. Klasse sp-slidepunkte auf die Slideshow, Navigation Dotnav.
   Die Punkte brauchen .uk-slideshow im Selektor: YOOtheme füllt sie auf dunklen Sections über .uk-section-secondary:not(.uk-preserve-color), das sind drei bzw. vier Klassen */
.sp-slidepunkte div:has(> .uk-dotnav) {
	top: auto;
	left: auto;
	right: clamp(1.5rem, 3vw, 2.5rem);
	bottom: clamp(1.5rem, 3vw, 2rem);
	z-index: 4;
	margin: 0;
	transform: none;
	--uk-position-translate-x: 0;
}
.sp-slidepunkte .uk-dotnav { flex-direction: column; align-items: center; gap: .65rem; margin: 0; }
.sp-slidepunkte .uk-dotnav > * { padding: 0; margin: 0; }
.sp-slidepunkte.uk-slideshow .uk-dotnav > * > * {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .65);
	border-radius: 50%;
	background: none;
	box-shadow: none;
	transition: border-color .25s ease;
}
.sp-slidepunkte.uk-slideshow .uk-dotnav > * > :hover { border-color: #fff; background: none; }
.sp-slidepunkte.uk-slideshow .uk-dotnav > .uk-active > * { border-color: var(--sp-rot); background: none; }

/* Kartenband wie „Inspirationen.“ im Prototyp. Section mit sp-kartenwrap, darin Headline und Panel Slider mit sp-kartenband.
   Karte so breit wie der Inhalt des Prototyps (1200 minus Gutter), die nächste schaut rechts herein und läuft bis an den Bildschirmrand */
.sp-kartenwrap.uk-section { padding-block: clamp(4rem, 8vw, 7rem); }
.sp-kartenwrap.uk-section-secondary { background: var(--sp-night); }
.sp-kartenwrap h1, .sp-kartenwrap h2 {
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.75rem, 3.2vw, 2.85rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-align: center;
	color: #fff;
}
.sp-kartenband {
	--sp-karte-gap: 1.5rem;
	width: calc(min(1200px, 100vw) - 2 * clamp(1.25rem, 4vw, 2.5rem));
	max-width: none;
	margin-inline: auto;
	margin-block: 0 !important;
}
.sp-kartenband.uk-slider-container { overflow: visible; }
.sp-kartenband .uk-slider-items { margin-left: calc(-1 * var(--sp-karte-gap)); cursor: grab; }
.sp-kartenband .uk-slider-items > * { padding-left: var(--sp-karte-gap); }
.sp-kartenband .el-item {
	position: relative;
	height: clamp(420px, 68vh, 760px);
	border-radius: var(--sp-radius-card);
	overflow: hidden;
	background: #000;
}
.sp-kartenband .el-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
/* Punkte: .uk-slider im Selektor, sonst gewinnt die Füllung von .uk-section-secondary:not(.uk-preserve-color). Der Abstand sitzt am Behälter der Punkte und steht dort gegen das !important von uk-margin-top */
.sp-kartenband div:has(> .uk-dotnav) { margin-top: 1.5rem !important; }
.sp-kartenband .uk-dotnav { gap: .5rem; margin-left: 0; justify-content: center; }
.sp-kartenband .uk-dotnav > * { padding-left: 0; }
.sp-kartenband.uk-slider .uk-dotnav > * > * {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .35);
	transition: width .3s ease, background .3s ease;
}
.sp-kartenband.uk-slider .uk-dotnav > * > :hover { background: rgba(255, 255, 255, .7); }
.sp-kartenband.uk-slider .uk-dotnav > .uk-active > * { width: 28px; background: #fff; }
@media (max-width: 700px) {
	.sp-kartenband .el-item { height: clamp(360px, 60vh, 520px); }
}

/* Section im Raster des Prototyps (.sd-sec + .wrap): Inhalt 1200 minus Gutter, Abstand oben und unten, Überschrift im Grad h2.display */
.sp-sektion.uk-section { padding-block: clamp(4rem, 8vw, 7rem); }
.sp-sektion .uk-container { box-sizing: border-box; max-width: 1200px; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.sp-sektion h2 {
	margin: 0;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.75rem, 3.2vw, 2.85rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--sp-ink);
}
.sp-sektion.uk-section-secondary h2 { color: #fff; }

/* Einleitung zweispaltig wie .sd-lede: Überschrift links schmaler, Text rechts */
.sp-lede .uk-container > .uk-grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	margin-left: 0;
}
.sp-lede .uk-container > .uk-grid > * { width: auto; padding-left: 0; margin-top: 0; }
.sp-lede h2 { max-width: 15ch; }

/* Videokopf wie .svc-hero--hell: Video über die volle Fläche, heller Aufleger, roter Schein oben rechts, Text mittig */
.sp-videokopf { position: relative; overflow: hidden; background: var(--sp-night); padding-block: calc(var(--sp-nav-h) + var(--sp-nav-top)) !important; }
.sp-videokopf::before,
.sp-videokopf::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sp-videokopf::before {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(11, 11, 13, .78) 0%, rgba(11, 11, 13, .55) 52%, rgba(11, 11, 13, .35) 100%),
		linear-gradient(180deg, rgba(11, 11, 13, .6) 0%, rgba(11, 11, 13, .15) 40%, rgba(11, 11, 13, .75) 100%);
}
.sp-videokopf::after { z-index: 2; background: radial-gradient(78% 62% at 88% 0%, rgba(227, 9, 33, .34), transparent 62%); }
.sp-videokopf > :not(video) { position: relative; z-index: 3; }
.sp-videokopf .uk-container { max-width: 920px; }
.sp-videokopf h1 {
	margin: 0;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(2rem, 3.8vw, 3.4rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: #fff;
}
.sp-videokopf .uk-text-lead { max-width: 58ch; margin: 1.75rem auto 0 !important; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: #b9bcc2; }
.sp-videokopf .uk-text-lead ~ .uk-margin { margin-top: 2.25rem !important; }
.sp-videokopf .uk-button { --sp-fill: var(--sp-ink); border: 0; font-family: "Montserrat", -apple-system, sans-serif; font-size: 1rem; }
/* Pfeil wie .btn__arrow im Prototyp: 16 px, Abstand .6rem, statt des YOOtheme-Icons */
:is(.sp-videokopf, .sp-startkopf, .sp-starthand, .sp-servicekarte, .sp-marke) .uk-button .uk-icon { width: 16px; height: 16px; margin-left: .6rem !important; background: currentColor; -webkit-mask: var(--sp-pfeil) center / contain no-repeat; mask: var(--sp-pfeil) center / contain no-repeat; }
:is(.sp-videokopf, .sp-startkopf, .sp-starthand, .sp-servicekarte, .sp-marke) .uk-button .uk-icon svg { display: none; }
:is(.sp-videokopf, .sp-startkopf, .sp-starthand, .sp-servicekarte, .sp-marke) .uk-button .sp-swap__row .uk-icon { margin-left: 0 !important; }

/* Dunklerer Aufleger wie .svc-hero (Leistungen), statt des hellen von .svc-hero--hell */
.sp-videokopf.sp-videokopf-dunkel::before {
	background:
		linear-gradient(90deg, rgba(11, 11, 13, .94) 0%, rgba(11, 11, 13, .8) 52%, rgba(11, 11, 13, .6) 100%),
		linear-gradient(180deg, rgba(11, 11, 13, .85) 0%, rgba(11, 11, 13, .35) 40%, rgba(11, 11, 13, .9) 100%);
}

/* Einleitung wie .svc-intro: Überschrift links (.8fr), größerer Text rechts (1.2fr) */
.sp-intro .uk-container > .uk-grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	margin-left: 0;
}
.sp-intro .uk-container > .uk-grid > * { width: auto; padding-left: 0; margin-top: 0; }
.sp-intro .uk-panel:not(.el-item) { margin: 0 !important; font-size: 1.2rem; font-weight: 400; line-height: 1.55; color: var(--sp-ink); }
.sp-intro .uk-panel p { margin: 0; }
.sp-intro .uk-panel p + p { margin-top: 1.25rem; }

/* Sticky-Stapel wie .stack (Leistungen). Section mit sp-stack-wrap: oben Überschrift und Button, darunter ein Grid mit sp-stack.
   Jeder Grid-Eintrag wird eine Zeile: Titel und Button links, Text in der Mitte, Bild rechts. custom.js klappt die Zeilen beim Scrollen zu */
.sp-stack-wrap.uk-section-secondary { background-color: var(--sp-night); }
.sp-stack-wrap .uk-grid > *:has(> h2) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sp-stack-wrap .uk-grid > *:has(> h2) > * { margin: 0 !important; }
.sp-stack-wrap .uk-button.uk-button-default { --sp-btn-line: rgba(255, 255, 255, .26); --sp-fill: var(--sp-rot); --sp-fill-ink: #fff; }
.sp-stack-wrap .uk-container > .uk-grid + .uk-grid { margin-top: 0 !important; }
.sp-stack { position: relative; margin: 0 !important; }
.sp-stack > .uk-grid { position: relative; margin: 0; }
.sp-stack > .uk-grid > * { width: 100%; padding-left: 0; margin-top: 0 !important; }
.sp-stack .uk-grid > * {
	--shut: 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	overflow: hidden;
}
.sp-stack .uk-grid > :last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.sp-stack .el-item {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, .94fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "titel text bild" "link text bild";
	column-gap: clamp(1.5rem, 3vw, 3rem);
	padding-block: 1.5vh;
	overflow: hidden;
	text-align: left;
}
.sp-stack .el-title {
	grid-area: titel;
	margin: 0 !important;
	max-width: 14ch;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.25rem, 1.75vw, 1.85rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: nowrap;
	color: #fff;
}
.sp-stack .el-title a { display: inline-block; color: inherit; }
.sp-stack .el-title a:hover { color: var(--sp-rot); }
.sp-stack .el-content {
	grid-area: text;
	align-self: start;
	margin: 0 !important;
	font-size: clamp(1rem, 1.15vw, 1.15rem);
	font-weight: 400;
	line-height: 1.5;
	color: #b9bcc2;
	opacity: calc(1 - var(--shut));
}
.sp-stack .el-content p { margin: 0; }
.sp-stack .el-image {
	grid-area: bild;
	align-self: stretch;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0 !important;
	object-fit: cover;
	filter: brightness(calc(1 - var(--shut) * .5));
}
.sp-stack .el-item > :has(> .el-link) { grid-area: link; margin: 1.4rem 0 0 !important; opacity: calc(1 - var(--shut)); }
.sp-stack .uk-button.uk-button-default {
	--sp-btn-bg: #fff;
	--sp-btn-ink: var(--sp-ink);
	--sp-btn-line: transparent;
	--sp-fill: var(--sp-rot);
	--sp-fill-ink: #fff;
	height: 46px;
	padding: 0 1.4rem;
	line-height: 46px;
	font-size: .95rem;
	letter-spacing: normal;
}
/* Pfeil hinter „Mehr erfahren“ wie .stack__link im Prototyp, in beiden Beschriftungen */
.sp-stack .el-link .sp-swap__row::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--sp-pfeil) center / contain no-repeat;
	mask: var(--sp-pfeil) center / contain no-repeat;
}
.sp-stack.is-live > .uk-grid { position: sticky; overflow: hidden; }
.sp-stack.is-live > .uk-grid > * { position: absolute; top: 0; left: 0; right: 0; will-change: transform, clip-path; backface-visibility: hidden; }
.sp-stack.is-live > .uk-grid > :last-child { border-bottom: 0; }
.sp-stack.is-live .el-item { height: 100%; box-sizing: border-box; }

/* Schritte „Partnerschaft schweißt zusammen.“ wie .svc-cycle: helle Fläche, drei Spalten mit dunkler Oberlinie, Icon rot, Titel verlinkt */
.sp-cycle.uk-section { background: var(--sp-bg-soft); }
.sp-cycle h2 { max-width: 680px; margin-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.sp-kreislauf .uk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-left: 0; }
.sp-kreislauf .uk-grid > * { width: auto; padding-left: 0; margin-top: 0 !important; }
.sp-kreislauf .el-item { margin-right: 1.5rem; padding: 1.75rem 1.5rem 2rem 0; border-top: 2px solid var(--sp-ink); text-align: left; }
/* Im Prototyp steht das Icon inline in einem Block mit Zeilenhöhe 1.6, das ergibt 25,3 px Abstand bis zum Titel statt 1.1rem */
.sp-kreislauf svg.el-image { display: block; width: 34px; height: 34px; margin: 0 0 1.58rem !important; color: var(--sp-rot); fill: none; stroke: currentColor; }
.sp-kreislauf .el-title { margin: 0 0 .6rem !important; font-family: "Montserrat", -apple-system, sans-serif; font-size: 1.15rem; font-weight: 600; line-height: 1.6; letter-spacing: -0.01em; color: var(--sp-ink); }
.sp-kreislauf .el-title a { color: inherit; }
.sp-kreislauf .el-title a:hover { color: var(--sp-rot); }
.sp-kreislauf .el-content { margin: 0 !important; font-size: .97rem; font-weight: 400; color: var(--sp-ink-soft); }
.sp-kreislauf .el-content p { margin: 0; }

@media (max-width: 1179px) {
	.sp-stack .el-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "link" "text" "bild"; grid-template-rows: none; row-gap: 1.5rem; padding-block: clamp(2rem, 4vw, 3rem); }
	.sp-stack .el-image { height: auto; aspect-ratio: 16 / 9; }
	.sp-stack .el-title { max-width: none; }
}
@media (min-width: 1180px) and (prefers-reduced-motion: no-preference) {
	.sp-stack-wrap.uk-section { padding-bottom: 0; }
	.sp-cycle.uk-section { position: relative; z-index: 2; margin-top: -55vh; border-radius: 44px 44px 0 0; box-shadow: 0 -28px 60px rgba(0, 0, 0, .45); }
}
@media (max-width: 900px) {
	.sp-intro .uk-container > .uk-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-kreislauf .uk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-kreislauf .el-item { border-top-width: 1px; margin-right: 1rem; }
}
@media (max-width: 560px) {
	.sp-kreislauf .uk-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-kreislauf .el-item { margin-right: 0; }
}


/* Händlersuche (Seite /haendlersuche/, Plugin Realdot Places, Plugin-CSS in den Einstellungen aus).
   Section mit sp-sektion pf, darin Headline pf-kopf-titel, Text pf-kopf-text und der Shortcode [realdot_places height="auto"].
   custom.js baut daraus die Leiste des Prototyps. Tokens des Prototyps auf die Werte des Child-Themes */
.pf {
	--accent: var(--sp-rot);
	--bg-soft: var(--sp-bg-soft);
	--ink: var(--sp-ink);
	--ink-soft: var(--sp-ink-soft);
	--line: var(--sp-line);
	--night: var(--sp-night);
	--nav-h: var(--sp-nav-h);
	--nav-top: var(--sp-nav-top);
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-display: "Montserrat", -apple-system, sans-serif;
}
/* Grundlagen, die der Prototyp aus site.css mitbringt: Box-Modell, Grundschrift, .wrap. Überschriften sonst in DM Sans und #111 aus YOOtheme */
.pf, .pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf { font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.pf :is(h1, h2, h3, h4) { font-family: var(--font-display); color: inherit; }
.pf .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.pf .pf-kopf-titel { margin: 0 0 .9rem; }
/* „Zum Profil“ fehlt im Prototyp; die Profilseiten /standorte/<name>/ haben noch keinen Inhalt. Zum Einschalten diese Regel entfernen */
.pf .rdp-action.rdp-action--profile { display: none; }
/* UIkit setzt * + .uk-margin { margin-top: 20px !important }, der Prototyp hat hier nur den Abstand der Überschrift (.9rem) */
.pf .pf-kopf-text { margin: 0 !important; }

/* Partnersuche Markup und Verhalten kommen aus dem Plugin Realdot Places, sein eigenes CSS ist aus (in WordPress: Einstellung „Plugin-CSS" abschalten, Karten- Stil aus assets/data/karten-stil.json eintragen) */

.pf.uk-section { padding-top: 0; overflow-x: clip; }
.pf__leiste {
	position: sticky;
	top: 0;
	z-index: 5;
	margin-inline: calc(50% - 50vw);
	padding: calc(var(--nav-top) + var(--nav-h) + 2.5rem) 0 1.5rem;
	background: var(--night);
	color: #fff;
}
.pf__leiste .wrap { padding: 0 var(--gutter); }
.pf__kopf { margin-bottom: 1.5rem; }
.pf__kopf h1 {
	margin: 0 0 .9rem;
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 2.6vw, 2.35rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.pf__kopf h1 span { color: var(--accent); }
.pf__kopf p { max-width: 56ch; margin: 0; color: #cbced3; font-size: 1.02rem; line-height: 1.55; }

.pf .rdp-locator {
	--pf-spalte: 320px;
	--pf-schatten: 0 14px 34px rgba(0, 0, 0, .1);
	--rdp-h: auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--ink);
}

.pf .rdp-search {
	flex: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 1rem;
	align-items: end;
	padding: 1.5rem;
	border-radius: 24px;
	background: #fff;
}
.pf .rdp-search:has(+ .rdp-filters) { border-radius: 24px 24px 0 0; }
.pf .rdp-search__field,
.pf .rdp-search__radius-wrap {
	position: relative;
	display: grid;
	gap: .5rem;
}
.pf .rdp-search__field::before { content: "Dein Standort"; }
.pf .rdp-search__radius-wrap::before { content: "Umkreis"; }
.pf .rdp-search__field::before,
.pf .rdp-search__radius-wrap::before {
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.pf .rdp-search__icon { position: absolute; left: 1.1rem; bottom: 17px; color: var(--ink-soft); pointer-events: none; }
.pf .rdp-search__address {
	width: 100%;
	height: 52px;
	padding: 0 3rem 0 2.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-soft);
	color: var(--ink);
	font: inherit;
	outline: none;
	transition: border-color .2s, background .2s;
}
.pf .rdp-search__address::placeholder { color: #8b9097; }
.pf .rdp-search__address:focus { border-color: var(--ink); background: #fff; }
.pf .rdp-search__geo {
	position: absolute;
	right: .45rem;
	bottom: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
	cursor: pointer;
}
.pf .rdp-search__geo:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pf .rdp-search__radius-icon { display: none; }
.pf .rdp-search__radius {
	height: 52px;
	padding: 0 2.6rem 0 1.25rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b5f66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.1rem center;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	        appearance: none;
}
.pf .rdp-search__radius:focus { border-color: var(--ink); }
.pf .rdp-search__submit {
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 1.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font: inherit;
	font-weight: 500;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background .5s cubic-bezier(.65, 0, .35, 1);
}
.pf .rdp-search__submit svg { display: none; }
.pf .rdp-search__submit:hover { background: var(--accent); }

.pf .rdp-filters {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	padding: .9rem 1.5rem;
	border-radius: 0 0 24px 24px;
	background: #fff;
}
.pf .rdp-filters::before {
	content: "";
	flex-basis: 100%;
	height: 1px;
	margin: -1rem 0 .5rem;
	background: var(--line);
}
.pf .rdp-filter {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	height: 30px;
	padding: 0 .7rem 0 .55rem;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-sans);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .3s, color .3s, box-shadow .3s;
}
.pf .rdp-filter svg { width: 15px; height: 15px; flex: none; }
.pf .rdp-filter:hover { background: var(--accent); }
.pf .rdp-filter.is-active { background: var(--accent); }
.pf .rdp-filter[data-service=""] { padding: 0 .75rem; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pf .rdp-filter[data-service=""]:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.pf .rdp-filter[data-service=""].is-active { background: var(--ink); color: #fff; box-shadow: none; }

.pf .rdp-locator__body {
	height: 100svh;
	max-height: 900px;
	padding-top: 1.5rem;
	display: grid;
	grid-template-columns: var(--pf-spalte) minmax(0, 1fr);
	gap: 1.5rem;
}
.pf .rdp-results {
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-radius: 24px;
	background: var(--bg-soft);
	overflow: hidden;
}
.pf .rdp-map {
	width: 100%;
	height: 100%;
	min-height: 0;
	border-radius: 24px;
	background: #f2f2f3;
	overflow: hidden;
}
.pf .rdp-results__meta {
	flex: none;
	padding: 1.35rem 1.4rem .9rem;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}
.pf .rdp-results__meta:empty { display: none; }
.pf .rdp-results__list {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 1.4rem 1rem;
	list-style: none;
	overflow-y: auto;
	scrollbar-width: thin;
}
.pf .rdp-result {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: 0 .4rem;
	padding: 1.35rem 0;
	border-top: 1px solid var(--line);
	cursor: pointer;
}
.pf .rdp-result:first-child { border-top: 0; padding-top: .75rem; }
.pf .rdp-result__num {
	width: 20px;
	height: 24px;
	margin-top: 0;
	color: transparent;
	font-size: 0;
	background: var(--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.5c0 7.5-10 15.5-10 15.5S2 19 2 11.5a10 10 0 1 1 20 0z'/%3E%3Ccircle cx='12' cy='11.5' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.5c0 7.5-10 15.5-10 15.5S2 19 2 11.5a10 10 0 1 1 20 0z'/%3E%3Ccircle cx='12' cy='11.5' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pf .rdp-result__body { min-width: 0; }
.pf .rdp-result__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pf .rdp-result__name { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.pf .rdp-result__name a { color: inherit; text-decoration: none; }
.pf .rdp-result:hover .rdp-result__name,
.pf .rdp-result.is-active .rdp-result__name { color: var(--accent); }
.pf .rdp-result__meta { flex: none; }
.pf .rdp-result__dist { color: var(--ink-soft); font-size: .88rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf .rdp-result__addr { margin-top: .55rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
.pf .rdp-result__addr svg { display: none; }
.pf .rdp-result__services { display: none; }
.pf .rdp-chip { padding: .15rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: .74rem; }
.pf .rdp-chip__icon { display: none; }
.pf .rdp-result__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; margin-top: .7rem; }
.pf .rdp-action {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--accent);
	font-size: .88rem;
	text-decoration: none;
}
.pf .rdp-action svg { width: 14px; height: 14px; color: var(--ink-soft); }
.pf .rdp-action:hover { color: var(--ink); }
.pf .rdp-action--route { margin-top: .3rem; color: var(--ink); font-weight: 500; }
.pf .rdp-action--route svg { color: var(--accent); }
.pf .rdp-action--route:hover { color: var(--accent); }

.pf .rdp-result--skel { cursor: default; pointer-events: none; }
.pf .rdp-skel { border-radius: 6px; background: #e6e7ea; }
.pf .rdp-skel.rdp-result__num { -webkit-mask: none; mask: none; background: #e6e7ea; border-radius: 50%; width: 26px; height: 26px; }
.pf .rdp-skel--line { height: 12px; margin: 0 0 10px; }
.pf .rdp-skel--sm { height: 10px; margin-bottom: 0; }

/* Info-Fenster auf der Karte */
.pf .gm-style .gm-style-iw-c { border-radius: 20px; }
.pf .rdp-iw { width: 300px; max-width: 100%; padding: .25rem .25rem .4rem; color: var(--ink); font-family: var(--font-sans); line-height: 1.5; }
.pf .rdp-iw__icons { display: none; }
.pf .rdp-iw__name { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.pf .rdp-iw__name a { color: inherit; text-decoration: none; }
.pf .rdp-iw__addr, .pf .rdp-iw__email, .pf .rdp-iw__dist, .pf .rdp-iw__meta, .pf .rdp-iw__about p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.pf .rdp-iw__email a { color: inherit; text-decoration: none; }
.pf .rdp-iw__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
.pf .rdp-iw__sep { height: 1px; margin: .9rem 0; background: var(--line); }
.pf .rdp-iw__buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf .rdp-iw__btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 38px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: .84rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.pf .rdp-iw__btn svg { width: 14px; height: 14px; }
.pf .rdp-iw__btn:hover { border-color: var(--ink); }
.pf .rdp-iw__btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.pf .rdp-iw__btn--primary:hover { border-color: var(--ink); background: var(--ink); }
.pf .rdp-iw__about h4 { margin: 0 0 .3rem; font-size: .95rem; font-weight: 600; }
.pf .rdp-iw__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pf .rdp-iw__col h4 { margin: 0 0 .4rem; color: var(--ink-soft); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pf .rdp-iw__col h4 svg { display: none; }
.pf .rdp-iw__hours { display: grid; gap: .15rem; font-size: .86rem; }
.pf .rdp-iw__hrow { display: flex; gap: .4rem; }
.pf .rdp-iw__hrow span:first-child { min-width: 1.6rem; color: var(--ink-soft); }
.pf .rdp-iw__weblink { color: var(--ink); font-size: .86rem; text-decoration: none; border-bottom: 1px solid var(--line); word-break: break-word; }
.pf .rdp-iw__meta { display: flex; align-items: center; gap: .35rem; margin-top: .5rem; }
.pf .rdp-iw__meta svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
	.pf .rdp-locator__body { height: auto; max-height: none; }
	.pf__leiste { position: static; }
	.pf .rdp-locator__body { grid-template-columns: minmax(0, 1fr); }
	.pf .rdp-map { order: -1; height: 380px; }
	.pf .rdp-results { max-height: 70vh; }
	.pf .rdp-results__meta { padding: 1.5rem 1.5rem 1rem; }
	.pf .rdp-results__list { padding: 0 1.5rem 1rem; }
	.pf .rdp-result { padding: 1.5rem 0; }
}
@media (max-width: 700px) {
	.pf .rdp-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1.25rem; }
	.pf .rdp-search__field { grid-column: 1 / -1; }
	.pf .rdp-search__submit { justify-content: center; }
	.pf .rdp-filters { padding: 1rem 1.25rem; }
	.pf .rdp-filter { height: 32px; }
}

/* Zweite Section „Nicht sicher, wer zuständig ist?" wie .sd-repair__top: Überschrift links, Text rechts, unten bündig */
.sp-zustaendig .uk-container > .uk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
	margin-left: 0;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sp-zustaendig .uk-container > .uk-grid > * { width: auto; padding-left: 0; margin-top: 0; }
.sp-zustaendig .uk-panel:not(.el-item) { font-size: 1rem; font-weight: 400; line-height: 1.6; color: #b9bcc2; }
.sp-zustaendig .uk-panel p { margin: 0; }
.sp-zustaendig .uk-panel a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.sp-zustaendig .uk-panel a:hover { color: var(--sp-rot); }
@media (max-width: 900px) {
	.sp-zustaendig .uk-container > .uk-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Wortfärbung als eigene Section wie .tx: großer Abstand oben und unten */
.sp-tx.uk-section { padding-block: clamp(6rem, 12vw, 10rem); background: #fff; }
.sp-tx .sp-wortfarbe { color: var(--sp-ink); }

/* Reiterabschnitt „Unser Sortiment.“ wie .sd-showcase: Kopf mittig schmal, Reiter 24 px über der Karte */
.sp-showcase.uk-section-secondary { background-color: var(--sp-night); }
.sp-showcase .uk-panel.sp-kopf { max-width: 54ch; margin: 1.25rem auto 0 !important; font-size: .98rem; font-weight: 400; line-height: 1.65; color: #a9adb4; }
.sp-showcase .uk-container > .uk-grid-margin:not(:first-child) { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.sp-showcase .sp-tabs.uk-subnav { margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; }
/* uk-margin am Switcher würde den Scrollweg um 20 px verlängern */
.sp-showcase .sp-panel.uk-margin { margin-bottom: 0; }

/* Bühne mit Bild oder Video wie .vf: gleichmäßig abgedunkelt, Logo, Titel, Text und drei Aussagen mittig */
.sp-videobuehne { position: relative; isolation: isolate; min-height: 100svh; background-color: var(--sp-night); }
.sp-videobuehne::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(11, 11, 13, .72) 0%, rgba(11, 11, 13, .58) 20%, rgba(11, 11, 13, .58) 80%, rgba(11, 11, 13, .78) 100%);
}
.sp-videobuehne > * { position: relative; z-index: 1; }
.sp-videobuehne .uk-container { max-width: 52rem; }
.sp-videobuehne .el-image { width: min(240px, 50%); height: auto; }
.sp-videobuehne h2 { margin: 1.25rem 0 1.4rem; font-family: "Montserrat", -apple-system, sans-serif; font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; color: #fff; }
.sp-videobuehne .uk-panel:not(.el-item) { max-width: 44rem; margin: 0 auto 3.5rem !important; font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 400; line-height: 1.6; color: #e6e7ea; }
.sp-vfpunkte .uk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 5vw, 5rem); margin-left: 0; }
.sp-vfpunkte .uk-grid > * { width: auto; padding-left: 0; margin-top: 0 !important; }
.sp-vfpunkte .el-item { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
/* Strichzeichnungen: UIkit füllt .uk-svg mit currentColor und überschreibt damit fill="none". Einige Dateien tragen stroke="#000" am Wurzel-SVG, das färbt UIkit nicht um */
.sp-vfpunkte svg.el-image, .sp-raster svg.el-image { fill: none; stroke: currentColor; }
.sp-vfpunkte .el-image { width: clamp(64px, 6vw, 88px); height: clamp(64px, 6vw, 88px); margin: 0 !important; color: var(--sp-rot); }
.sp-vfpunkte .el-title { margin: 0 !important; font-family: "Montserrat", -apple-system, sans-serif; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }

/* Produktband wie .pg: vier quadratische Karten, Produktbild eingepasst auf Schwarz, Pfeile als Pille unten rechts */
.sp-produktwrap.uk-section { background: #fff; box-shadow: 0 -28px 60px rgba(0, 0, 0, .38); }
.sp-produktwrap h2 { max-width: 22ch; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.sp-produktband .uk-slider-items { margin-left: -1rem; }
.sp-produktband .uk-slider-items > * { padding-left: 1rem; }
.sp-produktband .el-item { color: var(--sp-ink); }
.sp-produktband .el-image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 9%; border-radius: 24px; background: #000; box-sizing: border-box; margin: 0 !important; }
.sp-produktband .el-title { margin: 1.25rem 0 .3rem !important; font-family: "Montserrat", -apple-system, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--sp-ink); }
.sp-produktband .el-content { margin: 0 !important; font-size: .92rem; font-weight: 400; line-height: 1.5; color: var(--sp-ink-soft); }
/* Pfeile als Pille unten rechts wie .pg__nav: Slidenav „Default“, beide Behälter aus der Mitte an den unteren Rand gezogen */
.sp-produktband > .uk-position-relative { padding-bottom: calc(1.75rem + 50px); }
.sp-produktband div:has(> .el-slidenav) { top: auto; bottom: 0; left: auto; margin: 0; transform: none; --uk-position-translate-y: 0; }
.sp-produktband div:has(> [uk-slidenav-previous]) { right: 57px; }
.sp-produktband div:has(> [uk-slidenav-next]) { right: 0; }
.sp-produktband .el-slidenav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--sp-line);
	background: #fff;
	color: var(--sp-ink);
	visibility: visible !important;
	transition: background .25s ease, color .25s ease;
}
.sp-produktband .el-slidenav[uk-slidenav-previous] { border-right: 0; border-radius: 999px 0 0 999px; }
.sp-produktband .el-slidenav[uk-slidenav-next] { border-radius: 0 999px 999px 0; }
.sp-produktband .el-slidenav:hover { background: var(--sp-rot); color: #fff; }
.sp-produktband .el-slidenav svg { display: none; }
.sp-produktband .el-slidenav::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--sp-pfeil) center / contain no-repeat; mask: var(--sp-pfeil) center / contain no-repeat; }
.sp-produktband .el-slidenav[uk-slidenav-previous]::before { transform: scaleX(-1); }

/* Überblick als Raster wie .hm-hand: fünf Spalten, Trennlinie links, Feld färbt sich beim Überfahren von unten rot */
.sp-raster-wrap.uk-section-secondary { background: var(--sp-night); }
.sp-raster-wrap h2 { margin: 0 auto clamp(2.5rem, 5vw, 4rem); color: #fff; }
.sp-raster .uk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-left: 0; }
.sp-raster .uk-grid > * { width: auto; padding-left: 0; margin-top: 0 !important; }
.sp-raster .el-item {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	height: 100%;
	padding: 1.9rem 1.5rem 1.6rem;
	border-left: 1px solid rgba(255, 255, 255, .16);
	box-sizing: border-box;
	color: #fff;
	overflow: hidden;
}
.sp-raster .uk-grid > :first-child .el-item { border-left: 0; }
.sp-raster .el-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sp-rot);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.sp-raster .el-item:hover::before { transform: scaleY(1); }
.sp-raster .el-image { width: 56px; height: 56px; margin: 0 !important; color: var(--sp-rot); transition: color .3s ease; }
.sp-raster .el-item:hover .el-image { color: #fff; }
.sp-raster .el-title { margin: .4rem 0 0 !important; font-family: "Montserrat", -apple-system, sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.sp-raster .el-content { margin: 0 !important; font-size: .93rem; font-weight: 400; line-height: 1.5; color: #b9bcc2; }
.sp-raster .el-item:hover .el-content { color: rgba(255, 255, 255, .9); }

@media (max-width: 1180px) {
	.sp-raster .uk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sp-raster .el-item { border-top: 1px solid rgba(255, 255, 255, .16); }
	.sp-raster .uk-grid > :nth-child(3n+1) .el-item { border-left: 0; }
}
@media (max-width: 900px) {
	.sp-vfpunkte .uk-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	.sp-raster .uk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-raster .uk-grid > :nth-child(3n+1) .el-item { border-left: 1px solid rgba(255, 255, 255, .16); }
	.sp-raster .uk-grid > :nth-child(2n+1) .el-item { border-left: 0; }
	.sp-lede .uk-container > .uk-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.sp-raster .uk-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-raster .uk-grid > * .el-item { border-left: 0 !important; }
}

/* Leistungsleiste unter dem Kopf: weiße Kapsel, die 38px in den Kopf hineinragt.
   Section mit sp-railwrap (ohne Innenabstand), darin ein Grid mit sp-rail, 4 Spalten, jede Zelle ein Link (Grid-Option „Panel verlinken“, Bild = SVG-Icon links) */
.sp-railwrap {
	position: relative;
	z-index: 20;
	margin-top: -38px;
	background: transparent;
}
.sp-rail {
	width: min(100%, 1120px);
	margin-inline: auto;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(0, 0, 0, .32);
	overflow: hidden;
}
.sp-rail .uk-grid { margin-left: 0; }
.sp-rail .uk-grid > * { padding-left: 0; border-left: 1px solid rgba(0, 0, 0, .09); }
.sp-rail .uk-grid > :first-child { border-left: 0; }
.sp-rail .el-item > a, .sp-rail .el-item > .uk-panel {
	display: flex;
	align-items: center;
	min-height: 4.75rem;
	padding: .8rem 1.4rem;
	color: var(--sp-ink);
	font-size: .88rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}
.sp-rail .el-item > a > .uk-grid { flex: 1; }
.sp-rail .el-title { margin: 0 !important; }
.sp-rail .el-image { color: var(--sp-ink-soft); transition: color .3s ease; }
.sp-rail .el-item > a:hover { background: var(--sp-rot); color: #fff; }
.sp-rail .el-item > a:hover .el-image { color: #fff; }

/* Kacheln mit schwarzer Oberlinie (Fakten, Vorhaben) */
.sp-tier > *, .sp-tier.el-item { padding-top: 1.25rem; border-top: 1px solid var(--sp-ink); }
.sp-tier h3 { margin: 0 0 .7rem; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.sp-tier p { margin: 0; font-size: .97rem; color: var(--sp-ink-soft); }
.uk-light .sp-tier > *, .uk-light .sp-tier.el-item { border-top-color: rgba(255, 255, 255, .3); }
.uk-light .sp-tier p { color: #a9adb4; }
.sp-facts .el-image { display: block; margin: 0 0 .2rem -2px; color: var(--sp-rot); }
.sp-facts .el-title { margin-top: 0 !important; font-size: 1.05rem; }

/* Schritte 01, 02, 03 mit Haarlinie (Grid mit sp-steps, Titel + Text, ein- oder zweispaltig) */
.sp-steps .uk-grid { counter-reset: sp-step; }
.sp-steps .el-item {
	counter-increment: sp-step;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: 0 1.25rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--sp-line);
}
.sp-steps .el-item::before {
	content: counter(sp-step, decimal-leading-zero);
	grid-row: 1 / 3;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.7;
	color: var(--sp-rot);
	font-variant-numeric: tabular-nums;
}
.sp-steps .el-title { margin: 0 0 .35rem !important; font-size: 1.05rem; }
.sp-steps .el-content { margin: 0 !important; }
.sp-steps .el-content p { margin: 0; font-size: .95rem; color: var(--sp-ink-soft); }
.uk-light .sp-steps .el-item { border-top-color: rgba(255, 255, 255, .16); }
.uk-light .sp-steps .el-content p { color: #a9adb4; }

/* Bilder in Themenabschnitten: sp-media = 4:3 neben dem Text, sp-band = breites Band 16:6 */
.sp-media img, .sp-band img { display: block; width: 100%; object-fit: cover; border-radius: 3px; }
.sp-media img { aspect-ratio: 4 / 3; }
.sp-band { position: relative; }
.sp-band img { aspect-ratio: 16 / 6; object-position: 50% 42%; }
.sp-band::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(11, 11, 13, .8), rgba(11, 11, 13, .15) 55%, rgba(11, 11, 13, .7));
	pointer-events: none;
}
.sp-repair { position: relative; overflow: hidden; }
.sp-repair::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(62% 58% at 92% 6%, rgba(227, 9, 33, .24), transparent 62%);
	pointer-events: none;
}
.sp-repair > * { position: relative; z-index: 1; }
.sp-night { background: var(--sp-night) !important; }

/* Nummerierte Listen 01, 02, 03 */
.sp-specs ul, .sp-specs ol, ol.sp-specs, ul.sp-specs { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: sp-spec; }
.sp-specs li {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr);
	gap: 1rem;
	padding: .95rem 0;
	margin: 0;
	border-top: 1px solid var(--sp-line);
	font-size: 1rem;
}
.sp-specs li:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-specs li::before {
	content: counter(sp-spec, decimal-leading-zero);
	counter-increment: sp-spec;
	font-size: .78rem;
	font-weight: 600;
	color: var(--sp-rot);
	font-variant-numeric: tabular-nums;
	line-height: 1.75;
}
.uk-light .sp-specs li { border-color: rgba(255, 255, 255, .16); color: #d6d8dc; }

/* Häkchenliste (Listen-Element mit Klasse sp-list, ohne eigenes Icon) */
.sp-list li {
	position: relative;
	padding: .7rem 0 .7rem 1.75rem;
	margin: 0;
	border-top: 1px solid var(--sp-line);
	font-size: .93rem;
	line-height: 1.5;
	color: var(--sp-ink-soft);
}
.sp-list li:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--sp-rot);
	border-bottom: 2px solid var(--sp-rot);
	transform: rotate(-45deg);
}

/* Reiterleiste wie im Prototyp: Pille mit Kontur, darin ein roter Gleiter, der federnd auf den aktiven Eintrag faehrt.
   Klasse sp-tabs auf die Navigation des Switchers (Stil Subnav Pill), custom.js setzt --n und --tab */
.sp-tabs.uk-subnav {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
}
.sp-tabs.uk-subnav::after {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc((100% - 8px - (var(--n, 4) - 1) * 4px) / var(--n, 4));
	border-radius: 999px;
	background: var(--sp-rot);
	transform: translateX(calc((100% + 4px) * var(--tab, 0)));
	transition: transform .5s cubic-bezier(.32, 1.5, .55, 1);
}
.sp-tabs.uk-subnav > * { padding-left: 0; }
.sp-tabs.uk-subnav > * > a {
	position: relative;
	z-index: 1;
	justify-content: center;
	padding: .7rem 1.4rem;
	border-radius: 999px;
	background: transparent;
	font-size: .86rem;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #8f939a;
	transition: color .35s ease, transform .35s cubic-bezier(.32, 1.5, .55, 1);
}
/* YOOtheme faerbt Subnav-Links auf dunklen Sections ueber .uk-light mit drei Klassen, deshalb hier dieselbe Tiefe */
.uk-light .sp-tabs.uk-subnav > * > a { color: #8f939a; }
.sp-tabs.uk-subnav > * > a:hover, .uk-light .sp-tabs.uk-subnav > * > a:hover { color: #fff; }
.sp-tabs.uk-subnav > * > a:active { transform: scale(.94); }
.sp-tabs.uk-subnav > .uk-active > a { background: transparent; color: #fff; }

/* Wechsel beim Scrollen (Prototyp .sd-showcase): die Karte dockt unten am Bildschirm an, die Folien fahren
   von unten herein und raeumen nach oben. custom.js baut die Buehne aus der Spalte, in der der Switcher steht.
   Klasse sp-showcase auf die dunkle Section, sp-kopf auf Ueberschrift und Vorspann darueber. */
/* Der Scrollweg braucht normalen Fluss: Fensterhoehe und mittige Ausrichtung der Section werden hier aufgehoben */
.sp-showcase {
	display: block !important;
	min-height: 0 !important;
	padding-bottom: 0 !important;
}
.sp-showcase > .uk-width-1-1 { width: auto; }
.sp-kopf { transition: opacity .45s ease, transform .45s ease; }
.sp-showcase.is-docked .sp-kopf {
	opacity: 0;
	transform: translateY(-14px);
	pointer-events: none;
}
.sp-panel .uk-switcher.is-driven {
	position: relative;
	display: block;
	overflow: hidden;
	min-height: var(--sp-folien-hoehe, 340px);
}
.sp-panel .uk-switcher.is-driven > * { display: block; }
/* Zum Messen der Folienhoehe liegen sie kurz flach untereinander, unsichtbar und ohne eigene Hoehe */
.sp-panel .uk-switcher.is-messen { min-height: 0; }
.sp-panel .uk-switcher.is-messen > * {
	display: block;
	position: static;
	min-height: 0;
	opacity: 0;
}
.sp-panel .uk-switcher.is-driven > .el-item {
	position: absolute;
	inset: 0;
	width: 100%;
	min-height: 100%;
	border-radius: var(--sp-radius-card) var(--sp-radius-card) 0 0;
	will-change: transform, opacity;
	backface-visibility: hidden;
}
.sp-panel .uk-switcher.is-driven > .el-item > .uk-grid { height: 100%; }
/* Beim Sprung auf einen anderen Reiter federt die Karte nach vorn, beim Scrollen laeuft sie ohne Uebergang mit */
.sp-panel .uk-switcher.is-federnd > .el-item { transition: transform .62s cubic-bezier(.22, 1.2, .36, 1), opacity .4s ease; }
/* Platzhalter geben der Buehne den Scrollweg. Als Innenabstand wuerde er nicht zaehlen, weil Sticky am Inhaltsfeld haengt */
.sp-lauf, .sp-halt { height: 0; }

@media (min-width: 1081px) and (min-height: 760px) {
	.sp-lauf { height: var(--sp-lauf); }
	.sp-halt { height: var(--sp-halt); }
	.sp-buehne > .sp-panel { position: sticky; top: var(--sp-dock-top, 12vh); }
	/* Die helle Flaeche danach faehrt ueber die angedockte Karte */
	.sp-ueberfahrt { margin-top: calc(-1 * var(--sp-halt)); }
}

/* Karte der Reiter: weisse Flaeche, Bild links, Text rechts (Prototyp .sd-panel und .sd-slide).
   Klasse sp-panel auf das Switcher-Element. Im Reiter Bild links ausrichten, Abstand keiner, dann sitzt das Motiv randlos. */
.sp-panel .uk-switcher > .el-item {
	border-radius: var(--sp-radius-card);
	overflow: hidden;
	background: #fff;
	color: var(--sp-ink);
}
.sp-panel .uk-switcher > .el-item > .uk-grid {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	align-items: stretch;
	margin: 0;
	gap: 0;
}
.sp-panel .uk-switcher > .el-item > .uk-grid > * { padding-left: 0; width: auto; max-width: none; }
.sp-panel .uk-switcher picture { display: block; height: 100%; }
.sp-panel .uk-switcher .el-image { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.sp-panel .uk-switcher > .el-item > .uk-grid > :last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(1.75rem, 3.5vw, 3rem);
}
.sp-panel .uk-switcher .el-title {
	margin: 0 0 .7rem !important;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--sp-ink);
}
.sp-panel .uk-switcher .el-content {
	margin-top: 0 !important;
	font-size: .98rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--sp-ink-soft);
}
.sp-panel .uk-switcher .el-content p { margin: 0; max-width: 46ch; }
.sp-panel .uk-switcher .el-content p + p { margin-top: 1.15rem; }
.sp-panel .uk-switcher .el-content ul { width: 100%; margin: 1.5rem 0 1.75rem; padding: 0; list-style: none; }
.sp-panel .uk-switcher .el-content li {
	position: relative;
	padding: .7rem 0 .7rem 1.75rem;
	margin: 0;
	border-top: 1px solid var(--sp-line);
	font-size: .93rem;
	line-height: 1.5;
	color: var(--sp-ink-soft);
}
.sp-panel .uk-switcher .el-content li:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-panel .uk-switcher .el-content li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--sp-rot);
	border-bottom: 2px solid var(--sp-rot);
	transform: rotate(-45deg);
}
.sp-panel .uk-switcher .el-link { margin-top: auto !important; align-self: flex-start; border: 0; }

/* Startseite wie index.html (home.css im Prototyp) */

/* Kopf wie .hm-head: Section sp-startkopf mit Sticky „Cover“, links eine Spalte mit Video und Text, rechts ein Grid sp-einstiege mit drei Kacheln */
.sp-startkopf.uk-section { padding: 0; background: var(--sp-night); }
.sp-startkopf .uk-container { max-width: none; padding: 0; }
.sp-startkopf .uk-container > .uk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 27vw);
	height: 100vh;
	height: 100svh;
	margin-left: 0;
}
.sp-startkopf .uk-container > .uk-grid > * { width: auto; min-height: 0; padding-left: 0; margin-top: 0; }
.sp-startkopf .uk-container > .uk-grid > :first-child > * { position: relative; height: 100%; overflow: hidden; }
.sp-startkopf .uk-container > .uk-grid > :first-child video { z-index: 0; }
.sp-startkopf .uk-container > .uk-grid > :first-child > *::before,
.sp-startkopf .uk-container > .uk-grid > :first-child > *::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sp-startkopf .uk-container > .uk-grid > :first-child > *::before {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(11, 11, 13, .88) 0%, rgba(11, 11, 13, .55) 46%, rgba(11, 11, 13, .25) 100%),
		linear-gradient(180deg, rgba(11, 11, 13, .7) 0%, rgba(11, 11, 13, .15) 38%, rgba(11, 11, 13, .75) 100%);
}
.sp-startkopf .uk-container > .uk-grid > :first-child > *::after { z-index: 2; background: radial-gradient(64% 58% at 6% 4%, rgba(227, 9, 33, .26), transparent 60%); }
.sp-startkopf .uk-container > .uk-grid > :first-child .uk-panel.uk-width-1-1 {
	position: relative;
	z-index: 3;
	width: min(100%, 42rem) !important;
	padding: calc(var(--sp-nav-h) + var(--sp-nav-top) + 2rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 5vw, 4rem);
	box-sizing: border-box;
}
.sp-startkopf .sp-kicker { margin: 0 0 1.5rem !important; font-size: clamp(.95rem, 1.1vw, 1.05rem); font-weight: 400; line-height: 1.6; color: #cbced3; }
.sp-startkopf h1 { margin: 0 !important; font-family: "Montserrat", -apple-system, sans-serif; font-size: clamp(2.4rem, 4.4vw, 4.2rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; color: #fff; }
/* Doppelte Klasse: YOOtheme färbt den Lead auf Secondary über .uk-section-secondary:not(.uk-preserve-color) weiß */
.sp-startkopf .uk-text-lead.uk-text-lead { max-width: 46ch; margin: 1.5rem 0 0 !important; font-size: clamp(.98rem, 1.15vw, 1.12rem); line-height: 1.55; color: #cbced3; }
.sp-startkopf .uk-text-lead + * { margin-top: 2.4rem !important; }

/* Drei gleich hohe Einstiege, der Button der Kachel füllt sich beim Überfahren der ganzen Kachel */
.sp-startkopf .uk-container > .uk-grid > :last-child { display: flex; flex-direction: column; }
.sp-einstiege { flex: 1; margin: 0 !important; }
.sp-einstiege > .uk-grid { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); height: 100%; margin-left: 0; }
.sp-einstiege > .uk-grid > * { width: auto; min-height: 0; padding-left: 0; margin-top: 0 !important; }
.sp-einstiege .el-item { height: 100%; }
.sp-einstiege .el-item > a {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	height: 100%;
	padding: clamp(1.1rem, 1.8vw, 1.9rem);
	box-sizing: border-box;
	background: var(--sp-night);
	color: #fff;
	overflow: hidden;
}
.sp-einstiege > .uk-grid > * + * .el-item > a { border-top: 1px solid rgba(255, 255, 255, .14); }
/* Die Kopfleiste schwebt bis in die rechte Spalte, die oberste Kachel hält ihre Höhe frei */
.sp-einstiege > .uk-grid > :first-child .el-item > a { padding-top: calc(var(--sp-nav-h) + var(--sp-nav-top) + .5rem); }
.sp-einstiege .el-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	object-fit: cover;
	object-position: right center;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.sp-einstiege .el-item > a:hover .el-image { transform: scale(1.05); }
.sp-einstiege .el-item > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 13, .94) 0%, rgba(11, 11, 13, .75) 46%, rgba(11, 11, 13, .15) 100%); }
.sp-einstiege .el-title { max-width: 20ch; margin: 0 !important; font-family: "Montserrat", -apple-system, sans-serif; font-size: clamp(.95rem, 1.05vw, 1.12rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
.sp-einstiege .el-title + * { margin-top: .85rem !important; }
.sp-einstiege .el-link.uk-button { height: 40px; padding-inline: 1.2rem; line-height: 40px; font-size: .85rem; font-weight: 500; letter-spacing: normal; }
.sp-einstiege .el-item > a:hover .sp-swap::before { transform: scaleY(1); }
.sp-einstiege .el-item > a:hover .sp-swap__row:first-child { transform: translateY(-120%); }
.sp-einstiege .el-item > a:hover .sp-swap__row + .sp-swap__row { transform: translateY(0); }

/* Einordnung wie .hm-lede: fährt mit runder Oberkante über den Kopf (Section sp-sektion sp-rund sp-startlede), mittig */
.sp-startlede { position: relative; z-index: 2; background: #fff; box-shadow: 0 -28px 60px rgba(0, 0, 0, .38); text-align: center; }
.sp-startlede h2 { max-width: 24ch; margin-inline: auto; }
.sp-startlede .uk-panel { max-width: 58ch; margin: 1.75rem auto 0 !important; font-size: 1.15rem; font-weight: 400; line-height: 1.6; color: var(--sp-ink-soft); }
.sp-startlede .uk-panel p { margin: 0; }

/* „Alles aus einer Hand.“ wie .hm-hand: oben Überschrift links, Text und Buttons rechts, darunter das Raster sp-raster mit Links */
.sp-starthand.uk-section-secondary { background: var(--sp-night); }
.sp-starthand .uk-container > .uk-grid:first-child {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.sp-starthand .uk-container > .uk-grid:first-child > * { width: auto; padding-left: 0; margin-top: 0; }
.sp-starthand .uk-container > .uk-grid + .uk-grid { margin-top: 0 !important; }
.sp-starthand .uk-text-lead.uk-text-lead { margin: 0 !important; color: #b9bcc2; }
.sp-knoepfe { margin-top: 2rem !important; }
.sp-knoepfe > .uk-grid { display: flex; flex-wrap: wrap; gap: .7rem; margin-left: 0; }
.sp-knoepfe > .uk-grid > * { padding-left: 0; margin-top: 0 !important; }
.sp-raster .el-item > a { display: flex; flex: 1; flex-direction: column; gap: .7rem; color: inherit; text-decoration: none; }
/* Flex statt Block, sonst hebt die Zeilenhöhe der Hülle den Link um 3 px an */
.sp-raster .el-item a > div:has(> .el-link) { display: flex; margin-top: auto !important; padding-top: 1.2rem; }
.sp-raster .el-item .el-link { display: inline-flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 500; line-height: 1.6; color: #fff; }
.sp-raster .el-item .el-link::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--sp-pfeil) center / contain no-repeat; mask: var(--sp-pfeil) center / contain no-repeat; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.sp-raster .el-item:hover .el-link { color: #fff; }
.sp-raster .el-item:hover .el-link::after { transform: translateX(6px); }

/* Einblenden beim Scrollen wie reveal.js: Klasse sp-reveal auf das Grid, custom.js versetzt die Einträge um je 90 ms */
.sp-reveal-kind { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.sp-reveal-kind.is-in { opacity: 1; transform: none; }

/* Servicekarte wie .hm-sv: 1440 breit, Bild links, rote Fläche rechts, 28 px Rundung */
.sp-servicekarte .uk-container { max-width: 1440px; }
.sp-servicekarte .uk-container > .uk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	min-height: min(62vh, 520px);
	margin-left: 0;
	border-radius: var(--sp-radius-card);
	overflow: hidden;
}
.sp-servicekarte .uk-container > .uk-grid > * { width: auto; padding-left: 0; margin-top: 0; }
.sp-servicekarte .uk-container > .uk-grid > :first-child { position: relative; overflow: hidden; }
.sp-servicekarte .uk-container > .uk-grid > :first-child > * { position: absolute; inset: 0; margin: 0 !important; }
.sp-servicekarte .uk-container > .uk-grid > :first-child .el-image { width: 100%; height: 100%; object-fit: cover; }
.sp-servicekarte .uk-container > .uk-grid > :last-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 4vw, 3.5rem);
	box-sizing: border-box;
	background: var(--sp-rot);
	color: #fff;
}
.sp-servicekarte .uk-container > .uk-grid > :last-child > * { max-width: 30rem; }
.sp-servicekarte .sp-kicker { margin: 0 0 clamp(1.25rem, 3vw, 2.25rem) !important; font-size: .78rem; font-weight: 600; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.sp-servicekarte h2 { margin: 0 0 1.15rem !important; color: #fff; }
.sp-servicekarte .uk-panel:not(.sp-kicker) { margin: 0 0 2rem !important; font-size: 1rem; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.sp-servicekarte .uk-panel p { margin: 0; }
.sp-servicekarte h2 + .uk-panel + * { margin-top: 0 !important; }
/* Weißer Button, der sich dunkel füllt: rot auf rot wäre beim Überfahren weg */
.sp-servicekarte .uk-button.uk-button-default { --sp-btn-bg: #fff; --sp-btn-ink: var(--sp-ink); --sp-btn-line: transparent; --sp-fill: var(--sp-ink); --sp-fill-ink: #fff; }

/* Hausmarke wie .hm-brand: Section-Bild mit Verlauf von links, Eyebrow, Logo, Text und weißer Button */
/* Mit Section-Bild legt YOOtheme das Bild auf ein inneres .uk-section, dort steht darum die Bühne und der Verlauf */
.sp-marke { background-color: var(--sp-night); }
.sp-marke > .uk-section { position: relative; isolation: isolate; display: flex; align-items: center; min-height: min(78vh, 640px); padding-block: clamp(4rem, 8vw, 7rem); box-sizing: border-box; }
.sp-marke > .uk-section::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 11, 13, .92) 0%, rgba(11, 11, 13, .7) 48%, rgba(11, 11, 13, .25) 100%); }
.sp-marke .uk-container { position: relative; z-index: 1; width: 100%; box-sizing: border-box; max-width: 1200px; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.sp-marke .uk-container > .uk-grid > * > * { max-width: 44rem; }
/* Im Prototyp erbt die Eyebrow das Grau von .hm-brand p. Sie steht dort inline in einer Zeile, der Abstand zum Logo ist darum 44 px statt 1.2rem */
.sp-marke .sp-eyebrow { display: flex; width: fit-content; margin: 8px 0 44px !important; line-height: 1.6; color: #cbced3; }
.sp-marke .el-image { width: clamp(180px, 22vw, 280px); height: auto; }
.sp-marke .sp-eyebrow + * { margin: .5rem 0 1.75rem !important; }
.sp-marke .uk-panel:not(.sp-eyebrow) { max-width: 52ch; margin: 0 0 2.25rem !important; font-size: 1.0625rem; font-weight: 400; line-height: 1.6; color: #cbced3; }
.sp-marke .uk-panel p { margin: 0; }
.sp-marke .uk-panel:not(.sp-eyebrow) + * { margin-top: 0 !important; }
.sp-marke .uk-button.uk-button-default { --sp-btn-bg: #fff; --sp-btn-ink: var(--sp-ink); --sp-btn-line: transparent; --sp-fill: var(--sp-rot); --sp-fill-ink: #fff; }

/* Logoband wie .hm-partners: Grid sp-logos in einer Section sp-logoband, custom.js hängt eine zweite Reihe an, damit das Band ohne Sprung durchläuft */
.sp-logoband.uk-section { padding-block: clamp(2.5rem, 5vw, 4rem); overflow: hidden; background: #fff; }
.sp-logoband .uk-container { max-width: none; padding: 0; }
.sp-logos { margin: 0 !important; }
.sp-logos .sp-logos__band { display: flex; width: max-content; }
.sp-logos .sp-logos__band > .uk-grid {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
	margin-left: 0;
	padding-right: clamp(2.5rem, 6vw, 5rem);
	animation: sp-lauf 38s linear infinite;
}
.sp-logos .uk-grid > * { flex: none; width: auto; padding-left: 0; margin-top: 0 !important; }
.sp-logos .el-image { display: block; width: 160px; height: auto; margin: 0 !important; }
.sp-logoband:hover .sp-logos__band > .uk-grid { animation-play-state: paused; }
@keyframes sp-lauf {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

@media (max-width: 1180px) {
	.sp-starthand .sp-raster .uk-grid > * .el-item { border-top: 1px solid rgba(255, 255, 255, .16); }
}
@media (max-width: 1080px) {
	.sp-startkopf.uk-section { height: auto; }
	.sp-startkopf .uk-container > .uk-grid { grid-template-columns: minmax(0, 1fr); height: auto; }
	.sp-startkopf .uk-container > .uk-grid > :first-child > * { min-height: min(78vh, 640px); }
	.sp-einstiege > .uk-grid { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sp-einstiege .el-item > a { min-height: 260px; justify-content: flex-end; padding: clamp(1.5rem, 2.2vw, 2.25rem); }
	.sp-einstiege > .uk-grid > :first-child .el-item > a { padding-top: clamp(1.5rem, 2.2vw, 2.25rem); }
	.sp-einstiege > .uk-grid > * + * .el-item > a { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
	.sp-einstiege .el-image { object-position: center; }
	.sp-einstiege .el-item > a::before { background: linear-gradient(0deg, rgba(11, 11, 13, .94) 12%, rgba(11, 11, 13, .45) 60%, rgba(11, 11, 13, .3) 100%); }
	.sp-starthand .uk-container > .uk-grid:first-child { grid-template-columns: minmax(0, 1fr); }
	.sp-servicekarte .uk-container > .uk-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 20px; }
	.sp-servicekarte .uk-container > .uk-grid > :first-child { aspect-ratio: 16 / 10; }
	.sp-marke > .uk-section { min-height: 0; }
	.sp-marke > .uk-section::after { background: linear-gradient(90deg, rgba(11, 11, 13, .94) 0%, rgba(11, 11, 13, .82) 100%); }
}
@media (max-width: 700px) {
	.sp-einstiege > .uk-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-einstiege > .uk-grid > * + * .el-item > a { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
	.sp-einstiege .el-item > a { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-reveal-kind { opacity: 1; transform: none; transition: none; }
	.sp-logos .sp-logos__band { width: auto; }
	.sp-logos .sp-logos__band > .uk-grid { flex-wrap: wrap; animation: none; }
	.sp-logos .sp-logos__band > .uk-grid + .uk-grid { display: none; }
	.sp-einstiege .el-image { transition: none; }
}

/* Weiße Fläche mit runder Oberkante, die über den vorigen Abschnitt fährt */
.sp-sheet {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--sp-radius-sheet));
	border-radius: var(--sp-radius-sheet) var(--sp-radius-sheet) 0 0;
	background: #fff;
	box-shadow: 0 -28px 60px rgba(0, 0, 0, .38);
}
.sp-sheet--soft { background: var(--sp-bg-soft); }
/* Nur die runde Oberkante, wenn das Überfahren schon aus YOOtheme kommt (Section-Option Overlap/Sticky) */
.sp-rund { border-radius: var(--sp-radius-sheet) var(--sp-radius-sheet) 0 0; overflow: hidden; }

/* Bildbühne mit Text (Section mit Hintergrundbild, Klasse sp-stage) */
.sp-stage { position: relative; min-height: 80svh; color: #fff; }
.sp-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(11, 11, 13, .75), rgba(11, 11, 13, .25) 55%, rgba(11, 11, 13, .45));
	pointer-events: none;
}
.sp-stage > .uk-width-1-1, .sp-stage > .uk-container { position: relative; z-index: 2; }
.sp-stage h2 { color: #fff; }
/* Punkte unter dem Videotext: Grid mit sp-punkte, Icon links vom Titel, Zeile mittig */
.sp-punkte .uk-grid { justify-content: center; }
.sp-punkte .el-item > .uk-grid { justify-content: center; }
.sp-punkte .el-title { margin: 0 !important; font-weight: 600; font-size: 1.15rem; }
.sp-punkte .el-image { color: #fff; }

/* Großer mittiger Satz aus dem Prototyp (dort .tx__text). Trägt sp-wortfarbe die Färbung, sp-statement nur den Satz */
.sp-wortfarbe, .sp-statement {
	max-width: 32ch;
	margin-inline: auto;
	text-align: center;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.55rem, 3vw, 2.7rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.sp-wortfarbe p, .sp-statement p { margin: 0; font: inherit; letter-spacing: inherit; }
.sp-wortfarbe p + p, .sp-statement p + p { margin-top: .6em; }

/* Wortfärbung: Klasse sp-wortfarbe auf einem Text- oder Headline-Element, die Wörter färben sich beim Scrollen von Grau in die Textfarbe (custom.js) */
.sp-wortfarbe { --sp-wort-grau: #c9ccd1; }
.uk-light .sp-wortfarbe { --sp-wort-grau: #55595f; }
.sp-wortfarbe .sp-wort { transition: color 140ms linear; }
.sp-wortfarbe.is-wortfarbe .sp-wort { color: color-mix(in srgb, currentColor calc(var(--w, 0) * 100%), var(--sp-wort-grau)); }
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.sp-wortfarbe.is-wortfarbe .sp-wort { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-wortfarbe.is-wortfarbe .sp-wort { color: inherit; transition: none; }
}

.sp-statement .sp-akzent { color: var(--sp-rot); }

/* FAQ: dunkler Rahmen mit Rundung oben, darin weiße Karte, Accordion-Element mit Klasse sp-faq */
.sp-faqwrap {
	background: var(--sp-night);
	border-radius: 56px 56px 0 0;
	padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 3vw, 50px) 0 !important;
}
.sp-faq {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(1.75rem, 5vw, 4.5rem);
	border-radius: var(--sp-radius-card) var(--sp-radius-card) 0 0;
	background: #fff;
	color: var(--sp-ink);
}
.sp-faq h2 { color: var(--sp-ink); }
.sp-faq p { color: var(--sp-ink-soft); }
.sp-faq .uk-accordion > li { margin: 0; border-top: 1px solid var(--sp-line); }
.sp-faq .uk-accordion > li:last-child { border-bottom: 1px solid var(--sp-line); }
.sp-faq .uk-accordion-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.5rem 0;
	font-size: clamp(1rem, 1.3vw, 1.12rem);
	font-weight: 600;
	color: var(--sp-ink);
}
.sp-faq .uk-accordion-title::before { display: none; }
.sp-faq .uk-accordion-title::after {
	content: "+";
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--sp-ink);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 40px;
	text-align: center;
	transition: transform .35s ease, background .2s ease;
}
.sp-faq .uk-accordion-title:hover { color: var(--sp-rot); }
.sp-faq .uk-open > .uk-accordion-title::after { transform: rotate(45deg); background: var(--sp-rot); }
.sp-faq .uk-accordion-content { margin-top: 0; padding: 0 3.75rem 1.5rem 0; color: var(--sp-ink-soft); }

/* Händlersuche: dunkle Fläche, Karte links als Hintergrundbild, Text rechts */
.sp-karte { background: #0b0b0d; color: #fff; }
.sp-karte h2 { color: #fff; }
.sp-karte p { color: #cbced3; font-size: 1.05rem; }
.sp-karte .sp-karte__copy { max-width: 34rem; margin-left: auto; }

/* Partner-Logos: grau, farbig beim Überfahren */
.sp-partners img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.sp-partners img:hover { filter: none; opacity: 1; }

/* Fuß */
.sp-fuss { background: #000; color: #fff; }
.sp-fuss img { height: 76px; width: auto; }
.sp-fuss a { color: #fff; }
.sp-fuss a:hover { color: var(--sp-rot); }

/* Helfer */
.sp-akzent { color: var(--sp-rot); }
.sp-linie-rot { border-left: 4px solid var(--sp-rot); padding-left: 24px; }
.sp-radius { border-radius: 3px; overflow: hidden; }

/* Grid-Varianten aus inc/builder/grid.php */
.sp-grid--numbered { counter-reset: sp-item; }
.sp-grid--numbered > div { counter-increment: sp-item; }
.sp-grid--numbered .el-item { position: relative; padding-top: 56px; }
.sp-grid--numbered .el-item::before {
	content: counter(sp-item, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--sp-rot);
}
.sp-grid--service .el-item { border-top: 4px solid var(--sp-rot); background: var(--sp-bg-soft); border-radius: 6px; transition: transform .25s ease, box-shadow .25s ease; }
.sp-grid--service .el-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.sp-grid--partner .el-item img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.sp-grid--partner .el-item:hover img { filter: none; opacity: 1; }

@media (max-width: 959px) {
	.tm-header-mobile .uk-navbar-container { padding-inline: 1.1rem; }
	.sp-hero { min-height: 0; }
	.sp-hero__media, .sp-hero__media .uk-slideshow-items, .sp-hero__media .el-image { min-height: 56vw; }
	.sp-railwrap { margin-top: -24px; }
	.sp-rail { border-radius: 24px; }
	.sp-rail .uk-grid > * { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .09); }
	.sp-rail .uk-grid > :nth-child(-n + 2) { border-top: 0; }
	.sp-rail .uk-grid > :nth-child(2n) { border-left: 1px solid rgba(0, 0, 0, .09); }
	.sp-tabs.uk-subnav { grid-auto-flow: row; grid-auto-columns: auto; width: 100%; border-radius: 28px; }
	.sp-tabs.uk-subnav::after { display: none; }
	.sp-tabs.uk-subnav > .uk-active > a { background: var(--sp-rot); }
	.sp-panel .uk-switcher > .el-item > .uk-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-panel .uk-switcher .el-image { min-height: 0; aspect-ratio: 16 / 9; }
	.sp-faqwrap { border-radius: 28px 28px 0 0; }
}

@media (max-width: 700px) {
	.sp-wortfarbe, .sp-statement { max-width: none; font-size: clamp(1.35rem, 6vw, 1.7rem); line-height: 1.32; }
}

@media (prefers-reduced-motion: reduce) {
	.uk-button, .sp-rail .el-item > a, .sp-faq .uk-accordion-title::after, .sp-partners img { transition: none; }
	.sp-swap::before { display: none; }
	.sp-swap:hover, .sp-swap:focus-visible { background: var(--sp-fill); color: var(--sp-fill-ink); }
	.sp-swap__row + .sp-swap__row { display: none; }
	.sp-swap__row { transition: none; }
	.sp-showcase.is-docked .sp-kopf { opacity: 1; transform: none; }
	.sp-tabs.uk-subnav::after, .sp-tabs.uk-subnav > * > a { transition: none; }
	.sp-slidepunkte .uk-dotnav > * > * { transition: none; }
}