/*
Theme Name: IntakeLab
Theme URI: https://intake-lab.com
Author: IntakeLab UG (Almagenic)
Author URI: https://intake-lab.com
Description: Block-Theme (Full Site Editing) für IntakeLab — Timing-Intelligenz für den B2B-Vertrieb. Wann statt Wer. Editorial-Design in Navy/Paper mit sparsamem Editorial-Rot, self-hosted Fonts (DSGVO), vollständig in Gutenberg editierbar.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: intakelab
Tags: full-site-editing, block-patterns, editor-style, custom-colors, custom-logo, block-styles, one-column, business, editorial
*/

/*
 * Dieses Theme ist ein Block-Theme (FSE). Die visuelle Gestaltung läuft
 * primär über theme.json (Farben, Typografie, Spacing, Styles).
 * style.css enthält nur wenige ergänzende Regeln, die theme.json (noch)
 * nicht abbildet — bewusst minimal gehalten.
 */

/* ============================================================
   DESIGN-TOKENS — Single Source of Truth für Rhythmus & Skala
   Zwei-Schriften-System:
     Inter        = alles Sans (Headings, Body, Buttons, Nav, Straplines, Wordmark)
     IBM Plex Mono = nur Eyebrows, Labels, KPI-Zahlen, Chart-Labels, Captions
   ============================================================ */
:root {
	/* 8pt-Spacing-Skala (4px-Basisraster) */
	--space-1: 0.25rem;   /*  4px */
	--space-2: 0.5rem;    /*  8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px */
	--space-6: 2rem;      /* 32px */
	--space-7: 2.5rem;    /* 40px */
	--space-8: 3rem;      /* 48px */
	--space-9: 4rem;      /* 64px */
	--space-10: 5rem;     /* 80px — Section-Rhythmus */
	--space-11: 6rem;     /* 96px */

	/* Modulare Typo-Skala (Ratio ~1.25) — spiegelt theme.json fontSizes */
	--fs-caption: 0.75rem;                                    /* Mono-Captions / Micro-Labels */
	--fs-eyebrow: 0.8rem;                                     /* Mono-Eyebrows / Labels */
	--fs-small:   var(--wp--preset--font-size--small);       /* 0.9375rem */
	--fs-body:    var(--wp--preset--font-size--medium);      /* 1.0625rem */
	--fs-lead:    var(--wp--preset--font-size--large);       /* Subline / Lead */
	--fs-h3:      var(--wp--preset--font-size--x-large);
	--fs-h2:      var(--wp--preset--font-size--xx-large);
	--fs-h1:      var(--wp--preset--font-size--huge);
	--fs-kpi:     clamp(2.25rem, 1.8rem + 1.6vw, 2.75rem);   /* KPI-Zahlen (Mono) */

	/* Font-Weights — diszipliniert */
	--fw-body: 400;
	--fw-medium: 500;
	--fw-semibold: 600;   /* Buttons / Eyebrows */
	--fw-heading: 700;
	--fw-display: 800;

	/* Line-Heights */
	--lh-tight: 1.08;     /* Headings */
	--lh-snug: 1.35;      /* Leads */
	--lh-body: 1.6;       /* Fließtext */

	/* Layout */
	--container-max: 1200px;
	--gutter: 1.5rem;

	/* Einheitlicher Karten-Radius */
	--radius-card: 12px;

	/* A11y — Akzent-Rot-Varianten für Kontrast (WCAG-AA), Marken-Rot bleibt #D63027:
	   --accent-ink  = dunkleres Rot NUR für Kleintext/Links auf hellem Paper
	                   (#C0271B ≈ 5,66:1 auf #FAFAF7; als Palette-Token
	                    --wp--preset--color--accent-ink verfügbar).
	   --accent-on-dark = aufgehelltes Marken-Rot für Links auf Navy-Footer
	                   (#EE6155 ≈ 5,08:1 auf #0A1F3C — dunkles Rot würde dort scheitern). */
	--accent-on-dark: #EE6155;

	/* Lesemaß (Fließtext-Zeilenlänge) + einheitlicher Sektions-Rhythmus.
	   EIN vertikales Raster über die ganze Seite (Fix: Paddings sprangen
	   zuvor zwischen 4rem/4.5rem/5rem/6rem). */
	--measure: 68ch;
	--section-py: 5rem;          /* Desktop-Sektionsabstand (Standard-Rhythmus) */
	--section-py-hero: 6rem;     /* Hero bekommt etwas mehr Luft oben */
	--section-py-mobile: 3.25rem;/* Mobile: gedrängter, aber konsistenter Takt */
}

/* Rote Editorial-Bar (Hero/Section-Marker) — als wiederverwendbares Utility.
   AUSRICHTUNG (Fix G1): Die Bar muss an der linken Content-Kante bündig mit
   Eyebrow/Headline sitzen — NICHT in der Section-Marge schweben.
   Frühere Lösung erzwang margin-left:0 !important und brach damit die
   WordPress-constrained-Zentrierung: die 80px-Bar rutschte an die volle
   Section-Padding-Kante (links vom zentrierten Content-Grid).
   Neu: Das Element bleibt ein normal zentriertes constrained-Kind (max-width =
   contentSize, margin-inline:auto — von WP gesetzt, NICHT überschrieben) und
   füllt damit die Content-Spalte. Der sichtbare 80px-Balken wird als ::before
   an dessen linker Kante gezeichnet → immer bündig mit Eyebrow/H, unabhängig
   von der Section-Breite (760px oder 1200px). */
.intakelab-red-bar {
	background: none;
	border: 0;
	margin-bottom: var(--space-6);
}
.intakelab-red-bar::before {
	content: "";
	display: block;
	width: 80px;
	height: 6px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 3px;
}

/* Monospace-Eyebrow (Kicker über Headlines) — EIN einheitlicher Eyebrow-Stil */
.intakelab-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: var(--fw-semibold);
}

/* Gedämpfte Platzhalter-KPI ([XX] — Wert folgt nach dem Pilot).
   Klar als "folgt" lesbar, nicht mit belegten Kennzahlen verwechselbar. */
.intakelab-kpi-pending {
	opacity: 0.32;
	font-weight: 500;
}

/* Sanfte Karten-Umrandung, konsistent mit Referenz-Design.
   Einheitlicher Karten-Radius (12px) über alle Flächen: .intakelab-card,
   .intakelab-stat, .intakelab-signal-card, .intakelab-viz--framed. */
.intakelab-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-card);
	background-color: #ffffff;
}

/* ── Kontrast (A11y / WCAG-AA) ───────────────────────────────────
   Marken-Rot #D63027 bleibt für Flächen, Bars, die große H1-Akzent-Zeile,
   KPI-Zahlen und SVG-Fills erhalten. Nur KLEINTEXT/LINKS bekommen den
   dunkleren bzw. auf Navy aufgehellten Ton, damit sie 4,5:1 sicher erreichen. */

/* (1) Kleine rote Textstellen (Eyebrows, Labels, Inline-Emphase) auf hellem
   Grund → dunkleres Marken-Rot (--accent-ink, 5,66:1). Große Akzent-Texte
   (H1-Hero-Akzent „bereit ist.", Akzent-Wörter in H1–H3) sind ausgenommen —
   dort greift die Large-Text-Schwelle (3:1), #D63027 bleibt. */
:where(p, li, span, small, strong, em, cite, dt, dd, figcaption, .intakelab-eyebrow, .intakelab-signal-card__tag).has-accent-color:not(h1 *):not(h2 *):not(h3 *):not(.has-large-font-size):not(.has-x-large-font-size):not(.has-xx-large-font-size):not(.has-huge-font-size) {
	color: var(--wp--preset--color--accent-ink) !important;
}

/* (2) Footer-Links liegen auf Navy — dort scheitert jedes dunkle Rot. Aufgehellter
   Marken-Ton (--accent-on-dark, 5,08:1 auf #0A1F3C). Fließtext-Footer-Links
   bleiben zusätzlich unterstrichen (Nicht-nur-Farbe, siehe Regel weiter unten). */
