/* ============================================================
   Lab 06 — Die Partitur · zwölf Wochen als zwölf Takte
   Horizontale Scroll-Reise auf einer goldenen Notenzeile.
   ============================================================ */

@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; }

:root {
  --berry:#8B1A6B; --berry-deep:#6E1455;
  --gold:#C8A55B; --gold-deep:#A8853F; --gold-soft:#DCC089;
  --plum:#3A1530;
  --paper:#FBF8F3; --paper-mid:#F3EDE2; --paper-deep:#E8DDC8;
  --ink:#1F1A17; --ink-soft:#4A413B; --ink-mute:#877B71;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --bar-w:clamp(300px, 30vw, 420px);
}

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

body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------- Kopf ---------- */
.top {
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem clamp(1.3rem, 4vw, 3rem);
  background:linear-gradient(to bottom, rgba(251,248,243,.92), rgba(251,248,243,0));
}
.top__brand { font-family:var(--serif); font-size:1.2rem; color:var(--berry); }
.top__cta {
  font-weight:500; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); text-decoration:none;
  border-bottom:1px solid rgba(168,133,63,.4); padding-bottom:.22em;
  transition:color .3s, border-color .3s;
}
.top__cta:hover { color:var(--berry); border-color:var(--berry); }

/* ---------- 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); }

/* ---------- Auftakt ---------- */
.hero {
  min-height:92vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem clamp(1.4rem, 6vw, 6rem) 2rem;
  max-width:70rem;
}
.hero__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.7rem, 6.6vw, 5.2rem); line-height:1.06;
  color:var(--berry);
  margin-top:1.3rem; max-width:13em; text-wrap:balance;
}
.lead {
  margin-top:1.8rem; max-width:36em;
  font-size:clamp(1rem, 1.4vw, 1.12rem); line-height:1.8;
  color:var(--ink-soft);
}
.hero__hint {
  margin-top:3.4rem;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute);
  display:flex; align-items:center; gap:.9rem;
}
.hero__hint::after {
  content:""; width:56px; height:1px; background:var(--gold);
  animation:slide 2.4s ease-in-out infinite;
}
@keyframes slide { 0%,100% { transform:translateX(0); opacity:.5; } 50% { transform:translateX(14px); opacity:1; } }

/* ---------- Partitur ---------- */
.score-wrap { position:relative; }
.score-sticky {
  position:sticky; top:0; height:100vh;
  overflow:hidden;
  display:flex; align-items:center;
}
.score-track {
  position:relative;
  display:flex; align-items:stretch;
  gap:0;
  padding:0 8vw;
  will-change:transform;
}

/* Notenzeile hinter allem */
.staff {
  position:absolute; left:0; right:0; top:50%;
  height:160px; transform:translateY(-50%);
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none;
}
.staff span { display:block; height:1px; background:rgba(168,133,63,.38); }

.score-open {
  flex:0 0 auto;
  width:min(34rem, 78vw);
  align-self:center;
  padding-right:6vw;
  position:relative; z-index:1;
}
.score-open__label {
  font-weight:600; font-size:.66rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold-deep);
}
.score-open__name {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2.4rem, 5vw, 4rem); color:var(--berry);
  margin-top:.7rem;
}
.score-open__meta { margin-top:.8rem; font-size:.9rem; color:var(--ink-mute); }

