/* ============================================================
   jobin.css — Globale Styles für Markup, das CLIENTSEITIG per
   jobin.js injiziert wird (innerHTML). Astros Scoped-CSS greift
   NUR bei Elementen, die zur Build-Zeit im Template stehen — hier
   bewusst global halten, sonst bleibt es unstyled.
   ============================================================ */
/* ============================================================
   STELLENSUCHE — Leiste, Trefferkarten, Skelette, Leerzustand
   ------------------------------------------------------------
   Die Karten baut jobin.js per innerHTML; Astros Scoped-CSS
   greift dort nicht, deshalb steht alles hier global.
   ============================================================ */

/* ---------- Suchleiste (Hero der Suchseite) ---------- */
.jb-searchbar {
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 720px; margin: var(--space-6) 0 0; padding: var(--space-2);
  background: #fff; border-radius: var(--radius-full);
}
.jb-searchbar:focus-within { box-shadow: 0 0 0 3px var(--jb-primary-ring); }
.jb-searchbar__fields {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  flex: 1 1 auto; min-width: 0;
  transition: grid-template-columns var(--transition-base);
}
/* Wer tippt, bekommt Platz — siehe Hero-Suche. */
.jb-searchbar__fields:has(.jb-searchbar__field:first-child:focus-within) { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) auto; }
.jb-searchbar__fields:has(.jb-searchbar__field:nth-child(2):focus-within) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; }
.jb-searchbar__field { position: relative; display: flex; align-items: center; min-width: 0; padding-inline: var(--space-4); }
.jb-searchbar__field + .jb-searchbar__field::before {
  content: ''; position: absolute; top: .45rem; bottom: .45rem; left: 0; width: 1px; background: var(--border-subtle);
}
.jb-searchbar__field .icon {
  color: var(--color-muted); flex: none; width: 20px; margin-right: var(--space-2); overflow: hidden;
  transition: width var(--transition-base), margin var(--transition-base), opacity var(--transition-fast);
}
.jb-searchbar__field:focus-within .icon { width: 0; margin-right: 0; opacity: 0; }
.jb-searchbar__field input, .jb-searchbar__field select {
  flex: 1 1 auto; width: 100%; min-width: 0; border: 0; background: transparent; appearance: none;
  padding: .8rem 0; color: var(--color-text); font: inherit; font-size: var(--jb-fs-body);
}
.jb-searchbar__field select { font-weight: var(--weight-semibold); cursor: pointer; }
.jb-searchbar__field input::placeholder { color: var(--color-muted); }
.jb-searchbar__field input:focus-visible, .jb-searchbar__field select:focus-visible { outline: none; }
.jb-searchbar__submit {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--jb-green); color: var(--jb-ink);
  transition: background var(--transition-fast);
}
.jb-searchbar__submit:hover { background: #4bbd97; }
@media (max-width: 700px) {
  .jb-searchbar { flex-wrap: wrap; border-radius: var(--jb-radius-card); }
  .jb-searchbar__fields { grid-template-columns: 1fr; width: 100%; }
  .jb-searchbar__field + .jb-searchbar__field::before { top: 0; bottom: auto; left: var(--space-4); right: var(--space-4); width: auto; height: 1px; }
  .jb-searchbar__submit { width: 100%; border-radius: var(--radius-full); }
}

/* ⚠️ `hidden` MUSS staerker sein als jede Layout-Regel.
   Der Browser setzt fuer `[hidden]` nur `display: none` mit der niedrigsten
   Stufe (User-Agent-Stylesheet). Jede eigene Klasse mit `display` schlaegt
   das: `.btn { display: inline-flex }` hat dafuer gesorgt, dass im
   Bewerbungsformular „Weiter" UND „Bewerbung absenden" gleichzeitig
   standen — auf jedem Schritt, seit es den Wizard gibt. `el.hidden = true`
   lief ins Leere, und im Code sah alles richtig aus.
   Das gilt fuer JEDEN Knopf und jede Kachel mit eigener `display`-Regel,
   deshalb steht die Ausnahme hier einmal fuer alles. */
[hidden] { display: none !important; }

/* ---------- PLZ → Ort ----------
   Steht unter dem PLZ-Feld, wenn sich mehrere Gemeinden eine Nummer
   teilen. Kommt aus jobin.js, deshalb hier und nicht im <style> einer
   Seite. */
.jb-plzorte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.jb-plzorte__t { font-size: var(--jb-fs-small); color: var(--color-muted); }
.jb-plzorte__knopf {
  border: 1px solid var(--border-field); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-black);
  padding: 7px var(--space-3); font: inherit; font-size: var(--jb-fs-small);
  cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast);
}
.jb-plzorte__knopf:hover, .jb-plzorte__knopf:focus-visible {
  border-color: var(--color-primary); color: var(--color-primary);
}

/* ---------- Schnelleinstiege ----------
   Die Leiste „Haeufig gesucht" ist 09/2026 entfallen: die Begriffe waren
   geraten und nicht gemessen, und ueber einer Suche mit einer Handvoll
   Anzeigen fuehrte ein Klick oft ins Leere. Der Griff `data-search-quick`
   in jobin.js bleibt — sobald es echte Suchzahlen gibt, kommt die Leiste
   mit einer Datenzeile zurueck. */

/* ---------- Kopf der Trefferliste ---------- */
.jb-results__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.jb-results__count { margin: 0; font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; color: var(--color-black); }
.jb-results__count b { font-variant-numeric: tabular-nums; }
.jb-results__note { display: block; margin-top: 4px; font-family: var(--font-sans, inherit); font-size: var(--jb-fs-small); font-weight: 400; color: var(--color-muted); }
.jb-results__reset { border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--jb-fs-body); font-weight: var(--weight-bold); color: var(--color-primary); padding: 0; }
.jb-results__reset:hover { text-decoration: underline; }

.jb-jobs-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .jb-jobs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .jb-jobs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Trefferkarte ----------
   Ruhig: Haarlinie statt Schatten. Beim Hover zieht die Kante an, die Form
   strafft sich und der Pfeil rueckt — dieselbe Antwort wie ueberall sonst. */
.jb-jobcard {
  position: relative; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--jb-radius-card);
  background: var(--color-surface); color: inherit; overflow: hidden;
  transition: border-color var(--transition-base), background var(--transition-base), border-radius var(--jb-hover-dur) var(--jb-hover-ease);
}
.jb-jobcard:hover {
  border-color: var(--border-field); background: var(--jb-tint);
  border-radius: var(--jb-corner-hover); text-decoration: none;
}
.jb-jobcard__place { display: inline-flex; align-items: center; gap: 6px; font-size: var(--jb-fs-label); font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.jb-jobcard__title {
  font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2; color: var(--color-black);
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}
/* Kein Verdienst auf der Karte: Elsa liefert ihn in der LISTE nicht mit
   (nur im Detail, siehe `.jb-facts`). Die Regeln dafuer sind 09/2026
   entfallen — sie stammten aus der Cockpit-Zeit und formatierten seit der
   Umstellung nichts mehr. */
/* ================================================================
   VON jobin.js EINGEFUEGTES MARKUP
   ----------------------------------------------------------------
   Alles hier drunter wird per innerHTML erzeugt — der Bewerbungs-
   Wizard, das Datei-Feld, die Fortschrittspunkte, der Ergaenzungs-
   link. Astros Scoped-CSS greift dort NICHT: es haengt seine Marke
   an Elemente, die zur Build-Zeit im Template standen, und das tun
   diese nicht.

   ⚠️ Diese Regeln standen bis 2026-08-27 im <style> von
   bewerben.astro und waren damit wirkungslos — das ganze Formular
   war unformatiert. Wer hier etwas ergaenzt: NICHT in die .astro
   verschieben.
   ================================================================ */

/* ---------- Wizard-Schritte ---------- */
.jb-wiz__step { animation: jb-step-in .45s cubic-bezier(.16, .84, .28, 1); }
@keyframes jb-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.jb-wiz__h {
  font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.2; color: var(--color-black); margin: 0;
}
.jb-wiz__hint { margin: var(--space-3) 0 var(--space-6); font-size: var(--jb-fs-body); line-height: 1.6; color: var(--color-muted); }
@media (prefers-reduced-motion: reduce) { .jb-wiz__step { animation: none; } }

/* ---------- Fortschrittspunkte (aus den Gruppen gebaut) ---------- */
/* ---------- Vollstaendigkeit statt Schrittzahl ----------
   Loest `.jb-wiz__dot` ab. Der Balken sagt nicht „so weit bist du durch",
   sondern „so viel weiss ich ueber dich" — und genau das soll waschsen. */
/* ⚠️ Die Leiste KLEBT (10.09.2026) — Stellentitel, Ort und Stand sollen
   waehrend des Ausfuellens sichtbar bleiben. `top` ist die Hoehe der
   Navigation, die selbst schon klebt; ohne den Versatz schoebe sie sich
   darunter und waere zur Haelfte verdeckt.
   ⚠️ Sie muss KLEIN bleiben. Auf einem 812px-Telefon sind 75px
   Navigation plus eine Leiste in Kopfgroesse schon ueber 18 % des
   Schirms — dauerhaft, beim Ausfuellen, wo jede Zeile zaehlt. */
.jb-fort {
  position: sticky; top: 75px; z-index: 20;
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 var(--space-4);
  /* Die Seitenfarbe ist --jb-page (#f2f4f3), NICHT --color-bg (#fcfcfb).
     Gemessen, nicht geraten: die beiden liegen nur zehn Stufen
     auseinander, und genau deshalb waere der Fehler als heller Streifen
     ueber dem Inhalt trotzdem sichtbar gewesen. */
  background: var(--jb-page);
}
/* Die Kante nach unten kommt erst, wenn die Leiste wirklich klebt —
   sonst zoege sie im Ruhezustand eine Linie durch die Seite. */
.jb-fort::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--border-subtle); opacity: 0;
  transition: opacity .2s ease;
}
.jb-fort.is-klebt::after { opacity: 1; }
.jb-apply--job .jb-fort { margin-top: var(--space-6); }