.intakelab-footer a {
	color: var(--accent-on-dark);
}

/* (3) WordPress-Core setzt bei .has-border-color fälschlich die TEXT-Farbe auf
   den Border-Ton (#E5E7EB) — auf weißen Karten praktisch unsichtbar (1,23:1).
   Gerahmte Karten/Sektionen stehen ausschließlich auf hellem Grund → lesbares
   Ink erzwingen; Elemente mit eigener Farbklasse behalten ihre Farbe. */
section.has-border-color,
.intakelab-card.has-border-color {
	color: var(--wp--preset--color--ink) !important;
}

/* ── Fokus-Sichtbarkeit (A11y) ──────────────────────────────────
   Konsistenter, gut sichtbarer Fokus-Ring über Buttons, Links und
   Navigation. :focus-visible zeigt den Ring nur bei Tastatur-Fokus,
   nicht bei Maus-Klick — sauber und unaufdringlich. */
.skip-link:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
a:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.intakelab-wordmark:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Weiche, konsistente Button-Interaktion (hover/active) */
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* ── Visualisierungen (inline-SVG) ───────────────────────────────
   Responsive Wrapper: SVG nutzt viewBox + skaliert auf 100% Breite.
   Höhe folgt dem Seitenverhältnis. Konsistente Rahmung als "Diagramm-Karte". */
.intakelab-viz {
	width: 100%;
	margin: 0;
}
.intakelab-viz svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Utility-Container mit Border + Padding: border-box, damit width/height:100%
   auf schmalen Viewports (390px) nicht über den Container hinauslaufen.
   Behebt horizontalen Overflow der gerahmten Diagramm-Karten auf Mobile. */
.intakelab-viz,
.intakelab-viz--framed,
.intakelab-card,
.intakelab-stat,
.intakelab-signal-card {
	box-sizing: border-box;
	max-width: 100%;
}
.intakelab-viz--framed {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-card);
	/* Warm getöntes Karten-Weiß statt klinischem #fff — hebt sich ruhig von der
	   Paper-Leinwand (#FAFAF7) ab, ohne kühl zu glänzen. */
	background-color: #FEFDFB;
	padding: var(--space-5);
	box-shadow: 0 1px 2px rgba(10, 31, 60, 0.04);
}
/* Zentrierte, in der Breite begrenzte Diagramme (z. B. Score-Ringe):
   verhindert, dass ein schmales viewBox auf 1200px hochskaliert und die
   Grafik unnatürlich groß wird. */
.intakelab-viz--center {
	margin-inline: auto;
}
.intakelab-viz-caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: var(--space-3);
}

/* Hero-Beeswarm — dezente, reduzierte Animation.
   Der EINE bereite Account tritt einmal über die Bereitschafts-Schwelle
   (Bewegung von links nach rechts über die Linie) und wird sichtbar; sein
   Halo atmet danach leise weiter. Standardmäßig statisch (der Punkt liegt
   von Anfang an jenseits der Schwelle — der „ein Punkt über der Linie"-Moment
   ist auch ohne Motion sofort da). Motion nur bei ausdrücklicher Nutzer-
   Erlaubnis (prefers-reduced-motion: no-preference). Kein Layout-Shift. */
@media (prefers-reduced-motion: no-preference) {
	.il-beeswarm .il-ready {
		animation: il-cross 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
	}
	.il-beeswarm .il-ready-halo {
		transform-box: fill-box;
		transform-origin: center;
		animation: il-pulse 2.6s ease-in-out 1.9s infinite;
	}
	@keyframes il-cross {
		from { transform: translateX(-66px); opacity: 0; }
		55%  { opacity: 1; }
		to   { transform: translateX(0); opacity: 1; }
	}
	@keyframes il-pulse {
		0%, 100% { transform: scale(1); opacity: 0.16; }
		50%      { transform: scale(1.7); opacity: 0.04; }
	}
}

/* Strapline / Subline — Inter, leicht (medium), NICHT serif-italic.
   Trägt die ruhige Ergänzung unter der Headline. */
.intakelab-strapline {
	font-family: var(--wp--preset--font-family--body);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
}

/* Stat-Tile (Marktzahl groß, Aussage klein) */
.intakelab-stat {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-card);
	background-color: #ffffff;
	padding: var(--space-5);
	height: 100%;
}
.intakelab-stat__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-kpi);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums lining-nums;  /* Ziffern fluchten, springen nicht */
	color: var(--wp--preset--color--ink);
}
.intakelab-stat__num .accent {
	color: var(--wp--preset--color--accent);
}

/* Beleg-Band-Variante: prominenteres Proof-Band direkt nach dem Hero.
   Größere Zahl (scannbar aus einem Blick), sonst identische Stat-Sprache. */
.intakelab-stat--proof .intakelab-stat__num {
	font-size: clamp(2.75rem, 2.1rem + 2.4vw, 3.5rem);
}

/* Beleg-Referenz statt lautem „QUELLE"-Chip: kleine, gedämpfte hochgestellte
   Fußnoten-Marke an der Aussage — der Beleg ist da, ohne sich auszurufen. */
.intakelab-fn {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6em;
	font-weight: var(--fw-semibold);
	line-height: 0;
	color: var(--wp--preset--color--muted);
	margin-left: 0.15em;
}

/* Gesammelte Quellen-Zeile am Fuß der Beleg-Sektion: Mono, klein, gedämpft,
   durch eine Haarlinie abgesetzt. Editorial-ruhig — kein Label pro Kachel. */
.intakelab-sources {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1.4rem;
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted);
}
.intakelab-sources__label {
	font-weight: var(--fw-semibold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.intakelab-sources__item .n {
	font-weight: var(--fw-semibold);
	color: var(--wp--preset--color--ink);
	margin-right: 0.35em;
}

/* Quelle direkt an der Zahl — der große Name sofort sichtbar (Ink, fett), kein
   versteckter Fußnoten-Verweis. Akzent-Strich als Marke, Report-Zusatz gedämpft. */
.intakelab-stat__src {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	margin-top: var(--space-4);
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}
.intakelab-stat__src::before {
	content: "";
	flex: none;
	align-self: center;
	width: 1.5rem;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--accent);
}
/* Der große Name (Salesforce, Gartner, Forrester …) — prominent an der Zahl. */
.intakelab-beleg__srcbrand {
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
/* Report-Zusatz („State of Sales", „The B2B Buying Journey") — gedämpft. */
.intakelab-beleg__srcrest {
	font-size: 0.82rem;
	color: var(--wp--preset--color--muted);
}

/* Signaltyp- / Datenquellen-Karten */
.intakelab-signal-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-card);
	background-color: #ffffff;
	padding: var(--space-5);
	height: 100%;
}
.intakelab-signal-card__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-caption);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Zwei-Spalten-Diagramm-Layout: Erklärtext neben Grafik */
@media (min-width: 782px) {
	.intakelab-viz-split .wp-block-column:first-child {
		flex-basis: 42% !important;
	}
}

/* ============================================================
   GLOBALE RESPONSIVE-SICHERUNG — 0 horizontaler Overflow
   Root-Cause bereits im Markup gelöst (constrained-Layout +
   .intakelab-viz--wide-Scroll-Wrapper). Diese Regeln sind die
   strukturelle Absicherung: kein Element sprengt je den Viewport.
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}
/* Medien + Tabellen nie breiter als ihr Container */
img,
svg,
video,
canvas,
iframe,
table {
	max-width: 100%;
}
/* Lange Mono-Tokens, URLs, Score-Formeln sauber umbrechen statt clippen */
main p,
main li,
main a,
main figcaption,
.intakelab-footer p,
.intakelab-footer a {
	overflow-wrap: break-word;
}

/* ── Listen-System — Editorial-Marker + Hanging-Indent ───────────
   Das Theme hatte KEIN Listen-Styling (Default-Disc-Bullets).
   Fließtext-Listen im Hauptinhalt bekommen einen dezenten, mit dem
   roten Editorial-Bar-Motiv verwandten Akzent-Marker in der Marge;
   der Text fluchtet bündig (Hanging-Indent). Footer-Listen sind reine
   Navigation → marker-los. Vertikaler Rhythmus über Spacing-Tokens. */
