/* =======================================================================
 * "Über Silvalue" — Redesign nach Designvorlage (Word-Dokument, sechs
 * Bildschirme: Hero, 01/Warum, 02/Werdegang, 03/Perspektive, 04/
 * Arbeitsweise, 05/Qualifikationen), 2026-09-30.
 * =======================================================================
 * Nur auf dieser Seite wirksam (is_page('ueber-silvalue') in functions.php,
 * silvalue_enqueue_assets()) — dasselbe Isolationsmuster wie
 * home-redesign.css/services-redesign.css. Betreiberauftrag: "test es aber
 * zuerst im local und importieren es nicht automatisch auf die online
 * seite" — diese Datei läuft bis auf Weiteres NUR auf der lokalen Sandbox
 * (silvalue-at-redesign.local), noch nicht auf silvalue.at.
 *
 * Löst die bisherige generische Inhaltsseiten-Vorlage (patterns/
 * content-page-de.php, Klasse "sv-content-page", 1.280px-Prosa-Spalte,
 * siehe content-page-redesign.css) auf dieser einen Seite ab — die
 * Designvorlage zeigt keine durchlaufende Fließtext-Seite mehr, sondern
 * sechs abwechselnd helle/dunkle Vollbreite-Abschnitte mit Rasterlayouts,
 * strukturell identisch zum bereits umgesetzten Redesign von Startseite
 * (home-redesign.css) und Leistungsübersicht (services-redesign.css).
 * content-page-redesign.css bleibt unverändert bestehen (wird von anderen
 * Seiten wie Kontakt weiterhin gebraucht) — ihre body.sv-page-about-Regeln
 * greifen auf dieser Seite ab jetzt einfach ins Leere, weil die Klasse
 * ".sv-content-page" im neuen Markup nicht mehr vorkommt.
 *
 * Breitensystem: dieselbe Shell-Ebene wie Startseite/Leistungsübersicht
 * (--sv2-content-max, 1.680px) statt der Content-Ebene (1.280px), die
 * content-page-redesign.css für die bisherige reine Prosa-Seite verwendet
 * hatte — die Designvorlage zeigt randlose, breite Abschnitte im selben
 * Duktus wie die bereits umgesetzten Seiten, keine schmale Textspalte mehr.
 *
 * Seiten-Vorlage: auf "page-no-title" umgestellt (wie die
 * Leistungsübersicht), weil der Hero unten seine eigene H1 mitbringt — ein
 * zusätzlicher automatischer wp:post-title-Seitentitel darüber wäre eine
 * redundante zweite Überschrift, die die Vorlage nicht zeigt.
 * ===================================================================== */

/* -----------------------------------------------------------------------
 * 1) Hero — zweispaltig: Textspalte links (dunkel), Porträtfoto rechts.
 * -------------------------------------------------------------------- */
.sv-about-hero {
	background: var(--wp--preset--color--sv-r-ink) !important;
	max-width: none;
	padding-inline: var(--sv2-gutter) !important;
}

.sv-about-hero__inner {
	max-width: var(--sv2-content-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--lg);
	padding-block: var(--wp--preset--spacing--xl);
}

.sv-about-hero__copy {
	flex: 1 1 420px;
	min-width: 320px;
}

.sv-about-hero__copy .sv-section-eyebrow {
	color: var(--wp--preset--color--sv-r-accent) !important;
}

.sv-about-hero__copy h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sv-r-hero);
	font-weight: 500;
	line-height: 1.05;
	color: var(--wp--preset--color--sv-r-bg);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

/* NACHTRAG 2026-10-07 — Betreiberauftrag: Hero-Einleitung von einem auf
 * zwei Absätze erweitert (persönliche Vorstellung) — "margin:0" reichte
 * für einen einzelnen Absatz, jetzt unterer Rand zwischen den Absätzen
 * nötig, beim letzten wieder auf 0. */
