/* ═══════════════════════════════════════════════════════════════════
   /karriere und /karriere/<slug> — Stellenliste, Stellendetail,
   Bewerbungs-Modal.

   Register wie überall: Weiß, Haarlinien, keine getönten Flächen
   (DESIGN §2/§6). Wiederverwendet: .pill .h1 .h2 .sec-head .ticks
   .field .opt .btn .tag--demo .page-head .joblist/.job (pages.css, seit
   Entwurf 1) sowie die Assistenten-Hülle .wiz__* und .modal
   (components.css).

   Hier steht nur, was es zweimal nicht gibt:
     Kopfzahlen · Benefit-Liste · Stellenliste zweispaltig ·
     Initiativ-Karte · Ansprechpartnerin · Stellendetail (.jd-*) ·
     die eigenen Teile des Bewerbungs-Modals (.bw-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kh__title{max-width:22ch}
.kh__lead{margin-top:var(--s-5);max-width:60ch;color:var(--c-muted);font-size:var(--t-md)}
.kh__facts{display:flex;flex-wrap:wrap;gap:var(--s-10);margin-top:var(--s-8);
  padding-top:var(--s-6);border-top:1px solid var(--c-line)}
.kh__facts__v{display:block;font-size:var(--t-xl);line-height:1;letter-spacing:-.03em;
  font-weight:var(--fw-title);font-variant-numeric:tabular-nums}
.kh__facts__k{display:block;margin-top:var(--s-2);font-size:var(--t-xs);
  font-weight:var(--fw-strong);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-muted)}

/* ── Benefits ─────────────────────────────────────────────────────── */
/* Die 4-Tage-Woche steht im Bestand als fünfter Punkt unter einer
   Absage. Sie ist hier die erste Zeile und die einzige mit Fläche —
   und die Fläche ist Weiß mit Haarlinie, nicht Blush (§2). */
.kben{padding-block:var(--section-y)}
.kben__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);
  gap:var(--s-16);align-items:start}
.kben__list{display:grid;gap:var(--s-4)}
.kben__item{display:flex;align-items:center;gap:var(--s-5);
  font-size:var(--t-sm);line-height:1.5}
.kben__item--lead{padding:var(--s-5) var(--s-6);border:1px solid var(--c-line);
  border-radius:var(--r-card);font-size:var(--t-md);font-weight:var(--fw-title);
  letter-spacing:-.02em}
.kben__ic{flex:none;width:2.6rem;height:2.6rem;padding:.7rem}
.kben__item--lead .kben__ic{width:3.25rem;height:3.25rem;padding:.9rem}
.kben__text{min-width:0}

.kben__media{margin:0}
.kben__media img{width:100%;height:auto;border-radius:var(--r-img);display:block}
.kben__credit{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--c-muted)}

/* ── Stellenliste ─────────────────────────────────────────────────── */
.kjobs{padding-block:0 var(--section-y)}
/* Der Hinweis, was Bestand ist und was Entwurf (PRINCIPLES §1). Er
   steht über der Liste, nicht darunter — er soll gelesen werden. */
.kjobs__note{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);
  margin-bottom:var(--s-8);padding-bottom:var(--s-6);
  border-bottom:1px solid var(--c-line);
  font-size:var(--t-sm);color:var(--c-muted);max-width:80ch}

/* Auf 1432px Inhalt wäre eine einspaltige Liste eine Zeile Text pro
   Bildschirmbreite — zweispaltig bleibt jede Karte ein Container. */
/* (Der Titel-Link selbst ist in pages.css geregelt — die Startseite
   zeigt dieselben Karten.) */
.joblist--2{grid-template-columns:1fr 1fr;align-items:start}

.kjobs__ini{margin-top:var(--s-6);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-8);align-items:center;padding:var(--s-8)}
.kjobs__ini-act{display:grid;justify-items:start;gap:var(--s-3)}
.kjobs__ini-meta{font-size:var(--t-xs);color:var(--c-muted)}

/* ── Ansprechpartnerin ────────────────────────────────────────────── */
.kkon{padding-block:0 var(--section-y)}
.kkon__box{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:var(--s-10);align-items:start;padding-top:var(--s-10);
  border-top:1px solid var(--c-line)}
.kkon__name{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;
  font-weight:var(--fw-title)}
