/* =============================================================================
   qapture — Korrekturen und Ergänzungen, September 2026

   Diese Datei wird nach dem übrigen CSS geladen. Sie behebt drei Layoutfehler
   und bringt die Bausteine für die neuen Abschnitte mit. Sie greift nie
   pauschal ein, sondern immer nur an der Stelle, um die es geht.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Der Einlauf im Hero blieb stehen

   Zwei Regeln haben dieselbe Gewichtung:

     html.js body.qptr .hero [data-reveal]        transform: translateY(3.25rem) scale(.985)
     html.js body.qptr [data-reveal].is-revealed  transform: none

   Beide zählen vier Klassen. Bei Gleichstand entscheidet die Reihenfolge, und
   die Hero-Regel steht weiter unten. Also hat jedes eingeblendete Element im
   Hero seinen Startversatz behalten: dauerhaft 52 px zu tief und auf 98,5 %
   verkleinert. Sichtbare Folge auf den Referenzseiten: das Bild schiebt sich
   über die Subline.

   Die Korrektur gewichtet den Endzustand höher als den Startzustand.
   -------------------------------------------------------------------------- */
html.js body.qptr .hero [data-reveal].is-revealed,
html.js body.qptr .hero [data-reveal].is-revealed .bar__fill,
html.js body.qptr .hero [data-reveal].is-revealed .bar__text {
  transform: none;
}

/* -----------------------------------------------------------------------------
   2. Das Zitat stand in einer 4 rem schmalen Spalte

   .quote ist ein Raster aus 4 rem für ein Anführungszeichen und einer breiten
   Spalte für den Text. Das Zeichen-Element gibt es im Markup nicht mehr,
   deshalb ist der Text in die schmale Spalte gerutscht — ein Wort je Zeile.
   Ohne das Zeichen braucht es die Spalte nicht.
   -------------------------------------------------------------------------- */
body.qptr .quote:not(:has(.quote__mark)) {
  grid-template-columns: minmax(0, 1fr);
}
body.qptr .quote:not(:has(.quote__mark)) .quote__text,
body.qptr .quote:not(:has(.quote__mark)) .quote__meta {
  grid-column: 1;
}
/* Ein Zitat in Headline-Größe liest sich ab etwa 26 Zeichen je Zeile ruhig.
   Vorher stand hier 30ch, was in der schmalen Spalte nie zum Tragen kam. */
body.qptr .quote:not(:has(.quote__mark)) .quote__text {
  max-width: 26ch;
}
@media (width >= 60rem) {
  body.qptr .quote:not(:has(.quote__mark)) .quote__text {
    max-width: 30ch;
  }
}

/* -----------------------------------------------------------------------------
   3. Die Auszeichnung deckte die Zeile darüber zu

   Die Mint- und Lila-Auszeichnung ist ein Inline-Element mit Innenabstand.
   Bei enger Zeilenhöhe reicht ihre Fläche über die Oberkante ihrer eigenen
   Zeile hinaus. Weil sie im Dokument später steht, malt der Browser sie über
   den Text der Zeile darüber — Unterlängen und Satzzeichen verschwinden.

   Die Zeilen bekommen deshalb eine Stapelung: die ausgezeichnete Zeile nach
   hinten, alle anderen davor. Nichts wird verschoben, nur die Reihenfolge
   beim Zeichnen ist jetzt richtig.
   -------------------------------------------------------------------------- */
body.qptr :is(h1, h2, h3) .hero__line,
body.qptr :is(h1, h2, h3) > span {
  position: relative;
  z-index: 1;
}
body.qptr :is(h1, h2, h3) .hero__line:has(.mint-block),
body.qptr :is(h1, h2, h3) .hero__line:has(.lila-block),
body.qptr :is(h1, h2, h3) > span:has(> .mint-block),
body.qptr :is(h1, h2, h3) > span:has(> .lila-block) {
  z-index: 0;
}

/* -----------------------------------------------------------------------------
   4. Faktenleiste

   Drei Werte nebeneinander, oben und unten von einer Haarlinie gefasst.
   Zahl in Archivo, Erläuterung in Space Grotesk darunter.
   -------------------------------------------------------------------------- */
