/**
 * WOODPLAN – Hilfe-Center (Echo Knowledge Base)
 * ------------------------------------------------------------------
 * Überträgt die Editorial-/Swiss-Modernism-Sprache des Blogs
 * (assets/css/blog.css) auf das Echo-KB „Modular Layout".
 *
 * Das Plugin rendert eigenes Inline-CSS mit `!important` und Single-ID-
 * Selektoren. Um zuverlässig zu gewinnen, werden kritische Regeln mit
 * ZWEI IDs (#epkb-modular-main-page-container + Modul-ID) geschrieben –
 * das schlägt die Plugin-Regeln unabhängig von der Ladereihenfolge.
 *
 * Motion-Philosophie (identisch zum Blog):
 *   enter = ease-out, < 300ms, nur transform/opacity, 1–2 Elemente
 *   pro View animiert, vollständig reduced-motion-aware.
 *
 * Nur auf Hilfe-Center-Seiten geladen (siehe functions.php › woodplan_is_kb).
 */

/* ═══════════════════════════════════════════════════════════════
   Tokens – aus den Marken-Tokens (style.css / header.css) abgeleitet
   ═══════════════════════════════════════════════════════════════ */
#epkb-modular-main-page-container,
.epkb-article-page,
#eckb-article-page-container-v2,
#epkb-sidebar-container-v2 {
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--kb-ink: #1B2026;          /* --wp-stone-900 */
	--kb-muted: #5B6571;        /* AA auf Weiß */
	--kb-line: #E6E8EC;
	--kb-line-strong: #D2D7DE;
	--kb-bg-soft: #F8F9FB;
	--kb-azure: var(--wp-azure-400, #2D6A9F);
	--kb-azure-dark: var(--wp-azure-500, #1B4F78);
	--kb-azure-light: var(--wp-azure-300, #5A92C0);
	--kb-gold: var(--wp-gold-300, #F9B700);
	--kb-radius: 14px;
	--kb-radius-sm: 10px;
}

/* Echo-KB setzt inline margin-top:100px – zu viel Luft oben (der Hero
   bringt eigenen Abstand mit). Inline-Style nur per !important schlagbar. */
.eckb-kb-template {
	margin: 0 auto clamp(2rem, 5vw, 3.5rem) !important;
	padding: 0 !important;
}

/* Ganze Seite atmet lassen – Container-Breite wie der Blog. */
#epkb-modular-main-page-container {
	max-width: 1180px !important;
	margin-inline: auto !important;
	padding-inline: clamp(16px, 4vw, 40px) !important;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
	color: var(--kb-ink);
}

/* Vertikaler Rhythmus zwischen den Modul-Reihen. */
#epkb-modular-main-page-container .epkb-ml__row {
	margin: 0 !important;
	padding: 0 !important;
}
#epkb-modular-main-page-container .epkb-ml__row + .epkb-ml__row {
	margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}

/* ═══════════════════════════════════════════════════════════════
   1 · SUCH-HERO  (#epkb-ml__module-search) – Full-Bleed hinter dem Header
   ---------------------------------------------------------------
   Mechanik analog zum Startseiten-Hero (header.css .home .site-main /
   .wp-hero): auf /hilfe/ (body.page-kb) wird die Inhaltsspalte um die
   Header-Höhe nach oben gezogen, sodass ihr Verlauf hinter dem oben
   transparenten Header (Logo/Menü) durchläuft. Der Hero bringt oben
   entsprechend Platz mit. overflow-x:clip verhindert Horizontal-Scroll
   durch die 100vw-Breite.
   ═══════════════════════════════════════════════════════════════ */
.page-kb-main .site-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow-x: clip;
	margin-top: calc(-1 * var(--wp-head-h, 76px));
}
/* Support-CTA am Seitenende: gleicher Abstand oben wie unten. */
.page-kb-main .eckb-kb-template { margin-bottom: 0 !important; }
.page-kb .wp-ctaf {
	padding-top: clamp(3.5rem, 6vw, 5.5rem) !important;
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem) !important;
}

/* Content-Breite exakt wie der Header (.wp-container = 1280px). Bootstraps
   .container geht bei großen Screens auf 1320px → stünde 20px/Seite über. */
.page-kb .site-main > .container {
	max-width: 1280px !important;
	padding-left: clamp(16px, 4vw, 40px) !important;
	padding-right: clamp(16px, 4vw, 40px) !important;
}
/* Artikelseite: weniger Abstand zwischen Menü und Inhalt (py-5 = 48px). */
.page-kb-doc .site-main { padding-top: 1.5rem !important; }

#epkb-modular-main-page-container #epkb-ml__module-search {
	position: relative;
	z-index: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
	padding: calc(var(--wp-head-h, 76px) + clamp(1rem, 2.5vw, 1.75rem)) clamp(1.25rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background:
		radial-gradient(135% 115% at 50% 0%, rgba(45, 106, 159, .26), rgba(45, 106, 159, .07) 42%, transparent 72%),
		linear-gradient(180deg, #E6EFF9 0%, #EEF4FB 46%, #FFFFFF 100%) !important;
}
/* Weiche Trennlinie zum darunterliegenden Inhalt. */
#epkb-modular-main-page-container #epkb-ml__module-search::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--kb-line-strong) 22%, var(--kb-line-strong) 78%, transparent);
}

#epkb-modular-main-page-container #epkb-ml-search-modern-layout,
#epkb-modular-main-page-container #epkb-ml-search-classic-layout {
	position: relative;
	z-index: 1;
	max-width: min(880px, 100%);
	margin-inline: auto;
	text-align: center;
}

/* Eyebrow über dem Titel. */
#epkb-modular-main-page-container #epkb-ml-search-modern-layout::before {
	content: "Hilfe-Center";
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: 1rem;
	padding-left: 2.25rem;
	position: relative;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kb-azure-dark);
}
#epkb-modular-main-page-container #epkb-ml-search-modern-layout::after {
	content: "";
	position: absolute;
	top: .55rem;
	left: 50%;
	transform: translateX(calc(-50% - 4.6rem));
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--kb-gold);
}

/* Hero-Titel – Skala wie der Blog-Masthead. Ab Tablet-Breite einzeilig
   (nowrap); auf schmalen Screens bricht er bewusst wieder um. */
#epkb-modular-main-page-container .epkb-ml-search-title {
	font-family: "Inter", system-ui, sans-serif !important;
	font-size: clamp(1.9rem, 1rem + 3vw, 3rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.08 !important;
	color: var(--kb-ink) !important;
	margin: 0 0 1.25rem !important;
	text-wrap: balance;
}
@media (min-width: 768px) {
	#epkb-modular-main-page-container .epkb-ml-search-title { white-space: nowrap !important; }
}

/* Suchformular.
   WICHTIG: Das Plugin stylt die Suchbox mit 3–4 ID-Selektoren + !important
   (u. a. #…-search-box{background:#2d6a9f}). Deshalb hier bewusst eine ID
   mehr voranstellen (Container-ID), damit unsere Regeln sicher gewinnen –
   für modern- UND classic-Layout. Ergebnis: EIN weißes Suchfeld mit
   bündigem Azure-Button statt Pille-in-Pille. */
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form,
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form {
	max-width: min(580px, 100%) !important;
	width: 100% !important;
	margin-inline: auto !important;
}

