/* ═══════════════════════════════════════════════════════════════════════════
   STELLEN — Karriereseite und die Unterseite je Stelle
   Wird von karriere.html und von stellen/*.html geladen. Alles hier baut auf
   den Marken-Tokens auf (tokens.css); eigene Farbwerte stehen nur dort, wo es
   um Formularfelder geht — die kommen 1:1 aus dem Kontaktformular.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Karriereseite: eine Stelle in der Liste ist jetzt ein Link ─────────── */
.stellen-liste{list-style:none; margin:0; padding:0; border-top:1px solid var(--linie)}
.stellen-liste .stelle{border-bottom:1px solid var(--linie)}
.stelle-link{display:grid; grid-template-columns:1fr auto 9.5rem; gap:1.25rem;
  align-items:baseline; padding:1.15rem 1.4rem 1.15rem 1.9rem; position:relative;
  text-decoration:none; color:inherit; transition:background .25s ease}
.stelle-link::before{content:""; position:absolute; left:.55rem; top:1.45rem;
  width:.5rem; height:.5rem; border-right:2px solid var(--signal); border-bottom:2px solid var(--signal);
  transform:rotate(-45deg); transition:transform .25s ease, left .25s ease}
.stelle-link:hover{background:var(--signal-weich)}
.stelle-link:hover::before{left:.85rem}
.stelle-link:focus-visible{outline:2px solid var(--signal); outline-offset:-2px}
.stelle-zeile2{grid-column:1/-1; margin:.3rem 0 0; font-size:.9rem; color:var(--ink-2);
  line-height:1.5; max-width:54rem}
@media(max-width:760px){
  .stelle-link{grid-template-columns:1fr; gap:.3rem}
  .stelle-link .stelle-kat{justify-self:start}
}

/* ── Kompaktblock „Aktuelle Stellen" auf den Bereichsseiten ────────────── */
/* ── „Aktuell offen bei uns" auf den Bereichsseiten ──────────────────────
   Marcus, 13.08.2026: „offene stellen in den unterbereichen chemie und co
   fallen nicht auf." Der Kasten sah aus wie jeder andere Abschnitt. Jetzt
   trägt er die Farbe seines Bereichs, eine Kante oben und Karten, die man
   als anklickbar erkennt — ohne laut zu werden. */
#stellen-bereich{position:relative; background:var(--surface)}
#stellen-bereich::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--bfarbe,var(--signal))}
#stellen-bereich .eyebrow{color:var(--bfarbe,var(--signal-text))}
body[data-bereich="chemie"]    #stellen-bereich{--bfarbe:var(--chemie);
  background:linear-gradient(180deg,rgba(0,148,92,.07),transparent 62%),var(--surface)}
body[data-bereich="nuklear"]   #stellen-bereich{--bfarbe:var(--nuklear-text);
  background:linear-gradient(180deg,rgba(232,166,0,.10),transparent 62%),var(--surface)}
body[data-bereich="industrie"] #stellen-bereich{--bfarbe:var(--industrie);
  background:linear-gradient(180deg,rgba(180,118,42,.09),transparent 62%),var(--surface)}

.stellen-kompakt{list-style:none; margin:1.6rem 0; padding:0; display:grid; gap:.7rem}
@media(min-width:820px){ .stellen-kompakt{grid-template-columns:1fr 1fr} }
/* Drei Karten (Stellenseite „Weitere Stellen") in zwei Spalten ließen eine
   Waise stehen: ab 900 px drei Spalten, darunter eine — nie 2+1. */
@media(min-width:820px){ .stellen-kompakt:has(> li:nth-child(3):last-child){grid-template-columns:1fr} }
@media(min-width:900px){ .stellen-kompakt:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} }
.stellen-kompakt li{border:1px solid var(--linie); border-radius:10px; background:var(--bg);
  border-left:3px solid var(--bfarbe,var(--signal));
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease}
.stellen-kompakt li:hover{transform:translateY(-2px);
  box-shadow:0 14px 30px -22px rgba(14,33,25,.65)}
.stellen-kompakt a{display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center;
  padding:1rem 1.15rem; text-decoration:none; color:inherit}
.stellen-kompakt .sk-titel{font-family:var(--font-head); font-weight:600; font-size:1.02rem;
  flex:1 1 100%; line-height:1.3}
.stellen-kompakt .sk-ort{font-size:.88rem; color:var(--ink-2); flex:1 1 auto}
.stellen-kompakt .sk-pfeil{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; color:var(--bfarbe,var(--signal-text)); display:inline-flex;
  align-items:center; gap:.35rem}
.stellen-kompakt .sk-pfeil::after{content:"→"; transition:transform .25s ease}
.stellen-kompakt li:hover .sk-pfeil::after{transform:translateX(3px)}
#stellen-bereich .btn{background:var(--bfarbe,var(--signal)); border-color:var(--bfarbe,var(--signal))}
#stellen-bereich .btn--geist{background:transparent; color:var(--ink);
  border-color:var(--linie-stark,var(--linie))}

/* ── Unterseite einer Stelle ───────────────────────────────────────────── */
.hero-aktionen{margin:1.7rem 0 0; display:flex; flex-wrap:wrap; gap:.7rem}
.stelle-marken{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.4rem; padding:0; list-style:none}
.stelle-marken li{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--signal-text); border:1px solid var(--linie); border-radius:999px; padding:.3rem .8rem}
.stelle-block{display:grid; gap:2.2rem 3rem}
@media(min-width:900px){.stelle-block--zwei{grid-template-columns:1fr 1fr}}
.stelle-block h2{font-size:var(--text-h3); margin:0 0 .9rem}
.stelle-block ul{margin:0; padding-left:1.15rem; display:grid; gap:.6rem; list-style:disc}
.stelle-block li::marker{color:var(--signal-text)}
.stelle-block li{line-height:1.6}
.stelle-bieten{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
@media(min-width:760px){.stelle-bieten{grid-template-columns:1fr 1fr}}
.stelle-bieten li{display:flex; gap:.85rem; align-items:flex-start; line-height:1.55}
.stelle-bieten .haken{flex:none; width:1.35rem; height:1.35rem; margin-top:.15rem}
.stelle-bieten .haken circle{fill:var(--signal-weich)}
.stelle-bieten .haken path{fill:none; stroke:var(--signal); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.stelle-wege{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem}

/* ── Bewerbungsformular (Struktur/JS 1:1 aus dem Kontaktformular) ───────── */
.k-formular{--k-accent:var(--signal); --k-accent-ink:#ffffff; --k-bg:transparent; --k-card:var(--surface);
  --k-text:var(--ink); --k-muted:var(--ink-2); --k-border:var(--linie); --k-radius:6px}
.k-formular .k-card{background:var(--k-card); border:1px solid var(--k-border);
  border-radius:var(--k-radius); padding:1.75rem}
.k-formular h2{font-size:var(--text-h3); margin:0 0 .35rem}
.k-formular .k-sub{color:var(--k-muted); margin:0 0 1.25rem}
.k-formular label{display:block; font-size:.9rem; font-weight:600; margin:.85rem 0 .3rem}
.k-formular input,.k-formular textarea,.k-formular select{width:100%; padding:.75rem .85rem;
  border:1px solid var(--k-border); border-radius:var(--k-radius); background:var(--surface);
  color:var(--k-text); font:inherit}
.k-formular input:focus,.k-formular textarea:focus,.k-formular select:focus{
  outline:2px solid var(--k-accent); border-color:var(--k-accent)}
.k-formular .k-row{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
@media(max-width:560px){.k-formular .k-row{grid-template-columns:1fr}}
.k-formular .k-btn{appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700;
  min-height:48px; padding:.8rem 1.4rem; border-radius:var(--k-radius); background:var(--k-accent);
  color:var(--k-accent-ink); margin-top:1.1rem}
.k-formular .k-btn[disabled]{opacity:.55; cursor:not-allowed}
.k-formular .k-consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem;
  color:var(--k-muted); margin:1rem 0}
.k-formular .k-consent input{width:auto; margin-top:.25rem; flex:none}
.k-formular .k-consent label{margin:0; font-weight:400}
.k-formular .k-note{font-size:.92rem; padding:.75rem .95rem; border-radius:var(--k-radius);
  margin-top:.9rem; display:none}
.k-formular .k-note.ok{display:block; background:rgba(224,86,29,.1); color:var(--signal)}
.k-formular .k-note.err{display:block; background:#fdeaea; color:#a5251f}
.k-formular .hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
.bewerb-grid{display:grid; gap:2rem}
@media(min-width:980px){.bewerb-grid{grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start}}
.bewerb-neben dt{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  margin-top:1.1rem}
.bewerb-neben dd{margin:.2rem 0 0; font-weight:600}
html.dark .k-formular .k-note.err{background:#3a1b1a; color:#ffb4ae}

/* ── Bewerbung in drei Schritten (assets/bewerbung.js) ─────────────────────
   Ohne JavaScript stehen alle Schritte offen untereinander, die Überschriften
   der Schritte sind dann nur für Vorleseprogramme da. Erst .bf-stufen (setzt
   bewerbung.js) blendet Fortschritt, Schrittknöpfe und Überschriften ein. */
.k-formular [hidden]{display:none!important}
.k-formular .bf-schritt{border:0; margin:0; padding:0; min-width:0}
.k-formular .bf-legende{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.k-formular .bf-stufen .bf-legende{position:static; width:auto; height:auto; margin:0 0 .15rem;
  overflow:visible; clip:auto; white-space:normal; padding:0;
  font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--k-text)}
.k-formular .bf-legende:focus{outline:none}
.k-formular .bf-legende:focus-visible{outline:2px solid var(--k-accent); outline-offset:3px; border-radius:2px}

/* Fortschritt: drei ruhige Balken mit Namen darunter */
.k-formular .bf-fortschritt{margin:0 0 1.1rem}
.k-formular .bf-fortschritt-text{font-size:.82rem; color:var(--k-muted); margin:0 0 .45rem;
  letter-spacing:.02em}
.k-formular .bf-segmente{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem}
.k-formular .bf-segment{appearance:none; width:100%; min-height:44px; margin:0; padding:.5rem 0 0;
  display:flex; align-items:flex-start; gap:.35rem; text-align:left; font:inherit; font-size:.84rem;
  line-height:1.25; color:var(--k-muted); background:none; border:0; border-top:4px solid var(--k-border);
  border-radius:0; cursor:pointer; overflow-wrap:anywhere}
.k-formular .bf-segment-zahl{font-variant-numeric:tabular-nums; font-weight:700}
.k-formular .bf-segment[disabled]{cursor:default; opacity:1}
.k-formular .bf-segment.ist-erledigt{border-top-color:var(--k-accent); color:var(--k-text)}
.k-formular .bf-segment.ist-erledigt:hover{text-decoration:underline; text-underline-offset:3px}
.k-formular .bf-segment.ist-aktuell{border-top-color:var(--k-accent); color:var(--k-text); font-weight:700;
  cursor:default}
.k-formular .bf-segment:focus-visible{outline:2px solid var(--k-accent); outline-offset:2px}

/* Knöpfe am Ende eines Schritts */
.k-formular .bf-knoepfe{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.1rem}
.k-formular .bf-knoepfe .k-btn{margin-top:0}
.k-formular .bf-stufen .bf-knoepfe .k-btn{margin-left:auto; min-width:9rem}
.k-formular .bf-zurueck,.k-formular .bf-knopf-geist{appearance:none; display:inline-flex; align-items:center;
  justify-content:center; min-height:48px; padding:.7rem 1.2rem; font:inherit; font-weight:600;
  color:var(--k-text); background:transparent; border:1px solid var(--linie-stark,var(--k-border));
  border-radius:var(--k-radius); cursor:pointer; text-decoration:none}
.k-formular .bf-zurueck:hover,.k-formular .bf-knopf-geist:hover{background:var(--signal-weich)}
.k-formular .k-btn:focus-visible,.k-formular .bf-zurueck:focus-visible,.k-formular .bf-knopf-geist:focus-visible,
.k-formular .bf-link:focus-visible,.k-formular .bf-textknopf:focus-visible{outline:2px solid var(--k-accent); outline-offset:2px}
.k-formular a.k-btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
@media(max-width:560px){
  .k-formular .bf-stufen .bf-knoepfe .k-btn{flex:1 1 auto}
}

/* Fehlende Pflichtfelder */
.k-formular input[aria-invalid="true"],.k-formular textarea[aria-invalid="true"]{border-color:#b3261e;
  box-shadow:0 0 0 1px #b3261e}
.k-formular .k-consent input[aria-invalid="true"]{outline:2px solid #b3261e; outline-offset:2px}
html.dark .k-formular input[aria-invalid="true"],html.dark .k-formular textarea[aria-invalid="true"]{
  border-color:#ff8a80; box-shadow:0 0 0 1px #ff8a80}
html.dark .k-formular .k-consent input[aria-invalid="true"]{outline-color:#ff8a80}

/* Kästen: schon beworben · willkommen zurück · fertig */
.k-formular .bf-kasten{border:1px solid var(--k-border); border-left:3px solid var(--signal);
  border-radius:var(--k-radius); background:var(--signal-weich); padding:1rem 1.1rem; margin:0 0 1.25rem}
.k-formular .bf-kasten p{margin:0}
.k-formular .bf-kasten-titel{font-family:var(--font-head); font-weight:600; font-size:1.1rem;
  line-height:1.3; color:var(--k-text)}
.k-formular .bf-kasten-text{margin-top:.3rem!important; color:var(--k-text); line-height:1.5}
.k-formular .bf-kasten--klein{padding:.6rem .9rem}
.k-formular .bf-kasten--klein .bf-kasten-text{margin-top:0!important; font-size:.92rem}
.k-formular .bf-kasten-aktionen{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  margin-top:.9rem!important}
.k-formular .bf-kasten-aktionen .k-btn{margin-top:0}
.k-formular .bf-link{display:inline-flex; align-items:center; min-height:44px; font-weight:600;
  color:var(--signal-text); text-decoration:underline; text-underline-offset:3px}
.k-formular .bf-kasten-fuss{margin-top:.5rem!important}
.k-formular .bf-textknopf{appearance:none; background:none; border:0; padding:0; min-height:44px;
  font:inherit; font-size:.9rem; color:var(--k-muted); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer}
.k-formular .bf-textknopf:hover{color:var(--k-text)}

/* Unterlagen, die schon im Bewerberkonto liegen */
.k-formular .bf-vorhanden{margin:.85rem 0 .2rem}
.k-formular .bf-vorhanden-titel{font-size:.9rem; font-weight:600; margin:0 0 .35rem}
.k-formular .bf-vorhanden-liste{list-style:none; margin:0; padding:0; display:grid; gap:.35rem}
.k-formular .bf-vorhanden label{display:flex; align-items:center; gap:.65rem; min-height:44px; margin:0;
  padding:.35rem .75rem; font-weight:400; font-size:.9rem; cursor:pointer;
  background:var(--surface-2,var(--surface)); border-radius:8px}
.k-formular .bf-vorhanden input{width:1.15rem; height:1.15rem; padding:0; margin:0; flex:none;
  accent-color:var(--k-accent)}
.k-formular .bf-vorhanden-name{overflow-wrap:anywhere}

/* Fertig-Ansicht */
.k-formular .bf-fertig{padding:1.35rem 1.25rem; margin:.5rem 0 0}
.k-formular .bf-fertig:focus{outline:none}
.k-formular .bf-fertig:focus-visible{outline:2px solid var(--k-accent); outline-offset:3px}
.k-formular .bf-fertig-titel{display:flex; align-items:center; gap:.6rem; margin:0;
  font-family:var(--font-head); font-size:var(--text-h3); line-height:1.25; color:var(--k-text)}
.k-formular .bf-fertig-haken{flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%; background:var(--signal); color:#fff; font-size:1rem}
.k-formular .bf-fertig-nummer{margin-top:.45rem!important; font-size:.95rem; color:var(--k-muted);
  font-variant-numeric:tabular-nums}
.k-formular .bf-fertig-zwischen{margin-top:1.1rem!important; font-weight:600}
.k-formular .bf-fertig-schritte{margin:.5rem 0 0; padding-left:1.35rem; display:grid; gap:.4rem;
  list-style:decimal; line-height:1.5}
.k-formular .bf-fertig-schritte li::marker{color:var(--signal-text); font-weight:700}
.k-formular .bf-fertig .k-hinweis{margin-top:.7rem!important}

/* Wunschjob und Arbeitsort: Auswahl aus den Stellen (Combobox, assets/bewerbung.js)
   Die Liste hängt direkt unter dem Feld, zeigt höchstens sechs Einträge und
   scrollt dann. Jeder Eintrag ist mindestens 44 px hoch (Daumen). */
.k-formular .bf-wahl{position:relative; min-width:0}
.k-formular .bf-wahl input[role="combobox"]{padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%237d8c83' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:1rem}
.k-formular .bf-wahl input[aria-expanded="true"]{border-color:var(--k-accent)}
.k-formular .bf-wahl input[aria-disabled="true"]{cursor:not-allowed; color:var(--k-muted);
  background-color:var(--surface-2,var(--surface)); border-style:dashed}
.k-formular .bf-wahl-liste{position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:.3rem 0; list-style:none; max-height:calc(6 * 44px + .6rem); overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:var(--bg,var(--surface));
  color:var(--k-text); border:1px solid var(--linie-stark,var(--k-border)); border-radius:var(--k-radius);
  box-shadow:0 18px 40px -18px rgba(14,33,25,.55)}
.k-formular .bf-wahl-eintrag{display:flex; align-items:center; gap:.6rem; min-height:44px; margin:0;
  padding:.55rem .85rem; line-height:1.3; font-size:.95rem; cursor:pointer; overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent}
.k-formular .bf-wahl-eintrag:hover{background:var(--signal-weich)}
.k-formular .bf-wahl-eintrag[aria-selected="true"]{background:var(--signal-weich);
  box-shadow:inset 3px 0 0 var(--k-accent)}
.k-formular .bf-wahl-eintrag.ist-gewaehlt{font-weight:700}
.k-formular .bf-wahl-eintrag.ist-gewaehlt::after{content:"✓"; margin-left:auto; color:var(--signal-text)}
.k-formular .bf-wahl-hinweis{margin:.35rem 0 0; font-size:.85rem; line-height:1.4; color:var(--k-muted)}
.k-formular .bf-wahl-hinweis:empty{display:none}
html.dark .k-formular .bf-wahl-liste{box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
/* Bewerbung in der Markenfarbe (vorher Orange aus dem verworfenen ersten Entwurf).
   Im Dunkelmodus ist das Grün hell — Schrift darauf dunkel wie bei .btn. */
html.dark .k-formular{--k-accent-ink:#0B1F17}

/* ── Bewerbung: eine Spalte, „Lieber direkt" klein darunter (07.10.2026) ──
   Marcus: „Zur Kontaktseite" stand als Knopf neben „Weiter" — zwei
   Aufforderungen auf einer Höhe. Jetzt: Formular zuerst, darunter ein ruhiger
   Kasten mit den direkten Wegen, die Kontaktseite nur als Textlink. */
.bewerb-grid{grid-template-columns:minmax(0,1fr) !important; gap:1.6rem !important; max-width:46rem}
.bewerb-neben{padding:1rem 1.2rem; border:1px solid var(--linie); border-radius:var(--radius); background:var(--bg)}
.bewerb-neben h2{display:none}
.bewerb-neben .fliess{margin:.3rem 0 .7rem; font-size:.92rem; color:var(--ink-2); max-width:none}
.bewerb-neben dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.25rem 1.2rem; margin:0; align-items:baseline}
.bewerb-neben dt{margin:0}
.bewerb-neben dd{margin:0 !important; font-size:.95rem}
.bewerb-neben .stelle-wege{margin:.8rem 0 0}
.bewerb-neben .stelle-wege a{display:inline; min-height:0; padding:0; border:0; background:none; transform:none;
  font-size:.88rem; font-weight:600; color:var(--signal-text); text-decoration:underline; text-underline-offset:.22em}
.bewerb-neben .stelle-wege a:hover{color:var(--signal-2); background:none}
html.dark .bewerb-neben{background:var(--surface)}