/* =================================================================
   UXOVIA · KARRIERESEITE
   Nur was diese Seite braucht: der flacher schliessende Hero mit der
   Faktenleiste, die gleich ausgerichteten Karten, die Stellenkarten,
   die Schrittlisten und das Bewerbungsformular. Glaskarten, Pillen,
   Knoepfe, Schrittnummern, Eingabefelder, Akkordeon und Abschluss-
   flaeche kommen unveraendert aus components.css und faq.css.

   Angelegt im Oktober 2026 mit dem neuen Seitentext.
   ================================================================= */

/* ── Hero ──────────────────────────────────────────────────────── */
/* Nach unten kuerzer als der Standard-Hero: auf dem Rechner soll man
   schon sehen, dass darunter Inhalt folgt. */
.karriere-hero         { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.karriere-hero-inhalt  { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.karriere-hero-titel   { max-width: 20ch; text-wrap: balance; }
.karriere-hero-lead    { max-width: 60ch; }

/* Zwei Knoepfe nebeneinander, auf dem Telefon untereinander und
   bildschirmbreit (die Breite setzt components.css an .btn-lg). */
.karriere-knoepfe {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3);
}
@media (max-width: 560px) {
  .karriere-knoepfe { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Drei Angaben als ruhige Leiste, keine Karten: oben eine feine Linie,
   dazwischen senkrechte Trennstriche. */
.karriere-fakten {
  list-style: none; margin: 0; padding: var(--s-5) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%; max-width: 860px;
  border-top: 1px solid var(--border);
}
.karriere-fakten li {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  min-width: 0; padding-inline: var(--s-4);
}
.karriere-fakten li + li { border-left: 1px solid var(--border); }
.karriere-fakten .label  { color: var(--text); }
.karriere-fakt-text      { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--text-2); }
@media (max-width: 700px) {
  .karriere-fakten { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .karriere-fakten li + li { border-left: 0; border-top: 1px solid var(--border-faint); padding-top: var(--s-4); }
}

/* ── Abschnittskoepfe ──────────────────────────────────────────── */
/* Die Pille als Ueberschrift: Fragenblock ohne eigene h2. h2 bringt
   sonst die enge Zeilenhoehe der Ueberschriften mit. */
.karriere-pillen-titel { line-height: var(--lh-body); }

/* Ueberschrift in zwei gesetzten Zeilen. Der Kopf ist dafuer breiter als
   die ueblichen 720px, sonst braeche die zweite Zeile bei 48px Schrift
   noch einmal um. Der Fliesstext darunter behaelt die Lesebreite. */
.karriere-kopf-breit          { max-width: 960px; }
.karriere-kopf-text           { max-width: 720px; }
.karriere-titel-geteilt span  { display: block; text-wrap: balance; }
/* Absatz in gesetzten Zeilen. Erst ab 1024px: die laengere Zeile braucht
   bei 18px rund 860px und liefe auf schmaleren Schirmen aus dem Bild. */
@media (min-width: 1024px) {
  .karriere-zeilen span { display: block; white-space: nowrap; }
}

/* Der Satz zur Remote-Arbeit steht unter dem Intro als eigene Zeile. */
.karriere-remote {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-body); font-weight: var(--w-medium); color: var(--text);
}
.karriere-remote .badge-dot { color: var(--brand); }

/* ── Zweierraster ──────────────────────────────────────────────── */
/* Ausdruecklich zwei Spalten. .grid-2 aus components.css fuellt per
   auto-fit auf, vier Karten stuenden dort auf breiten Schirmen in
   einer Reihe. */
.karriere-raster-2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5);
}
@media (max-width: 760px) {
  .karriere-raster-2 { grid-template-columns: minmax(0, 1fr); }
}
.karriere-karte { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
/* Kartentext im Abschnitt „Warum Uxovia": eine Stufe groesser als der
   uebliche Kartentext und satzweise abgesetzt. Die Karten sind gut 500px
   breit, bei 18px bleiben rund 50 Zeichen je Zeile. Die Ueberschrift ist
   in der Skala gleich gross (18px); sie hebt sich ueber Gewicht, Farbe
   und die Linie darunter ab. */
.karriere-karte-titel { padding-bottom: var(--s-4); border-bottom: 1px solid var(--border); line-height: var(--lh-tight); }
.karriere-karte-text  { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.karriere-karte-text p { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--text-2); }

/* ── Stellenkarten ─────────────────────────────────────────────── */
/* Drei nebeneinander erst ab 1200px: darunter bliebe jeder Karte zu
   wenig Zeilenbreite. Dazwischen eine Spalte in Lesebreite. */
.karriere-stellen {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5);
  max-width: 720px; margin-inline: auto;
}
@media (min-width: 1200px) {
  .karriere-stellen { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
.karriere-stelle { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.karriere-stelle:hover { filter: none; }

.karriere-stelle-titel { display: flex; flex-direction: column; gap: var(--s-2); }
.karriere-stelle-rolle {
  font-size: var(--t-h2); font-weight: var(--w-medium);
  line-height: var(--lh-h); letter-spacing: var(--tr-h); color: var(--text);
}
.karriere-stelle-fokus {
  font-size: var(--t-body); font-weight: var(--w-medium);
  line-height: var(--lh-tight); letter-spacing: var(--tr-body); color: var(--kobalt-blass);
}
/* Die Zwischenueberschrift trennt Aufgabe und Haltung, eine feine
   Linie darueber macht den Wechsel sichtbar. */
.karriere-stelle-zwischen {
  padding-top: var(--s-4); border-top: 1px solid var(--border);
  font-size: var(--t-body); font-weight: var(--w-semi);
  line-height: var(--lh-tight); letter-spacing: var(--tr-body);
}
.karriere-stelle-cta { align-self: flex-start; margin-top: auto; }

/* Gleiche Fluchten ueber die Karten einer Reihe: jede Karte legt ihre
   Zeilen auf das Raster der Elternliste. Titel, Absaetze, Zwischen-
   ueberschrift und Knopf stehen damit in allen Karten einer Reihe auf
   derselben Hoehe, egal wie lang der Text davor ist. Ohne subgrid
   bleibt die Flex-Spalte oben, der Knopf sitzt dann ueber margin-top
   am unteren Rand. */
@supports (grid-template-rows: subgrid) {
  .karriere-karte  { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s-4); align-content: start; }
  .karriere-stelle { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--s-4); }
  .karriere-stelle-cta { margin-top: var(--s-3); align-self: end; justify-self: start; }
}

/* ── Spalten mit Text und Schrittlisten ────────────────────────── */
.karriere-split   { align-items: start; }
.karriere-spalte  { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); min-width: 0; }

