/* ============================================================
   HackLab — 04 Scrollytelling Data Experience
   Die Seite IST die Pipeline. Scrollen = Datenveredelung.
   ============================================================ */

:root{
  --ink: #f4efe4;
  --ink-dim: rgba(244,239,228,.68);
  --ink-faint: rgba(244,239,228,.6);
  --line: rgba(244,239,228,.16);

  --base-bg: #0b0906;

  --bronze-1: #1d130a;
  --bronze-2: #2c1a0c;
  --bronze-accent: #d68a45;
  --bronze-accent-2: #8a4a1f;

  --silver-1: #10141a;
  --silver-2: #1b232c;
  --silver-accent: #cfd9e2;
  --silver-accent-2: #6f889c;

  --gold-1: #1c1509;
  --gold-2: #2f2308;
  --gold-accent: #f2b736;
  --gold-accent-2: #b9852a;

  --agentic-1: #05060d;
  --agentic-2: #0b0d1d;
  --agentic-accent: #5be3ff;
  --agentic-accent-2: #9d7bff;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.16,.84,.32,1);
  --medallion-w: 88px;
}

*, *::before, *::after{ box-sizing: border-box; }
/* scroll-behavior bewusst NICHT smooth: kollidiert mit GSAP ScrollTrigger-Scrub
   (native Smooth-Scroll-Animationen unterbrechen/verzögern programmatic scrollTo,
   was gepinnte Szenen und Screenshot-Tooling durcheinanderbringt). Anker-Klicks
   springen daher hart — bewusster Trade-off für verlässliches Scroll-Timing. */
html{ scroll-behavior: auto; }

body{
  margin:0;
  background: var(--base-bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }

::selection{ background: var(--gold-accent); color:#1c1509; }

/* dezente, markige Scrollbar statt Browser-Default */
html{ scrollbar-width: thin; scrollbar-color: var(--gold-accent-2) rgba(255,255,255,.05); }
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb{ background: var(--gold-accent-2); border-radius: 6px; border: 2px solid var(--base-bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold-accent); }

a{ color:inherit; }

.mono{ font-family: var(--font-mono); letter-spacing: .04em; }

:focus-visible{
  outline: 2px solid var(--gold-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 60;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 48px);
  padding-left: calc(var(--medallion-w) + clamp(20px,4vw,48px));
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,5,3,.78) 0%, rgba(6,5,3,.5) 60%, transparent 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 65%, transparent 100%);
}
.topbar > *{ pointer-events: auto; }
.topbar__brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  letter-spacing: -.01em;
}
.topbar__suffix{ color: var(--gold-accent); }
.topbar__links{
  display:flex;
  gap: 28px;
  list-style:none;
  margin:0; padding:0;
  font-size:.82rem;
  font-family: var(--font-mono);
  letter-spacing:.02em;
}
.topbar__links a{
  text-decoration:none;
  color: var(--ink-dim);
  position:relative;
  transition: color .2s var(--ease);
}
.topbar__links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:-4px;
  height:1px; background: var(--gold-accent);
  transition: right .25s var(--ease);
}
.topbar__links a:hover{ color: var(--ink); }
.topbar__links a:hover::after{ right:0; }
.topbar__cta{
  font-family: var(--font-mono);
  font-size:.8rem;
  text-decoration:none;
  border:1px solid var(--line);
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.topbar__cta:hover{ border-color: var(--gold-accent); background: rgba(242,183,54,.08); }

@media (max-width: 720px){
  .topbar__links{ display:none; }
  .topbar{ padding-left: clamp(16px,6vw,28px); padding-top: 14px; }
}

/* ============================================================
   MEDALLION — signature progress rail
   ============================================================ */
.medallion{
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  height: 46vh;
  min-height: 280px;
  max-height: 420px;
  display:flex;
  align-items:center;
}
.medallion__track{
  position:absolute;
  left: 9px; top:0; bottom:0;
  width:2px;
  background: var(--line);
}
.medallion__fill{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:0%;
  background: linear-gradient(180deg, var(--bronze-accent), var(--silver-accent) 33%, var(--gold-accent) 66%, var(--agentic-accent));
  transform-origin: top;
}
.medallion__nodes{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  width:100%;
}
.medallion__node{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}
.medallion__dot{
  width:18px; height:18px;
  border-radius:50%;
  background: var(--base-bg);
  border: 2px solid var(--line);
  flex: none;
  transition: border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.medallion__label{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity:0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .4s var(--ease);
  white-space: nowrap;
}
.medallion:hover .medallion__label{ opacity:1; transform:none; }
.medallion__node:hover .medallion__dot{ transform: scale(1.3); }

.medallion__stage-label{ display:none; }

.medallion__node[data-stage="bronze"].is-active .medallion__dot{ border-color: var(--bronze-accent); background: var(--bronze-accent); box-shadow: 0 0 14px var(--bronze-accent); animation: medallionPulse .5s var(--ease); }
.medallion__node[data-stage="silver"].is-active .medallion__dot{ border-color: var(--silver-accent); background: var(--silver-accent); box-shadow: 0 0 14px var(--silver-accent); animation: medallionPulse .5s var(--ease); }
.medallion__node[data-stage="gold"].is-active .medallion__dot{ border-color: var(--gold-accent); background: var(--gold-accent); box-shadow: 0 0 14px var(--gold-accent); animation: medallionPulse .5s var(--ease); }
.medallion__node[data-stage="agentic"].is-active .medallion__dot{ border-color: var(--agentic-accent); background: var(--agentic-accent); box-shadow: 0 0 14px var(--agentic-accent); animation: medallionPulse .5s var(--ease); }
.medallion__node.is-active .medallion__label{ color: var(--ink); opacity:1; transform:none; }

@keyframes medallionPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.55); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .medallion__dot{ animation: none !important; }
}