.kkon__role{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--c-muted)}
.kkon__list{display:grid;gap:var(--s-5)}
.kkon__k{display:block;font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.kkon__v{display:block;margin-top:.2rem;font-size:var(--t-md)}
.kkon__v a{border-bottom:1px solid var(--c-line);transition:color var(--dur-ui),border-color var(--dur-ui)}
.kkon__v a:hover{color:var(--c-signal);border-color:var(--c-signal)}

/* ═══ STELLENDETAIL ═══════════════════════════════════════════════════
   Anatomie wie das Kursblatt (.sd-* in pages/seminar.css): Textspalte
   auf 68ch, klebende Infobox daneben, Zurück-Zeile über dem Kopf. Die
   Maße sind bewusst dieselben — zwei Detailseiten, ein Bild.

   Eigene Klassen statt der geteilten: das Kursblatt-CSS liegt in seiner
   Seiten-Datei und wird hier nicht geladen. Sollte eine dritte
   Detailseite dazukommen, gehört das Layout nach components.css
   (DESIGN §9) — dann in einem Zug für alle, nicht schrittweise.
   ═══════════════════════════════════════════════════════════════════ */
.jd-back{margin-bottom:var(--s-6);font-size:var(--t-sm);font-weight:var(--fw-strong)}
.jd-back a{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--c-muted);
  transition:color var(--dur-ui)}
.jd-back a:hover{color:var(--c-signal)}
.jd-back__arrow{width:1.1rem;height:1.1rem;transition:transform var(--dur-ui) var(--ease)}
.jd-back a:hover .jd-back__arrow{transform:translateX(-3px)}
.jd-eyebrow__sep{margin-inline:.5em;color:var(--c-muted)}
.jd-title{max-width:20ch}
.jd-demo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);
  margin-top:var(--s-5);font-size:var(--t-sm);color:var(--c-muted);max-width:72ch}

.jd-facts{display:flex;flex-wrap:wrap;gap:var(--s-10);margin-top:var(--s-8);
  padding-top:var(--s-6);border-top:1px solid var(--c-line)}
.jd-facts__k{display:block;font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.jd-facts__v{display:block;margin-top:.2rem;font-size:var(--t-md);font-weight:var(--fw-strong)}

.jd-body{padding-block:var(--s-12) var(--section-y)}
.jd-grid{display:grid;grid-template-columns:minmax(0,68ch) 26rem;gap:var(--s-16);
  align-items:start;justify-content:start}
.jd-text{max-width:68ch}
.jd-lead{font-size:var(--t-md);line-height:1.6}
.jd-block{margin-top:var(--s-10)}
.jd-h2{font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em;
  margin-bottom:var(--s-3)}
.jd-block p{color:var(--c-muted)}
.jd-venue strong{color:var(--c-ink)}
.jd-venue__note{margin-top:var(--s-3);font-size:var(--t-sm)}
.jd-venue__links{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:var(--s-3);
  font-size:var(--t-sm);font-weight:var(--fw-strong)}
.jd-venue__links a{color:var(--c-signal);border-bottom:1px solid transparent;
  transition:border-color var(--dur-ui)}
.jd-venue__links a:hover{border-color:var(--c-signal)}

/* Klebend wie die Buchungskarte: die Textspalte ist deutlich länger als
   die Box, es gibt also wirklich etwas vorbeizuscrollen (DESIGN §13). */
.jd-side{position:sticky;top:6.5rem}
.jd-side__in{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-8)}
.jd-side__facts{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s-3) var(--s-5);font-size:var(--t-sm)}
.jd-side__facts dt{color:var(--c-muted)}
.jd-side__facts dd{font-weight:var(--fw-strong)}
.jd-side__cta{margin-top:var(--s-8)}
.jd-side__hint{margin-top:var(--s-4);font-size:var(--t-xs);color:var(--c-muted)}
.jd-side__contact{margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid var(--c-line)}
.jd-side__k{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-muted)}
.jd-side__name{margin-top:var(--s-2);font-size:var(--t-md);font-weight:var(--fw-title)}
.jd-side__links{display:grid;gap:var(--s-1);margin-top:var(--s-3);font-size:var(--t-sm)}
.jd-side__links a{color:var(--c-signal);font-weight:var(--fw-strong);
  border-bottom:1px solid transparent;transition:border-color var(--dur-ui);justify-self:start}
.jd-side__links a:hover{border-color:var(--c-signal)}

/* ═══ BEWERBUNGS-MODAL — die eigenen Teile ═══════════════════════════
   Hülle, Stepper, Prüfen und Erfolgsbildschirm kommen aus
   components.css. Eigen sind hier: der Steckbrief in der Schiene, die
   Rückmeldung unter einer Screening-Frage und das Dateifeld.
   ═══════════════════════════════════════════════════════════════════ */

/* Die Bewerbung ist kürzer als eine Seminaranmeldung — 46rem statt der
   55rem von .modal--tall. Fest bleibt die Höhe trotzdem: sonst
   springt der Dialog bei jedem Schritt in eine andere Größe.

   Nur ab 761px: darunter nimmt der Dialog den ganzen Bildschirm
   (components.css). Ohne die Grenze schlüge diese Regel die dortige —
   sie ist spezifischer — und am Handy stünde ein 736px hohes Kärtchen
   in einem 844px hohen Fenster. Gemessen am 17.08. genau so. */
@media (min-width:761px){
  .bw.modal--tall .modal__box{height:min(46rem,100%)}
}

/* Der Steckbrief hält im Blick, worauf man sich bewirbt — dieselbe
   Rolle, die beim Buchungs-Assistenten die Summe hat, deshalb auch
   dieselbe Position: unten in der Schiene, ohne eigene Karte (§6). */
.bw__facts{margin-top:auto;padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.bw__factshead{font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-signal);margin-bottom:var(--s-4)}
.bw__factslist{display:grid;gap:var(--s-1);font-size:var(--t-xs)}
.bw__factslist dt{color:var(--c-muted)}
.bw__factslist dd{margin-bottom:var(--s-3);font-size:var(--t-sm);font-weight:var(--fw-strong);
  line-height:1.35}
.bw__contact{margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--c-line);font-size:var(--t-xs);color:var(--c-muted)}
.bw__contact strong{color:var(--c-ink);font-weight:var(--fw-strong)}

/* ── Screening-Frage ──
   Die Rückmeldung ist eine Einordnung, keine Warnung: gedämpfter Text
   mit einem roten Strich links, keine Fläche und kein Fehlerrot. */
.bw__q{margin-bottom:var(--s-8)}
.bw__hint{display:block;margin-top:var(--s-3);padding-left:var(--s-4);
  border-left:2px solid var(--c-signal);font-size:var(--t-xs);color:var(--c-muted);
  line-height:1.5;max-width:60ch}
.bw__hint[hidden]{display:none}

/* ── Unterlagen ──
   Das native Feld bleibt das Feld (Tastatur, Systemdialog, Screenreader);
   gestaltet wird nur sein Knopf. Auf ihn wirkt die Button-Doktrin wie
   auf alles andere: rot umrandet, füllt beim Überfahren (DESIGN §9). */
.bw__files{margin-bottom:var(--s-5)}
.bw__fileinput{display:block;width:100%;font:inherit;font-size:var(--t-sm);
  color:var(--c-muted);background:var(--c-white);border:1px solid var(--c-field);
  border-radius:var(--r-sm);padding:.55rem .6rem;min-height:2.75rem;
  transition:border-color var(--dur-ui)}
.bw__fileinput:hover{border-color:var(--c-muted)}
.bw__fileinput:focus{border-color:var(--c-muted)}
.bw__fileinput::file-selector-button{margin-right:var(--s-4);border-radius:var(--r-pill);
  border:1px solid var(--c-signal);background:none;color:var(--c-signal);
  font:inherit;font-size:var(--t-xs);font-weight:var(--fw-strong);
  padding:.5rem 1.1rem;cursor:pointer;
  transition:background var(--dur-ui),color var(--dur-ui)}
.bw__fileinput::file-selector-button:hover{background:var(--c-signal);color:#fff}

.bw__filelist{display:grid;gap:var(--s-2);margin-top:var(--s-4)}
.bw__filelist:empty{display:none}
.bw__filelist li{display:flex;align-items:baseline;gap:var(--s-3);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--c-line);font-size:var(--t-sm)}
.bw__filename{min-width:0;overflow-wrap:anywhere;font-weight:var(--fw-strong)}
.bw__filesize{color:var(--c-muted);font-size:var(--t-xs);white-space:nowrap}
.bw__fileremove{margin-left:auto;font-size:var(--t-xs);font-weight:var(--fw-strong);
  color:var(--c-muted);border-bottom:1px solid transparent;
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.bw__fileremove:hover{color:var(--c-signal);border-color:var(--c-signal)}
.bw__filenote{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);
  margin-top:var(--s-4);font-size:var(--t-xs);color:var(--c-muted)}

/* Der Zähler in der Fußleiste ersetzt die Summe des anderen
   Assistenten — er sagt, wie weit man ist, und drängt nicht. */
.bw__navnote{margin-right:auto;font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1140px){
  .kben__grid{grid-template-columns:1fr;gap:var(--s-10)}
  .jd-grid{grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s-10)}
  /* Der Steckbrief fällt aus der waagrechten Schiene — er steht im Kopf
     des Dialogs ohnehin als Zeile. */
  .bw__facts{display:none}
}
@media (max-width:900px){
  .joblist--2{grid-template-columns:1fr}
  .jd-grid{grid-template-columns:1fr;gap:var(--s-10)}
  .jd-side{position:static}
  .jd-facts,.kh__facts{gap:var(--s-8)}
  .kkon__box{grid-template-columns:1fr;gap:var(--s-8)}
  .kjobs__ini{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (max-width:620px){
  .kben__item--lead{padding:var(--s-4) var(--s-5)}
  .kh__facts{gap:var(--s-6)}
}