/* Rahmen-Box: weiß, ein Radius, Button bündig eingefasst. */
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form #epkb-ml-search-box,
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form #epkb-ml-search-box {
	position: relative;
	display: flex !important;
	align-items: center;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid var(--kb-line-strong) !important;
	border-radius: var(--kb-radius) !important;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(27, 79, 120, .04), 0 14px 34px -18px rgba(27, 79, 120, .30) !important;
	transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form #epkb-ml-search-box:focus-within,
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form #epkb-ml-search-box:focus-within {
	border-color: var(--kb-azure) !important;
	box-shadow: 0 0 0 4px rgba(45, 106, 159, .16) !important;
}

/* Eingabefeld: transparent (füllt die weiße Box), volle Breite. */
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-modern-layout .epkb-ml-search-box__input,
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-classic-layout .epkb-ml-search-box__input {
	flex: 1 1 auto !important;
	height: 58px !important;
	margin: 0 !important;
	padding: 0 1.25rem !important;
	border: 0 !important;
	background: transparent !important;
	font-family: "Inter", sans-serif !important;
	font-size: 1.02rem !important;
	color: var(--kb-ink) !important;
	box-shadow: none !important;
}
#epkb-modular-main-page-container #epkb-ml__module-search .epkb-ml-search-box__input::placeholder {
	color: var(--kb-muted) !important;
	opacity: 1;
}
#epkb-modular-main-page-container #epkb-ml__module-search .epkb-ml-search-box__input:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Button: bündig rechts, volle Höhe, azur. Flex-Zentrierung; der
   Spinner-Span wird ausgeblendet, damit NUR die Lupe zentriert bleibt. */
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-modern-layout .epkb-ml-search-box__btn,
#epkb-modular-main-page-container #epkb-ml__module-search #epkb-ml-search-classic-layout .epkb-ml-search-box__btn {
	flex: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 58px !important;
	height: 58px !important;
	min-height: 58px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--kb-azure) !important;
	color: #fff !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	#epkb-modular-main-page-container #epkb-ml__module-search .epkb-ml-search-box__btn:hover {
		background: var(--kb-azure-dark) !important;
	}
}
/* Spinner raus – nur die Lupe zeigen und exakt mittig setzen. */
#epkb-modular-main-page-container #epkb-ml__module-search .epkb-ml-search-box__btn .epkbfa-ml-loading-icon {
	display: none !important;
}
#epkb-modular-main-page-container #epkb-ml__module-search .epkb-ml-search-box__btn .epkbfa {
	position: static !important;
	display: block !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	color: #fff !important;
	font-size: 1.4rem !important;
}

/* Live-Suchergebnisse als sauberes Popover. */
#epkb-modular-main-page-container #epkb-ml-search-results {
	margin-top: .5rem !important;
	border: 1px solid var(--kb-line) !important;
	border-radius: var(--kb-radius) !important;
	box-shadow: var(--wp-shadow-soft, 0 18px 48px -16px rgba(27, 79, 120, .22)) !important;
	overflow: hidden;
	text-align: left;
}

/* ═══════════════════════════════════════════════════════════════
   2 · KATEGORIEN  –  Karten-Raster (data-feature="categories_articles")
   ═══════════════════════════════════════════════════════════════ */

/* Plugin-Spaltensystem plätten und durch ein sauberes Grid ersetzen. */
#epkb-modular-main-page-container .epkb-three-col {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-rows: min-content !important;   /* Reihen nur so hoch wie Inhalt */
	gap: 1.75rem 1.25rem !important;
	align-items: start !important;
	align-content: start !important;          /* keine Reihen-Verteilung */
	width: 100% !important;
	margin: 0 !important;
}
#epkb-modular-main-page-container .epkb-top-category-box {
	align-self: start !important;
	height: auto !important;
}
#epkb-modular-main-page-container .epkb-ml__module-categories-articles__row {
	display: contents !important;   /* Kinder wandern direkt ins Grid */
}
/* Plugin zentriert alles via `…​.eckb-categories-list{text-align:center}`
   (2 IDs). Mit 3 IDs auf linksbündig kontern (kaskadiert auf Name/Desc). */
#epkb-modular-main-page-container #epkb-ml__module-categories-articles #epkb-ml-basic-layout .eckb-categories-list,
#epkb-modular-main-page-container #epkb-ml__module-categories-articles #epkb-ml-basic-layout .epkb-top-category-box,
#epkb-modular-main-page-container #epkb-ml__module-categories-articles #epkb-ml-basic-layout .epkb-cat-name,
#epkb-modular-main-page-container #epkb-ml__module-categories-articles #epkb-ml-basic-layout .epkb-cat-desc {
	text-align: left !important;
}
#epkb-modular-main-page-container .epkb-section-container { margin: 0 !important; padding: 0 !important; }
#epkb-modular-main-page-container #epkb-content-container { padding: 0 !important; }

/* Die Kategorie-Karte.
   WICHTIG: Das Plugin erzwingt `.epkb-three-col .epkb-top-category-box{width:33.33%!important}`
   für sein eigenes Flex-Row-Layout. In unserem Grid muss die Box die Zelle
   FÜLLEN – sonst schrumpft sie auf ~⅑ Breite. Container-ID gewinnt. */
#epkb-modular-main-page-container .epkb-top-category-box {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	float: none !important;
	display: flex !important;
	flex-direction: column;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* Plugin erzwingt die Box-Breite mit 2-ID-Selektoren (33.33 % / 90 %).
   Wir müssen mit 3 IDs kontern (exakter Plugin-Pfad + Container-ID
   vorangestellt), sonst füllt die Karte ihre Grid-Zelle nicht. */
#epkb-modular-main-page-container #epkb-ml__module-categories-articles #epkb-ml-basic-layout .epkb-three-col .epkb-top-category-box,
#epkb-modular-main-page-container #epkb-ml__module-categories-articles #epkb-ml-basic-layout .epkb-top-category-box {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;   /* Plugin erzwingt 30px (1 ID+1 Klasse) – 3 IDs kontern */
	flex: none !important;
	flex-wrap: nowrap !important;
}

/* Kopf: dunkle Icon-Kachel links, Titel rechts daneben, Beschreibung
   darunter eingerückt (OpenAI-Help-Center-Stil). */
/* Icon absolut oben-links → Titel/Text sitzen top-bündig daneben und die
   Icon-Höhe bläht den vertikalen Abstand nicht auf. */
