/*
Theme Name:   Weiterbildung PH
Theme URI:    https://weiterbildung-ph.de/
Description:  Magazin-Design für weiterbildung-ph.de auf Basis von GeneratePress. Redaktionelles Layout für Lehrkräftefortbildung, Hochschuldidaktik und berufliche Weiterbildung — selbst gehostete Schriften, keine externen Ressourcen.
Author:       Weiterbildung PH
Template:     generatepress
Version:      2.0.0
Text Domain:  weiterbildung-ph
*/

/* =========================================================================
   1. Design-Token
   -------------------------------------------------------------------------
   Petrol und Terrakotta bleiben, bekommen aber eine vollständige Tonleiter.
   Der Grund: Tiefe entsteht auf den Referenzseiten durch getönte Flächen und
   sehr wenige Schatten — nicht durch einen 1-px-Rahmen um jeden Kasten. Dafür
   braucht es Zwischentöne, die es vorher schlicht nicht gab.
   ========================================================================= */

:root {
	/* --- Petrol: Struktur, Verweise, dunkle Flächen ---------------------- */
	--p-50:  #f2f7fa;
	--p-100: #e2edf3;
	--p-200: #c3dbe7;
	--p-300: #93bed3;
	--p-400: #5b9bb8;
	--p-500: #35789a;
	--p-600: #256080;
	--p-700: #1c4e69;
	--p-800: #14425c;
	--p-900: #0d2c3e;
	--p-950: #071e2b;

	/* --- Terrakotta: Handlung, Eyebrow, Fokus — sparsam ------------------ */
	--a-50:  #fdf5f1;
	--a-100: #fbe9e0;
	--a-200: #f6d0bd;
	--a-300: #eeae8e;
	--a-400: #e2855b;
	--a-500: #d26936;
	--a-600: #c0561f;
	--a-650: #b04d1b;
	--a-700: #9f4418;
	--a-800: #7f3715;
	--a-900: #682f15;

	/* --- Neutrale, leicht ins Petrol gezogen ----------------------------- */
	--ink-950: #0b1620;
	--ink-900: #16202b;
	--ink-800: #263341;
	--ink-700: #33414f;
	--ink-600: #4a5765;
	--ink-500: #64717f;
	/* --ink-400 erreicht auf Weiß nur 3,0:1 und ist deshalb NUR für Linien
	   und Flächen zugelassen, niemals für Text. */
	--ink-400: #8b96a2;

	--line-300: #cbd4dc;
	--line-200: #dfe6ec;
	--line-100: #e9eef2;

	--sf-0:   #ffffff;
	--sf-50:  #f5f8fa;
	--sf-100: #eef3f6;

	/* --- Semantische Namen: nur diese in den Komponenten benutzen -------- */
	--c-text:        var(--ink-900);
	--c-text-soft:   var(--ink-600);
	--c-text-mute:   var(--ink-500);
	--c-link:        var(--p-800);
	--c-link-hover:  var(--a-700);
	--c-action:      var(--a-650);
	--c-action-hov:  var(--a-700);
	--c-action-act:  var(--a-800);
	--c-eyebrow:     var(--a-700);
	--c-border:      var(--line-200);
	--c-border-hov:  var(--line-300);
	--c-hairline:    var(--line-100);
	--c-surface:     var(--sf-0);
	--c-surface-alt: var(--sf-50);

	--c-onDark:      #ffffff;
	--c-onDark-soft: rgba(255, 255, 255, .82);
	--c-onDark-mute: rgba(255, 255, 255, .66);
	--c-onDark-line: rgba(255, 255, 255, .18);

	--grad-hero: linear-gradient(160deg, #14425c 0%, #0d2c3e 55%, #071e2b 100%);

	/* --- Schrift ---------------------------------------------------------
	   Drei Familien mit klar getrennten Aufgaben (siehe assets/MANIFEST.md):
	   Jakarta trägt die Marke in den Überschriften, Inter die dichte
	   Oberfläche der Kurssuche, Source Serif den redaktionellen Fließtext. */
	--wbph-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--wbph-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--wbph-serif:   'Source Serif 4', Georgia, 'Iowan Old Style', Times, serif;

	/* Größe / Zeilenhöhe / Gewicht als fertige font-Kurzschrift. */
	--t-display: 800 clamp(2.125rem, 1.25rem + 2.7vw, 3.5rem)/1.07 var(--wbph-display);
	--t-h1:      700 clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem)/1.13 var(--wbph-display);
	--t-h2:      700 clamp(1.625rem, 1.35rem + .9vw, 2rem)/1.18 var(--wbph-display);
	--t-h3:      700 clamp(1.3125rem, 1.2rem + .4vw, 1.5rem)/1.25 var(--wbph-display);
	--t-h4:      700 clamp(1.125rem, 1.05rem + .25vw, 1.25rem)/1.35 var(--wbph-display);
	--t-lead:    400 clamp(1.0625rem, 1rem + .35vw, 1.3125rem)/1.55 var(--wbph-sans);
	--t-body:    400 1.0625rem/1.65 var(--wbph-sans);
	--t-body-sm: 400 1rem/1.6 var(--wbph-sans);
	--t-ui:      500 .9375rem/1.45 var(--wbph-sans);
	--t-meta:    500 .875rem/1.43 var(--wbph-sans);
	--t-micro:   700 .75rem/1.33 var(--wbph-sans);

	--ls-display: -.028em;
	--ls-tight:   -.02em;
	--ls-snug:    -.012em;
	--ls-micro:   .09em;

	/* --- Raster ----------------------------------------------------------- */
	--wbph-maxw:   1200px;
	--wbph-gutter: 40px;

	/* --- Radien: eine Leiter, kein Einheitswert --------------------------- */
	--r-xs:   6px;
	--r-sm:   10px;
	--r-md:   14px;
	--r-lg:   20px;
	--r-xl:   28px;
	--r-pill: 999px;

	/* --- Höhenstaffel, petrolgetönt statt schwarz ------------------------- */
	--e-1: 0 1px 2px rgba(11, 22, 32, .05), 0 1px 3px rgba(11, 22, 32, .06);
	--e-2: 0 2px 4px rgba(11, 22, 32, .05), 0 6px 12px rgba(11, 22, 32, .07);
	--e-3: 0 8px 16px rgba(11, 22, 32, .07), 0 20px 32px rgba(11, 22, 32, .09);
	--e-focus: 0 0 0 3px rgba(192, 86, 31, .34);

	--tr-fast: 140ms cubic-bezier(.2, .6, .2, 1);
	--tr-base: 200ms cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 1199px) {
	:root { --wbph-gutter: 32px; }
}

@media (max-width: 768px) {
	:root { --wbph-gutter: 20px; }
}

/* =========================================================================
   2. Grundlagen
   ========================================================================= */

html {
	/* Verhindert den Layout-Sprung beim Wechsel zwischen kurzen und langen Seiten. */
	scrollbar-gutter: stable;
	overflow-x: clip;
}

body {
	font: var(--t-body);
	color: var(--c-text);
	background: var(--c-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wbph-display);
	color: var(--c-text);
	text-wrap: balance;
}

/* Zeilenabstände am Raster, nicht an der Schriftgröße: em-basierte
   Überschriften-Abstände auf einer clamp()-Größe ergeben je Viewport einen
   anderen Rhythmus — genau das ließ die Seite unruhig wirken. */
h1 { font: var(--t-h1); letter-spacing: var(--ls-tight); margin: 0 0 20px; }
h2 { font: var(--t-h2); letter-spacing: var(--ls-tight); margin: 56px 0 20px; }
h3 { font: var(--t-h3); letter-spacing: var(--ls-snug); margin: 40px 0 12px; }
h4 { font: var(--t-h4); letter-spacing: var(--ls-snug); margin: 32px 0 10px; }

p { text-wrap: pretty; }

a {
	color: var(--c-link);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color var(--tr-fast);
}

a:hover,
a:focus {
	color: var(--c-link-hover);
}

/* Sichtbarer Fokus für Tastaturbedienung (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--a-600);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

img {
	max-width: 100%;
	height: auto;
}

/* Icons erben die Textfarbe und sitzen auf der Grundlinie. */
.wbph-icon {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	vertical-align: -.16em;
	fill: none;
	stroke: currentColor;
}

/* Der Inhaltsbereich hat in GeneratePress nur auf Einzelseiten eine
   Innenkante. Auf Listenseiten fehlte sie — die Karten standen 40 px weiter
   links als das Logo darüber. */
.home main.site-main,
.blog main.site-main,
.archive main.site-main,
.search main.site-main {
	padding-inline: var(--wbph-gutter);
	padding-block: 0 24px;
}

/* =========================================================================
   3. Bedienelemente: Schaltflächen, Felder, Chips
   ========================================================================= */

.wbph-btn,
.wbph-ks__form button,
.wbph-ks__submit,
.wbph-ks__apply,
.wbph-dirfilter button,
.wbph-newsletter button,
.wbph-sidebar-cta,
.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--c-action);
	color: #fff;
	font: 600 1rem/1.25 var(--wbph-sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--tr-fast), transform var(--tr-fast);
}

.wbph-btn:hover,
.wbph-ks__form button:hover,
.wbph-ks__submit:hover,
.wbph-ks__apply:hover,
.wbph-dirfilter button:hover,
.wbph-newsletter button:hover,
.wbph-sidebar-cta:hover,
.entry-content .wp-block-button__link:hover {
	background: var(--c-action-hov);
	color: #fff;
}

.wbph-btn:active,
.wbph-ks__form button:active,
.wbph-ks__submit:active,
.wbph-ks__apply:active {
	background: var(--c-action-act);
	transform: translateY(1px);
}

/* Zweitrangig: Rahmen statt Fläche. Gleiche Höhe, damit nichts springt. */
.wbph-btn--sek,
.wbph-ks__prev,
.wbph-ks__next,
.wbph-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--c-border-hov);
	border-radius: var(--r-sm);
	background: transparent;
	color: var(--p-800);
	font: 600 .9375rem/1.25 var(--wbph-sans);
	text-decoration: none;
	transition: background-color var(--tr-fast), border-color var(--tr-fast);
}

.wbph-btn--sek:hover,
.wbph-ks__prev:hover,
.wbph-ks__next:hover,
.wbph-pagination .page-numbers:hover {
	background: var(--p-50);
	border-color: var(--p-300);
	color: var(--p-800);
}

/* Textschaltfläche ohne Fläche — für „Alle Beiträge" und Ähnliches. */
.wbph-btn--geist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 .9375rem/1.25 var(--wbph-sans);
	color: var(--p-800);
	text-decoration: none;
}

.wbph-btn--geist:hover { color: var(--a-700); }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
select,
textarea {
	font: var(--t-body-sm);
	color: var(--c-text);
	background: #fff;
	border: 1px solid var(--c-border-hov);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: var(--p-400);
	box-shadow: var(--e-focus);
	outline: none;
}

::placeholder { color: var(--ink-500); opacity: 1; }

/* Das Standard-Suchformular von WordPress/GeneratePress taucht in der
   „Nichts gefunden"-Vorlage und in Widgets auf. Es bekommt dieselbe Form wie
   alles andere, sonst sitzt dort ein grauer Fremdkörper. */
.search-form,
.wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
	max-width: 420px;
}

.search-form input[type="search"],
.wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
}

