/* ==========================================================================
   qptr-home.css  ·  Gestaltungsebene ueber dem Astro-Build
   --------------------------------------------------------------------------
   body.qptr           gilt auf allen Seiten
   body.qptr.page-home nur auf der Startseite (Hero mit Bild)
   ========================================================================== */

/* -- 1  Ladevorhang -------------------------------------------------------
   Reines CSS, keine JS-Abhaengigkeit: der Vorhang kann nicht haengen
   bleiben, weil er per animation-fill-mode:forwards von selbst abraeumt.
   Deckt jetzt in Seitenweiss ab, nicht mehr in Schwarz. */

html.js body.qptr::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  pointer-events: none;
  animation: qptr-veil 1.6s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes qptr-veil {
  0%,
  30%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}


/* -- 2  Hintergrund: einmalig, zentral, durchgehend -----------------------
   Der gesamte Seitenhintergrund liegt auf EINER fixierten Ebene hinter dem
   kompletten Dokument (body::before, position:fixed, z-index:-1). Weil die
   Ebene am Viewport haengt und nicht an einzelnen Sektionen, kann es
   zwischen Sektionen keine Kanten, Naehte oder Farbspruenge geben, egal wie
   viele Sektionen dazukommen oder wegfallen.
   Die Verlaeufe sind dieselben wie zuvor, nur auf hellen Werten: sehr
   weiches Weiss mit einem Hauch Mint links oben und unten sowie einem Hauch
   Lila rechts oben. body traegt die Basisfarbe zusaetzlich als Fallback. */

body.qptr {
  background-color: #ffffff;
  /* Hoehe der Ankuendigungsleiste. Der Hero zieht sie von der Viewporthoehe
     ab, damit sein Inhalt weiterhin vollstaendig ueber dem Falz steht. */
  --announce-h: 3.25rem;
}

body.qptr::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #ffffff;
  background-image:
    /* sehr feines Korn, nimmt den grossen weissen Flaechen das Flache */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"),
    radial-gradient(120% 78% at 8% -14%, rgba(68, 254, 178, .17) 0%, transparent 62%),
    radial-gradient(95% 70% at 96% 12%, rgba(89, 109, 255, .10) 0%, transparent 66%),
    radial-gradient(120% 85% at 50% 112%, rgba(68, 254, 178, .13) 0%, transparent 60%),
    linear-gradient(178deg, #ffffff 0%, #f8fbfa 36%, #f5f8fb 66%, #ffffff 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, cover, cover, cover, cover;
}

@supports (background-blend-mode: soft-light) {
  body.qptr::before {
    background-blend-mode: soft-light, normal, normal, normal, normal;
  }
}


/* -- 3  Sektionen transparent, helles Token-Set ---------------------------
   Vorher setzte jede Sektion ueber data-surface ihren eigenen Grund. Das
   erzeugte die harten Uebergaenge. Jetzt: Hintergrund raus, Tokens auf das
   HELLE Set der Marke vereinheitlichen. Es ist exakt das Set, das der Build
   unter [data-surface=weiss] ohnehin schon definiert - also kein neues
   Farbsystem, nur die andere der beiden vorhandenen Varianten.
   data-surface bleibt im Markup erhalten. */

body.qptr .section,
body.qptr .hero,
body.qptr .closing,
body.qptr .site-header,
body.qptr .site-footer,
body.qptr main {
  background: transparent;
}

body.qptr,
body.qptr [data-surface] {
  --bg: var(--weiss);
  --fg: var(--schwarz);
  --fg-quiet: #0b1717ad;
  --line: var(--line-on-light);
  --line-soft: var(--line-on-light-soft);
  --surface: var(--surface-on-light);
  --accent: var(--schwarz);
  --bar-bg: var(--mint);
  --bar-fg: var(--schwarz);
  --btn-bg: var(--schwarz);
  --btn-fg: var(--weiss);
  --focus: var(--schwarz);
}

/* Trennlinien zwischen Sektionen erzeugen wieder sichtbare Kanten:
   auf der Startseite bewusst entfernt. */
body.qptr .section.rule,
body.qptr .site-footer,
body.qptr .site-header {
  border-top: 0;
}


/* -- 4  Hero --------------------------------------------------------------
   Das Bild steht jetzt fuer sich: kein dunkler Verlauf von oben mehr. Nur
   am unteren Rand blendet es stufenlos ins Seitenweiss aus, damit der
   Uebergang zum Inhalt ohne Kante bleibt. Die Schrift steht ueber den
   ruhigen, dunklen Bildpartien und bekommt einen minimalen Schattenanteil
   statt einer Flaeche. */

body.qptr.page-home .hero {
  --fg: var(--weiss);
  --fg-quiet: #ffffffd1;
  --line: var(--line-on-dark);
  --surface: var(--surface-on-dark);
  --accent: var(--mint);
  --focus: var(--mint);
  --btn-bg: var(--schwarz);
  --btn-fg: var(--weiss);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--weiss);
  margin-top: calc((var(--header-h) + var(--announce-h)) * -1 - 1px);
  min-height: 100svh;
  display: grid;
  align-items: start;
  padding-block: calc(var(--announce-h) + var(--header-h) + clamp(2.5rem, 9vh, 6rem)) clamp(8rem, 26vh, 16rem);
}

body.qptr.page-home .hero__bg {
  position: absolute;
  inset: -6% 0 0 0;
  z-index: 0;
  background-image: url("../img/qptr-header-poster.jpg");
  background-size: cover;
  background-position: 52% 46%;
  background-repeat: no-repeat;
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
  /* Statt einer Videodatei faehrt das Standbild sehr langsam heran. Das
     ist derselbe Eindruck, kostet aber keinen zusaetzlichen Download und
     laeuft auf der GPU. */
  animation:
    qptr-hero-in 2.2s cubic-bezier(.16, 1, .3, 1) both,
    qptr-hero-zoom 46s ease-in-out 2.2s infinite alternate both;
}

/* Das Video legt sich deckungsgleich ueber das Standbild. Bis es laeuft,
   traegt das Bild als Poster - der Hero ist damit sofort da. */
body.qptr.page-home .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 52%;
  display: block;
  pointer-events: none;
  /* Das Video ist von Anfang an sichtbar. Sein eigenes Posterbild zeigt
     denselben Ausschnitt wie der Hintergrund, es gibt also nichts zu
     ueberblenden - und keinen Zustand, in dem es unsichtbar haengen
     bleiben koennte. */
}

/* Bei reduzierter Bewegung bleibt das Standbild stehen. */
@media (prefers-reduced-motion: reduce) {
  body.qptr.page-home .hero__video { display: none; }
}

/* Laeuft das Video, ruht der CSS-Zoom: sonst zoomen beide gegeneinander. */
body.qptr.page-home .hero__bg:has(.hero__video.is-playing) {
  animation: qptr-hero-in 2.2s cubic-bezier(.16, 1, .3, 1) both;
}

@media (max-width: 56.25rem) {
  body.qptr.page-home .hero__bg {
    background-image: url("../img/qptr-header-poster-800.jpg");
    background-position: 56% 48%;
  }
}

/* Das einzige Overlay: ein langer, weicher Auslauf ins Weiss am unteren
   Rand. Oben bleibt das Bild vollstaendig unangetastet. */
body.qptr.page-home .hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Oben ein kurzer Rueckhalt fuer Leiste und Menue, unten der lange
     Auslauf. Beide Enden laufen auf transparent, nicht auf Weiss: was
     durchscheint, ist die Hintergrundebene der Seite selbst. */
  background: linear-gradient(180deg,
    rgba(6, 14, 14, .62) 0%,
    rgba(6, 14, 14, .30) 7%,
    rgba(6, 14, 14, 0) 15%);
}

/* Der Auslauf blendet das Bild selbst aus, nicht eine Flaeche darueber. */
body.qptr.page-home .hero__bg {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 42%,
    rgba(0, 0, 0, .92) 56%,
    rgba(0, 0, 0, .74) 67%,
    rgba(0, 0, 0, .48) 77%,
    rgba(0, 0, 0, .24) 86%,
    rgba(0, 0, 0, .08) 93%,
    rgba(0, 0, 0, .02) 97%,
    transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0%, #000 42%,
    rgba(0, 0, 0, .92) 56%,
    rgba(0, 0, 0, .74) 67%,
    rgba(0, 0, 0, .48) 77%,
    rgba(0, 0, 0, .24) 86%,
    rgba(0, 0, 0, .08) 93%,
    rgba(0, 0, 0, .02) 97%,
    transparent 100%);
}

/* Die seitliche Vignette folgt derselben Maske, damit auch sie ohne Kante
   endet. */
body.qptr.page-home .hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.18) 91%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.18) 91%, transparent 100%);
}

@keyframes qptr-hero-in {
  from { transform: translateY(var(--parallax-y, 0)) scale(1.06); opacity: .6; }
  to   { transform: translateY(var(--parallax-y, 0)) scale(1);    opacity: 1; }
}

@keyframes qptr-hero-zoom {
  from { transform: translateY(var(--parallax-y, 0)) scale(1); }
  to   { transform: translateY(var(--parallax-y, 0)) scale(1.14); }
}

/* Keine Abdunklung von oben. Stattdessen eine weiche Vignette von links,
   genau dort, wo der Satz steht - rechts bleibt die Halle frei. */
body.qptr.page-home .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(6, 14, 14, .80) 0%,
    rgba(6, 14, 14, .62) 24%,
    rgba(6, 14, 14, .34) 44%,
    rgba(6, 14, 14, .12) 64%,
    rgba(6, 14, 14, 0) 82%);
}

body.qptr.page-home .hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Breiterer Satzspiegel, damit die Schauzeile einzeilig steht. */
body.qptr.page-home .hero__text { max-width: none; }
body.qptr.page-home .hero__title {
  max-width: none;
  white-space: normal;
  font-size: clamp(2rem, 6.1vw, 6.5rem);
  color: var(--weiss);
  text-shadow: 0 2px 30px rgba(6, 14, 14, .45);
}
/* Der Build setzt die beiden Zeilen ueber Klasse plus data-astro-cid auf
   display:block. Fuer die einzeilige Schauzeile braucht es hier dieselbe
   Gewichtung, ohne den Build-Hash in den Selektor zu schreiben. */
body.qptr.page-home .hero .hero__title span,
body.qptr.page-home .hero__title span { display: block !important; }

body.qptr.page-home .hero__sub {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  line-height: 1.9;
}
body.qptr.page-home .hero__sub-plain {
  display: block;
  margin-top: .6em;
  color: var(--weiss);
  text-shadow: 0 1px 2px rgba(6, 14, 14, .55), 0 2px 22px rgba(6, 14, 14, .75);
}

/* Mint-Auszeichnung als gesetzter Textblock, kein UI-Kasten. */
/* Mint- und Lila-Auszeichnungen wischen beim Erscheinen von links ein.
   Als background-size animiert, damit sie ueber Zeilenumbrueche laufen. */
body.qptr .mint-block,
body.qptr .lila-block {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .9s var(--ease-in-out), color .28s linear;
  transition-delay: calc(var(--reveal-delay, 0ms) + .2s), calc(var(--reveal-delay, 0ms) + .42s);
}
body.qptr .mint-block {
  background-image: linear-gradient(var(--mint), var(--mint));
  color: var(--schwarz);
  padding: .26em .55em;
  margin-inline: -.55em;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
}

/* Lila-Auszeichnung fuer einzelne Saetze. */
body.qptr .lila-block {
  background-image: linear-gradient(var(--lila), var(--lila));
  color: var(--weiss);
  padding: .04em .26em .12em;
  margin-inline: -.26em;
}

/* Sichtbar wird die Flaeche, sobald der umgebende Block erscheint. */
body.qptr [data-reveal].is-revealed .mint-block,
body.qptr [data-reveal].is-revealed .lila-block,
body.qptr .is-revealed .mint-block,
body.qptr .is-revealed .lila-block,
html:not(.js) body.qptr .mint-block,
html:not(.js) body.qptr .lila-block { background-size: 100% 100%; }

@media (max-width: 61.9375rem) {
  body.qptr.page-home .hero__title { white-space: normal; }
  body.qptr.page-home .hero .hero__title span,
  body.qptr.page-home .hero__title span { display: block !important; }
}

@media (max-width: 47.9375rem) {
  body.qptr.page-home .hero {
    padding-block: calc(var(--header-h) + 2rem) clamp(4rem, 14vh, 7rem);
    --fs-display: clamp(2.25rem, 9vw, 3rem);
  }
  body.qptr.page-home .hero__title { font-size: var(--fs-display); }
  body.qptr.page-home .hero__sub { line-height: 1.8; }
  body.qptr .mint-block { padding: .22em .45em; margin-inline: -.45em; }
}


/* -- 5  Ankuendigungsleiste, Header, Footer ------------------------------ */

/* Ankuendigungsleiste liegt als Glasband auf dem Headerbild: nur ein
   Hauch Lila, der Rest ist Durchsicht. Die Bewegung laeuft dauerhaft -
   ein wandernder Lichtstreifen und ein sehr langsam atmender Farbton. */
body.qptr .announce {
  position: relative;
  z-index: 90;
  isolation: isolate;
  background-color: rgba(89, 109, 255, .20);
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  color: var(--weiss);
  --fg: var(--weiss);
  --fg-quiet: #ffffffd1;
  overflow: hidden;
  animation: qptr-announce-breathe 14s ease-in-out infinite;
}

/* wandernder Lichtstreifen */
body.qptr .announce::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(89, 109, 255, 0) 0%,
    rgba(140, 155, 255, .45) 42%,
    rgba(89, 109, 255, 0) 78%);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  animation: qptr-announce-drift 18s linear infinite;
}

@keyframes qptr-announce-drift {
  from { background-position: -60% 0; }
  to   { background-position: 190% 0; }
}

@keyframes qptr-announce-breathe {
  0%, 100% { background-color: rgba(89, 109, 255, .20); }
  50%      { background-color: rgba(89, 109, 255, .34); }
}

body.qptr .announce__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  padding-block: .55rem;
  padding-inline: var(--gutter);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

/* Laufband: zwei identische Spuren wandern nahtlos durch. Die Kopien sind
   fuer Screenreader ausgeblendet, vorgelesen wird der Text nur einmal. */
body.qptr .announce__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}

body.qptr .announce__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: qptr-marquee 38s linear infinite;
}

body.qptr .announce__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
  font-size: 1rem;
  line-height: 1.35;
}

body.qptr .announce__sep {
  display: inline-block;
  padding-inline: 1.6rem;
  opacity: .5;
}

@keyframes qptr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

body.qptr .announce__link:hover .announce__track,
body.qptr .announce__link:focus-visible .announce__track { animation-play-state: paused; }

body.qptr .announce__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  white-space: nowrap;
}

body.qptr .announce__arrow {
  width: 1.15em;
  height: 1.15em;
  transition: transform var(--dur-base) var(--ease-out);
}

body.qptr .announce__link:hover .announce__arrow,
body.qptr .announce__link:focus-visible .announce__arrow { transform: translateX(.4em); }

@media (max-width: 30rem) {
  body.qptr .announce__cta { font-size: 0; gap: 0; }
  body.qptr .announce__cta .announce__arrow { font-size: var(--fs-meta); }
}

/* Unterseiten haben kein Kopfbild hinter der Navigation. Dort stehen
   Leiste und Menue daher von Anfang an auf ihrer eigenen Flaeche. */
body.qptr:not(.page-home) .announce {
  background-color: var(--lila);
  animation: qptr-announce-drift-solid 18s linear infinite;
}
@keyframes qptr-announce-drift-solid {
  from { background-position: -60% 0; }
  to   { background-position: 190% 0; }
}

body.qptr:not(.page-home) .site-header {
  background: rgba(11, 23, 23, .96);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Der Aufmacher der Unterseiten laeuft auf dem hellen Grund mit dunkler
   Schrift; er behaelt sein eigenes Layout aus dem Build. */
body.qptr:not(.page-home) .hero {
  background: transparent;
  color: var(--schwarz);
}

/* Der Kopfbereich steht auf Dunkel und behaelt daher das dunkle Token-Set. */
/* Die Menuepunkte ruecken nach rechts, damit die Wortmarke frei steht. */
body.qptr .nav { margin-left: clamp(1.5rem, 6vw, 6rem); }
body.qptr .site-header__logo { flex: none; }

/* Der Header liegt auf dem hellen Bild und braucht einen eigenen, kurzen
   Rueckhalt. Er endet mit der Headerhoehe und ist kein Seitenverlauf. */

body.qptr .site-header {
  position: sticky;
  isolation: isolate;
  --bg: var(--schwarz);
  --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);
  border-bottom-color: transparent;
  transition:
    background-color .5s var(--ease-in-out),
    color .5s var(--ease-in-out);
}

/* Gescrollt wird die gesamte Navigation zu einer vollen Mint-Flaeche.
   Alles darin dreht auf Schwarz, damit der Kontrast traegt. */
