/* KLINIKER BRÜCKE – Design-Tokens und Basisregeln
   Quelle: Design System „KLINIKER BRÜCKE/tokens“ (Dark Mode First).
   Gestaltung von Seiten erfolgt in Elementor (Kit-Globals + Global Classes kb-*).
   Hier nur, was Elementor nicht abdeckt: Tokens als CSS-Variablen, Grundfläche,
   Links, Fokus, Auswahl, reduzierte Bewegung. */

:root {
	/* Farben */
	--kb-executive-blue: #051c30;
	--kb-porzellanweiss: #F7F7F5;
	--kb-electric-cyan: #5ce1e6;
	--kb-neutral-grey: #8A99A6;
	--kb-blue-raised: #0a2a45;
	--kb-white: #FFFFFF;
	--kb-card-border: rgba(247, 247, 245, 0.5);
	--kb-rule: rgba(247, 247, 245, 0.18);
	--kb-grid-line: rgba(247, 247, 245, 0.1);
	--kb-grid-line-cyan: rgba(92, 225, 230, 0.1);

	/* Typografie */
	--kb-font-display: "Manrope", "Segoe UI", Arial, sans-serif;
	--kb-font-body: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
	--kb-fs-h1: 56px;
	--kb-fs-h2: 36px;
	--kb-fs-h3: 24px;
	--kb-fs-body-lg: 18px;
	--kb-fs-body: 16px;
	--kb-fs-caption: 14px;
	--kb-fs-label: 13px;
	--kb-lh-body: 1.5;
	--kb-lh-heading: 1.15;
	--kb-ls-label: 0.08em;

	/* Abstände und Raster */
	--kb-space-1: 4px;
	--kb-space-2: 8px;
	--kb-space-3: 12px;
	--kb-space-4: 16px;
	--kb-space-5: 24px;
	--kb-space-6: 32px;
	--kb-space-7: 48px;
	--kb-space-8: 64px;
	--kb-space-9: 96px;
	--kb-space-10: 128px;
	--kb-container-max: 1200px;
	--kb-content-max: 800px;
	--kb-grid-gap: 24px;

	/* Form und Bewegung */
	--kb-radius-sm: 2px;
	--kb-radius-md: 4px;
	--kb-radius-pill: 999px;
	--kb-motion-fast: 150ms;
	--kb-motion-slow: 250ms;
	--kb-ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
	--kb-focus-ring: 2px solid var(--kb-electric-cyan);
}

html {
	background-color: var(--kb-executive-blue);
}

body {
	background-color: var(--kb-executive-blue);
	color: var(--kb-porzellanweiss);
	font-family: var(--kb-font-body);
	font-size: var(--kb-fs-body);
	line-height: var(--kb-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kb-font-display);
	line-height: var(--kb-lh-heading);
	color: var(--kb-porzellanweiss);
}

/* Links: Porzellanweiß, unterstrichen; Cyan nur aktiv/Hover */
a {
	color: var(--kb-porzellanweiss);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--kb-motion-fast) var(--kb-ease-calm);
}

a:hover,
a:active {
	color: var(--kb-electric-cyan);
}

/* Fokus: sichtbarer Cyan-Ring, min. 2px (Kap. 10) */
:focus-visible {
	outline: var(--kb-focus-ring);
	outline-offset: 3px;
}

::selection {
	background: var(--kb-electric-cyan);
	color: var(--kb-executive-blue);
}

/* Helle Ausnahmefläche: Klasse kb-light auf einem Container */
.kb-light {
	background-color: var(--kb-porzellanweiss);
	color: var(--kb-executive-blue);
}

.kb-light h1, .kb-light h2, .kb-light h3,
.kb-light h4, .kb-light h5, .kb-light h6,
.kb-light a {
	color: var(--kb-executive-blue);
}

.kb-light :focus-visible {
	outline-color: var(--kb-executive-blue);
}

/* Neural Grid (Kap. 6): feines Linienraster, 1px, 8 % Deckkraft.
   Klasse kb-neural-grid auf einem Container setzen. */
.kb-neural-grid {
	background-image:
		linear-gradient(rgba(247, 247, 245, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(247, 247, 245, 0.08) 1px, transparent 1px);
	background-size: 64px 64px;
	background-position: center top;
}

/* Sprungmarken: Abstand für den fixierten Header (ca. 72-77 px), damit
   Überschriften nach einem Klick auf #anker nicht darunter verschwinden */
[id] {
	scroll-margin-top: 88px;
}

/* Video-Platzhalter und Video-Rahmen: festes 16:9, verhindert Layoutsprünge (CLS) */
.kb-video-frame {
	aspect-ratio: 16 / 9;
	width: 100%;
}

/* Hero: Porträt Dirk Weber mit Claim (vorübergehend statt Video, 04.10.2026).
   Desktop 16:9 (Hintergrund links verlängert), Handy 3:4 (Hintergrund oben verlängert). */
.kb-hero-portrait {
	border: 1px solid rgba(247, 247, 245, 0.3); /* dezente weiße Linie wie bei den Line-Icons */
	border-radius: var(--kb-radius-md);
	overflow: hidden;
}

.kb-hero-claim-wrap {
	max-width: 46%;
}

.kb-hero-claim {
	margin: 0;
	font-family: var(--kb-font-display);
	font-size: clamp(28px, 3.6vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--kb-porzellanweiss);
}

.kb-hero-claim span {
	display: block;
}

.kb-hero-claim .kb-hero-claim-cyan {
	color: var(--kb-electric-cyan);
}

@media (max-width: 767px) {
	/* Handy: Hochformat 3:4, Claim im freien Blau über dem Kopf */
	.kb-hero-portrait.kb-video-frame {
		aspect-ratio: 3 / 4;
	}

	.kb-hero-claim-wrap {
		max-width: 100%;
	}

	.kb-hero-claim {
		font-size: clamp(22px, 6.8vw, 30px);
	}
}

/* Prozesslinie (Infografik aus Containern):
   Container .kb-steps enthält mehrere .kb-step, jede mit Nummer (.kb-step-num).
   Desktop: Linie waagerecht durch die Knoten. Tablet/Handy: senkrecht links. */
.kb-steps {
	position: relative;
	--kb-step-w: 18%; /* Breite eines Schritts, muss zur Elementor-Breite passen */
}

.kb-steps--3 {
	--kb-step-w: 30%;
}

.kb-steps--4 {
	--kb-step-w: 22%;
}

.kb-steps::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 24px;
	/* endet in der Mitte des letzten Knotens (Schrittbreite minus halber Knoten) */
	right: calc(var(--kb-step-w) - 24px);
	height: 1px;
	background: rgba(247, 247, 245, 0.35);
	z-index: 0;
}

.kb-step {
	position: relative;
	z-index: 1;
}

/* Nummernkreis darf vom Text daneben nicht zusammengedrückt werden */
.kb-step-num {
	flex-shrink: 0;
	min-width: 48px;
}

/* Text neben dem Nummernkreis nimmt nur die Restbreite (sonst seitlicher Überlauf) */
.kb-step > .e-con {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.kb-step-num .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--kb-electric-cyan);
	border-radius: 50%;
	background: var(--kb-executive-blue);
	color: var(--kb-porzellanweiss);
}

.kb-step-num--final .elementor-heading-title {
	background: var(--kb-electric-cyan);
	color: var(--kb-executive-blue);
}

/* Senkrechte Timeline auf allen Breiten (z. B. Projekte, 11 Schritte).
   Schritte im Abstand von 24 px, Linie je Schritt bis zum nächsten Knoten. */
.kb-steps--vertical::before {
	display: none;
}

.kb-steps--vertical .kb-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 48px;
	bottom: -24px;
	left: 24px;
	width: 1px;
	background: rgba(247, 247, 245, 0.35);
	z-index: -1;
}

/* Tablet/Handy: senkrechte Linie je Schritt, vom Knoten bis zum nächsten Knoten
   (32px = Zeilenabstand zwischen den Schritten) */
@media (max-width: 1024px) {
	.kb-steps::before {
		display: none;
	}

	.kb-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 48px;
		bottom: -32px;
		left: 24px;
		width: 1px;
		background: rgba(247, 247, 245, 0.35);
		z-index: -1;
	}
}

/* Burger-Menü: Tippfläche mindestens 48 × 48 px (Touch-Ziel) */
.elementor-menu-toggle {
	min-width: 48px;
	min-height: 48px;
	justify-content: center;
}

/* Line-Icons (Lucide, Strich 1,5) im Icon-/Icon-Box-Widget: Elementor setzt
   sonst eine Füllung auf das SVG */
.kb-line svg,
.kb-line svg * {
	fill: none !important;
	stroke: currentColor;
}

/* Kleine Line-Icons in Electric Cyan (Entscheidung Dirk Weber, 02.10.2026;
   weicht bewusst von der Ikonografie-Regel „Porzellanweiß“ im Design System ab) */
.kb-line svg,
.kb-line svg * {
	stroke: var(--kb-electric-cyan) !important;
}

/* Große Line-Icon-Grafik in Abschnitten (Startseite) */
.kb-grafik img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--kb-rule);
	border-radius: var(--kb-radius-md);
}

/* ---------- Wissensbereich (Pillar-Seiten und Artikel) ---------- */

