/* ==========================================================================
   VBU Volker Beckmann – Theme-Stylesheet
   Vorlage: Canvas-Entwürfe 18.10.2026 (Startseite F4, AVGS, GZ, GiB), Desktop 1440 / Handy 390.
   Farben und Schrift kommen aus theme.json (Presets); hier stehen Layout und Bausteine.
   Breiten: Inhalt 1136 px + 2 × 32 px Rand = 1200 px. Handy-Rand 16 px.
   ========================================================================== */

:root {
	--vbu-tinte: #122F4D;
	--vbu-tinte-tief: #0D2136;
	--vbu-grund: #FCFAF6;
	--vbu-sand: #F0E8DD;
	--vbu-rost: #9C5223;
	--vbu-rost-dunkel: #8F572D;
	--vbu-kupfer: #CC7C40;
	--vbu-grau: #556A7F; /* 1.1.19: war #596D82 – auf Sand 4,39 → 4,61 (B32 K8, Freigabe Volker 24.10.2026) */
	--vbu-linie: #C4CBD2;
	--vbu-nebel: #E7EAED;
	--vbu-hell-hover: #E8C4A9;
	--vbu-weiss: #FFFFFF;
}

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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--vbu-grund);
	color: var(--vbu-tinte);
	font-family: Montserrat, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 600;
	line-height: 1.2;
	color: var(--vbu-tinte);
	overflow-wrap: break-word;
	text-wrap: balance; /* Zeilen gleich lang, keine überstehende Einzelzeile (Volker 19.10.2026: Symmetrie) */
}
p, li { text-wrap: pretty; } /* kein einzelnes Wort allein in der letzten Zeile */
/* Zeilenumbruch nur am Rechner; am Handy bricht die Überschrift ausgewogen von selbst */
@media (max-width: 781px) { br.vbu-nur-desktop { display: none; } }

/* Handy-Überschriften ohne automatische Silbentrennung; Trennstellen stehen als ­ im Text (B32) */
h1 {
	font-size: clamp(26px, 2.1vw + 17px, 46px);
	line-height: 1.15;
	hyphens: manual;
	-webkit-hyphens: manual;
}
h2 { font-size: clamp(26px, 0.6vw + 23.5px, 32px); }
h3 { font-size: 20px; }
/* Am Rechner greifen die Handy-Trennstellen nicht (Entwurf Desktop: ohne Trennung) */
@media (min-width: 782px) {
	h1 { hyphens: none; -webkit-hyphens: none; }
}

p, ul, ol { margin: 0; }
p, li { font-size: 16px; color: var(--vbu-tinte-tief); }
strong { font-weight: 600; }
mark { background: transparent; color: inherit; }

a { color: var(--vbu-rost); }
a:hover { color: var(--vbu-rost-dunkel); }
:focus-visible { outline: 2px solid var(--vbu-rost); outline-offset: 2px; }
.vbu-band--tinte :focus-visible { outline-color: var(--vbu-kupfer); }

.vbu-lauf { font-size: 17px; }
.vbu-neben { font-size: 15px; color: var(--vbu-grau); }
.vbu-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--vbu-rost);
}

/* Kern-Abstände der Fluss-Layouts abschalten, wo eigene Raster gelten */
.vbu-kopf__innen > *, .vbu-kopf__rechts > *, .vbu-kopf__cta > *,
.vbu-cta > *, .vbu-hinweis > *, .vbu-raster > *, .vbu-kasten > *, .vbu-kette > *, .vbu-kette__stufe > *,
.vbu-kosten > *, .vbu-beispiel > *, .vbu-beleg > *, .vbu-zeile > *, .vbu-schritt > *, .vbu-frage > *,
.vbu-themen > *, .vbu-blick__teil > *, .vbu-stand > *, .vbu-brot > *, .vbu-termin__innen > *, .vbu-termin__text > *,
.vbu-fuss__raster > *, .vbu-fuss__marke > *, .vbu-fuss__leiste > *, .vbu-hero__text > *, .vbu-foerder__intro > *,
.vbu-zwei .wp-block-column > * { margin-block: 0; }

/* ---------- Knöpfe ---------- */

