/* ============================================================
   Grundlagen: Reset, Typografie, Raster, Punkttextur
   Entwurf 01 «Instrument» — Präzision: grosse Grotesk mit engem
   Lauf, Mono-Beschriftung, Haarlinien, tabellarische Ziffern.
   Klassennamen unverändert — alle Unterseiten bauen darauf.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--on-accent)}

/* Punkttextur (Papierfaser) — bewusst aus der Vorfassung übernommen:
   die Punktfarbe wird aus --ink gemischt, also dunkel auf hellem und
   hell auf dunklem Grund. Nur Mischart und Deckkraft hängen an der
   Helligkeit. Das Millimeterraster bleibt dem Shop vorbehalten. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:var(--grain-opacity);
  background-image:radial-gradient(circle at 1px 1px,
    color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 0);
  background-size:4px 4px;mix-blend-mode:var(--grain-blend);
}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:2}
.wrap.wide{max-width:var(--wide)}
.center{text-align:center}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0}
.h1{font-size:clamp(2.75rem,8vw,6.5rem);line-height:.94;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.h2{font-size:clamp(1.875rem,4vw,3.25rem);line-height:1.04;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.h3{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.2;letter-spacing:-.015em;font-weight:600}
.h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
/* WebKit rechnet die Höhe einer Überschrift um eine Zeile zu kurz, wenn sie
   mit einem Inline-Element endet und die Zeilenhöhe unter 1 liegt. Ein
   Nullbreiten-Leerzeichen gibt der Schlusszeile wieder einen Textkasten. */
.h1::after,.h2::after{content:"\200B"}

.dimtext{color:var(--dim)}
.lead{font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.6;color:var(--dim);margin:0}
.lead.mid{max-width:48ch;margin-inline:auto}
.eyeline{font-family:var(--fm);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0 0 1rem;font-weight:500}
.small{font-size:.875rem;line-height:1.6;color:var(--dim);margin:0}

/* ---------- Abschnitte ---------- */
.stage{padding-block:clamp(4rem,9vw,7.5rem);position:relative}
.stage.alt{background:var(--stage-alt)}
.stage.tight{padding-block:clamp(2.5rem,5vw,4rem)}

.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:920px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.mitte{align-items:center}}

/* ---------- Einblenden beim Scrollen ---------- */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e),transform .8s var(--e)}
.js .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  /* Auch die Verzoegerung nullen: sonst erscheinen verzoegert startende
     Elemente (Gantt-Balken) erst nach ihrer Wartezeit — das ist genau die
     Bewegung, die hier abgeschaltet gehoert. */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    animation-delay:.001ms!important;transition-duration:.001ms!important;
    transition-delay:.001ms!important}
  .js .rv{opacity:1;transform:none}
}

/* ---------- Berührungseingabe ----------------------------------
   Auf iPadOS verschluckt Safari den ersten Tipp auf ein Element mit
   Hover-Zustand, und die Trefferzone in einer klebenden Leiste sitzt
   nicht deckungsgleich. Beides wird unten unschädlich gemacht:
   Hover gilt nur für echte Zeigegeräte, und die Trefferflächen der
   Bedienelemente reichen über das Sichtbare hinaus.
   Nicht verwendet: «overflow-x:clip» statt «hidden» — das schaltet in
   WebKit das Scrollen der ganzen Seite ab, gemessen, nicht vermutet. */
@media(any-pointer:coarse){
  header.site .tt,
  header.site .btn,
  header.site nav a{position:relative}
  header.site .tt::after,
  header.site .btn::after,
  header.site nav a::after{
    content:"";position:absolute;left:0;right:0;top:-10px;bottom:-16px;z-index:0;
  }
}