/*
Theme Name: PM HR
Theme URI: https://www.pm-hr.de
Author: PM HR GmbH
Description: Schlankes, eigenes Theme für die PM HR GmbH. Dunkles Design, auf Bewerber und Kundenunternehmen ausgelegt, ohne Page-Builder-Abhängigkeit.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pm-hr
Tags: dark, one-column, custom-logo, custom-menu, featured-images, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. Farben, Schriften, Grundwerte
   Alle Farben zentral hier ändern – der Rest zieht nach.
   ========================================================================== */

/* Schriften – liegen im Theme, keine externe Verbindung */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-500-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/onest-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/onest-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/onest-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/onest-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
	--pm-bg: #101010;
	--pm-surface: #17181a;
	--pm-surface-2: #1d1f22;
	--pm-line: #2b2d31;
	--pm-text: #f2f2f0;
	--pm-muted: #a9acb2;
	--pm-dim: #83878d;
	--pm-accent: #b6924f;
	--pm-accent-hi: #d3b273;
	--pm-accent-ink: #1a1206;

	--pm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pm-font-head: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--pm-wide: 1240px;
	--pm-narrow: 820px;
	/* Lesebreite für Fließtext – rund 75 Zeichen pro Zeile. */
	--pm-read: 74ch;
	--pm-header-h: 88px;

	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--pm-bg);
	color: var(--pm-text);
	font-family: var(--pm-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.has-menu-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pm-font-head);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--pm-text);
	margin: 0 0 16px;
	text-wrap: balance;
}

p {
	margin: 0 0 16px;
}

/*
 * Deutsche Komposita. „Arbeitnehmerüberlassung" ist 23 Zeichen lang und
 * passt in schmalen Spalten nicht in eine Zeile. `overflow-wrap` verhindert,
 * dass so ein Wort aus seinem Kasten läuft; die Silbentrennung greift bei
 * kleinen Überschriften und auf schmalen Bildschirmen, wo es nötig ist.
 * Große Schauüberschriften bleiben ungetrennt, dort sieht Trennung schlecht aus.
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
figcaption,
blockquote {
	overflow-wrap: break-word;
}

h4,
h5,
h6 {
	hyphens: auto;
}

a {
	color: var(--pm-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover,
a:focus {
	color: var(--pm-accent-hi);
}

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

figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 3px;
}

/* ==========================================================================
   2. Barrierefreiheit
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 14px 22px;
	background: var(--pm-accent);
	color: var(--pm-accent-ink);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 10px 0;
}

.skip-link:focus {
	left: 0;
	color: var(--pm-accent-ink);
}

/* ==========================================================================
   3. Kopfzeile und Menü
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease;
	border-bottom: 1px solid transparent;
}

.site-header.is-scrolled,
.site-header.is-open {
	background: rgba(16, 16, 16, 0.94);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--pm-line);
}

.admin-bar .site-header {
	top: 32px;
}

.site-header__inner {
	max-width: var(--pm-wide);
	margin: 0 auto;
	padding: 0 24px;
	height: var(--pm-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

.custom-logo {
	width: auto;
	max-height: 46px;
}

.site-title {
	font-family: var(--pm-font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--pm-text);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 34px;
}

.main-navigation a {
	color: var(--pm-text);
	text-decoration: none;
	font-size: 15.5px;
	font-weight: 500;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
	display: inline-block;
}

.main-navigation a:hover,
.main-navigation a:focus {
	color: var(--pm-accent);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
	border-bottom-color: var(--pm-accent);
}

/*
 * Hervorgehobener Menüpunkt (Klasse „pm-nav-cta" am Menüeintrag, gepflegt
 * unter Design → Menüs → CSS-Klassen). Gedacht für die Stellenangebote:
 * Sie sind der häufigste Grund, warum jemand die Seite besucht, und sollen
 * im Menü sofort ins Auge fallen. Bewusst getönt statt vollflächig gold –
 * ein zweiter voller Knopf neben dem Hero-Knopf wäre zu laut.
 */
.main-navigation .pm-nav-cta > a {
	padding: 9px 18px;
	border: 1px solid rgba(182, 146, 79, 0.55);
	border-radius: 999px;
	background: rgba(182, 146, 79, 0.13);
	color: var(--pm-accent-hi);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.main-navigation .pm-nav-cta > a:hover,
.main-navigation .pm-nav-cta > a:focus {
	background: var(--pm-accent);
	border-color: var(--pm-accent);
	color: var(--pm-accent-ink);
}

/* Auf der Stellenseite selbst: gefüllt statt getönt, der Unterstrich
   der aktiven Seite würde am runden Knopf danebenliegen. */
.main-navigation .pm-nav-cta.current-menu-item > a,
.main-navigation .pm-nav-cta.current_page_item > a {
	background: var(--pm-accent);
	border-color: var(--pm-accent);
	border-bottom-color: var(--pm-accent);
	color: var(--pm-accent-ink);
}

/* Untermenüs */
.main-navigation li {
	position: relative;
}

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	flex-direction: column;
	gap: 0;
	padding: 10px 0;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 12px;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	display: flex;
}

.main-navigation .sub-menu a {
	padding: 8px 18px;
	border: 0;
	width: 100%;
}

/* Menüschalter (mobil) */
.nav-toggle {
	display: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--pm-line);
	border-radius: 10px;
	width: 46px;
	height: 46px;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.nav-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	width: 20px;
}

.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: var(--pm-text);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header.is-open .nav-toggle__bars span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}

.site-header.is-open .nav-toggle__bars span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/*
 * Umschaltpunkt zum Klappmenü: 1040 px, nicht 900 px.
 * Sieben Menüpunkte brauchen bei 17 px Schrift und 30 px Abstand rund
 * 757 px. Neben Logo (184 px) und Innenabstand bleiben davon erst ab
 * etwa 1030 px Fensterbreite genug übrig – darunter würde das Menü
 * über den Rand laufen. Kommt ein Menüpunkt dazu, hier nachrechnen.
 */
@media (max-width: 1040px) {
	.nav-toggle {
		display: inline-flex;
		order: 3;
	}

	.main-navigation {
		display: none;
		order: 4;
		width: 100%;
	}

	.site-header.is-open .main-navigation {
		display: block;
	}

	.site-header.is-open .site-header__inner {
		height: auto;
		flex-wrap: wrap;
		padding-bottom: 22px;
	}

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--pm-line);
		padding-top: 10px;
	}

	.main-navigation a {
		padding: 14px 0;
		font-size: 17px;
		border-bottom: 1px solid var(--pm-line);
	}

	/* Im Klappmenü bleibt der Punkt eine Zeile wie die anderen, nur in
	   Akzentfarbe – ein runder Knopf mitten in einer Liste wirkt verrutscht. */
	.main-navigation .pm-nav-cta > a,
	.main-navigation .pm-nav-cta.current-menu-item > a,
	.main-navigation .pm-nav-cta.current_page_item > a {
		padding: 14px 0;
		border: 0;
		border-bottom: 1px solid var(--pm-line);
		border-radius: 0;
		background: transparent;
		color: var(--pm-accent-hi);
		font-weight: 600;
	}

	.main-navigation .sub-menu {
		display: flex;
		position: static;
		border: 0;
		background: transparent;
		padding: 0 0 0 16px;
		min-width: 0;
	}
}

/* ==========================================================================
   4. Grundlayout der Inhalte
   ========================================================================== */

.site-content {
	padding-top: var(--pm-header-h);
}

body.home .site-content,
body.pmhr-front .site-content {
	padding-top: 0;
}

.page-header {
	border-bottom: 1px solid var(--pm-line);
	background:
		radial-gradient(70% 130% at 12% 0%, rgba(182, 146, 79, 0.12) 0%, rgba(182, 146, 79, 0) 62%),
		var(--pm-bg);
}

.page-header__inner {
	max-width: var(--pm-wide);
	margin: 0 auto;
	padding: 78px 24px 62px;
}

.page-header__title {
	font-size: clamp(32px, 4.4vw, 52px);
	margin: 0;
	max-width: 20ch;
}

.page-header__meta {
	margin: 0 0 12px;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pm-accent);
	font-weight: 600;
}

.entry-content {
	width: 100%;
}

/* Standardbreite für normale Blöcke */
.entry-content > *:not(.alignfull):not(.alignwide):not(.elementor):not(.pm-page):not(.pm-hero):not(.pm-section):not(.pm-jump) {
	max-width: var(--pm-narrow);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.entry-content > *:first-child {
	margin-top: 64px;
}

.entry-content > *:last-child {
	margin-bottom: 96px;
}

.entry-content > .elementor {
	max-width: none;
}

.alignwide {
	max-width: var(--pm-wide);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.alignfull {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.entry-media {
	margin: 0 0 34px;
	border-radius: 16px;
	overflow: hidden;
}

.entry-footer {
	margin: 48px auto 96px;
}

/* ==========================================================================
   5. Design-System
   ========================================================================== */

.pm-section {
	max-width: var(--pm-wide);
	margin: 0 auto;
	padding: 76px 24px;
}

.pm-section:last-child {
	padding-bottom: 96px;
}

.pm-eyebrow {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--pm-accent);
	margin: 0 0 16px;
	line-height: 1.4;
}

.pm-h2 {
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.14;
	margin: 0 0 20px;
}

.pm-h3 {
	font-size: 22px;
	margin: 52px 0 14px;
}

.pm-lead {
	font-size: 17px;
	line-height: 1.75;
	color: var(--pm-muted);
	max-width: 68ch;
	margin: 0;
}

.pm-note {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pm-muted);
}

.pm-note strong {
	color: var(--pm-accent);
	font-weight: 600;
}

/* Innenseiten ------------------------------------------------------------
 *
 * Der Rahmen ist breit, der Fließtext bleibt schmal. Lange Zeilen liest
 * niemand gern – ab etwa 80 Zeichen verliert das Auge beim Zeilenwechsel
 * die Spur. Bausteine wie Aufklapper, Vergleich, Karten und Formulare
 * haben dieses Problem nicht und dürfen die volle Breite nutzen.
 */
.pm-page {
	max-width: var(--pm-wide);
	margin: 0 auto;
	padding: 0 24px;
}

.pm-page > .wp-block-group__inner-container > p,
.pm-page > .wp-block-group__inner-container > h2,
.pm-page > .wp-block-group__inner-container > h3,
.pm-page > .wp-block-group__inner-container > h4,
.pm-page > .wp-block-group__inner-container > ul.wp-block-list,
.pm-page > .wp-block-group__inner-container > ol.wp-block-list,
.pm-page > p,
.pm-page > h2,
.pm-page > h3,
.pm-page > h4,
.pm-page > ul.wp-block-list,
.pm-page > ol.wp-block-list {
	max-width: var(--pm-read);
}

.pm-page--wide {
	max-width: var(--pm-wide);
}

.pm-page h3 {
	font-size: 22px;
	margin: 52px 0 14px;
}

.pm-page p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--pm-muted);
}

