<!DOCTYPE html>
<!--
  WorkIQ · Arbeits-Cockpit — HTML-Vorlage v1.0
  Befüllung: Ein KI-Agent ersetzt AUSSCHLIESSLICH den JSON-Inhalt des einen aktiven
  JSON-Datenblocks am Ende der Datei (Script-Tag mit der Kennung "workiq-data").
  Nur dieser eine echte Script-Block darf ersetzt werden – niemals Kommentartext.
  Layout, Styles und Logik bleiben unverändert. Leere Listen werden in der Vorlage als
  animierte Platzhalter dargestellt, in einer befüllten Datei als "Keine Einträge".
  Schema und Ablauf: siehe SKILL.md (workiq-dashboard).
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>WorkIQ · Arbeits-Cockpit</title>
<style>
:root{
  --bg:#f5f5f7;--card:#ffffff;--nav:rgba(251,251,253,.78);--text:#1d1d1f;--text2:#6e6e73;--text3:#a1a1a6;
  --line:rgba(0,0,0,.08);--chip:#f0f0f3;--hover:rgba(0,0,0,.035);--seg:rgba(118,118,128,.12);
  --blue:#0071e3;--red:#ff3b30;--orange:#ff9500;--green:#34c759;--purple:#af52de;--teal:#30b0c7;--indigo:#5856d6;--pink:#ff375f;--gray:#8e8e93;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --shadow-lg:0 2px 6px rgba(0,0,0,.06),0 18px 44px rgba(0,0,0,.10);
  --radius:22px;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.25,.4,1);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#000;--card:#1c1c1e;--nav:rgba(22,22,23,.78);--text:#f5f5f7;--text2:#a1a1a6;--text3:#6e6e73;
  --line:rgba(255,255,255,.09);--chip:#2c2c2e;--hover:rgba(255,255,255,.05);--seg:rgba(118,118,128,.24);
  --blue:#0a84ff;--red:#ff453a;--orange:#ff9f0a;--green:#30d158;--purple:#bf5af2;--teal:#40c8e0;--indigo:#5e5ce6;--pink:#ff375f;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.35);--shadow-lg:0 2px 6px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.55);}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.47;letter-spacing:-.011em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;height:52px;background:var(--nav);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1160px;margin:0 auto;height:100%;display:flex;align-items:center;gap:28px;padding:0 24px}
.brand{font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand-dot{width:18px;height:18px;border-radius:6px;background:conic-gradient(from 0deg,#0071e3,#af52de,#ff375f,#ff9f0a,#34c759,#0071e3);animation:spin 10s linear infinite;box-shadow:0 0 12px rgba(175,82,222,.35)}
.nav-links{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{font-size:12px;color:var(--text2);white-space:nowrap;transition:color .25s;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--text);transform:scaleX(0);transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active::after{transform:scaleX(1)}
.nav-time{font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:76px 24px 8px;max-width:900px;margin:0 auto}
.eyebrow{font-size:14px;color:var(--text2);font-weight:500;animation:fadeUp .8s var(--ease) both}
.hero h1{font-size:clamp(40px,6.4vw,68px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:12px 0 10px;animation:fadeUp .9s .08s var(--ease) both}
.hero h1 .name{background:linear-gradient(90deg,var(--blue),var(--purple) 45%,var(--pink) 75%,var(--orange));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s ease-in-out infinite alternate}
.date{font-size:22px;color:var(--text2);animation:fadeUp .9s .16s var(--ease) both}
.stand{font-size:12px;color:var(--text3);margin-top:8px;animation:fadeUp .9s .22s var(--ease) both}
.daybar{max-width:420px;margin:26px auto 0;animation:fadeUp .9s .28s var(--ease) both}
.daybar-track{height:6px;border-radius:6px;background:var(--seg);overflow:hidden}
.daybar-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--purple));transition:width 1.6s var(--ease)}
.daybar-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:6px;font-variant-numeric:tabular-nums}
.seg-wrap{margin-top:26px;animation:fadeUp .9s .34s var(--ease) both}
.seg{display:inline-flex;align-items:center;position:relative;background:var(--seg);border-radius:11px;padding:3px}
.seg-label{font-size:12px;color:var(--text2);padding:0 10px 0 8px}
.seg button{position:relative;z-index:1;border:0;background:none;font-size:13px;font-weight:500;padding:6px 16px;border-radius:8px;cursor:pointer;transition:color .25s}
.seg .pill{position:absolute;top:3px;bottom:3px;left:0;width:0;background:var(--card);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.14),0 3px 8px rgba(0,0,0,.06);transition:left .45s var(--spring),width .45s var(--spring)}

/* ---------- Layout ---------- */
main{max-width:1160px;margin:0 auto;padding:0 24px 40px}
section{padding-top:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.sec-head p{color:var(--text2);font-size:17px;margin-top:4px}
.count{font-size:13px;color:var(--text2);background:var(--card);box-shadow:var(--shadow);padding:5px 12px;border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid2>section{padding-top:64px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kpi{padding:24px 24px 22px;cursor:pointer;position:relative;overflow:hidden;border:0;text-align:start;transition:transform .45s var(--spring),box-shadow .45s var(--ease)}
.kpi:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.kpi:active{transform:scale(.98)}
.kpi::before{content:"";position:absolute;inset:auto -40% -60% auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--glow,rgba(0,113,227,.12)),transparent 70%);opacity:0;transition:opacity .5s}
.kpi:hover::before{opacity:1}
.kpi .num{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.kpi.critical .num{color:var(--red)}
.kpi.warn .num{color:var(--orange)}
.kpi.ok .num{color:var(--green)}
.kpi .lbl{font-size:15px;font-weight:600;margin-top:16px}
.kpi .sub{font-size:12px;color:var(--text2);margin-top:4px;min-height:18px}
.kpi .ico{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center}
.kpi .ico svg{width:18px;height:18px}
.kpi .arrow{position:absolute;right:22px;bottom:20px;font-size:15px;color:var(--text3);opacity:0;transform:translateX(-6px);transition:all .35s var(--ease)}
.kpi:hover .arrow{opacity:1;transform:none}
.note{margin-top:16px;padding:20px 24px;display:flex;gap:14px;align-items:flex-start;font-size:15px}
.note .ic{flex:none}

/* ---------- Tints ---------- */
.t-blue{color:var(--blue);background:rgba(0,113,227,.11)}
.t-red{color:var(--red);background:rgba(255,59,48,.11)}
.t-orange{color:var(--orange);background:rgba(255,149,0,.13)}
.t-green{color:var(--green);background:rgba(52,199,89,.13)}
.t-purple{color:var(--purple);background:rgba(175,82,222,.12)}
.t-teal{color:var(--teal);background:rgba(48,176,199,.13)}
.t-indigo{color:var(--indigo);background:rgba(88,86,214,.12)}
.t-gray{color:var(--gray);background:rgba(142,142,147,.14)}

/* ---------- Lists ---------- */
.list{padding:8px}
.row{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:15px;position:relative;transition:background .25s}
.row:hover{background:var(--hover)}
.row+.row::before{content:"";position:absolute;top:0;left:64px;right:16px;height:1px;background:var(--line)}
.row:hover::before,.row:hover+.row::before{opacity:0}
.row.hide{display:none}
.row.pop{animation:popIn .5s var(--ease) both}
.row .ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
.row .ic svg{width:18px;height:18px}
.row .body{flex:1;min-width:0}
.row .t{font-size:15px;font-weight:600;line-height:1.32}
.row .t a:hover{color:var(--blue)}
.row .m{font-size:13px;color:var(--text2);margin-top:3px}
.row .x{font-size:13px;color:var(--text2);margin-top:6px;line-height:1.45}
.row .trail{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none;text-align:end}
.row .age{font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap}
.rank{flex:none;width:28px;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--text3);text-align:center;line-height:36px;font-variant-numeric:tabular-nums}
.prio-bar{position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.b-critical{color:var(--red);background:rgba(255,59,48,.12)}
.b-high{color:var(--orange);background:rgba(255,149,0,.14)}
.b-normal{color:var(--blue);background:rgba(0,113,227,.10)}
.b-low{color:var(--gray);background:rgba(142,142,147,.14)}
.act{font-size:13px;font-weight:500;color:var(--blue);white-space:nowrap}
.act:hover{text-decoration:underline}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--text2);background:var(--chip);padding:3px 9px;border-radius:999px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}

/* ---------- Mini-Icon: Element öffnen ---------- */
.open{flex:none;align-self:center;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:rgba(0,113,227,.10);transition:background .3s var(--ease),color .3s,transform .4s var(--spring),box-shadow .3s;cursor:pointer}
.open svg{width:15px;height:15px;transition:transform .35s var(--spring)}
.open:hover{background:var(--blue);color:#fff;transform:scale(1.14);box-shadow:0 4px 12px rgba(0,113,227,.35)}
.open:hover svg{transform:translate(1px,-1px)}
.open:active{transform:scale(.94)}
.open.off{opacity:.22;pointer-events:none;background:var(--chip);color:var(--text3)}
.open.sm{width:22px;height:22px;margin-inline-start:auto}
.open.sm svg{width:12px;height:12px}
.evopen{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:var(--card);opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s var(--spring)}
.evopen svg{width:10px;height:10px}
.ev:hover .evopen{opacity:1;transform:none}
.empty-done{padding:30px 22px;text-align:center;color:var(--text2);font-size:14px}
.empty-done b{display:block;font-size:15px;color:var(--text);margin-bottom:2px}

/* ---------- Qualitätsverifikation ---------- */
.qa{padding:26px 28px}
.qa-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.qa-pill{font-size:13px;font-weight:600;padding:5px 14px;border-radius:999px;color:var(--gray);background:rgba(142,142,147,.14);transition:all .5s var(--ease)}
.qa-pill.pass{color:var(--green);background:rgba(52,199,89,.14)}
.qa-pill.fail{color:var(--red);background:rgba(255,59,48,.12)}
.qa-bar{height:5px;border-radius:5px;background:var(--seg);overflow:hidden;margin:12px 0 18px}
.qa-bar i{display:block;height:100%;width:0;border-radius:5px;background:var(--green);transition:width 1.4s var(--ease)}
.qa-bar.fail i{background:var(--red)}
.qa-item{display:flex;gap:12px;align-items:flex-start;padding:9px 0;opacity:0;transform:translateX(-8px);animation:qaIn .5s var(--ease) forwards}
.qa-item+.qa-item{border-top:1px solid var(--line)}
.qa-dot{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;background:var(--gray)}
.qa-item.ok .qa-dot{background:var(--green);animation:pop .5s var(--spring)}
.qa-item.fail .qa-dot{background:var(--red)}
.qa-item.warn .qa-dot{background:var(--orange)}
.qa-item.pend .qa-dot{background:var(--text3)}
.qa-t{font-size:14px;font-weight:600}
.qa-d{font-size:12px;color:var(--text2);margin-top:1px}
.qa-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:var(--gray);background:rgba(142,142,147,.14);white-space:nowrap;transition:all .4s}
.qa-badge.pass{color:var(--green);background:rgba(52,199,89,.14)}
.qa-badge.fail{color:var(--red);background:rgba(255,59,48,.12)}
@keyframes qaIn{to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* ---------- Empty / Skeleton ---------- */
.empty{padding:22px 22px 26px}
.sk-row{display:flex;gap:14px;align-items:center;padding:10px 4px}
.sk{border-radius:7px;background:linear-gradient(90deg,var(--chip) 0%,var(--hover) 40%,var(--chip) 80%);background-size:250% 100%;animation:shimmer 1.8s ease-in-out infinite}
.sk-ic{width:36px;height:36px;border-radius:11px;flex:none}
.sk-l{height:11px}
.empty-cap{text-align:center;margin-top:14px}
.empty-cap b{display:block;font-size:14px;font-weight:600;color:var(--text2)}
.empty-cap span{display:block;font-size:12px;color:var(--text3);margin-top:3px;max-width:440px;margin-inline:auto}

/* ---------- Calendar ---------- */
.cal{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.cal-main{padding:18px 18px 12px}
.week{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding:2px}
.wd{flex:1;min-width:76px;border:0;background:var(--chip);border-radius:15px;padding:10px 8px 9px;cursor:pointer;text-align:center;position:relative;transition:background .35s var(--ease),color .35s,transform .35s var(--spring)}
.wd:hover{transform:translateY(-2px)}
.wd .d{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.wd .n{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.wd .l{font-size:11px;color:var(--text3)}
.wd .dots{display:flex;gap:3px;justify-content:center;margin-top:5px;height:5px}
.wd .dots i{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.85}
.wd.today .n{color:var(--red)}
.wd.sel{background:var(--text);color:var(--bg)}
.wd.sel .d,.wd.sel .l{color:var(--bg);opacity:.75}
.wd.sel .n{color:var(--bg)}
.wd.sel .dots i{background:var(--bg)}
.allday{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-height:0}
.allday .chip{animation:popIn .5s var(--ease) both}
.tl-wrap{height:540px;overflow-y:auto;position:relative;scroll-behavior:smooth;border-radius:12px;scrollbar-width:thin}
.tl{position:relative;margin-left:54px;margin-right:4px}
.hr{position:absolute;left:-54px;right:0;border-top:1px solid var(--line)}
.hr span{position:absolute;top:-8px;left:0;width:44px;text-align:right;font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums}
.hr.half{left:0;border-top-style:dashed;opacity:.5}
.ev{position:absolute;border-radius:10px;padding:5px 9px;font-size:12px;overflow:hidden;background:rgba(0,113,227,.13);border-left:3px solid var(--blue);transform-origin:top center;animation:evIn .6s var(--spring) both;transition:transform .25s var(--ease),box-shadow .25s,z-index 0s;line-height:1.3}
.ev:hover{transform:scale(1.025);box-shadow:var(--shadow-lg);z-index:9;background-color:var(--card)}
.ev .et{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .eti{color:var(--text2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.organizer{background:rgba(88,86,214,.13);border-left-color:var(--indigo)}
.ev.tentative{background:repeating-linear-gradient(135deg,rgba(0,113,227,.12) 0 6px,rgba(0,113,227,.04) 6px 12px)}
.ev.notResponded{background:rgba(255,149,0,.06);border:1.5px dashed var(--orange);border-left:3px solid var(--orange)}
.ev.declined{opacity:.42;background:var(--chip);border-left-color:var(--text3)}
.ev.declined .et{text-decoration:line-through}
.ev.private{background:var(--chip);border-left-color:var(--gray)}
.ev.focus{background:rgba(175,82,222,.13);border-left-color:var(--purple)}
.ev.free{background-color:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.ev.past{filter:saturate(.35);opacity:.6}
.ev.conflict::after{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
.now{position:absolute;left:-8px;right:0;height:2px;background:var(--red);z-index:10;transition:top 1s var(--ease);pointer-events:none}
.now::before{content:"";position:absolute;left:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--red);animation:pulse 2s infinite}
.now b{position:absolute;right:0;top:-20px;font-size:10px;font-weight:700;color:#fff;background:var(--red);padding:2px 6px;border-radius:6px;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--text2);padding:12px 4px 4px;border-top:1px solid var(--line);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.side{display:flex;flex-direction:column;gap:16px}
.side .card{padding:20px}
.side h3{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.next-t{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.next-m{font-size:13px;color:var(--text2);margin-top:4px}
.countdown{font-size:40px;font-weight:700;letter-spacing:-.04em;margin-top:12px;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.mini{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:13px}
.mini+.mini{border-top:1px solid var(--line)}
.mini .dot{margin-top:6px}
.mini b{font-weight:600;display:block}
.mini span{color:var(--text2);font-size:12px}
.muted{font-size:13px;color:var(--text3)}

/* ---------- Review ---------- */
.review{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rv{padding:22px;transition:transform .45s var(--spring),box-shadow .45s}
.rv:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rv-day{font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.rv-date{font-size:26px;font-weight:700;letter-spacing:-.03em}
.rv-stats{display:flex;gap:8px;margin:14px 0}
.rv-stat{flex:1;background:var(--chip);border-radius:12px;padding:8px 10px}
.rv-stat b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rv-stat span{font-size:11px;color:var(--text2)}
.rv p{font-size:14px;color:var(--text)}
.rv ul{list-style:none;margin-top:10px}
.rv li{font-size:13px;color:var(--text2);padding:5px 0 5px 16px;position:relative}
.rv li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* ---------- Files ---------- */
.ftype{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;letter-spacing:-.02em}
.f-docx{background:linear-gradient(160deg,#2b7cd3,#185abd)}
.f-xlsx{background:linear-gradient(160deg,#21a366,#107c41)}
.f-pptx{background:linear-gradient(160deg,#ed6c47,#c43e1c)}
.f-pdf{background:linear-gradient(160deg,#f05454,#c62828)}
.f-loop{background:linear-gradient(160deg,#a259ff,#6d28d9)}
.f-other{background:linear-gradient(160deg,#9ca3af,#6b7280)}

/* ---------- Tasks ---------- */
.tasks{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:start}
.ringcard{padding:26px;text-align:center}
.ring{width:170px;height:170px;margin:0 auto;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:14;stroke-linecap:round}
.ring .bg{stroke:var(--seg)}
.ring .fg{stroke:url(#ringGrad);transition:stroke-dashoffset 1.6s var(--ease)}
.ring .c{position:absolute;inset:0;display:grid;place-content:center}
.ring .c b{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1}
.ring .c span{font-size:12px;color:var(--text2);margin-top:4px}
.tstats{display:flex;justify-content:space-around;margin-top:20px}
.tstats div b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.tstats div span{font-size:11px;color:var(--text2)}
.chk{flex:none;width:24px;height:24px;margin:6px;border-radius:50%;border:1.6px solid var(--text3);background:none;cursor:pointer;display:grid;place-items:center;transition:all .35s var(--spring)}
.chk svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s .1s var(--ease)}
.row.done .chk{background:var(--green);border-color:var(--green);transform:scale(1.08)}
.row.done .chk svg{stroke-dashoffset:0}
.row.done .t{color:var(--text3);text-decoration:line-through}
.row .t{transition:color .3s}
.overdue{color:var(--red)!important;font-weight:600}

/* ---------- News ---------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nw{padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .45s var(--spring),box-shadow .45s}
.nw:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.nw .src{font-size:12px;color:var(--text2)}
.nw h4{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.nw p{font-size:14px;color:var(--text2)}
.nw .rel{margin-top:auto;font-size:12px;color:var(--text);background:var(--chip);border-radius:10px;padding:8px 10px}
.nw .rel b{color:var(--blue)}

/* ---------- Footer ---------- */
.cov{padding:20px 24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
footer{max-width:1160px;margin:0 auto;padding:28px 24px 60px;font-size:12px;color:var(--text3);text-align:center}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.st{animation:fadeUp .7s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes evIn{from{opacity:0;transform:scaleY(.2) translateY(-10px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.45)}70%{box-shadow:0 0 0 8px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
@keyframes sheen{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:980px){.cal,.tasks{grid-template-columns:1fr}.news,.review{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.kpis{grid-template-columns:1fr 1fr}.grid2,.news,.review{grid-template-columns:1fr}.kpi .num{font-size:42px}.nav-time{display:none}.sec-head h2{font-size:28px}}
@media print{.nav,.seg-wrap{display:none}.reveal{opacity:1;transform:none}body{background:#fff}.card{box-shadow:none;border:1px solid #ddd}.tl-wrap{height:auto;overflow:visible}}
</style>
</head>
<body>

<nav class="nav" aria-label="Bereiche">
  <div class="nav-inner">
    <a class="brand" href="#top"><span class="brand-dot"></span>WorkIQ</a>
    <div class="nav-links" id="navlinks">
      <a href="#lage">Kurzlage</a>
      <a href="#prio">Top-Prioritäten</a>
      <a href="#wartet">Wartet auf mich</a>
      <a href="#markiert">Markiert</a>
      <a href="#kalender">Kalender</a>
      <a href="#rueckblick">Rückblick</a>
      <a href="#teams">Teams</a>
      <a href="#dateien">Dateien</a>
      <a href="#aufgaben">Aufgaben</a>
      <a href="#news">IT-News</a>
      <a href="#abdeckung">Abdeckung</a>
    </div>
    <a class="qa-badge" id="qabadge" href="#qa" title="Qualitätsverifikation">QA …</a>
    <div class="nav-time" id="navtime"></div>
  </div>
</nav>

<header class="hero" id="top">
  <div class="eyebrow" id="eyebrow">WorkIQ · Arbeits-Cockpit</div>
  <h1 id="greeting">Guten Morgen.</h1>
  <div class="date" id="datelabel"></div>
  <div class="stand" id="stand"></div>
  <div class="daybar" aria-hidden="true">
    <div class="daybar-track"><div class="daybar-fill" id="dayfill"></div></div>
    <div class="daybar-lbl"><span id="daystart"></span><span id="daytext"></span><span id="dayend"></span></div>
  </div>
  <div class="seg-wrap">
    <div class="seg" id="seg" role="tablist" aria-label="Filter">
      <span class="seg-label">Anzeigen</span>
      <span class="pill" id="segpill"></span>
      <button type="button" data-mode="all" aria-selected="true">Alle</button>
      <button type="button" data-mode="high">Hoch +</button>
      <button type="button" data-mode="critical">Nur kritisch</button>
    </div>
  </div>
</header>

<main>
  <section id="lage">
    <div class="sec-head reveal"><div><h2>Kurzlagebild</h2><p>Das Wichtigste auf einen Blick.</p></div></div>
    <div class="kpis" id="kpis"></div>
    <div id="note"></div>
  </section>

  <section id="prio">
    <div class="sec-head reveal"><div><h2>Top-Prioritäten</h2><p>Darauf solltest du dich heute konzentrieren.</p></div><span class="count" id="c-prio"></span></div>
    <div class="card list reveal" id="l-prio"></div>
  </section>

  <div class="grid2">
    <section id="wartet">
      <div class="sec-head reveal"><div><h2>Wartet auf mich</h2><p>Jemand erwartet eine Antwort von dir.</p></div><span class="count" id="c-wartet"></span></div>
      <div class="card list reveal" id="l-wartet"></div>
    </section>
    <section id="markiert">
      <div class="sec-head reveal"><div><h2>Markiert</h2><p>Gekennzeichnet &amp; angeheftet.</p></div><span class="count" id="c-markiert"></span></div>
      <div class="card list reveal" id="l-markiert"></div>
    </section>
  </div>

  <section id="kalender">
    <div class="sec-head reveal"><div><h2>Kalender</h2><p>Dein Tag – live mit Jetzt-Linie, Konflikten und offenen Einladungen.</p></div><span class="count" id="c-kal"></span></div>
    <div class="cal reveal">
      <div class="card cal-main">
        <div class="week" id="week"></div>
        <div class="allday" id="allday"></div>
        <div class="tl-wrap" id="tlwrap"><div class="tl" id="tl"></div></div>
        <div class="legend">
          <span><i style="background:rgba(0,113,227,.25);border-left:3px solid var(--blue)"></i>Zugesagt</span>
          <span><i style="background:rgba(88,86,214,.25);border-left:3px solid var(--indigo)"></i>Organisiert</span>
          <span><i style="background:repeating-linear-gradient(135deg,rgba(0,113,227,.3) 0 3px,transparent 3px 6px)"></i>Vorläufig</span>
          <span><i style="border:1.5px dashed var(--orange)"></i>Unbeantwortet</span>
          <span><i style="background:rgba(175,82,222,.25);border-left:3px solid var(--purple)"></i>Fokus</span>
          <span><i style="background:var(--chip);border-left:3px solid var(--gray)"></i>Privat</span>
          <span><span class="dot" style="background:var(--red)"></span>Konflikt</span>
        </div>
      </div>
      <aside class="side">
        <div class="card" id="nextcard"></div>
        <div class="card"><h3>Offene Enden</h3><div id="loops"></div></div>
        <div class="card"><h3>Konflikte</h3><div id="conflicts"></div></div>
      </aside>
    </div>
  </section>

  <section id="rueckblick">
    <div class="sec-head reveal"><div><h2>Rückblick</h2><p>Die letzten drei Arbeitstage.</p></div></div>
    <div id="l-review"></div>
  </section>

  <div class="grid2">
    <section id="teams">
      <div class="sec-head reveal"><div><h2>Teams</h2><p>Erwähnungen, Chats &amp; Kanäle.</p></div><span class="count" id="c-teams"></span></div>
      <div class="card list reveal" id="l-teams"></div>
    </section>
    <section id="dateien">
      <div class="sec-head reveal"><div><h2>Dateien</h2><p>Von anderen geändert oder geteilt.</p></div><span class="count" id="c-dateien"></span></div>
      <div class="card list reveal" id="l-dateien"></div>
    </section>
  </div>

  <section id="aufgaben">
    <div class="sec-head reveal"><div><h2>Aufgaben</h2><p>Was bei dir liegt – aus To Do, Planner, Mails &amp; Meetings.</p></div><span class="count" id="c-aufgaben"></span></div>
    <div class="tasks reveal">
      <div class="card ringcard">
        <div class="ring">
          <svg viewBox="0 0 120 120" aria-hidden="true">
            <defs><linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#34c759"/><stop offset="1" stop-color="#30b0c7"/></linearGradient></defs>
            <circle class="bg" cx="60" cy="60" r="50"/>
            <circle class="fg" id="ringfg" cx="60" cy="60" r="50" stroke-dasharray="314.16" stroke-dashoffset="314.16"/>
          </svg>
          <div class="c"><b id="ringpct">–</b><span>erledigt</span></div>
        </div>
        <div class="tstats">
          <div><b id="ts-open">–</b><span>offen</span></div>
          <div><b id="ts-today">–</b><span>heute fällig</span></div>
          <div><b id="ts-over" style="color:var(--red)">–</b><span>überfällig</span></div>
        </div>
      </div>
      <div class="card list" id="l-aufgaben"></div>
    </div>
  </section>

  <section id="news">
    <div class="sec-head reveal"><div><h2>Branchen-News</h2><p>IT &amp; Cloud – kuratiert für deinen Arbeitsbereich.</p></div><span class="count" id="c-news"></span></div>
    <div id="l-news"></div>
  </section>

  <section id="abdeckung">
    <div class="sec-head reveal"><div><h2>Abdeckung</h2><p>Welche Quellen in dieses Cockpit eingeflossen sind.</p></div></div>
    <div class="card cov reveal" id="l-cov"></div>
  </section>
  <section id="qa">
    <div class="sec-head reveal"><div><h2>Qualitätsverifikation</h2><p>Automatische Prüfung der Datei beim Öffnen.</p></div></div>
    <div class="card qa reveal">
      <div class="qa-head"><span class="qa-pill" id="qapill">Prüfung läuft …</span><span class="muted" id="qasub"></span></div>
      <div class="qa-bar" id="qabar"><i></i></div>
      <div id="qalist"></div>
    </div>
  </section>
</main>

<footer id="foot">WorkIQ · Arbeits-Cockpit</footer>

<!-- ===================== DATEN (vom KI-Agent zu ersetzen) ===================== -->
<script type="application/json" id="workiq-data">
{"schemaVersion": "1.0"}
</script>

<script>
(function(){
  'use strict';
  var D={};
  try{D=JSON.parse(document.getElementById('workiq-data').textContent)||{};}catch(e){D={};}
  D.meta=D.meta||{};D.meta.user=D.meta.user||{};D.kpis=D.kpis||{};D.calendar=D.calendar||{days:[]};
  ['priorities','waiting','flagged','openLoops','review','teams','files','tasks','news','coverage'].forEach(function(k){if(!Array.isArray(D[k]))D[k]=[];});
  if(!Array.isArray(D.calendar.days))D.calendar.days=[];

  /* ---------- helpers ---------- */
  function $(s,r){return (r||document).querySelector(s);}
  function $$(s,r){return Array.prototype.slice.call((r||document).querySelectorAll(s));}
  function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
  function url(u){return (typeof u==='string'&&/^https:\/\//i.test(u))?u:'';}
  function pad(n){return (n<10?'0':'')+n;}
  function toMin(t){var m=/^(\d{1,2}):(\d{2})/.exec(t||'');return m?(+m[1])*60+(+m[2]):null;}
  function fmtMin(m){return pad(Math.floor(m/60))+':'+pad(m%60);}
  function isoOf(d){return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate());}
  function parseISO(s){var m=/^(\d{4})-(\d{2})-(\d{2})/.exec(s||'');return m?new Date(+m[1],+m[2]-1,+m[3],12):null;}
  var realToday=isoOf(new Date());
  var TODAY=D.meta.date||realToday;
  var LIVE=(TODAY===realToday)||!D.meta.now;
  function nowMin(){if(!LIVE){var m=toMin(D.meta.now);if(m!=null)return m;}var d=new Date();return d.getHours()*60+d.getMinutes();}
  var fDate=new Intl.DateTimeFormat('de-DE',{weekday:'long',day:'numeric',month:'long',year:'numeric'});
  var fShort=new Intl.DateTimeFormat('de-DE',{weekday:'short',day:'numeric',month:'short'});
  var fWd=new Intl.DateTimeFormat('de-DE',{weekday:'short'});
  var fWdLong=new Intl.DateTimeFormat('de-DE',{weekday:'long'});
  var fDM=new Intl.DateTimeFormat('de-DE',{day:'numeric',month:'long'});
  function niceDate(s){var d=parseISO(s);return d?fShort.format(d):(s||'');}

  var I={
    mail:'<path d="M3.5 6.5h17v11h-17z"/><path d="m3.5 7.5 8.5 6 8.5-6"/>',
    teams:'<path d="M4.5 5.5h15v10h-9l-4 3.5v-3.5h-2z"/>',
    calendar:'<rect x="4" y="5.5" width="16" height="14.5" rx="2.5"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4"/>',
    file:'<path d="M7 3.5h7l5 5V20.5H7z"/><path d="M14 3.5v5h5"/>',
    task:'<circle cx="12" cy="12" r="8.5"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/>',
    flag:'<path d="M6 21V4.5M6 4.5h11.5l-2.2 4 2.2 4H6"/>',
    question:'<circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.6a2.5 2.5 0 1 1 3.6 2.2c-.7.4-1.2.9-1.2 1.7v.4M12 16.9h.01"/>',
    invite:'<rect x="4" y="5.5" width="16" height="14.5" rx="2.5"/><path d="M4 10h16M12 13v4M10 15h4"/>',
    news:'<rect x="3.5" y="5" width="17" height="14" rx="2.5"/><path d="M7.5 9h9M7.5 12.5h9M7.5 16h5"/>',
    spark:'<path d="M12 3.5l2.2 5.3 5.3 2.2-5.3 2.2L12 18.5l-2.2-5.3L4.5 11l5.3-2.2z"/>',
    people:'<circle cx="9" cy="9" r="3"/><path d="M3.5 19c.8-3 3-4.5 5.5-4.5s4.7 1.5 5.5 4.5"/><circle cx="16.5" cy="8" r="2.4"/><path d="M15.5 13.6c2.4-.2 4.3 1.2 5 3.9"/>',
    pin:'<path d="M9 4.5h6l-1 5 3 3H7l3-3zM12 12.5v7"/>',
    ext:'<path d="M9 5.5H6.5A1.5 1.5 0 0 0 5 7v10.5A1.5 1.5 0 0 0 6.5 19H17a1.5 1.5 0 0 0 1.5-1.5V15"/><path d="M13 4.5h6.5V11M19.5 4.5 11 13"/>'
  };
  function ico(n){return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'+(I[n]||I.spark)+'</svg>';}
  var SRC={mail:['mail','blue'],outlook:['mail','blue'],teams:['teams','indigo'],chat:['teams','indigo'],channel:['people','indigo'],calendar:['calendar','red'],meeting:['calendar','red'],file:['file','teal'],task:['task','green'],todo:['task','green'],planner:['task','green'],flag:['flag','orange'],question:['question','orange'],invite:['invite','orange'],news:['news','purple']};
  function src(s){return SRC[String(s||'').toLowerCase()]||['spark','gray'];}
  var PL={critical:'Kritisch',high:'Hoch',normal:'Normal',low:'Niedrig'};
  var PC={critical:'var(--red)',high:'var(--orange)',normal:'var(--blue)',low:'var(--gray)'};
  function openBtn(link,cls){var l=url(link);
    return l?'<a class="open'+(cls?' '+cls:'')+'" href="'+esc(l)+'" target="_blank" rel="noopener" title="Öffnen" aria-label="Element öffnen">'+ico('ext')+'</a>'
            :'<span class="open off'+(cls?' '+cls:'')+'" title="Kein Direktlink verfügbar" aria-hidden="true">'+ico('ext')+'</span>';}
  function badge(p){return PL[p]?'<span class="badge b-'+p+'">'+PL[p]+'</span>':'';}
  function title(t,link){var u=url(link);return u?'<a href="'+esc(u)+'" target="_blank" rel="noopener">'+esc(t)+'</a>':esc(t);}
  function setCount(id,n,word){var el=document.getElementById(id);if(!el)return;if(!n){el.style.display='none';return;}el.textContent=n+' '+(word||'Einträge');}

  var HINT={
    prio:'Die 3–7 wichtigsten Dinge für heute – gewichtet nach Dringlichkeit, Absender, Fristen und Terminen.',
    wartet:'E-Mails und Chats, in denen jemand eine Antwort, Freigabe oder Entscheidung von dir erwartet.',
    markiert:'Gekennzeichnete E-Mails und angeheftete Nachrichten – inklusive Alter der Markierung.',
    teams:'Erwähnungen, ungelesene Chats und Kanal-Threads mit Bezug zu dir.',
    dateien:'Dokumente, die andere zuletzt bearbeitet, kommentiert oder mit dir geteilt haben.',
    aufgaben:'Offene Aufgaben aus To Do, Planner, Meeting-Notizen und E-Mails.',
    kal:'Termine der nächsten Arbeitstage mit Status, Konflikten und offenen Einladungen.',
    review:'Zusammenfassung der letzten drei Arbeitstage: Gespräche, Entscheidungen, Ergebnisse.',
    news:'Relevante IT-Branchennews der letzten 24–48 Stunden mit Bezug zu deinem Arbeitsbereich.',
    cov:'Datenquellen, Zeitraum und Vollständigkeit der Auswertung.'
  };
  var FILLED=!!D.meta.generatedAt;
  function empty(key,rows){
    if(FILLED&&key!=='kal')return '<div class="empty-done"><b>Keine Einträge</b>Im Analysezeitraum wurde nichts gefunden.</div>';
    var h='<div class="empty">';
    for(var i=0;i<(rows||3);i++){h+='<div class="sk-row"><div class="sk sk-ic"></div><div style="flex:1"><div class="sk sk-l" style="width:'+(70-i*12)+'%"></div><div class="sk sk-l" style="width:'+(45-i*6)+'%;margin-top:8px;opacity:.7"></div></div></div>';}
    return h+'<div class="empty-cap"><b>Wird vom WorkIQ-Agent befüllt</b><span>'+esc(HINT[key]||'')+'</span></div></div>';
  }

  function row(o){
    var p=o.prio&&PL[o.prio]?o.prio:'';
    var h='<div class="row'+(o.done?' done':'')+'" data-prio="'+p+'"'+(o.idx!=null?' data-idx="'+o.idx+'"':'')+'>';
    if(o.bar&&p)h+='<span class="prio-bar" style="background:'+PC[p]+'"></span>';
    if(o.rank)h+='<div class="rank">'+o.rank+'</div>';
    if(o.lead)h+=o.lead;else{var s=src(o.src);h+='<div class="ic t-'+s[1]+'">'+ico(s[0])+'</div>';}
    h+='<div class="body"><div class="t">'+title(o.title,o.link)+'</div>';
    if(o.meta)h+='<div class="m">'+o.meta+'</div>';
    if(o.extra)h+='<div class="x">'+esc(o.extra)+'</div>';
    h+='</div><div class="trail">'+badge(p);
    if(o.age)h+='<span class="age'+(o.ageCls?' '+o.ageCls:'')+'">'+esc(o.age)+'</span>';
    if(o.action){var u=url(o.link);h+=u?'<a class="act" href="'+esc(u)+'" target="_blank" rel="noopener">'+esc(o.action)+' ›</a>':'<span class="act">'+esc(o.action)+' ›</span>';}
    return h+'</div>'+openBtn(o.link)+'</div>';
  }
  function joinMeta(a){return a.filter(function(x){return x!=null&&x!=='';}).map(esc).join(' · ');}
  function fill(id,items,key,map){
    var el=document.getElementById(id);
    if(!items.length){el.innerHTML=empty(key);return;}
    el.innerHTML=items.map(map).join('');
  }

  /* ---------- Hero ---------- */
  var u=D.meta.user;
  var hourNow=Math.floor(nowMin()/60);
  var greet=hourNow<11?'Guten Morgen':(hourNow<17?'Guten Tag':'Guten Abend');
  $('#greeting').innerHTML=esc(greet)+(u.firstName?', <span class="name">'+esc(u.firstName)+'</span>.':'.');
  $('#eyebrow').textContent=['WorkIQ · Arbeits-Cockpit',u.fullName,u.role].filter(Boolean).join(' · ');
  var td=parseISO(TODAY);$('#datelabel').textContent=td?fDate.format(td):'';
  var srcs=(D.meta.sources||[]).join(', ');
  $('#stand').textContent=D.meta.generatedAt?((D.meta.example?'Beispiel mit erfundenen Daten · ':'')+'Stand '+D.meta.generatedAt+(srcs?' · Auswertung über '+srcs:'')):'Vorlage · noch nicht befüllt';
  var wd=D.meta.workday||{};var ws=toMin(wd.start)||480,we=toMin(wd.end)||1080;
  $('#daystart').textContent=fmtMin(ws);$('#dayend').textContent=fmtMin(we);
  function dayProgress(){
    var n=nowMin(),pct=Math.max(0,Math.min(100,Math.round((n-ws)/(we-ws)*100)));
    $('#dayfill').style.width=pct+'%';
    $('#daytext').textContent=n<ws?'Arbeitstag beginnt um '+fmtMin(ws):(n>we?'Arbeitstag beendet':'Arbeitstag zu '+pct+' % vorbei');
    $('#navtime').textContent=fmtMin(n)+' Uhr';
  }
  requestAnimationFrame(function(){setTimeout(dayProgress,350);});

  /* ---------- Segmented filter ---------- */
  var seg=$('#seg'),pill=$('#segpill'),mode='all';
  function movePill(btn){pill.style.left=btn.offsetLeft+'px';pill.style.width=btn.offsetWidth+'px';}
  function applyFilter(){
    $$('.row[data-prio]').forEach(function(el){
      var p=el.getAttribute('data-prio');
      var show=mode==='all'||!p||(mode==='high'?(p==='critical'||p==='high'):p==='critical');
      var was=!el.classList.contains('hide');
      el.classList.toggle('hide',!show);
      if(show&&!was){el.classList.remove('pop');void el.offsetWidth;el.classList.add('pop');}
    });
  }
  seg.addEventListener('click',function(e){
    var b=e.target.closest('button');if(!b)return;
    mode=b.getAttribute('data-mode');
    $$('button',seg).forEach(function(x){x.setAttribute('aria-selected',x===b?'true':'false');});
    movePill(b);applyFilter();
  });
  window.addEventListener('load',function(){movePill($('button[data-mode="all"]',seg));});
  window.addEventListener('resize',function(){movePill($('button[aria-selected="true"]',seg));});
  setTimeout(function(){movePill($('button[data-mode="all"]',seg));},60);

  /* ---------- KPIs ---------- */
  var KPI=[
    ['emailsAwaitingReply','E-Mails warten auf Antwort','mail','blue','wartet','rgba(0,113,227,.14)'],
    ['meetingsUpcoming','Anstehende Meetings','calendar','red','kalender','rgba(255,59,48,.12)'],
    ['teamsThreads','Teams-Threads warten auf dich','teams','indigo','teams','rgba(88,86,214,.14)'],
    ['openTasks','Offene Aufgaben bei dir','task','green','aufgaben','rgba(52,199,89,.14)'],
    ['docsChanged','Dokumente geändert','file','teal','dateien','rgba(48,176,199,.14)'],
    ['openLoops','Offene Enden','question','orange','kalender','rgba(255,149,0,.14)']
  ];
  $('#kpis').innerHTML=KPI.map(function(k,i){
    var v=D.kpis[k[0]]||{};var has=typeof v.value==='number';
    var tone=['critical','warn','ok'].indexOf(v.tone)>-1?' '+v.tone:'';
    return '<button type="button" class="card kpi reveal'+tone+'" data-target="'+k[4]+'" style="--glow:'+k[5]+';transition-delay:'+(i*70)+'ms">'+
      '<div class="ico t-'+k[3]+'">'+ico(k[2])+'</div>'+
      '<div class="num" data-to="'+(has?v.value:'')+'">'+(has?'0':'–')+'</div>'+
      '<div class="lbl">'+esc(v.label||k[1])+'</div>'+
      '<div class="sub">'+esc(has?(v.sub||''):'Noch keine Daten')+'</div><span class="arrow">→</span></button>';
  }).join('');
  $('#kpis').addEventListener('click',function(e){var b=e.target.closest('.kpi');if(!b)return;var t=document.getElementById(b.getAttribute('data-target'));if(t)t.scrollIntoView({behavior:'smooth'});});
  function countUp(el){
    var to=parseFloat(el.getAttribute('data-to'));if(isNaN(to))return;
    var t0=null,dur=1300;
    function step(ts){if(!t0)t0=ts;var p=Math.min(1,(ts-t0)/dur),e=1-Math.pow(1-p,4);el.textContent=Math.round(to*e).toLocaleString('de-DE');if(p<1)requestAnimationFrame(step);}
    requestAnimationFrame(step);
  }
  if(D.meta.note){$('#note').innerHTML='<div class="card note reveal"><div class="ic t-purple" style="width:34px;height:34px;border-radius:11px;display:grid;place-items:center">'+ico('spark')+'</div><div>'+esc(D.meta.note)+'</div></div>';}

  /* ---------- Top-Prioritäten ---------- */
  setCount('c-prio',D.priorities.length);
  fill('l-prio',D.priorities,'prio',function(p,i){
    return row({rank:i+1,bar:true,src:p.source,title:p.title,link:p.link,prio:p.priority,
      meta:joinMeta([p.from,p.due?'fällig: '+niceDate(p.due):'']),extra:p.context,action:p.action});
  });

  /* ---------- Wartet auf mich ---------- */
  setCount('c-wartet',D.waiting.length);
  fill('l-wartet',D.waiting,'wartet',function(w){
    return row({src:w.channel,title:w.subject,link:w.link,prio:w.priority,meta:joinMeta([w.from,w.channelLabel||(w.channel==='teams'?'Teams':'E-Mail')]),extra:w.ask,age:w.age,action:w.action});
  });

  /* ---------- Markiert ---------- */
  setCount('c-markiert',D.flagged.length);
  fill('l-markiert',D.flagged,'markiert',function(f){
    return row({src:f.type==='pinned'?'channel':'flag',title:f.title,link:f.link,prio:f.priority,meta:joinMeta([f.from,f.date?niceDate(f.date):'']),extra:f.note,age:f.age,ageCls:f.stale?'overdue':''});
  });

  /* ---------- Kalender ---------- */
  var days=D.calendar.days.filter(function(d){return d&&d.date;});
  var allEv=0;
  days.forEach(function(d){d.events=Array.isArray(d.events)?d.events:[];d.allDay=Array.isArray(d.allDay)?d.allDay:[];
    d.events.forEach(function(e){e._s=toMin(e.start);e._e=toMin(e.end);if(e._e!=null&&e._s!=null&&e._e<=e._s)e._e=e._s+15;});
    d.events=d.events.filter(function(e){return e._s!=null;});allEv+=d.events.length;
    /* Konflikte automatisch erkennen */
    var busy=d.events.filter(function(e){return e.status!=='declined'&&e.showAs!=='free'&&e.status!=='private';});
    busy.forEach(function(a){busy.forEach(function(b){if(a!==b&&a._s<b._e&&b._s<a._e){a._c=true;}});});
    d.events.forEach(function(e){if(e.conflict)e._c=true;});
  });
  setCount('c-kal',allEv,'Termine');
  var sel=0;days.forEach(function(d,i){if(d.date===TODAY)sel=i;});
  function evTitle(e){return e.status==='private'?(e.title||'Privater Termin'):(e.title||'(ohne Titel)');}
  function renderWeek(){
    var w=$('#week');
    if(!days.length){w.innerHTML='';return;}
    w.innerHTML=days.map(function(d,i){
      var dt=parseISO(d.date);var n=Math.min(4,d.events.filter(function(e){return e.status!=='declined';}).length);
      return '<button type="button" class="wd'+(i===sel?' sel':'')+(d.date===TODAY?' today':'')+'" data-i="'+i+'">'+
        '<div class="d">'+esc(dt?fWd.format(dt):'')+'</div><div class="n">'+(dt?dt.getDate():'')+'</div><div class="l">'+esc(d.label||'')+'</div>'+
        '<div class="dots">'+new Array(n+1).join('<i></i>')+'</div></button>';
    }).join('');
  }
  $('#week').addEventListener('click',function(e){var b=e.target.closest('.wd');if(!b)return;sel=+b.getAttribute('data-i');renderWeek();renderDay(true);});
  var H=60,START=7,END=20,nowEl=null;
  function renderDay(scroll){
    var tl=$('#tl'),ad=$('#allday');
    if(!days.length){
      tl.style.height='auto';tl.parentNode.style.height='auto';tl.style.marginLeft='0';
      tl.innerHTML=empty('kal',4);ad.innerHTML='';return;
    }
    var d=days[sel];
    ad.innerHTML=d.allDay.map(function(a,i){return '<span class="chip" style="animation-delay:'+(i*60)+'ms"><span class="dot" style="background:var(--teal)"></span>'+esc(a.title||a)+'</span>';}).join('');
    var mn=Math.min.apply(null,[START*60].concat(d.events.map(function(e){return e._s;})));
    var mx=Math.max.apply(null,[END*60].concat(d.events.map(function(e){return e._e||e._s+30;})));
    var s=Math.max(0,Math.floor(mn/60)),en=Math.min(24,Math.ceil(mx/60));
    tl.style.height=((en-s)*H+10)+'px';
    var h='';
    for(var hr=s;hr<=en;hr++){h+='<div class="hr" style="top:'+((hr-s)*H)+'px"><span>'+pad(hr)+':00</span></div>';if(hr<en)h+='<div class="hr half" style="top:'+((hr-s)*H+H/2)+'px"></div>';}
    /* Spalten-Layout für Überschneidungen */
    var items=d.events.slice().sort(function(a,b){return a._s-b._s||(b._e-b._s)-(a._e-a._s);});
    var groups=[],cur=[],curEnd=-1;
    items.forEach(function(it){var e=it._e||it._s+30;if(cur.length&&it._s>=curEnd){groups.push(cur);cur=[];curEnd=-1;}cur.push(it);curEnd=Math.max(curEnd,e);});
    if(cur.length)groups.push(cur);
    groups.forEach(function(g){var cols=[];g.forEach(function(it){var e=it._e||it._s+30,placed=false;for(var c=0;c<cols.length;c++){if(cols[c]<=it._s){cols[c]=e;it._col=c;placed=true;break;}}if(!placed){it._col=cols.length;cols.push(e);}});g.forEach(function(it){it._cols=cols.length;});});
    var isToday=d.date===TODAY,n=nowMin();
    items.forEach(function(e,i){
      var top=(e._s-s*60)/60*H,ht=Math.max(22,((e._e||e._s+30)-e._s)/60*H-3);
      var w=100/e._cols,l=e._col*w;
      var cls=['ev',e.status||'accepted'];if(e.showAs==='free')cls.push('free');if(e._c)cls.push('conflict');if(isToday&&e._e&&e._e<=n)cls.push('past');
      var info=fmtMin(e._s)+(e._e?'–'+fmtMin(e._e):'')+(e.online?' · Online':'')+(e.location?' · '+e.location:'')+(e.organizer?' · '+e.organizer:'');
      h+='<div class="'+cls.join(' ')+'" title="'+esc(evTitle(e)+' · '+info)+'" style="top:'+top+'px;height:'+ht+'px;left:calc('+l+'% + 2px);width:calc('+w+'% - 4px);animation-delay:'+(i*55)+'ms">'+
        (url(e.link)?'<a class="evopen" href="'+esc(url(e.link))+'" target="_blank" rel="noopener" title="Termin öffnen" aria-label="Termin öffnen">'+ico('ext')+'</a>':'')+'<div class="et">'+esc(evTitle(e))+'</div>'+(ht>34?'<div class="eti">'+esc(info)+'</div>':'')+'</div>';
    });
    if(isToday&&n>=s*60&&n<=en*60)h+='<div class="now" id="nowline" style="top:'+((n-s*60)/60*H)+'px"><b>'+fmtMin(n)+'</b></div>';
    tl.innerHTML=h;
    if(scroll!==false){
      var target=isToday?(n-s*60)/60*H-H*1.2:(items.length?(items[0]._s-s*60)/60*H-H*0.4:0);
      var wrap=$('#tlwrap');setTimeout(function(){wrap.scrollTop=Math.max(0,target);},80);
    }
    renderSide();
  }
  function renderSide(){
    var nc=$('#nextcard');
    var today=days.filter(function(d){return d.date===TODAY;})[0];
    var n=nowMin();
    if(!days.length){nc.innerHTML='<h3>Nächster Termin</h3>'+'<div class="sk sk-l" style="width:70%;height:16px"></div><div class="sk sk-l" style="width:45%;margin-top:10px"></div><div class="sk" style="width:55%;height:36px;margin-top:16px;border-radius:10px"></div>';}
    else{
      var nx=today?today.events.filter(function(e){return e._s>n&&e.status!=='declined'&&e.status!=='private';}).sort(function(a,b){return a._s-b._s;})[0]:null;
      var cur=today?today.events.filter(function(e){return e._s<=n&&e._e>n&&e.status!=='declined'&&e.status!=='private';})[0]:null;
      if(nx){var diff=nx._s-n,hh=Math.floor(diff/60),mm=diff%60;
        nc.innerHTML='<h3>Nächster Termin</h3><div class="next-t">'+title(evTitle(nx),nx.link)+'</div><div class="next-m">'+fmtMin(nx._s)+'–'+fmtMin(nx._e||nx._s+30)+(nx.online?' · Online':'')+(nx.organizer?' · '+esc(nx.organizer):'')+'</div>'+
        '<div class="countdown">in '+(hh?hh+' h ':'')+mm+' min</div>'+(cur?'<div class="muted" style="margin-top:6px">Gerade läuft: '+esc(evTitle(cur))+'</div>':'');}
      else nc.innerHTML='<h3>Nächster Termin</h3><div class="next-t">Keine weiteren Termine heute</div><div class="next-m">Zeit für Fokusarbeit.</div>';
    }
    /* Offene Enden */
    var loops=D.openLoops.slice();
    days.forEach(function(d){d.events.forEach(function(e){if(e.status==='notResponded'&&!e._listed){loops.push({type:'invite',title:evTitle(e),from:e.organizer,link:e.link,age:niceDate(d.date)+' · '+fmtMin(e._s)});}});});
    $('#loops').innerHTML=loops.length?loops.map(function(o){var c=o.type==='invite'?'var(--orange)':(o.type==='question'?'var(--purple)':'var(--blue)');
      return '<div class="mini"><span class="dot" style="background:'+c+'"></span><div><b>'+esc(o.title)+'</b><span>'+joinMeta([o.type==='invite'?'Einladung':(o.type==='question'?'Offene Frage':'Offen'),o.from,o.age])+'</span></div>'+(url(o.link)?openBtn(o.link,'sm'):'')+'</div>';}).join('')
      :(days.length?'<div class="muted">Keine offenen Enden 🎉</div>':'<div class="sk sk-l" style="width:80%"></div><div class="sk sk-l" style="width:60%;margin-top:10px"></div>');
    /* Konflikte */
    var cf=[];
    days.forEach(function(d){var b=d.events.filter(function(e){return e._c;}).sort(function(a,c){return a._s-c._s;});
      for(var i=0;i<b.length;i++)for(var j=i+1;j<b.length;j++){var a=b[i],c=b[j];if(a._s<c._e&&c._s<a._e&&a.status!=='declined'&&c.status!=='declined'&&a.showAs!=='free'&&c.showAs!=='free')cf.push({d:d.date,a:a,b:c});}});
    $('#conflicts').innerHTML=cf.length?cf.slice(0,6).map(function(x){return '<div class="mini"><span class="dot" style="background:var(--red)"></span><div><b>'+esc(evTitle(x.a))+' ↔ '+esc(evTitle(x.b))+'</b><span>'+esc(niceDate(x.d))+' · '+fmtMin(Math.max(x.a._s,x.b._s))+'–'+fmtMin(Math.min(x.a._e,x.b._e))+'</span></div></div>';}).join('')+(cf.length>6?'<div class="muted" style="margin-top:6px">+ '+(cf.length-6)+' weitere</div>':'')
      :(days.length?'<div class="muted">Keine Überschneidungen.</div>':'<div class="sk sk-l" style="width:75%"></div><div class="sk sk-l" style="width:50%;margin-top:10px"></div>');
  }
  renderWeek();renderDay();
  setInterval(function(){dayProgress();if(LIVE&&days.length){var d=days[sel];if(d&&d.date===TODAY)renderDay(false);else renderSide();}},60000);

  /* ---------- Rückblick ---------- */
  var rv=$('#l-review');
  if(!D.review.length){rv.innerHTML='<div class="card">'+empty('review')+'</div>';}
  else{
    rv.className='review';
    rv.innerHTML=D.review.slice(0,3).map(function(r,i){var dt=parseISO(r.date),st=r.stats||{};
      return '<div class="card rv reveal" style="transition-delay:'+(i*90)+'ms"><div class="rv-day">'+esc(r.label||(dt?fWdLong.format(dt):''))+'</div><div class="rv-date">'+esc(dt?fDM.format(dt):(r.date||''))+'</div>'+
        '<div class="rv-stats"><div class="rv-stat"><b>'+esc(st.mails!=null?st.mails:'–')+'</b><span>Mails</span></div><div class="rv-stat"><b>'+esc(st.meetings!=null?st.meetings:'–')+'</b><span>Meetings</span></div><div class="rv-stat"><b>'+esc(st.docs!=null?st.docs:'–')+'</b><span>Dokumente</span></div></div>'+
        '<p>'+esc(r.summary||'')+'</p>'+(Array.isArray(r.highlights)&&r.highlights.length?'<ul>'+r.highlights.map(function(x){return '<li>'+esc(x)+'</li>';}).join('')+'</ul>':'')+'</div>';}).join('');
  }

  /* ---------- Teams ---------- */
  setCount('c-teams',D.teams.length,'Threads');
  fill('l-teams',D.teams,'teams',function(t){
    var TK={chat1on1:'1:1-Chat',chat:'1:1-Chat',post:'Beitrag',channel:'Beitrag',meeting:'Teams-Meeting'};
    var kind=TK[t.type]?t.type:'chat1on1';
    var lead='<div class="ic t-indigo" style="position:relative">'+ico((kind==='post'||kind==='channel')?'people':(kind==='meeting'?'calendar':'teams'))+(t.unread?'<span style="position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center">'+esc(t.unread)+'</span>':'')+'</div>';
    return row({lead:lead,title:t.title,link:t.link,prio:t.priority,meta:joinMeta([(kind==='post'||kind==='channel')?(t.team?t.team+(t.channel?' › '+t.channel:''):'Beitrag'):TK[kind],t.from,t.mention?'@Erwähnung':'']),extra:t.preview,age:t.time});
  });

  /* ---------- Dateien ---------- */
  setCount('c-dateien',D.files.length,'Dateien');
  fill('l-dateien',D.files,'dateien',function(f){
    var tp=['docx','xlsx','pptx','pdf','loop'].indexOf(f.type)>-1?f.type:'other';
    var L={docx:'W',xlsx:'X',pptx:'P',pdf:'PDF',loop:'L',other:'•'}[tp];
    return row({lead:'<div class="ftype f-'+tp+'"'+(tp==='pdf'?' style="font-size:10px"':'')+'>'+L+'</div>',title:f.name,link:f.link,meta:joinMeta([f.editedBy?f.action?f.editedBy+' hat '+f.action:f.editedBy:'',f.store==='onedrive'?'OneDrive':(f.store==='sharepoint'?'SharePoint':''),f.location]),extra:f.summary,age:f.time});
  });

  /* ---------- Aufgaben ---------- */
  var tasks=D.tasks;
  function taskStats(){
    var done=tasks.filter(function(t){return t.done;}).length,open=tasks.length-done;
    var today=tasks.filter(function(t){return !t.done&&t.due&&t.due.slice(0,10)===TODAY;}).length;
    var over=tasks.filter(function(t){return !t.done&&/^\d{4}-\d{2}-\d{2}/.test(t.due||'')&&t.due.slice(0,10)<TODAY;}).length;
    var pct=tasks.length?Math.round(done/tasks.length*100):0;
    $('#ringfg').style.strokeDashoffset=(314.16*(1-pct/100)).toFixed(2);
    $('#ringpct').textContent=tasks.length?pct+' %':'–';
    $('#ts-open').textContent=tasks.length?open:'–';$('#ts-today').textContent=tasks.length?today:'–';$('#ts-over').textContent=tasks.length?over:'–';
    setCount('c-aufgaben',open,'offen');
  }
  fill('l-aufgaben',tasks,'aufgaben',function(t,i){
    var over=!t.done&&/^\d{4}-\d{2}-\d{2}/.test(t.due||'')&&t.due.slice(0,10)<TODAY;
    var dueTxt=t.due?(t.due.slice(0,10)===TODAY?'heute':niceDate(t.due)):'';
    return row({idx:i,done:t.done,lead:'<button type="button" class="chk" aria-label="Erledigt umschalten"><svg viewBox="0 0 16 16"><path d="m3.5 8.5 3 3 6-7"/></svg></button>',
      title:t.title,link:t.link,prio:t.priority,meta:joinMeta([t.source,t.origin]),extra:t.note,age:dueTxt?(over?'überfällig · ':'fällig ')+dueTxt:'',ageCls:over?'overdue':''});
  });
  $('#l-aufgaben').addEventListener('click',function(e){var b=e.target.closest('.chk');if(!b)return;var r=b.closest('.row');var i=+r.getAttribute('data-idx');tasks[i].done=!tasks[i].done;r.classList.toggle('done',tasks[i].done);taskStats();});

  /* ---------- News ---------- */
  setCount('c-news',D.news.length,'Meldungen');
  var nw=$('#l-news');
  if(!D.news.length){nw.innerHTML='<div class="card">'+empty('news')+'</div>';}
  else{
    nw.className='news';
    nw.innerHTML=D.news.map(function(n,i){var u2=url(n.link);
      return '<article class="card nw reveal" style="transition-delay:'+((i%3)*80)+'ms"><div style="display:flex;justify-content:space-between;gap:8px;align-items:center"><span class="chip">'+esc(n.tag||'IT')+'</span><span class="src" style="margin-inline-start:auto">'+esc(joinMeta([n.source,n.date?niceDate(n.date):'']))+'</span>'+openBtn(n.link,'sm')+'</div>'+
        '<h4>'+(u2?'<a href="'+esc(u2)+'" target="_blank" rel="noopener">'+esc(n.headline)+'</a>':esc(n.headline))+'</h4><p>'+esc(n.summary||'')+'</p>'+(n.relevance?'<div class="rel"><b>Für dich:</b> '+esc(n.relevance)+'</div>':'')+'</article>';}).join('');
  }

  /* ---------- Abdeckung ---------- */
  var cv=$('#l-cov');
  if(!D.coverage.length){cv.innerHTML='<div style="width:100%">'+empty('cov',2)+'</div>';}
  else{
    var SC={ok:['var(--green)','vollständig'],partial:['var(--orange)','teilweise'],missing:['var(--red)','nicht verfügbar']};
    cv.innerHTML=D.coverage.map(function(c){var s=SC[c.status]||SC.ok;return '<span class="chip" title="'+esc(c.detail||'')+'" style="font-size:12px;padding:6px 12px"><span class="dot" style="background:'+s[0]+'"></span>'+esc(c.source)+' · '+s[1]+(c.detail?' · '+esc(c.detail):'')+'</span>';}).join('');
  }
  $('#foot').textContent='WorkIQ · Arbeits-Cockpit'+(D.meta.generatedAt?' · erstellt '+D.meta.generatedAt:' · leere Vorlage')+(D.meta.example?' · Beispiel: Personen, Termine und Inhalte sind erfunden':' · Daten stammen ausschließlich aus deinen Microsoft-365-Quellen');

  /* ---------- Qualitätsverifikation ---------- */
  function runQA(){
    var checks=[];
    function add(id,t,ok,detail,level){checks.push({id:id,t:t,ok:ok,d:detail,level:level||'must'});}
    var blocks=document.querySelectorAll('script[type="application/json"]#workiq-data');
    var jsonOk=blocks.length===1&&Object.keys(D).length>1;
    add('block','Genau ein aktiver Datenblock, gültiges JSON',jsonOk,blocks.length===1?(jsonOk?'Datenblock gelesen.':'Block leer oder ungültig.'):blocks.length+' aktive Datenblöcke gefunden.');
    var commentHit=0,tw=document.createTreeWalker(document,NodeFilter.SHOW_COMMENT,null,false),cn;
    while((cn=tw.nextNode())){if(/workiq-data/i.test(cn.nodeValue||'')&&/<script/i.test(cn.nodeValue||''))commentHit++;}
    add('comment','Kein Datenblock in Kommentaren',commentHit===0,commentHit?commentHit+' Kommentar(e) enthalten einen Script-Block – nur der aktive Block zählt.':'Keine Treffer.','warn');
    add('filled','Vorlage ist befüllt (Zeitstempel gesetzt)',FILLED,FILLED?('Stand '+D.meta.generatedAt):'meta.generatedAt fehlt.');
    var ph=document.querySelectorAll('main .empty,main .sk').length;
    add('ph','Keine Platzhalter sichtbar',ph===0,ph?ph+' Platzhalter-Element(e) werden noch angezeigt.':'Keine Platzhalter.');
    var nums=$$('.kpi .num[data-to]').filter(function(n){return n.getAttribute('data-to')!=='';}).length;
    add('kpi','Mindestens ein KPI gerendert',nums>=1,nums+' von 6 KPIs mit Wert.');
    if(nums>=1&&nums<6)add('kpi6','Alle 6 KPIs befüllt',false,(6-nums)+' KPI(s) ohne Wert.','warn');
    var pr=$$('#l-prio .row').length,ev=$$('#tl .ev').length;
    add('content','Kalender- oder Prioritätseintrag sichtbar',pr+ev>=1,pr+' Prioritäten, '+ev+' Kalendertermine.');
    var rows=$$('main .list .row'),withLink=rows.filter(function(r){return r.querySelector('a.open:not(.off)');}).length;
    add('links','Direktlinks vorhanden',rows.length===0||withLink>0,withLink+' von '+rows.length+' Listeneinträgen mit Öffnen-Link.',rows.length&&withLink<rows.length?'warn':'must');
    return checks;
  }
  function renderQA(){
    var list=$('#qalist'),pill=$('#qapill'),bar=$('#qabar'),badge=$('#qabadge'),sub=$('#qasub');
    if(!FILLED){
      pill.textContent='Vorlage – noch nicht befüllt';
      sub.textContent='Die Prüfung läuft automatisch, sobald der Datenblock befüllt ist.';
      var names=['Genau ein aktiver Datenblock, gültiges JSON','Kein Datenblock in Kommentaren','Vorlage ist befüllt (Zeitstempel gesetzt)','Keine Platzhalter sichtbar','Mindestens ein KPI gerendert','Kalender- oder Prioritätseintrag sichtbar','Direktlinks vorhanden'];
      list.innerHTML=names.map(function(n,i){return '<div class="qa-item pend" style="animation-delay:'+(i*70)+'ms"><span class="qa-dot">·</span><div><div class="qa-t">'+esc(n)+'</div></div></div>';}).join('');
      badge.textContent='Vorlage';document.body.setAttribute('data-qa','template');return;
    }
    var cs=runQA(),must=cs.filter(function(c){return c.level==='must';}),failed=must.filter(function(c){return !c.ok;}),pass=must.length-failed.length;
    var allOk=failed.length===0;
    list.innerHTML=cs.map(function(c,i){var st=c.ok?'ok':(c.level==='warn'?'warn':'fail');
      return '<div class="qa-item '+st+'" style="animation-delay:'+(i*110)+'ms"><span class="qa-dot">'+(c.ok?'✓':(c.level==='warn'?'!':'✕'))+'</span><div><div class="qa-t">'+esc(c.t)+'</div><div class="qa-d">'+esc(c.d)+'</div></div></div>';}).join('');
    pill.textContent=allOk?'Alle Pflichtprüfungen bestanden':failed.length+' Pflichtprüfung(en) fehlgeschlagen';
    pill.className='qa-pill '+(allOk?'pass':'fail');
    sub.textContent=pass+' von '+must.length+' Pflichtprüfungen · '+cs.filter(function(c){return c.level==='warn'&&!c.ok;}).length+' Hinweis(e)';
    bar.className='qa-bar'+(allOk?'':' fail');
    setTimeout(function(){bar.firstElementChild.style.width=Math.round(pass/must.length*100)+'%';},300);
    badge.textContent=allOk?'QA ✓ '+pass+'/'+must.length:'QA ✕ '+pass+'/'+must.length;badge.className='qa-badge '+(allOk?'pass':'fail');
    document.body.setAttribute('data-qa',allOk?'pass':'fail');
    document.body.setAttribute('data-qa-passed',pass);document.body.setAttribute('data-qa-total',must.length);
    try{console[allOk?'log':'error']('[WorkIQ QA] '+(allOk?'bestanden':'FEHLGESCHLAGEN')+' – '+JSON.stringify(cs.map(function(c){return [c.id,c.ok];})));}catch(e){}
  }
  setTimeout(renderQA,900);

  /* ---------- Reveal, Count-up, Scrollspy ---------- */
  var counted=false;
  var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){var tg=en.target;tg.classList.add('in');io.unobserve(tg);setTimeout(function(){tg.style.transitionDelay='';},1300);
    if(!counted&&en.target.classList.contains('kpi')){counted=true;$$('.kpi .num').forEach(countUp);}
    $$('.row',en.target).forEach(function(r,i){r.classList.remove('st');void r.offsetWidth;r.classList.add('st');r.style.animationDelay=(120+i*60)+'ms';});
    if(en.target.classList.contains('tasks'))setTimeout(taskStats,200);}});},{threshold:.12,rootMargin:'0px 0px -40px 0px'});
  $$('.reveal').forEach(function(el){io.observe(el);});
  if(!('IntersectionObserver' in window)){$$('.reveal').forEach(function(el){el.classList.add('in');});$$('.kpi .num').forEach(countUp);taskStats();}
  var links=$$('#navlinks a');
  var spy=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){var id=en.target.id;links.forEach(function(a){a.classList.toggle('active',a.getAttribute('href')==='#'+id);});}});},{rootMargin:'-45% 0px -50% 0px'});
  $$('main section[id]').forEach(function(s){spy.observe(s);});
})();
</script>
</body>
</html>
