/*
 Theme Name:   Hello Elementor Child – PKV4U PoC
 Theme URI:    https://pkv4u.net
 Description:  Child-Theme von Hello Elementor. Enthaelt AP-H01.3: Proof-of-Concept-Custom-Template fuer Hero, "Wo beginnt Ihre Frage?" und Vorcheck. Elementor bleibt fuer alle anderen Seiten aktiv, dieses Child-Theme aendert daran nichts.
 Author:       PKV4U
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/*
 * AP-P0.2-R1 — Mobile-Fix Complianz-Cookie-Banner auf schmalen Viewports
 * ===========================================================================
 * BEFUND (reproduziert 2026-08-26, z. B. /gkv-beitragsnachforderung-bei-
 * selbststaendigen/ bei frischem Consent-Status, 375px Viewport): Der
 * sitewide eingebundene Complianz-Cookie-Banner (.cmplz-cookiebanner) setzt
 * eine feste `width: 518px` unabhaengig vom Viewport; die enthaltene
 * Button-Reihe (.cmplz-buttons) hat `flex-wrap: nowrap`. Zusammen erzeugt
 * das auf jeder Seite, auf der der Banner tatsaechlich angezeigt wird
 * (Wissensseiten reproduzierbar; die Golden-Master-Homepage zeigte den
 * Banner im getesteten Zustand nicht), horizontalen Seiten-Overflow bei
 * Viewports <= ca. 480px. Ursache liegt im Complianz-Plugin selbst
 * (fehlende Responsive-Regel fuer diese Bannerbreite), nicht im hier
 * integrierten Wissensinhalt.
 *
 * FIX: Ausschliesslich Banner-Breite und Button-Umbruch auf schmalen
 * Viewports korrigieren. Bewusst KEIN `overflow-x:hidden` auf body/html
 * (wuerde das Symptom nur verstecken); der Banner bleibt vollstaendig
 * sichtbar, bedienbar und mit Tastatur fokussierbar, lediglich sein Layout
 * wird responsiv. Keine Aenderung an Complianz-Plugin-Dateien selbst
 * (Update-sicher), keine Aenderung an Desktop-Darstellung (>480px
 * unberuehrt).
 */
@media ( max-width: 480px ) {
	.cmplz-cookiebanner {
		width: calc( 100vw - 20px ) !important;
		max-width: calc( 100vw - 20px ) !important;
		box-sizing: border-box !important;
	}
	.cmplz-buttons {
		flex-wrap: wrap !important;
	}
	.cmplz-buttons .cmplz-btn {
		width: 100% !important;
	}
}

/*
 * AP-P0.2-R1 — Mobile-Fix lange unbrechbare Fachbegriffe in Wissensartikeln
 * ===========================================================================
 * BEFUND (reproduziert 2026-08-26, /gkv-beitragsnachforderung-bei-
 * selbststaendigen/, 375px): Der Complianz-Fix oben allein loeste den
 * horizontalen Overflow auf Wissensseiten NICHT vollstaendig. Praezise
 * Root-Cause-Nachverfolgung (Bisektion + Textknoten-Scan) ergab eine zweite,
 * unabhaengige Ursache: lange, im Deutschen unvermeidbare zusammengesetzte
 * Fachbegriffe ohne Leerzeichen/Bindestrich (z. B. "Mindestbeitrags-
 * bemessungsgrundlage", 35 Zeichen, als H3-Ueberschrift bei 28px
 * Schriftgroesse) brechen ohne `overflow-wrap` nicht um. Da das Elementor-
 * Post-Content-Widget (.elementor-widget-theme-post-content) in einem
 * Flexbox-Container liegt, dessen Kinder standardmaessig `min-width: auto`
 * haben, erzwingt ein einzelnes solches unbrechbares Wort die intrinsische
 * Mindestbreite des gesamten Containers – und damit einen echten
 * Seiten-Overflow, unabhaengig vom Complianz-Banner. Bereits vorhandene
 * Tabellen sind davon nicht betroffen (eigener overflow-x:auto-Wrapper, AP-
 * P0.2). Kein Fehler im Konvertierungsskript selbst, sondern eine fehlende
 * Standard-Absicherung im Theme fuer lange deutsche Fachbegriffe, die erst
 * durch echten, langen Wissensinhalt sichtbar wurde.
 *
 * FIX: `overflow-wrap: break-word` ausschliesslich innerhalb des Post-
 * Content-Widgets, für alle Textelemente. Bricht ein Wort nur dann an einer
 * beliebigen Stelle um, wenn es allein nicht in die verfuegbare Breite passt
 * – normales Umbrechen an Leer-/Trennzeichen bleibt fuer alle anderen
 * Inhalte unveraendert. Keine Aenderung an Desktop-Darstellung (Wortumbruch
 * greift dort nicht, da genug Breite vorhanden ist).
 */
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-theme-post-content td,
.elementor-widget-theme-post-content th,
.elementor-widget-theme-post-content a,
.elementor-widget-theme-post-title h1 {
	overflow-wrap: break-word;
	word-break: normal;
}

/*
 * Ergaenzung zum Fix oben: `.e-con-inner` (Elementor-Flex-Container-Kind)
 * hatte innerhalb des Single-Post-Templates `min-width: auto` (Flexbox-
 * Standard), waehrend alle umgebenden Container bereits `min-width: 0`
 * hatten. Dieses eine `auto` genuegte, damit intrinsische Inhaltsbreiten
 * (u. a. der Post-Titel) den gesamten Container und damit die Seite auf
 * schmalen Viewports aufweiten konnten – reproduzierbar per Bisektion
 * bestaetigt. Bewusst nur innerhalb `.elementor-location-single` (Single-
 * Post-Template) skaliert, nicht sitewide, um keine unbeabsichtigten
 * Seiteneffekte auf anderen Elementor-Seiten (u. a. Golden Master) zu
 * riskieren.
 */
.elementor-location-single .e-con-inner {
	min-width: 0;
}

/*
 * ===========================================================================
 * AP-P0.2-P1 — Knowledge Article Template Premium Polish
 * ===========================================================================
 * AUSGANGSBEFUND (geprüft an KO-03, KO-12, KO-17, KO-22, KO-24, Desktop +
 * Mobile, vor dieser Änderung): Das Single-Post-Template lud auf
 * Wissensartikeln keinerlei PKV4U-Markentypografie. H1/H2/H3/Absätze liefen
 * auf dem generischen System-Font-Stack der Elementor-Standardvorlage
 * (-apple-system/Segoe UI/Roboto, Gewicht 500, keine Größenhierarchie
 * zwischen H1 40px/H2 32px), die Lesebreite war auf die volle
 * Content-Container-Breite (~1200px) ungebremst, Tabellen liefen ebenfalls
 * auf voller Breite, und Kurzorientierung/Grenzen/NBA/Quellen waren optisch
 * nicht vom fortlaufenden Fließtext unterschieden. Ergebnis: ein sichtbarer
 * Bruch zwischen der redaktionellen Golden-Master-Homepage (Playfair
 * Display/Montserrat, Markenfarben #0C1C2B/#E0C097) und den technisch
 * wirkenden Wissensseiten.
 *
 * PRINZIP DIESER ÄNDERUNG: ausschließlich vorhandene PKV4U-Markenmittel
 * wiederverwenden (dieselben Google-Fonts-Familien wie der Golden Master,
 * siehe pkv4u_ko_enqueue_fonts() in functions.php; dieselben Farbwerte wie
 * template-golden-master.php/golden-master-desktop.html). Keine neue
 * Designrichtung, keine neue Farbe, keine neue Schriftart, keine Animation.
 * Ausschließlich CSS und rein strukturelle Wrapper-<div>s ohne Textänderung
 * (siehe convert_ko.py: pkv4u-ko-quickref/-limits/-nba/-sources) — keine der
 * 21 fachlichen Markdown-Quelldateien wurde angefasst.
 */

/* --- Lesespalte: Titel und Inhalt als eine zusammengehörige Spalte.
   !important noetig: Elementors eigenes frontend.min.css setzt fuer
   Widget-Kinder von `.e-con` generisch `max-width:100% !important`-freie,
   aber hoeher spezifische Regel (`.elementor.elementor .e-con > .elementor-
   widget`, 4 Klassen); ohne !important wuerde die hier bewusst gewaehlte
   Lesebreite von Elementors Layout-Utility ueberschrieben. --- */
/*
 * Portalstruktur-Abschluss (2026-09-04), Punkt 1 — zweite Breitenkorrektur.
 * Batch 4 hatte 700px auf 760px angehoben; Dirks Bildschirmreview auf
 * echten 1440/1920px-Displays ergab weiterhin zu wenig genutzte Flaeche
 * ("Insel in sehr viel Weissraum", Gesamtrahmen bei 1920px nur ca. 735px).
 * Neue Zielwerte (Auftragsvorgabe 800-860px Haupttext, 270-300px TOC,
 * 40-56px Zwischenraum, Gesamtrahmen ca. 1200-1320px): 850px Haupttext,
 * gewaehlt am oberen Ende des Vorgabebereichs fuer bessere Flaechennutzung
 * bei weiterhin lesbarer Zeilenlaenge (siehe Zeichen-pro-Zeile-Messung
 * unten bei der TOC-Breakpoint-Anpassung).
 */
.elementor-widget-theme-post-title,
.elementor-widget-theme-post-content {
	width: 100% !important;
	max-width: 850px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	position: relative;
}

/* Batch 3 Nacharbeit — Abschnittsnavigation (siehe pkv4u_kb_render_toc() in
   functions.php). Ab 1100px genug Platz fuer eine seitliche, sticky
   Sprungliste rechts neben der 700px-Lesespalte (reiner CSS-Layout-Trick
   ueber die ohnehin vorhandene position:relative der 700px-Box, keine
   Elementor-Strukturaenderung). Darunter ein normales, per Tastatur
   bedienbares <details>-Element direkt vor dem Text. */
.pkv4u-kb-toc {
	display: block;
	margin: 0 0 28px 0;
	font-family: Montserrat, sans-serif;
}
.pkv4u-kb-toc__summary {
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5C6C78;
	padding: 12px 16px;
	background: #FAF8F4;
	border: 1px solid rgba(12, 28, 43, 0.1);
}
.pkv4u-kb-toc__list {
	list-style: none;
	margin: 0;
	padding: 10px 16px 14px 16px;
	background: #FAF8F4;
	border: 1px solid rgba(12, 28, 43, 0.1);
	border-top: none;
}
/*
 * Portalstruktur-Abschluss (2026-09-04), Punkt 2 — TOC-Zeilen deutlicher
 * getrennt. Finding: "lange Titel stehen dicht untereinander, Zeilenumbrueche
 * und schwache Trennung erschweren das schnelle Erfassen." Jede Zeile
 * bekommt eine eigene Trennlinie (statt reinem margin) und mehr vertikalen
 * Abstand; der Link selbst wird zum block-level Element mit eigenem
 * Innenabstand, damit Hover/Fokus die ganze Zeile erfassen, nicht nur den
 * Text.
 */
.pkv4u-kb-toc__list li {
	margin: 0;
	border-top: 1px solid rgba(12, 28, 43, 0.08);
}
.pkv4u-kb-toc__list li:first-child {
	border-top: none;
}
.pkv4u-kb-toc__list a {
	display: block;
	padding: 10px 2px;
	font-size: 14px;
	line-height: 1.4;
	color: #0C1C2B;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.pkv4u-kb-toc__list a:hover,
.pkv4u-kb-toc__list a:focus-visible {
	color: #88663A;
	border-bottom-color: #E0C097;
}
.pkv4u-kb-toc__list a:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: -2px;
}
/* Portalstruktur-Abschluss, Live-Kalibrierung nach Server-Neustart
   (2026-09-04): 1560px war rechnerisch geschaetzt und live zu knapp
   (13px Marge zum Viewport-Rand, gleiche Fehlerklasse wie das in Batch 4
   verworfene 1360px). Empirisch getestet: 1600px -> 33px Marge, vergleichbar
   mit dem in Batch 4 akzeptierten 1400px/29.5px. */
@media ( min-width: 1600px ) {
	.pkv4u-kb-toc {
		position: absolute;
		top: 0;
		left: 100%;
		margin-left: 50px;
		width: 300px;
	}
	.pkv4u-kb-toc__details {
		position: sticky;
		top: 32px;
	}
	.pkv4u-kb-toc__summary::-webkit-details-marker {
		display: none;
	}
}

/* Batch 3 (Dirks Bildschirmreview, 2026-09-04): der umgebende Elementor-
   Boxed-Container des Single-Post-Templates 2536 (Element-ID "sp01cont")
   setzt eigenes padding-top von 120px, gemessen live per Computed Style --
   das war der tatsaechliche Grund fuer die als zu gross empfundene Distanz
   zwischen Ruecknavigation und Artikeltitel, nicht die hier gepflegte
   Kind-Theme-Typografie. Bewusst per CSS ueberschrieben statt die fragilen
   Elementor-_elementor_data-Rohdaten von Template 2536 zu editieren (kein
   Strukturrisiko). Nur padding-top reduziert, padding-bottom (Abstand vor
   dem Footer) unveraendert gelassen. */
.elementor-element-sp01cont > .e-con-inner {
	padding-top: 40px !important;
}

/* Batch 3 Nacharbeit — Kernaussage als ruhige, eigenstaendig erkennbare
   Flaeche (siehe pkv4u_kb_highlight_kernaussage() in functions.php). Kein
   neues Stockbild, keine neue Statistik-Kachel -- nur Flaeche/Abstand/
   Randlinie in den bestehenden Markenfarben. */
/* PKV4U 2026-09-23, Dirk: rechtes Padding entfernt -- der Kernaussage-Text
   war dadurch beidseitig eingerueckt und lief sichtbar schmaler als der
   uebrige Artikeltext darunter (kein Padding dort). Linkes Padding bleibt
   fuer den Abstand zum goldenen Rahmenstrich, rechte Textkante liegt jetzt
   auf derselben Linie wie der Rest des Artikels. */
.pkv4u-ko-kernaussage {
	background: #FAF8F4;
	border-left: 3px solid #E0C097;
	padding: 24px 0 24px 28px;
	margin: 8px 0 40px 0;
}
.pkv4u-ko-kernaussage__eyebrow.pkv4u-ko-kernaussage__eyebrow {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #88663A;
	margin: 0 0 10px 0;
}
.pkv4u-ko-kernaussage p:last-child {
	margin-bottom: 0 !important;
	font-size: 20px;
	line-height: 1.6;
}
@media ( max-width: 767px ) {
	.pkv4u-ko-kernaussage {
		padding: 18px 0 18px 20px;
	}
	.pkv4u-ko-kernaussage p:last-child {
		font-size: 19px;
	}
}

/* PKV4U 2026-09-23, Dirk: "Bewertung / Einordnung" bekommt dieselbe
   Off-White-Flaeche wie die Kernaussage-Box, um sie erkennbar vom
   umgebenden Fliesstext (Fakten, Annahmen & Prognosen) abzusetzen.
   Rechtes Padding bewusst weggelassen (gleicher Grund wie bei
   .pkv4u-ko-kernaussage oben, 2026-09-23-Fix): sonst laeuft der Text
   schmaler als der Rest des Artikels. */
.pkv4u-ko-bewertung {
	background: #FAF8F4;
	border-left: 3px solid #E0C097;
	padding: 24px 0 4px 28px;
	margin: 8px 0 40px 0;
}
@media ( max-width: 767px ) {
	.pkv4u-ko-bewertung {
		padding: 18px 0 2px 20px;
	}
}

/* --- Artikelkopf --- */
.elementor-widget-theme-post-title h1.elementor-heading-title {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 46px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #0C1C2B;
	margin: 0 0 14px 0;
	position: relative;
	padding-bottom: 16px;
}
.elementor-widget-theme-post-title h1.elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: #E0C097;
}

/* --- Lesetypografie: Basis ---
   Batch 3 (Dirks Bildschirmreview, 2026-09-04): Fliesstext von 16.5px auf
   19px angehoben (Ziel 18-20px Desktop / mind. 17px Mobile -- ein
   gemeinsamer Wert erfuellt beide, da es bisher keine eigene Mobile-
   Basisschriftgroesse gab). Zeilenhoehe 1.75 lag bereits im Zielkorridor
   1.6-1.75 und bleibt unveraendert. */
.elementor-widget-theme-post-content {
	font-family: Montserrat, sans-serif;
	font-size: 19px;
	line-height: 1.75;
	color: #0C1C2B;
}
.elementor-widget-theme-post-content p {
	margin: 0 0 22px 0;
}
.elementor-widget-theme-post-content h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.25;
	color: #0C1C2B;
	margin: 56px 0 20px 0;
}
.elementor-widget-theme-post-content > h2:first-child {
	margin-top: 0;
}
.elementor-widget-theme-post-content h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	color: #0C1C2B;
	margin: 34px 0 14px 0;
}
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
	margin: 0 0 22px 0;
	padding-left: 22px;
}
.elementor-widget-theme-post-content li {
	margin-bottom: 10px;
}
.elementor-widget-theme-post-content strong {
	font-weight: 600;
	color: #0C1C2B;
}
.elementor-widget-theme-post-content em {
	color: #5C6C78;
}
.elementor-widget-theme-post-content a {
	color: #0C1C2B;
	text-decoration: none;
	border-bottom: 1px solid #E0C097;
	padding-bottom: 1px;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus-visible {
	color: #88663A;
	border-bottom-color: #88663A;
}
.elementor-widget-theme-post-content code {
	font-family: Montserrat, sans-serif;
	font-size: 0.92em;
	background: #FAF8F4;
	padding: 1px 6px;
	color: #5C6C78;
}

/* --- Tabellen: hochwertig, ruhig, responsive ---
   AP-P0.2-P1-R2 Owner-Fix 1: Innenabstand erhoeht (vorher 0/12px vertikal,
   16/0px horizontal — Text stand zu dicht an Zellrand/Trennlinie). Erste
   Spalte behaelt 0 links (Fluchtlinie zur Lesespalte), letzte Spalte 0
   rechts (Fluchtlinie zum Wrapper-Rand); dazwischen symmetrischer Abstand.
   Batch 4 (R25/R26, 2026-09-04): der Kommentar dieses Blocks behauptete seit
   AP-P0.2 einen bestehenden Scroll-Wrapper -- tatsaechlich existierte fuer
   `.pkv4u-ko-table-wrap` selbst nie eine overflow-Regel (nur fuer table/th/td
   darunter), computed overflow-x war `visible`. Bei Tabellen mit mehr
   Spalten als in die 390px/1440px+-Lesespalte passen (th hat bewusst
   `white-space:nowrap`) lief der Tabelleninhalt dadurch sichtbar ueber den
   Wrapper hinaus, statt lokal scrollbar zu sein (live an `was-zaehlt-zur-
   jaeg` gefunden: `overflowX:"visible"`, `scrollWidth 373 > clientWidth
   299`). Jetzt echter, lokal bedienbarer Scroll-Container -- Seite selbst
   bleibt unveraendert, nur der Tabellenbereich scrollt bei Bedarf. */
.pkv4u-ko-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.pkv4u-ko-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-family: Montserrat, sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
}
.pkv4u-ko-table-wrap th {
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5C6C78;
	padding: 15px 17px;
	border-bottom: 1px solid rgba(12, 28, 43, 0.24);
	white-space: nowrap;
}
.pkv4u-ko-table-wrap td {
	padding: 15px 17px;
	border-bottom: 1px solid rgba(12, 28, 43, 0.1);
	vertical-align: top;
	color: #0C1C2B;
}
/* AP-P0.2-P1-R2 Owner-Fix (2. Nachtrag): erste/letzte Spalte behielten
   vorher 0 Innenabstand (Fluchtlinie zur Lesespalte gedacht) — Owner-Finding:
   Text stand dadurch optisch bündig an der linken Zellkante. Jetzt
   durchgehend gleiches Padding auf allen Spalten, keine Ausnahme mehr. */
