/* ==========================================================================
 * Karriere-Seite
 * Version via PXZ_VERSION constant (functions.php) + ?ver= cache-buster.
 * Dark-theme, amber-accented. Mirrors the MFA section on the homepage
 * so "Jetzt bewerben" feels like a direct continuation of that CTA.
 * Scoped to body.page-template-template-karriere to avoid bleeding into
 * other pages (Anti-Pattern §16.2 — no generic tag selectors).
 * ========================================================================== */

body.page-template-template-karriere main.site-main,
body.page-template-template-karriere main.site-main > article,
body.page-template-template-karriere .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.page-template-template-karriere .entry-content > * { margin: 0 !important; }

.pxz-kar {
  /* Karriere is a pauschal dark page. Primitives (--pxz-amber, --pxz-ink, ...)
   * come from :root via assets/css/tokens.css (SSoT since v2.7.5 / S2.0).
   * Only semantic tokens are overridden here for the .pxz-kar subtree. */
  --pxz-accent:        var(--pxz-amber);
  --pxz-accent-hover:  var(--pxz-amber-bright);
  --pxz-bg:            #0E0E10;                  /* deeper than --pxz-ink by design (amber-glow pairing) */
  --pxz-text:          rgba(255,255,255,0.92);
  --pxz-text-muted:    rgba(255,255,255,0.7);
  --pxz-text-tertiary: rgba(255,255,255,0.5);
  background: var(--pxz-bg);
  color: var(--pxz-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--pxz-t6-size);
  line-height: var(--pxz-t6-line);
  min-height: 100vh;
}

/* Amber glow like homepage MFA section */
.pxz-kar-hero { position: relative; overflow: hidden; }
.pxz-kar-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at top right, rgba(245,184,0,0.22), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(245,184,0,0.10), transparent 55%);
}
.pxz-kar-hero-inner {
  position: relative; max-width: var(--pxz-c3-max); margin: 0 auto;  /* S55d C3 */
  padding: 96px 24px 48px;
}
@media (min-width: 768px)  { .pxz-kar-hero-inner { padding: 120px 48px 56px; } }
@media (min-width: 1280px) { .pxz-kar-hero-inner { padding: 160px 64px 72px; } }

.pxz-kar-eyebrow {
  font-size: var(--pxz-t7-size); text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--pxz-amber); font-weight: 700; margin: 0 0 1.5rem;
}
.pxz-kar-title {
  margin: 0; color: var(--pxz-text);
  font-size: var(--pxz-t1-size);
  line-height: var(--pxz-t1-line); letter-spacing: var(--pxz-t1-track); font-weight: var(--pxz-t1-weight);
  text-wrap: balance;
}
.pxz-kar-title .soft { color: var(--pxz-text-tertiary); }
.pxz-kar-sub {
  max-width: var(--pxz-c1-max); margin: 1.75rem 0 0;  /* S55d C1 reading */
  color: var(--pxz-text-muted);
  font-size: var(--pxz-t5-size);
  line-height: var(--pxz-t5-line); text-wrap: pretty;
}

/* Form wrapper (MFA-Card analogue) */
.pxz-kar-form-wrap {
  position: relative; max-width: var(--pxz-c2-max); margin: 0 auto;  /* S55d C2 card */
  padding: 32px 24px 24px;
}
@media (min-width: 768px)  { .pxz-kar-form-wrap { padding: 40px 48px 32px; } }
@media (min-width: 1280px) { .pxz-kar-form-wrap { padding: 48px 64px 48px; } }

/* S63a-fix2 (2026-05-02): the actual whitespace source was a 80 px
   margin-top on .pxz-footer (footer.css §base) plus the white body
   background bleeding through. The dark .pxz-kar section ends, then
   80 px of body background shows, then the dark footer starts —
   visually a white stripe.

   Fix: zero the footer margin-top on the karriere page, and paint the
   body in --pxz-bg so any residual gap stays dark. */
body.page-template-template-karriere {
    background: var(--pxz-bg);
}
body.page-template-template-karriere .pxz-footer {
    margin-top: 0;
}

/* S65c (2026-05-10): Card-Radius auf Token (xl 28px), Shadow auf Token-Accent. */
.pxz-kar-card {
  position: relative;
  border-radius: var(--pxz-radius-card-hero);
  padding: 72px 40px 56px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(245,184,0,0.28);
  box-shadow: var(--pxz-shadow-accent);
  scroll-margin-top: 120px;
}
@media (min-width: 768px)  { .pxz-kar-card { padding: 96px 72px 80px; } }
@media (min-width: 1280px) { .pxz-kar-card { padding: 112px 96px 96px; } }

