/* JobLix: Bausteine, die design/components/bundle.css nicht hat, im selben Stil (packages/ui).
   Farben, Abstände, Radien, Schatten, Größen und Zeiten nur als Variablen aus tokens.css. Die wenigen Maße ohne
   Token stammen aus dem Designsystem selbst: die Grenze 600px für das Handy aus bundle.css, die Breite 760px aus
   den Vorschauen der Komponenten, das Logo mit 28px im Kopf am Handy aus der Komponente Logo und die Linie 1,75 der
   Icons aus design/README.md (Icons und Personen). Linien sind 1px wie in bundle.css. */

/* ---------- Hilfen ---------- */
.jx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.jx-icon,
.lucide {
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  stroke-width: 1.75;
}

.jx-scroll-lock {
  overflow: hidden;
}

/* Ansicht als Betrieb (Pflichtenheft zentrale-ui R-ZUI-133): Band oben, darunter ein Fieldset, das alles sperrt und
   selbst keine Fläche hat. */
.jx-ansicht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.jx-nur-lesend {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Reiter-Leiste einer Sammelseite, die der Rahmen über der Seite zeigt (docs/schnittstellen.md, Abschnitt 4). */
.jx-sammel-reiter {
  margin-bottom: var(--space-8);
}

/* ---------- Sprung zum Inhalt ---------- */
.jx-skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 30;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--link);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
}
.jx-skip:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  transform: none;
}

/* ---------- Logo als Link: Fokusring wie an allem, was man bedienen kann ---------- */
.jx-logo:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Kopfleiste: rechter Teil, sicherer Rand oben ---------- */
.jx-header {
  padding-top: env(safe-area-inset-top, 0px);
}
.jx-header-end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.jx-header-nav a,
.jx-header-link {
  white-space: nowrap;
}
.jx-header-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.jx-header-link:hover {
  color: var(--ink);
}
.jx-header-link[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--type-label-weight);
}
.jx-header-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

/* ---------- Euer Ansprechpartner: Leiste unter der Kopfleiste ----------
   Den Block baut der Vertrieb (apps/web/src/portal/vertrieb/ansprechpartner.ts), der Rahmen gibt ihm den Platz im
   Kopf. In der Kopfzeile selbst ist neben Logo, Bereichen und Konto kein Platz: Am Handy blieben bei 360 px noch
   51 px, am Rechner mit fünf Bereichen bei 1024 px keiner (gemessen). Darum steht er als eigene Leiste darunter, auf
   der Fläche surface mit Linie (Glas tragen nur Kopfleiste und Leiste unten) und so hoch wie ein Tippziel. */
.jx-ansprechpartner {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--size-touch);
  padding: 0 var(--space-6);
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
}
.jx-ansprechpartner p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
.jx-ansprechpartner-rolle,
.jx-ansprechpartner-trenner {
  color: var(--ink-muted);
}
/* Ein langer Name kürzt sich mit „…“; die Nummer steht immer ganz (R-PUI-069). */
.jx-ansprechpartner-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--type-label-weight);
}
.jx-ansprechpartner a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: var(--size-touch);
  color: var(--link);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.jx-ansprechpartner a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}
.jx-ansprechpartner-mail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
/* Die Leiste liegt im Außenabstand der Kopfleiste; so rückt der Inhalt ohne eigene Regel für main nach unten. */
.jx-header:has(.jx-ansprechpartner) {
  margin-bottom: var(--size-touch);
}
@media (max-width: 600px) {
  .jx-ansprechpartner {
    display: none;
  }
  .jx-header:has(.jx-ansprechpartner) {
    margin-bottom: 0;
  }
}

