/*
 * Rentenberatung Schneider – Frontend-CSS.
 *
 * Nur das, was theme.json nicht abdeckt (Layoutdetails der eigenen Blöcke,
 * Kleinigkeiten am Header/Footer). Farben/Schriften/Spacing kommen aus theme.json –
 * hier ausschließlich über die CSS-Variablen `--wp--preset--*` verwenden.
 *
 * Die Werte unter „Primitive" stammen 1:1 aus den Tailwind-Klassen des abgenommenen
 * HTML-Entwurfs und sind hier als Variablen festgehalten, damit sie an einer Stelle
 * liegen statt in jedem Block einzeln.
 */

/* ---------- Primitive (aus dem Entwurf übernommen) ---------- */

:root {
	/*
	 * Eckenradien – seit 2026-08-07 durchgehend 0. Wunsch der Kundin: rechte Winkel
	 * statt runder Ecken, für einen sachlicheren Auftritt. Der abgenommene Entwurf
	 * kam aus Tailwind und trug hier rounded-lg / -xl / -2xl / -full.
	 *
	 * ⚠️ Die vier Namen bleiben mit Absicht bestehen, obwohl sie denselben Wert
	 * tragen: 27 Stellen in dieser Datei greifen darauf zu. Ein Sinneswandel kostet
	 * so vier Zeilen statt einer Suche durch die ganze Datei – und das Projekt hat
	 * keine Versionsverwaltung. Wer wieder runden will, setzt die alten Werte ein:
	 * s 0.5rem, m 0.75rem, l 1rem, pill 9999px.
	 *
	 * Zweite Stelle außerhalb dieser Datei: theme.json, styles.elements.button.border
	 * – die Core-Buttons laufen nicht über .rbs-button und brauchen ihre eigene 0.
	 */
	--rbs-radius-s: 0;
	--rbs-radius-m: 0;
	--rbs-radius-l: 0;
	--rbs-radius-pill: 0;

	/* Schatten – Tailwind shadow-sm / -md / -lg / -2xl */
	--rbs-shadow-s: 0 1px 2px 0 rgb(0 0 0 / 5%);
	--rbs-shadow-m: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
	--rbs-shadow-l: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
	--rbs-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 25%);

	--rbs-transition: 200ms ease;

	/* Petrol mit Deckkraft – im Prototyp bg-petrol/5, /10, /20 */
	--rbs-primary-05: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
	--rbs-primary-10: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	--rbs-primary-20: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);

	/* Höhe der fixierten Navigation – bestimmt das Scroll-Offset der Anker */
	--rbs-header-height: 6rem;

	/* Höhe der WordPress-Adminleiste; für Besucher immer 0. */
	--rbs-adminbar: 0px;

	/*
	 * Fehlerfarbe des Kontaktformulars. Bewusst nicht in theme.json: Dort stünde
	 * sie in der Farbauswahl jedes Blocks und lüde dazu ein, Text darin zu färben.
	 *
	 * Dunkles Rot, seit das Formular in einer weißen Box sitzt (2026-08-02). Bis
	 * dahin stand hier ein helles `#FCA5A5` für den petrolfarbenen Grund – wer den
	 * Hintergrund je wieder umstellt, muss diesen Wert mitdrehen.
	 */
	--rbs-fehler: #B42318;
	--rbs-fehler-flaeche: color-mix(in srgb, #B42318 7%, transparent);
}

/*
 * Eingeloggte Nutzer sehen oben die feste Adminleiste von WordPress. Sie liegt mit
 * z-index 99999 über allem – ohne Ausgleich verschwände der obere Rand der Navigation
 * darunter. WordPress stellt ihre Höhe als Variable bereit (32px, ab 782px Breite 46px).
 */
body.admin-bar {
	--rbs-adminbar: var(--wp-admin--admin-bar--height, 0px);
}

/*
 * Bis 600px ist die Adminleiste nicht fest, sondern scrollt mit der Seite weg. Ein
 * dauerhafter Versatz würde die Navigation dort mit einer Lücke schweben lassen.
 */
@media screen and (max-width: 600px) {
	body.admin-bar {
		--rbs-adminbar: 0px;
	}
}

/* ---------- Grundlagen ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Anker-Sprünge dürfen nicht unter der fixierten Navigation landen. */
html {
	scroll-behavior: smooth;
}

/* Manche Reset-Regeln überschreiben das Standardverhalten von [hidden]. */
[hidden] {
	display: none !important;
}

/*
 * Fettung ausdrücklich auf 700 setzen.
 *
 * Der Browser-Standard nutzt für <strong> und <b> den Wert `bolder`, der *relativ*
 * zum geerbten Gewicht rechnet. Der Fließtext steht auf Inter Light (300) – daraus
 * würde 400, also gar keine sichtbare Hervorhebung.
 */
strong,
b {
	font-weight: 700;
}

[id] {
	scroll-margin-top: calc(var(--rbs-header-height) + var(--rbs-adminbar) + 1rem);
}

/*
 * Überschriftengrößen in Stufen, nicht fließend.
 *
 * Der Prototyp nutzt Tailwind-Breakpoints, die springen: h1 ist 48px, ab 768px
 * 60px, ab 1024px 72px. Ein durchlaufendes clamp() trifft zwar die Endpunkte,
 * liegt dazwischen aber deutlich daneben (bei 780px Fensterbreite 69px statt 60px)
 * – die Überschriften wirkten dadurch zu groß. Deshalb dieselben Stufen.
 */
h1 {
	font-size: 3rem;
	line-height: 1;
}

h2 {
	font-size: 1.875rem;
	line-height: 2.25rem;
}

@media (min-width: 768px) {
	h1 {
		font-size: 3.75rem;
	}

	h2 {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

@media (min-width: 1024px) {
	h1 {
		font-size: 4.5rem;
	}
}

/* ---------- Sektions- und Containerraster ---------- */

/*
 * Jeder Sektionsblock nutzt .rbs-section (Außenabstand + Flächenfarbe) und
 * darin .rbs-section__in (Breitenbegrenzung). Entspricht dem
 * `py-20` + `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` des Prototyps.
 */

.rbs-section {
	padding-block: var(--wp--preset--spacing--70);
}

.rbs-section--tinted {
	background-color: var(--wp--preset--color--secondary);
}

.rbs-section__in {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Prototyp: h2 mit mb-4 = 1rem. */
.rbs-section__title {
	margin-block: 0 1rem;
	text-align: center;
}

/*
 * Prototyp: text-lg (nicht text-xl); der Abstand zum Inhalt darunter kommt vom
 * umschließenden Kopfblock mit mb-16 = 4rem.
 */
.rbs-section__lead {
	max-width: 42rem;
	margin-inline: auto;
	margin-block: 0 4rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	text-align: center;
}

/* ---------- Wiederkehrende Bausteine ---------- */

/* Weiße Karte auf getönter Fläche – im Prototyp bg-white rounded-2xl shadow-lg */
.rbs-card {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--rbs-radius-l);
	box-shadow: var(--rbs-shadow-l);
}

/* Pillen-Label, z. B. „Unabhängige Rentenberatung" im Hero */
.rbs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--rbs-radius-pill);
	background-color: var(--rbs-primary-10);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/*
 * Häkchenliste – im Entwurf `w-5 h-5 text-petrol mt-1` je Punkt: ein reiner
 * Linien-Haken in Petrol, kein Kreis. Der Haken kommt als Maske, damit er die
 * Farbe aus dem Design-System zieht; die Maske trägt eine Kontur, keine Fläche.
 */
.rbs-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rbs-checklist > li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.rbs-checklist > li + li {
	margin-block-start: 0.5rem;
}

.rbs-checklist > li::before {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-block-start: 0.25rem;
	background-color: var(--wp--preset--color--primary);
	mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icons – Grundgröße, per Modifier abweichend. */
.rbs-icon {
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}

.rbs-icon--s {
	width: 1rem;
	height: 1rem;
}

/* Buttons der eigenen Blöcke – im Prototyp px-10 py-5, rounded-xl, fett. */
.rbs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.25rem 2.5rem;
	border: 2px solid transparent;
	border-radius: var(--rbs-radius-m);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--rbs-transition), color var(--rbs-transition), box-shadow var(--rbs-transition);
}

