/* Modul „sammlung“. Übernommen aus seiten/insights/insights.css (Filter-
   leiste, Kartenraster, Karten, Weitere Beiträge) und site/portfolio/
   uebersicht.css + ansichten/arbeiten.css (Steuerung, Liste „Arbeiten“).
   Nur Tokens; Farben der Fläche aus der Ton-Regel (--bb-*), die Karten der
   Insights tragen ihre Machart-Flächen selbst. Breakpoints 640/768/1024/
   1200/1440. „Bewegung reduzieren“ am Ende. */

.bb-m-sammlung :is(a, button, select):focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bb-fokus);
  outline-offset: var(--bm-fokus-versatz);
}

/* ══ Insights: Filterleiste ═══════════════════════════════════════════════ */
.bb-m-sammlung__filter-leiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.bb-m-sammlung__filter-knopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.75rem;
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--bb-linie-zart);
  background: transparent;
  color: var(--bb-text);
  font-family: var(--bm-font);
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-kompakt);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease-linear), color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bb-m-sammlung__filter-knopf:is(:hover, [aria-expanded='true']) { border-top-color: var(--bb-akzent); }
.bb-m-sammlung__filter-name { flex: 1 1 auto; }
.bb-m-sammlung__filter-zahl {
  flex: none;
  min-width: 1.5rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-signal);
  color: var(--bm-signal-text);
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-mini);
  line-height: var(--bm-zh-kompakt);
  text-align: center;
}
.bb-m-sammlung__filter-pfeil {
  flex: none;
  transition: transform var(--bm-dauer) var(--bm-ease);
}
.bb-m-sammlung__filter-knopf[aria-expanded='true'] .bb-m-sammlung__filter-pfeil { transform: rotate(180deg); }

.bb-m-sammlung__filter-feld {
  padding: 0.5rem 0 2rem;
  animation: bb-m-sammlung-feld-auf var(--bm-dauer) var(--bm-ease) both;
}
@keyframes bb-m-sammlung-feld-auf {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}
.bb-m-sammlung__filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-m-sammlung__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--bb-linie-feld);
  border-radius: var(--bm-radius-pille);
  background: transparent;
  color: var(--bb-text);
  font-family: var(--bm-font);
  font-size: var(--bm-t-knopf);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease-linear), border-color var(--bm-dauer-kurz) var(--bm-ease-linear), color var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bb-m-sammlung__chip:hover { background: color-mix(in srgb, var(--bb-text) 8%, transparent); border-color: var(--bb-text); }
.bb-m-sammlung__chip[aria-pressed='true'] {
  background: var(--bm-signal);
  border-color: var(--bm-signal);
  color: var(--bm-signal-text);
}
.bb-m-sammlung__chip[aria-pressed='true']:hover { background: var(--bm-signal-hell); border-color: var(--bm-signal-hell); }

@media (min-width: 768px) {
  .bb-m-sammlung__filter-leiste {
    grid-template-columns: repeat(var(--bb-m-sammlung-spalten), minmax(0, 1fr));
    column-gap: var(--bb-raster-luecke);
  }
  .bb-m-sammlung__filter-knopf { grid-row: 1; }
  .bb-m-sammlung__filter-feld { grid-row: 2; grid-column: 1 / -1; padding-top: 1rem; }
}

/* Zeile unter der Leiste: Treffer, Alle löschen, Sortierung */
.bb-m-sammlung__filter-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bb-linie-zart);
}
.bb-m-sammlung__treffer {
  margin: 0;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  color: var(--bb-text-ruhig);
}
.bb-m-sammlung__loeschen {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-akzent);
  font-family: var(--bm-font);
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.bb-m-sammlung__loeschen:hover { color: var(--bb-text); }
.bb-m-sammlung__sortierung {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-kompakt);
  color: var(--bb-text-ruhig);
}
@media (max-width: 639px) {
  .bb-m-sammlung__sortierung { margin-left: 0; width: 100%; justify-content: space-between; }
}

.bb-m-sammlung__leer {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-lang);
  color: var(--bb-text);
}

/* Nachladen in Schritten: Knopf mittig unter dem Raster */
.bb-m-sammlung__mehr {
  display: flex;
  justify-content: center;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
}

