/* Überbrückung bis zur Komponente im Brand System (B-040 Rastergrafik-Library
   und Abspieler): Card mit Rastergrafik als Inhalt. Die Grafik füllt die Card,
   das Format der Card folgt der Grafik.
   <div class="card card--grafik"><figure data-rastergrafik="…">…</figure></div> */
.card--grafik {
  --grafik-cols: 4;
  /* Kontur um die Kuben (Abspieler: bg) in der Farbe der Card */
  --rastergrafik-bg: var(--surface-color-layer-2);
  align-self: start; /* im Spaltenraster nicht auf Zeilenhöhe strecken */
  /* Breite: 4 Spalten des Seitenrasters (wie .note), schmaler Platz begrenzt */
  width: min(100%, calc(var(--grid-col) * var(--grafik-cols) + var(--layout-spacing-container-gap-1x) * (var(--grafik-cols) - 1)));
  padding: 0;
}

/* Neben Text (Text links, Grafik rechts): Grafik bleibt beim Scrollen stehen,
   unter dem Header wie das Sidemenu; erst ab 960px, darunter steht die
   Sidemenu-Leiste sticky unter dem Header */
@media (min-width: 960px) {
  [class*='content-columns-'] > .card--grafik {
    /* sichtbarer Teil des Headers, wie .sidemenu/.sticky-stack (add-styles.css) */
    --header-visible: calc(var(--header-height, 0px) - var(--header-offset, 0px));
    position: sticky;
    top: calc(var(--header-visible) + var(--layout-spacing-container-gap-1x));
  }
}

@media (min-width: 960px) and (hover: none) and (pointer: coarse) {
  [class*='content-columns-'] > .card--grafik {
    --header-visible: var(--header-height, 0px);
    transition: top var(--transition-long);
  }

  html.is-header-hidden [class*='content-columns-'] > .card--grafik {
    --header-visible: 0px;
  }
}

/* Bezeichnung als Tag (ausgestanzt, .tag--light) oben links, im Abstand des
   Card-Paddings; liegt über der Grafik im Fluss, damit sie bei schmaler Card
   nichts verdeckt */
.card--grafik > .card__header {
  padding: var(--layout-spacing-container-padding) var(--layout-spacing-container-padding) 0;
}

.card--grafik > figure {
  width: 100%;
}

/* Der Abspieler begrenzt die Breite inline auf die Rastergröße */
.card--grafik > figure :is(svg, img) {
  display: block;
  width: 100%;
  max-width: none !important;
  height: auto;
}