/* Stellentitel + Ort. ⚠️ EINE Zeile, gekuerzt — ein dreizeiliger
   Stellentitel duerfte hier nie stehen, er fraesse den halben Schirm. */
/* ⚠️ Titel und Ort erscheinen ERST BEIM KLEBEN. Am Seitenanfang
   stuenden sie 100px unter der Ueberschrift, die dasselbe sagt — eine
   Verdopplung, die die Seite voller und zugleich leerer wirken laesst.
   Gebraucht werden sie genau dann, wenn die Ueberschrift weg ist. */
.jb-fort__stelle {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: 0; min-width: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}
.jb-fort.is-klebt .jb-fort__stelle {
  max-height: 3em; opacity: 1; margin-bottom: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
  .jb-fort__stelle { transition: none; }
}
.jb-fort__stelle-titel {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--weight-bold); font-size: var(--jb-fs-body-l);
  color: var(--color-black);
}
.jb-fort__stelle-ort {
  flex: none; display: inline-flex; align-items: center; gap: .35em;
  font-size: var(--jb-fs-body); color: var(--color-muted);
}
.jb-fort__stelle-ort .icon { flex: none; color: var(--color-primary); }
@media (max-width: 559px) {
  /* Auf dem Telefon bleibt der Ort stehen — mit dem Zeichen ist er
     kurz und kostet Breite, keine Hoehe. Gekuerzt wird der Titel.
     ⚠️ Das Polster bleibt hier kleiner: 75px Navigation plus eine
     hohe Leiste sind auf 812px Schirmhoehe zu viel. */
  .jb-fort { padding-top: var(--space-4); }
  .jb-fort__stelle-titel { font-size: var(--jb-fs-body); }
  .jb-fort__stelle-ort { font-size: var(--jb-fs-small); }
}
.jb-fort__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}
.jb-fort__text { font-size: var(--jb-fs-small); color: var(--color-muted); }
.jb-fort__zahl {
  font-size: var(--jb-fs-small); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; color: var(--color-black);
}
.jb-fort__bahn {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--border-subtle);
}
.jb-fort__balken {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--gradient-brand, var(--jb-green));
  transition: width .5s cubic-bezier(.16, .84, .28, 1);
}
/* Kurzes Aufleuchten, wenn ein Feld DAZUkam — nicht beim Leeren. */
.jb-fort.is-gewachsen .jb-fort__balken { animation: jb-fort-puls .5s ease; }
@keyframes jb-fort-puls {
  50% { filter: brightness(1.35); }
}
.jb-fort.is-voll .jb-fort__zahl { color: var(--color-primary); }

/* ---------- Ein ausgefuelltes Feld sagt es ----------
   Das Haekchen haengt am LABEL, nicht am Eingabefeld: dort ist die
   Position unabhaengig von Feldhoehe, Hilfetext und Feldtyp. Rein aus
   Rahmenlinien gezeichnet — im geteilten Sprite gibt es kein Haekchen,
   und eins nur dafuer aufzunehmen waere zu viel. */
.jb-ef .form-field__label, .jb-ef .choice > span { position: relative; }
.jb-ef .form-field__label::after, .jb-ef .choice > span::after {
  content: ''; position: absolute; top: .34em; margin-left: .45em;
  width: .3em; height: .58em; opacity: 0;
  border: solid var(--color-primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.jb-ef.is-gefuellt .form-field__label::after,
.jb-ef.is-gefuellt .choice > span::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* ---------- Felder laufen gestaffelt ein ----------
   `--i` setzt jobin.js beim Rendern; gedeckelt, sonst wartet Feld 20
   fast eine Sekunde auf seinen Auftritt. */
.jb-ef { animation: jb-feld-auf .45s cubic-bezier(.16, .84, .28, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes jb-feld-auf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jb-fort__balken { transition: none; }
  .jb-fort.is-gewachsen .jb-fort__balken { animation: none; }
  .jb-ef { animation: none; }
  .jb-ef .form-field__label::after, .jb-ef .choice > span::after { transition: none; }
}

.jb-wiz__dot {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--jb-fs-label); font-weight: var(--weight-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-muted);
  transition: color var(--transition-base);
}
.jb-wiz__dot span {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 999px; border: 1px solid var(--border-field); font-size: 11px;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.jb-wiz__dot.is-active { color: var(--color-black); }
.jb-wiz__dot.is-active span { background: var(--jb-ink); border-color: var(--jb-ink); color: #fff; }
.jb-wiz__dot.is-done { color: var(--color-primary); }
.jb-wiz__dot.is-done span { background: var(--jb-green); border-color: var(--jb-green); color: var(--jb-ink); }

/* ---------- Datei-Feld ---------- */
.jb-drop {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-6); border: 1px dashed var(--border-field); border-radius: var(--jb-radius-card);
  background: var(--color-surface); cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.jb-drop:hover, .jb-drop.is-over { border-color: var(--color-primary); background: var(--jb-tint); }
.jb-drop.is-set { border-style: solid; border-color: var(--color-primary); }
.jb-drop .icon { color: var(--color-primary); flex: none; }
.jb-drop__label { font-size: var(--jb-fs-body); font-weight: var(--weight-semibold); color: var(--color-black); }
/* Unsichtbar, aber bedienbar: Klick und Tastatur laufen ueber das Label. */
.jb-drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.form-field__hint { margin: 6px 0 0; font-size: var(--jb-fs-small); color: var(--color-muted); }

/* ---------- Ergaenzungslink auf der Danke-Seite ---------- */
.jb-done__weiter-text { margin: 0 0 var(--space-4); font-size: var(--jb-fs-body); line-height: 1.6; color: var(--color-muted); }
/* Der Link steht zum Mitnehmen da, nicht nur als Knopf: Es gibt ihn genau
   einmal, und er laesst sich nicht noch einmal anfordern. */
.jb-done__link { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.jb-done__link-feld { flex: 1 1 auto; min-width: 0; font-size: var(--jb-fs-small); }
.jb-done__link-knopf { flex: none; }
.jb-done__weiter-hint { margin: var(--space-3) 0 0; font-size: var(--jb-fs-small); color: var(--color-muted); text-align: left; }

/* ---------- „Schon beworben" ----------
   Wird per innerHTML gesetzt, gehoert also hierher und nicht in ein
   <style> der Seite. Grundton gruen: das ist eine gute Nachricht
   („ist angekommen"), keine Fehlermeldung. */
.jb-beworben {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4);
  /* Kein Abstand nach oben: der Hinweis ist das ERSTE in der Textspalte,
     und die Spalte bringt ihren Abstand zum Kopf schon mit. */
  margin: 0 0 var(--space-6); padding: var(--space-5);
  border: 1px solid var(--jb-green); border-left-width: 3px;
  border-radius: var(--jb-radius-card); background: var(--jb-tint);
}
.jb-beworben > .icon { flex: none; margin-top: .15em; color: var(--color-primary); }
.jb-beworben__text { flex: 1 1 18rem; font-size: var(--jb-fs-body); line-height: 1.55; color: var(--color-muted); }
.jb-beworben__text b { color: var(--color-black); }
.jb-beworben__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* Bewusst als schlichter Textknopf: der Weg soll da sein, aber nicht
   einladen — die meisten, die ihn saehen, brauchen ihn nicht. */
.jb-beworben__doch {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--jb-fs-small); color: var(--color-muted); text-decoration: underline;
}
.jb-beworben__doch:hover { color: var(--color-black); }

.jb-chip--erledigt { border-color: var(--jb-green); color: var(--color-primary); }
.jb-facts__cta.is-erledigt { opacity: .55; }

/* ---------- Aus Elsa gebaute Formularfelder ----------
   Die Felder kommen per innerHTML aus jobin.js — Astros Scoped-CSS
   greift dort nicht, die Regeln muessen also global stehen. */
.jb-ef + .jb-ef { margin-top: var(--space-4); }

/* ---------- Zwei Spalten, sobald Platz ist ----------
   Vorname, PLZ, Geburtsdatum — die Haelfte der Felder ist kurz, und in
   voller Breite untereinander sieht ein Formular aus, als fehle etwas.
   Ab 760px stehen sie deshalb zu zweit.

   ⚠️ Was Platz braucht, spannt ueber beide Spalten: Textfelder mit
   mehreren Zeilen, der Datei-Bereich, Kaestchengruppen und einzelne
   Haken. `:has()` fragt danach am Element selbst — die Felder kommen aus
   Elsa, es gibt hier also keine Liste, an der man es abzaehlen koennte.

   Der Abstand kommt ab hier vom Raster; die Randregel darueber wuerde
   sonst eine zweite Luecke aufmachen. */
@media (min-width: 760px) {
  .jb-wiz__step, .jb-ergaenz__gruppe {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5); align-items: start;
  }
  .jb-wiz__step > .jb-ef + .jb-ef, .jb-ergaenz__gruppe > .jb-ef + .jb-ef { margin-top: 0; }
  .jb-wiz__step > :not(.jb-ef), .jb-ergaenz__gruppe > :not(.jb-ef),
  .jb-wiz__step > .jb-ef:has(textarea),
  .jb-wiz__step > .jb-ef:has(input[type="file"]),
  .jb-wiz__step > .jb-ef:has(.jb-efmulti),
  .jb-wiz__step > .jb-ef:has(> .choice),
  .jb-ergaenz__gruppe > .jb-ef:has(textarea),
  .jb-ergaenz__gruppe > .jb-ef:has(input[type="file"]),
  .jb-ergaenz__gruppe > .jb-ef:has(.jb-efmulti),
  .jb-ergaenz__gruppe > .jb-ef:has(> .choice) { grid-column: 1 / -1; }
}
.jb-efmulti { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
/* Ab neun Punkten in einen begrenzten Kasten: 55 Branchen oder 194
   Nationalitaeten am Stueck sind keine Auswahl mehr, sondern eine Wand. */
.jb-efmulti--rollbar {
  max-height: 15rem; overflow-y: auto;
  padding: var(--space-4); border: 1px solid var(--border-field);
  border-radius: var(--jb-radius-card); background: var(--color-surface);
}
@media (min-width: 560px) {
  .jb-efmulti--rollbar { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
}
.jb-efmulti .choice { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--jb-fs-body); line-height: 1.4; }
.jb-efmulti .choice input { flex: none; margin-top: .2em; }

/* Ergaenzungsseite: Gruppen stehen alle offen — wer nur eine ausfuellen
   will, soll nicht durch fuenf blaettern muessen. */
.jb-ergaenz__gruppe + .jb-ergaenz__gruppe { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.jb-ergaenz__h { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; color: var(--color-black); }

/* Anfang der Zusammenfassung. Sie steht dort, wo frueher der Verdienst
   stand — den liefert Elsa nicht, und eine leere Zeile waere schlechter
   als ein Satz, der sagt, worum es geht. */
.jb-jobcard__sum {
  font-size: var(--jb-fs-small); line-height: 1.5; color: var(--color-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.jb-jobbig__sum {
  font-size: var(--jb-fs-small); line-height: 1.45; color: var(--jb-on-ink-dim, var(--color-muted));
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.jb-jobcard__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.jb-jobcard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--jb-fs-body); font-weight: var(--weight-bold); color: var(--color-primary); }
.jb-jobcard__cta svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.jb-jobcard:hover .jb-jobcard__cta svg { transform: translateX(5px); }

/* ⚠️ KEINE PILLE MEHR. Als gefuellte Pille mit halbfetter Schrift stand
   „Lebenslauf noetig" auf der Karte fast so laut wie der Titel — dabei ist
   es ein Hinweis und keine Auszeichnung, und er schreckt eher ab, als dass
   er wirbt. Jetzt eine ruhige Beizeile: kein Grund, kein Polster, normales
   Gewicht.
   Die Variante `--accent` traegt ihre Form selbst, damit sie weiter
   funktioniert, falls sie irgendwo gebraucht wird. */
.jb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--jb-fs-label); font-weight: 400;
  color: var(--color-muted);
}
.jb-chip .icon { opacity: .75; }
.jb-chip--accent {
  color: #fff; background: var(--jb-ink); font-family: var(--font-display); font-weight: 700;
  padding: 6px 13px; border-radius: var(--radius-full);
}

/* Eintreffen der Treffer: gestaffelt, kurz, ohne Zappeln. */
.jb-jobcard--in { opacity: 0; transform: translateY(14px); animation: jb-card-in .5s cubic-bezier(.16, .84, .28, 1) forwards; animation-delay: var(--jb-delay, 0ms); }
@keyframes jb-card-in { to { opacity: 1; transform: none; } }

/* ---------- Skelette waehrend der Suche ----------
   Zeigt die Form der Antwort, bevor sie da ist — ruhiger als ein Spinner,
   weil das Layout nicht springt, wenn die Treffer eintreffen. */
.jb-skel { border: 1px solid var(--border-subtle); border-radius: var(--jb-radius-card); background: var(--color-surface); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.jb-skel__line { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--jb-tint) 25%, #e8ecea 37%, var(--jb-tint) 63%); background-size: 400% 100%; animation: jb-skel 1.4s ease-in-out infinite; }
.jb-skel__line--sm { width: 40%; }
.jb-skel__line--lg { height: 22px; width: 85%; }
.jb-skel__line--md { width: 60%; }
@keyframes jb-skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .jb-skel__line { animation: none; }
  .jb-jobcard--in { animation: none; opacity: 1; transform: none; }
}

/* ---------- Leerzustand ---------- */
.jb-empty { grid-column: 1 / -1; padding: var(--space-7) 0; max-width: 56ch; }
.jb-empty__title { font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; color: var(--color-black); margin: 0; }
.jb-empty__text { margin: var(--space-3) 0 0; font-size: var(--jb-fs-body); line-height: 1.65; color: var(--color-muted); }
.jb-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* Weiterlink am Fuss einer Karte/eines Blocks. */
.jb-fork__cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--jb-fs-body); font-weight: var(--weight-bold); color: var(--color-primary); }
.jb-fork__cta svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
a:hover .jb-fork__cta svg { transform: translateX(5px); }

/* ---------- Rechtstexte ----------
   Lange Fliesstexte: schmale Spalte, ruhige Hierarchie. Stand vorher zweimal
   fast gleich in impressum.astro und datenschutz.astro. */
/* ---------- Rechtsseiten ----------
   ⚠️ Der Inhalt kommt aus Elsa und ist NICHT von uns gesetzt: Ueberschriften,
   Absaetze, geordnete UND ungeordnete Listen, Links, <br>. Was hier keine
   Regel hat, sieht auf einer Rechtsseite sofort unfertig aus — `ol` und `h3`
   fehlten und tauchen in Elsas Texten auf. */
.jb-legal { max-width: 720px; margin: 0 auto; padding: clamp(7rem, 14vh, 9rem) var(--space-5) var(--jb-section-y); }

/* Am Schreibtisch darf die Seite breiter laufen und eine Spur groesser
   setzen — ein Rechtstext wird gelesen, nicht ueberflogen. Die Zeilenlaenge
   bleibt trotzdem gedeckelt: ueber ~75 Zeichen verliert man beim Ruecksprung
   die Zeile. */
@media (min-width: 900px) {
  .jb-legal { max-width: 58rem; padding-inline: var(--space-7); }
  .jb-legal p, .jb-legal li { font-size: var(--jb-fs-body-l); }
  .jb-legal p, .jb-legal ul, .jb-legal ol { max-width: 75ch; }
}

.jb-legal h1 { font-family: var(--font-display); font-size: var(--jb-fs-l); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--color-black); text-wrap: balance; }

