/* ==========================================================================
   Baustein: Stellen-Akkordeon
   Datei: css/bausteine/stellen-akkordeon.css (kein Skript)
   Gebraucht auf: karriere.html (#stellen)
   Bauvorschrift: DESIGN.md, Baustein "Stellen-Akkordeon". Baut auf dem FAQ-Akkordeon auf
   (css/bausteine/faq-akkordeon.css, native details, ohne JavaScript): Das Markup trägt
   .faq-item und .faq-summary, diese Datei ergänzt nur die eigenen Teile, Kopf mit Tags und
   den breiten Inhalt mit drei Spalten.
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .opening-* */

/* Lead unter der Überschrift der Sektion */
.opening-intro { margin-top: 28px; max-width: 760px; }

/* Kopf der Stelle: Titel und darunter die Tags als kleine Pillen */
.opening-head { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.opening-title { color: var(--ink); }
.opening-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.opening-tag {
  display: inline-flex; align-items: center;
  min-height: 26px; padding: 5px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--body);
}

/* Inhalt: drei Spalten Aufgaben, Profil, Benefits, darunter der Bewerbungsweg.
   Breiter als die FAQ-Antwort (720 px), weil drei Listen nebeneinander stehen. */
.opening-body { padding: 24px 0 32px; }
.opening-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 48px; }
.opening-col-title { color: var(--ink); }
.opening-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.opening-list li { position: relative; padding-left: 18px; }
.opening-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

.opening-apply {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
}
.opening-apply p { max-width: 620px; }

@media (max-width: 980px) {
  .opening-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .opening-cols { grid-template-columns: 1fr; gap: 28px; }
  .opening-apply .button { width: 100%; justify-content: space-between; }
}