/* ============================================================
   LifeFolder — Base / Reset + generische UI-Bausteine
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; letter-spacing: -.02em; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.muted { color: var(--color-muted-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* sanfte Seiten-Transition (auf allen Screens) */
@keyframes pageEnter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ---- generische Bausteine (Phase 2 formalisiert sie weiter) ---- */
.page-head { margin-bottom: var(--space-5); }
.page-title { font-size: 30px; font-weight: 800; }
.page-sub { margin: 7px 0 0; color: var(--color-muted); font-size: 15px; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  padding: var(--space-5);
}
.card--note { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.card--note p { margin: 0; color: var(--color-muted); }

.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); font-size: 12px; font-weight: 700;
}
.badge--neutral { background: var(--status-valid-bg); color: var(--status-valid-fg); }