/* Hover-Raute über Projektbildern (Element wird von fh-projekte.js erzeugt, daher nicht als Bricks-Klasse) */
.qb--cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  pointer-events: none;
}
.qb--cursor::before,
.qb--cursor::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  translate: -50% -50%;
  scale: 0;
  transition: scale 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
.qb--cursor::before {
  width: 5.075rem;
  height: 5.075rem;
  rotate: 45deg;
  background-color: color-mix(in srgb, var(--primary) 89%, transparent);
}
.qb--cursor::after {
  width: 1.97rem;
  height: 1.97rem;
  background: url("../fh-assets/icons/plus-white.svg") center / contain no-repeat;
}
.qb--cursor.is-visible::before,
.qb--cursor.is-visible::after {
  scale: 1;
}
@media (hover: hover) and (pointer: fine) {
  .qb--project-media,
  .qb--prow-media {
    cursor: none;
  }
}

/* Hinweis, wenn eine Nutzung (noch) keine Projekte hat (Element erzeugt fh-projekte.js) */
.qb--plist-empty {
  margin-block: var(--space-xl) 0;
  font-size: var(--text-m);
  color: var(--base);
}
.qb--plist-empty[hidden] {
  display: none;
}

/* Lenis (nur Projektliste): Pflicht-CSS laut Lenis. ACSS setzt scroll-behavior: smooth – das würde Lenis doppelt glätten. */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
/* Mit overflow am html gibt der Browser das overflow-x: hidden des body nicht mehr an das Fenster weiter – der body
   würde selbst zum Scroll-Container, und die klebende Filterleiste klebte an ihm statt am Fenster (verschwand beim
   Öffnen eines Projekts, solange Lenis gestoppt ist). clip schneidet genauso ab, ohne Scroll-Container zu werden.
   !important, weil Motion.page beim Laden overflow-x: hidden als Inline-Style auf den body setzt. */
.lenis.lenis-stopped body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* „Read more“ in gekappten Textspalten der Bildstrecke (Button wird von fh-projekte.js eingefügt) */
.qb--readmore {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 4rem;
  padding: 0;
  border: 0;
  background: linear-gradient(to top, var(--neutral) 40%, color-mix(in srgb, var(--neutral) 0%, transparent));
  color: var(--base);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.qb--readmore:hover,
.qb--readmore:focus-visible {
  color: var(--accent);
}
/* Nach „Read more“: Text läuft in Spalten nach rechts weiter. Alles responsiv aus CSS,
   fh-projekte.js setzt nur die Spaltenanzahl --qb-cols. Spaltenbreite = Breite der gekappten Spalte. */
.qb--pdetail {
  --qb-col-w: 21.8125rem;
  --qb-col-gap: var(--space-l);
}
@media (max-width: 767px) {
  .qb--pdetail {
    --qb-col-w: 18.125rem;
  }
}
.qb--pdetail .qb--pdetail-info.is-expanded,
.qb--pdetail .qb--pdetail-text.is-expanded {
  display: block;
  flex: 0 0 calc(var(--qb-cols, 2) * var(--qb-col-w) + (var(--qb-cols, 2) - 1) * var(--qb-col-gap));
  height: var(--qb-pdetail-max);
  column-width: var(--qb-col-w);
  column-gap: var(--qb-col-gap);
  column-fill: auto;
}
.qb--pdetail .qb--pdetail-info.is-expanded > * {
  break-inside: avoid;
}
/* Bildstrecke: Mausrad/Trackpad scrollt nativ horizontal, der vertikale Anteil darf nicht an die Seite
   weitergereicht werden (die vertikale Seite scrollt Lenis). Nur bei Maus/Trackpad – auf Touch
   würde das vertikales Wischen auf dem Streifen blockieren. */
.qb--pdetail-track {
  scroll-behavior: auto;
}
@media (hover: hover) and (pointer: fine) {
  .qb--pdetail-track {
    overscroll-behavior: contain;
  }
}