/* ===== Check — Abhak-Tracker (mobil zuerst) =====
   Gleiche Farbwelt wie Akajajo/Imposta: fast schwarz, kräftiges Blau,
   goldene Akzente, Oswald. Farben laufen ausschließlich über Variablen,
   damit der helle Modus überall mitwandert. Gold ist Akzent, nie Fläche.
   Als tägliche Utility gibt es hier bewusst auch einen hellen Modus. */
:root{
  --bg:#080a14;
  --surface:#12151f;
  --surface-2:#1a1e2b;
  --border:#2a2f40;
  --text:#f3f5fa;
  --text-dim:#9aa0b4;
  --text-faint:#666c80;
  --accent:#1c4fd0;
  --accent-2:#2a5ee0;
  --accent-rgb:47,102,224;
  --accent-text:#8fb0ff;
  --accent-ink:#ffffff;
  --gold:#e8c268;
  --gold-rgb:232,194,104;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Oswald",var(--font);

  --glow:rgba(var(--accent-rgb),.16);
  --card-bg:linear-gradient(180deg,#141824,#0d1019);
  --inset-hi:rgba(255,255,255,.04);
  --wordmark-a:#f0d488;
  --wordmark-b:#cf9b3a;
  --hover:rgba(255,255,255,.06);
  --placeholder:#5c6072;
  --overlay:rgba(4,6,12,.66);
}

/* ---------- Heller Modus ---------- */
:root[data-theme="light"]{
  --bg:#f6f4f1;
  --surface:#ffffff;
  --surface-2:#eef0f4;
  --border:#dde0e7;
  --text:#161922;
  --text-dim:#63697a;
  --text-faint:#9aa0b4;
  --accent:#1d4ed8;
  --accent-2:#2f6bef;
  --accent-rgb:29,78,216;
  --accent-text:#1a45b8;
  --accent-ink:#ffffff;
  --gold:#a97e1c;
  --gold-rgb:169,126,28;
  --shadow:0 18px 45px rgba(30,45,90,.14);

  --glow:rgba(var(--accent-rgb),.13);
  --card-bg:linear-gradient(180deg,#ffffff,#eef1f6);
  --inset-hi:rgba(255,255,255,.8);
  --wordmark-a:#b9892a;
  --wordmark-b:#946417;
  --hover:rgba(0,0,0,.05);
  --placeholder:#9aa0b4;
  --overlay:rgba(20,26,40,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 560px at 50% -12%, var(--glow), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  transition:background-color .18s, color .18s;
}
[hidden]{display:none !important}
button{font-family:inherit}

/* ---------- Header-Buttons ---------- */
.head-actions{display:flex;align-items:center;gap:.45rem}
.icon-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  font-size:1rem;cursor:pointer;color:var(--text);
  transition:border-color .15s, transform .1s, color .15s;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent-text)}
.icon-btn:active{transform:translateY(1px)}
.icon-btn .ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- App-Rahmen ---------- */
.wrap{
  max-width:520px;margin:0 auto;
  padding:calc(1.3rem + env(safe-area-inset-top)) 1rem calc(6.5rem + env(safe-area-inset-bottom));
}

/* ---------- Kopf ---------- */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin:.2rem 0 1.15rem;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:700;font-size:1.9rem;line-height:1;letter-spacing:.22em;
  padding-left:.22em;
  background:linear-gradient(90deg,var(--wordmark-a),var(--wordmark-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.userchip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text-dim);border-radius:999px;
  padding:.4rem .65rem;font-size:.8rem;cursor:pointer;
  transition:border-color .15s,color .15s;max-width:32vw;
}
.userchip:hover{border-color:var(--accent);color:var(--accent-text)}
.userchip .u-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.userchip .u-ico{opacity:.7;font-size:.9rem}

/* ---------- Ansichts-Umschalter ---------- */
.segment{
  display:grid;grid-template-columns:1fr 1fr;gap:.3rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:.28rem;margin-bottom:1.1rem;
}
.segment button{
  border:none;background:transparent;color:var(--text-dim);
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.6rem;border-radius:999px;cursor:pointer;transition:.15s;
}
.segment button.active{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);box-shadow:0 6px 16px rgba(var(--accent-rgb),.35);
}

