/* =============================================================
   app.css — Hauptstylesheet
   Greift unter body.layout-v2 (Namespace-Klasse fuer alle .v2-*
   Selektoren). Tokens aus Hereditas Konzept v9 (_scratch/v9.html).
   ============================================================= */

body.layout-v2 {
	--magenta:#840e71;
	--magenta-deep:#5e0a51;
	--magenta-tint:#f5e8f1;
	--magenta-soft:#ead7e3;
	--green:#6b9b3a;
	--green-deep:#4d7228;
	--orange:#e8762a;
	--orange-deep:#c75e15;
	--ink:#1a1714;
	--ink-2:#3a342f;
	--ink-3:#6a625a;
	--ink-4:#9a9189;
	--ink-5:#c9c1b8;
	--paper:#fbf9f5;
	--rule:#e6e1d9;
	--rule-2:#f0ece4;

	--sans:'IBM Plex Sans',system-ui,sans-serif;
	--serif:'IBM Plex Serif',Georgia,serif;
	--mono:'IBM Plex Mono',ui-monospace,monospace;

	/* Typografische Skala — 7 Stufen, sonst nichts.
	   Anker: --fs-md (18px Content-Body). */
	--fs-xxl:40px;  /* Hero H1 */
	--fs-xl:28px;   /* Section H2 */
	--fs-lg:21px;   /* H3, prominente Titel, Lead */
	--fs-md:18px;   /* Body Content (Anker) */
	--fs-sm:16px;   /* Card-Body, Form, sekundaerer Text */
	--fs-xs:14px;   /* Meta, Labels, kleine Hinweise */
	--fs-xxs:12px;  /* Eyebrow (uppercase), Captions */

	/* Button-Tokens — EINE einheitliche Groesse fuer alle CTAs. Kein
   Primary/Compact-Split mehr; das System ist visuell konsistenter. */
	--btn-h:        44px;
	--btn-h-sm:     44px;
	--btn-pad:      0 22px;
	--btn-pad-sm:   0 18px;          /* nur Padding etwas kuerzer fuer enge Kontexte */
	--btn-fs:       var(--fs-sm);
	--btn-fs-sm:    var(--fs-sm);
	--btn-radius:   6px;
	--btn-weight:   700;
	--btn-weight-sm:700;

	/* Layout-Tokens (Phase 1+ kommen drauf) */
	--col-toc:240px;
	--col-dock:400px;
	--stage-max:1800px;
	--bp-tablet:1280px;
	--bp-mobile:1024px;
}

/* ============================================================
   EINHEITLICHE BUTTON-ICONS
   - Newsletter, Kommentar, KI-Stage, Herbert nutzen icon-font Icons
     (chevron-circle / talk-chat-2). Diese vereinheitlichen wir auf
     EIN Symbol: rightwards arrow per CSS-::after.
   - Wegweiser-Hero (SVG), Sidebar/Mobile-Strip/Autor (Unicode →)
     bekommen denselben Pfeil per ::after — bestehende inline-Arrows
     werden hier nicht angerührt, weil sie schon konsistent sind.
   ============================================================ */
body.layout-v2 .info-box-contrast-dark .cta-submit-orange i,
body.layout-v2 .v2-comments button[type="submit"] i,
body.layout-v2 .v2-comments .cta-color100 i,
body.layout-v2 .v2-prose #kisuche .cta-submit-orange i {
	display:none !important;
}
/* Herbert-Button behaelt sein Chat-Icon — gleiche Button-Optik (orange,
   compact), aber semantisch passender Chat-Indikator statt Pfeil. */
body.layout-v2 .v2-card-body-herbert #kiSubmitBtn i,
body.layout-v2 .v2-card-body-herbert .cta-submit-orange i {
	display:inline-block !important;
	margin-left:6px;
	font-size:1.05em;
}
body.layout-v2 .info-box-contrast-dark .cta-submit-orange::after,
body.layout-v2 .v2-comments button[type="submit"]::after,
body.layout-v2 .v2-comments .cta-color100::after,
body.layout-v2 .v2-prose #kisuche .cta-submit-orange::after,
body.layout-v2 .v2-wegweiser-hero-cta::after,
body.layout-v2 .v2-wegweiser-side-cta::after,
body.layout-v2 .v2-wegweiser-mstrip-cta::after,
body.layout-v2 .v2-author-bottom-cta::after {
	content:" \203A";     /* single right-pointing angle quote (U+203A) — modern, tight */
	display:inline-block;
	margin-left:8px;
	font-weight:700;
	font-size:1.15em;
	line-height:1;
	transition:transform 0.15s;
}
body.layout-v2 .info-box-contrast-dark .cta-submit-orange:hover::after,
body.layout-v2 .v2-comments button[type="submit"]:hover::after,
body.layout-v2 .v2-comments .cta-color100:hover::after,
body.layout-v2 .v2-prose #kisuche .cta-submit-orange:hover::after,
body.layout-v2 .v2-wegweiser-hero:hover .v2-wegweiser-hero-cta::after,
body.layout-v2 .v2-wegweiser-side:hover .v2-wegweiser-side-cta::after,
body.layout-v2 .v2-wegweiser-mstrip:hover .v2-wegweiser-mstrip-cta::after,
body.layout-v2 .v2-author-bottom-cta:hover::after {
	transform:translateX(3px);
}

/* =============================================================
   Phase 1.1 — 3-Spalter-Skelett
   ============================================================= */

/* Schrift global tauschen — und v1's body.loading {opacity:0}-Trick neutralisieren
   (mmenu entfernte loading-Klasse normalerweise, in v2 wird mmenu nicht initialisiert).
   Plus harter Margin/Padding-Reset oben — verhindert 20-30px-Spalt waehrend Page-Load. */
/* Overscroll-Behavior: kein Rubber-Band/Bounce am Top/Bottom.
   overflow-anchor BEWUSST nicht deaktiviert — Chrome's Scroll-Anchor
   stabilisiert die sichtbare Position bei Layout-Shifts. Ohne ihn
   "zittert" die Seite bei dynamischen Hoehen-Aenderungen. */
html:has(body.layout-v2),
body.layout-v2 {
	margin:0 !important;
	padding:0 !important;
	overflow-x:clip;
	overscroll-behavior:none;
}
html.layout-v2-active {
	overscroll-behavior:none !important;
}

/* v1 Modal-Overlay: modal.js injected die CSS erst auf DOMContentLoaded.
   Bis dahin rendern die zwei Overlay-Divs als Block und nehmen Layout-Platz
   (~ 20-30px Spalt oben). Hier vorab fixed positionieren, sodass der Render
   ab erstem Frame schon stimmt. KEINE opacity/pointer-events hier setzen —
   das macht modal.js zustandsabhaengig. */
body.layout-v2 .overlay {
	position:fixed !important;
	top:0 !important;
	left:0 !important;
	width:100%;
	height:100%;
	z-index:100000;
}
body.layout-v2 .overlay.overlayhidden {
	display:none !important;
}
/* Sicherheitsnetz: wenn modal.js die .visible setzt, MUSS das Overlay
   sichtbar sein — auch falls v1-CSS-Reste opacity:0 vererben. */
body.layout-v2 .overlay.visible {
	opacity:1 !important;
	pointer-events:auto !important;
}
/* In v2: Overlay-Backdrop deckt die GANZE Seite mit Grauschleier ab —
   inklusive TOC, Herbert, Navbar. Das ist Standard-Modal-Verhalten:
   Fokus aufs Modal, Rest der Seite gedimmt. */
body.layout-v2 .overlay {
	background-color:rgba(20,16,12,0.5) !important;
}
/* WICHTIG: modal-no-scroll setzt overflow:hidden auf html+body. Das macht
   position:sticky in Elementen unwirksam — TOC und Herbert springen aus
   ihrer geklebten Top-Position zurueck in den DOM-Flow (= unsichtbar wenn
   User runtergescrollt war). In v2 ueberschreiben wir das auf 'visible',
   damit die Sticky-Elemente ihre Position behalten — sie liegen dann
   gedimmt UNTER dem Overlay, springen aber nicht weg. */
html.modal-no-scroll,
body.layout-v2.modal-no-scroll {
	overflow:visible !important;
}
/* z-index-Stack bei offenem Modal — Standard-Hierarchie:
   100000 = Overlay-Backdrop (Grauschleier ueber ALLEM)
   100001 = Modal-Wrapper (klar im Vordergrund)
   100002 = Close-Button (immer klickbar)
   Page-Chrome (TOC/Herbert/Navbar) behaelt seinen normalen z-index und
   wird vom Schleier korrekt mit abgedunkelt. */
body.layout-v2 .modalWrapper {
	box-shadow:0 12px 40px -8px rgba(40,30,20,0.35) !important;
	z-index:100001 !important;
	max-width:min(900px, calc(100vw - 64px)) !important;
}
body.layout-v2 .modalCloseButton,
body.layout-v2 #closeModalBtn {
	z-index:100002 !important;
}
body.layout-v2 {
	font-family:var(--sans);
	background:var(--ink); /* Aussenbereich neben der Stage-Spalte */
	color:var(--ink-2);
	/* Einheitliches Page-Padding: Navbar, Crumbs, Hero, v2-Body benutzen
	   alle var(--page-pad) damit linke + rechte Kanten exakt fluchten. */
	--page-pad:32px;
}
@media (max-width:1023px) {
	body.layout-v2 { --page-pad:20px; }
}
@media (max-width:639px) {
	body.layout-v2 { --page-pad:16px; }
}
/* Mobile-Tabs nur auf <880px sichtbar — Desktop hidden */
body.layout-v2 .v2-mtabs {
	display:none;
}
body.layout-v2 #my-page {
	margin-top:0 !important;
	padding-top:0 !important;
}
body.layout-v2 main {
	margin-top:0 !important;
	padding-top:0 !important;
}

body.layout-v2 h1,
body.layout-v2 h2,
body.layout-v2 h3 {
	font-family:var(--serif);
	letter-spacing:-0.005em;
}

/* Aeusserer <footer> (vgwort-Tracker direkt nach <main>) verstecken —
   der Footer ist DOM-relevant fuer das Tracking-Pixel, optisch aber leer. */
body.layout-v2 #my-page > footer,
body.layout-v2 main + footer {
	display:none !important;
}

/* v2-Shell-Container: zentriert mit Stage-Breite. Shell liefert das Paper-BG,
   damit alles INNERHALB der Stage-Spalte hell ist und der Body-Background
   nur als dunkler Rahmen daneben sichtbar wird (nur > 1800px Viewport). */
body.layout-v2 .v2-shell {
	max-width:var(--stage-max);
	margin:0 auto;
	padding:0;
	background:var(--paper);
}

/* ---------- Topbar v2 (sticky am Top, ueber der Navbar) ----------
   Feste Hoehe damit die Navbar (top:36) exakt darunter sitzt — kein Pixel-Slip. */
.v2-topbar {
	background:var(--magenta);
	color:#fff;
	padding:0 32px;
	height:36px;
	display:flex;
	align-items:center;
	gap:14px;
	font-size:14px;
	font-family:var(--sans);
	position:sticky;
	top:0;
	z-index:99;
}
.v2-topbar-pulse {
	width:7px;
	height:7px;
	border-radius:50%;
	background:#7fd99b;
	box-shadow:0 0 0 0 rgba(127,217,155,0.7);
	animation:v2-pulse 2s infinite;
	flex-shrink:0;
}
@keyframes v2-pulse {
	0%   { box-shadow:0 0 0 0 rgba(127,217,155,0.7); }
	70%  { box-shadow:0 0 0 8px rgba(127,217,155,0); }
	100% { box-shadow:0 0 0 0 rgba(127,217,155,0); }
}
.v2-topbar-text {
	flex:1;
}
.v2-topbar-cta {
	color:#fff !important;
	background:rgba(255,255,255,0.18);
	padding:4px 12px;
	border-radius:99px;
	text-decoration:none !important;
	font-weight:500 !important;
	white-space:nowrap;
	font-size:14px;
}
.v2-topbar-cta:hover {
	background:rgba(255,255,255,0.3);
	opacity:1 !important;
}

/* ---------- Navbar v2 (sticky unter Topbar, Auto-Hide bei Scroll-Down) ----------
   Bewusst defensiv mit !important — site.css setzt globale a/img-Regeln
   die sonst die Optik kapern (z. B. font-weight 600 auf alle a). */
body.layout-v2 .v2-navbar {
	background:#fff !important;
	padding:8px var(--page-pad) !important;
	display:flex !important;
	align-items:center !important;
	gap:24px !important;
	border-bottom:1px solid var(--rule);
	min-height:54px;
	position:sticky;
	top:0;
	z-index:99;
	transition:transform 0.25s ease;
}
/* Auto-Hide: bei scroll-down klappt die Navbar weg, Topbar bleibt sichtbar */
body.layout-v2.v2-nav-unpinned .v2-navbar {
	transform:translateY(-100%);
}
body.layout-v2 .v2-navbar-brand {
	flex-shrink:0;
	display:flex;
	align-items:center;
}
body.layout-v2 .v2-navbar-brand > a {
	display:inline-flex !important;
	align-items:center;
	border:0 !important;
	opacity:1 !important;
	padding:0 !important;
	background:transparent !important;
}
body.layout-v2 .v2-navbar-brand img {
	display:block !important;
	height:38px !important;
	width:auto !important;
	max-width:none !important;
	border:0 !important;
	opacity:1 !important;
	padding:0 !important;
	margin:0 !important;
	border-radius:0 !important;
}
body.layout-v2 .v2-nav-links {
	flex:1 1 auto !important;
	display:flex !important;
	gap:2px !important;
	font-family:var(--sans) !important;
	font-size:14px !important;
	font-weight:500 !important;
	flex-wrap:nowrap !important;     /* KEIN 2-Zeilen-Zustand — entweder 1 Zeile oder Burger */
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
	align-items:center;
	overflow:visible;                /* damit Items hinausragen koennen vor dem Burger-Switch */
}
/* Sektion + Flyout-Wrapper */
body.layout-v2 .v2-nav-item {
	position:relative;
}
body.layout-v2 .v2-nav-top {
	display:inline-flex !important;
	align-items:center;
	gap:5px;
	color:var(--ink-2) !important;
	text-decoration:none !important;
	padding:6px 12px !important;
	border-radius:4px !important;
	font-weight:500 !important;
	white-space:nowrap !important;
	opacity:1 !important;
	border:0 !important;
	background:transparent;
	font-size:14px !important;
	transition:background 0.15s, color 0.15s;
}
body.layout-v2 .v2-nav-item:hover > .v2-nav-top,
body.layout-v2 .v2-nav-top:focus {
	background:var(--magenta-tint) !important;
	color:var(--magenta) !important;
}
body.layout-v2 .v2-nav-top.is-active {
	background:var(--magenta) !important;
	color:#fff !important;
}
body.layout-v2 .v2-nav-chev {
	transition:transform 0.15s;
}
body.layout-v2 .v2-nav-item:hover .v2-nav-chev {
	transform:rotate(180deg);
}

/* Flyout — KEIN Scrollbar (kein max-height, kein overflow).
   overflow:visible damit Ebene-3-Submenu nach rechts aus dem Parent
   fliegen kann ohne geclippt zu werden. */
body.layout-v2 .v2-nav-sub {
	position:absolute;
	top:100%;
	left:0;
	min-width:280px;
	max-width:360px;
	background:#fff;
	border:1px solid var(--rule);
	border-radius:6px;
	box-shadow:0 12px 32px -10px rgba(40,30,20,0.25);
	padding:6px;
	opacity:0;
	transform:translateY(4px);
	pointer-events:none;
	visibility:hidden;
	transition:opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
	z-index:1000;
	display:flex;
	flex-direction:column;
	gap:1px;
	overflow:visible;
}
body.layout-v2 .v2-nav-item:hover .v2-nav-sub,
body.layout-v2 .v2-nav-item:focus-within .v2-nav-sub {
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
	visibility:visible;
	transition-delay:0s;
}
body.layout-v2 .v2-nav-sub a {
	display:block !important;
	padding:8px 12px !important;
	font-family:var(--serif) !important;
	font-size:16px !important;
	color:var(--ink-2) !important;
	text-decoration:none !important;
	font-weight:400 !important;
	border-radius:4px;
	border:0 !important;
	opacity:1 !important;
	white-space:normal !important;
	line-height:1.35;
}
/* Ebene2 als geschachteltes Submenue (oeffnet seitlich) */
body.layout-v2 .v2-nav-sub-item {
	position:relative;
}
body.layout-v2 .v2-nav-sub-label {
	display:flex !important;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:8px 12px !important;
	font-family:var(--serif) !important;
	font-size:16px !important;
	color:var(--ink-2) !important;
	font-weight:500 !important;
	border-radius:4px;
	cursor:default;
	line-height:1.35;
}
body.layout-v2 .v2-nav-sub-item:hover > .v2-nav-sub-label,
body.layout-v2 .v2-nav-sub-item:focus-within > .v2-nav-sub-label {
	background:var(--magenta-tint);
	color:var(--magenta) !important;
}
body.layout-v2 .v2-nav-sub-arrow {
	flex-shrink:0;
	opacity:0.7;
}
body.layout-v2 .v2-nav-nested {
	position:absolute;
	top:-6px;
	left:100%;
	min-width:280px;
	max-width:340px;
	background:#fff;
	border:1px solid var(--rule);
	border-radius:6px;
	box-shadow:0 12px 32px -10px rgba(40,30,20,0.25);
	padding:6px;
	opacity:0;
	transform:translateX(-4px);
	pointer-events:none;
	visibility:hidden;
	transition:opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
	z-index:1001;
	display:flex;
	flex-direction:column;
	gap:1px;
	margin-left:4px;
	overflow:visible;
}
body.layout-v2 .v2-nav-sub-item:hover > .v2-nav-nested,
body.layout-v2 .v2-nav-sub-item:focus-within > .v2-nav-nested {
	opacity:1;
	transform:translateX(0);
	pointer-events:auto;
	visibility:visible;
	transition-delay:0s;
}
body.layout-v2 .v2-nav-nested a {
	display:block !important;
	padding:8px 12px !important;
	font-family:var(--serif) !important;
	font-size:16px !important;
	color:var(--ink-2) !important;
	text-decoration:none !important;
	font-weight:400 !important;
	border-radius:4px;
	border:0 !important;
	opacity:1 !important;
	white-space:normal !important;
	line-height:1.35;
}
body.layout-v2 .v2-nav-nested a:hover {
	background:var(--magenta-tint) !important;
	color:var(--magenta) !important;
}
/* Flip-Logik: wenn Flyout/Nested ueber den Viewport-Rand schiessen wuerde,
   wird per JS .flip-sub bzw. .flip-nested gesetzt. */

/* Level-2-Flyout flippt rechts -> links: anker am rechten Rand des Items */
body.layout-v2 .v2-nav-item.flip-sub .v2-nav-sub {
	left:auto;
	right:0;
}

/* Level-3-Nested flippt rechts -> links: anker am linken Rand des Sub-Items */
body.layout-v2 .v2-nav-sub-item.flip-nested .v2-nav-nested {
	left:auto;
	right:100%;
	transform:translateX(4px);
	margin-left:0;
	margin-right:4px;
}
body.layout-v2 .v2-nav-sub-item.flip-nested:hover .v2-nav-nested,
body.layout-v2 .v2-nav-sub-item.flip-nested:focus-within .v2-nav-nested {
	transform:translateX(0);
}
body.layout-v2 .v2-nav-sub a:hover {
	background:var(--magenta-tint) !important;
	color:var(--magenta) !important;
}
/* "Ueberblick: XXX" als erster Eintrag im Flyout — gleicher Look wie
   die normalen Sub-Links, nur Magenta-Farbe als optisches Signal
   "Sektions-Wurzel". KEIN Separator/Border darunter, kein Extra-Abstand
   — sonst sitzt die Liste optisch in zwei Bloecken auseinander. */
body.layout-v2 .v2-nav-sub-overview {
	font-weight:600 !important;
	color:var(--magenta) !important;
}
body.layout-v2 .v2-nav-sub-overview:hover {
	background:var(--magenta-tint) !important;
	color:var(--magenta-deep, var(--magenta)) !important;
}
body.layout-v2 .v2-nav-tools {
	flex-shrink:0;
}
body.layout-v2 .v2-nav-herbert {
	display:inline-flex !important;
	align-items:center;
	gap:8px;
	padding:8px 14px !important;
	background:var(--magenta-tint) !important;
	border-radius:99px !important;
	color:var(--magenta) !important;
	font-family:var(--sans) !important;
	font-size:14px !important;
	font-weight:500 !important;
	text-decoration:none !important;
	opacity:1 !important;
	cursor:pointer;
	border:0 !important;
}
body.layout-v2 .v2-nav-herbert:hover {
	background:var(--magenta) !important;
	color:#fff !important;
}
body.layout-v2 .v2-nav-herbert svg {
	flex-shrink:0;
}
/* Hamburger-Button: oberhalb der schmalen Schwelle versteckt */
body.layout-v2 .v2-navbar-burger {
	display:none !important;
	background:transparent;
	border:0;
	padding:8px;
	cursor:pointer;
	flex-shrink:0;
	width:38px;
	height:38px;
	flex-direction:column;
	justify-content:center;
	gap:4px;
	align-items:center;
	border-radius:4px;
}
body.layout-v2 .v2-navbar-burger:hover { background:var(--rule-2); }
body.layout-v2 .v2-navbar-burger > span {
	display:block;
	width:20px;
	height:2px;
	background:var(--ink-2);
	border-radius:2px;
	transition:transform 0.2s, opacity 0.2s;
}
body.layout-v2 .v2-navbar.is-burger-open .v2-navbar-burger > span:nth-child(1) {
	transform:translateY(6px) rotate(45deg);
}
body.layout-v2 .v2-navbar.is-burger-open .v2-navbar-burger > span:nth-child(2) {
	opacity:0;
}
body.layout-v2 .v2-navbar.is-burger-open .v2-navbar-burger > span:nth-child(3) {
	transform:translateY(-6px) rotate(-45deg);
}

