/* Kapitel 07: Die Plotdesk Plattform (Papier). Zentrierter Kopf, gepinnte Szene (links die vier Ebenen
   als Liste mit Haarlinien, rechts das Browserfenster mit den überblendenden Screenshots), dann die vier
   Fähigkeiten auf dem Raster, das Zitat und der Abschluss. Der Screenshot wandert innerhalb seines
   Schritts über --progress: --local ist der Fortschritt des eigenen Schritts (0…1) und treibt
   object-position — auf der Achse, auf der das Bild Spiel hat (breite Bilder waagerecht, hohe senkrecht). */

/* ---------- Kopf ---------- */
.platform-head {
  max-width: 62rem;
}

/* Mit «DSGVO-konformen KI-Chat» ist die Zeile länger als in den übrigen Kapiteln: unter 380 px muss
   «Vom DSGVO-konformen» in eine Zeile passen, sonst bricht die Headline in drei Stücke. */
.platform-head .t-h2 {
  font-size: clamp(30px, 4.4vw, 60px);
}

.platform-head__nowrap {
  white-space: nowrap;
}

.platform-head .t-lead {
  max-width: var(--measure);
  margin-inline: auto;
}

/* ---------- Gepinnte Szene ---------- */
.platform-scene {
  margin-top: clamp(40px, 5vw, 72px);
}

.platform-stage {
  display: grid;
  align-items: center;
  padding-top: var(--header-h);
}

.platform-layout {
  align-items: center;
}

.platform-layers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-layer {
  position: relative;
  padding: 20px 0 22px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  transition: color 500ms var(--ease);
}

.platform-layer:last-child {
  border-bottom: 1px solid var(--line);
}

/* Die aktive Ebene bekommt ihre Haarlinie in Mint-Dunkel, von links gezeichnet. */
.platform-layer::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out);
}

.platform-layer.is-active {
  color: var(--text);
}

.platform-layer.is-active::after {
  transform: scaleX(1);
}

.platform-layer__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 500ms var(--ease);
}

.platform-layer__label .t-num {
  font-size: 13px;
  letter-spacing: 0.04em;
}

.platform-layer.is-active .platform-layer__label {
  color: var(--accent);
}

.platform-layer__title {
  max-width: 22ch;
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.platform-layer__sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.platform-layer__shot {
  display: none;
  margin: 0;
}

/* Das Browserfenster */
.platform-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.platform-window__bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
}

.platform-window__brand img {
  width: auto;
  height: 16px;
  opacity: 0.85;
}

.platform-window__url {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 8px;
  height: 28px;
  border-radius: 6px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.platform-window__url svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform-window__status {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.platform-window__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Fortschritt der ganzen Szene als Mint-Linie an der Unterkante der Kopfleiste. */
.platform-window__progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  height: 2px;
  background: var(--accent);
}

.platform-window__screens {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-2);
}

/* --local: Fortschritt innerhalb des eigenen Schritts (--n), mit kurzer Ruhe am Anfang und am Ende,
   damit das Auge nach der Überblendung ankommt. object-position 0 % → 100 % auf der Achse mit Spiel. */
.platform-window__screens img {
  --local: clamp(0, calc(((var(--progress, 0) - var(--n, 0) * 0.25) * 4 - 0.12) / 0.76), 1);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--local) * 100%) calc(var(--local) * 100%);
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 120ms ease-out;
}

.platform-window__screens img.is-active {
  opacity: 1;
  transform: none;
  transition: opacity 320ms var(--ease-out) 120ms;
}

/* ---------- Die vier Fähigkeiten ---------- */
.platform-capabilities {
  row-gap: var(--gutter);
  margin-top: clamp(72px, 8vw, 112px);
}

.platform-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  background: var(--surface);
}

.platform-card__kicker {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.platform-card .t-h3 {
  max-width: 20ch;
  font-size: clamp(22px, 2vw, 28px);
}

.platform-card .t-body {
  max-width: 50ch;
  margin: 0;
}

/* Die Karte: Spur Cloud – Kern – Spur Lokal, Linien als Verbindung, Plotdesk Connect auf der Spur nach lokal. */
.platform-map {
  display: grid;
  grid-template-columns: minmax(112px, 148px) minmax(32px, 1fr) 72px minmax(120px, 2fr) minmax(112px, 148px);
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg);
}

.platform-map__lane {
  display: grid;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 12px;
}

.platform-map__lane--local {
  background: rgba(5, 12, 13, 0.04);
}

