/* Die DGM: intro hero, version 2 (compact stage with honeycomb and chapter list). Page-scoped stylesheet, loaded by the
   TypoScript template of the page that holds the two elements (not the CDN). Two ordinary content elements make the stage:
   - the Image Hero with the anchor "dgm-intro": eyebrow, h1, subheadline (the fact row, items separated by " · "), lead,
     buttons, and its photo (the first tile of the honeycomb),
   - the Exhibition Section with the anchor "dgm-kapitel" (variant "Format cards"): its header is the glass card with the
     heading line, each card is one chapter: its picture is a tile of the honeycomb, its icon, title, sentence and link are a
     row of the list in the card.
   Plain CSS lays it all out and works without JavaScript (static honeycomb, list with the first row open, every row a
   link). hero2.js adds the tile links, the tour with the progress ring, the drift and the tilt, and the fact icons.
   Atmosphere as the awards hero (dgm_event_hero in DGM colours): ink #003446 to #001b25, light glow top left, primary glow
   bottom right, hexagon line lattice, glass parts with white 5 % and a white 15 % edge.
   No site header rules here: the header belongs to the draft tree's stylesheet. */

:root {
  --dgmi-ink: #003446;
  --dgmi-ink-rgb: 0 52 70;
  --dgmi-deepest: #001b25;
  --dgmi-primary: #00abe3;
  --dgmi-primary-rgb: 0 171 227;
  --dgmi-deep: #007aa8;
  --dgmi-sky: #7fd8f5;
  --dgmi-sky-rgb: 127 216 245;
  --dgmi-head: Heading-Font, Theme-Font, Inter, system-ui, sans-serif;
  --dgmi-body: Theme-Font, Inter, system-ui, sans-serif;
  --dgmi-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dgmi-ease: cubic-bezier(.22, .8, .24, 1);
  --dgmi-ease-inout: cubic-bezier(.45, 0, .25, 1);
  --dgmi-gutter: clamp(20px, 5.5vw, 104px);
  --dgmi-w: min(1232px, 100vw - 2 * var(--dgmi-gutter));
  --dgmi-side: calc((100vw - var(--dgmi-w)) / 2);
  --dgmi-glass: rgb(255 255 255 / .05);
  --dgmi-glass-line: rgb(255 255 255 / .15);
  --hex-flat: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --hex-pointy: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --g: 8px;

  /* ---- large screens (from 1200 px): one compact stage, text | chapter list | honeycomb ---- */
  --dgmi-h: clamp(560px, 68svh, 640px);
  --dgmi-top: 88px;
  --dgmi-bottom: 28px;
  --dgmi-avail: calc(var(--dgmi-h) - var(--dgmi-top) - var(--dgmi-bottom));
  /* honeycomb: two columns of flat-top tiles (circumradius r), the right column half a tile lower */
  --r: min(74px, (var(--dgmi-avail) - 8px - 2.5 * var(--g)) / 6.062);
  --ar: calc(.866 * var(--r));
  --D: calc(1.732 * var(--r) + var(--g));
  --tile-w: calc(2 * var(--r));
  --tile-h: calc(2 * var(--ar));
  --hw: calc(3.5 * var(--r) + .866 * var(--g));
  --hh: calc(6.062 * var(--r) + 2.5 * var(--g));
  /* the chapter list card */
  --cw: clamp(300px, 22vw, 320px);
  --hd: 42px;
  --rh: 40px;
  --open: 92px;
  --ch: calc(var(--hd) + 6px + 5 * var(--rh) + var(--open) + 8px);
  --g1: clamp(32px, 3vw, 48px);
  --g2: 24px;
  --tw: calc(var(--dgmi-w) - var(--hw) - var(--cw) - var(--g1) - var(--g2));
  /* positions in the stage */
  --hx: calc(var(--dgmi-side) + var(--dgmi-w) - var(--hw));
  --hy: calc(var(--dgmi-top) + (var(--dgmi-avail) - var(--hh)) / 2);
  --cx: calc(var(--hx) - var(--g2) - var(--cw));
  --cy: calc(var(--dgmi-top) + (var(--dgmi-avail) - var(--ch)) / 2);
  --hex: var(--hex-flat);
  --hex-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'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ---- smaller screens: text first, then the honeycomb (two rows of pointy-top tiles) and the list card ---- */
@media (max-width: 1199.98px) {
  :root {
    --hex: var(--hex-pointy);
    --hex-shade: 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'/%3E%3C/svg%3E");
    --g: 6px;
    --rh: 44px;
    --open: 88px;
    --cw: clamp(300px, 42vw, 420px);
    --gap: 28px;
    --pw: min(132px, (var(--dgmi-w) - var(--cw) - var(--gap) + var(--g)) / 3.5 - var(--g));
    --pp: calc(var(--pw) + var(--g));
    --ph: calc(var(--pw) * 1.1547);
    --tile-w: var(--pw);
    --tile-h: var(--ph);
    --hw: calc(3.5 * var(--pp) - var(--g));
    --hh: calc(.866 * var(--pp) + var(--ph));
    --vis: max(var(--hh), var(--ch));
    --bx: calc(var(--dgmi-side) + (var(--dgmi-w) - var(--hw) - var(--gap) - var(--cw)) / 2);
    --hx: var(--bx);
    --hy: calc((var(--vis) - var(--hh)) / 2);
    --cx: calc(var(--bx) + var(--hw) + var(--gap));
    --cy: calc((var(--vis) - var(--ch)) / 2);
    --mtop: 40px;
    --mend: 44px;
  }
}
@media (max-width: 639.98px) {
  :root {
    --rh: 46px;
    --open: 88px;
    --hd: 44px;
    --cw: min(var(--dgmi-w), 560px);
    --pw: min(132px, (var(--dgmi-w) + var(--g)) / 3.5 - var(--g));
    --vis: calc(var(--hh) + 16px + var(--ch));
    --hx: calc(var(--dgmi-side) + (var(--dgmi-w) - var(--hw)) / 2);
    --hy: 0px;
    --cx: calc(var(--dgmi-side) + (var(--dgmi-w) - var(--cw)) / 2);
    --cy: calc(var(--hh) + 16px);
    --mtop: 32px;
    --mend: 36px;
  }
}
@media (max-width: 379.98px) {
  :root { --open: 106px; }
}

/* ===== The hero element ===== */
#crm__widgets #dgm-intro { padding: 0; color: #fff; font: 400 1rem/1.55 var(--dgmi-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#crm__widgets #dgm-intro *, #crm__widgets #dgm-kapitel * { box-sizing: border-box; }
#crm__widgets #dgm-intro .dgm-ih__frame {
  position: relative;
  isolation: isolate;
  max-width: none;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(at 20% 0%, rgb(var(--dgmi-sky-rgb) / .12) 0%, transparent 50%),
    radial-gradient(at 80% 100%, rgb(var(--dgmi-primary-rgb) / .22) 0%, transparent 55%),
    linear-gradient(160deg, var(--dgmi-ink) 0%, var(--dgmi-deepest) 40%, var(--dgmi-ink) 100%);
  background-color: var(--dgmi-deepest);
}
/* the hexagon line lattice of the awards hero (pointy-top, like the tiles of the smaller screens) */
#crm__widgets #dgm-intro .dgm-ih__frame::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='97' height='168' viewBox='0 0 48.5 84'%3E%3Cpath d='M24.25 0L48.5 14v28L24.25 56 0 42V14zM24.25 56v28' fill='none' stroke='%237fd8f5' stroke-opacity='.16' stroke-width='.6'/%3E%3C/svg%3E") 0 0 / 97px 168px;
  -webkit-mask-image: radial-gradient(90% 55% at 50% 72%, #000 0%, transparent 80%);
  mask-image: radial-gradient(90% 55% at 50% 72%, #000 0%, transparent 80%);
}
/* light surface under the transparent header and the wash at the foot (as the awards hero) */
#crm__widgets #dgm-intro .dgm-ih__frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(var(--dgmi-sky-rgb) / .18) 0%, rgb(var(--dgmi-sky-rgb) / .04) 50%, transparent 100%) top / 100% 90px no-repeat,
    linear-gradient(to top, rgb(var(--dgmi-ink-rgb) / .9) 0%, rgb(var(--dgmi-ink-rgb) / .35) 50%, transparent 100%) bottom / 100% 50% no-repeat;
}
/* the soft glow behind the honeycomb, in the light sky colour */
#crm__widgets #dgm-intro .dgm-ih__body::before { content: ""; position: absolute; z-index: -2; pointer-events: none; border-radius: 50%; background: rgb(var(--dgmi-sky-rgb) / .22); filter: blur(64px); }
#crm__widgets #dgm-intro .dgm-ih__body { max-width: none; padding: 0; }
/* eyebrow: the monospace line with the dot */
#crm__widgets #dgm-intro .dgm-sb-eyebrow {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--dgmi-sky);
  font: 700 .75rem/1.5 var(--dgmi-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#crm__widgets #dgm-intro .dgm-sb-eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dgmi-primary); box-shadow: 0 0 0 4px rgb(var(--dgmi-primary-rgb) / .22), 0 0 14px rgb(var(--dgmi-primary-rgb) / .8); }
#crm__widgets #dgm-intro .dgm-ih__title { margin: 0; color: #fff; font: 900 clamp(1.875rem, 4.4vw, 2.875rem)/1.07 var(--dgmi-head); letter-spacing: -.025em; text-wrap: balance; hyphens: manual; }
/* the last words in DGM cyan to the light sky (hero2.js wraps them) */
#crm__widgets #dgm-intro .dgmi-accent { background: linear-gradient(90deg, var(--dgmi-primary) 0%, var(--dgmi-sky) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .04em; }
#crm__widgets #dgm-intro .dgm-ih__lead { max-width: 36em; margin: 16px 0 0; color: rgb(255 255 255 / .72); font: 400 1.0625rem/1.55 var(--dgmi-body); text-wrap: pretty; }
#crm__widgets #dgm-intro .dgm-ih__lead p { margin: 0; }
#crm__widgets #dgm-intro .dgm-sb-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; justify-self: start; }
/* buttons as the awards hero: radius 8, 16 px / 600, icon in front. Filled: #00abe3, white label (hover #007aa8).
   Outline: white label, white border at 25 %. */
#crm__widgets #dgm-intro .dgm-sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 600 1rem/1.25 var(--dgmi-body);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  background-image: none;
  transition: transform .25s var(--dgmi-ease), background-color .2s, border-color .2s, color .2s, box-shadow .25s;
}
#crm__widgets #dgm-intro .dgm-sb-btn:hover { transform: translateY(-2px); }
#crm__widgets #dgm-intro .dgm-sb-btn--primary { background-color: var(--dgmi-primary); color: #fff; box-shadow: 0 8px 20px rgb(var(--dgmi-primary-rgb) / .34), 0 1px 0 rgb(13 27 38 / .04); }
#crm__widgets #dgm-intro .dgm-sb-btn--primary:hover { background-color: var(--dgmi-deep); color: #fff; }
#crm__widgets #dgm-intro .dgm-sb-btn:not(.dgm-sb-btn--primary) { border-color: rgb(255 255 255 / .25); background-color: rgb(255 255 255 / .05); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#crm__widgets #dgm-intro .dgm-sb-btn:not(.dgm-sb-btn--primary):hover { border-color: rgb(255 255 255 / .5); background-color: rgb(255 255 255 / .1); color: #fff; }
/* the icon keeps its width before the icon font has arrived, so nothing moves when it does */
#crm__widgets #dgm-intro .dgm-sb-btn i { flex: none; width: 18px; font-size: 15px; text-align: center; }
#crm__widgets :is(#dgm-intro, #dgm-kapitel) :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the fact row: the subheadline, under the buttons. Without JavaScript it reads as one line of text with middle dots;
   hero2.js turns the items into icon + words. Its height is fixed while that happens. */
