.module-schichtplanung, .module-schichtplanung *, .module-schichtplanung *::before, .module-schichtplanung *::after { box-sizing: border-box; margin: 0; padding: 0; }

  .module-schichtplanung {
    --bg: var(--bg-surface);
    --surface: var(--bg-surface);
    --surface2: var(--bg-surface-alt);
    --surface3: var(--bg-surface-alt);
    --border: var(--border-default);
    --text: var(--text-primary);
    --text2: var(--text-secondary);
    --text3: var(--text-tertiary);
    --accent: #1f5bff;
    --accent-soft: #eef3ff;
    --danger: var(--signal-red, #dc2626);
    --danger-soft: var(--signal-red-light, #fee2e2);
    --ok: var(--signal-green, #16a34a);
    --tab: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface-hover) 100%);
    --tab-active: var(--bg-surface);
    --shadow: var(--shadow-md);
    --day-weekday-bg: #f6f8fb;
    --day-sat-bg: #edf3df;
    --day-sun-bg: #feb13e;
    --day-today-bg: #d9e9ff;
    --day-weekday-text: #223144;
    --day-sat-text: #445131;
    --day-sun-text: #6a3600;
    --day-today-text: #1f5bff;
    --cell-sat-bg: #f5f8ee;
    --cell-sat-alt-bg: #edf3e2;
    --cell-sun-bg: #fff4df;
    --cell-sun-alt-bg: #ffedd1;
    --cell-today-bg: #edf4ff;
    --cell-today-alt-bg: #e4eeff;
    /* Trennzeile ausserhalb einer Gruppe: neutraler Ton. Innerhalb einer Gruppe
       gilt deren Farbe. Darauf laeuft mittig die Trennlinie. */
    --divider-plain-bg: #e6e3dc;
    --shift-summary-width: 132px;
    --name-col-width: 220px;
    --hours-col-width: 84px;
    --legend-space: 58px;
  }

  .module-schichtplanung {
    height: 100%;
    font-family: var(--font-family-base);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg) 100%);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  .module-schichtplanung[data-tool="paint"] .shift-cell { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm2.92 2.33H5v-.92l8.06-8.06.92.92-8.06 8.06z'/%3E%3Cpath fill='%23444' d='M20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E") 2 22, crosshair; }
  .module-schichtplanung[data-tool="move"] .shift-cell { cursor: grab; }
  .module-schichtplanung[data-tool="erase"] .shift-cell { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='7.5' y='2' width='5' height='1.5' rx='0.75' fill='%23ef4444'/%3E%3Crect x='3' y='4' width='14' height='2' rx='1' fill='%23ef4444'/%3E%3Crect x='4.5' y='7' width='11' height='11' rx='1.5' fill='%23ef4444'/%3E%3Crect x='8' y='9' width='1' height='7' rx='0.5' fill='rgba(255,255,255,0.45)'/%3E%3Crect x='11' y='9' width='1' height='7' rx='0.5' fill='rgba(255,255,255,0.45)'/%3E%3C/svg%3E") 10 5, cell; }
  .shift-btn.paint-active {
    outline: 2px solid #fff;
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(31,91,255,.7);
    z-index: 1;
    position: relative;
  }
  .module-schichtplanung[data-tool="paint"] .shift-cell.paint-hover {
    outline: 2px solid #1f5bff;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    z-index: 8;
  }
  #shiftCursorTip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    display: none;
    align-items: center;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transform: translate(14px, 2px);
  }

  .module-schichtplanung .sp-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  /* ── Action-Bar (ersetzt Ribbon) ────────────────────────── */

  .sp-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 10px;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
  }

  .sp-action-left,
  .sp-action-right {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .sp-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    min-height: 26px;
    font-size: 12px;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }

  .sp-act-btn .material-icons { font-size: 15px; }

  .sp-act-btn:hover:not(:disabled) { background: #f3f4f6; border-color: #d1d5db; }

  .sp-act-btn:disabled { opacity: 0.38; cursor: default; }

  .sp-act-btn.sp-act-icon {
    padding: 3px 5px;
    min-width: 26px;
    border-color: transparent;
    background: transparent;
  }

  .sp-act-btn.sp-act-icon:hover:not(:disabled) {
    border-color: #e5e7eb;
    background: #f3f4f6;
  }

  .sp-act-btn.sp-act-primary {
    background: #1f5bff;
    color: #fff;
    border-color: #1f5bff;
  }

  .sp-act-btn.sp-act-primary:hover:not(:disabled) { background: #1742c8; }

  .sp-act-btn.sp-act-danger { color: #dc2626; }

  .sp-act-btn.sp-act-danger:hover:not(:disabled) {
    border-color: #fca5a5;
    background: #fef2f2;
  }

  .sp-act-lbl { font-size: 11px; }

  .sp-act-sep {
    width: 1px;
    height: 20px;
    background: #e5e7eb;
    margin: 0 5px;
    flex-shrink: 0;
  }

  /* Mode switch */
  .sp-mode-switch {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
  }

  .sp-mode-btn {
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Sora', sans-serif;
    background: #fff;
    color: #6b7280;
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }

  .sp-mode-btn.active { background: #1f5bff; color: #fff; }

  .sp-mode-btn:hover:not(.active) { background: #f3f4f6; color: #1e1b4b; }

  /* Zoom */
  .sp-zoom-ctrl { display: flex; align-items: center; gap: 1px; }

  .sp-zoom-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    min-width: 34px;
    text-align: center;
    user-select: none;
  }

  /* Year select */
  .sp-year-picker { display: flex; align-items: center; margin-left: 4px; }

  .sp-year-select {
    font-size: 12px;
    font-family: 'Sora', sans-serif;
    font-weight: 500;
    padding: 2px 6px;
    height: 26px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    color: #374151;
    cursor: pointer;
  }

  /* Objekt-Tabs (Einsatzort-Auswahl über der Schicht-Palette) */
  .sp-objekt-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
  }

  .sp-obj-tab {
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-family: 'Sora', sans-serif;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }

  .sp-obj-tab:hover:not(:disabled) { background: #f3f4f6; color: #1e1b4b; border-color: #d1d5db; }

  .sp-obj-tab.active { background: #1f5bff; color: #fff; border-color: #1f5bff; }

  .sp-obj-tab.sp-obj-add {
    padding: 3px 6px;
    color: #9ca3af;
    background: transparent;
    border-style: dashed;
  }

  .sp-obj-tab.sp-obj-add:hover { border-color: #1f5bff; color: #1f5bff; background: transparent; }

  .sp-obj-tab.sp-obj-add .material-icons { font-size: 13px; vertical-align: middle; }

  .action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 7px;
    font-size: var(--font-size-1);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    color: var(--text2);
    white-space: nowrap;
    transition: all .15s;
  }

  .action-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
  }

  .action-btn.primary {
    background: linear-gradient(180deg, #1f5bff 0%, #1742c8 100%);
    border-color: #1f5bff;
    color: #fff;
  }

  .action-btn.primary:hover { background: linear-gradient(180deg, #4b7dff 0%, #1742c8 100%); }

  .action-btn.danger {
    background: var(--bg-surface);
    border-color: var(--danger);
    color: var(--danger);
  }

  .action-btn.danger:hover { background: var(--danger); color: #fff; }

  .action-btn:disabled {
    opacity: .45;
    cursor: default;
    filter: grayscale(.12);
  }

  /* ── Tabs ─────────────────────────────────────────────────── */

  .tabs-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-surface-alt);
  }

  .tab-row {
    display: flex;
    align-items: flex-end;
    min-width: 0;
    border-bottom: 1px solid var(--border-strong);
    background: var(--bg-surface-alt);
    padding: 0 10px;
    gap: 0;
    position: relative;
    --tab-connect-bg: var(--bg-surface);
  }

  .month-tabs-row {
    --tab-connect-bg: var(--bg-surface-alt);
  }

  .version-tabs-row {
    --tab-connect-bg: var(--bg-surface);
  }

  .tab-label {
    flex-shrink: 0;
    font-size: var(--font-size-0);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    font-weight: var(--font-weight-bold);
    padding: 0 10px 6px 2px;
    align-self: flex-end;
  }

  .tab-scroller {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 0 0;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-scroller::-webkit-scrollbar { display: none; }

  .month-tab,
  .version-tab {
    border: 1px solid var(--border-strong);
    border-bottom: none;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
    white-space: nowrap;
    position: relative;
    top: 1px;
    border-radius: 3px 3px 0 0;
  }

  .month-tab {
    padding: 6px 11px;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .month-tab.active,
  .version-tab.active {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
    box-shadow: inset 0 2px 0 var(--accent);
    z-index: 2;
    font-weight: var(--font-weight-bold);
  }

  .month-tab.active::after,
  .version-tab.active::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 2px;
    background: var(--tab-connect-bg, var(--bg-surface));
  }

  .month-tab:hover:not(.active),
  .version-tab:hover:not(.active) {
    background: var(--bg-surface);
    color: var(--text-primary);
  }

  .version-tab {
    padding: 6px 10px;
    border-radius: 4px 4px 0 0;
    font-size: var(--font-size-1);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
  }

  .version-tab.add-tab {
    min-width: 28px;
    justify-content: center;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: #1f5bff;
    padding: 4px 10px 6px;
  }

  .version-tab.add-tab:hover {
    color: #1742c8;
  }

  .version-tab:disabled {
    opacity: .5;
    cursor: default;
    filter: grayscale(.1);
  }

  .month-tab-count {
    min-width: 16px;
    height: 16px;
    border-radius: 4px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    background: rgba(31,91,255,.14);
    color: #1f5bff;
  }

  .version-tab-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }

  .version-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .version-tab-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 999px;
    background: rgba(68,87,111,.12);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-1);
    line-height: 1;
    opacity: 0;
    transition: all .15s;
  }

  .version-tab-wrap:hover .version-tab-delete,
  .version-tab-wrap .version-tab.active + .version-tab-delete,
  .version-tab-wrap .version-tab-delete:focus-visible {
    opacity: 1;
  }

  .version-tab-delete:hover {
    background: rgba(190, 50, 50, 0.15);
    color: var(--signal-red-deep, #a03535);
  }

  .toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--bg-surface-alt);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    transition: opacity .2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  }

  .toolbar.disabled {
    opacity: .35;
    pointer-events: none;
  }

  .toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .toolbar-label {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text3);
  }

  .toolbar-no-shifts {
    font-size: var(--font-size-1);
    color: var(--text3);
    font-style: italic;
  }

  .tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    color: var(--text2);
    cursor: pointer;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    transition: all .15s;
  }

  .tool-btn:hover {
    color: var(--text);
    background: var(--bg-surface-hover);
  }

  .tool-btn.active {
    color: #fff;
    border-color: #1f5bff;
    background: linear-gradient(180deg, #1f5bff 0%, #1742c8 100%);
  }

  .tool-ic {
    width: 16px;
    text-align: center;
    font-size: var(--font-size-2);
  }

  .shift-btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .12s;
    letter-spacing: .3px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }

  .shift-btn-label {
    line-height: 1;
  }

  .shift-btn-time {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    opacity: .85;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .shift-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 14px -12px rgba(18, 40, 60, .42);
  }

  .shift-btn.undefined-shift {
    border-style: dashed;
    border-color: rgba(133, 77, 14, .45);
  }

  .shift-btn-add {
    flex-direction: row !important;
    gap: 4px !important;
    align-self: stretch;
    background: transparent;
    border-style: dashed;
    border-color: var(--border-strong);
    color: var(--text3);
  }

  .shift-btn-add .material-icons { font-size: 15px; }

  .shift-btn-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-surface-hover);
  }

  .erase-tool-btn {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .12s;
    background: var(--bg-surface-alt);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .erase-tool-btn:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(0,0,0,.08);
  }
  .erase-tool-btn.paint-active {
    outline: 2px solid #fff;
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(31,91,255,.7);
    z-index: 1;
    position: relative;
  }

  .view-banner {
    background: rgba(31,91,255,.08);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px;
    font-size: var(--font-size-1);
    color: var(--text2);
    display: none;
    flex-shrink: 0;
  }

  .view-banner.shown { display: block; }
  .view-banner b { color: var(--accent); }

  .view-banner.warn-banner {
    background: #fff1cc;
    border-bottom: 1px solid #e7c77a;
    color: #664200;
  }

  .view-banner.warn-banner b {
    color: #a65d00;
  }

  .version-toast {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 140;
    opacity: 0;
    transition: opacity .24s ease;
  }

  .version-toast.show {
    opacity: 1;
  }

  .version-toast-card {
    min-width: 270px;
    max-width: min(90vw, 480px);
    text-align: center;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 18px 24px;
    transform: translateY(12px) scale(.95);
    transition: transform .24s ease;
  }

  .version-toast.show .version-toast-card {
    transform: translateY(0) scale(1);
  }

  .version-toast-month {
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    letter-spacing: .2px;
  }

  .version-toast-name {
    margin-top: 6px;
    font-size: var(--font-size-3);
    color: var(--text2);
  }

  .grid-wrapper {
    flex: 1;
    overflow: auto;
    scrollbar-gutter: stable;
    scrollbar-color: #c7c2b6 var(--bg-surface-alt);
    position: relative;
    padding-bottom: 4px;
    margin-bottom: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
  }

  .grid-edge-shadow {
    position: fixed;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease;
    z-index: 44;
  }

  .grid-edge-shadow.left {
    top: var(--edge-side-top-anchor, 0px);
    left: var(--edge-left-anchor, 0px);
    width: 18px;
    height: var(--edge-side-region-height, 0px);
    background: linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,0));
  }

  .grid-edge-shadow.right {
    top: var(--edge-side-top-anchor, 0px);
    right: var(--edge-right-anchor, 0px);
    width: 18px;
    height: var(--edge-side-region-height, 0px);
    background: linear-gradient(to left, rgba(0,0,0,.42), rgba(0,0,0,0));
  }

  .grid-edge-shadow.top {
    left: var(--edge-left-anchor, 0px);
    width: var(--edge-region-width, 0px);
    top: var(--edge-top-anchor, 0px);
    height: 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,0));
  }

  .grid-edge-shadow.bottom {
    left: var(--edge-left-anchor, 0px);
    width: var(--edge-region-width, 0px);
    bottom: var(--edge-bottom-anchor, 0px);
    height: 16px;
    background: linear-gradient(to top, rgba(0,0,0,.36), rgba(0,0,0,0));
  }

  .grid-wrapper.shadow-left .grid-edge-shadow.left {
    opacity: 1;
  }

  .grid-wrapper.shadow-right .grid-edge-shadow.right {
    opacity: 1;
  }

  .grid-wrapper.shadow-top .grid-edge-shadow.top {
    opacity: 1;
  }

  .grid-wrapper.shadow-bottom .grid-edge-shadow.bottom {
    opacity: 1;
  }

  /* Sits exactly on the name column's right edge by reusing the anchors the left scroll
     shadow already maintains, so it follows the column at any width without extra math. */
  .grid-col-resizer {
    position: fixed;
    top: var(--edge-side-top-anchor, 0px);
    height: var(--edge-side-region-height, 0px);
    width: 11px;
    cursor: col-resize;
    touch-action: none;
    z-index: 45;
  }

  .grid-col-resizer.name {
    left: var(--edge-left-anchor, 0px);
    margin-left: -5px;
  }

  /* Mirrors the left handle on the leading edge of the sticky right block (same anchor the
     right scroll shadow uses). Dragging it resizes the shift-summary column, so the block
     grows and shrinks leftwards while the hours column keeps its fixed width. */
  .grid-col-resizer.summary {
    right: var(--edge-right-anchor, 0px);
    margin-right: -5px;
  }

  .grid-col-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity .12s ease;
  }

  .grid-col-resizer:hover::after,
  .grid-col-resizer.dragging::after {
    opacity: 1;
  }

  /* While dragging the pointer regularly leaves the 11px handle - forcing the cursor and
     killing selection globally keeps the gesture from looking like it broke off. */
  body.is-col-resizing,
  body.is-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
  }

  .grid {
    display: grid;
    min-width: max-content;
    position: relative;
  }

  .cell-corner {
    position: sticky;
    left: 0;
    top: 18px;
    z-index: 25;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: var(--name-col-width);
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    justify-content: flex-end;
    gap: 0;
  }

  .corner-label {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-primary);
    text-align: right;
    width: 100%;
  }

  .add-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: var(--font-size-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all .15s;
    line-height: 1;
  }

  .add-btn:hover {
    background: #5254e8;
    transform: scale(1.08);
  }

  .add-btn:disabled {
    opacity: .3;
    cursor: default;
    transform: none;
  }

  .day-header {
    width: 100px;
    height: 50px;
    background: var(--day-weekday-bg);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: sticky;
    top: 18px;
    z-index: 10;
    color: var(--day-weekday-text);
  }

  .day-header.sat {
    background: var(--day-sat-bg);
    color: var(--day-sat-text);
  }

  .day-header.sun {
    background: var(--day-sun-bg);
    color: var(--day-sun-text);
  }

  .day-header.today {
    background: var(--day-today-bg);
    color: var(--day-today-text);
    box-shadow: inset 0 -2px 0 #1742c8;
  }

  .day-header.today.sat {
    background: var(--day-sat-bg);
    color: var(--day-sat-text);
  }

  .day-header.today.sun {
    background: var(--day-sun-bg);
    color: var(--day-sun-text);
  }

  .day-num {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    color: inherit;
    line-height: 1;
  }

  .day-name {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: inherit;
    opacity: .72;
  }

  .day-header.today .day-name,
  .day-header.today .day-num {
    color: inherit;
  }

  .kw-corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 24;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: var(--name-col-width);
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .kw-cell {
    width: 100px;
    height: 18px;
    background: var(--day-weekday-bg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 10;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    color: var(--day-weekday-text);
    letter-spacing: .2px;
  }

  .kw-cell.sat {
    background: var(--day-sat-bg);
    color: var(--day-sat-text);
  }

  .kw-cell.sun {
    background: var(--day-sun-bg);
    color: var(--day-sun-text);
  }

  .kw-cell.today {
    background: var(--day-today-bg);
    color: var(--day-today-text);
    box-shadow: inset 0 -2px 0 #1742c8;
  }

  .kw-cell.today.sat {
    background: var(--day-sat-bg);
    color: var(--day-sat-text);
  }

  .kw-cell.today.sun {
    background: var(--day-sun-bg);
    color: var(--day-sun-text);
  }

  .week-corner {
    position: sticky;
    left: 0;
    top: 68px;
    z-index: 23;
    background: var(--surface2);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: var(--name-col-width);
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 10px;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .week-cell {
    width: 100px;
    height: 26px;
    gap: 4px;
    background: var(--surface2);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 68px;
    z-index: 9;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    letter-spacing: .2px;
  }

  .week-cell.sat,
  .week-cell.sun,
  .week-cell.today,
  .week-cell.today.sat,
  .week-cell.today.sun {
    background: var(--surface2);
    color: var(--text-primary);
    box-shadow: none;
  }

  /* Soll/Ist-Signal. Steht bewusst nach den Wochenend-/Heute-Regeln oben, damit der
     Erfuellungsgrad die Tagesfarbe ueberschreibt und nicht umgekehrt. */
  .week-cell.demand-missing,
  .week-cell.demand-missing.sat,
  .week-cell.demand-missing.sun,
  .week-cell.demand-missing.today {
    background: var(--signal-red, #dc2626);
    color: #fff;
    cursor: pointer;
  }

  .week-cell.demand-partial,
  .week-cell.demand-partial.sat,
  .week-cell.demand-partial.sun,
  .week-cell.demand-partial.today {
    background: var(--signal-amber, #f59e0b);
    color: #3d2c00;
    cursor: pointer;
  }

  .week-cell.demand-ok,
  .week-cell.demand-ok.sat,
  .week-cell.demand-ok.sun,
  .week-cell.demand-ok.today {
    background: var(--signal-green, #16a34a);
    color: #fff;
    cursor: pointer;
  }

  /* Gleiches Signal wie die Stundenwarnung im Schicht-Editor (warning_amber). Die Farbe
     kommt hier aber aus currentColor statt fest aus #b77400: die Zelle liegt je nach
     Zustand auf rotem, gelbem oder gruenem Grund, ein fester Ton waere dort teils
     unlesbar. */
  /* .week-cell davor, weil `.material-icons { font-size: inherit }` weiter unten steht und
     bei gleicher Spezifitaet sonst gewinnt - das Symbol laege dann auf den geerbten 10px
     der Zelle statt auf der hier gesetzten Groesse. */
  .week-cell .week-cell-warn {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    color: inherit;
    cursor: help;
  }

  /* Etwas groesser als die uebrige Kopfzeile (--font-size-0 = 10px), aber kleiner als das
     Warnsymbol daneben - die Zahl traegt die Aussage, das Symbol zieht den Blick. */
  .week-cell-count {
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-1);
    line-height: 1;
  }

  .week-corner-label {
    font-size: var(--font-size-0);
  }

  .week-corner-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-1);
    font-variant-numeric: tabular-nums;
    color: var(--text2);
  }

  .week-corner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .week-corner-summary.demand-ok      .week-corner-dot { background: var(--signal-green, #16a34a); }
  .week-corner-summary.demand-partial .week-corner-dot { background: var(--signal-amber, #f59e0b); }
  .week-corner-summary.demand-missing .week-corner-dot { background: var(--signal-red, #dc2626); }

  #demandPopup {
    min-width: 240px;
    max-width: 420px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
  }

  .demand-popup-head {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
  }

  .demand-popup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    font-size: var(--font-size-1);
    border-radius: var(--radius-sm);
  }

  .demand-popup-row + .demand-popup-row {
    border-top: 1px solid var(--border);
  }

  .demand-popup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .demand-popup-label {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-weight: var(--font-weight-bold);
  }

  .demand-popup-sub {
    display: block;
    font-size: var(--font-size-0);
    font-weight: normal;
    color: var(--text3);
  }

  .demand-popup-count {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
  }

  .demand-popup-row.is-missing .demand-popup-count { color: var(--signal-red, #dc2626); }
  .demand-popup-row.is-partial .demand-popup-count { color: #b45309; }
  .demand-popup-row.is-ok      .demand-popup-count { color: var(--signal-green, #16a34a); }

  .demand-popup-warn {
    display: block;
    font-size: var(--font-size-0);
    font-weight: normal;
    color: #b45309;
  }

  .demand-popup-empty {
    padding: 6px 4px;
    font-size: var(--font-size-1);
    color: var(--text3);
  }

  .day-header.axis-selected::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -18px;
    height: 68px;
    border: 2px solid rgba(31,91,255,.62);
    background: rgba(31,91,255,.10);
    pointer-events: none;
    z-index: 0;
  }

  .day-header.axis-selected {
    z-index: 12;
  }

  .day-header.axis-selected .day-num,
  .day-header.axis-selected .day-name {
    position: relative;
    z-index: 1;
  }

  .hours-header {
    width: var(--hours-col-width);
    height: 94px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    right: var(--shift-summary-width);
    z-index: 15;
  }

  .shift-hours-header {
    width: var(--shift-summary-width);
    height: 94px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    right: 0;
    z-index: 15;
  }

  .hours-header .h-top,
  .shift-hours-header .h-top {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    letter-spacing: .5px;
    text-transform: uppercase;
  }

  .hours-header .h-sub,
  .shift-hours-header .h-sub {
    font-size: var(--font-size-0);
    color: var(--text3);
    margin-top: 1px;
  }

  .section-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 32px;
    border-bottom: 1px solid var(--border);
  }

  .section-row.collapsed {
    border-bottom-style: dashed;
  }

  /* .section-row spans the full scrollable width, so its own position:sticky would be a
     no-op (nothing to "catch" - it's already as wide as the scroll container). This inner
     wrapper is the part that actually needs to stay in view, so it's the one that's sticky. */
  .section-row-sticky {
    position: sticky;
    left: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    background: inherit;
  }

  .section-toggle {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-surface);
    color: var(--text2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: var(--font-size-3);
    font-weight: normal;
    line-height: 1;
  }

  .section-toggle:hover {
    color: var(--text);
    border-color: var(--accent-soft);
  }

  .section-stripe {
    width: 3px;
    height: 16px;
    border-radius: 99px;
    flex-shrink: 0;
  }

  .section-name {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .9px;
    cursor: text;
  }

  .section-del {
    margin-left: auto;
    font-size: var(--font-size-3);
    color: var(--text3);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color .12s;
    line-height: 1;
  }

  .section-del:hover { color: var(--danger); }

  .last-row-hotspot {
    position: absolute;
    left: 34px;
    right: 8px;
    bottom: 0;
    height: 10px;
    z-index: 7;
  }

  .last-row-actions {
    position: absolute;
    left: 34px;
    bottom: -14px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease, color .12s ease, border-color .12s ease;
    pointer-events: none;
    z-index: 11;
  }

  .name-cell.last-in-section .last-row-hotspot:hover + .last-row-actions,
  .name-cell.last-in-section .last-row-actions:hover,
  .name-cell.last-in-section .last-row-actions:focus-within {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .last-row-quick-btn {
    font-size: var(--font-size-1);
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    padding: 2px 9px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    white-space: nowrap;
  }

  .last-row-quick-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
  }

  .divider-row {
    position: sticky;
    left: 0;
    /* Above every interactive .shift-cell state (selected/move/fill/paint-hover top out at
       8) so a cell scrolling underneath this sticky column never bleeds its outline over it. */
    z-index: 9;
    background: linear-gradient(0deg, var(--section-tint, var(--divider-plain-bg)), var(--section-tint, var(--divider-plain-bg))), var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: inset 3px 0 0 var(--section-accent, transparent);
    min-width: var(--name-col-width);
    height: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
  }

  /* In der Mitarbeiterspalte bleibt es beim kurzen Strich zwischen Greifer und
     Loeschkreuz – dort wuerde eine durchgehende Linie die Bedienelemente kreuzen. */
  .divider-line {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
  }

  .divider-del {
    opacity: 0;
    font-size: var(--font-size-3);
    color: var(--text3);
    cursor: pointer;
    padding: 0 4px;
    transition: opacity .1s, color .1s;
    line-height: 1;
  }

  .divider-row:hover .divider-del { opacity: 1; }
  .divider-del:hover { color: var(--danger); }

  /* Ueber den Tageszellen laeuft der Balken durch – gleiche Farbe und Staerke wie
     die .divider-line in der Mitarbeiterspalte, damit beide als ein Strich lesen.
     Ohne Sa/So-Einfaerbung, sonst waere das Band mehrfarbig; in einer Gruppe
     traegt es deren Farbe. */
  .divider-cells,
  .divider-cells.sat,
  .divider-cells.sun {
    height: 18px;
    border: none;
    background:
      linear-gradient(var(--border), var(--border)) center / 100% 3px no-repeat,
      linear-gradient(0deg, var(--section-tint, var(--divider-plain-bg)), var(--section-tint, var(--divider-plain-bg))),
      var(--surface);
  }

  /* Stundenspalten: nur das Band, keine Linie. Sie muessen wie ihre Spaltennachbarn
     sticky sein – sonst scrollen die Tageszellen der Trennzeile darunter durch und
     ziehen deren Linie sichtbar in den Stundenbereich. */
  .divider-hours {
    height: 18px;
    border: none;
    background:
      linear-gradient(0deg, var(--section-tint, var(--divider-plain-bg)), var(--section-tint, var(--divider-plain-bg))),
      var(--surface);
    position: sticky;
    right: var(--shift-summary-width);
    z-index: 9;
  }

  .divider-hours.divider-summary { right: 0; }

  .name-cell {
    position: sticky;
    left: 0;
    /* Above every interactive .shift-cell state (selected/move/fill/paint-hover top out at
       8) so a cell scrolling underneath this sticky column never bleeds its outline over it. */
    z-index: 9;
    background: linear-gradient(0deg, var(--section-tint, transparent), var(--section-tint, transparent)), var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 3px 0 0 var(--section-accent, transparent);
    height: 74px;
    min-width: var(--name-col-width);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    transition: background .1s;
    overflow: visible;
  }

  .name-cell:hover {
    background: linear-gradient(0deg, var(--section-tint, transparent), var(--section-tint, transparent)), var(--bg-surface-hover);
  }

  .name-cell.row-alt {
    background: linear-gradient(0deg, var(--section-tint, transparent), var(--section-tint, transparent)), var(--bg-surface-alt);
  }

  .name-cell.axis-selected,
  .name-cell.axis-selected.row-alt,
  .name-cell.axis-selected:hover {
    background: #e0e7ff !important;
    box-shadow: inset 0 0 0 2px rgba(31,91,255,.55);
  }

  .emp-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .emp-name-text {
    font-size: var(--font-size-2);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }

  .shift-cell {
    width: 98px;
    height: 72px;
    margin: 1px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    letter-spacing: .2px;
    position: relative;
    transition: outline .08s, transform .12s ease, box-shadow .12s ease;
  }

  /* Nur belegte Zellen bekommen die Karten-Optik (abgerundete Ecken) - der bestehende
     1px-Rand zwischen den Zellen dient dabei schon als Abstand, keine zusaetzliche Luecke
     noetig. Leere Zellen und die Wochenend-/Heute-Rahmen bleiben eckig wie bisher. overflow:
     hidden schneidet Kante+Flaeche (siehe .shift-cell-edge/-content) auf die runden
     Kartenecken zurecht, statt dass sie eckig ueberstehen wuerden. */
  .shift-cell.filled {
    border-radius: 7px;
    overflow: hidden;
  }

  /* Objektzeile: klein, linksbuendig (bewusst nicht wie Zeit/Kuerzel zentriert), Text in
     Objektfarbe (inline, siehe JS). */
  .shift-objekt-line {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    flex-shrink: 0;
    max-width: 100%;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  /* Vorlage 3A ("Zweifarbig geteilt"): Kante links + getoente Flaeche rechts, statt eines
     umlaufenden Rahmens (vorherige Variante). Kein Rand-Padding mehr noetig auf Zellebene -
     das Padding sitzt jetzt in .shift-cell-content. */
  .shift-cell-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    overflow: hidden;
  }

  .shift-cell-edge {
    width: 6px;
    flex-shrink: 0;
  }

  /* justify-content:flex-end statt center - die Gruppe (Kuerzel/Zeit/Objekt) ruecke als
     Ganzes nach unten, damit die Objekt-Pille (letztes Element) ganz am unteren Rand sitzt. */
  .shift-cell-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 4px 5px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .shift-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background .08s;
    pointer-events: none;
  }

  .shift-cell:hover::after { background: transparent; }
  .shift-cell.row-alt { background: var(--surface); }
  /* Real border (all 4 sides) instead of just the shared right/bottom edge, so it reads
     as a full frame around the cell - most useful once a shift's own color covers the
     background below. Colors are the user's actual configured day colors (applyDayColors()). */
  .shift-cell.sat { background: var(--cell-sat-bg); border: 3px solid var(--day-sat-bg); }
  .shift-cell.sun { background: var(--cell-sun-bg); border: 3px solid var(--day-sun-bg); }
  .shift-cell.today { background: var(--cell-today-bg); border: 3px solid var(--day-today-bg); }
  .shift-cell.today.sat { background: var(--cell-sat-bg); border: 3px solid var(--day-sat-bg); }
  .shift-cell.today.sun { background: var(--cell-sun-bg); border: 3px solid var(--day-sun-bg); }
  .shift-cell.row-alt.sat { background: var(--cell-sat-bg); border: 3px solid var(--day-sat-bg); }
  .shift-cell.row-alt.sun { background: var(--cell-sun-bg); border: 3px solid var(--day-sun-bg); }
  .shift-cell.row-alt.today { background: var(--cell-today-bg); border: 3px solid var(--day-today-bg); }
  .shift-cell.row-alt.today.sat { background: var(--cell-sat-bg); border: 3px solid var(--day-sat-bg); }
  .shift-cell.row-alt.today.sun { background: var(--cell-sun-bg); border: 3px solid var(--day-sun-bg); }

  .shift-label {
    pointer-events: none;
    line-height: 1;
    width: 100%;
    text-align: center;
    font-size: var(--font-size-3);
  }

  /* Feste gedaempfte Farbe statt geerbter Zellfarbe - die Kartenflaeche ist jetzt immer
     weiss (Vorlage 2C), die Zeit bleibt dadurch unabhaengig von der jeweiligen
     Schichtfarbe gleich gut lesbar, wie im Original. */
  .shift-time-inline {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    font-size: 11.5px;
    font-weight: var(--font-weight-normal, 500);
    letter-spacing: 0;
    line-height: 1;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  /* clock_arrow_up/down pack a clock face + arrow badge into the same glyph box as the
     plain schedule clock, so at matching font-size the arrow reads as barely visible -
     sized up a bit here so the direction is actually legible. */
  .shift-menu-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 16px;
    border: none;
    border-radius: 6px;
    background: rgba(255,255,255,.22);
    color: rgba(255,255,255,.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2);
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  }

  .module-schichtplanung[data-tool="none"]:not(.is-multi-select) .shift-cell.selected .shift-menu-btn {
    opacity: 1;
    pointer-events: auto;
  }

  .shift-menu-btn:hover {
    transform: scale(1.08);
  }

  .shift-cell.selected {
    outline: 2px solid #1f5bff;
    outline-offset: -2px;
    z-index: 8;
  }

  .clipboard-outline {
    position: absolute;
    pointer-events: none;
    z-index: 46;
    box-sizing: border-box;
    border: 2px solid #1f5bff;
    border-radius: 3px;
    --pulse-rgb: 79,70,229;
    --pulse-border-weak: .72;
    --pulse-border-strong: .98;
    --pulse-glow-weak: .30;
    --pulse-glow-strong: .20;
    animation: clipboardPulse 1.2s ease-in-out infinite;
  }

  .clipboard-outline.copy-outline {
    --pulse-rgb: 79,70,229;
    --pulse-border-weak: .72;
    --pulse-border-strong: .98;
    --pulse-glow-weak: .30;
    --pulse-glow-strong: .20;
  }

  .clipboard-outline.cut-outline {
    --pulse-rgb: 249,115,22;
    --pulse-border-weak: .78;
    --pulse-border-strong: 1;
    --pulse-glow-weak: .32;
    --pulse-glow-strong: .24;
  }

  @keyframes clipboardPulse {
    0% {
      border-color: rgba(var(--pulse-rgb), var(--pulse-border-weak));
      box-shadow: 0 0 0 1px rgba(255,255,255,.74), 0 0 0 0 rgba(var(--pulse-rgb), var(--pulse-glow-weak));
    }
    50% {
      border-color: rgba(var(--pulse-rgb), var(--pulse-border-strong));
      box-shadow: 0 0 0 1px rgba(255,255,255,.86), 0 0 0 4px rgba(var(--pulse-rgb), var(--pulse-glow-strong));
    }
    100% {
      border-color: rgba(var(--pulse-rgb), var(--pulse-border-weak));
      box-shadow: 0 0 0 1px rgba(255,255,255,.74), 0 0 0 0 rgba(var(--pulse-rgb), var(--pulse-glow-weak));
    }
  }

  .swap-flight {
    position: fixed;
    z-index: 620;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    letter-spacing: .2px;
    border-radius: 6px;
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.35);
    pointer-events: none;
  }

  .shift-cell.swap-settle {
    animation: swapSettle .18s ease-out;
  }

  @keyframes swapSettle {
    0% {
      transform: scale(0.96);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 2px rgba(31,91,255,.32);
    }
    100% {
      transform: scale(1);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    }
  }

  .shift-cell.undefined-shift {
    box-shadow: inset 0 0 0 2px rgba(120, 53, 15, .28);
  }

  /* Abzeichen oben links (gegenueber der Bedarfswarnung oben rechts), in der freien Flaeche
     ueber dem Kuerzel (der Inhalt ist per justify-content:flex-end an den unteren Rand
     verankert, siehe .shift-cell-content). Kleiner als frueher und links um die Randleiste
     (.shift-cell-edge, 6px) herumgerueckt, statt sie zu ueberlappen. Die Pfeilvariante zeigt
     zugleich, ob die Schicht laenger oder kuerzer wurde. */
  .shift-cell .shift-override-mark {
    position: absolute;
    top: 1px;
    left: 9px;
    z-index: 4;
    font-size: 19px;
    line-height: 1;
    color: #1f2937;
    pointer-events: none;
    cursor: help;
  }

  /* Beide sitzen oben links; ist die Schicht zusaetzlich undefiniert, rueckt das Abzeichen
     neben das Ausrufezeichen. */
  .shift-cell.undefined-shift .shift-override-mark {
    left: 29px;
  }

  /* Oben rechts, spiegelbildlich zu .shift-undef-mark (oben links) - unten wuerde es mit
     der Zeitangabe und dem Balken von .time-overridden ins Gehege kommen. Kein
     Schein/Schatten mehr - der war fuer die alte Vollflaechen-Optik gedacht (beliebig
     dunkle Schichtfarbe als Untergrund), jetzt ist die Flaeche immer hell getoent, reine
     Farbe reicht fuer Kontrast.
     `.shift-cell` davor, damit `.material-icons { font-size: inherit }` weiter unten die
     Groesse nicht wieder auf die geerbte Zellenschrift zieht. */
  .shift-cell .shift-demand-warn {
    position: absolute;
    top: 1px;
    right: 4px;
    z-index: 4;
    font-size: 18px;
    line-height: 1;
    color: var(--signal-amber, #f59e0b);
    pointer-events: none;
  }

  /* Unten links: von Mitarbeiter noch nicht gesehen. Unten rechts: nach der
     aktuell live gesetzten Version noch geaendert. Beide unten, weil oben schon
     mit Undef-/Anpassungs-/Bedarfs-Abzeichen belegt ist - bewusst als schlichter
     Punkt statt Icon, das ist zusaetzliche Information, kein Alarm.
     Vorerst ausgeblendet (Optik wirkte unruhig) - Tracking/Klassen bleiben
     unangetastet, damit sich das leicht wieder anders gestalten laesst. */
  .shift-cell .shift-unseen-mark,
  .shift-cell .shift-postpublish-mark {
    display: none;
  }

  /* Normalfall: leere Zelle (Wunschfrei wird faellig, bevor ueberhaupt eine
     Schicht steht) - dann soll die Markierung wie ein eigener Schicht-Chip
     aussehen: farbiger Zellhintergrund + grosses, zentriertes Label, statt
     eines kleinen Zusatz-Zeichens, das im Raster untergeht. */
  .shift-cell.wunschfrei-empty {
    background: rgba(16, 185, 129, .22) !important;
  }

  .shift-cell .wunschfrei-chip {
    position: absolute;
    inset: 2px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    pointer-events: none;
  }

  .shift-cell .wunschfrei-chip-label {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    color: #0b6e4f;
    text-align: center;
    line-height: 1.2;
    letter-spacing: .1px;
  }

  /* Randfall: Zelle traegt schon eine echte Schicht (z.B. Dienstfrei) - der volle
     Chip wuerde deren eigenes Label verdecken, deshalb bleibt es hier bei einem
     kompakten, aber weiterhin gut lesbaren Abzeichen oben mittig (einzige der
     vier Ecken ohne bestehende Belegung, siehe unseen-/postpublish-mark unten). */
  .shift-cell .shift-wunschfrei-mark {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    max-width: calc(100% - 6px);
    padding: 2px 7px;
    border-radius: var(--radius-full, 999px);
    background: rgba(16, 185, 129, .9);
    color: #ffffff;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .1px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  /* Sitzt wie .shift-override-mark in der freien Flaeche ueber dem Kuerzel, links um die
     Randleiste (6px) herumgerueckt statt sie zu ueberlappen. */
  .shift-undef-mark {
    position: absolute;
    top: 1px;
    left: 9px;
    z-index: 3;
    font-size: 16px;
    font-weight: var(--font-weight-heavy);
    line-height: 1;
    pointer-events: auto;
    cursor: help;
    opacity: .92;
  }

  .shift-cell:not(.selected) .shift-undef-mark {
    pointer-events: none;
  }

  .shift-undef-mark[data-undef-tip]::after {
    content: attr(data-undef-tip);
    position: absolute;
    left: 11px;
    top: -6px;
    transform: translateY(-100%);
    background: #ffe38a;
    color: #5a3a00;
    border: 1px solid #e6b84a;
    padding: 4px 7px;
    border-radius: 6px;
    font-size: var(--font-size-1);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(140, 98, 10, .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .04s linear;
  }

  .shift-cell.selected .shift-undef-mark[data-undef-tip]:hover::after {
    opacity: 1;
    visibility: visible;
  }

  .shift-cell.typeahead-active {
    background: var(--bg-surface) !important;
    background-image: none !important;
    color: var(--accent) !important;
  }

  .shift-cell.typeahead-active .shift-label,
  .shift-cell.typeahead-active .shift-undef-mark,
  .shift-cell.typeahead-active .shift-menu-btn {
    display: none;
  }

  .typeahead-inline {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    background: var(--bg-surface);
  }

  .typeahead-inline-text {
    line-height: 1;
  }

  .typeahead-inline-caret {
    width: 1px;
    height: 14px;
    margin-left: 1px;
    background: var(--accent);
    animation: typeaheadCaretBlink .92s steps(1, end) infinite;
  }

  @keyframes typeaheadCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  .shift-cell.move-armed {
    cursor: grabbing;
    outline: 2px dashed rgba(31,91,255,.7);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
  }

  .shift-cell.move-source {
    outline: 2px dashed #1742c8;
    outline-offset: -2px;
    z-index: 6;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
  }

  .shift-cell.move-hidden {
    opacity: 1;
    transform: none;
    background: var(--bg-surface) !important;
    background-image: none !important;
    color: transparent !important;
  }

  .shift-cell.move-hidden .shift-label,
  .shift-cell.move-hidden .shift-undef-mark,
  .shift-cell.move-hidden .shift-menu-btn {
    display: none;
  }

  .shift-cell.move-hidden::after {
    background: rgba(255,255,255,.96);
    border: 1px dashed rgba(31,91,255,.58);
  }

  .shift-cell.move-target {
    background: rgba(22, 163, 74, 0.18) !important;
    outline: 1px dashed rgba(22, 163, 74, 0.55);
    outline-offset: -1px;
    z-index: 6;
  }

  .shift-cell.fill-target {
    outline: 2px dashed #1f5bff;
    outline-offset: -2px;
    z-index: 7;
  }

  .module-schichtplanung[data-tool="none"] .shift-cell.fill-ready,
  .module-schichtplanung[data-tool="move"] .shift-cell.fill-ready {
    cursor: all-scroll;
  }

  .shift-cell.fill-ready::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--fill-ready-line, #1f5bff);
    pointer-events: none;
  }

  .shift-cell.fill-ready::after {
    background: linear-gradient(to top, var(--fill-ready-glow, rgba(31,91,255,.22)), rgba(31,91,255,0) 40%);
  }

  .name-cell.reorder-before,
  .divider-row.reorder-before,
  .section-row.reorder-before {
    box-shadow: inset 0 3px 0 #1742c8;
  }

  .name-cell.reorder-after,
  .divider-row.reorder-after,
  .section-row.reorder-after {
    box-shadow: inset 0 -3px 0 #1742c8;
  }

  .module-schichtplanung.is-view-mode .shift-cell:hover::after { background: transparent; }
  .module-schichtplanung.is-view-mode .shift-menu-btn,
  .module-schichtplanung.is-view-mode .last-row-actions,
  .module-schichtplanung.is-view-mode .last-row-hotspot,
  .module-schichtplanung.is-view-mode .section-del,
  .module-schichtplanung.is-view-mode .divider-del,
  .module-schichtplanung.is-view-mode .add-btn { display: none !important; }

  .module-schichtplanung.is-selection-mode .shift-menu-btn {
    opacity: 0 !important;
    pointer-events: none;
  }

  .hours-cell {
    width: var(--hours-col-width);
    height: 74px;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: linear-gradient(0deg, var(--section-tint, transparent), var(--section-tint, transparent)), var(--surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    position: sticky;
    right: var(--shift-summary-width);
    /* Above every interactive .shift-cell state (selected/move/fill/paint-hover top out at
       8) so a cell scrolling underneath this sticky column never bleeds its outline over it. */
    z-index: 9;
  }

  .hours-num {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    line-height: 1;
  }

  .hours-unit {
    font-size: var(--font-size-0);
    color: var(--text3);
    font-weight: var(--font-weight-bold);
    margin-top: 1px;
  }

  .shift-hours-cell {
    width: var(--shift-summary-width);
    min-height: 40px;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: linear-gradient(0deg, var(--section-tint, transparent), var(--section-tint, transparent)), var(--surface);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 4px 6px;
    overflow: hidden;
    position: sticky;
    right: 0;
    /* Above every interactive .shift-cell state (selected/move/fill/paint-hover top out at
       8) so a cell scrolling underneath this sticky column never bleeds its outline over it. */
    z-index: 9;
  }

  .hours-cell.zero .hours-num { color: var(--text3); }

  .hours-cell.row-alt,
  .shift-hours-cell.row-alt {
    background: linear-gradient(0deg, var(--section-tint, transparent), var(--section-tint, transparent)), var(--bg-surface-alt);
  }

  .shift-hours-cell.empty {
    color: var(--text3);
    font-size: var(--font-size-0);
  }

  .shift-hours-chip {
    display: inline-flex;
    align-items: center;
    /* Never shrink: the column is sized from these chips, so a chip whose width depends on
       the container would make that measurement circular (see currentShiftSummaryWidth). */
    flex-shrink: 0;
    gap: 3px;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
    white-space: nowrap;
  }

  .menu-icon {
    width: 20px;
    text-align: center;
    color: var(--text2);
    font-size: var(--font-size-3);
    font-weight: normal;
    line-height: 1;
    flex-shrink: 0;
  }

  .add-menu,
  #ctxMenu,
  #ctxShiftMenu,
  #versionMenu,
  #sectionMenu,
  #dayMenu,
  #demandPopup,
  #moveConflictMenu {
    position: fixed;
    z-index: 400;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 6px;
    box-shadow: var(--shadow-lg);
    display: none;
    animation: pop .12s ease;
  }

  .add-menu.open { display: block; }

  .add-menu .item,
  .ctx-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-2);
    font-weight: 500;
    color: var(--text-primary);
    transition: background .1s;
  }

  .add-menu .item:hover,
  .ctx-item:hover {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
  }

  .add-menu .item .ic {
    width: 20px;
    text-align: center;
    color: var(--accent);
    font-size: var(--font-size-3);
    font-weight: normal;
  }

  .ctx-item {
    font-size: var(--font-size-1);
    font-weight: 600;
    color: var(--text-primary);
  }

  .ctx-item.active {
    color: var(--text-primary);
    background: var(--accent-soft);
  }

  .add-menu .item.active {
    color: var(--text-primary);
    background: var(--accent-soft);
  }

  .ctx-item.disabled {
    color: var(--text-tertiary);
    opacity: 1;
    cursor: default;
    pointer-events: auto;
  }

  .ctx-item.disabled .menu-icon {
    color: var(--text-tertiary);
  }

  .ctx-item.disabled:hover {
    background: transparent;
    color: var(--text-tertiary);
  }

  .ctx-item.typeahead-hint {
    color: #7a5300;
    background: #fff6cf;
    border: 1px solid #f2df9e;
    cursor: default;
    pointer-events: none;
    font-weight: var(--font-weight-bold);
  }

  .ctx-item.typeahead-hint .menu-icon {
    color: #a56b00;
  }

  .ctx-item.typeahead-hint:hover {
    background: #fff6cf;
    color: #7a5300;
  }

  #ctxShiftMenu {
    max-height: min(330px, 56vh);
    overflow-y: auto;
  }

  .ctx-meta {
    display: block;
    font-size: var(--font-size-0);
    color: var(--text3);
    margin-top: 1px;
    font-weight: 500;
  }

  .ctx-chip {
    width: 30px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
  }

  .ctx-sep {
    height: 1px;
    background: var(--border-default);
    margin: 4px 0;
  }

  .grip-btn {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    color: var(--text3);
    cursor: grab;
    font-size: var(--font-size-3);
    line-height: 1;
    user-select: none;
  }

  .grip-btn:hover { color: var(--text); }
  .grip-btn:active { cursor: grabbing; }

  .drag-float {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 600;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.55);
    animation: dragLift .16s ease-out;
  }

  @keyframes dragLift {
    from {
      opacity: .2;
      transform: scale(.86);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .drag-float.block-preview {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    overflow: visible;
    filter: drop-shadow(0 12px 22px rgba(37, 55, 86, .26));
  }

  .drag-block {
    position: relative;
  }

  .drag-block-cell {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,.58);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
  }

  .drag-block-cell.empty {
    background: transparent;
    border-width: 2px;
    border-style: dashed;
    border-color: rgba(31,91,255,.64);
    box-shadow: 0 0 0 1px rgba(255,255,255,.78), 0 8px 16px rgba(37, 55, 86, .16);
  }

  .inline-edit {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--accent-soft);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    padding: 3px 6px;
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  .empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
  }

  .empty-icon {
    font-size: var(--font-size-8);
    opacity: .3;
  }

  .empty-text {
    font-size: var(--font-size-2);
    color: var(--text2);
    opacity: .7;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay, rgba(61,72,90,.24));
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 340px;
    box-shadow: var(--shadow-lg);
    animation: pop .18s ease;
  }

  .modal h3 {
    margin: -24px -24px 16px;
    padding: 14px 16px;
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    background: linear-gradient(180deg, var(--bg-surface-hover) 0%, var(--bg-surface-alt) 100%);
    border-bottom: 1px solid var(--border-strong);
  }

  .modal label {
    font-size: var(--font-size-1);
    font-weight: 600;
    color: var(--text2);
    display: block;
    margin-bottom: 5px;
  }

  .modal input,
  .modal select {
    width: 100%;
    background: var(--bg-surface);
    border: 1.6px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: var(--font-size-2);
    color: var(--text);
    outline: none;
    margin-bottom: 14px;
    font-family: inherit;
    transition: border-color .15s;
  }

  .modal input:focus,
  .modal select:focus { border-color: var(--accent); }

  .modal select option {
    background: var(--bg-surface);
    color: var(--text-primary);
  }

  .modal select option:checked {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
  }

  .modal-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  #cellTimeModal .modal {
    width: 400px;
    max-width: calc(100vw - 28px);
  }

  .dialog-modal {
    width: 420px;
    max-width: calc(100vw - 28px);
  }

  .emp-manage-search-input {
    flex: 1;
    margin-bottom: 0 !important;
  }

  .shift-editor-head.emp-manage-row,
  .shift-editor-row.emp-manage-row {
    grid-template-columns: 22px 34px minmax(0, 1fr) 150px 32px 32px;
  }

  .emp-manage-row .emp-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-1);
  }

  .shift-editor-head.objekt-manage-row,
  .shift-editor-row.objekt-manage-row {
    grid-template-columns: 56px minmax(0, 1fr) 32px 32px;
  }

  #empManageList .shift-editor-row.emp-manage-row {
    min-height: 50px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border-default);
  }

  #empManageList .shift-editor-group-body .emp-manage-row:last-child { border-bottom: none; }
  #empManageList .shift-editor-group-body .emp-manage-row:nth-child(even) { background: var(--bg-surface-alt); }

  .emp-manage-row input[type="checkbox"] {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  .emp-manage-row .emp-manage-section {
    width: 100%;
    margin-bottom: 0;
    height: 26px;
    padding: 4px 6px;
    font-size: var(--font-size-1);
  }

  .emp-manage-info {
    min-width: 0;
  }

  .emp-manage-name-text {
    font-size: var(--font-size-2);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .emp-manage-email-text {
    font-size: var(--font-size-1);
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .emp-manage-email-icon {
    font-size: 15px;
    margin-right: 4px;
    color: var(--text3);
  }

  .emp-manage-edit,
  .emp-manage-delete {
    cursor: pointer;
    color: var(--text3);
    font-size: var(--font-size-3);
    padding: 2px;
    border-radius: 4px;
    background: none;
    border: none;
    transition: color .1s;
  }

  .emp-manage-edit:hover { color: var(--accent); }
  .emp-manage-delete:hover { color: var(--danger); }

  .objekt-manage-name {
    font-size: var(--font-size-2);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .objekt-manage-edit,
  .objekt-manage-delete {
    cursor: pointer;
    color: var(--text3);
    font-size: var(--font-size-3);
    padding: 2px;
    border-radius: 4px;
    background: none;
    border: none;
    flex-shrink: 0;
    transition: color .1s;
  }

  .objekt-manage-delete:hover { color: var(--danger); }
  .objekt-manage-edit:hover { color: var(--accent); }

  .emp-manage-empty,
  .objekt-manage-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--text3);
    font-size: var(--font-size-1);
  }

  .objekt-manage-info {
    flex: 1;
    min-width: 0;
  }

  .objekt-manage-address {
    font-size: var(--font-size-0);
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp2-objekt-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(15,23,42,.12);
  }

  .objekt-color-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 14px;
    border: 1.6px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: var(--font-size-2);
    font-family: inherit;
    color: var(--text);
    transition: border-color .15s;
  }

  .objekt-color-trigger:hover { border-color: var(--border-strong); }

  .objekt-color-trigger-dot {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(15,23,42,.08);
    flex-shrink: 0;
  }

  /* Zwei gleich breite Spalten statt einer langen Kette von Feldern. Ein
     Grid statt zweier unabhaengiger Blöcke, damit je zwei Felder dieselbe
     Zeile teilen und auf gleicher Hoehe stehen - links Kuerzel/Name/Farbe,
     rechts Adresssuche/Strasse+Nr./PLZ+Ort, je Zeile so hoch wie ihr
     hoechster Eintrag (der Google-Hinweistext macht Zeile 1 hoeher, Zeile 2
     und 3 richten sich trotzdem exakt aus). */
  .objekt-form-modal { width: 640px; max-width: calc(100vw - 28px); }

  .objekt-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    align-items: start;
  }

  .objekt-form-field { min-width: 0; }

  .objekt-surcharge-value {
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    margin-bottom: 8px;
  }

  /* Gleiche Optik wie .objekt-color-trigger darueber - beide sind "Wert anzeigen,
     Knopf zum Aendern" in derselben Spalte, sollen also gleich aussehen. */
  .objekt-surcharge-adjust {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 10px;
    border: 1.6px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: var(--font-size-2);
    font-family: inherit;
    color: var(--text);
    transition: border-color .15s;
  }

  .objekt-surcharge-adjust:hover { border-color: var(--border-strong); }

  @media (max-width: 640px) {
    .objekt-form-modal { width: 340px; }
    .objekt-form-grid { grid-template-columns: 1fr; }
  }

  .objekt-form-row {
    display: flex;
    gap: 10px;
  }

  .objekt-form-wide { flex: 1; }
  .objekt-form-narrow { flex: 0 0 90px; }

  .objekt-address-hint {
    font-size: var(--font-size-1);
    color: var(--text2);
    margin: -4px 0 10px;
    line-height: 1.4;
  }

  .objekt-address-hint.is-error { color: var(--danger); }

  /* Eigene Vorschlagsliste: die Daten kommen ueber den eigenen Server, nicht aus
     Googles Widget - also auch die Darstellung selbst gebaut. */
  .objekt-address-wrap { position: relative; }

  .objekt-address-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    overflow: hidden;
  }

  .objekt-address-list.is-open { display: block; }

  .objekt-address-option {
    padding: 8px 10px;
    font-size: var(--font-size-2);
    color: var(--text);
    cursor: pointer;
  }

  .objekt-address-option:hover,
  .objekt-address-option[aria-selected="true"] { background: var(--surface2); }

  .objekt-address-attrib {
    padding: 5px 10px 6px;
    font-size: var(--font-size-1);
    color: var(--text2);
    border-top: 1px solid var(--border);
    text-align: right;
  }

  .dialog-message {
    font-size: var(--font-size-2);
    line-height: 1.5;
    color: var(--text2);
    margin-bottom: 14px;
  }

  .dialog-message strong {
    color: var(--text);
    font-weight: var(--font-weight-bold);
  }

  .dialog-message p {
    margin: 0 0 8px;
  }

  .dialog-message p:last-child {
    margin-bottom: 0;
  }

  /* Erste Zeile einer Meldung: der Grund. Traegt die volle Schriftfarbe, damit er
     sich vom erklaerenden Text darunter abhebt. */
  .dialog-message .dialog-lead {
    font-size: var(--font-size-2);
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 12px;
  }

  /* Beleg zum Grund: farbiges Kuerzel, Bezeichnung, Zeitraum. */
  .dialog-message .dialog-reason {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    background: var(--surface2);
  }

  .dialog-reason-badge {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
  }

  .dialog-reason-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .dialog-reason-text strong {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    color: var(--text);
  }

  .dialog-reason-text span {
    font-size: var(--font-size-2);
    color: var(--text2);
  }

  /* Nebenzeile: Anzahl weiterer betroffener Tage. */
  .dialog-message .dialog-note {
    font-size: var(--font-size-1);
    color: var(--text2);
  }

  .dialog-field {
    margin-bottom: 14px;
  }

  .dialog-field.hidden {
    display: none;
  }

  .shift-modal {
    width: 660px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
  }

  /* Nur der Schicht-Editor (kein zusaetzliche Klasse an den anderen shift-modal-
     Varianten) - 1180px wie die Design-Vorlage, damit deren Spaltenbreiten
     (siehe grid-template-columns weiter unten) tatsaechlich Platz haben statt
     gestaucht zu wirken. max-width kommt weiter von der Basisregel oben
     (calc(100vw - 28px)). */
  #shiftModal.modal-overlay .shift-modal {
    width: 1180px;
  }

  .shift-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    min-height: 0;
    flex: 1;
  }

  .shift-modal.single-edit #shiftAddGroup,
  .shift-modal.single-edit #shiftAddRoot {
    display: none;
  }

  .shift-modal.single-edit .shift-editor-hint,
  .shift-modal.single-edit .shift-modal-meta {
    display: none;
  }

  .shift-modal.single-edit .shift-group-handle,
  .shift-modal.single-edit .shift-editor-group-actions {
    display: none;
  }

  .shift-modal.single-edit .shift-editor-head,
  .shift-modal.single-edit .shift-editor-row-single {
    grid-template-columns: 56px 72px minmax(0, 1fr) minmax(0, 1fr) 84px 84px 82px 64px 20px;
  }

  .shift-modal.single-edit .shift-editor-head > :first-child,
  .shift-modal.single-edit .shift-editor-row-single > :first-child {
    display: none;
  }

  .shift-modal.single-edit .shift-editor-table {
    gap: 0;
  }

  .shift-modal.single-edit .shift-editor-head {
    margin: 0;
    border-radius: 10px 10px 0 0;
    border-bottom: none;
  }

  .shift-modal.single-edit .shift-editor-list-wrap {
    padding: 0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: none;
  }

  .shift-editor-single {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
  }

  .shift-modal.single-edit .shift-editor-single {
    border: none;
    border-radius: 0;
  }

  .shift-editor-row-single {
    margin: 0;
  }

  .shift-modal.single-edit .shift-editor-row-single {
    border-top: 1px solid var(--border);
  }

  .shift-modal.single-edit .shift-editor-row-single .shift-row-color {
    width: 100%;
    height: 26px;
    min-height: 26px;
    border-radius: 6px;
    align-self: center;
    justify-self: stretch;
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    top: -1px;
    line-height: 1;
  }

  .shift-editor-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
  }

  .shift-editor-hint {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-1);
    color: var(--text3);
  }

  .cell-time-hint {
    font-size: var(--font-size-1);
    color: var(--text3);
    margin: -6px 0 4px;
  }

  .shift-save-state {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: #0f766e;
    opacity: 0;
    transform: translateY(3px);
    transition: all .18s ease;
  }

  .shift-save-state.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .shift-editor-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
  }

  /* ── Soll/Ist ─────────────────────────────────────────────────────────────
     Zwei Fenster wie bei Mitarbeitern und Objekten: die Liste der Regeln und ein
     eigenes Fenster zum Anlegen/Bearbeiten mit der Tabelle aller Objekte. */

  .demand-modal { width: 820px; max-width: calc(100vw - 28px); }
  .demand-rule-modal { width: 900px; max-width: calc(100vw - 28px); }

  .demand-modal .demand-list-row {
    grid-template-columns: minmax(0, 1.2fr) 116px minmax(0, 2fr) 132px 64px;
  }

  .demand-modal .demand-list-row > * { min-width: 0; }

  .demand-list-name {
    font-weight: var(--font-weight-bold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demand-list-kind {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-1);
    color: var(--text2);
  }

  .demand-list-kind .material-icons { font-size: var(--font-size-3); color: var(--text3); }

  .demand-list-detail,
  .demand-list-scope {
    font-size: var(--font-size-1);
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demand-list-detail { font-variant-numeric: tabular-nums; }

  .demand-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  /* Kopf des Regel-Fensters: Name plus Geltung bzw. Datum. */
  .demand-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 2px;
  }

  .demand-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .demand-field-wide { flex: 1; min-width: 220px; }

  .demand-field > input {
    margin: 0; /* hebt margin-bottom aus `.modal input` auf */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    padding: 6px 9px;
    width: 100%;
  }

  .demand-field > input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
  }

  #demandRuleName { font-weight: var(--font-weight-bold); }

  .demand-scope {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .demand-scope-btn {
    border: none;
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
    color: var(--text2);
    padding: 6px 12px;
    cursor: pointer;
  }

  .demand-scope-btn + .demand-scope-btn { border-left: 1px solid var(--border); }
  .demand-scope-btn.active { background: var(--accent); color: #fff; }

  /* Mit .demand-rule-modal davor, damit diese Raster die generische Regel von
     `.shift-editor-head, .shift-editor-row` schlagen. Ohne den Zusatz waeren beide
     Selektoren gleich spezifisch und die weiter unten stehende Basisregel wuerde
     gewinnen - dann landet das 8-Spalten-Raster des Schicht-Editors auf diesen Zeilen. */
  .demand-rule-modal .demand-week-row {
    grid-template-columns: minmax(0, 1fr) repeat(7, 52px) 28px;
  }

  /* Grid-Kinder bekommen sonst min-width:auto und sprengen ihre Spalte. */
  .demand-rule-modal .demand-week-row > * {
    min-width: 0;
  }

  .demand-rule-modal .demand-week-row > div:not(:first-child) {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .demand-add-window {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-0);
    color: var(--text2);
    padding: 2px 8px 2px 4px;
    cursor: pointer;
  }

  .demand-add-window:hover {
    color: var(--text);
    border-color: var(--border-strong);
  }

  .demand-add-window .material-icons { font-size: var(--font-size-2); }

  /* Mit .modal davor, damit auch der margin-bottom aus `.modal input` weicht -
     die blosse Klasse allein verliert gegen `.modal input` (Klasse + Element). */
  .modal .demand-count-input,
  .modal .demand-time-input,
  .modal .demand-date-input {
    width: 100%;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
    color: var(--text);
    padding: 4px 6px;
  }

  .demand-count-input {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .demand-count-input:focus,
  .demand-time-input:focus,
  .demand-date-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
  }

  .demand-rule-modal [data-demand-dow] {
    border-radius: var(--radius-sm);
    transition: background .1s ease, color .1s ease;
  }

  .demand-rule-modal [data-demand-dow].is-hovered {
    background: var(--accent);
    color: #fff;
  }

  /* Die ganze Spalte mittönen, damit die Zuordnung ueber mehrere Objektgruppen
     hinweg sichtbar bleibt - nicht nur die Kopfzelle. */
  #demandRuleWindows[data-hover-dow="1"] .demand-count-input[data-demand-weekday="1"],
  #demandRuleWindows[data-hover-dow="2"] .demand-count-input[data-demand-weekday="2"],
  #demandRuleWindows[data-hover-dow="3"] .demand-count-input[data-demand-weekday="3"],
  #demandRuleWindows[data-hover-dow="4"] .demand-count-input[data-demand-weekday="4"],
  #demandRuleWindows[data-hover-dow="5"] .demand-count-input[data-demand-weekday="5"],
  #demandRuleWindows[data-hover-dow="6"] .demand-count-input[data-demand-weekday="6"],
  #demandRuleWindows[data-hover-dow="7"] .demand-count-input[data-demand-weekday="7"] {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .demand-count-input.has-value {
    border-color: var(--accent);
    background: var(--accent-soft);
    font-weight: var(--font-weight-bold);
  }

  .demand-window-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .demand-window-label .demand-time-input { max-width: 96px; }

  .demand-window-code {
    font-weight: var(--font-weight-bold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .demand-window-time {
    font-size: var(--font-size-0);
    color: var(--text3);
    white-space: nowrap;
  }

  .demand-row-del {
    border: none;
    background: none;
    color: var(--text3);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .demand-row-del:hover { color: var(--danger); }
  .demand-row-del .material-icons { font-size: var(--font-size-3); }

  .demand-empty {
    padding: 14px 10px;
    text-align: center;
    font-size: var(--font-size-1);
    color: var(--text3);
  }

  /* Einzeltag braucht keine sieben Wochentagsspalten - das Fenster faellt
     entsprechend schmaler aus als bei einer Mo-So-Regel. */
  #demandRuleModal.is-date .demand-rule-modal { width: 720px; }

  /* Einzeltag: je Bedarf eine Zeile mit Umschalter, Auswahl, Anzahl und Loeschen.
     Eine Flex-Zeile - alle Elemente haengen an derselben Mittelachse. */
  .demand-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
  }

  .demand-entry:last-of-type { border-bottom: none; }

  /* Die Auswahl nimmt den freien Platz, alles andere bleibt bei seiner Breite. */
  .demand-entry > .demand-select,
  .demand-entry > .demand-entry-range { flex: 1; min-width: 0; }
  .demand-entry > .demand-mode,
  .demand-entry > .demand-count-input,
  .demand-entry > .demand-row-del { flex: none; }
  .demand-entry > .demand-count-input { width: 64px; }
  .demand-entry > .demand-row-del { width: 26px; }

  /* EIN Kastenmodell fuer alle Bedienelemente der Zeile. Jedes Element bekommt
     hier saemtliche Masse gesetzt (Hoehe, Rahmen, Innenabstand, Schrift), statt
     sie aus seiner jeweiligen Basisregel zu erben - nur so sind Umschalter,
     Auswahl und Felder garantiert exakt gleich hoch. */
  .demand-entry .demand-mode .demand-scope-btn,
  .demand-entry .demand-select,
  .demand-entry .demand-time-input,
  .demand-entry .demand-count-input {
    box-sizing: border-box;
    height: 34px;
    /* margin: 0 ist hier entscheidend: `.modal input, .modal select` gibt allen
       Feldern margin-bottom 14px mit - in der zentrierten Flex-Zeile schiebt das
       die Felder nach oben, waehrend die Umschalt-Knoepfe mittig bleiben. */
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
  }

  /* Der Umschalter ist nur noch ein rahmenloser Halter; die Knoepfe selbst sind
     wie Eingabefelder aufgebaut und teilen sich die mittlere Kante. */
  .demand-entry .demand-mode {
    display: inline-flex;
    height: auto;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .demand-entry .demand-mode .demand-scope-btn { padding: 0 13px; }

  .demand-entry .demand-mode .demand-scope-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  .demand-entry .demand-mode .demand-scope-btn:last-child {
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  /* Nach der Kastenregel noch einmal gesetzt, damit die spaeter stehende
     gemeinsame Regel Farbe und Hintergrund nicht neutralisiert. */
  .demand-entry .demand-mode .demand-scope-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .demand-entry .demand-count-input.has-value {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .demand-mode .demand-scope-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  .demand-entry-range {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .demand-entry-range .demand-select { flex: 1; min-width: 120px; }
  .demand-entry-range .demand-time-input { width: 96px; flex: none; padding: 0 6px; }
  .demand-entry-sep { color: var(--text3); }

  .demand-select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
    color: var(--text);
    padding: 4px 6px;
  }

  .demand-select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
  }

  .demand-entry-add-row {
    display: flex;
    padding: 8px 6px 4px;
  }

  .demand-entry-add-row .demand-add-window { margin-left: 0; }

  /* Oben eckig statt rund und ohne obere Kante - sitzt direkt unter der Kopfzeile
     (.shift-editor-head), die dort ihrerseits keine untere Kante hat, damit beide
     wie ein durchgehendes Stueck wirken statt wie zwei getrennte Boxen. */
  .shift-editor-list-wrap {
    border: 1px solid var(--border-strong);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--bg-surface-hover);
    padding: 6px;
    max-height: min(58vh, 520px);
    overflow: auto;
  }

  .shift-editor-head,
  .shift-editor-row {
    display: grid;
    grid-template-columns: 18px 48px 64px minmax(0, 1fr) minmax(0, 1fr) 84px 84px 82px 64px 20px;
    gap: 6px;
    align-items: center;
    padding: 5px 10px;
  }

  .shift-editor-head {
    margin: 0;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--bg-surface-alt);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  /* Zeigt, in welcher Spalte man gerade tippt/hovert - bei so vielen schmalen
     Spalten nebeneinander sonst leicht zu verlieren. Wird per JS (siehe
     "Spalten-Hervorhebung" weiter unten) an die gehoverte/fokussierte Zelle
     gekoppelt. */
  .shift-editor-head > .is-active-col {
    color: var(--text);
  }

  /* Zeilen innerhalb einer Gruppe leicht einruecken, damit auf den ersten Blick
     klar ist, was zur Gruppe gehoert - gilt fuer alle Gruppen gleichermassen,
     auch die ungruppierte Zone und die Systemschicht-Gruppe, da beide inzwischen
     ebenfalls einen echten Kopf haben. Ueber margin statt padding, damit die Zeile
     selbst (inkl. Hintergrund/Zebra-Streifen) eine echte linke Kante bekommt, statt
     nur ihr Inhalt nach rechts zu ruecken waehrend der Zeilenhintergrund weiter bis
     zum Gruppenrand reicht. */
  .shift-editor-group .shift-editor-row {
    margin-left: 30px;
  }

  /* The list rows below sit inside .shift-editor-list-wrap (border+padding) and
     .shift-editor-group (border), which the head bar is not nested in - without this
     extra inset the head's columns start ~6px left of where the row columns actually
     start. Single-edit mode has its own list-wrap/margin math and stays untouched. */
  .shift-modal:not(.single-edit) .shift-editor-head {
    padding: 5px 16px;
  }

  /* Bewusst kein eigener Rahmen/Hintergrund/Eckenradius mehr: Kopf und Zeilen
     bringen ihren eigenen hellen Hintergrund mit (siehe .shift-editor-group-head/
     .shift-editor-row) und gehen nahtlos ineinander ueber - die Gruppe ist nur noch
     ein strukturelles Wrapper-Element, kein eigenes "Kaestchen". Der 4px-Abstand
     oben trennt die Gruppen stattdessen voneinander (und vom Containerrand), statt
     eines Rahmens um den Kopf. */
  .shift-editor-group {
    margin-top: 4px;
  }

  .shift-editor-group.dragging {
    opacity: .55;
  }

  .shift-editor-group.group-drop {
    box-shadow: inset 0 0 0 2px rgba(31,91,255,.35);
  }

  .shift-editor-group.drop-before {
    box-shadow: inset 0 3px 0 #1f5bff;
  }

  .shift-editor-group.drop-after {
    box-shadow: inset 0 -3px 0 #1f5bff;
  }

  /* Nur oben abgerundet, sitzt direkt (ohne Abstand) auf dem Koerper darunter, der
     wiederum nur unten abgerundet ist - zusammen ergibt das eine durchgehende
     Kapselform je Gruppe. Kein eigener Rahmen mehr - der 4px-Abstand ueber
     .shift-editor-group (siehe oben) trennt die Gruppen stattdessen. */
  .shift-editor-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    background: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface-hover) 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .shift-editor-group-stripe {
    width: 3px;
    height: 16px;
    border-radius: 999px;
    flex-shrink: 0;
    background: #7d8da1;
  }

  .shift-group-handle {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text3);
    cursor: grab;
    font-size: var(--font-size-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color .1s;
  }

  .shift-group-handle:hover { color: var(--text); }
  .shift-group-handle:active { cursor: grabbing; }

  .shift-editor-group-name {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text);
    cursor: pointer;
  }

  .shift-editor-group-count {
    font-size: var(--font-size-0);
    color: var(--text2);
  }

  .shift-editor-group-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .shift-editor-group-btn {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    color: var(--text2);
    font: inherit;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    padding: 3px 8px;
    cursor: pointer;
    height: 22px;
    display: inline-flex;
    align-items: center;
  }

  .shift-editor-group-btn:hover { color: var(--text); border-color: var(--border-strong); }

  .shift-editor-group-del {
    font-size: var(--font-size-3);
    color: var(--text3);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    border: none;
    background: transparent;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: color .1s;
  }

  .shift-editor-group-del:hover { color: var(--danger); }

  /* Nur unten abgerundet (Gegenstueck zum oben abgerundeten Kopf) - overflow:hidden
     schneidet dafuer die letzte Zeile (die selbst keinen eigenen Radius hat) am
     unteren Rand entsprechend zu. */
  .shift-editor-group-body {
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .shift-editor-group-body.empty {
    padding: 10px;
  }

  .shift-editor-group-empty {
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
    padding: 10px;
    text-align: center;
    font-size: var(--font-size-1);
    color: var(--text3);
    background: var(--bg-surface);
  }

  .shift-editor-row {
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-surface);
    min-height: 38px;
  }

  .shift-editor-row > * {
    align-self: center;
  }

  .shift-editor-row:last-child { border-bottom: none; }

  .shift-editor-row:nth-child(even) { background: var(--bg-surface-alt); }

  .shift-editor-row.dragging { opacity: .4; }

  .shift-editor-row.drop-before { box-shadow: inset 0 2px 0 #1f5bff; }
  .shift-editor-row.drop-after  { box-shadow: inset 0 -2px 0 #1f5bff; }

  .shift-editor-row input {
    width: 100%;
    min-width: 0;
    height: 26px;
    margin: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    padding: 4px 6px;
    font-size: var(--font-size-1);
    color: var(--text);
    font-family: inherit;
    transition: border-color .1s, background .1s, box-shadow .1s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  }

  .shift-editor-row input:focus {
    background: var(--bg-surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
    outline: none;
  }

  .shift-editor-row input[type="color"] { display: none; }

  .shift-editor-row input[type="time"] {
    font-variant-numeric: tabular-nums;
  }

  .shift-hours-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 6px;
    align-items: center;
    width: 100%;
  }

  .shift-hours-field input[data-field="hours"] {
    padding-right: 6px;
  }

  .shift-hours-field.is-warning input[data-field="hours"] {
    background: #fff5bf;
    border-color: #d8b552;
  }

  .shift-hours-field.is-warning input[data-field="hours"]:focus {
    background: #fff8d4;
    border-color: #c28b22;
    box-shadow: 0 0 0 2px rgba(194, 139, 34, .2);
  }

  .shift-hours-warn {
    position: relative;
    top: 1px;
    left: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 26px;
    font-family: var(--font-family-icons);
    font-weight: normal;
    font-style: normal;
    font-size: var(--font-size-4);
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: #b77400;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
  }

  .shift-hours-warn.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    border-radius: 4px;
    transition: opacity .12s ease, background .1s;
  }

  /* Klick setzt die Stunden auf den aus Von/Bis berechneten Wert zurueck -
     derselbe Ausloeser wie die Warnung selbst, kein separater Knopf noetig. */
  .shift-hours-warn.visible:hover {
    background: #fdf3e7;
  }

  .shift-hours-tip-floating {
    position: fixed;
    background: #ffe38a;
    color: #5a3a00;
    border: 1px solid #e6b84a;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-family: var(--font-family-base);
    line-height: 1.35;
    white-space: normal;
    min-width: 220px;
    max-width: 300px;
    box-shadow: 0 8px 18px rgba(140, 98, 10, .22);
    pointer-events: none;
    z-index: 9999;
  }

  .shift-row-preview,
  .shift-row-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    border-radius: 6px;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border: 1px solid rgba(15,23,42,.08);
  }

  .shift-row-color {
    width: 100%;
    cursor: pointer;
    background: var(--bg-surface);
    position: relative;
    transition: opacity .1s;
  }

  .shift-row-color:hover { opacity: .85; }

  .shift-row-handle {
    width: 18px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text3);
    cursor: grab;
    font-size: var(--font-size-3);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color .1s;
  }

  .shift-row-handle:hover:not(:disabled) { color: var(--text); }
  .shift-row-handle:active:not(:disabled) { cursor: grabbing; }
  .shift-row-handle:disabled { opacity: .25; cursor: default; }

  /* Bewusst kein Eingabefeld-Look mehr (kein Rahmen/Hintergrund um den Wert) - der
     Betrag ist reiner Text, nur der Stift daneben ist klickbar. Vorher sah der
     ganze Block wie ein Eingabefeld aus, war es aber nicht - irrefuehrend. */
  .shift-surcharge-field {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    height: 26px;
  }

  .shift-surcharge-value {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--font-size-1);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .shift-surcharge-edit {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--text3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color .1s, background .1s;
  }

  .shift-surcharge-edit .material-icons { font-size: 15px; }

  .shift-surcharge-edit:hover { color: var(--accent); background: var(--bg-surface-hover); }

  .shift-row-remove {
    width: 20px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    font-size: var(--font-size-3);
    font-weight: normal;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0;
    transition: color .1s;
  }

  .shift-row-remove:hover:not(:disabled) { color: var(--danger); }
  .shift-row-remove:disabled { opacity: .25; cursor: default; }

  /* ── #shiftModal — Design-Auffrischung ─────────────────────────────────────
     Ausschliesslich unter #shiftModal gescoped: .shift-editor-*/.shift-row-*
     sind Basisklassen, die sich Mitarbeiter-/Objekt-Verwaltung und die
     Soll/Ist-Regeln teilen - die sollen von diesem Redesign unberuehrt
     bleiben. Wo moeglich ueber die bestehenden Farb-Tokens (--accent u.a.),
     fuer die Flaechen (Kopf/Kartenhintergrund/Zebra/Rahmen) aber bewusst mit
     denselben Hex-Werten wie in der Design-Vorlage (claude.ai/design) statt
     der App-weiten --bg-surface*-Tokens, die in dieser Umgebung deutlich
     waermer/beiger ausfallen als in der Vorlage - genaue optische Uebernahme
     hat hier Vorrang vor Dark-Mode-Reinheit, ausschliesslich fuer diesen einen
     Dialog. */

  #shiftModal.modal-overlay {
    background: rgba(16, 25, 40, .5);
    backdrop-filter: blur(3px);
  }

  #shiftModal .shift-modal {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(10, 18, 33, .35), 0 2px 8px rgba(10, 18, 33, .16);
  }

  /* ── Kopf: Titel+Badge+Kennzahl links, Hinweis darunter, Aktionen rechts ── */
  #shiftModal .shift-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: -24px -24px 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e9eef5;
    background: #fff;
  }

  #shiftModal .shift-modal-header-main { min-width: 0; flex: 1; }

  #shiftModal .shift-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  #shiftModal .shift-modal-title-row h3 {
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: none;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
  }

  #shiftModal .shift-modal-objekt-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px 0 7px;
    border: 1px solid #f3d3ac;
    background: #fdf4e9;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 650;
    color: #a15a12;
    white-space: nowrap;
  }

  #shiftModal .shift-modal-objekt-badge .material-icons { font-size: 13px; }

  #shiftModal .shift-modal-meta {
    font-size: 12.5px;
    color: #8b95a5;
    white-space: nowrap;
  }

  #shiftModal .shift-editor-hint {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: #6c7787;
    max-width: 660px;
  }

  #shiftModal .shift-modal-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .shift-modal-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #7c8695;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color .1s, background .1s;
  }

  .shift-modal-close .material-icons { font-size: 18px; }

  .shift-modal-close:hover { background: var(--bg-surface-alt); color: #2c3644; }

  /* ── Koerper: helle Flaeche, darin die weisse Tabellen-Karte ─────────────── */
  #shiftModal .shift-editor {
    margin: 0 -24px;
    padding: 20px 24px 22px;
    background: #f4f7fb;
    gap: 0;
  }

  #shiftModal .shift-editor-head {
    background: #fff;
    border-color: #dbe3ee;
    border-bottom-color: #eaeff6;
    color: #7d8899;
  }

  #shiftModal .shift-editor-list-wrap {
    background: #fff;
    border-color: #e3e9f2;
  }

  #shiftModal .shift-editor-group {
    border: 1px solid #e3e9f2;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow: hidden;
  }

  #shiftModal .shift-editor-group-head {
    height: 36px;
    padding: 0 12px;
    background: #e7edf7;
    border-bottom: 1px solid #d9e2f0;
  }

  /* Die gesperrte Abwesenheit/Dienstfrei-Gruppe ist keine "echte" Gruppe (nicht
     verschiebbar/loeschbar) - bleibt deshalb neutral statt im Akzentton, damit
     sie optisch als eigener Sonderfall lesbar bleibt, genau wie in der Vorlage. */
  #shiftModal .system-shift-group .shift-editor-group-head {
    background: #ececf0;
    border-color: #e0e1e7;
  }

  #shiftModal .shift-editor-group-stripe {
    width: 3px;
    height: 17px;
  }

  #shiftModal .shift-editor-group-caret {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #7b8695;
    cursor: pointer;
    padding: 0;
    transition: background .1s, transform .15s ease;
  }

  #shiftModal .shift-editor-group-caret .material-icons { font-size: 18px; }

  #shiftModal .shift-editor-group-caret:hover { background: #e6edf7; }

  #shiftModal .shift-editor-group-caret.is-collapsed { transform: rotate(-90deg); }

  #shiftModal .shift-editor-group-body.is-collapsed { display: none; }

  #shiftModal .shift-editor-group-count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d6e0ef;
    font-size: 11px;
    font-weight: 650;
    color: #5a6b83;
  }

  /* Zeilen-/Kopfzellen-Innenabstand 1:1 aus der Vorlage (9px/14px statt 5px/10px) -
     die zusaetzliche Einrueckung innerhalb einer Gruppe kommt weiterhin ueber
     margin-left:30px (siehe .shift-editor-group .shift-editor-row), nicht ueber
     ein groesseres linkes Padding wie in der Vorlage. */
  #shiftModal .shift-modal:not(.single-edit) .shift-editor-row,
  #shiftModal .shift-modal:not(.single-edit) .shift-editor-head {
    padding: 9px 14px;
  }

  #shiftModal .shift-editor-row {
    min-height: 50px;
    border-bottom-color: #f0f4f9;
    transition: background .1s;
  }

  #shiftModal .shift-editor-row:nth-child(even) { background: #eef3fa; }

  #shiftModal .shift-editor-row:hover,
  #shiftModal .shift-editor-row:nth-child(even):hover {
    background: #e2ebf9;
  }

  #shiftModal .shift-editor-row input {
    height: 32px;
    border-radius: 7px;
  }

  #shiftModal .shift-editor-row input:focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
  }

  /* Anzeigename ist optional (faellt auf die Bezeichnung zurueck) - gestrichelt
     markiert das wie in der Vorlage, ohne den Platzhaltertext selbst zu aendern. */
  #shiftModal input[data-field="position"] {
    border-style: dashed;
    background: #fbfcfe;
  }

  #shiftModal input[data-field="position"]:focus {
    border-style: solid;
    background: #fff;
  }

  #shiftModal .shift-row-color,
  #shiftModal .shift-row-preview {
    height: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
  }

  /* Spaltenbreiten 1:1 aus der Vorlage (Farbe 78px, Kuerzel 100px, Von/Bis
     je 106px, Stunden 104px, Zuschlag 96px) statt der schmaleren App-Werte -
     dafuer muss der Dialog selbst breiter sein, siehe #shiftModal.modal-overlay
     .shift-modal weiter oben (900px -> 1180px, wie die Vorlage). Letzte Spalte
     62px statt 20px, da dort jetzt Duplizieren+Loeschen nebeneinander stehen. */
  #shiftModal .shift-modal:not(.single-edit) .shift-editor-head,
  #shiftModal .shift-modal:not(.single-edit) .shift-editor-row {
    grid-template-columns: 18px 78px 100px minmax(120px, 1fr) minmax(120px, 1fr) 106px 106px 104px 96px 62px;
  }

  #shiftModal .shift-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
  }

  #shiftModal .shift-row-duplicate,
  #shiftModal .shift-row-remove {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  #shiftModal .shift-row-duplicate .material-icons,
  #shiftModal .shift-row-remove .material-icons {
    font-size: 17px;
  }

  /* .shift-row-remove hat seine eigene Basisregel (border:none, zentriert
     usw.) weiter oben in dieser Datei - .shift-row-duplicate ist eine neue
     Klasse ohne eigene Basisregel und braucht denselben Reset deshalb hier
     explizit, sonst blieb der Browser-Standard-Button-Rahmen sichtbar. */
  #shiftModal .shift-row-duplicate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    /* Farbiger Rahmen+Text auf hellem Grund, wie .action-btn.danger es fuer
       den roten Fall schon vormacht - erkennbar als Button, nicht nur als
       freistehendes Icon. */
    border: 1px solid var(--accent);
    background: var(--bg-surface);
    color: var(--accent);
    transition: color .1s, background .1s, border-color .1s;
  }

  #shiftModal .shift-row-duplicate:hover:not(:disabled) {
    background: var(--accent-soft);
    color: #1742c8;
  }

  #shiftModal .shift-row-duplicate:disabled { opacity: .25; cursor: default; }

  #shiftModal .shift-row-remove {
    border: 1px solid #d13b3b;
    background: var(--bg-surface);
    color: #d13b3b;
  }

  #shiftModal .shift-row-remove:hover:not(:disabled) {
    background: #fbe4e4;
    color: #b52626;
    border-color: #b52626;
  }

  /* ── Fuss: Sichern-Status links, Schliessen/Speichern rechts ─────────────── */
  #shiftModal .modal-btns {
    margin: 0 -24px -24px;
    padding: 15px 24px;
    border-top: 1px solid #e9eef5;
    background: #fff;
    justify-content: space-between;
    align-items: center;
  }

  #shiftModal .shift-modal-footer-buttons {
    display: flex;
    gap: 10px;
  }

  /* ── Dieselbe Design-Auffrischung fuer die uebrigen Verwaltungslisten ──────
     (Mitarbeiter/Objekte/Soll-Ist) - dieselben Werte wie bei #shiftModal oben,
     hier je Dialog erneut aufgefuehrt statt ueber eine gemeinsame Klasse
     zusammengefasst, damit am bereits abgenommenen #shiftModal-Block nichts
     angefasst werden muss. .shift-modal-header/-header-main/-title-row/-meta/
     -header-actions und .shift-modal-close sind neue, ungebundene Klassen
     (keine Kollision mit bestehenden Regeln) und deshalb absichtlich nicht
     ID-gescoped - sie gelten einheitlich fuer alle vier Dialoge. */
  .shift-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: -24px -24px 0;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e9eef5;
    background: #fff;
  }

  .shift-modal-header-main { min-width: 0; flex: 1; }

  .shift-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .shift-modal-title-row h3 {
    margin: 0;
    padding: 0;
    background: none;
    border-bottom: none;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
  }

  .shift-modal-meta {
    font-size: 12.5px;
    color: #8b95a5;
    white-space: nowrap;
  }

  .shift-modal-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  #demandModal .shift-editor-hint {
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: #6c7787;
    max-width: 660px;
  }

  #empManageModal.modal-overlay,
  #objektManageModal.modal-overlay,
  #demandModal.modal-overlay {
    background: rgba(16, 25, 40, .5);
    backdrop-filter: blur(3px);
  }

  #empManageModal .shift-modal,
  #objektManageModal .shift-modal,
  #demandModal .shift-modal {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(10, 18, 33, .35), 0 2px 8px rgba(10, 18, 33, .16);
  }

  #empManageModal .shift-editor,
  #objektManageModal .shift-editor,
  #demandModal .shift-editor {
    margin: 0 -24px;
    padding: 20px 24px 22px;
    background: #f4f7fb;
    gap: 14px;
  }

  #empManageModal .shift-editor-head,
  #objektManageModal .shift-editor-head,
  #demandModal .shift-editor-head {
    background: #fff;
    border-color: #dbe3ee;
    border-bottom-color: #eaeff6;
    color: #7d8899;
  }

  #empManageModal .shift-editor-list-wrap,
  #objektManageModal .shift-editor-list-wrap,
  #demandModal .shift-editor-list-wrap {
    background: #fff;
    border-color: #e3e9f2;
  }

  #empManageModal .shift-editor-group {
    border: 1px solid #e3e9f2;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow: hidden;
  }

  #empManageModal .shift-editor-group-head {
    background: #e7edf7;
    border-bottom: 1px solid #d9e2f0;
  }

  #empManageModal .shift-editor-group-count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d6e0ef;
    font-size: 11px;
    font-weight: 650;
    color: #5a6b83;
  }

  #empManageList .shift-editor-group-body .emp-manage-row:nth-child(even) { background: #eef3fa; }
  #empManageList .shift-editor-row.emp-manage-row:hover { background: #e2ebf9; }

  #objektManageList .shift-editor-row.objekt-manage-row:nth-child(even) { background: #eef3fa; }
  #objektManageList .shift-editor-row.objekt-manage-row:hover { background: #e2ebf9; }

  #demandRuleList .shift-editor-row.demand-list-row:nth-child(even) { background: #eef3fa; }
  #demandRuleList .shift-editor-row.demand-list-row:hover { background: #e2ebf9; }

  /* Bearbeiten/Loeschen-Zeilenknoepfe einheitlich als farbige Buttons statt
     nackter Icons - dieselbe Optik wie Duplizieren/Loeschen bei #shiftModal. */
  #empManageModal .emp-manage-edit,
  #empManageModal .emp-manage-delete,
  #objektManageModal .objekt-manage-edit,
  #objektManageModal .objekt-manage-delete,
  #demandModal .demand-row-del {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-surface);
  }

  #empManageModal .emp-manage-edit .material-icons,
  #empManageModal .emp-manage-delete .material-icons,
  #objektManageModal .objekt-manage-edit .material-icons,
  #objektManageModal .objekt-manage-delete .material-icons,
  #demandModal .demand-row-del .material-icons {
    font-size: 17px;
  }

  #empManageModal .emp-manage-edit,
  #objektManageModal .objekt-manage-edit,
  #demandModal .demand-row-del[data-demand-edit] {
    border: 1px solid var(--accent);
    color: var(--accent);
  }

  #empManageModal .emp-manage-edit:hover,
  #objektManageModal .objekt-manage-edit:hover,
  #demandModal .demand-row-del[data-demand-edit]:hover {
    background: var(--accent-soft);
    color: #1742c8;
  }

  #empManageModal .emp-manage-delete,
  #objektManageModal .objekt-manage-delete,
  #demandModal .demand-row-del[data-demand-delete] {
    border: 1px solid #d13b3b;
    color: #d13b3b;
  }

  #empManageModal .emp-manage-delete:hover,
  #objektManageModal .objekt-manage-delete:hover,
  #demandModal .demand-row-del[data-demand-delete]:hover {
    background: #fbe4e4;
    color: #b52626;
    border-color: #b52626;
  }

  #demandModal .demand-list-actions { gap: 4px; }

  #objektManageModal .shift-row-color {
    height: 36px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
  }

  #empManageModal .modal-btns,
  #objektManageModal .modal-btns,
  #demandModal .modal-btns {
    margin: 0 -24px -24px;
    padding: 15px 24px;
    border-top: 1px solid #e9eef5;
    background: #fff;
  }

  .shift-color-modal {
    width: 320px;
    max-width: calc(100vw - 28px);
    padding: 16px;
  }

  .shift-color-modal h3 {
    margin: -16px -16px 10px;
    padding: 12px 16px;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .6px;
  }

  .shift-color-preview {
    height: 40px;
    border-radius: 6px;
    border: 1px solid rgba(15,23,42,.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
  }

  .shift-color-section-label {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text3);
    margin-bottom: 5px;
  }

  .shift-color-swatches,
  .section-color-swatches {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
    width: 100%;
  }

  .shift-color-row,
  .section-color-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
  }

  .shift-color-swatch {
    width: 100%;
    height: 18px;
    border-radius: 1px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.16);
    position: relative;
    transition: box-shadow .08s, border-color .08s;
    outline: none;
    padding: 0;
  }

  .shift-color-swatch:hover {
    z-index: 1;
    border-color: rgba(0,0,0,.35);
  }

  .shift-color-swatch.active::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid #1742c8;
    border-radius: 2px;
    pointer-events: none;
  }

  .shift-color-sep {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
  }

  .shift-color-custom-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-1);
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    padding: 4px 0;
    border: none;
    background: transparent;
    margin-bottom: 4px;
  }

  .shift-color-custom-toggle:hover { color: #1f5bff; }

  .shift-color-custom-panel {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: 10px;
    overflow: hidden;
  }

  .shift-color-custom-panel.open {
    display: flex;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(640px, calc(100vw - 20px));
    max-height: min(620px, calc(100vh - 20px));
    overflow: hidden;
    margin: 0;
    z-index: 650;
    animation: color-mix-popup .16s ease;
  }

  .module-schichtplanung.is-color-mix-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(35, 48, 70, .2);
    z-index: 160;
    pointer-events: none;
  }

  @keyframes color-mix-popup {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }

  .color-mix-window-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 14px 8px;
    background: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface-hover) 100%);
    border-bottom: 1px solid var(--border);
  }

  .color-mix-window-title {
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    letter-spacing: -.2px;
  }

  .excel-color-shell {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .excel-color-dialog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 12px;
    padding: 12px;
    min-height: 0;
    overflow: auto;
  }

  .excel-color-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .excel-color-body {
    display: grid;
    grid-template-columns: 1fr 192px;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface-alt) 100%);
  }

  .excel-color-map-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 10px;
    align-items: stretch;
  }

  .excel-color-map {
    position: relative;
    min-height: 254px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: crosshair;
    touch-action: none;
    overflow: hidden;
    background:
      linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
      linear-gradient(to right, #fff, var(--mix-hue-color, #ff0000));
  }

  .excel-color-map-cursor {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px #0f172a;
    pointer-events: none;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
  }

  .excel-color-hue {
    position: relative;
    width: 22px;
    min-height: 254px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: ns-resize;
    touch-action: none;
    overflow: hidden;
    background: linear-gradient(
      to top,
      #ff0000 0%,
      #ff00ff 17%,
      #0000ff 33%,
      #00ffff 50%,
      #00ff00 67%,
      #ffff00 83%,
      #ff0000 100%
    );
  }

  .excel-color-hue-knob {
    position: absolute;
    left: 1px;
    right: 1px;
    height: 7px;
    border: 1px solid #ffffff;
    background: rgba(17, 24, 39, .86);
    box-shadow: 0 0 0 1px rgba(17, 24, 39, .32);
    pointer-events: none;
    transform: translateY(-50%);
    top: 50%;
  }

  .excel-color-hue:focus-visible {
    outline: 2px solid #1742c8;
    outline-offset: 1px;
  }

  .excel-color-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .excel-model-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .color-model-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface2);
  }

  .color-model-btn {
    border: none;
    background: transparent;
    color: var(--text2);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    border-radius: 6px;
    padding: 4px 9px;
    cursor: pointer;
    min-width: 40px;
  }

  .color-model-btn.active {
    background: linear-gradient(180deg, #1f5bff 0%, #1742c8 100%);
    color: #ffffff;
  }

  .excel-field-label {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--text2);
  }

  .excel-rgb-list {
    display: grid;
    gap: 6px;
  }

  .excel-rgb-list label {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    font-size: var(--font-size-1);
    color: var(--text2);
    font-weight: 600;
  }

  .excel-channel-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }

  .excel-rgb-list input {
    margin: 0;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    color: var(--text);
    font-size: var(--font-size-1);
  }

  .excel-hex-line {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    font-size: var(--font-size-1);
    color: var(--text2);
    font-weight: 600;
  }

  .excel-hidden-color-input {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .excel-preview-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
  }

  .excel-preview-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--font-size-1);
    color: var(--text2);
    font-weight: 600;
  }

  .excel-preview-box {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
  }

  .shift-color-custom-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .shift-color-custom-inputs input[type="color"] {
    width: 56px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .shift-color-hex-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 6px 8px;
    font-size: var(--font-size-1);
    font-family: var(--font-family-mono);
    color: var(--text);
    outline: none;
    margin-bottom: 0;
  }

  .shift-color-hex-input:focus { border-color: var(--accent); }

  .color-rgb-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .color-rgb-grid label {
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--text2);
  }

  .color-rgb-grid input {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: var(--font-size-1);
    color: var(--text);
  }

  .color-rgb-grid input:focus {
    border-color: var(--accent);
    outline: none;
  }

  .color-recent-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    padding: 2px 0 4px;
  }

  .color-recent-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    background: var(--bg-surface);
  }

  .color-recent-empty {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px dashed var(--border-default);
    background: var(--bg-surface-alt);
  }

  .color-recent-swatch.active {
    box-shadow: 0 0 0 2px #1742c8;
    border-color: #1742c8;
  }

  .color-defined-empty {
    font-size: var(--font-size-1);
    color: var(--text-secondary);
    padding: 4px 2px 8px;
  }

  .shift-color-custom-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: flex-start;
    padding-top: 30px;
    width: 106px;
  }

  .shift-color-custom-btns .action-btn {
    width: 100%;
    justify-content: center;
  }

  @media (max-width: 680px) {
    .excel-color-dialog {
      grid-template-columns: 1fr;
    }

    .shift-color-custom-btns {
      flex-direction: row;
      padding-top: 0;
    }

    .shift-color-custom-btns .action-btn {
      flex: 1;
    }
  }

  .day-color-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }

  .day-color-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface-alt);
  }

  .day-color-meta strong {
    display: block;
    font-size: var(--font-size-2);
    color: var(--text);
  }

  .day-color-meta span {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-1);
    color: var(--text3);
  }

  .day-color-preview {
    height: 34px;
    width: 100%;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(15,23,42,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    background-clip: padding-box;
  }

  button.day-color-preview {
    font-family: inherit;
  }

  .day-color-preview:hover {
    filter: brightness(1.02);
  }

  .day-color-preview:focus-visible {
    outline: 2px solid rgba(31,91,255,.45);
    outline-offset: 1px;
  }

  #shiftColorModal {
    z-index: 260;
  }

  .legend {
    position: relative;
    background: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface-hover) 100%);
    border-top: 1px solid var(--border-strong);
    padding: 10px 14px;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    width: 100%;
    max-width: none;
    flex-shrink: 0;
    z-index: 10;
    font-size: var(--font-size-1);
    color: var(--text2);
  }

  .legend-no-shifts {
    font-size: var(--font-size-1);
    color: var(--text3);
    font-style: italic;
    align-self: center;
  }

  .leg-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--bg-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    cursor: default;
  }

  .leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
  }

  @keyframes pop {
    from { opacity: 0; transform: scale(.94); }
    to { opacity: 1; transform: scale(1); }
  }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #c7c2b6; border-radius: 99px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  ::-webkit-scrollbar-corner { background: var(--bg-surface); }

  @media (max-width: 680px) {
    .sp-action-bar { padding: 0 6px; gap: 2px; }
    .sp-act-lbl { display: none; }
    .toolbar { padding: 8px 10px; }
    .view-banner { padding: 8px 12px; }
    .grid-wrapper {
      padding-bottom: 6px;
      margin-bottom: 0;
    }
  }

  /* Material Icons: inherit size from context, override the 24px default */
  .material-icons {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
  }

  /* Color toggle icon slightly larger than its 12px container font */
  .shift-color-custom-toggle .material-icons {
    font-size: var(--font-size-3);
    line-height: 1;
  }

  /* ── Mobile-Anpassungen Schichtplanung ─────────────────────────────────
     Die Plan-Tabelle hat absichtlich min-widths fuer Spalten – auf kleinen
     Viewports erlauben wir horizontales Scrollen statt umzubrechen. */
  .module-schichtplanung .sp-app {
    /* 100vh ignoriert die mobile Top-Bar im SPA-Shell. Auf 100% wechseln,
       damit der Plan in den verfuegbaren Bereich passt und die Top-Bar
       sichtbar bleibt. */
    height: 100%;
    min-height: 0;
  }

  @media (max-width: 860px) {
    .module-schichtplanung .grid-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  @media (max-width: 480px) {
    .module-schichtplanung .toolbar {
      flex-wrap: wrap;
      gap: 6px;
    }

    .module-schichtplanung .sp-action-bar {
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     Schichtplanung v2 — Design-Overhaul (Cobalt / warmes Papier).
     Überschreibt das Chrome (Toolbar, Leisten, Dropdowns, Legende);
     der Planungsbereich (#grid) bleibt funktional unverändert.
     ════════════════════════════════════════════════════════════════════ */

  .module-schichtplanung {
    --np-accent: #1f5bff;
    --np-accent-deep: #1742c8;
    --np-accent-soft: #eef3ff;
    --np-line: #e6e3dc;
    --np-line-strong: #d7d3ca;
    --np-paper2: #f6f5f1;
    /* Kopfbereich (Werkzeugleiste, Zeitraum, Objekt/Schicht): ruhiges Lavendelblau,
       auf dem die weissen Gruppenkarten stehen. */
    --np-chrome: #d3dce8;
    --np-chrome-line: #c4cfdd;
    --np-ink: #14161a;
    --np-ink2: #565b63;
    --np-ink3: #a2a099;
  }

  .module-schichtplanung,
  .module-schichtplanung input,
  .module-schichtplanung select,
  .module-schichtplanung button { font-family: 'Hanken Grotesk', system-ui, sans-serif; }

  /* ── Toolbar (VERLAUF / VERWALTEN / AUSGABE / MODUS / ANSICHT) ── */
  .sp2-toolbar {
    height: auto;
    align-items: stretch;
    gap: 14px;
    padding: 8px 22px 8px;
    background: var(--np-chrome);
    border-bottom: none;
    flex-wrap: wrap;
  }
  .sp2-tb-side { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
  /* Jede Gruppe sitzt in einer eigenen Karte – ersetzt die frueheren Trennstriche.
     Nur die Abgrenzung aendert sich, die Anordnung der Bedienelemente bleibt. */
  .sp2-grp {
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px 11px 8px;
    background: #fff;
    border: 1.5px solid var(--np-chrome-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 22, 26, .05);
  }
  .sp2-grp-lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--np-ink3); padding-left: 2px;
  }
  .sp2-grp-row { display: flex; flex: 1; align-items: center; gap: 8px; flex-wrap: wrap; }

  .sp2-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--np-ink2);
    background: #fff; border: 1.5px solid var(--np-line);
    border-radius: 9px; padding: 7px 12px; cursor: pointer; white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
  }
  .sp2-btn:hover:not(:disabled) { border-color: var(--np-line-strong); color: var(--np-ink); }
  .sp2-btn:disabled { opacity: .5; cursor: default; }
  .sp2-btn-ic { font-size: 16px; }
  .sp2-btn-ic-accent { color: var(--np-accent); }
  .sp2-chev { font-size: 14px; color: var(--np-ink3); transition: transform .15s; }
  .sp-dd.open .sp-dd-toggle .sp2-chev { transform: rotate(180deg); }

  .sp2-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; color: var(--np-ink3);
    background: #fff; border: 1.5px solid var(--np-line); border-radius: 8px;
    cursor: pointer; transition: border-color .12s, color .12s, background .12s;
  }
  .sp2-iconbtn .material-icons { font-size: 16px; }
  .sp2-iconbtn:hover:not(:disabled) { border-color: var(--np-line-strong); color: var(--np-ink2); }
  .sp2-iconbtn:disabled { opacity: .4; cursor: default; }
  .sp2-iconbtn.sp2-danger { color: #c1493a; }
  .sp2-iconbtn.sp2-danger:hover:not(:disabled) { border-color: #e8b0a6; background: #fdf2f0; }
  .sp2-iconbtn-outline { width: 28px; height: 28px; }

  /* Mode-Switch */
  .sp2-mode { display: flex; background: #eae7e0; border-radius: 9px; padding: 3px; }
  .sp2-mode-btn {
    font-size: 13px; font-weight: 600; color: var(--np-ink3);
    border: none; background: transparent; padding: 5px 13px; border-radius: 7px; cursor: pointer;
    transition: color .12s;
  }
  .sp2-mode-btn.active {
    color: #fff; background: var(--np-accent);
    box-shadow: 0 1px 3px rgba(31,91,255,.35);
  }

  /* Zoom */
  .sp2-zoom {
    display: inline-flex; align-items: center;
    background: #fff; border: 1.5px solid var(--np-line); border-radius: 9px; overflow: hidden;
  }
  .sp2-zoom-btn {
    display: flex; width: 30px; height: 30px; align-items: center; justify-content: center;
    color: var(--np-ink3); background: transparent; border: none; cursor: pointer;
  }
  .sp2-zoom-btn .material-icons { font-size: 15px; }
  .sp2-zoom-btn:hover:not(:disabled) { color: var(--np-ink); }
  .sp2-zoom-btn:disabled { opacity: .4; cursor: default; }
  .sp2-zoom-lbl {
    font-size: 12.5px; font-weight: 600; color: var(--np-ink2);
    padding: 0 8px; min-width: 46px; text-align: center;
  }

  /* ── Generisches Dropdown ── */
  .sp-dd { position: relative; }
  .sp-dd-menu {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
    min-width: 176px; background: #fff;
    border: 1.5px solid var(--np-line); border-radius: 11px;
    box-shadow: 0 14px 40px rgba(20,22,26,.16); padding: 5px;
  }
  .sp-dd.open .sp-dd-menu { display: block; }
  .sp-dd-menu.sp-dd-menu-right { left: auto; right: 0; }
  .sp-dd-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; background: transparent; border-radius: 7px;
    font-size: 13px; font-weight: 600; color: var(--np-ink2); cursor: pointer; text-align: left;
    transition: background .12s, color .12s;
  }
  .sp-dd-item .material-icons { font-size: 15px; color: var(--np-accent); }
  .sp-dd-item:hover:not(:disabled) { background: var(--np-accent-soft); color: var(--np-accent-deep); }
  .sp2-objekt-item.active { background: var(--np-accent-soft); color: var(--np-accent-deep); }
  .sp-dd-item:disabled, .sp-dd-item-soon:disabled { opacity: .55; cursor: default; }
  .sp-dd-item-soon { position: relative; }

  /* ── Jahr · Monat · Version Leiste ── */
  .sp2-strip {
    display: flex; align-items: stretch; gap: 0;
    padding: 0 22px 8px; background: var(--np-chrome); border-bottom: none;
    position: relative;
  }
  /* Jahr, Monat und Version liegen bewusst in einer gemeinsamen Karte. */
  .sp2-strip-card {
    display: flex; align-items: center; flex: 1; min-width: 0;
    padding: 0 14px;
    background: #fff;
    border: 1.5px solid var(--np-chrome-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 22, 26, .05);
  }
  .sp2-strip-lbl {
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--np-ink3); flex: 0 0 auto; padding-right: 12px;
  }
  .sp2-strip-sep { width: 1px; height: 22px; background: #e3e6f0; margin: 0 16px; flex: 0 0 auto; }

  .sp2-year-dd { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
  .module-schichtplanung .sp2-year-select {
    appearance: none; -webkit-appearance: none;
    font-family: 'Schibsted Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--np-ink);
    background: #fff; border: 1.5px solid var(--np-line); border-radius: 9px;
    padding: 6px 30px 6px 12px; cursor: pointer;
  }
  .sp2-year-chev {
    position: absolute; right: 8px; pointer-events: none;
    font-size: 14px; color: var(--np-ink3);
  }

  .sp2-months {
    flex: 1; min-width: 0; display: flex; align-items: center;
    overflow-x: auto; overflow-y: hidden; padding: 0;
  }
  .sp2-months .month-tab {
    border: none; background: transparent; top: 0; border-radius: 0;
    font-family: 'Schibsted Grotesk', sans-serif; font-size: 13.5px; font-weight: 600;
    color: var(--np-ink2); padding: 14px 11px; white-space: nowrap;
    border-bottom: 2.5px solid transparent; box-shadow: none;
  }
  .sp2-months .month-tab:hover:not(.active) { background: transparent; color: var(--np-ink); }
  .sp2-months .month-tab.active {
    color: var(--np-accent); font-weight: 700;
    border-bottom: 2.5px solid var(--np-accent); background: transparent; box-shadow: none;
  }
  .sp2-months .month-tab.active::after { display: none; }
  .sp2-months .month-tab-count {
    background: rgba(31,91,255,.14); color: var(--np-accent);
  }

  /* Version-Dropdown (ersetzt die Versions-Tabs) */
  .sp2-ver-host { flex: 0 0 auto; display: flex; align-items: center; }
  .sp2-ver-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--np-ink);
    background: #fff; border: 1.5px solid var(--np-line-strong); border-radius: 9px;
    padding: 6px 12px; white-space: nowrap; cursor: pointer;
  }
  .sp2-ver-menu { left: auto; right: 0; min-width: 210px; padding: 5px; }
  .sp2-ver-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; border-radius: 8px; cursor: pointer; position: relative;
    transition: background .12s;
  }
  .sp2-ver-row:hover { background: var(--np-accent-soft); }
  .sp2-ver-fold { font-size: 15px; color: var(--np-ink3); flex: 0 0 auto; }
  .sp2-ver-name { font-size: 13px; font-weight: 600; color: var(--np-ink); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp2-ver-row.active .sp2-ver-name { font-weight: 700; }
  .sp2-ver-check { font-size: 15px; color: var(--np-accent); flex: 0 0 auto; }
  .sp2-ver-del {
    flex: 0 0 auto; width: 18px; height: 18px; border: none; border-radius: 999px;
    background: rgba(68,87,111,.12); color: var(--np-ink2); cursor: pointer;
    font-size: 13px; line-height: 1; display: none; align-items: center; justify-content: center;
  }
  .sp2-ver-row:hover .sp2-ver-del { display: inline-flex; }
  .sp2-ver-del:hover { background: rgba(190,50,50,.16); color: #a03535; }
  .sp2-ver-add {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 11px; border: none; border-top: 1px solid #efede7; margin-top: 3px;
    background: transparent; color: var(--np-accent); font-weight: 700; font-size: 13px; cursor: pointer;
  }
  .sp2-ver-add .material-icons { font-size: 15px; }
  .sp2-ver-add:disabled { opacity: .5; cursor: default; }

  /* Veroeffentlichen-Knopf: sitzt direkt neben der Versionsauswahl, ohne eigene
     Beschriftung wie Jahr/Monat/Version - deshalb etwas eigener Abstand statt der
     .sp2-strip-lbl-Konvention. Live-Zustand farbig hervorgehoben statt neutral. */
  #publishBtn { margin-left: 12px; }
  #publishBtn.is-live { color: var(--np-accent); border-color: var(--np-accent); background: var(--np-accent-soft); }

  /* ── Objekt · Schicht Zeile ── */
  .sp2-os-row {
    display: flex; align-items: stretch; gap: 0;
    padding: 0 22px 9px; background: var(--np-chrome);
    border-bottom: 1.5px solid var(--np-chrome-line); flex-wrap: wrap;
  }
  /* Objekt und Schicht liegen in einer gemeinsamen Karte, die – wie bisher –
     die volle Breite einnimmt. */
  .sp2-os-card {
    display: flex; align-items: stretch; flex: 1; min-width: 0;
    padding: 6px 14px 8px;
    background: #fff;
    border: 1.5px solid var(--np-chrome-line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 22, 26, .05);
  }
  .sp2-os-block { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .sp2-os-block-grow { flex: 1; }
  .sp2-os-sep { width: 1px; background: #e3e6f0; margin: 2px 16px; flex: 0 0 auto; }

  /* Trennung Menue / Planung: der Schatten geht vom Plan nach oben und laeuft
     unter der Kopfleiste aus – er bleibt im blauen Randstreifen und reicht
     nicht bis an die weissen Karten heran.
     Farbe aus dem Grau der Plankante (--border-strong, #d7d3ca) abgeleitet:
     dieselbe Familie, nur dunkler – kein blauer Grundton. */
  .module-schichtplanung .grid-wrapper {
    box-shadow: 0 -5px 8px -4px rgba(143, 139, 129, .55);
  }
  .sp2-os-ctrl { display: flex; flex: 1; align-items: center; gap: 10px; }

  .sp2-objekt-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: #fff;
    background: var(--np-accent); border: none; border-radius: 7px; padding: 7px 12px;
    letter-spacing: .02em; white-space: nowrap; cursor: pointer;
    box-shadow: 0 1px 3px rgba(31,91,255,.3);
  }
  .sp2-objekt-pin { font-size: 14px; }
  .sp2-chev-on-accent { color: rgba(255,255,255,.85); }
  .sp2-objekt-menu { left: 0; right: auto; min-width: 268px; padding: 0; overflow: hidden; }
  .sp2-objekt-search {
    display: flex; align-items: center; gap: 8px;
    padding: 9px; border-bottom: 1px solid #efede7; background: #faf9f6;
  }
  .sp2-objekt-search .material-icons { font-size: 15px; color: var(--np-ink3); }
  .sp2-objekt-search input {
    border: 1.5px solid var(--np-line); border-radius: 8px; background: #fff;
    outline: none; font-size: 13px; color: var(--np-ink); width: 100%; padding: 7px 10px;
  }
  .sp2-objekt-list { padding: 5px; }
  .sp2-objekt-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--np-accent); flex: 0 0 auto; }
  .sp2-objekt-empty { padding: 10px; text-align: center; color: var(--np-ink3); font-size: 12px; }

  /* SCHICHT-Pills (#toolbar) im neuen Look */
  .sp2-schicht {
    height: auto; flex: 1; padding: 0; background: transparent; border: none; box-shadow: none;
    gap: 9px; align-items: center;
  }
  .sp2-schicht .toolbar-group { gap: 9px; }
  .sp2-schicht .toolbar-label { display: none; }
  .sp2-schicht .shift-btn {
    border-radius: 7px; padding: 4px 13px; font-size: 11px; font-weight: 700;
    border: 1.5px solid transparent; min-width: 48px; text-align: center;
  }
  .sp2-schicht .shift-btn.shift-btn-add {
    border-style: dashed;
    border-color: var(--border-strong, #c7ccd6);
  }
  .sp2-schicht .erase-tool-btn {
    width: 32px; height: 32px; padding: 0; border-radius: 8px;
    background: var(--np-paper2); border: 1.5px solid var(--np-line); color: var(--np-ink3);
  }

  /* ── Legende ── */
  .module-schichtplanung .legend {
    background: var(--np-paper2);
    border-top: 1.5px solid var(--np-line);
    padding: 11px 22px; gap: 8px 18px; box-shadow: none;
  }
  .module-schichtplanung .leg-item {
    border: none; background: transparent; box-shadow: none; padding: 0;
    font-size: 12px; color: var(--np-ink2); font-weight: 500;
  }
  .module-schichtplanung .leg-dot { width: 9px; height: 9px; border-radius: 50%; }

  /* ─── Personalakte: Fenster mit Registern ────────────────────────────────── */

  .emp-detail-modal { width: 820px; max-width: calc(100vw - 28px); }

  .emp-tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--border-strong);
  }

  .emp-tab {
    border: none;
    background: none;
    font: inherit;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--text3);
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }

  .emp-tab:hover:not(:disabled) { color: var(--text); }
  .emp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .emp-tab:disabled { opacity: .4; cursor: not-allowed; }

  /* Feste Hoehe statt min/max: sonst springt das Fenster beim Registerwechsel
     zwischen kurzem Personenblatt und langer Jahresuebersicht. Lange Register
     scrollen innerhalb dieses Bereichs. */
  .emp-tab-body {
    height: min(60vh, 520px);
    overflow: auto;
    padding-right: 4px;
  }
  .emp-tab-panel { display: none; }
  .emp-tab-panel.active { display: block; }

  /* Persoenliche Daten */
  .emp-person { display: flex; gap: 24px; align-items: flex-start; }

  .emp-photo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 132px;
    flex: none;
  }

  .emp-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 34px;
    font-weight: var(--font-weight-bold);
    border: 3px solid var(--bg-surface);
    box-shadow: 0 0 0 1px var(--border-strong);
  }

  .emp-photo-btn { width: 100%; justify-content: center; }
  .emp-photo-hint {
    font-size: var(--font-size-0);
    color: var(--text3);
    text-align: center;
    line-height: 1.35;
  }

  .emp-person-fields {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }

  .emp-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .emp-field-wide { grid-column: 1 / -1; }

  .modal .emp-field > input,
  .modal .emp-field > select {
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    padding: 7px 9px;
    width: 100%;
  }

  .modal .emp-field > input:focus,
  .modal .emp-field > select:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
  }

  /* Abwesenheiten */
  .absence-top {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 14px;
  }

  .vac-card {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 14px 16px;
  }

  .vac-card + .vac-card { margin-top: 14px; }

  .vac-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .vac-card-head h4 {
    margin: 0;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-bold);
    color: var(--text);
  }

  .vac-add-btn {
    border: none;
    background: none;
    font: inherit;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    cursor: pointer;
    padding: 0;
  }

  .vac-add-btn:hover { text-decoration: underline; }

  .vac-ring-wrap { display: flex; align-items: center; gap: 18px; }
  .vac-ring-box { position: relative; width: 128px; height: 128px; flex: none; }
  .vac-ring { width: 128px; height: 128px; transform: rotate(-90deg); }

  .vac-ring-track {
    fill: none;
    stroke: var(--bg-surface-alt);
    stroke-width: 14;
  }

  .vac-ring-seg {
    fill: none;
    stroke-width: 14;
    /* 2px Fuge zwischen den Segmenten, damit die Grenzen lesbar bleiben */
    stroke-linecap: butt;
  }

  .vac-ring-seg.is-taken { stroke: #1f5bff; }
  .vac-ring-seg.is-planned { stroke: #93b0ff; }
  .vac-ring-seg.is-available { stroke: #e6e3dc; }

  .vac-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .vac-ring-value {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--text);
    line-height: 1;
  }

  .vac-ring-label {
    font-size: var(--font-size-0);
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 3px;
  }

  .vac-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

  .vac-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-1);
    color: var(--text2);
  }

  .vac-legend b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

  .vac-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .vac-dot.is-taken { background: #1f5bff; }
  .vac-dot.is-planned { background: #93b0ff; }
  .vac-dot.is-available { background: #e6e3dc; }

  .vac-stats { display: flex; flex-direction: column; gap: 0; }

  .vac-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-1);
    color: var(--text2);
  }

  .vac-stat:last-child { border-bottom: none; }
  .vac-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }

  .vac-stat.is-highlight {
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    padding-left: 10px;
    padding-right: 10px;
    color: var(--accent);
  }

  .vac-stat.is-highlight strong { color: var(--accent); }

  .modal .vac-stat.is-input > input {
    width: 92px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    font: inherit;
    font-size: var(--font-size-1);
    color: var(--text);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Jahresuebersicht */
  .year-grid { display: grid; gap: 3px; }
  .year-row { display: flex; align-items: center; gap: 3px; }

  .year-row-label {
    width: 34px;
    flex: none;
    font-size: var(--font-size-0);
    color: var(--text3);
    text-transform: uppercase;
  }

  .year-cell {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 4px;
    background: var(--bg-surface-alt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    line-height: 1;
  }

  .year-cell.is-empty { background: transparent; }
  .year-cell.is-workday { background: #eceae4; }
  .year-cell.is-weekend { background: #f6f5f1; }
  .year-cell.is-vacation { background: #1f5bff; }
  .year-cell.is-sick { background: #dc2626; }
  .year-cell.is-other { background: #7c3aed; }
  .year-cell.is-holiday { background: #f59e0b; color: #3d2b00; }

  .year-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .year-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-0);
    color: var(--text2);
  }

  /* Liste der Eintraege */
  .absence-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1.4fr) minmax(0, 1fr) 76px 26px 26px;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-1);
  }

  .absence-row:last-child { border-bottom: none; }
  .absence-range { color: var(--text); font-weight: var(--font-weight-bold); }
  .absence-kind { color: var(--text2); }
  .absence-days { color: var(--text2); text-align: right; font-variant-numeric: tabular-nums; }

  .absence-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-bold);
    color: #fff;
  }

  .absence-badge.is-vacation { background: #1f5bff; }
  .absence-badge.is-sick { background: #dc2626; }
  .absence-badge.is-other { background: #7c3aed; }

  .absence-empty {
    padding: 16px 10px;
    text-align: center;
    font-size: var(--font-size-1);
    color: var(--text3);
  }

  .absence-form { display: grid; gap: 12px; margin-bottom: 16px; }
  .absence-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .absence-days-hint {
    font-size: var(--font-size-1);
    color: var(--text2);
    background: var(--bg-surface-alt);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
  }

  /* Dokumente: vorerst nur das Geruest */
  .emp-docs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    font-size: var(--font-size-1);
    color: var(--text2);
  }

  .emp-docs-empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 32px 16px;
    text-align: center;
    font-size: var(--font-size-1);
    color: var(--text3);
  }

  /* Abwesenheit im Plan: ueberdeckt die Zelle. Farbe allein traegt die Bedeutung
     nicht - in der Zelle steht zusaetzlich Kuerzel und Klartext. */
  .shift-cell.absence-cell {
    color: #fff;
    font-weight: var(--font-weight-bold);
  }

  .shift-cell.absence-vacation { background: #1f5bff !important; }
  .shift-cell.absence-sick { background: #dc2626 !important; }
  .shift-cell.absence-other { background: #7c3aed !important; }

  .absence-body { align-items: center; justify-content: center; }

  .absence-cell-text {
    font-size: var(--font-size-0);
    font-weight: 500;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Systemschichten im Editor: nicht loeschbar, nicht verschiebbar. */
  .system-shift-group { border-color: var(--border-strong); }

  .shift-editor-group-name.is-static { cursor: default; }

  .system-shift-note {
    margin-left: auto;
    font-size: var(--font-size-1);
    color: var(--text3);
    text-transform: none;
    letter-spacing: 0;
  }

  .shift-row-handle.is-locked,
  .shift-row-remove.is-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    opacity: .45;
    cursor: default;
  }

  .shift-row-handle.is-locked .material-icons { font-size: var(--font-size-2); }

  .system-shift-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-size: var(--font-size-1);
  }