/* Gescrollt legt sich die Navigation auf Schwarz, damit Wortmarke und
   Menuepunkte auf jedem Bildinhalt lesbar bleiben. */
body.qptr .site-header.is-solid,
body.qptr .site-header:has([data-nav-toggle][aria-expanded="true"]),
body.qptr .site-header:has([data-nav-item][data-open]) {
  background: rgba(11, 23, 23, .94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--weiss);
}

body.qptr .site-header .logo__word path,
body.qptr .site-header .burger i { transition: fill .5s var(--ease-in-out), background-color .5s var(--ease-in-out); }
body.qptr .site-header.is-solid .logo__word path { fill: var(--weiss); }
body.qptr .site-header.is-solid .burger i { background: var(--weiss); }
body.qptr .site-header .burger i { background: var(--weiss); }

body.qptr .nav__link,
body.qptr .site-header__contact { color: #ffffffb8; transition: color var(--dur-fast) var(--ease-out); }
body.qptr .site-header.is-solid .nav__link { color: #ffffffb8; }
body.qptr .nav__link:hover,
body.qptr .nav__link:focus-visible,
body.qptr .nav__item:hover > .nav__link,
body.qptr .nav__item:focus-within > .nav__link { color: var(--mint); }
body.qptr .site-header.is-solid .nav__link:hover,
body.qptr .site-header.is-solid .nav__link:focus-visible,
body.qptr .site-header.is-solid .nav__item:hover > .nav__link { color: var(--weiss); }

/* Auf Mint braucht der Button die Gegenfarbe, sonst verschwindet er. */
body.qptr .site-header__cta {
  transition: background-color .5s var(--ease-in-out), color .5s var(--ease-in-out);
}
body.qptr .site-header.is-solid .site-header__cta {
  background: var(--mint);
  color: var(--schwarz);
}
body.qptr .site-header__cta:hover,
body.qptr .site-header__cta:focus-visible { background: var(--weiss); color: var(--schwarz); }
body.qptr .site-header.is-solid .site-header__cta:hover,
body.qptr .site-header.is-solid .site-header__cta:focus-visible { background: var(--weiss); color: var(--schwarz); }

body.qptr .site-header.is-solid .lang__item { color: #ffffffa8; }
body.qptr .site-header.is-solid .lang__item.is-current,
body.qptr .site-header.is-solid .lang__item:hover { color: var(--weiss); }

/* Aufklappmenues folgen dem jeweiligen Zustand. */
body.qptr .site-header.is-solid .mega,
body.qptr .site-header.is-solid .mobile { background: rgba(11, 23, 23, .97); }
body.qptr .site-header.is-solid .mega__label,
body.qptr .site-header.is-solid .mobile__link,
body.qptr .site-header.is-solid .mobile__summary { color: var(--weiss); }
body.qptr .site-header.is-solid .mega__hint,
body.qptr .site-header.is-solid .mobile__sublink { color: #ffffffb3; }


body.qptr .mobile__link,
body.qptr .mobile__summary { color: var(--weiss); }
body.qptr .mobile__sublink { color: #ffffffb3; }
body.qptr .mobile__sublink:hover,
body.qptr .mobile__sublink:focus-visible,
body.qptr .mobile__sublink.is-feature { color: var(--mint); }

/* Kein Abschlussstrich vor der Fusszeile. Der Uebergang entsteht ueber
   eine sehr weiche Aufhellung, die in den Seitenhintergrund laeuft. */
body.qptr .site-footer {
  position: relative;
  color: var(--schwarz);
  border: 0;
  padding-top: clamp(4rem, 9vw, 8rem);
}
/* Der Verlauf lief vorher bei .08 einfach aus und erzeugte damit genau die
   Kante, die er verhindern sollte. Jetzt beginnt und endet er bei null. */
body.qptr .site-footer::before {
  content: "";
  position: absolute;
  inset: -6rem 0 auto 0;
  height: clamp(14rem, 26vw, 24rem);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(89, 109, 255, 0) 0%,
    rgba(89, 109, 255, .035) 26%,
    rgba(89, 109, 255, .055) 50%,
    rgba(89, 109, 255, .035) 74%,
    rgba(89, 109, 255, 0) 100%);
}
body.qptr .site-footer__bottom,
body.qptr .site-footer__top,
body.qptr .site-footer__news { border: 0 !important; }
body.qptr .site-footer .logo__word path { fill: var(--schwarz); }
body.qptr .site-footer__claim,
body.qptr .site-footer__title { color: var(--schwarz); }
body.qptr .site-footer__link,
body.qptr .site-footer__address { color: #0b1717b3; }
body.qptr .site-footer__link:hover,
body.qptr .site-footer__link:focus-visible { color: var(--schwarz); }

body.qptr .news__input {
  background: var(--surface-on-light);
  color: var(--schwarz);
}
body.qptr .news__input::placeholder { color: #0b171796; }
body.qptr .news__submit:hover,
body.qptr .news__submit:focus-visible { background: var(--schwarz); color: var(--mint); }


/* -- 6  Komponenten mit fest gesetzten dunklen Farben ---------------------- */

/* .notblock lag als schwarzer Block auf weissem Grund. Auf der jetzt
   durchgehend hellen Seite als abgesetzte Flaeche mit Mint-Kante. */
body.qptr .notblock {
  background: rgba(11, 23, 23, .035);
  color: var(--schwarz);
  --fg: var(--schwarz);
  --accent: var(--schwarz);
  --line: var(--line-on-light);
}
body.qptr .notblock__title { color: var(--schwarz); }
body.qptr .notblock__list { color: #0b1717c4; }
body.qptr .notblock__foot {
  margin: var(--space-5) 0 0;
  color: #0b1717c4;
}

/* Platzhalter-Plates: heller Raster statt schwarzer Flaeche. */
body.qptr .plate { background-color: rgba(11, 23, 23, .04); }
body.qptr .plate__fill {
  background:
    repeating-linear-gradient(90deg, rgba(11, 23, 23, .07) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(0deg,  rgba(11, 23, 23, .07) 0 1px, transparent 1px 4.5rem),
    rgba(11, 23, 23, .04);
}
body.qptr .plate__overlay { opacity: .34; }

/* Zweite Zeile der Stufen ("You receive: ...") tritt zurueck. */
body.qptr .stage__text--deliver {
  margin-top: var(--space-3);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: #0b17179e;
  max-width: 60ch;
}


/* -- 6b  Keine Rahmen ----------------------------------------------------
   Der Build trennt fast jede Liste, jede Rasterzelle und jede Karte mit
   einer 1px-Linie. Auf der offenen weissen Flaeche liest sich das als
   Formular. Saemtliche Rahmen entfallen - auch im Hover-Zustand. Getrennt
   wird ueber Abstand, Groesse, Bild und Satz.
   !important ist noetig, weil die Regeln im Build mit Klasse plus
   data-astro-cid (teils doppelt und in Media Queries) gesetzt sind; ohne
   das muesste der Build-Hash in den Selektor, was beim naechsten Build
   bricht. */

body.qptr .strip,
body.qptr .metrics,
body.qptr .metric,
body.qptr .stages,
body.qptr .stage,
body.qptr .verticals,
body.qptr .vertical,
body.qptr .reasons,
body.qptr .reason,
body.qptr .faq,
body.qptr .faq__item,
body.qptr .quote__meta,
body.qptr .refcard,
body.qptr .refcard:hover,
body.qptr .refcard:focus-within,
body.qptr .refcard__media,
body.qptr .asset,
body.qptr .asset:hover,
body.qptr .asset:focus-within,
body.qptr .notblock,
body.qptr .cta--secondary,
body.qptr .cta--secondary:hover,
body.qptr .cta--secondary:focus-visible,
body.qptr .cta--quiet,
body.qptr .cta--quiet:hover,
body.qptr .cta--quiet:focus-visible,
body.qptr .news__input,
body.qptr .site-header__toggle,
body.qptr .stage__link,
body.qptr .stage__link:hover,
body.qptr .site-footer,
body.qptr .site-footer__top,
body.qptr .site-footer__news,
body.qptr .site-footer__bottom,
body.qptr .site-header,
body.qptr .site-header.is-solid,
body.qptr .mega,
body.qptr .mobile,
body.qptr .section.rule,
body.qptr .mega__link,
body.qptr .mobile__item {
  border: 0 !important;
  outline: 0;
}

/* Ohne Trennlinien brauchen die Zellen Luft statt Kanten. */
body.qptr .metric   { padding-block: var(--space-4) var(--space-5); }
body.qptr .reason   { padding-block: var(--space-4) var(--space-6); }
body.qptr .quote__meta { padding-top: var(--space-5); }
body.qptr .faq__item   { padding-block: .25rem; }
body.qptr .faq__summary { padding-block: var(--space-5); }

/* Karten sind keine Kaesten mehr: Bild fuehrt, Text steht darunter. */
body.qptr .refcard,
body.qptr .asset { background: transparent; }
body.qptr .refcard__body { padding: var(--space-5) 0 0; }
body.qptr .asset { padding: 0; }
body.qptr .notblock {
  background: transparent;
  padding: var(--space-6) 0 0;
}
body.qptr .notblock__title { color: var(--schwarz); }

/* Zweitrangiger Button ohne Rahmen: Mint-Unterstreichung statt Kontur. */
body.qptr .cta--secondary { padding-inline: 0; }

/* Traegt ein Button bereits eine orange Unterstreichung, entfaellt die
   mintfarbene, damit sich nicht zwei Linien ueberlagern. */
body.qptr .cta--secondary:has(.ul-orange),
body.qptr .cta--secondary:has(.ul-orange):hover,
body.qptr .cta--secondary:has(.ul-orange):focus-visible {
  background-image: none;
}

body.qptr .cta--quiet { padding-bottom: .18em; }

body.qptr .news__input { background: rgba(11, 23, 23, .05); }
body.qptr .stage__link { padding-inline: 0; }


/* -- 6c  Bilder ----------------------------------------------------------- */

/* .plate wird im Build ueber Klasse plus data-astro-cid gestylt. Die neu
   eingefuegten figure-Elemente tragen die Klasse allein, deshalb hier die
   Grundregeln noch einmal klassenbasiert. */
body.qptr .plate {
  position: relative;
  margin: 0;
  aspect-ratio: var(--plate-ratio, 3 / 2);
  overflow: hidden;
  isolation: isolate;
  background-color: rgba(11, 23, 23, .04);
}

body.qptr .plate__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease-out);
}

body.qptr .plate__tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(89, 109, 255, .10), rgba(11, 23, 23, .06));
  transition: background var(--dur-base) var(--ease-out);
}

body.qptr .plate__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: .5rem .75rem;
  background: var(--weiss);
  color: #0b1717b3;
}

body.qptr .spatial__plate { max-width: none; }

/* Bildpaar in der Problem-Sektion */
body.qptr .pair {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 48rem) {
  body.qptr .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Redaktionelles Vollbild zwischen den Textstrecken */
body.qptr .band {
  margin: var(--space-8) 0 var(--space-7);
  aspect-ratio: var(--plate-ratio, 16 / 7);
  overflow: hidden;
  position: relative;
}
body.qptr .band img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* -- 6e  Markenstatements, Logos, Zitat ----------------------------------
   Typografie traegt, Farbe akzentuiert. Orange kommt ausschliesslich als
   duenne Unterstreichung vor - als redaktionelle Anmerkung im Mint-Umfeld,
   nie als Flaeche. */

/* Duenne Orange-Unterstreichung. Als Hintergrundbild gesetzt, damit sie
   ueber Zeilenumbrueche laeuft und kein Rahmen ist. */
/* Handgezogener Pinselstrich statt gerader Linie. Die Form sitzt als
   SVG im Hintergrund, laeuft leicht schief und ist ungleichmaessig dick;
   preserveAspectRatio="none" zieht sie auf die jeweilige Wortbreite. */
body.qptr .ul-orange {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2.4,9.1%20C22,6.2%2041,10.4%2063,7.9%20C86,5.2%20108,10.6%20131,8.2%20C152,6.0%20172,10.2%20197.4,6.9%20L197.8,10.4%20C171,13.9%20152,9.6%20131,11.8%20C108,14.1%2086,8.8%2063,11.5%20C41,14.0%2022,9.9%202.6,12.7%20Z' fill='%23ff5e1f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% .42em;
  padding-bottom: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--ease-in-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + .35s);
}
body.qptr [data-reveal].is-revealed .ul-orange,
body.qptr .is-revealed .ul-orange { background-size: 100% .42em; }

/* Derselbe Strich in Mint, fuer die zweitrangigen Schaltflaechen. */
body.qptr .cta--secondary:not(:has(.ul-orange)),
body.qptr .cta--quiet {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M2.4,9.1%20C22,6.2%2041,10.4%2063,7.9%20C86,5.2%20108,10.6%20131,8.2%20C152,6.0%20172,10.2%20197.4,6.9%20L197.8,10.4%20C171,13.9%20152,9.6%20131,11.8%20C108,14.1%2086,8.8%2063,11.5%20C41,14.0%2022,9.9%202.6,12.7%20Z' fill='%2344feb2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .34em;
  transition: background-size var(--dur-base) var(--ease-out);
}
body.qptr .cta--secondary:not(:has(.ul-orange)):hover,
body.qptr .cta--secondary:not(:has(.ul-orange)):focus-visible,
body.qptr .cta--quiet:hover,
body.qptr .cta--quiet:focus-visible { background-size: 100% .62em; }

/* Vollflaechiges Statement zwischen den Sektionen */
body.qptr .statement-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 16vh, 11rem);
  color: var(--weiss);
  --fg: var(--weiss);
}
body.qptr .statement-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.qptr .statement-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(11, 23, 23, .86) 0%, rgba(11, 23, 23, .60) 44%, rgba(11, 23, 23, .24) 100%);
}
body.qptr .statement-band__inner { position: relative; }
body.qptr .statement-band__line {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  line-height: 1.03;
  letter-spacing: var(--tracking-display);
}
body.qptr .statement-band__line--2 { color: var(--mint); }