.search-form .search-submit,
.wp-block-search__button {
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--c-action);
	color: #fff;
	font: 600 .9375rem/1.25 var(--wbph-sans);
	cursor: pointer;
}

.search-form .search-submit:hover,
.wp-block-search__button:hover { background: var(--c-action-hov); }

/* Zahlen, die sich ändern können, laufen immer tabellarisch — der billigste
   „teuer"-Effekt, den wir haben. */
.wbph-card__meta,
.wbph-entry-meta,
.wbph-ks__optnum,
.wbph-ks__count,
.wbph-ks__termine,
.wbph-ks__pagenum,
.wbph-ks__badge,
.wbph-zahl,
.wbph-pagination {
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   4. Kopfbereich und Navigation
   ========================================================================= */

.site-header {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
	position: sticky;
	top: 0;
	z-index: 100;
	/* Bewusst NUR ein Schatten beim Scrollen. Kein transform, kein filter,
	   kein backdrop-filter auf der klebenden Kopfzeile — jedes davon erzeugt
	   einen neuen Containing Block und bringt sie zum Zittern. */
	transition: box-shadow var(--tr-base);
}

.site-header.is-gescrollt { box-shadow: var(--e-1); }

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.site-header .site-logo {
	display: flex;
	align-items: center;
	margin: 0;
}

.site-header .site-logo svg {
	display: block;
	height: 40px;
	width: auto;
}

/* Die Wortmarke im Logo-SVG war auf Georgia gesetzt. Inline eingebettetes SVG
   erbt die Schriften des Dokuments — deshalb lässt sie sich hier auf die
   Hausschrift umstellen, ohne die Datei anzufassen. */
.site-header .site-logo svg text {
	font-family: var(--wbph-display);
	font-size: 21px;
	letter-spacing: -.6px;
}

.site-header .site-logo img { max-height: 44px; width: auto; }

.main-title { font-family: var(--wbph-display); }

.main-navigation {
	background: none;
	border: 0;
	flex: 0 1 auto;
	min-height: 0;
}

.main-navigation .inside-navigation {
	padding: 0;
	max-width: none;
}

.main-navigation .main-nav ul li a {
	color: var(--ink-800);
	font: 500 .9375rem/1 var(--wbph-sans);
	letter-spacing: 0;
	padding: 12px 14px;
	border-radius: var(--r-sm);
	transition: color var(--tr-fast), background-color var(--tr-fast);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	background: var(--p-50);
	color: var(--p-800);
	box-shadow: none;
}

/* Die Kurssuche ist die Kernfunktion — im Menü als Schaltfläche. */
.main-navigation .main-nav ul li.menu-item-51 > a {
	background: var(--c-action);
	color: #fff;
	border-radius: var(--r-sm);
	margin-left: 10px;
	padding: 12px 18px;
	font-weight: 600;
}

.main-navigation .main-nav ul li.menu-item-51:hover > a,
.main-navigation .main-nav ul li.menu-item-51.current-menu-item > a {
	background: var(--c-action-hov);
	color: #fff;
}

.main-navigation .main-nav ul ul {
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--e-2);
	border: 1px solid var(--c-border);
}

.main-navigation .main-nav ul ul li a {
	background: #fff;
	color: var(--ink-800);
	font-size: .9375rem;
	border-radius: 0;
}

.site-header .menu-toggle {
	color: var(--ink-800);
	background: transparent;
	padding: 10px 12px;
	border-radius: var(--r-sm);
}

.site-header .menu-toggle:hover { background: var(--p-50); }

@media (max-width: 768px) {
	.site-header .inside-header { gap: 8px; min-height: 60px; }
	.site-header .site-logo svg { height: 32px; }

	.main-navigation .main-nav ul li a {
		padding: 14px 16px;
		border-radius: 0;
	}

	.main-navigation .main-nav ul li.menu-item-51 > a {
		margin: 8px 16px;
		text-align: center;
		justify-content: center;
	}
}

/* =========================================================================
   5. Seitenkopf-Bänder (randlos) und die Blattkante darunter
   ========================================================================= */

.wbph-band {
	position: relative;
	background: var(--grad-hero);
	color: var(--c-onDark);
	isolation: isolate;
}

.wbph-band__inner {
	max-width: var(--wbph-maxw);
	margin-inline: auto;
	padding-inline: var(--wbph-gutter);
}

.wbph-band--hero .wbph-band__inner { padding-block: 76px 96px; }
.wbph-band--archiv .wbph-band__inner { padding-block: 56px 76px; }

/* Die weiße Blattkante zieht die Inhaltsfläche über das Band — ohne ein
   einziges zusätzliches Bild. Sie liegt im Band, damit der Radius sicher auf
   der Bandkante sitzt, egal wie hoch der Inhalt darunter ist. */
.wbph-band__saum {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--r-xl);
	background: var(--c-surface);
	border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.wbph-band__eyebrow {
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--a-300);
	margin: 0 0 14px;
}

.wbph-band__titel {
	font: var(--t-display);
	letter-spacing: var(--ls-display);
	color: #fff;
	max-width: 20ch;
	margin: 0;
}

.wbph-band--archiv .wbph-band__titel {
	font: var(--t-h1);
	letter-spacing: var(--ls-tight);
	max-width: 24ch;
}

.wbph-band__lead {
	font: var(--t-lead);
	color: var(--c-onDark-soft);
	max-width: 58ch;
	margin: 16px 0 0;
}

.wbph-band__lead p:last-child { margin-bottom: 0; }

/* Der Startseiten-Hero trägt das Kopfmotiv. Die ruhige Zone der Grafik liegt
   in der oberen Hälfte, die Terrakotta-Linie bei 56 % — mit einem flacheren
   Band als 2,29:1 schneidet der Mittenausschnitt genau durch sie hindurch,
   deshalb 28 % statt center. */
.wbph-band--hero {
	background:
		var(--grad-hero),
		#0d2c3e;
}

.wbph-band--hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/img/art/art-hero.svg") center 20% / cover no-repeat;
	z-index: -1;
}

/* Schleier über der Grafik. Ohne ihn stehen Vorspann und Pillen stellenweise
   auf den helleren Wellenflächen des Motivs und rutschen auf 4,2:1 — knapp
   unter AA. Links, wo die Schrift steht, ist der Schleier am dichtesten,
   rechts bleibt das Motiv sichtbar. */
.wbph-band--hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(7, 30, 43, .82) 0%, rgba(7, 30, 43, .56) 60%, rgba(7, 30, 43, .30) 100%),
		linear-gradient(180deg, rgba(7, 30, 43, .22), rgba(7, 30, 43, .55));
	z-index: -1;
}

/* Das Rubrikmotiv liegt als ruhige Textur hinter dem Archivkopf. */
.wbph-band--archiv::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--wbph-art);
	background-size: cover;
	background-position: center 30%;
	opacity: .5;
	z-index: -1;
}

/* Schleier über dem Motiv: ohne ihn steht die helle Terrakotta-Kurve der
   Grafik stellenweise unter dem Text, und die 12-px-Rubrikzeile fällt dort
   unter 4,5:1. Links, wo die Schrift steht, ist der Schleier am dichtesten. */
.wbph-band--archiv::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(7, 30, 43, .93) 0%, rgba(7, 30, 43, .78) 48%, rgba(7, 30, 43, .22) 100%);
	z-index: -1;
}

/* Die Suche steht als eigenes, helles Feld über dem Band — sie ist ein
   Werkzeug, kein Formularfeld am Seitenrand. */
.wbph-suchkarte {
	background: #fff;
	border-radius: var(--r-lg);
	padding: 20px;
	box-shadow: var(--e-3);
	margin-top: 32px;
	max-width: 780px;
	color: var(--c-text);
}

.wbph-band__pillen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
}

.wbph-band__pillenlabel {
	font: var(--t-meta);
	color: var(--c-onDark-mute);
	margin-right: 4px;
}

.wbph-pille {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	border: 1px solid var(--c-onDark-line);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font: var(--t-meta);
	text-decoration: none;
	transition: background-color var(--tr-fast), border-color var(--tr-fast);
}

.wbph-pille:hover {
	background: rgba(255, 255, 255, .20);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
}

@media (max-width: 768px) {
	.wbph-band--hero .wbph-band__inner { padding-block: 48px 64px; }
	.wbph-band--archiv .wbph-band__inner { padding-block: 36px 56px; }
	.wbph-suchkarte { padding: 16px; margin-top: 24px; }
	.wbph-band__titel { max-width: none; }
}

/* =========================================================================
   6. Abschnitte
   ========================================================================= */

.wbph-abschnitt { margin-block: 96px; }
.wbph-abschnitt:first-of-type { margin-top: 72px; }
.wbph-abschnitt:last-of-type { margin-bottom: 96px; }

.wbph-abschnitt__kopf { margin-bottom: 32px; }

/* Kein Haarstrich unter jeder h2 mehr: der Abstand trennt, nicht die Linie.
   Die Unterstreichung war das deutlichste „bieder"-Signal der alten Seite. */
.wbph-abschnitt__titel {
	font: var(--t-h2);
	letter-spacing: var(--ls-tight);
	margin: 0;
}

.wbph-abschnitt__lead {
	font: var(--t-lead);
	color: var(--c-text-soft);
	max-width: 62ch;
	margin: 12px 0 0;
}

.wbph-archive-intro {
	max-width: 62ch;
	margin-bottom: 32px;
}

.wbph-archive-intro p {
	color: var(--c-text-soft);
	font: var(--t-lead);
}

@media (max-width: 768px) {
	.wbph-abschnitt { margin-block: 56px; }
	.wbph-abschnitt:first-of-type { margin-top: 40px; }
	.wbph-abschnitt__kopf { margin-bottom: 24px; }
}

/* =========================================================================
   7. Beitragskarten
   ========================================================================= */

.wbph-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

.wbph-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--e-1);
	transition: box-shadow var(--tr-base), transform var(--tr-base), border-color var(--tr-fast);
}

@media (hover: hover) {
	.wbph-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--e-2);
		border-color: var(--c-border-hov);
	}

	.wbph-card:hover .wbph-card__title a { color: var(--p-700); }
}

/* Es gibt keine Beitragsbilder und (bewusst) keine Stockfotografie. Statt
   einer leeren Fläche trägt jede Rubrik ihr eigenes abstraktes Motiv. */
.wbph-card__media {
	position: relative;
	height: 128px;
	background: var(--sf-100);
	overflow: hidden;
}

.wbph-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Es gibt nur drei Motive. Stehen zwei Beiträge derselben Rubrik nebeneinander,
   sähen die Karten identisch aus — deshalb bekommt jede Rasterposition einen
   anderen Ausschnitt desselben Motivs. Das Motiv ist breiter als die Karte,
   beschnitten wird also senkrecht; nur der zweite Wert wirkt. */
.wbph-cardgrid > *:nth-child(3n+2) .wbph-card__media img { object-position: 50% 72%; }
.wbph-cardgrid > *:nth-child(3n)   .wbph-card__media img { object-position: 50% 24%; }
.wbph-cardgrid > *:nth-child(6n+4) .wbph-card__media img { object-position: 50% 92%; }

/* Der senkrechte Versatz allein reicht nicht: die Motive sind so ruhig, dass
   zwei Karten derselben Rubrik trotzdem gleich aussehen. Gespiegelt wird der
   Unterschied auf einen Blick sichtbar — die Motive sind bewusst nicht
   seitenrichtig gedacht, ein Spiegeln verändert ihre Aussage nicht. */