/* ---------- Seitenrahmen ---------- */
.jx-main {
  box-sizing: border-box;
  padding: var(--space-8) var(--space-12) var(--space-12);
}
.jx-main:focus {
  outline: 0;
}
.jx-page {
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}
.jx-page-narrow {
  max-width: 760px;
  margin: 0 auto;
}
.jx-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.jx-page-title {
  margin: 0;
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--type-title-weight);
  overflow-wrap: anywhere;
}
.jx-page-title:focus {
  outline: 0;
}
.jx-page-lead {
  margin: 0;
  color: var(--ink-muted);
}
.jx-section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}
.jx-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
/* Seite, Abschnitt, Karte und Feld sind Raster; ohne das nähmen ihre Kinder die Breite ihres Inhalts mit, und ein
   breites Feld oder eine Auswahl machte die Spalte breiter als das Handy (Durchgang am Handy, Konto & Team: 364 statt
   360 px). Lange Wörter in Karten, etwa ein Link in einer Nachricht, brechen um (Reiter Nachrichten: 1013 px). */
.jx-page > *,
.jx-section > *,
.jx-card > *,
.jx-field > * {
  min-width: 0;
}
.jx-card-body {
  overflow-wrap: anywhere;
}
.jx-section-title {
  margin: 0;
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  font-weight: var(--type-heading-weight);
}
.jx-text {
  margin: 0;
}
.jx-muted {
  margin: 0;
  color: var(--ink-muted);
}
.jx-code-text {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  line-height: var(--type-code-line);
  overflow-wrap: anywhere;
}
.jx-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  border-radius: var(--radius-sm);
}
.jx-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

/* ---------- Fußzeile ---------- */
.jx-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-8) var(--space-12);
  color: var(--ink-muted);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  box-shadow: inset 0 1px 0 var(--line);
}
.jx-footer p {
  margin: 0;
}
.jx-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Button: gesperrt mit Grund ----------
   Gesperrt bleibt der Button mit aria-disabled erreichbar, damit Screenreader den Grund vorlesen. bundle.css setzt
   den Hover nur bei :disabled zurück, und bei aria-disabled nimmt es den Schatten weg, damit auch den Fokusring.
   Hier gilt das Designsystem: kein Hover, Fokusring nie entfernen. */
.jx-btn-primary[aria-disabled="true"]:hover {
  background: var(--brand);
}
.jx-btn-secondary[aria-disabled="true"]:hover {
  background: var(--surface-alt);
}
.jx-btn-plain[aria-disabled="true"]:hover {
  background: transparent;
}
.jx-btn[aria-disabled="true"]:focus-visible {
  box-shadow: var(--focus-ring);
}
.jx-btn-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.jx-disabled-reason {
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  color: var(--ink-muted);
}

/* ---------- Formular: Ergänzungen ---------- */
.jx-field-wide {
  max-width: none;
}
.jx-field-optional {
  font-weight: var(--type-body-weight);
  color: var(--ink-muted);
}
.jx-choices {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.jx-choices legend {
  padding: 0;
  margin-bottom: var(--space-2);
}
.jx-code {
  max-width: calc(var(--space-16) * 3);
  font-family: var(--font-mono);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.jx-form {
  display: grid;
  gap: var(--space-6);
}
.jx-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Tabelle: sortierbare Spalte ---------- */
.jx-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.jx-sort:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

/* ---------- Karte als Link, Kacheln ---------- */
.jx-card-link {
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}
.jx-card-link:hover {
  box-shadow: var(--shadow-md);
}
.jx-card-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}
.jx-card-link[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: none;
}
/* ---------- Karte: lange Wörter im Titel, Felder so schmal wie ihre Spalte ----------
   Wie bei der Liste: Neben dem Label hielt ein Wort wie „Vorstellungsgespräch“ die Karte breiter als das Handy, und die
   Seite ließ sich seitlich schieben (Durchgang am Handy, Kalender des Portals: 453 statt 360 px). Ein Feld hat von sich
   aus die Breite von 20 Zeichen; als Teil einer Spalte darf es schmaler werden (Durchgang am Handy, Konto & Team). */
.jx-card-title {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.jx-input {
  min-width: 0;
}

/* Gesperrt: 45 % Deckkraft für Titel und Text (Designsystem, Zustände). Voll lesbar bleiben der Grund daneben und
   das Label, denn es sagt den Stand, etwa den Punkt aus dem Systemstatus (Pflichtenheft zentrale-ui R-ZUI-469). */
.jx-card-link[aria-disabled="true"] .jx-card-title,
.jx-card-link[aria-disabled="true"] .jx-card-meta,
.jx-card-link[aria-disabled="true"] .jx-card-body {
  opacity: 0.45;
}
.jx-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-16) * 4)), 1fr));
  gap: var(--space-4);
}
.jx-tiles > .jx-card {
  align-content: start;
}
/* Dichte Kacheln: kleiner und in mehr Spalten, damit eine Seite voller Kacheln auf dem Rechner ohne Scrollen passt
   (Startseite fürs Team, Pflichtenheft analytics R-ANA-304); am Handy bleibt es eine Liste untereinander. */