/* Mittel-schmale Schwelle: kleinere Nav-Padding, kleinere Schrift */
@media (max-width:1280px) {
	body.layout-v2 .v2-navbar { padding-top:12px !important; padding-bottom:12px !important; gap:14px !important; }
	body.layout-v2 .v2-nav-links { gap:0 !important; font-size:14px !important; }
	body.layout-v2 .v2-nav-top { padding:7px 10px !important; font-size:14px !important; }
}

/* Schmaler Viewport: Inline-Flyouts deaktivieren, Burger zeigt Drawer.
   Zwei Trigger:
   - Fallback Media-Query <1024 (falls JS nicht laeuft)
   - body.v2-nav-compact (JS misst ob Links wirklich reinpassen — eigener Breakpoint)
   Sobald einer triggert, Burger zeigen + Inline-Nav verstecken. */
@media (max-width:1023px) {
	body.layout-v2 .v2-navbar-burger {
		display:flex !important;
	}
	body.layout-v2 .v2-nav-links {
		display:none !important;
	}
}
body.layout-v2.v2-nav-compact .v2-navbar-burger {
	display:flex !important;
}
body.layout-v2.v2-nav-compact .v2-nav-links {
	display:none !important;
}

/* ============ MOBILE-DRAWER (slide-in von links) ============ */
body.layout-v2 .v2-drawer-backdrop {
	position:fixed;
	inset:0;
	background:rgba(15,12,8,0.5);
	z-index:298;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.25s ease;
}
body.layout-v2 .v2-drawer {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:86%;
	max-width:380px;
	background:#fff;
	z-index:299;
	transform:translateX(-100%);
	transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
	display:flex;
	flex-direction:column;
	box-shadow:0 0 32px rgba(0,0,0,0.18);
	overflow:hidden;
}
body.layout-v2.v2-drawer-open .v2-drawer-backdrop {
	opacity:1;
	pointer-events:auto;
}
body.layout-v2.v2-drawer-open .v2-drawer {
	transform:translateX(0);
}
/* Overflow:hidden nur wenn Drawer auch wirklich sichtbar ist.
   Sonst Risiko: wenn jemand Drawer aufgemacht hat und Viewport resized,
   bleibt overflow:hidden haengen und die Page laesst sich nicht mehr scrollen. */
@media (max-width:1023px) {
	body.layout-v2.v2-drawer-open {
		overflow:hidden;
	}
}
body.layout-v2.v2-nav-compact.v2-drawer-open {
	overflow:hidden;
}

body.layout-v2 .v2-drawer-head {
	flex-shrink:0;
	padding:14px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	border-bottom:1px solid var(--rule);
	background:var(--paper);
}
body.layout-v2 .v2-drawer-logo {
	height:34px;
	width:auto;
}
body.layout-v2 .v2-drawer-close {
	width:38px;
	height:38px;
	border:0;
	background:transparent;
	font-size:28px;
	line-height:1;
	color:var(--ink-3);
	cursor:pointer;
	border-radius:6px;
}
body.layout-v2 .v2-drawer-close:hover {
	background:var(--rule-2);
	color:var(--ink);
}

body.layout-v2 .v2-drawer-nav {
	flex:1 1 auto;
	min-height:50vh; /* Fallback: ohne explizite Hoehe kollabiert flex:auto in manchen Browsern */
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	padding:0;
	background:#fff;
	display:block;
	visibility:visible;
}
body.layout-v2 .v2-drawer-empty {
	padding:24px 16px;
	font-family:var(--sans);
	font-size:14px;
	color:var(--ink-4);
	text-align:center;
}
/* === Mobile-Nav Drill-Down (Accordion ueber <details>) ===
   Optisch analog zur Desktop-Nav: weisse Bg, ink-Text, Magenta nur als
   Akzent (Hover, [open]). Kein Volltonbalken. */
body.layout-v2 .v2-mnav-l1 {
	border-bottom:1px solid var(--rule-2);
}
body.layout-v2 .v2-mnav-l1:last-child {
	border-bottom:0;
}
body.layout-v2 .v2-mnav-l1 > summary,
body.layout-v2 .v2-mnav-l2 > summary {
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none !important;
}
body.layout-v2 .v2-mnav-l1 > summary::-webkit-details-marker,
body.layout-v2 .v2-mnav-l2 > summary::-webkit-details-marker { display:none; }

/* EINHEITLICHE TYPOGRAFIE im Mobile-Drawer:
   Alle Items (L1-Head, L2-Head, Uebersicht-Link, Leaf-Link) nutzen
   Serif 16px in --ink-2. Hover/Open ist immer --magenta. Hierarchie
   entsteht NUR durch Einrueckung (margin-left auf Bodies) und das
   Chevron-Symbol bei Aufklappern. Section-Header (L1) ist leicht
   kraeftiger als alles andere, damit Hauptsektionen scannbar bleiben.

   WICHTIG: font-family auch auf den inneren .v2-mnav-label-Span und
   alle a/summary-Children erzwingen — sonst kann Site.css's a-Regel
   (font-weight:600 etc.) die Font-Inheritance ueberraschen, und es
   entstehen optisch unterschiedliche Schriften je Element-Typ. */

body.layout-v2 .v2-mnav-l1,
body.layout-v2 .v2-mnav-l1 *,
body.layout-v2 .v2-mnav-l2,
body.layout-v2 .v2-mnav-l2 * {
	font-family:var(--serif) !important;
}

/* Ebene 1: Sektion (Aufklapper, hat Chevron) */
body.layout-v2 .v2-mnav-l1-head {
	padding:13px 16px;
	background:transparent;
	color:var(--ink-2);
	font-family:var(--serif) !important;
	font-size:16px;
	font-weight:600;
	letter-spacing:0;
	line-height:1.35;
	transition:color 0.15s, background 0.12s;
}
body.layout-v2 .v2-mnav-l1-head:hover,
body.layout-v2 .v2-mnav-l1[open] > .v2-mnav-l1-head {
	color:var(--magenta);
}
/* Body hat dezente Trenn-Linie links als Hierarchie-Anker */
body.layout-v2 .v2-mnav-l1-body {
	background:transparent;
	padding:0 0 10px;
	margin-left:16px;
	border-left:1px solid var(--rule);
}

/* Ebene 2: Gruppe (Aufklapper, hat Chevron) — gleiche Type wie L1, nur
   leicht zarter im Weight, damit L1 weiter dominiert. Sitzt im L1-Body
   und ist dadurch bereits visuell eingerueckt. */
body.layout-v2 .v2-mnav-l2 {
	background:transparent;
}
body.layout-v2 .v2-mnav-l2-head {
	padding:11px 16px;
	background:transparent;
	color:var(--ink-2);
	font-family:var(--serif) !important;
	font-size:16px;
	font-weight:500;
	letter-spacing:0;
	line-height:1.35;
	text-transform:none;
	transition:color 0.15s, background 0.12s;
}
body.layout-v2 .v2-mnav-l2-head:hover,
body.layout-v2 .v2-mnav-l2[open] > .v2-mnav-l2-head {
	color:var(--magenta);
}
/* L2-Body wieder eine Stufe rein, eigene linke Linie */
body.layout-v2 .v2-mnav-l2-body {
	background:transparent;
	padding:0 0 6px;
	margin-left:16px;
	border-left:1px solid var(--rule);
}

/* Chevron fuer Menue-Opener (L1/L2 heads):
   geschlossen = ▾ (zeigt nach unten, "klick zum Aufklappen")
   offen        = ▴ (zeigt nach oben, "klick zum Zuklappen") */
body.layout-v2 .v2-mnav-chev {
	margin-left:auto;
	flex-shrink:0;
	font-size:18px;
	line-height:1;
	color:var(--ink-2);
	transition:transform 0.2s, color 0.15s;
	width:auto;
	height:auto;
	position:static;
	font-weight:700;
}
body.layout-v2 .v2-mnav-chev::before {
	content:"\25BE"; /* ▾ */
	display:inline-block;
}
body.layout-v2 .v2-mnav-l1-head:hover .v2-mnav-chev,
body.layout-v2 .v2-mnav-l2-head:hover .v2-mnav-chev,
body.layout-v2 .v2-mnav-l1[open] > summary .v2-mnav-chev,
body.layout-v2 .v2-mnav-l2[open] > summary .v2-mnav-chev {
	color:var(--magenta);
}
body.layout-v2 .v2-mnav-l1[open] > summary .v2-mnav-chev,
body.layout-v2 .v2-mnav-l2[open] > summary .v2-mnav-chev {
	transform:rotate(180deg); /* ▾ → ▴ */
}

/* Uebersicht-Link "Ueberblick: <Section>" — sitzt direkt im L1-body.
   Gleiche Type wie Leaf, damit Klick-Items im Drawer einheitlich aussehen.
   Magenta-Farbe distinguishes optisch als "Section-Wurzel-Link". */
body.layout-v2 .v2-mnav-overview {
	display:flex;
	align-items:center;
	gap:10px;
	padding:11px 16px;
	font-family:var(--serif) !important;
	font-size:16px;
	font-weight:400 !important;
	line-height:1.35;
	color:var(--ink-2) !important;
	text-decoration:none !important;
	border:0 !important;
	opacity:1 !important;
	background:transparent;
	transition:background 0.12s, color 0.12s;
}
body.layout-v2 .v2-mnav-overview:hover,
body.layout-v2 .v2-mnav-overview:active {
	color:var(--magenta) !important;
	background:var(--magenta-tint);
}

/* Leaf items — gleiche Type, nur Weight 400 (regulaerer Link). */
body.layout-v2 .v2-mnav-leaf {
	display:flex;
	align-items:center;
	gap:10px;
	padding:11px 16px;
	color:var(--ink-2) !important;
	text-decoration:none !important;
	font-family:var(--serif) !important;
	font-size:16px;
	font-weight:400;
	border:0 !important;
	opacity:1 !important;
	line-height:1.35;
	transition:background 0.12s, color 0.12s;
}
body.layout-v2 .v2-mnav-leaf:hover,
body.layout-v2 .v2-mnav-leaf:active {
	background:var(--magenta-tint);
	color:var(--magenta) !important;
}

body.layout-v2 .v2-drawer-foot {
	flex-shrink:0;
	padding:14px 20px;
	background:var(--paper);
	border-top:1px solid var(--rule);
	display:flex;
	gap:18px;
	flex-wrap:wrap;
	font-family:var(--sans);
	font-size:14px;
}
body.layout-v2 .v2-drawer-foot a {
	color:var(--ink-3) !important;
	text-decoration:none !important;
	border:0 !important;
	opacity:1 !important;
	font-weight:500 !important;
}
body.layout-v2 .v2-drawer-foot a:hover {
	color:var(--magenta) !important;
}

/* Drawer ist nur sichtbar wenn der Burger sichtbar ist:
   entweder <1024 (Media) ODER body.v2-nav-compact (JS-Detection). */
@media (min-width:1024px) {
	body.layout-v2:not(.v2-nav-compact) .v2-drawer-backdrop,
	body.layout-v2:not(.v2-nav-compact) .v2-drawer {
		display:none !important;
	}
}

/* ---------- Crumbs: schlank + uppercase wie Eyebrow ---------- */
body.layout-v2 .v2-crumbs {
	padding:6px var(--page-pad);
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.12em;
	text-transform:uppercase;
	font-weight:500;
	color:var(--ink-3);
	background:var(--rule-2);
	border-bottom:1px solid var(--rule);
}
body.layout-v2 .v2-crumbs a {
	color:var(--ink-3) !important;
	text-decoration:none !important;
	font-weight:500 !important;
	opacity:1 !important;
	border:0 !important;
}
body.layout-v2 .v2-crumbs a:hover {
	color:var(--magenta) !important;
}
body.layout-v2 .v2-crumbs b {
	color:var(--ink) !important;
	font-weight:600;
}
body.layout-v2 .v2-crumbs-sep {
	margin:0 6px;
	color:var(--ink-4);
}
@media (max-width:1180px) {
	body.layout-v2 .v2-crumbs { padding-top:8px; padding-bottom:8px; font-size:12px; }
}

/* ---------- Hero ----------
   Paper-Background hebt Hero-Bereich gegen weisse Body-Spalten ab,
   sodass die Boxen (Schnelle Antwort, Autor) klarer sichtbar werden. */
.v2-hero {
	padding:32px var(--page-pad) 22px;
	background:var(--paper);
	border-bottom:1px solid var(--rule);
}
.v2-hero-meta {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.06em;
	color:var(--ink-3);
	text-transform:uppercase;
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:14px;
	font-weight:500;
	flex-wrap:wrap;
}
.v2-hero-meta-dot {
	width:3px;
	height:3px;
	border-radius:50%;
	background:var(--ink-4);
	display:inline-block;
}
.v2-hero-h1 {
	font-family:var(--serif);
	font-size:40px;
	font-weight:500;
	line-height:1.12;
	color:var(--ink);
	margin:0 0 22px;
	max-width:24ch;
	letter-spacing:-0.018em;
}
@media (max-width:1180px) {
	.v2-hero { padding-top:24px; padding-bottom:18px; }
	.v2-hero-h1 { font-size:40px; }
}

/* ---------- Hero-Foot: Autor / Stars / Share ---------- */
body.layout-v2 .v2-hero-foot {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	margin-top:8px;
	flex-wrap:wrap;
}
body.layout-v2 .v2-author-block {
	display:flex !important;
	align-items:center;
	gap:12px;
	color:inherit !important;
	text-decoration:none !important;
	font-weight:400 !important;
	opacity:1 !important;
	border:0 !important;
}
body.layout-v2 .v2-author-block:hover .v2-author-name {
	color:var(--magenta);
}
body.layout-v2 .v2-author-pic {
	width:46px;
	height:46px;
	border-radius:50%;
	flex-shrink:0;
	display:block;
	object-fit:cover;
	border:0 !important;
}
body.layout-v2 .v2-author-who {
	display:flex;
	flex-direction:column;
	line-height:1.25;
}
body.layout-v2 .v2-author-name {
	font-family:var(--sans);
	font-size:14px;
	font-weight:600;
	color:var(--ink);
}
body.layout-v2 .v2-author-role {
	font-family:var(--sans);
	font-size:14px;
	color:var(--ink-3);
	margin-top:2px;
}
body.layout-v2 .v2-stars {
	display:flex;
	align-items:center;
	gap:8px;
	font-family:var(--sans);
	font-size:14px;
	color:var(--ink-3);
}
body.layout-v2 .v2-stars-num {
	color:var(--orange-deep);
	font-weight:700;
	font-size:16px;
}
body.layout-v2 .v2-stars-icons {
	color:var(--orange);
	letter-spacing:1px;
	font-size:14px;
}
body.layout-v2 .v2-share-row {
	display:flex;
	gap:6px;
}
body.layout-v2 .v2-share-row a {
	width:30px;
	height:30px;
	border-radius:50%;
	background:var(--rule-2);
	display:flex !important;
	align-items:center;
	justify-content:center;
	color:var(--ink-3) !important;
	border:0 !important;
	opacity:1 !important;
	font-weight:400 !important;
	transition:background 0.15s, color 0.15s;
}
body.layout-v2 .v2-share-row a:hover {
	background:var(--magenta-tint);
	color:var(--magenta) !important;
}

/* ---------- Legal-Strip ---------- */
/* === CREDIBILITY-BAR ===========================================
   Trust-Signale (Press + Siegel) PROMINENT — die Logos sind hart
   erkaempft, die werden hier rausgeholt. Plus kleiner Pflicht-Disclaimer
   subordinate darunter. Weisser Card-Block mit Schatten, hebt sich
   klar vom Paper-Background ab.
   - Trust-Zeile: gross, weisser Card, kraeftige Logos, Magenta-Eyebrow
   - Legal-Zeile: klein und subordinate AM Boden des Cards */
body.layout-v2 .v2-credbar {
	margin:0;
	padding:0;
	background:transparent;
	border-bottom:1px solid var(--rule);
}
/* Trust-Row: Press-Gruppe und Siegel sind beide flex:0 0 auto und nowrap.
   Wenn der Platz nicht reicht (zwischen Mobile- und Desktop-Layout-Schwelle),
   blenden wir die Siegel komplett aus statt sie in eine zweite Zeile zu
   umbrechen zu lassen. Press bleibt immer sichtbar. */
body.layout-v2 .v2-credbar-trust > * {
	min-width:0;
}
/* Trust-Card: weisser Block mit Press links, Siegel rechts. */
body.layout-v2 .v2-credbar-trust {
	padding:18px var(--page-pad) 14px;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;       /* Press LINKS, Siegel RECHTS */
	flex-wrap:wrap;
	gap:24px;
	border-top:1px solid var(--rule);
}
/* Press-Gruppe: "Bekannt aus" + WiWo-Logo, immer zusammen, immer links */
body.layout-v2 .v2-credbar-press-group {
	display:flex;
	align-items:center;
	gap:14px;
	flex-shrink:0;
}
body.layout-v2 .v2-credbar-label {
	font-family:var(--sans);
	font-size:var(--fs-xs);
	letter-spacing:0.18em;
	text-transform:uppercase;
	color:var(--magenta);
	font-weight:700;
	white-space:nowrap;
}
body.layout-v2 .v2-credbar-press {
	display:inline-flex;
	align-items:center;
	border:0 !important;
	opacity:1 !important;
	padding:4px 6px;
	border-radius:4px;
	transition:transform 0.15s, background 0.15s;
}
body.layout-v2 .v2-credbar-press:hover {
	transform:translateY(-1px);
	background:var(--rule-2);
}
body.layout-v2 .v2-credbar-press img {
	height:36px;
	width:auto;
	display:block;
}
body.layout-v2 .v2-credbar-seals {
	display:inline-flex;
	align-items:center;
	gap:18px;
	flex-wrap:nowrap;
	justify-content:flex-end;
	flex-shrink:0;
}
/* Klare Logos ohne Box/Border — die Marken stehen fuer sich selbst. */
body.layout-v2 .v2-credbar-seals img {
	height:40px;
	width:auto;
	display:block;
	transition:transform 0.15s;
}
body.layout-v2 .v2-credbar-seals img:hover {
	transform:translateY(-1px);
}
/* Legal-Zeile direkt unter der Trust-Card, klein und subordinate */
body.layout-v2 .v2-credbar-legal {
	padding:8px var(--page-pad);
	background:var(--rule-2);
	font-family:var(--sans);
	font-size:var(--fs-xxs);
	color:var(--ink-4);
	text-align:center;
	letter-spacing:0;
	font-weight:400;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	flex-wrap:wrap;
}
body.layout-v2 .v2-credbar-legal a {
	color:var(--ink-3) !important;
	text-decoration:underline !important;
	border:0 !important;
	font-weight:500 !important;
	opacity:1 !important;
}
body.layout-v2 .v2-credbar-legal a:hover {
	color:var(--magenta) !important;
}

/* Mobile (1-Spalter, <880px): nur Press-Gruppe sichtbar, Siegel ausgeblendet.
   Tablet/Desktop (≥880, mehrspaltig): beide Gruppen nebeneinander. */
@media (max-width:879px) {
	body.layout-v2 .v2-credbar-seals {
		display:none !important;
	}
	body.layout-v2 .v2-credbar-trust {
		justify-content:flex-start;
	}
}
@media (max-width:639px) {
	body.layout-v2 .v2-credbar-press img {
		height:30px;
	}
	body.layout-v2 .v2-credbar-label {
		font-size:var(--fs-xxs);
		letter-spacing:0.14em;
	}
}

/* ---------- Trust-Strip ----------
   Links: "Bekannt aus" + WiWo (Press).
   Rechts: DVEV + 4 Vertrauens-Siegel (Cyber, DSGVO, SSL, Made in Germany). */
body.layout-v2 .v2-trust-strip {
	padding:14px var(--page-pad);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:28px;
	background:transparent;
	border-bottom:1px solid var(--rule);
	flex-wrap:wrap;
}
body.layout-v2 .v2-trust-press {
	display:flex;
	align-items:center;
	gap:18px;
	flex-shrink:0;
}
body.layout-v2 .v2-trust-seals {
	display:flex;
	align-items:center;
	gap:24px;
	flex-wrap:wrap;
	margin-left:auto;
}
body.layout-v2 .v2-trust-label {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--ink-4);
	font-weight:600;
	flex-shrink:0;
}
body.layout-v2 .v2-trust-press img,
body.layout-v2 .v2-trust-seals img {
	height:36px;
	width:auto;
	display:block;
	opacity:0.8;
	transition:opacity 0.15s;
}
body.layout-v2 .v2-trust-press img:hover,
body.layout-v2 .v2-trust-seals img:hover,
body.layout-v2 .v2-trust-press a:hover img {
	opacity:1;
}
body.layout-v2 .v2-trust-press a {
	display:inline-flex !important;
	align-items:center;
	border:0 !important;
	opacity:1 !important;
	padding:0 !important;
}
@media (max-width:1180px) {
	body.layout-v2 .v2-legal-strip,
	body.layout-v2 .v2-trust-strip { padding-left:20px; padding-right:20px; }
	body.layout-v2 .v2-trust-press img,
	body.layout-v2 .v2-trust-seals img { height:30px; }
	body.layout-v2 .v2-trust-seals { gap:16px; }
}
@media (max-width:760px) {
	body.layout-v2 .v2-trust-strip { gap:14px; padding:12px 20px; }
	body.layout-v2 .v2-trust-seals { gap:14px; }
	body.layout-v2 .v2-trust-press img,
	body.layout-v2 .v2-trust-seals img { height:26px; }
}

/* ---------- Body Grid: 3 Spalten ----------
   Body hat Paper-Background. Prose-Spalte sitzt darauf als weisse Card.
   TOC + Dock floaten auf dem Paper-Tint, Cards (Wegweiser/Herbert) poppen weiss heraus. */
