/* ============================================================
   Lab 13 — Systema · Schweizer Grid-Poster
   Sichtbares Raster, Inter-Ziffern, Zahlen führen die Erzählung.
   ============================================================ */

@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --berry:#8B1A6B; --berry-deep:#6E1455;
  --gold:#C8A55B; --gold-deep:#A8853F;
  --plum:#3A1530;
  --paper:#FBF8F3; --paper-mid:#F3EDE2; --paper-deep:#E8DDC8;
  --ink:#1F1A17; --ink-soft:#4A413B; --ink-mute:#877B71;
  --grid:rgba(135,123,113,.16);
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:
    repeating-linear-gradient(to right, transparent 0 calc(100%/12 - 1px), var(--grid) calc(100%/12 - 1px) calc(100%/12)),
    repeating-linear-gradient(to bottom, transparent 0 95px, var(--grid) 95px 96px),
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::selection { background:var(--berry); color:var(--paper); }

/* ---------- Maßband links ---------- */
.ruler {
  position:fixed; top:0; bottom:0; left:0; width:14px; z-index:5;
  background:
    repeating-linear-gradient(to bottom, var(--ink-mute) 0 1px, transparent 1px 24px) 8px 0 / 6px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink-mute) 0 1px, transparent 1px 96px) 4px 0 / 10px 100% no-repeat;
  opacity:.5;
}
@media (max-width:720px) { .ruler { display:none; } }

/* ---------- Kopf ---------- */
.masthead {
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  position:sticky; top:0; z-index:10;
}
.masthead__row {
  max-width:76rem; margin:0 auto;
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1rem clamp(1.4rem, 4vw, 3rem);
}
.masthead__brand { font-family:var(--serif); font-size:1.15rem; color:var(--berry); }
.masthead__title {
  font-weight:600; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
}
.masthead__no {
  font-weight:500; font-size:.68rem; letter-spacing:.12em;
  color:var(--ink-mute); font-variant-numeric:tabular-nums;
}
@media (max-width:640px) { .masthead__title { display:none; } }

/* ---------- Typo ---------- */
.eyebrow {
  font-weight:600; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-deep);
}
.hl { font-family:var(--serif); font-style:italic; color:var(--gold-deep); }

/* ---------- Hero ---------- */
.hero {
  max-width:76rem; margin:0 auto;
  padding:clamp(3rem, 8vh, 6rem) clamp(1.4rem, 4vw, 3rem) 3rem;
}
.hero__cell { max-width:44rem; }
.hero__big {
  font-family:var(--sans); font-weight:700;
  font-size:clamp(9rem, 26vw, 21rem); line-height:.9;
  color:var(--berry);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  margin:1rem 0 .5rem -0.05em;
}
.hero__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 4.6vw, 3.2rem); line-height:1.1;
  color:var(--ink);
}
.lead { margin-top:1.4rem; max-width:36em; color:var(--ink-soft); font-size:1.02rem; line-height:1.8; }

/* ---------- Kennzahlen ---------- */
.numbers {
  max-width:76rem; margin:0 auto;
  padding:0 clamp(1.4rem, 4vw, 3rem) 4rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  border-top:2px solid var(--ink);
}
.number {
  padding:1.6rem 1.4rem 2rem 0;
  border-right:1px solid var(--grid);
}
.number:last-child { border-right:0; }
.number__value {
  font-family:var(--sans); font-weight:700;
  font-size:clamp(3.4rem, 7vw, 5.4rem); line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:block;
}
.number__label {
  display:block; margin-top:.7rem;
  font-weight:500; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
  line-height:1.55;
}

/* ---------- Matrix ---------- */
.matrix-wrap {
  max-width:76rem; margin:0 auto;
  padding:0 clamp(1.4rem, 4vw, 3rem) 4rem;
  overflow-x:auto;
}
.matrix {
  width:100%; min-width:680px;
  border-collapse:collapse;
  background:var(--paper);
  border:2px solid var(--ink);
}
.matrix th, .matrix td {
  padding:1.05rem 1.2rem;
  text-align:left; vertical-align:top;
  border:1px solid var(--grid);
  font-size:.94rem;
}
.matrix thead th { border-bottom:2px solid var(--ink); padding-top:1.3rem; padding-bottom:1.3rem; }
.matrix tbody th {
  font-weight:600; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
  width:17%;
  background:var(--paper);
}
.matrix__lead { width:17%; }
.visually-hidden {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.matrix__head {
  font-family:var(--serif); font-size:1.5rem; font-weight:400;
  display:inline-block; position:relative; padding-top:.55rem;
}
.matrix__head::before {
  content:""; position:absolute; top:0; left:0; width:2.4rem; height:3px;
}
.matrix__head--berry { color:var(--berry); }
.matrix__head--berry::before { background:var(--berry); }
.matrix__head--gold { color:var(--gold-deep); }
.matrix__head--gold::before { background:var(--gold); }
.matrix__head--plum { color:var(--plum); }
.matrix__head--plum::before { background:var(--plum); }

.matrix td strong { font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.matrix__invest td { background:var(--paper-mid); }

.matrix tbody tr:hover td { background:var(--paper-mid); transition:background .25s; }

/* ---------- Schluss ---------- */
.closing {
  max-width:76rem; margin:0 auto;
  padding:1rem clamp(1.4rem, 4vw, 3rem) 6rem;
}
.closing__line {
  font-family:var(--serif);
  font-size:clamp(1.7rem, 3.8vw, 2.7rem); line-height:1.2;
  color:var(--ink); max-width:24em;
}
.btn {
  display:inline-block; margin-top:2rem;
  font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); background:var(--berry);
  text-decoration:none;
  padding:1.15rem 2.5rem;
  transition:background .3s;
}
.btn:hover { background:var(--berry-deep); }

/* ---------- Footer ---------- */
.footer {
  border-top:2px solid var(--ink);
  background:var(--paper);
  text-align:center; padding:2.6rem 1.4rem 2.2rem;
}
.footer__firm {
  font-weight:600; font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--berry);
}
.footer__meta { margin-top:.55rem; font-size:.72rem; color:var(--ink-mute); }
.footer__lab { margin-top:1.2rem; font-size:.66rem; letter-spacing:.1em; }
.footer__lab a { color:var(--gold-deep); text-decoration:none; }
.footer__lab a:hover { color:var(--berry); }

/* ---------- Reveals ---------- */
[data-reveal] {
  opacity:0; transform:translateY(18px);
  transition:opacity .85s cubic-bezier(.2,.65,.25,1), transform .85s cubic-bezier(.2,.65,.25,1);
  transition-delay:var(--d, 0s);
}
[data-reveal].in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
}