@media (max-width: 720px){
  .medallion{
    left:0; right:0; top: 0; transform:none;
    height: 4px; min-height:0; max-height:none;
    width:100%;
    align-items: stretch;
  }
  .medallion__track{ left:0; right:0; top:0; bottom:auto; height:3px; width:auto; }
  .medallion__fill{ height:100%; width:0%; }
  .medallion__nodes{ display:none; }
  /* compact progress element: the bar communicates "how far", this pill
     communicates "in which climate" — keeps the medallion feeling like a
     pipeline indicator rather than a plain loading bar. */
  .medallion__stage-label{
    display:block;
    position: fixed;
    /* below the mobile topbar (brand left, CTA right) — never colliding */
    top: 62px; right: 14px;
    z-index: 71;
    font-size:.64rem;
    letter-spacing:.08em;
    text-transform: uppercase;
    color: var(--ink);
    background: rgba(11,9,6,.72);
    border: 1px solid var(--line);
    padding: 5px 11px;
    border-radius: 999px;
    pointer-events:none;
    opacity:0;
    transition: opacity .3s var(--ease);
  }
  .medallion__stage-label.is-active{ opacity:1; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height: 100svh;
  padding: 140px clamp(20px,6vw,90px) 80px;
  padding-left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(214,138,69,.20), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(157,123,255,.10), transparent 55%),
    var(--base-bg);
  overflow: hidden;
}
.hero__noise{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__kicker{
  font-size:.78rem;
  color: var(--gold-accent);
  margin: 0 0 28px;
}
.hero__title-wrap{ position:relative; overflow:hidden; }
.hero__title{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.8rem, 7.4vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0 0 30px;
  max-width: 18ch;
}
.hero__title-accent{ font-weight: 800; letter-spacing: -.035em; }
/* one-time opening sweep: a light band in the four climate colours crosses
   the H1 once on load (see script.js heroIntro()) — visualizes "the brand
   travels the same journey the data does". Default state is invisible/off-
   screen so pages without JS (or with prefers-reduced-motion) never show it. */
.hero__lightband{
  position:absolute;
  top:-30%; bottom:-30%; left:0;
  width:46%;
  background: linear-gradient(100deg, transparent 0%, var(--bronze-accent) 20%, var(--silver-accent) 44%, var(--gold-accent) 68%, var(--agentic-accent) 90%, transparent 100%);
  mix-blend-mode: overlay;
  opacity:0;
  transform: translateX(-220%);
  pointer-events:none;
  z-index:2;
}
.hero__sub{
  max-width: 56ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-dim);
  margin: 0 0 40px;
}
.hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 36px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-size:.88rem;
  text-decoration:none;
  padding: 15px 28px;
  border-radius: 999px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary{
  background: var(--gold-accent);
  color: #1c1509;
  font-weight: 600;
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(242,183,54,.30); }
.btn--ghost{
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn--ghost:hover{ border-color: var(--ink); background: rgba(244,239,228,.06); }
.btn--large{ padding: 20px 40px; font-size: 1rem; }

.hero__status{ font-size:.78rem; color: var(--ink-faint); margin: 0 0 64px; }
.hero__status .dot{ margin: 0 6px; color: var(--gold-accent); }

.hero__pipeline{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 900px;
}
.pstage{
  background: rgba(10,8,6,.65);
  padding: 20px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.pstage:nth-child(1){ transform: translateY(6px); }
.pstage:nth-child(3){ transform: translateY(-4px); }
.pstage:hover{ background: rgba(244,239,228,.05); }
.pstage__num{ font-size:.68rem; color: var(--ink-faint); }
.pstage__name{ font-family: var(--font-mono); font-weight:700; font-size:.92rem; letter-spacing:.06em; }
.pstage[data-stage="bronze"] .pstage__name{ color: var(--bronze-accent); }
.pstage[data-stage="silver"] .pstage__name{ color: var(--silver-accent); }
.pstage[data-stage="gold"] .pstage__name{ color: var(--gold-accent); }
.pstage[data-stage="agentic"] .pstage__name{ color: var(--agentic-accent); }
.pstage__desc{ font-size:.76rem; color: var(--ink-faint); }

.hero__scrollhint{
  position:absolute;
  bottom: 28px; left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
  font-size:.72rem;
  color: var(--ink-faint);
  display:flex;
  align-items:center;
  gap:8px;
}
.hero__scrollhint-arrow{ display:inline-block; animation: scrollhintBounce 2.4s ease-in-out infinite; }
@keyframes scrollhintBounce{
  0%, 100%{ transform: translateY(0); opacity:.7; }
  50%{ transform: translateY(5px); opacity:1; }
}

/* subtle preview strip: hints the four-stage colour journey before the
   visitor ever scrolls. Static + fully visible by default (safe with no JS /
   reduced-motion); script.js grows it in from 0 as part of the one-time
   opening choreography. */
.hero__climate-preview{
  position:absolute;
  left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
  right: clamp(20px,6vw,90px);
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bronze-accent), var(--silver-accent) 33%, var(--gold-accent) 66%, var(--agentic-accent));
  opacity:.5;
  transform-origin: left center;
}