#epkb-modular-main-page-container .epkb-top-category-box .section-head {
	position: relative !important;
	border: 0 !important;
	padding: 0 0 0 calc(60px + 1.1rem) !important;
	min-height: 60px !important;
	margin: 0 0 .55rem !important;
}
#epkb-modular-main-page-container .epkb-category-level-1 {
	display: block !important;
	margin: 0 0 .1rem !important;
}
#epkb-modular-main-page-container .epkb-cat-icon {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	display: inline-grid !important;
	place-items: center !important;
	width: 60px !important;
	height: 60px !important;
	margin: 0 !important;
	border-radius: 15px !important;
	background: var(--wp-stone-900, #1B2026) !important;
	color: #fff !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
}
#epkb-modular-main-page-container .epkb-cat-name {
	margin: 0 !important;
	font-family: "Inter", sans-serif !important;
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.2 !important;
	color: var(--kb-ink) !important;
}
/* Beschreibung – direkt unter dem Titel, enger Abstand. */
#epkb-modular-main-page-container .epkb-cat-desc {
	margin: 0 !important;
	padding-left: 0 !important;
	font-size: .95rem !important;
	line-height: 1.5 !important;
	color: var(--kb-muted) !important;
}

/* Artikel-Liste: flach, unter dem Text ausgerichtet (keine Trennlinie). */
#epkb-modular-main-page-container .epkb-section-body {
	margin-top: .5rem !important;
	padding: 0 0 0 calc(60px + 1.1rem) !important;
	border-top: 0 !important;
}
#epkb-modular-main-page-container .epkb-articles { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#epkb-modular-main-page-container .epkb-article-level-1,
#epkb-modular-main-page-container .epkb-article-level-2 { margin: 0 !important; padding: 0 !important; }

#epkb-modular-main-page-container .epkb-mp-article,
#epkb-modular-main-page-container .epkb-articles li > a {
	display: flex !important;
	align-items: center;
	gap: .55rem;
	padding: .5rem .55rem !important;
	margin: 1px 0 !important;
	border-radius: 8px !important;
	color: var(--kb-ink) !important;
	font-size: .95rem !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
#epkb-modular-main-page-container .epkb-mp-article .epkb-article__icon,
#epkb-modular-main-page-container .epkb-articles .epkbfa {
	color: var(--kb-azure-light) !important;
	font-size: .8rem !important;
	transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	#epkb-modular-main-page-container .epkb-mp-article:hover,
	#epkb-modular-main-page-container .epkb-articles li > a:hover {
		background: var(--kb-bg-soft) !important;
		color: var(--kb-azure-dark) !important;
	}
	#epkb-modular-main-page-container .epkb-mp-article:hover .epkb-article__icon,
	#epkb-modular-main-page-container .epkb-mp-article:hover .epkbfa {
		color: var(--kb-azure) !important;
		transform: translateX(2px);
	}
}
#epkb-modular-main-page-container .epkb-mp-article:active { transform: scale(0.99); }

/* „Bald verfügbar" dezent halten. */
#epkb-modular-main-page-container .epkb-articles-coming-soon {
	color: var(--kb-muted) !important;
	font-style: italic;
	font-size: .9rem !important;
	padding: .5rem .55rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   3 · ARTIKEL-LISTEN  (populär / neu / zuletzt) – row-3
   ═══════════════════════════════════════════════════════════════ */
/* Container hält Titel + Reihe → Block (KEIN Grid, sonst landet der Titel
   in Spalte 1 und quetscht die Karten). */
#epkb-modular-main-page-container #epkb-ml-article-list-basic-layout {
	display: block !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
}
/* Modul-Titel „Hervorgehobene Artikel" – zentrierter Section-Masthead. */
#epkb-modular-main-page-container .epkb-ml-articles-list__title {
	display: block !important;
	text-align: center !important;
	font-family: "Inter", sans-serif !important;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	color: var(--kb-ink) !important;
	margin: 0 0 2rem !important;
	padding: 0 !important;
}
#epkb-modular-main-page-container .epkb-ml-articles-list__title span { color: inherit !important; }

/* Die 3-Spalten-Reihe der Sektionen. Plugin hält sie per 1 ID + 2 Klassen
   als Flexbox → mit 2 IDs auf Grid kontern. */
#epkb-modular-main-page-container #epkb-ml__module-articles-list .epkb-ml-articles-list__row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1.5rem !important;
	align-items: start !important;
	width: 100% !important;
	margin: 0 !important;
	border: 0 !important;
}
/* Sektions-Karte (Beliebte / Neueste / Zuletzt aktualisierte). Plugin
   erzwingt width:50%/100% (1 ID + 3 Klassen) → 2 IDs füllen die Zelle. */
#epkb-modular-main-page-container #epkb-ml__module-articles-list .epkb-ml-article-section {
	width: 100% !important;
	max-width: none !important;
	align-self: start !important;
	margin: 0 !important;
	padding: 1.5rem 1.5rem 1.25rem !important;
	background: #fff !important;
	border: 1px solid var(--kb-line) !important;
	border-radius: var(--kb-radius) !important;
}
/* Karten-Kopf als Eyebrow. */
#epkb-modular-main-page-container #epkb-ml__module-articles-list .epkb-ml-article-section__head {
	margin: 0 0 1rem !important;
	padding: 0 0 .8rem !important;
	border-bottom: 1px solid var(--kb-line) !important;
	font-family: "Inter", sans-serif !important;
	font-size: .72rem !important;
	font-weight: 600 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	line-height: 1.4 !important;
	color: var(--kb-azure-dark) !important;
}
#epkb-modular-main-page-container #epkb-ml__module-articles-list .epkb-ml-article-section__body { padding: 0 !important; }

/* Artikel-Liste in der Karte. */
#epkb-modular-main-page-container .epkb-ml-articles-list {
	margin: 0 !important; padding: 0 !important; list-style: none !important;
}
#epkb-modular-main-page-container .epkb-ml-articles-list > li {
	margin: 0 !important; padding: 0 !important;
	border-bottom: 1px solid var(--kb-line) !important;
}
#epkb-modular-main-page-container .epkb-ml-articles-list > li:last-child { border-bottom: 0 !important; }
/* Artikel-Link. */
#epkb-modular-main-page-container .epkb-ml-article-container {
	display: flex !important;
	align-items: flex-start;
	gap: .55rem;
	padding: .65rem .1rem !important;
	color: var(--kb-ink) !important;
	font-size: .95rem !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-decoration: none !important;
	transition: color 160ms var(--ease-out), padding-left 160ms var(--ease-out);
}
#epkb-modular-main-page-container .epkb-ml-article-container .epkb-article__icon {
	flex: none;
	margin-top: .1rem;
	color: var(--kb-azure-light) !important;
	transition: color 160ms var(--ease-out);
}
#epkb-modular-main-page-container .epkb-ml-article-container .epkb-article__text { color: inherit !important; }
@media (hover: hover) and (pointer: fine) {
	#epkb-modular-main-page-container .epkb-ml-article-container:hover {
		color: var(--kb-azure-dark) !important;
		padding-left: .35rem !important;
	}
	#epkb-modular-main-page-container .epkb-ml-article-container:hover .epkb-article__icon { color: var(--kb-azure) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   4 · FAQ-AKKORDEON  (data-feature="faqs")
   ═══════════════════════════════════════════════════════════════ */
/* Full-Bleed hellgrauer Hintergrund wie .wp-faq auf der Startseite. */
#epkb-modular-main-page-container #epkb-ml__module-faqs {
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	padding: clamp(3rem, 7vw, 5.5rem) clamp(16px, 4vw, 40px) !important;
	background: var(--wp-stone-50, #F2F3F5) !important;
}

