/* ═══════════════════════════════════════════════════
   base.css — Reset & Typografie
   ManokiSolution
   ═══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  color:       var(--color-grey);
  background:  var(--color-light);
  line-height: 1.65;
  overflow-x:  hidden;
}

/* ── Typografie ── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;           /* war 400 – jetzt fett für Lesbarkeit */
  line-height: 1.1;
  color: var(--color-grey);   /* fast schwarz, klar lesbar */
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p   { line-height: 1.75; }
a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── Utility-Klassen ── */
.container {
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 32px;
}
.section { padding: var(--space-section) 0; }

.tag {
  display:        inline-block;
  font-family:    var(--font-mono);
  font-size:      var(--fs-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--color-gold);
  border:         1px solid var(--color-gold-border);
  padding:        5px 14px;
  border-radius:  var(--radius-sm);
  margin-bottom:  24px;
}
.divider {
  width:      48px;
  height:     1px;
  background: var(--color-gold);
  margin:     24px 0;
}
.section-sub {
  color:      var(--color-muted);
  font-size:  var(--fs-body);
  max-width:  540px;
  line-height: 1.8;
}

/* Scroll-Reveal */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Screenreader only */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}