/* Breadcrumb (Rank Math): klein, Neutral Grey, aktuelles Element Porzellanweiß */
.rank-math-breadcrumb p {
	margin: 0;
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

.rank-math-breadcrumb a {
	color: var(--kb-neutral-grey);
	text-decoration: none;
}

.rank-math-breadcrumb a:hover {
	color: var(--kb-electric-cyan);
}

.rank-math-breadcrumb .separator {
	margin: 0 6px;
	opacity: 0.6;
}

.rank-math-breadcrumb .last {
	color: var(--kb-porzellanweiss);
}

/* Fließtext: Absatz- und Listenabstände, Zeilenlänge */
.kb-prose p,
.kb-prose ul,
.kb-prose ol {
	margin: 0 0 1em;
}

.kb-prose p:last-child,
.kb-prose ul:last-child,
.kb-prose ol:last-child {
	margin-bottom: 0;
}

.kb-prose ul,
.kb-prose ol {
	padding-left: 1.25em;
}

.kb-prose li {
	margin-bottom: 0.4em;
}

.kb-prose li::marker {
	color: var(--kb-electric-cyan);
}

/* Kontextlink zum Clusterartikel */
.kb-mehr {
	margin: 0;
	font-weight: 600;
}

.kb-mehr--folgt {
	font-weight: 400;
	color: var(--kb-neutral-grey);
}

/* Sidebar mit Inhaltsverzeichnis: bleibt beim Scrollen sichtbar (nur Desktop) */
@media (min-width: 1025px) {
	.kb-sticky {
		position: sticky;
		top: 104px;
		align-self: flex-start;
	}
}

/* Inhaltsverzeichnis: aktiver Abschnitt mit Cyan-Markierung links */
.kb-toc .elementor-toc__list-item-text-wrapper {
	border-left: 2px solid transparent;
	padding-left: 12px;
}

.kb-toc .elementor-toc__list-item-text-wrapper:has(.elementor-item-active) {
	border-left-color: var(--kb-electric-cyan);
}

.kb-toc .elementor-toc__list-item-text {
	text-decoration: none;
}

.kb-toc .elementor-toc__list-item-text-wrapper::before {
	display: none;
}

/* Offene Stelle für Inhalte von Dirk Weber (bis zur Lieferung sichtbar) */
.kb-placeholder {
	border: 1px dashed rgba(92, 225, 230, 0.5);
	border-radius: var(--kb-radius-md);
	padding: 20px 24px;
	color: var(--kb-neutral-grey);
}

/* Karten, die als Ganzes verlinkt sind (Pillar-Karten, verwandte Themen) */
a.kb-card {
	text-decoration: none;
	transition: border-color var(--kb-motion-fast) var(--kb-ease-calm);
}

a.kb-card:hover {
	border-color: var(--kb-electric-cyan) !important;
}

a.kb-card:hover .elementor-heading-title {
	color: var(--kb-electric-cyan);
}

/* Loop Grid ohne Beiträge: Hinweis lesbar und linksbündig */
.e-loop-nothing-found-message {
	text-align: left;
	padding: 0;
}

.e-loop-nothing-found-message__text {
	color: var(--kb-neutral-grey);
	font-size: var(--kb-fs-body);
}

/* Beitragsbild (Line-Icon-Grafik) im Artikel und in Karten */
.kb-beitragsbild {
	margin: 0;
}

.kb-beitragsbild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border: 1px solid var(--kb-rule);
	border-radius: var(--kb-radius-md);
}

/* ---------- Artikel-Bausteine (Block-Editor, inc/kb-patterns.php) ---------- */

.elementor-widget-theme-post-content li::marker {
	color: var(--kb-electric-cyan);
}

/* Artikeltext: Links erkennbar, Luft vor Zwischenüberschriften */
.elementor-widget-theme-post-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor-widget-theme-post-content h2 {
	margin-top: 1.6em;
}

.elementor-widget-theme-post-content .kb-einordnung h2 {
	margin-top: 0;
}

.kb-kicker {
	margin: 0 0 8px;
	font-family: var(--kb-font-body);
	font-size: var(--kb-fs-label);
	font-weight: 600;
	letter-spacing: var(--kb-ls-label);
	text-transform: uppercase;
	color: var(--kb-electric-cyan);
}

/* Persönlicher Einstieg: Praxis-Karte mit Porträt */
.kb-praxis {
	margin: 0 0 2.5em;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--kb-electric-cyan);
}

.kb-praxis p {
	margin: 0;
}

.kb-praxis .kb-praxis-autor {
	position: relative;
	min-height: 48px;
	margin: 4px 0 16px;
	padding-left: 60px;
	line-height: 48px;
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

.kb-praxis .kb-praxis-autor::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: url("/wp-content/uploads/2026/10/dirk-weber-kliniker-bruecke.webp") center / cover no-repeat;
}

.kb-praxis .kb-praxis-autor strong {
	color: var(--kb-porzellanweiss);
}

.kb-praxis p:last-child {
	font-size: var(--kb-fs-body-lg);
	line-height: 1.6;
}

/* Eigene Einordnung: abgesetzte Fläche */
.kb-einordnung {
	margin: 2.5em 0;
	padding: 32px;
	background: var(--kb-blue-raised);
	border-radius: var(--kb-radius-md);
}

.kb-einordnung h2 {
	margin-top: 0;
}

.kb-einordnung p:last-child,
.kb-einordnung ul:last-child {
	margin-bottom: 0;
}

/* Infografik: Ablauf / Zeitstrahl */
ol.kb-ablauf {
	list-style: none;
	counter-reset: kb-ablauf;
	margin: 1.5em 0;
	padding: 0;
}

ol.kb-ablauf > li {
	counter-increment: kb-ablauf;
	position: relative;
	min-height: 40px;
	margin: 0;
	padding: 6px 0 28px 60px;
}

ol.kb-ablauf > li:last-child {
	padding-bottom: 0;
}

ol.kb-ablauf > li::before {
	content: counter(kb-ablauf);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 2px solid var(--kb-electric-cyan);
	border-radius: 50%;
	background: var(--kb-executive-blue);
	font-family: var(--kb-font-display);
	font-weight: 700;
	color: var(--kb-porzellanweiss);
}

ol.kb-ablauf > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 0;
	left: 19px;
	width: 1px;
	background: rgba(247, 247, 245, 0.35);
}

/* Infografik: Ursache-Wirkungs-Kette */
ul.kb-kette {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 1.5em 0;
	padding: 0;
}

ul.kb-kette > li {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 140px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--kb-card-border);
	border-radius: var(--kb-radius-md);
}

ul.kb-kette > li:last-child {
	border-color: var(--kb-electric-cyan);
}

ul.kb-kette > li:not(:last-child)::after {
	content: "92";
	position: absolute;
	top: 50%;
	right: -30px;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--kb-electric-cyan);
}