.pm-page .pm-lead {
	font-size: 18px;
	margin-bottom: 8px;
}

.pm-page a {
	color: var(--pm-accent);
}

/* Hero */
.pm-hero {
	position: relative;
	overflow: hidden;
	background: var(--pm-bg);
	border-bottom: 1px solid var(--pm-line);
}

.pm-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 130%;
	background: radial-gradient(60% 70% at 22% 12%, rgba(182, 146, 79, 0.14) 0%, rgba(182, 146, 79, 0) 70%);
	pointer-events: none;
}

.pm-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.pm-hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.68;
	transition: opacity 1.4s ease;
}

.pm-hero__media video.is-playing {
	opacity: 0.82;
}

.pm-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * Links bleibt es dunkel, sonst verliert die weiße Überschrift ihren
	 * Untergrund. Nach rechts hin ist die Abdunkelung deutlich schwächer
	 * als vorher (0.8/0.15 → 0.6/0.04), damit das Video sichtbar wird.
	 */
	background:
		linear-gradient(90deg, var(--pm-bg) 0%, rgba(16, 16, 16, 0.6) 40%, rgba(16, 16, 16, 0.04) 100%),
		linear-gradient(180deg, rgba(16, 16, 16, 0.34) 0%, rgba(16, 16, 16, 0) 30%, var(--pm-bg) 100%);
}

.pm-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--pm-wide);
	margin: 0 auto;
	padding: calc(var(--pm-header-h) + 82px) 24px 130px;
}

.pm-hero__title {
	font-size: clamp(42px, 5.6vw, 84px);
	line-height: 1.03;
	letter-spacing: -0.02em;
	margin: 0 0 26px;
	max-width: 15ch;
}

.pm-hero__sub {
	font-size: 19px;
	line-height: 1.7;
	color: var(--pm-muted);
	max-width: 58ch;
	margin: 0 0 40px;
}

/* Zwei Wege */
.pm-paths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 26px;
}

.pm-card {
	display: flex;
	flex-direction: column;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	padding: 42px 38px;
}

.pm-card h3 {
	margin: 0 0 16px;
	font-size: 26px;
	line-height: 1.25;
}

.pm-card p {
	margin: 0 0 24px;
	font-size: 16px;
	color: var(--pm-muted);
	line-height: 1.7;
}

.pm-card .pm-note {
	margin-top: 16px;
}

/* Listen mit Akzentpunkt */
.pm-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.pm-list li {
	position: relative;
	padding-left: 28px;
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--pm-muted);
	line-height: 1.55;
	list-style: none;
}

.pm-list li::marker {
	content: "";
}

.pm-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pm-accent);
}

/* Buttons */
.pm-btn {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 16px 32px;
	border-radius: 999px;
	background: var(--pm-accent);
	color: var(--pm-accent-ink);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid var(--pm-accent);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pm-btn:hover,
.pm-btn:focus {
	background: var(--pm-accent-hi);
	border-color: var(--pm-accent-hi);
	color: var(--pm-accent-ink);
}

.pm-btn--ghost {
	background: transparent;
	color: var(--pm-text);
	border-color: var(--pm-line);
}

.pm-btn--ghost:hover,
.pm-btn--ghost:focus {
	background: transparent;
	border-color: var(--pm-accent);
	color: var(--pm-accent);
}

.pm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 36px;
}

.pm-actions .pm-btn,
.pm-actions-left .pm-btn {
	margin-top: 0;
	align-self: auto;
}

.pm-actions--left {
	justify-content: flex-start;
	margin-top: 0;
}

.pm-actions-left {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
}

/* Ablauf in Schritten */
.pm-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 30px;
	margin-top: 48px;
	counter-reset: pmstep;
}

.pm-page .pm-steps {
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 34px;
}

.pm-step {
	position: relative;
	padding-top: 28px;
	border-top: 1px solid var(--pm-line);
}

.pm-step::before {
	counter-increment: pmstep;
	content: counter(pmstep, decimal-leading-zero);
	position: absolute;
	top: -10px;
	left: 0;
	padding-right: 14px;
	background: var(--pm-bg);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--pm-accent);
}

.pm-step h3,
.pm-step h4 {
	margin: 0 0 9px;
	font-size: 18px;
	line-height: 1.3;
}

.pm-step p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--pm-muted);
}

/* Branchen-Kacheln */
.pm-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
	margin-top: 44px;
}

.pm-tile {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.pm-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.pm-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 100%);
}

.pm-tile:hover img {
	transform: scale(1.05);
}

.pm-tile figcaption {
	position: absolute;
	z-index: 2;
	left: 26px;
	right: 26px;
	bottom: 22px;
	color: #ffffff;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
}

/* Leistungsraster */
.pm-grid4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1px;
	background: var(--pm-line);
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	overflow: hidden;
	margin-top: 44px;
}

.pm-grid4 > div {
	background: var(--pm-bg);
	padding: 34px 30px;
}

.pm-grid4 h4 {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.3;
}

.pm-grid4 p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--pm-muted);
}

/* Vertrauenspunkte */
.pm-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin-top: 44px;
}

.pm-trust > div {
	border-left: 2px solid var(--pm-accent);
	padding: 2px 0 2px 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pm-muted);
}

.pm-trust strong {
	display: block;
	margin-bottom: 5px;
	color: var(--pm-text);
	font-size: 16px;
}

.pm-trustline {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 26px 0 34px;
	padding: 0;
}

.pm-trustline li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	color: var(--pm-muted);
	list-style: none;
}

.pm-trustline li::marker {
	content: "";
}

.pm-trustline li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid var(--pm-accent);
}

/* Personen */
.pm-people {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 34px;
	margin-top: 44px;
}

.pm-person {
	border-top: 1px solid var(--pm-line);
	padding-top: 26px;
}

.pm-person .pm-person__photo {
	margin: 0 0 22px;
}

.pm-person .pm-person__photo img {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: 14px;
	border: 1px solid var(--pm-line);
	filter: grayscale(100%) contrast(1.04);
	transition: filter 0.35s ease;
}

.pm-person:hover .pm-person__photo img {
	filter: grayscale(0%);
}

@media (prefers-reduced-motion: reduce) {
	.pm-person .pm-person__photo img {
		transition: none;
	}
}

.pm-person h3,
.pm-person h4 {
	margin: 0 0 7px;
	font-size: 21px;
	line-height: 1.3;
}

.pm-person .pm-role {
	margin: 0 0 16px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pm-accent);
}

.pm-person p {
	font-size: 16px;
	color: var(--pm-muted);
	line-height: 1.7;
	margin: 0;
}

/* Dritte Spalte neben den beiden Porträts: der Hinweis aufs Team.
   Kein Foto, dafür mittig gesetzt, damit die Spalte nicht oben klebt. */
.pm-person--note {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top-color: rgba(182, 146, 79, 0.5);
}

.pm-person--note h3 {
	margin-bottom: 7px;
}

/* Abschluss-CTA */
.pm-cta {
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 20px;
	padding: 72px 48px;
	text-align: center;
}

.pm-cta .pm-lead {
	margin: 0 auto;
	max-width: 56ch;
}

.pm-phone {
	margin: 26px 0 0;
	font-size: 15px;
	color: var(--pm-muted);
}

.pm-phone a {
	color: var(--pm-text);
	text-decoration: none;
	border-bottom: 1px solid var(--pm-accent);
}

.pm-phone a:hover {
	color: var(--pm-accent);
}

/* Kontaktspalten */
.pm-contact {
	gap: 32px;
	margin-top: 10px;
}

.pm-contact h4 {
	font-size: 16px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.pm-contact p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
}

/* Eingebettete Stellenbörse */
.pm-embed {
	margin: 36px 0 10px;
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	background: var(--pm-surface);
	overflow: hidden;
}

.pm-embed__gate {
	padding: 52px 40px;
	text-align: center;
}

.pm-embed__title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 600;
	color: var(--pm-text);
}

.pm-embed__text {
	margin: 0 auto 28px;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pm-muted);
}

.pm-embed__alt {
	margin: 22px 0 0;
	font-size: 14px;
	color: var(--pm-muted);
}

.pm-embed.is-loaded {
	background: #ffffff;
}

.pm-embed__frame {
	display: block;
	width: 100%;
	height: 1150px;
	border: 0;
}

/* Google-Bewertungen */
.pm-reviews {
	margin: 68px 0 8px;
}

.pm-reviews__summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 26px 0 34px;
}

.pm-reviews__score {
	font-family: var(--pm-font-head);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--pm-text);
	font-variant-numeric: tabular-nums;
}

.pm-star {
	color: var(--pm-line);
	font-size: 20px;
	line-height: 1;
}

.pm-star.is-on {
	color: var(--pm-accent);
}

.pm-reviews__count {
	font-size: 15px;
	color: var(--pm-muted);
}

.pm-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.pm-review {
	margin: 0;
	padding: 26px 24px 22px;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pm-review__stars .pm-star {
	font-size: 15px;
}

.pm-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--pm-text);
	quotes: "\201E" "\201C";
}

.pm-review__text::before {
	content: open-quote;
}

.pm-review__text::after {
	content: close-quote;
}

.pm-review__meta {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 13.5px;
	color: var(--pm-muted);
}

.pm-review__author {
	font-weight: 600;
	color: var(--pm-text);
}

.pm-reviews__link {
	margin: 26px 0 0;
	font-size: 15px;
}

/* Karte */
/* Spamschutz-Feld: für Menschen unsichtbar, aber nicht per display:none –
   manche Bots ignorieren ausgeblendete Felder. */
.pm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Meldungen von WPZOOM Forms – das Plugin bringt hellgrüne bzw. hellrote
   Kästen mit, die im dunklen Layout wie ein Fremdkörper wirken. Wir stylen
   die Klassen des Plugins direkt, damit es auch ohne JavaScript passt. */