.pkv4u-ko-table-wrap tr:last-child td {
	border-bottom: none;
}

/* --- Kurzorientierung: sichtbar vom Fließtext unterschieden, kein neuer
   Fachinhalt, ausschließlich Rahmung der bestehenden Tabelle --- */
.pkv4u-ko-quickref {
	background: #FAF8F4;
	border-left: 3px solid #E0C097;
	padding: 28px 32px;
	margin: 8px 0 48px 0;
}
.pkv4u-ko-quickref h2 {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #88663A;
	margin: 0 0 18px 0;
}
.pkv4u-ko-quickref .pkv4u-ko-table-wrap {
	margin: 0;
}
.pkv4u-ko-quickref th {
	color: #88663A;
}

/* --- Grenzen und Unsicherheiten: zurückhaltend, nicht alarmierend --- */
.pkv4u-ko-limits {
	border-top: 1px solid rgba(12, 28, 43, 0.14);
	border-bottom: 1px solid rgba(12, 28, 43, 0.14);
	padding: 28px 0;
	margin: 48px 0;
}
.pkv4u-ko-limits h2 {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5C6C78;
	margin: 0 0 16px 0;
}
.pkv4u-ko-limits,
.pkv4u-ko-limits li,
.pkv4u-ko-limits p {
	font-size: 14.5px;
	color: #5C6C78;
	line-height: 1.65;
}

/* --- Next Best Action: klar vom Artikel abgesetzt, ohne Verkaufsdruck.
   Bewusst kein dunkler/knalliger CTA-Block (keine aggressive Conversion). --- */
.pkv4u-ko-nba {
	background: #FAF8F4;
	border-top: 2px solid #E0C097;
	padding: 30px 32px;
	margin: 48px 0;
}
.pkv4u-ko-nba h2 {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #88663A;
	margin: 0 0 14px 0;
}
.pkv4u-ko-nba p {
	margin: 0;
	font-size: 16px;
}

/* --- Quellen und Prüfstand: "nachvollziehbar geprüft", nicht "juristische
   Dokumentenablage" --- */
.pkv4u-ko-sources {
	border-top: 1px solid rgba(12, 28, 43, 0.14);
	margin: 56px 0 8px 0;
	padding-top: 28px;
}
.pkv4u-ko-sources h2 {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5C6C78;
	margin: 0 0 14px 0;
}
.pkv4u-ko-sources ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pkv4u-ko-sources li {
	font-size: 13px;
	line-height: 1.6;
	color: #5C6C78;
	margin: 0 0 8px 0;
	padding-left: 14px;
	position: relative;
}
.pkv4u-ko-sources li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 1px;
	background: #E0C097;
}
.pkv4u-ko-sources a {
	border-bottom-color: rgba(224, 192, 151, 0.5);
}
.pkv4u-ko-pruefstand {
	font-size: 12px;
	color: #5C6C78;
	margin-top: 18px !important;
}
.pkv4u-ko-pruefstand em {
	color: #5C6C78;
	font-style: normal;
	letter-spacing: 0.02em;
}

/* --- Related Content: bereits redaktionell (Playfair-Display-Links,
   Montserrat-Eyebrow) aus AP-P0.2 — hier nur zusätzlich an dieselbe
   Lesespalte angeglichen und mit ruhigem Hover-Zustand versehen, damit sie
   klar erkennbar, aber nicht wie generische Blogkarten wirkt. Bestehende
   Links/Ziele unveraendert (pkv4u-knowledge-binding.php nicht geaendert). --- */
.pkv4u-kb-related {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
.pkv4u-kb-related a {
	display: inline-block;
	transition: opacity 0.15s ease;
}
.pkv4u-kb-related a:hover,
.pkv4u-kb-related a:focus-visible {
	opacity: 0.72;
}

/* --- Mobile: Lesespalte auf schmalen Viewports mit Innenabstand statt
   fixer max-width, Headline-/Block-Groessen moderat verkleinert. Ergaenzt
   die Mobile-Fixes aus AP-P0.2-R1, ersetzt sie nicht. --- */
@media ( max-width: 767px ) {
	.elementor-widget-theme-post-title h1.elementor-heading-title {
		font-size: 32px;
	}
	.elementor-widget-theme-post-content h2 {
		font-size: 23px;
		margin-top: 44px;
	}
	.elementor-widget-theme-post-content h3 {
		font-size: 19px;
	}
	.pkv4u-ko-quickref,
	.pkv4u-ko-nba {
		padding: 22px 20px;
	}
	/* AP-P0.2-P1-R2 Owner-Fix 1 (2. Nachtrag): Tabellen-Innenabstand mobil
	   verkleinert (passend zum verfuegbaren Raum), durchgehend gleiches
	   Padding auf allen Spalten (keine Fluchtlinien-Ausnahme mehr). */
	.pkv4u-ko-table-wrap th,
	.pkv4u-ko-table-wrap td {
		padding: 12px 12px;
	}
}

/*
 * ===========================================================================
 * AP-P0.2-P1-R2 — Knowledge Experience Remediation (Root-Cause-Fixes)
 * ===========================================================================
 * BEFUND (Owner Review nach AP-P0.2-P1): Wissensartikel zeigten eine riesige,
 * fast leere dunkelblaue Flaeche statt des Artikeltexts; Kategorie-/Anlass-
 * Archive zeigten pinke Links auf dunkelblauem Grund mit kaum lesbarem Text;
 * verlinkte KO renderten teils praktisch leer. Root-Cause-Analyse (DOM/
 * Computed-Style, siehe Delivery-Dokumentation) ergab ZWEI technische
 * Ursachen, keine neue davon ist eine Design-Entscheidung dieser Aenderung:
 *
 * URSACHE 1 — globaler Elementor-Kit-Body-Hintergrund (Kit 2534, Site
 * Settings) setzt sitewide body.elementor-kit-2534{background-color:var(
 * --e-global-color-primary)} = #0C1C2B. Die Golden-Master-Seite selbst laedt
 * dieses Stylesheet nie (kein wp_head()); die echte Startseite (Elementor
 * Canvas) bleibt unberuehrt, weil dort jede Sektion bereits eine eigene
 * deckende Hintergrundfarbe setzt. Auf Wissensartikeln/Archiven/Suche blieb
 * der Body dagegen ungedeckt navy — und der navyfarbene Artikeltext aus
 * AP-P0.2-P1 (fuer eine helle Lesespalte gedacht) wurde dadurch unsichtbar.
 *
 * URSACHE 2 — Basis-Linkfarbe des Eltern-Themes (hello-elementor/assets/
 * css/reset.css: a{color:#CC3366}) faerbt jeden Link ausserhalb der bereits
 * gestalteten Bereiche (Artikeltext, Related Content) pink ein — u. a.
 * Artikeltitel in Kategorie-/Anlass-Archiven und Suchergebnissen.
 *
 * FIX-PRINZIP: ausschliesslich bestehende PKV4U-Markenfarben (Navy/Gold/
 * Off-White aus dem Golden Master), keine neue Farbe. Der Body-Hintergrund-
 * Fix wirkt bewusst sitewide (er beseitigt nur einen technischen Leck-
 * Zustand); alle uebrigen Regeln sind auf `.pkv4u-kb-context` beschraenkt —
 * eine per body_class() gesetzte Kennzeichnung (functions.php,
 * pkv4u_kb_body_class()) fuer genau die Seiten dieses Auftrags (Wissens-
 * Einzelartikel, Kategorie-/Schlagwort-/Anlass-Archiv, Suche). Andere
 * bestehende Seiten (Vorcheck, Wissenswelten-Uebersicht, alte Landingpages)
 * werden dadurch nicht angefasst.
 */
body.elementor-kit-2534 {
	background-color: #FFFFFF;
}

/* --- Sitenavigation + Footer (siehe inc/pkv4u-knowledge-binding.php,
   pkv4u_kb_render_site_header()/_site_footer()). Die sitewide Elementor-
   Theme-Builder-Vorlagen "Header"/"Footer" (Post 2538/2542) sind trotz
   Bedingung "gesamte Website" leer (0 Widgets) und unterdruecken dadurch
   lautlos die Theme-eigene Fallback-Navigation (hello-elementor/header.php:
   elementor_theme_do_location('header') liefert "true", rendert aber
   nichts). Ergebnis vor diesem Fix: Wissensartikel und Archive hatten
   ueberhaupt keine Navigation/keinen Footer. Statt die fragilen, leeren
   Elementor-Theme-Builder-Datensaetze zu befuellen, wird hier bewusst
   dieselbe Technik wie bei allen bisherigen AP-P0.2-Aenderungen verwendet:
   Kind-Theme-PHP/CSS, keine Elementor-Rohdaten angefasst. Markup/Linktexte
   1:1 aus dem Golden Master (parts/golden-master-desktop.html) uebernommen,
   Ziel-URLs identisch zu den bereits im Golden-Master-Template real
   verwendeten (template-golden-master.php). "Tools" bleibt wie im Golden
   Master selbst unverlinkt (keine Tools-/Rechner-Sammelseite vorhanden). */
.pkv4u-kb-header {
	background: #0C1C2B;
	padding: 22px 40px;
}
.pkv4u-kb-header__inner {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	row-gap: 14px;
}
.pkv4u-kb-header__logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Playfair Display', serif;
	font-size: 18px;
	/* AP-P0.2-P1-R2 Owner-Fix 4: Markenschriftzug auf Navy in Gold statt
	   Weiss — vorheriger Kontrast wirkte zu dunkel/unauffaellig. */
	color: #E0C097;
	text-decoration: none;
	border-bottom: none;
	padding-bottom: 0;
	white-space: nowrap;
}
.pkv4u-kb-header__logo img {
	display: block;
	width: 32px;
	height: 32px;
}
.pkv4u-kb-header__nav {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	row-gap: 10px;
	font-family: Montserrat, sans-serif;
	/* AP1 2026-09-22 (Codex D11): 10.5px war auf hellen/dunklen Flaechen
	   schwer erfassbar; 13px behaelt dieselbe zurueckhaltende Optik
	   (Letter-Spacing/Uppercase) bei deutlich besserer Lesbarkeit. */
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pkv4u-kb-header__nav a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.pkv4u-kb-header__nav a:hover,
.pkv4u-kb-header__nav a:focus-visible {
	color: #FFFFFF;
	border-bottom-color: #E0C097;
}
.pkv4u-kb-header__nav span.pkv4u-kb-navplaceholder {
	color: rgba(255, 255, 255, 0.34);
	cursor: default;
}
/* AP1 2026-09-22: "Beratung" ist jetzt ein eigenstaendiger, immer sichtbarer
   CTA ausserhalb von <nav> (siehe pkv4u_kb_render_site_header()) -- Selektor
   entsprechend von ".pkv4u-kb-header__nav a.pkv4u-kb-header__cta" auf die
   direkte Klasse umgestellt, Optik unveraendert. */
.pkv4u-kb-header__cta {
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid #E0C097;
	color: #E0C097;
	padding: 9px 16px;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease;
}
.pkv4u-kb-header__cta:hover,
.pkv4u-kb-header__cta:focus-visible {
	color: #0C1C2B;
	background: #E0C097;
}
/* 2026-10-17: Beschriftung "Persönlich klären" (vorher "Beratung") ist länger; auf schmalen Bildschirmen kompakter setzen, damit Kopfzeile
   und Menü-Button nicht kollidieren und nichts überläuft (375 bis 480 px). */
@media (max-width: 900px) {
	.pkv4u-kb-header__cta { font-size: 11px; letter-spacing: 0.04em; padding: 8px; }
}
@media (max-width: 480px) {
	/* zweizeilig ("Persönlich / klären"), dadurch nur etwa so breit wie früher "Beratung" */
	.pkv4u-kb-header__cta { font-size: 11px; letter-spacing: 0.06em; padding: 6px 9px; white-space: normal; text-align: center; line-height: 1.25; }
}

/* AP1 2026-09-22 (Codex D02 / eigener Befund A-1): Menue-Button. Ab 768px
   unsichtbar -- Desktop-Optik/-Struktur bleibt dadurch unveraendert, <nav>
   ist wie zuvor immer ein normaler, sichtbarer Flex-Container. Erst im
   vorhandenen 767px-Breakpoint unten wird der Button sichtbar und blendet
   <nav> standardmaessig aus (siehe pkv4u-kb-nav-toggle.js fuer die
   Klick-Zuweisung).
   Selektor bewusst als "button.pkv4u-kb-header__nav-toggle" (nicht nur die
   Klasse): hello-elementor/assets/css/reset.css laedt NACH diesem
   Stylesheet und setzt "[type=\"button\"], [type=\"submit\"], button" auf
   display:inline-block -- bei gleicher Spezifitaet (0,1,0) gewinnt sonst die
   spaeter geladene Regel unabhaengig von der Zeilenposition hier (per
   Live-Test bestaetigt; derselbe Grund, warum der bestehende
   ".pkv4u-kb-header__search button" ebenfalls den Elementtyp im Selektor
   mitfuehrt). */
button.pkv4u-kb-header__nav-toggle {
	display: none;
}
.pkv4u-kb-header__search {
	display: inline-flex;
	align-items: center;
	gap: 22px;
}
.pkv4u-kb-header__search input[type="search"] {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	padding: 6px 14px;
	width: 150px;
}
.pkv4u-kb-header__search input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.pkv4u-kb-header__search button {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.82);
	cursor: pointer;
	font-size: 13px;
}

/* AP-P0.2-P1-R2 Owner-Fix 3: Kontextuelle Rueck-/Orientierungsnavigation
   auf Wissensartikeln (echte Links, keine history.back()-Loesung — siehe
   pkv4u_kb_render_breadcrumb() in inc/pkv4u-knowledge-binding.php). Gleiche
   Lesespalten-Breite wie Artikelkopf/-inhalt, damit sie optisch wie ein
   Eyebrow direkt oberhalb des Titels wirkt. */