/* Referenzleiste mit echten Kundenlogos */
body.qptr .trusted__break { display: block; }
/* Der Zaehler laeuft in Ziffern gleicher Breite, damit die Zeile beim
   Hochzaehlen nicht springt. */
body.qptr .qcount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
body.qptr .trusted__line {
  margin: 0 0 var(--space-6);
  max-width: 44ch;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
}
/* Kundenlogos laufen als endloses Band durch. Zwei identische Saetze
   wandern um exakt eine Satzbreite; am Umschlagpunkt steht das Band
   deckungsgleich, dadurch entsteht kein Sprung. Volle Deckkraft. */
body.qptr .logos { margin: 0; }

body.qptr .logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}

body.qptr .logos__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: qptr-logos 64s linear infinite;
}

body.qptr .logos__set {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  margin: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) 0 0;
  list-style: none;
  flex: none;
}

body.qptr .logos__item { display: flex; align-items: center; flex: none; }

body.qptr .logos__item img {
  display: block;
  width: auto;
  height: var(--logo-h, 2rem);
  opacity: 1;
  transition: transform var(--dur-base) var(--ease-out);
}
body.qptr .logos__item:hover img { transform: translateY(-3px); }

@keyframes qptr-logos {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Beim Zeigen haelt das Band an, damit ein Logo gelesen werden kann. */
body.qptr .logos:hover .logos__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  body.qptr .logos__track { animation: none; }
  body.qptr .logos__viewport { overflow-x: auto; }
}

/* optische statt mathematischer Groessenangleichung */
body.qptr .logos__item--ikea      { --logo-h: 2.1rem; }
body.qptr .logos__item--voest     { --logo-h: 1.5rem; }
body.qptr .logos__item--tgw       { --logo-h: 2.2rem; }
body.qptr .logos__item--energie   { --logo-h: 1.7rem; }
body.qptr .logos__item--parlament { --logo-h: 3.4rem; }
body.qptr .logos__item--drees     { --logo-h: 2rem; }
body.qptr .logos__item--arcelor   { --logo-h: 2.6rem; }
body.qptr .logos__item--habau     { --logo-h: 2.4rem; }
body.qptr .logos__item--dpr       { --logo-h: 2.9rem; }
body.qptr .logos__item--are       { --logo-h: 2.6rem; }
body.qptr .logos__item--asfinag   { --logo-h: 1.15rem; }
body.qptr .logos__item--heinle    { --logo-h: 2.2rem; }
body.qptr .logos__item--klampfer  { --logo-h: 1.9rem; }
body.qptr .logos__item--big       { --logo-h: 1.5rem; }
body.qptr .logos__item--bhoe      { --logo-h: 1.9rem; }

@media (max-width: 47.9375rem) {
  body.qptr .logos__set { gap: 2rem; }
  body.qptr .logos__item img { height: calc(var(--logo-h, 2rem) * .82); }
  body.qptr .logos__track { animation-duration: 46s; }
}