/* ══ Insights: Raster ═════════════════════════════════════════════════════ */
.bb-m-sammlung__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-raster-luecke);
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.bb-m-sammlung--weitere .bb-m-sammlung__raster { margin-top: 0; }
@media (min-width: 640px) {
  .bb-m-sammlung__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bb-m-sammlung__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .bb-m-sammlung__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* „Weitere Beiträge“: drei Karten, ab 1024 px drei Spalten. Von 640 bis
   1023 px stehen zwei Spalten; dort erscheinen zwei Karten, damit keine
   allein in der zweiten Zeile steht (P2-D). */
@media (min-width: 1024px) {
  .bb-m-sammlung__raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .bb-m-sammlung__raster--drei > .bb-m-sammlung__karte:nth-child(n + 3) { display: none; }
}

/* ══ Insights: Karte ══════════════════════════════════════════════════════ */
.bb-m-sammlung__karte {
  min-width: 0;
  /* Nachladen: die erste neue Karte steht unter dem Kopf der Seite. */
  scroll-margin-top: calc(var(--bm-kopf-h) + 1.5rem);
}
.bb-m-sammlung__karte-link {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 9fr) minmax(0, 11fr);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--bm-radius);
  background: var(--bb-karte);
  color: var(--bb-text);
  text-decoration: none;
}
@media (min-width: 640px) {
  .bb-m-sammlung__karte-link { aspect-ratio: 5 / 7; }
}
/* Rahmen: leise Linie, bei Hover und Fokus in der Akzentfarbe. */
.bb-m-sammlung__karte-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--bb-linie-zart);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease-linear), border-width var(--bm-dauer-kurz) var(--bm-ease-linear);
}
.bb-m-sammlung__karte-link:is(:hover, :focus-visible)::after {
  border-width: 2px;
  border-color: var(--bb-akzent);
}
.bb-m-sammlung__karte-kopf {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 0;
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  padding-bottom: 1rem;
  overflow: hidden;
}
.bb-m-sammlung__karte-art {
  margin: 0;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-ziffer);
  text-transform: uppercase;
  color: var(--bb-text-ruhig);
}
.bb-m-sammlung__karte-titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  font-size: var(--bm-t-h3);
  line-height: var(--bm-zh-titel);
  letter-spacing: var(--bm-sp-leicht);
  color: inherit;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.bb-m-sammlung__karte-bild {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.bb-m-sammlung__karte-bild > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bm-dauer-langsam) var(--bm-ease);
}
.bb-m-sammlung__karte-link:is(:hover, :focus-visible) .bb-m-sammlung__karte-bild > img { transform: scale(1.03); }
/* Das KI-Kennzeichen der Karten braucht hier nichts: Lage und Stapelhöhe
   stehen einmal in aufbau.css (.bm-ki-zeichen). */

/* Macharten (Regel site/insights/machart.ts) */
.bb-m-sammlung__karte--sw .bb-m-sammlung__karte-bild > img { filter: grayscale(1) contrast(1.08); }
.bb-m-sammlung__karte--abstrakt .bb-m-sammlung__karte-link { background: var(--bm-flaeche-dunkel); }
/* Motive auf schwarzem Grund: der Übergang zum Kartenkopf verläuft weich. */
.bb-m-sammlung__karte--abstrakt .bb-m-sammlung__karte-bild::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 30%;
  background: linear-gradient(var(--bm-flaeche-dunkel), transparent);
  pointer-events: none;
}
:is(.bb-m-sammlung__karte--linie, .bb-m-sammlung__karte--hell) .bb-m-sammlung__karte-link {
  background: var(--bm-bg);
  color: var(--bm-text);
}
:is(.bb-m-sammlung__karte--linie, .bb-m-sammlung__karte--hell) .bb-m-sammlung__karte-art { color: var(--bm-text-leise); }
:is(.bb-m-sammlung__karte--linie, .bb-m-sammlung__karte--hell) .bb-m-sammlung__karte-link::after { border-color: transparent; }
/* Rahmen auf heller Fläche: Kontur-Ton (3:1 auf Hell). */
:is(.bb-m-sammlung__karte--linie, .bb-m-sammlung__karte--hell) .bb-m-sammlung__karte-link:is(:hover, :focus-visible)::after { border-color: var(--bm-signal-kontur); }
.bb-m-sammlung__karte--hell .bb-m-sammlung__karte-link { background: var(--bm-kachel); }
.bb-m-sammlung__karte--farbe .bb-m-sammlung__karte-link {
  background: var(--bm-signal-verlauf);
  color: var(--bm-signal-text);
}
.bb-m-sammlung__karte--farbe .bb-m-sammlung__karte-art { color: inherit; }
.bb-m-sammlung__karte--farbe .bb-m-sammlung__karte-link::after { border-color: transparent; }
.bb-m-sammlung__karte--farbe .bb-m-sammlung__karte-link:is(:hover, :focus-visible)::after { border-color: var(--bm-signal-text); }