.rbs-button--primaer {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-l);
}

.rbs-button--primaer:hover,
.rbs-button--primaer:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-xl);
}

.rbs-button--kontur {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.rbs-button--kontur:hover,
.rbs-button--kontur:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Heller Button auf farbigem Grund (Kontakt-Sektion). */
.rbs-button--hell {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--rbs-shadow-xl);
	font-size: var(--wp--preset--font-size--x-large);
}

.rbs-button--hell:hover,
.rbs-button--hell:focus-visible {
	background-color: var(--wp--preset--color--page);
	color: var(--wp--preset--color--primary);
}

.rbs-button__pfeil {
	transition: transform var(--rbs-transition);
}

.rbs-button:hover .rbs-button__pfeil {
	transform: translateX(4px);
}

/* Pfeil zum nächsten Abschnitt – im Prototyp animate-bounce, mt-12. */
.rbs-weiter {
	margin-block: var(--wp--preset--spacing--60) 0;
	text-align: center;
}

/* Im Hero steht der Pfeil weiter unten (mt-16). */
.rbs-hero .rbs-weiter {
	margin-block-start: 4rem;
}

.rbs-weiter__link {
	display: inline-block;
	color: var(--wp--preset--color--primary);
	animation: rbs-huepfen 1s infinite;
}

.rbs-weiter__link .rbs-icon {
	width: 2rem;
	height: 2rem;
}

@keyframes rbs-huepfen {
	0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
	50%      { transform: none;             animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* Nur für Screenreader – WordPress liefert die Klasse im Blocktheme nicht mit. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Scroll-Animation ---------- */

.rbs-fade-in {
	opacity: 0;
	transform: translateY(30px) scale(0.95);
	transition: opacity 600ms ease-out, transform 600ms ease-out;
	/* Gestaffeltes Erscheinen – im Prototyp fade-in-up-delay-1 … -7. */
	transition-delay: var(--rbs-delay, 0s);
}

.rbs-fade-in.is-visible {
	opacity: 1;
	transform: none;
}

/*
 * Wer reduzierte Bewegung eingestellt hat, sieht die Inhalte sofort.
 * Ohne diese Regel blieben die Elemente bei abgeschaltetem JS-Observer unsichtbar.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.rbs-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rbs-weiter__link {
		animation: none;
	}
}

/* ---------- Kopfbereich ---------- */

.site-header {
	position: fixed;
	/* Für Besucher 0, für eingeloggte Nutzer unterhalb der Adminleiste. */
	top: var(--rbs-adminbar);
	left: 0;
	right: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-s);
}

/*
 * Die fixierte Navigation nimmt keinen Platz ein – Inhalt entsprechend anschieben.
 *
 * `margin-block-start: 0` ist wichtig: WordPress setzt auf Blöcke der obersten
 * Ebene automatisch den Block-Abstand (24px). Der schob den Inhalt zusätzlich nach
 * unten, sodass zwischen Navigation und erstem Abschnitt der Seitenhintergrund als
 * grauer Streifen durchblitzte.
 */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block: 0;
}

.wp-site-blocks > main {
	padding-block-start: var(--rbs-header-height);
}

/*
 * Inhaltsseiten wie Impressum und Datenschutz. Der Entwurf setzt dort `pt-32 pb-20`;
 * die oberen 32px sind der sichtbare Abstand unter der Navigation, deren Höhe hier
 * dazukommt, weil sie fest steht und keinen Platz einnimmt.
 *
 * Die Startseite braucht das nicht – dort bringt jede Sektion ihren Abstand mit.
 */
.wp-site-blocks > main.site-main {
	padding-block: calc(var(--rbs-header-height) + 2rem) var(--wp--preset--spacing--70);
}

/*
 * Inhaltsseiten wie im Entwurf (rechtliches/impressum.html): jede Sektion als
 * weiße Karte, die Überschrift steht frei darüber.
 */

/* Prototyp: text-4xl md:text-5xl. */
.site-main > .wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--60);
	font-size: 2.25rem;
	line-height: 2.5rem;
}

@media (min-width: 768px) {
	.site-main > .wp-block-post-title {
		font-size: 3rem;
		line-height: 1;
	}
}


/* Sektionsüberschrift: text-2xl, mb-4, mit Abstand zur vorherigen Karte. */
.rbs-inhaltsseite h2 {
	margin-block: 0 1rem;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 2rem;
}

.rbs-inhaltsseite > * + h2 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.rbs-inhaltsseite__karte {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rbs-radius-m);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-m);
}

/*
 * Der Entwurf ordnet die beiden Rechtsseiten unterschiedlich an: Das Impressum
 * bekommt je Abschnitt eine Karte, die Datenschutzerklärung steht komplett in
 * einer einzigen, etwas großzügiger gepolsterten Karte (p-8 statt p-6).
 */
.rbs-inhaltsseite__karte--gross {
	padding: var(--wp--preset--spacing--50);
}

/* Abstand zwischen den Abschnitten innerhalb der großen Karte (Entwurf: mb-8). */
.rbs-inhaltsseite__karte--gross > * + h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.rbs-inhaltsseite__karte h3 {
	margin-block: 0 0.75rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.75rem;
}

.rbs-inhaltsseite__karte > * + h3 {
	margin-block-start: var(--wp--preset--spacing--40);
}

/*
 * Prototyp: Fließtext mit `leading-relaxed` und `mb-4` – so steht es dort bei den
 * meisten Absätzen. Die kurzen Adresszeilen im Impressum nutzen `mb-2`; das lässt
 * sich aus dem Markdown nicht unterscheiden, deshalb gilt der größere Wert. Bei
 * langen Rechtstexten sind die Absatzgrenzen dadurch klarer zu sehen.
 */
.rbs-inhaltsseite__karte p {
	margin-block: 0 1rem;
	line-height: 1.625;
}

/* Zurück-Button unter dem Text – im Entwurf px-8 py-3, rounded-lg, halbfett. */
.rbs-inhaltsseite__zurueck {
	margin-block-start: var(--wp--preset--spacing--60);
}

.rbs-inhaltsseite__zurueck .wp-block-button__link {
	padding: 0.75rem 2rem;
	border-radius: var(--rbs-radius-s);
	font-weight: 600;
}

/* Prototyp: Links unterstreichen erst beim Überfahren. */
.rbs-inhaltsseite a {
	text-decoration: none;
}

.rbs-inhaltsseite a:hover,
.rbs-inhaltsseite a:focus-visible {
	text-decoration: underline;
}

.rbs-inhaltsseite__karte > :last-child {
	margin-block-end: 0;
}

.rbs-inhaltsseite__karte ul {
	margin-block: 0 0.5rem;
	padding-inline-start: 1.25rem;
	line-height: 1.625;
}

/*
 * Die Sektionen stoßen bündig aneinander.
 *
 * WordPress setzt zwischen Blöcken der obersten Ebene automatisch einen Abstand
 * (`block-gap`, 24px). Da jede Sektion ihre eigene Flächenfarbe mitbringt, wurde
 * dieser Abstand als grauer Streifen des Seitenhintergrunds sichtbar – zwischen
 * *jeder* Sektion. Der Abstand steckt bei uns in der Polsterung der Sektion selbst.
 */
