.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;
  }

  .shift-objekt-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    letter-spacing: .2px;
    text-transform: uppercase;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0,0,0,.1);
    pointer-events: none;
  }

  .shift-cell-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 0;
    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);
  }

  .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;
    opacity: .9;
    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;
  }

  .shift-time-icon {
    font-size: 14px;
    opacity: .85;
  }

  /* 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). Loest den frueheren
     blauen Balken am unteren Rand ab: der lag direkt an der Zeitangabe und wirkte dort
     stoerend. Die Pfeilvariante zeigt zugleich, ob die Schicht laenger oder kuerzer wurde. */
  .shift-cell .shift-override-mark {
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 4;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.55);
    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: 20px;
  }

  /* Oben rechts, spiegelbildlich zu .shift-undef-mark (oben links) - unten wuerde es mit
     der Zeitangabe und dem Balken von .time-overridden ins Gehege kommen. Der dunkle
     Schein statt eines hellen: Gelb auf hellen Schichtfarben braucht die Abgrenzung nach
     aussen, sonst verschwindet es.
     `.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: 2px;
    right: 3px;
    z-index: 4;
    font-size: 17px;
    line-height: 1;
    color: var(--signal-amber, #f59e0b);
    text-shadow: 0 0 2px rgba(0,0,0,.65), 0 0 5px rgba(0,0,0,.4);
    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. */
  .shift-cell .shift-unseen-mark {
    position: absolute;
    bottom: 3px;
    left: 4px;
    z-index: 4;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.35);
    pointer-events: none;
  }

  .shift-cell .shift-postpublish-mark {
    position: absolute;
    bottom: 3px;
    right: 4px;
    z-index: 4;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a78bfa;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.35);
    pointer-events: 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;
  }

  .shift-undef-mark {
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 3;
    font-size: var(--font-size-2);
    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 {
    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 24px 24px;
  }

  .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) 28px 28px;
  }

  #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) - breiter, weil die Spalten sonst zu eng aneinander gequetscht sind.
     900px seit der Position-Spalte (vorher 760px), damit die Bezeichnung-Spalte
     trotz der zusaetzlichen Spalte genug Platz behaelt. */
  #shiftModal.modal-overlay .shift-modal {
    width: 900px;
  }

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

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

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

  .shift-modal.single-edit .shift-editor-hint {
    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: help;
  }

  .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; }

  .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);
  }