/* .steps steht in components.css als div. Hier ist es eine geordnete
   Liste, die Nummerierung kommt aus .step-number. */
.karriere-schritte { list-style: none; margin: 0; padding: 0; gap: var(--s-5); }
.karriere-schritt-inhalt { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding-top: var(--s-2); }
.karriere-schritt-inhalt > h3,
.karriere-schritt-inhalt > h4 {
  margin: 0; font-size: var(--t-h3); font-weight: var(--w-semi);
  line-height: var(--lh-tight); letter-spacing: var(--tr-h);
}

/* Die Haken der Liste sitzen an der ersten Zeile, nicht in der Mitte
   eines mehrzeiligen Punkts. */
.karriere-liste li { align-items: flex-start; line-height: var(--lh-body); }
.karriere-liste li::before { margin-top: 1px; }

/* ── Bewerbung ─────────────────────────────────────────────────── */
.karriere-bewerbung {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-8); align-items: start;
}
@media (max-width: 960px) {
  .karriere-bewerbung { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}
.karriere-ablauf { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-4); width: 100%; }

/* Das Formular hellt beim Ueberfahren nicht auf: es ist Arbeitsflaeche,
   kein Element, das zum Klicken einlaedt. */
.karriere-formular-karte:hover { filter: none; }
.karriere-formular { display: flex; flex-direction: column; gap: var(--s-5); }
.karriere-feld     { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.karriere-feld label {
  font-size: var(--t-small); font-weight: var(--w-medium);
  line-height: var(--lh-tight); color: var(--text);
}
.karriere-optional { font-weight: var(--w-regular); color: var(--text-legible); }
.karriere-felder-2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5);
}
@media (max-width: 560px) {
  .karriere-felder-2 { grid-template-columns: minmax(0, 1fr); }
}
.karriere-formular .textarea { resize: vertical; line-height: var(--lh-body); }
/* Die aufgeklappte Auswahl zeichnet das Betriebssystem. Ohne eigene
   Farbe steht dort weisse Schrift auf weissem Grund. */
.karriere-formular .select option { background: var(--bg-elevated); color: var(--text); }

.karriere-formular [aria-invalid="true"] { border-color: var(--danger); }
.karriere-fehler { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--danger); }

/* Dateifeld fuer den Lebenslauf. Das Feld selbst zeichnet der Browser,
   nur der Knopf darin bekommt den Stil der zweiten Schaltflaeche. */
.karriere-datei {
  width: 100%; padding: var(--s-2); min-height: 48px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--text-legible);
  font-family: inherit; font-size: var(--t-small);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.karriere-datei:hover { border-color: var(--border-brand); }
.karriere-datei:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.karriere-datei::file-selector-button {
  margin-right: var(--s-3); padding: var(--s-2) var(--s-4); min-height: 40px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: var(--t-small); font-weight: var(--w-medium);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.karriere-datei::file-selector-button:hover { background: var(--surface); }

/* Fangfeld fuer Bots. Aus dem Bild geschoben statt display:none, weil
   manche Bots ausgeblendete Felder erkennen und auslassen. */
.karriere-fang {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.karriere-formular { position: relative; }

.karriere-absenden { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }

/* Rueckmeldung nach dem Absenden. Blendet weich ein: karriere.js nimmt
   erst `hidden` weg und setzt im naechsten Bild `is-sichtbar`. */
.karriere-status {
  padding: var(--s-4); border-radius: var(--r-md);
  border: 1px solid var(--border-brand); background: var(--brand-faint);
  font-size: var(--t-small); line-height: var(--lh-body); color: var(--text);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.karriere-status.is-sichtbar { opacity: 1; transform: none; }
.karriere-status[data-art="fehler"] { border-color: var(--danger); background: var(--surface); }
.karriere-status[data-art="ok"]     { border-color: var(--success); }
@media (prefers-reduced-motion: reduce) {
  .karriere-status { transition: none; transform: none; }
}
/* Waehrend des Versands: Knopf gedimmt, kein zweiter Klick. */
.karriere-formular[aria-busy="true"] button[type="submit"] { opacity: 0.6; pointer-events: none; }
.karriere-status a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Abschluss ─────────────────────────────────────────────────── */
.karriere-abschluss       { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
.karriere-abschluss-titel { max-width: 22ch; text-wrap: balance; }
.karriere-abschluss-text  { display: flex; flex-direction: column; gap: var(--s-4); max-width: 56ch; }

/* ── Gestaffeltes Einblenden ───────────────────────────────────── */
.karriere-staffel > *:nth-child(2) { --reveal-delay:  80ms; }
.karriere-staffel > *:nth-child(3) { --reveal-delay: 160ms; }
.karriere-staffel > *:nth-child(4) { --reveal-delay: 240ms; }