/* Cockpit Composer (work/cockpit-composer/) nach dem Case-Study-Standard.

   Die Seite beruht auf einem Vite-Build ohne Tailwind und ohne custom.css;
   ihr HTML wird im Portfolio gepflegt (COCKPIT-COMPOSER.md). Diese Datei
   kommt nach dem CSS des Builds, cockpit-nav.css, case-chapters.css und
   case-base.css. Sie gleicht Überschriften, Kennzahlen und Footer an die
   übrigen Case Studies an (CASE-STUDY-STANDARD.md) und macht die Seite ruhig
   nach Abschnitt 3.5: ohne Kästen und Zusatz-Labels, eine Demo. */

/* ---------- Fokus wie auf allen Seiten (sonst aus custom.css) ---------- */

:where(a[href], button, input, select, textarea, summary, video, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-halo);
}

/* ---------- Überschriften: gemeinsame Skala (Entscheidung E4) ---------- */

.hero h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
}

.editorial-copy h2,
.section-intro h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-heading);
}

/* ---------- Kennzahlen im blauen Band ---------- */

.project-meta .case-facts {
  margin-top: 0;
}

/* ---------- Footer wie auf den übrigen Seiten ----------
   Gleiches Markup wie dort (Tailwind-Klassen). Weil der Build kein Tailwind
   lädt, stehen die verwendeten Klassen hier, nur innerhalb des Footers. */

.case-site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-surface-accent);
  color: #fff;
  padding: 48px 0;
  font-family: var(--font-sans);
}

.case-site-footer > div {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}

.case-site-footer .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.case-site-footer p,
.case-site-footer a {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
}

.case-site-footer a {
  display: block;
}

.case-site-footer a:hover {
  text-decoration: underline;
}

.case-site-footer .font-light { font-weight: 300; }
.case-site-footer .font-normal { font-weight: 400; }
.case-site-footer .font-semibold { font-weight: 600; }
.case-site-footer .font-bold { font-weight: 700; }
.case-site-footer .mb-1 { margin-bottom: 4px; }
.case-site-footer .mb-2 { margin-bottom: 8px; }

.case-site-footer > div > p:last-child {
  color: var(--color-ink-on-accent-muted);
  font-size: 12px;
  letter-spacing: var(--tracking-ui);
}

.case-site-footer > div > p:last-child span {
  color: #fff;
}

.case-site-footer a:focus-visible {
  outline-color: #fff;
}

@media (min-width: 640px) {
  .case-site-footer > div {
    padding-inline: 24px;
  }

  .case-site-footer .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .case-site-footer {
    padding: 64px 0;
  }

  .case-site-footer .grid {
    gap: 32px;
    margin-bottom: 48px;
  }
}

/* Ab 1024 px fünf Spalten wie lg:grid-cols-5 auf den übrigen Seiten. */
@media (min-width: 1024px) {
  .case-site-footer > div {
    padding-inline: 48px;
  }

  .case-site-footer .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Text nach den Tokens (D1, D3, D4) ----------
   Nur die redaktionellen Teile. Renderer und Mockups (.cc-*) bleiben wie im
   Build. */

.body-columns p,
.story-transition,
.retrieval-story p {
  color: var(--color-ink-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.framework-story p,
.moment-sequence article > p,
.system-steps p,
.component-vocabulary > p:last-child,
.prototype-access p {
  color: var(--color-ink-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.editorial-copy .lead {
  max-width: 880px;
  font-size: var(--text-quote);
  font-weight: var(--weight-medium);
  line-height: var(--leading-quote);
  letter-spacing: var(--tracking-h3);
}

.framework-story h3,
.prototype-access h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.moment-sequence h3,
.system-steps h3 {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h3);
}

.credits .label {
  color: var(--color-ink-muted);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.credits p:not(.label) {
  color: var(--color-ink);
}

/* Bildunterschriften: eine Zeile „Satz · Herkunft“ direkt unter dem Bild */
.story-caption > p,
.hmi-caption > p,
.plot-caption,
.cockpit-experiment .screen-summary p {
  min-height: 0;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.screen-expand,
.story-actions .screen-expand,
.hmi-caption .screen-expand {
  font-size: var(--text-label);
}

.preview-fallback,
.screen-viewer {
  border-radius: var(--radius-lg);
}

/* ---------- Inhaltskante wie auf den übrigen Seiten ----------
   Der Build setzt 1184/1300 px und eigene Ränder; Inhalt und Kapitelleiste
   liegen hier wie überall auf --content-width (1344 px, Rand 16/24/48 px). */

.wrap {
  width: var(--content-width);
  margin-inline: auto;
}

/* ---------- Navigation fixiert wie auf den übrigen Seiten ----------
   Die Leiste ist 70 px hoch (44-px-Links, cockpit-nav.css); die geteilte
   Kapitelleiste (case-chapters.css) dockt darunter an. */

:root {
  --nav-height: 70px;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  width: auto;
  margin: 0;
  padding-inline: max(var(--gutter), (100% - 1344px) / 2);
  background: var(--color-accent);
}

.blue-opening {
  padding-top: var(--nav-height);
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
}

/* ---------- Hero: der Renderer ist das Motiv (Standard 3.5) ----------
   Kein generiertes Bild; Eyebrow, These und Lead wie auf den übrigen
   Seiten, darunter das Alltags-Cockpit groß, live im Browser gerendert. */

.hero {
  padding: 0 0 var(--space-6);
}

.hero-copy {
  position: static;
  padding-block: clamp(40px, 6vw, 80px) var(--space-12);
}

.hero .eyebrow {
  margin: 0 0 var(--space-6);
  color: var(--color-ink-on-accent-muted);
  font: var(--weight-bold) var(--text-label)/var(--leading-label) var(--font-sans);
  letter-spacing: var(--tracking-label);
  opacity: 1;
}

.hero-lead {
  max-width: var(--measure-narrow);
  margin-top: var(--space-intro);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.hero-actions {
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }

  .hero-copy .eyebrow {
    grid-column: 1 / -1;
  }

  .hero-copy h1 {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .hero-lead {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
  }

  .hero-actions {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--space-6);
  }
}

.hero-scene {
  width: var(--content-width);
  max-width: none;
  margin-inline: auto;
  aspect-ratio: auto;
  background: none;
}

.hero-scene::after {
  content: none;
}

#hero-screen {
  position: static;
  width: 100%;
}

/* Platz für die Renderer-Flächen, bis das Skript des Builds sie füllt. Es
   lädt als Modul nach dem ersten Zeichnen; ohne Platzhalter springt die Seite
   dann um die Höhe des Cockpits. 2560 : 1080 ist das Format von cc-head-unit.
   Ohne JavaScript bleiben die Flächen klein statt leer. */
@media (scripting: enabled) {
  .screen-host:empty {
    aspect-ratio: 2560 / 1080;
  }
}

.hero-figure figcaption {
  color: var(--color-ink-on-accent-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  opacity: 1;
}

/* ---------- Kapitel: Flächen im Wechsel, alles bündig ---------- */

.editorial-section,
.system-section,
.experiment-section,
.vector-section {
  padding-block: var(--space-section);
}

/* 01 und 05 liegen auf dem Grau der Seite, 02 und 04 auf Weiß, 03 auf Grau. */
.system-section,
.vector-section {
  background: var(--color-surface);
}

.experiment-section {
  background: var(--color-surface-alt);
}

/* Der Build rückt Text in 01 und 05 hinter eine Label-Spalte ein. */
.editorial-section {
  display: block;
}

.section-label {
  padding-top: 0;
}

.editorial-copy h2 {
  margin: 0 0 var(--space-intro);
  text-wrap: balance;
}

/* Kapitelkopf wie auf Moving Types: Label, darunter H2 links und Intro rechts */
.section-intro {
  display: block;
  margin-bottom: var(--space-block);
}

.section-intro h2 {
  margin: 0;
  text-wrap: balance;
}

.section-intro > p:last-child {
  max-width: 560px;
  margin-top: var(--space-intro);
  padding-top: 0;
  color: var(--color-ink-body);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

@media (min-width: 1024px) {
  .section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }

  .section-intro .case-eyebrow {
    grid-column: 1 / -1;
  }

  .section-intro > p:last-child {
    margin-top: 0;
  }
}

/* ---------- 01: Signale und Situationen ohne Kasten und Karten ---------- */

.moment-story {
  margin-top: var(--space-block);
  padding: 0;
  background: none;
  border-radius: 0;
}

.signal-grid {
  gap: clamp(20px, 3vw, 40px);
}

.signal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-strong);
  color: var(--color-ink-body);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.signal-grid .signal-source {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
}

.signal-grid strong {
  color: var(--color-ink);
}

@media (max-width: 680px) {
  .signal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    padding-top: var(--space-3);
  }

  .signal > span:last-child {
    grid-column: 1;
  }

  /* Ohne die Verbindungslinien sitzen die Ergebnisse bündig links. */
  .moment-result,
  .moment-media-note {
    justify-content: flex-start;
  }
}

.story-follow-on {
  grid-column: auto;
  margin-top: var(--space-block);
}

@media (min-width: 681px) {
  .story-caption,
  .hmi-caption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .story-caption > p,
  .hmi-caption > p {
    flex: 1;
    max-width: var(--measure);
  }

  .hmi-caption .story-actions {
    flex-direction: row;
  }
}

.story-caption,
.hmi-caption {
  margin-top: var(--space-4);
}

/* ---------- 02: Alltags-Cockpit, Schritte als Liste ---------- */

.hmi-example {
  margin: 0 0 var(--space-block);
  padding: 0;
  background: none;
  border-radius: 0;
}

.system-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) clamp(24px, 3vw, 40px);
  margin: 0 0 var(--space-block);
  padding: 0;
  list-style: none;
}

.system-steps h3 {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-ink);
}

@media (min-width: 640px) {
  .system-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .system-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- 03: die eine Demo, ohne Kasten ----------
   Ergebnis, Renderer, Unterschrift mit Vollbild, Rückmeldung, Eingabe. */

.cockpit-experiment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-6);
  padding: 0;
  background: none;
  border-radius: 0;
}