.wp-block-button__link {
	text-decoration: none;
	border-radius: 4px;
	white-space: nowrap;
	line-height: 1.3;
}
.wp-block-button.is-style-outline > .wp-block-button__link,
.vbu-knopf2 > .wp-block-button__link {
	background: transparent;
	color: var(--vbu-tinte);
	border: 2px solid var(--vbu-tinte);
	padding: 12px 26px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.vbu-knopf2 > .wp-block-button__link:hover {
	background: var(--vbu-nebel);
	color: var(--vbu-tinte);
}

/* ---------- Bänder (volle Breite) und Abschnitte ---------- */

.vbu-band { padding-block: clamp(40px, 5vw, 72px); }
.vbu-band--eng { padding-block: clamp(36px, 4vw, 56px); }
.vbu-band--sand { background: var(--vbu-sand); }
.vbu-band--tinte { background: var(--vbu-tinte); color: var(--vbu-grund); }
.vbu-band--tinte :is(h1, h2, h3) { color: var(--vbu-grund); }
.vbu-band--tinte p, .vbu-band--tinte li { color: var(--vbu-nebel); }
.vbu-band--tinte a:not(.wp-element-button) { color: var(--vbu-grund); }
.vbu-band--tinte a:not(.wp-element-button):hover { color: var(--vbu-hell-hover); }

/* Sand-Kasten innerhalb eines Tintenbands behält seine Farben */
.vbu-band--tinte .vbu-kasten :is(h2, h3) { color: var(--vbu-tinte); }
.vbu-band--tinte .vbu-kasten p, .vbu-band--tinte .vbu-kasten li { color: var(--vbu-tinte-tief); }
.vbu-band--tinte .vbu-kasten a:not(.wp-element-button) { color: var(--vbu-rost); }
.vbu-band--tinte .vbu-kasten a:not(.wp-element-button):hover { color: var(--vbu-rost-dunkel); }

.vbu-abschnitt > * + * { margin-block-start: 32px; }
.vbu-band--eng > * + * { margin-block-start: 16px; }
.vbu-abschnitt > .vbu-raster--fragen { margin-block-start: 28px; }

/* ---------- Pfeil-Links ---------- */

.vbu-pfeil { font-size: 16px; }
.vbu-pfeil a { font-weight: 600; text-decoration: none; }
.vbu-pfeil a:hover { text-decoration: underline; }
/* 1.1.18: Textlinks im Fließtext mindestens 24 px hoch (B32 K6, Freigabe Volker 24.10.2026) – die Fläche wächst nur in der Höhe, der Zeilenabstand bleibt;
   :where hält die Regel schwächer als jede gezielte Link-Regel (Autorzeile, Eckdaten, Telefon/E-Mail, Pfeil, Brotkrumen behalten ihre 44 px) */
:where(.wp-block-post-content p, .wp-block-post-content li) a { padding-block: 3px; }
.vbu-pfeil--gross { font-size: 17px; }

/* ---------- Kopf ---------- */

.vbu-kopf {
	background: var(--vbu-grund);
	border-bottom: 1px solid var(--vbu-linie);
}
.vbu-kopf__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-top: 24px;
}
.vbu-logo { display: block; line-height: 0; }
.vbu-logo svg { height: 56px; width: auto; display: block; }
.vbu-kopf__rechts {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.vbu-kopf__tel { font-size: 15px; }
.vbu-kopf__tel a { font-weight: 600; color: var(--vbu-tinte); text-decoration: none; }
.vbu-kopf__tel a:hover { color: var(--vbu-rost); }
.vbu-kopf__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.vbu-kopf__zusatz { font-size: 14px; color: var(--vbu-grau); }

/* Navigation (Kern-Block) – Desktop: zweite Zeile unter Wortmarke und Knopf */
.vbu-nav { flex-basis: 100%; padding: 8px 0 14px; }
.vbu-nav .wp-block-navigation__container { gap: 32px; flex-wrap: wrap; }
.vbu-nav .wp-block-navigation-item__content {
	font-size: 15px;
	font-weight: 500;
	color: var(--vbu-tinte);
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	text-decoration: none;
}
.vbu-nav .wp-block-navigation-item__content:hover,
.vbu-nav .current-menu-item > .wp-block-navigation-item__content,
.vbu-nav .current-menu-ancestor > .wp-block-navigation-item__content { border-bottom-color: var(--vbu-rost); }

/* Menü-Knopf (Handy) und Schließen-Knopf im Überblendmenü */
.vbu-nav .wp-block-navigation__responsive-container-open,
.vbu-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 12px;
	border: 2px solid var(--vbu-tinte);
	border-radius: 4px;
	background: transparent;
	color: var(--vbu-tinte);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}
.vbu-nav .wp-block-navigation__responsive-container-open::after { content: "Menü"; }
.vbu-nav .wp-block-navigation__responsive-container-close::after { content: "Schließen"; }
.vbu-nav .wp-block-navigation__responsive-container-open svg,
.vbu-nav .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; fill: currentColor; }

/* Schließen-Knopf nur im geöffneten Überblendmenü */
.vbu-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }

/* Überblendmenü – Selektoren stärker als die Kernregeln (Teil 16 B, Cowork 18.10.2026):
   Kern setzt Hintergrund #fff mit (0,5,0) und Eintrags-Padding 0 mit (0,4,0) */
.wp-block-navigation.vbu-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--vbu-grund);
	color: var(--vbu-tinte);
	padding: 16px 16px 24px;
}
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 60px; }
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: 0; width: 100%; }
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item { width: 100%; }
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: 600;
	padding: 14px 0;
	border-bottom: 1px solid var(--vbu-linie);
	white-space: normal;
}
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover { border-bottom-color: var(--vbu-rost); }
/* Aktiver Menüpunkt im Überblendmenü (1.1.23): Schrift und Linie in Rost – die graue Trennlinie oben übersteuert sonst die Regel aus dem Rechnermenü. */
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--vbu-rost); border-bottom-color: var(--vbu-rost); }
.wp-block-navigation.vbu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: 16px; right: 16px; }

/* ---------- Seitenkopf (Hero) ---------- */