/* Typo-Karten (hell, farbe): der Titel trägt die Karte, unten der Pfeil. */
:is(.bb-m-sammlung__karte--hell, .bb-m-sammlung__karte--farbe) .bb-m-sammlung__karte-link { grid-template-rows: minmax(0, 1fr) auto; }
:is(.bb-m-sammlung__karte--hell, .bb-m-sammlung__karte--farbe) .bb-m-sammlung__karte-titel {
  font-size: var(--bm-t-h2);
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-eng);
  -webkit-line-clamp: 7;
  line-clamp: 7;
}
.bb-m-sammlung__karte-fuss {
  display: flex;
  justify-content: flex-end;
  padding: 0 clamp(1.25rem, 1.8vw, 1.75rem) clamp(1.25rem, 1.8vw, 1.75rem);
}
.bb-m-sammlung__karte-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: var(--bm-radius-pille);
  transition: transform var(--bm-dauer) var(--bm-ease);
}
.bb-m-sammlung__karte-link:is(:hover, :focus-visible) .bb-m-sammlung__karte-pfeil { transform: translateX(0.25rem); }

/* Linienzeichnung */
.bb-m-sammlung__zeichnung {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--bm-text);
}
.bb-m-sammlung__zeichnung-akzent { fill: var(--bm-signal); stroke: none; }

/* ══ Arbeiten ═════════════════════════════════════════════════════════════
   Wie die Übersicht des Builders (Kap. 5.2 Ist-Builder): Werkzeugzeile
   (Suche, Ansicht, Zähler), darunter die Filter der Website; die Liste auf
   einem dunklen Band in voller Fensterbreite, das 100 px unter der Oberkante
   der ersten Arbeit beginnt und bis zum Ende der Sektion reicht. */
.bb-m-sammlung--arbeiten { overflow-x: clip; }

/* Steuerung in EINER Zeile: Suche, Bereich, Branche, Reihenfolge, rechts
   Ansicht (+ Videos) und Zähler. Bei Platzmangel scrollt die Zeile
   waagerecht (ohne Balken); die Ränder blenden per Verlauf aus, solange dort
   noch etwas liegt (Hintergrund-Trick mit background-attachment: local, ohne
   JS). Klebt unter der Kopfleiste; Luft zum Kopf davor wie im Builder. */
.bb-m-sammlung__steuerung {
  --bb-m-sammlung-rand: var(--bb-grund);
  position: sticky;
  top: var(--bm-kopf-h);
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  padding: 0.625rem 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background:
    linear-gradient(to right, var(--bb-m-sammlung-rand) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--bb-m-sammlung-rand) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--bb-text) 18%, transparent), transparent) left center / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--bb-text) 18%, transparent), transparent) right center / 0.75rem 100% no-repeat scroll,
    var(--bb-m-sammlung-rand);
  box-shadow: 0 0 0 100vmax var(--bb-m-sammlung-rand);
  clip-path: inset(0 -100vmax);
}
.bb-m-sammlung__steuerung::-webkit-scrollbar { display: none; }
.bb-m-sammlung__steuerung > * { flex: none; }
.bb-m-sammlung__suche {
  position: relative;
  width: 15rem;
  color: var(--bb-text-ruhig);
}
.bb-m-sammlung__suche-lupe {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
/* Linie wie die Auswahlfelder daneben. */
.bb-m-sammlung__suche-feld {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 2.25rem 0 1.875rem;
  border: 0;
  border-bottom: 1px solid var(--bb-linie-feld);
  border-radius: 0;
  background: transparent;
  color: var(--bb-text);
  font: inherit;
  font-size: var(--bm-t-fest);
  appearance: none;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-sammlung__suche-feld::placeholder { color: var(--bb-text-ruhig); opacity: 1; }
.bb-m-sammlung__suche-feld:hover { border-bottom-color: var(--bb-text); }
/* Fokus innen (die Zeile beschneidet senkrecht nicht, waagerecht schon). */
.bb-m-sammlung__suche-feld:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bb-fokus);
  outline-offset: calc(-1 * var(--bm-fokus-breite));
  border-bottom-color: var(--bb-text);
}
.bb-m-sammlung__suche-feld::-webkit-search-cancel-button { appearance: none; }
.bb-m-sammlung__suche-taste {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.25rem;
  border: 1px solid var(--bb-linie-feld);
  border-radius: var(--bm-radius);
  color: var(--bb-text-ruhig);
  font: inherit;
  font-size: var(--bm-t-mini);
  line-height: 1;
  pointer-events: none;
}
.bb-m-sammlung__suche:focus-within .bb-m-sammlung__suche-taste,
.bb-m-sammlung__suche-feld:not(:placeholder-shown) ~ .bb-m-sammlung__suche-taste { display: none; }