.wbph-cardgrid > *:nth-child(2n) .wbph-card__media img { transform: scaleX(-1); }
.wbph-cardgrid > *:nth-child(4n+3) .wbph-card__media img { transform: scaleY(-1); }

/* Im Rubrikarchiv gehören alle Beiträge derselben Rubrik an — dort stünde
   sechsmal dasselbe Motiv untereinander, und das Band darüber trägt es
   ohnehin schon. Die Karten laufen hier rein typografisch. */
.category .wbph-card__media { display: none; }
.category .wbph-card__body { padding-top: 22px; }

.wbph-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.wbph-card__cat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--c-eyebrow);
	margin: 0;
}

/* Der Rubrikverweis muss über der kartenweiten Verweisfläche liegen. */
.wbph-card__cat a {
	position: relative;
	z-index: 1;
	color: inherit;
	text-decoration: none;
}

.wbph-card__cat a:hover { text-decoration: underline; }

.wbph-card__badge {
	background: var(--a-100);
	color: var(--a-800);
	border-radius: var(--r-pill);
	padding: 3px 9px;
	letter-spacing: .06em;
}

.wbph-card__title {
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wbph-card__title a {
	color: var(--ink-900);
	text-decoration: none;
	transition: color var(--tr-fast);
}

/* Die ganze Karte ist anklickbar — ein einziger Anker, kein Skript. */
.wbph-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wbph-card__excerpt {
	color: var(--c-text-soft);
	font: var(--t-body-sm);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wbph-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 0;
	padding-top: 14px;
	margin-top: auto;
	font: var(--t-meta);
	color: var(--c-text-mute);
	border-top: 1px solid var(--c-hairline);
}

/* Der Überblicksbeitrag hebt sich über das Abzeichen ab, nicht mehr über
   einen 4-px-Balken an der Oberkante. */
.wbph-card.is-pillar { border-color: var(--p-200); }

/* =========================================================================
   8. Themenstränge (Startseite)
   ========================================================================= */

.wbph-tracks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

.wbph-track {
	display: flex;
	flex-direction: column;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--e-1);
	transition: box-shadow var(--tr-base), border-color var(--tr-fast);
}

@media (hover: hover) {
	.wbph-track:hover {
		box-shadow: var(--e-2);
		border-color: var(--c-border-hov);
	}
}

.wbph-track__art {
	height: 120px;
	overflow: hidden;
}

.wbph-track__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wbph-track__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}

.wbph-track__cat {
	margin: 0 0 10px;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
}

.wbph-track__cat a {
	text-decoration: none;
	color: var(--c-eyebrow);
}

.wbph-track__cat a:hover { text-decoration: underline; }

.wbph-track__lead {
	margin: 0 0 8px;
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
	font-family: var(--wbph-display);
}

.wbph-track__lead a {
	color: var(--ink-900);
	text-decoration: none;
}

.wbph-track__lead a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-track__excerpt {
	margin: 0 0 16px;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

/* Die Vertiefungen als Zeilen mit Haarstrich und nachlaufendem Pfeil — die
   erwachsene Fassung der „Zum Stöbern"-Kachel der Referenzseite. */
.wbph-track__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-top: 1px solid var(--c-hairline);
}

.wbph-track__list li { margin: 0; }

.wbph-track__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-hairline);
	font: var(--t-ui);
	color: var(--ink-800);
	text-decoration: none;
	transition: color var(--tr-fast);
}

.wbph-track__list a:hover { color: var(--p-700); }
.wbph-track__list a:hover span { text-decoration: underline; }

.wbph-track__pfeil {
	color: var(--ink-400);
	transition: transform var(--tr-fast), color var(--tr-fast);
}

.wbph-track__list a:hover .wbph-track__pfeil {
	color: var(--a-700);
	transform: translateX(2px);
}

.wbph-track__more {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 .9375rem/1.25 var(--wbph-sans);
	text-decoration: none;
	color: var(--p-800);
}

.wbph-track__more:hover { color: var(--a-700); text-decoration: underline; }
.wbph-track__more:hover .wbph-icon { transform: translateX(2px); }
.wbph-track__more .wbph-icon { transition: transform var(--tr-fast); }

/* =========================================================================
   9. Einzelbeitrag
   ========================================================================= */

.single .entry-title,
.page .entry-title {
	font: var(--t-h1);
	letter-spacing: var(--ls-tight);
	margin: 0 0 16px;
	max-width: 22ch;
}

.single .entry-content,
.page .entry-content {
	max-width: 68ch;
}

/* Fließtext in der Serife: Beiträge sollen redaktionell wirken, die Kurssuche
   funktional. Das ist die einzige Stelle im ganzen Theme, an der eine Serife
   steht — deshalb ausdrücklich nur `.single`, nicht auch `.page`. Sonst
   erwischt sie die Kurssuche, und dichte Oberfläche in einer Werksschrift für
   Fließtext liest sich schlecht.
   `hyphens: auto` ist bei deutschen Komposita keine Kosmetik: ohne Trennung
   reißt „Weiterbildungsförderung" jede zweite Zeile auf. */
.single .entry-content {
	font-family: var(--wbph-serif);
	font-size: 1.1875rem;
	line-height: 1.68;
	hyphens: auto;
}

.single .entry-content > p:first-of-type {
	font-size: 1.3125rem;
	line-height: 1.6;
	color: var(--ink-800);
}

.single .entry-content h2,
.page .entry-content h2 { max-width: 28ch; }

.entry-meta {
	font: var(--t-meta);
	color: var(--c-text-mute);
	margin-bottom: 6px;
}

.entry-meta a { color: var(--c-text-mute); }

/* GeneratePress setzt unter jeden Beitrag „by admin". „admin" ist kein Autor,
   „by" ist nicht deutsch, und eine Verfasserzeile führt das Magazin bisher
   nicht. Das Datum daneben bleibt stehen — es ist eine echte Angabe. */
.single .entry-meta .byline { display: none; }

.wbph-entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	font: var(--t-meta);
	color: var(--c-text-mute);
	padding-bottom: 20px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--c-hairline);
}

.wbph-entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wbph-entry-meta__cat a {
	display: inline-flex;
	align-items: center;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--a-700);
	background: var(--a-50);
	border-radius: var(--r-pill);
	padding: 5px 11px;
	text-decoration: none;
}

.wbph-entry-meta__cat a:hover { background: var(--a-100); }

.entry-content a { color: var(--p-700); }
.entry-content a:hover { color: var(--a-700); }

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }

.entry-content li { margin-bottom: .5em; }

.entry-content blockquote {
	border-left: 3px solid var(--a-500);
	background: var(--sf-50);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	margin: 32px 0;
	padding: 20px 24px;
	font-family: var(--wbph-serif);
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--ink-800);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

/* Tabellen müssen auf dem Handy scrollen dürfen, statt das Layout zu sprengen. */
.entry-content .wp-block-table {
	overflow-x: auto;
	margin: 32px 0;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-family: var(--wbph-sans);
	font-size: .9375rem;
}

.entry-content th,
.entry-content td {
	border-bottom: 1px solid var(--c-hairline);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	background: var(--sf-50);
	font-weight: 600;
	font-size: .875rem;
	color: var(--ink-800);
	border-bottom: 1px solid var(--c-border);
}

.entry-content tbody tr:last-child td { border-bottom: 0; }

/* =========================================================================
   10. FAQ
   ========================================================================= */

.wbph-faq {
	margin-top: 56px;
	max-width: 68ch;
}

.wbph-faq__heading { margin-top: 0; }

.wbph-faq__item {
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	margin-bottom: 10px;
	background: #fff;
	transition: border-color var(--tr-fast), box-shadow var(--tr-base);
}

.wbph-faq__item[open] {
	border-color: var(--c-border-hov);
	box-shadow: var(--e-2);
}

.wbph-faq__q {
	cursor: pointer;
	padding: 16px 52px 16px 20px;
	font: 600 1.0625rem/1.45 var(--wbph-display);
	letter-spacing: var(--ls-snug);
	position: relative;
	list-style: none;
	border-radius: var(--r-md);
}

.wbph-faq__q::-webkit-details-marker { display: none; }

.wbph-faq__q::after {
	content: "+";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font: 400 1.5rem/1 var(--wbph-sans);
	color: var(--a-700);
}

.wbph-faq__item[open] .wbph-faq__q::after { content: "–"; }

.wbph-faq__a {
	padding: 0 20px 18px;
	color: var(--c-text-soft);
	font: var(--t-body-sm);
}

.wbph-faq__a p { margin: 0; }

/* =========================================================================
   11. Quellen
   ========================================================================= */

.wbph-quellen {
	margin-top: 56px;
	padding: 28px 28px 24px;
	background: var(--sf-50);
	border-radius: var(--r-md);
	max-width: 68ch;
	font-family: var(--wbph-sans);
}

.wbph-quellen__heading {
	margin-top: 0;
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
}

.wbph-quellen__intro {
	font: var(--t-meta);
	color: var(--c-text-mute);
	margin-bottom: 20px;
}

.wbph-quellen__list {
	margin: 0;
	padding-left: 1.3em;
	display: grid;
	gap: 16px;
}

.wbph-quellen__item {
	font: var(--t-body-sm);
	margin: 0;
}

.wbph-quellen__titel {
	display: block;
	font-weight: 600;
	color: var(--p-800);
}

.wbph-quellen__meta,
.wbph-quellen__belegt {
	display: block;
	color: var(--c-text-mute);
	font-size: .875rem;
}

.wbph-quellen__belegt {
	font-style: italic;
	margin-top: 2px;
}

/* =========================================================================
   12. Weiterführende Beiträge + Newsletter
   ========================================================================= */

/* Fußzeile des Beitrags: Rubrik und Blättern zum Nachbarbeitrag. Kam bisher
   ungestaltet aus GeneratePress und klebte als drei enge Zeilen zusammen. */
.single .entry-meta.footer-meta,
.single footer.entry-meta {
	display: grid;
	gap: 8px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--c-hairline);
	max-width: 68ch;
	font: var(--t-meta);
}

.single .post-navigation .nav-previous,
.single .post-navigation .nav-next {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
}

.single .post-navigation a {
	font: var(--t-ui);
	color: var(--ink-800);
	text-decoration: none;
}

.single .post-navigation a:hover { color: var(--p-700); text-decoration: underline; }
.single .post-navigation .gp-icon { color: var(--ink-500); }
.single .cat-links a { color: var(--c-text-mute); }

.wbph-related {
	margin-top: 56px;
	max-width: 68ch;
}

.wbph-related__heading {
	margin-top: 0;
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
}

.wbph-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--c-hairline);
}

.wbph-related__list li { margin: 0; }

.wbph-related__list a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-hairline);
	font: 500 1.0625rem/1.45 var(--wbph-sans);
	color: var(--ink-800);
	text-decoration: none;
}

.wbph-related__list a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-newsletter {
	margin-top: 40px;
	background: var(--sf-50);
	border-radius: var(--r-lg);
	padding: 32px;
	max-width: 68ch;
	font-family: var(--wbph-sans);
}

.wbph-newsletter__heading {
	margin: 0 0 8px;
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
}

.wbph-newsletter p {
	color: var(--c-text-soft);
	font: var(--t-body-sm);
}