.pkv4u-kb-breadcrumb {
	max-width: 850px;
	margin: 0 auto;
	padding: 40px 24px 0 24px;
	box-sizing: border-box;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #5C6C78;
}
.pkv4u-kb-breadcrumb a {
	color: #5C6C78;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.pkv4u-kb-breadcrumb a:hover,
.pkv4u-kb-breadcrumb a:focus-visible {
	color: #88663A;
	border-bottom-color: #E0C097;
}
.pkv4u-kb-breadcrumb .pkv4u-kb-breadcrumb__sep {
	margin: 0 10px;
	color: rgba(137, 151, 160, 0.5);
}
@media ( max-width: 767px ) {
	.pkv4u-kb-breadcrumb {
		padding: 28px 20px 0 20px;
		font-size: 11px;
	}
}

/* AP-P0.2-P1-R2 Owner-Fix (2. Nachtrag): zusaetzlicher, deutlicherer
   redaktioneller Ruecklink zur Wissenswelt — kein Button, bestehende
   Typografie/Farbwelt, sichtbarer Hover/Fokus. Gleiche Kategorie-URL wie
   der Breadcrumb (`get_category_link()` in pkv4u_kb_render_breadcrumb()). */
.pkv4u-kb-backlink {
	max-width: 850px;
	margin: 12px auto 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
.pkv4u-kb-backlink a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: Montserrat, sans-serif;
	/* Portalstruktur-Abschluss (2026-09-04), Punkt 3: von 13px auf normal
	   lesbare 15px angehoben -- Finding "Rücklinks... gehen in der feinen
	   Kleinschrift leicht unter". Gleiche Farbwelt/Hover-Logik unveraendert. */
	font-size: 15px;
	font-weight: 500;
	color: #5C6C78;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.pkv4u-kb-backlink a:hover,
.pkv4u-kb-backlink a:focus-visible {
	color: #88663A;
	border-bottom-color: #E0C097;
}
.pkv4u-kb-backlink a:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: 2px;
}
/*
 * Portalstruktur-Abschluss (2026-09-04), Punkt 3 — gemeinsamer, deutlicherer
 * Navigationsblock am ENDE eines Wissensartikels (nach NBA, vor Verwandte
 * Inhalte) bzw. am Ende eines Kategorie-/Anlass-Archivs. Eigene Variante mit
 * "ruhiger Flaeche" (Trennlinie + Innenabstand) statt der reinen Text-Links
 * oben, damit der Rueckweg nach langem Lesen nicht uebersehen wird.
 */
.pkv4u-kb-backlink--artikel-ende,
.pkv4u-kb-backlink--archiv-ende {
	max-width: 850px;
	margin: 40px auto 0 auto;
	padding: 20px 24px;
	box-sizing: border-box;
	border-top: 1px solid rgba(12, 28, 43, 0.14);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
}
.pkv4u-kb-backlink--archiv-ende {
	border-top: 1px solid rgba(12, 28, 43, 0.14);
}
/* AP-P0.2 R2/R6 — /fuer-wen/ (Post 3948): "Bereich öffnen" ist die primäre
   Handlung je Zielgruppe, "Erst informieren" nur Vertiefung. Beide waren
   bislang reine Textlinks mit ähnlichem Gewicht (transparenter Hintergrund).
   "Bereich öffnen" bekommt hier eine echte, gefüllte Buttonfläche (gleiche
   Goldfarbe/Textfarbe wie der Founder-CTA auf der Startseite), "Erst
   informieren" bleibt unverändert der zurückhaltendere reine Textlink. */
.page-id-3948 .elementor-button-link.elementor-button {
	background-color: #E0C097 !important;
	color: #0C1C2B !important;
	padding: 14px 26px !important;
	border-radius: 0 !important;
}
.page-id-3948 .elementor-button-link.elementor-button:hover,
.page-id-3948 .elementor-button-link.elementor-button:focus-visible {
	background-color: #B8974E !important;
}

/* AP-P0.2 "Für wen" — Nachbesserung (2026-09-18): echte Aufklappfunktion statt
   Sprung ans Seitenende, siehe pkv4u_fw_accordion_panel() in
   inc/pkv4u-knowledge-binding.php. Natives <details>/<summary>, kein
   JavaScript. Trigger optisch identisch zum bisherigen "Erst informieren"-
   Textlink (Farbe/Schrift unveraendert), nur der Standard-Dreieck-Indikator
   von <summary> wird durch ein eigenes, farblich passendes Dreieck ersetzt. */
.pkv4u-fw-accordion {
	margin-top: 2px;
}
.pkv4u-fw-accordion summary.pkv4u-fw-accordion__trigger {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #8997A0;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-decoration: underline;
	list-style: none;
}
.pkv4u-fw-accordion summary.pkv4u-fw-accordion__trigger::-webkit-details-marker {
	display: none;
}
.pkv4u-fw-accordion summary.pkv4u-fw-accordion__trigger::before {
	content: "▸";
	display: inline-block;
	color: #E0C097;
	text-decoration: none;
	transition: transform 0.15s ease;
}
.pkv4u-fw-accordion[open] summary.pkv4u-fw-accordion__trigger::before {
	transform: rotate(90deg);
}
.pkv4u-fw-accordion summary.pkv4u-fw-accordion__trigger:hover,
.pkv4u-fw-accordion summary.pkv4u-fw-accordion__trigger:focus-visible {
	color: #E0C097;
}
.pkv4u-fw-accordion summary.pkv4u-fw-accordion__trigger:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: 4px;
	border-radius: 2px;
}
.pkv4u-fw-accordion__panel {
	background: #FAF8F4;
	color: #0C1C2B;
	padding: 28px 24px;
	margin-top: 14px;
	border-radius: 4px;
}
.pkv4u-fw-accordion__panel a {
	overflow-wrap: break-word;
}
@media ( max-width: 767px ) {
	.pkv4u-fw-accordion__panel {
		padding: 22px 18px;
	}
	.pkv4u-fw-accordion__panel div[style*="flex-direction:row"] {
		flex-direction: column !important;
	}
}

/* AP-P0.2 "Für wen": Links und Rückweg (2026-09-18) — oberer Rückweg
   „← Zur Startseite" (pkv4u_kb_render_fuerwen_backlink_hook()) saß per
   Basisklasse .pkv4u-kb-backlink in einer eigenen 850px-Spalte, zentriert
   auf der Seite, unabhaengig von der tatsaechlichen Content-Spalte der
   Elementor-Ueberschrift "Dieselbe Frage, andere Ausgangslage." (1200px-
   Container, siehe /wissen/-Fix oben) -- dadurch deutlich zu weit rechts
   (Owner-Befund). Seiten-scoped Override statt Aenderung an der
   Basisklasse selbst (die bleibt fuer Artikelende/Archiv unveraendert),
   gleiches Muster wie der bestehende .page-id-3948-Button-Override
   darueber. Nur vorhandene Containerabstaende (max-width/margin/padding)
   angepasst, keine neue Positionierungsart. */
.page-id-3948 .pkv4u-kb-backlink {
	max-width: 1200px;
	margin: 44px auto 0 auto;
	padding: 0;
}

/* Owner-Fix (2026-09-18) — /wissen/ oberer Rueckweg (pkv4u_kb_render_wissen_backlink_hook()):
   .pkv4u-kb-backlink ist fuer die WEISSEN Seitenbereiche entworfen (Artikelende,
   Archiv, /fuer-wen/) und traegt bewusst KEINEN eigenen Hintergrund. Auf /wissen/
   sitzt der Link jedoch zwischen dem dunklen Portal-Header und der dunklen
   Hero-Sektion, direkt im Body-Hintergrund (weiss) -- ohne eigene Flaeche entsteht
   dort ein sichtbarer weisser Balken (Owner-Befund, Screenshot). Fix: eigene,
   auf diese eine Stelle begrenzte Modifier-Klasse mit demselben Dunkelblau wie
   Header/Hero (#0C1C2B) und heller/goldener Linktypografie wie im Header --
   keine Aenderung an .pkv4u-kb-backlink selbst, keine Auswirkung auf Artikelende/
   Archiv/fuer-wen. */
/* Owner-Fix (2026-09-18, 2. Nachtrag): Balken saß beim ersten Fix am reinen
   Viewport-Rand (padding:40px) statt in der Spalte von Logo/Nav/Ueberschrift
   (Header nutzt .pkv4u-kb-header__inner mit max-width:1160px + margin:0 auto,
   siehe oben) -- wirkte laut Owner-Screenshot "viel zu weit links, nicht
   intuitiv". Zweischicht-Muster wie der Header: aussen voller dunkler
   Balken, innen eine zentrierte Spalte.
   Owner-Nachtrag (2026-09-18, 2. Korrektur): horizontal statt an der
   Header-Spalte (1160px) an der Bereichsueberschrift ausgerichtet -- deren
   Elementor-Container nutzt max-width:min(100%,1200px), daher hier ebenfalls
   1200px statt 1160px. Vertikal per zusaetzlichem padding-top (statt margin,
   damit der durchgehende dunkle Balken keine Luecke bekommt) ca. 28px nach
   unten verschoben, optisch zwischen Navigation und Beginn der
   Wissenswelten -- kein position:absolute, normaler Fluss. */
.pkv4u-kb-backlink-bar {
	background: #0C1C2B;
	padding: 44px 40px 16px 40px;
	box-sizing: border-box;
}
.pkv4u-kb-backlink.pkv4u-kb-backlink--wissen-top {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}
.pkv4u-kb-backlink--wissen-top a {
	color: #E0C097;
}
.pkv4u-kb-backlink--wissen-top a:hover,
.pkv4u-kb-backlink--wissen-top a:focus-visible {
	color: #FFFFFF;
	border-bottom-color: #E0C097;
}

@media ( max-width: 767px ) {
	.pkv4u-kb-backlink {
		padding: 0 20px;
	}
	.pkv4u-kb-backlink a {
		font-size: 14px;
	}
	.pkv4u-kb-backlink--artikel-ende,
	.pkv4u-kb-backlink--archiv-ende {
		padding: 18px 20px;
	}
	.pkv4u-kb-backlink-bar {
		padding: 40px 20px 14px 20px;
	}
	.page-id-3948 .pkv4u-kb-backlink {
		margin-top: 28px;
		padding: 0 20px;
	}
}

