/**
 * Eigene Gutenberg-Blöcke – gemeinsames CSS (Website + Editor)
 * Farben/Radius/Typo kommen aus den Theme-Variablen (assets/css/tokens.css) (--color-*, --site-border-radius, --h*-…).
 */

/* ------------------------------------------------------------------------- */
/* Grundgerüst                                                               */
/* ------------------------------------------------------------------------- */

.rsSection {
	position: relative;
	color: var(--color-navy);
}
.editor-styles-wrapper .rsSection {
	max-width: none; /* Editor begrenzt Blöcke sonst auf die Inhaltsbreite */
}
/* Innerer Container: trägt zusätzlich die Klasse .l-section-h,
   damit rs_theme_the_content() unsere Sektionen erkennt und nicht erneut einpackt */
.rsSection > .rsContainer {
	position: relative;
	width: min(100% - 3rem, var(--site-content-width, 980px));
	max-width: none;
	margin-inline: auto;
}
/* Editor: normale Blöcke auf Inhaltsbreite (wie auf der Website) */
.editor-styles-wrapper .wp-block:not(.rsSection) {
	max-width: var(--site-content-width, 980px);
}
.textHighlight {
	color: var(--color-blue);
}

/* ------------------------------------------------------------------------- */
/* Farbfläche mit runden Ecken und optionalen Schrägen                       */
/* Schrägen je Ecke über --slant-tl / -tr / -br / -bl (Abstand zur Kante)    */
/* ------------------------------------------------------------------------- */

.rsPanel {
	--r: var(--site-border-radius, 15px);
	--slant-tl: 0px;
	--slant-tr: 0px;
	--slant-br: 0px;
	--slant-bl: 0px;
	position: absolute;
	inset: 0;
	/* Seiten-Einzug (--padding-inline) berücksichtigen */
	left: var(--padding-inline, 0px);
	right: var(--padding-inline, 0px);
	z-index: 0;
	pointer-events: none;
	clip-path: polygon(
		0 var(--slant-tl),
		100% var(--slant-tr),
		100% calc(100% - var(--slant-br)),
		0 calc(100% - var(--slant-bl))
	);
	border-radius: var(--r);
}
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
	.rsPanel {
		border-radius: 0;
		clip-path: shape(
			from var(--r) var(--slant-tl),
			line to calc(100% - var(--r)) var(--slant-tr),
			arc to 100% calc(var(--slant-tr) + var(--r)) of var(--r) cw,
			line to 100% calc(100% - var(--slant-br) - var(--r)),
			arc to calc(100% - var(--r)) calc(100% - var(--slant-br)) of var(--r) cw,
			line to var(--r) calc(100% - var(--slant-bl)),
			arc to 0 calc(100% - var(--slant-bl) - var(--r)) of var(--r) cw,
			line to 0 calc(var(--slant-tl) + var(--r)),
			arc to var(--r) var(--slant-tl) of var(--r) cw,
			close
		);
	}
}
.rsPanel--sand {
	background: var(--color-sand);
}
.rsPanel--navy {
	background: var(--color-navy);
}
.rsPanel--blue {
	background: var(--color-blue);
}
.rsSection > .rsContainer {
	z-index: 1;
}
.editor-styles-wrapper .rsSection > .rsContainer {
	width: min(100% - 3rem, var(--site-content-width, 980px));
}

/* ------------------------------------------------------------------------- */
/* Pfeil-Icon (aus dem Design, eingefärbt über currentColor)                 */
/* Grafik: --rs-arrow (Pfeil nach rechts), Richtung per Drehung              */
/* ------------------------------------------------------------------------- */

:root {
	--rs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 18.2 11.4'%3E%3Cpath d='M16.5 10.03 10.83 14.74l.49.58 6.79-5.67L11.32 4l-.49.58 5.68 4.7H0v.75z'/%3E%3C/svg%3E");
}
.rsArrow {
	display: inline-block;
	flex-shrink: 0;
	width: 1.125rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: var(--rs-arrow) center / contain no-repeat;
	mask: var(--rs-arrow) center / contain no-repeat;
}
.rsArrow--left {
	transform: rotate(180deg);
}
.rsArrow--up {
	transform: rotate(-90deg);
}
.rsArrow--down {
	transform: rotate(90deg);
}

/* ------------------------------------------------------------------------- */
/* WordPress-Buttons = Theme-Buttons                                         */
/* Aussehen: assets/css/tokens.css → Buttons (Website: w-btn us-btn-style_N,   */
/* Editor: dieselben Regeln, tokens.css wird auch im Editor geladen)        */
/* Pfeil: Seitenleiste → „Pfeil“                                             */
/* ------------------------------------------------------------------------- */

/* Website: Pfeil neben dem Text */
.w-btn.rsBtn--arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

/* Editor: Grundgerüst, das auf der Website .w-btn (tokens.css) liefert */
.editor-styles-wrapper .w-btn,
.editor-styles-wrapper .wp-block-button[class*="is-style-us-btn-"] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	position: relative;
	border-style: solid;
	border-width: var(--btn-border-width, 0px);
	text-align: center;
	text-decoration: none;
}
.editor-styles-wrapper .wp-block-button[class*="has-arrow-"] .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-button.has-arrow-left .wp-block-button__link::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 1.125rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: var(--rs-arrow) center / contain no-repeat;
	mask: var(--rs-arrow) center / contain no-repeat;
}
.editor-styles-wrapper .wp-block-button.has-arrow-left .wp-block-button__link::after {
	display: none;
}
.editor-styles-wrapper .wp-block-button.has-arrow-left .wp-block-button__link::before {
	transform: rotate(180deg);
}
.editor-styles-wrapper .wp-block-button.has-arrow-up .wp-block-button__link::after {
	transform: rotate(-90deg);
}
.editor-styles-wrapper .wp-block-button.has-arrow-down .wp-block-button__link::after {
	transform: rotate(90deg);
}

/* ------------------------------------------------------------------------- */
/* Hero                                                                      */
/* ------------------------------------------------------------------------- */

