@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · STELLENDETAIL
   ---------------------------------------------------------------------
   Ruhige, kandidatenorientierte Lesefläche auf dem gemeinsamen Public-
   Fundament. Alle Regeln bleiben bewusst auf .public-job begrenzt.
   ===================================================================== */

.public-job {
  --job-text: var(--gc-ink-soft);
  --job-muted: var(--gc-ink-muted);
  --job-rule: var(--gc-line);
  --job-green-soft: color-mix(in srgb, var(--gc-action) 11%, white);

  /* Die Kicker dieser Seite nutzen das DUNKLERE Markengrün.

     --marker (also --gc-green-deep, #2b7f2b) ist der übliche Ton für
     grünen Text auf hellem Grund und steht so auch im Handoff. Auf Sand
     hält er aber nur 4,46:1, knapp unter den verlangten 4,5:1. Auf Weiß
     wären es 5,03:1.

     Die Farbleiter-Prüfung schlägt dort nicht an, weil Gruppe 2 nur
     Paarungen im SELBEN Regelblock sieht und die Kaskade nicht auflöst
     (werkzeug/farbleiter-pruefung.py, Abschnitt GRENZEN). Der Wert steht
     also nicht als anerkannte Ausnahme in der Liste, er fällt nur durch
     das Raster. Ein neuer Kicker sollte ihn deshalb nicht wiederholen.

     --gc-link (#256e25) ist ein bestehender Marken-Token und hält
     5,58:1 auf Sand und 6,30:1 auf Weiß. Der Unterschied ist mit bloßem
     Auge kaum zu sehen. Der Bestand auf den anderen Seiten bleibt
     unangetastet, das wäre eine eigene Entscheidung für alle Seiten. */
  --job-kicker: var(--gc-link);

  /* 18 px verlangt der Handoff für Meta-Kacheln, dunkle Karten und die
     Hinweisfläche. Die Markenebene kennt 14 (Chip) und 22 (Karte), aber
     keine 18. Der Wert bleibt deshalb LOKAL: public-brand.css ist in
     Auftrag 70 § 6.1 gesperrt, weil dort ein zweiter Bauzweig arbeitet.
     Ein eigener Marken-Token wäre eine Entscheidung für alle Seiten. */
  --job-radius-tile: 18px;
}

.public-job .jobseite {
  padding-top: var(--kopf-h-mobil);
}

/* Oben KEIN Abstand mehr: der Stellenkopf ist randlos und muss direkt
   unter dem Seitenkopf ansetzen. Den Innenabstand bringt er selbst mit.
   Unten bleibt der Abstand, dort endet die Lesefläche auf Sand. */
.public-job #stellenanzeige {
  padding-block: 0 clamp(72px, 9vw, 128px);
}

/* Die Lesefläche beginnt erst nach dem Stellenkopf. */
.public-job #stellenanzeige > .wrap {
  padding-top: clamp(48px, 6vw, 84px);
}

/* Der Handoff verlangt einen durchgehenden Container von 1240 px. Das
   Repo setzt .wrap sonst auf --gc-container (1120 px) und nur
   .kopf__inner und .footer > .wrap auf --gc-container-wide (1240 px),
   siehe public-brand.css:334-341.

   Gemessen bei 1440 px: Kopfleiste und Fuß standen auf 60..1380, der
   Jobinhalt auf 120..1320. Solange der Stellenkopf eine schwebende Karte
   war, fiel das nicht auf. Randlos fällt es auf: die Brotkrume begann
   60 px weiter innen als das Logo direkt darüber.

   Deshalb bekommt NUR dieser Abschnitt den weiten Container. Der Rest
   der Seite und alle anderen Seiten bleiben unangetastet, und
   public-brand.css wird nicht angefasst (Auftrag 70 § 6.1). */
.public-job #stellenanzeige > .wrap,
.public-job .stellenkopf__inhalt {
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
}

.public-job .stellenseite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  min-width: 0;
}

/* Rückweg ------------------------------------------------------------ */

.public-job .brotkrume {
  margin: 0 0 clamp(18px, 2vw, 28px);
}

.public-job .brotkrume__liste {
  gap: 0 8px;
  font-size: 0.82rem;
}

.public-job .brotkrume__liste li {
  gap: 8px;
}

.public-job .brotkrume__liste li + li::before {
  color: var(--ink-hell-500);
}

.public-job .brotkrume__liste li:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.public-job .brotkrume__liste a {
  min-height: 44px;
  padding-block: 0;
  color: var(--ink-hell-600);
  text-decoration: none;
}

.public-job .brotkrume__liste a:hover {
  color: var(--dunkel-tief);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-job .brotkrume__liste [aria-current] {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  color: var(--ink-hell-700);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-job .job-ohne-js-hinweis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
  padding: 14px 16px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--public-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.public-job .job-ohne-js-hinweis svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--gc-green-deep);
}

.public-job .job-ohne-js-hinweis p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-wrap: pretty;
}

.public-job .job-ohne-js-hinweis strong {
  color: var(--gc-ink);
}

.public-job .job-ohne-js-hinweis a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  /* Kleintext-Link: das CI-Grün #2b7f2b hält auf Canvas nur 4,47:1,
     der Link-Ton 5,6:1. */
  color: var(--gc-link);
  font-weight: 700;
  text-underline-offset: 4px;
}

/* Stellenkopf: randlose dunkle Fläche mit Branchenbild rechts -------

   Mit W21 ist aus der schwebenden Karte eine Sektion über die volle
   Seitenbreite geworden. Der Kopfbereich liegt dafür im Quelltext als
   direktes Kind von #stellenanzeige, also AUSSERHALB von .wrap. Der
   eigene .wrap darin hält den Inhalt auf Containerbreite.

   Bewusst kein margin-inline: calc(50% - 50vw). Der vw-Trick hätte die
   Breite an den Viewport gehängt, und 100vw schließt die Bildlaufleiste
   ein; auf Windows wären daraus rund 15 px Querlauf geworden.

   ÜBERHOLT MIT D4 (17.09.2026): Der Kopf ist seit Design 05 hell, das
   Foto liegt als gerahmtes Kopfbild IM Container statt als Ebene rechts,
   und die drei Deckebenen tragen den Stamm .jobbild. Was von diesem
   Abschnitt noch wirkt, überschreibt die unterste Schicht dieser Datei.
   Er bleibt stehen, weil er den Fehlerzustand und die Druckfassung
   trägt. */

.public-job .stellenkopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0;
  background: var(--gc-dark-deep);
  color: var(--auf-dunkel);
}

/* D4: Die vier dekorativen Ebenen des dunklen Kopfes sind mit Design 05
   entfallen. Das Foto ist jetzt ein gerahmtes Kopfbild, und seine beiden
   Ebenen heißen .jobbild__schleier und .jobbild__schimmer (unterste
   Schicht dieser Datei). Die Regeln standen hier ohne Element im
   Dokument, und Gruppe 4 der Farbleiter-Prüfung hätte weiterhin die
   dunkle Tinte des nun HELLEN Kopfes gegen einen Schleier gerechnet, den
   es gar nicht mehr gibt (gemessen am 17.09.: 1,03:1 an
   .stellenkopf .betrieb__name). Gelöscht, nicht stillgelegt: der
   Schleier selbst bleibt unter seinem neuen Namen voll geprüft. */

.public-job .stellenkopf__inhalt {
  position: relative;
  z-index: 1;
  padding-block: clamp(22px, 3vw, 26px) clamp(48px, 7vw, 78px);
}

.public-job .stellenkopf .brotkrume {
  margin-bottom: clamp(28px, 5vw, 54px);
}

/* Der Vorspann. 44ch halten ihn links vom Foto, auch bei sehr langem
   Text. Fehlt das Feld summary, entfernt supabase-public.js den Absatz
   und die Betriebszeile rückt ohne Lücke nach oben. */
.public-job .stellenkopf__lead {
  margin-top: 26px;
  max-width: 44ch;
  color: var(--auf-dunkel-leise);
  font-size: clamp(1rem, 1.5vw, 1.19rem);
  line-height: 1.55;
}

.public-job .stellenkopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 38px);
}

.public-job .stellenkopf__aktionen .bewerben__knopf {
  text-transform: none;
  letter-spacing: 0;
}

/* Glasknopf: nur auf dunklem Grund. Auf Sand ist Glas laut Designsystem
   gesperrt, und diese Klasse steht deshalb allein im Stellenkopf. */
.public-job .btn-glas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(244 241 232 / 0.18);
  background: rgb(244 241 232 / 0.06);
  backdrop-filter: blur(10px);
  color: var(--auf-dunkel);
  font-weight: 600;
}

.public-job .btn-glas svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

/* Schriftgröße, Versalien und Sperrung kommen aus .gc-label. Hier bleiben
   die Zeilenform (Symbol neben Text) und die Farbe: die Mint-Fassung der
   Klasse hängt an .dunkel, und diese Marke trägt der Stellenkopf nicht.
   display muss mitstehen, weil .gc-label inline-block mitbringt. */
.public-job .stellenkopf__branche {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  max-width: none;
  color: var(--marker-licht);
}

/* Das Symbol folgt der kleiner gewordenen Zeile, sonst überragt es sie. */
.public-job .stellenkopf__branche svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

/* Marken-Skala für den Stellentitel. Bewusst eine Stufe unter der H1 der
   Jobbörse: dieser Titel steht nicht über die volle Seitenbreite, sondern in
   der linken Spalte des Stellenkopfs neben dem Bild. Bei 1280 px sind das
   rund 75 px, ein Titel bis 48 Zeichen bleibt damit unter vier Zeilen.
   Längere Titel fangen die beiden Längenklassen darunter ab. */
.public-job .stellenkopf .stellen__titel {
  margin: 0;
  max-width: 19ch;
  color: var(--auf-dunkel);
  font-size: clamp(2.6rem, 5.9vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

/* Reale Stellentitel sind keine kontrollierten Kampagnen-Headlines. Die
   Längenklassen setzt supabase-public.js anhand des tatsächlich geladenen
   Titels. So bleiben kurze Titel selbstbewusst, ohne dass ein langer
   deutscher Titel die Bildspalte oder einzelne Wörter zerlegt. */
/* 49 bis 82 Zeichen. Bei 1280 px rund 52 px: die Textspalte fasst damit
   etwa 21 Zeichen je Zeile, 82 Zeichen brauchen also knapp vier Zeilen. */
.public-job .stellenkopf--titel-mittel .stellen__titel {
  max-width: 24ch;
  font-size: clamp(2.25rem, 4.1vw, 3.75rem);
  line-height: 1.04;
}

/* Über 82 Zeichen, gemessen am längsten realistischen Stellentitel von rund
   90 Zeichen. Bei 1280 px rund 45 px, das ergibt etwa 25 Zeichen je Zeile
   und damit vier Zeilen als Obergrenze. Bewusst nicht höher. */
/* max-width: none ist hier Absicht. Das ch-Maß ist in Fraunces eine Falle:
   die Ziffer Null ist rund 0,36 em breit, 29ch waren dadurch keine 29
   Zeichen, sondern gut 20. Ein Titel von 100 Zeichen lief damit auf sieben
   Zeilen. Ohne die Deckelung begrenzt die Textspalte selbst, und derselbe
   Titel steht in vier Zeilen. */
.public-job .stellenkopf--titel-lang .stellen__titel {
  max-width: none;
  font-size: clamp(2.05rem, 3.5vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
}

.public-job .stellenkopf .stellen__mwd {
  display: inline-block;
  color: var(--auf-dunkel-still);
  font-size: 0.48em;
  font-weight: 500;
  vertical-align: 0.15em;
}

.public-job .stellenkopf .betrieb {
  display: flex;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.public-job .stellenkopf .betrieb__medien {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
}

.public-job .stellenkopf .betrieb__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm) {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: var(--sp-2);
  box-sizing: border-box;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-sm);
  background: var(--gc-surface);
  place-items: center;
  pointer-events: none;
}

.public-job .stellenkopf .betrieb__medien > .stellenkarte__logo {
  object-fit: contain;
}

/* Das Monogramm steht auf der weißen Platte, die die :is()-Regel darüber
   setzt. background wird hier wiederholt, weil Gruppe 4 der
   Farbleiter-Prüfung nur den EIGENEN Regelblock nach einer Fläche
   absucht. Ohne die Wiederholung rechnete sie diese dunkelgrüne Tinte
   gegen den Schutzverlauf des Stellenkopfs. Auf Weiß hält sie 5,84:1. */
.public-job .stellenkopf .betrieb__medien > .stellenkarte__monogramm {
  background: var(--gc-surface);
  color: var(--gc-dark-card);
  font-family: var(--gc-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.public-job .stellenkopf .betrieb__name {
  color: var(--auf-dunkel);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 2vw, 1.14rem);
  font-weight: 650;
}

.public-job .stellenkopf .betrieb__ort {
  margin-top: 7px;
  color: var(--auf-dunkel-leise);
  font-size: 0.94rem;
}

.public-job .stellenkopf .betrieb__ort svg {
  color: var(--marker-licht);
}

/* Eine kompakte Faktenzeile. Die dt bleiben im Zugänglichkeitsbaum,
   dekorative Masken zeichnen die Symbole mit currentColor. */
.public-job .stellenkopf .eckdaten {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  margin: clamp(26px, 3.4vw, 34px) 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--gc-line-dark-strong);
  border-bottom: 1px solid var(--gc-line-dark-strong);
}

.public-job .stellenkopf .eckdaten__paar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.public-job .stellenkopf .eckdaten__paar::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--gc-on-dark);
  background: currentColor;
  -webkit-mask: var(--eckdatum-symbol) center / contain no-repeat;
  mask: var(--eckdatum-symbol) center / contain no-repeat;
}

.public-job .eckdaten__paar[data-eckdatum="pensum"] {
  --eckdatum-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM12 7v5l3 2'/%3E%3C/svg%3E");
}

.public-job .eckdaten__paar[data-eckdatum="arbeitsmodell"] {
  --eckdatum-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7M5 9v12h14V9M9 21v-7h6v7'/%3E%3C/svg%3E");
}

.public-job .eckdaten__paar[data-eckdatum="frist"] {
  --eckdatum-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2ZM7 3v4M17 3v4M3 11h18'/%3E%3C/svg%3E");
}

.public-job .eckdaten__paar[data-eckdatum="vertrag"] {
  --eckdatum-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H5v18h14V8l-5-5ZM14 3v5h5M8 12h8M8 16h6'/%3E%3C/svg%3E");
}

.public-job .eckdaten__paar[data-eckdatum="gehalt"] {
  --eckdatum-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M16 7.5c0-1.7-1.8-3-4-3s-4 1.3-4 3 1.8 3 4 3 4 1.3 4 3-1.8 3-4 3-4-1.3-4-3'/%3E%3C/svg%3E");
}

.public-job .stellenkopf .eckdaten dd,
.public-job .stellenkopf .eckdaten dd.num {
  margin: 0;
  color: var(--gc-on-dark);
  font-family: var(--gc-font-body);
  font-size: var(--gc-fs-small);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  .public-job .stellenkopf .eckdaten {
    flex-wrap: wrap;
  }

  .public-job .stellenkopf .eckdaten__paar {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

/* Das Foto liegt als eigene Ebene rechts, nicht mehr als Spalte im Raster.

   Unterhalb von 900 px verschwindet es hinter dem Längsverlauf: bei
   schmaler Fläche gibt es keine Seite, auf die der Text ausweichen kann,
   und Schrift auf Foto ist die eine Sache, die der Schutzgradient hier
   verhindern soll. */
.public-job .stellenkopf__bild {
  display: none;
  margin: 0;
}

.public-job .stellenkopf__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--job-media-focus, 50% 40%);
}

/* Die unscharfe Kulisse aus der Kartenfassung entfällt. Sie füllte die
   Restfläche neben einem contain-Motiv; mit cover gibt es keine
   Restfläche mehr. supabase-public.js legt sie deshalb nicht mehr an. */

/* D4: Die Bildunterschrift war bis Design 05 eine eigene Pille mit
   86 Prozent deckender Fläche. Sie stand damit auf SICH SELBST, nicht
   auf dem Schleier, und fiel deshalb aus Gruppe 4 der
   Farbleiter-Prüfung heraus (die Regel „bringt eine Regel ihre eigene
   Fläche mit, steht ihre Schrift auf dieser Fläche",
   werkzeug/farbleiter-pruefung.py:748-751). Design 05 setzt sie als
   blanken Text auf den Verlauf. Die neue Regel steht in der untersten
   Schicht dieser Datei und trägt bewusst KEINE eigene Fläche: nur so
   rechnet die Prüfung sie wirklich gegen den Schleier. */

/* Linke Spalte: Blöcke untereinander ------------------------------- */

/* Die drei Reiter sind mit W21 entfallen. Ihre Regeln standen hier und
   sind ersatzlos weg: ohne Reiterband gibt es kein .reiter__band, keine
   :checked-Kette und keine fixierten sr-only-Optionsfelder mehr.

   An ihre Stelle tritt eine einzige Lesespalte. Getrennt wird mit einer
   Haarlinie zwischen den Blöcken, nicht mit einer Navigation. */

.public-job .stellenspalte {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-job .stellenspalte > .stellen__block + .stellen__block {
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--job-rule);
}

/* Stehen öffentliche Medien vor dem ersten Textblock, erhält auch dieser
   genau die vorhandene Lesetrennung. Ohne Medien bleibt der Anker hidden,
   folglich entsteht weder Abstand noch eine leere Linie. */
.public-job .stellenspalte > .stellenmedien:not([hidden]) + .stellen__block {
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--job-rule);
}

.public-job .stellenmedien[hidden] {
  display: none;
}

.public-job .stellenmedien {
  min-width: 0;
}

.public-job .stellenmedien__titelbild,
.public-job .stellenmedien__grossansicht {
  margin: 0;
  overflow: hidden;
  border-radius: var(--gc-radius-feature);
  background: var(--gc-canvas-2);
}

.public-job .stellenmedien__bild,
.public-job .stellenmedien__grossbild,
.public-job .stellenmedien__player,
.public-job .stellenmedien__youtube-rahmen {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  background: var(--gc-dark-card);
}

.public-job .stellenmedien__bild {
  height: 100%;
  object-fit: contain;
}

.public-job .stellenmedien__grossbild {
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.public-job .stellenmedien__bereich {
  margin-top: clamp(30px, 4vw, 42px);
}

.public-job .stellenmedien__titel {
  margin: 0 0 18px;
  color: var(--gc-dark-deep);
  font-family: var(--gc-font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.public-job .stellenmedien__auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.public-job .stellenmedien__auswahlpunkt {
  min-width: 0;
}

.public-job .stellenmedien__auswahlpunkt[hidden] {
  display: none;
}

.public-job .stellenmedien__vorschau {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--gc-radius-sm);
  background: var(--gc-canvas-2);
  cursor: pointer;
}

.public-job .stellenmedien__vorschau[aria-pressed="true"] {
  border-color: var(--gc-dark-deep);
}

.public-job .stellenmedien__vorschau:hover:not(:disabled) {
  border-color: var(--gc-link);
}

.public-job .stellenmedien__vorschau:focus-visible,
.public-job .stellenmedien__youtube-knopf:focus-visible {
  outline: 3px solid var(--gc-action);
  outline-offset: 3px;
}

.public-job .stellenmedien__vorschau:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.public-job .stellenmedien__vorschau-bild {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.public-job .stellenmedien__video,
.public-job .stellenmedien__youtube {
  padding: clamp(18px, 3vw, 26px);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-canvas-2);
}

.public-job .stellenmedien__player,
.public-job .stellenmedien__youtube-rahmen {
  aspect-ratio: 16 / 9;
  border-radius: var(--gc-radius-sm);
}

.public-job .stellenmedien__dauer,
.public-job .stellenmedien__hinweis {
  max-width: 66ch;
  margin: 14px 0 0;
  color: var(--gc-ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

.public-job .stellenmedien__youtube-knopf {
  margin-top: 18px;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 699px) {
  .public-job .stellenmedien__auswahl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

/* Die Trennlinie hängt am FOLGENDEN Block, nicht am vorangehenden. Wird
   ein Block leer entfernt, verschwindet seine Linie mit ihm, und es
   können nie zwei Linien aufeinandertreffen. Der erste sichtbare Block
   trägt nie eine Linie, weil + nur zwischen Geschwistern greift. */

.public-job .block__kicker {
  display: block;
  margin-bottom: 10px;
  max-width: none;
  color: var(--job-kicker);
}

/* Bewerben-Karte: hell auf Sand ------------------------------------ */

/* Unter 900 px rutscht die Karte unter den Inhalt, sie verschwindet
   nicht.

   Bis W20 war sie hier auf display: none, weil die klebende Leiste am
   unteren Rand den Weg in die Bewerbung schon trägt. Der
   Codex-Durchgang vom 23.08. hat das zu Recht als Fehler gemeldet: die
   Karte trägt zwei Dinge, die es auf dem Telefon sonst NIRGENDS gibt,
   nämlich den Hinweis "Ohne Registrierung." und den Weg zur
   Kontaktseite.

   Standort, Branche und Frist stehen oben im Kopf noch einmal. Das ist
   auf einem langen Telefonbildschirm kein Doppel, sondern eine
   Zusammenfassung an der Stelle, an der entschieden wird: der Kopf ist
   dort längst weggescrollt.

   Geklebt wird hier nicht, das steht erst in der 900er Regel. */
.public-job .bewerbung-aside {
  display: block;
  margin-top: clamp(40px, 7vw, 64px);
}

.public-job .bewerbungskarte {
  padding: clamp(22px, 2.6vw, 28px);
  border: 1px solid var(--job-rule);
  border-radius: var(--gc-radius-feature);
  background: var(--karte);
}

.public-job .bewerbungskarte__kicker {
  display: block;
  max-width: none;
  color: var(--job-kicker);
}

.public-job .bewerbungskarte h2 {
  margin: 12px 0 0;
  color: var(--gc-dark-deep);
  font-family: var(--gc-font-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.public-job .bewerbungskarte .bewerben__knopf {
  width: 100%;
  margin-top: 22px;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
}

.public-job .bewerbungskarte__hinweis {
  margin-top: 14px;
  color: var(--job-muted);
  font-size: 0.79rem;
  text-align: center;
}

.public-job .bewerbungskarte__trenner {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--job-rule);
}

.public-job .bewerbungskarte__zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  font-size: 0.85rem;
}

.public-job .bewerbungskarte__zeile + .bewerbungskarte__zeile {
  border-top: 1px solid var(--job-rule);
}

.public-job .bewerbungskarte__zeile dt {
  color: var(--job-muted);
}

.public-job .bewerbungskarte__zeile dd {
  color: var(--gc-ink);
  font-weight: 600;
  text-align: right;
}

/* Zahlen stehen in der Auszeichnungsschrift, wie überall auf der Seite.
   .num bringt die Familie mit, hier folgt nur das Maß. */
.public-job .bewerbungskarte__zeile dd.num {
  font-size: 0.95rem;
  font-weight: 500;
}

.public-job .bewerbungskarte__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--job-muted);
  font-size: 0.85rem;
}

.public-job .bewerbungskarte__fuss a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--marker);
  font-weight: 600;
}

.public-job .bewerbungskarte__fuss a svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

/* Die Notiz nennt GreenCareers als Empfänger. Sie sitzt bewusst
   AUSSERHALB der weißen Karte: sie beschreibt nicht die Bewerbung,
   sondern den Weg danach. */
/* Die Notiz sitzt seit dem Codex-Befund am Ende der LESESPALTE, nicht
   mehr unter der Bewerben-Karte. Begründung im Quelltext von job.html. */
/* Lesefläche -------------------------------------------------------- */

.public-job .stellen__block > :first-child {
  margin-top: 0;
}

.public-job .stellen__block > h2 {
  margin: 0 0 22px;
  color: var(--gc-dark-deep);
  font-family: var(--gc-font-display);
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Steht ein Kicker über der Überschrift, rückt die Überschrift näher an
   ihn heran. Die 22 px darunter bleiben. */
.public-job .block__kicker + h2 {
  margin-top: 0;
}

.public-job .stellen__text {
  max-width: 70ch;
}

.public-job .stellen__text p {
  color: var(--job-text);
  font-size: clamp(1rem, 1.4vw, 1.09rem);
  line-height: 1.72;
}

.public-job .stellen__text > p + p {
  margin-top: 18px;
}

/* Die Abstände zwischen den Blöcken stehen bei .stellenspalte, weil dort
   die Trennlinie am folgenden Block hängt. Hier bleibt nichts. */
.public-job .stellen__block {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Aufgaben und Profil: Karten statt Tabellenzeilen.

   auto-fit mit 268 px Mindestbreite. In der linken Spalte einer 1240er
   Seite ergibt das zwei Spalten, unterhalb von rund 620 px eine. Das
   Raster trägt einen bis n Punkte ohne Anpassung. */
.public-job .punktliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
  border-bottom: 0;
}

.public-job .punktliste li {
  position: relative;
  display: block;
  max-width: none;
  min-height: 0;
  padding: 18px 20px 18px 47px;
  border: 1px solid var(--job-rule);
  border-radius: var(--gc-radius-chip);
  background: var(--karte);
  color: var(--gc-ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.public-job .punktliste li::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 20px;
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: center / 15px 15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23078b43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

/* Vorteile als Pillen ---------------------------------------------- */

.public-job .benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 0;
}

.public-job .benefits li {
  position: relative;
  min-height: 0;
  padding: 11px 18px 11px 40px;
  border: 1px solid var(--job-rule);
  border-radius: var(--gc-radius-pill);
  background: var(--karte);
  color: var(--gc-ink);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
}

.public-job .benefits li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 18px;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 0;
  background: center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23078b43' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

/* Der Betrieb als dunkle Karte -------------------------------------- */

.public-job .betriebskarte {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  isolation: isolate;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--gc-action) 18%, transparent);
  border-radius: var(--gc-radius-feature);
  background: linear-gradient(160deg, var(--gc-dark-deep) 0%, var(--gc-dark)
    100%);
  color: var(--auf-dunkel);
}

.public-job .betriebskarte__schimmer {
  position: absolute;
  top: -40px;
  right: -40px;
  z-index: -1;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gc-action) 15%,
    transparent), transparent 65%);
  pointer-events: none;
}

.public-job .betriebskarte__medien {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.public-job .betriebskarte__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm) {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: var(--sp-2);
  box-sizing: border-box;
  border-radius: var(--gc-radius-chip);
  background: var(--gc-surface);
  object-fit: contain;
  place-items: center;
  pointer-events: none;
}