.sv-about-hero__copy p.sv-about-hero__intro {
	font-size: var(--wp--preset--font-size--sv-r-body);
	color: var(--wp--preset--color--sv-r-bg);
	opacity: 0.86;
	max-width: 46em;
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.sv-about-hero__copy p.sv-about-hero__intro:last-child {
	margin-bottom: 0;
}

/* NACHTRAG 2026-10-07 (3) — Betreiberauftrag: Porträtfoto weder als
 * gleichwertige, auf volle Spaltenhöhe gestreckte zweite Spalte (frühere
 * Fassung) noch als kleines Byline-Thumbnail (verworfen, wirkte deplatziert)
 * — stattdessen moderate, feste Bildgröße, vertikal zentriert neben dem
 * Text, mit mehr Weißraum/Hintergrund rundherum statt vollflächiger
 * Streckung. */
.sv-about-hero__media {
	flex: 0 1 340px;
	width: 340px;
	max-width: 100%;
	aspect-ratio: 4 / 5;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.sv-about-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Diagonales Linienmuster über dem Porträt entfernt (Betreiberwunsch
   2026-10-09: "Striche über dem Porträtbild müssen weg"). */

@media (max-width: 680px) {
	.sv-about-hero__media {
		width: 100%;
		max-width: 320px;
	}
}

/* -----------------------------------------------------------------------
 * 2) Gemeinsamer Abschnittsrahmen für helle/dunkle Vollbreite-Bänder,
 *    dieselbe Technik wie #leistungen/#kontakt (Startseite) und
 *    .sv-services-redesign (Leistungsübersicht).
 * -------------------------------------------------------------------- */
.sv-about-section {
	max-width: none;
	padding-inline: var(--sv2-gutter) !important;
	padding-block: var(--wp--preset--spacing--xl);
}

.sv-about-section > * {
	max-width: var(--sv2-content-max);
	margin-inline: auto;
}

.sv-about-section--light {
	background: var(--wp--preset--color--sv-r-bg) !important;
}

.sv-about-section--dark {
	background: var(--wp--preset--color--sv-r-ink) !important;
}

.sv-about-section--dark h2,
.sv-about-section--dark h3,
.sv-about-section--dark p,
.sv-about-section--dark .sv-about-meaning {
	color: var(--wp--preset--color--sv-r-bg);
}

.sv-about-section--light h2,
.sv-about-section--light h3 {
	color: var(--wp--preset--color--sv-r-ink);
}

.sv-about-section--light p {
	color: var(--wp--preset--color--sv-r-text-soft);
}

.sv-about-section--dark .sv-section-eyebrow {
	color: var(--wp--preset--color--sv-r-accent) !important;
}

.sv-about-section--light .sv-section-eyebrow {
	color: var(--wp--preset--color--sv-r-accent-text) !important;
}

/* NACHTRAG 2026-10-07 — Bugfix: "margin: 0 0 ..." setzte links/rechts
 * explizit auf 0 und überschrieb damit die zentrierende
 * "margin-inline: auto" aus der ".sv-about-section > *"-Regel (Abschnitt 2)
 * — dort, wo die Überschrift DIREKTES Kind von .sv-about-section ist (04/
 * Arbeitsweise, 05/Qualifikationen, ohne umschließendes "__head"-Div),
 * klebte das h2 dadurch am linken Rand der Abschnittsfläche statt im
 * 1.680px-Inhaltsraster zu zentrieren, wie Eyebrow und Grid direkt
 * darunter. Wo das h2 stattdessen in einem bereits zentrierten "__head"-
 * Wrapper sitzt (01/Warum, 02/Werdegang), bewirkt margin-inline:auto
 * nichts Sichtbares, da es dort schon die volle Breite des Wrappers
 * einnimmt. */
.sv-about-section h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sv-r-heading);
	font-weight: 500;
	line-height: 1.1;
	margin-block: 0 var(--wp--preset--spacing--sm);
	margin-inline: auto;
}

/* -----------------------------------------------------------------------
 * 3) 01 / Warum — Dreispaltiges Raster: Titel-Spalte, Fließtext-Spalte,
 *    "Kernversprechen"-Kachel.
 * -------------------------------------------------------------------- */