@media (max-width: 720px){
  .hero{ padding-left: clamp(20px,6vw,90px); padding-top:120px; }
  .hero__scrollhint{ left: clamp(20px,6vw,90px); }
  .hero__pipeline{ grid-template-columns: repeat(2, 1fr); }
  .pstage:nth-child(1),.pstage:nth-child(3){ transform:none; }
}

/* ============================================================
   SCENES — shared runway / pin mechanics
   ============================================================ */
.scene{ position: relative; }
.scene__runway{ position: relative; height: 200vh; }
.scene__runway--gold{ height: 200vh; }
.scene__runway--agentic{ height: 200vh; }
.scene__pin{
  position: relative;
  height: 100vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 0 clamp(20px,6vw,90px);
  padding-left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
}
.clim-layer{ position:absolute; inset:0; z-index:0; }
.clim-layer--bronze{
  background: radial-gradient(ellipse 1000px 700px at 20% 30%, var(--bronze-2), var(--bronze-1) 70%);
  opacity:1;
}
.clim-layer--silver{
  background: radial-gradient(ellipse 1000px 700px at 80% 60%, var(--silver-2), var(--silver-1) 70%);
  opacity:0;
}
.clim-layer--gold{ background: radial-gradient(ellipse 1100px 800px at 50% 20%, var(--gold-2), var(--gold-1) 70%); }
.clim-layer--agentic{ background: radial-gradient(ellipse 1100px 800px at 50% 80%, var(--agentic-2), var(--agentic-1) 70%); }

