/* ═══════════════════════════════════════════════════════════════════
   HELLWIG — Baugeschäft. Die Mechanik steht in ../scroll.css.
   Hier steht nur, wonach dieser eine Betrieb aussieht.

   Farbe hergeleitet (siehe ../../_demos6/VISIONEN.md):
     Grund   Beton      die Sohle ist das Erste, was steht
     Akzent  Ziegelrot  der Rohbau besteht aus genau diesem Ziegel
   Hell, weil draußen bei Tageslicht gearbeitet wird.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Author';src:url('fonts/author-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Author';src:url('fonts/author-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'SourceSerif';src:url('fonts/source-serif-4-400-normal-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'SourceSerif';src:url('fonts/source-serif-4-600-normal-latin.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --grund:#DDD8D0;
  --tiefer:#D2CCC2;
  --schrift:#1B1917;
  --dim:#585349;
  --linie:rgba(27,25,23,.20);
  --akzent:#8A3F26;
  --akzent-auf:#DDD8D0;

  --anzeige:'Author',system-ui,sans-serif;
  --anzeige-gewicht:700;
  /* Serif als Fließtext — die Seite soll wie ein Bautagebuch lesen. */
  --lauf:'SourceSerif',Georgia,serif;
  --versal:uppercase;
  --sperr:-.018em;

  --auf-bild:#F7F5F1;
  --auf-bild-dim:rgba(247,245,241,.88);

  --kopf-schleier:rgba(221,216,208,.90);
  --szene-schleier:linear-gradient(180deg,rgba(22,20,18,.30) 0%,rgba(22,20,18,.02) 34%,rgba(22,20,18,.80) 100%);

  /* Der Mörtel liegt in flachem Tageslicht und ist fast weiß. Ein Radialschleier
     reicht hier nicht — oben und unten muss es wirklich zufallen, sonst steht
     die Schrift auf hellgrau auf hellgrau. */
  --scrub-scrim:linear-gradient(180deg,rgba(22,20,18,.72) 0%,rgba(22,20,18,.16) 34%,
                rgba(22,20,18,.20) 52%,rgba(22,20,18,.86) 100%);
  --leiste-spur:rgba(247,245,241,.30);

  /* Das fertige Haus steht in hellem Himmel. Ein Schleier hinter der Schrift
     saehe darauf wie ein Fleck aus — stattdessen liegt die Abtoenung IN der
     Maske und erscheint erst, wenn der Kreis das Bild freigibt. */
  --reveal-grund:#1B1917;
  --reveal-scrim:transparent;
  --reveal-tint:rgba(22,20,18,.56);
}

/* Author 700 in Versalien trägt die Überschriften, die Serife den Text. */
.lauf,.register .nb,.split__zeile{font-family:'SourceSerif',Georgia,serif}
.kopf{font-family:'Author',system-ui,sans-serif}
.scrub__wert{font-size:clamp(22px,3.4vw,46px);letter-spacing:.02em;text-transform:uppercase}

/* ── Eigener Bauteil 1: der Bauplan ──────────────────────────────────
   Vier Etappen, nummeriert, mit Dauer rechts. Steht direkt unter dem
   Auftakt, weil bei diesem Betrieb die Reihenfolge das Versprechen ist. */
.etappen{list-style:none;margin:clamp(22px,3.5vh,38px) 0 0;padding:0;
  border-top:1px solid var(--linie)}
.etappen li{display:flex;align-items:baseline;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--linie);font-family:'SourceSerif',Georgia,serif}
.etappen b{font-family:'Author',system-ui,sans-serif;font-size:12px;letter-spacing:.2em;
  color:var(--akzent);flex:0 0 auto;width:2.6em}
.etappen span{color:var(--dim);margin-left:auto;font-size:14px;text-align:right;
  font-family:'Author',system-ui,sans-serif;letter-spacing:.02em}

/* Das Rohbaubild ist quadratisch. Ueber die volle Breite gelegt waere es
   eine Wand statt eines Bandes — also auf Bandformat beschneiden. */
.randlaeufer img{aspect-ratio:16/7;object-fit:cover;object-position:50% 42%}

/* ── Eigener Bauteil 2: die Teilung ──────────────────────────────────
   Zwei Hälften, je ein Gegenstand: was von Hand kommt und was von außen
   geprüft wird. Das ist die strukturelle Abweichung dieser Seite. */
.split{display:grid;grid-template-columns:1fr}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}}
.split__seite{position:relative;overflow:hidden;min-height:58svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,4vw,52px);color:var(--auf-bild)}
.split__seite img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.split__seite::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,20,18,.28) 0%,rgba(22,20,18,.86) 100%)}
.split__titel{font-size:clamp(21px,2.6vw,34px);max-width:14ch;
  text-shadow:0 2px 24px rgba(0,0,0,.85)}
.split__zeile{margin:.7em 0 0;max-width:34ch;font-size:16px;color:var(--auf-bild-dim);
  text-shadow:0 1px 18px rgba(0,0,0,.9)}