@charset "UTF-8";

@import url("./public-assistant.css?v=f0a1b127de5831df");

/* =====================================================================
   GREEN CAREERS · JOBBÖRSE
   ---------------------------------------------------------------------
   Die öffentliche Jobsuche ist ein Arbeitswerkzeug: Suche und Treffer
   führen, Dekoration tritt zurück. Alle Regeln sind auf .public-jobs
   begrenzt und liegen über app.css sowie public-base.css.
   ===================================================================== */

.public-jobs {
  --jobs-canvas: var(--gc-canvas);
  --jobs-panel: var(--gc-surface);
  --jobs-line: var(--gc-line);
  /* Trägt die Kante des Sortierfelds, also eines Bedienelements, und
     braucht 3:1. Der dekorative Ton hielt nur 1,66:1 gegen Weiß. */
  --jobs-line-strong: var(--gc-line-ui);
  --jobs-text: var(--gc-ink);
  --jobs-text-secondary: var(--gc-ink-soft);
  --jobs-text-tertiary: var(--gc-ink-muted);
  --jobkopf-h: 171px;
  --favoriten-kartenbreite: clamp(480px, 36vw, 520px);
  --favoriten-kartenhöhe: 300px;
  --orange: var(--gc-action);
  --orange-tief: var(--gc-action-hover);
  --orange-text: var(--gc-link);
  background: var(--jobs-canvas);
}

.public-jobs .jobseite {
  background: var(--jobs-canvas);
}

/* DER FOKUSRING WECHSELT MIT DER FLÄCHE.
   ---------------------------------------------------------------------
   Nachtrag 1, Abschnitt 5 des Reviews. Der Ring aus public-brand.css:404
   steht auf dem Waldgrün --gc-green-deep. Auf der dunklen Ergebnissteuerung
   und im Favoritenband (#173b2b) hält er 1,72:1, nötig sind 3:1
   (WCAG 1.4.11). Gemessen am Sortierfeld .auswahlfeld__quelle.
   --fokus-dunkel liegt seit D1 bereit und wurde nur nirgends gesetzt.
   Gesetzt wird er an der Fläche, damit jedes Bedienelement darin ihn erbt;
   helle Inseln auf dunklem Grund (.hell-insel, etwa die Stellenkarten im
   Favoritenband) holen den hellen Ring zurück.

   NICHT an .jobkopf: die Suchleiste ist seit Design 05 hell
   (public-jobs.css:95, --gc-canvas). Der erste Anlauf hat sie irrtümlich
   mitgenommen, und der Prüfer hat das sofort gemeldet: Akzent auf Canvas
   sind 1,21:1.

   Nachtrag 2, Punkt 2: .abschluss-arbeitgeber gehört ausdrücklich dazu.
   Das Band darum trägt „band band--eng band--ton" und fällt damit durch
   alle drei Bedingungen, die Fläche selbst ist aber dunkel
   (linear-gradient auf rgb(23 59 43) über abschluss-cta.jpg, color
   --gc-on-dark). Gemessen am Knopf „Stelle schalten", echter
   Tastaturfokus und Bildpaar: Ring rgb(18 100 64) gegen rgb(85 117 94)
   = 1,40:1 bei 1280 px. Es ist dieselbe Paarung, die das Review mit
   1,72:1 gemeldet hat, nur an der einen dunklen Fläche, die die Regel
   nicht nannte.

   W2 (19.09.2026, Patric): .ergebnis__steuerung ist seit diesem Auftrag
   keine dunkle Fläche mehr (siehe unten, Hintergrund jetzt
   --gc-canvas-2), deshalb hier aus der Liste entfernt. Der
   Sonderfall .auswahl (vormals direkt darunter) entfällt damit auch:
   app.css:491 gibt ihm wieder den hellen Ring, das ist jetzt richtig. */
.public-jobs .dunkel,
.public-jobs .band--dunkel,
.public-jobs .abschluss-arbeitgeber {
  --fokus: var(--fokus-dunkel);
}

.public-jobs .hell-insel {
  --fokus: var(--fokus-hell);
}

/* Direkte Suche ------------------------------------------------------ */

/* =====================================================================
   W20: DIE SUCHLEISTE AUF DEM GRÜN

   Aus dem Übergabepaket „Suchleiste 1b, Auf dem Grün" vom 22.08.2026.
   Die weiße Karte über der grünen Fläche entfällt; die Suche gehört zum
   Kopf, nicht davor. Zwei Eingabefelder plus Knopf in Zeile 1, alle
   Verfeinerungen rahmenlos in Zeile 2.

   ZU DEN FARBEN. Das Paket nennt fünf eigene Werte. Vier davon liegen
   messbar dicht an bestehenden Tokens der Farbleiter, und die Tokens
   halten den besseren Kontrast: Text auf Signalgrün kommt mit
   --gc-action-ink auf --gc-action auf 8,04:1, mit den Werten des Pakets
   auf 7,55:1 (das Paket behauptet 9:1). Deshalb stehen hier die Tokens.
   Die Creme-Kanäle sind entsprechend 244 241 232 statt 239 235 221.

   Einzige eigene Zahl ist der Radius von 16px: die Leiter kennt 8, 12,
   14, 22 und 24. Er steht als lokale Größe im Block, nicht als Marken-Token.
   ===================================================================== */

/* W20.1: Die Leiste steht auf Sand, nicht auf Grün.
   Patrics Vorschlag vom 22.08.2026, und die Rechnung gibt ihm recht: die
   Deckkraftwerte des Pakets halten auf Grün die WCAG-Schwelle nicht.
   Platzhalter kamen mit 48 Prozent auf 3,70:1, die Beschriftungen mit
   50 Prozent auf 3,89:1; nötig sind 4,5:1. Auf Sand sind es 5,35:1 und
   6,41:1, ohne dass die Beschriftung so dunkel wird wie ihr Wert.
   `--gc-canvas` ist genau Patrics #F6F1E8, ein Kanalschritt daneben. */
.public-jobs {
  --jobsuche-radius: 16px;
  --jobsuche-feld: var(--gc-surface);
  --jobsuche-rand: var(--gc-line-ui);
  --jobsuche-rand-hover: var(--gc-ink-muted);
  --jobsuche-marke: var(--gc-ink-muted);
  --jobsuche-symbol: var(--gc-ink-muted);
  --jobsuche-platzhalter: var(--gc-ink-faint);
  --jobsuche-linie: var(--gc-line);
}

.public-jobs .jobkopf {
  z-index: 90;
  background: var(--gc-canvas);
  border-bottom: 1px solid var(--gc-line);
  color: var(--gc-ink);
  box-shadow: none;
}

.public-jobs .jobkopf__inner {
  /* Das Paket nennt 34px. Die Leiste klebt aber beim Scrollen; mit 34px
     oben und unten stünden 194px dauerhaft im Bild. 20px halten die
     Leiste unter 170px und lassen den Aufbau unverändert.
     W2 (19.09.2026, Patric): noch einmal enger, 12px, Teil der
     Kompaktierung des oberen Such- und Filterbereichs. */
  padding-block: 12px;
}

.public-jobs .jobsuche {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Zeile 1 ------------------------------------------------------------ */

.public-jobs .jobsuche__zeile {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.public-jobs .jobsuche__feld {
  min-width: 0;
  /* Die drei Teile der ersten Zeile stehen nebeneinander, das Jobfeld
     etwas breiter als das Ortsfeld. */
  flex: 1.3 1 0;
}

.public-jobs .jobsuche__feld--ort {
  flex: 1 1 0;
  max-width: none;
}

.public-jobs .jobsuche__feld .eingabe {
  height: 66px;
  min-height: 66px;
  padding-inline: 22px 22px;
  padding-left: 58px;
  border: 1px solid var(--jobsuche-rand);
  border-radius: var(--jobsuche-radius);
  background: var(--jobsuche-feld);
  color: var(--gc-ink);
  font-size: 1.125rem;
  font-weight: 600;
  box-shadow: none;
  transition: border-color 160ms var(--public-ease), box-shadow 160ms var(--public-ease);
}

.public-jobs .jobsuche__feld--ort .eingabe {
  font-weight: 400;
}

.public-jobs .jobsuche__feld .eingabe:hover {
  border-color: var(--jobsuche-rand-hover);
}

/* Der Ring ersetzt die Randfarbe optisch und verschiebt nichts.

   NACHTRAG 3, PUNKT 3: DER RING WAR EINEN PIXEL DICK.
   ---------------------------------------------------------------------
   Vorher: `0 0 0 1px var(--gc-action), 0 0 0 4px color-mix(in srgb,
   var(--gc-action) 22%, transparent)`. Die Fokusanzeige bestand damit aus
   einer 1 px dünnen Linie und einem 3 px breiten, zu 22 Prozent
   durchsichtigen Hof. Gemessen am Bildpaar mit echtem Tastaturfokus: der
   Hof deckt den größten Teil der Fläche, seine gerenderte Farbe ist
   rgb(196 215 204), und die hält gegen den Grund rgb(246 248 244) nur
   1,41:1; 140 von 140 Nachbarproben lagen unter 3:1. Die tragende Linie
   darunter war 1 px dick, WCAG 2.4.11 verlangt mindestens 2 px.

   Jetzt steht hier derselbe Ring wie an jedem anderen Bedienelement der
   Seite: 3 px deckend in var(--fokus). Der durchsichtige Hof entfällt, er
   konnte den Kontrast nie halten und war die optisch beherrschende Lage.
   Der Ring liegt außen auf --gc-canvas (6,72:1) und innen auf der weißen
   Feldfläche (7,19:1). */
.public-jobs .jobsuche__feld .eingabe:focus,
.public-jobs .jobsuche__feld .eingabe:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--fokus);
}

.public-jobs .jobsuche__feld .eingabe::placeholder {
  color: var(--jobsuche-platzhalter);
  font-weight: 600;
  opacity: 1;
}

.public-jobs .jobsuche__feld--ort .eingabe::placeholder {
  font-weight: 400;
}

.public-jobs .jobsuche__feld .feld__ico {
  left: 22px;
  width: 19px;
  height: 19px;
  color: var(--jobsuche-symbol);
}

.public-jobs .jobsuche__senden {
  flex: 0 0 auto;
  min-width: 0;
  height: 66px;
  min-height: 66px;
  padding-inline: 34px;
  border: 0;
  border-radius: var(--jobsuche-radius);
  background: var(--gc-action);
  color: var(--gc-action-ink);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color 160ms var(--public-ease);
}

.public-jobs .jobsuche__senden:hover {
  border-color: transparent;
  /* Das Paket hellt beim Überfahren auf. Die Farbleiter hat den dunkleren
     Hover eingefroren, weil nur für ihn der Text darauf nachgerechnet ist
     (6,25:1). Deshalb bleibt der Bestand. */
  background: var(--gc-action-hover);
}

.public-jobs .jobsuche__senden:active {
  transform: none;
}

/* Zeile 2: der Assistent verlässt die erste Zeile ---------------------- */

.public-jobs .jobsuche__knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding-block: 10px;
  padding-inline: 0;
  margin-block: -10px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--jobsuche-marke);
  box-shadow: none;
  transition: color 140ms var(--public-ease);
}

.public-jobs .jobsuche__knopf:hover {
  border-color: transparent;
  background: none;
  color: var(--gc-ink);
}

.public-jobs .jobsuche__knopf svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.public-jobs .jobsuche__filtertext {
  border-bottom: 1px solid var(--gc-line-ui);
  padding-bottom: 2px;
  font-size: 0.84375rem;
  font-weight: 500;
}

/* Zeile 2: „Filter verfeinern" als Hülle, der Assistent bleibt daneben --
   ---------------------------------------------------------------------
   NEU (UI-04, 18.09.2026). Vorher standen Anstellungsart, Branche, Start,
   Assistent und Radius parallel in einer Zeile: bei 1280x720 waren 32, bei
   390x844 21 Bedienelemente gleichzeitig sichtbar (gemessen mit Playwright
   gegen den gebauten Stand, siehe LIEFERUNG.md). .jobsuche__filterzeile
   trägt jetzt nur noch zwei Kinder: das Aufklappfeld .filterbereich mit den
   vier Zusatzkriterien und den eigenständigen Assistenten-Anker. Die vier
   Kriterien selbst liegen unverändert in .jobsuche__leistenfilter (siehe
   jobs.html, Marken bau:leistenfilter): alle Regeln darunter in dieser
   Datei gelten unverändert weiter, weil weder Klassen noch IDs dort
   angefasst wurden. */
.public-jobs .jobsuche__filterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 14px;
  min-width: 0;
}

/* Das Aufklappfeld selbst. Kein position:absolute am Panel: die vier
   Kriterien darin sind zusammen deutlich breiter als das schlanke
   Branche-Feld, ein schwebendes Panel würde bei 320 bis 390px kollidieren
   oder selbst überlaufen. Offen schiebt es die Ergebnisse einfach nach
   unten, wie ein natives <details> es ohne jede weitere Regel tut. */
.public-jobs .filterbereich {
  min-width: 0;
}

.public-jobs .filterbereich__summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--jobsuche-rand);
  border-radius: var(--gc-radius-pill);
  background: var(--jobsuche-feld);
  color: var(--gc-ink);
  font-size: 0.90625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: border-color 160ms var(--public-ease), background-color 160ms var(--public-ease);
}

/* Chrome/Safari und Firefox zeichnen sonst je ein eigenes Dreieck vor dem
   Text; dasselbe Muster wie .leistenfilter__summary weiter unten in dieser
   Datei. */
.public-jobs .filterbereich__summary::-webkit-details-marker {
  display: none;
}

.public-jobs .filterbereich__summary::marker {
  content: "";
}

.public-jobs .filterbereich__summary:hover {
  border-color: var(--jobsuche-rand-hover);
}

.public-jobs .filterbereich[open] > .filterbereich__summary {
  border-color: var(--jobsuche-rand-hover);
  background: var(--gc-canvas-2);
}

.public-jobs .filterbereich__ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--jobsuche-symbol);
}