main ul,
main ol {
	list-style: none;
	margin-top: var(--space-4);
	margin-bottom: var(--space-4);
	padding-left: 0;
}
main li {
	position: relative;
	padding-left: 1.6em;      /* Marker in der Marge, Text bündig darüber hinaus */
	margin-bottom: var(--space-2);
	line-height: var(--lh-body);
}
main li:last-child {
	margin-bottom: 0;
}
/* Ungeordnete Liste: kurzer Akzent-Strich (Echo des roten Editorial-Bars),
   semantisch neutral — funktioniert für Merkmale wie für Kontraste. */
main ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.7em;
	height: 0.14em;
	min-height: 2px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 1px;
}
/* Geordnete Liste: Mono-Zähler in Akzent, bündiger Hanging-Indent */
main ol {
	counter-reset: il-ol;
}
main ol > li {
	padding-left: 2em;
}
main ol > li::before {
	content: counter(il-ol) ".";
	counter-increment: il-ol;
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: var(--fw-semibold);
	font-size: 0.9em;
	color: var(--wp--preset--color--accent);
}
/* Verschachtelte Listen: kein Doppel-Abstand */
main li > ul,
main li > ol {
	margin-top: var(--space-2);
	margin-bottom: 0;
}
/* Footer-Listen = reine Navigation, ohne Marker */
.intakelab-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.intakelab-footer li {
	margin: 0;
	padding: 0;
}

/* ── Measure / Zeilenlänge (Fließtext) ───────────────────────────
   contentSize (760px) ist bewusst breit für Heros/Grids. Fließtext
   wird auf ~68ch begrenzt (Lesbarkeits-Ideal 45–75). Gilt für Text
   direkt in <main> (FAQ, Über-uns) wie in <section> (Pillar-Seiten);
   in schmalen Karten/Spalten (< 68ch) bleibt die Regel wirkungslos, dort
   greift die volle Spaltenbreite — Headlines/Grids bleiben unberührt. */
/* Root-Cause-Fix (Ausrichtung): Das Lesemaß gilt NUR für Fließtext-Absätze und
   darf die Content-Spalte NIE überschreiten. 68ch war zuvor größer als die
   760px-Spalte → Fließtext lief über die Spaltenkante, während Headlines bei
   760px blieben (springende Kante, Lead full-bleed). min(measure, contentSize)
   hält Body-Text und Headlines auf EINER Kante.
   WICHTIG: Eyebrows, Straplines, Captions, Stat-/Card-/Quellen-Labels sind
   AUSGENOMMEN — sie behalten die native WP-Spaltenbreite (760/1200) und damit
   exakt dieselbe zentrierte Box wie ihre Headline (linke Kante deckt sich mit
   roter Bar / H). Ein Lesemaß-Cap hätte sie zu schmalen, mittig zentrierten
   Boxen gemacht → von der Editorial-Kante weggerückt. */
main p:not(.intakelab-eyebrow):not(.intakelab-strapline):not(.intakelab-viz-caption):not([class*="intakelab-stat"]):not([class*="intakelab-sources"]):not([class*="intakelab-signal-card"]),
main li {
	max-width: min(var(--measure), var(--wp--style--global--content-size, 760px)) !important;
}
/* Ausrichtungs-Fix (2026-07-20): WP constrained gibt Kindern margin-inline:auto.
   Ist ein Lead/Body-Absatz durch das Lesemaß schmaler als die Content-Spalte,
   ZENTRIERT diese Auto-Marge ihn → Loch links, Text nach rechts gerückt, während
   die (ungecappte) Headline links-bündig voll steht = „schlecht geschnitten".
   Fix: gemessene Fließtext-Absätze an die LINKE Content-Kante binden (deckt sich
   mit roter Bar / Headline). Bewusst zentrierte Blöcke (.has-text-align-center,
   z. B. Hero) bleiben ausgenommen. */
main p:not(.intakelab-eyebrow):not(.intakelab-strapline):not(.intakelab-viz-caption):not([class*="intakelab-stat"]):not([class*="intakelab-sources"]):not([class*="intakelab-signal-card"]):not(.has-text-align-center):not(.has-text-align-right),
main li {
	/* An die 1200er-Content-Spalte einrücken (= Headline-Kante), NICHT an die
	   Section-Padding-Kante. In der vollen alignfull-Section ergibt die Formel
	   den Spalten-Offset (~96px → left=120, bündig mit H2); in schmaleren
	   Wrappern/Karten/Spalten (Containing-Block ≤ 1200) wird sie 0 → linksbündig
	   im Wrapper. So deckt EINE Regel direkte Section-Kinder UND verschachtelte ab. */
	margin-inline-start: max(0px, calc((100% - 1200px) / 2)) !important;
	margin-inline-end: auto !important;
}
/* Lead / Subline — kontrollierte Standfirst-Größe (2026-07-20).
   Befund (gemessen auf Staging): das `large`-Preset wird zu clamp(22px … 36px)
   generiert → Fließtext-Leads rendern bei 36px = Headline-Größe und brechen in
   7 ragged Kurzzeilen mit Waisen. Deterministischer Cap ~22px (FT/NYT-Standfirst
   ~20–22px), unabhängig vom Preset-Cache. Spezifität (main p.klasse) schlägt das
   Preset ohne !important. Bei kleinerer Schrift füllt das bestehende Lesemaß die
   Zeile → 2–3 volle Zeilen statt 7 ragged. */
main p.has-large-font-size {
	font-size: clamp(1.15rem, 1.06rem + 0.45vw, 1.375rem) !important; /* ~18.4 → 22px; WP-Preset-Klasse setzt !important, daher hier ebenso */
	line-height: 1.5;
}
/* Ausgewogene Umbrüche: keine Heading-Orphans, sauberer Fließtext-Fluss */
main h1,
main h2,
main h3 {
	text-wrap: balance;
}
main p {
	text-wrap: pretty;
}
/* Kurze Label-/Kicker-/Quellen-Zeilen (Eyebrows, Captions, Diagramm-Quellen)
   sind zu kurz für `pretty`-Orphan-Vermeidung und ließen häufig ein Einzelwort
   auf eigener Zeile (cross-browser, v. a. Firefox). `balance` verteilt die
   wenigen Wörter gleichmäßig auf die Zeilen → keine Waisen. */
main figcaption,
.intakelab-viz-caption,
.intakelab-eyebrow,
.intakelab-flow__eyebrow,
.intakelab-flow__source,
.intakelab-funnel__eyebrow,
.intakelab-funnel__sub,
.intakelab-funnel__source {
	text-wrap: balance;
}

/* ── Karten: gleiche Höhe je Reihe (Equal-Height) ────────────────
   WP-Spalten stretchen bereits; die innere Karte füllt die Spaltenhöhe,
   damit Unterkanten in einer Reihe fluchten. Auf Mobile (gestapelt)
   = natürliche Inhaltshöhe. */
.wp-block-column > .intakelab-card,
.wp-block-column > .intakelab-signal-card,
.wp-block-column > .intakelab-stat {
	height: 100%;
}