.wp-block-post-content > .rbs-hero,
.wp-block-post-content > .rbs-section,
.wp-site-blocks > main > .rbs-hero,
.wp-site-blocks > main > .rbs-section {
	margin-block: 0;
}

/*
 * Der Hero ist die Ausnahme: Sein Hintergrundbild soll wie im Prototyp bis ganz
 * nach oben reichen und unter der (deckend weißen) Navigation liegen. Deshalb wird
 * der Anschub von <main> hier wieder herausgerechnet und der Abstand stattdessen
 * innen als Polsterung gesetzt.
 */
.wp-block-post-content > .rbs-hero:first-child,
.wp-site-blocks > main > .rbs-hero:first-child {
	margin-block-start: calc(-1 * var(--rbs-header-height));
}

.site-header__in {
	max-width: var(--wp--style--global--wide-size);
	min-height: var(--rbs-header-height);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.site-header__logo img {
	display: block;
	height: 4rem;
	width: auto;
}

/*
 * Navigation: im Prototyp text-gray-700, beim Hover petrol und fett.
 *
 * Alle Menüpunkte haben dort eine feste Höhe (`h-10` = 2.5rem) und zentrieren ihren
 * Text darin. Ohne diese Höhe richtet sich jeder Punkt nach seinem eigenen Inhalt –
 * der Kontakt-Button wurde dadurch mit seiner Polsterung höher als die übrigen
 * Punkte und ragte unten heraus.
 */
.site-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	height: 2.5rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color var(--rbs-transition);
}

.site-nav .wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/*
 * Fettung beim Hover würde die Nachbarpunkte verschieben (der Prototyp hat diesen
 * Ruckler). Der Platz wird deshalb vorab reserviert: ein unsichtbares fettes
 * Duplikat mit Höhe 0 bestimmt die Mindestbreite. Das `data-label` setzt main.js –
 * ohne JavaScript bleibt es beim Verhalten des Prototyps.
 */
.site-nav .wp-block-navigation-item__label {
	display: inline-block;
}

.site-nav .wp-block-navigation-item__label[data-label]::after {
	display: block;
	content: attr(data-label);
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 700;
	pointer-events: none;
}

/* Aktiver Abschnitt – gesetzt vom Scroll-Beobachter in main.js. */
.site-nav .is-aktiv > .wp-block-navigation-item__content {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/*
 * Letzter Menüpunkt „Kontakt" ist im Prototyp ein Button: px-6 py-2, rounded-lg –
 * die Höhe kommt aber aus `h-10`, nicht aus der Polsterung. Deshalb hier nur
 * seitlich polstern, sonst wächst der Button über die Zeilenhöhe hinaus.
 */
.site-nav .site-nav__cta > .wp-block-navigation-item__content {
	justify-content: center;
	padding-block: 0;
	padding-inline: 1.5rem;
	border-radius: var(--rbs-radius-s);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.site-nav .site-nav__cta > .wp-block-navigation-item__content:hover,
.site-nav .site-nav__cta.is-aktiv > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/*
 * Mobiles Overlay: Im Prototyp sind die Einträge volle Breite (`block`), der
 * Kontakt-Punkt zusätzlich zentriert.
 *
 * Die Navigation ist auf dem Desktop rechtsbündig; das vererbt sich im Overlay als
 * `align-items: flex-end`, wodurch Liste und Einträge auf Inhaltsbreite schrumpfen.
 * Deshalb hier ausdrücklich auf volle Breite stellen.
 */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-inline: 0.75rem;
	border-radius: var(--rbs-radius-s);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .site-nav__cta > .wp-block-navigation-item__content {
	justify-content: center;
}

/*
 * Das Burger-Symbol bringt WordPress als nackte 24×24-Schaltfläche ohne Polsterung.
 * Zwei Gründe für die Polsterung hier:
 *
 * 1. **Berührungsziel.** 24×24 ist zum Treffen mit dem Daumen zu klein; Apple nennt
 *    44×44 als Mindestmaß. Mit 0.625rem ringsum wird genau das daraus, ohne dass das
 *    Symbol selbst wächst.
 * 2. **Optik.** Der rechte Rand der Schaltfläche bleibt am selben Platz, das Symbol
 *    rückt dadurch 10 px nach innen. Rein rechnerisch saß es vorher genauso weit vom
 *    Rand wie das Logo links (je 16 px) – ein dünnes Strichsymbol wirkt dort aber
 *    gedrängter als ein flächiger Schriftzug und braucht optisch mehr Luft.
 */
.site-nav .wp-block-navigation__responsive-container-open {
	padding: 0.625rem;
}

/* Lesefortschritt – im Prototyp eine 2px-Leiste am unteren Rand der Navigation. */
.site-header__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #e5e7eb;
}

.site-header__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--wp--preset--color--primary);
	transition: width 300ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__progress-bar {
		transition: none;
	}
}

/* ---------- Block: Fußbereich ---------- */

.rbs-footer {
	background-color: var(--wp--preset--color--secondary);
	padding-block: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--heading);
}

.rbs-footer__in {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.rbs-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	text-align: center;
}

@media (min-width: 768px) {
	.rbs-footer__grid {
		grid-template-columns: repeat(3, 1fr);
		text-align: start;
	}
}

.rbs-footer__col--logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.rbs-footer__col--logo {
		justify-content: flex-start;
	}
}

.rbs-footer__logo {
	height: 4rem;
	width: auto;
}

.rbs-footer__title {
	margin-block: 0 var(--wp--preset--spacing--30);
	/* Im Prototyp ein <h4> – also Playfair Display, nicht Inter. */
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: inherit;
}

.rbs-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
}

.rbs-footer__list > li + li {
	margin-block-start: 0.5rem;
}

.rbs-footer__list a {
	color: inherit;
	text-decoration: none;
	transition: color var(--rbs-transition);
}

.rbs-footer__list a:hover,
.rbs-footer__list a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.rbs-footer__copyright {
	margin-block: var(--wp--preset--spacing--50) 0;
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid #d1d5db;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* ---------- Block: Hero (Referenzmuster) ---------- */

/* Prototyp: pt-40 pb-16 lg:pb-24 – also 10rem oben, 4rem unten, ab 1024px 6rem. */
.rbs-hero {
	position: relative;
	padding-block: 10rem 4rem;
	background-color: var(--wp--preset--color--secondary);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

/*
 * Der Prototyp legt einen hellen Verlauf über das Hintergrundbild, damit der
 * dunkle Text lesbar bleibt (from-white/85 via-white/80 to-petrol/20).
 */
.rbs-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom right,
		rgb(255 255 255 / 85%),
		rgb(255 255 255 / 80%),
		var(--rbs-primary-20)
	);
}

.rbs-hero__in {
	position: relative;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	text-align: center;
}

/* Prototyp: mb-6 = 1.5rem, nicht relativ zur Schriftgröße. */
.rbs-hero__title {
	max-width: 56rem;
	margin: 0 auto 1.5rem;
}

/* Prototyp: text-xl md:text-2xl – also 20px, ab 768px 24px. */
.rbs-hero__text {
	max-width: 42rem;
	margin: 0 auto 2.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.75rem;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 768px) {
	.rbs-hero__text {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.rbs-hero {
		padding-block-end: 6rem;
	}
}

.rbs-hero__akzent {
	display: block;
	color: var(--wp--preset--color--primary);
}

/* Prototyp: mb-16 = 4rem. */
.rbs-hero__buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
	margin-block-end: 4rem;
}

@media (min-width: 640px) {
	.rbs-hero__buttons {
		flex-direction: row;
	}
}