/* Kundenlogo in der Kennzahlen-Sektion */
body.qptr .credit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
}
body.qptr .credit__logo { display: block; width: auto; height: 2.1rem; }
body.qptr .credit__text { color: #0b1717a8; }

/* Zitat ueber die volle Breite */
body.qptr .quote--wide {
  display: block;
  margin: 0;
  padding-block: clamp(2rem, 6vh, 5rem);
}
body.qptr .quote--wide .quote__text {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(2rem, 5.4vw, 4.75rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
body.qptr .quote--wide .quote__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding: 0;
}
body.qptr .quote--wide .quote__author { font-size: var(--fs-h3); }
body.qptr .quote--wide .quote__role { color: #0b1717a8; }

/* Abschluss in der Setzung der Markenwelt */
body.qptr .closing__eyebrow { margin-bottom: var(--space-6); }
body.qptr .closing__title--big {
  display: block;
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
body.qptr .closing__body { margin-top: var(--space-6); }


/* -- 6d  Zeitstrahl, Branchenkacheln, Icons, Wissen ----------------------- */

/* Fuenf Phasen nebeneinander. Die Linie liegt hinter den Punkten und
   waechst beim Scrollen mit; jede Phase kommt einzeln nach. */
body.qptr .phases-wrap { position: relative; margin-top: var(--space-8); }

body.qptr .phases {
  --dot: .9rem;
  position: relative;
  display: grid;
  gap: var(--space-6) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 60rem) {
  body.qptr .phases { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* durchgehende Spur auf Hoehe der Punkte */
  body.qptr .phases::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--dot) / 2 - 1px);
    height: 2px;
    background: rgba(89, 109, 255, .18);
  }
  body.qptr .phases::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--dot) / 2 - 1px);
    height: 2px;
    width: var(--phase-progress, 0%);
    background: linear-gradient(90deg, var(--lila), #8b9bff);
    transition: width 1.4s var(--ease-out);
  }
}
@media (min-width: 40rem) and (max-width: 59.9375rem) {
  body.qptr .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.qptr .phase {
  position: relative;
  padding-top: calc(var(--dot) + var(--space-4));
  transform-origin: left top;
  /* Grundsatz: der Inhalt ist immer da. Die Scrollsteuerung modelliert nur
     noch, welche Phase vorn steht - sie blendet nichts aus. */
  opacity: 1;
  transition:
    transform .65s var(--ease-out),
    opacity .5s var(--ease-out),
    filter .5s var(--ease-out);
}

@media (min-width: 60rem) {
  /* Nur die Phase im Fokus steht vorn; die uebrigen treten zurueck. */
  body.qptr .phases:has(.is-focus) .phase:not(:hover) {
    opacity: .42;
    filter: saturate(.55);
    transform: scale(.97);
  }
  /* muss die Abdunklungsregel darueber ueberwiegen */
  body.qptr .phases:has(.is-focus) .phase.is-focus {
    opacity: 1;
    filter: none;
    transform: scale(1.09);
    z-index: 2;
  }
}
body.qptr .phase.is-focus .phase__num { color: var(--lila); }

/* Hover auf einer Phase: sie tritt hervor, der Punkt bekommt einen Hof,
   die Aufzaehlung faerbt sich lila. */
body.qptr .phase__num,
body.qptr .phase__title,
body.qptr .phase__text { transition: color var(--dur-base) var(--ease-out); }
body.qptr .phase:hover { opacity: 1; filter: none; }
body.qptr .phase:hover .phase__num { color: var(--lila); }
body.qptr .phase:hover .phase__text { color: var(--schwarz); }
body.qptr .phase:hover .phase__deliver li::before { background: var(--lila); }
body.qptr .phase:hover .phase__dot {
  background: var(--lila);
  box-shadow: 0 0 0 .45rem rgba(89, 109, 255, .2);
}

/* Die Phasen haengen nicht mehr am Reveal-System, also stehen ihre
   Pinselstriche unabhaengig davon. */
body.qptr .phase .ul-orange { background-size: 100% .42em; }
body.qptr .phase.is-focus .phase__dot {
  background: var(--lila);
  box-shadow: 0 0 0 .5rem rgba(89, 109, 255, .18);
  transform: scale(1.2);
}

body.qptr .phase__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: rgba(89, 109, 255, .22);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
body.qptr .phase.is-revealed .phase__dot {
  background: var(--lila);
  box-shadow: 0 0 0 .3rem rgba(89, 109, 255, .16);
}
body.qptr .phase:hover .phase__dot { transform: scale(1.25); }

body.qptr .phase__num {
  margin: 0 0 var(--space-2);
  color: var(--lila);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
}
body.qptr .phase__title { margin: 0 0 var(--space-3); }
body.qptr .phase__text { margin: 0; color: var(--fg-quiet); font-size: var(--fs-small); }
/* Deliverables stehen als Liste, damit sie ueberflogen werden koennen.
   Der Mint-Punkt ersetzt den Aufzaehlungspunkt des Browsers. */
body.qptr .phase__deliver-label {
  margin: var(--space-4) 0 var(--space-2);
  color: #0b1717a8;
}
body.qptr .phase__deliver {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .38rem;
}
body.qptr .phase__deliver li {
  position: relative;
  padding-left: .95rem;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: #0b17179e;
}
body.qptr .phase__deliver li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--mint);
}

/* Branchen: Text steht auf dem Bild. */
body.qptr .tiles {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  body.qptr .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.qptr .tile__link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  isolation: isolate;
  color: var(--weiss);
  text-decoration: none;
}
body.qptr .tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out), filter var(--dur-base) var(--ease-out);
}
body.qptr .tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 23, 23, .18) 0%,
    rgba(11, 23, 23, .48) 46%,
    rgba(11, 23, 23, .84) 100%);
  transition: background var(--dur-base) var(--ease-out);
}
body.qptr .tile__body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}
body.qptr .tile__title { display: block; }
body.qptr .tile__text {
  display: block;
  max-width: 46ch;
  font-size: var(--fs-small);
  color: #ffffffd1;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease-out), opacity .4s var(--ease-out);
}
body.qptr .tile__more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--mint);
}
body.qptr .tile__more svg {
  width: 1.1em; height: 1.1em;
  transition: transform var(--dur-base) var(--ease-out);
}
body.qptr .tile__link:hover .tile__img,
body.qptr .tile__link:focus-visible .tile__img { transform: scale(1.06); }
body.qptr .tile__link:hover .tile__scrim,
body.qptr .tile__link:focus-visible .tile__scrim {
  background: linear-gradient(180deg,
    rgba(89, 109, 255, .30) 0%,
    rgba(11, 23, 23, .58) 46%,
    rgba(11, 23, 23, .90) 100%);
}
body.qptr .tile__link:hover .tile__text,
body.qptr .tile__link:focus-visible .tile__text { max-height: 12rem; opacity: 1; }
body.qptr .tile__link:hover .tile__more svg,
body.qptr .tile__link:focus-visible .tile__more svg { transform: translateX(.35em); }

/* Auf Touch bleibt der Text sichtbar, dort gibt es kein Hover. */
@media (hover: none) {
  body.qptr .tile__text { max-height: 12rem; opacity: 1; }
}

/* Icons in "Why qapture" */
body.qptr .reason__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-4);
  color: var(--lila);
}
body.qptr .reason__icon svg { width: 100%; height: 100%; display: block; }

/* Wissen: durchgehende Mint-Flaeche als eigener Auftritt */
body.qptr #wissen {
  background: var(--mint);
  --fg: var(--schwarz);
  --fg-quiet: #0b1717ad;
  --accent: var(--schwarz);
  --btn-bg: var(--schwarz);
  --btn-fg: var(--mint);
  color: var(--schwarz);
  padding-block: clamp(4.5rem, 10vw, 9rem);
  margin-block: clamp(3rem, 7vw, 6rem);
}
/* Die drei Papiere sollen sofort als drei Einheiten lesbar sein. Hier
   sind Rahmen ausdruecklich gewuenscht - abweichend von der sonst
   rahmenlosen Seite. */
body.qptr #wissen .grid-3 {
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  body.qptr #wissen .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Die drei Papiere stehen ohne Rahmen nebeneinander. Erst beim Hover
   zieht sich einer um die jeweilige Box. */
/* Die drei Papiere stehen ohne jeden Rahmen nebeneinander. Erst beim
   Zeigen legt sich eine helle Flaeche unter das jeweilige Papier. */
body.qptr #wissen .asset {
  border: 0 !important;
  background: transparent;
  padding: var(--space-6) var(--space-5);
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
body.qptr #wissen .asset:hover,
body.qptr #wissen .asset:focus-within {
  background: rgba(255, 255, 255, .62);
  transform: none;
}
/* Etwas groesser gesetzt: das traegt den Abschnitt und bringt die weisse
   Schrift auf der Lila-Flaeche ueber die Kontrastschwelle fuer Grosstext. */
