/*
Theme Name: EmployerKit Child
Description: jobs-deutschland.de — child theme. Brand design system (Deutschland-Blau + Terrakotta, Source Serif 4 / Inter Tight).
Template: employerkit
Version: 1.0.0
Text Domain: employerkit-child
*/

/* ============================================================================
   SELF-HOSTED FONTS (DSGVO — no Google CDN, files in assets/fonts/)
   Inter Tight = body / UI · Source Serif 4 = headings / display
   ========================================================================== */
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-tight-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/inter-tight-500.woff2") format("woff2");
}
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-tight-600.woff2") format("woff2");
}
@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/inter-tight-700.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
	font-family: "Source Serif 4";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/source-serif-4-400italic.woff2") format("woff2");
}

/* ============================================================================
   DESIGN TOKENS  (single source of truth — mirrors theme.json)
   ========================================================================== */
:root {
	/* Primary — "Deutschland-Blau" */
	--jd-primary-50:  #EEF3FB;
	--jd-primary-100: #D6E2F4;
	--jd-primary-200: #A9C0E6;
	--jd-primary-300: #6E94D1;
	--jd-primary-500: #1F4B8E;
	--jd-primary-600: #163A75;
	--jd-primary-700: #0F2A57;
	--jd-primary-900: #081A38;

	/* Accent — warm terracotta */
	--jd-accent-50:  #FBF1EC;
	--jd-accent-200: #F0CFBE;
	--jd-accent-500: #C76A3F;
	--jd-accent-600: #A8552F;

	/* Neutrals — slightly warm */
	--jd-n-0:   #FFFFFF;
	--jd-n-25:  #FAF9F7;
	--jd-n-50:  #F4F2EE;
	--jd-n-100: #E8E5DF;
	--jd-n-200: #D5D1C8;
	--jd-n-300: #B5AFA2;
	--jd-n-500: #7A7568;
	--jd-n-700: #3F3D36;
	--jd-n-900: #1A1916;

	/* Semantic */
	--jd-success: #2E7D5B;
	--jd-success-50: #E6F1EC;
	--jd-success-100: #C5DDD0;
	--jd-warning: #B8860B;
	--jd-danger:  #B23A3A;

	/* Radius */
	--jd-r-sm: 6px;
	--jd-r-md: 10px;
	--jd-r-lg: 14px;
	--jd-r-xl: 20px;
	--jd-r-pill: 999px;

	/* Shadow */
	--jd-sh-sm: 0 1px 2px rgba(8, 26, 56, .06), 0 1px 1px rgba(8, 26, 56, .04);
	--jd-sh-md: 0 4px 12px rgba(8, 26, 56, .08), 0 1px 3px rgba(8, 26, 56, .05);
	--jd-sh-lg: 0 12px 32px rgba(8, 26, 56, .12), 0 2px 6px rgba(8, 26, 56, .06);
	--jd-sh-focus: 0 0 0 3px rgba(31, 75, 142, .25);

	/* Type */
	--jd-font-sans:  "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
	--jd-font-serif: "Source Serif 4", Charter, Georgia, serif;

	/* Density multiplier */
	--jd-density: 1;

	/* Fluid vertical rhythm + grid spacing — scale smoothly desktop→mobile so
	   there are no hard jumps between breakpoints (matches the airy type). */
	--jd-sec-y:    clamp(52px, 6vw, 80px);   /* section top+bottom            */
	--jd-sec-top:  clamp(32px, 3.5vw, 40px); /* tight section top (after hero) */
	--jd-grid-gap: clamp(16px, 1.7vw, 22px); /* card grids                    */
	--jd-head-mb:  clamp(24px, 3vw, 36px);   /* section head → grid           */
	--jd-panel:    clamp(32px, 5vw, 64px);   /* employer CTA inner padding    */

	/* Page-shell rhythm — EVERY page is a white top bar + a cream body. A new
	   page that reuses these tokens inherits the identical spacing for free. */
	--jd-bar-yt:  clamp(32px, 4vw, 44px);   /* white bar  → top    */
	--jd-bar-yb:  clamp(20px, 2.5vw, 28px); /* white bar  → bottom */
	--jd-body-yt: clamp(24px, 3vw, 32px);   /* cream body → top    */
	--jd-body-yb: var(--jd-sec-y);          /* cream body → bottom */

	/* Canonical control height — buttons, inputs and selects all align here. */
	--jd-control-h: 44px;

	/* ── Breakpoint ladder (single source — reuse these, add no new ones) ──
	   1100  large screen   card grids 4→3
	    999  "lap"          two-column layouts collapse (hero / single sidebar /
	                        employer CTA / footer columns / header nav→panel)
	    767  "tablet"       card grids step down (3→2), filter & search rows stack
	    600  "phone"        section heads stack, single-column text grids
	    480  "small phone"  gutters tighten, last 2→1 downgrades              */
}

/* ============================================================================
   SCOPED BASELINE  (applies inside .jd wrappers — keeps parent/admin untouched)
   ========================================================================== */
.jd, .jd *, .jd *::before, .jd *::after { box-sizing: border-box; }

.jd {
	font-family: var(--jd-font-sans);
	color: var(--jd-n-900);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* — Typography scale — */
.jd-display, .jd-h1, .jd-h2, .jd-h3, .jd-h4 { color: var(--jd-n-900); }
/* Neutralise the parent theme.json global h1 (color:#FF2300 / :root :where(h1),
   which ties with .jd-h1). :root h1..h6 (0,1,1) wins; class-based overrides
   (dark panels, footer) are more specific and keep their colours. */
:root h1, :root h2, :root h3, :root h4, :root h5, :root h6 { color: var(--jd-n-900); }
.jd-display { font-family: var(--jd-font-serif); font-weight: 600; font-size: clamp(40px, 5.5vw, 72px); line-height: 1.04; letter-spacing: -0.02em; }
.jd-h1 { font-family: var(--jd-font-serif); font-weight: 600; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }
.jd-h2 { font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; }
.jd-h3 { font-weight: 600; font-size: 20px; line-height: 1.3; letter-spacing: -0.005em; }
.jd-h4 { font-weight: 600; font-size: 16px; line-height: 1.35; }
.jd-body  { font-size: 16px; line-height: 1.6; color: var(--jd-n-700); }
.jd-small { font-size: 14px; line-height: 1.5; color: var(--jd-n-500); }
.jd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jd-primary-500); }