.sv-about-why__grid {
	display: grid;
	grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) minmax(240px, 320px);
	column-gap: var(--wp--preset--spacing--lg);
	align-items: start;
}

.sv-about-why__head h2 {
	margin: 0;
}

.sv-about-why__body p {
	color: var(--wp--preset--color--sv-r-text-soft);
	font-size: var(--wp--preset--font-size--sv-r-body);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.sv-about-why__body p:last-child {
	margin-bottom: 0;
}

/* NACHTRAG 2026-09-30 — Betreiberauftrag: "Silva" und "Value" im
 * Namens-Erklärungssatz farblich hervorheben, damit die Herkunft des
 * Namens schon auf den ersten Blick auffällt statt erst beim Lesen. */
.sv-about-name-highlight {
	color: var(--wp--preset--color--sv-r-accent-text);
	font-weight: 600;
}

/* NACHTRAG 2026-09-30 — Betreiberauftrag: erklärender Absatz unter dem
 * Zitat entfernt, Kernversprechen-Kachel stattdessen zentriert (Eyebrow
 * + Zitat), da die Kachel jetzt nur noch aus diesen zwei Zeilen besteht. */
.sv-about-why__promise {
	background: var(--wp--preset--color--sv-r-ink);
	padding: var(--wp--preset--spacing--md);
	border-radius: 4px;
	text-align: center;
}

.sv-about-why__promise .sv-section-eyebrow {
	color: var(--wp--preset--color--sv-r-accent) !important;
}

.sv-about-why__promise h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--sv-r-bg);
	margin: 0;
}

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

/* -----------------------------------------------------------------------
 * 4) 02 / Werdegang — Kopfzeile (nur Eyebrow + H2, kein zweispaltiges
 *    Raster mehr — NACHTRAG 2026-09-30: erklärender Zwischensatz entfernt),
 *    darunter ein gemeinsames Vierspalten-Raster (Trennlinien senkrecht).
 * -------------------------------------------------------------------- */
.sv-about-career__head {
	margin-bottom: var(--wp--preset--spacing--lg);
}

.sv-about-career__head h2 {
	margin: 0;
}

.sv-about-career__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--md);
}

/* NACHTRAG 2026-09-30 — Betreiberauftrag: die letzte Zeile jeder der 4
 * Spalten soll unabhängig von der Textlänge auf derselben Höhe enden.
 * Da .sv-about-career__grid ein CSS-Grid ist, werden die Spalten per
 * Default-Stretch bereits auf die Höhe der längsten Spalte gebracht. */
.sv-about-career__col {
	border-top: 2px solid var(--wp--preset--color--sv-r-accent);
	padding-top: var(--wp--preset--spacing--sm);
	display: flex;
	flex-direction: column;
}

.sv-about-career__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sv-r-accent);
}

/* NACHTRAG 2026-09-30 — Betreiberauftrag: Werdegang-Spalten von Fließtext
 * (H3 + Absatz + "Bedeutung"-Zeile) auf Stichpunktlisten umgestellt; die
 * Spalten-Kennung (Ausbildung/Österreich/...) fungiert jetzt selbst als
 * Überschrift, deshalb deutlich größer als die übrigen Eyebrow-Labels.
 *
 * NACHTRAG 2026-09-30 (2) — Betreiberauftrag: nicht die ganze Liste als
 * Block nach unten schieben, sondern den Zwischenraum zwischen den
 * einzelnen Punkten flexibel wachsen lassen, damit der Block über seine
 * volle (gestreckte) Höhe gefüllt wirkt. flex:1 lässt die Liste die
 * restliche Spaltenhöhe einnehmen, justify-content:space-between verteilt
 * den Freiraum dann zwischen den Punkten (gap bleibt als Mindestabstand
 * erhalten, falls eine Spalte kaum mehr Raum als ihr Inhalt braucht). */
.sv-about-career__list {
	list-style: none;
	margin: var(--wp--preset--spacing--sm) 0 0 0;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2xs);
}