/* Zwei-Spalten-Layout wie die Startseite (.wp-faq__inner):
   Titel-Spalte links, Fragen-Liste rechts. Struktur passt bereits –
   #epkb-ml-faqs-basic-layout hat genau die zwei Kinder title + content. */
#epkb-modular-main-page-container #epkb-ml__module-faqs #epkb-ml-faqs-basic-layout {
	display: grid !important;
	grid-template-columns: 0.82fr 1.18fr !important;
	gap: clamp(2rem, 5vw, 4.5rem) !important;
	align-items: start !important;
	max-width: 1180px !important;
	margin-inline: auto !important;
}
/* Container zwischen Grid und Items neutralisieren. */
#epkb-modular-main-page-container .epkb-faqs-cat-content-container,
#epkb-modular-main-page-container .epkb-faqs-cat-container,
#epkb-modular-main-page-container .epkb-faqs__items-list-container,
#epkb-modular-main-page-container .epkb-faqs__items-list {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Titel-Spalte: links, sticky, mit „FAQ"-Eyebrow. */
#epkb-modular-main-page-container #epkb-ml__module-faqs .epkb-faqs-title,
#epkb-modular-main-page-container .epkb-faqs-title {
	text-align: left !important;
	position: sticky;
	top: calc(var(--wp-head-h, 76px) + 1.5rem);
	font-family: "Inter", sans-serif !important;
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.08 !important;
	color: var(--kb-ink) !important;
	margin: 0 !important;
}
#epkb-modular-main-page-container .epkb-faqs-title::before {
	content: "FAQ";
	display: block;
	width: fit-content;
	margin-bottom: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(45, 106, 159, .1);
	color: var(--wp-azure-500, #1B4F78);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
#epkb-modular-main-page-container .epkb-faqs-container { margin: 0 !important; }

/* Mobil: wieder einspaltig, Titel nicht sticky. */
@media (max-width: 782px) {
	#epkb-modular-main-page-container #epkb-ml__module-faqs #epkb-ml-faqs-basic-layout {
		grid-template-columns: 1fr !important;
		gap: 1.75rem !important;
	}
	#epkb-modular-main-page-container .epkb-faqs-title { position: static !important; }
}

/* Karte – exakt wie .wp-faq__item auf der Startseite. */
#epkb-modular-main-page-container .epkb-faqs__item-container {
	margin: 0 0 1rem !important;
	border: 1px solid var(--wp-stone-200, #DCE2EA) !important;
	border-radius: 14px !important;
	background: #fff !important;
	overflow: hidden;
	transition: border-color var(--wp-dur, 220ms) var(--ease-out), box-shadow var(--wp-dur, 220ms) var(--ease-out) !important;
}
#epkb-modular-main-page-container .epkb-faqs__item-container:hover { border-color: var(--kb-azure-light) !important; }
#epkb-modular-main-page-container .epkb-faqs__item-container--active {
	border-color: var(--wp-azure-300, #5A92C0) !important;
	box-shadow: 0 12px 30px -18px rgba(45, 106, 159, .5) !important;
}

/* Frage-Zeile: Text links, EIN Chevron rechts. */
#epkb-modular-main-page-container .epkb-faqs__item__question {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 18px 20px !important;
	cursor: pointer;
	font-family: "Inter", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--kb-ink) !important;
	transition: color var(--wp-dur, 220ms) var(--ease-out);
}
#epkb-modular-main-page-container .epkb-faqs__item__question:hover,
#epkb-modular-main-page-container .epkb-faqs__item-container--active .epkb-faqs__item__question {
	color: var(--kb-azure-dark) !important;
}
#epkb-modular-main-page-container .epkb-faqs__item__question__text {
	flex: 1 1 auto !important;
	order: 0 !important;
}

/* Das Plugin rendert ZWEI Chevron-Elemente (closed + open, beide mit
   Basisklasse __icon). Das „open" (Auf-Pfeil) ausblenden → nur EIN
   Chevron; das verbleibende dreht beim Öffnen (wie Startseite). */
#epkb-modular-main-page-container .epkb-faqs__item__question__icon.epkb-faqs__item__question__icon-open { display: none !important; }
#epkb-modular-main-page-container .epkb-faqs__item__question__icon {
	flex: none !important;
	order: 1 !important;
	margin-left: auto !important;
	display: grid !important;
	place-items: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	background: var(--wp-stone-100, #ECEFF4) !important;
	color: var(--wp-stone-600, #565E6B) !important;
	font-size: 12px !important;
	transition: transform var(--wp-dur, 220ms) var(--ease-out), background var(--wp-dur, 220ms) var(--ease-out), color var(--wp-dur, 220ms) var(--ease-out) !important;
}
/* Geöffnet: Chevron dreht 180°, Kreis azur (Startseiten-Look). */
#epkb-modular-main-page-container .epkb-faqs__item-container--active .epkb-faqs__item__question__icon-closed {
	transform: rotate(180deg) !important;
	background: linear-gradient(180deg, var(--wp-azure-300, #5A92C0), var(--wp-azure-400, #2D6A9F)) !important;
	color: #fff !important;
}

/* Antwort. */
#epkb-modular-main-page-container .epkb-faqs__item__answer {
	padding: 0 20px !important;
}
#epkb-modular-main-page-container .epkb-faqs__item__answer__text {
	padding: 0 0 18px !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--kb-muted) !important;
}
#epkb-modular-main-page-container .epkb-faqs__item__answer__text a { color: var(--kb-azure) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   Stagger-Reveal – identische Technik wie blog.css (.wp-js auf <html>)
   ═══════════════════════════════════════════════════════════════ */
.wp-js #epkb-modular-main-page-container .epkb-top-category-box,
.wp-js #epkb-modular-main-page-container #epkb-ml-article-list-basic-layout > *,
.wp-js #epkb-modular-main-page-container .epkb-faqs__item-container {
	opacity: 0;
	transform: translateY(12px);
	animation: kbReveal 460ms var(--ease-out) forwards;
}
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(1) { animation-delay: 60ms; }
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(2) { animation-delay: 110ms; }
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(3) { animation-delay: 160ms; }
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(4) { animation-delay: 210ms; }
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(5) { animation-delay: 260ms; }
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(6) { animation-delay: 300ms; }
.wp-js #epkb-modular-main-page-container .epkb-top-category-box:nth-child(n+7) { animation-delay: 340ms; }