/* — Layout containers — */
.jd-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.jd-container-wide { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* — Buttons — */
.jd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: calc(var(--jd-control-h) * var(--jd-density));
	padding: 0 20px;
	border-radius: var(--jd-r-md);
	font-family: var(--jd-font-sans);
	font-weight: 600; font-size: 15px;
	border: 1px solid transparent;
	cursor: pointer; text-decoration: none;
	transition: background .15s, border-color .15s, color .15s, transform .05s;
	white-space: nowrap;
}
.jd-btn:active { transform: translateY(1px); }
.jd-btn--primary { background: var(--jd-primary-500); color: #fff; }
.jd-btn--primary:hover { background: var(--jd-primary-600); color: #fff; text-decoration: none; }
.jd-btn--secondary { background: transparent; color: var(--jd-primary-700); border-color: var(--jd-n-200); }
.jd-btn--secondary:hover { background: var(--jd-n-50); border-color: var(--jd-n-300); }
.jd-btn--ghost { background: transparent; color: var(--jd-primary-700); }
.jd-btn--ghost:hover { background: var(--jd-n-50); }
/* Accent = the primary button. Defined centrally for BOTH the page buttons
   (.jd-btn) and the header buttons (.jd-navbtn) so they can never drift. */
.jd-btn--accent, .jd-navbtn--accent { background: var(--jd-accent-500); color: #fff; }
.jd-btn--accent:hover, .jd-navbtn--accent:hover { background: var(--jd-accent-600); color: #fff; text-decoration: none; }
.jd-btn--lg { height: calc(54px * var(--jd-density)); padding: 0 28px; font-size: 16px; }
.jd-btn--sm { height: calc(34px * var(--jd-density)); padding: 0 14px; font-size: 13px; }
.jd-btn--block { width: 100%; }

/* — Inputs / fields — */
.jd-field {
	display: flex; align-items: center; gap: 10px;
	height: calc(var(--jd-control-h) * var(--jd-density));
	padding: 0 14px;
	border: 1px solid var(--jd-n-200);
	border-radius: var(--jd-r-md);
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.jd-field:focus-within { border-color: var(--jd-primary-500); box-shadow: var(--jd-sh-focus); }
.jd-field input, .jd-field select {
	flex: 1; min-width: 0; height: 100%;
	border: 0; outline: 0; background: transparent;
	font: inherit; color: inherit;
	-webkit-appearance: none; appearance: none; border-radius: 0;
}
/* iOS renders type=search as a short native control — neutralise it. */
.jd-field input[type="search"]::-webkit-search-decoration,
.jd-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.jd-field--lg { height: calc(56px * var(--jd-density)); padding: 0 18px; font-size: 16px; }
.jd-field__icon { color: var(--jd-n-500); flex-shrink: 0; }
.jd-field__divider { width: 1px; height: 60%; background: var(--jd-n-100); }

/* — Card — */
.jd-card {
	background: #fff;
	border: 1px solid var(--jd-n-100);
	border-radius: var(--jd-r-lg);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jd-card--hover:hover { border-color: var(--jd-primary-200); box-shadow: var(--jd-sh-md); }

/* — Chip / tag — */
.jd-chip {
	display: inline-flex; align-items: center; gap: 6px;
	height: 28px; padding: 0 12px;
	background: var(--jd-n-50);
	border: 1px solid var(--jd-n-100);
	border-radius: var(--jd-r-pill);
	font-size: 13px; font-weight: 500; color: var(--jd-n-700);
}
.jd-chip--primary { background: var(--jd-primary-50); border-color: var(--jd-primary-100); color: var(--jd-primary-700); }
.jd-chip--accent  { background: var(--jd-accent-50);  border-color: var(--jd-accent-200);  color: var(--jd-accent-600); }
.jd-chip--success { background: var(--jd-success-50); border-color: var(--jd-success-100); color: var(--jd-success); }

/* — Divider — */
.jd-hr { height: 1px; background: var(--jd-n-100); border: 0; margin: 0; }

/* — Logo wordmark — */
.jd-logo {
	font-family: var(--jd-font-serif);
	font-weight: 600; font-size: 22px;
	color: var(--jd-primary-700);
	letter-spacing: -0.01em; text-decoration: none;
	display: inline-flex; align-items: baseline; gap: 2px;
}
.jd-logo:hover { text-decoration: none; }
.jd-logo__mark {
	display: inline-block; width: 10px; height: 10px;
	background: var(--jd-accent-500);
	border-radius: 2px;
	transform: translateY(-2px);
	margin-right: 4px;
}
.jd-logo__de { color: var(--jd-accent-500); }

/* — Animation — */
@keyframes jdFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jd-anim-fade-up { animation: jdFadeUp .35s ease-out both; }

.jd-icon { flex-shrink: 0; }

/* Defeat the theme.json global link underline (a:where(:not(.wp-element-button))
   {text-decoration: underline}) on all jd links/cards. !important because that
   global rule otherwise keeps drawing a red underline under the card text. */
.jd a, .jd a:hover,
.jd-cat, .jd-coy, .jd-jobcard, .jd-navbtn, .jd-btn, .jd-logo,
.jd-cat span, .jd-coy span, .jd-jobcard span { text-decoration: none !important; }
.jd-cat, .jd-coy, .jd-jobcard { color: inherit; }

/* ============================================================================
   HOMEPAGE  (front-page.php) — all scoped under .jd
   ========================================================================== */
.jd-home { background: var(--jd-n-25); }
body.jd-front { background: var(--jd-n-25); }
/* The home blocks live in a plain .entry-content (no WP layout breakout), so
   force true full-bleed regardless of the parent container width. The clip on
   the wrapper absorbs the 100vw scrollbar delta (no horizontal scroll). */
/* Absorb the 100vw full-bleed overflow — only on the block PAGES that use it
   (home/berufsfelder/unternehmen). NOT global: overflow-x:clip on an ancestor
   can break position:sticky, and the single-job page (a template, no 100vw)
   needs its sticky aside to work. The archive is also a template (no clip). */
body.page { overflow-x: clip; }
.jd-hero.alignfull,
.jd-section.alignfull,
.jd-section--tight.alignfull,
.jd-legal__bar.alignfull,
.jd-legal__body.alignfull,
.jd-contact__body.alignfull,
.jd-emp__hero.alignfull,
.jd-emp__band.alignfull {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* Editor preview: blocks are non-interactive previews. */
.jd-block-preview { pointer-events: none; }
.jd-section { padding: var(--jd-sec-y) 0; }
.jd-section--tight { padding: var(--jd-sec-top) 0 var(--jd-sec-y); }
.jd-section__head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 24px; margin-bottom: var(--jd-head-mb);
}
.jd-section__head h2 { margin: 8px 0 0; }

/* — Hero — */
.jd-hero {
	background: linear-gradient(180deg, var(--jd-primary-50) 0%, var(--jd-n-25) 70%);
	overflow: hidden;
}
.jd-hero__grid {
	display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(40px, 5vw, 64px);
	align-items: center; min-height: 540px;
}
.jd-hero__copy { padding: clamp(56px, 6vw, 84px) 0; }
.jd-hero__title { margin: 16px 0 20px; max-width: 720px; }
.jd-hero__title em { color: var(--jd-accent-500); font-style: normal; }
.jd-hero__lead { font-size: 18px; max-width: 600px; margin-bottom: 32px; }

/* Search box */
.jd-searchbox {
	background: #fff; padding: 8px;
	border-radius: var(--jd-r-lg); box-shadow: var(--jd-sh-md);
	display: flex; gap: 8px; align-items: stretch; max-width: 720px;
}
.jd-searchbox .jd-field { border: 0; flex: 1; box-shadow: none; }
.jd-searchbox .jd-field:first-of-type { flex: 1.4; }
.jd-searchbox__divider { width: 1px; background: var(--jd-n-100); align-self: center; height: 44%; }
.jd-searchbox .jd-btn { flex-shrink: 0; }

/* Trust row */
.jd-trust { display: flex; align-items: center; gap: 28px; margin-top: 32px; flex-wrap: wrap; }
.jd-trust__item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--jd-n-700); }
.jd-trust__item .jd-icon { color: var(--jd-success); }

/* Hero visual (right) — branded panel with floating job mini-cards */
.jd-hero__visual { position: relative; align-self: stretch; min-height: 420px; }
.jd-hero__panel {
	position: absolute; inset: 24px 0 24px 24px;
	background: linear-gradient(135deg, var(--jd-primary-100), var(--jd-primary-200));
	border-radius: var(--jd-r-xl);
}
.jd-hero__float {
	position: absolute; background: #fff;
	border-radius: var(--jd-r-lg); box-shadow: var(--jd-sh-lg);
	padding: 16px; width: 280px;
}
.jd-hero__float--1 { top: 56px; right: 8px; }
.jd-hero__float--2 { bottom: 64px; left: 0; width: 250px; }
.jd-hero__floattitle { font-weight: 600; font-size: 15px; margin: 0 0 2px; }
.jd-hero__floatmeta { font-size: 13px; color: var(--jd-n-500); display: flex; align-items: center; gap: 6px; }
.jd-hero__badge {
	position: absolute; bottom: 12px; right: 16px;
	background: #fff; border-radius: var(--jd-r-md); box-shadow: var(--jd-sh-md);
	padding: 10px 14px; display: flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; color: var(--jd-success);
}

/* — Category grid (count-first cards, no icons) — */
.jd-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jd-grid-gap); }
.jd-cat { padding: 24px; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.jd-cat:hover { text-decoration: none; }
.jd-cat__count { font-family: var(--jd-font-serif); font-weight: 600; font-size: 40px; line-height: 1; color: var(--jd-primary-600); }
.jd-cat__name { margin-top: 10px; font-weight: 600; font-size: 16px; color: var(--jd-n-900); overflow-wrap: break-word; }
.jd-cat__label { margin-top: 2px; font-size: 13px; color: var(--jd-n-500); }
.jd-catfilter { max-width: 420px; }

/* Berufsfelder page (showFilter mode) — white top bar + cream body, like /jobs/ */
.jd-section.jd-bf { padding: 0; background: var(--jd-n-25); }
.jd-bf__bar { background: #fff; border-bottom: 1px solid var(--jd-n-100); }
.jd-bf__bar > .jd-container-wide { padding-block: var(--jd-bar-yt) var(--jd-bar-yb); }
.jd-bf__body > .jd-container-wide { padding-block: var(--jd-body-yt) var(--jd-body-yb); }
.jd-bf__intro { max-width: 680px; }
.jd-bf__intro .jd-h1 { margin: 8px 0 12px; }
.jd-bf__lead { margin: 0; }
.jd-bf__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.jd-bf__controls .jd-catfilter { flex: 1 1 280px; margin: 0; }
.jd-bf__sort { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jd-bf__sort .jd-select { height: 44px; }
.jd-bf__count { margin: 0 0 20px; font-size: 14px; color: var(--jd-n-500); }
.jd-bf__empty { padding: 40px 0; text-align: center; color: var(--jd-n-500); }
.jd-catgrid.jd-catgrid--dense { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .jd-catgrid.jd-catgrid--dense { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .jd-catgrid.jd-catgrid--dense { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .jd-catgrid.jd-catgrid--dense { grid-template-columns: 1fr; } }

/* — Company tiles — */
.jd-coygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--jd-grid-gap); }
.jd-coy { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-decoration: none; color: inherit; min-height: 160px; }
.jd-coy:hover { text-decoration: none; }
.jd-coy__logo { height: 48px; max-width: 100%; display: flex; align-items: center; }
.jd-coy__logo img { max-height: 48px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.jd-coy__mark {
	width: 48px; height: 48px; border-radius: var(--jd-r-md);
	background: var(--jd-primary-50); color: var(--jd-primary-600);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--jd-font-serif); font-weight: 600; font-size: 20px;
}
.jd-coy__name { font-weight: 600; font-size: 15px; color: var(--jd-n-900); line-height: 1.3; }
.jd-coy__count { font-size: 13px; color: var(--jd-n-500); margin-top: auto; }

/* — Job card — */
.jd-jobgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jd-grid-gap); align-items: stretch; }
/* min-width:0 stops a long token from blowing the grid track past 1fr. */
.jd-jobgrid > *, .jd-catgrid > *, .jd-coygrid > * { min-width: 0; }
.jd-jobcard { display: flex; flex-direction: column; min-width: 0; padding: 24px; text-decoration: none; color: inherit; height: 100%; }
.jd-jobcard:hover { text-decoration: none; }
.jd-jobcard__head { display: flex; gap: 16px; margin-bottom: 16px; }
.jd-jobcard__logo { border-radius: var(--jd-r-md); object-fit: contain; background: #fff; border: 1px solid var(--jd-n-100); flex-shrink: 0; }
.jd-jobcard__mark {
	width: 48px; height: 48px; border-radius: var(--jd-r-md);
	background: #fff; border: 1px solid var(--jd-n-100);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--jd-font-serif); font-weight: 600; font-size: 20px;
	color: var(--jd-primary-500); flex-shrink: 0;
}
.jd-jobcard__headmain { flex: 1; min-width: 0; }
.jd-jobcard__title { margin: 0 0 4px; color: var(--jd-n-900); overflow-wrap: break-word; }
.jd-jobcard__company { font-size: 14px; color: var(--jd-n-700); font-weight: 500; overflow-wrap: break-word; }
.jd-jobcard__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: 13px; color: var(--jd-n-500); }
.jd-jobcard__metaitem { display: flex; align-items: center; gap: 6px; }
.jd-jobcard__metaitem--accent { color: var(--jd-accent-600); font-weight: 600; }
.jd-jobcard__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.jd-jobcard__foot {
	display: flex; justify-content: space-between; align-items: center;
	margin-top: auto; padding-top: 16px; border-top: 1px solid var(--jd-n-100);
}
.jd-jobcard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--jd-primary-600); }

/* — Employer CTA — */
.jd-employer {
	background: var(--jd-primary-700); color: #fff;
	border-radius: var(--jd-r-xl); padding: var(--jd-panel);
	display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 5vw, 64px); align-items: center;
	position: relative; overflow: hidden;
}
.jd-employer__blob {
	position: absolute; top: -80px; right: -80px; width: 320px; height: 320px;
	background: var(--jd-accent-500); opacity: .15; border-radius: 50%;
}
.jd-employer__copy { position: relative; }
.jd-employer__copy .jd-eyebrow { color: var(--jd-accent-200); }
.jd-employer__copy h2 { color: #fff; margin: 8px 0 16px; max-width: 480px; }
.jd-employer__lead { color: var(--jd-primary-100); font-size: 17px; max-width: 480px; margin-bottom: 32px; }
.jd-employer__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.jd-employer .jd-btn--ghost { color: #fff; }
.jd-employer .jd-btn--ghost:hover { background: rgba(255,255,255,.1); }
.jd-employer__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jd-grid-gap); position: relative; }
.jd-stat {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--jd-r-md); padding: 20px;
}
.jd-stat__num { font-family: var(--jd-font-serif); font-size: 32px; font-weight: 600; color: #fff; line-height: 1.1; }
.jd-stat__label { font-size: 13px; color: var(--jd-primary-200); margin-top: 2px; }

/* ============================================================================
   JOB ARCHIVE  (archive-job_listing.php — top filter bar + result grid)
   ========================================================================== */
.jd-archive { background: var(--jd-n-25); min-height: 60vh; }
.jd-archive__bar { background: #fff; border-bottom: 1px solid var(--jd-n-100); }
.jd-archive__barinner { padding: var(--jd-bar-yt) 24px var(--jd-bar-yb); }
.jd-archive__intro { margin-bottom: 24px; }
.jd-archive__intro .jd-archive__title { margin: 8px 0 0; }
.jd-archive__filters { display: flex; flex-direction: column; gap: 12px; }
.jd-archive__filters .jd-field { box-shadow: none; }
.jd-archive__row { display: flex; gap: 10px; align-items: stretch; }
.jd-archive__row--search .jd-field--kw { flex: 2; }
.jd-archive__row--search .jd-field--ort { flex: 1; }
.jd-archive__row--selects { flex-wrap: wrap; }
.jd-archive__row--selects .jd-select { flex: 1 1 0; min-width: 160px; }
.jd-archive__row--selects .jd-btn { flex: 0 0 auto; }
.jd-archive__row--clear { padding-top: 2px; }
.jd-archive__clear { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--jd-n-500); text-decoration: none; }
.jd-archive__clear:hover { color: var(--jd-danger); text-decoration: underline; }
.jd-select {
	height: var(--jd-control-h); padding: 0 12px;
	border: 1px solid var(--jd-n-200); border-radius: var(--jd-r-md);
	background: #fff; font: inherit; color: var(--jd-n-700);
	cursor: pointer; min-width: 150px; max-width: 100%;
}
.jd-select:focus { outline: 0; border-color: var(--jd-primary-500); box-shadow: var(--jd-sh-focus); }
.jd-archive__body { padding-top: var(--jd-body-yt); padding-bottom: var(--jd-body-yb); } /* keep the container's horizontal 24px gutter */
.jd-archive__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.jd-archive__count { margin: 0; font-size: 18px; font-weight: 500; color: var(--jd-n-700); }
.jd-archive__count strong { font-weight: 700; color: var(--jd-n-900); }
.jd-archive__sort { display: flex; align-items: center; gap: 8px; }
.jd-archive__sort .jd-select { height: 38px; font-size: 14px; min-width: 0; }
.jd-archive__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.jd-chip--remove { cursor: pointer; text-decoration: none; }
.jd-chip--remove:hover { background: var(--jd-primary-100); text-decoration: none; }
.jd-chip--clear { background: transparent; border-color: transparent; color: var(--jd-n-500); cursor: pointer; text-decoration: underline; }
.jd-chip--clear:hover { color: var(--jd-n-900); text-decoration: underline; }
.jd-archive__empty { text-align: center; padding: 64px 24px; }
.jd-archive__empty .jd-body { margin: 8px 0 20px; }

.jd-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 40px; }
.jd-pagination .page-numbers {
	display: inline-flex; align-items: center; gap: 6px;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: var(--jd-r-md); border: 1px solid transparent;
	color: var(--jd-n-700); text-decoration: none; font-weight: 500; font-size: 14px;
	justify-content: center;
}
.jd-pagination a.page-numbers:hover { background: var(--jd-n-50); border-color: var(--jd-n-200); }
.jd-pagination .page-numbers.current { background: var(--jd-primary-500); color: #fff; }
.jd-pagination .page-numbers.dots { border: 0; }

@media (max-width: 999px) {
	/* Lap: keyword + city share the row 1/2 each. */
	.jd-archive__row--search .jd-field--kw,
	.jd-archive__row--search .jd-field--ort { flex: 1; }
}
@media (max-width: 767px) {
	/* Phone (incl. large phones reporting up to ~767px): stack full-width. */
	.jd-archive__row { flex-direction: column; }
	.jd-archive__row > * { width: 100%; min-width: 0; }
	.jd-archive__row--selects .jd-select { flex: 1 1 auto; min-width: 0; width: 100%; }
	.jd-archive__row--selects .jd-btn { width: 100%; }
	.jd-archive__head { flex-direction: column; align-items: flex-start; }
	.jd-archive__sort .jd-select { height: var(--jd-control-h); }
}

/* ============================================================================
   SINGLE JOB  (single-job_listing.php — 2 columns + sticky apply)
   ========================================================================== */
.jd-job__bar { background: #fff; border-bottom: 1px solid var(--jd-n-100); }
.jd-job__bar > .jd-container-wide { padding-block: var(--jd-bar-yt) var(--jd-bar-yb); }
.jd-job__body { background: var(--jd-n-25); }
.jd-job__body > .jd-container-wide { padding-block: var(--jd-body-yt) var(--jd-body-yb); }
.jd-job__back { display: inline-flex; align-items: center; gap: 6px; color: var(--jd-n-500); font-size: 14px; text-decoration: none; margin-bottom: 20px; }
.jd-job__back:hover { color: var(--jd-primary-700); }
.jd-job__grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: stretch; }
.jd-job__head { display: flex; gap: 20px; }
.jd-job__logo, .jd-job__mark { width: 72px; height: 72px; border-radius: var(--jd-r-lg); flex-shrink: 0; }
.jd-job__logo { object-fit: contain; background: #fff; border: 1px solid var(--jd-n-100); }
.jd-job__mark { background: #fff; border: 1px solid var(--jd-n-100); display: inline-flex; align-items: center; justify-content: center; font-family: var(--jd-font-serif); font-weight: 600; font-size: 28px; color: var(--jd-primary-500); }
.jd-job__company { font-size: 14px; font-weight: 500; color: var(--jd-primary-700); margin-bottom: 8px; }
.jd-job__title { margin: 0 0 16px; color: var(--jd-n-900); }
.jd-job__meta { display: flex; flex-wrap: wrap; gap: 14px 20px; font-size: 14px; color: var(--jd-n-700); }
.jd-job__meta span { display: inline-flex; align-items: center; gap: 6px; }
.jd-job__meta-accent { color: var(--jd-accent-600); font-weight: 600; }
/* Bookmark/print/share (plugin partials) — same look on the detail page and on cards. */
.jd-job .jobboard-header-actions { margin-left: auto; align-self: flex-start; flex-shrink: 0; }
.jd-jobcard .jobboard-card-actions { margin-left: auto; align-self: flex-start; flex-shrink: 0; position: relative; z-index: 1; }
.jd-job .jobboard-header-actions .jobboard-bookmark-btn,
.jd-job .jobboard-header-actions .jobboard-print-btn,
.jd-job .jobboard-header-actions .jobboard-share-btn,
.jd-jobcard .jobboard-card-actions .jobboard-bookmark-btn,
.jd-jobcard .jobboard-card-actions .jobboard-share-btn { border-radius: var(--jd-r-md); background: #fff; border: 1px solid var(--jd-n-100); color: var(--jd-n-700); box-shadow: none; }
.jd-job .jobboard-header-actions .jobboard-bookmark-btn:hover,
.jd-job .jobboard-header-actions .jobboard-print-btn:hover,
.jd-job .jobboard-header-actions .jobboard-share-btn:hover,
.jd-jobcard .jobboard-card-actions .jobboard-bookmark-btn:hover,
.jd-jobcard .jobboard-card-actions .jobboard-share-btn:hover { transform: none; box-shadow: none; border-color: var(--jd-primary-500); color: var(--jd-primary-700); }
.jd-job .jobboard-header-actions .jobboard-bookmark-btn[aria-pressed="true"],
.jd-job .jobboard-header-actions .jobboard-bookmark-btn.jobboard-bookmarked,
.jd-jobcard .jobboard-card-actions .jobboard-bookmark-btn[aria-pressed="true"],
.jd-jobcard .jobboard-card-actions .jobboard-bookmark-btn.jobboard-bookmarked { background: var(--jd-primary-700); border-color: var(--jd-primary-700); color: #fff; }
.jd-job .jobboard-share-dropdown,
.jd-jobcard .jobboard-share-dropdown { border-radius: var(--jd-r-md); }

/* The card is an <article> so it can hold buttons; the title link stretches over
   the whole card to keep it clickable, the buttons sit above that overlay. */
.jd-jobcard { position: relative; }
.jd-jobcard__link { color: inherit; text-decoration: none !important; }
.jd-jobcard__link::after { content: ""; position: absolute; inset: 0; }
/* .jd-job__content: text directly on the cream body — no card */
.jd-job__section { margin-bottom: 36px; }
.jd-job__section:last-child { margin-bottom: 0; }
.jd-job__section h2 { margin: 0 0 16px; }
.jd-job__section-text { color: var(--jd-n-700); font-size: 16px; line-height: 1.75; }
.jd-job__section-text > *:first-child { margin-top: 0; }
.jd-job__section-text > *:last-child { margin-bottom: 0; }
.jd-job__section-text p { margin: 0 0 16px; }
.jd-job__section-text ul, .jd-job__section-text ol { margin: 0 0 16px; padding-left: 22px; }
.jd-job__section-text li { margin-bottom: 8px; }
.jd-job__section-text li:last-child { margin-bottom: 0; }
.jd-job__section-text h3, .jd-job__section-text h4 { margin: 26px 0 10px; font-weight: 600; color: var(--jd-n-900); }
.jd-job__section-text strong { color: var(--jd-n-900); }
.jd-job__section-text a { color: var(--jd-primary-600); }
.jd-job__applybox { margin-top: 20px; background: var(--jd-accent-50); border: 1px solid var(--jd-accent-200); border-radius: var(--jd-r-lg); padding: 28px; }
.jd-job__applybox h3 { margin: 0 0 6px; }
.jd-job__applybox p { margin: 0 0 18px; }
.jd-job__sticky { padding: 24px; position: sticky; top: 96px; }
.jd-job__divider { margin: 20px 0; }
.jd-job__kv { margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.jd-job__kv-row { display: flex; justify-content: space-between; gap: 12px; }
.jd-job__kv-row dt { color: var(--jd-n-500); }
.jd-job__kv-row dd { margin: 0; color: var(--jd-n-900); font-weight: 500; text-align: right; }
.jd-job__company-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.jd-job__company-box h4 { margin: 0; }
.jd-job__company-box .jd-small { margin: 0; }
.jd-job__company-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--jd-primary-600); text-decoration: none; }
@media (max-width: 999px) {
	.jd-job__grid { grid-template-columns: 1fr; gap: 28px; }
	.jd-job__sticky { position: static; }
}
@media (max-width: 600px) {
	.jd-job__head { flex-direction: column; gap: 14px; }
	.jd-job__applybox, .jd-job__sticky { padding: 20px; }
}

/* ============================================================================
   LEGAL / PROSE PAGES  (editable WP pages — Impressum / Datenschutz / AGB)
   Built from CORE group blocks (no PHP template): an alignfull white bar group +
   an alignfull cream body group whose inner prose column is capped narrow. The
   page content stays fully editable in the block editor; this only styles it.
   ========================================================================== */
/* Flatten the parent page wrappers so the full-bleed bands sit flush against the
   header and footer (the front page has no such wrapper; inner pages do). */
body.jd-page-flush .site-main,
body.jd-page-flush .entry-content,
body.jd-page-flush article { margin-block: 0 !important; padding-block: 0 !important; }
body.jd-page-flush .entry-content > * { margin-block: 0 !important; }
/* Parent page.php auto-appends "Related Pages" (children) and "More in this
   section" (siblings); our band pages bring their own navigation — hide them. */
body.jd-page-flush .static-page__children,
body.jd-page-flush .static-page__siblings { display: none; }

.jd-legal__bar  { background: #fff; border-bottom: 1px solid var(--jd-n-100); padding: var(--jd-bar-yt) 0 var(--jd-bar-yb); }
.jd-legal__body { background: var(--jd-n-25); padding: var(--jd-body-yt) 0 var(--jd-body-yb); }
.jd-legal__back { margin: 0 0 14px; font-size: 14px; }
.jd-legal__back a { color: var(--jd-n-500); text-decoration: none; }
.jd-legal__back a:hover { color: var(--jd-primary-700); }
.jd-legal__title { margin: 0; }
/* Match the site's standard content width (1400, like archive/bf/single) so the
   legal pages don't read narrower than the rest. Bar inner aligned to the same. */
.jd-legal__bar .jd-container { max-width: 1400px; }
.jd-legal__prose { max-width: 1400px; margin: 0 auto; padding: 0 24px; color: var(--jd-n-700); font-size: 16px; line-height: 1.75; }
.jd-legal__prose > *:first-child { margin-top: 0; }
.jd-legal__prose h2 { font-size: 22px; font-weight: 600; color: var(--jd-n-900); line-height: 1.25; margin: 44px 0 14px; }
.jd-legal__prose h3 { font-size: 17px; font-weight: 600; color: var(--jd-n-900); margin: 30px 0 10px; }
.jd-legal__prose p  { margin: 0 0 16px; }
.jd-legal__prose ul, .jd-legal__prose ol { margin: 0 0 16px; padding-left: 22px; }
.jd-legal__prose li { margin-bottom: 8px; }
.jd-legal__prose strong { color: var(--jd-n-900); }
.jd .jd-legal__prose a { color: var(--jd-primary-600); text-decoration: underline !important; }

/* ============================================================================
   KONTAKT  (editable WP page — reuses .jd-legal__bar for the header band)
   ========================================================================== */
.jd-legal__lead { margin: 12px 0 0; max-width: 640px; color: var(--jd-n-500); font-size: 17px; line-height: 1.6; }

.jd-contact__body { background: var(--jd-n-25); padding: var(--jd-body-yt) 0 var(--jd-body-yb); }
.jd-contact__grid {
	max-width: 1400px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(24px, 3vw, 48px); align-items: start;
}
/* The grid is also .is-layout-flow, so core's block-gap rule adds a top margin
   to the 2nd child (aside) and pushes it down inside its cell — zero it. */
.jd-contact__grid > * { margin-block: 0; }
.jd-contact__card {
	background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg);
	padding: var(--jd-panel); box-shadow: var(--jd-sh-sm);
}
.jd-contact__card > h2:first-child { margin-top: 0; }
.jd-contact__card h2 { font-size: 20px; font-weight: 600; color: var(--jd-n-900); margin: 0 0 6px; }
.jd-contact__card > p { margin: 0 0 22px; color: var(--jd-n-500); font-size: 15px; line-height: 1.6; }

/* Aside info cards */
.jd-contact__aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.jd-contact__aside > * { margin-block: 0; }
.jd-contact__info {
	background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg);
	padding: clamp(20px, 2.4vw, 28px);
}
.jd-contact__info h3 { font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--jd-n-500); margin: 0 0 10px; }
.jd-contact__info p { margin: 0; color: var(--jd-n-700); font-size: 15px; line-height: 1.7; }
.jd .jd-contact__info a { color: var(--jd-primary-600); text-decoration: none; }
.jd .jd-contact__info a:hover { text-decoration: underline; }

/* CF7 form styling — scoped to the contact card */
.jd-contact__card .wpcf7-form p { margin: 0; }
.jd-contact__card .wpcf7-form label {
	display: block; margin-bottom: 16px;
	font-size: 14px; font-weight: 600; color: var(--jd-n-700);
}
.jd-contact__card .wpcf7-form input[type="text"],
.jd-contact__card .wpcf7-form input[type="email"],
.jd-contact__card .wpcf7-form input[type="tel"],
.jd-contact__card .wpcf7-form select,
.jd-contact__card .wpcf7-form textarea {
	display: block; width: 100%; margin-top: 7px;
	font-family: var(--jd-font-sans); font-size: 15px; font-weight: 400; color: var(--jd-n-900);
	background: #fff; border: 1px solid var(--jd-n-200); border-radius: var(--jd-r-md);
	padding: 0 14px; height: var(--jd-control-h);
	transition: border-color .15s, box-shadow .15s;
}
.jd-contact__card .wpcf7-form textarea { height: auto; min-height: 140px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.jd-contact__card .wpcf7-form input:focus,
.jd-contact__card .wpcf7-form select:focus,
.jd-contact__card .wpcf7-form textarea:focus {
	outline: none; border-color: var(--jd-primary-500); box-shadow: var(--jd-sh-focus);
}
/* Consent checkbox row */
.jd-contact__card .jd-form-consent {
	display: flex; align-items: flex-start; gap: 10px;
	font-weight: 400; font-size: 13.5px; line-height: 1.5; color: var(--jd-n-500);
}
.jd-contact__card .jd-form-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--jd-primary-500); flex-shrink: 0; }
.jd-contact__card .jd-form-consent .wpcf7-list-item { margin: 0; }
.jd .jd-contact__card .jd-form-consent a { color: var(--jd-primary-600); text-decoration: underline; }
/* Submit button — match .jd-btn--accent */
.jd-contact__card .wpcf7-form input[type="submit"] {
	margin-top: 20px; width: 100%; height: calc(var(--jd-control-h) * var(--jd-density));
	font-family: var(--jd-font-sans); font-size: 15px; font-weight: 600; color: #fff;
	background: var(--jd-accent-500); border: 0; border-radius: var(--jd-r-md);
	cursor: pointer; transition: background .15s;
}
.jd-contact__card .wpcf7-form input[type="submit"]:hover { background: var(--jd-accent-600); }
/* CF7 response output */
.jd-contact__card .wpcf7-response-output {
	margin: 18px 0 0 !important; padding: 12px 16px !important;
	border-radius: var(--jd-r-md); font-size: 14px; line-height: 1.5;
}
.jd-contact__card .wpcf7-not-valid-tip { font-size: 12.5px; font-weight: 500; }
.jd-contact__card .wpcf7-form .wpcf7-spinner { margin: 0 0 0 12px; }

@media (max-width: 999px) {
	.jd-contact__grid { grid-template-columns: 1fr; }
	.jd-contact__aside { position: static; flex-direction: row; flex-wrap: wrap; }
	.jd-contact__info { flex: 1 1 240px; }
}
@media (max-width: 600px) {
	.jd-contact__aside { flex-direction: column; }
}

/* ============================================================================
   RATGEBER / GUIDE  (editable WP pages — pillar + sub-pages, reuses the
   .jd-legal__bar header band; cream body holds a card grid (pillar) or a
   prose + sticky sibling-nav grid (sub-pages).
   ========================================================================== */
.jd-guide__body { background: var(--jd-n-25); padding: var(--jd-body-yt) 0 var(--jd-body-yb); }

/* Pillar: card grid linking to the sub-pages */
.jd-guide__cards {
	max-width: 1400px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 32px);
}
.jd-guide__cards > * { margin-block: 0; }
.jd-guide__card {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg);
	padding: var(--jd-panel); box-shadow: var(--jd-sh-sm);
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jd-guide__card:hover { border-color: var(--jd-n-200); box-shadow: var(--jd-sh-md); transform: translateY(-2px); }
.jd-guide__card h3 { font-size: 19px; font-weight: 600; color: var(--jd-n-900); margin: 0 0 8px; }
.jd-guide__card p { margin: 0 0 18px; color: var(--jd-n-500); font-size: 15px; line-height: 1.6; }
.jd-guide__more { margin-top: auto !important; font-size: 14px; font-weight: 600; }
.jd .jd-guide__more a { color: var(--jd-accent-600); text-decoration: none; }
.jd .jd-guide__more a:hover { text-decoration: underline; }