.cockpit-experiment > * {
  grid-column: 1 / -1;
}

.composition-heading {
  order: 1;
}

#interactive-screen {
  order: 2;
}

.cockpit-experiment .screen-summary {
  order: 3;
  grid-column: 1;
  align-self: start;
  padding-block: var(--space-3) 0;
}

.cockpit-experiment .screen-actions {
  order: 4;
  grid-column: 2;
  align-self: start;
  padding-top: 0;
}

.cockpit-experiment .composer-feedback {
  order: 5;
}

.composer-request {
  order: 6;
}

.composition-heading .label {
  margin-bottom: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: normal;
}

#comparison-summary {
  color: var(--color-ink-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

#cockpit-result,
#composer-form {
  scroll-margin-top: var(--scroll-offset);
}

.cockpit-experiment .screen-summary h3 {
  color: var(--color-ink);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-caption);
}

.composer-feedback {
  margin-top: var(--space-4);
  padding: 0;
  background: none;
  border-left: 0;
  border-radius: 0;
  color: var(--color-ink-body);
}

.composer-request {
  margin-top: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line-strong);
}

.composer-form,
.composer-request .composer-form,
#composer-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.composer-form-heading label {
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h3);
}

.composer-prompts > span {
  font-size: var(--text-micro);
}

.composer-prompts button {
  background: var(--color-surface);
}

/* Der Build legt „Reset this moment“ mobil über die Frage; hier rückt er
   neben oder unter sie. */
@media (max-width: 680px) {
  .composer-form-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-3);
  }

  .composer-reset:not(:disabled) {
    position: static;
    max-width: none;
  }
}

/* Zugang zum vollständigen Prototyp: ein Link statt eines blauen Kastens */
.prototype-access {
  margin-top: var(--space-block);
  padding-block: var(--space-8) 0;
  border-top: 1px solid var(--color-line-strong);
}

.prototype-access > a {
  justify-content: flex-start;
  gap: var(--space-2);
  max-width: none;
  min-height: var(--tap-min);
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--color-accent);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.prototype-access > a:hover {
  background: none;
  text-decoration-thickness: 2px;
}

/* ---------- 04: die Suche als Bild neben dem Text (E9) ----------
   Auswahl, Regler, Kamera, Trefferliste und Erklärung bleiben für das Skript
   im HTML, sind aber nicht zu sehen; die Projektion zeigt den Pendelweg. */

.vector-experiment {
  padding: 0;
  background: none;
  border-radius: 0;
}

.vector-toolbar,
.query-context,
.vector-camera-controls,
.plot-help,
.search-results,
#vector-detail,
.vector-experiment > .demo-details {
  display: none;
}

.vector-body {
  display: block;
}

#vector-plot {
  pointer-events: none;
  cursor: auto;
}

.vector-scenario-summary {
  margin-top: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
}

.search-stats {
  margin-block: var(--space-1) var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
}

.plot-caption {
  margin-top: var(--space-4);
}

@media (min-width: 1024px) {
  #retrieval > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }

  #retrieval .section-intro {
    grid-column: 1 / -1;
  }

  .retrieval-story {
    display: block;
    margin: 0;
  }

  .retrieval-story p + p {
    margin-top: var(--space-5);
  }
}