/* ============================================================
   mahnbescheid - Stelle (/karriere/<stelle>/)

   Aus den Bausteinen von /karriere/ und /erfahrungen/: erfahrungen.css lädt
   inc/stellen.php vor dieser Datei (erf-kopf, erf-kopf-raster, erf-eyebrow,
   erf-lede, erf-portal, erf-band, erf-themen, erf-thema). Hier steht nur,
   was eine Anzeige mehr hat: der Rückweg, der Status, die Eckdaten als
   Kacheln mit Text statt Zahl, die Listen in den Karten und die übrigen
   Stellen. Das Formular selbst: bewerbung.css.

   Bis zum 12.10.2026 standen die Eckdaten als Kasten mit Kante oben neben
   dem Anriss und die Kapitel als Textspalte in 68ch darunter.
   ============================================================ */

/* --- Kopf --------------------------------------------------------------- */

.st-zurueck{
  display: flex; width: fit-content; margin: 0 0 18px;
  font-size: 13.5px; font-weight: 500; color: var(--c-primary-700); text-decoration: none;
}
.st-zurueck::before{ content: "\2190\00a0"; }
.st-zurueck:hover{ text-decoration: underline; }

/* Status: Wort und Punkt, nie die Farbe allein. */
.st-status{ display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14.5px; color: var(--c-ink-soft); }
.st-status-punkt{ width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c-muted); }
.st-status.is-aktiv .st-status-punkt{ background: var(--c-ok); }
.st-status.is-aktiv{ color: var(--c-ink); font-weight: 500; }

/* Eckdaten: Kacheln wie die Portale, aber mit einem Satz statt einer Zahl.
   Drei je Zeile; eine Stelle mit fünf Werten bekommt eine zweite Zeile. */
.st-eckdaten{
  margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.st-eckdaten .erf-portal{ padding: 16px 18px; gap: 4px; }
.st-eckdaten dd{ margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--c-ink); }

/* --- Die Anzeige: je Kapitel eine Karte --------------------------------- */

/* Gleich hoch wie auf /erfahrungen/; bis zu drei Karten nebeneinander. */
.st-kapitel{ align-items: stretch; }
.st-karte{ gap: 12px; }
.st-text{ font-size: 15px; line-height: 1.55; color: var(--c-ink-soft); }
.st-text > *:first-child{ margin-top: 0; }
.st-text > *:last-child{ margin-bottom: 0; }
.st-text p{ margin: 0 0 12px; }
.st-text ul{ margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.st-text li{ position: relative; padding-left: 20px; }
/* Der Strich der Eyebrow als Aufzählungszeichen, statt des runden Punkts. */
.st-text li::before{ content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--c-primary); }
.st-text strong{ color: var(--c-ink); font-weight: 600; }

/* --- Formular ------------------------------------------------------------ */
.st-bewerben{ scroll-margin-top: 0; }
.st-bewerben-text{ max-width: 72ch; margin: -8px 0 24px; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }

/* --- Die übrigen Stellen: eine Zeile auf der zweiten Fläche -------------- */
nav.st-weitere{
  padding: 28px 0;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line-soft);
}
.st-weitere .wrap{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.st-weitere h2{ margin: 0; font-size: 15px; font-weight: 400; color: var(--c-muted); }
.st-weitere ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.st-weitere a{ color: var(--c-primary-700); text-decoration: none; font-weight: 600; }
.st-weitere a::after{ content: " \2192"; font-weight: 400; }
.st-weitere a:hover{ text-decoration: underline; }

/* --- Schmal ------------------------------------------------------------- */
/* erfahrungen.css stapelt den Kopf bei 1024 px und die Karten bei 900 px. */
@media (max-width: 1024px){
  .st-eckdaten{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 768px){
  .st-kopf .erf-kopf-aktion .btn{ width: 100%; justify-content: center; }
  .st-eckdaten{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-eckdaten .erf-portal{ padding: 12px 16px; }
  .st-weitere .wrap, .st-weitere ul{ flex-direction: column; }
}