@media (max-width: 767px) {
	ul.kb-kette {
		flex-direction: column;
		gap: 36px;
	}

	ul.kb-kette > li:not(:last-child)::after {
		content: "93";
		top: auto;
		right: auto;
		bottom: -30px;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Infografik: Vergleich in zwei Spalten */
.kb-vergleich {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 1.5em 0;
}

.kb-vergleich > .wp-block-column {
	flex: 1 1 260px;
	padding: 24px;
	border: 1px solid var(--kb-card-border);
	border-radius: var(--kb-radius-md);
}

.kb-vergleich > .wp-block-column:last-child {
	border-color: var(--kb-electric-cyan);
}

.kb-vergleich h3 {
	margin-top: 0;
}

.kb-vergleich ul {
	margin-bottom: 0;
}

/* Infografik: Kennzahlen-Kacheln */
ul.kb-kennzahlen {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	margin: 1.5em 0;
	padding: 0;
}

ul.kb-kennzahlen > li {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--kb-card-border);
	border-radius: var(--kb-radius-md);
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

ul.kb-kennzahlen > li strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--kb-font-display);
	font-size: 36px;
	line-height: 1.1;
	color: var(--kb-porzellanweiss);
}

/* Checkliste als Karten mit Haken */
ul.kb-checkliste {
	list-style: none;
	display: grid;
	gap: 8px;
	margin: 1.5em 0;
	padding: 0;
}

ul.kb-checkliste > li {
	position: relative;
	margin: 0;
	padding: 12px 16px 12px 44px;
	border: 1px solid var(--kb-rule);
	border-radius: var(--kb-radius-md);
}

ul.kb-checkliste > li::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 16px;
	width: 12px;
	height: 6px;
	border-bottom: 2px solid var(--kb-electric-cyan);
	border-left: 2px solid var(--kb-electric-cyan);
	transform: rotate(-45deg);
}

/* FAQ in Artikeln: Akkordeon (assets/js/kb-faq.js) */
.kb-faq-akkordeon .rank-math-list-item {
	border-bottom: 1px solid var(--kb-rule);
}

.kb-faq-akkordeon .rank-math-question {
	margin: 0;
	font-size: inherit;
}

.kb-faq-akkordeon .kb-faq-toggle,
.kb-faq-akkordeon .kb-faq-toggle:hover,
.kb-faq-akkordeon .kb-faq-toggle:focus {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 18px 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--kb-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--kb-porzellanweiss);
}

/* Plus/Minus aus zwei Linien (Hello Elementor färbt Buttons sonst pinkrot) */
.kb-faq-akkordeon .kb-faq-toggle::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
}

.kb-faq-akkordeon .kb-faq-toggle:hover,
.kb-faq-akkordeon .kb-faq-toggle[aria-expanded="true"] {
	color: var(--kb-electric-cyan);
}

.kb-faq-akkordeon .kb-faq-toggle[aria-expanded="true"]::after {
	background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
}

.kb-faq-akkordeon .kb-faq-toggle:focus-visible {
	outline: var(--kb-focus-ring);
	outline-offset: 3px;
}

.kb-faq-akkordeon .rank-math-answer {
	padding: 0 0 22px;
}

/* ---------- Abschnitts-Icons im Wissensbereich (Lucide, Cyan) ----------
   Markieren wiederkehrende Abschnitts-Typen, nicht jede Überschrift.
   Headings: Klasse kb-ico + kb-ico--<name> am Elementor-Widget.
   Automatisch: Inhaltsverzeichnis, „Unsere Einordnung“, FAQ-Überschrift im Artikel. */
.kb-ico--birne .elementor-heading-title::before,
.kb-ico--birne .elementor-widget-container > p:first-child::before,
.kb-ico--birne > p:first-child::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" /> <path d="M9 18h6" /> <path d="M10 22h4" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" /> <path d="M9 18h6" /> <path d="M10 22h4" /> </svg>');
}

.kb-ico--liste .elementor-heading-title::before,
.kb-ico--liste .elementor-widget-container > p:first-child::before,
.kb-ico--liste > p:first-child::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M3 5h.01" /> <path d="M3 12h.01" /> <path d="M3 19h.01" /> <path d="M8 5h13" /> <path d="M8 12h13" /> <path d="M8 19h13" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M3 5h.01" /> <path d="M3 12h.01" /> <path d="M3 19h.01" /> <path d="M8 5h13" /> <path d="M8 12h13" /> <path d="M8 19h13" /> </svg>');
}

.kb-ico--kompass .elementor-heading-title::before,
.kb-ico--kompass .elementor-widget-container > p:first-child::before,
.kb-ico--kompass > p:first-child::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" /> </svg>');
}

.kb-ico--frage .elementor-heading-title::before,
.kb-ico--frage .elementor-widget-container > p:first-child::before,
.kb-ico--frage > p:first-child::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> <path d="M12 17h.01" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> <path d="M12 17h.01" /> </svg>');
}

.kb-ico--buecher .elementor-heading-title::before,
.kb-ico--buecher .elementor-widget-container > p:first-child::before,
.kb-ico--buecher > p:first-child::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <rect width="8" height="18" x="3" y="3" rx="1" /> <path d="M7 3v18" /> <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <rect width="8" height="18" x="3" y="3" rx="1" /> <path d="M7 3v18" /> <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z" /> </svg>');
}

