/* Manrope auto-hosted via local fonts/ folder for DSGVO compliance.
   Fallback to system stack if files missing. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/Manrope-Variable.woff2") format("woff2-variations"),
       url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-named-instance: "Regular";
}

html { font-size: 16px; }

body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-4); }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-4); }
h3 { font-size: var(--fs-xl); margin-bottom: var(--space-3); font-weight: 700; }
h4 { font-size: var(--fs-lg); margin-bottom: var(--space-3); font-weight: 700; }
h5 { font-size: var(--fs-md); margin-bottom: var(--space-2); font-weight: 700; }
h6 { font-size: var(--fs-sm); margin-bottom: var(--space-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin-bottom: var(--space-4); max-width: 70ch; }

strong, b { font-weight: 700; }

a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-hover); }

small { font-size: var(--fs-xs); color: var(--text-secondary); }

.lead { font-size: var(--fs-lg); color: var(--text-secondary); line-height: 1.6; max-width: 60ch; }

.eyebrow { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-primary); margin-bottom: var(--space-3); }

.tabular { font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  .lead { font-size: var(--fs-xl); }
}