/* Querfahrt durch die drei Marken (Vorbild ERA Residence). Am Desktop klebt der Bildschirm, das Band
   fährt seitlich (querfahrt.js setzt die Streckenhöhe). Unter 900 px und bei reduzierter Bewegung
   stehen die Tafeln untereinander. Die Punkte zeichnet .qf-punkte, die 3D-Punkte sammeln sich in .qf-zeichen. */
.leistungen.querfahrt { padding: 0; }
.qf-strecke { position: relative; }
.qf-schirm { position: relative; }
.qf-punkte { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; }
.querfahrt.qf--sichtbar .qf-punkte { opacity: 1; }
.qf-band { position: relative; z-index: 2; }
.qf-tafel { position: relative; }

/* Intro-Tafel */
.qf-intro { padding: clamp(72px, 9vw, 120px) var(--rand); }
.qf-etikett { margin: 0 0 18px; font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.qf-intro h2 { margin: 0; font: 500 clamp(40px, 6vw, 96px)/1.02 var(--kopf); letter-spacing: -.05em; color: #f2f2f2; }
.qf-intro h2 span { display: inline-block; }
.qf-einordnung { margin: 24px 0 0; max-width: 34ch; font: 400 clamp(17px, 1.5vw, 22px)/1.5 var(--sans); color: #a8a8a8; }
.qf-zeichen { width: 150px; height: 190px; margin: 40px 0 0; pointer-events: none; }

/* Marken-Tafeln */
.qf-marke { --a: var(--gold); padding: clamp(64px, 8vw, 110px) var(--rand); }
.qf-nr { margin: 0 0 12px; font: 500 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--a); }
.qf-titel { margin: 0; font: 600 clamp(64px, 15vw, 200px)/.82 var(--kopf); letter-spacing: -.06em; color: #f3f3f3; white-space: nowrap; }
.qf-titel span { display: block; }
.qf-umriss { font-size: calc(1em * var(--gr, 1)); padding-left: .9em; font-family: "Montserrat Umriss", var(--kopf); font-weight: 600; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1.5px var(--a); }
.qf-motiv { height: clamp(220px, 62vw, 360px); }
.qf-foto { margin: 0; overflow: hidden; outline: 1px solid color-mix(in srgb, var(--a) 50%, transparent); outline-offset: 12px; }
.qf-foto img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.qf-block { margin-top: 36px; }
.qf-satz { margin: 0 0 22px; font: 500 clamp(21px, 1.8vw, 27px)/1.2 var(--kopf); letter-spacing: -.03em; color: #fff; }
.qf-leistungen { list-style: none; margin: 0; padding: 0; }
.qf-leistungen li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid #ffffff1f; font: 500 clamp(17px, 1.3vw, 19px)/1.3 var(--kopf); letter-spacing: -.02em; color: #ececec; }
.qf-leistungen li:last-child { border-bottom: 1px solid #ffffff1f; }
.qf-leistungen small { width: 24px; flex: none; font: 500 11px/1 var(--sans); letter-spacing: .12em; color: var(--a); }
/* Der Markenknopf nutzt den bestehenden Markenwechsel (marken-wechsel.js); leistungen.css legt .molekuel-marke absolut. */
.qf-block .molekuel-marke.qf-knopf { position: relative; inset: auto; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 48px; margin-top: 28px; padding: 0 26px; border: 1px solid var(--a); border-radius: 999px; font: 500 13px/1 var(--sans); letter-spacing: .06em; color: #fff; text-decoration: none; transition: background .25s, color .25s; }
.qf-block .molekuel-marke.qf-knopf::after { content: "→"; margin-left: 12px; transition: transform .25s; }
.qf-block .molekuel-marke.qf-knopf:hover { background: var(--a); color: #000; }
.qf-block .molekuel-marke.qf-knopf:hover::after { transform: translateX(3px); }
.qf-block .molekuel-marke.qf-knopf:focus-visible { outline: 2px solid var(--a); outline-offset: 4px; }
.qf-fortschritt { display: none; }

/* ── Desktop: kleben und seitlich fahren ─────────────────────────────────── */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .qf-strecke { height: 400vh; }
  .qf-schirm { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .qf-band { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; }
  .qf-tafel { flex: 0 0 auto; height: 100%; padding: 0; }
  .qf-intro { width: 100vw; display: grid; align-content: center; padding: 0 var(--rand); }
  .qf-zeichen { position: absolute; right: 14vw; top: 50%; translate: 0 -50%; width: 180px; height: 228px; margin: 0; }
  .qf-marke { width: 120vw; }
  .qf-marke:last-child { width: 100vw; }
  .qf-nr { position: absolute; left: 4.4vw; top: 14vh; margin: 0; }
  .qf-titel { position: absolute; left: 4vw; top: 18vh; font-size: min(11vw, 20vh); }
  .qf-motiv { position: absolute; left: 6vw; top: 54vh; width: 36vw; height: 38vh; }
  .qf-foto { position: absolute; left: 49vw; top: 18vh; width: 24vw; height: 64vh; }
  .qf-foto img { aspect-ratio: auto; }
  .qf-block { position: absolute; left: 78vw; top: 28vh; width: 21vw; margin: 0; }
  .qf-fortschritt { position: absolute; left: var(--rand); right: var(--rand); bottom: 4.5vh; z-index: 3; display: flex; align-items: center; gap: 20px; font: 500 11px/1 var(--sans); letter-spacing: .18em; color: #8a8a8a; }
  .qf-fortschritt b { color: #fff; font-weight: 500; }
  .qf-balken { position: relative; flex: 1; height: 1px; background: #ffffff22; }
  .qf-balken i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--gold); }
}

/* ── Handy und reduzierte Bewegung: untereinander ────────────────────────── */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .qf-marke { border-top: 1px solid #ffffff14; }
  .qf-titel { font-size: clamp(56px, 17vw, 120px); }
  .qf-umriss { padding-left: .5em; }
  .qf-foto { margin-top: 8px; }
  .qf-zeichen { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .qf-punkte { display: none; } }

/* Übergabe: Während der Querfahrt zeichnet die Punktebene das Zeichen weiter (N → Haus → Tropfen → Sonne);
   die 3D-Bühne blendet so lange aus und kommt für den Flug zur Karte zurück. */
.logo-raum .logo-buehne { transition: filter 1s, opacity .2s; }
.logo-raum.qf--uebernahme .logo-buehne { opacity: 0; }
/* Markenwechsel: Die Punktebene liegt über dem Schwarz (z 40), damit das Motiv sichtbar in die Mitte zum N fliegt. */
.qf-punkte.qf-punkte--wechsel { z-index: 2001; opacity: 1; transition: none; }