.pm-page div.notice {
	margin: 24px 0 0;
	padding: 22px 24px;
	border: 1px solid var(--pm-line);
	border-left-width: 3px;
	border-radius: 14px;
	background: var(--pm-surface);
	color: var(--pm-text);
	font-size: 16.5px;
	line-height: 1.7;
	box-shadow: none;
}

.pm-page div.notice p {
	margin: 0;
	color: var(--pm-text);
}

.pm-page div.notice p + p {
	margin-top: 10px;
}

.pm-page div.notice.success {
	background: var(--pm-surface);
	color: var(--pm-text);
	border-color: var(--pm-line);
	border-left-color: var(--pm-accent);
}

.pm-page div.notice.error {
	background: var(--pm-surface);
	color: var(--pm-text);
	border-color: var(--pm-line);
	border-left-color: #e0644f;
}

.pm-page div.notice:empty {
	display: none;
}

/* Bestätigung nach dem Absenden eines Formulars */
.pm-formmsg {
	margin: 0;
	padding: 22px 24px;
	border: 1px solid var(--pm-accent);
	border-left-width: 3px;
	border-radius: 14px;
	background: var(--pm-surface);
	color: var(--pm-text);
	font-size: 16.5px;
	line-height: 1.7;
}

.pm-formmsg:focus {
	outline: none;
}

.pm-formmsg:empty {
	display: none;
}

.pm-formmsg p {
	margin: 0;
}

.pm-formmsg p + p {
	margin-top: 10px;
}

/* Vertrauensblock: Tarifsiegel und kununu */
.pm-proof {
	margin: 38px 0 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--pm-line);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 22px 28px;
}

.pm-proof__seal {
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 104px;
}

.pm-proof__body {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-left: 2px solid var(--pm-accent);
	padding: 2px 0 2px 20px;
}

.pm-proof__item {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--pm-muted);
}

.pm-proof__item strong {
	color: var(--pm-text);
	font-weight: 600;
}

.pm-map {
	margin: 34px 0 6px;
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	overflow: hidden;
	background: var(--pm-surface);
}

.pm-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	filter: grayscale(38%) contrast(1.05) brightness(0.94);
}

.pm-map__note {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--pm-muted);
}

@media (max-width: 700px) {
	.pm-map iframe {
		height: 300px;
	}

	.pm-reviews__score {
		font-size: 34px;
	}
}

/* Instagram-Feed (WPZOOM) */
.pm-insta {
	margin: 34px 0 6px;
}

.pm-insta .zoom-instagram-widget__header {
	margin-bottom: 24px;
	align-items: center;
}

.pm-insta .zoom-instagram-widget__header-user,
.pm-insta .zoom-instagram-widget__header-user a {
	color: var(--pm-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.pm-insta .zoom-instagram-widget__footer {
	margin-top: 26px;
}

.pm-insta .wpz-insta-view-on-insta-button,
.pm-insta .wpzinsta-pro-load-more-btn {
	background: var(--pm-accent);
	border: 0;
	border-radius: 999px;
	padding: 12px 24px;
	color: var(--pm-accent-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.2s ease;
}

.pm-insta .wpz-insta-view-on-insta-button:hover,
.pm-insta .wpzinsta-pro-load-more-btn:hover {
	background: var(--pm-accent-hi);
	color: var(--pm-accent-ink);
}

.pm-insta .wpzinsta-pro-load-more-btn {
	background: transparent;
	border: 1px solid var(--pm-line);
	color: var(--pm-text);
}

.pm-insta .wpzinsta-pro-load-more-btn:hover {
	background: var(--pm-surface);
	border-color: var(--pm-accent);
	color: var(--pm-text);
}

.pm-insta .zoom-instagram-widget__item {
	border-radius: 12px;
	overflow: hidden;
}

.pm-formnote {
	margin-top: 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pm-dim);
}

/* ==========================================================================
   6. Blog
   ========================================================================== */

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin: 64px 0 0;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	overflow: hidden;
}

.post-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 30px 28px 32px;
}

.post-card__meta {
	margin: 0 0 10px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pm-dim);
}

.post-card__title {
	margin: 0 0 12px;
	font-size: 21px;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--pm-text);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--pm-accent);
}

.post-card__excerpt {
	color: var(--pm-muted);
	font-size: 15.5px;
	margin-bottom: 24px;
}

.post-card__excerpt p:last-child {
	margin-bottom: 0;
}

.post-card .pm-btn {
	margin-top: auto;
}

.pagination {
	margin: 56px 0 96px;
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pagination a,
.pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--pm-text);
	font-size: 15px;
}

.pagination .current {
	background: var(--pm-accent);
	border-color: var(--pm-accent);
	color: var(--pm-accent-ink);
	font-weight: 600;
}

/* ==========================================================================
   7. Formulare
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 10px;
	color: var(--pm-text);
	font-family: inherit;
	font-size: 16px;
	padding: 14px 16px;
}

input::placeholder,
textarea::placeholder {
	color: #6f7278;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--pm-accent);
	outline: none;
}

textarea {
	min-height: 180px;
	resize: vertical;
}

label {
	color: var(--pm-muted);
	font-size: 15px;
}

/* Eingabefelder über die volle Seitenbreite lesen sich schlecht – der Weg
   vom Label zum Feldende ist zu weit. Deshalb bleibt das Formular schmaler
   als die Seite und steht ab 860 px in zwei Spalten. */
.pm-page .wpzoom-forms_form {
	max-width: 900px;
}

/* Eine Telefonnummer darf nicht mitten in der Vorwahl umbrechen. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Download-Kasten (AGB als PDF) ------------------------------------------ */
.pm-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 30px 0 10px;
	padding: 24px 26px;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-left: 2px solid var(--pm-accent);
	border-radius: 16px;
}

.pm-download__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.pm-download__text strong {
	font-size: 18px;
}

.pm-download__text span {
	font-size: 14px;
	color: var(--pm-dim);
}

.pm-download .pm-btn {
	margin-top: 0;
	padding: 13px 26px;
}

/* Inhaltsübersicht der AGB ------------------------------------------------ */
.pm-agbliste {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: pmagb;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 10px 32px;
}

.pm-agbliste li {
	position: relative;
	padding-left: 38px;
	color: var(--pm-muted);
	line-height: 1.55;
}

.pm-agbliste li::before {
	counter-increment: pmagb;
	content: counter(pmagb, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--pm-accent);
	font-variant-numeric: tabular-nums;
}

/* Zweispaltiges Formular.

   Die Paare aus Beschriftung und Feld werden von `navigation.js` in
   `.pm-feld` eingepackt. Vorher stand hier eine Platzierung über
   `:nth-child` – die ist zerbrochen, sobald irgendetwas ein zusätzliches
   Element in das Formular schiebt (eine Chrome-Erweiterung, die
   Telefonnummern erkennt, hat genau das getan). Über die Hüllen ist die
   Reihenfolge egal, und ein zusätzliches Feld ordnet sich von selbst ein.

   Ohne JavaScript bleibt es einspaltig – das Formular funktioniert
   trotzdem vollständig. */
.pm-page .pm-form--zweispaltig {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	column-gap: 26px;
	align-items: start;
}

.pm-page .pm-form--zweispaltig .pm-feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
}

/* Freitextfelder und die Fußzeile über die ganze Breite. */
.pm-page .pm-form--zweispaltig .pm-feld--breit,
.pm-page .pm-form--zweispaltig > .wp-block-columns {
	grid-column: 1 / -1;
}

/* Was sonst noch im Formular liegt – eingeschleuste Hüllen von
   Browser-Erweiterungen zum Beispiel – soll keine Rasterzelle belegen. */
.pm-page .pm-form--zweispaltig > :not(.pm-feld):not(.wp-block-columns) {
	display: contents;
}

button,
input[type="submit"],
.wp-block-button__link {
	appearance: none;
	background: var(--pm-accent);
	color: var(--pm-accent-ink);
	border: 1px solid var(--pm-accent);
	border-radius: 999px;
	padding: 15px 32px;
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	cursor: pointer;
	width: auto;
	transition: background-color 0.2s ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background: var(--pm-accent-hi);
	border-color: var(--pm-accent-hi);
	/*
	 * Wichtig: Ohne diese Zeile gewinnt die allgemeine Regel a:hover
	 * (Spezifität 0,1,1) über .wp-block-button__link (0,1,0) – die Schrift
	 * nimmt dann die Hover-Akzentfarbe an und ist auf dem gleichfarbigen
	 * Knopf unsichtbar.
	 */
	color: var(--pm-accent-ink);
}

/* Gutenberg-Knöpfe sind Links – Unterstreichung raus. */
.wp-block-button__link,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	text-decoration: none;
}

.search-form {
	display: flex;
	gap: 10px;
}

/* ==========================================================================
   8. Fußzeile
   ========================================================================== */

.site-footer {
	background: var(--pm-surface);
	border-top: 1px solid var(--pm-line);
	color: var(--pm-muted);
}

.site-footer__inner {
	max-width: var(--pm-wide);
	margin: 0 auto;
	padding: 66px 24px 34px;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
}

.site-footer .widget-title {
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pm-text);
	margin: 0 0 18px;
	font-weight: 600;
}

.site-footer .widget {
	font-size: 15.5px;
	line-height: 1.75;
}

.site-footer .widget p {
	margin: 0 0 14px;
}

.site-footer .widget strong {
	color: var(--pm-text);
}

.site-footer .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.site-footer .widget ul li {
	margin: 0;
}