.jx-tiles-dicht {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--space-16) * 3)), 1fr));
  gap: var(--space-3);
}
.jx-tiles-dicht > .jx-card {
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}
.jx-tiles-dicht > .jx-card .jx-card-title {
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
}
.jx-tiles-dicht > .jx-card .jx-card-body {
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
}
/* Eine Seite aus Abschnitten mit dichten Kacheln rückt Abschnitte und Überschriften enger zusammen. */
.jx-page:has(> .jx-section > .jx-tiles-dicht) {
  gap: var(--space-4);
}
.jx-section:has(> .jx-tiles-dicht) {
  gap: var(--space-2);
}

/* ---------- Label mit Symbol ----------
   Ein Zustand trägt Symbol, Wort und Farbe (Systemplan 22, Nie nur Farbe): das Icon steht vor dem Wort, so hoch wie
   die Schrift des Labels, mit dem kleinsten Abstand. */
.jx-label .jx-icon {
  width: var(--space-4);
  height: var(--space-4);
  margin-right: var(--space-1);
}

/* ---------- Liste: lange Wörter im Titel ----------
   Neben einem Label bleibt am Handy wenig Platz. Ein langes Wort wie „Gesprächszeiten“ bricht dann mit Trennstrich
   um, statt unter das Label zu laufen (belegt im Durchgang am Handy, Stellenseite des Portals). */
.jx-list-title {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ---------- Reiter ---------- */
.jx-tabs {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--line);
}
.jx-tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control);
  color: var(--ink-muted);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--duration-fast) var(--ease-standard);
}
.jx-tabs a:hover {
  color: var(--ink);
}
.jx-tabs a[aria-current="page"] {
  color: var(--link);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.jx-tabs a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.jx-tabs-count {
  font-weight: var(--type-small-weight);
}

/* ---------- Avatar ---------- */
.jx-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size-control);
  height: var(--size-control);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--brand-soft);
  color: var(--link);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
}
.jx-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jx-avatar-small {
  width: var(--space-8);
  height: var(--space-8);
  font-size: var(--type-small-size);
}
/* Das Logo eines Betriebs steht ganz im Kreis, auf der Fläche statt auf brand-soft (zentrale-ui R-ZUI-431). */
.jx-avatar-logo {
  background: var(--surface);
}
.jx-avatar-logo img {
  object-fit: contain;
}
/* Eine Karte mit Person oder Betrieb: Foto, Logo oder Initialen vor dem Titel. */
.jx-card-who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---------- Segmentschalter ---------- */
.jx-segmented {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.jx-segmented legend {
  padding: 0;
  margin-bottom: var(--space-2);
}
.jx-segmented-options {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  justify-self: start;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-alt);
}
.jx-segmented-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--size-control) - 2 * var(--space-1));
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  color: var(--ink);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.jx-segmented-options input:checked + label {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.jx-segmented-options input:focus-visible + label {
  box-shadow: var(--focus-ring);
}
/* Eine gesperrte Option steht ausgegraut da wie ein gesperrter Button (design/components/bundle.css); ihren Grund
   nennt der Text daneben. */
.jx-segmented-options input:disabled + label {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Statusmeldung ---------- */
/* Die leere Live-Region bleibt im Dokument, damit Screenreader neue Meldungen hören, nimmt aber keinen Platz ein. */
.jx-live:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.jx-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--ink);
}
.jx-notice p {
  margin: 0;
}
.jx-notice-info .jx-icon {
  color: var(--link);
}
.jx-notice-success {
  background: var(--success-soft);
  color: var(--success);
}
.jx-notice-warning {
  background: var(--warning-soft);
  color: var(--warning);
}
.jx-notice-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ---------- Leere Ansicht ---------- */
.jx-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
}
.jx-empty-art {
  width: 100%;
  max-width: calc(var(--space-16) * 4);
}
.jx-empty-art svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Eine Szene aus @joblix/scenes auf einer Seite: so breit wie der Platz, wie das Bild im leeren Zustand, aber nie
   größer als zehn große Abstände, damit eine hohe Karte nicht die Seite füllt. */