/* ── Touch-Targets ≥44px / ≥24px (Apple-HIG / WCAG 2.5.5 / 2.5.8) ─
   Gilt global: Button-Links, Wordmark, Mobile-Toggle (44px) und
   Footer-Navigation, Inhalts-Links (24px Minimum). inline-flex +
   align-items zentriert den Inhalt in der vergrößerten Box. */
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.intakelab-wordmark {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.intakelab-header .wp-block-navigation-item__content {
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}
/* Mobile-Menü-Toggle (Hamburger/Schließen) — volle 44×44-Trefferfläche */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* WCAG 2.5.8 Target Size ≥24×24 CSS-px — Footer-Navigation und
   Inhalts-Links in Listen (keine inline-text-links). Das Padding
   vergrößert die Trefferfläche ohne das Layout zu brechen. */
.intakelab-footer li a {
	display: inline-block;
	padding-block: 0.3rem;
	line-height: 1.4;
}
main li a {
	display: inline-block;
	padding-block: 0.2rem;
}
.intakelab-footer p a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* ── In-Text-Links unterstreichen (WCAG 1.4.1 link-in-text-block) ──
   Links, die MITTEN in einem Textblock stehen, dürfen nicht allein über
   Farbe erkennbar sein. Fließtext-Links (Body + Footer-Copyright) werden
   unterstrichen; reine Navigations-Listen (Header/Footer-Spalten) bleiben
   ausgenommen, da dort kein umgebender Text steht. */
main p a,
main li a,
.intakelab-footer p a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ── Mobile Data-Viz (≤781px) ────────────────────────────────────
   Dichte, breite Diagramme (Pipelines, Timeline, Cockpit, Flows) würden
   auf 390px so stark schrumpfen, dass Labels unter ~5px unlesbar werden.
   Lösung (NYT/FT-Muster): die Grafik behält eine lesbare Mindestbreite und
   wird INNERHALB ihrer Karte horizontal scrollbar. Die Karte selbst bleibt
   max-width:100% → 0 horizontaler Seiten-Overflow. */
/* 1:1-Floor je Chart = seine viewBox-Breite (via --vb, Default 1000px).
   UNBEDINGT (nicht nur mobil): so rendert jede In-Chart-Beschriftung nie kleiner
   als ihr viewBox-Font-Wert — bei 600px-Floor schrumpfte ein 11er-Label auf ~6,6px,
   und in schmalen Desktop-Spalten (2-Spalten-Layouts) schrumpften Labels ebenso.
   Ist der Container schmaler als die viewBox, scrollt die Grafik INNERHALB ihrer
   Karte horizontal (Leserichtung der Fluss-Diagramme); die Karte bleibt
   max-width:100% → 0 horizontaler Seiten-Overflow. */
.intakelab-viz--wide {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.intakelab-viz--wide svg {
	min-width: var(--vb, 1000px);
}
/* Mobile-Skalierung der Hero-Beeswarm (viewBox 480, NICHT --wide):
   Zuvor erzwang ein min-width:480-Floor die volle viewBox-Breite → die Grafik
   ragte auf 320/390 über den Viewport (Runner: horizontal-overflow der svg-text/
   circle-Elemente, x+width > viewport). Der Floor sollte Labels ≥11px halten,
   ließ die Figur aber breiter als der Bildschirm werden.
   Fix (Sprint 6c Rest): min-width entfernt → die Grafik skaliert via viewBox +
   width:100%/max-width:100% sauber in 320/390 hinein. Kein Seiten- oder
   Element-Overflow mehr. Die Marken-Aussage (Punktwolke + EIN roter Account
   jenseits der Schwelle) bleibt integer; die Mono-Labels rendern auf Mobile
   entsprechend kleiner, die Kernaussage trägt zusätzlich die figcaption. */
@media (max-width: 781px) {
	.intakelab-viz--floor-mobile {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.intakelab-viz--floor-mobile svg {
		min-width: 0;
	}
}
@media (max-width: 781px) {
	.intakelab-viz--framed {
		padding: 1rem;
	}
	.intakelab-viz-caption {
		font-size: 0.68rem;
	}
}

/* ============================================================
   SEKTIONS-RHYTHMUS + KAPITEL-TRENNER (Homepage)
   Ganzheitlich: die 17 gestapelten Home-Sektionen liefen zuvor mit
   springenden Paddings (4/4, 4.5/4.5, 5/5, 6/5) und — bei mehreren Paper-
   Sektionen hintereinander — OHNE sichtbare Grenze ineinander ("zufällig
   gestapelte Blöcke"). Diese Schicht erzwingt EINEN vertikalen Takt und
   setzt eine Haarlinie als bewussten Kapitel-Übergang.
   Scope: nur die Startseite (body.home) — Pillar-Seiten mit gekoppelter
   Hero+Karten-Einheit bleiben unberührt.
   ============================================================ */
body.home main > section {
	padding-top: var(--section-py) !important;
	padding-bottom: var(--section-py) !important;
}
body.home main > section#signal-monitor {
	padding-top: var(--section-py-hero) !important;
}
/* Kapitel-Trenner: dünne Haarlinie oben an jeder Sektion. Hero ausgenommen
   (Seitenanfang) und dunkle Ink-Bänder ausgenommen (dort trennt bereits der
   Farbkontrast; eine helle Linie auf Navy wirkte fremd). Paper-auf-Paper
   bekommt so endlich eine Grenze; an weißen Bändern verschmilzt die Linie mit
   deren eigener Rahmung zu einer sauberen Trennung. */
body.home main > section:not(#signal-monitor):not(.has-ink-background-color) {
	border-top: 1px solid var(--wp--preset--color--border);
}

@media (max-width: 781px) {
	/* Mobile: engerer, gleichmäßiger Takt (statt 80px-Sprüngen über eine sehr
	   lange Seite). Nur Home, damit gekoppelte Hero+Karten-Einheiten auf den
	   Pillar-Seiten nicht auseinandergerissen werden. */
	body.home main > section {
		padding-top: var(--section-py-mobile) !important;
		padding-bottom: var(--section-py-mobile) !important;
	}
	body.home main > section#signal-monitor {
		padding-top: 2.5rem !important;
	}
}

/* ============================================================
   BELEG-REVEAL — aufklappbarer Quellen-Beleg hinter jeder Proof-Zahl
   Native <details>/<summary>: Tap/Klick/Enter/Space toggeln zuverlässig,
   tastatur- + touchfähig, kein JS. Panel = Aussage + tokenisierte Mini-Viz
   + Kontext + Studien-Link. Kein display:none im offenen Zustand.
   ============================================================ */
.intakelab-beleg {
	/* erbt Karten-Rahmung von .intakelab-stat (border/radius/padding/bg) */
	overflow: hidden;               /* Balken-Breiten bleiben im Karten-Radius */
}
/* Quellen-Zeile im Beleg darf umbrechen (Quelle + Tier + Cue). */
.intakelab-beleg .intakelab-stat__src {
	flex-wrap: wrap;
	row-gap: 0.4rem;
}
.intakelab-beleg__summary {
	display: block;
	position: relative;
	cursor: pointer;
	list-style: none;               /* Standard-Dreieck weg (FF/Standard) */
	outline: none;
}
.intakelab-beleg__summary::-webkit-details-marker { display: none; }  /* Safari/Chrome */
.intakelab-beleg__summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 4px;
}
.intakelab-beleg__label {
	margin-top: 0.5rem;             /* eng an die Zahl gekoppelt: „17 %" + Fortsetzung = eine Aussage */
	font-size: var(--fs-body);
	line-height: 1.45;
	text-wrap: pretty;              /* keine Waisen in der Kennzahl-Zeile */
	color: var(--wp--preset--color--ink);
}
/* Affordance-Zeile „Beleg ansehen ⌄" — Akzent, Chevron dreht beim Öffnen. */
.intakelab-beleg__cue {
	display: inline-flex;
	align-items: center;
	margin-left: auto;              /* schiebt den Hinweis ans Zeilenende der __src */
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}
.intakelab-beleg__cue span {
	display: inline-block;
	transition: transform 0.18s ease;
}
.intakelab-beleg[open] .intakelab-beleg__cue span { transform: rotate(180deg); }
.intakelab-beleg[open] .intakelab-beleg__cue { color: var(--wp--preset--color--muted); }
@media (prefers-reduced-motion: reduce) {
	.intakelab-beleg__cue span { transition: none; }
}
/* Tier-Marke (Vendor-Benchmark / Marktforschung) — kleiner, gedämpfter Chip. */
.intakelab-beleg__tier {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px — Gate-Floor */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding: 0.1rem 0.4rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
}

/* Reveal-Panel — erscheint unter der Summary, klar abgesetzt. */
.intakelab-beleg__panel {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
}
.intakelab-beleg__claim {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}
/* Schlussfolgerung für deutsche Unternehmen — der „so-what"-Callout, editorial
   hervorgehoben (warme Karte, Akzent-Kante, Label in Akzent-Mono). Die eigentliche
   Aussage der Zahl steht hier, nicht in der Provenienz. */
