/* =========================================================================
   THE COURT — Job-Funnel v2, Ergänzungen zum bestehenden Stylesheet
   Alles andere (.jf, .jf-q, .jf-opt, .jf-chip, .jf-nav …) kommt unverändert
   aus dem Live-CSS. Hier steht NUR, was der verzweigte Funnel zusätzlich
   braucht. Farben ausschließlich aus der Nordic-Light-Palette.
   ========================================================================= */

/* Kopfzeile über dem Balken: Schrittzähler wie im Perspective-Funnel */
.jf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.jf-zaehler {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  color: rgba(31, 31, 30, 0.55);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow über der Frage — nutzt .jf-sub, braucht aber weniger Abstand oben,
   weil er als Erstes im Block steht. */
.jf-sub.jf-eyebrow { margin-top: 0; }

/* Unterzeile unter der Frage (z. B. „Mehrfachauswahl möglich") */
.jf-note.jf-sub-note { margin: -14px 0 20px; }

/* Die Stellenwahl im 2×2-Raster (Patrick, 07.08.2026): Vier gestapelte Zeilen
   machten den ersten Schritt unnötig lang — als Block sind alle vier Wege auf
   einen Blick erfassbar, ohne zu scrollen.
   Die Breite der Box bleibt: Drei Spalten waren zu eng für „Service & Ausgabe
   (m/w/d)", und bei zwei Spalten IN einer schmaleren Box bräche der Titel
   ebenfalls um. Zwei Spalten in voller Breite ist das Maß, das beides kann —
   kompakt und ohne Umbruch. Unter 620 px wieder einspaltig. */
.jf-opts-breit {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
/* Kein eigenes Flex-Layout in der Karte: Das Grid gleicht die Höhen bereits an,
   und `flex-direction: column` zog den Abstand zwischen Icon und Titel auf das
   Doppelte auf. Der normale Textfluss hält die Abstände so, wie sie in der
   einspaltigen Fassung saßen. */
/* `align-content: start` gegen die Button-Eigenart: Ein <button> zentriert
   seinen Inhalt vertikal, sobald er höher ist als nötig. Im 2×2-Raster sind
   alle vier Karten gleich hoch, „Ich bin offen" hat aber eine Zeile weniger —
   dessen Icon rutschte dadurch 9 px tiefer als die drei anderen.
   (Flex mit column wäre die Alternative, addiert aber die Außenabstände von
   Icon und Titel, statt sie kollabieren zu lassen — dann klafft die Lücke
   zwischen beiden auf.) */
.jf-opts-breit .jf-opt {
  padding: 20px 22px 22px;
  /* Ein <button> zentriert seinen Inhalt vertikal, sobald er höher ist als
     nötig. Im 2×2-Raster sind alle Karten gleich hoch, „Ich bin offen" hat
     aber eine Zeile weniger — dessen Icon rutschte 9 px tiefer als die drei
     anderen. `align-content: start` half nicht (greift bei Buttons nicht),
     deshalb explizit Flex mit Ausrichtung nach oben. Die Innenabstände von
     Icon (14 px unten) und Subline (6 px oben) stoßen hier nicht aneinander,
     kollabieren also ohnehin nicht — der Abstand bleibt derselbe. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
/* Icons oben bündig: Als Inline-Element sitzt ein SVG auf der Schrift-Grundlinie,
   und die vier Icons sind unterschiedlich hoch — im 2×2-Raster standen die
   Karten der unteren Reihe dadurch 9 px versetzt. Als Block mit fester Größe
   beginnen alle vier auf derselben Linie. */
.jf-opts-breit .jf-opt svg { display: block; width: 24px; height: 24px; }
.jf-opts-breit .jf-opt small { margin-top: 6px; }

@media (max-width: 620px) {
  .jf-opts-breit { grid-template-columns: 1fr; gap: 12px; }
  .jf-opts-breit .jf-opt { padding: 18px 20px; }
}

/* „Das erwartet dich" */
.jf-liste {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.jf-liste li {
  position: relative;
  padding-left: 26px;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(31, 31, 30, 0.86);
}
/* Häkchen als CSS-Form statt Emoji oder Icon-Datei */
.jf-liste li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 7px;
  height: 12px;
  border: solid #8A9778;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

/* Der Weiter-Knopf ist gesperrt, solange bei Mehrfachauswahl nichts gewählt
   wurde — das muss man ihm ansehen. */
.jf-next[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Zusammenfassung über dem Formular: was der Bewerber gewählt hat */
.jf-zusammenfassung {
  display: grid;
  gap: 5px;
  margin: 0 0 22px;
  padding: 16px 18px;
  background: #FAF8F2;
  border-left: 2px solid #6B7A5C;
}
.jf-zusammenfassung b {
  font-family: "Poppins", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  color: #1F1F1E;
}
.jf-zusammenfassung span {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(31, 31, 30, 0.7);
}

/* Als <button> statt <a class="w-button"> gebaut — die Webflow-Grundstile für
   Links greifen dort nicht, also hier nachziehen. */
.jf-opt, .jf-chip, .jf-back { font: inherit; }
.jf-back {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: "Poppins", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(31, 31, 30, 0.55);
  transition: color .2s;
}
.jf-back:hover { color: #6B7A5C; }
.jf-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Tastaturbedienung sichtbar machen — die Karten sind echte Knöpfe. */
.jf-opt:focus-visible, .jf-chip:focus-visible, .jf-back:focus-visible, .jf-next:focus-visible {
  outline: 2px solid #6B7A5C;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .jf-chips { gap: 8px; }
  .jf-chip { padding: 10px 15px; font-size: 13px; }
  .jf-nav { flex-wrap: wrap; }
  .jf-nav .btn { width: 100%; order: -1; }
}

/* -------------------------------------------------------------------------
   Antwortzeilen (statt umbrechender Chips)
   Die Antworten sind ganze Sätze — nebeneinander gesetzt brechen sie
   unregelmäßig um. Untereinander sind sie ruhiger, mobil besser bedienbar
   und entsprechen dem Perspective-Funnel.
   ------------------------------------------------------------------------- */
.jf-zeilen { display: grid; gap: 10px; margin-bottom: 26px; }

.jf-zeile {
  position: relative;
  text-align: left;
  width: 100%;
  background: #FAF8F2;
  border: 1.5px solid rgba(31, 31, 30, 0.16);
  padding: 15px 46px 15px 18px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.45;
  color: #1F1F1E;
}
.jf-zeile:hover { border-color: #6B7A5C; background: rgba(107, 122, 92, 0.05); }

/* Einfachauswahl: Pfeil rechts — sie springt sofort weiter. */
.jf-zeilen:not(.jf-multi) .jf-zeile::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid rgba(31, 31, 30, 0.3);
  border-width: 1.5px 1.5px 0 0;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color .2s;
}
.jf-zeilen:not(.jf-multi) .jf-zeile:hover::after { border-color: #6B7A5C; }

/* Mehrfachauswahl: Kästchen rechts, das sich füllt. */
.jf-zeilen.jf-multi .jf-zeile::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border: 1.5px solid rgba(31, 31, 30, 0.25);
  transition: border-color .2s, background .2s;
}
.jf-zeilen.jf-multi .jf-zeile.on {
  border-color: #6B7A5C;
  background: rgba(107, 122, 92, 0.07);
}
.jf-zeilen.jf-multi .jf-zeile.on::after {
  background: #6B7A5C;
  border-color: #6B7A5C;
}
/* Häkchen im gefüllten Kästchen */
.jf-zeilen.jf-multi .jf-zeile.on::before {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  margin-top: -5px;
  width: 4px;
  height: 8px;
  border: solid #FAF8F2;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  z-index: 1;
}

@media (max-width: 560px) {
  .jf-zeile { font-size: 14px; padding: 14px 42px 14px 15px; }
}

/* Antippbare Fläche für „Zurück": Als reiner Text war der Knopf 22 px hoch —
   zu wenig für einen Daumen (Richtwert 44 px). Die Fläche wächst, die Optik
   bleibt, weil der Text linksbündig im Kasten sitzt. */
.jf-back {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-right: 10px;
}

/* Die Unterzeile unter der Frage erbt .jf-note und war damit so hell, dass
   sie auf dem Handy kaum lesbar war. Eigener, dunklerer Ton — bleibt leise,
   ist aber lesbar (Kontrast > 4.5:1 auf Linen). */
.jf-note.jf-sub-note {
  color: rgba(31, 31, 30, 0.66);
  font-size: 13px;
}

/* -------------------------------------------------------------------------
   Textfeld „Willst du uns noch etwas sagen?"
   Das Live-CSS stylt nur input[type=text|email|tel] — eine Textarea war dort
   nie vorgesehen und stand deshalb weiß und ohne Innenabstand da, der
   Platzhalter klebte in der Ecke. Gleiche Werte wie die Eingabefelder.
   ------------------------------------------------------------------------- */
.jf-form textarea {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1F1F1E;
  padding: 14px 16px;
  border: 1.5px solid rgba(31, 31, 30, 0.16);
  border-radius: 5px;
  background: #FAF8F2;
  min-height: 96px;
  resize: vertical;
  width: 100%;
}
.jf-form textarea:focus,
.jf-form input[type="text"]:focus,
.jf-form input[type="email"]:focus,
.jf-form input[type="tel"]:focus {
  outline: none;
  border-color: #6B7A5C;
  box-shadow: 0 0 0 3px rgba(107, 122, 92, 0.18);
}
.jf-form textarea::placeholder,
.jf-form input::placeholder { color: rgba(31, 31, 30, 0.42); }

/* Erfolgs- und Fehlermeldung gehören Webflow — es blendet sie nach dem
   Absenden ein. Ohne Webflows Basis-CSS (lokale Vorschau) standen beide
   sofort sichtbar unter dem Formular. */
.jf-form-schritt .w-form-done,
.jf-form-schritt .w-form-fail { display: none; }

/* -------------------------------------------------------------------------
   Abschluss-Schritt
   ------------------------------------------------------------------------- */
.jf-danke { text-align: left; padding: 8px 0 4px; }
.jf-danke .jf-haken {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(107, 122, 92, 0.12);
  position: relative;
  margin-bottom: 20px;
}
.jf-danke .jf-haken::after {
  content: "";
  position: absolute;
  left: 17px; top: 13px;
  width: 9px; height: 17px;
  border: solid #6B7A5C;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.jf-danke p.jf-danke-text {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(31, 31, 30, 0.82);
  max-width: 480px;
  margin: 0 0 8px;
}

/* =========================================================================
   Stellenausschreibungen — im Muster der FAQ-Seite
   Diese Website trennt mit Haarlinien, nicht mit Kästen. Die erste Fassung
   hatte Rahmen um jeden Eintrag und fiel damit aus der Seite heraus
   (Patricks Feedback, 07.08.2026). Jetzt derselbe Aufbau wie /faq: eine
   Linie oben, eine je Eintrag, ein Plus in Sage, das sich beim Öffnen dreht.
   ========================================================================= */
.js-stellen {
  max-width: 820px;
  margin: 34px 0 0;
  border-top: 1px solid rgba(31, 31, 30, 0.14);
}

.js-stelle { border-bottom: 1px solid rgba(31, 31, 30, 0.14); }

.js-stelle summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  transition: color .2s;
}
.js-stelle summary::-webkit-details-marker { display: none; }
/* Das Plus dreht sich beim Öffnen zum Kreuz — wie im FAQ. */
.js-stelle summary::after {
  content: "+";
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: #6B7A5C;
  flex: 0 0 auto;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-stelle[open] summary::after { transform: rotate(45deg); }

.js-titel {
  font-family: "Poppins", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: #1F1F1E;
}
.js-stelle summary:hover .js-titel { color: #6B7A5C; }
.js-meta {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: rgba(31, 31, 30, 0.6);
  margin-left: auto;
  padding-right: 18px;
  text-align: right;
  white-space: nowrap;
}

/* --- Aufgeklappter Inhalt ------------------------------------------------ */
/* Beim Öffnen sanft einblenden. <details> kennt von Haus aus keine Animation —
   der Inhalt springt sonst hart ins Bild. */
.js-inhalt { padding: 2px 0 32px; max-width: 74ch; }
.js-stelle[open] .js-inhalt { animation: jsAuf .32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes jsAuf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-stelle[open] .js-inhalt { animation: none; }
}

.js-text {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(31, 31, 30, 0.82);
  margin: 0;
  max-width: 62ch;
}

/* Der Quereinsteiger-Satz ist eine Einladung, kein Zitat. Der Balken davor
   ließ ihn wie einen eingeschobenen Fremdtext wirken und zerschnitt die
   Listen. Jetzt ein leiser Satz in Sage — er hebt sich durch Farbe ab,
   nicht durch Dekoration. */
.js-hinweis {
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #6B7A5C;
  margin: 14px 0 0;
  max-width: 62ch;
}

/* Aufgaben und Anforderungen nebeneinander — zwei kurze Spalten lesen sich
   schneller als eine lange. */
.js-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 44px;
  margin-top: 26px;
}

/* „Was wir bieten" hat bis zu zehn Punkte. Über die volle Breite untereinander
   erschlug das die ganze Ausschreibung — deshalb bricht diese eine Liste in
   zwei Spalten um. `break-inside: avoid` hält mehrzeilige Punkte zusammen. */
.js-spalte.js-bieten { margin-top: 28px; }
.js-bieten .js-liste {
  display: block;
  column-count: 2;
  column-gap: 44px;
}
.js-bieten .js-liste li {
  break-inside: avoid;
  margin-bottom: 9px;
}

.js-untertitel {
  font-family: "Poppins", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6B7A5C;
  margin: 0 0 11px;
}
.js-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.js-liste li {
  position: relative;
  padding-left: 16px;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.58;
  color: rgba(31, 31, 30, 0.82);
}
/* Punkt statt Strich: Das Design-System nennt Sage Mid ausdrücklich für
   Bullet-Marker. Der Strich von vorher las sich wie ein Minuszeichen und saß
   bei mehrzeiligen Punkten zu hoch — `top` in em folgt jetzt der Schriftgröße
   statt einem festen Pixelwert. */
.js-liste li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.66em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #8A9778;
}

/* Eckdaten: drei Paare nebeneinander, Label über Wert.
   Vorher lagen dt und dd als Geschwister in einem Flex-Container — die
   flossen einzeln nebeneinander, statt paarweise zusammenzubleiben, und die
   Werte hingen an willkürlichen Stellen. Jetzt umschließt ein <div> jedes
   Paar (in <dl> erlaubt), und das Flex-Layout ordnet die Paare. */
.js-eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  margin: 30px 0 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 31, 30, 0.1);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.js-eckdaten > div { min-width: 0; }
.js-eckdaten dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31, 31, 30, 0.45);
  margin: 0 0 4px;
}
.js-eckdaten dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #1F1F1E;
}

.js-stelle summary:focus-visible, .js-bewerben:focus-visible {
  outline: 2px solid #6B7A5C;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .js-spalten { grid-template-columns: 1fr; gap: 22px; }
  .js-bieten .js-liste { column-count: 1; }
}
@media (max-width: 560px) {
  .js-meta { display: none; }          /* Der Umfang steht in den Eckdaten */
  .js-eckdaten { gap: 16px 28px; }
  .js-bewerben { width: 100%; }
}

/* =========================================================================
   Der Stellen-Bereich als eigene Fläche
   Vorher lag er formlos unter dem Funnel, auf derselben Off-White-Fläche und
   ohne Kopf — er las sich wie ein Anhang, nicht wie ein eigener Teil der Seite
   (Patrick, 07.08.2026). Diese Website setzt Blöcke durch WECHSELNDE FLÄCHEN
   voneinander ab (bg-paper / bg-linen), nicht durch Rahmen. Genau das passiert
   hier: Linen statt Off-White, großzügiger Innenabstand, eigener Sektionskopf.
   ========================================================================= */
/* Die Sektion darf das Band nicht abschneiden — und ihr unteres Polster muss
   weg, damit die Fläche direkt an das grüne Band darunter stößt (Patrick,
   07.08.2026). `clip` statt `hidden`, weil `hidden` einen Scroll-Container
   erzeugt und damit `position: sticky` weiter oben aushebeln könnte. */
#jobs { overflow-x: clip; padding-bottom: 0; }

.js-flaeche {
  background: #EDE9DD;                    /* Linen */
  /* Vollbreites Band statt Kasten: Die Seite setzt ihre Blöcke als
     durchlaufende Farbflächen ab (bg-paper / bg-linen im Wechsel) — ein
     Kasten mit Rändern war der Fremdkörper. Der Ausbruch aus dem Container
     geht über negative Außenabstände, der Innenabstand holt den Text auf die
     Fluchtlinie zurück, auf der auch Funnel und Sektionsüberschrift stehen.
     Oben bleibt Off-White stehen, unten läuft die Fläche ins Grüne. */
  margin: 74px calc(50% - 50vw) 0;
  padding: 66px calc(50vw - 50%) 84px;
}

/* Innerhalb des Bandes bleibt der Inhalt auf Lesebreite — über 1300 px
   gezogen stünden Stellentitel und Umfangsangabe so weit auseinander, dass
   das Auge den Zusammenhang verliert. */
.js-flaeche .js-vorspann,
.js-flaeche .js-stellen { max-width: 820px; }

.js-vorspann { max-width: 62ch; margin: 0 0 34px; }
/* Die Klassen .eyebrow und .hx2 kommen aus dem Live-Stylesheet der Seite —
   Größe, Farbe und Laufweite stimmen dadurch automatisch mit jedem anderen
   Sektionskopf überein. Hier nur die Abstände, die im Block gebraucht werden. */
.js-vorspann .eyebrow { margin: 0 0 14px; }
/* Eine Stufe kleiner als die Sektionsüberschrift darüber: Zwei Überschriften
   in derselben Größe konkurrieren, und dieser Block ist der zweite Gedanke,
   nicht der erste. 34 px ist die H2-Größe des Styleguides (statt Display 55). */
.js-vorspann .js-h2 { margin: 0; font-size: 34px; line-height: 1.12; }
.js-vorspann .js-lead { margin: 18px 0 0; font-size: 16.5px; }

/* Innerhalb der Linen-Fläche brauchen die Haarlinien etwas mehr Kontrast —
   auf dem dunkleren Grund verschwanden sie sonst fast. */
/* Die Zeilen bleiben auf Lesebreite: Über die volle Flächenbreite gezogen
   stehen Titel und Umfangsangabe so weit auseinander, dass das Auge den
   Zusammenhang verliert. */
.js-flaeche .js-stellen { border-top-color: rgba(31, 31, 30, 0.18); }
.js-flaeche .js-stelle { border-bottom-color: rgba(31, 31, 30, 0.18); }

@media (max-width: 700px) {
  .js-flaeche { margin-top: 56px; padding: 44px calc(50vw - 50%) 56px; }
  .js-vorspann .js-h2 { font-size: 27px; }
}

/* -------------------------------------------------------------------------
   Kontaktformular: zwei Felder nebeneinander, Datei-Anhang, Fehlerzeile
   ------------------------------------------------------------------------- */
.jf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Die echte Dateiauswahl ist unsichtbar — sie sieht in jedem Browser anders
   aus. Sichtbar ist das Label darunter, das wir gestalten können. */
.jf-datei { margin-top: 4px; }
.jf-datei input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.jf-datei-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1.5px dashed rgba(31, 31, 30, 0.22);
  border-radius: 5px;
  background: rgba(250, 248, 242, 0.6);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: rgba(31, 31, 30, 0.7);
}
.jf-datei-knopf svg { width: 17px; height: 17px; flex: 0 0 auto; color: #8A9778; }
.jf-datei-knopf:hover { border-color: #6B7A5C; color: #1F1F1E; background: rgba(107,122,92,.05); }
.jf-datei input[type="file"]:focus-visible + .jf-datei-knopf {
  outline: 2px solid #6B7A5C; outline-offset: 2px;
}
/* Liegt eine Datei an, wird aus der gestrichelten Einladung eine feste Zeile. */
.jf-datei.hat-datei .jf-datei-knopf {
  border-style: solid;
  border-color: #6B7A5C;
  background: rgba(107, 122, 92, 0.07);
  color: #1F1F1E;
}
.jf-datei-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-datei-hinweis {
  margin: 7px 0 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(31, 31, 30, 0.5);
}

/* Honigtopf gegen Formular-Roboter: für Menschen unsichtbar, nicht per
   display:none (das erkennen die besseren Roboter). */
.jf-honig {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.jf-fehler {
  margin: 14px 0 0;
  padding: 12px 15px;
  background: #F3E4E0;
  border-left: 2px solid #B0553F;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1F1F1E;
}

#jfSenden[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 560px) {
  .jf-zwei { grid-template-columns: 1fr; gap: 12px; }
}

/* -------------------------------------------------------------------------
   Kontraste nachgezogen (Prüfung 07.08.2026)
   Schrittzähler, „Zurück" und die Job-Sublines lagen bei 3,5–4,3:1 und damit
   unter dem Soll von 4,5:1 für Fließtext. Sie bleiben zurückhaltend, sind
   aber jetzt auch mit schwächeren Augen lesbar.
   ------------------------------------------------------------------------- */
.jf-zaehler { color: rgba(31, 31, 30, 0.72); }
.jf-back { color: rgba(31, 31, 30, 0.72); }
.js-kopf small { color: rgba(31, 31, 30, 0.74); }
.jf-datei-hinweis { color: rgba(31, 31, 30, 0.66); }
.jf-datei-hinweis a { color: #6B7A5C; }


/* =========================================================================
   Kontaktschritt: Fluchtlinien (Patricks Feedback, 07.08.2026)
   Drei Dinge standen nicht auf einer Kante:
     · die Zusammenfassung war 668 px breit, die Felder darunter 440 px
     · der Hinweis unter dem Datei-Feld begann 16 px weiter links als der
       Text im Feld darüber (der Knopf hat Innenabstand, der Hinweis nicht)
     · die Checkbox ragte 20 px nach links aus der Reihe
   Alles hängt jetzt an derselben Kante.
   ========================================================================= */

/* Dieselbe Breite wie das Formular — sonst „hängt oben ein zu breiter Kasten". */
.jf-zusammenfassung {
  max-width: 440px;
  box-sizing: border-box;
}

/* Der Hinweis steht auf der Feldkante — wie jedes andere Element der Spalte.
   Ein Einzug auf Höhe des Knopftextes (der wegen des Icons weiter rechts
   beginnt) sah aus wie ein Versehen. Eine Kante für alles. */
.jf-datei-hinweis {
  padding-left: 0;
}

/* Die Checkbox stand außerhalb der Spalte. Jetzt beginnt der Kasten auf der
   Feldkante und der Text rückt dahinter ein. */
.jf-form .check,
.jf-form-schritt .check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  max-width: 440px;
  margin-top: 14px;
  padding-left: 0;
}
.jf-form .check input,
.jf-form-schritt .check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #6B7A5C;
  flex: none;
}
.jf-form .check span,
.jf-form-schritt .check span {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(31, 31, 30, 0.82);
}

/* Der Hinweis für unter 16-Jährige gehört unter die Checkbox, nicht daneben. */
.jf-form-schritt .check + .jf-datei-hinweis {
  padding-left: 29px;   /* 18 px Kästchen + 11 px Abstand */
  margin-top: 8px;
}

@media (max-width: 560px) {
  .jf-zusammenfassung, .jf-form .check, .jf-form-schritt .check { max-width: none; }
}

/* =========================================================================
   FUNNEL MIT BILDERN DANEBEN (Patrick, 08.08.2026)
   Der Funnel bleibt LINKSBUENDIG auf der Fluchtlinie der Seite — wie alles
   andere auch. Der Block waechst nur nach RECHTS ueber die Lesebreite hinaus
   und schafft dort Platz fuer die Bilder. Zentrieren war falsch: Dann steht
   der Funnel eingerueckt und bricht die Flucht (Patrick, 08.08.2026).

   Warum der Funnel nicht schmaler wird: Sonst bricht „Service & Ausgabe
   (m/w/d)" in den Karten um. Die Bilder holen sich ihren Platz von aussen.
   Unter 900 px fliesst die Galerie unter den Funnel.
   ========================================================================= */
.jf-mitbild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 34px;
  /* stretch statt start: Die Galerie ist genauso hoch wie der Funnel daneben
     und wirkt als EIN Block (Patrick, 08.08.2026). Weil der Funnel je Schritt
     seine Hoehe aendert, verteilen sich die Bildzeilen anteilig (1fr) statt
     feste Hoehen zu haben. */
  align-items: stretch;
  /* nur nach rechts ausbrechen, nie nach links — und nie ueber den Rand */
  margin-right: min(0px, calc(100% - min(1140px, 100vw - 56px)));
  /* Anker fuer die absolut gesetzte Galerie (siehe unten) */
  position: relative;
  min-height: 460px;
}