.wbph-newsletter form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wbph-newsletter input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	min-height: 48px;
}
/* =========================================================================
   13. Kurssuche
   -------------------------------------------------------------------------
   Zwei Spalten: 300 px Filter, der Rest für die Treffer. Die Seitenleiste des
   Themes ist auf dieser Seite abgeschaltet (functions.php, Abschnitt 9) —
   vorher standen dort 360 px fremde Widgets neben 700 px Ergebnissen.

   Alles hier funktioniert ohne JavaScript: <details> klappt auf, das Formular
   schickt ab, die Chips sind Verweise, `position: sticky` hält die Filter im
   Blick. Das ist Absicht und keine Notlösung.
   ========================================================================= */

.wbph-ks {
	font-family: var(--wbph-sans);
	font-size: 1.0625rem;
}

/* Die Kurssuche braucht die volle Breite — die 68-ch-Zeilenlänge des
   Fließtextes gilt für Artikel, nicht für eine Ergebnisliste. */
.entry-content:has(.wbph-ks) {
	max-width: none;
	font-family: var(--wbph-sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	hyphens: manual;
}

/* Die Breite gilt nur für die Suche selbst. Der redaktionelle Vorspann davor
   behält seine Zeilenlänge — 130 Zeichen liest niemand. */
.entry-content:has(.wbph-ks) > *:not(.wbph-ks) {
	max-width: 68ch;
}

.entry-content:has(.wbph-ks) > .wbph-ks { margin-top: 36px; }

.wbph-ks__heading {
	font: var(--t-h2);
	letter-spacing: var(--ls-tight);
	margin: 0 0 24px;
}

.wbph-ks__icon {
	width: 16px;
	height: 16px;
	flex: none;
}

/* --- Suchband ------------------------------------------------------------
   Ein eigenes Farbfeld statt eines grauen Kastens: die Suche ist das Produkt
   dieser Seite, nicht ein Formular am Rand. */

.wbph-ks__band {
	position: relative;
	isolation: isolate;
	color: #fff;
	/* Rückfallfarbe: wenn das Pseudoelement unten je ausfällt, steht der weiße
	   Text immer noch auf Petrol und nicht auf Weiß. */
	background-color: var(--p-900);
	padding: 44px 0 52px;
	margin-top: 8px;
}

/* Randlos über die ganze Seite, ohne die Seite breiter zu machen: die Fläche
   ist ein absolut gesetztes Pseudoelement, das aus dem Inhaltscontainer
   heraustritt. `html { overflow-x: clip }` fängt die paar Pixel ab, die
   100vw wegen der reservierten Scrollleiste zu viel misst — ein waagerechter
   Rollbalken kann dadurch nicht entstehen. */
.wbph-ks__band::before {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: var(--grad-hero);
	z-index: -1;
}

.wbph-ks__bandinner {
	max-width: 860px;
}

.wbph-ks__headline {
	color: #fff;
	font: var(--t-h1);
	letter-spacing: var(--ls-tight);
	margin: 0 0 20px;
	max-width: 22ch;
}

/* Die Trefferzahl IST die Nachricht — sie steht deshalb tabellarisch und
   einen Tick heller als der Rest der Zeile. */
.wbph-ks__headlinenum {
	font-variant-numeric: tabular-nums;
	color: var(--a-300);
}

.wbph-ks__bandnote {
	margin: 12px 0 0;
	font: var(--t-meta);
	color: var(--c-onDark-mute);
}

/* Das weiße Blatt hebt sich unter dem Band ab. */
.wbph-ks__sheet { padding-top: 32px; }

/* --- Suchformular -------------------------------------------------------- */

.wbph-ks__form { margin: 0; }

.wbph-ks__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
}

.wbph-ks__field {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wbph-ks__field span {
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--c-text-mute);
}

.wbph-ks__band .wbph-ks__field span { color: var(--c-onDark-mute); }

.wbph-ks__field input {
	min-height: 56px;
	border-radius: var(--r-md);
	border-color: transparent;
	font-size: 1.0625rem;
	padding: 0 18px;
	width: 100%;
}

.wbph-suchkarte .wbph-ks__field input { border-color: var(--c-border); }

.wbph-ks__submit { min-height: 56px; padding: 0 28px; }

.wbph-ks__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font: var(--t-ui);
	color: var(--c-text-soft);
}

.wbph-ks__check input { accent-color: var(--p-800); width: 18px; height: 18px; }

/* Der Einstieg ohne Suchwort: Band, darunter der Hinweis. */
.wbph-ks--einstieg + .wbph-ks__hint,
.wbph-ks__hint {
	margin-top: 20px;
	font: var(--t-meta);
	color: var(--c-text-mute);
}

.wbph-suchkarte .wbph-ks__hint { margin: 12px 0 0; }

/* --- Zweispaltiges Raster ------------------------------------------------ */

.wbph-ks__grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Die Filterspalte bleibt beim Blättern stehen — reines CSS. */
.wbph-ks__filters {
	position: sticky;
	top: 92px;
	align-self: start;
	max-height: calc(100vh - 112px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	padding-right: 2px;
}

.wbph-ks__filterhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.wbph-ks__filtertitle {
	margin: 0;
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
	font-family: var(--wbph-display);
}

.wbph-ks__reset {
	font: var(--t-meta);
	color: var(--a-700);
	text-decoration: none;
}

.wbph-ks__reset:hover { text-decoration: underline; }

.wbph-ks__filterhint {
	margin: 0 0 12px;
	font: var(--t-meta);
	color: var(--c-text-mute);
}

/* Die äußere Klappe ist im Markup IMMER offen — absichtlich: fiele das CSS
   aus, wären sonst sämtliche Filter unsichtbar. Auf dem Desktop verschwindet
   deshalb nur ihre Bedienzeile; mobil wird genau diese Zeile zur
   Filter-Schaltfläche und die Kopfzeile darüber entfällt (siehe unten). */
.wbph-ks__panel { border: 0; }

@media (min-width: 901px) {
	.wbph-ks__panelbar { display: none; }
}

@media (max-width: 900px) {
	.wbph-ks__filterhead { display: none; }
}

.wbph-ks__groups {
	display: grid;
	gap: 12px;
}

/* --- Filtergruppe -------------------------------------------------------- */

.wbph-ks__group {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--tr-fast), box-shadow var(--tr-base);
}

.wbph-ks__group[open] {
	box-shadow: var(--e-2);
	border-color: var(--c-border-hov);
}

.wbph-ks__group > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 16px;
	font: 600 1rem/1.4 var(--wbph-sans);
	color: var(--ink-900);
	transition: background-color var(--tr-fast);
}

.wbph-ks__group > summary::-webkit-details-marker { display: none; }
.wbph-ks__group > summary::marker { content: ""; }
.wbph-ks__group > summary:hover { background: var(--sf-50); }

.wbph-ks__grouptitle { flex: 1 1 auto; }

.wbph-ks__group > summary .wbph-ks__icon {
	margin-left: auto;
	color: var(--ink-500);
	transition: transform var(--tr-fast);
}

.wbph-ks__group[open] > summary .wbph-ks__icon { transform: rotate(90deg); }

/* Eine Gruppe mit Auswahl bekommt eine Terrakotta-Kante und ein Zählabzeichen —
   auch zugeklappt bleibt so sichtbar, dass hier gefiltert wird. */
.wbph-ks__group.is-active > summary { box-shadow: inset 3px 0 0 var(--a-650); }

.wbph-ks__badge {
	font: 600 .8125rem/1.4 var(--wbph-sans);
	font-variant-numeric: tabular-nums;
	color: var(--p-800);
	background: var(--p-100);
	border-radius: var(--r-pill);
	padding: 2px 9px;
	flex: none;
}

.wbph-ks__opts {
	padding: 4px 16px 16px;
	max-height: 21rem;
	overflow-y: auto;
}

.wbph-ks__optgroup {
	margin: 16px 0 6px;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--c-text-mute);
}

.wbph-ks__optgroup:first-child { margin-top: 4px; }

/* Drei Spalten: Kästchen | Beschriftung | Trefferzahl. Vorher rutschte eine
   lange Beschriftung unter das Kästchen und die Zeile zerfiel. */
.wbph-ks__opt {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: start;
	min-height: 36px;
	padding: 6px 8px;
	margin: 0 -8px;
	border-radius: var(--r-xs);
	cursor: pointer;
	transition: background-color var(--tr-fast);
}

.wbph-ks__opt:hover { background: var(--sf-50); }

.wbph-ks__opt input {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--p-800);
}

.wbph-ks__opt > span {
	font: 400 .9375rem/1.5 var(--wbph-sans);
	color: var(--ink-800);
}

.wbph-ks__opt:has(:checked) > span {
	font-weight: 600;
	color: var(--ink-900);
}

/* Die Trefferzahl je Option ist unser eigentlicher Vorteil — keine der beiden
   Referenzseiten zeigt sie. Sie wird deshalb als Datum gesetzt, tabellarisch
   und rechtsbündig, nicht als hellgraues Beiwerk. */
.wbph-ks__optnum {
	font: 500 .8125rem/1.75 var(--wbph-sans);
	font-variant-numeric: tabular-nums;
	font-style: normal;
	color: var(--c-text-mute);
	text-align: right;
	white-space: nowrap;
}

.wbph-ks__opt:has(:checked) .wbph-ks__optnum {
	color: var(--p-800);
	font-weight: 600;
}

/* Anwenden bleibt am Fuß der Spalte stehen. Der Verlauf darüber lässt die
   Liste sauber darunter durchlaufen. */
.wbph-ks__apply {
	position: sticky;
	bottom: 0;
	width: 100%;
	margin-top: 12px;
}

.wbph-ks__apply::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
	background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
	pointer-events: none;
}

/* --- Aktive Filter als Chips --------------------------------------------- */

.wbph-ks__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.wbph-ks__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	background: var(--p-100);
	border: 1px solid var(--p-200);
	border-radius: var(--r-pill);
	padding: 0 10px 0 12px;
	font: var(--t-meta);
	text-decoration: none;
	color: var(--p-800);
	transition: background-color var(--tr-fast), border-color var(--tr-fast);
}

.wbph-ks__chip:hover {
	background: var(--p-200);
	border-color: var(--p-300);
	color: var(--p-900);
}

.wbph-ks__chipx {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--ink-500);
}

.wbph-ks__chip:hover .wbph-ks__chipx { color: var(--a-700); }

.wbph-ks__chip--reset {
	background: transparent;
	border-style: dashed;
	border-color: var(--c-border-hov);
	color: var(--c-text-soft);
}

.wbph-ks__chip--reset:hover {
	background: var(--sf-50);
	color: var(--a-700);
	border-color: var(--a-300);
}

/* --- Werkzeugleiste und Treffer ------------------------------------------ */

.wbph-ks__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 20px;
	margin-bottom: 16px;
}

.wbph-ks__count,
.wbph-dirfilter__count {
	font: 500 1rem/1.5 var(--wbph-sans);
	font-variant-numeric: tabular-nums;
	color: var(--c-text-soft);
	margin: 0;
}

.wbph-dirfilter__count { margin-bottom: 16px; }

.wbph-ks__toolbar .wbph-ks__source { margin: 0; }

.wbph-ks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.wbph-ks__item {
	position: relative;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: 24px;
	margin: 0;
	box-shadow: var(--e-1);
	transition: box-shadow var(--tr-base), transform var(--tr-base), border-color var(--tr-fast);
}

