/* Die DGM (draft tree): page-scoped additions, loaded only by the sys_template on the draft root (not the CDN).
   Brief 03: the pages are built from the event element family (Exhibition section, Event header container, Venue
   card, Event callout, Contact CTA), which already carries its look on dgm.de in DGM cyan. This file only adds what
   those blocks cannot do: the sibling navigation, the mission statement size, the award picture set, small gaps. */
:root {
  --ab-primary: #00abe3;
  --ab-deep: #007aa8;           /* only as hover background of a filled button */
  --ab-ink: #003e52;
  --ab-tint: #e3f4fb;
  --w-border: #d0e9f1;          /* the family's / CRM widgets' card border */
  --w-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2);
  --ab-wrap: min(1000px, 100vw - 48px);
}

/* breadcrumb links in DGM primary (one blue) */
#breadcrumb__section ol > li > a { color: var(--ab-primary) !important; }

/* ---------- Sibling navigation (core "Menu of subpages"): pill bar in the family's shapes ---------- */
#crm__widgets .frame-type-menu_subpages { position: sticky; top: 12px; z-index: 40; width: var(--ab-wrap); max-width: none; margin: 0 auto 8px; padding: 0; transition: top .3s ease; }
body:has(.mainmenu.dgm-mainmenu--float:not(.dgm-mainmenu--hidden)) #crm__widgets .frame-type-menu_subpages { top: 66px; }
#crm__widgets .frame-type-menu_subpages > header { display: none; }
#crm__widgets .frame-type-menu_subpages ul {
  display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0; padding: 5px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; border: 1px solid var(--w-border); border-radius: 999px; background: rgb(255 255 255 / .96); box-shadow: var(--w-shadow); backdrop-filter: blur(8px);
}
#crm__widgets .frame-type-menu_subpages ul::-webkit-scrollbar { display: none; }
#crm__widgets .frame-type-menu_subpages li { flex: none; margin: 0; padding: 0; }
#crm__widgets .frame-type-menu_subpages a {
  display: flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--ab-primary);
  font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s;
}
#crm__widgets .frame-type-menu_subpages a:hover { background: rgb(0 171 227 / .08); }
#crm__widgets .frame-type-menu_subpages a[aria-current="page"] { background: var(--ab-primary); color: #fff; }
#crm__widgets .frame-type-menu_subpages a:focus-visible { outline: 2px solid var(--ab-primary); outline-offset: -2px; }
#crm__widgets .frame-type-menu_subpages.is-scroll-end ul { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
#crm__widgets .frame-type-menu_subpages.is-scroll-start ul { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
#crm__widgets .frame-type-menu_subpages.is-scroll-start.is-scroll-end ul { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
#crm__widgets .ab-swipe { display: none; }
@media (hover: none), (max-width: 767.98px) {
  #crm__widgets .ab-swipe { --share: .3; --at: 0; position: relative; display: block; width: 56px; height: 4px; margin: 8px 0 0 16px; overflow: hidden; border-radius: 99px; background: rgb(0 62 82 / .12); }
  #crm__widgets .ab-swipe i { position: absolute; inset: 0 auto 0 0; width: calc(var(--share) * 100%); border-radius: inherit; background: var(--ab-primary); transform: translateX(calc(var(--at) * (1 / var(--share) - 1) * 100%)); }
  #crm__widgets .ab-swipe.is-off { display: none; }
}
/* jump targets clear the pinned header (54 px) + the sticky bar (12 + 48 px) */
#crm__widgets :is(section, .frame)[id], #crm__widgets .ce-anchor { scroll-margin-top: 132px; }

/* ---------- Small gaps the blocks leave ---------- */
/* several paragraphs in a section lead (the family zeroes paragraph margins) */
#crm__widgets section.dgm-ex-root header div > p + p, #crm__widgets section.dgm-ex-root header div > p + ul, #crm__widgets section.dgm-ex-root header div > ul + p { margin-top: .85em; }
#crm__widgets section.dgm-ex-root header div > ul { margin: .6em 0 0; padding-left: 1.2em; list-style: disc; }
/* page head (Guidelines header): a little more air above, it opens the page */
#crm__widgets section.dgm-ex-root:has(> div > header h1) { padding-top: 24px; }
/* content blocks inside the venue card's text column: no own section padding or width */
#crm__widgets .dgm-venue-card__body section.dgm-ex-root { padding: 0; }
#crm__widgets .dgm-venue-card__body section.dgm-ex-root > div { max-width: none; padding: 0; }
#crm__widgets .dgm-venue-card__body section.dgm-ex-root header { margin-bottom: 12px; }
#crm__widgets .dgm-venue-card__body section.dgm-ex-root header div { font-size: 15px; line-height: 1.65; }
#crm__widgets .dgm-venue-card__body :is(.grid.sm\:grid-cols-2, .grid.sm\:grid-cols-3) { grid-template-columns: minmax(0, 1fr); }
#crm__widgets .dgm-venue-card { min-height: 0; }
#crm__widgets .dgm-venue-card > .grid > div:first-child { min-height: 18rem; }
/* small note under a widget (core text element in a header container) */
#crm__widgets section.dgm-ex-root .frame-type-text { max-width: 62ch; margin: 16px 0 0; color: #475569; font-size: 14px; line-height: 1.6; }
#crm__widgets section.dgm-ex-root .frame-type-text p { margin: 0; }