.public-job .betriebskarte__medien > .stellenkarte__monogramm {
  color: var(--gc-dark-card);
  font-family: var(--gc-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.public-job .betriebskarte__name {
  color: var(--auf-dunkel);
  font-size: 1.12rem;
  font-weight: 600;
}

.public-job .betriebskarte__meta {
  margin-top: 5px;
  color: var(--auf-dunkel-leise);
  font-size: 0.85rem;
}

/* Optionale Betriebslinks ohne Markenfarben oder fremde Bildabrufe. */
.public-job .betriebskarte__text {
  min-width: 0;
}

.public-job .betrieb__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 12px;
}

.public-job .betrieb__socials[hidden] {
  display: none;
}

.public-job .betrieb__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  color: var(--gc-on-dark);
  font-size: var(--gc-fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: var(--gc-radius-sm);
}

.public-job .betrieb__social:hover {
  color: var(--gc-accent);
}

/* D6-N4 (18.09.2026): Der Ring stand auf --gc-action (Waldgrün,
   rgb(18,100,64)). Diese Links sitzen aber in der dunklen Betriebskarte
   auf --gc-dark (rgb(23,59,43)). Gemessen von design05-stelle-browser.mjs
   bei 1280, 390 und 320 Pixeln: 1,72:1, die Grenze aus D5a ist 3:1. Der
   Ring war praktisch unsichtbar. Jetzt --fokus-dunkel (Limette,
   --gc-accent), dieselbe Farbe, die D6-N3 aus demselben Grund für die
   dunkle Premium-Karte gesetzt hat. Limette auf --gc-dark hält 9,59:1.
   Breite und Abstand bleiben, nur die Farbe ändert sich. */
.public-job .betrieb__social:focus-visible {
  outline: 2px solid var(--fokus-dunkel);
  outline-offset: 2px;
}

.public-job .betrieb__social svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

@media (max-width: 767.98px) {
  .public-job .betrieb__social-text {
    display: none;
  }
}

/* Ansprechpartner als Abschlusszeile, nicht als weitere Karte -------- */

.public-job .ansprech {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.public-job .ansprech__inhalt {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.public-job .ansprech__titel {
  margin: 0;
  color: var(--gc-dark-deep);
  font-size: 1.2rem;
}

.public-job .ansprech__person,
.public-job .ansprech__nummer {
  color: var(--job-muted);
}

.public-job .ansprech__person {
  margin-top: 5px;
}

.public-job .ansprech__nummer {
  margin-top: 9px;
  font-weight: 650;
}

.public-job .ansprech__aktionen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.public-job .ansprech__aktionen .btn {
  width: 100%;
  border-color: var(--gc-line-ui);
  color: var(--gc-dark-deep);
  text-transform: none;
  letter-spacing: 0;
}

.public-job .ansprech__aktionen .btn:hover {
  border-color: var(--marker);
  background: var(--job-green-soft);
}

.public-job .ansprech .vermerk {
  margin-top: 24px;
}

/* Bewerbungsdialog und mobile Leiste -------------------------------- */

.public-job .bewerbung,
.public-job .bewerbung-v3 {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: min(92svh, 860px);
  border-radius: var(--public-radius-panel);
  background: var(--dunkel-tief);
  box-shadow: 0 20px 48px oklch(0.12 0.025 153 / 0.32);
}

.public-job .bewerbung::backdrop {
  background: oklch(0.13 0.025 153 / 0.76);
  backdrop-filter: blur(3px);
}

.public-job .bewerbung[open] {
  animation: bewerbung-öffnen 220ms var(--public-ease) both;
}

@keyframes bewerbung-öffnen {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.public-job .bewerbung .filter__kopf,
.public-job .bewerbung .filter__fuß {
  border-color: oklch(0.98 0.01 150 / 0.16);
}

.public-job .bewerbung .filter__kopf {
  padding: 24px 28px 22px;
}

.public-job .bewerbung .filter__titel {
  color: var(--auf-dunkel);
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.public-job .bewerbung__kicker {
  margin-bottom: 5px;
  color: var(--marker-licht);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
}

.public-job .bewerbung__unterzeile {
  max-width: 62ch;
  margin-top: 8px;
  color: var(--auf-dunkel-still);
  font-size: 0.9rem;
  line-height: 1.45;
}

.public-job .bewerbung .filter__schließen {
  border: 1px solid oklch(0.98 0.01 150 / 0.3);
  background: transparent;
  color: var(--auf-dunkel);
}

.public-job .bewerbung .filter__schließen:hover {
  border-color: var(--marker-licht);
  background: oklch(0.98 0.01 150 / 0.08);
  color: var(--marker-licht);
}

.public-job .bewerbung__körper {
  gap: 22px;
  padding: 26px 28px 24px;
  background: var(--sand);
  color: var(--ink-hell-700);
  overscroll-behavior: contain;
}

.public-job .bewerbung__felder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.public-job .bewerbung__körper .filter__frage {
  margin-bottom: 8px;
  color: var(--ink-hell-900);
  font-size: 0.98rem;
  line-height: 1.35;
}

.public-job .bewerbung__körper .pflicht {
  height: 22px;
  border: 0;
  background: var(--job-green-soft);
  color: var(--dunkel);
  /* D7 (19.09.2026): 0.72rem (11,52px) unterschritt die 12px-Grenze der
     Seite. Bis D6 lag dieser Text in einem <dialog>, der beim generellen
     Textgrößen-Rundgang nie geöffnet war (showModal), die Unterschreitung
     blieb deshalb unentdeckt. Seit der Bewerbungsdialog der Abschnitt
     "#bewerben" ist und dauerhaft im Fluss steht (Auftrag D7 Punkt 4),
     misst werkzeug/design05-stelle-browser.mjs auch diesen Text mit,
     gemessen bei D7: FAIL "Pflichtfeld"/"Freiwillig" 11,52px. */
  font-size: 0.75rem;
  letter-spacing: 0;
}

/* Dasselbe Maß wie Pflichtfeld, damit die zwei Merkmale im selben Formular
   als Geschwister lesbar sind. Aber ohne Füllung: "Freiwillig" ist die
   leisere Aussage und soll das auch bleiben. Die Farbe kommt aus der hellen
   Leiter, nicht aus der dunklen; die erste Fassung stand mit 2,02:1 praktisch
   unsichtbar da (Endnutzer-Durchgang 28.08.2026). */
.public-job .bewerbung__körper .freiwillig {
  height: 22px;
  border-color: var(--gc-line-ui);
  color: var(--ink-hell-700);
  /* D7: siehe Begründung bei .pflicht oben, dieselbe Unterschreitung. */
  font-size: 0.75rem;
  letter-spacing: 0;
}

.public-job .bewerbung__körper .bewerbung__datei {
  min-height: 52px;
  padding: 10px 12px;
}

.public-job .bewerbung__körper .bewerbung__datei::file-selector-button {
  border-color: var(--gc-line-ui);
  background: var(--job-green-soft);
  color: var(--dunkel);
  font-size: 0.78rem;
}

.public-job .bewerbung__körper .bewerbung__datei-gewaehlt,
.public-job .bewerbung__körper .bewerbung__datei-entfernen {
  color: var(--ink-hell-700);
  font-size: 0.8rem;
}

.public-job .bewerbung__körper .eingabe {
  min-height: 52px;
  border-color: var(--gc-line-ui);
  border-radius: var(--public-radius-control);
  background: var(--karte);
  color: var(--ink-hell-900);
}

.public-job .bewerbung__körper .eingabe:hover,
.public-job .bewerbung__körper .eingabe:focus {
  border-color: var(--dunkel);
}

.public-job .bewerbung__körper .eingabe[aria-invalid="true"] {
  border-color: oklch(0.49 0.15 28);
}

.public-job .bewerbung__körper .telfeld {
  gap: 10px;
}

.public-job .bewerbung__körper .telfeld__vorwahl {
  gap: 8px;
  min-height: 52px;
  padding-inline: 13px;
  border-color: var(--gc-line-ui);
  border-radius: var(--public-radius-control);
  background: var(--sand-ton);
  color: var(--dunkel-tief);
  font-size: 0.98rem;
}

.public-job .bewerbung__körper .telfeld__vorwahl svg {
  width: 18px;
  height: 18px;
  color: var(--marker);
}

.public-job .bewerbung__körper .filter__hinweis {
  margin: 7px 0 0;
  color: var(--ink-hell-600);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Die globale Filter-Komponente stellt Hinweise als Flexzeile dar, weil
   sie dort meist aus Icon und kurzem Text bestehen. Dieser längere
   Datenschutz-Hinweis braucht dagegen eine ruhige, durchgehende
   Textspalte – besonders auf schmalen Telefonen. */
.public-job .bewerbung__körper .bewerbung__email-hinweis {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--linie-hell-2);
  border-radius: var(--public-radius-control);
  background: var(--sand-ton);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.public-job .bewerbung__email-hinweis strong {
  color: var(--ink-hell-800);
  font-weight: 700;
}

.public-job .bewerbung__fehler {
  margin-top: 7px;
  color: oklch(0.45 0.15 28);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
}

.public-job .bewerbung__fehler[hidden],
.public-job .bewerbung__körper[hidden],
.public-job .bewerbung__fuß[hidden],
.public-job .bewerbung__kopf[hidden],
.public-job .bewerbung__merkmale[hidden] {
  /* Befund A (Feedback Patric, 26.09.2026): Ursache des doppelten Kopfs.
     build() in bewerbung-v3.js setzt bei aktivem V3 das hidden-Attribut auf
     .bewerbung__kopf (die alte Kopf-Form mit Kicker/H2/Unterzeile) UND auf
     .bewerbung__merkmale (die Häkchenzeile "Ohne Anschreiben"/"Ohne
     Registrierung"). Beide Elemente tragen aber auch die Klassen
     .filter__kopf bzw. werden gleichnamig über .bewerbung__merkmale weiter
     unten in dieser Datei mit "display: flex" gezeichnet (".public-job
     .bewerbung .filter__kopf", ".public-job .bewerbung__merkmale", mehrfach
     dupliziert je Breakpoint). Diese Regeln haben dieselbe Spezifität wie
     die [hidden]-Regel hier und stehen im Quelltext SPÄTER, sie gewinnen
     also die Kaskade und zeigen den Kopf trotz hidden-Attribut weiter an:
     "Kachel in der Kachel". !important stellt wieder her, was das
     hidden-Attribut eigentlich garantieren soll (derselbe Kunstgriff steht
     bereits bei ".bewerbung-v3[hidden]" weiter unten in dieser Datei). */
  display: none !important;
}

.public-job .bewerbung__körper .haken {
  min-width: 0;
  color: var(--ink-hell-800);
}

/* S17: Ausgeblendete Erklärungen bleiben trotz der flex-Regeln verborgen. */
.public-job .haken[hidden] {
  display: none !important;
}

.public-job .bewerbung__körper .haken:hover {
  background: var(--job-green-soft);
}

.public-job .bewerbung__körper .haken__text {
  min-width: 0;
  color: var(--ink-hell-800);
  font-size: 0.88rem;
  line-height: 1.48;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.public-job .bewerbung__körper .haken__text a {
  color: var(--dunkel);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 42%, transparent);
  text-underline-offset: 3px;
}

.public-job .bewerbung__körper .haken__text a:hover {
  text-decoration-color: currentColor;
}

.public-job .bewerbung__whatsapp-zusage {
  padding: 12px;
  border-radius: var(--public-radius-control);
  background: var(--job-green-soft);
}

.public-job .bewerbung__whatsapp-zusage:hover {
  background: oklch(0.925 0.045 147);
}

.public-job .bewerbung__feld {
  min-height: 96px;
}

.public-job .bewerbung__fuß {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 20px;
  align-items: center;
  padding: 18px 28px 20px;
  border-top-color: var(--linie-hell);
  background: var(--sand);
}

.public-job .bewerbung__sicherheit {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: none;
  color: var(--ink-hell-600);
  font-size: 0.88rem;
  line-height: 1.35;
}

.public-job .bewerbung__sicherheit svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--marker);
}

.public-job .bewerbung__fuß .bewerbung__senden {
  width: 100%;
  min-height: 54px;
  text-transform: none;
  letter-spacing: 0;
}

.public-job .bewerbung__absenden {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.public-job .bewerbung__api-fehler {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--public-radius-control);
  background: oklch(0.94 0.045 28);
  color: oklch(0.39 0.13 28);
}

.public-job .bewerbung__api-fehler:focus {
  outline: 3px solid color-mix(in oklab, oklch(0.49 0.15 28) 30%, transparent);
  outline-offset: 2px;
}

.public-job .bewerbung--sendet .bewerbung__senden::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid color-mix(in oklab, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: bewerbung-laden 720ms linear infinite;
}

@keyframes bewerbung-laden {
  to {
    transform: rotate(1turn);
  }
}

/* R5-W-FEEDBACK3: Rückmeldung folgt den abgeschlossenen Übertragungsschritten. */
.public-job .bewerbung__laden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 440px;
  padding: clamp(28px, 6vw, 56px);
  border-radius: var(--gc-radius-card);
  background: var(--gc-canvas);
  color: var(--gc-ink-soft);
  text-align: center;
}

.public-job .bewerbung__laden[hidden],
.public-job .bewerbung__ladestatus [hidden],
.public-job .bewerbung__quittung [hidden] {
  display: none;
}

.public-job .bewerbung__laden h3 {
  margin: 0;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
}

.public-job .bewerbung__laden p {
  margin: 0;
}

.public-job .bewerbung__ladering {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  stroke-width: 3;
  stroke-linecap: round;
}

.public-job .bewerbung__ringgrund {
  stroke: var(--gc-line-strong);
}
.public-job .bewerbung__ringbogen {
  stroke: var(--gc-green-deep);
  stroke-dasharray: 58 156;
  transform-origin: center;
  animation: bewerbung-laden 1s linear infinite;
}
.public-job .bewerbung__ladehaken {
  stroke: var(--gc-green-deep);
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}
.public-job .bewerbung__laden[data-phase="2"] .bewerbung__ringbogen {
  animation: none;
  stroke-dasharray: none;
}
.public-job .bewerbung__laden[data-phase="2"] .bewerbung__ladehaken {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 220ms ease-out;
}

.public-job .bewerbung__ladestatus {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 0.875rem;
}
.public-job .bewerbung__ladestatus li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.public-job .bewerbung__ladestatus li::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: var(--gc-radius-pill);
}
.public-job .bewerbung__ladestatus [data-zustand="aktiv"] {
  font-weight: 700;
  color: var(--gc-ink);
}
.public-job .bewerbung__ladestatus [data-zustand="fertig"]::before {
  background: currentColor;
}

.public-job .bewerbung__ladebalken {
  width: min(100%, 240px);
  height: 10px;
  overflow: hidden;
  border-radius: var(--gc-radius-pill);
  background: #eaf0df;
  box-shadow: inset 0 0 0 1px rgb(18 100 64 / .08);
}
.public-job .bewerbung__ladebalken span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #126440;
  transform: scaleX(0.08);
  transform-origin: left;
  transition: transform 220ms ease-out;
}
.public-job .bewerbung__laden[data-phase="1"] .bewerbung__ladebalken span {
  transform: scaleX(0.5);
}
.public-job .bewerbung__laden[data-phase="2"] .bewerbung__ladebalken span {
  transform: scaleX(1);
}
.public-job .bewerbung__ladehinweis {
  max-width: 36ch;
  font-size: 0.875rem;
  line-height: 1.5;
}
.public-job .bewerbung__körper .bewerbung__datei-entfernen {
  min-height: 44px;
  padding: 8px 12px;
}
.public-job .bewerbung__datei-gewaehlt {
  min-width: 0;
  overflow-wrap: anywhere;
}
.public-job .bewerbung__dateiauswahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas);
  color: var(--gc-ink);
  font-weight: 600;
}
.public-job .bewerbung__dateiauswahl:focus-within {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 3px;
}
.public-job .bewerbung__dateiauswahl:hover {
  background: var(--gc-canvas-2);
}
.public-job .bewerbung__körper .bewerbung__dateiauswahl input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  cursor: pointer;
}
.public-job .telfeld__vorwahl {
  min-width: 48px;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .public-job .bewerbung__ringbogen {
    animation: none;
  }
  .public-job .bewerbung__laden .bewerbung__ladebalken span,
  .public-job .bewerbung__laden[data-phase="2"] .bewerbung__ladehaken {
    transition: none;
  }
}

.public-job .bewerbung__quittung {
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: clamp(34px, 8vw, 72px);
  background: var(--sand);
  color: var(--ink-hell-700);
  text-align: center;
}

.public-job .bewerbung__quittung-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--job-green-soft);
  color: var(--dunkel);
}

.public-job .bewerbung__quittung-symbol svg {
  width: 25px;
  height: 25px;
}

.public-job .bewerbung__quittung-titel {
  color: var(--ink-hell-900);
}

.public-job .bewerbung__quittung-text {
  max-width: 48ch;
  color: var(--ink-hell-700);
  line-height: 1.58;
}