/* Sub-page: prose column + sticky sibling nav */
.jd-guide__grid {
	max-width: 1400px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: minmax(0, 1fr) 280px;
	gap: clamp(28px, 4vw, 64px); align-items: start;
}
.jd-guide__grid > * { margin-block: 0; }
.jd-guide__main,
.jd-guide__prose { color: var(--jd-n-700); font-size: 16px; line-height: 1.75; }
.jd-guide__main > *:first-child,
.jd-guide__prose > *:first-child { margin-top: 0; }
.jd-guide__main h2,
.jd-guide__prose h2 { font-size: 22px; font-weight: 600; color: var(--jd-n-900); line-height: 1.25; margin: 44px 0 14px; }
.jd-guide__main h2:first-child,
.jd-guide__prose h2:first-child { margin-top: 0; }
.jd-guide__main h3,
.jd-guide__prose h3 { font-size: 17px; font-weight: 600; color: var(--jd-n-900); margin: 30px 0 10px; }
.jd-guide__main p,
.jd-guide__prose p  { margin: 0 0 16px; }
.jd-guide__main ul, .jd-guide__main ol,
.jd-guide__prose ul, .jd-guide__prose ol { margin: 0 0 16px; padding-left: 22px; }
.jd-guide__main li,
.jd-guide__prose li { margin-bottom: 8px; }
.jd-guide__main strong,
.jd-guide__prose strong { color: var(--jd-n-900); }
.jd .jd-guide__main a,
.jd .jd-guide__prose a { color: var(--jd-primary-600); text-decoration: underline; }