/* two text columns (b13 "2 Column Container": a bare div.grid.container.my-12, no frame) on the family width */
#crm__widgets > .grid.container.my-12 { width: var(--ab-wrap); max-width: none; margin: 0 auto; padding: 32px 0 8px; gap: 0 48px; }
#crm__widgets > .grid.container.my-12 > div { padding: 0; }
#crm__widgets > .grid.container.my-12 section.dgm-ex-root { padding: 0; }
#crm__widgets > .grid.container.my-12 section.dgm-ex-root > div { padding: 0; }
@media (max-width: 767.98px) { #crm__widgets > .grid.container.my-12 { gap: 24px; padding-inline: 0; } }
/* the award widget is its own section: a little room before the picture card */
#crm__widgets > .frame-type-html:has(> .custom-compiled-plugin-element[name="award-details"]) { margin-bottom: 24px; }
/* the venue card container has no section padding of its own */
#crm__widgets > div:has(> article.dgm-venue-card) { margin-top: 32px; margin-bottom: 56px; }
/* text sections set in two columns read at body size (the compact header sets 14px) */
#crm__widgets > .grid.container.my-12 section.dgm-ex-root header div { color: #334155; font-size: 16px; line-height: 1.7; }
/* the site's blurred background decoration reaches 18px past the window at 360px: no sideways scroll */
body { overflow-x: clip; }
.pointer-events-none:has(> .blur-3xl) { overflow: hidden; }
/* reserve room for a CRM widget until it has mounted, so the blocks below it do not jump (CLS); the frame only */
/* (owner, round 2) the reservation holds exactly through the three states before the widget has mounted: the raw
   element, the loader's bare status div (role="status", keeps the name), and the compiled shell without its state child.
   As soon as the widget's own state is in the DOM the frame is as tall as the widget, so the page ends right after it,
   whatever the widget shows (laureates, an empty or an error state). The former catch-all on every html frame without
   .award-details is gone: it held 120vh forever on any other direct html frame. */
#crm__widgets .frame-type-html:has(> custom-plugin-element:is([name="award-details"], [name="committee-full-page"])),
#crm__widgets .frame-type-html:has(> [role="status"]:is([name="award-details"], [name="committee-full-page"])),
#crm__widgets .frame-type-html:has(> .custom-compiled-plugin-element:is([name="award-details"], [name="committee-full-page"])):not(:has(.custom-compiled-plugin-element__state)) { min-height: 120vh; }
#crm__widgets .frame-type-html:has(> custom-plugin-element:not([name])) { min-height: 100vh; }
/* the swipe line the script adds under the sibling bar on touch screens and phones: its room is reserved, no shift */
@media (hover: none), (max-width: 767.98px) { #crm__widgets .frame-type-menu_subpages { min-height: 60px; } }
/* the widget loader's leaving state is taken out of the flow for its 0.14 s leave transition, so the arriving content does
   not jump when it goes (CLS); the widget's own layout and colours are untouched */
#crm__widgets .custom-compiled-plugin-element { position: relative; }
#crm__widgets .custom-compiled-plugin-element > :is(.custom-compiled-plugin-element__loading-wrap.loader-fade-leave-active, .custom-compiled-plugin-element__state.content-slide-leave-active) { position: absolute; top: 0; right: 0; left: 0; }



/* ===================== Brief 05: own composition, start-page scale and surfaces, event-family details ===================== */
:root {
  --b-gutter: clamp(20px, 5.5vw, 96px);
  --b-wrap: min(1440px, 100vw - 2 * var(--b-gutter));
  --b-inset: clamp(8px, 1.4vw, 20px);
  --b-space: clamp(64px, 7.4vw, 112px);
  --b-panel: clamp(48px, 5.6vw, 84px);
  --b-ink-rgb: 0 62 82;
  --b-text: #0f2233; --b-muted: #566b7c; --b-line: #dce6ec; --b-tint: #e3f4fb; --b-mist: #f2f7fa;
  --b-shadow: 0 1px 2px rgba(15, 34, 51, .05), 0 18px 40px -30px rgba(15, 34, 51, .3);
  --b-ease: cubic-bezier(.45, 0, .25, 1);
  --b-hex: url(/fileadmin/DGM/Startseite/hintergrund_startseite_kacheln.jpg);
  --b-f-display: 600 clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem)/1.08 Heading-Font, Theme-Font, Inter, system-ui, sans-serif;
  --b-f-h2: 600 clamp(1.75rem, 1.4rem + 1.35vw, 2.5rem)/1.14 Heading-Font, Theme-Font, Inter, system-ui, sans-serif;
  --b-f-title: 600 1.25rem/1.3 Heading-Font, Theme-Font, Inter, system-ui, sans-serif;
  --b-f-lead: 400 1.125rem/1.6 Theme-Font, Inter, system-ui, sans-serif;
  --b-f-body: 400 1rem/1.55 Theme-Font, Inter, system-ui, sans-serif;
}
/* ===================== Brief 06: the H2MSE home look in DGM cyan and ink (pages built with the event hero) =====================
   The blocks render the H2MSE anatomy themselves (Event hero, centred section heads, icon cards, image cards, venue card);
   this part only sets ink instead of the theme's deep cyan, mutes the bubbles, and fills the gaps listed per pattern. */
body {
  --h-ink: #003e52; --h-ink-2: #00212c; --h-primary: #00abe3; --h-sky: #7fd8f5; --h-text: #0f172a; --h-muted: oklch(.446 .043 257.281);
  --h-grid: min(1152px, 100vw - 48px);
  --h-hex: 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");

  /* ---- Hero (Event hero, layout Liquid Bubbles): ink ground, the hexagon lattice instead of bubbles, 640-720 px ---- */
  .dgm-feh {
    --feh-primary: #00abe3; --feh-primary-bright: #00abe3; --feh-deep: #003446; --feh-deeper: #001b25; --feh-bubble: #7fd8f5; --feh-bubble-light: #b9ecfc;
    min-height: clamp(640px, 80vh, 720px); max-height: none;
  }
  .dgm-feh__bubble-field { display: none; }
  .dgm-feh__hex { opacity: 1; background: var(--h-hex) center / 97px 168px; -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%); }
  .dgm-feh h1 { letter-spacing: -.025em; }
  .dgm-feh__shimmer { background: linear-gradient(90deg, var(--h-primary), var(--h-sky)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: none; }
  .dgm-feh__logo { width: clamp(220px, 25vw, 380px); }
  /* filled buttons everywhere in the tree: fill #00abe3, white label and icon, 600; hover #007aa8 (user, 2026-11-10) */
  .dgm-feh__button--primary { background: var(--h-primary); color: #fff; font-weight: 600; }
  .dgm-feh__button--primary:hover, .dgm-feh__button--primary:focus-visible { background: #007aa8; color: #fff; }
  .dgm-feh__button--secondary { border-color: rgb(255 255 255 / .25); background: rgb(255 255 255 / .05); color: #fff; }
  .dgm-feh__button--secondary:hover, .dgm-feh__button--secondary:focus-visible { border-color: rgb(255 255 255 / .45); background: rgb(255 255 255 / .1); color: #fff; }
  .dgm-feh__button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  @media (min-width: 1024px) { .dgm-feh h1 { font-size: 3.1rem; line-height: 1.07; } }

  /* ---- Sibling navigation: the pill bar, centred on the card-grid width, half over the hero's lower edge ---- */
  /* the second element, directly below the hero; sticky like everywhere in the tree (12 px from the top, below the pinned header) */
  #crm__widgets .frame-type-menu_subpages { width: var(--h-grid); margin: 8px auto 0; }
  #crm__widgets section.dgm-feh + .frame-type-menu_subpages { margin-top: -30px; }
  #crm__widgets .frame-type-menu_subpages ul { margin: 0 auto; }

  /* ---- Light band (Exhibition section on the light-grey theme): a very light DGM-primary tint ---- */
  #crm__widgets section.dgm-ex-root.bg-muted\/30 { background: linear-gradient(180deg, rgb(0 171 227 / 0) 0%, rgb(0 171 227 / .065) 24%, rgb(0 171 227 / .04) 72%, rgb(0 171 227 / 0) 100%); }

  /* ---- Steps as topic cards (Card grid on the light band): icon tile, marker 01.. at the top right, mini pill ---- */
  #crm__widgets section.bg-muted\/30 .dgm-ex-card-grid { counter-reset: h-step; }
  #crm__widgets section.bg-muted\/30 .dgm-ex-card-grid__item { counter-increment: h-step; }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card) { position: relative; gap: 10px; padding: 24px; }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase)::after { content: counter(h-step, decimal-leading-zero); position: absolute; top: 22px; right: 24px; color: rgb(0 171 227 / .6); font: 700 1.25rem/1 Heading-Font, Inter, sans-serif; letter-spacing: -.02em; }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card) > div:first-child { width: 44px; height: 44px; margin-bottom: 6px; }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card) > div.uppercase {
    width: fit-content; padding: 2px 10px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px; background: rgb(0 171 227 / .05);
    color: var(--h-primary); font: 700 10px/15px Theme-Font, Inter, sans-serif; letter-spacing: .1em;
  }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card) h3 { margin: 0; color: var(--h-text); font: 600 1.125rem/1.5 Heading-Font, Inter, sans-serif; }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card) h3 + div { color: var(--h-muted); font-size: 14.5px; line-height: 23.5px; }
  #crm__widgets section.bg-muted\/30 article:not(.discovery-card) strong { padding: 1px 7px; border-radius: 6px; background: rgb(0 171 227 / .12); color: var(--h-ink); font-weight: 700; white-space: nowrap; }

  /* ---- Groups inside a centred section (Event header container > Image cards): on the container's grid width,
     a small uppercase label in DGM primary, three or four cards per row, centred ---- */
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.discovery-card) { padding: 0; }
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.discovery-card) + .ce-anchor + section.dgm-ex-root { padding-top: 56px; }
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.discovery-card) > div { max-width: none; padding: 0; }
  #crm__widgets section.dgm-ex-root:has(> div > .grid > .discovery-card) > div > header { margin: 0 auto 20px; }
  #crm__widgets section.dgm-ex-root:has(> div > .grid > .discovery-card) > div > header h2 { margin: 0; color: var(--h-primary); font: 600 14px/21px Heading-Font, Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
  #crm__widgets .grid:has(> .discovery-card) { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  #crm__widgets .grid:has(> .discovery-card) > .discovery-card { flex: 0 1 calc((100% - 48px) / 3); height: auto; }
  #crm__widgets .grid:has(> .discovery-card:nth-child(4)):not(:has(> .discovery-card:nth-child(5))) > .discovery-card { flex-basis: calc((100% - 72px) / 4); }

  /* ---- Picture card (Image cards): the object whole on a quiet ground, chip on the picture, 14.5 px text, arrow link,
     the whole card is the link ---- */
  #crm__widgets .discovery-card { position: relative; border-color: rgb(227 232 236); box-shadow: none; transition: transform .25s ease, box-shadow .25s ease; }
  #crm__widgets .discovery-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgb(13 27 38 / .02), 0 18px 40px -24px rgb(13 27 38 / .35); }
  #crm__widgets .discovery-card:has(a:focus-visible) { outline: 2px solid var(--h-primary); outline-offset: 3px; }
  /* one frame for every card picture, filled edge to edge: the 4:3 copies are prepared so that cover keeps the object whole */
  #crm__widgets .discovery-card > div.relative { aspect-ratio: 4 / 3; background: #eef2f5; }
  #crm__widgets .discovery-card > div.relative img { object-fit: cover; object-position: center; }
  #crm__widgets .discovery-card > div.flex-1 { padding: 20px 22px 22px; }
  #crm__widgets .discovery-card h3 { font-size: 1rem; line-height: 1.5; }
  #crm__widgets .discovery-card h3 + * , #crm__widgets .discovery-card div.mt-2 { font-size: 14.5px; line-height: 23.5px; }
  #crm__widgets .discovery-card a { margin-top: 14px; font-size: 14px; }
  #crm__widgets .discovery-card a:focus-visible { outline: none; }
  #crm__widgets .discovery-card a::before { content: ""; position: absolute; inset: 0; border-radius: 16px; }
  #crm__widgets .discovery-card a:is([href^="/"], [href^="https://dgm.de/"], [href^="http://dgm.de/"]) > i.fa-arrow-up-right-from-square { display: none; }
  #crm__widgets .discovery-card a:is([href^="/"], [href^="https://dgm.de/"], [href^="http://dgm.de/"])::after { content: "\f061"; font: 900 11px/1 "Font Awesome 6 Pro"; transition: transform .25s ease; }
  #crm__widgets .discovery-card:hover a:is([href^="/"], [href^="https://dgm.de/"], [href^="http://dgm.de/"])::after { transform: translateX(3px); }


  /* ---- Statement with the means it names (Card grid whose cards carry a title only): the statement as a larger centred
     lead (21 px, at most 760 px), the means as one row of icon tiles; the whole tile is the link, its label is the title ---- */
  #crm__widgets section.dgm-ex-root:has(.dgm-ex-card-grid article h3 + div:empty) > div > header { max-width: 760px; }
  #crm__widgets section.dgm-ex-root:has(.dgm-ex-card-grid article h3 + div:empty) > div > header > div:last-child { font-size: 1.3125rem; line-height: 1.6; }
  #crm__widgets .dgm-ex-card-grid:has(article h3 + div:empty) { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px; max-width: none; margin-top: 8px; }
  #crm__widgets .dgm-ex-card-grid:has(article h3 + div:empty) > .dgm-ex-card-grid__item { width: auto; max-width: none; margin: 0; }
  #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) { gap: 12px; padding: 20px; }
  #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) > div:first-child { width: 44px; height: 44px; }
  #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) h3 { margin: 0; color: var(--h-text); font: 600 1rem/1.4 Heading-Font, Inter, sans-serif; }
  #crm__widgets .dgm-ex-card-grid article h3 + div:empty { display: none; }
  #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) a.dgm-ex-card-stretch { margin-top: auto; padding: 0; font-size: 0; }
  #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) a.dgm-ex-card-stretch > i { font-size: 12px; }
  /* internal card links get the arrow, not the external-link icon (the icon glyph is swapped, the element stays) */
  #crm__widgets section.dgm-ex-root:not([id^="dgm-"]) article a.dgm-ex-card-stretch:is([href^="/"], [href^="https://dgm.de/"], [href^="http://dgm.de/"]) > i.fa-arrow-up-right-from-square::before { content: "\f061"; }
  #crm__widgets section.dgm-ex-root:not([id^="dgm-"]) article:hover a.dgm-ex-card-stretch > i { transform: translateX(3px); transition: transform .25s ease; }
  /* keyboard: the card with the focused link carries the ring (tiles and topic cards) */
  #crm__widgets section.dgm-ex-root:not([id^="dgm-"]) .dgm-ex-card-grid article:has(a:focus-visible) { outline: 2px solid var(--h-primary); outline-offset: 3px; }
  #crm__widgets section.dgm-ex-root:not([id^="dgm-"]) .dgm-ex-card-grid article a:focus-visible { outline: none; }
  /* the first section under the full-screen hero shows in its 48 px hand-over strip (hero/MERGE.md section 5) */
  /* (round 2) the hero agent's compact hero adds nothing below its stage: the first section keeps its normal top padding */

  /* ---- Inset box in the split card (Exhibition section "Key-value table" inside the Venue card): the address box of the
     H2MSE venue card ---- */
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root > div > header:not(:has(*)) { display: none; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root > div > div:has(> table) { margin-top: 8px; padding: 4px 16px; border-radius: 12px; background: #f8fafc; box-shadow: none; }
  /* ---- Venue-style split card (Venue card container): monospace label, 24 px title, 14 px text, filled button ---- */
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header { margin: 0; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header > span.rounded-full { margin: 0; padding: 0; border: 0; background: none; color: var(--h-primary); font: 700 10px/15px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header > span.rounded-full i { display: none; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header h2 { margin-top: 4px; color: var(--h-text); font: 700 1.5rem/1.5 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header h2 + div { margin-top: 12px; color: var(--h-muted); font-size: 14px; line-height: 22.75px; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 20px; border-radius: 10px; background: var(--h-primary); color: #fff; font: 600 14px/21px Theme-Font, Inter, sans-serif; text-decoration: none; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex:is(:hover, :focus-visible) { background: #007aa8; color: #fff; }
  #crm__widgets > div:has(> article.dgm-venue-card) { margin-top: 8px; margin-bottom: 0; }

  /* ---- Dark showcase panel (Story chapters, dark, head only): radius 24, ink gradient, glow, glass date chip ---- */
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly {
    position: relative; isolation: isolate; width: var(--h-grid); margin: clamp(72px, 7.5vw, 112px) auto clamp(56px, 6vw, 96px); padding: clamp(48px, 5vw, 72px) 32px; overflow: hidden;
    border-radius: 24px; box-shadow: 0 40px 80px -40px rgb(0 33 44 / .7); clip-path: none; color: #fff; text-align: center;
    background: radial-gradient(60% 90% at 50% 0%, rgb(0 171 227 / .28), rgb(0 171 227 / 0) 70%), radial-gradient(40% 60% at 100% 100%, rgb(127 216 245 / .12), rgb(127 216 245 / 0) 70%), linear-gradient(160deg, var(--h-ink) 0%, var(--h-ink-2) 100%);
  }
  #crm__widgets section.bg-muted\/30 + .ce-anchor + .dgm-sc--tone-dark.dgm-sc--headonly, #crm__widgets section.bg-muted\/30 + .dgm-sc--tone-dark.dgm-sc--headonly { margin-top: 0; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--h-hex) center / 97px 168px; -webkit-mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent 80%); mask-image: radial-gradient(60% 80% at 50% 50%, #000, transparent 80%); }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__wrap { display: flex; flex-direction: column; align-items: center; max-width: 680px; margin: 0 auto; padding: 0; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__head { margin: 0; text-align: center; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__cards { display: none; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__title { margin: 0; color: #fff; font: 700 2.25rem/1.25 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__intro { margin-top: 16px; color: rgb(255 255 255 / .72); font: 400 1.125rem/1.625 Theme-Font, Inter, sans-serif; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__intro p { margin: 0; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__intro strong {
    display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border: 1px solid rgb(255 255 255 / .15); border-radius: 999px; background: rgb(255 255 255 / .06);
    color: #fff; font-weight: 700; white-space: nowrap;
  }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__intro strong::before { content: "\f274"; color: var(--h-sky); font: 900 12px/1 "Font Awesome 6 Pro"; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sb-btns { justify-content: center; margin: 28px 0 0; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border: 0; border-radius: 8px; background: var(--h-primary); color: #fff; font: 600 1rem/1.25 Theme-Font, Inter, sans-serif; text-decoration: none; box-shadow: 0 8px 20px rgb(0 171 227 / .3); transition: transform .2s ease, background-color .2s ease; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sb-btn:hover, #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sb-btn:focus-visible { transform: translateY(-2px); background: #007aa8; color: #fff; }
  #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

  /* ---- Phones: steps as compact cards, pictures cards as compact rows (small picture, title, two lines) ---- */
  @media (max-width: 639.98px) {
    .dgm-feh__logo { width: 168px; }
    /* cards on the light band (steps, topic cards) as compact cards: icon beside the title, text and link below */
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: center; padding: 16px 18px; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase)::after { top: 18px; right: 18px; font-size: 1.125rem; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card) > div:first-child { width: 40px; height: 40px; margin: 0; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase) > div:first-child { grid-row: span 2; align-self: start; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card) > div.uppercase { grid-column: 2; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card) h3 { grid-column: 2; font-size: 1.0625rem; line-height: 1.35; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase) h3 { padding-right: 36px; }
    #crm__widgets section.bg-muted\/30 article:not(.discovery-card) :is(h3 + div, a) { grid-column: 1 / -1; }
    /* the statement's means as compact rows: icon, title, arrow */
    #crm__widgets section.dgm-ex-root:has(.dgm-ex-card-grid article h3 + div:empty) > div > header > div:last-child { font-size: 1.125rem; }
    #crm__widgets .dgm-ex-card-grid:has(article h3 + div:empty) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; }
    #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) > div:first-child { flex: none; width: 40px; height: 40px; }
    #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) h3 { flex: 1; }
    #crm__widgets .dgm-ex-card-grid article:has(h3 + div:empty) a.dgm-ex-card-stretch { align-self: center; margin: 0; }
    #crm__widgets .grid:has(> .discovery-card) { gap: 12px; }
    /* one row height: a 96 px square thumbnail, title at most two lines, text at most two lines */
    #crm__widgets .grid:has(> .discovery-card) > .discovery-card { flex-basis: 100% !important; display: grid; grid-template-columns: 96px minmax(0, 1fr); height: 96px; }
    #crm__widgets .discovery-card > div.relative { width: 96px; height: 96px; aspect-ratio: 1; }
    #crm__widgets .discovery-card > div.relative > span { display: none; }
    #crm__widgets .discovery-card > div.flex-1 { justify-content: center; min-width: 0; padding: 9px 14px; overflow: hidden; }
    #crm__widgets .discovery-card > div.flex-1 > div.flex { align-items: flex-start; }
    #crm__widgets .discovery-card h3 { display: -webkit-box; overflow: hidden; font-size: 14.5px; line-height: 20px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #crm__widgets .discovery-card h3 + *, #crm__widgets .discovery-card div.mt-2 { display: -webkit-box; flex: none; margin-top: 2px; overflow: hidden; font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #crm__widgets .discovery-card a { position: static; margin: 0; padding: 0; font-size: 0; }
    #crm__widgets .discovery-card a::after { display: none; }
    #crm__widgets .discovery-card a > i { display: none; }
    #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly { width: auto; margin-inline: 8px; padding: 44px 24px; }
    #crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly .dgm-sc__title { font-size: 1.75rem; }
  }
  @media (prefers-reduced-motion: reduce) { #crm__widgets :is(.discovery-card, .dgm-sb-btn), #crm__widgets .discovery-card a::after { transition: none; transform: none !important; } }
}

/* ===================== Site header in the whole draft tree: the new start page's header (copied from
   Tools/HomeRedesign/home.css, read only). Pinned while scrolling up, it is a DGM-blue bar with white text on every page:
   pages with a dark full-screen hero (transparent menu over the hero) and pages with the normal light head alike. ===================== */
:root {
  --t-bar: linear-gradient(100deg, rgb(0 108 150 / .97) 0%, rgb(0 122 168 / .96) 45%, rgb(0 140 192 / .95) 100%);
  --t-bar-shadow: inset 0 -1px 0 rgba(127, 216, 245, .4), 0 12px 32px -20px rgba(0, 60, 90, .7);
  --t-wrap: min(1440px, 100vw - 2 * clamp(20px, 5.5vw, 96px));
}
/* the menu follows the content width from 1024 px (the shared menu sits flush with the screen edge) */
@media (min-width: 1024px) { .dgm-page-shell .mainmenu > .container { width: max(var(--t-wrap), 100vw - 48px); max-width: none; padding-inline: 0; } }
@media (min-width: 1120px) { .dgm-page-shell .mainmenu > .container { width: var(--t-wrap); } }
/* desktop header (xl, 1280 px and up): three columns, logo | menu | actions, the side columns equal, so the menu group is
   centred on the screen whatever the logo and the actions measure (as on the start page); the actions keep their natural
   width (the login label read "Logi" at 1280 px) and may reach into the column gap, never into the menu */
@media (min-width: 1280px) {
  .dgm-page-shell .mainmenu > .container > div { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .dgm-page-shell .mainmenu > .container > div > * { width: auto; margin: 0 !important; }
  .dgm-page-shell .mainmenu > .container > div > :first-child { justify-self: start; }
  .dgm-page-shell .mainmenu nav { gap: 4px; }
  .dgm-page-shell .mainmenu nav > div { margin: 0 !important; }
  .dgm-page-shell .mainmenu nav + div { justify-self: end; flex-wrap: nowrap; }
  .dgm-page-shell .mainmenu nav + div > * { flex: none; }
  .dgm-page-shell .mainmenu nav + div a { white-space: nowrap; }
}
/* a little tighter between 1280 and 1439 px so the actions keep clear of the menu */
@media (min-width: 1280px) and (max-width: 1439.98px) { .dgm-page-shell .mainmenu nav > div > a { padding-inline: 6px !important; } }
/* light-head pages, pinned: the menu group gets the start page's pill inset */
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav { padding: 4px 8px; border-radius: 10px; }
/* an empty menu entry (a link without a label, last in the main menu) takes no room: not in the desktop pill, not in the
   phone menu sheet; entries with a label are never matched */
.dgm-page-shell .mainmenu nav > div:has(> a > span:empty),
.dgm-mainmenu-mobile__group:has(> .dgm-mainmenu-mobile__row > a > span:empty) { display: none !important; }
/* the pinned bar: DGM blue from the deep shade (white text 4.9:1) towards the brand cyan, a cyan hairline below */
body .dgm-page-shell--fullscreen-hero .mainmenu.dgm-mainmenu--overlay.dgm-mainmenu--float::before,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float::before { background: var(--t-bar); box-shadow: var(--t-bar-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
body .dgm-page-shell--fullscreen-hero .mainmenu.dgm-mainmenu--float .dgm-mainmenu-overlay-nav { background: rgba(255, 255, 255, .1); }

/* full-screen hero pages: search, language and login share one glass style on the hero and in the pinned bar; login is the solid one */
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions { gap: 8px; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions > * { margin-inline: 0 !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div [data-slot="search-trigger"] > button,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div #options-menu,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div > a {
  font: 500 .875rem/1.3 Theme-Font, Inter, system-ui, sans-serif !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto; height: 36px; min-width: 36px;
  padding: 0 12px !important; border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: 10px !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important;
  letter-spacing: 0; box-shadow: none !important; transform: none !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s, border-color .2s, color .2s !important;
}
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div [data-slot="search-trigger"] > button { width: 36px; padding: 0 !important; font-size: 14px !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button i,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu :is(i, span),
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div :is([data-slot="search-trigger"] > button, #options-menu) :is(i, span) { color: inherit !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button:hover,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu:hover,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu[aria-expanded="true"],
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div :is([data-slot="search-trigger"] > button, #options-menu):is(:hover, [aria-expanded="true"]) { border-color: rgba(255, 255, 255, .42) !important; background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu span { padding-left: 0; font-weight: 600; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu .fa-globe { opacity: .85; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu .dgm-langmenu__chev { font-size: 11px; opacity: .75; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div > a { padding: 0 14px !important; border-color: #fff !important; background: #fff !important; color: #003e52 !important; font-weight: 600 !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a:is(:hover, :focus),
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav + div > a:is(:hover, :focus) { border-color: #e3f4fb !important; background: #e3f4fb !important; color: #003e52 !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions > a > span { display: inline-flex !important; font-size: 14px; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions :is(button, a):focus-visible,
body .dgm-page-shell .mainmenu.dgm-mainmenu--float :is(button, a):focus-visible { outline: 3px solid #7fd8f5 !important; outline-offset: 2px; }

/* the main menu items had no visible keyboard focus: a ring in the bar's colour family */
.dgm-page-shell .mainmenu nav > div > a:focus-visible { outline: 2px solid #00abe3 !important; outline-offset: 2px; border-radius: 6px; }
.dgm-page-shell--fullscreen-hero .mainmenu nav > div > a:focus-visible, body .dgm-page-shell .mainmenu.dgm-mainmenu--float nav > div > a:focus-visible { outline-color: #7fd8f5 !important; }
/* light-head pages, pinned: white logo, white top-level menu items (the dropdown panels below stay white with dark text),
   a white menu button on phones */
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float #logo img { filter: brightness(0) invert(1); }
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav { background: rgba(255, 255, 255, .1); }
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav > div > a,
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav > div > a :is(span, i),
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float .xl\:hidden > button { color: #fff !important; }
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float nav > div > a:hover { background: rgba(255, 255, 255, .12); }
body .dgm-page-shell:not(.dgm-page-shell--fullscreen-hero) .mainmenu.dgm-mainmenu--float .xl\:hidden > button:hover { background: rgba(255, 255, 255, .12); }

/* header dropdowns on the dark hero and its pinned bar: a deep, almost opaque panel instead of 42 % glass */
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal { max-width: 420px; border-radius: 14px; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal:has(.grid-cols-2) { max-width: 680px; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal::before { background: rgb(0 62 82 / .95); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal > div { border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .6); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal > div::before { background: radial-gradient(120% 70% at 0% 0%, rgba(0, 171, 227, .16), transparent 62%); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal > div > div { padding: 6px !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal .grid { gap: 2px !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a { align-items: center; gap: 12px; padding: 9px 12px 9px 10px !important; border-radius: 10px; box-shadow: none !important; transform: none !important; scale: none !important; transition: background-color .25s cubic-bezier(.45, 0, .25, 1) !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a > * + * { margin-left: 0 !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .08) !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a > div:first-child { flex: none; margin: 0; padding: 0; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .07); color: #7fd8f5 !important; font-size: 15px; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:hover i { background: rgba(0, 171, 227, .2); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a p:first-child { font: 600 .9375rem/1.3 Theme-Font, Inter, sans-serif; color: #fff !important; letter-spacing: -.006em; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a p + p { margin-top: 2px; color: rgba(255, 255, 255, .68) !important; font: 400 .8125rem/1.4 Theme-Font, Inter, sans-serif; letter-spacing: 0; }

/* ===================== Brief 06 on the pages below the hubs: light page heads, text cards, the award page ===================== */
body {
  /* ---- Light page head (Exhibition section "Guidelines header", or Image Hero "Text beside image", Compact, light):
     pill eyebrow with the section's name, h1 36 px / 700, lead 18 px, at most one button; on the card-grid width ---- */
  #crm__widgets section.dgm-ex-root:has(> div > header h1) { padding: clamp(24px, 3vw, 40px) 0 8px; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) > div { width: var(--h-grid); max-width: none; padding-inline: 0; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) > div > header { margin: 0 0 16px; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) header > div > div > span.rounded-full { margin-bottom: 14px; padding: 6px 12px; font-size: 11px; letter-spacing: .1em; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) h1 { margin: 0; color: var(--h-text); font: 700 2.25rem/1.25 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) h1 + div { max-width: 680px; margin-top: 14px; color: var(--h-muted); font-size: 1.125rem; line-height: 1.625; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) header a { padding: 12px 20px; border-radius: 10px; background: var(--h-primary); color: #fff; font: 600 1rem/1.25 Theme-Font, Inter, sans-serif; box-shadow: none; }
  #crm__widgets section.dgm-ex-root:has(> div > header h1) header a:is(:hover, :focus-visible) { background: #007aa8; color: #fff; }
  @media (max-width: 639.98px) { #crm__widgets section.dgm-ex-root:has(> div > header h1) h1 { font-size: 1.875rem; } }

  #crm__widgets .dgm-ih--split.dgm-ih--h-compact { padding: clamp(24px, 3vw, 40px) 0 8px; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__frame { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(24px, 4vw, 64px);
    width: var(--h-grid); max-width: none; min-height: 0; margin: 0 auto; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: var(--h-text); }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__frame::before { content: none; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__body { order: 1; max-width: none; padding: 0; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-sb-eyebrow { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 14px; padding: 6px 12px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px; background: rgb(0 171 227 / .05); color: var(--h-primary); font: 700 11px/16.5px Theme-Font, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-sb-eyebrow i { display: inline; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__title { margin: 0; color: var(--h-text); font: 700 2.25rem/1.25 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__lead { max-width: 680px; margin-top: 14px; color: var(--h-muted); font: 400 1.125rem/1.625 Theme-Font, Inter, sans-serif; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__lead p { margin: 0; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__media { position: relative; order: 2; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgb(15 34 51 / .05), 0 24px 48px -28px rgb(15 34 51 / .45); }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__media::after { content: none; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact :is(.dgm-sb-btn, .dgm-ih__body a[class*="btn"]) { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 20px; border: 0; border-radius: 10px; background: var(--h-primary); color: #fff; font: 600 1rem/1.25 Theme-Font, Inter, sans-serif; text-decoration: none; box-shadow: none; }
  #crm__widgets .dgm-ih--split.dgm-ih--h-compact :is(.dgm-sb-btn, .dgm-ih__body a[class*="btn"]):is(:hover, :focus-visible) { background: #007aa8; color: #fff; }
  @media (max-width: 767.98px) {
    #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__frame { grid-template-columns: minmax(0, 1fr); }
    #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__media { order: 2; aspect-ratio: 16 / 10; }
    #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__title { font-size: 1.875rem; }
  }
  /* the hero h1 without an accent word: the whole word in the gradient (one-word titles such as Mitgliedschaft) */
  .dgm-feh h1:not(:has(.dgm-feh__shimmer)) { background: linear-gradient(90deg, #fff 0%, #fff 30%, var(--h-sky) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* ---- Two text sections side by side (2 Column Container with header-only Exhibition sections): two cards ---- */
  #crm__widgets > .grid.container.my-12 { width: var(--h-grid); gap: 24px; padding: clamp(40px, 5vw, 72px) 0 8px; }
  #crm__widgets > .grid.container.my-12 section.dgm-ex-root { height: 100%; padding: 28px 28px 30px; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff; }
  #crm__widgets > .grid.container.my-12 section.dgm-ex-root > div { width: auto; max-width: none; }
  #crm__widgets > .grid.container.my-12 section.dgm-ex-root header { max-width: none; margin: 0; text-align: left; }
  #crm__widgets > .grid.container.my-12 section.dgm-ex-root header h2 { margin: 0; color: var(--h-text); font: 700 1.5rem/1.5 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
  #crm__widgets > .grid.container.my-12 section.dgm-ex-root header h2 + div { margin-top: 10px; color: var(--h-muted); font-size: 15px; line-height: 1.65; }
  #crm__widgets > .grid.container.my-12 section.dgm-ex-root .dgm-ex-card-grid { display: none; }
  /* header-only sections elsewhere (the split card's text column) do not show an empty card grid */
  #crm__widgets .dgm-venue-card__body .dgm-ex-card-grid:not(:has(.dgm-ex-card-grid__item)) { display: none; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex { margin-left: 0; }
  #crm__widgets .dgm-venue-card__body section.dgm-ex-root strong { padding: 1px 7px; border-radius: 6px; background: rgb(0 171 227 / .12); color: var(--h-ink); font-weight: 700; white-space: nowrap; }

  /* ---- Award page: the widget on the card-grid width, the previous / next links as two centred link cards ---- */
  #crm__widgets > .frame-type-html:has(> [name="award-details"]) { width: var(--h-grid); margin-inline: auto; }
  #crm__widgets section.dgm-ex-root:has(> div > div > a[href] .fa-arrow-left), #crm__widgets section#weitere-preise { padding: 8px 0 clamp(48px, 6vw, 96px); }
  #crm__widgets section#weitere-preise > div { width: var(--h-grid); max-width: none; padding-inline: 0; }
}

body {
  /* ---- Questions and answers: a centred section head like every other section, the list stays 860 px wide ---- */
  #crm__widgets section.dgm-ex-root:has(details.faq-item) { padding: clamp(56px, 6vw, 96px) 0; }
  #crm__widgets section.dgm-ex-root:has(details.faq-item) > div > header { align-items: center; margin: 0 0 28px; text-align: center; }
  #crm__widgets section.dgm-ex-root:has(details.faq-item) > div > header h2 { color: var(--h-text); font: 700 2.25rem/1.25 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
  @media (max-width: 639.98px) { #crm__widgets section.dgm-ex-root:has(details.faq-item) > div > header h2 { font-size: 1.75rem; } }
  /* ---- Seven cards: four and three, centred (no lone card in a row) ---- */
  @media (min-width: 1024px) {
    #crm__widgets .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(7):last-child) { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
    #crm__widgets .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(7):last-child) > .dgm-ex-card-grid__item { flex: 0 1 calc((100% - 60px) / 4); width: auto; max-width: none; margin: 0; }
  }
  /* ---- Award page: air between the widget and the split card; previous / next as two link cards, arrows outward ---- */
  #crm__widgets > .frame-type-html:has([name="award-details"]) ~ div:has(> article.dgm-venue-card) { margin-top: clamp(48px, 6vw, 88px); }
  #crm__widgets section#weitere-preise > div > div { gap: 16px; }
  #crm__widgets section#weitere-preise a { min-height: 56px; padding: 14px 20px; border-radius: 14px; font-size: 15px; }
  #crm__widgets section#weitere-preise a:has(.fa-arrow-left) { flex-direction: row-reverse; justify-content: flex-end; gap: 12px; }
  #crm__widgets section#weitere-preise a:not(:has(.fa-arrow-left)) { justify-content: space-between; }
  #crm__widgets section#weitere-preise a i { color: var(--h-primary); font-size: 13px; }
}
/* links inside running text of our sections: DGM primary, underlined; hover keeps the colour and thickens the underline */
#crm__widgets section.dgm-ex-root header :is(p, li) a:not(.inline-flex) { color: #00abe3; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#crm__widgets section.dgm-ex-root header :is(p, li) a:not(.inline-flex):hover { text-decoration-thickness: 2px; }

/* ===================== Vertical rhythm of the whole tree (user, 2026-11-10: "too much space between some elements") =====================
   Tokens: the empty space between the last content of one section and the first content of the next is --s-gap
   (104 px at 1440, 86 at 1024, 58 at 390, never more than 128). Sections on the same ground each carry half of it, so two
   paddings never add up; the tinted band carries --s-band inside (72 px at 1440), so band plus neighbour stays under 128.
   Inside a section: head to content --s-head (52 px), a lead to the cards under it --s-lead (36 px); group label to its
   cards 20 px. The dark closing panel sits one gap below the content before it, and the footer one gap below the panel.
   The space inside cards and inside the hero is not touched. */
:root {
  --s-gap: clamp(56px, 41px + 4.38vw, 112px);
  --s-half: calc(var(--s-gap) / 2);
  --s-band: clamp(32px, 20px + 3.6vw, 72px);
  --s-head: clamp(32px, 18px + 2.4vw, 52px);
  --s-lead: clamp(28px, 22px + 1vw, 36px);
  --s-face: max(8px, calc(var(--s-gap) + 4px - var(--s-band)));
}
body {
  /* top-level sections (not the heads with the h1, not the interactive hero's own sections) */
  #crm__widgets > section.dgm-ex-root:not(:has(> div > header h1)):not([id^="dgm-"]) { padding-top: var(--s-half); padding-bottom: var(--s-half); }
  #crm__widgets > section.dgm-ex-root.bg-muted\/30 { padding-top: var(--s-band); padding-bottom: var(--s-band); }
  #crm__widgets > section.dgm-ex-root:has(details.faq-item) { padding-top: var(--s-half); padding-bottom: var(--s-half); }
  #crm__widgets > div:has(> article.dgm-venue-card) { margin: 0 auto; padding-top: var(--s-half); padding-bottom: var(--s-half); }
  #crm__widgets > .grid.container.my-12 { margin-top: 0; margin-bottom: 0; padding-top: var(--s-half); padding-bottom: var(--s-half); }
  #crm__widgets > .frame-type-html:has([name="award-details"]) { margin-bottom: var(--s-half); }
  #crm__widgets > .frame-type-html:has([name="award-details"]) ~ div:has(> article.dgm-venue-card) { margin-top: 0; }
  #crm__widgets section#weitere-preise { padding-top: 0; padding-bottom: var(--s-gap); }
  /* the sibling bar is content too: half a gap below it, the next section brings the other half */
  #crm__widgets > .frame-type-menu_subpages { margin-bottom: calc(var(--s-half) - 16px); }
  /* inside a section: head to content, lead to cards */
  #crm__widgets > section.dgm-ex-root > div > header:not(:has(h1)) { margin-bottom: var(--s-head); }
  #crm__widgets > section.dgm-ex-root > div > header:not(:has(h1)):has(h2 + div) { margin-bottom: var(--s-lead); }
  /* the dark closing panel: one gap below the content before it (a half from the section, a half here), one gap to the footer */
  /* where a section meets the tinted band, its padding toward the band shrinks, so band plus neighbour stays under 128 px */
  #crm__widgets#crm__widgets > :is(section, div):has(+ .ce-anchor + section.bg-muted\/30, + section.bg-muted\/30) { padding-bottom: var(--s-face); }
  #crm__widgets#crm__widgets > section.bg-muted\/30 + .ce-anchor + :is(section, div):not(.dgm-sc), #crm__widgets#crm__widgets > section.bg-muted\/30 + :is(section, div):not(.dgm-sc) { padding-top: var(--s-face); }
  #crm__widgets#crm__widgets > section.bg-muted\/30:has(+ .ce-anchor + .dgm-sc--tone-dark, + .dgm-sc--tone-dark) { padding-bottom: calc(var(--s-half) - 20px); }
  /* a section that ends in cards: the cards' own inner padding already reads as space */
  #crm__widgets#crm__widgets > section.dgm-ex-root:has(article):not(.bg-muted\/30):not([id^="dgm-"]):not(:has(> div > header h1)) { padding-bottom: calc(var(--s-half) - 12px); }
  /* the closing panel: the section before brings half a gap, the panel's own top padding the rest; the footer's own top
     padding (80 px at 1440) is most of the gap below it */
  #crm__widgets#crm__widgets .dgm-sc--tone-dark.dgm-sc--headonly { margin-top: 0; margin-bottom: max(0px, calc(var(--s-gap) - 80px)); padding-top: clamp(32px, 4vw, 60px); padding-bottom: clamp(32px, 4vw, 60px); }
}

/* a CRM widget 0.6 px wider than the phone column (the DGM-Dienstag list at 360 px) does not scroll the page sideways;
   clip, unlike hidden, keeps the sticky sibling bar working */
#crm__widgets { overflow-x: clip; }

/* ---- Picture tiles (Image cards whose cards carry a title only): a low picture on top, the title under it, five in a row;
   the link's label is the title (read by screen readers), shown as the arrow. (:has() cannot be nested, so a tile is
   found by its title row followed directly by the link.) ---- */
body {
  #crm__widgets .grid:has(> .discovery-card > div.flex-1 > div.flex + a) { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 16px; }
  #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) > div.relative { aspect-ratio: 16 / 9; }
  #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) > div.flex-1 { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 16px; }
  #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) h3 { font-size: .9375rem; line-height: 1.4; }
  #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) a { flex: none; margin: 2px 0 0; font-size: 0; }
  #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) a::after { font-size: 12px; }
  /* the statement above the tiles: a larger centred lead */
  #crm__widgets > section.dgm-ex-root:has(.discovery-card > div.flex-1 > div.flex + a) > div > header { max-width: 760px; }
  #crm__widgets > section.dgm-ex-root:has(.discovery-card > div.flex-1 > div.flex + a) > div > header > div:last-child { font-size: 1.3125rem; line-height: 1.6; }
  /* nested Image cards without a group label: no empty header */
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.discovery-card) > div > header:not(:has(h2)) { display: none; }
  @media (max-width: 639.98px) {
    #crm__widgets > section.dgm-ex-root:has(.discovery-card > div.flex-1 > div.flex + a) > div > header > div:last-child { font-size: 1.125rem; }
    #crm__widgets .grid:has(> .discovery-card > div.flex-1 > div.flex + a) { display: flex; gap: 10px; }
    #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) { height: 72px; grid-template-columns: 96px minmax(0, 1fr); }
    #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) > div.relative { width: 96px; height: 72px; aspect-ratio: auto; }
    #crm__widgets .grid > .discovery-card:not(:has(div.mt-2)) > div.flex-1 { align-items: center; padding: 10px 16px; }
  }
}

/* the footer follows one gap below the last content: no extra footer margin (the site sets 128 px) or content margin; the
   footer's own top padding (80 px at 1440, 56 px on phones) is most of that gap, the last section brings the rest */
/* (go-live) only on pages built with the new patterns (sibling bar or a hub hero in the content column): the form and
   confirmation pages below the tree keep the site's own footer spacing */
body:has(#crm__widgets > :is(.frame-type-menu_subpages, section.dgm-feh, section#dgm-intro)) .dgm-page-shell footer { margin-top: 0; }
body:has(#crm__widgets > :is(.frame-type-menu_subpages, section.dgm-feh, section#dgm-intro)) #crm__widgets { margin-bottom: 0; }
#crm__widgets#crm__widgets > section:last-child:not(.dgm-sc--headonly), #crm__widgets#crm__widgets > div:last-child:has(> article.dgm-venue-card) { padding-bottom: max(16px, calc(var(--s-gap) - 80px)); }

/* ===================== Owner round 2 (2026-11-10, after the director's audit) ===================== */
/* ---- Award pages end right after their widget: what follows a CRM widget frame placed directly in the content column
   (the award page anatomy) is never held back by the family's fade-up. The fade was set up while the widget still had
   its reservation, and a capture or a fast scroll that never reached the new position left the split card at opacity 0,
   a blank of several hundred pixels. about.js also reveals any [data-reveal] that is in or above the viewport. ---- */
#crm__widgets > .frame-type-html:has(> :is(custom-plugin-element, .custom-compiled-plugin-element, [role="status"][name])) ~ * [data-reveal],
#crm__widgets > .frame-type-html:has(> :is(custom-plugin-element, .custom-compiled-plugin-element, [role="status"][name])) ~ [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---- Contact panel (Exhibition section "Contact CTA"): the left half in the ink gradient of the closing panels (white
   text, white 72 % lead), the e-mail button filled #00abe3 with a white label, hover #007aa8; the card on the family
   shell (radius 24, neutral border). The right half (portrait, contact rows) stays as it is. ---- */
#crm__widgets section.dgm-ex-root div.max-w-4xl:has(> .grid > div.bg-primary.text-white) { border-color: rgb(227 232 236); border-radius: 24px; box-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 30px 60px -36px rgb(0 33 44 / .45); }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(70% 80% at 0% 0%, rgb(0 171 227 / .28), rgb(0 171 227 / 0) 70%), radial-gradient(50% 60% at 100% 100%, rgb(127 216 245 / .12), rgb(127 216 245 / 0) 70%), linear-gradient(160deg, #003e52 0%, #00212c 100%);
}
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--h-hex) center / 97px 168px; -webkit-mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent 80%); mask-image: radial-gradient(70% 80% at 30% 40%, #000, transparent 80%); }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white h2 { color: #fff; font: 700 1.875rem/1.25 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white h2 + div { color: rgb(255 255 255 / .72); font-size: 1.0625rem; line-height: 1.65; }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white h2 + div a { color: #fff; }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white a.inline-flex { border: 0; border-radius: 10px; background: #00abe3; color: #fff; font-weight: 600; box-shadow: 0 8px 20px rgb(0 171 227 / .3); }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white a.inline-flex i { color: #fff; }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white a.inline-flex:is(:hover, :focus-visible) { background: #007aa8; color: #fff; }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white a.inline-flex:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#crm__widgets section.dgm-ex-root div.max-w-4xl > .grid > div.bg-primary.text-white .text-white\/80 { color: rgb(255 255 255 / .72); }

/* ===================== Owner round 2: patterns of the single first-level pages ===================== */
body {
  /* ---- Long legal document (legalDoc(): html element .ab-legal): a sticky table of contents beside a 720 px text column
     on wide screens; on phones and tablets a collapsible "Inhalt" above the text. Every § a numbered section on a hairline. ---- */
  #crm__widgets > .frame-type-html:has(> .ab-legal) { width: var(--h-grid); margin: 0 auto; padding: var(--s-half) 0; }
  #crm__widgets .ab-legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; color: #334155; }
  #crm__widgets .ab-legal__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
  #crm__widgets .ab-legal__toc a { display: flex; gap: 10px; padding: 7px 12px; border-radius: 10px; color: #0f172a; font: 500 14px/1.4 Theme-Font, Inter, sans-serif; text-decoration: none; transition: background-color .2s, color .2s; }
  #crm__widgets .ab-legal__toc a .ab-legal__no { flex: none; min-width: 2.4em; color: var(--h-primary); font: 700 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
  #crm__widgets .ab-legal__toc a:hover { background: rgb(0 171 227 / .07); }
  #crm__widgets .ab-legal__toc a[aria-current="true"] { background: rgb(0 171 227 / .1); color: var(--h-ink); font-weight: 600; }
  #crm__widgets .ab-legal__toc a:focus-visible { outline: 2px solid var(--h-primary); outline-offset: 1px; }
  #crm__widgets .ab-legal__toc--sheet { border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff; }
  #crm__widgets .ab-legal__toc--sheet > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 18px; color: var(--h-text); font: 700 15px/1.3 Heading-Font, Inter, sans-serif; cursor: pointer; list-style: none; }
  #crm__widgets .ab-legal__toc--sheet > summary::-webkit-details-marker { display: none; }
  #crm__widgets .ab-legal__toc--sheet > summary::after { content: "\f078"; color: var(--h-primary); font: 900 12px/1 "Font Awesome 6 Pro"; transition: transform .2s ease; }
  #crm__widgets .ab-legal__toc--sheet[open] > summary::after { transform: rotate(180deg); }
  #crm__widgets .ab-legal__toc--sheet > ol { padding: 0 8px 10px; }
  #crm__widgets .ab-legal__toc--side { display: none; }
  #crm__widgets .ab-legal__body { max-width: 720px; }
  #crm__widgets .ab-legal__para { position: relative; padding: 36px 0 8px; border-top: 1px solid rgb(227 232 236); scroll-margin-top: 132px; }
  #crm__widgets .ab-legal__para:first-child { padding-top: 0; border-top: 0; }
  #crm__widgets .ab-legal__alias { position: absolute; top: 0; }
  #crm__widgets .ab-legal__para h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; color: var(--h-text); font: 700 1.5rem/1.3 Heading-Font, Inter, sans-serif; letter-spacing: -.02em; }
  #crm__widgets .ab-legal__para h2 .ab-legal__no { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px; background: rgb(0 171 227 / .06); color: var(--h-primary); font: 700 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; transform: translateY(-3px); }
  #crm__widgets .ab-legal__text { font: 400 16.5px/1.75 Theme-Font, Inter, sans-serif; }
  #crm__widgets .ab-legal__text :is(p, ol, ul) { margin: 0 0 14px; }
  #crm__widgets .ab-legal__text ol { padding-left: 1.6em; list-style: decimal; }
  #crm__widgets .ab-legal__text ol ol { margin: 8px 0 4px; list-style: decimal; }
  #crm__widgets .ab-legal__text ul { padding-left: 1.3em; list-style: disc; }
  #crm__widgets .ab-legal__text li { margin: 0 0 8px; padding-left: 4px; }
  #crm__widgets .ab-legal__text li::marker { color: var(--h-primary); font-weight: 700; }
  #crm__widgets .ab-legal__text ul li::marker { color: rgb(0 171 227 / .7); }
  #crm__widgets .ab-legal__text a { color: var(--h-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  #crm__widgets .ab-legal__text a:hover { text-decoration-thickness: 2px; }
  @media (min-width: 1024px) {
    #crm__widgets .ab-legal { grid-template-columns: 260px minmax(0, 720px); justify-content: center; gap: 64px; }
    #crm__widgets .ab-legal__toc--sheet { display: none; }
    #crm__widgets .ab-legal__toc--side { display: block; position: sticky; top: 132px; align-self: start; max-height: calc(100vh - 156px); overflow: auto; padding: 18px 10px; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff; }
    #crm__widgets .ab-legal__toc-label { margin: 0 12px 8px; color: var(--h-primary); font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; }
  }
  @media (max-width: 639.98px) { #crm__widgets .ab-legal__para h2 { font-size: 1.3125rem; } #crm__widgets .ab-legal__text { font-size: 16px; } }

  /* ---- Nested exhibition sections without a heading of their own (timeline, cover cards inside a centred section) ---- */
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.template-card), :has(ol.rounded-2xl > li.grid)) { padding: 0; }
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.template-card), :has(ol.rounded-2xl > li.grid)) > div { max-width: none; padding: 0; }
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.template-card), :has(ol.rounded-2xl > li.grid)) > div > header:not(:has(h2)) { display: none; }
  /* a group label above cover cards: the award groups' small uppercase label in DGM primary, centred */
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.template-card) > div > header { max-width: none; margin: 0 0 20px; text-align: center; }
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.template-card) > div > header h2 { margin: 0; color: var(--h-primary); font: 600 14px/21px Heading-Font, Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
  #crm__widgets section.dgm-ex-root section.dgm-ex-root:has(.template-card) + .ce-anchor + section.dgm-ex-root:has(.template-card) { padding-top: 48px; }

  /* ---- Timeline (timeline(): Event steps list): the year large on the left, a dot on a vertical line, the text right ---- */
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) { position: relative; max-width: 820px; margin: 0 auto; padding: 0; border: 0; background: none; box-shadow: none; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li { position: relative; display: grid; grid-template-columns: 148px 40px minmax(0, 1fr); align-items: start; gap: 0; padding: 0 0 28px; border: 0; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li::before { content: ""; position: absolute; top: 18px; bottom: -6px; left: 167px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(0 171 227 / .45), rgb(0 171 227 / .15)); }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li:last-child { padding-bottom: 0; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li:last-child::before { content: none; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li > div.font-mono { grid-column: 2; grid-row: 1; justify-self: center; width: 16px; height: 16px; margin-top: 9px; border: 3px solid #fff; border-radius: 50%; background: var(--h-primary); box-shadow: 0 0 0 2px rgb(0 171 227 / .35); font-size: 0; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li > div.min-w-0 { display: contents; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li h3 { grid-column: 1; grid-row: 1; margin: 0; padding-right: 8px; color: var(--h-ink); font: 800 1.625rem/1.25 Heading-Font, Inter, sans-serif; letter-spacing: -.02em; text-align: right; }
  #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li h3 + div { grid-column: 3; grid-row: 1; margin: 0; padding: 4px 0 0; color: #334155; font-size: 16.5px; line-height: 1.65; }
  @media (max-width: 639.98px) {
    #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li { grid-template-columns: 28px minmax(0, 1fr); padding-bottom: 22px; }
    #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li::before { left: 13px; }
    #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li > div.font-mono { grid-column: 1; margin-top: 6px; }
    #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li h3 { grid-column: 2; padding: 0 0 2px 6px; font-size: 1.375rem; text-align: left; }
    #crm__widgets ol.rounded-2xl:has(> li.grid > div.font-mono) > li h3 + div { grid-column: 2; grid-row: 2; padding: 0 0 0 6px; font-size: 16px; }
  }

  /* ---- Cover, download and logo cards (docCards(): Template downloads): four in a row on the card grid, a quiet frame
     with the cover whole on a paper shadow (or the logo on white), title, mono pill, text, the filled button ---- */
  #crm__widgets .grid:has(> .template-card) { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; }
  #crm__widgets .grid:has(> .template-card):not(:has(> .template-card:nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(232px, 352px)); justify-content: center; }
  #crm__widgets .template-card { position: relative; border-color: rgb(227 232 236); border-radius: 16px; box-shadow: none; transition: transform .25s ease, box-shadow .25s ease; }
  #crm__widgets .template-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgb(13 27 38 / .02), 0 18px 40px -24px rgb(13 27 38 / .35); }
  #crm__widgets .template-card:has(a:focus-visible) { outline: 2px solid var(--h-primary); outline-offset: 3px; }
  #crm__widgets .template-card > div:first-child { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #f1f7fa, #e6f1f6); }
  #crm__widgets .template-card > div:first-child > img { height: 84%; max-width: 84%; border: 0; border-radius: 3px; box-shadow: 0 1px 2px rgb(15 34 51 / .12), 0 14px 28px -14px rgb(15 34 51 / .45); transition: transform .35s ease; }
  #crm__widgets .template-card:hover > div:first-child > img { transform: scale(1.03); }
  #crm__widgets .template-card > div:first-child > img[src*="/DieDGM-Neu/covers/screen-"] { height: auto; width: 88%; max-width: 88%; }
  #crm__widgets .template-card:has(img[src*="/DieDGM-Neu/logos/"]) > div:first-child { aspect-ratio: 16 / 10; background: #fff; }
  #crm__widgets .template-card:has(img[src*="/DieDGM-Neu/logos/"]) > div:first-child > img { width: 100%; height: 100%; max-width: none; border-radius: 0; box-shadow: none; object-fit: contain; }
  #crm__widgets .template-card:has(img[src*="/DieDGM-Neu/logos/"]) > div:first-child > div.absolute { display: none; }
  #crm__widgets .template-card > div.flex-1 { padding: 18px 20px 20px; }
  #crm__widgets .template-card h3 { color: var(--h-text); font: 700 1rem/1.4 Heading-Font, Inter, sans-serif; }
  #crm__widgets .template-card h3 + span { color: #475569; }
  #crm__widgets .template-card div.mt-2 { color: var(--h-muted); font-size: 14.5px; line-height: 23.5px; }
  #crm__widgets .template-card a.bg-primary { margin-top: 16px; padding: 10px 16px; border-radius: 10px; background: var(--h-primary); color: #fff; font: 600 14px/1.25 Theme-Font, Inter, sans-serif; box-shadow: none; }
  #crm__widgets .template-card a.bg-primary:is(:hover, :focus-visible) { background: #007aa8; color: #fff; }
  #crm__widgets .template-card a.bg-primary::before { content: ""; position: absolute; inset: 0; border-radius: 16px; }
  #crm__widgets .template-card a.bg-primary:focus-visible { outline: none; }
  /* the button icon says where it goes: download for a PDF, arrow for a page, external arrow for another website */
  #crm__widgets .template-card a.bg-primary:not([href$=".pdf"]) > i.fa-arrow-down::before { content: "\f061"; }
  #crm__widgets .template-card a.bg-primary[href^="http"]:not([href*="//dgm.de"]):not([href*="//www.dgm.de"]) > i.fa-arrow-down::before { content: "\f08e"; }
  @media (max-width: 639.98px) {
    #crm__widgets .grid:has(> .template-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #crm__widgets .grid:has(> .template-card):not(:has(> .template-card:nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
    #crm__widgets .template-card > div.flex-1 { padding: 12px 14px 14px; }
    #crm__widgets .template-card h3 { font-size: .9375rem; }
    #crm__widgets .template-card a.bg-primary { align-self: stretch; padding: 9px 10px; font-size: 13px; }
    #crm__widgets .grid:has(> .template-card:has(img[src*="/DieDGM-Neu/logos/"])) { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---- Team (teamSection(): the live team element through "Insert records"): its own heading hidden (the section head
     above says it), the people as cards in two columns: portrait, name, role, e-mail and phone, the duties ---- */
  #crm__widgets div:has(> div > ul[role="list"] > li > img.flex-none) { width: 100%; max-width: none; margin: 0; padding: 0; }
  #crm__widgets div:has(> div > ul[role="list"] > li > img.flex-none) > div { padding: 0; }
  #crm__widgets div:has(> ul[role="list"] > li > img.flex-none) > div.mx-auto:first-child { display: none; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: none; margin: 0; text-align: left; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 20px; padding: 22px; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li > img { width: 112px; height: 140px; border-radius: 12px; background: rgb(0 171 227 / .08); object-fit: cover; object-position: center 20%; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li h3 { margin: 2px 0 4px; color: var(--h-text); font: 700 1.0625rem/1.35 Heading-Font, Inter, sans-serif; letter-spacing: -.01em; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li h3 + div { color: var(--h-primary); font: 600 13px/1.4 Theme-Font, Inter, sans-serif; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-1\.5 { margin-top: 10px; font-size: 14px; line-height: 1.5; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-1\.5 a { color: var(--h-primary); font-weight: 500; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-1\.5 a:hover { text-decoration: underline; text-underline-offset: 3px; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-6 { margin-top: 12px; color: var(--h-muted); font-size: 14px; line-height: 1.55; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-6 ul { margin: 0; padding-left: 1.1em; list-style: disc; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-6 li { margin: 0 0 3px; }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-6 li::marker { color: rgb(0 171 227 / .7); }
  #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-6 a { color: var(--h-primary); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 899.98px) { #crm__widgets ul[role="list"]:has(> li > img.flex-none) { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 479.98px) {
    #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px; }
    #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li > img { width: 76px; height: 96px; }
    #crm__widgets ul[role="list"]:has(> li > img.flex-none) > li div.mt-6 { grid-column: 1 / -1; }
  }

  /* ---- Donation form (liveHtml() of the PayPal form, inside a centred section): the filled button of the tree ---- */
  #crm__widgets form[action*="paypal.com/donate"] { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  #crm__widgets form[action*="paypal.com/donate"] button[type="submit"] { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 10px; background: var(--h-primary); color: #fff; font: 600 1.0625rem/1.25 Theme-Font, Inter, sans-serif; box-shadow: 0 8px 20px rgb(0 171 227 / .3); transform: none; transition: background-color .2s ease; }
  #crm__widgets form[action*="paypal.com/donate"] button[type="submit"]:is(:hover, :focus-visible) { background: #007aa8; transform: none; }
  #crm__widgets form[action*="paypal.com/donate"] button[type="submit"]:focus-visible { outline: 2px solid var(--h-primary); outline-offset: 3px; }
  #crm__widgets form[action*="paypal.com/donate"] button i { color: #fff; }
  #crm__widgets form[action*="paypal.com/donate"] > div { display: flex; gap: 10px; color: #64748b; font-size: 26px; line-height: 1; }
  #crm__widgets form[action*="paypal.com/donate"] img[width="1"] { position: absolute; width: 1px; height: 1px; }
}
/* (round 2) rhythm of the new sections: the shortcut frame inside a section adds no margin of its own; the light band
   directly under the sibling bar starts a little higher (the bar already brings half a gap) */
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-shortcut { margin: 0; }
#crm__widgets#crm__widgets > .frame-type-menu_subpages + .ce-anchor + section.bg-muted\/30, #crm__widgets#crm__widgets > .frame-type-menu_subpages + section.bg-muted\/30 { padding-top: max(8px, calc(var(--s-band) - 64px)); }
/* (round 2) a section that ends in team cards: the cards' inner padding already reads as space (like card grids) */
#crm__widgets#crm__widgets > section.dgm-ex-root:has(ul[role="list"] > li > img.flex-none) { padding-bottom: calc(var(--s-half) - 24px); }
/* (round 2, audit of 8, 10, 27, 16) links of the contact panel's right half were the theme's rgb(0 172 230): exactly #00abe3 */
#crm__widgets section.dgm-ex-root div.max-w-4xl:has(> .grid > div.bg-primary.text-white) > .grid > div:last-child a { color: #00abe3; }
/* previous / next link cards: the label in DGM primary like every link (the arrow already was) */
#crm__widgets section#weitere-preise a { color: #00abe3; }
/* rhythm: an html frame closing a section adds no margin; a section that ends in a CRM widget gives most of its bottom
   padding to the widget's own trailing space; the band right under another section starts a little higher; the two text
   cards' container counts its cards' padding as space */
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-html:last-child { margin-bottom: 0; }
#crm__widgets#crm__widgets > section.dgm-ex-root:not(.bg-muted\/30):has(> div > div > .frame-type-html:last-child .custom-compiled-plugin-element) { padding-bottom: 8px; }
#crm__widgets#crm__widgets > section.dgm-ex-root:not(.bg-muted\/30):has(> div > div > .frame-type-html:last-child :is(news-list, .news-list)) { padding-bottom: var(--s-half); }
#crm__widgets#crm__widgets > section.dgm-ex-root:has(.discovery-card div.mt-2):is(:has(+ .ce-anchor + section.bg-muted\/30), :has(+ section.bg-muted\/30)) { padding-bottom: 16px; }
#crm__widgets#crm__widgets > section + section.bg-muted\/30, #crm__widgets#crm__widgets > section + .ce-anchor + section.bg-muted\/30 { padding-top: max(16px, calc(var(--s-band) - 28px)); }
#crm__widgets#crm__widgets > .grid.container.my-12 { padding-top: max(16px, calc(var(--s-half) - 24px)); padding-bottom: max(16px, calc(var(--s-half) - 24px)); }
#crm__widgets > .grid.container.my-12 section[id] { scroll-margin-top: 150px; }

/* ===================== Owner round 2: requests of the page agents ===================== */
/* split card: a second button is the outline variant (the first stays filled): DGM-primary label and a 45 % border on
   white, hover a light tint. A spec asks for it by giving the split card's text section two buttons. */
#crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex ~ a.inline-flex { margin-left: 8px; border: 1px solid rgb(0 171 227 / .45); background: #fff; color: #00abe3; }
#crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex ~ a.inline-flex i { color: #00abe3; }
#crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex ~ a.inline-flex:is(:hover, :focus-visible) { border-color: #00abe3; background: rgb(0 171 227 / .07); color: #00abe3; }
@media (max-width: 479.98px) { #crm__widgets .dgm-venue-card__body section.dgm-ex-root header div > a.inline-flex ~ a.inline-flex { margin-left: 0; margin-top: 10px; } }
/* people widgets (compiled CRM elements in a section, other than award-details and committee-full-page) end in about 88 px of their own space (the last group's
   64 px margin and 24 px padding): the frame gives 56 px of it back to the gap, the widget's inside stays as it is */
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-html:last-child:has(> .custom-compiled-plugin-element:not([name="award-details"]):not([name="committee-full-page"]) > .custom-compiled-plugin-element__state) { margin-bottom: -56px; }
/* the contact panel's card brings 48 px of inner padding: its section's bottom padding shrinks, and its top padding too
   where it follows the light band or a split card (both end in their own ground) */
#crm__widgets#crm__widgets > section.dgm-ex-root:has(> div > div.max-w-4xl > .grid > div.bg-primary.text-white) { padding-bottom: max(16px, calc(var(--s-half) - 24px)); }
#crm__widgets#crm__widgets > :is(section.bg-muted\/30, div:has(> article.dgm-venue-card)) + section:has(> div > div.max-w-4xl > .grid > div.bg-primary.text-white),
#crm__widgets#crm__widgets > :is(section.bg-muted\/30, div:has(> article.dgm-venue-card)) + .ce-anchor + section:has(> div > div.max-w-4xl > .grid > div.bg-primary.text-white) { padding-top: max(16px, calc(var(--s-half) - 40px)); }
/* the light band before a contact panel: the panel's card padding already reads as space, so the gap stays under 128 */
#crm__widgets#crm__widgets > section.bg-muted\/30:is(:has(+ section > div > div.max-w-4xl > .grid > div.bg-primary.text-white), :has(+ .ce-anchor + section > div > div.max-w-4xl > .grid > div.bg-primary.text-white)) { padding-bottom: max(16px, calc(var(--s-half) - 28px)); }
/* cover cards: six (or three) in a set read as rows of three, not four and two */
@media (min-width: 900px) { #crm__widgets .grid:has(> .template-card:nth-child(3n):last-child):not(:has(> .template-card:nth-child(12))) { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; } }
/* (round 2) light head with a picture: on phones the picture overran its column by about 70 px (cut at the right edge,
   hidden by the clip): it takes exactly the column width. The office team list inside a section: no frame padding */
@media (max-width: 767.98px) { #crm__widgets .dgm-ih--split.dgm-ih--h-compact .dgm-ih__media { width: 100%; min-width: 0; max-width: 100%; } }
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-shortcut { padding: 0; }
/* (round 2) links inside card text (icon cards, cover cards) were the theme's rgb(0 172 230): exactly #00abe3 */
#crm__widgets section.dgm-ex-root article :where(p, li) a { color: #00abe3; }
/* a section ending in cards before the contact panel: both paddings shrink, the cards and the panel bring their own */
#crm__widgets#crm__widgets > section:is(:has(.template-card), :has(.discovery-card)):is(:has(+ section > div > div.max-w-4xl > .grid > div.bg-primary.text-white), :has(+ .ce-anchor + section > div > div.max-w-4xl > .grid > div.bg-primary.text-white)) { padding-bottom: 16px; }
#crm__widgets#crm__widgets > section:is(:has(.template-card), :has(.discovery-card)) + section:has(> div > div.max-w-4xl > .grid > div.bg-primary.text-white),
#crm__widgets#crm__widgets > section:is(:has(.template-card), :has(.discovery-card)) + .ce-anchor + section:has(> div > div.max-w-4xl > .grid > div.bg-primary.text-white) { padding-top: max(16px, calc(var(--s-half) - 24px)); }
/* the statutes' paragraphs clear the pinned header plus a sibling bar of up to two rows */
#crm__widgets#crm__widgets .ab-legal__para { scroll-margin-top: 172px; }

/* ===================== Owner round 2: second batch of requests ===================== */
/* anchors clear the pinned header plus the sibling bar (its bottom reaches 162 px when both are shown) with air, at every
   width and for every section type (sections, frames, split cards, closing panels) */
#crm__widgets#crm__widgets [id] { scroll-margin-top: 176px; }
/* links in the split card's inset box (key-value table) are exactly #00abe3 */
#crm__widgets section.dgm-ex-root td a { color: #00abe3; }
/* step cards with an action (lastStepButton()): the last card's link as a filled button under its text */
#crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase) a.dgm-ex-card-stretch { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; width: auto; margin-top: 10px; padding: 10px 16px; border: 0; border-radius: 10px; background: #00abe3; color: #fff; font: 600 14px/1.25 Theme-Font, Inter, sans-serif; text-decoration: none; }
#crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase) a.dgm-ex-card-stretch i { color: #fff; }
#crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase) a.dgm-ex-card-stretch:is(:hover, :focus-visible) { background: #007aa8; color: #fff; }
@media (max-width: 639.98px) { #crm__widgets section.bg-muted\/30 article:not(.discovery-card):has(> div.uppercase) a.dgm-ex-card-stretch { justify-self: start; } }
/* a lone text card (textCardSolo(): the two-column container with an empty right column): one card, 760 px, centred */
#crm__widgets > .grid.container.my-12:not(:has(> div:nth-child(2) section)) { grid-template-columns: minmax(0, 760px); justify-content: center; }
#crm__widgets > .grid.container.my-12:not(:has(> div:nth-child(2) section)) > div:nth-child(2) { display: none; }
/* uneven last rows of picture cards: 10 cards as rows of five on wide screens (no lone card), 7 as four and three,
   an incomplete last row is centred (the flex grid already centres) */
@media (min-width: 1200px) {
  #crm__widgets .grid:has(> .discovery-card:nth-child(10):last-child) > .discovery-card { flex-basis: calc((100% - 96px) / 5); }
  #crm__widgets .grid:has(> .discovery-card:nth-child(7):last-child) > .discovery-card,
  #crm__widgets .grid:has(> .discovery-card:nth-child(8):last-child) > .discovery-card { flex-basis: calc((100% - 72px) / 4); }
}
@media (min-width: 640px) and (max-width: 1199.98px) {
  #crm__widgets .grid:has(> .discovery-card:nth-child(10):last-child) > .discovery-card,
  #crm__widgets .grid:has(> .discovery-card:nth-child(8):last-child) > .discovery-card { flex-basis: calc((100% - 24px) / 2); }
}
/* icon / topic card grids with 5 or 10 cards: the incomplete last row centred instead of left */
@media (min-width: 1024px) {
  #crm__widgets .dgm-ex-card-grid--simple:is(:has(> .dgm-ex-card-grid__item:nth-child(5):last-child), :has(> .dgm-ex-card-grid__item:nth-child(10):last-child)) { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
  #crm__widgets .dgm-ex-card-grid--simple:is(:has(> .dgm-ex-card-grid__item:nth-child(5):last-child), :has(> .dgm-ex-card-grid__item:nth-child(10):last-child)) > .dgm-ex-card-grid__item { flex: 0 1 calc((100% - 40px) / 3); width: auto; max-width: none; margin: 0; }
}
/* rhythm (second batch): a band followed by a white section, and a white section followed by a band, give up some of
   their padding (the cards on both sides bring their own); a section after the two text cards starts higher; a section
   that is only a head (h2 and text, no cards, no children) keeps no head-to-content margin below its text */
#crm__widgets#crm__widgets > section.bg-muted\/30:is(:has(+ section.dgm-ex-root:not(.bg-muted\/30) > div > :is(.grid, .dgm-ex-card-grid) article), :has(+ .ce-anchor + section.dgm-ex-root:not(.bg-muted\/30) > div > :is(.grid, .dgm-ex-card-grid) article)) { padding-bottom: max(16px, calc(var(--s-band) - 44px)); }
#crm__widgets#crm__widgets > section.dgm-ex-root.dgm-ex-root.dgm-ex-root:has(> div > .dgm-ex-card-grid article):not(:has(article h3 + div:empty)):not(.bg-muted\/30):is(:has(+ section.bg-muted\/30), :has(+ .ce-anchor + section.bg-muted\/30)) { padding-bottom: max(12px, calc(var(--s-face) - 16px)); }
#crm__widgets#crm__widgets > .grid.container.my-12 + section, #crm__widgets#crm__widgets > .grid.container.my-12 + .ce-anchor + section { padding-top: max(16px, calc(var(--s-half) - 24px)); }
#crm__widgets#crm__widgets > section.dgm-ex-root:not(:has(article)):not(:has(.frame)):not(:has(details)):not(:has(> div > div > a)) > div > header:not(:has(h1)) { margin-bottom: 0; }
/* (second batch, balance) a split card before the band and a centred section with nested cards after the band keep
   more of their padding, so those gaps stay at or above 96 */
#crm__widgets#crm__widgets > div:has(> article.dgm-venue-card):is(:has(+ section.bg-muted\/30), :has(+ .ce-anchor + section.bg-muted\/30)) { padding-bottom: var(--s-half); }
#crm__widgets#crm__widgets > section.bg-muted\/30 + section:has(> div > div > :is(.frame > section, section).dgm-ex-root), #crm__widgets#crm__widgets > section.bg-muted\/30 + .ce-anchor + section:has(> div > div > :is(.frame > section, section).dgm-ex-root) { padding-top: calc(var(--s-half) - 4px); }
/* (round 2, user: "g is cutoff") gradient-clipped hero headlines paint only inside their own box; at line height 1.07 the
   descenders of g, p, y, j fell outside it. The clipped element gets .18em of room below, given back by a negative margin,
   so line spacing and hero height stay the same. Covers the accent span and the whole-h1 gradient. */
body .dgm-feh__shimmer { padding-bottom: .18em; margin-bottom: -.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body .dgm-feh h1:not(:has(.dgm-feh__shimmer)) { padding-bottom: .18em; margin-bottom: -.18em; overflow: visible; }
body .dgm-feh h1 { overflow: visible; }
/* statutes' table of contents: link text in DGM primary like every link; the current paragraph on the tint, weight 600 */
body #crm__widgets .ab-legal__toc a, body #crm__widgets .ab-legal__toc a[aria-current="true"] { color: #00abe3; }
/* split card followed by a band of cards (awards hub: laureates card, then the four steps): the band starts higher */
#crm__widgets#crm__widgets > div:has(> article.dgm-venue-card) + section.bg-muted\/30:has(> div > .dgm-ex-card-grid),
#crm__widgets#crm__widgets > div:has(> article.dgm-venue-card) + .ce-anchor + section.bg-muted\/30:has(> div > .dgm-ex-card-grid) { padding-top: max(16px, calc(var(--s-band) - 46px)); }

/* ===================== Owner round 2: third batch ===================== */
/* ---- Index grid (indexTiles(): image-card groups with anchors index-<n>): fixed columns, 4:3 pictures, left-aligned
   incomplete rows, each group under a left label with a hairline ---- */
#crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root[id^="index-"] > div > header { display: flex; align-items: center; gap: 14px; max-width: none; margin: 0 0 16px; text-align: left; }
#crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root[id^="index-"] > div > header::after { content: ""; flex: 1; height: 1px; background: rgb(0 171 227 / .25); }
#crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root[id^="index-"] > div > header h2 { flex: none; }
#crm__widgets#crm__widgets section.dgm-ex-root[id^="index-"] + .ce-anchor + section.dgm-ex-root[id^="index-"], #crm__widgets#crm__widgets section.dgm-ex-root[id^="index-"] + section.dgm-ex-root[id^="index-"] { padding-top: 36px; }
@media (min-width: 640px) {
  #crm__widgets#crm__widgets section[id^="index-"] .grid:has(> .discovery-card) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: start; gap: 20px; }
  #crm__widgets#crm__widgets section[id^="index-"] .grid > .discovery-card > div.relative { aspect-ratio: 4 / 3; }
}
@media (min-width: 640px) and (max-width: 1199.98px) { #crm__widgets#crm__widgets section[id^="index-"] .grid:has(> .discovery-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 899.98px) { #crm__widgets#crm__widgets section[id^="index-"] .grid:has(> .discovery-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Sibling bar on short pages: while the content column ends and pushes the stuck bar up under the pinned site header,
   the bar fades out (about.js sets is-leaving), so it is never covered; it comes back as soon as it is stuck again ---- */
#crm__widgets .frame-type-menu_subpages { transition: top .3s ease, opacity .2s ease, visibility 0s linear 0s; }
#crm__widgets .frame-type-menu_subpages.is-leaving { opacity: 0; visibility: hidden; transition: top .3s ease, opacity .2s ease, visibility 0s linear .2s; }

/* ---- Phones (third batch): the gaps between sections stay within 56 to 72 px ---- */
@media (max-width: 639.98px) {
  #crm__widgets#crm__widgets > .frame-type-html:has([name="award-details"]) { margin-bottom: 20px; }
  #crm__widgets#crm__widgets > .frame-type-html:has([name="award-details"]) ~ div:has(> article.dgm-venue-card) { padding-bottom: 8px; }
}
/* the index before the closing panel: the panel keeps one gap */
#crm__widgets#crm__widgets > section.dgm-ex-root.dgm-ex-root.dgm-ex-root.dgm-ex-root:has(section[id^="index-"]):is(:has(+ .dgm-sc--tone-dark), :has(+ .ce-anchor + .dgm-sc--tone-dark)) { padding-bottom: max(calc(var(--s-half) - 12px), 40px); }
/* the sibling bar right before a light band: a little less margin (the band brings its own top padding) */
#crm__widgets#crm__widgets > .frame-type-menu_subpages:is(:has(+ section.bg-muted\/30), :has(+ .ce-anchor + section.bg-muted\/30)) { margin-bottom: max(8px, calc(var(--s-half) - 32px)); }
/* the lone text card keeps a full half gap below it (the next section's head follows directly) */
#crm__widgets#crm__widgets > .grid.container.my-12:not(:has(> div:nth-child(2) section)) { padding-bottom: var(--s-half); }

/* ===================== Owner round 2: user feedback "chaotic and not compact" ===================== */
/* ---- Benefit list (benefitList(): Event icon grid inside a centred section): one white panel, compact rows in two columns
   from 768 px, icon tile left, title 16/700 and one sentence 14.5 px, hairlines between rows ---- */
#crm__widgets section.dgm-ex-root section.dgm-ex-root:has(> div > article > ul > li) { padding: 0; }
#crm__widgets section.dgm-ex-root section.dgm-ex-root:has(> div > article > ul > li) > div { max-width: none; padding: 0; }
#crm__widgets section.dgm-ex-root section.dgm-ex-root:has(> div > article > ul > li) > div > header:not(:has(h2)) { display: none; }
#crm__widgets#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article { display: block; width: auto; max-width: var(--h-grid); margin: 0 auto; padding: 4px 28px; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgb(15 34 51 / .03); }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 44px; row-gap: 0; margin: 0; padding: 0; list-style: none; }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; column-gap: 16px; margin: 0; padding: 16px 0; border-top: 1px solid rgb(227 232 236); }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li:first-child { border-top: 0; }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li > div:first-child { width: 40px; height: 40px; border-radius: 10px; background: rgb(0 171 227 / .1); color: #00abe3; }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li > div:first-child i { font-size: 15px; }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li p.font-heading { margin: 1px 0 0; color: #0f172a; font: 700 1rem/1.4 Heading-Font, Inter, sans-serif; letter-spacing: -.01em; }
#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li p + div { margin-top: 3px; color: oklch(.446 .043 257.281); font-size: 14.5px; line-height: 23.5px; }
@media (min-width: 768px) {
  #crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article > ul > li:nth-child(2) { border-top: 0; }
}
@media (max-width: 639.98px) { #crm__widgets#crm__widgets section.dgm-ex-root:has(> div > article > ul > li) > div > article { padding: 2px 18px; } }

/* ---- Equal heights in every card grid: cards in one row are as tall as the tallest, links sit at the bottom ---- */
#crm__widgets .dgm-ex-card-grid { align-items: stretch; }
#crm__widgets .dgm-ex-card-grid > .dgm-ex-card-grid__item { display: flex; flex-direction: column; height: auto; }
#crm__widgets .dgm-ex-card-grid > .dgm-ex-card-grid__item > article { flex: 1 1 auto; height: auto; }
#crm__widgets .dgm-ex-card-grid > .dgm-ex-card-grid__item > article > a.dgm-ex-card-stretch { margin-top: auto; }
#crm__widgets .grid:has(> .discovery-card), #crm__widgets .grid:has(> .template-card) { align-items: stretch; }
#crm__widgets .grid > :is(.discovery-card, .template-card) { height: auto; align-self: stretch; }
#crm__widgets > .grid.container.my-12 { align-items: stretch; }
#crm__widgets > .grid.container.my-12 > div { display: flex; flex-direction: column; }
#crm__widgets > .grid.container.my-12 > div > :is(section.dgm-ex-root, .ce-anchor + section) { flex: 1 1 auto; }
#crm__widgets ul[role="list"]:has(> li > img.flex-none) { align-items: stretch; }

/* ---- Five steps (step cards on the band): one row of five equal cards from 1200 px, below a vertical sequence ---- */
#crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child):has(article > div.uppercase) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 760px; margin-inline: auto; }
#crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child):has(article > div.uppercase) > .dgm-ex-card-grid__item { width: auto; max-width: none; margin: 0; flex: none; }
@media (min-width: 1200px) {
  #crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child):has(article > div.uppercase) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; max-width: none; }
  #crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child):has(article > div.uppercase) article { padding: 20px; }
}
/* five steps: long titles hyphenate inside the narrow cards; below 1200 px the sequence uses the compact card (icon beside
   the title, text below), as on phones */
#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child):has(article > div.uppercase) h3 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 640px) and (max-width: 1199.98px) {
  #crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child) article:has(> div.uppercase) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: center; padding: 18px 22px; }
  #crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child) article:has(> div.uppercase) > div:first-child { grid-row: span 2; align-self: start; margin: 0; }
  #crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child) article:has(> div.uppercase) > :not(div:first-child) { grid-column: 2; }
  #crm__widgets#crm__widgets section.bg-muted\/30 .dgm-ex-card-grid--simple:has(> .dgm-ex-card-grid__item:nth-child(5):last-child) article:has(> div.uppercase) h3 { padding-right: 36px; }
}
/* a centred band section with nested content (benefit list, timeline) right under the sibling bar keeps a half gap on top */
#crm__widgets#crm__widgets > .frame-type-menu_subpages + section.bg-muted\/30:has(section), #crm__widgets#crm__widgets > .frame-type-menu_subpages + .ce-anchor + section.bg-muted\/30:has(section) { padding-top: var(--s-half); }

/* ===================== Folded in from modules/single.css (single-pages agent), owner round 2: group label, note box,
   statutes version chip and print rules; helpers groupLabel(), teamGroups(), noteBox(), legalDocVersioned() in lib.php ===================== */

/* ---- Group label inside a section (sgGroupLabel / sgTeamGroups): the awards' group-label role (14/600 uppercase in DGM
   primary), centred; optional sentence and link under it; 20 px to the cards, a clear break before every later group ---- */
#crm__widgets .frame-type-html:has(> .sg-group) { margin: 0; padding: 0; }
#crm__widgets .frame-type-shortcut + .frame-type-html:has(> .sg-group),
#crm__widgets .frame-type-shortcut + .ce-anchor + .frame-type-html:has(> .sg-group) { margin-top: 56px; }
#crm__widgets .sg-group { max-width: 680px; margin: 0 auto 22px; text-align: center; scroll-margin-top: 176px; }
#crm__widgets .sg-group__label { display: flex; align-items: center; gap: 16px; margin: 0; color: var(--h-primary, #00abe3); font: 600 14px/21px Heading-Font, Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
#crm__widgets .sg-group__label::before, #crm__widgets .sg-group__label::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgb(0 171 227 / 0), rgb(0 171 227 / .28)); }
#crm__widgets .sg-group__label::after { background: linear-gradient(90deg, rgb(0 171 227 / .28), rgb(0 171 227 / 0)); }
#crm__widgets .sg-group__text { margin: 8px auto 0; color: oklch(.446 .043 257.281); font: 400 15px/24px Theme-Font, Inter, sans-serif; }
#crm__widgets .sg-group__link { margin: 8px 0 0; font: 600 14.5px/22px Theme-Font, Inter, sans-serif; }
#crm__widgets .sg-group__link a { color: #00abe3; text-decoration: underline; text-decoration-color: rgb(0 171 227 / .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#crm__widgets .sg-group__link a::after { content: "\f35d"; margin-left: 6px; font: 900 11px/1 "Font Awesome 6 Pro"; }
#crm__widgets .sg-group__link a:is(:hover, :focus-visible) { color: #00abe3; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
@media (max-width: 639.98px) {
  #crm__widgets .frame-type-shortcut + .frame-type-html:has(> .sg-group),
  #crm__widgets .frame-type-shortcut + .ce-anchor + .frame-type-html:has(> .sg-group) { margin-top: 40px; }
  #crm__widgets .sg-group__label { gap: 12px; }
}

/* ---- Note box (sgNote): a tinted card in the tree's card shell (radius 16, 1 px primary border at 25 %), icon tile 44 px
   with radius 10, small title, text 14.5 / 23.5; centred column of 680 px under the element it belongs to ---- */
#crm__widgets .frame-type-html:has(> .sg-note) { margin: 0; padding: 0; }
#crm__widgets * + .frame-type-html:has(> .sg-note) { margin-top: 36px; }
#crm__widgets .sg-note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; max-width: 680px; margin: 0 auto; padding: 22px 24px; border: 1px solid rgb(0 171 227 / .25); border-radius: 16px; background: linear-gradient(180deg, rgb(0 171 227 / .06), rgb(0 171 227 / .03)), #fff; text-align: left; }
#crm__widgets .sg-note__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgb(0 171 227 / .12); color: #00abe3; font-size: 18px; }
#crm__widgets .sg-note__title { margin: 2px 0 6px; color: var(--h-text, #0f172a); font: 700 1.0625rem/1.4 Heading-Font, Inter, sans-serif; letter-spacing: -.01em; }
#crm__widgets .sg-note__body p { margin: 0; color: #334155; font: 400 14.5px/23.5px Theme-Font, Inter, sans-serif; }
#crm__widgets .sg-note__body p + p { margin-top: 10px; }
@media (max-width: 479.98px) {
  #crm__widgets .sg-note { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
  #crm__widgets .sg-note__icon { width: 40px; height: 40px; }
}

/* ---- Statutes (sgLegalDoc): the date of the version as a chip at the top of the text column ---- */
#crm__widgets .sg-legal .sg-legal__version { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 6px 14px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px; background: rgb(0 171 227 / .06); color: var(--h-text, #0f172a); font: 600 13.5px/1.4 Theme-Font, Inter, sans-serif; }
#crm__widgets .sg-legal .sg-legal__version i { color: #00abe3; font-size: 13px; }
#crm__widgets .sg-legal .sg-legal__version + .ab-legal__para { padding-top: 0; border-top: 0; }

/* ---- Statutes in print: only the head (h1, lead) and the text; black on white, no menus, sibling bar, table of
   contents, footer or decoration; headings stay with their text; link targets of in-page links are not printed ---- */
@media print {
  @page { margin: 18mm 18mm 20mm; }
  body:has(.sg-legal) { background: #fff !important; }
  body:has(.sg-legal) > div.relative:first-child,
  body:has(.sg-legal) .mainmenu,
  body:has(.sg-legal) #breadcrumb__section,
  body:has(.sg-legal) .dgm-page-header-wrap > footer,
  body:has(.sg-legal) .dgm-mainmenu-mobile,
  body:has(.sg-legal) #crm__widgets > .frame-type-menu_subpages,
  body:has(.sg-legal) #crm__widgets section.dgm-ex-root header a,
  body:has(.sg-legal) .ab-legal__toc { display: none !important; }
  body:has(.sg-legal) #crm__widgets [data-reveal] { opacity: 1 !important; transform: none !important; }
  body:has(.sg-legal) #crm__widgets section.dgm-ex-root { padding: 0 0 8mm !important; background: none !important; }
  body:has(.sg-legal) #crm__widgets h1 { color: #000 !important; font-size: 22pt !important; }
  body:has(.sg-legal) #crm__widgets > .frame-type-html:has(> .ab-legal) { width: auto !important; padding: 0 !important; }
  #crm__widgets .sg-legal { display: block !important; color: #000 !important; }
  #crm__widgets .sg-legal .ab-legal__body { max-width: none !important; }
  #crm__widgets .sg-legal .sg-legal__version { margin-bottom: 6mm; border-color: #999; background: none; color: #000; }
  #crm__widgets .sg-legal .ab-legal__para { padding: 5mm 0 2mm !important; border-top: .5pt solid #999 !important; }
  #crm__widgets .sg-legal .sg-legal__version + .ab-legal__para { padding-top: 0 !important; border-top: 0 !important; }
  #crm__widgets .sg-legal .ab-legal__para h2 { color: #000 !important; font-size: 14pt !important; break-after: avoid; page-break-after: avoid; }
  #crm__widgets .sg-legal .ab-legal__para h2 .ab-legal__no { border-color: #999 !important; background: none !important; color: #000 !important; }
  #crm__widgets .sg-legal .ab-legal__text { color: #000 !important; font-size: 10.5pt !important; line-height: 1.5 !important; orphans: 3; widows: 3; }
  #crm__widgets .sg-legal .ab-legal__text li { break-inside: avoid; }
  #crm__widgets .sg-legal .ab-legal__text li::marker { color: #000 !important; }
  #crm__widgets .sg-legal a { color: #000 !important; text-decoration: none !important; }
}

/* ===================== Owner round 2: requests from the single-pages review ===================== */
/* one group-label style in the tree: the group labels of picture and cover cards inside a section (awards overview,
   project groups) get the same flanking hairlines as groupLabel() */
#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(> div > .grid > .discovery-card), :has(.template-card)):not([id^="index-"]) > div > header h2 { display: flex; align-items: center; justify-content: center; gap: 16px; max-width: 680px; margin-inline: auto; }
#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(> div > .grid > .discovery-card), :has(.template-card)):not([id^="index-"]) > div > header h2::before,
#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(> div > .grid > .discovery-card), :has(.template-card)):not([id^="index-"]) > div > header h2::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgb(0 171 227 / 0), rgb(0 171 227 / .28)); }
#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(> div > .grid > .discovery-card), :has(.template-card)):not([id^="index-"]) > div > header h2::after { background: linear-gradient(90deg, rgb(0 171 227 / .28), rgb(0 171 227 / 0)); }
/* a centred section without a head of its own (groups only): no empty header */
#crm__widgets section.dgm-ex-root > div > header:not(:has(h1, h2, span, p, a)) { display: none; }
/* light page head without a picture: its button under the lead, as in the head with a picture */
#crm__widgets section.dgm-ex-root:has(> div > header h1) > div > header > div.flex { flex-direction: column; align-items: flex-start; gap: 0; }
#crm__widgets section.dgm-ex-root:has(> div > header h1) > div > header > div.flex > div.shrink-0 { margin-top: 24px; }
/* phone numbers never break */
#crm__widgets a[href^="tel:"] { white-space: nowrap; }
/* phones: a split card before the band gives back some padding (Geschäftsstelle: contact to team) */
@media (max-width: 639.98px) { #crm__widgets#crm__widgets > div:has(> article.dgm-venue-card):is(:has(+ section.bg-muted\/30), :has(+ .ce-anchor + section.bg-muted\/30)) { padding-bottom: 12px; } }

/* ===================== Card titles never clip (user, 2026-11-10: "cut off") ===================== */
/* titles wrap and long German compounds hyphenate; the icon stays at the first line's start */
#crm__widgets :is(.discovery-card, .template-card, .dgm-ex-card-grid article) :is(h3, p.font-heading) { min-width: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; word-break: normal; white-space: normal; }
#crm__widgets .discovery-card > div.flex-1 > div.flex { align-items: flex-start; min-width: 0; }
#crm__widgets .discovery-card > div.flex-1 > div.flex > i { flex: none; margin-top: .3em; }
#crm__widgets :is(h1, h2, h3) { overflow-wrap: break-word; }
/* ten picture cards: rows of four (4 + 4 + 2 centred) from 1200 px, not five narrow ones */
@media (min-width: 1200px) { #crm__widgets .grid:has(> .discovery-card:nth-child(10):last-child) > .discovery-card { flex-basis: calc((100% - 72px) / 4); } }

/* ===================== Group labels: the break before a later group (user, 2026-11-10: "space … is missing") ===================== */
/* groupLabel() between team lists: 52 px before every label that follows other content of its section (40 on phones),
   none before the first; label to sentence 10 px, label block to the first card 26 px */
#crm__widgets .frame-type-html:has(> .sg-group) { margin: 0; padding: 0; }
#crm__widgets .frame-type-html:has(> .sg-group):not(:first-child) { margin-top: 52px; }
#crm__widgets .sg-group { margin-bottom: 26px; }
#crm__widgets .sg-group__text { margin-top: 10px; }
/* group labels of picture and cover cards inside one section: the same break and the same label-to-card distance */
#crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)) + .ce-anchor + section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)),
#crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)) + section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)) { padding-top: 52px; }
#crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(> div > .grid > .discovery-card), :has(.template-card)) > div > header:has(h2) { margin-bottom: 26px; }
@media (max-width: 639.98px) {
  #crm__widgets .frame-type-html:has(> .sg-group):not(:first-child) { margin-top: 40px; }
  #crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)) + .ce-anchor + section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)),
  #crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)) + section.dgm-ex-root:is(:has(.discovery-card), :has(.template-card)) { padding-top: 40px; }
  #crm__widgets#crm__widgets section.dgm-ex-root section.dgm-ex-root:is(:has(> div > .grid > .discovery-card), :has(.template-card)) > div > header:has(h2) { margin-bottom: 22px; }
}

/* ===================== Geschäftsstelle head: the whole team as avatars (user, 2026-11-10) ===================== */
/* about.js builds .ab-avatars from the team cards of the same page (single source). The head has no picture of its own;
   the cluster's room is reserved so nothing moves when it appears: beside the text from 768 px, between lead and button
   on phones (the button keeps the reserved margin until the cluster is there). */
body:has(#crm__widgets ul[role="list"] > li > img.flex-none) {
  --av: 64px; --av-gap: 14px; --av-rows: 3; --av-h: calc(var(--av-rows) * (var(--av) - 8px) + 8px);
  #crm__widgets #kopf .dgm-ih__frame { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: calc(var(--av-h) + 8px); }
  #crm__widgets #kopf .dgm-ih__media { display: none; }
  #crm__widgets #kopf .ab-avatars { order: 2; justify-self: center; }
}
#crm__widgets .ab-avatars { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: calc(6 * (var(--av) - 6px) + 6px + 2 * var(--av-gap)); height: var(--av-h); margin: 0; padding: 0; list-style: none; }
#crm__widgets .ab-avatars > li { display: contents; }
#crm__widgets .ab-av { position: relative; display: grid; place-items: center; width: var(--av); height: var(--av); margin: -4px -3px; border: 3px solid #fff; border-radius: 50%; overflow: hidden; background: rgb(0 171 227 / .12); color: var(--h-ink, #003e52); font: 700 calc(var(--av) * .3)/1 Heading-Font, Inter, sans-serif; text-decoration: none; box-shadow: 0 1px 2px rgb(15 34 51 / .08), 0 10px 22px -12px rgb(15 34 51 / .45); transition: transform .2s ease, box-shadow .2s ease; }
#crm__widgets .ab-av img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
#crm__widgets .ab-av:is(:hover, :focus-visible) { z-index: 2; transform: translateY(-3px) scale(1.06); box-shadow: 0 0 0 2px #00abe3, 0 14px 26px -12px rgb(15 34 51 / .5); outline: none; }
#crm__widgets .ab-av-gap { width: var(--av-gap); height: var(--av); }
@media (prefers-reduced-motion: no-preference) {
  #crm__widgets .ab-avatars.is-in .ab-av { animation: ab-av-in .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 35ms); }
}
@keyframes ab-av-in { from { opacity: 0; transform: translateY(8px) scale(.92); } to { opacity: 1; transform: none; } }
/* the person's card, briefly highlighted after a jump */
#crm__widgets ul[role="list"] > li.ab-flash { box-shadow: 0 0 0 2px #00abe3, 0 18px 40px -24px rgb(0 171 227 / .6); transition: box-shadow .3s ease; }
@media (max-width: 767.98px) {
  body:has(#crm__widgets ul[role="list"] > li > img.flex-none) { --av: 50px; --av-gap: 10px; }
  body:has(#crm__widgets ul[role="list"] > li > img.flex-none) #crm__widgets #kopf .dgm-ih__frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  #crm__widgets .ab-avatars { width: 100%; max-width: calc(6 * (var(--av) - 6px) + 6px + 2 * var(--av-gap)); margin: 20px auto 0; justify-content: flex-start; }
  body:has(#crm__widgets ul[role="list"] > li > img.flex-none) #crm__widgets #kopf .dgm-ih__body:not(:has(.ab-avatars)) .dgm-sb-btns { margin-top: calc(24px + 20px + var(--av-h)); }
}
@media (max-width: 767.98px) { body:has(#crm__widgets ul[role="list"] > li > img.flex-none) #crm__widgets #kopf .ab-avatars { order: 0; justify-self: start; } }

/* ===================== Dropdowns on the dark hero pages: a readable active, hover and focus state (user, 2026-11-10) =====================
   The site marks the current entry with bg-gray-50 (near white) while our dark panel sets white text: on the dark panel the
   active, hovered and focused entries get a DGM-primary tint with a thin primary border, white title, light description. */
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:is(.bg-gray-50, :hover, :focus-visible) { background: rgb(0 171 227 / .18) !important; border: 1px solid rgb(0 171 227 / .55) !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:not(.bg-gray-50) { border: 1px solid transparent !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:is(.bg-gray-50, :hover, :focus-visible) p:first-child { color: #fff !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:is(.bg-gray-50, :hover, :focus-visible) p + p { color: rgb(255 255 255 / .82) !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a.bg-gray-50 i { background: rgb(0 171 227 / .28); color: #b9ecfc !important; }

/* ===================== Card title icons centred on the title's first line (user, 2026-11-10: "icons … not centered") =====================
   The icon box is as tall as one line of the title and centres the glyph; when the title wraps the icon stays on line one. */
#crm__widgets .discovery-card > div.flex-1 > div.flex { align-items: flex-start; }
#crm__widgets .discovery-card > div.flex-1 > div.flex > i { display: inline-flex; flex: none; align-items: center; justify-content: center; height: 1.5rem; margin-top: 0; line-height: 1; translate: 0 3px; }
@media (max-width: 639.98px) { #crm__widgets .discovery-card > div.flex-1 > div.flex > i { height: 20px; translate: 0 2px; } }
/* the translate (2026-11-10, measured on 2x crops): the heading font's capitals sit 2.4 to 3.2 px below the middle of their
   line box, so an icon centred on the line box looked high; moved down by that much (paint only, no layout change) */
/* light-head pages: the white dropdown panel's active entry in dark ink on a primary tint (was primary on near-white, 2.6:1) */
body:not(.dgm-page-has-fullscreen-hero) a.bg-gray-50.border-primary-300 { background: rgb(0 171 227 / .1) !important; border-color: rgb(0 171 227 / .45) !important; }
body:not(.dgm-page-has-fullscreen-hero) a.bg-gray-50.border-primary-300 p:first-child { color: #003e52 !important; }
body:not(.dgm-page-has-fullscreen-hero) a.bg-gray-50.border-primary-300 p + p { color: #334155 !important; }
/* phone menu sheet: the current section row and the current page in the same dark ink as the dropdown's active entry (the
   site's #0281ac read 4.4:1 on white and 4.1:1 on the child's tint); the tint, the bar and the weight stay the marker */
.dgm-mainmenu-mobile :is(.dgm-mainmenu-mobile__row-link, .dgm-mainmenu-mobile__child).is-current { color: #003e52 !important; }
.dgm-mainmenu-mobile .dgm-mainmenu-mobile__child.is-current { background-color: rgb(0 171 227 / .1) !important; }
.dgm-mainmenu-mobile .dgm-mainmenu-mobile__child.is-current .dgm-mainmenu-mobile__child-icon { color: #007aa8 !important; }

/* ===================== B4 / B5 (2026-11-10): the statement panel and the card timeline ===================== */
body {
  /* ---- Statement (statement(): html element .ab-statement, then picture tiles, in an Event header container without a
     head): one wide tinted panel on the card-grid width, a DGM-primary rule at the left edge, a large faint hexagon outline
     in the corner; from 1024 px pill, h2 and the lead line left (40 %), the rest of the statement right (60 %) ---- */
  #crm__widgets > section.dgm-ex-root:has(.ab-statement) > div > header:not(:has(h2)) { display: none; }
  #crm__widgets .frame-type-html:has(> .ab-statement) { margin: 0; padding: 0; }
  #crm__widgets .ab-statement {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 0;
    padding: 32px 22px 32px 28px; overflow: hidden; border: 1px solid var(--w-border); border-radius: 24px;
    background: linear-gradient(135deg, #ecf7fc 0%, #f6fbfe 48%, #fff 100%); box-shadow: var(--w-shadow); color: var(--h-text); text-align: left;
  }
  #crm__widgets .ab-statement::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--h-primary), var(--h-sky)); }
  #crm__widgets .ab-statement::after {
    content: ""; position: absolute; z-index: -1; top: -72px; right: -56px; width: 300px; height: 346px; opacity: .1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 104 119.5'%3E%3Cpath d='M50 0 100 28.87V86.6L50 115.47 0 86.6V28.87Z' fill='none' stroke='%2300abe3' stroke-width='1.4'/%3E%3Cpath d='M50 19 83.5 38.3V77.2L50 96.5 16.5 77.2V38.3Z' fill='none' stroke='%2300abe3' stroke-width='.9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  #crm__widgets .ab-statement__head { min-width: 0; }
  #crm__widgets .ab-statement__pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px;
    background: rgb(0 171 227 / .05); color: var(--h-primary); font: 700 11px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  }
  #crm__widgets .ab-statement__title { margin: 16px 0 0; color: var(--h-text); font: 700 clamp(1.75rem, 1.25rem + 1.2vw, 2.25rem)/1.15 Heading-Font, Inter, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
  #crm__widgets .ab-statement__lead { margin: 18px 0 0; color: var(--h-ink); font: 600 clamp(1.25rem, 1.05rem + .55vw, 1.5rem)/1.3 Heading-Font, Inter, sans-serif; letter-spacing: -.012em; text-wrap: pretty; }
  #crm__widgets .ab-statement__body { min-width: 0; color: #334155; font: 400 17px/1.7 Theme-Font, Inter, sans-serif; }
  #crm__widgets .ab-statement__body p { max-width: 66ch; margin: 0; }
  #crm__widgets .ab-statement__body p + p { margin-top: .9em; }
  /* the picture tiles 32 to 40 px under the panel, on the panel's width */
  #crm__widgets section.dgm-ex-root:has(.ab-statement) section.dgm-ex-root { padding: 36px 0 0; }
  #crm__widgets section.dgm-ex-root:has(.ab-statement) section.dgm-ex-root > div { max-width: none; padding: 0; }
  @media (min-width: 1024px) {
    #crm__widgets .ab-statement { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 48px; align-items: end; padding: 40px 48px 40px 52px; }
    #crm__widgets .ab-statement__title { margin-top: 14px; }
    #crm__widgets .ab-statement__lead { margin-top: 14px; font-size: 1.375rem; line-height: 1.27; }
    #crm__widgets .ab-statement__body { padding-left: 32px; border-left: 1px solid rgb(0 171 227 / .2); }
  }
  @media (max-width: 639.98px) {
    #crm__widgets .ab-statement { gap: 18px; padding: 26px 18px 26px 22px; border-radius: 20px; }
    #crm__widgets .ab-statement::after { top: -48px; right: -72px; width: 220px; height: 254px; }
    #crm__widgets .ab-statement__lead { margin-top: 12px; font-size: 1.1875rem; }
    #crm__widgets .ab-statement__body { font-size: 16px; line-height: 1.65; }
    #crm__widgets section.dgm-ex-root:has(.ab-statement) section.dgm-ex-root { padding: 32px 0 24px; }
  }

  /* ---- Timeline (timeline(): html element ol.ab-tl on the light band): every station a card in the family's shell (icon
     tile, the year large in Inter Tight 800 DGM primary, the sentence at 16 px, a picture only on four stations); below
     1024 px the line at the left and one column, from 1024 px a centre line with the cards alternating left and right and a
     hairline from each card to its dot. about.js fills the line while the reader scrolls (--tl-fill) and fades each card
     up once (class is-js / is-in); without the script or with reduced motion everything stands still and the line is full. ---- */
  #crm__widgets .frame-type-html:has(> .ab-tl) { margin: 0; padding: 0; }
  #crm__widgets .ab-tl { --tl-x: 15px; --tl-pad: 44px; --tl-dot: 42px; position: relative; max-width: 1056px; margin: 0 auto; padding: 0 0 0 var(--tl-pad); list-style: none; text-align: left; }
  #crm__widgets .ab-tl::before, #crm__widgets .ab-tl::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--tl-x) - 1px); width: 2px; border-radius: 2px; pointer-events: none; }
  #crm__widgets .ab-tl::before { background: linear-gradient(180deg, rgb(0 171 227 / 0), rgb(0 171 227 / .2) var(--tl-dot), rgb(0 171 227 / .2) calc(100% - 48px), rgb(0 171 227 / 0)); }
  #crm__widgets .ab-tl::after { background: linear-gradient(180deg, rgb(0 171 227 / 0), var(--h-primary) var(--tl-dot)); transform-origin: 50% 0; transform: scaleY(var(--tl-fill, 1)); }
  #crm__widgets .ab-tl__item { position: relative; margin: 0; padding: 0; }
  #crm__widgets .ab-tl__item + .ab-tl__item { margin-top: 16px; }
  #crm__widgets .ab-tl__item::before {
    content: ""; position: absolute; z-index: 1; top: calc(var(--tl-dot) - 8px); left: calc(var(--tl-x) - var(--tl-pad) - 8px); box-sizing: border-box; width: 16px; height: 16px;
    border: 3px solid #fff; border-radius: 50%; background: var(--h-primary); box-shadow: 0 0 0 1px rgb(0 171 227 / .3), 0 0 16px 3px rgb(0 171 227 / .4);
  }
  #crm__widgets .ab-tl__item::after { content: ""; position: absolute; top: calc(var(--tl-dot) - .5px); left: calc(var(--tl-x) - var(--tl-pad) + 10px); width: calc(var(--tl-pad) - var(--tl-x) - 10px); height: 1px; background: rgb(0 171 227 / .45); }
  #crm__widgets .ab-tl__card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 136px; padding: 20px 22px 22px; border: 1px solid var(--w-border); border-radius: 16px; background: #fff; box-shadow: var(--w-shadow); }
  /* a station with a picture: the picture fills the right 36 % of the card, edge to edge, the text stays left */
  #crm__widgets .ab-tl__item--pic .ab-tl__card { display: grid; grid-template-columns: minmax(0, 1fr) 36%; grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 10px; min-height: 180px; padding-right: 0; overflow: hidden; }
  #crm__widgets .ab-tl__item--pic .ab-tl__head { grid-column: 1; grid-row: 1; }
  #crm__widgets .ab-tl__item--pic .ab-tl__text { grid-column: 1; grid-row: 2; }
  #crm__widgets#crm__widgets .ab-tl__item--pic .ab-tl__pic { grid-column: 2; grid-row: 1 / 3; margin: -20px 0 -22px; border-radius: 0; aspect-ratio: auto; }
  #crm__widgets .ab-tl__head { display: flex; align-items: center; gap: 14px; min-height: 44px; }
  #crm__widgets .ab-tl__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgb(0 171 227 / .12), rgb(127 216 245 / .24)); color: var(--h-primary); font-size: 18px; }
  #crm__widgets#crm__widgets .ab-tl__year { margin: 0; color: var(--h-primary); font: 800 2.25rem/1 Heading-Font, Inter, sans-serif; letter-spacing: -.04em; white-space: nowrap; }
  #crm__widgets#crm__widgets .ab-tl__unit { margin-left: 2px; color: var(--h-ink); font: 700 1rem/1 Theme-Font, Inter, sans-serif; letter-spacing: 0; }
  #crm__widgets#crm__widgets .ab-tl__text { margin: 0; color: var(--h-text); font: 400 16px/1.6 Theme-Font, Inter, sans-serif; text-wrap: pretty; }
  #crm__widgets .ab-tl__pic { margin: 6px 0 0; overflow: hidden; border-radius: 12px; background: #eef3f6; aspect-ratio: 16 / 9; }
  #crm__widgets .ab-tl__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
  @media (min-width: 1024px) {
    #crm__widgets .ab-tl { --tl-gap: 96px; --tl-overlap: 48px; padding: 0; }
    #crm__widgets .ab-tl::before, #crm__widgets .ab-tl::after { left: calc(50% - 1px); }
    #crm__widgets .ab-tl__item { width: calc(50% - var(--tl-gap) / 2); }
    #crm__widgets .ab-tl__item:nth-child(even) { margin-left: calc(50% + var(--tl-gap) / 2); }
    #crm__widgets .ab-tl__item + .ab-tl__item { margin-top: calc(-1 * var(--tl-overlap)); }
    #crm__widgets .ab-tl__item:nth-child(odd)::before { left: auto; right: calc(var(--tl-gap) / -2 - 8px); }
    #crm__widgets .ab-tl__item:nth-child(even)::before { left: calc(var(--tl-gap) / -2 - 8px); }
    #crm__widgets .ab-tl__item:nth-child(odd)::after { left: auto; right: calc(var(--tl-gap) / -2 + 10px); width: calc(var(--tl-gap) / 2 - 10px); }
    #crm__widgets .ab-tl__item:nth-child(even)::after { left: calc(var(--tl-gap) / -2 + 10px); width: calc(var(--tl-gap) / 2 - 10px); }
    #crm__widgets .ab-tl__card { padding: 22px 26px 24px; }
    #crm__widgets .ab-tl__item--pic .ab-tl__card { padding-right: 0; }
    #crm__widgets#crm__widgets .ab-tl__item--pic .ab-tl__pic { margin: -22px 0 -24px; }
    #crm__widgets#crm__widgets .ab-tl__year { font-size: 2.5rem; }
  }
  @media (max-width: 639.98px) {
    /* the cards' own inner padding reads as space: the band closes a little earlier (gap to the next content 56 to 72) */
    #crm__widgets#crm__widgets > section.bg-muted\/30:has(.ab-tl) { padding-bottom: 24px; }
    #crm__widgets .ab-tl__card { padding: 18px 18px 20px; }
    /* phones: the picture as a 96 px square beside the year, the sentence under both */
    #crm__widgets .ab-tl__item--pic .ab-tl__card { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 14px; min-height: 0; padding-right: 18px; }
    #crm__widgets .ab-tl__item--pic { --tl-dot: 66px; }
    #crm__widgets .ab-tl__item--pic .ab-tl__head { align-self: center; }
    #crm__widgets .ab-tl__item--pic .ab-tl__text { grid-column: 1 / -1; }
    #crm__widgets#crm__widgets .ab-tl__item--pic .ab-tl__pic { grid-row: 1; width: 96px; height: 96px; margin: 0; border-radius: 12px; }
    #crm__widgets#crm__widgets .ab-tl__year { font-size: 2rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    #crm__widgets .ab-tl.is-js::after { transform: scaleY(var(--tl-fill, 0)); }
    #crm__widgets .ab-tl.is-js .ab-tl__card { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
    #crm__widgets .ab-tl.is-js .ab-tl__item:not(.is-in) .ab-tl__card { opacity: 0; transform: translateY(20px); }
  }
}

/* Restructure (2026-11-10): the overview "Der Verein" (first child of page 3) carries the first-level sibling bar directly
   under the intro hero; like on the other hubs it sits half over the hero's lower edge */
#crm__widgets > section#dgm-kapitel + .frame-type-menu_subpages { margin-top: -30px; }
/* the statement panel right under a sibling bar: the panel's own inner padding reads as space (gap bar to panel 96-120 at 1440) */
#crm__widgets#crm__widgets > .frame-type-menu_subpages + section.dgm-ex-root:has(.ab-statement),
#crm__widgets#crm__widgets > .frame-type-menu_subpages + .ce-anchor + section.dgm-ex-root:has(.ab-statement) { padding-top: max(0px, calc(var(--s-half) - 44px)); }