.elementor-widget-theme-post-content h2:has(+ .kb-quellen)::before,
.kb-ico--schild .elementor-heading-title::before,
.kb-ico--schild .elementor-widget-container > p:first-child::before,
.kb-ico--schild > p:first-child::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /> <path d="m9 12 2 2 4-4" /> </svg>');
}

.kb-ico .elementor-heading-title::before,
.kb-ico .elementor-widget-container > p:first-child::before,
.kb-ico > p:first-child::before,
.kb-toc .elementor-toc__header-title::before,
.kb-einordnung .kb-kicker::before,
.elementor-widget-theme-post-content h2:has(+ .rank-math-block)::before,
.elementor-widget-theme-post-content h2:has(+ .kb-quellen)::before {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.4em;
	vertical-align: -0.08em;
	background-color: var(--kb-electric-cyan);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Kleine Kennzeilen: Icon etwas größer als die Schrift */
.kb-toc .elementor-toc__header-title::before,
.kb-einordnung .kb-kicker::before,
.kb-ico--birne .elementor-heading-title::before,
.kb-ico .elementor-widget-container > p:first-child::before,
.kb-ico > p:first-child::before {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: -4px;
}

.kb-toc .elementor-toc__header-title::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M3 5h.01" /> <path d="M3 12h.01" /> <path d="M3 19h.01" /> <path d="M8 5h13" /> <path d="M8 12h13" /> <path d="M8 19h13" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <path d="M3 5h.01" /> <path d="M3 12h.01" /> <path d="M3 19h.01" /> <path d="M8 5h13" /> <path d="M8 12h13" /> <path d="M8 19h13" /> </svg>');
}

.kb-einordnung .kb-kicker::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" /> </svg>');
}

.elementor-widget-theme-post-content h2:has(+ .rank-math-block)::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> <path d="M12 17h.01" /> </svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <circle cx="12" cy="12" r="10" /> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /> <path d="M12 17h.01" /> </svg>');
}

/* Quellen am Artikelende: klein und zurückhaltend */
ul.kb-quellen {
	padding-left: 1.2em;
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

ul.kb-quellen a {
	color: var(--kb-porzellanweiss);
}

/* Fehlerseite 404 (template-parts/404.php) */
.kb-404 {
	max-width: 800px;
	margin: 0 auto;
	padding: 96px 24px 112px;
}

.kb-404 h1 {
	margin: 8px 0 16px;
	font-family: var(--kb-font-display);
	font-size: clamp(32px, 3vw + 18px, 48px);
	line-height: 1.15;
	color: var(--kb-porzellanweiss);
}

.kb-404-lead {
	font-size: var(--kb-fs-body-lg);
	color: var(--kb-porzellanweiss);
}

ul.kb-404-links {
	margin: 24px 0 32px;
	padding-left: 1.2em;
}

ul.kb-404-links li {
	margin-bottom: 8px;
}

@media (max-width: 767px) {
	.kb-404 {
		padding: 56px 16px 72px;
	}
}

/* Rechtstexte (Impressum, Datenschutz): ruhige Zwischenüberschriften */
.kb-rechtstext h2 {
	margin: 1.8em 0 0.5em;
	font-size: 22px;
	line-height: 1.3;
}

.kb-rechtstext h2:first-child {
	margin-top: 0;
}

/* ---------- Gestaltungsmuster (Oktober 2026) ---------- */

/* Statement: hervorgehobener Kernsatz mit Cyan-Linie */
.kb-statement {
	padding-left: 20px;
	border-left: 2px solid var(--kb-electric-cyan);
	font-family: var(--kb-font-display);
	font-size: clamp(20px, 1vw + 15px, 26px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--kb-porzellanweiss);
}

.kb-statement p {
	margin: 0;
}

/* Feste Kennzahlen (statt Counter) */
.kb-stat-zahl .elementor-heading-title {
	margin: 0;
}

.kb-stat-label p {
	margin: 0;
}

/* Chefarztsuche: Phasenkopf und Schritte als dezente Cards */
.kb-phase-satz p {
	margin: 0;
	color: var(--kb-neutral-grey);
}

.kb-steps--vertical .kb-step > .e-con {
	padding: 14px 20px;
	border: 1px solid var(--kb-rule);
	border-radius: var(--kb-radius-md);
	transition: border-color var(--kb-motion-fast) var(--kb-ease-calm);
}

.kb-steps--vertical .kb-step:hover > .e-con {
	border-color: rgba(92, 225, 230, 0.5);
}

/* Sanftes Einblenden beim Scrollen (assets/js/kb-ui.js) */
.kb-einblenden {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--kb-motion-slow) var(--kb-ease-calm), transform var(--kb-motion-slow) var(--kb-ease-calm);
}

.kb-einblenden.kb-sichtbar {
	opacity: 1;
	transform: none;
}

/* Nachfolge-Rechner */
.kb-rechner {
	margin: 8px 0;
	padding: 28px;
	background: var(--kb-blue-raised);
	border: 1px solid var(--kb-rule);
	border-radius: var(--kb-radius-md);
}

.kb-rechner label {
	display: block;
	margin: 0 0 10px;
	font-weight: 600;
	color: var(--kb-porzellanweiss);
}

.kb-rechner input[type="month"] {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--kb-card-border);
	border-radius: var(--kb-radius-md);
	background: var(--kb-executive-blue);
	color: var(--kb-porzellanweiss);
	font: inherit;
	color-scheme: dark;
}