.public-jobs .filterbereich__pfeil {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--gc-ink-muted);
  transition: transform 160ms var(--public-ease);
}

.public-jobs .filterbereich[open] > .filterbereich__summary .filterbereich__pfeil {
  transform: rotate(180deg);
}

/* Derselbe Ring wie .leistenfilter__summary direkt darunter in dieser
   Datei: nur die Farbe wechselt für die helle Suchleiste, Breite und Stil
   erbt das Feld vom Grundwert. Bewusst nicht am Ortsfeld-Ring gebaut
   (public-jobs.css, Ortsfeld-Fokusring ist tabu, siehe AUFTRAG_UI-04.md). */
.public-jobs .filterbereich__summary:focus-visible {
  outline-color: var(--gc-green-deep);
}

.public-jobs .filterbereich__panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--jobsuche-linie);
}

/* Der in bau.py erzeugte Assistent-Anker (id assistent-öffnen) liegt jetzt
   unverändert im Panel, aber unsichtbar: sichtbar ist ausschließlich der
   von Hand ergänzte Zwilling außerhalb des Aufklappfelds (jobs.html, id
   assistent-öffnen-sichtbar), gleiche Klasse jobsuche__knopf, also gleiche
   Optik ohne weitere Regel. Beide Anker teilen denselben href und werden
   vom bestehenden Klick-Horcher auf a[href="#assistent-dialog"] gleich
   behandelt; ohne JavaScript bleibt der unsichtbare Zwilling ohnehin
   erreichbar über den sichtbaren, identisch verlinkten Anker. */
.public-jobs .filterbereich #assistent-öffnen {
  display: none;
}

@media (max-width: 767px) {
  .public-jobs #assistent-öffnen-sichtbar {
    display: flex;
    inline-size: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding-inline: 16px;
    border: 1px solid var(--gc-line-ui);
    border-radius: var(--gc-radius-control);
    background: var(--gc-canvas-2);
    color: var(--gc-ink);
  }
}

.public-jobs .jobsuche__leistenfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Das Paket nennt 26px. Bei fünf statt vier Segmenten und dem behaltenen
     Assistenten-Link passt die Zeile damit bei 1280px nicht mehr in eine
     Reihe. 22px waagerecht halten sie zusammen, 14px senkrecht fangen den
     Umbruch auf kleineren Schirmen ruhig ab. */
  column-gap: 20px;
  row-gap: 14px;
  min-width: 0;
}

/* Segment-Umschalter Anstellungsart ---------------------------------- */

.public-jobs .segmentwahl {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.public-jobs .segmentwahl__spur {
  display: flex;
  padding: 4px;
  /* D2 (U2 aus dem D1-Review): Die Segmentwahl ist ein echtes
     Bedienelement. Der dekorative Randton hielt 1,42:1, die UI-Linie
     haelt 4,65:1 auf Canvas. */
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-2);
}

.public-jobs .segmentwahl__feld {
  position: relative;
  margin: 0;
  cursor: pointer;
}

/* Der Radioknopf bleibt im Formular und im Tastaturweg, er wird nur nicht
   gezeichnet. Sichtbar ist die Pille; die Rolle radiogroup und der Zustand
   aria-checked kommen dadurch vom Browser und nicht aus Attributen. */
.public-jobs .segmentwahl__eingabe {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.public-jobs .segmentwahl__text {
  display: block;
  padding: 8px 12px;
  border-radius: var(--gc-radius-pill);
  color: var(--gc-ink-soft);
  font-size: 0.84375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 140ms var(--public-ease), background-color 140ms var(--public-ease);
}

.public-jobs .segmentwahl__feld:hover .segmentwahl__text {
  color: var(--gc-ink);
}

/* Auf Sand kehrt sich die aktive Pille um: dunkle Fläche, helle Schrift.
   Eine cremefarbene Pille auf Sand wäre kaum zu sehen (1,04:1). */
.public-jobs .segmentwahl__eingabe:checked + .segmentwahl__text {
  background: var(--gc-dark);
  color: var(--gc-on-dark);
  font-weight: 700;
}

.public-jobs .segmentwahl__eingabe:focus-visible + .segmentwahl__text {
  outline: 2px solid var(--gc-action);
  outline-offset: 2px;
}

/* Inline-Auswahl Branche und Start ----------------------------------- */

.public-jobs .leistenfilter {
  min-width: 0;
}

.public-jobs .leistenfilter__summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--gc-ink);
  list-style: none;
  cursor: pointer;
}

.public-jobs .leistenfilter__summary::-webkit-details-marker {
  display: none;
}

.public-jobs .jobsuche__feldlabel,
.public-jobs .jobsuche__selectfeld label {
  position: static;
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jobsuche-marke);
  font-size: 0.84375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.public-jobs .leistenfilter__summarytext {
  /* 22ch ließ "Garten- und Landschaftsbau" 286 Pixel breit werden und
     drückte den Umkreis in eine eigene Zeile (Befund 6). */
  max-width: 18ch;
  overflow: hidden;
  border-bottom: 1px solid var(--gc-line-ui);
  padding-bottom: 2px;
  color: var(--gc-ink);
  font-size: 0.90625rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ein gesetzter Filter hebt sich über den Unterstrich ab, nicht über die
   Textfarbe: sonst hätte die Zeile drei Grüntöne nebeneinander. */
.public-jobs .leistenfilter.hat-auswahl .leistenfilter__summarytext,
.public-jobs .jobsuche__selectfeld.hat-auswahl select {
  border-bottom-color: var(--gc-action);
}

.public-jobs .leistenfilter__summary svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--gc-ink-muted);
  transition: transform 160ms var(--public-ease);
}

.public-jobs .leistenfilter[open] > .leistenfilter__summary {
  background: none;
}

.public-jobs .leistenfilter[open] > .leistenfilter__summary svg {
  transform: rotate(180deg);
}

/* Das Paket beschreibt das Aufklappfeld dunkel, weil es aus einer grünen
   Leiste fällt. Aus einer Sandleiste fällt es besser hell heraus: eine
   dunkle Platte auf Sand liest sich als fremdes Fenster. */
.public-jobs .leistenfilter__panel {
  position: absolute;
  z-index: 95;
  min-width: 380px;
  max-width: min(520px, calc(100vw - 32px));
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--jobsuche-radius);
  background: var(--gc-surface);
  color: var(--gc-ink);
  box-shadow: var(--gc-shadow-dialog);
}

/* Ohne Deckel wächst die Liste über den Bildschirmrand hinaus; sie hat
   dreißig Einträge. */
.public-jobs .leistenfilter__gruppe {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.public-jobs .leistenfilter__gruppe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.public-jobs .leistenfilter__titel {
  padding: 0;
  color: var(--jobsuche-marke);
  font-size: 0.84375rem;
  font-weight: 500;
}

.public-jobs .leistenfilter__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

/* Kästchen und Beschriftung sind Geschwister, keine Verschachtelung. Die
   Reihe gehört deshalb an den Eintrag, nicht an das label; sonst stünde das
   Kästchen über dem Wort. */
.public-jobs .leistenfilter__eintrag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding-inline: 6px;
  border-radius: var(--gc-radius-sm);
}

.public-jobs .leistenfilter__eintrag:hover {
  background: var(--gc-canvas);
}

.public-jobs .leistenfilter__eintrag label {
  min-width: 0;
  /* "Landschaftsarchitektur" ist ein Wort und passt in keine der beiden
     Spalten. Ohne diese Zeile schob es sich über die Nachbarspalte. */
  overflow-wrap: anywhere;
  color: var(--gc-ink);
  font-size: 0.9375rem;
  line-height: 1.3;
  cursor: pointer;
}

/* Die Label-Fläche schließt Lücke und Innenabstand der ganzen Zeile ein. */
.public-jobs .leistenfilter__eintrag label::before {
  content: "";
  position: absolute;
  inset: 0;
}

.public-jobs .leistenfilter__checkbox {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--gc-action);
}

.public-jobs .leistenfilter__checkbox:disabled + label {
  opacity: 0.45;
  cursor: not-allowed;
}

.public-jobs .leistenfilter__abschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--jobsuche-linie);
}

.public-jobs .leistenfilter__hinweis {
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.8125rem;
}

.public-jobs .leistenfilter__senden {
  min-height: 40px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-action);
  color: var(--gc-action-ink);
  font-size: 0.875rem;
  font-weight: 700;
}

.public-jobs .leistenfilter__senden:hover {
  background: var(--gc-action-hover);
}

/* Umkreis steht rechtsbündig, wie im Paket beschrieben. */
.public-jobs .jobsuche__radiusfeld {
  margin-left: auto;
  gap: 14px;
  /* Codex-Durchgang 108, Befund 6: mit einer langen Branche ("Garten- und
     Landschaftsbau") wurde die Zeile 1.198 Pixel breit bei 1.120 Platz, und
     der Umkreis rutschte allein in eine zweite Zeile. Er darf jetzt
     schrumpfen und füllt den Rest der Zeile, statt sie zu sprengen.
     Gemessen am 03.09.2026 bei 1440 Pixeln. */
  flex: 1 1 200px;
  min-width: 200px;
}

.public-jobs .jobsuche__radiusfeld .radiussteuerung--leiste {
  flex: 1 1 auto;
  min-width: 0;
}

.public-jobs .jobsuche__radiusfeld .radiussteuerung__regler {
  flex: 1 1 auto;
  width: auto;
  min-width: 90px;
}

/* Start: dasselbe Muster, nur mit einem echten Auswahlfeld darunter. */
.public-jobs .jobsuche__selectfeld {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.public-jobs .jobsuche__selectfeld select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0 18px 2px 0;
  border: 0;
  border-bottom: 1px solid var(--gc-line-ui);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23555853' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,4.5 6,8 9.5,4.5'/%3E%3C/svg%3E");
  background-position: right center;
  background-repeat: no-repeat;
  color: var(--gc-ink);
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.4;
}

.public-jobs .radiussteuerung {
  display: grid;
  min-width: 0;
}

.public-jobs .radiussteuerung--leiste {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 14px;
  width: auto;
  padding: 0;
}

.public-jobs .radiussteuerung__regler {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--gc-green-deep);
  cursor: pointer;
}

.public-jobs .radiussteuerung__regler::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-line-ui);
}

.public-jobs .radiussteuerung__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 1px solid var(--gc-surface);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-green-deep);
}

.public-jobs .radiussteuerung__regler::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-line-ui);
}

.public-jobs .radiussteuerung__regler::-moz-range-progress {
  height: 4px;
  border: 0;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-green-deep);
}

.public-jobs .radiussteuerung__regler::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid var(--gc-surface);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-green-deep);
}

.public-jobs .radiussteuerung__wert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink);
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__wert {
  /* Feste Mindestbreite, damit die Zeile beim Ziehen nicht springt. */
  display: inline-flex;
  /* Codex-Durchgang 112: der Kasten ist 44 px hoch (Grundregel), Zahl und
     "km" sind 17,4 px hoch. Bei Grundlinien-Ausrichtung saßen beide oben im
     Kasten, 13,3 px über der Reglermitte, seit mindestens 23.08. live. Beide
     haben dieselbe Schriftgröße und Zeilenhöhe, mittig treffen sich auch
     ihre Grundlinien. Die Kastenhöhe bleibt, damit die Zeile nicht schrumpft. */
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 2px;
  grid-template-columns: none;
  min-width: 54px;
  white-space: nowrap;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gc-ink);
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler {
  width: 120px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  accent-color: var(--gc-action);
  touch-action: pan-y;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--gc-canvas-3);
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--gc-action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-action) 20%, transparent);
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--gc-canvas-3);
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--gc-action);
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--gc-action);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-action) 20%, transparent);
}