.rsHero {
	--slant: min(13vw, 10.5rem);
	padding: 3.25rem 0 var(--slant);
}
.rsHero .rsPanel {
	--slant-br: var(--slant);
}
.rsHero-content {
	max-width: 38rem;
}
.rsEyebrow {
	margin: 0 0 0.125rem;
	padding: 0.5625rem 0 0.5625rem 1rem;
	border-left: 5px solid var(--color-blue);
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsHero-title {
	margin: 0 0 1.5rem;
}
/* Ohne Kurztext: Headline tiefer setzen (laut XD-Unterseite „Lösungen“) */
.rsHero-title:first-child {
	margin-top: 3.125rem;
}
.rsHero-text {
	max-width: 32rem;
	margin: 0 0 1.75rem;
}
.rsHero .wp-block-buttons {
	gap: 1.75rem;
}

/* Kreise */
.rsHero-circles {
	position: absolute;
	top: 4.125rem; /* bisher 8.1875rem inkl. Header-Ausgleich von Impreza (65px) */
	right: -3.5rem;
	display: flex;
	flex-direction: column;
	width: 21.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rsCircle {
	--size: 14rem;
	/* Rollen: halbe Drehung = halber Umfang (π/2 × Durchmesser) */
	--roll: 0; /* 0 = an Ort und Stelle, 1 = hinausgerollt – setzt front.js beim Scrollen */
	--roll-distance: calc(var(--size) * 1.5708);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	width: var(--size);
	height: var(--size);
	margin: 0 0 -0.5rem;
	padding: 1.5rem;
	border-radius: 50%;
	text-align: center;
}
.rsCircle:nth-child(odd) {
	align-self: flex-end;
}
.rsCircle--blue {
	background: var(--color-blue);
	color: #fff;
}
.rsCircle--lime {
	background: var(--color-lime);
	color: var(--color-navy);
}
.rsCircle--coral {
	background: var(--color-coral);
	color: #fff;
}
.rsCircle-icon {
	display: block;
	width: 7rem;
	height: 5.75rem;
	padding: 0;
	border: 0;
	background: currentColor;
	-webkit-mask: var(--icon) center bottom / contain no-repeat;
	mask: var(--icon) center bottom / contain no-repeat;
}
.rsCircle-iconButton {
	cursor: pointer;
}
.rsCircle-text {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25rem;
}

/* Scroll-Button auf der Schräge */
.rsHero-scroll {
	position: absolute;
	left: 50%;
	bottom: calc(var(--slant) / 2 - 1.9375rem);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.875rem;
	height: 3.875rem;
	border-radius: 50%;
	background: var(--color-blue);
	color: #fff;
	translate: -50% 0; /* nicht transform – das setzt die Einblend-Animation zurück */
	transition: background-color .3s;
}
.no-touch .rsHero-scroll:hover {
	background-color: var(--color-navy);
	color: #fff;
}

@media (max-width: 1200px) {
	.rsHero-circles {
		right: 0;
		width: 18rem;
	}
	.rsCircle {
		--size: 11.5rem;
		gap: 0.75rem;
	}
	.rsCircle-icon {
		width: 5.5rem;
		height: 4.25rem;
	}
	.rsHero-content {
		max-width: calc(100% - 19rem);
	}
}
@media (max-width: 1024px) {
	.rsHero-content {
		max-width: none;
	}
	.rsHero-circles {
		position: static;
		width: min(100%, 19rem);
		margin: 3rem auto 0;
	}
}
@media (max-width: 600px) {
	.rsHero {
		padding-top: 2rem;
	}
	.rsHero .wp-block-buttons {
		gap: 1rem;
	}
}

/* ------------------------------------------------------------------------- */
/* Zitat groß                                                                */
/* ------------------------------------------------------------------------- */

.rsQuote {
	padding: 3.5rem 0 2rem;
}
.rsQuote-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	line-height: inherit;
}
.rsQuote-quote::before {
	display: none;
}
.rsQuote-text {
	max-width: 40rem;
	margin: 0;
	font-family: var(--h2-font-family, inherit);
	font-size: var(--h2-font-size, 3.75rem);
	font-weight: var(--h2-font-weight, 800);
	line-height: var(--h2-line-height, 4.0625rem);
	letter-spacing: var(--h2-letter-spacing, -0.05em);
	color: var(--color-navy);
}
.rsQuote-author {
	display: inline;
	margin-left: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
}

/* ------------------------------------------------------------------------- */
/* Animationen (Einblenden beim Laden/Hereinscrollen)                        */
/* data-rs-anim="up" | "right" | "fade", Verzögerung per --rs-delay          */
/* Aktiv nur mit JS (html.rsAnimate) und ohne „Bewegung reduzieren“           */
/* ------------------------------------------------------------------------- */

.rsHero,
.rsQuote {
	overflow-x: clip; /* hereinfahrende Elemente erzeugen keinen Scrollbalken */
}
@media (prefers-reduced-motion: no-preference) {
	.rsAnimate [data-rs-anim] {
		opacity: 0;
		transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: var(--rs-delay, 0s);
	}
	.rsAnimate [data-rs-anim="up"] {
		transform: translateY(1.5rem);
	}
	.rsAnimate [data-rs-anim="right"] {
		transform: translateX(5rem);
		transition-duration: 0.6s, 0.9s;
	}
	/* Hero-Kreise: von rechts hereinrollen, gegen den Uhrzeigersinn (180° → 0°) */
	.rsAnimate [data-rs-anim="roll"] {
		transform: translateX(var(--roll-distance, 22rem)) rotate(180deg);
		transition-duration: 0.6s, 1.2s;
		transition-timing-function: ease, cubic-bezier(0.25, 0.8, 0.3, 1);
	}
	/* Beim Runterscrollen hinausrollen, im Uhrzeigersinn (--roll aus front.js).
	   Eigene Eigenschaften translate/rotate – unabhängig vom transform der Einroll-Animation */
	.rsCircle {
		translate: calc(var(--roll) * var(--roll-distance)) 0;
		rotate: calc(var(--roll) * 180deg);
	}
	/* reiner Auslöser für verschachtelte Animationen, selbst ohne Effekt */
	.rsAnimate [data-rs-anim="group"] {
		opacity: 1;
		transform: none;
	}
	.rsAnimate [data-rs-anim].is-visible {
		opacity: 1;
		transform: none;
	}
	/* Safari schneidet während der Animation den unteren Button-Rahmen ab (liegt genau an der Kante
	   der animierten Ebene) – etwas Luft rundherum, Layout bleibt durch negativen Margin gleich */
	.rsAnimate .wp-block-buttons[data-rs-anim],
	.rsAnimate [data-rs-anim] > .wp-block-buttons {
		padding-block: 2px;
		margin-block: -2px;
	}
	/* Linie (is-style-rs-line) setzt opacity: 1 – hier wieder ausblenden, sonst erscheint sie vor dem Rest */
	.rsAnimate .wp-block-separator[data-rs-anim]:not(.is-visible) {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
	.rsAnimate [data-rs-anim="up"] {
		transform: translateY(1rem);
	}
	.rsAnimate [data-rs-anim="right"] {
		transform: translateX(2.5rem);
	}
}

/* ========================================================================= */
/* Weitere Bereiche                                                          */
/* ========================================================================= */

/* ------------------------------------------------------------------------- */
/* Gemeinsame Text-Bausteine                                                 */
/* ------------------------------------------------------------------------- */

.textHighlight--lime {
	color: var(--color-lime);
}
.textHighlight--coral {
	color: var(--color-coral);
}
.rsHeading {
	margin: 0 0 2rem;
}
.rsLead {
	margin: 0 0 1.5rem;
	font-size: 1.5625rem;
	line-height: 1.875rem;
}
.rsLead--bar {
	max-width: 52rem;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 5px solid var(--color-blue);
}
.rsLead--line::before {
	content: '';
	display: block;
	width: 3.75rem;
	height: 5px;
	margin-bottom: 1.5rem;
	background: var(--color-blue);
}
.rsText {
	max-width: 56rem;
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsButtons .wp-block-buttons {
	gap: 1.75rem;
}
.rsButtons:empty {
	display: none;
}

/* Hinweis mit „!“ */
.rsNote {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 2rem;
}
.rsNote-icon {
	flex-shrink: 0;
	width: 4.375rem;
	height: 3.875rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 62'%3E%3Cpath fill='%23D6FF26' d='M30.7 4.5c1.9-3.3 6.7-3.3 8.6 0l29 50.1c1.9 3.3-.5 7.4-4.3 7.4H6c-3.8 0-6.2-4.1-4.3-7.4z'/%3E%3Crect x='32.5' y='20' width='5' height='22' rx='2.5' fill='%230B1D33'/%3E%3Ccircle cx='35' cy='50' r='3.2' fill='%230B1D33'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Editor: leerer Hinweis → Symbol blass (wird auf der Website nicht ausgegeben) */
.rsNote.is-empty .rsNote-icon {
	opacity: 0.3;
}
.rsNote-text {
	max-width: 34rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.25rem;
}

/* Dunkle Farbflächen: helle Schrift, Lime-Balken */
.rsSection--dark {
	color: #fff;
}
/* Tastatur-Fokus: blauer Rahmen wäre auf Blau/Dunkelblau bzw. dunklem Hintergrundbild unsichtbar */
.rsSection--dark,
.rsHeroImage--light {
	--focus-color: var(--color-lime);
}
.rsSection--dark h2,
.rsSection--dark h3,
.rsSection--dark a:not(.w-btn),
/* Editor: Überschriften werden gefärbt mit „body.editor-styles-wrapper h2 { color: … }“ – daher spezifischer */
body.editor-styles-wrapper .rsSection--dark h2,
body.editor-styles-wrapper .rsSection--dark h3,
body.editor-styles-wrapper .rsSection--dark a:not(.w-btn) {
	color: #fff;
}
.rsSection--dark .rsLead--bar {
	border-left-color: var(--color-lime);
}
/* Blauer Button auf blauer Fläche: weißer Rahmen, sonst hebt er sich nicht ab */
.rsPanel--blue ~ .rsContainer .us-btn-style_1,
.rsPanel--blue ~ .rsContainer .is-style-us-btn-1 .wp-block-button__link {
	--btn-border-color: #fff;
}

/* Bis zum Rand der Fläche hinauslaufende Elemente (Liste, Karten) */
.rsBleedRight,
.rsTextList .rsIconList,
.rsPillars .rsCards,
.rsAnswers .rsCards {
	/* Abstand Container-Rand → Flächenrand (Container = min(Sektion - 3rem, Inhaltsbreite)).
	   Sektionsbreite per Container-Query-Einheit (100cqw = Inhaltsbreite der Sektion, ohne Seiten-Einzug).
	   Nicht 100vw: das zählt einen sichtbaren Scrollbalken (Windows, Mac mit Maus) mit → Überstand. */
	--rs-section-width: 100cqw;
	margin-right: calc((min(var(--rs-section-width) - 3rem, var(--site-content-width, 980px)) - var(--rs-section-width)) / 2);
}
.rsTextList,
.rsPillars,
.rsAnswers {
	overflow-x: clip;
	container-type: inline-size; /* Bezug für 100cqw */
}
/* Säulen-Karten, Antworten-Slider: auch links bis zum Rahmen; erste Karte beginnt ganz links (1.5rem Abstand zum Flächenrand) */
.rsPillars .rsCards,
.rsAnswers .rsCards:not(.rsCards--editor) {
	--rs-bleed: calc((var(--rs-section-width) - min(var(--rs-section-width) - 3rem, var(--site-content-width, 980px))) / 2);
	margin-left: calc(-1 * var(--rs-bleed));
	padding-left: 1.5rem;
	scroll-padding-left: 1.5rem;
}

/* ------------------------------------------------------------------------- */
/* Farbfläche: Abstände und Schrägen                                         */
/* ------------------------------------------------------------------------- */

.rsSection--panel {
	--slant: min(10vw, 8rem);
	padding: 6rem 0 5rem;
}
.rsSection--panel.rsSection--slantTop {
	padding-top: calc(var(--slant) + 4rem);
}
.rsSection--panel.rsSection--slantBottom {
	padding-bottom: calc(var(--slant) + 3.5rem);
}
/* Zwei Farbflächen direkt hintereinander (z. B. ohne Logo-Leiste dazwischen) */
.rsSection--panel + .rsSection--panel {
	margin-top: 3rem;
}
.rsPanel--tl {
	--slant-tl: var(--slant);
}
.rsPanel--tr {
	--slant-tr: var(--slant);
}
.rsPanel--br {
	--slant-br: var(--slant);
}
.rsPanel--bl {
	--slant-bl: var(--slant);
}

/* Scroll-Button auf der Schräge (Kulturkostenrechner; Hero nutzt dieselbe Klasse) */
.rsScroll {
	position: absolute;
	left: 50%;
	bottom: calc(var(--slant) / 2 - 1.9375rem);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.875rem;
	height: 3.875rem;
	border-radius: 50%;
	background: var(--color-blue);
	color: #fff !important;
	translate: -50% 0;
	transition: background-color .3s;
}
.rsScroll--coral {
	background-color: var(--color-coral);
}
.no-touch .rsScroll:hover {
	background-color: var(--color-blue);
}
.no-touch .rsHero .rsScroll:hover {
	background-color: var(--color-navy);
}
/* Safari schneidet den Kreis beim/nach dem Einblenden an der Kante der animierten Ebene oben/unten ab
   (wie bei den Button-Rahmen) → 3px durchsichtiger Rand, Kreis per background-clip innen.
   Größe bleibt (content-box), Lage bleibt (margin-bottom gleicht den Rand unten aus; seitlich gleicht translate -50% aus) */
.rsScroll {
	box-sizing: content-box;
	padding: 3px;
	margin-bottom: -3px;
	background-clip: content-box;
}

/* ------------------------------------------------------------------------- */
/* Text + Liste                                                              */
/* ------------------------------------------------------------------------- */

.rsTextList {
	padding: 1.5rem 0 5rem;
}
.rsTextList-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
.rsTextList .rsLead {
	max-width: 24.5rem;
}
.rsIconList {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	list-style: none;
}
.rsIconList-item {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	margin: 0;
	padding: 1.5rem 0;
	border-bottom: 2px solid rgba(11, 29, 51, 0.2);
	font-size: 1.5625rem;
	font-weight: 800;
	line-height: 1.75rem;
	letter-spacing: -0.05em;
}
.rsIconList-item:first-child {
	border-top: 2px solid rgba(11, 29, 51, 0.2);
}
.rsIconList-item > span:first-of-type {
	max-width: 29rem;
}
.rsIconList-item::before {
	content: '';
	flex-shrink: 0;
	width: 2.9375rem;
	height: 2.9375rem;
	border-radius: 50%;
}
.rsIconList--minus .rsIconList-item::before {
	background: linear-gradient(#fff, #fff) center / 1.25rem 0.3125rem no-repeat, var(--color-coral);
}
.rsIconList--check .rsIconList-item::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.4rem no-repeat, var(--color-blue);
}

/* ------------------------------------------------------------------------- */
/* Überschrift-Bereich                                                       */
/* ------------------------------------------------------------------------- */

.rsHeadingSection:not(.rsSection--panel) {
	padding: 5rem 0;
}
.rsHeadingSection .rsHeading {
	max-width: 60rem;
}

/* ------------------------------------------------------------------------- */
/* Logo-Leiste (endloses Laufband)                                           */
/* ------------------------------------------------------------------------- */

.rsLogos {
	padding: 4rem 0;
	overflow: hidden;
	/* sichtbar nur innerhalb des Seiten-Einzugs (bündig mit den Farbflächen) */
	clip-path: inset(0 var(--padding-inline, 0px));
}
.rsSection > .rsLogos-viewport {
	display: flex;
	width: max-content;
	max-width: none;
	margin: 0;
	animation: rsMarquee var(--rs-marquee, 40s) linear infinite;
}
.rsLogos:hover .rsLogos-viewport {
	animation-play-state: paused;
}
.rsLogos-list {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 3.75rem;
	margin: 0;
	padding: 0 3.75rem 0 0;
	list-style: none;
}
.rsLogos-list li {
	margin: 0;
}
.rsLogos-list img {
	display: block;
	max-width: none;
	object-fit: contain;
	/* Breite/Höhe je Logo aus logos/render.php (gleiche optische Fläche) */
}
.rsLogos-list--editor img {
	width: auto;
	max-width: 12rem;
	height: 3.5rem;
}
.rsLogos-list--editor {
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}
.rsLogos-actions {
	margin-top: 1.5rem;
	text-align: center;
}
@keyframes rsMarquee {
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.rsSection > .rsLogos-viewport {
		width: auto;
		animation: none;
		justify-content: center;
	}
	.rsLogos-list {
		flex: 1 1 100%;
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 2rem;
		padding: 0 1.5rem;
	}
	.rsLogos-list[aria-hidden="true"] {
		display: none;
	}
}

/* ------------------------------------------------------------------------- */
/* Kulturkostenrechner                                                       */
/* ------------------------------------------------------------------------- */

.rsCalc.rsSection--panel {
	padding-top: 7.75rem;
}
.rsCalc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
	gap: 2rem;
	align-items: center;
}
.rsCalc-intro .rsText {
	max-width: 27rem;
}
.rsCalc-card {
	margin: 0;
	padding: 2.25rem 1.25rem 1.5rem;
	border-radius: 1.875rem;
	background: var(--color-blue);
	color: #fff;
}
.rsCalc-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0.75rem 1.5rem;
	padding-right: 2rem; /* Platz für das „i“ */
}
.rsSection .rsCalc-title {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 2.1875rem;
	letter-spacing: -0.05em;
	color: #fff;
}
.rsCalc-card {
	position: relative;
}
.rsCalc-info {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5625rem;
	height: 1.5625rem;
	border: 1px solid currentColor;
	border-radius: 50%;
}
.rsCalc-info::before {
	content: '';
	width: 0.3rem;
	height: 0.8rem;
	background: currentColor;
	-webkit-mask: url("../../img/info-i.svg") center / contain no-repeat; /* „i“ aus dem XD (Child-Theme: img/info-i.svg) */
	mask: url("../../img/info-i.svg") center / contain no-repeat;
}
.rsCalc-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.125rem 1.5rem;
}
/* Felder einer Zeile unten bündig, auch wenn eine Beschriftung zweizeilig ist */
.rsCalc-field {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.rsCalc-label {
	display: block;
	margin: 0 0 0.375rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #fff;
}
.rsCalc-card .rsCalc-input {
	display: block;
	width: 100%;
	height: 3rem;
	margin: 0;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 999em;
	background: #fff;
	box-shadow: none;
	font-size: 1rem;
	line-height: 3rem;
	color: var(--color-navy);
}
.rsCalc-card .rsCalc-input::placeholder {
	color: var(--color-navy);
	opacity: 0.5;
}
.rsCalc-card .w-btn {
	margin: 1.75rem 0 0;
}
.rsCalc-notes {
	margin: 1.5rem 0.5rem 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* Fehlermeldung im Formular (Startseite) */
.rsCalc-error {
	margin: 1.25rem 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25rem;
	color: var(--color-lime);
}
.rsCalc-card .rsCalc-input:focus-visible {
	outline: 3px solid var(--color-lime);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------- */
/* Kulturkostenrechner – Ergebnis                                            */
/* (Gestaltung nach der freigegebenen Vorschau kulturkostenrechner-unterseite.html) */
/* ------------------------------------------------------------------------- */

.rsCalcResult {
	padding: 1.5rem 0 4rem;
}
.rsCalcResult .rsContainer {
	display: grid;
	gap: 1.5rem;
}
.rsCalcResult-inputs,
.rsCalcResult-output,
.rsCalcResult-mail {
	margin: 0;
	padding: clamp(1.375rem, 3vw, 2.375rem);
	border-radius: 1.5rem;
}
.rsSection .rsCalcResult-title,
.rsSection .rsCalcResult-mailTitle {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5625rem, 2.7vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: inherit;
}
.rsCalcResult-kicker {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-blue);
}

/* Eingaben (blau) */
.rsCalcResult-inputs {
	background: var(--color-blue);
	color: #fff;
}
.rsCalcResult-intro {
	margin: 0 0 1.5rem;
	font-size: 1.125rem;
	line-height: 1.6;
}
.rsCalcResult-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 2.125rem;
}
.rsCalcResult-field label {
	display: block;
	font-size: 1rem;
	font-weight: 600;
}
.rsCalcResult-field small {
	font-size: 0.9375rem;
	font-weight: 400;
	opacity: 0.9;
}
.rsCalcResult-field input,
.rsCalcResult-fakeInput {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin: 0.4375rem 0 0;
	padding: 0.8125rem 1.0625rem;
	border: 0;
	border-radius: 999em;
	background: #fff;
	box-shadow: none;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--color-navy);
}
.rsCalcResult-field input::placeholder {
	color: var(--color-navy);
	opacity: 0.5;
}
.rsCalcResult-field input:focus-visible {
	outline: 3px solid var(--color-lime);
	outline-offset: 2px;
}
.rsCalcResult-error {
	margin: 1.25rem 0 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-lime);
}