.v2-body {
	display:grid;
	/* TOC | Prose | Herbert. Article auf 720px gekappt — das ist die Breite
	   aus dem alten Design (boxteil2mitrahmen max-width:670 + 2×25 Padding),
	   auf die ALLE Bild-Assets ausgelegt sind. Herbert nimmt den Rest. */
	grid-template-columns:minmax(220px, 260px) minmax(0, 720px) minmax(380px, 1fr);
	gap:32px;
	padding:32px var(--page-pad);
	background:var(--paper);
}
body.layout-v2 .v2-toc   { grid-column:1; grid-row:1; }
body.layout-v2 .v2-prose { grid-column:2; grid-row:1; min-width:0; }
body.layout-v2 .v2-dock  { grid-column:3; grid-row:1; }
/* Modifier-Klassen aus PHP — passen die Spalten-Definition an wenn
   TOC oder Dock leer sind. Spalten-Zuordnungen aller Elemente werden
   pro Variante neu gesetzt, damit DOM-Order (Dock zuerst) nicht stoert. */
body.layout-v2 .v2-body.v2-body--no-toc {
	grid-template-columns:1fr var(--col-dock);
}
body.layout-v2 .v2-body.v2-body--no-toc .v2-prose { grid-column:1; }
body.layout-v2 .v2-body.v2-body--no-toc .v2-dock  { grid-column:2; }

body.layout-v2 .v2-body.v2-body--no-dock {
	grid-template-columns:var(--col-toc) 1fr;
}
body.layout-v2 .v2-body.v2-body--no-dock .v2-toc   { grid-column:1; }
body.layout-v2 .v2-body.v2-body--no-dock .v2-prose { grid-column:2; }

body.layout-v2 .v2-body.v2-body--single {
	grid-template-columns:1fr;
}
body.layout-v2 .v2-body.v2-body--single .v2-prose {
	grid-column:1;
	max-width:720px;
	margin:0 auto;
}

/* ---------- TOC links ----------
   Sticky unter Navbar (~54px). Header (Label + Progress) fix oben;
   Items scrollen smooth innerhalb der Liste wenn TOC laenger als Viewport. */
.v2-toc {
	position:sticky;
	top:74px;
	align-self:start;
	font-size:14px;
	/* 74px Navbar oben + 32px Atem unten (gleicher Bottom-Abstand wie Herbert-Dock).
	   Sonst klebt die Wegweiser-Box am Browser-Boden. */
	max-height:calc(100vh - 74px - 32px);
	/* Flex-Column: Head fix oben, Nav scrollt intern, Wegweiser-CTA fix unten.
	   Damit die "8 Wege"-Box NIE aus der Sidebar rausgedraengt wird, egal
	   wie lang die TOC ist. */
	display:flex;
	flex-direction:column;
	scroll-behavior:smooth;
}
body.layout-v2 .v2-toc-head {
	flex:0 0 auto;
}
body.layout-v2 .v2-toc-nav {
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	overscroll-behavior:auto;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
body.layout-v2 .v2-toc-nav::-webkit-scrollbar {
	width:0;
	height:0;
	display:none;
}
body.layout-v2 .v2-toc .v2-wegweiser-side {
	flex:0 0 auto;
	margin-top:12px;
}
body.layout-v2 .v2-toc::-webkit-scrollbar {
	width:0;
	height:0;
	display:none;
}
body.layout-v2 .v2-toc-head {
	position:sticky;
	top:0;
	background:var(--paper);
	z-index:2;
	padding-bottom:12px;
}
body.layout-v2 .v2-toc-head .v2-toc-progress {
	margin-bottom:0;
}
.v2-toc-label {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--ink-4);
	margin-bottom:10px;
	font-weight:500;
}
.v2-toc-progress {
	height:3px;
	background:var(--rule);
	border-radius:99px;
	margin-bottom:16px;
	position:relative;
	overflow:hidden;
}
/* Statische Initial-Hoehe — gefuellte Variante kommt weiter unten (Scroll-Spy) */
body.layout-v2 .v2-toc-nav {
	display:block;
}
body.layout-v2 .v2-toc-nav a,
body.layout-v2 .v2-toc-link {
	display:block !important;
	padding:7px 10px 7px 16px !important;
	color:var(--ink-3) !important;
	text-decoration:none !important;
	border-left:2px solid var(--rule);
	font-size:14px !important;
	line-height:1.35 !important;
	font-weight:400 !important;
	margin-bottom:2px;
	background:transparent;
	opacity:1 !important;
	transition:color 0.15s, border-left-color 0.15s, background 0.15s;
}
body.layout-v2 .v2-toc-nav a:hover,
body.layout-v2 .v2-toc-link:hover {
	color:var(--magenta) !important;
	border-left-color:var(--magenta) !important;
	background:var(--magenta-tint) !important;
	opacity:1 !important;
}
/* Aktive Section (Scroll-Spy) */
body.layout-v2 .v2-toc-link.is-current {
	color:var(--magenta) !important;
	border-left-color:var(--magenta) !important;
	background:var(--magenta-tint) !important;
	font-weight:600 !important;
}
/* Schon gelesene Sections (oberhalb des Viewport-Tops gewandert) */
body.layout-v2 .v2-toc-link.is-read {
	color:var(--ink-4) !important;
}
body.layout-v2 .v2-toc-link.is-read::before {
	content:"\2713\00a0"; /* Haken + nbsp */
	color:var(--green);
	font-weight:600;
}
/* Progress-Bar live mitwachsen */
body.layout-v2 .v2-toc-progress::after {
	content:"";
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:var(--toc-progress, 0%);
	background:var(--magenta);
	border-radius:99px;
	transition:width 0.2s ease;
}

/* ---------- Article Mitte ----------
   Bare-text auf Paper-Body, kein Rahmen, kein eigener Hintergrund —
   wie der TOC links. Nur die Cards rechts (Wegweiser/Herbert) sind
   abgegrenzt. */
.v2-prose {
	font-family:var(--serif);
	font-size:18px;
	line-height:1.65;
	color:var(--ink-2);
	min-width:0;
	max-width:720px;
}
/* Text-Elemente innerhalb der Prose: max 670px Lese-Breite */
body.layout-v2 .v2-prose > p,
body.layout-v2 .v2-prose > h2,
body.layout-v2 .v2-prose > h3,
body.layout-v2 .v2-prose > ul,
body.layout-v2 .v2-prose > ol,
body.layout-v2 .v2-prose > blockquote,
body.layout-v2 .v2-prose > .pull,
body.layout-v2 .v2-prose > .source,
body.layout-v2 .v2-prose > .code,
body.layout-v2 .v2-prose .boxteil1 > p,
body.layout-v2 .v2-prose .boxteil1 > h2,
body.layout-v2 .v2-prose .boxteil1 > h3,
body.layout-v2 .v2-prose .boxteil1 > ul,
body.layout-v2 .v2-prose .boxteil1 > .code,
body.layout-v2 .v2-prose .boxteil2mitrahmen > p,
body.layout-v2 .v2-prose .boxteil2mitrahmen > h2,
body.layout-v2 .v2-prose .boxteil2mitrahmen > h3,
body.layout-v2 .v2-prose .boxteil2mitrahmen > ul,
body.layout-v2 .v2-prose .boxteil2mitrahmen > .code {
	max-width:670px;
}

/* renderContent() umwickelt jeden Content-Chunk mit .boxteil1 > .boxteil2mitrahmen
   (v1-Container mit Schatten + max-width 670px). In v2 wollen wir den Flow
   flach: kein Schatten, keine Innen-Breitenbegrenzung, kein doppelter Padding. */
.v2-prose .boxteil1,
.v2-prose .boxteil2mitrahmen,
.v2-prose .boxteil2ohnerahmen {
	all:unset;
	display:block;
	width:auto;
	max-width:none;
	box-shadow:none;
	border:none;
	background:transparent;
	padding:0;
	margin:0;
}

/* ============================================================
   Custom-Tag-Boxen: <tipp>, <beispiel>, <wichtig>, <mehr>
   transformCustomTags() generiert <div class="code" style="background:..."><div class="infoboxcol"><i class="icon-X"></i></div><div class="infoboxcol">text</div></div>
   ============================================================ */
body.layout-v2 .v2-prose .code {
	display:block !important;
	padding:18px 22px !important;
	margin:22px 0 !important;
	border-radius:0 4px 4px 0 !important;
	background:var(--magenta-tint) !important; /* Default = Tipp; per :has() unten ueberschrieben */
	border-left:3px solid var(--magenta) !important;
	font-family:var(--serif);
	font-size:16px;
	line-height:1.55;
	color:var(--ink-2);
	position:relative;
}
/* Icon-Spalte ausblenden — wir benutzen stattdessen einen Eyebrow */
body.layout-v2 .v2-prose .code > .infoboxcol:first-child {
	display:none !important;
}
body.layout-v2 .v2-prose .code > .infoboxcol:last-child,
body.layout-v2 .v2-prose .code > .infoboxcol:nth-child(2) {
	display:block !important;
	width:auto !important;
	padding:0 !important;
}
body.layout-v2 .v2-prose .code p:last-child { margin-bottom:0; }
body.layout-v2 .v2-prose .code strong { color:var(--ink); font-weight:600; }

/* Eyebrow ueber Box-Text — via ::before, gesteuert ueber :has() */
body.layout-v2 .v2-prose .code::before {
	display:block;
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	font-weight:600;
	margin-bottom:6px;
	color:var(--magenta);
	content:"Tipp aus der Praxis";
}

/* Beispiel (icon-bulb): grauer Akzent, creme bg */
body.layout-v2 .v2-prose .code:has(.icon-bulb) {
	background:#f5f1e8 !important;
	border-left-color:var(--ink-3) !important;
}
body.layout-v2 .v2-prose .code:has(.icon-bulb)::before {
	color:var(--ink-3);
	content:"Beispiel";
}

/* Wichtig/Warnung (icon-exclamation-triangle): orange Akzent, orange tint */
body.layout-v2 .v2-prose .code:has(.icon-exclamation-triangle) {
	background:#fbede0 !important;
	border-left-color:var(--orange-deep) !important;
}
body.layout-v2 .v2-prose .code:has(.icon-exclamation-triangle)::before {
	color:var(--orange-deep);
	content:"Wichtig";
}

/* Tipp (icon-thumbs-o-up): magenta — explizit, falls Default ueberschrieben wird */
body.layout-v2 .v2-prose .code:has(.icon-thumbs-o-up) {
	background:var(--magenta-tint) !important;
	border-left-color:var(--magenta) !important;
}
body.layout-v2 .v2-prose .code:has(.icon-thumbs-o-up)::before {
	color:var(--magenta);
	content:"Tipp aus der Praxis";
}

/* Mehr (icon-link): gruener Akzent, gruener tint */
body.layout-v2 .v2-prose .code:has(.icon-link) {
	background:#f6f9ef !important;
	border-left-color:var(--green) !important;
}
body.layout-v2 .v2-prose .code:has(.icon-link)::before {
	color:var(--green-deep);
	content:"Thema vertiefen";
}
body.layout-v2 .v2-prose .code:has(.icon-link) a {
	color:var(--green-deep) !important;
	border-bottom-color:#c8d8a8 !important;
}

/* ============================================================
   Tabellen: <table class="tablecontent">
   v1 hat Magenta-Header, breite Border. v2 editorial-cleaner.
   ============================================================ */
body.layout-v2 .v2-prose .tablecontent {
	width:100%;
	border-collapse:collapse !important;
	margin:22px 0;
	font-family:var(--sans);
	font-size:14px;
	border:0 !important;
	border-radius:6px !important;
	overflow:hidden;
	table-layout:auto;
}
body.layout-v2 .v2-prose .tablecontent thead {
	background:var(--magenta) !important;
	color:#fff !important;
}
body.layout-v2 .v2-prose .tablecontent th {
	padding:10px 12px !important;
	text-align:left !important;
	font-family:var(--sans) !important;
	font-size:12px !important;
	font-weight:600 !important;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:#fff !important;
	border:0 !important;
}
body.layout-v2 .v2-prose .tablecontent td {
	padding:11px 12px !important;
	border:0 !important;
	border-bottom:1px solid var(--rule) !important;
	background:#fff !important;
	color:var(--ink-2) !important;
	vertical-align:top;
	line-height:1.4;
	font-family:var(--sans);
}
body.layout-v2 .v2-prose .tablecontent tbody tr:last-child td {
	border-bottom:0 !important;
}
body.layout-v2 .v2-prose .tablecontent tbody tr:nth-child(even) td {
	background:var(--rule-2) !important;
}
body.layout-v2 .v2-prose .tablecontent td strong {
	color:var(--ink);
	font-weight:600;
}

/* ============================================================
   Pull-Quote, Source-Hinweis (optional — Custom-Klassen falls genutzt)
   ============================================================ */
body.layout-v2 .v2-prose .pull,
body.layout-v2 .v2-prose blockquote {
	font-family:var(--serif);
	font-size:21px;
	font-weight:400;
	font-style:italic;
	line-height:1.4;
	color:var(--ink);
	margin:28px 0;
	padding:6px 0 6px 20px;
	border-left:2px solid var(--magenta);
}
body.layout-v2 .v2-prose .source {
	font-family:var(--sans);
	font-size:12px;
	color:var(--ink-4);
	letter-spacing:0.04em;
	margin:-10px 0 18px;
	padding-left:14px;
	border-left:2px solid var(--rule);
	font-weight:500;
}

/* Listen im Prose-Bereich: editorial-cleaner. Liste wird ueber padding-left
   eingerueckt (= sichtbar abgesetzt vom Paragraph), Icon-Spalte innerhalb
   der li. v1-Icons werden ausgeblendet und durch sauberen Magenta-Pfeil
   per CSS ersetzt. */
body.layout-v2 .v2-prose ul.fa-ul,
body.layout-v2 .v2-prose ul:not(.fa-ul):not([class*="v2-"]):not([class*="drawer"]):not([class*="toc"]):not([class*="schnelle"]):not([class*="footer"]):not([class*="trust"]) {
	list-style:none;
	padding-left:24px;
	margin:0 0 16px;
}
body.layout-v2 .v2-prose ol:not([class*="v2-"]) {
	padding-left:24px;
	margin:0 0 16px;
}
body.layout-v2 .v2-prose ul.fa-ul li,
body.layout-v2 .v2-prose ul:not(.fa-ul):not([class*="v2-"]):not([class*="drawer"]):not([class*="toc"]):not([class*="schnelle"]):not([class*="footer"]):not([class*="trust"]) li {
	padding-left:22px;
	position:relative;
	margin-bottom:8px;
	line-height:1.55;
}
/* Bullet = kurzer Magenta-Strich, identisch zur Schnelle-Antwort-Liste.
   Konsistentes Bullet-Konzept ueber die ganze Seite. */
body.layout-v2 .v2-prose ul.fa-ul li::before,
body.layout-v2 .v2-prose ul:not(.fa-ul):not([class*="v2-"]):not([class*="drawer"]):not([class*="toc"]):not([class*="schnelle"]):not([class*="footer"]):not([class*="trust"]) li::before {
	content:"";
	position:absolute;
	left:0;
	top:13px;
	width:14px;
	height:1.5px;
	background:var(--magenta);
}
/* v1-Sprite-Icons innerhalb fa-li ausblenden — wir nutzen unseren Pfeil */
body.layout-v2 .v2-prose ul.fa-ul li .fa-li,
body.layout-v2 .v2-prose ul.fa-ul li > i[class*="icon-"],
body.layout-v2 .v2-prose ul.fa-ul li > span.fa-li i[class*="icon-"] {
	display:none !important;
}

/* Bilder-Caption / .imagecontent in v2 — etwas zarter als v1 */
body.layout-v2 .v2-prose .imagecontent {
	border:1px solid var(--rule) !important;
	border-radius:4px !important;
	margin:18px 0 !important;
	max-width:100% !important;
}

/* ============================================================
   P1.7 — Artikel-Schluss
   FAQ, Bewertung+Share-Bottom, Kommentare, Quellen, Autor-Block
   ============================================================ */

/* Section-Eyebrow + Section-H2: gemeinsames Pattern fuer alle Endsektionen */
body.layout-v2 .v2-prose .v2-section-eyebrow {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--magenta);
	font-weight:600;
	margin-bottom:6px;
}
body.layout-v2 .v2-prose .v2-section-h2 {
	font-family:var(--serif);
	font-size:28px;
	font-weight:600;
	color:var(--ink) !important;
	margin:0 0 18px;
	line-height:1.2;
	letter-spacing:-0.005em;
}

/* ---------- FAQ ---------- */
body.layout-v2 .v2-prose .v2-faq {
	margin-top:48px;
	padding-top:32px;
	border-top:2px solid var(--rule);
}
body.layout-v2 .v2-prose .v2-faq-item {
	border-top:1px solid var(--rule);
	padding:14px 0;
}
body.layout-v2 .v2-prose .v2-faq-item:last-of-type {
	border-bottom:1px solid var(--rule);
}
body.layout-v2 .v2-prose .v2-faq-q {
	list-style:none;
	cursor:pointer;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:14px;
	font-family:var(--serif);
	font-size:18px;
	font-weight:600;
	color:var(--ink);
	line-height:1.35;
}
body.layout-v2 .v2-prose .v2-faq-q::-webkit-details-marker {
	display:none;
}
body.layout-v2 .v2-prose .v2-faq-toggle {
	flex-shrink:0;
	color:var(--magenta);
	font-family:var(--sans);
	font-size:21px;
	font-weight:400;
	width:20px;
	text-align:center;
	line-height:1.2;
}
body.layout-v2 .v2-prose .v2-faq-item[open] .v2-faq-toggle::before {
	content:"\2013"; /* en-dash */
}
body.layout-v2 .v2-prose .v2-faq-item[open] .v2-faq-toggle {
	font-size:0; /* original "+" verschwindet, ::before liefert "-" */
}
body.layout-v2 .v2-prose .v2-faq-item[open] .v2-faq-toggle::before {
	font-size:21px;
}
body.layout-v2 .v2-prose .v2-faq-a {
	margin-top:10px;
	font-family:var(--serif);
	font-size:16px;
	line-height:1.6;
	color:var(--ink-2);
}
body.layout-v2 .v2-prose .v2-faq-a p:last-child { margin-bottom:0; }

/* ---------- Bewertung+Share Bottom ---------- */
body.layout-v2 .v2-prose .v2-rating-bottom {
	margin-top:36px;
	padding:22px 24px;
	background:var(--rule-2);
	border-radius:8px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	flex-wrap:wrap;
}
body.layout-v2 .v2-prose .v2-rating-bottom-left { flex:1 1 auto; min-width:200px; }
body.layout-v2 .v2-prose .v2-rating-bottom-right { flex:0 1 auto; }
body.layout-v2 .v2-prose .v2-rating-bottom .v2-section-eyebrow {
	color:var(--ink-4);
	margin-bottom:8px;
}
body.layout-v2 .v2-prose .v2-rating-bottom-stars {
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
}
body.layout-v2 .v2-prose .v2-rating-bottom-stars .v2-stars-icons {
	color:var(--orange);
	font-size:21px;
	letter-spacing:1px;
}
body.layout-v2 .v2-prose .v2-rating-bottom-text {
	font-family:var(--serif);
	font-size:16px;
	color:var(--ink-3);
}
body.layout-v2 .v2-prose .v2-rating-bottom-text strong {
	color:var(--ink);
	font-weight:600;
	font-size:18px;
}
body.layout-v2 .v2-prose .v2-share-row-bottom a {
	width:36px;
	height:36px;
	background:var(--magenta);
	color:#fff !important;
	font-size:16px;
	font-weight:600 !important;
}
body.layout-v2 .v2-prose .v2-share-row-bottom a:hover {
	background:var(--magenta-deep);
	color:#fff !important;
}

/* rating.php-Widget innerhalb der Box — v1-boxteil-Wrapper neutralisieren */
body.layout-v2 .v2-prose .v2-rating-bottom-widget {
	margin-top:14px;
	font-family:var(--sans);
	font-size:14px;
}
body.layout-v2 .v2-prose .v2-rating-bottom-widget .boxteil1,
body.layout-v2 .v2-prose .v2-rating-bottom-widget .boxteil2mitrahmen,
body.layout-v2 .v2-prose .v2-rating-bottom-widget .boxteil2ohnerahmen {
	all:unset;
	display:block;
	width:auto;
	max-width:none;
	box-shadow:none;
	border:none;
	background:transparent;
	padding:0;
	margin:0;
}

/* ---------- Kommentare: v2-Form-Styling fuer comment.php-Output ---------- */
body.layout-v2 .v2-prose .v2-comments {
	margin-top:48px;
	padding-top:32px;
	border-top:1px solid var(--rule);
}
body.layout-v2 .v2-prose .v2-comments .boxteil1,
body.layout-v2 .v2-prose .v2-comments .boxteil2mitrahmen,
body.layout-v2 .v2-prose .v2-comments .boxteil2ohnerahmen {
	all:unset;
	display:block;
	width:auto;
	max-width:none;
	box-shadow:none;
	border:none;
	background:transparent;
	padding:0;
	margin:0;
}

/* Comment-Form: Inputs + Textarea */
body.layout-v2 .v2-comments form {
	margin:0 0 24px;
}
body.layout-v2 .v2-comments .input-wrapper {
	margin-bottom:10px;
}
body.layout-v2 .v2-comments .input-text,
body.layout-v2 .v2-comments input[type="text"]:not([type="hidden"]):not(.hp),
body.layout-v2 .v2-comments textarea,
body.layout-v2 .v2-comments .textarea {
	font-family:var(--sans) !important;
	font-size:var(--fs-xs) !important;
	line-height:1.5 !important;
	padding:10px 12px !important;
	border:1px solid var(--rule) !important;
	border-radius:6px !important;
	background:#fff !important;
	color:var(--ink-2) !important;
	width:100% !important;
	max-width:100% !important;
	box-sizing:border-box !important;
	transition:border-color 0.15s, box-shadow 0.15s;
	box-shadow:none !important;
	display:block;
}
body.layout-v2 .v2-comments textarea,
body.layout-v2 .v2-comments .textarea {
	min-height:140px;
	resize:vertical;
}
body.layout-v2 .v2-comments .input-text:focus,
body.layout-v2 .v2-comments textarea:focus,
body.layout-v2 .v2-comments .textarea:focus {
	outline:none;
	border-color:var(--magenta) !important;
	box-shadow:0 0 0 3px var(--magenta-tint) !important;
}