.intakelab-beleg__implication {
	margin-top: var(--space-4);
	padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	background-color: #FEFDFB;
}
.intakelab-beleg__implication-label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;                /* 11px — Gate-Floor */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.intakelab-beleg__implication-text {
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}
/* Original-Wortlaut der Quelle — O-Ton, distinct als Evidenz gesetzt: Ink (nicht
   gedämpft), ruhig getönte Box, großes Akzent-Anführungszeichen. Klar abgesetzt
   vom Implikations-Callout (unsere Stimme) — hier spricht die Quelle selbst. */
.intakelab-beleg__quote {
	position: relative;
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
	background-color: #F4F2EC;
	border-radius: var(--radius-card);
	font-size: var(--fs-small);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}
.intakelab-beleg__quote::before {
	content: "\201E";               /* „ — deutsches öffnendes Anführungszeichen */
	position: absolute;
	left: 0.75rem;
	top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}
.intakelab-beleg__context {
	margin-top: var(--space-4);
	font-size: var(--fs-caption);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
/* Studien-Link als Panel-Fuß — deutlich vom Fließtext abgesetzt (Luft + Haarlinie). */
.intakelab-beleg__meta {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
}
.intakelab-beleg__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--fs-caption);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.intakelab-beleg__link:hover,
.intakelab-beleg__link:focus-visible {
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ── Beleg-Reveal (Fix BUG-1: seitenverschiebender Reflow) ───────────
   VERWORFEN (frühere Lösung): der geöffnete Beleg brach über die volle
   Zeilenbreite aus (grid-column:1/-1). Dadurch wuchs die Grid-Zeile, die
   Nachbarspalten wurden verschoben und die halbe Seite rutschte nach unten
   (design-studio-Runner: „full-reflow", lateral_shift bis 1255px — der Bug,
   den Gunter live gesehen hat).
   JETZT: der Beleg öffnet als kompaktes, fixiertes Overlay-Kärtchen. Das Panel
   verlässt den Fluss vollständig (position:fixed) → keine Sibling-Verschiebung,
   kein Dokument-Wachstum, kein horizontaler Overflow auf irgendeinem Viewport
   (Runner: „overlay"). Detail-on-demand, klein & gestaltet — nicht der
   verworfene Full-Width-Block. Marke gewahrt (Navy-Backdrop, Paper-Karte). */
.wp-block-columns:has(.intakelab-beleg) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-5);
	/* Default align-items:stretch → geschlossene Karten einer Reihe gleich hoch. */
}
.wp-block-columns:has(.intakelab-beleg) > .wp-block-column {
	width: auto !important;   /* WP-Inline-flex-basis neutralisieren */
	min-width: 0;             /* verhindert Grid-Overflow durch lange Inhalte */
	flex: initial;
}
/* Trigger-Karte = Positions-/Fokus-Kontext. */
.intakelab-beleg { position: relative; }
/* Geschlossen: Panel komplett aus dem Layout (nicht bloß per overflow geclippt),
   damit der Reveal bis zum Öffnen NICHTS zum Fluss beiträgt. */
