Files
mhoennigandClaude Fable 5.1 baa4fa4351 Plan UI refresh and auth flow refresh with mockups (0.1.98)
Add two German specifications under docs/plans for a later goal run:
ui-refresh.md (Werkator tokens, mobile shell, Today, Work, Habits) and
auth-flow-refresh.md (guided invitation and email-code sign-in). Both
reference standalone HTML mockups under docs/plans/mockups. Register the
work packages as open werkbaum nodes and point the README to docs/plans.

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

329 lines
50 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 Anmelde-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}}
</style>
</head>
<body>
<div class="doc">
<div class="doc-head"><div><h1>Werkjournal Anmelde-Entwürfe</h1><p>Entwürfe zur Spezifikation docs/plans/auth-flow-refresh.md: Einladung durch den Admin, Einladung annehmen, Wiederanmeldung per Code, Einrichtung. Adressen und Codes 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">Anmeldung · 390 × 812</h2><div class="row"><figure class="fig"><figcaption><b>Anmelden (Standard)</b>Ein Feld, ein Button. Kein Auswahlfeld, kein Passwortfeld. Gast und Einrichtung sind sichtbar, aber nachrangig.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
<div class="auth"><div 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</div>
<div><h1>Anmelden</h1><p style="margin-top:8px">Wir schicken dir einen Einmalcode per E-Mail. Kein Passwort nötig.</p></div>
<div class="field"><label>E-Mail-Adresse</label><div class="in focus">mi@example.org</div></div>
<span class="btn sq full">Code senden</span>
<span class="lnk">Ich habe schon einen Code</span>
<div style="border-top:1px solid var(--wj-line);padding-top:16px;display:grid;gap:8px"><span class="btn sq q full"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>Als Gast ansehen</span><p style="font-size:12px;color:var(--wj-muted)">Gemeinsamer Gastbereich: Einträge sind für alle Gäste sichtbar.</p></div>
<div class="foot"><span>Kein Konto? Werkjournal ist privat; ein Administrator kann dich einladen.</span><span class="tiny"><span class="lnk" style="font-size:12px">Erste Einrichtung oder Wiederherstellung</span> · Impressum · Datenschutz</span></div>
</div></div></div></figure><figure class="fig"><figcaption><b>Einladung annehmen</b>Öffnen des Links aus der E-Mail. Die Einladung ist als eigene Ansicht erkennbar, die Adresse ist vorbelegt, ein Button. Token bleibt im Fragment und wird sofort aus der History entfernt.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
<div class="auth"><div 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</div>
<div><span class="pill"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Einladung erkannt</span><h1>Du bist eingeladen</h1><p style="margin-top:8px">Werkjournal ist eine private Zeit- und Habit-Erfassung. Um dein Konto anzulegen, bestätigen wir deine E-Mail-Adresse.</p></div>
<div class="addr"><span>max@example.org</span><small>Andere Adresse</small></div>
<span class="btn sq full">Code an diese Adresse senden</span>
<p style="font-size:13px;color:var(--wj-muted)">Die Einladung gilt sieben Tage und kann einmal verwendet werden. Gib den Link nicht weiter.</p>
<span class="lnk">Ich habe schon einen Code</span>
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
</div></div></div></figure><figure class="fig"><figcaption><b>Code eingeben</b>Adresse wird angezeigt, nicht erneut abgefragt. Ein Feld für den Code im Format XXXXX-XXXXX, Einfügen aus Zwischenablage möglich. „Erneut senden“ mit 60-s-Countdown, Serverlimits bleiben die Grenze.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
<div class="auth"><div 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</div>
<div><h1>Code eingeben</h1><p style="margin-top:8px">Wir haben einen Code an <b style="color:var(--wj-text)">max@example.org</b> geschickt. <span class="lnk">Adresse ändern</span></p></div>
<div class="field"><label>Einmalcode</label><div class="in code focus">7KM3P-<span style="color:var(--wj-ghost)">XXXXX</span></div><span class="hint">Der Code gilt zwei Stunden. Die E-Mail kann einige Minuten brauchen; auch im Spamordner nachsehen.</span></div>
<span class="btn sq full dis">Anmelden</span>
<span style="font-size:14px;color:var(--wj-muted)">Code erneut senden <span style="font-variant-numeric:tabular-nums">(0:42)</span></span>
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
</div></div></div></figure></div>
<h2 class="sec">Fehler und Sonderweg</h2><div class="row"><figure class="fig"><figcaption><b>Code abgelehnt</b>Gleiche Ansicht, Fehlerkarte oben mit Ursache und Handlung. Adresse bleibt, Feld ist geleert und fokussiert. Mit Einladungskontext erscheint der Zusatz zur Sieben-Tage-Frist unabhängig vom Prüfergebnis.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
<div class="auth"><div 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</div>
<div><h1>Code eingeben</h1><p style="margin-top:8px">Wir haben einen Code an <b style="color:var(--wj-text)">max@example.org</b> geschickt. <span class="lnk">Adresse ändern</span></p></div>
<div class="note e"><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>Der Code ist ungültig oder abgelaufen.</b>Prüfe die Schreibweise oder fordere einen neuen Code an. Falls deine Einladung älter als sieben Tage ist, bitte um eine neue.</div></div>
<div class="field"><label>Einmalcode</label><div class="in code focus ph">XXXXX-XXXXX</div></div>
<span class="btn sq full dis">Anmelden</span>
<span class="lnk">Code erneut senden</span>
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
</div></div></div></figure><figure class="fig"><figcaption><b>Einrichtung / Wiederherstellung</b>Eigener Einstieg über /login?setup. Nur hier gibt es das Code-Feld vom Server; der Normalweg bleibt frei davon.</figcaption><div class="phone"><div class="scr"><div class="status"><span>9:41</span><span>●●● ⌂</span></div>
<div class="auth"><div 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</div>
<div><span class="lnk"><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> Zur Anmeldung</span><h1 style="margin-top:14px">Einrichtung</h1><p style="margin-top:8px">Für den ersten Administrator oder eine Wiederherstellung. Du brauchst den Einrichtungscode vom Server.</p></div>
<div class="field"><label>E-Mail-Adresse</label><div class="in">mi@example.org</div></div>
<div class="field"><label>Einrichtungscode</label><div class="in">••••••••••••••••••••••••</div></div>
<span class="btn sq full">Code senden</span>
<div class="foot"><span class="tiny">Impressum · Datenschutz</span></div>
</div></div></div></figure><figure class="fig"><figcaption><b>Erster Login: Willkommenskarte</b>Nach der ersten Anmeldung eines neuen Kontos zeigt Heute einmalig eine schließbare Karte mit den zwei sinnvollen nächsten Schritten.</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="border-color:var(--wj-accent);margin-bottom:12px"><div class="ct"><h3>Willkommen bei Werkjournal</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.2" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></div><p style="margin:6px 0 12px;color:var(--wj-text-2);font-size:14px">Dein Konto ist angelegt. Lege deine Kunden und Projekte an oder erfasse gleich deinen ersten Tag.</p><div style="display:flex;gap:8px;flex-wrap:wrap"><span class="btn" style="min-height:40px">Kunden &amp; Projekte</span><span class="btn q" style="min-height:40px">Ersten Tag erfassen</span></div></div>
<div class="card"><div class="ct"><h3>Arbeit heute</h3></div><div class="hero"><div class="big">0<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">0 h</div><div class="track"></div></div><div class="kpi"><div class="l">September</div><div class="v">0 h</div><div class="track"></div></div></div></div>
<div class="list"><div class="entry"><div class="m"><span>Noch nichts erfasst</span></div><span class="lnk" style="color:var(--wj-accent);font-weight:600;font-size:13px">Jetzt erfassen</span></div></div>
<div class="secline"><h3>Habits</h3><a>Kalender</a></div>
<div class="habit"><div class="m"><b>Lesen</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 0 / 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><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></div>
<h2 class="sec">Admin: Einladen</h2><div class="row"><figure class="fig"><figcaption><b>Admin: Konten und Einladungen</b>Zwei Listen. Zustand und Sprache als Pills, Zeitpunkte lokal formatiert. Offene Einladungen: Neu einladen (Brief) und Widerrufen (×). Altbestand ohne Adresse bleibt lesbar.</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">Verwaltung</div><h2 class="title">Konten</h2></div>
<div class="card">
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
</div>
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><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>Einladen</span></div>
<div class="card">
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></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>
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</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"><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>Einladen · Schritt 1</b>Adresse und Sprache, eine Primäraktion. Erstellen und Versenden sind ein Klick; der Link ist kein sichtbarer Zwischenschritt mehr.</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">Verwaltung</div><h2 class="title">Konten</h2></div>
<div class="card">
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
</div>
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><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>Einladen</span></div>
<div class="card">
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></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>
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
</div>
</div>
<div class="dim"></div>
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Einladen</h3><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 class="steps"><i class="on">1</i>Empfänger<s></s><i>2</i>Versand</div>
<div class="sb" style="margin-top:12px">
<div class="field"><label>Wen möchtest du einladen?</label><div class="in focus">max@example.org</div></div>
<div class="field"><label>Sprache der E-Mails</label><div class="seg"><span class="chip on">Deutsch</span><span class="chip">English</span></div></div>
<p style="margin:0;font-size:13px;color:var(--wj-muted)">Die Einladung gilt sieben Tage und kann einmal verwendet werden. Die E-Mail geht sofort raus.</p>
</div>
<div class="sf"><span class="btn sq"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>Einladung senden</span><span class="btn sq g" style="flex:0 0 auto">Abbrechen</span></div></div></div></div></figure><figure class="fig"><figcaption><b>Einladen · Schritt 2 (Erfolg)</b>Bestätigung mit Empfänger. Link nur auf Wunsch aufklappbar, Kopieren als Nebenaktion. „Fertig“ schließt, Liste ist aktualisiert.</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">Verwaltung</div><h2 class="title">Konten</h2></div>
<div class="card">
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
</div>
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><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>Einladen</span></div>
<div class="card">
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></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>
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
</div>
</div>
<div class="dim"></div>
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Einladen</h3><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 class="steps"><i><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></i>Empfänger<s></s><i class="on">2</i>Versand</div>
<div class="sb" style="margin-top:12px">
<div style="display:flex;gap:14px;align-items:center"><span class="okmark"><svg width="28" height="28" 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></span><div><b style="font-size:17px">Einladung unterwegs</b><p style="margin:2px 0 0;color:var(--wj-text-2);font-size:14px">Die E-Mail an max@example.org wurde zum Versand übergeben. Die Zustellung kann einige Minuten dauern.</p></div></div>
<details class="lk"><summary>Link anzeigen</summary><div class="in ro">https://werkjournal.javagil.de/login#invitation=Qm9…&amp;email=max%40example.org</div><span class="chip" style="margin-top:8px"><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> Kopieren</span></details>
</div>
<div class="sf"><span class="btn sq">Fertig</span></div></div></div></div></figure><figure class="fig"><figcaption><b>Einladen · Schritt 2 (Fehlzweig)</b>Wenn sendmail die Übergabe ablehnt: Amber-Hinweis, Link aufgeklappt, „Erneut senden“ als Primäraktion. Dieselbe Einladung bleibt gültig.</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">Verwaltung</div><h2 class="title">Konten</h2></div>
<div class="card">
<div class="acct"><div class="m"><b>mi@example.org</b><span><span class="pill">Admin</span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span>Aktiv</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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
<div class="acct"><div class="m"><b>tom@example.org</b><span><span class="pill c">Gesperrt</span></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"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span></div></div>
</div>
<div class="secline"><h3>Einladungen</h3><span class="btn" style="min-height:40px;padding:0 14px"><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>Einladen</span></div>
<div class="card">
<div class="acct"><div class="m"><b>max@example.org</b><span><span class="pill">Offen</span><span class="pill n">Deutsch</span>bis 19.09., 10:12</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></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>
<div class="acct"><div class="m"><b>lea@example.org</b><span><span class="pill c">Abgelaufen</span><span class="pill n">English</span>erstellt 01.09.</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"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span></div></div>
<div class="acct"><div class="m"><b>anna@example.org</b><span><span class="pill n">Verwendet</span><span class="pill n">Deutsch</span>08.09.</span></div></div>
<div class="acct"><div class="m"><b style="color:var(--wj-muted)">ohne Adresse</b><span><span class="pill n">Verwendet</span>21.08.</span></div></div>
</div>
</div>
<div class="dim"></div>
<div class="sheet"><div class="grip"></div><div class="sh"><h3>Einladen</h3><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 class="steps"><i><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></i>Empfänger<s></s><i class="on">2</i>Versand</div>
<div class="sb" style="margin-top:12px">
<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>Versand nicht möglich</b>Die Einladung wurde erstellt, aber die E-Mail konnte nicht übergeben werden. Sende sie erneut oder gib den Link selbst weiter.</div></div>
<details class="lk" open><summary>Link</summary><div class="in ro">https://werkjournal.javagil.de/login#invitation=Qm9…&amp;email=max%40example.org</div><span class="chip" style="margin-top:8px"><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> Kopieren</span></details>
</div>
<div class="sf"><span class="btn sq"><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>Erneut senden</span><span class="btn sq g" style="flex:0 0 auto">Schließen</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>