.rbs-hero__indikatoren {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: 56rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.rbs-hero__indikatoren {
		grid-template-columns: repeat(3, 1fr);
	}
}

.rbs-hero__indikator {
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--rbs-shadow-m);
	transition: box-shadow var(--rbs-transition);
}

.rbs-hero__indikator:hover {
	box-shadow: var(--rbs-shadow-l);
}

.rbs-hero__indikator-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-inline: auto;
	margin-block-end: 1rem;
	border-radius: var(--rbs-radius-m);
	background-color: var(--rbs-primary-10);
	color: var(--wp--preset--color--primary);
}

/*
 * Zeilenhöhen ab hier bewusst je Schriftgröße, nicht global.
 * Tailwind koppelt sie an die Größe (text-sm → 1.25rem, text-base → 1.5rem);
 * das theme.json setzt dagegen pauschal 1.6. Ohne diese Angaben werden Karten
 * und Textblöcke messbar höher als im Prototyp.
 */
.rbs-hero__indikator-titel {
	margin-block: 0 0.5rem;
	/* Im Prototyp ein <h3> – also Playfair Display. */
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5rem;
	font-weight: 700;
}

.rbs-hero__indikator-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Block: Über mich ---------- */

.rbs-ueber {
	background-color: var(--wp--preset--color--base);
}

.rbs-ueber__raster {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

@media (min-width: 768px) {
	.rbs-ueber__raster {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rbs-ueber__medien {
	position: relative;
}

.rbs-ueber__bild {
	margin: 0;
	border-radius: var(--rbs-radius-l);
	overflow: hidden;
	box-shadow: var(--rbs-shadow-xl);
}

.rbs-ueber__bild img {
	display: block;
	width: 100%;
	height: auto;
}

/* Qualifikationen liegen als farbiger Kasten über dem unteren Bildrand. */
.rbs-ueber__qualifikationen {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--wp--preset--spacing--40);
	border-end-start-radius: var(--rbs-radius-l);
	border-end-end-radius: var(--rbs-radius-l);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--primary) 95%, transparent),
		color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent)
	);
	color: var(--wp--preset--color--base);
}

.rbs-ueber__qual-titel {
	margin-block: 0 1rem;
	color: inherit;
	font-size: var(--wp--preset--font-size--x-large);
}

/*
 * Auf dem Handy schnitt der Qualifikationskasten den Kopf an.
 *
 * Gemessen: Das Bild ist dort 358 × 358 px, der Kasten 218 px hoch – **61 % der
 * Bildfläche**. Über ihm blieben 140 px, und genau bei 150 px endet das Haar.
 *
 * Am Kasten allein ist das nicht zu lösen: Enger gesetzt gewinnt er höchstens 20 px, und
 * der dritte Eintrag („Bachelor of Laws – Sozialversicherungsrecht") braucht auf dieser
 * Breite ohnehin zwei Zeilen. Deshalb bekommt der Bildausschnitt mehr Höhe – aus dem
 * Quadrat wird ein Hochformat. Das Foto ist quadratisch, `cover` beschneidet also die
 * Seiten und zeigt die volle Höhe; der Kopf rückt dadurch weit über den Kasten.
 *
 * Dazu der Kasten eine Spur enger – beides zusammen schafft rund 90 px Luft.
 */
@media (max-width: 767px) {
	.rbs-ueber__bild {
		aspect-ratio: 4 / 5;
	}

	.rbs-ueber__bild img {
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.rbs-ueber__qualifikationen {
		padding: var(--wp--preset--spacing--30);
	}

	.rbs-ueber__qual-titel {
		margin-block-end: 0.75rem;
		font-size: var(--wp--preset--font-size--large);
	}
}

.rbs-ueber__qual-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
}

.rbs-ueber__qual-liste > li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.rbs-ueber__qual-liste > li + li {
	margin-block-start: 0.5rem;
}

.rbs-ueber__qual-liste .rbs-icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-block-start: 0.15em;
}

.rbs-ueber__fliesstext {
	line-height: 1.625;
}

.rbs-ueber__fliesstext > :first-child {
	margin-block-start: 0;
}

.rbs-ueber__kennzahlen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rbs-radius-l);
	background-color: var(--wp--preset--color--page);
	list-style: none;
	text-align: center;
}

.rbs-ueber__kennzahl-wert {
	display: block;
	margin-block-end: 0.5rem;
	color: var(--wp--preset--color--primary);
	/* Im Prototyp ein <div>, keine Überschrift – also Inter. */
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.875rem;
	font-weight: 700;
}

.rbs-ueber__kennzahl-label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	font-weight: 500;
}

/* ---------- Block: Leistungen ---------- */

.rbs-leistungen {
	background-color: var(--wp--preset--color--secondary);
}

.rbs-leistungen__raster {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/*
 * Rasterelemente haben standardmäßig `min-width: auto` und schrumpfen nicht unter
 * die Mindestbreite ihres Inhalts. Auf schmalen Bildschirmen ragten Auswahl und
 * Detailbereich dadurch über den Rand hinaus.
 */
.rbs-leistungen__auswahl,
.rbs-leistungen__bereiche {
	min-width: 0;
}

/*
 * Dreispaltenraster wie im Entwurf: Die Auswahl belegt eine Spalte, der
 * Detailbereich zwei. Mit `1fr 2fr` läge der Zwischenraum anders und die Spalten
 * wären um rund 11px verschoben.
 */
@media (min-width: 768px) {
	.rbs-leistungen__raster {
		grid-template-columns: repeat(3, 1fr);
	}

	.rbs-leistungen__bereiche {
		grid-column: span 2;
	}
}

/* --- Auswahlliste links --- */

.rbs-leistungen__auswahl {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rbs-radius-l);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-l);
}

@media (min-width: 768px) {
	/* Bleibt beim Lesen langer Bereiche im Blick – im Entwurf `sticky top-28`. */
	.rbs-leistungen__auswahl {
		position: sticky;
		top: calc(var(--rbs-header-height) + 1rem);
	}
}

.rbs-leistungen__auswahl-liste {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rbs-leistungen__knopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--rbs-radius-s);
	background-color: var(--wp--preset--color--page);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-align: start;
	text-decoration: none;
	transition: background-color var(--rbs-transition), color var(--rbs-transition);
}

.rbs-leistungen__knopf .rbs-icon {
	color: var(--wp--preset--color--primary);
	transition: color var(--rbs-transition);
}

.rbs-leistungen__knopf:hover,
.rbs-leistungen__knopf:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

/* Aktiver Eintrag – die Klasse setzt main.js. */
.rbs-leistungen__knopf.is-aktiv,
.rbs-leistungen__knopf.is-aktiv:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.rbs-leistungen__knopf.is-aktiv .rbs-icon {
	color: var(--wp--preset--color--base);
}

/* --- Detailbereiche rechts --- */

.rbs-leistungen__bereiche {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--rbs-radius-l);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-l);
}

/*
 * Ohne JavaScript stehen alle Bereiche untereinander und werden durch eine Linie
 * getrennt. Sobald main.js die Tab-Bedienung nachrüstet, ist immer nur einer
 * sichtbar – dann ist die Trennlinie überflüssig.
 */
.rbs-leistungen__bereich + .rbs-leistungen__bereich {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--secondary);
}