/* Die Haarlinie gliedert den Text in Abschnitte — bei sieben Ueberschriften
   auf einer Seite ist das der Unterschied zwischen Dokument und Textwand.

   ⚠️ OBEN UND UNTEN DERSELBE WERT. Vorher war der Abstand ueber der Linie
   (space-8) groesser als der darunter (space-6): die Linie klebte an der
   folgenden Ueberschrift, statt zwischen den Abschnitten zu stehen, und
   der Sprung wirkte dadurch groesser als er war. Ein Trenner gehoert in
   die Mitte des Abstands, den er trennt — deshalb EIN Wert fuer beides. */
.jb-legal h2 {
  --jb-legal-luft: clamp(2rem, 3.4vw, 2.75rem);
  font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600;
  letter-spacing: -.02em; color: var(--color-black); text-wrap: balance;
  margin: var(--jb-legal-luft) 0 var(--space-4);
  padding-top: var(--jb-legal-luft);
  border-top: 1px solid var(--border-subtle);
}

.jb-legal h3 {
  font-family: var(--font-display); font-size: var(--jb-fs-body-l); font-weight: 600;
  letter-spacing: -.01em; color: var(--color-black);
  margin: var(--space-6) 0 var(--space-3);
}

.jb-legal p, .jb-legal li { font-size: var(--jb-fs-body); line-height: 1.75; color: var(--color-muted); }
.jb-legal p { margin-bottom: var(--space-4); }
.jb-legal ul, .jb-legal ol { margin: var(--space-4) 0; padding-left: 1.35em; display: grid; gap: var(--space-3); }
.jb-legal li::marker { color: var(--color-primary); }
.jb-legal a { color: var(--color-black); border-bottom: 1px solid var(--color-primary); }
.jb-legal a:hover { color: var(--color-primary); text-decoration: none; }

/* Der Entwurfshinweis steht ueber dem Text und soll ihn nicht erdruecken. */
.jb-legal > .notice { margin: var(--space-6) 0 0; }

/* Sticky-Nav: Anker nicht unter den Header scrollen lassen. */
html { scroll-padding-top: 84px; }

/* ============================================================
   Grundlage nach dem Vorbild grb.uk.com
   ------------------------------------------------------------
   1. Die Seite steht auf getöntem Grund, weiße Flächen setzen sich ab.
   2. Signatur-Form: eine stark gerundete Ecke pro Karte.
   3. Inhalte blenden beim Scrollen gestaffelt ein (JS: initReveal).
   ============================================================ */
/* `clip` statt `hidden`: die Einblend-Bewegungen kommen von links/rechts aus
   dem Bild und schoben auf schmalen Viewports kurz eine Querleiste raus.
   `hidden` wuerde die klebende Navigation aushebeln, `clip` nicht. */
/* Die Sperre steht auf BEIDEN: `overflow-x` am Body wandert nur dann an den
   Viewport, wenn html sichtbar ist — und diese Weitergabe ist genau die
   Stelle, an der Browser sich uneinig sind. */
html { overflow-x: clip; }
body { background: var(--jb-page); overflow-x: clip; }
/* Solange das Vollbild-Menue offen ist, steht die Seite darunter still. */
body.jb-menu-open { overflow: hidden; }


/* Gestaffeltes Einblenden. Ohne JS (oder mit reduced-motion) ist alles
   sofort sichtbar — die Klasse setzt jobin.js erst, wenn es losgehen kann.
   Bewusst deutlich: 56px Weg, damit die Bewegung auch auffaellt. */
.jb-anim [data-reveal] { opacity: 0; transform: translateY(56px) scale(.985); }
/* Varianten — nicht alles kommt aus derselben Richtung. Der Wert im
   data-reveal-Attribut entscheidet, --jb-dur die Dauer. */
.jb-anim [data-reveal="left"]  { transform: translateX(-64px); --jb-dur: 1s; }
.jb-anim [data-reveal="right"] { transform: translateX(64px);  --jb-dur: 1s; }
/* Auf schmalen Schirmen kommt nichts mehr von der Seite: 64px nach rechts
   sind dort echte 64px Ueberbreite, und die Querleiste blitzt auf, bis die
   Einblendung durch ist. Vertikal faellt das nicht an. */