/* Ergebnis (dunkel) */
.rsCalcResult-output {
	background: var(--color-navy);
	color: #fff;
}
.rsCalcResult-output .rsCalcResult-kicker {
	color: var(--color-lime);
}
.rsCalcResult-total {
	margin: 1.125rem 0 0.75rem;
	font-size: clamp(2.625rem, 4.9vw, 4.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.055em;
	font-variant-numeric: tabular-nums;
	color: var(--color-coral);
}
.rsCalcResult-perPerson {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
}
.rsCalcResult-perPerson strong {
	font-size: 1.1875rem;
}
.rsCalcResult-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.375rem;
	padding: 1rem 0;
	border-top: 1px solid #617081;
	font-size: 1.125rem;
	line-height: 1.5;
}
.rsCalcResult-row strong {
	font-size: 1.3125rem;
	white-space: nowrap;
	text-align: right;
}
.rsCalcResult-note {
	margin: 1.1875rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #e3e8ee;
}
.rsCalcResult-note:empty {
	display: none;
}
/* Ohne gültige Zahlen: Ergebnis gedämpft */
.rsCalcResult.is-empty .rsCalcResult-total,
.rsCalcResult.is-empty .rsCalcResult-row strong,
.rsCalcResult.is-empty .rsCalcResult-perPerson {
	opacity: 0.4;
}