.vbu-hero .wp-block-columns { gap: 40px; margin: 0; }
@media (min-width: 782px) {
	.vbu-hero .wp-block-columns, .vbu-foerder .wp-block-columns, .vbu-zwei { flex-wrap: nowrap; }
}
.vbu-hero__text { display: flex; flex-direction: column; gap: 24px; }
.vbu-hero--seite .vbu-hero__text { gap: 22px; }
.vbu-einstieg {
	font-size: clamp(17px, 0.6vw + 14.5px, 20px);
	line-height: 1.5;
	max-width: 680px;
}
.vbu-hero--seite .vbu-einstieg {
	font-size: clamp(17px, 0.4vw + 15.5px, 19px);
	line-height: 1.55;
	max-width: none;
}
.vbu-portraet { margin: 0; }
.vbu-portraet img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
}

/* Knopf mit Zusatzzeile */
.vbu-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vbu-cta__zusatz { font-size: 15px; }
.vbu-band--tinte .vbu-cta__zusatz { color: var(--vbu-linie); }

/* 1.1.26: Partner-Signet Gründungswoche im Kopfband (Startseite, Förderwege), letzter Block in .vbu-cta nach der Sternezeile;
   weiße Karte nur mit dem Signet, Textzeile daneben als .vbu-cta__zusatz. Bis 22.11.2026, ab 23.11. Umzug in den Beleg
   „In Förderprogrammen tätig“ (Freigabe Volker 29.10.2026, #583). */
.vbu-partner { flex: 0 0 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vbu-partner > * { margin-block: 0; }
.vbu-partner__karte { margin: 0; background: var(--vbu-weiss); border-radius: 4px; padding: 6px 10px; line-height: 0; }
.vbu-partner__karte img { display: block; height: 64px; width: auto; }

/* Hinweis „Gründen aus der Arbeitslosigkeit“ mit Kupferstrich */
.vbu-hinweis {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 12px;
	row-gap: 4px;
	align-items: center;
	padding-top: 8px;
}
.vbu-hinweis::before {
	content: "";
	width: 40px;
	height: 3px;
	background: var(--vbu-kupfer);
	grid-column: 1;
	grid-row: 1;
}
.vbu-hinweis > * { grid-column: 2; }

/* Brotkrumen: Desktop voller Pfad, Handy nur „‹ Förderwege“ */
.vbu-brot p { font-size: 14px; }
.vbu-band--tinte .vbu-brot p { color: var(--vbu-linie); }
.vbu-brot--klein { display: none; }

/* Autorzeile „Von Volker Beckmann · Stand: …“ (Datum = letztes Speichern der Seite, B22) */
.vbu-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.vbu-stand p, .vbu-stand .wp-block-post-date { font-size: 14px; }
.vbu-band--tinte .vbu-stand p, .vbu-band--tinte .vbu-stand .wp-block-post-date { color: var(--vbu-linie); }
.vbu-stand .wp-block-post-date::before { content: "· Stand: "; }
.vbu-stand .wp-block-post-date:first-child::before { content: "Stand: "; } /* Datum allein in der Gruppe (Datenschutz): kein Trennpunkt – Teil 19, 19.10. */

/* 1.1.29: Fachbeitrag – Veröffentlichungsdatum vor dem Stand (B22, Sendeplan 02.11.2026, #601) */
.vbu-stand .vbu-stand__erschienen::before { content: "· Veröffentlicht: "; }

/* ---------- Fachbeitrag und Übersicht /fachbeitraege/ (1.1.29) ---------- */

.vbu-beitrag .wp-block-post-content :is(p, li) { font-size: 17px; }
.vbu-beitrag .wp-block-post-content > h2 { margin-block-start: 40px; }
.vbu-beitrag .wp-block-post-content > h3 { margin-block-start: 28px; }
.vbu-beitrag .wp-block-post-content > :is(ul, ol) { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.vbu-beitrag .wp-block-post-content > .wp-block-quote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var(--vbu-kupfer); }
.vbu-fachbeitraege .wp-block-post-template { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 32px; }
.vbu-fachbeitraege .wp-block-post { margin: 0; }
.vbu-fachbeitraege .wp-block-post > * + * { margin-block-start: 8px; }
.vbu-fachbeitraege .wp-block-post:not(:last-child) { padding-bottom: 32px; border-bottom: 1px solid var(--vbu-linie); }
.vbu-fachbeitraege .wp-block-post-title { font-size: clamp(20px, 0.3vw + 19px, 22px); }
.vbu-fachbeitraege .wp-block-post-title a { text-decoration: none; }
.vbu-fachbeitraege .wp-block-post-title a:hover { text-decoration: underline; }
.vbu-fachbeitraege .wp-block-post-date { font-size: 14px; color: var(--vbu-grau); }

/* ---------- Raster ---------- */

.vbu-raster { display: grid; gap: 24px; }
.vbu-raster--oben { align-items: start; }
.vbu-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vbu-raster--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.vbu-raster--fragen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.vbu-raster--belege { gap: 32px; }
.vbu-raster--3 > *, .vbu-raster--5 > * { min-width: 0; }

/* Zwei gleich breite Spalten (Kern-Spaltenblock) */
.vbu-zwei { gap: 56px; margin: 0; }
.vbu-zwei .wp-block-column { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Kästen ---------- */

.vbu-kasten {
	background: var(--vbu-sand);
	border-radius: 4px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: auto;
}
.vbu-kasten > .vbu-pfeil--unten { margin-top: auto; }
.vbu-kasten--leistung h3 { font-size: 22px; }
.vbu-kasten--eck { gap: 14px; }
.vbu-kasten--eck h2, .vbu-kasten--blick h2, .vbu-kasten--fuerwen h2 { font-size: 22px; }

/* 1.1.25: Vertrauenselement im Kasten „So geht es weiter“ (Terminseite; Neuanalyse 25.10. K10, Freigabe Volker 25.10.2026):
   Porträtkreis, Ich-Zeile, eine Kundenstimme, Quelle. Die Kreiswerte sind bewusst von .vbu-hero--start .vbu-portraet
   (Handy-Block, 1.1.9/1.1.10) übernommen und hier breitenunabhängig – die abgenommene Startseitenregel bleibt unverändert. */
.vbu-vertrauen {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 10px 14px;
	align-items: start;
	margin-top: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--vbu-linie);
}
.vbu-vertrauen .vbu-portraet {
	margin: 0;
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 3px solid var(--vbu-kupfer);
	overflow: hidden;
}
.vbu-vertrauen .vbu-portraet img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 0;
	transform: scale(1.15);
	transform-origin: 78.6% 0;
}
.vbu-vertrauen .vbu-vertrauen__name { margin: 0; align-self: center; font-size: 16px; line-height: 1.5; }
.vbu-vertrauen .vbu-vertrauen__name strong { font-weight: 600; }
.vbu-vertrauen .vbu-vertrauen__zitat { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 1.55; }
.vbu-vertrauen .vbu-vertrauen__quelle { grid-column: 1 / -1; margin: 0; font-size: 14px; }

