.bg-jacorange {
  --bg-opacity: 1;
  background-color: #f5a700;
  background-color: rgba(240, 143, 16, var(--bg-opacity));
}

/* Text in der Markenfarbe: Auf Weiss liegt sie bei 2,43:1, gefordert sind 4,5.
   Betroffen sind keine Zierelemente, sondern Werte, die gelesen werden muessen -
   IMEI, Kennzeichen, Schluessel- und Personalnummern in 40 Ansichten. Sie tragen
   deshalb denselben abgedunkelten Ton wie die Textlinks (--jac-link, am 01.09.2026
   genau dafuer eingefuehrt); im Dunkelmodus zeigt der auf den Akzent, dort waren es
   ohnehin 6,7:1. Flaechen und Rahmen (bg-/border-jacorange) bleiben unveraendert -
   der Akzent selbst aendert sich nicht. */
.text-jacorange {
  color: var(--jac-link);
}

/* Statusfarben aus der Tailwind-Zeit. Sie stehen in rund 90 Ansichten fuer
   "faellig", "zurueckgegeben", "unbenutzt", "Pflichtfeld" - also fuer Text, den
   jemand liest, nicht fuer Zierrat. Auf Weiss liegen sie zwischen 2,48 und 3,76:1,
   gefordert sind 4,5. Statt in 90 Ansichten zu suchen, zeigen sie hier auf die
   Haustokens, die genau dafuer da sind - die passen sich im Dunkelmodus mit an,
   eine feste Tailwind-Farbe kann das nicht.

   text-red-600 bleibt unangetastet: 4,83:1, das reicht.
   Gemessen am 10.09.2026 ueber zehn Verwaltungsseiten. */
.text-orange-500 { color: var(--jac-warn); }
.text-emerald-500, .text-emerald-600, .text-green-600 { color: var(--jac-ok); }
.text-red-500 { color: var(--jac-danger); }

.border-jacorange {
  --border-opacity: 1;
  border-color: #f5a700;
  border-color: rgba(240, 143, 16, var(--border-opacity));
}

/* .checkbox-jacorange war der handgebaute Vorlaeufer aus der Tailwind-Zeit - seit
   A-79 gestaltet der Block "Ankreuzfelder und Auswahlknoepfe" weiter unten alle
   Kaestchen einheitlich, das Sonderdesign wuerde ein zweites Haekchen darueberlegen. */

#navmain {
  display: grid;
  grid-template-columns: 15rem auto;
}

/* Mobil + eingeklappt: Icon-Rail (echter Off-Canvas-Drawer folgt separat) */
@media (max-width: 767px) {
  #navmain { grid-template-columns: 3.5rem auto; }
  /* #navmain-Prefix hebt die Spezifitaet ueber die spaeteren Basis-Regeln, damit der
     Auto-Rail sich identisch zum manuellen Rail (body.jac-rail) verhaelt. Die Zaehler-
     Pill wird NICHT ausgeblendet, sondern weiter unten zum Punkt umgeformt (Variante F). */
  #navmain .jac-nav-head, #navmain .jac-nav-label, #navmain .jac-nav-link .jac-chev, #navmain .jac-nav-sub { display: none; }
  #navmain .jac-nav-group-items { grid-template-rows: 1fr !important; }
  #navmain .jac-nav-link { justify-content: center; padding: 9px 0; }
  #navmain .jac-nav-link.active::before { left: 0; }
}

/* Mitarbeiterbox am Telefon: Die Logospalte war mit 12 rem (192 px) breiter als das
   Logo darin (117 px). Rechts blieb dadurch zu wenig uebrig - der Name brach auf zwei
   Zeilen um und der Pfeil des Benutzermenues stand ausserhalb des Bildschirms. Am
   Telefon ist die Spalte deshalb nur so breit, wie das Logo sie braucht; das Logo
   selbst behaelt seine Groesse (flex: none, sonst quetscht die Zeile es schmal). */
@media (max-width: 639px) {
  .jac-topbar .jac-logospalte { width: 8.5rem; }
  .jac-topbar .jac-logospalte img { flex: none; max-width: none; }
}

/* Noch schmalere Geraete - ein iPhone SE hat 320 Pixel, und wer am Android die
   Anzeige vergroessert, landet ebenfalls dort. Dann reicht auch das nicht mehr:
   Das Logo wird kleiner, damit Sprache, Dunkelmodus und Benutzermenue in die
   Zeile passen. */
@media (max-width: 360px) {
  .jac-topbar .jac-logospalte { width: 7rem; }
  .jac-topbar .jac-logospalte img { width: auto; height: 1.6rem; }
}

/* Am Telefon ist der Kasten schmaler als manches deutsche Wort. Im
   Hinweisgeberformular lief bei 320 Pixeln "Lieferkettensorgfaltspflichten-
   gesetz" ueber den Rand, ebenso die Adresse zum Gesetzestext - und weil der
   Kasten nicht mitwaechst, war der Rest schlicht abgeschnitten. Lange Woerter
   brechen dort jetzt um; Adressen an jeder Stelle, weil sie keine Trennstellen
   haben. Auf breiteren Bildschirmen aendert sich nichts. */
@media (max-width: 480px) {
  /* hyphens zuerst: Dann trennt der Browser nach den Regeln der Sprache und setzt
     einen Trennstrich ("Hinweisgeber-formular"). overflow-wrap greift erst, wo das
     nicht geht - sonst braeche eine Ueberschrift mitten im Wort um. Die Sprache
     kommt aus dem lang-Attribut am <html>, das jedes Layout setzt. */
  .jac-content { hyphens: auto; overflow-wrap: break-word; }
  .jac-content a { hyphens: none; overflow-wrap: anywhere; }
}

/* Sidebar per Header-Button einklappen (Rail) */
body.jac-rail #navmain { grid-template-columns: 3.5rem auto; }
body.jac-rail .jac-nav-head,
body.jac-rail .jac-nav-label,
body.jac-rail .jac-nav-link .jac-chev,
body.jac-rail .jac-nav-sub { display: none; }
body.jac-rail .jac-nav { padding: 8px 6px; }
body.jac-rail .jac-nav-group { margin-bottom: 6px; }
body.jac-rail .jac-nav-group-items { grid-template-rows: 1fr !important; }
body.jac-rail .jac-nav-link { justify-content: center; padding: 9px 0; }
body.jac-rail .jac-nav-link.active::before { left: 0; }

/* ===== Rail-Modus: Zaehler-Pill -> dezenter Punkt + Hover-Tooltip (Variante F) =====
   Gilt fuer Auto-Rail (<768px) und manuellen Rail (body.jac-rail). Der rote Punkt zeigt
   "hier ist etwas offen"; der Tooltip (data-tip wird per JS aus Label + Pill gesetzt)
   zeigt beim Ueberfahren Menue-Name + genaue Anzahl. */