#crm__widgets #dgm-intro .dgm-ih__sub { margin: 20px 0 0; padding: 0; color: rgb(255 255 255 / .74); font: 500 .875rem/24px var(--dgmi-body); letter-spacing: 0; text-transform: none; }
html.dgmi-js #crm__widgets #dgm-intro .dgm-ih__sub { display: flex; flex-wrap: nowrap; gap: 8px 24px; height: 24px; }
html.dgmi-js #crm__widgets #dgm-intro .dgm-ih__sub:not(.is-ready) { visibility: hidden; }
/* below 1400 px the text column is too narrow for one line: two lines are kept free */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  html.dgmi-js #crm__widgets #dgm-intro .dgm-ih__sub { flex-wrap: wrap; align-content: flex-start; height: 52px; row-gap: 4px; }
}
#crm__widgets #dgm-intro .dgmi-fact { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
#crm__widgets #dgm-intro .dgmi-fact i { flex: none; width: 16px; color: var(--dgmi-sky); font-size: 13px; text-align: center; }

/* ===== Tiles: the introduction photo (the Image Hero's own picture) and one per chapter card ===== */
/* the introduction tile */
#crm__widgets #dgm-intro .dgm-ih__media { position: absolute; z-index: 1; inset: auto; width: var(--tile-w); height: var(--tile-h); overflow: visible; background: none; -webkit-mask-image: none; mask-image: none; }
#crm__widgets #dgm-intro .dgm-ih__media::before { content: ""; position: absolute; inset: 0; clip-path: var(--hex); background: rgb(255 255 255 / .3); }
#crm__widgets #dgm-intro .dgm-ih__img { position: absolute; inset: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); object-fit: cover; object-position: 50% 45%; clip-path: var(--hex); transition: filter .6s var(--dgmi-ease-inout); }
/* the shadow under each tile: a blurred hexagon of its own (a filter on the tile would enlarge the picture's paint area) */
#crm__widgets #dgm-intro .dgm-ih__media::after,
#crm__widgets #dgm-kapitel :is(.dgmi-tile__in, .dgm-ex-card-scrim)::before { content: ""; position: absolute; z-index: -1; inset: 4% 3% -2%; background: var(--hex-shade) center / 100% 100% no-repeat; opacity: .5; filter: blur(14px); translate: 0 16px; pointer-events: none; }