@media (hover: hover) {
	.wbph-ks__item:hover {
		transform: translateY(-1px);
		box-shadow: var(--e-2);
		border-color: var(--c-border-hov);
	}
}

.wbph-ks__title {
	margin: 0;
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
	font-family: var(--wbph-display);
}

.wbph-ks__title a {
	color: var(--ink-900);
	text-decoration: none;
}

/* Die ganze Karte ist anklickbar — ein Anker, kein Skript. */
.wbph-ks__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wbph-ks__title a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-ks__anbieter {
	margin: 4px 0 0;
	font: var(--t-ui);
	color: var(--c-text-soft);
}

/* Die Merkmale waren eine fette, mit „·" verkettete Zeile. Als Chip-Reihe ist
   jede Angabe für sich lesbar — und sie trägt ihr eigenes Symbol. */
.wbph-ks__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
}

.wbph-ks__metachip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	padding: 0 10px;
	margin: 0;
	border-radius: var(--r-pill);
	background: var(--sf-50);
	border: 1px solid var(--c-hairline);
	color: var(--ink-700);
	font: 500 .8125rem/1.6 var(--wbph-sans);
}

.wbph-ks__metachip .wbph-ks__icon { color: var(--ink-500); }

.wbph-ks__desc {
	margin: 12px 0 0;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wbph-ks__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--c-hairline);
}

.wbph-ks__foot:empty { display: none; }

.wbph-ks__termine {
	font: var(--t-meta);
	font-variant-numeric: tabular-nums;
	color: var(--c-text-mute);
}

/* Der Knopf muss über der kartenweiten Verweisfläche liegen. */
.wbph-ks__cta {
	position: relative;
	z-index: 1;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--c-border-hov);
	border-radius: var(--r-sm);
	font: 600 .9375rem/1.25 var(--wbph-sans);
	text-decoration: none;
	color: var(--p-800);
	white-space: nowrap;
	transition: background-color var(--tr-fast), border-color var(--tr-fast);
}

.wbph-ks__cta::after { content: "→"; }

.wbph-ks__cta:hover {
	background: var(--p-50);
	border-color: var(--p-300);
	color: var(--p-800);
}

/* --- Kein Treffer, Fehler, Blättern -------------------------------------- */

.wbph-ks__empty,
.wbph-ks__error {
	background: var(--sf-50);
	border-radius: var(--r-md);
	padding: 32px;
	text-align: center;
	max-width: 560px;
	margin: 8px auto 0;
}

.wbph-ks__error { background: var(--a-50); }

.wbph-ks__emptytitle {
	margin: 0;
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
}

.wbph-ks__emptytext {
	margin: 8px 0 0;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

.wbph-ks__empty .wbph-ks__chips,
.wbph-ks__error .wbph-ks__chips {
	justify-content: center;
	margin: 20px 0 0;
}

.wbph-ks__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 40px 0 8px;
	flex-wrap: wrap;
}

.wbph-ks__pagenum {
	font: var(--t-ui);
	font-variant-numeric: tabular-nums;
	color: var(--c-text-soft);
}

.wbph-ks__source {
	font: var(--t-meta);
	color: var(--c-text-mute);
	margin-top: 20px;
}

/* --- Schmale Fenster ----------------------------------------------------- */

@media (max-width: 1079px) {
	.wbph-ks__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	.wbph-ks__filters {
		position: static;
		max-height: none;
		overflow: visible;
	}

}

/* Mobil wird aus der äußeren Klappe wieder eine echte Bedienzeile: eine
   Schaltfläche in voller Breite, die die acht Gruppen ein- und ausblendet.
   Kein Skript, kein Scroll-Lock, keine Modaldarstellung. */
@media (max-width: 900px) {
	.wbph-ks__panelbar {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 0 16px;
		border: 1px solid var(--c-border-hov);
		border-radius: var(--r-sm);
		background: #fff;
		font: 600 .9375rem/1.25 var(--wbph-sans);
		cursor: pointer;
		list-style: none;
	}

	.wbph-ks__panelbar::-webkit-details-marker { display: none; }
	.wbph-ks__panelbartext { flex: 1 1 auto; }

	.wbph-ks__panelbar .wbph-ks__icon {
		margin-left: auto;
		color: var(--ink-500);
		transition: transform var(--tr-fast);
	}

	.wbph-ks__panel[open] > .wbph-ks__panelbar .wbph-ks__icon { transform: rotate(90deg); }
	.wbph-ks__panel[open] > .wbph-ks__panelbar { border-radius: var(--r-sm) var(--r-sm) 0 0; }

	.wbph-ks__panel[open] .wbph-ks__panelbody {
		border: 1px solid var(--c-border-hov);
		border-top: 0;
		border-radius: 0 0 var(--r-sm) var(--r-sm);
		padding: 16px;
		box-shadow: var(--e-2);
	}
}

@media (max-width: 768px) {
	.wbph-ks__band { padding: 28px 0 36px; }
	.wbph-ks__sheet { padding-top: 24px; }
	.wbph-ks__row { flex-direction: column; align-items: stretch; }

	/* In der Spalte wirkt die flex-basis auf die HÖHE — ohne diese Zeile
	   klaffte zwischen Suchfeld und Schaltfläche eine 220 px hohe Lücke. */
	.wbph-ks__row .wbph-ks__field { flex: 0 0 auto; }
	.wbph-ks__submit { width: 100%; }
	.wbph-ks__item { padding: 20px; }
	.wbph-ks__cta { width: 100%; justify-content: center; }
	.wbph-ks__toolbar { gap: 4px; }
	.wbph-ks__empty,
	.wbph-ks__error { padding: 24px 20px; }

	/* Die aktiven Filter laufen als waagerechte Leiste, damit sie auch zu
	   sechst nicht den halben Bildschirm einnehmen. */
	.wbph-ks__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.wbph-ks__chips::-webkit-scrollbar { display: none; }
	.wbph-ks__chip { flex: none; scroll-snap-align: start; }
}

/* =========================================================================
   14. Anbieterverzeichnis
   ========================================================================= */

.wbph-dirfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	background: var(--sf-50);
	border-radius: var(--r-md);
	padding: 20px;
	margin-bottom: 28px;
}

.wbph-dirfilter input[type="search"] { flex: 2 1 240px; min-height: 48px; }
.wbph-dirfilter select { flex: 1 1 180px; min-height: 48px; }

.wbph-dirfilter__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: var(--t-ui);
	color: var(--c-text-soft);
}

.wbph-dirfilter__check input { accent-color: var(--p-800); width: 18px; height: 18px; }

.wbph-dirgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.wbph-dircard {
	position: relative;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: 24px;
	background: #fff;
	box-shadow: var(--e-1);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: box-shadow var(--tr-base), border-color var(--tr-fast);
}

@media (hover: hover) {
	.wbph-dircard:hover { box-shadow: var(--e-2); border-color: var(--c-border-hov); }
}

.wbph-dircard.is-premium { border-color: var(--p-200); background: var(--p-50); }

.wbph-dircard__title {
	margin: 0;
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
}

.wbph-dircard__title a { color: var(--ink-900); text-decoration: none; }
.wbph-dircard__title a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-dircard__meta,
.wbph-dircard__excerpt {
	margin: 0;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

.wbph-badge {
	align-self: flex-start;
	margin: 0;
	background: var(--p-100);
	color: var(--p-800);
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--r-pill);
}

.wbph-dircard__link {
	margin-top: auto;
	padding-top: 12px;
	font: 600 .9375rem/1.4 var(--wbph-sans);
}

.wbph-empty {
	background: var(--sf-50);
	padding: 32px;
	border-radius: var(--r-md);
	color: var(--c-text-soft);
}

.wbph-pagination {
	margin-top: 40px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.wbph-pagination .page-numbers.current {
	background: var(--p-800);
	color: #fff;
	border-color: var(--p-800);
}

/* =========================================================================
   15. Partnerplatzierung
   ========================================================================= */

.wbph-partner {
	border: 1px solid var(--p-200);
	border-radius: var(--r-md);
	background: var(--p-50);
	padding: 24px;
	margin-bottom: 28px;
}

.wbph-partner__label {
	margin: 0 0 10px;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--c-text-mute);
}

.wbph-partner__name {
	margin: 0 0 6px;
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
}

.wbph-partner__name a { color: var(--ink-900); text-decoration: none; }
.wbph-partner__name a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-partner__desc {
	margin: 0 0 12px;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

.wbph-partner__merkmale {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wbph-partner__merkmale li {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	padding: 3px 12px;
	font: 500 .8125rem/1.6 var(--wbph-sans);
	color: var(--p-800);
	margin: 0;
}

.wbph-partner__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.wbph-partner__item {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	margin: 0;
	transition: border-color var(--tr-fast);
}

.wbph-partner__item:hover { border-color: var(--c-border-hov); }

.wbph-partner__item > a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
}

.wbph-partner__item > a:hover .wbph-partner__titel { text-decoration: underline; }

.wbph-partner__titel {
	font: 600 1.0625rem/1.4 var(--wbph-display);
	letter-spacing: var(--ls-snug);
	color: var(--p-800);
}

.wbph-partner__art {
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: #fff;
	background: var(--a-700);
	border-radius: var(--r-pill);
	padding: 3px 10px;
}

.wbph-partner__itemdesc {
	margin: 6px 0 0;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

.wbph-partner__cta {
	margin: 16px 0 0;
	font: 600 .9375rem/1.4 var(--wbph-sans);
}

/* =========================================================================
   16. Werbeplätze
   ========================================================================= */

.wbph-ad {
	margin: 32px auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}

.wbph-ad__label {
	display: block;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--ink-500);
	margin-bottom: 6px;
}

.wbph-ad--placeholder {
	border: 1px dashed var(--c-border-hov);
	background: var(--sf-50);
	color: var(--c-text-mute);
	font: var(--t-meta);
	padding: 24px 16px;
	border-radius: var(--r-md);
}

.wbph-ad--sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	margin: 0;
	background: #fff;
	border-top: 1px solid var(--c-border);
	padding: 8px;
}

@media (min-width: 769px) {
	.wbph-ad--sticky { display: none; }
}

/* =========================================================================
   17. Seitenleiste und Fußbereich
   ========================================================================= */

.widget-area .widget {
	background: var(--sf-50);
	border-radius: var(--r-md);
	padding: 24px;
	margin-bottom: 24px;
}

.widget-area .widget-title {
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
	margin: 0 0 14px;
	padding-bottom: 0;
	border-bottom: 0;
}

.wbph-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line-200);
}

.wbph-sidebar-list li {
	border-bottom: 1px solid var(--line-200);
	margin: 0;
}

.wbph-sidebar-list a {
	display: block;
	padding: 12px 0;
	text-decoration: none;
	font: var(--t-ui);
	color: var(--ink-800);
}

.wbph-sidebar-list a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-sidebar-cta { width: 100%; margin-top: 4px; }

.site-footer {
	background: var(--p-950);
	color: #cfdae2;
}