.sv-about-career__list li {
	position: relative;
	padding-left: 1em;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--sv-r-bg);
	opacity: 0.85;
}

.sv-about-career__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	background: var(--wp--preset--color--sv-r-accent);
}

.sv-about-career__list li strong {
	font-weight: 600;
	opacity: 1;
}

.sv-about-career__sub {
	display: inline-block;
	margin-top: 2px;
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0.7;
}

@media (max-width: 900px) {
	.sv-about-career__head,
	.sv-about-career__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 901px) and (max-width: 1180px) {
	.sv-about-career__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -----------------------------------------------------------------------
 * 5) 03 / Perspektive — dunkles Bildfeld links (konzentrische Kreise, rein
 *    dekorativ), Textblock rechts.
 *
 *    NACHTRAG 2026-10-07 — Betreiberauftrag: "die Seite sollte überall die
 *    selbe Seitenbreite aufweisen, sämtlicher Text, Überschriften und
 *    Bilder sollten sich danach richten". Bislang war dieser Abschnitt
 *    randlos (volle Viewport-Breite, Bildfeld bis an den linken, Textblock
 *    bis an den rechten Rand) und damit die einzige Ausnahme vom sonst
 *    überall gleichen 1.680px-Inhaltsraster (siehe --sv2-content-max,
 *    Abschnitt 2 oben). Jetzt wie jeder andere Abschnitt: volle Breite nur
 *    als Hintergrundfläche, Inhalt (Bildfeld + Text) gemeinsam in einer
 *    Zeile auf --sv2-content-max begrenzt und zentriert — linke Kante des
 *    Bildfelds und rechte Kante des Textes fluchten dadurch mit Überschriften
 *    und Absätzen in allen anderen Abschnitten.
 *
 *    NACHTRAG 2026-10-07 (2) — Korrektur: Abschnittshintergrund bleibt hell
 *    (sv-r-bg) wie zuvor, nicht dunkel — nur das dekorative Bildfeld links
 *    ist weiterhin dunkel (eigenständige Kachel). Textfarben entsprechend
 *    zurück auf Dunkel-auf-Hell. Außerdem: der Abstand zwischen Eyebrow
 *    ("03 / Perspektive") und Überschrift war größer als in allen anderen
 *    Abschnitten, weil .sv-about-perspective__text (anders als die übrigen
 *    Kopfzeilen-Wrapper) ein Flex-Container ist — WordPress' automatische
 *    Blockabstands-Logik, die Eyebrow und Überschrift sonst überall bündig
 *    zusammenrückt, griff hier nicht. Jetzt wie überall sonst: Eyebrow ohne
 *    Rand, Überschrift ohne oberen Rand, fester unterer Rand vor dem
 *    Fließtext (siehe ".sv-about-section h2" oben für dasselbe Muster). */
.sv-about-perspective {
	max-width: none;
	padding-inline: var(--sv2-gutter) !important;
	padding-block: var(--wp--preset--spacing--xl);
	background: var(--wp--preset--color--sv-r-bg) !important;
}

.sv-about-perspective__row {
	max-width: var(--sv2-content-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--lg);
}

/* NACHTRAG 2026-10-08 — Betreiberauftrag: statt der abstrakten, rein
 * dekorativen Kreismuster-Fläche steht hier jetzt ein echtes Foto
 * (Kahlschlagfläche mit Seilbahn-Rückegassen, Neuseeland, Attachment-ID
 * 338). Die vorherige Kreismuster-Textur (::before) ist entfernt — über
 * einem Foto würde sie nur unruhig wirken. background-Gradient bleibt als
 * Lade-/Fallback-Fläche erhalten, bis das <img> geladen ist. */
.sv-about-perspective__media {
	flex: 1 1 420px;
	min-height: 420px;
	position: relative;
	background: radial-gradient(circle at 30% 45%, #1c3a3c 0%, var(--wp--preset--color--sv-r-ink) 62%);
	overflow: hidden;
	border-radius: 4px;
}

.sv-about-perspective__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bildausschnitt nach unten verschoben, damit der helle Himmelstreifen
	   oben im Original großteils wegfällt und stattdessen die markante
	   Kahlschlag-/Rückegassen-Fläche den Bildausschnitt füllt. */
	object-position: center 80%;
	display: block;
}