/* the chapter section lies over the stage; its parts are placed in stage coordinates */
#crm__widgets #dgm-kapitel { position: relative; z-index: 3; overflow: clip; padding: 0; color: #fff; font: 400 1rem/1.55 var(--dgmi-body); pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* will-change too: the widget stylesheet gives unrevealed [data-reveal] wrappers will-change: transform, which makes each
   card's wrapper the containing block of its absolutely placed row until the reveal script runs; that change of
   containing block counted as a layout shift of all five rows (CLS .066 at 1024 and 768 px, 2026-11-10) */
#crm__widgets #dgm-kapitel [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; }
#crm__widgets #dgm-kapitel > div { position: absolute; z-index: 0; inset: 0; max-width: none; margin: 0; padding: 0; }
/* the card list and its cards stay out of the way of positioning: tiles and rows are placed against the section's box */
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-grid, .dgm-ex-card-grid__item, .dgm-ex-card-grid__item > div, article) {
  position: static;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none !important;
  translate: none;
  filter: none;
}
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(n+6) { display: none; }
/* offsets of the tiles in the honeycomb (large screens: two columns, the right one half a tile lower) */
#crm__widgets #dgm-intro .dgm-ih__media { --ox: 0px; --oy: 0px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(1) { --i: 0; --ox: calc(.866 * var(--D)); --oy: calc(.5 * var(--D)); --dt: 9.5s; --dd: -2s; --dx: -3px; --dy: -3px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(2) { --i: 1; --ox: 0px; --oy: var(--D); --dt: 12s; --dd: -7s; --dx: 2px; --dy: -4px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(3) { --i: 2; --ox: calc(.866 * var(--D)); --oy: calc(1.5 * var(--D)); --dt: 10.5s; --dd: -4s; --dx: 3px; --dy: -2px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(4) { --i: 3; --ox: 0px; --oy: calc(2 * var(--D)); --dt: 13s; --dd: -9s; --dx: 3px; --dy: 3px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(5) { --i: 4; --ox: calc(.866 * var(--D)); --oy: calc(2.5 * var(--D)); --dt: 11.5s; --dd: -5s; --dx: -3px; --dy: 3px; }
@media (max-width: 1199.98px) {
  /* two rows of three: introduction, 1, 2 / 3, 4, 5 (the second row half a tile to the right) */
  #crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(1) { --ox: var(--pp); --oy: 0px; }
  #crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(2) { --ox: calc(2 * var(--pp)); --oy: 0px; }
  #crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(3) { --ox: calc(.5 * var(--pp)); --oy: calc(.866 * var(--pp)); }
  #crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(4) { --ox: calc(1.5 * var(--pp)); --oy: calc(.866 * var(--pp)); }
  #crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:nth-child(5) { --ox: calc(2.5 * var(--pp)); --oy: calc(.866 * var(--pp)); }
}
/* without JavaScript: the card's own picture is the tile, its scrim the glass edge */
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-scrim, .dgm-ex-card-bgmedia, .dgmi-tile) { position: absolute; left: calc(var(--hx) + var(--ox)); top: calc(var(--hy) + var(--oy)); width: var(--tile-w); height: var(--tile-h); }
#crm__widgets #dgm-kapitel .dgm-ex-card-scrim { z-index: 1; display: block; clip-path: none; background: none; opacity: 1; }
#crm__widgets #dgm-kapitel .dgm-ex-card-scrim::after { content: ""; position: absolute; inset: 0; clip-path: var(--hex); background: rgb(255 255 255 / .3); }
#crm__widgets #dgm-kapitel .dgm-ex-card-bgmedia { z-index: 2; margin: 1.5px; width: calc(var(--tile-w) - 3px); height: calc(var(--tile-h) - 3px); object-fit: cover; object-position: 50% 42%; clip-path: var(--hex); pointer-events: none; }
/* with JavaScript: a tile of its own (a link with the light webp picture and the ring); the card's jpg stays unloaded */
html.dgmi-js #crm__widgets #dgm-kapitel :is(.dgm-ex-card-scrim, .dgm-ex-card-bgmedia) { display: none; }
#crm__widgets #dgm-kapitel .dgmi-tile { z-index: 1; display: block; pointer-events: none; text-decoration: none; background: none; transform-origin: calc(var(--hw) / 2 - var(--ox)) calc(var(--hh) / 2 - var(--oy)); }
#crm__widgets #dgm-kapitel .dgmi-tile__in { position: absolute; inset: 0; display: block; transition: scale .7s var(--dgmi-ease); }
#crm__widgets #dgm-kapitel .dgmi-tile__face { position: absolute; inset: 0; display: block; clip-path: var(--hex); background: rgb(255 255 255 / .3); pointer-events: auto; cursor: pointer; }
#crm__widgets #dgm-kapitel .dgmi-tile-img { position: absolute; inset: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); max-width: none; object-fit: cover; object-position: 50% 42%; clip-path: var(--hex); opacity: 0; transition: filter .6s var(--dgmi-ease-inout), opacity .6s var(--dgmi-ease-inout); }
#crm__widgets #dgm-kapitel .dgmi-tile-img.is-loaded { opacity: 1; }