.site-footer a { color: #fff; }

/* GeneratePress gibt die Urheberzeile als eigenes <footer class="site-info">
   aus — NICHT innerhalb von .site-footer. Die dunkle Färbung oben griff dort
   also nie, und GeneratePress färbte den Streifen per Inline-CSS über --base-3
   weiß ein. Ergebnis: weiße Verweise auf weißem Grund, praktisch unsichtbar
   (genau der Grund, warum die alte Zeile als abgeschnittenes „Built with"
   erschien). Der Elementselektor hebt die Spezifität über die Inline-Regel. */
footer.site-info {
	background-color: var(--p-950);
	color: #b9c7d2;
	font: var(--t-meta);
	padding-block: 32px;
}

footer.site-info a {
	color: #e8eef3;
	text-decoration: none;
}

footer.site-info a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Pflichtangaben oben, Urheberzeile darunter — auf dem Handy untereinander. */
.wbph-footer__links,
.wbph-footer__meta {
	display: block;
}

.wbph-footer__links {
	margin-bottom: 10px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--c-onDark-line);
	font: var(--t-ui);
}

.wbph-footer__links a { white-space: nowrap; }

.wbph-footer__meta { color: #a9bac7; }

.site-info .wbph-consent-link { cursor: pointer; }

/* =========================================================================
   18. Hilfsklassen und Rücksichtnahme
   ========================================================================= */

.wbph-lead {
	font: var(--t-lead);
	color: var(--c-text-soft);
}

.wbph-zahl {
	font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2rem)/1.15 var(--wbph-display);
	letter-spacing: var(--ls-snug);
	color: var(--p-800);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	z-index: 999;
	background: #fff;
	color: var(--p-800);
	padding: 12px 18px;
	border-radius: var(--r-sm);
	box-shadow: var(--e-3);
}

/* Bewegung ist ein Angebot, keine Voraussetzung: hier fallen Übergänge,
   Hebe-Effekte UND Schattenwechsel weg, nicht nur die Animationen. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.wbph-card:hover,
	.wbph-ks__item:hover,
	.wbph-track__list a:hover .wbph-track__pfeil,
	.wbph-track__more:hover .wbph-icon {
		transform: none;
	}

	.wbph-card:hover,
	.wbph-track:hover,
	.wbph-ks__item:hover,
	.wbph-dircard:hover {
		box-shadow: var(--e-1);
	}
}

@media (max-width: 768px) {
	body { font-size: 1rem; }

	.wbph-card__body { padding: 20px; }
	.wbph-track__body { padding: 20px; }
	.single .entry-content { font-size: 1.125rem; }
	.wbph-newsletter { padding: 24px; }
	.wbph-quellen { padding: 24px 20px; }
}

/* =========================================================================
   19. Verfasser, Redaktion, Autorenseite, Brotkrumen und Fehlerseite
   -------------------------------------------------------------------------
   Alles hier beantwortet dieselbe Frage: wer steht hinter diesen Texten.
   Deshalb teilen sich Beitragskasten und Autorenseite ihr Vokabular —
   Monogramm, Name, Funktionszeile — statt zweimal etwas Ähnliches zu bauen.
   Ein Foto über `get_avatar()` kommt nicht in Frage: das wäre ein Abruf bei
   gravatar.com und damit der einzige externe Request der ganzen Seite.
   ========================================================================= */

/* --- Verfasserzeile in der Beitragskopfzeile ---------------------------- */

.wbph-entry-meta__autor a {
	color: var(--ink-700);
	text-decoration: none;
	border-bottom: 1px solid var(--line-300);
}

.wbph-entry-meta__autor a:hover {
	color: var(--p-700);
	border-bottom-color: currentColor;
}

/* --- Brotkrumenpfad ----------------------------------------------------- */

/* Rank Math gibt den Pfad ohne eigene Klassen auf den Trennzeichen aus; die
   Regeln greifen deshalb am Container. Er steht bewusst über der Überschrift
   und in der Oberflächenschrift — er ist Navigation, kein Fließtext. */
.rank-math-breadcrumb {
	font: var(--t-meta);
	color: var(--c-text-mute);
	margin-bottom: 18px;
}

.rank-math-breadcrumb p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: baseline;
}

.rank-math-breadcrumb a {
	color: var(--c-text-mute);
	text-decoration: none;
}

.rank-math-breadcrumb a:hover {
	color: var(--p-700);
	text-decoration: underline;
}

.rank-math-breadcrumb .separator { color: var(--ink-400); }

.rank-math-breadcrumb .last { color: var(--ink-700); }

/* --- Redaktionskasten unter dem Beitrag --------------------------------- */

.wbph-redaktion {
	margin-top: 56px;
	max-width: 68ch;
	background: var(--sf-50);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 28px;
	font-family: var(--wbph-sans);
}

.wbph-redaktion__eyebrow {
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--c-eyebrow);
	margin: 0 0 16px;
}

.wbph-redaktion__kopf,
.wbph-profil__kopf {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Monogramm statt Foto. Der Kreis ist eine Fläche der Petrol-Leiter, keine
   Grafik — er skaliert mit, lädt nichts nach und bleibt auf dem Handy lesbar. */
.wbph-redaktion__mono,
.wbph-profil__mono {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-pill);
	background: var(--p-800);
	color: #fff;
	font: 700 1.0625rem/1 var(--wbph-display);
	letter-spacing: .02em;
}

.wbph-redaktion__ident {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wbph-redaktion__name {
	font: var(--t-h4);
	letter-spacing: var(--ls-snug);
	color: var(--ink-900);
}

.wbph-redaktion__name a {
	color: inherit;
	text-decoration: none;
}

.wbph-redaktion__name a:hover { color: var(--p-700); text-decoration: underline; }

.wbph-redaktion__rolle {
	font: var(--t-meta);
	color: var(--c-text-soft);
}

.wbph-redaktion__text,
.wbph-redaktion__hinweis {
	font: var(--t-body-sm);
	color: var(--c-text-soft);
	margin: 18px 0 0;
}

.wbph-redaktion__hinweis { margin-top: 12px; }

.wbph-redaktion__text a,
.wbph-redaktion__hinweis a { color: var(--p-800); }

.wbph-redaktion__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--c-border);
}

.wbph-redaktion__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 .9375rem/1.25 var(--wbph-sans);
	color: var(--p-800);
	text-decoration: none;
}

.wbph-redaktion__link:hover { color: var(--a-700); text-decoration: underline; }
.wbph-redaktion__link:hover .wbph-icon { transform: translateX(2px); }
.wbph-redaktion__link .wbph-icon { transition: transform var(--tr-fast); }

/* --- Autorenseite ------------------------------------------------------- */

.wbph-profil__grid {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.wbph-profil__karte {
	background: var(--sf-50);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 28px;
	font-family: var(--wbph-sans);
	position: sticky;
	top: 96px;
}

.wbph-profil__mono {
	width: 64px;
	height: 64px;
	font-size: 1.25rem;
	margin-bottom: 18px;
}

.wbph-profil__name {
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
	margin: 0;
}

.wbph-profil__fakten {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--c-border);
	display: grid;
	gap: 14px;
}

.wbph-profil__fakten li {
	margin: 0;
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

.wbph-profil__faktenlabel {
	display: block;
	font: var(--t-micro);
	letter-spacing: var(--ls-micro);
	text-transform: uppercase;
	color: var(--c-text-mute);
	margin-bottom: 2px;
}

.wbph-profil__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--c-border);
}

/* Der Fließtext der Autorenseite läuft in der Serife wie die Beiträge — die
   Seite gehört zum redaktionellen Teil, nicht zur Oberfläche. */
.wbph-profil__text {
	max-width: 66ch;
	font-family: var(--wbph-serif);
	font-size: 1.125rem;
	line-height: 1.68;
	color: var(--c-text);
}

.wbph-profil__text > p:first-child {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--ink-800);
}

.wbph-profil__untertitel {
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
	margin: 40px 0 16px;
}

.wbph-profil__regeln {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	font-family: var(--wbph-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--c-text-soft);
}

.wbph-profil__regeln li {
	margin: 0;
	padding-left: 22px;
	position: relative;
}

.wbph-profil__regeln li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--a-400);
}

.wbph-profil__regeln strong { color: var(--ink-900); }

@media (max-width: 900px) {
	.wbph-profil__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.wbph-profil__karte { position: static; }
}

/* --- Fehlerseite -------------------------------------------------------- */

.wbph-404__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}

/* Beide Kästen stehen nebeneinander und tragen unterschiedlich langen Text.
   Ohne diese beiden Regeln sitzen die Suchfelder auf verschiedenen Höhen —
   das ist die Art von Kleinigkeit, an der eine Seite gebastelt aussieht. */
.wbph-404__box {
	display: flex;
	flex-direction: column;
	background: var(--sf-50);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	padding: 28px;
	font-family: var(--wbph-sans);
}

.wbph-404__box .wbph-ks__form { margin-top: auto; }

.wbph-404__boxtitel {
	font: var(--t-h3);
	letter-spacing: var(--ls-snug);
	margin: 0 0 8px;
}

.wbph-404__boxtext {
	font: var(--t-body-sm);
	color: var(--c-text-soft);
	margin: 0 0 20px;
}

/* Auf hellem Grund braucht das Feld eine sichtbare Kante — im dunklen Band
   der Startseite genügt der Kontrast der Fläche allein. */
.wbph-404__box .wbph-ks__field input { border-color: var(--c-border-hov); }

.wbph-404__fuss {
	margin: 0 0 96px;
	padding-top: 24px;
	border-top: 1px solid var(--c-hairline);
	font: var(--t-body-sm);
	color: var(--c-text-soft);
}

.wbph-404__fuss a { color: var(--p-800); }

@media (max-width: 768px) {
	.wbph-redaktion,
	.wbph-profil__karte,
	.wbph-404__box { padding: 22px; }

	.wbph-404__fuss { margin-bottom: 56px; }
}

/* =========================================================================
   20. Kontaktformular (FluentForm 3)
   -------------------------------------------------------------------------
   FluentForm bringt eigenes CSS mit und rendert sonst als Fremdkörper auf
   einer frisch gestalteten Seite. Alles hier ist auf `.fluent_form_3`
   begrenzt — `layout.cssClassName` und das `css_classes`-Attribut des
   Shortcodes werden von FluentForm 6.2.7 ignoriert, die Formular-ID ist
   deshalb der einzige verlässliche Haken.

   Wichtigster Punkt ist die Fehlerfarbe: das Plugin meldet Fehler in
   #f56c6c — auf Weiß nachgemessene 2,90:1 und damit ein klarer
   AA-Verstoß bei 12-px-Text. Ersatz ist ein tiefes Rot mit 7,47:1, das sich
   außerdem deutlich vom Terrakotta der Schaltflächen unterscheidet: eine
   Fehlermeldung darf nicht wie ein Aufruf zum Handeln aussehen.
   ========================================================================= */

:root {
	--c-error:      #a3231a;
	--c-error-line: #e3b3ae;
	--c-error-bg:   #fdf3f2;
}

/* --- Rhythmus und Beschriftungen ---------------------------------------- */

.fluent_form_3 .ff-el-group { margin-bottom: 24px; }

.fluent_form_3 .ff-el-input--label label {
	font: 600 1rem/1.4 var(--wbph-sans);
	letter-spacing: var(--ls-snug);
	color: var(--ink-900);
	margin-bottom: 6px;
}

/* Der Stern steht für „Pflichtfeld", nicht für „Fehler" — deshalb neutral
   und nicht in der Fehlerfarbe. */
.fluent_form_3 .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
	color: var(--c-text-mute);
	font-weight: 400;
}

.fluent_form_3 .ff-el-help-message.ff_ahm {
	font: var(--t-meta);
	font-style: normal;
	color: var(--c-text-mute);
	margin: 0 0 8px;
}