/* PDF-Versand (Karte) */
.rsCalcResult-mail {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 3rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--color-sand);
}
.rsCalcResult-mailIntro .rsCalcResult-kicker {
	font-size: 0.8125rem;
}
.rsSection .rsCalcResult-mailTitle {
	margin-bottom: 1.125rem;
	font-size: clamp(1.8125rem, 3vw, 2.625rem);
}
.rsCalcResult-mailIntro p:not(.rsCalcResult-kicker) {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
}
.rsCalcResult-mailLabel {
	display: block;
	font-size: 1rem;
	font-weight: 700;
}
.rsCalcResult-email {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0.5rem 0 0;
	padding: 0.8125rem 1.0625rem;
	border: 1px solid #b9c0c7;
	border-radius: 999em;
	background: #fff;
	box-shadow: none;
	font: inherit;
	font-size: 1rem;
	color: var(--color-navy);
}
span.rsCalcResult-email {
	color: #8a929b;
}
.rsCalcResult-email:focus-visible {
	outline: 3px solid var(--color-blue);
	outline-offset: 2px;
}
.rsCalcResult-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 1.375rem 0 0;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
}
.rsCalcResult-consent input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.1875rem 0 0;
	accent-color: var(--color-blue);
}
.rsCalcResult-privacy {
	margin: 1rem 0 0;
	font-size: 1rem;
	line-height: 1.55;
	color: #475361;
}
.rsCalcResult-privacy a {
	color: var(--color-blue);
	text-decoration: underline;
}
.rsCalcResult-mailForm .w-btn {
	margin-top: 1.25rem;
}
.rsCalcResult-mailForm .w-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}
.rsCalcResult-status {
	margin: 1rem 0 0;
	font-size: 1rem;
	font-weight: 700;
}
.rsCalcResult-status:empty {
	display: none;
}
.rsCalcResult-status.is-error {
	color: #c4321f;
}
/* Honeypot */
.rsCalcResult-trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

@media (max-width: 1024px) {
	.rsCalcResult-mail {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}
@media (max-width: 600px) {
	.rsCalcResult-fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
	.rsCalcResult-row {
		display: block;
	}
	.rsCalcResult-row strong {
		display: block;
		margin-top: 0.1875rem;
		text-align: left;
	}
}

/* ------------------------------------------------------------------------- */
/* Newsletter-Anmeldung                                                      */
/* ------------------------------------------------------------------------- */

.rsNewsletter {
	padding: 3rem 0 5rem;
}
.rsNewsletter.rsSection--panel {
	padding: 5rem 0;
}
.rsNewsletter-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem 3.5rem;
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border-radius: 1.875rem;
	background: var(--color-blue);
	color: #fff;
}
.rsSection .rsNewsletter-title {
	overflow-wrap: break-word;
	-webkit-hyphens: manual;
	hyphens: manual;
	margin: 0 0 1.25rem;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: #fff;
}
.rsNewsletter-text {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
}
.rsNewsletter-label {
	display: block;
	margin: 0 0 0.4375rem 0.5rem;
	font-size: 1rem;
	font-weight: 600;
}
.rsNewsletter-email {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.8125rem 1.25rem;
	border: 0;
	border-radius: 999em;
	background: #fff;
	box-shadow: none;
	font: inherit;
	font-size: 1.0625rem;
	color: var(--color-navy);
}
span.rsNewsletter-email {
	color: #8a929b;
}
.rsNewsletter-email::placeholder {
	color: var(--color-navy);
	opacity: 0.5;
}
.rsNewsletter-email:focus-visible {
	outline: 3px solid var(--color-lime);
	outline-offset: 2px;
}
.rsNewsletter-form .w-btn {
	margin-top: 1.25rem;
}
.rsNewsletter-form .w-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}
.rsNewsletter-status {
	margin: 1rem 0 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
.rsNewsletter-status:empty {
	display: none;
}
.rsNewsletter-status.is-error {
	color: var(--color-lime);
}
.rsNewsletter-privacy {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.9;
}
.rsNewsletter-privacy a {
	color: #fff;
	text-decoration: underline;
}
.rsNewsletter-editorNote {
	margin: 1.25rem 0 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}
.rsNewsletter-trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
@media (max-width: 1024px) {
	.rsNewsletter-card {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------------- */
/* Kontakt                                                                   */
/* ------------------------------------------------------------------------- */

.rsContact {
	padding: 4rem 0 5rem;
}
.rsContact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 3rem 4.5rem;
	align-items: start;
}
/* Überschrift kleiner als die normale H2 (steht nur in der halben Breite) */
.rsSection .rsContact-title {
	margin-bottom: 2rem;
	font-size: clamp(2.125rem, 3.6vw, 2.875rem);
	line-height: 1.08;
}
.rsContact-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
}
.rsContact-field--company,
.rsContact-field--position,
.rsContact-field--email,
.rsContact-field--message {
	grid-column: 1 / -1;
}
.rsContact-field label {
	display: block;
	margin: 0 0 0.375rem 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
}
.rsContact-field input,
.rsContact-field textarea,
.rsContact-fakeInput {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.8125rem 1.25rem;
	border: 1px solid #b9c0c7;
	border-radius: 999em;
	background: #fff;
	box-shadow: none;
	font: inherit;
	font-size: 1rem;
	color: var(--color-navy);
}
.rsContact-field textarea,
.rsContact-fakeInput--textarea {
	min-height: 9rem;
	border-radius: 1.25rem;
	resize: vertical;
}
.rsContact-field input:focus-visible,
.rsContact-field textarea:focus-visible {
	outline: 3px solid var(--color-blue);
	outline-offset: 2px;
}
.rsContact-field.is-invalid input,
.rsContact-field.is-invalid textarea {
	border-color: var(--color-coral);
	box-shadow: 0 0 0 1px var(--color-coral);
}
.rsContact-privacy {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
}
.rsContact-privacy a {
	color: inherit;
	text-decoration: underline;
}
.rsContact-form .w-btn {
	margin-top: 1.25rem;
}
.rsContact-form .w-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}
.rsContact-status {
	margin: 1rem 0 0;
	font-weight: 700;
}
.rsContact-status:empty {
	display: none;
}
.rsContact-status.is-error {
	color: #c4321f;
}
.rsContact-trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Rechte Spalte: Telefon, E-Mail, Adressen, Karte */
.rsContact-aside {
	padding-top: 0.5rem;
}
.rsContact-quick {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}
.rsContact-quick li {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}
.rsContact-quick a {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	color: var(--color-navy);
}
.no-touch .rsContact-quick a:hover {
	color: var(--color-blue);
}
.rsContact-icon {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--color-blue);
	position: relative;
}
.rsContact-icon::before {
	content: '';
	position: absolute;
	inset: 0.7rem;
	background: #fff;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.rsContact-icon--phone {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.rsContact-icon--mail {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='1.5'/%3E%3Cpath d='m2.5 5.5 9.5 8 9.5-8M2.5 18.5l7-6.5M21.5 18.5l-7-6.5'/%3E%3C/svg%3E");
}
.rsSection .rsContact-addressTitle {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.2;
}
.rsContact-addresses {
	margin: 0 0 2rem;
	font-size: 1rem;
	line-height: 1.6;
}
.rsContact-map {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--site-border-radius, 15px);
	background: var(--color-sand);
}
.rsContact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.rsContact-map[hidden] {
	display: none;
}
/* Reiter über der Karte (bei mehreren Karten) */
.rsContact-mapTabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}
.rsContact-mapTab {
	padding: 0.375rem 1rem;
	border: 1px solid var(--color-navy);
	border-radius: 999em;
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-navy);
	cursor: pointer;
	transition: background-color .3s, color .3s;
}
.rsContact-mapTab[aria-selected="true"],
.no-touch .rsContact-mapTab:hover {
	background: var(--color-navy);
	color: #fff;
}