/* S65c (2026-05-10): Eyebrow-Tracking 0.20em → 0.12em (S65-Konsistenz). */
.pxz-kar-card-eyebrow {
  font-size: var(--pxz-t8-size); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--pxz-amber); font-weight: 700; margin: 0 0 1.25rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid rgba(245,184,0,0.4);
}
.pxz-kar-card-title {
  margin: 0 0 0.75rem; color: var(--pxz-text);
  font-size: var(--pxz-t3-size);
  line-height: var(--pxz-t3-line); letter-spacing: var(--pxz-t3-track); font-weight: var(--pxz-t3-weight);
}
.pxz-kar-card-lead {
  color: var(--pxz-text-muted);
  font-size: var(--pxz-t6-size); line-height: 1.55;
  margin: 0 0 2.5rem; max-width: var(--pxz-c1-max);  /* S55d C1 reading */
}
@media (min-width: 768px) { .pxz-kar-card-lead { margin-bottom: 3rem; } }

.pxz-kar-email-note {
  margin: 2rem 0 0; font-size: var(--pxz-t6-size); color: var(--pxz-text-muted);
}
.pxz-kar-email-note a {
  color: var(--pxz-amber); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.pxz-kar-email-note a:hover { color: var(--pxz-amber-bright); }

/* --------------------------------------------------------------------
 * WPForms dark-mode styling — scoped to .pxz-kar only.
 * We deliberately reuse WPForms' default markup so the plugin keeps
 * owning validation / accessibility. Colour + typography only.
 * -------------------------------------------------------------------- */

.pxz-kar .wpforms-container { margin: 0; }
.pxz-kar .wpforms-container .wpforms-form { font-family: inherit; color: var(--pxz-text); }
.pxz-kar .wpforms-field { padding: 12px 0 20px; }
.pxz-kar .wpforms-field-label,
.pxz-kar .wpforms-field-sublabel {
  color: var(--pxz-text) !important;
  font-weight: 600 !important;
  font-size: var(--pxz-t7-size) !important;
  letter-spacing: 0.01em;
}
.pxz-kar .wpforms-field-description {
  color: var(--pxz-text-muted) !important;
  font-size: var(--pxz-t8-size) !important;
  margin-top: 6px;
  line-height: 1.45;
}
.pxz-kar .wpforms-field .wpforms-required-label { color: var(--pxz-amber) !important; }

.pxz-kar .wpforms-field input[type=text],
.pxz-kar .wpforms-field input[type=email],
.pxz-kar .wpforms-field input[type=tel],
.pxz-kar .wpforms-field input[type=number],
.pxz-kar .wpforms-field input[type=url],
.pxz-kar .wpforms-field textarea,
.pxz-kar .wpforms-field select {
  width: 100%;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: var(--pxz-text) !important;
  border-radius: var(--pxz-radius-input) !important;
  padding: 14px 16px !important;
  font-size: var(--pxz-t6-size) !important;
  font-family: inherit !important;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow: none !important;
}
.pxz-kar .wpforms-field textarea { min-height: 140px; }
.pxz-kar .wpforms-field input::placeholder,
.pxz-kar .wpforms-field textarea::placeholder {
  color: var(--pxz-text-tertiary) !important;
}
.pxz-kar .wpforms-field input:focus,
.pxz-kar .wpforms-field textarea:focus,
.pxz-kar .wpforms-field select:focus {
  outline: none !important;
  border-color: var(--pxz-amber) !important;
  box-shadow: 0 0 0 4px rgba(245,184,0,0.22) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* S55-Karriere-Linksbuendig (2026-05-08, Dr. Stracke): Vorname-Feld stand
 * gegenueber E-Mail/Telefon nach rechts eingerueckt, weil WPForms den
 * Name-Field in <fieldset> wrappt und der Browser-Default-Padding
 * (~12 px) sowie Border darauf greift. Reset auf 0 + max-width fuer den
 * Row-Container, damit das Vorname-Input bündig zur Card-Innenkante
 * abschliesst wie alle anderen Felder. */
.pxz-kar .wpforms-field-name fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}
.pxz-kar .wpforms-field-name fieldset > legend.wpforms-field-label {
  padding-inline: 0;
  margin-bottom: 8px;
  width: 100%;
}
.pxz-kar .wpforms-field-name .wpforms-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: none !important;
  width: 100% !important;
}
.pxz-kar .wpforms-field-name .wpforms-field-row-block,
.pxz-kar .wpforms-field-name .wpforms-field-row-block.wpforms-first,
.pxz-kar .wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.pxz-kar .wpforms-field-name .wpforms-field-row-block.wpforms-one-half.first,
.pxz-kar .wpforms-field-name .wpforms-field-row-block.wpforms-one-half.last {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  max-width: none !important;
}
/* Bugs-Welle 2026-05-13 (Bug #9): Vorname-Input war im Container links
 * eingerückt, Nachname rechts versetzt. Ursache war ein WPForms-default
 * margin/padding auf .wpforms-first / .wpforms-one-half, der unsere
 * generelle .wpforms-field-row-block-Regel übersteuerte. Die Input-Felder
 * selbst bekommen jetzt zusätzlich width:100% innerhalb des Blocks, sodass
 * der Border garantiert von Block-Rand zu Block-Rand reicht. */
