/* App-spezifische Ergänzungen der Kern-Apps. */ /* App-Katalog */ .zw-pkg-memwarn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--c-warn-soft); color: var(--c-warn-ink); } .zw-pkg-memwarn p { margin: 4px 0 0; } .zw-pkg-updates { margin-bottom: 18px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); overflow: hidden; } .zw-pkg-updates-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); background: var(--c-subtle); } .zw-pkg-update { display: grid; grid-template-columns: 44px minmax(140px, 220px) 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; } .zw-pkg-update + .zw-pkg-update { border-top: 1px solid var(--c-line); } .zw-pkg-update-name { display: grid; gap: 2px; } .zw-pkg-update-flag { color: var(--c-good); font-size: 12px; font-weight: 650; } .zw-pkg-update-notes { font-size: 12.5px; min-width: 0; } .zw-pkg-update-notes ul { margin: 4px 0 0; padding-left: 16px; color: var(--c-ink-2); } .zw-pkg-update-notes li { overflow-wrap: anywhere; } .zw-pkg-fresh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; color: var(--c-ink-2); font-size: 12.5px; } .zw-pkg-fresh > .zw-i { flex: none; color: var(--c-muted); } .zw-pkg-vendor { margin: 4px 0 0; font-size: 12.5px; } .zw-pkg-vendor li { overflow-wrap: anywhere; } .zw-pkg-retained-mark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c-subtle); color: var(--c-muted); } .zw-pkg-retained .zw-pkg-updates-head .zw-muted { font-size: 12.5px; } .zw-pkg-subhead { margin: 4px 0 10px; } .zw-side-badge.alert { background: var(--c-bad); color: #fff; } @container (max-width: 760px) { .zw-pkg-update { grid-template-columns: 44px 1fr; } .zw-pkg-update-notes, .zw-pkg-update > .zw-btn { grid-column: 2; justify-self: start; } } .zw-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .zw-pkg-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; } .zw-pkg-tile:hover { border-color: var(--c-line-strong); box-shadow: 0 8px 22px rgba(15, 33, 52, .08); transform: translateY(-1px); } .zw-pkg-tile-head { display: flex; gap: 12px; align-items: center; } .zw-pkg-tile-title { display: grid; min-width: 0; } .zw-pkg-tile-title strong { font-size: 14.5px; } .zw-pkg-tile-title small { color: var(--c-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pkg-tile p { flex: 1; margin: 0; color: var(--c-ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zw-pkg-tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 28px; } .zw-pkg-hero { display: flex; gap: 18px; align-items: center; margin: 14px 0 18px; padding: 18px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); flex-wrap: wrap; } .zw-pkg-hero p { margin: 4px 0 8px; } .zw-pkg-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; } .zw-pkg-detail aside { padding: 16px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); align-self: start; } .zw-pkg-desc { margin: 8px 0 12px; line-height: 1.6; color: var(--c-ink-2); } .zw-checklist, .zw-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .zw-checklist li { display: flex; gap: 9px; align-items: flex-start; color: var(--c-ink-2); } .zw-checklist li svg { flex: none; color: var(--c-good); margin-top: 1px; } .zw-plain li { overflow-wrap: anywhere; } @container (max-width: 820px) { .zw-pkg-detail { grid-template-columns: 1fr; } } /* Diagramme */ .zw-lc { position: relative; width: 100%; } .zw-lc-canvas { display: block; } .zw-lc-tip { position: absolute; top: 8px; z-index: 2; min-width: 150px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); box-shadow: 0 6px 18px rgba(15, 33, 52, .14); font-size: 12px; pointer-events: none; } .zw-lc-tip-time { margin-bottom: 4px; color: var(--c-muted); font-weight: 600; } .zw-lc-tip-row { display: flex; align-items: center; gap: 6px; } .zw-lc-tip-row i { width: 8px; height: 8px; border-radius: 2px; } .zw-lc-tip-row span { flex: 1; color: var(--c-muted); } /* Leistung */ .zw-rm .zw-main { display: flex; flex-direction: column; gap: 14px; } .zw-rm-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; border-bottom: 1px solid var(--c-line); } .zw-rm-head .zw-tabs { flex: none; } .zw-nowrap { flex-wrap: nowrap; } .zw-rm-head .zw-tabs { border-bottom: 0; margin-bottom: 0; } .zw-rm-head .zw-segmented, .zw-rm-head .zw-rm-search { margin-bottom: 6px; } .zw-rm-head .zw-segmented button:disabled { opacity: .45; cursor: default; } .zw-rm-search { width: 220px; height: 32px; } .zw-rm-content { display: flex; flex-direction: column; gap: 14px; } .zw-rm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .zw-rm-card { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-rm-card-head { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 10px; color: var(--c-ink); } .zw-rm-card-head svg { color: var(--c-muted); } .zw-rm-card-head > strong:not(:first-child) { font-size: 13px; } .zw-rm-card-head .zw-grow + strong { font-size: 17px; font-variant-numeric: tabular-nums; } .zw-rm-mini { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: var(--c-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .zw-rm-restarts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .zw-rm-restarts li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 12.5px; } .zw-rm-hint { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--c-warn-soft); color: var(--c-warn-ink); font-size: 12.5px; } .zw-rm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; } .zw-rm-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; } .zw-rm-legend-item i { width: 10px; height: 10px; border-radius: 3px; } .zw-rm-legend-item span { color: var(--c-muted); } .zw-rm-legend-item strong { font-variant-numeric: tabular-nums; } .zw-rm-volumes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .zw-rm-volume .zw-meter { margin: 6px 0 2px; } .zw-rm-stats { display: flex; flex-wrap: wrap; gap: 14px; } .zw-rm-statblock { flex: 1 1 280px; padding: 12px 16px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-rm-statrow { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 8px; } .zw-rm-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; } .zw-rm-stat i { grid-row: span 2; width: 4px; height: 32px; border-radius: 2px; } .zw-rm-stat small { color: var(--c-muted); font-size: 12px; } .zw-rm-stat strong { grid-column: 2; font-size: 18px; font-weight: 680; font-variant-numeric: tabular-nums; } .zw-rm-stat:not(:has(i)) strong, .zw-rm-stat:not(:has(i)) small { grid-column: 1 / -1; } .zw-rm-core-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; margin-top: 8px; } .zw-rm-core { display: grid; grid-template-columns: 52px 1fr 42px; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; } .zw-rm-core small { color: var(--c-muted); } .zw-rm-core span { text-align: right; } .zw-rm-membar-track { display: flex; height: 22px; overflow: hidden; border-radius: 7px; background: var(--c-subtle); } .zw-rm-membar-track span { height: 100%; } .zw-rm-membar-track .used { background: #1f9d74; } .zw-rm-membar-track .buffers { background: #6bb7a0; } .zw-rm-membar-track .cached { background: #b9dccf; } .zw-rm-membar-track .free { background: var(--c-subtle); } .zw-rm-picker { width: auto; min-width: 140px; height: 30px; } .zw-rm-sub { margin-top: 4px; } .zw-rm-sort { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .zw-rm-cpucell { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .zw-rm-taskbox .zw-table td { padding-top: 6px; padding-bottom: 6px; white-space: nowrap; } .zw-rm-note { margin: 0; } /* Speicher */ .zw-volume { display: grid; gap: 10px; } /* Hilfe */ .zw-help p { margin: 0 0 12px; line-height: 1.65; max-width: 720px; } .zw-help p:last-child { margin-bottom: 0; } /* Polaris */ .zw-fs { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--c-canvas); } .zw-fs-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); } .zw-fs-path-input { flex: 1; min-width: 0; height: 26px; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: inherit; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; } .zw-fs-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; padding: 0 8px; height: 34px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-raised); overflow: hidden; white-space: nowrap; } .zw-crumb { border: 0; background: transparent; padding: 3px 6px; border-radius: 5px; cursor: pointer; color: var(--c-ink-2); display: inline-flex; align-items: center; } .zw-crumb:hover { background: var(--c-subtle); } .zw-crumb-sep { color: var(--c-muted); } .zw-fs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px 1fr; } .zw-fs-tree { display: flex; flex-direction: column; gap: 1px; padding: 10px 8px; background: var(--c-subtle); border-right: 1px solid var(--c-line); overflow-y: auto; } .zw-fs-tree .zw-side-btn small { font-size: 10.5px; } .zw-fs-hint { padding: 10px; font-size: 12px; } .zw-fs-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .zw-fs-actions { padding: 8px 12px; border-bottom: 1px solid var(--c-line); background: var(--c-surface); } .zw-fs-actions .zw-row { flex-wrap: wrap; gap: 6px; } .zw-fs-divider { width: 1px; height: 22px; background: var(--c-line); margin: 0 2px; } .zw-fs-list { flex: 1; min-height: 0; overflow: auto; outline: none; background: var(--c-surface); } .zw-fs-list.drop { box-shadow: inset 0 0 0 3px rgba(44, 125, 160, .45); background: var(--c-hover); } .zw-fs-table { border-radius: 0; } .zw-fs-table td { padding: 6px 12px; user-select: none; } .zw-fs-table th.sortable { cursor: pointer; } .zw-fs-table th.sortable svg { vertical-align: -2px; margin-left: 3px; } .zw-fs-table tr.drop td { background: var(--c-accent-soft) !important; } .zw-fs-list { position: relative; } .zw-fs-layout { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--c-subtle); } .zw-fs-layout .zw-icon-btn { width: 28px; height: 28px; } .zw-fs-layout .zw-icon-btn.active { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); } .zw-fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; padding: 12px; align-content: start; } .zw-fs-tile { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 8px 6px 7px; border: 1px solid transparent; border-radius: 10px; cursor: default; user-select: none; text-align: center; min-width: 0; } .zw-fs-tile:hover { background: var(--c-hover); } .zw-fs-tile.selected { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); } .zw-fs-tile.drop { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); } .zw-fs-tile.cut, .zw-fs-tile.dragging { opacity: .5; } .zw-fs-thumb { display: grid; place-items: center; width: 104px; height: 84px; color: var(--c-muted); } .zw-fs-thumb.dir, .zw-fs-thumb.share { color: #e8a33d; } .zw-fs-thumb img { max-width: 104px; max-height: 84px; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); } .zw-fs-tile-name { max-width: 100%; font-size: 12.5px; line-height: 1.25; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zw-fs-tile small { font-size: 11px; } .zw-ql { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 18px; background: rgba(8, 14, 22, .55); backdrop-filter: blur(3px); outline: none; } .zw-ql-panel { position: relative; display: grid; grid-template-rows: auto 1fr; width: min(100%, 980px); height: min(100%, 720px); border-radius: 12px; overflow: hidden; background: var(--c-surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } .zw-ql-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--c-line); min-width: 0; } .zw-ql-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ql-stage { display: grid; place-items: center; min-height: 0; overflow: auto; background: #0f1d2b; } .zw-ql-media { max-width: 100%; max-height: 100%; object-fit: contain; } .zw-ql-page { display: grid; justify-items: center; align-content: center; gap: 8px; height: 100%; padding: 12px; color: #9fb1c2; } .zw-ql-page img { max-height: calc(100% - 28px); background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } .zw-ql-frame { width: 100%; height: 100%; border: 0; background: #fff; } .zw-ql-text { align-self: stretch; justify-self: stretch; margin: 0; padding: 16px 18px; overflow: auto; background: var(--c-surface); color: var(--c-ink); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; } .zw-ql-info { display: grid; justify-items: center; gap: 8px; color: #dce6f0; text-align: center; padding: 24px; } .zw-ql-info .zw-muted { color: #9fb1c2; } .zw-ql-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 38px; height: 56px; border: 0; border-radius: 10px; background: rgba(15, 29, 43, .55); color: #fff; cursor: pointer; opacity: .7; } .zw-ql-nav:hover { opacity: 1; } .zw-ql-nav.prev { left: 8px; } .zw-ql-nav.next { right: 8px; } .zw-fs-table tr.cut td, .zw-fs-table tr.dragging td { opacity: .5; } .zw-fs-tree .zw-side-btn.drop, .zw-crumb.drop { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); color: var(--c-ink); } .zw-fs-band { position: absolute; z-index: 3; pointer-events: none; border: 1px solid var(--c-accent); border-radius: 3px; background: color-mix(in srgb, var(--c-accent) 14%, transparent); } .zw-fs-status.hint { color: var(--c-accent); font-weight: 600; } .zw-fs-conflicts { margin: 0; padding: 8px 12px; list-style: none; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-subtle); display: grid; gap: 4px; font-size: 13px; } .zw-fs-conflicts svg { vertical-align: -2px; } .zw-rb-autopurge { margin-top: auto; padding: 12px 4px 2px; display: grid; gap: 6px; font-size: 12px; } .zw-rb-autopurge .zw-input { font-size: 12.5px; } .zw-rb-store svg { vertical-align: -2px; opacity: .75; } .zw-fs-name { display: flex; align-items: center; gap: 9px; min-width: 240px; } .zw-fs-icon { display: inline-grid; place-items: center; color: var(--c-muted); } .zw-fs-icon.dir, .zw-fs-icon.share { color: #e0a12a; } .zw-fs-status { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--c-line); background: var(--c-raised); color: var(--c-muted); font-size: 12px; } .zw-fs-uploads { position: absolute; right: 14px; bottom: 40px; z-index: 30; width: 330px; max-height: 50%; overflow-y: auto; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: 0 14px 36px rgba(15, 33, 52, .18); } .zw-fs-upload { display: grid; gap: 6px; font-size: 12.5px; } .zw-fs-upload span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ctx-menu { position: absolute; z-index: 60; min-width: 200px; padding: 5px; border-radius: 10px; background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: 0 14px 36px rgba(15, 33, 52, .22); } .zw-ctx-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; font-size: 13px; } .zw-ctx-menu button:hover:not(:disabled) { background: var(--c-subtle); } .zw-ctx-menu button:disabled { opacity: .45; } .zw-fs-picker { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; padding: 4px; border: 1px solid var(--c-line); border-radius: 8px; } .zw-fs-pick { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; } .zw-fs-pick:hover { background: var(--c-subtle); } .zw-fs-preview { display: grid; place-items: center; min-height: 200px; max-height: 70vh; background: #0f1d2b; border-radius: 8px; overflow: hidden; } .zw-fs-preview-img { max-width: 100%; max-height: 68vh; object-fit: contain; } .zw-fs-preview-frame { width: 100%; height: 68vh; border: 0; background: var(--c-surface); } @container (max-width: 700px) { .zw-fs-body { grid-template-columns: 1fr; } .zw-fs-tree { display: none; } } /* Office */ .zw-office { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--c-surface); } .zw-office-frame { flex: 1; width: 100%; border: 0; } .zw-office-start { margin: auto; display: grid; justify-items: center; gap: 14px; padding: 32px; text-align: center; } .zw-office-kinds { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 10px 0; } .zw-office-kind { display: grid; justify-items: center; gap: 6px; width: 150px; padding: 18px 10px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); cursor: pointer; } .zw-office-kind:hover { border-color: var(--c-line-strong); box-shadow: 0 10px 24px rgba(15, 33, 52, .1); } .zw-office-kind span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: #fff; } .zw-office-kind small { color: var(--c-muted); } /* Sicherheitscheck */ .zw-advisor-head { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 12px; margin-bottom: 18px; background: var(--c-good-soft); color: var(--c-good); } .zw-advisor-head.warn { background: var(--c-warn-soft); color: var(--c-warn); } .zw-advisor-head.bad { background: var(--c-bad-soft); color: var(--c-bad); } .zw-advisor-head h3 { margin: 0 0 2px; font-size: 18px; color: var(--c-ink); } .zw-advisor-head p { margin: 0 0 8px; color: var(--c-muted); } .zw-advisor-list { display: flex; flex-direction: column; gap: 8px; } .zw-advisor-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); } .zw-advisor-item p { margin: 4px 0 0; } .zw-advisor-icon { flex: none; margin-top: 1px; color: var(--c-good); } .zw-advisor-item.info .zw-advisor-icon { color: var(--c-accent); } .zw-advisor-item.warn .zw-advisor-icon { color: var(--c-warn); } .zw-advisor-item.bad .zw-advisor-icon { color: var(--c-bad); } /* Einstellungen (docs/UI-HAUPTFRAME.md): Übersicht, Mein Konto, Briefpapier, Anmeldeseite */ .zw-cp-overview .zw-cards { margin: 0; } .zw-cp-note { max-width: 76ch; margin: 0 2px 12px; font-size: 12.5px; } .zw-settings > .zw-cp-note { margin: -12px 2px 0; } .zw-cp-h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--c-ink); } .zw-cp-profile .zw-row { gap: 14px; } .zw-cp-profile strong { font-size: 14.5px; } .zw-cp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .zw-cp-tile-pick { display: grid; gap: 1px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-raised); color: var(--c-ink); text-align: left; cursor: pointer; font-size: 13px; } .zw-cp-tile-pick small { color: var(--c-muted); font-size: 11.5px; } .zw-cp-tile-pick:hover { border-color: var(--c-line-strong); } .zw-cp-tile-pick.active { border-color: var(--c-accent); background: var(--c-accent-soft); } .zw-cp-tile-pick.active strong { color: var(--c-accent); } .zw-cp-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--c-ink-2); line-height: 1.5; } .zw-group-card > .zw-cp-steps { padding: 12px 16px 12px 36px; } .zw-letter-split { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 22px; align-items: start; max-width: 1120px; } .zw-letter-split :where(.zw-group-card > .zw-field) { grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); } .zw-letter-split :where(.zw-group-card > .zw-field) > :not(label:first-child):not(small) { justify-self: stretch; } .zw-letter-aside { position: sticky; top: 92px; display: grid; gap: 6px; } .zw-letter-sheet { display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; padding: 16px 14px 10px; border: 1px solid var(--c-line); border-radius: 6px; background: #fff; color: #1b2430; font-size: 6.5px; line-height: 1.5; box-shadow: 0 8px 24px rgba(10, 20, 30, .12); overflow: hidden; } .zw-letter-head { align-self: flex-end; min-height: 22px; max-width: 60%; font-size: 10px; } .zw-letter-head img { max-height: 26px; max-width: 100%; object-fit: contain; } .zw-letter-sender { margin-top: 18px; color: #6b7480; border-bottom: .5px solid #c9d0d8; padding-bottom: 2px; align-self: flex-start; } .zw-letter-lines { display: grid; gap: 4px; margin-top: 22px; } .zw-letter-lines i { display: block; height: 3px; border-radius: 2px; background: #e3e7ec; } .zw-letter-lines i.short { width: 62%; } .zw-letter-lines i.gap { margin-top: 8px; } .zw-letter-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: auto; padding-top: 4px; border-top: 1px solid; color: #6b7480; white-space: pre-line; font-size: 5.5px; } @container (max-width: 760px) { .zw-letter-split { grid-template-columns: 1fr; } .zw-letter-aside { position: static; max-width: 240px; } } .zw-wallpaper-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .zw-wallpaper-pick { display: grid; gap: 4px; cursor: pointer; font-size: 12px; color: var(--c-ink-2); } .zw-wallpaper-pick input { position: absolute; opacity: 0; pointer-events: none; } .zw-wallpaper-pick .zw-wallpaper-swatch { height: 58px; border: 2px solid transparent; border-radius: 9px; } .zw-wallpaper-pick input:checked + .zw-wallpaper-swatch { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-soft); } .zw-wallpaper-pick input:focus-visible + .zw-wallpaper-swatch { outline: 2px solid var(--c-focus); outline-offset: 2px; } .zw-settings > .zw-login-preview { height: 220px; max-width: 880px; } /* Darstellung: drei Vorschaukarten */ .zw-theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px !important; } .zw-theme-option { display: grid; gap: 10px; padding: 8px 8px 10px; border: 1px solid var(--c-line); border-radius: 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s; } .zw-theme-option:hover { border-color: var(--c-line-strong); } .zw-theme-option:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } .zw-theme-option input { position: absolute; opacity: 0; pointer-events: none; } .zw-theme-option:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; } .zw-theme-preview { position: relative; display: grid; grid-template-columns: 30% 1fr; grid-template-rows: 22% 1fr; height: 92px; border-radius: 8px; overflow: hidden; background: #f2f4f6; border: 1px solid #dfe5ea; } .zw-theme-preview i:nth-child(1) { grid-row: 1 / span 2; background: #e8edf1; border-right: 1px solid #dfe5ea; } .zw-theme-preview i:nth-child(2) { margin: 10px 12px 0; border-radius: 5px; background: #1a6f8f; width: 46%; height: 9px; } .zw-theme-preview i:nth-child(3) { margin: 6px 12px 12px; border-radius: 6px; background: #fff; border: 1px solid #dfe5ea; } [data-preview="dark"] .zw-theme-preview { background: #10161b; border-color: #27323c; } [data-preview="dark"] .zw-theme-preview i:nth-child(1) { background: #131a20; border-color: #27323c; } [data-preview="dark"] .zw-theme-preview i:nth-child(2) { background: #58b0d1; } [data-preview="dark"] .zw-theme-preview i:nth-child(3) { background: #171f26; border-color: #27323c; } [data-preview="system"] .zw-theme-preview { background: linear-gradient(135deg, #f2f4f6 50%, #10161b 50%); } [data-preview="system"] .zw-theme-preview i:nth-child(1) { background: linear-gradient(135deg, #e8edf1 50%, #131a20 50%); } [data-preview="system"] .zw-theme-preview i:nth-child(3) { background: linear-gradient(135deg, #fff 50%, #171f26 50%); border-color: #8a9aa8; } .zw-theme-label { display: grid; gap: 1px; padding: 0 4px; } .zw-theme-label strong { font-size: 13px; } .zw-theme-label small { color: var(--c-muted); font-size: 12px; } @container (max-width: 640px) { .zw-theme-picker { grid-template-columns: 1fr; } } /* Einstellungsformulare */ .zw-form-grid.three { grid-template-columns: repeat(3, 1fr); } .zw-input-short { max-width: 140px; } .zw-radio-list, .zw-check-list { display: grid; gap: 10px; } .zw-pick-list { display: grid; gap: 2px; max-height: 260px; overflow: auto; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 8px; margin-top: 10px; } .zw-pick-list.tall { max-height: 340px; } .zw-pick-list .zw-pick small { margin-left: auto; } .zw-pick-list .zw-pick[hidden] { display: none; } /* Einstellungen: Werkzeugleiste über Listen in Reitern */ .zw-cp-name { display: flex; align-items: center; gap: 10px; min-width: 210px; } .zw-cp-name > svg, .zw-cp-name > .zw-app-mark { flex: none; } .zw-cp-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .zw-cp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; } .zw-dialog .zw-tab-body { min-height: 300px; } .zw-cp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; } .zw-cp-toolbar small { max-width: 60ch; } .zw-check-list .zw-indent { margin: -6px 0 2px 46px; font-size: 12.5px; } .zw-pick-list h4 { margin: 8px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); } .zw-pick { padding: 4px 0; align-items: center; gap: 8px; } .zw-pick small { font-weight: 400; } .zw-user-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; border-top: 1px solid var(--c-line); } .zw-radio { display: flex; align-items: center; gap: 9px; cursor: pointer; } .zw-radio input { width: 16px; height: 16px; accent-color: var(--c-accent); } .zw-status-row { display: flex; align-items: flex-start; gap: 10px; } .zw-status-row p { margin: 2px 0 0; } .zw-small { font-size: 12px; white-space: pre-line; } .zw-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; } @container (max-width: 760px) { .zw-split, .zw-form-grid.three { grid-template-columns: 1fr; } } /* Vorschau Anmeldeportal */ .zw-login-preview { display: grid; place-items: center; height: 240px; border-radius: 12px; overflow: hidden; } .zw-login-preview-card { display: grid; gap: 6px; justify-items: start; width: 200px; padding: 14px; border-radius: 12px; background: rgba(251, 252, 253, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .zw-login-preview-card .zw-works-mark { --s: 24px; } .zw-login-preview-card strong { font-size: 14px; } .zw-login-preview-card p { margin: 0; font-size: 11px; color: var(--c-muted); } .zw-login-preview-field { width: 100%; height: 16px; border-radius: 5px; border: 1px solid var(--c-line-strong); } .zw-login-preview-btn { width: 100%; height: 18px; border-radius: 5px; background: var(--c-accent); } /* 2FA-Einrichtung */ .zw-mfa-setup { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } .zw-mfa-qr { padding: 6px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); line-height: 0; } /* Aurora Backup (Systemfenster über UrBackup) */ .zw-ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 4px; } .zw-ab-grid.two { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .zw-ab-card { display: flex; flex-direction: column; gap: 12px; min-height: 180px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-ab-card > header { display: flex; align-items: center; gap: 8px; color: var(--c-muted); } .zw-ab-card > header h3 { color: var(--c-ink); font-size: 13.5px; } .zw-ab-card > header svg { color: var(--c-accent); } .zw-ab-donut { position: relative; width: 120px; height: 120px; align-self: center; } .zw-ab-donut svg { transform: rotate(0deg); } .zw-ab-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .zw-ab-donut-center strong { font-size: 24px; font-weight: 700; line-height: 1; } .zw-ab-donut-center small { color: var(--c-muted); font-size: 11.5px; } .zw-ab-legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; } .zw-ab-legend li { display: flex; align-items: center; gap: 8px; } .zw-ab-legend i { width: 9px; height: 9px; border-radius: 3px; } .zw-ab-legend b { margin-left: auto; font-weight: 650; } .zw-ab-last { display: grid; gap: 4px; } .zw-ab-last strong { font-size: 18px; letter-spacing: -.01em; } .zw-ab-running { display: grid; gap: 12px; } .zw-ab-running small { display: block; margin: 2px 0 6px; } .zw-ab-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; margin-top: auto; } .zw-ab-bars > div { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; text-align: center; } .zw-ab-bars span { align-self: end; min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #3d93b3, var(--c-accent)); } .zw-ab-bars small { color: var(--c-muted); font-size: 11px; } .zw-ab-storage { display: grid; gap: 3px; margin-top: auto; } .zw-ab-storage strong { font-size: 22px; letter-spacing: -.01em; } .zw-ab-hints { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .zw-ab-hints li { display: flex; align-items: center; gap: 8px; } .zw-ab-device { display: flex; align-items: center; gap: 10px; } .zw-ab-device small { display: block; } .zw-ab-os { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--c-accent-soft); color: var(--c-accent); flex: none; } .zw-ab-online { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); } .zw-ab-online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #9aa8b4; } .zw-ab-online.on { color: var(--c-good); } .zw-ab-online.on::before { background: #2fa36b; box-shadow: 0 0 0 3px rgba(47, 163, 107, .18); } .zw-ab-downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .zw-ab-download { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); text-decoration: none; } .zw-ab-download:hover { border-color: var(--c-accent); background: var(--c-accent-soft); } .zw-ab-download svg { color: var(--c-accent); flex: none; } .zw-ab-download small { display: block; font-size: 11px; } .zw-ab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .zw-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-size: 12.5px; cursor: pointer; } .zw-chip.active { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); font-weight: 620; } .zw-ab-log { max-height: 60vh; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; } .zw-ab-log div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 3px 6px; border-radius: 4px; } .zw-ab-log div.warning { background: var(--c-warn-soft); } .zw-ab-log div.error { background: var(--c-bad-soft); } .zw-ab-log time { color: var(--c-muted); } .zw-callout { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); } .zw-callout.bad { background: var(--c-bad-soft); color: var(--c-bad); } .zw-ab-cell small { display: block; } .zw-ab-download.busy { opacity: .6; pointer-events: none; } /* Kalender */ .zw-cal { display: grid; grid-template-columns: 248px 1fr; height: 100%; min-height: 0; background: var(--c-canvas); } .zw-cal-side { display: flex; flex-direction: column; gap: 14px; padding: 14px 12px; background: var(--c-subtle); border-right: 1px solid var(--c-line); overflow-y: auto; } .zw-cal-new { justify-content: center; height: 38px; border-radius: 10px; } .zw-cal-mini { padding: 10px; border-radius: 12px; background: var(--c-surface); border: 1px solid var(--c-line); } .zw-cal-mini-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; } .zw-cal-mini-head strong { flex: 1; font-size: 13px; text-transform: capitalize; } .zw-cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .zw-cal-mini-wd { font-size: 10.5px; color: var(--c-muted); padding: 2px 0; } .zw-cal-mini-grid button { height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--c-ink); font-size: 12px; cursor: pointer; font-variant-numeric: tabular-nums; } .zw-cal-mini-grid button:hover { background: var(--c-subtle); } .zw-cal-mini-grid button.other { color: var(--c-muted); } .zw-cal-mini-grid button.today { color: var(--c-accent); font-weight: 750; } .zw-cal-mini-grid button.selected { background: var(--c-accent); color: #fff; } .zw-cal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .zw-cal-section-toggle { min-width: 0; display: flex; align-items: center; gap: 5px; border: 0; padding: 3px 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .zw-cal-section-toggle small { min-width: 17px; padding: 1px 5px; border-radius: 9px; background: color-mix(in srgb, var(--c-muted) 14%, transparent); color: var(--c-muted); font-size: 9px; letter-spacing: 0; text-align: center; } .zw-cal-attachments { display: grid; gap: 4px; } .zw-cal-attachments > div { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 7px; border-radius: 6px; background: var(--c-canvas, var(--c-surface)); } .zw-cal-attachments > div > span, .zw-cal-attachments > div > .zw-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cal-attachments > div > small { margin-left: auto; color: var(--c-muted); white-space: nowrap; } .zw-cal-attachment-picker { display: grid; gap: 3px; max-height: 330px; overflow: auto; } .zw-cal-attachment-picker > button { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; padding: 7px 9px; background: none; color: inherit; text-align: left; } .zw-cal-attachment-picker > button:hover, .zw-cal-attachment-picker > button.active { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 10%, transparent); } .zw-cal-attachment-picker > button span { display: grid; min-width: 0; } .zw-cal-attachment-picker > button strong, .zw-cal-attachment-picker > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cal-attachment-picker > button small { color: var(--c-muted); } .zw-cal-list { display: grid; gap: 1px; } .zw-cal-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 8px; border-radius: 8px; cursor: pointer; font-size: 13px; } .zw-cal-item:hover { background: color-mix(in srgb, var(--c-surface) 60%, transparent); } .zw-cal-item input { position: absolute; opacity: 0; pointer-events: none; } .zw-cal-item i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid; flex: none; } .zw-cal-item input:not(:checked) + i { background: transparent !important; } .zw-cal-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cal-item .zw-icon-btn { opacity: 0; } .zw-cal-item:hover .zw-icon-btn { opacity: 1; } .zw-cal-switch { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface); color: var(--c-ink); font-size: 13px; cursor: pointer; } .zw-cal-switch:hover { border-color: var(--c-accent); } .zw-cal-sync { display: flex; gap: 8px; margin-top: auto; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--c-surface) 55%, transparent); font-size: 12px; color: var(--c-muted); } .zw-cal-sync div { display: grid; gap: 2px; } .zw-cal-sync strong { color: var(--c-ink); } .zw-cal-sync .zw-link { justify-self: start; font-size: 12px; } .zw-cal-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-surface); } .zw-cal-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--c-line); } .zw-cal-toolbar h2 { margin-left: 6px; font-size: 18px; text-transform: capitalize; white-space: nowrap; } .zw-segmented { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--c-subtle); } .zw-segmented button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--c-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; } .zw-segmented button.active { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px rgba(15, 33, 52, .12); } .zw-cal-month { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto repeat(6, 1fr); min-height: 0; } .zw-cal-wd { padding: 6px 8px; font-size: 11.5px; font-weight: 650; color: var(--c-muted); border-bottom: 1px solid var(--c-line); text-transform: uppercase; letter-spacing: .04em; } .zw-cal-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; padding: 4px 4px 6px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); overflow: hidden; cursor: default; } .zw-cal-cell:nth-child(7n + 7) { border-right: 0; } .zw-cal-cell.other { background: var(--c-raised); } .zw-cal-cell.other .zw-cal-daynum { color: var(--c-muted); } .zw-cal-daynum { align-self: flex-start; min-width: 26px; height: 24px; padding: 0 6px; border: 0; border-radius: 99px; background: transparent; color: var(--c-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; } .zw-cal-daynum:hover { background: var(--c-subtle); } .zw-cal-cell.today .zw-cal-daynum { background: var(--c-accent); color: #fff; } .zw-cal-chip { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 21px; padding: 1px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--c-ink); font-size: 12px; text-align: left; cursor: pointer; } .zw-cal-chip:hover { background: color-mix(in srgb, var(--cal-color, #1a6f8f) 12%, transparent); } .zw-cal-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; } .zw-cal-chip time { color: var(--c-muted); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; } .zw-cal-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cal-chip.all-day { color: #fff; font-weight: 600; } .zw-cal-chip.all-day:hover { filter: brightness(1.08); } .zw-cal-more { align-self: flex-start; border: 0; background: transparent; color: var(--c-muted); font-size: 11.5px; cursor: pointer; padding: 0 6px; } .zw-cal-more:hover { color: var(--c-accent); } .zw-cal-timegrid { flex: 1; display: flex; flex-direction: column; min-height: 0; } .zw-cal-tg-head, .zw-cal-tg-allday, .zw-cal-tg-body { display: grid; grid-template-columns: 56px repeat(var(--days), 1fr); } .zw-cal-tg-head { border-bottom: 1px solid var(--c-line); } .zw-cal-tg-day { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 4px; border: 0; background: transparent; color: var(--c-muted); font-size: 12px; cursor: pointer; } .zw-cal-tg-day strong { color: var(--c-ink); font-size: 18px; font-weight: 650; } .zw-cal-tg-day.today strong { color: var(--c-accent); } .zw-cal-tg-allday { border-bottom: 1px solid var(--c-line); min-height: 28px; } .zw-cal-tg-allday > div { display: grid; gap: 2px; padding: 3px; border-left: 1px solid var(--c-line); align-content: start; } .zw-cal-tg-allday > .zw-cal-tg-label { border-left: 0; font-size: 10.5px; color: var(--c-muted); text-align: right; padding: 7px 6px 0 0; } .zw-cal-scroll { flex: 1; overflow-y: auto; min-height: 0; } .zw-cal-tg-body { position: relative; } .zw-cal-tg-hours div { height: 44px; font-size: 10.5px; color: var(--c-muted); text-align: right; padding-right: 6px; transform: translateY(-7px); font-variant-numeric: tabular-nums; } .zw-cal-tg-col { position: relative; border-left: 1px solid var(--c-line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--c-line) 43px, var(--c-line) 44px); } .zw-cal-tg-col.today { background-color: var(--c-raised); } .zw-cal-block { position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 3px 6px; border: 0; border-left: 3px solid var(--cal-color); border-radius: 6px; background: color-mix(in srgb, var(--cal-color) 16%, #fff); color: var(--c-ink); font-size: 12px; text-align: left; cursor: pointer; box-sizing: border-box; } .zw-cal-block:hover { background: color-mix(in srgb, var(--cal-color) 24%, var(--c-surface)); z-index: 2; } .zw-cal-block strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .zw-cal-block span { color: var(--c-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cal-block .zw-cal-schedule-move { position: absolute; top: 2px; right: 3px; width: 13px; height: 10px; border-radius: 3px; cursor: grab; opacity: 0; background: radial-gradient(circle, var(--c-muted) 1px, transparent 1.5px) 0 0 / 4px 4px; touch-action: none; } .zw-cal-block .zw-cal-schedule-resize { position: absolute; left: 4px; right: 4px; bottom: 0; height: 6px; cursor: ns-resize; opacity: 0; touch-action: none; } .zw-cal-block .zw-cal-schedule-resize::after { content: ''; position: absolute; left: 35%; right: 35%; bottom: 1px; height: 2px; border-radius: 2px; background: var(--c-muted); } .zw-cal-block:hover .zw-cal-schedule-move, .zw-cal-block:hover .zw-cal-schedule-resize, .zw-cal-block.scheduling .zw-cal-schedule-move, .zw-cal-block.scheduling .zw-cal-schedule-resize { opacity: .8; } .zw-cal-block.scheduling { z-index: 5; box-shadow: 0 6px 18px rgba(15, 33, 52, .25); cursor: grabbing; } .zw-cal-selection { position: absolute; left: 3px; right: 3px; z-index: 4; padding: 2px 5px; border: 1px solid var(--c-accent); border-radius: 5px; background: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)); color: var(--c-accent); font-size: 10px; pointer-events: none; box-sizing: border-box; } .zw-cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #d64545; z-index: 3; } .zw-cal-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #d64545; } .zw-cal-agenda { flex: 1; overflow-y: auto; padding: 8px 20px 24px; } .zw-cal-agenda section { margin-top: 14px; } .zw-cal-agenda h3 { margin-bottom: 6px; font-size: 13px; color: var(--c-muted); text-transform: capitalize; } .zw-cal-agenda-row { display: grid; grid-template-columns: 10px 120px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); color: var(--c-ink); text-align: left; cursor: pointer; margin-bottom: 6px; } .zw-cal-agenda-row:hover { border-color: var(--c-accent); } .zw-cal-agenda-row i { width: 10px; height: 10px; border-radius: 50%; } .zw-cal-agenda-row time { color: var(--c-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; } .zw-cal-agenda-row div { display: grid; } .zw-cal-search-results { display: grid; gap: 6px; max-height: min(62vh, 560px); overflow-y: auto; } .zw-cal-search-results .zw-cal-agenda-row { grid-template-columns: 10px 150px 1fr; margin: 0; } .zw-cal-search-results .zw-cal-agenda-row:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-soft); } .zw-cal-search-results input { position: absolute; opacity: 0; pointer-events: none; } .zw-cal-detail { display: grid; gap: 10px; } .zw-cal-detail > div { display: flex; align-items: center; gap: 10px; } .zw-cal-detail svg { color: var(--c-muted); flex: none; } .zw-cal-dot { width: 12px; height: 12px; border-radius: 4px; margin: 0 2px; } .zw-cal-desc { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--c-subtle); white-space: pre-wrap; } .zw-cal-when { display: grid; grid-template-columns: 48px 1fr 110px; gap: 8px; align-items: center; } .zw-cal-when span { font-size: 12.5px; color: var(--c-muted); } .zw-cal-when input[hidden] { display: none; } .zw-cal-when:has(input[name=start_time][hidden]) { grid-template-columns: 48px 1fr; } .zw-cal-allday { display: flex; align-items: flex-end; padding-bottom: 6px; } .zw-cal-swatches { display: flex; gap: 8px; } .zw-cal-swatches button { width: 26px; height: 26px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px #fff; } .zw-cal-swatches button.active { border-color: var(--c-ink); } .zw-ct { flex: 1; display: grid; grid-template-columns: 300px 1fr; min-height: 0; } .zw-ct-left { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-right: 1px solid var(--c-line); min-height: 0; } .zw-ct-list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; } .zw-ct-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; } .zw-ct-row:hover { background: var(--c-subtle); } .zw-ct-row.active { background: var(--c-accent-soft); } .zw-ct-row div { display: grid; min-width: 0; } .zw-ct-row span.zw-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ct-empty { padding: 12px; } .zw-ct-detail { padding: 24px; overflow-y: auto; } .zw-ct-card { max-width: 620px; } .zw-ct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .zw-ct-head p { margin: 2px 0 0; } @media (max-width: 760px) { .zw-cal { grid-template-columns: 1fr; } .zw-cal-side { display: none; } .zw-ct { grid-template-columns: 1fr; } } .zw-ab-browse { display: grid; gap: 10px; min-height: 320px; max-height: 62vh; overflow: auto; } .zw-ab-browse-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zw-ab-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; } .zw-ab-crumbs span { color: var(--c-muted); } .zw-ab-browse td .zw-row { flex-wrap: nowrap; gap: 2px; } /* Workspace Backup */ .zw-hb { display: grid; grid-template-columns: 260px 1fr; height: 100%; min-height: 0; } .zw-hb-list { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; background: var(--c-subtle); border-right: 1px solid var(--c-line); overflow-y: auto; } .zw-hb-list-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; } .zw-hb-list-foot { margin-top: auto; padding-top: 10px; } .zw-hb-hint { padding: 8px; font-size: 12.5px; } .zw-hb-task { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; } .zw-hb-task:hover { background: color-mix(in srgb, var(--c-surface) 60%, transparent); } .zw-hb-task.active { background: var(--c-surface); box-shadow: 0 1px 2px rgba(15, 33, 52, .08); } .zw-hb-task div { display: grid; min-width: 0; } .zw-hb-task strong, .zw-hb-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-hb-task span.zw-muted { font-size: 12px; } .zw-hb-task-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-subtle); color: var(--c-muted); flex: none; } .zw-hb-task-icon.good, .zw-hb-hero.good .zw-hb-hero-icon { background: var(--c-good-soft); color: var(--c-good); } .zw-hb-task-icon.warn, .zw-hb-hero.warn .zw-hb-hero-icon { background: var(--c-warn-soft); color: var(--c-warn); } .zw-hb-task-icon.bad, .zw-hb-hero.bad .zw-hb-hero-icon { background: var(--c-bad-soft); color: var(--c-bad); } .zw-hb-task-icon.info, .zw-hb-hero.info .zw-hb-hero-icon { background: var(--c-accent-soft); color: var(--c-accent); } .zw-hb-task-icon.info svg, .zw-hb-hero.info .zw-hb-hero-icon svg { animation: zw-spin 1.2s linear infinite; } @keyframes zw-spin { to { transform: rotate(360deg); } } .zw-hb-detail { overflow-y: auto; padding: 20px 24px 28px; display: grid; gap: 14px; align-content: start; } .zw-hb-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); flex-wrap: wrap; } .zw-hb-hero h2 { margin: 0 0 2px; } .zw-hb-hero p { margin: 0; color: var(--c-muted); } .zw-hb-hero-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--c-subtle); color: var(--c-muted); } .zw-hb-error { color: var(--c-bad) !important; font-size: 12.5px; margin-top: 4px !important; } .zw-hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .zw-hb-apps .zw-card-head { align-items: flex-start; } .zw-hb-apps p { margin: 2px 0 0; max-width: 620px; } .zw-hb-source { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; cursor: pointer; } .zw-hb-source input { margin-top: 3px; } .zw-hb-source div { display: grid; } .zw-hb-source span { font-size: 12px; } .zw-hb-apps-pick { max-height: 380px; overflow: auto; } .zw-hb-stats { display: grid; gap: 12px; } .zw-hb-actions { display: flex; flex-wrap: nowrap; gap: 2px; } .zw-vault { display: grid; gap: 16px; padding: 20px; align-content: start; overflow: auto; height: 100%; box-sizing: border-box; } .zw-vault-hero { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); flex-wrap: wrap; } .zw-vault-hero h2 { margin: 0 0 4px; } .zw-vault-hero p { margin: 0; max-width: 640px; } .zw-vault-hero-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c-subtle); color: var(--c-accent); } .zw-vault-howto ol { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; } .zw-hb-stats .zw-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .zw-hb-chart { display: grid; gap: 6px; } .zw-hb-bars { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 6px 0; border-bottom: 1px solid var(--c-line); } .zw-hb-bar { flex: 1 1 0; min-width: 3px; max-width: 18px; border-radius: 3px 3px 0 0; background: var(--c-accent); opacity: .85; } .zw-hb-bar.warn { background: var(--c-warn, #d97706); } .zw-hb-bar.bad { background: var(--c-bad, #dc2626); } @container (max-width: 760px) { .zw-hb-types { grid-template-columns: repeat(2, 1fr); } } .zw-hb-target select { flex: 1; } .zw-hb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .zw-hb-type { display: grid; gap: 4px; justify-items: start; padding: 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); text-align: left; cursor: pointer; } .zw-hb-type svg { color: var(--c-accent); } .zw-hb-type span { font-size: 11.5px; color: var(--c-muted); } .zw-hb-type.active { border-color: var(--c-accent); background: var(--c-accent-soft); } .zw-hb-explorer { display: grid; grid-template-columns: 240px 1fr; gap: 14px; min-height: 420px; max-height: 64vh; } .zw-hb-versions { display: grid; gap: 4px; align-content: start; overflow-y: auto; padding-right: 4px; border-right: 1px solid var(--c-line); } .zw-hb-version { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; } .zw-hb-version:hover { background: var(--c-subtle); } .zw-hb-version.active { background: var(--c-accent-soft); } .zw-hb-version span { font-size: 11.5px; } .zw-hb-browser { display: grid; gap: 10px; align-content: start; overflow: auto; } .zw-hb-browser td .zw-row { flex-wrap: nowrap; gap: 2px; } .zw-hb-existing summary { cursor: pointer; color: var(--c-muted); font-size: 12.5px; } .zw-hb-existing[open] summary { margin-bottom: 8px; } /* Mail-Server (Einstellungen) */ .zw-ok { color: var(--c-good); display: inline-flex; } .zw-bad { color: var(--c-bad); display: inline-flex; } .zw-dns-value { max-width: 380px; word-break: break-all; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .zw-mail-alias { align-items: center; } .zw-mail-alias .zw-input { flex: 1; min-width: 0; } /* Kalender: Groupware (Teilnehmer, Frei/Gebucht, Freigaben) */ .zw-cal-import { display: flex; gap: 8px; padding: 10px; border-radius: 10px; background: var(--c-accent-soft); font-size: 12px; color: var(--c-muted); } .zw-cal-import div { display: grid; gap: 2px; } .zw-cal-import strong { color: var(--c-ink); } .zw-cal-import .zw-link { justify-self: start; font-size: 12px; } .zw-cal-attendees { display: grid !important; gap: 6px; } .zw-cal-attendees-head { display: flex; align-items: center; gap: 10px; } .zw-cal-attendees ul { list-style: none; margin: 0 0 0 26px; padding: 0; display: grid; gap: 4px; font-size: 13px; } .zw-cal-attendees li { display: flex; align-items: center; gap: 6px; } .zw-cal-ps { display: inline-flex; color: var(--c-muted); } .zw-cal-ps.good { color: var(--c-good); } .zw-cal-ps.bad { color: var(--c-bad); } .zw-cal-ps.warn { color: var(--c-warn); } .zw-cal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .zw-cal-chips:empty { display: none; } .zw-cal-person { display: inline-flex; align-items: center; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 12.5px; font-weight: 600; } .zw-cal-person.optional { background: var(--c-subtle); color: var(--c-muted); font-style: italic; } .zw-cal-person button { border: 0; background: transparent; color: inherit; font: inherit; padding: 4px 4px 4px 10px; cursor: pointer; display: inline-flex; align-items: center; } .zw-cal-person button + button { padding: 4px 8px 4px 2px; } .zw-cal-fb { margin-top: 8px; } .zw-cal-fb-grid { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--c-line); border-radius: 9px; } .zw-cal-fb-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 8px; font-size: 12px; } .zw-cal-fb-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cal-fb-track { position: relative; height: 18px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--c-subtle) 0 calc(100% / 13 - 1px), var(--c-line) calc(100% / 13 - 1px) calc(100% / 13)); } .zw-cal-fb-row.head .zw-cal-fb-track { background: none; height: 14px; } .zw-cal-fb-row.head .zw-cal-fb-track span { position: absolute; top: 0; font-size: 10.5px; color: var(--c-muted); } .zw-cal-fb-track b { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: #4f7bd9; } .zw-cal-fb-track b.busy-tentative { background: repeating-linear-gradient(45deg, #4f7bd9 0 4px, #9db6ec 4px 8px); } .zw-cal-fb-track b.busy-unavailable { background: #6b7280; } .zw-cal-fb-track em { position: absolute; left: 6px; top: 1px; font-size: 11px; color: var(--c-muted); } .zw-cal-fb-slot { position: absolute; top: -2px; bottom: -2px; border: 2px solid var(--c-good); border-radius: 4px; background: rgba(47, 163, 107, .12); z-index: 1; } .zw-share-list { display: grid; gap: 6px; } .zw-share-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; } .zw-share-row div { display: grid; min-width: 0; } .zw-share-row .zw-input { width: auto; } .zw-cal-item.shared span { display: grid; line-height: 1.2; } .zw-cal-item.shared small { color: var(--c-muted); font-size: 11px; } /* Monitoring (natives Fenster für Uptime Kuma) */ .zw-mon { display: grid; grid-template-columns: 300px 1fr; height: 100%; min-height: 0; } .zw-mon-side { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-right: 1px solid var(--c-line); background: var(--c-subtle); min-height: 0; } .zw-mon-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .zw-mon-summary div { display: grid; padding: 8px; border-radius: 9px; background: var(--c-surface, var(--c-surface)); text-align: center; } .zw-mon-summary strong { font-size: 18px; color: var(--c-good); } .zw-mon-summary .bad strong { color: var(--c-bad); } .zw-mon-summary div:last-child strong { color: var(--c-muted); } .zw-mon-summary span { font-size: 11px; color: var(--c-muted); } .zw-mon-list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; } .zw-mon-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer; } .zw-mon-item:hover { background: color-mix(in srgb, var(--c-surface) 70%, transparent); } .zw-mon-item.active { background: var(--c-accent-soft); } .zw-mon-item.nav { grid-template-columns: auto 1fr; border-top: 1px solid var(--c-line); border-radius: 0 0 9px 9px; padding-top: 10px; } .zw-mon-item div { display: grid; min-width: 0; } .zw-mon-item div span { font-size: 12px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-mon-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--c-muted); } .zw-mon-item.down .zw-mon-pct { color: var(--c-bad); font-weight: 650; } .zw-mon-empty { padding: 8px; } .zw-mon-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa6b2; flex: none; } .zw-mon-dot.up { background: var(--c-good); box-shadow: 0 0 0 3px rgba(31, 122, 85, .15); } .zw-mon-dot.down { background: var(--c-bad); box-shadow: 0 0 0 3px rgba(178, 59, 70, .18); } .zw-mon-dot.pending { background: var(--c-warn); } .zw-mon-dot.maintenance { background: var(--c-accent); } .zw-mon-main { padding: 18px 22px; overflow-y: auto; display: grid; align-content: start; gap: 16px; min-height: 0; } .zw-mon-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zw-mon-head h2 { margin: 0; font-size: 20px; } .zw-mon-head a { font-size: 13px; text-decoration: none; } .zw-mon-head p { margin: 2px 0 0; } .zw-mon-beats { display: grid; grid-template-columns: repeat(50, 1fr); gap: 3px; height: 30px; } .zw-mon-beats i { border-radius: 3px; background: var(--c-line); } .zw-mon-beats i.up { background: var(--c-good); } .zw-mon-beats i.down { background: var(--c-bad); } .zw-mon-beats i.pending { background: var(--c-warn); } .zw-mon-beats i.maintenance { background: var(--c-accent); } .zw-mon-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .zw-mon-stats div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 11px; } .zw-mon-stats span { font-size: 12px; color: var(--c-muted); } .zw-mon-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; } .zw-mon-stats small { font-size: 11.5px; color: var(--c-muted); } .zw-mon-chart h3, .zw-mon-events h3 { margin: 0; font-size: 14px; } .zw-mon-eventlist { display: grid; gap: 2px; margin-top: 8px; } .zw-mon-event { display: grid; grid-template-columns: auto 110px 150px 1fr; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--c-line); font-size: 13px; } .zw-mon-notify { display: grid; gap: 6px; } .zw-mon-notifylist { display: grid; gap: 8px; } .zw-mon-notifycard { display: flex; align-items: center; gap: 12px; } .zw-mon-notifycard div { display: grid; } @media (max-width: 760px) { .zw-mon { grid-template-columns: 1fr; } .zw-mon-side { max-height: 40%; } } /* Fernzugriff (natives Fenster für Guacamole) */ .zw-rmt { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 18px 22px; overflow-y: auto; } .zw-rmt-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .zw-rmt-toolbar h2 { margin: 0; font-size: 20px; } .zw-rmt-toolbar p { margin: 2px 0 0; } .zw-rmt-search { max-width: 360px; } .zw-rmt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-content: start; } .zw-rmt-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border: 1px solid var(--c-line); border-radius: 13px; background: var(--c-surface, var(--c-surface)); } .zw-rmt-card:hover { border-color: var(--c-accent); box-shadow: 0 6px 18px rgba(15, 33, 52, .08); } .zw-rmt-card-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #60a5fa, #1d4ed8); } .zw-rmt-card-icon.vnc { background: linear-gradient(160deg, #a3e635, #3f6212); } .zw-rmt-card-icon.ssh, .zw-rmt-card-icon.telnet { background: linear-gradient(160deg, #64748b, #0f172a); } .zw-rmt-card-body { display: grid; gap: 4px; min-width: 0; } .zw-rmt-card-body > span { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-rmt-card-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; } .zw-rmt-hostport { display: grid; grid-template-columns: 1fr 120px; gap: 12px; } .zw-rmt-toggles { display: grid; gap: 8px; align-content: end; padding-bottom: 4px; } /* Rechte pro Objekt */ .zw-acc-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; } .zw-acc-list h4 { margin: 10px 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); } .zw-acc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--c-line); } .zw-acc-row div { display: grid; min-width: 0; } .zw-acc-row div span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .zw-acc-icon { color: var(--c-muted); display: inline-flex; } .zw-row.zw-wrap { flex-wrap: wrap; gap: 6px; } /* Fernwartung (RustDesk) */ .zw-rmt-card-icon.rustdesk { background: linear-gradient(160deg, #22d3ee, #0e7490); } .zw-rd-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zw-rd-bar > .zw-input[type=search] { max-width: 260px; } .zw-rd-quick { display: flex; gap: 8px; min-width: min(420px, 100%); } .zw-rd-quick .zw-input { flex: 1; font-variant-numeric: tabular-nums; } .zw-rd-setup { display: grid; gap: 14px; max-width: 820px; } .zw-rd-setup h3 { margin: 0 0 10px; font-size: 15px; } .zw-rd-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; } .zw-rd-cfg { display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-line); } .zw-rd-cfg span { color: var(--c-muted); font-size: 13px; } .zw-rd-cfg code { overflow-wrap: anywhere; font-size: 12.5px; } .zw-rd-session { display: flex; flex-direction: column; height: 100%; background: #0b1220; } .zw-rd-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); } .zw-rd-toolbar > strong { font-size: 13.5px; } .zw-rd-toolbar .zw-muted { font-size: 12.5px; } .zw-rd-stats { color: var(--c-muted); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; } .zw-rd-displays { display: flex; gap: 4px; } .zw-rd-displays button { width: 26px; height: 26px; border: 1px solid var(--c-line); border-radius: 7px; background: transparent; color: var(--c-ink); cursor: pointer; font: inherit; font-size: 12px; } .zw-rd-displays button.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } .zw-rd-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #0b1220; } .zw-rd-stage:fullscreen { background: #000; } .zw-rd-screen { max-width: 100%; max-height: 100%; outline: none; cursor: default; image-rendering: auto; touch-action: none; } .zw-rd-screen:not([width]) { width: 0; height: 0; } .zw-rd-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--c-ink) 82%, transparent); color: #e2e8f0; } .zw-rd-overlay .zw-spinner-wrap, .zw-rd-overlay .zw-loading { color: #e2e8f0; } .zw-rd-message { display: grid; justify-items: center; gap: 10px; max-width: 380px; padding: 24px; text-align: center; } .zw-rd-message strong { font-size: 16px; } .zw-rd-message p { margin: 0; color: #cbd5e1; line-height: 1.5; } .zw-rd-message .zw-input { width: 260px; } .zw-rd-gate { display: none; } /* Projekte */ .zw-pj { display: grid; grid-template-columns: 280px 1fr; height: 100%; min-height: 0; } .zw-pj-side { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; border-right: 1px solid var(--c-line); background: var(--c-subtle, var(--c-raised)); min-height: 0; } .zw-pj-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .zw-pj-side-head h2 { margin: 0; font-size: 18px; } .zw-pj-side .zw-segmented { align-self: stretch; display: flex; } .zw-pj-side .zw-segmented button { flex: 1; } .zw-pj-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; flex: 1; } .zw-pj-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: var(--c-ink); font: inherit; } .zw-pj-item:hover { background: color-mix(in srgb, var(--c-ink) 5%, transparent); } .zw-pj-item.active { background: var(--c-accent-soft, rgba(37, 99, 235, .1)); } .zw-pj-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .zw-pj-item-body { display: grid; min-width: 0; flex: 1; } .zw-pj-item-body strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-item-body small { color: var(--c-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-count { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--c-accent); color: #fff; font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; } .zw-pj-none { padding: 10px; } .zw-pj-main { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 18px 22px; gap: 12px; } .zw-pj-head { display: flex; align-items: center; gap: 14px; } .zw-pj-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; } .zw-pj-title h2 { margin: 0; font-size: 20px; } .zw-pj-title p { margin: 2px 0 0; } .zw-pj-phase select { width: 160px; } .zw-pj-content { display: flex; flex-direction: column; gap: 14px; } .zw-pj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .zw-pj-wide { grid-column: 1 / -1; } .zw-pj-grid h3, .zw-pj-content .zw-card h3 { margin: 0 0 10px; font-size: 14.5px; display: flex; align-items: center; gap: 6px; } .zw-pj-grid .zw-card-head h3 { margin: 0; } .zw-pj-desc { margin: 0 0 12px; white-space: pre-wrap; line-height: 1.5; } .zw-pj-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .zw-pj-people li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; } .zw-pj-people li div { display: grid; min-width: 0; } .zw-pj-people li .zw-muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } .zw-pj-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 18px; } .zw-pj-groups-full { grid-template-columns: 1fr; } .zw-pj-group h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); } .zw-pj-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .zw-pj-link { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 9px; } .zw-pj-link:hover { background: color-mix(in srgb, var(--c-ink) 4%, transparent); } .zw-pj-link-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--c-accent-soft, rgba(37, 99, 235, .1)); color: var(--c-accent); } .zw-pj-link-body { display: grid; min-width: 0; } .zw-pj-link-body strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-link-body span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zw-pj-toolbar p { margin: 0; } .zw-pj-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .zw-pj-type { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); cursor: pointer; font: inherit; font-size: 12.5px; color: var(--c-ink); } .zw-pj-type.active { border-color: var(--c-accent); background: var(--c-accent-soft, rgba(37, 99, 235, .08)); color: var(--c-accent); } .zw-pj-type:disabled { opacity: .5; cursor: default; } .zw-pj-type small { color: var(--c-muted); font-size: 10.5px; } .zw-pj-results { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 2px; } .zw-pj-results > li.zw-muted { padding: 8px; } .zw-pj-result { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--c-ink); } .zw-pj-result:hover:not(:disabled) { background: color-mix(in srgb, var(--c-ink) 5%, transparent); } .zw-pj-result:disabled { opacity: .55; cursor: default; } .zw-pj-result span { display: grid; min-width: 0; } .zw-pj-result small { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-quick { display: flex; gap: 8px; } .zw-pj-quick .zw-input { flex: 1; } .zw-pj-board { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; } .zw-pj-column { padding: 10px; border-radius: 12px; background: var(--c-subtle, var(--c-raised)); border: 1px solid var(--c-line); align-self: start; } .zw-pj-column h4 { margin: 2px 4px 8px; font-size: 13px; } .zw-pj-tasklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .zw-pj-task { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); } .zw-pj-task.done .zw-pj-task-body strong { text-decoration: line-through; color: var(--c-muted); } .zw-pj-task-body { display: grid; min-width: 0; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--c-ink); } .zw-pj-task-body strong { font-size: 13.5px; font-weight: 560; } .zw-pj-task-body span { font-size: 12px; } .zw-pj-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .zw-pj-mails li { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px; border-radius: 10px; } .zw-pj-mails li:hover { background: color-mix(in srgb, var(--c-ink) 4%, transparent); } .zw-pj-mails li.unread .zw-pj-mail-subject { font-weight: 650; } .zw-pj-mail-subject { font-size: 13.5px; margin: 2px 0; } .zw-pj-note-new { display: grid; gap: 8px; } .zw-pj-notes { display: grid; gap: 10px; } .zw-pj-note { padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-pj-note header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .zw-pj-note header .zw-icon-btn { margin-left: auto; } .zw-pj-note-body { white-space: pre-wrap; line-height: 1.5; font-size: 13.5px; } .zw-pj-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 0; } .zw-pj-timeline li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding: 0 0 14px; position: relative; } .zw-pj-timeline li::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--c-line); } .zw-pj-timeline li:last-child::before { display: none; } .zw-pj-tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent); margin-top: 3px; } .zw-pj-timeline li.object .zw-pj-tl-dot { background: #0891b2; } .zw-pj-timeline p { margin: 0; font-size: 13.5px; } .zw-pj-contacts { display: grid; gap: 6px; justify-items: start; } .zw-pj-contact-row { display: grid; grid-template-columns: 1fr 1.2fr .8fr auto; gap: 6px; width: 100%; } .zw-pj-colors { display: flex; gap: 8px; } .zw-pj-colors button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; } .zw-pj-colors button.active { border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-surface) inset; } .zw-form-grid.three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 760px) { .zw-pj { grid-template-columns: 1fr; } .zw-pj-side { border-right: 0; border-bottom: 1px solid var(--c-line); max-height: 40%; overflow: auto; } .zw-pj-board { grid-template-columns: 1fr; } } .zw-pj-mails li { cursor: pointer; } /* Projekte (Pagico-Ausbau): Navigation, Agenda, Listen, Unteraufgaben, Zeitleiste, Phasen, Termine, Rückverweise */ .zw-pj-nav { display: grid; gap: 2px; } .zw-pj-navitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--c-ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; } .zw-pj-navitem:hover { background: color-mix(in srgb, var(--c-ink) 5%, transparent); } .zw-pj-navitem.active { background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-navitem span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-saved { font-weight: 500; padding-block: 6px; } .zw-pj-saved-head { margin-top: 8px; } .zw-pj-search { padding: 14px; } .zw-pj-search-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-items: center; } .zw-pj-search-q { grid-column: 1 / -1; } .zw-pj-search-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; } .zw-pj-search-check input { margin: 0; } .zw-pj-search-actions { gap: 8px; flex-wrap: wrap; } .zw-pj-search-results { margin-top: 14px; } .zw-pj-search-count { margin: 0 0 8px; font-size: 13px; } .zw-pj-search-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 0; color: var(--c-muted); } .zw-pj-list-head { display: flex; align-items: center; gap: 5px; margin: 8px 10px 2px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); } .zw-pj-tagfilter { display: flex; flex-wrap: wrap; gap: 4px; } .zw-pj-tagfilter:empty { display: none; } .zw-pj-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface); color: var(--c-muted); font: inherit; font-size: 11.5px; font-weight: 600; } button.zw-pj-tag { cursor: pointer; } .zw-pj-tag.active { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .zw-pj-crumb { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: 12px; cursor: pointer; } .zw-pj-crumb:hover { color: var(--c-accent); } .zw-icon-btn.active { color: var(--c-accent); background: var(--c-accent-soft); } .zw-pj-head .zw-pj-title { min-width: 0; } .zw-pj-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 22px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-chip i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .zw-pj-chip:hover { border-color: var(--c-line-strong); } .zw-pj-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .zw-pj-progress { height: 5px; border-radius: 3px; background: var(--c-subtle); overflow: hidden; } .zw-pj-progress span { display: block; height: 100%; border-radius: 3px; transition: width .2s; } .zw-pj-progress.large { height: 7px; } /* Übersicht eines Projekts */ .zw-pj-content > .zw-pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .zw-pj-summary { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 18px; align-items: center; } .zw-pj-summary-progress { display: grid; gap: 7px; } .zw-pj-summary-progress strong { font-size: 16px; } .zw-pj-quickbar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .zw-pj-quickaction { display: grid; justify-items: center; gap: 4px; min-width: 78px; padding: 8px 8px 7px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; } .zw-pj-quickaction:hover { border-color: var(--c-accent); color: var(--c-accent); } .zw-pj-quickaction .zw-i { color: var(--c-accent); } .zw-pj-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #16506b, #1a6f8f); color: #fff; } .zw-pj-next .zw-kicker, .zw-pj-next .zw-muted { color: rgba(255, 255, 255, .75); } .zw-pj-next h3 { margin: 3px 0 2px; font-size: 16px; color: #fff; } .zw-pj-next p { margin: 0; } .zw-pj-next .zw-btn:not(.primary) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; } .zw-pj-next .zw-btn.primary { background: #fff; border-color: #fff; color: #16506b; } .zw-pj-next .zw-btn.primary:hover { background: #eaf3f7; } .zw-pj-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .zw-pj-mini-card { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); text-align: left; font: inherit; color: var(--c-ink); cursor: pointer; } .zw-pj-mini-card:hover { border-color: var(--c-line-strong); box-shadow: 0 2px 8px rgba(15, 33, 52, .06); } .zw-pj-mini-card strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-mini-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .zw-pj-mini-events li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 4px; border-radius: 8px; cursor: pointer; } .zw-pj-mini-events li:hover { background: color-mix(in srgb, var(--c-ink) 4%, transparent); } .zw-pj-mini-events li div { display: grid; min-width: 0; } .zw-pj-date { display: grid; justify-items: center; width: 40px; padding: 4px 0; border-radius: 8px; background: var(--c-accent-soft); color: var(--c-accent); line-height: 1.1; } .zw-pj-date strong { font-size: 15px; } .zw-pj-date small { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; } /* Aufgaben: Listen, Unteraufgaben, Ziehen */ .zw-pj-sections { display: grid; gap: 14px; } .zw-pj-section { padding: 10px 12px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); transition: border-color .12s, background .12s; } .zw-pj-section.drop { border-color: var(--c-accent); background: var(--c-accent-soft); } .zw-pj-section > header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .zw-pj-section > header h3 { margin: 0; font-size: 14px; } .zw-pj-empty-list { margin: 4px 2px 8px; } .zw-pj-task-wrap { list-style: none; display: grid; gap: 4px; } .zw-pj-subtasks { list-style: none; margin: 0 0 2px 34px; padding: 0 0 0 10px; display: grid; gap: 4px; border-left: 2px solid var(--c-line); } .zw-pj-task { grid-template-columns: auto auto 1fr auto auto; padding: 7px 8px 7px 6px; } .zw-pj-board .zw-pj-task, .zw-pj-agenda .zw-pj-task { grid-template-columns: auto 1fr auto; padding: 7px 10px; } .zw-pj-board .zw-pj-task .zw-pj-grip { display: none; } .zw-pj-board .zw-pj-task { grid-template-columns: auto 1fr auto; align-items: start; row-gap: 4px; cursor: grab; } .zw-pj-board .zw-pj-task > input { margin-top: 3px; } .zw-pj-board .zw-pj-task-meta { grid-column: 2 / 3; grid-row: 2; justify-content: flex-start; } .zw-pj-board .zw-pj-task > .zw-icon-btn { grid-column: 3; grid-row: 1; } .zw-form-grid.top { align-items: start; } .zw-pj-task.child { padding: 2px 6px 2px 6px; border-color: transparent; background: var(--c-subtle); } .zw-pj-task.child .zw-icon-btn { width: 26px; height: 26px; } .zw-pj-task .zw-icon-btn { opacity: .55; } .zw-pj-task:hover .zw-icon-btn { opacity: 1; } .zw-pj-subtasks { gap: 3px; } .zw-pj-task.child .zw-pj-task-body strong { font-size: 13px; font-weight: 500; } .zw-pj-task.overdue { border-color: color-mix(in srgb, var(--c-bad) 35%, var(--c-line)); } .zw-pj-task.dragging { opacity: .4; } .zw-pj-task.drop-before { box-shadow: 0 -2px 0 var(--c-accent); } .zw-pj-task.drop-after { box-shadow: 0 2px 0 var(--c-accent); } .zw-pj-grip { display: grid; place-items: center; color: var(--c-line-strong); cursor: grab; } .zw-pj-task:hover .zw-pj-grip { color: var(--c-muted); } .zw-pj-task-notes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-task-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .zw-pj-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--c-muted); white-space: nowrap; } .zw-pj-meta.bad { color: var(--c-bad); font-weight: 600; } button.zw-pj-meta.link { max-width: 180px; overflow: hidden; text-overflow: ellipsis; padding: 1px 7px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); font: inherit; font-size: 11.5px; color: var(--c-ink); cursor: pointer; } button.zw-pj-meta.link:hover { border-color: var(--c-accent); color: var(--c-accent); } .zw-pj-prio { display: inline-flex; color: #dc6d1f; } .zw-avatar.tiny { width: 22px; height: 22px; font-size: 9.5px; } .zw-pj-quick.inline { margin-top: 6px; position: relative; } .zw-pj-quick.inline .zw-input { padding-left: 30px; border-style: dashed; background: transparent; } .zw-pj-quick.inline .zw-input:focus { border-style: solid; background: var(--c-surface); } .zw-pj-quick-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--c-muted); display: grid; } .zw-pj-column.drop { border-color: var(--c-accent); background: var(--c-accent-soft); } /* Projektübergreifend: Agenda, Kennzahlen, Termine */ .zw-pj-dash-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .zw-pj-dash-head h2 { margin-top: 2px; } .zw-pj-dash-head p { margin: 0; } .zw-pj-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .zw-pj-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-pj-stat strong { font-size: 22px; font-variant-numeric: tabular-nums; } .zw-pj-stat span { color: var(--c-muted); font-size: 12px; } .zw-pj-stat.bad strong { color: var(--c-bad); } .zw-pj-dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; } .zw-pj-dash-side { display: grid; gap: 14px; } .zw-pj-dash h3 { display: flex; align-items: center; gap: 7px; } .zw-pj-agenda { display: grid; gap: 14px; } .zw-pj-agenda-group h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); } .zw-pj-agenda-group.overdue h4 { color: var(--c-bad); } .zw-pj-events { display: grid; gap: 10px; } .zw-pj-event-day h5 { margin: 0 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); } .zw-pj-event { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--c-line); } .zw-pj-event:first-of-type { border-top: 0; } .zw-pj-event div { display: grid; min-width: 0; } .zw-pj-event-time { font-size: 12px; font-weight: 650; color: var(--c-accent); font-variant-numeric: tabular-nums; padding-top: 1px; } .zw-pj-events-full { display: grid; gap: 14px; } .zw-pj-events-full h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); } .zw-pj-event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .zw-pj-event-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); } .zw-pj-event-row div { display: grid; min-width: 0; } .zw-pj-event-row.past { opacity: .7; } .zw-pj-event-row.past .zw-pj-date { background: var(--c-subtle); color: var(--c-muted); } /* Phasen-Board */ .zw-pj-board.phases { grid-template-columns: repeat(4, minmax(200px, 1fr)); } .zw-pj-cards { display: grid; gap: 8px; } .zw-pj-card { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid var(--c-line); border-left: 4px solid var(--zw-pj-color); border-radius: 10px; background: var(--c-surface); cursor: pointer; } .zw-pj-card[draggable=true] { cursor: grab; } .zw-pj-card:hover { box-shadow: 0 2px 8px rgba(15, 33, 52, .08); } .zw-pj-card strong { font-size: 13.5px; } .zw-pj-card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--c-muted); } .zw-pj-card-foot span { display: inline-flex; align-items: center; gap: 4px; } .zw-pj-card-foot .bad { color: var(--c-bad); font-weight: 600; } /* Zeitleiste (Balkenplan, Bedienung wie im Projektplan von zitro_one_crm) */ .zw-tl { position: relative; overflow: auto; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); max-height: 100%; min-height: 160px; user-select: none; } .zw-tl-head, .zw-tl-row { display: grid; grid-template-columns: var(--zw-tl-label) calc(var(--zw-tl-col) * var(--zw-tl-days)); width: max-content; } .zw-tl-head { position: sticky; top: 0; z-index: 4; background: var(--c-surface); border-bottom: 1px solid var(--c-line); } .zw-tl-corner { position: sticky; left: 0; z-index: 5; background: var(--c-surface); border-right: 1px solid var(--c-line); } .zw-tl-scale { display: grid; } .zw-tl-months, .zw-tl-weeks { display: flex; } .zw-tl-months span, .zw-tl-weeks span { flex: none; padding: 5px 6px 2px; border-left: 1px solid var(--c-line); white-space: nowrap; overflow: hidden; box-sizing: border-box; } .zw-tl-months span { font-size: 11.5px; font-weight: 650; color: var(--c-ink); } .zw-tl-weeks span { padding: 1px 6px 4px; font-size: 10.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; } .zw-tl-days { display: grid; grid-template-columns: repeat(var(--zw-tl-days), var(--zw-tl-col)); } .zw-tl-days span { padding: 2px 0 5px; text-align: center; font-size: 10.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; } .zw-tl-days span.weekend { background: color-mix(in srgb, var(--c-ink) 3.5%, transparent); } .zw-tl-days span.today { color: #fff; background: var(--c-accent); border-radius: 6px 6px 0 0; font-weight: 700; } .zw-tl-body { position: relative; width: max-content; } .zw-tl-shade { position: absolute; top: 0; bottom: 0; left: var(--zw-tl-label); width: calc(var(--zw-tl-col) * var(--zw-tl-days)); pointer-events: none; } .zw-tl-shade i { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--c-ink) 3%, transparent); } .zw-tl-row { position: relative; border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 5%, transparent); } .zw-tl-row:hover { background: color-mix(in srgb, var(--c-ink) 2%, transparent); } .zw-tl-label { position: sticky; left: 0; z-index: 3; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border: 0; border-right: 1px solid var(--c-line); background: var(--c-surface); text-align: left; font: inherit; color: var(--c-ink); } button.zw-tl-label { cursor: pointer; } button.zw-tl-label:hover strong { color: var(--c-accent); } .zw-tl-label span { display: grid; min-width: 0; } .zw-tl-label strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-tl-label small { font-size: 11px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-tl-row.group .zw-tl-label strong { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); } .zw-tl-row.group, .zw-tl-row.group .zw-tl-label { background: var(--c-subtle); } .zw-tl-caret { width: 0; height: 0; border-left: 5px solid var(--c-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: rotate(90deg); transition: transform .12s; flex: none; } .zw-tl-caret.closed { transform: none; } .zw-tl-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; } .zw-tl-track { position: relative; min-height: 34px; } .zw-tl-bar, .zw-tl-milestone { position: absolute; top: 50%; left: calc(var(--s) * var(--zw-tl-col)); z-index: 2; } .zw-tl-bar { width: calc(var(--l) * var(--zw-tl-col) - 4px); margin-left: 2px; height: 20px; transform: translateY(-50%); box-sizing: border-box; border-radius: 6px; background: color-mix(in srgb, var(--zw-tl-color) 22%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--zw-tl-color) 55%, var(--c-surface)); color: color-mix(in srgb, var(--zw-tl-color) 75%, var(--c-ink)); font-size: 11px; font-weight: 600; overflow: visible; cursor: pointer; display: flex; align-items: center; } .zw-tl-bar-label { padding: 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .zw-tl-bar.project { height: 24px; background: var(--zw-tl-color); border-color: var(--zw-tl-color); color: #fff; } .zw-tl-bar.event { background: color-mix(in srgb, #0891b2 16%, var(--c-surface)); border-color: color-mix(in srgb, #0891b2 50%, var(--c-surface)); color: color-mix(in srgb, #0891b2 60%, var(--c-ink)); } .zw-tl-bar.done, .zw-tl-milestone.done { opacity: .5; } .zw-tl-bar.done .zw-tl-bar-label { text-decoration: line-through; } .zw-tl-bar.overdue { border-color: var(--c-bad); box-shadow: inset 0 0 0 1px var(--c-bad); } .zw-tl-bar.cut-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } .zw-tl-bar.cut-right { border-top-right-radius: 0; border-bottom-right-radius: 0; } .zw-tl-milestone { width: 12px; height: 12px; margin-left: calc(var(--zw-tl-col) / 2 - 6px); transform: translateY(-50%) rotate(45deg); border-radius: 2px; background: var(--zw-tl-color); cursor: pointer; } .zw-tl-milestone.overdue { background: var(--c-bad); } .zw-tl-bar.editable, .zw-tl-milestone.editable { cursor: grab; touch-action: none; } .zw-tl-bar.moving, .zw-tl-milestone.moving { cursor: grabbing; box-shadow: 0 4px 12px rgba(15, 33, 52, .2); z-index: 3; } .zw-tl-bar:focus-visible, .zw-tl-milestone:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .zw-tl-bar[aria-busy=true] { opacity: .6; } .zw-tl-bar.target, .zw-tl-milestone.target { outline: 2px dashed var(--c-accent); outline-offset: 2px; } .zw-tl-h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; } .zw-tl-h.l { left: -2px; } .zw-tl-h.r { right: -2px; } .zw-tl-dot { position: absolute; right: -11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 2px solid var(--c-surface); border-radius: 50%; background: var(--c-accent); cursor: crosshair; opacity: 0; transition: opacity .12s; } .zw-tl-milestone .zw-tl-dot { right: -12px; transform: rotate(-45deg); } .zw-tl-bar:hover .zw-tl-dot, .zw-tl-milestone:hover .zw-tl-dot, .zw-tl-bar:focus .zw-tl-dot { opacity: 1; } .zw-tl-links { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 1; } .zw-tl-link { fill: none; stroke: var(--c-muted); stroke-width: 1.5; } .zw-tl-link.conflict { stroke: var(--c-bad); stroke-dasharray: 4 3; } .zw-tl-link.new { stroke: var(--c-accent); stroke-dasharray: 4 3; } .zw-tl-arrowhead { fill: var(--c-muted); } .zw-tl-link-hit { fill: none; stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: pointer; } .zw-tl-link-hit:hover + .zw-tl-link, .zw-tl-link-hit:hover { stroke: rgba(178, 59, 70, .25); } .zw-tl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-accent); opacity: .45; pointer-events: none; z-index: 1; } .zw-tl-tip { position: absolute; z-index: 6; padding: 3px 8px; border-radius: 6px; background: #13202d; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; pointer-events: none; } .zw-tl-done { align-items: center; font-size: 12.5px; } .zw-tl-done input { margin-top: 0; } /* „In Projekten“ in anderen Apps */ .zw-pj-related { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-line); } .zw-pj-related:empty { display: none; } .zw-pj-related h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); } .zw-pj-related-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .zw-btn.small.quiet { height: 24px; padding: 0 8px; } @media (max-width: 1100px) { .zw-pj-content > .zw-pj-grid { grid-template-columns: 1fr; } .zw-pj-dash { grid-template-columns: 1fr; } .zw-pj-stats { grid-template-columns: repeat(2, 1fr); } .zw-pj-summary { grid-template-columns: 1fr; } .zw-pj-quickbar { justify-content: flex-start; } } @media (max-width: 760px) { .zw-pj-board.phases { grid-template-columns: 1fr; } .zw-pj-task { grid-template-columns: auto auto 1fr auto; } .zw-pj-task-meta { grid-column: 3 / -1; justify-content: flex-start; } .zw-pj-event-row { grid-template-columns: auto 1fr auto; } } /* ------------------------------------------------------------------ Cloud Manager */ .zw-cloud { height: 100%; display: flex; flex-direction: column; background: var(--c-canvas); } .zw-cloud > .zw-layout { flex: 1; } .zw-cloud-side { gap: 1px; } .zw-cloud-brand { display: grid; padding: 4px 10px 10px; } .zw-cloud-brand strong { font-size: 15px; letter-spacing: -.01em; } .zw-cloud-brand .zw-wordmark { justify-self: start; margin-bottom: 4px; font-size: 19px; } .zw-cloud-brand small { color: var(--c-muted); font-size: 11.5px; } .zw-cloud-scope { margin: 0 2px 6px; height: 32px; font-size: 12.5px; } .zw-cloud-scope-one { display: flex; align-items: center; gap: 7px; margin: 0 2px 6px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c-surface) 60%, transparent); color: var(--c-ink-2); font-size: 12.5px; font-weight: 600; } .zw-cloud-scope-one span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-side-badge.bad { background: var(--c-bad); } .zw-cloud-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .zw-cloud-toolbar > .zw-input[type=search] { max-width: 300px; } .zw-cloud-toolbar > p { margin: 0; flex: 1 1 320px; font-size: 13px; } .zw-cloud-bulk { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 10px; background: var(--c-accent-soft); } .zw-cloud-name { display: grid; line-height: 1.3; } .zw-cloud-name small { font-size: 11.5px; } .zw-cloud-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c-muted); } .zw-cloud-status i { width: 8px; height: 8px; border-radius: 50%; background: #9aa8b4; } .zw-cloud-status.good { color: var(--c-good); } .zw-cloud-status.good i { background: #22a06b; box-shadow: 0 0 0 3px rgba(34, 160, 107, .16); } .zw-cloud-status.warn i { background: #d99a2b; } .zw-cloud-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; } .zw-cloud-two > .zw-card + .zw-card { margin-top: 0; } .zw-cloud-two .zw-card h3, .zw-cloud-conn h3, .zw-card > h3 { margin: 0 0 10px; font-size: 14.5px; } .zw-cloud-tile { text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; } .zw-cloud-tile:hover { border-color: var(--c-accent); box-shadow: 0 4px 14px rgba(15, 33, 52, .08); } .zw-cloud-tile small:first-child, .zw-cloud-stat small:first-child { display: flex; align-items: center; gap: 6px; } .zw-cloud-stat strong { font-size: 18px; overflow-wrap: anywhere; } .zw-cloud-mini-list { display: grid; } .zw-cloud-mini-list > * { display: grid; grid-template-columns: 96px 1fr auto auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--c-line); background: transparent; text-align: left; font: inherit; color: inherit; } .zw-cloud-mini-list > button { cursor: pointer; border-radius: 6px; } .zw-cloud-mini-list > button:hover { background: var(--c-subtle); } .zw-cloud-mini-list > *:last-child { border-bottom: 0; } .zw-cloud-mini-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .zw-cloud-limit { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--c-line); } .zw-cloud-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .zw-cloud-detail-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #7dd3fc, #0f4c81); } .zw-cloud-detail-title h2 { margin: 0; font-size: 19px; } .zw-cloud-detail-title p { margin: 2px 0 0; font-size: 12.5px; } .zw-cloud-detail-body { padding-top: 14px; } .zw-cloud-mini { display: grid; gap: 6px; } .zw-cloud-mini-row { display: grid; grid-template-columns: 52px 1fr 80px; align-items: center; gap: 10px; font-size: 12.5px; } .zw-cloud-mini-row > span { color: var(--c-muted); } .zw-cloud-mini-row > strong { text-align: right; font-variant-numeric: tabular-nums; } .zw-cloud-costline { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 13px; } .zw-cloud-costline strong { margin-left: auto; } .zw-cloud-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; } .zw-cloud-charts > .zw-card + .zw-card { margin-top: 0; } .zw-cloud-hint { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--c-subtle); font-size: 13px; } .zw-cloud-hint span { flex: 1; } .zw-cloud-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .zw-cloud-danger { border-color: color-mix(in srgb, var(--c-bad) 35%, var(--c-line)); } .zw-cloud-danger h3 { color: var(--c-bad); } .zw-cloud-members { display: flex; flex-wrap: wrap; gap: 8px; } .zw-cloud-member { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 12.5px; } .zw-cloud-member .zw-mono { color: var(--c-muted); } .zw-cloud-rules { display: grid; gap: 6px; } .zw-cloud-rule { display: grid; grid-template-columns: 120px 90px 110px 1fr 1fr 34px; gap: 6px; align-items: center; } .zw-cloud-price { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--c-subtle); } .zw-cloud-price-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; padding: 3px 0; } .zw-cloud-price-row strong { font-size: 15px; font-variant-numeric: tabular-nums; } .zw-cloud-price-row small { grid-column: 1 / -1; font-size: 11.5px; } .zw-cloud-price-row:first-child strong { font-size: 19px; } .zw-cloud-consequences { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--c-bad-ink); } .zw-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; cursor: pointer; } .zw-check input { margin-top: 3px; flex: none; } .zw-cloud-create { display: grid; gap: 10px; max-height: min(64vh, 640px); overflow-y: auto; padding-right: 4px; } .zw-cloud-create h4 { margin: 6px 0 0; font-size: 13px; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; } .zw-cloud-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .zw-cloud-pick.images { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .zw-cloud-pick button { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); text-align: left; cursor: pointer; font: inherit; color: inherit; } .zw-cloud-pick button:hover { border-color: var(--c-line-strong); } .zw-cloud-pick button.active { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-soft); } .zw-cloud-pick strong { font-size: 13.5px; } .zw-cloud-pick span { color: var(--c-muted); font-size: 12px; } .zw-cloud-pick em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--c-accent); } .zw-cloud-conn-title { display: flex; align-items: center; gap: 10px; } .zw-cloud-conn-title h3 { margin: 0; } .zw-cloud-conn-title p { margin: 0; font-size: 12.5px; } .zw-cloud-conn-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); } .zw-cloud-conn .zw-kv { margin: 6px 0 12px; } .zw-cloud-hero { max-width: 620px; margin: auto; padding: 40px 28px; display: grid; justify-items: center; gap: 14px; text-align: center; } .zw-cloud-hero h2 { margin: 0; font-size: 22px; } .zw-cloud-hero h2 .zw-wordmark { font-size: 1.15em; margin-right: .12em; } .zw-cloud-hero p { margin: 0; line-height: 1.55; } .zw-cloud-hero .zw-checklist { text-align: left; margin: 6px 0; } .zw-cloud-hero-icon { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #7dd3fc, #0f4c81); box-shadow: 0 12px 30px rgba(15, 76, 129, .3); } .zw-cloud-done { max-width: 460px; margin: 12vh auto; padding: 28px; border-radius: 14px; background: var(--c-surface); text-align: center; box-shadow: 0 20px 50px rgba(2, 10, 22, .12); } .zw-cloud-done[data-result=ok] h1::before { content: "✓ "; color: var(--c-good); } .zw-cloud .zw-card .zw-empty { padding: 10px 0 4px; } .zw-cloud .zw-card .zw-empty-icon { display: none; } .zw-cloud .zw-card .zw-empty strong { font-weight: 500; color: var(--c-muted); font-size: 13px; } /* KI-Konsole */ .zw-ai-console { height: 100%; display: flex; flex-direction: column; min-height: 0; } .zw-ai-console .zw-row { flex-wrap: nowrap; } .zw-ai-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .zw-ai-split .zw-card { min-width: 0; overflow: hidden; } .zw-ai-top li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--c-line); } .zw-ai-top li:last-child { border-bottom: 0; } .zw-ai-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .zw-ai-top span { color: var(--c-muted); font-size: 12.5px; white-space: nowrap; } .zw-ai-console .zw-main > * + * { margin-top: 14px; } .zw-ai-setup { display: flex; align-items: center; gap: 14px; border-color: color-mix(in srgb, #7c5cc4 30%, var(--c-line)); background: linear-gradient(120deg, color-mix(in srgb, #7c5cc4 9%, var(--c-surface)), color-mix(in srgb, #2f7fc1 8%, var(--c-surface))); } .zw-ai-setup > svg { flex: none; color: #7c5cc4; } .zw-ai-setup > div { flex: 1; } .zw-ai-setup p { margin: 2px 0 0; } .zw-ai-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .zw-ai-split .zw-card + .zw-card { margin-top: 0; } .zw-ai-split h3 { margin: 0 0 8px; font-size: 14px; } .zw-ai-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .zw-ai-toolbar .zw-input { width: auto; min-width: 140px; } .zw-ai-toolbar input[type=search] { min-width: 220px; } .zw-ai-code { font-size: 12px; color: var(--c-ink-2); word-break: break-all; } .zw-ai-rules { max-width: 760px; } .zw-ai-rules .zw-card h3 { margin: 0 0 10px; font-size: 14px; } .zw-ai-rules .zw-card > * + * { margin-top: 10px; } .zw-ai-rules .zw-card + .zw-card { margin-top: 0; } .zw-form-row { display: flex; flex-wrap: wrap; gap: 12px 18px; } .zw-form-row > .zw-field { flex: 1 1 180px; } .zw-ai-pager { display: flex; align-items: center; gap: 8px; margin-top: 10px; } /* KI-Antworten (Markdown) */ .zw-md { line-height: 1.55; } .zw-md > :first-child { margin-top: 0; } .zw-md p, .zw-md ul, .zw-md ol { margin: 0 0 10px; } .zw-md ul, .zw-md ol { padding-left: 20px; } .zw-md li + li { margin-top: 3px; } .zw-md h3, .zw-md h4, .zw-md h5, .zw-md h6 { margin: 14px 0 6px; font-size: 14px; } .zw-md code { padding: 1px 4px; border-radius: 4px; background: var(--c-subtle, var(--c-subtle)); font-size: 12.5px; } .zw-fs-ai { max-height: 60vh; overflow-y: auto; min-height: 120px; } .zw-fs-ai-note { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12px; } .zw-ai-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } .zw-ai-preview { padding: 10px 12px; border: 1px dashed var(--c-line-strong, var(--c-line-strong)); border-radius: 8px; background: var(--c-subtle, var(--c-subtle)); } .zw-ai-preview p { margin: 0 0 4px; white-space: pre-wrap; } .zw-ai-prompts { display: grid; gap: 12px; } .zw-ai-prompt { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-raised); } .zw-ai-review { margin-top: 6px; font-size: 12px; } .zw-ai-prompt .zw-form-row { align-items: end; } .zw-ai-prompt .zw-form-row > div:last-child { flex: 0 0 auto; } .zw-ai-rules code.zw-ai-mono { padding: 4px 8px; border-radius: 6px; background: var(--c-subtle, var(--c-subtle)); word-break: break-all; } .zw-ai-rules ul.zw-muted { margin: 0; padding-left: 18px; } .zw-md-caret { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: #7c5cc4; animation: zw-caret 1s steps(2) infinite; } @keyframes zw-caret { 50% { opacity: 0; } } .zw-pj-main > .zw-tabs { flex: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .zw-pj-main > .zw-tabs button { white-space: nowrap; flex: none; } /* Remote-Speicher (Polaris, Verbinden-Dialog) */ .zw-fs-remotes { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; } .zw-fs-remotes .zw-side-title { align-items: center; padding-right: 2px; } .zw-fs-remotes .zw-icon-btn.small { width: 24px; height: 24px; } .zw-fs-remotes .zw-side-btn small { margin-left: auto; } .zw-fs-connect { color: var(--c-muted); } .zw-text-warn { color: var(--c-warn); display: inline-flex; } .zw-text-bad { color: var(--c-bad); } .zw-rs-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .zw-rs-preset { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); text-align: left; cursor: pointer; color: inherit; font: inherit; } .zw-rs-preset:hover, .zw-rs-preset:focus-visible { border-color: var(--c-accent); background: var(--c-accent-soft); outline: none; } .zw-rs-preset-icon { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--c-subtle); color: var(--c-accent); } .zw-rs-preset small { color: var(--c-muted); font-size: 11.5px; line-height: 1.35; } .zw-rs-manual summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--c-ink-2); } .zw-rs-manual[open] { display: grid; gap: 8px; } .zw-rs-manual code { padding: 4px 8px; border-radius: 6px; background: var(--c-subtle); font-size: 12px; } .zw-rs-note { display: flex; align-items: center; gap: 5px; font-size: 12px; } .zw-rs-name { display: flex; align-items: center; gap: 10px; min-width: 180px; } .zw-rs-preset-icon.small { width: 32px; height: 32px; flex: none; } .zw-rs-fields { align-items: start; } .zw-rs-actions { display: flex; gap: 2px; white-space: nowrap; } /* Projekte: Mein Tag (Ivy-Lee / Rapid Day Planner), Kalender-Abo */ .zw-pj-method { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; } .zw-pj-myday { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .zw-pj-myday-item { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); cursor: grab; } .zw-pj-myday-item.done .zw-pj-myday-body strong { text-decoration: line-through; color: var(--c-muted); } .zw-pj-myday-item.dragging { opacity: .4; } .zw-pj-myday-item.drop-before { box-shadow: 0 -2px 0 var(--c-accent); } .zw-pj-myday-item.over-limit { border-style: dashed; } .zw-pj-myday-body { display: grid; gap: 4px; min-width: 0; } .zw-pj-myday-body .zw-pj-task-meta { justify-content: flex-start; } .zw-pj-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .zw-pj-myday-item.done .zw-pj-rank, .zw-pj-myday-mini li.done .zw-pj-rank { background: var(--c-good); } .zw-pj-candidates { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 520px; overflow-y: auto; } .zw-pj-candidate { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--c-line); } .zw-pj-candidate:last-child { border-bottom: 0; } .zw-pj-candidate > div { display: grid; gap: 3px; min-width: 0; } .zw-pj-candidate .zw-pj-task-meta { justify-content: flex-start; } .zw-pj-candidate .zw-btn.small { width: 30px; padding: 0; } .zw-pj-carry { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--c-warn) 30%, var(--c-line)); border-radius: 12px; background: var(--c-warn-soft); color: var(--c-warn); } .zw-pj-carry > div { display: grid; flex: 1; min-width: 0; } .zw-pj-carry .zw-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-allgood { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--c-good); font-weight: 600; } .zw-pj-myday-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .zw-pj-myday-mini li { display: flex; align-items: center; gap: 8px; font-size: 13px; } .zw-pj-myday-mini li.done span:last-child { text-decoration: line-through; color: var(--c-muted); } .zw-pj-myday-mini .zw-pj-rank { width: 20px; height: 20px; font-size: 11px; } .zw-pj-plan { width: 28px; height: 28px; color: var(--c-muted); } .zw-pj-plan.active { color: #d97706; background: color-mix(in srgb, #f59e0b 18%, var(--c-surface)); } .zw-pj-meta.today { color: #d97706; } .zw-pj-important { align-self: end; padding-bottom: 8px; } .zw-pj-feed-url { display: block; padding: 8px 10px; border-radius: 8px; background: var(--c-subtle); word-break: break-all; user-select: all; } /* Schnelleingabe (Pagico-artig): Live-Vorschau, Tagesvorschau, Hinweise */ .zw-pj-capture { display: block; } .zw-pj-cap-row { position: relative; display: flex; align-items: center; gap: 8px; } .zw-pj-cap-field { position: relative; flex: 1; min-width: 0; display: block; } .zw-pj-cap-field > .zw-input { width: 100%; } .zw-pj-cap-chips { display: none; gap: 4px; flex: none; } .zw-pj-capture:focus-within .zw-pj-cap-chips:not(:empty) { display: inline-flex; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; } .zw-pj-dayentry .zw-pj-cap-row > select { flex: none; width: auto; max-width: 240px; padding-left: 10px; border-style: solid; background: var(--c-surface); } .zw-pj-cap-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .zw-pj-cap-chip.prio { background: color-mix(in srgb, #ea580c 14%, var(--c-surface)); color: color-mix(in srgb, #ea580c 75%, var(--c-ink)); } .zw-pj-cap-chip.repeat { background: color-mix(in srgb, #6366f1 14%, var(--c-surface)); color: color-mix(in srgb, #6366f1 80%, var(--c-ink)); } .zw-pj-cap-chip.none { background: color-mix(in srgb, var(--c-ink) 5%, transparent); color: var(--c-muted); font-weight: 500; } .zw-pj-cap-chip.bad { background: var(--c-bad-soft); color: var(--c-bad); } .zw-pj-cap-help { display: none; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; padding: 0 2px; color: var(--c-muted); font-size: 11.5px; } .zw-pj-capture:focus-within .zw-pj-cap-help { display: flex; } .zw-pj-cap-help kbd, .zw-pj-cap-help code { padding: 0 4px; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-surface); font: 600 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--c-ink); } .zw-pj-cap-day { margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: var(--c-surface); border: 1px solid var(--c-line); font-size: 12.5px; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); } .zw-pj-cap-day ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; } .zw-pj-cap-day li { display: flex; align-items: center; gap: 6px; min-width: 0; } .zw-pj-cap-day li > span:not(.zw-pj-cap-time) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-cap-day li small { margin-left: auto; flex: none; } .zw-pj-cap-time { width: 62px; flex: none; color: var(--c-muted); font-variant-numeric: tabular-nums; } .zw-pj-capture.busy .zw-input { opacity: .6; } .zw-pj-subcapture { list-style: none; padding: 2px 0 4px 28px; } .zw-pj-subcapture .zw-pj-quick.inline { margin-top: 2px; } .zw-pj-groupby .zw-input { height: 32px; font-size: 12.5px; } .zw-pj-fields { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 13px; } .zw-pj-fields dt { color: var(--c-muted); } .zw-pj-fields dd { margin: 0; overflow-wrap: anywhere; } .zw-pj-field-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; width: 100%; } .zw-pj-pipeline { display: grid; gap: 6px; } .zw-pj-stages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 2px; } .zw-pj-stage { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); text-align: left; font: inherit; color: var(--c-ink); cursor: pointer; position: relative; } .zw-pj-stage:hover { border-color: var(--c-line-strong); } .zw-pj-stage.active { border-color: var(--c-accent); box-shadow: inset 0 3px 0 var(--c-accent); } .zw-pj-stage.done { background: var(--c-good-soft); } .zw-pj-stage.done .zw-i { color: var(--c-good); } .zw-pj-stage small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.zw-btn { text-decoration: none; } /* Briefpapier & Vorlagen */ .zw-templates-company .zw-wrap { flex-wrap: wrap; } .zw-templates-company .zw-wrap > .zw-field { flex: 1 1 220px; } .zw-templates-logo-row { gap: 16px; align-items: center; } .zw-templates-logo { width: 180px; height: 64px; display: grid; place-items: center; border: 1px dashed var(--c-line-strong); border-radius: 8px; background: #fff; } .zw-templates-logo img { max-width: 170px; max-height: 56px; object-fit: contain; } .zw-color { width: 64px; padding: 2px; height: 34px; } .zw-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .zw-section-head h3 { margin: 0; } .zw-office-templates { margin-top: 24px; } .zw-office-templates h3 { font-size: 14px; margin: 0 0 10px; } .zw-office-new-fields:empty { display: none; } /* ---------------------------------------------------------------- Projekte im Pagico-Stil (Übersicht / Zeitplan / Inhalt) */ .zw-pj-seg-count { margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--c-subtle); color: var(--c-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } .zw-tabs button.active .zw-pj-seg-count { background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-subsegments { margin-bottom: 4px; } .zw-pj-schedule { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Fortschrittsring */ .zw-pj-ring { --size: 18px; flex: 0 0 auto; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(closest-side, var(--c-surface) 64%, transparent 66% 100%), conic-gradient(var(--ring) calc(var(--p) * 1%), var(--c-track) 0); } .zw-pj-summary-ring { display: flex; align-items: center; gap: 14px; } .zw-pj-summary-ring .zw-pj-ring { --size: 76px; background: radial-gradient(closest-side, var(--c-canvas) 76%, transparent 78% 100%), conic-gradient(var(--ring) calc(var(--p) * 1%), var(--c-track) 0); } .zw-pj-summary-ring > div { display: grid; gap: 2px; } .zw-pj-summary-ring strong { font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* Übersicht */ .zw-pj-content.tab-summary > .zw-pj-summary { grid-template-columns: auto minmax(0, 1fr) 190px; gap: 26px; padding: 4px 0 6px; } .zw-pj-summary .zw-pj-stats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 0; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); overflow: hidden; } .zw-pj-summary .zw-pj-stat { border: 0; border-radius: 0; background: transparent; padding: 10px 14px; } .zw-pj-summary .zw-pj-stat { box-shadow: -1px 0 0 var(--c-line-soft), 0 -1px 0 var(--c-line-soft); } .zw-pj-summary .zw-pj-stat strong { font-size: 18px; } .zw-pj-summary .zw-pj-stat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-stat.good strong { color: var(--c-good); } .zw-pj-stat.warn strong { color: var(--c-warn); } .zw-pj-activity { display: grid; gap: 4px; } .zw-pj-activity-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; height: 56px; align-items: end; } .zw-pj-activity-week { position: relative; height: 100%; display: flex; align-items: end; gap: 2px; } .zw-pj-activity-week span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; } .zw-pj-activity-week .created { background: var(--c-line-strong); } .zw-pj-summary-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Inhalt: Arbeitsfläche und Metadaten */ .zw-pj-canvas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; } .zw-pj-canvas.with-meta { grid-template-columns: minmax(0, 1fr) 270px; } .zw-pj-canvas-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .zw-pj-metapanel { position: sticky; top: 0; display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); font-size: 12.5px; } .zw-pj-metapanel > header { display: flex; align-items: center; gap: 6px; } .zw-pj-metapanel > header h3 { margin: 0; font-size: 13.5px; } .zw-pj-metapanel h4 { margin: 8px 0 0; font-size: 11.5px; font-weight: 650; color: var(--c-muted); } .zw-pj-meta-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 26px; } .zw-pj-meta-row > span { color: var(--c-muted); } .zw-pj-meta-row > strong { font-weight: 550; overflow-wrap: anywhere; } .zw-pj-meta-row select.zw-input { height: 28px; padding: 0 8px; font-size: 12.5px; } .zw-pj-metapanel .zw-pj-tags { margin: 0; } .zw-pj-meta-fields { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 8px; margin: 0; } .zw-pj-meta-fields dt { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-meta-fields dd { margin: 0; display: flex; align-items: start; gap: 4px; overflow-wrap: anywhere; } .zw-pj-meta-fields dd .zw-icon-btn { width: 20px; height: 20px; margin-left: auto; opacity: 0; } .zw-pj-meta-fields dd:hover .zw-icon-btn, .zw-pj-meta-fields dd .zw-icon-btn:focus-visible { opacity: 1; } .zw-pj-metapanel > .zw-input { height: 30px; font-size: 12.5px; } .zw-pj-meta-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .zw-pj-meta-people li { display: flex; align-items: center; gap: 7px; min-width: 0; } .zw-pj-meta-people li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-metapanel p { margin: 0; } .zw-icon-btn.active { background: var(--c-accent-soft); color: var(--c-accent); } /* Blöcke für Notizen und Bausteine */ .zw-pj-block { padding: 10px 12px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); display: grid; gap: 8px; } .zw-pj-block > header { display: flex; align-items: center; gap: 8px; } .zw-pj-block > header h3 { margin: 0; font-size: 14px; } .zw-pj-block > p { margin: 0; } .zw-pj-note-new { display: grid; gap: 6px; } .zw-pj-note-input { resize: vertical; min-height: 34px; } .zw-pj-note-new .zw-row { display: none; } .zw-pj-note-new:focus-within .zw-row, .zw-pj-note-new:has(textarea:not(:placeholder-shown)) .zw-row { display: flex; } /* Dichte Aufgabenzeilen in Listen (Pagico): ohne Kästen, Trennlinien, Notiz unter dem Titel */ .zw-pj-section .zw-pj-tasklist { gap: 0; } .zw-pj-section .zw-pj-task-wrap { gap: 0; } .zw-pj-section .zw-pj-task { border: 0; border-bottom: 1px solid var(--c-line-soft); border-radius: 6px; background: transparent; padding: 5px 6px 5px 4px; } .zw-pj-section .zw-pj-task:hover, .zw-pj-section .zw-pj-task.carded { background: var(--c-hover); } .zw-pj-section .zw-pj-task.overdue { border-color: var(--c-line-soft); } .zw-pj-section .zw-pj-task.child { background: transparent; border-bottom: 0; padding-top: 1px; padding-bottom: 1px; } .zw-pj-section .zw-pj-task.child:hover { background: var(--c-hover); } .zw-pj-section .zw-pj-subtasks { padding-left: 26px; } .zw-pj-section .zw-pj-task-notes { color: var(--c-muted); font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .zw-pj-section > header .zw-pj-ring { --size: 16px; } .zw-pj-section .zw-pj-meta.bad, .zw-pj-allgroup .zw-pj-meta.bad { color: var(--c-bad-ink, var(--c-bad)); background: var(--c-bad-soft); border-radius: 5px; padding: 0 5px; font-weight: 600; } .zw-pj-hover { opacity: 0 !important; width: 26px; height: 26px; } .zw-pj-task:hover .zw-pj-hover, .zw-pj-hover:focus-visible { opacity: 1 !important; } /* Pipeline-Ansicht einer Liste */ .zw-pj-pipe-toggle.active { background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-pipe { list-style: none; margin: 0; padding: 2px 0 4px; display: flex; gap: 0; overflow-x: auto; } .zw-pj-pipe li { flex: 1 1 0; min-width: 130px; } .zw-pj-pipe button { width: 100%; height: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 18px 8px 16px; border: 0; font: inherit; cursor: pointer; color: var(--c-ink); background: var(--c-subtle); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); } .zw-pj-pipe li:first-child button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 8px 0 0 8px; } .zw-pj-pipe li + li { margin-left: -6px; } .zw-pj-pipe strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-pipe small { font-size: 11px; color: var(--c-muted); } .zw-pj-pipe li.done button { background: color-mix(in srgb, var(--c-good) 16%, var(--c-surface)); } .zw-pj-pipe li.done strong { text-decoration: line-through; color: var(--c-muted); } .zw-pj-pipe li.current button { background: var(--c-accent); color: var(--c-on-accent); } .zw-pj-pipe li.current small { color: color-mix(in srgb, var(--c-on-accent) 80%, transparent); } .zw-pj-pipe button:hover { filter: brightness(.96); } /* Projektzeiten: laufender Timer im Kopf und kompaktes Wochenbuch. */ .zw-pj-timer { max-width: 430px; display: flex; align-items: center; gap: 7px; padding: 4px 5px 4px 9px; border: 1px solid color-mix(in srgb, var(--c-good) 36%, var(--c-line)); border-radius: 9px; background: var(--c-good-soft); font-size: 12px; } .zw-pj-timer-pulse { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--c-good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-good) 40%, transparent); animation: zw-pj-time-pulse 1.8s infinite; } @keyframes zw-pj-time-pulse { 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .zw-pj-timer-label { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-timer-value { min-width: 55px; color: var(--c-good); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .zw-pj-time-start { white-space: nowrap; } .zw-pj-content.tab-time { display: flex; flex-direction: column; gap: 12px; } .zw-pj-time-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zw-pj-time-range { display: flex; align-items: center; gap: 5px; } .zw-pj-time-summary { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); overflow: hidden; } .zw-pj-time-summary > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; padding: 12px 16px; border-left: 1px solid var(--c-line-soft); } .zw-pj-time-summary > div:first-child { border-left: 0; } .zw-pj-time-summary .zw-i { grid-row: 1 / 3; color: var(--c-muted); } .zw-pj-time-summary span { color: var(--c-muted); font-size: 11.5px; } .zw-pj-time-summary strong { font-size: 18px; font-variant-numeric: tabular-nums; } .zw-pj-time-table td > small { display: block; margin-top: 2px; white-space: nowrap; } .zw-pj-time-duration { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .zw-pj-time-duration .good { display: inline-flex; align-items: center; gap: 5px; color: var(--c-good); } .zw-pj-time-note { min-width: 180px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; } .zw-pj-time-note > small { margin-top: 4px; } .zw-pj-time-state { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .zw-pj-time-actions { width: 74px; white-space: nowrap; } .zw-pj-time-hint { margin: 0; } .zw-pj-service-admin { display: grid; gap: 12px; } .zw-pj-service-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .zw-pj-service-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .zw-pj-service-list li { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-top: 1px solid var(--c-line-soft); } .zw-pj-service-list li:first-child { border-top: 0; } .zw-pj-service-list li.inactive > span:first-child { color: var(--c-muted); text-decoration: line-through; } .zw-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zw-pj-finance-actual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .zw-pj-finance-actual > div { display: grid; gap: 3px; padding: 10px 12px; border-left: 1px solid var(--c-line-soft); } .zw-pj-finance-actual > div:first-child { border-left: 0; } .zw-pj-finance-actual span { color: var(--c-muted); font-size: 11.5px; } .zw-pj-finance-actual strong { font-size: 17px; font-variant-numeric: tabular-nums; } .zw-pj-finance-actual .warn strong { color: var(--c-warn); } .zw-pj-rate-head { display: flex; align-items: center; gap: 8px; } .zw-pj-rate-labels, .zw-pj-rate-row { display: grid; grid-template-columns: minmax(160px, 1.5fr) minmax(100px, .8fr) minmax(125px, 1fr) minmax(125px, 1fr) 30px; gap: 8px; align-items: center; } .zw-pj-rate-labels { padding: 0 2px; color: var(--c-muted); font-size: 11.5px; } .zw-pj-rate-list { display: grid; gap: 7px; } .zw-pj-billing { display: grid; gap: 14px; } .zw-pj-billing-controls { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; } .zw-pj-billing-controls .zw-field { width: 155px; } .zw-pj-billing-available, .zw-pj-billing-header { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .zw-pj-billing-available > div, .zw-pj-billing-header > div { display: grid; gap: 3px; padding: 10px 12px; border-left: 1px solid var(--c-line-soft); } .zw-pj-billing-available > div:first-child, .zw-pj-billing-header > div:first-child { border-left: 0; } .zw-pj-billing-available span, .zw-pj-billing-header span { color: var(--c-muted); font-size: 11.5px; } .zw-pj-billing-available strong, .zw-pj-billing-header strong { font-size: 16px; font-variant-numeric: tabular-nums; } .zw-pj-billing-available .warn strong { color: var(--c-warn); } .zw-pj-billing-title { padding-top: 2px; } .zw-pj-billing-runs { display: grid; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .zw-pj-billing-run { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-top: 1px solid var(--c-line-soft); } .zw-pj-billing-run:first-child { border-top: 0; } .zw-pj-billing-run > div:first-child { display: grid; gap: 2px; min-width: 170px; } .zw-pj-billing-run > div:first-child .zw-badge { margin-left: 5px; } .zw-pj-billing-run > span, .zw-pj-billing-run > strong { font-variant-numeric: tabular-nums; white-space: nowrap; } .zw-pj-billing-export-head { display: flex; align-items: center; gap: 8px; } .zw-pj-billing-exports { display: grid; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .zw-pj-billing-export { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-top: 1px solid var(--c-line-soft); } .zw-pj-billing-export:first-child { border-top: 0; } .zw-pj-billing-export > div:first-child { min-width: 180px; display: grid; gap: 2px; } .zw-pj-billing-export code { color: var(--c-muted); font-size: 11px; } .zw-pj-billing-export > span:not(.zw-grow) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .zw-pj-billing-items { max-height: min(54vh, 560px); } .zw-pj-billing-items th, .zw-pj-billing-items td { white-space: nowrap; } @media (max-width: 820px) { .zw-pj-timer-label { display: none; } .zw-pj-time-summary { grid-template-columns: 1fr; } .zw-pj-time-summary > div { border-left: 0; border-top: 1px solid var(--c-line-soft); } .zw-pj-time-summary > div:first-child { border-top: 0; } .zw-form-grid.three, .zw-pj-finance-actual { grid-template-columns: 1fr; } .zw-pj-finance-actual > div { border-left: 0; border-top: 1px solid var(--c-line-soft); } .zw-pj-finance-actual > div:first-child { border-top: 0; } .zw-pj-rate-labels { display: none; } .zw-pj-rate-row { grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--c-line); border-radius: 10px; } .zw-pj-rate-row > :first-child { grid-column: 1 / -1; } .zw-pj-billing-available, .zw-pj-billing-header { grid-template-columns: 1fr 1fr; } .zw-pj-billing-available > div:nth-child(odd), .zw-pj-billing-header > div:nth-child(odd) { border-left: 0; } .zw-pj-billing-run { align-items: flex-start; flex-wrap: wrap; } .zw-pj-billing-run > div:first-child { width: 100%; } .zw-pj-billing-export { align-items: flex-start; flex-wrap: wrap; } .zw-pj-billing-export > div:first-child { width: 100%; } } /* Aufgabenkarte */ .zw-pj-taskcard { position: absolute; z-index: 40; display: grid; gap: 10px; padding: 12px 14px 12px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-raised); box-shadow: var(--c-shadow-pop); } .zw-pj-taskcard-head { display: flex; align-items: center; gap: 8px; } .zw-pj-taskcard-where { flex: 1; min-width: 0; font-size: 11.5px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-taskcard-head .zw-icon-btn { width: 24px; height: 24px; } .zw-pj-taskcard-main { display: flex; align-items: center; gap: 9px; } .zw-pj-taskcard-main input[type=checkbox] { width: 17px; height: 17px; } .zw-pj-taskcard-title { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font: inherit; font-size: 15px; font-weight: 620; color: var(--c-ink); padding: 2px 0; } .zw-pj-taskcard-title:focus { outline: 0; border-bottom-color: var(--c-accent); } .zw-pj-taskcard-dates { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; } .zw-pj-taskcard-dates label { display: grid; gap: 2px; font-size: 11px; color: var(--c-muted); } .zw-pj-taskcard-dates .zw-input { height: 30px; font-size: 12.5px; padding: 0 8px; } .zw-pj-taskcard-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-muted); padding-bottom: 6px; } .zw-pj-taskcard-due.bad { color: var(--c-bad); font-weight: 600; } .zw-pj-taskcard-status { align-self: start; margin: 0; } .zw-pj-taskcard-notes { min-height: 72px; resize: vertical; font-size: 13px; } .zw-pj-taskcard-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* „Neu“-Menü mit Tippsuche */ .zw-pj-newmenu { position: fixed; z-index: 9000; width: max-content; min-width: 320px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-raised); box-shadow: var(--c-shadow-pop); overflow: hidden; } .zw-pj-newmenu-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--c-line-soft); color: var(--c-muted); } .zw-pj-newmenu-input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--c-ink); outline: 0; } .zw-pj-newmenu kbd { font: inherit; font-size: 10.5px; padding: 1px 5px; border: 1px solid var(--c-line); border-radius: 4px; color: var(--c-muted); } .zw-pj-newmenu-list { padding: 4px; column-gap: 4px; } .zw-pj-newmenu-sect { break-inside: avoid; } .zw-pj-newmenu-list > .zw-pj-newmenu-item { break-inside: avoid; } .zw-pj-newmenu-group { padding: 8px 8px 3px; font-size: 11px; font-weight: 650; color: var(--c-muted); } .zw-pj-newmenu-item { display: flex; width: 100%; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; color: var(--c-ink); text-align: left; cursor: pointer; } .zw-pj-newmenu-item > span { flex: 0 0 auto; } .zw-pj-newmenu-item small, .zw-pj-newmenu-item em { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: 11.5px; font-style: normal; } .zw-pj-newmenu-item em { color: var(--c-ink-2); max-width: 240px; } .zw-pj-newmenu-item.active { background: var(--c-accent); color: var(--c-on-accent); } .zw-pj-newmenu-item.active small, .zw-pj-newmenu-item.active em { color: color-mix(in srgb, var(--c-on-accent) 82%, transparent); } .zw-pj-inline-hidden { display: none !important; } /* Formular im Inhalt (projects/inline.js): steht wie ein Block an seiner Stelle, ruhig umrandet, Akzent links. */ .zw-pj-inline { margin: 6px 0; border: 1px solid var(--c-line); border-left: 3px solid var(--c-accent); border-radius: 10px; background: var(--c-surface); box-shadow: 0 6px 22px rgba(2, 10, 22, .08); animation: zw-pj-inline-in .14s ease-out; } @keyframes zw-pj-inline-in { from { opacity: 0; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .zw-pj-inline { animation: none; } } .zw-pj-inline-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 12px; color: var(--c-muted); } .zw-pj-inline-head strong { color: var(--c-ink); font-size: 13.5px; font-weight: 650; } .zw-pj-inline-body { padding: 4px 12px 10px; } .zw-pj-inline-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px 9px 12px; border-top: 1px solid var(--c-line-soft); background: var(--c-raised); border-radius: 0 0 10px 10px; } .zw-pj-inline-keys kbd { font: inherit; font-size: 10.5px; padding: 0 4px; border: 1px solid var(--c-line); border-radius: 4px; } li.zw-pj-inline-li { list-style: none; } @container (max-width: 520px) { .zw-pj-inline-keys { display: none; } .zw-pj-inline .zw-form-grid.two, .zw-pj-inline .zw-form-grid.three { grid-template-columns: 1fr; } } .zw-pj-newmenu-empty { margin: 0; padding: 10px; font-size: 12.5px; } /* Zeitplan: Liste und Monatskalender */ .zw-pj-sched-list { display: grid; gap: 14px; } .zw-pj-sched-list section { display: grid; gap: 4px; } .zw-pj-sched-list h4 { margin: 0; font-size: 12.5px; font-weight: 650; } .zw-pj-sched-list h4.bad { color: var(--c-bad); } .zw-pj-sched-list ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); overflow: hidden; } .zw-pj-sched-item { display: flex; align-items: center; gap: 12px; padding: 6px 12px; } .zw-pj-sched-item + .zw-pj-sched-item { border-top: 1px solid var(--c-line-soft); } .zw-pj-sched-item:hover { background: var(--c-hover); } .zw-pj-sched-body { flex: 1; min-width: 0; display: grid; gap: 1px; border: 0; padding: 0; background: transparent; font: inherit; text-align: left; color: var(--c-ink); cursor: pointer; } .zw-pj-sched-body strong { font-size: 13px; font-weight: 560; display: flex; align-items: center; gap: 3px; } .zw-pj-sched-item.done strong { text-decoration: line-through; color: var(--c-muted); } .zw-pj-sched-item.overdue .zw-pj-date strong { color: var(--c-bad); } .zw-pj-sched-item.event .zw-pj-date { color: #0891b2; } .zw-pj-cal-title { min-width: 150px; text-align: center; font-size: 14px; } .zw-pj-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; background: var(--c-line-soft); gap: 1px; } .zw-pj-month-head { padding: 6px 8px; background: var(--c-subtle); font-size: 11.5px; font-weight: 650; color: var(--c-muted); } .zw-pj-month-day { min-height: 92px; padding: 4px 5px 6px; background: var(--c-surface); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .zw-pj-month-day.weekend { background: color-mix(in srgb, var(--c-subtle) 60%, var(--c-surface)); } .zw-pj-month-day.other { background: var(--c-canvas); } .zw-pj-month-day.other .zw-pj-month-num { color: var(--c-muted); opacity: .6; } .zw-pj-month-num { font-size: 12px; font-weight: 600; align-self: flex-end; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 11px; } .zw-pj-month-day.today .zw-pj-month-num { background: var(--c-accent); color: var(--c-on-accent); } .zw-pj-month-item { display: block; width: 100%; padding: 1px 5px; border: 0; border-radius: 4px; font: inherit; font-size: 11.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; background: color-mix(in srgb, var(--c, var(--c-accent)) 18%, var(--c-surface)); color: var(--c-ink); border-left: 3px solid var(--c, var(--c-accent)); } .zw-pj-month-item.event { --c: #0891b2; } .zw-pj-month-item.done { opacity: .55; text-decoration: line-through; } /* Zeitachse: Randmarken für Einträge außerhalb des Fensters */ .zw-tl-edge { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; height: 20px; padding: 0 7px; border: 1px dashed var(--c-line-strong); border-radius: 10px; background: var(--c-surface); color: var(--c-muted); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; } .zw-tl-edge.left { left: 4px; } .zw-tl-edge.right { right: 4px; } .zw-tl-edge:hover { color: var(--c-ink); border-style: solid; } @media (max-width: 1100px) { .zw-pj-canvas.with-meta { grid-template-columns: 1fr; } .zw-pj-metapanel { position: static; } .zw-pj-content.tab-summary > .zw-pj-summary { grid-template-columns: auto minmax(0, 1fr); } .zw-pj-activity { grid-column: 1 / -1; } } .zw-pj-metapanel > .zw-btn { justify-self: start; } .zw-pj-main .zw-kicker { text-transform: none; letter-spacing: 0; font-size: 12px; } /* Alle Aufgaben */ .zw-pj-alltabs { align-items: center; } .zw-pj-alltabs .zw-tabs { margin: 0; } .zw-pj-alltasks { display: grid; gap: 16px; } .zw-pj-allgroup { display: grid; gap: 4px; } .zw-pj-allgroup h4 { margin: 0; font-size: 12.5px; font-weight: 650; } .zw-pj-allgroup h4.bad { color: var(--c-bad); } .zw-pj-allgroup ul { list-style: none; margin: 0; padding: 2px 8px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-pj-allgroup .zw-pj-task { grid-template-columns: auto minmax(0, 1fr) auto; border: 0; border-bottom: 1px solid var(--c-line-soft); border-radius: 0; background: transparent; padding: 6px 2px; } .zw-pj-allgroup .zw-pj-task:last-child { border-bottom: 0; } .zw-pj-allgroup .zw-pj-task-notes { color: var(--c-muted); font-size: 12px; } .zw-pj-chip-sub { color: var(--c-muted); font-weight: 500; } /* Mein Tag (Pagico-Tagesplaner) */ .zw-pj-dayhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .zw-pj-dayhead .zw-tabs { margin: 0; } .zw-pj-daybig { display: flex; align-items: center; gap: 12px; } .zw-pj-daybig > strong { font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--c-bad); } .zw-pj-daybig > div { display: grid; gap: 2px; } .zw-pj-daybig span { font-size: 18px; font-weight: 640; } .zw-pj-daybig small { font-size: 13px; color: var(--c-muted); } .zw-pj-dayplan { grid-template-columns: minmax(0, 1.6fr) minmax(290px, 1fr); } .zw-pj-dayside { display: grid; gap: 14px; align-content: start; } .zw-pj-mini-tabs { margin: 0; } .zw-pj-mini-tabs button { padding: 3px 10px; font-size: 12px; } .zw-pj-dayplan .zw-pj-method { margin: 4px 0 0; display: flex; align-items: center; gap: 4px; } .zw-pj-minical > header h3 { text-transform: none; } .zw-pj-minical-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .zw-pj-minical-grid .head { font-size: 11px; font-weight: 650; color: var(--c-muted); padding: 2px 0 4px; } .zw-pj-minical-grid button { position: relative; height: 30px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 12.5px; color: var(--c-ink); cursor: pointer; font-variant-numeric: tabular-nums; } .zw-pj-minical-grid button:hover { background: var(--c-hover); } .zw-pj-minical-grid button.other { color: var(--c-muted); opacity: .55; } .zw-pj-minical-grid button.today { color: var(--c-bad); font-weight: 700; } .zw-pj-minical-grid button.active { background: var(--c-accent); color: var(--c-on-accent); font-weight: 650; } .zw-pj-minical-grid button.marked::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .7; } .zw-pj-dayplan .zw-pj-candidates { margin: 0; } @media (max-width: 1100px) { .zw-pj-dayplan { grid-template-columns: 1fr; } } .zw-pj-allgroup .zw-pj-chip { max-width: 380px; } .zw-pj-chip-sub { margin-left: -4px; } /* Netzwerk: Firewall-Regeln, privater Zugang, Standortverbindungen (settings-network.js) */ .zw-fw .zw-table td { vertical-align: middle; } .zw-fw > div:not(.zw-savebar) { display: grid; gap: 24px; min-width: 0; } .zw-fw > div:empty { display: none; } .zw-fw-order { display: flex; gap: 2px; } .zw-fw-order .zw-icon-btn { width: 26px; height: 26px; } .zw-fw-toolbar { margin: 0 0 10px; } .zw-fw-locked { display: grid; gap: 0; margin-top: 10px; border: 1px solid var(--c-line-soft); border-radius: 10px; overflow: hidden; } .zw-fw-locked-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--c-muted); background: var(--c-subtle); } .zw-fw-locked-row + .zw-fw-locked-row { border-top: 1px solid var(--c-line-soft); } .zw-fw-locked-row span:not(.zw-badge) { flex: 1; } .zw-fw-pending { align-items: center; } .zw-fw-pending p { margin: 2px 0 0; } .zw-fw-picker { display: grid; gap: 8px; } .zw-fw-chosen { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; } .zw-fw-countries { max-height: 220px; overflow: auto; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 8px; } .zw-fw-countries .zw-pick span { flex: 1; } .zw-fw-profiles { display: grid; gap: 8px; } .zw-fw-profile .zw-input { flex: 1; } .zw-fw-test { min-height: 44px; } .zw-vpn-config { display: grid; gap: 12px; } .zw-vpn-config-grid { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; } .zw-vpn-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--c-ink-2); } .zw-vpn-conf { margin: 0; padding: 12px 14px; max-height: 220px; overflow: auto; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-subtle); color: var(--c-ink); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; } .zw-app-sites { display: grid; gap: 8px; } .zw-app-site { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 8px 10px; border: 1px solid var(--c-line-soft); border-radius: 8px; } .zw-app-site .zw-input { width: 140px; } @media (max-width: 640px) { .zw-vpn-config-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- Inhaltsstrom (Pagico „Main Content“, Schreibfluss wie im CRM-Protokoll) */ .zw-pj-flow-host { min-width: 0; } .zw-pj-flow { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; padding-bottom: 40px; } .zw-pj-flow > * { flex: 1 1 100%; min-width: 0; } .zw-pj-flow > .zw-pj-blk.link { flex: 1 1 300px; max-width: calc(50% - 6px); } .zw-pj-flow-empty { padding: 18px 4px; display: grid; gap: 10px; color: var(--c-muted); } .zw-pj-flow-empty p { margin: 0; } /* Einfügestelle „+“ zwischen Blöcken */ .zw-pj-ins { position: relative; height: 14px; } .zw-pj-ins::before { content: ''; position: absolute; left: 26px; right: 0; top: 50%; border-top: 1px dashed transparent; transition: border-color .12s; } .zw-pj-ins-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-muted); cursor: pointer; opacity: 0; transition: opacity .12s; } .zw-pj-ins:hover::before, .zw-pj-ins:focus-within::before { border-top-color: var(--c-line-strong); } .zw-pj-ins:hover .zw-pj-ins-btn, .zw-pj-ins-btn:focus-visible { opacity: 1; } .zw-pj-ins-btn:hover { color: var(--c-on-accent); background: var(--c-accent); border-color: var(--c-accent); } .zw-pj-flow.dragging-block .zw-pj-ins, .zw-pj-flow.dragging-task .zw-pj-ins { opacity: 0; } /* Blöcke */ .zw-pj-blk { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 4px; border-radius: 10px; } .zw-pj-blk > .zw-pj-grip { margin-top: 6px; } .zw-pj-blk-body { min-width: 0; } .zw-pj-blk-tools { opacity: 0; transition: opacity .12s; padding-top: 2px; } .zw-pj-blk:hover > .zw-pj-blk-tools, .zw-pj-blk:focus-within > .zw-pj-blk-tools { opacity: 1; } .zw-pj-blk.dragging { opacity: .35; } .zw-pj-grip { width: 18px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--c-muted); cursor: grab; opacity: 0; transition: opacity .12s; } .zw-pj-blk:hover > .zw-pj-grip, .zw-pj-row-line:hover > .zw-pj-grip, .zw-pj-grip:focus-visible { opacity: .7; } .zw-pj-grip:hover { opacity: 1 !important; background: var(--c-hover); color: var(--c-ink); } .zw-pj-grip:active { cursor: grabbing; } .zw-pj-grip-space { width: 18px; } .zw-pj-drop { flex-basis: 100%; height: 3px; margin: 2px 0 2px 22px; border-radius: 3px; background: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); pointer-events: none; } .zw-pj-items > .zw-pj-drop, .zw-pj-subs > .zw-pj-drop { list-style: none; } /* Unsichtbare Eingabefelder (Bearbeiten an Ort und Stelle) */ .zw-pj-ghost { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--c-ink); font: inherit; padding: 2px 6px; margin: 0; resize: none; } .zw-pj-ghost:hover:not([readonly]) { border-color: var(--c-line-soft); } .zw-pj-ghost:focus { outline: 0; border-color: var(--c-accent); background: var(--c-surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 25%, transparent); } .zw-pj-ghost.saved { animation: zw-pj-saved 1.2s ease-out; } @keyframes zw-pj-saved { from { background: color-mix(in srgb, var(--c-good) 22%, transparent); } } @media (prefers-reduced-motion: reduce) { .zw-pj-ghost.saved { animation: none; } } .zw-pj-heading { font-weight: 700; letter-spacing: -.01em; padding-top: 4px; padding-bottom: 4px; } .zw-pj-heading.h1 { font-size: 21px; } .zw-pj-heading.h2 { font-size: 17px; } .zw-pj-heading.h3 { font-size: 14.5px; color: var(--c-ink-2); } .zw-pj-blk.heading { margin-top: 6px; } /* Listen */ .zw-pj-blk.list > .zw-pj-blk-body { padding: 2px 0 4px; } .zw-pj-lhead { display: flex; align-items: center; gap: 6px; padding: 2px 0 2px 2px; } .zw-pj-lhead .zw-pj-ring { --size: 16px; flex: none; } .zw-pj-list-title { font-weight: 650; font-size: 15px; flex: 1; min-width: 0; } .zw-pj-list-count { flex: none; font-variant-numeric: tabular-nums; } .zw-pj-slip { flex: none; font-size: 11.5px; font-weight: 650; color: var(--c-warn); white-space: nowrap; } .zw-pj-items, .zw-pj-subs { list-style: none; margin: 0; padding: 0; } .zw-pj-subs { padding-left: 24px; } /* Aufgabenzeile */ .zw-pj-row { border-radius: 7px; outline: 0; } .zw-pj-row-line { display: grid; grid-template-columns: 18px 20px minmax(0, 1fr) auto auto; align-items: start; gap: 6px; padding: 3px 4px 3px 0; border-radius: 7px; border-bottom: 1px solid var(--c-line-soft); } .zw-pj-row.child > .zw-pj-row-line { border-bottom: 0; padding-top: 1px; padding-bottom: 1px; } .zw-pj-row-line:hover, .zw-pj-row:focus > .zw-pj-row-line, .zw-pj-row:focus-within > .zw-pj-row-line, .zw-pj-row.carded > .zw-pj-row-line { background: var(--c-hover); } .zw-pj-row:focus-visible > .zw-pj-row-line { box-shadow: inset 0 0 0 2px var(--c-accent); } .zw-pj-row.dragging { opacity: .35; } .zw-pj-check { width: 18px; height: 18px; margin-top: 3px; padding: 0; border: 1.5px solid var(--c-line-strong); border-radius: 50%; background: var(--c-surface); color: transparent; display: grid; place-items: center; cursor: pointer; } .zw-pj-check:hover:not(:disabled) { border-color: var(--c-good); color: color-mix(in srgb, var(--c-good) 60%, transparent); } .zw-pj-row.done > .zw-pj-row-line .zw-pj-check { background: var(--c-good); border-color: var(--c-good); color: #fff; } .zw-pj-check:disabled { cursor: default; } .zw-pj-row-main { min-width: 0; padding: 2px 0; } .zw-pj-row-title { font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; cursor: text; border-radius: 5px; padding: 0 6px; } .zw-pj-row.child .zw-pj-row-title { font-size: 13px; } .zw-pj-row.done > .zw-pj-row-line .zw-pj-row-title { color: var(--c-muted); text-decoration: line-through; } .zw-pj-row-notes { padding: 0 6px; color: var(--c-muted); font-size: 12px; line-height: 1.45; cursor: text; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .zw-pj-row-edit { font-size: 13.5px; line-height: 1.45; } .zw-pj-row-notes-edit { font-size: 12.5px; color: var(--c-ink-2); margin-top: 2px; } .zw-pj-row-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; padding-top: 2px; } .zw-pj-row-tools { display: flex; align-items: center; opacity: 0; transition: opacity .12s; } .zw-pj-row-tools .zw-icon-btn { width: 26px; height: 26px; } .zw-pj-row-line:hover > .zw-pj-row-tools, .zw-pj-row:focus > .zw-pj-row-line > .zw-pj-row-tools, .zw-pj-row:focus-within > .zw-pj-row-line > .zw-pj-row-tools { opacity: 1; } @media (hover: none) { .zw-pj-row-tools, .zw-pj-grip, .zw-pj-blk-tools, .zw-pj-ins-btn { opacity: 1; } } .zw-pj-chip-mini { display: inline-flex; align-items: center; gap: 3px; color: var(--c-muted); font-size: 11.5px; white-space: nowrap; } .zw-pj-chip-mini.today { color: var(--c-warn); } .zw-pj-date-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 0; border-radius: 6px; background: var(--c-subtle); color: var(--c-ink-2); font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } .zw-pj-date-chip:hover { background: var(--c-hover); color: var(--c-ink); } .zw-pj-date-chip.bad { background: var(--c-bad); color: #fff; } .zw-pj-subentry { list-style: none; padding: 2px 0 4px 26px; } .zw-pj-entry { margin: 4px 0 0 22px; } .zw-pj-entry .zw-input { height: 32px; border-style: dashed; background: transparent; } .zw-pj-entry .zw-input:focus { border-style: solid; background: var(--c-surface); } /* Erwähnungen [Name] */ .zw-pj-mention { display: inline-flex; align-items: center; gap: 3px; max-width: 260px; height: 20px; padding: 0 6px; margin: 0 1px; vertical-align: 1px; border: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-line)); border-radius: 10px; background: var(--c-accent-soft); color: var(--c-accent); font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-decoration: none; } .zw-pj-mention:hover { background: var(--c-accent); color: var(--c-on-accent); } .zw-pj-row.done .zw-pj-mention { opacity: .7; } .zw-pj-picker { position: fixed; z-index: 9000; width: 340px; padding: 4px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-raised); box-shadow: var(--c-shadow-pop); } .zw-pj-picker-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; text-align: left; color: var(--c-ink); cursor: pointer; } .zw-pj-picker-item > span { flex: 1; min-width: 0; display: grid; } .zw-pj-picker-item strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-picker-item small { font-size: 11.5px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-picker-item em { font-style: normal; font-size: 11px; color: var(--c-muted); white-space: nowrap; } .zw-pj-picker-item.active { background: var(--c-accent); color: var(--c-on-accent); } .zw-pj-picker-item.active small, .zw-pj-picker-item.active em { color: color-mix(in srgb, var(--c-on-accent) 80%, transparent); } .zw-pj-picker-empty { margin: 0; padding: 10px; font-size: 12.5px; color: var(--c-muted); } /* Notizen im Strom */ .zw-pj-blk.note > .zw-pj-blk-body { padding: 8px 12px 10px; border: 1px solid var(--c-line-soft); border-radius: 10px; background: color-mix(in srgb, var(--c-warn) 6%, var(--c-surface)); } .zw-pj-blk.note.draft { grid-template-columns: minmax(0, 1fr); margin-left: 22px; } .zw-pj-note-meta { display: flex; align-items: center; gap: 5px; color: var(--c-muted); font-size: 11.5px; margin-bottom: 4px; } .zw-pj-note-view { cursor: text; border-radius: 6px; outline: 0; } .zw-pj-note-view:focus-visible { box-shadow: 0 0 0 2px var(--c-accent); } .zw-pj-note-edit { min-height: 72px; font-size: 13.5px; line-height: 1.55; } .zw-pj-note-hint { margin-top: 4px; color: var(--c-muted); font-size: 11px; } .zw-pj-note-hint kbd, .zw-pj-note-hint code, .zw-pj-keys kbd { padding: 0 4px; border: 1px solid var(--c-line); border-radius: 4px; font: 600 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; } .zw-pj-rich { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; } .zw-pj-rich p { margin: 0 0 6px; } .zw-pj-rich p:last-child { margin-bottom: 0; } .zw-pj-rich ul { margin: 0 0 6px; padding-left: 20px; } .zw-pj-rich li.check { list-style: '☐ '; } .zw-pj-rich li.check.done { list-style: '☑ '; color: var(--c-muted); } .zw-pj-rich h4, .zw-pj-rich h5, .zw-pj-rich h6 { margin: 8px 0 4px; font-size: 14px; } .zw-pj-rich a { color: var(--c-accent); } /* Verknüpfungen als Karten */ .zw-pj-ref { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); min-width: 0; margin: 3px 0; } .zw-pj-ref-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--c-subtle); color: var(--c-ink-2); } .zw-pj-ref.contact .zw-pj-ref-icon { background: color-mix(in srgb, var(--c-warn) 18%, var(--c-surface)); color: var(--c-warn-ink, var(--c-warn)); } .zw-pj-ref.kch_server .zw-pj-ref-icon, .zw-pj-ref.remote_connection .zw-pj-ref-icon, .zw-pj-ref.rustdesk_device .zw-pj-ref-icon { background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-ref-main { flex: 1; min-width: 0; display: grid; gap: 1px; } .zw-pj-ref-kind { font-size: 10.5px; font-weight: 650; color: var(--c-muted); } .zw-pj-ref-title { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--c-ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-ref-title:hover { color: var(--c-accent); text-decoration: underline; } .zw-pj-ref-sub { font-size: 11.5px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-ref-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--c-muted); } .zw-pj-ref-status:empty { display: none; } .zw-pj-dot-status { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); } .zw-pj-dot-status.good { background: var(--c-good); } .zw-pj-dot-status.bad { background: var(--c-bad); } .zw-pj-dot-status.warn { background: var(--c-warn); } .zw-pj-dot-status.info { background: var(--c-accent); } .zw-pj-ref-actions { display: flex; gap: 6px; flex: none; } /* Akten: Kontakt und Posteingang, Rückverweise */ .zw-pj-badge.person { border-radius: 50%; background: color-mix(in srgb, var(--c-warn) 70%, #7c2d12); } .zw-pj-badge.inbox { background: var(--c-subtle); color: var(--c-ink-2); } .zw-pj-backlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .zw-pj-backlist button { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; text-align: left; color: var(--c-ink); cursor: pointer; } .zw-pj-backlist button:hover { background: var(--c-hover); } .zw-pj-backlist .zw-pj-dot { flex: none; align-self: center; } .zw-pj-backlist .done { text-decoration: line-through; color: var(--c-muted); } .zw-pj-backlist small.bad { color: var(--c-bad); } .zw-pj-canvas-main > .zw-pj-backlinks { margin-top: 8px; } .zw-pj-contact-rows { list-style: none; margin: 0; padding: 2px 8px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-pj-contact-rows li + li { border-top: 1px solid var(--c-line-soft); } .zw-pj-contact-rows button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; background: transparent; font: inherit; text-align: left; color: var(--c-ink); cursor: pointer; } .zw-pj-contact-rows button > div { display: grid; min-width: 0; } .zw-pj-contact-rows button:hover { background: var(--c-hover); } .zw-pj-keys { white-space: nowrap; } @media (max-width: 900px) { .zw-pj-flow > .zw-pj-blk.link { max-width: none; } .zw-pj-keys { display: none; } } /* Öffentliche Seite für Freigabelinks und Datei-Anfragen (/share.html) */ .zw-share-body { min-height: 100vh; margin: 0; background: linear-gradient(160deg, #0f2a3d, #16506b 60%, #1f6f8f); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .zw-share { display: grid; place-items: start center; min-height: 100vh; padding: 48px 16px; box-sizing: border-box; } .zw-share-card { display: grid; gap: 16px; width: min(100%, 760px); padding: 22px 24px 18px; border-radius: 16px; background: var(--c-surface); color: var(--c-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); box-sizing: border-box; } .zw-share-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); } .zw-share-head .zw-muted { margin-left: auto; font-size: 13px; } .zw-share-head .zw-wordmark { font-size: 20px; } .zw-share h1 { margin: 0; font-size: 20px; word-break: break-word; } .zw-share-title { display: flex; align-items: center; gap: 10px; color: var(--c-accent); } .zw-share-title h1 { color: var(--c-ink); } .zw-share-file, .zw-share-empty { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; text-align: center; color: var(--c-muted); } .zw-share-file h1, .zw-share-empty h1 { color: var(--c-ink); } .zw-share-form { display: grid; gap: 10px; max-width: 360px; } .zw-share-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--c-subtle); white-space: pre-wrap; } .zw-share-meta { margin: 0; font-size: 12.5px; } .zw-share-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } .zw-share-table td { padding: 7px 10px; } .zw-share-table td:last-child { text-align: right; } .zw-share-drop { display: grid; justify-items: center; gap: 6px; padding: 34px 16px; border: 2px dashed var(--c-line); border-radius: 12px; color: var(--c-muted); cursor: pointer; text-align: center; } .zw-share-drop:hover, .zw-share-drop.drop, .zw-share-drop:focus-visible { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-ink); outline: none; } .zw-share-uploads { display: grid; gap: 8px; } .zw-share-links { display: grid; gap: 8px; } .zw-share-link { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; } .zw-share-link .zw-input { font-family: ui-monospace, Menlo, monospace; font-size: 12px; } /* Projekte Stufe B: Kunde als Kontakt, Kontakt-Akte (Termine, Mails, Abgleich), Team und Akte der Person */ .zw-pj-customer { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; margin: 0 -2px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--c-accent); cursor: pointer; } .zw-pj-customer:hover { background: var(--c-accent-soft); } .zw-pj-customer:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; } .zw-pj-customer-line { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .zw-pj-customer-hint { display: block; line-height: 1.5; color: var(--c-muted); } .zw-pj-customer-hint svg { vertical-align: -2px; } .zw-pj-textbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--c-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .zw-pj-sync { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); border-radius: 10px; background: var(--c-accent-soft); color: var(--c-ink); } .zw-pj-sync > svg { color: var(--c-accent); flex: none; } .zw-pj-mails.compact li { grid-template-columns: 1fr; padding: 6px 8px; } .zw-pj-mails.compact li .zw-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .zw-pj-mini-events li.past { opacity: .65; } .zw-pj-team { display: grid; gap: 12px; } .zw-pj-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .zw-pj-team-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-pj-team-card:hover { border-color: var(--c-line-strong); background: var(--c-hover); } .zw-pj-team-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .zw-pj-team-card > .zw-row > svg { color: var(--c-muted); } .zw-pj-team-name { display: grid; min-width: 0; } .zw-pj-team-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-team-bar { height: 4px; border-radius: 4px; background: var(--c-track, var(--c-line)); overflow: hidden; } .zw-pj-team-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-accent); } .zw-pj-team-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 12px; color: var(--c-muted); } .zw-pj-team-stat { display: inline-flex; align-items: baseline; gap: 4px; } .zw-pj-team-stat strong { font-size: 15px; color: var(--c-ink); font-variant-numeric: tabular-nums; } .zw-pj-team-stat.bad strong { color: var(--c-bad); } .zw-pj-team-stat.warn strong { color: var(--c-warn); } .zw-pj-team-stat.info strong { color: var(--c-accent); } .zw-pj-team-stat.zero { opacity: .55; } .zw-pj-person-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; } .zw-pj-person-head h2 { margin: 0; font-size: 20px; } .zw-pj-person-head p { margin: 2px 0 0; } .zw-pj-person-head .zw-avatar.large { width: 44px; height: 44px; font-size: 16px; } /* Texteditor (CodeMirror 6) */ .zw-code { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--c-surface); } .zw-code-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; } .zw-code-toolbar .zw-btn.active { background: var(--c-accent-soft); color: var(--c-accent); border-color: transparent; } .zw-code-toolbar .zw-btn[hidden] { display: none; } .zw-code-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-muted); padding: 2px 8px; border: 1px solid var(--c-line); border-radius: 999px; } .zw-code-main { flex: 1; min-height: 0; display: flex; } .zw-code-editor { flex: 1; min-width: 0; min-height: 0; display: flex; } .zw-code-preview { flex: 1; min-width: 0; overflow: auto; padding: 18px 22px; border-left: 1px solid var(--c-line); background: var(--c-surface); } .zw-code-preview[hidden] { display: none; } .zw-code-status { display: flex; align-items: center; gap: 14px; padding: 4px 10px; border-top: 1px solid var(--c-line); font-size: 12px; color: var(--c-muted); white-space: nowrap; overflow: hidden; } .zw-code-flash { color: var(--c-good); font-weight: 600; } .zw-code-select { font: inherit; font-size: 12px; color: var(--c-muted); background: transparent; border: 0; padding: 2px 4px; border-radius: 6px; cursor: pointer; } .zw-code-select:hover:not(:disabled) { background: var(--c-hover); color: var(--c-ink); } .zw-code-start { margin: auto; display: grid; justify-items: center; gap: 12px; padding: 32px; text-align: center; max-width: 520px; color: var(--c-ink); } .zw-code-start > svg { color: var(--c-accent); } /* Schnellzugriff und Farbmarkierungen */ .zw-fs-quick { display: flex; flex-direction: column; gap: 1px; border-radius: 8px; } .zw-fs-quick.drop { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); } .zw-fs-tree .zw-side-btn.missing { color: var(--c-muted); text-decoration: line-through; } .zw-fs-tags .zw-side-btn small { margin-left: auto; } .zw-fs-tag { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 0 6px; vertical-align: middle; background: var(--tag, #9ca3af); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-surface) 70%, transparent); } .zw-fs-tree .zw-fs-tag { margin: 0 3px 0 4px; } .zw-fs-tile-name .zw-fs-tag { width: 8px; height: 8px; margin: 0 4px 1px 0; } .zw-crumb.current { display: inline-flex; align-items: center; gap: 6px; cursor: default; } /* Polaris: Tabs (erscheinen ab zwei Tabs, wie im Finder) */ .zw-fs-tabs { display: flex; align-items: stretch; gap: 2px; padding: 4px 6px 0; background: var(--c-subtle); border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; } .zw-fs-tabs[hidden] { display: none; } .zw-fs-tab { position: relative; display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 90px; max-width: 240px; padding: 5px 6px 5px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--c-muted); font-size: 12.5px; cursor: default; user-select: none; } .zw-fs-tab span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-fs-tab:hover { background: color-mix(in srgb, var(--c-surface) 55%, transparent); color: var(--c-ink); } .zw-fs-tab.active { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); margin-bottom: -1px; } .zw-fs-tab.drop { box-shadow: inset 0 0 0 2px var(--c-accent); background: var(--c-accent-soft); } .zw-fs-tab-close { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; opacity: 0; cursor: pointer; } .zw-fs-tab:hover .zw-fs-tab-close, .zw-fs-tab.active .zw-fs-tab-close { opacity: .7; } .zw-fs-tab-close:hover { opacity: 1; background: var(--c-hover); } .zw-fs-tab-add { flex: none; align-self: center; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 2px; border: 0; border-radius: 6px; background: transparent; color: var(--c-muted); cursor: pointer; } .zw-fs-tab-add:hover { background: var(--c-hover); color: var(--c-ink); } /* Mail-Server (Betrieb) */ .zw-ms-stat { text-align: left; font: inherit; color: inherit; cursor: pointer; border-left: 3px solid var(--c-line); transition: background .12s; } .zw-ms-stat:hover { background: var(--c-hover); } .zw-ms-stat.warn { border-left-color: var(--c-warn); } .zw-ms-stat.bad { border-left-color: var(--c-bad); } .zw-ms-stat .zw-muted { display: block; margin-top: 4px; font-size: 12px; } .zw-ms-toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; } .zw-ms-clip { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ms-reply { padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-subtle); } .zw-ms-reply pre, .zw-ms-pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; } .zw-ms-log { border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); overflow: hidden; } .zw-ms-log-row { display: grid; grid-template-columns: 138px 74px 112px minmax(120px, 210px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--c-line-soft); cursor: pointer; font-size: 13px; } .zw-ms-log-row:first-child { border-top: 0; } .zw-ms-log-row:hover { background: var(--c-hover); } .zw-ms-log-row.error { background: var(--c-bad-soft); } .zw-ms-log-row.warn { background: var(--c-warn-soft); } .zw-ms-log-time, .zw-ms-log-area { color: var(--c-muted); white-space: nowrap; } .zw-ms-log-event, .zw-ms-log-details { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ms-log-row.open .zw-ms-log-details { white-space: pre-wrap; word-break: break-word; } .zw-ms-more { display: flex; justify-content: center; margin: 12px 0 4px; } .zw-ms-relay[hidden] { display: none; } @media (max-width: 760px) { .zw-ms-log-row { grid-template-columns: 1fr auto; } .zw-ms-log-area, .zw-ms-log-event { display: none; } .zw-ms-log-details { grid-column: 1 / -1; } } /* Versionierte Projektabnahmen und Kundenfreigaben. */ .zw-accept-app { display: grid; grid-template-columns: 290px minmax(0, 1fr); height: 100%; min-height: 0; } .zw-accept-nav { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px; border-right: 1px solid var(--c-line); background: var(--c-raised); } .zw-accept-brand { display: flex; gap: 9px; align-items: center; } .zw-accept-brand > div { display: grid; } .zw-accept-brand small { color: var(--c-muted); } .zw-accept-list { display: grid; align-content: start; gap: 5px; overflow: auto; } .zw-accept-list > button { display: grid; gap: 4px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-accept-list > button:hover { background: var(--c-hover); } .zw-accept-list > button.active { border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); } .zw-accept-list > button span { display: flex; justify-content: space-between; color: var(--c-muted); font-size: 12px; } .zw-accept-list small { color: var(--c-muted); } .zw-accept-main { min-width: 0; overflow: auto; padding: 18px; } .zw-accept-head { display: flex; align-items: center; gap: 8px; } .zw-accept-head h2 { margin: 2px 0; } .zw-accept-section { margin-top: 18px; } .zw-accept-section h3 { margin: 0 0 9px; font-size: 15px; } .zw-pre { white-space: pre-wrap; } .zw-accept-criteria, .zw-accept-records { display: grid; gap: 6px; } .zw-accept-criteria > div, .zw-accept-records > div { display: flex; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-raised); } .zw-accept-records > div > span { display: grid; margin-right: auto; } .zw-accept-records small { color: var(--c-muted); } @media (max-width: 760px) { .zw-accept-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); } .zw-accept-nav { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--c-line); } } /* Eigenständiges Change Request Management mit kompaktem Projektausschnitt. */ .zw-changes-app { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; min-height: 0; background: var(--c-surface); } .zw-changes-nav { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px; border-right: 1px solid var(--c-line); background: var(--c-raised); } .zw-changes-brand { display: flex; align-items: center; gap: 9px; } .zw-changes-brand > div { display: grid; } .zw-changes-brand small { color: var(--c-muted); } .zw-changes-list { display: grid; align-content: start; gap: 5px; min-height: 0; overflow: auto; } .zw-changes-list > button { display: grid; gap: 4px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-changes-list > button:hover { background: var(--c-hover); } .zw-changes-list > button.active { border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); } .zw-changes-list > button > span { display: flex; justify-content: space-between; color: var(--c-muted); font-size: 11.5px; } .zw-changes-list > button small { color: var(--c-muted); } .zw-changes-main { min-width: 0; overflow: auto; padding: 18px; } .zw-changes-head { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .zw-changes-head h2 { margin: 2px 0; font-size: 22px; } .zw-kicker { margin: 0; color: var(--c-accent); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; } .zw-changes-summary { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 9px; } .zw-changes-summary > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-raised); } .zw-changes-summary span { color: var(--c-muted); font-size: 12px; } .zw-changes-section { margin-top: 18px; } .zw-changes-section h3 { margin: 0 0 9px; font-size: 15px; } .zw-changes-description { white-space: pre-wrap; } .zw-changes-section-head { display: flex; align-items: center; gap: 8px; } .zw-changes-section-head h3 { margin-right: auto; } .zw-changes-links, .zw-changes-history { display: grid; gap: 6px; } .zw-changes-links > div, .zw-changes-history > div { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-raised); } .zw-changes-links > div > span, .zw-changes-history > div > span { display: grid; min-width: 0; margin-right: auto; } .zw-changes-links small, .zw-changes-history small { color: var(--c-muted); } .zw-pj-changes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .zw-pj-changes-head h3, .zw-pj-changes-head p { margin: 0; } .zw-pj-change-list { display: grid; gap: 6px; } .zw-pj-change-list > button { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-raised); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-pj-change-list small { color: var(--c-muted); } @media (max-width: 760px) { .zw-changes-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .zw-changes-nav { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--c-line); } .zw-changes-summary { grid-template-columns: repeat(2, minmax(110px, 1fr)); } .zw-pj-change-list > button { grid-template-columns: 70px minmax(0, 1fr); } .zw-pj-change-list small { grid-column: 2; } } /* Projekte Stufe C: Inhaltsflächen (Content Tabs), Smart Lists, #Schlagwörter, Tagesplaner mit Morgen */ .zw-pj-ctabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 10px; border-bottom: 1px solid var(--c-line); } .zw-pj-ctab { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13px; color: var(--c-muted); cursor: pointer; } .zw-pj-ctab:hover { color: var(--c-ink); } .zw-pj-ctab.active { color: var(--c-ink); font-weight: 650; border-bottom-color: var(--c-accent); } .zw-pj-ctab small { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-subtle); color: var(--c-muted); font-size: 11px; font-weight: 600; text-align: center; } .zw-pj-ctab.add { color: var(--c-accent); } .zw-pj-ctab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; border-radius: 6px; } .zw-pj-blk.smart .zw-pj-blk-body { padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); border-radius: 10px; background: color-mix(in srgb, var(--c-accent) 4%, var(--c-surface)); } .zw-pj-smart-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; } .zw-pj-smart-head > svg { color: var(--c-accent); flex: none; } .zw-pj-smart-crit { color: var(--c-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .zw-pj-smart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .zw-pj-smart-row { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 4px; border-radius: 6px; } .zw-pj-smart-row:hover { background: var(--c-hover); } .zw-pj-smart-row.done .zw-pj-smart-title { color: var(--c-muted); text-decoration: line-through; } .zw-pj-smart-title { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--c-ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-smart-body > p { margin: 4px 0 0; } .zw-pj-hashtag { display: inline; padding: 0 3px; margin: 0 1px; border: 0; border-radius: 4px; background: var(--c-accent-soft); color: var(--c-accent); font: inherit; font-weight: 550; cursor: pointer; } .zw-pj-hashtag:hover { text-decoration: underline; } .zw-pj-saveto-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); } .zw-pj-saveto { width: 220px; } .zw-pj-dayzone { border-radius: 12px; transition: box-shadow .15s; } .zw-pj-dayzone.drop-into, .zw-pj-block.drop-into { box-shadow: 0 0 0 2px var(--c-accent); } .zw-pj-tomorrow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .zw-pj-tomorrow-list li { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); cursor: grab; } .zw-pj-tomorrow-list li.done strong { color: var(--c-muted); text-decoration: line-through; } .zw-pj-candidate[draggable="true"] { cursor: grab; } @media (prefers-reduced-motion: reduce) { .zw-pj-dayzone { transition: none; } } /* Container (docker-compose-Projekte, docs/CONTAINER.md) */ .zw-ctm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; } .zw-ctm-stats .zw-stat span { font-size: 12px; } .zw-ctm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .zw-ctm-card { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); color: var(--c-ink); text-align: left; cursor: pointer; } .zw-ctm-card:hover { border-color: var(--c-line-strong); background: var(--c-hover); } .zw-ctm-card .zw-muted { font-size: 12.5px; } .zw-ctm-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ctm-name { flex-wrap: nowrap; white-space: nowrap; } .zw-ctm-glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, #0ea5e9 14%, var(--c-surface)); color: #0ea5e9; flex: none; } .zw-ctm-back { margin: -4px 0 6px; } .zw-ctm-sub { margin: 20px 0 8px; font-size: 14px; } .zw-ctm-toolbar { margin-bottom: 10px; gap: 8px; } .zw-ctm-toolbar .zw-input { width: auto; min-width: 160px; } .zw-ctm-toolbar input[type=search] { flex: 1; max-width: 560px; } .zw-ctm-yaml, .zw-ctm-logs { max-height: 460px; } .zw-ctm-logs { min-height: 240px; white-space: pre; } .zw-ctm-warnings ul { margin: 6px 0 0; padding-left: 18px; color: var(--c-ink-2); font-size: 13px; } .zw-ctm-foot { margin-top: 10px; gap: 8px; flex-wrap: wrap; font-size: 12px; } .zw-ctm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); flex: none; } .zw-ctm-dot.good { background: var(--c-good); } .zw-ctm-dot.warn { background: var(--c-warn); } .zw-ctm-form { max-width: 980px; } .zw-ctm-editor { min-height: 320px !important; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; white-space: pre; } .zw-ctm-analysis { display: grid; gap: 6px; } .zw-ctm-issue { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--c-subtle); color: var(--c-ink-2); font-size: 13px; } .zw-ctm-issue svg { flex: none; margin-top: 2px; color: var(--c-muted); } .zw-ctm-issue.bad { background: var(--c-bad-soft); color: var(--c-ink); } .zw-ctm-issue.bad svg { color: var(--c-bad); } .zw-ctm-issue.warn { background: var(--c-warn-soft); color: var(--c-ink); } .zw-ctm-issue.warn svg { color: var(--c-warn); } .zw-ctm-issue.good { background: var(--c-good-soft); color: var(--c-ink); } .zw-ctm-issue.good svg { color: var(--c-good); } .zw-ctm-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .zw-ctm-service { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--c-line-soft); border-radius: 8px; } .zw-ctm-service span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-ctm-vars { display: grid; gap: 6px; justify-items: start; } .zw-ctm-var { display: grid; grid-template-columns: minmax(140px, 220px) minmax(180px, 1fr) auto; gap: 6px; width: 100%; } .zw-ctm-var .zw-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; } .zw-ctm-checks { display: grid; gap: 4px; } .zw-check { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; } .zw-ctm-digest { display: block; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .zw-ctm-subhead { margin-top: 24px; align-items: flex-end; gap: 12px; } .zw-ctm-subhead .zw-ctm-sub { margin: 0 0 2px; } .zw-ctm-subhead p { margin: 0 0 10px; font-size: 12.5px; } .zw-ctm-term { display: block; width: 100%; height: min(62vh, 520px); border: 0; border-radius: 10px; background: var(--c-code); } .zw-ctm-limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; } .zw-ctm-port-rules { display: grid; gap: 8px; } .zw-ctm-port-rule { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(210px, .8fr); gap: 8px 12px; align-items: center; padding: 9px 10px; border: 1px solid var(--c-line-soft); border-radius: 9px; } .zw-ctm-port-rule .zw-ctm-site-list { grid-column: 1 / -1; } .zw-ctm-site-list { display: grid; gap: 4px; } .zw-ctm-trust { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--c-line-soft); border-radius: 10px; background: var(--c-subtle); } .zw-ctm-trust p { margin: 0; font-size: 12px; } .zw-ctm-trust-digest { overflow-wrap: anywhere; font-size: 11px; } .zw-ctm-job-output { min-height: 260px; max-height: 52vh; white-space: pre-wrap; } .zw-ctm-template { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .zw-ctm-template > .zw-button { align-self: flex-start; } .zw-ctm-preview-image { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(160px, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--zw-border); } .zw-ctm-preview-image:last-child { border-bottom: 0; } .zw-ctm-metric { min-width: 220px; } .zw-ctm-bars { height: 82px; display: flex; align-items: end; gap: 2px; margin-top: 12px; border-bottom: 1px solid var(--zw-border); } .zw-ctm-bars i { display: block; flex: 1 1 2px; min-width: 2px; max-width: 8px; background: var(--zw-brand); border-radius: 2px 2px 0 0; opacity: .75; } .zw-ctm-artifacts { flex-wrap: wrap; margin-top: 10px; } .zw-ctm-job-diagnostic:empty { display: none; } @media (max-width: 700px) { .zw-ctm-port-rule { grid-template-columns: 1fr; } } /* Frühere Versionen */ .zw-fs-versions { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; } .zw-fs-version { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 9px; } .zw-fs-version.current { background: var(--c-subtle); } .zw-fs-version-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .zw-fs-version-note { margin: 8px 2px 0; font-size: 12px; } /* Einstellungen: Speicher & Snapshots je Freigabeordner */ .zw-snapshots { display: flex; flex-direction: column; gap: 6px; } .zw-snapshots h4 { margin: 4px 0; font-size: 13px; } .zw-snapshot-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--c-line); border-radius: 8px; padding: 4px; } .zw-snapshot { display: flex; align-items: center; gap: 10px; padding: 3px 6px; border-radius: 6px; font-size: 13px; } .zw-snapshot:hover { background: var(--c-hover); } .zw-snapshot-plan { gap: 12px; align-items: flex-start; } /* Virenschutz */ .zw-av-progress { margin-bottom: 14px; } .zw-av-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; } .zw-av-counters small { display: block; color: var(--c-muted); font-size: 12px; } .zw-av-counters strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; } .zw-av-counters .zw-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .zw-av-indeterminate { height: 4px; margin-top: 12px; border-radius: 99px; background: var(--c-subtle); overflow: hidden; } .zw-av-indeterminate span { display: block; width: 30%; height: 100%; border-radius: inherit; background: var(--c-accent); animation: zw-av-slide 1.6s ease-in-out infinite; } @keyframes zw-av-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } } @media (prefers-reduced-motion: reduce) { .zw-av-indeterminate span { animation: none; width: 100%; opacity: .5; } } .zw-av-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; } .zw-av-layers > div { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-av-layers p { margin: 2px 0 0; font-size: 12.5px; } .zw-av-targets { display: grid; gap: 4px; } .zw-av-actions { margin-top: 14px; } .zw-av-days { display: flex; gap: 6px; flex-wrap: wrap; } .zw-av-day { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--c-line); border-radius: 8px; cursor: pointer; } .zw-av-error { color: var(--c-bad); font-size: 12px; display: block; margin-top: 2px; } .zw-av-finding { display: grid; gap: 4px; justify-items: start; min-width: 0; } .zw-av-row-actions { flex-wrap: nowrap; justify-content: flex-end; } .zw-check-list[hidden] { display: none; } /* Vorschaubilder: Video-Kennzeichen, Textblatt, Audio-Cover */ .zw-fs-thumb.video { position: relative; } .zw-fs-thumb.video::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(15, 23, 42, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 18px no-repeat; pointer-events: none; } .zw-fs-thumb.paper img { box-shadow: 0 1px 3px rgba(15, 23, 42, .18); } .zw-ql-cover { max-width: min(320px, 70%); max-height: 320px; border-radius: 10px; box-shadow: 0 8px 24px rgba(2, 10, 22, .3); } /* Suche: Filterleiste und Textausschnitte */ .zw-fs-filterbar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); flex-wrap: wrap; font-size: 12.5px; } .zw-fs-filterbar[hidden] { display: none; } .zw-fs-scope button { height: 24px; padding: 0 10px; } .zw-fs-filter { font: inherit; font-size: 12.5px; height: 28px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 7px; background: var(--c-surface); color: var(--c-ink); } .zw-fs-filter.set { border-color: var(--c-accent); background: var(--c-accent-soft); } .zw-fs-filter-check { display: inline-flex; align-items: center; gap: 5px; color: var(--c-ink); cursor: pointer; } .zw-fs-filter-info { color: var(--c-muted); } .zw-fs-snippet { margin: 0; font-size: 12px; color: var(--c-muted); line-height: 1.45; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .zw-fs-snippet mark { background: color-mix(in srgb, #facc15 45%, transparent); color: var(--c-ink); border-radius: 3px; padding: 0 1px; } .zw-fs-name:has(.zw-fs-snippet) { flex-wrap: wrap; row-gap: 2px; } .zw-fs-name .zw-fs-snippet { flex-basis: 100%; margin-left: 27px; max-width: 720px; } /* Polaris: Info-Leiste */ .zw-fs-body.with-info { grid-template-columns: 210px minmax(0, 1fr) 272px; } .zw-fs-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-left: 1px solid var(--c-line); background: var(--c-subtle); font-size: 12.5px; } .zw-fs-info[hidden] { display: none; } .zw-fs-info-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 14px 12px; text-align: center; } .zw-fs-info-preview { display: grid; place-items: center; width: 100%; height: 190px; margin-bottom: 6px; color: var(--c-muted); } .zw-fs-info-preview.dir, .zw-fs-info-preview.share { color: #e8a33d; } .zw-fs-info-preview img { max-width: 100%; max-height: 190px; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .18); } .zw-fs-info-preview.video { position: relative; } .zw-fs-info-preview.video::after { content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(15, 23, 42, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 24px no-repeat; pointer-events: none; } .zw-fs-info-name { max-width: 100%; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .zw-fs-info-body { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 16px; } .zw-fs-info-loading { display: grid; place-items: center; padding: 18px; } .zw-fs-info-note { padding: 0 14px; } .zw-fs-info-tags { display: flex; justify-content: center; gap: 7px; padding: 2px 0 8px; } .zw-fs-info-tags .zw-context-swatch.active { box-shadow: 0 0 0 2px var(--c-subtle), 0 0 0 3.5px var(--tag); } .zw-fs-info-section { padding: 10px 0 4px; border-top: 1px solid var(--c-line); } .zw-fs-info-section h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); } .zw-fs-info-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; } .zw-fs-info-kv dt { color: var(--c-muted); white-space: nowrap; } .zw-fs-info-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .zw-fs-info-kv .zw-link { font-weight: 500; text-align: left; overflow-wrap: anywhere; } .zw-fs-info-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--c-line); } .zw-fs-info-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: auto 0; padding: 24px; text-align: center; color: var(--c-muted); } .zw-fs-info-stack { position: relative; width: 120px; height: 120px; margin-bottom: 8px; } .zw-fs-info-stack-item { position: absolute; inset: 14px; display: grid; place-items: center; border-radius: 8px; background: var(--c-surface); color: var(--c-muted); box-shadow: 0 2px 8px rgba(15, 23, 42, .16); overflow: hidden; } .zw-fs-info-stack-item[data-i="0"] { transform: translate(-9px, 7px) rotate(-5deg); } .zw-fs-info-stack-item[data-i="2"] { transform: translate(9px, -7px) rotate(5deg); } .zw-fs-info-stack-item img { width: 100%; height: 100%; object-fit: cover; } @container (max-width: 900px) { .zw-fs-body.with-info { grid-template-columns: minmax(0, 1fr) 248px; } .zw-fs-body.with-info .zw-fs-tree { display: none; } } @container (max-width: 560px) { .zw-fs-body.with-info { grid-template-columns: 1fr; } .zw-fs-body.with-info .zw-fs-info { display: none; } } /* Polaris: Spaltenansicht */ .zw-fs-list:has(> .zw-fs-columns), .zw-fs-list:has(> .zw-fs-gallery) { overflow: hidden; display: flex; flex-direction: column; } .zw-fs-columns { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; } .zw-fs-column { flex: none; width: 230px; overflow-y: auto; padding: 4px; border-right: 1px solid var(--c-line); } .zw-fs-column.current { flex: 1 0 230px; max-width: 360px; } .zw-fs-column.drop { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); } .zw-fs-colrow { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; cursor: default; user-select: none; font-size: 13px; white-space: nowrap; } .zw-fs-colrow:hover { background: var(--c-hover); } .zw-fs-colrow.in-path { background: color-mix(in srgb, var(--c-ink) 9%, transparent); } .zw-fs-colrow.selected { background: var(--c-accent); color: #fff; } .zw-fs-colrow.selected .zw-fs-icon, .zw-fs-colrow.selected > svg { color: #fff; } .zw-fs-colrow.drop { box-shadow: inset 0 0 0 2px var(--c-accent); background: var(--c-accent-soft); color: inherit; } .zw-fs-colrow.cut, .zw-fs-colrow.dragging { opacity: .5; } .zw-fs-colrow > svg { flex: none; margin-left: auto; color: var(--c-muted); } .zw-fs-colrow .zw-fs-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; } .zw-fs-colrow .zw-fs-icon img { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; } .zw-fs-colname { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .zw-fs-colrow .zw-fs-tag { margin: 0 0 0 2px; } .zw-fs-colempty { padding: 16px 10px; color: var(--c-muted); font-size: 12.5px; text-align: center; } /* Polaris: Galerie */ .zw-fs-gallery { flex: 1; min-height: 0; display: flex; flex-direction: column; } .zw-fs-gallery-stage { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; } .zw-fs-gallery-art { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; color: var(--c-muted); } .zw-fs-gallery-art > img, .zw-fs-gallery-art > video { position: absolute; inset: 0; margin: auto; } .zw-fs-gallery-art.dir, .zw-fs-gallery-art.share { color: #e8a33d; } .zw-fs-gallery-art img, .zw-fs-gallery-art video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 4px 18px rgba(15, 23, 42, .22); } .zw-fs-gallery-art video { background: #000; } .zw-fs-gallery-audio { display: grid; justify-items: center; gap: 14px; } .zw-fs-gallery-caption { display: grid; justify-items: center; gap: 2px; max-width: 100%; text-align: center; } .zw-fs-gallery-caption strong { overflow-wrap: anywhere; } .zw-fs-gallery-strip { flex: none; display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; border-top: 1px solid var(--c-line); background: var(--c-subtle); } .zw-fs-gallery-strip .zw-fs-tile { flex: none; width: 96px; padding: 5px 4px; } .zw-fs-gallery-strip .zw-fs-thumb { width: 84px; height: 64px; } .zw-fs-gallery-strip .zw-fs-thumb img { max-width: 84px; max-height: 64px; } .zw-fs-gallery-strip .zw-fs-tile-name { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .zw-fs-gallery-strip .zw-fs-tile small { display: none; } /* Cloud Manager: Konsole im eigenen Fenster */ .zw-cloud-console { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--c-code); } .zw-cloud-console-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); } .zw-cloud-console-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .zw-cloud-console-title strong, .zw-cloud-console-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-cloud-console-title .zw-muted { font-size: 12px; } .zw-cloud-console-stage { flex: 1; min-height: 0; display: grid; place-items: center; color: var(--c-code-ink); } .zw-cloud-console-frame { width: 100%; height: 100%; border: 0; display: block; background: #000; } .zw-cloud-console-note { display: grid; justify-items: center; gap: 8px; max-width: 460px; padding: 24px; text-align: center; } .zw-cloud-console-note p { margin: 0 0 6px; color: color-mix(in srgb, var(--c-code-ink) 75%, transparent); font-size: 13px; line-height: 1.5; } .zw-cloud-console-stage:has(> iframe) { display: block; } /* Cloud Manager: zitro Box, S3, Diagnose, Start */ .zw-cloud-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; } .zw-cloud-boxes > .zw-card + .zw-card { margin-top: 0; } .zw-cloud-box .zw-card-head small { display: block; margin-top: 2px; font-size: 12px; } .zw-cloud-box .zw-kv { margin: 10px 0 12px; } .zw-cloud-usage { display: grid; gap: 5px; margin: 8px 0 4px; } .zw-cloud-usage small { font-size: 12px; } .zw-cloud-copy { display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .zw-cloud-copy .zw-mono { overflow-wrap: anywhere; } .zw-cloud-copy .zw-btn.small { height: 24px; padding: 0 6px; } .zw-cloud-copy .zw-btn.done { color: var(--c-good); } .zw-cloud-secret { gap: 6px; } .zw-cloud-secret .zw-input { flex: 1; min-width: 0; } .zw-cloud-findings { display: grid; gap: 2px; } .zw-cloud-finding { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 9px 4px; border-bottom: 1px solid var(--c-line); } .zw-cloud-finding:last-child { border-bottom: 0; } .zw-cloud-finding > svg { margin-top: 2px; color: var(--c-warn, #d99a2b); } .zw-cloud-finding p { margin: 2px 0; font-size: 13px; } .zw-cloud-finding small { font-size: 12px; } .zw-cloud-allgood { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--c-good); font-size: 13px; } .zw-block { display: block; } .zw-cloud-detail-body > .zw-card + .zw-card, .zw-cloud-detail-body > div > .zw-card + .zw-card { margin-top: 12px; } .zw-cloud-detail-body .zw-card > .zw-row { margin-top: 10px; } /* Polaris: PDF zusammenfügen */ .zw-fs-merge-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--c-line); border-radius: 8px; } .zw-fs-merge-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; font-size: 13px; } .zw-fs-merge-row:hover { background: var(--c-hover); } .zw-fs-merge-num { width: 18px; color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; } .zw-fs-merge-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Polaris: mehrere Objekte umbenennen */ .zw-field[hidden] { display: none !important; } .zw-fs-rename-preview { max-height: 240px; overflow: auto; border: 1px solid var(--c-line); border-radius: 8px; } .zw-fs-rename-preview table { width: 100%; font-size: 12.5px; } .zw-fs-rename-preview td { padding: 4px 8px; overflow-wrap: anywhere; } .zw-fs-rename-preview td:nth-child(2) { width: 18px; color: var(--c-muted); } .zw-fs-rename-preview tr.same td:nth-child(3) { color: var(--c-muted); } .zw-fs-rename-preview tr.bad td:nth-child(3) { color: var(--c-bad, #b42318); font-weight: 600; } /* Projekte: Freigabelinks nach außen (Dialog „Freigeben“) */ .zw-pj-shares { display: grid; gap: 14px; } .zw-pj-share-intro { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--c-accent-soft); color: var(--c-ink-2); font-size: 12.5px; line-height: 1.45; } .zw-pj-share-intro svg { flex: none; margin-top: 1px; color: var(--c-accent); } .zw-pj-share-list { display: grid; gap: 10px; } .zw-pj-share { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-surface); } .zw-pj-share.fresh { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } .zw-pj-share.expired { opacity: .75; } .zw-pj-share-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .zw-pj-share-head strong { font-size: 13.5px; } .zw-pj-share-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c-subtle); color: var(--c-accent); } .zw-pj-share-urlrow { display: flex; gap: 6px; } .zw-pj-share-url { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; } .zw-pj-share-meta { margin: 0; font-size: 12px; } .zw-pj-share-subs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; } .zw-pj-share-sub { padding: 1px 8px; border-radius: 99px; background: var(--c-subtle); color: var(--c-ink-2); font-size: 11.5px; } .zw-pj-share-foot, .zw-pj-share-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .zw-pj-share-actions { justify-content: flex-start; } .zw-pj-share-notify { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--c-line-soft); } .zw-pj-share-editor { display: grid; gap: 14px; } .zw-pj-share-editor h4 { margin: 0; font-size: 14px; } .zw-pj-share-check { display: flex; align-items: center; gap: 7px; min-height: 32px; font-size: 13px; cursor: pointer; } .zw-pj-share-editor textarea { resize: vertical; } @media (max-width: 560px) { .zw-pj-share-editor .zw-form-grid.two { grid-template-columns: 1fr; } .zw-pj-share-urlrow { flex-wrap: wrap; } } /* Projekte: Workflows und Aktionsknöpfe */ .zw-pj-wfbutton { display: inline-flex; align-items: center; gap: 4px; max-width: 260px; height: 21px; padding: 0 8px 0 6px; margin: 0 1px; vertical-align: 1px; border: 1px solid var(--c-accent); border-radius: 6px; background: var(--c-accent); color: var(--c-on-accent); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-wfbutton:hover { background: color-mix(in srgb, var(--c-accent) 85%, var(--c-ink)); } .zw-pj-wfbutton:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; } .zw-pj-wfbutton svg { flex: none; fill: currentColor; } .zw-pj-row.done .zw-pj-wfbutton { opacity: .7; } .zw-pj-wf { display: flex; flex-direction: column; gap: 10px; max-height: min(70vh, 640px); overflow-y: auto; padding-right: 2px; } .zw-pj-wf-intro { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.45; } .zw-pj-wf-bar { display: flex; gap: 8px; align-items: center; } .zw-pj-wf-bar.end { justify-content: flex-end; } .zw-pj-wf-empty { margin: 8px 0; } .zw-pj-wf-head { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--c-muted); } .zw-pj-wf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .zw-pj-wf-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface); } .zw-pj-wf-item.off { opacity: .6; } .zw-pj-wf-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-wf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .zw-pj-wf-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-wf-main small { color: var(--c-muted); font-size: 12px; } .zw-pj-wf-log { margin: -2px 0 4px 38px; padding: 6px 10px; border-left: 2px solid var(--c-line); font-size: 12.5px; list-style: none; } .zw-pj-wf-log ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .zw-pj-wf-log li { display: flex; align-items: baseline; gap: 6px; } .zw-pj-wf-log li svg { flex: none; color: var(--c-good); align-self: center; } .zw-pj-wf-log li.bad svg { color: var(--c-bad); } .zw-pj-wf-log li span { flex: 1; min-width: 0; } .zw-pj-wf-log time { color: var(--c-muted); font-size: 11.5px; white-space: nowrap; } .zw-pj-wf-log p { margin: 0; } .zw-pj-wf-editor { display: flex; flex-direction: column; gap: 12px; } .zw-pj-wf-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border: 0; border-radius: 6px; background: none; color: var(--c-accent); font: inherit; font-size: 13px; cursor: pointer; } .zw-pj-wf-back:hover { background: var(--c-hover); } .zw-pj-wf-enabled { display: flex; align-items: flex-end; padding-bottom: 6px; } .zw-pj-wf-cond { margin: 0; padding: 8px 12px 10px; border: 1px solid var(--c-line); border-radius: 9px; display: flex; flex-direction: column; gap: 8px; } .zw-pj-wf-cond legend { padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--c-muted); } .zw-pj-wf-cond[hidden] { display: none; } .zw-pj-wf-note { display: flex; gap: 7px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--c-subtle); color: var(--c-ink-2); font-size: 12.5px; line-height: 1.45; } .zw-pj-wf-note[hidden] { display: none; } .zw-pj-wf-note svg { flex: none; margin-top: 2px; color: var(--c-muted); } .zw-pj-wf-note code { font-size: 11.5px; white-space: normal; } .zw-pj-wf-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: none; } .zw-pj-wf-action { padding: 8px 10px 10px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-surface); display: flex; flex-direction: column; gap: 8px; } .zw-pj-wf-action-head { display: flex; align-items: center; gap: 8px; } .zw-pj-wf-action-head select { flex: 0 1 240px; } .zw-pj-wf-step { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); font-size: 12px; font-weight: 700; } .zw-pj-wf-tools { margin-left: auto; display: flex; gap: 2px; } .zw-pj-wf-fields { display: flex; flex-direction: column; gap: 8px; } .zw-pj-wf-fields textarea { resize: vertical; min-height: 52px; } @media (max-width: 640px) { .zw-pj-wf .zw-form-grid.two { grid-template-columns: 1fr; } .zw-pj-wf-log { margin-left: 8px; } } /* Projekte: Erfassen von außen, Erinnerungen, Mitteilungen (Glocke), Schnellerfassung */ .zw-pj-ext { display: grid; gap: 14px; } .zw-pj-ext-part { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-soft); } .zw-pj-ext-part:last-of-type { border-bottom: 0; padding-bottom: 0; } .zw-pj-ext-part h4 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; } .zw-pj-ext-part h4 svg { color: var(--c-accent); } .zw-pj-ext-part p { margin: 0; font-size: 13px; line-height: 1.45; } .zw-pj-ext-note { display: flex; align-items: center; gap: 6px; color: var(--c-warn); } .zw-pj-ext-value { display: flex; align-items: center; gap: 8px; min-width: 0; } .zw-pj-ext-value code { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-subtle); font-size: 12.5px; overflow-wrap: anywhere; user-select: all; } .zw-pj-ext-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .zw-pj-ext-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--c-line-soft); border-radius: 9px; background: var(--c-subtle); } .zw-pj-ext-confirm > div:first-child { display: grid; gap: 2px; min-width: 0; font-size: 13px; } .zw-pj-ext-confirm small { display: block; } @media (max-width: 560px) { .zw-pj-ext-confirm { grid-template-columns: 1fr; } } .zw-pj-ext-fresh { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--c-accent-soft); font-size: 13px; } .zw-pj-ext-code { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--c-subtle); border: 1px solid var(--c-line-soft); font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-ink-2); } .zw-pj-ext-hints { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--c-muted); } .zw-pj-ext kbd, .zw-qc-page kbd { display: inline-block; min-width: 1.4em; padding: 0 5px; border: 1px solid var(--c-line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--c-surface); font: 11.5px/1.5 ui-monospace, Menlo, monospace; text-align: center; color: var(--c-ink); } .zw-pj-bookmarklet { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed var(--c-accent); border-radius: 999px; background: var(--c-accent-soft); color: var(--c-accent); font-size: 13px; font-weight: 600; text-decoration: none; cursor: grab; } .zw-pj-bookmarklet:active { cursor: grabbing; } .zw-pj-ext-radios { display: grid; gap: 6px; } .zw-pj-ext-radio { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; cursor: pointer; } .zw-pj-ext-radio input { margin-top: 2px; accent-color: var(--c-accent); } .zw-pj-ext-small { font-size: 12px; margin: 0; } .zw-pj-ext-part > .zw-btn { justify-self: start; } .zw-pj-bell-wrap { position: relative; display: inline-flex; } .zw-pj-bell-count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--c-bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; pointer-events: none; } .zw-pj-bell-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: grid; width: min(360px, 86vw); max-height: 420px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-raised, var(--c-surface)); color: var(--c-ink); box-shadow: 0 14px 40px rgba(0, 0, 0, .22); overflow: hidden; } .zw-pj-bell-pop header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--c-line-soft); font-size: 13.5px; } .zw-pj-bell-pop ul { margin: 0; padding: 4px; list-style: none; overflow-y: auto; } .zw-pj-bell-pop li button { display: grid; gap: 2px; width: 100%; padding: 8px 10px 8px 18px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; } .zw-pj-bell-pop li button:hover, .zw-pj-bell-pop li button:focus-visible { background: var(--c-hover); outline: none; } .zw-pj-bell-pop li.unread button::before { content: ''; position: absolute; left: 6px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); } .zw-pj-bell-pop li strong { font-size: 13px; } .zw-pj-bell-pop li span { font-size: 12.5px; color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-bell-pop li small { font-size: 11.5px; color: var(--c-muted); } .zw-pj-bell-pop li:not(.unread) strong { font-weight: 500; color: var(--c-ink-2); } .zw-pj-bell-pop > p { margin: 0; padding: 16px 14px; font-size: 13px; } .zw-pj-qc { display: grid; gap: 8px; } .zw-pj-qc textarea { resize: vertical; } .zw-pj-qc-preview { min-height: 1.3em; font-size: 12px; } .zw-pj-qc-target { display: flex; align-items: center; gap: 10px; font-size: 13px; } .zw-pj-qc-target .zw-input { flex: 1; } /* Schnellfenster /schnell.html */ .zw-qc-body { margin: 0; min-height: 100vh; background: var(--c-subtle); color: var(--c-ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .zw-qc-page { display: grid; place-items: start center; min-height: 100vh; padding: 18px 14px; box-sizing: border-box; } .zw-qc-card { display: grid; gap: 14px; width: min(100%, 520px); padding: 16px 18px 18px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); box-sizing: border-box; } .zw-qc-card h1 { margin: 0; font-size: 18px; } .zw-qc-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--c-line-soft); } .zw-qc-head .zw-works-mark { --s: 24px; } .zw-qc-form { display: grid; gap: 10px; } .zw-qc-label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--c-muted); } .zw-qc-label[hidden] { display: none; } .zw-qc-title { font-size: 15.5px; padding-block: 9px; } .zw-qc-form textarea { resize: vertical; min-height: 70px; } .zw-qc-preview { display: flex; align-items: center; gap: 4px; margin: -4px 0 0; min-height: 1.3em; font-size: 12px; color: var(--c-muted); } .zw-qc-preview svg { color: var(--c-accent); } .zw-qc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .zw-qc-row > :only-child, .zw-qc-row > :first-child:has(+ [hidden]) { grid-column: 1 / -1; } .zw-qc-actions { display: flex; align-items: center; gap: 8px; } .zw-qc-done { display: grid; justify-items: center; gap: 8px; padding: 18px 0 8px; text-align: center; } .zw-qc-done p { margin: 0; overflow-wrap: anywhere; } .zw-qc-check { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-good, var(--c-accent)); } @media (max-width: 460px) { .zw-qc-row { grid-template-columns: 1fr; } .zw-qc-actions small { display: none; } } /* Projekte: Kategorien, Kommentare, Spalten, Karten und Web-Widgets, Archiv */ .zw-pj-cat { display: inline-flex; align-items: center; gap: 4px; max-width: 140px; padding: 0 7px 0 6px; height: 18px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--zw-cat, var(--c-accent)) 75%, var(--c-ink)); background: color-mix(in srgb, var(--zw-cat, var(--c-accent)) 14%, var(--c-surface)); } .zw-pj-cat::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--zw-cat, var(--c-accent)); } .zw-pj-row.has-cat > .zw-pj-row-line { position: relative; } .zw-pj-row.has-cat > .zw-pj-row-line::before { content: ''; position: absolute; left: -5px; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--zw-cat); } .zw-pj-row.archived > .zw-pj-row-line { opacity: .62; } .zw-pj-row[data-depth="2"] .zw-pj-row-title, .zw-pj-row[data-depth="3"] .zw-pj-row-title, .zw-pj-row[data-depth="4"] .zw-pj-row-title, .zw-pj-row[data-depth="5"] .zw-pj-row-title { font-size: 12.5px; } .zw-pj-subs .zw-pj-subs { padding-left: 20px; border-left: 1px dashed var(--c-line-soft); margin-left: 9px; } button.zw-pj-chip-mini { border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 11.5px; cursor: pointer; border-radius: 4px; } button.zw-pj-chip-mini:hover { color: var(--c-accent); background: var(--c-hover); } .zw-pj-row.zw-pj-pulse > .zw-pj-row-line { animation: zw-pj-pulse 1.6s ease-out 1; } @keyframes zw-pj-pulse { 0%, 30% { background: var(--c-accent-soft); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .zw-pj-row.zw-pj-pulse > .zw-pj-row-line { animation: none; background: var(--c-accent-soft); } } .zw-pj-archived-toggle.active { color: var(--c-accent); } /* Aufgabenkarte: Uhrzeit, Erinnerung, Kategorie, Kommentare */ .zw-pj-taskcard { max-height: min(82vh, 700px); overflow: auto; } .zw-pj-taskcard-dates label.time .zw-input { width: 112px; } .zw-pj-taskcard-extra { display: flex; flex-wrap: wrap; gap: 8px; } .zw-pj-taskcard-extra label { display: inline-flex; align-items: center; gap: 5px; color: var(--c-muted); } .zw-pj-taskcard-extra .zw-input { height: 30px; font-size: 12.5px; padding: 0 8px; max-width: 190px; } .zw-pj-taskcard-comments { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--c-line-soft); } .zw-pj-taskcard-comments h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--c-muted); font-weight: 650; } .zw-pj-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 240px; overflow: auto; } .zw-pj-comment { display: grid; gap: 2px; padding: 6px 8px; border-radius: 8px; background: var(--c-subtle); } .zw-pj-comment-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; } .zw-pj-comment-head .zw-icon-btn { width: 22px; height: 22px; margin: -3px -4px -3px 0; } .zw-pj-comment-body { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; } .zw-pj-comment-new { display: flex; gap: 6px; align-items: flex-end; } .zw-pj-comment-input { flex: 1; min-height: 40px; resize: vertical; font-size: 13px; } /* Spalten im Inhalt (6er-Raster) */ .zw-pj-flow > .zw-pj-blk.w-4 { flex: 0 0 calc(66.666% - 4px); max-width: calc(66.666% - 4px); } .zw-pj-flow > .zw-pj-blk.w-3 { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); } .zw-pj-flow > .zw-pj-blk.w-2 { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); } @media (max-width: 900px) { .zw-pj-flow > .zw-pj-blk.w-4, .zw-pj-flow > .zw-pj-blk.w-3, .zw-pj-flow > .zw-pj-blk.w-2 { flex-basis: 100%; max-width: none; } } /* Karte und Web-Widget */ .zw-pj-embed { border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: var(--c-surface); } .zw-pj-embed-head { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid var(--c-line-soft); font-size: 13px; min-width: 0; } .zw-pj-embed-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-embed-open { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--c-muted); } .zw-pj-embed-open:hover { color: var(--c-accent); background: var(--c-hover); } .zw-pj-map-frame, .zw-pj-widget-frame { display: block; width: 100%; border: 0; background: var(--c-subtle); } .zw-pj-embed-hint { margin: 0; padding: 4px 10px 6px; font-size: 11px; color: var(--c-muted); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .zw-pj-geo-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; } .zw-pj-geo-hits button { display: flex; align-items: flex-start; gap: 6px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--c-ink); font: inherit; font-size: 12.5px; cursor: pointer; } .zw-pj-geo-hits button:hover, .zw-pj-geo-hits button:focus-visible { background: var(--c-hover); } .zw-pj-geo-chosen { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; } /* Schlagwörter und Kategorien */ .zw-pj-tagbrowser { display: grid; gap: 18px; padding-bottom: 30px; } .zw-pj-tag-section { display: grid; gap: 8px; } .zw-pj-tag-section h3 { margin: 0; font-size: 13px; font-weight: 650; color: var(--c-muted); } .zw-pj-tagcloud, .zw-pj-catrow, .zw-pj-tag-projects { display: flex; flex-wrap: wrap; gap: 6px; } .zw-pj-tagpill { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: calc(13px * var(--weight, 1)); cursor: pointer; } .zw-pj-tagpill small { font-size: 11px; color: var(--c-muted); font-variant-numeric: tabular-nums; } .zw-pj-tagpill:hover { border-color: var(--c-accent); } .zw-pj-tagpill.active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); } .zw-pj-tagpill.active small { color: inherit; opacity: .8; } .zw-pj-catpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border: 1px solid color-mix(in srgb, var(--zw-cat) 45%, var(--c-line)); border-radius: 8px; background: color-mix(in srgb, var(--zw-cat) 8%, var(--c-surface)); color: var(--c-ink); font: inherit; font-size: 13px; cursor: pointer; } .zw-pj-catpill i { width: 10px; height: 10px; border-radius: 3px; background: var(--zw-cat); } .zw-pj-catpill small { color: var(--c-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .zw-pj-catpill.active { box-shadow: inset 0 0 0 2px var(--zw-cat); background: color-mix(in srgb, var(--zw-cat) 18%, var(--c-surface)); } .zw-pj-tag-hint { display: flex; align-items: center; gap: 8px; padding: 16px; border: 1px dashed var(--c-line); border-radius: 10px; color: var(--c-muted); font-size: 13px; } .zw-pj-tag-results { display: grid; gap: 18px; } .zw-pj-tag-project { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 13px; cursor: pointer; } .zw-pj-tag-project i { width: 9px; height: 9px; border-radius: 50%; } .zw-pj-tag-project:hover { border-color: var(--c-accent); } .zw-pj-tag-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .zw-pj-tag-note { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--c-line-soft); border-radius: 8px; background: color-mix(in srgb, var(--c-warn) 5%, var(--c-surface)); color: var(--c-ink); font: inherit; font-size: 13px; cursor: pointer; } .zw-pj-tag-note:hover { border-color: var(--c-line-strong); } .zw-pj-colors.small button { width: 18px; height: 18px; } .zw-pj-catman-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .zw-pj-catman-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; } .zw-pj-catman-list .zw-input { height: 30px; } .zw-pj-catman-new { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--c-line-soft); } .zw-pj-catman-new .zw-input { flex: 1 1 220px; } @media (max-width: 640px) { .zw-pj-catman-list li { grid-template-columns: minmax(0, 1fr) auto auto; } .zw-pj-catman-list li > .zw-pj-cat, .zw-pj-catman-list li > .zw-pj-colors { grid-column: 1 / -1; } } .zw-pj-colors.small { gap: 5px; } .zw-av-lock { border-color: var(--c-bad); margin-bottom: 12px; } .zw-av-lock p { margin: 6px 0; } .zw-av-examples { margin: 6px 0; padding-left: 18px; font-size: 12.5px; color: var(--c-muted); } .zw-av-steps { margin: 8px 0 0; padding-left: 20px; font-size: 13px; display: grid; gap: 3px; } .zw-av-source { display: flex; align-items: center; gap: 6px; color: var(--c-ink-2); } .zw-av-apppw { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-subtle); } .zw-av-apppw ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .zw-av-apppw li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; } .zw-fs-watch { display: inline-grid; place-items: center; margin: 0 4px; color: var(--c-accent); vertical-align: middle; } .zw-fs-colrow.selected .zw-fs-watch { color: #fff; } .zw-ms-file { display: block; margin-top: 3px; } .zw-fs-lock { display: inline-grid; place-items: center; margin: 0 4px; color: #b45309; vertical-align: middle; } .zw-fs-lock.mine { color: var(--c-accent); } .zw-fs-tile-name .zw-fs-lock { margin: 0 3px 1px 0; } .zw-fs-colrow.selected .zw-fs-lock { color: #fff; } .zw-av-cve { white-space: nowrap; font-size: 12.5px; } /* KI im Explorer: Markierungsvorschläge */ .zw-fs-ai-legend { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; } .zw-fs-ai-taglist { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; padding: 4px; border: 1px solid var(--c-line); border-radius: 8px; } .zw-fs-ai-tagrow { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 6px; padding: 4px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; } .zw-fs-ai-tagrow:hover { background: var(--c-hover); } .zw-fs-ai-tagrow small { grid-column: 3; } .zw-fs-ai-tagname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Polaris: Speicheranalyse */ .zw-fs-analysis { display: flex; flex-direction: column; gap: 10px; min-height: 320px; } .zw-fs-an-head strong { font-size: 20px; } .zw-fs-an-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--c-subtle); } .zw-fs-an-bar span { min-width: 2px; flex-basis: 0; } .zw-fs-an-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--c-muted); } .zw-fs-an-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; } .zw-fs-an-tabs { align-self: flex-start; } .zw-fs-an-list { display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; border: 1px solid var(--c-line); border-radius: 8px; padding: 4px; } .zw-fs-an-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 6px; font-size: 13px; } .zw-fs-an-row:has(.zw-fs-an-meter) { grid-template-columns: minmax(0, 1fr) 80px 160px 110px; } .zw-fs-an-row:has(> input) { grid-template-columns: auto minmax(0, 1fr) auto; cursor: pointer; } .zw-fs-an-row:hover { background: var(--c-hover); } .zw-fs-an-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-weight: 500; } .zw-fs-an-size { font-variant-numeric: tabular-nums; text-align: right; } .zw-fs-an-meter { height: 8px; border-radius: 4px; background: var(--c-subtle); overflow: hidden; } .zw-fs-an-meter span { display: block; height: 100%; border-radius: 4px; background: var(--c-accent); } .zw-fs-an-dup { padding: 4px 0 6px; border-bottom: 1px solid var(--c-line); } .zw-fs-an-dup:last-child { border-bottom: 0; } .zw-fs-an-dup-head { padding: 2px 6px; font-size: 12.5px; font-weight: 600; } .zw-fs-an-actions { margin-bottom: 6px; } /* Polaris: Zeitmaschine */ .zw-fs-tmbar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--c-line); background: linear-gradient(90deg, color-mix(in srgb, #6366f1 16%, var(--c-subtle)), var(--c-subtle)); } .zw-fs-tmbar[hidden] { display: none; } .zw-fs-tm-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 13px; white-space: nowrap; color: #4f46e5; } .zw-fs-tm-strip { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; } .zw-fs-tm-chip { flex: none; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .zw-fs-tm-chip:hover { border-color: #6366f1; } .zw-fs-tm-chip.active { background: #4f46e5; border-color: #4f46e5; color: #fff; } .zw-fs.tm .zw-fs-list { background: color-mix(in srgb, #6366f1 4%, var(--c-canvas)); } .zw-fs-tm-note { font-size: 12px; } .zw-fs-tm-alert { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, #dc2626 14%, var(--c-surface)); color: #b91c1c; font-size: 12px; font-weight: 600; white-space: nowrap; } /* Cloud Manager: „Mit ZITRO verbinden“ – Ablauf im Cloud-Manager-Fenster */ .zw-cloud-hero > .zw-cloud-pairing { width: 100%; text-align: left; } .zw-cloud-pairing { display: grid; gap: 12px; border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); } .zw-cloud-pairing.failed { border-color: color-mix(in srgb, var(--c-bad) 45%, var(--c-line)); } .zw-cloud-pairing.failed .zw-cloud-pairing-head > svg { color: var(--c-bad); } .zw-cloud-pairing-head { display: flex; align-items: flex-start; gap: 12px; } .zw-cloud-pairing-head > .zw-spinner, .zw-cloud-pairing-head > svg { flex: none; margin-top: 2px; } .zw-cloud-pairing-head h3 { margin: 0 0 3px; font-size: 15px; } .zw-cloud-pairing-head p { margin: 0; color: var(--c-muted); font-size: 13px; line-height: 1.5; } .zw-cloud-pairing-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; } .zw-cloud-done .zw-row { justify-content: center; gap: 8px; } /* Projekte: Mehrfachauswahl, Zuklappen, Verschieben in andere Akten */ .zw-pj-row-head { display: flex; align-items: flex-start; min-width: 0; } .zw-pj-row-head > .zw-pj-row-title, .zw-pj-row-head > .zw-pj-row-edit { flex: 1; min-width: 0; } .zw-pj-fold { flex: none; width: 18px; height: 20px; margin: 1px -2px 0 -4px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--c-muted); cursor: pointer; } .zw-pj-fold svg { transition: transform .12s; transform: rotate(90deg); } .zw-pj-fold.folded svg { transform: none; } .zw-pj-fold:hover { color: var(--c-ink); background: var(--c-hover); } .zw-pj-row.is-folded > .zw-pj-row-line .zw-pj-row-title { font-weight: 560; } @media (prefers-reduced-motion: reduce) { .zw-pj-fold svg { transition: none; } } .zw-pj-row.selected > .zw-pj-row-line { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 40%, transparent); } .zw-pj-row.selected:focus > .zw-pj-row-line { background: color-mix(in srgb, var(--c-accent) 20%, var(--c-surface)); } .zw-pj-selbar-host { position: sticky; top: 0; z-index: 6; } .zw-pj-selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; padding: 7px 8px 7px 12px; border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); border-radius: 10px; background: color-mix(in srgb, var(--c-accent) 8%, var(--c-raised)); box-shadow: var(--c-shadow-pop); } .zw-pj-selbar-count { margin-right: 6px; font-size: 13px; font-variant-numeric: tabular-nums; } .zw-pj-selbar .zw-icon-btn { width: 28px; height: 28px; } .zw-pj-xfer { gap: 10px; } .zw-pj-xfer-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 300px; overflow: auto; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); } .zw-pj-xfer-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-pj-xfer-item > span { display: grid; min-width: 0; flex: 1; } .zw-pj-xfer-item strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-xfer-item small { font-size: 11.5px; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-xfer-item em { font-style: normal; font-size: 11px; color: var(--c-muted); } .zw-pj-xfer-item .zw-pj-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 0 2px; } .zw-pj-xfer-item.active, .zw-pj-xfer-item:hover { background: var(--c-hover); } .zw-pj-xfer-item.chosen { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); } .zw-pj-xfer-list-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--c-muted); } .zw-pj-selbar .zw-icon-btn.danger { color: var(--c-bad); } /* Projekte: Zurück/Vor, Filter und Sortierung im Inhalt, Wiederholungen, „Verknüpfen mit …“ */ .zw-pj-trail-btns { display: flex; gap: 0; margin-left: -6px; } .zw-pj-trail-btns .zw-icon-btn { width: 26px; height: 26px; } .zw-pj-trail-btns .zw-icon-btn:disabled { opacity: .35; cursor: default; } .zw-pj-filter-btn.active { background: var(--c-accent-soft); border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-line)); color: var(--c-ink); } .zw-pj-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--c-muted); } .zw-pj-fchip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 9px; border-radius: 999px; background: var(--c-accent-soft); color: var(--c-ink); font-size: 12px; font-weight: 560; } .zw-pj-fchip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .zw-pj-fchip button:hover { background: color-mix(in srgb, var(--c-ink) 12%, transparent); } .zw-pj-sort-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border: 0; border-radius: 6px; background: var(--c-subtle); color: var(--c-muted); font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; } .zw-pj-sort-chip:hover { background: var(--c-hover); color: var(--c-ink); } button.zw-pj-chip-mini.linked { height: 20px; padding: 0 4px; border: 0; border-radius: 5px; background: transparent; font: inherit; font-size: 11.5px; cursor: pointer; } button.zw-pj-chip-mini.linked:hover:not(:disabled) { background: var(--c-hover); color: var(--c-ink); } button.zw-pj-chip-mini.linked:disabled { cursor: default; } .zw-pj-note-linked { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 6px; } .zw-pj-linkchip { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; height: 20px; padding: 0 7px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink-2, var(--c-ink)); font: inherit; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .zw-pj-linkchip:hover { border-color: var(--c-accent); color: var(--c-ink); } .zw-pj-linkchip > i { flex: none; width: 7px; height: 7px; border-radius: 50%; } .zw-pj-linked { margin-top: 14px; } .zw-pj-linked h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 14px; } .zw-pj-linked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .zw-pj-linked-task { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 4px 3px 8px; border-radius: 8px; } .zw-pj-linked-task:hover, .zw-pj-linked-note:hover { background: var(--c-hover); } .zw-pj-linked-title { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--c-ink); font: inherit; font-size: 13.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .zw-pj-linked-title:hover { text-decoration: underline; text-underline-offset: 3px; } .zw-pj-linked-task.done .zw-pj-linked-title { color: var(--c-muted); text-decoration: line-through; } .zw-pj-linked-task .zw-icon-btn { width: 26px; height: 26px; } .zw-pj-linked-note { padding: 6px 4px 6px 8px; border-radius: 8px; } .zw-pj-linked-head { display: flex; align-items: center; gap: 7px; color: var(--c-muted); } .zw-pj-linked-head .zw-icon-btn { width: 26px; height: 26px; } .zw-pj-linked-body { margin: 3px 0 0 21px; font-size: 13px; line-height: 1.5; color: var(--c-ink); } .zw-pj-xfer-item.multi .zw-pj-xfer-box { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--c-line-strong, var(--c-muted)); border-radius: 4px; color: #fff; } .zw-pj-xfer-item.multi.chosen { background: transparent; box-shadow: none; } .zw-pj-xfer-item.multi.chosen .zw-pj-xfer-box { background: var(--c-accent); border-color: var(--c-accent); } .zw-pj-xfer-item.multi.active, .zw-pj-xfer-item.multi:hover { background: var(--c-hover); } .zw-pj-rec { gap: 12px; } .zw-pj-rec-opt { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; transition: opacity .12s; } .zw-pj-rec-opt.off { opacity: .55; } .zw-pj-rec-opt.off:focus-within, .zw-pj-rec-opt.off:hover { opacity: .85; } .zw-pj-rec-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; cursor: pointer; } .zw-pj-rec-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .zw-pj-rec-row .zw-input { width: auto; } .zw-pj-rec-n { width: 74px !important; } .zw-pj-rec-days { display: flex; flex-wrap: wrap; gap: 5px; } .zw-pj-rec-day { width: 38px; height: 32px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .zw-pj-rec-day:hover { border-color: var(--c-accent); } .zw-pj-rec-day[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; } .zw-pj-rec-preview { margin: 0; font-size: 13px; font-weight: 600; } .zw-pj-rec-preview.bad { color: var(--c-bad); } @media (prefers-reduced-motion: reduce) { .zw-pj-rec-opt { transition: none; } } .zw-pj-side-head { gap: 4px; } .zw-pj-side-head h2 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-side-head > .zw-grow { display: none; } .zw-pj-taskcard-extra select.zw-input { padding-right: 26px; } .zw-pj-side-head > .zw-icon-btn { width: 28px; height: 28px; } .zw-pj-side-head > .zw-icon-btn.zw-pj-create { width: 30px; height: 30px; border-radius: 8px; background: var(--c-accent); color: var(--c-on-accent); } .zw-pj-side-head > .zw-icon-btn.zw-pj-create:hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-ink)); } .zw-pj-trail-btns .zw-icon-btn { width: 24px; } .zw-pj-sort-chip:disabled { cursor: default; } .zw-pj-sort-chip:disabled:hover { background: var(--c-subtle); color: var(--c-muted); } .zw-cp-pair { flex-wrap: nowrap; } .zw-cp-pair > * { flex: 1; min-width: 0; } /* Projekte: Dateien im Inhalt, Anhänge, Vorlagen-Bibliothek */ .zw-pj-file { display: grid; grid-template-rows: auto auto; margin: 3px 0; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); overflow: hidden; min-width: 0; } .zw-pj-file-preview { display: grid; place-items: center; height: 132px; padding: 0; border: 0; border-bottom: 1px solid var(--c-line); background: var(--c-subtle); cursor: pointer; overflow: hidden; } .zw-pj-file-preview:hover .zw-pj-file-thumb { transform: scale(1.02); } .zw-pj-file-preview:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; } .zw-pj-file-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } .zw-pj-file-icon { display: grid; place-items: center; color: var(--c-muted); } .zw-pj-file-main { display: grid; gap: 1px; padding: 8px 10px 9px; min-width: 0; } @media (prefers-reduced-motion: reduce) { .zw-pj-file-thumb { transition: none; } } .zw-pj-flow.file-drop { outline: 2px dashed color-mix(in srgb, var(--c-accent) 55%, transparent); outline-offset: 4px; border-radius: 10px; } .zw-pj-flow.file-drop .file-target { background: var(--c-accent-soft); border-radius: 8px; } .zw-pj-taskcard.file-drop { outline: 2px dashed var(--c-accent); outline-offset: -4px; } .zw-pj-item.file-drop { outline: 2px dashed var(--c-accent); outline-offset: -2px; background: var(--c-accent-soft); } .zw-pj-main.file-drop-any { outline: 2px dashed color-mix(in srgb, var(--c-accent) 55%, transparent); outline-offset: -6px; border-radius: 12px; } .zw-pj-upload { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 8px; width: min(460px, calc(100% - 32px)); margin: 8px auto 0; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-raised); box-shadow: var(--c-shadow-pop); font-size: 12.5px; } .zw-pj-upload > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-upload .zw-meter { width: 90px; flex: none; } .zw-pj-upload .zw-meter > span { background: var(--c-accent); } button.zw-pj-chip-mini.files:hover { color: var(--c-accent); } .zw-pj-taskcard-files h4, .zw-pj-taskcard-files .zw-row h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--c-muted); font-weight: 650; } .zw-pj-taskcard-files { display: grid; gap: 6px; } .zw-pj-attachments { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .zw-pj-attachment { display: flex; align-items: center; gap: 9px; padding: 3px 4px; border-radius: 8px; } .zw-pj-attachment:hover { background: var(--c-hover); } .zw-pj-attachment-thumb { flex: none; display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-subtle); overflow: hidden; cursor: pointer; } .zw-pj-attachment-thumb .zw-pj-file-thumb { width: 100%; height: 100%; object-fit: cover; } .zw-pj-attachment.mail .zw-pj-attachment-thumb { color: var(--c-accent); } .zw-pj-attachment-main { flex: 1; min-width: 0; display: grid; } .zw-pj-attachment-name { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--c-ink); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .zw-pj-attachment-name:hover { color: var(--c-accent); text-decoration: underline; } .zw-pj-attachment .zw-icon-btn { width: 26px; height: 26px; } .zw-pj-filepick { max-height: 320px; } .zw-pj-tpl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow: auto; } .zw-pj-tpl-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); } .zw-pj-tpl-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--c-accent-soft); color: var(--c-accent); } .zw-pj-tpl-main { flex: 1; min-width: 0; display: grid; gap: 3px; } .zw-pj-tpl-main .zw-row { gap: 8px; } .zw-pj-tpl-main p { margin: 0; color: var(--c-ink-2, var(--c-ink)); } .zw-pj-tpl-actions { display: flex; align-items: center; gap: 2px; flex: none; } .zw-pj-tpl-actions .zw-icon-btn.danger { color: var(--c-bad); } .zw-pj-tpl-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 10px; color: var(--c-muted); text-align: center; } .zw-pj-tpl-empty p { margin: 0; } /* Verschlüsselte Freigabeordner: Wiederherstellungsschlüssel */ .zw-recovery-key { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--c-subtle); font: 600 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; white-space: pre-wrap; word-break: break-all; user-select: all; } /* Projekte: Schlagwort-Hierarchien, Farbe/Ort/weitere Zuständige, Termin-Notizen, Tabellen in Notizen */ .zw-pj-tagtree { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex-basis: 100%; padding: 4px 0; } .zw-pj-tagtree-kids { display: inline-flex; flex-wrap: wrap; gap: 5px; padding-left: 10px; border-left: 2px solid var(--c-line); } .zw-pj-tagtree-kids .zw-pj-tagpill { font-size: 12px; } .zw-pj-swatches { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } .zw-pj-swatch { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--c-surface); background: var(--zw-sw, transparent); box-shadow: 0 0 0 1px var(--c-line); cursor: pointer; display: grid; place-items: center; color: var(--c-muted); } .zw-pj-swatch.none { background: var(--c-subtle); } .zw-pj-swatch.active { box-shadow: 0 0 0 2px var(--zw-sw, var(--c-ink)); } .zw-pj-swatch:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .zw-pj-swatch:disabled { cursor: default; opacity: .7; } .zw-pj-location { display: inline-flex; align-items: center; gap: 2px; min-width: 0; flex: 1; } .zw-pj-location .zw-input { flex: 1; min-width: 0; } .zw-pj-maplink { flex: none; width: 28px; height: 28px; color: var(--c-accent); } .zw-pj-peoplechips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; } .zw-pj-personchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 1px; border-radius: 999px; background: var(--c-subtle); font-size: 12px; max-width: 180px; } .zw-pj-personchip > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-personchip button { border: 0; background: none; padding: 1px; color: var(--c-muted); cursor: pointer; display: grid; place-items: center; border-radius: 50%; } .zw-pj-personchip button:hover { color: var(--c-bad); background: var(--c-hover); } .zw-pj-personadd { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--c-line); background: none; color: var(--c-muted); font-size: 12px; cursor: pointer; } .zw-pj-personadd:hover { color: var(--c-accent); border-color: var(--c-accent); } .zw-pj-taskcard-people, .zw-pj-taskcard-look { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .zw-pj-taskcard-people label { display: inline-flex; align-items: center; gap: 5px; color: var(--c-muted); } .zw-pj-taskcard-people .zw-input, .zw-pj-taskcard-look .zw-input { height: 30px; font-size: 12.5px; padding: 0 8px; } .zw-pj-taskcard-people select.zw-input { max-width: 170px; padding-right: 26px; } .zw-pj-avatars { display: inline-flex; align-items: center; } .zw-pj-avatars .zw-avatar.tiny + .zw-avatar.tiny { margin-left: -6px; box-shadow: 0 0 0 2px var(--c-surface); } .zw-pj-avatars-more { margin-left: 3px; font-size: 11px; color: var(--c-muted); } .zw-pj-chip-mini.location { text-decoration: none; color: inherit; max-width: 200px; overflow: hidden; white-space: nowrap; } .zw-pj-chip-mini.location:hover { color: var(--c-accent); } /* Aufgabenfarbe: Haken und Titel in der Farbe (wie Pagicos farbige Aufgaben) */ .zw-pj-row.has-color > .zw-pj-row-line .zw-pj-check { border-color: var(--zw-tcolor); background: color-mix(in srgb, var(--zw-tcolor) 14%, transparent); } .zw-pj-row.has-color:not(.done) > .zw-pj-row-line .zw-pj-row-title { color: color-mix(in srgb, var(--zw-tcolor) 78%, var(--c-ink)); } .zw-pj-row.has-color.done > .zw-pj-row-line .zw-pj-check { background: var(--zw-tcolor); } /* Termin-Notizen und Tabellen in Notizen */ .zw-pj-note-event { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; border: 0; font: inherit; font-size: 11.5px; font-weight: 600; background: color-mix(in srgb, var(--c-accent) 13%, transparent); color: var(--c-accent); } button.zw-pj-note-event { cursor: pointer; } button.zw-pj-note-event:hover { background: color-mix(in srgb, var(--c-accent) 22%, transparent); } .zw-pj-note-event.today { background: color-mix(in srgb, var(--c-warn, #ca8a04) 18%, transparent); color: color-mix(in srgb, var(--c-warn, #ca8a04) 80%, var(--c-ink)); } .zw-pj-note-event.past { background: var(--c-subtle); color: var(--c-muted); } .zw-pj-note-tablebtn { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0 3px; font: inherit; color: var(--c-accent); cursor: pointer; border-radius: 4px; } .zw-pj-note-tablebtn:hover { background: var(--c-hover); } .zw-pj-rich-table { overflow-x: auto; margin: 2px 0 8px; } .zw-pj-rich-table table { border-collapse: collapse; font-size: 13px; min-width: 50%; } .zw-pj-rich-table th, .zw-pj-rich-table td { border: 1px solid var(--c-line); padding: 4px 9px; height: 2em; text-align: left; vertical-align: top; overflow-wrap: break-word; } .zw-pj-rich-table th { background: var(--c-subtle); font-weight: 600; } .zw-pj-rich-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--c-subtle) 45%, transparent); } .zw-pj-eventnotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .zw-pj-eventnote { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; } .zw-pj-eventnote:hover { background: var(--c-hover); } .zw-pj-eventnote-when { font-size: 12px; font-weight: 600; color: var(--c-accent); white-space: nowrap; } .zw-pj-eventnote-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-daynotes { margin-bottom: 12px; } .zw-pj-board.by-category, .zw-pj-board.by-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; padding-bottom: 6px; } .zw-pj-column.has-cat { border-top: 3px solid var(--zw-cat); } .zw-pj-column h4 .zw-pj-dot { margin-right: 6px; } .zw-pj-boardby { display: inline-flex; align-items: center; gap: 6px; } .zw-pj-boardby .zw-input { height: 30px; font-size: 12.5px; padding: 0 26px 0 8px; } @media (max-width: 760px) { .zw-pj-board.by-category, .zw-pj-board.by-list { grid-auto-flow: row; grid-auto-columns: auto; } } /* Unterprojekte als Live-Karten */ .zw-pj-subcards { margin-top: 18px; } .zw-pj-subcards > header { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; color: var(--c-muted); } .zw-pj-subcards > header h3 { margin: 0; font-size: 14px; color: var(--c-ink); } .zw-pj-subcards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .zw-pj-subcard { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid var(--c-line); border-left: 3px solid var(--zw-sub); border-radius: 10px; background: var(--c-surface); text-align: left; font: inherit; color: inherit; cursor: pointer; } .zw-pj-subcard:hover { border-color: color-mix(in srgb, var(--zw-sub) 50%, var(--c-line)); background: color-mix(in srgb, var(--zw-sub) 5%, var(--c-surface)); } .zw-pj-subcard:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .zw-pj-subcard-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; } .zw-pj-subcard-name { display: grid; min-width: 0; } .zw-pj-subcard-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-subcard-ring { width: 34px; height: 34px; transform: rotate(-90deg); } .zw-pj-subcard-ring circle { fill: none; stroke-width: 4; } .zw-pj-subcard-ring .track { stroke: var(--c-line); } .zw-pj-subcard-ring .value { stroke-linecap: round; } .zw-pj-subcard-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; } .zw-pj-subcard-stats span { display: inline-flex; align-items: center; gap: 3px; } .zw-pj-subcard-stats .bad { color: var(--c-bad); } .zw-pj-subcard-time { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; font-size: 11px; color: var(--c-muted); } .zw-pj-subcard-bar { position: relative; height: 5px; border-radius: 3px; background: var(--c-line-soft, var(--c-line)); } .zw-pj-subcard-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: color-mix(in srgb, var(--zw-sub) 70%, transparent); } .zw-pj-subcard-bar.late > span { background: var(--c-bad); } .zw-pj-subcard-bar > i { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; border-radius: 1px; background: var(--c-ink); } /* Projekttabelle */ .zw-pj-tbl-wrap { overflow: auto; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-surface); max-height: calc(100vh - 260px); } .zw-pj-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .zw-pj-tbl th, .zw-pj-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--c-line-soft, var(--c-line)); text-align: left; white-space: nowrap; } .zw-pj-tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--c-subtle); font-weight: 600; } .zw-pj-tbl thead tr.zw-pj-tbl-filters th { top: 33px; padding: 4px 6px; background: var(--c-surface); } .zw-pj-tbl thead th button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; } .zw-pj-tbl thead th button:hover { color: var(--c-accent); } .zw-pj-tbl th.num, .zw-pj-tbl td.num { text-align: right; } .zw-pj-tbl th.num button { flex-direction: row-reverse; } .zw-pj-tbl-filters .zw-input { height: 26px; min-width: 70px; width: 100%; font-size: 12px; padding: 0 6px; } .zw-pj-tbl-filters select.zw-input { padding-right: 22px; } .zw-pj-tbl tbody tr { cursor: pointer; } .zw-pj-tbl tbody tr:hover td { background: var(--c-hover); } .zw-pj-tbl tbody tr:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; } .zw-pj-tbl-name { display: inline-flex; align-items: center; gap: 7px; min-width: 200px; } .zw-pj-tbl td.bad { color: var(--c-bad); font-weight: 600; } .zw-pj-tbl-progress { display: inline-flex; align-items: center; gap: 6px; } .zw-pj-tbl-progress > span { width: 54px; height: 5px; border-radius: 3px; background: var(--c-line); overflow: hidden; } .zw-pj-tbl-progress i { display: block; height: 100%; } .zw-pj-wf-action.unusable { border-color: color-mix(in srgb, var(--c-bad) 45%, var(--c-line)); } .zw-pj-task.has-color { box-shadow: inset 3px 0 0 var(--zw-tcolor); } /* Polaris › Netzwerk: Server aus den gekoppelten Kundenbereichen (wie die Netzwerk-Ansicht im Finder). */ .zw-fs-netpane { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--c-surface); } .zw-fs-netpane[hidden] { display: none; } .zw-fs-net { flex: 1; min-height: 0; display: flex; flex-direction: column; outline: none; } .zw-fs-net-bar { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-muted); flex-wrap: wrap; } .zw-fs-net-bar-text { display: grid; gap: 1px; min-width: 0; color: var(--c-ink); } .zw-fs-net-bar-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-fs-net-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: 12px; } .zw-fs-net-body > .zw-notice { margin: 12px 12px 0; } .zw-fs-net-group-head { display: flex; align-items: center; gap: 6px; padding: 14px 16px 0; color: var(--c-muted); font-size: 12.5px; } .zw-fs-net-group-head strong { color: var(--c-ink); font-weight: 600; } .zw-fs-net-icon { position: relative; color: var(--c-accent); } .zw-fs-net-icon.linux { color: var(--c-muted); } .zw-fs-net-tile.off .zw-fs-net-icon { opacity: .55; } .zw-fs-net-dot { position: absolute; right: 26px; bottom: 16px; width: 11px; height: 11px; border-radius: 50%; background: var(--c-muted); box-shadow: 0 0 0 2px var(--c-surface); } .zw-fs-net-dot.on { background: var(--c-good); } .zw-fs-net-dot.busy { background: var(--c-warn); } .zw-fs-net-login { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; color: var(--c-good); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Projekte: gleichzeitig an einer Akte arbeiten (public/apps/projects/live.js). Farbe je Person in --zw-peer. */ .zw-live-bar { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 340px; font-size: 12px; color: var(--c-muted); } .zw-live-bar[hidden] { display: none; } .zw-live-faces { display: inline-flex; flex: none; } .zw-live-face { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--zw-peer); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 2px var(--c-surface); } .zw-live-faces .zw-live-face + .zw-live-face { margin-left: -6px; } .zw-live-face.small { width: 17px; height: 17px; font-size: 8.5px; box-shadow: 0 0 0 1.5px var(--c-surface); } .zw-live-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-live-bar.offline .zw-live-state { padding: 2px 9px; border-radius: 11px; background: var(--c-warn-soft); color: var(--c-warn-ink); font-weight: 600; white-space: nowrap; } .zw-live-peer { outline: 2px solid var(--zw-peer); outline-offset: 1px; border-radius: 4px; } .zw-live-flag { position: absolute; z-index: 6; max-width: 240px; padding: 0 6px; border-radius: 4px 4px 4px 0; background: var(--zw-peer); color: #fff; font-size: 10.5px; font-weight: 650; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .zw-live-here > .zw-pj-row-line { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--zw-peer) 60%, transparent); } .zw-pj-blk.zw-live-here { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--zw-peer) 60%, transparent); border-radius: 8px; } .zw-live-badge { display: inline-flex; gap: 2px; } .zw-live-mirror { position: absolute; z-index: 2; margin: 0; overflow: hidden; border-style: solid; border-color: transparent; background: transparent; color: transparent; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; } .zw-live-mirror.single { white-space: pre; overflow-wrap: normal; } .zw-live-caret { position: relative; display: inline-block; width: 0; height: 1.25em; margin-left: -1px; border-left: 2px solid var(--zw-peer); vertical-align: text-bottom; } .zw-live-sel { background: color-mix(in srgb, var(--zw-peer) 26%, transparent); border-radius: 2px; } .zw-live-typing { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px 28px; padding: 2px 8px; border-left: 2px solid var(--zw-peer); font-size: 12px; color: var(--c-ink); min-width: 0; } .zw-live-typing strong { color: var(--zw-peer); font-weight: 650; flex: none; } .zw-live-typing span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .zw-live-typing em { flex: none; color: var(--c-muted); font-style: normal; animation: zw-live-dots 1.4s ease-in-out infinite; } @keyframes zw-live-dots { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .zw-live-typing em { animation: none; } } @media (max-width: 720px) { .zw-live-names { display: none; } } /* Projekttabelle im schmalen Fenster: Sie misst, ob sie quer übersteht (projecttable.js, data-fold 0–4), und schiebt dann Spalten mit Priorität 4, danach 3, danach 2, zuletzt den Fortschritt in die Zeile unter dem Namen; sortiert wird dann über die Auswahl. */ .zw-pj-tbl-sub { display: none; } .zw-pj-tbl-sort { display: none; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; color: var(--c-muted); min-width: 0; } .zw-pj-tbl-sort select.zw-input { width: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; height: 30px; font-size: 12.5px; } .zw-pj-tbl-view:not([data-fold="0"]) .zw-pj-tbl-sort { display: flex; } .zw-pj-tbl-view:not([data-fold="0"]) .zw-pj-tbl-sub { display: flex; flex-wrap: wrap; gap: 1px 10px; margin: 2px 0 0 15px; font-size: 12px; color: var(--c-muted); white-space: normal; } .zw-pj-tbl-sub > span { display: none; } .zw-pj-tbl-sub > span.bad { color: var(--c-bad); font-weight: 600; } .zw-pj-tbl-view:not([data-fold="0"]) :is(th, td)[data-prio="4"] { display: none; } .zw-pj-tbl-view:not([data-fold="0"]) .zw-pj-tbl-sub > span[data-prio="4"] { display: inline; } .zw-pj-tbl-view:not([data-fold="0"], [data-fold="1"]) :is(th, td)[data-prio="3"] { display: none; } .zw-pj-tbl-view:not([data-fold="0"], [data-fold="1"]) .zw-pj-tbl-sub > span[data-prio="3"] { display: inline; } .zw-pj-tbl-view:is([data-fold="3"], [data-fold="4"]) :is(th, td)[data-prio="2"] { display: none; } .zw-pj-tbl-view:is([data-fold="3"], [data-fold="4"]) .zw-pj-tbl-sub > span[data-prio="2"] { display: inline; } .zw-pj-tbl-view:is([data-fold="3"], [data-fold="4"]) .zw-pj-tbl td.name { white-space: normal; } .zw-pj-tbl-view:is([data-fold="3"], [data-fold="4"]) .zw-pj-tbl-name { min-width: 0; } .zw-pj-tbl-view[data-fold="4"] :is(th, td)[data-col="progress"] { display: none; } .zw-pj-tbl-view[data-fold="4"] .zw-pj-tbl-sub > span[data-prio="1"] { display: inline; } /* Tabellen in Notizen: in schmalen Blöcken (Spalte, Telefon) wird jede Zeile ein Block – die erste Zelle als Titel, die übrigen mit dem Spaltenkopf davor; leere Zellen entfallen. Ab vier Spalten unter 560 px, drei unter 420, zwei unter 280. */ .zw-pj-rich-table { container: pj-rich / inline-size; } @container pj-rich (max-width: 560px) { .zw-pj-rich-table table.cols-4 { display: block; min-width: 0; } .zw-pj-rich-table table.cols-4 thead { display: none; } .zw-pj-rich-table table.cols-4 :is(tbody, tr) { display: block; } .zw-pj-rich-table table.cols-4 tr { margin: 0 0 6px; padding: 5px 0; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); } .zw-pj-rich-table table.cols-4 td { display: block; height: auto; padding: 2px 10px; border: 0; background: none !important; } .zw-pj-rich-table table.cols-4 td.empty { display: none; } .zw-pj-rich-table table.cols-4 td:first-child { font-weight: 600; } .zw-pj-rich-table table.cols-4.labeled td:not(:first-child) { display: grid; grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); gap: 8px; } .zw-pj-rich-table table.cols-4.labeled td:not(:first-child)::before { content: attr(data-label); color: var(--c-muted); font-size: 12px; overflow-wrap: anywhere; } } @container pj-rich (max-width: 420px) { .zw-pj-rich-table table.cols-3 { display: block; min-width: 0; } .zw-pj-rich-table table.cols-3 thead { display: none; } .zw-pj-rich-table table.cols-3 :is(tbody, tr) { display: block; } .zw-pj-rich-table table.cols-3 tr { margin: 0 0 6px; padding: 5px 0; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); } .zw-pj-rich-table table.cols-3 td { display: block; height: auto; padding: 2px 10px; border: 0; background: none !important; } .zw-pj-rich-table table.cols-3 td.empty { display: none; } .zw-pj-rich-table table.cols-3 td:first-child { font-weight: 600; } .zw-pj-rich-table table.cols-3.labeled td:not(:first-child) { display: grid; grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); gap: 8px; } .zw-pj-rich-table table.cols-3.labeled td:not(:first-child)::before { content: attr(data-label); color: var(--c-muted); font-size: 12px; overflow-wrap: anywhere; } } @container pj-rich (max-width: 280px) { .zw-pj-rich-table table.cols-2 { display: block; min-width: 0; } .zw-pj-rich-table table.cols-2 thead { display: none; } .zw-pj-rich-table table.cols-2 :is(tbody, tr) { display: block; } .zw-pj-rich-table table.cols-2 tr { margin: 0 0 6px; padding: 5px 0; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface); } .zw-pj-rich-table table.cols-2 td { display: block; height: auto; padding: 2px 10px; border: 0; background: none !important; } .zw-pj-rich-table table.cols-2 td.empty { display: none; } .zw-pj-rich-table table.cols-2 td:first-child { font-weight: 600; } .zw-pj-rich-table table.cols-2.labeled td:not(:first-child) { display: grid; grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); gap: 8px; } .zw-pj-rich-table table.cols-2.labeled td:not(:first-child)::before { content: attr(data-label); color: var(--c-muted); font-size: 12px; overflow-wrap: anywhere; } } .zw-pj-inline-more > summary { cursor: pointer; font-size: 12.5px; color: var(--c-ink-2); padding: 2px 0; } .zw-pj-inline-more[open] > summary { margin-bottom: 8px; } .zw-pj-inline textarea.zw-input { min-height: 0; } .zw-pj-inline .zw-form-grid { gap: 10px; } .zw-pj-inline.flash { animation: zw-pj-inline-flash .6s ease-out; } @keyframes zw-pj-inline-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 45%, transparent); } } @media (prefers-reduced-motion: reduce) { .zw-pj-inline.flash { animation: none; outline: 2px solid var(--c-accent); } } /* Projekt bearbeiten im Metadaten-Bereich, Mitglieder, Freigabe-Links, Umbenennen im Reiter und im Kopf (statt Dialogen) */ .zw-pj-title-input.zw-input { height: auto; min-width: 0; width: auto; max-width: 100%; margin: 0 0 0 -7px; padding: 1px 6px; border-color: transparent; background: transparent; font: inherit; font-size: 20px; font-weight: 650; color: var(--c-ink); } .zw-pj-title-input.zw-input:hover { border-color: var(--c-line); } .zw-pj-title-input.zw-input:focus { border-color: var(--c-accent); background: var(--c-surface); } .zw-pj-meta-desc { color: var(--c-ink-2); white-space: pre-line; overflow-wrap: anywhere; } .zw-pj-meta-form { display: grid; gap: 9px; } .zw-pj-meta-edit { display: grid; gap: 3px; min-width: 0; } .zw-pj-meta-edit > span { color: var(--c-muted); font-size: 11.5px; } .zw-pj-meta-edit .zw-input, .zw-pj-meta-members .zw-input, .zw-pj-meta-contacts .zw-input { height: 30px; font-size: 12.5px; padding: 0 8px; width: 100%; min-width: 0; } .zw-pj-meta-edit textarea.zw-input { height: auto; min-height: 0; padding: 6px 8px; } .zw-pj-meta-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .zw-pj-meta-tagedit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .zw-pj-meta-tagedit .zw-pj-tag { display: inline-flex; align-items: center; gap: 3px; } .zw-pj-meta-tagedit .zw-pj-tag button { display: inline-grid; place-items: center; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .7; } .zw-pj-meta-tagedit .zw-pj-tag button:hover, .zw-pj-meta-tagedit .zw-pj-tag button:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); } .zw-pj-meta-tagedit .zw-input { flex: 1 1 100%; } .zw-pj-meta-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; border: 0; background: none; font: inherit; color: var(--c-ink-2); text-align: left; cursor: pointer; } .zw-pj-meta-toggle:hover span { color: var(--c-accent); } .zw-pj-meta-members, .zw-pj-meta-contacts { display: grid; gap: 6px; } .zw-pj-meta-memberlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .zw-pj-meta-memberlist li { display: grid; grid-template-columns: 14px minmax(0, 1fr) 112px; align-items: center; gap: 6px; color: var(--c-ink-2); } .zw-pj-meta-memberlist li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-pj-meta-memberlist li .zw-input { height: 26px; padding: 0 4px; font-size: 12px; } .zw-pj-meta-contacts .zw-pj-meta-people li { justify-content: space-between; } .zw-pj-metapanel .zw-pj-shares { display: grid; gap: 8px; } .zw-pj-metapanel .zw-pj-shares .zw-form-grid.two, .zw-pj-metapanel .zw-pj-shares .zw-form-grid.three { grid-template-columns: 1fr; } .zw-pj-metapanel .zw-pj-share-urlrow { flex-wrap: wrap; } .zw-pj-metapanel .zw-pj-share-intro { font-size: 12px; } .zw-pj-metapanel.editing { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); } .zw-pj-ctab-input.zw-input { height: 30px; width: 180px; margin: 2px 4px; font-size: 13px; } .zw-pj-section-rename.zw-input { height: 30px; max-width: 280px; font-size: 14px; font-weight: 600; } /* Bearbeiten oder aufgeklappte Bereiche sind länger als das Fenster: dann mit dem Inhalt scrollen statt kleben. */ .zw-pj-metapanel.editing, .zw-pj-metapanel.expanded { position: static; } /* Zeiten und Abrechnung sind eigenständige Apps; der Projekt Hub zeigt nur den jeweiligen Projektausschnitt. */ .zw-time-app, .zw-billing-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100%; min-height: 0; background: var(--c-surface); } .zw-time-app-nav, .zw-billing-app-nav { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px; border-right: 1px solid var(--c-line); background: var(--c-raised); } .zw-time-app-brand { display: flex; align-items: center; gap: 9px; color: var(--c-ink); } .zw-time-app-brand > div { display: grid; gap: 1px; } .zw-time-app-brand small { color: var(--c-muted); font-size: 11.5px; } .zw-time-app-projects { display: grid; align-content: start; gap: 4px; min-height: 0; overflow: auto; } .zw-time-app-projects > button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-time-app-projects > button:hover { background: var(--c-hover); } .zw-time-app-projects > button.active { border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); } .zw-time-app-projects > button small { color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-time-app-main, .zw-billing-app-main { min-width: 0; overflow: auto; padding: 16px; } .zw-time-app-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .zw-time-app-head h2 { margin: 0; font-size: 20px; } .zw-time-app-head p { margin: 3px 0 0; } .zw-billing-app-summary { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; } .zw-billing-app-summary > div { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-raised); } .zw-billing-app-summary span { color: var(--c-muted); font-size: 12px; } .zw-billing-app-summary strong { font-size: 18px; } .zw-billing-app-actions { display: flex; flex-wrap: wrap; gap: 8px; } .zw-billing-queue { display: grid; gap: 7px; } .zw-billing-queue > button { display: grid; grid-template-columns: minmax(180px, 1fr) 140px 90px 170px; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-raised); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .zw-billing-queue > button:hover { border-color: var(--c-accent); } .zw-billing-queue span, .zw-billing-queue small { color: var(--c-muted); } .zw-billing-connectors { display: grid; gap: 7px; } .zw-billing-connectors > div { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-raised); } .zw-billing-connectors > div > span { display: grid; min-width: 0; margin-right: auto; } .zw-billing-connectors small { color: var(--c-muted); overflow-wrap: anywhere; } .zw-billing-app-note { display: flex; gap: 10px; max-width: 720px; margin-top: 18px; padding: 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-raised); } .zw-billing-app-note p { margin: 4px 0 0; color: var(--c-muted); } .zw-time-week-summary { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; padding: 12px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-raised); } .zw-time-week-summary strong { font-size: 20px; } .zw-time-week-summary span { color: var(--c-muted); } .zw-time-week-days { display: grid; gap: 12px; } .zw-time-week-days section { border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; } .zw-time-week-days h3 { margin: 0; padding: 8px 11px; background: var(--c-raised); font-size: 13px; } .zw-time-week-days section > div { display: grid; grid-template-columns: 110px minmax(130px, .8fr) minmax(160px, 1.5fr) 70px; gap: 10px; align-items: center; padding: 8px 11px; border-top: 1px solid var(--c-line); } .zw-time-week-days time, .zw-time-week-days span { color: var(--c-muted); } .zw-time-week-days b { text-align: right; } @media (max-width: 760px) { .zw-time-app, .zw-billing-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .zw-time-app-nav, .zw-billing-app-nav { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--c-line); } .zw-billing-app-summary { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }