/* ===== Typografie (Basis 16px = 1rem) ===== */
:root{
  /* Grundgrößen */
  --font-body: 1rem;          /* 16px */
  --font-small: 0.875rem;     /* 14px */
  --font-code: 0.9375rem;     /* 15px - optional */

  /* Überschriften (min, fluid, max) */
  --font-h1: clamp(2.25rem, 1rem + 3vw, 3rem);      /* 36–48px */
  --font-h2: clamp(1.75rem, 0.75rem + 2.5vw, 2.25rem);/* 28–36px */
  --font-h3: clamp(1.5rem, 0.5rem + 2vw, 1.875rem);  /* 24–30px */
  --font-h4: clamp(1.25rem, 0.25rem + 1.5vw, 1.5rem);/* 20–24px */
  --font-h5: clamp(1.125rem, 0.2rem + 1vw, 1.375rem);/* 18–22px */
  --font-h6: clamp(1rem, 0.15rem + 0.6vw, 1.125rem); /* 16–18px */

  /* Zeilenhöhen (unitless) */
  --lh-body: 1.6;
  --lh-head: 1.2;

  /* Schriftgewichte */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Feintuning für Überschriften */
  --ls-h1: -0.02em;
  --ls-h2: -0.01em;
  --ls-h3: -0.005em;
}

/* Anwendung */
body{
  font-size: var(--font-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
}

/* Überschriften – konsistent und responsiv */
h1,h2,h3,h4,h5,h6{
  line-height: var(--lh-head);
  font-weight: var(--w-semibold);
  margin: 0 0 .5em;
}
h1{ font-size: var(--font-h1); letter-spacing: var(--ls-h1); }
h2{ font-size: var(--font-h2); letter-spacing: var(--ls-h2); }
h3{ font-size: var(--font-h3); letter-spacing: var(--ls-h3); }
h4{ font-size: var(--font-h4); }
h5{ font-size: var(--font-h5); }
h6{ font-size: var(--font-h6); }

/* Kleintext & Code */
small,.muted{ font-size: var(--font-small); opacity: .85; }
code,kbd,pre{ font-size: var(--font-code); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Optional: Lead-Text & Eyebrow */
.lead{ font-size: clamp(1.125rem, 0.5rem + 1vw, 1.375rem); line-height: 1.5; }
.eyebrow{ font-size: 0.8125rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }