/* ============================================================
   mahnbescheid - Karriere (/karriere/)

   Seit dem 25.09.2026 aus den Bausteinen von /erfahrungen/: Kopf mit
   Kacheln, Karten auf der zweiten Fläche, Punkte mit Zeichen, Kacheln für
   die Schritte. Die Gestaltung dafür steht in erfahrungen.css, das
   inc/karriere.php vor dieser Datei lädt. Hier steht nur, was es dort
   nicht gibt: der zweite Kopfabsatz, die Karte einer Stelle mit ihrem
   Fuß, die Initiativbewerbung, vier statt drei Kacheln im Ablauf.

   Bis dahin hatte die Seite eigene Bausteine und eine eigene Skala von
   sechs Schriftgrößen. Sie sind weg: Die Größen sind die von
   /erfahrungen/, und wer hier eine neue braucht, sieht zuerst dort nach.
   ============================================================ */

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

/* Der zweite Absatz ist ein Feld mit HTML (kar_intro_text), also ein div
   mit p darin - gesetzt wie .erf-lede. */
.kar-intro p{ font-size: 17px; line-height: 1.6; color: var(--c-ink-soft); margin: 0 0 12px; }
.kar-intro p:last-child{ margin-bottom: 0; }
.kar-intro a{ color: var(--c-primary-700); }

/* Einleitung unter einer Abschnittsüberschrift, wo ein Feld sie füllt. */
.kar-lead{ max-width: 72ch; margin: -8px 0 20px; font-size: 16px; line-height: 1.6; color: var(--c-ink-soft); }

/* --- Offene Stellen ----------------------------------------------------- */

/* Untereinander, eine Stelle je Zeile (seit 29.09.2026). Bis dahin drei
   Spalten wie „Was Gläubiger hervorheben": Der Anriss brach nach vier
   Wörtern um, und Umfang und Ort standen auf drei Zeilen. Links Titel,
   Eckdaten und Anriss, rechts die Schaltfläche; die
   Initiativbewerbung als letzte Zeile, im selben Raster. */
.kar-stellen{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
.kar-stelle, .kar-initiativ{
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px; align-items: start;
  scroll-margin-top: 24px;
}
.kar-stelle > :not(.kar-stelle-fuss),
.kar-initiativ > :not(.kar-stelle-fuss){ grid-column: 1; max-width: 72ch; }
.kar-anriss{ font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); margin: 0; }

/* Rechts: die Schaltfläche auf Höhe des Titels. Die Spalte ist so breit
   wie ihr Inhalt. Einen Status („Wir besetzen gerade") gab es hier bis zum
   29.09.2026; er steht nur noch auf der Stelle selbst. */
.kar-stelle-fuss{
  grid-column: 2; grid-row: 1 / span 3;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px; padding-top: 2px;
}
.kar-stelle-fuss .btn{ white-space: nowrap; }
/* Die Initiativbewerbung hat keine Eckdaten, also zwei Zeilen statt drei. */
.kar-initiativ .kar-stelle-fuss{ grid-row: 1 / span 2; }

.kar-text{ max-width: 72ch; margin-top: 32px; }

/* --- So läuft die Bewerbung --------------------------------------------- */

/* Vier Schritte, vier Spalten - .erf-nachweise hat drei. */
.kar-schritte{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kar-gleichbehandlung{ max-width: 72ch; margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); }

/* --- Schmal ------------------------------------------------------------- */

/* Die Brüche von erfahrungen.css: Bei 900px werden die Karten einspaltig,
   dann rückt auch der Fuß einer Stelle unter ihren Anriss. */
@media (max-width: 1024px){
  .kar-schritte{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  /* Schmal wieder gestapelt: die Schaltfläche unter dem Anriss. */
  .kar-stelle, .kar-initiativ{ grid-template-columns: minmax(0, 1fr); }
  .kar-stelle-fuss{
    grid-column: 1; grid-row: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px 16px; padding-top: 14px;
  }
  .kar-initiativ .kar-stelle-fuss{ grid-row: auto; justify-content: flex-start; }
}
@media (max-width: 768px){
  .kar-intro p{ font-size: 16px; }
  .kar-schritte{ grid-template-columns: minmax(0, 1fr); }
  .kar-stelle-fuss .btn{ width: 100%; justify-content: center; }
}

/* --- Seit 29.09.2026: Stellen mit eigener Seite, Initiativformular ------ */

/* Der Titel der Karte ist der Link zur Anzeige; die Schaltfläche daneben
   ist für die Maus und aus der Tab-Reihenfolge genommen, damit jede Stelle
   einen Tabstopp hat und nicht zwei. */
.kar-stelle .erf-thema-titel a{ color: inherit; text-decoration: none; }
.kar-stelle .erf-thema-titel a:hover{ color: var(--c-primary-700); text-decoration: underline; }
.kar-stelle .erf-thema-titel a:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: 2px; }

.kar-formular{ scroll-margin-top: 24px; }
.kar-initiativ-band{ scroll-margin-top: 0; }