:root {
  --ink: #090a08;
  --night: #080907;
  --panel: #11120f;
  --paper: #efeee8;
  --line: rgba(242, 241, 233, 0.15);
  --text: #f2f1e9;
  --muted: #92948d;
  --signal: #d8ff57;
}

.landing-page {
  color-scheme: dark;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--night);
  color: var(--text);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01", "ss02", "cv01";
  line-height: 1.4;
}

.landing-page * {
  box-sizing: border-box;
}

.landing-page ::selection {
  background: var(--signal);
  color: var(--ink);
}

.landing-page .landing-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: clip;
}

.landing-page a {
  color: inherit;
}

/* FAQ am Ende der Startseite. Nicht die globale .wrap-Klasse: die bringt
   min-height und 138px Kopfabstand mit, beides falsch unterhalb der Story.
   Die Farbregel darueber setzt Links auf `inherit` — hier sollen sie wieder
   als Links erkennbar sein. */
.landing-page .landing-faq {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: 0 24px 96px;
}

.landing-page .landing-faq a {
  color: var(--coral-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-page button,
.landing-page a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  background: var(--paper);
  color: var(--ink) !important;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Compact segmented bar, inspired by the supplied reference. */
.site-header {
  position: fixed;
  z-index: 20;
  top: 26px;
  left: 50%;
  display: flex;
  height: 40px;
  align-items: stretch;
  overflow: hidden;
  padding: 3px;
  border: 1px solid rgba(242, 241, 233, 0.13);
  border-radius: 8px;
  background: rgba(17, 18, 15, 0.9);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0 11px 0 8px;
  border-right: 1px solid rgba(242, 241, 233, 0.1);
  color: var(--text);
  font-size: 10px;
  font-weight: 620;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-glyph {
  display: block;
  width: auto;
  height: 19px;
  flex: 0 0 auto;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}

/* Der Wuerfel kippt beim Hover leicht in die Isometrie hinein. */
.brand:hover .brand-glyph {
  transform: rotate(-8deg) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .brand-glyph {
    transition: none;
  }

  .brand:hover .brand-glyph {
    transform: none;
  }
}

.site-nav {
  display: flex;
  height: 32px;
  align-items: stretch;
}

.site-nav button,
.site-nav a {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid rgba(242, 241, 233, 0.075);
  border-radius: 0;
  background: transparent;
  color: #8f918a;
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 560;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.site-nav > :first-child {
  border-left: 0;
}

.site-nav button:hover,
.site-nav a:hover {
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

.site-nav .nav-cta {
  margin-left: 2px;
  border-left: 1px solid rgba(242, 241, 233, 0.13);
  border-radius: 5px;
  background: #e9e8e1;
  color: var(--ink);
}

.site-nav .nav-cta:hover {
  background: var(--signal);
  color: var(--ink);
}

.site-nav button:focus-visible,
.site-nav a:focus-visible,
.brand:focus-visible,
.prompt-copy:focus-visible,
.dialog-cta:focus-visible,
.info-dialog button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.hero {
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  min-height: 580px;
  place-items: center;
  overflow: hidden;
  padding: 84px 20px 24px;
  background: var(--night);
  isolation: isolate;
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
  content: "";
  pointer-events: none;
}

.signal-stage {
  position: absolute;
  z-index: -2;
  top: 35px;
  left: 50%;
  width: min(1040px, 110vw);
  height: min(570px, 68vw);
  min-height: 410px;
  opacity: 0.9;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 58% 48% at 50% 51%, #000 22%, rgba(0,0,0,.9) 48%, transparent 82%);
  mask-image: radial-gradient(ellipse 58% 48% at 50% 51%, #000 22%, rgba(0,0,0,.9) 48%, transparent 82%);
}

#signal-canvas {
  width: 100%;
  height: 100%;
}

.signal-core {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 25%;
  aspect-ratio: 1.8;
  border-radius: 50%;
  background: rgba(228, 233, 211, 0.04);
  filter: blur(40px);
  transform: translate(-50%, -50%);
}

.hero-content {
  width: min(780px, 100%);
  margin-top: 22px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 17px;
  color: #a7a9a1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(216, 255, 87, 0.08);
  animation: status-pulse 2.8s ease-in-out infinite;
}

@keyframes status-pulse {
  50% { box-shadow: 0 0 0 8px rgba(216, 255, 87, 0); }
}

.hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(54px, 7.4vw, 100px);
  font-weight: 470;
  letter-spacing: -0.068em;
  line-height: 0.89;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
}

.hero h1 em {
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}

.hero-waveform {
  position: relative;
  display: flex;
  width: min(275px, 62vw);
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 21px auto 0;
}

.hero-waveform::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(242, 241, 233, 0.11);
  content: "";
}

.hero-waveform span {
  position: relative;
  z-index: 1;
  display: block;
  width: 1px;
  height: var(--h);
  background: #c9cbc2;
  opacity: 0.68;
  transform-origin: center;
  animation: hero-wave 1.55s ease-in-out infinite alternate;
}

.hero-waveform span:nth-child(3n) { animation-delay: -0.35s; }
.hero-waveform span:nth-child(4n) { animation-delay: -0.75s; }
.hero-waveform span:nth-child(5n) { animation-delay: -1.05s; }

@keyframes hero-wave {
  0% { opacity: 0.25; transform: scaleY(0.34); }
  100% { opacity: 0.8; transform: scaleY(1); }
}

.hero-lead {
  max-width: 460px;
  margin: 10px auto 0;
  color: #92948c;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.5;
  text-wrap: balance;
}

.hero-lead strong {
  color: #d8d9d2;
  font-weight: 530;
}

.prompt-block {
  width: min(640px, 100%);
  margin: 27px auto 0;
  text-align: left;
}

.prompt-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 3px 7px;
  color: #686a64;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prompt-copy {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 10px 11px 10px 21px;
  border: 1px solid rgba(242, 241, 233, 0.2);
  border-radius: 11px;
  background: rgba(17, 18, 15, 0.84);
  box-shadow: 0 17px 55px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255,255,255,.035);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  backdrop-filter: blur(12px);
  transition: border-color 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1), background 200ms ease;
}

.prompt-copy::before {
  position: absolute;
  top: -90px;
  left: calc(var(--prompt-x, 50%) - 90px);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  content: "";
  filter: blur(25px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.prompt-copy:hover {
  border-color: rgba(242, 241, 233, 0.48);
  background: rgba(20, 21, 18, 0.94);
  transform: translateY(-2px);
}

.prompt-copy:hover::before {
  opacity: 1;
}

.prompt-text {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: #dddcd5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.2vw, 13px);
  line-height: 1.4;
}

.prompt-caret {
  color: var(--signal);
  font-size: 19px;
  line-height: 1;
}

.copy-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 50px;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
}

.copy-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.prompt-copy.is-copied {
  border-color: rgba(216, 255, 87, 0.68);
}

.prompt-copy.is-copied .copy-action {
  background: var(--signal);
}

.platforms {
  display: grid;
  width: min(370px, 100%);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}

.platforms li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-left: 1px solid rgba(9, 10, 8, 0.12);
}

.platforms li:first-child {
  border-left: 0;
}

.platforms img {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(9, 10, 8, 0.18));
  object-fit: contain;
}

/* Small modal panels keep the landing page on one screen. */
.info-dialog {
  width: min(470px, calc(100% - 28px));
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(242, 241, 233, 0.17);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.65);
  color: var(--ink);
}

.info-dialog[open] {
  animation: dialog-in 220ms cubic-bezier(.2,.8,.2,1);
}

.info-dialog::backdrop {
  background: rgba(5, 6, 4, 0.72);
  backdrop-filter: blur(8px);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dialog-top {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid rgba(9, 10, 8, 0.14);
  color: #6e7069;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dialog-top button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(9, 10, 8, 0.16);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  transition: background 160ms ease, color 160ms ease;
}

.dialog-top button:hover {
  background: var(--ink);
  color: var(--paper);
}

.dialog-body {
  padding: 34px;
}

.dialog-body h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(42px, 8vw, 60px);
  font-weight: 470;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.dialog-body > p {
  max-width: 350px;
  margin: 23px 0 0;
  color: #666861;
  font-size: 13px;
  line-height: 1.55;
}

.dialog-list {
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid rgba(9, 10, 8, 0.15);
  list-style: none;
}

.dialog-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 45px;
  border-bottom: 1px solid rgba(9, 10, 8, 0.15);
  color: #353732;
  font-size: 11px;
}

.dialog-list li > span:first-child {
  color: #858780;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
}

.dialog-cta {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper) !important;
  font-size: 10px;
  font-weight: 630;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}

.dialog-cta:hover {
  background: #2b2d27;
}

.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.2,1);
}

.has-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 620px) {
  .site-header {
    top: 14px;
    width: auto;
    max-width: calc(100% - 20px);
  }

  .brand {
    flex: 0 0 auto;
  }

  .brand-name {
    display: none;
  }

  .site-nav {
    min-width: 0;
    flex: 0 1 auto;
  }

  /* Gleiche mitwachsende Polsterung wie in app.css — Begruendung dort. */
  .site-nav button,
  .site-nav a {
    min-width: 0;
    flex: 1;
    padding: 0 clamp(7px, 3vw, 11px);
    font-size: 8px;
  }

  .site-nav .nav-cta {
    gap: 4px;
  }

  .hero {
    min-height: 560px;
    padding: 68px 14px 14px;
  }

  .signal-stage {
    top: 45px;
    width: 140vw;
    min-height: 360px;
  }

  .hero-content {
    margin-top: 16px;
  }

  .eyebrow {
    margin-bottom: 13px;
    font-size: 7px;
  }

  .hero h1 {
    font-size: clamp(48px, 15vw, 68px);
  }

  .hero-waveform {
    width: 210px;
    height: 38px;
    margin-top: 15px;
  }

  .hero-lead {
    margin-top: 7px;
    font-size: 12px;
  }

  .prompt-block {
    margin-top: 22px;
  }

  .prompt-copy {
    min-height: 66px;
    gap: 9px;
    padding: 8px 8px 8px 14px;
  }

  .prompt-text {
    gap: 6px;
    font-size: 9px;
  }

  .copy-action {
    min-height: 48px;
    padding: 0 13px;
  }

  .copy-action [data-copy-label] {
    display: none;
  }

  .platforms {
    margin-top: 14px;
  }

  .platforms li {
    padding: 0 3px;
  }

  .platforms img {
    width: 27px;
    height: 27px;
  }

  .dialog-body {
    padding: 28px 24px 30px;
  }

}

@media (max-height: 690px) and (min-width: 621px) {
  .site-header {
    top: 15px;
  }

  .hero {
    padding-top: 62px;
  }

  .hero-content {
    margin-top: 8px;
  }

  .hero h1 {
    font-size: clamp(50px, 6.8vw, 78px);
  }

  .hero-waveform {
    height: 36px;
    margin-top: 12px;
  }

  .prompt-block {
    margin-top: 18px;
  }

  .platforms {
    margin-top: 11px;
  }
}

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


/* Scroll-driven call network — the globe stays pinned while routes accumulate. */
.network-story {
  position: relative;
  height: 400svh;
  background: #030403;
  border-top: 1px solid rgba(242, 241, 233, 0.06);
}

.network-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 580px;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 80%, rgba(100, 116, 54, 0.08), transparent 34%),
    #030403;
  isolation: isolate;
}

#globe-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.network-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 241, 233, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 241, 233, 0.026) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 34%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 34%, #000 82%, transparent);
}

.network-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 4, 3, 0.96) 0%, rgba(3, 4, 3, 0.72) 29%, transparent 60%),
    linear-gradient(to bottom, rgba(3, 4, 3, 0.62), transparent 24%, transparent 78%, rgba(3, 4, 3, 0.54)),
    radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, 0.54) 100%);
  pointer-events: none;
}

.network-intro {
  position: absolute;
  z-index: 4;
  top: clamp(104px, 15vh, 150px);
  left: clamp(24px, 6vw, 96px);
  width: min(520px, 43vw);
  transform-origin: left top;
  will-change: opacity, transform;
}

.network-kicker {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 20px;
  color: #70726b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.network-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #a3a69a;
}

.network-live i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(216, 255, 87, 0.72);
}

.network-intro h2,
.network-outro h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(54px, 6.6vw, 96px);
  font-weight: 430;
  letter-spacing: -0.068em;
  line-height: 0.9;
}

.network-intro h2 em,
.network-outro h2 em {
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}

.network-intro > p:last-child {
  max-width: 410px;
  margin: 27px 0 0;
  color: #8c8f86;
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.65;
  text-wrap: balance;
}

.network-steps {
  position: absolute;
  z-index: 5;
  bottom: clamp(94px, 12vh, 130px);
  left: clamp(24px, 6vw, 96px);
  width: min(410px, 38vw);
  min-height: 190px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.network-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  transition:
    opacity 500ms cubic-bezier(.2, .75, .2, 1),
    transform 600ms cubic-bezier(.2, .75, .2, 1);
}

.network-step.is-active {
  opacity: 1;
  transform: translateY(0);
}

.network-step-number {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--signal);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.network-step-number::before {
  width: 20px;
  height: 1px;
  background: currentColor;
  content: "";
}