@keyframes kbReveal {
	to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   ARTIKELSEITEN-SUCH-HERO  (body.page-kb-doc)
   Die Artikelseite hat KEIN #epkb-modular-main-page-container, daher
   eigenes Styling über die Body-Klasse. Kompakt & kontained (nicht
   hinter den Header). 4 IDs + Klasse schlagen die Plugin-Inline-Regeln.
   ═══════════════════════════════════════════════════════════════ */
/* Kompakter Artikel-Header. Modul via #eckb-article-header (2 IDs)
   schlagen (blaue Box/Padding raus); min-width:0 gegen Suchbox-Overflow;
   „Hilfe-Center" klein/azur (KEIN H1); Gesamthöhe ~halbiert. */
.page-kb-doc #eckb-article-header #epkb-ml__module-search {
	width: auto !important;
	margin: 0 0 1.25rem !important;
	padding: .25rem 0 1rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--kb-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
}
.page-kb-doc #epkb-ml-search-modern-layout,
.page-kb-doc #epkb-ml-search-classic-layout {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.5rem;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}
/* „Hilfe-Center": größer, schwarz, fett (kein H1-Element-Look nötig). */
.page-kb-doc .epkb-ml-search-title {
	flex: 0 0 auto;
	font-family: "Inter", sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.25 !important;
	color: var(--kb-ink) !important;
	margin: 0 !important;
}
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form,
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form {
	flex: 0 1 360px !important;
	max-width: 360px !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form #epkb-ml-search-box,
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form #epkb-ml-search-box {
	display: flex !important;
	align-items: stretch !important;
	min-width: 0 !important;
	height: 40px !important;          /* Plugin-45px übersteuern */
	min-height: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid var(--kb-line-strong) !important;
	border-radius: 10px !important;
	overflow: visible !important;   /* kein Clip → Lupe wird nicht angeschnitten */
	box-shadow: 0 1px 2px rgba(27, 79, 120, .05) !important;
}
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-modern-layout .epkb-ml-search-box__input,
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-classic-layout .epkb-ml-search-box__input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 .8rem !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: "Inter", sans-serif !important;
	font-size: .85rem !important;
	color: var(--kb-ink) !important;
}
.page-kb-doc #epkb-ml__module-search .epkb-ml-search-box__input::placeholder { color: var(--kb-muted) !important; opacity: 1; }
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-modern-layout .epkb-ml-search-box__btn,
.page-kb-doc #epkb-ml__module-search #epkb-ml-search-classic-layout .epkb-ml-search-box__btn {
	position: relative !important;
	flex: none !important;
	display: block !important;
	align-self: stretch !important;   /* volle Box-Höhe */
	width: 44px !important;
	min-width: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 9px 9px 0 !important;   /* rechte Ecken passend zur Box */
	background: var(--kb-azure) !important;
	color: #fff !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.page-kb-doc #epkb-ml__module-search .epkb-ml-search-box__btn:hover { background: var(--kb-azure-dark) !important; }
}
/* Spinner-Span raus; Lupe absolut mittig (robust gegen 2-Icon-Struktur). */
.page-kb-doc #epkb-ml__module-search .epkb-ml-search-box__btn .epkbfa-ml-loading-icon { display: none !important; }
.page-kb-doc #epkb-ml__module-search .epkb-ml-search-box__btn .epkbfa {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	color: #fff !important;
	font-size: .95rem !important;
	line-height: 1 !important;
}

/* Live-Suchergebnisse (Dropdown) passend gestalten. */
.page-kb-doc #epkb-ml-search-results {
	margin-top: .4rem !important;
	padding: .35rem !important;
	background: #fff !important;
	border: 1px solid var(--kb-line) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px -6px rgba(27, 79, 120, .14), 0 20px 44px -22px rgba(27, 79, 120, .38) !important;
	text-align: left !important;
}
.page-kb-doc #epkb-ml-search-results .epkb-ml-search-results-list,
.page-kb-doc #epkb-ml-search-results ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.page-kb-doc #epkb-ml-search-results li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.page-kb-doc #epkb-ml-search-results .epkb-mp-article,
.page-kb-doc #epkb-ml-search-results .epkb-ml-article-container,
.page-kb-doc #epkb-ml-search-results .epkb-sidebar-article,
.page-kb-doc #epkb-ml-search-results li > a {
	display: flex !important;
	align-items: flex-start;
	gap: .55rem;
	padding: .55rem .65rem !important;
	border-radius: 8px !important;
	color: var(--kb-ink) !important;
	text-decoration: none !important;
	font-size: .92rem !important;
	line-height: 1.4 !important;
	transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out) !important;
}
.page-kb-doc #epkb-ml-search-results .epkb-article__icon,
.page-kb-doc #epkb-ml-search-results [class*="ep_font_icon_"],
.page-kb-doc #epkb-ml-search-results .epkbfa {
	flex: none;
	margin-top: .1rem;
	color: var(--kb-azure-light) !important;
}
.page-kb-doc #epkb-ml-search-results .eckb-article-title__text,
.page-kb-doc #epkb-ml-search-results .epkb-article__text { color: var(--kb-ink) !important; margin-left: 0 !important; }
@media (hover: hover) and (pointer: fine) {
	.page-kb-doc #epkb-ml-search-results li > a:hover,
	.page-kb-doc #epkb-ml-search-results .epkb-mp-article:hover,
	.page-kb-doc #epkb-ml-search-results .epkb-ml-article-container:hover {
		background: var(--kb-bg-soft) !important;
		color: var(--kb-azure-dark) !important;
	}
	.page-kb-doc #epkb-ml-search-results li > a:hover .eckb-article-title__text { color: var(--kb-azure-dark) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   EINZELNER KB-ARTIKEL  (#eckb-article-page-container-v2)
   Minimalistisch/editorial: flache Navigationen, Scroll-Spy-TOC mit
   Akzentkante statt fettem Blau-Block. WOODPLAN-Marken-Tokens.
   Das Plugin liefert Inline-!important → wir kontern mit Container-ID.
   ═══════════════════════════════════════════════════════════════ */

/* Artikel-Titel: kleiner, weniger fett, mehr line-height. Nur der
   Titel-Container (NICHT der Body – sonst wäre der Fließtext betroffen). */
#eckb-article-page-container-v2 #eckb-article-content-title-container .eckb-article-title,
#eckb-article-content-header .epkb-article-title {
	font-family: "Inter", sans-serif !important;
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.2 !important;
	color: var(--kb-ink) !important;
}
/* Artikel-Fließtext: angenehme Lesegröße (Einleitung war zu groß). */
#eckb-article-page-container-v2 #eckb-article-content-body,
#eckb-article-page-container-v2 #eckb-article-content-body p,
#eckb-article-page-container-v2 #eckb-article-content-body li {
	font-size: 1rem !important;
	line-height: 1.7 !important;
}
/* Fallback: LEERE Icon-Kacheln im Content mit FA-Light-Häkchen füllen
   (die eigentlichen Icons fehlen im Content-HTML). Sobald echte Icons
   im Artikel stehen, greift dies nicht mehr (:empty). */
#eckb-article-page-container-v2 #eckb-article-content-body .wp-kb-icon:empty::before {
	content: "\f00c";                       /* check (FA Light) */
	font-family: "Font Awesome 7 Pro" !important;
	font-weight: 300 !important;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp-azure-400, #2D6A9F);
}

