/*
Theme Name: IT-SV 2026 (Martin Höck)
Description: Eigenständiges, neutrales Block-Theme für die Website von Martin Höck, allgemein beeideter und gerichtlich zertifizierter IT-Sachverständiger. Child-Theme von Twenty Twenty-Five. Bewusst neutrale, seriöse Identität (kein Solutionbox-Marketing-Look), da Unabhängigkeit/Neutralität das zentrale Auswahlkriterium der Zielgruppen ist. Stand: 2026-06.
Author: Edward (SBX Web-Team)
Template: twentytwentyfive
Version: 0.11.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: it-sv-2026
*/

/* === Grundgerüst / Kanten === */
/* Weisse Kopfzeile auf dem hellblauen Seitengrund — wie im Entwurf. */
.site-header { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); }
.site-footer { border-top: 1px solid var(--wp--preset--color--border); font-size: 0.95rem; }

/* =============================================================
   Design v2 — Justiz-Blau, Papier-Anmutung, Gold als Siegelakzent.
   Schriften liegen lokal unter assets/fonts/ (kein Google-CDN, DSGVO).
   ============================================================= */

/* --- Meta-Leiste ganz oben (dunkel, Kontaktzeile) --- */
.sbx-topbar {
	background: var(--wp--preset--color--deep);
	color: #b9c6d4;
	font-size: var(--wp--preset--font-size--x-small);
}
.sbx-topbar a { color: #dbe3ea; text-decoration: none; }
.sbx-topbar a:hover { color: #fff; text-decoration: underline; }

/* --- Eyebrow: kleines Label über einer Überschrift --- */
.sbx-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}

/* --- Hero --- */
.sbx-hero { background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--wp--preset--color--border); }
.sbx-hero h1 { max-width: 20ch; }
.sbx-hero .sbx-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--body); max-width: 46ch; }
.sbx-hero img { border-radius: 8px; }