.site-footer .widget a {
	color: var(--pm-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer .widget a:hover {
	color: var(--pm-accent);
	border-bottom-color: var(--pm-accent);
}

.pm-badges {
	display: flex;
	align-items: center;
}

.pm-badges__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px 30px;
}

.pm-badges__item {
	margin: 0;
	display: flex;
	align-items: center;
}

/* Fremde Marken werden unverändert gezeigt: keine Farbfilter, volle Deckkraft. */
.pm-badges img {
	display: block;
	width: auto;
	height: 58px;
	transition: transform 0.3s ease;
}

/* Hochformatige Siegel brauchen mehr Höhe, sonst ist die Jahreszahl weg. */
.pm-badges__item--hoch img {
	height: 96px;
}

.pm-badges a {
	display: block;
	border-bottom: 0;
}

.pm-badges a:hover img,
.pm-badges a:focus-visible img {
	transform: translateY(-2px);
}

.site-footer__bottom {
	margin-top: 54px;
	padding-top: 26px;
	border-top: 1px solid var(--pm-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.site-footer__copyright {
	margin: 0;
}

.footer-navigation ul {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.footer-navigation a {
	color: var(--pm-muted);
	text-decoration: none;
}

.footer-navigation a:hover {
	color: var(--pm-accent);
}

/* ==========================================================================
   9. Stellenbörse (zvoove Recruit Jobboard)
   Das Plugin gibt die Struktur vor, die Klassennamen kommen aus den
   Plugin-Einstellungen (Menü "zvoove Recruit Jobboard"). Vorsicht beim
   Umbenennen: die Namen stehen dort in der Datenbank, nicht hier.
   Wichtig: Bewerben-Link und Merkmale liegen INNERHALB des h4 der
   Stellenüberschrift – deshalb wird das h4 zum Raster gemacht.
   ========================================================================== */

.pm-jobnote {
	margin: 26px 0 0;
	padding: 14px 18px;
	border-left: 2px solid var(--pm-accent);
	background: var(--pm-surface);
	border-radius: 0 10px 10px 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--pm-muted);
}

.pm-page .pm-jobnote {
	color: var(--pm-muted);
}

/* --- Filterzeile --- */

/*
 * Die Suchbox ist der wichtigste Bedienpunkt der Seite und geht im dunklen
 * Design sonst als weiterer grauer Kasten unter. Deshalb goldener Rahmen,
 * ein angedeuteter Schein darum und eine Akzentkante oben – zurückhaltend
 * genug, um nicht mit den Bewerben-Knöpfen zu konkurrieren.
 */
#zrjb-item-search-form,
.pm-jobfilter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin: 30px 0 26px;
	padding: 24px 24px 22px;
	background:
		linear-gradient(180deg, rgba(182, 146, 79, 0.07) 0%, rgba(182, 146, 79, 0) 120px),
		var(--pm-surface-2);
	border: 1px solid rgba(182, 146, 79, 0.42);
	border-radius: 16px;
	box-shadow: 0 0 0 4px rgba(182, 146, 79, 0.06);
	overflow: hidden;
}

/* Akzentkante an der Oberkante der Suchbox */
#zrjb-item-search-form::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--pm-accent) 0%, rgba(182, 146, 79, 0.15) 100%);
}

/* Der Plugin-Wrapper zwischen Formular und Feldern wird durchsichtig,
   damit die Felder selbst Flex-Elemente des Formulars sind. */
#zrjb-item-search-form > div:not([class*="zrjb-filter"]) {
	display: contents;
}

#zrjb-item-search-form .zrjb-filter-keywords-wrapper,
#zrjb-item-search-form .zrjb-filter-umkreis-wrapper,
#zrjb-item-search-form .zrjb-filter-abteilung-wrapper,
#zrjb-item-search-form .zrjb-filter-vertragsart-wrapper,
#zrjb-item-search-form .zrjb-filter-reset-link-wrapper,
.pm-jobfilter > div {
	flex: 1 1 230px;
	min-width: 0;
	position: relative;
}

#zrjb-item-search-form .zrjb-filter-keywords-wrapper label,
#zrjb-item-search-form .zrjb-filter-umkreis-wrapper::before,
#zrjb-item-search-form .zrjb-filter-abteilung-wrapper::before,
#zrjb-item-search-form .zrjb-filter-vertragsart-wrapper::before {
	display: block;
	margin-bottom: 7px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pm-accent);
	line-height: 1.3;
}

#zrjb-item-search-form .zrjb-filter-umkreis-wrapper::before {
	content: "Ort und Umkreis";
}

#zrjb-item-search-form .zrjb-filter-abteilung-wrapper::before {
	content: "Bereich";
}

#zrjb-item-search-form .zrjb-filter-vertragsart-wrapper::before {
	content: "Vertragsart";
}

#zrjb-item-search-form .zrjb-filter-umkreis-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 2 1 340px;
}

#zrjb-item-search-form .zrjb-filter-umkreis-wrapper::before {
	flex: 0 0 100%;
	margin-bottom: 0;
}

#zrjb-item-search-form .zrjb-filter-umkreis-wrapper > .select2-container {
	flex: 1 1 170px;
	min-width: 0;
}

/* Der Umkreisradius sitzt in einem eigenen span ohne Klasse – es ist das
   letzte span im Wrapper. */
#zrjb-item-search-form .zrjb-filter-umkreis-wrapper > span:last-of-type {
	flex: 0 0 130px;
}

#zrjb-item-search-form input[type="text"],
#zrjb-item-search-form input[type="search"],
#zrjb-item-search-form select {
	height: 52px;
	padding: 13px 16px;
	background: var(--pm-surface);
}

#zrjb-item-search-form .zrjb-filter-reset-link-wrapper,
#zrjb-item-search-form .pm-jobfilter__reset {
	flex: 0 0 100%;
	margin: 0;
	padding-top: 0;
}

#zrjb-item-search-form .zrjb-filter-reset-link-wrapper::before {
	content: none;
}

#zrjb-item-search-form .zrjb-filter-reset-link-wrapper a {
	font-size: 14px;
	color: var(--pm-dim);
	text-decoration: underline;
	text-decoration-color: var(--pm-line);
	text-underline-offset: 3px;
}

#zrjb-item-search-form .zrjb-filter-reset-link-wrapper a:hover,
#zrjb-item-search-form .zrjb-filter-reset-link-wrapper a:focus {
	color: var(--pm-accent);
	text-decoration-color: var(--pm-accent);
}

/* Leere Auswahlfelder gar nicht erst zeigen – kommt vor, wenn Recruit für
   Abteilung oder Vertragsart keine Katalogwerte liefert. */
#zrjb-item-search-form select.zrjb-filter-multiselect:not([data-has-options]) {
	display: none;
}

/* --- Trefferzeile und Liste --- */

.pm-joblist {
	display: grid;
	gap: 14px;
	margin-top: 8px;
}

.pm-job__counter {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--pm-dim);
	margin-bottom: 4px;
}

.pm-job {
	display: flex;
	flex-direction: column;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	padding: 22px 24px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pm-job:hover,
.pm-job:focus-within {
	border-color: rgba(182, 146, 79, 0.55);
	background: var(--pm-surface-2);
}

.pm-job__title {
	margin: 0;
}

/* Das h4 ist der Container für Titel, Bewerben-Link und Merkmale. */
.pm-job__title h4,
.pm-page .pm-job__title h4 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 10px 24px;
	margin: 0;
	font-family: var(--pm-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

a.pm-job__link {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--pm-font-head);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pm-text);
	text-decoration: none;
	overflow-wrap: break-word;
	hyphens: auto;
}

a.pm-job__link:hover,
a.pm-job__link:focus {
	color: var(--pm-accent);
	text-decoration: none;
}

a.pm-job__apply {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	white-space: nowrap;
	padding: 10px 20px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	background: transparent;
	color: var(--pm-text);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.pm-job__apply:hover,
a.pm-job__apply:focus {
	background: var(--pm-accent);
	border-color: var(--pm-accent);
	color: var(--pm-accent-ink);
	text-decoration: none;
}

.pm-job__meta {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 14.5px;
	color: var(--pm-muted);
}

.pm-job__meta .zrjb-joblist-property-icon-and-value {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.pm-job__meta .material-icons {
	font-size: 17px;
	line-height: 1;
	color: var(--pm-accent);
	flex: 0 0 auto;
}

.pm-job__dateline {
	margin: 0 0 8px;
	order: -1;
}

.pm-job__date {
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--pm-dim);
}

/* --- Blätterzeile --- */

.pm-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 28px 0 0;
}

.pm-pager__btn {
	display: inline-block;
	min-width: 42px;
	padding: 10px 15px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	background: transparent;
	color: var(--pm-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pm-pager__btn:hover,
.pm-pager__btn:focus {
	border-color: var(--pm-accent);
	background: transparent;
	color: var(--pm-accent);
}

.pm-pager__btn.is-current {
	background: var(--pm-accent);
	border-color: var(--pm-accent);
	color: var(--pm-accent-ink);
}

.pm-pager__btn.is-current:hover,
.pm-pager__btn.is-current:focus {
	background: var(--pm-accent-hi);
	border-color: var(--pm-accent-hi);
	color: var(--pm-accent-ink);
}

.pm-pager__btn.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- select2 (nur dieses Plugin nutzt es) --- */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	height: 52px;
	background: var(--pm-surface);
	border: 1px solid var(--pm-line);
	border-radius: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 34px 0 16px;
	color: var(--pm-text);
	font-size: 16px;
	line-height: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #6f7278;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 50px;
	right: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--pm-muted) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--pm-muted) transparent;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--pm-accent);
}

.select2-dropdown {
	background: var(--pm-surface-2);
	border: 1px solid var(--pm-line);
	border-radius: 10px;
	color: var(--pm-text);
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--pm-bg);
	border: 1px solid var(--pm-line);
	border-radius: 8px;
	color: var(--pm-text);
	padding: 10px 12px;
}

.select2-container--default .select2-results__option {
	padding: 10px 14px;
	font-size: 15px;
	color: var(--pm-muted);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--pm-accent);
	color: var(--pm-accent-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--pm-surface);
	color: var(--pm-text);
}

.select2-container--default .select2-results__message {
	color: var(--pm-dim);
}

/* Auszeichnungen nebeneinander (kununu-Jahressiegel auf „Über uns").
   Fremde Marken bleiben unverändert – kein Graustufenfilter, keine
   reduzierte Deckkraft, wie bei .pm-badges im Fußbereich. */
.pm-awards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 22px;
	margin: 30px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--pm-line);
}

.pm-awards img {
	height: 92px;
	width: auto;
	display: block;
}

.pm-awards__note {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pm-muted);
}

.pm-awards__note strong {
	display: block;
	color: var(--pm-text);
	font-size: 16px;
	margin-bottom: 4px;
}

@media (max-width: 600px) {
	.pm-awards img {
		height: 68px;
	}

	.pm-awards {
		gap: 14px 16px;
	}
}