.jx-scene {
  max-width: calc(var(--space-16) * 10);
}
.jx-scene svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(var(--space-16) * 10);
}
/* Das Logo eines Betriebs in seiner Form, nie rund wie eine Person (Designsystem, Icons und Personen). */
.jx-logo-betrieb {
  display: block;
  max-height: var(--space-12);
  max-width: calc(var(--space-16) * 3);
}
/* Ein kleines Standbild, etwa je Stelle in der Übersicht (Systemplan 22, Stelle: Baustelle). */
.jx-scene-klein {
  max-width: calc(var(--space-16) * 3);
}
/* Eine Szene und ihr Umschalter in einer Zeile: Das Bild nimmt den Platz, der Knopf steht unten rechts daneben. Eine
   eigene Zeile für den Knopf schob am Handy die ersten Kandidaten aus dem Bild (Systemplan 22, Stelle: Baustelle). */
.jx-szene-zeile {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--space-16) * 10)) auto;
  justify-content: start;
  align-items: end;
  gap: var(--space-4);
}
/* Die Baustelle mit ihrem Umschalter und darunter dasselbe Ziel als Text (Pflichtenheft portal-ui R-PUI-114): ein
   Block, enger als zwischen Abschnitten. */
.jx-szene-block {
  display: grid;
  gap: var(--space-4);
}
.jx-szene-ziel {
  margin: 0;
}
/* Am Handy bleibt eine Szene über einer Arbeitsliste schmal, damit die ersten Zeilen ohne Scrollen zu sehen sind; das
   Ziel darunter bleibt eine Zeile und kürzt sich mit „…“, der Link führt dorthin (R-PUI-116). */
@media (max-width: 600px) {
  .jx-scene-schmal svg {
    max-height: calc(var(--space-16) * 2);
  }
  .jx-szene-ziel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* Ruhige Bewegung in Szenen (Systemplan 22): Die dringendste Aktion pulsiert so oft, wie die Szene am Ring sagt
   (szenen.leuchten_pulse), danach bleibt der Ring still. Momente bewegen nur durch Verschieben und Einblenden.
   Die Dauern prüft ein Test gegen szenen.moment_max_ms und szenen.bewegung_max_s. */
.jx-scene {
  --jx-puls-dauer: calc(var(--duration-base) * 4);
  --jx-moment-dauer: calc(var(--duration-base) * 5);
}
.jx-scene .jx-leuchten {
  animation: jx-puls var(--jx-puls-dauer) var(--ease-standard);
}
.jx-scene .jx-moment-einblenden {
  animation: jx-einblenden var(--jx-moment-dauer) var(--ease-standard) both;
}
.jx-scene .jx-moment-heben {
  animation: jx-heben var(--jx-moment-dauer) var(--ease-standard) both;
}
.jx-scene .jx-moment-senken {
  animation: jx-senken var(--jx-moment-dauer) var(--ease-standard) both;
}
/* Wer ausscheidet, geht auf der Stufenstraße seitlich ab und blendet aus (Pflichtenheft zentrale-ui R-ZUI-090). */
.jx-scene .jx-moment-abgehen {
  animation: jx-abgehen var(--jx-moment-dauer) var(--ease-standard) both;
}
@keyframes jx-puls {
  50% {
    opacity: 0.2;
  }
}
@keyframes jx-einblenden {
  from {
    opacity: 0;
  }
}
@keyframes jx-heben {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }
}
@keyframes jx-senken {
  from {
    transform: translateY(calc(var(--space-4) * -1));
  }
}
@keyframes jx-abgehen {
  to {
    opacity: 0;
    transform: translateX(var(--space-8));
  }
}
/* Im Hintergrund pausiert die Bewegung einer Szene (Systemplan 22, Schnell auf jedem Handy; R-PUI-127): Die Seite setzt
   data-pausiert, solange der Tab verdeckt ist; zurück im Vordergrund läuft sie weiter. */
