/* Hub hero with a honeycomb of photographs (Die DGM draft tree, module "hubhero"). Page-scoped, not the CDN.
   Acts only where a hub hero (Event hero, section.dgm-feh) is followed DIRECTLY by a core "Bilder" element (CType image,
   .frame-type-image): that element is the photo pool. Nothing else on any page is touched.
   - The hero gets slimmer (an introduction, 540-576 px at 1440), the glass card under the key visual becomes a quiet fact row
     under the buttons (icon, label, value; same words), the hero's own key visual is not used (leave it empty).
   - The pool element is pulled up into the hero: its first seven pictures are the honeycomb (flat-top flower at the right on
     large screens, two rows under the fact row on smaller ones). This works without JavaScript (static honeycomb).
   - hubhero.js switches one tile to another pool picture every 2-3 s, adds the drift, the tilt toward the mouse and a pause
     button. Pictures 8 and later stay hidden and unloaded until they are faded in.
   The pool element needs one column per row ("Spalten" 1) or 2, 3, 4: the tile order below covers those four layouts. */

:is(#crm__widgets > section.dgm-feh:has(+ div.frame-type-image), #crm__widgets > section.dgm-feh + div.frame-type-image) {
  --hh-sky-rgb: 127 216 245;
  --hh-ink-rgb: 0 33 44;
  --hh-hex-flat: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --hh-hex-pointy: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hh-shade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6' preserveAspectRatio='none'%3E%3Cpath d='M25 0h50l25 43.3-25 43.3H25L0 43.3z' fill='%23001017'/%3E%3C/svg%3E");
  --hh-shade-pointy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100' preserveAspectRatio='none'%3E%3Cpath d='M43.3 0l43.3 25v50L43.3 100 0 75V25z' fill='%23001017'/%3E%3C/svg%3E");
  --hh-g: 8px;
  /* phones and tablets: two rows of pointy-top tiles (4 + 3) under the fact row */
  --hh-r: clamp(34px, (100vw - 48px - 3 * var(--hh-g)) / 7.6, 56px);
  --hh-tw: calc(1.732 * var(--hh-r));
  --hh-th: calc(2 * var(--hh-r));
  --hh-cw: calc(4 * var(--hh-tw) + 3.5 * var(--hh-g));
  --hh-ch: calc(3.5 * var(--hh-r) + .866 * var(--hh-g));
  --hh-bottom: 46px;
}
@media (min-width: 1024px) {
  :is(#crm__widgets > section.dgm-feh:has(+ div.frame-type-image), #crm__widgets > section.dgm-feh + div.frame-type-image) {
    /* the hero: an introduction, not a stage */
    --hh-h: clamp(552px, 64vh, 576px);
    --hh-top: 92px;
    /* the flower: seven flat-top tiles, circumradius r */
    --hh-r: clamp(62px, (var(--hh-h) - var(--hh-top) - 56px - 2 * var(--hh-g)) / 5.196, 82px);
    --hh-tw: calc(2 * var(--hh-r));
    --hh-th: calc(1.732 * var(--hh-r));
    --hh-ix: calc(1.5 * var(--hh-r) + .866 * var(--hh-g));
    --hh-iy: calc(1.732 * var(--hh-r) + var(--hh-g));
    --hh-cw: calc(var(--hh-tw) + 2 * var(--hh-ix));
    --hh-ch: calc(var(--hh-th) + 2 * var(--hh-iy));
    /* the flower's middle a little below the hero's middle (the header lies over the top), clear of the sibling bar */
    --hh-bottom: calc(var(--hh-h) / 2 - 20px - var(--hh-ch) / 2);
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* the hamburger header: the hero has 72 px of top padding of its own and the text wraps more */
  :is(#crm__widgets > section.dgm-feh:has(+ div.frame-type-image), #crm__widgets > section.dgm-feh + div.frame-type-image) { --hh-h: 620px; --hh-r: clamp(60px, (100vw - 640px) / 5.4 + 52px, 74px); }
}

/* ===== The hero ===== */
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__scroll { display: none; }
/* icons keep one box size before and after the icon font arrives (the honeycomb below must not move then) */
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is(.dgm-feh__button, .grid) i { display: inline-block; height: 1em; line-height: 1; overflow: visible; }
@media (min-width: 1024px) {
  /* a fixed height and the text from a fixed top (centred for its usual height of about 400 px): when the web font arrives
     and the lead loses a line, neither the hero nor the honeycomb moves */
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) { height: var(--hh-h); min-height: 0; max-height: none; }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__content { align-items: flex-start; padding-top: calc(var(--hh-top) + max(0px, (var(--hh-h) - var(--hh-top) - 436px) / 2)); padding-bottom: 36px; }
  /* the text keeps its column; the honeycomb lies over the right part (the pool element) */
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__content > .grid { row-gap: 26px; }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__content > .grid > [data-parallax="text"] { grid-column: 1 / span 7; grid-row: 1; }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__content > .grid > [data-parallax="logo"] > * { grid-column: 1 / span 7; grid-row: 2; }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) [data-parallax="text"] > div.mt-4 { margin-top: 20px; }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) [data-parallax="text"] > div.flex { margin-top: 30px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__content { padding-top: 28px; }
}
@media (max-width: 639.98px) {
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > :is(p, div) { font-size: .8125rem; }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div { gap: 8px; }
}
@media (max-width: 413.98px) {
  /* narrow phones: each fact keeps room for two lines, so it does not grow when the web font replaces the fallback */
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div { min-height: 48px; }
}
@media (max-width: 1023.98px) {
  /* room for the two rows of tiles at the foot of the hero */
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) { padding-bottom: calc(var(--hh-ch) + var(--hh-bottom)); }
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) .dgm-feh__content > .grid { row-gap: 22px; }
}