/* ---------- Datums-Navigation ---------- */
.datenav{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.9rem;
}
.datenav .nav-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--accent-text);font-size:1.15rem;cursor:pointer;transition:.15s;
}
.datenav .nav-btn:hover{border-color:var(--accent)}
.datenav .nav-btn:active{transform:translateY(1px)}
.datenav .nav-center{flex:1;text-align:center;min-width:0}
.datenav .nav-title{
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  letter-spacing:.02em;line-height:1.15;
}
.datenav .nav-sub{
  display:inline-block;margin-top:.15rem;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-text);cursor:pointer;
  border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;
  transition:.15s;
}
.datenav .nav-sub:hover{border-color:var(--accent)}
.datenav .nav-sub.today{color:var(--text-faint);border-color:transparent;pointer-events:none}

/* ---------- Task-Liste ---------- */
.tasklist{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.task{
  display:flex;align-items:center;gap:.8rem;
  background:var(--card-bg);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:.85rem .95rem;
  box-shadow:0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 var(--inset-hi);
  transition:border-color .15s, opacity .2s, transform .1s;
  animation:rise .28s ease both;
}
.task:active{transform:scale(.995)}
.task.done{opacity:.5;order:2}
.task.open{order:1}

/* Rundes Häkchen */
.check{
  flex:none;width:26px;height:26px;border-radius:999px;
  border:2px solid var(--border);background:transparent;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:.15s;position:relative;
}
.check:hover{border-color:var(--accent)}
.check svg{width:15px;height:15px;stroke:var(--accent-ink);stroke-width:3.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.5);transition:.15s}
.task.done .check{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  border-color:transparent;box-shadow:0 4px 12px rgba(var(--accent-rgb),.4);
}
.task.done .check svg{opacity:1;transform:scale(1)}

.task-main{flex:1;min-width:0;cursor:pointer}
.task-title{font-size:1rem;line-height:1.25;word-break:break-word}
.task.done .task-title{text-decoration:line-through;color:var(--text-dim)}
.task-meta{
  display:flex;align-items:center;gap:.4rem;margin-top:.2rem;
  font-size:.72rem;color:var(--text-faint);
}
.badge{
  display:inline-flex;align-items:center;gap:.28rem;
  border-radius:999px;padding:.1rem .5rem;font-size:.68rem;letter-spacing:.04em;
  border:1px solid var(--border);color:var(--text-dim);
}
.badge.repeat{color:var(--accent-text);border-color:rgba(var(--accent-rgb),.35);
  background:rgba(var(--accent-rgb),.08)}
.badge.wish{color:var(--gold);border-color:rgba(var(--gold-rgb),.4);
  background:rgba(var(--gold-rgb),.08)}

/* Zeilen-Aktion (auf heute holen / löschen sitzen im Editor) */
.task-act{
  flex:none;border:none;background:transparent;color:var(--text-faint);
  font-size:1.15rem;cursor:pointer;padding:.25rem .3rem;line-height:1;
  border-radius:8px;transition:.15s;
}
.task-act:hover{color:var(--accent-text);background:var(--hover)}

/* ---------- Abschnitts-Kopf ---------- */
.section{margin-top:1.6rem}
.section-title{
  font-family:var(--font-display);font-weight:600;
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;
}
.section-title .count{
  font-size:.7rem;color:var(--text-faint);border:1px solid var(--border);
  border-radius:999px;padding:.02rem .45rem;letter-spacing:.02em;
}

/* ---------- Goldener Plus-Knopf (FAB, wie Akajajo .tab-plus) ----------
   Gold ist sonst nie Buttonfläche — beim Plus-Knopf ist die Ausnahme
   bewusst, genau wie in der Freunde-App. Dunkle Tinte, weil Weiß auf Gold
   nicht lesbar wäre. */
