/* ═══════════════════════════════════════════════════════════
   Pontem Pro · Karriere — Directory · Single Job · Wizard
   Mirrors design_handoff_karriere/styles-artboards.css, scoped under
   `body.pp-jobs` so the design's class names don't bleed elsewhere.

   NOTE on the font: Plus Jakarta Sans is already self-hosted site-wide
   via assets/fonts/fonts.css (enqueued as `pontempro-fonts` in
   functions.php). No additional @font-face needed here — and no Google
   Fonts CDN request (GDPR-safe for Germany per Munich LG 2022).
   ═══════════════════════════════════════════════════════════ */

/* ── Scoped token overrides (per design_handoff_karriere/Karriere.html :root).
   These differ slightly from the theme's site-wide values, so we override only
   on careers pages — no impact on the rest of the site. */
body.pp-jobs {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --mint:       #E6F4F1;   /* design's true mint (lighter than secondary-light) */
  --gray-50:    #F7F9FA;
  --gray-200:   #E3E9EB;
  --gray-700:   #33484D;
  --radius:     10px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-pill:999px;

  /* Easing — exponential ease-out for natural deceleration. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
}

/* Override the theme's 24px gutter to match the design spec (32px / 18px mobile). */
.pp-jobs .container { padding: 0 32px; }

/* ── Scoped breadcrumb (design: gray-50 strip, 12px vertical, sep gray-300, here gray-700/600) */
.pp-jobs .breadcrumb {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 0;
  font-size: .82rem;
  color: var(--gray-500);
}
.pp-jobs .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; list-style: none; padding: 0; margin: 0; }
.pp-jobs .breadcrumb li { display: inline-flex; align-items: baseline; }
.pp-jobs .breadcrumb li.sep,
.pp-jobs .breadcrumb li[aria-hidden="true"] { color: var(--gray-300); margin: 0 8px; }
.pp-jobs .breadcrumb a { color: var(--gray-500); text-decoration: none; }
.pp-jobs .breadcrumb a:hover { color: var(--primary); text-decoration: none; }
.pp-jobs .breadcrumb li.here,
.pp-jobs .breadcrumb li strong[aria-current] { color: var(--gray-700); font-weight: 600; }

/* ── Tiny shared atoms ── */
.pp-jobs .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary);
}
.pp-jobs .kicker.with-line::before {
  content: ""; display: inline-block; width: 22px; height: 1.5px;
  background: var(--primary);
}
.pp-jobs .h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.022em; color: var(--secondary); margin: 0; }
.pp-jobs .h2 { font-size: 1.4rem; font-weight: 700; line-height: 1.3;  letter-spacing: -0.015em; color: var(--secondary); margin: 0; }
.pp-jobs .lead { font-size: 1.05rem; color: var(--gray-700); line-height: 1.6; margin: 0; }

.pp-jobs .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mint); color: var(--secondary);
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 600;
}