.pkv4u-kb-footer {
	background: #0C1C2B;
	color: rgba(255, 255, 255, 0.82);
	padding: 64px 40px 28px 40px;
	margin-top: 64px;
}
.pkv4u-kb-footer__inner {
	max-width: 1160px;
	margin: 0 auto;
}
.pkv4u-kb-footer__top {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 44px;
}
.pkv4u-kb-footer__brand h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 26px;
	color: #FFFFFF;
	margin: 10px 0 0 0;
}
.pkv4u-kb-footer__col-title {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #E0C097;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	margin: 0 0 14px 0;
}
.pkv4u-kb-footer__col a,
.pkv4u-kb-footer__col span.pkv4u-kb-navplaceholder {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	margin-bottom: 11px;
}
.pkv4u-kb-footer__col span.pkv4u-kb-navplaceholder {
	color: rgba(255, 255, 255, 0.34);
}
.pkv4u-kb-footer__col a:hover,
.pkv4u-kb-footer__col a:focus-visible {
	color: #E0C097;
}
.pkv4u-kb-footer__bottom {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	row-gap: 14px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.pkv4u-kb-footer__legal {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	row-gap: 10px;
	font-size: 11.5px;
}
.pkv4u-kb-footer__legal a,
.pkv4u-kb-footer__legal button {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	background: none;
	border: none;
	font-size: 11.5px;
	font-family: Montserrat, sans-serif;
	cursor: pointer;
	padding: 0;
}
.pkv4u-kb-footer__legal a:hover,
.pkv4u-kb-footer__legal button:hover {
	color: #E0C097;
}
.pkv4u-kb-footer__copyright {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
}
@media ( max-width: 767px ) {
	.pkv4u-kb-footer__top {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

/* --- Kategorie-/Schlagwort-/Anlass-Archive + Suche: dieselbe redaktionelle
   Sprache wie der Golden Master statt Elementor-/WordPress-Rohdarstellung.
   Betrifft ausschliesslich `.pkv4u-kb-context` (siehe oben). --- */
body.pkv4u-kb-context {
	background-color: #FFFFFF;
	color: #0C1C2B;
	font-family: Montserrat, sans-serif;
}
body.pkv4u-kb-context .site-main a {
	color: #0C1C2B;
}
body.pkv4u-kb-context .site-main {
	max-width: 860px;
	margin: 0 auto;
	padding: 72px 24px 96px 24px;
	box-sizing: border-box;
}
body.pkv4u-kb-context .page-header {
	margin-bottom: 56px;
}
body.pkv4u-kb-context .pkv4u-kb-eyebrow {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #88663A;
	margin-bottom: 16px;
}
body.pkv4u-kb-context .page-header h1.entry-title {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 40px;
	line-height: 1.15;
	color: #0C1C2B;
	margin: 0;
}
body.pkv4u-kb-context .archive-description {
	font-size: 15.5px;
	line-height: 1.7;
	color: #5C6C78;
	max-width: 62ch;
	margin: 20px 0 0 0;
}
body.pkv4u-kb-context .page-content article.post {
	padding: 32px 0;
	border-top: 1px solid rgba(12, 28, 43, 0.12);
}
body.pkv4u-kb-context .page-content article.post:first-child {
	border-top: none;
	padding-top: 0;
}
body.pkv4u-kb-context .page-content h2.entry-title {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
	margin: 0 0 12px 0;
}
body.pkv4u-kb-context .page-content h2.entry-title a {
	color: #0C1C2B;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}
body.pkv4u-kb-context .page-content h2.entry-title a:hover,
body.pkv4u-kb-context .page-content h2.entry-title a:focus-visible {
	color: #88663A;
	border-bottom-color: #E0C097;
}
body.pkv4u-kb-context .page-content p {
	font-size: 15px;
	line-height: 1.7;
	color: #5C6C78;
	margin: 0;
}

/*
 * Portalstruktur-Abschluss (2026-09-04), Punkt 4 — Wissensweltkarten
 * (Kategorie-/Anlass-Archive, template-parts/archive.php im Kind-Theme).
 * Finding: "nur der Artikeltitel ist Link, Teaser wirkt wie normaler Text,
 * tieferer Inhalt ist nicht intuitiv als Aktion erkennbar." Loesung: ein
 * zusaetzlicher, sichtbarer "Artikel öffnen →"-Link als eigenstaendiges
 * Geschwisterelement (kein verschachtelter Link im Titel/Teaser). Hover/
 * Fokus auf der GESAMTEN Karte (per :hover/:focus-within), obwohl nur
 * Titel und Aktionslink tatsaechlich klickbar sind -- macht die Karte
 * optisch als zusammenhaengende Einheit erkennbar, ohne die Klickflaeche
 * technisch ueber verschachtelte Links zu erzwingen.
 */
body.pkv4u-kb-context .page-content article.post.pkv4u-kb-archiv-karte {
	padding: 28px 24px;
	margin: 0 -24px;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}
body.pkv4u-kb-context .page-content article.post.pkv4u-kb-archiv-karte:hover,
body.pkv4u-kb-context .page-content article.post.pkv4u-kb-archiv-karte:focus-within {
	background-color: #FAF8F4;
}
body.pkv4u-kb-context .pkv4u-kb-archiv-karte__aktion {
	display: inline-block;
	margin-top: 14px;
	font-family: Montserrat, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #88663A;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease;
}
body.pkv4u-kb-context .pkv4u-kb-archiv-karte__aktion:hover,
body.pkv4u-kb-context .pkv4u-kb-archiv-karte__aktion:focus-visible {
	border-bottom-color: #88663A;
}
body.pkv4u-kb-context .pkv4u-kb-archiv-karte__aktion:focus-visible {
	outline: 2px solid #88663A;
	outline-offset: 3px;
}
@media (max-width: 767px) {
	body.pkv4u-kb-context .page-content article.post.pkv4u-kb-archiv-karte {
		margin: 0 -20px;
		padding: 24px 20px;
	}
}
/* RELEASEAUFTRAG 2026-09-21, P1-04: bei <=575px ueberschreibt das Parent-Theme
   (hello-elementor/assets/css/theme.css, Selektor
   "body:not([class*=elementor-page-]) .site-main", @media max-width:575px,
   gleiche Spezifitaet + spaetere Ladereihenfolge) das effektive
   .site-main-Padding von 20px auf 10px. Die obige -20px/20px-Bleed-Rechnung
   der Karte passt dadurch nur noch fuer 576-767px; bei 375/390px ergibt sich
   ein 10px-Ueberhang links (bestaetigter Audit-Befund). Fix wirkt ausschliesslich
   im tatsaechlich betroffenen Bereich <=575px, 576-767px bleibt unveraendert. */
@media (max-width: 575px) {
	body.pkv4u-kb-context .page-content article.post.pkv4u-kb-archiv-karte {
		margin: 0 -10px;
		padding: 24px 10px;
	}
}
body.pkv4u-kb-context nav.pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(12, 28, 43, 0.12);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
body.pkv4u-kb-context nav.pagination a {
	color: #0C1C2B;
}
body.pkv4u-kb-context nav.pagination a:hover {
	color: #88663A;
}
@media ( max-width: 767px ) {
	body.pkv4u-kb-context .site-main {
		padding: 48px 20px 64px 20px;
	}
	body.pkv4u-kb-context .page-header h1.entry-title {
		font-size: 28px;
	}
	.pkv4u-kb-header {
		padding: 18px 20px;
	}
	.pkv4u-kb-header__search input[type="search"] {
		width: 110px;
	}
	.pkv4u-kb-footer {
		padding: 48px 20px 24px 20px;
	}

	/* AP1 2026-09-22 (Codex D02 / eigener Befund A-1): Logo + vollstaendig
	   ausgeschriebene Navigation verdraengten gemeinsam den ersten
	   Bildschirm. Ab hier: Navigation hinter einem Hamburger-Button,
	   "Beratung" bleibt als eigener CTA sichtbar. Sichtbarkeit ausschliesslich
	   ueber die Klasse ".is-open" (pkv4u-kb-nav-toggle.js), kein natives
	   <details> (siehe Begruendung beim Markup in pkv4u-knowledge-binding.php). */
	.pkv4u-kb-header {
		position: relative;
	}
	.pkv4u-kb-header__inner {
		flex-wrap: nowrap;
		gap: 16px;
	}
	/* hello-elementor/assets/css/reset.css laedt NACH diesem Stylesheet und
	   setzt fuer "button:hover"/"button:focus" eigens background-color:#c36
	   -- exakt dieselbe Spezifitaet wie ".pkv4u-kb-header__nav-toggle" im
	   Ruhezustand, reset.css gewinnt sonst bei :hover/:focus (per Live-Test
	   bestaetigt: sichtbarer pinker Kasten nach Klick). Deshalb hier
	   durchgaengig !important statt eines aussichtslosen Spezifitaetswettlaufs
	   gegen jeden moeglichen Status. */
	button.pkv4u-kb-header__nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: none !important;
		background: none !important;
		color: inherit !important;
		cursor: pointer;
	}
	button.pkv4u-kb-header__nav-toggle:focus-visible {
		outline: 2px solid #E0C097;
		outline-offset: 2px;
	}
	.pkv4u-kb-header__nav-burger,
	.pkv4u-kb-header__nav-burger::before,
	.pkv4u-kb-header__nav-burger::after {
		display: block;
		width: 22px;
		height: 2px;
		background: #FFFFFF;
	}
	.pkv4u-kb-header__nav-burger {
		position: relative;
	}
	.pkv4u-kb-header__nav-burger::before,
	.pkv4u-kb-header__nav-burger::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.pkv4u-kb-header__nav-burger::before {
		top: -7px;
	}
	.pkv4u-kb-header__nav-burger::after {
		top: 7px;
	}
	/* AP1 2026-09-22 (Phase 1, Hero-Nav): zusaetzlich zur Klasse ".pkv4u-kb-header"
	   auch das scope-neutrale Datenattribut ansprechen, siehe
	   pkv4u-kb-nav-toggle.js -- wird von der Golden-Master-Hero-Navigation
	   verwendet, die NICHT die Klasse ".pkv4u-kb-header" traegt (deren
	   background-/padding-Regeln wuerden die Hero-Flaeche stoeren). */
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav-burger,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav-burger {
		background: transparent;
	}
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav-burger::before,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav-burger::before {
		top: 0;
		transform: rotate(45deg);
	}
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav-burger::after,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav-burger::after {
		top: 0;
		transform: rotate(-45deg);
	}
	/* AP1 2026-09-22 (Phase 1, Hero-Nav): !important auf display/position noetig,
	   weil die Golden-Master-Hero-Navigation ihr eigenes inline
	   style="display:flex; ..." traegt (Original-Markup unveraendert erhalten,
	   siehe parts/golden-master-desktop.html) -- ein Inline-Style schlaegt eine
	   externe Klassenregel ohne !important immer, unabhaengig vom Breakpoint. */
	.pkv4u-kb-header__nav {
		display: none !important;
		position: absolute !important;
		top: 100%;
		right: 0;
		left: 0;
		margin: 0;
		padding: 20px;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px;
		background: #0C1C2B;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		z-index: 40;
	}
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav {
		display: flex !important;
	}
	.pkv4u-kb-header__nav .pkv4u-kb-header__search {
		width: 100%;
	}
	.pkv4u-kb-header__nav .pkv4u-kb-header__search input[type="search"] {
		width: 100%;
		flex: 1 1 auto;
	}
}

/*
 * Portalstruktur-Abschluss (2026-09-04), Punkt 5 — sichtbares Aktionssignal
 * "Wissenswelt öffnen →" plus Hover-/Fokuszustand fuer die Wissensbereiche-
 * Zeilen (Startseite UND /wissen/, gleiche Funktion). Vorher keinerlei
 * :hover/:focus-visible-Regel fuer .pkv4u-kb-wissensbereich-zeile vorhanden
 * -- die Liste wirkte dadurch wie ein reines Inhaltsverzeichnis statt wie
 * eine bedienbare Karte. Bereits vorhandene Marken-/Kontrastfarben
 * wiederverwendet (#88663A, #FAF8F4), keine neue Farbe.
 */
.pkv4u-kb-wissensbereich-zeile {
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.pkv4u-kb-wissensbereich-zeile:hover,
.pkv4u-kb-wissensbereich-zeile:focus-visible {
	background-color: #FAF8F4;
}
.pkv4u-kb-wissensbereich-zeile:focus-visible {
	outline: 2px solid #88663A;
	outline-offset: -2px;
}
.pkv4u-kb-wissensbereich-aktion {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #88663A;
	white-space: nowrap;
}

/* AP-P0.2 R1 — /wissen/ (Post 3945): dieselbe Zeilenliste wirkte dort "wie
   eine lose Linkliste" (Owner-Befund) statt wie kuratierte Einstiegspunkte.
   Eigene, staerkere Kartenoptik NUR fuer den Kontext /wissen/ (Scope-Klasse
   .pkv4u-wissen-uebersicht, siehe pkv4u_kb_body_class()) -- die Startseiten-
   Mosaik-Kacheln bleiben unberuehrt. Bestehende Marken-/Kontrastfarben
   wiederverwendet, kein neues Farbsystem. !important nur dort, wo die
   PHP-Ausgabe (pkv4u_kb_render_wissensbereiche_zeilen()) dieselbe Eigenschaft
   inline setzt. */
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereiche-grid {
	display: block !important;
	border-bottom: none !important;
}
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-zeile {
	display: flex !important;
	border: 1px solid rgba(12, 28, 43, 0.14) !important;
	border-radius: 3px;
	padding: 24px 26px !important;
	margin-bottom: 12px;
	background-color: #FEFDFB;
}
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-zeile:hover,
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-zeile:focus-visible {
	background-color: #FAF8F4;
	border-color: #E0C097;
	box-shadow: 0 2px 10px rgba(12, 28, 43, 0.08);
}
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-name {
	font-size: 22px !important;
}
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-status {
	font-size: 11px !important;
	color: #3D4A54 !important;
	font-weight: 600;
}
.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-aktion {
	font-size: 11px;
	font-weight: 600;
}
@media (max-width: 767px) {
	.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-zeile {
		padding: 20px 20px !important;
	}
	/* AP1 Release Foundation 2026-09-24: bei 320 px lief der Weltname
	   "JAEG (Jahresarbeitsentgeltgrenze) und Arbeitgeberzuschuss" horizontal
	   ueber (366 px, Reflow WCAG 1.4.10). Nur Umbruch langer Einzelwoerter,
	   keine Aenderung an Schrift, Groesse oder Layout. */
	.pkv4u-wissen-uebersicht .pkv4u-kb-wissensbereich-name {
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

/*
 * BATCH 1 (Releasefähig bereinigen, R04/R05) — responsive Kollaps fuer die
 * Wissensbereiche-Zeilenliste (pkv4u_kb_render_wissensbereiche_zeilen()).
 * Dieselbe Ausgabe laeuft seit diesem Batch nicht mehr nur im Golden-Master-
 * Template (dort bereits per eigenem inline <style> bei max-width:1024px
 * abgedeckt), sondern auch ueber den Shortcode [pkv4u_wissensbereiche] auf
 * der Elementor-Seite /wissen/ — dort greifen die inline <style>-Regeln des
 * Golden Master nicht, ohne dieses Sitewide-Pendant erzeugte das feste
 * 2-Spalten-Grid (gap 96px) auf schmalen Breiten seitlichen Overflow
 * (verifiziert 390px: scrollWidth 667px). Selektor ueber die eigene Klasse,
 * nicht ueber [style*="display:grid"] — beruehrt keine andere Elementor-
 * Grid-Ausgabe auf der Seite.
 */
@media (max-width: 1024px) {
	.pkv4u-kb-wissensbereiche-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
	}
	.pkv4u-kb-wissensbereich-zeile {
		flex-wrap: wrap !important;
		gap: 6px 16px !important;
	}
	.pkv4u-kb-wissensbereich-name {
		min-width: 0 !important;
	}
}

/* P0-Hotfix (2026-09-07) — Formular 10 (/vorcheck/), DSGVO-Einwilligungstext:
   der Link auf die Datenschutzerklärung ist im Feld bereits vorhanden
   (fluentform_forms.form_fields, Formular-ID 10) und funktional/tastatur-
   erreichbar, aber optisch nicht von umgebendem Text zu unterscheiden
   (geerbte Fließtextfarbe, keine Unterstreichung) -- fuer sehende Nutzer
   ohne Tab-Navigation nicht als Link erkennbar. Reine Sichtbarkeits-
   Korrektur, kein Eingriff in Formularfelder/-logik. */
.fluentform_wrapper_10 .ff_t_c a {
	color: #88663A;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fluentform_wrapper_10 .ff_t_c a:hover,
.fluentform_wrapper_10 .ff_t_c a:focus-visible {
	color: #E0C097;
}
.fluentform_wrapper_10 .ff_t_c a:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: 2px;
}


/*
 * ===========================================================================
 * KO-26 Design-Pilot — "Krankentagegeld fuer Selbststaendige" (2026-09-18)
 * ===========================================================================
 * Isolierter Pilot gemaess Auftrag ("Designauftrag auf das Wesentliche
 * begrenzen"). Ausschliesslich reine CSS-Ergaenzung, keine PHP-Aenderung,
 * keine Datenbankaenderung, keine neuen Shortcodes/Komponenten — nur
 * bestehende Klassen (.pkv4u-ko-level, .pkv4u-pruef, .pkv4u-prozess,
 * .pkv4u-vergleich, Elementor-Posttypografie) feiner abgestimmt.
 *
 * ISOLATION: jede Regel ist auf `body.postid-4057` beschraenkt (WordPress-
 * Standard-Body-Klasse dieses einen Beitrags, von WP automatisch gesetzt —
 * keine Theme-Aenderung noetig, um sie zu erzeugen). Kein anderer der 27
 * Wissensartikel besitzt diese Body-Klasse; ausserhalb dieses einen
 * Beitrags ist die Wirkung dieses Blocks nachweislich null. Die Datei
 * selbst ist sitewide eingebunden (siehe pkv4u_poc_enqueue_parent_style()),
 * das ist hiermit gemaess Auftrag Punkt 6 offengelegt — die Aenderung
 * selbst bleibt jedoch durch die Selektor-Bedingung post-spezifisch.
 *
 * Ziel: sichtbar mehr redaktionelle Ruhe/Gliederung zwischen den vielen
 * H2-Unterfragen je Ebene, mehr Abstand/Fassung um die bereits vorhandenen
 * Komponenten (Pruef-Checkliste, Prozess-Kacheln, Vergleichsbox), keine
 * neuen Farben/Schriften (ausschliesslich #0C1C2B / #E0C097 / #88663A /
 * #5C6C78 / #FAF8F4, Playfair Display / Montserrat wie im Rest der Seite).
 */

/* Mehr Luft zwischen den drei Ebenen-Abschnitten. */
body.postid-4057 .pkv4u-ko-level {
	margin: 0 0 24px 0;
}
body.postid-4057 .pkv4u-ko-level__heading {
	font-size: 12px;
	padding-top: 46px;
}
body.postid-4057 .pkv4u-ko-level[data-level="1"] .pkv4u-ko-level__body {
	padding: 32px 34px;
}

/* Ebene 2 buendelt sechs Unterfragen ohne visuelle Zaesur zwischen ihnen
   (nur die H2-Standardtypografie trennt sie). Duenne Trennlinie + mehr
   Abstand vor jeder weiteren Unterfrage einer Ebene schafft Orientierung,
   ohne die H2-Struktur oder den Text selbst anzufassen. */
body.postid-4057 .pkv4u-ko-level__body > h2:not(:first-child) {
	margin-top: 54px;
	padding-top: 32px;
	border-top: 1px solid rgba(12, 28, 43, .10);
}

/* Pruef-Checkliste am Artikelanfang: eigene, ruhige Flaeche statt direkt im
   Fliesstext zu stehen — gleiche Bildsprache wie .pkv4u-ko-kernaussage
   (Off-White, kein neuer Farbwert). */
body.postid-4057 .pkv4u-pruef {
	background: #FAF8F4;
	border: 1px solid rgba(12, 28, 43, .10);
	padding: 28px 30px 6px 30px;
	margin: 8px 0 40px 0;
}

/* Prozess-Kacheln und Vergleichsbox: mehr Abstand zum umgebenden Fliesstext,
   damit sie als eigenstaendige Bausteine erkennbar sind statt eingequetscht
   zwischen Absaetzen zu wirken. */
body.postid-4057 .pkv4u-prozess,
body.postid-4057 .pkv4u-vergleich {
	margin: 36px 0 40px 0;
}

@media (max-width: 767px) {
	body.postid-4057 .pkv4u-ko-level__body > h2:not(:first-child) {
		margin-top: 42px;
		padding-top: 26px;
	}
	body.postid-4057 .pkv4u-pruef {
		padding: 22px 22px 4px 22px;
	}
}


/*
 * ===========================================================================
 * KO-26 Design-Pilot — Erweiterung Runde 2 (2026-09-18)
 * ===========================================================================
 * Auftrag: KO-26 soll bis "es uns gefaellt" visuell so weit optimiert werden,
 * dass sowohl Eilige (schnell verstehen) als auch Vielleser (Quellen/Details)
 * bedient werden — Homepage-Bildsprache konsequent uebernehmen, aber ohne
 * neue Stockfotos: alle "Bilder" sind eigene, aus der bestehenden PKV4U-
 * Icon-Bibliothek (inc/pkv4u-visual-components.php::pkv4u_icon_library())
 * wiederverwendete Liniensymbole, rein als CSS-Data-URI eingebunden — keine
 * neue Bilddatei, kein neues Symbol erfunden, kein PHP, keine DB-Aenderung,
 * kein Content-Edit. Weiterhin ausschliesslich body.postid-4057 (KO-26).
 *
 * Bekannte Grenze: die Zuordnung Icon-zu-Abschnitt erfolgt hier über die
 * IDs der bestehenden H2-Ueberschriften dieses einen Artikels. Für eine
 * Uebertragung auf andere Wissensobjekte muesste entweder pro Artikel eine
 * eigene, ebenso deklarative ID-Zuordnung gepflegt werden, oder ein
 * einheitliches Icon je Ebene verwendet werden (wie bereits fuer die drei
 * Ebenen-Ueberschriften selbst umgesetzt, das generalisiert direkt).
 */

body.postid-4057 {
	--pkv4u-icn-waage: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5v17'/%3E%3Cpath%20d='M6%2020.5h12'/%3E%3Cpath%20d='M4%208l4-2.2L12%208'/%3E%3Cpath%20d='M12%208l4-2.2L20%208'/%3E%3Cpath%20d='M4%208l-2%204.4a3%203%200%200%200%206%200z'/%3E%3Cpath%20d='M20%208l-2%204.4a3%203%200%200%200%206%200z'/%3E%3C/svg%3E");
	--pkv4u-icn-system: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='5.5'%20r='1.6'/%3E%3Cpath%20d='M12%207v3'/%3E%3Cpath%20d='M12%2010l-5.5%204v3'/%3E%3Cpath%20d='M12%2010l5.5%204v3'/%3E%3Ccircle%20cx='6.5'%20cy='18.5'%20r='1.6'/%3E%3Ccircle%20cx='17.5'%20cy='18.5'%20r='1.6'/%3E%3C/svg%3E");
	--pkv4u-icn-beitrag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h9l4%204v14H6z'/%3E%3Cpath%20d='M15%203v4h4'/%3E%3Cpath%20d='M8.5%2013.5l2.5-3%202%202%203.5-4.5'/%3E%3C/svg%3E");
	--pkv4u-icn-einkommen: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2016l4-7%203.5%205L14%208l3%204.5%204-6'/%3E%3C/svg%3E");
	--pkv4u-icn-liquiditaet: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5C9%207.5%207%2010.4%207%2013a5%205%200%200%200%2010%200c0-2.6-2-5.5-5-9.5z'/%3E%3C/svg%3E");
	--pkv4u-icn-tragfaehigkeit: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2018l5-6%204%203%205-7%204%205'/%3E%3Cpath%20d='M3%2020.5h18'/%3E%3C/svg%3E");
	--pkv4u-icn-individual: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='7.5'%20r='3'/%3E%3Cpath%20d='M6%2019.5c0-3.6%202.7-6%206-6s6%202.4%206%206'/%3E%3C/svg%3E");
	--pkv4u-icn-bestand: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4.5'%20y='3.5'%20width='11'%20height='15'%20rx='1'/%3E%3Cpath%20d='M7.5%208h5M7.5%2011h5M7.5%2014h3'/%3E%3Ccircle%20cx='16.5'%20cy='16.5'%20r='3'/%3E%3Cpath%20d='M18.8%2018.8L21%2021'/%3E%3C/svg%3E");
	--pkv4u-icn-wissen: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2388663A'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205.5c2.2-1%205-1%208%200v13c-3-1-5.8-1-8%200z'/%3E%3Cpath%20d='M20%205.5c-2.2-1-5-1-8%200v13c3-1%205.8-1%208%200z'/%3E%3C/svg%3E");
}

/* --- 1) Lead-Absatz: die ersten zwei Absaetze des Artikels wie ein
   redaktionelles "Dek" der Homepage-Bildsprache angleichen (grosse Serife
   statt Fliesstext) — hilft Eiligen, sofort den Kern zu erfassen. */
body.postid-4057 .elementor-widget-theme-post-content .elementor-widget-container > p:nth-of-type(-n+2) {
	font-family: 'Playfair Display', serif;
	font-size: 23px;
	line-height: 1.55;
	color: #0C1C2B;
}

/* --- 2) Ebenen-Ueberschriften bekommen ein kleines Kontext-Icon: schnell
   erkennbar, welche der drei Ebenen man gerade liest. */
body.postid-4057 .pkv4u-ko-level__heading {
	display: flex; align-items: center; gap: 10px;
}
body.postid-4057 .pkv4u-ko-level__heading::before {
	content: ''; width: 26px; height: 26px; flex: none; border-radius: 50%;
	background-color: #FAF8F4; border: 1px solid rgba(12, 28, 43, .16);
	background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
body.postid-4057 .pkv4u-ko-level[data-level="1"] .pkv4u-ko-level__heading::before { background-image: var(--pkv4u-icn-wissen); }
body.postid-4057 .pkv4u-ko-level[data-level="2"] .pkv4u-ko-level__heading::before { background-image: var(--pkv4u-icn-system); }
body.postid-4057 .pkv4u-ko-level[data-level="3"] .pkv4u-ko-level__heading::before { background-image: var(--pkv4u-icn-bestand); }

/* --- 3) Level-1-Kasten ("Kurz erklaert"): dezentes typografisches
   Ornament (grosses Anfuehrungszeichen, Playfair Display, 12% Deckkraft)
   statt Bild — verstaerkt den "auf einen Blick"-Charakter, keine neue
   Bilddatei noetig. */
body.postid-4057 .pkv4u-ko-level[data-level="1"] .pkv4u-ko-level__body {
	position: relative; overflow: hidden;
}
body.postid-4057 .pkv4u-ko-level[data-level="1"] .pkv4u-ko-level__body::after {
	content: '\201E'; position: absolute; top: -46px; right: 18px;
	font-family: 'Playfair Display', serif; font-size: 170px; line-height: 1;
	color: rgba(224, 192, 151, .12); pointer-events: none;
}

/* --- 4) Zwischenueberschriften-Icons: pro thematischem Abschnitt ein
   passendes, bereits vorhandenes Icon aus der PKV4U-Bibliothek — schafft
   visuelle Landmarken zum schnellen Ueberfliegen, ohne den Text zu aendern. */
body.postid-4057 .pkv4u-ko-level__body > h2 {
	display: flex; align-items: center; gap: 16px;
}
body.postid-4057 .pkv4u-ko-level__body > h2::before {
	content: ''; width: 40px; height: 40px; flex: none; border-radius: 50%;
	background-color: #FAF8F4; border: 1px solid rgba(12, 28, 43, .16);
	background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
body.postid-4057 #selbststaendige-brauchen-ein-besonders-bewusstes-risikomanagement::before { background-image: var(--pkv4u-icn-waage); }
body.postid-4057 #was-passiert-in-der-gkv-wenn-ich-als-selbststaendiger-laenger-krank-bin::before { background-image: var(--pkv4u-icn-system); }
body.postid-4057 #was-ist-bei-einer-privaten-krankenversicherung-anders::before { background-image: var(--pkv4u-icn-beitrag); }
body.postid-4057 #ab-wann-fliesst-eigentlich-geld::before { background-image: var(--pkv4u-icn-einkommen); }
body.postid-4057 #wie-viel-einkommensschutz-brauche-ich-als-selbststaendiger::before { background-image: var(--pkv4u-icn-liquiditaet); }
body.postid-4057 #was-passiert-wenn-aus-einigen-wochen-krankheit-mehrere-monate-werden::before { background-image: var(--pkv4u-icn-tragfaehigkeit); }
body.postid-4057 #welche-fragen-sollte-ich-mir-als-selbststaendiger-stellen::before { background-image: var(--pkv4u-icn-individual); }
body.postid-4057 #wie-kann-ich-meine-eigene-situation-einordnen::before { background-image: var(--pkv4u-icn-waage); }

/* --- 5) Alleinstehende Fettsatz-Saetze (bereits im Text vorhanden, siehe
   z. B. die sieben Pruef-Fragen) als Zitat-Merksatz hervorheben — generische
   Strukturregel (":has" auf Absatz, der ausschliesslich aus einem <strong>
   besteht), keine Textinterpretation/kein Raten von Inhalt, keine Aenderung
   des gespeicherten Textes. Direkt auf andere Artikel uebertragbar. */
body.postid-4057 .pkv4u-ko-level__body p:has(> strong:only-child) {
	font-family: 'Playfair Display', serif;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.45;
	color: #0C1C2B;
	border-left: 3px solid #E0C097;
	padding: 2px 0 2px 24px;
	margin: 34px 0;
}
body.postid-4057 .pkv4u-ko-level__body p:has(> strong:only-child) strong {
	font-weight: 400;
}

@media (max-width: 767px) {
	body.postid-4057 .elementor-widget-theme-post-content .elementor-widget-container > p:nth-of-type(-n+2) { font-size: 20px; }
	body.postid-4057 .pkv4u-ko-level__body > h2::before { width: 34px; height: 34px; background-size: 19px 19px; }
	body.postid-4057 .pkv4u-ko-level[data-level="1"] .pkv4u-ko-level__body::after { font-size: 120px; top: -30px; }
	body.postid-4057 .pkv4u-ko-level__body p:has(> strong:only-child) { font-size: 18px; }
}

/*
 * ===========================================================================
 * KO-26 Design-Pilot — Korrektur Runde 3 (2026-09-18): Nummerierungs-Kreise
 * ===========================================================================
 * Rueckmeldung Dirk: die Nummern-Kreise der Prozess-Kacheln (.pkv4u-prozess,
 * Basisdefinition in assets/pkv4u-components.css) wirken "zu dunkel, zu
 * schwer" (dunkle Navy-Flaeche #0C1C2B mit Gold-Text). Das ist die
 * SITEWEITE Grundfarbe dieser Komponente — sie wird auch von anderen
 * Wissensobjekten und ggf. der Homepage genutzt (Offenlegung gemaess
 * Auftrag Punkt 6). Ich aendere die Grundfarbe selbst NICHT, sondern
 * ueberschreibe sie nur fuer body.postid-4057 mit einer helleren Variante
 * im Stil der bereits vorhandenen Kernaussage-Flaeche (#FAF8F4-Hintergrund,
 * Gold-Rahmen, dunkelgoldener Text #88663A) — gleiche Bildsprache, weniger
 * Gewicht, keine neue Farbe (alle Werte bereits im Markenfarbsystem).
 */
body.postid-4057 .pkv4u-prozess ol li::before {
	background: #FAF8F4;
	border: 1.5px solid rgba(224, 192, 151, .55);
	color: #88663A;
}

/*
 * ===========================================================================
 * KO-26 Design-Pilot — Erweiterter Pilotauftrag Runde 4 (2026-09-18)
 * ===========================================================================
 * Grundlage: "PKV4U - Erweiterter Pilotauftrag KO-26", auf KO-26 begrenzter
 * gestalterischer Spielraum. Weiterhin: nur CSS, kein PHP, keine DB-
 * Aenderung, kein neues Tool/Rechner, keine neue Datenlogik, ausschliesslich
 * body.postid-4057. Alle Aenderungen unten wirken NICHT auf andere Artikel
 * oder die Homepage (siehe Live-Isolationstest in der Zusammenfassung).
 */

/* --- 4.1 Sieben-Pruefragen-Raster: von unregelmaessigem 4+3-Kachelraster
   zu einer ruhigen, durchgaengigen Checkliste umgebaut. Grund: ein
   ungerades Kachelraster (4 oben, 3 unten) wirkte laut Feedback "schwer"
   und optisch unruhig. Eine einspaltige Zeilenliste mit Nummer links,
   Text rechts ist bei 7 gleichwertigen Pruef-Fragen die lesefreundlichere,
   ruhigere Form (Checklisten-Charakter statt Kachel-Charakter). Gezielt
   nur die 7er-Instanz betroffen (:has-Selektor auf das 7. Kind), die
   4er-"Zeitlicher Verlauf"-Kachel bleibt unveraendert im Kachel-Layout. */
body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol {
	flex-direction: column;
	row-gap: 0;
}
/* Mikro-Korrekturrunde (2026-09-18): rechte Textspalte wirkte unruhig, weil
   jede Zeile als Flex-Item ihre eigene, vom Fragetext abhaengige Breite
   hatte (unterschiedliche rechte Kanten je Zeile). Umbau auf Block-Layout
   mit fest positioniertem Nummern-Kreis (links, absolut) und durchgaengig
   gleich breiter Textspalte (padding-left) -- dieselbe Checklisten-Struktur,
   keine Kachelrueckkehr, kein neuer Inhalt, nur ruhigeres Umbruchverhalten. */
body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol li {
	max-width: none;
	flex-basis: auto;
	position: relative;
	display: block;
	padding: 16px 0 16px 52px;
	border-top: 1px solid rgba(12, 28, 43, .08);
}
body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol li:first-child {
	border-top: none;
}
body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol li::before {
	position: absolute;
	left: 0;
	top: 16px;
	flex: none;
	width: 34px;
	height: 34px;
	font-size: 14px;
	margin-bottom: 0;
}
body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol li span {
	display: block;
	margin-top: 6px;
	line-height: 1.5;
}

/* --- 4.2 Icon-Zuordnung geschaerft: "Wie kann ich meine eigene Situation
   einordnen?" hatte bislang dasselbe Waage-Icon wie die Einstiegsfrage
   (Doppelung). Jetzt das Bestands-/Pruef-Icon, passend zum Abschnitts-
   inhalt (eigene Unterlagen/Bestand sichten). */
body.postid-4057 #wie-kann-ich-meine-eigene-situation-einordnen::before {
	background-image: var(--pkv4u-icn-bestand);
}

/* --- 4.3 CTA-Feinschliff: der bestehende Vorcheck-Link innerhalb der
   Next-Best-Action-Box (.pkv4u-ko-nba, Klasse/Text/Ziel-URL unveraendert,
   nur visuelle Fassung) wird wie der bereits im Header verwendete
   Gold-Outline-Button dargestellt (.pkv4u-kb-header__cta-Bildsprache),
   statt als schlichter Inline-Textlink -- konsistente CTA-Sprache
   zwischen Header und Artikelabschluss. */
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta] {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 20px;
	border: 1px solid #E0C097;
	color: #88663A;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: .02em;
}
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta]:hover,
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta]:focus-visible {
	background: #E0C097;
	color: #0C1C2B;
}

/* --- 4.4 Erste eigene, markenkonforme Linien-Illustration -------------
   Funktionale Zeitstrahl-Grafik fuer den Abschnitt "Was passiert in der
   GKV, wenn ich als Selbststaendiger laenger krank bin?": visualisiert
   die im Text bereits genannten vier Phasen (Krankheitsbeginn -> Ersatz-
   leistung ab 7. Woche -> Fortdauer/Antrag -> sehr lange Erkrankung/
   Schnittstelle) ueber die vier bereits vorhandenen Icons der 4er-Prozess-
   Kachel direkt daneben. Reine SVG-Linienzeichnung (4 Kreise, 1
   Verbindungslinie, 1 Pfeilspitze), exakt in Markenfarben (#FAF8F4-
   Fuellung, #E0C097-Rahmen, #88663A-Icon-Strich) -- keine neue Farbe,
   kein Foto, keine KI-Grafik, kein Stockbild. Sitzt oberhalb der bereits
   vorhandenen 4-Punkte-Liste, ersetzt sie nicht und aendert keinen Text.
   Bewusst ohne Text/Zahlen in der Grafik selbst, um keine Zeichenkodierung
   ueber Data-URI zu riskieren und keine Fakten in die Grafik hinein-
   zuinterpretieren -- die Beschriftung bleibt ausschliesslich der
   bestehenden Textliste vorbehalten (keine Regex-/Textinterpretation,
   rein deklarative Positionierung). */
body.postid-4057 .pkv4u-prozess:has(li:nth-child(4)):not(:has(li:nth-child(5))) {
	position: relative;
	padding-top: 96px;
}
body.postid-4057 .pkv4u-prozess:has(li:nth-child(4)):not(:has(li:nth-child(5)))::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20660%2090%22%20fill=%22none%22%3E%3Cline%20x1=%2260%22%20y1=%2245%22%20x2=%22600%22%20y2=%2245%22%20stroke=%22rgba%2812,28,43,0.16%29%22%20stroke-width=%222%22/%3E%3Cpath%20d=%22M600%2045%20L590%2039%20L590%2051%20Z%22%20fill=%22rgba%2812,28,43,0.25%29%22/%3E%3Ccircle%20cx=%2260%22%20cy=%2245%22%20r=%2222%22%20fill=%22%23FAF8F4%22%20stroke=%22%23E0C097%22%20stroke-width=%221.5%22/%3E%3Ccircle%20cx=%22230%22%20cy=%2245%22%20r=%2222%22%20fill=%22%23FAF8F4%22%20stroke=%22%23E0C097%22%20stroke-width=%221.5%22/%3E%3Ccircle%20cx=%22410%22%20cy=%2245%22%20r=%2222%22%20fill=%22%23FAF8F4%22%20stroke=%22%23E0C097%22%20stroke-width=%221.5%22/%3E%3Ccircle%20cx=%22600%22%20cy=%2245%22%20r=%2222%22%20fill=%22%23FAF8F4%22%20stroke=%22%23E0C097%22%20stroke-width=%221.5%22/%3E%3Cg%20transform=%22translate%2848,33%29%22%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M12%2020s-6.6-4.1-9-8.3C1.3%208.4%203%205%206.4%205c2%200%203.2%201%205.6%203.4C14.4%206%2015.6%205%2017.6%205%2021%205%2022.7%208.4%2021%2011.7%2018.6%2015.9%2012%2020%2012%2020z%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M7%2012h2.3l1.2-2.4%201.6%204.8%201.2-2.4H17%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28218,33%29%22%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M3%2016l4-7%203.5%205L14%208l3%204.5%204-6%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28398,33%29%22%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M12%203.5v17%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M6%2020.5h12%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M4%208l4-2.2L12%208%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M12%208l4-2.2L20%208%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M4%208l-2%204.4a3%203%200%200%200%206%200z%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M20%208l-2%204.4a3%203%200%200%200%206%200z%22/%3E%3C/g%3E%3Cg%20transform=%22translate%28588,33%29%22%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M3%2018l5-6%204%203%205-7%204%205%22/%3E%3Cpath%20stroke=%22%2388663A%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M3%2020.5h18%22/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	body.postid-4057 .pkv4u-prozess:has(li:nth-child(4)):not(:has(li:nth-child(5))) {
		padding-top: 64px;
	}
	body.postid-4057 .pkv4u-prozess:has(li:nth-child(4)):not(:has(li:nth-child(5)))::before {
		height: 54px;
	}
	body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol li::before {
		width: 30px; height: 30px; font-size: 13px; top: 16px;
	}
	body.postid-4057 .pkv4u-prozess:has(li:nth-child(7)) ol li {
		padding-left: 46px;
	}
}


/*
 * ===========================================================================
 * KO-26 Design-Pilot — ABSCHLIESSENDE OPTIMIERUNG (2026-09-18)
 * ===========================================================================
 * Grundlage: "PKV4U - Abschliessender Optimierungsauftrag an Abacus"
 * Massnahmen 1-5 + prominenter CTA (Abschnitt 5).
 * Weiterhin ausschliesslich body.postid-4057.
 * Keine PHP-Aenderung, keine DB-Aenderung, keine neuen Filter.
 *
 * Backup: style.css.pre-pilot-backup (1314 Zeilen, 2026-09-18 17:26)
 * Rollback: Copy-Item style.css.pre-pilot-backup style.css -Force
 * ===========================================================================
 */

/* ==========================================================================
   MASSNAHME 5 / ABSCHNITT 5 — BERATUNGS-CTA PROMINENT GESTALTEN
   ==========================================================================
   Bestehende .pkv4u-ko-nba-Box wird zu einem eigenstaendigen, hochwertigen
   Abschlussbereich aufgewertet. Inhalt/Links bleiben technisch unveraendert.
   Eyebrow wird als CSS-Pseudo-Element ergaenzt (rein dekoratives Label,
   kein Primaerinhalt — der bestehende H2 und Link-Text tragen die
   Information). Gold-gefuellter Primaerbutton statt nur Outline, groessere
   Flaeche, mehr visuelles Gewicht.
   Keine aggressive Verkaufsoptik, keine kuenstliche Dringlichkeit.
   Finale CTA-Korrektur (2026-09-18, Abschlusssauftrag Abschnitt 3):
   Eyebrow-Label "NÄCHSTER SCHRITT"; CTA-Begleittext und H2 werden an
   ihrer jeweiligen Quelle korrigiert (Post-Content bzw. Label-Map in
   functions.php), nicht hier. */

body.postid-4057 .pkv4u-ko-nba {
	background: linear-gradient(180deg, #FAF8F4 0%, #F5F1EA 100%);
	border-top: 3px solid #E0C097;
	border-bottom: none;
	padding: 40px 38px 44px;
	margin: 64px 0 16px;
	position: relative;
}
body.postid-4057 .pkv4u-ko-nba::before {
	content: 'NÄCHSTER SCHRITT';
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #88663A;
	margin-bottom: 10px;
}
body.postid-4057 .pkv4u-ko-nba h2 {
	font-family: 'Playfair Display', serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #0C1C2B;
	line-height: 1.25;
	margin: 0 0 16px 0;
}
body.postid-4057 .pkv4u-ko-nba p {
	font-size: 16.5px;
	line-height: 1.65;
	color: #3F4A52;
	margin: 0 0 4px 0;
}
/* Mikro-Korrektur: Button stand bisher inline direkt im Fliesstext und
   wirkte dadurch unruhig/angehaengt. Er faellt jetzt in eine eigene Zeile
   und ruecht per margin-top sichtbar tiefer/ruhiger unter den Text -
   Klasse, Linkziel, Tracking-Attribut und Text bleiben unveraendert. */
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta] {
	display: block;
	width: fit-content;
	margin-top: 28px;
	padding: 14px 32px;
	background: #E0C097;
	border: 1px solid #E0C097;
	color: #0C1C2B;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: .02em;
	transition: background .2s, color .2s;
}
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta]::after {
	content: ' \2192';
}
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta]:hover,
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta]:focus-visible {
	background: #0C1C2B;
	border-color: #0C1C2B;
	color: #E0C097;
}
body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta]:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: 3px;
}