.fab{
  position:fixed;z-index:30;
  right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  font-size:2rem;line-height:1;color:#1c1500;
  background:linear-gradient(135deg,#f3da88,var(--gold));
  box-shadow:0 8px 22px rgba(var(--gold-rgb),.5);
  display:grid;place-items:center;
  transition:transform .1s, box-shadow .15s;
}
.fab:hover{box-shadow:0 10px 28px rgba(var(--gold-rgb),.62)}
.fab:active{transform:translateY(1px)}

/* ---------- Auswahl-Kacheln (Einmalig / Ohne Datum) ---------- */
.choice{
  display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.9rem 1rem;margin-bottom:.6rem;cursor:pointer;color:var(--text);transition:.15s;
}
.choice:hover{border-color:var(--accent)}
.choice:active{transform:translateY(1px)}
.choice-ic{font-size:1.5rem;flex:none;line-height:1}
.choice-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.choice-txt b{font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:.02em}
.choice-txt small{font-size:.78rem;color:var(--text-dim)}
.choice-cancel{width:100%;margin-top:.3rem}

/* ---------- Woche (Agenda) ---------- */
.agenda-day{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);margin-bottom:.7rem;overflow:hidden;
  animation:rise .28s ease both;
}
.agenda-head{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.7rem .95rem;border-bottom:1px solid var(--border);
  cursor:pointer;
}
.agenda-day.is-today{border-color:rgba(var(--accent-rgb),.5)}
.agenda-day.is-today .agenda-head{background:rgba(var(--accent-rgb),.08)}
.agenda-dow{
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.04em;
}
.agenda-day.is-today .agenda-dow{color:var(--accent-text)}
.agenda-date{font-size:.8rem;color:var(--text-faint)}
.agenda-badge{margin-left:auto;font-size:.72rem;color:var(--text-faint)}
.agenda-body{padding:.6rem .7rem .7rem}
.agenda-body .tasklist{gap:.4rem}
.agenda-body .task{padding:.6rem .7rem;border-radius:var(--radius-sm);box-shadow:none}
.agenda-empty{
  padding:.35rem .3rem .2rem;color:var(--text-faint);font-size:.85rem;
}
.agenda-add{
  margin-top:.45rem;width:100%;background:transparent;border:none;
  color:var(--text-faint);font-size:.82rem;padding:.35rem;cursor:pointer;
  border-radius:8px;transition:.15s;text-align:left;
}
.agenda-add:hover{color:var(--accent-text);background:var(--hover)}

/* ---------- Leerer Zustand ---------- */
.empty{
  text-align:center;color:var(--text-faint);font-size:.92rem;
  padding:1.4rem .5rem;line-height:1.5;
}
.empty .em-ico{font-size:1.6rem;display:block;margin-bottom:.3rem;opacity:.7}

/* ---------- Modal / Bottom-Sheet ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;background:var(--overlay);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;opacity:0;pointer-events:none;transition:opacity .18s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.overlay.show{opacity:1;pointer-events:auto}
.sheet{
  width:100%;max-width:520px;
  background:var(--surface);border:1px solid var(--border);
  border-bottom:none;border-radius:20px 20px 0 0;
  padding:1.1rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom));
  box-shadow:var(--shadow);
  transform:translateY(16px);transition:transform .2s;
}
.overlay.show .sheet{transform:translateY(0)}
@media(min-width:560px){
  .overlay{align-items:center;padding:1rem}
  .sheet{border-radius:20px;border-bottom:1px solid var(--border);transform:translateY(24px) scale(.98)}
  .overlay.show .sheet{transform:none}
}
.sheet-grip{width:38px;height:4px;border-radius:999px;background:var(--border);
  margin:0 auto .9rem}
.sheet h2{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem;
}

.field{margin-bottom:1rem}
.field label{display:block;font-size:.78rem;color:var(--text-dim);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.45rem}
.text-input{
  width:100%;padding:.8rem .9rem;
  border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font-size:1.05rem;outline:none;transition:.15s;
}
.text-input::placeholder{color:var(--placeholder)}
.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}

/* Toggle-Zeile (Wiederholung) */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem 0;
}
.toggle-row .t-label{font-size:.98rem}
.toggle-row .t-sub{font-size:.75rem;color:var(--text-faint);margin-top:.12rem}
.toggle{
  width:50px;height:29px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border);position:relative;cursor:pointer;flex:none;
  transition:.18s;
}
.toggle .knob{
  position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:999px;
  background:var(--text-dim);transition:.18s;
}
.toggle[aria-checked="true"]{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent}
.toggle[aria-checked="true"] .knob{left:23px;background:#fff}

/* Wochentage */
.weekdays{display:flex;gap:.35rem;margin-top:.2rem}
.wd{
  flex:1;padding:.55rem 0;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-dim);font-size:.82rem;font-weight:600;cursor:pointer;
  text-align:center;transition:.13s;user-select:none;
}
.wd:hover{border-color:var(--accent)}
.wd.on{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);border-color:transparent;
  box-shadow:0 4px 12px rgba(var(--accent-rgb),.32);
}
.wd-quick{margin-top:.55rem;display:flex;gap:.4rem}
.wd-quick button{
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  border-radius:999px;padding:.3rem .7rem;font-size:.75rem;cursor:pointer;transition:.15s;
}
.wd-quick button:hover{border-color:var(--accent);color:var(--accent-text)}