@media (max-width: 1024px) {
	.rsContact-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 600px) {
	.rsContact-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------------- */
/* Mobil: Abstände zum Rand                                                  */
/* Bereiche ohne Farbfläche bündig mit Logo und Footer (20px vom Rand);      */
/* Karten (Newsletter, Kulturkostenrechner – Ergebnis) beginnen dadurch wie   */
/* die Farbflächen bei 20px, ihr Text bei 44px wie in allen Flächen.          */
/* Der Hero hat immer eine Fläche (ohne Klasse rsSection--panel).             */
/* ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.rsSection:not(.rsSection--panel):not(.rsHero) > .rsContainer {
		width: 100%;
	}
	.rsNewsletter-card {
		padding: 1.75rem 1.5rem;
	}
	.rsCalcResult-inputs,
	.rsCalcResult-output,
	.rsCalcResult-mail {
		padding: 1.5rem;
	}
	.rsArea:not(.rsSection--panel) .is-style-rs-line {
		--rs-bleed: 0px;
	}
}

/* ------------------------------------------------------------------------- */
/* Überschrift + Text                                                        */
/* ------------------------------------------------------------------------- */

.rsTwoCol {
	padding: 5rem 0 4rem;
}
.rsTwoCol-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
.rsTwoCol .rsHeading {
	margin: 0;
}
.rsTwoCol-text {
	padding-top: 1.5rem;
}
.rsTwoCol .rsLead {
	max-width: 28.5rem;
}

/* ------------------------------------------------------------------------- */
/* Slider (Säulen-Karten, Referenzen)                                        */
/* ------------------------------------------------------------------------- */

.rsSlider-track {
	display: flex;
	gap: 1.75rem;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.rsSlider-track::-webkit-scrollbar {
	display: none;
}
.rsSlider-track > * {
	flex-shrink: 0;
	scroll-snap-align: start;
}
/* Safari schneidet die Kreise beim Einblenden an der Kante der animierten Ebene ab (wie Button-Rahmen)
   → 3px Luft oben/unten, Abstände um die Luft verringert: Position bleibt gleich */
.rsSlider-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin-top: calc(3rem - 3px);
	margin-bottom: -3px;
	padding-block: 3px;
}
.rsSlider-prev,
.rsSlider-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4375rem;
	height: 3.4375rem;
	padding: 0;
	border: 1px solid var(--color-navy);
	border-radius: 50%;
	background: transparent;
	color: var(--color-navy);
	cursor: pointer;
	/* Ohne opacity: ein Übergang der Deckkraft (disabled beim Klicken) macht den Pfeil in Safari zur eigenen
	   Ebene, die Oberkante wird dabei abgeschnitten */
	transition: background-color .3s, border-color .3s, color .3s;
}
/* Beide Pfeile gleich: Outline, Hover blau, am Anfang/Ende blass (nicht anklickbar) */
.no-touch .rsSlider-prev:not(:disabled):hover,
.no-touch .rsSlider-next:not(:disabled):hover {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: #fff;
}
.rsSlider-prev:disabled,
.rsSlider-next:disabled {
	opacity: 0.35;
	cursor: default;
}
.rsSlider-nav .rsButtons {
	margin-left: 2rem;
}

/* ------------------------------------------------------------------------- */
/* Säulen-Karten                                                             */
/* ------------------------------------------------------------------------- */

.rsPillars .rsLead--bar,
.rsAnswers .rsLead--bar {
	margin-bottom: 3rem;
}
.rsCard {
	--card: var(--color-blue);
	width: 25.5rem;
	min-height: 8.9375rem;
	margin: 0;
	padding: 1.75rem 2.25rem;
	border: 1px solid var(--card);
	border-radius: 1.25rem;
	background: #fff;
	color: var(--color-navy);
}
.rsCard--yellow { --card: var(--color-yellow); }
.rsCard--violet { --card: var(--color-violet); }
.rsCard--green { --card: var(--color-green); }
.rsCard--turquoise { --card: var(--color-turquoise); }
.rsCard--pink { --card: var(--color-pink); }
.rsCard--blue { --card: var(--color-blue); }
.rsCard--coral { --card: var(--color-coral); }
.rsCard--navy { --card: var(--color-navy); }
.rsSection .rsCard-title {
	margin: 0 0 0.5rem;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 2.25rem;
	letter-spacing: -0.05em;
	color: var(--card);
}
.rsCard-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsCards--editor {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.75rem;
	margin-bottom: 1.5rem;
}
.rsCards--editor .rsCard {
	width: auto;
}
/* Pfeile auf dunklen Flächen */
.rsSection--dark .rsSlider-prev,
.rsSection--dark .rsSlider-next {
	border-color: #fff;
	color: #fff;
}

/* ------------------------------------------------------------------------- */
/* Antworten-Slider (Slider + Karten von oben, nur Abweichungen laut Design) */
/* ------------------------------------------------------------------------- */

.rsAnswers:not(.rsSection--panel) {
	padding-block: 3.125rem;
}
.rsAnswers .rsCards:not(.rsCards--editor) {
	gap: 1.0625rem;
}
.rsAnswers .rsCard {
	padding: 2rem calc(2.25rem - 2px); /* Rahmen 2px statt 1px: Textbreite wie im Design */
	border-width: 2px;
}
.rsAnswer-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.875rem;
	height: 3.875rem;
	margin-bottom: 0.625rem;
	border-radius: 50%;
	background: var(--color-blue);
	color: #fff;
	font-size: 1.875rem;
	font-weight: 800;
	letter-spacing: -0.05em;
}
/* Nummern: Blau, Lime, Koralle, dann wieder von vorne */
.rsAnswers .rsCard:nth-child(3n+2) .rsAnswer-number {
	background: var(--color-lime);
	color: var(--color-navy);
}
.rsAnswers .rsCard:nth-child(3n) .rsAnswer-number {
	background: var(--color-coral);
}
/* Titel steht nicht an erster Stelle → Theme-Abstand der h3 hier aufheben */
.rsSection.rsAnswers .rsCard-title,
body.editor-styles-wrapper .rsSection.rsAnswers .rsCard-title {
	margin-bottom: 1.125rem;
	padding-top: 0;
	font-weight: 800;
}
.rsAnswers .rsSlider-nav {
	gap: 1rem;
	margin-top: calc(1.5rem - 3px);
}
/* Editor: Karten im Raster, ohne Auslauf bis zum Rand */
.rsAnswers .rsCards--editor {
	margin-right: 0;
}
/* „Weiter“ gefüllt laut Design (Hover wie die übrigen Pfeile, aber dunkel, weil schon blau) */
.rsAnswers .rsSlider-next {
	border-color: var(--color-blue);
	background: var(--color-blue);
	color: #fff;
}
.no-touch .rsAnswers .rsSlider-next:not(:disabled):hover {
	border-color: var(--color-navy);
	background: var(--color-navy);
}
.rsAnswers.rsSection--dark .rsSlider-next {
	border-color: var(--color-lime);
	background: var(--color-lime);
	color: var(--color-navy);
}

/* ------------------------------------------------------------------------- */
/* Referenzen                                                                */
/* ------------------------------------------------------------------------- */

.rsTestimonials {
	padding: 2rem 0 6rem;
}
.rsTestimonials .rsSlider-track {
	gap: 2rem;
}
.rsTestimonial {
	display: grid;
	grid-template-columns: 14.875rem minmax(0, 1fr);
	gap: 3.625rem;
	align-items: start;
	width: 100%;
	margin: 0;
}
.rsTestimonial-image {
	display: block;
	width: 100%;
	aspect-ratio: 238 / 290;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--site-border-radius);
	background: var(--color-sand);
}
.rsTestimonial-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rsTestimonial-quote {
	max-width: 40rem;
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	font-size: 1.5625rem;
	line-height: 1.875rem;
}
.rsTestimonial-quote::before {
	display: none;
}
.rsTestimonial-quote p {
	margin: 0;
}
.rsTestimonial-name,
.rsTestimonial-role {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsTestimonial-name {
	font-weight: 700;
}
.rsTestimonial-logo {
	margin-top: 1.75rem;
}
.rsTestimonial-logo img {
	width: auto;
	max-width: 12rem;
	max-height: 3.5rem;
}
.rsTestimonial-logoText {
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.75rem;
	letter-spacing: -0.05em;
}
.rsSlider-dots {
	display: flex;
	gap: 0.625rem;
	margin-left: calc(14.875rem + 3.625rem - 2 * 3.4375rem - 2 * 0.875rem);
}
.rsSlider-dot {
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-sand);
	cursor: pointer;
}
.rsSlider-dot.is-active {
	background: var(--color-blue);
}
.rsTestimonial--editor {
	margin-bottom: 2rem;
}
.rsTestimonial-imageHint {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------------- */
/* Person (Über uns)                                                         */
/* Foto mit runden Ecken und Schräge unten (zur Textseite hin tiefer)        */
/* ------------------------------------------------------------------------- */

.rsPerson {
	padding: 4rem 0;
}
.rsPerson-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 6.25rem;
	align-items: start;
}
.rsPerson--right .rsPerson-image {
	order: 2;
}
.rsPerson-image {
	--r: var(--site-border-radius, 15px);
	--slant: 3.75rem;
	--slant-bl: var(--slant);
	--slant-br: 0px;
	display: block;
	width: 100%;
	aspect-ratio: 450 / 460;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--color-sand);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-br)), 0 calc(100% - var(--slant-bl)));
	border-radius: var(--r);
}
.rsPerson--right .rsPerson-image {
	--slant-bl: 0px;
	--slant-br: var(--slant);
}
@supports (clip-path: shape(from 0 0, line to 1px 1px)) {
	.rsPerson-image {
		border-radius: 0;
		clip-path: shape(
			from var(--r) 0,
			line to calc(100% - var(--r)) 0,
			arc to 100% var(--r) of var(--r) cw,
			line to 100% calc(100% - var(--slant-br) - var(--r)),
			arc to calc(100% - var(--r)) calc(100% - var(--slant-br)) of var(--r) cw,
			line to var(--r) calc(100% - var(--slant-bl)),
			arc to 0 calc(100% - var(--slant-bl) - var(--r)) of var(--r) cw,
			line to 0 var(--r),
			arc to var(--r) 0 of var(--r) cw,
			close
		);
	}
}
.rsPerson-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rsPerson-imageHint {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 0.875rem;
}
.rsPerson-content {
	padding-top: 1.25rem;
}
.rsSection .rsPerson-name {
	margin: 0 0 1.5rem;
}
.rsPerson-role {
	margin: 0 0 1.75rem;
	font-size: 1.5625rem;
	line-height: 1.875rem;
}
.rsPerson-text {
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsPerson-text > * {
	margin: 0 0 1.25rem;
}
.rsPerson-text > :last-child {
	margin-bottom: 0;
}

/* Button statt Social Buttons (2px Luft: Safari schneidet den Rahmen sonst beim Einblenden ab) */
.rsPerson-button {
	margin: calc(1.75rem - 2px) 0 -2px;
	padding-block: 2px;
}
.rsPerson-button.is-empty {
	opacity: 0.35;
}

/* Social Buttons: Kreis + Icon (Maske, eingefärbt über color) */
.rsSocials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6875rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.rsSocials li {
	margin: 0;
	padding: 0;
}
.rsSocial {
	--rs-social-bg: var(--color-blue);
	--rs-social-fg: #fff;
	--rs-social-icon: none;
	--rs-social-size: 1.25rem;
	position: relative;
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--rs-social-bg);
	transition: transform .2s ease;
}
.rsSocial::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--rs-social-size);
	height: var(--rs-social-size);
	background: var(--rs-social-fg);
	-webkit-mask: var(--rs-social-icon) center / contain no-repeat;
	mask: var(--rs-social-icon) center / contain no-repeat;
}
a.rsSocial:hover,
a.rsSocial:focus-visible {
	transform: scale(1.08);
}
.rsSocial.is-empty {
	opacity: 0.35;
}
.rsSocial--linkedin {
	--rs-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.4 3.6a2.4 2.4 0 1 1-4.8 0 2.4 2.4 0 0 1 4.8 0zM1 8h4v14H1zm7 0h3.8v2h.1c.5-1 1.8-2.3 3.8-2.3 4 0 4.8 2.6 4.8 6V22h-4v-7.4c0-1.8 0-4-2.5-4s-2.9 1.9-2.9 3.9V22H8z'/%3E%3C/svg%3E");
}
.rsSocial--email {
	--rs-social-bg: var(--color-lime);
	--rs-social-fg: var(--color-navy);
	--rs-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.5 1.5 1.5 10.2l7.2 3 9.3-7.4-7.3 8.9v6.8l4-4.6 4.6 3.6z'/%3E%3C/svg%3E");
}
.rsSocial--instagram {
	--rs-social-bg: var(--color-coral);
	--rs-social-icon: 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.2'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='17.6' cy='6.4' r='.6' fill='%23000'/%3E%3C/svg%3E");
}
.rsSocial--facebook {
	--rs-social-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.2h2.8l.4-3.3h-3.2V8.4c0-.9.3-1.6 1.6-1.6h1.7V3.9a23 23 0 0 0-2.5-.1c-2.5 0-4.2 1.5-4.2 4.3v2.4H7.3v3.3h2.8V22z'/%3E%3C/svg%3E");
}
.rsSocial--website {
	--rs-social-bg: var(--color-navy);
	--rs-social-icon: 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'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c2.8 3 4 6.3 4 10s-1.2 7-4 10c-2.8-3-4-6.3-4-10s1.2-7 4-10z'/%3E%3C/svg%3E");
}
/* Editor: Seitenleiste „Social Buttons“ */
.rsPersonSocialEdit {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e0e0e0;
}