@media (max-width: 759px) {
  .jb-anim [data-reveal="left"], .jb-anim [data-reveal="right"] { transform: translateY(48px); --jb-dur: .9s; }
}
.jb-anim [data-reveal="far"]   { transform: translateY(110px); --jb-dur: 1.05s; }
.jb-anim [data-reveal="zoom"]  { transform: scale(.9);         --jb-dur: .95s; }
.jb-anim [data-reveal="tilt"]  { transform: translateY(70px) rotate(-2deg); --jb-dur: 1.1s; }
.jb-anim [data-reveal="tilt-r"]{ transform: translateY(70px) rotate(2deg);  --jb-dur: 1.1s; }
.jb-anim [data-reveal].is-in {
  opacity: 1; transform: none;
  /* border-radius und background MUESSEN hier mit rein: diese Regel setzt
     `transition` komplett neu und hat mehr Spezifitaet als die Karten-Regeln.
     Ohne sie sprang der Hover der Karten ohne jeden Uebergang. */
  transition:
    opacity var(--jb-dur, .85s) cubic-bezier(.16, .84, .28, 1),
    transform var(--jb-dur, .85s) cubic-bezier(.16, .84, .28, 1),
    border-radius var(--jb-hover-dur) var(--jb-hover-ease),
    background var(--transition-base);
  transition-delay: var(--jb-delay, 0ms);
}
/* Die Verzoegerung gilt nur fuers Einblenden — beim Hover soll sofort etwas
   passieren. */
.jb-anim [data-reveal].is-in:hover { transition-delay: 0ms; }

/* ---------- Akzentband ----------
   Vorbild: ein durchlaufendes Band in der Signalfarbe direkt unter der
   Bildbühne, Einträge durch ein Sternchen getrennt. Zwei identische Spuren,
   die zweite schließt lückenlos an — endlos ohne Breitenmessung per JS. */
.jb-band { overflow: hidden; background: var(--jb-green); color: var(--jb-ink); padding-block: var(--space-3); }
/* Als Trenner ueber dem Footer laeuft es ueber die volle Breite: es
   schliesst die Seite ab, statt eine Bildbahn zu begrenzen. Die frueheren
   52vw (halbe Breite unter dem Hero-Bild) sind damit hinfaellig. */
/* Kein Abstand nach oben: als Trenner sitzt das Band direkt auf dem Block
   darueber. Mit Abstand blitzte zwischen dem dunklen Abschluss und dem
   gruenen Band der helle Seitengrund durch — ein Trenner, der selbst
   getrennt wird, trennt nichts. */
.jb-band--trenner { margin-top: 0; }
/* Laenger als frueher: die Spur traegt jetzt Saetze statt Woerter, ist also
   laenger — bei gleicher Dauer waere sie schneller unterwegs. */
.jb-band__track { display: flex; width: max-content; animation: jb-band 68s linear infinite; }
.jb-band:hover .jb-band__track { animation-play-state: paused; }
.jb-band__set { display: flex; align-items: center; flex: none; }
/* Ganze Wendungen statt Einzelwoerter: Versalien mit Sperrung liest man bei
   einem Wort noch mit, bei einem halben Satz nicht mehr. Also gemischt
   geschrieben, ohne Sperrung, eine Spur groesser. */
.jb-band__item {
  display: inline-flex; align-items: center; gap: var(--space-4); padding-left: var(--space-4);
  font-family: var(--font-display); font-size: var(--jb-fs-body); font-weight: 600;
  letter-spacing: -.01em; white-space: nowrap;
}
.jb-band__star { font-size: .85em; opacity: .55; }
@keyframes jb-band { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .jb-band__track { animation: none; }
  .jb-anim [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Overlay (seitenweit, mehrfach nutzbar) ----------
   Ein <dialog> pro Seite (Overlay.astro), geoeffnet von beliebigen
   Ausloesern mit data-overlay-open. Inhalt setzt initOverlay ein —
   deshalb stehen die Styles hier global. */
.jb-overlay {
  width: min(560px, calc(100vw - 2 * var(--space-5)));
  padding: 0; border: 0; border-radius: var(--jb-radius-card);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 40px 90px -40px rgba(6, 20, 26, .6);
}
.jb-overlay::backdrop { background: rgba(6, 20, 26, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.jb-overlay__box { position: relative; padding: var(--space-6) var(--space-6) var(--space-7); }
.jb-overlay__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--jb-tint); color: var(--color-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.jb-overlay__close:hover { background: var(--jb-ink); color: #fff; }
.jb-overlay__title {
  margin: 0 var(--space-7) var(--space-3) 0;
  font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25; color: var(--color-black);
}
.jb-overlay__body { font-size: var(--jb-fs-body); line-height: 1.7; color: var(--color-muted); }
.jb-overlay__body p { margin: 0 0 var(--space-3); }
.jb-overlay__body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .jb-overlay[open] { animation: jb-overlay-in .28s cubic-bezier(.2, .8, .2, 1); }
  @keyframes jb-overlay-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---------- Sprachhinweis ----------
   Unten, nicht oben: die Kopfleiste liegt fest ueber dem Hero, ein Balken
   darueber wuerde sie verschieben oder von ihr verdeckt. Ueber der
   Chat-Insel, damit sich beide nicht ueberdecken. */
.jb-langnote {
  position: fixed; z-index: calc(var(--z-sticky) + 1);
  left: var(--space-5); bottom: var(--space-5); max-width: min(420px, calc(100vw - 2 * var(--space-5)));
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--border-subtle); border-radius: var(--jb-radius-card);
  box-shadow: 0 24px 48px -24px rgba(6, 20, 26, .45);
}
.jb-langnote[hidden] { display: none; }
.jb-langnote__text { margin: 0; font-size: var(--jb-fs-small); line-height: 1.5; }
.jb-langnote__text span { display: block; }
.jb-langnote__text span[lang="en"] { font-weight: var(--weight-bold); color: var(--color-black); }
.jb-langnote__text span[lang="de"] { margin-top: 3px; color: var(--color-muted); }
.jb-langnote__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.jb-langnote__go {
  display: inline-flex; padding: 7px var(--space-4); border-radius: var(--radius-full);
  background: var(--jb-ink); color: var(--jb-on-ink); white-space: nowrap;
  font-size: var(--jb-fs-label); font-weight: var(--weight-bold);
}
.jb-langnote__go:hover { background: #17323c; text-decoration: none; }
.jb-langnote__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: var(--color-muted);
}
.jb-langnote__close:hover { background: var(--jb-tint); color: var(--color-black); }
/* ---------- KI-Hinweis ----------
   Sitzt in der Bildecke und oeffnet das seitenweite Overlay.
   WARNUNG: Dieser Block ist am 2026-08-26 versehentlich mitgeloescht worden,
   als ein CSS-Bereich zwischen zwei Markern herausgeschnitten wurde — das
   Zeichen stand danach unsichtbar auf jeder Seite. Wer hier wieder per
   Bereichsschnitt aendert: Grenzen pruefen. */
.jb-ai {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(6, 20, 26, .32); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: inherit; font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: .1em;
  opacity: .5;
  transition: opacity var(--transition-base), background var(--transition-base);
}
.jb-ai:hover, .jb-ai:focus-visible { opacity: 1; background: rgba(6, 20, 26, .62); }

/* Im Hero sitzt der Hinweis weiter von der Kante weg: unten rechts, mit
   genug Abstand, damit er nicht auf der Kante zum Laufband klebt.
   ⚠️ Diese Regeln MUESSEN hier stehen und nicht im <style> von index.astro:
   der Knopf kommt aus AiBadge.astro und traegt deshalb NICHT den Scope-Marker
   der Startseite — eine Regel dort waere totes CSS. */
.jb-hero__figure .jb-ai { right: calc(var(--jb-rahmen, 0px) + var(--space-4)); bottom: calc(var(--jb-rahmen, 0px) + var(--space-4)); opacity: .78; }
@media (max-width: 1039px) {
  /* Mobil steht der Text unten auf dem Bild — der Hinweis weicht nach oben
     aus, unter die Leiste.
     ⚠️ Und nach links: am rechten Rand laeuft senkrecht der Taktbalken
     (`.jb-takt`, zeigt die Restzeit des Motivs). Gemessen bei 375px lag das
     Zeichen (301-331) genau darauf (320-323) — es sah aus, als sei es
     durchgestrichen. */
  .jb-hero__figure .jb-ai {
    bottom: auto; top: calc(var(--jb-rahmen, 0px) + var(--space-7) + 2.5rem);
    right: calc(var(--jb-rahmen, 0px) + var(--space-4) + 26px);
    opacity: .85;
  }
}

/* Kein Hover-Verhalten mehr: das Zeichen oeffnet den vollen Hinweis per
   Klick, und das reicht. Die frueher hier stehende Sprechblase (::after
   mit `data-tip`) ist entfernt — sie sagte im Kern dasselbe wie das
   Overlay, nur fluechtig, und auf einem Touchscreen gab es sie ohnehin
   nicht. Was bleibt, ist die uebliche Rueckmeldung eines Knopfes. */}

/* ---------- Job-Laufband ----------
   Die offenen Stellen sind das wichtigste Angebot der Seite, deshalb laufen
   sie als grosse Karten randlos durchs Bild. Zwei identische Spuren ergeben
   den nahtlosen Loop; bei zu wenigen Jobs wiederholt jobin.js das Set, bis
   es breiter als der Viewport ist. Hover haelt an — sonst waeren die Karten
   bewegte Klickziele. */
/* Abstand zur Ueberschrift wie bei den Karten-Rastern (--space-6) — die
   Sektion darueber traegt dafuer kein unteres Polster mehr. */
.jb-jobrail { overflow: hidden; margin-top: var(--space-6); padding-block: var(--space-2); }
/* Das Laufband bricht bewusst aus der Inhaltsspalte aus — seine Meldungen
   duerfen das aber nicht: „Aktuell keine offenen Jobs" stand sonst ganz
   links am Fensterrand, waehrend die Ueberschrift darueber mittig sass. */
.jb-jobrail__loading {
  max-width: var(--jb-content); margin-inline: auto;
  padding-inline: var(--space-5);
}
.jb-jobrail__track { display: flex; width: max-content; animation: jb-jobrail 60s linear infinite; }
.jb-jobrail:hover .jb-jobrail__track,
.jb-jobrail:focus-within .jb-jobrail__track { animation-play-state: paused; }
.jb-jobrail__set { display: flex; flex: none; }
@keyframes jb-jobrail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 720px) { .jb-jobbig { padding: var(--space-6); } }

.jb-jobbig {
  display: flex; flex-direction: column; flex: none;
  width: clamp(320px, 30vw, 520px); min-height: 340px; margin-right: var(--space-4);
  /* Auf schmalen Karten weniger Polster: „Debitorenbuchhaltung" ist 262px
     breit und braucht die Zeile fuer sich, sonst bricht es mitten im Wort. */
  padding: var(--space-5); border-radius: var(--jb-radius-card);
  color: #fff; text-decoration: none;
  transition: border-radius var(--jb-hover-dur) var(--jb-hover-ease);
}
.jb-jobbig:hover { text-decoration: none; border-radius: var(--jb-corner-hover); }
/* EINE Farbe fuer alle Karten. Vier rotierende Untergruende machten aus dem
   Band einen Regenbogen — daneben lief die Seite auf zwei Flaechen hinaus,
   das Band allein auf vier. Der Akzent sitzt jetzt im Lohn, nicht im Grund. */
.jb-jobbig { background: var(--jb-ink); }

.jb-jobbig__place {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--jb-fs-label); font-weight: var(--weight-bold);
  letter-spacing: .12em; text-transform: uppercase; opacity: .9;
}
.jb-jobbig__title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2.2rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; margin-top: var(--space-4);
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4;
  overflow-wrap: break-word;
}
.jb-jobbig__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: auto; padding-top: var(--space-6);
  font-size: var(--jb-fs-body); font-weight: var(--weight-bold);
}
.jb-jobbig__arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid currentColor;
  transition: transform var(--transition-base);
}
.jb-jobbig:hover .jb-jobbig__arrow { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  /* Statt Bewegung: von Hand schiebbar. */
  .jb-jobrail { overflow-x: auto; scroll-snap-type: x mandatory; }
  .jb-jobrail__track { animation: none; }
  .jb-jobbig { scroll-snap-align: start; }
}