/* Ein Bild, das wechselt — statt vier Briefmarken (Patrick, 10.08.2026).
   Die Galerie wird ABSOLUT in die rechte Spalte gelegt: Mit `align-items:
   stretch` allein bestimmten die Bilder die Hoehe des Blocks statt umgekehrt,
   der Funnel bekam eine riesige Leerflaeche unter sich (08.08.2026 live
   gesehen). Absolut gesetzt steuert der Funnel die Hoehe, das Bild fuellt sie
   aus. Die Grid-Spalte bleibt als Platzhalter reserviert. */
.jf-gal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  overflow: hidden;
  /* Bis das erste Bild da ist, steht hier eine ruhige Flaeche statt Weiss —
     sonst blitzt beim Aufbau ein heller Kasten auf. */
  background: var(--court-linen, #EDE9DD);
}
/* Alle Bilder liegen uebereinander; sichtbar ist das mit `.an`. Ein
   Ueberblenden statt eines Schiebens: Bewegung neben einem Formular zieht den
   Blick weg, ein Wechsel der Helligkeit nicht. */
.jf-gal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.94);
  opacity: 0;
  transition: opacity 1s ease;
}
.jf-gal img.an { opacity: 1; }

/* Die Punkte sagen: hier kommt noch mehr. Ohne sie wirkt der Wechsel wie ein
   Fehler. Bewusst klein und ohne Rahmen — sie sind ein Hinweis, kein
   Bedienelement (es gibt nichts zu klicken). */