.sv-about-perspective__text {
	flex: 1 1 420px;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sv-about-perspective__text .sv-section-eyebrow {
	color: var(--wp--preset--color--sv-r-accent-text) !important;
	margin: 0;
}

.sv-about-perspective__text h2 {
	color: var(--wp--preset--color--sv-r-ink);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.sv-about-perspective__text p {
	color: var(--wp--preset--color--sv-r-text-soft);
	font-size: var(--wp--preset--font-size--sv-r-body);
	margin: 0 0 var(--wp--preset--spacing--sm);
	max-width: 46em;
}

.sv-about-perspective__text p:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * 6) 04 / Arbeitsweise — Kopfzeile über volle Breite, darunter Dreispalten-
 *    Raster mit senkrechten Trennlinien.
 * -------------------------------------------------------------------- */
.sv-about-work__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--wp--preset--spacing--lg);
	margin-top: var(--wp--preset--spacing--lg);
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--sv-line);
}

.sv-about-work__col {
	padding-right: var(--wp--preset--spacing--md);
}

.sv-about-work__number {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sv-r-label);
	color: var(--wp--preset--color--sv-r-accent-text);
	margin-bottom: var(--wp--preset--spacing--2xs);
}

.sv-about-work__col h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--sv-r-ink);
	margin: 0 0 var(--wp--preset--spacing--3xs);
}

.sv-about-work__col p {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--sv-r-text-soft);
	margin: 0;
}

@media (max-width: 900px) {
	.sv-about-work__grid {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--md);
	}
}

/* -----------------------------------------------------------------------
 * 7) 05 / Qualifikationen — Zweispaltiges Raster, je Zeile Kurztitel +
 *    Erklärung nebeneinander.
 * -------------------------------------------------------------------- */
.sv-about-qual__grid {
	display: grid;
	/* C1 (2026-10-08): minmax(0, 1fr) statt 1fr — eine 1fr-Spalte darf
	   sonst nicht schmaler werden als ihr breitester Inhalt und schiebt
	   die Seite bei ca. 768 px über den Viewport hinaus (822 px gemessen). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--lg);
	margin-top: var(--wp--preset--spacing--md);
}

.sv-about-qual__item {
	min-width: 0;
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	padding-block: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--sv-line);
}

.sv-about-qual__item:nth-child(1),
.sv-about-qual__item:nth-child(2) {
	border-top: none;
	padding-top: 0;
}

.sv-about-qual__label {
	flex: 0 0 190px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	color: var(--wp--preset--color--sv-r-ink);
}

.sv-about-qual__desc {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--sv-r-text-soft);
}

/* C1, Nachtrag: bei 681-900 px waren zwei Spalten zu schmal (Wörter
   brachen mitten im Wort um) — ab 900 px abwärts eine Spalte. */
@media (max-width: 900px) {
	.sv-about-qual__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-about-qual__item:nth-child(2) {
		border-top: 1px solid var(--wp--preset--color--sv-line);
		padding-top: var(--wp--preset--spacing--sm);
	}
}

@media (max-width: 680px) {
	.sv-about-qual__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-about-qual__item:nth-child(2) {
		border-top: 1px solid var(--wp--preset--color--sv-line);
		padding-top: var(--wp--preset--spacing--sm);
	}

	/* C1, Nachtrag 2: auf dem Handy Überschrift über dem Text statt
	   daneben, sonst bleibt für lange Wörter zu wenig Breite. */
	.sv-about-qual__item {
		flex-direction: column;
		gap: var(--wp--preset--spacing--3xs);
	}

	.sv-about-qual__label {
		flex-basis: auto;
	}
}

/* -----------------------------------------------------------------------
 * 8) Kontakt-Banner — dunkles Band, Überschrift links, Schaltfläche rechts
 *    (Mockup: einzeilig, nicht zentriert gestapelt wie der Leistungen-
 *    Banner).
 * -------------------------------------------------------------------- */
.sv-about-cta {
	background: var(--wp--preset--color--sv-r-ink) !important;
	max-width: none;
	padding-inline: var(--sv2-gutter) !important;
	padding-block: var(--wp--preset--spacing--lg);
}

.sv-about-cta > .sv-about-cta__row {
	max-width: var(--sv2-content-max);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
}

.sv-about-cta h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	color: var(--wp--preset--color--sv-r-bg);
	margin: 0;
}