/* Inhaltsspalte + Sidebars: sanfte Karten statt harter Kästen. */
#eckb-article-page-container-v2 #eckb-article-content {
	background: #fff !important;
	border-radius: var(--kb-radius) !important;
}
#eckb-article-page-container-v2 #eckb-article-left-sidebar,
#eckb-article-page-container-v2 #eckb-article-right-sidebar {
	background: transparent !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────
   Das Plugin stylt mit 5-ID-Selektoren (…#eckb-article-content-breadcrumb-container…)
   inkl. line-height:2em / vertical-align auf dem Icon. Für Layout + Icon
   MÜSSEN wir dieselbe Kette + doppelte Klasse (Spezifität) nutzen. */
#eckb-article-page-container-v2 #eckb-article-body #eckb-article-content #eckb-article-content-header-v2 #eckb-article-content-breadcrumb-container .eckb-breadcrumb-nav.eckb-breadcrumb-nav {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	font-size: .68rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--kb-muted) !important;
}
#eckb-article-page-container-v2 #eckb-article-body #eckb-article-content #eckb-article-content-header-v2 #eckb-article-content-breadcrumb-container .eckb-breadcrumb-nav.eckb-breadcrumb-nav li {
	display: inline-flex !important;
	align-items: center;
	padding: 0 !important;
	margin: 0 !important;
}
#eckb-article-page-container-v2 #eckb-article-body #eckb-article-content #eckb-article-content-header-v2 #eckb-article-content-breadcrumb-container .eckb-breadcrumb-outline {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 !important;
	margin: 0 !important;
}
#eckb-article-page-container-v2 #eckb-article-body #eckb-article-content #eckb-article-content-header-v2 #eckb-article-content-breadcrumb-container .eckb-breadcrumb-link {
	display: inline-flex !important;
	align-items: center;
}
/* Evtl. „Breadcrumb:"-Label ausblenden (schafft Bündigkeit). */
#eckb-article-page-container-v2 #eckb-article-body #eckb-article-content #eckb-article-content-header-v2 #eckb-article-content-breadcrumb-container .eckb-breadcrumb-label { display: none !important; }
/* Trenner-Icon: line-height:2em / vertical-align des Plugins überschreiben. */
#eckb-article-page-container-v2 #eckb-article-body #eckb-article-content #eckb-article-content-header-v2 #eckb-article-content-breadcrumb-container .eckb-breadcrumb-link-icon.eckb-breadcrumb-link-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	vertical-align: middle !important;
	height: auto !important;
	font-size: .55rem !important;
	margin: 0 .5rem !important;
	color: #9AA3B0 !important;
	transform: none !important;
}
/* Farben. */
#eckb-article-page-container-v2 .eckb-breadcrumb-nav a,
#eckb-article-page-container-v2 .eckb-breadcrumb-link a,
#eckb-article-page-container-v2 .eckb-breadcrumb-link a span {
	color: var(--kb-azure-light, #5A92C0) !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}
#eckb-article-page-container-v2 .eckb-breadcrumb-nav a:hover,
#eckb-article-page-container-v2 .eckb-breadcrumb-link a:hover span { color: var(--kb-azure) !important; }
#eckb-article-page-container-v2 .eckb-breadcrumb-nav li:last-child,
#eckb-article-page-container-v2 .eckb-breadcrumb-nav li:last-child span,
#eckb-article-page-container-v2 .eckb-breadcrumb-current-item,
#eckb-article-page-container-v2 .eckb-breadcrumb-current-item span {
	color: var(--kb-muted) !important;
	font-weight: 400 !important;
}
/* „< Alle Themen"-Button raus (führt via history.go(-1) ins Backend). */
#eckb-article-page-container-v2 .eckb-navigation-button { display: none !important; }

/* ── LINKE NAVIGATION  (#epkb-sidebar-container-v2) ────────────
   Xentral-Look: durchgehende graue Schiene links, KEINE Box/Schatten,
   Aktiv = nur Akzentkante + farbiger Text (kein Füll-Kasten), keine
   Chevrons, Hierarchie über Einrückung. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2,
#epkb-sidebar-container-v2.epkb-sidebar--medium-shadow,
#epkb-sidebar-container-v2.epkb-sidebar--reset {
	background: transparent !important;
	border: 0 !important;                 /* kein linker Rand / keine Schiene */
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: .25rem 0 !important;
}
/* Alle Zwischen-Container + Trennlinien entfernen. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__cat-container,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat__heading-container,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat__body-container,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__body__main-cat,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__body__sub-cat {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
#epkb-sidebar-container-v2 .epkb-sidebar__cat-container a,
#epkb-sidebar-container-v2 .epkb-sidebar__cat-container span,
#epkb-sidebar-container-v2 .epkb-sidebar-article,
#epkb-sidebar-container-v2 .eckb-article-title { font-family: "Inter", sans-serif !important; }

/* Hauptkategorie: Chevron aus. Echtes Kategorie-Icon (wenn Plugin-Setting
   „Icons in der Seitenleiste" aktiv ist) fein grau darstellen … */
#epkb-sidebar-container-v2 .epkb-sidebar__heading__inner__name .epkb_sidebar_expand_category_icon { display: none !important; }
#epkb-sidebar-container-v2 .epkb-sidebar__heading__inner__name .epkbfa {
	display: inline-block !important;
	width: 1.4rem;          /* feste Breite → alle Texte fluchten */
	margin-right: .5rem;
	font-size: 1rem;
	text-align: center;
	color: var(--kb-stone-500, #6B7484) !important;
}
/* … sonst pro Kategorie ein passendes FA-Light-Icon (via --kb-cat-icon,
   von kb.js je Kategoriename gesetzt; Fallback = Ordner). */
#epkb-sidebar-container-v2 .epkb-sidebar__heading__inner__name:not(:has(.epkbfa)) .epkb-sidebar__heading__inner__cat-name::before {
	content: var(--kb-cat-icon, "\f07b");
	font-family: "Font Awesome 7 Pro" !important;
	font-weight: 300 !important;
	display: inline-block;
	width: 1.4rem;          /* feste Breite → alle Texte fluchten */
	margin-right: .5rem;
	font-size: 1rem;
	text-align: center;
	color: var(--kb-stone-500, #6B7484);
}
/* Subkategorie: Chevron als Aufklapp-Indikator (in der Icon-Spalte). */
#epkb-sidebar-container-v2 .epkb-category-level-2-3 .epkb_sidebar_expand_category_icon {
	display: inline-block !important;
	flex: none;
	width: 1.4rem !important;
	margin-right: .5rem !important;
	font-size: .78rem !important;
	text-align: center;
	color: var(--kb-stone-500, #6B7484) !important;
	transition: transform 160ms var(--ease-out);
}
/* „Dokumentationen erscheinen bald" (leere Kategorien) in der Nav ausblenden. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-articles-coming-soon { display: none !important; }
/* Icon versteckt → dessen 1.5em-Text-Einzug zurücknehmen. */
#epkb-sidebar-container-v2 .eckb-article-title__text,
#epkb-sidebar-container-v2 .epkb-article-title__text { margin-left: 0 !important; }
#epkb-sidebar-container-v2 .epkb-sidebar-article .epkb-article__icon,
#epkb-sidebar-container-v2 .epkb-sidebar-article [class*="ep_font_icon_"] { display: none !important; }