/* --- Sektionen --- */
.sbx-section { padding-block: var(--wp--preset--spacing--60); }
.sbx-section--tint { background: var(--wp--preset--color--surface); }
.sbx-section--deep { background: var(--wp--preset--color--primary); color: #dbe3ea; }
.sbx-section--deep :is(h1,h2,h3,h4) { color: #fff; }
.sbx-section--deep a { color: #fff; }

/* --- Karten (Zielgruppen-Verteiler, Leistungen, Beiträge) --- */
.sbx-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	height: 100%;
	transition: border-color 180ms cubic-bezier(0.2,0,0,1), box-shadow 180ms cubic-bezier(0.2,0,0,1);
}
.sbx-card:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 4px 10px -2px rgba(16,24,40,0.08), 0 10px 28px -8px rgba(16,24,40,0.12);
}
.sbx-card h3 { margin-top: 0; }

/* --- Gold als Siegel-/Nachweisakzent (sparsam!) --- */
.sbx-seal { border-left: 3px solid var(--wp--preset--color--gold); padding-left: 1.1rem; }
.sbx-kicker-gold { color: #8a6d24; font-weight: 600; }

/* --- Zahlen, Aktenzeichen, Fachgebietsnummern in Mono --- */
.sbx-num, .sbx-az {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.95em;
}

/* --- Prozessschritte mit nummerierten Marken --- */
.sbx-steps { counter-reset: sbx-schritt; }
.sbx-steps .sbx-step { position: relative; padding-left: 3rem; }
.sbx-steps .sbx-step::before {
	counter-increment: sbx-schritt;
	content: counter(sbx-schritt, decimal-leading-zero);
	position: absolute; left: 0; top: 0.1em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9rem; font-weight: 500;
	color: var(--wp--preset--color--accent);
}

/* --- Breitenstaffelung des Inhaltsbereichs -------------------------------
   Der post-content-Block wertet im Template kein align:full aus und wird als
   normales Kind der constrained main-Gruppe auf die Textbreite (760px)
   begrenzt. Dadurch blieben auch alignwide-Raster darin 760px breit — der
   Vier-Pfad-Verteiler bekam je Spalte nur 160px und die Kartentitel brachen
   um. Deshalb spannt der Inhaltsbereich hier voll auf und die Staffelung
   (Text 760px / wide 1120px) wird eine Ebene tiefer selbst gesetzt. */
.sbx-main > .entry-content {
	max-width: none;
}
.entry-content > :not(.alignwide):not(.alignfull):not(.sbx-seiteninhalt) {
	max-width: var(--wp--style--global--content-size);
	margin-left: auto;
	margin-right: auto;
}
/* Acht Seiten-Patterns bringen einen eigenen Container mit (frueher ein
   zweites <main> im <main> des Templates — ungueltiges HTML und doppelte
   Landmark). Er bleibt hier ungebremst, damit die Staffelung eine Ebene
   tiefer greift: das constrained-Layout des Containers begrenzt seine Kinder
   selbst auf 760px bzw. 1120px bei alignwide.
   Der Ausschluss oben genuegt dafuer nicht — WordPress erzeugt fuer den
   constrained post-content zusaetzlich `.wp-container-… > *` mit contentSize,
   und die greift sonst auf den Container. Deshalb hier explizit. */
.entry-content > .sbx-seiteninhalt,
.sbx-main > .sbx-seiteninhalt { max-width: none; }
.entry-content > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

/* --- Vollbreite Baender (Hero, Nachweisleiste, Flaechenbaender) -----------
   Der Entwurf setzt Hero und Trennbaender randlos ueber die ganze Breite;
   der Inhalt darin bleibt bei 1120px. WordPress liefert dafuer zwar
   `.has-global-padding > .alignfull` mit negativen Aussenabstaenden, hebt die
   aber fuer verschachtelte Container gleich wieder auf (`… > .alignfull
   { margin: 0 }`) — und `.entry-content` ist genau so ein verschachtelter
   Container. Deshalb hier explizit und mit hoeherer Spezifitaet, damit die
   Reihenfolge der Stylesheets keine Rolle spielt. */
.sbx-main > .entry-content > .alignfull {
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
}
/* Innenmass der Baender — entspricht wideSize plus dem Innenabstand des
   Entwurfs (40px). */
.sbx-bandinhalt {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}
@media (max-width: 600px) {
	.sbx-bandinhalt { padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* Das erste Band schliesst buendig an die Kopfzeile an: weder Aussenabstand
   von .wp-site-blocks noch der Blockabstand des Inhaltsbereichs duerfen einen
   Streifen Seitengrund zwischen Kopfzeile und Band stehen lassen. Ebenso
   stossen zwei aufeinanderfolgende Vollbreit-Baender direkt aneinander. */
.wp-site-blocks > main.sbx-main { margin-block-start: 0; }
.sbx-main > .entry-content { margin-block-start: 0; }
.sbx-main > .entry-content > .alignfull:first-child { margin-top: 0; }
.sbx-main > .entry-content > .alignfull + .alignfull { margin-top: 0; }
.sbx-main > .entry-content > :first-child:not(.alignfull) { margin-top: 2rem; }

/* Helles Flaechenband zwischen zwei Textabschnitten. */
.sbx-bandflaeche {
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sbx-bandflaeche .sbx-bandinhalt { padding-top: 4rem; padding-bottom: 4rem; }

/* --- Karten in Spalten: gleiche Höhe, Button bündig am Fuß ---------------
   Ohne das stehen die CTA-Buttons des Vier-Pfad-Verteilers auf unterschiedlicher
   Höhe, sobald die Kartentexte unterschiedlich lang sind. */
.wp-block-columns .sbx-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.wp-block-columns .sbx-card > .wp-block-buttons,
.wp-block-columns .sbx-card > p:last-child {
	margin-top: auto;
}
/* Die Karten sind zugleich constrained-Container: WordPress setzt ihren Kindern
   dafuer `margin-left/right: auto !important`. In einer Flex-Spalte zentriert
   das die Kinder auf ihre Inhaltsbreite — Eyebrow und Kartentitel standen
   dadurch mittig statt linksbuendig wie im Entwurf. Deshalb hier zurueckgesetzt;
   das !important ist noetig, weil die Kernregel selbst eines traegt. */
.wp-block-columns .sbx-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Buttons: nie mitten im Wort umbrechen ------------------------------
   Bei vier Spalten wird eine Spalte ~180 px schmal; „Für Versicherungen"
   wurde dort zu „Für Versicherun-gen" zerlegt. */
.wp-block-button__link,
.wp-element-button {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	text-align: center;
}

/* Vier-Spalten-Verteiler: unter 1100 px auf 2×2, unter 620 px einspaltig.
   Das Standardverhalten (vier immer schmaler werdende Spalten) ist für die
   Zielgruppenkarten unbrauchbar. */
@media (max-width: 1100px) {
	.wp-block-columns.sbx-verteiler { flex-wrap: wrap !important; }
	.wp-block-columns.sbx-verteiler > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
		flex-grow: 0;
	}
}
@media (max-width: 620px) {
	.wp-block-columns.sbx-verteiler > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Fotos ---------------------------------------------------------------
   Die Bilder liegen als Theme-Asset unter assets/bilder/ und werden in den
   Patterns per get_theme_file_uri() eingebunden — dadurch stimmen die URLs
   lokal wie live, ohne Abgleich mit der Mediathek. Zugeschnitten sind sie
   bereits auf das Zielverhaeltnis (siehe _tools/bilder-aufbereiten.php); das
   aspect-ratio hier haelt den Platz vor dem Laden frei (kein Layout-Sprung). */
.sbx-figure { margin: 0; }
.sbx-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
}
.sbx-figure--portraet img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: none;
	background: var(--wp--preset--color--primary-dark);
}
.sbx-figure--quadrat img { aspect-ratio: 1 / 1; object-fit: cover; }
.sbx-figure figcaption {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	margin-top: 0.5rem;
}

/* Bild-/Textzeile: auf schmalen Viewports stapelt wp:columns selbst (782 px).
   Die Zeilenlaengen-Bremsen aus .sbx-hero greifen hier nicht — in einer
   58%-Spalte wuerde eine H1 mit max-width:20ch zum Wortturm. */
.sbx-bildzeile { gap: 2.5rem; }
.sbx-bildzeile :is(h1, .sbx-lead) { max-width: none; }

/* --- Dunkler Hero der Startseite (Design v2) -----------------------------
   Eigene Klasse statt .sbx-hero + .sbx-section--deep, damit das Ergebnis
   nicht von der Reihenfolge zweier gleich spezifischer Regeln abhaengt. */
.sbx-hero-dunkel {
	background: var(--wp--preset--color--deep);
	color: #dbe3ea;
}
/* Masse aus dem Entwurf: Startseite 72/64px, Unterseiten 64/56px. */
.sbx-hero-dunkel .sbx-bandinhalt { padding-top: 4rem; padding-bottom: 3.5rem; }
.sbx-hero-dunkel--start .sbx-bandinhalt { padding-top: 4.5rem; padding-bottom: 4rem; }
.sbx-hero-dunkel h1 { max-width: 22ch; }
.sbx-hero-dunkel .sbx-lead { max-width: 70ch; }
.sbx-hero-dunkel :is(h1, h2, h3) { color: #fff; }
.sbx-hero-dunkel .sbx-eyebrow { color: var(--wp--preset--color--gold); }
.sbx-hero-dunkel a:not(.wp-element-button) { color: #fff; }
/* Die beiden Kleintexte unter den Schaltflaechen stehen im Entwurf in Gold
   (dort `--blue-300`, das im Hero-Kontext auf den Goldton gesetzt ist). */
.sbx-hero-dunkel .has-small-font-size { color: var(--wp--preset--color--gold); }
/* Der gefuellte Button traegt sonst die Grundfarbe primary — also exakt den
   Hintergrund dieser Sektion und damit unsichtbar. Hier der Gold-Akzent des
   Designs (6,7:1 gegen die dunkle Schrift). */
.sbx-hero-dunkel .wp-block-button:not(.is-style-outline) .wp-element-button {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--primary-dark);
	border-color: transparent;
}
.sbx-hero-dunkel .wp-block-button.is-style-outline .wp-element-button {
	color: #fff;
	border-color: var(--wp--preset--color--accent);
}

/* --- Wortmarke in Kopf- und Fusszeile ------------------------------------
   Signet und Wortmarke stehen als Inline-SVG bzw. wp:html direkt im
   Template-Part: Template-Parts sind HTML, koennen also kein
   get_theme_file_uri() aufrufen, und ein SVG in der Mediathek scheidet aus
   (WordPress sperrt SVG-Uploads aus gutem Grund). Inline ist es zudem ein
   Request weniger. Aufbau und Masse nach Designvorlage v2. */
.sbx-signet { display: block; flex: 0 0 auto; line-height: 0; }

.sbx-marke {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
.sbx-marke:hover { text-decoration: none; }
.sbx-marke__text { display: grid; justify-items: start; }
.sbx-marke__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.135em;
	color: var(--wp--preset--color--contrast);
}
/* Firmenname und Rechtsform stehen auf zwei eigenen Zeilen unter dem Namen. */
.sbx-marke__firma {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	line-height: 1.35;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.sbx-marke__claim {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	line-height: 1.3;
	color: #9a7c2a;
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 5px;
	padding-top: 4px;
	width: 100%;
}
.site-header .sbx-signet svg { width: 46px; height: 46px; }

/* --- Navigation neben der Wortmarke, nicht darunter ----------------------
   Der globale Blockabstand (1,35rem) setzte auch zwischen den Menuepunkten an:
   neun Punkte plus acht Abstaende brauchten 1011px, neben der Wortmarke stehen
   aber nur rund 895px zur Verfuegung — die Navigation rutschte in die zweite
   Zeile. Der Entwurf setzt hier 4px. */
.site-header .sbx-nav,
.site-header .sbx-nav .wp-block-navigation__container {
	gap: 4px;
}
.site-header .sbx-nav .sbx-nav-cta { margin-left: 4px; }
/* Darunter wird es eng: bis 1200px die Innenabstaende der Textpunkte
   zuruecknehmen, statt umzubrechen. */
@media (max-width: 1200px) {
	.site-header .sbx-nav .wp-block-navigation-item:not(.sbx-nav-cta) a {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}
/* Neun Menuepunkte passen erst ab rund 1150px neben die Wortmarke. Darunter
   das Ueberlagerungsmenue zeigen — WordPress schaltet von sich aus erst bei
   600px um, was hier eine zweite Zeile erzwungen haette. Die Kernregeln
   greifen ab 600px mit (0,2,0) bzw. (0,3,0); die Selektoren hier liegen
   bewusst darueber, damit die Reihenfolge der Stylesheets egal ist. */
@media (max-width: 1149px) {
	.site-header .sbx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.site-header .sbx-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
}

/* --- Dunkle Fusszeile (Designvorlage v2) --------------------------------- */
.site-footer--dunkel {
	background: var(--wp--preset--color--deep);
	color: #b9c6d4;
	border-top: none;
}
.site-footer--dunkel .sbx-signet svg { width: 26px; height: 26px; }
.site-footer--dunkel .sbx-marke__wort {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #fff;
}
.site-footer--dunkel .sbx-eyebrow { color: #7f8ea0; }
.site-footer--dunkel a { color: #b9c6d4; text-decoration: none; }
.site-footer--dunkel a:hover { color: #fff; text-decoration: underline; }
.site-footer--dunkel .sbx-fussnote { color: #7f8ea0; }
.site-footer--dunkel .sbx-kleingedrucktes {
	color: #7f8ea0;
	border-top: 1px solid #16283c;
	padding-top: 20px;
}
.site-footer--dunkel a:focus-visible { outline-color: var(--wp--preset--color--gold); }

/* --- Navigation nach Designvorlage ---------------------------------------
   Flache Leiste; der Quickaudit-Punkt ist als Schaltfläche hervorgehoben. */
.sbx-nav .wp-block-navigation-item__content {
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	color: var(--wp--preset--color--body);
	text-decoration: none;
}
.sbx-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--primary);
}
.sbx-nav .sbx-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	padding: 0.75rem 1.1rem;
}
.sbx-nav .sbx-nav-cta > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary-dark);
	color: #fff;
}
/* Zweite Schaltfläche in Gold — „Anfrage senden" (Designvorlage). */
.sbx-nav .sbx-nav-cta--gold > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--deep);
}
.sbx-nav .sbx-nav-cta--gold > .wp-block-navigation-item__content:hover {
	background: #b8913f;
	color: var(--wp--preset--color--deep);
}
/* In der Mobil-Ãœberlagerung wieder als normaler Punkt. */
.wp-block-navigation__responsive-container.is-menu-open .sbx-nav-cta > .wp-block-navigation-item__content {
	background: transparent;
	color: var(--wp--preset--color--primary);
}

/* --- Hero: zweite Zeile der Ãœberschrift in Gold (Designvorlage) --- */
.sbx-h1-gold { color: var(--wp--preset--color--gold); }
.sbx-hero-dunkel .sbx-vertragspartner {
	border-top: 1px solid var(--wp--preset--color--accent);
	padding-top: 0.9rem;
	max-width: 56ch;
	color: var(--wp--preset--color--gold);
}

/* --- Nachweisleiste unter dem Hero --------------------------------------- */
.sbx-nachweisleiste {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sbx-nachweisleiste .sbx-bandinhalt { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.sbx-nachweisleiste .wp-block-column { display: grid; gap: 0.25rem; align-content: start; }
.sbx-nachweisleiste p { margin: 0; }

/* --- Faktenzeilen in Karten (Anlass/Auftraggeber/Ergebnis/Honorar) --------
   Im Entwurf eine Definitionsliste mit Trennlinie je Zeile. Gutenberg kennt
   keinen dl-Block, deshalb steht sie als wp:html im Pattern. */
.sbx-faktenliste { margin: 0.4rem 0 0; display: grid; }
.sbx-faktenliste > div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 1rem;
	padding: 0.625rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.sbx-faktenliste dt {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}
.sbx-faktenliste dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}
@media (max-width: 600px) {
	.sbx-faktenliste > div { grid-template-columns: 1fr; gap: 0.15rem; }
}
/* Variante fuer die Qualifikationsnachweise: breitere Merkmalsspalte, Linie
   auch ueber der ersten Zeile, kraeftigere Beschriftung (Entwurf, isGerichte). */
.sbx-faktenliste--nachweise {
	margin-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
}
.sbx-faktenliste--nachweise > div {
	grid-template-columns: 210px 1fr;
	gap: 1.5rem;
	padding: 0.875rem 0;
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sbx-faktenliste--nachweise dt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
}
@media (max-width: 782px) {
	.sbx-faktenliste--nachweise > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Aufzaehlung mit markanten Punkten -----------------------------------
   Fuer Listen, die keine Reihenfolge ausdruecken (im Unterschied zu
   .sbx-steps, das nummeriert). */
.sbx-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.sbx-punkte li { position: relative; padding-left: 1.75rem; }
.sbx-punkte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
}

/* --- Gutachten/Audit: zwei Entscheidungskarten --------------------------- */
.sbx-wahl .sbx-card { padding: 1.5rem; border-top-width: 2px; }
.sbx-card--gutachten { border-top-color: var(--wp--preset--color--primary); }
.sbx-card--audit { border-top-color: var(--wp--preset--color--gold); }
.sbx-wahl .sbx-card h3 { margin-bottom: 0.4rem; }

/* --- Kontaktdaten in den Karten auf /kontakt/ ----------------------------
   E-Mail und Telefonnummer standen zuvor als <h2> im Markup: 2,1 rem, also so
   groß wie „Kontaktformular" — und im Überschriften-Gerüst auf einer Ebene mit
   den echten Abschnitten, obwohl es Daten sind, keine Ãœberschriften.
   Jetzt ein Absatz auf Karten-Überschriftengröße (wie die 30 h3-Karten sonst). */
.sbx-kontaktwert {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.3;
	margin-block: 0 0.35rem;
	overflow-wrap: anywhere;
}
.sbx-kontaktwert a { text-decoration: none; color: var(--wp--preset--color--primary); }
.sbx-kontaktwert a:hover,
.sbx-kontaktwert a:focus-visible { text-decoration: underline; }

/* --- Vier-Pfad-Karten ---------------------------------------------------- */
.sbx-pfad { padding: 1.4rem; border-top: 2px solid var(--wp--preset--color--primary); }
.sbx-pfad h3 { font-size: 1.125rem; margin-top: 0; }
.sbx-pfad h3 a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.sbx-pfad:hover h3 a { color: var(--wp--preset--color--primary); }
.sbx-weiter a { text-decoration: none; }

/* --- Tätigkeitsspektrum: Liste mit Kante statt Aufzählungspunkt ---------- */
.sbx-spektrum { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.sbx-spektrum li {
	padding-left: 1.1rem;
	border-left: 2px solid var(--wp--preset--color--soft);
}

/* --- Leistungsgruppen: nummeriert wie in der Designvorlage --- */
.sbx-leistungsgruppe { position: relative; padding-left: 3.25rem; }
.sbx-gruppennummer {
	position: absolute;
	left: 0;
	top: 0.15rem;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}
@media (max-width: 620px) {
	.sbx-leistungsgruppe { padding-left: 0; }
	.sbx-gruppennummer { position: static; margin-bottom: 0.3rem; }
}

/* --- Zeitleiste Aus- und Weiterbildung --- */
.sbx-zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sbx-zeitleiste li {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0.75rem;
	align-items: baseline;
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 0.7rem;
}
.sbx-zeitleiste .sbx-jahr { color: var(--wp--preset--color--muted); }
@media (max-width: 620px) {
	.sbx-zeitleiste li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* --- „Gut zu wissen" unter dem Rechner (Designvorlage: blue-50) --- */
.sbx-gutzuwissen {
	background: var(--wp--preset--color--soft);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-top: 1.5rem;
}
.sbx-gutzuwissen p:last-child { margin-bottom: 0; }

/* --- Meta-Leiste über dem Header ---------------------------------------- */
.sbx-topbar p { margin: 0; }

/* --- Kontaktformular ----------------------------------------------------- */
.sbx-formular { display: grid; gap: 1.1rem; margin-top: 1.5rem; max-width: 44rem; }
.sbx-feld { display: grid; gap: 0.35rem; margin: 0; }
.sbx-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .sbx-feldpaar { grid-template-columns: 1fr; } }
.sbx-formular label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
.sbx-formular input[type="text"],
.sbx-formular input[type="email"],
.sbx-formular input[type="tel"],
.sbx-formular select,
.sbx-formular textarea {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	width: 100%;
}
.sbx-formular :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.sbx-feld--zustimmung {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
}
.sbx-feld--zustimmung label { font-weight: 400; font-size: var(--wp--preset--font-size--x-small); }
.sbx-feld--zustimmung input { margin-top: 0.2rem; }
.sbx-formular button[disabled] { opacity: 0.45; cursor: not-allowed; }
.sbx-formular-hinweis {
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--soft);
	border-radius: 6px;
	padding: 0.8rem 1rem;
}

/* --- Häufige Fragen: Aufklapp-Liste ---------------------------------------
   Zweispaltig, damit 20 Einträge nicht zu einer endlosen Kolonne werden;
   unter 782px stapelt wp:columns von selbst. */
.sbx-faq-spalten { gap: 2.5rem; }
.sbx-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.9rem 0;
}
.sbx-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}
.sbx-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.sbx-faq .wp-block-details summary::before {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}
.sbx-faq .wp-block-details[open] summary::before { content: "–"; }
.sbx-faq .wp-block-details summary:hover { color: var(--wp--preset--color--primary); }
.sbx-faq .wp-block-details p {
	font-size: var(--wp--preset--font-size--small);
	margin: 0.7rem 0 0 1.35rem;
	color: var(--wp--preset--color--body);
}

/* --- Spartenzeile (Für Versicherungen) --- */
.sbx-sparten { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.sbx-sparten span {
	background: var(--wp--preset--color--soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	color: var(--wp--preset--color--body);
}

/* --- Beitragsliste („Aktuelles") --- */
.sbx-beitraege .wp-block-post-title { font-size: var(--wp--preset--font-size--large); line-height: 1.32; }
.sbx-beitraege .wp-block-post-title a { text-decoration: none; }
.sbx-beitraege .wp-block-post-title a:hover { text-decoration: underline; }
.sbx-beitraege .wp-block-post-date { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); }
.sbx-beitraege .wp-block-post-featured-image img { border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; }

/* === Trust-/Nachweis-Leiste === */
.is-style-trust-bar,
.sbx-trust-bar {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
}
.sbx-trust-bar .sbx-fachgebiete { margin: 0; padding-left: 1.2rem; }

/* (Die Kartendefinition steht weiter oben unter „Karten". Die frueher hier
   stehende Zweitfassung hat Radius und Schatten der Erstfassung ueberschrieben
   und ist deshalb entfallen.) */

/* === Prozess-Stepper (Ablauf) === */
.sbx-stepper { counter-reset: sbx-step; }
.sbx-stepper .sbx-step { border-left: 2px solid var(--wp--preset--color--border); padding-left: 1.1rem; }

/* === Kontakt-/Nachweis-Block === */
.sbx-contact { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 6px; }
.sbx-factlist { list-style: none; margin: 0; padding: 0; }
.sbx-factlist li { padding: 0.15rem 0; }

/* === Platzhalter-/„zu bestätigen"-Markierungen sichtbar machen (Redaktionshilfe) === */
mark.sbx-todo { background: #fff4cf; color: #5a4a00; padding: 0 .2em; border-radius: 2px; }

/* === Accessibility: sichtbarer Fokus & Skip-Link === */
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--wp--preset--color--primary); color: #fff; padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

/* === Druck-/Aktenfähigkeit (Gericht/Versicherung) === */
@media print {
	.site-header nav, .wp-block-navigation, .wp-block-button, .skip-link { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	.sbx-trust-bar, .sbx-card, .sbx-contact { border: 1px solid #000; background: #fff; }
	mark.sbx-todo { background: transparent; color: #000; border: 1px dashed #999; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #333; }
	a[href^="/"]::after { content: ""; }
}