/* Vorher/Nachher-Loop: 12 s, Zettelchaos wird zu Praxisraum, ohne Bedienelemente.
   Single light look by choice: brand clip that must look identical for every viewer. */
:root{
  --praxis:#3D5F7A; --ink:#22292F; --muted:#6B7A87; --sky:#BDDCEE; --skySoft:#EAF4FA;
  --avatar:#DCE8F1; --white:#FFFFFF; --surface:#F3F6F9; --canvas:#F1F6FA; --line:#E1E8ED;
  --red:#C2434F; --redSoft:#FBECEE; --orange:#C27A2C; --orangeSoft:#FBF1E5; --green:#3E9364; --greenSoft:#E8F4ED;
  --f-display:'Manrope','DM Sans',system-ui,sans-serif;
  --f-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-hand:'Caveat','Comic Sans MS',cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#F6F9FB;overflow:hidden}
body{display:grid;place-items:center;font-family:var(--f-ui);color:var(--ink)}
#vp{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#fff;-webkit-font-smoothing:antialiased}
.bg{position:absolute;inset:0}
#bgA{background:radial-gradient(circle at 50% 55%,#F4F5F6 0%,#E9ECEF 100%)}
#bgB{background:linear-gradient(180deg,#FFFFFF 0%,var(--canvas) 100%)}
.glow{position:absolute;width:1400px;height:1400px;border-radius:50%;background:radial-gradient(circle,var(--skySoft) 0%,rgba(255,255,255,0) 62%)}

/* headline */
.head{position:absolute;left:0;right:0;top:96px;height:140px;text-align:center}
.hl{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.pill{font:700 18px/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;padding:10px 18px;border-radius:999px}
.hl.ha .pill{background:#DFE3E7;color:#59656F}
.hl.hb .pill{background:var(--skySoft);color:var(--praxis)}
.ht{font:800 52px/1.1 var(--f-display);letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.ht em{font-style:normal;color:var(--praxis)}

/* ---------- vorher: chaos ---------- */
.it{position:absolute;transform-origin:50% 50%}
.note{width:290px;padding:30px 28px;font:700 40px/1.12 var(--f-hand);color:#3A3326;box-shadow:0 22px 40px -22px rgba(40,30,10,.45)}
.note:before{content:"";position:absolute;left:50%;top:-14px;width:110px;height:30px;margin-left:-55px;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.n-y{background:#FFF1A8} .n-p{background:#FBD3DA} .n-b{background:#D5ECF7} .n-g{background:#DDF1D6}
.paper{width:360px;background:#fff;border-radius:6px;padding:24px 26px;box-shadow:0 24px 50px -26px rgba(34,41,47,.5);font:600 34px/1.2 var(--f-hand);color:#2E3A44;
  background-image:repeating-linear-gradient(180deg,transparent 0 40px,#E4ECF2 40px 42px);background-position:0 18px}
.paper .k{font:700 15px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:#9AA6B0;margin-bottom:14px}
.inbox{width:420px;background:#fff;border-radius:16px;box-shadow:0 30px 60px -30px rgba(34,41,47,.5);overflow:hidden;font-family:var(--f-ui)}
.ib-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1.5px solid var(--line);font-weight:700;font-size:21px}
.ib-c{background:var(--red);color:#fff;font:700 18px/1 var(--f-ui);padding:7px 12px;border-radius:999px;font-variant-numeric:tabular-nums}
.ib-r{display:flex;gap:12px;align-items:center;padding:13px 22px;border-bottom:1.5px solid var(--surface);font-size:17px}
.ib-r b{font-weight:600;white-space:nowrap}
.ib-r span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-r i{width:9px;height:9px;border-radius:50%;background:#4F84AE;flex:none}
.chat{width:440px;display:flex;flex-direction:column;gap:12px;font-family:var(--f-ui)}
.bub{background:#fff;border-radius:20px 20px 20px 6px;padding:14px 18px;font-size:21px;line-height:1.35;box-shadow:0 16px 34px -20px rgba(34,41,47,.45)}
.bub small{display:block;font-size:14px;font-weight:700;color:#9AA6B0;margin-bottom:4px}
.bub.me{align-self:flex-end;background:#E6EBEF;border-radius:20px 20px 6px 20px}
.binder{width:250px;height:320px;border-radius:10px 16px 16px 10px;background:linear-gradient(90deg,#4E6475 0 30px,#6E8596 30px);box-shadow:0 30px 50px -26px rgba(34,41,47,.6);padding:40px 26px 0 56px;color:#fff}
.binder .lab{background:#fff;color:#2E3A44;border-radius:6px;padding:14px;font:700 22px/1.2 var(--f-ui);text-align:center}
.binder .q{font:700 120px/1 var(--f-hand);text-align:center;margin-top:24px;color:#FFE27A}
.phone{width:120px;height:120px;border-radius:32px;background:#fff;display:grid;place-items:center;color:#2E3A44;box-shadow:0 22px 40px -20px rgba(34,41,47,.5)}
.phone .dot{position:absolute;right:-8px;top:-8px;min-width:40px;height:40px;border-radius:20px;background:var(--red);color:#fff;font:700 19px/40px var(--f-ui);text-align:center;padding:0 10px}

/* ---------- nachher: praxisraum ---------- */
.col{position:absolute;top:300px;display:flex;flex-direction:column}
.eb{display:flex;align-items:center;gap:12px;font:700 26px/1 var(--f-display);letter-spacing:-.02em;margin:0 0 18px 6px}
.eb b{color:var(--praxis);font-weight:700}
.eb i{width:10px;height:10px;border-radius:50%;background:var(--praxis);opacity:.65}
.card{height:550px;display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--line);border-radius:26px;box-shadow:0 40px 90px -50px rgba(34,41,47,.35);overflow:hidden}
.w-in{margin-top:auto;border:1.5px solid var(--line);border-radius:16px;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 18px;font-size:18px;color:#9AA6B0}
.w-in i{width:42px;height:42px;border-radius:11px;background:var(--praxis);display:grid;place-items:center;color:#fff}
.av{width:44px;height:44px;border-radius:50%;background:var(--avatar);color:var(--praxis);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
.c-h{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1.5px solid var(--line);font:700 24px/1 var(--f-display);letter-spacing:-.02em}
.count{background:var(--surface);border-radius:9px;padding:4px 11px;font:600 18px/1 var(--f-ui);color:var(--muted)}
.list{padding:18px;display:flex;flex-direction:column;gap:14px}
.task{height:86px;border:2px solid var(--line);border-radius:16px;display:flex;align-items:center;gap:16px;padding:0 16px 0 22px}
.task.o{border-color:var(--orange);background:linear-gradient(100deg,var(--surface) 0%,var(--white) 70%)} .task.g{border-color:var(--green)} .task.r{border-color:var(--red)}
.t-main{flex:1;min-width:0}
.t-title{font:600 21px/1.2 var(--f-display);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-meta{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);margin-top:6px;white-space:nowrap}
.tdot{width:9px;height:9px;border-radius:50%}
.chk{width:46px;height:46px;border:1.5px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--praxis);flex:none}
.chk.ok{background:var(--green);border-color:var(--green);color:#fff}
.w-body{flex:1;padding:22px;display:flex;flex-direction:column;gap:16px}
.q{align-self:flex-end;background:var(--praxis);color:#fff;font-size:19px;line-height:1.4;padding:13px 18px;border-radius:20px 20px 6px 20px;max-width:420px}
.a{border:1.5px solid var(--line);border-radius:6px 20px 20px 20px;padding:15px 18px;font-size:19px;line-height:1.55}
.ref{border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mk{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--praxis);color:#fff;font:700 13px var(--f-display);vertical-align:2px;margin-left:4px}
.srcs{display:flex;gap:8px;align-items:center;margin-top:12px;padding-top:10px;border-top:1.5px solid var(--line);font-size:15px}
.src{display:inline-flex;gap:8px;align-items:center;background:var(--surface);border:1.5px solid transparent;border-radius:9px;padding:5px 11px 5px 6px}
.src .n{width:22px;height:22px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--praxis);font:700 12px var(--f-display);display:inline-flex;align-items:center;justify-content:center}
.m-from{display:flex;gap:12px;align-items:center;padding:18px 22px;border-bottom:1.5px solid var(--line)}
.m-from b{display:block;font-size:18px} .m-from span{font-size:15px;color:var(--muted)}
.m-subj{padding:16px 22px 0;font:700 21px/1.25 var(--f-display);letter-spacing:-.015em}
.m-draft{flex:1;display:flex;flex-direction:column;margin:16px 18px 18px;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px}
.m-dh{display:flex;justify-content:space-between;align-items:center;font:700 13px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--praxis);margin-bottom:12px}
.bdg{position:relative;width:170px;height:28px}
.bdg span{position:absolute;right:0;top:0;white-space:nowrap;font:600 14px/1 var(--f-ui);letter-spacing:0;text-transform:none;padding:7px 11px;border-radius:999px;background:var(--orangeSoft);color:var(--orange)}
.bdg span.ok{background:var(--greenSoft);color:var(--green)}
.m-text{font-size:17px;line-height:1.75;color:var(--ink)}
.fill{background:var(--greenSoft);border-radius:6px;padding:1px 6px}
.fill.open{background:var(--orangeSoft);color:var(--orange);font-weight:600;border:2px dashed var(--orange)}
.send{display:flex;justify-content:flex-end;margin-top:auto}
.send span{background:var(--praxis);color:#fff;font:600 16px/1 var(--f-ui);padding:11px 16px;border-radius:11px}
/* Früher style-Attribute im HTML und JS: hier im CSS, damit die CSP ohne 'unsafe-inline' auskommt */
.glow-a{right:-560px;bottom:-760px}.glow-b{left:-640px;top:-820px}
#aufg{left:100px;width:640px}#wiss{left:780px;width:560px}#mail{left:1380px;width:440px}
.tdot-r{background:var(--red)}.tdot-o{background:var(--orange)}.tdot-g{background:var(--green)}
@font-face{font-family:Manrope;src:url('../assets/fonts/manrope-latin-variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../assets/fonts/dm-sans-latin-variable.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}