.public-job .bewerbung__quittung-referenz {
  padding: 7px 10px;
  border-radius: var(--public-radius-control);
  background: var(--job-green-soft);
  color: var(--dunkel);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Die Quittung ist eine helle Insel innerhalb des ansonsten dunklen
   Dialogs. Darum darf ihr Abschlussknopf nicht den dunklen Kontextstil von
   .dunkel .btn-kontur erben. */
.public-job .bewerbung__quittung .bewerbung__zurück {
  border-color: var(--gc-dark-card);
  background: var(--gc-dark-card);
  color: var(--gc-on-dark);
}

.public-job .bewerbung__quittung .bewerbung__zurück:hover {
  border-color: var(--gc-dark-2);
  background: var(--gc-dark-2);
  color: var(--gc-on-dark);
}

.public-job .bewerbung__quittung .bewerbung__zurück:focus-visible {
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 3px;
  border-color: var(--gc-dark);
  background: var(--gc-dark-card);
  color: var(--gc-on-dark);
}

/* Die Leiste klebt am unteren Rand und liegt über dem Inhalt, ihr Schatten
   fällt also nach oben. Deshalb steht hier nicht --gc-shadow-card-strong
   selbst: der Token versetzt nach unten und läge außerhalb des Sichtfelds.
   Blur, Deckkraft und Farbe sind seine, nur der Versatz ist gespiegelt. */
.public-job .bewerbleiste {
  /* Die seitenlokale Regel überstimmt den alten Desktop-Ausschluss. */
  display: block;
  background: var(--dunkel-tief);
  border-top-color: oklch(0.98 0.01 150 / 0.16);
  box-shadow: 0 -30px 80px rgb(36 60 36 / 0.18);
}

.public-job .bewerbleiste .btn {
  padding-inline: var(--sp-4);
  text-transform: none;
  letter-spacing: 0;
}

.public-job .bewerbleiste__stelle {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.public-job .bewerbleiste__ort {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die feste Leiste steht bis 1099 px über dem Inhalt (ab 1100 px aus, unten).
   Auch native Fokus- und Ankersprünge brauchen unten Platz für die Leiste. */
html:has(body.public-job) {
  scroll-padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

.public-job a[href="#bewerben"],
.public-job .footer a,
.public-job .footer summary {
  /* 128 px decken die gemessene Leistenhöhe bis 150 Prozent Textgröße ab. */
  scroll-margin-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}

/* Die Reserve am Seitenende schützt auch die letzten Fußlinks.
   footer--reich hält die Spezifität gegenüber public-brand.css gleich. */
.public-job .footer.footer--reich {
  padding-bottom: calc(var(--sp-14) + 84px + env(safe-area-inset-bottom, 0px));
}

/* Patric 09.10.2026: Auf dem Desktop keine klebende Leiste. Ab 1100 px
   steht die Bewerbungskarte neben dem Titel (D7), wie vor dem 06.10.
   Die Sofortanzeige vom 06.10. gilt nur für die einspaltige Ansicht. */
@media (min-width: 1100px) {
  .public-job .bewerbleiste {
    display: none;
  }

  html:has(body.public-job) {
    scroll-padding-bottom: 0;
  }

  .public-job a[href="#bewerben"],
  .public-job .footer a,
  .public-job .footer summary {
    scroll-margin-bottom: 0;
  }

  /* Ohne Leiste braucht der Fuß keine Reserve, Endabstand wie auf den
     übrigen Seiten (public-brand.css, padding-block 62px 0). */
  .public-job .footer.footer--reich {
    padding-bottom: 0;
  }
}

/* Responsive -------------------------------------------------------- */

@media (min-width: 700px) {
  .public-job .bewerbung__felder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-job .bewerbung__gruppe--voll {
    grid-column: 1 / -1;
  }

  .public-job .ansprech__inhalt {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .public-job .ansprech__aktionen {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .public-job .ansprech__aktionen .btn {
    width: auto;
  }
}

@media (min-width: 900px) {
  .public-job .jobseite {
    padding-top: var(--kopf-h);
  }

  /* Zwei Spalten. .stellenspalte und .bewerbung-aside sind die einzigen
     Kinder, die automatische Platzierung reicht deshalb aus. Der frühere
     grid-row-Eingriff ist entfallen: Brotkrume und Stellenkopf liegen
     seit W21 nicht mehr in diesem Raster, sondern im Kopfbereich. */
  .public-job .stellenseite {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
    column-gap: clamp(34px, 4vw, 62px);
    align-items: start;
  }

  /* Erst ab hier gibt es eine rechte Hälfte, auf der ein Foto stehen
     kann, ohne unter die Schrift zu geraten. */
  .public-job .stellenkopf__bild {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -1;
    display: block;
    width: 48%;
    min-width: 320px;
  }

  .public-job .stellenkopf__inhalt {
    min-height: 420px;
  }

  /* Klebender Bereich, gemessen entschieden.

     Erste Fassung war: die ganze Spalte klebt (.bewerbung-aside mit
     position: sticky und align-self: start). Der Codex-Durchgang fand
     am 23.08., dass die Karte zu früh nach oben verschwindet, während
     links noch "Der Betrieb" steht.

     Kein Fehler am Kleben, sondern zu wenig WEG. Nachgemessen bei
     1440 x 900 an der Gärtner-Stelle:
       Raster 924 px, klebender Bereich 635 px  ->  289 px Weg
     Nach 289 px Scrollen ist der Weg aufgebraucht, danach fährt die
     Karte mit nach oben. Mit realistischem Inhalt (6 Aufgaben, 9
     Profilpunkte, 19 Vorteile) wären es 725 px, aber die Demodaten
     tragen nur zwei Punkte je Block, und genau die sieht das Team.

     Jetzt: die Spalte füllt die ganze Rasterhöhe (stretch), und NUR die
     weiße Karte klebt. Das kürzt den klebenden Bereich von 635 auf die
     Kartenhöhe und verlängert den Weg entsprechend. Die Notiz rutscht
     ans Spaltenende (margin-top: auto) und kann der Karte deshalb nicht
     mehr in die Quere kommen. */
  .public-job .bewerbung-aside {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    /* Der mobile Abstand nach oben entfällt, hier steht die Karte
       neben dem Inhalt und nicht darunter. */
    margin-top: 0;
  }

  .public-job .bewerbungskarte {
    position: sticky;
    top: var(--d05-klebeabstand);
  }

  .public-job .footer {
    padding-bottom: var(--sp-20);
  }
}

@media (max-width: 699px) {
  /* Auf dem Telefon ist die Brotkrume ein eindeutiger Rückweg. Der
     aktuelle, ohnehin direkt darunter stehende Stellentitel muss hier
     nicht noch einmal zwei Zeilen belegen. */
  .public-job .brotkrume {
    margin-bottom: 14px;
  }

  .public-job .stellenkopf .brotkrume {
    margin-bottom: 20px;
  }

  .public-job .brotkrume__liste {
    flex-wrap: nowrap;
  }

  .public-job .brotkrume__liste li:first-child,
  .public-job .brotkrume__liste li:last-child {
    display: none;
  }

  .public-job .brotkrume__liste li:nth-child(2)::before {
    content: '←';
    color: var(--marker-licht);
    font-size: 1.05rem;
  }

  .public-job .stellenkopf .stellen__titel {
    max-width: 15ch;
    font-size: clamp(2.25rem, 11vw, 3.45rem);
    line-height: 1.05;
    hyphens: manual;
    overflow-wrap: break-word;
  }

  .public-job .stellenkopf--titel-mittel .stellen__titel {
    max-width: 18ch;
    font-size: clamp(2.05rem, 9.6vw, 3rem);
    line-height: 1.07;
  }

  .public-job .stellenkopf--titel-lang .stellen__titel {
    max-width: none;
    font-size: clamp(1.7rem, 7.2vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    hyphens: none;
    overflow-wrap: normal;
    text-wrap: pretty;
  }

  /* Beide Knöpfe über die volle Breite, damit die Tippfläche stimmt. */
  .public-job .stellenkopf__aktionen > .btn {
    width: 100%;
    justify-content: center;
  }

  .public-job .ansprech__aktionen .btn {
    justify-content: center;
  }
  /* Am Telefon wird derselbe Dialog zum bodennahen Sheet. Kopf und
     Aktion bleiben stehen, nur die Felder scrollen; so bleibt der Flow
     auch bei eingeblendeter Tastatur kontrollierbar. */
  .public-job .bewerbung {
    width: calc(100vw - 8px);
    max-height: calc(100svh - 8px);
    margin: auto auto 0;
    border-radius: 16px 16px 0 0;
  }

  .public-job .bewerbung .filter__kopf {
    padding: 18px 18px 16px;
  }

  .public-job .bewerbung .filter__titel {
    font-size: 1.42rem;
    line-height: 1.12;
  }

  .public-job .bewerbung__unterzeile {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.84rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .public-job .bewerbung__körper {
    padding: 20px 18px max(42px, calc(28px + env(safe-area-inset-bottom, 0px)));
    gap: 20px;
    scroll-padding-bottom: max(42px, calc(28px + env(safe-area-inset-bottom,
      0px)));
  }

  .public-job .bewerbung__felder {
    gap: 18px;
  }

  .public-job .bewerbung__fuß {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 18px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .public-job .bewerbung__fuß .bewerbung__senden {
    order: -1;
    width: 100%;
  }

  .public-job .bewerbung__sicherheit {
    justify-content: center;
    font-size: 0.8rem;
  }
}

@media (max-width: 699px) and (max-height: 650px) {
  .public-job .bewerbung .filter__kopf {
    padding-block: 14px 12px;
  }

  .public-job .bewerbung__kicker {
    margin-bottom: 3px;
  }

  .public-job .bewerbung__körper {
    gap: 16px;
    padding-block: 16px;
  }

  .public-job .bewerbung__fuß {
    padding-block: 10px max(10px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 379px) {
  .public-job #stellenanzeige > .wrap {
    padding-inline: 14px;
  }

  .public-job .stellenkopf .stellen__titel {
    font-size: 2.15rem;
  }

  .public-job .stellenkopf--titel-mittel .stellen__titel {
    font-size: 1.95rem;
  }

  .public-job .stellenkopf--titel-lang .stellen__titel {
    font-size: 1.62rem;
  }

  .public-job .bewerbung .filter__kopf {
    padding-inline: 15px;
  }

  .public-job .bewerbung__körper,
  .public-job .bewerbung__fuß {
    padding-inline: 15px;
  }

  .public-job .bewerbung__kicker {
    font-size: 0.78rem;
  }

  .public-job .bewerbung .filter__titel {
    font-size: 1.3rem;
  }

  .public-job .bewerbung__körper .telfeld__vorwahl {
    padding-inline: 10px;
  }
}

.kein-js .public-job .bewerbung {
  position: static;
  width: min(760px, calc(100% - 2 * var(--gutter)));
  max-height: none;
  margin: var(--sp-12) auto;
  border-radius: var(--public-radius-panel);
  animation: none;
}

.kein-js .public-job .bewerbung__körper {
  overflow-y: visible;
}

/* =====================================================================
   FRONTEND REDESIGN V2 · STELLENDETAIL
   ===================================================================== */

.public-job .jobseite,
.public-job #stellenanzeige {
  background: var(--gc-canvas);
}

.public-job .brotkrume__liste [aria-current] {
  overflow: visible;
  max-width: min(72ch, 100%);
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Der Stellenkopf war bis W20 ein dunkles Kartenblatt auf heller Bühne:
   Rahmen, Radius und ein weit gestreuter Schatten. Seit W21 ist er die
   Fläche selbst und läuft bis an beide Seitenränder. Rahmen, Radius und
   Schatten fallen damit weg, sie hätten eine Kante gezeichnet, wo keine
   mehr ist. Die Grundfarbe ist die unterste Sprosse der Farbleiter,
   nicht die zweite: Weiß hält darauf 15,30:1 statt 10,50:1. */
.public-job .stellenkopf {
  border: 0;
  border-radius: 0;
  background: var(--gc-dark-deep);
  box-shadow: none;
}

/* Die Brotkrume steht seit W21 IM dunklen Kopfbereich. Vorher lag sie
   darüber auf Sand und erbte deshalb Tinten für helle Flächen. Gemessen
   am 23.08. im Browser, gegen die Kopffläche #192919:
     aktueller Eintrag  #4a4a4a   1,73:1
     Links              #555853   1,54:1
     Trenner            #686c66   2,05:1
   Das war unlesbar. Die Rangfolge des Handoffs bleibt erhalten, der
   aktuelle Eintrag ist der hellste, der Trenner der leiseste, nur mit
   den Marken-Tokens statt roher Weißwerte:
     aktueller Eintrag    --gc-on-dark        13,55:1
     Links                --gc-on-dark-soft    8,40:1
     Trenner              --gc-on-dark-faint   6,09:1
     Link beim Überfahren --gc-mint            7,57:1
   Der Handoff nennt für den aktuellen Eintrag Weiß mit 45 Prozent
   Deckung. Das wären 4,49:1 und damit knapp unter der Grenze. */
.public-job .stellenkopf .brotkrume__liste [aria-current] {
  color: var(--gc-on-dark);
}

.public-job .stellenkopf .brotkrume__liste a {
  color: var(--gc-on-dark-soft);
}

.public-job .stellenkopf .brotkrume__liste a:hover,
.public-job .stellenkopf .brotkrume__liste a:focus-visible {
  color: var(--gc-mint);
}

.public-job .stellenkopf .brotkrume__liste li + li::before {
  color: var(--gc-on-dark-faint);
}

.public-job .stellenkopf__branche {
  gap: 9px;
  color: var(--gc-mint);
}

/* Das Rundabzeichen folgt der auf Labelmaß geschrumpften Zeile: 18 px Symbol
   in einem 32-px-Kreis überragten eine 11-px-Versalzeile um das Dreifache. */
.public-job .stellenkopf__branche svg {
  box-sizing: content-box;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  padding: 5px;
  border: 1px solid rgb(110 231 160 / 0.35);
  border-radius: 50%;
  background: rgb(110 231 160 / 0.08);
}

/* Diese Markenschicht liegt hinter dem Grundabschnitt oben und entscheidet.
   Die drei Längenklassen sind hier deshalb noch einmal vollständig gesetzt.

   15ch statt bisher 19ch: der Titel steht jetzt nicht mehr in einer
   eigenen Rasterspalte neben dem Bild, sondern frei auf der Fläche. Ohne
   Deckelung liefe er unter das Foto. 15ch hält ihn vor der Deckungsgrenze
   des Querverlaufs bei 46 Prozent. Zum ch-Maß in Fraunces siehe den
   Kommentar bei der Klasse --titel-lang. */
.public-job .stellenkopf .stellen__titel {
  max-width: 15ch;
  font-family: var(--gc-font-display);
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.public-job .stellenkopf--titel-mittel .stellen__titel {
  max-width: 20ch;
  font-size: clamp(2.15rem, 4.1vw, 3.6rem);
  line-height: 1.04;
}

/* Zur Deckelung siehe den Kommentar am Grundwert weiter oben. */
.public-job .stellenkopf--titel-lang .stellen__titel {
  max-width: 26ch;
  font-size: clamp(2rem, 3.5vw, 2.95rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  hyphens: none;
  overflow-wrap: break-word;
}

.public-job .stellenkopf .stellen__mwd {
  color: var(--gc-on-dark-faint);
  font-family: var(--gc-font-body);
}

/* Bildausschnitt. Das Motiv steht jetzt in einer schmalen, hohen Fläche
   am rechten Rand; 64 Prozent von links rückt den Arbeitsvorgang in die
   Mitte dieser Fläche statt an ihren Rand. */
.public-job .stellenkopf__bild {
  --job-media-focus: 64% 50%;
  background: var(--gc-dark-card);
}

/* Deckkraft 0,86 statt der 0,55 aus dem Handoff. Nachgerechnet gegen ein
   weißes Extremfoto, mit --gc-on-dark-soft als Schrift:
     0,55 -> 2,51:1     0,70 -> 3,70:1
     0,80 -> 4,91:1     0,86 -> 5,83:1
   Über einem dunklen Foto tragen alle vier (8,8 bis 9,7:1). Der helle
   Fall ist hier kein Gedankenspiel: das Branchenbild zeigt helles
   Schotterpflaster, und die Pille sitzt genau darüber.
   0,86 ist der Wert, der schon vor W21 an dieser Stelle stand. */

/* Die klebende Karte trägt die Fläche nicht mehr selbst. Sie ist seit
   W21 nur noch der klebende Rahmen; die weiße Karte darin ist
   .bewerbungskarte, die Notiz darunter steht bewusst außerhalb. */
.public-job .bewerbung-aside {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-job .bewerbungskarte .btn-aktion,
.public-job .stellenkopf .btn-aktion,
.public-job .bewerbleiste .btn-aktion,
.public-job .bewerbung__senden {
  border-color: transparent;
  background: var(--gc-action);
  color: var(--gc-action-ink);
  box-shadow: var(--gc-shadow-action);
}

.public-job .bewerbungskarte .btn-aktion:hover,
.public-job .stellenkopf .btn-aktion:hover,
.public-job .bewerbleiste .btn-aktion:hover,
.public-job .bewerbung__senden:hover {
  background: var(--gc-action-hover);
  color: var(--gc-action-ink);
}

/* Der Glasknopf hebt sich beim Überfahren, er wechselt nicht die Farbe.
   Das ist die Hausregel für alle Knöpfe auf dunklem Grund. */
.public-job .btn-glas:hover {
  border-color: rgb(244 241 232 / 0.35);
  background: rgb(244 241 232 / 0.1);
  color: var(--gc-on-dark);
}

.public-job .stellen__block > h2,
.public-job .ansprech__titel {
  font-family: var(--gc-font-display);
  font-weight: 550;
  letter-spacing: -0.015em;
}

.public-job .bewerbung {
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  box-shadow: var(--gc-shadow-dialog);
}

.public-job .bewerbung::backdrop {
  background: rgb(4 18 10 / 0.76);
}

.public-job .bewerbung .filter__kopf {
  border-bottom: 1px solid var(--gc-line);
  background: var(--gc-surface);
}

.public-job .bewerbung .filter__titel {
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-weight: 560;
}

.public-job .bewerbung__kicker {
  color: var(--gc-link);
}

.public-job .bewerbung__unterzeile {
  color: var(--gc-ink-muted);
}

/* Schließknopf des Bewerbungsdialogs: Bedienelement, braucht 3:1. Der
   dekorative Ton hielt gegen den Dialoggrund nur 1,48:1. */
.public-job .bewerbung .filter__schließen {
  border-color: var(--gc-line-ui);
  background: var(--gc-canvas);
  color: var(--gc-ink);
}

.public-job .bewerbung .filter__schließen:hover {
  border-color: var(--gc-green-deep);
  background: var(--gc-canvas-2);
  color: var(--gc-link);
}

.public-job .bewerbung__körper {
  background: var(--gc-canvas);
}

.public-job .bewerbung__körper .pflicht,
.public-job .bewerbung__whatsapp-zusage,
.public-job .bewerbung__quittung-symbol,
.public-job .bewerbung__quittung-referenz {
  background: color-mix(in srgb, var(--gc-action) 12%, white);
  color: var(--gc-green-deep);
}

.public-job .bewerbung__körper .eingabe:focus {
  border-color: var(--gc-green-deep);
  box-shadow: 0 0 0 3px rgb(43 127 43 / 0.14);
}

.public-job .bewerbung__fuß,
.public-job .bewerbung__quittung {
  background: var(--gc-surface);
}

.public-job .bewerbleiste {
  border-top-color: var(--gc-line-dark-strong);
  background: var(--gc-dark);
}

@media (min-width: 900px) {
  /* Die Textspalte muss vor der Deckungsgrenze des Querverlaufs enden,
     also vor 46 vw. Die ch-Werte an den Titelklassen allein schaffen das
     nicht: in Fraunces ist ch viel schmaler als ein Durchschnittszeichen
     (die Ziffer Null misst rund 0,36 em). Gemessen am 23.08. bei 1280 px
     mit dem 100-Zeichen-Titel "Bauleiter für anspruchsvolle urbane
     Freiräume ...": die Schrift lief bis 786 px, die volle Deckung endet
     bei 589 px. 120 px Titel standen auf dem Foto.

     --job-kopf-spalte ist die ausgerechnete verfügbare Breite. Zwei
     Fälle, deshalb ein min() aus zwei Termen:

       bis 1320 px  füllt der Container die Seite, der Text beginnt am
                    Innenabstand:      46vw - 40px
       ab 1320 px   ist der Container gedeckelt und zentriert, seine
                    linke Kante wandert nach rechts:
                    46vw - (vw - 1320)/2 - 40px  =  620px - 4vw

     Die verfügbare Breite wird zu den ganz großen Bildschirmen hin also
     wieder KLEINER. Von beiden Termen sind 24 px Sicherheit abgezogen.
     Nachgerechnet (verfügbar / Kappe):
       900 px  378 / 350      1120 px 475 / 451
       1440 px 562 / 538      1920 px 543 / 519
       3840 px 466 / 442

     Ein fester Wert ging hier schief: 28rem hielt zwar überall, brach
     aber die drei Eckdaten-Kacheln (zusammen rund 482 px) schon bei
     1440 px um, wo 562 px zur Verfügung stehen.

     Die Kappe steht NUR hier, nicht am Grundwert. Unterhalb von 900 px
     ist das Foto ausgeblendet, dort gibt es nichts zu schützen. */
  .public-job .stellenkopf__inhalt {
    --job-kopf-spalte: min(calc(46vw - 64px), calc(596px - 4vw));
  }

  .public-job .stellenkopf__lead {
    max-width: min(44ch, var(--job-kopf-spalte));
  }

  .public-job .stellenkopf .stellen__titel {
    max-width: min(15ch, var(--job-kopf-spalte));
  }

  .public-job .stellenkopf--titel-mittel .stellen__titel {
    max-width: min(20ch, var(--job-kopf-spalte));
  }

  .public-job .stellenkopf--titel-lang .stellen__titel {
    max-width: min(26ch, var(--job-kopf-spalte));
  }

  .public-job .stellenkopf .brotkrume,
  .public-job .stellenkopf .eckdaten,
  .public-job .stellenkopf .betrieb,
  .public-job .stellenkopf__aktionen {
    max-width: var(--job-kopf-spalte);
  }

  .public-job .stellenkopf .brotkrume {
    margin-bottom: clamp(24px, 3vw, 40px);
  }

  .public-job .stellenkopf__aktionen {
    margin-top: clamp(22px, 2.6vw, 30px);
  }
}

/* Die Rasterfassung des Stellenkopfs ist mit W21 entfallen. Er war bis
   W20 ein zweispaltiges Raster aus Textspalte und Bildspalte, und beide
   Streifen stellten die Spaltenverhältnisse und das Seitenverhältnis des
   Bildes nach. Seit W21 ist der Kopf kein Raster mehr: das Foto liegt als
   absolute Ebene rechts und füllt die ganze Höhe. Ein aspect-ratio hätte
   sie wieder gedeckelt, ein grid-template-columns liefe ins Leere.

   Der Sonderfall „langer Titel am Hochformat-Tablet" braucht die alte
   Stapelung ebenfalls nicht mehr: unterhalb von 900 px ist das Foto
   ausgeblendet, der Text steht dort ohnehin über die volle Breite. */

@media (max-width: 699px) {
  .public-job .job-ohne-js-hinweis {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .public-job .job-ohne-js-hinweis p {
    flex-basis: calc(100% - 34px);
  }

  .public-job .job-ohne-js-hinweis a {
    margin-inline-start: 34px;
  }

  .public-job .stellenkopf .stellen__titel {
    font-size: clamp(2.25rem, 10.6vw, 3.35rem);
  }

  .public-job .stellenkopf--titel-mittel .stellen__titel {
    font-size: clamp(2rem, 9.2vw, 2.9rem);
  }

  .public-job .stellenkopf--titel-lang .stellen__titel {
    font-size: clamp(1.68rem, 7vw, 2.1rem);
    hyphens: none;
    overflow-wrap: break-word;
  }

  .public-job .bewerbung {
    width: calc(100vw - 8px);
    max-height: calc(100svh - 8px);
    border-radius: var(--gc-radius-card) var(--gc-radius-card) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-job .bewerbung[open] {
    animation: none;
  }

  .public-job .bewerbung--sendet .bewerbung__senden::before {
    animation: none;
    border-color: currentColor;
    opacity: 0.55;
  }
}

/* R2-W2: Die zusätzlichen Elemente sind außerhalb der mobilen Schrittfolge
   unsichtbar. Bestehende Desktop-Regeln und Feldgruppen bleiben unverändert. */
.public-job .bewerbung__mobil {
  display: none;
}

@media (max-width: 767.98px) {
  .public-job .bewerbung--schritte.bewerbung--sendet {
    height: fit-content;
    margin: auto;
    border-radius: var(--gc-radius-card);
  }

  .public-job .bewerbung--schritte {
    width: calc(100vw - 8px);
    height: calc(100svh - 8px);
    max-height: calc(100dvh - 8px);
    margin: auto auto 0;
    border-radius: var(--gc-radius-card) var(--gc-radius-card) 0 0;
  }

  .public-job .bewerbung--schritte [data-bewerbung-inaktiv],
  .public-job .bewerbung--schritte:not([data-bewerbung-pruefen]) .bewerbung__senden,
  .public-job .bewerbung--schritte .bewerbung__mobil[hidden] {
    display: none;
  }

  .public-job .bewerbung--schritte .bewerbung__mobil:not([hidden]) {
    display: block;
  }

  .public-job .bewerbung--schritte .filter__kopf {
    flex: 0 0 auto;
    padding: 14px 15px;
  }

  .public-job .bewerbung__fortschritt {
    margin-top: 10px;
    color: var(--gc-link);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .public-job .bewerbung--schritte .bewerbung__körper {
    min-height: 0;
    padding: 20px 15px;
    gap: 20px;
  }

  .public-job .bewerbung--schritte .bewerbung__felder {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .public-job .bewerbung__schritttitel {
    color: var(--gc-ink);
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .public-job .bewerbung__schritttitel:focus {
    outline: 2px solid var(--gc-link);
    outline-offset: 4px;
  }

  .public-job .bewerbung--schritte .eingabe {
    min-width: 0;
    max-width: 100%;
    font-size: 1rem;
  }

  .public-job .bewerbung__zusammenfassung {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .public-job .bewerbung__zusammenfassung > div + div {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gc-line);
  }

  .public-job .bewerbung__zusammenfassung dt {
    color: var(--gc-ink-muted);
    font-size: 0.875rem;
  }

  .public-job .bewerbung__zusammenfassung dd {
    margin: 4px 0 0;
    color: var(--gc-ink);
    white-space: pre-wrap;
  }

  .public-job .bewerbung--schritte .bewerbung__fuß {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 12px 15px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .public-job .bewerbung--schritte .bewerbung__sicherheit {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .public-job .bewerbung--schritte .bewerbung__absenden {
    grid-column: 2;
  }

  .public-job .bewerbung--schritte .bewerbung__mobil.btn {
    min-height: 48px;
    width: 100%;
    padding-inline: 12px;
    font-size: 1rem;
  }

  .public-job .bewerbung--schritte .bewerbung__schritt-zurück {
    border: 1px solid var(--gc-line-ui);
    background: var(--gc-surface);
    color: var(--gc-ink);
  }

  .public-job .bewerbung--schritte .bewerbung__schritt-zurück:hover {
    background: var(--gc-canvas-2);
  }
}

@media print {
  .public-job .stellenkopf {
    display: block !important;
    border: 1px solid #cfc8ba !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
  }

  /* background gehört hier ausdrücklich dazu, aus zwei Gründen.

     Sachlich: im Druck steht diese Schrift auf weißem Papier, nicht auf
     dem Schutzverlauf. Die beiden Schleier und das Foto sind ein paar
     Zeilen weiter unten auf display: none gesetzt.

     Prüfbar: farbleiter-pruefung.py Gruppe 4 rechnet jeden Schleier über
     einem Foto gegen jede Textregel, die denselben Klassenstamm trägt
     (werkzeug/farbleiter-pruefung.py:657-665). Media Queries löst sie
     dabei nicht auf, das ist eine dokumentierte Grenze. Ohne die
     Hintergrundangabe paarte sie deshalb diese DRUCK-Farbe #1a1a1a mit
     dem Bildschirm-Schleier und meldete 1,14:1. Die Regel „bringt eine
     Regel ihre eigene Fläche mit, steht ihre Schrift auf dieser Fläche"
     (ebenda, Zeile 628-631) ist genau der richtige Weg: sie macht die
     tatsächliche Farbstapelung sichtbar, statt eine Sperre auszuhängen.
     Der Schleier selbst bleibt voll geprüft. */
  .public-job .stellenkopf__block,
  .public-job .stellenkopf__lead,
  .public-job .brotkrume a,
  .public-job .brotkrume [aria-current],
  .public-job .stellenkopf .stellen__titel,
  .public-job .stellenkopf .stellen__mwd,
  .public-job .stellenkopf .betrieb__name,
  .public-job .stellenkopf .betrieb__ort,
  .public-job .stellenkopf .eckdaten dt,
  .public-job .stellenkopf .eckdaten dd,
  .public-job .stellenkopf__branche {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  /* background wie oben: auf Papier steht auch das Symbol auf Weiß, und
     die Prüfung braucht die Angabe im selben Regelblock. */
  .public-job .stellenkopf__branche svg,
  .public-job .stellenkopf .betrieb__ort svg {
    background: #ffffff !important;
    color: #15803d !important;
  }

  .public-job .stellenkopf .eckdaten__paar {
    border-color: #cfc8ba !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
  }

  /* Die vier dekorativen Ebenen und die Knopfreihe haben auf Papier
     keinen Zweck. Der Schleier würde die Schrift sogar verdecken, weil
     der Hintergrund hier auf Weiß gesetzt ist. */
  .public-job .stellenkopf__bild,
  .public-job .jobbild__schleier,
  .public-job .jobbild__schimmer,
  .public-job .jobanker,
  .public-job .verwandte,
  .public-job .stellenkopf__aktionen {
    display: none !important;
  }

  /* Die dunkle Betriebskarte wird auf Papier ein weißes Kartenblatt. */
  .public-job .betriebskarte {
    border: 1px solid #cfc8ba !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  .public-job .betriebskarte__name,
  .public-job .betriebskarte__meta {
    color: #1a1a1a !important;
  }

  .public-job .betriebskarte__schimmer {
    display: none !important;
  }

  .public-job .footer {
    display: none !important;
  }
}

/* =====================================================================
   D4 · DESIGN 05 „ZUSAMMEN WACHSEN" · STELLENDETAIL
   ---------------------------------------------------------------------
   Dritte Schicht über der Grundfassung und der V2-Schicht darüber.
   Sie kleidet die Stellenseite nach
   green-careers-designs-…/stelle-gaertner-galabau-stadtgruen-nord.html
   (job-pages.css) neu ein. Der Bewerbungsweg wird nur GEKLEIDET: kein
   Feld, keine ID, kein Skript und kein Stempel-Block ändert sich.

   Warum eine Schicht und kein Neuschnitt der Datei: die beiden älteren
   Schichten tragen den vollständigen Dialog, die Medien (S8), den
   Ladezustand, die Quittung und den Druck. Ein Neuschnitt hätte all das
   mitschreiben müssen, ohne dass der Auftrag es verlangt.

   Farben kommen ausschließlich aus der Markenebene (D1). Zwei Werte
   sind hier lokal, weil die Markenebene sie nicht kennt und
   public-brand.css für D4 gesperrt ist: der Radius der breiten
   Kopffläche und der Abstand der klebenden Spalte.
   ===================================================================== */

.public-job {
  /* D7 (19.09.2026), neu gemessen gegen die aktuelle Entwurfsquelle
     (job-pages.css:56 .jd-cover{border-radius:24px}, Zeile 173 mobil
     {border-radius:17px}): der D6-N1-Befund "Kopfbild ohne Radius"
     stammte aus einer älteren oder anderen Messung und trifft auf
     diese Datei nicht mehr zu. Auftrag D7 selbst verlangt ausdrücklich
     "abgerundete Ecken" (Referenzabschnitt). Beide Werte unten stammen
     wörtlich aus der aktuellen Entwurfsdatei, kein neuer Wert. */
  --d05-radius-bild: 24px;
  --d05-radius-bild-mobil: 17px;
  --d05-klebeabstand: calc(var(--kopf-h) + 16px);
}

/* Der Rahmen: helle Bühne statt dunklem Kopf ------------------------- */

.public-job #stellenanzeige {
  background: var(--gc-canvas);
}

/* Der Kopf trägt seit D4 keine eigene Fläche mehr. Er steht auf der
   Seitenfläche, das Foto liegt als gerahmtes Bild darin. Damit fällt
   auch der Grund weg, aus dem die alte Schicht ihn randlos baute. */
.public-job .stellenkopf {
  position: relative;
  min-height: 0;
  padding-block: clamp(14px, 2vw, 22px) 0;
  border: 0;
  background: transparent;
  color: var(--gc-ink);
  box-shadow: none;
}

/* D6-N1 Punkt 1: Entwurf zeigt das Kopfbild über die volle
   `.jd-container`-Breite (1280px). Kein neuer Wert erfunden, wie schon
   bei D6 Punkt 1: der vorhandene Token --gc-container-wide (1320px,
   public-brand.css:198) war hier bisher ungenutzt, der Kopf lief auf
   dem schmalen --gc-container (1120px). Nur der Kopf (Brotkrume, Titel,
   Bild) ist betroffen, der Koerper darunter (Zweispalter,
   Bewerbungskarte) bleibt bei .wrap/--gc-container, das ist nicht Teil
   dieses Punktes. */
.public-job .stellenkopf__inhalt {
  display: block;
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
  padding-block: 0;
}

/* D6-N1 Punkt 1, Nachtrag nach Bildproben (LIEFERUNG.md) -- ENTFERNT mit
   D7 Nachbesserung 1 (19.09.2026). Diese Regel narrowte den ganzen
   Kopfbereich (Brotkrume UND Titelbild) auf den schmalen Container,
   sobald das Titelbild eines der beiden zu kleinen Branchenmotive
   zeigte. Genau das erzeugte den gemessenen Versatz: Brotkrume und
   Titelbild standen bei x 160 (schmaler Container, 1120px), H1 und
   Spalten aber bei x 60 (breiter Container, 1320px, wie der Seitenkopf).
   jobHeroMedia() in supabase-public.js liefert seit der Nachbesserung
   für jede Branchengruppe ein Motiv ab 1280px Breite; kein
   Branchen-Regelfall braucht diesen Rückzug mehr. Der verbleibende
   Bild-Deckel weiter unten (.stellenkopf__bild:has(...)) bleibt für den
   seltenen Fall eines echten, schmaleren Stellenbilds bestehen, zieht
   aber absichtlich NICHT mehr den ganzen Kopfbereich mit: die Box passt
   sich an die tatsächliche Bildhöhe an (siehe --d05-mindesthoehe-kopf
   weiter unten in dieser Datei), es bleibt höchstens Weißraum RECHTS
   vom Bild, keine Lücke DARUNTER. */

/* Eilleiste (UI-05, 18.09.2026) -- ENTFERNT mit D7 (19.09.2026) --------
   Auftrag D7, Punkt 3: "Der feste 'Jetzt bewerben'-Balken oben
   (.stellenkopf__eilleiste, UI-05) entfällt auf dem Desktop." Das
   Element ist aus job.html entfernt; die frühere Unter-die-Falz-Sorge
   (UI-05) ist mit D7 ohnehin hinfällig, weil die Bewerbungskarte jetzt
   von Anfang an sichtbar neben dem Titel steht (Punkt 2, "Zwei Spalten
   ab Titel"), statt erst weit unten in der einspaltigen Ansicht. Auf
   dem Handy übernimmt weiterhin allein .bewerbleiste. */

/* Krume ------------------------------------------------------------- */

.public-job .stellenkopf .brotkrume {
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

.public-job .stellenkopf .brotkrume__liste {
  font-size: 0.8125rem;
}

.public-job .stellenkopf .brotkrume__liste a,
.public-job .stellenkopf .brotkrume__liste li + li::before {
  background: var(--gc-canvas);
  color: var(--gc-ink-muted);
}

.public-job .stellenkopf .brotkrume__liste a:hover,
.public-job .stellenkopf .brotkrume__liste a:focus-visible {
  background: var(--gc-canvas);
  color: var(--gc-link);
}

.public-job .stellenkopf .brotkrume__liste [aria-current] {
  background: var(--gc-canvas);
  color: var(--gc-ink);
  font-weight: 500;
}

/* Kopfbild ----------------------------------------------------------
   Der Klassenstamm heißt jobbild und NICHT stellenkopf. Grund steht im
   Quelltext von job.html: Gruppe 4 der Farbleiter-Prüfung paart einen
   Schleier mit jeder Farbregel desselben Stamms. Auf diesem Schleier
   steht genau ein Text, die Bildunterschrift, und die trägt denselben
   Stamm. Die dunkle Tinte des hellen Kopfes berührt ihn nie. */

.public-job .stellenkopf__bild {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 2.65;
  border-radius: var(--d05-radius-bild);
  background: var(--gc-canvas-3);
  opacity: 1;
  clip-path: none;
  inset: auto;
}

.public-job .stellenkopf__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--job-media-focus, 50% 40%);
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
}

.public-job .stellenkopf__bild--eigenes img {
  object-position: 50% 50%;
}

@media (max-width: 899px) {
  .public-job .stellenmedien__vorschau {
    scroll-margin-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
}

.public-job .jobbild__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgb(var(--gc-schleier-tief) / 0.86) 0%,
    rgb(var(--gc-schleier-tief) / 0.58) 32%,
    rgb(var(--gc-schleier-tief) / 0.12) 62%,
    rgb(var(--gc-schleier-tief) / 0) 86%);
}

.public-job .jobbild__schimmer {
  position: absolute;
  inset: auto auto 0 0;
  width: min(62%, 460px);
  height: 62%;
  pointer-events: none;
  background: radial-gradient(120% 120% at 0% 100%,
    rgb(18 100 64 / 0.34), rgb(18 100 64 / 0) 68%);
}

.public-job .jobbild figcaption {
  position: absolute;
  inset: auto auto clamp(16px, 2.4vw, 30px) clamp(18px, 2.8vw, 36px);
  max-width: min(72%, 40ch);
  margin: 0;
  padding: 0;
  border: 0;
  backdrop-filter: none;
  color: var(--gc-on-dark);
  font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: left;
  text-shadow: none;
}

/* Die Textspalte des Kopfes ----------------------------------------- */

.public-job .stellenkopf__block {
  display: block;
  max-width: 820px;
  padding-block: clamp(26px, 3.4vw, 42px) 0;
}

.public-job .stellenkopf__branche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gc-link);
}

.public-job .stellenkopf__branche svg {
  width: 15px;
  height: 15px;
  color: var(--gc-link);
  opacity: 1;
}

/* Betriebszeile wie .jd-title-row: Zeichen, Name, Ort, Datum --------- */

.public-job .stellenkopf .betrieb {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
}

.public-job .stellenkopf .betrieb__medien {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gc-line);
  border-radius: 13px;
  background: var(--gc-surface);
}

.public-job .stellenkopf .betrieb__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm) {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.public-job .stellenkopf .betrieb__medien > .stellenkarte__monogramm {
  display: grid;
  place-items: center;
  background: var(--gc-canvas-2);
  color: var(--gc-action);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.public-job .stellenkopf .betrieb__text {
  min-width: 0;
}

.public-job .stellenkopf .betrieb__name {
  margin: 0;
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.public-job .stellenkopf .betrieb__ort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.public-job .stellenkopf .betrieb__ort svg {
  width: 14px;
  height: 14px;
  color: var(--gc-ink-muted);
}

/* Das Veröffentlichungsdatum ist die leiseste Zeile der Gruppe. Es
   trägt .gc-label, damit es als Kleinlabel läuft, aber im gedämpften
   Ton statt im Grün: zwei grüne Label übereinander (Branche und Datum)
   lesen sich als zwei gleich wichtige Aussagen, und das ist es nicht. */
.public-job .stellenkopf #stellen-datum {
  margin-top: 5px;
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* Titel -------------------------------------------------------------- */

.public-job .stellenkopf .stellen__titel {
  max-width: 800px;
  margin: 0 0 20px;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: var(--gc-fw-title);
  line-height: 1.13;
  letter-spacing: -0.05em;
  text-shadow: none;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* D6-N1 Punkt 2: die drei Längenklassen skalierten den Titel bisher
   nach unten (kurz 51,84px, mittel 47,25px als Kappe, lang 33,12px bei
   1440px). Der Entwurf kennt diese Stufung nicht (job-pages.css:68,
   ein einziges clamp(32px,3.6vw,52px) für jeden Titel, lässt lange
   Titel innerhalb von max-width:800px stattdessen umbrechen). Die
   Basisregel oben ist bereits pixelgleich mit dem Entwurf (2rem/3.6vw/
   3.25rem = 32/–/52px), deshalb hier keine eigene Schriftgröße mehr:
   beide Klassen erben jetzt dieselbe Basisformel. max-width bleibt
   deklariert (semantisch weiterhin vorhanden, gleicher Wert wie die
   Basis), nur ohne Wirkung mehr. Umbruch- und Überlaufprobe für den
   100-Zeichen-Testtitel bei 1440/1280/390/320px: siehe LIEFERUNG.md. */
.public-job .stellenkopf--titel-mittel .stellen__titel {
  max-width: 800px;
}

.public-job .stellenkopf--titel-lang .stellen__titel {
  max-width: 800px;
}

.public-job .stellenkopf .stellen__mwd {
  color: var(--gc-ink-muted);
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Faktenkacheln ------------------------------------------------------ */

.public-job .stellenkopf .eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.public-job .stellenkopf .eckdaten__paar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-chip);
  background: var(--gc-surface);
  backdrop-filter: none;
}

.public-job .stellenkopf .eckdaten__paar::before {
  width: 14px;
  height: 14px;
  opacity: 1;
}

.public-job .stellenkopf .eckdaten dd,
.public-job .stellenkopf .eckdaten dd.num {
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* Vorspann ----------------------------------------------------------- */

.public-job .stellenkopf__lead {
  max-width: 62ch;
  margin: 0 0 26px;
  color: var(--gc-ink-muted);
  font-size: var(--gc-fs-lead);
  line-height: 1.8;
  text-shadow: none;
}

/* Aktionen ----------------------------------------------------------- */

.public-job .stellenkopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 4px;
}

.public-job .stellenkopf__aktionen .bewerben__knopf {
  min-height: 52px;
  border-radius: var(--gc-radius-control);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Der zweite Knopf war eine Glasfläche auf dem dunklen Foto. Auf der
   hellen Bühne wird daraus eine Kontur. --gc-line-ui statt --gc-line:
   ein Bedienelement braucht 3:1 (WCAG 1.4.11), und genau darauf achtet
   Gruppe 3 der Farbleiter-Prüfung. */
.public-job .stellenkopf .btn-glas {
  min-height: 52px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  backdrop-filter: none;
}

.public-job .stellenkopf .btn-glas:hover {
  border-color: var(--gc-action);
  background: var(--gc-canvas-2);
  color: var(--gc-action);
}

/* Nachtrag 1, Punkt 13. .btn (assets/app.css) setzt display: inline-flex
   ohne Rücksicht auf das hidden-Merkmal; eine Autorenregel mit eigenem
   display schlägt die Browservorgabe [hidden] { display: none } immer,
   unabhängig von der Spezifität (Lehre aus Zugang-einrichten, Memory
   31.08.). Ohne diese Zeile stünde "Job teilen" schon vor dem Skript,
   das ihn freigibt, sichtbar und ohne Wirkung in der Seite. */
.public-job #job-teilen[hidden] {
  display: none;
}

.public-job .stellenkopf .btn-glas svg {
  width: 17px;
  height: 17px;
  color: currentColor;
}

/* Sprungleiste wie .jd-anchors -------------------------------------- */

.public-job .jobanker {
  display: flex;
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(26px, 3vw, 38px);
  overflow-x: auto;
  border-bottom: 1px solid var(--gc-line);
  font-size: 0.8125rem;
  font-weight: 500;
  scrollbar-width: thin;
}

.public-job .jobanker a {
  display: flex;
  flex: none;
  align-items: center;
  min-height: 50px;
  border-bottom: 2px solid transparent;
  color: var(--gc-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.public-job .jobanker a:hover {
  border-bottom-color: var(--gc-action);
  color: var(--gc-action);
}

/* =====================================================================
   Lesespalte
   ===================================================================== */

.public-job #stellenanzeige > .wrap {
  padding-top: clamp(30px, 4vw, 46px);
}

.public-job .stellenspalte > .stellen__block + .stellen__block:not(.stellen__block--profil) {
  margin-top: clamp(38px, 4.4vw, 56px);
  padding-top: 0;
  border-top: 0;
}

.public-job .stellenspalte > .stellenmedien:not([hidden]) + .stellen__block:not(.stellen__block--profil) {
  margin-top: clamp(38px, 4.4vw, 56px);
  padding-top: 0;
  border-top: 0;
}

.public-job .block__kicker {
  margin: 0 0 11px;
  color: var(--gc-link);
}

.public-job .stellen__block > h2 {
  margin: 0 0 24px;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(1.625rem, 2.4vw, 1.9375rem);
  font-weight: var(--gc-fw-title);
  line-height: 1.23;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Aufgaben: nummerierte Zeilen mit Haarlinie ------------------------- */

.public-job .stellen__block--aufgaben .punktliste {
  display: block;
  counter-reset: gc-aufgabe;
  gap: 0;
}

.public-job .stellen__block--aufgaben .punktliste li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 15px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--gc-line);
  border-radius: 0;
  background: none;
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

.public-job .stellen__block--aufgaben .punktliste li:last-child {
  border-bottom: 0;
}

.public-job .stellen__block--aufgaben .punktliste li::before {
  position: static;
  width: auto;
  height: auto;
  counter-increment: gc-aufgabe;
  content: counter(gc-aufgabe, decimal-leading-zero);
  background: none;
  color: var(--gc-link);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.85;
  letter-spacing: 0.04em;
}

/* Profil: getönter Kasten mit Hakenliste ---------------------------- */

.public-job .stellen__block--profil {
  padding: clamp(24px, 3vw, 30px) clamp(21px, 3vw, 32px);
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-canvas-2);
}

.public-job .stellen__block--profil > h2 {
  margin-bottom: 14px;
  font-size: clamp(1.4375rem, 2vw, 1.625rem);
}

.public-job .stellen__block--profil .punktliste {
  display: block;
  gap: 0;
}

.public-job .stellen__block--profil .punktliste li {
  padding: 9px 0 9px 29px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
}

.public-job .stellen__block--profil .punktliste li::before {
  top: 13px;
  left: 0;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}

/* Vorteile: Karten mit Zeichenfläche -------------------------------- */

/* Zwei Spalten wie .jd-benefits in der Referenz. auto-fit hätte auf der
   breiten Lesespalte drei Karten nebeneinander gestellt; bei zwei oder
   vier Vorteilen (der gemessene Normalfall auf gc-os-dev) bliebe die
   letzte Reihe dann halb leer. */
.public-job .stellen__block--vorteile .benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.public-job .stellen__block--vorteile .benefits > li:not(.benefitgruppe) {
  min-height: 0;
  padding: 22px 22px 22px 22px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

/* Die Referenz setzt über jede Vorteilskarte eine kleine Zeichenfläche.
   Dort sind es vier fest geschriebene Vorteile mit je eigenem Symbol;
   hier kommen sie aus dem Feld benefits und sind je Stelle andere. Ein
   Symbol je Wortlaut wäre eine Wortliste, und Wortlisten sind in diesem
   Projekt schon einmal teuer geworden. Alle Karten tragen deshalb
   dasselbe Blattzeichen. */
.public-job .stellen__block--vorteile .benefits > li:not(.benefitgruppe)::before {
  position: static;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  margin-bottom: 16px;
  transform: none;
  border-radius: 10px;
  background: var(--gc-canvas-2) center / 19px 19px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23126440' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 3c-9-1-16 3-16 10a7 7 0 0 0 7 7c7 0 9-9 9-17Z'/%3E%3Cpath d='M4 21 15 9'/%3E%3C/svg%3E");
}

/* Betrieb: Karte im Design-05-Ton ----------------------------------- */

.public-job .betriebskarte {
  gap: 18px;
  padding: clamp(24px, 3vw, 30px);
  border: 1px solid var(--gc-dark-card);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-dark);
  box-shadow: var(--gc-shadow-card);
}

.public-job .betriebskarte__medien {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}

.public-job .betriebskarte__name {
  color: var(--gc-on-dark);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.public-job .betriebskarte__meta {
  color: var(--gc-on-dark-soft);
  font-size: 0.8125rem;
}

.public-job .betrieb__social {
  border-color: var(--gc-line-dark-ui);
  color: var(--gc-on-dark);
}

/* Medien (S8) im Design-05-Kleid ------------------------------------
   Nur Klassen, die assets/js/stellenmedien.js ohnehin setzt. Die Datei
   selbst bleibt unangetastet. */

.public-job .stellenmedien__titelbild,
.public-job .stellenmedien__grossansicht,
.public-job .stellenmedien__player,
.public-job .stellenmedien__youtube-rahmen {
  border-radius: var(--gc-radius-feature);
}

.public-job .stellenmedien__titel {
  margin: 0 0 16px;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(1.375rem, 1.8vw, 1.5625rem);
  font-weight: var(--gc-fw-title);
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.public-job .stellenmedien__vorschau {
  border: 1px solid var(--gc-line-ui);
  border-radius: 12px;
}

.public-job .stellenmedien__vorschau[aria-pressed="true"] {
  border-color: var(--gc-action);
  box-shadow: 0 0 0 2px var(--gc-action);
}

.public-job .stellenmedien__dauer,
.public-job .stellenmedien__hinweis {
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
}

/* Ansprechpartner ---------------------------------------------------- */

.public-job .ansprech {
  padding: clamp(22px, 2.8vw, 28px);
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
}

.public-job .ansprech__titel {
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  letter-spacing: -0.03em;
}

.public-job .ansprech__aktionen .btn {
  border-color: var(--gc-line-ui);
}

/* Notiz unter der Lesespalte ---------------------------------------- */

/* =====================================================================
   Bewerben-Karte: die dunkle Seitenkarte der Referenz (.jd-apply-card)
   ===================================================================== */

.public-job .bewerbungskarte {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 30px);
  border: 1px solid var(--gc-dark-card);
  border-radius: 20px;
  background: var(--gc-dark);
  box-shadow: var(--gc-shadow-card);
  /* Nachtrag 1, Befund 3.2: ohne diese Zeile bliebe --fokus das
     Waldgrün aus :is(.public-home, .public-page) (public-brand.css
     Zeile 256), weil die Karte selbst keine Klasse .dunkel trägt.
     Waldgrün auf der jetzt dunklen Fläche (--gc-dark) hält nur
     1,72:1. --fokus-dunkel ist der Akzent und hält 9,59:1 gegen
     --gc-dark (public-brand.css Zeile 255). */
  --fokus: var(--fokus-dunkel);
}

/* Der Lichtkreis oben rechts. Er liegt hinter dem Inhalt und trägt
   keinen Text; die Karte selbst bleibt deckend dunkel. */
.public-job .bewerbungskarte::before {
  position: absolute;
  top: -65px;
  right: -70px;
  width: 220px;
  height: 220px;
  content: '';
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(198 241 123 / 0.2), rgb(198 241 123 /
    0) 70%);
}

.public-job .bewerbungskarte > * {
  position: relative;
}

.public-job .bewerbungskarte__kicker {
  margin: 0 0 12px;
  color: var(--gc-accent);
}

.public-job .bewerbungskarte h2 {
  margin: 0 0 14px;
  color: var(--gc-on-dark);
  font-family: var(--gc-font-display);
  font-size: 1.625rem;
  font-weight: var(--gc-fw-title);
  line-height: 1.16;
  letter-spacing: -0.04em;
}

/* Der Hauptknopf der Karte steht auf Dunkel und trägt deshalb den
   Akzent mit dunkler Tinte, nicht das Waldgrün: Grün auf Grün wäre
   zwar erlaubt, aber nicht sichtbar. */
.public-job .bewerbungskarte .bewerben__knopf {
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--gc-radius-control);
  background: var(--gc-accent);
  color: var(--gc-accent-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.public-job .bewerbungskarte .bewerben__knopf:hover {
  background: var(--gc-accent-hover);
  color: var(--gc-accent-ink);
}

.public-job .bewerbungskarte__hinweis {
  margin: 12px 0 0;
  color: var(--gc-on-dark-soft);
  font-size: 0.75rem;
  line-height: 1.7;
}

.public-job .bewerbungskarte__trenner {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--gc-line-dark);
}

.public-job .bewerbungskarte__zeile {
  gap: 14px;
}

.public-job .bewerbungskarte__zeile + .bewerbungskarte__zeile {
  border-top: 1px solid var(--gc-line-dark);
}

.public-job .bewerbungskarte__zeile dt {
  color: var(--gc-on-dark-soft);
  font-size: 0.75rem;
}

.public-job .bewerbungskarte__zeile dd,
.public-job .bewerbungskarte__zeile dd.num {
  color: var(--gc-on-dark);
  font-size: 0.8125rem;
  font-weight: 500;
}

.public-job .bewerbungskarte__fuss {
  margin: 0;
  color: var(--gc-on-dark-soft);
  font-size: 0.75rem;
}

/* Nachtrag 1, Punkt 15. Das Tippziel maß 67x20 px, WCAG 2.2 SC 2.5.8
   verlangt mindestens 24 px in der Höhe. Der Schriftgrad bleibt
   0.75rem (der Auftrag verlangt ausdrücklich Padding, nicht Schriftgrad);
   inline-flex mit padding-block hebt die Klickfläche über die Schrift
   hinaus, ohne den Lesefluss des Absatzes zu verändern. */
.public-job .bewerbungskarte__fuss a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 5px;
  color: var(--gc-accent);
}

.public-job .bewerbungskarte__fuss a svg {
  width: 15px;
  height: 15px;
}

/* =====================================================================
   Bewerbungsdialog: neu gekleidet, nicht umgebaut
   ---------------------------------------------------------------------
   Kein Feld, keine ID, kein Skript. Die Referenz gibt der Bewerbung eine
   helle Karte mit einem Farbstreifen oben (.jd-apply-section:before).
   Der Dialog behält seinen dunklen Kopf, weil sein Rumpf eine
   .hell-insel ist und beides zusammen genau diesen Aufbau ergibt.
   ===================================================================== */

.public-job .bewerbung {
  border: 0;
  border-radius: 24px;
}

.public-job .bewerbung .filter__kopf {
  position: relative;
  border-radius: 24px 24px 0 0;
  background: var(--gc-dark);
}

.public-job .bewerbung .filter__kopf::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  content: '';
  background: linear-gradient(90deg, var(--gc-action) 0%, var(--gc-accent) 80%);
}

.public-job .bewerbung .filter__titel {
  font-family: var(--gc-font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: -0.04em;
}

.public-job .bewerbung__kicker {
  color: var(--gc-accent);
}

.public-job .bewerbung__körper .eingabe {
  border-radius: 10px;
  font-size: 1rem;
}

.public-job .bewerbung__fuß .bewerbung__senden {
  border-radius: var(--gc-radius-control);
}

/* =====================================================================
   Klebende Leiste am Telefon (Referenz: .jd-mobile-dock)
   ===================================================================== */

.public-job .bewerbleiste {
  border-top: 1px solid var(--gc-line);
  background: var(--gc-surface);
  box-shadow: 0 -5px 20px rgb(20 45 29 / 0.06);
  /* Nachtrag 1, Befund 3.1: job.html:1047 trägt weiterhin die Klasse
     .dunkel (eingefroren, Auftrag N1). .dunkel bindet --fokus auf
     --fokus-dunkel (assets/app.css:458), auf der jetzt hellen Leiste
     hält der Akzentring dort nur 1,29:1. Diese Zeile bindet --fokus
     für die Leiste selbst zurück auf hell, Vorbild
     assets/css/public-employer.css:1030-1036. */
  --fokus: var(--fokus-hell);
}

.public-job .bewerbleiste__stelle {
  color: var(--gc-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}

.public-job .bewerbleiste__ort {
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
}

.public-job .bewerbleiste .btn-aktion {
  min-height: 52px;
  border-radius: var(--gc-radius-control);
  background: var(--gc-action);
  color: var(--gc-action-ink);
}

/* =====================================================================
   Diese Jobs könnten auch passen
   ===================================================================== */

.public-job .verwandte {
  border-top: 1px solid var(--gc-line);
  background: var(--gc-canvas-2);
  padding-block: clamp(46px, 5.4vw, 66px);
}

.public-job .verwandte[hidden] {
  display: none;
}

.public-job .verwandte__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.public-job .verwandte__titel {
  margin: 10px 0 0;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(1.625rem, 2.4vw, 1.9375rem);
  font-weight: var(--gc-fw-title);
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.public-job .verwandte__alle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gc-link);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.public-job .verwandte__alle:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-job .verwandte__alle svg {
  width: 16px;
  height: 16px;
}

.public-job .verwandte__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-job .verwandte__karte {
  margin: 0;
  padding: 0;
}

.public-job .verwandte__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  color: var(--gc-ink);
  text-decoration: none;
  transition: transform 0.2s var(--gc-ease), box-shadow 0.2s var(--gc-ease);
}

.public-job .verwandte__link:hover {
  border-color: var(--gc-action);
  box-shadow: var(--gc-shadow-small);
  transform: translateY(-3px);
}

/* Die Referenzkarten tragen ein Foto. Keine der gemessenen Stellen auf
   gc-os-dev führt ein Titelbild, und die drei Kategoriemotive der
   Stellenseite stehen als nicht exportierte Tabelle in
   assets/js/supabase-public.js (jobHeroMedia). Eine zweite Fassung
   dieser Tabelle wäre beim nächsten Motivwechsel still falsch. Die
   Karte trägt deshalb das Kürzel des Betriebs, dieselbe Bauform wie das
   Zeichen in der Titelzeile. */
.public-job .verwandte__zeichen {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 12px;
  background: var(--gc-canvas-2);
  color: var(--gc-action);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.public-job .verwandte__betrieb {
  display: block;
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.public-job .verwandte__stelle {
  display: block;
  margin: 8px 0 18px;
  color: var(--gc-ink);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.public-job .verwandte__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--gc-line);
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
}

.public-job .verwandte__fuss svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gc-action);
}

/* =====================================================================
   Breiten
   ===================================================================== */

@media (min-width: 900px) {
  .public-job .stellenkopf__bild {
    aspect-ratio: 3.1;
    max-height: 430px;
  }

  .public-job .bewerbung-aside {
    top: var(--d05-klebeabstand);
  }
}

@media (max-width: 899px) {
  .public-job .stellenkopf__bild {
    aspect-ratio: 1.9;
  }
}

@media (max-width: 720px) {
  .public-job .stellenkopf {
    padding-top: 10px;
  }

  .public-job .stellenkopf__bild {
    aspect-ratio: 1.35;
    /* D7: neu gemessen, siehe Begründung bei --d05-radius-bild oben.
       job-pages.css:173 setzt am selben Bruchpunkt (720px) 17px, nicht
       0. Die Breite/Proportion dieser Zeile bleibt unangetastet. */
    border-radius: var(--d05-radius-bild-mobil);
  }

  .public-job .jobbild figcaption {
    max-width: calc(100% - 36px);
    font-size: 0.9375rem;
  }

  .public-job .stellenkopf__block {
    padding-top: 24px;
  }

  /* D6-N1 Punkt 2: fester Wert statt clamp, wie im Entwurf
     (job-pages.css:180, mobiler Bruchpunkt 720px: 34px/1,16 fest, kein
     vw-Anteil). Vorher lieferte clamp(1.625rem, 6.2vw, 2.125rem) bei
     390px nur 26px (die 6,2vw-Vorzugsgroesse lag unter der 26px-Mindestgrenze).
     Alle drei Längenklassen weiterhin gemeinsam adressiert (dieselbe
     Vereinheitlichung wie beim Desktop-Wert oben). */
  .public-job .stellenkopf .stellen__titel,
  .public-job .stellenkopf--titel-mittel .stellen__titel,
  .public-job .stellenkopf--titel-lang .stellen__titel {
    max-width: none;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -0.045em;
    text-wrap: initial;
  }

  .public-job .stellenkopf__aktionen {
    flex-direction: column;
    align-items: stretch;
  }

  .public-job .stellenkopf__aktionen .bewerben__knopf,
  .public-job .stellenkopf .btn-glas {
    justify-content: center;
    width: 100%;
  }

  .public-job .jobanker {
    gap: 20px;
    margin-inline: calc(-1 * var(--gc-gutter));
    padding-inline: var(--gc-gutter);
  }

  .public-job .stellen__block--vorteile .benefits {
    grid-template-columns: 1fr;
  }

  .public-job .verwandte__kopf {
    display: block;
  }

  .public-job .verwandte__alle {
    margin-top: 12px;
  }

  .public-job .verwandte__raster {
    grid-template-columns: 1fr;
  }
}

/* Nachtrag 1, Punkt 14. Vier Sprünge sind bei 390 und 320 px breiter als
   der Bildschirm (scrollWidth 441 gegen clientWidth 390 beziehungsweise
   320); overflow-x: auto machte sie zwar bedienbar, aber ohne
   Verlaufsmaske und ohne sichtbaren Rollbalken (macOS blendet
   Überlagerungs-Rollbalken erst bei Berührung ein) sah niemand, dass
   dort noch etwas folgt. Entscheidung aus Auftrag N1 (14): unter 480 px
   bricht die Leiste in zwei Zeilen um, damit scrollWidth gleich
   clientWidth wird und nichts verborgen bleibt. */
@media (max-width: 479px) {
  .public-job .jobanker {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 10px;
  }
}

/* D5a, 17.09.2026: Die .gc-label-Rückholregel, die hier stand, ist entfernt,
   wirkungslos geworden. public-brand.css senkt .gc-label unter 340 px nicht
   mehr auf 11 px, sondern hält 12 px global (AUFTRAG_D5.md, D5a Punkt 1,
   entscheidet die hier seit D2/D3/D4 offene Frage). Die restlichen zwei Regeln
   in diesem Medienblock (Bildhöhe, Eckdaten-Abstand) bleiben unverändert. */
@media (max-width: 339px) {
  /* D6-N1 Punkt 2: Entwurf senkt den Titel unter 360px zusätzlich auf
     30px (job-pages.css:201). Unser nächster vorhandener Bruchpunkt
     liegt bei 339px (nicht 360), das deckt den einzigen laut Auftrag
     gemessenen schmalen Testwert (320px) ab. */
  .public-job .stellenkopf .stellen__titel,
  .public-job .stellenkopf--titel-mittel .stellen__titel,
  .public-job .stellenkopf--titel-lang .stellen__titel {
    font-size: 30px;
  }

  .public-job .stellenkopf__bild {
    aspect-ratio: 1.2;
  }

  .public-job .stellenkopf .eckdaten__paar {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-job .verwandte__link {
    transition: none;
  }

  .public-job .verwandte__link:hover {
    transform: none;
  }
}

/* =====================================================================
   D7 (19.09.2026): Stellenseite nach Frederiks Entwurf
   ---------------------------------------------------------------------
   Auftrag: 2026-09-16_Website-Designänderungen_von_Frederik/
   D7_STELLE_NACH_ENTWURF/AUFTRAG_D7.md. Zwei Strukturänderungen:

   1. Betriebszeile, Titel, Eckdaten, Vorspann, Aktionen und Sprungleiste
      stehen nicht mehr im Kopfbereich (.stellenkopf, randlos über die
      Seitenbreite), sondern als erstes Kind von .stellenspalte, gepackt
      in .stellenspalte__kopf. So beginnt die zweispaltige Ansicht mit
      der klebenden Bewerbungskarte direkt am Titel (Punkt 2 "Zwei
      Spalten ab Titel"), .stellenseite selbst (weiter oben in dieser
      Datei) brauchte dafür KEINE Änderung: sie trennt schon immer ihre
      zwei Kinder .stellenspalte/.bewerbung-aside, nur steht jetzt mehr
      im ersten Kind. Alle Werte unten sind wörtlich aus der bisherigen
      ".stellenkopf X"-Fassung übernommen, nur der Anker wechselt. Eine
      Handvoll Klassen sind eigenständige BEM-Namen ohne Vorfahren-
      Bindung (.stellenkopf__lead, .stellenkopf__aktionen,
      .stellenkopf__branche, .jobanker, #job-teilen, #stellen-datum) und
      brauchten deshalb gar keine Änderung. Einziger Skriptfund mit
      Vorfahren-Bindung: supabase-public.js:2283 (".stellenkopf
      .betrieb__medien"), umgestellt auf ".betrieb__medien" (die Klasse
      ist auf dieser Seite nur an dieser einen Stelle vergeben, siehe
      .betriebskarte__medien für das andere, umbenannte Vorkommen).

   2. Der Bewerbungsdialog ist der Abschnitt #bewerben geworden (Punkt 4
      "Bewerbung direkt auf der Seite"). Gestaltung wie .jd-apply-section:
      helle Fläche, dünner Verlaufsstreifen oben, zwei Merkmale "Ohne
      Anschreiben"/"Ohne Registrierung" (wörtlich aus dem Entwurf, beide
      neu). Die Feldspalten (.bewerbung__felder, zwei Spalten ab 700px)
      gab es in der CSS-Kaskade schon vorher; die modale Breite
      (min(560px,...)) hat sie nur nie sichtbar werden lassen.
   ===================================================================== */

.public-job .stellenspalte__kopf {
  margin-bottom: clamp(36px, 5vw, 52px);
}

.public-job .stellenspalte__kopf .betrieb {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
}

.public-job .stellenspalte__kopf .betrieb__medien {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gc-line);
  border-radius: 13px;
  background: var(--gc-surface);
}

.public-job .stellenspalte__kopf .betrieb__medien > :is(.stellenkarte__logo, .stellenkarte__monogramm) {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.public-job .stellenspalte__kopf .betrieb__medien > .stellenkarte__monogramm {
  display: grid;
  place-items: center;
  background: var(--gc-canvas-2);
  color: var(--gc-action);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.public-job .stellenspalte__kopf .betrieb__text {
  min-width: 0;
}

.public-job .stellenspalte__kopf .betrieb__name {
  margin: 0;
  color: var(--gc-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.public-job .stellenspalte__kopf .betrieb__ort {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.public-job .stellenspalte__kopf .betrieb__ort svg {
  width: 14px;
  height: 14px;
  color: var(--gc-ink-muted);
}

/* #stellen-datum ist eine ID, keine Vorfahren-Bindung nötig. */
.public-job #stellen-datum {
  margin-top: 5px;
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.public-job .stellenspalte__kopf .stellen__titel {
  max-width: 800px;
  margin: 0 0 20px;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: var(--gc-fw-title);
  line-height: 1.13;
  letter-spacing: -0.05em;
  text-shadow: none;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.public-job .stellenspalte__kopf .stellen__mwd {
  color: var(--gc-ink-muted);
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.public-job .stellenspalte__kopf .eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.public-job .stellenspalte__kopf .eckdaten__paar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-chip);
  background: var(--gc-surface);
  backdrop-filter: none;
}

.public-job .stellenspalte__kopf .eckdaten__paar::before {
  width: 14px;
  height: 14px;
  opacity: 1;
}

.public-job .stellenspalte__kopf .eckdaten dd,
.public-job .stellenspalte__kopf .eckdaten dd.num {
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.public-job .stellenspalte__kopf .btn-glas {
  min-height: 52px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  backdrop-filter: none;
}

.public-job .stellenspalte__kopf .btn-glas:hover {
  border-color: var(--gc-action);
  background: var(--gc-canvas-2);
  color: var(--gc-action);
}

.public-job .stellenspalte__kopf .btn-glas svg {
  width: 17px;
  height: 17px;
  color: currentColor;
}

@media (max-width: 720px) {
  .public-job .stellenspalte__kopf .stellen__titel {
    max-width: none;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -0.045em;
    text-wrap: initial;
  }
}

@media (max-width: 339px) {
  .public-job .stellenspalte__kopf .stellen__titel {
    font-size: 30px;
  }

  .public-job .stellenspalte__kopf .eckdaten__paar {
    padding-inline: 10px;
  }
}

/* Unter 900px, wo .stellenseite auf eine Spalte fällt (Regel weiter oben
   in dieser Datei), zeigt der Entwurf die Bewerbungskarte gar nicht mehr
   (job-pages.css:190, ".jd-apply-card{display:none}" ab 720px): der
   Bewerbknopf im Kopf, der Abschnitt #bewerben und die untere Leiste
   tragen den Weg dorthin schon. Hier gilt der Bruchpunkt dieser Seite
   (900px, nicht die 720px des Entwurfs), damit die Karte nie in der
   einspaltigen Ansicht zwischen 720 und 899px hängen bleibt, wo sie
   weder klebt noch von der unteren Leiste ersetzt würde. */
@media (max-width: 899px) {
  .public-job .bewerbung-aside {
    display: none;
  }
}

/* =====================================================================
   Bewerbung direkt auf der Seite (Punkt 4, .jd-apply-section)
   ===================================================================== */

.public-job .bewerbung {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--gc-line-strong);
  border-radius: 24px;
  background: var(--gc-surface);
  box-shadow: var(--gc-shadow-card);
  color: var(--gc-ink);
  overflow: hidden;
  scroll-margin-top: var(--d05-klebeabstand);
}

.public-job .bewerbung::backdrop {
  display: none;
}

.public-job .bewerbung::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  content: '';
  background: linear-gradient(90deg, var(--gc-action) 0%, var(--gc-accent) 80%);
}

/* Befund A (Feedback Patric, 26.09.2026), zweite Ursache: "#bewerben"
   zeichnet oben (padding/border/border-radius/box-shadow) und den
   Farbbalken (::before) IMMER, unabhängig davon, welche Formfassung
   gerade drin steckt. Solange V1 oder V2 laufen, ist das richtig: sie
   haben keine eigene Kachel. V3 bringt seit diesem Auftrag eine eigene
   Kachel mit (.bewerbung-v3__wrapper, siehe weiter unten, eigener Rahmen
   plus eigener Schatten aus denselben Tokens). Bleibt die äußere Hülle
   daneben unverändert bestehen, entsteht "Kachel in der Kachel": zwei
   Rahmen, zwei Farbbalken (Bild 01 und 07). :has() trägt hier bewusst ein
   ID-Selektor im Argument (#bewerbung-v3), das schlägt jede rein
   klassenbasierte Regel für ".bewerbung" in dieser Datei unabhängig von
   der Reihenfolge; V1 und V2 ändern sich nicht, weil #bewerbung-v3 bei
   ihnen hidden bleibt und :not([hidden]) dann nicht greift. */
/* W-16d: nur im Seitenfluss. Im mobilen Dialog gelten die Dialogregeln
   (Safe-Area oben, 16px seitlich) unverändert, sonst klebte der
   Dialogtitel am Rand (Sol W-16d R1). */
.public-job .bewerbung:not(.bewerbung-funnel .bewerbung):has(> #bewerbung-v3:not([hidden])) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* W-16e Punkt A: overflow:hidden (Grundstil oben) schnitt den eigenen,
     leichten Schatten der Kachel (.bewerbung-v3__wrapper) rechteckig ab und
     sah wie ein zweiter Rahmen aus (Hülle 53 bis 967px, Kachel 70 bis 950px
     bei 1440px). Nur im Seitenfluss: der mobile Dialog bleibt unverändert
     (eigener Selektor .bewerbung-funnel .bewerbung oben ausgenommen). */
  overflow: visible;
}
.public-job .bewerbung:not(.bewerbung-funnel .bewerbung):has(> #bewerbung-v3:not([hidden]))::before {
  content: none;
}
/* W-16c (26.09.2026): Der alte Kopf ist bei aktivem V3 nur außerhalb des
   mobilen Dialogs doppelt (die V3-Kachel hat ihren eigenen Kopf). Im
   geöffneten Dialog trägt er Dialogtitel und Schließen-Kreuz; W-16b hatte
   ihn per hidden auch dort entfernt, das Kreuz fehlte. */
.public-job .bewerbung:has(> #bewerbung-v3:not([hidden])) > .bewerbung__kopf {
  display: none;
}
.public-job .bewerbung-funnel .bewerbung:has(> #bewerbung-v3:not([hidden])) > .bewerbung__kopf {
  display: flex;
}


.public-job .bewerbung .filter__kopf {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 clamp(16px, 2vw, 20px);
  border: 0;
  border-radius: 0;
  background: none;
}

.public-job .bewerbung .filter__kopf::after {
  content: none;
}

/* Das Schließkreuz bleibt im Quelltext (assets/js/bewerbung-schritte.js:179
   sucht es per querySelector als Tab-Ziel und liefe sonst auf ein
   .focus() an null), ist aber dauerhaft verborgen: ein Abschnitt im
   Lesefluss hat nichts zu schließen. Dieselbe Begründung trägt
   .kein-js .filter__schließen in assets/app.css für den anderen
   Rückfallweg. */
.public-job .bewerbung .filter__schließen {
  display: none;
}

.public-job .bewerbung__kopftext {
  min-width: 0;
}

.public-job .bewerbung .filter__titel {
  margin: 4px 0 8px;
  color: var(--gc-ink);
  font-family: var(--gc-font-display);
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  font-weight: var(--gc-fw-title);
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-wrap: initial;
}

.public-job .bewerbung__kicker {
  display: block;
  max-width: none;
  color: var(--job-kicker);
}

.public-job .bewerbung__unterzeile {
  margin: 0;
  max-width: 56ch;
  color: var(--gc-ink-muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Neu, wörtlich aus dem Entwurf (.jd-application-benefits): "Ohne
   Anschreiben" und "Ohne Registrierung". */
.public-job .bewerbung__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 clamp(20px, 2.4vw, 26px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--gc-line);
  color: var(--gc-ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
}

.public-job .bewerbung__merkmale span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.public-job .bewerbung__merkmale svg {
  width: 16px;
  height: 16px;
  color: var(--gc-action);
}

.public-job .bewerbung__körper {
  padding: 0;
  overflow: visible;
}

.public-job .bewerbung__fuß {
  align-items: flex-start;
  padding: clamp(18px, 2vw, 22px) 0 0;
  border: 0;
}

.public-job .bewerbung .filter__senden {
  max-width: 320px;
}

.public-job .bewerbung-v2.hell-insel,
.public-job .bewerbung__laden.hell-insel,
.public-job .bewerbung__quittung.hell-insel {
  padding-inline: 0;
}

@media (min-width: 900px) {
  .public-job .bewerbung .filter__senden {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .public-job .bewerbung {
    padding: clamp(22px, 5vw, 26px) 20px;
    border-radius: 20px;
  }

  .public-job .bewerbung .filter__titel {
    font-size: 1.75rem;
  }

  .public-job .bewerbung__merkmale {
    font-size: 0.75rem;
    gap: 6px 16px;
  }
}

/* D7 (19.09.2026), Nachtrag nach Messung bei 320px: 2px waagerechter
   Überlauf gefunden und auf .jobanker zurückgeführt.

   .jobanker liegt seit D7 in .stellenspalte__kopf, also in
   .stellenspalte, also in "#stellenanzeige > .wrap" (Abschnitt "Zwei
   Spalten ab Titel" oben). Genau dieser Wrap bekommt unter 379px eine
   eigene, engere Regel weiter oben in dieser Datei
   (".public-job #stellenanzeige > .wrap { padding-inline: 14px; }",
   ca. Zeile 1977, nicht Teil dieses Auftrags). .jobankers eigene
   Ausbruchsformel (weiter oben, "@media (max-width: 720px)") rechnet
   dagegen unverändert mit "calc(-1 * var(--gc-gutter))", das sind unter
   379px 16px, nicht 14px: die Differenz von 2px auf jeder Seite ist
   genau der gemessene Überlauf (scrollWidth 322 statt 320 bei 320px
   Breite).

   Vorher lag .jobanker in .stellenkopf__inhalt, einem ANDEREN Wrap
   (Kind von <header>, kein Kind von #stellenanzeige), den die 379px-
   Regel nie traf; der Fehler war folglich unsichtbar, bis die
   Sprungleiste mit D7 umgezogen ist. Der Wert unten ist keine neue Zahl,
   sondern derselbe 14px-Wert, den #stellenanzeige > .wrap an dieser
   Stelle bereits verwendet. */
@media (max-width: 379px) {
  .public-job .jobanker {
    margin-inline: -14px;
    padding-inline: 14px;
  }
}

/* D7, Nachtrag nach dem Browserdurchlauf: der Fokusring-Rundgang meldete
   "Alle Jobs entdecken" (.verwandte__alle) bei 390 und 320px als "in der
   Mitte verdeckt". Der gemeldete "Deckel"-Wert (72px) ist nur die Höhe
   der festen KOPFleiste, die die Prüfung bei JEDEM Stopp berechnet;
   selbst nachgemessen (siehe LIEFERUNG.md) war der tatsächliche
   Verdecker an dieser Stelle NICHT der Kopf (der Link liegt bei
   scrollY > 3300px, weit unterhalb der ersten 72px), sondern
   ".bewerbleiste" (".wrap bewerbleiste__inner" traf exakt den
   Mittelpunkt), die feste UNTERE Leiste ("Bewirb dich jetzt"). Gleicher
   Befund, gleiche Ursache und gleiche Lösung wie N-2 bei den Fußlinks
   weiter oben in dieser Datei (".footer a { scroll-margin-bottom ... }"):
   der native Tab-Sprung (el.scrollIntoView({block:'nearest'}) in
   werkzeug/design05-stelle-browser.mjs) kennt die fest positionierte
   Leiste nicht von sich aus und legt den Link bündig an die untere
   Sichtfensterkante, genau dort, wo die Leiste liegt. Dieselbe
   128px-Reserve wie dort, jetzt auch hier. */
@media (max-width: 899px) {
  .public-job .verwandte__alle,
  .public-job .verwandte__link {
    scroll-margin-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
}

/* =====================================================================
   D10 (20.09.2026), Stellenseite Teil A
   Cover, Raster, klebende Bewerbung, strukturierte Vorteile und
   jederzeit erreichbare Bewerbung auf kleinen Breiten.
   ===================================================================== */

.public-job #stellenanzeige > .wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
  margin-inline: auto;
  padding-inline: var(--gc-gutter);
  padding-top: 42px;
  padding-bottom: 75px;
}

.public-job .stellenseite {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 76px;
  align-items: start;
}

.public-job .stellenspalte {
  min-width: 0;
}

.public-job .stellenspalte__kopf {
  margin-bottom: 48px;
}

.public-job .stellenkopf__lead {
  max-width: 730px;
  margin-bottom: 26px;
  font-size: 1rem;
  line-height: 1.9;
}

.public-job .stellenkopf__bild {
  aspect-ratio: 2.65;
  border-radius: 22px;
}

.public-job .jobbild__schleier {
  background: linear-gradient(0deg, rgb(var(--gc-schleier-tief) / .82) 0%,
    rgb(var(--gc-schleier-tief) / .66) 48%, transparent 74%);
}

.public-job .jobbild figcaption {
  bottom: 30px;
  left: 36px;
  display: grid;
  gap: 7px;
  max-width: min(72%, 730px);
  /* 01.10.2026: Die Unterschrift braucht unabhängig vom Bildausschnitt
     einen AA-Untergrund. 74 % des vorhandenen dunklen Markentokens
     halten selbst über reinem Weiß mehr als 6:1 zur weißen Schrift.
     Der großflächige Bildverlauf und die Glyphprobe bleiben erhalten. */
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgb(var(--gc-schleier-tief) / .74);
}

.public-job .jobbild__overline {
  color: var(--gc-action-ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.public-job .jobbild__satz {
  color: var(--gc-action-ink);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.18;
}

.public-job .jobbild__betrieb {
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2, .65, .3, 1), background-color .2s
    ease;
}

.public-job .jobbild__betrieb svg {
  width: 17px;
  height: 17px;
}

.public-job .jobbild__betrieb:hover {
  background: var(--gc-surface);
  transform: translateY(-2px);
}

.public-job .jobbild__betrieb:focus-visible {
  outline: 3px solid var(--gc-surface);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--gc-dark-deep);
}

.public-job .stellenspalte > .stellen__block + .stellen__block,
.public-job .stellenspalte > .stellenmedien:not([hidden]) + .stellen__block {
  margin-top: 48px;
}

.public-job .bewerbung-aside {
  position: sticky;
  top: var(--d05-klebeabstand);
  align-self: start;
}

.public-job .bewerbungskarte {
  padding: 28px;
  border-color: var(--gc-dark-card);
  background: var(--gc-dark);
  box-shadow: 0 16px 50px rgb(27 63 35 / .07);
}

.public-job .bewerbungskarte__kicker {
  color: var(--gc-accent);
  font-size: 9px;
  letter-spacing: .12em;
}

.public-job .bewerbungskarte h2 {
  font-size: 30px;
  letter-spacing: -0.04em;
}

.public-job .bewerbungskarte__merken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--gc-line-dark-ui);
  border-radius: 10px;
  background: transparent;
  color: var(--gc-on-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.2, .65, .3, 1), background-color .2s
    ease;
}

.public-job .bewerbungskarte__merken svg {
  width: 18px;
  height: 18px;
}

.public-job .bewerbungskarte__merken:hover:not(:disabled) {
  transform: translateY(-2px);
}

.public-job .bewerbungskarte__merken[aria-pressed="true"] {
  border-color: transparent;
  background: var(--gc-action-hover);
  color: var(--gc-accent);
}

.public-job .bewerbungskarte__merken[aria-pressed="true"] svg {
  fill: currentColor;
}

.public-job .bewerbungskarte__merken:focus-visible {
  outline: 3px solid var(--fokus-dunkel);
  outline-offset: 3px;
}

.public-job .bewerbungskarte__zeile {
  justify-content: space-between;
}

.public-job .bewerbungskarte__zeile[data-zeile="frist"] {
  display: none;
}

.public-job .bewerbungskarte__zeile dt {
  color: var(--gc-on-dark-soft);
  font-size: 11px;
}

.public-job .bewerbungskarte__zeile dd,
.public-job .bewerbungskarte__zeile dd.num {
  max-width: 58%;
  color: var(--gc-on-dark);
  font-size: 11px;
  text-align: right;
}

.public-job .bewerbungskarte__fuss {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gc-on-dark-soft);
  font-size: 11px;
}

.public-job .bewerbungskarte__fuss svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--gc-accent);
}

.public-job .stellen__block--vorteile .benefits {
  display: grid;
  gap: 13px;
}

.public-job .stellen__block--vorteile .benefits--einfach {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-job .stellen__block--vorteile .benefits--einfach .benefit {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--gc-line);
  border-radius: 0;
  background: transparent;
  color: var(--gc-ink-soft);
  font-size: 12px;
  font-weight: 400;
}

/* Die einfache Darstellung zeichnet die semantisch zugeordneten SVGs aus
   supabase-public.js. Das alte Blatt-Pseudo-Element würde bei weniger als
   sechs Benefits zusätzlich erscheinen. */
.public-job .stellen__block--vorteile .benefits--einfach .benefit::before {
  display: none;
  content: none;
}

.public-job .benefits--einfach .benefit svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--gc-action);
}

.public-job .stellen__block--vorteile .benefits--gruppen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-job .stellen__block--vorteile .benefitgruppe {
  min-height: 0;
  padding: 24px;
  border: 1px solid var(--gc-line);
  border-radius: 15px;
  background: var(--gc-surface);
}

.public-job .stellen__block--vorteile .benefitgruppe--alltag,
.public-job .stellen__block--vorteile .benefitgruppe--weitere {
  /* FB20-28: Jede Kategorie belegt genau eine gleich breite Rasterspalte. */
  grid-column: auto;
}

.public-job .benefitgruppe__kopf {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.public-job .benefitgruppe__titel {
  margin: 0;
  color: var(--gc-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.public-job .benefitgruppe__liste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-job .benefitgruppe--alltag .benefitgruppe__liste,
.public-job .benefitgruppe--weitere .benefitgruppe__liste {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 24px;
}

.public-job .stellen__block--vorteile .benefitgruppe__liste li {
  position: relative;
  min-height: 30px;
  padding: 4px 0 4px 13px;
  color: var(--gc-ink-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.public-job .stellen__block--vorteile .benefitgruppe__liste li::before {
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--gc-action);
}

@media (max-width: 1139px) {
  .public-job .stellenkopf__bild {
    aspect-ratio: 2.1;
  }
}

@media (max-width: 1099px) {
  .public-job .stellenspalte {
    width: 100%;
    min-width: 0;
  }

  .public-job #stellenanzeige > .wrap {
    padding-top: 32px;
  }

  .public-job .stellenseite {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .public-job .bewerbung-aside {
    position: static;
    order: -1;
    display: block;
    width: 100%;
    margin: 0 0 48px;
  }

  .public-job .bewerbungskarte {
    max-width: none;
  }

  .public-job .bewerbleiste {
    display: block;
  }
}

@media (max-width: 900px) {
  .public-job #stellenanzeige > .wrap {
    width: calc(100% - 64px);
  }

  .public-job .stellenkopf__bild {
    aspect-ratio: 2;
  }

  .public-job .benefitgruppe--alltag .benefitgruppe__liste,
  .public-job .benefitgruppe--weitere .benefitgruppe__liste {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .public-job #stellenanzeige > .wrap {
    width: calc(100% - 64px);
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .public-job .stellenkopf__bild {
    aspect-ratio: 1.6;
  }

  .public-job .jobbild figcaption {
    right: 20px;
    bottom: 20px;
    left: 20px;
    max-width: none;
  }

  .public-job .jobbild__satz {
    font-size: 18px;
  }

  .public-job .jobbild__betrieb {
    top: 16px;
    right: 16px;
    bottom: auto;
    padding: 10px 12px;
  }

  .public-job .jobbild__betrieb svg {
    width: 16px;
    height: 16px;
  }

  .public-job .jobbild__betrieb:focus-visible {
    outline-color: var(--fokus-hell);
    box-shadow: none;
  }

  .public-job .stellen__block--vorteile .benefits--einfach,
  .public-job .stellen__block--vorteile .benefits--gruppen {
    grid-template-columns: 1fr;
  }

  .public-job .stellen__block--vorteile .benefitgruppe--alltag,
  .public-job .stellen__block--vorteile .benefitgruppe--weitere {
    grid-column: auto;
  }

  .public-job .bewerbleiste {
    min-height: calc(72px + env(safe-area-inset-bottom, 0px));
    background: rgb(255 255 255 / .93);
  }

  .public-job .bewerbleiste__inner {
    min-height: 72px;
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  }

  .public-job .bewerbleiste .bewerben__knopf,
  .public-job .bewerbleiste__merken {
    min-height: 48px;
    height: 48px;
  }

  .public-job .bewerbleiste__merken {
    flex-basis: 48px;
    width: 48px;
    min-width: 48px;
  }

  .public-job .bewerbleiste .bewerben__knopf {
    background: var(--gc-action);
  }
}

@media (max-width: 390px) {
  .public-job #stellenanzeige > .wrap {
    width: calc(100% - 32px);
  }

  .public-job .jobbild__betrieb {
    font-size: 0;
  }

  .public-job .jobbild__betrieb svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-job .jobbild__betrieb,
  .public-job .bewerbungskarte__merken {
    transition: none;
  }
}

/* =====================================================================
   D11 (20.09.2026), Stellenseite Teil B1
   Vorspann und Sprünge, gemeinsame Medienbühne im Betrieb.
   ===================================================================== */

.public-job .stellenkopf__lead {
  max-width: 730px;
  margin-bottom: 18px;
  color: #556b4e;
  font-size: 16px;
  line-height: 1.9;
}

.public-job .stellenkopf__weiterlesen {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gc-link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.public-job .stellenkopf__weiterlesen:hover {
  color: var(--gc-green-hover);
}

.public-job .jobanker {
  gap: 28px;
  margin: 0 0 26px;
  font-size: 12px;
}

.public-job .jobanker a {
  min-height: 53px;
  color: #4e6a46;
}

.public-job .jobanker a[aria-current="location"] {
  border-bottom-color: #174d30;
  color: #142d23;
}

.public-job .stellen__block > h2 {
  scroll-margin-top: var(--d05-klebeabstand);
}

.public-job .stellen__block--betrieb {
  scroll-margin-top: var(--d05-klebeabstand);
}

.public-job .stellen__block--betrieb > h2 {
  margin-bottom: 17px;
}

.public-job .betrieb__titelname,
.public-job .stellen__block--betrieb > h2 em {
  display: block;
}

.public-job .betrieb__titelname {
  color: #142d23;
}

.public-job .stellen__block--betrieb > h2 em {
  color: #639828;
  font-style: normal;
}

.public-job .betrieb__beschreibung {
  max-width: 730px;
  margin: 0 0 26px;
  color: #556b4e;
  font-size: 14px;
  line-height: 1.85;
}

.public-job .betrieb__beschreibung-mehr {
  min-height: 44px;
  margin: -12px 0 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gc-link);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.public-job .stellen__block--betrieb .stellenmedien {
  margin: 0 0 26px;
}

.public-job .stellenmedien__buehne {
  display: block;
}

.public-job .stellenmedien__grossansicht {
  position: relative;
  display: block;
  margin: 0;
  /* Die innere Bühne bestimmt das Bildformat. Die äußere Figure wächst
     zusätzlich um Bildunterschrift und Zähler. */
  aspect-ratio: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  border-radius: 16px;
  background: #e8eedc;
}

.public-job .stellenmedien__grossbild,
.public-job .stellenmedien__player,
.public-job .stellenmedien__video-platzhalter,
.public-job .stellenmedien__youtube-rahmen,
.public-job .stellenmedien__youtube-inhalt {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.public-job .stellenmedien__grossbild {
  height: 100%;
  object-fit: contain;
}

.public-job .stellenmedien__player,
.public-job .stellenmedien__video-platzhalter,
.public-job .stellenmedien__youtube-rahmen,
.public-job .stellenmedien__youtube-inhalt {
  aspect-ratio: 16 / 9;
}

.public-job .stellenmedien__youtube-inhalt {
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 24px;
  background: #e8eedc;
  text-align: center;
}

.public-job .stellenmedien__video-platzhalter {
  position: relative;
  overflow: hidden;
  background: #e8eedc;
}

.public-job .stellenmedien__video-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-job .stellenmedien__video-knopf {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(20 45 35 / .9);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.public-job .stellenmedien__video-knopf svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.public-job .stellenmedien__video-knopf:focus-visible {
  outline: 3px solid #126440;
  outline-offset: 5px;
}

.public-job .stellenmedien__youtube-inhalt:has(.stellenmedien__youtube-rahmen) {
  display: block;
  padding: 0;
}

.public-job .stellenmedien__youtube-inhalt:has(.stellenmedien__youtube-rahmen) .stellenmedien__hinweis {
  padding: 12px 18px;
}

.public-job .stellenmedien__hinweis {
  max-width: 48ch;
  margin: 0;
  color: #556b4e;
  font-size: 12px;
  line-height: 1.6;
}

.public-job .stellenmedien__youtube-knopf {
  justify-self: center;
  min-height: 44px;
  border-radius: 10px;
}

.public-job .stellenmedien__bildunterschrift {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  color: #426737;
  font-size: 11px;
  line-height: 1.5;
}

.public-job .stellenmedien__zaehler {
  flex: none;
  color: #426737;
}

.public-job .stellenmedien__auswahl {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.public-job .stellenmedien__auswahlpunkt {
  flex: 0 0 108px;
}

.public-job .stellenmedien__vorschau {
  position: relative;
  display: grid;
  width: 108px;
  height: 68px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d2dfbd;
  border-radius: 10px;
  background: #e8eedc;
}

.public-job .stellenmedien__vorschau[aria-pressed="true"] {
  border: 2px solid #214b2c;
  box-shadow: none;
}

.public-job .stellenmedien__vorschau-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-job .stellenmedien__videozeichen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(20 45 35 / .38);
  color: #142d23;
  font-size: 19px;
  line-height: 1;
}

.public-job .stellenmedien__videozeichen svg {
  width: 20px;
  height: 20px;
}

.public-job .betriebskarte {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #dfe6d6;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-job .betriebskarte__medien {
  width: 54px;
  height: 54px;
  border-radius: 10px;
}

.public-job .betriebskarte__name {
  margin: 0 0 12px;
  color: #142d23;
  font-size: 15px;
}

.public-job .betrieb__daten {
  display: grid;
  gap: 8px;
  margin: 0;
}

.public-job .betrieb__daten > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #556b4e;
  font-size: 11px;
  line-height: 1.5;
}

.public-job .betrieb__daten dt {
  color: #3d5c38;
  font-weight: 500;
}

.public-job .betrieb__daten dd {
  margin: 0;
  text-align: right;
}

.public-job .betrieb__socials {
  margin-top: 16px;
}

.public-job .betrieb__social {
  border-color: #d6e1c7;
  background: #fffdf9;
  color: #456b3e;
}

.public-job .stellenmedien__vorschau:focus-visible {
  outline: 3px solid #126440;
  outline-offset: 6px;
}

.public-job .betrieb__social:focus-visible {
  outline: 3px solid #126440;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .public-job .jobanker {
    display: none;
  }

  .public-job .stellenmedien__auswahl {
    overflow-x: auto;
  }

  .public-job .betriebskarte {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .public-job .betriebskarte__medien {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 1099px) {
  .public-job a,
  .public-job input,
  .public-job button {
    scroll-margin-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
}

/* N1: Ab Desktop darf kein älterer Höhen-Deckel die 2,65er-Coverbühne
   stauchen. Die Quellbreite entscheidet bereits im Datenpfad, ob ein
   eigenes Bild überhaupt hierher kommt. */
@media (min-width: 900px) {
  .public-job .stellenkopf__bild {
    aspect-ratio: 2.65;
    max-height: none;
  }
}

/* =====================================================================
   D7, Nachbesserung 1 (19.09.2026): Titelbild ohne Lücke
   ---------------------------------------------------------------------
   Claude (Abnahme) maß bei 1440px eine rund 290px hohe Lücke zwischen
   Titelbild-Unterkante und H1: .stellenkopf__inhalt trug seit dem alten
   Seitenspalten-Layout (vor D4) "min-height: 420px" (Regel weiter oben
   in dieser Datei, @media(min-width:900px), Kommentar "Erst ab hier
   gibt es eine rechte Hälfte, auf der ein Foto stehen kann"). Diese
   Mindesthöhe galt für ein absolut positioniertes Seitenfoto, das es
   seit D4 nicht mehr gibt; seit D7 enthält .stellenkopf__inhalt nur
   noch Brotkrume und das schmale Titelbild (aspect-ratio 3.1, bei
   gedeckelter Breite entsprechend niedriger) und braucht keine feste
   Mindesthöhe mehr. Nicht die alte Regel geändert (sie wirkt sonst
   nirgends mehr, ihr Entfernen wäre ein Eingriff ohne Nutzen), sondern
   hier auf 0 zurückgesetzt: diese Regel steht später in der Kaskade und
   gewinnt bei gleicher Spezifität. */
@media (min-width: 900px) {
  .public-job .stellenkopf__inhalt {
    min-height: 0;
  }
}

/* =====================================================================
   D12 (20.09.2026), Stellenseite Teil B2
   Ruhige Bewerbung, Bildkarten, Rückwege und Betriebskanäle. Der
   Bewerbungsweg bleibt vollständig im bestehenden Skriptbestand.
   ===================================================================== */

.public-job {
  --job-fokus-ring: #53ad6b;
}

.public-job .job-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-bottom: 8px;
  color: var(--gc-link);
  /* 01.10.2026: Ein Navigationslink ist kein kleines Meta-Label. */
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.public-job .job-zurueck svg {
  width: 16px;
  height: 16px;
}

.public-job .job-zurueck:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-job .bewerbung {
  padding: 32px;
  border: 1px solid var(--gc-line-strong);
  border-radius: 20px;
  background: var(--gc-canvas-2);
  color: var(--gc-ink);
}

.public-job .bewerbung .filter__kopf,
.public-job .bewerbung__körper,
.public-job .bewerbung__fuß,
.public-job .bewerbung-v2.hell-insel,
.public-job .bewerbung__laden.hell-insel,
.public-job .bewerbung__quittung.hell-insel {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gc-ink);
}

.public-job .bewerbung .filter__kopf::after {
  display: none;
}

.public-job .bewerbung__kicker {
  color: var(--gc-green);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
}

.public-job .bewerbung .filter__titel {
  color: var(--gc-ink);
  font-size: clamp(1.75rem, 2.4vw, 1.9375rem);
  font-weight: var(--gc-fw-title);
  letter-spacing: -0.04em;
  line-height: var(--gc-lh-title);
}

.public-job .bewerbung__unterzeile {
  max-width: 62ch;
  color: var(--gc-ink-muted);
  font-size: 14px;
  line-height: 1.7;
}

.public-job .bewerbung__direkt-hinweis {
  margin: 10px 0 0;
  color: var(--gc-ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.public-job .bewerbung__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 26px;
}

.public-job .bewerbung__merkmale span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-chip);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font-size: 12px;
  font-weight: 500;
}

.public-job .bewerbung__merkmale svg {
  width: 15px;
  height: 15px;
  color: var(--gc-green);
}

/* D14 Punkt 3, nachgezogen am 21.09.2026: Patric will alle Felder
   untereinander. Die Regel ab Zeile 1732 setzt ab 700 px zwei Spalten; ohne
   ausdrueckliches Zuruecksetzen blieb das Formular am Rechner zweispaltig,
   gemessen 411 px Feldbreite in einem 914 px breiten Panel. */
.public-job .bewerbung__felder,
.public-job .bewerbung__abschnitt-felder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
}

.public-job .bewerbung__gruppe--voll {
  grid-column: 1 / -1;
}

.public-job .bewerbung__felder {
  gap: 26px;
}

.public-job .bewerbung__abschnitt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gc-line-strong);
}

.public-job .bewerbung__abschnitt-kopf h3,
.public-job .bewerbung__abschnitt-kopf p {
  margin: 0;
}

.public-job .bewerbung__abschnitt-kopf h3 {
  color: var(--gc-ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.public-job .bewerbung__abschnitt-kopf p {
  color: var(--gc-ink-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

.public-job .bewerbung__abschnitt .filter__frage,
.public-job .bewerbung-v3__panel .filter__frage {
  margin-bottom: 7px;
  color: var(--gc-ink-soft);
  font-size: 11px;
  font-weight: 500;
}

.public-job .bewerbung__abschnitt .eingabe,
.public-job .bewerbung-v3__panel .eingabe {
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--gc-line-ui);
  border-radius: 9px;
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-size: 16px;
}

.public-job .bewerbung__abschnitt textarea.eingabe,
.public-job .bewerbung-v3__panel textarea.eingabe {
  min-height: 112px;
}

.public-job .bewerbung__abschnitt .eingabe:focus,
.public-job .bewerbung-v3__panel .eingabe:focus {
  border-color: var(--gc-green);
  box-shadow: 0 0 0 3px rgb(18 100 64 / .08);
}

.public-job .bewerbung__abschnitt .filter__hinweis,
.public-job .bewerbung-v3__panel .filter__hinweis {
  margin: 7px 0 0;
  color: var(--gc-ink-muted);
  font-size: 12px;
  line-height: 1.55;
}

.public-job .bewerbung__abschnitt .bewerbung__fehler {
  margin: 7px 0 0;
  color: #7a2f2f;
  font-size: 12px;
  line-height: 1.55;
}

.public-job .bewerbung__abschnitt .haken,
.public-job .bewerbung-v3__panel .haken {
  min-height: 44px;
}

.public-job .bewerbung__abschnitt .haken input,
.public-job .bewerbung-v3__panel .haken input {
  width: 20px;
  height: 20px;
  accent-color: var(--gc-green);
}

.public-job .bewerbung__dateiauswahl {
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px dashed var(--gc-line-ui);
  border-radius: 11px;
  background: var(--gc-surface);
}

@media (max-width: 767px) {
  .public-job .bewerbung__dateiauswahl {
    min-height: 52px;
    padding: 9px 12px;
  }

  .public-job .bewerbung__dateiauswahl span {
    font-size: .875rem;
  }
}

.public-job .bewerbung__körper .bewerbung__datei {
  min-height: 44px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
}

.public-job .bewerbung__körper .bewerbung__datei::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}

.public-job .bewerbung__fuß {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.public-job .bewerbung__sicherheit {
  color: var(--gc-ink-muted);
  font-size: 11px;
}

.public-job .bewerbung__fuß .bewerbung__senden {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 51px;
  border-radius: 10px;
  background: var(--gc-green);
  color: var(--gc-green-ink);
}

.public-job .bewerbung__fuß .bewerbung__senden svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.public-job .stellenrueckwege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
}

.public-job .stellenrueckwege :is(button, a) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gc-link);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}

.public-job .stellenrueckwege :is(button, a):hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-job .stellenrueckwege svg {
  width: 14px;
  height: 14px;
}

.public-job .verwandte {
  border-top-color: var(--gc-line);
  background: var(--gc-canvas-2);
  padding-block: 58px 65px;
}

.public-job .verwandte__raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.public-job .verwandte__link {
  padding: 0;
  overflow: hidden;
  border-color: var(--gc-line-strong);
  border-radius: 15px;
  background: var(--gc-surface);
  transition: transform .22s var(--gc-ease), border-color .2s var(--gc-ease),
    box-shadow .2s var(--gc-ease);
}

.public-job .verwandte__link:hover {
  border-color: var(--gc-line-ui);
  box-shadow: var(--gc-shadow-small);
  transform: translateY(-4px);
}

.public-job .verwandte__bild {
  display: block;
  width: 100%;
  aspect-ratio: 1.8;
  object-fit: cover;
  object-position: var(--media-focus, 50% 50%);
}

.public-job .verwandte__inhalt {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 20px;
}

.public-job .verwandte__betrieb {
  color: var(--gc-ink-muted);
  font-size: 12px;
}

.public-job .verwandte__stelle {
  display: block;
  height: calc(1.35em * 2);
  overflow: hidden;
  margin: 8px 0 18px;
  color: var(--gc-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

/* Ein oder zwei Profilpunkte brauchen keine Platzreserve. Außenabstand,
   Radius und Farbfläche bleiben unverändert, nur der Inhalt wird dichter. */
.public-job .stellen__block--profil:has(.punktliste > li:only-child) > h2,
.public-job .stellen__block--profil:has(.punktliste > li:nth-child(2):last-child) > h2 {
  margin-bottom: 8px;
}

.public-job .stellen__block--profil:has(.punktliste > li:only-child) .punktliste li,
.public-job .stellen__block--profil:has(.punktliste > li:nth-child(2):last-child) .punktliste li {
  padding-block: 4px;
}

.public-job .verwandte__fuss {
  color: var(--gc-ink-muted);
  font-size: 11px;
}

.public-job .betrieb__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gc-line);
}

.public-job .betrieb__socials::before {
  width: 100%;
  content: "Der Betrieb im Netz";
  color: var(--gc-ink-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.public-job .betrieb__social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--gc-link);
  border-radius: var(--gc-radius-chip);
  background: var(--gc-surface);
  color: var(--gc-link);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}

.public-job .betrieb__social:hover {
  border-color: var(--gc-link);
  background: var(--gc-link);
  color: var(--gc-surface);
}

.public-job .betrieb__social:focus-visible {
  outline: 3px solid var(--gc-ink);
  outline-offset: 3px;
}

.public-job .betrieb__social svg {
  width: 14px;
  height: 14px;
}

.public-job .stellenmedien__grossbild {
  object-position: var(--media-focus, 50% 50%);
}

@media (max-width: 900px) {
  .public-job .verwandte__raster {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

@media (max-width: 720px) {
  .public-job .bewerbung {
    padding: 24px 20px;
  }

  .public-job .bewerbung__abschnitt-kopf {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .public-job .bewerbung__abschnitt-kopf p {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-job .verwandte__link {
    transition: none;
  }

  .public-job .verwandte__link:hover {
    transform: none;
  }
}

/* =====================================================================
   D8, Fortsetzung 2 (19.09.2026): Titelzusatz und Handy-Leiste
   ===================================================================== */

.public-job .stellenspalte__kopf .stellen__mwd {
  font-size: 1rem;
}

/* Der Merkknopf gehört zur sofort sichtbaren Leiste auf jeder Breite.
   Feste Knopf- und SVG-Maße verhindern intrinsische SVG-Übergröße. */
.public-job .bewerbleiste__merken {
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-green-deep);
}

.public-job .bewerbleiste__merken svg {
  width: 22px;
  height: 22px;
}

.public-job .bewerbleiste__merken[aria-pressed="true"] {
  border-color: var(--gc-action);
  background: var(--gc-accent);
}

.public-job .bewerbleiste__merken[aria-pressed="true"] svg {
  fill: currentColor;
}

.public-job .bewerbleiste__merken:disabled {
  cursor: wait;
}

.public-job .bewerbleiste__merken:focus-visible,
.public-job .bewerbleiste .bewerben__knopf:focus-visible {
  outline: 3px solid var(--fokus-hell);
  outline-offset: 3px;
}

@media (max-width: 899px) {
  html:has(body.public-job) {
    scroll-behavior: auto;
  }

  .public-job .jobanker a {
    scroll-margin-top: calc(var(--kopf-h-mobil) + 12px);
    scroll-margin-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }

  .public-job .stellenspalte__kopf .stellen__mwd {
    font-size: 0.8125rem;
  }

  .public-job .bewerbleiste {
    background: var(--gc-surface);
    border-top-color: var(--gc-line);
    backdrop-filter: blur(15px);
  }

  .public-job .bewerbleiste__inner {
    width: 100%;
    max-width: none;
    padding: 11px 16px;
    gap: 12px;
  }

  .public-job .bewerbleiste .bewerben__knopf {
    flex: 1 1 auto;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 52px;
    padding-inline: 19px;
    gap: 9px;
    border-radius: var(--gc-radius-control);
    background: var(--gc-dark);
    color: var(--gc-action-ink);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  .public-job .bewerbleiste .bewerben__knopf svg {
    width: 18px;
    height: 18px;
  }

  .public-job .bewerbleiste .bewerben__knopf:hover {
    background: var(--gc-dark-card);
  }
}

/* Steht nach allen älteren Seitenteilen. Kein !important, damit die
   Browserprobe den Ring für ihren Bildvergleich gezielt ausblenden kann. */
html:has(body.public-job) body.public-job :focus-visible {
  outline: 3px solid var(--job-fokus-ring);
  outline-offset: 4px;
}

/* D14-N2 (21.09.2026): Der Ring liegt INNEN auf der eigenen dunklen Flaeche des
   Knopfes, nicht aussen auf dem Standbild. Aussen haengt der Kontrast vom
   Bildausschnitt ab und kippt je Breite: gemessen 1.2:1 bei dunklem Ausschnitt
   (1280 px) und durchgefallen bei hellem Ausschnitt (1440 px), egal ob der Ring
   dunkel oder gruen war. Innen ist der Hintergrund immer rgb(20 45 35). */
html:has(body.public-job) body.public-job .stellenmedien__video-knopf:focus-visible {
  outline: 3px solid #126440;
  outline-offset: 5px;
  box-shadow: 0 0 0 16px #fff;
}

html:has(body.public-job) body.public-job .stellenmedien__grossansicht:has(.stellenmedien__player:focus-visible) {
  outline: 3px solid #126440;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #fff;
}

/* D14-N2 (21.09.2026): EINE Regel für alle Breiten statt drei Medienabfragen.
   Der gemessene Ring ist immer der gruene Systemring; der weisse Saum darum
   liefert den Gegenpol auf jedem Standbild, hell wie dunkel. Eine Fassung, die
   den Ring je nach Breite auf #142d23 umstellte, fiel bei 1280 px auf 1.2:1
   durch (gemessen 21.09.2026), weil dort ein dunkler Bildausschnitt liegt. */

/* D13 (20.09.2026): Messabgleich mit der gebauten Kassel-Referenz. */
.public-job .stellen__block > h2 {
  font-size: 28px;
  line-height: 31.64px;
  letter-spacing: -1.54px;
}

.public-job .stellen__block--vorteile .benefitgruppe {
  border-color: rgb(223 230 212);
  border-radius: 15px;
  background: rgb(255 253 249);
}

.public-job .benefitgruppe__liste li {
  display: block;
  min-height: 30px;
  padding: 4px 0 4px 13px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #4b6142;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.public-job .benefitgruppe__liste li::before {
  position: absolute;
  top: 11px;
  left: 0;
  display: block;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #7ba644;
}

.public-job .bewerbungskarte h2 {
  color: #fff;
}

.public-job .bewerbung,
.public-job .bewerbung-v3 {
  border-color: rgb(213 228 182);
  background: #fff;
}

.public-job .bewerbung__abschnitt .eingabe,
.public-job .bewerbung-v3__panel .eingabe {
  min-height: 51px;
  border-color: rgb(201 217 176);
  background: rgb(255 254 249);
}

.public-job .bewerbung__abschnitt .eingabe:focus,
.public-job .bewerbung-v3__panel .eingabe:focus {
  border-color: #388c61;
  box-shadow: 0 0 0 3px rgb(56 140 97 / .08);
}

.public-job .bewerbung .filter__senden,
.public-job .bewerbung .bewerbung__senden {
  background: rgb(23 77 48);
}

.public-job .betriebskarte {
  display: block;
  padding-top: 20px;
}

.public-job .betrieb__daten {
  max-width: 730px;
}

.public-job .verwandte {
  max-width: none;
  margin-inline: 0;
  border-top-color: #d8e3c8;
  background: rgb(236 242 225);
}

.public-job .verwandte__link {
  border-color: rgb(223 230 212);
  background: rgb(255 253 249);
}

@media (max-width: 1099px) {
  .public-job .bewerbung-aside {
    margin: 0 0 48px;
  }
}

@media (max-width: 720px) {
  .public-job .stellenspalte__kopf .stellen__titel {
    font-size: 27px;
    line-height: 29.7px;
    letter-spacing: -1.35px;
  }

  .public-job .jobanker {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  .public-job .bewerbleiste__inner {
    box-sizing: border-box;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
  }

  .public-job .bewerbleiste .bewerben__knopf {
    min-height: 48px;
    background: #126440;
  }

  .public-job .bewerbleiste__merken {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }
}

.public-job .bewerbleiste[hidden] {
  display: none;
}

/* WEB-048: Stellenkopf, Bewerbungskarte und mobiler Bewerbungsfunnel.
   Diese Regeln verfeinern nur job.html und lassen V1 und V2 unverändert. */
.public-job .job-zurueck__kurz {
  display: none;
}
.public-job .brotkrume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.public-job .brotkrume__liste {
  order: 1;
}
.public-job .job-zurueck {
  order: 2;
  margin-left: auto;
}
.public-job .stellenspalte__kopf .stellen__mwd {
  display: inline-block;
  margin-left: .12em;
  font-size: .48em;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
}
.public-job .bewerbungskarte__intro {
  margin: 10px 0 20px;
  color: var(--gc-on-dark-soft);
  font-size: 13px;
  line-height: 1.5;
}
.public-job .benefitgruppe__kopf > svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--gc-action);
}
.public-job .bewerbung__abschnitt-kopf h3::before {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 50%;
  place-items: center;
  background: var(--gc-action);
  color: var(--gc-action-ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.public-job .bewerbung__abschnitt:nth-child(1) .bewerbung__abschnitt-kopf h3::before {
  content: "1";
}
.public-job .bewerbung__abschnitt:nth-child(2) .bewerbung__abschnitt-kopf h3::before {
  content: "2";
}
.public-job .bewerbung__abschnitt:nth-child(3) .bewerbung__abschnitt-kopf h3::before {
  content: "3";
}
.public-job .bewerbung__consent-transport {
  display: none;
}
.public-job .bewerbung-v2__erklaerung-transport {
  display: none !important;
}

@media (min-width: 768px) {
  .public-job #bewerben {
    margin-top: clamp(68px, 8vw, 116px);
  }
  .public-job .bewerbung__abschnitt-felder--kontakt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .public-job .bewerbung__abschnitt-felder--kontakt > :nth-child(3) {
    grid-column: 1;
  }
  .public-job .bewerbung__fuß .bewerbung__senden {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .public-job .job-zurueck__lang,
  .public-job .brotkrume__liste {
    display: none;
  }
  .public-job .job-zurueck__kurz {
    display: inline;
  }
  .public-job .brotkrume {
    justify-content: flex-end;
  }
  .public-job .job-zurueck {
    /* 01.10.2026: Tap-Fläche 44 px (A11y-Durchgang). */
    min-height: 44px;
    margin-left: 0;
    padding-inline: 10px;
  }
  .public-job .betrieb__social {
    width: auto;
    min-width: 0;
    padding-inline: 12px;
    font-size: 12px;
  }
  .public-job .betrieb__social-text {
    display: inline !important;
  }
  .public-job .bewerbung-funnel {
    box-sizing: border-box;
    width: min(100vw - 16px, 520px);
    max-width: 520px;
    height: min(100dvh - 12px, 820px);
    max-height: calc(100dvh - 12px);
    margin: auto auto 6px;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 22px 22px 14px 14px;
    background: var(--gc-dark);
    color: var(--gc-on-dark);
    scrollbar-gutter: stable;
  }
  .public-job .bewerbung-funnel::backdrop {
    background: rgb(12 30 20 / .62);
  }
  .public-job .bewerbung-funnel .bewerbung {
    box-sizing: border-box;
    min-height: 100%;
    margin: 0;
    padding: 20px 14px 0;
    background: var(--gc-dark);
  }
  .public-job .bewerbung-funnel .bewerbung__kopf {
    position: relative;
    padding-right: 48px;
  }
  .public-job .bewerbung-funnel .filter__schließen {
    display: inline-grid;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(239 248 220 / .45);
    border-radius: 50%;
    background: transparent;
    color: var(--gc-on-dark);
  }
  .public-job .bewerbung-funnel .bewerbung__merkmale {
    margin: 16px 0 22px;
  }
  .public-job .bewerbung-funnel .bewerbung__körper {
    padding: 20px 16px;
    border-radius: 16px;
  }
  .public-job .bewerbung-funnel .bewerbung__fuß {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: -14px;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
  }
  .public-job .bewerbung-funnel .bewerbung__sicherheit {
    display: none;
  }
  .public-job .bewerbung-funnel .bewerbung__schritttitel {
    margin-top: 0;
  }
}

@media (min-width: 1100px) {
  .public-job .stellenseite {
    display: block;
  }

  .public-job .stellenspalte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 76px;
    align-items: start;
  }

  .public-job .stellenspalte > :not(.bewerbung-aside) {
    grid-column: 1;
  }

  .public-job .stellenspalte > .bewerbung-aside {
    grid-column: 2;
    grid-row: 1 / span 100;
  }
}

/* WEB-048: finale Kaskade gegen ältere Seitenspezialregeln. */
.public-job .stellenspalte__kopf .stellen__mwd {
  font-size: .48em;
}
@media (max-width: 899px) {
  .public-job .stellenspalte__kopf .stellen__mwd {
    font-size: .48em;
  }
}

/* WEB-048 Nachbesserung: reale Dialog- und Kopfgeometrie. */
@media (min-width: 900px) {
  .public-job .stellenkopf .brotkrume {
    width: 100%;
    max-width: none;
  }
  .public-job .stellenkopf .job-zurueck {
    margin-left: auto;
    white-space: nowrap;
  }
  .public-job .stellenspalte > .bewerbung-aside .bewerbungskarte {
    top: 0;
  }
}

@media (max-width: 767.98px) {
  .public-job #bewerben[hidden] {
    display: none !important;
  }
  .public-job .stellenkopf .brotkrume .job-zurueck {
    color: var(--gc-on-dark-soft);
    font-size: 12px;
    white-space: nowrap;
  }
  .public-job .stellenkopf .brotkrume .job-zurueck svg {
    display: none;
  }
  .public-job .bewerbung-funnel,
  .public-job .bewerbung-funnel .bewerbung {
    background: var(--gc-surface);
    color: var(--gc-ink);
  }
  .public-job .bewerbung-funnel .bewerbung {
    padding: 16px 14px 0;
  }
  .public-job .bewerbung-funnel .bewerbung__kopf {
    min-height: 0;
    padding: 0 44px 12px 0;
  }
  .public-job .bewerbung-funnel .bewerbung__kicker,
  .public-job .bewerbung-funnel .bewerbung__direkt-hinweis,
  .public-job .bewerbung-funnel .bewerbung__unterzeile,
  .public-job .bewerbung-funnel .bewerbung__merkmale {
    display: none;
  }
  .public-job .bewerbung-funnel .filter__titel {
    margin: 0;
    color: var(--gc-ink);
    font-size: 20px;
    line-height: 1.15;
  }
  .public-job .bewerbung-funnel .filter__schließen {
    border-color: var(--gc-line-ui);
    background: var(--gc-canvas);
    color: var(--gc-ink);
  }
  .public-job .bewerbung-funnel .bewerbung__fortschritt {
    display: block;
    margin: 7px 0 0;
    color: var(--gc-link);
  }
  .public-job .bewerbung-funnel .bewerbung__körper {
    background: var(--gc-canvas);
  }
  .public-job .bewerbung-funnel .bewerbung__abschnitt:not(:has(.filter__gruppe:not([data-bewerbung-inaktiv]))) {
    display: none;
  }
}

/* WEB-049: bestätigte Korrekturen aus dem Job-Feedback bis 6:37. */
.public-job .stellenkopf .brotkrume {
  margin-bottom: 12px;
}

.public-job .bewerbungskarte__fuss {
  justify-content: flex-start;
}

.public-job .stellenspalte > .stellen__block.stellen__block--profil {
  padding: clamp(28px, 3vw, 34px) clamp(22px, 3vw, 32px);
  border: 1px solid var(--gc-line-strong);
}

.public-job .stellen__block--profil > .block__kicker {
  margin-bottom: 11px;
}

.public-job .stellen__block--profil:has(.punktliste > li:only-child) > h2,
.public-job .stellen__block--profil:has(.punktliste > li:nth-child(2):last-child) > h2 {
  margin-bottom: 14px;
}

.public-job .stellen__block--profil .punktliste li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 13px;
  padding-left: 0;
}

.public-job .stellen__block--profil .punktliste li::before {
  position: static;
  align-self: start;
  margin-top: .3em;
}

.public-job .stellen__block--vorteile .benefits--gruppen > li.benefitgruppe::before {
  display: none;
  content: none;
  background: none;
}

.public-job .benefitgruppe__kopf > svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 8px;
  border-radius: 10px;
  background: var(--gc-canvas-2);
  color: var(--gc-action);
}

.public-job .betrieb__daten > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  justify-content: start;
  gap: 6px;
}

.public-job .betrieb__daten dt::after {
  content: ":";
}
.public-job .betrieb__daten dd {
  text-align: left;
}

.public-job .bewerbung__abschnitt-kopf h3::before {
  color: #fff;
}

.public-job .bewerbung__pflichtstern,
.public-job .bewerbung__pflicht-hinweis span {
  color: var(--gc-link);
  font-weight: 700;
}

.public-job .bewerbung__pflicht-hinweis {
  margin: 0;
  color: var(--gc-ink-muted);
  font-size: 11px;
  line-height: 1.45;
}

.public-job .bewerbung__absenden .bewerbung__sicherheit {
  margin: 0;
  font-size: 11px;
}

@media (min-width: 768px) {
  .public-job #bewerben {
    margin-top: clamp(44px, 5vw, 72px);
  }
  .public-job input#bewerbung-einwilligung ~ .haken__text {
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  .public-job .stellenkopf .brotkrume {
    margin-bottom: 10px;
  }
  .public-job .stellenkopf .brotkrume .job-zurueck {
    color: var(--gc-link);
  }
  .public-job .job-zurueck__lang {
    display: inline;
  }
  .public-job .job-zurueck__kurz {
    display: none;
  }
  .public-job .stellenspalte__kopf .betrieb {
    align-items: start;
  }
  .public-job .stellenspalte__kopf .betrieb__medien {
    width: 62px;
    height: 62px;
    border-radius: 14px;
  }
  .public-job .stellenspalte__kopf .betrieb__text {
    min-width: 0;
  }
  .public-job .stellenspalte__kopf .betrieb__ort > span {
    display: inline;
  }
  .public-job .stellenspalte__kopf .betrieb__bereich,
  .public-job .stellenspalte__kopf .betrieb__standort {
    display: inline;
  }
  .public-job .bewerbung-aside {
    margin: 0;
  }
  .public-job .stellenrueckwege {
    margin-bottom: 0;
  }
  .public-job #stellenanzeige > .wrap {
    padding-bottom: 0;
  }
  .public-job input#bewerbung-einwilligung ~ .haken__text {
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .public-job .stellenspalte__kopf .betrieb__ort > span {
    display: inline;
  }
}

/* WEB-050: mobiler Stellenkopf und Bewerbungsfunnel. Diese abschließende
   Kaskade überschreibt ausschließlich die früheren mobilen Zwischenstände. */
@media (max-width: 767.98px) {
  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__abschnitt-kopf h3::before {
    display: none;
    content: none;
  }

  /* Der Rückweg bleibt als kompakte, aber vollständige Aktion lesbar. */
  .public-job .stellenkopf .brotkrume .job-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* 01.10.2026, A11y-Durchgang: 44 px passen in die 48 px hohe Brotkrume. */
    min-height: 44px;
    padding-inline: 6px 10px;
  }

  .public-job .stellenkopf .brotkrume .job-zurueck svg {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  /* W-LOOM-P2 #58/#59: Mobil bleibt das Titelbild ohne Text und Bildknopf.
     Betrieb, Ort und Stellenbeschreibung stehen direkt darunter. */
  .public-job .stellenkopf .jobbild figcaption,
  .public-job .stellenkopf .jobbild__betrieb {
    display: none;
  }

  /* Alle vorhandenen Netzwerke erhalten sechs echte, gleich breite Zellen.
     Der Abstand gehört an den Container, nicht an einzelne Links. */
  .public-job .betrieb__socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 32px;
    padding-top: 16px;
  }

  .public-job .betrieb__socials::before {
    grid-column: 1 / -1;
    width: auto;
  }

  .public-job .betrieb__social {
    box-sizing: border-box;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    white-space: nowrap;
  }

  .public-job .betrieb__social-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Optional bleibt klar sichtbar, verliert aber die Bannerwirkung.
     Der Lebenslauf benutzt dieselbe allgemeine Klasse und bleibt daher
     bewusst von dieser WhatsApp-spezifischen Regel unberührt. */
  .public-job .bewerbung__whatsapp-zusage .freiwillig {
    display: inline;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gc-ink-muted);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Der native Dialog nutzt das vollständige Gerätefenster. Der Abschnitt
     bleibt der vorhandene scrollende Inhalt, damit Tastatur und Fokusfalle
     unverändert funktionieren. */
  .public-job .bewerbung-funnel {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: 100dvw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: var(--gc-surface);
    color: var(--gc-ink);
    scrollbar-gutter: auto;
  }

  .public-job .bewerbung-funnel .bewerbung {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--gc-surface);
    color: var(--gc-ink);
  }

  .public-job .bewerbung-funnel .bewerbung::before {
    display: none;
    content: none;
  }

  .public-job .bewerbung-funnel .bewerbung__kopf {
    min-height: 0;
    padding: 0 52px 12px 0;
  }

  .public-job .bewerbung-funnel .filter__schließen {
    position: absolute;
    top: max(0px, env(safe-area-inset-top, 0px));
    right: max(0px, env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .public-job .bewerbung-funnel .bewerbung__körper {
    padding: 20px 0;
    border-radius: 0;
    background: var(--gc-canvas);
  }

  /* Der Hinweis steht als volle, dezente Zeile über beiden Aktionen.
     Zurück und Weiter/Absenden teilen sich immer dieselbe Buttonzeile. */
  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__fuß {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    margin-inline: -16px;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }

  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__pflicht-hinweis {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 2px;
    font-size: 11px;
  }

  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__schritt-zurück {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-height: 48px;
  }

  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__absenden {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
  }

  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__weiter,
  .public-job .bewerbung-funnel .bewerbung--schritte .bewerbung__senden {
    width: 100%;
    min-height: 48px;
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage[hidden] {
    display: none;
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage {
    position: fixed;
    inset: 0;
    z-index: 8;
    display: grid;
    align-items: end;
    padding: 16px;
    background: rgb(12 30 20 / .42);
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-karte {
    display: grid;
    gap: 14px;
    width: min(100%, 480px);
    margin: 0 auto max(8px, env(safe-area-inset-bottom, 0px));
    padding: 22px;
    border: 1px solid var(--gc-line);
    border-radius: 20px;
    background: var(--gc-surface);
    color: var(--gc-ink);
    box-shadow: var(--gc-shadow-card);
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-titel,
  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-text {
    display: block;
    margin: 0;
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-titel {
    font-size: 23px;
    line-height: 1.12;
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-text {
    color: var(--gc-ink-muted);
    line-height: 1.45;
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-aktionen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .public-job .bewerbung-funnel .bewerbung__whatsapp-nachfrage-aktionen .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding-inline: 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
  }
}

/* Das Titelbild läuft auf Telefonen bis an den Seiten-Gutter. Der
   Inhaltswrapper darf darunter keinen zweiten festen 16/32px-Rand addieren,
   sonst beginnen Text und Formular sichtbar weiter innen als das Bild. */
@media (max-width: 1099px) {
  .public-job #stellenanzeige > .wrap {
    width: 100%;
    padding-inline: var(--gc-gutter);
  }
}

/* W-16: V3 besitzt eine eigene Kachel. V1 und V2 behalten ihre 760px-Hülle. */
html:has(.public-job #bewerbung-funnel[open]) {
  overflow: hidden;
}
.bewerbung-v3[hidden],
.bewerbung-v3 [hidden] {
  display: none !important;
}
.public-job .bewerbung-v3 {
  display: grid;
  /* W-LOOM-P1: Der einzeilige Minikopf ab Schritt 2 darf die automatische
     Mindestbreite der gemeinsamen Formularspalte nicht vergrößern. */
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
/* 02.10. (Patric): Die Kachel füllt die linke Spalte und beginnt an
   derselben Kante wie Text und Bild darüber. Vorher hielt sie 880px und
   stand mittig, dadurch entstand bei 1024px und ab etwa 1440px links
   eine Einrückung von 17 bis 31px. */
.public-job .bewerbung-v3__wrapper {
  width: 100%;
  max-width: none;
  container-type: inline-size;
  /* W-16 Design-Nacharbeit: die alte Dialog-Regel (weiter oben in der
     Kaskade, geteilt mit .bewerbung) bremst die Höhe auf min(92svh,860px).
     Das war für den Modal-Dialog gedacht, nicht für diese Kachel im
     normalen Seitenfluss, und hätte lange Schritte (z. B. Karte B offen)
     hart abgeschnitten. Hier zurückgesetzt. */
  max-height: none;
  margin: 0 auto;
  padding: 0;
  /* overflow:hidden würde die sticky Knopfleiste im Mobil-Modus
     einsperren: ein Vorfahre mit overflow hidden/auto/scroll wird zur
     Scroll-Grenze für position:sticky, auch wenn nur eine Achse gekappt
     ist (overflow-x:hidden macht overflow-y:visible zu auto). clip kappt
     die X-Achse (schützt die runden Ecken bei Breitenüberlauf), ohne einen
     Scroll-Container zu erzeugen.
     W-16f (Patric, Ecken): clip jetzt auf BEIDEN Achsen. Nur mit beiden
     Achsen schneidet der Browser an der Rundung ab; mit overflow-y:visible
     malten der weiße Kopf (oben links, oben rechts) und die Schrittleiste
     (unten links) eckig über die runde Kante. clip erzeugt weiter keinen
     Scroll-Container, sticky bleibt frei. */
  overflow: clip;
  background: var(--gc-surface);
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-feature);
  /* W-16e Punkt A: --gc-shadow-card (0 30px 70px, 8% Deckkraft) war der
     kräftige Schatten, den die Hülle #bewerben rechteckig abschnitt (siehe
     overflow:visible oben). Der Entwurf verlangt einen leichten Schatten
     (0 1px 2px plus 0 10px 28px, niedrige Deckkraft). Kein neuer Farbwert:
     --gc-schleier-anker (public-brand.css) ist bereits exakt derselbe
     RGB-Kanal 23 59 43 wie die Entwurfsfarbe rgba(23,59,43,…). */
  box-shadow:
    0 1px 2px rgb(var(--gc-schleier-anker) / .04),
    0 10px 28px rgb(var(--gc-schleier-anker) / .06);
  /* Befund E (Feedback Patric, 26.09.2026): .stellenspalte (Vorfahre dieser
     Kachel) setzt "hyphens: auto; overflow-wrap: anywhere" für lange
     Stellentitel; beides vererbt sich in JEDES Kind, auch in die V3-Kachel
     hinein. Das trennte kurze Knopf-/Fliesstexte, die eigentlich locker auf
     eine Zeile passen ("Kopie-ren", "mel-det", Bild 05). hyphens:none
     kappt die Vererbung hier an der Wurzel der Kachel. */
  hyphens: none;
}
.public-job .bewerbung-v3__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  padding: 31px 34px 26px;
  background: var(--gc-surface);
  border-bottom: 1px solid var(--gc-line);
}
.public-job .bewerbung-v3__kicker {
  color: var(--gc-green);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.public-job .bewerbung-v3__titel {
  color: var(--gc-ink);
  font-size: clamp(1.75rem, 3.3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: var(--gc-ls-hero);
  line-height: 1.1;
}
.public-job .bewerbung-v3__titel::first-letter {
  text-decoration-color: var(--gc-green);
}
.public-job .bewerbung-v3__stelle {
  max-width: 560px;
  margin: 0;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.8;
}
.public-job .bewerbung-v3__stelle strong {
  color: var(--gc-ink);
  font-weight: 500;
}
.public-job .bewerbung-v3__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-job .bewerbung-v3__merkmal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--gc-ink);
  font-size: .75rem;
}
.public-job .bewerbung-v3__merkmal svg {
  width: 15px;
  height: 15px;
  color: var(--gc-green);
}
/* Minikopf (Mobil, ab Schritt 2): eine Zeile mit Stellentitel/Betrieb links
   und "Details"/"Einklappen" rechts. Nur innerhalb des <520px-Containers
   sichtbar (siehe @container max-width:519px weiter unten), sonst immer
   verborgen, auch wenn die Kachel im kompakten Zustand ist. */
.public-job .bewerbung-v3__minikopf {
  display: none;
}
.public-job .bewerbung-v3__minikopf-text {
  min-width: 0;
  flex: 1 1 auto;
}
.public-job .bewerbung-v3__minikopf-titel,
.public-job .bewerbung-v3__minikopf-betrieb {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-job .bewerbung-v3__minikopf-titel {
  color: var(--gc-ink);
  font-size: .8125rem;
  font-weight: 600;
}
.public-job .bewerbung-v3__minikopf-suffix {
  color: var(--gc-ink-muted);
  font-weight: 400;
}
.public-job .bewerbung-v3__minikopf-betrieb {
  color: var(--gc-ink-muted);
  font-size: .75rem;
}
.public-job .bewerbung-v3__shell {
  display: grid;
  min-width: 0;
}
.public-job .bewerbung-v3__leiste {
  display: none;
}
.public-job .bewerbung-v3__form {
  /* Befund C (Feedback Patric, 26.09.2026): "gap" wirkte hier nie, denn ein
     <form> ist ohne "display: grid/flex" ein ganz normaler Blockcontainer;
     dasselbe gilt für .bewerbung-v3__panel weiter unten. Die Luft zwischen
     dem sichtbaren Schritt-Panel und der Knopfleiste kommt deshalb jetzt von
     einem echten margin-top auf .bewerbung-v3__actions (siehe dort). */
  min-width: 0;
  padding: 26px 22px;
}
.public-job .bewerbung-v3__panel {
  padding: 0;
  border: 0;
}
/* Befund C: einheitlicher Mindestabstand zwischen zwei beliebigen
   Feldgruppen/Blöcken innerhalb eines Schritt-Panels (Feldraster, Chip-
   Fieldsets, das WhatsApp-Häkchen, der Hinweiskasten). Ersetzt die vorher
   einzeln nachgezogenen, zu knappen 17px zwischen Kontaktfeldern und
   Kontaktweg-Chips (Patric: "Einwilligung und Felder kleben an den
   Knöpfen"). Spezifischere Regeln für den Hinweistext und die
   Textbausteine weiter unten überschreiben diesen Wert gezielt dort, wo
   das Handoff andere Masse verlangt.
   Der zusätzliche Präfix ".bewerbung-v3" ist kein Zierrat: mehrere
   direkte Kinder des Panels setzen ihr eigenes margin defensiv auf 0 zurück
   (z. B. ".bewerbung-v3__choice", gleiche Spezifität 0-0-2 wie eine
   schlichte ".bewerbung-v3__panel > * + *"-Regel und im Quelltext später,
   gewinnt also sonst die Kaskade und macht den Abstand wieder zunichte,
   gemessen: 0px zwischen Kontaktfeldern und Kontaktweg-Chips). */
.public-job .bewerbung-v3 .bewerbung-v3__panel > * + * {
  margin-top: 22px;
}
.public-job .bewerbung-v3__schrittkopf {
  display: grid;
  gap: 7px;
}
.public-job .bewerbung-v3__fortschrittsbalken {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-job .bewerbung-v3__fortschrittsbalken li {
  height: 4px;
  background: var(--gc-line);
  border-radius: 2px;
}
.public-job .bewerbung-v3__fortschrittsbalken li.ist-erledigt {
  background: var(--gc-green);
}
.public-job .bewerbung-v3__schritt {
  margin: 0;
  color: var(--gc-green);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.public-job .bewerbung-v3__panel .bewerbung-v3__schrittkopf h4 {
  margin: 0;
  color: var(--gc-ink);
  font-size: 1.4375rem;
  font-weight: 600;
  letter-spacing: var(--gc-ls-title);
  line-height: 1.25;
}
.public-job .bewerbung-v3__panel .bewerbung-v3__schrittkopf h4::before {
  content: none;
}
/* Befund F (Feedback Patric, 26.09.2026): ".bewerbung__körper .filter__frage"
   (app.css, Klasse liegt auf der V3-Wurzel) macht Label/Legend zu einem
   Flex-Container mit flex-wrap, damit Fragetext und "Pflichtfeld"/
   "Freiwillig"-Badge nebeneinander mit Abstand stehen. Als zwei eigene
   Flex-Items dürfen Text und Badge unabhängig umbrechen: bei der ersten,
   langen Frage in Karte B rutschte "Freiwillig" dadurch allein in eine
   eigene Zeile (Bild 08). V3 läuft hier stattdessen im normalen
   Textfluss; das Badge bleibt über ein geschütztes Leerzeichen (siehe
   bewerbung-v3.js, anhaengeFreiwillig()) am letzten Wort hängen, der
   Zeilenumbruch kann nur noch VOR dem letzten Wort samt Badge liegen, nie
   dazwischen. */
.public-job .bewerbung-v3 .filter__frage {
  display: block;
}
.public-job .bewerbung-v3 .filter__frage .freiwillig,
.public-job .bewerbung-v3 .filter__frage .pflicht {
  vertical-align: middle;
}
.public-job .bewerbung-v3 .filter__hinweis {
  /* War -7px (negativer Abstand): zog den Hinweis unter die Schrittfrage
     und überlappte deren letzte Zeile. Der Panel-Bereich ist kein
     Grid-Container (kein eigenes "gap"), darum braucht der Hinweis einen
     eigenen, positiven Abstand zum Schrittkopf darüber.
     Befund C (Feedback Patric, 26.09.2026): margin-bottom 16px ist der vom
     Handoff verlangte Abstand "Hinweis bis erstes Feld"; gemessen stand der
     Hinweis vorher direkt auf dem ersten Label (0px, "Vorname" klebte am
     Hinweissatz aus Schritt 3, Bild 03). */
  margin: 9px 0 16px;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  line-height: 1.6;
}
/* Befund C: In Schritt 4 verlangt das Handoff andere Masse als die
   allgemeine Regel oben (Hinweis zu Textbausteinen 12px, Textbausteine zum
   Label 16px statt der allgemeinen 22px). Angrenzende margin-top/-bottom
   verschmelzen im normalen Textfluss zum größeren der beiden Werte
   ("margin collapsing"); darum stehen hier je Übergang zwei passende
   Werte (Hinweis UND Textbausteine je 12px, damit max(12,12)=12 wird),
   nicht nur einer. */
.public-job .bewerbung-v3__hint:has(+ .bewerbung-v3__textbausteine) {
  margin-bottom: 12px;
}
.public-job .bewerbung-v3__panel > .bewerbung-v3__hint + .bewerbung-v3__textbausteine {
  margin-top: 12px;
}
.public-job .bewerbung-v3__panel > .bewerbung-v3__textbausteine + * {
  margin-top: 16px;
}
/* Der erste Block direkt nach dem Hinweistext (Feldraster, Chip-Fieldset
   ...) soll unabhängig vom Schritt exakt die vom Handoff verlangten 16px
   erhalten, nicht den allgemeinen 22px-Wert zwischen Feldgruppen. */
.public-job .bewerbung-v3__panel > .bewerbung-v3__hint + * {
  margin-top: 16px;
}
.public-job .bewerbung-v3__choice {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  /* fieldset-Grundstil zurücksetzen: Browser geben ihm sonst Rahmen,
     Innenabstand und eine min-width:min-content, die hier den sichtbaren
     Kasten um die Chips erzeugte. */
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.public-job .bewerbung-v3__choice > .bewerbung-v3__hint {
  flex-basis: 100%;
  margin: 0;
}
.public-job .bewerbung-v3__choice > legend {
  flex-basis: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--gc-ink);
  font-size: .8125rem;
  font-weight: 600;
}
/* Befund C: Die frühere, hier gestrichene Regel setzte fest 17px zwischen
   Kontaktfeldern und Kontaktweg-Chips, unter dem jetzt verlangten
   Mindestmaß von 20 bis 24px (Feedback Patric, 26.09.2026). Der allgemeine
   Abstand zwischen Feldgruppen kommt jetzt aus ".bewerbung-v3__panel > *
   + *" weiter oben (22px). */
.public-job .bewerbung-v3__auswahlzahl {
  margin: 0;
  color: var(--gc-green);
  font-size: .75rem;
  font-weight: 600;
}
/* Befund H (Patric, 26.09.2026): abweisbarer Hinweiskasten unter den
   Kontaktweg-Chips, erscheint nur bei "E-Mail" und blockiert "Weiter" nie. */
.public-job .bewerbung-v3__whatsapp-hinweis {
  display: grid;
  gap: 13px;
  padding: 17px;
  background: var(--gc-canvas-2);
  border: 1px solid var(--gc-line);
  border-radius: var(--job-radius-tile);
}
.public-job .bewerbung-v3__whatsapp-hinweis-text {
  margin: 0;
  color: var(--gc-ink);
  font-size: .8125rem;
  line-height: 1.6;
}
.public-job .bewerbung-v3__whatsapp-hinweis-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.public-job .bewerbung-v3__choice .haken {
  /* Kein overflow:hidden: der Fokusring am Chiptext liegt 3px außerhalb
     und würde sonst abgeschnitten (design05 Fokusringe, 25.09.). */
  position: relative;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--gc-radius-chip);
}
.public-job .bewerbung-v3__choice .haken input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.public-job .bewerbung-v3__choice .haken__kasten {
  display: none;
}
.public-job .bewerbung-v3__choice .haken__text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 17px;
  color: var(--gc-ink);
  background: var(--gc-canvas);
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-chip);
  font-size: .8125rem;
}
.public-job .bewerbung-v3__choice .haken input:checked + .haken__kasten + .haken__text {
  /* Nachtrag Claude (25.09., nach NACHTRAG_1): kein Rohwert #214f3f, sondern
     die vorhandene Auswahlfarbe der Website (public-jobs.css:497-501,
     :2938-2942, Segmentwahl/Ansichtsumschalter). */
  color: var(--gc-on-dark);
  background: var(--gc-dark);
  border-color: var(--gc-dark);
}
.public-job .bewerbung-v3__choice .haken input:focus-visible + .haken__kasten + .haken__text,
.public-job .bewerbung-v3 button:focus-visible,
.public-job .bewerbung-v3 input:focus-visible,
.public-job .bewerbung-v3 textarea:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}
.public-job .bewerbung-v3 .eingabe {
  min-height: 52px;
  color: var(--gc-ink);
  background: var(--gc-surface);
  border-color: var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
}
/* Befund D (Feedback Patric, 26.09.2026): Fokus zeigte zwei Ringe. Der
   Aussenring (outline, siehe ".bewerbung-v3 ... :focus-visible" weiter
   oben) reicht allein. Der zweite, innere Ring kommt aus der geteilten
   Regel ".bewerbung-v3__panel .eingabe:focus" (public-job.css, geteilt mit
   .bewerbung__abschnitt für V1); box-shadow hier auf "none" gesetzt statt
   die geteilte Regel zu ändern, damit V1 seinen einzelnen Ring behält.
   Gleiche Spezifität, gewinnt durch die spätere Position im Quelltext. */
.public-job .bewerbung-v3 .eingabe:focus {
  box-shadow: none;
}
.public-job .bewerbung-v3 textarea.eingabe {
  min-height: 140px;
}
.public-job .bewerbung-v3__textbausteine {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.public-job .bewerbung-v3__textbaustein {
  min-height: 44px;
  padding: 0 12px;
  color: var(--gc-ink);
  background: var(--gc-canvas);
  border: 1px dashed var(--gc-line-ui);
  border-radius: var(--gc-radius-chip);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.public-job .bewerbung-v3__textbaustein:hover {
  background: var(--gc-canvas-2);
}
.public-job .bewerbung-v3__zaehler {
  /* Befund D (Feedback Patric, 26.09.2026): Der negative Abstand zog den
     Zaehler auf den unteren Feldrand (er lag zudem, als eigenes Kind des
     Panels statt der Feldgruppe, in einem anderen Breitenkontext als das
     Textfeld selbst und war dadurch links statt rechtsbündig). Jetzt
     steht er als Kind derselben Feldgruppe direkt nach dem Textfeld im
     Fluss (siehe bewerbung-v3.js), 8px Abstand, ohne Überlappung. */
  margin: 8px 0 0;
  /* Absätze tragen eine Lesebreite (max-width); der Zähler soll an der
     rechten Feldkante enden, nicht an der Lesebreite. */
  max-width: none;
  color: var(--gc-ink-muted);
  font-size: .75rem;
  text-align: right;
}
.public-job .bewerbung-v3__orte {
  position: relative;
  z-index: 2;
  margin: -8px 0 0;
  background: var(--gc-surface);
  border-color: var(--gc-line-strong);
  border-radius: 13px;
  box-shadow: var(--gc-shadow-float);
}
.public-job .bewerbung-v3__ortoption {
  min-height: 44px;
  padding: 11px;
  color: var(--gc-ink);
}
.public-job .bewerbung-v3__ortoption:hover,
.public-job .bewerbung-v3__ortoption[aria-selected="true"] {
  color: var(--gc-ink);
  background: var(--gc-canvas-2);
}
.public-job .bewerbung-v3__ortbestaetigt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--gc-green-deep);
  font-size: .8125rem;
  font-weight: 600;
}
.public-job .bewerbung-v3__ort-aendern {
  min-height: 44px;
  padding: 0 12px;
  color: var(--gc-green-deep);
  background: transparent;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-chip);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
/* W-16f (Patric, Handy): „Details“ ist ein Textlink mit Pfeil, kein
   Kasten. Die Fläche bleibt 44px hoch (Tippziel), Text und Pfeil mittig. */
.public-job .bewerbung-v3__details {
  display: none;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--gc-green-deep);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.public-job .bewerbung-v3__details svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform .15s ease;
}
.public-job .bewerbung-v3__details[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.public-job .bewerbung-v3__stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 7px;
}
.public-job .bewerbung-v3__stepper-knopf {
  min-width: 44px;
  min-height: 44px;
  color: var(--gc-green-deep);
  background: var(--gc-canvas);
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-chip);
  font-size: 20px;
  /* Eigene Zeilenhöhe zur Schriftgröße: sonst erbt das Zeichen 18px
     Zeilenhöhe und ragt darüber hinaus (DESK_KEINE_TRENNUNG). */
  line-height: 1.2;
  cursor: pointer;
}
.public-job .bewerbung-v3 .bewerbung__dateiauswahl {
  border: 1px dashed var(--gc-line-ui);
}
.public-job .bewerbung-v3 .bewerbung__dateiauswahl.ist-ueberzogen {
  background: var(--gc-canvas-2);
  outline: 3px solid var(--gc-green-deep);
  outline-offset: 3px;
}
.public-job .bewerbung-v3__unterabschnitt {
  gap: 13px;
}
.public-job .bewerbung-v3__unterabschnitt > h5 {
  color: var(--gc-ink);
  font-size: 1.0625rem;
}
.public-job .bewerbung-v3__einwilligung {
  padding: 17px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--gc-line);
  border-radius: 0;
}
.public-job .bewerbung-v3__actions {
  /* Desktop/Einspaltig-Grundstil: statisch, Rand oben, Zurück/Weiter mit
     Abstand auseinander. War zuvor immer sticky (ungeachtet des Modus) und
     ganz ohne display:flex/space-between; das gehört nur ins Mobil-Fenster
     unten (@container max-width:519px). */
  display: flex;
  align-items: center;
  /* W-16f: Umbruch, damit die Fehlermeldung (erstes Kind, volle Breite)
     über Zurück und Weiter steht. */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 13px;
  /* Befund C (Feedback Patric, 26.09.2026): .bewerbung-v3__actions liegt
     als eigenes Element NEBEN dem Panel (das Formular wechselt nur, welches
     Panel sichtbar ist, die Leiste bleibt), darum reicht ein margin-top auf
     ihr selbst für "letzter Inhalt bis Knopfleiste 24px", unabhängig
     davon, welcher Schritt gerade zuletzt sichtbar ist. Gemessen vorher:
     0px (Einwilligung/Felder klebten sichtbar an der Leiste, Bild 03/04). */
  margin-top: 24px;
  padding: 22px 0 0;
  background: transparent;
  border-top: 1px solid var(--gc-line);
}
.public-job .bewerbung-v3__actions .btn {
  min-height: 44px;
}
.public-job .bewerbung-v3__actions > .bewerbung-v3__status {
  flex: 1 0 100%;
}
/* W-16e Punkt A: In Schritt 1 ist "Zurück" per JS hidden (kein vorheriger
   Schritt) und fällt aus dem Flex-Fluss. "justify-content: space-between"
   verteilt bei nur einem übrigen Kind gar nichts mehr, der "Weiter"-Knopf
   stand darum links statt wie in jedem anderen Schritt rechts. */
.public-job .bewerbung-v3__actions .btn-aktion {
  margin-left: auto;
}
/* Befund B (Feedback Patric, 26.09.2026): .btn-kontur ist für dunklen
   Grund gestylt. Ursache: ":is(.public-home, .public-page) .dunkel
   .btn-kontur" in public-brand.css setzt Schrift und Rand direkt auf
   --gc-on-dark (helles Mint auf Weiss, praktisch unsichtbar), unabhängig
   von .hell-insel auf der V3-Wurzel: die Regel greift über den
   Nachfahren-Kombinator direkt an jedes .btn-kontur unterhalb JEDES
   .dunkel-Vorfahren durch (#bewerben trägt .dunkel), die helle Insel dazwischen
   ändert daran nichts, weil die Regel die Farbe nicht über die von
   .hell-insel umgebundenen --ink-900/--rand-ui-Variablen bezieht, sondern
   fest auf --gc-on-dark schreibt. V3 lebt komplett als helle Insel in
   diesem dunklen Abschnitt und bekommt darum eine eigene Klasse für
   Zweitknöpfe, statt .btn-kontur zu erben. --gc-ink auf --gc-surface hält
   15,7:1 (Text), --gc-line-ui auf --gc-surface rechnerisch 5,57:1 (Rand,
   verlangt 3:1); Fokus kommt unverändert vom seitenweiten
   :focus-visible-Ring (siehe oben), Hover über den vorhandenen Ton
   --gc-canvas-2. */
.public-job .bewerbung-v3__btn-sekundaer {
  min-height: 44px;
  color: var(--gc-ink);
  background: transparent;
  border-color: var(--gc-line-ui);
}
.public-job .bewerbung-v3__btn-sekundaer:hover {
  color: var(--gc-ink);
  background: var(--gc-canvas-2);
  border-color: var(--gc-green-deep);
}
.public-job .bewerbung-v3__btn-sekundaer:disabled {
  color: var(--gc-ink-muted);
  background: transparent;
  border-color: var(--gc-line);
}
.public-job .bewerbung-v3__nachlauf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
/* Runde 2: Bestätigung ersetzt Kopf und Formular vollständig (build() blendet
   head/shell dafür aus) und gliedert sich in zwei feste Spalten statt der
   früheren grid-row:span-Notlösung auf .quittung. */
.public-job .bewerbung-v3__nachlauf-links {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 26px 22px;
  background: var(--gc-canvas);
  border-bottom: 1px solid var(--gc-line);
}
.public-job .bewerbung-v3__nachlauf-rechts {
  display: grid;
  align-content: start;
  gap: 17px;
  padding: 22px;
}
.public-job .bewerbung-v3__quittung {
  display: grid;
  gap: 13px;
}
.public-job .bewerbung-v3__quittung > svg,
.public-job .bewerbung-v3__quittung-kern > svg {
  width: 50px;
  height: 50px;
  padding: 12px;
  color: var(--gc-green-ink);
  background: var(--gc-green);
  border-radius: 50%;
}
.public-job .bewerbung-v3__quittung h3 {
  margin: 0;
  color: var(--gc-ink);
  font-size: 1.8125rem;
  font-weight: 600;
  letter-spacing: var(--gc-ls-hero);
}
/* Befund E (Feedback Patric, 26.09.2026): Diese Überschrift bekommt nach dem
   Absenden per Skript den Fokus (tabIndex=-1 in bewerbung-v3.js), damit
   Screenreader die Bestätigung sofort ansagen. Sie ist kein Bedienelement
   und bleibt es auch mit Fokus nicht; ein sichtbarer Ring wirkte hier wie
   ein zweiter, ungewollter Rahmen um den Text (Bild 05/07). Betrifft nur
   diese eine Überschrift: alle echten Bedienelemente (Knöpfe, Felder,
   der neue Textlink, die WhatsApp-Hinweis-Knöpfe) behalten den
   seitenweiten :focus-visible-Ring unverändert. */
/* ID-Selektor: eine seitenweite :focus-visible-Regel mit höherer
   Spezifität zeichnete den Ring sonst weiter (DESK_FOKUS_UEBERSCHRIFT). */
#bewerbung-v3 .bewerbung-v3__quittung-titel:focus,
#bewerbung-v3 .bewerbung-v3__quittung-titel:focus-visible {
  outline: none;
}
.public-job .bewerbung-v3__quittung h4 {
  margin: 9px 0 0;
  color: var(--gc-ink);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Referenzbox: weiße Fläche mit Label, Nummer und Kopieren-Knopf. */
.public-job .bewerbung-v3__referenzbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  background: var(--gc-surface);
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-control);
}
.public-job .bewerbung-v3__referenz-label {
  margin: 0 0 2px;
  color: var(--gc-ink-muted);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.public-job .bewerbung-v3__referenz {
  margin: 0;
  color: var(--gc-ink);
  font-size: .8125rem;
  font-weight: 600;
}
.public-job .bewerbung-v3__kopieren {
  min-height: 44px;
  width: fit-content;
  padding: 0 12px;
  color: var(--gc-green);
  background: transparent;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-chip);
  font: inherit;
  cursor: pointer;
}
/* "So geht es weiter": nummerierte Kreise (22px) statt der nativen
   ol-Nummerierung, über CSS-Counter, ohne zusätzliche DOM-Knoten. */
.public-job .bewerbung-v3__weiter {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: v3-weiter;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  line-height: 1.55;
}
.public-job .bewerbung-v3__weiter li {
  position: relative;
  min-height: 22px;
  padding-left: 34px;
  counter-increment: v3-weiter;
}
.public-job .bewerbung-v3__weiter li::before {
  content: counter(v3-weiter);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gc-ink);
  border: 1px solid var(--gc-line-ui);
  border-radius: 50%;
  font-size: .75rem;
  font-weight: 600;
}
.public-job .bewerbung-v3__kicker {
  margin: 0;
}
.public-job .bewerbung-v3__freiwillig {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: var(--gc-canvas);
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
}
.public-job .bewerbung-v3__freiwillig h4,
.public-job .bewerbung-v3__freiwillig p {
  margin: 0;
}
.public-job .bewerbung-v3__profil-formular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}
/* W-16e Punkt C: Gehalt und Erfahrung sind jetzt die einzigen zwei Kinder
   dieses Rasters (eigener Abschnitt, siehe .bewerbung-v3__profilabschnitt),
   beide bleiben bei grid-column:auto und liegen dadurch nebeneinander in
   Spalte 1 und 2. Vorher zwang eine "alles außer dem Stepper volle Breite"-
   Regel jedes Feld ohne Stepper auf 1/-1; solange VOR dem Stepper-Feld noch
   ein weiteres volle-Breite-Element in derselben Liste stand (b1/b6 im
   alten, flachen Formular), verhinderte das genau das “nebeneinander”, das
   der Kommentar dort versprach (leere zweite Spalte neben der Erfahrung).
   In der neuen, auf genau dieses Paar verengten Liste braucht es die
   Ausnahme nicht mehr. */
.public-job .bewerbung-v3__profil-formular > * {
  margin: 0;
}
.public-job .bewerbung-v3 .bewerbung-v3__profil-formular .filter__hinweis {
  margin: 8px 0 0;
}
@container (max-width: 520px) {
  .public-job .bewerbung-v3__profil-formular {
    grid-template-columns: minmax(0, 1fr);
  }
}
.public-job .bewerbung-v3__folgeaktionen {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}
/* W-LOOM-74: Der Mail-Hinweis bleibt auch in der mobilen Kurzansicht
   sichtbar. Die Adresse ist ein Link mit mindestens 44px Zielhöhe. */
.public-job .bewerbung-v3__widerruf-hinweis {
  margin: 0;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  line-height: 1.6;
}
.public-job .bewerbung-v3__widerruf-hinweis a {
  display: inline-flex;
  align-items: center;
}
.public-job .bewerbung-v3__folgeaktionen .btn,
.public-job .bewerbung-v3__zurueck {
  min-height: 44px;
}
.public-job .bewerbung-v3__zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--gc-ink);
  font-size: .875rem;
  font-weight: 600;
  text-underline-offset: 4px;
}
.public-job .bewerbung-v3__zurueck svg {
  width: 17px;
  height: 17px;
}
.public-job .bewerbung-v3__status,
.public-job .bewerbung-v3__feldfehler {
  margin: 0;
  color: #8b1d1d;
}
.public-job .bewerbung-v3__status {
  padding: 12px 14px;
  background: #fff3f1;
  border: 1px solid #c35e55;
  border-radius: var(--gc-radius-sm);
  font-size: .8125rem;
}
.public-job .bewerbung-v3__feldfehler {
  font-size: .75rem;
}
.public-job .bewerbung-v3__saved {
  margin: 0;
  color: var(--gc-green);
  font-weight: 600;
}
/* Befund G (Patric, 26.09.2026): Dank nach "Ja" in Karte A, deutlich
   größer/klarer als die sonstige leise Bestätigung .bewerbung-v3__saved
   (die nach "Nein" unverändert weiterläuft). */
.public-job .bewerbung-v3__dank {
  margin: 0;
  color: var(--gc-green);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}
/* Befund G: kleiner, unauffälliger Textlink statt Knopf mit Füllfarbe.
   Bleibt ein <button> (siehe bewerbung-v3.js, löst denselben Widerruf
   aus), nur die Gestaltung ist die eines Links. --gc-link hält 5,58:1 auf
   Sand und 6,30:1 auf Weiss (siehe Kommentar zu --job-kicker weiter oben in
   dieser Datei), min-height 44px bleibt trotz fehlender Füllung erhalten. */
.public-job .bewerbung-v3__textlink {
  min-height: 44px;
  width: fit-content;
  padding: 0;
  color: var(--gc-link);
  background: transparent;
  border: 0;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.public-job .bewerbung-v3__textlink:hover {
  color: var(--gc-green-deep);
  background: transparent;
  border-color: transparent;
}
.public-job .bewerbung-v3__textlink:disabled {
  color: var(--gc-ink-muted);
  text-decoration: none;
  cursor: default;
}

/* W-16e Punkt C: "Profil offen" und die Nachfrage-Ansicht ersetzen den
   ganzen Inhalt der Kachel (Auftrag), nicht nur die rechte Spalte. Beide
   sind eigene, direkte Kinder von .bewerbung-v3__nachlauf und müssen darum
   über die Kachel-Grid-Spalten hinweg (300px plus Rest ab 720px Container-
   breite) volle Breite ziehen. */
.public-job .bewerbung-v3__nachlauf-profil,
.public-job .bewerbung-v3__nachlauf-nachfrage {
  grid-column: 1 / -1;
}
.public-job .bewerbung-v3__nachlauf-nachfrage {
  display: grid;
  gap: 16px;
  padding: 34px 30px;
}
.public-job .bewerbung-v3__nachlauf-nachfrage .bewerbung-v3__kicker {
  margin-top: 6px;
}
.public-job .bewerbung-v3__profilkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 22px 22px;
  border-bottom: 1px solid var(--gc-line);
}
.public-job .bewerbung-v3__profilkopf-text {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.public-job .bewerbung-v3__profilkopf-text h4,
.public-job .bewerbung-v3__profilkopf-text p {
  margin: 0;
}
/* Entwurf 3 (Patric frei 26.09.): Die Profilüberschrift ist der Titel der
   ganzen Ansicht, nicht eine Kartenüberschrift. */
.public-job .bewerbung-v3 .bewerbung-v3__profilkopf-text h4 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.public-job .bewerbung-v3__profil-punkt {
  color: var(--gc-accent);
}
.public-job .bewerbung-v3__fortschritt {
  display: grid;
  gap: 8px;
  justify-items: end;
}
.public-job .bewerbung-v3__fortschritt p {
  margin: 0;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
}
.public-job .bewerbung-v3__fortschritt p strong,
.public-job .bewerbung-v3__fortschritt p span:first-child {
  color: var(--gc-ink);
  font-weight: 600;
}
.public-job .bewerbung-v3__fortschritt-leiste {
  display: block;
  width: 160px;
  height: 6px;
  border-radius: 3px;
  background: var(--gc-line);
  overflow: hidden;
}
.public-job .bewerbung-v3__fortschritt-fuellung {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--gc-green);
  /* Kein element.style: sechs feste Zwischenwerte reichen für sechs
     Profilfragen, jede Stufe ist eine eigene, feste Klasse (Punkt „keine
     Inline-Styles“). */
  width: 0%;
}
.public-job .bewerbung-v3__fortschritt-fuellung--1 { width: 16.6667%; }
.public-job .bewerbung-v3__fortschritt-fuellung--2 { width: 33.3333%; }
.public-job .bewerbung-v3__fortschritt-fuellung--3 { width: 50%; }
.public-job .bewerbung-v3__fortschritt-fuellung--4 { width: 66.6667%; }
.public-job .bewerbung-v3__fortschritt-fuellung--5 { width: 83.3333%; }
.public-job .bewerbung-v3__fortschritt-fuellung--6 { width: 100%; }
.public-job .bewerbung-v3__profilabschnitt {
  display: grid;
  gap: 14px;
  padding: 24px 22px;
  border-bottom: 1px solid var(--gc-line);
}
.public-job .bewerbung-v3__profilabschnitt--letzte {
  border-bottom: 0;
}
.public-job .bewerbung-v3__profilabschnitt .filter__gruppe {
  margin: 0;
}
.public-job .bewerbung-v3__zusatz {
  margin-left: 8px;
  color: var(--gc-ink-muted);
  font-size: .75rem;
  font-weight: 400;
}
/* BC-U4b Punkt 1: zwei frei ausfüllbare Gehaltsfelder in Teil B. */
.public-job .bewerbung-v3__gehaltsspanne {
  min-width: 0;
  padding: 0;
  border: 0;
}
.public-job .bewerbung-v3__gehaltsspanne-felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.public-job .bewerbung-v3__gehaltsspanne-felder > label {
  min-width: 0;
}
.public-job .bewerbung-v3__gehaltsfeld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-surface);
}
.public-job .bewerbung-v3__gehaltsfeld .eingabe {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.public-job .bewerbung-v3__gehaltsfeld .eingabe:focus {
  box-shadow: none;
  outline: none;
}
/* Der Ring liegt um das ganze Feld samt Einheit, nicht nur um das innere
   Eingabefeld (PRUEFLISTE_UI 4: nie ohne sichtbaren Ersatz entfernen). */
.public-job .bewerbung-v3__gehaltsfeld:has(.eingabe:focus-visible) {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}
.public-job .bewerbung-v3__gehaltsfeld-einheit {
  flex: 0 0 auto;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  white-space: nowrap;
}
.public-job .bewerbung-v3__profilfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 18px 22px;
  background: var(--gc-canvas);
  border-top: 1px solid var(--gc-line);
}
/* "Alles erledigt": bewusst ohne Rand, anders als .bewerbung-v3__freiwillig
   (Entwurf 4 zeigt den Kasten ohne Border, nur mit Füllfläche). */
.public-job .bewerbung-v3__erledigt {
  display: grid;
  gap: 14px;
  padding: 22px 20px;
  background: var(--gc-canvas);
  border-radius: var(--gc-radius-control);
}
.public-job .bewerbung-v3__erledigt p {
  margin: 0;
  font-weight: 600;
}
@container (max-width: 519px) {
  .public-job .bewerbung-v3__profilkopf,
  .public-job .bewerbung-v3__profilabschnitt,
  .public-job .bewerbung-v3__profilfuss {
    padding-inline: 18px;
  }
  .public-job .bewerbung-v3__fortschritt {
    justify-items: start;
  }
  .public-job .bewerbung-v3__fortschritt-leiste {
    width: 100%;
    max-width: 200px;
  }
}

@container (min-width: 720px) {
  .public-job .bewerbung-v3__fortschrittsbalken {
    display: none;
  }
  .public-job .bewerbung-v3__shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }
  .public-job .bewerbung-v3__leiste {
    display: grid;
    align-content: start;
    gap: 0;
    padding: 29px 22px 22px;
    background: var(--gc-canvas);
    border-right: 1px solid var(--gc-line);
  }
  .public-job .bewerbung-v3__leistenpunkt {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 8px 13px;
    min-height: 65px;
    padding: 0 0 15px;
    color: var(--gc-ink-muted);
    background: transparent;
    border: 0;
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  /* Verbindungslinie zwischen den Punkten: 1px, mittig unter dem 26px-Punkt
     (13px - 0.5px Linienbreite = 12.5px), vom Punktrand bis zum Eintragsende.
     Nach dem letzten Eintrag keine Linie. */
  .public-job .bewerbung-v3__leistenpunkt:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 31px;
    bottom: 0;
    left: 12.5px;
    width: 1px;
    background: var(--gc-line-strong);
  }
  .public-job .bewerbung-v3__leistenpunkt.ist-erledigt:not(:last-child)::after {
    background: var(--gc-green);
  }
  /* Der Punkt trägt die Zahl (aktuell/offen) oder das Häkchen (erledigt);
     beide tauschen beim redraw() in bewerbung-v3.js, nie beides gleichzeitig
     (das erzeugte vorher die doppelten Labels/das abgeschnittene "No…"). */
  .public-job .bewerbung-v3__leistenpunkt-punkt {
    display: flex;
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--gc-green);
    background: var(--gc-surface);
    border: 2px solid var(--gc-green);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
  }
  .public-job .bewerbung-v3__leistenpunkt-punkt svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.3;
  }
  .public-job .bewerbung-v3__leistenpunkt.ist-erledigt .bewerbung-v3__leistenpunkt-punkt {
    color: var(--gc-green-ink);
    background: var(--gc-green);
    border-color: var(--gc-green);
  }
  .public-job .bewerbung-v3__leistenpunkt:disabled .bewerbung-v3__leistenpunkt-punkt {
    color: var(--gc-ink-muted);
    background: transparent;
    border-width: 1px;
    border-color: var(--gc-line-ui);
  }
  .public-job .bewerbung-v3__leistenpunkt-label {
    grid-column: 2;
    font-size: .8125rem;
  }
  .public-job .bewerbung-v3__leistenpunkt[aria-current="step"] {
    color: var(--gc-ink);
    font-weight: 600;
  }
  .public-job .bewerbung-v3__leistenpunkt.ist-erledigt {
    color: var(--gc-ink);
  }
  .public-job .bewerbung-v3__leisteninfo {
    overflow: hidden;
    color: var(--gc-ink-muted);
    font-size: .75rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .public-job .bewerbung-v3__form {
    padding: 29px 34px 31px;
  }
  /* .bewerbung-v3__actions ist im Grundstil bereits statisch (siehe oben);
     hier keine eigene Regel mehr nötig, sticky bleibt Mobil vorbehalten. */
  .public-job .bewerbung-v3__nachlauf {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .public-job .bewerbung-v3__nachlauf-links {
    padding: 29px;
    border-right: 1px solid var(--gc-line);
    border-bottom: 0;
  }
}

@container (max-width: 519px) {
  .public-job .bewerbung-v3__wrapper {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .public-job .bewerbung-v3__kopf {
    gap: 7px;
    padding: 17px 22px 15px;
  }
  /* W-16e Punkt C, Befund: ".bewerbung-v3__kicker" ohne Vorfahren-Bezug traf
     nicht nur den Kopf-Kicker ("Direkt zum Betrieb..."), sondern auch jeden
     gleichnamigen Kicker im Nachlauf ("Freiwillig", "Schneller gefunden
     werden", "EINE LETZTE FREIWILLIGE FRAGE") und blendete sie unter 520px
     unsichtbar aus, obwohl sie dort eine Überschrift tragen (gemessen bei
     390px: leerer Platz statt "Freiwillig"). Nur der Kopf-Kicker soll hier
     weichen, der Nachlauf ist kein Vorfahre von .bewerbung-v3__kopf. */
  .public-job .bewerbung-v3__kopf .bewerbung-v3__kicker,
  .public-job .bewerbung-v3__merkmal:last-child {
    display: none;
  }
  .public-job .bewerbung-v3__titel {
    font-size: 1.4375rem;
  }
  .public-job .bewerbung-v3__stelle {
    font-size: .75rem;
    line-height: 1.65;
  }
  .public-job .bewerbung-v3__form {
    gap: 17px;
    padding: 17px 22px 26px;
  }
  .public-job .bewerbung-v3__panel .bewerbung-v3__schrittkopf h4 {
    font-size: 1.1875rem;
  }
  .public-job .bewerbung-v3__choice .haken__text {
    padding-inline: 13px;
    font-size: .75rem;
  }
  /* Runde 2: Minikopf ersetzt die H2 vollständig, sobald kompakt (ab
     Schritt 2). "Details" saß vorher nur im aufgeklappten Zustand im DOM
     sichtbar (Denkfehler in der alten Regel: :not(.eingeklappt) zeigte den
     Knopf ausgerechnet dort, wo man ihn zum Aufklappen bräuchte). Jetzt
     steckt der Knopf fest in .minikopf und ist damit in beiden
     Unterzuständen da, nur der Text wechselt (Details/Einklappen, JS). */
  .public-job .bewerbung-v3__kopf--kompakt .bewerbung-v3__titel {
    display: none;
  }
  .public-job .bewerbung-v3__kopf--kompakt .bewerbung-v3__minikopf {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
  }
  .public-job .bewerbung-v3__kopf--kompakt .bewerbung-v3__minikopf .bewerbung-v3__details {
    display: inline-flex;
    flex: 0 0 auto;
  }
  .public-job .bewerbung-v3__kopf--eingeklappt .bewerbung-v3__stelle,
  .public-job .bewerbung-v3__kopf--eingeklappt .bewerbung-v3__merkmale {
    display: none;
  }
  /* Knopfleiste nur hier (< 520px Containerbreite) klebend: unten fixiert,
     Primärknopf über flex:1 auf volle Breite. Kein Weichzeichner (Handoff
     wollte backdrop-filter, das entfällt laut Bauauflage). */
  .public-job .bewerbung-v3__actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 11px 0 calc(11px + env(safe-area-inset-bottom));
    background: var(--gc-surface);
  }
  .public-job .bewerbung-v3__actions .btn-aktion {
    flex: 1;
  }
}

/* Schritt 3 (Kontakt): eigene, containerbreiten-abhängige Feldspalten statt
   der geteilten V1/V2-Regel (@media (min-width:768px), fest zweispaltig).
   Die 210px-Spalten falten sich in jedem der drei Layout-Modi passend. */
.public-job .bewerbung-v3 .bewerbung__abschnitt-felder--kontakt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 17px;
}

.public-job .bewerbung-v3__wrapper::placeholder,
.public-job .bewerbung-v3__wrapper .eingabe::placeholder {
  color: var(--gc-ink-muted);
  opacity: 1;
}
@container (max-width: 719px) {
  /* Bildrundgang 09.10.: Die Knopfleiste klebt im Fluss (sticky), sie
     verdeckt am Ende nichts. 88px Abstand standen als leere Fläche unter
     der Sicherheitsprüfung. scroll-margin hält Sprünge frei. */
  .public-job .bewerbung-v3__turnstile {
    margin-bottom: 16px;
    scroll-margin-bottom: 104px;
  }
}

/* W-16b (Feedback Patric 26.09.): keine Worttrennung in der Kachel.
   Einzelne Regeln (Chiptext, Überschriften) setzen hyphens:auto mit eigener
   Spezifität; der ID-Selektor gilt für alle Nachfahren. Knopftexte bleiben
   einzeilig; overflow-wrap:anywhere aus .stellenspalte brach „Kopieren“
   sonst mitten im Wort. */
#bewerbung-v3,
#bewerbung-v3 * {
  hyphens: manual;
}
#bewerbung-v3 button,
#bewerbung-v3 .btn {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.public-job .bewerbung-v3__nowrap {
  white-space: nowrap;
}

/* =====================================================================
   W-16f: Bestätigung nach Patrics Handy-Entwurf („Bewerbung gesendet
   Mobile“, 26.09.2026). Desktop sieht aus wie bisher: Kern und
   „So geht es weiter“ sind dort display:contents, die Handy-Teile
   (Plus-Knopf, Kicker an Karte A, Kurzzeile der Profil-Leiste) sind aus.
   ===================================================================== */
.public-job .bewerbung-v3__quittung-kern,
.public-job .bewerbung-v3__weiterblock,
.public-job .bewerbung-v3__weiterkopf {
  display: contents;
}
.public-job .bewerbung-v3__weiterknopf,
.public-job .bewerbung-v3__teaser-kurz {
  display: none;
}
/* Karte A: gleich gewichtete Antworten ohne Unterzeilen. */
.public-job .bewerbung-v3__einwilligungstext {
  color: var(--gc-ink-muted);
  font-size: .75rem;
  line-height: 1.55;
}
.public-job .bewerbung-v3__choice--karten {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 12px;
}
.public-job .bewerbung-v3__choice--karten .haken {
  display: block;
  border-radius: var(--gc-radius-control);
}
.public-job .bewerbung-v3__choice--karten .haken__text {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 3px 14px;
  min-height: 44px;
  padding: 14px 16px;
  color: var(--gc-ink);
  background: var(--gc-surface);
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  font-size: .9375rem;
}
.public-job .bewerbung-v3__choice--karten .haken__text::before {
  content: "";
  grid-row: 1;
  width: 20px;
  height: 20px;
  background: var(--gc-surface);
  border: 2px solid var(--gc-line-ui);
  border-radius: 50%;
}
.public-job .bewerbung-v3__choice--karten .haken__titel {
  grid-column: 2;
  font-weight: 600;
}
.public-job .bewerbung-v3__choice--karten .haken__unterzeile {
  grid-column: 2;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  line-height: 1.45;
}
.public-job .bewerbung-v3__choice--karten .haken input:checked + .haken__kasten + .haken__text {
  color: var(--gc-ink);
  background: var(--gc-canvas-2);
  border-color: var(--gc-green);
}
.public-job .bewerbung-v3__choice--karten .haken input:checked + .haken__kasten + .haken__text::before {
  background: var(--gc-green);
  border-color: var(--gc-green);
  box-shadow: inset 0 0 0 3px var(--gc-surface);
}

/* Handy (Kachel unter 520 px, Klasse setzt bewerbung-v3.js): eine Spalte
   in DOM-Reihenfolge (Sol W-16f R1: keine Umsortierung per CSS). Band oben,
   Karte A, So geht es weiter (zu), Referenz, Lebenslauf, Rückweg, Hinweis,
   Profil-Leiste klebt unten. */
.public-job .bewerbung-v3__nachlauf-rechts:empty {
  display: none;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__nachlauf-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 22px;
  background: transparent;
  border: 0;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__quittung-kern {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding: 14px 16px;
  background: var(--gc-canvas-2);
  border-radius: var(--gc-radius-control);
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__quittung-kern > svg {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  padding: 10px;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__quittung-kern h3 {
  font-size: 1.0625rem;
  letter-spacing: normal;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__bestaetigung {
  margin: 0;
  font-size: .8125rem;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__folgeentscheidung {
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__karte-a-kicker {
  display: block;
  text-transform: uppercase;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__folgeentscheidung h4 {
  color: var(--gc-ink);
  font-size: 1.375rem;
  line-height: 1.2;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__weiterblock {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gc-line);
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__weiterkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Gleiche Gestaltung wie ".bewerbung-v3__quittung h4": am Handy liegt der
   Block nicht mehr in der Quittung. */
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__weiterkopf h4 {
  margin: 0;
  color: var(--gc-ink);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__weiterknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--gc-green);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 1.375rem;
  font-weight: 600;
  cursor: pointer;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__weiterblock:not(.ist-offen) .bewerbung-v3__weiter {
  display: none;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__nachlauf-links > .bewerbung-v3__hint {
  font-size: .75rem;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser {
  position: sticky;
  bottom: 0;
  z-index: 3;
  gap: 10px;
  margin: 0 -22px -20px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  background: var(--gc-surface);
  border: 0;
  border-top: 1px solid var(--gc-line);
  border-radius: 0;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser > .bewerbung-v3__kicker,
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser > h4,
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser > p:not(.bewerbung-v3__teaser-kurz) {
  display: none;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser-kurz {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
  color: var(--gc-ink);
  font-size: .875rem;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser-kurz span {
  color: var(--gc-ink-muted);
  font-size: .75rem;
}
.public-job .bewerbung-v3__nachlauf--mobil[data-ablauf="start"] .bewerbung-v3__teaser .btn {
  justify-content: space-between;
  width: 100%;
}

/* =====================================================================
   W-16g (Patric, iPhone, 26.09.2026): Nach der Antwort in Karte A steht
   „Profil vervollständigen“ als nächster Schritt direkt darunter. Karte A
   schrumpft auf eine Zeile, die klebende Leiste entfällt, die Kachel
   leuchtet beim ersten Erscheinen kurz auf. „Zurück zur Stellenanzeige“
   gibt es am Handy nicht mehr (Anker hinter dem Dialog).
   ===================================================================== */
.public-job .bewerbung-v3__karte-a-kurz,
.public-job .bewerbung-v3__teaser-schritt,
.public-job .bewerbung-v3__teaser-nutzen {
  display: none;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__folgeentscheidung > .bewerbung-v3__karte-a-kicker {
  display: none;
}
/* Überschrift und Dank bleiben für Screenreader lesbar (gleiche Werte wie
   .sr-only in primitives.css); sichtbar steht nur „Gespeichert“, das
   seinerseits aria-hidden ist, damit nichts doppelt angesagt wird. */
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__folgeentscheidung > h4,
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__folgeentscheidung > .bewerbung-v3__dank,
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__folgeentscheidung > .bewerbung-v3__saved {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__folgeentscheidung {
  gap: 4px;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__karte-a-kurz {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gc-green);
  font-size: .9375rem;
  font-weight: 600;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__karte-a-kurz svg {
  width: 18px;
  height: 18px;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser {
  position: static;
  gap: 10px;
  margin: 0;
  padding: 18px;
  background: var(--gc-canvas-2);
  border: 1px solid var(--gc-green);
  border-radius: var(--gc-radius-control);
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser > .bewerbung-v3__teaser-kurz {
  display: none;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser > .bewerbung-v3__teaser-schritt {
  display: block;
  margin: 0;
  color: var(--gc-green);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser > h4 {
  display: block;
  color: var(--gc-ink);
  font-size: 1.25rem;
  line-height: 1.25;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser > .bewerbung-v3__teaser-nutzen {
  display: block;
  margin: 0;
  color: var(--gc-ink);
  font-size: .875rem;
  line-height: 1.5;
}
.public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser.ist-neu {
  animation: bewerbung-v3-hervorheben 1.6s ease-out 1;
}
@keyframes bewerbung-v3-hervorheben {
  0% {
    box-shadow: 0 0 0 0 var(--gc-green);
  }
  30% {
    box-shadow: 0 0 0 6px var(--gc-canvas-2);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .public-job .bewerbung-v3__nachlauf--mobil.bewerbung-v3__nachlauf--entschieden[data-ablauf="start"] .bewerbung-v3__teaser.ist-neu {
    animation: none;
  }
}

/* W-16h: Code unter dem Lebenslauf-Status (Fehlerkennung für Rückfragen),
   klein und gedämpft. */
.public-job .bewerbung-v3__datei-grund {
  margin: 0;
  color: var(--gc-ink-muted);
  font-size: .75rem;
  overflow-wrap: anywhere;
}

/* 01.10.2026, A11y-Durchgang: „Weiterlesen“ im Stellenkopf bekommt am Handy
   eine Tap-Fläche von 44 px. Aussehen sonst unverändert. */
@media (max-width: 767.98px) {
  .public-job .stellenkopf__weiterlesen {
    min-height: 44px;
  }
}

/* W-LOOM-P3: native Haken, feste Kontaktwege und volle Tippfläche. */
.public-job .bewerbung-v3__kontaktwege .haken {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px;
  border-radius: var(--gc-radius-chip);
}
.public-job .bewerbung-v3__kontaktwege .haken input {
  position: static;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  opacity: 1;
  pointer-events: auto;
}
.public-job .bewerbung-v3__kontaktwege .haken input:disabled {
  cursor: default;
}
.public-job .bewerbung-v3__kontaktwege .haken .haken__text {
  display: block;
  min-height: 0;
  padding: 0;
  color: var(--gc-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  opacity: 1;
}
/* Die Auswahlfarbe der Chips (.bewerbung-v3__choice ... :checked +
   .haken__kasten + .haken__text, dunkler Grund) darf den WhatsApp-Haken
   nicht treffen: sein Text bleibt auch angehakt normal. */
.public-job .bewerbung-v3__kontaktwege .haken input:checked + .haken__kasten + .haken__text {
  color: var(--gc-ink);
  background: transparent;
  border-color: transparent;
}
/* Patric 10.10.2026: feste Kontaktwege als zwei Einträge mit Symbol nebeneinander
   (brechen nur bei sehr schmaler Breite um).
   Ohne Rahmen und Fläche, damit sie nicht wie wählbare Chips wirken. */
.public-job .bewerbung-v3__kontaktwege > .bewerbung-v3__kontaktfest {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.public-job .bewerbung-v3__kontaktfest-punkt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gc-ink);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.public-job .bewerbung-v3__kontaktfest-punkt svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--gc-action);
}
.public-job .bewerbung-v3__kontaktwege .haken--lang {
  flex-basis: 100%;
  align-items: flex-start;
}
.public-job .bewerbung-v3__kontaktwege .haken--lang input {
  margin-top: 2px;
}

/* Titelbilder bleiben vollständig sichtbar. Beide Ebenen teilen dieselbe
   Adresse. Patric 09.10.: Der Kopf behält seine bisherigen Formate
   (2,65 / 2,1 / 2 / 1,6, volle Breite); nur der Inhalt wird eingepasst.
   Die Galerie behält ihr bisheriges Format 1,65. Videos behalten 16:9. */
.public-job .stellenkopf__bild--eigenes {
  position: relative;
}

.public-job .titelbild-buehne {
  position: relative;
  width: 100%;
  aspect-ratio: 1.65;
  overflow: hidden;
  border-radius: var(--gc-radius-feature);
}


.public-job .titelbild-buehne > img[data-titelbild-ebene],
.public-job .stellenkopf__bild--eigenes > img[data-titelbild-ebene] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  object-position: 50% 50%;
  background: transparent;
}

.public-job .titelbild-buehne > img[data-titelbild-ebene="hinten"],
.public-job .stellenkopf__bild--eigenes > img[data-titelbild-ebene="hinten"] {
  z-index: 0;
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.1);
}

.public-job .titelbild-buehne > img[data-titelbild-ebene="vorn"],
.public-job .stellenkopf__bild--eigenes > img[data-titelbild-ebene="vorn"] {
  z-index: 1;
  object-fit: contain;
}

/* Text und Schleier liegen nicht auf dem eigenen Bild oder Plakat. */
.public-job .stellenkopf__bild--eigenes > :is(.jobbild__schleier, .jobbild__schimmer, figcaption, .jobbild__betrieb) {
  display: none;
}

/* Bildrundgang 09.10.2026 (Patric, Leitstand Nachtauftrag 2).
   Hinweise ohne eigene Größe erbten die Fließtextgröße der Stellenspalte. */
.public-job .bewerbung-v3__unterabschnitt > .bewerbung-v3__hint {
  margin: 8px 0 0;
  color: var(--gc-ink-muted);
  font-size: .8125rem;
  line-height: 1.6;
}
/* „WhatsApp zusätzlich (freiwillig)“ ist eine Zwischenzeile wie die
   Frage darüber („Wie kann dich der Betrieb erreichen?“). */
.public-job .bewerbung-v3__kontaktwege > .bewerbung-v3__hint {
  margin-top: 10px;
  color: var(--gc-ink);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Nach dem Absenden: der Satz unter Ja/Nein in Textgröße der Karte. */
.public-job .bewerbung-v3__entscheidung-hinweis {
  margin: 0;
  color: var(--gc-ink);
  font-size: .875rem;
  line-height: 1.6;
}
/* Fehlerhaftes Feld bleibt auch im Fokus rot markiert. */
.public-job .bewerbung-v3 .eingabe[aria-invalid="true"],
.public-job .bewerbung-v3 .eingabe[aria-invalid="true"]:focus,
.public-job .bewerbung-v3 .eingabe[aria-invalid="true"]:hover {
  border-color: oklch(0.49 0.15 28);
}
.public-job .bewerbung-v3 input[aria-invalid="true"]:focus-visible,
.public-job .bewerbung-v3 textarea[aria-invalid="true"]:focus-visible {
  outline-color: oklch(0.49 0.15 28);
}
/* Handy-Dialog: Das runde Schließen-X (44px) ragte 9px über den Kopf in den
   Formularrahmen. Der Kopf ist jetzt mindestens so hoch wie das X plus
   Abstand, der Titel steht mittig zum X. */
@media (max-width: 767.98px) {
  .public-job .bewerbung-funnel .bewerbung__kopf {
    box-sizing: border-box;
    /* Das X sitzt zusätzlich um die obere Safe Area tiefer (Sol #109). */
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: 10px;
  }
}

/* Patric 10.10.2026: WhatsApp-Nachfrage in Schritt 3 (wieder eingebaut).
   Abstand zum Haken darüber, sichtbarer Fokus beim Erscheinen. */
.public-job .bewerbung-v3__panel > .bewerbung-v3__whatsapp-hinweis {
  margin-top: 16px;
}
.public-job .bewerbung-v3__whatsapp-hinweis:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

/* Patric 10.10.2026: Das Absenden dauert spürbar. Der Knopf zeigt einen
   kleinen Drehring und bleibt trotz disabled gut lesbar. */
.public-job .bewerbung-v3__actions .btn.ist-sendend,
.public-job .bewerbung-v3__actions .btn.ist-sendend:disabled,
.public-job .bewerbung-v3__actions .btn.ist-sendend:disabled:hover {
  opacity: 1;
  border-color: var(--gc-action);
  background: var(--gc-action);
  color: var(--gc-action-ink);
  cursor: progress;
}
.public-job .bewerbung-v3__actions .btn.ist-sendend::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  inline-size: 16px;
  block-size: 16px;
  margin-inline-end: 10px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: bewerbung-laden 720ms linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .public-job .bewerbung-v3__actions .btn.ist-sendend::before {
    animation: none;
    border-inline-end-color: currentColor;
    opacity: .6;
  }
}

/* O4: Lebenslauf nach bestätigtem Profil, unveränderte Website-Tokens. */
.public-job .bewerbung-v3__upload {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.public-job .bewerbung-v3__upload [hidden] {
  display: none !important;
}
.public-job .bewerbung-v3__upload .filter__gruppe,
.public-job .bewerbung-v3__upload .bewerbung__dateiauswahl {
  min-width: 0;
  max-width: 100%;
}
.public-job .bewerbung-v3__upload .bewerbung__dateiauswahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 18px;
  border: 1px dashed var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas);
}
.public-job .bewerbung-v3__upload .bewerbung__dateiauswahl input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.public-job .bewerbung-v3__upload p,
.public-job .bewerbung-v3__zustandsfehler {
  min-width: 0;
  overflow-wrap: anywhere;
}
.public-job .bewerbung-v3__upload .btn {
  min-width: 44px;
  min-height: 44px;
}
/* W-STELLE-REITER-1012. Diese einzige benannte Grenze steuert CSS UND JS.
   STELLE_REITER_GRENZE: nur mobil unter 768 px. Für andere Geltung nur
   die nächste @media-Zeile ändern; JS liest --stelle-reiter-aktiv. */
.public-job { --stelle-reiter-aktiv: 0; }
@media (width < 768px) {
  .public-job { --stelle-reiter-aktiv: 1; }
  /* FB20-05: Ohne JS/Observer bleibt der ursprüngliche Bewerbungsanker. */
  .public-job .bewerbleiste-beobachtet:not(.bewerbleiste-nach-cta) {
    display: none;
  }
  /* FB20-07: Nach dem Versetzen der Fakten bleibt genau eine Linie. */
  .public-job.stelle-reiter-mobil .bewerbungskarte__hinweis + .bewerbungskarte__trenner {
    display: none;
  }
  .public-job.stelle-reiter-mobil .stellenrueckwege {
    justify-content: center;
    gap: var(--sp-6);
  }
  .public-job .stellen__block--vorteile :is(.benefits--gruppen, .benefits--einfach) {
    grid-template-columns: minmax(0, 1fr);
  }
  .public-job.stelle-reiter-mobil #stellenanzeige > .wrap,
  .public-job.stelle-reiter-mobil .stellenkopf__inhalt {
    padding-inline: var(--sp-4);
  }
  .public-job.stelle-reiter-mobil .stellenkopf__inhalt {
    display: block;
    padding-bottom: 0;
  }
  .public-job.stelle-reiter-mobil .stellenkopf__bild {
    margin-bottom: 0;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf {
    position: relative;
    padding-bottom: var(--sp-6);
    color: var(--gc-ink);
  }
  .public-job.stelle-reiter-mobil [data-reiter-logo] {
    position: relative;
    z-index: 2;
    width: var(--sp-20);
    margin-top: calc(-1 * var(--sp-10));
    margin-left: var(--sp-4);
    margin-bottom: var(--sp-4);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .betrieb__medien {
    width: var(--sp-20);
    height: var(--sp-20);
    padding: var(--sp-2);
    border-radius: var(--gc-radius-card);
    background: var(--gc-surface);
    box-shadow: var(--gc-shadow-small);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .betrieb__medien > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--gc-radius-sm);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .betrieb__name {
    margin: 0 0 var(--sp-2);
    font-size: var(--gc-fs-lead);
    font-weight: 600;
    color: var(--gc-ink);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .betrieb__ort {
    margin: 0 0 var(--sp-4);
    color: var(--gc-ink-muted);
    font-size: var(--gc-fs-lead);
    line-height: var(--gc-lh-body);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .betrieb__bereich,
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .betrieb__trenner {
    display: none;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .stellen__titel {
    margin: 0 0 var(--sp-6);
    font-size: var(--gc-fs-page);
    line-height: var(--gc-lh-title);
    letter-spacing: var(--ls-display);
    overflow-wrap: anywhere;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .stellen__mwd {
    display: inline;
    font-size: var(--gc-fs-lead);
    font-style: normal;
    white-space: nowrap;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__bewerben {
    width: 100%;
    justify-content: center;
    margin-bottom: var(--sp-6);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__tabs {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--gc-line);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 48px;
    padding: var(--sp-2);
    background: var(--gc-canvas-3);
    color: var(--gc-ink);
    border-radius: var(--gc-radius-control);
    font-size: var(--gc-fs-small);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__tabs a[aria-selected="true"] {
    background: var(--gc-action);
    color: var(--gc-action-ink);
    font-weight: 600;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__tabs a:focus-visible,
  .public-job.stelle-reiter-mobil .stelle-reiter__mediennav button:focus-visible {
    outline: 3px solid var(--gc-action);
    outline-offset: 3px;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel {
    scroll-margin-top: var(--sp-20);
    min-width: 0;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel :is(p, li),
  .public-job.stelle-reiter-mobil .stelle-reiter__leer {
    font-size: var(--gc-fs-lead);
    line-height: var(--gc-lh-body);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .stellen__block {
    margin-top: var(--sp-6);
    padding-top: var(--sp-6);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .stellenkopf__lead {
    max-width: var(--zeile);
    margin: var(--sp-6) 0;
  }
  /* Die Kartendaten stehen mobil auf hellem Grund. Ihre ursprünglichen
     dunklen Kartenfarben und 11-px-Grade dürfen nicht mitwandern. */
  /* FB20-06: Arbeitsbedingungen, dann ergänzende Stellendaten. Die
     vorhandenen dt/dd-Paare bleiben zusammen, optionale Paare entfallen
     weiterhin durch den Renderer. Keine festen Rasterzeilen reservieren. */
  .public-job.stelle-reiter-mobil .stelle-reiter__panel :is(.eckdaten, .bewerbungskarte__daten) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--gc-line);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .eckdaten {
    margin: 0;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel :is(.eckdaten__paar, .bewerbungskarte__zeile):not([hidden]) {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .eckdaten dt {
    /* Die sr-only-Hilfsklasse setzt diese Eigenschaften mit !important.
       Nur im mobilen Faktenraster werden die Beschriftungen sichtbar. */
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 var(--sp-1) !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none;
    white-space: normal !important;
    color: var(--gc-ink-muted);
    font-size: var(--gc-fs-small);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel :is(.eckdaten dd, .bewerbungskarte__zeile dd) {
    max-width: none;
    margin: 0;
    text-align: left;
    color: var(--gc-ink);
    font-size: var(--gc-fs-lead);
    line-height: var(--gc-lh-body);
  }
  .public-job.stelle-reiter-mobil .eckdaten__paar[data-eckdatum="vertrag"] { order: 1; }
  .public-job.stelle-reiter-mobil .eckdaten__paar[data-eckdatum="frist"] { order: 2; }
  .public-job.stelle-reiter-mobil .eckdaten__paar[data-eckdatum="gehalt"] {
    order: 3;
    grid-column: 1 / -1;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .bewerbungskarte__daten {
    margin-block: var(--sp-4) var(--sp-6);
    color: var(--gc-ink);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .bewerbungskarte__zeile {
    border-color: var(--gc-line);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .bewerbungskarte__zeile dt {
    color: var(--gc-ink-muted);
    font-size: var(--gc-fs-lead);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .bewerbungskarte__zeile dd,
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .bewerbungskarte__zeile dd.num {
    color: var(--gc-ink);
    font-size: var(--gc-fs-lead);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .stellenmedien {
    margin-block: var(--sp-6);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .stellenmedien__grossansicht {
    min-width: 0;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel .titelbild-buehne {
    touch-action: pan-y;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__mediennav {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__mediennav button {
    min-width: 44px;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid var(--gc-line-ui);
    border-radius: var(--gc-radius-control);
    background: var(--gc-surface);
    color: var(--gc-ink);
    font: inherit;
    cursor: pointer;
  }
  .public-job.stelle-reiter-mobil .stelle-reiter__panel :is(a, button) {
    min-width: 44px;
    min-height: 44px;
  }
  .public-job.stelle-reiter-mobil .stellenspalte__kopf .betrieb:has(.betrieb__text:empty) {
    display: none;
  }
}
/* Zusätzliche Steuerung hat außerhalb der mobilen Geltung keine Fläche. */
.public-job .stelle-reiter__mediennav { display: none; }
.public-job.stelle-reiter-mobil .stelle-reiter__mediennav { display: flex; }
/* Ausgelagerter vorhandener Inline-Stil, unveränderte Geometrie. */
.public-job #kopf-merkpunkt { position: absolute; top: 0; height: 24px; width: 1px; }
/* Ersatz der vorhandenen display:none-Inline-Stile, auch ohne JS. */
.public-job .punktliste > li[hidden],
.public-job .benefits > li[hidden],
.public-job #bewerbung-whatsapp-freiwillig[hidden] { display: none; }

/* Öffentlicher v3-Abruf liefert keine Betriebsbeschreibung. Der heutige
   summary-Ersatz bleibt am Desktop; mobil ist er bereits Jobbeschreibung.
   Auftrag Daten/Feldlücken: keinen fehlenden Altblock als Betriebsinhalt zeigen. */
.public-job.stelle-reiter-mobil :is(.betrieb__beschreibung, .betrieb__beschreibung-mehr):not([data-betrieb-echt]) { display: none; }

/* W1: Kontakt außerhalb der L11-Reiter, derselbe Knoten für jede Breite. */
.public-job .ansprech[hidden],
.public-job .ansprech [hidden] { display: none; }
.public-job .ansprech__inhalt {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
}
.public-job .ansprech__bild {
  grid-row: 1 / 3;
  width: 150px;
  height: 150px;
  border: 4px solid var(--gc-canvas-2);
  border-radius: 50%;
  object-fit: cover;
  background: var(--gc-canvas-2);
}
.public-job .ansprech__text { min-width: 0; overflow-wrap: anywhere; }
.public-job .ansprech__person { color: var(--gc-ink); font-weight: 600; }
.public-job .ansprech__funktion { color: var(--gc-ink-muted); margin-block: var(--sp-2) 0; }
.public-job .ansprech__aktionen { grid-column: 2; align-items: flex-start; min-width: 0; }
.public-job .ansprech__aktionen .btn { min-height: 44px; min-width: 44px; width: auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.public-job .ansprech__aktionen .btn:focus-visible { outline: 3px solid var(--gc-action); outline-offset: 3px; }
.public-job .ansprech__nummer { margin: 0; color: inherit; }
.public-job .ansprech__anrufen { display: none; }
@media (width < 768px) {
  .public-job .ansprech__inhalt { grid-template-columns: 112px minmax(0, 1fr); gap: var(--sp-4); }
  .public-job .ansprech__bild { grid-row: 1; width: 112px; height: 112px; }
  .public-job .ansprech__aktionen { grid-column: 1 / -1; width: 100%; }
  .public-job .ansprech__aktionen .btn { width: 100%; }
  .public-job .ansprech__anrufen { display: inline; }
  .public-job .ansprech__nummer { display: none; }
}

/* W2: echte Firmeninhalte im Über-uns-Reiter, bestehende Design-05-Tokens. */
.public-job [data-block="betrieb"] [hidden] { display: none; }
.public-job .betrieb__beschreibung { overflow-wrap: anywhere; }
.public-job .betrieb__beschreibung > :first-child { margin-top: 0; }
.public-job .betrieb__beschreibung > :last-child { margin-bottom: 0; }
.public-job .betrieb__beschreibung :is(ul, ol) { padding-left: var(--sp-6); }
.public-job .betrieb__kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-6);
}
.public-job .betrieb__kennzahlen > div {
  padding: var(--sp-4);
  background: var(--gc-canvas-2);
  border-radius: var(--gc-radius-card);
  overflow-wrap: anywhere;
}
.public-job .betrieb__kennzahlen dt { color: var(--gc-ink-muted); }
.public-job .betrieb__kennzahlen dd { margin: var(--sp-2) 0 0; color: var(--gc-ink); font-size: var(--gc-fs-lead); font-weight: 600; }
.public-job :is([data-betrieb-karriere], [data-betrieb-route]) {
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-block: var(--sp-4);
}
.public-job :is([data-betrieb-karriere], [data-betrieb-route]):focus-visible { outline: 3px solid var(--gc-action); outline-offset: 3px; }

.public-job .betrieb__kennzahlen:not(:has(> div:not([hidden]))) { display: none; }
.public-job .ansprech__inhalt:has([data-kontakt-text][hidden]) .ansprech__aktionen { grid-column: 1 / -1; }

/* FB20-30: nur Vorabauswahl in Schritt 5 und deren Dateiquittung. */
.public-job .bewerbung-v3__vorabauswahl,
.public-job .bewerbung-v3__vorab-upload {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin-block-end: 24px;
}
.public-job .bewerbung-v3__vorabauswahl [hidden],
.public-job .bewerbung-v3__vorab-upload [hidden] {
  display: none !important;
}
.public-job .bewerbung-v3__vorabauswahl .filter__gruppe,
.public-job .bewerbung-v3__vorabauswahl p,
.public-job .bewerbung-v3__vorab-upload p {
  min-width: 0;
  overflow-wrap: anywhere;
}
.public-job .bewerbung-v3__vorabauswahl .bewerbung__dateiauswahl {
  position: relative;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px dashed var(--gc-line-ui);
  border-radius: var(--gc-radius-control);
  background: var(--gc-canvas);
}
.public-job .bewerbung-v3__vorabauswahl input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.public-job .bewerbung-v3__vorabauswahl .bewerbung__dateiauswahl:focus-within {
  outline: 2px solid var(--gc-green-deep);
  outline-offset: 3px;
}
.public-job .bewerbung-v3__vorabauswahl .btn,
.public-job .bewerbung-v3__vorab-upload .btn {
  min-width: 44px;
  min-height: 44px;
  white-space: normal;
}

/* Vergleich V3, Fix 1: überschreibt auch die ältere Geschwisterregel,
   die bei aufeinanderfolgenden Blöcken padding-top auf null setzt.
   Gleicher Innenabstand wie in der benachbarten Bewerbungskarte. */
.public-job .stellenspalte > .stellen__block.ansprech:not([hidden]) {
  padding: 28px;
}

/* Vergleich V3, Fix 3: nur der Stellentitel, einschließlich mobilem Reiterkopf.
   Erst verkleinern, danach deutsche Worttrennung mit sichtbarem Bindestrich. */
@media (width < 768px) {
  .public-job .stellenspalte__kopf .stellen__titel,
  .public-job.stelle-reiter-mobil .stelle-reiter__kopf .stellen__titel {
    font-size: clamp(22px, 6vw, 32px);
    hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Vergleich V3, Fix 4: dieselbe Bilddarstellung und derselbe Kürzel-Rückfall
   wie in der Stellenliste, auf der vorhandenen kleinen Zeichenfläche. */
.public-job .verwandte__zeichen > :is(.stellenkarte__logo, .stellenkarte__monogramm) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  border-radius: inherit;
}