/* Sheet-Buttons */
.sheet-actions{display:flex;gap:.6rem;margin-top:1.1rem}
.btn-primary{
  flex:1;background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);border:none;border-radius:var(--radius-sm);
  padding:.9rem;font-size:.9rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 8px 24px rgba(var(--accent-rgb),.35);
  transition:transform .1s, box-shadow .15s, filter .15s;
}
.btn-primary:hover{box-shadow:0 10px 30px rgba(var(--accent-rgb),.48)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{filter:grayscale(.8) brightness(.6);box-shadow:none;cursor:default}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  border-radius:var(--radius-sm);padding:.9rem 1.1rem;font-size:.85rem;cursor:pointer;transition:.15s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text)}
.btn-danger{
  margin-top:.9rem;width:100%;background:transparent;
  border:1px solid rgba(210,70,70,.4);color:#e07070;
  border-radius:var(--radius-sm);padding:.7rem;font-size:.82rem;cursor:pointer;transition:.15s;
}
.btn-danger:hover{background:rgba(210,70,70,.1);border-color:rgba(210,70,70,.7)}

/* "Auf heute holen" im Editor */
.btn-pull{
  width:100%;margin-top:.2rem;background:rgba(var(--gold-rgb),.1);
  border:1px solid rgba(var(--gold-rgb),.4);color:var(--gold);
  border-radius:var(--radius-sm);padding:.75rem;font-size:.86rem;font-weight:600;
  cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.btn-pull:hover{background:rgba(var(--gold-rgb),.18)}

/* ---------- Start-Screen (Benutzername) ---------- */
.gate{
  min-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1rem;
  padding:2rem 1.2rem;max-width:420px;margin:0 auto;
}
.gate .wordmark{font-size:2.9rem}
.gate-sub{color:var(--text-dim);font-size:.98rem;line-height:1.5;max-width:22rem}
.gate form{width:100%;display:flex;flex-direction:column;gap:.7rem;margin-top:.6rem}
.gate .text-input{text-align:center;font-size:1.15rem}
.gate-hint{color:var(--text-faint);font-size:.78rem;line-height:1.5;margin-top:.2rem}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px);z-index:60;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  padding:.65rem 1rem;border-radius:999px;font-size:.85rem;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s;
  max-width:90vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Sync-Punkt im Userchip */