.scene__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene__content{ position:relative; z-index:2; max-width: 980px; }
.scene__stagelabel{
  position:absolute; z-index:2;
  bottom: 32px; left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
  font-size:.72rem;
  color: var(--ink-faint);
}
.scene__stagelabel [data-beat-label]{ display:none; }

.kicker{ font-size:.72rem; color: var(--ink-faint); margin:0 0 18px; letter-spacing:.16em; text-transform:uppercase; }
.kicker--gold{ color: var(--gold-accent); }
.kicker--silver{ color: var(--silver-accent); }
.kicker--bronze{ color: var(--bronze-accent); }
/* Spacing-Modifier (ersetzen die früheren Inline-Styles aus RUN 7) */
.kicker--block-gap{ margin-top: 64px; }
.kicker--tight{ margin-bottom: 16px; }
.h2{
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  letter-spacing: -.03em;
  margin: 0 0 26px;
  line-height: .98;
}
.h2--light{ color: var(--ink); }
.h2--cta{ font-weight: 200; max-width: 16ch; }
.lede{ max-width: 62ch; font-size: clamp(1rem,1.3vw,1.15rem); color: var(--ink-dim); margin:0 0 34px; }
.lede--light{ color: var(--ink-dim); }

/* --- foundation beats --- */
.beat{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; }
.scene__content{ position:relative; height: 100%; }
.beat--bronze{ opacity:1; }
.beat--silver{ }

.rawtags{ display:flex; flex-wrap:wrap; gap:10px; max-width: 640px; margin-top: 6px; }
.rawtag{
  font-size:.72rem;
  padding: 7px 12px;
  border: 1px solid rgba(214,138,69,.4);
  color: var(--bronze-accent);
  border-radius: 5px;
  background: rgba(214,138,69,.06);
}
.rawtag:nth-child(2n){ transform: rotate(-1.4deg); }
.rawtag:nth-child(3n){ transform: rotate(1deg); }

/* climate-coloured tag variants — fill the lower half of the silver / gold /
   agentic beats with the same raw-technical-string texture the bronze beat
   already established, so no mid-scroll composition ever reads as empty. */
.rawtag--silver{ border-color: rgba(207,217,226,.4); color: var(--silver-accent); background: rgba(207,217,226,.06); }
.rawtag--gold{ border-color: rgba(242,183,54,.4); color: var(--gold-accent); background: rgba(242,183,54,.06); }
.rawtag--agentic{ border-color: rgba(91,227,255,.4); color: var(--agentic-accent); background: rgba(91,227,255,.06); }
.rawtags--silver, .rawtags--gold, .rawtags--agentic{ margin-top: 22px; }

.pillar__label{ font-size:.72rem; color: var(--ink-faint); margin:0 0 14px; letter-spacing:.16em; text-transform:uppercase; }
.pillar__title{ font-family: var(--font-display); font-weight:200; font-size: clamp(2rem,4.2vw,3.6rem); margin:0 0 20px; letter-spacing:-.02em; }
.pillar__text{ max-width: 56ch; font-size: 1.05rem; color: var(--ink-dim); margin: 0 0 22px; }
.pillar__proof{ font-size:.82rem; color: var(--ink-faint); max-width: 60ch; }

