/* Gewohnheiten aufbauen · Styles */
.hb-formula { background: var(--mk-accent-soft); border-left: 4px solid var(--mk-accent); border-radius: var(--mk-radius-sm); padding: 10px 14px; font-size: 14px; line-height: 1.55; margin-top: 8px; } .hb-formula b { color: var(--mk-accent); } .hb-formula small { display: block; color: var(--mk-muted); font-style: italic; margin-top: 4px; }
.hb-habit { border: 1px solid var(--mk-line); border-radius: var(--mk-radius-sm); padding: 14px 16px; margin-bottom: 12px; background: var(--mk-surface); } .hb-habit.paused { opacity: .55; }
.hb-habit-top { display: flex; align-items: center; gap: 12px; } .hb-habit-t { flex: 1; min-width: 0; } .hb-habit-a { display: flex; gap: 4px; }
.hb-habit h4 { margin: 0; font-size: 16px; } .hb-meta { font-size: 12px; color: var(--mk-muted); margin-top: 2px; } .hb-id { font-size: 12px; color: var(--mk-accent); font-style: italic; margin-top: 2px; }
.hb-check { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--mk-line); background: var(--mk-surface-2); font-size: 18px; cursor: pointer; flex-shrink: 0; transition: .15s; color: #fff; } .hb-check.done { background: var(--mk-accent); border-color: var(--mk-accent); }
.hb-streak { font-weight: 700; color: var(--mk-accent); font-size: 14px; white-space: nowrap; }
.hb-cal { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; margin-top: 12px; } .hb-cal button { aspect-ratio: 1; border-radius: 3px; border: 0; background: var(--mk-line); cursor: pointer; padding: 0; } .hb-cal button.on { background: var(--mk-accent); } .hb-cal button.pre { background: transparent; cursor: default; } .hb-cal button.today { outline: 2px solid var(--mk-accent-2); outline-offset: 1px; }
.hb-cal-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--mk-faint); margin-top: 4px; }
.hb-law-card, .hb-eval-card { border: 1px solid var(--mk-line); border-radius: var(--mk-radius-sm); padding: 14px 16px; margin-bottom: 12px; } .hb-law-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .hb-law-h b { font-size: 16px; }
.hb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; } .hb-stats div { background: var(--mk-surface-2); border-radius: var(--mk-radius-sm); padding: 10px; text-align: center; } .hb-stats b { display: block; font-size: 20px; } .hb-stats span { font-size: 11px; color: var(--mk-muted); }
.hb-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; align-items: end; height: 60px; margin-bottom: 4px; } .hb-wd div { display: grid; align-items: end; justify-items: center; height: 100%; } .hb-wd i { display: block; width: 70%; border-radius: 3px 3px 0 0; background: var(--mk-line); } .hb-wd i.ok { background: #10b981; } .hb-wd i.mid { background: #f59e0b; } .hb-wd i.low { background: #ef4444; } .hb-wd span { font-size: 10px; color: var(--mk-muted); }
.hb-link { text-decoration: none; color: inherit; text-align: left; }
@media (max-width: 640px) { .hb-stats { grid-template-columns: 1fr 1fr; } .hb-cal { grid-template-columns: repeat(14, 1fr); } }