/* Mitarbeiter – gemeinsame Oberfläche für Service, Kalkulation und 369 (identisch in allen drei Apps; Quelle F:\ClaudeCodex\mitarbeiter-ui\).
   Nutzt die Farben und Knöpfe der jeweiligen App (--ink, --muted, --line, --card, --good, --bad, --red/--accent, .btn). Klassen nur ma-… */
.ma { --ma-akzent: var(--accent, var(--red, #e63741)); --ma-linie: var(--line, #e4dfd8); --ma-leise: var(--muted, #6a645d); --ma-karte: var(--card, #fff); color: var(--ink, #3b3b3b); }
.ma-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; }
.ma-titel { font-size: 22px; margin: 0; }
.ma-sub { margin: 2px 0 0; color: var(--ma-leise); font-size: 14px; }
.ma-neu { white-space: nowrap; }
.ma-info { background: #fff7e6; border: 1px solid #f1d9a3; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; }
.ma-super .btn { margin-left: 6px; }
.ma-werkzeug { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ma-suche { flex: 1 1 260px; max-width: 420px; padding: 10px 12px; border: 1px solid var(--ma-linie); border-radius: 10px; font: inherit; background: var(--ma-karte); }
.ma-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ma-chip { border: 1px solid var(--ma-linie); background: var(--ma-karte); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; min-height: 36px; }
.ma-chip span { color: var(--ma-leise); font-size: 12px; margin-left: 2px; }
.ma-chip.an { background: var(--brand, #3a3b3d); border-color: var(--brand, #3a3b3d); color: #fff; }
.ma-chip.an span { color: #e7e7e7; }
.ma-meldung { background: #e6f4ea; color: #1f5e33; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 14px; }
.ma-fehler { background: #fde8e6; color: #8a2318; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; font-size: 14px; }
.ma-leer { color: var(--ma-leise); padding: 14px 4px; }
.ma-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ma-zeile { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1.6fr) 150px minmax(150px, 1fr) 18px; gap: 12px; align-items: center; text-align: left;
  background: var(--ma-karte); border: 1px solid var(--ma-linie); border-radius: 12px; padding: 10px 14px; font: inherit; color: inherit; cursor: pointer; min-height: 62px; }
.ma-zeile:hover { border-color: #cfc7bb; box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.ma-zeile:focus-visible { outline: 3px solid var(--ma-akzent); outline-offset: 2px; }
.ma-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--ma-bg, #eee); color: var(--ma-fg, #333); flex: none; }
.ma-avatar.gross { width: 52px; height: 52px; font-size: 17px; }
.ma-avatar.ma-ok { background: #dff0dc; color: #1f5e33; font-size: 24px; }
.ma-name { display: grid; min-width: 0; line-height: 1.3; }
.ma-name1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ma-name b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-name small { color: var(--ma-leise); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-firma { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 1px 7px; flex: none; background: #e8eef5; color: #1f4e79; }
.ma-firma.ma-f-kk { background: #f1ede7; color: #5a5148; }
.ma-du { font-style: normal; font-size: 11px; font-weight: 700; background: #e6f4ea; color: #1f5e33; border-radius: 8px; padding: 1px 7px; flex: none; }
.ma-rolle { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eceae6; color: #3b3b3b; white-space: nowrap; justify-self: start; }
.ma-r-superadmin { background: #3a3b3d; color: #fff; }
.ma-r-admin { background: #e4ddf4; color: #3f2f7a; }
.ma-r-mitarbeiter { background: #dff0dc; color: #1f5e33; }
.ma-r-hausmeister { background: #fbe6cc; color: #7a4308; }
.ma-r-gast { background: #e8e8ea; color: #4a4a4f; }
.ma-wann { font-size: 13.5px; color: var(--ma-leise); display: grid; line-height: 1.3; }
.ma-wann small { font-size: 12px; color: #8a4b0b; }
.ma-nie { color: #8a4b0b; }
.ma-pfeil { color: var(--ma-leise); font-size: 22px; line-height: 1; }
.ma-rollen { margin-top: 18px; background: var(--ma-karte); border: 1px solid var(--ma-linie); border-radius: 12px; padding: 4px 14px; }
.ma-rollen summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.ma-rollenliste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ma-rollenliste li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 14px; }

/* Dialog */
.ma-dlg { border: 0; border-radius: 16px; padding: 0; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); color: var(--ink, #3b3b3b); background: var(--card, #fff); }
.ma-dlg::backdrop { background: rgba(30, 30, 32, .5); }
.ma-dlg[open] { display: flex; flex-direction: column; }
.ma-dlg-kopf { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line, #e4dfd8); }
.ma-dlg-titel { display: grid; gap: 4px; flex: 1; min-width: 0; }
.ma-dlg-titel h3 { margin: 0; font-size: 19px; }
.ma-x { border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--muted, #6a645d); width: 44px; height: 44px; border-radius: 10px; }
.ma-x:hover { background: #f1eee9; }
.ma-dlg-koerper { padding: 6px 18px 12px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.ma-abschnitt { padding: 12px 0; border-bottom: 1px solid var(--line, #e4dfd8); }
.ma-abschnitt:last-child { border-bottom: 0; }
.ma-abschnitt h4 { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6a645d); }
.ma-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ma-felder label { display: grid; gap: 4px; font-size: 13px; color: var(--muted, #6a645d); margin: 0; }
.ma-felder .ma-breit { grid-column: 1 / -1; }
.ma-felder input, .ma-felder select { width: 100%; padding: 10px 11px; border: 1px solid var(--line, #d9d2c8); border-radius: 9px; font: inherit; font-size: 16px; color: var(--ink, #3b3b3b); background: #fff; min-height: 44px; }
.ma-felder input:disabled, .ma-felder select:disabled { background: #f4f2ee; color: #5c564f; }
.ma-hinweis { margin: 8px 0 10px; font-size: 13.5px; color: var(--muted, #6a645d); }
.ma-abschnitt > .btn { margin-top: 4px; }
.ma-pwbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.ma-pwbox code { font: 600 17px/1.2 ui-monospace, Consolas, monospace; background: #f6f3ee; border: 1px dashed #cbbfb0; border-radius: 9px; padding: 9px 12px; user-select: all; }
.ma-haken { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 8px; }
.ma-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 14px 0 0; font-size: 14px; }
.ma-meta div { display: grid; }
.ma-meta dt { font-size: 12px; color: var(--muted, #6a645d); }
.ma-meta dd { margin: 0; }
.ma-gefahr h4 { color: #8a2318; }
.ma-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ma-rot { background: #c62828 !important; border-color: #c62828 !important; color: #fff !important; }
.ma-rot-text { color: #8a2318 !important; }
.ma-dlg-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line, #e4dfd8); background: #faf8f5; border-radius: 0 0 16px 16px; }
.ma-zugang { background: #f6f3ee; border: 1px solid #dcd3c4; border-radius: 10px; padding: 14px; font: 15px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; margin: 10px 0; user-select: all; }

@media (max-width: 760px) {
  .ma-zeile { grid-template-columns: 44px minmax(0, 1fr) 18px; row-gap: 4px; padding: 10px 12px; }
  .ma-zeile .ma-rolle { grid-column: 2; grid-row: 2; }
  .ma-zeile .ma-wann { grid-column: 2; grid-row: 3; }
  .ma-zeile .ma-pfeil { grid-column: 3; grid-row: 1; }
  .ma-felder { grid-template-columns: minmax(0, 1fr); }
  .ma-meta { grid-template-columns: minmax(0, 1fr); }
  .ma-rollenliste li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ma-dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; margin: 0; height: 100dvh; }
  .ma-dlg-fuss { border-radius: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ma-titel { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) { .ma-zeile { transition: box-shadow .15s, border-color .15s; } }