.scene--foundation .beat--silver .pillar__title{ color: var(--silver-accent); }
.scene--gold .pillar__title{ color: var(--gold-accent); }
.scene--agentic .beat--agents-intro .pillar__title{ color: var(--agentic-accent); }

/* --- gold: numbers --- */
.scene__content--gold{ display:flex; flex-direction: column; gap: 40px; justify-content:center; }
.beat--gold-intro, .beat--numbers{ position:relative; opacity:1; }

.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(242,183,54,.18);
  border: 1px solid rgba(242,183,54,.18);
}
.stat{
  background: rgba(10,8,4,.55);
  padding: 24px 20px;
  display:flex; flex-direction:column; gap:10px;
  transition: background .25s var(--ease);
}
.stat:hover{ background: rgba(242,183,54,.09); }
.stat--wide{ grid-column: span 2; }
.stat--badge{ display:flex; flex-direction:row; align-items:center; gap:14px; grid-column: span 2; }
/* --static: identische Optik ohne Count-up — script.js sammelt .stat__value
   und erwartet data-target; statische Werte (z.B. "2,6x") nutzen diese Variante. */
.stat__value, .stat__value--static{ font-size: clamp(2.2rem,4vw,3.4rem); font-weight:700; color: var(--gold-accent); letter-spacing:-.02em; }
.stat__label{ font-size:.78rem; color: var(--ink-dim); line-height:1.35; }
.stat__siegel{ width:64px; height:auto; flex:none; }

