/* GERÜSTWERK Phase 9 S1 — helle Arbeitsplatz-Schicht (Flag `workDesk`). Gescoped auf #viewD .gw-workdesk — das dunkle Bestandstheme bleibt überall sonst unberührt (Masterplan: Chrome-Umstellung erst S3). Zielbild: docs/mockup/referenz/2026-09-01-referenz-arbeitsplatz.png. */ #viewD .gw-workdesk { --wd-bg: #eef1f4; --wd-card: #ffffff; --wd-line: #e2e7ec; --wd-ink: #17222c; --wd-ink2: #5a6b7a; --wd-brand: #0e7a5a; --wd-blue: #2563eb; --wd-red: #dc2626; --wd-red-bg: #fdecec; --wd-amber: #b45309; --wd-amber-bg: #fdf3d7; --wd-green: #15803d; --wd-green-bg: #e6f6ec; background: var(--wd-bg); color: var(--wd-ink); border-radius: 14px; padding: 22px 24px 30px; } #viewD .gw-workdesk .gw-wd-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--wd-ink); } #viewD .gw-workdesk .gw-wd-head p { margin: 4px 0 0; color: var(--wd-ink2); font-size: .9rem; } #viewD .gw-workdesk .gw-wd-label { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--wd-ink2); font-weight: 700; margin: 20px 0 10px; } #viewD .gw-workdesk .gw-wd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } #viewD .gw-workdesk .gw-wd-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; background: var(--wd-card); border: 1px solid var(--wd-line); border-radius: 10px; padding: 14px 16px; font: inherit; color: var(--wd-ink); text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(23,34,44,.06); } #viewD .gw-workdesk .gw-wd-kpi:hover { border-color: #c6cdd4; } #viewD .gw-workdesk .gw-wd-kpi:focus-visible { outline: 2px solid var(--wd-blue); outline-offset: 2px; } #viewD .gw-workdesk .gw-wd-kpi-n { font-size: 1.7rem; font-weight: 800; line-height: 1; } #viewD .gw-workdesk .gw-wd-kpi-t { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; } #viewD .gw-workdesk .gw-wd-kpi-s { color: var(--wd-ink2); font-size: .76rem; } #viewD .gw-workdesk .gw-wd-kpi-l { margin-top: 8px; font-size: .78rem; color: var(--wd-blue); font-weight: 600; } #viewD .gw-workdesk .gw-wd-card { background: var(--wd-card); border: 1px solid var(--wd-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(23,34,44,.06); margin-top: 18px; overflow: hidden; } #viewD .gw-workdesk .gw-wd-card-head { display: flex; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--wd-line); } #viewD .gw-workdesk .gw-wd-card-head h2 { margin: 0; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--wd-ink); } #viewD .gw-workdesk .gw-wd-link { margin-left: auto; font: inherit; font-size: .78rem; color: var(--wd-blue); font-weight: 600; background: none; border: 0; cursor: pointer; } #viewD .gw-workdesk .gw-wd-link:hover { text-decoration: underline; } #viewD .gw-workdesk .gw-wd-empty { padding: 18px 16px; color: var(--wd-ink2); font-size: .85rem; } #viewD .gw-workdesk .gw-wd-tblwrap { overflow-x: auto; } #viewD .gw-workdesk .gw-wd-tbl { border-collapse: collapse; width: 100%; font-size: .82rem; } #viewD .gw-workdesk .gw-wd-tbl th { color: var(--wd-ink2); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; text-align: left; font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--wd-line); } #viewD .gw-workdesk .gw-wd-tbl td { padding: 10px 12px; border-bottom: 1px solid #eef1f4; vertical-align: middle; } #viewD .gw-workdesk .gw-wd-tbl tr:last-child td { border-bottom: 0; } #viewD .gw-workdesk .gw-wd-nr { font-weight: 700; white-space: nowrap; } /* Statuspille: Form (SVG aus gwStatusForm) + Farbe — nie Farbe allein. */ #viewD .gw-workdesk .gw-wd-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; white-space: nowrap; } #viewD .gw-workdesk .gw-wd-pill svg { width: 11px; height: 11px; } #viewD .gw-workdesk .gw-wd-pill--good { background: var(--wd-green-bg); color: var(--wd-green); } #viewD .gw-workdesk .gw-wd-pill--bad { background: var(--wd-red-bg); color: var(--wd-red); } #viewD .gw-workdesk .gw-wd-pill--warn { background: var(--wd-amber-bg); color: var(--wd-amber); } #viewD .gw-workdesk .gw-wd-prio { font-size: .7rem; font-weight: 700; border-radius: 6px; padding: 2px 8px; white-space: nowrap; } #viewD .gw-workdesk .gw-wd-prio--hoch { color: var(--wd-red); background: var(--wd-red-bg); } #viewD .gw-workdesk .gw-wd-prio--mittel { color: var(--wd-amber); background: var(--wd-amber-bg); } #viewD .gw-workdesk .gw-wd-prio--niedrig { color: var(--wd-ink2); background: #eef1f4; } /* Eingebettete Aufgabenliste: heller Kartenrahmen, Innenleben liefert gw-aufgaben. */ #viewD .gw-workdesk .gw-wd-aufgaben { padding: 4px 16px 14px; } #viewD .gw-workdesk .gw-wd-aufgaben .card { background: transparent; border: 0; box-shadow: none; padding: 0; } #viewD .gw-workdesk .gw-wd-aufgaben .card h2 { color: var(--wd-ink); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; padding: 13px 0; margin: 0; } #viewD .gw-workdesk .gw-wd-aufgaben .gw-aufg-row { background: #f7f9fb; border-color: var(--wd-line); color: var(--wd-ink); } #viewD .gw-workdesk .gw-wd-aufgaben .gw-aufg-row--p0 { background: var(--wd-red-bg); border-color: #f3c2c2; } #viewD .gw-workdesk .gw-wd-aufgaben .gw-aufg-sub { color: var(--wd-ink2); } #viewD .gw-workdesk .gw-wd-aufgaben .gw-aufg-group h3 { color: var(--wd-ink2); } @media (max-width: 900px) { #viewD .gw-workdesk { padding: 14px; } #viewD .gw-workdesk .gw-wd-kpis { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { #viewD .gw-workdesk .gw-wd-kpis { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #viewD .gw-workdesk * { transition: none !important; animation: none !important; } } /* ── S2: Layout mit Panel-Spalte (E-S2-1) ─────────────────────────────── */ #viewD .gw-workdesk .gw-wd-main { display: grid; grid-template-columns: 1fr; align-items: start; } #viewD .gw-workdesk .gw-wd-main:has(#gwWdPanel) { grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; } #viewD .gw-workdesk .gw-wd-content { min-width: 0; } #viewD .gw-workdesk .gw-wd-row--click { cursor: pointer; } #viewD .gw-workdesk .gw-wd-row--click:hover td { background: #f3f6f9; } #viewD .gw-workdesk .gw-wd-row--click:focus-visible { outline: 2px solid var(--wd-blue); outline-offset: -2px; } #viewD .gw-workdesk .gw-wd-panel { background: var(--wd-card); border: 1px solid var(--wd-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(23,34,44,.06); display: flex; flex-direction: column; position: sticky; top: 12px; max-height: calc(100vh - 40px); } #viewD .gw-workdesk .gw-wd-phead { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; } #viewD .gw-workdesk .gw-wd-phead h2 { margin: 0; font-size: 1.05rem; font-weight: 700; flex: 1; } #viewD .gw-workdesk .gw-wd-iconbtn { font: inherit; background: none; border: 1px solid var(--wd-line); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--wd-ink2); } #viewD .gw-workdesk .gw-wd-pstatus { padding: 10px 16px 12px; } #viewD .gw-workdesk .gw-wd-ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--wd-line); padding: 0 12px; } #viewD .gw-workdesk .gw-wd-ptab { font: inherit; font-size: .78rem; font-weight: 600; color: var(--wd-ink2); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 8px 10px; cursor: pointer; } #viewD .gw-workdesk .gw-wd-ptab.on { color: var(--wd-ink); border-bottom-color: var(--wd-blue); } #viewD .gw-workdesk .gw-wd-pbody { overflow-y: auto; padding: 14px 16px 16px; flex: 1; min-height: 0; } #viewD .gw-workdesk .gw-wd-blk { margin-bottom: 16px; } #viewD .gw-workdesk .gw-wd-blk h3 { margin: 0 0 8px; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--wd-ink2); } #viewD .gw-workdesk .gw-wd-prow { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 3px 0; } #viewD .gw-workdesk .gw-wd-due { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: .8rem; background: #f3f6f9; } #viewD .gw-workdesk .gw-wd-due--warn { background: var(--wd-amber-bg); color: var(--wd-amber); } #viewD .gw-workdesk .gw-wd-due--bad { background: var(--wd-red-bg); color: var(--wd-red); } #viewD .gw-workdesk .gw-wd-due .gw-wd-link { margin-left: auto; } #viewD .gw-workdesk .gw-wd-okbox { background: var(--wd-green-bg); color: var(--wd-green); border-radius: 8px; padding: 8px 10px; font-size: .8rem; } #viewD .gw-workdesk .gw-wd-plist, #viewD .gw-workdesk .gw-wd-docs { margin: 0; padding-left: 18px; font-size: .82rem; } #viewD .gw-workdesk .gw-wd-plist li, #viewD .gw-workdesk .gw-wd-docs li { padding: 3px 0; } #viewD .gw-workdesk .gw-wd-fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #viewD .gw-workdesk .gw-wd-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--wd-line); } #viewD .gw-workdesk .gw-wd-docico { display: inline-block; font-size: .6rem; font-weight: 800; background: var(--wd-red-bg); color: var(--wd-red); border-radius: 4px; padding: 1px 4px; } #viewD .gw-workdesk .gw-wd-meta { color: var(--wd-ink2); font-size: .74rem; margin-left: 6px; } #viewD .gw-workdesk .gw-wd-details { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; font-size: .8rem; } #viewD .gw-workdesk .gw-wd-details dt { color: var(--wd-ink2); font-size: .7rem; } #viewD .gw-workdesk .gw-wd-details dd { margin: 0; font-weight: 600; } #viewD .gw-workdesk .gw-wd-pfoot { padding: 12px 16px; border-top: 1px solid var(--wd-line); } #viewD .gw-workdesk .gw-wd-btn { font: inherit; font-size: .82rem; font-weight: 600; border-radius: 8px; padding: 9px 12px; border: 1px solid var(--wd-line); background: var(--wd-card); cursor: pointer; width: 100%; } #viewD .gw-workdesk .gw-wd-btn--primary { background: var(--wd-blue); color: #fff; border-color: var(--wd-blue); } @media (max-width: 1279px) { #viewD .gw-workdesk .gw-wd-main:has(#gwWdPanel) { grid-template-columns: 1fr; } #viewD .gw-workdesk .gw-wd-panel { position: static; max-height: none; } } /* ── S2: Aktivitätsverlauf ────────────────────────────────────────────── */ #viewD .gw-workdesk .gw-wd-act { list-style: none; margin: 0; padding: 6px 16px 10px; } #viewD .gw-workdesk .gw-wd-act li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #eef1f4; font-size: .82rem; } #viewD .gw-workdesk .gw-wd-act li:last-child { border-bottom: 0; } #viewD .gw-workdesk .gw-wd-act b { display: block; font-weight: 600; } #viewD .gw-workdesk .gw-wd-act small { color: var(--wd-ink2); } #viewD .gw-workdesk .gw-wd-awhen { color: var(--wd-ink2); font-size: .74rem; } #viewD .gw-workdesk .gw-wd-aico { width: 26px; height: 26px; border-radius: 50%; background: #f3f6f9; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex: 0 0 auto; } #viewD .gw-workdesk .gw-wd-empty--err { color: var(--wd-red); } /* ── S2: Werk-Karten ──────────────────────────────────────────────────── */ #viewD .gw-workdesk .gw-wd-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 14px 16px; } #viewD .gw-workdesk .gw-wd-pcard { border: 1px solid var(--wd-line); border-radius: 10px; padding: 12px 14px; background: #fbfcfd; } #viewD .gw-workdesk .gw-wd-pcard h3 { margin: 0; font-size: .95rem; } #viewD .gw-workdesk .gw-wd-pcard p { margin: 2px 0 8px; font-size: .78rem; } #viewD .gw-workdesk .gw-wd-muted { color: var(--wd-ink2); } #viewD .gw-workdesk .gw-wd-pstats { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: .8rem; margin-bottom: 8px; } #viewD .gw-workdesk .gw-wd-pstats b { text-align: right; } #viewD .gw-workdesk .gw-wd-n--good { color: var(--wd-green); } #viewD .gw-workdesk .gw-wd-n--warn { color: var(--wd-amber); }