.qf-facts {
  display: grid;
  gap: 1px;
  background: var(--line-soft, #0b171714);
  border-block: 1px solid var(--line, #0b17172e);
  margin: 0;
}
.qf-facts__item {
  background: var(--bg, #fff);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  text-align: center;
}
.qf-facts__value {
  display: block;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.qf-facts__label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-small, 0.9375rem);
  line-height: 1.45;
  color: var(--fg-quiet, rgba(11, 23, 23, 0.66));
}
@media (width >= 46rem) {
  .qf-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -----------------------------------------------------------------------------
   5. Zitat mit Bezug, mittig im Satzspiegel
   -------------------------------------------------------------------------- */
.qf-quote {
  margin: 0;
  max-width: 46rem;
}
.qf-quote__text {
  margin: 0;
  font-size: clamp(1.375rem, 2.6vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.qf-quote__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line, #0b17172e);
}
.qf-quote__author {
  font-size: var(--fs-body, 1.125rem);
}
.qf-quote__role {
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-meta, 0.8125rem);
  letter-spacing: 0.04em;
  color: var(--fg-quiet, rgba(11, 23, 23, 0.66));
  align-self: center;
}

/* -----------------------------------------------------------------------------
   6. Download mit Vorschau des PDFs

   Das Mock-up steht links, das Formular rechts. Untereinander auf schmalen
   Screens, und das Bild zuerst — es erklärt in einer Sekunde, was man bekommt.
   -------------------------------------------------------------------------- */
.qf-dl {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.qf-dl__mock {
  margin: 0;
  max-width: 26rem;
}
.qf-dl__mock img {
  width: 100%;
  height: auto;
  display: block;
}
@media (width >= 56rem) {
  .qf-dl {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   7. Bilder ohne Markenfärbung

   Die Bildwelt legt sonst lila zu 50 % über jedes Motiv. Für Aufnahmen aus
   dem Unternehmen und für die Anwendungsbilder ist das falsch: dort soll man
   sehen, was wirklich zu sehen ist.
   -------------------------------------------------------------------------- */
.qf-plain .plate__overlay,
.qf-plain .plate__tint {
  display: none !important;
}
.qf-plain .plate__img {
  filter: none !important;
}

/* -----------------------------------------------------------------------------
   8. Bildstrecke
   -------------------------------------------------------------------------- */
.qf-gallery {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.qf-gallery__item {
  margin: 0;
}
.qf-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Die Motive liegen alle nahe 2:1. So wird kaum etwas abgeschnitten und
     die Reihe bleibt trotzdem auf einer Kante. */
  aspect-ratio: 2 / 1;
}
.qf-gallery__caption {
  margin-top: 0.7rem;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-meta, 0.8125rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--fg-quiet, rgba(11, 23, 23, 0.66));
}
@media (width >= 44rem) {
  .qf-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qf-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 62rem) {
  .qf-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ein einzelnes, breites Motiv. */
.qf-figure {
  margin: 0;
}
.qf-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* -----------------------------------------------------------------------------
   9. Video

   Ohne Automatik und ohne Ton beim Start: der Besucher entscheidet. Das
   Vorschaubild ist der erste Frame, deshalb braucht es kein zusätzliches
   Poster.
   -------------------------------------------------------------------------- */
.qf-video {
  margin: 0;
  position: relative;
}
.qf-video video {
  width: 100%;
  height: auto;
  display: block;
}
.qf-video__caption {
  margin-top: 0.85rem;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-meta, 0.8125rem);
  letter-spacing: 0.04em;
  color: var(--fg-quiet, rgba(11, 23, 23, 0.66));
}

/* -----------------------------------------------------------------------------
   10. Dank nach dem Absenden

   Ersetzt das Formular an Ort und Stelle, damit klar ist, dass etwas passiert
   ist. Der Fokus springt darauf, sonst bleibt die Meldung für Screenreader
   unbemerkt.
   -------------------------------------------------------------------------- */
.qf-done {
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  font-size: var(--fs-lead, 1.25rem);
  line-height: 1.4;
  border-top: 1px solid var(--line, #0b17172e);
}
.qf-done:focus {
  outline: none;
}
.qf-done__mark {
  display: inline-block;
  background: var(--mint, #44feb2);
  color: var(--schwarz, #0b1717);
  padding: 0.1em 0.4em;
  margin-inline-end: 0.5rem;
}

/* -----------------------------------------------------------------------------
   11. Aufzählung mit Stichwort

   Die Marke kennt nur einen Schnitt, Hierarchie entsteht deshalb über Größe,
   Farbe und Fläche — nicht über Fettung. Das Stichwort steht auf eigener
   Zeile, die Erläuterung eine Stufe leiser darunter.
   -------------------------------------------------------------------------- */
.list-marked li > strong {
  display: block;
  font-weight: inherit;
}
.list-marked li > strong + * ,
.list-marked li > strong ~ br {
  display: block;
}
.list-marked li:has(> strong) {
  color: var(--fg-quiet, rgba(11, 23, 23, 0.66));
}
.list-marked li > strong {
  color: var(--fg, #0b1717);
}

/* -----------------------------------------------------------------------------
   12. Meldung im Formular

   Für den Fall, dass das Absenden fehlschlägt: die Eingabe bleibt stehen,
   damit niemand sie neu tippen muss.
   -------------------------------------------------------------------------- */
.qf-note {
  margin: 0.9rem 0 0;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-small, 0.9375rem);
  line-height: 1.5;
  color: var(--fg, inherit);
}
.qf-note a {
  color: inherit;
}

/* -----------------------------------------------------------------------------
   13. Vorschaubild bei den Pressemeldungen

   Das Bild sitzt über der Meldung und läuft über die volle Breite der Karte.
   Die Karte hat Innenabstand, deshalb wird er hier wieder herausgerechnet —
   sonst schwebt das Motiv in einem Rahmen.
   -------------------------------------------------------------------------- */
.asset__media {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  overflow: hidden;
  background: var(--schwarz, #0b1717);
}
.asset__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Die Bandmotive liegen bei 2,4:1, das Gründerfoto ist quadratisch. 21:9
     schneidet bei den Bändern praktisch nichts weg und macht aus dem Porträt
     einen ruhigen Streifen. Der Ausschnitt sitzt etwas höher als die Mitte,
     damit Gesichter im Bild bleiben. */
  aspect-ratio: 21 / 9;
  object-position: 50% 32%;
  transition: transform var(--dur-slow, 0.72s) var(--ease-out, ease);
}
.asset:hover .asset__media img,
.asset:focus-within .asset__media img {
  transform: scale(1.03);
}

/* -----------------------------------------------------------------------------
   14. Downloadlinks im Pressebereich

   Sie standen in lila auf weiss: 4,15:1 bei 13 px. Die Kontrasttabelle der
   Brand World verbietet lila als kleinen Text genau deshalb. Die Schrift
   steht jetzt in der Grundfarbe, lila bleibt als Unterstreichung erhalten —
   die Auszeichnung ist damit weiterhin sichtbar, nur nicht mehr als Farbe
   des Textes selbst.
   -------------------------------------------------------------------------- */
body.qptr .download__link {
  color: var(--fg, #0b1717);
  text-decoration-color: var(--accent, #596dff);
}

/* -----------------------------------------------------------------------------
   15. Use Cases

   Die Kachel auf der Übersicht ist ein ganzflächiger Link. Sie übernimmt die
   Gestaltung der bestehenden .offer-Kachel und ergänzt nur, was ein Link
   braucht: eine Trefferfläche über die ganze Kachel, eine sichtbare Reaktion
   beim Überfahren und einen Pfeil, der die Richtung zeigt.
   -------------------------------------------------------------------------- */
.offer--link {
  position: relative;
  transition: border-color var(--dur-base, 0.32s) var(--ease-out, ease);
}
.offer--link .offer__link {
  display: flex;
  flex-direction: column;
  gap: inherit;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
/* Die ganze Kachel ist anklickbar, ohne den Text in den Link zu zwingen. */
.offer--link .offer__link::after {
  content: '';
  position: absolute;
  inset: 0;
}
.offer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: auto;
  padding-top: var(--space-3, 0.75rem);
  color: var(--accent, #596dff);
}
.offer__cta::after {
  content: '→';
  transition: transform var(--dur-base, 0.32s) var(--ease-out, ease);
}
.offer--link:hover .offer__cta::after,
.offer--link:focus-within .offer__cta::after {
  transform: translateX(0.3em);
}
.offer--link:focus-within {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 4px;
}

/* Sieben Kacheln lesen sich zu dritt am ruhigsten. */
@media (width >= 44rem) {
  body.qptr .offers--cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 68rem) {
  body.qptr .offers--cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Die Überschrift eines Use Case sitzt links, der Text rechts. Ohne diese
   Zeile stünde die Überschrift auf voller Breite und der Text darunter. */
.section .two > div > .sec__title {
  margin-top: 0;
}

/* -----------------------------------------------------------------------------
   16. Zusammengeführtes Menü: Leistungen links, Branchen als Kacheln rechts

   Die Kacheln übernehmen die Gestaltung des bisherigen mega__feature: harte
   Kante, Haarlinie, Reaktion beim Überfahren. Mission Critical steht über
   beide Spalten und auf mint — dieselbe Absetzung wie im bisherigen Menü.
   -------------------------------------------------------------------------- */
.mega__industries {
  display: grid;
  gap: var(--space-3, 0.75rem);
  align-content: start;
}
@media (width >= 60rem) {
  .mega__industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mega__ind {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-4, 1rem);
  border: 1px solid var(--line, #ffffff2e);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--dur-base, 0.32s) var(--ease-out, ease),
    background-color var(--dur-base, 0.32s) var(--ease-out, ease);
}
.mega__ind:hover,
.mega__ind:focus-visible {
  border-color: var(--accent, #44feb2);
}
.mega__ind-eyebrow {
  color: var(--fg-quiet, inherit);
  text-transform: uppercase;
}
.mega__ind-title {
  font-size: var(--fs-body, 1.125rem);
  line-height: 1.2;
}
.mega__ind-text {
  color: var(--fg-quiet, inherit);
}
@media (width >= 60rem) {
  .mega__ind--critical { grid-column: 1 / -1; }
}
.mega__ind--critical {
  background: var(--mint, #44feb2);
  color: var(--schwarz, #0b1717);
  border-color: var(--mint, #44feb2);
}
.mega__ind--critical .mega__ind-eyebrow,
.mega__ind--critical .mega__ind-text {
  color: rgba(11, 23, 23, 0.72);
}
.mega__ind--critical:hover,
.mega__ind--critical:focus-visible {
  border-color: var(--schwarz, #0b1717);
}

/* Beide Panels stehen als Stapel: oben die Liste über die volle Breite, unten
   der zweite Block (Branchen-Kacheln bzw. Weg zur Übersicht). Sonst müssten
   drei Spalten Liste in eine halbe Zeile passen. */
body.qptr [data-nav-item='services'] .mega__inner,
body.qptr [data-nav-item='usecases'] .mega__inner,
body.qptr [data-nav-item='company'] .mega__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5, 1.5rem);
}
@media (width >= 60rem) {
  body.qptr .mega__industries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.qptr .mega__ind--critical { grid-column: 1 / -1; }
}

/* -----------------------------------------------------------------------------
   18. Menü: drei Spalten, ein Zeichen je Punkt, deckender Grund

   Drei Änderungen an einem Ort, weil sie dieselbe Fläche betreffen:

   a) Die Punkte stehen in drei Spalten statt in einer langen Liste. Bei neun
      Use Cases wäre die Liste sonst höher als das Fenster.
   b) Jeder Punkt bekommt links ein Zeichen. Titel und Hinweis rücken enger
      zusammen und sitzen gemeinsam rechts davon — damit ist auf einen Blick
      zu sehen, was zusammengehört.
   c) Der Grund des Panels ist voll deckend. Durchscheinend war ausprobiert
      und wieder verworfen — das Bild dahinter lenkte vom Menü ab.
   -------------------------------------------------------------------------- */

/* a) drei Spalten */
body.qptr .mega__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6, 2rem);
  row-gap: 0;
}
@media (width >= 46rem) {
  body.qptr .mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 68rem) {
  body.qptr .mega__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Im Raster ist „letztes Kind" nicht mehr „letzte Zeile": die Linie bleibt
   überall stehen, sonst fehlte sie willkürlich an einer Stelle. */
body.qptr .mega__list li:last-child .mega__link {
  border-bottom: 1px solid var(--line-on-dark-soft, #ffffff1f);
}

/* b) Zeichen links, Titel und Hinweis rechts daneben */
body.qptr .mega__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.1rem;
  align-items: start;
  padding-block: 0.7rem;
}
body.qptr .mega__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  color: var(--mint, #44feb2);
  margin-top: 0.1rem;
  opacity: 0.72;
  transition: opacity var(--dur-fast, 0.18s) var(--ease-out, ease);
}
body.qptr .mega__link:hover .mega__icon,
body.qptr .mega__link:focus-visible .mega__icon { opacity: 1; }
body.qptr .mega__label { grid-column: 2; grid-row: 1; }
body.qptr .mega__hint  { grid-column: 2; grid-row: 2; }
/* Punkte ohne Zeichen (etwa „Übersicht") rücken in dieselbe Flucht. */
body.qptr .mega__link:not(:has(.mega__icon)) .mega__label,
body.qptr .mega__link:not(:has(.mega__icon)) .mega__hint { grid-column: 1 / -1; }

/* c) deckender Grund

   War zwischenzeitlich leicht durchscheinend, damit das Bild im Kopf
   dahinter zu sehen ist. Auf Ihre Rückmeldung hin wieder voll deckend: das
   Bild dahinter hat vom Menü abgelenkt. */
body.qptr .mega {
  background: var(--schwarz, #0b1717);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* -----------------------------------------------------------------------------
   19. Zahlenleiste

   Vier Zahlen nebeneinander, getrennt durch Haarlinien statt durch Kästen.
   Die Zahl trägt die Grösse, der Satz darunter die Erklärung — Hierarchie
   über Fläche, nicht über Strichstärke.
   -------------------------------------------------------------------------- */
.qf-kpi__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (width >= 46rem) {
  .qf-kpi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 68rem) {
  .qf-kpi__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.qf-kpi__item {
  padding: var(--space-4, 1rem) 0;
  border-top: 1px solid var(--line, currentColor);
}
@media (width >= 68rem) {
  .qf-kpi__item { padding: var(--space-4, 1rem) var(--space-5, 1.5rem) var(--space-4, 1rem) 0; }
  .qf-kpi__item + .qf-kpi__item {
    border-left: 1px solid var(--line, currentColor);
    padding-left: var(--space-5, 1.5rem);
  }
}
.qf-kpi__num {
  margin: 0 0 0.35rem;
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.05;
  color: var(--accent, currentColor);
}
.qf-kpi__text {
  margin: 0;
  color: var(--fg-quiet, currentColor);
  max-width: 30ch;
}

/* -----------------------------------------------------------------------------
   20. Lebenszyklus als Grafik

   Eine auf die Spitze gestellte Raute aus Haarlinien, vier Stationen an den
   Ecken, ein Stück Kante läuft im Kreis. Keine Rundungen, kein Verlauf, kein
   Schein — dieselben Mittel wie überall sonst: Linie, Fläche, Farbe.

   Die Bewegung ist Beiwerk. Ohne sie steht dieselbe Aussage vollständig da,
   deshalb schaltet prefers-reduced-motion sie ersatzlos ab und setzt statt
   dessen die ganze Kante auf Mint.
   -------------------------------------------------------------------------- */
.qf-cyc {
  margin-top: var(--space-7, 3rem);
  display: grid;
  gap: var(--space-5, 1.5rem);
}
.qf-cyc__stage {
  position: relative;
  width: min(100%, 26rem);
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.qf-cyc__svg { width: 100%; height: 100%; display: block; }
.qf-cyc__track { color: var(--line, currentColor); }
.qf-cyc__run {
  color: var(--lila, currentColor);
  stroke-dashoffset: 289;
  animation: qf-cyc-run 16s linear infinite;
}
/* Umfang des Kreises: 2 × PI × 184 = 1156, ein Viertel davon 289. Der
   Versatz beginnt bei +289, damit die Spitze des laufenden Stücks zu Beginn
   genau auf der ersten Marke steht und nicht schon auf der zweiten. */
@keyframes qf-cyc-run { to { stroke-dashoffset: -867; } }
.qf-cyc__mark {
  color: var(--fg-quiet, currentColor);
  opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: qf-cyc-mark 16s linear infinite;
}
/* Der kurze Strich von der Marke nach aussen zeigt auf ihren Text. */
.qf-cyc__arm {
  color: var(--line, currentColor);
  animation: qf-cyc-arm 16s linear infinite;
}
.qf-cyc__arm--0 { animation-delay: 0s; }
.qf-cyc__arm--1 { animation-delay: -12s; }
.qf-cyc__arm--2 { animation-delay: -8s; }
.qf-cyc__arm--3 { animation-delay: -4s; }
@keyframes qf-cyc-arm {
  0%, 18%   { color: var(--lila, currentColor); }
  26%, 100% { color: var(--line, currentColor); }
}
/* Der innere Kreis fasst die Mitte ein. */
.qf-cyc__kern { color: var(--line, currentColor); }
.qf-cyc__mark--0 { animation-delay: 0s; }
.qf-cyc__mark--1 { animation-delay: -12s; }
.qf-cyc__mark--2 { animation-delay: -8s; }
.qf-cyc__mark--3 { animation-delay: -4s; }
@keyframes qf-cyc-mark {
  0%        { color: var(--lila, currentColor); opacity: 1; transform: scale(1.5); }
  18%       { color: var(--lila, currentColor); opacity: 1; transform: scale(1.3); }
  26%, 100% { color: var(--fg-quiet, currentColor); opacity: 0.4; transform: scale(1); }
}
.qf-cyc__centre {
  position: absolute;
  margin: 0;
  display: grid;
  gap: 0.2rem;
  text-align: center;
  /* Der Text bleibt im inneren Kreis: dessen Radius ist 104 von 520, also
     40 Prozent der Bühne; abzüglich Luft an den Seiten bleiben 52 Prozent. */
  width: 52%;
}
.qf-cyc__centre-title { display: block; }
/* Die Mitte nennt im Takt der Kante die Station, bei der sie gerade ist.
   Alle vier Wörter liegen im selben Feld, damit nichts springt. */
.qf-cyc__takt {
  display: grid;
  min-height: 1.5em;
  margin-top: 0.15rem;
}
.qf-cyc__takt-schritt {
  grid-area: 1 / 1;
  color: var(--lila, currentColor);
  opacity: 0;
  animation: qf-cyc-takt 16s linear infinite;
}
.qf-cyc__takt-schritt--0 { animation-delay: 0s; }
.qf-cyc__takt-schritt--1 { animation-delay: -12s; }
.qf-cyc__takt-schritt--2 { animation-delay: -8s; }
.qf-cyc__takt-schritt--3 { animation-delay: -4s; }
@keyframes qf-cyc-takt {
  0%        { opacity: 0; transform: translateY(0.3rem); }
  6%, 20%   { opacity: 1; transform: translateY(0); }
  26%, 100% { opacity: 0; transform: translateY(-0.3rem); }
}
.qf-cyc__centre-text { display: block; color: var(--fg-quiet, currentColor); }

.qf-cyc__stations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4, 1rem);
}
.qf-cyc__station {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line, currentColor);
}
/* Statt nur die Farbe zu wechseln, wischt die Linie ein — dieselbe Bewegung
   wie bei den farbigen Auszeichnungen im Fliesstext. */
.qf-cyc__wisch {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lila, currentColor);
  transform: scaleX(0);
  transform-origin: left center;
  animation: qf-cyc-wisch 16s linear infinite;
}
.qf-cyc__station:nth-child(1) .qf-cyc__wisch { animation-delay: 0s; }
.qf-cyc__station:nth-child(2) .qf-cyc__wisch { animation-delay: -12s; }
.qf-cyc__station:nth-child(3) .qf-cyc__wisch { animation-delay: -8s; }
.qf-cyc__station:nth-child(4) .qf-cyc__wisch { animation-delay: -4s; }
@keyframes qf-cyc-wisch {
  0%        { transform: scaleX(0); transform-origin: left center; }
  12%, 20%  { transform: scaleX(1); transform-origin: left center; }
  30%       { transform: scaleX(0); transform-origin: right center; }
  100%      { transform: scaleX(0); transform-origin: right center; }
}
.qf-cyc__num {
  display: block;
  color: var(--fg-quiet, currentColor);
  animation: qf-cyc-num 16s linear infinite;
}
.qf-cyc__station:nth-child(1) .qf-cyc__num { animation-delay: 0s; }
.qf-cyc__station:nth-child(2) .qf-cyc__num { animation-delay: -12s; }
.qf-cyc__station:nth-child(3) .qf-cyc__num { animation-delay: -8s; }
.qf-cyc__station:nth-child(4) .qf-cyc__num { animation-delay: -4s; }
@keyframes qf-cyc-num {
  0%, 18%   { color: var(--lila, currentColor); }
  26%, 100% { color: var(--fg-quiet, currentColor); }
}
.qf-cyc__head { display: block; }
.qf-cyc__text { display: block; color: var(--fg-quiet, currentColor); max-width: 34ch; }

/* Ab Tabletbreite legen sich die vier Stationen im Uhrzeigersinn um die Raute. */
@media (width >= 60rem) {
  .qf-cyc {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-6, 2rem);
  }
  .qf-cyc__stage { grid-column: 2; grid-row: 1 / span 2; width: 26rem; }
  .qf-cyc__stations {
    display: contents;
  }
  .qf-cyc__station--top    { grid-column: 1; grid-row: 1; text-align: right; justify-items: end; }
  .qf-cyc__station--right  { grid-column: 3; grid-row: 1; }
  .qf-cyc__station--bottom { grid-column: 3; grid-row: 2; }
  .qf-cyc__station--left   { grid-column: 1; grid-row: 2; text-align: right; justify-items: end; }
}

@media (prefers-reduced-motion: reduce) {
  .qf-cyc__run {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.55;
  }
  .qf-cyc__mark, .qf-cyc__num, .qf-cyc__wisch, .qf-cyc__takt-schritt,
  .qf-cyc__arm { animation: none; }
  .qf-cyc__mark { color: var(--lila, currentColor); opacity: 1; transform: none; }
  .qf-cyc__arm { color: var(--lila, currentColor); }
  .qf-cyc__station { border-top-color: var(--lila, currentColor); }
  .qf-cyc__wisch { display: none; }
  /* Ohne Bewegung bleibt der erste Schritt stehen, statt dass die Zeile leer ist. */
  .qf-cyc__takt-schritt { opacity: 0; transform: none; }
  .qf-cyc__takt-schritt--0 { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   21. Vergleichstabelle

   Eine echte Tabelle, keine nachgebauten Spalten: Vorleseprogramme brauchen
   die Zuordnung von Zeile und Spalte, sonst ist ein Häkchen bedeutungslos.
   Jedes Häkchen steht deshalb neben einem Wort, das nur vorgelesen wird.

   Drei Themenblöcke, je ein eigener tbody mit Kopfzeile. Die qapture-Spalte
   ist durch eine Linie in Lila abgesetzt, nicht durch eine Füllung — sonst
   müsste die Schrift darin die Farbe wechseln.
   -------------------------------------------------------------------------- */
.qf-cmp {
  margin-top: var(--space-6, 2rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.qf-cmp:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 3px;
}
.qf-cmp__table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}
.qf-cmp__table th,
.qf-cmp__table td {
  padding: 0.8rem var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--line, currentColor);
  vertical-align: baseline;
  font-weight: inherit;
}
.qf-cmp__col {
  color: var(--fg-quiet, currentColor);
  border-bottom-color: var(--fg, currentColor);
}
.qf-cmp__col--erst { width: 42%; }
.qf-cmp__col--erst,
.qf-cmp__row { padding-left: 0; }
.qf-cmp__col--own,
.qf-cmp__cell--own {
  width: 8rem;
  text-align: center;
  border-left: 1px solid var(--lila, currentColor);
  border-right: 1px solid var(--lila, currentColor);
}
.qf-cmp__col--own {
  color: var(--fg, currentColor);
  border-top: 1px solid var(--lila, currentColor);
}
.qf-cmp__table tbody:last-child tr:last-child .qf-cmp__cell--own {
  border-bottom: 1px solid var(--lila, currentColor);
}
.qf-cmp__cell--beispiel { color: var(--fg-quiet, currentColor); }

/* Kopfzeile eines Themenblocks: ein Wort, kein Kasten. In Lila wäre sie bei
   13 Pixeln nur 4,15:1 gegen Weiss und damit unter der Grenze von WCAG AA —
   deshalb in der Textfarbe, abgesetzt allein durch Abstand und Versalien. */
.qf-cmp__gruppe-kopf th {
  padding-top: var(--space-5, 1.5rem);
  padding-bottom: 0.5rem;
  border-bottom: 0;
  color: var(--fg, currentColor);
  text-transform: uppercase;
}
.qf-cmp__gruppe:first-of-type .qf-cmp__gruppe-kopf th { padding-top: var(--space-4, 1rem); }
.qf-cmp__cell--leer { border-bottom: 0; }

.qf-cmp__mark {
  display: inline-block;
  line-height: 1;
  color: var(--lila, currentColor);
}
.qf-cmp__mark svg { width: 1.15rem; height: 1.15rem; display: block; }
.qf-cmp__note {
  margin-top: var(--space-4, 1rem);
  max-width: 60ch;
  color: var(--fg-quiet, currentColor);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Ab Tabletbreite ist die Tabelle eine Tabelle. Darunter stapeln sich die
   Zeilen zu Blöcken — sonst müsste man seitlich scrollen, um überhaupt ein
   Häkchen zu sehen. Die Rollen im Markup halten dabei den Aufbau für
   Vorleseprogramme aufrecht, und die Kopfzeile bleibt für sie erhalten, auch
   wenn sie hier nicht mehr zu sehen ist. */
.qf-cmp__cell-label { display: none; }
@media (width < 46rem) {
  .qf-cmp { overflow-x: visible; }
  .qf-cmp__table { min-width: 0; display: block; }
  .qf-cmp__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .qf-cmp__table tbody { display: block; }
  .qf-cmp__table tr { display: block; }
  .qf-cmp__table th,
  .qf-cmp__table td { display: block; padding: 0; border-bottom: 0; }
  .qf-cmp__table tbody tr:not(.qf-cmp__gruppe-kopf) {
    padding-block: var(--space-4, 1rem);
    border-bottom: 1px solid var(--line, currentColor);
  }
  .qf-cmp__gruppe-kopf th {
    padding: var(--space-5, 1.5rem) 0 0.35rem;
    border-bottom: 0;
  }
  /* Gestapelt braucht es die leere Zelle nicht — dort gibt es keine Spalte,
     deren Linie sie weitertragen müsste. */
  .qf-cmp__cell--leer { display: none; }
  .qf-cmp__table th.qf-cmp__row { margin-bottom: 0.5rem; }
  .qf-cmp__table td.qf-cmp__cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.25rem;
    text-align: left;
  }
  .qf-cmp__table td.qf-cmp__cell--own,
  .qf-cmp__table tbody:last-child tr:last-child .qf-cmp__cell--own { width: auto; border: 0; }
  .qf-cmp__cell-label { display: block; color: var(--fg-quiet, currentColor); }
  .qf-cmp__cell--own .qf-cmp__cell-label { color: var(--fg, currentColor); }
}

/* -----------------------------------------------------------------------------
   22. Anwendungen als eigene Liste

   Bild, Titel, Satz — auf der Use-Case-Seite und auf der Branchenseite
   dieselbe Liste, bewusst nicht die Kachelklassen der Leistungen: deren
   Raster laesst unterschiedlich breite Spalten zu. Die Bilder tragen .qf-plain und bleiben ohne Farbauftrag.
   -------------------------------------------------------------------------- */
.qf-apps {
  list-style: none;
  margin: var(--space-6, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (width >= 46rem) {
  .qf-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width >= 68rem) {
  .qf-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.qf-app__media {
  margin: 0 0 1rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--line-soft, transparent);
}
.qf-app__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.qf-app__title { margin: 0 0 0.35rem; }
.qf-app__text  { margin: 0; color: var(--fg-quiet, currentColor); }


/* Der scrollbare Rahmen ist mit der Tastatur erreichbar; ohne diese Regel
   bliebe der Fokus unsichtbar. */
.qf-cmp:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   23. Ziffern der fünf Stufen auf schmalen Schirmen

   Die Ziffern stehen in Lila auf Weiss. Das Verhältnis ist 4,15:1 — für
   grosse Schrift (ab 24px) reicht das nach WCAG AA, für normale nicht. Am
   Schreibtisch sind sie 28px gross und damit in Ordnung, am Telefon fielen
   sie auf 20px und rutschten unter die Grenze. Statt die Farbe zu ändern
   und damit aus den fünf Markenfarben auszubrechen, bleibt die Ziffer
   überall gross genug.
   -------------------------------------------------------------------------- */
body.qptr .phase__num {
  font-size: clamp(1.5rem, 2vw, 1.75rem);
}

/* Das Logoband ist jetzt mit der Tastatur erreichbar und zeigt das auch. */
.logos__viewport:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 3px;
}

/* Ab Tabletbreite ist die Tabelle eine Tabelle. Darunter stapeln sich die
   Zeilen zu Blöcken — sonst müsste man 736 Pixel breit seitlich scrollen, um
   überhaupt ein Häkchen zu sehen. Die Rollen im Markup halten dabei den
   Aufbau für Vorleseprogramme aufrecht, und die Kopfzeile bleibt für sie
   erhalten, auch wenn sie hier nicht mehr zu sehen ist. */
.qf-cmp__cell-label { display: none; }
@media (width < 46rem) {
  .qf-cmp { overflow-x: visible; }
  .qf-cmp__table { min-width: 0; display: block; }
  .qf-cmp__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .qf-cmp__table tbody { display: block; }
  .qf-cmp__table tr {
    display: block;
    padding-block: var(--space-4, 1rem);
    border-bottom: 1px solid var(--line, currentColor);
  }
  .qf-cmp__table tr:last-child { border-bottom: 0; }
  .qf-cmp__table th,
  .qf-cmp__table td { display: block; padding: 0; border-bottom: 0; }
  .qf-cmp__table th.qf-cmp__row { width: auto; margin-bottom: 0.6rem; }
  .qf-cmp__table td.qf-cmp__cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.3rem;
    text-align: left;
  }
  .qf-cmp__cell--own { border: 0; }
  .qf-cmp__table tbody tr:last-child .qf-cmp__cell--own { border-bottom: 0; }
  .qf-cmp__cell-label { display: block; color: var(--fg-quiet, currentColor); }
  .qf-cmp__cell--own .qf-cmp__cell-label { color: var(--fg, currentColor); }
}

/* -----------------------------------------------------------------------------
   24. Unternehmen im Menü: vier Punkte, vier Spalten

   Die vier Punkte passen in eine Zeile, dann muss der Blick nicht springen.
   Erst ab 68 rem, darunter bleiben es zwei Spalten und ganz schmal eine.
   -------------------------------------------------------------------------- */
@media (width >= 68rem) {
  body.qptr .mega__list--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -----------------------------------------------------------------------------
   25. Fusszeile: die Menüpunkte kleiner

   Sie standen in derselben Grösse wie Fliesstext und zogen dadurch mehr
   Aufmerksamkeit als der Inhalt darüber. Jetzt in der Auszeichnungsgrösse,
   in derselben Schrift wie die übrigen Kleinstangaben der Seite. Farbe und
   Kontrast bleiben unverändert (rund 8:1), die Klickfläche bleibt hoch genug.
   -------------------------------------------------------------------------- */
body.qptr .site-footer__link {
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-meta, 0.8125rem);
  letter-spacing: var(--tracking-meta, 0.02em);
  min-height: 1.35rem;
}
body.qptr .site-footer__col ul { gap: 0.1rem; }

/* -----------------------------------------------------------------------------
   26. Bildstrecke mit Beschreibung

   Für Motive, die aus einer Case Study kommen und einzeln erklärt werden
   müssen. Ein Motiv je Zeile über die volle Breite — die Bilder sind
   Vergleichsreihen mit Messwerten, in zwei Spalten wäre nichts davon zu
   lesen. Die Beschreibung steht als echter Text darunter, nicht im Bild:
   so wächst sie mit der Schriftgrösse mit und wird vorgelesen.
   -------------------------------------------------------------------------- */
.qf-strecke {
  margin-top: var(--space-6, 2rem);
  display: grid;
  gap: var(--space-6, 2rem);
}
.qf-strecke__lead {
  max-width: var(--measure-lead, 46rem);
  margin-top: var(--space-4, 1rem);
}
.qf-strecke__item { margin: 0; }
.qf-strecke__item img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--line-soft, transparent);
}
.qf-strecke__text {
  margin-top: 0.85rem;
  max-width: 68ch;
  color: var(--fg-quiet, currentColor);
}

/* -----------------------------------------------------------------------------
   27. Firmendaten im Impressum

   Bezeichnung und Wert in zwei Spalten, damit UID, Firmenbuchnummer und
   Gericht auf einen Blick abzulesen sind. Als Definitionsliste, nicht als
   Tabelle: es sind Paare, keine Matrix.
   -------------------------------------------------------------------------- */
.qf-firmendaten {
  margin: 0 0 var(--space-5, 1.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (width >= 34rem) {
  .qf-firmendaten { grid-template-columns: 14rem minmax(0, 1fr); }
}
.qf-firmendaten dt {
  padding: 0.5rem 0 0;
  color: var(--fg-quiet, currentColor);
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-meta, 0.8125rem);
  letter-spacing: var(--tracking-meta, 0.02em);
}
.qf-firmendaten dd {
  margin: 0;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--line, currentColor);
}
@media (width >= 34rem) {
  .qf-firmendaten dt { padding: 0.55rem 0; border-bottom: 1px solid var(--line, currentColor); }
  .qf-firmendaten dd { padding: 0.5rem 0; }
}

/* Vorspann in den neu eingesetzten Medienabschnitten. */
.qf-medien__lead {
  max-width: var(--measure-lead, 46rem);
  margin-top: var(--space-4, 1rem);
}

/* Der dunkle Grund gehört unter den Film, nicht unter die ganze Abbildung:
   sonst stand die Bildunterschrift dunkel auf dunkel und war nicht zu lesen. */
.qf-video video { background: var(--schwarz, #0b1717); }

/* -----------------------------------------------------------------------------
   28. Kopf der Startseite: Markenfilm auf Weiss

   Der Kopf steht jetzt auf Weiss statt auf einem dunklen Bild. Damit dreht
   sich alles darauf um: Wortmarke, Menü und Überschrift stehen in Schwarz,
   die Ankündigungsleiste darüber wird zur schwarzen Zeile.

   Der Film läuft einmal und bleibt auf dem letzten Bild stehen. Sein Grund
   ist reines Weiss und damit derselbe wie der der Seite — deshalb braucht es
   unten keinen Verlauf mehr, der Übergang ist ohnehin nicht zu sehen.
   -------------------------------------------------------------------------- */

/* --- Ankündigungsleiste: schwarz, ohne Farbspiel -------------------------- */
body.qptr .announce,
body.qptr:not(.page-home) .announce {
  background-color: var(--schwarz, #0b1717);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}
/* Der wandernde Lichtstreifen gehörte zum lila Glasband und hat auf Schwarz
   nichts mehr zu suchen. Das Laufband mit dem Text bleibt. */
body.qptr .announce::before { display: none; }

/* --- Kopfzeile auf der Startseite ---------------------------------------- */
/* Ganz oben steht sie auf dem hellen Film und dreht deshalb auf Schwarz.
   Sobald gescrollt oder ein Menü geöffnet wird, legt sie sich wie bisher auf
   eine dunkle Fläche — dann dreht die Schrift zurück auf Weiss. Beides ist
   dieselbe Bewegung, die schon vorher da war, nur andersherum. */
body.qptr.page-home .site-header {
  --fg: var(--schwarz);
  --fg-quiet: #0b1717a8;
  --line: var(--line-on-light);
  --line-soft: var(--line-on-light-soft);
  --surface: var(--surface-on-light);
  --accent: var(--schwarz);
  --focus: var(--schwarz);
  color: var(--schwarz);
}
/* Die Wortmarke ist im Build fest auf Weiss gesetzt. Über currentColor folgt
   sie der Schriftfarbe und wechselt damit weich mit. */
body.qptr.page-home .site-header .logo__word path { fill: currentColor; }

/* Die Menüpunkte tragen im Build eine fest eingetragene weisse Farbe, sie
   folgen also nicht dem Token-Set. Deshalb hier beide Zustände einzeln. */
body.qptr.page-home .site-header .nav__link { color: #0b1717b8; }
body.qptr.page-home .site-header .nav__link:hover,
body.qptr.page-home .site-header .nav__link:focus-visible,
body.qptr.page-home .site-header .nav__item:hover > .nav__link,
body.qptr.page-home .site-header .nav__item:focus-within > .nav__link,
body.qptr.page-home .site-header .nav__link.is-active { color: var(--schwarz); }

body.qptr.page-home .site-header.is-solid .nav__link,
body.qptr.page-home .site-header:has([data-nav-toggle][aria-expanded='true']) .nav__link,
body.qptr.page-home .site-header:has([data-nav-item][data-open]) .nav__link { color: #ffffffb8; }
body.qptr.page-home .site-header.is-solid .nav__link:hover,
body.qptr.page-home .site-header.is-solid .nav__link:focus-visible,
body.qptr.page-home .site-header.is-solid .nav__item:hover > .nav__link,
body.qptr.page-home .site-header.is-solid .nav__item:focus-within > .nav__link,
body.qptr.page-home .site-header:has([data-nav-item][data-open]) .nav__item:hover > .nav__link,
body.qptr.page-home .site-header:has([data-nav-item][data-open]) .nav__link:hover { color: var(--weiss); }
body.qptr.page-home .site-header.is-solid .nav__link.is-active,
body.qptr.page-home .site-header:has([data-nav-item][data-open]) .nav__link.is-active { color: var(--mint); }

/* Dasselbe für den Menüknopf am Telefon: seine drei Striche sind im Build
   fest auf Weiss gesetzt und wären auf dem hellen Kopf unsichtbar. Über
   currentColor und das Linien-Token folgen sie dem Umschwung mit. */
body.qptr.page-home .site-header .burger i { background: currentColor; }
body.qptr.page-home .site-header .site-header__toggle { border-color: var(--line); }

body.qptr.page-home .site-header.is-solid,
body.qptr.page-home .site-header:has([data-nav-toggle][aria-expanded="true"]),
body.qptr.page-home .site-header:has([data-nav-item][data-open]) {
  --fg: var(--weiss);
  --fg-quiet: #ffffffa8;
  --line: var(--line-on-dark);
  --line-soft: var(--line-on-dark-soft);
  --surface: var(--surface-on-dark);
  --accent: var(--mint);
  --focus: var(--mint);
  color: var(--weiss);
}

/* --- Der Film --------------------------------------------------------------
   Er füllt die Fläche und wird an den Seiten beschnitten, nicht gestaucht.
   Kein Verlauf, keine Maske: der Film endet in Weiss, die Seite ist weiss. */
body.qptr.page-home .hero--film {
  --fg: var(--schwarz);
  --fg-quiet: #0b1717ad;
  --line: var(--line-on-light);
  --surface: var(--surface-on-light);
  --accent: var(--schwarz);
  --focus: var(--schwarz);
  --btn-bg: var(--schwarz);
  --btn-fg: var(--weiss);
  color: var(--schwarz);
}
body.qptr.page-home .hero--film .hero__bg {
  inset: 0;
  background: none;
  transform: none;
  animation: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Der Film endet an der Unterkante des Kopfes ohne Verlauf — das Signet ist
   dort sauber abgeschnitten, so wie im Entwurf.

   Damit dabei keine Kante entsteht, wandert der Übergang eine Etage tiefer:
   der Grund des Films ist reines Weiss, der Grund der Seite ein sehr leiser
   Verlauf. Der Abschnitt unter dem Kopf beginnt deshalb selbst in Weiss und
   geht über seine ganze Höhe in den Seitengrund über. Der Unterschied von
   acht bis dreizehn Helligkeitsstufen verteilt sich damit auf mehrere
   hundert Pixel statt auf eine Linie — und das Signet bleibt unangetastet. */
body.qptr.page-home .hero--film { background: var(--weiss, #fff); }
body.qptr.page-home .hero--film + .section {
  background-image: linear-gradient(180deg,
    var(--weiss, #fff) 0%,
    rgba(255, 255, 255, .92) 24%,
    rgba(255, 255, 255, .68) 48%,
    rgba(255, 255, 255, .34) 72%,
    rgba(255, 255, 255, .10) 89%,
    rgba(255, 255, 255, 0) 100%);
}
body.qptr.page-home .hero--film .hero__film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  pointer-events: none;
}
/* Am Telefon ist der Ausschnitt so schmal, dass vom Film nur ein senkrechter
   Streifen übrig bliebe — und der läge genau unter der Schrift. Deshalb dort
   der ganze Film, unten angesetzt: die Schrift steht darüber auf Weiss. */
@media (width < 48rem) {
  body.qptr.page-home .hero--film .hero__film video {
    object-fit: contain;
    object-position: 50% 100%;
  }
}
/* Die seitliche Abdunklung gehörte zum dunklen Bild. */
body.qptr.page-home .hero--film::before { display: none; }

body.qptr.page-home .hero--film .hero__title,
body.qptr.page-home .hero--film .hero__sub-plain {
  color: var(--schwarz);
  text-shadow: none;
}

/* --- Der Text erscheint, wenn der Film zu Ende ist -------------------------
   Eine lange, ruhige Blende über den ganzen Block, nicht Zeile für Zeile.
   Ohne JavaScript steht der Text von Anfang an da: die Regel greift erst,
   wenn das Skript die Kennung gesetzt hat. */
html.js body.qptr.page-home .hero__text[data-hero-text] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 1.6s cubic-bezier(.16, 1, .3, 1),
    transform 1.6s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
html.js body.qptr.page-home .hero__text[data-hero-text].is-on {
  opacity: 1;
  transform: none;
}
/* Die Auszeichnungen im Text wischen erst mit, wenn der Block da ist —
   sonst wären sie längst gelaufen, während noch niemand hinsehen konnte. */
html.js body.qptr.page-home .hero__text[data-hero-text]:not(.is-on) .mint-block,
html.js body.qptr.page-home .hero__text[data-hero-text]:not(.is-on) .ul-orange {
  background-size: 0% 100%;
}
@media (prefers-reduced-motion: reduce) {
  html.js body.qptr.page-home .hero__text[data-hero-text] {
    transition: none;
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   29. Vollbreiter Filmabschnitt

   Für Quentin ganz oben auf der Spatial-Intelligence-Seite: Überschrift und
   Bildunterschrift stehen im Satzspiegel, der Film läuft über die volle
   Breite. Er ersetzt dort das Bildband, das vorher an derselben Stelle stand
   und ebenfalls randlos war.
   -------------------------------------------------------------------------- */
.qf-band__film {
  margin: var(--space-6, 2rem) 0 var(--space-4, 1rem);
  width: 100%;
}
.qf-band__film video {
  width: 100%;
  height: auto;
  display: block;
}

/* -----------------------------------------------------------------------------
   30. Kaufmotiv: Anmerkung statt Kasten

   War ein grauer Kasten mit dickem Balken an der Seite. Jetzt eine
   Randbemerkung: eine Haarlinie darüber, die Kopfzeile in der
   Auszeichnungsgrösse, der Satz darunter. Dieselben Mittel wie bei den
   Kopfzeilen der Abschnitte — kein eigenes Element, das erst gelernt werden
   müsste.
   -------------------------------------------------------------------------- */
body.qptr .motive {
  padding: var(--space-4, 1rem) 0 0;
  border-left: 0;
  border-top: 1px solid var(--line, currentColor);
  background: none;
}
body.qptr .motive__label {
  margin: 0 0 var(--space-3, 0.75rem);
  color: var(--fg-quiet, currentColor);
  text-transform: uppercase;
}
body.qptr .motive__text {
  max-width: 30ch;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   31. Der Strich unter den Wörtern sass zu dicht am Text

   Der Pinselstrich hängt am unteren Rand der Zeile. Ohne Luft darunter
   berührt er die Unterlängen von f, g und p. Etwas mehr Innenabstand schiebt
   ihn nach unten, ohne die Zeile auseinanderzuziehen — die Strichstärke
   bleibt, wie sie war.
   -------------------------------------------------------------------------- */
body.qptr .ul-orange { padding-bottom: 0.3em; }
body.qptr .cta--secondary:not(:has(.ul-orange)),
body.qptr .cta--quiet { padding-bottom: 0.22em; }

/* -----------------------------------------------------------------------------
   32. Zahlenreihe: Luft an den Seiten

   Die drei Felder standen ohne seitlichen Innenabstand nebeneinander. Lange
   Werte wie „18 component types" reichten dadurch bis an die Trennlinien.
   -------------------------------------------------------------------------- */
.qf-facts__item {
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

/* -----------------------------------------------------------------------------
   33. Menü Use Cases: eine Linie zwischen Liste und Übersicht

   Unter den neun Punkten steht der Weg zur Übersichtsseite. Ohne Trennung
   liest sich das wie ein zehnter Punkt. Eine Haarlinie und etwas Luft
   genügen — dieselben Mittel wie überall sonst auf der Seite.
   -------------------------------------------------------------------------- */
@media (width >= 60rem) {
  body.qptr [data-nav-item='usecases'] .mega__feature {
    margin-top: var(--space-5, 1.5rem);
    padding-top: var(--space-5, 1.5rem);
    border-top: 1px solid var(--line, #ffffff2e);
  }
}

/* -----------------------------------------------------------------------------
   34. Tonknopf im Kopf der Startseite

   Der Film startet von selbst und muss deshalb stumm starten — Browser
   verweigern das Abspielen sonst. Der Knopf schaltet den Ton dazu. Er sitzt
   unten links, ausserhalb des Textblocks, weil der erst nach dem Film
   erscheint und der Ton schon vorher anzuschalten sein soll.

   Gestaltung wie die übrigen leisen Schaltflächen: Haarlinie, kein Kasten,
   keine Rundung. Er soll da sein, aber nichts wegnehmen.
   -------------------------------------------------------------------------- */
body.qptr.page-home .hero__ton {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 2;
  pointer-events: none;
}
.qf-ton {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--line, currentColor);
  background: none;
  color: var(--fg-quiet, currentColor);
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary, 300);
  font-size: var(--fs-meta, 0.8125rem);
  letter-spacing: var(--tracking-meta, 0.02em);
  cursor: pointer;
  transition:
    color var(--dur-fast, 0.18s) var(--ease-out, ease),
    border-color var(--dur-fast, 0.18s) var(--ease-out, ease);
}
.qf-ton:hover,
.qf-ton:focus-visible {
  color: var(--fg, currentColor);
  border-color: var(--fg, currentColor);
}
.qf-ton__zeichen {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  flex: none;
}
/* Ein Zeichen, zwei Zustände: an spricht der Bogen, aus das Kreuz. Welcher
   Zustand gilt, steht in aria-pressed — Bild und Vorleseprogramm sagen damit
   dasselbe, und es gibt keine zweite Wahrheit im Markup. */
.qf-ton[aria-pressed='false'] .qf-ton__wellen,
.qf-ton[aria-pressed='true'] .qf-ton__strich { display: none; }
.qf-ton[hidden] { display: none; }

/* -----------------------------------------------------------------------------
   35. Abschnittsmarken eine Spur grösser

   Die Marken über den Abschnittsüberschriften ("01 Das Problem", "03 Der
   Kreislauf", "05 Spatial Intelligence") standen in der Auszeichnungsgrösse
   von 13 px und blieben neben den grossen Überschriften zu leise — sie
   ordnen die Startseite, werden aber leicht überlesen.

   Jetzt 14 px. Der Schritt ist klein genug, dass die Rangfolge zur
   Überschrift unangetastet bleibt: die Marke bleibt Marke, keine zweite
   Überschrift. Schrift, Laufweite und Farbe bleiben wie gehabt.

   Gilt für alle 319 Abschnittsmarken in beiden Sprachen. Nicht über .t-meta
   gelöst, weil dieselbe Klasse auch an Kleinstangaben hängt ("Sie erhalten:",
   Schaltflächenbeschriftungen) — die sollen ihre Grösse behalten.
   -------------------------------------------------------------------------- */
body.qptr .section__label.t-meta {
  font-size: 0.875rem;
}