:root{
    /* Paper-Cut-Palette: Wald, Ton, Sand, Creme */
    --tann:#3C4A3B;        --tann-tief:#2C382C;   --tann-hell:#6C7F68;
    --ton:#B0553A;         --ton-hell:#C97A5E;
    --sand:#DCC9A9;        --sand-hell:#EADCC6;
    --taupe:#93826C;
    --creme:#F5F0E8;       --papier:#FBF8F3;
    --tinte:#22261F;       --tinte-weich:#5A6155;
    --linie:#E2D9CB;

    --serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
    --lese:"Lora",Georgia,serif;
    --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

    --breit:1180px;
    --schmal:760px;
    --rund:18px;
    --schatten:0 1px 2px rgba(34,38,31,.04), 0 12px 32px -18px rgba(34,38,31,.28);
  }

  :root{
    --ink:var(--tinte);
    --wald:var(--tann);  --wald-hell:var(--tann-hell);
    --amber:var(--ton);  --clay:var(--taupe); --rot:#9A3B34;
    --card:var(--papier); --line:var(--linie); --line-strong:#CDBFA8; --grey:#8A8A80;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; padding:0;}
  body{
    font-family:var(--sans); background:var(--creme); color:var(--ink);
    min-height:100vh; overflow-x:hidden;
  }
  .serif{font-family:var(--serif);}
  a{color:var(--wald);}

.av{position:relative;overflow:hidden;flex:none;width:var(--av-size,36px);height:var(--av-size,36px);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12);letter-spacing:.02em}.av.lg{--av-size:44px}.av.mini{--av-size:32px;font-size:10.5px;box-shadow:none}.av.sm{--av-size:30px}.av.xs{--av-size:26px;font-size:10.5px}.av.c0{background:#2F5D50}.av.c1{background:#B0642A}.av.c2{background:#93826C}.av.c3{background:#6C7F68}.av.c4{background:#A63A2B}.av.c5{background:#5C4A3A}.av-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.av-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.av.open{background:transparent;color:#7A766C;border:2px dashed #C9C2B4;box-shadow:none}

  .als-banner{position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; padding:6px 12px; min-height:38px;
    background:var(--amber); color:#fff; font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden;}
  .als-banner .als-text{min-width:0; overflow:hidden; text-overflow:ellipsis;}
  @media (max-width:480px){ .als-banner{font-size:12px; gap:8px; padding:5px 10px; min-height:34px;} .als-banner button{font-size:11.5px; padding:3px 10px;} }
  .als-banner b{font-weight:600;} .als-banner button{flex:none; font:inherit; font-size:12.5px; padding:4px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff; cursor:pointer; white-space:nowrap;}
  .als-banner button:hover{background:rgba(255,255,255,.16);}


  .td-zeile{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 14px 11px 10px; margin-bottom:8px; transition:opacity .15s;}
  .td-zeile.done{opacity:.55;} .td-zeile.done .td-titel{text-decoration:line-through; color:var(--wald);}
  .td-zeile.wait{opacity:.6;}
  .td-zeile.aktiv{border-color:var(--line-strong); box-shadow:0 10px 26px -16px rgba(60,74,59,.35);}
  .td-check{flex:none; width:30px; height:30px; border-radius:50%; border:2px solid var(--line); background:var(--card); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .12s, border-color .12s;}
  .td-check svg{width:16px; height:16px;} .td-check:not(.on) svg{opacity:0;}
  .td-check.on{background:var(--wald); border-color:var(--wald);}
  .td-check[disabled]{cursor:default; border-style:dashed; opacity:.6;}
  .td-zeile.open .td-check:not([disabled]):hover, .td-zeile.open .td-check:not([disabled]):active{border-color:var(--line-strong); background:#E4EADF;}
  .td-main{flex:1; min-width:0;}
  .td-titel{font-size:clamp(15px,3.8vw,16.5px); color:var(--ink); line-height:1.3;}
  .td-sub{font-size:12.5px; color:var(--grey); margin-top:2px; line-height:1.4;}
  .td-sub .wartet{font-style:italic;}
  .td-zeile .td-wer{font-size:11px; padding:3px 9px; border-radius:20px; background:var(--creme); color:var(--clay); border:1px solid var(--line); white-space:nowrap; letter-spacing:.04em;}
  /* the person: the same face as in Skillify – initials on a stable brand tone, the name below; nobody = the team */
  .td-face{flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; width:54px;}
  .td-face-name{font-size:10px; color:var(--clay); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .td-due{flex:none; font-size:11px; padding:2px 9px; border-radius:20px; background:var(--creme); color:var(--clay); border:1px solid var(--line); white-space:nowrap;}
  .td-due.over{background:#F3E4DF; color:var(--rot); border-color:transparent; font-weight:600;}
  /* A TAG LOOKS THE SAME WHEREVER IT IS READ – the same badge the task list draws (wi-tag), so the widget on the
     home screen and the full list are plainly the same thing. It was a run of #hashtags here and a pill there. */
  .td-tags{display:inline-flex; flex-wrap:wrap; gap:4px; vertical-align:middle;}
  .td-tag{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; padding:2px 8px; border-radius:999px; background:#EDF2EC; color:#2F5D50; border:1px solid rgba(47,93,80,.18); white-space:nowrap;}
  .td-zeile .td-status{font-size:11px; padding:4px 11px; border-radius:20px; letter-spacing:.06em; font-weight:500; white-space:nowrap;}
  .td-status.offen{background:var(--sand-hell); color:var(--clay);} .td-status.wartet{background:var(--creme); color:var(--grey);}
  .td-status.erledigt{background:#E4EADF; color:var(--wald);} .td-status.uebersprungen{background:var(--creme); color:var(--grey);}
  .td-skill{font-size:10.5px; padding:2px 8px; border-radius:20px; background:var(--sand-hell); color:var(--clay); white-space:nowrap; margin-left:6px; vertical-align:2px;}
  /* Emphasized: a skill todo that is actionable now – the button IS the todo. */
  .td-betont{display:block; width:100%; border:none; border-radius:16px; padding:18px; font-size:clamp(18px,5vw,22px); font-weight:600; color:#fff; cursor:pointer; margin:4px 0 12px; letter-spacing:.3px; font-family:var(--sans); text-align:center;}
  .td-betont.in{background:var(--wald);} .td-betont.in:active{background:#2f4a34;}
  .td-betont.out{background:var(--clay);} .td-betont.out:active{background:#725a30;}
  .td-betont.neutral{background:var(--amber);}
  .td-betont[disabled]{opacity:.55;}
  @media (max-width:560px){ .td-zeile .td-wer, .td-zeile .td-face-name{display:none;} .td-face{width:auto;} }


  .app-pill{position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:61;
    display:flex; align-items:center; gap:10px; padding:4px 10px; height:52px; border-radius:999px; background:var(--card); border:1px solid var(--line);
    box-shadow:0 16px 40px -14px rgba(34,38,31,.45);}
  .pill-btn{position:relative; width:44px; height:44px; border-radius:50%; border:none; background:transparent; color:var(--wald); cursor:pointer;
    display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .12s, transform .12s;}
  .pill-btn:hover{background:var(--creme);} .pill-btn:active{transform:scale(.94);}
  .pill-btn svg{width:23px; height:23px;}
  .pill-btn.pill-chat{width:68px; height:68px; margin:-12px 2px; background:var(--wald); color:#fff; box-shadow:0 12px 28px -10px rgba(60,74,59,.75), 0 0 0 4px var(--creme);}
  .pill-btn.pill-chat:hover{background:var(--wald-hell, var(--wald));} .pill-btn.pill-chat svg{width:32px; height:32px;}
  .pill-badge{position:absolute; top:2px; right:0; min-width:20px; padding:1px 6px; border-radius:999px;
    background:var(--amber); color:#fff; font-size:11.5px; font-weight:700; text-align:center; font-family:var(--sans); box-shadow:0 0 0 2px var(--card);}
  body:has(.app-pill:not([hidden])){padding-bottom:100px;}
  .app-pill[hidden], .pill-badge[hidden], .ki-flag[hidden], .pill-konto[hidden]{display:none;}
  /* the account: THE face (core/face.ts, .av.mini) in the bar; the list opens above it */
  .pill-face{display:flex;}
  .pill-who.als .av{background:var(--amber); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--amber);}
  .pill-konto{position:fixed; left:50%; bottom:calc(78px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:62; width:min(320px, calc(100vw - 24px)); max-height:min(60vh, 460px); display:flex; flex-direction:column;
    background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 60px -18px rgba(34,38,31,.5); overflow:hidden; font-family:var(--sans);}
  .pk-rolle-kopf{padding:10px 16px 4px; font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);}
  .pk-wartet{margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--amber); color:#FFF3EA; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
  .pk-kopf{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line);} .pk-kopf.als .av{background:var(--amber);}
  .pk-name{font-size:15px; font-weight:600; color:var(--ink);} .pk-rolle{font-size:12px; color:var(--clay);}
  .pk-zurueck{margin:10px 12px 0; padding:9px 12px; border-radius:12px; border:none; background:var(--amber); color:#fff; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;}
  .pk-titel{padding:12px 16px 4px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--grey);}
  .pk-liste{overflow-y:auto; padding:2px 8px 8px;}
  .pk-person{display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:none; border-radius:12px; background:none; font:inherit; text-align:left; cursor:pointer; color:var(--ink);} .pk-person:hover{background:var(--creme);}
  .pk-person small{display:block; font-size:11.5px; color:var(--clay);}
  .pk-fuss{display:flex; border-top:1px solid var(--line);} .pk-fuss a{flex:1; padding:11px 16px; font-size:13px; color:var(--wald); text-decoration:none; text-align:center;} .pk-fuss a:hover{background:var(--creme);}
  /* Flag above the pill: the AI is answering over the fallback provider (or is off) – everyone sees it. */
  .ki-flag{position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:35; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:999px; background:var(--card); border:1px solid var(--line); color:var(--clay); white-space:nowrap; box-shadow:0 8px 24px -14px rgba(34,38,31,.45);}
  .ki-flag.aus{color:var(--rot); border-color:rgba(176,85,58,.35);}
  /* The push question: one card above the bar, once per device, after login or signup. */
  .push-frage{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; width:min(380px, calc(100vw - 24px));
    background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px 16px 12px; box-shadow:0 24px 60px -18px rgba(34,38,31,.5); font-family:var(--sans);}
  .push-frage[hidden]{display:none;}
  .push-frage h4{margin:0 0 4px; font-size:15px; font-weight:600; color:var(--ink);}
  .push-frage p{margin:0 0 10px; font-size:13px; line-height:1.4; color:var(--clay);}
  .push-frage .pf-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
  .push-frage button{border:1px solid var(--line); background:var(--card); color:var(--wald); border-radius:999px; padding:8px 14px; font:inherit; font-size:13px; cursor:pointer;}
  .push-frage button:hover{border-color:var(--line-strong);}
  .push-frage button.pf-ja{background:var(--wald); color:#fff; border-color:var(--wald); font-weight:600;}
  .push-frage button.pf-nie{margin-left:auto; border:none; color:var(--grey);}
  .push-frage .pf-stand{font-size:12px; color:var(--rot); margin-top:6px; min-height:0;}