/* Takte */
.bars {
  list-style:none;
  display:flex; align-items:stretch;
  position:relative; z-index:1;
}
.bar {
  flex:0 0 var(--bar-w);
  position:relative;
  padding:0 2.6rem;
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}
.bar::after { /* Taktstrich — nur über die Notenzeile, wie im Notensatz */
  content:""; position:absolute; right:0;
  top:calc(50% - 80px); height:160px; width:1px;
  background:rgba(168,133,63,.55);
}
.bar::before { /* Tempo-Bezeichnung über der Zeile */
  content:attr(data-tempo);
  position:absolute; top:calc(50% - 140px);
  left:2.6rem;
  font-family:var(--serif); font-style:italic;
  font-size:1.05rem; color:var(--berry);
}
.bar__no {
  position:absolute; top:calc(50% - 104px); right:1.2rem;
  font-family:var(--sans); font-weight:600; font-size:.64rem;
  color:var(--ink-mute);
}
.bar__note { /* Notenkopf auf der Zeile, Tonhöhe = --pitch */
  position:absolute;
  left:50%;
  top:calc(50% - 80px + var(--pitch) * 160px);
  width:17px; height:13px;
  background:var(--berry);
  border-radius:50%;
  transform:translate(-50%, -50%) rotate(-18deg);
  box-shadow:0 1px 0 rgba(58,21,48,.25);
}
.bar__note::after { /* Notenhals */
  content:""; position:absolute;
  right:-1px; bottom:5px;
  width:1.6px; height:52px;
  background:var(--berry);
}
.bar h2 {
  font-family:var(--serif); font-weight:400;
  font-size:1.7rem; color:var(--ink);
  margin-top:190px;
}
.bar p {
  margin-top:.6rem; font-size:.92rem; line-height:1.7; color:var(--ink-soft);
  max-width:24em;
}
.bar--last::after { width:0; border-right:3px double rgba(168,133,63,.85); background:none; }

/* Fine */
.fine {
  flex:0 0 auto;
  width:min(30rem, 80vw);
  align-self:center;
  padding:0 8vw 0 5vw;
  text-align:center;
  position:relative; z-index:1;
}
.fine__word {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(2.6rem, 5vw, 4rem); color:var(--gold-deep);
}
.fine__note { margin-top:1rem; font-size:.82rem; color:var(--ink-mute); }

/* ---------- Zähler ---------- */
.counter {
  position:fixed; left:clamp(1.3rem, 4vw, 3rem); bottom:1.4rem; z-index:20;
  display:flex; flex-direction:column; gap:.15rem;
  opacity:0; transition:opacity .5s;
  pointer-events:none;
}
.counter.on { opacity:1; }
.counter__tempo { font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--berry); }
.counter__takt {
  font-weight:600; font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- Coda ---------- */
.coda {
  min-height:80vh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:5rem clamp(1.4rem, 6vw, 6rem);
  max-width:70rem;
}
.coda__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 5vw, 3.8rem); line-height:1.1;
  color:var(--berry); margin-top:1rem; text-wrap:balance;
}
.btn {
  display:inline-block; margin-top:2.4rem;
  font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); background:var(--berry);
  text-decoration:none; border-radius:100px;
  padding:1.15rem 2.5rem;
  transition:background .3s, transform .3s;
}
.btn:hover { background:var(--berry-deep); transform:translateY(-2px); }

/* ---------- Footer ---------- */
.footer {
  text-align:center; padding:3rem 1.4rem 2.4rem;
  background:var(--paper-mid);
}
.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(22px);
  transition:opacity .95s cubic-bezier(.2,.65,.25,1), transform .95s cubic-bezier(.2,.65,.25,1);
  transition-delay:var(--d, 0s);
}
[data-reveal].in { opacity:1; transform:none; }

/* ---------- Mobil & Reduced Motion: native horizontale Spur ---------- */
@media (max-width:860px) {
  .score-wrap { height:auto !important; }
  .score-sticky { position:static; height:auto; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
  .score-track { transform:none !important; }
  .bar { min-height:78vh; scroll-snap-align:center; flex-basis:82vw; }
  .bar h2 { margin-top:215px; }
  .score-open, .fine { scroll-snap-align:center; }
  .counter { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .hero__hint::after { animation:none; }
  .score-wrap { height:auto !important; }
  .score-sticky { position:static; height:auto; overflow-x:auto; }
  .score-track { transform:none !important; }
  .bar { min-height:78vh; }
  .counter { display:none; }
}