/* ── Buttons (additive; reuse theme .btn .btn-primary if present) ── */
.pp-jobs .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: .95rem; padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer; transition: all 200ms var(--ease-out); text-decoration: none; border: 1px solid transparent; }
.pp-jobs .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.pp-jobs .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; box-shadow: var(--shadow-cta); }
.pp-jobs .btn-outline { background: #fff; color: var(--secondary); border: 2px solid var(--secondary); }
.pp-jobs .btn-outline:hover { background: var(--secondary-light); }
.pp-jobs .btn-ghost { background: transparent; color: var(--gray-700); border: 0; }
.pp-jobs .btn-ghost:hover { color: var(--secondary); background: var(--gray-100); }
.pp-jobs .btn-lg { padding: 14px 24px; font-size: 1rem; }
.pp-jobs .btn-block { display: flex; width: 100%; }
.pp-jobs .btn .arr { transition: transform 200ms var(--ease-out); }
.pp-jobs .btn:hover .arr { transform: translateX(3px); }

/* ══════════════ DIRECTORY (Screen 1) ══════════════ */
.pp-jobs .jobs-hero {
  background: #fff;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--gray-200);
}
.pp-jobs .jobs-hero .kicker { margin-bottom: 14px; }
.pp-jobs .jobs-hero .h1     { margin-bottom: 14px; }
.pp-jobs .jobs-hero .lead   { max-width: 60ch; }

.pp-jobs .jobs-section { background: #fff; padding: 40px 0 80px; }

.pp-jobs .jobs-filterbar {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.pp-jobs .jobs-filterbar .field { display: flex; flex-direction: column; gap: 6px; }
.pp-jobs .jobs-filterbar label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-600);
}
.pp-jobs .jobs-filterbar select {
  appearance: none;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px 36px 10px 14px;
  font-size: .92rem; font-weight: 600; color: var(--gray-900);
  font-family: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2354737a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pp-jobs .jobs-filterbar select:hover { border-color: var(--secondary); }
.pp-jobs .jobs-filterbar select.is-active,
.pp-jobs .jobs-filterbar select:not([data-empty="1"]):focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  color: var(--secondary);
  outline: none;
}
.pp-jobs .jobs-filterbar .reset {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; padding: 12px 14px;
  min-height: 44px;
  font-size: .82rem; font-weight: 600;
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  text-decoration: none; border: 0; cursor: pointer; font-family: inherit;
}
.pp-jobs .jobs-filterbar .reset:hover { color: var(--primary); background: var(--primary-light); }

.pp-jobs .jobs-count-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 28px 0 18px; flex-wrap: wrap; gap: 12px;
}
.pp-jobs .jobs-count { font-size: .95rem; color: var(--gray-700); }
.pp-jobs .jobs-count strong { color: var(--gray-900); font-weight: 700; }
.pp-jobs .jobs-sort { font-size: .82rem; color: var(--gray-500); display: inline-flex; gap: 8px; align-items: center; }
.pp-jobs .jobs-sort .pill {
  background: #fff; border: 1px solid var(--gray-200);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-weight: 600; color: var(--gray-700);
}

