/* Reset, Typografie-Rollen und Grundbausteine */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: 400 14px/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }

.t-display { font: var(--display-weight) 56px/0.95 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
.t-value   { font: var(--display-weight) 40px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.t-label   { font: 400 10px/1.4 var(--f-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-2); }
.t-mono    { font: 500 13px/1.4 var(--f-label); font-variant-numeric: tabular-nums; }
.t-text    { font: 400 14px/1.5 var(--f-text); color: var(--c-text-2); max-width: 60ch; }

/* Kennzahlfeld: gestapelt (Label oben, Wert unten) oder inline (Label links, Wert rechts) */
.stat { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-right: 1px solid var(--c-line); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat--inline { flex-direction: row; justify-content: space-between; align-items: baseline;
                background: var(--c-surface-2); border: 0; border-radius: var(--radius); padding: var(--s-2) var(--s-3); }
.stat-row { display: flex; border-top: 1px solid var(--c-line); }

/* Steuerelemente */
.btn { font: 500 11px/1 var(--f-label); text-transform: uppercase; letter-spacing: 0.06em;
       padding: 11px 14px; border: 1px solid var(--c-line); border-radius: var(--radius);
       background: transparent; cursor: pointer; }
.btn:hover { background: var(--c-surface-2); }
.btn--primary { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.btn--primary:hover { background: var(--c-ink); opacity: .88; }
.btn:focus-visible, .seg button:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 2px; }

.seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--radius); }
.seg button { font: 500 11px/1 var(--f-label); text-transform: uppercase; letter-spacing: 0.06em;
              padding: 9px 12px; border: 0; border-right: 1px solid var(--c-line); background: transparent; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }