/*
 * Plotdesk Landing — gemeinsamer Kern von V6 und V7: Tokens, Raster, Typo-Skala, Kapitelkopf,
 * Motion-Primitive, Galerie, Logo-Leiste. Alles, was Heroes (heroes/*.css) und Kapitel (sections/*.css)
 * voraussetzen, ohne Seiten-Chrome (Resets, Knöpfe, Header, Footer liegen in styles.css bzw. kommen
 * in V7 aus landing/v8/styles.css). Design-Vertrag: docs/landing-v6.md.
 *
 * Ladefolge in V7: v3/styles.css → core.css → heroes/sections → v7/styles.css. Die Tokens hier
 * überschreiben also die gleichnamigen aus V3; v7/styles.css setzt die V3-Werte wieder ein.
 */

:root {
  color-scheme: dark;

  /* Variablen, mit denen Dialog und Cookie-Banner (landing/css/*) rechnen — gleiche Namen wie V3 und V4. */
  --ink: #050c0d;
  --ink-2: #0a1517;
  --ink-3: #111f1f;
  --mint: #73f1a6;
  --mint-2: #aaf7c9;
  --mint-dark: #174c39;
  --paper: #f4f2ec;
  --paper-2: #e9e6de;
  --white: #f7f9f8;
  --gray-100: #e8ecea;
  --gray-200: #d4dad7;
  --gray-400: #8f9a95;
  --gray-500: #6b7671;
  --gray-700: #33403b;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-light: rgba(5, 12, 13, 0.12);
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-numeric: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 68px;

  /* Das Raster: zwölf Spalten, Rinne 24 px, Außenrand 48 px, Satzspiegel höchstens 1280 px. */
  --columns: 12;
  --gutter: 24px;
  --margin: 48px;
  --shell: min(1280px, calc(100vw - 2 * var(--margin)));
  --measure: 44rem;

  /* Achterrhythmus */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;
  --s16: 128px;
  --chapter-y: clamp(96px, 11vw, 160px);

  /* Semantik je Fläche: wechselt über data-theme="light" am Kapitel. */
  --bg: var(--ink);
  --bg-elev: var(--ink-2);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.08);
  --text: var(--white);
  --text-2: rgba(247, 249, 248, 0.72);
  --text-3: rgba(247, 249, 248, 0.48);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --accent: var(--mint);
  --accent-ink: #052b1a;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper);
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--paper-2);
  --text: #0e1614;
  --text-2: rgba(14, 22, 20, 0.7);
  --text-3: rgba(14, 22, 20, 0.5);
  --line: rgba(5, 12, 13, 0.12);
  --line-strong: rgba(5, 12, 13, 0.3);
  --accent: var(--mint-dark);
  --accent-ink: #ffffff;
  --shadow: 0 30px 80px rgba(5, 12, 13, 0.12);
}

/* Weißes Papier statt warmem: für Kapitel, die neben einem Papier-Kapitel liegen. */
[data-theme="light"][data-surface="white"] {
  --bg: #ffffff;
  --bg-elev: var(--paper);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
}

.shell {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Überschriften in Kapiteln und Heroes: ohne Rand, in der Display-Schrift. Mit :where, damit jede
   Kapitel-Klasse gewinnt; in V7 ersetzt das den globalen Reset, den nur V6 mitbringt. */
.chapter :where(h1, h2, h3, h4),
.hero :where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------- Das Raster ----------
   .grid legt zwölf Spalten an; .span-N und .start-N setzen ein Kind. Unter 900 px fällt jedes Kind auf die
   volle Breite, sofern das Kapitel nichts anderes sagt (eigene Regeln je Kapitel-CSS). */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Nur das Ende setzen: so bleibt der Spannwert erhalten, wenn .start-N den Anfang dazu setzt
   (der Shorthand «grid-column: span N» würde von .start-N auf eine Spalte zurückgestutzt). */
.span-1 { grid-column-end: span 1; }
.span-2 { grid-column-end: span 2; }
.span-3 { grid-column-end: span 3; }
.span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; }
.span-6 { grid-column-end: span 6; }
.span-7 { grid-column-end: span 7; }
.span-8 { grid-column-end: span 8; }
.span-9 { grid-column-end: span 9; }
.span-10 { grid-column-end: span 10; }
.span-11 { grid-column-end: span 11; }
.span-12 { grid-column-end: span 12; }

.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }

/* Sichtbares Raster als Motiv (partials/gridlines.blade.php): deckungsgleich mit dem .shell-Raster. */
.gridlines {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  display: grid;
  width: var(--shell);
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  transform: translateX(-50%);
  pointer-events: none;
}