.pp-jobs .jobs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pp-jobs .job-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 26px 26px 22px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: all 200ms var(--ease-out);
  text-decoration: none; color: inherit;
}
.pp-jobs .job-card:hover {
  border-color: var(--secondary-light);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.pp-jobs .job-card .kicker { margin-bottom: 12px; font-size: .72rem; }
.pp-jobs .job-card .h2 { font-size: 1.2rem; margin-bottom: 10px; min-height: 2.6em; }
.pp-jobs .job-card .summary {
  font-size: .92rem; color: var(--gray-700); line-height: 1.55;
  margin: 0 0 18px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-jobs .job-card .chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.pp-jobs .job-card .details-cue {
  color: var(--primary); font-size: .9rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.pp-jobs .job-card:hover .details-cue { color: var(--primary-dark); }
.pp-jobs .job-card .arr { transition: transform 200ms var(--ease-out); }
.pp-jobs .job-card:hover .arr { transform: translateX(4px); }

.pp-jobs .jobs-empty {
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  background: var(--gray-50);
  display: flex; flex-direction: column; gap: 14px;
}
/* When no jobs match, the empty panel is the only cell — span the full row. */
.pp-jobs .jobs-empty.is-only { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.pp-jobs .jobs-empty .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--mint); color: var(--secondary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pp-jobs .jobs-empty .icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.pp-jobs .jobs-empty .text { font-size: .95rem; color: var(--gray-700); line-height: 1.55; }
.pp-jobs .jobs-empty .text strong { color: var(--gray-900); display: block; margin-bottom: 3px; font-size: 1rem; }
.pp-jobs .jobs-empty .text a { color: var(--primary); font-weight: 700; }

/* ══════════════ SINGLE JOB (Screen 2) ══════════════ */
.pp-jobs .job-hero {
  background: var(--gray-50);
  padding: 48px 0 44px;
  border-bottom: 1px solid var(--gray-200);
}
.pp-jobs .job-hero .kicker { margin-bottom: 14px; }
.pp-jobs .job-hero .h1 { margin-bottom: 14px; max-width: 18ch; }
.pp-jobs .job-hero .sub {
  font-size: 1.1rem; color: var(--gray-700);
  max-width: 60ch;
  margin-bottom: 22px; line-height: 1.55;
}
.pp-jobs .job-hero .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.pp-jobs .job-hero .actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pp-jobs .job-hero .actions .start { font-size: .88rem; color: var(--gray-600); }
.pp-jobs .job-hero .actions .start strong { color: var(--gray-900); }

.pp-jobs .job-body { background: #fff; padding: 64px 0 72px; }
.pp-jobs .job-body .grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
.pp-jobs .job-body .intro { font-size: 1.02rem; line-height: 1.7; color: var(--gray-700); margin: 0 0 36px; }
.pp-jobs .job-body .intro strong { color: var(--gray-900); }
.pp-jobs .job-body section + section { margin-top: 36px; }
.pp-jobs .job-body .h2 { margin-bottom: 16px; }
.pp-jobs .job-body ul.dots {
  list-style: disc;
  padding: 0 0 0 22px; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.pp-jobs .job-body ul.dots li {
  padding-left: 6px;
  font-size: .98rem; line-height: 1.55;
  color: var(--gray-700);
}
.pp-jobs .job-body ul.dots li::marker { color: var(--gray-900); font-size: .85em; }

.pp-jobs .eckdaten {
  position: sticky; top: 24px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-card);
}
.pp-jobs .eckdaten .label {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-600); margin-bottom: 18px;
}
.pp-jobs .eckdaten dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pp-jobs .eckdaten dt {
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-600); margin-bottom: 2px;
}
.pp-jobs .eckdaten dd { font-size: .95rem; font-weight: 700; color: var(--secondary); margin: 0; }
.pp-jobs .eckdaten .divider { height: 1px; background: var(--gray-200); margin: 18px 0; }
.pp-jobs .eckdaten .fragen {
  font-size: .82rem; color: var(--gray-500);
  margin-top: 14px; text-align: center; line-height: 1.5;
}
.pp-jobs .eckdaten .fragen a {
  color: var(--secondary); font-weight: 600;
  border-bottom: 1px solid var(--secondary-light); text-decoration: none;
}

/* ══════════════ WIZARD (Screen 3) ══════════════ */
.pp-jobs .wizard-zone {
  background: var(--gray-50);
  padding: 72px 0 88px;
  border-top: 1px solid var(--gray-200);
}
.pp-jobs .wizard-header { text-align: center; margin: 0 auto 32px; max-width: 640px; }
.pp-jobs .wizard-header .kicker { margin-bottom: 12px; justify-content: center; }
.pp-jobs .wizard-header .h2 { font-size: 1.85rem; margin-bottom: 10px; letter-spacing: -0.02em; }
.pp-jobs .wizard-header .lead { font-size: 1rem; color: var(--gray-700); max-width: 56ch; margin: 0 auto; }
.pp-jobs .wizard-header .lead strong { color: var(--gray-900); }

.pp-jobs .wizard-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 40px 44px 32px;
  max-width: 860px; margin: 0 auto;
}

/* Stepper */
.pp-jobs .stepper {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; margin-bottom: 36px;
}
.pp-jobs .stepper::before {
  content: ""; position: absolute; top: 14px;
  left: 12.5%; right: 12.5%; height: 2px;
  background: var(--gray-200); z-index: 0;
}
.pp-jobs .stepper::after {
  content: ""; position: absolute; top: 14px; left: 12.5%;
  height: 2px; background: var(--primary);
  z-index: 1; width: 0; transition: width 350ms var(--ease-out);
}
.pp-jobs .stepper[data-step="2"]::after { width: 25%; }
.pp-jobs .stepper[data-step="3"]::after { width: 50%; }
.pp-jobs .stepper[data-step="4"]::after { width: 75%; }
.pp-jobs .step-marker {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative; z-index: 2;
}
.pp-jobs .step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gray-300); color: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
  transition: all 250ms var(--ease-out);
}
.pp-jobs .step-marker.is-active .step-dot {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 0 0 4px rgba(216,94,67,.15);
}
.pp-jobs .step-marker.is-done .step-dot {
  background: var(--secondary); border-color: var(--secondary); color: #fff;
}
.pp-jobs .step-marker.is-done .step-dot .num { display: none; }
.pp-jobs .step-marker:not(.is-done) .step-dot .check { display: none; }
.pp-jobs .step-marker .step-dot .check { width: 14px; height: 14px; }
.pp-jobs .step-label {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  color: var(--gray-500); text-align: center;
}
.pp-jobs .step-marker.is-active .step-label { color: var(--gray-900); }
.pp-jobs .step-marker.is-done   .step-label { color: var(--secondary); }