.bb-m-sammlung__wahlen {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.25rem;
}
.bb-m-sammlung__wahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 10.5rem;
}
/* Schlichte Linie statt Pille (basis.css gestaltet freie Selects mit .bm-neu.bm-neu select:not(form select) – daher die doppelte Klasse), eigener Pfeil. */
.bb-m-sammlung.bb-m-sammlung .bb-m-sammlung__wahl select {
  width: 100%;
  height: 2.75rem;
  min-height: 0;
  padding: 0 2rem 0 0;
  border: 0;
  border-bottom: 1px solid var(--bb-linie-feld);
  border-radius: 0;
  background: transparent;
  background-image: none;
  color: var(--bb-text);
  font: inherit;
  font-size: var(--bm-t-fest);
  font-weight: var(--bm-g-normal);
  appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-sammlung.bb-m-sammlung .bb-m-sammlung__wahl select:hover { border-bottom-color: var(--bb-text); }
.bb-m-sammlung.bb-m-sammlung .bb-m-sammlung__wahl select:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bb-fokus);
  outline-offset: calc(-1 * var(--bm-fokus-breite));
}
.bb-m-sammlung__wahl option { background: var(--bb-grund); color: var(--bb-text); }
.bb-m-sammlung__wahl-pfeil {
  position: absolute;
  right: 0.25rem;
  pointer-events: none;
  color: var(--bb-text-ruhig);
}
/* Gewählter Filter: Linie und Pfeil in der Akzentfarbe der Fläche. */
.bb-m-sammlung.bb-m-sammlung .bb-m-sammlung__wahl[data-aktiv] select { border-bottom-color: var(--bb-akzent); }
.bb-m-sammlung__wahl[data-aktiv] .bb-m-sammlung__wahl-pfeil { color: var(--bb-akzent); }

/* Rechts: Ansicht, Videos, Zähler (margin-left: auto schiebt sie an den Rand). */
.bb-m-sammlung__ende {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
/* Umschalter Präsentation | Raster (Pillen, Builder). */
.bb-m-sammlung__ansicht {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--bb-linie-feld);
  border-radius: var(--bm-radius-pille);
}
.bb-m-sammlung__ansicht-wahl,
.bb-m-sammlung__videos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--bm-radius-pille);
  background: transparent;
  color: var(--bb-text-ruhig);
  font: inherit;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-mittel);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bm-dauer-kurz) var(--bm-ease), background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-sammlung__ansicht-wahl:hover,
.bb-m-sammlung__videos:hover { color: var(--bb-text); }
.bb-m-sammlung__ansicht-wahl[aria-pressed='true'] { background: var(--bb-text); color: var(--bb-grund); }
.bb-m-sammlung__videos { width: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--bb-linie-feld); }
:is(.bb-m-sammlung__ansicht-wahl, .bb-m-sammlung__videos):focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bb-fokus);
  outline-offset: calc(-1 * var(--bm-fokus-breite));
}
.bb-m-sammlung__zaehler {
  min-width: 5.5rem;
  margin: 0;
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-fest);
  font-variant-numeric: tabular-nums;
  color: var(--bb-text-ruhig);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .bb-m-sammlung__steuerung, .bb-m-sammlung__wahlen { gap: 1rem; }
  .bb-m-sammlung__suche { width: 13rem; }
  .bb-m-sammlung__wahl { width: 9.5rem; }
}
@media (max-width: 767px) {
  .bb-m-sammlung__suche { width: 12rem; }
  .bb-m-sammlung__suche-taste { display: none; }
  .bb-m-sammlung__ende { margin-left: 0; }
}

