/* Referenzen-Übersicht (/referenzen) und Case-Kachel – Welle RF-1 (27.09.2026).
   Vorbild red.de/Referenzen in Dunkel: dunkler Grund, ruhige Bilder ohne
   Text im Ruhezustand, schmale Fugen, schlichte Auswahlfelder, Zähler rechts.
   Nur Tokens aus ../design/tokens.css (--bm-*). Inhaltsbreite über die
   Klasse `wrap` des Fundaments (basis.css). Ansichten Liste/Galerie:
   ansichten/ansichten.css. */

/* ── Dunkle Fläche ───────────────────────────────────────────────────────
   Die Seite invertiert die Tokens lokal. Kacheln und Raster tragen selbst
   .bm-neu (dort setzt tokens.css die hellen Werte neu) – deshalb gilt die
   Umkehrung auch für .bm-neu innerhalb von .bm-ref.
   Kontraste auf --bm-flaeche-dunkel: Text weiß 19:1,
   --bm-text-invers-leise ≈ 8:1, Feldkante --bm-glas-kante ≈ 4:1.
   EIN Grundton wie auf den Case-Seiten (P2-G): Bildrahmen und Lade-Skelett
   liegen auf --bm-flaeche-dunkel statt auf der helleren Karte. */
.bm-ref.bm-neu,
.bm-ref .bm-neu {
  --bm-bg: var(--bm-flaeche-dunkel);
  --bm-bg-alt: var(--bm-flaeche-dunkel);
  --bm-kachel: var(--bm-dunkel-erhaben);
  --bm-text: var(--bm-text-invers);
  --bm-text-leise: var(--bm-text-invers-leise);
  --bm-linie: var(--bm-linie-invers);
  --bm-linie-zart: var(--bm-linie-invers);
  color-scheme: dark;
}
.bm-ref.bm-neu {
  background: var(--bm-bg);
  color: var(--bm-text);
  /* Fokusrahmen (P3-I): dunkle Seite → heller Rahmen. Nur an der Fläche
     gesetzt; verschachtelte .bm-neu erben (tokens.css setzt den Schalter
     allein auf :root). */
  --bm-fokus: var(--bm-fokus-auf-dunkel);
  --bm-fokus-gegen: var(--bm-fokus-auf-hell);
}

/* ── Seitenverhältnis Hochformat-Kachel (RF-2, Alexander 27.09.2026) ─────
   Rückmeldung: 9:16 wirkte zu lang, jetzt 3:4. EINE Variable an einer
   Stelle, damit sich das Format mit einer Zeile ändert – bewusst kein
   --bm-*-Name: design-check.mjs verlangt nur für --bm-*-Variablen einen
   bekannten Token, ein eigener Name bleibt frei und ist trotzdem zentral.
   Gilt hier für die Raster-Kachel und ihr Lade-Skelett; weil auf .bm-neu
   (das auch das Referenzen-Modul trägt), liest referenzen-modul.css sie
   ebenso für sein Kachel-Skelett. */
.bm-neu { --karte-hoch-verh: 3 / 4; }

/* ── Seitenkopf ──────────────────────────────────────────────────────────
   Die Seite ist eine dunkle Bühne; sie beginnt unter der deckenden
   Kopfleiste (TY-1, main rückt um --bm-kopf-h ein). */
/* Kopf und Fläche bis zur ersten Arbeit WEISS, ab 100 px unter der Oberkante
   des Highlights dunkel bis zum Ende der Liste (Alexander 29.09.2026, Aufbau
   wie wirdesign.de/arbeiten). Luft 120 px oben und unten (mobil 56); Headline und Subline in unserer Titelschrift bzw. Lead-Stil. */