.kb-rechner input[type="month"]:focus-visible {
	outline: var(--kb-focus-ring);
	outline-offset: 3px;
}

.kb-rechner-ergebnis:not(:empty) {
	margin-top: 24px;
}

/* Einordnung als Block: Überschrift + Satz, Cyan-Linie links */
.kb-rechner-status {
	margin: 0 0 24px;
	padding-left: 20px;
	border-left: 2px solid var(--kb-electric-cyan);
}

.kb-rechner-status p {
	margin: 0;
}

.kb-rechner-status .kb-rechner-titel {
	margin-bottom: 6px;
	font-family: var(--kb-font-display);
	font-size: clamp(20px, 1vw + 15px, 24px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--kb-electric-cyan);
}

/* Terminlink in der Einordnung des Nachfolge-Rechners */
.kb-rechner-status a.kb-rechner-link {
	color: var(--kb-electric-cyan);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kb-rechner-status a.kb-rechner-link:hover {
	color: var(--kb-porzellanweiss);
}

/* Überschrift über dem Zeitplan; als p mit role=heading, damit das
   Inhaltsverzeichnis der Pillarseiten sie nicht aufnimmt */
.kb-rechner-zeitplan {
	margin: 32px 0 14px;
	padding-top: 24px;
	border-top: 1px solid var(--kb-rule);
	font-family: var(--kb-font-display);
	font-size: clamp(20px, 1vw + 15px, 24px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--kb-porzellanweiss);
}

.kb-rechner-vorbei {
	opacity: 0.6;
}

.kb-rechner-hinweis,
.kb-rechner-fuss {
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

a.kb-rechner-cta {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--kb-radius-md);
	background: var(--kb-electric-cyan);
	color: var(--kb-executive-blue);
	font-weight: 600;
	text-decoration: none;
}

a.kb-rechner-cta:hover {
	background: var(--kb-porzellanweiss);
	color: var(--kb-executive-blue);
}

@media (max-width: 767px) {
	.kb-rechner {
		padding: 20px;
	}

	a.kb-rechner-cta {
		display: block;
		text-align: center;
	}
}

/* Nachfolge-Rechner: dezenter Eingabe-Hinweis. Sobald der Rechner ins Bild
   kommt, pulsiert ein feiner Cyan-Ring dreimal um das Feld und der Pfeil
   weist zum Feld. Endet mit der ersten Eingabe; bei reduzierter Bewegung statisch. */
.kb-rechner-feld {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.kb-rechner-puls {
	position: relative;
	display: inline-block;
	border-radius: var(--kb-radius-md);
}

.kb-rechner-puls .kb-monat-knopf {
	cursor: pointer;
	transition: border-color var(--kb-motion-slow) var(--kb-ease-calm);
}

.kb-rechner-puls::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--kb-electric-cyan);
	border-radius: var(--kb-radius-md);
	opacity: 0;
	pointer-events: none;
}

.kb-rechner-tipp {
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

.kb-rechner-pfeil {
	display: inline-block;
	color: var(--kb-electric-cyan);
}

.kb-rechner--hinweis .kb-rechner-puls .kb-monat-knopf {
	border-color: var(--kb-electric-cyan);
}

.kb-rechner--hinweis .kb-rechner-puls::after {
	animation: kb-puls 2s var(--kb-ease-calm) 0.4s 3;
}

.kb-rechner--hinweis .kb-rechner-pfeil {
	animation: kb-hinweis-pfeil 2s var(--kb-ease-calm) 0.4s 3;
}

.kb-rechner--hinweis .kb-rechner-tipp {
	color: var(--kb-porzellanweiss);
}

.kb-rechner-feld .kb-rechner-tipp,
.kb-rechner-feld .kb-rechner-tipp .kb-rechner-pfeil {
	transition: color var(--kb-motion-slow) var(--kb-ease-calm), opacity var(--kb-motion-slow) var(--kb-ease-calm);
}

.kb-rechner--erledigt .kb-rechner-tipp {
	opacity: 0;
}

@keyframes kb-puls {
	0% { opacity: 0.7; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(1.08, 1.35); }
}

@keyframes kb-hinweis-pfeil {
	0%, 60%, 100% { transform: translateX(0); }
	30% { transform: translateX(-5px); }
}

@media (max-width: 767px) {
	.kb-rechner-pfeil {
		transform: rotate(90deg);
	}

	.kb-rechner--hinweis .kb-rechner-pfeil {
		animation: none;
	}
}

/* Nachfolge-Rechner prominent: große Frage, Cyan-Kante oben, größeres Feld */
.kb-nachfolge {
	padding: 40px 44px;
	border-top: 2px solid var(--kb-electric-cyan);
}

.kb-nachfolge .kb-kicker {
	margin-bottom: 12px;
}

.kb-rechner .kb-rechner-frage {
	margin: 0 0 10px;
	max-width: 760px;
	font-family: var(--kb-font-display);
	font-size: clamp(24px, 1.4vw + 16px, 34px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--kb-porzellanweiss);
}

.kb-rechner-lead {
	margin: 0 0 24px;
	font-size: var(--kb-fs-body-lg);
	color: var(--kb-porzellanweiss);
	opacity: 0.85;
}

.kb-nachfolge .kb-rechner-puls .kb-monat-knopf {
	min-width: 260px;
	min-height: 56px;
	padding: 12px 18px;
	font-size: 18px;
	font-weight: 600;
}

.kb-nachfolge .kb-rechner-tipp {
	font-size: var(--kb-fs-body);
}

@media (max-width: 767px) {
	.kb-nachfolge {
		padding: 28px 20px;
	}

	.kb-nachfolge .kb-rechner-puls,
	.kb-nachfolge .kb-rechner-puls .kb-monat-knopf,
	.kb-monat-panel {
		width: 100%;
		min-width: 0;
	}

	.kb-nachfolge .kb-rechner-tipp {
		font-size: var(--kb-fs-caption);
	}
}

/* Monatsauswahl (ersetzt das native Monatsfeld): Jahr oben, zwölf Monate darunter */
.kb-rechner .kb-monat-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border: 1px solid var(--kb-card-border);
	border-radius: var(--kb-radius-md);
	background: var(--kb-executive-blue);
	color: var(--kb-neutral-grey);
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.kb-rechner .kb-monat-knopf:hover,
.kb-rechner .kb-monat-knopf:focus {
	background: var(--kb-executive-blue);
	color: var(--kb-porzellanweiss);
	border-color: var(--kb-electric-cyan);
}

.kb-rechner .kb-monat-knopf:focus-visible,
.kb-monat-panel button:focus-visible {
	outline: var(--kb-focus-ring);
	outline-offset: 3px;
}

.kb-rechner .kb-monat-knopf--gesetzt {
	color: var(--kb-porzellanweiss);
}

.kb-monat-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--kb-electric-cyan);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kb-monat-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	width: 300px;
	padding: 16px;
	background: var(--kb-executive-blue);
	border: 1px solid var(--kb-electric-cyan);
	border-radius: var(--kb-radius-md);
	box-sizing: border-box;
}

