/* ============================================================
   Lab 10 — Das Kabinett · Wunderkammer der Skills
   Pflaume-Vitrinen mit Glastüren (CSS-3D), Messing-Plaketten.
   ============================================================ */

@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; --plum-deep:#2A0F22; --plum-soft:#5C2A4D;
  --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;
}

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

/* ---------- Hero ---------- */
.hero {
  min-height:74vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:7rem clamp(1.4rem, 6vw, 6rem) 3rem;
  max-width:72rem; margin:0 auto;
}
.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__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.2rem, 9vw, 7rem); line-height:1.02;
  color:var(--berry); margin-top:1.1rem;
}
.lead {
  margin-top:1.6rem; max-width:36em;
  font-size:clamp(1rem, 1.4vw, 1.12rem); line-height:1.8; color:var(--ink-soft);
}
.hero__hint {
  margin-top:1.8rem;
  font-family:var(--serif); font-style:italic;
  font-size:.98rem; color:var(--gold-deep);
}

/* ---------- Galerie ---------- */
.gallery {
  max-width:72rem; margin:0 auto;
  padding:2rem clamp(1.4rem, 6vw, 6rem) 5rem;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:clamp(1.8rem, 4vw, 3rem);
}

.exhibit { display:flex; flex-direction:column; }

/* Vitrine */
.vitrine {
  position:relative;
  aspect-ratio:4/4.6;
  border:0; padding:0;
  cursor:pointer;
  background:var(--plum-deep);
  box-shadow:
    inset 0 0 46px rgba(0,0,0,.55),
    0 0 0 1px var(--gold-deep),
    0 0 0 6px var(--plum),
    0 0 0 7px rgba(168,133,63,.65),
    0 18px 34px rgba(58,21,48,.22);
  perspective:900px;
  overflow:visible;
}
.vitrine__interior {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; padding:1.4rem;
}
.artifact {
  width:56%; height:auto;
  stroke:var(--gold); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(200,165,91,.35));
  transition:transform .8s cubic-bezier(.2,.65,.25,1);
}
.artifact .dot { fill:var(--gold); stroke:none; }
.vitrine.open .artifact { transform:scale(1.06); }
.vitrine__caption {
  font-family:var(--serif); font-style:italic;
  font-size:.92rem; line-height:1.55; color:var(--gold-soft);
  text-align:center; max-width:20em;
  opacity:0; transform:translateY(8px);
  transition:opacity .7s ease .25s, transform .7s ease .25s;
}
.vitrine.open .vitrine__caption { opacity:1; transform:none; }

/* Glastüren */
.vitrine__door {
  position:absolute; top:0; bottom:0; width:50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.16) 100%);
  border:1px solid rgba(220,192,137,.5);
  backdrop-filter:blur(1.6px);
  -webkit-backdrop-filter:blur(1.6px);
  transition:transform 1s cubic-bezier(.3,.75,.25,1);
  z-index:2;
}
.vitrine__door--l { left:0; transform-origin:left center; }
.vitrine__door--r { right:0; transform-origin:right center; }
.vitrine.open .vitrine__door--l { transform:rotateY(-104deg); }
.vitrine.open .vitrine__door--r { transform:rotateY(104deg); }
.vitrine__handle {
  position:absolute; top:50%; width:4px; height:26px;
  background:var(--gold); border-radius:3px;
  transform:translateY(-50%);
}
.vitrine__door--l .vitrine__handle { right:6px; }
.vitrine__door--r .vitrine__handle { left:6px; }

.vitrine:focus-visible { outline:3px solid var(--gold); outline-offset:8px; }

/* Messing-Plakette */
.plaque {
  margin:1.2rem auto 0;
  text-align:center;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  border:1px solid var(--gold-deep);
  padding:.8rem 1.3rem .9rem;
  min-width:76%;
  box-shadow:0 2px 6px rgba(58,21,48,.18);
}
.plaque__no {
  font-weight:600; font-size:.58rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--plum);
  opacity:.75;
}
.plaque__name {
  font-family:var(--serif); font-weight:400;
  font-size:1.18rem; color:var(--plum-deep);
  margin-top:.25rem;
}
.plaque__origin {
  margin-top:.3rem;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--plum-soft); font-weight:500;
}

/* ---------- Outro ---------- */
.outro {
  text-align:center;
  padding:3rem 1.5rem 7rem;
  max-width:46rem; margin:0 auto;
}
.outro__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 5.4vw, 3.8rem); line-height:1.1;
  color:var(--berry);
}
.outro__text { margin-top:1.3rem; color:var(--ink-soft); font-size:1rem; line-height:1.8; }
.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;
}
.btn:hover { background:var(--berry-deep); }

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

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