/* ============================================================
   Eine Stelle zur Auswahl

   Masse aus Prototyp.dc.html Zeile 1727-1745.

   Sichtbar ist der Kasten aus dem Entwurf, darunter liegt ein
   gewoehnliches Ankreuzfeld. Der Prototyp baut die Punkte aus <div> mit
   Klick-Handler nach — damit gibt es keine Tastaturbedienung und nichts,
   was ein Screenreader als Auswahl erkennt.

   Der Link zur Stellenanzeige steht *neben* dem Label, nicht darin:
   Innerhalb wuerde jeder Klick darauf das Ankreuzfeld umschalten.
   ============================================================ */

.ps-stelle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: transparent;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.ps-stelle:hover { border-color: var(--highlight); }

/* Das Label traegt die Auswahl und nimmt den ganzen freien Platz — so
   trifft man es auch mit dem Daumen. */
.ps-stelle__feld {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  cursor: pointer;
}

/* Das echte Feld liegt unter dem Kaestchen: fuer die Maus unsichtbar, fuer
   Tastatur und Screenreader vorhanden. `opacity: 0` und nicht
   `display: none` — sonst waere es aus der Tabulatorreihe heraus. */
.ps-stelle__wahl {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
}

.ps-stelle__punkt {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

/* Der Haken. Zwei Striche aus einem gedrehten Rahmen — kein Zeichen, das
   je nach Schriftart anders aussieht. */
.ps-stelle__punkt::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--accent-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.ps-stelle__wahl:checked ~ .ps-stelle__punkt {
  border-color: var(--highlight);
  background: var(--highlight);
}

.ps-stelle__wahl:checked ~ .ps-stelle__punkt::after { transform: rotate(45deg) scale(1); }

.ps-stelle:has(.ps-stelle__wahl:checked) {
  border-color: var(--highlight);
  background: color-mix(in srgb, var(--highlight) 8%, transparent);
}

/* Der Fokusring gehoert um die ganze Zeile, nicht um das versteckte Feld. */
.ps-stelle:has(.ps-stelle__wahl:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/*
   Rueckfall fuer Browser ohne :has() (Firefox vor 121). Dort bleibt die
   Zeile ungefaerbt, das Kaestchen fuellt sich trotzdem — die Auswahl ist
   also in jedem Fall zu erkennen.
*/

.ps-stelle__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ps-stelle__titel {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--text-strong);
  text-wrap: pretty;
  /* Umbricht an Wortgrenzen; nur ein Wort, das allein nicht passt, wird
     getrennt. `anywhere` waere hier falsch: Es senkt die Mindestbreite auf
     ein Zeichen, und dann quetscht die Spalte den Titel zu einem
     Buchstabenturm zusammen — aus "Senior-Projektmanager" wurde
     "Senior-Projekt manag er". */
  overflow-wrap: break-word;
}

.ps-stelle__zusatz {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Der Link zur Stellenanzeige ---------- */

/*
   Ein runder Knopf mit Pfeil statt "Details ansehen" in Worten.

   Ausgeschrieben kostet die Beschriftung 180 Pixel; in einer Spalte von
   305 Pixeln bleibt dem Titel dann nichts mehr, und er bricht zu einem
   Buchstabenturm. Der volle Satz steht weiterhin da — als Beschriftung
   fuer Screenreader und als Kurzhinweis beim Zeigen.
*/

.ps-stelle__anzeige {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.ps-stelle__anzeige:hover,
.ps-stelle__anzeige:focus-visible {
  background: color-mix(in srgb, var(--highlight) 12%, transparent);
}

.ps-stelle__anzeige:hover,
.ps-stelle__anzeige:focus-visible {
  color: var(--highlight);
  border-color: var(--highlight);
}

/* ---------- Schmale Breiten ----------

   Der Link rutscht unter die Bezeichnung, statt sie auf zwei Zeichen
   zusammenzudruecken.
*/

/*
   Auf dem Telefon ist jede Zeile eine Zielflaeche fuer den Daumen: Das
   Label fuellt die Zeile, und 52 Pixel Hoehe sind mehr als die 44, die als
   Untergrenze gelten. Nichts Nachgebautes — ein Ankreuzfeld in einem
   Label ist bereits das, was das Betriebssystem am besten kann.
*/

@media (max-width: 560px) {
  .ps-stelle { padding: 3px 8px 3px 3px; }

  .ps-stelle__feld {
    min-height: 52px;
    padding: 8px 10px;
  }

  .ps-stelle__punkt {
    width: 22px;
    height: 22px;
  }

  .ps-stelle__punkt::after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
  }

  .ps-stelle__anzeige {
    width: 38px;
    height: 38px;
  }
}