/* ============================================================
   Jobi — der Chat (JobBot.astro + initJobBot in jobin.js)
   Gerüst steht im Astro-Template, die Blasen kommen per innerHTML —
   deshalb ALLE Bot-Styles hier global.
   ============================================================ */
.jb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Chat-Einstieg ----------
   Er sitzt unten rechts und laeuft mit. Frueher war es ein Kreis mit
   drehender Ringschrift: schoen, aber er verriet nichts darueber, was
   drinsteckt. Jetzt sagt er es selbst — Zeichen fuer „Gespraech", feste
   Beschriftung fuer WER, und eine Zeile, die durchtippt, WOBEI er hilft.
   Ruhige Flaeche mit Haarlinie; beim Hover zieht die Kante in Markenfarbe
   an und der Pfeil rueckt. */
.jb-bot {
  position: fixed; z-index: var(--z-sticky);
  right: clamp(var(--space-5), 3vw, 3rem); bottom: var(--space-4);
  display: flex; flex-direction: column; align-items: flex-end;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .jb-bot { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}

/* Die Kontur ist der Verlauf, nicht der Schatten: zwei Hintergrundschichten
   uebereinander — die innere (padding-box) traegt die Flaeche, die aeussere
   (border-box) den Verlauf, sichtbar nur dort, wo der transparente Rahmen
   liegt. Der Verlauf ist doppelt so breit wie der Knopf und wandert einmal
   durch; erste und letzte Farbe sind dieselbe, deshalb ist der Sprung am
   Schleifenende unsichtbar. */
.jb-bot__launcher {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  /* Am Schreibtisch KEINE laufende Verlaufslinie: sie stand dort als zweites
     Signal neben der aufbluehenden Flaeche beim Hover, und zwei Verlaeufe am
     selben Knopf heben sich gegenseitig auf. Mobil bleibt sie — dort gibt es
     keinen Hover, der den Knopf sonst erklaeren wuerde.
     Stattdessen eine ruhige Haarlinie im Weisston der Seite (--jb-page):
     auf dem dunklen Grund braucht die Pille eine Kante, sonst zerfliesst sie
     mit dem Fussbereich. Sie liegt AUSSERHALB der Verlaufsflaeche (die haengt
     an inset: 0, also an der Innenkante) und bleibt beim Hover stehen. */
  border: 1px solid var(--jb-page); border-radius: var(--radius-full);
  color: var(--jb-on-ink); cursor: pointer; text-align: left; font: inherit;
  background: var(--jb-ink);
  box-shadow: 0 6px 18px -12px rgba(6, 20, 26, .35);
  transition: color var(--transition-base);
  /* Traegt die aufbluehende Verlaufsflaeche (::before). `overflow` haelt sie
     in der Pillenform, `isolation` haelt sie unter dem Inhalt. */
  position: relative; overflow: hidden; isolation: isolate;
}

/* DERSELBE Verlauf wie an der Hauptaktion in der Leiste, mit derselben
   Kurve: die beiden sind das Paar auf der Seite und sollen sich beim Hover
   gleich anfuehlen. Der laufende Verlauf am RAND bleibt daneben bestehen —
   er ist das Erkennungszeichen im Ruhezustand.
   `inset: 0` bezieht sich auf die Innenkante, die Randlinie bleibt deshalb
   sichtbar. */
@property --jb-bloom-bot {
  syntax: '<length>'; inherits: false; initial-value: 0px;
}

/* Wie in der Leiste: keine einfahrende Kante, sondern eine Kreisblende,
   die aus der Mitte aufgeht und deren Rand ausfranst. Der Knopf ist
   groesser als die Pille, also braucht die Blende mehr Weg. */
/* ⚠️ Auf der Stellenanzeige gibt es den Chat mobil NICHT. Dort steht die
   Bewerben-Leiste am unteren Rand, und zwei schwebende Knoepfe uebereinander
   sind einer zu viel — der Chat lag auf der Leiste. Am Schreibtisch bleibt
   er: dort steht die Leiste nicht.
   `main.jb-detail ~ .jb-bot` geht, weil beide Geschwister im <body> sind
   (Base.astro rendert erst den Inhalt, dann den Chat). */
@media (max-width: 999px) {
  main.jb-detail ~ .jb-bot { display: none; }
}

/* Schmale Form: nur das Zeichen. Gesetzt von `initBotAusweichen`, wenn
   die Pille sonst ueber dem Bewerben-Knopf laege. Kein Uebergang auf der
   Breite — er liefe waehrend des Scrollens und wuerde die Messung
   hinterherhinken lassen. */
.jb-bot__launcher.is-schmal { padding: var(--space-3); gap: 0; }
.jb-bot__launcher.is-schmal .jb-bot__launcher-text,
.jb-bot__launcher.is-schmal .jb-bot__launcher-arrow { display: none; }

.jb-bot__launcher::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gradient-brand);
  --jb-bloom-bot: 0px;
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 var(--jb-bloom-bot), transparent calc(var(--jb-bloom-bot) + 52px));
  mask-image: radial-gradient(circle at 50% 50%, #000 var(--jb-bloom-bot), transparent calc(var(--jb-bloom-bot) + 52px));
  transition: --jb-bloom-bot .6s cubic-bezier(.22, .61, .36, 1), opacity .35s ease-out;
}
.jb-bot__launcher:hover::before, .jb-bot__launcher:focus-visible::before {
  opacity: 1; --jb-bloom-bot: 260px;
}
@media (prefers-reduced-motion: reduce) {
  .jb-bot__launcher::before { transition: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  .jb-bot__launcher { animation: jb-outline 7s linear infinite; }
}
@keyframes jb-outline { to { background-position: 0 0, 200% 0; } }
/* Auf der Verlaufsflaeche wird ALLES weiss — Titel, Unterzeile, Zeichen
   und Pfeil. Vorher stand dort Ink: dunkel liest sich auf Gruen/Orange
   zwar auch, aber die Unterzeile (ohnehin gedaempft) wurde dabei fast
   unsichtbar, und der Knopf zerfiel in drei verschiedene Toene. Ein Ton
   fuer alles ist ruhiger und auf dem Verlauf gut lesbar. */
.jb-bot__launcher:hover, .jb-bot__launcher:focus-visible { color: var(--jb-on-ink); }
.jb-bot__launcher:hover .jb-bot__launcher-mark,
.jb-bot__launcher:hover .jb-bot__launcher-arrow,
.jb-bot__launcher:hover .jb-bot__launcher-live,
.jb-bot__launcher:hover .jb-bot__launcher-ghost,
.jb-bot__launcher:focus-visible .jb-bot__launcher-mark,
.jb-bot__launcher:focus-visible .jb-bot__launcher-arrow,
.jb-bot__launcher:focus-visible .jb-bot__launcher-live,
.jb-bot__launcher:focus-visible .jb-bot__launcher-ghost { color: var(--jb-on-ink); }
.jb-bot.is-open .jb-bot__launcher { display: none; }

/* Nur das Zeichen, keine Scheibe darunter — der Verlauf am Rand traegt die
   Farbe schon. */
.jb-bot__launcher-mark { display: inline-flex; flex: none; width: 38px; height: 38px; color: var(--jb-green); }
.jb-bot__launcher-mark svg { width: 100%; height: 100%; overflow: visible; }

.jb-bot__launcher-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Groesse und Gewicht wie die Hauptaktion in der Leiste — die beiden
   sollen als Paar lesbar sein. */
.jb-bot__launcher-title {
  font-family: var(--font-display); font-size: var(--jb-fs-body); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15; color: var(--jb-on-ink);
}
/* Platzhalter und laufende Zeile liegen in derselben Rasterzelle: der Knopf
   behaelt damit seine Breite, waehrend die Zeile tippt. */
.jb-bot__launcher-say { display: inline-grid; }
.jb-bot__launcher-ghost, .jb-bot__launcher-live {
  grid-area: 1 / 1; font-size: var(--jb-fs-label); line-height: 1.3; color: var(--jb-on-ink-muted); white-space: nowrap;
}
/* Der Platzhalter reserviert den Strich gleich mit (3px): dadurch kann der
   Strich im Textfluss stehen und mit dem letzten Buchstaben mitwandern,
   ohne dass die laufende Zeile jemals breiter wird als der Platzhalter. */
.jb-bot__launcher-ghost { visibility: hidden; padding-right: 3px; }
.jb-bot__launcher-live::after {
  content: ''; display: inline-block; width: 1px; height: .95em; margin-left: 2px;
  background: var(--color-primary); vertical-align: -.12em;
  animation: jb-caret 1s steps(1) infinite;
}
@keyframes jb-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.jb-bot__launcher-arrow { flex: none; width: 18px; height: 18px; color: var(--color-primary); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.jb-bot__launcher:hover .jb-bot__launcher-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .jb-bot__launcher-live::after { animation: none; opacity: 0; }
}

/* Die Bewegung sitzt IM Knopf: die drei Punkte in der Sprechblase tippen wie
   im Chat. Getippt wird in Schueben (1.2s Bewegung, dann Pause bis 2.8s),
   sonst zappelt es dauerhaft im Augenwinkel. Laeuft ohnehin nur bei
   geschlossenem Chat — `.is-open` blendet den Knopf aus. */
/* `transform-box: fill-box` ist bei SVG-Kindern noetig: ohne das bezieht sich
   transform-origin auf den Viewport der Grafik, nicht auf den Punkt. */
.jb-bot__dot {
  transform-box: fill-box; transform-origin: center;
  animation: jb-bot-typing 2.8s ease-in-out infinite;
}
.jb-bot__dot:nth-of-type(2) { animation-delay: .14s; }
.jb-bot__dot:nth-of-type(3) { animation-delay: .28s; }
.jb-bot__launcher:hover .jb-bot__dot { animation-duration: 1.9s; }
@keyframes jb-bot-typing {
  0%, 43%, 100% { transform: none; opacity: .5; }
  14%           { transform: translateY(-1.6px); opacity: 1; }
}


/* Hoehe in `dvh` (dynamic viewport height): sie folgt der Leiste des mobilen
   Browsers, waehrend die ein- und ausfaehrt. Fuer die Buehne waere das falsch
   — dort steht `svh`, weil ein Layout, das beim Scrollen staendig seine Hoehe
   aendert, unter dem Finger springt. Hier ist genau das erwuenscht: sonst
   waere das Fenster so hoch wie der Viewport OHNE Leiste, und das Eingabefeld
   am unteren Rand laege hinter ihr. Davor dieselbe Zeile in `vh` als
   Rueckfall fuer aeltere Browser. */
.jb-bot__panel {
  display: flex; flex-direction: column; overflow: hidden;
  width: min(390px, calc(100vw - 2 * var(--space-4)));
  height: min(600px, calc(100vh - 7rem));
  height: min(600px, calc(100dvh - 7rem));
  background: var(--color-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px rgba(12, 30, 37, .55);
}
.jb-bot__panel[hidden] { display: none; }
/* Vergrößert: mehr Platz für Trefferlisten und lange Antworten. */
.jb-bot.is-big .jb-bot__panel {
  width: min(680px, calc(100vw - 2 * var(--space-4)));
  height: min(860px, calc(100vh - 4rem));
  height: min(860px, calc(100dvh - 4rem));
}
.jb-bot__sizeicon { width: 17px; height: 17px; }
.jb-bot__sizeicon--in, .jb-bot.is-big .jb-bot__sizeicon--out { display: none; }
.jb-bot.is-big .jb-bot__sizeicon--in { display: block; }

.jb-bot__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); background: var(--jb-ink); color: var(--jb-on-ink);
}
.jb-bot__avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 999px; background: var(--gradient-brand);
  color: var(--jb-ink); font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
}
.jb-bot__name { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); }
/* 40px, nicht 34: die beiden Zeichen im Chatkopf (schliessen, groesser)
   sitzen auf dem Telefon dicht nebeneinander am oberen Rand des Fensters.
   Das Zeichen darin bleibt gleich gross. */