.bm-ref.bm-neu { background: var(--kern-bg); overflow-x: clip; /* Band in 100vw ohne Querscrollen */ }
.bm-ref .bm-ref-kopf,
.bm-ref .bm-ref-hinweis {
  --bm-bg: var(--kern-bg);
  --bm-text: var(--kern-text);
  --bm-text-leise: var(--kern-text-warm-leise);
  --bm-linie: var(--kern-linie-sand);
  --bm-glas: color-mix(in srgb, var(--kern-text) 6%, transparent);
  --bm-glas-kante: color-mix(in srgb, var(--kern-text) 45%, transparent);
  --bm-fokus: var(--bm-fokus-auf-hell);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
  color-scheme: light;
  color: var(--bm-text);
}
.bm-ref-kopf {
  padding-block: clamp(3.5rem, 8vw, 7.5rem);  /* 56 → 120 (Alexander 29.09.2026: niedriger; vorher 80 → 240) */
}
.bm-ref-titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-weight: var(--bm-g-titel);
  font-synthesis: none;
  font-size: var(--bm-t-riesig);
  line-height: var(--bm-zh-eng);
  letter-spacing: var(--bm-sp-leicht);
  color: var(--bm-text);
}
.bm-ref-satz {
  margin: 1.5rem 0 0;
  max-width: var(--bm-textbreite);
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-text);
  color: var(--bm-text-leise);
}

/* Dunkles Band hinter der Liste, volle Fensterbreite, Beginn 100 px unter der
   Oberkante der ersten Arbeit. */
.bm-ref-flaeche {
  position: relative;
  isolation: isolate;
}
.bm-ref-flaeche::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 6.25rem;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--bm-flaeche-dunkel);
}
.bm-ref-ende { background: var(--bm-flaeche-dunkel); }

/* ── Steuerung: Auswahlfelder links, Zähler + Ansicht rechts ───────────── */
.bm-ref-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.bm-ref-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
  min-width: 0;
}
.bm-ref-auswahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 13rem;
}
/* Mehrfachklassen: basis.css gestaltet freie Selects als helle Pille mit
   dunklem Daten-URI-Pfeil – hier schlichte Linie auf Dunkel, eigener Pfeil. */
.bm-neu.bm-neu.bm-ref .bm-ref-auswahl select {
  width: 100%;
  height: 2.75rem;
  min-height: 0;
  padding: 0 2rem 0 0;
  border: 0;
  border-bottom: 1px solid var(--bm-glas-kante);
  border-radius: 0;
  background: transparent;
  background-image: none;
  color: var(--bm-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);
}
.bm-neu.bm-neu.bm-ref .bm-ref-auswahl select:hover { border-bottom-color: var(--bm-text); }
.bm-neu.bm-neu.bm-ref .bm-ref-auswahl select:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 4px);
}
.bm-ref-auswahl option { background: var(--bm-bg); color: var(--bm-text); }
.bm-ref-auswahl-pfeil {
  position: absolute;
  right: 0.25rem;
  pointer-events: none;
  color: var(--bm-text-leise);
}
/* Gewählter Filter: Linie und Pfeil in der Signalfarbe für Dunkel. */
.bm-neu.bm-neu.bm-ref .bm-ref-auswahl[data-aktiv] select { border-bottom-color: var(--bm-signal-licht); }
.bm-ref-auswahl[data-aktiv] .bm-ref-auswahl-pfeil { color: var(--bm-signal-licht); }

/* Aktive Filter als Marken (Name des Werts, Klick entfernt), daneben
   „Alle Projekte zeigen". Tippfläche 44 px. */
.bm-ref-aktiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
}
.bm-ref-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bm-ref-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.625em;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--bm-signal-licht);
  border-radius: var(--bm-radius-pille);
  background: transparent;
  color: var(--bm-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);
}
.bm-ref-marke:hover { background: var(--bm-glas); }
.bm-ref-alle {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bm-text-leise);
  font: inherit;
  font-size: var(--bm-t-fest);
  text-decoration: underline;
  text-decoration-color: var(--bm-glas-kante);
  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);
}
.bm-ref-alle:hover { color: var(--bm-text); text-decoration-color: currentColor; }
.bm-ref-marke:focus-visible,
.bm-ref-alle:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }

.bm-ref-rechts {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
}
/* Reihenfolge (Anmerkung c0726fa3): steht bei Zähler und Ansicht, weil sie
   ordnet und nicht filtert; schmaler als die Filterfelder. */
.bm-ref-rechts .bm-ref-auswahl { min-width: 11rem; }
.bm-ref-zaehler {
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-fest);
  font-variant-numeric: tabular-nums;
  color: var(--bm-text-leise);
  white-space: nowrap;
}

