/* ============================================================
   Lab 01 — Ouvertüre · Maestra Lounge
   Pflaume-Nacht, goldene Taktstock-Linie (Three.js), Programmheft
   ============================================================ */

@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-soft:#A84A8A;
  --gold:#C8A55B; --gold-deep:#A8853F; --gold-soft:#DCC089;
  --plum:#3A1530; --plum-deep:#2A0F22; --plum-soft:#5C2A4D;
  --paper:#FBF8F3; --paper-mid:#F3EDE2; --paper-deep:#E8DDC8;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--plum) 0%, var(--plum-deep) 62%) fixed,
    var(--plum-deep);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection { background:var(--gold); color:var(--plum-deep); }

/* ---------- Bühne (Canvas + Vignette) ---------- */
#stage { position:fixed; inset:0; width:100%; height:100%; z-index:0; }
.vignette {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(26,8,20,.55) 100%),
    linear-gradient(to bottom, rgba(26,8,20,.35), transparent 18%, transparent 85%, rgba(26,8,20,.5));
}

header, main, footer, .movements-nav { position:relative; z-index:2; }

/* ---------- Kopfzeile ---------- */
.top {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.4rem, 4vw, 3.2rem);
  transition:background .5s ease, backdrop-filter .5s ease, padding .5s ease;
}
.top.is-scrolled {
  background:rgba(42,15,34,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:.9rem;
}
.wordmark { text-decoration:none; display:flex; align-items:baseline; gap:.55em; }
.wordmark__maestra {
  font-family:var(--serif); font-size:1.25rem; color:var(--paper); letter-spacing:.02em;
}
.wordmark__lounge {
  font-family:var(--sans); font-weight:600; font-size:.62rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
}
.top__cta {
  font-family:var(--sans); font-weight:500; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-soft); text-decoration:none;
  padding-bottom:.25em; border-bottom:1px solid rgba(200,165,91,.35);
  transition:border-color .3s, color .3s;
}
.top__cta:hover { color:var(--gold); border-color:var(--gold); }
@media (max-width:520px) {
  .top { padding-inline:1.1rem; }
  .top__cta { font-size:.62rem; letter-spacing:.1em; }
  .wordmark__lounge { letter-spacing:.22em; }
}

/* ---------- Satz-Navigation (rechte Kante) ---------- */
.movements-nav {
  position:fixed; right:clamp(.9rem, 2.4vw, 2.2rem); top:50%; transform:translateY(-50%);
  z-index:9; display:flex; flex-direction:column; gap:1.5rem;
}
.movements-nav a {
  font-family:var(--serif); font-style:italic; font-size:.95rem;
  color:rgba(251,248,243,.32); text-decoration:none; text-align:center;
  transition:color .4s, transform .4s;
}
.movements-nav a:hover { color:var(--gold-soft); }
.movements-nav a.is-active { color:var(--gold); transform:scale(1.25); }
@media (max-width:720px) { .movements-nav { display:none; } }

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

/* ---------- Hero ---------- */
.hero {
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.4rem, 6vw, 6rem);
  max-width:62rem;
}
.hero__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 7.2vw, 5.6rem);
  line-height:1.08; letter-spacing:-.01em;
  margin-top:1.4rem; max-width:14em;
  text-wrap:balance;
}
.lead {
  margin-top:2rem; max-width:36em;
  font-size:clamp(1rem, 1.5vw, 1.14rem); line-height:1.8;
  color:rgba(251,248,243,.78);
}
.hero__hint {
  margin-top:4.5rem; display:flex; align-items:center; gap:1rem;
}
.hero__hint-line {
  display:block; width:1px; height:52px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:hintPulse 2.6s ease-in-out infinite;
  transform-origin:top;
}
.hero__hint-text {
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(251,248,243,.45);
}
@keyframes hintPulse { 0%,100% { transform:scaleY(.55); opacity:.5; } 50% { transform:scaleY(1); opacity:1; } }

/* ---------- Sätze ---------- */
.movement {
  min-height:108vh;
  display:flex; align-items:center;
  padding:0 clamp(1.4rem, 6vw, 6rem);
  position:relative;
}
.movement__body {
  max-width:31rem; position:relative;
  padding:3.2rem 0;
}
/* Lesbarkeits-Bühne hinter dem Text, ohne Kante */
.movement__body::before {
  content:""; position:absolute; inset:-3rem -4rem; z-index:-1;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, rgba(42,15,34,.8), transparent 72%);
}
.movement--right { justify-content:flex-end; }
.movement__numeral {
  position:absolute; top:50%; transform:translateY(-52%);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(11rem, 30vw, 24rem); line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(200,165,91,.22);
  user-select:none; pointer-events:none;
  left:clamp(1rem, 4vw, 4rem);
}
.movement--right .movement__numeral { left:auto; right:clamp(1rem, 4vw, 4rem); }
.movement__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.12;
  margin-top:1.1rem;
}
.movement__text {
  margin-top:1.3rem; font-size:1.02rem; line-height:1.8;
  color:rgba(251,248,243,.75);
}