.jb-bot__iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--jb-on-ink-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.jb-bot__iconbtn:hover { background: var(--jb-on-ink-fill-weak); color: var(--jb-on-ink); }

.jb-bot__log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--color-surface);
}

.jb-bot__msg { max-width: 88%; font-size: var(--text-sm); line-height: 1.5; }
.jb-bot__msg--bot {
  align-self: flex-start; padding: var(--space-3) var(--space-4);
  background: var(--jb-tint); color: var(--color-text);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 6px;
}
.jb-bot__msg--you {
  align-self: flex-end; padding: var(--space-3) var(--space-4);
  background: var(--jb-ink); color: var(--jb-on-ink); font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg) var(--radius-lg) 6px var(--radius-lg);
}
.jb-bot__msg--cards { align-self: stretch; max-width: 100%; }

/* „schreibt …“ — drei Punkte, versetzt gepulst. */
.jb-bot__dots { display: inline-flex; gap: 4px; padding-block: 3px; }
.jb-bot__dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--color-muted); animation: jb-bot-dot 1.1s ease-in-out infinite; }
.jb-bot__dots i:nth-child(2) { animation-delay: .15s; }
.jb-bot__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes jb-bot-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.jb-bot__job {
  padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.jb-bot__job-title { display: block; font-family: var(--font-display); font-weight: 700; color: var(--color-black); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.jb-bot__job-meta { margin: 4px 0 0; font-size: var(--text-xs); color: var(--color-muted); }
/* In der Jobkarte bleiben die zwei Aktionen nebeneinander. */
.jb-bot__job-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.jb-bot__job-actions .jb-bot__choice { flex: 1 1 auto; }

.jb-bot__foot { border-top: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.jb-bot__foot:empty { display: none; }
/* Antwortmöglichkeiten stehen untereinander — als Liste zu lesen statt als
   umbrechendes Knopf-Feld. */
.jb-bot__choices { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.jb-bot__choice {
  display: inline-flex; align-items: center; justify-content: center; padding: 7px var(--space-4);
  border: 1.5px solid var(--jb-ink); border-radius: var(--radius-full);
  background: var(--jb-ink); color: #fff; cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--weight-bold); font-family: inherit; line-height: 1.35;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.jb-bot__choice:hover { background: var(--jb-ink-soft); border-color: var(--jb-ink-soft); color: #fff; text-decoration: none; }
.jb-bot__choice--ghost { background: transparent; color: var(--color-black); border-color: var(--border-field); }
.jb-bot__choice--ghost:hover { background: var(--jb-tint); color: var(--color-black); border-color: var(--color-primary); }
.jb-bot__choice--send { width: 100%; justify-content: center; margin-top: var(--space-3); }
.jb-bot__choice:disabled { opacity: .45; cursor: not-allowed; }

.jb-bot__input { display: flex; align-items: center; gap: var(--space-2); }
.jb-bot__field {
  flex: 1 1 auto; min-width: 0; padding: 0.7rem var(--space-4);
  border: 1.5px solid var(--border-field); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm);
}
.jb-bot__field:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--jb-primary-ring); }
.jb-bot__send {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--jb-ink); color: #fff;
}
.jb-bot__send:hover { background: var(--jb-ink-soft); }
.jb-bot__textform { display: block; }
.jb-bot__textarea {
  display: block; width: 100%; resize: vertical; min-height: 74px;
  padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-field); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); line-height: 1.5;
}
.jb-bot__textarea:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--jb-primary-ring); }
.jb-bot__textform .jb-bot__choice--send { margin-top: var(--space-2); }

.jb-bot__skip {
  display: block; margin-top: var(--space-2); padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--color-muted); font: inherit; font-size: var(--text-xs); text-decoration: underline;
}
.jb-bot__skip:hover { color: var(--color-black); }

.jb-bot__consent { display: block; }
.jb-bot__summary { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-muted); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.jb-bot__check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-xs); line-height: 1.45; color: var(--color-text); margin-bottom: var(--space-2); cursor: pointer; }
.jb-bot__check input { margin-top: 2px; flex: none; accent-color: var(--color-primary); }
.jb-bot__check a { color: var(--color-black); border-bottom: 1px solid var(--color-primary); }

/* Zusammenfassung vor dem Absenden: Beschriftung und Wert in einer Zeile,
   damit jeder sieht, WAS gleich rausgeht. */
.jb-bot__sum-row { display: flex; gap: var(--space-2); margin-bottom: 3px; }
.jb-bot__sum-row b { flex: none; min-width: 5.5em; font-weight: var(--weight-bold); color: var(--color-black); }

/* Vorschlaege ueber dem Eingabefeld. */
.jb-bot__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.jb-bot__chip {
  border: 1px solid var(--border-field); background: none; cursor: pointer; font: inherit;
  padding: 5px 12px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-black);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.jb-bot__chip:hover { border-color: var(--color-primary); background: var(--jb-tint); }

/* Datei-Auswahl: das Feld selbst liegt unsichtbar unter dem Knopf, damit
   Klick und Tastatur ueber das Label laufen. */
