/* ===========================================================================
   karriere.css — Benker WP-Theme
   HANDGESCHRIEBEN. Wird NACH components.css geladen.

   Der Ausbildungs-Abschnitt hatte zunaechst eigenes Layout (.cazubi). Das war
   doppelte Arbeit und sah anders aus als der Rest — vor allem fehlte die
   Benker-Notch an der Bildecke. Er nutzt jetzt den vorhandenen Karten-Baustein
   (template-parts/kompetenz/info), deshalb sind die .cazubi-Regeln entfallen.

   Was bleibt: die Liste der Ausbildungsberufe INNERHALB der Karte. Sie ist eine
   Ergaenzung des geteilten Bausteins (optionaler Slot 'liste' in
   template-parts/kompetenz/info-card.php) und wird hier gestaltet, damit
   components.css unberuehrt bleibt.

   HINTERGRUND-VERLAUF fuer .testi und .jobs (23.07.2026):
   components.css setzt fuer beide Sektionen background-color:var(--color-bg)
   (reines Weiss). Auf der Startseite nutzt .pcar denselben Verlauf, der die
   Sektion optisch von der Flaeche abhebt. Das gleiche Muster wird hier auf die
   Testimonial- und Stellenangebote-Sektion uebertragen, damit die Karriereseite
   dasselbe visuelle Rhythmusgefuehl bekommt. background-image ueberschreibt die
   background-color-Angabe aus components.css; die Fallback-Farbe bleibt
   unveraendert.
   =========================================================================== */

/* Verlauf identisch zu .pcar auf der Startseite: oben #f2f4fb, unten Weiss. */
.testi {
  background-image: linear-gradient(to top, var(--color-neutral-100), #f2f4fb);
}

.jobs {
  background-image: linear-gradient(to top, var(--color-neutral-100), #f2f4fb);
}

.kcard__liste {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.kcard__liste-item {
  padding-block: var(--space-4);
  border-top: 1px solid rgba(8, 8, 8, 0.1);
}

.kcard__liste-item:last-child {
  border-bottom: 1px solid rgba(8, 8, 8, 0.1);
}

.kcard__liste-titel {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-3xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading-3xs);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-1);
}

.kcard__liste-text {
  font-size: var(--fs-body-s);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  /* Beschreibung tritt hinter den Berufsnamen zurueck — bewusste Abweichung. */
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   INITIATIVBEWERBUNG UNTER DER STELLENLISTE (10.09.2026, Wunsch Benker)

   Der Satz "Keine passende Stelle dabei?" stand vorher oben im Kopf, neben der
   Ueberschrift — also bevor der Besucher die Stellen gesehen hatte. Jetzt steht
   er darunter, wo die Frage erst entsteht, und hat einen Button dabei.

   Ab 700px nebeneinander: Der Satz ist kurz, der Button klein. Untereinander
   entsteht auf breiten Schirmen eine unnoetig hohe, halbleere Zeile.
   Der Abstand nach oben kommt aus dem gap von .jobs__inner, nicht von hier.
   --------------------------------------------------------------------------- */
.jobs__initiativ {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .jobs__initiativ {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  /* Der Button darf nicht schrumpfen, der Text nimmt den Rest. */
  .jobs__initiativ .button {
    flex-shrink: 0;
  }
}