body.qptr #wissen .asset__title { font-size: 1.5rem; line-height: 1.28; }
body.qptr #wissen .asset__meta { color: #0b1717b3; }
body.qptr #wissen .asset__cta { color: var(--schwarz); }
body.qptr #wissen .mint-swipe { background-image: linear-gradient(var(--weiss), var(--weiss)); }

/* Referenzbilder in Lila/Schwarz/Weiss, passend zum Kopfbild */
body.qptr .refcard .plate__img {
  filter: grayscale(1) contrast(1.08) brightness(1.03);
}
body.qptr .refcard .plate__tint {
  background: var(--lila);
  mix-blend-mode: color;
  opacity: .62;
  transition: opacity var(--dur-base) var(--ease-out);
}
body.qptr .refcard:hover .plate__tint,
body.qptr .refcard:focus-within .plate__tint { opacity: .34; }

/* "Poor thing." liegt eng um die Worte, nicht um die Zeile */
body.qptr .closing__l2 {
  /* Der Build setzt die Zeilen ueber Klasse plus data-astro-cid auf
     display:block. Damit die Flaeche nur die zwei Worte umfasst, braucht
     es hier dieselbe Gewichtung. */
  display: inline !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .04em .26em .12em;
  background: var(--lila);
  color: var(--weiss);
}
body.qptr .closing__l1 {
  display: block !important;
  max-width: 20ch;
  margin-bottom: .2em;
}


/* -- 7  Scroll-Motion -----------------------------------------------------
   Das vorhandene [data-reveal]/IntersectionObserver-System bleibt
   unveraendert, bekommt hier nur laengere Dauer, groesseren Weg und einen
   leichten Weichzeichner. */

html.js body.qptr [data-reveal] {
  opacity: 0;
  transform: translateY(2.5rem) scale(.988);
  filter: blur(7px);
  transition:
    opacity 1.15s var(--ease-out),
    transform 1.15s var(--ease-out),
    filter .95s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

html.js body.qptr [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

html.js body.qptr .hero [data-reveal] {
  transform: translateY(3.25rem) scale(.985);
  transition-duration: 1.25s, 1.25s, 1s;
}

html.js body.qptr .hero__title.is-revealed span,
html.js body.qptr .closing__title.is-revealed span {
  animation: qptr-line-in 1.35s var(--ease-out) both;
}
html.js body.qptr .hero__title.is-revealed span:nth-child(2),
html.js body.qptr .closing__title.is-revealed span:nth-child(2) {
  animation-delay: .16s;
}

@keyframes qptr-line-in {
  from { opacity: 0; transform: translateY(.55em); }
  to   { opacity: 1; transform: none; }
}

@keyframes qptr-float {
  from { translate: 0 -.6rem; }
  to   { translate: 0 .6rem; }
}


/* -- 8  Mint-Swipe --------------------------------------------------------
   Auf hellem Grund bleibt die Schrift durchgehend dunkel; die Mint-Flaeche
   wischt hinter dem Text durch. Lesbarkeit ist in jeder Phase gegeben. */

body.qptr .mint-swipe {
  background-image: linear-gradient(var(--mint), var(--mint));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .04em .26em;
  margin-inline: -.06em;
  color: var(--schwarz);
  transition: background-size .95s var(--ease-in-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + .22s);
}

body.qptr [data-reveal].is-revealed .mint-swipe,
body.qptr .mint-swipe.is-revealed {
  background-size: 100% 100%;
}

html.js body.qptr [data-reveal-bar] .bar__fill {
  transition: transform .95s var(--ease-in-out);
  transition-delay: calc(var(--reveal-delay, 0s) + .22s);
}
html.js body.qptr [data-reveal-bar] .bar__text {
  transition-delay: calc(var(--reveal-delay, 0s) + .62s);
}

/* Mission-Block ist mint hinterlegt: gleicher Wisch beim Erscheinen. */
body.qptr .mission {
  position: relative;
  isolation: isolate;
  background: transparent;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
body.qptr .mission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s var(--ease-in-out);
  transition-delay: .2s;
}
body.qptr .mission.is-revealed::before { transform: scaleX(1); }
body.qptr .mission:hover,
body.qptr .mission:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(11, 23, 23, .45);
}


/* -- 9  Hover -------------------------------------------------------------
   Kein Hover-Zustand fuehrt einen Rahmen ein. Gearbeitet wird mit Mint als
   Flaeche, mit Bildbewegung, Anhebung und mitlaufenden Pfeilen. */

body.qptr .cta {
  position: relative;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
body.qptr .cta:hover,
body.qptr .cta:focus-visible { transform: translateY(-2px); }

/* Primaerbutton: Mint wischt von links ueber die schwarze Flaeche. */
body.qptr .cta--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--lila) 0%, #7b8bff 55%, var(--lila) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-in-out);
}
body.qptr .cta--primary:hover,
body.qptr .cta--primary:focus-visible { color: var(--weiss); }
body.qptr .cta--primary:hover::before,
body.qptr .cta--primary:focus-visible::before { transform: scaleX(1); }

body.qptr .cta__arrow { transition: transform var(--dur-base) var(--ease-out); }
body.qptr .cta:hover .cta__arrow,
body.qptr .cta:focus-visible .cta__arrow { transform: translateX(.35em); }

/* Referenz- und Wissenskarten: das Bild fuehrt, nichts umrandet. */
body.qptr .refcard,
body.qptr .asset {
  transition: transform var(--dur-base) var(--ease-out);
}
body.qptr .refcard:hover,
body.qptr .refcard:focus-within,
body.qptr .asset:hover,
body.qptr .asset:focus-within { transform: translateY(-4px); }

body.qptr .refcard:hover .plate__img,
body.qptr .refcard:focus-within .plate__img,
body.qptr .spatial__figure:hover .plate__img { transform: scale(1.05); }
body.qptr .refcard:hover .plate__tint,
body.qptr .refcard:focus-within .plate__tint,
body.qptr .spatial__figure:hover .plate__tint {
  background: linear-gradient(160deg, rgba(68, 254, 178, .24), rgba(11, 23, 23, .04));
}

body.qptr .refcard__client,
body.qptr .asset__title {
  transition: color var(--dur-fast) var(--ease-out);
}

/* Branchenzeilen: Mint zieht von links ein. */
body.qptr .vertical__link { position: relative; }
body.qptr .vertical__link::before {
  content: "";
  position: absolute;
  inset: 0 0 0 calc(var(--space-5) * -1);
  background: linear-gradient(90deg, rgba(68, 254, 178, .26) 0%, rgba(68, 254, 178, .05) 45%, transparent 78%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
body.qptr .vertical__link:hover::before,
body.qptr .vertical__link:focus-visible::before { opacity: 1; }

body.qptr .stage { transition: background var(--dur-base) var(--ease-out); }
body.qptr .stage:hover {
  background: linear-gradient(90deg, rgba(68, 254, 178, .15), rgba(68, 254, 178, 0) 62%);
}

body.qptr .faq__summary { transition: background var(--dur-fast) var(--ease-out); }
body.qptr .faq__summary:hover {
  background: linear-gradient(90deg, rgba(68, 254, 178, .13), rgba(68, 254, 178, 0) 55%);
}

/* Kopf- und Fussnavigation */
body.qptr .site-footer__link { transition: color var(--dur-fast) var(--ease-out); }
/* Zweite Menueebene: beim Hover faerbt sich ausschliesslich die Schrift.
   Keine Flaeche, kein Rahmen. */
body.qptr .mega__link,
body.qptr .mega__link:hover,
body.qptr .mega__link:focus-visible,
body.qptr .mega__feature,
body.qptr .mega__feature:hover,
body.qptr .mega__feature:focus-visible { background: transparent; }
body.qptr .mega__label { transition: color var(--dur-fast) var(--ease-out); }
body.qptr .mega__link:hover .mega__label,
body.qptr .mega__link:focus-visible .mega__label { color: var(--mint); }

/* Zweite Menueebene bekommt beim Hover keine Mint-Flaeche mehr, nur die
   Auszeichnung der Schrift und den mitlaufenden Pfeil. */
body.qptr .mega__feature,
body.qptr .mega__feature:hover,
body.qptr .mega__feature:focus-visible {
  background: transparent;
  color: inherit;
}
/* Ohne Mint-Flaeche muss der Text der zweiten Ebene der Panelfarbe folgen. */
body.qptr .mega__feature-eyebrow { color: #ffffff8c; }
body.qptr .mega__feature-title   { color: var(--weiss); }
body.qptr .mega__feature-text    { color: #ffffffb8; }


body.qptr .mega__feature-title { transition: color var(--dur-fast) var(--ease-out); }
body.qptr .mega__feature:hover .mega__feature-title,
body.qptr .mega__feature:focus-visible .mega__feature-title { color: var(--mint); }


body.qptr .mission {
  position: relative;
  isolation: isolate;
  background: transparent;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
body.qptr .mission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.05s var(--ease-in-out);
  transition-delay: .2s;
}
body.qptr .mission.is-revealed::before { transform: scaleX(1); }
body.qptr .mission:hover,
body.qptr .mission:focus-visible { transform: translateY(-2px); }


/* -- 10  Reduced Motion / Print ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js body.qptr::after { animation: none; display: none; }
  html.js body.qptr [data-reveal],
  html.js body.qptr [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  body.qptr .hero__bg,
  html.js body.qptr .hero__title.is-revealed span,
  html.js body.qptr .closing__title.is-revealed span {
    animation: none;
  }
  body.qptr .mint-swipe { background-size: 100% 100%; transition: none; }
  body.qptr .mission::before { transform: none; transition: none; }
  body.qptr .cta:hover,
  body.qptr .refcard:hover,
  body.qptr .asset:hover,
  body.qptr .mission:hover { transform: none; }
  body.qptr .ul-orange { background-size: 100% 3px; transition: none; }
}

@media print {
  body.qptr::after,
  body.qptr::before,
  body.qptr .hero__bg { display: none; }
  body.qptr .mint-swipe { background-size: 100% 100%; }
}


/* ==========================================================================
   qptr-rework.css  ·  Ueberarbeitung 2026-08
   Wird an qptr-home.css angehaengt. Alles hier ist additiv: keine Regel des
   Builds wird ueberschrieben, die nicht ausdruecklich genannt ist.
   ========================================================================== */

/* -- 1  Menue: das Untermenue darf auf dem Weg nach unten nicht abreissen --
   Der Ausloeser war nur so hoch wie seine Textzeile, das Panel haengt aber an
   der Unterkante der Kopfleiste. Dazwischen lag ein toter Streifen: die Maus
   verliess das nav__item, bevor sie das Panel erreichte, und pointerleave hat
   zugemacht. Der Ausloeser wird jetzt so hoch wie die Kopfleiste, damit die
   beiden Flaechen aneinander stossen. Die Nachlaufzeit in qptr-rework.js ist
   die zweite Absicherung, fuer Subpixel-Kanten und schnelle Diagonalen. */

body.qptr .site-header__inner > .nav { align-self: stretch;
  display: flex;
  align-items: stretch; }
body.qptr .nav__list { align-items: stretch; }
body.qptr .nav__item { display: flex;
  align-items: stretch; }
body.qptr .nav__item > .nav__link { padding-block: 0;
  align-items: center; }
body.qptr .nav__item[data-open] > .mega,
body.qptr .nav__item[data-hover] > .mega { opacity: 1;
  visibility: visible;
  pointer-events: auto; }
/* Waehrend der Nachlaufzeit traegt der Punkt data-hover statt data-open. Ohne
   diese Zeile wuerde die Kopfleiste in genau dieser Zeitspanne kurz aufblitzen. */
body.qptr .site-header:has([data-nav-item][data-hover]) { background: rgba(11, 23, 23, .94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--weiss); }


/* -- 1b  Pfeil-Icons ohne Groessenangabe --------------------------------
   Der Build gibt jedem Icon seine Groesse ueber den Komponenten-Scope:
   `.asset__cta[data-astro-cid-ffhgcjdg] svg[data-astro-cid-ffhgcjdg]`. Wo ein
   svg diesen Scope nicht traegt - auf der Presseseite bereits im
   Auslieferungsstand, dazu auf jeder Karte, die diese Ueberarbeitung neu
   schreibt - greift keine Regel, und das Icon waechst auf die Breite seines
   Containers. Die Auszeichnung ueber die Klasse gilt unabhaengig vom Scope.
   Ein svg mit eigener Klasse (Wortmarke, Signet, Chevron) bleibt unberuehrt. */

body.qptr a > svg:not([class]),
body.qptr span > svg:not([class]),
body.qptr button > svg:not([class]) { width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out); }
body.qptr a:hover > svg:not([class]),
body.qptr .asset:hover .asset__cta > svg:not([class]),
body.qptr .refcard:hover .refcard__cta > svg:not([class]) { transform: translateX(.3em); }


/* -- 2  Bildbaender unter den Kopfbereichen ------------------------------
   Vollflaechig ueber die ganze Breite. Auf schmalen Fenstern waere 21:9 nur
   noch ein Streifen, deshalb dort ein ruhigeres Format. */

body.qptr .qptr-band { padding-top: 0;
  padding-bottom: var(--section-y); }
body.qptr .qptr-band__plate { width: 100%; }
@media (max-width: 48rem) {
  /* Nicht ueber --plate-ratio: das Seitenverhaeltnis steht als Inline-Stil am
     figure, und eine Inline-Deklaration schlaegt jede Regel aus dem
     Stylesheet. aspect-ratio ist eine normale Eigenschaft und laesst sich hier
     ueberschreiben - ohne das bliebe das Band auf dem Telefon ein 160 Pixel
     hoher Streifen. */
  body.qptr .qptr-band__plate { aspect-ratio: 16 / 9; }
}


/* -- 3  Spatial Intelligence: ein Bild je Funktion ----------------------- */

body.qptr .func__figure { margin: 0 0 var(--space-4);
  width: 100%; }
body.qptr .funcs { border-top: 0; }
/* Nur wo ein Bild oben in der Karte steht, faellt der obere Innenabstand weg.
   Ohne diese Einschraenkung klebte auf der Case Study der erste Titel direkt
   am Absatz darueber, weil die Karten dort kein Bild haben. */
body.qptr .func:has(.func__figure) { padding-top: 0; }


/* -- 4  Referenzen: sechs Projekte, zwei Reihen zu drei ------------------ */

body.qptr #projekte .grid { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  body.qptr #projekte .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  body.qptr #projekte .grid { grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-8); }
}


/* Der aktive Filter war unlesbar: die Regel des Builds setzt Flaeche auf
   var(--accent) und Schrift auf var(--schwarz). Seit die Sektionen dieser
   Seite auf dem hellen Token-Set laufen, ist --accent selbst --schwarz -
   schwarz auf schwarz. Der aktive Zustand bekommt die Lila-Auszeichnung,
   die auf dieser Seite ohnehin die Akzentfarbe ist. */
body.qptr .filter__btn.is-active { background: var(--lila);
  border-color: var(--lila) !important;
  color: var(--weiss); }
body.qptr .filter__btn { border: 1px solid rgba(11, 23, 23, .2) !important; }
body.qptr .filter__btn:hover:not(.is-active) { border-color: var(--lila) !important;
  color: var(--lila); }


/* -- 5  Kopfbereiche, die der Build ohne hero__inner ausgibt --------------
   Karriere und Presse tragen weder .hero__inner noch .hero__text und eine
   andere Brotkrumen-Klasse als jede andere Seite. Ohne die beiden Wrapper
   laeuft der Titel auf volle Zeilenbreite und die Brotkrumen stehen ohne
   Abstand. Hier bekommen sie dieselben Werte wie ueberall sonst. */

body.qptr .hero > .wrap > nav > .crumbs { display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none; }
body.qptr .hero > .wrap > nav > .crumbs .crumbs__item { display: flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--fg-quiet); }
body.qptr .hero > .wrap > nav > .crumbs .crumbs__item + .crumbs__item::before { content: "/";
  margin-right: .5rem;
  opacity: .5; }
body.qptr .hero > .wrap > nav > .crumbs a { color: inherit; }
body.qptr .hero > .wrap > nav > .crumbs a:hover { color: var(--weiss); }
body.qptr .hero > .wrap > .hero__title { max-width: 20ch; }
body.qptr .hero > .wrap > .hero__subline { max-width: 46ch;
  margin: var(--space-5) 0 0; }


/* -- 6  Karriere ---------------------------------------------------------
   Benefits und offene Stellen standen als zwei gleich helle Bloecke direkt
   uebereinander, ohne Kante dazwischen: der Wechsel war nicht lesbar. Die
   Stellen bekommen Luft, eine Trennlinie und eine Zeile, die sich als Zeile
   liest statt als Tabellenrest. */

body.qptr.page-careers #benefits { padding-bottom: var(--space-6); }
body.qptr.page-careers #jobs { padding-top: var(--space-6); }
body.qptr.page-careers .lead-block { margin-bottom: var(--space-6); }
body.qptr.page-careers .reasons { row-gap: var(--space-2); }
body.qptr.page-careers .people { gap: 0; }
body.qptr.page-careers .person { display: block;
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(11, 23, 23, .12) !important; }
body.qptr.page-careers .person:last-child { border-bottom: 1px solid rgba(11, 23, 23, .12) !important; }
body.qptr.page-careers .person__name { margin: 0 0 .35rem;
  font-size: var(--fs-h3);
  line-height: 1.25; }
body.qptr.page-careers .person__role { margin: 0;
  color: #0b1717a8; }
body.qptr.page-careers .section__foot { margin-top: var(--space-7); }
/* Die deutsche Fassung der Seite ist eine andere: statt Benefits und offener
   Stellen ein Hinweis, dass gerade nichts ausgeschrieben ist. Sie steht auf
   section--flush-top und stiess damit direkt an die Unterzeile des
   Kopfbereichs. */
body.qptr.page-careers #stellen { padding-top: var(--space-8); }
body.qptr.page-careers #initiativ { padding-top: var(--space-7); }
body.qptr.page-careers .empty__title { margin-bottom: var(--space-4); }


/* -- 7  Presse -----------------------------------------------------------
   Drei Sektionen hintereinander auf demselben Weiss, ohne Kante dazwischen.
   Der Wechsel kommt jetzt ueber Abstand und eine Linie, nicht ueber Farbe. */

body.qptr.page-press #news { padding-bottom: var(--space-8); }
body.qptr.page-press #downloads { padding-top: var(--space-8);
  padding-bottom: var(--space-8); }
body.qptr.page-press #contact { padding-top: var(--space-7); }
body.qptr.page-press #downloads,
body.qptr.page-press #contact { border-top: 1px solid rgba(11, 23, 23, .12); }

/* Quellenangabe unter einer Meldung: klein, ruhig, aber anklickbar. */
body.qptr .press__source { display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: var(--space-3);
  font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  color: #0b1717a8;
  text-decoration: underline;
  text-decoration-color: rgba(11, 23, 23, .28);
  text-underline-offset: .25em;
  transition: color var(--dur-fast) var(--ease-out); }
body.qptr .press__source:hover,
body.qptr .press__source:focus-visible { color: var(--lila);
  text-decoration-color: currentColor; }
body.qptr .press__source svg { width: 1em;
  height: 1em;
  flex: none; }


/* -- 8  Pressemeldungen als Slider --------------------------------------
   Ein Track mit Scroll-Snap. Ohne JavaScript bleibt ein waagrecht
   scrollbarer Bereich, mit JavaScript kommen Pfeile und Punkte dazu. */

body.qptr .slider { position: relative; }
body.qptr .slider__track { display: grid;
  grid-auto-flow: column;
  /* Eine feste Spaltenbreite, kein minmax(): mit einem Minimum von 0 duerfte
     das Raster die Folien schrumpfen lassen, bis alle hineinpassen - dann
     scrollt nichts mehr und der Slider waere keiner. */
  grid-auto-columns: 100%;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-4);
  scrollbar-width: none; }