/* --- Felder ------------------------------------------------------------- */

.fluent_form_3 .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	font: var(--t-body-sm);
	color: var(--c-text);
	background: #fff;
	border: 1px solid var(--c-border-hov);
	border-radius: var(--r-sm);
	padding: 12px 14px;
	box-shadow: none;
	transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}

.fluent_form_3 textarea.ff-el-form-control { min-height: 150px; }

.fluent_form_3 .ff-el-form-control:focus {
	border-color: var(--p-400);
	box-shadow: var(--e-focus);
	outline: none;
}

.fluent_form_3 .ff-el-form-control::placeholder { color: var(--ink-500); opacity: 1; }

/* --- Einwilligungskästchen ---------------------------------------------- */

/* Vorher: rohes Browser-Kästchen, an der Oberkante des Absatzes klebend und
   optisch nicht auf der ersten Textzeile. Grid statt Flex, weil nur so die
   erste Zeile als Bezugslinie taugt, egal wie viele Zeilen folgen. */
.fluent_form_3 .ff-el-form-check.ff-el-tc { margin-top: 4px; }

.fluent_form_3 .ff-el-form-check.ff-el-tc .ff_tc_label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	cursor: pointer;
}

.fluent_form_3 .ff_tc_checkbox {
	display: flex;
	align-items: center;
	/* halbe Zeilenhöhe des Fließtextes minus halbe Kästchenhöhe */
	height: calc(1.6em);
}

.fluent_form_3 .ff_tc_checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--c-action);
	cursor: pointer;
}

.fluent_form_3 .ff_tc_checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--p-500);
	outline-offset: 2px;
}

.fluent_form_3 .ff_t_c {
	font: var(--t-body-sm);
	color: var(--c-text-soft);
	margin: 0;
}

.fluent_form_3 .ff_t_c a { color: var(--p-800); }

/* --- Schaltfläche ------------------------------------------------------- */

.fluent_form_3 .ff-btn-submit,
.fluent_form_3 .ff-btn.ff-btn-submit.ff_btn_style {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--c-action);
	color: #fff;
	font: 600 1rem/1.25 var(--wbph-sans);
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--tr-fast), transform var(--tr-fast);
}

.fluent_form_3 .ff-btn-submit:hover,
.fluent_form_3 .ff-btn.ff-btn-submit.ff_btn_style:hover {
	background: var(--c-action-hov);
	color: #fff;
	opacity: 1;
}

.fluent_form_3 .ff-btn-submit:active { background: var(--c-action-act); transform: translateY(1px); }

.fluent_form_3 .ff-btn-submit:focus-visible {
	outline: none;
	box-shadow: var(--e-focus);
}

/* --- Fehlerzustand ------------------------------------------------------ */

.fluent_form_3 .error.text-danger {
	font: var(--t-meta);
	color: var(--c-error);
	margin-top: 6px;
}

.fluent_form_3 .ff-el-is-error .ff-el-form-control {
	border-color: var(--c-error);
	background: var(--c-error-bg);
}

.fluent_form_3 .ff-el-is-error .ff-el-form-control:focus {
	border-color: var(--c-error);
	box-shadow: 0 0 0 3px rgba(163, 35, 26, .22);
}

/* Die Beschriftung des fehlerhaften Feldes bleibt lesbar — sie wird nicht
   selbst zur Meldung. */
.fluent_form_3 .ff-el-is-error .ff-el-input--label label { color: var(--ink-900); }

/* FluentForm färbt bei fehlender Einwilligung den GANZEN Einwilligungstext
   rot — vier Zeilen Alarmfarbe für ein nicht gesetztes Häkchen, dazu in
   2,90:1. Der Text bleibt hier normal; markiert wird das Kästchen, und die
   Meldung steht wie bei jedem anderen Feld darunter. */
.fluent_form_3 .ff-el-is-error .ff_t_c,
.fluent_form_3 .ff-el-is-error .ff_tc_label { color: var(--c-text-soft); }

/* Auch der Verweis auf die Datenschutzerklärung bleibt ein Verweis und wird
   nicht Teil der Fehlermeldung. */
.fluent_form_3 .ff-el-is-error .ff_t_c a { color: var(--p-800); }

.fluent_form_3 .ff-el-is-error .ff_tc_checkbox input[type="checkbox"] {
	outline: 2px solid var(--c-error);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Sammelmeldung unter der Schaltfläche.
   ACHTUNG, das ist die Falle an dieser Stelle: FluentForm hängt den
   Fehlerstapel als GESCHWISTER neben das Formular, nicht hinein
   (`<div id="fluentform_3_errors" class="ff-errors-in-stack …">`). Jede
   Regel, die unter `.fluent_form_3 …` steht, greift hier nicht — die
   Meldung blieb deshalb unformatiert, obwohl der Selektor stimmte. */
.ff-errors-in-stack .error.text-danger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	background: var(--c-error-bg);
	border: 1px solid var(--c-error-line);
	border-left: 4px solid var(--c-error);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	margin-top: 16px;
	font: var(--t-body-sm);
	color: var(--c-error);
}

.ff-errors-in-stack .error-clear {
	flex: 0 0 auto;
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--c-error);
	opacity: .7;
}

.ff-errors-in-stack .error-clear:hover { opacity: 1; }

/* --- Erfolgsmeldung ----------------------------------------------------- */

/* Der wichtigste Zustand des Formulars und bisher ein 1-px-Kasten in Grau.
   Er bekommt dieselbe Behandlung wie die Kästen des Themes: getönte Fläche,
   ruhiger Radius, ein Akzent an der Kante statt eines Rahmens ringsum. */
.ff-message-success {
	background: var(--p-50);
	border: 1px solid var(--p-200);
	border-left: 4px solid var(--p-500);
	border-radius: var(--r-md);
	padding: 24px 26px;
	font: var(--t-body-sm);
	color: var(--ink-800);
	box-shadow: var(--e-1);
}

.ff-message-success p { margin: 0; }
.ff-message-success p + p { margin-top: 10px; }
.ff-message-success a { color: var(--p-800); }

@media (max-width: 768px) {
	.fluent_form_3 .ff-el-group { margin-bottom: 20px; }
	.ff-message-success { padding: 20px; }
}

/* =========================================================================
   21. Druck
   =========================================================================
   Die meistgelesenen Beiträge dieser Seite sind lange Texte zu Steuer,
   Förderung und gesetzlichen Ansprüchen — also genau die Sorte Text, die
   ausgedruckt und in einen Ordner gelegt wird. Ohne eigene Druckregeln kämen
   Navigation, Seitenleiste, Werbeplatz, Newsletter-Kasten und das Cookie-Banner
   mit aufs Papier.

   Zwei Entscheidungen, die man beim Drucken leicht falsch macht:
   1. Die Quellenangaben bleiben drin. Sie sind bei diesen Themen der Grund,
      warum man den Text überhaupt aufhebt.
   2. Verweise im Fließtext bekommen ihre Adresse in Klammern nachgestellt —
      auf Papier ist ein blau unterstrichenes Wort sonst wertlos.
   ====================================================================== */

@media print {

	/* Alles ausblenden, was nur am Bildschirm eine Aufgabe hat. */
	.site-header,
	.main-navigation,
	.wbph-nav,
	#right-sidebar,
	#left-sidebar,
	.sidebar,
	.widget-area,
	.wbph-ad,
	.wbph-ad--sticky,
	.wbph-newsletter,
	.wbph-consent,
	.wbph-partner,
	.wbph-pagination,
	.post-navigation,
	.wbph-related,
	.wbph-ks__filters,
	.wbph-ks__band,
	.site-footer,
	footer.site-info,
	.rank-math-breadcrumb,
	.wbph-share {
		display: none !important;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
		line-height: 1.5;
	}

	.site-content,
	.content-area,
	.entry-content,
	.inside-article {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
	}

	h1 { font-size: 20pt; }
	h2 { font-size: 14pt; }
	h3 { font-size: 12pt; }

	h1, h2, h3, h4 {
		color: #000 !important;
		page-break-after: avoid;
		break-after: avoid;
	}

	p, li, blockquote {
		orphans: 3;
		widows: 3;
	}

	/* Tabellen und Bilder nicht mitten durchtrennen. */
	table, figure, .wbph-faq__item, .wbph-quellen__item {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	table {
		width: 100% !important;
		border-collapse: collapse;
		font-size: 9.5pt;
	}

	th, td {
		border: 1px solid #999 !important;
		padding: 4px 6px !important;
	}

	/* Aufgeklappte Abschnitte drucken — sonst fehlen die FAQ komplett. */
	details {
		display: block !important;
	}

	details > *:not(summary) {
		display: block !important;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	/* Adressen nachstellen, aber nur im Text — nicht bei Navigation und
	   nicht bei internen Sprungmarken, sonst steht überall Ballast. */
	.entry-content a[href^="http"]::after,
	.wbph-quellen a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 8.5pt;
		word-break: break-all;
	}

	.wbph-quellen,
	.wbph-faq {
		border-top: 1px solid #999;
		padding-top: 8pt;
	}

	.wbph-redaktion {
		border: 1px solid #999;
		padding: 8pt;
		font-size: 9.5pt;
	}
}

/* =========================================================================
   22. Bundesland-Seiten (Weiterbildung in <Land>)
   ====================================================================== */

.wbph-bl {
	margin-top: 2rem;
}

.wbph-bl__zahl {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--c-surface-alt);
	border-radius: var(--r-md);
	border-left: 4px solid var(--c-action);
}

.wbph-bl__zahl a {
	display: block;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--c-text);
	text-decoration: none;
	font-weight: 600;
}

.wbph-bl__zahl a strong {
	color: var(--a-700);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

.wbph-bl__zahl a:hover strong { text-decoration: underline; }


.wbph-bl__zahl-text {
	display: block;
	font-size: 1.15rem;
	line-height: 1.4;
	color: var(--c-text);
	font-weight: 600;
}

.wbph-bl__quelle {
	display: block;
	margin-top: .35rem;
	font-size: .9rem;
	color: var(--ink-500);
	font-weight: 400;
}

.wbph-bl__h {
	font: var(--t-h3);
	margin: 2rem 0 1rem;
}

.wbph-bl__themen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .75rem;
	margin-bottom: 1rem;
}