.userchip .dot{width:7px;height:7px;border-radius:999px;background:var(--text-faint)}
.userchip.syncing .dot{background:var(--gold);animation:pulse 1s ease infinite}
.userchip.offline .dot{background:#e07070}
.userchip.synced .dot{background:#4caf78}

/* ---------- Login-Fehler ---------- */
.gate-error{
  color:#e07070;font-size:.85rem;text-align:center;margin:-.2rem 0 .1rem;
}

/* ================= Verlauf (Subseite) ================= */
.history{
  position:fixed;inset:0;z-index:45;background:var(--bg);
  display:flex;flex-direction:column;
  animation:page-in .2s ease;
}
@keyframes page-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.hist-head{
  display:flex;align-items:center;gap:.7rem;
  padding:calc(.8rem + env(safe-area-inset-top)) 1rem .7rem;
  border-bottom:1px solid var(--border);
}
.hist-title{
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.hist-spacer{width:38px;flex:none}

/* Monats-Strip (oben, horizontal scrollbar) */
.hist-months{
  display:flex;gap:.45rem;overflow-x:auto;scroll-behavior:smooth;
  padding:.8rem 1rem;border-bottom:1px solid var(--border);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hist-months::-webkit-scrollbar{display:none}
.month-chip{
  flex:none;border:1px solid var(--border);background:var(--surface);
  color:var(--text-dim);border-radius:999px;padding:.45rem .9rem;
  font-family:var(--font-display);font-weight:600;font-size:.85rem;letter-spacing:.04em;
  cursor:pointer;transition:.15s;white-space:nowrap;
}
.month-chip:hover{border-color:var(--accent)}
.month-chip.active{
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);border-color:transparent;
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.35);
}

.hist-body{
  flex:1;overflow-y:auto;
  padding:1rem 1rem calc(2rem + env(safe-area-inset-bottom));
  max-width:520px;width:100%;margin:0 auto;
}
.cal-weekhead{
  display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:.5rem;
}
.cal-weekhead span{
  text-align:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.cal-cell{
  aspect-ratio:1;border-radius:11px;display:grid;place-items:center;
  font-size:.9rem;font-weight:600;position:relative;
}
.cal-cell.blank{background:transparent}
.cal-cell.s-none{background:var(--surface-2);color:var(--text-faint)}
.cal-cell.s-future{background:transparent;border:1px dashed var(--border);color:var(--text-faint);font-weight:400}
.cal-cell.s-done{background:#3fae74;color:#08130c}
.cal-cell.s-warn{background:#e6b23a;color:#221800}
.cal-cell.s-bad{background:#e05e5e;color:#2a0808}
.cal-cell.is-today{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
:root[data-theme="light"] .cal-cell.s-done{background:#43b678;color:#062611}
:root[data-theme="light"] .cal-cell.s-warn{background:#e6b23a;color:#3a2900}
:root[data-theme="light"] .cal-cell.s-bad{background:#e46464;color:#3a0a0a}

.cal-legend{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;
  margin-top:1.3rem;color:var(--text-dim);font-size:.78rem;
}
.cal-legend .lg{display:inline-flex;align-items:center;gap:.4rem}
.cal-legend .sw{width:13px;height:13px;border-radius:4px;flex:none}
.cal-legend .sw.s-done{background:#3fae74}
.cal-legend .sw.s-warn{background:#e6b23a}
.cal-legend .sw.s-bad{background:#e05e5e}
.cal-legend .sw.s-none{background:var(--surface-2);border:1px solid var(--border)}
.cal-empty{text-align:center;color:var(--text-faint);font-size:.9rem;padding:2rem 1rem}

/* ================= Einkaufsliste (Subseite) ================= */
.shop{
  position:fixed;inset:0;z-index:44;background:var(--bg);
  display:flex;flex-direction:column;animation:page-in .2s ease;
}
.shop-daybar{padding:.7rem 1rem;border-bottom:1px solid var(--border);display:flex;justify-content:center}
.seg-mini{
  display:inline-grid;grid-template-columns:1fr 1fr;gap:.25rem;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:.22rem;
}
.seg-mini button{
  border:none;background:transparent;color:var(--text-dim);
  font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem 1.2rem;border-radius:999px;cursor:pointer;transition:.15s;
}
.seg-mini button.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink)}

.shop-body{flex:1;overflow-y:auto;padding:1rem 1rem .5rem;max-width:520px;width:100%;margin:0 auto}
.shop-group{margin-bottom:1.2rem}
.shop-group-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.shop-store{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.03em;
  display:flex;align-items:center;gap:.4rem;
}
.shop-store .st-ic{color:var(--gold)}
.shop-count{font-size:.72rem;color:var(--text-faint);border:1px solid var(--border);border-radius:999px;padding:.02rem .45rem}
.shop-all{
  margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--text-dim);
  border-radius:999px;padding:.3rem .75rem;font-size:.74rem;cursor:pointer;transition:.15s;white-space:nowrap;
}
.shop-all:hover{border-color:var(--accent);color:var(--accent-text)}

.shop-items{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.shop-item{
  display:flex;align-items:center;gap:.7rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .7rem;transition:opacity .2s;
}
.shop-item.done{opacity:.5;order:2}
.shop-item.open{order:1}
.shop-item .check{width:24px;height:24px}
.shop-item.done .check{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent}
.shop-item.done .check svg{opacity:1;transform:scale(1)}
.shop-item-name{flex:1;min-width:0;word-break:break-word}
.shop-item.done .shop-item-name{text-decoration:line-through;color:var(--text-dim)}
.shop-del{
  flex:none;border:none;background:transparent;color:var(--text-faint);font-size:1.1rem;
  cursor:pointer;padding:.2rem .35rem;border-radius:8px;line-height:1;transition:.15s;
}
.shop-del:hover{color:#e07070;background:var(--hover)}

.shop-foot{
  border-top:1px solid var(--border);
  padding:.8rem 1rem calc(1rem + env(safe-area-inset-bottom));
  max-width:520px;width:100%;margin:0 auto;
}
.shop-add{display:flex;gap:.45rem;margin-bottom:.7rem}
.shop-add .text-input{padding:.7rem .8rem;font-size:1rem}
#shop-item-name{flex:2;min-width:0}
#shop-item-store{flex:1;min-width:0}
.btn-add-item{
  flex:none;width:46px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--accent-text);font-size:1.3rem;font-weight:700;cursor:pointer;transition:.15s;
}
.btn-add-item:hover{border-color:var(--accent)}
.shop-empty{text-align:center;color:var(--text-faint);font-size:.9rem;padding:1.5rem 1rem;line-height:1.55}

/* Einkaufs-Task-Zeile: Warenkorb vor dem Titel */
.task-cart{color:var(--gold);margin-right:.15rem}

/* Bearbeiten-Stift an Task-Zeilen */
.task-act.pencil svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  .task,.agenda-day{animation:none}
}