/* ==========================================================================
   MASSNAHME 3 — INHALTSUEBERSICHT (TOC) VERBESSERN
   ==========================================================================
   Ziel: Gruppierung der Themen, Erkennbarkeit der drei Hauptebenen,
   bessere Abstande, visuelle Ruhe. Keine neue Navigation, bestehende
   Anker bleiben. Die drei Ebenen-Ueberschriften ("Kurz erklaert",
   "Zusammenhaenge verstehen", "Im Detail nachvollziehen") sind in der
   TOC-Liste als eigene LI-Elemente enthalten — sie erhalten optisch eine
   staerkere Gewichtung als Label/Gruppentrenner. Erkennungsmerkmal:
   die Anker verweisen auf die generierten Ebenen-IDs, nicht auf H2-IDs
   aus dem Artikeltext. Per :has()-Selektor auf den Ankertext kann ich
   das generisch erkennen (kein Regex, kein PHP, kein ID-Hardcoding). */

body.postid-4057 .pkv4u-kb-toc__list {
	padding: 14px 20px 18px;
}
body.postid-4057 .pkv4u-kb-toc__list li {
	border-top-color: rgba(12, 28, 43, .06);
}
body.postid-4057 .pkv4u-kb-toc__list a {
	padding: 9px 4px;
	font-size: 13.5px;
}
body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="kurz-erklaert"]),
body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="zusammenhaenge-verstehen"]),
body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="im-detail-nachvollziehen"]) {
	margin-top: 8px;
	border-top: 1px solid rgba(224, 192, 151, .35);
}
body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="kurz-erklaert"]) a,
body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="zusammenhaenge-verstehen"]) a,
body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="im-detail-nachvollziehen"]) a {
	font-weight: 600;
	color: #88663A;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 12px 4px 6px;
}

/* ==========================================================================
   MASSNAHME 5 — EINHEITLICHER GESTALTUNGSRHYTHMUS
   ==========================================================================
   Konsistente Abstande zwischen Modulen, harmonische Uebergange,
   keine Aneinanderreihung unterschiedlich gestalteter Boxen.
   Redaktionelle Ruhe statt visuelle Unruhe. */

body.postid-4057 .pkv4u-ko-level[data-level="1"] {
	margin-bottom: 32px;
}
body.postid-4057 .pkv4u-ko-level[data-level="2"] {
	margin-bottom: 32px;
}
body.postid-4057 .pkv4u-ko-level[data-level="3"] {
	margin-bottom: 12px;
}
body.postid-4057 .pkv4u-ko-level[data-level="2"] .pkv4u-ko-level__body {
	padding-top: 8px;
}
body.postid-4057 .pkv4u-vergleich {
	margin: 40px 0 48px;
}
body.postid-4057 .pkv4u-pruef {
	margin: 12px 0 44px;
}
body.postid-4057 .pkv4u-ko-sources {
	margin-top: 48px;
}


