/* =========================================================================
   Strukturion IT — Base (Reset, Typografie, Layout, Self-Host Fonts)
   ========================================================================= */

/* --- Self-hosted Fonts (OFL). woff2-Dateien in /fonts/ ablegen,
       siehe /fonts/README.md. Faellt sauber auf System-Fonts zurueck,
       solange die Dateien fehlen. --- */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../fonts/SpaceGrotesk-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("../fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p { color: var(--brand-text-soft); max-width: 62ch; }

a { color: var(--brand-accent); text-decoration: none; transition: color 0.2s var(--ease-out); }
a:hover { color: var(--accent-light); }

/* --- Layout-Helfer --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-7); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--brand-accent); margin-bottom: var(--space-2);
}
.lead { font-size: var(--fs-body-l); color: var(--brand-text-soft); }

/* Amber-Textakzent im Fliesstext */
.accent-text { color: var(--brand-accent); }

/* Feiner Trenner */
.hair { height: 1px; background: var(--brand-border); border: 0; }