/* Pillar: prose columns (intro + FAQ) align to the card grid's left edge;
   text measure is capped for readability, left-aligned (not centered). */
.jd-guide__prose { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.jd-guide__prose > * { max-width: 760px; }
.jd-guide__intro { margin-bottom: clamp(32px, 4vw, 52px); }
.jd-guide__faq { margin-top: clamp(48px, 6vw, 80px); }
.jd-guide__cta { margin-top: 28px; }
.jd .jd-guide__cta a {
	display: inline-block; padding: 0 26px; height: calc(var(--jd-control-h) * var(--jd-density));
	line-height: calc(var(--jd-control-h) * var(--jd-density));
	font-size: 15px; font-weight: 600; color: #fff !important; text-decoration: none !important;
	background: var(--jd-accent-500); border-radius: var(--jd-r-md); transition: background .15s;
}
.jd .jd-guide__cta a:hover { background: var(--jd-accent-600); }

/* Sticky sibling nav */
.jd-guide__nav { position: sticky; top: 96px; background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg); padding: 22px 24px; }
.jd-guide__nav h2 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--jd-n-500); margin: 0 0 6px; }
.jd-guide__nav ul { list-style: none; margin: 0; padding: 0; }
.jd-guide__nav li { margin: 0; border-top: 1px solid var(--jd-n-100); }
.jd-guide__nav li:first-of-type { border-top: 0; }
.jd-guide__nav a { display: block; padding: 11px 0; font-size: 15px; color: var(--jd-n-700); text-decoration: none; }
.jd-guide__nav a:hover { color: var(--jd-primary-600); }
.jd-guide__nav .is-current a { color: var(--jd-primary-700); font-weight: 600; }