.jac-nav-tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #12161a; color: #fff; border: 1px solid #39424c;
  padding: 6px 10px; border-radius: 8px; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: normal;
  z-index: 60; box-shadow: 0 10px 26px rgba(0,0,0,.32); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.jac-nav-tip-n { color: #f5a700; font-weight: 700; }   /* "xx offen" in Marken-Orange */
/* Tooltip nur im Rail beim Hover einblenden (im vollen Menue gibt es die Labels ja) */
@media (max-width: 767px) { #navmain .jac-nav-link:hover .jac-nav-tip { opacity: 1; visibility: visible; } }
body.jac-rail .jac-nav-link:hover .jac-nav-tip { opacity: 1; visibility: visible; }

/* Pill -> Punkt oben-rechts am Icon (Zahl bleibt im DOM fuer den Tooltip, ist aber unsichtbar) */
@media (max-width: 767px) {
  #navmain .jac-nav-pill {
    position: absolute; top: 3px; right: 9px; min-width: 0; width: 9px; height: 9px;
    padding: 0; border-radius: 50%; font-size: 0; color: transparent;
    box-shadow: 0 0 0 2px #22272d;
  }
}
body.jac-rail .jac-nav-pill {
  position: absolute; top: 3px; right: 9px; min-width: 0; width: 9px; height: 9px;
  padding: 0; border-radius: 50%; font-size: 0; color: transparent;
  box-shadow: 0 0 0 2px #22272d;
}

/* Der Tooltip ragt seitlich aus der Zeile; der Akkordeon-Container (.jac-nav-group-inner)
   clippt ihn sonst per overflow:hidden. Im Rail sind die Gruppen ohnehin immer offen,
   daher hier gefahrlos overflow:visible. */
@media (max-width: 767px) { #navmain .jac-nav-group-inner { overflow: visible; } }
body.jac-rail .jac-nav-group-inner { overflow: visible; }

.jacsocial_head { height: 18px; width: 18px; display: block; }

/* Jacobi-Redesign: Navigation in Anthrazit statt gray-600 */
.jac-navbg { background-color: #22272d; }

/* ===== Jacobi-Redesign: Sidebar-Navigation (gruppiert, klickbar) ===== */
.jac-nav { padding: 8px 8px 18px; }
.jac-nav-group { margin-bottom: 2px; }
.jac-nav-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  padding: 12px 10px 5px; margin-top: 2px;
  color: #cdd4dc; opacity: .5;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}
.jac-nav-head:hover { opacity: .85; }
.jac-nav-head .jac-chev { transition: transform .2s ease; opacity: .8; font-size: 16px !important; }
.jac-nav-group.is-collapsed .jac-nav-head .jac-chev { transform: rotate(-90deg); }
.jac-nav-group-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .22s ease; }
.jac-nav-group.is-collapsed .jac-nav-group-items { grid-template-rows: 0fr; }
.jac-nav-group-items > .jac-nav-group-inner { overflow: hidden; min-height: 0; }

/* "Springe zu ..." - die Menuesuche. Waehrend gesucht wird, stehen alle Gruppen offen;
   was nicht passt, faellt weg, samt Gruppenueberschrift. */
.jac-nav-suche { display: flex; align-items: center; gap: 7px; margin: 0 4px 10px;
  padding: 6px 9px; border-radius: 9px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09); }
.jac-nav-suche .ti { font-size: 15px; color: rgba(255,255,255,.55); flex: none; }
.jac-nav-suche input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13px; color: #eef1f4; }
.jac-nav-suche input::placeholder { color: rgba(255,255,255,.45); }
.jac-nav-suche input::-webkit-search-cancel-button { display: none; }
/* Beim Hineinklicken malte der Browser seinen eigenen blauen Rahmen um das Feld
   (Tailwind Forms setzt ihn auf jedes input:focus). Auf der Leiste gehoert er in die
   Hausfarbe - und zwar fest, nicht ueber die Tokens: die Leiste ist in beiden
   Farbmodi dunkel. */
.jac-nav-suche:focus-within { border-color: #f5a700; box-shadow: 0 0 0 3px rgba(245,167,0,.3); }
.jac-nav-suche input:focus { outline: none; border-color: transparent; box-shadow: none; }
.jac-nav-suche-weg { display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.jac-nav-suche-weg:hover { background: rgba(255,255,255,.12); }
.jac-nav-leer { margin: 0 6px 10px; padding: 8px 9px; border-radius: 8px;
  font-size: 12.5px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.04); }
.jac-nav .ist-versteckt { display: none !important; }
.jac-nav.ist-suchend .jac-nav-group-items { grid-template-rows: 1fr !important; }
.jac-nav.ist-suchend .jac-nav-sub { display: block !important; }

/* Auf der eingeklappten Leiste ist fuer ein Suchfeld kein Platz. */
body.jac-rail .jac-nav-suche, body.jac-rail .jac-nav-leer { display: none; }

.jac-nav-item { position: relative; }
.jac-nav-link {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; margin: 1px 0; border-radius: 9px;
  color: #c9d0d8; font-size: 13.5px; font-weight: 500; font-family: inherit; text-align: left;
  position: relative; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; background: transparent; transition: background .13s, color .13s;
}
.jac-nav-link:hover { background: #2f353c; color: #fff; }
.jac-nav-link.active { background: rgba(245,167,0,.15); color: #fff; }
.jac-nav-link.active::before {
  content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px;
  width: 3px; background: #f5a700; border-radius: 0 3px 3px 0;
}
.jac-nav-link .material-symbols-outlined { font-size: 21px !important; width: 22px; opacity: .9; flex: none; }
.jac-nav-link.active .material-symbols-outlined { color: #f5a700; opacity: 1; }
.jac-nav-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.jac-nav-link .jac-chev { transition: transform .2s ease; opacity: .55; font-size: 18px !important; width: 18px; margin-left: 2px; }
.jac-nav-item.is-open > .jac-nav-link .jac-chev { transform: rotate(90deg); }

.jac-nav-pill {
  min-width: 20px; height: 19px; padding: 0 6px; border-radius: 9px;
  /* Weiss auf #e0564b ergab 3.75 - bei 11px fett sind 4.5 noetig (01.09.2026) */
  background: #c84d43; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; flex: none;
}

.jac-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.jac-nav-item.is-open > .jac-nav-sub { grid-template-rows: 1fr; }
.jac-nav-sub-inner { overflow: hidden; min-height: 0; padding-left: 22px; }
.jac-nav-sublink {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; margin: 1px 0; border-radius: 7px;
  color: #aab2bd; font-size: 12.5px; font-weight: 500;
  position: relative; text-decoration: none; white-space: nowrap;
  transition: background .13s, color .13s;
}
.jac-nav-sublink:hover { background: #2f353c; color: #fff; }
.jac-nav-sublink.active { color: #fff; background: rgba(245,167,0,.12); }
.jac-nav-sublink.active::before {
  content: ""; position: absolute; left: -4px; top: 6px; bottom: 6px;
  width: 3px; background: #f5a700; border-radius: 3px;
}
.jac-nav-sublink .jac-nav-pill { margin-left: auto; }

.form-input {
  border-width: 1px;
}

.form-checkbox {
  border-width: 1px;
}

.pt-16 {
  padding-top: 4rem;
}

.top-full { top: 100%; }
.left-full { left: 100%; }

@media (min-width: 1200px) {
  .xl\:pin-none { left: auto; }
}

.group:hover .group-hover\:block {
  display: block;
}


/* The Modal (background) */
.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 80px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  top: -10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.notificationcircle {
  --text-opacity: 1;
  background: #f98080;
  background: rgba(249, 128, 128, var(--text-opacity));
  display: none;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  /* padding: 1px; */
  font-weight: bold;
  color: white;
  text-align: center;
  /* line-height: 1.25rem; */
  box-sizing: content-box;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .notificationcircle {
    display: inline-block;
  }
}

.sub_notificationcircle {
  float: left;
  display: block;
}

.notificationcircle:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
  height: 0;
}
.notificationcircle span {
  display: inline-block;
  vertical-align: middle;
}

.newscontent a {
  text-decoration: underline;
}

.newscontent ul {
  list-style: disc;
  padding: revert;
}

.newscontent ol {
  list-style: decimal;
  padding: revert;
}


.navicon {
  vertical-align: -4px;
  font-size: 20px !important;
  width: 20px;
}

a .material-symbols-outlined,
button .material-symbols-outlined {
  font-size: 17px !important;
}

/* ===== Tabler-Icons (Webfont) – ersetzt Material Symbols ===== */
/* Basisgroesse (entspricht der bisherigen Material-Default-Groesse); */
/* navicon (20px, !important) und a/button (17px) ueberschreiben wie zuvor. */
.ti {
  font-size: 22px;
  line-height: 1;
  vertical-align: -0.15em;
}

a .ti,
button .ti {
  font-size: 17px !important;
}

/* ===== Dashboard (Redesign nach Mockup) ===== */
.jac-dash { text-align: left; max-width: 1240px; margin: 0 auto; padding: 20px 18px 48px; color: #26251f; }
.jac-dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.jac-dash-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 3px; color: #222; }
.jac-dash-sub { margin: 0; color: #7c828b; font-size: 14px; }
.jac-dash-today { color: #8b939c; font-size: 13px; white-space: nowrap; padding-top: 5px; text-transform: capitalize; }

/* Firmenlogo: die Fassung fuer dunklen Grund erscheint nur im Dunkelmodus.
   Beide liegen im Markup, damit der Wechsel ohne Neuladen sitzt. */
.jaclogo-dunkel { display: none !important; }
html[data-theme="dark"] .jaclogo-hell { display: none !important; }
html[data-theme="dark"] .jaclogo-dunkel { display: inline-block !important; }

/* ---------- Aufforderung auf der Uebersicht (Fuehrerscheinkontrolle) ----------
   Soll auffallen, ohne die Seite zu besetzen: ein kraeftiger Streifen an der Kante,
   ein Symbol und eine klare Ansage - der Rest der Uebersicht bleibt sichtbar.
   Vorher war es eine rote Flaeche ueber knapp 500 Pixel Hoehe. */
.jac-aufforderung { position: relative; margin-bottom: 20px; padding: 14px 16px 13px 20px;
  border-radius: 13px; border: 1px solid var(--jac-danger);
  background: var(--jac-danger-soft); overflow: hidden; }
.jac-aufforderung::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--jac-danger); }
.jac-aufforderung-kopf { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.jac-aufforderung-ic { font-size: 26px !important; color: var(--jac-danger); line-height: 1;
  /* Einmal kurz aufmerksam machen - danach Ruhe, kein Dauerblinken */
  animation: jac-aufforderung-puls 1.1s ease-out 2; }
@keyframes jac-aufforderung-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .jac-aufforderung-ic { animation: none; } }
.jac-aufforderung-kopf h2 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--jac-ink); }
.jac-aufforderung-kopf p { margin: 2px 0 0; font-size: 13px; color: var(--jac-muted); }
.jac-aufforderung-felder { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
.jac-aufforderung-tat { display: flex; align-items: flex-end; }
.jac-aufforderung-tat .jac-btn { width: 100%; justify-content: center; }
/* Eingabefelder und Knopf auf eine Linie: von Haus aus sind Dateifeld (44), Textfeld
   (38) und Knopf (34) unterschiedlich hoch und stehen versetzt nebeneinander. */
.jac-aufforderung-felder .jac-ctrl,
.jac-aufforderung-felder .jac-input,
.jac-aufforderung-felder input[type="file"],
.jac-aufforderung-tat .jac-btn { min-height: 44px; }
.jac-aufforderung-fehler { display: block; margin-top: 3px; font-size: 12px;
  font-weight: 700; color: var(--jac-danger); }
/* Solange nichts zu melden ist, darf der Platzhalter die Zeile nicht verschieben */
.jac-aufforderung-fehler:empty { display: none; }
.jac-aufforderung-mehr { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px;
  padding: 0; font: inherit; font-size: 12px; color: var(--jac-muted);
  background: none; border: 0; cursor: pointer; }
.jac-aufforderung-mehr:hover { color: var(--jac-ink); }

/* Hinweisstreifen: dieselbe Bauform wie die Aufforderung darueber, aber ruhiger.

   Die Aufforderung verlangt eine Tat von genau dieser Person, jetzt gleich - deshalb
   dort das pulsende Symbol. Hier geht es um einen Stand, der sich nicht in einer Minute
   abarbeiten laesst; er soll auffallen, aber nicht drängeln. Als ganze Zeile anklickbar,
   damit er auf dem iPad mit Handschuhen zu treffen ist. */
.jac-hinweisstreifen {
    display: flex; align-items: center; gap: 12px;
    position: relative; margin-bottom: 20px; padding: 13px 16px 13px 20px;
    border-radius: 13px; overflow: hidden; text-decoration: none;
    transition: filter .13s;
}
.jac-hinweisstreifen::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
.jac-hinweisstreifen:hover { filter: brightness(.97); }

.jac-hinweisstreifen.ist-kritisch {
    border: 1px solid var(--jac-danger); background: var(--jac-danger-soft);
}
.jac-hinweisstreifen.ist-kritisch::before { background: var(--jac-danger); }
.jac-hinweisstreifen.ist-kritisch .jac-hinweisstreifen-ic { color: var(--jac-danger); }

.jac-hinweisstreifen.ist-warnung {
    border: 1px solid var(--jac-warn); background: var(--jac-warn-soft);
}
.jac-hinweisstreifen.ist-warnung::before { background: var(--jac-warn); }
.jac-hinweisstreifen.ist-warnung .jac-hinweisstreifen-ic { color: var(--jac-warn); }

.jac-hinweisstreifen-ic { font-size: 24px !important; line-height: 1; flex: none; }
.jac-hinweisstreifen-text { flex: 1; min-width: 0; color: var(--jac-ink); font-size: 14.5px; }
.jac-hinweisstreifen-text strong { font-weight: 800; }
.jac-hinweisstreifen-zusatz { display: block; font-size: 13px; color: var(--jac-muted); margin-top: 2px; }
.jac-hinweisstreifen-tat {
    flex: none; display: inline-flex; align-items: center;
    font-size: 13.5px; font-weight: 700; color: var(--jac-accent);
    /* Fingerbedienung: die Trefferflaeche ist die ganze Zeile, aber der Text soll auch
       fuer sich gross genug sein */
    min-height: 44px; padding-left: 8px;
}

/* Auf dem Handy bricht der Knopf unter den Text, sonst wird die Ansage unleserlich eng */
@media (max-width: 560px) {
    .jac-hinweisstreifen { flex-wrap: wrap; }
    .jac-hinweisstreifen-text { flex-basis: calc(100% - 40px); }
    .jac-hinweisstreifen-tat { margin-left: 36px; min-height: 36px; }
}
.jac-aufforderung-mehr .ti-chevron-down { transition: transform .15s; }
.jac-aufforderung-mehr .ti-chevron-down.ist-offen { transform: rotate(180deg); }
/* Der Hinweis nutzt die volle Kastenbreite - mit der frueheren Begrenzung auf 70
   Zeichen stand er als schmale Saeule ueber vier Zeilen im breiten Kasten. */
.jac-aufforderung-infos { margin-top: 5px; font-size: 12px; color: var(--jac-muted); }

/* ---------- Wetter auf der Uebersicht ----------
   Drei Tage rechts neben der Begruessung. Bewusst klein und ohne Farbe: eine
   Randnotiz, kein Zaehler - die Kacheln darunter sollen die Aufmerksamkeit behalten. */
.jac-dash-head-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.jac-wetter { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.jac-wetter-tag { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 62px; padding: 7px 9px 8px; border-radius: 11px;
  background: var(--jac-surface); border: 1px solid var(--jac-border); }
.jac-wetter-wann { font-size: 11px; font-weight: 700; color: var(--jac-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.jac-wetter-symbol { font-size: 20px !important; color: var(--jac-accent); line-height: 1; }
.jac-wetter-grad { font-size: 13px; font-weight: 700; color: var(--jac-ink); font-variant-numeric: tabular-nums; }
.jac-wetter-tief { font-weight: 500; color: var(--jac-muted); margin-left: 3px; }
.jac-wetter-regen { font-size: 10.5px; color: var(--jac-info); display: inline-flex; align-items: center; gap: 2px; }
.jac-wetter-regen .ti { font-size: 11px !important; }
/* Der Ortsname steht als Bildunterschrift unter den Tagen, buendig mit deren
   rechter Kante - dort ist er Beiwerk und draengt sich nicht zwischen die Werte. */
.jac-wetter-ort { align-self: flex-end; margin-top: -4px; font-size: 11px;
  color: var(--jac-muted); text-decoration: none; padding: 0 2px; }
.jac-wetter-ort:hover { color: var(--jac-ink); text-decoration: underline; }
.jac-wetter-quelle { opacity: .75; }

/* Die Tage sind Knoepfe: ein Klick zeigt den Verlauf darunter. */
.jac-wetter-block { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.jac-wetter-tag { cursor: pointer; font: inherit; text-align: center;
  transition: border-color .13s, box-shadow .13s, transform .13s; }
.jac-wetter-tag:hover { border-color: var(--jac-faint); box-shadow: 0 4px 12px -6px rgba(16,24,40,.3); }
.jac-wetter-tag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-wetter-tag.ist-offen { border-color: var(--jac-accent); box-shadow: 0 0 0 1px var(--jac-accent) inset; }

/* Der eigene Raum in derselben Reihe wie das Wetter (A-77).

   Drinnen und draussen sind derselbe Blick - wie ist es gerade. Deshalb dieselbe
   Bauform wie ein Wettertag, nur mit dem Raumnamen statt dem Wochentag und dem
   Zahnrad am Wunsch, weil dies das einzige Feld der Reihe ist, an dem sich etwas
   einstellen laesst. Das Wurzelelement der Livewire-Komponente faellt aus dem
   Layout (display: contents), damit die Felder Geschwister der Wettertage werden
   und in dieselbe Zeile ruecken. Der Einstellungsdialog stoert dort nicht: Er
   erscheint nur im geoeffneten Zustand und liegt fest ueber der Seite. */
.jac-innen { display: contents; }

.jac-innen-tag { border-color: var(--jac-accent); }
.jac-innen-tag .jac-wetter-symbol { color: var(--jac-accent); }
.jac-innen-grad { font-size: 11px; font-weight: 600; color: var(--jac-muted); margin-left: 1px; }
.jac-innen-wunsch {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 10.5px; color: var(--jac-muted); font-variant-numeric: tabular-nums;
}
.jac-innen-wunsch .ti { font-size: 11px !important; }
.jac-innen-tag:hover .jac-innen-wunsch { color: var(--jac-accent); }

/* Auf schmalen Bildschirmen sind es mit dem eigenen Raum vier Felder statt drei - die
   reissen die Zeile, und das vierte stand allein und linksbuendig darunter, als waere
   etwas verrutscht. Als Raster fuellen sie die Breite und brechen gleichmaessig um. */
@media (max-width: 620px) {
    /* Der Kopfbereich schrumpft sonst auf Inhaltsbreite, und das Raster darin hat
       dann nur noch eine Spalte */
    .jac-dash-head { flex-direction: column; }
    .jac-dash-head-rechts { align-self: stretch; width: 100%; }
    .jac-wetter-block { align-items: stretch; width: 100%; }
    .jac-wetter {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
        width: 100%;
    }
    .jac-wetter-tag { min-width: 0; padding-left: 4px; padding-right: 4px; }
    .jac-innen-tag .jac-wetter-wann {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
    }
}

/* Verlauf: alle drei Stunden ein Wert - Temperatur, Regen, Wind untereinander */
.jac-wetter-verlauf { width: 100%; max-width: 420px; padding: 10px 12px 11px; border-radius: 11px;
  background: var(--jac-surface); border: 1px solid var(--jac-border); }
.jac-wetter-verlauf-kopf { font-size: 11.5px; font-weight: 700; color: var(--jac-ink);
  margin-bottom: 7px; text-align: left; }
.jac-wetter-boeen { color: var(--jac-warn); font-weight: 600; }
.jac-wetter-boeen .ti { font-size: 12px !important; vertical-align: -1px; }
.jac-wetter-tabelle { width: 100%; border-collapse: collapse; font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.jac-wetter-tabelle th { font-weight: 600; color: var(--jac-muted); text-align: center; padding: 1px 2px; }
.jac-wetter-tabelle td { text-align: center; padding: 2px; color: var(--jac-ink); }
.jac-wetter-tabelle td:first-child, .jac-wetter-tabelle th:first-child { width: 20px; text-align: left; }
.jac-wetter-tabelle td:first-child .ti { font-size: 14px !important; color: var(--jac-muted); }
.jac-wetter-z-grad { font-weight: 700; }
.jac-wetter-z-nass { color: var(--jac-info); font-weight: 700; }
.jac-wetter-z-windig { color: var(--jac-warn); font-weight: 700; }

/* Amtliche Warnung: faellt auf, ohne zu schreien - erst der Titel, der Text auf Klick */
.jac-wetter-warnung { width: 100%; max-width: 420px; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--jac-warn); background: var(--jac-warn-soft); }
.jac-wetter-warnung.stufe-3, .jac-wetter-warnung.stufe-4 {
  border-color: var(--jac-danger); background: var(--jac-danger-soft); }
.jac-wetter-warnkopf { display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 700; text-align: left;
  color: var(--jac-warn); background: transparent; border: 0; cursor: pointer; }
.jac-wetter-warnung.stufe-3 .jac-wetter-warnkopf, .jac-wetter-warnung.stufe-4 .jac-wetter-warnkopf { color: var(--jac-danger); }
.jac-wetter-warnkopf .jac-wetter-pfeil { margin-left: auto; transition: transform .15s; }
.jac-wetter-warnkopf .jac-wetter-pfeil.ist-offen { transform: rotate(180deg); }
.jac-wetter-warntext { padding: 0 10px 9px; font-size: 11.5px; color: var(--jac-ink); text-align: left; }
.jac-wetter-warntext p { margin: 0 0 5px; white-space: pre-line; }
.jac-wetter-warnzeit { font-weight: 700; margin-bottom: 4px; }
.jac-wetter-warnhinweis { color: var(--jac-muted); }
@media (max-width: 700px) { .jac-dash-head-rechts { align-items: flex-start; } .jac-wetter { justify-content: flex-start; } }

.jac-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 13px; margin-bottom: 22px; }
.jac-tile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e8ea; border-radius: 13px; padding: 15px 16px 16px; overflow: hidden; text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.jac-tile:hover { box-shadow: 0 8px 22px -10px rgba(20,28,38,.28); border-color: #d7dbe0; transform: translateY(-1px); }
.jac-tile-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.jac-tile-ic { font-size: 21px !important; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; margin-bottom: 9px; }
.jac-tile-num { font-size: 26px; font-weight: 800; color: #222; line-height: 1; font-variant-numeric: tabular-nums; }
.jac-tile-label { font-size: 12.5px; color: #7c828b; margin-top: 2px; }
/* Die zweite Zeile einer Kennzahl: was nicht draengt, aber dazugehoert
   ("143 ueberfaellig" gross, "1.459 weitere in drei Monaten" klein). */
.jac-tile-zusatz { font-size: 11.5px; color: #9aa1a9; margin-top: 5px; }
.jac-tile.crit .jac-tile-stripe { background: #d1483f; } .jac-tile.crit .jac-tile-ic { background: #fbe4e2; color: #9a2b24; }
.jac-tile.warn .jac-tile-stripe { background: #c98713; } .jac-tile.warn .jac-tile-ic { background: #fbeed4; color: #8a5c07; }
.jac-tile.good .jac-tile-stripe { background: #2f9e5f; } .jac-tile.good .jac-tile-ic { background: #e4f3ea; color: #1c6b3e; }
.jac-tile.info .jac-tile-stripe { background: #3f74c9; } .jac-tile.info .jac-tile-ic { background: #e6eefb; color: #2f5aa6; }

/* ===== "Das erledigen nur Sie" =====
   Die Uebersicht mischte in einer Kachelreihe, was liegen bleibt, wenn man selbst
   nichts tut (Arbeitsscheine, Urlaubsantraege), mit dem, was nur zur Kenntnis ist
   (Nachrichten, Geburtstage). Die eigenen Aufgaben stehen jetzt ganz oben in einer
   eigenen Karte - als Liste, weil man eine Liste abarbeitet, nicht ein Raster. */
.jac-aufgaben { background: #fff; border: 1px solid #e6e8ea; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,28,38,.05), 0 6px 16px -10px rgba(20,28,38,.14);
  overflow: hidden; margin-bottom: 22px; }
.jac-aufgaben-kopf { display: flex; align-items: center; gap: 9px; padding: 13px 16px;
  border-bottom: 1px solid #eef0f2; font-size: 15px; font-weight: 700; color: #2c2f34; }
.jac-aufgaben-kopf .ti { font-size: 19px !important; color: #8a9099; }
.jac-aufgabe { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #f1f3f5; text-decoration: none; color: inherit;
  transition: background .12s; }
.jac-aufgabe:last-child { border-bottom: 0; }
.jac-aufgabe:hover { background: #f7f8f9; }
.jac-aufgabe-ic { font-size: 19px !important; width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: #eef0f2; color: #5b626b; }
.jac-aufgabe.dringend .jac-aufgabe-ic { background: #fbeed4; color: #8a5c07; }
.jac-aufgabe-text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #2c2f34; }
.jac-aufgabe-pfeil { font-size: 17px !important; color: #a7adb5; flex: none; }
.jac-aufgaben-leer { padding: 16px; font-size: 13.5px; color: #7c828b;
  display: flex; align-items: center; gap: 9px; }
.jac-aufgaben-leer .ti { font-size: 19px !important; color: #2f9e5f; }

.jac-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jac-card { background: #fff; border: 1px solid #e6e8ea; border-radius: 14px; box-shadow: 0 1px 2px rgba(20,28,38,.05), 0 6px 16px -10px rgba(20,28,38,.14); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.jac-card.span2 { grid-column: span 2; }
.jac-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #eef0f2; }
.jac-card-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: #2c2f34; }
.jac-card-title .ti { font-size: 19px !important; color: #8a9099; }
.jac-card-body { padding: 4px; overflow: auto; }
.jac-card-body.pad { padding: 14px 16px; }

/* Geburtstage und Jubilaeen als Liste statt als vierspaltige Tabelle: Datum und Name
   nebeneinander, Anlass und Niederlassung darunter. So passt die Karte in eine halbe
   Zeile und steht neben "Maschinen & Geraete". */
.jac-anlass { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--jac-hair); }
.jac-anlass:last-child { border-bottom: 0; }
.jac-anlass-tag { flex: none; font-size: 13px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.jac-anlass-wer { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.jac-anlass.ist-heute { background: var(--jac-rowhover); }

/* Platzhalterliste bei Abmahnungen: ein Klick setzt den Platzhalter dort ein, wo der
   Schreibzeiger steht - vorher musste man ihn abtippen. */
.jac-platzhalter-hinweis { font-size: 12.5px; color: var(--jac-muted); margin: 0 0 8px; }
.jac-platzhalter { border: 0; background: transparent; padding: 2px 4px; margin: -2px -4px;
  border-radius: 6px; cursor: pointer; font: inherit; text-align: left; }
.jac-platzhalter code { color: var(--jac-link); }
.jac-platzhalter:hover { background: var(--jac-rowhover); }
.jac-platzhalter:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-platzhalter.ist-gesetzt { background: var(--jac-focus); }
.jac-platzhalter-meldung { margin-top: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--jac-ok, #2f9e5f); }

/* Meldungen als Liste - Titel mit Zeitpunkt, Text darunter, das x rechts. */
.jac-meldung { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--jac-hair); }
.jac-meldung:last-child { border-bottom: 0; }
.jac-meldung-text { flex: 1 1 auto; min-width: 0; font-size: 13.5px;
  display: block; text-decoration: none; color: inherit; }
.jac-meldung-kopf { display: flex; align-items: baseline; gap: 8px; }
.jac-meldung-kopf b { min-width: 0; }
.jac-meldung-wann { margin-left: auto; font-size: 12px; color: var(--jac-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.jac-meldung-text .jac-zeile-zusatz { display: block; }

/* ===== Mitarbeiterakte auf Reitern =====
   Die Akte stand als eine lange Bahn da - Stammdaten, Zugang, Urlaub, Ausstattung,
   Unterweisungen, Dokumente untereinander. Wer den Urlaub suchte, scrollte an allem
   anderen vorbei. */
.jac-akte-reiter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px;
  border-bottom: 1px solid var(--jac-border); }
.jac-akte-reiter-tat { display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--jac-muted);
  cursor: pointer; border-radius: 9px 9px 0 0; }
.jac-akte-reiter-tat .ti { font-size: 17px; }
.jac-akte-reiter-tat:hover { background: var(--jac-rowhover); color: var(--jac-ink); }
.jac-akte-reiter-tat.ist-offen { color: var(--jac-ink); border-bottom-color: var(--jac-accent); }
.jac-akte-blatt > div + div { margin-top: 16px; }

/* "Offen bei dieser Person": was auslaeuft oder fehlt, mit dem naechsten Schritt. */
.jac-offen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 16px; border-radius: 12px;
  background: var(--jac-field); border: 1px solid var(--jac-border); }
.jac-offen-marke { display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 700; color: var(--jac-muted); }
.jac-offen-marke .ti { font-size: 17px; }
.jac-offen-punkt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; background: var(--jac-surface); border: 1px solid var(--jac-border);
  font-size: 13px; color: var(--jac-ink); text-decoration: none; }
.jac-offen-punkt:hover { border-color: var(--jac-faint); }
.jac-offen-punkt .ti { font-size: 15px; color: var(--jac-muted); }
.jac-offen-punkt.dringend .ti { color: var(--jac-danger); }
/* "Alle zeigen" am Fuss einer Karte, die nur die ersten Eintraege zeigt. */
.jac-mehr-zeile { border-top: 1px solid #eef0f2; padding: 8px 16px; text-align: center; }
.jac-mehr-knopf { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #5b626b; cursor: pointer;
  padding: 4px 8px; border-radius: 7px; }
.jac-mehr-knopf:hover { background: #f1f3f5; color: #2c2f34; }
@media (max-width: 900px) { .jac-cards { grid-template-columns: 1fr; } .jac-card.span2 { grid-column: span 1; } }

/* ===== Header-Breadcrumb ===== */
.jac-crumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: #8a9099; min-width: 0; overflow: hidden;
}
/* Feste Farben aus der Zeit vor den Tokens: #8a9099 liegt auf Weiss bei 3,22:1,
   der Akzent beim Haus-Symbol bei 2,02. Beide zeigen jetzt auf die Tokens, die
   das koennen - im Dunkelmodus stimmten sie ohnehin schon (6,27:1). */
.jac-crumbs a { color: var(--jac-muted); text-decoration: none; display: inline-flex; align-items: center; }
.jac-crumbs a:hover { color: #333; }
.jac-crumb-home .ti { font-size: 19px !important; }
.jac-crumb-home.is-current { color: var(--jac-link); }
.jac-crumb-sep { opacity: .4; flex: none; }
.jac-crumb-link { white-space: nowrap; flex: none; }
.jac-crumb-cur {
  color: #2c2f34; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.matfilled {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' -25,
  'opsz' 20
}


#cooltoast-container {
  position: fixed;
  top: 0;
  right: 0;
  width: auto;
  z-index: 999;
  /*   font-family: 'Helvetica'; */
}

.cooltoast-toast {
  position: relative;
  padding: 8px 12px;
  margin: 16px;
  border-radius: 8px;
  background: #F5F5F5;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.19);
  animation-duration: .3s;
  animation-name: cooltoast;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.cooltoast-fadeOut {
  animation-name: cooltoastFadeOut;
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-fill-mode: forwards;
}

#cooltoast-container p,
#cooltoast-container h4 {
  margin: 3px 0 !important;
}

.cooltoast-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}

.cooltoast-text {
  font-size: 14px;
  color: #777;
}

.cooltoast-icon {
  position: absolute;
  top: 5px;
  left: -40px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #FFF;
}

.cooltoast-toast a,
.cooltoast-toast a:hover {
  color: #549EDB !important;
  text-decoration: none !important;
}

/** toast types */
.cooltoast-success {
  border-bottom: 2px solid #51C625;
}

.cooltoast-warning {
  border-bottom: 2px solid #DB9215;
}

.cooltoast-error {
  border-bottom: 2px solid #DB2B1D;
}

.cooltoast-info {
  border-bottom: 2px solid #27ABDB;
}

@keyframes cooltoast {
  from {
    transform: translate3d(400px, 0, 0);
    ;
    opacity: 0;
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes cooltoastFadeOut {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
}


.progress {
  height: 50px;
  line-height: 50px;
}

.jacsocial_medium {
  width: 50px;
}

.jaclogo_small {
  width: 117px;
}

/* Das Firmenlogo in der Kopfzeile: Hoehe vorgeben, Breite ergibt sich.
   `jaclogo_small` schrieb 117 Pixel Breite fest; zusammen mit der Hoehe aus dem
   Markup wurde jedes Logo auf 117 x 32 gequetscht - sichtbar bei Buttmi (1,76:1)
   und Reinel (2,19:1), die dadurch gestaucht wirkten. */
.jac-kopflogo { height: 32px; width: auto; max-width: 190px; object-fit: contain; }

.jaclogo_medium {
  width: 224px;
}

.jaclogo_big {
  width: 448px;
}

.dashboard_box_max-h-40vh {
  max-height: 40vh;
}

.max-h-80vh {
  max-height: 80vh;
}


/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */
/* ####################################################################################################### */


:root {
  --lines: #999;
}


/* Department/ section colors */
.nodecontent.dep-1 {
  background: #7b9fe0;
}
.nodecontent.dep-2 {
  background: #8dccad;
}
.nodecontent.dep-3 {
  background: #FFD600;
}
.nodecontent.dep-4 {
  background: #73e548;
}
.nodecontent.dep-5 {
  background: #f27c8d;
}
.nodecontent.dep-6 {
  background: #24c68b;
}
.nodecontent.dep-7 {
  background: #AAD4E7;
}
.nodecontent.dep-8 {
  background: #20ff84;
}
.nodecontent.dep-9 {
  background: #a6d7a8;
}
.nodecontent.dep-10 {
  background: #c9fe74;
}
.nodecontent.dep-11 {
  background: #ada392;
}
.nodecontent.dep-12 {
  background: #55bbca;
}
.nodecontent.dep-13 {
  background: #def55d;
}

.dep-staff {
  background: #54b9b8;
}


/* .orgchart {
  width: 100%;
  background: #FF0000;
} */

.centered_node {
  display: inline-block !important;
}

/*vertical nodes*/
.orgchart li.vertical>ul {
  flex-direction: column;
  align-items: flex-start;
  margin: 0 5px;
  position: relative;
}

.orgchart li.vertical>ul>li>.nodecontent {
  margin: 10px 0 0 10px;
}

/*vertical connectors*/
.orgchart li.vertical>ul::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -2px;
  left: 10px;
  height: 10px;
  width: calc(50% - 19px);
  border-top: 2px solid #808080;
}

.orgchart li.vertical>.nodecontent::after {
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 7px;
  width: 10px;
  left: auto;
  right: calc(50% - 1px);
}

.orgchart li.vertical>ul>li::before {
  border-width: 0 0 0 2px;
  left: 0px;
  height: 100%;
  width: 10px;
  border-radius: 0;
}

.orgchart li.vertical>ul>li:first-child::before {
  top: -2px;
  height: calc(100% + 2px);
  border-top-width: 2px;
  border-top-left-radius: 7px;
}

.orgchart li.vertical>ul>li:last-child::before {
  height: calc(50% + 6px);
  border-bottom-width: 2px;
  border-bottom-left-radius: 7px;
}

.orgchart li.vertical>ul>li>.nodecontent::before {
  height: 2px;
  width: 8px;
  top: calc(50% - 1px);
  left: -8px;
  border-width: 2px 0 0 0;
}

.orgchart li.vertical>ul>li:last-child>.nodecontent::before {
  display: none;
}

.centered {
  text-align: center;
}

.nodecontent {
  display: inline-block;
  background-color: DarkTurquoise;
  padding: 10px;
  border-radius: 10px;
  color: black;
  width: 175px;
  -webkit-transition: height 3s ease;
  -moz-transition: height 3s ease;
  -o-transition: height 3s ease;
  -ms-transition: height 3s ease;
  transition: height 3s ease;
}

.nodecontent:hover {
  background-color: #FFA500;
  max-width: 175px;
}

.management_node,
.management_node:hover {
  background-color: #e5e7eb;
  min-width: 700px;
  /* max-width: 900px; */
}


.staff_node,
.staff_node:hover {
  background-color: #e5e7eb;
  width: fit-content !important;
  max-width: fit-content !important;
  /* left: calc(307px) !important; */
  left: 27.2px !important;
  transform: translatex(50%) !important;
}

.staff_node::before,
.staff_node::after,
.staff_node li:not(:first-child)::before
{
  border: none !important;
}

.staff_node li {
  margin: 0 10px 0 0 !important;
}


.staff_node>ul>li:first-child::before {
  height: 2px !important;
  width: 27px !important;
  top: calc(50% - 1px) !important;
  left: -37px !important;
  border-width: 2px 0 0 0 !important;
}


.staff_node>ul::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  top: -20px;
  left: -28px;
  height: calc(100% + 40px);
  border-left: 2px solid #808080;
}


.nodecontent .collapse {
  position: absolute;
  bottom: -15px;
  left: calc(50% - 6px);
  color: #808080;
  background-color: #808080;
  border-radius: 6px;
  height: 12px;
  width: 12px;
  font-size: 12px;
  text-align: center;
}

/*chart nodes*/
.orgchart {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.orgchart,
.orgchart ul {
  padding: 0;
  margin: 0;
}

/*align children horizontally using CSS flex*/
.orgchart ul {
  display: flex;
}

/*align nodecontent and children list vertically*/
.orgchart li {
  display: flex;
  flex-direction: column;
  position: relative;
}

/*arrange the nodecontent centered above the children list*/
.orgchart .nodecontent {
  align-self: center;
  position: relative;
  margin: 20px 5px;
}

.orgchart .collapsed>ul {
  display: none;
}

/*connections*/
.orgchart li::before,
.orgchart .nodecontent::after,
.orgchart .nodecontent::before {
  box-sizing: border-box;
  content: '';
  position: absolute;
  /* z-index: -1; */
  border: 0px solid #808080;
}

.orgchart li:not(:only-child)::before {
  border-top-width: 2px;
  width: 100%;
  height: 20px;
  top: 0px;
}

.orgchart li:first-child::before {
  width: calc(50% + 1px);
  right: 0;
  border-left-width: 2px;
  border-top-left-radius: 7px;
}

.orgchart li:last-child::before {
  width: calc(50% + 1px);
  border-right-width: 2px;
  border-top-right-radius: 7px;
}

.orgchart .nodecontent::after,
.orgchart .nodecontent::before {
  border-left-width: 2px;
  width: 2px;
  height: 20px;
  left: calc(50% - 1px);
}

.orgchart .nodecontent::before {
  top: -20px;
}

.orgchart .nodecontent::after {
  bottom: -20px;
}

.orgchart li:first-child:not(:only-child)>.nodecontent::before,
.orgchart li:last-child:not(:only-child)>.nodecontent::before {
  border-left-width: 0px;
}

.orgchart .leaf>.nodecontent::after,
.orgchart .root>.nodecontent::before,
.orgchart .collapsed>.nodecontent::after {
  display: none;
}




.name {
  font-size: 14px;
  margin: 20px 0 0;
  font-weight: bold;
}

.role,
.PhoneNumber,
.EmailAddress,
.JobDescription {
  font-weight: 300;
  margin-bottom: 0px;
  margin-top: 5px;
  font-size: 12px;
}

.role {
  font-weight: bold
}

.nodecontent:hover .content-hover {
  display: block;

}

.content-hover {
  padding-top: 10px;
  display: none;
}

/*
.PhoneNumber {
  padding-left: 10px;
}

.Button {
  background: #A9a9a9;
  border-style: solid 5px #fff;
  border-radius: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.EmailAddress {
  padding-left: 10px;
}
*/





/* Highlights subordinate team members on hover
.orgchart li a:hover, .orgchart li a:hover+ul li a {
  background: #cccccc; color: #fff; border: 1px solid #cccccc; border-radius: 6px;
}
*/
/* ============================================================
   DARK MODE  (data-theme am <html>; Startwert per prefers-color-scheme,
   umschaltbar via Header-Button toggleTheme()). Deckt vorerst die bereits
   neu gestalteten Bereiche ab; Alt-Seiten folgen mit dem Redesign.
   ============================================================ */
html[data-theme="dark"] { color-scheme: dark; }

/* Topbar + Content-Flaeche (ueberschreiben die Tailwind-Utilities) */
html[data-theme="dark"] .jac-topbar { background: #1b2027 !important; border-color: #2b313a !important; }
html[data-theme="dark"] .jac-content { background: #14181e !important; }

/* Header-Buttons (Rail-Toggle, Theme-Toggle) */
html[data-theme="dark"] .jac-topbar .text-gray-400 { color: #7d858e; }
html[data-theme="dark"] .jac-topbar button:hover { background: #242a32 !important; color: #e7eaed !important; }

/* Theme-Toggle-Icon: Light zeigt Mond, Dark zeigt Sonne */
.jac-theme-sun { display: none; }
.jac-theme-moon { display: inline-block; }
html[data-theme="dark"] .jac-theme-moon { display: none; }
html[data-theme="dark"] .jac-theme-sun { display: inline-block; }

/* Dashboard-Kopf */
html[data-theme="dark"] .jac-dash { color: #cdd3da; }
html[data-theme="dark"] .jac-dash-head h1 { color: #e7eaed; }
html[data-theme="dark"] .jac-dash-sub,
html[data-theme="dark"] .jac-dash-today { color: #9aa1a9; }

/* KPI-Kacheln */
html[data-theme="dark"] .jac-tile { background: #1b2027; border-color: #2b313a; }
html[data-theme="dark"] .jac-tile:hover { border-color: #3a424d; box-shadow: 0 8px 22px -10px rgba(0,0,0,.55); }
html[data-theme="dark"] .jac-tile-num { color: #e7eaed; }
html[data-theme="dark"] .jac-tile-label { color: #9aa1a9; }
html[data-theme="dark"] .jac-tile-zusatz { color: #838b94; }
html[data-theme="dark"] .jac-mehr-zeile { border-top-color: #242a32; }
html[data-theme="dark"] .jac-mehr-knopf { color: #b6bdc5; }
html[data-theme="dark"] .jac-mehr-knopf:hover { background: #242a32; color: #e7eaed; }
html[data-theme="dark"] .jac-aufgaben { background: #1b2027; border-color: #2b313a; }
html[data-theme="dark"] .jac-aufgaben-kopf { border-bottom-color: #242a32; color: #e7eaed; }
html[data-theme="dark"] .jac-aufgabe { border-bottom-color: #242a32; }
html[data-theme="dark"] .jac-aufgabe:hover { background: #222831; }
html[data-theme="dark"] .jac-aufgabe-ic { background: #242a32; color: #b6bdc5; }
html[data-theme="dark"] .jac-aufgabe.dringend .jac-aufgabe-ic { background: rgba(224,169,68,.18); color: #e0a944; }
html[data-theme="dark"] .jac-aufgabe-text { color: #e7eaed; }
html[data-theme="dark"] .jac-aufgaben-leer { color: #9aa1a9; }
html[data-theme="dark"] .jac-aufgaben-leer .ti { color: #67c095; }
html[data-theme="dark"] .jac-tile.crit .jac-tile-ic { background: rgba(214,70,55,.18); color: #ec7365; }
html[data-theme="dark"] .jac-tile.warn .jac-tile-ic { background: rgba(224,169,68,.18); color: #e0a944; }
html[data-theme="dark"] .jac-tile.good .jac-tile-ic { background: rgba(103,192,149,.18); color: #67c095; }
html[data-theme="dark"] .jac-tile.info .jac-tile-ic { background: rgba(107,162,236,.18); color: #6ba2ec; }

/* Karten */
html[data-theme="dark"] .jac-card { background: #1b2027; border-color: #2b313a; box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -10px rgba(0,0,0,.55); }
html[data-theme="dark"] .jac-card-head { border-bottom-color: #242a32; }
html[data-theme="dark"] .jac-card-title { color: #e7eaed; }
html[data-theme="dark"] .jac-card-title .ti { color: #9aa1a9; }

/* Breadcrumb im Header */
html[data-theme="dark"] .jac-crumbs a { color: #9aa1a9; }
html[data-theme="dark"] .jac-crumbs a:hover { color: #e7eaed; }
html[data-theme="dark"] .jac-crumb-home.is-current { color: #f9b52e; }

/* --- Dark-Mode Nachbesserungen: Breadcrumb-cur, Toggle-Icon, alte Tabellen im Content --- */
html[data-theme="dark"] .jac-crumb-cur { color: #e7eaed; }
html[data-theme="dark"] .jac-crumb-home { color: #9aa1a9; }

/* Toggle-Icon sauber im Button zentrieren (gilt light + dark) */
.jac-theme-toggle .ti { line-height: 1; }

/* Alte divide-y-Tabellen im neuen Content-Bereich dunkel faerben (Uebergang, bis jac-table kommt).
   Flaechen/Texte/Rahmen selbst kommen aus dem Kompat-Layer am Dateiende. */
html[data-theme="dark"] .jac-content table { color: var(--jac-ink); }
html[data-theme="dark"] .jac-content table thead th { background-color: var(--jac-hair) !important; }
html[data-theme="dark"] .jac-content table tbody { background-color: transparent !important; }
/* Grelle Hervorhebungs-Hintergruende (z.B. Geburtstag heute) im Dark daempfen */
html[data-theme="dark"] .jac-content .bg-red-300 { background-color: rgba(214,70,55,.22) !important; }
html[data-theme="dark"] .jac-content .bg-red-200 { background-color: rgba(214,70,55,.13) !important; }

/* ============================================================
   PHASE 1 – Wiederverwendbare Bausteine (Mockup-Optik, Token-basiert).
   Tokens light per :root, dark per html[data-theme="dark"].
   ============================================================ */
:root {
  --jac-accent: #f5a700; --jac-accent-press: #d98f00; --jac-accent-ink: #3a2600;
  /* Linkfarbe getrennt vom Akzent: #d98f00 auf Weiss ergibt einen Kontrast von 2.67,
     noetig sind 4.5 (gemessen am 01.09.2026). Derselbe Farbton, nur dunkler - der
     Akzent auf Flaechen und Knoepfen bleibt davon unberuehrt. */
  --jac-link: #a36b00;
  --jac-ink900: #22272d; --jac-ink700: #363d47; --jac-primary-ink: #ffffff;
  /* --jac-muted eine Spur dunkler: auf dem hellgrauen Seitengrund lag der alte Wert
     #6b727a bei 4.42, noetig sind 4.5 (gemessen am 01.09.2026). */
  --jac-surface: #ffffff; --jac-ink: #22272d; --jac-muted: #656c75; --jac-faint: #72777d;
  /* Dieselbe Flaeche, nur durchsichtig - fuer weiche Uebergaenge, die sonst grau werden */
  --jac-surface-0: rgba(255,255,255,0);
  --jac-border: #dde1e6; --jac-hair: #eaedf0; --jac-rowhover: #f6f8fa; --jac-field: #ffffff;
  --jac-ok: #28794d; --jac-ok-soft: rgba(47,143,91,.14);
  /* Eine Spur dunkler: Auf der weichen roten Flaeche (Meldung "nicht gefunden",
     Abzeichen, Knopf) lag #b93c2f bei 4,30:1, noetig sind 4,5 - dieselbe Rechnung
     wie bei --jac-warn am 01.09.2026 (gemessen am 10.09.2026). */
  --jac-danger: #b23a2d; --jac-danger-soft: rgba(214,70,55,.12);
  /* Schrift auf den weichen Flaechen der Abzeichen: 3.19 bzw. 4.20 waren zu wenig */
  --jac-warn: #956319; --jac-warn-soft: rgba(214,158,46,.16);
  --jac-info: #2a69c2; --jac-info-soft: rgba(44,110,203,.13);
  --jac-focus: rgba(245,167,0,.32);
}
html[data-theme="dark"] {
  --jac-accent: #f9b52e; --jac-accent-press: #f5a700; --jac-accent-ink: #3a2600;
  /* Auf dunklem Grund stimmt der Kontrast schon (6.14) - hier bleibt es beim Akzent */
  --jac-link: #f9b52e;
  --jac-ink900: #f9b52e; --jac-ink700: #e0a944; --jac-primary-ink: #12151a;
  --jac-surface: #1b2027; --jac-ink: #e7eaed; --jac-muted: #9aa1a9; --jac-faint: #818992;
  --jac-surface-0: rgba(27,32,39,0);
  --jac-border: #2b313a; --jac-hair: #242a32; --jac-rowhover: #232a33; --jac-field: #141920;
  --jac-ok: #67c095; --jac-ok-soft: rgba(103,192,149,.15);
  --jac-danger: #ee7567; --jac-danger-soft: rgba(236,115,101,.16);
  --jac-warn: #e0a944; --jac-warn-soft: rgba(224,169,68,.16);
  --jac-info: #6ba2ec; --jac-info-soft: rgba(107,162,236,.16);
  --jac-focus: rgba(249,181,46,.4);
}

/* ---------- Buttons ---------- */
.jac-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px;
  font-weight: 600; line-height: 1.2; padding: 8px 14px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .13s, border-color .13s, color .13s, box-shadow .13s; }
.jac-btn .ti { font-size: 16px !important; }
.jac-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
/* Auch die gefuellten Knoepfe bekommen die Knopf-Anmutung: ein Hauch Verlauf, eine
   feine Kante und ein Schatten. Ohne das waren sie flache Farbflaechen - im
   Dunkelmodus, wo Primaerfarbe und Akzent beide gelb sind, kaum als Knopf zu lesen.
   Der Verlauf liegt als Bild ueber der jeweiligen Farbe und passt damit zu jeder. */
.jac-btn-primary, .jac-btn-accent, .jac-btn-danger, .jac-btn-secondary,
.jac-btn-c-green, .jac-btn-c-blue, .jac-btn-c-amber, .jac-btn-c-gray {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.07) 100%);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 1px 2px rgba(16,24,40,.16);
}
.jac-btn-primary { background-color: var(--jac-ink900); color: var(--jac-primary-ink); }
.jac-btn-primary:hover { background-color: var(--jac-ink700); }
.jac-btn-accent { background-color: var(--jac-accent); color: var(--jac-accent-ink); }
.jac-btn-accent:hover { background-color: var(--jac-accent-press); }
/* Der zurueckhaltende Knopf war weiss auf weissem Grund und damit von einem
   Eingabefeld kaum zu unterscheiden. Eine leicht abgesetzte Flaeche, ein kraeftigerer
   Rand und ein spuerbarer Schatten machen ihn als Knopf lesbar.
   Den Verlauf teilt er sich mit den gefuellten Knoepfen (Regel darueber): oben
   aufgehellt, unten abgedunkelt. Mit festen Farben lief er im Dunkelmodus andersherum
   - dort ist die Kartenflaeche dunkler als der Haarton - und der Knopf wirkte
   eingedrueckt statt gewoelbt. */
.jac-btn-secondary { background-color: var(--jac-surface);
  color: var(--jac-ink); border-color: var(--jac-faint); }
.jac-btn-secondary:hover { background-color: var(--jac-rowhover); border-color: var(--jac-ink700); }
.jac-btn-danger { background-color: var(--jac-danger-soft); color: var(--jac-danger); }
.jac-btn-danger:hover { background-color: color-mix(in srgb, var(--jac-danger) 22%, transparent); }
.jac-btn-ghost { background: transparent; color: var(--jac-muted); padding: 7px; }
.jac-btn-ghost:hover { background: var(--jac-rowhover); color: var(--jac-ink); }
.jac-btn-sm { font-size: 12.5px; padding: 5px 10px; }
.jac-btn[disabled], .jac-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Ein breiter Inhalt (meist eine Tabelle) bekommt seinen eigenen Schieberahmen,
   statt den ganzen Kartenkoerper zur Seite zu schieben - sonst liegen die Knoepfe
   darunter ausserhalb des Sichtbaren. */
.jac-scrollx { overflow-x: auto; max-width: 100%; }

/* Vorschlaege unter einem Suchfeld (Mitarbeitersuche, A-67). Liegt ueber dem Rest
   der Maske, damit die Liste nicht das Formular auseinanderschiebt. */
.jac-vorschlagsliste { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 3px;
  max-height: 260px; overflow-y: auto; list-style: none; padding: 4px; border-radius: 10px;
  background: var(--jac-surface); border: 1px solid var(--jac-border);
  box-shadow: 0 10px 24px -12px rgba(16,24,40,.35); }
.jac-vorschlagsliste button { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 7px;
  font-size: 13.5px; color: var(--jac-ink); background: transparent; border: 0; cursor: pointer; }
.jac-vorschlagsliste button:hover, .jac-vorschlagsliste button:focus-visible {
  background: var(--jac-rowhover); outline: none; }
@media (pointer: coarse) { .jac-vorschlagsliste button { padding: 12px 11px; } }
/* Steht die Suche unten im Kasten, schnitt dessen `overflow: hidden` die Vorschlaege
   ab - sichtbar nur, solange wirklich eine Liste offen ist */
.jac-panel:has(.jac-vorschlagsliste), .jac-card:has(.jac-vorschlagsliste),
.jac-panel-body:has(.jac-vorschlagsliste), .jac-card-body:has(.jac-vorschlagsliste) { overflow: visible; }

/* Beim Druecken gibt der Knopf nach - das kennt jede Hand vom Papier her */
.jac-btn:not([disabled]):active { transform: translateY(1px); box-shadow: none; }

/* Karten sind Spalten-Flexboxen. Liegt ein Knopf unmittelbar darin, bekaeme er
   dadurch eine eigene Zeile ueber die volle Breite - ein heller Kasten ueber die
   ganze Zeile liest sich aber als Eingabefeld, und zusammengehoerende Knoepfe
   ("Herunterladen" + "Loeschen") standen untereinander statt nebeneinander.
   In solchen Karten fliessen die Knoepfe deshalb wie Text: jeder so breit wie seine
   Beschriftung, mehrere davon in einer Reihe. */
.jac-card:has(> .jac-btn), .jac-card-body:has(> .jac-btn),
.jac-panel:has(> .jac-btn), .jac-panel-body:has(> .jac-btn) { display: block; }

/* Wo :has() fehlt (aeltere Browser), bleibt wenigstens die Breite richtig */
.jac-card > .jac-btn, .jac-card-body > .jac-btn,
.jac-panel > .jac-btn, .jac-panel-body > .jac-btn { align-self: flex-start; }

/* Zwei Knoepfe nebeneinander brauchen Luft, auch ohne eigene Abstandsklasse */
.jac-card > .jac-btn + .jac-btn, .jac-card-body > .jac-btn + .jac-btn,
.jac-panel > .jac-btn + .jac-btn, .jac-panel-body > .jac-btn + .jac-btn { margin-left: 8px; }

/* ---------- Status-Chips ---------- */
.jac-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650;
  padding: 3px 10px; border-radius: 999px; line-height: 1.4; }
.jac-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.jac-chip-ok { background: var(--jac-ok-soft); color: var(--jac-ok); }
.jac-chip-warn { background: var(--jac-warn-soft); color: var(--jac-warn); }
.jac-chip-danger { background: var(--jac-danger-soft); color: var(--jac-danger); }
.jac-chip-info { background: var(--jac-info-soft); color: var(--jac-info); }
.jac-chip-neutral { background: var(--jac-hair); color: var(--jac-muted); }

/* ---------- Seiten-Kopf ---------- */
.jac-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.jac-ph-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--jac-ink); }
.jac-ph-sub { color: var(--jac-muted); font-size: 13.5px; margin: 3px 0 0; }
.jac-ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Tabelle ---------- */
.jac-table-wrap { border: 1px solid var(--jac-border); border-radius: 14px; overflow: hidden; background: var(--jac-surface); }
.jac-table-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--jac-hair); flex-wrap: wrap; }
.jac-search { display: flex; align-items: center; gap: 8px; background: var(--jac-field); border: 1px solid var(--jac-border); border-radius: 9px; padding: 6px 10px; min-width: 180px; }
.jac-search input { border: 0; background: transparent; color: var(--jac-ink); font: inherit; font-size: 13px; outline: none; width: 100%; }
.jac-search:focus-within { border-color: var(--jac-accent); box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-search input:focus { outline: none; border-color: transparent; box-shadow: none; }
.jac-table-scroll { overflow-x: auto; }
table.jac-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--jac-ink); }
.jac-table thead th { text-align: left; font-weight: 650; color: var(--jac-muted); font-size: 12px; letter-spacing: .02em;
  padding: 11px 14px; background: var(--jac-hair); border-bottom: 1px solid var(--jac-border); white-space: nowrap; }
.jac-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--jac-hair); vertical-align: middle; }
.jac-table tbody tr:last-child td { border-bottom: 0; }
/* Die letzte Spalte ist fast immer "Aktionen". Ohne eigenen Abstand klebt ihr Symbol
   an der Kante - und wo die Tabelle in einem Schieberahmen liegt, wird sie sogar
   angeschnitten. Die Regel sticht Tailwinds knappe Zellenabstaende (px-1). */
.jac-table thead th:last-child, .jac-table tbody td:last-child { padding-right: 18px; }
.jac-table thead th:first-child, .jac-table tbody td:first-child { padding-left: 14px; }
.jac-table tbody tr:hover { background: var(--jac-rowhover); }
.jac-table .jac-num { font-variant-numeric: tabular-nums; }

/* Etwas dichter: Bei 25 Zeilen bringt jede eingesparte Zeilenhoehe eine Zeile mehr
   ins Bild, ohne dass es gedraengt wirkt. */
.jac-table tbody td { padding-top: 9px; padding-bottom: 9px; }

/* Die Filterzeile unter dem Kopf ist keine Datenzeile - schmaler und ruhiger, damit
   sie nicht wie ein leerer Eintrag aussieht. */
.jac-filterzeile th { padding: 5px 14px; background: var(--jac-surface);
  border-bottom: 1px solid var(--jac-border); }
.jac-filterzeile th:empty { padding: 0; }
.jac-filterzeile-marke { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase;
  /* Die Marke sitzt auf dem grauen Grund der Filterzeile, nicht auf Weiss - mit
     --jac-faint lag sie dort bei 3.84, noetig sind 4.5 (gemessen am 01.09.2026). */
  color: var(--jac-muted); }
.jac-filterzeile-marke .ti { font-size: 15px; }

/* Steuerleiste ueber der Tabelle: alles in einer Zeile, links Suche und Filter,
   rechts Anzahl und Seitengroesse. */
.jac-tabellenleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 6px 0 10px; }
.jac-tabellenleiste .jac-table-anzahl { margin-left: auto; }

/* Suchfeld mit Lupe - die Beschriftung steht im Feld, das spart eine Zeile */
.jac-suchfeld { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px;
  border: 1px solid var(--jac-border); border-radius: 9px; background: var(--jac-field);
  min-width: 210px; }
.jac-suchfeld .ti { font-size: 16px; color: var(--jac-faint); }
.jac-suchfeld input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13.5px; color: var(--jac-ink); }
/* Den Rahmen traegt die Huelle, nicht das Feld: Tailwind Forms setzt auf jedes
   input:focus einen blauen Ring, und "outline: none" allein kommt dagegen nicht an -
   der Ring steckt im box-shadow. Dasselbe Muster wie bei .jac-nav-suche. */
.jac-suchfeld:focus-within { border-color: var(--jac-accent); box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-suchfeld input:focus { outline: none; border-color: transparent; box-shadow: none; }

/* Filter und Seitengroesse: Beschriftung neben dem Feld statt darueber */
.jac-leistenfeld { display: inline-flex; align-items: center; gap: 7px; }
.jac-leistenfeld-marke { font-size: 12px; color: var(--jac-muted); white-space: nowrap; }

/* ===== Ein Filterbegriff statt zwei =====
   Die Filter standen an zwei Stellen: als Auswahlfelder in dieser Leiste UND in einer
   zweiten Kopfzeile mitten in der Tabelle, links mit "FILTERN" beschriftet. Bei der
   Maschinenliste waren das sechs Felder oben und drei in der Tabelle - eine zweite
   Zeile Bedienelemente, bevor die erste Zeile Daten kam.

   Jetzt: ein Knopf, der alle oeffnet, und was gesetzt ist, steht als Chip daneben. */
.jac-filterknopf { position: relative; display: inline-flex; }
.jac-filterknopf-tat { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-weight: 600; }
.jac-filterknopf-tat .ti { font-size: 15px; }
.jac-filterknopf-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--jac-accent); color: #2b2200;
  font-size: 11px; font-weight: 700; }
.jac-filterfeld { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 280px; max-width: 22rem; padding: 10px; border-radius: 11px;
  background: var(--jac-surface); border: 1px solid var(--jac-border);
  box-shadow: 0 12px 30px -12px rgba(20,28,38,.32);
  /* Die Maschinenliste hat neun Filter - das Feld muss in sich scrollen, sonst
     laeuft es auf einem Tablet unten aus dem Bild. */
  max-height: min(60vh, 420px); overflow-y: auto; }
.jac-filterfeld-zeile { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 5px 4px; }
.jac-filterfeld-zeile + .jac-filterfeld-zeile { border-top: 1px solid var(--jac-hair); }
.jac-filterfeld-marke { font-size: 12px; font-weight: 600; color: var(--jac-muted); }
.jac-filterfeld .jac-ctrl { width: 100%; }

.jac-filterchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 10px;
  border-radius: 999px; background: var(--jac-field); border: 1px solid var(--jac-border);
  font-size: 12.5px; color: var(--jac-ink); white-space: nowrap; max-width: 18rem; }
.jac-filterchip-marke { color: var(--jac-muted); }
.jac-filterchip-weg { display: inline-grid; place-items: center; width: 18px; height: 18px;
  border: 0; border-radius: 999px; background: transparent; color: var(--jac-muted); cursor: pointer; }
.jac-filterchip-weg:hover { background: var(--jac-border); color: var(--jac-ink); }
.jac-filterchip-weg .ti { font-size: 13px; }

/* Wie viele Eintraege die Liste hat - in der Steuerleiste, nicht erst unten */
.jac-table-anzahl { font-size: 13px; color: var(--jac-muted); white-space: nowrap; }

/* Die Aktionsspalte bleibt am rechten Rand stehen. Auf dem Tablet ist die Tabelle
   sonst bis zu doppelt so breit wie das Bild (Schluesselliste 1667 px bei 820 px
   Fensterbreite) - die Knoepfe lagen also hinter 800 Pixeln Schieberei. Sticht nur,
   wo in der letzten Spalte wirklich etwas zu bedienen ist. */
.jac-table-scroll .jac-table:has(tbody td:last-child :is(.jac-btn, button, a)) tr > :last-child {
  position: sticky; right: 0; z-index: 2; }
.jac-table-scroll .jac-table:has(tbody td:last-child :is(.jac-btn, button, a)) tbody td:last-child {
  background: var(--jac-surface); box-shadow: inset 1px 0 0 var(--jac-hair); }
.jac-table-scroll .jac-table:has(tbody td:last-child :is(.jac-btn, button, a)) thead th:last-child {
  background: var(--jac-hair); box-shadow: inset 1px 0 0 var(--jac-border); }
.jac-table-scroll .jac-table:has(tbody td:last-child :is(.jac-btn, button, a)) tbody tr:hover td:last-child {
  background: var(--jac-rowhover); }

/* Zeilenauswahl fuer Sammelaktionen */
.jac-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
  padding: 9px 12px; border: 1px solid var(--jac-border); border-radius: 11px;
  background: var(--jac-rowhover); }
.jac-bulkbar-count { font-size: 13px; font-weight: 650; color: var(--jac-ink); margin-right: 4px; }

/* ---------- Ankreuzfelder und Auswahlknoepfe (A-79) ----------
   Bisher trugen sie die Optik des jeweiligen Browsers: unter Windows kleine graue
   Kaestchen, auf dem iPad runde blaue - in einer Maske voller eigener Felder ein
   Fremdkoerper, und mit 13 Pixel Kantenlaenge auf dem Tablet kaum zu treffen. Jetzt
   sind sie Teil des Hauses: 18 Pixel, auf Tippgeraeten 24.

   Bewusst mit appearance:none nachgebaut - nur so folgen sie den Farbtokens und sind
   in Hell wie Dunkel gleich gut zu lesen. Der Nachbau bleibt ein echtes <input>: die
   Bedienung mit Tastatur, Vorlesehilfen und Umschalt-Auswahl bleibt unveraendert. */
.jac-content input[type="checkbox"], .jac-content input[type="radio"],
.jac-modal-panel input[type="checkbox"], .jac-modal-panel input[type="radio"],
.jac-guest input[type="checkbox"], .jac-guest input[type="radio"],
.jac-check {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0; padding: 0;
  display: inline-grid; place-content: center; vertical-align: middle;
  border: 1.5px solid var(--jac-faint); border-radius: 6px;
  background-color: var(--jac-field); cursor: pointer;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.jac-content input[type="radio"], .jac-modal-panel input[type="radio"],
.jac-guest input[type="radio"] { border-radius: 50%; }

/* Trefferflaeche fuer ein Kaestchen, das allein steht.
   Ein Kaestchen ist 18 px gross - mit dem Finger auf dem iPad kaum zu treffen. Wo
   Text daneben steht, faengt das Label den Klick; wo keiner steht, tut es diese
   Huelle: 12 px Polster nach aussen, durch den gleich grossen negativen Aussenabstand
   wieder hereingeholt. Das Kaestchen bleibt 18 px, die Trefferflaeche wird 42 px, und
   am Aussehen aendert sich nichts (07.09.2026). */
label.jac-tap {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px; margin: -12px; cursor: pointer;
}

/* Dasselbe in einer Tabellenzelle - dort darf die Flaeche nicht ueberstehen, sonst
   faengt sie Klicks ab, die der Nachbarspalte gelten. Hier fuellt das Label die Zelle
   statt ueber sie hinauszuwachsen. */
/* Beschriftung neben einem Kaestchen: anklickbar ja, aber mit 17 px Zeilenhoehe
   schwer zu treffen. Das Polster oben und unten macht daraus rund 41 px, der gleich
   grosse negative Aussenabstand haelt das Layout an seinem Platz. */
label.jac-tap-text {
  display: inline-flex; align-items: center;
  padding-top: 12px; padding-bottom: 12px;
  margin-top: -12px; margin-bottom: -12px;
  cursor: pointer;
}

label.jac-tap-cell {
  display: flex; align-items: center; justify-content: center;
  /* min-width statt width:100% - in einer Tabellenzelle ohne feste Breite schrumpft
     ein Kind mit width:100% auf den Inhalt zusammen, und die Flaeche blieb 18 px breit */
  min-width: 42px; min-height: 42px; width: 100%; margin: 0; cursor: pointer;
}

/* Das Haekchen: zwei Kanten eines Quadrats, gedreht - kein Bild, keine Schriftart,
   damit es in jeder Groesse scharf bleibt */
.jac-content input[type="checkbox"]::after, .jac-modal-panel input[type="checkbox"]::after,
.jac-guest input[type="checkbox"]::after, .jac-check::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid var(--jac-accent-ink); border-width: 0 2px 2px 0;
  transform: rotate(43deg) scale(.4); opacity: 0;
  transition: transform .12s, opacity .1s;
}
.jac-content input[type="radio"]::after, .jac-modal-panel input[type="radio"]::after,
.jac-guest input[type="radio"]::after {
  content: ""; width: 8px; height: 8px; border: 0; border-radius: 50%; margin: 0;
  background: var(--jac-accent-ink); transform: scale(.3); opacity: 0;
  transition: transform .12s, opacity .1s;
}

.jac-content :is(input[type="checkbox"], input[type="radio"]):checked,
.jac-modal-panel :is(input[type="checkbox"], input[type="radio"]):checked,
.jac-guest :is(input[type="checkbox"], input[type="radio"]):checked,
.jac-check:checked { background-color: var(--jac-accent); border-color: var(--jac-accent); }
.jac-content :is(input[type="checkbox"], input[type="radio"]):checked::after,
.jac-modal-panel :is(input[type="checkbox"], input[type="radio"]):checked::after,
.jac-guest :is(input[type="checkbox"], input[type="radio"]):checked::after,
.jac-check:checked::after { opacity: 1; }
.jac-content input[type="checkbox"]:checked::after,
.jac-modal-panel input[type="checkbox"]:checked::after,
.jac-guest input[type="checkbox"]:checked::after,
.jac-check:checked::after { transform: rotate(43deg) scale(1); }
.jac-content input[type="radio"]:checked::after,
.jac-modal-panel input[type="radio"]:checked::after,
.jac-guest input[type="radio"]:checked::after { transform: scale(1); }

/* Teilauswahl: ein Strich statt eines Haekchens (Kopfzeile einer Liste, in der nur
   ein Teil der Zeilen gewaehlt ist) */
.jac-content input[type="checkbox"]:indeterminate,
.jac-modal-panel input[type="checkbox"]:indeterminate,
.jac-check:indeterminate { background-color: var(--jac-accent); border-color: var(--jac-accent); }
.jac-content input[type="checkbox"]:indeterminate::after,
.jac-modal-panel input[type="checkbox"]:indeterminate::after,
.jac-check:indeterminate::after {
  opacity: 1; transform: none; width: 9px; height: 0;
  border-width: 0 0 2px 0; margin-top: 0;
}

.jac-content :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled),
.jac-modal-panel :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled),
.jac-guest :is(input[type="checkbox"], input[type="radio"]):hover:not(:disabled),
.jac-check:hover:not(:disabled) { border-color: var(--jac-accent); }
.jac-content :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.jac-modal-panel :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.jac-guest :is(input[type="checkbox"], input[type="radio"]):focus-visible,
.jac-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); border-color: var(--jac-accent); }
.jac-content :is(input[type="checkbox"], input[type="radio"]):disabled,
.jac-modal-panel :is(input[type="checkbox"], input[type="radio"]):disabled,
.jac-guest :is(input[type="checkbox"], input[type="radio"]):disabled,
.jac-check:disabled { opacity: .5; cursor: not-allowed; }

/* Auf Tippgeraeten groesser: 18 Pixel trifft man mit dem Finger nicht zuverlaessig */
@media (pointer: coarse) {
  .jac-content input[type="checkbox"], .jac-content input[type="radio"],
  .jac-modal-panel input[type="checkbox"], .jac-modal-panel input[type="radio"],
  .jac-guest input[type="checkbox"], .jac-guest input[type="radio"],
  .jac-check { width: 24px; height: 24px; border-radius: 7px; }
  .jac-content input[type="checkbox"]::after, .jac-modal-panel input[type="checkbox"]::after,
  .jac-guest input[type="checkbox"]::after, .jac-check::after { width: 7px; height: 12px; border-width: 0 2.5px 2.5px 0; }
  .jac-content input[type="radio"]::after, .jac-modal-panel input[type="radio"]::after,
  .jac-guest input[type="radio"]::after { width: 11px; height: 11px; }
}

/* ---------- Formularfelder ---------- */
.jac-input, .jac-select, .jac-textarea { font: inherit; font-size: 13.5px; color: var(--jac-ink); background: var(--jac-field);
  border: 1px solid var(--jac-border); border-radius: 9px; padding: 9px 11px; outline: none; width: 100%;
  transition: border-color .13s, box-shadow .13s; }
.jac-input:focus, .jac-select:focus, .jac-textarea:focus { border-color: var(--jac-accent); box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-label { font-size: 12.5px; font-weight: 600; color: var(--jac-ink); display: block; margin-bottom: 5px; }
.jac-field { display: flex; flex-direction: column; margin-bottom: 14px; }

/* Alle grellen Status-Zeilenfarben im Dark daempfen (Lesbarkeit mit hellem Text;
   endgueltige Loesung sind Status-Chips in Welle 2a) */
html[data-theme="dark"] .jac-content .bg-purple-200 { background-color: rgba(168,130,240,.16) !important; }
html[data-theme="dark"] .jac-content .bg-blue-200 { background-color: rgba(107,162,236,.14) !important; }
html[data-theme="dark"] .jac-content .bg-emerald-200,
html[data-theme="dark"] .jac-content .bg-green-200 { background-color: rgba(103,192,149,.14) !important; }
html[data-theme="dark"] .jac-content .bg-emerald-300,
html[data-theme="dark"] .jac-content .bg-green-300 { background-color: rgba(103,192,149,.22) !important; }
html[data-theme="dark"] .jac-content .bg-orange-200 { background-color: rgba(224,169,68,.14) !important; }
html[data-theme="dark"] .jac-content .bg-yellow-200 { background-color: rgba(224,169,68,.14) !important; }
html[data-theme="dark"] .jac-content .bg-gray-200 { background-color: rgba(255,255,255,.06) !important; }

/* Farbcodierte Aktions-Buttons: dezent getoent (wie Chips) statt Vollton, damit
   sich Aktionen in Tabellen an der Farbe schnell unterscheiden lassen. */
.jac-btn-c-green { background-color: var(--jac-ok-soft); color: var(--jac-ok); }
.jac-btn-c-green:hover { background-color: color-mix(in srgb, var(--jac-ok) 22%, transparent); }
.jac-btn-c-blue { background-color: var(--jac-info-soft); color: var(--jac-info); }
.jac-btn-c-blue:hover { background-color: color-mix(in srgb, var(--jac-info) 22%, transparent); }
.jac-btn-c-amber { background-color: var(--jac-warn-soft); color: var(--jac-warn); }
.jac-btn-c-amber:hover { background-color: color-mix(in srgb, var(--jac-warn) 24%, transparent); }
.jac-btn-c-gray { background-color: var(--jac-hair); color: var(--jac-muted); }
.jac-btn-c-gray:hover { background-color: var(--jac-border); color: var(--jac-ink); }

/* Content-Grid-Kind darf schrumpfen -> breite Tabellen scrollen INTERN (jac-table-scroll)
   statt den Body zu verbreitern. Wichtig fuer iPad/schmale Viewports. */
.jac-content { min-width: 0; }
#navmain { min-width: 0; }

/* Touch-Geraete (iPad & Co.): groessere Touch-Targets fuer die kompakten Tabellen-Buttons
   (Apple HIG ~44px). Betrifft nur coarse pointer -> Desktop-Maus bleibt kompakt. */
@media (pointer: coarse) {
  .jac-btn { min-height: 40px; }
  .jac-btn-sm { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
  .jac-btn-ghost { min-width: 40px; min-height: 40px; }
  .jac-btn .ti { font-size: 18px !important; }

  /* Die Spaltenueberschrift zum Sortieren ist ein Knopf von 18 px Hoehe - die Textzeile.
     Auf dem Bildschirm trifft ihn die Maus, mit dem Finger wird es ein Geduldsspiel.
     Er fuellt jetzt die Kopfzelle (07.09.2026). */
  th button { min-height: 40px; width: 100%; }

  /* Dasselbe fuer das Benutzermenue oben rechts: der Knopf war so hoch wie sein Text. */
  #navbar button, header button.jac-muted-text { min-height: 40px; }

  /* Der Umschalter fuer den Dunkelmodus: hoch genug, aber die enge Kopfzeile am
     Telefon druckte ihn auf 30 px Breite zusammen. */
  header button.jac-theme-toggle { min-width: 40px; flex: none; }

  /* Die Symbolknoepfe der Kopfzeile - Menue einklappen, Dunkelmodus - sind mit
     w-9/h-9 genau 36 x 36. Am iPad gemessen (10.09.2026): vier Pixel zu wenig,
     und beide sitzen dicht neben anderen Knoepfen. */
  header.jac-topbar button { min-width: 40px; min-height: 40px; }

  /* Die Gruppenueberschriften im Menue (START, PERSONAL, INVENTAR ...) sind
     Knoepfe: Sie klappen ihre Gruppe auf und zu. Mit 33 px Hoehe trifft man beim
     Zuklappen leicht den ersten Punkt darunter. */
  .jac-nav-head { min-height: 40px; }

  /* Die Symbolspalte, zu der das Menue am Telefon zusammenschrumpft: Symbol plus
     Polster ergaben 35 px. Mit dem Daumen ist das zu knapp - der Nachbarpunkt liegt
     drei Pixel weiter. Gilt auch fuer das eingeklappte Menue am iPad. */
  #navmain .jac-nav-link, body.jac-rail .jac-nav-link { min-height: 40px; }

  /* Der Aufklapper "Was passiert mit den Fotos?" im Aufforderungskasten - ein Textknopf
     von 18 px Hoehe. Das Polster nach unten holt ihn auf 40 px, ohne den Kasten zu
     verschieben. */
  .jac-aufforderung-mehr { min-height: 40px; }
}

/* ---------- Anhangschein: Rueckmeldung an die Verwaltung ----------
   Die Ansicht war eine Nachbildung des Papierformulars: Tabellen-Layout mit
   "border: 1px solid #000" in jeder Zelle und dem Orange als feste Farbe. Im
   Dunkelmodus standen damit schwarze Linien auf dunklem Grund. Jetzt traegt sie
   dieselben Karten und Tabellen wie der Rest des Hauses (07.09.2026). */
.jac-ab-nummer { font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--jac-muted); font-size: .78em; letter-spacing: .02em; }

.jac-ab-summe { display: inline-flex; align-items: baseline; gap: 9px;
  font-size: 13px; color: var(--jac-muted); }
.jac-ab-summe b { font-size: 19px; color: var(--jac-ink);
  font-variant-numeric: tabular-nums; }

.jac-table-scroll { overflow-x: auto; }

table.jac-ab-zeiten { width: 100%; }
table.jac-ab-zeiten th, table.jac-ab-zeiten td { padding: 7px 12px; white-space: nowrap; }
table.jac-ab-zeiten tbody tr:hover td { background: var(--jac-hair); }
.jac-rechts { text-align: right; font-variant-numeric: tabular-nums; }

/* Wochenende und Nachtstunden - im Ausdruck fett, hier zusaetzlich in der Warnfarbe,
   damit man sieht, dass es eine Bedeutung hat. Die Legende unter der Tabelle sagt welche. */
.jac-ab-hervor { font-weight: 700; color: var(--jac-warn); }

/* Was eine Person zusammen gearbeitet hat - stand vorher als leere Zeile da */
.jac-ab-zwischensumme td { background: var(--jac-hair); color: var(--jac-muted);
  font-size: 12.5px; border-bottom: 2px solid var(--jac-border); }
.jac-ab-zwischensumme td b { color: var(--jac-ink); font-size: 13.5px; }

.jac-ab-legende { margin: 10px 16px 4px; font-size: 12px; color: var(--jac-muted); }

/* Die beiden Wege der Verwaltung: durchlassen oder mit einer Rueckfrage zurueckgeben.
   Nebeneinander, damit man beide sieht, bevor man sich entscheidet; auf schmalen
   Geraeten untereinander. */
/* Zwei gleich breite Wege nebeneinander, untereinander sobald es eng wird.
   Bewusst Flexbox statt Raster: Ein Raster mit auto-fit legte am Schreibtisch eine
   dritte, leere Spalte an und machte die beiden Kaesten schmaler als noetig; ein
   fester Umbruchpunkt am Fenster wiederum kennt die Seitenleiste nicht und liess
   sie auf dem iPad nebeneinander stehen (07.09.2026). */
.jac-ab-entscheidung { display: flex; flex-wrap: wrap; gap: 14px; }
.jac-ab-weg { flex: 1 1 320px; }

/* Fusszeile der Anhangschein-Ansicht: Herunterladen links, Abbrechen und die
   uebrigen rechts - auf einer Linie. */
.jac-ab-fusszeile { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; margin-top: 14px; }

/* Luft zwischen zwei Abschnitten. Die Ansichten setzten dafuer "mt-10 sm:mt-0" -
   der Abstand galt also nur auf schmalen Geraeten und war am Schreibtisch wieder
   aufgehoben; die Ueberschrift des naechsten Abschnitts klebte am Kasten darueber.
   Der Name lautet bewusst nicht "jac-abschnitt": Den gibt es schon als
   Ueberschriftszeile im Job-Log, und der ist ein Flex-Kasten - Titel und Karte
   standen dadurch nebeneinander (07.09.2026). */
/* Der Abstand haengt am Abschnitt selbst, nicht am Geschwister davor: Die
   Ansichten wickeln jeden Abschnitt in ein eigenes <div>, damit sind zwei
   Abschnitte nie direkte Nachbarn - ein "+"-Selektor griff nie, und alles klebte
   aneinander (Ron, 07.09.2026). */
.jac-seitenabschnitt { margin-bottom: 26px; }

/* Der Trenner aus Jetstream: nur noch Luft, keine Linie mehr - die Karten trennen
   ohnehin.

   Die Hoehe muss fuer sich allein reichen: Auf den Einstellungsseiten (Profil,
   Zugriffstoken) stehen die Kaesten nicht in Abschnitten, dort ist er der einzige
   Abstand. Zwischen Abschnitten kommt er zu deren 26 px hinzu. */
.jac-abschnitt-trenner { height: 24px; }

/* Kein ":last-child" hier: Jeder Abschnitt steckt allein in seinem Wrapper und ist
   damit immer letztes Kind - die Ausnahme haette den Abstand ueberall auf null
   gesetzt (07.09.2026). */

/* ---------- Mitarbeiterseite: zwei Spalten ----------
   Links, was den Arbeitsalltag betrifft (Stammdaten, Urlaub), rechts die Angaben
   zur Person und ihrer Ausstattung. Vorher stand alles untereinander, getrennt
   durch Linien; die Seite war doppelt so lang und die halbe Breite blieb leer. */
.jac-mitarbeiter { display: grid; gap: 22px; align-items: start;
  grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) {
  .jac-mitarbeiter { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
}
.jac-mitarbeiter-haupt, .jac-mitarbeiter-seite { min-width: 0; }

/* ---------- Zugang und Zustellung ----------
   Drei Zeilen, jede mit einem Zustand und den Handlungen dazu. Der Wert steht links,
   die Knoepfe rechts am Rand - vorher standen sie direkt hinter dem Wert und die
   Zeile wirkte gedraengt. */
table.jac-zugang { width: 100%; border-collapse: collapse; }
table.jac-zugang tr + tr td { border-top: 1px solid var(--jac-hair); }
table.jac-zugang td { padding: 12px 0; vertical-align: middle; }
table.jac-zugang td:first-child { width: 255px; padding-right: 16px; color: var(--jac-ink); }
table.jac-zugang td:first-child b { font-weight: 650; }

/* Wert links, Handlungen rechts.

   Der Zustand steht je nach Zeile als blosser Text ("E-Mail") oder als verdeckter
   Wert mit Auge daneben. Alles, was danach kommt, sind Handlungen - sie ruecken an
   den rechten Rand: einmal ueber den Wert selbst (margin-right), einmal ueber das
   erste Formular (margin-left), je nachdem was die Zeile hergibt. */
table.jac-zugang td:last-child { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; }
table.jac-zugang td:last-child form { margin: 0; }
table.jac-zugang td:last-child > span[id] { margin-right: auto; }
table.jac-zugang td:last-child > form:first-of-type { margin-left: auto; }
table.jac-zugang td:last-child > span[id] ~ form { margin-left: 0; }

/* Der Zeilenumbruch zwischen Wert und Handlungen kommt aus der Zeit, als beide
   untereinander standen - im Flex-Kasten wuerde er eine Luecke reissen. */
table.jac-zugang td:last-child br { display: none; }

/* Die kleinen Knoepfe darin sind Handlungen, keine Fliesstext-Verweise */
table.jac-zugang .jac-btn { flex: none; }

/* Wer wenig Rechte hat, sieht rechts gar nichts - dann soll links nicht die halbe
   Seite leer bleiben. */
.jac-mitarbeiter:not(:has(.jac-mitarbeiter-seite .jac-seitenabschnitt)) {
  grid-template-columns: minmax(0, 1fr);
}

/* Abstand zum naechsten Knopf - fuer den Zurueck-Knopf, den das Layout einfuegt */
.jac-mr-8 { margin-right: 8px; }

/* "Text anpassen" auf der Unterschriftsseite - zugeklappt, damit die Seite ruhig
   bleibt; wer etwas richtigstellen will, klappt es auf. */
.jac-text-aendern { margin-top: 18px; border-top: 1px solid var(--jac-hair); padding-top: 14px; }
.jac-text-aendern > summary { display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font-size: 13px; font-weight: 650; color: var(--jac-muted);
  min-height: 40px; list-style: none; }
.jac-text-aendern > summary::-webkit-details-marker { display: none; }
.jac-text-aendern > summary:hover { color: var(--jac-ink); }
.jac-text-aendern[open] > summary { color: var(--jac-ink); }

/* Die Platzhalter in einer Zeile - beim Anpassen genuegt die Aufzaehlung,
   die Bedeutung steht im Titel jedes Eintrags. */
.jac-platzhalter-zeile { margin: 12px 0 0; font-size: 12px; color: var(--jac-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jac-platzhalter-zeile code { background: var(--jac-hair); border-radius: 5px;
  padding: 2px 6px; color: var(--jac-ink); cursor: help; }

/* Abschnittstitel ueber dem Inhalt (statt in einer eigenen Spalte daneben), die
   Knoepfe des Abschnitts daneben statt darunter */
.jac-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.jac-abschnitt-titel { margin: 0; padding: 0 2px; }
.jac-abschnitt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.jac-ab-weg { border: 1px solid var(--jac-border); border-radius: 12px; padding: 14px 16px;
  background: var(--jac-surface); display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; }
.jac-ab-weg-kopf { display: flex; align-items: center; gap: 8px; font-weight: 700;
  color: var(--jac-ink); margin-bottom: 4px; }
.jac-ab-weg-kopf .ti { font-size: 18px; color: var(--jac-muted); }
.jac-ab-weg-text { margin: 0 0 12px; font-size: 13px; color: var(--jac-muted); }
.jac-ab-weg-marke { font-size: 12px; font-weight: 650; color: var(--jac-ink); margin-bottom: 4px; }
.jac-ab-weg-fehler { display: block; margin-top: 6px; font-size: 12.5px; color: var(--jac-danger); }
.jac-ab-weg .jac-input, .jac-ab-weg input[type="text"] { width: 100%; }
.jac-ab-bemerkung { margin: 0; white-space: pre-line; color: var(--jac-ink); }

/* ---------- Pagination (jac-Stil, light+dark, Touch-Targets) ---------- */
.jac-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.jac-pag-info { font-size: 13px; color: var(--jac-muted); margin: 0; }
.jac-pag-info b { color: var(--jac-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.jac-pag-links { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.jac-pag-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
  padding: 0 10px; border-radius: 9px; border: 1px solid var(--jac-border); background: var(--jac-surface);
  color: var(--jac-ink); font-size: 13px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s, color .12s; }
.jac-pag-link:hover { background: var(--jac-rowhover); border-color: var(--jac-faint); }
.jac-pag-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-pag-link.is-current { background: var(--jac-ink900); color: var(--jac-primary-ink); border-color: var(--jac-ink900); }
.jac-pag-link.is-disabled { color: var(--jac-faint); cursor: default; background: transparent; }
.jac-pag-link.is-disabled:hover { border-color: var(--jac-border); }
.jac-pag-link svg { width: 16px; height: 16px; }
/* Der schwache Ton liegt auf dem hellgrauen Seitengrund bei 4,2:1 */
.jac-pag-dots { padding: 0 4px; color: var(--jac-muted); }
@media (pointer: coarse) { .jac-pag-link { min-width: 40px; height: 40px; } }

/* Pagination als <button> (Livewire wire:click) korrekt darstellen */
button.jac-pag-link { font-family: inherit; cursor: pointer; }
.jac-pag-link.is-current, .jac-pag-link.is-disabled { cursor: default; }

/* ============================================================
   WELLE 2c – Flaechen, Formulare, Modals, Menues (light + dark)
   Alles token-basiert: eine Definition, beide Themes.
   ============================================================ */

/* ---------- Panel (Jetstream form-/action-section, Auth-Card, freie Panels) ---------- */
.jac-panel { background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,28,38,.05), 0 6px 16px -10px rgba(20,28,38,.14);
  overflow: hidden; text-align: left; }
.jac-panel-body { padding: 20px 22px; }
.jac-panel-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 12px 22px; background: var(--jac-hair); border-top: 1px solid var(--jac-border); }
html[data-theme="dark"] .jac-panel { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -10px rgba(0,0,0,.55); }

/* Abschnittstitel links neben dem Panel */
.jac-sec-title { font-size: 16px; font-weight: 700; color: var(--jac-ink); margin: 0; }
.jac-sec-desc { margin: 4px 0 0; font-size: 13px; color: var(--jac-muted); }
.jac-muted-text { color: var(--jac-muted); }

/* In der Kopfzeile steht derselbe Ton auf hellgrauem Grund statt auf Weiss, und
   damit unter der Lesbarkeitsschwelle: gemessen 4,29:1 gegen bg-gray-200, gefordert
   sind 4,5:1 (10.09.2026; in der Entwicklungsumgebung sieht man 3,92, weil der
   Balken dort orange ist). Auf Weiss bleibt der Ton, wie er ist - dort sind es
   5,31:1. Im Dunkelmodus aendert sich nichts, dort waren es 6,27:1. */
html:not([data-theme="dark"]) .jac-topbar .jac-muted-text { color: #555c65; }
.jac-error-text { font-size: 13px; color: var(--jac-danger); }
.jac-hr { border-top: 1px solid var(--jac-border); }

/* ---------- Formular-Control (x-jet-input & Co.; Breite kommt aus der View) ---------- */
.jac-ctrl { font: inherit; font-size: 13.5px; color: var(--jac-ink); background: var(--jac-field);
  border: 1px solid var(--jac-border); border-radius: 9px; padding: 8px 11px; outline: none;
  transition: border-color .13s, box-shadow .13s; }
.jac-ctrl:focus { border-color: var(--jac-accent); box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-ctrl[disabled], .jac-ctrl:disabled, .jac-ctrl[readonly] { background: var(--jac-hair); color: var(--jac-faint); }
.jac-input-addon { background: var(--jac-hair); color: var(--jac-muted); border: 1px solid var(--jac-border);
  border-left: 0; border-radius: 0 9px 9px 0; }
/* Feld mit angehaengtem Addon (z.B. Loeschen-X in der Spaltensuche) */
.jac-ctrl-joined { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
@media (pointer: coarse) { .jac-ctrl { min-height: 40px; } }

/* ---------- Alerts (Validierung, Interaktions-Meldungen) ---------- */
/* Innenabstand gehoert an den Kasten selbst: ohne ihn klebte der Text am Rand, und
   einzelne Stellen holten das mit eigenen Klassen nach - die meisten aber nicht. */
.jac-alert { padding: 10px 13px; border-radius: 10px; border: 1px solid transparent; }
.jac-alert-ok { background: var(--jac-ok-soft); color: var(--jac-ok); border-color: var(--jac-ok); }
.jac-alert-warn { background: var(--jac-warn-soft); color: var(--jac-warn); border-color: var(--jac-warn); }
.jac-alert-danger { background: var(--jac-danger-soft); color: var(--jac-danger); border-color: var(--jac-danger); }
.jac-alert-info { background: var(--jac-info-soft); color: var(--jac-info); border-color: var(--jac-info); }

/* ---------- Modal (x-jet-modal / dialog / confirmation) ---------- */
.jac-modal-backdrop { background: rgba(20,28,38,.55); }
html[data-theme="dark"] .jac-modal-backdrop { background: rgba(0,0,0,.68); }
.jac-modal-panel { background: var(--jac-surface); color: var(--jac-ink); text-align: left;
  border: 1px solid var(--jac-border); }
.jac-modal-title { font-size: 16.5px; font-weight: 700; color: var(--jac-ink); }
.jac-modal-foot { background: var(--jac-hair); border-top: 1px solid var(--jac-border); }
.jac-modal-badge { background: var(--jac-danger-soft); color: var(--jac-danger); }

/* ---------- Dropdown-Menue ---------- */
.jac-menu { background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: 8px; text-align: left; }
.jac-menu-link { color: var(--jac-ink); text-decoration: none; }
.jac-menu-link:hover, .jac-menu-link:focus { background: var(--jac-rowhover); color: var(--jac-ink); }

/* Aktionsmenue einer Listenseite: Die selteneren Aktionen stehen hier statt als
   Knopfreihe ueber der Liste (11.09.2026). Breiter als das Benutzermenue, weil die
   Beschriftungen ganze Saetze sind ("Lohnabrechnungen ausdrucken, Vormonat"). */
.jac-menue-breit { width: 20rem; }

/* Zweite Zeile in einer Tabellenzelle: die Personalnummer unter dem Namen, die
   Objektnummer unter dem Objektnamen. So traegt eine Spalte, was vorher zwei
   brauchten - und der Name wird nicht mehr abgeschnitten (11.09.2026, UMBAU.md B1). */
.jac-zeile-zusatz { font-size: 12.5px; color: var(--jac-muted); margin-top: 1px; }
/* Lange Objekt- und Geraetenamen brauchen eine Grenze: die Tabellenzellen tragen
   whitespace-nowrap, eine einzige lange Zeile schiebt die ganze Tabelle ueber den
   Bildschirm hinaus. Abgeschnitten wurde frueher nach 40 Zeichen - ein Name, der mit
   "..." endet, ist aber nicht mehr lesbar. Hier bricht er stattdessen um. */
.jac-zelle-eng { display: block; min-width: 10rem; max-width: 17rem; white-space: normal;
  overflow-wrap: break-word; }
/* Zwei Zeilen, dann Schluss - der volle Text steht im Titel und bleibt durchsuchbar.
   Vorher schnitt die Ansicht nach zwoelf Zeichen hart ab ("Bitte Rechn..."). */
.jac-zelle-kurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; max-width: 14rem; }
/* Nur die Schriftfamilie erben, nicht die Groesse: "font: inherit" ist eine
   Kurzschreibweise und setzt auch font-size zurueck - der Knopf im Menue wurde dadurch
   groesser als der Verweis daneben ("Zugangsdaten drucken" neben "... exportieren").
   Groesse und Zeilenhoehe kommen aus denselben Klassen wie beim Verweis. */
.jac-menu-knopf { display: block; width: 100%; text-align: left; background: transparent;
  border: 0; font-family: inherit; font-size: .875rem; line-height: 1.25rem; font-weight: 400;
  cursor: pointer; }
.jac-menu-trenner { height: 1px; background: var(--jac-hair); margin: 5px 0; }
.jac-menu-kopf { padding: 7px 16px 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jac-faint); }

/* ---------- QR-Codes ----------
   Die QR-Bilder der App sind transparent (SVG von Fortify, PNG von milon/barcode):
   nur die dunklen Module sind gefuellt. Auf dunklem Grund waeren sie nicht mehr
   scannbar, deshalb immer heller Grund plus Ruhezone - unabhaengig vom Theme. */
.jac-qr { display: inline-block; background: #ffffff; padding: 12px; border-radius: 12px;
  border: 1px solid var(--jac-border); line-height: 0; }
.jac-qr svg, .jac-qr img { display: block; max-width: 100%; height: auto; }

/* ---------- Login-/Gast-Seiten ---------- */
.jac-guest { color: var(--jac-ink); }
.jac-auth-wrap { background: var(--jac-hair); }
html[data-theme="dark"] .jac-auth-wrap { background: #14181e; }
.jac-auth-card { text-align: left; }

/* ============================================================
   DARK-KOMPATIBILITAET fuer noch nicht umgestellte Views.
   Bildet die alten Tailwind-Utilities auf die Tokens ab, damit JEDES Modul
   im Dark lesbar ist. Faellt weg, sobald eine View auf jac-* umgestellt ist.
   Scope: Content-Flaeche, Modal-Panels, Auth-Seiten (nicht die Sidebar!).
   ============================================================ */

/* --- Flaechen --- */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest) .bg-white
  { background-color: var(--jac-surface) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest) :is(.bg-gray-50, .bg-gray-100)
  { background-color: var(--jac-hair) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest) :is(.bg-gray-200, .bg-slate-200)
  { background-color: rgba(255,255,255,.06) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest) :is(.bg-gray-300, .bg-slate-300)
  { background-color: rgba(255,255,255,.10) !important; }
/* Tabellenkoepfe brauchen Kontrast zur Zeilenflaeche */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) thead .bg-white
  { background-color: var(--jac-hair) !important; }

/* Zebra-Zeilen: Tailwind erzeugt eigene Klassen fuer even:/odd:, die von den
   Basisregeln oben NICHT getroffen werden (z.B. Telefonliste, Berichte). */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) :is(.even\:bg-white:nth-child(even), .odd\:bg-white:nth-child(odd))
  { background-color: var(--jac-surface) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel)
  :is(.even\:bg-gray-50:nth-child(even), .even\:bg-gray-100:nth-child(even),
      .odd\:bg-gray-50:nth-child(odd), .odd\:bg-gray-100:nth-child(odd))
  { background-color: var(--jac-hair) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel)
  :is(.even\:bg-slate-200:nth-child(even), .odd\:bg-slate-200:nth-child(odd),
      .even\:bg-gray-200:nth-child(even), .odd\:bg-gray-200:nth-child(odd))
  { background-color: rgba(255,255,255,.06) !important; }

/* Helle Hover-/Active-Flaechen im Dark auf die Zeilen-Hover-Farbe ziehen */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel)
  :is(.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover,
      .active\:bg-gray-100:active, .focus\:bg-gray-50:focus, .focus\:bg-gray-100:focus)
  { background-color: var(--jac-rowhover) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel)
  :is(.hover\:text-gray-500:hover, .hover\:text-gray-600:hover, .hover\:text-gray-700:hover,
      .hover\:text-gray-800:hover, .hover\:text-gray-900:hover, .focus\:text-gray-700:focus, .focus\:text-gray-800:focus)
  { color: var(--jac-ink) !important; }

/* --- Texte --- */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-black) { color: var(--jac-ink) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-gray-600, .text-gray-500) { color: var(--jac-muted) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-gray-400, .text-gray-300) { color: var(--jac-faint) !important; }

/* Semantische Textfarben auf die helleren Dark-Varianten ziehen.
   Ausgenommen: Text auf farbigem Vollton-Grund (dort bleibt der Kontrast erhalten). */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-red-700, .text-red-600, .text-red-500, .text-red-400) { color: var(--jac-danger) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-emerald-700, .text-emerald-600, .text-emerald-500, .text-emerald-400, .text-green-700, .text-green-600, .text-green-500)
  { color: var(--jac-ok) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-blue-600, .text-blue-500, .text-indigo-800, .text-indigo-700, .text-indigo-500)
  { color: var(--jac-info) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.text-orange-600, .text-orange-500, .text-yellow-600) { color: var(--jac-warn) !important; }

/* --- Rahmen + Trennlinien (border-black steckt in sehr vielen Alt-Tabellen) --- */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(.border-black, .border-grey, .border-gray-100, .border-gray-200, .border-gray-300, .border-gray-400,
      .border-gray-500, .border-gray-600, .border-gray-700, .border-gray-800, .border-gray-900)
  { border-color: var(--jac-border) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) :is(.divide-gray-200, .divide-gray-300, .divide-black)
  > :not([hidden]) ~ :not([hidden]) { border-color: var(--jac-border) !important; }

/* --- Formularfelder app-weit (rohe input/select/textarea ohne jac-Klasse) --- */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
      select, textarea)
  { background-color: var(--jac-field); color: var(--jac-ink); border-color: var(--jac-border); }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest) option
  { background-color: var(--jac-surface); color: var(--jac-ink); }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest) ::placeholder
  { color: var(--jac-faint); opacity: 1; }
/* Ankreuzfelder brauchen hier nichts mehr: seit A-79 sind sie nachgebaut und folgen
   den Farbtokens, also in Hell und Dunkel von sich aus richtig. Frueher standen hier
   accent-color und eine Notbremse gegen weisse Flecken im dunklen Formular. */
/* Datums-/Zeit-Picker-Icon der Browser-Felder im Dark sichtbar machen */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel, .jac-guest)
  :is(input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator
  { filter: invert(.75); }

/* --- Getoente Status-/Hinweisflaechen (100er-Stufen) --- */
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) .bg-red-100 { background-color: var(--jac-danger-soft) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) :is(.bg-green-100, .bg-emerald-100) { background-color: var(--jac-ok-soft) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) :is(.bg-orange-100, .bg-yellow-100) { background-color: var(--jac-warn-soft) !important; }
html[data-theme="dark"] :is(.jac-content, .jac-modal-panel) :is(.bg-blue-100, .bg-indigo-100) { background-color: var(--jac-info-soft) !important; }

/* --- Pikaday-Datepicker (CDN-CSS) im Dark --- */
html[data-theme="dark"] .pika-single { background: var(--jac-surface); border-color: var(--jac-border); color: var(--jac-ink); }
html[data-theme="dark"] .pika-title,
html[data-theme="dark"] .pika-label { background: var(--jac-surface); color: var(--jac-ink); }
html[data-theme="dark"] .pika-table th { color: var(--jac-muted); }
html[data-theme="dark"] .pika-button { background: var(--jac-hair); color: var(--jac-ink); }
html[data-theme="dark"] .pika-button:hover { background: var(--jac-accent); color: var(--jac-accent-ink); }
html[data-theme="dark"] .is-today .pika-button { color: var(--jac-accent); }
html[data-theme="dark"] .is-selected .pika-button { background: var(--jac-accent); color: var(--jac-accent-ink); box-shadow: none; }
html[data-theme="dark"] .is-disabled .pika-button { color: var(--jac-faint); opacity: .5; }
html[data-theme="dark"] .pika-prev, html[data-theme="dark"] .pika-next { filter: invert(.85); }

/* --- Vorschau-Modal (Signaturen/Dokumente) --- */
html[data-theme="dark"] .jacpreview-dialog { background: var(--jac-surface); }
html[data-theme="dark"] .jacpreview-body { background: #10141a; }

/* ============================================================
   ORGANIGRAMM (company/organizationchart)
   Fuehrungsebene als Karten, darunter aufklappbare Bloecke - ohne Fremdbibliothek.
   ============================================================ */
.org { max-width: 1180px; margin: 0 auto; padding: 18px 16px 48px; text-align: left; }

.org-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.org-search { flex: 1 1 240px; max-width: 360px; }
.org-search .ti { font-size: 18px !important; color: var(--jac-faint); flex: none; }
.org-total { font-size: 12.5px; color: var(--jac-muted); font-variant-numeric: tabular-nums; }
.org-tool-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* ---------- Gliederung: zwei Ansichten ----------
   "Struktur" laeuft vertikal (passt ohne Zoom auf jeden Bildschirm),
   "Diagramm" ist der klassische breite Org-Baum. */
.orgstruct { margin-bottom: 24px; }
.orgstruct-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.orgstruct-switch { display: inline-flex; }
.orgstruct-switch .jac-btn { border-radius: 0; }
.orgstruct-switch .jac-btn:first-child { border-radius: 9px 0 0 9px; }
.orgstruct-switch .jac-btn:last-child { border-radius: 0 9px 9px 0; margin-left: -1px; }
.orgstruct-switch .jac-btn.is-on { background: var(--jac-ink900); border-color: var(--jac-ink900);
  color: var(--jac-primary-ink); position: relative; z-index: 1; }
.orgstruct-switch .jac-btn.is-on .ti { color: inherit; }
.orgstruct .orgtree-zoom { margin-left: auto; }

.orgstruct[data-orgview="list"] .orgtree-scroll,
.orgstruct[data-orgview="list"] .orgtree-zoom { display: none; }
.orgstruct[data-orgview="tree"] .orgv { display: none; }

/* ---------- Ansicht 1: vertikale Struktur ----------
   Einrueckung statt Nebeneinander; die Verbindungslinien entstehen aus
   ::before/::after der Listenelemente. */
.orgv { border: 1px solid var(--jac-border); border-radius: 14px; background: var(--jac-surface);
  padding: 14px 16px 16px; }
.orgv-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  padding: 10px 14px; border-radius: 11px; background: var(--jac-ink900); color: var(--jac-primary-ink); }
.orgv-lead-ico { font-size: 17px !important; color: inherit; opacity: .7; flex: none; }
.orgv-lead-title { font-size: 13.5px; font-weight: 700; }
.orgv-lead-names { font-size: 12.5px; opacity: .8; }
.orgv-sep { padding: 0 4px; opacity: .5; }

.orgv-tree, .orgv-sub { list-style: none; margin: 0; padding: 0; }
.orgv-tree > li, .orgv-sub > li { position: relative; padding-left: 22px; list-style: none; }
.orgv-tree > li::before, .orgv-sub > li::before {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0; border-left: 2px solid var(--jac-hair); }
.orgv-tree > li:last-child::before, .orgv-sub > li:last-child::before { bottom: auto; height: 17px; }
.orgv-tree > li::after, .orgv-sub > li::after {
  content: ''; position: absolute; left: 8px; top: 17px; width: 12px; border-top: 2px solid var(--jac-hair); }

.orgv-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px;
  min-height: 30px; padding: 6px 9px; margin: 1px 0; border-radius: 8px;
  text-decoration: none; color: inherit; }
a.orgv-row { cursor: pointer; transition: background-color .12s; }
a.orgv-row:hover { background: var(--jac-rowhover); }
a.orgv-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
.orgv-row-group { margin-top: 6px; }
.orgv-ico { font-size: 16px !important; color: var(--jac-muted); align-self: center; flex: none; }
.orgv-title { font-size: 13.5px; font-weight: 650; color: var(--jac-ink); }
.orgv-row-group > .orgv-title { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--jac-muted); }
.orgv-person { font-size: 12.5px; color: var(--jac-muted); }
.orgv-pos { font-size: 11.5px; color: var(--jac-faint); }
/* Zahl direkt hinter dem Text - rechtsbuendig waere bei langen Zeilen nicht mehr zuzuordnen */
.orgv-count { align-self: center; flex: none; min-width: 22px; padding: 1px 8px;
  border-radius: 999px; background: var(--jac-hair); font-size: 11px; font-weight: 700;
  color: var(--jac-muted); text-align: center; font-variant-numeric: tabular-nums; }

/* Zwischenebene Stabsstellen/Externe: abgesetzt wie im Diagramm */
.orgv-branch-aside > .orgv-row-group > .orgv-title { color: var(--jac-accent-press); }
html[data-theme="dark"] .orgv-branch-aside > .orgv-row-group > .orgv-title { color: var(--jac-accent); }
.orgv-branch-aside > .orgv-sub > li::before, .orgv-branch-aside > .orgv-sub > li::after { border-style: dashed; }

/* ---------- Ansicht 2: klassisches Diagramm ---------- */
.orgtree-zoom { display: flex; gap: 4px; }
.orgtree-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 0 18px;
  border: 1px solid var(--jac-border); border-radius: 14px; background: var(--jac-surface); }
.orgtree { display: inline-block; min-width: 100%; padding: 18px 20px 6px; }
.orgtree ul { display: flex; justify-content: center; position: relative; padding: 22px 0 0; margin: 0; list-style: none; }
.orgtree li { position: relative; padding: 22px 7px 0; text-align: center; list-style: none; }

/* waagerechte Verbinder zwischen Geschwistern */
.orgtree li::before, .orgtree li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  border-top: 2px solid var(--jac-border); width: 50%; height: 22px;
}
.orgtree li::after { right: auto; left: 50%; border-left: 2px solid var(--jac-border); }
.orgtree li:only-child::before, .orgtree li:only-child::after { display: none; }
.orgtree li:only-child { padding-top: 0; }
.orgtree li:first-child::before, .orgtree li:last-child::after { border: 0 none; }
.orgtree li:last-child::before { border-right: 2px solid var(--jac-border); border-radius: 0 6px 0 0; }
.orgtree li:first-child::after { border-radius: 6px 0 0 0; }

/* senkrechter Verbinder vom Elternkasten nach unten */
.orgtree ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--jac-border); width: 0; height: 22px;
}
.orgtree-root { padding-top: 0; }
.orgtree-root > li { padding-top: 0; }
.orgtree-root > li::before, .orgtree-root > li::after { display: none; }

/* Kasten */
.orgbox { display: inline-flex; flex-direction: column; gap: 1px; min-width: 148px; max-width: 210px;
  padding: 9px 12px; border: 1px solid var(--jac-border); border-radius: 10px; background: var(--jac-surface);
  text-decoration: none; color: inherit; text-align: center; position: relative;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  /* ohne vertical-align bleibt unter jeder Box der Descender-Spalt der Zeile stehen -
     die Verbindungslinien setzen dann sichtbar versetzt an */
  vertical-align: top; }
a.orgbox { cursor: pointer; }
a.orgbox:hover { border-color: var(--jac-accent); box-shadow: 0 4px 14px -6px rgba(20,28,38,.35); transform: translateY(-1px); }
a.orgbox:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
/* lange Bezeichnungen ("Qualitaets- und Umweltmanagementbeauftragter") muessen im
   Kasten umbrechen statt herauszulaufen - hyphens braucht das lang-Attribut am <html> */
.orgbox > * { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.orgbox-title { font-size: 12.5px; font-weight: 700; color: var(--jac-ink); line-height: 1.25; }
.orgbox-person { font-size: 11.5px; color: var(--jac-muted); }
.orgbox-pos { font-size: 10.5px; color: var(--jac-faint); }
.orgbox-count { position: absolute; top: -8px; right: -8px; min-width: 20px; padding: 1px 6px;
  border-radius: 999px; background: var(--jac-hair); border: 1px solid var(--jac-border);
  font-size: 10.5px; font-weight: 700; color: var(--jac-muted); font-variant-numeric: tabular-nums; }

/* Wurzel: Geschaeftsfuehrung kraeftiger */
.orgbox-lead { background: var(--jac-ink900); border-color: var(--jac-ink900); min-width: 210px; padding: 11px 16px; }
.orgbox-lead .orgbox-title { color: var(--jac-primary-ink); font-size: 13.5px; }
.orgbox-lead .orgbox-person { color: var(--jac-primary-ink); opacity: .75; }

/* Zwischenebene: Stabsstellen und Externe als eigene waagerechte Ebene zwischen
   Geschaeftsleitung und Einheiten.

   Zwei gleich breite Haelften (flex-basis 0) - dadurch liegt die Grenze zwischen
   ihnen immer exakt auf der Mitte, egal wie viele Kaesten je Seite stehen. Der
   Strang von der Geschaeftsleitung laeuft durch diese Luecke, also nie hinter
   einem Kasten: Stabsstellen haengen an der Leitung, stehen aber nicht ueber den
   Einheiten. Weil die Kaesten eine feste Breite haben, lassen sich Verteilerlinie
   und Stiche ohne JS exakt setzen (--orgstem-box / --orgstem-gap). */
.orgstem { --orgstem-box: 176px; --orgstem-gap: 72px;
  position: relative; display: flex; align-items: stretch; gap: 0 var(--orgstem-gap);
  padding: 44px 0 6px; }
/* Strang der Geschaeftsleitung: durch die Luecke bis zur Einheitenebene */
.orgstem::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 2px solid var(--jac-border); }
.orgstem-half { flex: 1 1 0; min-width: 0; display: flex; align-items: stretch; }
.orgstem-half-l { justify-content: flex-end; }
.orgstem-half-r { justify-content: flex-start; }
/* der innere Wrapper ist genau so breit wie die Kaesten - daran haengt die
   Verteilerlinie, die von der Mitte des aeussersten Kastens bis zur Mitte der
   Luecke laeuft (die Haelften selbst sind so breit wie der ganze Baum) */
.orgstem-boxes { position: relative; display: flex; align-items: stretch; gap: 14px; }
.orgstem-boxes::before { content: ''; position: absolute; top: -22px; height: 0;
  border-top: 2px solid var(--jac-border); }
.orgstem-half-l .orgstem-boxes::before { left: calc(var(--orgstem-box) / 2); right: calc(var(--orgstem-gap) / -2); }
.orgstem-half-r .orgstem-boxes::before { right: calc(var(--orgstem-box) / 2); left: calc(var(--orgstem-gap) / -2); }
.orgstem-boxes:empty::before { display: none; }
/* Stich von der Verteilerlinie zum Kasten */
.orgstem .orgbox { width: var(--orgstem-box); min-width: 0; max-width: none;
  padding: 8px 10px; justify-content: center; }
.orgstem .orgbox::before { content: ''; position: absolute; left: 50%; top: -22px; height: 22px;
  border-left: 2px solid var(--jac-border); }
.orgstem .orgbox-title { font-size: 12px; }
/* Externe: gestrichelt abgesetzt, wie in den Detailbloecken weiter unten */
.orgbox-external { border: 2px dashed var(--jac-faint); }
.orgbox-external .orgbox-title { color: var(--jac-muted); }

.orgbox-sub { min-width: 132px; font-size: 12px; background: var(--jac-hair); }

/* Sprung aus Struktur/Diagramm: Ziel bleibt markiert, damit man sich nach dem
   Scrollen zurechtfindet; scroll-margin haelt es unter der Kopfleiste frei. */
.org-unit, .org-node, .org-suborg, .org-side-card { scroll-margin-top: 96px; }
/* outline statt box-shadow: die Karten bringen eigene Schatten mit (u. a. eine
   Dark-Regel mit hoeherer Spezifitaet), die eine Markierung per box-shadow schlucken */
.is-orgtarget { outline: 2px solid var(--jac-accent); outline-offset: 0; border-radius: 12px; }
.org-node.is-orgtarget, .org-suborg.is-orgtarget { background: var(--jac-rowhover); }
/* angeklickter Kasten bzw. angeklickte Zeile bleibt ebenfalls markiert */
a.orgbox.is-on { border-color: var(--jac-accent); box-shadow: 0 0 0 2px var(--jac-focus); }
a.orgv-row.is-on { background: var(--jac-rowhover); box-shadow: inset 3px 0 0 var(--jac-accent); }

.org-level-title { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jac-muted); margin: 0 0 10px; }
.org-level-title small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--jac-faint); margin-top: 2px; }
.org-section-title { margin-top: 26px; }

/* Fuehrungsebene */
/* linksbuendig wie alle anderen Bloecke - zentriert wirkte im Seitenfluss versetzt */
.org-level-top { text-align: left; }
.org-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.org-card { flex: 0 1 260px; background: var(--jac-surface); border: 1px solid var(--jac-border);
  border-radius: 12px; padding: 12px 14px; text-align: left;
  box-shadow: 0 1px 2px rgba(20,28,38,.05), 0 6px 16px -12px rgba(20,28,38,.2); }
html[data-theme="dark"] .org-card { box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -12px rgba(0,0,0,.55); }
.org-card-name { font-weight: 700; font-size: 14px; color: var(--jac-ink); }
.org-card-pos { font-size: 12.5px; color: var(--jac-accent-press); font-weight: 600; margin-top: 1px; }
html[data-theme="dark"] .org-card-pos { color: var(--jac-accent); }
.org-card-contact { display: flex; flex-direction: column; gap: 2px; margin-top: 7px; font-size: 12px; }
.org-card-contact a { display: inline-flex; align-items: center; gap: 6px; color: var(--jac-muted);
  text-decoration: none; overflow-wrap: anywhere; }
.org-card-contact a:hover { color: var(--jac-ink); }
.org-card-contact .ti { font-size: 14px !important; color: var(--jac-faint); flex: none; }

/* Verbindung von der Fuehrungsebene nach unten */
.org-connector { width: 2px; height: 22px; margin: 0 auto; background: var(--jac-border); }

/* Stabsstellen und Externe: die beiden Karten untereinander ueber die volle Breite,
   die Eintraege darin als Raster. Nebeneinander waere die kurze Externen-Karte genauso
   hoch wie die lange Stabsstellen-Karte - daneben stand eine grosse Leerflaeche. */
.org-side { display: block; margin-top: 30px; }
.org-side-card + .org-side-card { margin-top: 14px; }
.org-side-card > .jac-card-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 4px 18px; }
/* Externe deutlich als "nicht zum Haus gehoerend" kennzeichnen - die duenne
   gestrichelte Linie in der Rahmenfarbe war kaum zu sehen */
.org-side-external { border: 2px dashed var(--jac-faint); }
.org-node { padding: 7px 9px; border-radius: 10px; }
.org-node:hover { background: var(--jac-rowhover); }
/* im schmalen Raster passen Name, Mail und Telefon nicht nebeneinander */
.org-side .org-person { grid-template-columns: 1fr; gap: 1px; padding: 3px 0; }
.org-side .org-person:nth-child(odd) { background: none; }
.org-node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-node-title { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--jac-accent-press); }
html[data-theme="dark"] .org-node-title { color: var(--jac-accent); }
.org-node-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.org-node-name { font-size: 13.5px; font-weight: 650; color: var(--jac-ink); margin-top: 2px; }
.org-node-empty { font-weight: 400; color: var(--jac-faint); font-style: italic; }

/* Einheiten und Standorte */
.org-units { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 14px; align-items: start; }
.org-unit { overflow: visible; }
.org-unit > details > summary { list-style: none; cursor: pointer; }
.org-unit > details > summary::-webkit-details-marker { display: none; }
.org-unit-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 14px; }
.org-unit-head:hover { background: var(--jac-rowhover); }
.org-unit > details[open] > .org-unit-head { border-bottom: 1px solid var(--jac-hair); border-radius: 14px 14px 0 0; }
.org-unit-caret { font-size: 17px !important; color: var(--jac-faint); transition: transform .15s; flex: none; }
.org-unit > details[open] .org-unit-caret { transform: rotate(90deg); }
.org-unit-icon { font-size: 18px !important; color: var(--jac-muted); flex: none; }
.org-unit-title { font-size: 14.5px; font-weight: 700; color: var(--jac-ink); min-width: 0; }
.org-unit-title small { display: block; font-size: 12px; font-weight: 400; color: var(--jac-muted); }
/* Leitung im Kartenkopf - so sagt die zugeklappte Karte schon das Wichtigste */
.org-unit-leadpos { color: var(--jac-faint); }
.org-unit-leadpos::before { content: '\00b7'; padding: 0 4px; }
.org-unit-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--jac-muted);
  background: var(--jac-hair); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; flex: none; }
.org-unit-actions { display: inline-flex; gap: 4px; flex: none; }
.org-unit-body { padding: 10px 14px 14px; }

/* Unterebene, z.B. Niederlassungen einer Region */
.org-suborg { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--jac-hair); }
.org-sub-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.org-sub-head > .ti { font-size: 15px !important; color: var(--jac-faint); flex: none; }
.org-sub-title { font-size: 13px; font-weight: 700; color: var(--jac-ink); }
.org-sub-head .org-unit-count { margin-left: 0; }
.org-sub-head .org-unit-actions { margin-left: auto; }

.org-group + .org-group { margin-top: 14px; }
.org-group-title { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jac-muted); padding-bottom: 4px; border-bottom: 1px solid var(--jac-hair); }

/* minmax(0,…) plus min-width:0, sonst schrumpfen die Spalten nicht unter die
   Laenge langer E-Mail-Adressen und die Karte laeuft seitlich aus. */
.org-person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr) auto;
  gap: 2px 12px; align-items: baseline; padding: 6px 7px; border-radius: 8px; font-size: 13px; }
.org-person > * { min-width: 0; }
.org-person:nth-child(odd) { background: var(--jac-rowhover); }
.org-person-name { font-weight: 650; color: var(--jac-ink); }
.org-person-object { display: block; font-size: 11.5px; font-weight: 400; color: var(--jac-muted); }
.org-person-contact { display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  color: var(--jac-muted); text-decoration: none; overflow-wrap: anywhere; }
.org-person-contact .ti { font-size: 14px !important; color: var(--jac-faint); flex: none; }
a.org-person-contact:hover { color: var(--jac-ink); }
a.org-person-contact:hover .ti { color: var(--jac-accent-press); }
.org-person-tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-person-empty { color: var(--jac-faint); }
.org-person-unassign { align-self: center; }

.org-empty { margin: 24px 0; color: var(--jac-muted); font-size: 14px; }
.org-empty-hint { margin: 4px 0; font-size: 12.5px; color: var(--jac-faint); font-style: italic; }

@media (max-width: 860px) {
  .org-person { grid-template-columns: 1fr; gap: 1px; padding: 8px 7px; }
  .org-units, .org-side { grid-template-columns: 1fr; }
  .org-search { max-width: none; }
  .org-tool-actions { margin-left: 0; }
  .orgstruct-switch { flex: 1 1 100%; }
  .orgstruct-switch .jac-btn { flex: 1; justify-content: center; }
  .orgstruct .orgtree-zoom { margin-left: 0; }
  .orgv { padding: 12px 10px 14px; }
}
@media (pointer: coarse) {
  .org-unit-head { padding: 14px; }
  .org-person-contact { min-height: 32px; }
  .orgv-row { min-height: 38px; }
  .orgv-tree > li::after, .orgv-sub > li::after { top: 21px; }
  .orgv-tree > li:last-child::before, .orgv-sub > li:last-child::before { height: 21px; }
}

/* ============================================================
   TELEFONLISTE (company/phonelist)
   Ein Standort = eine Karte, darin Positionsgruppen in fester Hierarchie.
   ============================================================ */
.phl { max-width: 1180px; margin: 0 auto; padding: 18px 16px 48px; text-align: left; }

.phl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.phl-search { flex: 1 1 260px; max-width: 380px; }
.phl-search .ti { font-size: 18px !important; color: var(--jac-faint); flex: none; }
.phl-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.phl-jump-link { font-size: 12.5px; font-weight: 600; color: var(--jac-muted); text-decoration: none;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--jac-border); background: var(--jac-surface);
  transition: background .12s, color .12s, border-color .12s; }
.phl-jump-link:hover { background: var(--jac-rowhover); color: var(--jac-ink); border-color: var(--jac-faint); }

.phl-office { margin-bottom: 16px; scroll-margin-top: 80px; }
.phl-office-head { align-items: flex-start; }
.phl-office-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px;
  font-size: 12.5px; color: var(--jac-muted); }
.phl-office-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--jac-border); }
.phl-office-meta a:hover { color: var(--jac-ink); }
.phl-body { padding-top: 6px; }

.phl-group + .phl-group { margin-top: 18px; }
.phl-pos { margin: 0 0 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--jac-accent-press); padding-bottom: 5px; border-bottom: 1px solid var(--jac-hair); }
html[data-theme="dark"] .phl-pos { color: var(--jac-accent); }

.phl-people { list-style: none; margin: 0; padding: 0; }
.phl-person { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(190px, 1.3fr) minmax(130px, .7fr);
  gap: 4px 16px; align-items: baseline; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; }
.phl-person:nth-child(odd) { background: var(--jac-rowhover); }
.phl-person:hover { background: var(--jac-hair); }
.phl-name { font-weight: 650; color: var(--jac-ink); }
.phl-object { display: block; font-size: 12px; font-weight: 400; color: var(--jac-muted); }
.phl-contact { display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--jac-muted); text-decoration: none; overflow-wrap: anywhere; }
.phl-contact .ti { font-size: 15px !important; color: var(--jac-faint); flex: none; }
a.phl-contact:hover { color: var(--jac-ink); }
a.phl-contact:hover .ti { color: var(--jac-accent-press); }
.phl-tel { font-variant-numeric: tabular-nums; white-space: nowrap; }
.phl-contact-empty { color: var(--jac-faint); }

.phl-empty { margin: 24px 0; color: var(--jac-muted); font-size: 14px; }

/* Rueckweg nach oben am Ende jeder Standort-Karte */
.phl-totop { display: flex; justify-content: flex-end; margin-top: 14px;
  padding-top: 10px; border-top: 1px solid var(--jac-hair); }
.phl-totop-link { display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--jac-muted); text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 5px 10px; border-radius: 8px; transition: background .12s, color .12s; }
.phl-totop-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
.phl-totop-link:hover { background: var(--jac-rowhover); color: var(--jac-ink); }
.phl-totop-link .ti { font-size: 15px !important; }
@media (pointer: coarse) { .phl-totop-link { min-height: 38px; padding: 8px 12px; } }

/* Schmal (iPad hochkant und kleiner): gestapelt statt drei Spalten */
@media (max-width: 860px) {
  .phl-person { grid-template-columns: 1fr; gap: 2px; padding: 9px 8px; }
  .phl-search { max-width: none; }
}
/* Touch: Mail- und Telefonlinks als eigene Zeilen mit genug Hoehe */
@media (pointer: coarse) {
  .phl-contact { min-height: 34px; }
  .phl-jump-link { padding: 8px 12px; }
}

/* ============================================================
   URLAUBSKALENDER (vacation/calendar/show*.blade.php)
   Die View bringt ihr eigenes Grid mit; die Farben kommen ueber diese Tokens,
   damit dieselbe Darstellung in Hell und Dunkel funktioniert.
   Light = bisheriges Erscheinungsbild, Dark = gedaempfte Entsprechungen.
   ============================================================ */
:root {
  /* Umgekehrte Hierarchie: Der Kontext (Wochenende/Feiertag/Ferien) toent die Flaeche nur
     noch schwach, die Abwesenheit selbst ist ein farbiger Balken und dominiert das Bild. */
  --cal-cell: #ffffff; --cal-cell-alt: #fafbfc; --cal-head: #f2f4f7;
  --cal-name: #ffffff; --cal-name-edge: #cfd5dc; --cal-line: #e3e7ec; --cal-ink: #22272d;
  --cal-today: #f5a700;
  /* Kontext zweistufig: kraeftig in der Tagesleiste (dort liest man die Spannen ab),
     ruhiger in den Zellen, damit die Abwesenheitsbalken oben bleiben. */
  --cal-weekend: #e9edf1; --cal-weekend-head: #dbe1e8;
  --cal-feast: #cfe1f4; --cal-feast-head: #a8c9e9;
  --cal-school: #eddfeb; --cal-school-head: #dcc2d8;
  /* Abwesenheits-Balken (weisse Schrift). G = beantragt bleibt Umriss, weil noch nicht fix. */
  --cal-mk-taken: #0f7a72; --cal-mk-planned: #0f7a72; --cal-mk-sick: #b3382c;
  --cal-mk-absent: #55606d; --cal-mk-unpaid: #b07615; --cal-mk-ink: #ffffff;
  /* Dienstplan-Statuszellen (admin/serviceschedule_index) */
  --sched-ok: #C3FAAA; --sched-warn: #FFCC60; --sched-warn-strong: #FCA413;
  --sched-danger: #FFAFAF; --sched-danger-strong: #fc5858;
  --sched-note: #FFF959; --sched-note-strong: #F7DA21; --sched-note-soft: #FDFAA5;
}
html[data-theme="dark"] {
  --cal-cell: #1b2027; --cal-cell-alt: #1f252d; --cal-head: #232a33;
  --cal-name: #1b2027; --cal-name-edge: #3a434e; --cal-line: #2f3742; --cal-ink: #e7eaed;
  --cal-today: #f9b52e;
  --cal-weekend: #171c23; --cal-weekend-head: #202730;
  --cal-feast: #223a4d; --cal-feast-head: #2f5878;
  --cal-school: #332941; --cal-school-head: #4a3661;
  --cal-mk-taken: #17968c; --cal-mk-planned: #4fc3b8; --cal-mk-sick: #cf4a3c;
  --cal-mk-absent: #78838f; --cal-mk-unpaid: #c1841c; --cal-mk-ink: #0f1317;
  --sched-ok: #2f6544; --sched-warn: #6f5320; --sched-warn-strong: #8c5a12;
  --sched-danger: #70302f; --sched-danger-strong: #8f3230;
  --sched-note: #6b6320; --sched-note-strong: #7c6b11; --sched-note-soft: #565024;
}

/* Namensspalte: ruhige Flaeche, nur durch eine kraeftigere Kante vom Raster getrennt */
#dplan .fixed-left { border-left: 0; border-right: 2px solid var(--cal-name-edge); }
/* Abwesenheit als Balken: fuellt die Zelle, damit mehrere Tage als ein Block lesbar werden.
   -3px Aussenabstand hebt das 2px-Padding von .grid-entry auf. */
.cal-mk {
  display: block; margin: -3px; padding: 3px 0; min-height: 100%;
  font-weight: 700; font-size: 11.5px; line-height: 1.35;
  color: var(--cal-mk-ink); background: var(--cal-mk-taken);
}
.cal-mk-x { background: var(--cal-mk-taken); }
.cal-mk-k { background: var(--cal-mk-sick); }
.cal-mk-a { background: var(--cal-mk-absent); }
.cal-mk-f { background: var(--cal-mk-unpaid); }
/* Beantragt/geplant: nur Umriss – der Tag ist noch nicht verbindlich */
.cal-mk-g {
  background: transparent; color: var(--cal-mk-planned); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--cal-mk-planned);
}
/* In der Legende sind die Marker kleine Pillen statt zellfuellender Balken */
.cal-legend .cal-mk { display: inline-block; margin: 0; padding: 1px 8px; min-height: 0; border-radius: 3px; }

/* Tagesleiste zweizeilig: Wochentag klein ueber der Tagesnummer */
.cal-dow { display: block; font-size: 9px; font-weight: 600; line-height: 1.15;
  letter-spacing: .02em; opacity: .6; text-transform: uppercase; }
.cal-dom { display: block; line-height: 1.2; }
/* Der Spaltenkopf "Name" bleibt dadurch einzeilig -> mittig ausrichten */
#dplan .grid-header.fixed-left { display: flex; align-items: center; }
/* Legenden-Swatches unter dem Kalender */
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12.5px; color: var(--cal-ink); }
.cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-swatch { width: 15px; height: 15px; border: 1px solid var(--cal-line); border-radius: 3px; flex: none; }
.cal-swatch-feast { background: var(--cal-feast); }
.cal-swatch-school { background: var(--cal-school); }
.cal-swatch-weekend { background: var(--cal-weekend); }
.cal-swatch-today { background: var(--cal-cell); border-right: 3px solid var(--cal-today); }

/* Heute: zwei Linien links und rechts der Spalte, ueber allem was in der Zelle steht.
   Als Rahmen der Zelle verschwand die Markierung hinter dem Abwesenheitsbalken, der die
   Zelle randlos ausfuellt - ausgerechnet in vollen Zeilen war der heutige Tag dann
   nicht zu finden. */
#dplan .cal-heute { position: relative; }
#dplan .cal-heute::before, #dplan .cal-heute::after {
  content: ""; position: absolute; width: 3px;
  /* Ein Pixel ueber die Zelle hinaus: sonst unterbricht das Raster die Linie an jeder
     Zellgrenze, und sie sieht gestrichelt aus */
  top: -1px; bottom: -1px;
  background: var(--cal-today); pointer-events: none; z-index: 3;
}
#dplan .cal-heute::before { left: -1px; }
#dplan .cal-heute::after { right: -1px; }
/* Im Spaltenkopf zusaetzlich eine Kante oben, damit die Spalte oben abschliesst */
#dplan .cal-heute-kopf { box-shadow: inset 0 3px 0 var(--cal-today); }
/* Dort beginnen die Seitenlinien buendig: der Pixel nach oben schliesst sonst keine
   Luecke, sondern steht ueber dem Kopf heraus */
#dplan .cal-heute-kopf::before, #dplan .cal-heute-kopf::after { top: 0; }

/* ============================================================
   Editor fuer Wiki-Beitraege und Nachrichten (A-52)
   ============================================================ */
.jac-editor-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px; border: 1px solid var(--jac-border); border-bottom: none;
  border-radius: 10px 10px 0 0; background: var(--jac-hair);
}
/* 40px Kantenlaenge, damit die Knoepfe auch mit dem Finger sicher zu treffen sind */
.jac-editor-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--jac-muted); cursor: pointer;
  transition: background .12s, color .12s;
}
.jac-editor-btn:hover { background: var(--jac-surface); color: var(--jac-ink); }
.jac-editor-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jac-focus); }
.jac-editor-btn.is-active { background: var(--jac-surface); color: var(--jac-accent); border-color: var(--jac-border); }
.jac-editor-btn .ti { font-size: 19px !important; }
.jac-editor-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--jac-border); }

.jac-editor-area {
  border: 1px solid var(--jac-border); border-radius: 0 0 10px 10px;
  background: var(--jac-field); color: var(--jac-ink);
}
.jac-editor-area .ProseMirror {
  min-height: 320px; padding: 14px 16px; outline: none; line-height: 1.6;
}
.jac-editor-area .ProseMirror:focus { outline: none; }
.jac-editor-area:focus-within { box-shadow: 0 0 0 3px var(--jac-focus); }

/* Inhalt - gilt im Editor wie in der Anzeige des fertigen Beitrags */
.jac-prose { color: var(--jac-ink); line-height: 1.65; }
.jac-prose h2 { font-size: 1.35rem; font-weight: 700; margin: 1.4em 0 .5em; }
.jac-prose h3 { font-size: 1.15rem; font-weight: 700; margin: 1.2em 0 .4em; }
.jac-prose h4 { font-size: 1rem; font-weight: 700; margin: 1em 0 .3em; }
.jac-prose h2:first-child, .jac-prose h3:first-child { margin-top: 0; }
.jac-prose p { margin: .7em 0; }
.jac-prose ul, .jac-prose ol { margin: .7em 0; padding-left: 1.6em; }
.jac-prose ul { list-style: disc; }
.jac-prose ol { list-style: decimal; }
.jac-prose li { margin: .25em 0; }
.jac-prose a { color: var(--jac-info); text-decoration: underline; }
.jac-prose blockquote {
  margin: .9em 0; padding: .4em 0 .4em 1em;
  border-left: 3px solid var(--jac-accent); color: var(--jac-muted);
}
.jac-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: .6em 0; }
.jac-prose hr { margin: 1.4em 0; border: none; border-top: 1px solid var(--jac-border); }
.jac-prose code {
  padding: .12em .35em; border-radius: 5px;
  background: var(--jac-hair); font-size: .92em;
}
.jac-prose pre {
  margin: .9em 0; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
  background: var(--jac-hair);
}
.jac-prose pre code { padding: 0; background: none; }

/* Tabellen - breite Tabellen scrollen im eigenen Rahmen, nie die Seite */
.jac-prose table {
  width: 100%; margin: 1em 0; border-collapse: collapse; table-layout: fixed;
}
.jac-prose th, .jac-prose td {
  padding: 7px 10px; border: 1px solid var(--jac-border);
  vertical-align: top; text-align: left;
}
.jac-prose th { background: var(--jac-hair); font-weight: 600; }
.jac-prose .tableWrapper { overflow-x: auto; }
.jac-editor-area .ProseMirror .selectedCell:after {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--jac-focus); content: '';
}
.jac-editor-area .ProseMirror .column-resize-handle {
  position: absolute; right: -2px; top: 0; bottom: 0; width: 4px;
  background: var(--jac-accent); pointer-events: none;
}

/* Hinweis, solange nichts geschrieben wurde */
.jac-editor-area .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder); float: left; height: 0;
  color: var(--jac-faint); pointer-events: none;
}