.jb-bot__filebox { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.jb-bot__file { position: relative; justify-content: center; gap: var(--space-2); cursor: pointer; }
.jb-bot__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

@media (max-width: 560px) {
  /* Das Fenster fährt mobil als Sheet über die volle Breite auf — der
     KNOPF dagegen bleibt kompakt und rechts. Über die ganze Breite gezogen
     wirkte er wie eine Leiste und die Beschriftung darin verloren; die
     Tippzeile fällt hier ganz weg, dafür trägt der Titel allein. */
  .jb-bot { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); transform: none; }
  /* Mobil traegt die laufende Linie den Knopf: ohne Hover ist sie das
     Einzige, was ihn als etwas Anfassbares ausweist. */
  .jb-bot__launcher {
    width: auto; align-self: flex-end; padding: var(--space-3) var(--space-4);
    border: 1.5px solid transparent;
    background:
      linear-gradient(var(--jb-ink), var(--jb-ink)) padding-box,
      linear-gradient(100deg, var(--jb-green) 0%, var(--jb-orange) 50%, var(--jb-green) 100%) border-box;
    background-size: auto, 200% 100%;
    background-position: 0 0, 0 0;
  }
  .jb-bot__launcher-say { display: none; }
  .jb-bot__launcher-title { font-size: var(--jb-fs-body); }
  .jb-bot__launcher-mark { width: 32px; height: 32px; }
  .jb-bot__panel { width: 100%; height: min(78vh, calc(100vh - 5rem)); }
  .jb-bot__panel { height: min(78dvh, calc(100dvh - 5rem)); }
  /* Breiter geht hier nicht — „größer" heißt mobil also höher. */
  .jb-bot.is-big .jb-bot__panel { width: 100%; height: min(90vh, calc(100vh - 2.5rem)); }
  .jb-bot.is-big .jb-bot__panel { height: min(90dvh, calc(100dvh - 2.5rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .jb-bot__launcher, .jb-bot__choice, .jb-bot__iconbtn { transition: none; }
  .jb-bot__launcher:hover { transform: none; }
  .jb-bot__dots i, .jb-bot__dot { animation: none; }
  .jb-bot__dots i { opacity: .6; }
  .jb-bot__dot { opacity: 1; }
}

/* ============================================================
   Seiten-/Section-Baukasten (wiederverwendbar, markentypisch)
   Genutzt von den Hub- & SEO-Landingpages. Bewusst typografie-
   getrieben, großzügige Radien, Ink-Kontraste — kein 0815-Grid.
   ============================================================ */
.jb-wrap { max-width: var(--jb-content); margin-inline: auto; padding-inline: var(--space-5); }

/* ============================================================
   SEITEN-BAUKASTEN — gilt fuer ALLE Seiten
   ------------------------------------------------------------
   Stand bis 2026-08 verteilt: die Startseite hatte ihren eigenen
   Satz Klassen im <style>-Block, die Unterseiten einen zweiten mit
   Schatten, Hebe-Hovern und kleinerer Typo. Zwei Baukaesten fuer
   eine Marke — jede Aenderung musste doppelt gemacht werden und
   driftete trotzdem. Jetzt steht alles hier.
   ============================================================ */
/* ---------- EIN Baukasten für alle Sektionen ----------
   Gleicher Kopf, gleiches Raster, gleiche Haarlinien. Nur zwei Flächen:
   Ink klammert die Seite (Hero + Abschluss), dazwischen bleibt alles hell —
   dadurch wechselt beim Scrollen nicht ständig das Layoutbild. */
.jb-section { position: relative; max-width: var(--jb-content); margin: 0 auto; padding: var(--jb-section-y) var(--space-5); }
/* Leichte Farbabweichung von Block zu Block. Die Sektion ist eine zentrierte
   Spalte, ihre Flaeche wuerde also nur unter dem Text liegen — deshalb traegt
   ein Pseudo-Element die Farbe ueber die volle Breite. `100vw` ist hier
   ungefaehrlich: der Body hat `overflow-x: clip`. */
.jb-section--tint::before {
  content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%); width: 100vw;
  background: var(--color-surface);
}

/* Zweispaltiges Modul (Schnelleinstieg, Trust) */
.jb-duo { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-6); }
@media (min-width: 720px) { .jb-duo { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

/* ---------- Szenen ----------
   Die EINE Darstellung fuer „unsere Bereiche": Bild, Ort, Szene, Taetigkeiten.
   Vorher standen dieselben vier Bereiche zweimal auf der Seite — einmal als
   Szenen-Bilder, einmal als farbige Kacheln. Zwei Sprachen fuer eine Sache.
   Die einzige Flaeche ist das Foto; alles andere ordnet Typografie. */
.jb-scenes { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
/* Die Huelle ist das Rasterfeld, nicht mehr die Kachel selbst: sie traegt
   das KI-Zeichen, das neben dem Link liegen muss und nicht darin. */
.jb-scene__wrap { position: relative; }
/* Deckt GENAU die Bildflaeche ab (dasselbe 4/3 wie das Bild darunter),
   damit das Zeichen in der Bildecke sitzt und nicht unter der Bildunterschrift.
   Durchlaessig fuer Klicks, sonst waere die halbe Kachel nicht mehr anklickbar. */
.jb-scene__ai { position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 3; pointer-events: none; }
.jb-scene__ai .jb-ai { pointer-events: auto; }
.jb-scene { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; color: inherit; }
.jb-scene__media { display: block; border-radius: var(--jb-radius-card); overflow: hidden; }
.jb-scene__media img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s cubic-bezier(.22, .7, .2, 1);
}
/* Der Zoom ist die einzige Bewegung — kein Schatten, kein Anheben, keine
   Farbe, die sich aendert. */
a.jb-scene:hover { text-decoration: none; }
a.jb-scene:hover .jb-scene__media img { transform: scale(1.04); }
.jb-scene__cap { display: flex; flex-direction: column; gap: var(--space-2); }
.jb-scene__tag {
  font-size: var(--jb-fs-label); font-weight: var(--weight-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary);
}
.jb-scene__line {
  margin: 0; font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2; color: var(--color-black);
}
.jb-scene__text { margin: 0; font-size: var(--jb-fs-body); line-height: 1.65; color: var(--color-muted); }
.jb-scene__roles {
  margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
  font-size: var(--jb-fs-small); line-height: 1.5; color: var(--color-muted);
}
a.jb-scene:hover .jb-scene__roles { border-top-color: var(--color-primary); }
.jb-scenes__foot {
  margin: var(--space-7) 0 0; font-size: var(--jb-fs-body-l); line-height: 1.6;
  color: var(--color-muted); max-width: 62ch;
}
.jb-scenes__foot a { font-weight: var(--weight-bold); color: var(--color-black); border-bottom: 1px solid var(--color-primary); }
.jb-scenes__foot a:hover { color: var(--color-primary); text-decoration: none; }
/* Zwei Spalten, nicht vier: bei vier steht neben jedem Bild eine Textsaeule
   von acht Zeichen Breite — die Szene braucht Platz, sonst liest sie sich
   wie eine Kachelgalerie. */
@media (min-width: 760px) { .jb-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .jb-scene__media img { transition: none; } }

/* ---------- Section-Kopf ----------
   Kicker/H2 links, Weiterlink rechts, darunter eine Haarlinie als
   durchgehendes Ordnungsmotiv. Diese Regeln waren beim Ausbau der
   Farbkarten versehentlich mit entfernt worden — die Ueberschriften liefen
   seitdem auf der Browser-Vorgabe (1.5em). */
.jb-shead {
  display: grid; gap: var(--space-3); align-items: end;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle);
}
/* `padding-block` als Trefferflaeche: die Zeile war 25px hoch. Der
   negative Rand haelt den Abstand zur Ueberschrift daneben. */
.jb-shead__link { display: inline-flex; align-items: center; gap: 6px; padding-block: 8px; margin-block: -8px; font-weight: var(--weight-bold); font-size: var(--jb-fs-body); color: var(--color-black); white-space: nowrap; }
.jb-shead__link svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.jb-shead__link:hover { color: var(--color-primary); text-decoration: none; }
.jb-shead__link:hover svg { transform: translateX(4px); }
/* Wo der Inhalt eigene Trennlinien mitbringt (Schritte), waere der
   Unterstrich die zweite Linie auf engem Raum. */
.jb-shead--bare { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) { .jb-shead { grid-template-columns: 1fr auto; } }

.jb-kicker { font-size: var(--jb-fs-label); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.jb-h2 { font-family: var(--font-display); font-size: var(--jb-fs-l); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; margin: var(--space-4) 0 0; max-width: 20ch; }

/* ---------- Schritte (gleiches Spaltenraster wie die Karten) ---------- */
.jb-steps { list-style: none; display: grid; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; grid-template-columns: 1fr; }
.jb-step { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--border-field); }
.jb-step__title { font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; line-height: 1.25; color: var(--color-black); margin: 0; }
.jb-step__text { color: var(--color-muted); font-size: var(--jb-fs-body-l); margin-top: var(--space-3); line-height: 1.65; }

/* ---------- Trust ---------- */
.jb-trust-text { font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; line-height: 1.4; margin: 0; max-width: 30ch; }
.jb-trust__side { align-self: center; }

/* ---------- FAQ als Frage-Index ---------- */
/* Ohne Flaeche: die Fragen ordnen sich ueber Linien, nicht ueber einen
   Kasten. */
.jb-qa { margin-top: var(--space-5); }
.jb-qa__item { border-bottom: 1px solid var(--border-subtle); }
.jb-qa__item:first-child { border-top: 1px solid var(--border-subtle); }
/* Steht direkt ein Sektionskopf darueber, bringt der schon eine Linie mit —
   dann waeren es zwei auf engem Raum. Gilt fuer alle Listen, die ihre eigene
   Oberkante zeichnen.

   ⚠️ `:not(.jb-shead--bare)` ist nicht Kosmetik. Ein Kopf mit `--bare`
   zeichnet KEINE Linie — die Ausnahme nahm der ersten Zeile dann eine
   Oberkante weg, fuer die es keinen Ersatz gab. Auf der Startseite waren
   das drei Spalten nebeneinander, von denen die erste als einzige keinen
   Strich hatte. */
.jb-shead:not(.jb-shead--bare) + .jb-qa .jb-qa__item:first-child,
.jb-shead:not(.jb-shead--bare) + .jb-faq .jb-faq__item:first-child { border-top: 0; }
.jb-shead:not(.jb-shead--bare) + .jb-steps .jb-step:first-child { border-top: 0; }
.jb-qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-1); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
  transition: color var(--transition-fast);
}
.jb-qa__q::-webkit-details-marker { display: none; }
.jb-qa__q:hover { color: var(--color-primary); }
/* Plus, das beim Öffnen zum Minus wird — zwei Striche, kein Icon nötig. */
.jb-qa__sign { position: relative; flex: none; width: 22px; height: 22px; }
.jb-qa__sign::before, .jb-qa__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.jb-qa__sign::after { transform: rotate(90deg); }
.jb-qa__item[open] .jb-qa__sign::after { transform: rotate(0deg); opacity: 0; }
.jb-qa__a { color: var(--color-muted); font-size: var(--jb-fs-body-l); line-height: 1.7; margin: 0; padding: 0 var(--space-1) var(--space-5); max-width: 62ch; }

/* ---------- Abschluss: zweite Ink-Fläche, klammert die Seite mit dem Hero ---------- */
/* Aufeinanderfolgende Bloecke: nur EIN Abstand dazwischen. */
.jb-statement + .jb-section,
.jb-section + .jb-section { padding-top: 0; }
/* … ausser wenn einer der beiden eine Flaeche traegt: dann ist das Polster
   Teil des Farbblocks und darf nicht wegfallen. */