@media (max-width: 999px) {
	.jd-guide__grid { grid-template-columns: 1fr; }
	.jd-guide__nav { position: static; }
}
@media (max-width: 600px) {
	.jd-guide__cards { grid-template-columns: 1fr; }
}

/* ============================================================================
   FÜR ARBEITGEBER  (editable WP landing page — alternating full-bleed bands,
   reuses .jd-btn--* for actions; demo content/pricing for Marketing sign-off).
   ========================================================================== */
.jd-emp__wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.jd-emp__head { max-width: 760px; margin: 0 0 clamp(28px, 3.5vw, 44px); }
.jd-emp__head .jd-eyebrow { display: block; margin: 0 0 10px; }
.jd-emp__head .jd-h1 { margin: 0; }
.jd-emp__lead { margin: 14px 0 0; color: var(--jd-n-500); font-size: 17px; line-height: 1.6; max-width: 620px; }

/* Hero (white band) */
.jd-emp__hero { background: #fff; border-bottom: 1px solid var(--jd-n-100); padding: clamp(48px, 7vw, 96px) 0; }
.jd-emp__hero .jd-eyebrow { display: block; margin: 0 0 14px; }
.jd-emp__hero h1 { max-width: 820px; margin: 0; }
.jd-emp__hero-lead { max-width: 620px; margin: 18px 0 0; color: var(--jd-n-500); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; }
.jd-emp__cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 0; }
.jd-emp__hero-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--jd-n-100); }
.jd-emp__hero-stats > * { margin-block: 0; }
.jd-emp__stat__num { margin: 0; font-family: var(--jd-font-serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; color: var(--jd-primary-600); line-height: 1; }
.jd-emp__stat__label { margin: 8px 0 0; font-size: 14px; color: var(--jd-n-500); }

/* Generic content bands */
.jd-emp__band { padding: clamp(48px, 6.5vw, 88px) 0; }
.jd-emp__band--cream { background: var(--jd-n-25); }
.jd-emp__band--white { background: #fff; }
/* Teaser CTA row spacing under a band head (reuses .jd-emp__cta-row) */
.jd-emp__head + .jd-emp__cta-row { margin-top: 4px; }

/* Vorteile / feature cards */
.jd-emp__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.jd-emp__features > * { margin-block: 0; }
.jd-emp__feature { background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--jd-sh-sm); }
.jd-emp__band--white .jd-emp__feature { background: var(--jd-n-25); }
.jd-emp__feature__logo { display: block; height: 64px; width: auto; max-width: 220px; margin: 0 0 10px; object-fit: contain; object-position: left center; }

/* Light stat cards (e.g. group numbers on Über uns) — bright counterpart to
   the dark .jd-stat, matches the page's light aesthetic. */
.jd-emp__nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.jd-emp__nums > * { margin-block: 0; }
.jd-emp__num { background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg); padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--jd-sh-sm); }
.jd-emp__num__n { margin: 0; font-family: var(--jd-font-serif); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; color: var(--jd-primary-600); line-height: 1; }
.jd-emp__num__l { margin: 8px 0 0; font-size: 14px; color: var(--jd-n-500); line-height: 1.4; }
@media (max-width: 767px) { .jd-emp__nums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .jd-emp__nums { grid-template-columns: 1fr; } }
.jd-emp__feature h3 { font-size: 17px; font-weight: 600; color: var(--jd-n-900); margin: 0 0 8px; }
.jd-emp__feature p  { margin: 0; color: var(--jd-n-500); font-size: 15px; line-height: 1.6; }