/* Ebene 0 – Hauptkategorie: graues Label + Icon, Abstand zwischen Gruppen. */
#epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat { margin: 0 !important; }
#epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat + .epkb-sidebar__cat__top-cat { margin-top: 2.25rem !important; }
/* Alle Hauptkategorien aufgeklappt zeigen (Collapse überschreiben). */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat__body-container {
	display: block !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__cat__top-cat__heading-container {
	padding: .5rem .5rem .5rem 0 !important;
}
#epkb-sidebar-container-v2 .epkb-sidebar__heading__inner__cat-name,
#epkb-sidebar-container-v2 .epkb-sidebar__heading__inner__name {
	margin: 0 !important;
	font-size: .95rem !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	color: var(--kb-muted) !important;
}

/* Ebene 1 – Artikel: dunkler Text, unter dem Kategorie-Text eingerückt,
   luftig, KEINE Linie. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar-article {
	display: block !important;
	padding: .5rem .5rem .5rem 1.9rem !important;
	margin-left: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--kb-ink) !important;
	font-size: .9rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	transition: color 160ms var(--ease-out) !important;
}
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar-article .eckb-article-title,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar-article .eckb-article-title__text {
	color: var(--kb-ink) !important;
	font-size: .9rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}
@media (hover: hover) and (pointer: fine) {
	#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar-article:hover,
	#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar-article:hover .eckb-article-title__text {
		color: var(--kb-azure-dark) !important;
	}
}

/* Subkategorie (z. B. „Angebote"): bündig mit dem Hauptkategorie-Text,
   kein Pfeil, zugeklappt – liest sich wie ein normaler Eintrag. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-category-level-2-3 {
	display: flex !important;
	align-items: center;
	padding: .5rem .5rem .5rem 0 !important;   /* Chevron in der Icon-Spalte, Name bei 1,9rem */
	margin: 0 !important;
	border: 0 !important;
	cursor: pointer;
}
#epkb-sidebar-container-v2 .epkb-category-level-2-3__cat-name,
#epkb-sidebar-container-v2 .epkb-category-level-2-3__cat-name span {
	color: var(--kb-ink) !important;
	font-size: .95rem !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}
/* Artikel innerhalb der aufgeklappten Subkategorie: nur minimal tiefer. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar__body__sub-cat .epkb-sidebar-article {
	padding-left: 1.9rem !important;
}

/* AKTUELLER Artikel — NUR über .active (Plugin-JS). Keine Linie, nur
   blauer Text. `article-on-active-bold` sitzt auf ALLEN → kein Marker. */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-sidebar-article.active,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 li.active > .epkb-sidebar-article,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb-articles .active,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .eckb-active-article > .epkb-sidebar-article {
	color: var(--kb-azure-dark) !important;
	font-weight: 500 !important;
}
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .active .eckb-article-title,
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .active .eckb-article-title__text {
	color: var(--kb-azure-dark) !important;
	font-weight: 500 !important;
}

/* ── RECHTES INHALTSVERZEICHNIS  (.eckb-article-toc) ───────────
   Scroll-Spy-Stil: randlos, Aktivzustand über Akzentkante + Tint. */
#eckb-article-page-container-v2 .eckb-article-toc,
#eckb-article-body .eckb-article-toc {
	position: sticky;
	top: calc(var(--wp-head-h, 76px) + 1.25rem);
}
#eckb-article-page-container-v2 .eckb-article-toc .eckb-article-toc__inner,
#eckb-article-body .eckb-article-toc__inner {
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--kb-line) !important;
	border-radius: 0 !important;
	padding: .1rem 0 .1rem 0 !important;
}
/* Titel als kleines, gesperrtes Eyebrow. */
#eckb-article-page-container-v2 .eckb-article-toc .eckb-article-toc__title,
#eckb-article-body .eckb-article-toc__title {
	font-family: "Inter", sans-serif !important;
	font-size: .72rem !important;
	font-weight: 600 !important;
	letter-spacing: .13em !important;
	text-transform: uppercase !important;
	color: var(--kb-azure-dark) !important;
	padding-left: 1rem !important;
	margin-bottom: .5rem !important;
}
/* Links: ruhig, mit hängender Akzentkante. */
#eckb-article-body .eckb-article-toc ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#eckb-article-body .eckb-article-toc__inner a,
#eckb-article-body .eckb-article-toc ul a {
	display: block !important;
	padding: .35rem 0 .35rem 1rem !important;
	margin-left: -1px !important;
	border-left: 2px solid transparent !important;
	border-radius: 0 !important;
	color: var(--kb-muted) !important;
	font-size: .9rem !important;
	line-height: 1.45 !important;
	text-decoration: none !important;
	transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background-color 160ms var(--ease-out) !important;
}
#eckb-article-body .eckb-article-toc ul a:hover {
	background: transparent !important;
	color: var(--kb-azure-dark) !important;
	border-left-color: var(--kb-line-strong) !important;
}
/* Aktiver Eintrag (Scroll-Spy): Akzentkante + Azur + zarter Tint,
   NICHT der plugin-eigene volle Blau-Block. */
#eckb-article-body .eckb-article-toc ul a.active {
	background: rgba(45, 106, 159, .06) !important;
	color: var(--kb-azure-dark) !important;
	border-left-color: var(--kb-azure) !important;
	font-weight: 600 !important;
}
/* Unter-Ebenen leicht einrücken. */
#eckb-article-body .eckb-article-toc__level .eckb-article-toc__level a { padding-left: 1.75rem !important; }

/* ═══════════════════════════════════════════════════════════════
   ICONS  →  Font Awesome 7 Pro LIGHT (statt Echo-KB-Icon-Font)
   ---------------------------------------------------------------
   Das Plugin nutzt eigene Icon-Fonts (`epkbfa`, `ep_font_icon_*`).
   Wir überschreiben je Icon Font-Family + Gewicht (300 = Light) UND
   den Glyph (Unicode), damit die Optik zum restlichen Theme passt.
   Neue Kategorie-Icons ggf. hier ergänzen.
   ═══════════════════════════════════════════════════════════════ */
#epkb-modular-main-page-container .epkbfa:not(.epkbfa-spinner):not(.epkbfa-ml-loading-icon)::before,
#epkb-modular-main-page-container [class*="ep_font_icon_"]::before,
#eckb-article-page-container-v2 .epkbfa:not(.epkbfa-spinner):not(.epkbfa-ml-loading-icon)::before,
#eckb-article-page-container-v2 [class*="ep_font_icon_"]::before,
#epkb-sidebar-container-v2 .epkbfa:not(.epkbfa-spinner):not(.epkbfa-ml-loading-icon)::before,
#epkb-sidebar-container-v2 [class*="ep_font_icon_"]::before {
	font-family: "Font Awesome 7 Pro" !important;
	font-weight: 300 !important;   /* Light */
	font-style: normal !important;
	-webkit-font-smoothing: antialiased;
}

/* Glyph-Mapping (Standard-FA-Unicodes). */
#epkb-modular-main-page-container .epkbfa-search::before,
#epkb-modular-main-page-container .epkbfa-ml-search-icon::before,
#eckb-article-page-container-v2 .epkbfa-search::before,
#eckb-article-page-container-v2 .epkbfa-ml-search-icon::before { content: "\f002" !important; } /* magnifying-glass */