.gridlines i {
  position: relative;
  display: block;
  border-left: 1px solid var(--line);
}

.gridlines i:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  border-left: 1px solid var(--line);
}

.gridlines--soft i,
.gridlines--soft i:last-child::after {
  opacity: 0.55;
}

.gridlines--draw i {
  transform: scaleY(0);
  transform-origin: top;
  animation: gridline-draw 1400ms var(--ease-out) calc(var(--i, 0) * 45ms + 120ms) forwards;
}

@keyframes gridline-draw {
  to {
    transform: scaleY(1);
  }
}

/* Waagerechte Haarlinie, die sich beim Sichtbarwerden zeichnet (data-reveal="line"). */
.rule {
  display: block;
  height: 1px;
  background: var(--line);
}

/* ---------- Typo-Skala ----------
   Display, H1, H2, H3 in Space Grotesk (die Stimme aus V3), alles darunter Inter. Headlines tragen
   text-wrap: balance, vor dem letzten Wort steht &nbsp;, keine <br>: zweizeilig über .t-line. */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.6vw, 128px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Untergrenze 38 px: auf 350 px Satzspiegel müssen «ein Systemproblem.» und «messbarer Wirkung.» in eine Zeile passen. */
.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.t-h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.t-lead {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-2);
}

.t-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
}

.t-small {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

.t-caption {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

/* Kapitelzeile: Nummer in Space Grotesk, kurzer Strich, Label versal gesperrt. */
.t-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.t-eyebrow__index {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-numeric);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.t-eyebrow__index::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.t-eyebrow--center {
  justify-content: center;
}

/* Zeile einer mehrzeiligen Headline: ein Block je Zeile statt <br>. */
.t-line {
  display: block;
}

.t-muted {
  color: var(--text-3);
}

.t-accent {
  color: var(--accent);
}

/* Zahlen: Space Grotesk, Tabellenziffern, damit Spalten stehen. */
.t-num {
  font-family: var(--font-numeric);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Große Kennzahl, immer mit Label darunter. */
.metric {
  display: block;
  margin: 0;
}

.metric strong {
  display: block;
  font-family: var(--font-numeric);
  font-size: clamp(40px, 4.6vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.metric span {
  display: block;
  margin-top: 8px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.4;
}

/* Der pulsierende Punkt vor «The AI Results Company» */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(115, 241, 166, 0.5);
  animation: pulse-dot 2.4s ease-out infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(115, 241, 166, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(115, 241, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(115, 241, 166, 0); }
}

/* ---------- Kapitel ---------- */
.chapter {
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding: var(--chapter-y) 0;
}

.chapter--flush {
  padding: 0;
}

/* Haarlinie an der Oberkante, auf Satzspiegelbreite: die Kapitelgrenze als Tabellenlinie. */
.chapter--ruled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--shell);
  height: 1px;
  background: var(--line);
  transform: translateX(-50%);
}

/* Kapitelkopf: Kapitelzeile, Headline, Lead. Als --split liegt die Headline auf acht Spalten und der Lead
   rechts auf vier, unten bündig (das Muster aus V3, das die Seite trägt). */
.chapter-head {
  max-width: var(--measure);
}

.chapter-head > * + * {
  margin-top: 22px;
}

.chapter-head .t-eyebrow + * {
  margin-top: 20px;
}

.chapter-head--center {
  margin-inline: auto;
  text-align: center;
}

.chapter-head--center .t-eyebrow {
  justify-content: center;
}

.chapter-head--split {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 28px;
  align-items: end;
  max-width: none;
}

.chapter-head--split > * + * {
  margin-top: 0;
}

.chapter-head__main {
  grid-column: 1 / span 8;
}

.chapter-head__main > * + * {
  margin-top: 20px;
}

.chapter-head--split > .t-lead {
  grid-column: 9 / span 4;
  margin: 0 0 6px;
}

/* ---------- Motion-Primitive (app.js) ----------
   [data-reveal]             blendet ein, sobald sichtbar; Varianten: "fade", "scale", "mask", "line".
   [data-reveal-group]       staffelt die Kinder über --i.
   .scene / [data-scene]     gepinnte Szene: --progress 0..1 und data-active-step, Kinder mit data-step.
   [data-sticky-story]       klebende Bühne links, Blöcke rechts: der Block in der Mitte ist aktiv.
   [data-progress]           bekommt --p 0..1 (Einlauf von unten bis Auslauf oben).
   [data-parallax]           bekommt --parallax (px) relativ zur Viewport-Mitte.
   [data-count]              zählt Zahlen hoch, sobald sichtbar (data-prefix, data-suffix). */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="scale"] {
  transform: translateY(16px) scale(0.97);
}

[data-reveal="fade"] {
  transform: none;
}

/* Zeilenmaske: die Headline schiebt sich aus einer unsichtbaren Kante nach oben (Apple-Auftritt). */
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

[data-reveal="mask"].is-visible {
  clip-path: inset(-0.2em 0 -0.2em 0);
}

/* Haarlinie zeichnet sich von links (die Staffelung über --i bleibt erhalten, der Shorthand setzt sie sonst zurück). */
[data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

[data-reveal="line"].is-visible {
  transform: scaleX(1);
}

.scene {
  position: relative;
  height: calc((var(--scene-length, 3) + 1) * 100vh);
}

.scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scene-step {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  pointer-events: none;
}

.scene-step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.scene-step.is-past {
  transform: translateY(-24px);
}

[data-parallax] {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* Klebende Bühne: die Bühne (data-sticky-stage) klebt unter dem Header, die Blöcke (data-sticky-item)
   laufen vorbei. Aktiver Block und die passende Bühnen-Ansicht (data-sticky-for="n") tragen .is-active. */
[data-sticky-stage] {
  position: sticky;
  top: var(--header-h);
}

[data-sticky-item] {
  transition: opacity 500ms var(--ease);
}

[data-sticky-for] {
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 600ms var(--ease-out);
}

[data-sticky-for].is-active {
  opacity: 1;
}

/* Horizontale Galerie mit Snap (die Karten starten in der ersten Rasterspalte), Pfeile in .rail-nav */
.rail {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100vw - var(--shell)) / 2);
  padding-inline: calc((100vw - var(--shell)) / 2);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

[data-rail-position] {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rail-nav button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 200ms ease, opacity 200ms ease, background 200ms ease;
}

.rail-nav button:hover {
  border-color: var(--text);
  background: var(--surface);
}

.rail-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.rail-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bild mit sanfter Vignette, damit Typo darauf sitzt */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 12, 13, 0) 40%, rgba(5, 12, 13, 0.78));
  pointer-events: none;
}