/* Überschrift und Schaltfläche liegen in einer Flex-Zeile mit
   align-items:center. Der Button saß dennoch ~17px tiefer als die
   Überschrift, weil WordPress' Layout-Abstand (Block-Gap als margin-top
   auf Kindern von "constrained"/Flow-Gruppen) nur auf den Button-Wrapper
   wirkte. Betreiberrückmeldung 2026-10-09: Button nicht auf einer Linie
   mit dem Text. Außenabstände der Zeilenkinder daher auf 0. */
.sv-about-cta > .sv-about-cta__row > *,
.sv-about-cta .wp-block-buttons {
	margin-block: 0 !important;
}

.sv-about-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--sv-r-accent);
	color: var(--wp--preset--color--sv-r-ink);
	border-radius: 2px;
	font-weight: 600;
}

.sv-about-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--sv-r-bg);
}

/* -----------------------------------------------------------------------
 * 9) Heller Streifen vor dem Footer (wie auf der Leistungsübersicht).
 *
 *    Ursprünglich (NACHTRAG, siehe services-redesign.css Abschnitt 5)
 *    bewusst auf 189px (~5cm) gesetzt, dieselbe Korrektur wie auf der
 *    Leistungsübersicht — dort war das ein gewollter heller Streifen
 *    zwischen zwei dunklen Blöcken (Kontakt-Banner, Footer).
 *
 *    NACHTRAG 2026-10-08 (früher am Tag) — Betreiberauftrag: der Streifen
 *    sollte auf "Über Silvalue" ganz entfallen (margin-top: 0).
 *
 *    NACHTRAG 2026-10-08 (später am Tag) — Betreiberauftrag zurückgenommen:
 *    der Footer auf "Über Silvalue" soll genauso aussehen wie auf der
 *    Leistungsübersicht, also wieder mit hellem Streifen zwischen dem
 *    Kontakt-Banner (.sv-about-cta) und dem Footer, hier mit denselben
 *    189px. Nur auf dieser Seite gesetzt (body.sv-page-about), weil
 *    services-redesign.css nur auf is_page('leistungen') lädt. Der
 *    Qualifikationen-Block im Footer wird auf dieser Seite serverseitig
 *    ausgeblendet (functions.php, silvalue_hide_trust_logos_on_leistungen()).
 * -------------------------------------------------------------------- */
body.sv-page-about .wp-site-blocks > footer {
	margin-top: 189px;
}

/* NACHTRAG 2026-10-13 — "Über Silvalue" ist jetzt aus echten Gruppen-Blöcken
 * aufgebaut (vorher lose <div>-Container, siehe functions.php
 * silvalue_about_wrapper_no_flow()), damit der Block-Editor die Seite
 * wieder laden kann. Die Eyebrow-Absätze und das Werdegang-Raster bekamen
 * dadurch Standard-Außenabstände (Browser-Vorgabe für <p> bzw.
 * Flow-Layout-Abstand), die vorher 0 waren. Hier auf den bisherigen Wert
 * zurückgesetzt, damit sich das Aussehen nicht verändert. */
body.sv-page-about .sv-about-hero__copy > p.sv-section-eyebrow,
body.sv-page-about .sv-about-why__head > p.sv-section-eyebrow,
body.sv-page-about .sv-about-career__head > p.sv-section-eyebrow {
	margin-block: 0;
}

body.sv-page-about .sv-about-career__grid {
	margin-block-start: 0;
}