/* Aktive Filter als Marken (Klick entfernt), daneben „Alle Arbeiten zeigen“. Tippfläche 44 px. */
.bb-m-sammlung__aktiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
}
.bb-m-sammlung__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-m-sammlung__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--bb-akzent);
  border-radius: var(--bm-radius-pille);
  background: transparent;
  color: var(--bb-text);
  font: inherit;
  font-size: var(--bm-t-fest);
  line-height: var(--bm-zh-kompakt);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-sammlung__marke:hover { background: color-mix(in srgb, var(--bb-text) 6%, transparent); }
.bb-m-sammlung__alle {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bb-text-ruhig);
  font: inherit;
  font-size: var(--bm-t-fest);
  text-decoration: underline;
  text-decoration-color: var(--bb-linie-feld);
  text-underline-offset: 0.3em;
  cursor: pointer;
  transition: color var(--bm-dauer-kurz) var(--bm-ease), text-decoration-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-sammlung__alle:hover { color: var(--bb-text); text-decoration-color: currentColor; }

/* Band: Abstand zur Steuerung wie der Seitenkopf unten (56 → 120 px). */
.bb-m-sammlung__band {
  position: relative;
  isolation: isolate;
  margin-top: clamp(3.5rem, 8vw, 7.5rem);
  padding-bottom: var(--bb-sektion-abstand);
  color: var(--bb-text);
}
.bb-m-sammlung__band::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 6.25rem;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--bb-grund);
}
.bb-m-sammlung__hinweis {
  margin-top: clamp(3.5rem, 8vw, 7.5rem);
  padding-bottom: var(--bb-sektion-abstand);
}
.bb-m-sammlung__hinweis p { margin: 0 0 1.5rem; }

@supports not (view-transition-name: none) {
  @keyframes bb-m-sammlung-blende { from { opacity: 0; } to { opacity: 1; } }
  .bb-m-sammlung__inhalt { animation: bb-m-sammlung-blende var(--bm-dauer) var(--bm-ease); }
}

