/* ============================================================
   Lab 04 — Die Stimmprobe · KI-Standortbestimmung
   Paper-Welt, Instrumenten-Präzision, generatives Klangbild.
   ============================================================ */

@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; --berry-soft:#A84A8A;
  --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;
}

* { 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;
  min-height:100vh;
  display:flex; flex-direction:column;
}

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

/* ---------- Fortschritt ---------- */
.progress {
  position:fixed; top:0; left:0; right:0; height:2px;
  background:var(--paper-deep); z-index:10;
}
.progress__fill {
  height:100%; width:0%;
  background:linear-gradient(to right, var(--gold-deep), var(--gold));
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}

/* ---------- Kopf ---------- */
.top {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:1.6rem clamp(1.4rem, 4vw, 3rem) 0;
}
.top__brand { font-family:var(--serif); font-size:1.2rem; color:var(--berry); }
.top__label {
  font-weight:600; font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-deep);
}

/* ---------- Bühnen ---------- */
#app { flex:1; display:grid; }
.stage {
  grid-area:1/1;
  max-width:46rem; width:100%;
  margin:0 auto;
  padding:clamp(2.5rem, 7vh, 5rem) 1.5rem 3rem;
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease, visibility 0s .6s;
}
.stage.is-active {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .6s ease .15s, transform .6s ease .15s, visibility 0s;
}

/* ---------- Intro ---------- */
.stage--intro { text-align:center; }
.tuning {
  display:flex; justify-content:center; align-items:flex-end; gap:6px;
  height:56px; margin-bottom:2.4rem;
}
.tuning span {
  width:2px; background:var(--gold);
  height:calc(14px + var(--h, 0) * 1px);
  animation:tune 2.8s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .12s);
  transform-origin:bottom;
}
.tuning span:nth-child(1){--i:0;--h:6} .tuning span:nth-child(2){--i:1;--h:16}
.tuning span:nth-child(3){--i:2;--h:28} .tuning span:nth-child(4){--i:3;--h:38}
.tuning span:nth-child(5){--i:4;--h:26} .tuning span:nth-child(6){--i:5;--h:34}
.tuning span:nth-child(7){--i:6;--h:42} .tuning span:nth-child(8){--i:7;--h:30}
.tuning span:nth-child(9){--i:8;--h:20} .tuning span:nth-child(10){--i:9;--h:36}
.tuning span:nth-child(11){--i:10;--h:24} .tuning span:nth-child(12){--i:11;--h:14}
.tuning span:nth-child(13){--i:12;--h:32} .tuning span:nth-child(14){--i:13;--h:18}
.tuning span:nth-child(15){--i:14;--h:8}
@keyframes tune { 0%,100% { transform:scaleY(.55); } 50% { transform:scaleY(1); } }

.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); }

.intro__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem, 6vw, 4.2rem); line-height:1.1;
  color:var(--berry);
  margin-top:1.2rem;
}
.lead {
  margin:1.7rem auto 0; max-width:34em;
  font-size:1.04rem; line-height:1.8; color:var(--ink-soft);
}
.intro__note { margin-top:1.2rem; font-size:.78rem; color:var(--ink-mute); }

/* ---------- Buttons ---------- */
.btn-berry, .btn-gold {
  display:inline-block; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:100px; padding:1.1rem 2.4rem;
  text-decoration:none; border:0;
  transition:background .3s, transform .3s;
}
.btn-berry { margin-top:2.4rem; background:var(--berry); color:var(--paper); }
.btn-berry:hover { background:var(--berry-deep); transform:translateY(-2px); }
.btn-gold { background:transparent; color:var(--gold-deep); border:1px solid var(--gold); }
.btn-gold:hover { background:var(--gold); color:var(--plum); }

/* ---------- Quiz ---------- */
.quiz__count {
  font-weight:600; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-deep);
}
.quiz__question {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem, 4.2vw, 2.7rem); line-height:1.2;
  color:var(--ink);
  margin-top:1rem; min-height:2.5em;
  text-wrap:balance;
}
.quiz__options { margin-top:2.2rem; display:grid; gap:.85rem; }
.opt {
  display:flex; align-items:baseline; gap:1rem; text-align:left;
  width:100%; cursor:pointer;
  background:var(--paper); border:1px solid var(--paper-deep);
  border-radius:14px;
  padding:1.15rem 1.4rem;
  font-family:var(--sans); font-size:.98rem; line-height:1.55; color:var(--ink-soft);
  transition:border-color .25s, background .25s, transform .25s;
}
.opt:hover, .opt:focus-visible {
  border-color:var(--gold); background:var(--paper-mid);
  transform:translateX(4px);
}
.opt:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.opt.chosen { border-color:var(--berry); background:var(--paper-mid); }
.opt__key {
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--gold-deep); flex-shrink:0;
}
.quiz__hint { margin-top:1.6rem; font-size:.76rem; color:var(--ink-mute); }

/* ---------- Ergebnis ---------- */
.stage--result { text-align:center; max-width:52rem; }
.result__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.12;
  color:var(--berry); margin-top:1rem;
}
.result__text {
  margin:1.4rem auto 0; max-width:36em;
  font-size:1.02rem; line-height:1.8; color:var(--ink-soft);
}
.result__canvas-wrap {
  margin:2.4rem auto 0; max-width:560px;
}
#klangbild { width:100%; height:auto; display:block; }
.result__actions {
  margin-top:2rem;
  display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap;
}
.result__actions .btn-berry { margin-top:0; }
.result__restart {
  margin-top:1.6rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.8rem; color:var(--ink-mute);
  border-bottom:1px solid var(--paper-deep); padding-bottom:.2em;
  transition:color .3s, border-color .3s;
}
.result__restart:hover { color:var(--berry); border-color:var(--berry); }

/* ---------- Footer ---------- */
.footer {
  text-align:center; padding:2.6rem 1.4rem 2.2rem;
  border-top:1px solid var(--paper-deep);
}
.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); }

@media (prefers-reduced-motion: reduce) {
  .tuning span { animation:none; }
  .stage { transition:none; }
  .progress__fill { transition:none; }
  .opt { transition:none; }
}