.intakelab-beleg:not([open]) .intakelab-beleg__panel { display: none; }
.intakelab-beleg[open] { overflow: visible; z-index: 60; }
/* Abdunkelnder Hintergrund (Navy @45 %) — Fokus aufs Panel; Klick schließt (JS). */
.intakelab-beleg[open]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(10, 31, 60, 0.45);   /* --wp--preset--color--ink #0A1F3C */
}
/* Beleg-Panel als fixiertes, zentriertes Detail-Kärtchen. */
.intakelab-beleg[open] .intakelab-beleg__panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(480px, 92vw);
	max-width: none;
	max-height: 85vh;
	overflow-y: auto;
	z-index: 100;
	margin: 0;
	padding: var(--space-6);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
	box-shadow: 0 24px 60px rgba(10, 31, 60, 0.28);
}
@media (prefers-reduced-motion: no-preference) {
	.intakelab-beleg[open] .intakelab-beleg__panel {
		animation: intakelab-beleg-in 0.16s ease both;
	}
}
@keyframes intakelab-beleg-in {
	from { opacity: 0; transform: translate(-50%, -46%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* Schließen-Knopf im Overlay (Touch-Ziel ≥ 40px). */
.intakelab-beleg__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.intakelab-beleg__close:hover,
.intakelab-beleg__close:focus-visible { color: var(--wp--preset--color--accent); }

/* Tokenisierte Mini-Viz — HTML/CSS-Balken (responsiv, keine SVG-Scroll-Falle).
   Balken = reine Farbfläche (dekorativ); Zahlen/Namen als Direct-Label-Caption
   in Ink/Muted auf Paper → AA-sicher, Labels ≥ 11px, kein Legende-Kasten. */
.intakelab-beleg-bar {
	margin: var(--space-4) 0 0;
}
.intakelab-beleg-bar__track {
	display: flex;
	width: 100%;
	height: 0.75rem;                /* 12px — schlanker Anteils-Balken */
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--wp--preset--color--border);   /* Rest-Rail für Single-Bar */
}
.intakelab-beleg-bar__seg,
.intakelab-beleg-bar__fill {
	display: block;
	height: 100%;
}
.intakelab-beleg-bar__seg.is-accent,
.intakelab-beleg-bar__fill { background-color: var(--wp--preset--color--accent); }
.intakelab-beleg-bar__seg.is-muted { background-color: var(--wp--preset--color--muted); }
/* Direct-Label-Caption: sitzt unter dem jeweiligen Segment (flex-basis = %). */
.intakelab-beleg-bar__keys {
	display: flex;
	gap: var(--space-3);
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;           /* 11px — Gate-Floor */
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}
.intakelab-beleg-bar__keys .key { position: relative; padding-left: 0.85rem; }
.intakelab-beleg-bar__keys .key::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 2px;
}
.intakelab-beleg-bar__keys .key.is-accent::before { background-color: var(--wp--preset--color--accent); }
.intakelab-beleg-bar__keys .key.is-muted::before { background-color: var(--wp--preset--color--muted); }
.intakelab-beleg-bar__keys .key b {
	display: inline;
	font-weight: var(--fw-semibold);
	color: var(--wp--preset--color--ink);
}
.intakelab-beleg-bar__keys--single { flex-wrap: wrap; }

/* Auf sehr schmalen Karten: Caption-Segmente untereinander statt gequetscht. */
@media (max-width: 480px) {
	.intakelab-beleg-bar__keys { flex-direction: column; gap: 0.35rem; }
	.intakelab-beleg-bar__keys .key { flex-basis: auto !important; }
}

/* ============================================================
   FLUSS-KARTEN — HTML/CSS statt SmartArt-SVG.
   Horizontal auf Desktop, echter vertikaler Reflow auf Mobile
   (kein Horizontal-Scroll). Warme Karten, EIN Akzent (Ergebnis-
   Karte), Direktbeschriftung, Labels immer ≥ 11px (kein viewBox-
   Skalierungs-Trick nötig). Leitmarken: Aussage-Titel, Restraint,
   Quellenzeile an jeder Grafik.
   ============================================================ */
/* Dual-Render-Umschalter: Desktop zeigt Spine-SVG, Mobile den reflow-Flow
   (kein Horizontal-Scroll, keine sub-11px-Labels). Genau einer sichtbar. */
.intakelab-only-mobile { display: none; }
@media (max-width: 781px) {
	.intakelab-only-desktop { display: none; }
	.intakelab-only-mobile { display: block; }
}
.intakelab-flow {
	margin: 3rem 0 0;
}
/* Aussage-Titel (die Kernaussage) + nüchterne Subline über dem Fluss. */
.intakelab-flow__head {
	margin-bottom: var(--space-5);
}
.intakelab-flow__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.intakelab-flow__title {
	margin-top: 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}
.intakelab-flow__track {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
}
.intakelab-flow__step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-4);
	background-color: #FEFDFB;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-card);
}
/* Nummer = runde Stations-Marke auf der Ablauf-Achse (Richtung sichtbar). */
.intakelab-flow__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--ink);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;                 /* 12px, zentriert im Badge */
	font-weight: 700;
	letter-spacing: 0;
}
.intakelab-flow__step-title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}
.intakelab-flow__step-desc {
	/* Schritt-Beschreibungen tragen ganze Sätze im Content-Fluss des Diagramms
	   (nicht bloße Labels) → Legibilitäts-Floor: 15px (small-Skalenstufe) statt
	   vormals 13px. Bleibt klar unter step-title (16px) → Hierarchie erhalten. */
	font-size: var(--wp--preset--font-size--small);   /* 0.9375rem = 15px */
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}
/* EIN Akzent: die Ergebnis-/Entscheidungs-Karte trägt die Marke. */
.intakelab-flow__step.is-outcome {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--accent);
}
/* Ergebnis-Station trägt den einen Akzent (Rot-Badge). */
.intakelab-flow__step.is-outcome .intakelab-flow__num {
	background-color: var(--wp--preset--color--accent);
	color: #ffffff;
}
/* Konnektor = Richtungspfeil auf der Ablauf-Achse; dreht im Mobile-Stack nach unten. */
.intakelab-flow__link {
	flex: 0 0 auto;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	color: var(--wp--preset--color--ink);
}
.intakelab-flow__link svg { width: 1.5rem; height: 1.5rem; display: block; }
/* Quellen-/„schematisch"-Zeile — gedämpft, an jeder Grafik (Leitmarke). */
.intakelab-flow__source {
	margin-top: var(--space-4);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
/* Fan-Layout (medienbeobachtung): Eingänge → Nabe → Ausgänge. */
.intakelab-flow__group {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.intakelab-flow__hub {
	flex: 0 0 auto;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: var(--space-4);
	min-width: 6.5rem;
	background-color: var(--wp--preset--color--ink);
	border-radius: var(--radius-card);
	color: var(--wp--preset--color--paper, #FAFAF7);
	text-align: center;
}
.intakelab-flow__hub-mark {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
}
.intakelab-flow__hub-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;                /* 10px OK: dekorative Nabe, Aussage steht in Karten */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}
.intakelab-flow__step.is-source-card { background-color: #ffffff; }
.intakelab-flow__step.is-out-card {
	border-color: var(--wp--preset--color--border);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--ink);  /* Ink-Schiene statt 3× Rot — ein Rot pro Screen */
}

/* Reflow zu vertikalem Stack, Konnektoren nach unten, kein Scroll.
   Breakpoint 999px (NICHT 680): der 6-Schritt-Horizontal-Track braucht ~1000px,
   um zu passen. Bei 681–999px lief er zuvor über den Container hinaus (Figure
   overflow:visible) und verbreiterte die Seite um bis zu ~54px (z. B. 768→+19px,
   782→+54px). Design-Intent bleibt „echter vertikaler Reflow statt Horizontal-
   Scroll" — nur an der Schwelle, ab der die Horizontale wirklich passt. */
@media (max-width: 999px) {
	.intakelab-flow__track { flex-direction: column; }
	.intakelab-flow__step,
	.intakelab-flow__group,
	.intakelab-flow__hub { flex: 1 1 auto; align-self: stretch; width: 100%; }
	.intakelab-flow__link { width: 100%; height: 1.5rem; }
	.intakelab-flow__link svg { transform: rotate(90deg); }
}

/* ============================================================
   BULLET-GRAPH (Stephen Few) — ARS/KRS-Scoring in HTML/CSS.
   Ersetzt den Tacho/Gauge: pro Score EIN horizontaler Bullet.
   Länge statt Winkel; keine SVG-Skalierungs-Falle. Prinzipien:
   · 3 qualitative Bänder = Graustufen EINER Hue (kein Rot/Gelb/Grün)
   · Ist-Wert = Ink-Balken ab gemeinsamer Null-Baseline
   · Zielmarke = dünner vertikaler Strich in Akzent-Rot (EINZIGES Rot)
   · Direct Labeling (tabular-nums), keine Farb-Legende
   · Beide Bullets teilen Skala + linke Kante (fluchtend)
   Redundante Kodierung (Form + Position + Text), Labels ≥ 11px.
   ============================================================ */
.intakelab-bullets {
	--il-bullet-label-w: 5.5rem;   /* Label-Spalte — Bullets + Achse fluchten darüber */
	margin-inline: auto;
	max-width: 720px;
}
/* Aussage-Titel + gedämpfte Mono-Subline über den Bullets. */
.intakelab-bullets__head {
	margin-bottom: var(--space-5);
}
.intakelab-bullets__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0;
}
.intakelab-bullets__title {
	margin: 0.5rem 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.intakelab-bullets__sub {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.intakelab-bullets__chart {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Ein Bullet: Label-Spalte + Chart-Spalte (gemeinsame Baseline). */
.intakelab-bullet {
	display: grid;
	grid-template-columns: var(--il-bullet-label-w) 1fr;
	column-gap: var(--space-4);
	align-items: center;
}
.intakelab-bullet__label {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.intakelab-bullet__cat {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	color: var(--wp--preset--color--ink);
}
.intakelab-bullet__cat-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 0.15rem;
}
.intakelab-bullet__chart {
	min-width: 0;
	/* Kopf-Raum für Zielmarken-Label über der Spur. */
	padding-top: 1.4rem;
}

/* Spur = Container für Bänder, Ist-Balken und Zielmarke. */
.intakelab-bullet__track {
	position: relative;
	display: flex;
	width: 100%;
	height: 2.5rem;                     /* 40px */
	border-radius: var(--radius-card);
	overflow: visible;                  /* Zielmarke ragt bewusst über die Spur */
}
/* Bänder abrunden über eine Maske am Track (clip nur die Flächen). */
.intakelab-bullet__band {
	flex: 0 0 auto;
	height: 100%;
	background-color: #EDEFF2;          /* Graustufe 1 (eine Hue) */
}
.intakelab-bullet__band.is-mid  { background-color: #E0E3E8; }   /* Graustufe 2 */
.intakelab-bullet__band.is-high { background-color: #D3D7DE; }   /* Graustufe 3 */
.intakelab-bullet__band:first-child {
	border-top-left-radius: var(--radius-card);
	border-bottom-left-radius: var(--radius-card);
}
.intakelab-bullet__band:last-child {
	border-top-right-radius: var(--radius-card);
	border-bottom-right-radius: var(--radius-card);
}
/* Ist-Balken: Ink, ab linker Null-Baseline, mittig in der Spur. */
.intakelab-bullet__measure {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 0.875rem;                   /* 14px — schmaler als die Bänder (Few) */
	border-radius: 999px;
	background-color: var(--wp--preset--color--ink);
}
/* Direct-Label: Score-Zahl direkt am Balkenende, tabular-nums. */
.intakelab-bullet__value {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(calc(100% + 0.45rem), -50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;               /* 15px */
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}
/* Zielmarke: dünner vertikaler Strich — der EINZIGE Rot-Akzent. */
.intakelab-bullet__target {
	position: absolute;
	top: -0.35rem;
	bottom: -0.35rem;
	width: 2.5px;
	transform: translateX(-50%);
	background-color: var(--wp--preset--color--accent);
	border-radius: 2px;
}
.intakelab-bullet__target-label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.2rem);
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}
.intakelab-bullet__desc {
	margin: 0.7rem 0 0;
	font-size: 0.8125rem;               /* 13px */
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

/* Geteilte Skala unter beiden Bullets — gleiche Spalten-Geometrie. */
.intakelab-bullet-axis {
	display: grid;
	grid-template-columns: var(--il-bullet-label-w) 1fr;
	column-gap: var(--space-4);
	margin-top: calc(var(--space-2) * -1);
}
.intakelab-bullet-axis__cols { min-width: 0; }
.intakelab-bullet-axis__bands {
	display: flex;
	width: 100%;
}
.intakelab-bullet-axis__band {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.intakelab-bullet-axis__ticks {
	display: flex;
	justify-content: space-between;
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--wp--preset--color--muted);
}
/* Quellen-/„schematisch"-Zeile an der Grafik (Leitmarke). */
.intakelab-bullets__source {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

/* Mobile: Label über die Spur stapeln, kein Horizontal-Scroll,
   Labels bleiben ≥ 11px. Achse spannt volle Breite (kein Spacer). */
@media (max-width: 680px) {
	.intakelab-bullet {
		grid-template-columns: 1fr;
		row-gap: 0.6rem;
	}
	.intakelab-bullet__label {
		flex-direction: row;
		align-items: baseline;
		gap: 0.5rem;
	}
	.intakelab-bullet__chart { padding-top: 1.6rem; }
	.intakelab-bullet-axis { grid-template-columns: 1fr; }
	.intakelab-bullet-axis > .intakelab-bullet__label { display: none; }
}

/* ============================================================
   SIGNAL-TRICHTER (Funnel) — Länge an gemeinsamer Baseline.
   Ersetzt das verjüngende Trapez / den SVG-Punkt-Trichter: jede Stufe
   ist ein horizontaler Balken ab derselben linken Null-Baseline (Kriterium 8).
   Prinzipien (Echo des Bullet-Graphen):
   · Balkenlänge = Menge je Stufe (perzeptuell stärkster Kanal)
   · Direct Labeling der qualitativen Menge am Balkenende (keine Legende)
   · EIN Rot = die Ergebnis-Stufe (die Entscheidung), Rest Ink-Grau
   · Reflowt vertikal auf Mobile, Labels ≥ 11px, tabular figures
   ============================================================ */
.intakelab-funnel {
	--il-funnel-label-w: 8.5rem;   /* Stufen-Label-Spalte — Balken fluchten darüber */
	margin-inline: auto;
	max-width: 760px;
}
.intakelab-funnel__head { margin-bottom: var(--space-5); }
.intakelab-funnel__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin: 0;
}
.intakelab-funnel__title {
	margin: 0.5rem 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.intakelab-funnel__sub {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.intakelab-funnel__chart {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
/* Eine Stufe: Label-Spalte + Balken-Spalte (gemeinsame linke Baseline). */
.intakelab-funnel__stage {
	display: grid;
	grid-template-columns: var(--il-funnel-label-w) 1fr;
	column-gap: var(--space-4);
	align-items: center;
}
.intakelab-funnel__label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.intakelab-funnel__cat {
	font-size: 0.9375rem;               /* 15px */
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.intakelab-funnel__cat-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	margin-top: 0.15rem;
}
/* Balken-Spur: gemeinsame Null-Baseline links; Balken zeigt nach rechts. */
.intakelab-funnel__bar-wrap {
	display: grid;
	grid-template-columns: 1fr 4.5rem;  /* gemeinsame Baseline links; Label-Spalte fix rechts */
	align-items: center;
	column-gap: 0.6rem;
	min-width: 0;
}
.intakelab-funnel__bar {
	display: block;
	height: 1.75rem;                    /* 28px */
	min-width: 0.5rem;                  /* auch die kleinste Stufe bleibt sichtbar */
	border-radius: 0 999px 999px 0;
	background-color: #AEB8C7;          /* Ink-Grau (Rausch-Stufen) */
	box-sizing: border-box;
}
/* Direct-Label = qualitative Menge RECHTS neben der Balkenspitze (clippt nie). */
.intakelab-funnel__mag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;                 /* 12px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}
/* EIN Akzent: die Ergebnis-Stufe (die Entscheidung). */
.intakelab-funnel__stage.is-outcome .intakelab-funnel__bar {
	background-color: var(--wp--preset--color--accent);
}
.intakelab-funnel__stage.is-outcome .intakelab-funnel__cat { color: var(--wp--preset--color--accent-ink); }
.intakelab-funnel__stage.is-outcome .intakelab-funnel__mag { color: var(--wp--preset--color--accent-ink); }
.intakelab-funnel__outcome-note {
	grid-column: 2;
	margin: 0.3rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
}
.intakelab-funnel__source {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
/* Label über den Balken stapeln, kein Horizontal-Scroll.
   Breakpoint 999px (NICHT 680): analog zum Flow-Track passt die zweispaltige
   Stufen-Grid (Label + Balken + Mag-Label) erst ab ~1000px; bei 681–999px
   sprengte das rechte Mag-Label (white-space:nowrap) den Container und
   verbreiterte die Seite (z. B. 800→+49px). Vertikaler Reflow ab 999px. */
@media (max-width: 999px) {
	.intakelab-funnel__stage { grid-template-columns: 1fr; row-gap: 0.4rem; }
	.intakelab-funnel__label { flex-direction: row; align-items: baseline; gap: 0.5rem; }
	.intakelab-funnel__outcome-note { grid-column: 1; }
}

/* ============================================================
   KADENZ-DOTS (prozesse Ch2) — Small-Multiples statt Heatmap-Scroll.
   Fünf Wochentag-Zeilen, je ein Punkt pro Woche. Monitoring läuft
   durchgehend (helle Punkte); der EINE Auslieferungs-Takt ist die
   Zeile mit gefüllten Ink-Punkten + einem roten Akzent (Zeilen-Rail
   + Tages-Label). Reflowt ohne Scroll, keine erfundenen Zahlen.
   ============================================================ */
.intakelab-cadence {
	margin-inline: auto;
	max-width: 720px;
}
.intakelab-cadence__head { margin-bottom: var(--space-5); }
.intakelab-cadence__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin: 0;
}
.intakelab-cadence__title {
	margin: 0.5rem 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.intakelab-cadence__sub {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.intakelab-cadence__grid {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.intakelab-cadence__row {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: center;
	column-gap: var(--space-4);
	padding: 0.35rem 0 0.35rem 0.6rem;
	border-radius: var(--radius-card);
}
.intakelab-cadence__day {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;               /* 13px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.intakelab-cadence__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	align-items: center;
}
.intakelab-cadence__dot {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background-color: transparent;
	border: 1.5px solid #C4CBD6;        /* Monitoring läuft (leerer Punkt) */
	flex: 0 0 auto;
}
.intakelab-cadence__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	white-space: nowrap;
	margin-left: 0.35rem;
}
/* Der EINE Auslieferungs-Takt: gefüllte Ink-Punkte + roter Rail + rotes Label. */
.intakelab-cadence__row.is-beat {
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--accent);
	background-color: #FBF3F2;
}
.intakelab-cadence__row.is-beat .intakelab-cadence__day {
	color: var(--wp--preset--color--accent-ink);
	font-weight: 700;
}
.intakelab-cadence__row.is-beat .intakelab-cadence__dot {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.intakelab-cadence__source {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
/* Mobile: die Wochentag-Matrix BLEIBT (Wochentag = Y-Achse ist die Aussage,
   GitHub-Kadenz-Muster). Nicht auf 1 Spalte kollabieren — nur Punkte/Abstände
   verkleinern, damit 8 Wochen sicher passen; Tag-Label als schmale Achsenspalte. */
@media (max-width: 680px) {
	.intakelab-cadence__row {
		grid-template-columns: 1.6rem 1fr;
		column-gap: 0.5rem;
		padding-left: 0.35rem;
	}
	.intakelab-cadence__day { font-size: 0.6875rem; }
	.intakelab-cadence__dots { gap: 0.38rem; }
	.intakelab-cadence__dot { width: 0.6rem; height: 0.6rem; }
	.intakelab-cadence__tag { flex-basis: 100%; margin-left: 0; margin-top: 0.2rem; }
}

/* ============================================================
   MEILENSTEIN-TIMELINE (prozesse Ch3) — Onboarding.
   Fünf Meilensteine an einer gemeinsamen Baseline (flach = ehrliche
   Sequenz, kein erfundener Anstieg). Direct-Label je Knoten; EIN Rot =
   Go-live. Desktop horizontal, Mobile vertikale Schiene (kein Scroll).
   ============================================================ */
.intakelab-milestones {
	margin-inline: auto;
	max-width: 820px;
}
.intakelab-milestones__head { margin-bottom: var(--space-6); }
.intakelab-milestones__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin: 0;
}
.intakelab-milestones__title {
	margin: 0.5rem 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.intakelab-milestones__sub {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
.intakelab-milestones__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
}
/* Gemeinsame Baseline: Haarlinie durch alle Marker-Zentren. */
.intakelab-milestones__track::before {
	content: "";
	position: absolute;
	top: 0.5rem;                        /* Marker-Zentrum (16px hoch) */
	left: 0.5rem;
	right: 0.5rem;
	height: 2px;
	background-color: var(--wp--preset--color--border);
	z-index: 0;
}
.intakelab-milestones__node {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
}
.intakelab-milestones__marker {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	box-sizing: border-box;
}
.intakelab-milestones__num {
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--wp--preset--color--muted);
}
.intakelab-milestones__label {
	margin-top: 0.2rem;
	font-size: 0.8125rem;               /* 13px */
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
}
/* EIN Rot: Go-live. */
.intakelab-milestones__node.is-live .intakelab-milestones__marker {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
}
.intakelab-milestones__node.is-live .intakelab-milestones__num,
.intakelab-milestones__node.is-live .intakelab-milestones__label {
	color: var(--wp--preset--color--accent-ink);
}
.intakelab-milestones__source {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
/* Mobile: vertikale Schiene links, Labels rechts (kein Horizontal-Scroll). */
@media (max-width: 680px) {
	.intakelab-milestones__track {
		flex-direction: column;
		gap: var(--space-5);
	}
	.intakelab-milestones__track::before {
		top: 0.5rem;
		bottom: 0.5rem;
		left: 0.5rem;
		right: auto;
		width: 2px;
		height: auto;
	}
	.intakelab-milestones__node {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: var(--space-4);
	}
	.intakelab-milestones__marker { margin-top: 0.1rem; }
	.intakelab-milestones__num { margin-top: 0; }
	.intakelab-milestones__label { margin-top: 0.1rem; font-size: 0.9375rem; }
}

/* ============================================================
   SALES-COCKPIT (Viz 4) — responsive HTML/CSS-Rebuild.
   Ersetzt die 1000×548-Inline-SVG (Horizontal-Scroll auf Mobile).
   EIN Bild, das an jeder Breite funktioniert (Echo von Funnel + Bullets):
   · Ruhige Kennzahl-Zeile (qualitativ, keine erfundenen Zahlen).
   · Nach ARS gereihte Konten als Längenbalken an gemeinsamer Null-Baseline.
   · EINE gestrichelte Handlungsschwelle (Ink/Navy) senkrecht durch alle Balken.
   · Nur das Konto, das die Schwelle überschreitet, ist Akzent-Rot = EIN Datenpunkt;
     Rest Ink-Grau. Sekundäre Betonung (DRINGEND-Chip) in Navy — redundant, nicht Rot.
   · Direct-Label (qualitative Menge) am Balkenende, tabular figures.
   · Reflowt vertikal ≤ 680px: Label über den Balken, kein Horizontal-Scroll,
     Labels ≥ 11px, Signal-Impuls stapelt unter das Konto.
   ============================================================ */
.intakelab-cockpit {
	--il-cockpit-label-w: 9rem;    /* Konto-Label-Spalte — Balken fluchten darüber */
	--il-cockpit-threshold: 74%;   /* gemeinsame Handlungsschwelle (Anteil der Balkenspur) */
	margin-inline: auto;
	max-width: 760px;
}
.intakelab-cockpit__head { margin-bottom: var(--space-5); }
.intakelab-cockpit__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin: 0;
}
.intakelab-cockpit__title {
	margin: 0.5rem 0 0;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}
.intakelab-cockpit__sub {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

/* Ruhige Kennzahl-Zeile — 3 qualitative Kacheln, keine erfundenen Zahlen. */
.intakelab-cockpit__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}
.intakelab-cockpit__kpi {
	box-sizing: border-box;
	min-width: 0;
	padding: var(--space-4);
	background-color: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--radius-card);
}
.intakelab-cockpit__kpi-label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.intakelab-cockpit__kpi-value {
	display: block;
	margin-top: 0.5rem;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums lining-nums;
}
.intakelab-cockpit__kpi-sub {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.75rem;                 /* 12px */
	color: var(--wp--preset--color--muted);
}

/* Gereihte Konten. */
.intakelab-cockpit__section {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--space-4);
}
.intakelab-cockpit__chart {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
/* Ein Konto: Label-Spalte + Balken-Spur (gemeinsame linke Baseline). */
.intakelab-cockpit__account {
	display: grid;
	grid-template-columns: var(--il-cockpit-label-w) 1fr;
	column-gap: var(--space-4);
	align-items: center;
}
.intakelab-cockpit__label { min-width: 0; }
.intakelab-cockpit__name-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.5rem;
	row-gap: 0.25rem;
}
.intakelab-cockpit__name {
	font-size: 0.9375rem;               /* 15px */
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
/* Status-Chip — sekundäre Betonung in Navy (redundant, KEIN zweites Rot). */
.intakelab-cockpit__chip {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	background-color: #EEF1F5;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	white-space: nowrap;
}
.intakelab-cockpit__account.is-urgent .intakelab-cockpit__chip {
	color: #FFFFFF;
	background-color: var(--wp--preset--color--ink);
}
.intakelab-cockpit__reason {
	margin: 0.3rem 0 0;
	font-size: 0.75rem;                 /* 12px */
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}
/* Balken-Spur: Positionsraum für Balken, Direct-Label und Schwelle. */
.intakelab-cockpit__track {
	position: relative;
	min-width: 0;
	padding-top: 1.4rem;                /* Kopf-Raum für das Schwellen-Label über der Spur */
}
.intakelab-cockpit__bar {
	position: relative;
	display: block;
	height: 1.125rem;                   /* 18px */
	min-width: 0.5rem;
	border-radius: 0 999px 999px 0;
	background-color: var(--wp--preset--color--ink);   /* Ink-Grau = unter der Schwelle */
	box-sizing: border-box;
}
.intakelab-cockpit__bar.is-low { background-color: #9AA4B2; }
/* EIN Rot = der EINE Datenpunkt: das Konto über der Handlungsschwelle. */
.intakelab-cockpit__account.is-urgent .intakelab-cockpit__bar {
	background-color: var(--wp--preset--color--accent);
}
/* Direct-Label: qualitative Menge direkt am Balkenende (keine Legende). */
.intakelab-cockpit__value {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(calc(100% + 0.45rem), -50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;                 /* 12px */
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}
/* Gemeinsame Handlungsschwelle: gestrichelte senkrechte Ink-Linie durch jede Spur. */
.intakelab-cockpit__threshold {
	position: absolute;
	left: var(--il-cockpit-threshold);
	top: 0.9rem;
	bottom: -0.35rem;
	width: 0;
	border-left: 2px dashed var(--wp--preset--color--ink);
	opacity: 0.42;
}
.intakelab-cockpit__threshold-label {
	position: absolute;
	left: var(--il-cockpit-threshold);
	top: 0;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink);
	opacity: 0.72;
	white-space: nowrap;
}
/* Signal-Feed / fertiger Vertriebsimpuls — am überschreitenden Konto. */
.intakelab-cockpit__impulse {
	grid-column: 2;
	margin: 0.7rem 0 0;
	padding: var(--space-3) var(--space-4);
	background-color: #FEFDFB;
	border: 1px solid var(--wp--preset--color--border);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	font-size: 0.8125rem;               /* 13px */
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}
.intakelab-cockpit__impulse-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin-right: 0.5rem;
}
.intakelab-cockpit__source {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;               /* 11px */
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}
/* Mobile: Kennzahlen stapeln, Konto-Label über den Balken, kein Horizontal-Scroll. */
@media (max-width: 680px) {
	.intakelab-cockpit__kpis { grid-template-columns: 1fr; }
	.intakelab-cockpit__account { grid-template-columns: 1fr; row-gap: 0.6rem; }
	.intakelab-cockpit__track { padding-top: 1.6rem; }
	.intakelab-cockpit__impulse { grid-column: 1; }
}