Files
mhoennigandClaude Fable 5.1 7bfed1a1f3
werkator/jvm build succeeded after 10:30
Compact populated UI drafts with habit tiles (0.1.99)
Add the populated state (four entries over three customers, three habits)
to the UI mockup: compact work card with per-customer chips, entry rows
with inline stepper, habits as side-by-side vertical tiles (rows kept as
documented alternative), shorter edit sheet and a populated desktop view.
Align the Today and Work sections of docs/plans/ui-refresh.md with it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-12 10:39:10 +02:00

448 lines
94 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Werkjournal UI-Entwürfe</title>
<style>:root{--wj-bg:#ffffff;--wj-panel:#fafafa;--wj-panel-2:#f4f5f5;--wj-line:#e4e7e7;--wj-line-2:#d1d6d5;--wj-text:#141616;--wj-text-2:#3e4645;--wj-muted:#6e7c7a;--wj-ghost:#9ea9a7;--wj-accent:#0e6b7d;--wj-accent-2:#0a5262;--wj-accent-soft:#e3f0f3;--wj-accent-soft-2:#c6e0e6;--wj-clay:#b0563b;--wj-clay-soft:#f6e9e4;--wj-amber:#b8860b;--wj-amber-soft:#f9f0d2;--wj-crit:#b3261e;--wj-crit-soft:#f8e2df;--wj-shadow:0 1px 2px rgb(20 22 22/.06),0 4px 16px rgb(20 22 22/.06);--wj-on-accent:#ffffff;--doc-bg:#eef0f0;--frame:#1d2221;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--wj-bg:#242928;--wj-panel:#2a302f;--wj-panel-2:#313837;--wj-line:#3e4645;--wj-line-2:#545f5d;--wj-text:#f4f5f5;--wj-text-2:#d1d6d5;--wj-muted:#9ea9a7;--wj-ghost:#6e7c7a;--wj-accent:#63bccb;--wj-accent-2:#8ed0db;--wj-accent-soft:#1f3b41;--wj-accent-soft-2:#27505a;--wj-clay:#e09070;--wj-clay-soft:#3e2a22;--wj-amber:#e3b341;--wj-amber-soft:#3d3418;--wj-crit:#ef6f66;--wj-crit-soft:#45201d;--wj-shadow:0 2px 6px rgb(0 0 0/.25);--wj-on-accent:#102328;--doc-bg:#1a1e1d;--frame:#0c0f0e;color-scheme:dark}}
:root[data-theme="dark"]{--wj-bg:#242928;--wj-panel:#2a302f;--wj-panel-2:#313837;--wj-line:#3e4645;--wj-line-2:#545f5d;--wj-text:#f4f5f5;--wj-text-2:#d1d6d5;--wj-muted:#9ea9a7;--wj-ghost:#6e7c7a;--wj-accent:#63bccb;--wj-accent-2:#8ed0db;--wj-accent-soft:#1f3b41;--wj-accent-soft-2:#27505a;--wj-clay:#e09070;--wj-clay-soft:#3e2a22;--wj-amber:#e3b341;--wj-amber-soft:#3d3418;--wj-crit:#ef6f66;--wj-crit-soft:#45201d;--wj-shadow:0 2px 6px rgb(0 0 0/.25);--wj-on-accent:#102328;--doc-bg:#1a1e1d;--frame:#0c0f0e;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--doc-bg);color:var(--wj-text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
svg{display:block}
.doc{max-width:1500px;margin:0 auto;padding:28px 24px 64px}
.doc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.doc-head h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.doc-head p{margin:0;color:var(--wj-muted);max-width:64ch}
.theme{border:1px solid var(--wj-line-2);background:var(--wj-panel);color:var(--wj-text);border-radius:999px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;flex-shrink:0}
.theme:focus-visible{outline:2px solid var(--wj-accent);outline-offset:2px}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 28px}
.legend span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--wj-text-2);padding:4px 10px 4px 4px;border:1px solid var(--wj-line);border-radius:999px;background:var(--wj-panel)}
.legend i{width:18px;height:18px;border-radius:50%;border:1px solid rgb(0 0 0/.08)}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--wj-muted);margin:36px 0 14px;font-weight:600}
.row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.fig{display:grid;gap:10px}
.fig figcaption{font-size:13px;color:var(--wj-text-2);max-width:390px}
.fig figcaption b{display:block;color:var(--wj-text);font-weight:600;margin-bottom:2px}
.phone{width:390px;height:812px;border-radius:38px;background:var(--frame);padding:10px;box-shadow:0 20px 50px rgb(0 0 0/.25)}
.phone>.scr{position:relative;height:100%;border-radius:30px;background:var(--wj-bg);overflow:hidden;display:flex;flex-direction:column}
.desk{width:100%;max-width:1180px;height:760px;border-radius:14px;background:var(--frame);padding:8px;box-shadow:0 20px 50px rgb(0 0 0/.25)}
.desk>.scr{height:100%;border-radius:8px;background:var(--wj-bg);overflow:hidden;display:flex;flex-direction:column}
.status{height:22px;display:flex;justify-content:space-between;padding:4px 22px 0;font-size:11px;font-weight:600;color:var(--wj-text-2)}
.bar{height:56px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--wj-panel);border-bottom:1px solid var(--wj-line)}
.bar .brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--wj-text)}
.logo{width:28px;height:28px;border-radius:8px;background:var(--wj-accent);display:grid;place-items:center;color:var(--wj-on-accent)}
.bar .sp{flex:1}
.bar nav{display:flex;gap:22px;font-size:14px;color:var(--wj-muted)}
.bar nav .on{color:var(--wj-accent);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--wj-accent-soft);color:var(--wj-accent);white-space:nowrap}
.pill.n{background:var(--wj-panel-2);color:var(--wj-text-2)}
.pill.c{background:var(--wj-clay-soft);color:var(--wj-clay)}
.pill.a{background:var(--wj-amber-soft);color:var(--wj-amber)}
.ib{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--wj-text-2);background:transparent}
.content{flex:1;overflow:auto;padding:16px 16px 110px}
.desk .content{padding:32px 40px 40px;max-width:1100px;margin:0 auto;width:100%}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--wj-muted);font-weight:600}
.title{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:2px 0 0;line-height:1.2}
.desk .title{font-size:32px}
.head{margin-bottom:16px}
.card{background:var(--wj-panel);border:1px solid var(--wj-line);border-radius:14px;padding:16px}
.desk .card{padding:20px}
.card h3{font-size:15px;font-weight:600;margin:0;color:var(--wj-text)}
.ct{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:6px}
.big{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--wj-accent);font-variant-numeric:tabular-nums}
.big small{font-size:18px;color:var(--wj-muted);font-weight:500;margin-left:4px}
.desk .big{font-size:56px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--wj-accent);color:var(--wj-on-accent);font-weight:600;font-size:15px;white-space:nowrap}
.btn.sq{border-radius:10px}
.btn.q{background:transparent;color:var(--wj-text-2);border:1px solid var(--wj-line-2)}
.btn.g{background:transparent;color:var(--wj-text-2)}
.btn.dis{background:var(--wj-panel-2);color:var(--wj-ghost)}
.btn.full{width:100%}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.kpi .l{font-size:12px;color:var(--wj-muted)}
.kpi .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--wj-text)}
.track{height:4px;border-radius:999px;background:var(--wj-accent-soft);margin-top:8px;overflow:hidden}
.track i{display:block;height:100%;width:var(--p,0);background:var(--wj-accent);border-radius:999px}
.list{margin-top:12px}
.entry{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 4px;border-bottom:1px solid var(--wj-line)}
.entry:last-child{border-bottom:0}
.entry .m{min-width:0}
.entry .m b{display:block;font-weight:600;font-size:15px}
.entry .m span{display:block;font-size:13px;color:var(--wj-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .h{font-weight:600;color:var(--wj-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.secline{display:flex;align-items:baseline;justify-content:space-between;margin:20px 0 10px}
.secline h3{font-size:15px;font-weight:600;margin:0}
.secline a{font-size:13px;color:var(--wj-accent);font-weight:600;text-decoration:none}
.habit{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--wj-panel);border:1px solid var(--wj-line);border-radius:14px;margin-bottom:10px}
.habit .m b{display:block;font-weight:600}
.habit .m span{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--wj-muted);margin-top:2px}
.habit .m span.warn{color:var(--wj-clay)}
.habit .m span.ok{color:var(--wj-accent)}
.step{display:flex;align-items:center;gap:6px}
.step .rb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--wj-line-2);color:var(--wj-text-2);background:transparent}
.step .rb.p{background:var(--wj-accent);color:var(--wj-on-accent);border-color:var(--wj-accent)}
.step .rb.s{width:40px;height:40px}
.step .n{min-width:36px;text-align:center;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tabs{position:absolute;left:0;right:0;bottom:0;height:78px;background:var(--wj-panel);border-top:1px solid var(--wj-line);display:flex;justify-content:space-around;align-items:flex-start;padding:8px 8px 0}
.tab{display:grid;justify-items:center;gap:3px;width:64px;font-size:11px;font-weight:600;color:var(--wj-muted)}
.tab i{width:48px;height:30px;border-radius:999px;display:grid;place-items:center}
.tab.on{color:var(--wj-accent)}
.tab.on i{background:var(--wj-accent-soft)}
.home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:5px;border-radius:999px;background:var(--wj-line-2)}
.daynav{display:flex;gap:8px;align-items:center;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--wj-line-2);font-size:13px;font-weight:600;color:var(--wj-text-2);background:var(--wj-panel)}
.chip.on{background:var(--wj-accent-soft);color:var(--wj-accent);border-color:transparent}
.chip.dis{color:var(--wj-ghost);border-color:var(--wj-line)}
.toggle{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--wj-line);font-size:14px;color:var(--wj-text-2)}
.sw{width:44px;height:26px;border-radius:999px;background:var(--wj-line-2);position:relative}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--wj-bg)}
.sw.on{background:var(--wj-accent)}.sw.on::after{left:21px}
.we{margin-top:10px}
.we .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.we .top b{font-weight:600}
.we .top b span{color:var(--wj-muted);font-weight:500}
.we .top .h{font-weight:600;color:var(--wj-accent);font-size:20px;font-variant-numeric:tabular-nums}
.we p{margin:6px 0 0;color:var(--wj-text-2);font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.we .foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--wj-line)}
.we .acts{display:flex;gap:2px}
.we .acts .ib{width:40px;height:40px}
.we.sel{outline:2px solid var(--wj-accent);outline-offset:2px}
.dim{position:absolute;inset:0;background:rgb(20 22 22/.42)}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:92%;background:var(--wj-bg);border-radius:20px 20px 0 0;box-shadow:var(--wj-shadow);display:flex;flex-direction:column}
.sheet .grip{width:40px;height:4px;border-radius:999px;background:var(--wj-line-2);margin:10px auto 0}
.sheet .sh{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 20px}
.sheet .sh h3{font-size:18px;font-weight:600;margin:0}
.sheet .sb{padding:4px 20px 12px;overflow:auto;display:grid;gap:14px}
.sheet .sf{display:flex;gap:10px;padding:12px 20px 30px;border-top:1px solid var(--wj-line);background:var(--wj-panel)}
.sheet .sf .btn{flex:1}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--wj-text-2)}
.field .in{height:46px;border:1px solid var(--wj-line-2);border-radius:10px;background:var(--wj-bg);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:15px;color:var(--wj-text)}
.field .in.ph{color:var(--wj-ghost)}
.field .in.focus{border-color:var(--wj-accent);box-shadow:0 0 0 2px var(--wj-accent-soft)}
.field .in.ro{background:var(--wj-panel-2);border-color:var(--wj-line)}
.field .ta{min-height:76px;align-items:flex-start;padding-top:10px}
.field .hint{font-size:12px;color:var(--wj-muted)}
.hours{display:flex;gap:6px;flex-wrap:wrap}
.hours .c{width:40px;height:40px;border-radius:10px;border:1px solid var(--wj-line-2);display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--wj-text-2);font-variant-numeric:tabular-nums}
.hours .c.on{background:var(--wj-accent);color:var(--wj-on-accent);border-color:var(--wj-accent)}
.hours .c.more{width:auto;padding:0 12px;font-weight:500}
.note{border-radius:12px;padding:12px 14px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.note.a{background:var(--wj-amber-soft);color:var(--wj-text)}
.note.a svg{color:var(--wj-amber);flex-shrink:0}
.note.e{background:var(--wj-crit-soft);color:var(--wj-text)}
.note.e svg{color:var(--wj-crit);flex-shrink:0}
.note.ok{background:var(--wj-accent-soft);color:var(--wj-text)}
.note.ok svg{color:var(--wj-accent);flex-shrink:0}
.note b{display:block;font-weight:600;margin-bottom:2px}
.note .x{display:inline-block;margin-top:6px;font-weight:600;color:var(--wj-accent);font-size:13px}
.pills{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin-top:14px}
.mh{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.mh b{font-size:17px;font-weight:600}
.mk{display:flex;gap:18px;margin:10px 0 12px}
.mk div{font-size:12px;color:var(--wj-muted)}
.mk div b{display:block;font-size:18px;color:var(--wj-text);font-variant-numeric:tabular-nums}
.cal{display:grid;grid-template-columns:repeat(7,1fr) 28px;gap:5px}
.cal .wd{text-align:center;font-size:11px;color:var(--wj-muted);font-weight:600;padding-bottom:2px}
.cal .d{aspect-ratio:1;border-radius:10px;background:var(--wj-panel-2);position:relative;display:grid;place-items:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--wj-text)}
.cal .d::before{content:attr(data-n);position:absolute;top:4px;left:6px;font-size:10px;font-weight:500;color:var(--wj-muted)}
.cal .d.ok{background:var(--wj-accent-soft);color:var(--wj-accent)}
.cal .d.lo{background:var(--wj-clay-soft);color:var(--wj-clay)}
.cal .d.hi{background:var(--wj-amber-soft);color:var(--wj-amber)}
.cal .d.adj{opacity:.45}
.cal .d.fut{color:transparent;background:transparent;border:1px dashed var(--wj-line)}
.cal .d.today{outline:2px solid var(--wj-accent);outline-offset:-2px}
.cal .w{display:grid;place-items:center;font-size:12px;color:var(--wj-muted);font-variant-numeric:tabular-nums}
.cols{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start}
.drawer-head{padding:14px 16px;border-bottom:1px solid var(--wj-line)}
/* auth */
.auth{flex:1;overflow:auto;padding:28px 20px 24px;display:flex;flex-direction:column;gap:18px}
.auth .brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.auth h1{font-size:26px;letter-spacing:-.02em;margin:10px 0 0;line-height:1.15;text-wrap:balance}
.auth p{margin:0;color:var(--wj-text-2)}
.auth .lnk{color:var(--wj-accent);font-weight:600;font-size:14px}
.auth .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--wj-line);display:grid;gap:10px;font-size:13px;color:var(--wj-muted)}
.auth .foot .tiny{font-size:12px}
.code{font:600 24px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;height:56px}
.addr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:var(--wj-panel-2);font-weight:600;overflow-wrap:anywhere}
.addr small{font-weight:600;color:var(--wj-accent);font-size:13px;white-space:nowrap}
.seg{display:flex;gap:8px}
.seg .chip{flex:1;justify-content:center;height:40px}
.acct{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--wj-line)}
.acct:last-child{border-bottom:0}
.acct .m b{display:block;font-weight:600;overflow-wrap:anywhere}
.acct .m span{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--wj-muted);margin-top:4px;flex-wrap:wrap}
.acct .acts{display:flex;gap:2px;flex-shrink:0}
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--wj-muted);font-weight:600;padding:0 20px}
.steps i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--wj-panel-2);color:var(--wj-text-2);font-style:normal}
.steps i.on{background:var(--wj-accent);color:var(--wj-on-accent)}
.steps s{text-decoration:none;flex:1;height:1px;background:var(--wj-line)}
.okmark{width:56px;height:56px;border-radius:50%;background:var(--wj-accent-soft);color:var(--wj-accent);display:grid;place-items:center}
details.lk{border:1px solid var(--wj-line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--wj-text-2)}
details.lk summary{cursor:pointer;font-weight:600}
details.lk .in{margin-top:10px;font-size:12px;overflow-wrap:anywhere;height:auto;padding:10px 12px}
@media (prefers-reduced-motion:no-preference){.theme{transition:background .15s ease-out}}
/* compact variants */
.hero.c{align-items:center;margin-top:2px}
.hero.c .big{font-size:34px}
.kpis.c{grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.kpis.c .kpi .v{font-size:16px}
.kpis.c .track{margin-top:5px}
.bycust{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.bycust span{font-size:12px;font-weight:600;color:var(--wj-text-2);background:var(--wj-panel-2);border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums}
.bycust span b{color:var(--wj-accent);margin-left:4px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--wj-panel);border:1px solid var(--wj-line);border-radius:14px;padding:10px 8px 8px;display:grid;justify-items:center;gap:4px;text-align:center;min-width:0}
.tile .nm{font-size:13px;font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .cnt{font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--wj-text)}
.tile .st{font-size:11px;color:var(--wj-muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.tile .st i{width:7px;height:7px;border-radius:50%;background:var(--wj-accent)}
.tile .st.warn{color:var(--wj-clay)}.tile .st.warn i{background:var(--wj-clay)}
.tile .st.ok{color:var(--wj-accent)}
.tile .vs{display:grid;gap:4px;justify-items:center;margin-top:2px}
.tile .vs .rb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--wj-accent);color:var(--wj-on-accent)}
.tile .vs .rb.m{width:34px;height:30px;border-radius:999px;background:transparent;border:1px solid var(--wj-line-2);color:var(--wj-text-2)}
.tile.done .cnt{color:var(--wj-accent)}
.desk .tiles{grid-template-columns:repeat(3,1fr);gap:12px}
.desk .tile{padding:14px 10px 10px}
.crow{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--wj-line)}
.crow:last-child{border-bottom:0}
.crow .m{flex:1;min-width:0}
.crow .m b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .m b span{color:var(--wj-muted);font-weight:500}
.crow .m small{display:block;font-size:12px;color:var(--wj-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .ms{display:flex;align-items:center;gap:2px;flex-shrink:0}
.crow .ms .rb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--wj-line-2);color:var(--wj-text-2)}
.crow .ms .n{min-width:34px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--wj-accent);font-size:16px}
.crow .ms .n small{font-weight:500;color:var(--wj-muted);font-size:11px}
.crow .go{color:var(--wj-ghost);flex-shrink:0}
.crow.sel{background:var(--wj-accent-soft);border-radius:10px;padding:6px 8px;margin:0 -8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hab2{display:grid;gap:8px}
.hab2 .habit{padding:8px 10px 8px 14px;margin:0}
.hab2 .habit .m span{font-size:12px}
.hab2 .step .rb{width:38px;height:38px}
.hab2 .step .n{font-size:20px;min-width:30px}
</style>
</head>
<body>
<div class="doc">
<div class="doc-head"><div><h1>Werkjournal UI-Entwürfe</h1><p>Entwürfe zur Spezifikation docs/plans/ui-refresh.md. Werkator-Palette, System-Schrift, 8-px-Raster. Der Umschalter rechts zeigt Auto, Hell und Dunkel. Zahlen und Namen sind Beispiele.</p></div><button class="theme" id="theme" type="button"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg><span id="theme-label">Auto</span></button></div>
<div class="legend"><span><i style="background:var(--wj-accent)"></i>accent #0e6b7d / #63bccb</span><span><i style="background:var(--wj-accent-soft)"></i>accent-soft</span><span><i style="background:var(--wj-clay)"></i>clay: Grenze verfehlt, Löschen</span><span><i style="background:var(--wj-amber)"></i>amber: Entwurf, Konflikt, Frei</span><span><i style="background:var(--wj-crit)"></i>crit: Fehler</span><span><i style="background:var(--wj-panel);border-color:var(--wj-line-2)"></i>panel / line</span></div>
<h2 class="sec">Voller Zustand, kompakt · 390 × 812</h2><div class="row"><figure class="fig"><figcaption><b>Heute · voll, Kacheln (empfohlen)</b>Vier Einträge über drei Kunden, Kundensummen als Chips, Zeilen mit Inline-Stepper statt Karten. Drei Habits als Kacheln nebeneinander, jede in sich vertikal: Name, Zähler, Status, großes Plus, kleines Minus. Alles ohne Scrollen sichtbar.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Freitag, 12. September 2026</div><h2 class="title">Heute</h2></div>
<div class="card" style="padding:14px 16px"><div class="hero c"><div><h3>Arbeit heute</h3><div class="big" style="margin-top:2px">7<small>h</small></div></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
<div class="kpis c"><div class="kpi"><div class="l">Diese Woche</div><div class="v">23 h</div><div class="track"><i style="--p:74%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">71 h</div><div class="track"><i style="--p:46%"></i></div></div></div>
</div>
<div class="list" style="margin-top:6px">
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">3<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
</div>
<div class="secline" style="margin:14px 0 8px"><h3>Habits</h3><a>Kalender</a></div>
<div class="tiles">
<div class="tile done"><span class="nm">Lesen</span><span class="cnt">1</span><span class="st ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg> Ziel · Wo 4/5</span><div class="vs"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="rb m"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span></div></div>
<div class="tile"><span class="nm">Spaziergänge</span><span class="cnt">0</span><span class="st warn"><i></i>noch 1 · Wo 3/5</span><div class="vs"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="rb m"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span></div></div>
<div class="tile"><span class="nm">Kaffee</span><span class="cnt">2</span><span class="st"><i></i>max 3 · noch 1</span><div class="vs"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="rb m"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span></div></div>
</div></div><div class="tabs"><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Heute · voll, Zeilen (Alternative)</b>Gleicher Inhalt, Habits als verdichtete Zeilen (56 px statt 72 px). Braucht bei drei Habits etwa 60 px mehr Höhe als die Kacheln, liest lange Namen aber besser.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Freitag, 12. September 2026</div><h2 class="title">Heute</h2></div>
<div class="card" style="padding:14px 16px"><div class="hero c"><div><h3>Arbeit heute</h3><div class="big" style="margin-top:2px">7<small>h</small></div></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
<div class="kpis c"><div class="kpi"><div class="l">Diese Woche</div><div class="v">23 h</div><div class="track"><i style="--p:74%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">71 h</div><div class="track"><i style="--p:46%"></i></div></div></div>
</div>
<div class="list" style="margin-top:6px">
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">3<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
</div>
<div class="secline" style="margin:14px 0 8px"><h3>Habits</h3><a>Kalender</a></div>
<div class="hab2">
<div class="habit"><div class="m"><b>Lesen</b><span class="ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg> Tagesziel · Woche 4 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
<div class="habit"><div class="m"><b>Spaziergänge</b><span class="warn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg> noch 1 · Woche 3 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">0</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
<div class="habit"><div class="m"><b>Kaffee</b><span>max 3 · noch 1</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
</div></div><div class="tabs"><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Arbeit · voll, kompakt</b>Einträge als 52-px-Zeilen: Kunde · Projekt, Beschreibung einzeilig, Inline-Stepper, Pfeil. Bearbeiten und Löschen liegen im Sheet, nicht mehr als Icon-Reihe in jeder Karte. Kundensummen unter der Tageszahl. Der per Link fokussierte Eintrag ist hervorgehoben.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
<div class="daynav"><span class="chip"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
<div class="card" style="padding:14px 16px"><div class="hero c"><div><h3>Tag</h3><div class="big" style="margin-top:2px">7<small>h</small></div></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
<div class="toggle" style="margin-top:10px;padding-top:10px"><span>Freier Tag</span><span class="sw"></span></div>
</div>
<div class="secline" style="margin:14px 0 4px"><h3>Einträge</h3><span style="font-size:12px;color:var(--wj-muted)">Tippen zum Bearbeiten</span></div>
<div class="list" style="margin-top:0">
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">3<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow sel"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
</div>
</div><div class="tabs"><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Bearbeiten · kompaktes Sheet</b>Kunde und Projekt nebeneinander, Stunden-Pills in einer Reihe, Beschreibung kürzer, Datum als Nur-Lesen-Zeile ganz unten (ändern per Tipp). Löschen als Icon im Sheet-Kopf mit bestehender Bestätigung. Sheet ist etwa 120 px kürzer als die erste Fassung.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
<div class="daynav"><span class="chip"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
<div class="card" style="padding:14px 16px"><div class="hero c"><div><h3>Tag</h3><div class="big" style="margin-top:2px">7<small>h</small></div></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
<div class="toggle" style="margin-top:10px;padding-top:10px"><span>Freier Tag</span><span class="sw"></span></div>
</div>
<div class="secline" style="margin:14px 0 4px"><h3>Einträge</h3><span style="font-size:12px;color:var(--wj-muted)">Tippen zum Bearbeiten</span></div>
<div class="list" style="margin-top:0">
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">3<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow sel"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
</div>
</div>
<div class="dim"></div>
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Bearbeiten</h3><div style="display:flex"><span class="ib" title="Löschen" style="color:var(--wj-clay)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span><span class="ib" title="Schließen, Entwurf behalten"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div></div>
<div class="sb" style="gap:12px">
<div class="two"><div class="field"><label>Kunde</label><div class="in">Acme GmbH <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></div></div><div class="field"><label>Projekt</label><div class="in">Relaunch <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></div></div></div>
<div class="field"><label>Stunden</label><div class="hours"><span class="c">1</span><span class="c on">2</span><span class="c">3</span><span class="c">4</span><span class="c">5</span><span class="c">6</span><span class="c">7</span><span class="c">8</span><span class="c more">mehr…</span></div></div>
<div class="field"><label>Beschreibung</label><div class="in ta focus" style="min-height:56px">Abstimmung Navigation, Ticket #212</div></div>
<div class="field"><label>Datum</label><div class="in ro" style="height:40px;font-size:14px">Fr, 12. September 2026 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></div></div>
</div>
<div class="sf"><span class="btn sq"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg>Speichern</span><span class="btn sq g" style="flex:0 0 auto">Verwerfen</span></div></div>
</div></div></figure></div>
<h2 class="sec">Desktop · voll</h2><div class="row"><figure class="fig" style="width:100%"><figcaption><b>Heute auf dem Desktop · voll (1180 px)</b>Links Tageskarte mit Kundensummen und Eintragszeilen, rechts drei Habit-Kacheln in einer Reihe. Bei mehr Habits umbrechen die Kacheln zu je drei pro Zeile.</figcaption><div class="desk"><div class="scr">
<div class="bar" style="padding:0 40px"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><nav><span class="on">Heute</span><span>Arbeit</span><span>Habits</span></nav><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div>
<div class="content">
<div class="head"><div class="eyebrow">Freitag, 12. September 2026</div><h2 class="title">Heute</h2></div>
<div class="cols"><div>
<div class="card"><div class="hero c"><div><h3>Arbeit heute</h3><div class="big" style="margin-top:4px">7<small>h</small></div></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="bycust"><span>Hostsharing<b>4 h</b></span><span>Acme<b>2 h</b></span><span>Allgemein<b>1 h</b></span></div>
<div class="kpis c"><div class="kpi"><div class="l">Diese Woche</div><div class="v">23 h</div><div class="track"><i style="--p:74%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">71 h</div><div class="track"><i style="--p:46%"></i></div></div></div>
</div>
<div class="secline"><h3>Heutige Einträge</h3><a>Alle Tage</a></div>
<div class="list" style="margin-top:0">
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkator</span></b><small>Pipeline-Review, Rollback mit echter H2 getestet</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">3<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Hostsharing <span>· Werkdock</span></b><small>Bookworm-Rootfs aktualisiert</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Acme GmbH <span>· Relaunch</span></b><small>Abstimmung Navigation, Ticket #212</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="crow"><div class="m"><b>Allgemein <span>· Allgemein</span></b><small>Buchhaltung</small></div><div class="ms"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1<small> h</small></span><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><span class="go"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
</div>
</div><div>
<div class="secline" style="margin-top:0"><h3>Habits</h3><a>Kalender</a></div>
<div class="tiles">
<div class="tile done"><span class="nm">Lesen</span><span class="cnt">1</span><span class="st ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg> Ziel · Wo 4/5</span><div class="vs"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="rb m"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span></div></div>
<div class="tile"><span class="nm">Spaziergänge</span><span class="cnt">0</span><span class="st warn"><i></i>noch 1 · Wo 3/5</span><div class="vs"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="rb m"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span></div></div>
<div class="tile"><span class="nm">Kaffee</span><span class="cnt">2</span><span class="st"><i></i>max 3 · noch 1</span><div class="vs"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span><span class="rb m"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span></div></div>
</div>
</div></div>
<div style="margin-top:40px;padding-top:16px;border-top:1px solid var(--wj-line);font-size:13px;color:var(--wj-muted);display:flex;justify-content:space-between"><span>Werkjournal 0.1.98</span><span>Impressum · Datenschutz · Werkator</span></div>
</div></div></div></figure></div>
<h2 class="sec">Erste Fassung (weniger Daten, luftiger) · 390 × 812</h2><div class="row"><figure class="fig"><figcaption><b>Heute (Home)</b>Helle Hero-Karte statt dunkler Petrol-Fläche. Einträge ohne Klappe, Habits als kompakte Zeilenkarten mit rundem Stepper. Bottom-Nav mit Labels.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Freitag, 12. September 2026</div><h2 class="title">Heute</h2></div>
<div class="card"><div class="ct"><h3>Arbeit heute</h3></div>
<div class="hero"><div class="big">6<small>h</small></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="kpis"><div class="kpi"><div class="l">Diese Woche</div><div class="v">18 h</div><div class="track"><i style="--p:62%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">64 h</div><div class="track"><i style="--p:41%"></i></div></div></div>
</div>
<div class="list">
<div class="entry"><div class="m"><b>Hostsharing</b><span>Werkator · Pipeline-Review und Rollback-Test</span></div><span class="h">4 h</span></div>
<div class="entry"><div class="m"><b>Allgemein</b><span>Allgemein · Buchhaltung</span></div><span class="h">2 h</span></div>
</div>
<div class="secline"><h3>Habits</h3><a>Kalender</a></div>
<div class="habit"><div class="m"><b>Lesen</b><span class="ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg> Tagesziel erreicht · Woche 4 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
<div class="habit"><div class="m"><b>Spaziergänge</b><span class="warn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg> Noch 1 bis zum Tagesziel · Woche 3 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">0</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
<div class="habit"><div class="m"><b>Kaffee</b><span>Max. 3 pro Tag · noch 1</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
</div><div class="tabs"><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Arbeit (Tagesansicht)</b>Datum ist der Titel, Tagesnavigation als Pills, Kalender-Icon öffnet den bestehenden DatePicker. „Freier Tag“ als Schalter in der Tageskarte. Eintragskarten mit Stepper links, leisen Aktionen rechts.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
<div class="daynav"><span class="chip"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
<div class="card"><div class="ct"><h3>Tag</h3><span class="ib" style="width:36px;height:36px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></span></div>
<div class="hero"><div class="big">6<small>h</small></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="toggle"><span>Freier Tag <small style="color:var(--wj-muted)">· keine Erinnerung</small></span><span class="sw"></span></div>
</div>
<div class="secline"><h3>Einträge</h3></div>
<div class="card we sel"><div class="top"><b>Hostsharing <span>· Werkator</span></b><span class="h">4 h</span></div><p>Pipeline-Review, Rollback mit echter H2-Datenbank getestet und dokumentiert.</p>
<div class="foot"><div class="step"><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">4</span><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
<div class="card we"><div class="top"><b>Allgemein <span>· Allgemein</span></b><span class="h">2 h</span></div><p>Buchhaltung</p>
<div class="foot"><div class="step"><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2</span><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
</div><div class="tabs"><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Erfassen als Bottom-Sheet</b>Unter 600 px öffnet das bestehende Formular als Sheet von unten. Stunden als Pills 1–8 plus „mehr“, das Zahlenfeld bleibt das Datenfeld. Entwurfs-Hinweis in Amber oberhalb der Felder, Aktionen fest am unteren Rand.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
<div class="daynav"><span class="chip"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
<div class="card"><div class="ct"><h3>Tag</h3><span class="ib" style="width:36px;height:36px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></span></div>
<div class="hero"><div class="big">6<small>h</small></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="toggle"><span>Freier Tag <small style="color:var(--wj-muted)">· keine Erinnerung</small></span><span class="sw"></span></div>
</div>
<div class="secline"><h3>Einträge</h3></div>
<div class="card we sel"><div class="top"><b>Hostsharing <span>· Werkator</span></b><span class="h">4 h</span></div><p>Pipeline-Review, Rollback mit echter H2-Datenbank getestet und dokumentiert.</p>
<div class="foot"><div class="step"><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">4</span><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
<div class="card we"><div class="top"><b>Allgemein <span>· Allgemein</span></b><span class="h">2 h</span></div><p>Buchhaltung</p>
<div class="foot"><div class="step"><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2</span><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
</div>
<div class="dim"></div>
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Erfassen</h3><span class="ib" title="Schließen, Entwurf behalten"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div>
<div class="sb">
<div class="note a"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg><div><b>Entwurf von gestern gefunden</b>Hostsharing · Werkator · 3 h<span class="x">Entwurf wiederherstellen</span></div></div>
<div class="field"><label>Datum</label><div class="in">Fr, 12. September 2026 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></div></div>
<div class="field"><label>Kunde</label><div class="in">Hostsharing <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></div></div>
<div class="field"><label>Projekt</label><div class="in">Werkator <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></div></div>
<div class="field"><label>Stunden</label><div class="hours"><span class="c">1</span><span class="c">2</span><span class="c">3</span><span class="c on">4</span><span class="c">5</span><span class="c">6</span><span class="c">7</span><span class="c">8</span><span class="c more">mehr…</span></div></div>
<div class="field"><label>Beschreibung <span style="font-weight:500;color:var(--wj-muted)">· optional</span></label><div class="in ta focus">Pipeline-Review, Rollback getestet</div></div>
</div>
<div class="sf"><span class="btn sq"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg>Speichern</span><span class="btn sq g">Verwerfen</span></div></div>
</div></div></figure></div>
<h2 class="sec">Habits-Kalender und Navigation</h2><div class="row"><figure class="fig"><figcaption><b>Habits (Kalender)</b>Habit-Wahl als Pill-Leiste, Monatskopf mit Kennzahlen (Monat, Woche, Serie). Zellen zeigen Tag klein und Zählwert groß; Hintergrund kodiert Zielstatus, Zukunft bleibt leer. Tippen auf einen Tag öffnet den Zähler als Sheet.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Habits</div><h2 class="title">Kalender</h2></div>
<div class="pills"><span class="chip on">Lesen</span><span class="chip">Spaziergänge</span><span class="chip">Kaffee</span><span class="chip"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg> Neu</span></div>
<div class="card" style="margin-top:14px">
<div class="mh"><span class="ib" style="width:36px;height:36px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg></span><b>September 2026</b><span class="ib" style="width:36px;height:36px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span></div>
<div class="mk"><div>Diesen Monat<b>13</b></div><div>Diese Woche<b>4 / 5</b></div><div>Serie<b>4 Tage</b></div></div>
<div class="cal"><div class="wd">Mo</div><div class="wd">Di</div><div class="wd">Mi</div><div class="wd">Do</div><div class="wd">Fr</div><div class="wd">Sa</div><div class="wd">So</div><div class="wd">Σ</div><div class="d adj" data-n="31">0</div><div class="d ok" data-n="1">1</div><div class="d ok" data-n="2">2</div><div class="d lo" data-n="3">0</div><div class="d ok" data-n="4">1</div><div class="d ok" data-n="5">1</div><div class="d lo" data-n="6">0</div><div class="w">5</div><div class="d ok" data-n="7">1</div><div class="d ok" data-n="8">1</div><div class="d hi" data-n="9">3</div><div class="d ok" data-n="10">1</div><div class="d ok" data-n="11">1</div><div class="d ok today" data-n="12">1</div><div class="d fut" data-n="13"></div><div class="w">8</div><div class="d fut" data-n="14"></div><div class="d fut" data-n="15"></div><div class="d fut" data-n="16"></div><div class="d fut" data-n="17"></div><div class="d fut" data-n="18"></div><div class="d fut" data-n="19"></div><div class="d fut" data-n="20"></div><div class="w"></div><div class="d fut" data-n="21"></div><div class="d fut" data-n="22"></div><div class="d fut" data-n="23"></div><div class="d fut" data-n="24"></div><div class="d fut" data-n="25"></div><div class="d fut" data-n="26"></div><div class="d fut" data-n="27"></div><div class="w"></div><div class="d fut" data-n="28"></div><div class="d fut" data-n="29"></div><div class="d fut" data-n="30"></div><div class="d adj fut" data-n="1"></div><div class="d adj fut" data-n="2"></div><div class="d adj fut" data-n="3"></div><div class="d adj fut" data-n="4"></div><div class="w"></div></div>
<div style="display:flex;gap:12px;margin-top:12px;font-size:12px;color:var(--wj-muted);flex-wrap:wrap"><span><i style="display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--wj-accent-soft);vertical-align:-1px"></i> im Ziel</span><span><i style="display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--wj-clay-soft);vertical-align:-1px"></i> unter Minimum</span><span><i style="display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--wj-amber-soft);vertical-align:-1px"></i> über Maximum</span></div>
</div>
<div style="display:flex;gap:6px;justify-content:flex-end;margin-top:10px"><span class="chip"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1"/></svg> Bearbeiten</span><span class="chip"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg> Löschen</span></div>
</div><div class="tabs"><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg></i>Heute</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg></i>Arbeit</div><div class="tab on"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg></i>Habits</div><div class="tab"><i><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></i>Mehr</div></div><div class="home"></div></div></div></figure><figure class="fig"><figcaption><b>Menü („Mehr“)</b>Drawer von rechts mit allen Zielen als 48-px-Zeilen mit Icon; aktiver Eintrag in accent-soft. Gast-Hinweis wandert in den Drawer-Kopf. Version und Links im Fuß.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div><div class="bar"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div><div class="content">
<div class="head"><div class="eyebrow">Arbeit</div><h2 class="title">Freitag, 12. September</h2>
<div class="daynav"><span class="chip"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 5-7 7 7 7"/></svg> Vortag</span><span class="chip on">Heute</span><span class="chip dis">Folgetag <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 5 7 7-7 7"/></svg></span><span class="sp" style="flex:1"></span><span class="ib"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span></div></div>
<div class="card"><div class="ct"><h3>Tag</h3><span class="ib" style="width:36px;height:36px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg></span></div>
<div class="hero"><div class="big">6<small>h</small></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="toggle"><span>Freier Tag <small style="color:var(--wj-muted)">· keine Erinnerung</small></span><span class="sw"></span></div>
</div>
<div class="secline"><h3>Einträge</h3></div>
<div class="card we sel"><div class="top"><b>Hostsharing <span>· Werkator</span></b><span class="h">4 h</span></div><p>Pipeline-Review, Rollback mit echter H2-Datenbank getestet und dokumentiert.</p>
<div class="foot"><div class="step"><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">4</span><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
<div class="card we"><div class="top"><b>Allgemein <span>· Allgemein</span></b><span class="h">2 h</span></div><p>Buchhaltung</p>
<div class="foot"><div class="step"><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2</span><span class="rb s"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div><div class="acts"><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/><path d="m12 8 4 4"/></svg></span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></span></div></div></div>
</div>
<div class="dim"></div>
<div class="sheet" style="max-height:100%;border-radius:0;left:auto;width:300px;top:0;box-shadow:var(--wj-shadow)">
<div class="drawer-head"><div style="display:flex;align-items:center;justify-content:space-between"><span class="brand" style="display:flex;align-items:center;gap:9px;font-weight:600"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg> werkjournal</span><span class="ib"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div><div style="margin-top:10px"><span class="pill n">Gast · Einträge für alle Gäste sichtbar</span></div></div>
<div class="sb" style="gap:4px;padding:10px 12px">
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></svg><b style="font-weight:500">Heute</b></div></div>
<div class="entry" style="border:0;min-height:48px;padding:0 12px;background:var(--wj-accent-soft);border-radius:10px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-accent)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></svg><b>Arbeit</b></div></div>
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg><b style="font-weight:500">Berichte</b></div></div>
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg><b style="font-weight:500">Habits</b></div></div>
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a1 1 0 0 1 1-1h10"/></svg><b style="font-weight:500">Kunden &amp; Projekte</b></div></div>
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1"/></svg><b style="font-weight:500">Einstellungen</b></div></div>
<div class="entry" style="border:0;min-height:48px;padding:0 12px"><div class="m" style="display:flex;gap:12px;align-items:center;color:var(--wj-text-2)"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="14" r="4"/><path d="m11 11 9-9M16 6l2 2M13 9l2 2"/></svg><b style="font-weight:500">Konten</b></div></div>
</div>
<div style="margin-top:auto;padding:16px;font-size:12px;color:var(--wj-muted);border-top:1px solid var(--wj-line)">Werkjournal 0.1.98 · Impressum · Datenschutz</div>
</div>
</div></div></figure></div>
<h2 class="sec">Desktop · erste Fassung</h2><div class="row"><figure class="fig" style="width:100%"><figcaption><b>Heute auf dem Desktop (1180 px)</b>Zwei Spalten wie bisher, Quick-Nav in der Leiste, gleiche Bausteine wie mobil. Keine dunkle Fläche, Zahlen tragen den Akzent.</figcaption><div class="desk"><div class="scr">
<div class="bar" style="padding:0 40px"><span class="brand"><span class="logo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4l10-10-4-4L4 16z"/></svg></span>werkjournal</span><span class="sp"></span><nav><span class="on">Heute</span><span>Arbeit</span><span>Habits</span></nav><span class="pill n" style="margin-left:24px">Gast</span><span class="ib"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></span></div>
<div class="content">
<div class="head"><div class="eyebrow">Freitag, 12. September 2026</div><h2 class="title">Heute</h2></div>
<div class="cols"><div>
<div class="card"><div class="ct"><h3>Arbeit heute</h3></div>
<div class="hero"><div class="big">6<small>h</small></div><span class="btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>Erfassen</span></div>
<div class="kpis"><div class="kpi"><div class="l">Diese Woche</div><div class="v">18 h</div><div class="track"><i style="--p:62%"></i></div></div><div class="kpi"><div class="l">September</div><div class="v">64 h</div><div class="track"><i style="--p:41%"></i></div></div></div>
</div>
<div class="secline"><h3>Heutige Einträge</h3><a>Alle Tage</a></div>
<div class="entry"><div class="m"><b>Hostsharing</b><span>Werkator · Pipeline-Review und Rollback-Test</span></div><span class="h">4 h</span></div>
<div class="entry"><div class="m"><b>Allgemein</b><span>Allgemein · Buchhaltung</span></div><span class="h">2 h</span></div>
</div><div>
<div class="secline" style="margin-top:0"><h3>Habits</h3><a>Kalender</a></div>
<div class="habit"><div class="m"><b>Lesen</b><span class="ok"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 4 4 10-10"/></svg> Tagesziel erreicht · Woche 4 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">1</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
<div class="habit"><div class="m"><b>Spaziergänge</b><span class="warn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 3 2 21h20zM12 10v5M12 18v.5"/></svg> Noch 1 bis zum Tagesziel · Woche 3 / 5</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">0</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
<div class="habit"><div class="m"><b>Kaffee</b><span>Max. 3 pro Tag · noch 1</span></div><div class="step"><span class="rb"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M5 12h14"/></svg></span><span class="n">2</span><span class="rb p"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></span></div></div>
</div></div>
<div style="margin-top:40px;padding-top:16px;border-top:1px solid var(--wj-line);font-size:13px;color:var(--wj-muted);display:flex;justify-content:space-between"><span>Werkjournal 0.1.98</span><span>Impressum · Datenschutz · Werkator</span></div>
</div></div></div></figure></div>
</div>
<script>(()=>{const r=document.documentElement,b=document.getElementById('theme'),l=document.getElementById('theme-label');const m=['system','light','dark'];let i=0;const names={system:'Auto',light:'Hell',dark:'Dunkel'};const apply=()=>{const v=m[i];if(v==='system')r.removeAttribute('data-theme');else r.setAttribute('data-theme',v);l.textContent=names[v];};b.addEventListener('click',()=>{i=(i+1)%3;apply();});apply();})();</script>
</body>
</html>