:root{
  --bg:#faf6f0; --card:#fffdf9; --ink:#3b2f2a; --muted:#8a7b70; --line:#ece2d6;
  --accent:#c9774a; --accent2:#e3a96f; --deep:#8a5a3b;
  --kern:#5f8f6b; --verband:#c98a2b; --geteilt:#4f7fa8; --eltern:#b5566b; --gast:#7c63a8; --privat:#6b6b6b;
  --radius:16px; --shadow:0 1px 2px rgba(80,50,30,.06),0 6px 20px rgba(80,50,30,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;color:#2f2420;margin:.2em 0 .5em}
h1{font-size:26px} h2{font-size:20px} h3{font-size:16px}
a{color:var(--deep)}
.demo-banner{background:#3b2f2a;color:#f4e6d6;font-size:12px;text-align:center;padding:4px 8px}
.topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-family:Georgia,serif;font-size:20px;font-weight:600;cursor:pointer}
.logo{width:30px;height:30px}
.role-switch{display:flex;align-items:center;gap:6px;margin-left:auto;background:#f3ebe1;padding:4px;border-radius:999px;flex-wrap:wrap}
.rs-label{font-size:12px;color:var(--muted);padding:0 6px}
.role-switch button{border:0;background:transparent;padding:6px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink)}
.role-switch button small{color:var(--muted);font-size:11px;margin-left:2px}
.role-switch button.active{background:var(--card);box-shadow:var(--shadow);font-weight:600}
.ki-toggle{border:0;background:linear-gradient(135deg,var(--accent),var(--deep));color:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.ki-toggle[disabled]{opacity:.35;cursor:not-allowed}
.ctxbar{padding:8px 20px;font-size:13px;background:#f6efe5;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.ctxbar>span:last-child{flex:1}
.layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 120px)}
.layout.ki-open{grid-template-columns:220px 1fr 380px}
.sidenav{padding:18px 12px;border-right:1px solid var(--line);background:var(--card)}
.sidenav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink);margin-bottom:2px;cursor:pointer}
.sidenav a:hover{background:#f6efe5}
.sidenav a.active{background:#f3e4d5;font-weight:600;color:var(--deep)}
.sidenav .ico{width:22px;text-align:center}
.sidenav .sep{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 12px 6px}
main{padding:24px 28px;max-width:1000px;width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:999px;color:#fff;font-weight:600;white-space:nowrap}
.chip.kern{background:var(--kern)} .chip.verband{background:var(--verband)} .chip.geteilt{background:var(--geteilt)} .chip.eltern{background:var(--eltern)} .chip.gast{background:var(--gast)} .chip.privat{background:var(--privat)}
.plus{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;padding:1px 7px;border-radius:999px;background:linear-gradient(135deg,#f0c27b,#c9774a);color:#fff;vertical-align:middle;margin-left:6px}
.avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex:none}
.avatar.sm{width:28px;height:28px;font-size:11px}
.post-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.post-head .meta{font-size:12px;color:var(--muted)}
.post-head .chip{margin-left:auto}
.illu{width:100%;border-radius:12px;display:block;aspect-ratio:16/8;object-fit:cover}
.post-text{margin:10px 0}
.reactions{display:flex;gap:8px;font-size:13px;color:var(--muted);align-items:center;flex-wrap:wrap}
.reactions button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;cursor:pointer;font:inherit;font-size:13px}
.comment{font-size:13px;background:#f8f2ea;border-radius:10px;padding:6px 10px;margin-top:6px}
.btn{border:0;background:var(--accent);color:#fff;border-radius:10px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.small{padding:5px 10px;font-size:13px}
.btn.danger{background:#fff;color:var(--eltern);border:1px solid #e8c5cc}
.muted{color:var(--muted)} .small{font-size:13px}
.hidden-note{border:1px dashed #d8c9b8;border-radius:12px;padding:10px 14px;color:var(--muted);font-size:13px;background:#fbf7f1;margin-bottom:16px}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;resize:vertical;min-height:60px;background:#fff}
.composer .row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
select,input[type=text],input[type=date]{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;background:#fff}
.side-list li{margin-bottom:8px}
.side-list{padding-left:18px;margin:0}
.memory-banner{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#fbe9d7,#f6dcc4);border:0}
.memory-banner img{width:140px;border-radius:10px}
.album{cursor:pointer}
.album img{width:100%;border-radius:12px;aspect-ratio:4/3;object-fit:cover;display:block}
.album .t{font-weight:600;margin-top:6px}
.timeline{position:relative;margin-left:14px;border-left:2px solid var(--line);padding-left:22px}
.tl-year{font-family:Georgia,serif;font-size:20px;font-weight:700;color:var(--deep);margin:14px 0 6px -36px;background:var(--bg);display:inline-block;padding:2px 8px;border-radius:8px}
.tl-item{position:relative;margin-bottom:12px}
.tl-item:before{content:"";position:absolute;left:-29px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--accent2);border:2px solid #fff}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit;font-size:13px}
.tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tree-wrap{overflow:auto;background:#fffdf9;border-radius:var(--radius);border:1px solid var(--line)}
.tree-node{cursor:pointer}
.tree-node:hover rect{stroke:var(--accent);stroke-width:2}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-top:8px}
.legend span:before{content:"";display:inline-block;width:18px;height:0;border-top:2px solid #b39a86;margin-right:5px;vertical-align:middle}
.legend .dash:before{border-top-style:dashed}
.legend .hh:before{border-top:8px solid rgba(95,143,107,.18);}
.story{display:flex;gap:12px;align-items:flex-start}
.audio{display:flex;align-items:center;gap:10px;background:#f6efe5;border-radius:999px;padding:6px 12px;margin-top:8px;font-size:13px}
.audio .play{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;border:0;cursor:pointer}
.wave{flex:1;height:20px;background:repeating-linear-gradient(90deg,#d9b99d 0 2px,transparent 2px 5px);border-radius:4px;opacity:.8}
.cal-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.layers{display:flex;gap:8px;flex-wrap:wrap}
.layers label{display:flex;align-items:center;gap:6px;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.layers .dot{width:10px;height:10px;border-radius:50%}
.cal{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;margin-top:12px}
.cal .dow{background:#f6efe5;font-size:12px;font-weight:600;padding:6px;text-align:center;color:var(--muted)}
.cal .day{min-height:88px;border-top:1px solid var(--line);border-left:1px solid var(--line);padding:4px;font-size:12px}
.cal .day:nth-child(7n+1){border-left:0}
.cal .day.out{background:#fbf8f4;color:#cbbcae}
.cal .day.today{background:#fff4e8}
.cal .num{font-weight:600;font-size:12px}
.ev{display:block;color:#fff;border-radius:6px;padding:1px 5px;margin-top:2px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.kern{background:var(--kern)} .ev.verband{background:var(--verband)} .ev.geteilt{background:var(--geteilt)} .ev.eltern{background:var(--eltern)} .ev.gast{background:var(--gast)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600}
.matrix td,.matrix th{text-align:center}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.yes{color:var(--kern);font-weight:700} .no{color:#cbb} .part{color:var(--verband);font-weight:700}
.gift{border-left:4px solid var(--verband)}
.secret{background:repeating-linear-gradient(45deg,#fbf3e8,#fbf3e8 10px,#f7ead9 10px,#f7ead9 20px)}
.progress{height:8px;background:#f0e6da;border-radius:999px;overflow:hidden;margin:6px 0}
.progress div{height:100%;background:var(--accent)}
.rsvp{display:flex;gap:6px;flex-wrap:wrap}
.emergency{border:2px solid #e9b7a5}
.emergency h2{color:#a4472f}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0}
.big-phone{font-size:20px;font-weight:700;color:#a4472f;text-decoration:none}
.linkbox{display:flex;gap:8px;align-items:center;background:#f6efe5;border-radius:10px;padding:10px;font-family:ui-monospace,monospace;font-size:14px;flex-wrap:wrap}
.guest-hero{background:linear-gradient(135deg,#ece4f6,#f6efe5);border:0}
/* KI */
.ki-panel{display:none;border-left:1px solid var(--line);background:#fffaf4;padding:16px;flex-direction:column;gap:10px;position:sticky;top:96px;height:calc(100vh - 96px);overflow:auto}
.layout.ki-open .ki-panel{display:flex}
.ki-head{display:flex;justify-content:space-between;align-items:center}
.ki-scope{font-size:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--muted)}
.msg{border-radius:14px;padding:10px 12px;font-size:14px;max-width:95%}
.msg.user{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.ai{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.sources{font-size:12px;margin-top:8px;color:var(--muted)}
.sources a{display:inline-block;background:#f6efe5;border-radius:6px;padding:1px 6px;margin:2px 3px 0 0;text-decoration:none;font-size:12px}
.action-card{border:2px solid var(--accent2);border-radius:14px;background:#fff;padding:12px;font-size:13px}
.action-card .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.action-card .btns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.action-card.done{border-color:var(--kern)}
.action-card.dropped{border-color:#ddd;opacity:.7}
.suggest{display:flex;flex-wrap:wrap;gap:6px}
.suggest button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.ki-input{display:flex;gap:6px;margin-top:auto}
.ki-input input{flex:1}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;z-index:50}
.toast.show{opacity:1}
.log td{font-family:ui-monospace,monospace;font-size:12px}
.agent{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.agent .ai-ico{width:38px;height:38px;border-radius:10px;background:#efe3f7;display:flex;align-items:center;justify-content:center;font-size:18px}
.scope{display:inline-block;font-family:ui-monospace,monospace;font-size:11px;background:#f3ebe1;border-radius:6px;padding:1px 6px;margin:2px 2px 0 0}
@media (max-width:900px){
  .layout,.layout.ki-open{grid-template-columns:1fr}
  .sidenav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;overflow-x:auto;padding:6px;border-right:0;border-top:1px solid var(--line)}
  .sidenav a{flex-direction:column;gap:0;font-size:10px;padding:6px 8px;min-width:64px;text-align:center;margin:0}
  .sidenav .sep{display:none}
  main{padding:14px 12px 90px}
  .grid2,.grid3{grid-template-columns:1fr}
  .role-switch{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;border-radius:12px}
  .role-switch button{white-space:nowrap}
  .rs-label{display:none}
  .topbar{padding:8px 12px;gap:8px}
  .ki-toggle{position:absolute;right:12px;top:8px}
  .ki-panel{position:fixed;inset:0;top:auto;height:75vh;z-index:40;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.15)}
  .cal .day{min-height:56px}
  .cal .ev{font-size:9px}
  .kv{grid-template-columns:1fr}
  .memory-banner img{width:90px}
}