/* Doppelte Klasse, damit die Regel gegen `.jb-section + .jb-section` ankommt —
   die hat als Nachbar-Selektor dieselbe Spezifitaet wie eine einzelne Klasse
   nicht, sondern eine hoehere. */
.jb-section.jb-section--tint,
.jb-section--tint + .jb-section { padding-top: var(--jb-section-y); }
/* Kopfzeile und das, was direkt darunter aus der Spalte ausbricht (das
   Job-Laufband), gehoeren zusammen: sonst steht der volle Sektionsabstand
   zwischen Ueberschrift und Inhalt. Den Abstand setzt das Element darunter. */
.jb-section--head { padding-bottom: 0; }

/* Ein Ton heller als der Footer — sonst sind Abschluss und Footer eine
   einzige dunkle Flaeche. */
.jb-final { background: var(--jb-ink-soft); padding: var(--jb-section-y) var(--space-5); }
.jb-final__inner { max-width: var(--jb-content-inner); margin: 0 auto; }
.jb-final__kicker { font-size: var(--jb-fs-label); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--jb-green); margin: 0; }
.jb-final__title { font-family: var(--font-display); font-size: var(--jb-fs-xl); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; color: var(--jb-on-ink); margin: var(--space-4) 0 0; }
.jb-final__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

@media (min-width: 640px) {
  .jb-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
  /* minmax(0, …): sonst zwingt der min-content langer Stellentitel die
     Spalten breiter als das Grid. */
  .jb-jobs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Seiten-Hero ----------
   Ink-Flaeche, die den Hero der Startseite aufnimmt, nur ruhiger: kein
   Farbnebel, keine Kacheln — Kicker, eine grosse Zeile, ein Lead. */
.jb-phero { position: relative; background: var(--jb-ink); color: var(--jb-on-ink); }
.jb-phero__inner {
  position: relative; max-width: var(--jb-content-inner); margin-inline: auto;
  padding-block: clamp(8rem, 16vh, 12rem) var(--jb-section-y);
}
.jb-phero__kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--jb-fs-label); font-weight: var(--weight-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--jb-green);
}
.jb-phero h1 {
  max-width: 18ch; margin: var(--space-4) 0 0;
  font-family: var(--font-display); font-size: var(--jb-fs-xl); font-weight: 700;
  letter-spacing: -.035em; line-height: 1.02; color: var(--jb-on-ink);
}
.jb-phero__lead { font-size: var(--jb-fs-body-l); line-height: 1.65; color: var(--jb-on-ink-dim); margin: var(--space-5) 0 0; max-width: 58ch; }
.jb-phero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Sektionen ---------- */
.jb-sec { padding-block: var(--jb-section-y); }
.jb-sec + .jb-sec { padding-top: 0; }
.jb-sec--tint + .jb-sec, .jb-sec--ink + .jb-sec,
.jb-sec + .jb-sec--tint, .jb-sec + .jb-sec--ink { padding-top: var(--jb-section-y); }
.jb-sec--tint { background: var(--jb-tint); }
.jb-sec--ink { background: var(--jb-ink); color: var(--jb-on-ink-dim); }
.jb-sec__kicker { font-size: var(--jb-fs-label); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.jb-sec--ink .jb-sec__kicker { color: var(--jb-green); }
.jb-sec h2 {
  font-family: var(--font-display); font-size: var(--jb-fs-l); font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; margin: var(--space-3) 0 0; max-width: 22ch;
}
.jb-sec--ink h2 { color: var(--jb-on-ink); }
.jb-sec__lead { font-size: var(--jb-fs-body-l); line-height: 1.65; color: var(--color-muted); margin-top: var(--space-4); max-width: 62ch; }
.jb-sec--ink .jb-sec__lead { color: var(--jb-on-ink-dim); }

/* ---------- Prosa ---------- */
.jb-prose { max-width: 68ch; }
.jb-prose p { margin-top: var(--space-4); font-size: var(--jb-fs-body-l); line-height: 1.7; color: var(--color-muted); }
.jb-prose h2 { margin-top: var(--space-6); }
.jb-prose h3 { margin-top: var(--space-6); font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; color: var(--color-black); }
.jb-prose ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.jb-prose li { position: relative; padding-left: var(--space-5); font-size: var(--jb-fs-body); line-height: 1.6; color: var(--color-black); }
.jb-prose li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 999px; background: var(--color-primary); }

/* ---------- Karten (Merkmale, Kontaktwege) ----------
   Ohne Schatten und ohne Hebe-Hover: Haarlinie, ruhige Flaeche, beim Hover
   zieht die Kante an und die Form strafft sich — wie ueberall sonst. */
.jb-cards { display: grid; gap: var(--space-4); margin-top: var(--space-6); grid-template-columns: 1fr; }
.jb-card2 {
  padding: var(--space-5); border: 1px solid var(--border-subtle);
  border-radius: var(--jb-radius-card); background: var(--color-surface);
  transition: border-color var(--transition-base), background var(--transition-base), border-radius var(--jb-hover-dur) var(--jb-hover-ease);
}
.jb-card2__ico { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; background: var(--jb-tint); color: var(--color-primary); }
.jb-card2 h3 { font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: var(--space-4) 0 0; color: var(--color-black); }
.jb-card2 p { color: var(--color-muted); margin-top: var(--space-3); line-height: 1.65; font-size: var(--jb-fs-body); }
.jb-sec--ink .jb-card2 { background: var(--jb-on-ink-fill-weak); border-color: var(--jb-on-ink-line); }
.jb-sec--ink .jb-card2 h3 { color: var(--jb-on-ink); }
.jb-sec--ink .jb-card2 p { color: var(--jb-on-ink-dim); }
.jb-sec--ink .jb-card2__ico { background: rgba(255, 255, 255, .1); color: var(--jb-green); }

/* ---------- Pakete ---------- */
/* Die Paket-Bausteine (.jb-pkgs/.jb-pkg*) sind entfallen: /fuer-unternehmen
   bietet keine Stufen mehr an, und niemand sonst nutzte sie. */

/* ---------- Nummerierte Schritte ----------
   Linien statt Kreise: dieselbe Ordnung wie die Schritte auf der Startseite. */
.jb-flow { display: grid; gap: var(--space-5); margin-top: var(--space-6); grid-template-columns: 1fr; }
.jb-flow__step { position: relative; padding-top: var(--space-5); border-top: 1px solid var(--border-field); }
.jb-flow__step h3 { font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 0; color: var(--color-black); }
.jb-flow__step p { color: var(--color-muted); margin-top: var(--space-3); font-size: var(--jb-fs-body); line-height: 1.65; }

/* ---------- FAQ ---------- */
.jb-faq { margin-top: var(--space-5); max-width: 820px; }
.jb-faq__item { border-bottom: 1px solid var(--border-subtle); }
.jb-faq__item:first-child { border-top: 1px solid var(--border-subtle); }
.jb-faq__item > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4);
  align-items: center; padding: var(--space-5) 0;
  font-family: var(--font-display); font-size: var(--jb-fs-m); font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
  color: var(--color-black); transition: color var(--transition-fast);
}
.jb-faq__item > summary:hover { color: var(--color-primary); }
.jb-faq__item > summary::-webkit-details-marker { display: none; }
.jb-faq__item > summary::after { content: '+'; font-size: var(--jb-fs-m); font-weight: 400; color: var(--color-primary); line-height: 1; flex: none; }
.jb-faq__item[open] > summary::after { content: '\2212'; }
.jb-faq__item p { color: var(--color-muted); line-height: 1.7; font-size: var(--jb-fs-body); padding-bottom: var(--space-5); margin: 0; max-width: 68ch; }

/* ---------- Abschluss-Band ----------
   Hiess frueher .jb-band — genau wie das Laufband unter der Bildbuehne. Die
   Marquee-Regeln (gruene Flaeche, overflow:hidden) schlugen dadurch auf jedes
   CTA-Band durch. */
.jb-cta { text-align: left; }
.jb-cta h2 { max-width: 20ch; }
.jb-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---------- Chips ---------- */
.jb-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.jb-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full); border: 1px solid var(--border-field); color: var(--color-black);
  font-size: var(--jb-fs-small); font-weight: var(--weight-semibold);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
a.jb-tag:hover { border-color: var(--color-primary); background: var(--jb-tint); text-decoration: none; }
.jb-sec--ink .jb-tag { border-color: var(--jb-on-ink-line); color: var(--jb-on-ink); }

@media (min-width: 640px) {
  .jb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .jb-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jb-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* global (auch außerhalb index.astro genutzt) */
a.jb-card2 { color: inherit; display: flex; flex-direction: column; }
a.jb-card2:hover { text-decoration: none; border-color: var(--border-field); background: var(--jb-tint); border-radius: var(--jb-corner-hover); }

/* on-ink Buttons als ELEMENT-Modifier (DS kennt nur den Nachfahren-Selektor
   `.on-ink .btn`; wir setzen on-ink direkt am Button → hier nachrüsten,
   sonst sind Buttons auf dunklen Sektionen unsichtbar). */
.btn--primary.on-ink { background: var(--jb-on-ink); border-color: var(--jb-on-ink); color: var(--jb-ink); }
.btn--primary.on-ink:hover { background: #eef1ef; border-color: #eef1ef; }
.btn--secondary.on-ink { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--jb-on-ink); }
.btn--secondary.on-ink:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }

/* Arbeitgeber-Bewertungen (client-injiziert aus ratings.php). */
.jb-ratings__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.jb-rating { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--jb-radius-card); background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition-base), border-radius var(--jb-hover-dur) var(--jb-hover-ease); }
.jb-rating:hover { text-decoration: none; border-color: var(--color-primary); border-radius: var(--jb-corner-hover); }
.jb-rating__stars { color: var(--jb-orange); letter-spacing: 2px; font-size: var(--text-sm); }
.jb-rating__val { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--color-black); line-height: 1; }
.jb-rating__max { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.jb-rating__src { font-size: var(--text-xs); color: var(--color-muted); }
.jb-ratings__stand { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-muted); }