.jf-punkte {
  position: absolute;
  left: 0; right: 0; bottom: 14px;
  display: flex;
  gap: 7px;
  justify-content: center;
  z-index: 2;
}
.jf-punkte span {
  width: 7px;
  height: 7px;
  background: rgba(250, 248, 242, .45);
  box-shadow: 0 0 0 1px rgba(31, 31, 30, .28);
  transition: background .4s ease;
}
.jf-punkte span.an { background: #FAF8F2; }

/* Pfeile zum Weiterblaettern. Klein und zurueckhaltend: Sie sollen den Blick
   nicht vom Formular danebenziehen, aber auf Tastendruck und Fingertipp sicher
   treffbar sein — deshalb 40x40 (unter 44 nur, weil sie eine Zugabe sind und
   die Punkte daneben denselben Zweck erfuellen). Die dunkle Scheibe liegt auf
   dem Foto, nicht daneben: Ein heller Knopf verschwindet auf hellen Bildern. */
.jf-pfeile {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;      /* die Flaeche dazwischen bleibt durchlaessig */
  z-index: 3;
}
.jf-pfeil {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 31, 30, .42);
  color: #FAF8F2;
  /* Ein <button> erbt `color` nicht; ohne diese Zeile faerbt Safari auf dem
     iPhone den Inhalt blau (bekannte Falle, siehe CLAUDE.md). */
  -webkit-text-fill-color: #FAF8F2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.jf-pfeil svg { width: 20px; height: 20px; display: block; }
.jf-pfeil:hover { background: rgba(31, 31, 30, .68); }
.jf-pfeil:focus-visible {
  outline: 2px solid #FAF8F2;
  outline-offset: 2px;
}

/* Systemeinstellung „Bewegung reduzieren": kein Wechsel (das Skript haelt
   ohnehin an), und auch keine Blende. Die Pfeile bleiben bedienbar. */
@media (prefers-reduced-motion: reduce) {
  .jf-gal img { transition: none; }
}

@media (max-width: 900px) {
  /* Fliessen statt verschwinden: Funnel oben, Bild darunter — dafuer die
     absolute Positionierung des Blocks aufheben. Die Galerie bleibt
     `relative`, weil die Bilder darin absolut liegen; ohne das haette sie
     keine Hoehe und waere unsichtbar. */
  .jf-mitbild { grid-template-columns: 1fr; gap: 28px; margin-right: 0;
                position: static; min-height: 0; }
  .jf-gal { position: relative; width: auto; height: 360px; }
}
@media (max-width: 520px) {
  /* Auf dem Handy niedriger. Vorher standen hier vier Bilder zweispaltig —
     ein halber Bildschirm voll Briefmarken direkt unter dem Formular
     (Patrick, 08.08. und 10.08.2026). Ein Bild im Querformat ist der ruhige
     Abschluss, den der Block braucht. */
  .jf-gal { height: auto; aspect-ratio: 4 / 3; }
  .jf-punkte { bottom: 10px; }
}

/* =========================================================================
   „DAS ERWARTET DICH" — Aufbau wie im Werbe-Funnel (Patrick, 08.08.2026)
   Foto ueber die volle Breite, darunter die Vorteile zweispaltig mit Icon
   (Schluesselbegriff fett), unten der STREET-KITCHEN-Hinweis im ruhigen
   Kasten. Vorher standen hier vier allgemeine Saetze als Aufzaehlung.
   ========================================================================= */
.jf-erwartet-foto { margin: 6px 0 26px; }
.jf-erwartet-foto img {
  width: 100%;
  display: block;
  height: 300px;
  object-fit: cover;
  object-position: center 28%;
}

.jf-vorteile {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 30px;
}
.jf-vorteile li {
  font-size: 15px;
  line-height: 1.5;
  color: #76756F;              /* der erklaerende Teil tritt zurueck … */
}
.jf-vorteile b { color: #1F1F1E; font-weight: 700; }   /* … der Begriff nicht */
/* Das Raster gilt NUR fuer Punkte mit Icon. Lag es auf jedem li, wurde bei
   einem Punkt ohne Icon der Text selbst in die 24-px-Spalte gequetscht und
   brach Wort fuer Wort um (08.08.2026 live gesehen). */
.jf-vorteile li.jf-v-icon {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.jf-vorteile svg {
  display: block;              /* sonst sitzt das Icon auf der Schriftlinie */
  width: 22px;
  height: 22px;
  stroke: #8A9778;             /* Sage Mid, wie die uebrigen Icons der Sektion */
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 1px;
}

.jf-sk {
  background: #E5E0D2;
  padding: 22px 26px;
  margin: 0 0 4px;
}
.jf-sk-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8A857C;
  margin: 0 0 8px;
}
.jf-sk-text { font-size: 14.5px; line-height: 1.6; color: #1F1F1E; margin: 0; }

@media (max-width: 720px) {
  .jf-vorteile { grid-template-columns: 1fr; gap: 15px; }
  .jf-erwartet-foto img { height: 210px; }
}

/* ---------------------------------------------------------------------------
   Pflichtfelder sichtbar machen (08.08.2026)

   Vorher gab es GAR KEINE sichtbare Rückmeldung: Das Formular ruft
   `reportValidity()` auf, und die nativen Fehler-Sprechblasen zeigt iOS Safari
   nicht an. Wer ein Feld oder das Einwilligungs-Häkchen vergaß, tippte auf
   „Absenden" — und es passierte scheinbar nichts. Genau dieser Fehler ist im
   Werbe-Funnel jobs.the-court-troisdorf.de aufgefallen: der teuerste denkbare
   Absprung, einen Klick vor dem Ziel.

   `:user-invalid` greift erst NACH einem Absendeversuch, färbt also nichts
   vorschnell rot, während jemand noch tippt.
   --------------------------------------------------------------------------- */
.jf-form input:user-invalid,
.jf-form textarea:user-invalid,
.jf-form-schritt input:user-invalid,
.jf-form-schritt textarea:user-invalid {
  border-color: #B4453B;
}

/* Eine native Checkbox nimmt keinen border-color an — deshalb eine Kontur.
   Der Text daneben wird mitgefärbt, sonst übersieht man das kleine Kästchen. */
.jf-form .check input:user-invalid,
.jf-form-schritt .check input:user-invalid {
  outline: 2px solid #B4453B;
  outline-offset: 2px;
  border-radius: 3px;
}
.jf-form .check input:user-invalid + span,
.jf-form-schritt .check input:user-invalid + span {
  color: #B4453B;
}

/* ---------------------------------------------------------------------------
   REIHENFOLGE: einmal gedreht und wieder zurück (Patrick, 08.08.2026)

   Versuch war: Stellen — Funnel — Bilder, damit die Galerie nichts verdecken
   kann. Auf dem Rechner wurde es dadurch schlechter: Die Linen-Flaeche der
   Stellen lief oben ueber die volle Breite, und die Galerie stand halb darauf,
   halb auf Off-White. Patrick: „das sah jetzt eh doof aus".

   Deshalb wieder: Funnel — Bilder — Stellen. Der eigentliche Ausloeser des
   Handy-Problems war ohnehin die Groesse der Galerie (vier breite Streifen mit
   fester Hoehe); die ist jetzt ein 2x2-Raster im Bildformat und halb so hoch.
   Wer das nochmal drehen will: ueber `order` in der `.wrap`, nicht ueber das
   DOM — Funnel und Stellenbereich werden von zwei Skripten zu verschiedenen
   Zeitpunkten gebaut, `insertBefore` griff mal und mal nicht.
   --------------------------------------------------------------------------- */