/* ------------------------------------------------------------------------- */
/* Hero ohne Kreise (Unterseiten)                                            */
/* ------------------------------------------------------------------------- */

.rsHero--plain .rsHero-content {
	max-width: 64rem;
}
.rsHero--plain .rsHero-title {
	margin-bottom: 2.25rem;
}
.rsHero--plain .rsHero-text {
	max-width: 57.5rem;
}
/* Lange Wörter (z. B. „Unternehmenskultur“) am Handy trennen statt überlaufen lassen */
.rsHero--plain h1,
.rsArea h2 {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}
@media (min-width: 601px) {
	.rsHero--plain h1,
	.rsArea h2 {
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}
/* Platz für den Scroll-Button auf der Schräge (die Schräge ist auf kleinen Bildschirmen flach) */
@media (max-width: 1024px) {
	.rsHero--plain {
		padding-bottom: calc(var(--slant) + 3rem);
	}
}

/* ------------------------------------------------------------------------- */
/* Header mit Bild                                                           */
/* Bild-Ebene ist ein .rsPanel (gleiche runde Ecken/Schrägen wie die Flächen) */
/* „below“: Sand-Fläche + Bild unten mit schräger Oberkante (links tiefer)   */
/* „background“: Bild über die ganze Fläche, Schräge unten                   */
/* Parallaxe: front.js setzt --rs-parallax (Verschiebung in px)              */
/* ------------------------------------------------------------------------- */

.rsHeroImage {
	--rs-image-h: clamp(13rem, 30vw, 19rem); /* sichtbarer Bildstreifen unter der Schräge (links) */
}
.rsHeroImage-media {
	overflow: hidden;
	padding: 0;
	border: 0;
	background: var(--color-navy);
}
.rsHeroImage-media img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}
.rsHeroImage-media[data-rs-parallax] img {
	top: -12%;
	height: 124%;
	transform: translate3d(0, var(--rs-parallax, 0px), 0);
}
/* Bild unten */
.rsHeroImage--below {
	padding-bottom: calc(var(--rs-image-h) + var(--slant) / 2);
}
.rsHero.rsHeroImage--below .rsPanel--sand {
	--slant-br: 0px;
}
.rsHero.rsHeroImage--below .rsHeroImage-media {
	--slant-br: 0px;
	--slant-tl: var(--slant);
	top: auto;
	height: calc(var(--rs-image-h) + var(--slant));
}
.rsHeroImage--below .rsHero-scroll {
	bottom: calc(var(--rs-image-h) + var(--slant) / 2 - 1.9375rem);
}

/* Bild als Hintergrund */
.rsHeroImage--background {
	min-height: 43rem;
	padding-bottom: calc(var(--slant) + 2rem);
}
.rsHeroImage--background .rsHero-content {
	max-width: 40rem;
}
.rsHeroImage--background .rsHero-text {
	max-width: 28rem;
}
.rsHeroImage--light,
.rsHeroImage--light .rsHero-title,
.editor-styles-wrapper .rsHeroImage--light .rsHero-title {
	color: #fff;
}
.rsHeroImage--light .us-btn-style_2,
.rsHeroImage--light .is-style-us-btn-2 .wp-block-button__link {
	--btn-border-color: #fff;
	color: #fff !important;
}
/* Verlauf hinter dem Text (hell bzw. dunkel) */
.rsHeroImage--overlay .rsHeroImage-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(246 243 238 / 0.92), rgb(246 243 238 / 0.6) 45%, rgb(246 243 238 / 0) 75%);
}
.rsHeroImage--overlay.rsHeroImage--light .rsHeroImage-media::after {
	background: linear-gradient(90deg, rgb(11 29 51 / 0.85), rgb(11 29 51 / 0.5) 45%, rgb(11 29 51 / 0) 75%);
}

/* Editor: Bild-Ebene anklickbar (liegt hinter dem Text), Hinweis ohne Bild */
.editor-styles-wrapper .rsHeroImage-media {
	width: auto; /* Breite über left/right der Fläche, nicht 100 % vom Bild-Button */
	pointer-events: auto;
	cursor: pointer;
}
.rsHeroImage-media .rsImageButton-hint {
	position: absolute;
	right: 2rem;
	bottom: 1.5rem;
	color: #fff;
}

@media (max-width: 1024px) {
	.rsHeroImage--below {
		padding-bottom: calc(var(--rs-image-h) + var(--slant) / 2 + 3.5rem);
	}
	.rsHeroImage--background {
		min-height: 0;
		padding-bottom: calc(var(--slant) + 4rem);
	}
}
@media (max-width: 600px) {
	.rsHeroImage--background {
		min-height: 36rem;
	}
	.rsHeroImage--overlay .rsHeroImage-media::after {
		background: rgb(246 243 238 / 0.7);
	}
	.rsHeroImage--overlay.rsHeroImage--light .rsHeroImage-media::after {
		background: rgb(11 29 51 / 0.55);
	}
}

/* ------------------------------------------------------------------------- */
/* Bild (volle Breite), Text + Bild, Bilder im Inhalt                        */
/* Bilder immer mit dem globalen Radius (--site-border-radius)               */
/* ------------------------------------------------------------------------- */

:where(.wp-block-image) img {
	border-radius: var(--site-border-radius);
}
.rsImage {
	padding: 1.5rem 0;
}
.rsImage-figure,
.rsMediaText-image {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--site-border-radius);
	background: var(--color-sand);
}
.rsImage-figure img,
.rsMediaText-image img {
	display: block;
	width: 100%;
	height: auto;
}
.rsImage--wide {
	aspect-ratio: 3 / 1;
}
.rsImage--video {
	aspect-ratio: 16 / 9;
}
.rsImage--photo {
	aspect-ratio: 4 / 3;
}
.rsImage--square {
	aspect-ratio: 1;
}
:is(.rsImage--wide, .rsImage--video, .rsImage--photo, .rsImage--square) img {
	height: 100%;
	object-fit: cover;
}

.rsMediaText {
	padding: 2.5rem 0;
}
.rsMediaText-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}
.rsMediaText--left .rsMediaText-image {
	order: -1;
}
.rsMediaText-text {
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsMediaText-text :where(p, ul, ol, h2, h3, h4, .wp-block-buttons) {
	margin: 0 0 1.25rem;
}
.rsMediaText-text :where(p, ul, ol, h2, h3, h4, .wp-block-buttons):last-child {
	margin-bottom: 0;
}

/* Editor: Bild als Button (anklicken = Bild wählen) */
.rsImageButton {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
}
.rsImageButton-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	height: 100%;
	font-size: 0.875rem;
}