/* --- Bewerbungsformular des Jobboards ---
   Das Plugin gibt fast klassenlose divs aus. Der Container trägt die Klasse
   aus der Einstellung "CSS-Class des Formular-Containers" (pm-appform),
   alles darunter wird über die Reihenfolge angesprochen:
   1 = persönliche Daten, 2 = Anlagen, 3 = Meldung, 4 = Einwilligung + Senden.
   Ändert sich der Feldbestand im Plugin, hier gegenprüfen. */

.pm-appform {
	margin-top: 10px;
}

.pm-appform h2 {
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.2;
}

.pm-appform p {
	color: var(--pm-muted);
}

.pm-appform label {
	display: block;
	margin: 0 0 7px;
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--pm-muted);
}

/* 1 – persönliche Daten */
.pm-appform form > div:nth-of-type(1) > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	margin-top: 22px;
}

.pm-appform form > div:nth-of-type(1) > div > div:nth-child(1) {
	grid-column: 1 / -1;
	max-width: 240px;
}

.pm-appform form > div:nth-of-type(1) > div > div:nth-child(4) {
	grid-column: 1 / -1;
}

/* 2 – Anlagen */
.pm-appform form > div:nth-of-type(2) {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--pm-line);
}

.pm-appform form > div:nth-of-type(2) p:first-of-type {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pm-text);
}

.pm-appform form > div:nth-of-type(2) p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pm-dim);
}

.pm-appform .zrjb-file-upload-button {
	margin-top: 14px;
	padding: 12px 24px;
	background: transparent;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	color: var(--pm-text);
	font-size: 14px;
	font-weight: 600;
}

.pm-appform .zrjb-file-upload-button:hover,
.pm-appform .zrjb-file-upload-button:focus {
	background: transparent;
	border-color: var(--pm-accent);
	color: var(--pm-accent);
}

.pm-appform .zrjb-file-upload-container {
	display: grid;
	gap: 8px;
}

/* 3 – Meldung */
.pm-appform form > div:nth-of-type(3):has(.pm-formmsg:empty) {
	display: none;
}

.pm-appform form > div:nth-of-type(3) {
	margin-top: 24px;
}

/* 4 – Einwilligung und Senden */
.pm-appform form > div:nth-of-type(4) {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--pm-line);
	display: grid;
	gap: 18px;
	justify-items: start;
}

.pm-appform form > div:nth-of-type(4) label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pm-muted);
}

.pm-appform input[type="checkbox"] {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--pm-accent);
}

.pm-appform form > div:nth-of-type(4) p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pm-dim);
}

.pm-appform .zrjb-send-form-button {
	margin-top: 4px;
}

/* --- Stellendetails --- */

.pm-jobdetail {
	margin-bottom: 10px;
}

.pm-jobdetail h1,
.pm-jobdetail h2,
.pm-jobdetail h3,
.pm-jobdetail h4 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Die Stellenüberschrift ist auf der Detailseite die H1 – der graue
   Seitenkopf ist dort abgeschaltet (siehe pmhr_show_page_header()). */
.pm-jobdetail .pm-jobtitle {
	margin: 0 0 6px;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.pm-jobdetail .pm-jobid {
	margin: 0 0 34px;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--pm-dim);
}

.pm-jobdetail p,
.pm-jobdetail li {
	color: var(--pm-muted);
	line-height: 1.75;
}

.pm-jobdetail ul {
	padding-left: 20px;
}

.pm-jobdetail ul li {
	margin-bottom: 8px;
}

.pm-jobdetail .zrjb-jobdetail-property-icon-and-value,
.pm-jobdetail .zrjb-jobdetails-property-icon-and-value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pm-jobdetail .material-icons {
	font-size: 18px;
	line-height: 1;
	color: var(--pm-accent);
}

/* ==========================================================================
   10. Kleinere Bildschirme
   ========================================================================== */

@media (max-width: 900px) {
	:root {
		--pm-header-h: 74px;
	}

	.pm-section {
		padding: 56px 20px;
	}

	/* Die Sprungleiste rückt mit dem Seiteninhalt nach innen. */
	.pm-jump {
		padding: 10px 20px;
	}

	.pm-jump .pm-chips {
		max-width: calc(var(--pm-wide) - 40px);
	}

	.pm-hero__inner {
		padding: calc(var(--pm-header-h) + 56px) 20px 90px;
	}

	.pm-hero__sub {
		font-size: 17px;
	}

	.pm-card {
		padding: 32px 26px;
	}

	.pm-cta {
		padding: 48px 26px;
	}

	.pm-paths {
		grid-template-columns: 1fr;
	}

	.page-header__inner {
		padding: 56px 20px 44px;
	}

	.pm-page,
	.entry-content > *:not(.alignfull):not(.alignwide):not(.elementor):not(.pm-page):not(.pm-hero):not(.pm-section):not(.pm-jump) {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pm-embed__gate {
		padding: 36px 22px;
	}

	.pm-embed__frame {
		height: 820px;
	}

	.site-footer__inner {
		padding: 52px 20px 30px;
	}
}

@media (max-width: 600px) {
	/* Stellenkarte: Bewerben-Link unter den Titel, nicht daneben. */
	.pm-job__title h4,
	.pm-page .pm-job__title h4 {
		grid-template-columns: minmax(0, 1fr);
	}

	a.pm-job__apply {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
		margin-top: 4px;
	}

	.pm-job__meta {
		grid-row: 2;
	}

	.pm-job {
		padding: 20px 18px;
	}

	#zrjb-item-search-form,
	.pm-jobfilter {
		padding: 18px;
		gap: 14px;
	}

	#zrjb-item-search-form .zrjb-filter-keywords-wrapper,
	#zrjb-item-search-form .zrjb-filter-umkreis-wrapper,
	#zrjb-item-search-form .zrjb-filter-abteilung-wrapper,
	#zrjb-item-search-form .zrjb-filter-vertragsart-wrapper {
		flex: 0 0 100%;
	}

	.pm-appform form > div:nth-of-type(1) > div {
		grid-template-columns: minmax(0, 1fr);
	}

	.pm-appform form > div:nth-of-type(1) > div > div:nth-child(1) {
		max-width: none;
	}

	#zrjb-item-search-form .zrjb-filter-umkreis-wrapper > .select2-container,
	#zrjb-item-search-form .zrjb-filter-umkreis-wrapper > span:last-of-type {
		flex: 0 0 100%;
	}

	.pm-page .pm-steps {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( max-width: 600px ) {

	.pm-badges img {
		height: 48px;
	}

	.pm-badges__item--hoch img {
		height: 78px;
	}

	.pm-proof__seal {
		height: 84px;
	}

	.pm-badges__list {
		gap: 14px 22px;
	}
}

@media ( max-width: 760px ) {

	h1,
	h2,
	h3,
	p,
	li {
		hyphens: auto;
	}
}

/* Bürobilder ------------------------------------------------------------- */
.pm-officepix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin: 38px 0 6px;
}

.pm-officepix figure {
	margin: 0;
}

.pm-officepix img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.pm-officepix figcaption {
	margin-top: 10px;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--pm-muted);
}

.pm-officepix--single {
	grid-template-columns: minmax(0, 620px);
	margin: 32px 0 34px;
}

@media (max-width: 700px) {
	.pm-officepix {
		gap: 18px;
	}
}

/* Fingerfreundliche Trefferflächen im Fuß (nur auf Touch-Geräten) ---------- */
@media (max-width: 782px) {
	.site-footer .widget ul {
		gap: 2px;
	}

	.site-footer .widget ul li a,
	.site-footer .widget p a {
		display: inline-block;
		padding: 8px 0;
	}

	.footer-navigation ul {
		gap: 10px 24px;
	}

	.footer-navigation a {
		display: inline-block;
		padding: 8px 0;
	}
}

/* ==========================================================================
   Aufklappbare Leistungsbereiche
   ==========================================================================
   Gebaut mit <details>/<summary>: funktioniert ohne JavaScript, ist mit der
   Tastatur bedienbar, und der Text steht immer im Quelltext – Google liest
   ihn also auch dann, wenn er zugeklappt ist.
   ========================================================================== */
.pm-acc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 34px 0 8px;
}

.pm-acc__item {
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	background: var(--pm-surface);
	overflow: hidden;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.pm-acc__item:hover {
	border-color: rgba(182, 146, 79, 0.42);
}

.pm-acc__item[open] {
	border-color: rgba(182, 146, 79, 0.5);
	background: rgba(182, 146, 79, 0.05);
}

.pm-acc__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none;
}

.pm-acc__head::-webkit-details-marker {
	display: none;
}

.pm-acc__head:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: -3px;
	border-radius: 13px;
}

.pm-acc__num {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--pm-accent);
	font-variant-numeric: tabular-nums;
}

.pm-acc__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--pm-text);
}

.pm-acc__teaser {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--pm-muted);
}

.pm-acc__icon {
	position: relative;
	width: 30px;
	height: 30px;
	border: 1px solid var(--pm-line);
	border-radius: 50%;
	flex: 0 0 auto;
	transition: border-color 0.25s ease, transform 0.3s ease;
}

.pm-acc__icon::before,
.pm-acc__icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 12px;
	height: 1.5px;
	background: var(--pm-accent);
	transform: translate(-50%, -50%);
	transition: opacity 0.25s ease, transform 0.3s ease;
}

.pm-acc__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.pm-acc__item[open] .pm-acc__icon {
	border-color: rgba(182, 146, 79, 0.55);
}

.pm-acc__item[open] .pm-acc__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

.pm-acc__body {
	padding: 0 22px 22px 68px;
	animation: pm-acc-in 0.28s ease both;
}

.pm-acc__body p {
	margin: 0 0 14px;
	color: var(--pm-muted);
}

.pm-acc__body p:last-child {
	margin-bottom: 0;
}

.pm-acc__body ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pm-acc__body li {
	position: relative;
	padding-left: 20px;
	color: var(--pm-text);
	font-size: 15px;
	line-height: 1.5;
}

.pm-acc__body li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pm-accent);
}

@keyframes pm-acc-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pm-acc__body { animation: none; }
	.pm-acc__icon,
	.pm-acc__icon::before,
	.pm-acc__icon::after,
	.pm-acc__item { transition: none; }
}

@media (max-width: 600px) {
	.pm-acc__head {
		padding: 16px 16px;
		gap: 12px;
	}

	.pm-acc__title {
		font-size: 17px;
	}

	.pm-acc__body {
		padding: 0 16px 18px 16px;
	}
}