/* So funktioniert's / numbered steps */
.jd-emp__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.5vw, 36px); counter-reset: step; }
.jd-emp__steps > * { margin-block: 0; }
.jd-emp__step { counter-increment: step; }
.jd-emp__step::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--jd-primary-500); color: #fff; font-family: var(--jd-font-serif); font-weight: 600; font-size: 18px; margin-bottom: 16px; }
.jd-emp__step h3 { font-size: 17px; font-weight: 600; color: var(--jd-n-900); margin: 0 0 6px; }
.jd-emp__step p  { margin: 0; color: var(--jd-n-500); font-size: 15px; line-height: 1.6; }

/* Pakete / pricing plans */
.jd-emp__plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); align-items: stretch; }
.jd-emp__plans > * { margin-block: 0; }
.jd-emp__plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--jd-n-100); border-radius: var(--jd-r-lg); padding: clamp(24px, 2.6vw, 32px); box-shadow: var(--jd-sh-sm); }
.jd-emp__plan.is-featured { border-color: var(--jd-accent-500); box-shadow: var(--jd-sh-md); }
.jd-emp__plan__badge { display: inline-block; align-self: flex-start; margin: 0 0 12px; background: var(--jd-accent-500); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--jd-r-pill); }
.jd-emp__plan h3 { font-size: 19px; font-weight: 600; color: var(--jd-n-900); margin: 0 0 4px; }
.jd-emp__plan__sub { margin: 0 0 18px; font-size: 14px; color: var(--jd-n-500); }
.jd-emp__plan__price { margin: 0; font-family: var(--jd-font-serif); font-size: 40px; font-weight: 600; color: var(--jd-n-900); line-height: 1; }
.jd-emp__plan__price span { font-family: var(--jd-font-sans); font-size: 14px; font-weight: 400; color: var(--jd-n-500); }
.jd-emp__plan ul { list-style: none; margin: 22px 0 26px; padding: 0; }
.jd-emp__plan li { position: relative; padding: 0 0 0 26px; margin: 0 0 10px; font-size: 15px; color: var(--jd-n-700); line-height: 1.5; }
.jd-emp__plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--jd-accent-600); font-weight: 700; }
.jd-emp__plan__btn { margin-top: auto; }

