/* ==========================================================================
   basis.css — gemeinsames Fundament für alle Bereiche
   --------------------------------------------------------------------------
   Enthält NUR, was überall gilt: Farben, Schriften, Grundelemente.
   Bereichsspezifisches gehört in acoustics/acoustics.css,
   invest/invest.css oder assets/start.css — niemals hierher.

   Eine Farbe hier geändert wirkt auf jeden Bereich.
   ========================================================================== */

/* ---------- Schriften (liegen in assets/fonts/) ---------- */
@font-face { font-family:"Instrument Serif"; src:url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo";          src:url("fonts/archivo-latin-300-normal.woff2")          format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo";          src:url("fonts/archivo-latin-400-normal.woff2")          format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Archivo";          src:url("fonts/archivo-latin-500-normal.woff2")          format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono";    src:url("fonts/ibm-plex-mono-latin-400-normal.woff2")    format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono";    src:url("fonts/ibm-plex-mono-latin-500-normal.woff2")    format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

/* ============================================================
   G&J ACOUSTICS — private Projektdokumentation
   Palette abgeleitet aus den verbauten Materialien:
   Anthrazit-Lack (Grund), Leinen (Text), Aluminium (Sekundär),
   Papiermembran / Birkensperrholz-Kante (Akzent).
   ============================================================ */
:root {
  --ink:      #0A0A0B;
  --ink-2:    #0F0F11;
  --ink-3:    #141417;
  --rule:     #232327;
  --linen:    #EDE8E0;
  --alu:      #93939A;
  --alu-dim:  #6B6B73;
  --kraft:    #C39A6B;
  --kraft-dim: rgba(195,154,107,0.22);

  /* semantisch — getrennt vom Akzent, zählen nicht als zweiter Akzent */
  --sage:     #7E9B72;
  --rust:     #C2704F;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1240px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--linen);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--kraft); outline-offset: 3px; }

/* ---------- Bausteine ---------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--alu-dim);
}
.eyebrow--kraft { color: var(--kraft); }

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede { max-width: 62ch; color: var(--alu); }
.lede strong { color: var(--linen); font-weight: 400; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Barrierefreiheit ---------- */

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}