/* Submit-Button */
/* Submit-Button: gleiche Optik wie Newsletter-CTA (orange, 44px, 1px-border) */
body.layout-v2 .v2-comments button[type="submit"],
body.layout-v2 .v2-comments .cta-color100 {
	background:var(--orange) !important;
	color:#fff !important;
	border:1px solid var(--orange) !important;
	border-radius:var(--btn-radius) !important;
	padding:var(--btn-pad) !important;
	height:var(--btn-h) !important;
	line-height:1 !important;
	box-sizing:border-box !important;
	font-family:var(--sans) !important;
	font-size:var(--btn-fs) !important;
	font-weight:var(--btn-weight) !important;
	cursor:pointer !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:6px !important;
	text-decoration:none !important;
	margin:8px 0 0 !important;
	white-space:nowrap !important;
	box-shadow:none !important;
	transition:background 0.15s !important;
	max-width:none !important;
	width:auto !important;
	opacity:1 !important; /* v1 .cta-color100 hat opacity:0.7 — wegblenden */
}
body.layout-v2 .v2-comments button[type="submit"]:hover,
body.layout-v2 .v2-comments .cta-color100:hover {
	background:var(--orange-deep) !important;
	border-color:var(--orange-deep) !important;
	opacity:1 !important;
	transform:translateY(-1px);
}
body.layout-v2 .v2-comments button[type="submit"] i,
body.layout-v2 .v2-comments .cta-color100 i {
	font-size:var(--fs-sm) !important;
}

/* Form-Disclaimer "Ihr Name und Ihr Kommentar werden veroeffentlicht..."
   ONLY der p mit dem Datenschutz-Link, nicht alle p's in form. */
body.layout-v2 .v2-comments p:has(a[href*="/datenschutz/"]) {
	font-family:var(--sans) !important;
	font-size:var(--fs-xs) !important;
	color:var(--ink-3) !important;
	line-height:1.5 !important;
	margin:8px 0 14px !important;
}
/* Form-Heading H3 ausblenden — Eyebrow "Kommentare" + H2 "Aus der Praxis..."
   stehen schon drueber, der H3 waere Triplet-Heading. */
body.layout-v2 .v2-comments h3 {
	display:none !important;
}
/* comment.php rendert ein eigenes <h2>Kommentare</h2> — in v2 redundant,
   da Eyebrow + Section-H2 darueber schon stehen. Aber NUR das h2 ausserhalb
   der v2-section-h2-Klasse verstecken (die ist von _render.php gesetzt). */
body.layout-v2 .v2-comments h2:not(.v2-section-h2) {
	display:none !important;
}

/* Bestehende Kommentare — Body wieder etwas groesser fuer Lesbarkeit */
body.layout-v2 .v2-comments .comment {
	font-family:var(--serif);
	font-size:var(--fs-sm);
	line-height:1.6;
	color:var(--ink-2);
	padding:16px 0;
	border-top:1px solid var(--rule);
}
body.layout-v2 .v2-comments .comment:first-of-type {
	border-top:0;
}
body.layout-v2 .v2-comments .comment p {
	margin:0 0 6px;
}
body.layout-v2 .v2-comments .comment strong {
	color:var(--ink);
	font-weight:600;
}
body.layout-v2 .v2-comments .commentautor {
	margin:14px 0 0 24px !important;
	padding:14px 18px !important;
	background:var(--magenta-tint) !important;
	border-left:3px solid var(--magenta) !important;
	border-radius:0 6px 6px 0 !important;
	font-family:var(--serif) !important;
	font-size:var(--fs-sm) !important;
	line-height:1.6 !important;
}

/* ---------- Quellen ---------- */
body.layout-v2 .v2-prose .v2-quellen {
	margin-top:48px;
	padding-top:32px;
	border-top:1px solid var(--rule);
}
body.layout-v2 .v2-prose .v2-quellen-intro {
	font-family:var(--serif);
	font-size:var(--fs-sm);
	line-height:1.55;
	color:var(--ink-3);
	margin-bottom:14px;
}
body.layout-v2 .v2-prose .v2-quellen ul {
	list-style:none;
	padding-left:24px;  /* gleiche Einrueckung wie andere v2-Prose-Listen */
	margin:0;
}
body.layout-v2 .v2-prose .v2-quellen ul li {
	padding-left:22px;
	margin-bottom:8px;
	font-family:var(--serif);
	font-size:var(--fs-sm);
	line-height:1.45;
	position:relative;
}
/* Magenta-Dash per <li> — gleicher Strich wie bei den anderen v2-Prose-Listen,
   nur dass die Generic-Regel die .v2-quellen-Klasse via [class*="v2-"] aussschliesst. */
body.layout-v2 .v2-prose .v2-quellen ul li::before {
	content:"";
	position:absolute;
	left:0;
	top:13px;
	width:14px;
	height:1.5px;
	background:var(--magenta);
}
body.layout-v2 .v2-prose .v2-quellen li i {
	display:none;
}

/* ---------- Autor-Block ---------- */
body.layout-v2 .v2-prose .v2-author-block-bottom {
	margin-top:32px;
	background:#fff;
	border:1px solid var(--rule);
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 4px 16px -8px rgba(40,30,20,0.12);
	min-width:0;
	max-width:100%;
	box-sizing:border-box;
}
body.layout-v2 .v2-author-bottom-eyebrow-row {
	background:linear-gradient(90deg, var(--magenta) 0%, var(--magenta) 8px, transparent 8px, transparent 100%);
	padding:14px 28px 14px 24px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-bottom:1px solid var(--rule);
	gap:14px;
	flex-wrap:wrap;
}
body.layout-v2 .v2-author-bottom-eyebrow-row .v2-section-eyebrow {
	margin-bottom:0;
}
body.layout-v2 .v2-author-bottom-live {
	display:flex;
	align-items:center;
	gap:6px;
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.04em;
	color:var(--ink-3);
}
body.layout-v2 .v2-author-bottom-livedot {
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--green);
	flex-shrink:0;
	animation:v2-pulse 2s infinite;
}
body.layout-v2 .v2-author-bottom-main {
	padding:28px 32px;
	display:grid;
	grid-template-columns:minmax(80px, 130px) minmax(0, 1fr);
	gap:20px;
	min-width:0;
	align-items:start;
}
body.layout-v2 .v2-author-bottom-pic img {
	width:100%;
	max-width:130px;
	height:auto;
	aspect-ratio:1;
	border-radius:50%;
	display:block;
	border:0 !important;
	object-fit:cover;
}
/* DVEV-Mitgliedschafts-Badge */
body.layout-v2 .v2-author-bottom-membership {
	display:flex;
	align-items:center;
	gap:14px;
	margin:0 0 18px;
	padding:12px 14px;
	background:var(--rule-2);
	border-radius:6px;
	font-family:var(--serif);
	font-size:14px;
	line-height:1.45;
	color:var(--ink-2);
}
body.layout-v2 .v2-author-bottom-membership img {
	height:40px;
	width:auto;
	flex-shrink:0;
	display:block;
}
body.layout-v2 .v2-author-bottom-name {
	font-family:var(--serif);
	font-size:28px;
	font-weight:600;
	color:var(--ink) !important;
	margin:0 0 4px;
	line-height:1.15;
}
body.layout-v2 .v2-author-bottom-role {
	font-family:var(--sans);
	font-size:14px;
	color:var(--ink-3);
	margin-bottom:14px;
	font-weight:500;
}
body.layout-v2 .v2-author-bottom-bio {
	font-family:var(--serif);
	font-size:var(--fs-sm);
	line-height:1.6;
	color:var(--ink-2);
	margin:0 0 18px;
}
/* Autor-Bottom-CTAs: Wenn moeglich alle in EINER Zeile (auf Desktop),
   sonst natuerliches Wrap (2+1 oder 1+1+1) — kein Stack-Erzwang. */
body.layout-v2 .v2-author-bottom-ctas {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	width:100%;
}
body.layout-v2 .v2-author-bottom-cta {
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	padding:var(--btn-pad-sm) !important;
	height:var(--btn-h-sm) !important;
	line-height:1 !important;
	box-sizing:border-box !important;
	border-radius:var(--btn-radius) !important;
	text-decoration:none !important;
	font-family:var(--sans) !important;
	font-size:var(--btn-fs-sm) !important;
	font-weight:var(--btn-weight-sm) !important;
	opacity:1 !important;
	border:1px solid transparent !important;
	/* flex:1 1 0 → Items teilen die Zeile gleichmaessig auf. Mit
	   white-space:nowrap koennen sie nicht unter ihre Text-Breite
	   schrumpfen → wenn das Item-Min nicht alle in eine Zeile passt,
	   wrappt das Layout natuerlich (2+1 oder 1+1+1). */
	flex:1 1 0 !important;
	text-align:center !important;
	white-space:nowrap !important;
}
body.layout-v2 .v2-author-bottom-cta-primary {
	background:var(--magenta) !important;
	color:#fff !important;
}
body.layout-v2 .v2-author-bottom-cta-primary:hover {
	background:var(--magenta-deep) !important;
}
body.layout-v2 .v2-author-bottom-cta-secondary {
	background:transparent !important;
	color:var(--magenta) !important;
	border-color:var(--magenta) !important;
}
body.layout-v2 .v2-author-bottom-cta-secondary:hover {
	background:var(--magenta-tint) !important;
}
/* Schmale Container (auch im 2-Spalter-Tablet wenn Article < 600px wird):
   Avatar darueber statt daneben, Buttons gestapelt. */
@media (max-width:880px) {
	body.layout-v2 .v2-author-bottom-main {
		grid-template-columns:1fr;
		padding:20px 22px;
	}
	body.layout-v2 .v2-author-bottom-pic img {
		width:120px;
		max-width:120px;
	}
	body.layout-v2 .v2-author-bottom-ctas {
		flex-wrap:wrap;
	}
	body.layout-v2 .v2-author-bottom-cta {
		flex:1 1 calc(50% - 4px) !important;
	}
}

/* ============================================================
   Startseite v2 — Intro + Trust-Row + Bekannt-aus-Box + Topic-Grid
   ============================================================ */

/* Intro-Block oberhalb der WiWo-Quote — typografisch gross, gut lesbar */
body.layout-v2 .v2-prose .v2-st-intro {
	margin:8px 0 32px;
}
body.layout-v2 .v2-prose .v2-st-intro .v2-st-lead {
	font-family:var(--serif);
	font-size:21px;
	line-height:1.55;
	color:var(--ink);
	margin:0 0 22px;
	max-width:none !important;
}
body.layout-v2 .v2-prose .v2-st-intro .v2-st-lead b {
	font-weight:600;
	color:var(--ink);
}
body.layout-v2 .v2-prose .v2-st-intro-list {
	list-style:none !important;
	padding:0 !important;
	margin:0 0 24px !important;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px 28px;
	max-width:none !important;
}
@media (max-width:879px) {
	body.layout-v2 .v2-prose .v2-st-intro-list {
		grid-template-columns:1fr;
		gap:8px;
	}
}
body.layout-v2 .v2-prose .v2-st-intro-list li {
	font-family:var(--serif);
	font-size:16px;
	line-height:1.45;
	color:var(--ink-2);
	padding:0 0 0 22px !important;
	margin:0 !important;
	background:transparent !important;
	border:0 !important;
	position:relative;
}
body.layout-v2 .v2-prose .v2-st-intro-list li::before {
	content:"";
	position:absolute;
	left:0;
	top:11px;
	width:14px;
	height:1.5px;
	background:var(--magenta);
}
body.layout-v2 .v2-prose .v2-st-intro-list li b {
	font-weight:600;
	color:var(--ink);
}
body.layout-v2 .v2-prose .v2-st-intro-conclude {
	font-family:var(--serif);
	font-size:18px;
	line-height:1.6;
	color:var(--ink-2);
	margin:0;
	padding:18px 22px;
	background:var(--rule-2);
	border-left:3px solid var(--magenta);
	border-radius:0 4px 4px 0;
	max-width:none !important;
}



/* Trust-Row: zwei separate Blocks nebeneinander.
   - Media (Bekannt aus → WiWo)
   - Seal (Versichert & geprueft → Exali)
   Jeder mit eigenem Label, klar abgesetzt. Auf Mobile vertikal gestackt. */
body.layout-v2 .v2-prose .v2-trust-row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
	margin:28px 0;
}
body.layout-v2 .v2-prose .v2-trust-block {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:14px;
	padding:20px 24px;
	background:#fff;
	border:1px solid var(--rule);
	border-radius:8px;
	transition:border-color 0.15s, box-shadow 0.15s;
}
body.layout-v2 .v2-prose .v2-trust-block:hover {
	border-color:var(--magenta-soft);
	box-shadow:0 6px 20px -10px rgba(132,14,113,0.18);
}
body.layout-v2 .v2-prose .v2-trust-block-label {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.16em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--magenta);
	line-height:1;
}
body.layout-v2 .v2-prose .v2-trust-block-logo {
	display:inline-flex;
	align-items:center;
	border:0 !important;
	opacity:1 !important;
	transition:transform 0.15s;
}
body.layout-v2 .v2-prose .v2-trust-block-logo:hover {
	transform:translateY(-1px);
}
body.layout-v2 .v2-prose .v2-trust-block-logo picture {
	display:inline-block;
}
body.layout-v2 .v2-prose .v2-trust-block-logo img {
	display:block;
	width:auto;
	border:0 !important;
	max-width:none !important;
}
/* WiWo-Logo: gross + dominant */
body.layout-v2 .v2-prose .v2-trust-block--media .v2-trust-block-logo img {
	height:84px;
}
/* Exali-Siegel: quadratisch, gleich grosse Visual-Weight */
body.layout-v2 .v2-prose .v2-trust-block--seal .v2-trust-block-logo img {
	height:96px !important;
	width:96px !important;
}

/* Mobile: Trust-Row vertikal gestackt */
@media (max-width:639px) {
	body.layout-v2 .v2-prose .v2-trust-row {
		grid-template-columns:1fr;
		gap:12px;
	}
	body.layout-v2 .v2-prose .v2-trust-block {
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		gap:16px;
		padding:14px 18px;
	}
	body.layout-v2 .v2-prose .v2-trust-block--media .v2-trust-block-logo img {
		height:54px;
	}
	body.layout-v2 .v2-prose .v2-trust-block--seal .v2-trust-block-logo img {
		height:68px !important;
		width:68px !important;
	}
}

/* Bekannt-aus-Quote mit WiWo-Logo-Header */
body.layout-v2 .v2-prose .v2-bekannt-aus {
	margin:28px 0;
	padding:24px 28px;
	background:linear-gradient(135deg, #fbf6fa 0%, var(--paper) 100%);
	border-left:4px solid var(--magenta);
	border-radius:0 6px 6px 0;
}
body.layout-v2 .v2-prose .v2-bekannt-aus-header {
	display:flex;
	align-items:center;
	gap:18px;
	margin-bottom:18px;
	padding-bottom:16px;
	border-bottom:1px solid var(--rule);
}
body.layout-v2 .v2-prose .v2-bekannt-aus-label {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.16em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--magenta);
}
body.layout-v2 .v2-prose .v2-bekannt-aus-logo {
	display:inline-flex;
	align-items:center;
	border:0 !important;
	opacity:1 !important;
	transition:transform 0.15s;
}
body.layout-v2 .v2-prose .v2-bekannt-aus-logo:hover {
	transform:translateY(-1px);
}
body.layout-v2 .v2-prose .v2-bekannt-aus-logo picture {
	display:inline-block;
}
body.layout-v2 .v2-prose .v2-bekannt-aus-logo img {
	display:block;
	height:64px;
	width:auto;
	max-width:none !important;
	border:0 !important;
}
@media (max-width:639px) {
	body.layout-v2 .v2-prose .v2-bekannt-aus-logo img {
		height:48px;
	}
}

/* Mobile: Label oben, Logos drunter in eigener Zeile — kein wildes Wrappen */
@media (max-width:639px) {
	body.layout-v2 .v2-prose .v2-bekannt-aus {
		padding:20px 22px;
		margin:24px 0;
	}
	body.layout-v2 .v2-prose .v2-bekannt-aus-head {
		flex-direction:column;
		align-items:flex-start;
		gap:12px;
	}
	body.layout-v2 .v2-prose .v2-bekannt-aus-logos {
		gap:18px;
	}
	body.layout-v2 .v2-prose .v2-bekannt-aus-logo--wiwo img {
		height:58px;
	}
	body.layout-v2 .v2-prose .v2-bekannt-aus-logo--exali img {
		height:68px !important;
		width:68px !important;
	}
	body.layout-v2 .v2-prose .v2-bekannt-aus-quote {
		font-size:16px;
	}
}
body.layout-v2 .v2-prose .v2-bekannt-aus-quote {
	font-family:var(--serif);
	font-size:18px;
	line-height:1.55;
	font-style:italic;
	color:var(--ink-2);
	margin:0 0 12px;
	padding:0;
	border:0;
	max-width:none !important;
}
body.layout-v2 .v2-prose .v2-bekannt-aus-meta {
	font-family:var(--sans);
	font-size:14px;
	color:var(--ink-3);
	margin:0;
}

/* Topic-Grid: 2 Spalten Desktop, 1 Mobile. Cards mit Cover-Image und Body. */
body.layout-v2 .v2-prose .v2-st-topics {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:20px;
	margin:32px 0;
	max-width:none !important;
}
@media (max-width:879px) {
	body.layout-v2 .v2-prose .v2-st-topics {
		grid-template-columns:1fr;
		gap:16px;
	}
}
body.layout-v2 .v2-prose .v2-st-card {
	background:#fff;
	border:1px solid var(--rule);
	border-radius:10px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position:relative;
}
body.layout-v2 .v2-prose .v2-st-card:hover {
	transform:translateY(-2px);
	box-shadow:0 12px 32px -12px rgba(132,14,113,0.25);
	border-color:var(--magenta-soft);
}
body.layout-v2 .v2-prose .v2-st-card--highlight {
	border-color:var(--magenta);
	box-shadow:0 4px 16px -8px rgba(132,14,113,0.2);
}
body.layout-v2 .v2-prose .v2-st-card-cover {
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--magenta-tint);
	padding:24px;
	border:0 !important;
	border-bottom:1px solid var(--rule);
	height:170px;             /* fixer Cover-Bereich */
	box-sizing:border-box;
}
body.layout-v2 .v2-prose .v2-st-card-cover img {
	width:auto;
	max-width:100%;
	height:120px;             /* fixe Icon-Hoehe — alle Cards visuell gleich */
	max-height:120px;
	object-fit:contain;
	display:block;
	transition:transform 0.3s ease;
}
body.layout-v2 .v2-prose .v2-st-card:hover .v2-st-card-cover img {
	transform:scale(1.06);
}
body.layout-v2 .v2-prose .v2-st-card-body {
	padding:18px 22px 22px;
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:1 1 auto;
}
body.layout-v2 .v2-prose .v2-st-card-eyebrow {
	display:inline-block;
	align-self:flex-start;
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--magenta);
	background:var(--magenta-tint);
	padding:4px 10px;
	border-radius:99px;
}
/* Card-Title: ALLE Selektorvarianten bedienen damit auch wenn processHtml
   die Klasse strippt oder verschiebt, der Titel konsistent gross bleibt.
   Targets H2 mit Klasse + H2 direkt in Card-Body als Fallback. */
body.layout-v2 .v2-prose .v2-st-card-title,
body.layout-v2 .v2-prose .v2-st-card-body > h2,
body.layout-v2 .v2-prose .v2-st-card > h2 {
	font-family:var(--serif) !important;
	font-size:28px !important;
	font-weight:600 !important;
	letter-spacing:-0.005em !important;
	margin:0 !important;
	padding:0 !important;
	line-height:1.25 !important;
	border:0 !important;
	scroll-margin-top:0 !important;
	max-width:none !important;
	color:var(--magenta) !important;
}
/* Titel-Link in allen States identisch — link, visited, hover, focus.
   Mehrere Selektoren bedienen falls processHtml die Klasse aus dem H2 strippt. */
body.layout-v2 .v2-prose .v2-st-card-title a,
body.layout-v2 .v2-prose .v2-st-card-title a:link,
body.layout-v2 .v2-prose .v2-st-card-title a:visited,
body.layout-v2 .v2-prose .v2-st-card-body > h2 a,
body.layout-v2 .v2-prose .v2-st-card-body > h2 a:link,
body.layout-v2 .v2-prose .v2-st-card-body > h2 a:visited {
	color:var(--magenta) !important;
	border:0 !important;
	text-decoration:none !important;
	background:none !important;
	font-size:inherit !important;
	font-family:inherit !important;
	font-weight:inherit !important;
}
body.layout-v2 .v2-prose .v2-st-card-title a:hover,
body.layout-v2 .v2-prose .v2-st-card-title a:focus,
body.layout-v2 .v2-prose .v2-st-card-body > h2 a:hover,
body.layout-v2 .v2-prose .v2-st-card-body > h2 a:focus {
	color:var(--magenta-deep) !important;
}
body.layout-v2 .v2-prose .v2-st-card-body > p {
	font-family:var(--serif);
	font-size:16px;
	line-height:1.55;
	color:var(--ink-2);
	margin:0;
	max-width:none !important;
}
/* Falls processHtml doch einen Auto-Link in den Body-Text einbaut:
   konsistent als Fett-Magenta darstellen, nicht als anders-formatierter Inline-Link */