/* Liste. Präsentation: 12er-Raster ab 768 px, Breite je Platz (Arbeiten.tsx). */
.bb-m-sammlung__arbeiten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-arbeiten-luecke);           /* 20 mobil → 32 */
  align-items: start;                       /* Paare oben bündig, Texte versetzt */
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .bb-m-sammlung__arbeiten--praesentation {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: calc(var(--bm-arbeiten-luecke) * 1.25);
  }
  .bb-m-sammlung__platz[data-spanne="12"] { grid-column: span 12; }
  .bb-m-sammlung__platz[data-spanne="7"] { grid-column: span 7; }
  .bb-m-sammlung__platz[data-spanne="5"] { grid-column: span 5; }
  .bb-m-sammlung__platz[data-spanne="4"] { grid-column: span 4; }
}
/* Raster: gleiche Karten, 1/2/3/4 Spalten. */
.bb-m-sammlung__arbeiten--raster { row-gap: calc(var(--bm-arbeiten-luecke) * 1.25); }
@media (min-width: 640px) {
  .bb-m-sammlung__arbeiten--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bb-m-sammlung__arbeiten--raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .bb-m-sammlung__arbeiten--raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bb-m-sammlung__arbeit {
  display: block;
  color: inherit;
  text-decoration: none;
}
.bb-m-sammlung__arbeit:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bb-fokus);
  outline-offset: 0.25rem;
}
.bb-m-sammlung__arbeit-rahmen {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: var(--bm-radius);
  background: color-mix(in srgb, var(--bb-text) 6%, transparent); /* Platz, solange das Bild lädt */
}
.bb-m-sammlung__arbeit--highlight .bb-m-sammlung__arbeit-rahmen { aspect-ratio: 16 / 9; }
.bb-m-sammlung__arbeit-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kartenvideo über dem Poster: unsichtbar, bis es läuft (kartenvideos.ts). */
.bb-m-sammlung__arbeit-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--bm-dauer) var(--bm-ease);
}
.bb-m-sammlung__arbeit-video[data-laeuft] { opacity: 1; }
.bb-m-sammlung__arbeit-text {
  display: block;
  margin-top: 0.75rem;
}
.bb-m-sammlung__arbeiten--raster .bb-m-sammlung__arbeit-text { margin-top: 0.625rem; }
.bb-m-sammlung__arbeit-titel,
.bb-m-sammlung__arbeit-kunde {
  display: block;
  margin: 0;
  font-family: var(--bm-font);
  font-size: var(--bm-t-fest);
  line-height: 1.35;
  letter-spacing: normal;
}
.bb-m-sammlung__arbeit-titel {
  font-weight: var(--bm-g-mittel);
  color: var(--bb-text);
}
.bb-m-sammlung__arbeit-kunde {
  font-weight: var(--bm-g-normal);
  color: var(--bb-text-ruhig);
}
/* Raster: Branche unter dem Kunden (Builder .case-card__industry). */
.bb-m-sammlung__arbeit-branche {
  display: block;
  margin-top: 0.25rem;
  color: var(--bb-text-ruhig);
  font-size: var(--bm-t-mini);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
/* Hover nach Vorbild: Rahmen schrumpft auf 0,95, das Medium darin zoomt auf
   1,1 (Raster dezenter: 0,97 / 1,05). Langsame Standardkurve. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bb-m-sammlung__arbeit-rahmen,
  .bb-m-sammlung__arbeit-bild {
    backface-visibility: hidden;
    transition: transform var(--bm-dauer-langsam) var(--bm-ease);
  }
  .bb-m-sammlung__arbeit:is(:hover, :focus-visible) .bb-m-sammlung__arbeit-rahmen { transform: scale(0.95); }
  .bb-m-sammlung__arbeit:is(:hover, :focus-visible) .bb-m-sammlung__arbeit-bild { transform: scale(1.1); }
  .bb-m-sammlung__arbeiten--raster .bb-m-sammlung__arbeit:is(:hover, :focus-visible) .bb-m-sammlung__arbeit-rahmen { transform: scale(0.97); }
  .bb-m-sammlung__arbeiten--raster .bb-m-sammlung__arbeit:is(:hover, :focus-visible) .bb-m-sammlung__arbeit-bild { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-m-sammlung__filter-feld,
  .bb-m-sammlung__inhalt { animation: none; }
  .bb-m-sammlung :is(.bb-m-sammlung__filter-knopf, .bb-m-sammlung__filter-pfeil, .bb-m-sammlung__chip, .bb-m-sammlung__karte-pfeil, .bb-m-sammlung__karte-bild > img, .bb-m-sammlung__marke, .bb-m-sammlung__alle, .bb-m-sammlung__wahl select, .bb-m-sammlung__suche-feld, .bb-m-sammlung__ansicht-wahl, .bb-m-sammlung__videos, .bb-m-sammlung__arbeit-video),
  .bb-m-sammlung__karte-link::after { transition: none; }
  .bb-m-sammlung__karte-link:is(:hover, :focus-visible) :is(.bb-m-sammlung__karte-pfeil, .bb-m-sammlung__karte-bild > img) { transform: none; }
}


/* ══ Hero der Referenzen-Übersicht (Variante hero) ════════════════════════
   Schwarze Bühne, volle Breite, ca. 100 svh (mobil 80 svh) unter der Kopfleiste;
   die Insel referenzen3d füllt [data-ref3d-buehne]. Ohne JS/WebGL: Verlauf. */
.bb-ref-hero {
  position: relative;
  isolation: isolate;
  /* Start in der Höhe der übrigen dunklen Köpfe; der erste Klick rollt die
     Bühne auf volle Höhe aus (data-offen setzt die Insel referenzen3d). */
  --bb-ref-hero-zu: max(calc(78svh - var(--bm-kopf-h)), 32rem);
  --bb-ref-hero-auf: max(calc(100svh - var(--bm-kopf-h)), 32rem);
  height: var(--bb-ref-hero-zu);
  transition: height var(--bm-dauer-langsam) var(--bm-ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--bb-akzent) 16%, transparent), transparent 70%),
    var(--bb-grund);
  color: var(--bb-text);
  overflow: hidden;
}
.bb-ref-hero[data-offen] { height: var(--bb-ref-hero-auf); }
/* Fläche über dem Hero dunkel halten: beim Einfahren der Kopfleiste (Ende der
   erzählten Tour) blitzt sonst der helle Seitengrund als Streifen auf. */
.bb-ref-hero { box-shadow: 0 calc(-2 * var(--bm-kopf-h)) 0 0 var(--bb-grund); }
/* Die Bühne hat immer die volle Höhe und sitzt mittig: Ausrollen ändert nur
   den Ausschnitt, die Szene muss nicht neu skalieren. */