/* the glass card becomes a fact row under the buttons: icon, label, value (the same words, a colon between) */
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) [data-parallax="logo"] { display: contents; }
/* hubhero.js moves the card into the text column (so it fades in and moves with the text, which the hero script animates);
   until then it is kept invisible in its grid place, which has the same height and gap: nothing moves when it is moved */
@media (scripting: enabled) {
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) [data-parallax="logo"] > div:has(> .grid) { opacity: 0; }
}
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) {
  width: auto; max-width: none; margin: 0; overflow: visible; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > div:not(.grid) { display: none; }
/* in the text column (moved there by hubhero.js): the same gap as the grid row it came from */
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) [data-parallax="text"] > div:has(> .grid) { margin-top: 22px; }
@media (min-width: 1024px) {
  #crm__widgets > section.dgm-feh:has(+ div.frame-type-image) [data-parallax="text"] > div:has(> .grid) { margin-top: 26px; }
}
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid { display: flex; flex-wrap: wrap; gap: 8px 28px; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div { align-items: baseline; gap: 10px; padding: 0; border: 0; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > i { flex: none; width: 18px; color: rgb(var(--hh-sky-rgb)); font-size: 14px; text-align: center; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div { display: block; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > :is(p, div) { display: inline; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > div > p { display: inline; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > p,
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > div {
  margin: 0; color: rgb(255 255 255 / .86); font: 600 .9375rem/1.5 Theme-Font, Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none;
}
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > p { color: rgb(255 255 255 / .66); font-weight: 500; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid > div > div > p::after { content: ": "; }
#crm__widgets > section.dgm-feh:has(+ div.frame-type-image) :is([data-parallax="logo"], [data-parallax="text"]) > div:has(> .grid) > .grid p { margin: 0; }

/* the sibling bar keeps its place half over the hero's lower edge (about.css says so for "directly after the hero") */
#crm__widgets > section.dgm-feh + div.frame-type-image + .frame-type-menu_subpages { margin-top: -30px; }

/* ===== The pool element: the honeycomb ===== */
#crm__widgets > section.dgm-feh + div.frame-type-image {
  position: relative;
  z-index: 11;
  box-sizing: border-box;
  width: min(1280px, 100%);
  height: var(--hh-ch);
  margin: calc(-1 * (var(--hh-ch) + var(--hh-bottom))) auto var(--hh-bottom);
  padding: 0 24px;
  pointer-events: none;
}
#crm__widgets > section.dgm-feh + div.frame-type-image > header { display: none; }
#crm__widgets > section.dgm-feh + div.frame-type-image .ce-image {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--hh-cw);
  height: var(--hh-ch);
  margin: 0;
  overflow: visible;
  translate: -50% 0;
  transform: perspective(1200px) rotateX(calc(var(--hh-ty, 0) * -5deg)) rotateY(calc(var(--hh-tx, 0) * 7deg));
  transform-style: flat;
}
@media (min-width: 1024px) {
  #crm__widgets > section.dgm-feh + div.frame-type-image .ce-image { left: auto; right: 24px; translate: none; }
}
/* the soft sky glow behind the honeycomb */
#crm__widgets > section.dgm-feh + div.frame-type-image .ce-image::before {
  content: ""; position: absolute; z-index: -2; inset: 12% 10%; border-radius: 50%; background: rgb(var(--hh-sky-rgb) / .16); filter: blur(56px); pointer-events: none;
}
#crm__widgets > section.dgm-feh + div.frame-type-image :is(.ce-gallery, .ce-outer, .ce-inner, .ce-row, .ce-column) {
  display: contents; float: none; margin: 0; padding: 0; width: auto; position: static;
}
#crm__widgets > section.dgm-feh + div.frame-type-image figure {
  position: absolute;
  display: none;
  left: calc(var(--hh-cw) / 2 - var(--hh-tw) / 2 + var(--q, 0) * var(--hh-ix, 0px) + var(--px, 0px));
  top: calc(var(--hh-ch) / 2 - var(--hh-th) / 2 + var(--v, 0) * var(--hh-iy, 0px) + var(--py, 0px));
  width: var(--hh-tw);
  height: var(--hh-th);
  margin: 0;
  translate: var(--hh-dx, 0px) var(--hh-dy, 0px);
}
/* the first seven pictures are the tiles (slots t1-t7, found by the gallery's own rows and columns) */
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(1)) > figure,
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(1) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(2), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(2)) > figure,
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(3), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(3)) > figure,
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(4) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(2) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(4)) > figure,
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(5) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(2), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(1)) > figure,
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(6) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(3) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(3), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(2)) > figure,
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(7) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(4) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(3)) > figure { display: block; }
/* the glass edge (white 28 % hexagon behind the picture) and the shadow under each tile */
#crm__widgets > section.dgm-feh + div.frame-type-image figure::before { content: ""; position: absolute; inset: 0; clip-path: var(--hh-hex); background: rgb(255 255 255 / .28); }
#crm__widgets > section.dgm-feh + div.frame-type-image figure::after {
  content: ""; position: absolute; z-index: -1; inset: 6% 4% -3%; background: var(--hh-shade) center / 100% 100% no-repeat; opacity: .55; filter: blur(12px); translate: 0 12px;
}
#crm__widgets > section.dgm-feh + div.frame-type-image figure img {
  position: absolute; inset: 1.5px; display: block; width: calc(100% - 3px); height: calc(100% - 3px); max-width: none;
  object-fit: cover; object-position: 50% 40%; clip-path: var(--hh-hex); background: rgb(var(--hh-ink-rgb) / .6);
}
/* a picture fading in over the one it replaces (hubhero.js) */
#crm__widgets > section.dgm-feh + div.frame-type-image figure img.hh-next { opacity: 0; transition: opacity 1.4s cubic-bezier(.45, 0, .25, 1); }
#crm__widgets > section.dgm-feh + div.frame-type-image figure img.hh-next.is-in { opacity: 1; }