/* ---------- Logo-Leiste (partials/logo-bar.blade.php) ---------- */
.logo-bar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.logo-bar__label {
  grid-column: span 3;
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.logo-bar__marquee {
  grid-column: span 9;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-bar__track {
  display: flex;
  width: max-content;
  animation: logo-scroll 40s linear infinite;
}

.logo-bar__marquee:hover .logo-bar__track {
  animation-play-state: paused;
}

.logo-bar__set {
  display: flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
}

.logo-bar img {
  width: auto;
  max-width: 124px;
  height: 24px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 200ms ease;
}

.logo-bar img:hover {
  opacity: 1;
}

.logo-bar img.logo--tall {
  height: 30px;
}

.logo-bar img.logo--square {
  height: 40px;
}

@keyframes logo-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  :root {
    --margin: 40px;
  }
}

@media (max-width: 900px) {
  .grid > [class*="span-"],
  .grid > [class*="start-"] {
    grid-column-start: 1;
    grid-column-end: -1;
  }

  .chapter-head--split {
    display: block;
  }

  .chapter-head--split > * + * {
    margin-top: 22px;
  }

  .logo-bar__label {
    grid-column: 1 / -1;
  }

  .logo-bar__marquee {
    grid-column: 1 / -1;
    margin-top: 20px;
  }

  [data-sticky-stage] {
    position: static;
  }
}

@media (max-width: 680px) {
  :root {
    --margin: 20px;
    --gutter: 16px;
    --radius-lg: 12px;
  }

  .chapter {
    padding: 80px 0;
  }

  .logo-bar__set {
    gap: 36px;
    padding-right: 36px;
  }

  .logo-bar img {
    height: 20px;
    max-width: 100px;
  }

  .logo-bar img.logo--tall {
    height: 26px;
  }

  .logo-bar img.logo--square {
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .scene-step,
  [data-sticky-for] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  /* Ohne Bewegung werden Szenen entpinnt: die Schritte stehen untereinander statt übereinander. */
  .scene {
    height: auto;
  }

  .scene-stage {
    position: relative;
    height: auto;
    overflow: visible;
  }

  [data-parallax] {
    transform: none;
  }

  .gridlines--draw i {
    animation: none;
    transform: none;
  }

  .logo-bar__track {
    animation: none;
  }

  .pulse-dot {
    animation: none;
  }
}