/* Eckdaten: Begriff links, Wert rechts – der fette Begriff hängt links aus */
.vbu-kasten--eck p { position: relative; padding-left: 136px; min-height: 24px; }
.vbu-kasten--eck p > strong:first-child { position: absolute; left: 0; top: 0; width: 120px; }

/* Auf einen Blick (Gründungszuschuss / Einstiegsgeld) */
.vbu-kasten--blick { gap: 18px; }
.vbu-blick__teil { display: flex; flex-direction: column; gap: 6px; }
.vbu-blick__teil h3 { font-size: 18px; }
.vbu-blick__teil + .vbu-blick__teil, .vbu-blick__teil + p { border-top: 1px solid var(--vbu-linie); padding-top: 16px; }

/* Listen */
.vbu-liste { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.vbu-liste li { font-size: 17px; }
.vbu-kasten .vbu-liste li { font-size: 16px; }

/* Themen (AVGS: „Was wir im Coaching erarbeiten“) */
.vbu-themen { display: flex; flex-direction: column; gap: 14px; }
.vbu-themen p { font-size: 17px; }
.vbu-themen strong { color: var(--vbu-tinte); }

/* ---------- Förderkette (Startseite) ---------- */

.vbu-foerder .wp-block-columns { gap: 40px; margin: 0; align-items: start; }
.vbu-foerder__intro { display: flex; flex-direction: column; gap: 16px; }
.vbu-foerder__intro p { font-size: 17px; }
.vbu-foerder__intro .vbu-pfeil { font-size: 16px; }

.vbu-kette { counter-reset: stufe; }
.vbu-kette__stufe {
	counter-increment: stufe;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 20px;
	row-gap: 0;
	padding-bottom: 28px;
}
.vbu-kette__stufe:last-child { padding-bottom: 0; }
.vbu-kette__stufe::before {
	content: counter(stufe);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vbu-tinte);
	color: var(--vbu-grund);
	font-weight: 600;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1 / span 4;
}
.vbu-kette__stufe > * { grid-column: 2; }
.vbu-kette__stufe > * + * { margin-block-start: 6px; }
.vbu-kette__stufe h3 { font-size: 20px; }
.vbu-kette__stufe:not(:last-child) > :last-child { border-bottom: 1px solid var(--vbu-linie); padding-bottom: 24px; }

.vbu-kosten {
	background: var(--vbu-grund);
	border-radius: 4px;
	padding: 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 40px;
}
.vbu-kosten h3 { font-size: 20px; }
.vbu-kosten .vbu-raster { gap: 16px; }
.vbu-beispiel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	background: var(--vbu-sand);
	border-radius: 4px;
}
.vbu-beispiel__summe { font-weight: 600; }
.vbu-beispiel .vbu-beispiel__summe { color: var(--vbu-rost); }

/* ---------- Belege („Warum Volker Beckmann“) ---------- */

.vbu-beleg {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 20px;
	border-left: 3px solid var(--vbu-kupfer);
}
.vbu-zeile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/* ---------- Ablauf in Schritten ---------- */