/* Suchfeld mit Lupe: Platz fuer das Symbol, sonst laeuft der Text darueber */
.jac-input-search { padding-left: 34px; }
.jac-input-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--jac-faint); pointer-events: none; font-size: 16px !important;
}

/* Kleine Helfer fuer das Wiki */
.jac-accent-text { color: var(--jac-accent); }
/* Lange Woerter in schmalen Spalten sauber trennen - "Gefaehrdungsbeurteilungen"
   passt in die Bereichsspalte sonst nicht und schoebe die Anzahl heraus. Die Seite
   ist als deutsch ausgezeichnet, der Browser trennt also an den richtigen Stellen. */
.jac-trennbar { hyphens: auto; overflow-wrap: break-word; }

/* Unterschriftsfeld (A-55). Bewusst immer heller Grund, auch im Dunkelmodus: die
   Unterschrift wird mit dunkler Tinte gezeichnet und waere auf dunklem Feld nicht zu
   sehen - so wie ein Blatt Papier auch im dunklen Raum weiss bleibt.
   touch-action: none, sonst scrollt die Seite unter dem zeichnenden Finger weg. */
.jac-unterschriftsfeld {
  height: 200px; border: 1px dashed #9aa1a9; border-radius: 10px; background: #fff;
  touch-action: none; overflow: hidden;
}
.jac-unterschriftsfeld canvas { display: block; width: 100%; height: 100%; }

