/* CLXON24 – einheitliche Typografie (alle Seiten) */

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-heading: -0.03em;
  --ls-kicker: 0.12em;
  --fs-display: clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 2.8vw, 2.25rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-kicker: 0.6875rem;
  --lh-display: 1.12;
  --lh-heading: 1.2;
  --lh-body: 1.65;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-normal);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
}

p,
li {
  font-weight: var(--fw-normal);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

/* Seitentitel & Sektionen – gleiche Stärke, keine 740/850/950-Mischung */
.page-hero h1,
.hero-title-line,
.content h1,
.article-inner h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}

.section-head h2,
.section-title h2,
.split-copy h2,
.guide h2,
.local h2,
.faq h2,
.contact h2,
.vorteile h2,
.anwendungen h2,
.final-cta h2,
.intent-head h2,
.material-header h2,
.rg-intro h2,
.rg-facts-inner h2,
.content h2,
.premium-section .page-head h2,
.premium-section .faq-intro.page-head h2,
.shop-layout h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}

.rg-featured-body h3,
.rg-card-body h3,
.rg-fact h3,
.article-inner h3,
.content h3,
.premium-section .vorteil-card h3,
.step h3,
.anwendung-card h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
}

.article-inner h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
}

.article-lead,
.hero-text,
.page-hero p:not(.kicker):not(.breadcrumb) {
  font-weight: var(--fw-normal);
}

.rg-tags span,
.rg-read,
.hero-metrics span,
.trust-row span {
  font-weight: var(--fw-semibold);
}