.network-step h3 {
  margin: 14px 0 0;
  color: #e8e7df;
  font-size: clamp(29px, 3vw, 43px);
  font-weight: 440;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.network-step p {
  max-width: 360px;
  margin: 18px 0 0;
  color: #7f8279;
  font-size: 12px;
  line-height: 1.58;
}

.network-counter {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(30px, 5vh, 56px);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  color: #686b63;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}

.network-counter-value {
  color: #deddd5;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.network-scroll {
  position: absolute;
  z-index: 5;
  bottom: clamp(30px, 5vh, 56px);
  left: clamp(24px, 6vw, 96px);
  display: flex;
  align-items: center;
  gap: 13px;
  color: #555850;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.network-scroll-track {
  position: relative;
  display: block;
  width: 92px;
  height: 1px;
  overflow: hidden;
  background: rgba(242, 241, 233, 0.13);
}

.network-scroll-track i {
  position: absolute;
  inset: 0;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(216, 255, 87, 0.35);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.network-coordinate {
  position: absolute;
  z-index: 4;
  right: clamp(24px, 5vw, 80px);
  top: clamp(100px, 13vh, 130px);
  margin: 0;
  color: rgba(242, 241, 233, 0.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.network-outro {
  position: relative;
  display: grid;
  min-height: 88svh;
  place-content: center;
  padding: 100px 24px;
  overflow: hidden;
  border-top: 1px solid rgba(242, 241, 233, 0.07);
  background:
    radial-gradient(circle at 50% 110%, rgba(216, 255, 87, 0.07), transparent 36%),
    #070806;
  text-align: center;
}

.network-outro::before {
  position: absolute;
  inset: 12% 8%;
  border: 1px solid rgba(242, 241, 233, 0.055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: scaleX(1.5);
}

.network-outro .network-kicker {
  justify-content: center;
}

.network-outro h2 {
  position: relative;
  font-size: clamp(52px, 7.2vw, 104px);
}

.network-outro > a {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-self: center;
  gap: 22px;
  margin-top: 38px;
  padding: 0 19px;
  border: 1px solid rgba(242, 241, 233, 0.18);
  border-radius: 999px;
  background: #e9e8e1;
  color: var(--ink);
  font-size: 10px;
  font-weight: 640;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.network-outro > a:hover {
  background: var(--signal);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .network-story {
    height: 380svh;
  }

  .network-sticky {
    min-height: 620px;
  }

  .network-grid {
    background-size: 40px 40px;
  }

  .network-shade {
    background:
      linear-gradient(to bottom, rgba(3, 4, 3, 0.92) 0%, rgba(3, 4, 3, 0.6) 35%, transparent 61%, rgba(3, 4, 3, 0.28) 100%),
      radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.58) 100%);
  }

  .network-intro {
    top: 88px;
    left: 20px;
    width: calc(100% - 40px);
    text-align: center;
  }

  .network-kicker {
    justify-content: center;
    margin-bottom: 15px;
    font-size: 7px;
  }

  .network-intro h2 {
    font-size: clamp(43px, 13.2vw, 62px);
  }

  .network-intro > p:last-child {
    max-width: 340px;
    margin: 18px auto 0;
    font-size: 11px;
  }

  .network-steps {
    top: 36%;
    right: 20px;
    bottom: auto;
    left: 20px;
    width: auto;
    min-height: 175px;
    text-align: center;
  }

  .network-step-number {
    justify-content: center;
  }

  .network-step h3 {
    margin-top: 11px;
    font-size: clamp(27px, 8vw, 36px);
  }

  .network-step p {
    max-width: 330px;
    margin: 13px auto 0;
    font-size: 10px;
  }

  .network-scroll {
    bottom: 25px;
    left: 18px;
  }

  .network-scroll > span:first-child {
    display: none;
  }

  .network-scroll-track {
    width: 74px;
  }

  .network-counter {
    right: 18px;
    bottom: 25px;
  }

  .network-counter-value {
    font-size: 29px;
  }

  .network-coordinate {
    display: none;
  }

  .network-outro {
    min-height: 76svh;
  }

  .network-outro h2 {
    font-size: clamp(45px, 13vw, 66px);
  }
}

@media (max-height: 680px) {
  .network-intro {
    top: 72px;
  }

  .network-intro > p:last-child {
    margin-top: 13px;
  }

  .network-steps {
    bottom: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network-story {
    height: auto;
  }

  .network-sticky {
    position: relative;
    height: auto;
    min-height: 1040px;
    padding: 110px 24px 420px;
  }

  .network-intro {
    position: relative;
    top: auto;
    left: auto;
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
  }

  .network-steps {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    display: grid;
    width: min(980px, 100%);
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 70px auto 0;
  }

  .network-step {
    position: relative;
    opacity: 1;
    transform: none;
  }

  .network-scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .network-sticky {
    min-height: 1320px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .network-steps {
    grid-template-columns: 1fr;
    text-align: center;
  }
}


/* Editions-style planet narrative: one persistent visual, copy that scrolls naturally. */
.planet-story {
  position: relative;
  background: #030403;
  color: var(--text);
  isolation: isolate;
}

.planet-sticky {
  position: sticky;
  z-index: 0;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #030403;
}

/* Das <picture> um das Hero-Bild soll im Layout nicht existieren: .planet-photo
   positioniert sich absolut gegen .planet-sticky, und ein zusaetzlicher
   Inline-Kasten dazwischen brauechte dort niemand. display: contents nimmt ihn
   aus dem Kastenbaum, ohne an der Positionierung etwas zu aendern. */
.planet-photo-picture {
  display: contents;
}

.planet-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.72) contrast(1.08) brightness(0.78);
  transform: scale(1.015);
  transform-origin: 50% 72%;
  will-change: transform, filter;
}

#globe-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.planet-atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3, 4, 3, 0.82) 0%, rgba(3, 4, 3, 0.24) 27%, transparent 52%, rgba(3, 4, 3, 0.14) 76%, rgba(3, 4, 3, 0.8) 100%),
    radial-gradient(ellipse 52% 44% at 50% 45%, transparent 18%, rgba(0, 0, 0, 0.12) 68%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
}

.planet-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  background-image:
    repeating-linear-gradient(118deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.022) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
  opacity: 0.42;
  pointer-events: none;
}

.planet-flow {
  position: relative;
  z-index: 4;
  margin-top: -100svh;
}

.planet-hero {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: start center;
  padding: clamp(94px, 12vh, 126px) 20px 112px;
}

.planet-hero .hero-content {
  width: min(790px, 100%);
  margin: 0;
  text-align: center;
}

.planet-hero .eyebrow {
  margin-bottom: 16px;
}

.planet-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(58px, 7.6vw, 108px);
  font-weight: 430;
  letter-spacing: -0.072em;
  line-height: 0.86;
  text-shadow: 0 8px 45px rgba(0, 0, 0, 0.72);
}

.planet-hero h1 span {
  display: block;
}

.planet-hero h1 em {
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.058em;
}

.planet-hero .hero-lead {
  margin-top: 19px;
  color: #a4a69e;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85);
}

.planet-hero .prompt-block {
  margin-top: 24px;
}

.planet-hero .prompt-copy {
  background: rgba(11, 12, 9, 0.7);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(22px) saturate(0.8);
}

.hero-signal-rail {
  position: absolute;
  right: clamp(18px, 4vw, 64px);
  bottom: 25px;
  left: clamp(18px, 4vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 15px 0 0;
  border-top: 1px solid rgba(242, 241, 233, 0.13);
  color: #777a70;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
  list-style: none;
  text-transform: uppercase;
}

.hero-signal-rail li {
  display: flex;
  gap: 12px;
}

.hero-signal-rail li:nth-child(2) {
  justify-content: center;
}

.hero-signal-rail li:last-child {
  justify-content: flex-end;
}

.hero-signal-rail span {
  color: var(--signal);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 70px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(242, 241, 233, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center;
}

.hero-scroll-cue i {
  display: block;
  width: 40px;
  height: 1px;
  overflow: hidden;
  background: rgba(242, 241, 233, 0.14);
}

.hero-scroll-cue i::after {
  display: block;
  width: 50%;
  height: 100%;
  background: var(--signal);
  content: "";
  animation: planet-scroll-cue 2.1s ease-in-out infinite;
}

@keyframes planet-scroll-cue {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(210%); }
}

.planet-progress {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: clamp(14px, 2vw, 30px);
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(242, 241, 233, 0.31);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px;
  letter-spacing: 0.08em;
  transform: translateY(-50%) rotate(90deg);
}

.planet-progress-track {
  position: relative;
  display: block;
  width: 76px;
  height: 1px;
  overflow: hidden;
  background: rgba(242, 241, 233, 0.12);
}

.planet-progress-track i {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.planet-sticky .network-counter {
  z-index: 5;
  opacity: 0;
  transition: opacity 240ms linear;
}

.planet-sticky .network-coordinate {
  z-index: 5;
  top: auto;
  right: clamp(18px, 4vw, 64px);
  bottom: 73px;
}

.story-chapter {
  position: relative;
  display: flex;
  min-height: 96svh;
  align-items: center;
  padding: 12vh clamp(24px, 8vw, 128px);
  pointer-events: none;
}

.story-chapter-left {
  justify-content: flex-start;
}

.story-chapter-right {
  justify-content: flex-end;
}

.story-chapter-content {
  position: relative;
  width: min(570px, 48vw);
  padding: 46px 0;
  pointer-events: auto;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.94);
}

.story-chapter-content::before {
  position: absolute;
  z-index: -1;
  inset: -25% -28%;
  background: radial-gradient(ellipse, rgba(3, 4, 3, 0.94) 0%, rgba(3, 4, 3, 0.7) 43%, transparent 75%);
  content: "";
  filter: blur(10px);
  pointer-events: none;
}

.story-chapter-ghost {
  position: absolute;
  z-index: -1;
  top: -82px;
  left: -18px;
  color: rgba(242, 241, 233, 0.035);
  font-size: clamp(150px, 18vw, 280px);
  font-weight: 500;
  letter-spacing: -0.1em;
  line-height: 1;
  text-shadow: none;
}

.story-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--signal);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-label span {
  width: 26px;
  height: 1px;
  background: currentColor;
}

.story-chapter h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(48px, 6.2vw, 92px);
  font-weight: 420;
  letter-spacing: -0.068em;
  line-height: 0.9;
  text-wrap: balance;
}

.story-chapter h2 em {
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.055em;
}

.story-copy {
  max-width: 460px;
  margin: 30px 0 0;
  color: #a0a299;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.68;
  text-wrap: balance;
}

.story-details {
  max-width: 450px;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid rgba(242, 241, 233, 0.14);
  list-style: none;
}

.story-details li {
  display: grid;
  min-height: 43px;
  align-items: center;
  grid-template-columns: 86px 1fr;
  border-bottom: 1px solid rgba(242, 241, 233, 0.1);
  color: #85887f;
  font-size: 10px;
}

.story-details span {
  color: #d4d4cc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-quote,
.story-result {
  max-width: 450px;
  margin-top: 35px;
  padding: 18px 20px;
  border: 1px solid rgba(242, 241, 233, 0.14);
  border-radius: 9px;
  background: rgba(12, 13, 10, 0.67);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
}

.story-quote-wave {
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
  color: var(--signal);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.story-quote p {
  margin: 0;
  color: #a9aba3;
  font-size: 11px;
}

.story-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #777a71;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.story-result span::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 9px rgba(216, 255, 87, 0.6);
  content: "";
}

.story-result strong {
  color: #d8d8d0;
  font-size: 8px;
  font-weight: 540;
}

@keyframes story-chapter-in {
  from {
    opacity: 0.08;
    transform: translateY(80px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@supports (animation-timeline: view()) {
  .story-chapter-content {
    animation: story-chapter-in linear both;
    animation-range: entry 5% entry 88%;
    animation-timeline: view();
  }
}

@media (max-width: 760px) {
  .planet-sticky {
    min-height: 580px;
  }

  .planet-photo {
    object-position: center center;
    filter: saturate(0.68) contrast(1.1) brightness(0.68);
  }

  .planet-atmosphere {
    background:
      linear-gradient(to bottom, rgba(3, 4, 3, 0.88) 0%, rgba(3, 4, 3, 0.34) 29%, transparent 54%, rgba(3, 4, 3, 0.14) 73%, rgba(3, 4, 3, 0.82) 100%),
      radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.48) 100%);
  }

  .planet-hero {
    min-height: 100svh;
    padding: 76px 14px 110px;
  }

  /* 15vw statt 16: „Starte KI-Anrufe" braucht bei 16vw 375px in einem 362px
     breiten Feld — 13px zu viel, und die Ueberschrift faellt auf drei Zeilen.
     Ab etwa 340px Geraetebreite bleibt sie damit zweizeilig. */
  .planet-hero h1 {
    font-size: clamp(52px, 15vw, 70px);
  }

  .planet-hero .eyebrow {
    margin-bottom: 13px;
  }

  .planet-hero .hero-lead {
    max-width: 310px;
    margin-top: 14px;
    font-size: 11px;
  }

  .planet-hero .prompt-block {
    margin-top: 18px;
  }

  .planet-hero .prompt-copy {
    min-height: 62px;
  }

  .hero-signal-rail {
    right: 14px;
    bottom: 17px;
    left: 14px;
    gap: 5px;
    padding-top: 11px;
    font-size: 5px;
  }

  .hero-signal-rail li {
    gap: 5px;
  }

  .hero-scroll-cue {
    bottom: 57px;
  }

  .planet-progress,
  .planet-sticky .network-coordinate {
    display: none;
  }

  .planet-sticky .network-counter {
    right: 16px;
    bottom: 52px;
  }

  .story-chapter {
    min-height: 100svh;
    justify-content: center;
    padding: 15vh 20px 12vh;
  }

  .story-chapter-content {
    width: min(100%, 430px);
    padding: 36px 0;
    text-align: center;
  }

  .story-chapter-content::before {
    inset: -20% -8%;
  }

  .story-chapter-ghost {
    top: -60px;
    right: 0;
    left: 0;
    font-size: 150px;
  }

  .story-label {
    justify-content: center;
    margin-bottom: 17px;
    font-size: 7px;
  }

  .story-chapter h2 {
    font-size: clamp(42px, 12.5vw, 58px);
  }

  .story-copy {
    max-width: 350px;
    margin: 22px auto 0;
    font-size: 11px;
  }

  .story-details,
  .story-quote,
  .story-result {
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }
}

@media (max-height: 690px) and (min-width: 761px) {
  .planet-hero {
    padding-top: 72px;
  }

  .planet-hero h1 {
    font-size: clamp(54px, 7vw, 82px);
  }

  .planet-hero .hero-lead {
    margin-top: 12px;
  }

  .planet-hero .prompt-block {
    margin-top: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .planet-photo {
    transform: none !important;
  }

  .story-chapter-content {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-scroll-cue i::after {
    animation: none;
  }
}
/* Bright Editions-inspired palette: warm paper, optimistic color and a daylight Earth. */
:root {
  --ink: #17211c;
  --night: #f3eee7;
  --panel: #fffaf4;
  --paper: #fffaf2;
  --line: rgba(23, 33, 28, 0.14);
  --text: #17211c;
  --muted: #5f6a67;
  --signal: #c254a3;
  --coral: #df725c;
  --amber: #c99b5b;
  --sage: #6f8f75;
  --sky: #84cce7;
}

.landing-page {
  color-scheme: light;
  background: #f3eee7;
  color: var(--ink);
}

.landing-page ::selection {
  background: #f0a6d3;
  color: var(--ink);
}

.site-header {
  border-color: rgba(23, 33, 28, 0.11);
  background: rgba(255, 250, 244, 0.84);
  box-shadow:
    0 14px 45px rgba(107, 73, 55, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px) saturate(1.25);
}

.brand {
  border-color: rgba(23, 33, 28, 0.1);
  color: var(--ink);
}

.site-nav button,
.site-nav a {
  border-color: rgba(23, 33, 28, 0.08);
  color: #59645e;
}

.site-nav button:hover,
.site-nav a:hover {
  background: rgba(194, 84, 163, 0.1);
  color: var(--ink);
}

.site-nav .nav-cta {
  border-color: transparent;
  background: var(--coral);
  color: #fffaf2;
}

.site-nav .nav-cta:hover {
  background: #c254a3;
  color: #fffaf2;
}

.status-dot {
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(223, 114, 92, 0.17);
  animation-name: status-pulse-bright;
}

@keyframes status-pulse-bright {
  50% { box-shadow: 0 0 0 9px rgba(223, 114, 92, 0); }
}

.planet-story,
.planet-sticky {
  background: #e8f2ef;
  color: var(--ink);
}

.planet-photo {
  filter: saturate(1.02) contrast(1.015) brightness(1.025);
  transform: none;
  transform-origin: center;
  will-change: auto;
}

.planet-atmosphere {
  background:
    linear-gradient(to bottom, rgba(255, 250, 242, 0.13) 0%, transparent 46%, rgba(243, 226, 214, 0.08) 76%, rgba(247, 239, 228, 0.24) 100%),
    radial-gradient(circle at 78% 10%, rgba(255, 213, 166, 0.22), transparent 34%),
    radial-gradient(circle at 16% 12%, rgba(132, 204, 231, 0.18), transparent 32%);
}

.planet-grain {
  opacity: 0.18;
  mix-blend-mode: multiply;
}

.planet-hero h1 {
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.82);
}

.planet-hero h1 em {
  color: #9e483d;
}

.planet-hero .eyebrow {
  color: #4f625c;
}

.planet-hero .hero-lead {
  color: #1d2b25;
  font-size: clamp(14px, 1.35vw, 16px);
  font-weight: 560;
  letter-spacing: -0.015em;
  text-shadow: none;
}

.planet-hero .hero-lead strong {
  font-weight: 680;
  color: var(--ink);
}

.planet-hero .prompt-copy {
  border-color: rgba(23, 33, 28, 0.14);
  background: rgba(255, 250, 244, 0.84);
  box-shadow:
    0 22px 68px rgba(117, 74, 57, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.9);
  color: var(--ink);
  backdrop-filter: blur(22px) saturate(1.25);
}

.planet-hero .prompt-copy:hover {
  border-color: rgba(194, 84, 163, 0.45);
  background: rgba(255, 252, 248, 0.94);
}

.prompt-caption {
  color: #75445f;
}

.prompt-text {
  color: #263831;
}

.prompt-caret {
  color: var(--coral);
}

.copy-action {
  background: var(--ink);
  color: #fffaf2;
}

.prompt-copy.is-copied {
  border-color: rgba(194, 84, 163, 0.7);
}

.prompt-copy.is-copied .copy-action {
  background: var(--signal);
  color: #fffaf2;
}

.hero-signal-rail {
  border-color: rgba(23, 33, 28, 0.16);
  color: #5c6b65;
}

.hero-signal-rail span {
  color: #9e483d;
}

.hero-scroll-cue {
  color: rgba(23, 33, 28, 0.56);
}

.hero-scroll-cue i,
.planet-progress-track {
  background: rgba(23, 33, 28, 0.16);
}

.hero-scroll-cue i::after,
.planet-progress-track i {
  background: var(--signal);
}

.planet-progress {
  color: rgba(23, 33, 28, 0.52);
}

.planet-sticky .network-coordinate {
  color: rgba(23, 33, 28, 0.48);
}

.network-counter {
  color: #4f6159;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.88);
}

.network-counter-value {
  color: #7d305b;
}

.story-chapter-content {
  overflow: hidden;
  padding: clamp(34px, 4vw, 54px);
  border: 1px solid rgba(23, 33, 28, 0.11);
  border-radius: 28px;
  background: rgba(255, 250, 244, 0.78);
  box-shadow:
    0 30px 100px rgba(82, 67, 54, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.85);
  text-shadow: none;
  backdrop-filter: blur(24px) saturate(1.22);
}

.story-chapter-content::before {
  z-index: 0;
  inset: auto -22% -62% 34%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 114, 92, 0.28), transparent 68%);
  filter: blur(16px);
}

.story-chapter:nth-of-type(2) .story-chapter-content::before {
  inset: -48% 28% auto -22%;
  background: radial-gradient(circle, rgba(194, 84, 163, 0.26), transparent 68%);
}

.story-chapter:nth-of-type(3) .story-chapter-content::before {
  inset: auto -18% -58% 24%;
  background: radial-gradient(circle, rgba(201, 155, 91, 0.3), transparent 68%);
}

.story-chapter-content > * {
  position: relative;
  z-index: 1;
}

.story-chapter-ghost {
  z-index: 0;
  top: -48px;
  left: -8px;
  color: rgba(158, 72, 61, 0.09);
}

.story-label {
  color: #9e483d;
}

.story-chapter:nth-of-type(2) .story-label {
  color: #a43d86;
}

.story-chapter:nth-of-type(3) .story-label {
  color: #6c7752;
}

.story-chapter h2 {
  color: var(--ink);
}

.story-chapter h2 em {
  color: #9e483d;
}

.story-chapter:nth-of-type(2) h2 em {
  color: #a43d86;
}

.story-chapter:nth-of-type(3) h2 em {
  color: #6d7b58;
}

.story-copy {
  color: #506159;
}

.story-details {
  border-color: rgba(23, 33, 28, 0.16);
}

.story-details li {
  border-color: rgba(23, 33, 28, 0.11);
  color: #52635b;
}

.story-details span {
  color: var(--ink);
}

.story-quote,
.story-result {
  border-color: rgba(23, 33, 28, 0.12);
  background: rgba(255, 255, 252, 0.68);
  box-shadow: 0 12px 36px rgba(111, 73, 57, 0.1), inset 0 1px rgba(255, 255, 255, 0.9);
}

.story-quote-wave {
  color: #a43d86;
}

.story-quote p,
.story-result {
  color: #4e5e57;
}

.story-result span::before {
  background: var(--coral);
  box-shadow: 0 0 10px rgba(223, 114, 92, 0.55);
}

.story-result strong {
  color: var(--ink);
}

.network-outro {
  border-color: rgba(23, 33, 28, 0.08);
  background:
    radial-gradient(circle at 18% 24%, rgba(132, 204, 231, 0.5), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(240, 166, 211, 0.54), transparent 30%),
    radial-gradient(circle at 50% 108%, rgba(223, 114, 92, 0.42), transparent 38%),
    #f7efe5;
  color: var(--ink);
}

.network-outro::before {
  border-color: rgba(158, 72, 61, 0.16);
}

.network-outro .network-kicker {
  color: #704a5e;
}

.network-outro h2 {
  color: var(--ink);
}

.network-outro h2 em {
  color: #9e483d;
}

.network-outro > a {
  border-color: rgba(23, 33, 28, 0.13);
  background: var(--ink);
  color: #fffaf2;
}

.network-outro > a:hover {
  background: var(--signal);
  color: #fffaf2;
}

.info-dialog {
  border-color: rgba(23, 33, 28, 0.12);
  background: #fffaf2;
  box-shadow: 0 35px 110px rgba(64, 50, 41, 0.35);
}

.info-dialog::backdrop {
  background: rgba(74, 84, 78, 0.36);
}

.dialog-body h2 {
  color: #9e483d;
}

.dialog-cta {
  background: var(--coral);
  color: #fffaf2 !important;
}

.dialog-cta:hover {
  background: var(--signal);
}

@media (max-width: 760px) {
  .planet-photo {
    filter: saturate(1.02) contrast(1.01) brightness(1.03);
  }

  .planet-atmosphere {
    background:
      linear-gradient(to bottom, rgba(255, 250, 242, 0.1), transparent 48%, rgba(247, 239, 228, 0.18) 100%),
      radial-gradient(circle at 82% 8%, rgba(255, 211, 171, 0.2), transparent 34%);
  }

  .story-chapter-content {
    padding: 34px 24px;
    border-radius: 22px;
  }
}
/* Diese Regel gewinnt gegen den Block weiter oben (gleiche Spezifität, steht
   später) — wer den Hero verschieben will, muss hier ansetzen. Und weil der
   Inhalt am unteren Rand hängt, schiebt ihn die untere Polsterung nach unten,
   nicht die obere: weniger Polster, tieferer Text. */
.planet-hero {
  align-items: end;
  padding-top: clamp(96px, 12vh, 130px);
  padding-bottom: clamp(56px, 6.6vh, 74px);
}

/* Die englische Ueberschrift ist doppelt so lang wie die deutsche ("Launch AI
   phone calls" gegen "Dein Agent.") und braucht 8,27px Breite je Schriftgrad —
   bei 108px waeren das 894px in einem 790px breiten Feld, die Zeile bricht also
   um und aus zwei Zeilen werden drei. 92px ist der groesste Grad, bei dem sie
   einzeilig bleibt. Nur ab 761px: darunter gilt die Handy-Regel, die mit 16vw
   rechnet, und dort bricht die Zeile ohnehin — bei 362px Feldbreite passte sie
   erst ab Grad 44, und so klein ist keine Ueberschrift mehr. */
@media (min-width: 761px) {
  html[lang="en"] .planet-hero h1 {
    font-size: clamp(58px, 6.4vw, 92px);
  }
}

/* Flacher Schirm: dieselbe Ruecksicht wie die Regel weiter oben, nur eine
   Nummer kleiner, weil die englische Zeile mehr Breite braucht. */
@media (max-height: 690px) and (min-width: 761px) {
  html[lang="en"] .planet-hero h1 {
    font-size: clamp(54px, 6vw, 78px);
  }
}

@media (max-width: 760px) {
  .planet-hero {
    padding: 90px 14px 94px;
  }
}

/* Live voice activity replaces the former scripted quote card. */
.voice-visualizer {
  position: relative;
  display: flex;
  width: min(430px, 100%);
  height: 96px;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.6vw, 7px);
  margin-top: 30px;
}

.voice-visualizer::before {
  position: absolute;
  right: 2%;
  left: 2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 61, 134, 0.2) 16%, rgba(164, 61, 134, 0.2) 84%, transparent);
  content: "";
}

.voice-visualizer span {
  position: relative;
  z-index: 1;
  width: clamp(2px, 0.28vw, 4px);
  height: var(--h);
  min-height: 7px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #df725c, #a43d86);
  box-shadow: 0 3px 12px rgba(194, 84, 163, 0.2);
  transform: scaleY(0.35);
  transform-origin: center;
  animation: voice-bar-pulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) var(--d) infinite;
}

.voice-visualizer span:nth-child(3n) {
  animation-duration: 1.18s;
}

.voice-visualizer span:nth-child(4n) {
  animation-duration: 1.68s;
}

@keyframes voice-bar-pulse {
  0%, 100% {
    opacity: 0.48;
    transform: scaleY(0.28);
  }
  36% {
    opacity: 1;
    transform: scaleY(1);
  }
  64% {
    opacity: 0.68;
    transform: scaleY(0.52);
  }
  82% {
    opacity: 0.9;
    transform: scaleY(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-visualizer span {
    opacity: 0.72;
    transform: scaleY(0.58);
    animation: none;
  }
}