/* Das ausformulierte Schreiben vor der Unterschrift */
.jac-schreiben { white-space: pre-line; line-height: 1.6; }
.jac-schreiben-angaben { display: grid; gap: 6px; border-top: 1px solid var(--jac-hair); padding-top: 12px; }
.jac-schreiben-angaben dt { font-size: 12px; color: var(--jac-muted); }
.jac-schreiben-angaben dd { margin: 0; }

/* Wann entsteht ein Anspruch auf ein Geschenk - kleine Tabelle in der Artikelmaske */
.jac-anspruchstabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.jac-anspruchstabelle th { text-align: left; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--jac-muted);
  padding: 8px 16px; border-bottom: 1px solid var(--jac-hair); }
.jac-anspruchstabelle td { padding: 8px 16px; border-bottom: 1px solid var(--jac-hair);
  vertical-align: top; }
.jac-anspruchstabelle tr:last-child td { border-bottom: none; }
.jac-anspruchstabelle td:first-child { font-weight: 600; white-space: nowrap; }

/* Geschenkauswahl in der Mitarbeiterbox: die ganze Kachel ist die Auswahl, damit sie
   sich auch mit dem Finger sicher treffen laesst */
.jac-merch-karte { display: block; cursor: pointer; padding: 12px; border-radius: 12px;
  border: 1px solid var(--jac-border); background: var(--jac-card); transition: border-color .12s, box-shadow .12s; }
