/* Stellenanzeigen (/kundenbetreuer/, /ausbildung-it-system-management/) in der Gestaltung der Startseite (Bausteine in style.css):
   Stellenbezeichnung und Eckdaten im Seitenkopf, Vorteile als Glas-Kacheln im dunklen Abschnitt, Hinweis im Abschluss-Band.
   Klassen mit Präfix job- (nicht verwechseln mit dem Baustein .stelle für Stellen-Links), nach style.css einbinden. */

/* Titel: Stellenbezeichnung als zweite Zeile (h1 .light), kleiner als der erste Teil, weil sie lang ist */
.job-titel .light { font-size: .72em; line-height: 1.15; }
/* Sehr lange Stellenbezeichnung (Ausbildung): noch etwas kleiner, damit sie auf dem Handy nicht zu viele Zeilen braucht */
.job-titel--lang .light { font-size: .6em; }

/* Eckdaten unter dem Lead: weiße Pillen mit Icon im Verlauf */
.job-eckdaten { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.job-eckdaten li {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .35rem 1rem .35rem .35rem; border: 1px solid var(--line); border-radius: 99px;
  background: var(--white); box-shadow: var(--shadow-s);
  color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.3;
}
.job-eckdaten__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--gradient-diag); color: var(--white); }
.job-eckdaten__icon .icon { width: 14px; height: 14px; }

/* Einleitung einer Haken-Liste („Du wirst:“): dicht über der Liste */
.split__text > .job-listenkopf { color: var(--ink); font-weight: 600; }
.split__text > .job-listenkopf + .checklist { margin-top: .75rem; }
/* Lange Textspalte neben dem Foto (Ausbildung): Foto am Rechner oben bündig und beim Scrollen mitlaufend statt mittig */
@media (min-width: 1024px) {
  .job-split-lang > .foto { align-self: start; position: sticky; top: calc(var(--header-h) + var(--header-gap) + 2rem); }
}

/* Was dich erwartet (.section--secure): Vorteile als Glas-Kacheln wie die Liste „Rechenzentrum im Windrad“ der Startseite;
   ab 1200 px vier nebeneinander, Icon über dem Text */
.job-vorteil {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.job-vorteil h3 { font-size: 1.0625rem; line-height: 1.4; }
.job-vorteil__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--accent); color: var(--white); }
.job-vorteil__icon .icon { width: 20px; height: 20px; }
@media (min-width: 1200px) {
  .job-vorteil { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.5rem; }
}
.job-humor {
  display: flex; align-items: center; gap: .85rem; width: fit-content; max-width: 100%;
  margin: clamp(2rem, 4vw, 3rem) auto 0; padding: .55rem 1.5rem .55rem .55rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; background: rgba(255, 255, 255, .07);
  color: var(--white); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); font-weight: 600; line-height: 1.45;
}
.job-humor__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--accent); }
.job-humor__icon .icon { width: 18px; height: 18px; }
/* Zweizeilig: Kachel statt Pille */
@media (max-width: 767.98px) { .job-humor { border-radius: var(--radius); padding-right: 1.1rem; } }

/* Hinweis im Abschluss-Band */
.job-frage { margin-top: .75rem; color: rgba(255, 255, 255, .85); font-size: .9375rem; }
.job-frage a { color: var(--white); font-weight: 600; white-space: nowrap; }
/* Aufruf zur Bewerbung unter dem Text des Abschluss-Bands */
.job-aufruf { color: var(--white); font-weight: 600; }