.pxz-kar .wpforms-field-name .wpforms-field-row-block input,
.pxz-kar .wpforms-field-name .wpforms-field-row-block .wpforms-field-row-block-wrap {
  width: 100% !important;
  box-sizing: border-box;
}
@media (max-width: 540px) {
  .pxz-kar .wpforms-field-name .wpforms-field-row-block {
    flex: 1 1 100%;
  }
}

/* File upload field (modern style uploader) */
.pxz-kar .wpforms-field-file-upload .wpforms-uploader,
.pxz-kar .wpforms-field-file-upload input[type=file] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px dashed rgba(245,184,0,0.45) !important;
  color: var(--pxz-text-muted) !important;
  border-radius: var(--pxz-radius-input) !important;
  padding: 40px 20px !important;
  min-height: 120px;
}
.pxz-kar .wpforms-field-file-upload .modern-title,
.pxz-kar .wpforms-field-file-upload .wpforms-uploader .modern-title {
  color: var(--pxz-text) !important;
  font-weight: 600 !important;
  font-size: var(--pxz-t6-size) !important;
}
.pxz-kar .wpforms-field-file-upload .modern-hover,
.pxz-kar .wpforms-field-file-upload .wpforms-uploader:hover {
  border-color: var(--pxz-amber) !important;
  background: rgba(245,184,0,0.08) !important;
}
.pxz-kar .wpforms-uploader-dropzone svg,
.pxz-kar .wpforms-field-file-upload svg { fill: var(--pxz-amber) !important; }

/* The "Du kannst bis zu N Dateien hochladen" hint should sit below the zone,
 * not inside it — otherwise it overlaps the dropzone instructions. */
.pxz-kar .wpforms-field-file-upload .wpforms-field-description,
.pxz-kar .wpforms-field-file-upload .wpforms-uploader-hint,
.pxz-kar .wpforms-field-file-upload .modern-hint {
  position: static !important;
  color: var(--pxz-text-muted) !important;
  font-size: var(--pxz-t8-size) !important;
  margin-top: 10px !important;
  padding: 0 !important;
  opacity: 1 !important;
  background: transparent !important;
  text-align: left;
}
.pxz-kar .wpforms-field-file-upload .wpforms-uploader .modern-hint {
  display: none !important; /* duplicated hint inside dropzone, hide it */
}

/* Link styling inside GDPR checkbox label */
.pxz-kar .wpforms-field-checkbox label {
  color: var(--pxz-text-muted) !important;
  font-weight: 400 !important;
  font-size: var(--pxz-t7-size) !important;
  line-height: 1.55;
  cursor: pointer;
}

/* GDPR checkbox */
.pxz-kar .wpforms-field-gdpr-checkbox ul,
.pxz-kar .wpforms-field-checkbox ul { list-style: none; margin: 0; padding: 0; }
.pxz-kar .wpforms-field-gdpr-checkbox ul li,
.pxz-kar .wpforms-field-checkbox ul li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--pxz-text-muted);
  font-size: var(--pxz-t7-size);
  line-height: 1.55;
}
.pxz-kar .wpforms-field-gdpr-checkbox input[type=checkbox],
.pxz-kar .wpforms-field-checkbox input[type=checkbox] {
  width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--pxz-amber);
  flex-shrink: 0;
}
.pxz-kar .wpforms-field-gdpr-checkbox a,
.pxz-kar .wpforms-field-checkbox a {
  color: var(--pxz-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Submit button */
.pxz-kar .wpforms-submit-container { margin-top: 16px; }
.pxz-kar .wpforms-submit {
  background: var(--pxz-amber) !important;
  color: var(--pxz-ink) !important;
  border: none !important;
  border-radius: var(--pxz-radius-btn) !important;
  padding: var(--pxz-btn-padding-y) var(--pxz-btn-padding-x) !important;
  font-weight: var(--pxz-btn-font-weight) !important;
  font-size: var(--pxz-btn-font-size) !important;
  min-height: var(--pxz-btn-height-min);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pxz-kar .wpforms-submit:hover {
  background: var(--pxz-amber-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(245,184,0,0.36);
}
.pxz-kar .wpforms-submit:focus-visible {
  outline: 3px solid rgba(245,184,0,0.55) !important;
  outline-offset: 3px !important;
}

/* Validation messages */
.pxz-kar .wpforms-error {
  color: #ffb4b4 !important;
  font-size: var(--pxz-t8-size) !important;
  margin-top: 6px;
}
.pxz-kar .wpforms-field input.wpforms-error,
.pxz-kar .wpforms-field textarea.wpforms-error {
  border-color: #ffb4b4 !important;
  box-shadow: 0 0 0 3px rgba(255,180,180,0.22) !important;
}

/* Confirmation message */
.pxz-kar .wpforms-confirmation-container-full {
  background: rgba(245,184,0,0.10) !important;
  border: 1px solid rgba(245,184,0,0.40) !important;
  color: var(--pxz-text) !important;
  padding: 32px !important;
  border-radius: var(--pxz-radius-card) !important;
}