.rbs-leistungen__bereiche.is-tabs .rbs-leistungen__bereich + .rbs-leistungen__bereich {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.rbs-leistungen__kopf {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-block-end: var(--wp--preset--spacing--40);
}

/*
 * ⚠️ `min-width: 0` ist hier der eigentliche Hebel, nicht die Silbentrennung.
 *
 * Flex-Elemente haben von Haus aus `min-width: auto` und weigern sich, unter die Breite
 * ihres längsten Wortes zu schrumpfen. Der Textkasten neben dem Icon war dadurch 357 px
 * breit, obwohl der Kopf nur 294 px hatte – „Erwerbsminderungsrente" in Playfair mit
 * 30 px misst genau so viel. Die ganze Seite wurde davon seitlich scrollbar (485 statt
 * 390 px auf dem iPhone).
 *
 * Solange das Element nie schmaler wird, entsteht auch kein Umbruchbedarf: Trennung und
 * `overflow-wrap` am Titel liefen deshalb ins Leere. Erst diese Zeile lässt den Kasten
 * schrumpfen – dann greifen sie.
 */
.rbs-leistungen__kopf > * {
	min-width: 0;
}

/*
 * Auf schmalen Bildschirmen steht das Icon über dem Titel statt daneben.
 *
 * Nebeneinander bleiben dem Titel von 294 px Kopfbreite nur 203 übrig – Icon (64) und
 * Abstand (16) nehmen den Rest. „Erwerbsminderungsrente" bräuchte darin 17 px Schriftgröße
 * und wäre kleiner als der Fließtext darunter. Untereinander stehen dem Titel die vollen
 * 294 px zur Verfügung.
 *
 * ⚠️ Die zugehörige Schriftgröße steht **weiter unten** hinter der Grundregel
 * `.rbs-leistungen__titel` – bei gleicher Spezifität gewinnt sonst die spätere Regel und
 * die Media-Query liefe wirkungslos mit.
 */
@media (max-width: 767px) {
	.rbs-leistungen__kopf {
		flex-direction: column;
		gap: 0.75rem;
	}
}

.rbs-leistungen__kopf-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--rbs-radius-l);
	background-color: var(--rbs-primary-10);
	color: var(--wp--preset--color--primary);
}

.rbs-leistungen__kopf-icon .rbs-icon {
	width: 2rem;
	height: 2rem;
}

/*
 * ⚠️ Silbentrennung ist hier keine Feinheit, sondern Pflicht. Die Leistungen heißen
 * „Erwerbsminderungsrente", „Widerspruchsverfahren", „Hinterbliebenenrente" – lange
 * Komposita ohne Leerzeichen. Auf dem Handy ist die Spalte 294 px breit, das Wort
 * „Erwerbsminderungsrente" in Playfair mit 30 px aber 357 px: Ohne erlaubte Trennstelle
 * wächst der Kasten mit und die **ganze Seite** wird seitlich scrollbar (gemessen: 485
 * statt 390 px).
 *
 * `-webkit-hyphens` muss mit: Ohne das Präfix trennt Safari auf dem iPhone nicht – und
 * genau dort ist es aufgefallen. Die Trennung greift, weil das Dokument `lang="de"`
 * trägt; ohne Sprachangabe kennt der Browser kein Wörterbuch.
 *
 * `overflow-wrap` als Auffangnetz für alles, wofür es keine Trennstelle gibt.
 */