.jac-merch-karte:hover { border-color: var(--jac-accent); }
.jac-merch-karte.ist-gewaehlt { border-color: var(--jac-accent); box-shadow: 0 0 0 2px var(--jac-focus); }
.jac-merch-karte-bild { display: flex; align-items: center; justify-content: center;
  height: 120px; border-radius: 9px; background: var(--jac-field); font-size: 34px; overflow: hidden; }
.jac-merch-karte-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Geschenkartikel: kleines Vorschaubild in Liste und Maske */
.jac-merch-bild { display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 1px solid var(--jac-hair); border-radius: 9px;
  background: var(--jac-field); overflow: hidden; font-size: 22px; }
.jac-merch-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Bereiche umhaengen: Griff, gezogene Zeile und Ablageziel */
.jac-griff { color: var(--jac-faint); cursor: grab; padding: 2px; }
.jac-griff:active { cursor: grabbing; }
.jac-bereichszeile.wird-gezogen { opacity: .45; }
.jac-bereichszeile.ist-ziel { background: var(--jac-rowhover); box-shadow: inset 3px 0 0 var(--jac-accent); }
.jac-ablagestreifen { margin: 10px 12px; padding: 9px 12px; border: 1px dashed var(--jac-border);
  border-radius: 9px; color: var(--jac-muted); font-size: 13px; text-align: center; }