.bb-ref-hero__buehne { position: absolute; left: 0; right: 0; top: 50%; height: var(--bb-ref-hero-auf); translate: 0 -50%; z-index: 0; }
.bb-ref-hero__kopf {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  pointer-events: none;
}
.bb-ref-hero__titel {
  margin: 0;
  font-size: var(--bm-t-fest);
  font-weight: var(--bm-g-normal);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--bb-text-ruhig);
}
/* Pfeil mit Beschriftung „Zur Liste“ darüber; der Kreis trägt den Pfeil. */
.bb-ref-hero__pfeil {
  position: absolute;
  z-index: 2;
  bottom: clamp(1rem, 3vh, 2rem);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  color: var(--bb-text);
  text-decoration: none;
  transition: color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-ref-hero__pfeil-text {
  font-family: var(--bm-font);
  font-size: var(--bm-t-mini);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bb-text-ruhig);
  transition: color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-ref-hero__pfeil svg {
  box-sizing: content-box;
  padding: 0.6875rem;
  border: 1px solid var(--bb-linie-feld);
  border-radius: 50%;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-ref-hero__pfeil:hover { color: var(--bb-akzent); }
.bb-ref-hero__pfeil:hover .bb-ref-hero__pfeil-text { color: var(--bb-text); }
.bb-ref-hero__pfeil:hover svg { border-color: var(--bb-akzent); }
.bb-ref-hero__pfeil:focus-visible { outline: 2px solid var(--bb-akzent); outline-offset: 3px; }
.bb-ref-hero__pfeil svg path { animation: bb-ref-hero-pfeil 2.2s ease-in-out infinite; /* design-check: erlaubt – Dekor-Animation des Pfeils */ }
@keyframes bb-ref-hero-pfeil {
  0%, 100% { transform: translateY(-2px); opacity: 0.7; }
  50% { transform: translateY(4px); opacity: 1; }
}
@media (max-width: 767px) {
  .bb-ref-hero { --bb-ref-hero-zu: max(calc(70svh - var(--bm-kopf-h)), 26rem); --bb-ref-hero-auf: var(--bb-ref-hero-zu); }
}

/* Weiches Scrollen zum Anker der Liste; Ziel liegt unter der Kopfleiste frei. */
#referenzen-liste { scroll-margin-top: calc(var(--bm-kopf-h) + 0.5rem); }
@media (prefers-reduced-motion: no-preference) { html:has(.bb-ref-hero) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .bb-ref-hero__pfeil svg path { animation: none; } .bb-ref-hero { transition: none; } }

/* Fassung 7 (referenzen3d): Akzente leicht in der Kundenfarbe – Pfeil im Hero
   und die Linie gewählter Filter; ohne Kunde unverändert. Nur Linien. */
.bb-ref-hero__pfeil:hover svg { border-color: color-mix(in srgb, var(--kunde-akzent, var(--bb-akzent)) 60%, var(--bb-akzent)); }
.bb-m-sammlung.bb-m-sammlung .bb-m-sammlung__wahl[data-aktiv] select { border-bottom-color: color-mix(in srgb, var(--kunde-akzent, var(--bb-akzent)) 45%, var(--bb-akzent)); }
.bb-m-sammlung__suche-feld:focus-visible { border-bottom-color: color-mix(in srgb, var(--kunde-akzent, var(--bb-text)) 40%, var(--bb-text)); }

/* ── Ergänzungen der Grav-Umsetzung (W2-E) ─────────────────────────────── */
.bb-m-sammlung[hidden], .bb-m-sammlung [hidden] { display: none !important; }
.bm-neu .bm-ki-zeichen { position: absolute; z-index: 1; display: block; height: 11px; width: auto; pointer-events: none; }
.bm-neu .bm-ki-zeichen--ecke { right: 5.5px; bottom: 5.5px; }

/* Kopf fährt beim Scrollen aus → Steuerleiste rückt an die Oberkante, keine Lücke (Alexander 13.10.2026). */
.bb-m-sammlung__steuerung { transition: top var(--bm-kopf-dauer, .3s) var(--bm-kopf-ease, ease); }
.bm-seite:has(header.bm-kopf--versteckt:not(:focus-within)) .bb-m-sammlung__steuerung { top: 0; }