.wbph-bl__thema {
	display: flex;
	flex-direction: column;
	padding: 1rem 1.15rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	text-decoration: none;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.wbph-bl__thema:hover {
	border-color: var(--a-300);
	box-shadow: var(--e-1);
}

.wbph-bl__thema-n {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--p-800);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.wbph-bl__thema-l {
	margin-top: .2rem;
	font-size: .95rem;
	color: var(--c-text-soft);
}

.wbph-bl__zwei {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.wbph-bl__box {
	padding: 1.25rem 1.5rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
}

.wbph-bl__box .wbph-bl__h { margin-top: 0; }

.wbph-bl__mehr {
	font-weight: 600;
	text-decoration: none;
	color: var(--c-action);
}

.wbph-bl__mehr:hover { text-decoration: underline; }

.wbph-bl__anbieter {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: .5rem .5rem;
}

.wbph-bl__anbieter li {
	padding: .7rem .9rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: var(--c-surface);
}

.wbph-bl__anbieter a { text-decoration: none; font-weight: 600; }
.wbph-bl__anbieter a:hover { text-decoration: underline; }

.wbph-bl__ort {
	display: block;
	font-size: .85rem;
	color: var(--ink-500);
}

.wbph-bl__cta {
	margin: 2rem 0 0;
}

.wbph-bl__btn {
	display: inline-block;
	padding: .85rem 1.6rem;
	background: var(--c-action);
	color: #fff;
	border-radius: var(--r-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s ease;
}

.wbph-bl__btn:hover { background: var(--a-800); }
.wbph-bl__btn:focus-visible { outline: 3px solid var(--a-300); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.wbph-bl__thema, .wbph-bl__btn { transition: none; }
}

/* Übersichtsraster der Bundesländer (Hub-Seite) */
.wbph-bl-hub {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: .6rem;
}

.wbph-bl-hub a {
	display: block;
	padding: .95rem 1.15rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--c-text);
	transition: box-shadow .15s ease, border-color .15s ease;
}

.wbph-bl-hub a:hover {
	border-color: var(--a-300);
	box-shadow: var(--e-1);
}

.wbph-bl-hub strong { color: var(--p-800); }

@media (prefers-reduced-motion: reduce) { .wbph-bl-hub a { transition: none; } }

/* =========================================================================
   23. Werkzeuge (Bildungsgutschein-Check, Aufstiegs-BAföG-Rechner)
   ====================================================================== */

.wbph-tool { margin: 2rem 0; }

.wbph-tool__form {
	padding: 1.5rem;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
}

.wbph-tool__feld {
	border: 0;
	margin: 0 0 1.75rem;
	padding: 0;
}

.wbph-tool__feld:last-of-type { margin-bottom: 1.25rem; }

.wbph-tool__legend {
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0;
	margin-bottom: .3rem;
	color: var(--c-text);
}

.wbph-tool__hilfe {
	margin: 0 0 .75rem;
	font-size: .92rem;
	color: var(--ink-600);
}

.wbph-tool__option {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: .6rem;
	align-items: start;
	padding: .55rem .7rem;
	border-radius: var(--r-sm);
	cursor: pointer;
}

.wbph-tool__option:hover { background: rgba(20, 66, 92, .05); }

.wbph-tool__option input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--p-800);
}

.wbph-tool__zahl {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
}

.wbph-tool__zahl input {
	width: 11rem;
	min-height: 48px;
	padding: .6rem .8rem;
	font-size: 1.05rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: #fff;
	font-variant-numeric: tabular-nums;
}

.wbph-tool__zahl input:focus-visible {
	outline: 3px solid var(--a-300);
	outline-offset: 1px;
}

.wbph-tool__btn {
	display: inline-block;
	min-height: 48px;
	padding: .8rem 1.6rem;
	background: var(--c-action);
	color: #fff;
	border: 0;
	border-radius: var(--r-sm);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease;
}

.wbph-tool__btn:hover { background: var(--a-800); color: #fff; }
.wbph-tool__btn:focus-visible { outline: 3px solid var(--a-300); outline-offset: 2px; }

.wbph-tool__ergebnis {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border-radius: var(--r-lg);
	border: 1px solid var(--c-border);
	border-left: 5px solid var(--p-700);
	background: var(--c-surface);
	box-shadow: var(--e-1);
}

.wbph-tool__ergebnis--gut   { border-left-color: #1c6b45; }
.wbph-tool__ergebnis--offen { border-left-color: var(--a-650); }
.wbph-tool__ergebnis--stopp { border-left-color: #a3231a; }

.wbph-tool__titel { font: var(--t-h3); margin: 0 0 .5rem; }
.wbph-tool__lead  { font-size: 1.05rem; margin: 0 0 1rem; }
.wbph-tool__h3    { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .5rem; }

.wbph-tool__liste { margin: 0 0 .5rem; padding-left: 1.3rem; }
.wbph-tool__liste li { margin-bottom: .45rem; }
.wbph-tool__liste--stopp li::marker { color: #a3231a; }
.wbph-tool__liste--pro li::marker   { color: #1c6b45; }
.wbph-tool__liste--offen li::marker { color: var(--a-650); }

.wbph-tool__tabelle {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.25rem;
	font-variant-numeric: tabular-nums;
}

.wbph-tool__tabelle th,
.wbph-tool__tabelle td {
	text-align: left;
	padding: .6rem .5rem;
	border-bottom: 1px solid var(--c-border);
}

.wbph-tool__tabelle td { text-align: right; white-space: nowrap; font-weight: 600; }
.wbph-tool__zeile--gut td { color: #1c6b45; }
.wbph-tool__zeile--summe th,
.wbph-tool__zeile--summe td {
	border-top: 2px solid var(--p-800);
	border-bottom: 0;
	font-size: 1.1rem;
	font-weight: 800;
	padding-top: .8rem;
}

.wbph-tool__klein { font-weight: 400; font-size: .85rem; color: var(--ink-500); }

.wbph-tool__hinweis {
	margin: 1.25rem 0 0;
	padding: .9rem 1.1rem;
	background: var(--c-surface-alt);
	border-radius: var(--r-sm);
	font-size: .9rem;
	color: var(--ink-700);
}

.wbph-tool__fehler {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	background: #fdf0ef;
	border-left: 4px solid #a3231a;
	border-radius: var(--r-sm);
	color: #a3231a;
	font-weight: 600;
}

.wbph-tool__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	align-items: center;
	margin: 1.5rem 0 0;
}

.wbph-tool__zurueck { font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .wbph-tool__btn { transition: none; } }

/* Hinweis auf ein Werkzeug unter dem passenden Beitrag */
.wbph-toolteaser {
	margin: 2.5rem 0 0;
	padding: 1.4rem 1.6rem;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border);
	border-left: 5px solid var(--c-action);
	border-radius: var(--r-md);
}

.wbph-toolteaser__titel {
	margin: 0 0 .4rem;
	font-weight: 700;
	font-size: 1.1rem;
}

.wbph-toolteaser__text { margin: 0 0 1rem; color: var(--ink-700); }

/* Statistik-/Vergleichstabellen in den Werkzeugen */
.wbph-tool__tabelle--stat thead th {
	background: var(--p-800);
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	text-align: right;
	padding: .55rem .6rem;
}

.wbph-tool__tabelle--stat thead th:first-child { text-align: left; }
.wbph-tool__tabelle--stat th[scope="row"] { font-weight: 600; }
.wbph-tool__tabelle--stat th[scope="row"] a { text-decoration: none; }
.wbph-tool__tabelle--stat th[scope="row"] a:hover { text-decoration: underline; }
.wbph-tool__tabelle--stat td { font-weight: 500; }
.wbph-tool__tabelle--stat tbody tr:nth-child(even) { background: var(--c-surface-alt); }

@media (max-width: 560px) {
	.wbph-tool__tabelle--stat { font-size: .88rem; }
	.wbph-tool__tabelle--stat th,
	.wbph-tool__tabelle--stat td { padding: .45rem .35rem; }
}

/* Werkzeug-Abschnitt auf der Startseite */
.wbph-werkzeuge__lead {
	margin: -.5rem 0 1.5rem;
	color: var(--c-text-soft);
}

.wbph-werkzeuge__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1.25rem;
}

.wbph-werkzeug {
	padding: 1.6rem 1.75rem;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 5px solid var(--c-action);
	border-radius: var(--r-md);
	box-shadow: var(--e-1);
	transition: box-shadow .15s ease, transform .15s ease;
}

@media (hover: hover) {
	.wbph-werkzeug:hover { box-shadow: var(--e-2); transform: translateY(-2px); }
}

.wbph-werkzeug__titel { font-size: 1.2rem; margin: 0 0 .5rem; }
.wbph-werkzeug__titel a { text-decoration: none; }
.wbph-werkzeug__titel a::after { content: ""; position: absolute; inset: 0; }
.wbph-werkzeug { position: relative; }
.wbph-werkzeug__text { margin: 0 0 .9rem; color: var(--ink-700); font-size: .97rem; }
.wbph-werkzeug__cta { font-weight: 600; color: var(--c-action); }

@media (prefers-reduced-motion: reduce) {
	.wbph-werkzeug { transition: none; }
	.wbph-werkzeug:hover { transform: none; }
}

/* Sieben Menüpunkte passen bis 1100px in eine Zeile; im schmalen
   Laptop-/Tablet-Bereich darunter rutscht der letzte sonst um. Statt Punkte zu
   entfernen, wird dort der Innenabstand enger — das kostet niemanden etwas. */
@media (min-width: 1000px) and (max-width: 1180px) {
	.main-navigation .main-nav ul li a {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 14.5px;
	}
}

/* Die eigentliche Ursache des Umbruchs: Die Liste wird im Flex-Layout neben dem
   Logo geschrumpft und landete einen Pixel unter der Breite ihres eigenen
   Inhalts — worauf der letzte Punkt umbrach, obwohl im Kopf reichlich Platz war.
   Nicht schrumpfen und nicht umbrechen lassen. */
@media (min-width: 1000px) {
	.main-navigation .main-nav > ul {
		flex-wrap: nowrap;
		flex-shrink: 0;
	}
}

/* Förder-Finder: Ergebnisliste der Förderwege */
.wbph-tool__wege { list-style: none; counter-reset: weg; margin: 0 0 1.25rem; padding: 0; }

.wbph-weg {
	counter-increment: weg;
	position: relative;
	padding: 1rem 1.1rem 1rem 3.2rem;
	margin-bottom: .8rem;
	background: var(--c-surface-alt);
	border-radius: var(--r-md);
}

.wbph-weg::before {
	content: counter(weg);
	position: absolute;
	left: 1.05rem;
	top: 1rem;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	background: var(--p-800);
	color: #fff;
	border-radius: 50%;
	font-size: .85rem;
	font-weight: 700;
}

.wbph-weg__titel { font-size: 1.05rem; margin: 0 0 .35rem; }
.wbph-weg__text  { margin: 0 0 .6rem; color: var(--ink-700); font-size: .96rem; }
.wbph-weg__link  { font-weight: 600; text-decoration: none; }
.wbph-weg__link:hover { text-decoration: underline; }

.wbph-tool__select {
	min-height: 48px;
	padding: .55rem .8rem;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: #fff;
	font: inherit;
	max-width: 22rem;
	width: 100%;
}

.wbph-tool__btn--sekundaer {
	background: transparent;
	color: var(--p-800);
	border: 1px solid var(--p-800);
}

.wbph-tool__btn--sekundaer:hover { background: var(--p-50); color: var(--p-900); }

.wbph-tool__druckzeile {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	align-items: center;
	margin: 1.25rem 0 0;
}

/* Druckbild eines Ergebnisses: nur das Ergebnis, sauber als Dokument. */
@media print {
	.wbph-tool__form,
	.wbph-tool__druckzeile,
	.wbph-tool__aktionen { display: none !important; }

	.wbph-tool__druck {
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.wbph-tool__druck::after {
		content: "Erstellt auf weiterbildung-ph.de — unverbindliche Orientierung, keine Rechtsberatung.";
		display: block;
		margin-top: 12pt;
		padding-top: 6pt;
		border-top: 1px solid #999;
		font-size: 8.5pt;
		color: #333;
	}

	.wbph-weg { background: transparent !important; padding-left: 2.6rem; page-break-inside: avoid; }
	.wbph-tool__hinweis { background: transparent !important; border: 1px solid #999; }
}