/* ============================================================
   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{ padding: 9px 0;
  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){
  /* Vorher: display:none ohne Ersatz - auf dem Telefon gab es damit KEINE
     Navigation, nur 12.000px Scrollstrecke. Jetzt eine horizontal
     scrollbare Sprungleiste statt eines Burger-Menues: ein Tap statt zwei,
     und sie zeigt schon geschlossen, was die Seite zu bieten hat. */
  .topbar{ padding-left: clamp(16px,6vw,28px); padding-top: 12px; flex-wrap: wrap; row-gap: 10px; }
  .topbar__links{
    order: 3; width: 100%;
    gap: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar__links::-webkit-scrollbar{ display:none; }
  .topbar__links li{ flex: 0 0 auto; }
  .topbar__links a{ display:block; padding: 12px 0; white-space: nowrap; }
}

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

/* Auf hohen Fenstern wuchs die vertikale Zentrierung unbegrenzt: bei 1800px
   Fensterhoehe standen 404px Leere zwischen Topbar und Kicker. Der Hero hoert
   ab hier auf mitzuwachsen; darunter wird die naechste Szene sichtbar, was
   die Scroll-Erzaehlung eher ankuendigt als verdeckt. */
/* Hohe Fenster: Frueher wuchs die vertikale Zentrierung unbegrenzt (bei 1800px
   Fensterhoehe 404px Leere zwischen Topbar und Kicker), danach war der Inhalt
   oben verankert und die gesamte Luft sammelte sich unten (bei 2300px Hoehe
   966px). Beides ist dieselbe Ursache: Der innere Rhythmus des Hero wuchs
   nicht mit, also musste die Differenz irgendwo als Block liegen.
   Jetzt waechst der Rhythmus zwischen den Elementen mit der Fensterhoehe und
   der Block bleibt zentriert - die Luft verteilt sich als Atem statt als
   Loch. Unterhalb 1100px Fensterhoehe aendert sich nichts. */
@media (min-height: 1100px){
  .hero{ padding-top: clamp(140px, 10vh, 200px); }
  .hero__kicker{ margin-bottom: clamp(28px, 3.2vh, 64px); }
  .hero__sub{ margin-bottom: clamp(40px, 4.4vh, 96px); }
  .hero__ctas{ margin-bottom: clamp(36px, 4vh, 88px); }
  .hero__status{ margin-bottom: clamp(64px, 7vh, 168px); }
}

.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; }
/* Eine Beat-Stufe weniger, seit die Executive-Screenshots raus sind:
   sonst scrollt man ein Drittel der Strecke ohne Aenderung. */
.scene__runway--agentic{ height: 150vh; }
.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;
  align-self: flex-start; /* sonst streckt der Flex-Container die Pille auf volle Buehnenbreite */
  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); }


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

/* 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. */

/* ------------------------------------------------------------
   Touch-Targets Mobil. Gemessen bei 390px: Wortmarke 26px, CTA 39px,
   beide Footer-Rechtslinks 17px (reine Zeilenhoehe, kein Padding).
   Unter 44px ist ein Ziel mit dem Daumen nicht zuverlaessig zu treffen.
   Steht am Dateiende, damit es die frueher definierten Basiswerte schlaegt.
   ------------------------------------------------------------ */
@media (max-width: 720px){
  .topbar__cta{ padding-top: 13px; padding-bottom: 13px; }
  .footer__legal a{ display: inline-block; padding: 13px 6px; }
}

/* ------------------------------------------------------------
   FLUIDE SKALIERUNG NACH OBEN

   Die Basis-Werte wachsen mit vw, erreichen ihre Obergrenze aber alle
   zwischen 1067px und 1415px Fensterbreite. Ab da wurde jedes weitere Pixel
   zu Leerflaeche: auf einem 2830px-Fenster waren 53% der Breite leer.

   Hier wachsen dieselben Groessen ab 1440px weiter - dort, wo die
   Basis-Skalierung nachweislich ueberall am Anschlag ist. Jede Formel
   startet exakt beim bisherigen Endwert, es gibt also keine Sprungstelle
   und kein eingefrorenes Band. Unterhalb 1440px greift der Media-Query
   nicht, dort aendert sich kein Pixel.

   Aufbau: clamp(bisheriger Endwert, bisheriger Endwert + Zuwachs, Deckel).
   Der Zuwachs ist (100vw - 1440px) mal einem Faktor, der so gewaehlt ist,
   dass die Groesse bei 2830px Fensterbreite ihren Zielwert erreicht.
   ------------------------------------------------------------ */
@media (min-width: 1440px){
  .hero__title{ font-size: clamp(6.4rem, calc(6.4rem + (100vw - 1440px) * 0.0378), 10rem); }
  .hero__sub{ font-size: clamp(1.2rem, calc(1.2rem + (100vw - 1440px) * 0.00777), 2rem); }
  .hero__status{ font-size: clamp(.78rem, calc(.78rem + (100vw - 1440px) * 0.0032), 1.1rem); }
  .hero__pipeline{ max-width: clamp(900px, calc(900px + (100vw - 1440px) * 0.791), 2000px); }
  .btn{
    font-size: clamp(.88rem, calc(.88rem + (100vw - 1440px) * 0.00318), 1.2rem);
    padding: clamp(15px, calc(15px + (100vw - 1440px) * 0.00647), 24px)
             clamp(28px, calc(28px + (100vw - 1440px) * 0.01295), 46px);
  }
  .scene__content{ max-width: clamp(980px, calc(980px + (100vw - 1440px) * 0.446), 1600px); }
  .scene__content--agentic{ max-width: clamp(1080px, calc(1080px + (100vw - 1440px) * 0.518), 1800px); }
  .h2{ font-size: clamp(4.6rem, calc(4.6rem + (100vw - 1440px) * 0.0298), 7.2rem); }
  .pillar__title{ font-size: clamp(3.6rem, calc(3.6rem + (100vw - 1440px) * 0.0204), 5.4rem); }
  .stat__value, .stat__value--static{ font-size: clamp(3.4rem, calc(3.4rem + (100vw - 1440px) * 0.0206), 5.2rem); }
  .lede{ font-size: clamp(1.15rem, calc(1.15rem + (100vw - 1440px) * 0.00475), 1.6rem); }
  .reflist{ font-size: clamp(1.6rem, calc(1.6rem + (100vw - 1440px) * 0.0118), 2.7rem); }
}

/* Sichtbare Kontaktadresse unter dem Abschluss-CTA. Der Button bleibt das
   primaere Ziel; diese Zeile ist der Ausweg, wenn mailto: beim Besucher
   nichts oeffnet. */
.cta__direct{
  margin: 22px 0 0;
  font-size: .85rem;
  color: var(--ink-faint);
}
.cta__direct a{
  color: var(--gold-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,183,54,.4);
  padding-bottom: 1px;
}
.cta__direct a:hover{ border-bottom-color: var(--gold-accent); }
.footer a{ color: var(--ink-dim); }
.footer a:hover{ color: var(--ink); }