.vbu-ablauf { counter-reset: schritt; }
.vbu-schritt {
	counter-increment: schritt;
	background: var(--vbu-sand);
	border-radius: 4px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.vbu-band--sand .vbu-schritt { background: var(--vbu-grund); }
.vbu-schritt h3 { font-size: 18px; }
.vbu-ablauf .vbu-schritt::before {
	content: counter(schritt);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vbu-tinte);
	color: var(--vbu-grund);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vbu-schritt--label { padding: 24px; }
.vbu-schritt--label h3 { font-size: 20px; }

/* 1.1.6: Ablauf als nummerierte Liste untereinander statt fünf schmaler Spalten
   (am Rechner brachen die Absätze auf Einzelwörter; Freigabe Volker 20.10.2026).
   Zwei Klassen schlagen die Spaltenregeln für .vbu-raster--5 in den Breakpoints. */
.vbu-raster--5.vbu-ablauf { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vbu-ablauf .vbu-schritt > p { max-width: 68ch; } /* Zeilenlänge lesbar halten, Liste bleibt bündig mit der H2 */
.vbu-ablauf .vbu-schritt {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 18px;
	row-gap: 4px;
	align-items: start;
	padding: 18px 22px;
}
.vbu-ablauf .vbu-schritt::before { grid-column: 1; grid-row: 1 / span 2; }
.vbu-ablauf .vbu-schritt > * { grid-column: 2; margin: 0; }
.vbu-ablauf .vbu-schritt h3 { padding-top: 8px; }

/* ---------- Häufige Fragen ---------- */

.vbu-frage { display: flex; flex-direction: column; gap: 6px; }
.vbu-frage h3 { font-size: 18px; }

/* ---------- Vergleichstabelle (Gründungszuschuss / Einstiegsgeld) ---------- */

.vbu-vergleich { margin: 0; }
.vbu-vergleich table { border-collapse: collapse; width: 100%; font-size: 16px; }
.vbu-vergleich th, .vbu-vergleich td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--vbu-linie);
	vertical-align: top;
	text-align: left;
	color: var(--vbu-tinte-tief);
	font-size: 16px;
}
.vbu-vergleich thead th {
	color: var(--vbu-tinte);
	font-weight: 600;
	border-bottom: 2px solid var(--vbu-tinte);
}
.vbu-vergleich tbody td:first-child { font-weight: 600; color: var(--vbu-tinte); width: 160px; }

/* ---------- Terminanfrage-Formular ([vbu_terminanfrage]) ---------- */