/* ==========================================================================
   MASSNAHME 1 — ARTIKELKOPF UND EINSTIEG
   ==========================================================================
   Evaluation: Eine zusaetzliche Hero-Illustration am Artikelkopf wuerde
   dieselbe Kernaussage wiederholen, die bereits durch die 4-Phasen-
   Zeitstrahl-Illustration und die Pruef-Checkliste vermittelt wird:
   "Abhaengigkeit der Einnahmen von der Arbeitskraft + Ueberbrueckung
   bei Krankheit." Gemaess Auftrag ("Wenn beide Darstellungen dieselbe
   Aussage wiederholen wuerden, verwende nur die sinnvollere Variante")
   bleibt die bereits eingebaute Zeitstrahl-Grafik bestehen, und es wird
   KEINE zweite Illustration ergaenzt. Stattdessen wird der Artikelkopf
   durch ein staerkeres typografisches Staging aufgewertet:
   
   - Der Artikeltitel (H1) bekommt auf KO-26 ein dezentes Gold-Ornament
     (Trennlinie unter dem Titel), das den Homepage-Sektionsuebergang
     spiegelt.
   - Die Lead-Absaetze (Runde 2, Playfair 23px) bleiben wie gehabt —
     sie bilden zusammen mit dem Titel bereits eine ueberzeugende Einheit.
   
   Falls spaeter ein KO-spezifisches Artikelbild redaktionell bereit-
   gestellt wird, kann hier eine background-image-Eigenschaft ergaenzt
   werden. Rein dekorative Lueckenfueller werden nicht eingesetzt. */

body.postid-4057 .elementor-heading-title {
	position: relative;
	padding-bottom: 24px;
}
body.postid-4057 .elementor-heading-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: #E0C097;
}

/* ==========================================================================
   MASSNAHME 2 — INFORMATIONSHIERARCHIE FEINSCHLIFF
   ==========================================================================
   Die bestehende Struktur (Lead-Absaetze, drei Ebenen, Merksatz-Zitate)
   wird nicht veraendert. Feinschliff: Vergleichsbox-Label besser lesbar,
   Quellen-Bereich etwas kompakter. */

body.postid-4057 .pkv4u-vergleich .pkv4u-vergleich__label {
	font-size: 13px;
	letter-spacing: .08em;
}
body.postid-4057 .pkv4u-ko-sources li {
	font-size: 12.5px;
	line-height: 1.55;
	margin-bottom: 6px;
}

/* ==========================================================================
   RESPONSIVE — ABSCHLIESSENDE ANPASSUNGEN
   ========================================================================== */

@media (max-width: 767px) {
	body.postid-4057 .pkv4u-ko-nba {
		padding: 30px 24px 34px;
	}
	body.postid-4057 .pkv4u-ko-nba h2 {
		font-size: 22px;
	}
	body.postid-4057 .pkv4u-ko-nba a[data-pkv4u-cta] {
		padding: 12px 24px;
		font-size: 13px;
		display: block;
		width: auto;
		text-align: center;
		margin-top: 20px;
	}
	body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="kurz-erklaert"]) a,
	body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="zusammenhaenge-verstehen"]) a,
	body.postid-4057 .pkv4u-kb-toc__list li:has(a[href*="im-detail-nachvollziehen"]) a {
		font-size: 11px;
		padding-top: 10px;
	}
	body.postid-4057 .elementor-heading-title {
		padding-bottom: 18px;
	}
	body.postid-4057 .elementor-heading-title::after {
		width: 44px;
		height: 2px;
	}
}

@media (min-width: 768px) and (max-width: 1279px) {
	body.postid-4057 .pkv4u-ko-nba {
		padding: 36px 32px 40px;
	}
	body.postid-4057 .pkv4u-ko-nba h2 {
		font-size: 24px;
	}
}

/* RELEASEAUFTRAG 2026-09-21, P0-01: Impressum (/pkv/impressum/, page-id-2608).
   Der eRecht24-Textblock sitzt in einem einzelnen Elementor-Text-Editor-Widget
   (.elementor-element-dae1b6b), dessen Textfarbe im Elementor-Editor auf die
   globale Kit-Farbe "#e0f9687" (#E5E5E5, fuer helle Schrift auf dunklem
   Hintergrund gedacht) gesetzt wurde -- auf dem weissen Seitenhintergrund
   dieser Seite dadurch nur ca. 1,3:1 Kontrast statt der geforderten 4,5:1.
   Keine Elementor-JSON-/DB-Aenderung (nicht ohne wp-cli sicher moeglich),
   stattdessen gezielte, ueberschreibende CSS-Regel nur fuer dieses eine
   Widget auf dieser einen Seite -- keine Inhaltsaenderung, keine Wirkung auf
   die globale Kit-Farbe (wird an anderer Stelle ggf. bewusst so verwendet).
   Selektor bewusst body.page-id-2608 .elementor-element.elementor-element-
   dae1b6b (3 Klassen + body-Element) statt nur .elementor-element-dae1b6b (2
   Klassen + body) -- Elementors eigene generierte Regel in post-2608.css
   lautet ".elementor-2608 .elementor-element.elementor-element-dae1b6b"
   (ebenfalls 3 Klassen) und gewinnt sonst per Ladereihenfolge, da bei
   gleicher Klassenzahl die Reihenfolge und nicht die Elementanzahl
   entscheidet. */
body.page-id-2608 .elementor-element.elementor-element-dae1b6b {
	color: #333333;
}

/* RELEASEAUFTRAG 2026-09-21, P1-05: Datenschutzerklaerung (page-id-2559).
   Der eRecht24-Text enthaelt mehrere lange, ungetrennte Roh-URLs (u. a.
   youronlinechoices.com, dataprivacyframework.gov, facebook.com/legal/...)
   ohne Trennzeichen -- ohne Umbruchregel sprengen einzelne Links bei
   375/390px die Spaltenbreite und erzeugen horizontalen Dokumentueberlauf.
   Reiner Darstellungsfix (Umbruchverhalten), keine Text-/Linkaenderung.
   Direkt auf body.page-id-2559 a skaliert statt auf einen bestimmten
   Elementor-Widget-Typ (der eRecht24-Textblock liegt hier in einem
   elementor-widget-html, nicht wie beim Impressum in einem
   elementor-widget-text-editor) -- robuster gegen dieses Detail, weiterhin
   nur auf dieser einen Seite wirksam. */
body.page-id-2559 a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*
 * ===========================================================================
 * 2026-09-24 — Wissensartikel: Lesespalte breiter, Tabellen ohne Scrollbalken
 * ===========================================================================
 * Dirk-Feedback: Wissensartikel wirken im Vergleich zur Startseite (1200px)
 * zu schmal, Tabellen zeigen horizontale Scrollbalken. Ursachen: Lesespalte
 * fest 850px (Portalstruktur-Abschluss 2026-09-04) und Tabellenkoepfe mit
 * white-space:nowrap in Grossbuchstaben mit Sperrung.
 * 1. Lesespalte ab 1200px auf 960px (Titel, Inhalt, Breadcrumb, Rueckweg,
 *    Verwandte Inhalte gleich breit). Unter 1200px unveraendert.
 * 2. Seitliche Inhaltsuebersicht erst ab 1720px (vorher 1600px), damit
 *    960 + 40 + 280 ohne horizontalen Seitenueberlauf passt; darunter
 *    bleibt sie wie bisher als aufklappbarer Block ueber dem Text.
 * 3. Tabellenkoepfe und Zeilenbeschriftungen duerfen umbrechen, deutsche
 *    Silbentrennung erlaubt; Zellen-Innenabstand bis 1024px kompakter.
 * 4. Opt-in-Kartenansicht fuer breite Tabellen auf Handys:
 *    .pkv4u-ko-table--stack (td mit data-label, ARIA-Rollen im Markup,
 *    damit Screenreader die Tabellensemantik trotz display:block behalten).
 */
@media ( min-width: 1200px ) {
	.elementor-widget-theme-post-title,
	.elementor-widget-theme-post-content,
	.pkv4u-kb-breadcrumb,
	.pkv4u-kb-backlink,
	.pkv4u-kb-backlink--archiv-ende,
	.pkv4u-kb-related {
		max-width: 960px !important;
	}
}
@media ( min-width: 1600px ) and ( max-width: 1719.98px ) {
	.pkv4u-kb-toc {
		position: static;
		left: auto;
		margin-left: 0;
		width: auto;
	}
	.pkv4u-kb-toc__details {
		position: static;
	}
}
@media ( min-width: 1720px ) {
	.pkv4u-kb-toc {
		position: absolute;
		top: 0;
		left: 100%;
		margin-left: 40px;
		width: 280px;
	}
}
.pkv4u-ko-table-wrap th,
.pkv4u-ko-table-wrap td {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}
.pkv4u-ko-table-wrap thead th,
.pkv4u-ko-table-wrap tbody th {
	white-space: normal;
}
@media ( max-width: 1024px ) {
	.pkv4u-ko-table-wrap th,
	.pkv4u-ko-table-wrap td {
		padding: 12px 10px;
	}
}
@media ( max-width: 600px ) {
	.pkv4u-ko-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
	}
	.pkv4u-ko-table--stack,
	.pkv4u-ko-table--stack tbody,
	.pkv4u-ko-table--stack tr,
	.pkv4u-ko-table--stack td {
		display: block;
		width: 100%;
	}
	.pkv4u-ko-table--stack caption {
		display: block;
		text-align: left;
		margin-bottom: 8px;
	}
	.pkv4u-ko-table--stack tr {
		padding: 10px 0;
		border-bottom: 1px solid rgba( 12, 28, 43, 0.24 );
	}
	.pkv4u-ko-table--stack td,
	.pkv4u-ko-table--stack tr:last-child td {
		display: grid;
		grid-template-columns: minmax( 0, 11em ) minmax( 0, 1fr );
		column-gap: 12px;
		padding: 5px 0;
		border-bottom: none;
	}
	.pkv4u-ko-table--stack td::before {
		content: attr( data-label );
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #5C6C78;
		padding-top: 3px;
	}
}
/* Ergaenzung 2026-09-24: Browser ohne deutsches Silbentrennungswoerterbuch
   trennen ueberlange Einzelwoerter (z. B. „Mindestbemessungsgrundlage" in
   Grossbuchstaben, „Pflegetagegeldversicherung") nicht; auf Handy- und
   Tabletbreite darf deshalb notfalls ohne Trennstrich umbrochen werden,
   damit keine Tabelle ueber die Spalte ragt. */
@media ( max-width: 1024px ) {
	.pkv4u-ko-table-wrap th,
	.pkv4u-ko-table-wrap td {
		overflow-wrap: anywhere;
	}
}

/* AP2 2026-09-24 (Dirk-Entscheidung zu AP1): KO-21 "Quellen & Methodik"
   (Post 4010) ist bis zur fachlichen Freigabe aus dem Portal zurueckgezogen
   (Status Entwurf). Der einzige Einstieg darauf, der Button im Manufaktur-
   Abschnitt (/manufaktur/, Seite 3946, Elementor-Widget m1lnk01), wuerde
   sonst ins Leere fuehren. Nur ausgeblendet, Elementor-Daten unveraendert.
   Nach Freigabe und Wiederveroeffentlichung von KO-21 diese Regel entfernen. */
.page-id-3946 .elementor-element-m1lnk01 {
	display: none !important;
}

/* AP3 Top-20 (2026-09-24, Dirk): Fragen-Navigator auf /wissen/
   (inc/pkv4u-top20-navigator.php). Natives <details>/<summary> nach dem
   "Für wen"-Muster, ausschließlich vorhandene /wissen/-Tokens: Tiefblau-
   Fläche, Playfair Display für Überschriften und Clusternamen, Montserrat für
   UI und Fragen, Gold nur als Akzent (Nummer, Zeichen, Linie, Fokus, Hover),
   helle Antwortkarte wie die Wissenswelt-Zeilen (#FEFDFB). Keine Karten je
   Cluster, keine Icons, keine Bilder. Bewegung nur als Zeichen-Drehung und
   bei prefers-reduced-motion abgeschaltet. */