/* ---------- Zitat ---------- */
.quote {
  min-height:80vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:6rem clamp(1.4rem, 6vw, 6rem);
  position:relative;
}
.quote::before {
  content:""; position:absolute; inset:8% 12%; z-index:-1;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, rgba(42,15,34,.85), transparent 70%);
}
.quote__mark {
  font-family:var(--serif); font-size:7rem; line-height:.4;
  color:var(--gold); opacity:.85; display:block; margin-bottom:1.6rem;
}
.quote__text {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.8rem, 4vw, 3rem); line-height:1.3;
  max-width:18em;
}
.quote__author {
  margin-top:2.2rem;
  font-family:var(--sans); font-weight:600; font-size:.7rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft);
}

/* ---------- Besetzung ---------- */
.cast {
  display:flex; justify-content:center;
  padding:4rem clamp(1.4rem, 6vw, 6rem) 8rem;
}
.cast__card {
  width:min(34rem, 100%);
  border:1px solid rgba(200,165,91,.32);
  padding:clamp(2rem, 5vw, 3.2rem) clamp(1.6rem, 4.5vw, 3rem);
  background:rgba(42,15,34,.66);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.cast__header {
  font-family:var(--sans); font-weight:600; font-size:.68rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  text-align:center; margin-bottom:2rem;
}
.cast__row {
  display:flex; align-items:baseline; gap:.15em;
  margin-bottom:1.05rem;
}
.cast__row dt {
  font-family:var(--serif); font-style:italic; font-size:1.04rem;
  color:rgba(251,248,243,.85); white-space:nowrap;
}
.cast__dots {
  flex:1; border-bottom:1px dotted rgba(200,165,91,.38);
  margin:0 .7em; transform:translateY(-.28em);
}
.cast__row dd {
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  color:var(--paper); text-align:right; white-space:nowrap;
}
@media (max-width:480px) {
  .cast__row dd { white-space:normal; max-width:55%; }
}

/* ---------- Finale / CTA ---------- */
.finale {
  min-height:88vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:4rem clamp(1.4rem, 6vw, 6rem);
  position:relative;
}
.finale::before {
  content:""; position:absolute; inset:2% 6%; z-index:-1;
  background:radial-gradient(ellipse 90% 90% at 50% 50%, rgba(42,15,34,.88), transparent 72%);
}
.finale__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 5.6vw, 4.4rem); line-height:1.12;
  max-width:16em; text-wrap:balance;
}
.finale__text {
  margin-top:1.6rem; max-width:34em;
  font-size:1.02rem; line-height:1.8; color:rgba(251,248,243,.75);
}
.finale__actions {
  margin-top:3rem; display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.btn {
  font-family:var(--sans); font-weight:600; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); text-decoration:none;
  border:1px solid rgba(200,165,91,.55);
  border-radius:100px;
  padding:1.15rem 2.6rem;
  transition:background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
  animation:edgeGlow 8s ease-in-out infinite;
}
.btn:hover, .btn:focus-visible {
  background:var(--gold); color:var(--plum-deep); border-color:var(--gold);
  animation:none;
}
.btn:focus-visible { outline:2px solid var(--gold-soft); outline-offset:4px; }
@keyframes edgeGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(200,165,91,0); }
  50% { box-shadow:0 0 26px 2px rgba(200,165,91,.22); }
}
.finale__mail {
  font-size:.82rem; letter-spacing:.06em; color:rgba(251,248,243,.5);
  text-decoration:none; border-bottom:1px solid rgba(251,248,243,.2);
  padding-bottom:.15em; transition:color .3s, border-color .3s;
}
.finale__mail:hover { color:var(--gold-soft); border-color:rgba(200,165,91,.5); }

/* ---------- Footer ---------- */
.footer {
  text-align:center; padding:3.4rem 1.4rem 2.6rem;
  border-top:1px solid rgba(200,165,91,.16);
}
.footer__firm {
  font-family:var(--sans); font-weight:600; font-size:.68rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft);
}
.footer__meta { margin-top:.7rem; font-size:.74rem; color:rgba(251,248,243,.42); }
.footer__lab { margin-top:1.5rem; font-size:.68rem; letter-spacing:.12em; }
.footer__lab a { color:rgba(200,165,91,.6); text-decoration:none; }
.footer__lab a:hover { color:var(--gold); }

/* ---------- Saal-Klang (opt-in) ---------- */
.soundtoggle {
  position:fixed; left:clamp(1rem, 3vw, 2.2rem); bottom:1.3rem; z-index:12;
  display:flex; align-items:center; gap:.5rem;
  background:rgba(42,15,34,.55);
  border:1px solid rgba(200,165,91,.4);
  border-radius:100px;
  color:rgba(220,192,137,.85);
  font-family:var(--sans); font-weight:600; font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase;
  padding:.55rem 1rem .55rem .8rem;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:color .3s, border-color .3s, background .3s;
}
.soundtoggle:hover { color:var(--gold); border-color:var(--gold); }
.soundtoggle:focus-visible { outline:2px solid var(--gold-soft); outline-offset:3px; }
.soundtoggle .wave { opacity:0; transition:opacity .3s; }
.soundtoggle[aria-pressed="true"] { background:rgba(200,165,91,.16); color:var(--gold-soft); }
.soundtoggle[aria-pressed="true"] .wave { opacity:1; }

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

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .hero__hint-line, .btn { animation:none; }
  .top { transition:none; }
}