/* the ring over each chapter tile: the DGM primary edge of the chapter shown, the progress of the tour on it, and the
   keyboard focus mark. Stroke widths in the ring's own units (the boxes keep the hexagon's proportions). */
.dgmi-ring { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: filter .5s var(--dgmi-ease-inout); }
.dgmi-ring path { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.dgmi-ring.dgmi-ring__pointy path { stroke-width: 2.2; }
.dgmi-ring.dgmi-ring__pointy { display: none; }
@media (max-width: 1199.98px) {
  .dgmi-ring.dgmi-ring__flat { display: none; }
  .dgmi-ring.dgmi-ring__pointy { display: block; }
}
.dgmi-ring__edge { stroke: var(--dgmi-primary); opacity: 0; transition: opacity .5s var(--dgmi-ease-inout); }
.dgmi-ring__run { stroke: #fff; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; }
.dgmi-ring__run.is-running { opacity: .95; animation: dgmi-ring linear forwards; }
@keyframes dgmi-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.dgmi-ring__focus { stroke: #fff; opacity: 0; }

/* ===== The chapter shown: its tile grows a little, comes to the front, gets the primary edge; the others dim slightly ===== */
#crm__widgets #dgm-kapitel .is-on .dgmi-tile { z-index: 4; }
#crm__widgets #dgm-kapitel .is-on .dgmi-tile__in { scale: 1.06; }
#crm__widgets #dgm-kapitel .is-on .dgmi-ring__edge { opacity: 1; }
#crm__widgets #dgm-kapitel .is-on .dgmi-ring { filter: drop-shadow(0 0 7px rgb(var(--dgmi-primary-rgb) / .9)) drop-shadow(0 0 18px rgb(var(--dgmi-primary-rgb) / .45)); }
#crm__widgets #dgm-kapitel.dgmi-ready .dgm-ex-card-grid__item:not(.is-on) .dgmi-tile-img { filter: brightness(.72) saturate(.85); }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:not(.is-on) .dgmi-tile__face:hover .dgmi-tile-img { filter: none; }
#crm__widgets #dgm-kapitel .dgm-ex-card-grid__item:has(.dgm-ex-card-onimage a:focus-visible) .dgmi-ring__focus { opacity: 1; }

/* slow drift, each tile on its own loop */
@keyframes dgmi-drift { from { translate: 0 0; } to { translate: var(--dx, 2px) var(--dy, -4px); } }
#crm__widgets #dgm-intro .dgm-ih__media { animation: dgmi-drift 11s ease-in-out -3s infinite alternate; --dx: -2px; --dy: 3px; }
#crm__widgets #dgm-kapitel .dgmi-tile { animation: dgmi-drift var(--dt, 10s) ease-in-out var(--dd, 0s) infinite alternate; }

/* ===== The glass card: the chapter section's header (heading line, pause button) behind the list of rows ===== */
#crm__widgets #dgm-kapitel > div > header {
  position: absolute;
  z-index: -1;
  left: var(--cx);
  top: var(--cy);
  width: var(--cw);
  height: var(--ch);
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  text-align: left;
  border: 1px solid var(--dgmi-glass-line);
  border-radius: 16px;
  /* glass on a deep ink base, so the links and sentences keep their contrast where the honeycomb's glow lies behind */
  background: linear-gradient(var(--dgmi-glass), var(--dgmi-glass)), rgb(0 27 37 / .68);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
/* heading line: the h2 (or, without a heading, the eyebrow) */
#crm__widgets #dgm-kapitel > div > header > :is(h2, span:first-child) { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--hd); margin: 0; padding: 0 48px; border: 0; border-bottom: 1px solid rgb(255 255 255 / .1); border-radius: 0; background: rgb(var(--dgmi-primary-rgb) / .15); color: var(--dgmi-sky); font: 700 .75rem/1.5 var(--dgmi-mono); letter-spacing: .24em; text-transform: uppercase; }
#crm__widgets #dgm-kapitel > div > header:has(> h2) > span { display: none; }
#crm__widgets #dgm-kapitel > div > header > div { display: none; }
/* pause and resume, at the end of the heading line */
#crm__widgets #dgm-kapitel .dgmi-pause { position: absolute; right: 7px; top: calc((var(--hd) - 30px) / 2); display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgb(255 255 255 / .18); border-radius: 8px; background: rgb(255 255 255 / .06); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s; }
#crm__widgets #dgm-kapitel .dgmi-pause:hover { border-color: rgb(255 255 255 / .4); background: rgb(255 255 255 / .16); }
#crm__widgets #dgm-kapitel .dgmi-pause svg { width: 13px; height: 13px; }
#crm__widgets #dgm-kapitel .dgmi-pause .dgmi-play, #crm__widgets #dgm-kapitel .dgmi-pause[aria-pressed="true"] .dgmi-stop { display: none; }
#crm__widgets #dgm-kapitel .dgmi-pause[aria-pressed="true"] .dgmi-play { display: block; }

/* ===== The rows: each card's icon, title, sentence and link, one under the other in the glass card ===== */
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage {
  position: absolute;
  z-index: 2;
  left: calc(var(--cx) + 6px);
  top: calc(var(--cy) + var(--hd) + 6px + var(--i) * var(--rh));
  width: calc(var(--cw) - 12px);
  height: var(--rh);
  display: block;
  margin: 0;
  padding: 0 14px 0 12px;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  font: 400 .8125rem/1.45 var(--dgmi-body);
  text-wrap: wrap;
  text-shadow: none;
  pointer-events: auto;
  transition: height .5s var(--dgmi-ease), translate .5s var(--dgmi-ease), background-color .3s;
}
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage:hover { background-color: rgb(255 255 255 / .05); }
/* the arrow at the end of the title line */
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage::after { content: ""; position: absolute; right: 13px; top: calc((var(--rh) - 12px) / 2); width: 12px; height: 12px; background: rgb(255 255 255 / .4); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: background-color .3s, translate .3s var(--dgmi-ease); pointer-events: none; }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage > div:first-child { position: absolute; left: 10px; top: calc((var(--rh) - 26px) / 2); display: grid; place-items: center; width: 26px; height: 26px; margin: 0; border-radius: 7px; background: rgb(var(--dgmi-primary-rgb) / .14); color: var(--dgmi-sky); font-size: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage > div:first-child i { font-size: 12px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage h3 { margin: 0 0 2px; padding: 0 22px 0 36px; overflow: hidden; color: rgb(255 255 255 / .84); font: 600 .875rem/var(--rh) var(--dgmi-body); letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; transition: color .3s; }
/* sentence and link flow on together (the link closes the sentence); they show in the open row */
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage > div:not(:first-child) { display: inline; margin: 0; padding: 0; text-wrap: wrap; color: rgb(255 255 255 / .8); font: 400 .8125rem/1.45 var(--dgmi-body); }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage > div:not(:first-child) p { display: inline; margin: 0; text-wrap: wrap; }
/* an inline block: a line may break before it even where the markup has no space before the link */
#crm__widgets #dgm-kapitel a.dgm-ex-card-stretch { position: static; display: inline-block; margin: 0 0 0 4px; padding: 0; color: var(--dgmi-primary); font: 600 .8125rem/1.45 var(--dgmi-body); text-decoration: none; white-space: nowrap; background-image: none; }
#crm__widgets #dgm-kapitel a.dgm-ex-card-stretch i { margin-left: 5px; font-size: 10px; }
#crm__widgets #dgm-kapitel a.dgm-ex-card-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
#crm__widgets #dgm-kapitel a.dgm-ex-card-stretch:focus-visible { outline: 0; }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage:has(a:focus-visible) { outline: 2px solid #fff; outline-offset: -2px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage:hover a.dgm-ex-card-stretch { text-decoration: underline; text-underline-offset: 3px; }
#crm__widgets #dgm-kapitel .dgm-ex-card-onimage > div:not(:first-child),
#crm__widgets #dgm-kapitel a.dgm-ex-card-stretch { opacity: 0; transition: opacity .25s var(--dgmi-ease-inout); }
/* the open row: the chapter shown, or the first one until a chapter is chosen (and without JavaScript) */
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-grid__item.is-on, .dgm-ex-card-grid:not(:has(> .is-on)) > .dgm-ex-card-grid__item:first-child) .dgm-ex-card-onimage { height: calc(var(--rh) + var(--open)); background-color: rgb(255 255 255 / .045); box-shadow: inset 2px 0 0 var(--dgmi-primary); }
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-grid__item.is-on, .dgm-ex-card-grid:not(:has(> .is-on)) > .dgm-ex-card-grid__item:first-child) .dgm-ex-card-onimage h3 { color: #fff; font-weight: 700; }
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-grid__item.is-on, .dgm-ex-card-grid:not(:has(> .is-on)) > .dgm-ex-card-grid__item:first-child) .dgm-ex-card-onimage::after { background: var(--dgmi-primary); translate: 2px 0; }
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-grid__item.is-on, .dgm-ex-card-grid:not(:has(> .is-on)) > .dgm-ex-card-grid__item:first-child) :is(.dgm-ex-card-onimage > div:not(:first-child), a.dgm-ex-card-stretch) { opacity: 1; transition: opacity .45s var(--dgmi-ease-inout) .15s; }
/* the rows under the open one move down (a transform: nothing on the page shifts) */
#crm__widgets #dgm-kapitel :is(.dgm-ex-card-grid__item.is-on, .dgm-ex-card-grid:not(:has(> .is-on)) > .dgm-ex-card-grid__item:first-child) ~ .dgm-ex-card-grid__item .dgm-ex-card-onimage { translate: 0 var(--open); }

/* ===== Large screens: the stage ===== */
@media (min-width: 1200px) {
  #crm__widgets #dgm-intro .dgm-ih__frame {
    display: grid;
    grid-template-columns: [full-start] var(--dgmi-side) [text-start] minmax(0, var(--tw)) [text-end] minmax(0, 1fr) [full-end];
    grid-template-rows: var(--dgmi-top) minmax(0, 1fr) auto auto auto auto auto minmax(0, 1fr) var(--dgmi-bottom);
    height: var(--dgmi-h);
  }
  #crm__widgets #dgm-intro .dgm-ih__frame::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='97' viewBox='0 0 84 48.5'%3E%3Cpath d='M0 24.25L14 0h28l14 24.25L42 48.5H14zM56 24.25h28' fill='none' stroke='%237fd8f5' stroke-opacity='.16' stroke-width='.6'/%3E%3C/svg%3E") 0 0 / 168px 97px;
    -webkit-mask-image: radial-gradient(70% 80% at 72% 45%, #000 0%, transparent 75%);
    mask-image: radial-gradient(70% 80% at 72% 45%, #000 0%, transparent 75%);
  }
  #crm__widgets #dgm-intro .dgm-ih__body { display: contents; }
  #crm__widgets #dgm-intro .dgm-ih__body > * { position: relative; z-index: 2; grid-column: text; }
  #crm__widgets #dgm-intro .dgm-sb-eyebrow { grid-row: 3; }
  #crm__widgets #dgm-intro .dgm-ih__title { grid-row: 4; font-size: min(2.875rem, var(--tw) / 12.3); }
  #crm__widgets #dgm-intro .dgm-ih__lead { grid-row: 5; }
  #crm__widgets #dgm-intro .dgm-sb-btns { grid-row: 6; }
  #crm__widgets #dgm-intro .dgm-ih__sub { grid-row: 7; }
  #crm__widgets #dgm-intro .dgm-ih__media { left: calc(var(--hx) + var(--ox)); top: calc(var(--hy) + var(--oy)); transform-origin: calc(var(--hw) / 2) calc(var(--hh) / 2); }
  #crm__widgets #dgm-intro .dgm-ih__body::before { width: 400px; height: 560px; left: calc(var(--hx) + var(--hw) / 2 - 140px); top: calc(var(--hy) + var(--hh) / 2 - 280px); }
  #crm__widgets #dgm-kapitel { margin-top: calc(-1 * var(--dgmi-h)); height: var(--dgmi-h); }
  /* the honeycomb leans a little toward the mouse (hero2.js sets --dgmi-tx / --dgmi-ty, -1 to 1) */
  #crm__widgets #dgm-intro .dgm-ih__media, #crm__widgets #dgm-kapitel .dgmi-tile { transform: perspective(1100px) rotateX(calc(var(--dgmi-ty, 0) * -5deg)) rotateY(calc(var(--dgmi-tx, 0) * 6deg)); }
}

/* ===== Smaller screens: text, then the honeycomb and the card (side by side from 640 px, one under the other below) ===== */
@media (max-width: 1199.98px) {
  #crm__widgets #dgm-intro .dgm-ih__frame {
    display: grid;
    grid-template-columns: var(--dgmi-gutter) minmax(0, 1fr) var(--dgmi-gutter);
    padding: 100px 0 calc(var(--mtop) + var(--vis) + var(--mend));
  }
  #crm__widgets #dgm-intro .dgm-ih__body { display: contents; }
  #crm__widgets #dgm-intro .dgm-ih__body > * { grid-column: 2; position: relative; z-index: 2; max-width: 720px; }
  #crm__widgets #dgm-intro .dgm-sb-eyebrow { grid-row: 1; }
  #crm__widgets #dgm-intro .dgm-ih__title { grid-row: 2; }
  #crm__widgets #dgm-intro .dgm-ih__lead { grid-row: 3; }
  #crm__widgets #dgm-intro .dgm-sb-btns { grid-row: 4; }
  #crm__widgets #dgm-intro .dgm-ih__sub { grid-row: 5; }
  /* the honeycomb's first tile is the introduction photo */
  #crm__widgets #dgm-intro .dgm-ih__media { left: var(--hx); bottom: calc(var(--mend) + var(--vis) - var(--hy) - var(--ph)); }
  #crm__widgets #dgm-intro .dgm-ih__body::before { width: 420px; height: 320px; left: calc(var(--hx) + var(--hw) / 2 - 210px); bottom: calc(var(--mend) + var(--vis) - var(--hy) - var(--hh) / 2 - 160px); }
  #crm__widgets #dgm-kapitel { margin-top: calc(-1 * (var(--vis) + var(--mend))); height: calc(var(--vis) + var(--mend)); }
  #crm__widgets #dgm-kapitel > div { bottom: auto; height: var(--vis); }
  #crm__widgets #dgm-kapitel .is-on .dgmi-tile__in { scale: 1; }
}
@media (max-width: 639.98px) {
  #crm__widgets #dgm-intro .dgm-ih__frame { padding-top: 92px; }
  #crm__widgets #dgm-intro .dgm-sb-eyebrow { letter-spacing: .18em; margin-bottom: 14px; }
  #crm__widgets #dgm-intro .dgm-ih__lead { margin-top: 14px; font-size: 1rem; line-height: 1.55; }
  #crm__widgets #dgm-intro .dgm-sb-btns { gap: 10px; margin-top: 22px; }
  /* one button per row: whether two fit side by side would depend on the icon font arriving (layout shift) */
  #crm__widgets #dgm-intro .dgm-sb-btn { flex: 1 1 100%; min-height: 48px; padding: 0 18px; }
  /* the facts one under the other */
  #crm__widgets #dgm-intro .dgm-ih__sub { margin-top: 18px; }
  html.dgmi-js #crm__widgets #dgm-intro .dgm-ih__sub { flex-wrap: wrap; align-content: flex-start; gap: 4px 20px; height: 52px; }
  #crm__widgets #dgm-kapitel .dgm-ex-card-onimage h3 { font-size: .9375rem; }
  #crm__widgets #dgm-kapitel .dgm-ex-card-onimage, #crm__widgets #dgm-kapitel .dgm-ex-card-onimage > div:not(:first-child), #crm__widgets #dgm-kapitel a.dgm-ex-card-stretch { font-size: .875rem; }
}

/* ===== Reduced motion: no drift, no tilt, instant changes ===== */
@media (prefers-reduced-motion: reduce) {
  #crm__widgets #dgm-intro :is(.dgm-ih__media, .dgm-ih__img), #crm__widgets #dgm-kapitel :is(.dgmi-tile, .dgmi-tile__in, .dgmi-tile-img, .dgmi-ring, .dgmi-ring__edge, .dgm-ex-card-onimage, .dgm-ex-card-onimage > *, .dgm-ex-card-onimage::after) { animation: none !important; transition: none !important; }
  #crm__widgets #dgm-intro .dgm-ih__media, #crm__widgets #dgm-kapitel .dgmi-tile { transform: none !important; }
  .dgmi-ring__run { display: none; }
}
body:has(#dgm-intro) #crm__widgets { overflow-x: clip; }