.public-jobs .radiussteuerung__zahl {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: end;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__zahl {
  flex: 0 0 auto;
  /* Drei Ziffern plus etwas Luft. Ohne die versteckten Pfeilchen schnitt
     Chrome die letzte Ziffer ab: das Feld reservierte Platz für sie, auch
     wenn sie erst beim Überfahren erscheinen. */
  width: 3.4ch;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  color: var(--gc-ink);
  font-size: 0.90625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: end;
}

.public-jobs .radiussteuerung__wert > span {
  padding-inline: 3px 7px;
  color: var(--gc-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__zahl::-webkit-outer-spin-button,
.public-jobs .radiussteuerung--leiste .radiussteuerung__zahl::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__wert > span {
  flex: 0 0 auto;
  align-self: center;
  display: inline;
  padding: 0 0 0 4px;
  color: var(--gc-ink);
  font-size: 0.90625rem;
  font-weight: 700;
  line-height: 1.2;
}

.public-jobs .radiussteuerung__grenzen {
  display: none;
}

.kein-js .public-jobs .radiussteuerung--leiste,
.kein-js .public-jobs .assistent .radiussteuerung--assistent {
  grid-template-columns: minmax(0, 1fr);
}

.kein-js .public-jobs .radiussteuerung__regler,
.kein-js .public-jobs .radiussteuerung__grenzen {
  display: none;
}

.public-jobs .jobsuche__selectfeld:focus-within label {
  color: var(--gc-green-deep);
}

.public-jobs .leistenfilter__summary:focus-visible,
.public-jobs .jobsuche__selectfeld select:focus-visible,
.public-jobs .leistenfilter__senden:focus-visible {
  outline-color: var(--gc-green-deep);
}

.public-jobs .radiussteuerung__regler:focus-visible {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 1px;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__regler:focus-visible {
  outline-offset: -3px;
}

.public-jobs .radiussteuerung__wert:focus-within {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 2px;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__wert:focus-within {
  outline: 0;
}

.public-jobs .radiussteuerung__zahl:focus-visible {
  outline: 0;
}

.public-jobs .radiussteuerung--leiste .radiussteuerung__zahl:focus-visible {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: -3px;
  border-radius: var(--gc-radius-sm);
}

.public-jobs .assistent .radiussteuerung--assistent {
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: start;
  column-gap: 12px;
}

.public-jobs .assistent .radiussteuerung--assistent .radiussteuerung__regler {
  min-height: 52px;
  height: 52px;
}

.public-jobs .assistent .radiussteuerung--assistent .radiussteuerung__wert {
  min-height: 52px;
  background: var(--assistent-panel);
}

.public-jobs .assistent .radiussteuerung--assistent .radiussteuerung__zahl {
  min-height: 50px;
}

.public-jobs .assistent .radiussteuerung--assistent .radiussteuerung__grenzen {
  grid-column: 1;
  display: flex;
  justify-content: space-between;
  margin-top: -4px;
  padding-inline: 2px;
  color: var(--assistent-text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Ergebnissteuerung -------------------------------------------------- */

.public-jobs #ergebnisse {
  background: var(--jobs-canvas);
}

/* Die Jobbörse hat keinen Hero. Der obere Rand dieses Bandes ist deshalb der
   Seitenanfang und braucht die ruhige Anlaufstrecke der Referenz (80 bis
   110 px), nicht die 42 bis 68 px einer Zwischenüberschrift. */
.public-jobs .ergebnis__steuerung {
  /* W20: vorher clamp(80px, 8vw, 110px). Der große Abstand trennte die
     weiße Suchkarte von der Überschrift. Beide sind jetzt dieselbe grüne
     Fläche; so viel Luft dazwischen liest sich als Fehler.
     W2 (19.09.2026, Patric): noch einmal enger, clamp(28px,3vw,40px) und
     18px, Teil der Kompaktierung; bei 1440px Ansichtsbreite gemessen
     zusammen mit den anderen W2-Kürzungen unten (Lieferung).
     W2, Farbe (19.09.2026, Patric): große ruhige Fläche, vorher --gc-dark
     (#173b2b, deckt sich mit Patrics #183B2B). Jetzt --gc-canvas-2, die
     dunkle Marken- und Aktionsfarbe bleibt für Buttons und Navigation
     (unverändert). Alle Textfarben und Ränder in diesem Abschnitt unten
     entsprechend von den on-dark- auf die ink-Tokens gedreht, sonst
     verschwindet die Schrift auf der jetzt hellen Fläche. */
  padding-block: clamp(28px, 3vw, 40px) 18px;
  background: var(--gc-canvas-2);
  color: var(--gc-ink-soft);
}

/* Titel und Einordnung stehen untereinander, bevor die Ergebnissteuerung
   beginnt. */
.public-jobs .ergebnis__aufmacher {
  display: block;
}

/* W2 (19.09.2026, Patric): 12px statt 20px, Teil der Kompaktierung. */
.public-jobs .ergebnis__unterzeile {
  margin-top: 12px;
}

.public-jobs .ergebnis__titel {
  margin: 0;
  /* W2 (19.09.2026, Patric): ink statt on-dark, Fläche ist jetzt hell. */
  color: var(--gc-ink);
  /* W18.2: vorher clamp(2.75rem, 6.2vw, 5rem), also rund 79 px bei 1280 px.
     Jetzt auf der Höhe der Markenebene, rund 55 px, damit der Seitentitel
     nicht größer steht als die Schlagzeile der Startseite. */
  font-size: clamp(2.1rem, 4.3vw, 4rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: var(--gc-ls-section);
}

.public-jobs .ergebnis__einordnung {
  max-width: 64ch;
  /* Der Abstand sitzt an der Unterzeile. */
  margin-top: 0;
  /* W2 (19.09.2026, Patric): ink-soft statt on-dark-soft, Fläche ist
     jetzt hell. */
  color: var(--gc-ink-soft);
  font-size: var(--gc-fs-lead);
  line-height: 1.55;
}

/* Ergebnis-Kopfzeile und aktive Filter -------------------------------
   ACHTUNG: Diese Zeile steht weiter auf derselben Fläche wie Titel und
   Unterzeile (seit W2 hell, --gc-canvas-2), die Suchleiste darüber seit
   W20.1 auf Sand. Die `--jobsuche-*`-Werte gelten deshalb HIER NICHT; sie
   sind für Sand gerechnet. Die Werte stehen hier ausgeschrieben. */

/* Die weiße Karte entfällt. Übrig bleibt eine Zeile auf derselben Fläche,
   nach oben durch eine Haarlinie abgesetzt. Damit steht auf der Seite kein
   weißer Block mehr vor dem Stellenraster. */
.public-jobs .ergebnis__kopf {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  /* W2 (19.09.2026, Patric): 12px statt 20px, Teil der Kompaktierung. */
  margin-top: 12px;
  padding: 12px 0 0;
  border: 0;
  /* W2 (19.09.2026, Patric): dunkle Haarlinie statt heller, Fläche ist
     jetzt hell (--gc-ink-Kanäle 20 45 35 statt der Cream-Kanäle). */
  border-top: 1px solid rgb(20 45 35 / 0.12);
  border-radius: 0;
  background: none;
  color: var(--gc-ink);
  box-shadow: none;
}

.public-jobs .treffer {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  color: var(--gc-ink);
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* "im Umkreis von 65 km" steht neben der Zahl, nicht darunter: die Zahl
   bleibt die stärkste Aussage der Zeile. Das Skript füllt und zeigt sie. */
.public-jobs .treffer__umkreis {
  margin-left: -14px;
  /* W2 (19.09.2026, Patric): ink-faint statt on-dark-faint, Fläche ist
     jetzt hell. Gilt für den ganzen Block bis .marke--zurücksetzen. */
  color: var(--gc-ink-faint);
  font-size: 0.84375rem;
  font-weight: 400;
}

.public-jobs .treffer__umkreis[hidden] {
  display: none;
}

.public-jobs .sortierung {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-left: auto;
}

/* Vorher Versalien in Grün. Jetzt Normalschreibung und gedämpft, damit die
   Trefferzahl die stärkste Information der Zeile bleibt. */
.public-jobs .sortierung__titel {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  color: var(--gc-ink-faint);
  font-size: 0.84375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.public-jobs .sortierung__feld {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0 18px 2px 0;
  border: 0;
  border-bottom: 1px solid rgb(20 45 35 / 0.35);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23142d23' stroke-opacity='0.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,4.5 6,8 9.5,4.5'/%3E%3C/svg%3E");
  background-position: right center;
  background-repeat: no-repeat;
  color: var(--gc-ink);
  font-size: 0.90625rem;
  font-weight: 600;
  line-height: 1.4;
}

.public-jobs .sortierung__knopf {
  min-height: 40px;
  padding-inline: 16px;
  border: 1px solid rgb(20 45 35 / 0.25);
  border-radius: var(--gc-radius-pill);
  background: none;
  color: var(--gc-ink);
  font-size: 0.875rem;
  letter-spacing: 0;
}

.public-jobs .sortierung__knopf:hover {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
  color: var(--gc-ink);
}

.public-jobs .sortierung__knopf[hidden] {
  display: none;
}

.public-jobs .aktivfilter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.public-jobs .aktivfilter[hidden] {
  display: none;
}

.public-jobs .marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  min-height: 0;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--gc-accent) 45%, transparent);
  border-radius: var(--gc-radius-pill);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
  /* W2 (19.09.2026, Patric): green-deep statt mint. Mint ist auf dunklem
     Grund kontrastreich, auf der jetzt hellen Fläche (--gc-canvas-2) zu
     schwach; green-deep ist derselbe dunkle Markenton wie bei Links und
     Buttons, auf hellem Grund geprüft. */
  color: var(--gc-green-deep);
  font-size: 0.8125rem;
}

.public-jobs .marke:hover {
  border-color: var(--gc-accent);
  background: color-mix(in srgb, var(--gc-accent) 20%, transparent);
}

.public-jobs .marke svg {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  color: var(--gc-green-deep);
}

.public-jobs .marke:hover svg {
  opacity: 0.6;
}

.public-jobs .marke__präfix {
  color: var(--gc-ink-soft);
  font-weight: 400;
}

.public-jobs .marke__wert {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

/* Bewusst schwächer als die Marken: kein Chip, keine Fläche. */
.public-jobs .marke--zurücksetzen {
  margin-inline-start: 8px;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid rgb(20 45 35 / 0.25);
  border-radius: 0;
  background: none;
  color: rgb(20 45 35 / 0.6);
  font-size: 0.8125rem;
}

.public-jobs .marke--zurücksetzen:hover {
  border-color: transparent;
  border-bottom-color: var(--gc-ink);
  background: none;
  color: var(--gc-ink);
}

.public-jobs.entwurf .vermerk {
  display: none;
}

/* Trefferverzeichnis ------------------------------------------------- */

.public-jobs #ergebnisse > .band--hell {
  padding-block: 34px clamp(92px, 9vw, 132px);
  background: var(--gc-canvas);
}

/* KW-S3 Blättern: Stand und Knopf unter der Liste, mittig. ------------ */
.public-jobs .jobliste__mehr {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* Codex-Durchgang 110, Befund 2: `display: grid` schlug die Browservorgabe
   `[hidden] { display: none }`. Der Block blieb mit "15 von 15" und einem
   wirkungslosen Knopf stehen, obwohl das Skript `hidden` gesetzt hatte. */
.public-jobs .jobliste__mehr[hidden] {
  display: none;
}

.public-jobs .jobliste__stand {
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.9375rem;
}

.public-jobs .jobliste__mehrknopf {
  min-width: 240px;
}

/* Ein heller Zwischenraum trennt den grünen Ring von der grünen Aktion.
   Der äußere Ring behält auf der hellen Listenfläche seinen Kontrast. */
.public-jobs .jobliste__mehrknopf:focus-visible {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 6px;
  box-shadow: 0 0 0 4px var(--gc-canvas);
}

.public-jobs .jobliste__mehrknopf[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* D6-N1 Punkt 4: Filterzeile und Kartenraster auf Entwurfsbreite (1320px
   statt 1120px). Kein neuer Wert erfunden, derselbe wiederverwendete
   Token wie D6 Punkt 1 und D6-N1 Punkt 1 (--gc-container-wide,
   public-brand.css:198). Betroffen sind `.wrap.ergebnis` (Trefferbereich
   und Kartenraster) UND `.wrap.jobkopf__inner` (die sichtbare
   Suchformzeile .jobsuche sitzt strukturell NICHT im Trefferbereich,
   sondern in der klebenden Kopfleiste .jobkopf; erst gemessen, dann
   gefunden, siehe LIEFERUNG.md), kein anderer `.wrap` auf dieser Seite.
   Bei 2 Spalten und 17px Spaltenabstand (siehe die Regel bei
   min-width:768px weiter unten) ergibt das rechnerisch exakt die
   Entwurfs-Kartenbreite 651,5px ((1320-17)/2). */
.public-jobs .wrap.ergebnis,
.public-jobs .wrap.jobkopf__inner {
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
}

.public-jobs .jobliste {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  list-style: none;
}

.public-jobs .jobliste .stellenkarte {
  display: block;
  width: 100%;
}

.public-jobs .jobliste .stellenkarte__körper {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 24px;
  border: 0;
  border-bottom: 1px solid var(--gc-line);
  border-radius: 0;
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  box-shadow: none;
  transform: none;
  transition: background-color 180ms var(--gc-ease);
}

.public-jobs .jobliste > .stellenkarte:last-child .stellenkarte__körper {
  border-bottom: 0;
}

.public-jobs .jobliste .stellenkarte__körper:hover {
  background: var(--gc-canvas-2);
  box-shadow: none;
  transform: none;
}

.public-jobs .jobliste .stellenkarte__text {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) minmax(210px, 0.58fr);
  grid-template-areas:
    "head title facts"
    "sector company facts"
    "sector location salary"
    ". summary summary";
  min-width: 0;
  align-items: start;
  gap: 6px 24px;
}

.public-jobs .jobliste .stellenkarte__kopf {
  grid-area: head;
  display: flex;
  min-height: 26px;
  margin: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

/* R1-W1-K5: Gleiche Paketbreite hält Datum, Kopf und folgende Grid-Zeilen
   auch beim Umbruch stabil. Ohne Badge bleibt dieser Platz vollständig leer. */
.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte__kopf .stellenkarte__ab {
  order: -1;
  flex: 0 0 auto;
}

.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte__kopf .auszeichnung,
.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte__kopf:not(:has(.auszeichnung))::after {
  flex: 0 0 112px;
  height: 26px;
  margin-inline-start: auto;
}

.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte__kopf:not(:has(.auszeichnung))::after {
  content: "";
}

.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte__kopf .auszeichnung {
  justify-content: center;
}

.public-jobs .jobliste .auszeichnung {
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-2);
  color: var(--gc-link);
  /* D2: stand auf 0,6875rem (11 px). Die Website setzt seit Design 05
     keinen Text unter 12 px; die Referenz nutzt dort 9 bis 11 px, davon
     sind die Proportionen übernommen, nicht die Grade. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.public-jobs .jobliste .auszeichnung svg {
  width: 10px;
  height: 10px;
  color: var(--gc-link);
}

.public-jobs .jobliste .stellenkarte__ab {
  color: var(--gc-ink-muted);
  /* D2: stand auf 0,73rem (11,7 px), Mindestgrad ist 12 px. */
  font-size: 0.75rem;
}

.public-jobs .jobliste .stellenkarte__branche {
  grid-area: sector;
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  margin: 4px 0 0;
  padding: 4px 9px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-chip);
  background: var(--gc-canvas-2);
  color: var(--gc-link);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.public-jobs .jobliste .stellenkarte__branche svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

/* D6-N1 Punkt 4: Kartentitel auf Entwurfsgroesse (23px/31,05px statt
   19,2px/23,808px), Gewicht 600 traf bereits. */
.public-jobs .jobliste .stellenkarte__titel {
  grid-area: title;
  margin: 0;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--gc-ls-title);
  hyphens: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.public-jobs .jobliste .stellenkarte__titel a {
  color: inherit;
  text-decoration: none;
}

.public-jobs .jobliste .stellenkarte__titel a::after {
  border-radius: 0;
}

.public-jobs .jobliste .stellenkarte__titel a:hover {
  color: var(--gc-link);
}

.public-jobs .jobliste .stellenkarte__titel a:focus-visible {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 3px;
  border-radius: var(--gc-radius-sm);
}

.public-jobs .jobliste .stellenkarte__mwd {
  color: var(--gc-ink-muted);
  font-family: var(--gc-font-body);
  font-size: 0.84rem;
}

.public-jobs .jobliste .stellenkarte__firma {
  grid-area: company;
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

.public-jobs .jobliste .stellenkarte__ort {
  grid-area: location;
  display: flex;
  margin: 0;
  align-items: center;
  gap: 7px;
  color: var(--gc-ink-muted);
  font-size: 0.87rem;
  line-height: 1.4;
}

.public-jobs .jobliste .stellenkarte__ort svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--gc-link);
}

.public-jobs .jobliste .stellenkarte__fakten {
  grid-area: facts;
  display: flex;
  margin: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.public-jobs .jobliste .stellenkarte__fakten span {
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font-size: 0.78rem;
  line-height: 1.3;
}

.public-jobs .jobliste .stellenkarte__gehalt {
  grid-area: salary;
  margin: 4px 0 0;
  color: var(--gc-ink);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

.public-jobs .jobliste .beschreibung__anriss {
  grid-area: summary;
  display: -webkit-box;
  max-width: 72ch;
  margin: 10px 0 0;
  overflow: hidden;
  color: var(--gc-ink-soft);
  font-size: 0.91rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* W7: Titelbild-Ebene und Arbeitgeberzeichen in jeder Listenkarte. */
.public-jobs .stellenkarte__monogramm {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: -12px;
  display: grid;
  width: 64px;
  max-width: 64px;
  height: 64px;
  padding: 8px;
  place-items: center;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-small);
  color: var(--gc-dark-card);
  font-family: var(--gc-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

/* Ruhiger Bild-Rückfall in der vorhandenen dunklen Platzhalter-Rolle.
   Die überstehende Logokachel bleibt außerhalb der Medienfläche sichtbar. */
.public-jobs .stellenkarte__medien:has(> .stellenkarte__foto) {
  border-radius: var(--r-md);
  background-color: var(--gc-dark);
}

.public-jobs .stellenkarte__foto {
  position: relative;
}

.public-jobs .stellenkarte__medien > :is(.stellenkarte__foto, .stellenkarte__logo) {
  font-size: 0;
}

/* Bei einem defekten Bild deckt die leere Ersatzfläche Symbol und
   Alt-Text ab. Geladene Bilder zeichnen dieses Pseudoelement nicht. */
.public-jobs .stellenkarte__medien > :is(.stellenkarte__foto, .stellenkarte__logo)::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gc-dark);
  content: "";
}

.public-jobs .stellenkarte__medien > .stellenkarte__logo::after {
  background: var(--gc-surface);
}

.public-jobs .jobliste .stellenkarte__medien {
  width: 100%;
  height: 150px;
  min-height: 0;
  max-height: 150px;
}

.public-jobs .jobliste .stellenkarte__medien > :is(.stellenkarte__foto, .platzhalter--betrieb, .demo-medienplatzhalter) {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}

.public-jobs .jobliste .stellenkarte__foto {
  object-fit: cover;
  object-position: var(--media-focus, 50% 50%);
}

.public-jobs .jobliste .demo-medienplatzhalter {
  padding-left: 88px;
  overflow: hidden;
}

.public-jobs .jobliste .demo-medienplatzhalter strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.public-jobs .jobliste .demo-medienplatzhalter small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.public-jobs .jobliste .stellenkarte__foto + .stellenkarte__logo,
.public-jobs .jobliste .platzhalter--betrieb + .stellenkarte__logo,
.public-jobs .jobliste .demo-medienplatzhalter + .stellenkarte__logo {
  position: absolute;
  z-index: 1;
  left: 14px;
  bottom: -14px;
  width: 82px;
  max-width: 82px;
  height: 82px;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-small);
  pointer-events: none;
}

.public-jobs .jobliste .stellenkarte__medien:has(> .platzhalter--betrieb + .stellenkarte__logo) > .platzhalter--betrieb {
  padding-bottom: 56px;
}

@media (min-width: 768px) {
  .public-jobs .jobliste .stellenkarte__körper {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    align-items: start;
  }

  .public-jobs .jobliste .stellenkarte__medien {
    width: 220px;
    height: 124px;
    min-height: 0;
    max-height: 124px;
  }
}

/* Leerer Zustand ----------------------------------------------------- */

.public-jobs .leerzustand {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  max-width: 820px;
  margin: 8px auto 0;
  padding: clamp(30px, 4vw, 48px);
  align-items: center;
  gap: clamp(20px, 3vw, 30px);
  border: 1px solid var(--jobs-line-strong);
  border-radius: var(--gc-radius-card);
  background: var(--jobs-panel);
  /* Der Leerzustand ist die einzige Fläche im Ergebnisbereich und muss sich
     ohne Nachbarkarten von der Leinwand abheben. */
  box-shadow: var(--gc-shadow-card);
  text-align: left;
}

.public-jobs .leerzustand[hidden],
.public-jobs .jobliste[hidden] {
  display: none !important;
}

.public-jobs .leerzustand__symbol {
  display: grid;
  width: 88px;
  height: 88px;
  border-radius: var(--gc-radius-card);
  place-items: center;
  background: var(--gc-dark);
  color: var(--gc-mint);
}

.public-jobs .leerzustand__symbol svg {
  width: 44px;
  height: 44px;
}

.public-jobs .leerzustand__inhalt {
  min-width: 0;
}

.public-jobs .leerzustand__titel {
  margin: 0;
  color: var(--jobs-text);
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.public-jobs .leerzustand__text {
  max-width: 58ch;
  margin: 10px 0 0;
  color: var(--jobs-text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

.public-jobs .leerzustand__aktionen {
  display: flex;
  margin-top: 24px;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.public-jobs .leerzustand__primär {
  min-height: 48px;
  padding-inline: 22px;
  border-radius: var(--gc-radius-pill);
  letter-spacing: 0;
  text-transform: none;
}

.public-jobs .leerzustand__sekundär {
  display: inline-flex;
  min-height: 44px;
  padding: 8px 2px;
  align-items: center;
  gap: 6px;
  border-radius: 5px;
  color: var(--jobs-text);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 180ms var(--public-ease);
}

.public-jobs .leerzustand__sekundär svg {
  width: 18px;
  height: 18px;
  transition: transform 180ms var(--public-ease);
}

.public-jobs .leerzustand__sekundär:hover {
  color: var(--gc-link);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .public-jobs .leerzustand__sekundär:hover svg {
    transform: translateX(4px);
  }
}

.public-jobs .leerzustand__sekundär:focus-visible {
  outline: 3px solid var(--public-focus);
  outline-offset: 3px;
}

.public-jobs #ergebnisse.ergebnisse--leer .sortierung {
  display: none;
}

.public-jobs #ergebnisse.ergebnisse--leer > .band--hell {
  padding-block: clamp(36px, 5vw, 58px) clamp(72px, 8vw, 108px);
}

/* Arbeitgeber-Abschluss --------------------------------------------- */

.public-jobs .band[aria-labelledby="arbeitgeber-abschluss-titel"] {
  padding: clamp(48px, 6vw, 76px) var(--gutter) clamp(76px, 9vw, 120px);
  background: var(--jobs-canvas);
}

.public-jobs .abschluss-arbeitgeber {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: calc(var(--breite) - var(--gutter) - var(--gutter));
  min-height: 230px;
  padding: clamp(32px, 5vw, 58px);
  overflow: hidden;
  border-radius: var(--gc-radius-feature);
  background:
    linear-gradient(90deg, rgb(var(--gc-schleier-anker) / 1) 0%, rgb(var(--gc-schleier-anker) / 0.97) 52%, rgb(var(--gc-schleier-anker) / 0.56) 100%),
    url("../img/abschluss-cta.jpg") center right / cover no-repeat;
  color: var(--gc-on-dark);
}

/* NACHTRAG 3, PUNKT 2: DER RING BRINGT AUCH HIER SEINE KANTE SELBST MIT.
   ---------------------------------------------------------------------
   Der Schleier über abschluss-cta.jpg läuft von voll deckend links auf
   0,56 rechts. Genau dort steht der Knopf „Stelle schalten". Der Ring aus
   --fokus-dunkel hält gegen die häufigste Nachbarfarbe 3,98:1, auf der
   hellsten Stelle desselben Verlaufs aber nur 2,98:1 (4 von 157 Strahlen
   unter 3:1, gemessen mit echtem Tastaturfokus und Bildpaar). Der Wert
   ist nicht steuerbar: er hängt daran, wie hell das Foto an dieser Stelle
   ist, und er ist zwischen zwei Läufen zwischen 3,60 und 3,98 gewandert.

   Dieselbe Lösung wie beim Merkknopf: der Ring rückt ohne Versatz an den
   Knopf und bekommt außen einen deckenden Hof in der Ankerfarbe des
   Schleiers. Innen liegt damit die Knopffläche --gc-action (5,57:1),
   außen der Hof rgb(23 59 43) (9,58:1), beides unabhängig vom Foto. */
.public-jobs .abschluss-arbeitgeber .btn:focus-visible {
  outline-offset: 0;
  box-shadow:
    0 0 0 12px rgb(var(--gc-schleier-anker)),
    var(--gc-shadow-action);
}

.public-jobs .abschluss-arbeitgeber::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(120deg, transparent 45%, color-mix(in srgb, var(--gc-accent) 10%, transparent));
  content: "";
  pointer-events: none;
}

.public-jobs .abschluss-arbeitgeber > div {
  min-width: 0;
}

.public-jobs .abschluss-arbeitgeber h2 {
  max-width: 16ch;
  color: var(--gc-on-dark);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.public-jobs .abschluss-arbeitgeber p {
  max-width: 58ch;
  margin-top: 6px;
  color: var(--gc-on-dark-soft);
}

.public-jobs .abschluss-arbeitgeber .btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 54px;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-action);
  color: var(--gc-action-ink);
  letter-spacing: 0;
}

.public-jobs .abschluss-arbeitgeber .btn:hover {
  background: var(--gc-action-hover);
  color: var(--gc-action-ink);
}

/* Mittlere Breiten --------------------------------------------------- */

/* R1-W1-K, 11.09.2026, nachgezogen am 25.09.2026: Die Mindestbreiten von
   Branche, Start und Umkreis entscheiden den Umbruch. Ein erzwungenes
   Zusammenbleiben ließ bei etwa 1000 CSS-Pixeln Start über Umkreis malen. */
@media (min-width: 1100px) {
  .public-jobs .jobsuche__leistenfilter {
    flex-wrap: wrap;
  }

  .public-jobs .jobsuche__leistenfilter > :is(.segmentwahl, .jobsuche__knopf) {
    flex-shrink: 0;
  }

  .public-jobs .jobsuche__leistenfilter > .leistenfilter {
    flex: 0 1 210px;
    min-width: 0;
  }

  .public-jobs .leistenfilter__summary {
    max-width: 100%;
  }

  .public-jobs .leistenfilter__summarytext {
    min-width: 0;
  }

  .public-jobs .jobsuche__selectfeld:not(.jobsuche__radiusfeld) {
    flex: 0 1 160px;
  }

  .public-jobs .jobsuche__selectfeld :is(.auswahlfeld, select) {
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  .public-jobs .jobsuche__radiusfeld {
    flex: 1 1 240px;
    min-width: 230px;
  }
}

@media (max-width: 1099px) and (min-width: 768px) {
  /* Zwischenstufe nach Vorgabe: die zwei Felder bleiben nebeneinander, der
     Knopf bekommt eine eigene Zeile, und der Umkreis verliert den
     Rechtsdrall, weil die Zeile ohnehin umbricht. */
  .public-jobs .jobsuche__zeile {
    flex-wrap: wrap;
  }

  .public-jobs .jobsuche__senden {
    flex: 1 0 100%;
    width: 100%;
  }

  .public-jobs .jobsuche__radiusfeld {
    margin-left: 0;
  }

  .public-jobs .jobliste .stellenkarte__text {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas:
      "head title"
      "head company"
      "sector location"
      ". facts"
      ". salary"
      ". summary";
    gap: 6px 20px;
  }

  /* R1-W1-K5: „online seit“ mit Tabellenziffern braucht mehr als 120px.
     Nur in dieser Listenspur darf das Datum an Leerzeichen umbrechen. */
  .public-jobs .jobliste[data-ansicht="liste"] .stellenkarte__kopf .stellenkarte__ab {
    max-width: 100%;
    white-space: normal;
  }

  .public-jobs .jobliste .stellenkarte__fakten {
    margin-top: 8px;
  }

  .public-jobs .jobliste .beschreibung__anriss {
    margin-top: 8px;
  }
}

/* Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  .public-jobs #ergebnisse .ansichtsleiste {
    display: none;
  }

  .public-jobs {
    /* Die Leiste klebt am Telefon nicht mehr, deshalb braucht der
       Sprungabstand sie auch nicht mehr einzurechnen. */
    --jobkopf-h: 0px;
  }

  /* W20: Die neue Leiste ist am Telefon rund 405px hoch, fast die halbe
     Bildhöhe. Als klebende Leiste wäre sie kein Werkzeug mehr, sondern eine
     Wand. Sie scrollt hier deshalb mit; am Rechner bleibt sie bei 171px und
     klebt weiter. */
  .public-jobs .jobkopf {
    position: static;
    box-shadow: none;
  }

  /* D6-N2 Punkt 5, 18.09.2026: 10px statt 12px, Teil der Verdichtung
     gegen den Entwurf (Filter 448,2px statt 66px, BERICHT.md Teil A -
     die Zeilenhöhe von 5 echten, nicht entfernbaren Feldern/Reglern
     bleibt weit über dem Entwurfswert, siehe LIEFERUNG.md). */
  .public-jobs .jobkopf__inner {
    padding-block: 10px;
  }

  .public-jobs .jobsuche,
  .public-jobs .leistenfilter {
    position: static;
  }

  /* D6-N2 Punkt 5: der leere Hinweis-Wrapper (ortsland-hinweis, per JS nur
     bei Bedarf sichtbar) nahm als Flex-Kind IMMER zwei 10px-Gaps ein,
     obwohl er im hidden-Zustand 0px eigene Höhe hat. :has() blendet ihn
     nur dann aus, JS entfernt "hidden" bei Bedarf selbst wieder, die
     Regel greift dann automatisch nicht mehr (kein JS-Eingriff nötig). */
  .public-jobs .jobsuche > div:has(> .ortsland-hinweis[hidden]) {
    display: none;
  }

  /* Unter 768px steht alles untereinander. Die Feldhöhe fällt von 66 auf
     58px und die Schrift auf glatte 16px: darunter zoomt iOS beim Antippen
     in das Feld hinein. */
  .public-jobs .jobsuche {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border-radius: 0;
  }

  .public-jobs .jobsuche__zeile {
    flex-direction: column;
    gap: 10px;
  }

  .public-jobs .jobsuche__feld,
  .public-jobs .jobsuche__feld--ort {
    flex: 1 1 auto;
  }

  .public-jobs .jobsuche__feld .eingabe {
    height: 58px;
    min-height: 58px;
    padding-left: 50px;
    font-size: 16px;
  }

  /* app.css blendet das Symbol unter 640px aus, weil im alten, schmalen
     Feld sonst kein Platz für den Platzhaltertext blieb. Das Feld ist jetzt
     volle Breite; das Symbol bleibt. */
  .public-jobs .jobsuche__feld .feld__ico {
    display: block;
    left: 18px;
  }

  .public-jobs .jobsuche__senden {
    width: 100%;
    height: 58px;
    min-height: 58px;
  }

  .public-jobs .jobsuche__leistenfilter {
    column-gap: 16px;
    row-gap: 12px;
  }

  /* NEU (UI-04, 18.09.2026), gemessen mit design05-start-browser.mjs bei
     390 und 320px: „Filter verfeinern" und der Assistenten-Anker brechen bei
     dieser Breite in zwei Zeilen um, der Anker steht dadurch als unterstes
     Element direkt vor dem dunklen Band .ergebnis__steuerung. Gemessen nur
     1px Abstand zwischen Linkkante und dunklem Band; der Fokusring lag
     deshalb zu 45 Prozent auf dunklem Grund statt auf --gc-canvas (Befund:
     "jeder Fokusstopp hält 3:1 gegen seinen Grund", Ring 1,72:1 statt 3:1).
     20px zusätzlicher Abstand unten schaffen die nötige Klarheit, ohne die
     obere Verdichtung aus .jobkopf__inner (padding-block: 10px, D6-N2)
     anzutasten. */
  .public-jobs .jobsuche__filterzeile {
    margin-bottom: 20px;
  }

  /* Die Segmentleiste bleibt eine Zeile und wird seitlich geschoben. Ein
     Umbruch in zwei Reihen ließe die Pillen wie zwei Gruppen aussehen. */
  .public-jobs .segmentwahl {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    /* Die Scrollleiste ist oben bewusst ausgeblendet. Dadurch sah die
       angeschnittene letzte Pille wie ein Textfehler aus ("Ausbi...") statt
       wie ein Hinweis. Der weiche rechte Rand sagt: hier geht es weiter.
       Kein calc(), weil der Minifizierer daran schon einmal gescheitert ist.
       Am Ende der Spur bleibt der letzte Rand weich; das ist der Preis für
       eine Lösung ohne JavaScript. */
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px);
    mask-image: linear-gradient(to left, transparent 0, #000 28px);
  }

  .public-jobs .segmentwahl::-webkit-scrollbar {
    display: none;
  }

  /* Codex-Durchgang 108, Befund 3: die Ortsvorschläge liegen auf Mobil als
     schwebende Liste genau über dem Knopf "Jobs finden", der direkt unter
     dem Ortsfeld steht. Der erste Tipp traf den Vorschlag statt den Knopf.
     Unter 768 Pixeln hängt die Liste deshalb im Fluss zwischen Feld und
     Knopf; der Knopf rückt nach unten, solange Vorschläge offen sind.
     supabase-public.js setzt die Klasse und hängt die Liste um. */
  .public-jobs .ortsliste--im-fluss {
    position: static;
    width: 100%;
    max-height: 240px;
    margin: 0;
    box-shadow: none;
  }

  .public-jobs .segmentwahl__spur {
    width: max-content;
  }

  .public-jobs .jobsuche__radiusfeld {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
  }

  .public-jobs .radiussteuerung--leiste {
    width: 100%;
  }

  .public-jobs .radiussteuerung--leiste .radiussteuerung__regler {
    flex: 1 1 auto;
    width: auto;
  }

  .public-jobs .ergebnis__kopf {
    gap: 12px;
  }

  .public-jobs .treffer {
    font-size: 1.0625rem;
  }

  .public-jobs .treffer__umkreis {
    margin-left: 0;
  }

  .public-jobs .sortierung {
    margin-left: 0;
  }

  /* Codex-Durchgang 110, Befund 1: `top: calc(100% + 1px)` bezog sich auf
     den Anfangs-Umschließer (das Fenster, 844 px), weil kein Vorfahr
     positioniert war. Das Menü öffnete bei 855 px, unter dem Bildschirmrand,
     null Einträge sichtbar (gemessen 03.09.2026). Jetzt ist die Filterzeile
     der Bezug: das Menü hängt in voller Breite direkt unter ihr. */
  .public-jobs .jobsuche__leistenfilter {
    position: relative;
  }

  .public-jobs .leistenfilter__panel {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    width: 100%;
    /* Codex-Durchgang 111: die Desktop-Regel `min-width: 380px` schlug die
       100 % (350 px). Das Menü ragte 10 px über den rechten Rand, die Seite
       wurde 400 px breit und ließ sich waagerecht schieben. */
    min-width: 0;
    /* Codex-Durchgang 108, Befund 2: die frühere zweite Zeile rechnete
       "100dvh - Kopf - 100% - 1px". Das 100% bezog sich auf den umgebenden
       Block, der auf Mobil die ganze Seite ist; die Rechnung wurde negativ,
       der Browser rundete auf 0, und das Menü war 34 Pixel hoch bei 441
       Pixeln Inhalt. Gemessen am 03.09.2026. Jetzt ein fester Abzug für
       Kopf und Suchleiste, ohne Prozentwert. */
    max-height: 60vh;
    max-height: min(60vh, calc(100dvh - var(--kopf-h-mobil) - 140px));
    overflow-y: auto;
    padding: 16px var(--gc-gutter);
    border-radius: 0 0 var(--gc-radius-card) var(--gc-radius-card);
  }

  .public-jobs .leistenfilter__liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-jobs .leistenfilter__abschluss {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .public-jobs .leistenfilter__senden {
    width: 100%;
  }

  /* W20: Die alten Regeln machten aus beiden Knöpfen 52px große Quadrate
     mit versteckter Beschriftung. In der neuen Leiste liegt der Knopf über
     die volle Breite und der Assistent ist ein Textlink; beides braucht
     seine Beschriftung. */
  .public-jobs .ergebnis__steuerung {
    /* Auch mobil beginnt hier die Seite, deshalb bleibt die Anlaufstrecke
       deutlich größer als vorher, nur eben telefongerecht. */
    padding-block: 64px 24px;
  }

  .public-jobs .ergebnis__aufmacher {
    display: block;
  }

  .public-jobs .ergebnis__unterzeile {
    display: block;
    margin-top: 0;
  }

  .public-jobs .ergebnis__titel {
    font-size: clamp(2.3rem, 10vw, 2.9rem);
    line-height: 1.02;
    hyphens: none;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  .public-jobs .ergebnis__einordnung {
    margin-top: 12px;
    /* W2 (19.09.2026, Patric): Fund aus design05-start-browser.mjs,
       Kontrastfehler bei 390 und 320px: diese mobile Regel setzte
       weiterhin --gc-on-dark-soft (helle Schrift) und überschrieb damit
       die jetzt helle Fläche der Basisregel oben (--gc-ink-soft),
       1,00:1 statt 4,5:1. Eigene Farbangabe hier entfernt, die Basis-
       regel gilt jetzt auch mobil. */
    font-size: 1rem;
  }

  .public-jobs .ergebnis__kopf {
    display: grid;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
  }

  .public-jobs .treffer {
    min-height: 0;
  }

  .public-jobs .sortierung {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .public-jobs .sortierung__titel {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .public-jobs #ergebnisse > .band--hell {
    padding-block: 24px 72px;
  }

  .public-jobs .leerzustand {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
    padding: 26px 22px;
    gap: 18px;
  }

  .public-jobs .leerzustand__symbol {
    width: 64px;
    height: 64px;
    border-radius: 12px;
  }

  .public-jobs .leerzustand__symbol svg {
    width: 34px;
    height: 34px;
  }

  .public-jobs .leerzustand__text {
    font-size: 0.95rem;
  }

  .public-jobs .leerzustand__aktionen {
    display: grid;
    margin-top: 20px;
    gap: 8px;
  }

  .public-jobs .leerzustand__primär,
  .public-jobs .leerzustand__sekundär {
    width: 100%;
    justify-content: center;
  }

  .public-jobs .jobliste .stellenkarte__körper {
    padding: 20px;
  }

  .public-jobs .jobliste .stellenkarte__medien + .stellenkarte__text {
    margin-top: 12px;
  }

  /* Die Logo- beziehungsweise Monogramm-Kachel hängt mit bottom: -12px unter der
     Medienkante. Bei 12px Abstand bleibt der Textfläche darunter genau 0px Luft,
     Kachelunterkante und Textoberkante liegen exakt aufeinander. Das trägt heute,
     kippt aber bei jeder Änderung an einem der beiden Werte. 24px sind der
     Überhang plus derselbe Abstand, den eine Karte ohne Kachel bekommt. */
  .public-jobs .jobliste .stellenkarte__medien:has(> :is(.stellenkarte__logo, .stellenkarte__monogramm)) + .stellenkarte__text {
    margin-top: 24px;
  }

  .public-jobs .jobliste .stellenkarte__text {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "sector"
      "title"
      "company"
      "location"
      "facts"
      "salary"
      "summary";
    gap: 7px;
  }

  .public-jobs .jobliste .stellenkarte__kopf {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 3px;
  }

  /* D6-N1 Punkt 4: mobiler Kartentitel auf Entwurfsgroesse (22px/29,7px
     statt 18,56px/22,6432px). */
  .public-jobs .jobliste .stellenkarte__titel {
    font-size: 1.375rem;
    line-height: 1.35;
  }

  .public-jobs .jobliste .stellenkarte__fakten,
  .public-jobs .jobliste .stellenkarte__gehalt,
  .public-jobs .jobliste .beschreibung__anriss {
    margin-top: 8px;
  }

  .public-jobs .band[aria-labelledby="arbeitgeber-abschluss-titel"] {
    padding-inline: var(--gc-gutter);
  }

  .public-jobs .abschluss-arbeitgeber {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
    min-height: 300px;
    background:
      linear-gradient(180deg, rgb(var(--gc-schleier-anker) / 0.98) 0%, rgb(var(--gc-schleier-anker) / 0.88) 62%, rgb(var(--gc-schleier-anker) / 0.68) 100%),
      url("../img/abschluss-cta.jpg") center / cover no-repeat;
  }

  .public-jobs .abschluss-arbeitgeber .btn {
    width: 100%;
  }
}

@media (max-width: 359px) {
  .public-jobs .jobkopf__inner {
    padding-inline: 12px;
  }

  .public-jobs .sortierung {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-jobs .sortierung__knopf {
    width: 100%;
  }

  .public-jobs .radiussteuerung--leiste {
    grid-template-columns: minmax(62px, 1fr) 90px;
    gap: 6px;
  }

  .public-jobs .assistent .radiussteuerung--assistent {
    grid-template-columns: minmax(0, 1fr) 96px;
    column-gap: 8px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .public-jobs .jobsuche__senden,
  .public-jobs .jobsuche__knopf,
  .public-jobs .leerzustand__sekundär,
  .public-jobs .leerzustand__sekundär svg,
  .public-jobs .jobliste .stellenkarte__körper {
    transition: none;
  }

  .public-jobs .jobsuche__senden:active,
  .public-jobs .jobsuche__knopf:active,
  .public-jobs .leerzustand__sekundär:hover svg {
    transform: none;
  }
}

@media print {
  .public-jobs .jobkopf,
  .public-jobs .sortierung,
  .public-jobs .abschluss-arbeitgeber {
    display: none !important;
  }

  .public-jobs .jobseite {
    padding-top: 0;
  }
}

/* =====================================================================
   FAVORITEN-BANNER
   Die bezahlte Zusatzsichtbarkeit der Pakete Premium und Exzellenz.
   .spur, .spur > * und .spur__balken stehen in assets/app.css und
   werden hier nicht wiederholt. Hier steht nur, was die Jobbörse
   abweichend braucht.
   ===================================================================== */
.public-jobs #favoriten-banner {
  padding-block: clamp(32px, 4vw, 52px);
}

.public-jobs .favoriten__kopf {
  margin-bottom: var(--sp-4);
}

.public-jobs .favoriten__spur {
  scroll-behavior: smooth;
}

/* =====================================================================
   W18.1  DER FAVORITEN-SLIDER IM QUERFORMAT, ÜBER DIE VOLLE BREITE
   ---------------------------------------------------------------------
   Vorbild ist der Premium-Slider der bestehenden green-careers.de:
   flache Karte im Verhältnis 4 zu 2,5, das Foto füllt die ganze Karte,
   Titel und Betrieb stehen darauf über einem dunklen Verlauf, das Logo
   sitzt unten links, die Marken oben.
   Frederik hat genau diese Ansicht im Video als Vorlage benannt.

   Die Spur läuft bis an den Fensterrand, damit die nächste Karte
   angeschnitten sichtbar bleibt. Das Innenpolster hält die erste Karte
   bündig zur Inhaltskante: max() nimmt bei schmalen Fenstern den
   Gutter, bei breiten den halben Überhang zur Containerbreite.
   ===================================================================== */
.public-jobs .favoriten__spur {
  padding-inline: max(var(--gutter), calc((100% - var(--gc-container-wide)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--gc-container-wide)) / 2));
  padding-block: 4px 10px;
  margin-inline: 0;
}

/* Desktop: 480 bis 520 px breite Bildkarten. Auf schmalen Fenstern
   bleibt beidseits der Seitenrand frei; die Spur selbst reicht weiter. */
.public-jobs .favoriten__spur .stellenkarte--kompakt,
.public-jobs .favoriten__spur .stellenkarte--favorit {
  flex: 0 0 min(var(--favoriten-kartenbreite), calc(100vw - 2 * var(--gutter)));
  max-width: calc(100vw - 2 * var(--gutter));
}

@media (min-width: 900px) {
  .public-jobs .favoriten__spur .stellenkarte--kompakt {
    flex: 0 0 min(var(--favoriten-kartenbreite), calc(100vw - 2 * var(--gutter)));
    max-width: calc(100vw - 2 * var(--gutter));
  }
}

/* Der Kartenkörper wird zur Bildfläche. Das Gitter aus der Listenansicht
   wird bewusst aufgelöst: Medien und Text liegen jetzt übereinander.
   Damit ist er keine helle Insel mehr, auch wenn assets/app.css:491
   `.stellenkarte__körper` in dieser Liste führt: seine Fläche ist hier
   --gc-dark. Der Fokusring des Kartenlinks hielt darauf 1,72:1
   (Nachtrag 1, Abschnitt 5 des Reviews). */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper {
  --fokus: var(--fokus-dunkel);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 2.5;
  min-height: var(--favoriten-kartenhöhe);
  padding: 0;
  overflow: hidden;
  border-radius: var(--gc-radius-card);
  background: var(--gc-dark);
  box-shadow: var(--gc-shadow-card-strong);
}

/* Die Höhenangleichung der Listenkarten gilt hier nicht mehr. */
@media (min-width: 768px) {
  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper {
    grid-template-rows: none;
    align-content: initial;
  }
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper:has(.stellenkarte__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm)) {
  row-gap: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__medien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__foto,
.public-jobs .favoriten__spur .stellenkarte--favorit .demo-medienplatzhalter {
  width: 100%;
  height: 100%;
  max-height: none;
  padding-left: 0;
  border-radius: 0;
  object-fit: cover;
}

/* Der Platzhalter ist hier nur Kartenhintergrund. Betriebsname und Branche
   stehen bereits im Karteninhalt und dürfen nicht darunter durchscheinen. */
.public-jobs .favoriten__spur .stellenkarte--favorit .demo-medienplatzhalter strong,
.public-jobs .favoriten__spur .stellenkarte--favorit .demo-medienplatzhalter small {
  display: none;
}

/* Der Verlauf trägt die Schrift. Werte wie beim Vorbild: oben fast klar,
   unten deckend genug, damit Weiß auf jedem Foto sicher lesbar bleibt. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__medien::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(var(--gc-schleier-tief) / 0.06) 0%,
    rgb(var(--gc-schleier-tief) / 0.24) 38%,
    rgb(var(--gc-schleier-tief) / 0.72) 66%,
    rgb(var(--gc-schleier-tief) / 0.94) 100%
  );
  pointer-events: none;
}

/* Eigene Plakate nutzen nur den freien Bereich zwischen Metadaten und Text.
   Subgrid übernimmt die tatsächliche Texthöhe ohne Messung per JavaScript.
   Bühne, Blur und Verlauf behalten die vollständige bisherige Bildfläche. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper:has(.stellenkarte__bildbuehne) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__medien:has(.stellenkarte__bildbuehne) {
  position: relative;
  grid-area: 1 / 1 / 3 / 2;
  display: grid;
  grid-template-rows: subgrid;
  min-height: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__medien > .stellenkarte__bildbuehne {
  grid-area: 1 / 1 / 3 / 2;
  display: grid;
  grid-template-rows: subgrid;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__bildbuehne > img[data-titelbild-ebene="vorn"] {
  /* Breite Bilder: bündig oben, links und rechts, 8px Abstand zum Text.
     Ort und Premium liegen als Etiketten auf dem Bild. */
  position: relative;
  inset: auto;
  grid-area: 1 / 1 / 2 / 2;
  min-height: 0;
  height: calc(100% - 8px);
  object-position: center top;
  z-index: 1;
}

/* Hohe Bilder (Messung in supabase-public.js) füllen die ganze Kartenhöhe.
   Der Verlauf liegt dann wie bei Fotokarten über dem unteren Bildteil.
   center top: Grenzformate liegen oben, links und rechts an statt zu schweben. */
.public-jobs .favoriten__spur .stellenkarte--favorit[data-titelbild-form="hoch"] .stellenkarte__bildbuehne > img[data-titelbild-ebene="vorn"] {
  grid-area: 1 / 1 / 3 / 2;
  height: 100%;
  object-position: center top;
  z-index: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__medien:has(.stellenkarte__bildbuehne)::after {
  z-index: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper:has(.stellenkarte__bildbuehne) > .stellenkarte__text {
  grid-area: 2 / 1 / 3 / 2;
}

/* Logo unten links auf dem Bild, auf heller Fläche wie im Vorbild. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__logo,
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__monogramm {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  width: 76px;
  height: 76px;
  padding: 7px;
  border-radius: 14px;
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-small);
}

/* Der Textblock liegt auf dem Bild, rechts neben dem Logo. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__text {
  position: static;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0 16px 18px calc(76px + 26px);
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__titel {
  font-size: 1.0625rem;
  line-height: 1.24;
  color: var(--gc-on-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__titel a {
  color: inherit;
}

/* R3: Der Favoritentitel liegt auf einem Foto. Ein deckender Hof trägt
   den Ring auf beiden Seiten, auch neben dem helleren Fotoverlauf.
   Die Karten der Ergebnisliste behalten ihren Ring auf weißer Fläche. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__titel:focus-within {
  background: var(--gc-dark);
  box-shadow: 0 0 0 12px var(--gc-dark);
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__titel a:focus-visible {
  outline: 3px solid var(--fokus-dunkel);
  outline-offset: 0;
}

/* WSA: Das Gehalt braucht unabhängig vom Foto eine deckende CI-Fläche.
   --gc-on-dark auf --gc-dark hält 10,96:1, auch auf hellen Fotos. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__gehalt {
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 3px 8px;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-dark);
  color: var(--gc-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__firma {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--gc-on-dark-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* W18.4: Ort und Postleitzahl stehen oben neben der Paketmarke, nicht mehr
   unten im Textblock. Unten bleiben Logo, Titel und Betrieb, drei Dinge statt
   vier. Der Verlauf ist oben nur schwach, deshalb trägt die Zeile eine eigene
   dunkle Fläche; ohne sie steht Weiß auf hellen Fotos ungeschützt. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__ort {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 148px);
  margin: 0;
  padding: 3px 9px 3px 7px;
  border-radius: 8px;
  background: rgb(var(--gc-schleier-tief) / 0.62);
  color: var(--gc-on-dark);
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__ort svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__ort svg {
  color: var(--gc-accent);
}

/* Die Datumszeile wandert nach oben links, die Marken nach oben rechts.
   Der Kopf selbst wird zur Leiste über dem Bild. */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__kopf {
  position: absolute;
  inset: 14px 14px auto 14px;
  width: auto;
  z-index: 2;
  display: flex;
  min-height: 26px;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__ab {
  order: -1;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--gc-action);
  color: var(--gc-action-ink);
  /* D2: stand auf 0,6875rem (11 px), Mindestgrad ist 12 px. */
  font-size: 0.75rem;
  font-weight: 700;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .favoriten__marke {
  display: none;
}

.public-jobs .favoriten__spur .stellenkarte--favorit .auszeichnung {
  background: #fff8e8;
  box-shadow: var(--gc-shadow-small);
}

/* R1-W1: die Seitenschicht darf die beiden Paketfarben nicht übermalen. */
.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte[data-package="premium"] .auszeichnung {
  background: var(--gc-badge-premium);
  border-color: var(--gc-badge-premium);
  color: #000000;
}

.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte[data-package="exzellenz"] .auszeichnung {
  background: var(--gc-badge-exzellenz);
  border-color: var(--gc-badge-exzellenz);
  color: #000000;
}

.public-jobs :is(.jobliste, .favoriten__spur) .stellenkarte:is([data-package="premium"], [data-package="exzellenz"]) .auszeichnung svg {
  color: currentColor;
}

/* Auftrag 119, Interim nach Entscheidung 3A: Datum und Paket bleiben
   einzeilig. Zurücknehmen, sobald LR-14 die Paketnamen entfernt.
   D2 (17.09.2026): Der Grad stand auf 0,625rem (10 px) und war damit der
   kleinste Text der ganzen Seite. Design 05 setzt den Mindestgrad auf
   12 px; der Platz kommt aus der Laufweite und dem Innenabstand, die
   Zeile bleibt einzeilig (gemessen bei 320, 390 und 1280 px). */
.public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__ab,
.public-jobs .favoriten__spur .stellenkarte--favorit .auszeichnung {
  font-size: 0.75rem;
  letter-spacing: 0;
  padding-inline: 6px;
}

/* Beim Überfahren hebt sich die Karte. Siehe auch W18.3. */
@media (hover: hover) and (pointer: fine) {
  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper {
    transition:
      transform 350ms var(--gc-ease),
      box-shadow 350ms var(--gc-ease);
  }

  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper:hover {
    transform: translateY(-4px);
    box-shadow: var(--gc-shadow-float);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper {
    transition: none;
  }

  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__körper:hover {
    transform: none;
  }
}

/* app.css nimmt kompakten Karten im @media (min-width: 900px)-Block für
   .stellenkarte--kompakt die feste Breite wieder weg. Auf der Startseite
   fängt das die Grid-Umschaltung der Premium-Spur ab, die es hier nicht
   gibt. Ohne diese Regel würden die Karten ab 900px inhaltsbreit und
   scroll-snap hätte nichts zum Einrasten. */
@media (min-width: 900px) {
  .public-jobs .favoriten__spur .stellenkarte--kompakt {
    flex: 0 0 min(var(--favoriten-kartenbreite), calc(100vw - 2 * var(--gutter)));
    max-width: calc(100vw - 2 * var(--gutter));
  }
}

/* Browsertest 121: kompakte Pfeilnavigation, auf allen Breiten eine Reihe. */
.public-jobs .favoriten__navigation {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.public-jobs .favoriten__navigation[hidden] {
  display: none;
}

.public-jobs .favoriten__pfeil {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--gc-line-dark-ui);
  border-radius: var(--r-pill);
  color: var(--gc-on-dark);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-jobs .favoriten__pfeil svg {
  width: 24px;
  height: 24px;
}

.public-jobs .favoriten__pfeil:not([aria-disabled="true"]):hover {
  border-color: var(--gc-on-dark);
  background: var(--gc-line-dark);
}

.public-jobs .favoriten__pfeil:focus-visible {
  outline: 3px solid var(--gc-mint);
  outline-offset: 3px;
}

.public-jobs .favoriten__pfeil[aria-disabled="true"] {
  color: var(--gc-on-dark-faint);
  border-color: var(--gc-line-dark-strong);
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .public-jobs .favoriten__spur {
    scroll-behavior: auto;
  }
}

/* Sichtbare Kennzeichnung als Favorit. Das Wort ist die Einzahl der
   Bannerüberschrift, es kommt keine neue Sprachregelung dazu. Der
   Rahmen setzt die Karte zusätzlich gegen die Trefferliste ab. */
.public-jobs .favoriten__marke {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--marker-licht);
  /* --marker-licht löst über die Markenebene auf --gc-mint und damit seit
     Design 05 auf den Akzent #c6f17b auf. Dessen Tinte ist --gc-accent-ink
     (11,43:1). */
  color: var(--gc-accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.public-jobs .stellenkarte--favorit .stellenkarte__körper {
  border-color: var(--marker-licht);
}

/* W18.1: Die Regeln der alten Hochformat-Karte (Bild 140 px hoch, Text
   darunter auf Weiß) sind hier entfallen. Die Karte ist jetzt eine
   Bildfläche im Querformat; alles dazu steht weiter oben im Abschnitt
   "DER FAVORITEN-SLIDER IM QUERFORMAT". Der früher nötige Ausgleich
   für die hängende Logokachel entfällt mit ihr. */

/* W17: Ansichtsumschalter und zweispaltiges Treffer-Raster. */
.public-jobs .ansichtsleiste {
  display: flex;
  margin: 0 0 var(--sp-4);
  justify-content: flex-end;
}

.public-jobs .ansichtsumschalter {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  /* D2 (U2 aus dem D1-Review): Der Ansichtsumschalter ist ein echtes
     Bedienelement und bekommt die UI-Linie statt des Dekortons. */
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
}

.public-jobs .ansichtsumschalter__knopf {
  appearance: none;
  display: inline-flex;
  min-width: 92px;
  min-height: 44px;
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--gc-radius-sm);
  background: transparent;
  color: var(--gc-ink-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  transition:
    border-color 180ms var(--gc-ease),
    background-color 180ms var(--gc-ease),
    color 180ms var(--gc-ease);
}

.public-jobs .ansichtsumschalter__knopf svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.public-jobs .ansichtsumschalter__knopf:hover {
  background: var(--gc-canvas-2);
  color: var(--gc-ink);
}

.public-jobs .ansichtsumschalter__knopf[aria-pressed="true"] {
  border-color: var(--gc-dark);
  background: var(--gc-dark);
  color: var(--gc-on-dark);
}

.public-jobs .ansichtsumschalter__knopf:focus-visible {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 2px;
}

.public-jobs #ergebnisse.ergebnisse--leer .ansichtsleiste {
  display: none;
}

/* Ohne gespeicherten Zustand ist das Raster die progressive Standardansicht.
   data-ansicht="liste" lässt die bestehende Listenfassung vollständig greifen. */
.public-jobs .jobliste:not([data-ansicht="liste"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte {
  display: flex;
  width: auto;
}

/* D6-N1 Punkt 4 und Punkt 8: Radius und Schatten der Jobkarte seitenscoped
   auf die Entwurfswerte zurückgenommen (Radius 18 -> 20, Rand
   rgb(216 226 208), Schatten deutlich flacher: rgba(32 77 39 / .063)
   0 3px statt 0 30px 70px). Die geteilten Tokens --gc-radius-card und
   --gc-shadow-card selbst bleiben unangetastet (Punkt 8 verbietet eine
   Streuänderung über alle 27 Seiten), hier stehen deshalb eigene
   Werte, keine Token-Änderung. */
.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  row-gap: var(--sp-4);
  overflow: visible;
  border: 1px solid rgb(216 226 208);
  border-radius: 20px;
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  box-shadow: 0 3px 0 rgb(32 77 39 / 0.063);
  transform: none;
  transition:
    border-color 180ms var(--gc-ease),
    box-shadow 180ms var(--gc-ease),
    transform 180ms var(--gc-ease);
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper:has(
  .stellenkarte__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm)
) {
  row-gap: calc(var(--sp-4) + var(--sp-3));
}

.public-jobs .jobliste:not([data-ansicht="liste"]) > .stellenkarte:last-child .stellenkarte__körper {
  border-bottom: 1px solid var(--gc-line);
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper:hover {
  border-color: var(--gc-line-ui);
  background: var(--gc-surface);
  /* D6-N1 Punkt 8: seitenscoped, siehe Begruendung an der Grundregel oben. */
  box-shadow: 0 10px 26px rgb(32 77 39 / 0.1);
}

/* W18.5: vorher feste 150 px Höhe. Bei rund 560 px Kartenbreite ergab das
   etwa 21 zu 9, das Motiv wurde oben und unten stark beschnitten. 16 zu 9
   zeigt das Bild fast vollständig. */
.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  /* D6-N1 Punkt 4/8: derselbe seitenscoped 20px-Radius wie die Karte
     selbst (vorher der geteilte Token --gc-radius-card, 18px). */
  border-radius: 20px 20px 0 0;
  background: var(--gc-dark);
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien > :is(
  .stellenkarte__foto,
  .platzhalter--betrieb,
  .demo-medienplatzhalter
) {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 20px 20px 0 0;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien + .stellenkarte__text,
.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien:has(
  > :is(.stellenkarte__logo, .stellenkarte__monogramm)
) + .stellenkarte__text {
  margin-top: 0;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "sector"
    "title"
    "company"
    "location"
    "facts"
    "salary"
    "summary";
  min-width: 0;
  padding: 0 22px 22px;
  align-content: start;
  gap: 7px;
}

/* R1-W1-K5: Ein echter Kopf statt display:contents trägt Datum links und
   Paket rechts. Die Branche folgt in ihrer eigenen, vollen Grid-Zeile. */
.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__kopf {
  display: flex;
  grid-area: head;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper .auszeichnung {
  position: static;
  margin-block: 0;
  margin-inline-end: 0;
  box-shadow: var(--gc-shadow-small);
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__branche {
  grid-area: sector;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__branche span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__ab {
  margin: 0;
  white-space: nowrap;
}

/* R1-W1-K4 bleibt erhalten: Bei 320px nutzt die Branche die volle Breite
   und bricht ausschließlich an normalen Wortgrenzen um. */
@media (max-width: 359px) {
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__branche {
    grid-column: 1 / -1;
    width: 100%;
  }

  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__branche span {
    overflow-wrap: normal;
    hyphens: manual;
  }

}

/* Alles ab dem Titel laeuft wieder über die volle Kartenbreite. */
.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__text > :not(.stellenkarte__branche):not(.stellenkarte__ab) {
  grid-column: 1 / -1;
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__titel a::after {
  border-radius: var(--gc-radius-card);
}

.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__fakten,
.public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__gehalt,
.public-jobs .jobliste:not([data-ansicht="liste"]) .beschreibung__anriss {
  margin-top: 8px;
}

@media (min-width: 768px) {
  /* D6-N1 Punkt 4: Spaltenabstand auf Entwurfsmass (17px statt 22px).
     Mit der neuen 1320px-Breite oben ergibt das die Entwurfs-Kartenbreite
     651,5px rechnerisch exakt. */
  .public-jobs .jobliste:not([data-ansicht="liste"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
  }

  /* W18.5: Auch ab 768 px gilt jetzt das Seitenverhältnis statt einer festen
     Höhe. Vorher deckelte 220 px das Bild bei rund 547 px Breite auf etwa
     21 zu 9. */
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
}

/* W2 (19.09.2026, Patric): drei Spalten nur bei ausreichend breitem Desktop,
   sonst bleiben es zwei (Regel oben, unverändert). Ab 1200px Ansichtsbreite
   ist der Gutter fest bei 48px (clamp(16px,4vw,48px), public-brand.css:201),
   die Inhaltsbreite wächst danach linear mit der Ansicht bis zur Deckelung
   bei 1320px (--gc-container-wide, public-brand.css:198). Bei 1280px
   Ansichtsbreite ergibt das 1280 - 2*48 = 1184px Inhaltsbreite; mit 17px
   Spaltenabstand macht das (1184 - 2*17) / 3 = 383,3px je Karte, mehr als
   die bereits produktiv bewährten 344,8px bei zwei Spalten und 768px
   (Kommentar oben). Im Browser bei 1280px und 1320px nachgemessen (siehe
   Lieferung), keine abgeschnittenen Titel oder überlaufenden Badges. */
@media (min-width: 1280px) {
  .public-jobs .jobliste:not([data-ansicht="liste"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
  }
}

/* D6-N1 Punkt 4/8: mobil hat der Entwurf einen flacheren Radius als
   Desktop (17 statt 20).
   D6-N2 Punkt 5, 18.09.2026: der Schatten-Teil dieses Kommentars war
   falsch und der Bau folgte ihm. Der Entwurf hat bei 390px DENSELBEN
   flachen Schatten wie Desktop (0 3px 0, rgba(32,77,39,.063),
   MESSWERTE.json jobs.mobile390.reference.card.shadow); "0 14px 34px"
   mit höherer Deckung (.1) war das Gegenteil von leiser, ein Codex-
   Befund (Bericht 148, Teil A) hat den Fehlstand nachgemessen. Jetzt der
   tatsächliche Entwurfswert, nur diese Karte, nicht die geteilten
   Tokens. */
@media (max-width: 767px) {
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper {
    border-radius: 17px;
    box-shadow: 0 3px 0 rgb(32 77 39 / 0.063);
  }

  /* D6-N2 Punkt 5: Bildhöhe auf Entwurfsmaß. 16/9 (Desktop-Formel) ergab
     bei 341px Breite 191,8px, der Entwurf zeigt 213,1px (Verhältnis
     ≈1,6, MESSWERTE.json jobs.mobile390.reference.image). 8/5 = 1,6
     rechnerisch exakt: 341 * 5 / 8 = 213,125px. Nur diese Breite, die
     Desktop-Regel oben (min-width:768px, 16/9) bleibt unverändert,
     dort trifft 649,5 x 365,3 bereits exakt (BERICHT.md Teil A). */
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien {
    aspect-ratio: 8 / 5;
  }

  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien,
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__medien > :is(
    .stellenkarte__foto,
    .platzhalter--betrieb,
    .demo-medienplatzhalter
  ) {
    border-radius: 17px 17px 0 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-jobs .ansichtsumschalter__knopf,
  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper {
    transition: none;
  }

  .public-jobs .jobliste:not([data-ansicht="liste"]) .stellenkarte__körper:hover {
    transform: none;
  }
}

@media print {
  .public-jobs .ansichtsleiste {
    display: none !important;
  }
}

/* Steht bewusst am Dateiende: der 767px-Block oben setzt overflow-x und
   width: max-content, und bei gleicher Spezifität gewinnt die spätere Regel.
   Codex-Durchgang 108, Befund 4: bei 390 Pixeln war die Segmentleiste 402
   Pixel breit bei 350 Platz, "Ausbildung" war abgeschnitten, und der weiche
   Rand galt als Hinweis, den niemand las. Unter 480 Pixeln bricht die
   Leiste in zwei Reihen um; die Pillen bleiben in einer gemeinsamen Spur,
   damit sie nicht wie zwei Gruppen wirken. Gemessen am 03.09.2026. */
@media (max-width: 479px) {
  .public-jobs .segmentwahl {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Codex-Durchgang 113: der Umbruch ergab vier Pillen oben und "Ausbildung"
     allein unten, die Pillen nur 32 px hoch. Jetzt ein Raster 3 plus 2 mit
     gleich breiten Feldern je Reihe und 44 px Zielhöhe; sechs Spalten, damit
     oben drei Felder je zwei und unten zwei Felder je drei Spalten füllen.
     Der Container bekommt die Kartenrundung: die Pillenrundung wäre bei zwei
     Reihen eine 48-px-Kurve, aus der die Eckpillen herausragen. */
  .public-jobs .segmentwahl__spur {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    border-radius: var(--gc-radius-card);
  }

  .public-jobs .segmentwahl__feld {
    grid-column: span 2;
    min-width: 0;
  }

  .public-jobs .segmentwahl__feld:nth-child(n + 4) {
    grid-column: span 3;
  }

  .public-jobs .segmentwahl__text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: var(--gc-radius-control);
  }
}

/* Auftrag 119, Befunde 3.6 bis 3.8: Systemfarben erhalten im Kontrastmodus
   Spur, Griff, Knopfform und Auswahl. Die Leiste braucht ihre Spezifität;
   Browser-Pseudoelemente bleiben nach Browserfamilie getrennt. */
@media (forced-colors: active) {
  .public-jobs .radiussteuerung__regler::-webkit-slider-runnable-track,
  .public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-webkit-slider-runnable-track {
    background: CanvasText;
  }

  .public-jobs .radiussteuerung__regler::-webkit-slider-thumb,
  .public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-webkit-slider-thumb {
    background: Highlight;
    border: 2px solid CanvasText;
  }

  .public-jobs .radiussteuerung__regler::-moz-range-track,
  .public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-moz-range-track {
    background: CanvasText;
  }

  .public-jobs .radiussteuerung__regler::-moz-range-thumb,
  .public-jobs .radiussteuerung--leiste .radiussteuerung__regler::-moz-range-thumb {
    background: Highlight;
    border: 2px solid CanvasText;
  }

  .public-jobs .radiussteuerung__zahl {
    border: 1px solid CanvasText;
  }

  .public-jobs .jobsuche__senden,
  .public-jobs .leistenfilter__senden,
  .public-jobs .favoriten__pfeil {
    border: 1px solid ButtonText;
  }

  .public-jobs .favoriten__pfeil {
    color: ButtonText;
    background: ButtonFace;
  }

  .public-jobs .favoriten__pfeil:not([aria-disabled="true"]):hover {
    border-color: ButtonText;
    background: ButtonFace;
  }

  .public-jobs .favoriten__pfeil[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }

  .public-jobs .favoriten__pfeil:focus-visible {
    outline-color: Highlight;
  }

  .public-jobs .segmentwahl__eingabe:checked + .segmentwahl__text {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  /* Der Fokus sitzt außen, die reine Auswahl innen. */
  .public-jobs .segmentwahl__eingabe:focus-visible + .segmentwahl__text {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* R5-W-FEEDBACK1: Datum und Badge teilen in der Liste dieselbe Startkante. */
.public-jobs .jobliste[data-ansicht="liste"] .stellenkarte__kopf {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.public-jobs .jobliste[data-ansicht="liste"] .stellenkarte__kopf .auszeichnung,
.public-jobs .jobliste[data-ansicht="liste"] .stellenkarte__kopf:not(:has(.auszeichnung))::after {
  flex: 0 0 auto;
  width: 112px;
  margin-inline-start: 0;
}

/* =====================================================================
   D2 · MERKLISTE (Design 05)
   ---------------------------------------------------------------------
   Der Merkknopf liegt als eigenes Bedienelement oben rechts auf jeder
   Stellenkarte. Er sitzt bewusst NICHT in .stellenkarte__medien: diese
   Ebene trägt aria-hidden="true" und wäre für Vorlesehilfen unsichtbar.

   Die Ansicht unten auf der Seite (#merkliste) zeichnet
   assets/js/merkliste.js aus localStorage. Ohne JavaScript bleibt der
   Hinweistext stehen.
   ===================================================================== */

.public-jobs .stellenkarte__körper {
  position: relative;
}

.public-jobs .merkknopf {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-surface);
  color: var(--gc-ink-muted);
  cursor: pointer;
  box-shadow: var(--gc-shadow-small);
  transition:
    color 180ms var(--gc-ease),
    border-color 180ms var(--gc-ease),
    transform 180ms var(--gc-ease);
}

.public-jobs .merkknopf svg {
  width: 20px;
  height: 20px;
}

.public-jobs .merkknopf:hover {
  border-color: var(--gc-action);
  color: var(--gc-green-deep);
}

.public-jobs .merkknopf[aria-pressed="true"] {
  border-color: var(--gc-action);
  color: var(--gc-green-deep);
}

/* NACHTRAG 2, PUNKT 3: DER RING BRINGT SEINE KANTE SELBST MIT.
   ---------------------------------------------------------------------
   Der Merkknopf sitzt auf dem Foto der Stellenkarte. Mit dem geerbten
   `outline-offset: 3px` (public-brand.css:404) lag der Ring vollständig
   im Spalt über dem Bild: innen wie außen war sein Nachbar das Foto, und
   der Kontrast wechselte mit jedem Motiv. Gemessen an allen vierzehn
   Knöpfen der Trefferliste, echter Tastaturfokus und Bildpaar: 1,00 bis
   2,91:1 nach außen, innen durchweg 1,44:1 gegen den eigenen 1-px-Rand.
   Verlangt sind 3:1 (WCAG 1.4.11). Ein Fokusring, dessen Kontrast vom
   Bildinhalt abhängt, ist keiner: die Betriebe laden ihre Fotos selbst
   hoch, der Wert ist nicht steuerbar.

   Der Ring rückt deshalb ohne Versatz auf die weiße Knopffläche und
   bekommt außen einen weißen Hof, der breiter ist als er selbst. Beide
   Nachbarn sind damit --gc-surface, unabhängig vom Foto:
   --fokus rgb(18 100 64) gegen #ffffff hält 7,18:1. Größe, Beschriftung
   und Verhalten des Knopfs bleiben unverändert; der Hof entsteht nur bei
   Tastaturfokus. Der kleine Grundschatten bleibt als zweite Lage
   erhalten, damit der Knopf im Fokus nicht flach wird. */
.public-jobs .merkknopf:focus-visible {
  outline-offset: 0;
  /* Nachtrag 3: Der eigene 1-px-Rand des Knopfs liegt genau dort, wo die
     innere Kante des Rings anliegt, und seine weiche Kante gab sieben von
     502 Nachbarproben mit 1,98 bis 2,14:1. Im Fokus tritt er hinter die
     Fläche zurück, damit der Ring innen wie außen dieselbe Farbe hat. */
  border-color: var(--gc-surface);
  box-shadow:
    0 0 0 12px var(--gc-surface),
    var(--gc-shadow-small);
}

@media (hover: hover) and (pointer: fine) {
  .public-jobs .merkknopf:hover {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-jobs .merkknopf:hover {
    transform: none;
  }
}

.public-jobs .merkliste__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 24px;
}

.public-jobs .merkliste__kopf h2 {
  margin: 12px 0 0;
}

.public-jobs .merkliste__anzahl {
  color: var(--gc-ink-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

.public-jobs .merkliste__leer {
  max-width: 62ch;
  margin: 0;
  color: var(--gc-ink-muted);
}

.public-jobs .merkliste__liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-jobs .merkzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 20px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
}

.public-jobs .merkzeile__text {
  flex: 1 1 240px;
  min-width: 0;
}

.public-jobs .merkzeile__titel {
  margin: 0;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.public-jobs .merkzeile__meta {
  margin: 4px 0 0;
  color: var(--gc-ink-muted);
  font-size: 0.875rem;
}

.public-jobs .merkzeile__weg {
  flex: 0 0 auto;
  min-height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-family: var(--gc-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.public-jobs .merkzeile__weg:hover {
  border-color: var(--gc-action);
  color: var(--gc-green-deep);
}

/* [hidden] gegen das eigene display, siehe public-home.css. */
.public-jobs .merkliste__liste[hidden] {
  display: none;
}

/* =====================================================================
   D5a, 17.09.2026 · Rückholregel entfernt, wirkungslos geworden
   ---------------------------------------------------------------------
   public-brand.css senkt .gc-label unter 340 px nicht mehr auf 0,6875rem
   (11 px) (AUFTRAG_D5.md, D5a Punkt 1). Die Zeile über der Sortierung, die
   diese Regel hier auffing, steht jetzt schon durch die Markenebene bei
   12 px; sie darf weiter umbrechen.
   ===================================================================== */

/* WEB-028: Die Sortierung teilt die Aktionszeile der Suchleiste. Der
   leere GET-Formularträger steht außerhalb der Suchform, damit die
   Sortierauswahl per form-Attribut ohne verschachtelte Formulare sendet. */
.public-jobs .jobsuche__sortierung {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.public-jobs .jobsuche__sortierung .sortierung__titel {
  white-space: nowrap;
}

.public-jobs .sortierung__hinweis {
  flex-basis: 100%;
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.84375rem;
  font-weight: 500;
}

.public-jobs .sortierung__hinweis[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .public-jobs .abschluss-arbeitgeber {
    max-width: var(--gc-container-wide);
  }
}

@media (max-width: 767px) {
  /* Der Assistent deckt Beruf, Branche, Beschäftigungsart, Start, Ort/Land
     und Umkreis ab. Auf dem Telefon bleibt daher nur dieser eine klare
     Einstieg sichtbar; angewandte Marken und Sortierung bleiben daneben. */
  .public-jobs .filterbereich {
    display: none;
  }

  .public-jobs .jobsuche__filterzeile {
    align-items: stretch;
    gap: 12px;
  }

  .public-jobs .jobsuche__knopf {
    width: 100%;
    justify-content: center;
  }

  .public-jobs .jobsuche__sortierung {
    width: 100%;
    margin-left: 0;
  }

  /* Die Sortierung bleibt optisch ein Unterstrich, braucht am Telefon aber
     dieselbe 44px hohe Trefffläche wie die übrigen Bedienelemente. */
  .public-jobs .sortierung__feld {
    min-height: 44px;
    padding-block: 10px 8px;
  }

  /* Ort und Titel bleiben auf der kleineren Favoritenkarte lesbar, statt
     vom großen Monogramm verdrängt zu werden. */
  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__logo,
  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__monogramm {
    width: 56px;
    height: 56px;
    padding: 5px;
  }

  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__text {
    padding-left: 88px;
  }

  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__titel {
    font-size: .9375rem;
    line-height: 1.2;
  }

  .public-jobs .favoriten__spur .stellenkarte--favorit .stellenkarte__firma {
    font-size: .75rem;
  }
}

/* 25.09.2026 (W-15): Das Feld trägt Beschriftung, Abstand und Auswahl.
   Mit derselben Mindestbreite wie die Auswahl allein lief die Auswahl
   ab 1100 px über die Beschriftung „Umkreis" daneben. */
@media (min-width: 768px) {
  .public-jobs #leiste-start {
    min-width: 176px;
  }

  .public-jobs .jobsuche__selectfeld:has(#leiste-start) {
    min-width: max-content;
  }
}

/* L6: Gruppen sind Überschriften, keine Stellenkarten. */
.public-jobs .jobliste > .jobliste__gruppe {
  grid-column: 1 / -1;
  list-style: none;
  margin: 2rem 0 0.75rem;
  min-width: 0;
}
.public-jobs .jobliste > .jobliste__gruppe:first-child { margin-top: 0; }
.public-jobs .jobliste__gruppentitel {
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--jobs-text);
  margin: 0;
  overflow-wrap: anywhere;
}
.public-jobs .stellen-region-hinweis {
  flex-basis: 100%;
  color: var(--jobs-text-secondary);
  max-width: 70ch;
}
.public-jobs .stellenkarte__entfernung {
  display: block;
  color: var(--jobs-text-secondary);
}

/* W-JOBS-KARTEN-1012 / F2: derselbe Kartenstapel für alle Breiten.
 Die bestehenden Treffer und ihre Listeninformationen bleiben im DOM. */
.public-jobs .jobs-karten-ansicht,
.public-jobs .jobs-karten-steuerung,
.public-jobs .jobs-karten-status,
.public-jobs .jobs-karten-detail,
.public-jobs .jobs-karten-beginn { display: none; }
.public-jobs .jobs-karten-ansicht:not([hidden]) {
  display: flex; width: fit-content; margin: 0 0 24px auto; padding: 4px;
  background: var(--gc-canvas-3); border-radius: var(--gc-radius-control);
}
.public-jobs :is(.jobs-karten-ansicht, .jobs-karten-steuerung) button {
  min-width: 44px; min-height: 44px; padding: .5rem .875rem;
  font: inherit; font-size: 1.0625rem; cursor: pointer;
  border: 1px solid var(--gc-line-ui); border-radius: var(--gc-radius-control);
  background: var(--gc-surface); color: var(--gc-ink);
}
.public-jobs .jobs-karten-ansicht button { border: 0; background: transparent; }
.public-jobs .jobs-karten-ansicht button[aria-pressed="true"] { background: var(--gc-action); color: var(--gc-action-ink); }
.public-jobs :is(.jobs-karten-ansicht, .jobs-karten-steuerung) button:focus-visible { outline: 3px solid var(--gc-action); outline-offset: 4px; }
.public-jobs .jobs-karten-steuerung button:disabled { opacity: .45; cursor: default; }
.public-jobs #stellenliste.jobs-karten-aktiv {
  display: grid; grid-template-columns: minmax(0, 1fr); max-width: 440px;
  gap: 0; padding: 0 9px 28px; margin: 0 auto; isolation: isolate;
  overflow: visible; touch-action: pan-y pinch-zoom;
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* F2 R3: Geschlossene Filter liefern keine unsichtbaren Auswahlflächen
     neben dem Stapel. Offen bleiben Panel und Auswahl vollständig erhalten. */
  .public-jobs .filterbereich:not([open]) > .filterbereich__panel { display: none; }
  /* Eigene Ebene unter der klebenden Suchleiste (z-index: 90).
     Der zusätzliche Abstand trennt die Kartenbühne von den Bedienelementen. */
  .public-jobs #stellenliste.jobs-karten-aktiv {
    position: relative; z-index: 0; padding-top: 24px;
  }
}
.public-jobs #stellenliste.jobs-karten-aktiv > :not([data-karten-lage="0"]):not([data-karten-lage="1"]):not([data-karten-lage="2"]) { display: none; }
.public-jobs #stellenliste.jobs-karten-aktiv > .stellenkarte {
  display: block; grid-area: 1 / 1; min-width: 0; margin: 0;
  align-self: stretch; transform-origin: 50% 90%;
  background: var(--gc-surface); border-radius: 16px; box-shadow: var(--gc-shadow-float);
}
.public-jobs #stellenliste.jobs-karten-aktiv > [data-karten-lage="0"] { z-index: 3; cursor: grab; }
.public-jobs #stellenliste.jobs-karten-aktiv > [data-karten-lage="1"] { z-index: 2; background: var(--gc-canvas-2); transform: translateY(12px) rotate(2.5deg) scale(.97); }
.public-jobs #stellenliste.jobs-karten-aktiv > [data-karten-lage="2"] { z-index: 1; background: var(--gc-canvas-3); transform: translateY(23px) rotate(-3deg) scale(.94); }
.public-jobs #stellenliste.jobs-karten-aktiv > :is([data-karten-lage="1"], [data-karten-lage="2"]) > * { visibility: hidden; }
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__körper {
  display: block; height: auto; min-height: 0; padding: 0;
  overflow: hidden; border: 0; border-radius: 16px; box-shadow: none;
  background: transparent; transform: none; transition: none;
}
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__medien {
  display: block; position: relative; width: 100%; height: 174px;
  margin: 0; min-height: 0; border-radius: 0; padding: 0;
}
@media (min-width: 768px) {
  /* F2 R2: Die 124px-Grenze der Desktopliste darf das 174px hohe
     Stapelbild nicht in den nachfolgenden Text ragen lassen. */
  .public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__medien { max-height: none; }
}
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__medien > .stellenkarte__foto {
  display: block; width: 100%; height: 174px; min-height: 0; max-height: none;
  border-radius: 0; object-fit: cover; aspect-ratio: auto;
}
/* Die Bühne bestimmt die Größe. Ihre beiden Bildebenen behalten
   cover hinten und contain vorn aus public-brand.css. */
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__text {
  display: flex; flex-direction: column; gap: 0; padding: 20px; margin: 0;
  font-size: 1.0625rem; line-height: 1.5;
}
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__firma { order: -2; margin: 0 0 6px; font-size: 1.0625rem; color: var(--gc-ink-muted); }
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__titel { order: -1; font-size: 1.375rem; line-height: 1.3; margin: 0 0 12px; }
/* Der bisherige Ganzkarten-Link würde Pointer-Wischen über Bild und Text
   abfangen. Nur die neue Stapelansicht erhält getrennte Linkflächen. */
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__titel a::after { display: none; pointer-events: none; }
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__titel a { display: flex; align-items: center; min-height: 44px; min-width: 44px; }
.public-jobs #stellenliste.jobs-karten-aktiv :is(.stellenkarte__ort, .stellenkarte__gehalt, .stellenkarte__fakten, .jobs-karten-beginn) { font-size: 1.0625rem; margin: 6px 0 0; line-height: 1.5; }
.public-jobs #stellenliste.jobs-karten-aktiv .stellenkarte__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.public-jobs #stellenliste.jobs-karten-aktiv .jobs-karten-beginn { display: block; margin: 0 0 16px; }
.public-jobs #stellenliste.jobs-karten-aktiv .jobs-karten-detail { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 44px; margin-top: 16px; font-size: 1.0625rem; }
.public-jobs #stellenliste.jobs-karten-aktiv :is(.stellenkarte__logo, .stellenkarte__monogramm, .stellenkarte__kopf, .stellenkarte__branche, .beschreibung__anriss) { display: none; }
.public-jobs #stellenliste.jobs-karten-aktiv .merkknopf {
  position: static; margin: 0 20px 20px auto;
  min-width: 44px; min-height: 44px;
}
.public-jobs .jobs-karten-steuerung:not([hidden]) { display: flex; justify-content: space-between; align-items: center; gap: 8px; max-width: 440px; margin: 12px auto 0; font-size: 1.0625rem; }
.public-jobs #jobs-karten-zaehler { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.public-jobs .jobs-karten-status:not([hidden]) { display: block; font-size: 1.0625rem; text-align: center; color: var(--gc-ink-muted); margin: 12px 0; }
@media (prefers-reduced-motion: no-preference) {
  .public-jobs #stellenliste.jobs-karten-aktiv > [data-karten-lage="0"] { transition: transform 180ms var(--gc-ease); }
  .public-jobs #stellenliste.jobs-karten-links > [data-karten-lage="0"] { transform: translateX(-18px) rotate(-2deg); }
  .public-jobs #stellenliste.jobs-karten-rechts > [data-karten-lage="0"] { transform: translateX(18px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .public-jobs #stellenliste.jobs-karten-aktiv > [data-karten-lage] { transform: none; transition: none; }
}