.jx-scene[data-pausiert] * {
  animation-play-state: paused;
}
/* Weniger Bewegung am Gerät: nichts bewegt sich (R-PUI-124). Den Schalter im Profil setzt die Seite um: Sie gibt
   der Szene pulse 0 und zeigt Momente nur als Text. */
@media (prefers-reduced-motion: reduce) {
  .jx-scene .jx-leuchten,
  .jx-scene .jx-moment-einblenden,
  .jx-scene .jx-moment-heben,
  .jx-scene .jx-moment-senken,
  .jx-scene .jx-moment-abgehen {
    transition: none;
    animation: none;
  }
  /* Ohne Bewegung steht keine Figur still neben der Straße, als wäre sie noch da. */
  .jx-scene .jx-moment-abgehen {
    display: none;
  }
}
/* Das Vollbild fürs Büro zeigt die Straße so groß wie der Platz (Systemplan 22, Vollbild fürs Büro). */
.jx-vollbild .jx-scene,
.jx-vollbild .jx-scene svg {
  max-width: none;
  max-height: none;
}
.jx-empty-title {
  margin: 0;
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  font-weight: var(--type-heading-weight);
}
.jx-empty-text {
  margin: 0;
  color: var(--ink-muted);
}

/* ---------- Dialog über der Seite ---------- */
.jx-backdrop-fixed {
  position: fixed;
  inset: 0;
  z-index: 20;
  animation: jx-fade-in var(--duration-base) var(--ease-standard);
}
/* Ein langer Dialog scrollt in sich, statt über den Bildschirm hinauszuragen; sonst lägen Felder und Knöpfe unten
   außer Reichweite (Eingriffe der Zentrale: „Entscheidung eintragen“ mit Absagegrund). */
.jx-backdrop-fixed .jx-dialog {
  max-height: calc(100dvh - 2 * var(--space-6));
  overflow-y: auto;
  animation: jx-rise-in var(--duration-base) var(--ease-standard);
}
@media (max-width: 600px) {
  .jx-backdrop-fixed .jx-dialog {
    max-height: 100dvh;
  }
}
/* Felder und gestapelte Knöpfe im Dialog stehen wie im Formular space-6 auseinander (Designsystem, Abstände); sonst
   klebte die Beschriftung am Feld darüber (Durchgang durch das Portal, „Vertrag melden“). */
.jx-dialog-body {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-4);
  text-align: left;
}
@keyframes jx-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes jx-rise-in {
  from {
    transform: translateY(var(--space-4));
  }
  to {
    transform: none;
  }
}

/* ---------- Menü (etwa am Konto in der Kopfleiste) ---------- */
.jx-account {
  position: relative;
}
.jx-account-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--size-control);
  padding: 0 var(--space-2) 0 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--type-label-weight);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.jx-account-button:hover {
  background: var(--surface-alt);
}
.jx-account-button:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}
.jx-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 15;
  display: grid;
  gap: var(--space-2);
  box-sizing: border-box;
  min-width: calc(var(--space-16) * 4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.jx-menu[hidden] {
  display: none;
}
.jx-menu p {
  margin: 0;
}

/* Am Handy steht der Ansprechpartner als Knopf in der Kopfleiste (ContactMenu), ein Tipp zeigt Name, Nummer und
   E-Mail. Die eigene Zeile schob die ersten Kandidaten der Stelle aus dem Bild (Pflichtenheft portal-ui R-PUI-116);
   der Knopf ist nicht breiter als der Avatar, so passt er in die 51 px, die in der Kopfleiste frei sind. */
.jx-contact {
  display: none;
}
.jx-contact .jx-account-button {
  position: relative;
}
/* Das Telefon liegt als kleines Zeichen auf dem Avatar und unterscheidet ihn vom eigenen Konto daneben. */
.jx-contact .jx-account-button .jx-icon {
  position: absolute;
  right: 0;
  bottom: var(--space-1);
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--link);
}
@media (max-width: 600px) {
  .jx-contact {
    display: block;
  }
}