.jac-ablagestreifen.ist-ziel { border-color: var(--jac-accent); color: var(--jac-accent); }
.jac-hair-border { border-color: var(--jac-hair); }
.jac-row-link { display: flex; text-decoration: none; color: inherit; transition: background .12s; }
.jac-row-link:hover { background: var(--jac-rowhover); }
.jac-row-link:last-child { border-bottom: none; }

/* Aufklappbare Karte - auf breiten Bildschirmen immer offen, darunter zugeklappt.
   Der Zustand kommt aus Alpine; <details> waere naheliegend gewesen, aber Chrome
   blendet dessen Inhalt so aus, dass CSS ihn nicht wieder einblenden kann. */
.jac-klapp-kopf { cursor: pointer; user-select: none; }
.jac-klapp-pfeil { color: var(--jac-muted); transition: transform .15s; }
.jac-klapp-pfeil.is-offen { transform: rotate(180deg); }
@media (min-width: 1024px) {
  .jac-klapp-kopf { cursor: default; }
}
[x-cloak] { display: none !important; }

/* Gefahrensymbole über einer Betriebsanweisung */
.jac-ghs-leiste { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.jac-ghs { width: 54px; height: 54px; }

/* Vorrat an Gefahrensymbolen im Bearbeiten-Fenster */
.jac-symbolvorrat { display: flex; flex-wrap: wrap; gap: 10px; }
.jac-symbol { width: 84px; margin: 0; text-align: center; }
.jac-symbol img {
  width: 62px; height: 62px; padding: 3px; border: 1px solid var(--jac-border);
  border-radius: 8px; background: #fff; cursor: grab; transition: border-color .12s, transform .12s;
}
.jac-symbol img:hover { border-color: var(--jac-accent); transform: scale(1.06); }
.jac-symbol img:active { cursor: grabbing; }
.jac-symbol figcaption { margin-top: 2px; font-size: 10px; line-height: 1.25; color: var(--jac-muted); }

/* Sicherheitszeichen im Fliesstext: ohne eigene Angabe so gross wie in der
   Papiervorlage (19 mm). Steht eine Groesse am Bild, hat sie Vorrang - sonst liesse
   sich die Groesse im Editor nicht mehr umstellen. */
.jac-prose img[src*="/img/ghs/"]:not([width]),
.jac-editor-area .ProseMirror img[src*="/img/ghs/"]:not([width]) {
  width: 72px; height: 72px;
}
.jac-prose img[src*="/img/ghs/"],
.jac-editor-area .ProseMirror img[src*="/img/ghs/"] {
  display: inline-block; vertical-align: middle; margin: 2px 6px 2px 0;
}

/* Zusatzleiste fuer ein ausgewaehltes Bild */
.jac-bildleiste { border-radius: 0; border-top: none; }
.jac-bildleiste-text { padding: 0 6px; font-size: 12px; color: var(--jac-muted); }
.jac-editor-btn-text { width: auto; padding: 0 9px; font-size: 12px; font-weight: 600; }

/* Ausrichtung von Bildern - gilt im Editor wie in der Anzeige */
.jac-prose .jac-bild-links,
.jac-editor-area .ProseMirror .jac-bild-links { float: left; margin: 2px 12px 6px 0; }
.jac-prose .jac-bild-rechts,
.jac-editor-area .ProseMirror .jac-bild-rechts { float: right; margin: 2px 0 6px 12px; }
.jac-prose .jac-bild-mitte,
.jac-editor-area .ProseMirror .jac-bild-mitte { display: block; float: none; margin: 8px auto; }

/* Ein ausgewaehltes Bild ist erkennbar */
.jac-editor-area .ProseMirror img.ProseMirror-selectednode {
  outline: 2px solid var(--jac-accent); outline-offset: 2px;
}

/* Werkzeugleisten des Editors bleiben beim Blaettern oben stehen.
   64 Pixel Abstand, weil die Kopfzeile der Anwendung so hoch ist und fest steht. */
.jac-editor-kopf { position: sticky; top: 64px; z-index: 20; }
.jac-editor-kopf .jac-editor-toolbar { border-radius: 0; }
.jac-editor-kopf > .jac-editor-toolbar:first-child { border-radius: 10px 10px 0 0; }

/* Karten schneiden Ueberstehendes ab und ihr Koerper scrollt fuer sich - beides macht
   das Kleben unwirksam. Nur dort aufheben, wo ein Editor darin sitzt. */
.jac-card.jac-card-offen,
.jac-card.jac-card-offen > .jac-card-body { overflow: visible; }

/* Ablagen fuer die Zeichen einer Betriebsanweisung */
.jac-ablage {
  display: flex; align-items: center; gap: 10px; min-height: 54px;
  padding: 6px 10px; border: 1px dashed var(--jac-border); border-radius: 10px;
  background: var(--jac-field); cursor: pointer; transition: border-color .12s, background .12s;
}
.jac-ablage.ist-gewaehlt { border-color: var(--jac-accent); border-style: solid; }
.jac-ablage.ist-ziel { border-color: var(--jac-accent); background: var(--jac-rowhover); }
.jac-ablage-titel { flex: none; width: 190px; font-size: 11px; font-weight: 600; color: var(--jac-muted); }
.jac-ablage-inhalt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; }
.jac-ablage.ist-leer .jac-ablage-inhalt:after {
  content: attr(data-leer); font-size: 11px; color: var(--jac-faint);
}
.jac-ablage-stueck { position: relative; display: inline-flex; }
.jac-ablage-stueck img { width: 40px; height: 40px; }
.jac-ablage-weg {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 1;
  border: 1px solid var(--jac-border); border-radius: 50%; background: var(--jac-surface);
  color: var(--jac-danger); font-size: 13px; cursor: pointer;
}
.jac-ablage-weg:hover { background: var(--jac-danger-soft); }

/* Ausrichtung von Absaetzen - im Editor wie in der Anzeige */
.jac-prose [style*="text-align: center"], .jac-editor-area .ProseMirror [style*="text-align: center"] { text-align: center; }
.jac-prose [style*="text-align: right"], .jac-editor-area .ProseMirror [style*="text-align: right"] { text-align: right; }

/* ============================================================================
   Nachrichten (A-58)
   Karten mit Anriss statt ausgerollter Tabellen; Freigabe gruppiert und mit
   Reichweite. Alle Farben kommen aus den Tokens, damit Hell und Dunkel ohne
   Nacharbeit stimmen.
   ========================================================================= */

/* Lesetexte brauchen eine Spaltenbreite, keine Bildschirmbreite */
.jac-news-spalte { max-width: 920px; margin: 0 auto; width: 100%; }

.jac-news-liste { display: flex; flex-direction: column; gap: 14px; }

.jac-news-karte { position: relative; }
/* Ungelesenes traegt links einen Streifen - erkennbar, ohne bunt zu werden */
.jac-news-karte.neu { border-color: var(--jac-info); }
.jac-news-karte.neu::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--jac-info); border-radius: 14px 0 0 14px;
}

.jac-news-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 18px 8px;
}
.jac-news-titel { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.jac-news-titel a { color: var(--jac-ink); text-decoration: none; }
.jac-news-titel a:hover { text-decoration: underline; }
.jac-news-karte.neu .jac-news-titel { font-weight: 750; }

.jac-news-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 5px 0 0;
  font-size: 12.5px; color: var(--jac-muted);
}
.jac-news-metalink { color: var(--jac-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.jac-news-metalink:hover { color: var(--jac-info); text-decoration: underline; }

.jac-news-marken { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }

/* Anriss: der Text bricht weich ab statt die Seite auszurollen */
.jac-news-anriss {
  position: relative; max-height: 190px; overflow: hidden; padding: 0 18px;
  font-size: 14px;
}
.jac-news-anriss::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(to bottom, var(--jac-surface-0), var(--jac-surface));
  pointer-events: none;
}
.jac-news-anriss.vollstaendig::after { display: none; }
.jac-news-anriss img { max-height: 150px; width: auto; }

.jac-news-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--jac-hair);
}

/* Schalter mit Beschriftung - Kaestchen und Text als ein Ziel, auch auf dem iPad */
.jac-schalter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 12px; border: 1px solid var(--jac-border); border-radius: 9px;
  background: var(--jac-field); color: var(--jac-ink); font-size: 13.5px;
  min-height: 40px;
}
/* Groesse und Farbe kommen aus dem Ankreuzfeld-Block (A-79) */
.jac-schalter input { flex: none; }

/* Freigabe */
.jac-freigabe-kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.jac-abschnitt-titel { font-size: 15px; font-weight: 700; color: var(--jac-ink); margin: 0; }
.jac-feldhinweis { font-size: 12px; color: var(--jac-muted); margin: 3px 0 0; }

.jac-freigabe-summe {
  margin: 0; font-size: 13.5px; font-weight: 650; color: var(--jac-ok);
  background: var(--jac-ok-soft); border-radius: 9px; padding: 7px 12px;
}
.jac-freigabe-summe.leer { color: var(--jac-warn); background: var(--jac-warn-soft); }

.jac-freigabe { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.jac-freigabe-block {
  border: 1px solid var(--jac-border); border-radius: 12px; padding: 10px 12px 12px;
  background: var(--jac-surface);
}
.jac-freigabe-block legend {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--jac-muted); padding-bottom: 6px;
}
.jac-freigabe-alle {
  font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--jac-info); background: none; border: 0; cursor: pointer; padding: 2px 4px;
}
.jac-freigabe-alle:hover { text-decoration: underline; }

.jac-freigabe-eintrag {
  display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 8px;
  cursor: pointer; min-height: 38px;
}
.jac-freigabe-eintrag:hover { background: var(--jac-rowhover); }
.jac-freigabe-eintrag input { flex: none; }
.jac-freigabe-name { flex: 1; font-size: 13.5px; color: var(--jac-ink); }
.jac-freigabe-zahl {
  flex: none; font-size: 11.5px; color: var(--jac-muted); font-variant-numeric: tabular-nums;
  background: var(--jac-hair); border-radius: 999px; padding: 1px 7px;
}

/* Formularaufbau */
.jac-formzeile { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.jac-formfuss {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--jac-hair);
}

/* Hinweisstreifen */
.jac-hinweis {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px;
  border: 1px solid var(--jac-border); border-left: 3px solid var(--jac-warn);
  border-radius: 10px; background: var(--jac-warn-soft); color: var(--jac-ink); font-size: 13.5px;
}
.jac-hinweis .ti { color: var(--jac-warn); font-size: 18px; }

/* Vorschau */
.jac-vorschau {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 20, 26, .55); padding: 20px;
}
.jac-vorschau[hidden] { display: none; }
.jac-vorschau-kasten {
  background: var(--jac-surface); border: 1px solid var(--jac-border); border-radius: 14px;
  width: min(760px, 100%); max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.jac-vorschau-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--jac-hair); font-size: 16px; color: var(--jac-ink);
}
.jac-vorschau-inhalt { padding: 16px; overflow: auto; }

/* Lesestand */
.jac-lesestand-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.jac-lesestand-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--jac-hair); font-size: 13.5px;
}
.jac-lesestand-zeile:last-child { border-bottom: 0; }
.jac-lesestand-zahl { font-size: 15px; color: var(--jac-ink); }
.jac-balken { height: 8px; border-radius: 999px; background: var(--jac-hair); overflow: hidden; }
.jac-balken span { display: block; height: 100%; background: var(--jac-ok); border-radius: 999px; }

@media (max-width: 820px) {
  .jac-news-kopf { flex-direction: column; }
  .jac-news-fuss { flex-direction: column; align-items: stretch; }
  .jac-news-fuss > * { width: 100%; }
  .jac-news-fuss .flex { justify-content: flex-end; }
}

/* ============================================================================
   Aenderungsverlauf (A-59)
   Zeigt Feld, vorher und nachher - statt einer Liste von Zeitstempeln, hinter
   denen man einzeln nachsehen musste.
   ========================================================================= */

.jac-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.jac-verlauf-eintrag {
  position: relative; padding: 10px 12px 10px 16px; border-left: 2px solid var(--jac-hair);
}
.jac-verlauf-eintrag::before {
  content: ""; position: absolute; left: -5px; top: 16px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--jac-border);
}
.jac-verlauf-eintrag.angelegt::before { background: var(--jac-ok); }
.jac-verlauf-eintrag.geloescht::before { background: var(--jac-danger); }
.jac-verlauf-eintrag.geaendert::before { background: var(--jac-info); }

.jac-verlauf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.jac-verlauf-zeit { color: var(--jac-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.jac-verlauf-person { color: var(--jac-muted); }
.jac-verlauf-grund { color: var(--jac-muted); font-style: italic; }

.jac-verlauf-felder { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; }
.jac-verlauf-felder li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 3px 0;
}
.jac-verlauf-feld { min-width: 150px; color: var(--jac-muted); }
.jac-verlauf-alt { color: var(--jac-muted); text-decoration: line-through; word-break: break-word; }
.jac-verlauf-pfeil { color: var(--jac-faint); }
.jac-verlauf-neu { color: var(--jac-ink); font-weight: 600; word-break: break-word; }
/* Ein durchgestrichenes Nichts sieht aus wie ein Fehler - leere Werte stehen kursiv da */
.jac-verlauf-alt.leer, .jac-verlauf-neu.leer {
  text-decoration: none; font-style: italic; font-weight: 400; color: var(--jac-faint);
}

.jac-verlauf-liste { display: flex; flex-direction: column; gap: 10px; }
.jac-verlauf-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--jac-hair);
}
.jac-verlauf-titel { font-weight: 700; color: var(--jac-ink); text-decoration: none; }
a.jac-verlauf-titel:hover { color: var(--jac-info); text-decoration: underline; }

@media (max-width: 700px) {
  .jac-verlauf-feld { min-width: 100%; }
}

/* ---------- Rechte je Firma (A-80) ----------
   Zwei Spalten nebeneinander: links die Rollen, rechts die Einzelrechte. Bei knapp 30
   Eintraegen je Firma waere eine einzige Spalte eine sehr lange Liste, durch die man
   scrollen muesste, um die naechste Firma ueberhaupt zu sehen. Auf schmalen Geraeten
   fallen sie untereinander. */
/* Je Firma ein aufklappbarer Kasten: bei vier Firmen stuenden sonst rund 160 Zeilen
   untereinander, und die letzte Firma waere nur nach langem Scrollen zu erreichen. */
.jac-rechte-firma-block { border: 1px solid var(--jac-border); border-radius: 12px;
  background: var(--jac-surface); margin-bottom: 12px; overflow: hidden; }
.jac-rechte-firma-block > summary { display: flex; align-items: baseline; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none; user-select: none; }
.jac-rechte-firma-block > summary::-webkit-details-marker { display: none; }
.jac-rechte-firma-block > summary:hover { background: var(--jac-rowhover); }
.jac-rechte-pfeil { flex: none; font-size: 15px; color: var(--jac-faint);
  transition: transform .15s; align-self: center; }
.jac-rechte-firma-block[open] > summary .jac-rechte-pfeil { transform: rotate(90deg); }
.jac-rechte-firma-titel { font-weight: 700; color: var(--jac-ink); }
.jac-rechte-firma-stand { font-size: 12.5px; color: var(--jac-muted); }
.jac-rechte-inhalt { padding: 4px 16px 18px 41px; border-top: 1px solid var(--jac-hair); }
.jac-rechte-hinweis { font-size: 12.5px; color: var(--jac-muted); margin: 10px 0 14px; }
.jac-rechte-raster { display: grid; grid-template-columns: 1fr; gap: 18px 28px; }
@media (min-width: 900px) { .jac-rechte-raster { grid-template-columns: 1fr 1fr; } }
.jac-rechte-ueberschrift { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--jac-muted); margin-bottom: 7px; }
.jac-rechte-zeile { display: flex; align-items: center; gap: 9px; padding: 3px 0;
  font-size: 13.5px; color: var(--jac-ink); cursor: pointer; }
.jac-rechte-zeile:hover { color: var(--jac-accent-press); }
html[data-theme="dark"] .jac-rechte-zeile:hover { color: var(--jac-accent); }
/* Uebersicht am Benutzer: je Firma ein kurzer Block statt einer Liste ohne Zuordnung */
.jac-rechte-firma { padding: 9px 0; border-top: 1px solid var(--jac-hair); }
.jac-rechte-firma:first-child { border-top: 0; padding-top: 0; }
.jac-rechte-firma-name { font-weight: 700; color: var(--jac-ink); margin-bottom: 4px; }
.jac-rechte-firma-zeile { display: flex; gap: 10px; align-items: baseline; padding: 1px 0; }
.jac-rechte-firma-art { flex: none; width: 96px; font-size: 12px; color: var(--jac-faint); }

/* Schalter am Kostentraeger: PDF-Bestaetigung an den Kunden (A-75) */
.jac-wt-mail { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 11px 14px; border: 1px solid var(--jac-border);
  border-radius: 11px; background: var(--jac-rowhover); }
.jac-wt-mail-text { display: flex; align-items: flex-start; gap: 11px; }
.jac-wt-mail-ic { font-size: 20px !important; color: var(--jac-muted); line-height: 1.2; }

/* Konfektionsgroessen am Menschen (A-78): vier kurze Angaben nebeneinander statt
   einer Tabelle mit schwarzen Rahmen aus der Zeit vor dem Redesign. */
.jac-groessen { display: flex; flex-wrap: wrap; gap: 8px; }
.jac-groesse { display: flex; align-items: baseline; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--jac-border); border-radius: 9px; background: var(--jac-rowhover); }
.jac-groesse-art { font-size: 12px; color: var(--jac-muted); }
.jac-groesse-wert { font-weight: 700; color: var(--jac-ink); }

/* ---------- Wohlfuehltemperatur auf der Uebersicht (A-77) ----------
   Aufbau wie die uebrigen Kacheln, nur mit Zahnrad in der Ecke und dem eigenen Wunsch
   als Fusszeile. Bewusst keine Verweiskachel: hier wird eingestellt, nicht gesprungen. */
.jac-tile-temp { position: relative; cursor: default; }
.jac-temp-grad { font-size: 15px; font-weight: 600; margin-left: 2px; color: var(--jac-muted); }
.jac-temp-zahnrad { position: absolute; top: 8px; right: 8px; display: inline-flex;
  align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--jac-faint);
  cursor: pointer; transition: color .12s, background-color .12s; }
.jac-temp-zahnrad:hover { color: var(--jac-accent-press); background: var(--jac-hair); }
html[data-theme="dark"] .jac-temp-zahnrad:hover { color: var(--jac-accent); }
.jac-temp-wunsch { display: block; margin-top: 3px; font-size: 11.5px; color: var(--jac-faint); }
.jac-temp-regler { display: flex; align-items: center; gap: 14px; }
.jac-temp-schieber { flex: 1; accent-color: var(--jac-accent); height: 26px; }
.jac-temp-anzeige { flex: none; min-width: 78px; text-align: right; font-size: 20px;
  font-weight: 800; color: var(--jac-ink); font-variant-numeric: tabular-nums; }

/* Zuweisen direkt in der Karte statt auf einer eigenen Seite (A-86) */
.jac-zuweisen { display: block; max-width: 320px; }
.jac-zuweisen select { width: 100%; }

/* Lagerauswahl ueber der Inventur (A-85): eine Reihe Knoepfe statt neun Spalten */
.jac-lagerwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--jac-border);
  border-radius: 11px; background: var(--jac-rowhover); }
.jac-lagerwahl-marke { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--jac-muted); margin-right: 4px; }
/* Nachbestellen: Eingabe und heutiger Bestand nebeneinander (A-85) */
.jac-nachbestellen { display: flex; align-items: center; gap: 8px; }
.jac-nachbestellen input { width: 92px; }
.jac-nachbestellen-bestand { font-size: 11.5px; color: var(--jac-faint); white-space: nowrap; }

/* Eigene Daten (A-87): Kennwoerter verdeckt, Marken-Knoepfe mit lesbarer Schrift.
   Die Farben standen vorher im style-Attribut - weiss auf hellem Grau war kaum
   zu entziffern, im Dunkelmodus verschwand der Text ganz. */
.jac-geheim { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.jac-geheim-auge { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--jac-faint); cursor: pointer;
  transition: color .12s, background-color .12s; }
.jac-geheim-auge:hover { color: var(--jac-accent-press); background: var(--jac-hair); }
html[data-theme="dark"] .jac-geheim-auge:hover { color: var(--jac-accent); }
.jac-geheim-auge .ti { font-size: 17px; }