.kb-monat-panel[hidden] {
	display: none;
}

.kb-monat-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.kb-monat-jahr {
	font-family: var(--kb-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--kb-porzellanweiss);
}

.kb-monat-panel button {
	min-height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--kb-radius-md);
	background: transparent;
	color: var(--kb-porzellanweiss);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.kb-monat-panel .kb-monat-nav {
	width: 40px;
	font-size: 22px;
	color: var(--kb-electric-cyan);
}

.kb-monat-raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.kb-monat-panel button:hover:not([disabled]),
.kb-monat-panel button:focus:not([disabled]) {
	background: transparent;
	color: var(--kb-porzellanweiss);
	border-color: var(--kb-electric-cyan);
}

.kb-monat-panel button[aria-pressed="true"] {
	background: var(--kb-electric-cyan);
	color: var(--kb-executive-blue);
}

.kb-monat-panel button[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* Nachfolge-Rechner kompakt: weniger Abstände, kleinere Phasenkreise */
.kb-nachfolge {
	padding-top: 32px;
	padding-bottom: 32px;
}

.kb-nachfolge .kb-rechner-frage {
	max-width: none;
}

.kb-nachfolge .kb-rechner-lead {
	margin-bottom: 18px;
}

.kb-nachfolge .kb-rechner-ergebnis:not(:empty) {
	margin-top: 20px;
}

.kb-nachfolge .kb-rechner-status {
	margin-bottom: 0;
}

.kb-nachfolge .kb-rechner-zeitplan {
	margin: 20px 0 12px;
	padding-top: 16px;
}

.kb-nachfolge ol.kb-ablauf {
	margin: 0 0 12px;
}

.kb-nachfolge ol.kb-ablauf > li {
	min-height: 32px;
	padding: 4px 0 12px 48px;
}

.kb-nachfolge ol.kb-ablauf > li:last-child {
	padding-bottom: 0;
}

.kb-nachfolge ol.kb-ablauf > li::before {
	width: 32px;
	height: 32px;
	font-size: 14px;
}

.kb-nachfolge ol.kb-ablauf > li:not(:last-child)::after {
	top: 32px;
	left: 15px;
}

.kb-nachfolge .kb-rechner-fuss {
	margin-bottom: 12px;
}

@media (max-width: 767px) {
	.kb-nachfolge {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* Vakanzkosten-Rechner: Schieberegler und Balken */
.kb-regler {
	margin: 0 0 18px;
}

.kb-regler label {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.kb-regler output {
	font-family: var(--kb-font-display);
	font-weight: 700;
	color: var(--kb-electric-cyan);
	white-space: nowrap;
}

.kb-regler input[type="range"] {
	width: 100%;
	min-height: 32px;
	accent-color: var(--kb-electric-cyan);
	cursor: pointer;
}

.kb-regler input[type="range"]:focus-visible {
	outline: var(--kb-focus-ring);
	outline-offset: 3px;
}

/* Vakanzrechner steht auf Blue-Raised-Fläche: Box in Executive Blue absetzen */
.kb-vakanz {
	background: var(--kb-executive-blue);
}

.kb-saeulen-titel {
	margin: 8px 0 12px;
	font-weight: 600;
	color: var(--kb-porzellanweiss);
}

/* Diagramm mit fester Skala: Hilfslinien bei 25/50/75/100 %, Beschriftung links.
   Balkenbereich = Höhe der Säulen (220 px); darüber 20 px für die Beträge,
   darunter 26 px für die Monatszahlen. */
.kb-diagramm {
	position: relative;
	padding: 0 0 26px 64px;
}

.kb-linien {
	position: absolute;
	top: 20px;
	right: 0;
	bottom: 26px;
	left: 0;
	pointer-events: none;
}

.kb-linie {
	position: absolute;
	right: 0;
	left: 64px;
	border-top: 1px dashed rgba(247, 247, 245, 0.12);
}

.kb-linie span {
	position: absolute;
	top: -8px;
	left: -64px;
	width: 56px;
	font-size: 12px;
	text-align: right;
	color: var(--kb-neutral-grey);
}

.kb-saeulen {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: end;
	gap: 6px;
	height: 240px;
	padding-top: 20px;
	border-bottom: 1px solid var(--kb-rule);
	box-sizing: border-box;
}

.kb-saeule {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	height: 100%;
	min-width: 0;
}

.kb-saeule-bar {
	flex-shrink: 0;
	width: 100%;
	max-width: 44px;
	background: rgba(247, 247, 245, 0.25);
	border-radius: var(--kb-radius-sm) var(--kb-radius-sm) 0 0;
	transition: height var(--kb-motion-slow) var(--kb-ease-calm), background var(--kb-motion-fast) var(--kb-ease-calm);
}

.kb-saeule--aktiv .kb-saeule-bar {
	background: var(--kb-electric-cyan);
}

.kb-saeule-wert {
	flex-shrink: 0;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	color: var(--kb-neutral-grey);
}

.kb-saeule--aktiv .kb-saeule-wert {
	color: var(--kb-porzellanweiss);
	font-weight: 600;
}

.kb-saeule-monat {
	position: absolute;
	top: 100%;
	margin-top: 6px;
	font-size: var(--kb-fs-caption);
	color: var(--kb-neutral-grey);
}

.kb-saeulen-achse {
	margin: 4px 0 20px;
	font-size: var(--kb-fs-caption);
	text-align: center;
	color: var(--kb-neutral-grey);
}

/* Handy: Beträge nur bei 3, 6, 9 und 12 Monaten, damit nichts überlappt */
@media (max-width: 767px) {
	.kb-saeulen {
		gap: 3px;
		height: 200px;
	}

	.kb-diagramm {
		padding-left: 48px;
	}

	.kb-linie {
		left: 48px;
	}

	.kb-linie span {
		left: -48px;
		width: 42px;
		font-size: 11px;
	}

	.kb-saeule-wert {
		visibility: hidden;
		font-size: 11px;
	}

	.kb-saeule:nth-child(3n) .kb-saeule-wert {
		visibility: visible;
	}
}

/* Vakanzrechner: Kernzahlen hervorgehoben */
.kb-vk-zahlen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 8px 0 16px;
}

.kb-vk-zahl {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--kb-electric-cyan);
	border-radius: var(--kb-radius-md);
}

.kb-vk-label {
	font-size: var(--kb-fs-caption);
	color: var(--kb-porzellanweiss);
}

.kb-vk-betrag {
	font-family: var(--kb-font-display);
	font-size: clamp(28px, 2vw + 18px, 40px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--kb-electric-cyan);
	white-space: nowrap;
}

.kb-vk-satz {
	margin: 0 0 24px;
	font-size: var(--kb-fs-body-lg);
}

.kb-vk-hervor {
	color: var(--kb-electric-cyan);
	white-space: nowrap;
}

/* Beträge über den Säulen deutlicher */
.kb-vakanz .kb-saeule-wert {
	font-size: 12px;
	font-weight: 600;
	color: var(--kb-porzellanweiss);
}

.kb-vakanz .kb-saeule--aktiv .kb-saeule-wert {
	font-weight: 700;
	color: var(--kb-electric-cyan);
}

@media (max-width: 767px) {
	.kb-vk-zahlen {
		grid-template-columns: 1fr;
	}

	.kb-vakanz .kb-saeule-wert {
		font-size: 11px;
	}
}

/* Vakanzrechner kompakt: Regler auf dem Desktop zweispaltig, damit Kernzahlen
   und Diagramm ohne Scrollen unter den Reglern sichtbar sind */
.kb-vakanz > .kb-kicker {
	margin-bottom: 2px;
}

.kb-vakanz > .kb-rechner-fuss:first-of-type {
	margin: 0 0 16px;
}

.kb-vakanz .kb-regler {
	margin-bottom: 10px;
}

.kb-vakanz .kb-regler label {
	align-items: baseline;
	margin-bottom: 0;
	font-size: var(--kb-fs-caption);
}

.kb-vakanz .kb-regler input[type="range"] {
	min-height: 28px;
}

.kb-vakanz .kb-rechner-ergebnis {
	margin-top: 12px;
}

.kb-vakanz .kb-vk-zahlen {
	margin: 0 0 12px;
}

.kb-vakanz .kb-vk-zahl {
	gap: 2px;
	padding: 12px 18px;
}

.kb-vakanz .kb-vk-betrag {
	font-size: clamp(26px, 1.5vw + 16px, 34px);
}

.kb-vakanz .kb-vk-satz {
	margin-bottom: 12px;
	font-size: var(--kb-fs-body);
}

.kb-vakanz .kb-saeulen-titel {
	margin: 0 0 8px;
}

.kb-vakanz .kb-saeulen {
	height: 180px;
}

@media (min-width: 768px) {
	.kb-regler-gruppe {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	/* Zweizeilige Beschriftung: Regler einer Zeile bleiben auf gleicher Höhe */
	.kb-regler-gruppe .kb-regler {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
}

@media (max-width: 767px) {
	.kb-vakanz .kb-saeulen {
		height: 160px;
	}
}

/* Calm Motion: bei reduzierter Bewegung alles statisch */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}