/* ============================================================
   jobs.css — Stellenseite rufki.de/jobs (01.09.2026)
   Eigene Datei, damit app.css/pages.css unberuehrt bleiben.
   Erbt saemtliche Tokens aus app.css (:root) — keine neuen Farben.
   ============================================================ */

/* Nur fuer Screenreader (im Haus-CSS bisher nicht vorhanden) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Kopf: Video links, Kernversprechen rechts ---------- */
/* Oben so viel Luft wie .phero — sonst schiebt sich der Inhalt unter die
   fixierte Nav (und auf Mobil zusaetzlich unter die Aktionsleiste). */
.jobs-kopf {
  padding-block: clamp(6rem, 12vh, 8rem) var(--space-l);
}
.jobs-kopf__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
}
@media (max-width: 900px) {
  .jobs-kopf__grid {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }
}

/* Hochformat-Video 9:16 — Poster + Klick-Start, mobile-first */
.jobs-video {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--glow-violet);
}
.jobs-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jobs-video__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(
      60% 45% at 50% 62%,
      rgba(6, 9, 18, 0.72) 0%,
      rgba(6, 9, 18, 0.15) 100%
    ),
    /* Sicht-Befund 04.09.2026 (#4): der ins Poster gebrannte Satz "Raus aus
       dem Winter. Komplett kostenlos!" steht weiss auf hellem Tuerkiswasser.
       Dunkles Band im Ruhezustand dahinter — verschwindet mit dem Overlay
       beim Klick-Start, das Video selbst bleibt unangetastet. */
    linear-gradient(
        180deg,
        transparent 40%,
        rgba(6, 9, 18, 0.5) 56%,
        rgba(6, 9, 18, 0.72) 64%,
        rgba(6, 9, 18, 0.72) 88%,
        rgba(6, 9, 18, 0.5) 100%
      ),
    transparent;
  color: var(--text);
  transition: opacity var(--d-ui) var(--ease-exit);
}
.jobs-video__start[hidden] {
  display: none;
}
/* Sicht-Befund 04.09.2026 (#4): liegt genau ueber dem im Poster gebrannten
   Satz und ersetzt ihn optisch — Weiss auf dem dunklen Band statt Weiss auf
   hellem Wasser. Verschwindet mit dem Overlay beim Klick-Start. */
/* Weichzeichner ueber der unteren Bildhaelfte: die im Poster gebrannte
   Schrift verliert ihre Kanten und liest sich nicht mehr als zweiter Text,
   das Bild bleibt hell. Reines Abdunkeln half nicht — es daempft Schrift und
   Wasser gleich stark (Sicht-Befund 04.09.2026, #4). */
.jobs-video__start::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  bottom: 0;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 16%,
    #000 100%
  );
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
  pointer-events: none;
}
.jobs-video__claim {
  position: absolute;
  z-index: 1;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 24.5%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: clamp(1.02rem, 0.86rem + 0.7vw, 1.3rem);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.jobs-video__claim b {
  font-weight: 800;
}
.jobs-video__knopf {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  box-shadow: var(--glow-violet-strong);
  transition: transform var(--d-hover) var(--ease-micro);
}
.jobs-video__start:hover .jobs-video__knopf,
.jobs-video__start:focus-visible .jobs-video__knopf {
  transform: scale(1.08);
}
.jobs-video__knopf svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: #fff;
}
/* Dauer-Chip oben rechts — verschwindet mit dem Overlay */
.jobs-video__dauer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: var(--fs-spec);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(6, 9, 18, 0.68);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
  pointer-events: none;
}
.jobs-video.laeuft .jobs-video__dauer {
  display: none;
}