/* --- agentic --- */
.agent-pulse{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.agent-pulse span{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: var(--agentic-accent);
  box-shadow: 0 0 24px 6px var(--agentic-accent);
  left:-10px; top:50%;
}
.scene__content--agentic{ position:relative; height:100%; max-width:1080px; }
.scene--agentic .beat{ display:flex; flex-direction:column; justify-content:center; }
.kicker--agentic{ color: var(--agentic-accent); }
.badge{
  display:inline-block;
  font-size:.72rem;
  color: var(--agentic-accent);
  border: 1px solid rgba(91,227,255,.4);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.cases{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 8px 0 30px; }
.case{
  border: 1px solid rgba(91,227,255,.2);
  background: rgba(91,227,255,.04);
  padding: 26px 24px;
  border-radius: 4px;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.case:hover{ border-color: rgba(91,227,255,.55); background: rgba(91,227,255,.08); transform: translateY(-3px); }
.case--offset{ transform: translateY(22px); }
.case--offset:hover{ transform: translateY(19px); }
.case__tag{ font-size:.7rem; color: var(--agentic-accent); margin:0 0 12px; }
.case__title{ font-family: var(--font-display); font-weight:600; font-size:1.3rem; margin:0 0 10px; }
.case__text{ font-size:.92rem; color: var(--ink-dim); margin:0; }

.moat{ list-style:none; padding:0; margin: 0 0 36px; display:flex; flex-wrap:wrap; gap: 22px; font-size:.78rem; color: var(--ink-faint); }
.moat li::before{ content:'— '; color: var(--agentic-accent); }

/* exhibit staging — screenshots read as a lit museum vitrine (frame,
   spotlight, corner marks, caption plaque), not pasted-in product shots. */
.shots-stage{
  position:relative;
  /* bottom padding must clear the offset ask-shot (translateY 28px) + its
     caption plaque, or the plaque escapes the vitrine frame. */
  padding: 34px clamp(18px,3vw,36px) 64px;
  border: 1px solid rgba(91,227,255,.14);
  border-radius: 12px;
  background: radial-gradient(ellipse 720px 420px at 50% 15%, rgba(91,227,255,.10), transparent 65%);
}
.shots{ position:relative; display:grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items:end; }
.shot{ position:relative; margin:0; transition: transform .3s var(--ease); }
.shot:hover{ transform: translateY(-4px); }
.shot--ask{ transform: translateY(28px); }
.shot--ask:hover{ transform: translateY(24px); }
.shot__frame{
  position:relative;
  border: 1px solid rgba(91,227,255,.25);
  border-radius: 6px;
  overflow:hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.shot:hover .shot__frame{ border-color: rgba(91,227,255,.6); box-shadow: 0 18px 40px rgba(91,227,255,.14); }
.shot__frame::before, .shot__frame::after{
  content:'';
  position:absolute;
  width:14px; height:14px;
  border-color: rgba(91,227,255,.5);
  opacity:.55;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
  pointer-events:none;
  z-index:3;
}
.shot__frame::before{ top:8px; left:8px; border-top:1.5px solid; border-left:1.5px solid; }
.shot__frame::after{ bottom:8px; right:8px; border-bottom:1.5px solid; border-right:1.5px solid; }
.shot:hover .shot__frame::before, .shot:hover .shot__frame::after{ opacity:1; border-color: var(--agentic-accent); }
.shot__frame img{ max-height: 46vh; width:100%; height:auto; object-fit: cover; object-position: top; transition: transform .4s var(--ease); display:block; }
.shot:hover .shot__frame img{ transform: scale(1.03); }
.shot__caption{ margin-top: 10px; font-size:.72rem; letter-spacing:.03em; color: var(--ink-faint); }
.beat--execexp-shots .kicker{ margin-bottom: 26px; }
.shot__label{
  position:absolute; top:10px; right:10px; z-index:2;
  background: rgba(5,6,13,.85);
  color: var(--agentic-accent);
  font-size:.62rem;
  padding: 5px 9px;
  border-radius: 3px;
  border: 1px solid rgba(91,227,255,.4);
}

/* ============================================================
   SEAMS — climate breathing room between pins
   ============================================================ */
.seam{ height: 16vh; position:relative; }
.seam--to-gold{ background: linear-gradient(180deg, var(--silver-1), var(--gold-1)); }
.seam--to-agentic{ background: linear-gradient(180deg, var(--gold-1), var(--agentic-1)); }

/* ============================================================
   EPILOGUE
   ============================================================ */
.epilogue{
  background: linear-gradient(180deg, var(--agentic-1), #0a0808 40%, var(--base-bg));
  padding: 100px clamp(20px,6vw,90px) 0;
  padding-left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
  position:relative;
}
.epi-block{ max-width: 1080px; margin: 0 auto 160px; }
.epi-referenzen{ margin-bottom: 108px; }
.epi-labs{ margin-bottom: 120px; }
.epi-loop{ margin-bottom: 190px; }

.principles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2,1fr); gap: 40px 60px; }
.principle{ border-top: 1px solid var(--line); padding-top: 22px; opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.principle.is-visible{ opacity:1; transform:none; }
.principle:nth-child(2){ transition-delay: .08s; }
.principle:nth-child(3){ transition-delay: .16s; }
.principle:nth-child(4){ transition-delay: .24s; }
.principle__num{ font-size:.72rem; color: var(--gold-accent); }
.principle__title{ font-family: var(--font-display); font-weight:600; font-size:1.4rem; margin: 10px 0 10px; }
.principle__text{ font-size:.92rem; color: var(--ink-dim); margin:0; max-width: 42ch; }

.reflist{ font-family: var(--font-mono); font-size: clamp(1.1rem,2.4vw,1.6rem); display:flex; flex-wrap:wrap; gap: 14px; margin: 0 0 20px; color: var(--ink); }
.reflist span[aria-hidden]{ color: var(--ink-faint); }
.footnote{ font-size:.76rem; color: var(--ink-faint); }

.labs{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 30px; }
.lab{ border: 1px solid var(--line); padding: 30px 26px; border-radius: 4px; opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.lab.is-visible{ opacity:1; transform:none; }
.lab--b{ transform: translateY(26px); transition-delay: .1s; }
.lab--b.is-visible{ transform:none; }
.lab:hover{ border-color: var(--gold-accent); background: rgba(242,183,54,.05); }
.lab__badge{ font-size:.68rem; color: var(--ink-faint); margin:0 0 14px; }
.lab__title{ font-family: var(--font-display); font-weight:600; font-size:1.5rem; margin:0 0 12px; }
.lab__text{ font-size:.9rem; color: var(--ink-dim); margin:0; }

.terminal{
  border: 1px solid var(--line);
  background: rgba(244,239,228,.03);
  border-radius: 4px;
  padding: 30px clamp(20px,3vw,36px);
  margin-top: 30px;
  opacity:0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.terminal.is-visible{ opacity:1; transform:none; }
.terminal__head{ font-size:.72rem; color: var(--ink-faint); margin: 0 0 14px; text-transform:uppercase; }
.terminal__head:not(:first-child){ margin-top: 30px; }
.terminal__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.terminal__list li{ font-size:.86rem; color: var(--ink-dim); display:flex; gap:12px; align-items:baseline; }
.terminal__status{ color:#5ce08a; font-weight:700; font-size:.72rem; flex:none; }
.terminal__num{ color: var(--ink-faint); flex:none; }
.terminal__trace{ font-size:.82rem; color: var(--ink-dim); line-height:1.9; word-break: break-word; }
.terminal__quotes{ margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.terminal__quotes p{ margin:0; font-size:.78rem; color: var(--ink-faint); }

.facts{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.fact{ opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fact.is-visible{ opacity:1; transform:none; }
.fact:nth-child(2){ transition-delay:.08s; }
.fact:nth-child(3){ transition-delay:.16s; }
.fact__title{ font-family: var(--font-mono); font-size:1.05rem; color: var(--gold-accent); margin:0 0 10px; }
.fact__text{ font-size:.86rem; color: var(--ink-dim); margin:0; }

.loop-close{ margin-top: 40px; font-size:.92rem; color: var(--ink-faint); max-width: 60ch; border-top: 1px solid var(--line); padding-top: 24px; }

.epi-cta{ text-align:center; padding: 40px 0 120px; }
.epi-cta .lede{ margin-left:auto; margin-right:auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  padding: 32px clamp(20px,6vw,90px) 40px;
  padding-left: calc(var(--medallion-w) + clamp(20px,6vw,90px));
  display:flex; flex-wrap:wrap; gap: 8px 24px; justify-content:space-between;
  border-top: 1px solid var(--line);
  font-size:.82rem;
  color: var(--ink-faint);
  background: var(--base-bg);
}
.footer a{ text-decoration:none; color: var(--ink-faint); }
.footer a:hover{ color: var(--ink); }
.footer__meta{ font-size:.74rem; }

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 720px){
  :root{ --medallion-w: 0px; }
  /* Mobile: pins deaktiviert (siehe script.js) — Szenen fließen normal, Klimata als Panels. */
  .scene__pin{ padding-left: clamp(20px,6vw,28px); padding-top: 60px; }
  .scene__runway, .scene__runway--gold, .scene__runway--agentic{ height:auto; }
  .scene__pin{ position:relative; height:auto; min-height:0; overflow:visible; padding-top: 70px; padding-bottom: 50px; }
  .scene__content, .scene__content--gold, .scene__content--agentic{ height:auto; position:relative; display:block; }
  .clim-layer, .scene__grain, .agent-pulse{ display:none; }

  .beat{
    position:relative; inset:auto;
    opacity:0; transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    padding: 28px 22px;
    border-radius: 12px;
    margin-bottom: 22px;
  }
  .beat.is-visible{ opacity:1; transform:none; }
  /* second choreography step: the card lands, then its tag row cascades in
     — mobile "gestufte Reveals" instead of one flat block fade. */
  .rawtags{ opacity:0; transform: translateY(10px); transition: opacity .5s var(--ease) .15s, transform .5s var(--ease) .15s; }
  .beat.is-visible .rawtags{ opacity:1; transform:none; }
  .beat--bronze{ background: radial-gradient(ellipse 400px 300px at 20% 0%, var(--bronze-2), var(--bronze-1) 80%); border: 1px solid rgba(214,138,69,.2); }
  .beat--silver{ background: radial-gradient(ellipse 400px 300px at 80% 0%, var(--silver-2), var(--silver-1) 80%); border: 1px solid rgba(207,217,226,.15); }
  .scene--gold .beat{ background: radial-gradient(ellipse 400px 300px at 50% 0%, var(--gold-2), var(--gold-1) 80%); border: 1px solid rgba(242,183,54,.18); }
  .scene--agentic .beat{ background: radial-gradient(ellipse 400px 300px at 50% 0%, var(--agentic-2), var(--agentic-1) 80%); border: 1px solid rgba(91,227,255,.18); }
  .scene__stagelabel{ display:none; }

  .cases, .labs, .principles{ grid-template-columns: 1fr; }
  .case--offset{ transform:none; }
  .shots{ grid-template-columns: 1fr; }
  .shot--ask{ transform:none; }
  .shot__frame img{ max-height:none; }
  .shots-stage{ padding: 26px 18px 18px; }
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat--wide, .stat--badge{ grid-column: span 2; }
  .facts{ grid-template-columns: 1fr; }
  .epilogue, .footer{ padding-left: clamp(20px,6vw,28px); }
  .hero__scrollhint{ display:none; }
}

/* ============================================================
   REDUCED MOTION — everything static, fully visible
   ============================================================ */
html.reduced-motion .scene__runway,
html.reduced-motion .scene__runway--gold,
html.reduced-motion .scene__runway--agentic{ height:auto; }
html.reduced-motion .scene__pin{
  position: relative;
  height:auto;
  min-height: 100vh;
  padding-top: 90px;
  padding-bottom: 90px;
}
html.reduced-motion .scene__content{ height:auto; }
html.reduced-motion .beat{
  position: relative;
  inset:auto;
  opacity:1 !important;
  transform:none !important;
  padding-bottom: 40px;
}
html.reduced-motion .beat--bronze{ padding-bottom: 60px; border-bottom: 1px solid rgba(214,138,69,.25); margin-bottom: 40px; }
html.reduced-motion .clim-layer{ transition:none; }
html.reduced-motion .clim-layer--silver{ opacity:1; }
html.reduced-motion .scene--foundation .clim-layer--bronze{ opacity:1; clip-path: inset(0 0 50% 0); }
html.reduced-motion .scene--foundation .clim-layer--silver{ clip-path: inset(50% 0 0 0); }
html.reduced-motion .scene__stagelabel [data-beat-label]{ display:block; margin-bottom:4px; }
html.reduced-motion .scene__content--gold{ display:flex; }
html.reduced-motion .agent-pulse{ display:none; }
html.reduced-motion .principle, html.reduced-motion .lab, html.reduced-motion .terminal, html.reduced-motion .fact{
  opacity:1 !important; transform:none !important; transition:none !important;
}
html.reduced-motion .rawtags{ opacity:1 !important; transform:none !important; transition:none !important; }
html.reduced-motion .medallion__stage-label{ display:none !important; }
html.reduced-motion .medallion__fill{ height:100% !important; }
html.reduced-motion .medallion__node{ }
html.reduced-motion .medallion__dot{ }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   RUN 8 — vitrine glow (szenengebundene Video-Lichttextur, Szene 3)
   ============================================================ */
/* Sitzt absolut über die volle gepinnte Agentic-Bühne (.scene__pin ist
   bereits position:relative), object-fit:cover, opacity 0 im Ruhezustand
   (JS-ausfallsicher: keine Textur statt kaputt), z-index unter den Beats
   (scene__content = z-index 2), pointer-events none. */
.vitrine-glow{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit: cover;
  opacity:0;
  pointer-events:none;
  transition: opacity 1.2s var(--ease);
}
.vitrine-glow.is-on{ opacity:.5; }
@media (max-width: 720px){
  .vitrine-glow{ display:none; }
}
html.reduced-motion .vitrine-glow{ display:none; }