@media (max-width: 1100px) {
	.jd-emp__features { grid-template-columns: repeat(2, 1fr); }
	.jd-emp__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 999px) {
	.jd-emp__plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 767px) {
	.jd-emp__steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.jd-emp__features { grid-template-columns: 1fr; }
}

/* ============================================================================
   SITE HEADER  (child header.php — light brand, sticky)
   ========================================================================== */
.jd-header {
	position: sticky; top: 0; z-index: 1090;
	background: #fff;
	border-bottom: 1px solid var(--jd-n-100);
}
/* NOTE: no backdrop-filter on .jd-header — it would make the fixed mobile
   slide-in panel position relative to the header (72px) instead of the
   viewport, collapsing it. Solid background keeps the panel full-height. */
.jd-header__bar {
	width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px;
	height: 72px; display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 24px;
}
.jd-header .jd-logo { justify-self: start; }
.jd-header__nav { justify-self: center; display: flex; align-items: center; gap: 28px; }
.jd-header__menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.jd-header__menu li { margin: 0; }
.jd-header__menu a { font-size: 14px; font-weight: 500; color: var(--jd-n-700); text-decoration: none; }
.jd-header__menu a:hover { color: var(--jd-primary-700); text-decoration: none; }
.jd-header__actions { display: flex; align-items: center; gap: 12px; }
.jd-header__actions--bar { justify-self: end; }
.jd-header__actions--panel { display: none; }

