/* Schlagzahlen-Erweiterung für Tagwerk V7 – nur V7-Tokens, keine neuen Farben oder Schriften */
.cockpit.tw-wide{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.cockpit.tw-wide{grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr)}}

.tw-track{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.tw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tw-count{display:flex;align-items:baseline;min-height:44px;gap:6px;border-radius:10px;padding:0 4px;margin:0 -4px;text-align:left}
.tw-count:hover{background:var(--surface2)}
.tw-num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600;font-size:clamp(40px,11vw,52px);line-height:1;letter-spacing:-.045em;color:var(--ink)}
.tw-of{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;color:var(--muted);letter-spacing:-.02em}
.tw-pct{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tw-pct b{font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tw-prog{position:relative;overflow:visible}
.tw-prog i{transition:width .35s cubic-bezier(.2,.8,.2,1)}
.tw-prog em{position:absolute;top:0;bottom:0;background:var(--gold);border-radius:0 6px 6px 0;transition:width .35s}
.tw-track.reached .tw-prog i{background:var(--bar-money)}
.tw-line{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-height:24px}
.tw-line .tw-stat{margin-left:auto}
.tw-line b{color:var(--ink)}
.tw-done{display:none;align-items:center;gap:7px;font-weight:700;color:var(--money-text)}
.tw-done svg{width:19px;height:19px}
.tw-track.reached .tw-done{display:inline-flex}
.tw-track.reached .tw-rest{display:none}

/* Zehnerblöcke à 5×2 */
.tw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
@media (min-width:520px){.tw-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tw-grp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:3px;border-radius:8px}
.tw-grp.cur{background:var(--surface2)}
.tw-box{aspect-ratio:1;border-radius:4px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;color:transparent;padding:0;transition:background .14s,transform .14s}
.tw-box svg{width:72%;height:72%;stroke-width:3.2}
.tw-box.done{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.tw-box.next{background:transparent;border:1.5px dashed var(--accent-text)}
.tw-box.bonus{background:var(--gold);border-color:transparent;color:var(--bg)}
.tw-box.bslot{background:transparent;border:1.5px dashed var(--gold)}
.tw-track.reached .tw-box.done{background:var(--bar-money);color:var(--money-ink)}
.tw-box.last{outline:2px solid var(--accent);outline-offset:1.5px}
.tw-track.reached .tw-box.last{outline-color:var(--bar-money)}
.tw-box.bonus.last{outline-color:var(--gold)}
.tw-box.pop{animation:twpop .22s ease-out}
@keyframes twpop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (hover:hover){.tw-box.next:hover,.tw-box.bslot.next:hover{background:var(--accent-soft)}}
.tw-grid.compact{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.tw-cbar{height:14px;border-radius:4px;background:var(--surface2);overflow:hidden;position:relative}
.tw-cbar i{position:absolute;inset:0 auto 0 0;background:var(--accent)}

.tw-act{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px}
.tw-act .btn{min-height:56px}
.tw-act .tw-undo{padding:0}
.tw-act .tw-plus{font-size:16.5px}
.tw-act .tw-plus:active{transform:scale(.97)}
.tw-kbd{display:none}
@media (hover:hover) and (pointer:fine){.tw-kbd{display:block}}
.tw-kbd kbd{font-family:var(--f-ui);font-size:12px;font-weight:600;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 5px;background:var(--surface2)}

/* Handy: +1 fest über der unteren Navigation (verdeckt sie nicht) */
@media (max-width:959px){
  .tw-act{position:fixed;left:0;right:0;z-index:24;bottom:calc(76px + env(safe-area-inset-bottom,0px));
    padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  body.tw-counting .app{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}
}

/* Ziel erreicht: dezent */
.timer.tw-celebrate{animation:twring 1.6s ease-out}
@keyframes twring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bar-money) 55%,transparent),var(--shadow)}60%{box-shadow:0 0 0 14px transparent,var(--shadow)}100%{box-shadow:var(--shadow)}}
.timer.tw-celebrate .tw-done svg{animation:twbadge .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes twbadge{0%{transform:scale(0) rotate(-30deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tw-box,.tw-prog i,.tw-prog em{transition:none}.timer.tw-celebrate,.tw-box.pop,.timer.tw-celebrate .tw-done svg{animation:none}}

/* Ziele-Karte: Desktop unter der Umsatzkarte, Handy nach dem Timer */
.tw-lcol{display:contents}
.tw-lcol .tw-goals{order:1}
@media (min-width:760px){.tw-lcol{display:flex;flex-direction:column;gap:16px;min-width:0}.tw-lcol .tw-goals{order:0}}
@media (min-width:960px){.tw-lcol{gap:20px}}
.tw-goal{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:12px;align-items:center;padding:6px 0}
.g-main{display:flex;flex-direction:column;gap:7px;min-width:0}
.g-top{display:flex;justify-content:space-between;gap:8px;font-size:14px;min-width:0}
.g-n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tw-goal .tr{height:8px;border-radius:5px;background:var(--surface2);overflow:hidden}
.tw-goal .tr i{display:block;height:100%;background:var(--c,var(--accent));border-radius:5px}
.tw-goal.ok .tr i{background:var(--bar-money)}
.tw-goal .v{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);white-space:nowrap}
.tw-goal.ok .v{color:var(--money-text);font-weight:600}
.tw-goal .iconbtn[disabled]{opacity:.35}

/* Handy: während einer Zähl-Tätigkeit steht die Timer-Karte oben, die Umsatzkarte direkt darunter */
@media (max-width:759px){.cockpit.tw-wide > .timer{order:-1}}

/* Status ausstehender Schritte */
.tw-stat .pill{font-size:12px}
.tw-pend{background:var(--warn-soft);color:var(--warn-soft-ink);border-color:transparent}

/* Demo-Kennzeichnung, Onboarding */
.tw-demo{position:relative;z-index:30;background:var(--warn-soft);color:var(--warn-soft-ink);font-size:12.5px;font-weight:700;text-align:center;padding:6px 12px;padding-top:max(6px,env(safe-area-inset-top,0px))}
.tw-prof{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tw-prof .tile{min-height:64px}
.tw-dots{display:flex;gap:6px}
.tw-dots i{width:24px;height:4px;border-radius:2px;background:var(--line)}
.tw-dots i.on{background:var(--accent)}
.tw-intro{display:flex;flex-direction:column;gap:12px}
.tw-intro > div{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.tw-intro svg{width:22px;height:22px;flex-shrink:0;color:var(--accent-text);margin-top:1px}
a.btn{text-decoration:none}