.vbu-formular__form { display: flex; flex-direction: column; gap: 18px; }
.vbu-formular__feld { display: flex; flex-direction: column; gap: 6px; }
.vbu-formular__feld label { font-size: 16px; font-weight: 600; color: var(--vbu-tinte); }
.vbu-formular__pflicht { color: var(--vbu-rost); }
.vbu-formular input[type="text"], .vbu-formular input[type="email"], .vbu-formular input[type="tel"], .vbu-formular textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--vbu-linie);
	border-radius: 4px;
	background: var(--vbu-weiss);
	color: var(--vbu-tinte-tief);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
}
.vbu-formular textarea { min-height: 150px; resize: vertical; }
.vbu-formular input:focus-visible, .vbu-formular textarea:focus-visible { outline: 2px solid var(--vbu-rost); outline-offset: 1px; border-color: var(--vbu-rost); }
/* Fehlerrahmen: Selektor stärker als die Feldregel oben (0,2,1), sonst bleiben Name/E-Mail grau (Teil 17, Befund 2) */
.vbu-formular .vbu-formular__feld--fehler input, .vbu-formular .vbu-formular__feld--fehler textarea { border-color: var(--vbu-rost); border-width: 2px; }
.vbu-formular__hinweis { font-size: 15px; color: var(--vbu-rost); font-weight: 600; }
.vbu-formular__pflichthinweis { font-size: 16px; color: var(--vbu-grau); margin-top: -8px; }
.vbu-formular__datenschutz { font-size: 16px; color: var(--vbu-grau); }
.vbu-formular .wp-block-button__link { cursor: pointer; border: 0; font-family: inherit; }
.vbu-formular__fehler {
	border-left: 3px solid var(--vbu-rost);
	background: var(--vbu-sand);
	padding: 14px 18px;
	border-radius: 4px;
}
.vbu-formular__fehler ul { margin: 6px 0 0; padding-left: 20px; }
.vbu-formular__fehler li { font-size: 16px; }
.vbu-formular__erfolg {
	background: var(--vbu-sand);
	border-radius: 4px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.vbu-formular__erfolg h2 { font-size: 26px; }
/* Unsichtbares Feld für Automaten */
.vbu-formular__falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Auf der Terminseite selbst und auf den Rechtsseiten kein Terminband (Teil 19, 19.10.) */
.page-termin-vereinbaren .vbu-termin, .page-impressum .vbu-termin, .page-datenschutz .vbu-termin, .page-kontakt .vbu-termin { display: none; } /* 1.1.7: auch /kontakt/ – Knopf, Telefon und E-Mail stehen dort schon im Seitenkopf */
.vbu-terminseite .wp-block-columns { gap: 56px; margin: 0; align-items: start; }
/* Förderwege-Übersicht: Kette und Seitenkopf ohne Nebenkasten auf Lesebreite (Teil 20, Hinweis 1) */
.page-foerderwege .vbu-kette, .page-foerderwege .vbu-hero__text { max-width: 760px; }
@media (max-width: 781px) {
	.vbu-formular .wp-block-buttons, .vbu-formular .wp-block-button, .vbu-formular .wp-block-button__link { width: 100%; }
	.vbu-formular .wp-block-button__link { text-align: center; white-space: normal; }
	.vbu-terminseite .wp-block-columns { gap: 32px; }
}

/* ---------- Terminband ---------- */

.vbu-termin { padding-block: clamp(40px, 4vw, 56px); }
.vbu-termin__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.vbu-termin__text { display: flex; flex-direction: column; gap: 8px; }
.vbu-termin p { font-size: 16px; color: var(--vbu-linie); }
.vbu-termin a:not(.wp-element-button) { font-weight: 600; }

/* ---------- Fuß ---------- */

.vbu-fuss {
	border-top: 1px solid var(--vbu-linie);
	padding-block: 40px 28px;
}
/* Vier Blöcke mit gleichem Abstand: Marke so breit wie das Logo, Orte und Kontakt so breit wie ihr Text (Ansage Volker 20.10.2026: Symmetrie im Fuß) */
.vbu-fuss__raster {
	display: grid;
	grid-template-columns: 280px auto auto auto;
	justify-content: space-between;
	gap: 32px;
	align-items: start;
}
.vbu-fuss__marke { display: flex; flex-direction: column; gap: 14px; }
.vbu-fuss__marke .vbu-logo svg { width: 280px; max-width: 100%; height: auto; }
.vbu-fuss__marke p { color: var(--vbu-grau); }
/* Tablet: Marke über die volle Breite, darunter drei Spalten mit gleichem Abstand */
@media (min-width: 782px) and (max-width: 1023px) {
	.vbu-fuss__raster { grid-template-columns: auto auto auto; }
	.vbu-fuss__marke { grid-column: 1 / -1; contain: inline-size; }
}
.vbu-fuss p { font-size: 15px; color: var(--vbu-tinte); line-height: 1.6; }
.vbu-fuss a { color: var(--vbu-tinte); text-decoration: none; }
.vbu-fuss a:hover { color: var(--vbu-rost); }
.vbu-fuss__kontakt a { white-space: nowrap; }
.vbu-fuss__leiste {
	margin-top: 28px;
	border-top: 1px solid var(--vbu-linie);
	padding-top: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.vbu-fuss__leiste p, .vbu-fuss__leiste .wp-block-post-date { font-size: 14px; color: var(--vbu-grau); }
.vbu-fuss__rechtliches { display: flex; flex-wrap: wrap; gap: 8px 24px; } /* 1.1.14: dritter Link (KI in meiner Arbeit) – am Handy umbrechen statt drücken */
.vbu-fuss__rechtliches a { white-space: nowrap; }

/* ---------- Mittlere Breiten (Tablet): Kopf wie am Handy ---------- */

@media (max-width: 899px) {
	.vbu-kopf__innen { padding: 16px 0; gap: 12px; flex-wrap: nowrap; }
	.vbu-kopf__rechts { display: none; }
	.vbu-logo svg { height: auto; width: min(230px, 60vw); }
	.vbu-nav { flex-basis: auto; padding: 0; }
	/* 1.1.20: Fehlt Platz (320 px), gibt die Wortmarke nach, der Menü-Knopf behält Text und 44 px – kein seitliches Schieben (B32 K8, Freigabe Volker 24.10.2026); ab 375 ohne Wirkung */
	.vbu-logo { flex: 0 1 auto; min-width: 0; }
	.vbu-logo svg { max-width: 100%; }
	.vbu-nav { flex-shrink: 0; }
}
/* 1.1.29: Mit dem siebten Menüpunkt (Fachbeiträge, erscheint erst mit dem ersten veröffentlichten Text) bliebe bei 1024 px (iPad quer) „Kontakt“ allein in der zweiten Zeile; ab 1120 px passen 32 px Abstand */
@media (min-width: 900px) and (max-width: 1119px) {
	.vbu-nav .wp-block-navigation__container:has(> :nth-child(7)) { gap: 16px; }
}
/* Zwischen 600 und 899 px zeigt der Kern das Menü offen – hier bleibt der Menü-Knopf */
@media (min-width: 600px) and (max-width: 899px) {
	.vbu-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.vbu-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

@media (max-width: 1023px) {
	.vbu-raster--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1.1.7 Tablet 782–1023 (Befunde Cowork 20./21.10., Freigabe Volker 22.10.): drei Karten nebeneinander wurden zu schmal → untereinander;
   Seitenkopf mit Kasten („Eckdaten“, „auf einen Blick“, „Für wen“) untereinander statt 58/42 nebeneinander – Kasten in voller Breite, ohne Worttrennung und Überlänge.
   Nur Köpfe mit Kasten; Über mich (Porträtspalte) bleibt nebeneinander.
   1.1.14: Grenze 1023 → 1099 px – bei 1024 (iPad quer) brachen die Startseiten-Schritte in schmalen Spalten unruhig (Freigabe Volker 24.10.2026). */
@media (min-width: 782px) and (max-width: 1099px) {
	.vbu-raster--3 { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; } /* 1.1.8: Lesebreite wie Förderwege (1.1.3), linksbündig – Zeilen ~80 statt 100–115 Zeichen (Freigabe Volker 22.10.) */
	.is-layout-constrained > .vbu-raster--3 { margin-left: 0 !important; } /* Kern zentriert Kinder im Inhaltsbereich mit margin auto !important – hier bündig unter der Überschrift */
	.vbu-hero--seite .wp-block-columns:has(> .wp-block-column > .vbu-kasten) { flex-wrap: wrap !important; gap: 32px; } /* Kern setzt ab 782 px nowrap !important */
	.vbu-hero--seite .wp-block-columns:has(> .wp-block-column > .vbu-kasten) > .wp-block-column { flex-basis: 100% !important; }
}

/* ---------- Handy (Kern stapelt Spalten ab 781 px) ---------- */

@media (max-width: 781px) {
	h2 { font-size: 22px; } /* Inhalts-H2 kleiner als die H1 (26 px) – Teil 19, 19.10. */
	.vbu-lauf, .vbu-liste li, .vbu-themen p, .vbu-foerder__intro p { font-size: 16px; }
	.vbu-beitrag .wp-block-post-content :is(p, li) { font-size: 16px; } /* 1.1.29 */
	.vbu-fachbeitraege .wp-block-post-date { font-size: 16px; } /* 1.1.29: wie die Autorzeile am Handy */
	/* 1.1.29: Autorzeile des Beitrags untereinander, sonst stünde der Trennpunkt am Zeilenanfang */
	.vbu-stand--beitrag { flex-direction: column; align-items: flex-start; }
	.vbu-stand--beitrag .wp-block-post-date::before { content: "Stand: "; }
	.vbu-stand--beitrag .vbu-stand__erschienen::before { content: "Veröffentlicht: "; }
	.vbu-neben { font-size: 16px; }
	.vbu-pfeil a { display: inline-flex; align-items: center; min-height: 44px; }

	/* Knopf in voller Breite, Zusatz zentriert */
	.vbu-cta { flex-direction: column; align-items: stretch; gap: 16px; }
	.vbu-cta .wp-block-buttons, .vbu-cta .wp-block-button, .vbu-cta .wp-block-button__link { width: 100%; }
	.vbu-cta .wp-block-button__link { text-align: center; white-space: normal; }
	.vbu-cta__zusatz { text-align: center; font-size: 16px; }
	.vbu-partner { flex: none; flex-direction: column; gap: 8px; } /* 1.1.26: Signet und Zeile untereinander, zentriert */
	.vbu-partner__karte img { height: 56px; }

	/* Seitenkopf Startseite: Titel, Knopf, kleines rundes Porträt neben dem Einstieg, Hinweis */
	.vbu-hero--start .vbu-hero__spalten {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}
	.vbu-hero--start .vbu-hero__spalten > .wp-block-column { display: contents; }
	.vbu-hero--start h1 { grid-column: 1 / -1; order: 1; }
	.vbu-hero--start .vbu-cta { grid-column: 1 / -1; order: 2; }
	/* 1.1.9: Kreis auf der figure, Bild darin vergrößert – das Gesicht füllt den Kreis (Foto 22.10., Kopf x 230–630 von 800, Augen y ≈ 32 %; Freigabe Volker 22.10.) */
	.vbu-hero--start .vbu-portraet {
		order: 3;
		margin-top: 8px;
		width: 80px;
		height: 80px;
		box-sizing: border-box;
		border-radius: 50%;
		border: 3px solid var(--vbu-kupfer);
		overflow: hidden;
	}
	.vbu-hero--start .vbu-portraet img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 0;
		object-fit: cover;
		object-position: 50% 0;
		transform: scale(1.15);
		transform-origin: 78.6% 0; /* 1.1.10: ganzer Kopf mit Haaren und Bart, Bild-y 0–696, x 82–778 (Volker 22.10.: „Der Kreis ist jetzt okay … nichts mehr dran verändern.“) */
	}
	.vbu-hero--start .vbu-einstieg { order: 4; padding-top: 8px; font-size: 17px; }
	.vbu-hero--start .vbu-hinweis { grid-column: 1 / -1; order: 5; }
	.vbu-hinweis {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		border-top: 1px solid var(--vbu-grau);
		padding-top: 16px;
	}
	.vbu-hinweis::before { display: none; }

	/* Seitenkopf Unterseiten: Brotkrumen, Titel, Knopf, Einstieg, Autorzeile; Kasten darunter */
	.vbu-hero--seite .wp-block-columns { gap: 32px; }
	.vbu-hero--seite .vbu-hero__text { gap: 16px; }
	.vbu-hero--seite .vbu-hero__text > .vbu-brot { order: 1; }
	.vbu-hero--seite .vbu-hero__text > h1 { order: 2; }
	.vbu-hero--seite .vbu-hero__text > .vbu-cta { order: 3; }
	.vbu-hero--seite .vbu-hero__text > .vbu-einstieg { order: 4; font-size: 17px; }
	.vbu-hero--seite .vbu-hero__text > .vbu-stand { order: 5; }
	.vbu-hero--seite .vbu-hero__text > .vbu-termin__direkt { order: 6; } /* Terminseite: „Oder direkt“ nach dem Einstieg, nicht über der H1 (Teil 17, Befund 3) */
	.vbu-hero--seite .vbu-hero__text > .vbu-cta--buchen { order: 5; } /* 1.1.26: Terminseite, Knopf „Termin direkt online buchen“ nach dem Einstieg, vor „Oder direkt“ (Freigabe Volker 29.10.2026, #583) */
	.vbu-brot--gross { display: none; }
	.vbu-brot--klein { display: block; }
	.vbu-brot--klein a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-weight: 600;
		font-size: 16px;
		text-decoration: none;
	}
	.vbu-stand p, .vbu-stand .wp-block-post-date { font-size: 16px; }
	/* Textlinks in Autorzeile und Eckdaten: Tippfläche 44 px ohne Layoutänderung */
	.vbu-stand a, .vbu-kasten--eck a { display: inline-block; padding-block: 12px; margin-block: -12px; }
	/* 1.1.7: Telefon- und Mail-Links im Seiteninhalt (Kontakt, Impressum) wie im Fuß 44 px hoch – zwei Zeilen untereinander überlappen nicht */
	.wp-block-post-content a[href^="tel:"], .wp-block-post-content a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }

	/* Raster einspaltig */
	.vbu-raster--3, .vbu-raster--fragen { grid-template-columns: 1fr; gap: 20px; }
	.vbu-raster--belege { gap: 20px; }
	.vbu-kosten .vbu-raster { gap: 12px; }
	.vbu-zwei { gap: 36px; }
	.vbu-zwei .wp-block-column { gap: 16px; }

	.vbu-kasten { padding: 22px 20px; gap: 8px; }
	.vbu-kasten--leistung h3 { font-size: 21px; }
	.vbu-kasten--eck p { padding-left: 0; }
	.vbu-kasten--eck p > strong:first-child { position: static; display: block; width: auto; }

	.vbu-kette__stufe { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; }
	.vbu-kette__stufe::before { width: 40px; height: 40px; font-size: 17px; }
	.vbu-kette__stufe > * + * { margin-block-start: 4px; }
	.vbu-kette__stufe h3 { font-size: 18px; }
	.vbu-kette__stufe:not(:last-child) > :last-child { border-bottom: 0; padding-bottom: 0; }
	.vbu-kosten { padding: 20px; gap: 12px; margin-top: 20px; }

	.vbu-beleg { padding-left: 16px; gap: 8px; }
	.vbu-zeile { flex-direction: column; align-items: stretch; gap: 16px; }
	.vbu-zeile .wp-block-buttons, .vbu-zeile .wp-block-button, .vbu-zeile .wp-block-button__link { width: 100%; }
	.vbu-zeile .wp-block-button__link { text-align: center; }

	.vbu-schritt { padding: 20px; gap: 6px; }
	.vbu-schritt--label h3 { font-size: 19px; }

	/* Terminband gestapelt */
	.vbu-termin__innen { flex-direction: column; align-items: stretch; gap: 14px; }
	.vbu-termin .wp-block-buttons, .vbu-termin .wp-block-button, .vbu-termin .wp-block-button__link { width: 100%; }
	.vbu-termin .wp-block-button__link { text-align: center; white-space: normal; }
	.vbu-termin .vbu-termin__direkt { text-align: center; } /* nur im Band; im Seitenkopf der Terminseite bleibt die Zeile linksbündig */
	.vbu-termin__direkt a { display: inline-flex; align-items: center; min-height: 44px; }
	/* 1.1.6: Mailadresse am Handy in eigener Zeile statt allein überhängend (Befund Cowork 19.10., Freigabe Volker 20.10.) */
	.vbu-termin .vbu-termin__trenner { display: none; }
	.vbu-termin .vbu-termin__mail { display: flex; justify-content: center; }

	/* Fuß: Wortmarke, zwei Standorte nebeneinander, Kontakt, Leiste */
	.vbu-fuss { padding-block: 32px 24px; }
	.vbu-fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.vbu-fuss__marke { grid-column: 1 / -1; }
	.vbu-fuss__marke .vbu-logo svg { width: 220px; }
	.vbu-fuss__ort, .vbu-fuss__ort--berlin { grid-column: span 1; }
	.vbu-fuss__kontakt { grid-column: 1 / -1; }
	.vbu-fuss p { font-size: 16px; }
	.vbu-fuss__kontakt a, .vbu-fuss__rechtliches a { display: inline-flex; align-items: center; min-height: 44px; }
	.vbu-fuss__leiste { margin-top: 20px; padding-top: 8px; flex-direction: column; align-items: flex-start; gap: 4px; }
	.vbu-fuss__leiste p, .vbu-fuss__leiste .wp-block-post-date { font-size: 16px; }
}

@media (max-width: 699px) {
	/* Vergleichstabelle als Karten je Merkmal (Inhalt bleibt Text, B13) */
	.vbu-vergleich thead { display: none; }
	.vbu-vergleich tr {
		display: block;
		background: var(--vbu-sand);
		border-radius: 4px;
		padding: 16px;
		margin-bottom: 12px;
	}
	.vbu-vergleich td { display: block; padding: 0; border: 0; width: auto; }
	.vbu-vergleich tbody td:first-child {
		width: auto;
		font-size: 14px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: var(--vbu-rost);
		margin-bottom: 8px;
	}
	.vbu-vergleich td + td { margin-top: 8px; }
	.vbu-vergleich td:nth-child(2)::before { content: "Gründungszuschuss: "; font-weight: 600; color: var(--vbu-tinte); }
	.vbu-vergleich td:nth-child(3)::before { content: "Einstiegsgeld: "; font-weight: 600; color: var(--vbu-tinte); }
}

@media (max-width: 639px) {
	.vbu-raster--5 { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Editor ---------- */

.editor-styles-wrapper .vbu-band--tinte { color: var(--vbu-grund); }