@media (max-width: 900px) {
	.rsMediaText-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.rsMediaText-image {
		order: -1;
	}
}
@media (max-width: 600px) {
	.rsImage--wide {
		aspect-ratio: 2 / 1;
	}
}

/* ------------------------------------------------------------------------- */
/* Farbbereich (freier Inhalt aus Standard-Blöcken)                          */
/* ------------------------------------------------------------------------- */

.rsArea {
	overflow-x: clip;
	container-type: inline-size; /* Bezug für die Linien bis zum Rand (100cqw) */
}
.rsArea:not(.rsSection--panel) {
	padding: 3.125rem 0;
}
/* Abstand vor einer Farbfläche bzw. vor dem Footer */
.rsArea:not(.rsSection--panel) + .rsArea.rsSection--panel {
	margin-top: 5.5rem;
}
.rsArea:not(.rsSection--panel):last-child {
	padding-bottom: 6rem;
}
.rsArea h2 {
	margin-bottom: 1.25rem;
}
.rsArea p {
	max-width: 57.5rem;
}
.rsArea .wp-block-buttons {
	gap: 1.75rem;
}
.no-touch .rsSection--dark .rsScroll:hover {
	background-color: var(--color-navy);
}

/* Linien bis zum Rand der Fläche (Liste „Punkte“, Trenner „Linie bis zum Rand“).
   --rs-bleed = Abstand Inhaltsrand → Flächenrand; der Text der Liste bleibt in der Inhaltsbreite. */
.rsArea .is-style-rs-dots,
.rsArea .is-style-rs-line {
	--rs-bleed: calc((100cqw - min(100cqw - 3rem, var(--site-content-width, 980px))) / 2 - var(--padding-inline, 0px));
	margin-right: calc(-1 * var(--rs-bleed));
}
/* Farbfläche auf der Website: Sektion hat über .l-section seitlich --padding-inline als Innenabstand –
   100cqw zählt ihn schon nicht mit, daher nicht nochmals abziehen (sonst endet die Linie 20px vor dem
   Flächenrand). Im Editor fehlt dieser Innenabstand (.l-section-Stile nicht geladen) → dort wie oben. */
.rsArea.rsSection--panel .is-style-rs-dots,
.rsArea.rsSection--panel .is-style-rs-line {
	--rs-bleed: calc((100cqw - min(100cqw - 3rem, var(--site-content-width, 980px))) / 2);
}
.editor-styles-wrapper .rsArea.rsSection--panel .is-style-rs-dots,
.editor-styles-wrapper .rsArea.rsSection--panel .is-style-rs-line {
	--rs-bleed: calc((100cqw - min(100cqw - 3rem, var(--site-content-width, 980px))) / 2 - var(--padding-inline, 0px));
}
/* Editor: Inhaltsbreite (980px) und automatische Ränder gelten hier nicht – Linie beginnt am Text */
.editor-styles-wrapper .rsArea .wp-block.is-style-rs-dots,
.editor-styles-wrapper .rsArea .wp-block.is-style-rs-line {
	max-width: none;
	margin-left: 0;
}
/* Große Überschriften dürfen wie im Design etwas breiter laufen (max. 1016px statt Inhaltsbreite) */
@media (min-width: 1100px) {
	.rsArea h2,
	.rsHero--plain .rsHero-title {
		margin-right: calc(var(--site-content-width, 980px) - 1016px);
	}
}

/* ------------------------------------------------------------------------- */
/* Block-Stile für Standard-Blöcke (Seitenleiste → Stile)                    */
/* ------------------------------------------------------------------------- */

/* Liste „Punkte (Lime)“ */
.is-style-rs-dots {
	margin: 0 0 3rem;
	padding: 0;
	border-top: 1px solid var(--color-navy);
	list-style: none;
}
.is-style-rs-dots > li {
	position: relative;
	margin: 0;
	padding: 1.6875rem var(--rs-bleed, 0px) 1.6875rem 3.6875rem;
	border-bottom: 1px solid var(--color-navy);
	font-size: 1.5625rem;
	line-height: 1.875rem;
	letter-spacing: -0.01em;
}
.is-style-rs-dots > li::before {
	content: '';
	position: absolute;
	top: calc(1.6875rem + 0.21875rem);
	left: 0.1875rem;
	width: 1.4375rem;
	height: 1.4375rem;
	border-radius: 50%;
	background: var(--color-lime);
}
.rsSection--dark .is-style-rs-dots,
.rsSection--dark .is-style-rs-dots > li {
	border-color: #fff;
}

/* Absatz „Balken Blau / Koralle“ (z. B. „Geeignet für: …“) */
.is-style-rs-bar,
.is-style-rs-bar-coral {
	margin: 0 0 1.875rem;
	padding: 0.125rem 0 0.125rem 0.8125rem;
	border-left: 5px solid var(--color-blue);
	font-size: 1.5625rem;
	line-height: 1.875rem;
	letter-spacing: -0.01em;
}
.is-style-rs-bar-coral {
	border-left-color: var(--color-coral);
}
.rsSection--dark .is-style-rs-bar {
	border-left-color: var(--color-lime);
}

/* Trenner „Linie bis zum Rand“
   Linie als 1px-Hintergrund mit 2px Luft oben/unten (statt border): Safari schneidet sonst die
   Linie während der Einblend-Animation ab. Margins um die Luft verringert → Position unverändert. */
.wp-block-separator.is-style-rs-line {
	--rs-line-color: var(--color-navy);
	--rs-line-mt: 3.875rem;
	--rs-line-mb: 4.25rem;
	width: auto;
	max-width: none;
	height: 5px;
	margin-top: calc(var(--rs-line-mt) - 2px);
	margin-bottom: calc(var(--rs-line-mb) - 2px);
	border: 0;
	background: linear-gradient(var(--rs-line-color), var(--rs-line-color)) 0 2px / 100% 1px no-repeat;
	opacity: 1;
}
.rsSection--dark .wp-block-separator.is-style-rs-line {
	--rs-line-color: #fff;
}
.is-style-rs-line + h2,
.is-style-rs-line + h3 {
	padding-top: 0;
}

/* Trenner „Standard“, „Breite Linie“, „Punkte“ (WordPress-Stile) im Theme-Look
   Standard = kurzer Akzent-Balken, Breite Linie = 1px über die Inhaltsbreite, Punkte = drei Punkte.
   Farben passen sich der Fläche an (dunkle Flächen: weiß bzw. Lime). Wie bei „Linie bis zum Rand“
   als Hintergrund mit 2px Luft oben/unten gezeichnet (Safari schneidet sonst beim Einblenden ab). */
.wp-block-separator:not(.is-style-rs-line) {
	--rs-sep-line: var(--color-navy);
	--rs-sep-accent: var(--color-blue);
	width: auto;
	max-width: none;
	height: 5px;
	margin: calc(2.5rem - 2px) 0;
	padding: 0;
	border: 0;
	background: linear-gradient(var(--rs-sep-line), var(--rs-sep-line)) 0 2px / 100% 1px no-repeat;
	opacity: 1;
}
.wp-block-separator:not(.is-style-rs-line, .is-style-wide, .is-style-dots) {
	height: 9px;
	background: linear-gradient(var(--rs-sep-accent), var(--rs-sep-accent)) 0 2px / 3.75rem 5px no-repeat;
}
/* Punkte: WordPress setzt beim Stil „Punkte“ background: none !important → Punkte über ::before
   (ersetzt die WordPress-Schriftzeichen), mittig wie bei WordPress */
.wp-block-separator.is-style-dots {
	height: 12px;
}
.wp-block-separator.is-style-dots::before {
	content: '';
	display: block;
	width: 64px; /* 3 Punkte à 8px im Abstand von 28px: Mitte bei 4, 32, 60px */
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background: radial-gradient(circle at 4px 50%, var(--rs-sep-accent) 3.5px, transparent 4px) 0 0 / 28px 100% repeat-x;
	letter-spacing: normal;
}
.rsSection--dark .wp-block-separator:not(.is-style-rs-line) {
	--rs-sep-line: #fff;
	--rs-sep-accent: var(--color-lime);
}
/* Eigene Farbe aus der Seitenleiste (Farbe → Hintergrund) übernehmen */
.wp-block-separator.has-background:not(.is-style-rs-line) {
	--rs-sep-line: currentColor;
	--rs-sep-accent: currentColor;
	background-color: transparent !important;
}

/* ------------------------------------------------------------------------- */
/* Schritte                                                                  */
/* ------------------------------------------------------------------------- */