/* ---------- Leiste unten am Handy (Glas) ---------- */
.jx-tabbar {
  display: none;
}

/* ---------- Schmal: die Bereiche unten statt in der Kopfleiste ----------
   Fünf Bereiche als Wörter brauchen in der Kopfleiste rund 900px (gemessen am Kundenportal mit „Verlauf“ und
   Konto); darunter stehen sie unten wie am Handy. Die Grenze 1024px ist ein Vorschlag, das Designsystem nennt nur
   600px für das Handy. */
@media (max-width: 1023px) {
  .jx-header-nav {
    display: none;
  }
  /* Schmal steht am Konto nur der Avatar; der Name bleibt für Screenreader der Name des Knopfs. */
  .jx-account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .jx-has-tabbar .jx-main {
    padding-bottom: calc(var(--size-touch) + var(--space-12) + env(safe-area-inset-bottom, 0px));
  }
  /* Mit Fuß hält der Fuß den Abstand zur Leiste unten, nicht der Inhalt (Bewerberkonto, R-KUI-074). */
  .jx-has-tabbar:has(> .jx-footer) .jx-main {
    padding-bottom: var(--space-8);
  }
  .jx-has-tabbar > .jx-footer {
    padding-bottom: calc(var(--size-touch) + var(--space-12) + env(safe-area-inset-bottom, 0px));
  }
  .jx-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 0 var(--space-2) env(safe-area-inset-bottom, 0px);
    background: var(--material);
    -webkit-backdrop-filter: var(--blur-material);
    backdrop-filter: var(--blur-material);
    box-shadow: inset 0 1px 0 var(--line);
  }
  .jx-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: var(--size-touch);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .jx-tabbar a[aria-current="page"] {
    color: var(--link);
  }
  .jx-tabbar a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--focus-ring);
  }
}

/* ---------- Handy: Rand space-4, Tippziele size-touch ---------- */
@media (max-width: 600px) {
  /* Ein kompakter Kopf: Die Unterzeile gehört zum Titel, die Reiter einer Sammelseite rücken an die Seite. So stehen
     an der Stelle die ersten Kandidaten ohne Scrollen im Bild (Pflichtenheft portal-ui R-PUI-116). */
  .jx-page > .jx-page-lead {
    margin-top: calc(var(--space-2) - var(--space-8));
  }
  .jx-sammel-reiter {
    margin-bottom: var(--space-4);
  }
  .jx-header .jx-logo {
    --logo-h: 28px;
  }
  .jx-main {
    padding: var(--space-6) var(--space-4) var(--space-8);
  }
  .jx-has-tabbar .jx-main {
    padding-bottom: calc(var(--size-touch) + var(--space-12) + env(safe-area-inset-bottom, 0px));
  }
  .jx-has-tabbar:has(> .jx-footer) .jx-main {
    padding-bottom: var(--space-6);
  }
  .jx-footer {
    padding: var(--space-6) var(--space-4);
  }
  .jx-has-tabbar > .jx-footer {
    padding-bottom: calc(var(--size-touch) + var(--space-12) + env(safe-area-inset-bottom, 0px));
  }
  .jx-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-touch);
  }
  /* Kein Tippziel ist kleiner (Designsystem, Flächen): auch Logo, Links der Kopfleiste und Sortierknöpfe nicht.
     Das Bild des Logos bleibt 28px hoch, nur die Fläche zum Tippen wächst. */
  .jx-btn,
  .jx-account-button,
  .jx-tabs a,
  a.jx-logo,
  .jx-header-link,
  .jx-sort,
  .jx-input:not(.jx-textarea) {
    min-height: var(--size-touch);
  }
  .jx-btn {
    height: var(--size-touch);
  }
  .jx-check {
    min-height: var(--size-touch);
  }
  .jx-segmented-options label {
    min-height: var(--size-touch);
  }
}

