/* =========================================================================
   Seiteneigener Regelsatz /karriere/ (SC-2)

   Zwei Bauteile, die es sonst nirgends auf der Website gibt: der
   Leerzustand der Stellenliste und die Stellenliste selbst. Alles andere -
   Seitenkopf, Punktreihen, Ablauf, Kartenreihe, Abschluss - steht
   vollstaendig im gemeinsamen assets/css/site.css.

   Der Leerzustand ist bewusst kein zurueckgenommener Hinweiskasten. Er ist
   der Hauptinhalt seines Bereichs, solange keine Stelle offen ist, und
   traegt deshalb die Markenflaeche und einen echten Weg - nicht die
   Gestaltung einer Fehlermeldung.
   ========================================================================= */

/* --- Der Leerzustand ----------------------------------------------------- */
.jobs-empty {
  margin-top: 44px;
  padding: 44px 44px 40px;
  background: var(--brandfield);
  border-radius: var(--radius);
  max-width: 860px;
}

.jobs-empty__lede {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
}

.jobs-empty__text {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 62ch;
}

.jobs-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}

.jobs-empty__terms {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* --- Die Stellenliste ---------------------------------------------------
   Sie steht nur, wenn $scriptomat_jobs im Template gefuellt ist. Eine
   Stelle ist ein Listeneintrag auf einer Haarlinie und keine Karte: eine
   Karte je Stelle wuerde bei einer einzigen offenen Stelle so aussehen,
   als fehle etwas daneben. */
.jobs {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Eine Stelle ist eine eigene Flaeche.
   Vorher war sie ein Listeneintrag auf einer Haarlinie - bei zwei
   Ausschreibungen lief der Blick dabei von der einen in die andere,
   weil nichts sie trennte ausser einem Strich. Die Kachel setzt die
   Grenze, und die Karten sind gleich hoch: der Bewerbungsweg steht auf
   beiden auf derselben Linie, auch wenn die eine Stelle mehr Aufgaben
   nennt als die andere. */
.job {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 32px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Die Mintkante oben ist die einzige Farbe an der Kachel. Sie macht
     die Stelle als eigenes Angebot kenntlich, ohne sie zu bewerben. */
  box-shadow: inset 0 3px 0 0 var(--brand);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.job:hover,
.job:focus-within {
  border-color: var(--line-cool);
  box-shadow: inset 0 3px 0 0 var(--brand), 0 2px 18px var(--halo);
}

.job__title {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.job__teaser {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-body);
}

/* Umfang, Ort und Start als Marken, nicht als Tabelle: drei kurze
   Angaben, die man ueberfliegt und nicht liest. */
.job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
}

.job__meta > div {
  min-width: 0;
  padding: 7px 12px;
  background: var(--ground);
  border-radius: var(--radius);
}

.job__meta dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.job__meta dd {
  margin: 2px 0 0;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.job__subtitle {
  margin: 26px 0 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.job__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

/* Dieselbe minte Randmarkierung wie bei den Gewinnzeilen des
   Abschlussbereichs - kein Haken, kein Symbol. */
.job__list li {
  padding-left: 16px;
  border-left: 2px solid var(--brand);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-body);
  overflow-wrap: anywhere;
}

/* --- Aufgaben und Profil zum Aufklappen ---------------------------------- */

/* Das Aufklappen kommt aus <details>. Der Browser bringt Tastatur,
   Vorlesbarkeit und den Zustand mit; hier steht nur, wie es aussieht. */
.job__details {
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.job__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink);
  /* Das voreingestellte Dreieck faellt weg - der Pfeil rechts sagt
     dasselbe und steht dort, wo die Kachel ihn braucht. */
  list-style: none;
}

.job__summary::-webkit-details-marker { display: none; }

.job__summary:hover { color: var(--brand-text); }

.job__summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Ein Winkel aus zwei Kanten, kein Zeichen aus einer Schrift: er dreht
   sich beim Aufklappen und bleibt bei jeder Schriftgroesse gleich. */
.job__summary-icon {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.job__details[open] .job__summary-icon {
  transform: rotate(225deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .job__summary-icon { transition: none; }
}

/* Die erste Ueberschrift im aufgeklappten Teil braucht keinen eigenen
   Abstand mehr - der Block bringt ihn mit. */
.job__unfold { padding-top: 4px; }
.job__unfold .job__subtitle:first-child { margin-top: 18px; }

/* margin-top: auto zieht den Bewerbungsweg an den unteren Rand der
   Kachel - sonst hinge er bei der kuerzeren Stelle in der Mitte. */
.job__apply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
}

.job__apply {
  margin-top: auto;
}

/* --- Schmale Flaechen ---------------------------------------------------- */
@media (max-width: 860px) {
  .jobs { grid-template-columns: minmax(0, 1fr); }

  .jobs-empty {
    margin-top: 32px;
    padding: 32px 26px 30px;
  }
  .jobs-empty__lede { font-size: 24px; }
  .jobs-empty__text { font-size: 18px; }

  .jobs { margin-top: 32px; }
  /* Nur Groessen, keine Layout-Eigenschaften: die Kachel bekommt ihr
     Polster und ihr Raster oben und behaelt es hier. Genau die
     Vermischung - eine Regel setzt display und Spalten neu, laesst aber
     den Rest stehen - war die Ursache von SC-22. */
  .job__title { font-size: 24px; }
  .job__teaser { font-size: 17px; }
}

@media (max-width: 560px) {
  .jobs { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .job { padding: 26px 22px 24px; }
  .job__title { font-size: 23px; }
  .job__meta > div { flex: 1 1 auto; }
  .job__apply .cta { width: 100%; justify-content: center; }

  .jobs-empty { padding: 26px 22px 24px; }
  .jobs-empty__lede { font-size: 22px; }

  /* Ein Weg, der ueber die volle Breite laeuft, ist auf 375 px besser
     zu treffen als einer, der sich neben dem zweiten Weg drueckt. */
  .jobs-empty__actions { gap: 14px; }
  .jobs-empty__actions .cta { width: 100%; justify-content: center; }
}

/* --- Laufende Einstiege --------------------------------------------------
   Werkstudium und Pflichtpraktikum sind keine Ausschreibungen. Sie stehen
   in derselben Reihe, damit man sie findet, aber sie sollen sich nicht als
   offene Stelle ausgeben: ruhiger Grund statt Papier, und die minte
   Oberkante entfaellt - sie ist auf dieser Seite das Zeichen fuer "hier
   ist etwas zu besetzen". */
.job--offen {
  background: var(--ground);
  box-shadow: none;
}

.job--offen:hover,
.job--offen:focus-within {
  box-shadow: 0 2px 18px var(--halo);
}

.job__flag {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}