.rsSteps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}
.rsSteps:last-child {
	margin-bottom: 0;
}
.rsStep {
	min-height: 17.75rem;
	margin: 0;
	padding: 1.25rem 2.3125rem 2rem;
	border-radius: 0.625rem;
	background: var(--color-blue);
	color: #fff;
}
.rsStep:nth-child(3n+2) {
	background: var(--color-coral);
}
.rsStep:nth-child(3n) {
	background: var(--color-lime);
	color: var(--color-navy);
}
/* Eigene Farbe je Karte (Seitenleiste „Kartenfarben“) – helle Flächen mit dunkler Schrift */
.rsStep.rsStep--blue { background: var(--color-blue); color: #fff; }
.rsStep.rsStep--coral { background: var(--color-coral); color: #fff; }
.rsStep.rsStep--navy { background: var(--color-navy); color: #fff; }
.rsStep.rsStep--violet { background: var(--color-violet); color: #fff; }
.rsStep.rsStep--pink { background: var(--color-pink); color: #fff; }
.rsStep.rsStep--lime { background: var(--color-lime); color: var(--color-navy); }
.rsStep.rsStep--sand { background: var(--color-sand); color: var(--color-navy); }
.rsStep.rsStep--yellow { background: var(--color-yellow); color: var(--color-navy); }
.rsStep.rsStep--green { background: var(--color-green); color: var(--color-navy); }
.rsStep.rsStep--turquoise { background: var(--color-turquoise); color: var(--color-navy); }
/* Keine Farbe: nur Rahmen in Schriftfarbe der Umgebung (auf dunklen Flächen weiß).
   Innenliegender Schatten statt border → gleiche Größe wie die farbigen Karten */
.rsStep.rsStep--none {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}
.rsStep-number {
	display: block;
	margin-bottom: 1.5rem;
	font-size: 3.75rem;
	font-weight: 800;
	line-height: 4.0625rem;
	letter-spacing: -0.05em;
}
.rsSteps .rsStep-title,
body.editor-styles-wrapper .rsSteps .rsStep-title {
	margin: 0 0 0.625rem;
	padding: 0;
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 1.875rem;
	letter-spacing: -0.01em;
	color: inherit;
}
.rsStep-text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.25rem;
}

/* ------------------------------------------------------------------------- */
/* Häufige Fragen (Akkordeon)                                                */
/* ------------------------------------------------------------------------- */

.rsFaq {
	display: grid;
	gap: 1rem;
	margin: 0 0 3rem;
}
.rsFaq:last-child {
	margin-bottom: 0;
}
.rsFaq-item {
	border: 1px solid var(--color-navy);
	border-radius: 0.625rem;
}
.rsFaq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.6875rem;
	padding: 1.125rem 1.125rem 1.125rem 2.125rem;
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 1.875rem;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
}
.rsFaq-question::-webkit-details-marker {
	display: none;
}
.rsFaq-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.5625rem;
	height: 2.5625rem;
	border-radius: 50%;
	background: var(--color-blue);
	color: #fff;
	transition: background-color .3s, color .3s;
}
.rsFaq-icon .rsArrow {
	width: 0.875rem;
	height: 0.625rem;
	transition: transform .3s;
}
.rsFaq-item[open]:not(.is-closing) .rsFaq-icon {
	background: var(--color-lime);
	color: var(--color-navy);
}
.rsFaq-item[open]:not(.is-closing) .rsFaq-icon .rsArrow {
	transform: rotate(-90deg);
}
.no-touch .rsFaq-question:hover .rsFaq-icon {
	background: var(--color-navy);
	color: #fff;
}
.rsFaq-answer {
	margin-top: -0.4375rem;
	padding: 0 5rem 1.75rem 2.125rem;
	font-size: 1rem;
	line-height: 1.25rem;
}
.rsFaq-answer p {
	max-width: 52rem;
}
/* Variante „Akkordeon“: Karte mit Hintergrund, Titel + Einleitung, Inhalt aus normalen Blöcken */
.rsFaq--accordion .rsFaq-item {
	border-color: var(--color-sand);
	background: var(--color-sand);
}
.rsFaq--accordion .rsFaq-question {
	align-items: flex-start;
	padding-block: 1.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.25rem;
	letter-spacing: normal;
}
.rsFaq-head {
	align-self: center; /* nur Titel: mittig zum Icon */
	max-width: 52rem;
}
.rsFaq-head .rsFaq-title {
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 1.5625rem;
	line-height: 1.875rem;
}
.rsFaq-head .rsFaq-title:last-child {
	margin-bottom: 0;
}
.rsFaq-head .rsFaq-teaser {
	margin: 0;
}
.rsFaq--accordion .rsFaq-answer {
	margin-top: 0;
}
.rsFaq--accordion .rsFaq-answer > * {
	max-width: 52rem;
	margin-top: 0;
	margin-bottom: 1rem;
}
.rsFaq--accordion .rsFaq-answer > :last-child {
	margin-bottom: 0;
}
.rsFaq--accordion .rsFaq-answer > h3 {
	margin-top: 1.75rem;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1.4375rem;
}
.rsFaq--accordion .rsFaq-answer > h3:first-child {
	margin-top: 0;
}
/* Editor: Inhalt liegt dort verschachtelt in InnerBlocks */
body.editor-styles-wrapper .rsFaq--accordion .rsFaq-answer h3 {
	margin: 1.75rem 0 1rem;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1.4375rem;
}
body.editor-styles-wrapper .rsFaq--accordion .rsFaq-answer p,
body.editor-styles-wrapper .rsFaq--accordion .rsFaq-answer ul {
	margin-block: 0 1rem;
}
/* Editor: Fragen sind eigene Blöcke (rs/faq-item) */
.rsFaq--editor > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	gap: 1rem;
}
.rsFaq--editor .rsFaq-item {
	margin: 0;
	padding-bottom: 0.25rem;
}
.rsFaq--editor .rsFaq-question {
	display: block;
	cursor: text;
}
.rsFaq--editor .rsFaq-answer {
	margin-top: 0;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------------- */
/* Editor-Hilfen (nur im Block-Editor sichtbar)                              */
/* ------------------------------------------------------------------------- */

.rsItemTools {
	display: flex;
	gap: 2px;
	margin-left: auto;
	opacity: 0.6;
	transition: opacity .2s;
}
.rsItemTools:hover,
*:focus-within > .rsItemTools {
	opacity: 1;
}
.rsCard .rsItemTools,
.rsTestimonial .rsItemTools {
	margin-top: 0.75rem;
}
.rsAddItem {
	margin-top: 1rem;
}

/* ------------------------------------------------------------------------- */
/* Responsive                                                                */
/* ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.rsCalc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.rsCalc-card {
		max-width: 30rem;
	}
}
@media (max-width: 900px) {
	.rsTextList-grid,
	.rsTwoCol-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.rsTextList .rsLead,
	.rsTwoCol .rsLead {
		max-width: none;
	}
	.rsTwoCol-text {
		padding-top: 0;
	}
	/* Person: Foto immer oben */
	.rsPerson {
		padding: 2.5rem 0;
	}
	.rsPerson-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
	.rsPerson--right .rsPerson-image {
		order: 0;
	}
	.rsPerson-image {
		--slant: 2.5rem;
		max-width: 28rem;
	}
	.rsPerson-content {
		padding-top: 0;
	}
}
@media (max-width: 600px) {
	.rsLead,
	.rsTestimonial-quote {
		font-size: 1.25rem;
		line-height: 1.5625rem;
	}
	.rsIconList-item {
		gap: 1.25rem;
		font-size: 1.25rem;
		line-height: 1.5625rem;
	}
	.rsIconList-item::before {
		width: 2.25rem;
		height: 2.25rem;
	}
	.rsNote {
		align-items: flex-start;
	}
	.rsNote-icon {
		width: 3.125rem;
		height: 2.75rem;
	}
	.rsCard {
		width: min(80vw, 25.5rem);
	}
	.rsTestimonial {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.rsTestimonial-image {
		max-width: 14.875rem;
	}
	.rsSlider-dots {
		margin-left: auto;
	}
	.rsSlider-nav .rsButtons {
		flex-basis: 100%;
		margin-left: 0;
	}
	.rsCalc-fields {
		grid-template-columns: minmax(0, 1fr);
	}
	.rsSection .rsCalc-title {
		font-size: 1.5rem;
		line-height: 1.875rem;
	}
	/* Farbbereich + Block-Stile */
	.rsArea:not(.rsSection--panel) {
		padding: 2.5rem 0;
	}
	.rsArea:not(.rsSection--panel) + .rsArea.rsSection--panel {
		margin-top: 3rem;
	}
	.rsArea:not(.rsSection--panel):last-child {
		padding-bottom: 4rem;
	}
	.is-style-rs-dots > li {
		padding: 1.125rem var(--rs-bleed, 0px) 1.125rem 2.5rem;
		font-size: 1.25rem;
		line-height: 1.5625rem;
	}
	.is-style-rs-dots > li::before {
		top: calc(1.125rem + 0.25rem);
		left: 0;
		width: 1.0625rem;
		height: 1.0625rem;
	}
	.is-style-rs-bar,
	.is-style-rs-bar-coral {
		font-size: 1.25rem;
		line-height: 1.5625rem;
	}
	.wp-block-separator.is-style-rs-line {
		--rs-line-mt: 2.5rem;
		--rs-line-mb: 2.5rem;
	}
	.rsFaq-question {
		min-height: 0;
		padding: 1rem 0.875rem 1rem 1.25rem;
		font-size: 1.125rem;
		line-height: 1.4375rem;
	}
	.rsFaq-answer {
		margin-top: -0.25rem;
		padding: 0 1.25rem 1.25rem;
	}
	.rsFaq-head .rsFaq-title {
		font-size: 1.125rem;
		line-height: 1.4375rem;
	}
	.rsFaq--accordion .rsFaq-question {
		padding-block: 1.25rem;
	}
}
@media (max-width: 900px) {
	.rsSteps {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}
	.rsStep {
		min-height: 0;
		padding: 1.25rem 1.5rem 1.5rem;
	}
	.rsStep-number {
		margin-bottom: 0.75rem;
		font-size: 2.5rem;
		line-height: 2.75rem;
	}
}