/* =========================================================================
   02-base.css — Typo-Hierarchie und Body-Defaults
   Bewusst niedrige Spezifität — Overrides gegen UpSolution in 04-overrides.css
   ========================================================================= */

/* Body — bei Impreza ist body.l-body. Wir setzen auf body direkt mit unserer
   Font-Family, damit alle nicht-Impreza-Bereiche ebenfalls Poppins bekommen.
   Der UpSolution-Builder rendert eigene Container — die patchen wir später. */
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--c-dark-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headlines — Poppins über alle Levels, mit unserer Hierarchie */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--c-dark);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}

h1, .h1 {
  font-size: var(--t-h1);
  font-weight: var(--fw-regular);
}

h2, .h2 {
  font-size: var(--t-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

h3, .h3 {
  font-size: var(--t-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-size: var(--t-body-lg);
  font-weight: var(--fw-medium);
}

/* Display-Headline für Hero — als Modifier-Klasse einsetzbar */
.h-display {
  font-size: var(--t-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Paragraph */
p {
  margin: 0 0 var(--space-3);
}

/* Links — dezent, im Akzent-Ton */
a {
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Hilfsklassen */
.eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--space-2);
}

.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
}

.meta {
  font-size: var(--t-meta);
  color: var(--c-muted);
}

/* Container-Hilfe */
.mat-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .mat-container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* Section-Padding */
.mat-section {
  padding-block: var(--section-pad-y-mobile);
}

@media (min-width: 768px) {
  .mat-section {
    padding-block: var(--section-pad-y-desktop);
  }
}

/* Section-Hintergrundvarianten */
.mat-section--cream    { background: var(--c-cream); }
.mat-section--off-white { background: var(--c-off-white); }
.mat-section--dark     { background: var(--c-dark); color: var(--c-off-white); }
.mat-section--dark h1,
.mat-section--dark h2,
.mat-section--dark h3 { color: var(--c-white); }