.rbs-leistungen__titel,
.rbs-leistungen__untertitel {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.rbs-leistungen__titel {
	margin-block: 0 0.5rem;
	font-size: 1.875rem;
	line-height: 2.25rem;
}

.rbs-leistungen__untertitel {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/*
 * Eine Stufe kleiner auf dem Handy – gehört zum senkrechten Kopf weiter oben. Muss
 * **hinter** der Grundregel stehen: gleiche Spezifität, die spätere Regel gewinnt.
 * Bei 24 px misst „Erwerbsminderungsrente" 286 px und passt damit in die 294 px Spaltenbreite.
 */
@media (max-width: 767px) {
	.rbs-leistungen__titel {
		font-size: 1.5rem;
		line-height: 1.875rem;
	}
}

/* --- Bausteine im Detailbereich --- */

.rbs-leistungen__inhalt > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * Bewusste Abweichung vom Entwurf: Dort stehen diese Zwischenüberschriften in
 * Petrol. Auf Wunsch dunkel wie alle übrigen Überschriften der Seite.
 */
.rbs-leistungen__titel-klein {
	margin-block: 0 0.75rem;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.75rem;
}

.rbs-leistungen__titel-mittel {
	margin-block: 0 1rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

.rbs-leistungen__text {
	line-height: 1.625;
}

.rbs-leistungen__text > :first-child {
	margin-block-start: 0;
}

.rbs-leistungen__text > :last-child {
	margin-block-end: 0;
}

.rbs-leistungen__text + .rbs-checklist,
.rbs-leistungen__text + .rbs-leistungen__punkte {
	margin-block-start: 0.75rem;
}

.rbs-leistungen__trenner {
	margin-block: var(--wp--preset--spacing--50);
	border: 0;
	border-block-start: 1px solid #e5e7eb;
}

/*
 * Aufklappliste innerhalb eines Leistungsbereichs – für die Unterarten einer Rente
 * und für Einzelfragen. Bewusst schlichter als die FAQ-Sektion: kein Icon-Quadrat,
 * flacherer Schatten, engere Polsterung. Die Einträge stehen bereits im Panel einer
 * Leistung und sollen dieses nicht optisch überstimmen.
 */
.rbs-leistungen__aufklappliste {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block-start: 1rem;
}

.rbs-leistungen__aufklapp {
	border: 1px solid #e5e7eb;
	border-radius: var(--rbs-radius-m);
	background-color: var(--wp--preset--color--base);
	transition: border-color var(--rbs-transition), box-shadow var(--rbs-transition);
}

.rbs-leistungen__aufklapp:hover,
.rbs-leistungen__aufklapp[open] {
	border-color: var(--rbs-primary-20);
	box-shadow: var(--rbs-shadow-m);
}

.rbs-leistungen__aufklapp-kopf {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem var(--wp--preset--spacing--40);
	cursor: pointer;
	list-style: none;
}

/* Das voreingestellte Dreieck von <summary> weg – wir zeigen ein eigenes Chevron. */
.rbs-leistungen__aufklapp-kopf::-webkit-details-marker {
	display: none;
}

.rbs-leistungen__aufklapp-titel {
	flex: 1;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	font-weight: 700;
}

.rbs-leistungen__aufklapp-chevron {
	flex-shrink: 0;
	margin-block-start: 0.15rem;
	color: var(--wp--preset--color--primary);
	transition: transform var(--rbs-transition);
}

.rbs-leistungen__aufklapp[open] .rbs-leistungen__aufklapp-chevron {
	transform: rotate(180deg);
}

.rbs-leistungen__aufklapp-inhalt {
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.rbs-leistungen__aufklapp-inhalt > :first-child {
	margin-block-start: 0;
}

.rbs-leistungen__aufklapp-inhalt .rbs-checklist {
	margin-block-start: 0.75rem;
}

/* Farbig abgesetzter Kasten – im Entwurf bg-petrol/5 mit Rand in petrol/10. */
.rbs-leistungen__hinweis {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--rbs-primary-10);
	border-radius: var(--rbs-radius-m);
	background-color: var(--rbs-primary-05);
}

.rbs-leistungen__hinweis-titel {
	margin-block: 0 0.5rem;
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.75rem;
}

/* Grauer Kasten mit zweispaltiger Punkteliste. */
.rbs-leistungen__zweispalter {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rbs-radius-m);
	background-color: var(--wp--preset--color--page);
}

.rbs-leistungen__punkte {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.rbs-leistungen__punkte {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rbs-leistungen__punkte > li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rbs-leistungen__punkte > li::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: var(--rbs-radius-pill);
	background-color: var(--wp--preset--color--primary);
}

.rbs-leistungen__offen {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/* ---------- Block: Übergang ---------- */

/*
 * Der Abschnitt zwischen Leistungen und FAQ: eine Aussage, daneben das freigestellte
 * Porträt.
 *
 * ⚠️ Die Polsterung ist mit `spacing--50` kleiner als die `spacing--70` der übrigen
 * Sektionen. Grund: Hier bestimmt **das Bild** die Bauhöhe, nicht der Text – jede
 * zusätzliche Polsterung käme oben auf die volle Bildhöhe obendrauf. Mit dem knapperen
 * Wert bleibt der Abschnitt kompakt, obwohl das Porträt darin größer steht.
 *
 * ⚠️ **Wer diesen Wert ändert, muss `margin-block-end` an `.rbs-uebergang__person`
 * mitziehen** – der hebt genau die untere Polsterung wieder auf, damit das Bild bündig
 * abschließt. Sonst entsteht dort ein Spalt oder ein Überstand.
 */
.rbs-uebergang {
	position: relative;
	padding-block: var(--wp--preset--spacing--50);
	background-position: center;
	background-size: cover;
	color: var(--wp--preset--color--base);
}

/*
 * Petrolfarbener Schleier – dieselbe Formel wie in der Kontakt-Sektion. Hier stand
 * bis 2026-08-07 der Ablauf mit neutralschwarzer Abdunklung; die Kontakt-Sektion
 * hatte seinerzeit Petrol bekommen, gerade damit nicht zwei gleich aussehende
 * dunkle Bildflächen entstehen. Dass jetzt beide petrol sind, ist gewollt: Aus der
 * Ausnahme wird die Regel, und unterschieden werden sie über Motiv und Bauhöhe.
 */
.rbs-uebergang--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-dark) 88%, transparent);
}

/* Ohne das läge der gesamte Inhalt unter dem Schleier. */
.rbs-uebergang .rbs-section__in {
	position: relative;
}

/*
 * Auf der petrolfarbenen Fläche ist alles weiß. Der Pfeil steht mit in der Liste,
 * obwohl er zurzeit nicht gerendert wird – das ACF-Feld ist nur leer, nicht entfernt,
 * und wer es wieder füllt, soll keinen petrolfarbenen Pfeil auf Petrol bekommen.
 */
.rbs-uebergang .rbs-section__title,
.rbs-uebergang .rbs-section__lead,
.rbs-uebergang .rbs-weiter__link {
	color: var(--wp--preset--color--base);
}

/*
 * Die Aussage steht allein in ihrer Spalte – der Standardabstand darunter hätte nichts,
 * worauf er sich bezieht. `text-wrap: balance` verteilt die Zeilen gleichmäßig, statt
 * eine kurze Schlusszeile stehen zu lassen; bei einem einzelnen Satz ist genau das der
 * Unterschied.
 *
 * Die Zeilenhöhe liegt bewusst über den globalen 1.6: Der Satz steht als Block für sich,
 * und mit dem Normalmaß klebten die Zeilen aufeinander. Von 1.9 auf 1.75 zurückgenommen
 * (2026-08-07) – der erste Wert riss sie zu weit auseinander.
 *
 * ⚠️ **Keine `max-width` hier.** Eine Begrenzung auf 38rem hatte den Satz einmal
 * dreizeilig gebrochen – ausprobiert und verworfen. Die Spaltenbreite regelt den
 * Umbruch jetzt von selbst.
 */
.rbs-uebergang .rbs-section__title {
	margin-block-end: 0;
	line-height: 1.75;
	text-wrap: balance;
}

/* ---- Zweispaltig, sobald ein Porträt gesetzt ist ---- */

/*
 * Die Zweispaltigkeit hängt an `--mit-person`, nicht an der Sektion selbst: Ohne
 * gefülltes Bildfeld bleibt der Abschnitt einspaltig und die Aussage steht mittig
 * über die volle Breite – so, wie er vor dem 2026-08-07 aussah.
 *
 * `align-items: end` setzt beide Spalten auf dieselbe Grundlinie; die Textspalte ist
 * kürzer und rutscht dadurch nach unten neben das Bild statt oben zu kleben.
 */
@media (min-width: 768px) {
	.rbs-uebergang--mit-person .rbs-uebergang__raster {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: var(--wp--preset--spacing--60);
	}

	/*
	 * Nur zweispaltig linksbündig – einspaltig bleibt die Aussage mittig.
	 *
	 * Die Schrift ist hier eine Stufe größer als die 2.25rem der übrigen Sektionstitel:
	 * Der Abschnitt trägt nur diesen einen Satz, er darf die Sektion also führen statt
	 * sie nur zu überschreiben.
	 */
	.rbs-uebergang--mit-person .rbs-section__title {
		text-align: start;
		font-size: 2.75rem;
	}

	/*
	 * Zwei Werte, die zusammengehören:
	 *
	 * `max-width` steuert den Umbruch. Ohne Begrenzung nähme die Spalte alles, was das
	 * Bild übrig lässt (rund 780 px), und der Satz stünde zweizeilig quer durch die
	 * Sektion. Bei 44 rem bricht er in der hiesigen Schriftgröße dreizeilig – so gewollt.
	 * ⚠️ Wer die Schriftgröße ändert, muss diesen Wert mitziehen, sonst kippt der
	 * Umbruch auf zwei oder vier Zeilen. Als Faustregel: beide im selben Verhältnis.
	 *
	 * `align-self: center` stellt den Satz auf die Mitte der Sektion. Das Raster steht
	 * auf `align-items: end`, damit das Porträt unten bündig abschließt – der Text
	 * hinge sonst an derselben Grundlinie und säße dadurch sehr tief.
	 */
	.rbs-uebergang__text {
		max-width: 44rem;
		align-self: center;
	}

	/*
	 * Oben keine Polsterung, sobald das Porträt steht: **Das Bild bestimmt hier die
	 * Bauhöhe**, jede Polsterung käme auf die volle Bildhöhe obendrauf. Der Freisteller
	 * bringt seinen Weißraum selbst mit – über dem Kopf liegen 6,6 % durchsichtiger Rand,
	 * bei dieser Größe rund 32 px. Ohne diesen Griff wäre der Abschnitt 512 px hoch,
	 * mit ihm 480 px – bei einem um ein Fünftel größeren Porträt.
	 *
	 * Nur in der zweispaltigen Ansicht: Einspaltig (kein Bild oder Handy) kann der Text
	 * mehr Zeilen brauchen und klebte sonst an der Oberkante.
	 */
	.rbs-uebergang--mit-person {
		padding-block-start: 0;
	}
}

/*
 * ⚠️ Das Porträt schließt **bündig mit der Unterkante der Sektion** ab. Es ist ein
 * Halbporträt mit hart abgeschnittener Unterkante; frei in der Fläche schwebte ein
 * abgeschnittener Oberkörper. Der negative Außenabstand hebt genau die untere
 * Polsterung der Sektion auf – für die Textspalte bleibt sie erhalten. Wer
 * `padding-block` der Sektion ändert, muss diesen Wert mitziehen.
 */
.rbs-uebergang__person {
	position: relative;
	max-width: 24rem;
	margin: 0 auto;
	margin-block-end: calc(-1 * var(--wp--preset--spacing--50));
}

/*
 * Die hellere Fläche hinter der Person. Sie hellt das abgedunkelte Hintergrundfoto auf,
 * statt eine dritte Farbe einzuführen – dadurch wirkt sie über jedem Motiv.
 *
 * Der Wert oben ist der Stellwert für den Überstand: Der oberste deckende Bildpunkt des
 * Freistellers liegt bei 6,6 % der Höhe (gemessen an der Bounding-Box). Bei 20 % steht
 * der Kopf sichtbar über der Kante. Wer das Bild austauscht, prüft diesen Wert neu.
 */
.rbs-uebergang__person::before {
	content: "";
	position: absolute;
	inset: 20% 0 0 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
}

/* Ohne das läge die Person hinter ihrer eigenen Fläche. */
.rbs-uebergang__person img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	/*
	 * Einspaltig steht das Porträt unter dem Satz. Der Abstand dazwischen ist knapper
	 * als die übliche Sektionsluft (`spacing--30` statt `spacing--50`): Beide gehören
	 * inhaltlich zusammen, und auf dem schmalen Schirm rissen 2 rem sie auseinander.
	 */
	.rbs-uebergang__person {
		max-width: 15rem;
		margin-block-start: var(--wp--preset--spacing--30);
	}
}