.platform-map__lane-label {
  margin-bottom: 2px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.platform-map__chip {
  display: grid;
  min-height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
}

.platform-map__link {
  position: relative;
  display: grid;
  align-items: center;
}

.platform-map__wire {
  display: block;
  height: 1px;
  background: var(--line-strong);
}

.platform-map__core {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ink);
}

.platform-map__core img {
  width: 48px;
  height: auto;
}

/* Plotdesk Connect sitzt auf der Linie zur lokalen Spur und unterbricht sie mit eigener Fläche. */
.platform-map__connect {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 11px;
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.platform-map__connect i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* «77+» als Zeile: Zahl und Text nebeneinander, die Zahl ist die eine Mint-Zahl des Kapitels. */
.platform-card__stat {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 4px;
}

.platform-card__stat strong {
  font-size: clamp(32px, 3vw, 40px);
  color: var(--accent);
}

.platform-card__stat span {
  display: inline;
  margin: 0;
  max-width: 30ch;
  font-size: 14px;
}

/* Modelle: neun Logos in Farbe mit Namen, als stille Pillen. */
.platform-models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.platform-models li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 13px 0 10px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.platform-models img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.platform-models__wordmark {
  padding-inline: 13px;
}

.platform-models__wordmark img {
  width: auto;
  height: 13px;
}

/* Deployment: drei Optionen als Zeilen mit Haarlinien — Icon, Name, Zeile. */
.platform-deploy,
.platform-checks {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.platform-deploy li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.platform-deploy li:last-child {
  border-bottom: 1px solid var(--line);
}

.platform-deploy svg,
.platform-checks svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}

.platform-deploy svg {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  stroke-width: 1.5;
}

.platform-deploy strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.platform-deploy span {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}

/* Governance: vier Zeilen mit Haken, ab 900 px in zwei Spalten. */
.platform-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.platform-checks li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.platform-checks svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  stroke-width: 2.2;
}

/* ---------- Zitat ---------- */
.platform-quote {
  max-width: 56rem;
  margin: clamp(80px, 9vw, 128px) auto 0;
  text-align: center;
}

.platform-quote blockquote {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.platform-quote__nowrap {
  white-space: nowrap;
}

.platform-quote figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.platform-quote figcaption img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.platform-quote figcaption p {
  margin: 0;
  line-height: 1.35;
  text-align: left;
}

.platform-quote figcaption strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.platform-quote figcaption span {
  color: var(--text-3);
  font-size: 14px;
}

/* ---------- Abschluss ---------- */
.platform-closing {
  margin-top: clamp(80px, 9vw, 128px);
  text-align: center;
}

.platform-closing .t-h2 {
  margin: 0 auto;
}

.platform-closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .platform-map {
    grid-template-columns: minmax(96px, 128px) minmax(24px, 1fr) 64px minmax(110px, 2fr) minmax(96px, 128px);
    padding: 16px;
  }

  .platform-map__core {
    width: 64px;
    height: 64px;
  }

  .platform-map__core img {
    width: 42px;
  }
}

/* Unter 900 px (und ohne Bewegung) ist nichts gepinnt: Ebenen untereinander, jede mit ihrem Screenshot. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .platform-scene {
    height: auto;
  }

  .platform-stage {
    position: static;
    display: block;
    height: auto;
    overflow: visible;
    padding-top: 0;
  }

  .platform-window {
    display: none;
  }

  .platform-layer,
  .platform-layer.is-active {
    padding: 24px 0 36px;
    color: var(--text);
  }

  .platform-layer::after {
    display: none;
  }

  .platform-layer__label {
    color: var(--accent);
  }

  .platform-layer__title {
    max-width: none;
  }

  .platform-layer__shot {
    display: block;
    aspect-ratio: 16 / 10;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: var(--shadow);
  }

  .platform-layer__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }

  .platform-layer__shot--portrait img {
    object-position: center top;
  }
}

@media (max-width: 900px) {
  .platform-checks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .platform-map {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0;
  }

  .platform-map__lane {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
  }

  .platform-map__lane-label {
    grid-column: 1 / -1;
  }

  .platform-map__link {
    width: 1px;
    height: 32px;
  }

  .platform-map__link--connect {
    height: 56px;
  }

  .platform-map__wire {
    width: 1px;
    height: 100%;
    transform-origin: top;
  }

  .platform-quote__nowrap {
    white-space: normal;
  }

  .platform-closing__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .platform-quote figcaption {
    flex-direction: column;
  }

  .platform-quote figcaption p {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-layer,
  .platform-layer::after,
  .platform-layer__label,
  .platform-window__screens img {
    transition: none;
  }
}