/* Mini-Lager – Auszug aus der Designsprache-Vorlage (jupiter.css, mitarbeiter-db-proto, Stand 2026-10-20).
   Tokens (:root), Basis, Kopf, Kachel, Listenzeile (akt-zeile), Radial (akt-rund), Formular, Meldung/Toast,
   Rueckfrage-Dialog, Tabelle, Marken (j-badge) und Navigationsleiste (tm-*), erzeugt mit app/tools/css_auszug.py.
   Keine eigenen Farbwerte: eigene Regeln (eigen.css, unten angehaengt) nutzen nur var(--...). */
:root { --j-nacht-900: #111a33; --j-nacht-800: #1b2750; --j-nacht-700: #243468; --j-nacht-600: #2f4383; --j-nacht-100: #e6eaf5; --j-nacht-50: #f2f4fa; --j-bernstein-600: #c77d12; --j-bernstein-500: #e39a2d; --j-bernstein-100: #fcefd9; --j-stein-900: #1e1f24; --j-stein-700: #43454d; --j-stein-500: #6b6e78; --j-stein-300: #c9cbd2; --j-stein-200: #e1e2e7; --j-stein-100: #eef0f3; --j-stein-50: #f7f7f9; --j-weiss: #ffffff; --j-ok-bg: #dff3e4; --j-ok-fg: #17663a; --j-warn-bg: #fdf0c8; --j-warn-fg: #7a5600; --j-fehler-bg: #fbe0de; --j-fehler-fg: #a3261d; --j-info-bg: #dcecfb; --j-info-fg: #0d5a8c; --j-neutral-bg: var(--j-stein-100); --j-neutral-fg: var(--j-stein-700); --flaeche: var(--j-stein-50); --karte: var(--j-weiss); --text: var(--j-stein-900); --text-leise: var(--j-stein-500); --linie: var(--j-stein-200); --primaer: var(--j-nacht-700); --primaer-hover: var(--j-nacht-800); --auf-primaer: var(--j-weiss); --akzent: var(--j-bernstein-500); --fokus: var(--j-bernstein-500); --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --schrift-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; --gr-klein: .8125rem; --gr-text: .9375rem; --gr-titel: 1.125rem; --gr-seite: 1.625rem; --gr-winzig: .5625rem; --gr-mini: .625rem; --gr-etikett: .6875rem; --gr-zusatz: .75rem; --gr-mittel: 1rem; --gr-lese: 1.0625rem; --gr-gross: 1.25rem; --a1: .25rem; --a2: .5rem; --a3: .75rem; --a4: 1rem; --a5: 1.5rem; --a6: 2rem; --a8: 3rem; --rund-s: 6px; --rund-m: 10px; --rund-voll: 999px; --schatten: 0 1px 2px rgba(17, 26, 51, .06), 0 1px 1px rgba(17, 26, 51, .04); --schatten-hoch: 0 2px 8px rgba(17, 26, 51, .10); --schatten-dialog: 0 10px 30px rgba(17, 26, 51, .25); --schatten-tief-farbe: rgba(15, 23, 42, .18); --j-fehler-rand: #efbdb8; --schleier: rgba(17, 26, 51, .45); --breite-max: 72rem; --breite-lesen: 72rem; --breite-arbeit: min(240rem, 100vw - 2 * var(--a5)); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--flaeche); }
body { margin: 0; background: var(--flaeche); color: var(--text); font: var(--gr-text)/1.5 var(--schrift); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
a { color: var(--primaer); text-underline-offset: 2px; }
a:hover { color: var(--primaer-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 3px; }
button.akt-zeile:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }
code { font-family: var(--schrift-mono); font-size: .9em; background: var(--j-stein-100); padding: 0 .3em; border-radius: 4px; }
.kopf { background: var(--j-nacht-800); color: var(--j-weiss); border-bottom: 3px solid var(--akzent); }
.kopf-innen { max-width: var(--breite-max); margin: 0 auto; padding: var(--a3) var(--a5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3) var(--a6); }
.kopf-marke { display: flex; align-items: center; gap: var(--a2); color: inherit; text-decoration: none; font-weight: 700; }
.kopf-marke:hover { color: inherit; }
.kopf-marke .logo { width: 28px; height: 28px; flex: none; }
.kopf-marke small { display: block; font-weight: 400; font-size: var(--gr-klein); opacity: .75; }
.kopf-nutzer { font-size: var(--gr-klein); color: var(--j-nacht-100); display: flex; gap: var(--a3); align-items: center; }
.kopf-nutzer a { color: var(--j-weiss); }
.inhalt { max-width: var(--breite-max); margin: 0 auto; padding: var(--a5); }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3) var(--a4); margin-bottom: var(--a5); }
.seitenkopf h1 { font-size: var(--gr-seite); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); }
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); }
.brotkrume { width: 100%; font-size: var(--gr-klein); color: var(--text-leise); }
.brotkrume a { color: var(--text-leise); }
.untertitel { width: 100%; color: var(--text-leise); margin: calc(-1 * var(--a2)) 0 0; }
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--a4); }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten); padding: var(--a5); margin-bottom: var(--a4); }
.kachel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4); margin-bottom: var(--a4); }
.kachel-kopf h2 { font-size: var(--gr-titel); }
.kachel-kopf .aktionen { margin-left: auto; display: flex; gap: var(--a2); }
.kachel > h3, .abschnitt-titel { font-size: var(--gr-klein); text-transform: uppercase; letter-spacing: .06em; color: var(--text-leise); margin: var(--a5) 0 var(--a3); font-weight: 600; }
.kachel > h3:first-child { margin-top: 0; }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--a4); }
.felder .breit { grid-column: 1 / -1; }
.feld { display: flex; flex-direction: column; gap: var(--a1); min-width: 0; }
.feld > span, .feld > legend { font-size: var(--gr-klein); font-weight: 600; color: var(--j-stein-700); padding: 0; }
.feld .pflicht::after { content: " *"; color: var(--j-fehler-fg); }
.feld small { font-size: var(--gr-klein); color: var(--text-leise); }
fieldset.feld { border: 0; margin: 0; padding: 0; }
.eingabe, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=time], input[type=date], input[type=password], select, textarea { width: 100%; min-height: 2.5rem; padding: var(--a2) var(--a3); border: 1px solid var(--j-stein-300); border-radius: var(--rund-s); background: var(--karte); color: var(--text); font: inherit; }
input:hover, select:hover, textarea:hover { border-color: var(--j-stein-500); }
.feld-schmal input { max-width: 8rem; }
.formular-fuss { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a5); padding-top: var(--a4); border-top: 1px solid var(--linie); }
.meldung { display: flex; gap: var(--a3); align-items: flex-start; padding: var(--a3) var(--a4); border-radius: var(--rund-s); margin-bottom: var(--a4); border: 1px solid transparent; }
.meldung::before { font-weight: 700; }
.meldung-ok { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: #b7e2c3; }
.meldung-ok::before { content: "✓"; }
.meldung-fehler { background: var(--j-fehler-bg); color: var(--j-fehler-fg); border-color: var(--j-fehler-rand); }
.meldung-fehler::before { content: "!"; }
.meldung-info { background: var(--j-info-bg); color: var(--j-info-fg); border-color: #b9d8f1; }
.meldung-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
.meldung-warn { background: var(--j-warn-bg); color: var(--j-warn-fg); border-color: #f0d890; }
.meldung-warn::before { content: "!"; }
.tabelle-rahmen { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: var(--schatten); overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-size: var(--gr-klein); font-weight: 600; color: var(--text-leise); background: var(--j-stein-50); padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--j-nacht-50); }
.tabelle-fuss { font-size: var(--gr-klein); color: var(--text-leise); margin-top: var(--a2); }
.anmeldung { max-width: 26rem; margin: 10vh auto; text-align: center; }
.anmeldung .logo { width: 56px; height: 56px; margin-bottom: var(--a3); }
.kachel-link { display: flex; flex-direction: column; gap: var(--a2); margin: 0; color: var(--text); text-decoration: none; border-top: 3px solid var(--primaer); transition: border-color .15s, box-shadow .15s; }
.kachel-link:hover { color: var(--text); border-color: var(--primaer); border-top-color: var(--akzent); box-shadow: var(--schatten-hoch); }
.kachel-link-titel { font-size: var(--gr-titel); font-weight: 700; color: var(--primaer); }
.kachel-link-stand { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); }
.kachel-link-aktion { margin-top: auto; padding-top: var(--a2); font-size: var(--gr-klein); font-weight: 600; color: var(--primaer); }
.tabelle-personen td[data-label="Rolle"] { white-space: nowrap; }
.tabelle-personen tr[hidden] { display: none; }
@media (min-width: 48rem) {
.tabelle-personen td[data-label="Maßnahme"] { white-space: nowrap; }
}
.hinweis { font-size: var(--gr-klein); color: var(--text-leise); }
.hinweis-oben { margin-top: 0; }
@media (max-width: 44rem) {
.inhalt { padding: var(--a4); }
.kachel { padding: var(--a4); }
.seitenkopf .aktionen { margin-left: 0; width: 100%; }
.tabelle-rahmen { background: none; border: 0; box-shadow: none; }
.tabelle thead { display: none; }
.tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
.tabelle tr { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); margin-bottom: var(--a3); padding: var(--a2) 0; }
.tabelle td { border: 0; padding: var(--a1) var(--a4); display: flex; justify-content: space-between; gap: var(--a3); }
.tabelle td[data-label]::before { content: attr(data-label); font-size: var(--gr-klein); color: var(--text-leise); }
}
@media print {
.kopf, .aktionen, .formular-fuss { display: none !important; }
.kachel, .tabelle-rahmen { box-shadow: none; }
}
@media print {
.kopf { display: none !important; }
body { background: var(--j-weiss) !important; padding: 0 !important; margin: 0 !important; }
}
.symbol { flex: none; width: 1rem; height: 1rem; color: var(--text-leise); }
.tabelle-massnahmen td { vertical-align: top; }
.feld-knopf { justify-content: flex-end; }
.formular-fuss-handy { display: none; }
@media (max-width: 44rem) {
.formular-fuss-handy { display: flex; }
}
.kachel-kompakt { padding-top: var(--a3); padding-bottom: var(--a3); }
.kachel-kompakt .kachel-kopf { margin-bottom: var(--a2); }
input[aria-invalid="true"] { border-color: var(--j-fehler-fg); }
.felder-paare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); align-items: start; }
.felder-paare > .feld { min-width: 0; }
.felder-paare > div.feld { display: grid; gap: var(--a2); }
@media (max-width: 44rem) {
.felder-paare { grid-template-columns: minmax(0, 1fr); }
}
.tabelle-personen th { text-align: center; }
.toast-ort { position: fixed; top: calc(var(--a5) + 3.5rem); right: var(--a4); z-index: 60; max-width: min(24rem, calc(100vw - 2 * var(--a4))); }
.meldung.toast { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--a2); padding: var(--a2) var(--a3); font-size: var(--gr-klein); border-radius: var(--rund-m, .75rem); box-shadow: 0 6px 20px rgba(17, 26, 51, .14); cursor: pointer; animation: toast-rein .25s ease-out; transition: opacity .4s, transform .4s; }
.meldung.toast::before { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.toast-weg { opacity: 0; transform: translateY(-.5rem); }
@keyframes toast-rein { from { opacity: 0; transform: translateY(-.5rem); } }
@keyframes toast-dreh { from { transform: rotate(-270deg); } }
@media (prefers-reduced-motion: reduce) {
.meldung.toast { animation: none; }
}
.hinweis-fehler { color: var(--j-fehler-fg); font-weight: 600; }
.kopf-nutzer { gap: var(--a2); margin-left: auto; }
.kopf-konto { display: inline-flex; align-items: center; gap: var(--a2); padding: 3px var(--a3) 3px 3px; border-radius: var(--rund-voll); color: var(--j-weiss); text-decoration: none; font-weight: 600; font-size: var(--gr-klein); border: 1px solid transparent; }
.kopf-nutzer a.kopf-konto { color: var(--j-weiss); }
.kopf-konto:hover, .kopf-konto[aria-current="page"] { background: var(--j-nacht-700); border-color: var(--j-nacht-600); color: var(--j-weiss); }
.kopf-konto-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-abmelden { display: inline-flex; align-items: center; gap: var(--a1); min-height: 2rem; padding: 0 var(--a3); border-radius: var(--rund-s); border: 1px solid var(--j-nacht-600); color: var(--j-nacht-100); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.kopf-nutzer a.kopf-abmelden { color: var(--j-nacht-100); }
.kopf-nutzer a.kopf-abmelden:hover { background: var(--j-nacht-700); border-color: var(--akzent); color: var(--j-weiss); }
@media (max-width: 44rem) {
.kopf-innen { padding: var(--a2) var(--a4); gap: var(--a2); }
.kopf-marke small { display: none; }
.kopf-nutzer { order: 2; }
.kopf-konto-name, .kopf-abmelden span { display: none; }
.kopf-konto { padding: 2px; }
.kopf-abmelden { width: 2.25rem; justify-content: center; padding: 0; }
}
@media (max-width: 82rem) {
.kopf-konto-name { max-width: 9rem; }
}
@media (max-width: 72rem) {
.kopf-konto-name { display: none; }
.kopf-konto { padding: 2px; }
}
.tabelle-stunden td a { color: inherit; text-decoration: none; }
.tabelle-stunden td a:hover { color: var(--primaer); text-decoration: underline; }
.kopf-nutzer { gap: var(--a3); align-items: flex-start; }
.kopf-rund { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 3.5rem; color: var(--j-nacht-100); text-decoration: none; font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; padding: 0; border: 0; background: none; }
.kopf-nutzer a.kopf-rund { color: var(--j-nacht-100); }
.kopf-kreis { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--j-nacht-600); background: var(--j-nacht-700); color: var(--j-weiss); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.kopf-rund-text { max-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-nutzer a.kopf-rund:hover { color: var(--j-weiss); }
.kopf-rund:hover .kopf-kreis, .kopf-rund:focus-visible .kopf-kreis { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.kopf-rund:focus-visible { outline: none; }
.kopf-rund[aria-current="page"] { color: var(--j-weiss); }
.kopf-rund[aria-current="page"] .kopf-kreis { box-shadow: 0 0 0 2px var(--akzent); }
.kopf-abmelden:hover .kopf-kreis { background: var(--j-fehler-fg); border-color: var(--j-fehler-bg); box-shadow: 0 0 0 2px var(--j-fehler-bg); }
.kopf-konto { padding: 0; border: 0; border-radius: 0; }
.kopf-konto:hover, .kopf-konto[aria-current="page"] { background: none; }
@media (max-width: 72rem) {
.kopf-konto { padding: 0; }
}
@media (max-width: 44rem) {
.kopf-nutzer { gap: var(--a2); }
.kopf-rund { min-width: 3rem; font-size: var(--gr-mini); }
.kopf-kreis { width: 2rem; height: 2rem; }
.kopf-abmelden { width: auto; padding: 0; }
.kopf-abmelden span.kopf-rund-text, .kopf-konto .kopf-rund-text { display: block; }
.kopf-abmelden span.kopf-kreis { display: inline-flex; }
}
.tabelle th { text-align: center; }
.tabelle th:first-child { text-align: left; }
@media (min-width: 44.01rem) {
.tabelle-personen td[data-label="Rolle"], .tabelle-klienten td[data-label="Alter"] { text-align: center; }
}
.feld-uhr input { font-variant-numeric: tabular-nums; text-align: center; }
.feld-uhr input.feld-fehler, input.feld-fehler { border-color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
.tabelle-vorlagen td.aktionen { display: flex; gap: var(--a1); justify-content: flex-end; white-space: nowrap; }
.tabelle-vorlagen td.aktionen form { display: inline; }
.tabelle-vorlagen td[data-label="Verwendet in"] { text-align: center; }
@media (max-width: 44rem) {
.tabelle-vorlagen td.aktionen { justify-content: flex-start; }
}
.tabelle-vorlagen td[data-label="Zeit"], .tabelle-vorlagen td[data-label="Dauer"] { text-align: center; }
.tabelle-vorlagen td.aktionen { display: table-cell; text-align: right; }
.tabelle-vorlagen td[data-label="Zeit"] { text-align: left; }
.tabelle-vorlagen th:first-child { text-align: left; }
@media (min-width: 44.01rem) {
.tabelle td { text-align: center; }
.tabelle td:first-child, .tabelle th:first-child { text-align: left; }
.tabelle-vorlagen td[data-label="Zeit"] { text-align: center; }
.tabelle-vorlagen td.aktionen { text-align: right; }
}
@media (min-width: 44.01rem) {
.tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"] { min-width: 8rem; }
}
@media (max-width: 72rem) {
.tabelle th, .tabelle td { padding-left: var(--a2); padding-right: var(--a2); }
.tabelle th { white-space: normal; }
.tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Rolle"] { white-space: normal; }
.tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"] { min-width: 0; }
}
@media (min-width: 44.01rem) and (max-width: 58rem) {
.tabelle { font-size: var(--gr-klein); }
.tabelle th, .tabelle td { padding-left: var(--a1); padding-right: var(--a1); }
}
.tabelle-massnahmen { table-layout: fixed; width: 100%; }
.tabelle-massnahmen td, .tabelle-massnahmen th { overflow-wrap: anywhere; }
@media (min-width: 44.01rem) {
.tabelle-massnahmen th:nth-child(1) { width: 13%; }
.tabelle-massnahmen th:nth-child(2) { width: 19%; }
.tabelle-massnahmen th:nth-child(3) { width: 20%; }
.tabelle-massnahmen th:nth-child(4) { width: 11%; }
.tabelle-massnahmen th:nth-child(5) { width: 14%; }
.tabelle-massnahmen th:nth-child(6) { width: 13%; }
.tabelle-massnahmen th:nth-child(7) { width: 10%; }
.tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"] { min-width: 0; }
}
.eingabe-symbol { position: relative; display: block; }
.eingabe-symbol > .symbol { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-leise); pointer-events: none; }
.eingabe-symbol > input { padding-left: 2.25rem; width: 100%; }
.feld-regeln { list-style: none; margin: var(--a1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3); font-size: var(--gr-klein); color: var(--text-leise); }
.feld-regeln li { display: inline-flex; align-items: center; gap: .3rem; transition: color .15s; }
.feld-regeln li .symbol { width: 14px; height: 14px; opacity: .35; }
.feld-fehler { margin: var(--a1) 0 0; font-size: var(--gr-klein); color: var(--j-fehler-fg); font-weight: 600; }
.feld input[aria-invalid="true"] { border-color: var(--j-fehler-fg); }
@media (min-width: 44.01rem) {
.tabelle-massnahmen th:nth-child(8) { width: 13%; }
}
#zugaenge .felder > .feld { grid-column: 1 / -1; max-width: 32rem; }
.rueckfrage { border: 0; border-radius: var(--rund-m); padding: var(--a5); max-width: min(28rem, calc(100vw - 2rem)); box-shadow: 0 20px 50px rgba(0,0,0,.25); background: var(--karte); color: var(--text); }
.rueckfrage::backdrop { background: rgba(15, 20, 40, .45); }
.rueckfrage p { margin: 0 0 var(--a4); line-height: 1.5; }
.rueckfrage-knoepfe { display: flex; justify-content: flex-end; gap: var(--a2); flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 44rem) {
.tabelle-personen tbody tr { position: relative; }
}
@keyframes live-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
#chat-meldung .meldung { margin: var(--a2) 0 0; }
:root { --metis-dauer: .52s; --metis-kurve: cubic-bezier(.32, .72, 0, 1); }
body { container: seite / inline-size; }
.kopf-rund.kopf-metis { position: relative; cursor: pointer; font: inherit; font-size: var(--gr-etikett); font-weight: 600; color: var(--j-nacht-100); }
.kopf-metis:hover, .kopf-metis[aria-expanded="true"] { color: var(--j-weiss); }
.kopf-metis:hover .kopf-kreis, .kopf-metis:focus-visible .kopf-kreis, .kopf-metis[aria-expanded="true"] .kopf-kreis { background: var(--j-nacht-600); color: var(--akzent); }
.kopf-metis[aria-expanded="true"] .kopf-kreis { box-shadow: 0 0 0 2px var(--akzent); border-color: var(--akzent); }
.kopf-metis .kopf-kreis svg { transition: transform .6s var(--metis-kurve); }
.kopf-metis:hover .kopf-kreis svg, .kopf-metis:focus-visible .kopf-kreis svg { transform: rotate(-150deg); }
.inhalt.inhalt-metis { flex: 1; min-height: 0; max-width: none; width: 100%; padding: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.kopf-metis .kopf-kreis svg { transition: none !important; }
}
@keyframes metis-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media print {
.kopf-metis { display: none !important; }
}
.j-badge { display: inline-flex; align-items: center; gap: var(--a2); min-height: 2.25rem; max-width: 100%; padding: 3px var(--a3) 3px 3px; border: 1px solid var(--j-nacht-100); border-radius: var(--rund-voll); background: var(--karte); color: var(--text); font-size: var(--gr-klein); font-weight: 600; text-decoration: none; line-height: 1.2; transition: border-color .2s, background .2s, box-shadow .2s; }
a.j-badge:hover, button.j-badge:hover { border-color: var(--primaer); background: var(--j-nacht-50); color: var(--text); }
.j-badge-avatar { width: 1.75rem; height: 1.75rem; font-size: var(--gr-mini); }
.j-badge-symbol { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--j-nacht-50); color: var(--primaer); }
.j-badge-symbol .symbol { width: 15px; height: 15px; }
.j-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.j-badge-text small { margin-left: .25em; font-weight: 400; color: var(--text-leise); }
.j-badge-klein { min-height: 1.75rem; padding: 2px var(--a3); }
.j-badge-klient { border-color: var(--j-bernstein-500); background: var(--j-bernstein-100); }
.j-badge-klient .j-badge-avatar { background: var(--j-nacht-900); color: var(--akzent); }
a.j-badge-klient:hover { background: var(--j-bernstein-100); border-color: var(--j-nacht-900); }
.j-badge-ms .j-badge-symbol { background: var(--j-nacht-900); color: var(--akzent); }
.j-badge-schicht { padding-left: 3px; }
.j-badge-code { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem; border-radius: var(--rund-voll); background: var(--primaer); color: var(--auf-primaer); font-size: var(--gr-etikett); letter-spacing: .02em; }
.j-badge-leer { padding-left: var(--a3); border-style: dashed; color: var(--text-leise); }
@keyframes j-pop-rein { from { opacity: 0; transform: translateY(-4px); } }
.akt-zeile { display: flex; align-items: center; gap: var(--a3); min-height: 2.75rem; padding: var(--a1) var(--a2); border-radius: var(--rund-s); color: var(--text); text-decoration: none; }
a.akt-zeile:hover { background: var(--j-nacht-50); color: var(--text); }
.j-badge-person { flex-wrap: nowrap; }
.j-badge-person .j-badge-text { white-space: nowrap; }
.j-badge-klient { padding: 3px var(--a3); }
.akt-rund { margin-left: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 3.5rem; color: var(--text-leise); text-decoration: none; font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; }
.akt-rund-kreis { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--j-nacht-50); color: var(--primaer); transition: border-color .15s, box-shadow .15s, background .15s; }
.akt-rund-kreis .symbol { width: 18px; height: 18px; color: inherit; }
.akt-rund:hover, .akt-rund:focus-visible { color: var(--primaer); outline: none; }
.akt-rund:hover .akt-rund-kreis, .akt-rund:focus-visible .akt-rund-kreis { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); background: var(--karte); }
.felder-einspaltig { grid-template-columns: minmax(0, 1fr) !important; max-width: 28rem; }
.kopf { --j-nacht-100: #e6eaf5; --j-nacht-50: #f2f4fa; }
.j-badge-schicht-kurz .j-badge-text { font-variant-numeric: tabular-nums; font-weight: 600; }
.kopf-marke .logo-marke { width: auto; height: 34px; }
.kopf-marke-text small { opacity: .85; }
@media (max-width: 44rem) {
.kopf-marke .logo-marke { height: 28px; }
.kopf-marke-text { display: none; }
}
.kachel[id] { scroll-margin-top: 5rem; }
.akt-rund-aus { cursor: default; opacity: .45; }
.akt-rund-aus:hover .akt-rund-kreis { border-color: var(--linie); box-shadow: none; background: inherit; }
.akt-rund-menue { position: relative; margin-left: 0; }
.akt-rund-menue > summary { list-style: none; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.akt-rund-menue > summary::-webkit-details-marker { display: none; }
.akt-rund-menue > summary:focus-visible { outline: none; }
.akt-rund-menue > summary:focus-visible .akt-rund-kreis, .akt-rund-menue[open] .akt-rund-kreis { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); background: var(--karte); }
.akt-rund-liste { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; min-width: 11rem; display: grid; gap: 2px; padding: var(--a1); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-m); box-shadow: 0 10px 28px rgba(15, 20, 40, .18); }
.akt-rund-liste a, .akt-rund-liste button { display: block; width: 100%; padding: var(--a2) var(--a3); border: 0; border-radius: var(--rund-s); background: none; font: inherit; font-size: var(--gr-klein); font-weight: 600; text-align: left; color: var(--text); text-decoration: none; cursor: pointer; }
.akt-rund-liste a:hover, .akt-rund-liste button:hover, .akt-rund-liste a:focus-visible, .akt-rund-liste button:focus-visible { background: var(--j-nacht-50); color: var(--primaer); outline: none; }
.akt-rund-liste form { margin: 0; }
.akt-rund-gefahr .akt-rund-kreis, a.akt-rund.akt-rund-gefahr .akt-rund-kreis { color: var(--j-fehler-fg); }
.akt-rund-gefahr .akt-rund-liste button:hover { color: var(--j-fehler-fg); background: var(--j-fehler-bg); }
button.akt-rund { border: 0; background: none; padding: 0; font: inherit; font-size: var(--gr-etikett); font-weight: 600; line-height: 1.1; cursor: pointer; margin-left: 0; }
.kachel-kopf:has(> .akt-rund, > .akt-rund-menue) { align-items: flex-start; }
.kachel-kopf:has(> .akt-rund, > .akt-rund-menue) > h2 { margin: 0; line-height: 2.25rem; }
button.akt-zeile { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
button.akt-zeile:hover { background: var(--j-nacht-50); }
.akt-rund-zurueck { margin-left: 0; margin-right: auto; }
@media print {
.toast-ort { display: none !important; }
}
.akt-rund-ok .akt-rund-kreis { color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.akt-rund-fehler .akt-rund-kreis { color: var(--j-fehler-fg); border-color: var(--j-fehler-fg); }
.akt-rund-knopf { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.akt-rund-fehler .akt-rund-text { color: var(--j-fehler-fg); }
.akt-rund-ok .akt-rund-text { color: var(--j-ok-fg); }
.akt-rund-nur { min-width: 0; margin-left: auto; }
.akt-rund-klein .akt-rund-kreis { width: 1.75rem; height: 1.75rem; }
.akt-rund-klein .akt-rund-kreis svg { width: .875rem; height: .875rem; }
.abschnitt-linie { display: flex; align-items: center; gap: var(--a3); margin: 0 0 var(--a2); font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-leise); }
.abschnitt-linie::after { content: ""; flex: 1; border-top: 1px solid var(--linie); }
.kachel-kopf > .akt-rund { margin-left: auto; }
.akt-rund-klein .akt-rund-kreis { width: 1.875rem; height: 1.875rem; }
.akt-rund-klein .akt-rund-kreis .symbol { width: 14px; height: 14px; }
.akt-rund-klein .akt-rund-text { display: none; }
.kachel-radiale { display: inline-flex; align-items: center; gap: var(--a3); }
.kachel-kopf > .kachel-radiale { align-self: flex-start; }
.kachel-kopf:has(> .kachel-radiale) { align-items: flex-start; }
.kopf-wechsel { display: none; }
.seitenkopf > .kopf-wechsel { margin-left: auto; align-self: flex-start; }
@media (max-width: 44rem) {
.kopf-wechsel { display: inline-flex; }
.kopf-metis { display: none; }
.seitenkopf:has(> .kopf-wechsel) { flex-wrap: nowrap; align-items: flex-start; }
.seitenkopf:has(> .kopf-wechsel) > :first-child { min-width: 0; }
}
@keyframes kp-hoch { from { transform: translateY(105%); } to { transform: none; } }
.kachel-kopf:has(> .kachel-radiale) { flex-wrap: nowrap; }
.kachel-kopf:has(> .kachel-radiale) > h2 { margin: 0; line-height: 2.25rem; }
.kachel-kopf > .kachel-radiale { margin-left: auto; flex: none; }
.kachel-kopf > .kachel-radiale { align-items: flex-start; }
.kachel-radiale > .akt-rund { margin: 0; line-height: 1.1; vertical-align: top; }
@media (max-width: 44rem) and (prefers-reduced-motion: no-preference) {
.kopf { view-transition-name: seitenkopf; }
}
@keyframes jup-aus { to { opacity: 0; } }
@keyframes jup-ein { from { opacity: 0; transform: translateY(6px); } }
@keyframes jup-ein2 { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.akt-rund-kreis { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.akt-rund:hover .akt-rund-kreis, .akt-rund:focus-visible .akt-rund-kreis, .akt-rund-menue > summary:focus-visible .akt-rund-kreis, .akt-rund-menue[open] .akt-rund-kreis { background: var(--primaer-hover); border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.akt-rund-ok .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border-color: var(--j-ok-fg); }
.akt-rund-fehler .akt-rund-kreis, .akt-rund-gefahr .akt-rund-kreis, a.akt-rund.akt-rund-gefahr .akt-rund-kreis { background: var(--j-fehler-bg); color: var(--j-fehler-fg); border-color: var(--j-fehler-fg); }
.akt-rund-aus .akt-rund-kreis, .akt-rund-aus:hover .akt-rund-kreis { background: var(--j-nacht-50); color: var(--text-leise); border-color: var(--linie); box-shadow: none; }
.akt-rund-info { cursor: default; pointer-events: none; }
.j-badge-adresse .j-badge-symbol { background: var(--j-nacht-50); color: var(--primaer); border-radius: 50%; }
.j-badge-adresse .j-badge-text { white-space: normal; line-height: 1.25; font-size: var(--gr-klein); padding: 2px 0; }
.j-badge-adresse .j-badge-text { display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
.j-badge-klient .j-badge-symbol { background: var(--j-nacht-900); color: var(--akzent); }
.akt-rund-heute .akt-rund-text { color: var(--primaer); }
.j-badge-klient .j-badge-symbol, .j-badge-klient .j-badge-symbol .symbol { color: var(--akzent); }
.akt-zeile-wrap { position: relative; }
.j-badge-adresse .j-badge-symbol { background: var(--primaer); color: var(--auf-primaer); }
.j-badge-adresse .j-badge-symbol .symbol { color: var(--auf-primaer); }
.j-badge-klient-neu { border-color: var(--j-nacht-100); background: var(--karte); padding: 3px var(--a3) 3px 3px; }
.j-badge-klient-neu .j-badge-symbol { background: var(--primaer); color: var(--auf-primaer); }
.j-badge-klient-neu .j-badge-symbol .symbol { color: var(--auf-primaer); }
.kachel-kopf .akt-rund { width: 4.75rem; min-width: 0; }
.kachel-kopf .akt-rund .akt-rund-text { max-width: 100%; text-align: center; white-space: nowrap; }
@media (max-width: 44rem) {
.kachel-kopf .akt-rund { width: 2.25rem; position: relative; padding-bottom: 1.1rem; box-sizing: content-box; }
.kachel-kopf .akt-rund .akt-rund-text { position: absolute; top: calc(2.25rem + 3px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 5.5rem; text-align: center; white-space: nowrap; }
.kachel-kopf > .kachel-radiale, .kachel-kopf > .akt-rund { margin-right: 1.25rem; }
.kachel-kopf > .kachel-radiale { gap: 2.75rem; }
}
@media print {
.akt-rund { display: none !important; }
}
.tabelle-personen, .tabelle-massnahmen, .tabelle-klienten { border-collapse: separate; border-spacing: 0; }
.tabelle-personen thead th, .tabelle-massnahmen thead th, .tabelle-klienten thead th { font-size: var(--gr-etikett); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); background: var(--j-nacht-50); padding-top: var(--a3); padding-bottom: var(--a3); }
.tabelle-personen tbody td, .tabelle-massnahmen tbody td, .tabelle-klienten tbody td { padding-top: var(--a3); padding-bottom: var(--a3); }
.tabelle-personen tbody tr, .tabelle-massnahmen tbody tr, .tabelle-klienten tbody tr { transition: background .12s; }
.tabelle-personen tbody tr:hover, .tabelle-massnahmen tbody tr:hover, .tabelle-klienten tbody tr:hover { background: var(--j-nacht-50); }
.tabelle-personen td .j-badge, .tabelle-klienten td .j-badge, .tabelle-massnahmen td .j-badge { max-width: 100%; }
.tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"], .tabelle-klienten td[data-label="Maßnahme"] { text-align: left; }
.tabelle-personen td[data-label="Springer"] { display: table-cell; }
.tabelle-personen td[data-label="Springer"] .j-badge { margin: 0 .25rem .25rem 0; }
@media (max-width: 44rem) {
.tabelle-personen tr, .tabelle-massnahmen tr, .tabelle-klienten tr { position: relative; padding: var(--a3) 0; box-shadow: var(--schatten); }
.tabelle-personen td[data-label="Status"], .tabelle-massnahmen td[data-label="Status"], .tabelle-klienten td[data-label="Status"] { position: absolute; top: var(--a3); right: var(--a4); width: auto; padding: 0; }
.tabelle-personen td[data-label="Status"]::before, .tabelle-massnahmen td[data-label="Status"]::before, .tabelle-klienten td[data-label="Status"]::before { display: none; }
.tabelle-personen td[data-label="Springer"] { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.tabelle-personen td[data-label="AV"], .tabelle-personen td[data-label="OS"] { display: inline-flex; width: 50%; }
.tabelle-personen td[data-label="AV"] { float: left; }
.tabelle-personen td[data-label="OS"] { float: right; }
}
@media (min-width: 44.01rem) {
.tabelle-personen td .j-badge, .tabelle-klienten td .j-badge { font-size: var(--gr-klein); padding: .1rem .55rem .1rem .15rem; gap: .35rem; }
.tabelle-personen td .j-badge-symbol, .tabelle-klienten td .j-badge-symbol { width: 1.25rem; height: 1.25rem; }
.tabelle-personen td .j-badge-symbol .symbol, .tabelle-klienten td .j-badge-symbol .symbol { width: .8rem; height: .8rem; }
.tabelle-personen td[data-label="Maßnahme"] { white-space: normal; }
.tabelle-personen th, .tabelle-personen td { padding-left: var(--a2); padding-right: var(--a2); }
}
@media (min-width: 44.01rem) and (max-width: 64rem) {
.tabelle-personen td[data-label="Springer"] { min-width: 0; }
.tabelle-personen th, .tabelle-personen td { padding-left: .35rem; padding-right: .35rem; }
.tabelle-personen { font-size: var(--gr-klein); }
.tabelle-personen td .j-badge { font-size: var(--gr-zusatz); }
}
@media (min-width: 44.01rem) and (max-width: 52rem) {
.tabelle-personen th:nth-child(2), .tabelle-personen td[data-label="Rolle"] {  }
.tabelle-personen td[data-label="AV"], .tabelle-personen td[data-label="OS"] { padding-left: .15rem; padding-right: .15rem; }
.tabelle-personen td .j-badge-symbol { display: none; }
.tabelle-personen td .j-badge { padding-left: .5rem; }
}
@media (min-width: 44.01rem) and (max-width: 50rem) {
.tabelle-personen td[data-label="OS"], .tabelle-personen td[data-label="AV"] { font-size: var(--gr-zusatz); }
.tabelle-personen td[data-label="Maßnahme"] .j-badge, .tabelle-personen td[data-label="Springer"] .j-badge { max-width: 5.5rem; }
.tabelle-personen td[data-label="Maßnahme"] .j-badge-text, .tabelle-personen td[data-label="Springer"] .j-badge-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 44rem) {
.tabelle-personen tr, .tabelle-massnahmen tr, .tabelle-klienten tr { padding: 0; overflow: hidden; }
.tabelle-personen td, .tabelle-massnahmen td, .tabelle-klienten td { border-top: 1px solid var(--linie); padding: var(--a3) var(--a4); }
.tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"], .tabelle-massnahmen td[data-label="Teamleitung"], .tabelle-massnahmen td[data-label="Klient:in"], .tabelle-klienten td[data-label="Maßnahme"] { flex-direction: column; align-items: flex-start; gap: var(--a2); justify-content: flex-start; }
.tabelle-personen td[data-label="Springer"] { display: flex; }
.tabelle-personen td .j-badge { max-width: 100%; }
.tabelle-personen tr { display: grid; grid-template-columns: 1fr 1fr; }
.tabelle-personen tr > td { grid-column: 1 / -1; }
.tabelle-personen tr > td[data-label="AV"], .tabelle-personen tr > td[data-label="OS"] { grid-column: auto; float: none; width: auto; flex-direction: column; align-items: flex-start; gap: .15rem; }
.tabelle-personen tr > td[data-label="OS"] { border-left: 1px solid var(--linie); }
.tabelle-personen tr > td[data-label="Status"] { grid-column: auto; }
}
@media (max-width: 44rem) {
.tabelle-personen tr > td[data-label="Status"], .tabelle-massnahmen tr > td[data-label="Status"], .tabelle-klienten tr > td[data-label="Status"] { border-top: 0; }
}
.tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Status"], .tabelle-personen td[data-label="Nachweise"] { text-align: center; }
.tabelle-personen td[data-label="Springer"] .j-badge { margin: 0; }
@media (max-width: 44rem) {
.tabelle-personen td[data-label="Status"], .tabelle-massnahmen td[data-label="Status"], .tabelle-klienten td[data-label="Status"] { top: .8rem; right: .75rem; }
.tabelle-personen td[data-label="Springer"], .tabelle-personen td[data-label="Maßnahme"] { text-align: left; }
.tabelle-personen td[data-label="Nachweise"] { display: flex; align-items: center; justify-content: space-between; }
}
.akt-rund-aktiv .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); color: var(--j-weiss); }
.akt-rund-aktiv { color: var(--j-ok-fg); }
.akt-rund-aktiv:hover .akt-rund-kreis, .akt-rund-aktiv:focus-visible .akt-rund-kreis { background: var(--j-ok-fg); border-color: var(--j-ok-fg); box-shadow: 0 0 0 2px var(--j-ok-bg); }
.tabelle-personen td[data-label="Maßnahme"], .tabelle-klienten td[data-label="Maßnahme"] { text-align: center; }
.tabelle-personen td[data-label="Maßnahme"] > .j-badge, .tabelle-klienten td[data-label="Maßnahme"] > .j-badge { margin-inline: auto; }
.tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Springer"] { vertical-align: middle; }
@media (max-width: 44rem) {
.tabelle-personen td[data-label="Status"], .tabelle-massnahmen td[data-label="Status"], .tabelle-klienten td[data-label="Status"] { top: 0; right: .75rem; height: 3.25rem; display: flex; align-items: center; }
.tabelle-personen td[data-label="Status"]::before, .tabelle-massnahmen td[data-label="Status"]::before, .tabelle-klienten td[data-label="Status"]::before { display: none; }
}
.akt-rund-aktiv-rot .akt-rund-kreis { border-color: var(--j-fehler-fg); box-shadow: 0 0 0 2px var(--j-fehler-bg); }
.akt-rund-aktiv-rot { color: var(--j-fehler-fg); }
.tabelle-uebersicht th, .tabelle-uebersicht td { text-align: center; }
.tabelle-uebersicht th:first-child, .tabelle-uebersicht td:first-child { text-align: left; }
.tm-bar { padding: var(--a3) var(--a4); margin-bottom: var(--a4); }
.tm-zeile { display: flex; align-items: flex-start; gap: var(--a3); flex-wrap: wrap; }
.tm-gruppe { display: inline-flex; align-items: flex-start; gap: var(--a3); }
.tm-trenner { align-self: flex-start; flex: none; width: 1px; height: 2.25rem; background: var(--linie); }
.tm-bar .akt-rund { margin-left: 0; position: relative; min-width: 3.5rem; }
@media (max-width: 44rem) {
.tm-bar { padding: var(--a3); }
.tm-zeile { flex-direction: column; align-items: stretch; gap: var(--a3); }
.tm-gruppe { display: flex; justify-content: space-between; gap: 0; }
.tm-funktionen { justify-content: flex-start; gap: var(--a4); }
.tm-trenner { width: 100%; height: 1px; align-self: auto; }
.tm-bar .akt-rund { min-width: 0; flex: 1 1 0; }
.tm-funktionen .akt-rund { flex: 0 0 auto; min-width: 3.5rem; }
.tm-bar .akt-rund-text { font-size: var(--gr-mini); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 44rem) {
.tm-abteilungen .akt-rund-text { font-size: var(--gr-winzig); letter-spacing: -.01em; overflow: visible; text-overflow: clip; }
.tm-abteilungen .akt-rund { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 44rem) {
.tm-bar .tm-abteilungen { gap: 0; justify-content: space-between; }
.tm-bar .tm-abteilungen .akt-rund { flex: 0 1 auto; min-width: 0; padding-inline: 1px; }
.tm-bar .tm-abteilungen .akt-rund-text { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
}
.tm-bar .tm-funktionen .akt-rund-kreis { background: var(--j-nacht-50); color: var(--primaer); border-color: var(--linie); }
.akt-rund.akt-rund-aktiv .akt-rund-kreis, .akt-rund.akt-rund-aktiv:hover .akt-rund-kreis { background: var(--j-ok-bg); color: var(--j-ok-fg); border: 2px solid var(--j-ok-fg); box-shadow: none; position: relative; }
.akt-rund.akt-rund-aktiv .akt-rund-text { color: var(--j-ok-fg); font-weight: 700; }
@media (max-width: 44rem) {
.tm-zeile:has(.tm-funktionen) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; row-gap: 0; align-items: start; }
.tm-zeile:has(.tm-funktionen) > .tm-abteilungen { display: contents; }
.tm-zeile:has(.tm-funktionen) > .tm-trenner { display: none; }
.tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund:not(.akt-rund-aktiv):not(.tm-zurueck) { display: none; }
.tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv { grid-column: 1; grid-row: 1; }
.tm-zeile:has(.tm-funktionen) > .tm-funktionen { grid-column: 2 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3) 0; justify-content: stretch; border-left: 1px solid var(--linie); align-self: stretch; padding-left: .5rem; margin-left: .25rem; }
.tm-zeile:has(.tm-funktionen) > .tm-funktionen .akt-rund { flex: none; min-width: 0; padding-inline: 0; }
.tm-zeile:has(.tm-funktionen) .akt-rund-text { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; font-size: var(--gr-winzig); letter-spacing: -.02em; }
.tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv .akt-rund-text { font-size: .53rem; }
}
@media (max-width: 26rem) {
.tm-bar { padding-inline: .5rem; }
.tm-zeile .akt-rund-text { font-size: .5rem !important; letter-spacing: -.02em !important; }
}
@media (min-width: 44.01rem) {
.tabelle-personen td[data-label="Maßnahme"] .j-badge, .tabelle-personen td[data-label="Springer"] .j-badge { box-sizing: border-box; width: 7.25rem; justify-content: flex-start; }
.tabelle-personen td[data-label="Maßnahme"] .j-badge-text, .tabelle-personen td[data-label="Springer"] .j-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabelle-personen td[data-label="Maßnahme"], .tabelle-personen td[data-label="Springer"] { vertical-align: middle; }
}
@media (max-width: 44rem) {
.tabelle-personen td[data-label="Maßnahme"] > .j-badge, .tabelle-klienten td[data-label="Maßnahme"] > .j-badge { margin-inline: 0; }
}
:root { --popup-hoehe: 75dvh; }
html.seite-laedt::before { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.1, .6, .2, 1), opacity .15s; }
@media (min-width: 44.01rem) and (prefers-reduced-motion: no-preference) {
.kopf { view-transition-name: seitenkopf; }
}
@media (hover: none) {
a, .akt-rund { -webkit-tap-highlight-color: transparent; }
}
.akt-rund:active { transition: transform .06s; }
.akt-rund:active .akt-rund-kreis { transform: scale(.94); }
.akt-rund-kreis { transition: transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
a { touch-action: manipulation; }
@keyframes jup-panel-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jup-seite-ein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes jup-schleier-ein { from { opacity: 0; } to { opacity: 1; } }
html, body { overscroll-behavior-y: contain; }
@media (max-width: 44rem) {
.tm-bar .tm-abteilungen { justify-content: stretch; }
.tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen .akt-rund { flex: 1 1 0; min-width: 0; padding-inline: 0; align-items: center; }
.tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen .akt-rund-text { text-align: center; }
}
.akt-rund-text .rt-kurz { display: none; }
@media (max-width: 44rem) {
.akt-rund-text .rt-voll { display: none; }
.akt-rund-text .rt-kurz { display: inline; }
.tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen { justify-content: space-between; }
.tm-bar .tm-zeile:not(:has(.tm-funktionen)) .tm-abteilungen .akt-rund { flex: 1 1 0; }
.tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv .akt-rund-text { font-size: var(--gr-winzig); }
}
.j-badge-art .j-badge-symbol { color: var(--j-weiss); }
.j-badge-art-einzahlung { border-color: var(--j-ok-fg); background: var(--j-ok-bg); color: var(--j-ok-fg); }
.j-badge-art-einzahlung .j-badge-symbol { background: var(--j-ok-fg); }
.j-badge-art-ausgabe { border-color: var(--j-fehler-fg); background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.j-badge-art-ausgabe .j-badge-symbol { background: var(--j-fehler-fg); }
.j-badge-art-auszahlung { border-color: var(--j-bernstein-500); background: var(--j-bernstein-100); color: var(--j-warn-fg); }
.j-badge-art-auszahlung .j-badge-symbol { background: var(--j-bernstein-500); }
.j-badge-umschlag { border-style: dashed; }
.j-badge-umschlag .j-badge-symbol { color: var(--primaer); }
.j-badge-urlaub { border-color: var(--j-info-fg); background: var(--j-info-bg); color: var(--j-info-fg); }
.j-badge-urlaub .j-badge-symbol { color: var(--j-info-fg); }
@keyframes pd-dreh { to { transform: rotate(360deg); } }
.j-badge-genehmigt { border-color: var(--j-ok-fg); background: var(--j-ok-bg); color: var(--j-ok-fg); }
.j-badge-genehmigt .j-badge-symbol { color: var(--j-ok-fg); }
@media (max-width: 44rem) {
.tm-zeile:has(.tm-funktionen) > .tm-funktionen { grid-template-columns: repeat(4, max-content); justify-content: space-between; column-gap: 0; }
.tm-zeile:has(.tm-funktionen) > .tm-funktionen .akt-rund { width: max-content; max-width: none; }
.tm-zeile:has(.tm-funktionen) .akt-rund-text, .tm-zeile:has(.tm-funktionen) .tm-abteilungen .akt-rund-aktiv .akt-rund-text { font-size: min(.5rem, 2.55vw) !important; }
}
@media (max-width: 44rem) {
.tm-zeile:has(.tm-funktionen) > .tm-funktionen { display: grid; grid-template-columns: repeat(4, 4.5rem); justify-content: start; justify-items: center; column-gap: 0; }
.tm-zeile:has(.tm-funktionen) > .tm-funktionen .akt-rund { width: 4.5rem; min-width: 0; max-width: 4.5rem; }
}
.j-badge-vor, .j-badge-nach { overflow: hidden; text-overflow: ellipsis; }
.tabelle-personen td[data-label="Springer"] .j-badge { max-width: none; }
.tabelle-personen td[data-label="Springer"] .j-badge-text { overflow: visible; text-overflow: clip; white-space: nowrap; }
@media (max-width: 44rem) {
.tabelle-personen td[data-label="Springer"] .j-badge { max-width: 100%; }
.tabelle-personen td[data-label="Springer"] .j-badge-text { white-space: normal; }
}
.kopf-innen, .inhalt { max-width: var(--breite-lesen); }
@media (min-width: 44.0625rem) {
.kachel-kopf .akt-rund { width: 5rem; }
.kachel-kopf .akt-rund .akt-rund-text { white-space: normal; text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
}
.meldung > span { min-width: 0; overflow-wrap: anywhere; }
.j-badge.j-badge-person .j-badge-text.j-badge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.felder-modern .feld { gap: 4px; }
.felder-modern .feld > span { font-size: var(--gr-mini); font-weight: 600; letter-spacing: .02em; color: var(--text-leise); padding-left: 2px; }
.felder-modern .feld:focus-within > span { color: var(--primaer); }
.felder-modern :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea) { min-height: 3rem; padding: .7rem .9rem; border: 0; border-bottom: 2px solid var(--j-stein-300); border-radius: 10px 10px 4px 4px; background: var(--flaeche); font-size: 1rem; transition: border-color .15s ease, background-color .15s ease; }
.felder-modern :is(input, select, textarea):hover { background: color-mix(in srgb, var(--text) 5%, var(--flaeche)); border-bottom-color: var(--j-stein-500); }
.felder-modern :is(input, select, textarea):focus-visible { outline: none; border-bottom-color: var(--primaer); background: color-mix(in srgb, var(--primaer) 6%, var(--flaeche)); }
.felder-modern :is(input, select).feld-fehler, .felder-modern :is(input, select):user-invalid { border-bottom-color: var(--j-fehler-fg); }
.felder-modern select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.felder-modern .feld-uhr input, .felder-modern .feld-datum input { font-variant-numeric: tabular-nums; }
.felder-modern .feld-uhr input { padding-right: 2.5rem; background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.felder-modern .feld-datum input { padding-right: 2.5rem; background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
@keyframes dialog-hoch { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }

/* ---- Mini-Lager eigen ---- */
/* Listenzeile Lager (Vorbild: Bestands-Radial + akt-zeile), Handy zuerst */
.kopf-innen { flex-wrap: nowrap; justify-content: space-between; padding: var(--a2) var(--a4); }
.kopf-nutzer form { margin: 0; }
.kopf-abmelden { display: inline-flex; align-items: center; gap: var(--a2); min-height: 2.75rem; padding: 0 var(--a3);
  background: transparent; color: var(--j-weiss); border: 1px solid var(--j-nacht-600); border-radius: var(--rund-voll);
  font: inherit; font-size: var(--gr-klein); cursor: pointer; }
.kopf-abmelden:hover { border-color: var(--akzent); }
.inhalt { padding: var(--a4) var(--a3); }
.kachel { padding: var(--a4); }
.tm-bar { padding: var(--a2) var(--a3); }
.tm-zeile { flex-wrap: nowrap; justify-content: space-between; gap: var(--a1); }
.tm-gruppe { display: flex; gap: var(--a1); }
.tm-bar .akt-rund { min-width: 3.25rem; min-height: 2.75rem; }
.akt-rund { position: relative; min-height: 2.75rem; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.akt-rund[disabled] { opacity: .4; cursor: default; }
.ml-punkt { position: absolute; top: -4px; right: 2px; min-width: 1.125rem; height: 1.125rem; padding: 0 3px; border-radius: var(--rund-voll);
  background: var(--j-fehler-fg); color: var(--j-weiss); font-size: var(--gr-mini); font-style: normal; line-height: 1.125rem; text-align: center; }
.seitenkopf { margin-bottom: var(--a4); align-items: center; }
.seitenkopf h1 { font-size: var(--gr-gross); }
.seitenkopf .aktionen { gap: var(--a1); }
.zaehler { display: inline-block; margin-right: var(--a3); font-size: var(--gr-klein); }
.zaehler-knapp b { color: var(--j-warn-fg); }
.zaehler-leer b { color: var(--j-fehler-fg); }

.suche { display: flex; gap: var(--a2); align-items: center; }
.suche input { flex: 1; min-width: 0; }
input[type=text], input[type=search], input[type=password], input[type=date], input:not([type]), select, textarea { min-height: 2.75rem; font-size: var(--gr-mittel); }
.filter { display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a3); align-items: center; }
.filter-trenner { width: 1px; height: 1.75rem; background: var(--linie); }
.chip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--a3); border: 1px solid var(--j-nacht-100);
  border-radius: var(--rund-voll); background: var(--karte); color: var(--text); text-decoration: none; font-size: var(--gr-klein); font-weight: 600; }
.chip[aria-current] { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.chip:hover { border-color: var(--akzent); color: inherit; }
.chip[aria-current]:hover { color: var(--auf-primaer); }

.lager-gruppe { padding-top: var(--a3); padding-bottom: var(--a2); }
.lager-gruppe .abschnitt-titel { margin: 0 0 var(--a1); }
.anzahl { font-weight: 400; }
.lz-liste, .ek-liste, .vz-liste, .chip-liste, .hilfe-liste { list-style: none; margin: 0; padding: 0; }
.lz { display: flex; align-items: center; gap: var(--a1); min-height: 3.5rem; padding: var(--a1) 0; border-top: 1px solid var(--linie); }
.lz:first-child { border-top: 0; }
.lz-name { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 2.75rem; color: var(--text); text-decoration: none; }
.lz-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-name small, .ek-text small, .vz-text small, .token-zeile small { display: block; color: var(--text-leise); font-size: var(--gr-zusatz); }
.lz-name:hover strong { color: var(--primaer); text-decoration: underline; }
.lz .akt-rund { margin-left: 0; min-width: 2.875rem; }
.lz .akt-rund-text { font-size: var(--gr-mini); }
.lz-bestand { display: flex; flex-direction: column; align-items: center; min-width: 2.75rem; line-height: 1.1; }
.lz-zahl { font-size: var(--gr-lese); font-weight: 700; font-variant-numeric: tabular-nums; }
.lz-bestand small { font-size: var(--gr-zusatz); color: var(--text-leise); }
.lz-knapp .lz-zahl { color: var(--j-warn-fg); }
.lz-leer .lz-zahl { color: var(--j-fehler-fg); }
.lz-marke:empty { display: none; }

.marke { display: inline-flex; align-items: center; padding: 1px var(--a2); border-radius: var(--rund-voll); font-size: var(--gr-zusatz);
  font-weight: 600; white-space: nowrap; background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
.marke-knapp { background: var(--j-warn-bg); color: var(--j-warn-fg); }
.marke-leer { background: var(--j-fehler-bg); color: var(--j-fehler-fg); }
.marke-bot { background: var(--j-info-bg); color: var(--j-info-fg); }
.marke-web { background: var(--j-neutral-bg); color: var(--j-neutral-fg); }
h1 .marke { font-size: var(--gr-klein); }

.bestand-gross { display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; }
.bestand-gross .akt-rund { margin-left: 0; }
.bestand-gross .lz-zahl { font-size: var(--gr-seite); }
.zeile-form { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a3); align-items: flex-end; }
.zeile-form .feld { flex: 1 1 8rem; }
.zeile-form .akt-rund { margin-left: 0; }
.feld-knopf { justify-content: flex-end; }
.feld-knopf .akt-rund { margin-left: 0; }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: var(--a2) var(--a4); margin: 0; }
.daten dt { color: var(--text-leise); font-size: var(--gr-klein); }
.daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.ek, .vz, .token-zeile { display: flex; align-items: center; gap: var(--a2); padding: var(--a2) 0; border-top: 1px solid var(--linie); min-height: 3.25rem; }
.ek:first-child, .vz:first-child { border-top: 0; }
.ek form { margin: 0; }
.ek .akt-rund, .token-zeile .akt-rund { margin-left: 0; }
.ek-text, .vz-text, .token-zeile > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ek-erledigt .ek { min-height: 2.75rem; color: var(--text-leise); }
.vz-menge { min-width: 3rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.vz-menge.plus { color: var(--j-ok-fg); }
.vz-menge.minus { color: var(--j-fehler-fg); }
.vz-aufgehoben .vz-menge, .vz-aufgehoben .vz-text strong { text-decoration: line-through; color: var(--text-leise); }
.liste-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--j-stein-100); border-radius: var(--rund-s); padding: var(--a3);
  font-family: var(--schrift-mono); font-size: var(--gr-klein); margin: 0 0 var(--a3); }
.token-text { user-select: all; }
.chip-liste { display: flex; flex-wrap: wrap; gap: var(--a2); margin-bottom: var(--a3); }
.chip-eintrag { display: inline-flex; align-items: center; gap: var(--a1); padding-left: var(--a3); border: 1px solid var(--j-nacht-100);
  border-radius: var(--rund-voll); font-size: var(--gr-klein); background: var(--karte); }
.chip-eintrag form { margin: 0; }
.chip-weg { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; background: none;
  color: var(--text-leise); border-radius: 50%; cursor: pointer; }
.chip-weg:hover { color: var(--j-fehler-fg); }
.knopf-reihe { display: flex; gap: var(--a3); flex-wrap: wrap; }
.knopf-reihe .akt-rund { margin-left: 0; }
.hilfe-liste li { margin-bottom: var(--a2); }
.kachel-leise { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; }
.kachel-leise .hinweis { flex: 1; margin: 0; }
.meldung { margin-bottom: var(--a4); }
.toast-ort .meldung { margin: 0; }
.toast { display: flex !important; align-items: center; gap: var(--a3); }
.toast-rueck { min-height: 2.75rem; padding: 0 var(--a3); border: 1px solid currentColor; border-radius: var(--rund-voll); background: var(--karte);
  color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.toast-ort { left: var(--a3); right: var(--a3); top: auto; bottom: var(--a4); max-width: none; }
.anmeldung { margin: 8vh auto; }
.anmeldung h1 { font-size: var(--gr-titel); margin-bottom: var(--a2); }
.anmeldung-form { text-align: left; margin-top: var(--a4); }
.anmeldung-form .feld { margin-bottom: var(--a3); }
.anmeldung-form .formular-fuss { justify-content: center; }
.rueckfrage { border: 0; border-radius: var(--rund-m); box-shadow: var(--schatten-dialog); padding: var(--a5); max-width: min(24rem, 92vw); }
.rueckfrage::backdrop { background: var(--schleier); }
.rueckfrage-knoepfe { display: flex; justify-content: flex-end; gap: var(--a4); }
.rueckfrage-knoepfe .akt-rund { margin-left: 0; }

@media (min-width: 44.01rem) {
  .inhalt { padding: var(--a5); }
  .kachel { padding: var(--a5); }
  .seitenkopf h1 { font-size: var(--gr-seite); }
  .tm-zeile { justify-content: flex-start; gap: var(--a3); }
  .tm-gruppe { gap: var(--a3); }
  .lz { gap: var(--a3); }
  .toast-ort { left: auto; right: var(--a4); top: calc(var(--a5) + 3.5rem); bottom: auto; max-width: 26rem; }
  .lager-gruppen { columns: 2; }
}
@media print {
  .kopf, .tm-bar, .nicht-drucken, .toast-ort { display: none !important; }
  .kachel { border: 0; box-shadow: none; padding: 0; }
}
.kopf-marke { min-height: 2.75rem; }
.kopf-abmelden { min-width: 2.75rem; justify-content: center; }
@media (max-width: 26rem) {
  .kopf-abmelden span { display: none; }
}
/* sehr schmal (360 px bei 130 % Zoom): Name eigene Zeile, Knöpfe darunter rechtsbündig */
@media (max-width: 20rem) {
  .lz { flex-wrap: wrap; justify-content: flex-end; }
  .lz-name { flex: 1 1 100%; }
}
/* Navigationsleiste: eine Zeile auch am Handy (5 Radiale passen in 360 px) */
.tm-bar .tm-zeile { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; }
.tm-bar .tm-gruppe { display: flex; flex-wrap: nowrap; }
.tm-bar .tm-trenner { display: block; width: 1px; height: 2.25rem; flex: none; }
.tm-bar .tm-gruppe { justify-content: flex-start; gap: var(--a2); }
/* Seitenkopf: Titel links, Radiale rechts, Zähler darunter */
.inhalt .seitenkopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a2) var(--a3); }
.inhalt .seitenkopf .brotkrume, .inhalt .seitenkopf .untertitel { flex: 1 1 100%; margin: 0; order: 3; }
.inhalt .seitenkopf .brotkrume { order: 0; }
.inhalt .seitenkopf h1 { margin: 0; flex: 1; min-width: 0; }
.inhalt .seitenkopf .aktionen { display: flex; margin: 0 0 0 auto; width: auto; }
.toast { background-clip: padding-box; box-shadow: var(--schatten-dialog); }
.toast-ort .meldung-ok { background: var(--j-ok-bg); }
@media (max-width: 20rem) {
  .tm-bar .tm-zeile { flex-wrap: wrap; justify-content: flex-start; }
  .tm-bar .tm-trenner { display: none; }
}