/* tile shapes and places. Small screens: pointy-top, row 1 = tiles 1-4, row 2 = tiles 5-7 (half a tile to the right) */
#crm__widgets > section.dgm-feh + div.frame-type-image { --hh-hex: var(--hh-hex-pointy); }
#crm__widgets > section.dgm-feh + div.frame-type-image figure::after { background-image: var(--hh-shade-pointy); }
#crm__widgets > section.dgm-feh + div.frame-type-image figure { left: var(--px); top: var(--py); }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(1)) > figure { --px: 0px; --py: 0px; }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(1) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(2), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(2)) > figure { --px: calc(var(--hh-tw) + var(--hh-g)); --py: 0px; }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(3), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(3)) > figure { --px: calc(2 * (var(--hh-tw) + var(--hh-g))); --py: 0px; }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(4) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(2) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(4)) > figure { --px: calc(3 * (var(--hh-tw) + var(--hh-g))); --py: 0px; }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(5) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(2), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(1)) > figure { --px: calc(.5 * (var(--hh-tw) + var(--hh-g))); --py: calc(1.5 * var(--hh-r) + .866 * var(--hh-g)); }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(6) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(3) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(3), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(2)) > figure { --px: calc(1.5 * (var(--hh-tw) + var(--hh-g))); --py: calc(1.5 * var(--hh-r) + .866 * var(--hh-g)); }
#crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(7) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(4) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(3)) > figure { --px: calc(2.5 * (var(--hh-tw) + var(--hh-g))); --py: calc(1.5 * var(--hh-r) + .866 * var(--hh-g)); }
/* large screens: a flower of flat-top tiles, 1 in the middle, 2-7 around it clockwise from the upper left */
@media (min-width: 1024px) {
  #crm__widgets > section.dgm-feh + div.frame-type-image { --hh-hex: var(--hh-hex-flat); }
  #crm__widgets > section.dgm-feh + div.frame-type-image figure::after { background-image: var(--hh-shade); }
  #crm__widgets > section.dgm-feh + div.frame-type-image figure {
    left: calc(var(--hh-cw) / 2 - var(--hh-tw) / 2 + var(--q) * var(--hh-ix));
    top: calc(var(--hh-ch) / 2 - var(--hh-th) / 2 + var(--v) * var(--hh-iy));
  }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(1)) > figure { --q: 0; --v: 0; }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(1) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(2), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(2)) > figure { --q: -1; --v: -.5; }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(1) > .ce-column:nth-child(3), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(3)) > figure { --q: 0; --v: -1; }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(4) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(2) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(1) > .ce-column:nth-child(4)) > figure { --q: 1; --v: -.5; }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(5) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(2), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(1)) > figure { --q: 1; --v: .5; }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(6) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(3) > .ce-column:nth-child(2), [data-ce-columns="3"] .ce-row:nth-child(2) > .ce-column:nth-child(3), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(2)) > figure { --q: 0; --v: 1; }
  #crm__widgets > section.dgm-feh + div.frame-type-image :is([data-ce-columns="1"] .ce-row:nth-child(7) > .ce-column:nth-child(1), [data-ce-columns="2"] .ce-row:nth-child(4) > .ce-column:nth-child(1), [data-ce-columns="3"] .ce-row:nth-child(3) > .ce-column:nth-child(1), [data-ce-columns="4"] .ce-row:nth-child(2) > .ce-column:nth-child(3)) > figure { --q: -1; --v: .5; }
}

/* the pause button at the foot of the honeycomb (hubhero.js) */
#crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause {
  position: absolute; z-index: 2; right: 6px; bottom: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; background: rgb(var(--hh-ink-rgb) / .55); color: #fff; cursor: pointer;
  pointer-events: auto; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: .7; transition: opacity .2s, background-color .2s;
}
#crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause:hover { opacity: 1; background: rgb(var(--hh-ink-rgb) / .8); }
#crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
#crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause svg { width: 12px; height: 12px; }
#crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause[aria-pressed="true"] .hh-stop,
#crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause:not([aria-pressed="true"]) .hh-play { display: none; }

@media (prefers-reduced-motion: reduce) {
  #crm__widgets > section.dgm-feh + div.frame-type-image .ce-image { transform: none !important; }
  #crm__widgets > section.dgm-feh + div.frame-type-image figure { translate: none !important; }
  #crm__widgets > section.dgm-feh + div.frame-type-image .hh-pause { display: none; }
}