*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f0f2f5; color: #1a1d2e; height: 100vh; display: flex; flex-direction: column; }
input, select, textarea, button { font-family: inherit; }

/* ── Header ── */
#header { background: linear-gradient(135deg,#ffffff 0%,#f0f2f5 100%); border-bottom: 1px solid #d0d4de; padding: 0 20px; flex-shrink: 0; }
#header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 10px; }
#logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#logo-icon { width: 34px; height: 34px; background: linear-gradient(135deg,#4f8ef7,#c44ff7); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
#logo-title { font-weight: 300; font-size: 20px; letter-spacing: -0.5px; color: #1a1d2e; }
#logo-sub { font-size: 10px; color: #8892a4; letter-spacing: 0.4px; margin-top: 1px; }
#view-tabs { display: flex; gap: 5px; }
.tab-btn { padding: 5px 13px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; background: #e2e6f0; color: #5a6070; transition: all 0.15s; }
.tab-btn.active { background: #4f8ef7; color: #fff; }
#header-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; position: relative; }
.hdr-btn { background: #e2e6f0; border: 1px solid #c8ccd8; color: #5a6070; padding: 7px 11px; border-radius: 8px; cursor: pointer; font-size: 15px; transition: background 0.15s; }
.hdr-btn:hover { background: #d4d8e8; }
#new-btn { background: linear-gradient(135deg,#4f8ef7,#6a5acd); color: #fff; border: none; padding: 8px 16px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 13px; box-shadow: 0 4px 14px rgba(79,142,247,0.3); white-space: nowrap; }
#save-badge { border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 600; display: none; }
#sync-badge { display:none; position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#e63946; color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; }
#sync-badge.has { display:inline-block; }
#fehlende-badge { display:none; position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#f4a261; color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; }
#fehlende-badge.has { display:inline-block; }
#stempel-badge { display:none; position:absolute; top:4px; right:4px; width:10px; height:10px; border-radius:50%; border:2px solid #fff; }
#stempel-badge.aktiv { display:block; background:#4fc58e; }
#stempel-badge.fehlt { display:block; background:#f7c44f; }
.pause-chip { background:#e2e6f0; border:1px solid #c8ccd8; border-radius:6px; padding:3px 8px; font-size:12px; cursor:pointer; font-family:inherit; color:#48506a; }
.pause-chip:hover { background:#d4d8e8; }
.pause-chip.selected { background:#4f8ef7; border-color:#4f8ef7; color:#fff; }
.sz-std-chip { background:#e2e6f0; border:1px solid #c8ccd8; border-radius:6px; padding:4px 10px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; color:#48506a; }
.sz-std-chip:hover { background:#d4d8e8; }
.sz-std-chip.selected { background:#4f8ef7; border-color:#4f8ef7; color:#fff; }
.sz-var-btn { flex:1; background:none; border:none; border-radius:6px; padding:6px 4px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; color:#5a6070; transition:all 0.15s; }
.sz-var-btn.active { background:#fff; color:#1a1d2e; box-shadow:0 1px 4px rgba(0,0,0,0.12); }
.sz-tag-zeile { display:flex; align-items:center; padding:6px 10px; border-bottom:1px solid #f0f2f5; font-size:12px; gap:8px; }
.sz-tag-zeile:last-child { border-bottom:none; }
.sz-tag-datum { width:90px; flex-shrink:0; font-weight:500; }
.sz-tag-inhalt { display:flex; align-items:center; gap:8px; flex:1; flex-wrap:wrap; }
.sz-kw-summe { background:#f5f6fa; padding:4px 10px; font-size:11px; font-weight:700; color:#6b7080; border-bottom:1px solid #e2e6f0; }

/* ── Fehlende Berichte (Seite) ── */
.fb-bulkbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #d0d4de; border-radius:10px; padding:8px 12px; }
.fb-row { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e2e6f0; border-radius:10px; padding:11px 14px; margin-bottom:8px; }
.fb-check { display:flex; align-items:center; flex-shrink:0; cursor:pointer; }
.fb-check input { width:17px; height:17px; accent-color:#4f8ef7; cursor:pointer; }
.fb-main { flex:1; min-width:0; cursor:pointer; }
.fb-title { font-weight:600; font-size:13px; color:#1a1d2e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-meta { font-size:11px; color:#6b7080; margin-top:3px; }
.fb-ma { display:flex; align-items:center; gap:7px; font-size:12px; color:#48506a; flex-shrink:0; white-space:nowrap; }
.fb-btn { font-size:12px; padding:7px 12px; flex-shrink:0; white-space:nowrap; }
#push-banner { display:none; align-items:center; gap:12px; background:#eef2fb; border-bottom:1px solid #c8d4f0; padding:10px 20px; font-size:13px; color:#2a3550; }
#push-banner.show { display:flex; }
#push-banner button { border:none; border-radius:7px; padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }

/* ── Filter bar ── */
#filterbar { background: #ffffff; border-bottom: 1px solid #d0d4de; padding: 8px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
.filter-label { font-size: 11px; color: #6b7080; text-transform: uppercase; letter-spacing: 0.5px; }
select.fsel { background: #f0f2f5; border: 1px solid #c8ccd8; color: #2a2d3e; padding: 5px 9px; border-radius: 7px; font-size: 12px; cursor: pointer; outline: none; }
#filter-reset { background: #dde0ea; border: none; color: #5a6070; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; display: none; }
#termin-count { margin-left: auto; font-size: 12px; color: #6b7080; }
#range-toggle { display: flex; gap: 4px; background: #e2e6f0; border-radius: 8px; padding: 3px; }
.range-btn { padding: 4px 11px; border-radius: 6px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: #5a6070; background: none; transition: all 0.15s; }
.range-btn.active { background: #4f8ef7; color: #fff; }

/* ── Main ── */
#main { padding: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
#week-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.nav-btn { background: #e2e6f0; border: 1px solid #c8ccd8; color: #5a6070; padding: 6px 13px; border-radius: 7px; cursor: pointer; font-size: 13px; }
#today-btn { color: #4f8ef7; font-weight: 600; }
#week-label { color: #8892a4; font-size: 13px; }

/* ── Plan grid ── */
#plan-wrap { overflow-x: auto; }
#plan-grid { display: grid; min-width: 700px; }
.pg-ma-header { background: #ffffff; border-radius: 10px 0 0 0; border: 1px solid #d0d4de; border-right: none; padding: 8px 12px; font-size: 11px; color: #6b7080; display: flex; align-items: center; }
.pg-days-header { display: grid; border-radius: 0 10px 0 0; border: 1px solid #1e2130; overflow: hidden; }
.day-hdr { padding: 8px 6px; text-align: center; font-size: 12px; font-weight: 600; background: #ffffff; color: #8892a4; border-right: 1px solid #d0d4de; }
.day-hdr:last-child { border-right: none; }
.day-hdr.today { background: #e8f0ff; color: #3a7ef7; }
.day-hdr.feiertag { background: #fff3e8; color: #c8721a; }
.day-cell.feiertag-col { background: #fff8ee !important; }
.day-cell.feiertag-col:hover { background: #fff0dd !important; }
.feiertag-label { font-size: 9px; color: #f4a261; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; letter-spacing: 0.2px; }
.ma-label { background: #ffffff; border: 1px solid #d0d4de; border-top: none; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.ma-label.last { border-radius: 0 0 0 10px; }
.ma-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; border-width: 2px; border-style: solid; }
.ma-name-txt { font-size: 12px; font-weight: 500; color: #2a3040; }
.ma-days-row { display: grid; border: 1px solid #d0d4de; border-top: none; min-height: 72px; }
.day-cell { border-right: 1px solid #d0d4de; padding: 5px; background: transparent; cursor: pointer; min-height: 68px; transition: background 0.1s; position: relative; }
.day-cell:last-child { border-right: none; }
.day-cell:hover { background: #e8ecf5 !important; }
.day-cell.today-col { background: #dce8ff; }
.day-cell.drag-over { background: #d0e4ff !important; outline: 2px dashed #4f8ef7; outline-offset: -2px; }
.chip { border-radius: 5px; padding: 3px 6px; margin-bottom: 3px; font-size: 10px; cursor: pointer; border-left-width: 3px; border-left-style: solid; transition: transform 0.1s; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.chip:hover { transform: translateX(2px); }
.chip-title { font-weight: 600; color: #1a1d2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-time { color: #5a6070; font-size: 10px; }
.chip[draggable="true"] { cursor: grab; }
.chip[draggable="true"]:active { cursor: grabbing; opacity: 0.7; }
/* Abwesenheiten in der Wochenansicht */
.absence-label { font-size: 10px; font-weight: 700; padding: 2px 6px; margin-bottom: 3px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; letter-spacing: 0.2px; }
.absence-chip { border-radius: 5px; padding: 3px 6px; margin-bottom: 3px; font-size: 10px; cursor: pointer; border-left-width: 3px; border-left-style: solid; }
.absence-label.pending, .absence-chip.pending { border-style: dashed; opacity: 0.85; }

/* ── Evidenz ── */
#evidenz-section { flex-shrink: 0; border-top: 2px solid #d0d4de; background: #f5f6fa; }
#evidenz-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 8px; cursor: pointer; user-select: none; }
#evidenz-title { font-size: 13px; font-weight: 700; color: #8892a4; display: flex; align-items: center; gap: 8px; }
#evidenz-title span.badge { background: #4f8ef722; border: 1px solid #4f8ef755; color: #4f8ef7; border-radius: 5px; padding: 2px 7px; font-size: 11px; }
#evidenz-toggle-icon { color: #6b7080; font-size: 12px; transition: transform 0.2s; }
#evidenz-toggle-icon.open { transform: rotate(180deg); }
#evidenz-body { padding: 0 20px 12px; display: flex; gap: 10px; flex-wrap: wrap; overflow-y: auto; max-height: 160px; }
#evidenz-body.hidden { display: none; }
.ev-chip { background: #ffffff; border: 1px solid #d0d4de; border-radius: 8px; padding: 7px 10px; cursor: grab; min-width: 160px; max-width: 220px; transition: all 0.15s; user-select: none; }
.ev-chip:hover { border-color: #4f8ef7; background: #e8f0ff; }
.ev-chip:active { cursor: grabbing; opacity: 0.7; }
.ev-chip-date { font-size: 10px; color: #6b7080; margin-bottom: 2px; }
.ev-chip-title { font-size: 12px; font-weight: 600; color: #1a1d2e; }
.ev-chip-time { font-size: 10px; color: #8892a4; }
.ev-chip-proj { font-size: 10px; font-weight: 600; margin-top: 3px; }
#evidenz-empty { color: #6b7080; font-size: 13px; padding: 8px 0; }

/* ── Liste ── */
.ma-badge { display: flex; align-items: center; gap: 6px; }
.proj-tag { border-radius: 5px; padding: 2px 9px; font-size: 11px; font-weight: 600; }

/* ── Projekte ── */
#projekte-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 14px; }
.proj-card { border-radius: 12px; overflow: hidden; cursor: grab; transition: transform 0.4s ease-in, opacity 0.35s ease-in; }
.proj-card:active { cursor: grabbing; }
.pc-header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.pc-body { padding: 10px; }
.pc-termin { padding: 8px 9px; border-radius: 7px; margin-bottom: 5px; background: #f5f6fa; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.1s; }
.pc-termin:hover { background: #e8ecf5; }
.add-proj-termin { width: 100%; background: none; border-radius: 7px; color: #6b7080; padding: 6px; cursor: pointer; font-size: 11px; margin-top: 3px; border-style: dashed; border-width: 1px; }
#archiv-btn { display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:2px dashed #c8ccd8;background:#f5f6fa;color:#5a6070;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;transition:all 0.2s;white-space:nowrap; }
#archiv-btn:hover { border-color:#4f8ef7;background:#f0f5ff;color:#4f8ef7; }
#proj-add-btn { display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:none;background:#4f8ef7;color:#fff;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;white-space:nowrap; }
#proj-add-btn:hover { background:#3d7ce6; }
#archiv-btn.drag-over { border-color:#f7764f;background:#fff4f0;color:#f7764f;transform:scale(1.07);box-shadow:0 0 0 4px #f7764f22; }
.regie-card { display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e2e6f0;border-radius:10px;padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:background 0.1s,border-color 0.1s; }
.regie-card:hover { background:#f8faff; border-color:#c8d4ee; }
#rb-trash-zone.armed { border-color:#f7764f; color:#f7764f; background:#fff8f5; }
#rb-trash-zone.drag-over { border-color:#e0432f; background:#fdeeec; color:#e0432f; box-shadow:0 0 0 4px #e0432f22; }
#projektarchiv-view { display:none;position:fixed;inset:0;background:#f5f6fa;z-index:800;overflow-y:auto; }
#pa-toolbar { position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px 24px;background:#1a1d2e;border-bottom:2px solid #2d3045; }
.pa-item { display:flex;align-items:center;gap:14px;padding:14px 20px;background:#fff;border-radius:10px;margin-bottom:8px;border:1px solid #e2e6f0;box-shadow:0 1px 3px rgba(0,0,0,0.05); }
.pa-dot { width:12px;height:12px;border-radius:50%;flex-shrink:0; }

/* ── Modal ── */
#overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); }
#overlay.open { display: flex; }
.modal { background: #ffffff; border: 1px solid #d0d4de; border-radius: 14px; padding: 24px; max-width: 500px; width: 92vw; max-height: 92vh; overflow-y: auto; }
.modal h3 { font-size: 17px; font-weight: 700; }
/* Verwaltung: auf dem Desktop große, seitenfüllende Darstellung (mehr Platz für Tabs/Export) */
.modal-admin { max-width: 1000px; width: min(1000px, 95vw); height: 90vh; max-height: 90vh; }
.mhdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.xbtn { background: none; border: none; color: #6b7080; font-size: 17px; cursor: pointer; }
.flabel { display: block; font-size: 11px; color: #6b7080; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px; }
.finput { width: 100%; background: #f5f6fa; border: 1px solid #c8ccd8; color: #1a1d2e; padding: 8px 11px; border-radius: 7px; font-size: 13px; outline: none; }
.finput:focus { border-color: #4f8ef7; }
.fgroup { margin-bottom: 12px; }
.frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.btn { border: none; color: #fff; padding: 9px 16px; border-radius: 9px; font-weight: 600; cursor: pointer; font-size: 13px; }
.btn-primary { background: linear-gradient(135deg,#4f8ef7,#6a5acd); box-shadow: 0 4px 14px rgba(79,142,247,0.3); }
.btn-secondary { background: #e2e6f0; color: #5a6070; }
.btn-danger { background: #e63946; }
.btn-blue { background: #4f8ef7; }
.mactions { display: flex; gap: 7px; margin-top: 18px; }
.drow { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.dicon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.dlabel { font-size: 10px; color: #6b7080; margin-bottom: 2px; }
.dval { font-size: 13px; color: #1a1d2e; }

/* Settings */
.stabs { display: flex; gap: 5px; margin-bottom: 16px; }
.stab { padding: 6px 14px; border-radius: 7px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; background: #e2e6f0; color: #5a6070; }
.stab.active { background: #4f8ef7; color: #fff; }
.slist { display: flex; flex-direction: column; gap: 7px; max-height: 340px; overflow-y: auto; }
.srow { display: flex; align-items: center; gap: 9px; background: #f0f2f5; border-radius: 9px; padding: 9px 11px; }
.cswatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; border-width: 2px; border-style: solid; position: relative; }
.cswatch-sq { border-radius: 7px; }
.chidden { position: absolute; opacity: 0; width: 0; height: 0; }
.sinput { flex: 1; background: #f5f6fa; border: 1px solid #c8ccd8; color: #1a1d2e; padding: 6px 9px; border-radius: 7px; font-size: 13px; outline: none; }
.sinput:focus { border-color: #4f8ef7; }
.sdel { background: rgba(230,57,70,.13); border: 1px solid rgba(230,57,70,.33); color: #e63946; border-radius: 6px; padding: 5px 9px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.sadd { background: none; border: 1px dashed #2a2d3e; border-radius: 9px; color: #6b7080; padding: 9px; cursor: pointer; font-size: 12px; margin-top: 3px; width: 100%; }
.hint { font-size: 11px; color: #6b7080; margin-top: 5px; }

/* Meilensteine */
#ms-table tbody tr { border-bottom: 1px solid #e8eaf0; transition: background 0.1s; cursor: pointer; }
#ms-table tbody tr:last-child { border-bottom: none; }
#ms-table tbody tr:hover { background: #eef0f7 !important; }
#ms-table tbody tr.proj-header-row { background: #f5f6fa; cursor: default; }
#ms-table tbody tr.proj-header-row:hover { background: #eef0f7 !important; }
.ms-status { border-radius: 5px; padding: 2px 8px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ms-status.abgeschlossen { background: #4fc58e22; border: 1px solid #4fc58e55; color: #2a9d6a; }
.ms-status.laufend { background: #4f8ef722; border: 1px solid #4f8ef755; color: #2a6ec8; }
.ms-status.offen { background: #e8eaf0; border: 1px solid #c8ccd8; color: #5a6070; }
.ms-status.ueberfaellig { background: #e6394622; border: 1px solid #e6394655; color: #c0202e; }
.ms-th:hover { color: #1a1d2e !important; background: #e8ecf5; }
.ms-th.sort-asc .ms-sort-icon::after { content: " ▲"; font-size: 9px; color: #4f8ef7; }
.ms-th.sort-desc .ms-sort-icon::after { content: " ▼"; font-size: 9px; color: #4f8ef7; }
.ms-th .ms-sort-icon::after { content: " ⇅"; font-size: 9px; color: #3a3d4e; }
#empty-msg { color: #6b7080; text-align: center; padding: 36px; }

/* ── Meilenstein-Trenner in Projektübersicht ── */
.ms-separator { display: flex; align-items: center; padding: 6px 10px; margin: 3px 0; }
.ms-separator-line { flex: 1; height: 1.5px; background: #e8eaf0; }
.ms-separator-badge { display: flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 600; border: 1.5px solid; white-space: nowrap; cursor: default; user-select: none; }
.ms-separator-badge.in_planung { background: #fffbf0; border-color: #f7c44f; color: #b87c00; }
.ms-separator-badge.fix        { background: #f0f5ff; border-color: #4f8ef7; color: #1a5cb8; }
.ms-separator-badge.erledigt   { background: #f0fdf7; border-color: #4fc58e; color: #1a7a4a; }
.ms-separator-badge.nicht_erledigt { background: #f5f6fa; border-color: #c8ccd8; color: #555e70; }
.ms-separator-badge.ueberfaellig { background: #fff5f5; border-color: #e63946; color: #c0202e; }
.ms-sep-edit { background: none; border: none; cursor: pointer; font-size: 11px; opacity: 0.6; padding: 1px 3px; margin-left: 2px; }
.ms-sep-edit:hover { opacity: 1; }

/* ── Echte Meilensteine — Übersichtszeilen ── */
.proj-group { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.07); overflow: hidden; }
.proj-group-header { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f1f5; }
.ms-row { display: grid; grid-template-columns: 28px 1fr auto auto; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #f5f6fa; transition: background .12s; }
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { background: #f9fafb; }
.ms-row.ueberfaellig { background: #fff8f8; }
.ms-row.ueberfaellig:hover { background: #ffe8e8; }
.ms-diamond { font-size: 15px; text-align: center; }
.ms-diamond.in_planung { color: #f7a800; }
.ms-diamond.fix        { color: #4f8ef7; }
.ms-diamond.erledigt   { color: #4fc58e; }
.ms-diamond.nicht_erledigt { color: #aab0bc; }
.ms-diamond.ueberfaellig   { color: #e63946; }
.ms-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.ms-badge.in_planung { background: #fffbf0; border-color: #f7c44f88; color: #b87c00; }
.ms-badge.fix        { background: #f0f5ff; border-color: #4f8ef788; color: #1a5cb8; }
.ms-badge.erledigt   { background: #f0fdf7; border-color: #4fc58e88; color: #1a7a4a; }
.ms-badge.nicht_erledigt { background: #f5f6fa; border-color: #c8ccd8; color: #555e70; }
.ms-badge.ueberfaellig   { background: #fff5f5; border-color: #e6394688; color: #c0202e; }

/* ── Login Screen ── */
#login-screen { position: fixed; inset: 0; background: linear-gradient(135deg, #0f1117 0%, #1a1d2e 50%, #0d1526 100%); display: flex; align-items: center; justify-content: center; z-index: 9000; }
#login-screen.hidden { display: none; }
.login-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; padding: 40px 44px; width: 100%; max-width: 420px; backdrop-filter: blur(20px); box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 32px; }
.login-logo img { height: 52px; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.login-logo-text { color: #ffffff; font-weight: 300; font-size: 20px; letter-spacing: -0.3px; }
.login-logo-sub { font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.5px; margin-top: 1px; }
.login-title { font-size: 22px; font-weight: 700; color: #ffffff; margin-bottom: 6px; }
.login-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 28px; line-height: 1.5; }
.login-label { display: block; font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.login-input { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: #ffffff; padding: 11px 14px; border-radius: 10px; font-size: 14px; outline: none; transition: border-color 0.2s; margin-bottom: 14px; font-family: inherit; }
.login-input:focus { border-color: #4f8ef7; background: rgba(79,142,247,0.08); }
.login-input::placeholder { color: rgba(255,255,255,0.25); }
.login-btn { width: 100%; background: linear-gradient(135deg,#4f8ef7,#6a5acd); color: #fff; border: none; padding: 13px; border-radius: 11px; font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 6px; transition: opacity 0.2s, transform 0.1s; letter-spacing: 0.2px; font-family: inherit; }
.login-btn:hover { opacity: 0.92; }
.login-btn:active { transform: scale(0.99); }
.login-btn.passkey-btn { background: linear-gradient(135deg,#1a56db,#4f8ef7); }
.login-link-btn { background: none; border: none; color: rgba(255,255,255,0.45); font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0; }
.login-link-btn:hover { color: rgba(255,255,255,0.7); }
.login-error { background: rgba(230,57,70,0.15); border: 1px solid rgba(230,57,70,0.35); color: #ff7b85; border-radius: 8px; padding: 9px 12px; font-size: 12px; margin-bottom: 14px; display: none; }
.login-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 28px 0; }
.login-footer { font-size: 11px; color: rgba(255,255,255,0.25); text-align: center; line-height: 1.6; }

/* ── User Badge im Header ── */
#user-badge { display: flex; align-items: center; gap: 8px; background: rgba(79,142,247,0.1); border: 1px solid rgba(79,142,247,0.25); border-radius: 9px; padding: 5px 10px; cursor: pointer; position: relative; }
#user-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid #d0d4de; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 600; min-width: 160px; overflow: hidden; }
#user-dropdown.open { display: block; }
#user-dropdown button { display: block; width: 100%; padding: 12px 16px; text-align: left; background: none; border: none; cursor: pointer; font-size: 13px; font-family: inherit; color: #e63946; font-weight: 600; }
#user-dropdown button:hover { background: #fff5f5; }
#user-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
#user-name { font-size: 12px; font-weight: 600; color: #2a3040; }
#user-rolle { font-size: 10px; color: #8892a4; }
#logout-btn { background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.25); color: #e63946; padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 600; transition: background 0.15s; }
#logout-btn:hover { background: rgba(230,57,70,0.2); }
#mobile-menu { display: none; }
#burger-btn { display: none; }

/* ── Bericht Indikator am Chip ── */
.chip-wrap { position: relative; }
.bericht-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; cursor: pointer; z-index: 1; flex-shrink: 0; }
.bericht-dot.offen        { background: #8892a4; }
.bericht-dot.erledigt     { background: #4fc58e; }
.bericht-dot.weiterer_termin { background: #f7c44f; }
.bericht-dot.problem      { background: #e63946; }

/* Tooltip */
/* Termin-Vorschau beim Hover über einen Chip in der Wochenansicht */
.termin-tooltip { position: fixed; background: #1a1d2e; border: 1px solid #2e3347; border-radius: 10px; padding: 11px 13px; max-width: 300px; z-index: 5000; pointer-events: none; opacity: 0; transition: opacity 0.12s; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.termin-tooltip.visible { opacity: 1; }
.termin-tooltip .tt-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.termin-tooltip .tt-row { font-size: 11px; color: rgba(255,255,255,0.78); line-height: 1.5; display: flex; gap: 6px; align-items: flex-start; }
.termin-tooltip .tt-row .tt-ico { flex-shrink: 0; }
.termin-tooltip .tt-todos { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2e3347; }
.termin-tooltip .tt-todo { font-size: 11px; color: rgba(255,255,255,0.78); line-height: 1.5; }
.termin-tooltip .tt-todo.done { color: rgba(255,255,255,0.4); text-decoration: line-through; }

/* ── Bericht View (Vollbild-Overlay) ── */
#bericht-view { position: fixed; inset: 0; background: #f0f2f5; z-index: 2000; display: none; flex-direction: column; }
#bericht-view.open { display: flex; }
#bericht-header { background: linear-gradient(135deg,#1a1d2e,#2e3347); padding: 16px 24px; display: flex; align-items: center; gap: 14px; }
#bericht-back { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: background 0.15s; }
#bericht-back:hover { background: rgba(255,255,255,0.18); }
#bericht-header-title { color: #fff; font-size: 16px; font-weight: 700; flex: 1; }
#bericht-header-sub { color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 2px; }
#bericht-body { flex: 1; overflow-y: auto; padding: 24px; max-width: 720px; width: 100%; margin: 0 auto; }
.bericht-termin-card { background: #fff; border: 1px solid #d0d4de; border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
.bericht-form-card { background: #fff; border: 1px solid #d0d4de; border-radius: 12px; padding: 20px; }
.bericht-form-title { font-size: 13px; font-weight: 700; color: #1a1d2e; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.4px; }
.status-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-bottom: 16px; }
.status-option { border: 2px solid #d0d4de; border-radius: 9px; padding: 11px 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 9px; }
.status-option:hover { border-color: #4f8ef7; background: #f0f6ff; }
.status-option.selected { border-color: currentColor; }
.status-option.selected.offen        { border-color: #8892a4; background: #f5f6fa; }
.status-option.selected.erledigt     { border-color: #4fc58e; background: #f0fdf7; }
.status-option.selected.weiterer_termin { border-color: #f7c44f; background: #fffbf0; }
.status-option.selected.problem      { border-color: #e63946; background: #fff5f5; }
.status-dot-lg { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-dot-lg.offen           { background: #8892a4; }
.status-dot-lg.erledigt        { background: #4fc58e; }
.status-dot-lg.weiterer_termin { background: #f7c44f; }
.status-dot-lg.problem         { background: #e63946; }
.status-label { font-size: 13px; font-weight: 600; }
.bericht-textarea { width: 100%; background: #f5f6fa; border: 1px solid #c8ccd8; color: #1a1d2e; padding: 11px 13px; border-radius: 9px; font-size: 13px; font-family: inherit; outline: none; resize: vertical; min-height: 100px; transition: border-color 0.15s; }
.bericht-textarea:focus { border-color: #4f8ef7; }
.bericht-charcount { font-size: 11px; color: #8892a4; text-align: right; margin-top: 4px; }
.bericht-save-btn { width: 100%; background: linear-gradient(135deg,#4f8ef7,#6a5acd); color: #fff; border: none; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 14px; font-family: inherit; transition: opacity 0.2s; }
.bericht-save-btn:hover { opacity: 0.9; }
.std-step { width: 46px; height: 46px; border-radius: 12px; border: 1px solid #c8ccd8; background: #f0f2f5; color: #4f8ef7; font-size: 18px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background 0.12s; }
.std-step:hover { background: #e2e6f0; }
.std-step:active { background: #d4d8e8; }
.sig-pad { width: 100%; height: 120px; border: 1px dashed #b8c0d0; border-radius: 8px; background: #fff; touch-action: none; display: block; }
.bericht-readonly-note { font-size: 12px; color: #8892a4; background: #f5f6fa; border-radius: 8px; padding: 10px 13px; margin-top: 14px; border: 1px solid #e2e6f0; }

/* ── Projektbericht ── */
#projektbericht-view { position:fixed; inset:0; background:#fff; z-index:3000; display:none; flex-direction:column; }
#projektbericht-view.open { display:flex; }
#pb-toolbar { background:#1a1d2e; padding:12px 24px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
#pb-content { flex:1; overflow-y:auto; padding:40px; max-width:900px; width:100%; margin:0 auto; }
.pb-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; padding-bottom:20px; border-bottom:2px solid #1a1d2e; }
.pb-logo { height:36px; width:auto; }
.pb-meta { text-align:right; font-size:11px; color:#6b7080; line-height:1.7; }
.pb-projekt-name { font-size:26px; font-weight:700; margin:4px 0 6px; }
.pb-projekt-bar { height:4px; border-radius:2px; width:60px; }
.pb-stats { display:flex; gap:28px; margin-bottom:28px; padding:16px 20px; background:#f5f6fa; border-radius:10px; }
.pb-stat-num { font-size:22px; font-weight:700; color:#1a1d2e; }
.pb-stat-label { font-size:10px; color:#6b7080; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.pb-termin { border:1px solid #e2e6f0; border-radius:10px; margin-bottom:14px; overflow:hidden; page-break-inside:avoid; }
.pb-termin-head { padding:11px 16px; display:flex; align-items:center; gap:12px; background:#fff; }
.pb-termin-datum { font-size:11px; color:#6b7080; font-weight:600; flex-shrink:0; }
.pb-termin-titel { font-weight:700; font-size:13px; flex:1; color:#1a1d2e; }
.pb-termin-ma { font-size:11px; color:#6b7080; flex-shrink:0; }
.pb-termin-body { padding:11px 16px; background:#f9fafb; border-top:1px solid #e2e6f0; }
.pb-notiz { font-size:12px; color:#5a6070; margin-bottom:8px; font-style:italic; }
.pb-bericht-status { display:flex; align-items:center; gap:7px; margin-bottom:5px; font-weight:700; font-size:12px; }
.pb-bericht-text { font-size:13px; color:#2a3040; line-height:1.6; }
.pb-kein-bericht { font-size:12px; color:#aab0be; font-style:italic; }
/* Termin-Modal: Per-Tag-Zeittabelle bei mehrtägigen Terminen */
.f-tage-row { display: grid; grid-template-columns: 100px 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.f-tage-row span { font-size: 12px; font-weight: 600; color: #5a6070; }

@media print {
  body > *:not(#projektbericht-view) { display:none !important; }
  #projektbericht-view { position:static !important; display:block !important; }
  #pb-toolbar { display:none !important; }
  #pb-content { padding:0 !important; max-width:100% !important; overflow:visible !important; }
  .pb-termin { page-break-inside:avoid; border:1px solid #ccc !important; }
}
/* ── Mobile (≤768px) ── */
#fab-new { display: none; }
@media (max-width: 768px) {
  /* Seite auf Viewport-Höhe fixieren — Header/Filter scrollen nicht mit */
  /* min-height:0 verhindert, dass die Basis-Regel min-height:100vh die height:100dvh überschreibt */
  /* overscroll-behavior:none sperrt iOS-Window-Scroll trotz overflow:hidden */
  html, body { height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; max-width: 100vw; }
  #main { overflow-y: hidden; overflow-x: hidden; padding: 0; }

  /* Alle nicht-Kalender Views: eigenes Scroll + Padding */
  #woche-view, #planung-view, #projekte-view, #meilensteine-view, #fehlende-view {
    height: 100%; overflow-y: auto; padding: 10px 12px 90px;
  }

  /* Fehlende Berichte: Karten umbrechen, Buttons greifbar */
  .fb-row { flex-wrap: wrap; }
  .fb-main { flex-basis: 100%; order: -1; }
  .fb-btn { flex: 1; padding: 9px 12px; }

  /* Mobile-Kalender: Strip + Hint fixiert, Body scrollt (Flex-Layout) */
  #mobile-kalender-view { height: 100%; overflow: hidden; }
  #mk-ma-strip { flex-shrink: 0; background: #f0f2f5; padding: 10px 12px 12px; }
  #mk-hint { flex-shrink: 0; }
  /* overscroll-behavior-y:contain verhindert Scroll-Chaining von mk-body auf body/window */
  #mk-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
    padding: 0 12px 90px; }

  /* Login */
  #login-screen { align-items: flex-start; overflow: hidden; }
  .login-card { padding: 48px 24px 32px; max-width: 100%; width: 100%; border-radius: 0; border: none; box-shadow: none; min-height: 100dvh; backdrop-filter: none; background: transparent; }

  /* Header */
  #logo-title { display: none; }
  #logo-sub { display: none; }
  #header { position: relative; overflow: visible; }
  #header-inner { height: 52px; padding: 0; }
  #header { padding: 0 12px; }
  #view-tabs { display: none; }
  #new-btn { display: none; }
  #settings-btn { display: none; }
  #user-name, #user-rolle { display: none; }
  #user-badge { padding: 4px 7px; }
  #user-dropdown { display: none !important; }

  /* Dropdown-Menü (öffnet per User-Avatar) */
  #mobile-menu { flex-direction: column; position: absolute; top: 52px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #d0d4de; z-index: 500; box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
  #mobile-menu.open { display: flex; }
  #mobile-menu button { padding: 14px 20px; text-align: left; background: none; border: none; border-bottom: 1px solid #f0f2f5; font-size: 15px; cursor: pointer; font-family: inherit; color: #1a1d2e; }
  #mobile-menu button:last-child { border-bottom: none; }
  #mobile-menu button:active { background: #f0f2f5; }

  /* Filter */
  #filterbar { padding: 6px 12px; gap: 6px; }
  .filter-label { display: none; }
  select.fsel { font-size: 11px; padding: 4px 6px; }
  #range-toggle { margin-left: auto; }
  #termin-count { display: none; }

  /* Abstände */
  #pb-content { padding: 16px; }
  #bericht-body { padding: 14px; }
  #bericht-header { padding: 12px 14px; }
  #pb-toolbar { padding: 10px 14px; }

  /* Liste */

  /* Modals */
  .modal { padding: 18px 16px; }
  /* Große Modals (Einstellungen, Termindetails) am Smartphone bildschirmfüllend statt abgeschnitten (Aufbau bleibt) */
  .modal-mobilefull {
    min-width: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .frow3 { grid-template-columns: 1fr 1fr; }
  .status-grid { grid-template-columns: 1fr 1fr; }

  /* FAB */
  #fab-new { display: flex; align-items: center; justify-content: center; position: fixed; bottom: 22px; right: 18px; z-index: 1500; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#4f8ef7,#6a5acd); color: #fff; font-size: 28px; font-weight: 300; line-height: 1; border: none; cursor: pointer; box-shadow: 0 4px 18px rgba(79,142,247,0.45); }

  /* Mobile-Kalender */
  #mobile-kalender-view { touch-action: pan-y; display: flex; flex-direction: column; }
  #mk-ma-strip { display: flex; align-items: center; gap: 10px; flex-shrink: 0; border-bottom: 1px solid #e2e6f0; }
  #mk-ma-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
  #mk-ma-name { font-weight: 700; font-size: 15px; flex: 1; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 5px; }
  .mk-dd-chevron { font-size: 11px; color: #9098b0; }
  /* Aktuelles Datum im Strip — nicht-Admins haben nur diesen Button (kein MA-Wechsel) */
  #mk-date-btn { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 5px;
    background: #fff; border: 1px solid #d0daf7; color: #4f8ef7; font-weight: 700; font-size: 12px;
    padding: 6px 11px; border-radius: 20px; cursor: pointer; font-family: inherit; }
  #mk-date-btn:active { background: #eef3ff; }
  /* Floating-Button: springt zum heutigen Tag, sobald „Heute" aus dem Sichtbereich ist */
  #mk-scroll-today { position: fixed; bottom: 22px; right: 18px; z-index: 1400;
    align-items: center; gap: 6px; padding: 11px 16px; border-radius: 24px;
    background: linear-gradient(135deg,#4f8ef7,#6a5acd); color: #fff; font-weight: 700; font-size: 13px;
    border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(79,142,247,0.45); font-family: inherit; }
  #mk-scroll-today:active { transform: scale(0.96); }
  #mk-ma-dropdown { position: fixed; left: 0; right: 0; z-index: 1000; background: #fff;
    border-radius: 0 0 18px 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.14);
    overflow-y: auto; max-height: 50vh; }
  .mk-ma-dd-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    cursor: pointer; border-bottom: 1px solid #f0f2f8; }
  .mk-ma-dd-item:last-child { border-bottom: none; }
  .mk-ma-dd-item:active { background: #f4f6fb; }
  .mk-ma-dd-item.active { background: #eef3ff; font-weight: 700; }
  .mk-ma-dd-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
  .mk-team-avatars { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; padding-top: 2px; }
  .mk-team-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 7px; font-weight: 800; flex-shrink: 0; }
  .mk-team-avatar + .mk-team-avatar { margin-top: -6px; }

  /* Hint-Leiste (fehlende Berichte) */
  #mk-hint { flex-shrink: 0; padding: 8px 12px 0; }
  .mk-hint-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px;
    background: linear-gradient(135deg,#fff8f5,#fff0e6); border: 1.5px solid #f7764f55;
    border-radius: 12px; color: #d95f25; font-weight: 700; font-size: 13px; cursor: pointer;
    text-align: left; transition: background 0.15s; }
  .mk-hint-btn:active { background: #ffe8d6; }

  /* Wochen-Trennzeile */
  .mk-week-hdr { display: flex; align-items: center; gap: 8px; margin: 20px 0 2px;
    font-size: 11px; font-weight: 800; color: #4f8ef7; letter-spacing: 0.5px; text-transform: uppercase; }
  .mk-week-hdr::after { content:''; flex:1; height:1px; background:#d0daf7; }
  .mk-week-range { font-weight: 400; color: #9098b0; font-size: 10px; text-transform: none; letter-spacing: 0; }

  /* Tages-Trennzeile — neues Layout: Wochentag groß, Datum sekundär */
  .mk-day-sep { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 7px; padding: 0; }
  .mk-day-sep::before, .mk-day-sep::after { display: none; }
  .mk-day-abbr { font-size: 19px; font-weight: 800; color: #1a1d2e; line-height: 1; }
  .mk-day-date { font-size: 11px; color: #9098b0; }
  .mk-today-pill { font-size: 10px; font-weight: 700; color: #fff; background: #4f8ef7;
    padding: 2px 8px; border-radius: 20px; margin-left: 2px; align-self: center; }

  /* Heute */
  .mk-day-sep.today .mk-day-abbr { color: #4f8ef7; }
  .mk-day-sep.today .mk-day-date { color: #7baaf7; }

  /* Wochenende */
  .mk-day-sep.weekend .mk-day-abbr { color: #b0b8cc; }
  .mk-day-sep.weekend .mk-day-date { color: #b8bece; }

  .mk-event { background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; border-left: 4px solid #4f8ef7; box-shadow: 0 1px 4px rgba(0,0,0,0.07); display: flex; align-items: flex-start; gap: 8px; }
  .mk-event-body { flex: 1; min-width: 0; }
  .mk-event-time { font-size: 12px; color: #6b7080; margin-bottom: 3px; }
  .mk-event-title { font-weight: 600; font-size: 14px; color: #1a1d2e; }
  .mk-event-proj { font-size: 11px; font-weight: 600; margin-top: 4px; }

  /* Planungs-Timeline: normal scrollende Seite, Karte horizontal scrollbar */
  #planung-view { display: block; }
  #pn-card { overflow-x: auto; display: block; }
  #pn-card .pn-row { min-width: 640px; }
  #pn-scroll { max-height: 44vh; }
  #pn-head { flex-wrap: wrap; }
}

/* ── Mobile Kalender: Wochenblock-Farben ── */
.mk-week-block { border-radius: 0; }
.mk-week-block.mk-week-odd  { background: #ffffff; }
.mk-week-block.mk-week-even { background: #f5f7fb; }
.mk-week-block.mk-week-current { background: #eef3fb; border-left: 3px solid #4f8ef7; }
.mk-week-block.mk-week-current .mk-week-hdr { color: #2a5fbd; font-weight: 700; }

/* ── Views: eigenes Scrollen (Desktop) ── */
#woche-view, #projekte-view, #regieberichte-view, #fehlende-view { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ── Planungsansicht: Ressourcen-Timeline ── */
/* Ein-Screen-Layout: Karte füllt die Resthöhe, nur die MA-Zeilen scrollen intern,
   die Bedarfsleiste bleibt ohne Seiten-Scroll sichtbar. */
#planung-view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 12px 20px 10px; }
#pn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; flex: none; }
.pn-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a6; }
.pn-range { font-size: 14px; font-weight: 800; color: #1b2440; }
#pn-wk-switch { margin-left: auto; display: inline-flex; background: #eef1f7; border: 1px solid #dfe4ef; border-radius: 11px; padding: 3px; gap: 2px; }
#pn-wk-switch button { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #5a6378; padding: 6px 12px; border-radius: 8px; transition: all 0.18s; }
#pn-wk-switch button.active { background: #fff; color: #4f8ef7; box-shadow: 0 2px 6px -2px rgba(36,55,120,0.25); }
#pn-add-ms { border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 13px; color: #fff; background: #4f8ef7; padding: 8px 14px; border-radius: 12px; box-shadow: 0 6px 16px -5px #4f8ef788; }
#pn-card { background: #fff; border: 1px solid #e9edf6; border-radius: 18px; padding: 12px 16px 8px; box-shadow: 0 20px 50px -30px rgba(36,55,120,0.35); overflow: hidden; flex: 1; min-height: 220px; display: flex; flex-direction: column; }
.pn-row { display: flex; gap: 10px; }
.pn-gut { width: 132px; flex: none; position: relative; }
.pn-canvas { flex: 1; position: relative; min-width: 0; }
.pn-canvas.no-anim * { transition: none !important; }
.pn-fixed { position: relative; z-index: 2; padding-bottom: 8px; border-bottom: 1px solid #e8ecf5; flex: none; }
#pn-scroll { position: relative; flex: 1; min-height: 110px; overflow-y: auto; overflow-x: hidden; margin-top: 6px; }
#pn-scroll::-webkit-scrollbar { width: 9px; }
#pn-scroll::-webkit-scrollbar-thumb { background: #d3d9e6; border-radius: 6px; }
#pn-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 10px; color: #a2abbe; flex: none; }
.pn-legend { display: inline-flex; align-items: center; gap: 8px; color: #6b7080; }
.pn-legend > span { display: inline-flex; align-items: center; gap: 4px; }

.pn-band-cell { position: absolute; top: 0; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid #e9edf6; border-radius: 9px; overflow: hidden; z-index: 3; cursor: pointer; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-band-cell .dow { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5a6070; opacity: 0.75; }
.pn-band-cell .dnum { font-size: 13px; font-weight: 700; color: #28304a; }
.pn-band-cell.today { outline: 2px solid #4f8ef7; outline-offset: -2px; }
.pn-band-cell.today .dow, .pn-band-cell.today .dnum { color: #4f8ef7; }

.pn-ms-bg { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, #f4f7fe, #eef3fc); border: 1px solid rgba(79,142,247,0.18); border-radius: 14px; z-index: 0; }
.pn-zebra { position: absolute; left: 0; right: 0; background: #fafbfe; z-index: 0; }
.pn-we { position: absolute; background: rgba(108,122,160,0.06); z-index: 0; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-raster { position: absolute; width: 1px; background: rgba(27,36,64,0.06); z-index: 0; transition: left 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-lane-div { position: absolute; left: 0; right: 0; height: 1px; background: #eef0f6; z-index: 0; }
.pn-abw { position: absolute; z-index: 1; border-radius: 6px; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-abw-lbl { position: absolute; z-index: 2; font-size: 8px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; pointer-events: none; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-abw-ico { position: absolute; z-index: 5; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 1.5px solid #94a3b8; display: grid; place-items: center; font-size: 9.5px; line-height: 1; transform: translate(-50%,-50%); box-shadow: 0 1px 4px rgba(27,36,64,0.25); transition: left 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-abw-ico.pending { opacity: 0.65; border-style: dashed; }
.pn-empty { padding: 22px 0; text-align: center; color: #9aa4b8; font-size: 13px; font-weight: 600; }

.pn-conn { position: absolute; width: 2.5px; border-radius: 2px; background: currentColor; opacity: 0.2; z-index: 1; transition: left 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-foot-bar { position: absolute; height: 4px; border-radius: 0 0 3px 3px; background: currentColor; z-index: 5; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-ms-blob { position: absolute; box-sizing: border-box; width: 186px; min-height: 56px; display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 11px; background: #fff; border: 2px solid currentColor; border-radius: 16px; box-shadow: 0 8px 20px -10px currentColor; z-index: 6; transition: left 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-ms-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; box-sizing: border-box; }
.pn-ms-txt { min-width: 0; }
.pn-ms-proj { font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #9aa4b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-ms-title { font-size: 13px; font-weight: 800; line-height: 1.15; color: #1b2440; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pn-durtrack { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: #e9ecf3; z-index: 0; }
.pn-tconn { position: absolute; width: 2.5px; border-radius: 2px; background: currentColor; opacity: 0.35; z-index: 3; transition: left 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-durbar { position: absolute; height: 5px; border-radius: 3px; background: currentColor; opacity: 0.9; z-index: 4; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-durcap { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: currentColor; border: 2px solid #fff; box-shadow: 0 0 0 2px currentColor; z-index: 5; transform: translate(-50%,-50%); transition: left 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s; }
.pn-durcap.end { background: #fff; }
.pn-tbar { position: absolute; box-sizing: border-box; height: 48px; border-radius: 10px; background: #fff; border: 1.5px solid; display: flex; gap: 5px; padding: 4px 7px; overflow: hidden; cursor: pointer; box-shadow: 0 4px 12px -6px rgba(27,36,64,0.35); z-index: 6; transition: left 0.45s cubic-bezier(.4,.8,.3,1), width 0.45s cubic-bezier(.4,.8,.3,1), opacity 0.3s, transform 0.15s, box-shadow 0.15s; }
.pn-tbar:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(27,36,64,0.45); z-index: 7; }
.pn-tbar-accent { flex: none; width: 4px; border-radius: 3px; align-self: stretch; }
.pn-tbar-txt { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.pn-tbar-proj { font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tbar-title { font-size: 11px; font-weight: 800; line-height: 1.1; color: #1b2440; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-tbar-meta { font-size: 9px; color: #6b7080; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pn-lab { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #48506a; cursor: pointer; user-select: none; }
.pn-lab:hover .pn-lab-name { color: #4f8ef7; }
.pn-lab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15; }
.pn-lab-caret { flex: none; font-size: 9px; color: #a2abbe; }
.pn-lab .av { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; }
.pn-lab.eyebrow { font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #4f7cc9; display: block; white-space: nowrap; }
.pn-drop-hl { position: absolute; z-index: 8; border: 2px solid #4f8ef7; background: #4f8ef71a; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.pn-drop-hl.blocked { border-color: #e63946; background: #e6394616; }
.pn-tbar-mov { cursor: grab; }
.pn-tbar-mov:active { cursor: grabbing; }

/* Ressourcenbedarf-Leiste unter der Timeline (immer ohne Scrollen sichtbar) */
#planung-evidenz { flex: none; margin-top: 10px; background: #ffffff; border: 1px solid #d0d4de; border-radius: 14px; padding: 8px 12px; }
#pe-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
#pe-header-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pe-actions { display: flex; align-items: center; gap: 8px; }
#pe-actions .btn:disabled { opacity: 0.45; cursor: default; }
.btn-ghost { background: #e2e6f0; color: #48506a; }
#pe-list { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 5px; }
.pe-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pe-row-label { flex: 0 0 62px; font-size: 10px; font-weight: 700; color: #8892a4; text-transform: uppercase; letter-spacing: .4px; }
.pe-row-list { display: flex; gap: 10px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 3px; }
#pe-list .pe-card { flex: 0 0 240px; margin-bottom: 0; padding: 6px 9px; }
.pe-check input { width: 15px; height: 15px; }
.pe-card { display: flex; align-items: center; gap: 8px; background: #f8f9fc; border: 1px solid #e2e6f0; border-radius: 9px; padding: 8px 10px; margin-bottom: 7px; cursor: grab; }
.pe-card:active { cursor: grabbing; }
.pe-card:hover { border-color: #c8d4ee; background: #f3f6fc; }
.pe-check { display: flex; align-items: center; }
.pe-check input { accent-color: #4f8ef7; cursor: pointer; }
.pe-body { flex: 1; min-width: 0; cursor: pointer; }
.pe-title { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-meta { font-size: 10px; color: #6b7080; margin-top: 2px; }
.pe-multi { background: #f7764f22; border: 1px solid #f7764f66; color: #c45a2f; border-radius: 10px; padding: 0 6px; font-size: 9px; font-weight: 700; }
.pe-grip { color: #a0a8c0; font-size: 14px; cursor: grab; user-select: none; }
.hm-legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #00000018; }
#kap-tooltip { display: none; position: fixed; z-index: 950; background: #1a1d2e; color: #e8ebf2; border-radius: 10px; padding: 10px 12px; font-size: 11px; max-width: 340px; box-shadow: 0 8px 28px rgba(0,0,0,0.35); pointer-events: none; }
#kap-tooltip .kt-head { font-weight: 700; margin-bottom: 6px; color: #fff; }
#kap-tooltip .kt-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kap-tooltip .kt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.zuw-popover { position: fixed; z-index: 940; background: #ffffff; border: 1px solid #c8d0e0; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.22); width: 300px; max-height: 380px; overflow-y: auto; }
.zp-head { padding: 10px 12px; border-bottom: 1px solid #e8ebf2; font-size: 12px; }
.zp-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f2f8; }
.zp-row:hover { background: #f0f5ff; }
.zp-row.top { background: #f4f9f4; }
.zp-row.top:hover { background: #e8f4e8; }
.zp-empty { padding: 14px 12px; font-size: 12px; color: #a33; }
.zp-foot { padding: 8px 12px; text-align: right; }
.td-row { border-radius: 7px; background: #f8f9fc; padding: 8px 10px; margin-bottom: 5px; font-size: 13px; cursor: pointer; border-left: 3px solid #4f8ef7; }
.td-row:hover { background: #eef2fb; }
.pe-card.pe-undatiert { border-style: dashed; background: #fffaf3; }
.pe-card.pe-undatiert:hover { background: #fff5e8; border-color: #e8c490; }
.mtabs { display: flex; gap: 5px; margin-bottom: 16px; background: #eef0f5; border-radius: 9px; padding: 4px; }
.mtab { flex: 1; border: none; background: none; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: #5a6070; cursor: pointer; font-family: inherit; }
.mtab.active { background: #ffffff; color: #1a1d2e; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.mtab:disabled { opacity: 0.45; cursor: default; }

/* ── Ressourcenplanung (Jahres-Gantt in Kalenderwochen) ──────────────────────
   Eigenes Modul, nur Admins, Desktop-only. Optik: Farbe = Phase (--rsc),
   Füllung = Beauftragungsgrad, rot ausschließlich für überschrittene Meilensteine. */
/* Füllt die volle Höhe: Kopf/Filter fix, Karte dehnt sich, Legende sitzt an der Unterkante.
   Ohne das blieb unter der Karte ein toter Streifen (max-height mit fixem Abzug). */
#ressourcen-view { --rs-gut: 344px; flex: 1; min-height: 0; flex-direction: column; padding: 12px 20px 8px; }
#rs-head, #rs-filter, #rs-legend { flex: none; }
#rs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rs-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a6; }
.rs-range { font-size: 15px; font-weight: 800; color: #1a1d2e; }
#rs-zoom { display: inline-flex; background: #eef1f7; border: 1px solid #dfe4ef; border-radius: 11px; padding: 3px; gap: 2px; margin-left: auto; }
#rs-zoom button { border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #5a6378; padding: 6px 12px; border-radius: 8px; }
#rs-zoom button.active { background: #fff; color: #4f8ef7; box-shadow: 0 2px 6px -2px rgba(36,55,120,0.25); }
#rs-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rs-search { background: #fff; border: 1px solid #c8ccd8; border-radius: 7px; padding: 5px 10px; font-size: 12px; width: 170px; font-family: inherit; outline: none; }
#rs-info { margin-left: auto; font-size: 12px; color: #6b7080; }
.rs-chip { border: 1.5px solid #c8ccd8; background: #fff; border-radius: 100px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: #5a6070; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.rs-chip .rs-dot { width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
.rs-chip.aus { opacity: 0.45; text-decoration: line-through; background: #fff !important; border-color: #d8dce6 !important; color: #a2abbe !important; }
.rs-chip.g-beauftragt { color: #1a7a4a; border-color: #bfe9d3; background: #f0fdf7; }
.rs-chip.g-wahrscheinlich { color: #9a6c00; border-color: #f2dca4; background: #fffbf0; }
.rs-chip.g-unwahrscheinlich { color: #5a6070; border-color: #d8dce6; background: #f7f8fb; }
.rs-cb { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7080; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; }
.rs-cb input { accent-color: #4f8ef7; }

#rs-card { background: #fff; border: 1px solid #e9edf6; border-radius: 16px; box-shadow: 0 20px 50px -32px rgba(36,55,120,0.35); overflow: hidden; flex: 1; min-height: 180px; display: flex; flex-direction: column; }
#rs-scroll { overflow: auto; position: relative; flex: 1; min-height: 0; }
.rs-row { display: flex; align-items: stretch; position: relative; }
.rs-gut { width: var(--rs-gut); flex: none; position: sticky; left: 0; z-index: 3; background: #fff; border-right: 1px solid #e4e8f2; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; }
.rs-row:hover .rs-gut { background: #f9fafd; }
.rs-gut-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-gut-h { width: 62px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.rs-gut-l { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #a2abbe; }
.rs-cv { position: relative; flex: none; }
.rs-empty { padding: 40px 20px; text-align: center; font-size: 13px; color: #8892a4; }

/* Achse */
.rs-hrow { position: sticky; top: 0; z-index: 8; background: #fff; border-bottom: 1px solid #d9dfec; }
.rs-hrow .rs-gut { z-index: 9; align-items: flex-end; padding-bottom: 5px; }
.rs-axis { position: relative; flex: none; height: 54px; }
.rs-yr { position: absolute; top: 0; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; color: #98a1b5; border-left: 1px solid #e4e8f2; }
.rs-mo { position: absolute; top: 17px; height: 20px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #dfe5f0; font-size: 10.5px; font-weight: 800; color: #2a3350; overflow: hidden; }
.rs-mo.now { background: #eef5ff; color: #4f8ef7; }
.rs-kw { position: absolute; top: 38px; height: 16px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #eef1f8; font-size: 8px; font-weight: 700; color: #a2abbe; font-variant-numeric: tabular-nums; }
.rs-kw.now { background: #ffe9ea; color: #c0202e; font-weight: 800; }

/* Raster */
.rs-grid { position: absolute; top: 0; left: var(--rs-gut); z-index: 0; pointer-events: none; }
.rs-mline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(27,36,64,0.09); }
.rs-wline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(27,36,64,0.028); }
.rs-qshade { position: absolute; top: 0; bottom: 0; background: #fafbfe; }
.rs-past { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(27,36,64,0.026); }
.rs-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #e63946; opacity: 0.7; }
.rs-leer-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg,#e7ebf4 0 5px,transparent 5px 11px); }

/* Projektzeile */
.rs-proj { min-height: 40px; border-top: 2px solid #eef1f8; cursor: pointer; }
.rs-proj .rs-gut { background: #fbfcff; }
.rs-proj:hover .rs-gut { background: #f3f6ff; }
.rs-tw { width: 11px; flex: none; font-size: 9px; color: #98a1b5; transition: transform 0.15s; }
.rs-proj.open .rs-tw { transform: rotate(90deg); }
.rs-pcolor { width: 9px; height: 22px; border-radius: 3px; flex: none; }
.rs-pname { font-size: 12.5px; font-weight: 700; color: #1a1d2e; }
.rs-kurz { font-size: 9.5px; font-weight: 700; color: #a2abbe; letter-spacing: 0.04em; }
.rs-pmeta { font-size: 9.5px; color: #98a1b5; font-weight: 600; }
.rs-hsum { font-size: 11.5px; font-weight: 800; color: #39415c; }
.rs-hsub { font-size: 9px; color: #9aa3b7; font-weight: 600; }
.rs-grad { border-radius: 100px; padding: 1px 6px; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: #eef0f6; color: #5a6070; }
.rs-grad.g-beauftragt { background: #e6f7ee; color: #1a7a4a; }
.rs-grad.g-wahrscheinlich { background: #fff6e0; color: #9a6c00; }
.rs-grad.g-unwahrscheinlich { background: #f0f2f8; color: #7b8391; }
.rs-badge-miss { background: #fdecec; border: 1px solid #f3c2c6; color: #c0202e; border-radius: 100px; padding: 0 6px; font-size: 9px; font-weight: 800; }
.rs-edit { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0.45; padding: 2px 3px; flex: none; font-family: inherit; }
.rs-edit:hover { opacity: 1; }

/* Phasenzeile */
.rs-kat { border-top: 1px solid #f4f6fb; }
.rs-kat .rs-gut { padding-left: 26px; }
.rs-kat.leer .rs-gut { background: #fdfdff; }
.rs-kat.late { background: #fff8f8; }
.rs-kat.late .rs-gut { background: #fff5f5; }
.rs-kbar { width: 4px; flex: none; border-radius: 2px; align-self: stretch; margin: 5px 0; }
.rs-kname { font-size: 11.5px; font-weight: 700; }
.rs-kmeta { font-size: 9.5px; color: #a2abbe; font-weight: 600; }

/* Balken: Farbe = Phase (--rsc), Füllung = Beauftragungsgrad */
.rs-bar { position: absolute; height: 16px; border-radius: 5px; background: var(--rsc); overflow: hidden; cursor: pointer; box-shadow: 0 2px 6px -3px rgba(20,30,60,0.5); display: flex; align-items: center; }
.rs-bar:hover { filter: brightness(1.08); }
.rs-bar.rs-g-wahrscheinlich { background: repeating-linear-gradient(115deg, var(--rsc) 0 7px, color-mix(in srgb, var(--rsc) 55%, #fff) 7px 13px); }
.rs-bar.rs-g-unwahrscheinlich { background: color-mix(in srgb, var(--rsc) 24%, #fff); border: 1px dashed color-mix(in srgb, var(--rsc) 70%, #fff); box-shadow: none; }
.rs-bar .rs-bl { position: relative; font-size: 10px; font-weight: 700; color: #fff; padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.rs-bar.rs-g-unwahrscheinlich .rs-bl { color: #4b546e; text-shadow: none; }
.rs-lbl-out { position: absolute; font-size: 10px; font-weight: 700; color: #4b546e; white-space: nowrap; pointer-events: none; display: flex; align-items: center; height: 16px; gap: 4px; z-index: 2; }
.rs-lbl-out .h { color: #959eb2; font-weight: 600; }
.rs-lbl-out.miss { color: #c0202e; }
.rs-lbl-out.done { color: #a2abbe; text-decoration: line-through; }

/* Meilenstein (Termin + Frist) */
.rs-ms { position: absolute; width: 13px; height: 13px; border-radius: 3px; rotate: 45deg; cursor: pointer; border: 1.5px solid #fff; box-shadow: 0 2px 5px -2px rgba(20,30,60,0.65); background: #8892a4; }
.rs-ms-miss { background: #e63946; box-shadow: 0 0 0 3px rgba(230,57,70,0.22); }
.rs-ms-erfuellt { box-shadow: none; }
.rs-ms-tri { position: absolute; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #2b3450; }
.rs-ms-tri.miss { border-top-color: #e63946; }
.rs-rollup { position: absolute; height: 7px; border-radius: 4px; background: #c9d0e0; opacity: 0.5; }
.rs-rollup-seg { position: absolute; height: 7px; border-radius: 4px; }

/* Legende */
#rs-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 4px 0; font-size: 11px; color: #6b7080; }
.rs-lg { display: inline-flex; align-items: center; gap: 6px; }
.rs-lg b { color: #8a93a6; letter-spacing: 0.06em; font-size: 10px; }
.rs-sw { width: 24px; height: 10px; border-radius: 4px; display: inline-block; background: var(--rsc); }
.rs-sw.rs-g-wahrscheinlich { background: repeating-linear-gradient(115deg, var(--rsc) 0 6px, color-mix(in srgb, var(--rsc) 55%, #fff) 6px 11px); }
.rs-sw.rs-g-unwahrscheinlich { background: color-mix(in srgb, var(--rsc) 24%, #fff); border: 1px dashed color-mix(in srgb, var(--rsc) 70%, #fff); }
.rs-swd { width: 11px; height: 11px; border-radius: 3px; rotate: 45deg; display: inline-block; background: #8892a4; }
.rs-swd.miss { background: #e63946; }
.rs-swd.done { background: #c9d0e0; }
.rs-swl { width: 2px; height: 13px; background: #e63946; display: inline-block; }

/* Modale der Ressourcenplanung */
.rs-modal-overlay { position: fixed; inset: 0; background: #0006; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rs-modal { background: #fff; border-radius: 14px; width: 100%; box-shadow: 0 8px 40px #0004; max-height: 92vh; display: flex; flex-direction: column; }
.rs-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; }
.rs-modal-t { font-size: 16px; font-weight: 700; color: #1a1d2e; }
.rs-modal-x { background: none; border: none; font-size: 20px; cursor: pointer; color: #8892a4; line-height: 1; }
.rs-modal-b { padding: 0 22px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.rs-modal-err { margin: 10px 22px 0; color: #c0202e; font-size: 12px; background: #fff0f0; border-radius: 7px; padding: 8px 12px; }
.rs-modal-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 22px 20px; }
.rs-fl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #a2abbe; display: block; margin-bottom: 4px; }
.rs-fi { width: 100%; border: 1.5px solid #c8ccd8; border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; color: #1a1d2e; background: #fff; }
.rs-f2 { display: flex; gap: 10px; }
.rs-f2 > div { flex: 1; }
.rs-hint { font-size: 10.5px; color: #98a1b5; line-height: 1.5; margin-top: 4px; }
.rs-ctx { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #39415c; background: #f6f8fd; border-radius: 8px; padding: 8px 11px; }
.rs-seg { display: flex; background: #eef1f7; border: 1px solid #dfe4ef; border-radius: 9px; padding: 3px; gap: 2px; }
.rs-seg button { flex: 1; border: none; background: none; font-family: inherit; font-size: 11.5px; font-weight: 700; color: #5a6378; padding: 7px 4px; border-radius: 7px; cursor: pointer; }
.rs-seg button.on { background: #fff; color: #4f8ef7; box-shadow: 0 2px 6px -2px rgba(36,55,120,0.25); }
.rs-farben { display: flex; gap: 6px; flex-wrap: wrap; }
.rs-farben button { width: 26px; height: 26px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; }
.rs-farben button.on { border-color: #1a1d2e; box-shadow: 0 0 0 2px #fff inset; }
.rs-btn-primary { background: #4f8ef7; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; }
.rs-btn-ghost { background: #f0f2f5; border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-size: 13px; font-family: inherit; color: #5a6070; }
.rs-btn-del { background: none; border: 1px solid #e6394655; color: #c0202e; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; font-family: inherit; }
.rs-ph-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.rs-ph-row .rs-ph-name { flex: 1; }
.rs-ph-color { width: 36px; height: 34px; border: 1px solid #c8ccd8; border-radius: 7px; background: #fff; cursor: pointer; padding: 2px; }
/* Spaltenzahl kommt inline aus der Anzahl der Phasen (auto-fit klappt hier auf 1 Spalte zusammen) */
.rs-quali-head, .rs-quali-row { display: grid; align-items: center; gap: 4px; }
.rs-quali-head { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #a2abbe; padding-bottom: 6px; border-bottom: 1px solid #e9edf6; }
.rs-quali-head span, .rs-quali-row > span { text-align: center; }
.rs-quali-row { padding: 5px 0; border-bottom: 1px solid #f5f6fa; font-size: 12px; }
.rs-quali-ma { display: flex !important; align-items: center; gap: 7px; text-align: left !important; }
.rs-quali-row input { accent-color: #4f8ef7; width: 16px; height: 16px; cursor: pointer; }

/* Auslastungsblock am Fuß der Ressourcenansicht (Bedarf gegen verfügbare Mitarbeiter) */
.rs-fuss { position: sticky; bottom: 0; z-index: 6; background: #fff; box-shadow: 0 -10px 22px -16px rgba(20,30,60,0.55); }
.rs-srow { background: linear-gradient(90deg,#f4f7fd,#fbfcff); border-top: 1px solid #dde3ef; border-bottom: 1px solid #e8ecf5; }
.rs-srow .rs-gut { background: transparent; border-right-color: #dde3ef; padding: 7px 12px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6d7791; }
.rs-srow-sub { display: flex; align-items: center; padding-left: 10px; font-size: 10.5px; color: #98a1b5; }
.rs-al { height: 34px; border-top: 1px solid #f4f6fb; }
.rs-al .rs-gut-name { line-height: 1.25; }
.rs-al .rs-kmeta { font-size: 9px; display: block; overflow: hidden; text-overflow: ellipsis; }
.rs-al-gesamt .rs-gut { background: #fbfcff; }
.rs-al-abw .rs-gut { background: #fdfdff; }
.rs-al-titel { font-size: 11.5px; font-weight: 700; color: #39415c; }
.rs-al-gesamt .rs-al-titel { font-weight: 800; }
.rs-zelle { position: absolute; top: 6px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: default; }
.rs-z-ok { background: #e6f7ee; color: #1a7a4a; border: 1px solid #bfe9d3; }
.rs-z-tight { background: #fff6e0; color: #9a6c00; border: 1px solid #f2dca4; }
.rs-z-short { background: #fdecec; color: #c0202e; border: 1px solid #f3c2c6; }
.rs-z-zero { background: #fafbfe; color: #c3cad8; border: 1px solid #f0f2f8; }
.rs-z-abw { background: #f7d9dc; color: #a3323c; border: 1px solid #edb9be; }

/* Blöcke ziehen: Ränder als Anfasser, gezogener Balken hervorgehoben */
.rs-bar { cursor: grab; touch-action: none; }
.rs-bar.rs-bar-drag { cursor: grabbing; z-index: 5; box-shadow: 0 6px 16px -4px rgba(20,30,60,0.6); filter: brightness(1.1); }

/* Logbuch-Panel (rechts eingeschoben) */
#rs-log { position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh; background: #fff;
  border-left: 1px solid #d9dfec; box-shadow: -14px 0 40px -22px rgba(20,30,60,0.5); z-index: 900;
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.22s cubic-bezier(.4,.8,.3,1); }
#rs-log.offen { transform: translateX(0); }
#rs-log-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e9edf6; }
#rs-log-titel { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1a1d2e; }
#rs-log-x { background: none; border: none; font-size: 19px; cursor: pointer; color: #8892a4; line-height: 1; }
#rs-log-liste { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.rs-log-leer { font-size: 12px; color: #98a1b5; text-align: center; padding: 30px 10px; line-height: 1.6; }
.rs-log-e { background: #f7f9fd; border: 1px solid #eef1f8; border-radius: 10px; padding: 8px 10px; }
.rs-log-kopf { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.rs-log-name { font-size: 11.5px; font-weight: 700; color: #39415c; }
.rs-log-zeit { font-size: 9.5px; color: #a2abbe; margin-left: auto; font-variant-numeric: tabular-nums; }
.rs-log-del { background: none; border: none; cursor: pointer; font-size: 11px; color: #c3cad8; padding: 0 2px; }
.rs-log-del:hover { color: #c0202e; }
.rs-log-text { font-size: 12.5px; color: #2c3550; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
#rs-log-eingabe { border-top: 1px solid #e9edf6; padding: 10px 16px 14px; display: flex; gap: 8px; align-items: flex-end; }
#rs-log-eingabe textarea { flex: 1; border: 1.5px solid #c8ccd8; border-radius: 9px; padding: 8px 10px; font-size: 12.5px;
  font-family: inherit; color: #1a1d2e; resize: vertical; outline: none; }
.rs-edit-log { opacity: 1; color: #4f8ef7; font-size: 10px; font-weight: 800; }