.jd-navbtn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 40px; padding: 0 16px; border-radius: var(--jd-r-md);
	font-family: var(--jd-font-sans); font-weight: 600; font-size: 14px;
	text-decoration: none; border: 1px solid transparent; white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.jd-navbtn--ghost { color: var(--jd-primary-700); border-color: var(--jd-n-200); background: transparent; }
.jd-navbtn--ghost:hover { background: var(--jd-n-50); border-color: var(--jd-n-300); text-decoration: none; }
/* .jd-navbtn--accent color/hover defined centrally with .jd-btn--accent above. */

.jd-header__toggle {
	display: none; width: 44px; height: 44px; padding: 0 10px;
	border: 0; background: transparent; cursor: pointer;
	flex-direction: column; justify-content: center; gap: 5px;
	position: relative; z-index: 1111; /* above the slide-in panel (1110) */
}
.jd-header__toggle span { display: block; height: 2px; width: 24px; background: var(--jd-n-900); border-radius: 2px; transition: transform .2s, opacity .2s; }
.jd-header.is-open .jd-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jd-header.is-open .jd-header__toggle span:nth-child(2) { opacity: 0; }
.jd-header.is-open .jd-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.jd-header__overlay { display: none; }

@media (max-width: 999px) {
	.jd-header__bar { display: flex; justify-content: space-between; }
	.jd-header__toggle { display: flex; }
	.jd-header__actions--bar .jd-navbtn { display: none; }
	.jd-header__nav {
		position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 86vw);
		background: #fff; box-shadow: var(--jd-sh-lg);
		flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
		padding: 88px 24px 24px;
		transform: translateX(100%); transition: transform .25s ease;
		z-index: 1110; overflow-y: auto;
	}
	.jd-header.is-open .jd-header__nav { transform: none; }
	.jd-header__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.jd-header__menu a { display: block; padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--jd-n-100); }
	.jd-header__actions--panel { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
	.jd-header__actions--panel .jd-navbtn { width: 100%; height: 48px; }
	.jd-header__overlay { display: block; position: fixed; inset: 0; background: rgba(8, 26, 56, .4); z-index: 1100; }
	.jd-header__overlay[hidden] { display: none; }
	body.jd-nav-lock { overflow: hidden; }
}

/* ============================================================================
   SITE FOOTER  (child footer.php — dark brand)
   ========================================================================== */
.jd-footer { background: var(--jd-primary-900); color: var(--jd-primary-100); }
.jd-footer__inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 64px 24px 32px; }
.jd-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 48px; }
.jd-footer__brand .jd-logo { color: #fff; margin-bottom: 16px; }
.jd-footer__tagline { font-size: 14px; line-height: 1.6; color: var(--jd-primary-200); max-width: 280px; margin: 0; }
.jd-footer__col h4 { font-size: 13px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; }
.jd-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jd-footer__col a { color: var(--jd-primary-200); font-size: 14px; text-decoration: none; }
.jd-footer__col a:hover { color: #fff; text-decoration: none; }
.jd-footer__bottom {
	margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--jd-primary-700);
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	font-size: 13px; color: var(--jd-primary-300);
}
.jd-footer__powered a { color: var(--jd-primary-100); text-decoration: none; }
.jd-footer__powered a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 999px) {
	.jd-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.jd-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.jd-footer__top { grid-template-columns: 1fr; gap: 28px; }
	.jd-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* — Responsive — clamp() handles all vertical rhythm + panel padding; these
   media queries only step grid COLUMNS down along the shared breakpoint ladder. */
@media (max-width: 1100px) {
	.jd-coygrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 999px) {              /* lap: two-column layouts collapse */
	.jd-hero__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
	.jd-hero__copy { padding: clamp(48px, 8vw, 64px) 0 clamp(32px, 5vw, 40px); }
	.jd-hero__visual { display: none; }
	.jd-employer { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {              /* tablet: card grids step down */
	.jd-catgrid { grid-template-columns: repeat(2, 1fr); }
	.jd-coygrid { grid-template-columns: repeat(2, 1fr); }
	.jd-jobgrid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {              /* phone */
	.jd-section__head { flex-direction: column; align-items: flex-start; }
	.jd-searchbox { flex-direction: column; }
	.jd-searchbox__divider { display: none; }
	.jd-catgrid { grid-template-columns: 1fr; }
	.jd-employer__stats { grid-template-columns: 1fr; }
}

/* Header: avoid crowding in the 1000–1140 band (drop the wider ghost button). */
@media (min-width: 1000px) and (max-width: 1140px) {
	.jd-header__actions--bar .jd-navbtn--ghost { display: none; }
	.jd-header__nav { gap: 20px; }
	.jd-header__menu { gap: 20px; }
}

/* Tighter gutters on very small screens. */
@media (max-width: 480px) {
	.jd-coygrid { grid-template-columns: 1fr; }
	.jd-container, .jd-container-wide { padding-left: 16px; padding-right: 16px; }
	.jd-footer__inner { padding-left: 16px; padding-right: 16px; }
}