/* ============================================================
   ESSE — Aufbau (Signature-Pin-Sequenz)
   ============================================================ */
.aufbau__pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.aufbau__kicker {
  position: absolute;
  top: var(--space-8);
  left: var(--gutter);
}

.aufbau__temp {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  transform: translateY(-50%);
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  font-size: var(--text-h2);
  color: var(--detail);
  font-variant-numeric: tabular-nums;
}
.aufbau__temp span:last-child {
  font-size: 1.2rem;
}
.aufbau__temp.is-sear .aufbau__tempval {
  color: var(--ember-bright);
}

.aufbau__stack {
  position: relative;
  width: min(30vw, 42vh);
  height: 55vh;
}
.aufbau__layer {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  /* Kein transform hier: GSAP animiert y/yPercent auf diesem Element und wuerde
     eine hier gesetzte CSS-transform ueberschreiben. Zentrierung passiert per
     yPercent:-50 in aufbau.js, konstant ueber die gesamte Sequenz. */
}
.aufbau__layer .cutout__img img { width: 100%; height: auto; }
.aufbau__layer .cutout__shadow {
  height: 8%;
  bottom: -2%;
}

.aufbau__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.aufbau__lines path {
  fill: none;
  stroke: var(--detail);
  stroke-width: 1;
}

.aufbau__annotations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.aufbau__annotation {
  position: absolute;
  max-width: 22ch;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
}
.aufbau__annotation--left { text-align: right; left: 4%; }
.aufbau__annotation--right { text-align: left; right: 4%; }
.aufbau__annotation b {
  display: block;
  color: var(--ink);
  font-weight: 400;
}

.aufbau__sear {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--ember-bright) 0%, var(--accent) 35%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.aufbau__smoke {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.aufbau__smoke img { width: 100%; height: 100%; object-fit: cover; }

.aufbau__schluss {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  max-width: 28ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  overflow: hidden;
}

/* Mobile: kein Pin, statische Darstellung der Annotationen (eine sichtbar) */
@media (max-width: 768px) {
  .aufbau { height: auto; }
  .aufbau__pin { height: auto; padding: var(--section-pad) var(--gutter); }
  .aufbau__lines { display: none; }
  .aufbau__annotations { position: static; }
  .aufbau__annotation {
    position: static;
    max-width: none;
    text-align: center;
    margin-top: var(--space-2);
  }
  .aufbau__temp { position: static; transform: none; justify-content: center; margin-bottom: var(--space-4); }
  .aufbau__stack { width: 70vw; height: 40vh; margin-bottom: var(--space-4); }
  .aufbau__schluss { position: static; transform: none; margin-top: var(--space-6); }
}