body.layout-v2 .v2-prose .v2-st-card-body > p a {
	color:var(--magenta) !important;
	font-weight:600 !important;
	text-decoration:none !important;
	border:0 !important;
	background:none !important;
}
body.layout-v2 .v2-prose .v2-st-card-body > p a:hover {
	color:var(--magenta-deep) !important;
}
body.layout-v2 .v2-prose .v2-st-card-links {
	list-style:none !important;
	padding:0 !important;
	margin:6px 0 0 !important;
	display:flex;
	flex-direction:column;
	gap:4px;
}
body.layout-v2 .v2-prose .v2-st-card-links li {
	padding:0 !important;
	margin:0 !important;
	position:static;
	background:none !important;
}
body.layout-v2 .v2-prose .v2-st-card-links li::before {
	content:none !important;
	display:none !important;
}
body.layout-v2 .v2-prose .v2-st-card-links a {
	display:flex;
	align-items:center;
	gap:6px;
	padding:6px 0;
	font-family:var(--sans);
	font-size:14px;
	font-weight:500;
	color:var(--magenta) !important;
	text-decoration:none !important;
	border:0 !important;
	opacity:1 !important;
	transition:gap 0.15s ease;
}
body.layout-v2 .v2-prose .v2-st-card-links a::before {
	content:"\2192"; /* → */
	color:var(--magenta);
	font-weight:600;
	transition:transform 0.15s ease;
}
body.layout-v2 .v2-prose .v2-st-card-links a:hover {
	color:var(--magenta-deep) !important;
	gap:10px;
}

/* ============================================================
   KI-Stage v2 — uebersteuert v1-HTML aus insertKiStage()
   ("Ihr Muster ... mit KI erstellen"-Box mitten im Artikel).
   Klar als interaktives Tool-Element abgesetzt: Paper-Bg + Magenta-Akzent.
   ============================================================ */
body.layout-v2 .v2-prose #kisuche {
	margin:32px 0;
}
body.layout-v2 .v2-prose #kisuche .boxteil2mitrahmen {
	background:#fff !important;
	border:1px solid var(--rule) !important;
	border-left:4px solid var(--magenta) !important;
	border-radius:6px !important;
	padding:28px 32px !important;
	max-width:none !important;
	box-shadow:0 4px 16px -8px rgba(40,30,20,0.12);
	text-align:left !important;
}
body.layout-v2 .v2-prose #kisuche h2,
body.layout-v2 .v2-prose #kisuche h2.noiv {
	font-family:var(--serif) !important;
	font-size:21px !important;
	font-weight:600 !important;
	color:var(--ink) !important;
	margin:0 0 16px !important;
	letter-spacing:-0.005em;
	border:0 !important;
	max-width:none !important;
}
body.layout-v2 .v2-prose #kisuche img {
	display:block;
	max-width:160px;
	height:auto !important;
	margin:0 0 16px;
	border-radius:6px;
}
body.layout-v2 .v2-prose #kisuche ul.fa-ul {
	list-style:none !important;
	padding:0 !important;
	margin:0 0 20px !important;
	max-width:none !important;
}
body.layout-v2 .v2-prose #kisuche ul.fa-ul li {
	font-family:var(--serif) !important;
	font-size:16px !important;
	line-height:1.5 !important;
	color:var(--ink-2) !important;
	padding:0 0 0 22px !important;
	margin:0 0 8px !important;
	background:transparent !important;
	border:0 !important;
	position:relative;
}
body.layout-v2 .v2-prose #kisuche ul.fa-ul li::before {
	content:"";
	position:absolute;
	left:0;
	top:11px;
	width:14px;
	height:1.5px;
	background:var(--magenta);
}
body.layout-v2 .v2-prose #kisuche ul.fa-ul li .fa-li,
body.layout-v2 .v2-prose #kisuche ul.fa-ul li i,
body.layout-v2 .v2-prose #kisuche ul.fa-ul li [class*="icon-"] {
	display:none !important;
}
body.layout-v2 .v2-prose #kisuche ul.fa-ul li b {
	color:var(--ink) !important;
	font-weight:600 !important;
}
body.layout-v2 .v2-prose #kisuche .cta-submit-orange {
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	gap:8px;
	background:var(--orange) !important;
	color:#fff !important;
	border:1px solid var(--orange) !important;
	border-radius:var(--btn-radius) !important;
	padding:var(--btn-pad) !important;
	height:var(--btn-h) !important;
	line-height:1 !important;
	box-sizing:border-box !important;
	font-family:var(--sans) !important;
	font-size:var(--btn-fs) !important;
	font-weight:var(--btn-weight) !important;
	cursor:pointer;
	box-shadow:none !important;
	transition:background 0.15s, transform 0.1s;
	margin:8px 0 0 !important;
}
body.layout-v2 .v2-prose #kisuche .cta-submit-orange:hover {
	background:var(--orange-deep) !important;
	transform:translateY(-1px);
}
body.layout-v2 .v2-prose #kisuche textarea.textarea {
	width:100%;
	box-sizing:border-box;
	background:#fff !important;
	border:1px solid var(--rule) !important;
	border-radius:6px !important;
	padding:12px 16px !important;
	font-family:var(--sans) !important;
	font-size:16px !important;
	color:var(--ink) !important;
	resize:vertical;
	min-height:64px;
}
/* Trust-Seals + hr in der Box klein/dezent, oder ganz raus (sind schon im Footer) */
body.layout-v2 .v2-prose #kisuche hr {
	display:none;
}
body.layout-v2 .v2-prose #kisuche > .boxteil2mitrahmen > div:last-child {
	display:none !important; /* Trust-Seal-Wand ausblenden, sind schon im Footer */
}

/* ============================================================
   Newsletter-Signup v2 — uebersteuert v1-HTML aus $leadNewsletter
   (boxteil1 > boxteil2ohnerahmen > info-box-contrast-dark)
   Magenta-Box statt v1-Dunkel, Plex-Fonts, runder Avatar, Orange-CTA.
   ============================================================ */
/* Newsletter: Magenta-Gradient-Hintergrund (Brand!) + Author-Box-Aufbau
   (Avatar links, Content rechts) via float. */