/* ==========================================================================
   Sanftes Einblenden beim Scrollen
   ==========================================================================
   Die Startwerte hängen an .pm-js – die Klasse setzt erst das Skript. Ohne
   JavaScript ist also alles von Anfang an sichtbar.
   ========================================================================== */
/*
 * Bewusst `translate`/`scale` statt `transform`: Diese Eigenschaften
 * überlagern sich mit dem `transform` der Neige-Effekte, statt es zu
 * überschreiben. Sonst würden sich Einblendung und Mausneigung gegenseitig
 * ausknipsen.
 */
.pm-js .pm-reveal {
	opacity: 0;
	translate: 0 22px;
	transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, translate;
}

.pm-js .pm-reveal.is-in {
	opacity: 1;
	translate: none;
}

/* Bilder kommen zusätzlich ein Stück heran. */
.pm-js .pm-tile.pm-reveal,
.pm-js .pm-officepix figure.pm-reveal,
.pm-js .pm-person.pm-reveal {
	scale: 0.975;
}

.pm-js .pm-tile.pm-reveal.is-in,
.pm-js .pm-officepix figure.pm-reveal.is-in,
.pm-js .pm-person.pm-reveal.is-in {
	scale: none;
}

@media (prefers-reduced-motion: reduce) {
	.pm-js .pm-reveal {
		opacity: 1;
		translate: none;
		scale: none;
		transition: none;
	}
}

/* Schritte: Nummer und Trennlinie erscheinen beim Hereinscrollen ---------- */
.pm-step {
	overflow: visible;
}

.pm-step::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 1px;
	width: 100%;
	background: var(--pm-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pm-js .pm-step.is-in::after {
	transform: scaleX(1);
}

.pm-step::before {
	transition: color 0.45s ease 0.15s, transform 0.45s ease 0.15s;
}

.pm-js .pm-step.pm-reveal::before {
	color: var(--pm-dim);
}

.pm-js .pm-step.is-in::before {
	color: var(--pm-accent);
}

@media (prefers-reduced-motion: reduce) {
	.pm-step::after { transform: scaleX(1); transition: none; }
	.pm-step::before { transition: none; }
}


/* ==========================================================================
   Häufige Fragen mit Umschalter
   ========================================================================== */
.pm-tabs {
	margin: 30px 0 8px;
}

.pm-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	border-bottom: 1px solid var(--pm-line);
}

.pm-tabs__btn {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 10px 4px 12px;
	margin-right: 22px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--pm-dim);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.pm-tabs__btn:hover {
	color: var(--pm-text);
}

.pm-tabs__btn[aria-selected="true"] {
	color: var(--pm-accent);
	border-bottom-color: var(--pm-accent);
}

.pm-tabs__btn:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Ohne JavaScript stehen beide Bereiche untereinander – mit Zwischentitel. */
.pm-tabs__list {
	display: none;
}

.pm-tabs.is-ready .pm-tabs__list {
	display: flex;
}

.pm-tabs.is-ready .pm-tabs__panel > h4 {
	display: none;
}

.pm-tabs__panel > h4 {
	margin: 26px 0 12px;
	font-size: 17px;
	color: var(--pm-accent);
}

.pm-tabs__claim {
	margin: 0 0 14px;
	max-width: var(--pm-read);
	font-size: 19px;
	line-height: 1.45;
	color: var(--pm-text);
}

.pm-tabs__intro {
	margin: 0 0 14px;
	max-width: var(--pm-read);
	color: var(--pm-muted);
}

.pm-tabs__intro:last-of-type {
	margin-bottom: 0;
}

.pm-tabs__sub {
	margin: 30px 0 -6px;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pm-dim);
}

.pm-checks--tight {
	margin-top: 18px;
	gap: 10px 28px;
}

/* Sprungmarken: bleiben beim Scrollen oben stehen ------------------------- */
.pm-jump {
	position: sticky;
	top: var(--pm-header-h);
	z-index: 40;
	padding: 12px 24px;
	border-top: 1px solid var(--pm-line);
	border-bottom: 1px solid var(--pm-line);
	background: rgba(16, 16, 16, 0.94);
	backdrop-filter: saturate(140%) blur(10px);
}

/* Auf Unterseiten sitzt die Leiste im Textrahmen und darf seitlich
   bis an dessen Rand reichen; auf der Startseite geht sie über die
   ganze Breite, die Liste darin bleibt aber im Raster. */
.pm-page .pm-jump {
	margin: 34px -24px 10px;
}

.admin-bar .pm-jump {
	top: calc(var(--pm-header-h) + 32px);
}

/* Die Liste sitzt im selben Raster wie der Seiteninhalt – sonst klebt sie
   auf der Startseite am linken Bildschirmrand, während sie auf den
   Unterseiten im Textrahmen steht. */
.pm-jump .pm-chips {
	max-width: calc(var(--pm-wide) - 48px);
	margin: 0 auto;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.pm-jump .pm-chips::-webkit-scrollbar {
	display: none;
}

.pm-jump .pm-chips li {
	flex: 0 0 auto;
}

.pm-jump .pm-chips a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 14px;
	white-space: nowrap;
}

.pm-chips__nr {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--pm-dim);
	font-variant-numeric: tabular-nums;
}

.pm-jump .pm-chips a[aria-current="true"] {
	border-color: var(--pm-accent);
	color: var(--pm-accent-hi);
	background: rgba(182, 146, 79, 0.14);
}

.pm-jump .pm-chips a[aria-current="true"] .pm-chips__nr {
	color: var(--pm-accent);
}

/* Damit der feste Kopf und die Sprungleiste ein angesprungenes Kapitel
   nicht verdecken. */
[id^="abschnitt-"] {
	scroll-margin-top: calc(var(--pm-header-h) + 96px);
}

/* Abschnitte sichtbar voneinander trennen und durchnummerieren ------------ */
.pm-page h3[id^="abschnitt-"] {
	margin-top: 76px;
	border-top: 1px solid var(--pm-line);
	padding-top: 30px;
}

/* Der erste Abschnitt steht direkt unter der Sprungleiste – die hat schon
   eine Linie, eine zweite darunter wäre ein doppelter Strich. */
.pm-page h3[id^="abschnitt-"]:first-of-type {
	margin-top: 40px;
	border-top: 0;
	padding-top: 0;
}

/* Abschnitte bekommen nur eine Trennlinie. Eine Nummer über der
   Überschrift wäre doppelt gemoppelt: In den Ablauf-Abschnitten zählen
   die Schritte selbst von 01 bis 04, und zwei gleich aussehende
   Zahlenreihen übereinander verwirren mehr, als sie ordnen. Die
   Nummerierung steht deshalb nur in der Sprungleiste. */
.pm-section[id^="abschnitt-"] {
	border-top: 1px solid var(--pm-line);
}



.pm-faq {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pm-faq__item {
	border-bottom: 1px solid var(--pm-line);
}

.pm-faq__q {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 17px 2px;
	margin: 0;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pm-text);
	cursor: pointer;
	list-style: none;
	transition: color 0.2s ease;
}

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

.pm-faq__q:hover {
	color: var(--pm-accent-hi);
}

.pm-faq__q:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: -2px;
	border-radius: 6px;
}

.pm-faq__q::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--pm-accent);
	border-bottom: 1.5px solid var(--pm-accent);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.28s ease;
}

.pm-faq__item[open] .pm-faq__q::after {
	transform: rotate(225deg) translate(-3px, -3px);
}

.pm-faq__a {
	padding: 0 40px 20px 2px;
	color: var(--pm-muted);
	animation: pm-acc-in 0.28s ease both;
}

.pm-faq__a p {
	margin: 0 0 12px;
}

.pm-faq__a p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pm-faq__a { animation: none; }
	.pm-faq__q::after { transition: none; }
}

/* Lange deutsche Wörter sauber trennen statt mitten im Wort umbrechen ----- */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.pm-acc__title,
.pm-faq__q,
.pm-job__title h4 {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* ==========================================================================
   Feste Aktionsleiste am unteren Rand
   ==========================================================================
   Sie taucht erst auf, wenn der Hero durch ist, und verschwindet am
   Seitenende wieder. Der Inhalt bekommt unten Luft, damit nichts verdeckt
   wird; bei offenem Menü ist sie weg.
   ========================================================================== */
.pm-actionbar {
	position: fixed;
	z-index: 60;
	left: 50%;
	bottom: 18px;
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 28px);
	padding: 10px 12px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	background: rgba(20, 20, 21, 0.9);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	transition: opacity 0.35s ease;
}

.has-menu-open .pm-actionbar {
	opacity: 0;
	visibility: hidden;
}

.pm-actionbar__text {
	padding: 0 8px 0 14px;
	font-family: var(--pm-font-head);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--pm-text);
}

.pm-actionbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.pm-actionbar__call {
	border: 1px solid rgba(182, 146, 79, 0.5);
	color: var(--pm-accent-hi);
	background: rgba(182, 146, 79, 0.1);
	font-variant-numeric: tabular-nums;
}

.pm-actionbar__call:hover {
	background: rgba(182, 146, 79, 0.2);
}

.pm-actionbar__icon {
	display: flex;
}

.pm-actionbar__cta {
	background: var(--pm-accent);
	color: var(--pm-accent-ink);
}

.pm-actionbar__cta:hover {
	background: var(--pm-accent-hi);
}

.pm-actionbar__ghost {
	border: 1px solid var(--pm-line);
	color: var(--pm-text);
}

.pm-actionbar__ghost:hover {
	border-color: var(--pm-accent);
	color: var(--pm-accent-hi);
}

/* Breite Bildschirme: Satz, Nummer und beide Wege. */
@media (min-width: 783px) {
	.pm-actionbar .pm-actionbar__short,
	.pm-actionbar .pm-actionbar__cta--small {
		display: none;
	}
}

/* Schmale Bildschirme: nur anrufen und die wichtigste Handlung. */
@media (max-width: 782px) {
	.pm-actionbar {
		left: 12px;
		right: 12px;
		bottom: 12px;
		translate: none;
		max-width: none;
		gap: 8px;
		padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
		border-radius: 30px;
	}

	.pm-actionbar .pm-actionbar__text,
	.pm-actionbar .pm-actionbar__num,
	.pm-actionbar .pm-actionbar__cta--wide,
	.pm-actionbar .pm-actionbar__ghost {
		display: none;
	}

	.pm-actionbar__cta--small {
		flex: 1 1 auto;
	}

	.pm-actionbar a {
		min-height: 46px;
		padding: 0 16px;
		font-size: 14.5px;
	}

	.site-footer {
		padding-bottom: 104px;
	}
}