/* Schaltgruppe der Ansichten: drei Symbolknöpfe, gewählt = hell hinterlegt. */
.bm-ref-schalter {
  display: inline-flex;
  gap: 0.25rem;
}
.bm-ref-schalter button {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--bm-radius-pille);
  background: transparent;
  color: var(--bm-text-leise);
  cursor: pointer;
  transition: color var(--bm-dauer-kurz) var(--bm-ease), border-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-ref-schalter button:hover { color: var(--bm-text); }
.bm-ref-schalter button[aria-pressed='true'] {
  border-color: var(--bm-glas-kante);
  color: var(--bm-text);
}
.bm-ref-schalter button:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }

@media (max-width: 767px) {
  .bm-ref-steuerung { flex-direction: column; align-items: stretch; }
  .bm-ref-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .bm-ref-auswahl { min-width: 0; }
  .bm-ref-rechts { flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; margin-left: 0; }
  .bm-ref-rechts .bm-ref-auswahl { flex: 1 1 100%; min-width: 0; }
}
/* 768–1199: Reihenfolge, Zähler und Ansicht stehen immer in eigener Zeile.
   Sonst passte die Zeile vor dem Laden und brach erst um, sobald Zähler und
   längere Branchennamen da waren (Layoutsprung 0,056 bei 1024, an-c0726fa3). */
@media (min-width: 768px) and (max-width: 1199px) {
  .bm-ref-rechts { flex-basis: 100%; justify-content: flex-end; }
}

/* ── Raster ─────────────────────────────────────────────────────────────
   Quer (Standard, Detail/Start): 1 → 2 → 3 Spalten. Hoch (9:16, /referenzen
   und Referenzen-Modul): 2 → 3 → 4 Spalten. Schmale Fuge --bm-luecke. */
.bm-raster {
  display: grid;
  background: transparent;
  /* minmax(0, …): die einzeilige Kundenzeile (nowrap) darf die Spalte nicht
     über den Wrapper hinaus dehnen (P1-G, 390 px: Kachel lief rechts aus dem
     Bild, KI-Kennzeichen außerhalb des Fensters). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bm-luecke);
}
.bm-raster.bm-neu { background: transparent; }
@media (min-width: 768px) {
  .bm-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bm-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-raster.bm-raster-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bm-raster.bm-raster-hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .bm-raster.bm-raster-hoch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .bm-raster.bm-raster-hoch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Das Raster richtet sich nach der Zahl der Karten (P2-G): zwei Karten
   stehen zweispaltig, statt ein Drittel der Breite leer zu lassen –
   Referenzen-Modul (Startseite, `max: 2`) und „Weitere Projekte". Die
   Selektoren sind bewusst schwerer als die Spurenregel des Moduls
   (referenzen-modul.css, data-spalten). Nicht in der Übersicht: dort ist die
   Zahl ein Filterergebnis, die Kachelgröße bleibt gleich. Mobil unverändert
   (eine Spalte bzw. wischbares Band). Ab 1200 stünden zwei Hochformate 3:4
   je rund 900 px hoch (höher als das Fenster) – dort sind sie quadratisch. */
@media (min-width: 768px) {
  .bm-raster.bm-raster[data-anzahl='2']:not(.bm-ref .bm-raster) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  /* Am Rahmen selbst: die Kachel trägt .bm-neu und setzt --karte-hoch-verh neu. */
  .bm-raster.bm-raster-hoch[data-anzahl='2']:not(.bm-ref .bm-raster) .bm-karte-rahmen { aspect-ratio: 1 / 1; }
}

/* ── Kachel ─────────────────────────────────────────────────────────────
   Im Ruhezustand nur das Bild. Kunde und Titel: eine ruhige Zeile unten,
   klein und in normalem Gewicht, über einem Verlauf, der nur so dicht ist
   wie für die Lesbarkeit nötig: bis zur Kundenzeile mindestens --bm-schleier-stark
   (auch über weißem Bild ≥ 4,5:1 für die leise Kundenzeile), darüber aus. */
.bm-karte.bm-neu {
  position: relative;
  display: block;
  min-width: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  box-shadow: none;
  transition: transform var(--bm-dauer) var(--bm-ease), box-shadow var(--bm-dauer) var(--bm-ease);
}
/* Hover/Fokus (RF-2, Alexander 27.09.2026): leichtes Anheben + weicher
   Schatten aus den Schatten-Tokens; Bild und Titelzeile ziehen unten mit.
   -4px/1,03 wie die website-weite Bewegungs-Schicht (--bm-bewegung-heben/
   -zoom, site/design/bewegung.css, PL-1) – als Zahl übernommen statt per
   var(): die Datei ist nicht Teil der Token-Quellen von design-check.mjs
   (nur tokens.css/kern.css/basis.css/portal.css), ein Verweis würde dort als
   unbekanntes Token gelten. --bm-schatten-karte ist ein echtes Token. */
.bm-karte.bm-neu:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--bm-schatten-karte);
}
.bm-karte-rahmen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bm-radius);
  background: var(--bm-bg-alt);
}
.bm-karte-hoch .bm-karte-rahmen { aspect-ratio: var(--karte-hoch-verh); }
.bm-karte-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--bm-radius);
  transform: scale(1);
  transition: transform var(--bm-dauer) var(--bm-ease);
}
.bm-karte.bm-neu:is(:hover, :focus-visible) .bm-karte-bild { transform: scale(1.03); }
.bm-karte-text {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 3.5rem clamp(0.875rem, 1.4vw, 1.25rem) clamp(0.875rem, 1.2vw, 1.125rem);
  background: linear-gradient(to top, var(--bm-schleier-dicht), var(--bm-schleier-stark) 50%, transparent);
  color: var(--bm-text-invers);
  opacity: 0;
  transition: opacity var(--bm-dauer) var(--bm-ease);
}
/* Doppelte Klassen: Aufrufer (z. B. Startseite) setzen eigene Titelgrößen –
   die Kachel-Typo bleibt überall klein und ruhig. */