body.layout-v2 .v2-prose .info-box-contrast-dark {
	background:linear-gradient(135deg, var(--magenta) 0%, var(--magenta-deep) 100%);
	color:#fff;
	padding:28px 32px;
	border:0;
	border-radius:10px;
	margin:32px 0;
	box-shadow:0 6px 20px -8px rgba(132,14,113,0.35);
}
body.layout-v2 .v2-prose .info-box-contrast-dark .infoboxcol,
body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left {
	all:unset !important;
	display:block !important;
	width:100% !important;
	max-width:none !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark h2 {
	font-family:var(--serif) !important;
	font-size:var(--fs-xl) !important;
	font-weight:600 !important;
	color:#fff !important;
	margin:0 0 6px !important;
	letter-spacing:-0.005em !important;
	line-height:1.2 !important;
	max-width:none !important;
	border:0 !important;
}
/* Avatar-Wrapper: DEFAULT ist gestapelt (Bild oben, Bullets darunter).
   Nur ab Desktop-Breite >=881px wird das Bild links gefloatet, sodass
   Bullets rechts um das Bild fliessen. Damit fallen alle Mobile/Tablet-
   Viewports automatisch ins Stack-Layout, ohne dass ein zweiter Media-
   Override ueberhaupt noetig waere. */
body.layout-v2 .v2-prose .info-box-contrast-dark > div[style*="text-align: center"]:has(.newslettericon),
body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left > div[style*="text-align: center"]:has(.newslettericon) {
	float:none !important;
	width:100% !important;
	margin:0 auto 14px !important;
	padding:0 !important;
	text-align:center !important;
	display:block !important;
}
@media (min-width:881px) {
	body.layout-v2 .v2-prose .info-box-contrast-dark > div[style*="text-align: center"]:has(.newslettericon),
	body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left > div[style*="text-align: center"]:has(.newslettericon) {
		float:left !important;
		width:130px !important;
		margin:4px 26px 8px 0 !important;
	}
}
body.layout-v2 .v2-prose .info-box-contrast-dark .newslettericon {
	width:130px !important;
	height:130px !important;
	border-radius:50% !important;
	border:3px solid rgba(255,255,255,0.25) !important;
	box-shadow:0 6px 18px -4px rgba(0,0,0,0.3) !important;
	margin:0 !important;
	display:block !important;
	background:#fff !important;
	object-fit:cover !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul {
	list-style:none !important;
	padding:0 !important;
	margin:14px 0 18px !important;
	display:flex !important;
	flex-direction:column !important;
	gap:8px !important;
	max-width:none !important;
}
/* Frei-Text "Durch Klick auf..." Disclaimer — unter dem Float, klein und weiss-transparent */
body.layout-v2 .v2-prose .info-box-contrast-dark > div[style*="text-align:center"]:last-child,
body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left > div[style*="text-align:center"]:last-child,
body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left > div[style*="text-align: center"]:last-child {
	color:rgba(255,255,255,0.75) !important;
	font-family:var(--sans) !important;
	font-size:var(--fs-xxs) !important;
	line-height:1.5 !important;
	text-align:left !important;
	margin:14px 0 0 !important;
	padding:0 !important;
	clear:both;
}
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li {
	font-family:var(--serif) !important;
	font-size:var(--fs-sm) !important;
	line-height:1.55 !important;
	color:#f5e8f1 !important;
	padding:0 0 0 22px !important;
	margin:0 !important;
	background:transparent !important;
	border:0 !important;
	position:relative;
}
/* Bullet: weisser Strich auf Magenta-Bg */
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li::before {
	content:"";
	position:absolute;
	left:0;
	top:11px;
	width:14px;
	height:1.5px;
	background:#fff;
	border-radius:0;
}
/* v1-Icon-Sprites in der Newsletter-Liste komplett wegmachen — sonst
   blitzen die durch unsere weisse Strich-Bullets. */
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li .fa-li,
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li i,
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li [class*="icon-"],
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li span.fa-li {
	display:none !important;
	visibility:hidden !important;
	font-size:0 !important;
	width:0 !important;
	height:0 !important;
	margin:0 !important;
	padding:0 !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li b {
	color:#fff !important;
	font-weight:600 !important;
}
/* v1-Inline-Wrapper-Div um die Form auf 100% zwingen */
body.layout-v2 .v2-prose .info-box-contrast-dark div[style*="display: flex"][style*="justify-content: center"] {
	display:block !important;
	width:100% !important;
	margin:0 !important;
	padding:0 !important;
	justify-content:flex-start !important;
}
/* Input + CTA nebeneinander, ZUSAMMEN volle Breite. Form clearfloat-t den
   Avatar — rueckt also UNTER den Avatar bzw. dessen Hoehe entlang voll aus. */
body.layout-v2 .v2-prose .info-box-contrast-dark .newsletterForm {
	display:flex !important;
	flex-direction:row !important;
	gap:8px !important;
	margin:14px 0 0 !important;
	max-width:none !important;
	width:100% !important;
	align-items:stretch !important;
	flex-wrap:wrap !important;
	clear:both !important;       /* unter den floated Avatar */
}
body.layout-v2 .v2-prose .info-box-contrast-dark .newsletterForm .input-wrapper {
	flex:1 1 auto !important;
	min-width:0 !important;
	width:auto !important;
	max-width:none !important;
	height:auto !important;
	display:block !important;
	padding:0 !important;
	margin:0 !important;
	position:static !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .input-text-dark {
	width:100% !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .cta-submit-orange {
	flex:0 0 auto !important;
	width:auto !important;
}
/* Hidden-Inputs nehmen keinen Platz im Flex */
body.layout-v2 .v2-prose .info-box-contrast-dark .newsletterForm input[type="hidden"],
body.layout-v2 .v2-prose .info-box-contrast-dark .newsletterForm .tnp-profile {
	display:none !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .newsletterForm .input-wrapper {
	width:100%;
	margin:0;
	padding:0;
	display:block;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .input-text-dark {
	width:100%;
	box-sizing:border-box;
	background:#fff !important;
	color:var(--ink) !important;
	border:1px solid var(--rule) !important;
	border-radius:6px !important;
	padding:0 16px !important;
	height:44px !important;
	line-height:42px !important;
	font-family:var(--sans) !important;
	font-size:var(--fs-sm) !important;
	box-shadow:none !important;
	outline:0 !important;
	margin:0 !important;
	display:block;
	box-sizing:border-box !important;
	width:100% !important;
	min-width:0 !important;
	max-width:none !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .input-text-dark::placeholder {
	color:var(--ink-4);
}
body.layout-v2 .v2-prose .info-box-contrast-dark .input-text-dark:focus {
	border-color:transparent !important;
	box-shadow:0 0 0 3px rgba(255,255,255,0.4) !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .cta-submit-orange {
	flex:0 0 auto !important;
	box-sizing:border-box !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:6px !important;
	background:var(--orange) !important;
	color:#fff !important;
	border:1px solid var(--orange) !important;
	border-radius:var(--btn-radius) !important;
	padding:var(--btn-pad) !important;
	height:var(--btn-h) !important;
	line-height:1 !important;
	font-family:var(--sans) !important;
	font-size:var(--btn-fs) !important;
	font-weight:var(--btn-weight) !important;
	cursor:pointer !important;
	box-shadow:none !important;
	transition:background 0.15s !important;
	margin:0 !important;
	white-space:nowrap !important;
	max-width:none !important;
	width:auto !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .cta-submit-orange:hover {
	background:var(--orange-deep) !important;
	transform:translateY(-1px);
}
body.layout-v2 .v2-prose .info-box-contrast-dark .cta-submit-orange i {
	font-size:var(--fs-sm);
}

/* Feedback-Message: bricht in eigene Zeile, full-width — kein Layout-Sprung */
body.layout-v2 .v2-prose .info-box-contrast-dark .feedbackMessage {
	font-family:var(--sans) !important;
	font-size:var(--fs-xs) !important;
	color:#fff !important;
	min-height:0 !important;
	margin:0 !important;
	box-sizing:border-box !important;
	flex-basis:100% !important;
	order:99 !important;
	width:100% !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .feedbackMessage:empty {
	display:none !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark .feedbackMessage:not(:empty) {
	background:rgba(255,255,255,0.15) !important;
	color:#fff !important;
	padding:10px 14px !important;
	border-radius:6px !important;
	margin:8px 0 0 !important;
	text-align:center !important;
	line-height:1.4 !important;
	display:block !important;
}

/* DISCLAIMER-TEXT (Frei-Text-Knoten "Durch Klick auf..." — er erbt sonst
   v2-prose Plex Serif 18px. Hier maximal-spezifisch zwingen. */
body.layout-v2 .v2-prose .info-box-contrast-dark,
body.layout-v2 .v2-prose .info-box-contrast-dark .infoboxcol,
body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left,
body.layout-v2 .v2-prose .info-box-contrast-dark > div,
body.layout-v2 .v2-prose .info-box-contrast-dark .lead-box-left > div {
	font-size:var(--fs-xxs);
	line-height:1.5;
	font-family:var(--sans);
}
/* H2 + Bullets duerfen wieder ihre eigenen Sizes haben — separat gesetzt */
body.layout-v2 .v2-prose .info-box-contrast-dark h2 {
	font-size:var(--fs-xl) !important;
	font-family:var(--serif) !important;
}
body.layout-v2 .v2-prose .info-box-contrast-dark ul.fa-ul li {
	font-size:var(--fs-sm) !important;
	font-family:var(--serif) !important;
}

/* Newsletter <=880px: Bildgroesse anpassen, Form column-stacken.
   (Float-none/Stack-Layout ist bereits Default oben; der @media-Override
   fuer Desktop-Float greift nur ab >=881px.) */
@media (max-width:880px) {
	body.layout-v2 .v2-prose .info-box-contrast-dark .newslettericon {
		width:120px !important;
		height:120px !important;
	}
	body.layout-v2 .v2-prose .info-box-contrast-dark .newsletterForm {
		flex-direction:column !important;
	}
}

/* Sehr schmal (<640px): kompaktere Grafik + reduziertes Padding. */
@media (max-width:639px) {
	body.layout-v2 .v2-prose .info-box-contrast-dark {
		padding:22px 20px;
	}
	body.layout-v2 .v2-prose .info-box-contrast-dark .newslettericon {
		width:90px !important;
		height:90px !important;
	}
	body.layout-v2 .v2-prose .info-box-contrast-dark h2 {
		font-size:18px !important;
	}
}

/* ============================================================
   P1.8 — Footer v2
   ============================================================ */
body.layout-v2 .v2-footer {
	background:var(--ink);
	color:#cfc7b6;
	padding:40px 32px 0;
	font-family:var(--sans);
	font-size:14px;
	margin-top:16px;     /* war 48px — Content schliesst kompakter an Footer an */
}
/* Affiliate-Stern-Disclaimer am Artikel-Ende — Groesse wie Quellen-Intro:
   gut lesbar, aber kein Artikel-Text. */
body.layout-v2 .v2-prose .v2-affiliate-disclaimer {
	margin:36px 0 18px;
	font-family:var(--serif);
	font-size:16px;
	line-height:1.55;
	color:var(--ink-3);
	padding:16px 18px;
	background:var(--rule-2);
	border-left:3px solid var(--magenta);
	border-radius:0 6px 6px 0;
	max-width:none;
}
body.layout-v2 .v2-prose .v2-affiliate-disclaimer b {
	color:var(--ink);
	font-weight:600;
}

/* Footer-Grid: Brand links, Cluster-Bereich rechts (auto-fluessig).
   Cluster-Wrap nutzt repeat(auto-fit, minmax(180px, 1fr)) — wachsen mit
   beliebig vielen Kategorien, stapeln automatisch in mehrere Reihen. */
body.layout-v2 .v2-footer-grid {
	max-width:1400px;
	margin:0 auto;
	display:grid;
	grid-template-columns:minmax(240px, 1.3fr) minmax(0, 4fr);
	gap:36px;
	padding-bottom:28px;
	border-bottom:1px solid #3a342f;
}
body.layout-v2 .v2-footer-clusters-wrap {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:28px 24px;
	align-content:start;
}
body.layout-v2 .v2-footer-brand {
	max-width:34ch;
}
body.layout-v2 .v2-footer-logo {
	max-width:100%;
	width:auto;
	height:auto;
	max-height:60px;
	display:block;
	object-fit:contain;
	background:#fff;
	padding:8px 12px;
	box-sizing:border-box;
	border-radius:4px;
	margin-bottom:16px;
}
body.layout-v2 .v2-footer-claim {
	font-family:var(--serif);
	font-size:14px;
	line-height:1.55;
	color:#cfc7b6;
	margin:0 0 18px;
}
body.layout-v2 .v2-footer-trust-mini {
	display:flex;
	gap:18px;
	align-items:center;
	flex-wrap:wrap;
}
body.layout-v2 .v2-footer-trust-mini img {
	height:44px !important;
	width:auto;
	opacity:0.85;
	transition:opacity 0.15s;
}
body.layout-v2 .v2-footer-trust-mini img:hover {
	opacity:1;
}
body.layout-v2 .v2-footer-h5 {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:#8a8278;
	font-weight:600;
	margin:0 0 14px;
	line-height:1.3;
	text-wrap:balance;
	word-break:keep-all;
	overflow-wrap:break-word;
	hyphens:manual;
	min-height:2.6em; /* zwei Zeilen Reserve, damit Listen alle gleich starten */
	display:flex;
	align-items:flex-end;
	padding-bottom:6px;
	border-bottom:1px solid #3a342f;
}
body.layout-v2 .v2-footer-list {
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
body.layout-v2 .v2-footer-list a {
	color:#cfc7b6 !important;
	text-decoration:none !important;
	font-size:14px !important;
	font-family:var(--serif);
	font-weight:400 !important;
	opacity:1 !important;
	border:0 !important;
	display:inline-block;
	transition:color 0.15s;
}
body.layout-v2 .v2-footer-list a:hover {
	color:#fff !important;
}
/* Compact-Footer-Bar: Nav-Links + Trust-Logos + Copyright/Legal in einer Zeile.
   Drei Zonen verteilen sich via space-between, wrappen sauber auf schmalen Viewports. */
body.layout-v2 .v2-footer-bar {
	max-width:1400px;
	margin:0 auto;
	padding:20px 0 24px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:24px;
	flex-wrap:wrap;
	font-family:var(--sans);
	font-size:14px;
	color:#8a8278;
}
body.layout-v2 .v2-footer-bar-nav {
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	align-items:center;
}
body.layout-v2 .v2-footer-bar-nav a {
	color:#cfc7b6 !important;
	text-decoration:none !important;
	border:0 !important;
	opacity:1 !important;
	font-weight:500 !important;
	font-size:14px;
}
body.layout-v2 .v2-footer-bar-nav a:hover {
	color:#fff !important;
	text-decoration:underline !important;
}
body.layout-v2 .v2-footer-bar-trust {
	display:flex;
	gap:16px;
	align-items:center;
	flex-wrap:wrap;
}
body.layout-v2 .v2-footer-bar-trust img {
	height:36px;
	width:auto;
	opacity:0.85;
	transition:opacity 0.15s;
}
body.layout-v2 .v2-footer-bar-trust img:hover {
	opacity:1;
}
body.layout-v2 .v2-footer-bar-meta {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:6px;
	color:#8a8278;
	font-size:12px;
	letter-spacing:0.02em;
}
body.layout-v2 .v2-footer-bar-meta .v2-footer-copyright {
	white-space:nowrap;
}
body.layout-v2 .v2-footer-legal {
	display:flex;
	gap:14px;
}
body.layout-v2 .v2-footer-legal a {
	color:#8a8278 !important;
	text-decoration:none !important;
	font-weight:400 !important;
	opacity:1 !important;
	border:0 !important;
	font-size:12px;
}
body.layout-v2 .v2-footer-legal a:hover {
	color:#fff !important;
}
@media (max-width:680px) {
	body.layout-v2 .v2-footer-bar-meta {
		align-items:flex-start;
	}
}

@media (max-width:1180px) {
	body.layout-v2 .v2-footer { padding:40px 20px 0; }
	body.layout-v2 .v2-footer-grid { gap:28px; }
	body.layout-v2 .v2-footer-clusters-wrap { grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:20px; }
}
@media (max-width:880px) {
	body.layout-v2 .v2-footer-grid {
		grid-template-columns:1fr;
		gap:28px;
	}
}
@media (max-width:540px) {
	body.layout-v2 .v2-footer-clusters-wrap { grid-template-columns:1fr; }
	body.layout-v2 .v2-footer-bar { flex-direction:column; align-items:flex-start; }
}
.v2-prose h2 {
	font-family:var(--serif);
	font-size:28px;
	font-weight:600;
	line-height:1.2;
	color:var(--magenta);
	margin:36px 0 14px;
	letter-spacing:-0.005em;
}

/* Globale Scroll-Marge fuer alle Anker-Sprungpunkte in v2 —
   Navbar ~80px hoch, 20px Atemraum = 100px Buffer.
   KEIN scroll-padding-top auf <html> — verhindert in manchen Chrome-Versionen
   das vollstaendige Scrollen zum Top und versteckt damit die Breadcrumb. */
/* scroll-margin-top auf Targets: addiert sich zu html scroll-padding-top.
   Fuer H2/H3 brauchen wir ZUSAETZLICH Platz fuer "Abschnitt N von X"-Label
   (~40px hoch) ueber dem Heading — sonst verschwindet das Label hinter
   dem Sticky-Stack. Wir lesen den Wert auch JS-seitig aus (siehe TOC-
   Handler und v2SetMtab). */
body.layout-v2 .v2-prose h2[id],
body.layout-v2 .v2-prose h3[id] {
	/* "Abschnitt N von X"-Label sitzt direkt ueber dem H2 (~30px hoch) +
	   etwas Atem. Sonst rutscht das Label hinter die Navbar nach dem Sprung. */
	scroll-margin-top:50px !important;
}
/* Rechner-/Wegweiser-/FAQ-Sprungziele: Atem-Buffer damit die Navbar nach
   dem Sprung keine Iframe-Oberkante / FAQ-Frage verdeckt. */
body.layout-v2 #wegweiser-embed-anchor,
body.layout-v2 .leadStageMarker,
body.layout-v2 #scrollMarkwegweiser,
body.layout-v2 #scrollMark,
body.layout-v2 #scrollMarkintern,
body.layout-v2 .v2-faq-item[id] {
	scroll-margin-top:30px !important;
}
.v2-prose h2:first-child { margin-top:0; }
.v2-prose h3 {
	font-family:var(--serif);
	font-size:21px;
	font-weight:600;
	color:var(--ink);
	margin:24px 0 8px;
}
.v2-prose p { margin:0 0 16px; }
.v2-prose p strong { color:var(--ink); font-weight:600; }
.v2-prose a {
	color:var(--magenta);
	text-decoration:none;
	border-bottom:1px solid var(--magenta-soft);
}
.v2-prose a:hover { border-bottom-color:var(--magenta); }

/* ====================================================================
   WEGWEISER — Primary Lead-CTA der Site. Drei komplementaere Layer:
   1) Hero-Card direkt nach H1 (Desktop + Mobile)
   2) Sticky-Side-CTA unter TOC (nur Desktop ≥1280px)
   3) Mobile-Strip unter Tabs (nur Mobile <880px, nur Artikel-Tab)
   Alle drei zeigen auf #wegweiser-embed-anchor (Inline-iframe).
   ==================================================================== */

/* === Layer 1: Hero-Card =========================================== */
body.layout-v2 .v2-wegweiser-hero {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	margin:18px 0 24px;
	padding:18px 22px;
	background:linear-gradient(135deg, var(--magenta) 0%, var(--magenta-deep) 100%);
	color:#fff;
	border-radius:10px;
	text-decoration:none !important;
	border:0 !important;
	box-shadow:0 6px 20px -8px rgba(132,14,113,0.4);
	transition:transform 0.15s, box-shadow 0.15s;
	flex-wrap:wrap;
	overflow:hidden;
}
/* Subtiler Glanz-Sweep statt Pulse-Dot — diagonale Lichtkante wandert
   alle 8s ueber die Card. Auffaellig genug, aber nicht penetrant blinkend. */
body.layout-v2 .v2-wegweiser-hero::before {
	content:"";
	position:absolute;
	top:0; bottom:0;
	left:-30%;
	width:60%;
	background:linear-gradient(105deg,
		transparent 0%,
		rgba(255,255,255,0) 30%,
		rgba(255,255,255,0.22) 50%,
		rgba(255,255,255,0) 70%,
		transparent 100%);
	transform:translateX(0);
	animation:v2-wegweiser-shine 8s ease-in-out infinite;
	pointer-events:none;
}
@keyframes v2-wegweiser-shine {
	0%, 70% { transform:translateX(0); opacity:0; }
	75%     { opacity:1; }
	100%    { transform:translateX(380%); opacity:0; }
}
body.layout-v2 .v2-wegweiser-hero:hover {
	/* Dezent: keine Vertikal-Bewegung, nur leichte Shadow-Verstaerkung.
	   Der Pfeil-Slide im CTA reicht als Mikro-Interaktion. */
	box-shadow:0 8px 22px -8px rgba(132,14,113,0.45);
}
body.layout-v2 .v2-wegweiser-hero-body {
	flex:1 1 auto;
	min-width:0;
}
body.layout-v2 .v2-wegweiser-hero-eyebrow {
	display:flex;
	align-items:center;
	gap:8px;
	font-family:var(--sans);
	font-size:var(--fs-xxs);
	letter-spacing:0.16em;
	text-transform:uppercase;
	font-weight:700;
	color:rgba(255,255,255,0.85);
	margin-bottom:8px;
}
body.layout-v2 .v2-wegweiser-hero-headline {
	font-family:var(--serif);
	font-size:var(--fs-lg);
	font-weight:600;
	line-height:1.25;
	margin-bottom:4px;
	color:#fff;
}
body.layout-v2 .v2-wegweiser-hero-sub {
	font-family:var(--sans);
	font-size:var(--fs-sm);
	line-height:1.4;
	color:rgba(255,255,255,0.85);
}
body.layout-v2 .v2-wegweiser-hero-cta {
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:var(--btn-pad);
	height:var(--btn-h);
	background:var(--orange);
	color:#fff !important;
	border:1px solid var(--orange);
	border-radius:var(--btn-radius);
	font-family:var(--sans);
	font-size:var(--btn-fs);
	font-weight:var(--btn-weight);
	white-space:nowrap;
	flex-shrink:0;
	transition:background 0.15s;
}
body.layout-v2 .v2-wegweiser-hero:hover .v2-wegweiser-hero-cta {
	background:var(--orange-deep);
	border-color:var(--orange-deep);
}
@media (max-width:639px) {
	body.layout-v2 .v2-wegweiser-hero {
		padding:14px 16px;
		gap:12px;
		flex-direction:column;
		align-items:flex-start;
	}
	body.layout-v2 .v2-wegweiser-hero-headline {
		font-size:var(--fs-md);
	}
	body.layout-v2 .v2-wegweiser-hero-cta {
		/* Auf Mobile compact (kein full-width), wie auf Desktop. */
		align-self:flex-start;
		width:auto;
		height:42px;
		padding:0 18px;
		font-size:var(--fs-xs);
	}
}

/* === Layer 2: Side-CTA unter TOC (Desktop only) ===================
   Mittlerer Auffaelligkeitsgrad: Magenta-Tint-Hintergrund (vorher rein
   weiss = zu zurueckhaltend), Magenta-Eyebrow, dunkles Headline, ORANGE-
   BUTTON als CTA (statt nur Text-Link). Das Orange ist der Action-Anker. */
body.layout-v2 .v2-wegweiser-side {
	position:relative;
	display:flex;
	flex-direction:column;
	gap:4px;
	margin-top:24px;
	padding:14px 14px 12px;
	background:var(--magenta-tint);
	border:1px solid color-mix(in srgb, var(--magenta) 22%, transparent);
	border-left:4px solid var(--magenta);
	border-radius:6px;
	text-decoration:none !important;
	box-shadow:0 2px 6px -2px rgba(132,14,113,0.12);
	transition:transform 0.15s, box-shadow 0.15s, border-color 0.15s;
	overflow:hidden;
}
/* Sanfter Shimmer-Sweep — deutlich langsamer (14s statt 8s) und schwaecher
   als der Hero-Sweep. Der Sidebar-Card sitzt in Peripheral-Sicht waehrend
   der User liest; konstante Aufmerksamkeit wuerde stoeren. */
body.layout-v2 .v2-wegweiser-side::before {
	content:"";
	position:absolute;
	top:0; bottom:0;
	left:-30%;
	width:55%;
	background:linear-gradient(105deg,
		transparent 0%,
		rgba(255,255,255,0) 30%,
		rgba(255,255,255,0.5) 50%,
		rgba(255,255,255,0) 70%,
		transparent 100%);
	animation:v2-wegweiser-shine-side 14s ease-in-out infinite;
	pointer-events:none;
}
@keyframes v2-wegweiser-shine-side {
	0%, 80% { transform:translateX(0); opacity:0; }
	85%     { opacity:1; }
	100%    { transform:translateX(380%); opacity:0; }
}
body.layout-v2 .v2-wegweiser-side:hover {
	transform:translateY(-1px);
	box-shadow:0 6px 16px -4px rgba(132,14,113,0.25);
	border-left-color:var(--magenta-deep, var(--magenta));
}
body.layout-v2 .v2-wegweiser-side-eyebrow {
	display:block;
	font-family:var(--sans);
	font-size:var(--fs-xxs);
	letter-spacing:0.18em;
	text-transform:uppercase;
	font-weight:700;
	color:var(--magenta);
}
body.layout-v2 .v2-wegweiser-side-headline {
	display:block;
	font-family:var(--serif);
	font-size:var(--fs-sm);
	line-height:1.3;
	font-weight:600;
	color:var(--ink);
	margin:4px 0 10px;
}
/* CTA wird zum richtigen Button (orange, gleicher Stil wie Newsletter etc.,
   nur Compact-Variante fuer den Sidebar-Kontext). */
body.layout-v2 .v2-wegweiser-side-cta {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:var(--btn-pad-sm);
	height:var(--btn-h-sm);
	background:var(--orange);
	color:#fff !important;
	border:1px solid var(--orange);
	border-radius:var(--btn-radius);
	font-family:var(--sans);
	font-size:var(--btn-fs-sm);
	font-weight:var(--btn-weight);
	letter-spacing:0;
	white-space:nowrap;
	transition:background 0.15s, transform 0.15s;
}
body.layout-v2 .v2-wegweiser-side:hover .v2-wegweiser-side-cta {
	background:var(--orange-deep);
	border-color:var(--orange-deep);
}
/* Hide Side-CTA auf Tablet (kein TOC-Sidebar) */
@media (max-width:1279px) {
	body.layout-v2 .v2-wegweiser-side {
		display:none;
	}
}

/* === Layer 3: Mobile-Strip unter Tabs (Mobile only) =============== */
body.layout-v2 .v2-wegweiser-mstrip {
	display:none;        /* default: hidden; Mobile @media schaltet ein */
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:10px 16px;
	background:linear-gradient(135deg, var(--magenta) 0%, var(--magenta-deep) 100%);
	color:#fff;
	text-decoration:none !important;
	border:0 !important;
}
body.layout-v2 .v2-wegweiser-mstrip-label {
	font-family:var(--sans);
	font-size:var(--fs-xs);
	font-weight:600;
	line-height:1.3;
	color:#fff;
	flex:1 1 auto;
	min-width:0;
}
body.layout-v2 .v2-wegweiser-mstrip-cta {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:var(--btn-pad-sm);
	height:var(--btn-h-sm);
	background:var(--orange);
	color:#fff !important;
	border:1px solid var(--orange);
	border-radius:var(--btn-radius);
	font-family:var(--sans);
	font-size:var(--btn-fs-sm);
	font-weight:var(--btn-weight);
	white-space:nowrap;
	letter-spacing:0;
	flex-shrink:0;
	transition:background 0.15s;
}
body.layout-v2 .v2-wegweiser-mstrip:hover .v2-wegweiser-mstrip-cta {
	background:var(--orange-deep);
	border-color:var(--orange-deep);
}
@media (max-width:879px) {
	body.layout-v2 .v2-wegweiser-mstrip {
		display:flex;
		/* Sticky direkt unter den Tabs (Navbar 74 + Tabs 48 = 122).
		   z-index niedriger als Tabs (z:80), sodass Tabs drueberliegen. */
		position:sticky;
		top:122px;
		z-index:79;
		transition:top 0.25s ease;       /* sync mit Tabs/Navbar */
	}
	/* Wenn Navbar via auto-hide weggeklappt ist, ruecken Tabs auf top:0
	   und der Mstrip auf top:48 (direkt unter den Tabs). */
	body.layout-v2.v2-nav-unpinned .v2-wegweiser-mstrip {
		top:48px;
	}
	/* Auf Herbert-Tab Mobile-Strip ausblenden (Chat fuellt Viewport). */
	body.layout-v2.v2-mtab-active--herbert .v2-wegweiser-mstrip {
		display:none;
	}
}

/* Smooth-Scroll fuer den Anchor — globale Regel mit Sticky-Offset. */
/* Smooth-Scroll-Offset: wird per JS dynamisch via inline-style auf <html>
   gesetzt (window.v2GetStickyOffset). Diese statischen Werte sind nur
   Fallback fuer den ersten Render bevor JS lief. */
html { scroll-padding-top:80px; }
@media (max-width:879px) {
	html { scroll-padding-top:160px; }
}

/* Rechner-Sprungpunkte: legacy padding/margin (200/200) auf dem Mark NULLEN.
   scroll-padding-top auf <html> (durch JS gesetzt) liefert den richtigen
   Offset. scroll-margin-top auf den Targets selbst => 0 (oben weiter
   gesetzt) damit kein Doppel-Offset entsteht. */
body.layout-v2 #scrollMarkwegweiser {
	padding-top:0 !important;
	margin-top:0 !important;
	pointer-events:none;
}

/* Schnelle-Antwort: Box bekommt Lese-Breite (670px), Bild fuellt den Rest.
   Bei viel Platz wird das Bild gross, bei wenig zieht es sich zusammen. */
.v2-schnelle-wrap {
	margin:22px 0 24px 0;
	/* Verhaeltnis 5:2 (Text : Bild). Wrap weiter aufgemacht (1600px),
	   damit das Bild auch absolut groesser werden kann ohne dem Text
	   Platz wegzunehmen — beide wachsen mit dem Viewport. */
	max-width:1600px;
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 2fr);
	gap:24px;
	align-items:stretch;
	box-sizing:border-box;
}
.v2-schnelle p,
.v2-schnelle li,
.v2-schnelle b,
.v2-schnelle strong {
	overflow-wrap:break-word;
	word-wrap:break-word;
}
.v2-schnelle-wrap:not(:has(.v2-schnelle-illu)) {
	grid-template-columns:1fr;
	max-width:none;
}
.v2-schnelle-wrap:not(:has(.v2-schnelle-illu)) .v2-schnelle {
	border-radius:6px;
	width:100%;
}
.v2-schnelle {
	background:var(--magenta-tint);
	border-left:4px solid var(--magenta);
	color:var(--ink-2);
	padding:22px 26px;
	border-radius:0 6px 6px 0;
	min-width:0;
	box-sizing:border-box;
}
.v2-schnelle-illu {
	display:flex;
	align-items:center;
	justify-content:flex-start;
	min-width:0;
	box-sizing:border-box;
}
.v2-schnelle-illu img {
	width:100%;
	max-width:100%;
	height:auto;
	max-height:none;
	display:block;
	object-position:center;
	object-fit:contain;
}

/* Auf schmalen Viewports: collapse zu 1-spaltig, Bild visuell IN die Box.
   Stacked = Bild IM Block → ganze Sektion nimmt volle prose-Breite. Padding
   bei Bild + Box exakt gleich, damit linke + rechte Kanten fluchten. */
@media (max-width:1080px) {
	.v2-schnelle-wrap {
		grid-template-columns:1fr;
		gap:0;
		max-width:none;
	}
	.v2-schnelle-wrap .v2-schnelle {
		width:100%;
	}
	.v2-schnelle-illu {
		order:-1; /* Bild oben */
		justify-content:center;
		background:var(--magenta-tint);
		border-left:4px solid var(--magenta);
		padding:20px 26px 0; /* horizontal 26 = exakt wie Box */
	}
	.v2-schnelle {
		border-radius:0;
		padding-top:12px;
	}
	.v2-schnelle-illu img {
		max-height:200px;
		width:auto;        /* nicht stretchen */
		max-width:100%;
		object-fit:contain;
	}
}
.v2-schnelle-label {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--magenta);
	margin-bottom:8px;
	font-weight:600;
}
body.layout-v2 .v2-schnelle ul {
	list-style:none !important;
	padding:0 !important;
	margin:0 !important;
	display:flex;
	flex-direction:column;
	gap:8px;
}
body.layout-v2 .v2-schnelle li {
	font-family:var(--serif);
	font-size:16px;
	line-height:1.5;
	color:var(--ink-2);
	padding-left:20px !important;
	margin-left:0 !important;
	position:relative;
	list-style:none !important;
}
body.layout-v2 .v2-schnelle li::marker {
	content:none !important;
	display:none !important;
}
/* Spiegelstrich vor jedem Item — Magenta-Akzent in einheitlicher Optik */
body.layout-v2 .v2-schnelle li::before {
	content:"" !important;
	display:block !important;
	position:absolute;
	left:0;
	top:11px;
	width:12px;
	height:1.5px;
	background:var(--magenta);
}
/* fa-li / fa-ul Icon-Sprites die processHtml/verlinkeParagraphen evtl.
   einfuegen — NUR Icon-Elemente entfernen, nicht das LI selbst. */
body.layout-v2 .v2-schnelle li > i,
body.layout-v2 .v2-schnelle li > span.fa-li,
body.layout-v2 .v2-schnelle li i[class*="icon-"],
body.layout-v2 .v2-schnelle li span[class*="icon-"],
body.layout-v2 .v2-schnelle li span.fa-li {
	display:none !important;
}
body.layout-v2 .v2-schnelle ul.fa-ul {
	margin-left:0 !important;
	padding-left:0 !important;
}
.v2-schnelle li strong { color:var(--ink); font-weight:600; }
.v2-schnelle a {
	color:var(--magenta);
	text-decoration:none;
	border-bottom:1px solid var(--magenta-soft);
}
.v2-schnelle a:hover { border-bottom-color:var(--magenta); }

/* ---------- Dock rechts: Wegweiser oben + Herbert unten ----------
   Sticky unter Navbar (~54px). Wegweiser nimmt seine natuerliche Hoehe,
   Herbert fuellt den Rest. */
.v2-dock {
	position:sticky;
	top:74px;
	align-self:start;
	display:flex;
	flex-direction:column;
	gap:0;
	/* Exakte Hoehe = Viewport minus Navbar (oben) minus Body-Padding (unten).
	   Body-Padding ist 32px im Default — also 74 + 32 = 106 Sicherheits-Offset.
	   Auf Tablet/3-Col verschiedenen Werten via Media-Query. */
	height:calc(100vh - 74px - 32px);
	box-sizing:border-box;
}
.v2-dock .v2-card-wegweiser {
	flex:0 0 auto;
}
.v2-dock .v2-card-herbert {
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	height:100%;
	min-height:0;
	margin:0 !important;
	box-sizing:border-box;
}
.v2-dock .v2-card-body-herbert {
	flex:1 1 auto;
	max-height:none !important;
}
/* Force No-Scroll auf alle Herbert-Wrapper inkl. interner sucheKI-Container */
body.layout-v2 .v2-card-body-herbert,
body.layout-v2 .v2-card-body-herbert * {
	overflow:visible !important;
	overflow-y:visible !important;
	overflow-x:visible !important;
	max-height:none !important;
}
.v2-card {
	background:#fff;
	border:1px solid var(--rule);
	border-radius:8px;
	overflow:hidden;
}
.v2-card-head {
	padding:11px 16px;
	background:var(--rule-2);
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	border-bottom:1px solid var(--rule);
}
.v2-card-body {
	padding:14px 16px 16px;
}
.v2-card-eyebrow {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--ink-4);
	font-weight:600;
}
.v2-card-meta {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.06em;
	color:var(--ink-4);
	text-transform:uppercase;
	font-weight:500;
}
.v2-card-headline {
	font-family:var(--serif);
	font-size:16px;
	font-weight:500;
	color:var(--ink-2);
	line-height:1.35;
	margin-bottom:12px;
}
.v2-card-headline strong { color:var(--ink); font-weight:600; }
.v2-card-bullets {
	list-style:none;
	padding:0;
	margin:0 0 14px;
	display:flex;
	flex-direction:column;
	gap:6px;
}
.v2-card-bullets li {
	font-family:var(--serif);
	font-size:14px;
	line-height:1.4;
	color:var(--ink-2);
	padding-left:16px;
	position:relative;
}
.v2-card-bullets li::before {
	content:"";
	position:absolute;
	left:0;
	top:8px;
	width:8px;
	height:1.5px;
	background:var(--green);
}
.v2-card-bullets b { font-weight:600; color:var(--ink); }
.v2-card-cta {
	display:flex !important;
	align-items:center;
	justify-content:center;
	gap:6px;
	background:var(--magenta);
	color:#fff !important;
	padding:11px 14px !important;
	border-radius:6px;
	text-decoration:none !important;
	font-family:var(--sans);
	font-size:14px;
	font-weight:600 !important;
	cursor:pointer;
	border:0 !important;
	opacity:1 !important;
	transition:background 0.15s;
}
.v2-card-cta:hover { background:var(--magenta-deep); }
.v2-card-foot-meta {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.04em;
	color:var(--ink-4);
	text-align:center;
	margin-top:10px;
	text-transform:uppercase;
	font-weight:500;
}

/* Wegweiser-Card = gruen akzentuiert, kompakter Teaser */
.v2-card-wegweiser {
	border-top:3px solid var(--green);
}
.v2-card-head-wegweiser {
	background:#f6f9ef;
}
.v2-card-wegweiser .v2-card-eyebrow {
	color:var(--green-deep);
}
.v2-card-wegweiser .v2-card-meta {
	color:var(--green-deep);
}
.v2-card-wegweiser .v2-card-body {
	padding:12px 16px 14px;
}
.v2-card-wegweiser .v2-card-headline {
	font-size:16px;
	line-height:1.35;
	margin-bottom:10px;
}
.v2-card-wegweiser .v2-card-cta {
	background:var(--green) !important;
	color:#fff !important;
}
.v2-card-wegweiser .v2-card-cta:hover {
	background:var(--green-deep) !important;
}

/* Herbert-Card = magenta-akzentuiert */
.v2-card-herbert {
	border-top:3px solid var(--magenta);
}
.v2-card-head-herbert {
	background:#fbf6fa;
}
.v2-card-status {
	display:flex;
	align-items:center;
	gap:7px;
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.04em;
	color:var(--green-deep);
	font-weight:600;
}
.v2-card-status-dot {
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--green);
	flex-shrink:0;
	box-shadow:0 0 0 0 rgba(107,155,58,0.5);
	animation:v2-pulse-mid 1.8s ease-out infinite;
	position:relative;
}
/* Herbert schreibt gerade → Dot wird orange, schnellere Pulse-Frequenz.
   Body-Class wird in sucheKI.php waehrend inFlight gesetzt. */
body.v2-herbert-typing .v2-card-status-dot,
body.v2-herbert-typing .v2-mtab-dot {
	background:var(--orange) !important;
	box-shadow:0 0 0 0 rgba(232,118,42,0.6) !important;
	animation:v2-pulse-typing 1.2s ease-out infinite !important;
}
body.v2-herbert-typing .v2-status-avatar .v2-card-status-dot::after {
	background:var(--orange);
}
@keyframes v2-pulse-typing {
	0%   { box-shadow:0 0 0 0   rgba(232,118,42,0.6); }
	70%  { box-shadow:0 0 0 7px rgba(232,118,42,0);   }
	100% { box-shadow:0 0 0 0   rgba(232,118,42,0);   }
}
.v2-card-status-dot::after {
	content:"";
	position:absolute;
	inset:-1px;
	border-radius:50%;
	background:var(--green);
	opacity:0.5;
	animation:v2-pulse-ring-mid 1.8s ease-out infinite;
}
@keyframes v2-pulse-mid {
	0%   { box-shadow:0 0 0 0   rgba(107,155,58,0.55); }
	70%  { box-shadow:0 0 0 6px rgba(107,155,58,0);    }
	100% { box-shadow:0 0 0 0   rgba(107,155,58,0);    }
}
@keyframes v2-pulse-ring-mid {
	0%   { transform:scale(1);   opacity:0.55; }
	100% { transform:scale(1.7); opacity:0;    }
}
body.layout-v2 .v2-status-avatar {
	position:relative;
	flex-shrink:0;
	width:60px;
	height:60px;
	display:inline-block;
	margin-left:-8px;
}
body.layout-v2 .v2-status-avatar img {
	box-sizing:border-box;
	width:60px;
	height:60px;
	border-radius:50%;
	object-fit:contain;          /* freundlicher Cartoon ist quadratisch zentriert — komplett zeigen */
	object-position:center center;
	background:var(--magenta-tint);
	border:2px solid var(--magenta);
	box-shadow:0 3px 10px -3px rgba(132,14,113,0.35);
	display:block;
}
body.layout-v2 .v2-status-avatar .v2-card-status-dot {
	position:absolute;
	bottom:1px;
	right:1px;
	width:14px;
	height:14px;
	border:2px solid #fff;
	box-shadow:none;
	z-index:2;
}
/* Card-Head Name: zweiteilig wie der Chat-Bubble-Label.
   "Herbert" als bold Name, "| HEREDITAS » Erb-Assistent" als Magenta-Eyebrow
   in Uppercase + Letterspacing — gleiche Optik wie die Sprecher-Markierung
   ueber jeder Herbert-Antwort. */
body.layout-v2 .v2-status-name {
	display:block;
	font-family:var(--sans);
	font-size:var(--fs-xs);
	font-weight:600;
	letter-spacing:0;
	color:var(--ink);
	text-transform:none;
	line-height:1.2;
}
body.layout-v2 .v2-status-name b {
	font-weight:700;
	color:var(--ink);
}
body.layout-v2 .v2-status-sub {
	/* Eigene Zeile unter dem Namen — verhindert komische Mid-Word-Umbrueche
	   bei schmaler Card. "Herbert" oben, "HEREDITAS » Erb-Assistent" drunter. */
	display:block;
	font-family:var(--sans);
	font-size:var(--fs-xs);
	font-weight:600;
	letter-spacing:0;
	text-transform:none;
	color:var(--magenta-deep, var(--magenta));
	margin:2px 0 0;
	line-height:1.25;
	word-break:keep-all;       /* "Erb-Assistent" bleibt zusammen */
}
body.layout-v2 .v2-status-state {
	/* "online"-Text raus — Status wird durch den gruenen Pulse-Punkt am Avatar
	   eindeutig kommuniziert. Die Beschreibung darunter braucht den Platz. */
	display:none !important;
}
/* Eine-Zeilen-Erklaerung zum Agent unter dem Namen. */
body.layout-v2 .v2-status-desc {
	display:block;
	font-family:var(--sans);
	font-size:12px;
	line-height:1.4;
	color:var(--ink-3);
	margin-top:4px;
	font-weight:400;
}
.v2-card-status-live .v2-card-status-text {
	color:var(--green-deep);
	font-weight:500;
	letter-spacing:0;
	text-transform:none;
}
/* Text-Container neben dem Avatar: Inhalte stacken untereinander. */
body.layout-v2 .v2-card-status-text {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	min-width:0;
	flex:1 1 auto;
}
/* Avatar nicht mehr mittig zum Text-Block — Text wird durch desc/msg
   hoeher als 60px Avatar. Oben buendig, dann sitzt der Avatar neben
   dem Namen, Beschreibung darunter unter dem Namen. */
body.layout-v2 .v2-card-head-herbert .v2-card-status {
	align-items:flex-start;
}

/* sucheKI.php Inhalt im Dock: Chat-Panel-Layout.
   - Hinweise (Bullets) klein OBEN als Sub-Info zur Status-Bar
   - kiResult fuellt scrollbar den Mittelbereich (Chat-Verlauf)
   - textarea + Submit-Button unten am Card-Boden festgenagelt
   - Trust-Seals + Hr am Boden ausgeblendet */
body.layout-v2 .v2-card-body-herbert {
	padding:0 !important;
	flex:1 1 auto !important;
	min-height:0 !important;
	max-height:none !important;
	overflow:hidden !important;     /* kein Scroll, kiResult uebernimmt */
	display:flex !important;
	flex-direction:column !important;
}
/* v1-Wrapper plattmachen + zu Flex-Container machen */
body.layout-v2 .v2-card-body-herbert .boxteil1 {
	all:unset !important;
	display:flex !important;
	flex-direction:column !important;
	flex:1 1 auto !important;
	min-height:0 !important;
	width:100% !important;
	max-width:none !important;
}
body.layout-v2 .v2-card-body-herbert .boxteil2mitrahmen,
body.layout-v2 .v2-card-body-herbert .boxteil2ohnerahmen {
	all:unset !important;
	display:flex !important;
	flex-direction:column !important;
	flex:1 1 auto !important;
	min-height:0 !important;
	padding:0 !important;
	margin:0 !important;
	width:100% !important;
	max-width:none !important;
	background:transparent !important;
	border:none !important;
}

/* H2 "Herbert | HEREDITAS..." ausblenden — Name steht schon im Card-Head */
body.layout-v2 .v2-card-body-herbert #kiAgentH2,
body.layout-v2 .v2-card-body-herbert h2 {
	display:none !important;
}
/* Bild im Default-Template (KI-Agent-Icon im Body) ausblenden — Avatar ist im Head.
   Greift alle Wrap-Varianten ab, in die imageTransformation den img packen kann. */
body.layout-v2 .v2-card-body-herbert .boxteil2mitrahmen > img,
body.layout-v2 .v2-card-body-herbert .boxteil2mitrahmen > picture,
body.layout-v2 .v2-card-body-herbert > picture,
body.layout-v2 .v2-card-body-herbert img[src*="ki-agent"],
body.layout-v2 .v2-card-body-herbert picture:has(img[src*="ki-agent"]),
body.layout-v2 .v2-card-body-herbert .imagecenter {
	display:none !important;
}

/* Bullets raus — die Erklaerung steht bereits im Card-Head als v2-status-desc. */
body.layout-v2 .v2-card-body-herbert ul.fa-ul {
	display:none !important;
}
/* Legal-Disclaimer ("Keine Rechtsberatung...") — haftungsrelevant.
   Wird per JS zwischen Textarea und Submit-Button geschoben.
   Daher kein Background/Border noetig — fluide zwischen Form-Elementen. */
body.layout-v2 .v2-card-herbert .v2-card-legal {
	font-family:var(--sans);
	font-size:11px;
	line-height:1.4;
	color:var(--ink-4);
	margin:0;
	padding:0;
	flex:0 0 auto;
}
body.layout-v2 .v2-card-herbert .v2-card-legal a {
	color:var(--magenta);
	text-decoration:underline;
}
/* Mobile-Legal-Strip am Card-Boden (Impressum/Datenschutz/Rechtliche Hinweise).
   Standardmaessig ausgeblendet, nur auf Mobile sichtbar (s. unten im
   @media-Block). Auf Desktop ist der Footer ueber die Seite erreichbar. */
body.layout-v2 .v2-card-legal-links {
	display:none;
}
/* Innerhalb des KI-Widgets sollte kein zweiter Legal-Block kommen (gibt es
   im Default-Template). Falls doch — verstecken, damit es nicht doppelt steht. */
body.layout-v2 .v2-card-body-herbert > div[style*="font-size:10pt"],
body.layout-v2 .v2-card-body-herbert div[style*="font-size:10pt"] {
	display:none !important;
}

/* kiResult: Chat-Verlauf-Area, optisch als grosses Input-Feld
   (weiss, Border, gerundete Ecken, Innen-Padding). Bei leerer Chat-History
   ein sauberes leeres Feld; sobald Bubbles drin sind, scrollt es intern.
   overscroll-behavior:contain verhindert Window-Scroll-Bubbling.
   overflow-x:hidden + word-break in Bubbles verhindert horizontalen Scroll. */
body.layout-v2 .v2-card-body-herbert #kiResult {
	flex:1 1 auto !important;
	min-height:0 !important;
	overflow-y:auto !important;
	overflow-x:hidden !important;
	overscroll-behavior:contain !important;
	/* Border + horizontale Margin entfernt — gibt dem Chat-Verlauf die volle
	   Card-Breite. Top-Border (per Trenner) reicht zur visuellen Abtrennung. */
	padding:14px !important;
	margin:0 !important;
	background:#fff !important;
	border:0 !important;
	border-top:1px solid var(--rule) !important;
	border-radius:0 !important;
}
/* Lange URLs/Tokens in Bubbles brechen sauber um statt zu overflowen. */
body.layout-v2 .v2-card-body-herbert .chat-bubble,
body.layout-v2 .v2-card-body-herbert .chat-bubble * {
	overflow-wrap:break-word !important;
	word-wrap:break-word !important;
	word-break:break-word !important;
	max-width:100% !important;
}
body.layout-v2 .v2-card-body-herbert .chat-bubble img,
body.layout-v2 .v2-card-body-herbert .chat-bubble pre,
body.layout-v2 .v2-card-body-herbert .chat-bubble table {
	max-width:100% !important;
	overflow-x:auto !important;
	box-sizing:border-box !important;
}
/* Card-Body bekommt subtilen Paper-Hintergrund, damit das weisse
   kiResult-Feld als eingelagerte Input-Flaeche heraussticht. */
body.layout-v2 .v2-card-body-herbert {
	background:var(--paper) !important;
}

/* === Chat-Bubbles im v2-Design ===
   Statt der v1-Pastel-Bubbles (15px-Radius, schwere Shadows) hier kleinere
   abgerundete Blocks in Plex Sans, magenta-getoenter Herbert-Bubble links,
   neutraler User-Bubble rechts. Passt zum Rest der v2-Optik. */
body.layout-v2 .v2-card-body-herbert .chat-bubble {
	padding:10px 14px !important;
	border-radius:10px !important;
	max-width:88% !important;
	clear:both !important;
	box-shadow:none !important;
	margin:0 0 10px !important;
	font-family:var(--sans) !important;
	font-size:var(--fs-sm) !important; /* 16px — auf Skala */
	line-height:1.5 !important;
	color:var(--ink) !important;
}
body.layout-v2 .v2-card-body-herbert .user-bubble {
	/* User-Bubble: dezenter blaugrauer Ton, klar abgesetzt zur Herbert-Magenta
	   und zum weissen Chat-Panel. Hat genug Praesenz ohne aufdringlich zu sein. */
	background:#e8eef3 !important;
	color:var(--ink) !important;
	float:right !important;
	text-align:left !important;
	border:0 !important;
	border-bottom-right-radius:2px !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble {
	background:var(--magenta-tint) !important;
	color:var(--ink) !important;
	float:left !important;
	text-align:left !important;
	border:1px solid color-mix(in srgb, var(--magenta) 18%, transparent) !important;
	border-bottom-left-radius:2px !important;      /* "Sprech-Ecke" links unten */
}
/* Werbe-Bubbles (sucheKI rendert ad-bubble in Antworten) in v2 verstecken —
   Herbert soll ohne Anzeigen-Bloecke laufen. */
body.layout-v2 .v2-card-body-herbert .ad-bubble,
body.layout-v2 .v2-card-body-herbert .chat-bubble.ad-bubble {
	display:none !important;
}
body.layout-v2 .v2-card-body-herbert .chat-bubble strong,
body.layout-v2 .v2-card-body-herbert .chat-bubble b {
	font-weight:700 !important;
	color:var(--ink) !important;
}
/* Listen in Antworten kompakter */
body.layout-v2 .v2-card-body-herbert .ki-bubble ul,
body.layout-v2 .v2-card-body-herbert .ki-bubble ol {
	margin:6px 0 2px !important;
	padding-left:20px !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble li {
	margin:2px 0 !important;
	line-height:1.45 !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble a {
	color:var(--magenta) !important;
	text-decoration:underline !important;
}
/* Strong-Label am Bubble-Anfang — exakt wie der Card-Head:
   Avatar links, daneben gestackt "Herbert" (ink, bold) und
   "HEREDITAS » Erb-Assistent" (magenta-deep, kleiner).
   Aufsplitten + Wrapper-Span passieren per JS (siehe _render.php). */
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child {
	display:flex !important;
	align-items:center !important;
	gap:8px !important;
	font-family:var(--sans) !important;
	letter-spacing:0 !important;
	text-transform:none !important;
	margin:0 !important;
	font-weight:600 !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child .v2-bubble-text {
	display:flex;
	flex-direction:column;
	min-width:0;
	line-height:1.2;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child .v2-bubble-name {
	color:var(--ink) !important;
	font-weight:700 !important;
	font-size:var(--fs-xs) !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child .v2-bubble-role {
	color:var(--magenta-deep, var(--magenta)) !important;
	font-weight:600 !important;
	font-size:var(--fs-xs) !important;
	margin-top:2px !important;
	word-break:keep-all !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child::before {
	content:"";
	flex:0 0 auto;
	width:16px;
	height:16px;
	border-radius:50%;
	background:#fff url(/app/img/herbert.png) center/contain no-repeat;
	border:1px solid var(--magenta);
}
/* Text direkt nach dem Label: kein extra Top-Margin (das ::first-line des
   bubble-content folgt unmittelbar nach dem strong). */
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child + br {
	display:none !important;
}
body.layout-v2 .v2-card-body-herbert .ki-bubble > p:first-of-type,
body.layout-v2 .v2-card-body-herbert .ki-bubble > strong:first-child + * {
	margin-top:8px !important;
}

/* Bubble-Innenabstand bündig:
   - Bubble-Bottom-Padding kompakter (6px statt 10px).
   - Alle Last-Child-Elemente bis tief verschachtelt: kein margin-bottom.
   - Trailing <br> / empty <p> am Bubble-Ende verstecken.
   - Letzte Bubble in kiResult: kein margin-bottom + kiResult selber
     hat unten nur minimales Padding, damit Bubble-Kante bündig mit
     Trenner zur Fragebox sitzt. */
body.layout-v2 .v2-card-body-herbert .chat-bubble {
	padding-bottom:6px !important;
}
body.layout-v2 .v2-card-body-herbert .chat-bubble > *:last-child,
body.layout-v2 .v2-card-body-herbert .chat-bubble *:last-child {
	margin-bottom:0 !important;
}
body.layout-v2 .v2-card-body-herbert .chat-bubble > br:last-child,
body.layout-v2 .v2-card-body-herbert .chat-bubble .ki-answer > br:last-child,
body.layout-v2 .v2-card-body-herbert .chat-bubble p:empty:last-child,
body.layout-v2 .v2-card-body-herbert .chat-bubble div:empty:last-child {
	display:none !important;
}
body.layout-v2 .v2-card-body-herbert #kiResult > .chat-bubble:last-child {
	margin-bottom:0 !important;
}
body.layout-v2 .v2-card-body-herbert #kiResult {
	padding-bottom:4px !important;
}

/* "Ihre Eingabe:"-Prefix in User-Bubble: redundant (Position rechts +
   Blaugrau zeigen "User"). Komplett verstecken — inkl. Folge-<br>, damit
   keine Leerzeile davor stehen bleibt. */
body.layout-v2 .v2-card-body-herbert .user-bubble > strong:first-child,
body.layout-v2 .v2-card-body-herbert .user-bubble > strong:first-child + br {
	display:none !important;
}

/* Form-Container (textarea + button) am Card-Boden */
body.layout-v2 .v2-card-body-herbert > div:has(> textarea),
body.layout-v2 .v2-card-body-herbert div:has(> #kiQuery) {
	flex:0 0 auto !important;
	padding:10px 16px 12px !important;
	margin:0 !important;
	background:var(--paper) !important;
	border-top:1px solid var(--rule) !important;
	display:flex !important;
	flex-direction:column !important;
	gap:8px !important;
}

/* Textarea: Chat-Input-Look */
body.layout-v2 .v2-card-body-herbert .textarea,
body.layout-v2 .v2-card-body-herbert #kiQuery {
	width:100% !important;
	box-sizing:border-box !important;
	border:1px solid var(--rule) !important;
	border-radius:6px !important;
	padding:10px 12px !important;
	font-family:var(--sans) !important;
	font-size:14px !important;
	color:var(--ink) !important;
	background:#fff !important;
	resize:none !important;
	min-height:44px !important;
	max-height:120px !important;
	margin:0 !important;
}
body.layout-v2 .v2-card-body-herbert .textarea:focus,
body.layout-v2 .v2-card-body-herbert #kiQuery:focus {
	border-color:var(--magenta) !important;
	outline:0 !important;
	box-shadow:0 0 0 3px rgba(132,14,113,0.1) !important;
}

/* Submit-Button: Compact-Orange-CTA am Card-Boden. Gehoert zur gleichen
   Button-Familie wie Newsletter/Kommentar, nur kleinere Variante fuer
   Sidebar-Kontext. */
body.layout-v2 .v2-card-body-herbert .cta-submit-orange,
body.layout-v2 .v2-card-body-herbert #kiSubmitBtn {
	width:100% !important;
	box-sizing:border-box !important;
	background:var(--orange) !important;
	color:#fff !important;
	border:1px solid var(--orange) !important;
	border-radius:var(--btn-radius) !important;
	padding:var(--btn-pad-sm) !important;
	height:var(--btn-h-sm) !important;
	line-height:1 !important;
	font-family:var(--sans) !important;
	font-size:var(--btn-fs-sm) !important;
	font-weight:var(--btn-weight-sm) !important;
	cursor:pointer !important;
	margin:0 !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:6px !important;
	transition:background 0.15s !important;
}
body.layout-v2 .v2-card-body-herbert .cta-submit-orange:hover,
body.layout-v2 .v2-card-body-herbert #kiSubmitBtn:hover {
	background:var(--orange-deep) !important;
	border-color:var(--orange-deep) !important;
}

/* TRUST-SEALS + HR am Boden komplett raus */
body.layout-v2 .v2-card-body-herbert hr {
	display:none !important;
}
/* Trust-Seal-Wrapper komplett verbergen — letztes div in der boxteil2mitrahmen,
   das die DSGVO/Cyber/SSL Bilder enthaelt. */
body.layout-v2 .v2-card-body-herbert div:has(> span > picture > img[src*="trust-"]),
body.layout-v2 .v2-card-body-herbert div:has(> picture > img[src*="trust-"]),
body.layout-v2 .v2-card-body-herbert img[src*="trust-dsgvo"],
body.layout-v2 .v2-card-body-herbert img[src*="trust-ssl"],
body.layout-v2 .v2-card-body-herbert img[src*="trust-cyber"],
body.layout-v2 .v2-card-body-herbert img[src*="cybersicherheit"] {
	display:none !important;
}
/* Fallback: alle picture-Wrapper im Herbert-Body, die nicht in einer Image-Card sind */
body.layout-v2 .v2-card-body-herbert .boxteil2mitrahmen > div:last-of-type:has(picture) {
	display:none !important;
}

/* ---------- Stufige Breakpoints ----------
   Desktop 3-Spalter ab >=1280:
     >=1500: 240 / 1fr / 400
     1340-1499: 220 / 1fr / 340
     1280-1339: 200 / 1fr / 300
   Tablet 2-Spalter ab 1024 - 1279: Mitte + Dock, TOC links weg, dafuer
     <details class="v2-toc-inline"> im Artikel sichtbar.
   <1024: spaeter Tabs (P3). */
@media (max-width:1500px) {
	body.layout-v2 .v2-body {
		grid-template-columns:minmax(200px, 240px) minmax(0, 720px) minmax(360px, 1fr);
		gap:28px;
		padding-top:28px;
		padding-bottom:28px;
	}
}
/* Unter 1380: 3-Spalter wird zu eng (TOC 190 + Prose 720 + Herbert 360 +
   Gaps/Padding = ~1378). Sofort auf 2-col wechseln, TOC inline im Artikel. */

/* === TABLET-BREAKPOINT: 2-Spalter (Mitte + Werkzeuge) =========================
   Bei 880-1379: Article 0-720 (kann schrumpfen, aber max 720), Herbert min 360.
   <880: 1-Spalter mit Tabs. */
@media (max-width:1379px) and (min-width:880px) {
	body.layout-v2 .v2-body {
		grid-template-columns:minmax(0, 720px) minmax(340px, 1fr);
		gap:20px;
		padding-top:20px;
		padding-bottom:20px;
	}
	body.layout-v2 .v2-prose { grid-column:1; }
	body.layout-v2 .v2-dock  { grid-column:2; }
	body.layout-v2 .v2-body.v2-body--no-dock,
	body.layout-v2 .v2-body.v2-body--single {
		grid-template-columns:1fr;
	}
	body.layout-v2 .v2-body.v2-body--no-dock .v2-prose,
	body.layout-v2 .v2-body.v2-body--single .v2-prose { grid-column:1; }
	body.layout-v2 .v2-toc {
		display:none !important;
	}
	body.layout-v2 .v2-toc-inline {
		display:block !important;
	}
	/* Trust-Strip (Desktop-Variante) auf Tablet weg, dafuer Mobile-Trust
	   sichtbar — direkt unter dem Legal-Strip als zweiter Block. */
	body.layout-v2 .v2-trust-strip {
		display:none !important;
	}
	body.layout-v2 .v2-mobile-trust {
		display:flex !important;
	}
	/* Legal-Strip-Bottom-Border auf Tablet weg — sitzt direkt drueber dem
	   Mobile-Trust, der hat seinen eigenen Top-Border. Sonst Doppellinie. */
	body.layout-v2 .v2-legal-strip {
		border-bottom:0 !important;
	}
}

/* === MOBILE: Herbert permanent fixed am unteren Rand (<880px) ===
   1-Spalter: Artikel zentriert auf 720 mit Rand, Werkzeuge an den Boden fixed.
   Artikel scrollt normal, Padding-Bottom haelt Herbert frei. */
@media (max-width:879px) {
	body.layout-v2 .v2-body {
		display:block !important;
		padding-top:16px;
		padding-bottom:32px;
	}
	body.layout-v2 .v2-prose {
		max-width:720px;
		margin:0 auto;
	}

	/* TOC inline am Artikel-Anfang (als <details>) — der Inhalt-Tab ist auf
	   Mobile rausgefallen, daher braucht der Leser hier seine TOC. */
	body.layout-v2 .v2-toc-inline {
		display:block !important;
	}
	body.layout-v2 .v2-toc { display:none !important; }

	/* Trust-Strip (Desktop-Variante) auf Mobile weg, dafuer Mobile-Trust
	   sichtbar — Position ist jetzt NACH dem Artikel (kurz vor dem Footer). */
	body.layout-v2 .v2-trust-strip {
		display:none !important;
	}
	body.layout-v2 .v2-mobile-trust {
		display:flex !important;
	}
	/* Legal-Strip + Mobile-Trust als ein Block — Doppellinie verhindern. */
	body.layout-v2 .v2-legal-strip {
		border-bottom:0 !important;
	}

	/* === MOBILE TABS — Inhalt | Artikel | Herbert ===
	   Sticky direkt UNTER der Navbar — top entspricht Navbar-Hoehe.
	   z-index niedriger als Navbar (Navbar darf druebersehen wenn man
	   am Page-Top ist, Tabs liegen drunter). */
	body.layout-v2 .v2-mtabs {
		display:flex !important;
		position:sticky;
		top:74px;             /* Navbar tatsaechlich ~74px hoch — Tabs schliessen direkt drunter an */
		z-index:80;           /* unter Navbar (z:99) */
		background:#fff;
		border-bottom:1px solid var(--rule);
		padding:0;
		margin:0;
		box-shadow:0 2px 8px -4px rgba(40,30,20,0.08);
		/* Sync mit Navbar-Slide (transform:0.25s ease auf .v2-navbar) —
		   beide bewegen sich in lock-step. Sonst entsteht ein kurzer
		   Content-Gap zwischen einblendender Navbar und springender Tabs. */
		transition:top 0.25s ease;
	}
	/* Wenn Navbar via auto-hide weggeklappt ist, ruecken Tabs nach oben */
	body.layout-v2.v2-nav-unpinned .v2-mtabs {
		top:0;
	}
	body.layout-v2 .v2-mtab {
		flex:1 1 0;
		min-width:0;
		display:inline-flex;
		align-items:center;
		justify-content:center;
		gap:8px;
		min-height:48px;
		padding:6px 12px;
		background:transparent;
		border:0;
		border-bottom:3px solid transparent;
		color:var(--ink-3);
		font-family:var(--sans);
		font-size:var(--fs-xs);
		font-weight:600;
		letter-spacing:0.02em;
		cursor:pointer;
		transition:color 0.15s, border-color 0.15s, background 0.15s;
	}
	/* Herbert-Tab: Label gestackt (Name oben, Rolle drunter) — gleicher
	   Aufbau wie der Card-Head, der auf Mobile dafuer eingespart wird. */
	body.layout-v2 .v2-mtab-label {
		display:inline-flex;
		flex-direction:column;
		align-items:flex-start;
		line-height:1.15;
		text-align:left;
		min-width:0;
	}
	body.layout-v2 .v2-mtab-name {
		font-size:var(--fs-xs);
		font-weight:700;
		letter-spacing:0.02em;
	}
	body.layout-v2 .v2-mtab-sub {
		font-size:10px;
		font-weight:500;
		letter-spacing:0;
		color:var(--ink-3);
		text-transform:none;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:100%;
	}
	body.layout-v2 .v2-mtab.is-active .v2-mtab-sub {
		color:var(--magenta-deep);
	}
	body.layout-v2 .v2-mtab:hover {
		background:var(--rule-2);
		color:var(--ink-2);
	}
	body.layout-v2 .v2-mtab.is-active {
		color:var(--magenta);
		border-bottom-color:var(--magenta);
	}
	body.layout-v2 .v2-mtab-dot {
		width:8px;
		height:8px;
		border-radius:50%;
		background:var(--green);
		flex-shrink:0;
		box-shadow:0 0 0 0 rgba(107,155,58,0.5);
		animation:v2-pulse-mid 1.8s ease-out infinite;
	}
	/* Avatar + Live-Dot kombiniert im Herbert-Tab */
	body.layout-v2 .v2-mtab-avatar {
		position:relative;
		width:28px;
		height:28px;
		flex-shrink:0;
		display:inline-block;
	}
	body.layout-v2 .v2-mtab-avatar img {
		width:28px;
		height:28px;
		box-sizing:border-box;     /* Border zaehlt zur 28px-Box — img passt exakt in Wrapper */
		border-radius:50%;
		object-fit:contain;
		object-position:center center;
		background:var(--magenta-tint);
		border:1.5px solid var(--magenta);
		display:block;
	}
	body.layout-v2 .v2-mtab-avatar .v2-mtab-dot {
		position:absolute;
		/* Mit box-sizing:border-box ist img exakt 28x28. 4:30-Edge des
		   sichtbaren Magenta-Kreises liegt etwa bei (24,24). Dot 9x9 mit
		   right:0/bottom:0 hat seine Mitte bei (23.5, 23.5) — direkt
		   AUF der Kreislinie. */
		bottom:0;
		right:0;
		width:9px;
		height:9px;
		border:1.5px solid #fff;
		/* box-shadow NICHT auf none setzen — sonst killt das die
		   Pulse-Animation (orange beim Tippen, gruen sonst). */
	}
	/* Badge auf dem Herbert-Tab: kleine Magenta-Pille mit der Anzahl
	   offener Nachrichten. Erinnert an Notification-Counter aus Messengern. */
	body.layout-v2 .v2-mtab-badge {
		min-width:18px;
		height:18px;
		padding:0 5px;
		border-radius:9px;
		background:var(--magenta);
		color:#fff;
		font-family:var(--sans);
		font-size:11px;
		font-weight:700;
		line-height:18px;
		text-align:center;
		flex-shrink:0;
	}

	/* Panels via Body-Klasse umschalten */
	/* Artikel-Tab (Default): TOC-Inline-Box ist sichtbar (siehe globale
	   Mobile-Regel weiter oben). Dock weg — Dock erscheint nur im Herbert-Tab. */
	body.layout-v2.v2-mtab-active--artikel .v2-dock {
		display:none !important;
	}

	body.layout-v2.v2-mtab-active--herbert .v2-prose,
	body.layout-v2.v2-mtab-active--herbert .v2-hero,
	body.layout-v2.v2-mtab-active--herbert .v2-trust-strip,
	body.layout-v2.v2-mtab-active--herbert .v2-mobile-trust,
	body.layout-v2.v2-mtab-active--herbert .v2-legal-strip,
	body.layout-v2.v2-mtab-active--herbert .v2-credbar,
	body.layout-v2.v2-mtab-active--herbert .v2-toc {
		display:none !important;
	}
	/* Crumbs auf Mobile weg (sticky Navbar+Tabs reichen).
	   Legal-Strip bleibt sichtbar — Position: nach Author, vor Mobile-Trust,
	   vor den Tabs. Rechtlich relevanter Hinweis-Streifen, klein und unauffaellig. */
	body.layout-v2 .v2-crumbs {
		display:none !important;
	}
	body.layout-v2.v2-mtab-active--herbert .v2-dock {
		display:flex !important;
		position:static !important;
		/* 100dvh = dynamische Viewport-Hoehe; ignoriert die einklappende Mobile-
		   URL-Bar. Navbar 74 + Tabs 48 = 122 abziehen — Rest gehoert Herbert. */
		height:calc(100dvh - 122px) !important;
		max-height:none !important;
		min-height:0 !important;
		flex-direction:column !important;
		grid-column:1 !important;
		grid-row:auto !important;
		padding:0 !important;
	}
	/* Mobile-Legal-Strip: Impressum/Datenschutz/Rechtliche Hinweise IMMER
	   sichtbar am Card-Boden. Position absolute relative zur card-herbert,
	   damit es nicht durch flex-Layout des Card-Bodies verdraengt wird. */
	body.layout-v2 .v2-card-herbert {
		position:relative !important;
	}
	body.layout-v2 .v2-card-legal-links {
		display:flex !important;
		position:absolute !important;
		bottom:0 !important;
		left:0 !important;
		right:0 !important;
		z-index:5;
		flex-shrink:0;
		gap:14px;
		justify-content:center;
		flex-wrap:wrap;
		padding:8px 12px 10px;
		background:var(--rule-2);
		border-top:1px solid var(--rule);
		font-family:var(--sans);
		font-size:11px;
		box-sizing:border-box;
	}
	/* Card-Body braucht jetzt padding-bottom, weil das absolute legal-links
	   sonst den Submit-Button verdeckt. */
	body.layout-v2 .v2-card-body-herbert {
		padding-bottom:36px !important;
	}
	body.layout-v2 .v2-card-legal-links a {
		color:var(--ink-3);
		text-decoration:none;
		white-space:nowrap;
	}
	body.layout-v2 .v2-card-legal-links a:hover {
		color:var(--magenta);
		text-decoration:underline;
	}
	/* Body unter dem Herbert-Tab darf keinen zusaetzlichen Padding-Bottom
	   einziehen — der frisst sonst Hoehe und Chat-Input wird abgeschnitten. */
	body.layout-v2.v2-mtab-active--herbert .v2-body {
		padding-top:0 !important;
		padding-bottom:0 !important;
	}
	/* Im Herbert-Tab keine Page-Scrollbar — die Card fuellt den Viewport,
	   Pflichtlinks sind als Legal-Strip in der Card erreichbar.
	   html UND body brauchen overflow:hidden (manche Browser scrollen sonst
	   das html-Element). Wird zusaetzlich per JS am <html> gesetzt, weil
	   :has()-Selektoren in alten Mobile-Browsern fehlen. */
	html.v2-page-noscroll,
	body.layout-v2.v2-mtab-active--herbert {
		overflow:hidden !important;
	}
	body.layout-v2 .v2-card-herbert {
		height:100%;
		display:flex;
		flex-direction:column;
		background:#fff;
		border-radius:0 !important;
		border:0 !important;
		box-shadow:none;
		margin:0 !important;
	}
	/* Mobile: Card-Head ausblenden — Herbert-Identitaet (Avatar + Name +
	   "HEREDITAS » Erb-Assistent") sitzt schon im Mobile-Tab darueber.
	   Doppelt waere Platzverschwendung im ohnehin knappen Mobile-Viewport. */
	body.layout-v2 .v2-card-head-herbert {
		display:none !important;
	}

	/* Body fuellt restliche Hoehe, KEIN scrolling */
	body.layout-v2 .v2-card-body-herbert {
		flex:1 1 auto;
		min-height:0;
		max-height:none !important;
	}

	/* Hero auf Mobile kompakt — H1 nicht zu dominant, Stack nicht zu hoch. */
	body.layout-v2 .v2-hero {
		padding:14px 16px 10px;
	}
	body.layout-v2 .v2-hero-h1 {
		font-size:24px;
		line-height:1.2;
		margin-bottom:10px;
	}
	body.layout-v2 .v2-hero-foot {
		flex-direction:column;
		align-items:flex-start;
		gap:10px;
	}
	body.layout-v2 .v2-share-row {
		flex-wrap:wrap;
	}

	/* Topbar kompakter */
	body.layout-v2 .v2-topbar { padding:7px 14px; font-size:12px; }

	body.layout-v2 .v2-prose { font-size:18px; }

	/* Hero auf Mobile kompakter */
	body.layout-v2 .v2-hero {
		padding:18px 16px 14px;
	}
	body.layout-v2 .v2-hero-h1 {
		font-size:28px;
		margin-bottom:14px;
	}
	body.layout-v2 .v2-hero-foot {
		flex-direction:column;
		align-items:flex-start;
		gap:14px;
	}
	body.layout-v2 .v2-share-row {
		flex-wrap:wrap;
	}

	/* Trust-strip (Desktop-Variante) ausblenden, mobile-trust zeigt sich */
	body.layout-v2 .v2-trust-strip { display:none !important; }

	/* Topbar kompakter Text */
	body.layout-v2 .v2-topbar { padding:7px 14px; font-size:12px; }

	/* Prose-Padding auf Mobile reduzieren */
	body.layout-v2 .v2-prose { font-size:18px; }
}

/* === Mobile-Modus-Switch: Toggle mit Sliding-Thumb (iOS-Style) ===
   Pattern, das jeder als binaere Wahl erkennt. Thumb gleitet animiert.
   Label "Sie sehen gerade:" macht die Bedeutung explizit. */
body.layout-v2 .v2-mobile-tabs {
	display:none;
	position:sticky;
	top:54px;
	z-index:96;
	background:linear-gradient(180deg, #fff 0%, var(--paper) 100%);
	padding:10px 14px 12px;
	flex-direction:column;
	gap:6px;
	border-bottom:1px solid var(--rule);
	box-shadow:0 4px 12px rgba(40,30,20,0.06);
}
body.layout-v2 .v2-mobile-tabs-label {
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.12em;
	text-transform:uppercase;
	font-weight:600;
	color:var(--ink-4);
	padding-left:4px;
}
body.layout-v2 .v2-mobile-toggle {
	position:relative;
	display:flex;
	background:var(--rule-2);
	border:1px solid var(--rule);
	border-radius:999px;
	padding:4px;
	overflow:hidden;
}
body.layout-v2 .v2-mobile-toggle-thumb {
	position:absolute;
	top:4px;
	bottom:4px;
	left:4px;
	width:calc(50% - 4px);
	background:var(--magenta);
	border-radius:999px;
	box-shadow:0 2px 8px rgba(132,14,113,0.3);
	transition:transform 0.22s cubic-bezier(0.4,0,0.2,1);
	pointer-events:none;
}
body.layout-v2 .v2-mobile-toggle[data-mode="herbert"] .v2-mobile-toggle-thumb {
	transform:translateX(100%);
}
body.layout-v2 .v2-mobile-toggle-opt {
	flex:1;
	position:relative;
	z-index:1;
	background:transparent;
	border:0;
	padding:11px 8px;
	font-family:var(--sans);
	font-size:16px;
	font-weight:600;
	color:var(--ink-3);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	transition:color 0.18s;
	letter-spacing:0.01em;
}
body.layout-v2 .v2-mobile-toggle-opt.is-active {
	color:#fff;
}
body.layout-v2 .v2-mobile-toggle-opt svg {
	flex-shrink:0;
}

/* === Mobile-Trust-Strip: zwei Gruppen — Press links, Seals rechts === */
/* Mobile-Trust-Stripe direkt unter dem Legal-Strip — transparent, nur eine
   Hairline. Legal + Trust werden zu zwei zarten Zeilen, kein Streifen-Block. */
body.layout-v2 .v2-mobile-trust {
	display:none;
	background:transparent;
	border-top:0;
	border-bottom:1px solid var(--rule);
	padding:10px var(--page-pad);
	align-items:center;
	justify-content:center;
	gap:22px;
	flex-wrap:wrap;
}
body.layout-v2 .v2-mobile-trust-press {
	display:flex;
	align-items:center;
	gap:12px;
	flex-shrink:0;
	position:relative;
	padding-right:22px;
}
/* Vertikaler Hairline-Divider zwischen Press und Seals. */
body.layout-v2 .v2-mobile-trust-press::after {
	content:"";
	position:absolute;
	right:0;
	top:6px;
	bottom:6px;
	width:1px;
	background:color-mix(in srgb, var(--magenta) 28%, transparent);
}
body.layout-v2 .v2-mobile-trust-press .v2-trust-label {
	font-family:var(--sans);
	font-size:11px;
	letter-spacing:0.16em;
	text-transform:uppercase;
	color:var(--magenta-deep, var(--magenta));
	font-weight:700;
	white-space:nowrap;
}
body.layout-v2 .v2-mobile-trust-press a {
	display:inline-flex;
	align-items:center;
	border:0 !important;
	opacity:1 !important;
	transition:transform 0.15s;
}
body.layout-v2 .v2-mobile-trust-press a:hover {
	transform:translateY(-1px);
}
body.layout-v2 .v2-mobile-trust-press img {
	height:26px;            /* etwas groesser als die Seals — Press dominiert */
	width:auto;
	display:block;
	opacity:1;
	filter:none;
}
body.layout-v2 .v2-mobile-trust-seals {
	display:flex;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
	justify-content:center;
}
body.layout-v2 .v2-mobile-trust-seals img {
	height:28px;            /* einheitliche Hoehe, normalisiert das Mismatch der Quell-Bilder */
	width:auto;
	opacity:1;
	flex-shrink:0;
	transition:transform 0.15s;
}
body.layout-v2 .v2-mobile-trust-seals img:hover {
	transform:translateY(-1px);
}
/* Auf sehr schmalen Screens (< 480px): Press oben, Seals drunter,
   kein Divider — sonst quetscht es sich. */
@media (max-width:479px) {
	body.layout-v2 .v2-mobile-trust {
		flex-direction:column;
		gap:10px;
		padding:12px 16px;
	}
	body.layout-v2 .v2-mobile-trust-press {
		padding-right:0;
	}
	body.layout-v2 .v2-mobile-trust-press::after {
		display:none;
	}
	body.layout-v2 .v2-mobile-trust-seals {
		gap:14px;
	}
	body.layout-v2 .v2-mobile-trust-seals img {
		height:24px;
	}
}

/* === Inline-TOC im Prose-Bereich (Tablet+Mobile) === */
body.layout-v2 .v2-toc-inline {
	display:none; /* default: hidden — nur Tablet/Mobile via @media oben */
	margin:0 0 28px;
	border:1px solid var(--rule);
	border-radius:6px;
	background:var(--rule-2);
}
body.layout-v2 .v2-toc-inline summary {
	list-style:none;
	cursor:pointer;
	padding:12px 16px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:14px;
	font-family:var(--sans);
	font-size:12px;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:var(--ink-3);
	font-weight:600;
	user-select:none;
}
body.layout-v2 .v2-toc-inline summary::-webkit-details-marker { display:none; }
body.layout-v2 .v2-toc-inline-toggle {
	width:14px;
	height:14px;
	position:relative;
	flex-shrink:0;
}
body.layout-v2 .v2-toc-inline-toggle::before,
body.layout-v2 .v2-toc-inline-toggle::after {
	content:"";
	position:absolute;
	background:var(--ink-3);
	border-radius:1px;
	transition:transform 0.2s;
}
body.layout-v2 .v2-toc-inline-toggle::before {
	top:6px; left:0;
	width:14px; height:2px;
}
body.layout-v2 .v2-toc-inline-toggle::after {
	top:0; left:6px;
	width:2px; height:14px;
}
body.layout-v2 .v2-toc-inline[open] .v2-toc-inline-toggle::after {
	transform:rotate(90deg);
}
body.layout-v2 .v2-toc-inline-nav {
	padding:6px 8px 12px;
	display:block;
	border-top:1px solid var(--rule);
}
body.layout-v2 .v2-toc-inline-nav a {
	display:block !important;
	padding:8px 12px !important;
	color:var(--ink-2) !important;
	text-decoration:none !important;
	font-family:var(--serif);
	font-size:16px !important;
	line-height:1.4 !important;
	font-weight:400 !important;
	border-left:2px solid transparent !important;
	border-radius:0 4px 4px 0;
	margin-bottom:1px;
	opacity:1 !important;
	transition:color 0.15s, background 0.15s, border-color 0.15s;
}
body.layout-v2 .v2-toc-inline-nav a:hover {
	color:var(--magenta) !important;
	background:var(--magenta-tint) !important;
	border-left-color:var(--magenta) !important;
}
body.layout-v2 .v2-toc-inline-nav a.is-current {
	color:var(--magenta) !important;
	background:var(--magenta-tint) !important;
	border-left-color:var(--magenta) !important;
	font-weight:600 !important;
}
body.layout-v2 .v2-toc-inline-nav a.is-read {
	color:var(--ink-4) !important;
}
body.layout-v2 .v2-toc-inline-nav a.is-read::before {
	content:"\2713\00a0";
	color:var(--green);
	font-weight:600;
}