/* Ohne JS gibt es keinen Klick-Start → Overlay aus, dafuer der Direktlink. */
html:not(.js) .jobs-video__start,
html:not(.js) .jobs-video__dauer {
  display: none;
}
.jobs-video__noscript {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  text-align: center;
  margin: 0;
}
.jobs-video__noscript a {
  color: var(--text);
  background: rgba(6, 9, 18, 0.72);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.jobs-kopf__titel {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 var(--space-s);
}
.jobs-kopf__titel em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jobs-kopf__lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 var(--space-m);
}
.jobs-kopf__lead b {
  color: var(--text);
  font-weight: 600;
}
.jobs-kopf__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* ---------- Zahlenreihe ---------- */
.jobs-zahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  margin-block: var(--space-l);
}
@media (max-width: 760px) {
  .jobs-zahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jobs-zahl {
  background: var(--night);
  padding: var(--space-s) var(--space-xs);
  text-align: center;
}
.jobs-zahl__wert {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.jobs-zahl__text {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-spec);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Zweispalter „Job / Bekommst du" ---------- */
.jobs-paar {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .jobs-paar {
    grid-template-columns: 1fr;
  }
}
.jobs-karte {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  padding: var(--space-m);
}
.jobs-karte h3 {
  font-size: var(--fs-h4);
  margin: 0 0 var(--space-xs);
}
.jobs-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jobs-liste li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--muted);
}
.jobs-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet-bright);
}
.jobs-liste li b {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Provisionsstaffel ---------- */
.jobs-staffel {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-s);
}
.jobs-staffel th {
  text-align: left;
  font-size: var(--fs-spec);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line-strong);
}
.jobs-staffel td {
  padding: 0.9rem 0.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.jobs-staffel tr:last-child td {
  border-bottom: none;
}
.jobs-staffel td:first-child {
  color: var(--text);
}
.jobs-staffel .wert {
  font-weight: 700;
  color: var(--violet-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.jobs-staffel tr:last-child .wert {
  color: var(--magenta);
}
/* Kein Kleingedrucktes: hier stehen Preise und der Rechtshinweis —
   lesbar, nicht versteckt. */
.jobs-fussnote {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: var(--space-s);
  max-width: 68ch;
}

/* ---------- Weg-Schritte ---------- */
.jobs-weg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-s);
  counter-reset: schritt;
}
@media (max-width: 860px) {
  .jobs-weg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .jobs-weg {
    grid-template-columns: 1fr;
  }
}
.jobs-schritt {
  counter-increment: schritt;
  border-top: 2px solid var(--line-strong);
  padding-top: var(--space-s);
}
.jobs-schritt::before {
  content: "0" counter(schritt);
  display: block;
  font-size: var(--fs-spec);
  letter-spacing: 0.16em;
  color: var(--violet-bright);
  margin-bottom: 0.5rem;
}
.jobs-schritt h3 {
  font-size: var(--fs-h4);
  margin: 0 0 0.4rem;
}
.jobs-schritt p {
  color: var(--muted);
  margin: 0;
  font-size: 0.98rem;
}

/* ---------- Klartext-Kasten ---------- */
.jobs-klartext {
  border-left: 3px solid var(--magenta);
  background: var(--bone);
  border-radius: 0 var(--r-inner) var(--r-inner) 0;
  padding: var(--space-m);
  max-width: 76ch;
}
.jobs-klartext h3 {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-h4);
}
.jobs-klartext p {
  margin: 0 0 0.6rem;
  color: var(--muted);
}
.jobs-klartext p:last-child {
  margin-bottom: 0;
}
.jobs-klartext b {
  color: var(--text);
}

/* ---------- PDF-Download ---------- */
.jobs-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-inner);
  background: var(--raised);
  color: var(--text);
  text-decoration: none;
  transition:
    border-color var(--d-hover) var(--ease-micro),
    transform var(--d-hover) var(--ease-micro);
}
.jobs-pdf:hover,
.jobs-pdf:focus-visible {
  border-color: var(--violet);
  transform: translateY(-2px);
}
.jobs-pdf svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke: var(--violet-soft);
  fill: none;
  stroke-width: 1.6;
}
.jobs-pdf__k {
  display: block;
  font-weight: 600;
}
.jobs-pdf__v {
  display: block;
  font-size: var(--fs-spec);
  color: var(--faint);
}

/* ---------- Formular-Feinheiten ---------- */
.jobs-form__hinweis {
  font-size: var(--fs-spec);
  color: var(--faint);
  margin-top: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
  .jobs-pdf,
  .jobs-video__knopf,
  .jobs-video__start {
    transition: none;
  }
}

/* ---------- Mobil: steht bewusst ganz unten -------------------------
   Beide Regeln muessen die Basiswerte weiter oben ueberschreiben — bei
   gleicher Spezifitaet gewinnt die spaetere Regel. ------------------- */
@media (max-width: 900px) {
  /* Aktionsleiste (~74px) + fixierte Nav (~76px) stapeln sich auf dem Handy;
     mit dem .phero-Abstand allein schoebe sich das Video unter die Nav. */
  .jobs-kopf {
    padding-top: 11rem;
  }
  /* Das Hochformat darf den ersten Screen nicht allein fuellen — Headline
     und Bewerben-Knopf muessen mit ins Bild. */
  .jobs-video {
    max-width: min(300px, 66vw);
  }
}