/* Step titles + subtitles */
.pp-jobs .wizard-step h3.step-title {
  font-size: 1.25rem; font-weight: 800;
  color: var(--gray-900); letter-spacing: -0.015em;
  text-align: center; margin: 0 0 4px;
}
.pp-jobs .wizard-step .step-sub {
  font-size: .9rem; color: var(--gray-500);
  text-align: center; margin: 0 0 28px;
}

/* Form fields */
.pp-jobs .form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px;
}
.pp-jobs .form-grid .full { grid-column: 1 / -1; }
.pp-jobs .form-field { display: flex; flex-direction: column; gap: 6px; }
.pp-jobs .form-field label { font-size: .82rem; font-weight: 600; color: var(--gray-900); }
.pp-jobs .form-field .req { color: var(--primary); margin-left: 2px; font-style: normal; }
.pp-jobs .form-field input,
.pp-jobs .form-field select,
.pp-jobs .form-field textarea {
  padding: 11px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: .94rem; color: var(--gray-900);
  font-family: inherit;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pp-jobs .form-field input::placeholder,
.pp-jobs .form-field textarea::placeholder { color: var(--gray-500); }
.pp-jobs .form-field input:focus,
.pp-jobs .form-field select:focus,
.pp-jobs .form-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.pp-jobs .form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2354737a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.pp-jobs .form-field .hint { font-size: .78rem; color: var(--gray-500); }
.pp-jobs .form-field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }

/* Upload zones */
.pp-jobs .upload-list { display: flex; flex-direction: column; gap: 16px; }
.pp-jobs .upload {
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  padding: 22px;
  display: flex; align-items: center; gap: 18px;
  transition: all 200ms var(--ease-out);
  position: relative;
}
.pp-jobs .upload:hover { border-color: var(--secondary); background: #fff; }
.pp-jobs .upload.is-filled {
  background: var(--mint);
  border: 1.5px solid var(--secondary-light);
}
.pp-jobs .upload .icon-wrap {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 1px solid var(--gray-200);
  color: var(--secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-jobs .upload.is-filled .icon-wrap { border-color: var(--secondary-light); color: var(--success); }
.pp-jobs .upload .icon-wrap svg { width: 22px; height: 22px; stroke-width: 1.8; }
.pp-jobs .upload.is-filled .icon-empty { display: none; }
.pp-jobs .upload:not(.is-filled) .icon-filled { display: none; }
.pp-jobs .upload .body { flex: 1; min-width: 0; }
.pp-jobs .upload .title-row { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; color: var(--gray-900); margin-bottom: 2px; }
.pp-jobs .upload .meta { font-size: .82rem; color: var(--gray-500); }
.pp-jobs .upload .files { font-size: .85rem; color: var(--gray-700); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.pp-jobs .upload .file-line { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pp-jobs .upload .files svg { width: 13px; height: 13px; stroke-width: 2.4; color: var(--success); flex-shrink: 0; }
.pp-jobs .upload .browse {
  padding: 11px 18px;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200);
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 700;
  color: var(--secondary);
  white-space: nowrap; cursor: pointer; font-family: inherit;
}
.pp-jobs .upload .browse:hover { background: var(--secondary-light); }
.pp-jobs .upload.is-filled .browse { color: var(--gray-700); }
/* The real <input type="file"> is positioned over the label for clicks. */
.pp-jobs .upload input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* Review groups (Step 4) */
.pp-jobs .review { display: flex; flex-direction: column; gap: 18px; }
.pp-jobs .review-group {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.pp-jobs .review-group .grp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pp-jobs .review-group .grp-title { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); }
.pp-jobs .review-group .grp-edit {
  color: var(--primary); font-size: .82rem; font-weight: 700;
  background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit;
}
.pp-jobs .review-group .grp-edit:hover { color: var(--primary-dark); text-decoration: underline; }
.pp-jobs .review-group dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 0; }
.pp-jobs .review-group dt { font-size: .82rem; color: var(--gray-500); font-weight: 600; }
.pp-jobs .review-group dd { font-size: .92rem; color: var(--gray-900); margin: 0; font-weight: 600; word-break: break-word; }
.pp-jobs .review-group dd.muted { color: var(--gray-500); font-weight: 500; font-style: italic; }
.pp-jobs .review-group dd .msg-preview { font-weight: 500; white-space: pre-line; }

/* Consent */
.pp-jobs .consent {
  display: flex; gap: 12px;
  background: var(--mint);
  border: 1px solid var(--secondary-light);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin-top: 8px;
}
.pp-jobs .consent input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--secondary);
  border-radius: 4px;
  background: #fff;
  cursor: pointer; flex-shrink: 0; margin-top: 1px;
  position: relative;
}
.pp-jobs .consent input[type="checkbox"]:checked { background: var(--secondary); border-color: var(--secondary); }
.pp-jobs .consent input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.pp-jobs .consent label { font-size: .88rem; line-height: 1.5; color: var(--gray-700); cursor: pointer; }
.pp-jobs .consent .req { color: var(--primary); margin-left: 1px; font-style: normal; }
.pp-jobs .consent a { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* Wizard nav */
.pp-jobs .wizard-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--gray-200);
  gap: 12px; flex-wrap: wrap;
}
.pp-jobs .wizard-nav .back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gray-700); font-size: .92rem; font-weight: 700;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200); background: #fff;
  cursor: pointer; font-family: inherit;
}
.pp-jobs .wizard-nav .back:hover { background: var(--gray-100); color: var(--secondary); }
.pp-jobs .wizard-nav .right-side { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.pp-jobs .wizard-nav .step-of { font-size: .82rem; color: var(--gray-500); }

/* Alert */
.pp-jobs .alert {
  margin-top: 18px;
  background: var(--danger-light);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: .88rem; font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex; gap: 10px; align-items: center;
}
.pp-jobs .alert svg { width: 16px; height: 16px; stroke-width: 2.2; flex-shrink: 0; }

/* Success */
.pp-jobs .wizard-success {
  text-align: center;
  padding: 24px 12px 8px;
}
.pp-jobs .wizard-success .check-circle {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--success-light); color: var(--success);
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-jobs .wizard-success .check-circle svg { width: 36px; height: 36px; stroke-width: 2.2; }
.pp-jobs .wizard-success h3 {
  font-size: 1.6rem; font-weight: 800;
  color: var(--secondary); letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.pp-jobs .wizard-success p {
  font-size: 1rem; color: var(--gray-700); line-height: 1.6;
  max-width: 52ch; margin: 0 auto 20px;
  overflow-wrap: anywhere;
}
.pp-jobs .wizard-success p strong { color: var(--gray-900); }
.pp-jobs .wizard-success .ref-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: .82rem;
  color: var(--gray-700); font-weight: 600;
  margin-bottom: 20px;
}
.pp-jobs .wizard-success .ref-pill strong { color: var(--gray-900); }
.pp-jobs .wizard-success .secondary-line { font-size: .92rem; color: var(--gray-500); margin-bottom: 18px; }
.pp-jobs .wizard-success .secondary-line strong { color: var(--gray-900); }
.pp-jobs .wizard-success .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* Universal visible focus ring */
.pp-jobs *:focus-visible {
  outline: 2px solid var(--secondary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ensure `hidden` attribute wins over our display: flex / inline-flex rules
   (otherwise the alert + nav buttons render on initial page load). */
.pp-jobs [hidden] { display: none !important; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 1024px) {
  .pp-jobs .jobs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .pp-jobs .jobs-filterbar { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .pp-jobs .jobs-filterbar .reset { justify-content: flex-start; }
  .pp-jobs .job-body .grid { grid-template-columns: 1fr; gap: 0; }
  /* Eckdaten redundant on mobile: the hero CTA + wizard cover the action paths. */
  .pp-jobs .eckdaten { display: none; }
  .pp-jobs .job-hero .actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .pp-jobs .job-hero .actions .btn { justify-content: center; }
  .pp-jobs .job-hero .actions .start { text-align: center; }
  /* Tablet step between desktop (40 44 32) and mobile (24 18 22). */
  .pp-jobs .wizard-card { padding: 32px 28px 26px; }
}
@media (max-width: 560px) {
  .pp-jobs .jobs-grid { grid-template-columns: 1fr; }
  .pp-jobs .jobs-hero { padding: 36px 0 28px; }
  .pp-jobs .jobs-hero .h1 { font-size: 1.55rem; }
  .pp-jobs .job-hero { padding: 28px 0; }
  .pp-jobs .job-hero .h1 { font-size: 1.55rem; max-width: 100%; }
  .pp-jobs .job-hero .sub { font-size: .95rem; }
  .pp-jobs .job-body { padding: 32px 0 36px; }
  .pp-jobs .job-body .intro { font-size: .95rem; margin-bottom: 24px; }
  .pp-jobs .job-body section + section { margin-top: 26px; }
  .pp-jobs .job-body ul.dots { padding-left: 20px; gap: 5px; }
  .pp-jobs .job-body ul.dots li { font-size: .92rem; padding-left: 4px; }
  .pp-jobs .wizard-zone { padding: 36px 0 48px; }
  .pp-jobs .wizard-header .h2 { font-size: 1.35rem; }
  .pp-jobs .wizard-header .lead { font-size: .92rem; }
  .pp-jobs .wizard-card { padding: 24px 18px 22px; border-radius: var(--radius-md); }
  .pp-jobs .stepper { margin-bottom: 26px; }
  .pp-jobs .stepper::before, .pp-jobs .stepper::after { top: 12px; }
  .pp-jobs .step-dot { width: 26px; height: 26px; font-size: .74rem; }
  .pp-jobs .step-label { font-size: .66rem; }
  .pp-jobs .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .pp-jobs .review-group dl { grid-template-columns: 1fr; gap: 4px 0; }
  .pp-jobs .review-group dt { margin-top: 8px; }
  .pp-jobs .wizard-step h3.step-title { font-size: 1.1rem; }
  .pp-jobs .wizard-step .step-sub { font-size: .84rem; margin-bottom: 22px; }
  .pp-jobs .upload { padding: 16px; gap: 14px; flex-wrap: wrap; }
  .pp-jobs .upload .browse { padding: 8px 12px; font-size: .78rem; }
  .pp-jobs .wizard-nav { flex-direction: column; align-items: stretch; gap: 10px; }
  .pp-jobs .wizard-nav .right-side { flex-direction: column; width: 100%; margin-left: 0; gap: 10px; }
  .pp-jobs .wizard-nav .back,
  .pp-jobs .wizard-nav .btn { width: 100%; justify-content: center; }
  .pp-jobs .wizard-nav .step-of { display: none; }
}

/* Mobile-only: tighter container gutters per design (32 → 18). */
@media (max-width: 560px) {
  .pp-jobs .container { padding: 0 18px; }
}

/* Honor reduced-motion preference (WCAG 2.3.3 / vestibular safety). */
@media (prefers-reduced-motion: reduce) {
  .pp-jobs *, .pp-jobs *::before, .pp-jobs *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}