/* ---------- Weniger Bewegung: dann bewegt sich nichts (Designsystem, Zustände und Bewegung) ----------
   Jeder Baustein mit Übergang oder Animation steht hier; ein Test prüft das. */
@media (prefers-reduced-motion: reduce) {
  .jx-card-link,
  .jx-tabs a,
  .jx-segmented-options label,
  .jx-account-button,
  .jx-backdrop-fixed,
  .jx-backdrop-fixed .jx-dialog {
    transition: none;
    animation: none;
  }
}

/* ---------- Beträge ----------
   Gleich breite Ziffern auch außerhalb von Tabellen, etwa in einem Titel; in Tabellen steht `num` zudem rechts
   (bundle.css). DS · Schrift; konto-website-ui R-KUI-022; portal-ui R-PUI-018 (Zähler, Zahlenleiste). */
.num {
  font-variant-numeric: tabular-nums;
}

/* ---------- Chat im Bewerberkonto ---------- */
/* Nachrichten von Bot und Team stehen links, eigene rechts (konto-website-ui R-KUI-196): je Blase der Abstand zur
   anderen Seite, wie in WhatsApp. */
.jx-chat-andere {
  margin-inline-end: var(--space-12);
}
.jx-chat-eigene {
  margin-inline-start: var(--space-12);
}
/* Eine lange Adresse in einer Nachricht bricht um, statt die Blase am Handy zu sprengen (R-KUI-201). */
.jx-chat-andere .jx-text,
.jx-chat-eigene .jx-text {
  overflow-wrap: anywhere;
}

/* ---------- Startseite fürs Team: alles auf einen Blick ----------
   Am Rechner passt die ganze Seite ohne Scrollen (Systemplan 01, Startseite fürs Team; Pflichtenheft zentrale-ui
   R-ZUI-381; gemessen: mit den üblichen Karten 1.467 px hoch bei 768 px Fenster). Darum kleinere Kacheln in mehr
   Spalten; am Handy bleibt es eine Liste wie überall. „Am Rechner“ heißt ab 1280 × 800 (Entscheidung des Leads zu
   R-ANA-304, OFFEN.md 20.10.): Mit gesperrten Kacheln und ihrem Grund, wie der Vertrieb sie sieht, war die Seite dort
   916 px hoch (gemessen am 20.10.); darum der schmalere Rand oben und unten, die engeren Abschnitte und der Grund ohne
   den Rand eines Absatzes. Ein langer Schlüssel im Grund bricht um, statt aus der Kachel zu ragen. */
@media (min-width: 1024px) {
  .jx-main:has(.jx-startseite) {
    padding-block: var(--space-4);
  }
  .jx-page:has(> .jx-startseite) {
    gap: var(--space-4);
  }
  .jx-startseite {
    display: grid;
    gap: var(--space-2);
  }
  .jx-startseite .jx-section {
    gap: var(--space-1);
  }
  .jx-startseite .jx-disabled-reason {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .jx-startseite .jx-section-title {
    font-size: var(--type-label-size);
    line-height: var(--type-label-line);
  }
  .jx-startseite .jx-tiles {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-16) * 2.5), 1fr));
    gap: var(--space-2);
  }
  .jx-startseite .jx-card {
    gap: 0;
    padding: var(--space-2) var(--space-3);
  }
  .jx-startseite .jx-card-title {
    font-size: var(--type-label-size);
    line-height: var(--type-label-line);
  }
  .jx-startseite .jx-card-body,
  .jx-startseite .jx-disabled-reason {
    font-size: var(--type-small-size);
    line-height: var(--type-small-line);
  }
}