body.qptr .slider__track::-webkit-scrollbar { display: none; }
body.qptr .slider__slide { scroll-snap-align: start;
  min-width: 0; }
@media (min-width: 44rem) {
  body.qptr .slider__track { grid-auto-columns: calc(50% - var(--space-5) / 2); }
}
/* Zwei je Ansicht, auch auf grossen Fenstern: mit drei Meldungen bliebe ein
   dreispaltiger Slider stehen und waere keiner. */
@media (min-width: 68rem) {
  body.qptr .slider__track { grid-auto-columns: calc(50% - var(--space-5) / 2); }
}
body.qptr .slider__nav { display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4); }
body.qptr .slider__btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(11, 23, 23, .2) !important;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out); }
body.qptr .slider__btn:hover:not([disabled]) { background: var(--lila);
  border-color: var(--lila) !important;
  color: var(--weiss); }
body.qptr .slider__btn[disabled] { opacity: .3;
  cursor: default; }
body.qptr .slider__btn svg { width: 1.1rem;
  height: 1.1rem; }
body.qptr .slider__dots { display: flex;
  gap: .5rem;
  margin-left: auto; }
body.qptr .slider__dot { width: 1.75rem;
  height: 2px;
  border: 0;
  padding: 0;
  background: rgba(11, 23, 23, .2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out); }
body.qptr .slider__dot[aria-current="true"] { background: var(--lila); }
body.qptr .slider .asset { height: 100%; }
html:not(.js) body.qptr .slider__nav { display: none; }


/* -- 9  Pressedownloads --------------------------------------------------- */

body.qptr .downloads { display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none; }
@media (min-width: 44rem) {
  body.qptr .downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.qptr .download { display: flex;
  flex-direction: column;
  gap: var(--space-3); }
body.qptr .download__media { margin: 0; }
body.qptr .download__title { margin: 0; }
body.qptr .download__text { margin: 0;
  color: #0b1717a8; }
body.qptr .download__links { display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: auto 0 0;
  padding: 0;
  list-style: none; }
body.qptr .download__link { font-family: var(--font-secondary);
  font-weight: var(--weight-secondary);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--lila);
  text-decoration: underline;
  text-underline-offset: .25em; }
body.qptr .download__link:hover { color: var(--schwarz); }
/* Bildrechte-Hinweis unter den Downloads. Eigene Klasse, weil er sonst an der
   Auszeichnung des HubSpot-Ersatzhinweises haengt und jede Aenderung dort
   ungewollt hier ankommt. */
body.qptr .press__rights { margin-top: var(--space-4);
  color: #0b1717a8; }
/* Portraets bleiben in Originalfarbe: ein Pressebild wird weitergegeben. */
body.qptr .download__media .plate__img { filter: none; }
body.qptr .download__media .plate__tint { display: none; }


/* -- 10  HubSpot-Formulare ----------------------------------------------
   Dieses Portal liefert seine Formulare als iframe aus - der Container kommt
   als .hs-form-iframe zurueck. Was darin steht, ist eine fremde Seite und laesst
   sich von hier aus nicht gestalten: Schrift, Felder und Knopf kommen aus dem
   HubSpot-Formulareditor, dort werden sie auch geaendert.
   Hier bleibt deshalb nur, dem Formular Platz und Breite zu geben. Eine
   frueher hier stehende Sammlung von Regeln fuer .hs-embed input, label und
   .hs-button ist entfernt - sie konnte den iframe nie erreichen. */

body.qptr .hs-embed { max-width: 34rem; }
/* Das iframe meldet seine Hoehe erst nach dem Laden. Ohne Mindesthoehe faellt
   der Bereich bis dahin auf null zusammen und die Sektion springt. */
body.qptr .hs-embed__form { min-height: 24rem; }
body.qptr .hs-embed iframe { width: 100%;
  max-width: 100%;
  border: 0; }
body.qptr .hs-embed__fallback { margin-top: var(--space-4);
  font-size: var(--fs-meta);
  color: #0b1717a8; }
body.qptr .hs-embed__fallback[hidden] { display: none; }


/* Zweizeilige Ueberschriften des Builds setzen ihre Zeilen als span. Die
   Regel dafuer haengt am jeweiligen Komponenten-Scope; auf neu geschriebenen
   Ueberschriften braucht es sie klassenbasiert, sonst laufen die beiden
   Zeilen ohne Leerzeichen ineinander. */
body.qptr .sec__title > span,
body.qptr .closing__title > span,
body.qptr .split__title > span { display: block; }


/* -- 11  Case Study --------------------------------------------------------
   Dieselben Bausteine wie das BIM Specification Sheet, neu ist nur die
   Kennzahlenreihe. */

body.qptr .figures { display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none; }
@media (min-width: 52rem) {
  body.qptr .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.qptr .figure__value { margin: 0 0 .35rem; }
body.qptr .figure__label { margin: 0;
  color: var(--fg-quiet); }
body.qptr .cs__media { margin: var(--space-6) 0 0; }
/* Die Kennzahlen-Karten folgen direkt auf den Fliesstext der Sektion. Ohne
   eigenen Abstand stossen Titel und Absatz aneinander. */
body.qptr.page-case-study .funcs { margin-top: var(--space-7);
  border-top: 1px solid rgba(11, 23, 23, .12);
  row-gap: var(--space-2); }
body.qptr.page-case-study .func { padding-top: var(--space-5); }
body.qptr.page-case-study .two { margin-bottom: 0; }