/* ---------- Block: FAQ ---------- */

.rbs-faq {
	background-color: var(--wp--preset--color--base);
}

/*
 * Zwei eigenständige Spalten (Markup siehe blocks/faq/render.php). Ein Raster
 * würde nebeneinanderliegende Fragen an eine gemeinsame Zeilenhöhe koppeln –
 * beim Aufklappen entstünde neben der kürzeren Frage eine große Leerfläche.
 */
.rbs-faq__liste {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.rbs-faq__spalte {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {
	.rbs-faq__liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

.rbs-faq__item {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rbs-radius-l);
	background-color: var(--wp--preset--color--page);
	box-shadow: var(--rbs-shadow-m);
	/*
	 * `opacity` und `transform` müssen mitstehen: Diese Regel folgt auf
	 * `.rbs-fade-in` und ersetzt deren Kurzschreibweise vollständig. Ohne sie
	 * sprangen die Fragen ohne Übergang auf sichtbar und das gestaffelte
	 * Erscheinen war nicht zu sehen. Dauer wie in den übrigen Sektionen: 300ms.
	 */
	transition: opacity 300ms ease-out, transform 300ms ease-out, box-shadow 300ms ease-out;
	transition-delay: var(--rbs-delay, 0s);
}

/*
 * Einspaltig gilt eine andere Einblend-Reihenfolge. Das Markup ist nach Spalten
 * aufgebaut, und `--rbs-delay` rechnet daraus die Rasterposition zurück (links, rechts,
 * links …). Untereinander gestellt ergibt das ein Durcheinander – bei fünf Fragen
 * 0 – 0,16 – 0,32 – 0,08 – 0,24s. `--rbs-delay-mobil` zählt schlicht das Markup durch.
 *
 * ⚠️ **Hier wird `transition-delay` umgestellt, nicht `--rbs-delay`.** Die Variable
 * steht als Inline-Style am Element, und Inline gewinnt gegen jede Stylesheet-Regel –
 * auch gegen eine Media-Query, auch bei Custom Properties. Ein Überschreiben von
 * `--rbs-delay` lief deshalb wirkungslos mit. Die Eigenschaft selbst dagegen wird hier
 * ganz normal gesetzt; die Regel steht nach der obigen und gewinnt bei gleicher
 * Spezifität.
 */
@media (max-width: 767px) {
	.rbs-faq__item {
		transition-delay: var(--rbs-delay-mobil, 0s);
	}
}

.rbs-faq__item:hover {
	box-shadow: var(--rbs-shadow-l);
}

.rbs-faq__frage {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
}

/* Das voreingestellte Dreieck von <summary> weg – wir zeigen ein eigenes Chevron. */
.rbs-faq__frage::-webkit-details-marker {
	display: none;
}

.rbs-faq__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--rbs-radius-m);
	background-color: var(--rbs-primary-10);
	color: var(--wp--preset--color--primary);
}

.rbs-faq__frage-text {
	flex: 1;
	padding-block-start: 0.65rem;
	color: var(--wp--preset--color--heading);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	/* Ausdrücklich wie im Prototyp (text-lg): sonst greift die geerbte 1.6 und
	   die Zeilenreservierung unten rechnet mit einem anderen Wert als das Rendern. */
	line-height: 1.75rem;
	font-weight: 700;
}

/*
 * Die geschlossenen Fragen werden auf eine einheitliche Höhe gebracht, damit die
 * beiden Spalten auf gleicher Höhe bleiben. Das übernimmt main.js, weil die nötige
 * Höhe von der Fensterbreite abhängt: Je schmaler die Spalte, desto mehr Zeilen
 * braucht eine Frage. Eine feste Zeilenzahl in CSS würde bei manchen Breiten
 * zu knapp und bei anderen zu großzügig ausfallen.
 *
 * Ohne JavaScript stehen die Fragen in ihrer natürlichen Höhe – die Spalten
 * verrutschen dann leicht gegeneinander, bleiben aber vollständig lesbar.
 */

.rbs-faq__chevron {
	flex-shrink: 0;
	margin-block-start: 0.9rem;
	color: var(--wp--preset--color--primary);
	transition: transform var(--rbs-transition);
}

.rbs-faq__item[open] .rbs-faq__chevron {
	transform: rotate(180deg);
}

.rbs-faq__antwort {
	margin-block-start: 0.75rem;
	padding-inline-start: 4rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625;
}

.rbs-faq__antwort > :first-child {
	margin-block-start: 0;
}

@media (max-width: 600px) {
	.rbs-faq__antwort {
		padding-inline-start: 0;
	}
}

/* ---------- Block: Kontakt-Aufruf ---------- */

/*
 * Die Sektion trug bis 2026-08-02 eine vollflächige Petrolfläche. Mit dem
 * Formular darin wurde daraus zu viel Farbe auf einmal. Jetzt: das Foto aus dem
 * Hero, kräftig abgedunkelt, und das Formular als helle Box darauf.
 *
 * Ohne Bild bleibt es dunkel (Petrol dunkel) statt hell zu werden – so gibt es
 * nur *ein* Farbschema im Block, und alle Farben darin stimmen weiterhin.
 */
.rbs-cta {
	position: relative;
	background-color: var(--wp--preset--color--primary-dark);
	background-position: center;
	background-size: cover;
	color: var(--wp--preset--color--base);
	text-align: center;
}

/*
 * Abdunklung in Petrol statt in Neutralschwarz. Die Ablauf-Sektion nutzt bereits
 * ein Foto mit `rgb(0 0 0 / 50%)`; mit demselben Schleier hätte die Seite zwei
 * praktisch gleich aussehende dunkle Bildflächen. Der petrolfarbene Schleier hält
 * außerdem die Markenfarbe im Bild – sonst käme sie nach diesem Umbau nirgends
 * mehr als Fläche vor.
 */
.rbs-cta--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-dark) 88%, transparent);
}

/* Ohne das läge der gesamte Inhalt unter dem Schleier. */
.rbs-cta .rbs-section__in {
	position: relative;
}

@media (min-width: 768px) {
	.rbs-cta {
		padding-block: var(--wp--preset--spacing--80);
	}
}

.rbs-cta__titel {
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--base);
}

/* Prototyp: text-xl (Zeilenhöhe 1.75rem), mb-10 = 2.5rem. */
.rbs-cta__text {
	max-width: 42rem;
	margin-inline: auto;
	margin-block: 0 2.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.75rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
}

.rbs-cta__aktion {
	margin-block: 0 var(--wp--preset--spacing--60);
}

/* ---------- Kontaktformular (in der Kontakt-Sektion) ---------- */

/*
 * Das Formular steht auf dem petrolfarbenen Grund der Sektion und übernimmt die
 * Formensprache der Kontaktkacheln darunter: weiße Fläche mit 10 % Deckkraft,
 * gleicher Eckenradius. Die Sektion ist mittig gesetzt – die Felder aber nicht:
 * Linksbündige Beschriftungen sind in einem Formular deutlich leichter zu lesen.
 */