/*
 * Die Leiste liegt fest über dem Inhalt. Damit sie am Seitenende nicht die
 * Siegel und die Rechtszeile verdeckt, bekommt der Fuß auf allen Breiten
 * Luft nach unten.
 */
.site-footer {
	padding-bottom: 96px;
}

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

/* Anzahl offener Stellen im Menü ----------------------------------------- */
.pm-nav-count {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(182, 146, 79, 0.22);
	color: var(--pm-accent-hi);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	vertical-align: 1px;
}

.main-navigation .pm-nav-cta.current-menu-item > a .pm-nav-count {
	background: rgba(26, 18, 6, 0.22);
	color: var(--pm-accent-ink);
}

@media (max-width: 1040px) {
	.pm-nav-count {
		background: none;
		padding: 0 0 0 2px;
		color: var(--pm-dim);
		font-weight: 600;
	}

	.pm-nav-count::before {
		content: "(";
	}

	.pm-nav-count::after {
		content: ")";
	}
}

/* Gegenüberstellung der Modelle ------------------------------------------ */
.pm-compare {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pm-compare__row {
	display: grid;
	grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
	gap: 8px 28px;
	padding: 15px 0;
	border-bottom: 1px solid var(--pm-line);
}

.pm-compare__row:last-child {
	border-bottom: 0;
}

.pm-compare dt {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--pm-accent);
}

.pm-compare dd {
	margin: 0;
	color: var(--pm-muted);
	line-height: 1.6;
}

@media (max-width: 640px) {
	.pm-compare__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* Drei Klickfragen vor dem Bewerbungsformular ---------------------------- */
.pm-matcher {
	margin: 26px 0 34px;
	padding: 22px 24px 24px;
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	background: var(--pm-surface);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pm-matcher__q {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.pm-matcher__legend {
	padding: 0;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--pm-accent);
}

.pm-matcher__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pm-matcher__opt {
	appearance: none;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	background: transparent;
	color: var(--pm-text);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pm-matcher__opt:hover {
	border-color: rgba(182, 146, 79, 0.5);
}

.pm-matcher__opt:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 2px;
}

.pm-matcher__opt[aria-pressed="true"] {
	background: var(--pm-accent);
	border-color: var(--pm-accent);
	color: var(--pm-accent-ink);
	font-weight: 600;
}

.pm-matcher__summary {
	margin: 2px 0 0;
	font-size: 14.5px;
	color: var(--pm-muted);
}

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

/* Google und kununu nebeneinander ---------------------------------------- */
.pm-proofpair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px 34px;
	margin: 26px 0 36px;
}

.pm-proofpair .pm-reviews__summary {
	margin: 0;
	align-content: start;
	padding: 20px 22px;
	border: 1px solid var(--pm-line);
	border-radius: 14px;
	background: var(--pm-surface);
}

.pm-proofpair .pm-reviews__count {
	flex: 1 0 100%;
}

.pm-reviews__award {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	color: var(--pm-accent);
}

.pm-proofpair .pm-reviews__link {
	flex: 1 0 100%;
	margin-top: 2px;
	font-size: 14.5px;
}

/* ==========================================================================
   Bewegung: Wortwechsel, Zeiger, Slider, Fortschritt
   ==========================================================================
   Grundsatz wie überall: Ohne JavaScript und bei „reduzierte Bewegung"
   bleibt alles lesbar. Kein Effekt verschiebt das Layout.
   ========================================================================== */

/* Wortwechsel in der Hero-Überschrift ------------------------------------ */
.pm-rotate {
	display: inline-grid;
	vertical-align: baseline;
}

.pm-rotate__item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(0.34em);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	color: var(--pm-accent-hi);
	white-space: nowrap;
}

.pm-rotate__item.is-on {
	opacity: 1;
	transform: none;
}

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

/* Lichtschein folgt dem Zeiger ------------------------------------------- */
.pm-glow {
	position: relative;
}

.pm-glow > .pm-glow__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s ease;
	background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(182, 146, 79, 0.16), transparent 65%);
	z-index: 1;
}

.pm-glow.is-lit > .pm-glow__layer {
	opacity: 1;
}

/* Karten neigen sich leicht zum Zeiger ----------------------------------- */
.pm-tilt {
	transform: perspective(900px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
	transform-style: preserve-3d;
	will-change: transform;
}

.pm-tilt.is-tilting {
	transition: transform 0.12s linear, box-shadow 0.3s ease;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.pm-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.07), transparent 70%);
}

.pm-tilt.is-tilting::after {
	opacity: 1;
}

.pm-tile,
.pm-grid4 .wp-block-group,
.pm-officepix figure,
.pm-person,
.pm-proofpair .pm-reviews__summary,
.pm-card {
	position: relative;
}

/* Branchenbilder ziehen beim Überfahren leicht an. */
.pm-tile img {
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
}

.pm-tile.is-tilting img {
	transform: scale(1.06);
	filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.pm-tile img { transition: none; }
	.pm-tile.is-tilting img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pm-tilt {
		transform: none;
		transition: none;
	}
}

/* Knöpfe: Schein an der Zeigerposition ----------------------------------- */
.wp-block-button__link,
.pm-btn,
.pm-matcher__opt {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.wp-block-button__link::after,
.pm-btn::after,
.pm-matcher__opt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.35s ease;
	background: radial-gradient(120px circle at var(--gx, 50%) 50%, var(--pm-glow, rgba(255, 255, 255, 0.22)), transparent 70%);
}

/*
 * Auf goldgefüllten Knöpfen steht dunkle Schrift. Ein weißer Schein würde
 * sie ausbleichen – dort deshalb ein warmer, dunkler Schein.
 */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.pm-btn:not(.pm-btn--ghost),
.pm-matcher__opt[aria-pressed="true"],
.pm-actionbar__cta,
.pm-herosearch__go {
	--pm-glow: rgba(26, 18, 6, 0.18);
}

.wp-block-button__link:hover::after,
.pm-btn:hover::after,
.pm-matcher__opt:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link::after,
	.pm-btn::after,
	.pm-matcher__opt::after { transition: none; }
}

/* Bewertungen als Slider -------------------------------------------------- */
.pm-slider__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.pm-slider__track::-webkit-scrollbar {
	display: none;
}

.pm-slider__track > * {
	scroll-snap-align: start;
	flex: 0 0 min(100%, 340px);
}

.pm-slider__nav {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}

.pm-slider__arrow {
	appearance: none;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border: 1px solid var(--pm-line);
	border-radius: 50%;
	background: transparent;
	color: var(--pm-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.pm-slider__arrow:hover {
	border-color: var(--pm-accent);
	color: var(--pm-accent);
	background: rgba(182, 146, 79, 0.08);
}

.pm-slider__arrow:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 2px;
}

.pm-slider__dots {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
}

.pm-slider__dot {
	appearance: none;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pm-line);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.pm-slider__dot[aria-current="true"] {
	background: var(--pm-accent);
	transform: scale(1.35);
}

.pm-slider__dot:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 3px;
}

/* Lesefortschritt --------------------------------------------------------- */
.pm-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--pm-accent), var(--pm-accent-hi));
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

/* Der Lichtschein liegt über dem Video, aber unter der Schrift. */
.pm-hero > .pm-glow__layer {
	z-index: 1;
}

/* Suchfeld im Hero -------------------------------------------------------- */
.pm-herosearch {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 560px;
	margin: 0 0 14px;
}