.jac-marke { border: 0; }
.jac-marke-pc { background: #213F69; color: #fff; }
.jac-marke-pc:hover { background: #1a3255; color: #fff; }
.jac-marke-ios { background: #4A5257; color: #fff; }
.jac-marke-ios:hover { background: #3a4145; color: #fff; }
.jac-marke-android { background: #3DDC84; color: #10261A; }
.jac-marke-android:hover { background: #2fbd6d; color: #10261A; }

/* Eigene Daten (A-87): Bezeichnung und Wert als Paare statt als Tabelle - dann bricht
   der Wert auf schmalen Geraeten unter die Bezeichnung, statt die Karte zu sprengen. */
.jac-dl { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: 7px 14px; margin: 0; font-size: 13.5px; }
.jac-dl dt { font-weight: 700; color: var(--jac-ink); }
.jac-dl dd { margin: 0; color: var(--jac-muted); min-width: 0; overflow-wrap: anywhere; }
.jac-dl dt.jac-dl-gruppe { grid-column: 1 / -1; margin-top: 8px; }
.jac-dl dd.jac-dl-gruppe { display: none; }
.jac-dl-gruppe { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--jac-faint); }
@media (max-width: 520px) { .jac-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .jac-dl dd { margin-bottom: 8px; } }

/* Mehrere Geraete oder Fahrzeuge in einer Karte: sichtbar getrennt statt nur
   durch eine leere Zeile. */
.jac-geraet + .jac-geraet, .jac-geraet.mt-4 { padding-top: 14px; border-top: 1px solid var(--jac-hair); }

.jac-link { color: var(--jac-link); text-decoration: underline; }
.jac-link:hover { color: var(--jac-accent); }

/* QR-Code klein, zum Scannen auf Klick gross. Die Breite gehoert an den Rahmen, nicht
   an das Bild: mit "max-width: 100%" am Bild und einem Rahmen ohne eigene Breite
   beissen sich beide, und der Code bleibt klein. */
.jac-qr-schalter { padding: 10px; cursor: zoom-in; width: 170px; max-width: 100%;
  transition: width .15s; }
.jac-qr-schalter img { width: 100%; max-width: none; }
.jac-qr-schalter.jac-qr-gross { cursor: zoom-out; width: 320px; }

.jac-details > summary { cursor: pointer; font-weight: 600; font-size: 13.5px;
  color: var(--jac-ink); list-style: none; display: flex; align-items: center; gap: 7px; }
.jac-details > summary::-webkit-details-marker { display: none; }
.jac-details > summary::before { content: "\203A"; font-size: 18px; line-height: 1;
  color: var(--jac-faint); transition: transform .12s; }
.jac-details[open] > summary::before { transform: rotate(90deg); }

/* Karten nur so hoch wie ihr Inhalt - sonst zieht die laengste Karte einer Zeile
   die Nachbarin mit und hinterlaesst grosse Leerflaechen (A-87).
   Die Breite muss ausdruecklich dastehen: auf Handybreite fiel das Raster sonst auf
   wenige Pixel zusammen, obwohl der umgebende Kasten Platz hatte. */
.jac-cards-oben { align-items: start; width: 100%; }

/* Auf Handybreite passen Titel und Knopf nicht mehr nebeneinander in den Kartenkopf -
   der Knopf ragte ueber den Rand hinaus. Dann rutscht er unter den Titel. */
@media (max-width: 560px) {
  .jac-card-head { flex-wrap: wrap; }
  .jac-card-head > .jac-btn { width: 100%; justify-content: center; }
}

/* Videos in Wiki-Beitraegen (A-88): Abgespielt wird bei Vimeo, der Rahmen bleibt die
   Seite. 16:9 ueber aspect-ratio - so passt sich der Player jeder Breite an, auch auf
   dem iPad, ohne die alte Polsterungs-Rechnerei. */
.jac-video { position: relative; width: 100%; max-width: 760px; margin: 18px auto;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--jac-border); background: #000; }
.jac-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Im Editor liegt der Player hinter einer durchsichtigen Flaeche: sonst nimmt der
   Vimeo-Player die Klicks entgegen und der Beitrag laesst sich an dieser Stelle nicht
   mehr bearbeiten. Abgespielt wird im fertigen Beitrag, nicht beim Schreiben. */
.jac-editor-area .jac-video::after { content: ""; position: absolute; inset: 0;
  background: transparent; }
.jac-editor-area .jac-video.ProseMirror-selectednode { outline: 2px solid var(--jac-accent);
  outline-offset: 2px; }

/* Kein Video hinterlegt - kann nur nach einem misslungenen Einfuegen entstehen */
.jac-video-leer { display: grid; place-items: center; aspect-ratio: 16 / 9;
  color: var(--jac-faint); font-size: 13px; background: var(--jac-hair); }

/* Im Ausdruck steht die Adresse statt des Players */
.jac-video-druck { margin: 12px 0; padding: 10px 13px; border: 1px dashed #999;
  border-radius: 8px; font-size: 12px; color: #333; word-break: break-all; }

/* Anzahl neben einer Kartenueberschrift, z. B. "Peripherie 4" (A-90) */
.jac-zaehler { display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px; background: var(--jac-hair); color: var(--jac-muted);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Vorhandenes Geraet anhaengen: Auswahl und Knopf in einer Reihe (A-90) */
.jac-zuordnen { padding-top: 14px; border-top: 1px solid var(--jac-hair); }
.jac-zuordnen select { min-width: 260px; max-width: 100%; }

/* Wiki: gerade angesehene Fassung im Verlauf hervorheben (A-91) */
.jac-fassung-aktiv { background: var(--jac-rowhover); box-shadow: inset 3px 0 0 var(--jac-accent); }

/* Ein- und Austritte: "laeuft schon auf die Person" am offenen Punkt (A-92) */
.jac-hinweis-zugewiesen { display: inline-flex; align-items: center; font-size: 12.5px;
  color: var(--jac-info); background: var(--jac-info-soft); border-radius: 8px;
  padding: 3px 9px; }

/* Steckbrief: Mehrfachauswahl der Meistertitel (A-100) */
.jac-steckbrief-liste { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.jac-steckbrief-wahl { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--jac-hair); border-radius: 10px; font-size: 13.5px; cursor: pointer; }
.jac-steckbrief-wahl:hover { background: var(--jac-rowhover); }
.jac-steckbrief-wahl:has(input:checked) { border-color: var(--jac-accent); background: var(--jac-focus); }

/* Fuss im Mitarbeiterportal: eigene Firma und Ansprechpartner (A-101) */
.jac-portal-fuss { margin-top: 32px; padding: 20px 16px 28px; border-top: 1px solid var(--jac-hair);
  background: var(--jac-surface); color: var(--jac-muted); font-size: 13px; text-align: left; }
.jac-portal-fuss-inhalt { max-width: 1100px; margin: 0 auto; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jac-portal-fuss-titel { font-weight: 700; color: var(--jac-ink); margin-bottom: 4px; }
/* Textlinks tragen --jac-link, nicht den Akzent: Auf Weiss liegt der Akzent bei
   2,02:1, der abgedunkelte Ton bei 4,5 (deshalb wurde er am 01.09.2026 eingefuehrt).
   Im Dunkelmodus zeigt --jac-link ohnehin auf den Akzent - dort stimmt er. */
.jac-portal-fuss a { color: var(--jac-link); }
.jac-portal-fuss a:hover { text-decoration: underline; }

/* Startseite des Mitarbeiterportals (A-101) */
.jac-portal-karten { display: grid; gap: 14px; margin: 18px 0; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.jac-portal-karte-titel { font-weight: 700; color: var(--jac-ink); margin-bottom: 6px; }
.jac-portal-zeile { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--jac-hair); color: var(--jac-ink); }
.jac-portal-zeile:last-child { border-bottom: 0; }
.jac-portal-zeile:hover { background: var(--jac-rowhover); }
.jac-portal-zeile-mehr { justify-content: center; color: var(--jac-link); font-weight: 600; }
.jac-portal-glueckwunsch { border-color: var(--jac-accent); }
.jac-portal-glueckwunsch-ic { font-size: 26px; color: var(--jac-accent); margin-bottom: 4px; }

/* Mitarbeiterportal: Startseite, Meldungen und Gruss (A-101) */
.jac-portal-inhalt { max-width: 1100px; margin: 0 auto; padding: 0 16px; text-align: left; }
.jac-portal-mitteilung .jac-klapp-kopf { cursor: pointer; background: none; border: 0; text-align: left; }
.jac-portal-warnung { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0;
  padding: 12px 14px; border-radius: 12px; font-size: 13.5px;
  background: var(--jac-danger-soft); color: var(--jac-danger); }
.jac-portal-warnung .ti { font-size: 20px; line-height: 1.1; }
.jac-portal-gruss { margin: 18px 0 4px; }
.jac-portal-gruss-titel { font-size: 18px; font-weight: 700; color: var(--jac-ink); margin-bottom: 4px; }
.jac-portal-gruss p, .jac-portal-mitteilung p { margin-bottom: 10px; }
.jac-portal-mitteilung p:last-child { margin-bottom: 0; }

/* Zeiterfassung im Portal: nummerierte Schritte mit Bildern (A-101) */
.jac-schritt-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px;
  border-radius: 999px; background: var(--jac-accent); color: var(--jac-accent-ink);
  font-size: 13px; font-weight: 700; }
.jac-schritt-bilder { display: grid; gap: 16px; margin-top: 14px; justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.jac-schritt-bilder img { max-width: 100%; height: auto; max-height: 250px; border-radius: 10px; }
.jac-schritt-titel { font-weight: 700; margin-bottom: 6px; text-align: center; }

/* Meldungen in der Bearbeitung: eine Zeile je Vorgang statt Tabellenspalten (A-101) */
.jac-meldung-zeile { display: block; padding: 11px 14px; border-bottom: 1px solid var(--jac-hair);
  color: var(--jac-ink); }
.jac-meldung-zeile:last-child { border-bottom: 0; }
.jac-meldung-zeile:hover { background: var(--jac-rowhover); }
.jac-meldung-meine { box-shadow: inset 3px 0 0 var(--jac-accent); }
.jac-meldung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.jac-meldung-text { display: block; margin-top: 4px; font-size: 13.5px; }
.jac-meldung-fuss { display: block; margin-top: 3px; font-size: 11.5px; }

/* Verlauf eines IT-Vorgangs (A-94) */
.jac-ticket-eintrag { padding: 12px 14px; border-bottom: 1px solid var(--jac-hair); }
.jac-ticket-eintrag:last-child { border-bottom: 0; }
.jac-ticket-intern { background: var(--jac-warn-soft); box-shadow: inset 3px 0 0 var(--jac-warn); }
.jac-ticket-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 5px; }
.jac-ticket-text { white-space: pre-wrap; font-size: 13.5px; }
.jac-ticket-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Bestellte Stueckzahl in der Kleidungsbestellung berichtigen */
.jac-menge-feld { width: 74px; text-align: center; padding: 4px 6px; }

/* Ablauf einer Kleidungsbestellung: Bestellt - Zusammengestellt - Ausgegeben */
.jac-ablauf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 18px;
  max-width: 760px; }
.jac-ablauf-schritt { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; font-size: 13px; }
.jac-ablauf-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--jac-hair); color: var(--jac-muted); font-size: 14px; }
.jac-ablauf-fertig { color: var(--jac-ok); }
.jac-ablauf-fertig .jac-ablauf-ic { background: var(--jac-ok-soft); color: var(--jac-ok); }
.jac-ablauf-dran { background: var(--jac-focus); color: var(--jac-ink); font-weight: 700; }
.jac-ablauf-dran .jac-ablauf-ic { background: var(--jac-accent); color: var(--jac-accent-ink); }
.jac-ablauf-offen { color: var(--jac-faint); }
.jac-ablauf-linie { flex: 1 1 24px; min-width: 18px; height: 2px; background: var(--jac-hair); }
.jac-ablauf-linie-fertig { background: var(--jac-ok); }

/* Beschriftung links, Wert rechts - fuer die Eckdaten neben einem Vorgang */
.jac-daten-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-bottom: 1px solid var(--jac-hair); }
.jac-daten-zeile:last-child { border-bottom: 0; }
.jac-daten-zeile > :first-child { flex: none; }
.jac-daten-zeile > :last-child { text-align: right; min-width: 0; }

/* Knopfzeile am unteren Rand einer Karte */
.jac-card-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 14px; border-top: 1px solid var(--jac-hair); }

/* Kennzahlen und Balken (A-94): eine Farbe, duenne Marken, zurueckhaltende Achsen.
   Keine Farbskala - es gibt nur eine Reihe, die Farbe traegt hier keine Bedeutung
   ausser "das sind die Daten". */
.jac-zahlenreihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.jac-zahl { background: var(--jac-surface); border: 1px solid var(--jac-hair); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.jac-zahl-wert { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--jac-ink); }
.jac-zahl-titel { font-size: 13px; color: var(--jac-muted); }
.jac-zahl-fuss { font-size: 12px; color: var(--jac-faint); }

/* Zwoelf Monate nebeneinander */
.jac-reihe { display: flex; align-items: flex-end; gap: 6px; height: 220px; }
.jac-reihe-spalte { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.jac-reihe-wert { font-size: 12px; color: var(--jac-muted); line-height: 1; }
.jac-reihe-balken { width: 100%; max-width: 44px; background: var(--jac-accent);
  border-radius: 4px 4px 0 0; min-height: 2px; }
.jac-reihe-leer { background: var(--jac-hair); border-radius: 2px; }
.jac-reihe-titel { font-size: 11px; color: var(--jac-faint); white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.jac-reihe-jahr { font-size: 10px; }

/* Verteilung als Zeile mit Balken */
.jac-anteil-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 84px 34px; align-items: center;
  gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--jac-hair); }
.jac-anteil-zeile:last-child { border-bottom: 0; }
.jac-anteil-titel { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jac-anteil-spur { height: 8px; border-radius: 4px; background: var(--jac-hair); overflow: hidden; }
.jac-anteil-fuellung { display: block; height: 100%; border-radius: 4px; background: var(--jac-accent); }
.jac-anteil-wert { font-size: 13px; font-weight: 650; text-align: right; }

/* Einzelne Werte hervorheben, wo ein Chip zu laut waere - etwa ein ueberfaelliges
   Datum in einer Tabellenzelle. Die harten Tailwind-Farben (text-red-500 & Co.)
   sind im Dunkelmodus zu grell und teils kaum lesbar. */
.jac-text-danger { color: var(--jac-danger); font-weight: 650; }
.jac-text-ok { color: var(--jac-ok); }
.jac-text-warn { color: var(--jac-warn); }
.jac-text-info { color: var(--jac-info); }

/* Zeile, die heute dran ist - ein Hauch Farbe statt einer roten Flaeche */
.jac-zeile-heute > td { background: var(--jac-warn-soft); }

/* Eine Auswahl, die man auch am Text treffen kann. Vorher standen Kreis und
   Beschriftung als zwei Geschwister nebeneinander und alle Beschriftungen einer
   Gruppe zeigten per for="" auf dieselbe (nicht vorhandene) Kennung - ein Klick
   auf das Wort waehlte also nichts aus, und bei wenig Platz rutschte der Text
   in die naechste Zeile. */
.jac-option { display: inline-flex; align-items: center; gap: 7px; margin-right: 16px;
  min-height: 30px; cursor: pointer; white-space: nowrap; }
.jac-option input { flex: none; margin: 0; }
.jac-option span { white-space: normal; }

/* Am Finger ist das Label die Trefferflaeche, nicht das 24-px-Kaestchen. In den
   Listen ist es 42 px hoch, hier waren es 30. Die Regel steht bewusst hier und
   nicht oben bei den uebrigen Touch-Groessen: Eine Media-Query erhoeht die
   Spezifitaet nicht, und die Grundregel darueber wuerde sonst gewinnen.
   Betrifft 17 Masken, darunter den Personalfragebogen, den neue Mitarbeitende
   am Telefon ausfuellen (10.09.2026 am iPad gemessen). */
@media (pointer: coarse) {
  .jac-option { min-height: 40px; }
}

/* Schrittleiste des Personalfragebogens (Phase 3 des Redesigns) */
.jac-wizard { display: flex; align-items: flex-start; gap: 0; margin: 4px 0 18px; }
.jac-wizard-schritt { position: relative; flex: 1 1 0; min-width: 0; display: flex;
  flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; background: none;
  border: 0; cursor: pointer; text-align: center; }
.jac-wizard-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 999px; background: var(--jac-hair); color: var(--jac-muted);
  font-size: 13px; font-weight: 700; position: relative; z-index: 1; }
.jac-wizard-titel { font-size: 12px; line-height: 1.3; color: var(--jac-muted); }

.jac-wizard-fertig .jac-wizard-ic { background: var(--jac-ok-soft); color: var(--jac-ok); }
.jac-wizard-fertig .jac-wizard-titel { color: var(--jac-ink); }
.jac-wizard-dran .jac-wizard-ic { background: var(--jac-accent); color: var(--jac-accent-ink); }
.jac-wizard-dran .jac-wizard-titel { color: var(--jac-ink); font-weight: 650; }
.jac-wizard-fehler .jac-wizard-ic { background: var(--jac-danger-soft); color: var(--jac-danger); }
.jac-wizard-fehler .jac-wizard-titel { color: var(--jac-danger); }
.jac-wizard-offen .jac-wizard-titel { color: var(--jac-faint); }

/* Die Linie laeuft vom Kreis nach links zum vorherigen Schritt */
.jac-wizard-linie { position: absolute; top: 19px; right: 50%; left: -50%; height: 2px;
  background: var(--jac-border); }
.jac-wizard-linie-fertig { background: var(--jac-ok); }

/* Auf schmaler Breite waeren sieben Titel nicht mehr lesbar - dann bleibt nur der,
   an dem man gerade steht */
@media (max-width: 860px) {
  .jac-wizard-titel { display: none; }
  .jac-wizard-dran .jac-wizard-titel { display: block; }
  .jac-wizard-dran { flex: 2 1 0; }
}

/* Der Monat neben der Kalendernavigation - eine Angabe, kein Knopf */
.jac-kalender-monat { font-weight: 650; font-size: 14px; margin-left: 4px; }

/* Abschnitt innerhalb einer Seite (Job-Log und Aehnliches) */
.jac-abschnitt { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 650;
  margin: 22px 0 8px; color: var(--jac-ink); }

/* Ein Protokoll: feste Schrittweite, damit Zeitstempel untereinander stehen */
.jac-protokoll { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin: 0;
  background: var(--jac-field); border: 1px solid var(--jac-hair); border-radius: 10px;
  padding: 12px 14px; max-height: 70vh; overflow: auto; }
.jac-protokoll-kopf { display: block; margin-top: 10px; font-weight: 700; color: var(--jac-danger); }
.jac-protokoll-kopf:first-child { margin-top: 0; }

/* Die Seite vor der Anmeldung */
.jac-start { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; padding: 32px 20px;
  background: var(--jac-hair); text-align: center; }
html[data-theme="dark"] .jac-start { background: #14181e; }
.jac-start-logo { width: min(420px, 82vw); height: auto; }
.jac-start-text { color: var(--jac-muted); font-size: 15px; margin: 0; max-width: 44ch; }

/* Filterleiste ueber einer Liste: anklickbare Merkmale mit Anzahl */
.jac-filterleiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.jac-filter { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--jac-border); background: var(--jac-surface);
  font-size: 13px; color: var(--jac-muted); white-space: nowrap; }
.jac-filter:hover { border-color: var(--jac-faint); color: var(--jac-ink); }
.jac-filter-zahl { font-size: 12px; font-weight: 650; color: var(--jac-faint); }
.jac-filter.ist-aktiv { background: var(--jac-ink900); border-color: var(--jac-ink900);
  color: var(--jac-primary-ink); font-weight: 650; }
.jac-filter.ist-aktiv .jac-filter-zahl { color: var(--jac-primary-ink); opacity: .75; }
html[data-theme="dark"] .jac-filter.ist-aktiv { background: var(--jac-accent);
  border-color: var(--jac-accent); color: var(--jac-accent-ink); }
html[data-theme="dark"] .jac-filter.ist-aktiv .jac-filter-zahl { color: var(--jac-accent-ink); }

/* Ausstattung des Melders: je Bereich eine Zwischenzeile, darunter die Eintraege (A-94) */
.jac-ausstattung-gruppe { display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--jac-faint); }
.jac-ausstattung-gruppe .ti { font-size: 15px; }
.jac-ausstattung-gruppe:first-child { padding-top: 4px; }
/* Am Tablet wird darauf getippt, nicht geklickt: nichts unter 44 Pixel Hoehe */
.jac-ausstattung-zeile { min-height: 44px; }

/* Bestandstabelle der Arbeitskleidung (A-85)
   Der Artikel steht als Zwischenzeile ueber seinen Groessen; die Zahlen daneben sind
   rechtsbuendig und in gleicher Ziffernbreite, damit man Spalten vergleichen kann.
   Der Kopf bleibt beim Blaettern stehen - die Liste ist lang. */
.jac-bestand-rahmen { max-height: 70vh; overflow: auto; }
.jac-bestand thead th { position: sticky; top: 0; z-index: 3; }
.jac-bestand-artikel td { background: var(--jac-hair); padding-top: 9px; padding-bottom: 9px; }
.jac-bestand-name { font-weight: 650; color: var(--jac-ink); }
.jac-bestand-artikel .jac-chip { margin-left: 8px; }
.jac-bestand-summe { margin-left: 10px; font-size: 12.5px; color: var(--jac-muted); }
.jac-bestand-groesse { width: 90px; white-space: nowrap; }
.jac-bestand-leer { width: 26px; }
.jac-bestand-feld { width: 88px; text-align: right; }
.jac-bestand tbody td { padding-top: 6px; padding-bottom: 6px; }
/* Feste Spaltenbreiten: Sonst verteilt die Tabelle den Platz nach Inhalt, und die
   Zahl stand einen halben Bildschirm von ihrer Ueberschrift entfernt. */
.jac-bestand { table-layout: fixed; width: 100%; }
.jac-bestand th:nth-child(n+3), .jac-bestand td:nth-child(n+3) { width: 130px; }
/* Die Ueberschrift gehoert ueber die Zahl, nicht an den linken Rand */
.jac-bestand thead th.text-right { text-align: right; }
/* Die Eingabespalte traegt Feld und Kartonhinweis - 130 Pixel schnitten das "x40" ab */
.jac-bestand th.jac-bestand-eingabe, .jac-bestand td.jac-bestand-eingabe { width: 190px; }
/* Was aus der eingetragenen Stueckzahl wirklich wird: "1 x 25 = 25" */
.jac-kartonhinweis { font-size: 11.5px; color: var(--jac-muted); white-space: nowrap; }
/* Weniger als nichts: mehr ausgegeben als eingelagert - das muss auffallen */
.jac-bestand-minus { color: var(--jac-danger); font-weight: 650; }

/* Artikelkarten der Kleidungsbestellung: Kartenfarben folgen dem Thema, nur das
   Bildfeld bleibt hell - die Produktfotos sind auf Weiss freigestellt */
.jac-artikelkarte { padding: 12px 14px; gap: 10px; }
.jac-artikel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jac-artikel-titel { font-size: 14px; font-weight: 650; color: var(--jac-ink); min-width: 0; }
.jac-artikel-inhalt { display: flex; align-items: flex-start; gap: 14px; }
.jac-artikel-bild { flex: 0 0 96px; height: 112px; padding: 6px; overflow: hidden;
  background: #fff; border: 1px solid var(--jac-hair); border-radius: 10px; }
/* `max-height: 100%` half nicht: Im Raster waechst die Zeile mit dem Bild, die Prozent-
   angabe bezieht sich also auf das Bild selbst. Hochformate ragten so unten heraus.
   `object-fit` rechnet stattdessen im festen Rahmen. */
.jac-artikel-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jac-artikel-felder { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.jac-artikel-info { grid-column: 1 / -1; }
/* Artikelbeschreibung im Dialog - frueher `bg-gray-100`, also im Dunkeln zu hell */
.jac-modal-beschreibung { padding: 12px 14px; border-radius: 10px; background: var(--jac-hair);
  color: var(--jac-ink); font-size: 13.5px; line-height: 1.55; }

/* Textbausteine (A-94) */
.jac-baustein { padding: 10px 14px; border-bottom: 1px solid var(--jac-hair); }
.jac-baustein:last-child { border-bottom: 0; }
.jac-baustein-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jac-baustein-titel { display: flex; align-items: center; gap: 8px; text-align: left; flex: 1; min-width: 0; }
.jac-baustein-vorschau { font-size: 13px; color: var(--jac-muted); margin: 4px 0 0 22px; }
.jac-baustein-form { margin: 10px 0 4px 22px; }
.jac-bausteinzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.jac-baustein-knopf { cursor: pointer; border: 0; }
.jac-baustein-knopf:hover { filter: brightness(0.95); }

/* Schmales Eingabefeld, etwa fuer die Suche in einer Kartenueberschrift */
.jac-ctrl-sm { padding: 5px 9px; font-size: 13px; max-width: 190px; }
/* Suchfeld, dessen Platzhalter mehrere Wege nennt - 190 px schneiden ihn ab */
.jac-ctrl-suche { width: 15rem; max-width: 100%; }

/* Unterschriftsfeld: heller Grund, damit der Zug auch im Dunkelmodus zu sehen ist */
.jac-signatur { background: #ffffff; border: 1px dashed var(--jac-border); border-radius: 10px;
  width: 100%; touch-action: none; }
/* Keine Groessenangaben am Canvas - signature_pad setzt die Breite selbst,
   jede CSS-Skalierung wuerde den Zug verzerren */
.jac-signatur canvas { display: block; }

/* Zwischenzeile, die eine Gruppe von Tabellenzeilen ueberschreibt */
.jac-tabellen-gruppe > td { background: var(--jac-warn-soft); font-weight: 650; }

/* Was als Naechstes zu tun ist: Knoepfe eines Vorgangs */
.jac-schrittleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px; }

/* ---------------------------------------------------------------------------
   Datenblatt: die Feld/Wert-Listen der Detailseiten (Schluessel, Maschine,
   Mobilgeraet, Mitarbeiterakte ...). Sie standen bisher komplett in
   jac-muted-text - also war die Beschriftung fett und dunkel, der eigentliche
   Wert daneben blass. Genau andersherum liest es sich: die Beschriftung tritt
   zurueck, der Wert traegt die Farbe.
   --------------------------------------------------------------------------- */
.jac-datenblatt {
    font-size: .875rem;
    line-height: 1.45;
    color: var(--jac-ink);
    max-width: 52rem;
}

.jac-datenblatt table { width: 100%; }

.jac-datenblatt table td {
    padding-block: .22rem;
    vertical-align: top;
}

/* Beschriftungsspalte */
.jac-datenblatt table td:first-child,
.jac-datenblatt table td:first-child b,
.jac-datenblatt table td:first-child strong {
    color: var(--jac-muted);
    font-weight: 500;
}

/* Wertspalte */
.jac-datenblatt table td:not(:first-child) { color: var(--jac-ink); }

/* Auf schmalen Geraeten stehen Beschriftung und Wert untereinander statt
   nebeneinander - sonst quetscht sich der Wert in eine Handbreit Restspalte. */
@media (max-width: 640px) {
    .jac-datenblatt table,
    .jac-datenblatt table tbody,
    .jac-datenblatt table tr,
    .jac-datenblatt table td { display: block; width: auto !important; }

    .jac-datenblatt table tr { margin-bottom: .6rem; }
    .jac-datenblatt table td:first-child { padding-bottom: 0; font-size: .8125rem; }
    .jac-datenblatt table td:not(:first-child) { padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   Knoepfe, die im Seitentitel haengen.

   Auf fuenfzehn Seiten stehen die Aktionsknoepfe innerhalb der Ueberschrift und
   werden per float-right nach rechts geschoben. Das ist ein alter Kniff mit
   zwei Haken: die Knoepfe ragen aus der Zeile heraus, und auf schmalen Geraeten
   schieben sie sich uebereinander statt umzubrechen.

   Steht ein Knopf im Titel, wird die Ueberschrift deshalb zur Flex-Zeile - dort
   ist float wirkungslos, die Knoepfe ruecken sauber nach rechts und brechen bei
   Bedarf um.
   --------------------------------------------------------------------------- */
.jac-ph-title:has(.jac-btn) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* etwas grosszuegiger als sonst: der Abstand haelt auch dann noch Titel und
       ersten Knopf auseinander, wenn die Knopfreihe die Zeile fuellt und kein
       Platz zum Rechtsruecken bleibt */
    gap: 14px;
}

/* Der erste Knopf schiebt sich und alles Folgende nach rechts */
.jac-ph-title:has(.jac-btn) > :is(a, button, span, div).jac-btn:first-of-type {
    margin-left: auto;
}

/* Die Knoepfe stehen jetzt in der Zeile - Schrift und Umfluss der Ueberschrift
   duerfen sie nicht mehr treffen */
.jac-ph-title .jac-btn {
    float: none !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
}

@media (max-width: 640px) {
    /* Auf dem Handy unter den Titel statt daneben */
    .jac-ph-title:has(.jac-btn) > .jac-btn:first-of-type { margin-left: 0; }
    .jac-ph-title:has(.jac-btn) { row-gap: 10px; }
}

/* ---------------------------------------------------------------------------
   Systemhinweis ueber dem Seiteninhalt (geplante Wartung, Stoerung).

   Der Balken war drei Zeilen hoch: zwei 48-Pixel-Warnbilder als Dekoration und
   der Text in zwei Zeilen zwischen >>> und <<<. Er steht auf jeder Seite - auf
   dem iPad kostete er ein Zehntel des Bildschirms. Jetzt eine Zeile mit einem
   Symbol; der Text ist unveraendert, nur der Nachsatz tritt zurueck.
   --------------------------------------------------------------------------- */
.jac-systemhinweis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Nicht umbrechen: sonst rutscht das Symbol auf schmalen Geraeten in eine
       eigene Zeile und der Hinweis ist wieder drei Zeilen hoch. Der Text
       umbricht innerhalb seines eigenen Blocks. */
    flex-wrap: nowrap;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: center;
}

.jac-systemhinweis .ti { font-size: 18px; flex: none; }
.jac-systemhinweis > span:not(.ti) { min-width: 0; }

/* Der Zusatz sagt, was ausfaellt - wichtig, aber nicht die Hauptmeldung */
.jac-systemhinweis-zusatz { font-weight: 400; opacity: .9; }

.jac-systemhinweis-wartung  { background: #c2620c; }
.jac-systemhinweis-stopp    { background: #b3261e; }
.jac-systemhinweis-stoerung { background: #1d4ed8; }

html[data-theme="dark"] .jac-systemhinweis-wartung  { background: #8a4508; }
html[data-theme="dark"] .jac-systemhinweis-stopp    { background: #8c1d18; }
html[data-theme="dark"] .jac-systemhinweis-stoerung { background: #1e3a8a; }

@media (max-width: 640px) {
    .jac-systemhinweis { font-size: 12.5px; padding: 6px 12px; gap: 8px; }
    /* Auf dem Handy zaehlt die Hauptmeldung; der Nachsatz steht darunter */
    .jac-systemhinweis-zusatz { display: block; }
}

/* Matrix aus Kaestchen (Module je Firma): die ganze Zelle ist Schaltflaeche -
   auf dem iPad war das Kaestchen allein kaum zu treffen. */
.jac-matrixzelle { padding: 0 !important; }

.jac-matrixzelle > label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px;
    cursor: pointer;
    border-radius: 8px;
}

.jac-matrixzelle > label:hover { background: var(--jac-hover, rgba(0, 0, 0, .04)); }
html[data-theme="dark"] .jac-matrixzelle > label:hover { background: rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------------------
   Fehlerseiten (403, 404, 419, 500 ...).

   Vorher stand dort nur die Zahl und ein englisches Wort in Grossbuchstaben,
   grau und mittig - ohne Erklaerung und ohne Weg zurueck. Wer dort landete, kam
   nur ueber den Zurueck-Knopf des Browsers wieder heraus. Jetzt: Logo, ein Satz
   in normaler Sprache und zwei Knoepfe.
   --------------------------------------------------------------------------- */
.jac-fehlerseite {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 20px;
    text-align: center;
    background: var(--jac-surface-0, #f4f5f7);
}

.jac-fehler-logo { height: 44px; width: auto; margin-bottom: 22px; }

.jac-fehler-code {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--jac-muted);
}

.jac-fehler-titel {
    margin: 2px 0 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--jac-ink);
}

.jac-fehler-text {
    margin: 10px 0 0;
    max-width: 34rem;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--jac-muted);
}

.jac-fehler-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

html[data-theme="dark"] .jac-fehlerseite { background: #14181e; }

/* ---------------------------------------------------------------------------
   Eingabemasken (Neu anlegen, Bearbeiten).

   Die Felder liefen ueber die volle Bildschirmbreite: auf einem 1440er Schirm
   ist das Feld fuer ein siebenstelliges Kuerzel 1150 Pixel breit. Das Auge muss
   von der Beschriftung bis zum Feldende wandern, und die Maske wirkt
   ungeordnet. Der Block bekommt deshalb eine Lesebreite; die Felder darin
   bleiben, wie sie sind.
   --------------------------------------------------------------------------- */
.jac-maske {
    max-width: 46rem;
    /* Die Maske als ein Stueck: die Felder lagen blank auf der Seitenflaeche und
       liefen ohne sichtbare Grenze in den Rest der Seite ueber. Die neueren
       Bereiche (Ein- und Austritte, Abmahnungen) machen es schon so. */
    background: var(--jac-surface);
    border: 1px solid var(--jac-border);
    border-radius: 14px;
    padding: 20px 22px;
}

/* Steht die Maske schon in einer Karte, waere das eine zweite Umrandung */
:is(.jac-card, .jac-panel, .jac-auth-card) .jac-maske {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Steckt eine Tabelle in der Maske, ist sie der Hauptinhalt und braucht die
   volle Breite - etwa die Zeitzeilen des Anhangscheins. Die Pruefung im
   Stylesheet greift auch dann, wenn die Tabelle aus einer eingebundenen
   Teilansicht kommt und in der Maske selbst gar nicht zu sehen ist. */
.jac-maske:has(table) { max-width: none; }

/* Eine Maske mit Seitenspalte - Formular links, Hinweise rechts - braucht mehr als
   die 46 rem einer einspaltigen. Sonst teilen sich beide 736 px: Die Hinweiskarte
   nimmt ihre 340 px, dem Formular bleiben 334, und darin stehen nochmals zwei
   Spalten - Eingabefelder von 150 px. "Ziemlich gestaucht" (Ron, 07.09.2026).
   Betrifft sechs Masken: Abmahnung anlegen, Vorlage bearbeiten, Kleidung
   unterschreiben, Geschenk bearbeiten, Wiki-Bereiche und Wiki-Beitrag. */
.jac-maske:has(> .grid > .jac-card + .jac-card) { max-width: 76rem; }

/* Dasselbe fuer die Abschnitte aus dem Fremdpaket (x-jet-form-section): Auch dort
   steht die Beschreibung neben dem Formular, und die Felder nehmen davon nochmals
   nur zwei Drittel - in 46 rem bleiben 260 px je Feld. Betrifft unter anderem den
   Papier-Arbeitsschein (07.09.2026). */
.jac-maske:has(.lg\:grid-cols-3) { max-width: 68rem; }

/* Steht die Maske selbst in einer Rasterspalte, begrenzt schon die Spalte ihre Breite.
   Ihre eigenen 46 rem liessen sie sonst mitten in der Spalte enden, mit einer Luecke
   zur Seitenspalte daneben (Vorlage bearbeiten, Wiki-Bereiche). */
.grid > .jac-maske { max-width: none; }

/* Kurze Angaben brauchen kein Feld ueber die ganze Breite. Bei Datum, Uhrzeit
   und Zahlen steht die Laenge von vornherein fest - die werden automatisch
   schmal. Alles andere zeichnet die Ansicht selbst aus. */
.jac-maske input[type="date"],
.jac-maske input[type="time"],
.jac-maske input[type="month"],
.jac-maske input[type="number"],
.jac-maske .jac-feld-kurz { max-width: 12rem; }

.jac-maske .jac-feld-mittel { max-width: 22rem; }

/* Knopfreihe am Ende der Maske */
.jac-maske-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--jac-hair, rgba(0,0,0,.08));
}

/* Datumsfelder (Pikaday) in Eingabemasken: ein Datum hat zehn Zeichen - das
   Feld muss nicht ueber die ganze Zeile laufen. Ausserhalb der Masken (etwa in
   Tabellenzeilen) bleibt die Breite, wie die Stelle sie setzt. */
.jac-maske .jac-datumsfeld { max-width: 12rem; }

/* ---------------------------------------------------------------------------
   Pflichtfelder kenntlich machen.

   In 63 Masken tragen Felder ein required, ohne dass man es ihnen ansieht:
   Man fuellt aus, klickt auf Speichern, und erst dann sagt der Browser, was
   fehlt. Ein Sternchen an der Beschriftung sagt es vorher.

   Die Regel greift ueber das Feld selbst, nicht ueber das Markup - dadurch
   wirkt sie in allen Masken auf einmal und bleibt richtig, wenn sich an einem
   Feld die Pflicht aendert. Masken, die ihr Sternchen schon im Text tragen
   (Personalfragebogen), nutzen kein required und bleiben unberuehrt.
   --------------------------------------------------------------------------- */
.jac-label:has(+ :required)::after,
.jac-label:has(+ div :required)::after,
.jac-label:has(+ * > :required)::after {
    content: " *";
    color: var(--jac-accent, #e8940c);
    font-weight: 700;
}

/* Der Hinweis, was das Sternchen bedeutet - einmal am Fuss der Maske.
   Nicht an jac-maske gebunden: manche Masken tragen die Klasse nicht, haben
   aber Pflichtfelder. Massgeblich ist, dass es ein Formular mit beschrifteten
   Feldern ist - Such- und Filterzeilen bleiben so aussen vor.
   Den Text setzt das Layout, damit er uebersetzbar bleibt. */
form:has(.jac-label):has(:required)::after {
    content: var(--jac-pflichtfeld-hinweis, "* Pflichtfeld");
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--jac-muted);
}

/* Hinweis in einer leeren Liste - gesetzt vom Skript im Layout */
.jac-leere-liste {
    padding: 22px 16px !important;
    text-align: center;
    color: var(--jac-muted);
    font-size: 13.5px;
}

/* ---------------------------------------------------------------------------
   Rueckfragen und Hinweise im Aussehen der App.

   Bestaetigungen liefen ueber den grauen Systemkasten des Browsers
   (confirm/alert): funktioniert, sieht aber nicht nach der App aus, und der
   Text laesst sich nicht gestalten. Das Skript im Layout faengt die
   vorhandenen Aufrufe ab und zeigt stattdessen diesen Dialog - ohne dass eine
   der 87 Ansichten dafuer angefasst werden musste.
   --------------------------------------------------------------------------- */
.jac-frage-schleier {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 18, 23, .55);
    backdrop-filter: blur(2px);
}

.jac-frage-schleier[hidden] { display: none; }

.jac-frage {
    width: 100%;
    max-width: 28rem;
    background: var(--jac-surface);
    border: 1px solid var(--jac-border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    padding: 22px 24px 18px;
}

.jac-frage-titel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--jac-ink);
}

.jac-frage-titel .ti { font-size: 20px; color: var(--jac-accent); }

.jac-frage-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--jac-ink);
    white-space: pre-line;
}

.jac-frage-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Auf dem Handy volle Breite - sonst sind die Knoepfe schwer zu treffen */
@media (max-width: 480px) {
    .jac-frage-knoepfe { flex-direction: column-reverse; }
    .jac-frage-knoepfe .jac-btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   Sichtbarer Bereich auf dem Telefon (Safe Area)

   Das Layout traegt "viewport-fit=cover": Die Seite reicht bis in die Ecken
   des Bildschirms, also auch unter die Uhr, unter die Aussparung der Kamera
   und unter den Balken zum Wechseln der Apps. Ohne Gegenmassnahme sitzt die
   Kopfzeile dort teilweise verdeckt.

   env(safe-area-inset-*) liefert, wie viel Platz das Geraet an jeder Seite
   braucht. Am Rechner und auf Geraeten ohne Aussparung sind alle vier Werte
   null - dort aendert sich nichts.

   Die Kopfzeile waechst nach oben mit, damit ihre Flaeche den Bereich hinter
   der Uhr ausfuellt; ihr Inhalt beginnt darunter.
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {
    .jac-topbar {
        height: calc(4rem + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* schiebt den Inhalt unter die nun hoehere Kopfzeile */
    #navmain { padding-top: calc(4rem + env(safe-area-inset-top)); }

    /* Querformat: das Menue rutscht neben die Aussparung, nicht darunter */
    .jac-navbg { padding-left: env(safe-area-inset-left); }

    .jac-content {
        padding-right: env(safe-area-inset-right);
        /* damit der letzte Knopf nicht unter dem Balken zum App-Wechsel klebt */
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Dialoge, die am unteren Rand aufgehen */
    .jac-frage-panel, .jac-modal-panel { margin-bottom: env(safe-area-inset-bottom); }
}


/* ==========================================================================
   Hinweis: die App laesst sich auf den Startbildschirm legen

   Ein schmales Band unter der Kopfzeile, das einmal erscheint und nach dem
   Wegklicken nicht wiederkommt. Bewusst zurueckhaltend - es steht ueber der
   Arbeit, nicht davor.
   ========================================================================== */

.jac-installhinweis {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .7rem 1rem;
    background: #fff7e6;
    border-bottom: 1px solid var(--jac-border);
    font-size: .9rem;
    color: var(--jac-ink);
}

.jac-installhinweis[hidden] { display: none; }

/* Das hidden-Attribut allein reicht bei Knoepfen nicht: .jac-btn setzt
   display auf inline-flex, und jede eigene Regel schlaegt die Vorgabe des
   Browsers. Ohne diese Zeile bleibt ein verborgener Knopf sichtbar - erst beim
   Installieren-Hinweis aufgefallen, dann beim Scanner wieder. Deshalb
   gilt sie fuer alle Knoepfe der App. */
.jac-btn[hidden] { display: none; }

.jac-installhinweis-symbol {
    flex: none;
    font-size: 1.25rem;
    color: var(--jac-accent-press, #d98f00);
}

.jac-installhinweis-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .5rem;
    align-items: baseline;
}

.jac-installhinweis-text strong { font-weight: 650; }

.jac-installhinweis-knoepfe {
    flex: none;
    display: flex;
    gap: .5rem;
}

html[data-theme="dark"] .jac-installhinweis {
    background: #2a2417;
    border-bottom-color: #3a3020;
    color: #e7eaed;
}

/* Auf dem Telefon untereinander - nebeneinander wird es zu eng */
@media (max-width: 640px) {
    .jac-installhinweis {
        flex-wrap: wrap;
        gap: .5rem .75rem;
    }

    .jac-installhinweis-knoepfe {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ==========================================================================
   Kamera-Scanner fuer Etiketten
   ========================================================================== */

.jac-scanner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: .75rem 0;
}

.jac-scanner-hinweis {
    flex: 1 1 100%;
    margin: 0;
    font-size: .875rem;
    color: var(--jac-muted);
}

.jac-scanner-hinweis[hidden] { display: none; }

.jac-scanner-treffer { color: var(--jac-ok, #2f8f5b); font-weight: 600; }
.jac-scanner-fehler { color: var(--jac-danger, #b4232a); }

/* Das Kamerabild: hoechstens so breit wie die Maske, damit die Seite auf
   dem Telefon nicht seitlich wegrutscht. */
.jac-scanner-bild {
    flex: 1 1 100%;
    max-width: 32rem;
    margin-top: .25rem;
    border: 1px solid var(--jac-border);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.jac-scanner-bild[hidden] { display: none; }

.jac-scanner-bild video,
.jac-scanner-bild canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
}

/* Die Bibliothek blendet eigene Bedienelemente ein, die nicht zur App
   passen - der Start liegt bei unserem Knopf. */
.jac-scanner-bild #html5-qrcode-anchor-scan-type-change,
.jac-scanner-bild button[id^="html5-qrcode-button"] { display: none; }


/* ---------- Unterweisungen (A-155) ---------------------------------------
   Gebaut fuer ein Telefon in der Hand: grosse Trefferflaechen, ein Knopf je
   Entscheidung, nichts, was man zielen muss. Farben kommen aus den Variablen,
   damit Hell und Dunkel ohne zweiten Satz Regeln stimmen. */

/* Wo bin ich? */
.jac-unterweisung-fortschritt { margin-bottom: 4px; }
.jac-unterweisung-fortschritt-text {
    font-size: 13px; font-weight: 600; color: var(--jac-muted); margin-bottom: 6px;
}
.jac-fortschritt-balken {
    height: 8px; border-radius: 999px; background: var(--jac-hair); overflow: hidden;
}
.jac-fortschritt-fuellung {
    height: 100%; background: var(--jac-accent); border-radius: 999px;
    transition: width .25s ease;
}

/* Der Kapiteltext. Etwas groesser als sonst: gelesen wird das im Stehen,
   im Halbdunkel, oft von Leuten, die eine Brille braeuchten. */
.jac-unterweisung-inhalt { font-size: 16px; line-height: 1.7; }
.jac-unterweisung-inhalt img {
    max-width: 100%; height: auto; border-radius: 10px; margin: .8em 0;
}
.jac-unterweisung-inhalt li { margin: .5em 0; }

/* Weiter und zurueck. Auf dem Telefon untereinander und ueber die volle
   Breite, ab Tablet nebeneinander - weiter rechts, wo der Daumen liegt. */
.jac-unterweisung-fuss {
    display: flex; flex-direction: column-reverse; gap: 10px; margin-top: 20px;
}
.jac-unterweisung-fuss > * { width: 100%; justify-content: center; }
.jac-btn-weiter { font-size: 15px; padding: 13px 18px; }
.jac-btn-weiter:disabled { opacity: .5; cursor: not-allowed; }

@media (min-width: 640px) {
    .jac-unterweisung-fuss { flex-direction: row; justify-content: space-between; }
    .jac-unterweisung-fuss > * { width: auto; }
}

/* Eine Unterweisung in der Uebersicht */
.jac-unterweisung-karte {
    border: 1px solid var(--jac-border); border-radius: 12px; padding: 14px;
    background: var(--jac-surface);
}
.jac-unterweisung-karte.ist-erledigt { border-color: var(--jac-hair); }
.jac-unterweisung-kopf {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    justify-content: space-between;
}
.jac-unterweisung-titel { font-weight: 650; color: var(--jac-ink); }

/* Antwortmoeglichkeiten: die ganze Zeile ist die Auswahl. Ein Kaestchen von
   16 Pixeln trifft niemand mit nassen Haenden im Treppenhaus. */
.jac-antwort-zeile {
    display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
    border: 1px solid var(--jac-border); border-radius: 10px; padding: 13px 14px;
    background: var(--jac-surface); transition: border-color .13s, background .13s;
    font-size: 15px; line-height: 1.45;
}
.jac-antwort-zeile:hover { background: var(--jac-rowhover); }
.jac-antwort-zeile:has(input:checked) {
    border-color: var(--jac-accent); background: var(--jac-warn-soft);
}
.jac-antwort-kasten { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--jac-accent); }

/* Eine Frage, die im vorigen Anlauf nicht stimmte */
.jac-frage-falsch { border-color: var(--jac-warn); }

/* Das Unterschriftsfeld */
.jac-unterschrift-feld {
    border: 1px dashed var(--jac-border); border-radius: 10px;
    background: var(--jac-field); touch-action: none;
}
.jac-unterschrift-feld canvas { display: block; width: 100%; height: 200px; }

/* Zusammenfassung vor der Unterschrift */
.jac-daten-liste { display: grid; gap: 10px; }
.jac-daten-liste > div { display: flex; justify-content: space-between; gap: 12px; }
.jac-daten-liste dt { color: var(--jac-muted); font-size: 13.5px; }
.jac-daten-liste dd { font-weight: 600; text-align: right; }

/* Verwaltung der Unterweisungen (A-155) */
.jac-kapitel-zeile {
    border: 1px solid var(--jac-border); border-radius: 10px; padding: 12px;
    background: var(--jac-surface);
}
.jac-kapitel-titel {
    display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
    cursor: pointer; color: var(--jac-ink); font: inherit; text-align: left;
    /* Innenabstand nur fuer den Finger: der Text sass auf 24 Pixel Hoehe, und das ist
       auf dem iPad kaum zu treffen. Der Aussenabstand nimmt ihn wieder zurueck, damit
       die Zeile genauso aussieht wie vorher (Durchsicht 01.09.2026). */
    padding: 9px 0; margin: -9px 0;
}

/* Sprachen: eine Kachel je Sprache mit dem Stand */
.jac-sprach-karte {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px solid var(--jac-border); border-radius: 10px; padding: 11px 13px;
    background: var(--jac-surface); text-decoration: none; color: var(--jac-ink);
    transition: border-color .13s, background .13s;
}
.jac-sprach-karte:hover { background: var(--jac-rowhover); border-color: var(--jac-accent); }
.jac-sprach-name { font-weight: 600; }

/* Der deutsche Name unter der Eigenbezeichnung: Wer die Uebersetzungen betreut, sieht
   sonst eine Reihe fremder Schriften und muss raten, welche davon Bulgarisch ist. */
.jac-sprach-bezeichnung {
    display: block; font-weight: 400; font-size: 12.5px; color: var(--jac-muted);
    margin-top: 1px;
}

/* Uebersetzen: links das Original, rechts die Uebersetzung. Auf schmalen
   Bildschirmen untereinander - nebeneinander waere beides unlesbar. */
.jac-uebersetzung-paar { display: grid; gap: 14px; }
@media (min-width: 900px) {
    .jac-uebersetzung-paar { grid-template-columns: 1fr 1fr; }
}
.jac-quelltext {
    background: var(--jac-hair); border-radius: 8px; padding: 10px 12px;
    color: var(--jac-muted);
}
.jac-uebersetzung-veraltet { border-color: var(--jac-warn); }

/* Standuebersicht */
.jac-kennzahl { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--jac-ink); }
.jac-kennzahl.ist-warnung { color: var(--jac-danger); }

.jac-tabelle th {
    text-align: left; font-weight: 650; color: var(--jac-muted);
    padding: 9px 12px; border-bottom: 1px solid var(--jac-border); white-space: nowrap;
}
.jac-tabelle td { padding: 9px 12px; border-bottom: 1px solid var(--jac-hair); }
.jac-tabelle tr:last-child td { border-bottom: 0; }
.jac-tabelle tbody tr:hover { background: var(--jac-rowhover); }

/* Sprachwahl in der Kopfzeile der Mitarbeiterbox (A-155) */
.jac-sprachknopf {
    display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px;
    border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit;
    font-size: 13px; transition: background .13s, color .13s;
}
.jac-sprachknopf:hover { background: var(--jac-rowhover); color: var(--jac-ink); }
.jac-sprachknopf .ti { font-size: 18px; }
.jac-sprachkuerzel { font-weight: 650; letter-spacing: .02em; }

.jac-sprachliste {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 190px; max-height: 60vh; overflow-y: auto;
    background: var(--jac-surface); border: 1px solid var(--jac-border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 5px;
}
.jac-sprachzeile {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    /* Grosszuegig, weil hier auf einem Telefon mit dem Daumen getroffen wird */
    padding: 11px 12px; border-radius: 8px; text-decoration: none;
    color: var(--jac-ink); font-size: 14.5px;
}
.jac-sprachzeile:hover { background: var(--jac-rowhover); }
.jac-sprachzeile.ist-gewaehlt { background: var(--jac-warn-soft); font-weight: 650; }

/* Praesenz-Unterweisung im Vollbild (A-155).
   Vor einer Gruppe gelesen, oft vom iPad in der Hand der Objektleitung: alles eine
   Nummer groesser, und die Flaeche gehoert dem Inhalt. */
.jac-praesentation {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--jac-surface); color: var(--jac-ink);
    /* Auf dem iPad im Vollbild reicht der Bildschirm bis unter die Uhr */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.jac-praesentation-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--jac-hair);
}
.jac-praesentation-titel { font-weight: 700; font-size: 15px; }
.jac-praesentation-stand { font-size: 13px; color: var(--jac-muted); }

.jac-praesentation-buehne {
    flex: 1; overflow-y: auto; padding: 28px 20px;
    max-width: 1100px; width: 100%; margin: 0 auto;
}
.jac-praesentation-h1 { font-size: 30px; font-weight: 700; margin-bottom: 18px; line-height: 1.2; }
/* Vorlesbar aus zwei Metern Abstand */
.jac-praesentation-inhalt { font-size: 20px; line-height: 1.65; }
.jac-praesentation-inhalt li { margin: .55em 0; }
.jac-praesentation-inhalt img { max-width: 100%; height: auto; border-radius: 10px; margin: .8em 0; }

/* Sprachumschalter waehrend der Praesenz-Unterweisung: Steht jemand dabei, der wenig
   Deutsch liest, laesst sich dasselbe Kapitel in seiner Sprache zeigen. Auf dem iPad
   muessen die Knoepfe umbrechen duerfen - bei fuenf Sprachen passt sonst der
   Schliessen-Knopf nicht mehr daneben. */
.jac-praesentation-sprachen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
/* Die Namen stehen neben dem Kapitelstand und duerfen den Kopf nicht sprengen */
.jac-praesentation-namen { font-weight: 600; color: var(--jac-ink); }

/* Noch nicht uebersetzt - lieber offen sagen als den deutschen Text als Uebersetzung
   ausgeben */
.jac-praesentation-hinweis {
    margin-top: 22px; font-size: 15px; color: var(--jac-muted);
    border-top: 1px solid var(--jac-hair); padding-top: 14px;
}

/* Die Sprache je Person in der Teilnehmerliste */
.jac-sprache-fuer-alle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* jac-input ist auf volle Breite ausgelegt - hier soll das Feld nur so breit sein wie
   noetig, sonst steht die Beschriftung darueber statt daneben */
.jac-sprache-fuer-alle select { width: auto; min-width: 160px; flex: none; margin-left: 0; }
/* Trennt die Haken-Knoepfe von der Sprachwahl - zwei verschiedene Griffe in einer Zeile */
.jac-sprache-trenner { width: 1px; align-self: stretch; background: var(--jac-hair); margin: 0 4px; }
.jac-zeilen-sprache { flex: none; margin-left: auto; }
.jac-zeilen-sprache .jac-sprachfeld { min-width: 130px; }

.jac-praesentation-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 20px; border-top: 1px solid var(--jac-hair);
}
.jac-btn-gross { font-size: 16px; padding: 14px 22px; }

/* Beim Unterschreiben ist die Buehne schmaler - das iPad wird gehalten, nicht gelesen */
.jac-unterschrift-buehne { max-width: 760px; }

@media (max-width: 640px) {
    .jac-praesentation-h1 { font-size: 23px; }
    .jac-praesentation-inhalt { font-size: 17px; }
    .jac-praesentation-fuss { flex-direction: column-reverse; }
    .jac-praesentation-fuss > * { width: 100%; justify-content: center; }
}

/* Eine Antwort, die daneben lag (A-155).
   Deutlich, aber nicht schreiend: Es geht darum, dass es ankommt, nicht darum,
   jemanden vorzufuehren. Die richtige Antwort wird nicht verraten - der Weg dorthin
   fuehrt zurueck ins Kapitel. */
.jac-antwort-zeile.ist-daneben {
    border-color: var(--jac-danger);
    background: var(--jac-danger-soft);
}
.jac-antwort-zeile.ist-daneben:has(input:checked) {
    border-color: var(--jac-danger);
    background: var(--jac-danger-soft);
}
.jac-daneben-zeichen {
    color: var(--jac-danger); font-size: 19px !important; flex: none;
}