/* BuchhaltungTool – Basis-Tokens */
:root {
  --tinte: #1B1B19;
  --tinte-70: #55534E;
  --tinte-40: #8C8981;
  --papier: #FAFAF8;
  --papier-2: #F2F0EA;
  --linie: #E2DFD6;
  --akzent: #B4472A;
  --akzent-dunkel: #94371E;
  --plus: #2F6B4F;
  --minus: #A33B2A;

  --h1: clamp(2rem, 5vw, 3.4rem);
  --h2: clamp(1.4rem, 3vw, 2.1rem);
  --h3: clamp(1.1rem, 2vw, 1.4rem);
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --ls-caps: 0.1em;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}

.kaps {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--tinte-40);
  font-weight: 600;
}

a { color: var(--akzent); }

button, input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover { background: var(--akzent-dunkel); }
.btn--geist {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.btn--geist:hover { background: var(--papier-2); }
.btn--klein { min-height: 38px; padding: 0 14px; font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}