.pm-herosearch__input {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 54px;
	padding: 0 20px;
	border: 1px solid rgba(182, 146, 79, 0.42);
	border-radius: 999px;
	background: rgba(16, 16, 16, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--pm-text);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.pm-herosearch__input::placeholder {
	color: var(--pm-dim);
}

.pm-herosearch__input:hover {
	border-color: rgba(182, 146, 79, 0.7);
}

.pm-herosearch__input:focus {
	outline: none;
	border-color: var(--pm-accent);
	box-shadow: 0 0 0 4px rgba(182, 146, 79, 0.14);
	background: rgba(16, 16, 16, 0.9);
}

.pm-herosearch__go {
	appearance: none;
	min-height: 54px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--pm-accent);
	color: var(--pm-accent-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.pm-herosearch__go:hover {
	background: var(--pm-accent-hi);
}

.pm-herosearch__go:active {
	transform: translateY(1px);
}

.pm-herosearch__go:focus-visible {
	outline: 2px solid var(--pm-accent-hi);
	outline-offset: 3px;
}

.pm-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.pm-chips__label {
	font-size: 14px;
	color: var(--pm-dim);
	margin-right: 2px;
}

.pm-chips a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	font-size: 14px;
	color: var(--pm-muted);
	text-decoration: none;
	background: rgba(16, 16, 16, 0.5);
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.pm-chips a:hover,
.pm-chips a:focus-visible {
	border-color: var(--pm-accent);
	color: var(--pm-accent-hi);
	background: rgba(182, 146, 79, 0.1);
	transform: translateY(-1px);
}

@media (max-width: 600px) {
	.pm-herosearch {
		gap: 8px;
	}

	.pm-herosearch__go {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pm-chips a,
	.pm-herosearch__go,
	.pm-herosearch__input { transition: none; }
}

/* ==========================================================================
   Ablauf mit andockender Spalte
   ==========================================================================
   Links bleibt die Überschrift beim Scrollen stehen, rechts laufen die
   Schritte durch. Der gerade sichtbare Schritt hebt sich ab. Unterhalb von
   900 px steht wieder alles untereinander – auf dem Handy hat Andocken
   keinen Sinn.
   ========================================================================== */
@media (min-width: 901px) {
	.pm-flow > .wp-block-group__inner-container {
		display: contents;
	}

	.pm-flow {
		display: grid;
		grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
		gap: 0 64px;
		align-items: start;
	}

	.pm-flow__aside {
		position: sticky;
		top: calc(var(--pm-header-h) + 40px);
	}

	.pm-flow__aside .pm-lead {
		margin-bottom: 26px;
	}

	.pm-flow__main .pm-steps,
	.pm-page .pm-flow__main .pm-steps {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 0;
	}

	.pm-flow__main .pm-step {
		border-top: 1px solid var(--pm-line);
		padding: 34px 0 34px 0;
		opacity: 0.42;
		transition: opacity 0.45s ease;
	}

	.pm-flow__main .pm-step.is-active {
		opacity: 1;
	}

	.pm-flow__main .pm-step h3,
	.pm-flow__main .pm-step h4 {
		font-size: 23px;
		transition: color 0.45s ease;
	}

	.pm-flow__main .pm-step.is-active h3,
	.pm-flow__main .pm-step.is-active h4 {
		color: var(--pm-accent-hi);
	}

	.pm-flow__main .pm-step p {
		font-size: 16.5px;
		max-width: 54ch;
	}
}

/* Fortschrittsanzeige in der andockenden Spalte ---------------------------- */
.pm-flowmeter {
	display: none;
}

@media (min-width: 901px) {
	.pm-flowmeter {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-top: 8px;
	}

	.pm-flowmeter__num {
		font-family: var(--pm-font-head);
		font-size: 34px;
		font-weight: 700;
		line-height: 1;
		color: var(--pm-accent);
		font-variant-numeric: tabular-nums;
	}

	.pm-flowmeter__total {
		font-size: 15px;
		color: var(--pm-dim);
	}

	.pm-flowmeter__rail {
		flex: 1 1 auto;
		height: 2px;
		background: var(--pm-line);
		border-radius: 2px;
		overflow: hidden;
	}

	.pm-flowmeter__fill {
		display: block;
		height: 100%;
		width: 25%;
		background: linear-gradient(90deg, var(--pm-accent), var(--pm-accent-hi));
		transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pm-flow__main .pm-step,
	.pm-flowmeter__fill { transition: none; }
}

/* ==========================================================================
   Bilder groß ansehen
   ========================================================================== */
.pm-zoomable {
	cursor: zoom-in;
}

.pm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	background: rgba(8, 8, 8, 0.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.pm-lightbox.is-open {
	opacity: 1;
}

.pm-lightbox img {
	max-width: min(1100px, 100%);
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.pm-lightbox__close {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 46px;
	height: 46px;
	border: 1px solid var(--pm-line);
	border-radius: 50%;
	background: rgba(16, 16, 16, 0.8);
	color: var(--pm-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pm-lightbox__close:hover {
	border-color: var(--pm-accent);
	color: var(--pm-accent);
}

.pm-lightbox__close:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 3px;
}

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

/* ==========================================================================
   Zurück nach oben
   ========================================================================== */
.pm-totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 55;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pm-line);
	border-radius: 50%;
	background: rgba(23, 24, 26, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--pm-text);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, border-color 0.2s ease, color 0.2s ease;
}

.pm-totop.is-in {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pm-totop:hover {
	border-color: var(--pm-accent);
	color: var(--pm-accent);
}

.pm-totop:focus-visible {
	outline: 2px solid var(--pm-accent);
	outline-offset: 3px;
}

@media (max-width: 782px) {
	.pm-totop {
		bottom: 88px;
	}
}

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

/* Stellenliste: Zeilen reagieren auf den Zeiger --------------------------- */
.pm-job {
	position: relative;
	transition: border-color 0.3s ease, background 0.3s ease, translate 0.3s ease;
}

.pm-job::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--pm-accent);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pm-job:hover::before,
.pm-job:focus-within::before {
	transform: scaleY(1);
}

@media (hover: hover) and (pointer: fine) {
	.pm-job:hover {
		translate: 4px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pm-job,
	.pm-job::before { transition: none; }
	.pm-job:hover { translate: none; }
}

/* Slider: abgeschaltete Pfeile und ausgeblendete Steuerung ---------------- */
.pm-slider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.pm-slider__arrow[disabled]:hover {
	border-color: var(--pm-line);
	color: var(--pm-text);
	background: transparent;
}

.pm-slider__nav[hidden] {
	display: none;
}

/* Karten im Slider gleich hoch, damit die Reihe ruhig wirkt. */
.pm-slider__track {
	align-items: stretch;
}

.pm-slider__track > * {
	display: flex;
	flex-direction: column;
}

.pm-review__meta {
	margin-top: auto;
}

/* Häkchenliste ----------------------------------------------------------- */
.pm-checks {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px 28px;
}

.pm-checks li {
	position: relative;
	padding-left: 30px;
	color: var(--pm-text);
	line-height: 1.55;
}

.pm-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(182, 146, 79, 0.55);
	background: rgba(182, 146, 79, 0.12);
}

.pm-checks li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	width: 5px;
	height: 9px;
	border-right: 1.6px solid var(--pm-accent);
	border-bottom: 1.6px solid var(--pm-accent);
	transform: rotate(42deg);
}

/* Zweiter Weg im Hero – bewusst leise ------------------------------------ */
.pm-heroalt {
	margin: 4px 0 30px;
	font-size: 15.5px;
	color: var(--pm-dim);
}

.pm-heroalt a {
	color: var(--pm-muted);
	text-decoration: underline;
	text-decoration-color: rgba(182, 146, 79, 0.5);
	text-underline-offset: 4px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.pm-heroalt a:hover,
.pm-heroalt a:focus-visible {
	color: var(--pm-accent-hi);
	text-decoration-color: var(--pm-accent);
}

@media (prefers-reduced-motion: reduce) {
	.pm-heroalt a { transition: none; }
}

/* ==========================================================================
   10. Handysicht – Nacharbeiten (09.09.2026)
   --------------------------------------------------------------------------
   Auf einem echten Telefon (375 px) sind fünf Dinge aufgefallen. Die
   Korrekturen stehen bewusst am **Dateiende**: Mehrere Regeln weiter oben
   in Medienabfragen sind wirkungslos, weil gleich starke Regeln später in
   der Datei folgen und dann gewinnen. Wer hier etwas ändert, muss also
   nicht nach der Ursprungsregel suchen – das hier ist die letzte Instanz.
   ========================================================================== */

/* 1) Die Hero-Überschrift lief rechts aus dem Bild.
   `clamp(42px, …)` hatte einen zu großen Mindestwert: Das längste
   Wechselwort „Dein PerfectMatch." braucht bei 42 px rund 372 px, das
   Telefon hat aber nur 335 px Platz. Unter 620 px wächst die Schrift
   deshalb mit der Bildschirmbreite, oben gedeckelt auf die bisherigen
   42 px – am Umschaltpunkt ändert sich also nichts. */
@media (max-width: 620px) {
	.pm-hero__title {
		font-size: clamp(28px, 8.8vw, 42px);
	}
}

/* 2) Die Seite ließ sich auf „Für Unternehmen" und „Bewerben" um vier
   Pixel seitwärts schieben. Die Sprungleiste zieht sich mit negativem
   Außenabstand bis an den Seitenrand; der stand fest auf -24 px, während
   der Seiteninhalt unter 900 px nur noch 20 px Innenabstand hat. Vier
   Pixel Überstand pro Seite – genug für das Wackeln beim Wischen. */
@media (max-width: 900px) {
	.pm-page .pm-jump {
		margin-left: -20px;
		margin-right: -20px;
	}

	.pm-jump {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pm-jump .pm-chips {
		max-width: calc(var(--pm-wide) - 40px);
	}
}

/* 3) Die Porträts der Geschäftsführung standen in einer 335 px breiten
   Karte nur 260 px breit – rechts blieb ein leerer Streifen. Die
   Deckelung ist für das dreispaltige Raster gedacht; sobald nur noch
   eine Spalte übrig ist, darf das Bild die Karte füllen. */
@media (max-width: 700px) {
	.pm-person .pm-person__photo img {
		max-width: none;
	}
}

/* 4) Das aufgeklappte Menü war durchsichtig – der Seiteninhalt schimmerte
   zwischen den Menüpunkten durch. Auf dem Telefon ist das Menü eine
   eigene Fläche und keine Glasscheibe, also deckend, mit Schatten als
   Abgrenzung nach unten. */
@media (max-width: 1040px) {
	.site-header.is-open {
		background: var(--pm-bg);
		backdrop-filter: none;
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
	}
}

/* 5) Die vier Siegel im Fußbereich brachen 3 + 1 um und standen auf
   unterschiedlichen Höhen. Jetzt eine Zeile, unten bündig, etwas
   kleiner – passt auch auf ein 320 px breites Telefon. */
@media (max-width: 600px) {
	.pm-badges__list {
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 12px;
	}

	.pm-badges__item {
		align-items: flex-end;
	}

	.pm-badges img {
		height: 42px;
	}

	.pm-badges__item--hoch img {
		height: 68px;
	}
}

/* ==========================================================================
   11. Für Unternehmen – Kennzahlen, Modellkarten, Einzugsgebiet (09.09.2026)
   ========================================================================== */

.pm-kpis {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--pm-line);
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	overflow: hidden;
}

.pm-kpis li {
	background: var(--pm-bg);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pm-kpis strong {
	font-family: var(--pm-font-head);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--pm-accent-hi);
}

.pm-kpis span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--pm-muted);
}

.pm-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 22px;
	margin-top: 34px;
}

.pm-mini {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 18px;
}

.pm-mini dt {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pm-accent-hi);
	padding-top: 3px;
	white-space: nowrap;
}

.pm-mini dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pm-text);
}

@media (max-width: 600px) {
	.pm-mini {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.pm-mini dt {
		padding-top: 12px;
	}
}

/* Einzugsgebiet: auf dem Desktop ein Ringdiagramm, auf dem Telefon eine
   Liste. Das Diagramm auf 335 px herunterskaliert wäre unlesbar. */
.pm-area {
	margin-top: 44px;
	border: 1px solid var(--pm-line);
	border-radius: 16px;
	padding: 26px 22px;
	background: var(--pm-surface);
}

.pm-area svg {
	display: block;
	width: 100%;
	height: auto;
}

.pm-area figcaption {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pm-muted);
}

.pm-area__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: var(--pm-line);
	border: 1px solid var(--pm-line);
	border-radius: 12px;
	overflow: hidden;
}

.pm-area__liste li {
	background: var(--pm-bg);
	padding: 13px 16px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 15px;
}

.pm-area__liste b {
	font-weight: 600;
	color: var(--pm-text);
}

.pm-area__liste span {
	color: var(--pm-accent-hi);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 759px) {
	.pm-area svg { display: none; }
}

@media (min-width: 760px) {
	.pm-area__liste { display: none; }
}