.bm-karte.bm-karte .bm-karte-text .bm-karte-kunde,
.bm-karte.bm-karte .bm-karte-text .bm-karte-titel {
  margin: 0;
  font-family: var(--bm-font);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: normal;
  transform: translateY(0.375rem);
  transition: transform var(--bm-dauer) var(--bm-ease);
}
.bm-karte.bm-karte .bm-karte-text .bm-karte-kunde {
  overflow: hidden;
  font-size: var(--bm-t-klein);
  color: var(--bm-text-invers-leise);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bm-karte.bm-karte .bm-karte-text .bm-karte-titel {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--bm-t-fest);
  color: var(--bm-text-invers);
}

.bm-karte:hover .bm-karte-text,
.bm-karte:focus-visible .bm-karte-text { opacity: 1; }
.bm-karte.bm-karte:is(:hover, :focus-visible) .bm-karte-text :is(.bm-karte-kunde, .bm-karte-titel) { transform: none; }
/* Fokusrahmen der Kachel (P3-I): INNEN und zweifarbig. Die Kachel sitzt in
   Bändern und Rastern bündig an der Kante von Behältern mit overflow
   (Referenzen-Modul, Startseite mobil) – ein Rahmen außen wird dort gekappt.
   Innen liegt er über dem Bild, dessen Helligkeit niemand kennt: deshalb
   zwei Ringe, außen die Fokusfarbe der Fläche, innen ihre Gegenfarbe. Einer
   von beiden hat zu jedem Bildpunkt mindestens 3:1 (Hell zu Dunkel 19:1).
   Beide Ringe zeichnet ::after (liegt über dem Bild): Der Umriss des Links
   selbst wird vom positionierten Bildrahmen überdeckt; er bleibt für den
   Modus mit erzwungenen Farben und für die Textzeile unter dem Bild (Touch).
   Doppelte Klasse: die Kachel behält ihren Rahmen auch dort, wo eine Seite
   allen Zielen einen eigenen Umriss gibt (z. B. `.bm-start :focus-visible`). */
.bm-karte.bm-neu:focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz-innen);
}
.bm-karte.bm-neu:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline: var(--bm-fokus-breite) solid var(--bm-fokus-gegen);
  outline-offset: calc(-2 * var(--bm-fokus-breite));
  pointer-events: none;
}

