:root{
    --ink:#161311; --cream:#F7F2EA; --sand:#E3D9C9; --sand-line:#D8CDBA;
    --sage:#8E9E82; --clay:#C68A6A; --muted:#6E655A;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:var(--cream);font-family:'Inter',sans-serif;color:var(--ink);font-size:15px;line-height:1.6;}
  h1,h2,h3,.serif{font-family:'Fraunces',serif;font-weight:500;line-height:1.25;}
  em{font-family:'Fraunces',serif;font-style:italic;}
  .muted{color:var(--muted);} .small{font-size:13px;}
  button{font-family:'Inter',sans-serif;cursor:pointer;}
  .mark{font-family:'Fraunces',serif;letter-spacing:.12em;white-space:nowrap;}
  .mark .bars{font-weight:600;}
  /* ---------- Topbar ---------- */
  .topbar{
    position:sticky;top:0;z-index:20;background:rgba(247,242,234,.95);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--sand-line);
    display:flex;align-items:center;gap:18px;padding:14px 22px;
  }
  .topbar .mark{font-size:16px;cursor:pointer;}
  .topbar .tnav{display:flex;gap:14px;margin-left:8px;}
  .topbar .tnav button{
    background:none;border:none;font-size:13px;color:var(--ink);opacity:.7;padding:4px 2px;
    border-bottom:2px solid transparent;
  }
  .topbar .tnav button.active{opacity:1;border-bottom-color:var(--sage);font-weight:600;}
  .topbar .prog{margin-left:auto;font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
  /* ---------- Layout ---------- */
  .wrap{max-width:680px;margin:0 auto;padding:36px 22px 90px;}
  .card{background:#FDFAF4;border:1px solid var(--sand-line);border-radius:10px;padding:26px 28px;margin-bottom:18px;}
  .kicker{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:10px;}
  .btn{
    display:inline-block;background:var(--ink);color:var(--cream);border:none;border-radius:999px;
    padding:11px 26px;font-size:14px;font-weight:600;
  }
  .btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink);font-weight:500;}
  .btn.done{background:var(--sage);}
  /* ---------- Tracker ---------- */
  .tracker{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;}
  .tgroup{display:flex;gap:2.5px;}
  .tick{width:4px;height:18px;background:var(--sand-line);border-radius:1px;cursor:pointer;border:none;padding:0;}
  .tick.on{background:var(--ink);}
  .tick.now{background:var(--clay);}
  .tracklabel{text-align:center;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
  /* ---------- Phasen ---------- */
  .phaserow{display:flex;gap:12px;}
  .phasecard{flex:1;border:1px solid var(--sand-line);border-radius:10px;padding:14px 16px;background:#FDFAF4;}
  .phasecard h3{font-size:15px;margin-bottom:2px;}
  .phasecard .small{margin:0;}
  .phasecard.active{border:2px solid var(--sage);background:rgba(195,207,180,.16);}
  .phasecard.pdone{opacity:.7;}
  .phasecard .here{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:600;display:block;margin-bottom:4px;}
  .phasecard .stand{font-size:12px;color:var(--sage);font-weight:600;margin:5px 0 0;}
  /* ---------- Tagesansicht ---------- */
  .dayhead{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
  .dayhead .day{font-family:'Fraunces',serif;font-size:22px;}
  .phase{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);border:1px solid var(--sage);border-radius:999px;padding:3px 10px;font-weight:600;}
  .phase.clay{color:var(--clay);border-color:var(--clay);}
  .dayline{font-family:'Fraunces',serif;font-style:italic;color:var(--muted);font-size:17px;margin-bottom:22px;}
  .navrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
  .navrow .arrows{display:flex;gap:8px;}
  .navrow button{background:none;border:1px solid var(--sand-line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--ink);}
  .navrow button:disabled{opacity:.35;cursor:default;}
  .blocktitle{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:10px;}
  .blocktitle .hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:12px;}
  .block{margin-bottom:20px;}
  /* Barometer klickbar */
  .baro{display:flex;gap:4px;}
  .bzone{flex:1;border-radius:6px;padding:10px 4px 8px;text-align:center;border:2px solid transparent;background-clip:padding-box;cursor:pointer;}
  .bzone .dot{width:15px;height:15px;border:1.5px solid rgba(22,19,17,.5);border-radius:50%;margin:0 auto 5px;background:rgba(247,242,234,.6);}
  .bzone b{display:block;font-size:10.5px;font-weight:600;}
  .bzone.sel{border-color:var(--ink);}
  .bzone.sel .dot{background:var(--ink);border-color:var(--ink);}
  .bz-a{background:#E4B69E;} .bz-b{background:#F0DECC;} .bz-c{background:#C3CFB4;}
  /* Tools klickbar */
  .symrow{display:flex;gap:7px;}
  .sym{flex:1;text-align:center;border:1px solid var(--sand-line);border-radius:8px;padding:9px 4px 7px;cursor:pointer;border-width:2px;}
  .sym .glyph{font-family:'Fraunces',serif;font-size:15px;font-weight:600;display:block;margin-bottom:2px;letter-spacing:.05em;}
  .sym small{font-size:8.5px;color:var(--muted);display:block;line-height:1.3;}
  .sym .st{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:3px;font-weight:600;}
  .sym.sa{background:rgba(228,182,158,.28);}
  .sym.sb{background:rgba(240,222,204,.35);}
  .sym.sc{background:rgba(195,207,180,.32);}
  .sym.sel{border-color:var(--ink);}
  .media{border:1px dashed var(--sage);border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:8px;}
  .media b{color:var(--ink);font-weight:600;}
  /* Prompt / Notizbuch-Box */
  .promptcard{background:#FDFAF4;border:1px solid var(--sand-line);border-left:3px solid var(--sage);border-radius:10px;padding:22px 24px;margin-bottom:20px;}
  .promptcard h2{font-size:21px;margin-bottom:8px;}
  .promptcard p{color:var(--muted);font-size:14.5px;}
  .notebook{
    background:var(--sand);border-radius:8px;padding:12px 16px;font-size:12.5px;color:var(--ink);
    display:flex;gap:10px;align-items:center;margin-top:14px;
  }
  .notebook .ic{font-size:16px;}
  .refl .q{margin-bottom:14px;padding-left:14px;border-left:2px solid var(--sand-line);}
  .refl .q p{font-size:14.5px;margin:0;}
  .permission{background:#F1EADC;border-left:3px solid var(--clay);border-radius:0 8px 8px 0;padding:12px 16px;font-size:13px;margin-bottom:18px;}
  .doneline{font-family:'Fraunces',serif;font-style:italic;color:var(--sage);font-size:15px;margin-top:12px;}
  .footer-note{max-width:680px;margin:0 auto;padding:0 22px 40px;font-size:11px;color:var(--muted);text-align:center;}
  .introblock h2{font-size:22px;margin-bottom:10px;}
  .introblock{margin-bottom:8px;}
  .state{border-left:2px solid var(--sand-line);padding:2px 0 2px 14px;margin-bottom:12px;}
  .state h3{font-size:15px;margin-bottom:1px;}
  .state p{font-size:13px;margin:0;}
  /* ---------- Mobil ---------- */
  @media(max-width:520px){
    .wrap{padding:22px 13px 70px;}
    .card{padding:20px 16px;}
    .phaserow{flex-direction:column;}
    .topbar{padding:12px 14px;gap:10px;}
    .topbar .tnav{gap:10px;}
    .topbar .prog{font-size:10px;}
    .navrow button{font-size:12px;padding:5px 10px;}
    .navrow .nl{display:none;}
    .dayhead .day{font-size:19px;}
    .dayline{font-size:15.5px;}
    .promptcard h2{font-size:19px;}
    .bzone b{font-size:9px;}
    .sym small{font-size:8px;}
    .tick{width:3px;height:15px;}
    .tracker{gap:5px;}
  }