.pkv4u-wissen-uebersicht .pkv4u-fn {
	margin: 40px 0 64px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn .pkv4u-fn__eyebrow {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #E0C097;
	margin: 0 0 12px;
}
.pkv4u-wissen-uebersicht h2.pkv4u-fn__titel {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.15;
	color: #FFFFFF;
	margin: 0 0 28px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__liste {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
/* 2026-10-11 (Entflechtung): die Startseite verlinkt direkt auf die Fragegruppen (/wissen/#frage-cluster-N); Ziel nicht unter der angehefteten Kopfzeile. */
.pkv4u-fn__cluster { scroll-margin-top: 96px; }
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster {
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-kopf {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 4px;
	cursor: pointer;
	list-style: none;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-kopf::-webkit-details-marker,
.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf::-webkit-details-marker {
	display: none;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__nr {
	flex: 0 0 28px;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	color: #E0C097;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'Playfair Display', serif;
	font-size: 24px;
	line-height: 1.3;
	color: #FFFFFF;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen {
	flex: 0 0 14px;
	height: 14px;
	position: relative;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen::before,
.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen::after {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 1.5px;
	background: #E0C097;
	transition: transform 0.2s ease;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen::after {
	transform: rotate(90deg);
}
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster[open] > .pkv4u-fn__cluster-kopf .pkv4u-fn__zeichen::after {
	transform: rotate(0deg);
}
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-kopf:hover .pkv4u-fn__cluster-name {
	text-decoration: underline;
	text-decoration-color: #E0C097;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-kopf:focus-visible,
.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: 4px;
	border-radius: 2px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__fragen {
	/* 2026-10-21 (Dirk): die Unterfragen liegen auf einer helleren Fläche (Navy mit weißem Schleier), nicht auf dem Seitengrund. Die Antwortkarte bleibt die hellste Fläche. */
	margin: 0 0 22px 52px;
	padding: 4px 24px 14px;
	background: rgba(255, 255, 255, 0.06);
	border-left: 2px solid rgba(224, 192, 151, 0.55);
	border-radius: 0 3px 3px 0;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__frage {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #DCE2E6;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf::before {
	content: "▸";
	flex: 0 0 auto;
	color: #E0C097;
	transition: transform 0.15s ease;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__frage[open] > .pkv4u-fn__frage-kopf::before {
	transform: rotate(90deg);
}
.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf:hover,
.pkv4u-wissen-uebersicht .pkv4u-fn__frage[open] > .pkv4u-fn__frage-kopf {
	color: #FFFFFF;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__antwort {
	max-width: 760px;
	margin: 2px 0 16px;
	padding: 22px 26px;
	background: #FEFDFB;
	border-left: 2px solid #E0C097;
	border-radius: 3px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__antwort p {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #0C1C2B;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__antwort p + p {
	margin-top: 16px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__weiter a {
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.2px;
	color: #0C1C2B;
	text-decoration: none;
	border-bottom: 1.5px solid #E0C097;
	padding-bottom: 3px;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__weiter a:hover {
	color: #88663A;
}
.pkv4u-wissen-uebersicht .pkv4u-fn__weiter a:focus-visible {
	outline: 2px solid #E0C097;
	outline-offset: 3px;
}
.pkv4u-fn__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen::before,
	.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen::after,
	.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf::before {
		transition: none;
	}
}
@media (max-width: 767px) {
	.pkv4u-wissen-uebersicht .pkv4u-fn {
		margin: 32px 0 48px;
	}
	.pkv4u-wissen-uebersicht h2.pkv4u-fn__titel {
		font-size: 26px;
		margin-bottom: 22px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-kopf {
		align-items: flex-start;
		gap: 14px;
		padding: 18px 2px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__nr {
		flex-basis: 22px;
		padding-top: 6px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__zeichen {
		margin-top: 8px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-name {
		font-size: 20px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__fragen {
		margin-left: 0;
		padding: 2px 16px 10px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__antwort {
		padding: 18px;
	}
	.pkv4u-wissen-uebersicht .pkv4u-fn__antwort p {
		font-size: 15.5px;
	}
	/* Lange Fachwörter (z. B. Jahresarbeitsentgeltgrenze) passen bei 320 px
	   sonst nicht in die Antwortkarte: Silbentrennung (lang="de"), notfalls
	   Umbruch im Wort; keine Änderung an Schriftgröße oder Layout. */
	.pkv4u-wissen-uebersicht .pkv4u-fn__antwort p,
	.pkv4u-wissen-uebersicht .pkv4u-fn__frage-kopf,
	.pkv4u-wissen-uebersicht .pkv4u-fn__cluster-name {
		hyphens: auto;
		overflow-wrap: anywhere;
	}
}
@media (max-width: 400px) {
	.pkv4u-wissen-uebersicht .pkv4u-fn__antwort {
		padding: 16px 14px;
	}
}

/*
 * ===========================================================================
 * 2026-09-24, Dirk-Feedback: Navigations-Feinschliff
 * ===========================================================================
 * 1. Hero-Sekundaer-CTA „Wissen entdecken“ (template-golden-master.php) war
 *    graue Kleinschrift und ging neben dem goldenen Hauptbutton unter. Jetzt
 *    Rahmen-Button in gleicher Hoehe und Typografie wie der Hauptbutton,
 *    Gold nur als Linie; Ziel ist der Fragen-Navigator (/wissen/#fragen).
 *    CSS dazu im Golden-Master-Template (laedt style.css bewusst nicht).
 * 2. /wissen/: oberer Ruecklink „Zur Startseite“ sass ab 1200px Fensterbreite
 *    in der 960px-Artikelspalte (Regel „Lesespalte breiter“ oben griff auch
 *    hier) und damit eingerueckt gegenueber der Seitenueberschrift. Jetzt auf
 *    derselben Linie wie Ueberschrift und Fragen-Navigator (Elementor-Spalte
 *    max. 1200px, seitlich 34px bzw. mobil 30px).
 * 3. Wissensartikel: Breadcrumb und Ruecklinks stehen auf der Linie von Titel
 *    und Text (vorher 9 bis 24px eingerueckt); Ruecklinks mit mehr Abstand
 *    zum Breadcrumb und deutlich getrennt (feine senkrechte Linie statt
 *    Mittelpunkt), mobil untereinander.
 */
.pkv4u-wissen-uebersicht .pkv4u-fn {
	scroll-margin-top: 24px;
}

.pkv4u-kb-backlink-bar {
	padding-left: 34px;
	padding-right: 34px;
}
.pkv4u-kb-backlink.pkv4u-kb-backlink--wissen-top {
	max-width: 1200px !important;
}

.pkv4u-kb-breadcrumb,
.pkv4u-kb-backlink.pkv4u-kb-backlink--artikel-top {
	max-width: 898px;
	padding-left: 24px;
	padding-right: 24px;
}
.pkv4u-kb-backlink.pkv4u-kb-backlink--artikel-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 10px;
	margin: 26px auto 14px auto;
}
.pkv4u-kb-backlink--artikel-top .pkv4u-kb-backlink__sep {
	display: inline-block;
	width: 1px;
	height: 16px;
	margin: 0 26px;
	background: rgba(12, 28, 43, 0.22);
	font-size: 0;
	color: transparent;
}
@media ( min-width: 1200px ) {
	.pkv4u-kb-breadcrumb,
	.pkv4u-kb-backlink.pkv4u-kb-backlink--artikel-top {
		max-width: 960px !important;
		padding-left: 0;
		padding-right: 0;
	}
}
@media ( max-width: 767px ) {
	.pkv4u-kb-backlink-bar {
		padding-left: 30px;
		padding-right: 30px;
	}
	.pkv4u-kb-breadcrumb,
	.pkv4u-kb-backlink.pkv4u-kb-backlink--artikel-top {
		padding-left: 24px;
		padding-right: 24px;
	}
	.pkv4u-kb-backlink.pkv4u-kb-backlink--artikel-top {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 22px;
	}
	.pkv4u-kb-backlink--artikel-top .pkv4u-kb-backlink__sep {
		display: none;
	}
}

/* 2026-09-24 (Dirk-Freigabe): Rollen-Unterzeilen auf /wissen/ unter
   „Welche Frage beschäftigt Sie?“ und „Alle Wissenswelten“, damit klar ist,
   warum Navigator und Wissenswelten nebeneinander bestehen. */
.pkv4u-wissen-uebersicht h2.pkv4u-fn__titel:has(+ .pkv4u-fn__intro) {
	margin-bottom: 10px;
}
.pkv4u-wissen-uebersicht p.pkv4u-fn__intro {
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #DCE2E6;
	margin: 0 0 28px;
}
@media ( max-width: 767px ) {
	.pkv4u-wissen-uebersicht p.pkv4u-fn__intro {
		font-size: 14px;
		margin-bottom: 22px;
	}
}

/* 2026-09-24, Dirk-Feedback: Wissenswelt- und Anlass-Archive. Breadcrumb und
   oberer Ruecklink sassen in einer festen 960px-Spalte, die Seitenspalte
   (.site-main) folgt dort aber den Stufen des Eltern-Themes (500/600/800/
   1140px, Innenabstand 24px, mobil Titel bei 20px). Dadurch standen sie
   deutlich weiter zur Mitte als Titel und Karten. Jetzt dieselben Stufen,
   gleicher Abstand zum Breadcrumb wie im Artikelkopf. */
body.archive .pkv4u-kb-breadcrumb,
body.archive .pkv4u-kb-backlink.pkv4u-kb-backlink--archiv-top {
	max-width: none !important;
	padding-left: 20px;
	padding-right: 20px;
}
body.archive .pkv4u-kb-backlink.pkv4u-kb-backlink--archiv-top {
	margin: 26px auto 14px auto;
}
@media ( min-width: 576px ) {
	body.archive .pkv4u-kb-breadcrumb,
	body.archive .pkv4u-kb-backlink.pkv4u-kb-backlink--archiv-top {
		max-width: 500px !important;
	}
}
@media ( min-width: 768px ) {
	body.archive .pkv4u-kb-breadcrumb,
	body.archive .pkv4u-kb-backlink.pkv4u-kb-backlink--archiv-top {
		max-width: 600px !important;
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media ( min-width: 992px ) {
	body.archive .pkv4u-kb-breadcrumb,
	body.archive .pkv4u-kb-backlink.pkv4u-kb-backlink--archiv-top {
		max-width: 800px !important;
	}
}
@media ( min-width: 1200px ) {
	body.archive .pkv4u-kb-breadcrumb,
	body.archive .pkv4u-kb-backlink.pkv4u-kb-backlink--archiv-top {
		max-width: 1140px !important;
	}
}

/* 2026-09-24, Dirk-Feedback: Rueckweg oben auf /vorcheck/ und /kompass/
   (pkv4u_kb_render_vorcheck_backlink_hook(), pkv4u_kb_render_kompass_backlink_hook()). Flaeche im hellen Ton der
   ersten Vorcheck-Sektion (#FAF8F4), damit kein weisser Balken entsteht;
   Linie wie Eyebrow/Ueberschrift der Seite (Elementor-Spalte max. 1200px,
   seitlich 34px, mobil 30px). Link in der Farbwelt der hellen Seiten. */
.pkv4u-kb-backlink-bar--vorcheck {
	background: #FAF8F4;
	padding: 32px 34px 0 34px;
}
.pkv4u-kb-backlink.pkv4u-kb-backlink--vorcheck-top {
	max-width: 1200px !important;
	margin: 0 auto;
	padding: 0;
}
@media ( max-width: 767px ) {
	.pkv4u-kb-backlink-bar--vorcheck {
		padding: 24px 30px 0 30px;
	}
}

/* --- Rechtstexte: Impressum und Datenschutz (2026-09-25) ----------------------
   Dirk: Format an die restliche Seite anpassen, leichtes Beige, mittig statt
   linksbuendig, insgesamt kleiner. Portal-Kopf/-Fuss kommen ueber
   pkv4u_kb_is_portal_frame_context() (functions.php). Hier nur Lesespalte und
   Typografie, gleiche Schriften/Farben wie Wissensartikel (Playfair/Montserrat,
   #0C1C2B, #5C6C78, Gold #88663A auf hell). Das im Inhalt eingebettete grosse
   Logo wird ausgeblendet, weil der Portal-Kopf das Logo bereits zeigt. */
/* !important: das Elementor-Kit (post-2534.css) setzt mobil eine eigene
   Body-Hintergrundfarbe (#E5E5E5), die sonst gewinnt. */
body.pkv4u-rechtstext { background: #FAF8F4 !important; }
.pkv4u-rechtstext .site-main {
	max-width: 760px; margin: 0 auto; padding: 72px 24px 96px 24px; box-sizing: border-box;
}
.pkv4u-rechtstext .page-header { display: none; }
/* Cookie-Richtlinie: Complianz-Dokument ohne eigene H1, Titel steht im
   Theme-Seitenkopf -> dort sichtbar lassen, gleiche Optik wie die H1 der
   anderen Rechtstexte. */
.pkv4u-rechtstext.page-id-2946 .page-header { display: block; }
.pkv4u-rechtstext .page-header .entry-title {
	font-family: 'Playfair Display', serif; font-weight: 400; font-size: 40px; line-height: 1.15;
	letter-spacing: -0.01em; color: #0C1C2B; margin: 0 0 40px 0; padding-bottom: 22px; position: relative;
}
.pkv4u-rechtstext .page-header .entry-title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: #E0C097;
}
@media (max-width: 700px) { .pkv4u-rechtstext .page-header .entry-title { font-size: 30px; margin-bottom: 30px; } }
.pkv4u-rechtstext .page-content > p:first-child:has(> a > img),
.pkv4u-rechtstext .page-content > a:first-child:has(> img) { display: none; }
.pkv4u-rechtstext .page-content {
	font-family: Montserrat, sans-serif; font-size: 14.5px; line-height: 1.75; color: #2E3E4B;
	overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.pkv4u-rechtstext .page-content h1 {
	font-family: 'Playfair Display', serif; font-weight: 400; font-size: 40px; line-height: 1.15;
	letter-spacing: -0.01em; color: #0C1C2B; margin: 0 0 40px 0; padding-bottom: 22px; position: relative;
	-webkit-hyphens: manual; hyphens: manual;
}
.pkv4u-rechtstext .page-content h1::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: #E0C097;
}
.pkv4u-rechtstext .page-content h2 {
	font-family: 'Playfair Display', serif; font-weight: 400; font-size: 22px; line-height: 1.3;
	color: #0C1C2B; margin: 44px 0 14px 0; padding-top: 28px; border-top: 1px solid rgba(12, 28, 43, 0.1);
}
.pkv4u-rechtstext .page-content h1 + h2 { margin-top: 0; padding-top: 0; border-top: none; }
.pkv4u-rechtstext .page-content h3 {
	font-family: Montserrat, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
	text-transform: uppercase; color: #88663A; margin: 28px 0 10px 0;
}
.pkv4u-rechtstext .page-content h4 {
	font-family: Montserrat, sans-serif; font-size: 14.5px; font-weight: 600; color: #0C1C2B; margin: 22px 0 8px 0;
}
.pkv4u-rechtstext .page-content p,
.pkv4u-rechtstext .page-content li { margin: 0 0 14px 0; }
.pkv4u-rechtstext .page-content ul,
.pkv4u-rechtstext .page-content ol { padding-left: 20px; margin: 0 0 16px 0; }
.pkv4u-rechtstext .page-content a {
	color: #0C1C2B; text-decoration: none; border-bottom: 1px solid #E0C097;
}
.pkv4u-rechtstext .page-content a:hover { color: #88663A; }
.pkv4u-rechtstext .page-content a:focus-visible { outline: 2px solid #88663A; outline-offset: 2px; }
/* Cookie-Richtlinie (2946, Complianz-Shortcode): der Plugin-Container
   .cmplz-document vererbt sonst ein helles Gelb (#F0DB86) an den Fliesstext,
   auf Beige kaum lesbar. Gleiche Textfarbe wie Impressum/Datenschutz. */
.pkv4u-rechtstext .page-content .cmplz-document,
.pkv4u-rechtstext .page-content .cmplz-document p,
.pkv4u-rechtstext .page-content .cmplz-document li,
.pkv4u-rechtstext .page-content .cmplz-document td,
.pkv4u-rechtstext .page-content .cmplz-document span,
.pkv4u-rechtstext .page-content .cmplz-document summary,
.pkv4u-rechtstext .page-content .cmplz-document div { color: #2E3E4B; }
.pkv4u-rechtstext .page-content .cmplz-document h2,
.pkv4u-rechtstext .page-content .cmplz-document h3,
.pkv4u-rechtstext .page-content .cmplz-document h4 { color: #0C1C2B; }
.pkv4u-rechtstext .page-content .cmplz-document > p:first-child,
.pkv4u-rechtstext .page-content .cmplz-document p:first-of-type em { color: #5C6C78; }
@media (max-width: 700px) {
	.pkv4u-rechtstext .site-main { padding: 44px 20px 72px 20px; }
	.pkv4u-rechtstext .page-content { font-size: 14px; }
	.pkv4u-rechtstext .page-content h1 { font-size: 30px; margin-bottom: 30px; }
	.pkv4u-rechtstext .page-content h2 { font-size: 19px; margin-top: 34px; padding-top: 22px; }
}

/* --- Vorcheck-Einstieg in Wissensartikeln (2026-09-25) ------------------------
   (1) Frueher Hinweis direkt nach Ebene 1 "Kurz erklärt"
       (pkv4u_kb_render_early_cta(), functions.php).
   (2) Der bestehende Vorcheck-Link in der Vertiefungsbox am Artikelende war
       nur in Beitrag 4057 als Button gestaltet (Abschnitt 4.3 weiter oben),
       ueberall sonst ein schlichter Textlink. Jetzt in allen Artikeln dieselbe
       Gold-Outline-Optik wie der Header-Button. */
.pkv4u-ko-cta-frueh {
	display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
	margin: 8px 0 48px 0; padding: 22px 26px;
	border: 1px solid rgba(224, 192, 151, 0.45); border-left: 3px solid #E0C097; background: #FFFFFF;
}
.pkv4u-ko-cta-frueh__text {
	flex: 1 1 320px; margin: 0 !important; font-family: Montserrat, sans-serif;
	font-size: 14.5px; line-height: 1.6; color: #2E3E4B;
}
.pkv4u-ko-cta-frueh__text strong { color: #0C1C2B; font-weight: 600; }
/* 2026-09-25, Dirk: CTA gold gefuellt statt Outline (faellt besser ins Auge,
   nicht zu auffaellig); beim Ueberfahren/Klicken wird das Gold heller.
   Selektor a.pkv4u-ko-cta-btn, weil die allgemeine Artikel-Linkregel
   (.elementor-widget-theme-post-content a, padding-bottom 1px, Farbe) sonst
   Innenabstand und Textfarbe ueberschreibt (Rahmen wirkte unfoermig). */
a.pkv4u-ko-cta-btn,
.pkv4u-kb-context .pkv4u-ko-nba a[data-pkv4u-cta] {
	display: inline-block; flex: none; padding: 12px 24px;
	border: 1px solid #E0C097; border-radius: 2px; background: #E0C097; color: #0C1C2B;
	font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em;
	line-height: 1.3; text-align: center; text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pkv4u-kb-context .pkv4u-ko-nba a[data-pkv4u-cta] { margin-top: 16px; }
a.pkv4u-ko-cta-btn:hover, a.pkv4u-ko-cta-btn:focus-visible, a.pkv4u-ko-cta-btn:active,
.pkv4u-kb-context .pkv4u-ko-nba a[data-pkv4u-cta]:hover,
.pkv4u-kb-context .pkv4u-ko-nba a[data-pkv4u-cta]:focus-visible,
.pkv4u-kb-context .pkv4u-ko-nba a[data-pkv4u-cta]:active { background: #DDC38E; border-color: #DDC38E; color: #0C1C2B; }
a.pkv4u-ko-cta-btn:focus-visible,
.pkv4u-kb-context .pkv4u-ko-nba a[data-pkv4u-cta]:focus-visible { outline: 2px solid #88663A; outline-offset: 2px; }
@media (max-width: 600px) {
	.pkv4u-ko-cta-frueh { padding: 20px 18px; }
	a.pkv4u-ko-cta-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
}

/* --- Vorcheck-Kontaktschritt und Rueckweg aus dem Datenschutz (2026-09-25) ----
   (1) .pkv4u-f10-intro: Einleitung vor Formular 10 (pkv4u_form10_intro()).
   (2) .pkv4u-rueckweg: Hinweis oben auf der Datenschutzerklaerung, nur sichtbar
       beim Aufruf aus dem Vorcheck (pkv4u_legal_return_to_form()). */
.pkv4u-f10-intro { margin: 0 0 26px 0; }
.pkv4u-f10-intro__titel {
	font-family: 'Playfair Display', serif; font-weight: 400; font-size: 26px; line-height: 1.25;
	color: #0C1C2B; margin: 0 0 10px 0;
}
.pkv4u-f10-intro__text { font-family: Montserrat, sans-serif; font-size: 14.5px; line-height: 1.6; color: #5C6C78; margin: 0; max-width: 52ch; }
.pkv4u-rueckweg {
	position: sticky; top: 0; z-index: 50;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px;
	padding: 14px 20px; background: #0C1C2B; border-bottom: 2px solid #E0C097;
	font-family: Montserrat, sans-serif;
}
.pkv4u-rueckweg[hidden] { display: none; }
.pkv4u-rueckweg__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: #FFFFFF; }
.pkv4u-rueckweg .pkv4u-rueckweg__btn {
	/* doppelte Klasse: schlaegt den Hello-Reset [type=button]{color:#c36} */
	padding: 9px 18px; border-radius: 0; border: 1px solid #E0C097; background: #E0C097; color: #0C1C2B;
	font-family: Montserrat, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pkv4u-rueckweg .pkv4u-rueckweg__btn:hover,
.pkv4u-rueckweg .pkv4u-rueckweg__btn:focus { background: #B8974E; border-color: #B8974E; color: #0C1C2B; }
.pkv4u-rueckweg .pkv4u-rueckweg__btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.pkv4u-rueckweg__fallback { flex-basis: 100%; margin: 0; text-align: center; font-size: 12.5px; color: #E0C097; }

/* 2026-09-25 — Danke-Seite /anfrage-erhalten/ (template-anfrage-erhalten.php).
   Gleiche Typografie/Farben wie Rechtstexte und Wissensartikel. Reihenfolge
   laut Victor-Konzept: kurze Bestaetigung, dann sofort Terminoption. */
body.page-template-template-anfrage-erhalten { background: #FAF8F4 !important; }
.pkv4u-anfrage {
	max-width: 820px; margin: 0 auto; padding: 64px 24px 96px 24px; box-sizing: border-box;
	font-family: Montserrat, sans-serif; color: #2E3E4B; font-size: 15px; line-height: 1.7;
}
.pkv4u-anfrage__eyebrow {
	font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #88663A; margin: 0 0 14px 0;
}
.pkv4u-anfrage__title {
	font-family: 'Playfair Display', serif; font-weight: 400; font-size: 38px; line-height: 1.18;
	letter-spacing: -0.01em; color: #0C1C2B; margin: 0 0 22px 0; padding-bottom: 22px; position: relative;
}
.pkv4u-anfrage__title::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: #E0C097;
}
.pkv4u-anfrage__lead { font-size: 16px; color: #5C6C78; margin: 0 0 44px 0; }
.pkv4u-anfrage h2 {
	font-family: 'Playfair Display', serif; font-weight: 400; font-size: 25px; line-height: 1.3; color: #0C1C2B; margin: 0 0 12px 0;
}
.pkv4u-anfrage p { margin: 0 0 12px 0; }
.pkv4u-anfrage__termin {
	background: #FFFFFF; border: 1px solid rgba(12, 28, 43, 0.12); border-top: 3px solid #0C1C2B;
	padding: 32px; margin: 0 0 32px 0;
}
.pkv4u-anfrage__hinweis { font-size: 13.5px; color: #5C6C78; }
.pkv4u-anfrage__kalender { margin: 22px 0 0 0; }
.pkv4u-anfrage .pkv4u-anfrage__button,
.pkv4u-anfrage .pkv4u-anfrage__button:focus {
	display: inline-block; background: #0C1C2B; color: #FFFFFF; border: 0; border-radius: 2px;
	font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
	padding: 16px 28px; cursor: pointer; min-height: 48px;
}
.pkv4u-anfrage .pkv4u-anfrage__button:hover { background: #1F3346; color: #FFFFFF; }
.pkv4u-anfrage__button:focus-visible,
.pkv4u-anfrage a:focus-visible { outline: 3px solid #E0C097; outline-offset: 3px; }
.pkv4u-anfrage__datenschutz { font-size: 12.5px; color: #5C6C78; margin: 14px 0 0 0; }
.pkv4u-anfrage a { color: #0C1C2B; text-decoration: none; border-bottom: 1px solid #E0C097; }
.pkv4u-anfrage a:hover { color: #88663A; }
.pkv4u-anfrage__iframe { display: block; width: 100%; height: 1150px; border: 0; }
.pkv4u-anfrage__extern { font-size: 13px; margin: 18px 0 0 0; }
.pkv4u-anfrage__ohne-termin { padding: 0 32px; margin: 0 0 40px 0; }
.pkv4u-anfrage__video video { width: 100%; height: auto; background: #0C1C2B; }
.pkv4u-anfrage__zurueck { font-size: 13.5px; margin-top: 40px; }
@media (max-width: 700px) {
	.pkv4u-anfrage { padding: 40px 16px 72px 16px; }
	.pkv4u-anfrage__title { font-size: 29px; }
	.pkv4u-anfrage__termin { padding: 22px 16px; }
	.pkv4u-anfrage__kalender.is-geladen { margin-left: -16px; margin-right: -16px; }
	.pkv4u-anfrage__iframe { height: 1500px; }
	.pkv4u-anfrage .pkv4u-anfrage__button { width: 100%; }
	.pkv4u-anfrage__ohne-termin { padding: 0; }
}
/* 2026-09-25 — Gesprächspräferenz (freiwillig) auf /anfrage-erhalten/. */
.pkv4u-anfrage__praeferenz {
	border: 1px solid rgba(12, 28, 43, 0.12); background: #FFFFFF; padding: 26px 32px; margin: 0 0 24px 0;
}
.pkv4u-anfrage__praeferenz h2 { font-size: 21px; }
.pkv4u-anfrage__gp-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; }
.pkv4u-anfrage .pkv4u-anfrage__link-button,
.pkv4u-anfrage .pkv4u-anfrage__link-button:hover,
.pkv4u-anfrage .pkv4u-anfrage__link-button:focus {
	background: none; border: 0; border-bottom: 1px solid #E0C097; border-radius: 0; padding: 4px 0; min-height: 44px;
	color: #0C1C2B; font-family: Montserrat, sans-serif; font-size: 14px; cursor: pointer;
}
.pkv4u-anfrage__link-button:focus-visible { outline: 3px solid #E0C097; outline-offset: 3px; }
.pkv4u-anfrage__gp-form fieldset { border: 0; padding: 0; margin: 18px 0 0 0; }
.pkv4u-anfrage__gp-form legend { font-weight: 600; color: #0C1C2B; margin-bottom: 8px; padding: 0; }
.pkv4u-anfrage__gp-form label {
	display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 6px 0;
	border: 1px solid rgba(12, 28, 43, 0.12); cursor: pointer; font-size: 14px; line-height: 1.5;
}
.pkv4u-anfrage__gp-form label:has(input:checked) { border-color: #0C1C2B; background: #FAF8F4; }
.pkv4u-anfrage__gp-form input[type="radio"] { margin-top: 4px; accent-color: #0C1C2B; }
.pkv4u-anfrage__gp-form .pkv4u-anfrage__button { margin-top: 18px; }
.pkv4u-anfrage__gp-danke { font-weight: 600; color: #0C1C2B; margin-top: 12px; }
@media (max-width: 700px) { .pkv4u-anfrage__praeferenz { padding: 22px 16px; } }

/* 2026-09-28 (Freigabe Dirk nach GMLE): Nachfrage-Modul V1 „Frage einreichen“
   (inc/pkv4u-nachfrage.php). Grundgestaltung fuer dunklen Grund (/wissen/,
   Startseite), Variante --hell fuer Wissensartikel. Gold nur als Linie bzw.
   Senden-Button wie Hauptbutton; nativ details/summary, kein JavaScript.
   Die Startseite (Golden-Master-Template) traegt dieselben Regeln im eigenen
   <style>-Block, da sie style.css nicht laedt. */
.pkv4u-frage{margin:40px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,0.16);font-family:Montserrat,sans-serif}
.pkv4u-frage__details>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;padding:4px 0}
.pkv4u-frage__details>summary::-webkit-details-marker{display:none}
.pkv4u-frage__details>summary:focus-visible{outline:2px solid #E0C097;outline-offset:4px}
.pkv4u-frage__titel{font-family:'Playfair Display',serif;font-size:22px;line-height:1.3;color:#FFFFFF;margin:0}
.pkv4u-frage__aktion{font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#FFFFFF;border-bottom:1.5px solid #E0C097;padding-bottom:5px}
.pkv4u-frage__details[open] .pkv4u-frage__aktion{color:#E0C097}
.pkv4u-frage__form{max-width:760px;margin:18px 0 0}
.pkv4u-frage__intro{font-size:15px;line-height:1.7;color:#DCE2E6;margin:0 0 18px}
.pkv4u-frage__label{display:block;font-size:14px;font-weight:600;color:#FFFFFF;margin:0 0 8px}
.pkv4u-frage__text{display:block;width:100%;box-sizing:border-box;min-height:120px;padding:14px 16px;font-family:Montserrat,sans-serif;font-size:15px;line-height:1.6;color:#FFFFFF;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.35);border-radius:0;resize:vertical}
.pkv4u-frage__text:focus{outline:2px solid #E0C097;outline-offset:2px;border-color:#E0C097}
.pkv4u-frage__hinweis{font-size:13px;line-height:1.6;color:#B9C3CA;margin:10px 0 18px}
.pkv4u-frage__hinweis a,.pkv4u-frage__vorcheck a{color:inherit;text-decoration:underline;text-decoration-color:#E0C097;text-underline-offset:3px}
.pkv4u-frage__falle{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.pkv4u-frage__senden{display:inline-flex;align-items:center;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:#0C1C2B;background:#E0C097;border:0;border-radius:0;padding:16px 30px;cursor:pointer;transition:background 200ms ease}
.pkv4u-frage__senden:hover{background:#B8974E}
.pkv4u-frage__senden:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.pkv4u-frage__fehler{font-size:14px;line-height:1.6;color:#F0C2A8;margin:0 0 14px}
.pkv4u-frage__danke{border-left:2px solid #E0C097;padding:18px 22px;background:rgba(255,255,255,0.04);color:#DCE2E6;font-size:15px;line-height:1.7;max-width:760px}
.pkv4u-frage__danke p{margin:0 0 10px}
.pkv4u-frage__danke p:last-child{margin-bottom:0}
.pkv4u-frage__vorcheck{font-size:14px}
.pkv4u-frage__vorcheck a{font-weight:600;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.pkv4u-frage__senden{transition:none}}
@media (max-width: 767px){.pkv4u-frage{margin-top:30px}.pkv4u-frage__titel{font-size:20px}.pkv4u-frage__senden{width:100%;justify-content:center}.pkv4u-frage__vorcheck a{white-space:normal}}
.pkv4u-frage--hell{border-top-color:rgba(12,28,43,0.14)}
.pkv4u-frage--hell .pkv4u-frage__titel{color:#0C1C2B}
.pkv4u-frage--hell .pkv4u-frage__aktion{color:#0C1C2B}
.pkv4u-frage--hell .pkv4u-frage__details[open] .pkv4u-frage__aktion{color:#88663A}
.pkv4u-frage--hell .pkv4u-frage__intro{color:#3F4E5A}
.pkv4u-frage--hell .pkv4u-frage__label{color:#0C1C2B}
.pkv4u-frage--hell .pkv4u-frage__text{color:#0C1C2B;background:#FFFFFF;border-color:rgba(12,28,43,0.35)}
.pkv4u-frage--hell .pkv4u-frage__hinweis{color:#5C6C78}
.pkv4u-frage--hell .pkv4u-frage__senden:focus-visible{outline-color:#0C1C2B}
.pkv4u-frage--hell .pkv4u-frage__fehler{color:#9B3B2A}
.pkv4u-frage--hell .pkv4u-frage__danke{background:#FAF8F4;color:#3F4E5A}
.pkv4u-frage--hell .pkv4u-frage__danke .pkv4u-frage__titel{color:#0C1C2B}

/* Nachfrage-Modul: Eltern-Theme setzt fuer button/[type=submit] Rahmen und
   Farbe (#c36) mit gleicher Spezifitaet, daher hier doppelt verankert. */
.pkv4u-frage .pkv4u-frage__senden,
.pkv4u-frage .pkv4u-frage__senden:hover,
.pkv4u-frage .pkv4u-frage__senden:focus {
	color: #0C1C2B;
	background: #E0C097;
	border: 0;
	border-radius: 0;
}
.pkv4u-frage .pkv4u-frage__senden:hover {
	background: #B8974E;
}
.pkv4u-frage {
	scroll-margin-top: 24px;
}

/* 2026-09-28 (Dirk): Mobile Kopfzeile oben angeheftet, damit Startseite und
   Menue in langen Wissensartikeln ohne Hochscrollen erreichbar sind. Beim
   Lesen nach unten gleitet sie weg, beim Wischen nach oben kommt sie zurueck
   (Klasse "is-versteckt" aus assets/js/pkv4u-kb-nav-toggle.js). Geoeffnetes
   Menue bleibt immer sichtbar. Bei "Bewegung reduzieren" ohne Gleiten. */
/* 2026-09-28 (Dirk: "geht das auch in der Desktopvariante?"): gilt jetzt
   fuer alle Breiten, nicht mehr nur mobil. */
.pkv4u-kb-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: transform 0.25s ease;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pkv4u-kb-header.is-versteckt:not(.is-open) {
	transform: translateY(-100%);
}
/* 2026-10-07 (Dirk): Auf dem Handy bleibt die Kopfzeile immer stehen (Weg zur Startseite und zum Menue auch
   beim Lesen, auch im Reformkompass). Das Wegschieben beim Runterscrollen gilt nur noch am Desktop. */
@media (max-width: 900px) {
	.pkv4u-kb-header.is-versteckt:not(.is-open) {
		transform: none;
	}
}
/* Angemeldet: WordPress-Adminleiste (fest oben ab 783 px) nicht verdecken. */
@media (min-width: 783px) {
	body.admin-bar .pkv4u-kb-header { top: 32px; }
}
@media (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .pkv4u-kb-header { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.pkv4u-kb-header { transition: none; }
}

/* 2026-09-28 (Dirk): Zurueck-Pfeil in der angehefteten mobilen Kopfzeile
   (erzeugt von assets/js/pkv4u-kb-nav-toggle.js), seit 2026-09-28 auch am Desktop. */
.pkv4u-kb-header__zurueck { display: none; }
@media all {
	.pkv4u-kb-header__zurueck {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 36px;
		height: 36px;
		margin-right: -6px;
		border: 1px solid rgba(224, 192, 151, 0.55);
		border-radius: 50%;
		color: #E0C097;
		font-size: 18px;
		line-height: 1;
		text-decoration: none;
	}
	.pkv4u-kb-header__zurueck:focus-visible { outline: 2px solid #E0C097; outline-offset: 2px; }
}
/* Pfeil und Logo als Gruppe links, Navigation rechts (die Kopfzeile verteilt
   ihre Elemente mit space-between; ohne diese Regel rutscht das Logo weg). */
.pkv4u-kb-header__inner:has(> .pkv4u-kb-header__zurueck) > .pkv4u-kb-header__logo { margin-right: auto; }
@media (min-width: 768px) {
	.pkv4u-kb-header__zurueck { margin-right: -14px; }
}

/* 2026-10-06, Dirk: Pruefschritte auf /kompass/ sind jetzt den Instrumenten zugeordnet und verlinkt.
   Links dezent erkennbar machen (goldene gestrichelte Linie, Hover dunkelblau), ohne die Optik der Liste zu veraendern. */
.pkv4u-kompass-schritte a {
	color: inherit;
	text-decoration: underline dotted #E0C097;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 6px;
}
.pkv4u-kompass-schritte a:hover,
.pkv4u-kompass-schritte a:focus-visible {
	color: #0C1C2B;
	text-decoration-style: solid;
}
.pkv4u-kompass-schritte a:focus-visible {
	outline: 2px solid #88663A;
	outline-offset: 3px;
}

/* 2026-10-06 (Dirk): kein Hello-Rot (#c36) beim Anklicken. Systemvergleich-Schalter auf der Startseite: Navy-Ton statt Rot. */
.pkv4u-sv-trigger:hover, .pkv4u-sv-trigger:focus, .pkv4u-sv-trigger:active,
.pkv4u-sv-deep-trigger:hover, .pkv4u-sv-deep-trigger:focus, .pkv4u-sv-deep-trigger:active { background-color: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.pkv4u-sv-deep-trigger:hover, .pkv4u-sv-deep-trigger:focus, .pkv4u-sv-deep-trigger:active { color: #E0C097; background-color: transparent; }

/* 2026-10-12 (Auftrag 2 / F05): Sprungziele von Hash-Aufrufen (Fragen-Navigator, Fuer-wen-Akkordeon) liegen nicht unter der angehefteten Kopfzeile. */
#fragen, .pkv4u-fn__cluster, .pkv4u-fn__frage, details[id] { scroll-margin-top: 96px; }

/* 2026-10-12 (Auftrag 2 / F05): Elementors Frontend-CSS setzt html{scroll-behavior:smooth}. Damit scrollt jeder Hash-Sprung "auto" langsam
   und Chrome stellt bei Zurueck/Vor die Scrollposition nicht wieder her (getestet). Auf den Portalseiten bleibt das Springen sofort;
   gewollt sanftes Scrollen (Inhaltsverzeichnis) fordern die Skripte ausdruecklich per behavior:'smooth' an. */
html:root { scroll-behavior: auto; }

/* 2026-10-21 (Usercheck Mobil): Tablet und Handy quer (768 bis 1023 px). Mit der Position "Reformen" stapelte sich die Kopfzeile auf bis zu 210 px
   (Logo, Navigation, Suche und Knopf untereinander). Ab hier dieselbe Lösung wie am Handy: Navigation hinter dem Menü-Knopf, Knopf bleibt sichtbar. */
@media (min-width: 768px) and (max-width: 1023px) {
	/* AP1 2026-09-22 (Codex D02 / eigener Befund A-1): Logo + vollstaendig
	   ausgeschriebene Navigation verdraengten gemeinsam den ersten
	   Bildschirm. Ab hier: Navigation hinter einem Hamburger-Button,
	   "Beratung" bleibt als eigener CTA sichtbar. Sichtbarkeit ausschliesslich
	   ueber die Klasse ".is-open" (pkv4u-kb-nav-toggle.js), kein natives
	   <details> (siehe Begruendung beim Markup in pkv4u-knowledge-binding.php). */
	.pkv4u-kb-header__inner {
		flex-wrap: nowrap;
		gap: 16px;
	}
	/* hello-elementor/assets/css/reset.css laedt NACH diesem Stylesheet und
	   setzt fuer "button:hover"/"button:focus" eigens background-color:#c36
	   -- exakt dieselbe Spezifitaet wie ".pkv4u-kb-header__nav-toggle" im
	   Ruhezustand, reset.css gewinnt sonst bei :hover/:focus (per Live-Test
	   bestaetigt: sichtbarer pinker Kasten nach Klick). Deshalb hier
	   durchgaengig !important statt eines aussichtslosen Spezifitaetswettlaufs
	   gegen jeden moeglichen Status. */
	button.pkv4u-kb-header__nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: none !important;
		background: none !important;
		color: inherit !important;
		cursor: pointer;
	}
	button.pkv4u-kb-header__nav-toggle:focus-visible {
		outline: 2px solid #E0C097;
		outline-offset: 2px;
	}
	.pkv4u-kb-header__nav-burger,
	.pkv4u-kb-header__nav-burger::before,
	.pkv4u-kb-header__nav-burger::after {
		display: block;
		width: 22px;
		height: 2px;
		background: #FFFFFF;
	}
	.pkv4u-kb-header__nav-burger {
		position: relative;
	}
	.pkv4u-kb-header__nav-burger::before,
	.pkv4u-kb-header__nav-burger::after {
		content: "";
		position: absolute;
		left: 0;
	}
	.pkv4u-kb-header__nav-burger::before {
		top: -7px;
	}
	.pkv4u-kb-header__nav-burger::after {
		top: 7px;
	}
	/* AP1 2026-09-22 (Phase 1, Hero-Nav): zusaetzlich zur Klasse ".pkv4u-kb-header"
	   auch das scope-neutrale Datenattribut ansprechen, siehe
	   pkv4u-kb-nav-toggle.js -- wird von der Golden-Master-Hero-Navigation
	   verwendet, die NICHT die Klasse ".pkv4u-kb-header" traegt (deren
	   background-/padding-Regeln wuerden die Hero-Flaeche stoeren). */
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav-burger,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav-burger {
		background: transparent;
	}
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav-burger::before,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav-burger::before {
		top: 0;
		transform: rotate(45deg);
	}
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav-burger::after,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav-burger::after {
		top: 0;
		transform: rotate(-45deg);
	}
	/* AP1 2026-09-22 (Phase 1, Hero-Nav): !important auf display/position noetig,
	   weil die Golden-Master-Hero-Navigation ihr eigenes inline
	   style="display:flex; ..." traegt (Original-Markup unveraendert erhalten,
	   siehe parts/golden-master-desktop.html) -- ein Inline-Style schlaegt eine
	   externe Klassenregel ohne !important immer, unabhaengig vom Breakpoint. */
	.pkv4u-kb-header__nav {
		display: none !important;
		position: absolute !important;
		top: 100%;
		right: 0;
		left: 0;
		margin: 0;
		padding: 20px;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px;
		background: #0C1C2B;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
		z-index: 40;
	}
	.pkv4u-kb-header.is-open .pkv4u-kb-header__nav,
	[data-pkv4u-nav-scope].is-open .pkv4u-kb-header__nav {
		display: flex !important;
	}
	.pkv4u-kb-header__nav .pkv4u-kb-header__search {
		width: 100%;
	}
	.pkv4u-kb-header__nav .pkv4u-kb-header__search input[type="search"] {
		width: 100%;
		flex: 1 1 auto;
	}
	.pkv4u-kb-header { padding: 14px 24px; }
}