/*
 * Zwei Spalten: links das Formular, rechts die Kontaktkacheln untereinander.
 * Einspaltig bis 900 px – darunter stünden zwei Spalten so schmal, dass die
 * Eingabefelder unbrauchbar würden. Der Umbruchpunkt liegt bewusst über den
 * 768 px der übrigen Sektionen: Das Formular braucht mehr Platz als eine Karte.
 */
.rbs-cta__spalten {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	text-align: start;
}

@media (min-width: 900px) {
	.rbs-cta__spalten {
		grid-template-columns: 1.2fr 0.8fr;
		gap: var(--wp--preset--spacing--60);
	}

	/* Ohne Formular gehören die Kacheln wieder über die volle Breite. */
	.rbs-cta__spalten.ist-einspaltig {
		grid-template-columns: 1fr;
	}
}

/*
 * Die helle Box. Sie ist das einzige weiße Element auf der abgedunkelten Sektion
 * und zieht den Blick dadurch von selbst auf sich – die Kontaktkacheln daneben
 * bleiben bewusst halbtransparent, damit sie nicht mit ihr konkurrieren.
 *
 * ⚠️ Ab hier gilt heller Grund. Sämtliche Farben in diesem Abschnitt waren bis
 * 2026-08-02 für die petrolfarbene Fläche gebaut (weiße Schrift, Felder als
 * 10 % weiße Flächen). Wer hier etwas ergänzt, prüft die Farbe gegen Weiß, nicht
 * gegen Petrol.
 */
.rbs-formular {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--rbs-radius-l);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--rbs-shadow-xl);
	color: var(--wp--preset--color--contrast);
}

.rbs-formular__titel {
	/* Ein <h3> – also Playfair Display, siehe Schriftregel. */
	margin-block: 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--x-large);
}

.rbs-formular__form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.rbs-formular__feld {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.rbs-formular__feld label {
	/*
	 * Beschriftungen sind <label>, keine Überschriften – also Inter. Ohne
	 * ausdrückliche Zeilenhöhe erbte das Feld den globalen Wert aus theme.json
	 * und die Zeilen stünden weiter auseinander als im übrigen Entwurf.
	 */
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.25rem;
}

.rbs-formular__pflicht {
	color: var(--wp--preset--color--primary);
}

.rbs-formular__optional {
	margin-inline-start: 0.35rem;
	color: var(--wp--preset--color--muted);
	font-weight: 300;
}

.rbs-formular__feld input[type="text"],
.rbs-formular__feld input[type="email"],
.rbs-formular__feld input[type="tel"],
.rbs-formular__feld textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--rbs-primary-20);
	border-radius: var(--rbs-radius-m);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	/* `font: inherit` fehlt Formularfeldern von Haus aus – sonst rendern sie in
	   der Standardschrift des Browsers statt in Inter. */
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.5rem;
	transition: border-color var(--rbs-transition), background-color var(--rbs-transition);
}

.rbs-formular__feld textarea {
	resize: vertical;
}

.rbs-formular__feld ::placeholder {
	color: var(--wp--preset--color--muted);
}

.rbs-formular__feld input:focus-visible,
.rbs-formular__feld textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	background-color: var(--wp--preset--color--base);
}

/*
 * Eine Sonderbehandlung für automatisch ausgefüllte Felder braucht es hier
 * nicht mehr: Browser färben sie hell mit dunkler Schrift, und genau das passt
 * seit 2026-08-02 zur hellen Box. Auf dem früheren petrolfarbenen Grund war
 * dafür ein Innenschatten nötig.
 */

.rbs-formular__feld.hat-fehler input,
.rbs-formular__feld.hat-fehler textarea {
	border-color: var(--rbs-fehler);
}

.rbs-formular__fehler {
	color: var(--rbs-fehler);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
}

/* Einwilligung: Haken links, Text daneben – nicht untereinander wie die übrigen Felder. */
.rbs-formular__feld--einwilligung {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

.rbs-formular__feld--einwilligung input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}

.rbs-formular__feld--einwilligung label {
	color: var(--wp--preset--color--contrast);
	font-weight: 300;
}

.rbs-formular__feld--einwilligung a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.rbs-formular__feld--einwilligung .rbs-formular__fehler {
	grid-column: 2;
}

/* Linksbündig wie die Felder darüber – mittig stünde der Knopf ohne Bezug zur Spalte. */
.rbs-formular__aktion {
	margin-block: var(--wp--preset--spacing--20) 0;
	text-align: start;
}

/*
 * In der schmaleren Spalte wäre der Knopf mit `px-10 py-5` aus dem Entwurf zu
 * wuchtig – er säße fast randlos. Deshalb hier eine Nummer kleiner; die übrigen
 * Buttons der Seite bleiben unberührt.
 */
.rbs-formular__aktion .rbs-button {
	padding: 0.875rem 2rem;
	font-size: var(--wp--preset--font-size--large);
}

.rbs-formular__hinweis {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem;
	text-align: start;
}

/* Meldungen nach dem Absenden – innerhalb der hellen Box. */
.rbs-formular__meldung {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-block: 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--rbs-primary-20);
	border-radius: var(--rbs-radius-l);
	background-color: var(--rbs-primary-05);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5rem;
}

.rbs-formular__meldung .rbs-icon {
	flex-shrink: 0;
	margin-block-start: 0.15rem;
}

.rbs-formular__meldung:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.rbs-formular__meldung--fehler {
	border-color: var(--rbs-fehler);
	background-color: var(--rbs-fehler-flaeche);
	color: var(--rbs-fehler);
}

.rbs-formular__meldung--fehler a {
	color: var(--rbs-fehler);
}

.rbs-formular__meldung--fehler:focus-visible {
	outline-color: var(--rbs-fehler);
}

/*
 * Honigtopf gegen Formularautomaten: für Menschen unsichtbar, im Markup aber
 * vorhanden. Bewusst **nicht** `display: none` – darauf sind Automaten längst
 * eingestellt und überspringen solche Felder. Das Ausblenden über ein
 * zusammengeschnittenes 1×1-Pixel erzeugt außerdem keine Seitenbreite, anders
 * als das oft gezeigte `left: -9999px`.
 */
.rbs-formular__falle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/*
 * Standardmäßig **untereinander** – so stehen die Kacheln in der rechten Spalte
 * neben dem Formular. Nebeneinander stehen sie nur noch, wenn das Formular
 * abgeschaltet ist und die Sektion die volle Breite hat.
 */
.rbs-cta__kontakte {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.rbs-cta__spalten.ist-einspaltig .rbs-cta__kontakte {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

.rbs-cta__kontakt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--rbs-radius-l);
	background-color: rgb(255 255 255 / 10%);
	backdrop-filter: blur(4px);
}

.rbs-cta__kontakt-kopf {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 0.35rem;
}

/* Ohne Formular stehen die Kacheln wieder mittig wie zuvor. */
.rbs-cta__spalten.ist-einspaltig .rbs-cta__kontakt {
	text-align: center;
	padding: var(--wp--preset--spacing--40);
}

.rbs-cta__spalten.ist-einspaltig .rbs-cta__kontakt-kopf {
	justify-content: center;
	margin-block-end: 0.75rem;
}

.rbs-cta__kontakt-label {
	/* Im Prototyp ein <h3> – also Playfair Display. */
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.rbs-cta__kontakt-wert {
	color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: color var(--rbs-transition);
}

a.rbs-cta__kontakt-wert:hover,
a.rbs-cta__kontakt-wert:focus-visible {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

/* ---------- Editor-Hinweis für leere Blöcke ---------- */

.rbs-block-placeholder {
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--muted);
	border-radius: var(--rbs-radius-s);
	color: var(--wp--preset--color--muted);
	text-align: center;
}