/* Fallback: nicht gemappte Kategorie-Icons (z. B. Support/Lager) bekommen
   ein schlichtes FA-Light-Ordner-Icon statt Tofu. Die spezifischen Mappings
   darunter gewinnen (gleiche Spezifität, später im Code). */
#epkb-modular-main-page-container .epkb-cat-icon::before { content: "\f07b" !important; } /* folder */

#epkb-modular-main-page-container .epkbfa-table::before      { content: "\f0ce" !important; }
#epkb-modular-main-page-container .epkbfa-cubes::before      { content: "\f1b3" !important; }
#epkb-modular-main-page-container .epkbfa-sitemap::before    { content: "\f0e8" !important; }
#epkb-modular-main-page-container .epkbfa-user::before,
#eckb-article-page-container-v2 .epkbfa-user::before         { content: "\f007" !important; }
#epkb-modular-main-page-container .epkbfa-area-chart::before { content: "\f1fe" !important; } /* chart-area */
#epkb-modular-main-page-container .epkbfa-pencil::before     { content: "\f303" !important; } /* pencil */
/* Dieselben Kategorie-Icons auch in der Artikel-Sidebar (falls das
   Plugin-Setting „Icons in der Seitenleiste" aktiv ist). */
#epkb-sidebar-container-v2 .epkbfa-table::before      { content: "\f0ce" !important; }
#epkb-sidebar-container-v2 .epkbfa-cubes::before      { content: "\f1b3" !important; }
#epkb-sidebar-container-v2 .epkbfa-sitemap::before    { content: "\f0e8" !important; }
#epkb-sidebar-container-v2 .epkbfa-user::before       { content: "\f007" !important; }
#epkb-sidebar-container-v2 .epkbfa-area-chart::before { content: "\f1fe" !important; }
#epkb-sidebar-container-v2 .epkbfa-pencil::before     { content: "\f303" !important; }

/* FAQ-Toggle. */
#epkb-modular-main-page-container .epkbfa-angle-down::before { content: "\f107" !important; }
#epkb-modular-main-page-container .epkbfa-angle-up::before   { content: "\f106" !important; }

/* Artikel-Liste: Dokument-Icon für Artikel, Ordner/Pfeil für Unterkategorien
   (eigener Font `ep_font_icon_*`) – alle als schlichtes FA-Light-Icon. */
#epkb-modular-main-page-container .ep_font_icon_document::before,
#eckb-article-page-container-v2 .ep_font_icon_document::before { content: "\f15c" !important; } /* file-lines */
#epkb-modular-main-page-container .ep_font_icon_folder::before      { content: "\f07b" !important; } /* folder */
#epkb-modular-main-page-container .ep_font_icon_right_arrow::before { content: "\f101" !important; } /* angles-right */
/* Breadcrumb-Trenner auf der Artikelseite. */
/* Chevron-Glyph konstant (beide Plugin-Varianten → angle-right); die
   Drehung nach unten steuert kb.js über die Klasse .wp-chevron-down. */
#eckb-article-page-container-v2 .ep_font_icon_arrow_carrot_right::before,
#eckb-article-page-container-v2 .ep_font_icon_arrow_carrot_down::before,
#eckb-article-page-container-v2 .eckb-breadcrumb-link-icon::before { content: "\f105" !important; } /* angle-right */
#eckb-article-page-container-v2 #epkb-sidebar-container-v2 .epkb_sidebar_expand_category_icon.wp-chevron-down {
	transform: rotate(90deg) !important;
}

/* Artikelseite: Navigation & Meta. */
#eckb-article-page-container-v2 .epkbfa-caret-right::before      { content: "\f105" !important; } /* angle-right (schlanker als caret) */
#epkb-sidebar-container-v2 .epkbfa-caret-right::before,
#epkb-sidebar-container-v2 .epkb_sidebar_expand_category_icon::before { content: "\f105" !important; }
#eckb-article-page-container-v2 .epkbfa-calendar::before         { content: "\f133" !important; } /* calendar */
#eckb-article-page-container-v2 .epkbfa-pencil-square-o::before  { content: "\f044" !important; } /* pen-to-square */

/* ═══════════════════════════════════════════════════════════════
   Artikel-Feedback  „War dieser Artikel hilfreich?"
   (nach </main>, vor der Support-CTA – eigenes, plugin-unabhängiges Widget)
   ═══════════════════════════════════════════════════════════════ */
.kb-feedback {
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	max-width: 1180px;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding-inline: clamp(16px, 4vw, 40px);
}
.kb-feedback__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	padding: 1.5rem 1.75rem;
	background: #F8F9FB;
	border: 1px solid #E6E8EC;
	border-radius: 14px;
	text-align: center;
}
.kb-feedback__q {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: #1B2026;
}
.kb-feedback__actions { display: inline-flex; gap: .6rem; }
.kb-feedback__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1.15rem;
	font-family: "Inter", sans-serif;
	font-size: .95rem;
	font-weight: 600;
	color: #1B4F78;
	background: #fff;
	border: 1px solid #D2D7DE;
	border-radius: 10px;
	cursor: pointer;
	transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.kb-feedback__btn i { font-size: .95rem; }
@media (hover: hover) and (pointer: fine) {
	.kb-feedback__btn:hover {
		border-color: var(--wp-azure-400, #2D6A9F);
		color: var(--wp-azure-500, #1B4F78);
		background: #fff;
	}
}
.kb-feedback__btn:active { transform: scale(0.97); }
.kb-feedback__btn:disabled { opacity: .5; cursor: default; }
.kb-feedback.is-pending .kb-feedback__btn { pointer-events: none; opacity: .6; }

/* Danke-Zustand: Buttons weichen der Bestätigung. */
.kb-feedback.is-done .kb-feedback__actions { display: none; }
.kb-feedback__thanks {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: .98rem;
	font-weight: 600;
	color: var(--wp-success, #2E7D52);
}
.kb-feedback__thanks i { color: var(--wp-success, #2E7D52); }
.kb-feedback.is-error .kb-feedback__inner { border-color: var(--wp-red-300, #CC2529); }

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
	#epkb-modular-main-page-container .epkb-three-col,
	#epkb-modular-main-page-container #epkb-ml-article-list-basic-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 640px) {
	#epkb-modular-main-page-container .epkb-three-col,
	#epkb-modular-main-page-container #epkb-ml-article-list-basic-layout {
		grid-template-columns: 1fr !important;
	}
	#epkb-modular-main-page-container #epkb-ml__module-search {
		border-radius: 18px !important;
	}
	#epkb-modular-main-page-container .epkb-ml-search-box__input { height: 52px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced Motion – Bewegung raus, Verständlichkeit bleibt
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.wp-js #epkb-modular-main-page-container .epkb-top-category-box,
	.wp-js #epkb-modular-main-page-container #epkb-ml-article-list-basic-layout > *,
	.wp-js #epkb-modular-main-page-container .epkb-faqs__item-container {
		opacity: 1;
		transform: none;
		animation: none;
	}
	#epkb-modular-main-page-container * {
		transition-duration: 0.01ms !important;
	}
}