/* Touch (kein Hover): Kunde und Titel stehen klein UNTER dem Bild, in der
   Textfarbe der umgebenden Fläche (hell wie dunkel). */
@media (hover: none) {
  .bm-karte-text {
    position: static;
    padding: 0.625rem 0 0;
    background: none;
    color: inherit;
    opacity: 1;
  }
  .bm-karte.bm-karte .bm-karte-text :is(.bm-karte-kunde, .bm-karte-titel) { transform: none; color: inherit; }
  .bm-karte.bm-karte .bm-karte-text .bm-karte-kunde { color: color-mix(in srgb, currentColor 64%, transparent); }
  .bm-raster { row-gap: calc(var(--bm-luecke) * 2.5); }
}

/* ── Zustände ───────────────────────────────────────────────────────────── */
.bm-ref-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--bm-knopf-hoehe);
  padding-inline: 2.25rem;
  border: 1px solid var(--bm-text);
  border-radius: var(--bm-radius-pille);
  background: transparent;
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-body);
  font-weight: var(--bm-g-normal);
  cursor: pointer;
  transition: background-color var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease);
}
.bm-ref-knopf:hover { background: var(--bm-text); color: var(--bm-bg); }
.bm-ref-knopf:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 3px); }

.bm-ref-hinweis {
  padding-block: 0 var(--bm-sektion);
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-text);
  color: var(--bm-text-leise);
}
.bm-ref-hinweis p { margin: 0 0 1.5rem; }
.bm-ref-ende { padding-bottom: var(--bm-sektion); }

/* Lade-Puls (Keyframe bm-skelett-puls) zentral in ../design/basis.css. */
/* Auf dem Grundton trägt eine feine Linie die Form (Fläche = Grund). */
.bm-skelett {
  aspect-ratio: var(--karte-hoch-verh);
  background: var(--bm-bg-alt);
  box-shadow: inset 0 0 0 1px var(--bm-linie);
}

/* ── Übergang Ansicht/Filterwechsel (RF-2) ───────────────────────────────
   Uebersicht.tsx wrappt den Setzstand-Wechsel in document.startViewTransition
   (per Feature-Erkennung, nie bei prefers-reduced-motion; eigene Mechanik,
   weil das keine Routennavigation ist – regie.tsx/useSeitenblende fängt nur
   Klicks auf interne <a>-Links ab). Dauer/Kurve für ::view-transition-*(root)
   stehen schon zentral in site/design/bewegung.css (Abschnitt 2, PL-1),
   hier nicht doppelt gesetzt. Ohne die API (kein Träger) übernimmt
   .bm-ref-inhalt per @supports-Gegenprobe eine einfache Blende – der Inhalt
   bekommt dafür bei jedem Wechsel einen neuen `key` (Uebersicht.tsx).
   Das Staffel-Einblenden der Kacheln selbst (höchstens 16 px) kommt aus
   derselben Bewegungs-Schicht (--bm-bewegung-versatz, Reveal aus
   @/lib/motion, s. Karte.tsx) – hier keine eigene Kappung nötig. */
@supports not (view-transition-name: none) {
  @keyframes bm-ref-blende { from { opacity: 0; } to { opacity: 1; } }
  .bm-ref-inhalt { animation: bm-ref-blende var(--bm-dauer) var(--bm-ease); }
}

@media (prefers-reduced-motion: reduce) {
  .bm-karte-text,
  .bm-karte.bm-neu,
  .bm-karte-bild,
  .bm-neu.bm-neu.bm-ref .bm-ref-auswahl select,
  .bm-ref-schalter button,
  .bm-ref-marke,
  .bm-ref-alle,
  .bm-ref-knopf { transition: none; }
  .bm-karte.bm-neu:is(:hover, :focus-visible) { transform: none; box-shadow: none; }
  .bm-karte.bm-neu:is(:hover, :focus-visible) .bm-karte-bild { transform: none; }
  .bm-karte.bm-karte .bm-karte-text :is(.bm-karte-kunde, .bm-karte-titel) { transition: none; transform: none; }
  .bm-skelett { animation: none; }
  .bm-ref-inhalt { animation: none; }
}