:root { --bg: #f6f5f1; --ink: #1a1a1a; --muted: #8a8680; --line: #e3dfd6; --line-strong: #c9c4b8; --weekend: #efece4; --nonwork: #f3f0e8; --c-task: #2d5d8a; --c-parent: #4a8a8a; --c-critical: #c2412c; --c-equip: #c08552; --c-worker: #4a7c59; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.35; -webkit-font-smoothing: antialiased; } /* ── Multi-Page Navigation ─────────────────────────────────────────────── */ .topnav { display: flex; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 0 22px; overflow-x: auto; } .topnav a { padding: 10px 16px; font-size: 12px; font-weight: 500; color: #555; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .topnav a:hover { background: #fafaf6; } .topnav a.active { color: var(--ink); border-bottom-color: var(--c-task); font-weight: 600; } .page-section { display: none; } .page-section.active { display: block; } @media print { .topnav, .controls, #error, .dl, .print-btn-inline { display: none !important; } header.page { border-bottom: 1px solid #999; } .card { break-inside: avoid; } .page-section { display: none !important; } .page-section.active { display: block !important; } details.cat[open] > summary, details.cat:not([open]) > summary { display: block; } details.cat:not([open]) > .cat-body { display: block !important; } details:not([open]) { display: block; } details:not([open]) > * { display: block !important; } body { font-size: 10.5px; } .gantt-scroll { overflow: visible; } /* Modus "nur ein Element drucken": target steht direkt unter , alle anderen direkten Body-Kinder werden ausgeblendet. */ body.printing-one > *:not(.print-target) { display: none !important; } body.printing-one .print-target { display: block !important; } } .print-btn-inline { font-size: 11px; margin-left: 8px; background: none; border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 7px; cursor: pointer; color: #555; } .print-btn-inline:hover { background: #f1ede3; } header.page { display: flex; justify-content: space-between; align-items: flex-end; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); background: #fff; } header.page h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } header.page .sub { color: var(--muted); font-size: 12px; margin-top: 2px; } .controls { display: flex; gap: 10px; align-items: center; } .controls label { font-size: 11px; color: var(--muted); } .controls input { width: 56px; padding: 3px 6px; font-size: 12px; } .controls button { background: #fff; border: 1px solid var(--line-strong); border-radius: 4px; padding: 5px 11px; font-size: 12px; cursor: pointer; } .controls button:hover { background: #f1ede3; } .error { background: #fdecea; border: 1px solid #e2a59c; color: #7a1f12; padding: 12px 16px; margin: 14px 22px; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; white-space: pre-wrap; } .card { background: #fff; border: 1px solid var(--line); border-radius: 6px; margin: 16px 22px; overflow: hidden; } .card h2 { margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--line); background: #fafaf6; } .gantt-scroll { overflow-x: auto; overflow-y: hidden; } .gantt { position: relative; display: grid; /* set inline by JS: grid-template-columns: var(--label-w) 1fr */ } /* header (time axis) */ .timeaxis { position: relative; border-bottom: 1px solid var(--line-strong); height: 36px; background: #fafaf6; } .timeaxis .day { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-size: 10px; color: var(--muted); padding: 4px 4px 0; white-space: nowrap; } .timeaxis .day.weekstart { border-left-color: var(--line-strong); } .timeaxis .day .dow { font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.04em; } .timeaxis .day .nr { font-size: 11px; color: #222; } .timeaxis .month { position: absolute; top: 0; height: 16px; font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.05em; border-left: 1px solid var(--line-strong); padding: 2px 5px; background: #f1ede3; } /* label column — sticky beim horizontalen Scrollen */ .label-col { grid-column: 1; border-right: 1px solid var(--line-strong); background: #fafaf6; position: sticky; left: 0; z-index: 10; box-shadow: 1px 0 0 var(--line-strong); } .label-col .label-head { height: 36px; border-bottom: 1px solid var(--line-strong); background: #f1ede3; } .label { height: 26px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fafaf6; } .label.parent { font-weight: 600; background: #f5f2ea; } .label.cat-row { background: #ece8de; font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; color: #555; } .row.cat-row { background: #ece8de; } .bar.cat-seg { background: rgba(74, 124, 89, 0.45); border-radius: 2px; top: 8px; height: 10px; color: transparent; pointer-events: auto; } .bar.cat-seg.critical { background: rgba(194, 65, 44, 0.55); } .bar.cat-seg.equip { background: rgba(192, 133, 82, 0.55); } .bar.cat-seg.worker { background: rgba(74, 124, 89, 0.55); } .bar.cat-seg.critical { background: rgba(194, 65, 44, 0.55); } .label.clickable { cursor: pointer; user-select: none; } .label.clickable:hover { background: #ece8dc; } .label .chev { display: inline-block; width: 14px; font-size: 10px; color: var(--muted); margin-right: 2px; text-align: center; } .label .txt { overflow: hidden; text-overflow: ellipsis; } .label .info-btn { margin-left: auto; margin-right: 2px; color: var(--c-task); cursor: pointer; font-size: 12px; opacity: 0.5; flex-shrink: 0; } .label .info-btn:hover { opacity: 1; } /* Wenn meta vor info-btn ist, soll meta NICHT auto-pushen — info-btn übernimmt das */ .label .meta + .info-btn { margin-left: 6px; } .label .meta:has(+ .info-btn) { margin-left: auto; } .label .info-btn:hover { opacity: 1; } .label.depth-1 { padding-left: 22px; } .label.depth-2 { padding-left: 34px; } .label.depth-3 { padding-left: 46px; } .label.depth-4 { padding-left: 58px; } .label.depth-5 { padding-left: 70px; } .label .meta { margin-left: auto; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 8px; } /* track column */ .tracks { grid-column: 2; position: relative; } .row { position: relative; height: 26px; border-bottom: 1px solid var(--line); } .row.parent { background: #faf8f1; } /* non-work shading (weekends, off-hours) */ .shade { position: absolute; top: 0; bottom: 0; background: var(--nonwork); pointer-events: none; } /* bars */ .bar { position: absolute; top: 4px; height: 18px; background: var(--c-task); color: #fff; font-size: 10.5px; line-height: 18px; padding: 0 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } .bar.parent { background: transparent; border-top: 2px solid var(--c-parent); border-radius: 0; height: 6px; top: 10px; color: var(--c-parent); } .bar.parent::before, .bar.parent::after { content: ""; position: absolute; top: -2px; width: 2px; height: 10px; background: var(--c-parent); } .bar.parent::before { left: 0; } .bar.parent::after { right: 0; } .bar.critical { background: var(--c-critical); } .bar.critical.parent { border-top-color: var(--c-critical); color: var(--c-critical); } .bar.critical.parent::before, .bar.critical.parent::after { background: var(--c-critical); } .bar.equip { background: var(--c-equip); } .bar.worker { background: var(--c-worker); } /* gestricheltes Segment: Aufgabe läuft über Pause/Wochenende */ .bar.nonwork { background: repeating-linear-gradient( 135deg, rgba(45, 93, 138, 0.55) 0 4px, rgba(45, 93, 138, 0) 4px 8px ); color: transparent; border-radius: 0; } .bar.nonwork.critical { background: repeating-linear-gradient( 135deg, rgba(194, 65, 44, 0.55) 0 4px, rgba(194, 65, 44, 0) 4px 8px ); } .bar.nonwork.equip { background: repeating-linear-gradient( 135deg, rgba(192, 133, 82, 0.55) 0 4px, rgba(192, 133, 82, 0) 4px 8px ); } .bar.nonwork.worker { background: repeating-linear-gradient( 135deg, rgba(74, 124, 89, 0.55) 0 4px, rgba(74, 124, 89, 0) 4px 8px ); } .bar .lab { vertical-align: middle; } /* SVG arrow overlay */ .arrows { position: absolute; top: 36px; /* below time axis */ left: 0; pointer-events: none; } .arrow-line { stroke: #6b6b6b; stroke-width: 1; fill: none; } .arrow-line.critical { stroke: var(--c-critical); stroke-width: 1.4; } .arrow-head { fill: #6b6b6b; } .arrow-head.critical { fill: var(--c-critical); } /* legend */ .legend-row { padding: 10px 14px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--muted); align-items: center; } .lg-bar { display: inline-block; padding: 2px 8px; border-radius: 3px; color: #fff; font-size: 11px; } .lg-bar.normal { background: var(--c-task); } .lg-bar.critical { background: var(--c-critical); } .lg-bar.parent { background: transparent; color: var(--c-parent); border-top: 2px solid var(--c-parent); border-radius: 0; padding: 6px 8px 2px; } .lg-arrow { font-family: ui-monospace, monospace; font-size: 11px; } /* tooltip */ /* ── Stats / Tabellen / Auslastung / Material ──────────────────────── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1px; background: var(--line); } .stat { background: #fff; padding: 10px 14px; } .stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .stat .v { font-size: 17px; font-weight: 600; margin-top: 2px; } .tbl { width: 100%; border-collapse: collapse; font-size: 12px; } .tbl th, .tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; } .tbl th { background: #fafaf6; font-weight: 600; color: #444; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } .tbl tr.crit { background: #fdecea; } .tbl tr.tight { background: #fff8e6; } .tbl tr.warn { background: #fdecea; } .tbl td.muted { color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; } .badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-left: 4px; } .badge.ok { background: #d8eed8; color: #2c5e2c; } .badge.amber { background: #fbe7c1; color: #8b5a09; } .badge.red { background: #f3c5be; color: #7a1f12; } .badge.muted { background: #e5e2da; color: #6a665d; } .badge.grey { background: #ece8de; color: #6a665d; } .util-row { display: flex; flex-direction: column; gap: 2px; padding: 5px 4px; border-bottom: 1px solid var(--line); } .util-name { display: flex; justify-content: space-between; font-size: 12px; } .util-name .util-meta { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .util-barwrap { position: relative; height: 9px; background: #ece8de; border-radius: 2px; overflow: hidden; } .util-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #4a7c59; } .util-bar.warm { background: #c08552; } .util-bar.hot { background: #c2412c; } .util-pct { position: absolute; right: 4px; top: -3px; font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; } details.cat { border-bottom: 1px solid var(--line); } details.cat > summary { padding: 6px 12px; cursor: pointer; font-weight: 600; background: #f5f2ea; font-size: 12px; user-select: none; } details.cat[open] > summary { border-bottom: 1px solid var(--line); } details.cat .count { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 4px; } details.cat .cat-body { padding: 0 0 0 14px; } details.cat.depth-1 > summary { background: #faf8f1; font-size: 11px; font-weight: 500; } details.cat.depth-2 > summary { background: #fff; font-size: 11px; font-weight: 500; color: #555; } details.cat.depth-3 > summary { background: #fff; font-size: 11px; font-weight: 500; color: #777; } .mat-row { padding: 7px 10px; border-bottom: 1px solid var(--line); } .mat-row:last-child { border-bottom: none; } .mat-main { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .mat-row .mat-name { font-weight: 600; } .mat-meta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; } .mat-meta .ok { color: #2c5e2c; } .mat-meta .reuse { color: #6b4e8a; } .mat-meta .src { color: #555; font-style: italic; } .mat-usages { margin-top: 4px; font-size: 11px; } .mat-usages summary { cursor: pointer; color: var(--muted); } .mat-usages ul { margin: 4px 0 0 16px; padding: 0; } .mat-usages li { font-size: 11px; color: #444; } .source-block { padding: 10px 14px; border-bottom: 1px solid var(--line); } .source-block h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; } .empty { padding: 14px; color: var(--muted); font-size: 12px; } .variants-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 8px 22px; display: flex; gap: 18px; flex-wrap: wrap; } .variant { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .variant span { color: var(--muted); } .variant select { font-size: 12px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; } .dl { font-size: 11px; color: var(--c-task); text-decoration: none; margin-left: 8px; font-weight: 400; } .dl:hover { text-decoration: underline; } .hint { font-size: 10px; color: var(--muted); font-weight: 400; margin-left: 6px; } .daily-day { padding: 10px 14px; border-bottom: 1px solid var(--line); } .daily-day h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; } /* Tagesplan: fixe Spaltenbreiten, damit alle Tage gleich aussehen */ .tbl-daily { table-layout: fixed; width: 100%; } .tbl-daily col, .tbl-daily th, .tbl-daily td { box-sizing: border-box; } .tbl-daily th:nth-child(1), .tbl-daily td:nth-child(1) { width: 130px; } /* Zeit */ .tbl-daily th:nth-child(3), .tbl-daily td:nth-child(3) { width: 70px; text-align: right; } /* Std */ .tbl-daily th:nth-child(4), .tbl-daily td:nth-child(4) { width: 35%; } /* Personal */ .tbl-daily td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } code { background: #f1ede3; padding: 1px 4px; border-radius: 3px; font-size: 10px; } /* Modal für Detail-Ansicht */ .modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; } .modal[hidden] { display: none; } .modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); } .modal-card { position: relative; background: #fff; border-radius: 8px; padding: 24px 28px; max-width: 720px; max-height: 80vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3); margin: 20px; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; color: #888; } .modal-close:hover { color: #222; } .modal-body h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; } .modal-body .meta-line { color: var(--muted); font-size: 12px; margin-bottom: 14px; } .modal-body dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 8px 0; font-size: 13px; } .modal-body dt { color: var(--muted); font-weight: 600; } .modal-body dd { margin: 0; } .modal-body .badge.crit { background: var(--c-critical); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 11px; } .modal-body ul.linklist { padding-left: 18px; margin: 4px 0; } .modal-body ul.linklist li { font-size: 12px; cursor: pointer; color: var(--c-task); } .modal-body ul.linklist li:hover { text-decoration: underline; } .modal-body .link { color: var(--c-task); cursor: pointer; } .modal-body .link:hover { text-decoration: underline; } [data-task-id], [data-worker-id], [data-equipment-id], [data-material-id] { cursor: pointer; } .tooltip { position: fixed; background: #222; color: #fff; font-size: 11px; padding: 6px 9px; border-radius: 4px; pointer-events: none; z-index: 3000; white-space: pre-wrap; max-width: 320px; font-family: ui-monospace, monospace; line-height: 1.4; } /* Hover-Dim: über Label im Sticky-Column dimmt alle nicht-zugehörigen Zeilen + Labels (Sammler highlightet sich + alle Descendants). */ /* Dimmen nur die Balken in unbeteiligten Zeilen — Reihen/Labels bleiben sichtbar. */ .gantt.dim-mode .row.dim .bar { opacity: 0.15; transition: opacity 0.12s linear; } .gantt.dim-mode .arrows { opacity: 0.15; transition: opacity 0.12s linear; } /* Notes-Block in Modals */ .notes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .notes-title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; font-weight: 600; } .notes-title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; } .notes-body { font-size: 13px; line-height: 1.45; } .notes-body h1, .notes-body h2, .notes-body h3 { margin: 8px 0 4px; } .notes-body p { margin: 0 0 8px; } .notes-body ul, .notes-body ol { margin: 4px 0 8px 18px; padding: 0; } .notes-body code { background: #f1ede3; padding: 1px 4px; border-radius: 2px; font-size: 12px; } .notes-body pre { background: #f6f3eb; padding: 8px; border-radius: 3px; overflow-x: auto; } .notes-body blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--line-strong); color: #555; } .notes-empty { font-size: 11.5px; } .notes-empty code { font-family: ui-monospace, monospace; font-size: 11px; } /* has-notes-Marker (kleines Pin-Icon neben Entitäten mit Notizen) */ .has-notes::after { content: "✎"; margin-left: 4px; font-size: 10px; color: var(--c-task); opacity: 0.6; vertical-align: super; } /* Notiz-Zeile in der Tagesliste */ .tbl-daily tr.daily-note-row td { padding: 4px 12px 10px; border-top: none; background: #fafaf6; } .daily-note { font-size: 12px; color: #444; } .daily-note p { margin: 2px 0; } /* Tagesliste responsive: auf schmalen Screens Kartenlayout statt Tabelle */ @media (max-width: 720px) { .daily-day { padding: 8px 10px; } .tbl-daily { display: block; table-layout: auto; } .tbl-daily thead { display: none; } .tbl-daily tbody { display: block; } .tbl-daily tbody tr { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 4px; margin: 0 0 8px; padding: 8px 10px; background: #fff; width: 100%; box-sizing: border-box; } .tbl-daily tbody tr.crit { background: #fdecea; } /* alle desktop-spezifischen Spaltenbreiten + ellipsis aufheben */ .tbl-daily td, .tbl-daily td:nth-child(1), .tbl-daily td:nth-child(2), .tbl-daily td:nth-child(3), .tbl-daily td:nth-child(4) { display: block; width: auto; padding: 0; border: none; text-align: left; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.35; } .tbl-daily td:nth-child(1) { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .tbl-daily td:nth-child(2) { font-weight: 600; font-size: 13px; } .tbl-daily td:nth-child(3) { font-size: 12px; color: #555; } .tbl-daily td:nth-child(3)::before { content: "⏱ "; } .tbl-daily td:nth-child(4) { font-size: 12px; color: #555; } .tbl-daily td:nth-child(4)::before { content: "👥 "; } .tbl-daily tr.daily-note-row { display: block; border: 1px solid var(--line); border-top: none; border-radius: 0 0 4px 4px; background: #fafaf6; margin: -8px 0 8px; padding: 6px 10px 10px; } .tbl-daily tr.daily-note-row td { padding: 0; } .daily-note { font-size: 12px; } } /* Notes-Editor im Modal */ .notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; } .notes-head .notes-title { margin: 0; } .notes-edit-btn, .notes-save-btn, .notes-cancel-btn, .notes-delete-btn { font-size: 11px; padding: 3px 9px; border: 1px solid var(--line-strong); background: #fff; border-radius: 3px; cursor: pointer; color: #333; } .notes-edit-btn:hover, .notes-save-btn:hover, .notes-cancel-btn:hover { background: #f1ede3; } .notes-save-btn { border-color: var(--c-task); color: var(--c-task); font-weight: 600; } .notes-delete-btn { margin-left: auto; color: var(--c-critical); border-color: #d4a39a; } .notes-delete-btn:hover { background: #fdecea; } .notes-edit { width: 100%; min-height: 160px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 3px; box-sizing: border-box; resize: vertical; line-height: 1.45; } .notes-actions { display: flex; gap: 6px; margin-top: 6px; align-items: center; } /* Attachments-Block im Modal */ .attachments { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .attach-list { list-style: none; padding: 0; margin: 4px 0 8px; } .attach-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--line); font-size: 12px; } .attach-list li:last-child { border-bottom: none; } .attach-list a { color: var(--c-task); text-decoration: none; flex: 1; word-break: break-all; } .attach-list a:hover { text-decoration: underline; } .attach-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .attach-del-btn { background: none; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--c-critical); padding: 1px 6px; font-size: 11px; cursor: pointer; } .attach-del-btn:hover { background: #fdecea; } .attach-upload { display: flex; gap: 6px; margin-top: 6px; align-items: center; } .attach-upload input[type="file"] { font-size: 11px; flex: 1; } .attach-upload-btn { font-size: 11px; padding: 3px 9px; border: 1px solid var(--line-strong); background: #fff; border-radius: 3px; cursor: pointer; color: #333; } .attach-upload-btn:hover { background: #f1ede3; } /* has-attachments-Marker — kleines 📎 */ .has-attachments::after { content: "📎"; margin-left: 4px; font-size: 10px; opacity: 0.55; vertical-align: super; }