/* dgm_section_events (Veranstaltungen redesign, 2026-11-12): events from the CRM calendar feed, rendered on the server.
   Complete in itself (tokens of the section family: finder.css, feeds.css), loaded by the element once per page.
   The look of /de/netzwerk and /de/themen: body 16px, white cards radius 16 with a hairline, links/eyebrows/badges and
   filled buttons #00abe3 (white label), dark tones #003e52 to #00212c. An event's own colour (--dse-ev) and a type's
   colour (--dse-tc) tint panels, cards and chips, never a link. No text under 13px. */

#crm__widgets .dse { --dse-ink: #0f172a; --dse-text: #334155; --dse-muted: #5b6b7f; --dse-line: rgb(227 232 236); --dse-acc: #00abe3; --dse-dark: #003e52; --dse-deep: #00212c;
  --dse-fast: 120ms; --dse-base: 220ms; --dse-ease: cubic-bezier(.2, .7, .2, 1); --dse-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2);
  --dse-w: min(1152px, 100vw - 48px);
  position: relative; width: var(--dse-w); margin: 0 calc((100% - var(--dse-w)) / 2); color: var(--dse-text); font: 400 16px/1.55 Theme-Font, Inter, sans-serif; text-align: left;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) { #crm__widgets .dse { --dse-w: calc(100vw - 32px); } }
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-dgm_section_events:last-child { margin-bottom: 0; }
#crm__widgets .dse *, #crm__widgets .dse *::before, #crm__widgets .dse *::after { box-sizing: border-box; }
#crm__widgets .dse :where(h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; }
#crm__widgets .dse :where(ul) { list-style: none; }
#crm__widgets .dse [hidden] { display: none !important; }
#crm__widgets .dse-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#crm__widgets .dse :where(a) { color: var(--dse-acc); text-decoration: none; }
#crm__widgets .dse a:focus-visible, #crm__widgets .dse button:focus-visible, #crm__widgets .dse input:focus-visible { outline: 2px solid var(--dse-acc); outline-offset: 2px; }
/* the stretched link: the whole card or row is the target of its one <a> */
#crm__widgets .dse-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
#crm__widgets .dse-stretch:focus-visible { outline: none !important; }
#crm__widgets .dse-stretch:focus-visible::after { outline: 3px solid var(--dse-acc); outline-offset: 2px; }

/* ---------- optional head of the element (pill, headline, intro), as the section heads of the family ---------- */
#crm__widgets .dse-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
#crm__widgets .dse-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px; background: rgb(0 171 227 / .05);
  color: var(--dse-acc); font: 700 13px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#crm__widgets .dse-h2 { margin: 0; color: var(--dse-ink); font: 700 36px/1.15 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.9px; text-wrap: balance; }
#crm__widgets .dse-lead { margin: 16px 0 0; color: #475569; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 639.98px) { #crm__widgets .dse-h2 { font-size: 30px; letter-spacing: -.75px; } #crm__widgets .dse-lead { font-size: 16px; } }
#crm__widgets .dse-foot { margin: 28px 0 0; text-align: center; }
#crm__widgets .dse-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--dse-acc); font: 600 16px/1.3 Theme-Font, Inter, sans-serif; }
#crm__widgets .dse-link i { font-size: 13px; transition: transform var(--dse-base) var(--dse-ease); }
#crm__widgets .dse-link:hover i { transform: translateX(3px); }
#crm__widgets .dse-empty, #crm__widgets .dse-none { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: 24px; border: 1px solid var(--dse-line); border-radius: 16px;
  background: #fff; color: #475569; font-size: 16px; text-align: center; box-shadow: var(--dse-shadow); }
#crm__widgets .dse-empty i { color: var(--dse-acc); }

/* ---------- chips used everywhere ---------- */
#crm__widgets .dse-fchip, #crm__widgets .dse-status, #crm__widgets .dse-type, #crm__widgets .dse-rib { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px;
  font: 600 13px/1.3 Theme-Font, Inter, sans-serif; white-space: nowrap; }
#crm__widgets .dse-fchip { border: 1px solid var(--dse-line); background: #fff; color: var(--dse-ink); }
#crm__widgets .dse-fchip--online::before, #crm__widgets .dse-fchip--hybrid::before, #crm__widgets .dse-fchip--onsite::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dse-acc); }
#crm__widgets .dse-fchip--onsite::before { background: var(--dse-dark); }
#crm__widgets .dse-fchip--hybrid::before { background: linear-gradient(90deg, var(--dse-dark) 50%, var(--dse-acc) 50%); }
#crm__widgets .dse-status--booked { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; }
#crm__widgets .dse-status--planning { background: #f1f5f8; color: #475569; border: 1px solid var(--dse-line); }
#crm__widgets .dse-type { border: 1px solid color-mix(in srgb, var(--dse-tc) 30%, #fff); background: color-mix(in srgb, var(--dse-tc) 10%, #fff); color: var(--dse-ink); }
#crm__widgets .dse-type__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dse-tc); }
#crm__widgets .dse-rib { border: 1px solid rgb(0 171 227 / .35); background: rgb(0 171 227 / .06); color: var(--dse-acc); }
#crm__widgets .dse-ribbon { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: var(--dse-acc); color: #fff;
  font: 700 13px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: .02em; white-space: nowrap; }

/* =====================================================================================================================
   layout "stage": the start page's conference panel (Tools/HomeRedesign/sections/03-stage.vue and the .stage, .hp-sec,
   .hp-head, .hp-eyebrow, .hp-h2, .hp-btn rules and tokens of Tools/HomeRedesign/home.css, read only), copied under the
   element's own prefix dse-pn, with the start page's tokens defined on the panel. Rendered on the server, switched by
   events.js. Placed at the top level of a page it has the start page's measures (inset, wrap); inside a narrower
   section it keeps them relative to that section.
   ===================================================================================================================== */
#crm__widgets .dse--stage { width: auto; margin: 0; }
/* at the top level of a page the site keeps a frame at 1280 px: the panel's frame spans the page as the start page's
   sections do (the panel then sits var(--hp-inset) from the edges) */
#crm__widgets#crm__widgets > .frame-type-dgm_section_events:has(> .dse--stage .dse-pn) { width: auto; max-width: none; margin: 0; padding-inline: 0; }
/* the start page's vertical rhythm at the top level of a page: the light ground of a section's bottom padding above the
   panel (--hp-space, measured on /de/home: 124 / 88 / 72 px at 1440 / 1024 / 390) and below it, the panel's inset
   when the start page's calendar panel follows (as the next panel follows on the start page) */
#crm__widgets#crm__widgets > .frame-type-dgm_section_events > .dse--stage > .dse-stage > .dse-pn { margin-block: var(--hp-space); }
#crm__widgets#crm__widgets > .frame-type-dgm_section_events:has(+ .frame-type-dgm_section_events .dse-cl) > .dse--stage > .dse-stage > .dse-pn,
#crm__widgets#crm__widgets > .frame-type-dgm_section_events > .dse--stage > .dse-stage > .dse-pn:has(+ .dse-rest) { margin-bottom: 0; }
#crm__widgets .dse--stage > :is(.dse-head, .dse-empty, .dse-foot) { width: var(--dse-w); margin-inline: auto; }
#crm__widgets .dse-pn {
  --hp-ink: #003e52; --hp-ink-rgb: 0 62 82; --hp-ink-2: #004a62; --hp-primary: #00abe3; --hp-primary-rgb: 0 171 227;
  --hp-primary-700-rgb: 0 122 163; --hp-primary-800-rgb: 0 96 129; --hp-primary-900-rgb: 0 72 98; --hp-sky: #7fd8f5; --hp-text: #0f2233;
  --hp-head: Heading-Font, Theme-Font, Inter, system-ui, sans-serif; --hp-body: Theme-Font, Inter, system-ui, sans-serif;
  --hp-ease: cubic-bezier(.22, .8, .24, 1); --hp-ease-inout: cubic-bezier(.45, 0, .25, 1);
  --hp-gutter: clamp(20px, 5.5vw, 96px); --hp-inset: clamp(8px, 1.4vw, 20px); --hp-panel-space: clamp(56px, 6.2vw, 88px); --hp-space: clamp(72px, 8.6vw, 124px);
  --hp-wrap: min(1440px, 100% + 2 * var(--hp-inset) - 2 * var(--hp-gutter));
  --hp-r-xl: 28px; --hp-r-lg: 20px; --hp-r-md: 14px; --hp-r-sm: 10px; --hp-r-xs: 7px;
  --hp-f-h2: 700 1.5rem/1.25 var(--hp-head); --hp-f-feature: 600 clamp(1.375rem, 1.2rem + .7vw, 1.75rem)/1.2 var(--hp-head);
  --hp-f-strong: 600 1rem/1.35 var(--hp-body); --hp-f-small: 400 .875rem/1.5 var(--hp-body); --hp-f-label: 600 .875rem/1.35 var(--hp-body);
  --hp-f-micro: 600 .75rem/1.3 var(--hp-body); --hp-f-body: 400 1rem/1.55 var(--hp-body);
  position: relative; overflow: hidden; isolation: isolate; margin-inline: var(--hp-inset); padding-block: var(--hp-panel-space); border-radius: var(--hp-r-xl);
  background: var(--hp-ink); color: #fff; font: var(--hp-f-body); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-align: left; }
#crm__widgets .dse-pn :is(.dse-pn__date, .dse-pn__when, .dse-pn__left) { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 640px) { #crm__widgets .dse-pn { --hp-f-h2: 700 1.875rem/1.25 var(--hp-head); } }
@media (min-width: 1024px) { #crm__widgets .dse-pn { --hp-f-h2: 700 2.25rem/1.25 var(--hp-head); } }
#crm__widgets .dse-pn * { box-sizing: border-box; }
#crm__widgets .dse-pn :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#crm__widgets .dse-pn__bg { position: absolute; inset: -40px; z-index: -2; }
#crm__widgets .dse-pn__bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; filter: blur(46px) saturate(1.25); transition: opacity 1.2s var(--hp-ease); }
#crm__widgets .dse-pn__bg img.is-on { opacity: .34; }
#crm__widgets .dse-pn::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 90% at 100% 100%, rgb(var(--hp-primary-rgb) / .78), rgb(var(--hp-primary-rgb) / 0) 70%),
  radial-gradient(45% 55% at 0% 0%, rgb(var(--hp-primary-rgb) / .28), rgb(var(--hp-primary-rgb) / 0) 70%),
  linear-gradient(135deg, rgb(var(--hp-primary-900-rgb) / .93), rgb(var(--hp-primary-800-rgb) / .78) 48%, rgb(var(--hp-primary-700-rgb) / .82)); }
#crm__widgets .dse-pn__in { width: var(--hp-wrap); margin-inline: auto; }
#crm__widgets .dse-pn__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 16px clamp(32px, 5vw, 72px); margin-bottom: clamp(28px, 3.4vw, 48px); }
#crm__widgets .dse-pn__head > .dse-pn__btn { justify-self: end; }
@media (max-width: 767.98px) { #crm__widgets .dse-pn__head { grid-template-columns: minmax(0, 1fr); } #crm__widgets .dse-pn__head > .dse-pn__btn { justify-self: start; } }
#crm__widgets .dse-pn__eyebrow { font: 700 11px/1.5 var(--hp-body); display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px solid rgb(var(--hp-primary-rgb) / .45); border-radius: calc(infinity * 1px);
  background: rgb(var(--hp-primary-rgb) / .16); color: #fff; letter-spacing: .1em; text-transform: uppercase; }
#crm__widgets .dse-pn__eyebrow i { font-size: 11px; line-height: 11px; }
#crm__widgets .dse-pn__h2 { font: var(--hp-f-h2); margin: 0; letter-spacing: -.025em; text-wrap: balance; color: inherit; }
#crm__widgets .dse-pn__eyebrow + .dse-pn__h2 { margin-top: 14px; }
#crm__widgets .dse-pn__btn { font: var(--hp-f-strong); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: var(--hp-r-sm); border: 1px solid rgba(255, 255, 255, .32);
  color: #fff !important; background-color: rgba(255, 255, 255, .06); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--hp-ease), background-color .2s, border-color .2s, color .2s, box-shadow .25s; }
#crm__widgets .dse-pn__btn:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, .16); color: #fff; }
#crm__widgets .dse-pn__grid { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 8fr); gap: 16px; }
#crm__widgets .dse-pn__feat { position: relative; display: block; min-height: 392px; overflow: hidden; border-radius: var(--hp-r-lg); background: none; color: #fff !important; text-decoration: none; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .8); }
#crm__widgets .dse-pn__media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--hp-r-lg); background: var(--hp-ink-2); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
#crm__widgets .dse-pn__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0s linear .9s, transform 7s linear; }
#crm__widgets .dse-pn__photo.is-on { z-index: 1; opacity: 1; transform: scale(1); transition: opacity .9s var(--hp-ease), transform 7s linear; }
#crm__widgets .dse-pn__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / 0) 24%, rgb(var(--hp-ink-rgb) / .7) 46%, rgb(var(--hp-ink-rgb) / .88) 60%, rgb(var(--hp-ink-rgb) / .95) 100%); }
@media (max-width: 1023.98px) {
  #crm__widgets .dse-pn__shade { background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / 0) 16%, rgb(var(--hp-ink-rgb) / .72) 34%, rgb(var(--hp-ink-rgb) / .9) 46%, rgb(var(--hp-ink-rgb) / .95) 100%); }
}
#crm__widgets .dse-pn__left { font: var(--hp-f-micro); position: absolute; top: 14px; right: 14px; z-index: 3; padding: 5px 9px; border-radius: var(--hp-r-xs); background: var(--hp-primary); color: #fff; white-space: nowrap; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
#crm__widgets .dse-pn__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; padding: 24px; animation: dse-pn-in .6s var(--hp-ease) both; }
#crm__widgets .dse-pn__body[hidden] { display: none; }
@keyframes dse-pn-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#crm__widgets .dse-pn__date { font: var(--hp-f-label); display: block; color: var(--hp-sky); }
#crm__widgets .dse-pn__name { font: var(--hp-f-feature); display: block; margin-top: 6px; letter-spacing: 0; }
#crm__widgets .dse-pn__sub { font: var(--hp-f-small); display: -webkit-box; margin-top: 6px; overflow: hidden; color: #d3e0e8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#crm__widgets .dse-pn__open { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #fff; }
#crm__widgets .dse-pn__open svg { width: 15px; height: 15px; transition: transform .45s var(--hp-ease-inout); }
#crm__widgets .dse-pn__feat:hover .dse-pn__open svg { transform: translateX(3px); }
#crm__widgets .dse-pn__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
#crm__widgets .dse-pn__tiles > li { margin: 0; padding: 0; }
#crm__widgets .dse-pn__tile { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 7px; height: 100%; min-height: 128px; padding: 12px 12px 8px; overflow: hidden; border-radius: var(--hp-r-md); background: var(--hp-ink); background-image: none;
  color: #fff !important; text-decoration: none; transition: transform .45s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout); }
#crm__widgets .dse-pn__tile:hover { color: #fff; transform: translateY(-3px); }
#crm__widgets .dse-pn__tile.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(127, 216, 245, .2); }
#crm__widgets .dse-pn__tileimg { position: absolute; z-index: -2; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); max-width: none; object-fit: cover; filter: blur(6px) saturate(1.35); transition: filter .8s var(--hp-ease-inout), transform .8s var(--hp-ease-inout); }
#crm__widgets .dse-pn__tile:hover .dse-pn__tileimg, #crm__widgets .dse-pn__tile.is-on .dse-pn__tileimg { filter: blur(3px) saturate(1.5); transform: scale(1.08); }
#crm__widgets .dse-pn__tile::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / 0) 42%, rgb(var(--hp-ink-rgb) / .58) 100%); }
#crm__widgets .dse-pn__plate { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 10px; border-radius: var(--hp-r-sm); background: #fff; color: var(--hp-text); box-shadow: 0 10px 18px -12px rgb(var(--hp-ink-rgb) / .6); }
#crm__widgets .dse-pn__plate img { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; object-fit: contain; }
#crm__widgets .dse-pn__plate b { font: var(--hp-f-label); text-align: center; }
#crm__widgets .dse-pn__when { font: var(--hp-f-micro); overflow: hidden; text-align: center; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px rgb(var(--hp-ink-rgb) / .55); }
#crm__widgets .dse-pn__tile--more { font: var(--hp-f-label); align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); }
#crm__widgets .dse-pn__tile--more::after { content: none; }
/* the time to the next conference: shown on the current tile while the panel rotates (events.js sets its width) */
#crm__widgets .dse-pn__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); visibility: hidden; }
#crm__widgets .dse-pn__tile.is-on.is-run .dse-pn__bar { visibility: visible; }
@media (max-width: 1023.98px) {
  #crm__widgets .dse-pn__grid { grid-template-columns: minmax(0, 1fr); }
  #crm__widgets .dse-pn__feat { min-height: 320px; }
}
/* the swipe indicator under the tiles on phones (the start page's .hp-swipe) */
#crm__widgets .dse-pn__swipe { display: none; }
@media (max-width: 1023.98px), (hover: none) {
  #crm__widgets .dse-pn__swipe { --share: .3; --at: 0; position: relative; display: block; width: 64px; height: 4px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); pointer-events: none; }
  #crm__widgets .dse-pn__swipe i { position: absolute; inset: 0 auto 0 0; width: calc(var(--share) * 100%); border-radius: inherit; background: var(--hp-primary); transform: translateX(calc(var(--at) * (1 / var(--share) - 1) * 100%)); transition: width .3s var(--hp-ease); }
  #crm__widgets .dse-pn__swipe.is-off { display: none; }
}
#crm__widgets .dse-pn__grid > .dse-pn__swipe { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 767.98px) {
  #crm__widgets .dse-pn__tiles { --cols: 2.25; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cols) - .25) * 10px) / var(--cols)); gap: 10px;
    margin: -6px calc(-1 * var(--hp-gutter)); padding: 6px var(--hp-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hp-gutter); scrollbar-width: none; }
  #crm__widgets .dse-pn__tiles::-webkit-scrollbar { display: none; }
  #crm__widgets .dse-pn__tiles > li { min-width: 0; scroll-snap-align: start; }
  #crm__widgets .dse-pn__tile { min-height: 112px; padding: 10px 10px 7px; }
  #crm__widgets .dse-pn__feat { min-height: 300px; }
}
@media (min-width: 640px) and (max-width: 767.98px) { #crm__widgets .dse-pn__tiles { --cols: 3.25; } }
@media (min-width: 768px) { #crm__widgets .dse-pn__grid > .dse-pn__swipe { display: none; } }
/* scroll reveal as on the start page: the head rises and fades in, the grid only rises */
#crm__widgets .dse-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--hp-ease, ease), transform .8s var(--hp-ease, ease); }
#crm__widgets .dse-rv.dse-pn__grid { opacity: 1; transform: translateY(18px); transition: transform .6s var(--hp-ease, ease); }
#crm__widgets .dse-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #crm__widgets .dse-rv { opacity: 1; transform: none; transition: none; } }
/* the cards below the panel: the element's width and a small head of their own */
#crm__widgets .dse--stage .dse-rest { width: var(--dse-w); margin: 32px auto 0; }
#crm__widgets .dse--stage .dse-pn + .dse-rest { margin-top: clamp(40px, 4vw, 64px); }
#crm__widgets .dse-rest__h { margin: 0 0 20px; color: var(--dse-ink); font: 700 24px/1.25 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.02em; }

/* the further conferences: cards */
#crm__widgets .dse-rest { position: relative; margin-top: 32px; }
#crm__widgets .dse-rest:first-child { margin-top: 0; }
#crm__widgets .dse-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
#crm__widgets .dse-card { --dse-ev: #00abe3; position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--dse-line); border-radius: 16px; background: #fff; box-shadow: var(--dse-shadow); overflow: hidden;
  transition: box-shadow var(--dse-base) var(--dse-ease), transform var(--dse-base) var(--dse-ease); }
#crm__widgets .dse-card:hover { box-shadow: 0 1px 2px rgb(15 34 51 / .05), 0 22px 40px -22px rgb(0 33 44 / .45); }
#crm__widgets .dse-card__pic { position: relative; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--dse-ev) 85%, #00212c); overflow: hidden; }
#crm__widgets .dse-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--dse-ease); }
#crm__widgets .dse-card:hover .dse-card__pic img { transform: scale(1.03); }
#crm__widgets .dse-card__pic::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dse-ev) 40%, transparent)); pointer-events: none; }
#crm__widgets .dse-card__ph { position: absolute; inset: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; padding: 18px; color: #fff; font: 700 20px/1.2 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.02em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--dse-ev) 92%, #fff) 0%, color-mix(in srgb, var(--dse-ev) 70%, #00212c) 100%); }
#crm__widgets .dse-card__pic .dse-ribbon { position: absolute; top: 12px; left: 12px; z-index: 1; }
#crm__widgets .dse-card__logo { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: inline-flex; max-width: calc(100% - 28px); height: 44px; padding: 5px 9px; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -10px rgb(0 0 0 / .55); }
#crm__widgets .dse-card__logo img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
#crm__widgets .dse-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
#crm__widgets .dse-card__date { display: flex; align-items: center; gap: 8px; color: var(--dse-acc); font: 600 14px/1.3 Theme-Font, Inter, sans-serif; }
#crm__widgets .dse-card__name { color: var(--dse-ink); font: 700 20px/1.2 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; hyphens: manual; }
#crm__widgets .dse-card__name a { color: inherit; }
#crm__widgets .dse-card:hover .dse-card__name a { color: var(--dse-dark); }
#crm__widgets .dse-card__sub { color: #475569; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#crm__widgets .dse-card__where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 12px; color: var(--dse-text); font-size: 14px; }
#crm__widgets .dse-card__where > span:first-child:not(.dse-fchip) { display: inline-flex; align-items: center; gap: 6px; }
#crm__widgets .dse-card__where i { color: var(--dse-muted); }
#crm__widgets .dse-card .dse-stretch::after { border-radius: 16px; }
@media (max-width: 1023.98px) { #crm__widgets .dse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { #crm__widgets .dse-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* rest "grid": a last card alone in its row spans the row as a horizontal card (picture 16:10 left, as wide as one
   column; text right; same content and link). Two cards left in a row of three stay as they are; one column unchanged. */
@media (min-width: 1024px) {
  #crm__widgets .dse-rest--grid .dse-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; }
  #crm__widgets .dse-rest--grid .dse-card:last-child:nth-child(3n+1) .dse-card__pic { flex: 0 0 calc((100% - 40px) / 3); align-self: flex-start; }
  #crm__widgets .dse-rest--grid .dse-card:last-child:nth-child(3n+1) .dse-card__body { justify-content: center; padding: 24px 32px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  #crm__widgets .dse-rest--grid .dse-card:last-child:nth-child(2n+1) { grid-column: 1 / -1; flex-direction: row; }
  #crm__widgets .dse-rest--grid .dse-card:last-child:nth-child(2n+1) .dse-card__pic { flex: 0 0 calc((100% - 20px) / 2); align-self: flex-start; }
  #crm__widgets .dse-rest--grid .dse-card:last-child:nth-child(2n+1) .dse-card__body { justify-content: center; padding: 20px 24px; }
}
/* rest "row": one row that scrolls sideways, arrows that hide at the ends */
#crm__widgets .dse-rest--row .dse-cards { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px 2px 24px; margin: -4px -2px -24px; overscroll-behavior-x: contain; }
#crm__widgets .dse-rest--row .dse-cards::-webkit-scrollbar { display: none; }
#crm__widgets .dse-rest--row .dse-card { scroll-snap-align: start; }
@media (max-width: 1023.98px) { #crm__widgets .dse-rest--row .dse-cards { grid-auto-columns: calc((100% - 20px) / 2.15); } }
@media (max-width: 639.98px) { #crm__widgets .dse-rest--row .dse-cards { grid-auto-columns: 84%; } }
#crm__widgets .dse-arrows { position: absolute; inset: 0 -22px auto; z-index: 3; display: flex; justify-content: space-between; height: 0; top: var(--dse-ay, 120px); pointer-events: none; }
#crm__widgets .dse-arrow { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 1px solid var(--dse-line); border-radius: 50%; background: #fff; color: var(--dse-dark);
  box-shadow: 0 8px 20px -10px rgb(0 33 44 / .5); cursor: pointer; pointer-events: auto; }
#crm__widgets .dse-arrow[data-dir="1"] { margin-left: auto; }
#crm__widgets .dse-arrow:hover { color: var(--dse-acc); }
#crm__widgets .dse-arrow:focus-visible { outline: 2px solid var(--dse-acc); outline-offset: 2px; }
@media (max-width: 1239.98px) { #crm__widgets .dse-arrows { inset-inline: 6px; } }
@media (max-width: 639.98px) { #crm__widgets .dse-arrows { display: none; } }

/* =====================================================================================================================
   rows (browser and list)
   ===================================================================================================================== */
#crm__widgets .dse-rows { display: grid; gap: 0; }
#crm__widgets .dse-row { --dse-tc: #6f8798; position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(150px, auto) 20px; align-items: center; gap: 4px 20px; padding: 14px 16px; border-radius: 12px;
  transition: background-color var(--dse-fast) var(--dse-ease); }
#crm__widgets .dse-row + .dse-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--dse-line); }
#crm__widgets .dse-row:hover { background: #f4f9fc; }
#crm__widgets .dse-row:hover::before, #crm__widgets .dse-row:hover + .dse-row::before { opacity: 0; }
/* the date tile (task 18 follow-up): one width for every tile of a list, wide enough for the longest range "29.–30."
   with air on both sides (a range's days 18 px instead of 21; measured: at least 9 px to the border at every width) */
#crm__widgets .dse-date { display: grid; justify-items: center; align-content: center; width: 84px; min-height: 76px; padding: 8px 4px; border: 1px solid var(--dse-line); border-radius: 12px; background: #fff; text-align: center; line-height: 1.1; }
#crm__widgets .dse-date__d { color: var(--dse-ink); font: 700 21px/1.1 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
#crm__widgets .dse-date--range .dse-date__d { font-size: 18px; letter-spacing: -.03em; }
#crm__widgets .dse-date__m { margin-top: 3px; color: var(--dse-acc); font: 700 13px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#crm__widgets .dse-date__w { margin-top: 2px; color: var(--dse-muted); font-size: 13px; line-height: 1.2; white-space: nowrap; }
/* across two months: "28. FEB" over "– 5. MÄR"; an event that has begun: "läuft" over "bis 23. NOV" */
#crm__widgets .dse-date__x { color: var(--dse-ink); font: 400 13px/1.35 Theme-Font, Inter, sans-serif; white-space: nowrap; }
#crm__widgets .dse-date__x b, #crm__widgets .dse-date__u b { font: 700 16px/1.2 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.01em; }
#crm__widgets .dse-date__mm { color: var(--dse-acc); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#crm__widgets .dse-date__x + .dse-date__x { margin-top: 2px; }
#crm__widgets .dse-date { hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .dse-date__run { display: inline-flex; align-items: center; gap: 4px; color: var(--dse-ink); font: 700 13px/1.2 Theme-Font, Inter, sans-serif; white-space: nowrap; }
#crm__widgets .dse-date__run::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
@media (max-width: 767.98px) { #crm__widgets .dse-date__run::before { display: none; } }
#crm__widgets .dse-date__u { margin-top: 4px; color: var(--dse-muted); font-size: 13px; line-height: 1.3; }
#crm__widgets .dse-date__u b { color: var(--dse-ink); font-size: 15px; }
#crm__widgets .dse-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#crm__widgets .dse-row__meta { display: flex; flex-wrap: wrap; gap: 6px; }
#crm__widgets .dse-row__meta:empty { display: none; }
#crm__widgets .dse-row__name { color: var(--dse-ink); font: 700 17px/1.3 Theme-Font, Inter, sans-serif; letter-spacing: -.005em; }
#crm__widgets .dse-row__name a { color: inherit; }
#crm__widgets .dse-row:hover .dse-row__name a { color: var(--dse-dark); }
#crm__widgets .dse-row__sub { color: var(--dse-muted); font-size: 15px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#crm__widgets .dse-row__where { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--dse-text); font-size: 15px; }
#crm__widgets .dse-row__city { display: inline-flex; align-items: center; gap: 7px; }
#crm__widgets .dse-row__city i { color: var(--dse-muted); font-size: 13px; }
#crm__widgets .dse-row__go { color: var(--dse-acc); font-size: 14px; transition: transform var(--dse-base) var(--dse-ease); }
#crm__widgets .dse-row:hover .dse-row__go { transform: translateX(3px); }
#crm__widgets .dse-row .dse-stretch::after { border-radius: 12px; }
@media (max-width: 767.98px) {
  #crm__widgets .dse-row { grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 8px 14px; padding: 14px 4px; }
  #crm__widgets .dse-row + .dse-row::before { left: 4px; right: 4px; }
  #crm__widgets .dse-date { grid-row: span 2; align-self: start; width: 70px; min-height: 68px; }
  #crm__widgets .dse-date__d { font-size: 18px; }
  #crm__widgets .dse-date--range .dse-date__d { font-size: 15px; }
  #crm__widgets .dse-row__where { grid-column: 2; align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
  #crm__widgets .dse-row__go { display: none; }
  #crm__widgets .dse-row__name { font-size: 16px; }
  #crm__widgets .dse-row__sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; }
}

/* layout "list", option list_pictures (task 18 follow-up): a picture per row as the calendar rows have it: the feed's
   key visual, the logo on a white plate over the blurred picture where the CRM gives one, and under every picture a tile
   in the soft tint of the type colour with the type's icon (shown when there is no picture or it fails, events.js).
   No pictures below 640 px (the calendar's rule). Rows without the option are not touched. */
#crm__widgets .dse-row.has-pic { grid-template-columns: 84px 128px minmax(0, 1fr) minmax(150px, auto) 20px; }
#crm__widgets .dse-row__pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--dse-tc) 12%, #fff); }
#crm__widgets .dse-row__pic > img { position: relative; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.45, 0, .25, 1), filter .8s cubic-bezier(.45, 0, .25, 1); }
#crm__widgets .dse-row:hover .dse-row__pic > img { transform: scale(1.06); }
#crm__widgets .dse-row__pic.has-logo > img { transform: scale(1.14); filter: blur(4px) saturate(1.35); }
#crm__widgets .dse-row:hover .dse-row__pic.has-logo > img { transform: scale(1.2); filter: blur(2px) saturate(1.5); }
#crm__widgets .dse-row__plate { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; border-radius: 7px; background: #fff; box-shadow: 0 8px 14px -10px rgb(0 62 82 / .6); }
#crm__widgets .dse-row__plate img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#crm__widgets .dse-row__ticon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dse-tc); font-size: 24px; line-height: 1; }
#crm__widgets .dse-row__pic > img.is-broken, #crm__widgets .dse-row__plate.is-broken { display: none; }
@media (max-width: 1023.98px) { #crm__widgets .dse-row.has-pic { grid-template-columns: 84px 112px minmax(0, 1fr) minmax(130px, auto) 20px; } }
@media (max-width: 767.98px) {
  #crm__widgets .dse-row.has-pic { grid-template-columns: 70px 112px minmax(0, 1fr); }
  #crm__widgets .dse-row.has-pic .dse-row__pic { grid-row: span 2; align-self: start; }
  #crm__widgets .dse-row.has-pic .dse-row__where { grid-column: 3; }
}
@media (max-width: 639.98px) {
  #crm__widgets .dse-row.has-pic { grid-template-columns: 70px minmax(0, 1fr); }
  #crm__widgets .dse-row.has-pic .dse-row__pic { display: none; }
  #crm__widgets .dse-row.has-pic .dse-row__where { grid-column: 2; }
}
/* layout "list": the rows in one box */
#crm__widgets .dse-box { padding: 8px; border: 1px solid var(--dse-line); border-radius: 16px; background: #fff; box-shadow: var(--dse-shadow); }
#crm__widgets .dse--list .dse-foot { text-align: left; margin-top: 16px; }

/* =====================================================================================================================
   layout "browser": the start page's calendar "Alle DGM-Termine auf einen Blick" (Tools/HomeRedesign/sections/
   11-calendar.vue, ui/CalendarFilters.vue, ui/MonthCalendar.vue and the .cal, .hp-* rules of home.css, read only), under
   the element's prefix dse-cl. The filter card's measures are those of the shadcn components on the live start page
   (input 40 px, calendar cells 42 x 36, checkbox 16, selects 36), drawn with native controls.
   ===================================================================================================================== */
#crm__widgets .dse--browser { width: auto; margin: 0; }
#crm__widgets .dse--browser > :is(.dse-head, .dse-empty, .dse-foot) { width: var(--dse-w); margin-inline: auto; }
#crm__widgets#crm__widgets > .frame-type-dgm_section_events:has(> .dse--browser .dse-cl) { width: auto; max-width: none; margin: 0; padding-inline: 0; }
#crm__widgets .dse-cl {
  --hp-ink-rgb: 0 62 82; --hp-primary: #00abe3; --hp-primary-rgb: 0 171 227; --hp-primary-deep: #007aa8; --hp-mist: #f2f7fa; --hp-tint: #e3f4fb;
  --hp-track: #e8f0f4; --hp-line: #dce6ec; --hp-hairline: #e3e8ec; --hp-text: #0f2233; --hp-muted: #566b7c;
  --hp-head: Heading-Font, Theme-Font, Inter, system-ui, sans-serif; --hp-body: Theme-Font, Inter, system-ui, sans-serif;
  --hp-ease: cubic-bezier(.22, .8, .24, 1); --hp-ease-inout: cubic-bezier(.45, 0, .25, 1);
  --hp-gutter: clamp(20px, 5.5vw, 96px); --hp-inset: clamp(8px, 1.4vw, 20px); --hp-panel-space: clamp(56px, 6.2vw, 88px);
  --hp-wrap: min(1440px, 100% + 2 * var(--hp-inset) - 2 * var(--hp-gutter));
  --hp-r-xl: 28px; --hp-r-md: 14px; --hp-r-sm: 10px; --hp-r-xs: 7px; --hp-r-card: 16px;
  --hp-shadow-soft: 0 1px 0 rgba(13, 27, 38, .02), 0 8px 24px rgba(13, 27, 38, .04);
  --hp-f-h2: 700 1.5rem/1.25 var(--hp-head); --hp-f-h3: 600 1.5rem/1.25 var(--hp-head); --hp-f-title: 600 1.25rem/1.3 var(--hp-head);
  --hp-f-strong: 600 1rem/1.35 var(--hp-body); --hp-f-small: 400 .875rem/1.5 var(--hp-body); --hp-f-label: 600 .875rem/1.35 var(--hp-body);
  --hp-f-micro: 600 .75rem/1.3 var(--hp-body); --hp-f-body: 400 1rem/1.55 var(--hp-body);
  position: relative; margin: var(--hp-inset); padding-block: var(--hp-panel-space); border-radius: var(--hp-r-xl); background: var(--hp-mist); color: var(--hp-text);
  font: var(--hp-f-body); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-align: left; }
#crm__widgets .dse-cl :is(.dse-cl__date, .dse-cl__facts, .dse-cl__count, .dse-cl__table, .dse-cl__sort) { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 640px) { #crm__widgets .dse-cl { --hp-f-h2: 700 1.875rem/1.25 var(--hp-head); } }
@media (min-width: 1024px) { #crm__widgets .dse-cl { --hp-f-h2: 700 2.25rem/1.25 var(--hp-head); } }
#crm__widgets .dse-cl * { box-sizing: border-box; }
#crm__widgets .dse-cl :is(a, button, input, select):focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
#crm__widgets .dse-cl__in { width: var(--hp-wrap); margin-inline: auto; }
#crm__widgets .dse-cl__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 16px clamp(32px, 5vw, 72px); margin-bottom: clamp(28px, 3.4vw, 48px); }
#crm__widgets .dse-cl__head > .dse-cl__btn { justify-self: end; }
@media (max-width: 767.98px) { #crm__widgets .dse-cl__head { grid-template-columns: minmax(0, 1fr); } #crm__widgets .dse-cl__head > .dse-cl__btn { justify-self: start; } }
#crm__widgets .dse-cl__eyebrow { font: 700 11px/1.5 var(--hp-body); display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px solid rgb(var(--hp-primary-rgb) / .3); border-radius: calc(infinity * 1px);
  background: rgb(var(--hp-primary-rgb) / .05); color: var(--hp-primary); letter-spacing: .1em; text-transform: uppercase; }
#crm__widgets .dse-cl__eyebrow i { font-size: 11px; line-height: 11px; }
#crm__widgets .dse-cl__h2 { font: var(--hp-f-h2); margin: 0; letter-spacing: -.025em; text-wrap: balance; color: inherit; }
#crm__widgets .dse-cl__eyebrow + .dse-cl__h2 { margin-top: 14px; }
#crm__widgets .dse-cl__btn { font: var(--hp-f-strong); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-sm); background: #fff; color: var(--hp-text) !important;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s var(--hp-ease), background-color .2s, border-color .2s, color .2s; }
#crm__widgets .dse-cl__btn:hover { transform: translateY(-2px); border-color: var(--hp-primary); color: var(--hp-primary) !important; }
#crm__widgets .dse-cl__grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
#crm__widgets .dse-cl__side { min-width: 0; }
@media (min-width: 1024px) and (min-height: 900px) { #crm__widgets .dse-cl__side { position: sticky; top: 96px; } }
/* the filter card (the start page's shadcn card with its family surface) */
#crm__widgets .dse-cl__card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; color: var(--hp-text); box-shadow: var(--hp-shadow-soft); }
#crm__widgets .dse-cl__search { position: relative; }
#crm__widgets .dse-cl__search svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--hp-muted); transform: translateY(-50%); pointer-events: none; }
#crm__widgets .dse-cl__search input { display: block; width: 100%; height: 40px; margin: 0; padding: 4px 12px 4px 36px; border: 1px solid var(--hp-line); border-radius: 8px; background: var(--hp-mist); color: var(--hp-text);
  font: 400 14px/20px var(--hp-body); letter-spacing: -.006em; box-shadow: none; -webkit-appearance: none; appearance: none; }
#crm__widgets .dse-cl__search input::placeholder { color: var(--hp-muted); opacity: 1; }
#crm__widgets .dse-cl__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#crm__widgets .dse-cl__search input:focus-visible { outline: none; border-color: var(--hp-primary); box-shadow: 0 0 0 3px rgb(var(--hp-primary-rgb) / .5); }
#crm__widgets .dse-cl__toggle { display: none; }
#crm__widgets .dse-cl__filters { display: flex; flex-direction: column; gap: 16px; }
#crm__widgets .dse-cl__sep { height: 1px; margin: 0; border: 0; background: var(--hp-line); }
/* month calendar */
#crm__widgets .dse-cl__cal { width: 100%; }
#crm__widgets .dse-cl__calhead { display: flex; align-items: center; justify-content: space-between; width: 100%; }
#crm__widgets .dse-cl__nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #f1f5f9; border-radius: 8px; background: transparent; color: var(--hp-text); cursor: pointer; transition: background-color .2s; }
#crm__widgets .dse-cl__nav:hover { background: var(--hp-tint); color: var(--hp-primary-deep); }
#crm__widgets .dse-cl__nav:disabled { opacity: .5; pointer-events: none; }
#crm__widgets .dse-cl__nav svg { width: 16px; height: 16px; }
#crm__widgets .dse-cl__heading { font: 600 14px/20px var(--hp-body); letter-spacing: -.006em; }
#crm__widgets .dse-cl__table { width: 100%; margin: 12px 0 0; border: 0; border-collapse: collapse; user-select: none; }
#crm__widgets .dse-cl__table :is(thead, tbody, tr, th, td) { border: 0; background: none; }
#crm__widgets .dse-cl__table tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; }
#crm__widgets .dse-cl__table tbody tr { margin-top: 4px; }
#crm__widgets .dse-cl__table th { padding: 0; color: var(--hp-muted); font: 500 12px/16px var(--hp-body); text-align: center; }
#crm__widgets .dse-cl__table td { position: relative; padding: 0; text-align: center; }
#crm__widgets .dse-cl__day { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin: 0; padding: 0 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--hp-text);
  font: 400 14px/20px var(--hp-body); letter-spacing: -.006em; cursor: pointer; transition: background-color .15s, color .15s; }
#crm__widgets .dse-cl__day:hover { background: var(--hp-tint); color: var(--hp-primary-deep); }
#crm__widgets .dse-cl__day.is-today { background: var(--hp-tint); color: var(--hp-primary-deep); }
#crm__widgets .dse-cl__day:disabled { color: var(--hp-muted); opacity: .5; pointer-events: none; }
#crm__widgets .dse-cl__day.is-out { color: var(--hp-muted); opacity: .4; pointer-events: none; }
#crm__widgets .dse-cl__day[aria-pressed="true"] { background: var(--hp-primary); color: #fff; }
#crm__widgets .dse-cl__dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 2px; pointer-events: none; }
#crm__widgets .dse-cl__dots i { width: 4px; height: 4px; border-radius: 50%; }
#crm__widgets .dse-cl__day[aria-pressed="true"] .dse-cl__dots i { background: #fff !important; }
/* kinds of event */
#crm__widgets .dse-cl__types { display: flex; flex-direction: column; gap: 2px; }
#crm__widgets .dse-cl__opt { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 6px; border-radius: 8px; cursor: pointer; transition: background-color .15s; }
#crm__widgets .dse-cl__opt:hover { background: var(--hp-mist); }
#crm__widgets .dse-cl__opt input { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; border: 1px solid var(--hp-line); border-radius: 4px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
#crm__widgets .dse-cl__opt input:checked { border-color: var(--hp-primary); background: var(--hp-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
#crm__widgets .dse-cl__opt label { display: flex; flex: 1; align-items: center; gap: 8px; height: 100%; margin: 0; color: var(--hp-text); font: 400 14px/14px var(--hp-body); letter-spacing: -.006em; cursor: pointer; }
#crm__widgets .dse-cl__opt label::after { content: ""; position: absolute; inset: 0; }
#crm__widgets .dse-cl__opt label i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
#crm__widgets .dse-cl__n { color: var(--hp-muted); font: 600 12px/16px var(--hp-body); font-variant-numeric: tabular-nums; }
/* selects */
#crm__widgets .dse-cl__field { display: flex; flex-direction: column; gap: 6px; }
#crm__widgets .dse-cl__field label { margin: 0; color: var(--hp-muted); font: 600 12px/16px var(--hp-body); letter-spacing: -.006em; }
#crm__widgets .dse-cl__field select { display: block; width: 100%; height: 36px; margin: 0; padding: 8px 36px 8px 12px; border: 1px solid var(--hp-line); border-radius: 8px; color: var(--hp-text); font: 400 14px/20px var(--hp-body); letter-spacing: -.006em;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
/* the list */
#crm__widgets .dse-cl__main { position: relative; min-width: 0; }
#crm__widgets .dse-cl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
#crm__widgets .dse-cl__count { font: var(--hp-f-strong); margin: 0; color: var(--hp-text); }
#crm__widgets .dse-cl__pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#crm__widgets .dse-cl__pills:empty { display: none; }
#crm__widgets .dse-cl__pills button { font: var(--hp-f-micro); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px; border: 1px solid var(--hp-primary); border-radius: 999px; background: var(--hp-primary); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s; }
#crm__widgets .dse-cl__pills button:hover { border-color: var(--hp-primary-deep); background: var(--hp-primary-deep); }
#crm__widgets .dse-cl__pills svg { width: 11px; height: 11px; }
#crm__widgets .dse-cl__sort { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: var(--hp-r-sm); background: var(--hp-track); }
#crm__widgets .dse-cl__sort button { font: var(--hp-f-label); min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--hp-r-xs); background: transparent; color: var(--hp-muted); cursor: pointer; transition: background-color .2s, color .2s; }
#crm__widgets .dse-cl__sort button.is-on { background: #fff; color: var(--hp-text); box-shadow: 0 1px 3px rgba(15, 34, 51, .16); }
#crm__widgets .dse-cl__groups { margin-bottom: -24px; }
#crm__widgets .dse-cl__groups:empty { margin-bottom: 0; }
#crm__widgets .dse-cl__group { display: grid; grid-template-rows: 1fr; }
#crm__widgets .dse-cl__group > * { min-width: 0; }
#crm__widgets .dse-cl__group > .dse-cl__list { margin-bottom: 24px; }
#crm__widgets .dse-cl__label { font: var(--hp-f-title); display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: var(--hp-text); letter-spacing: -.006em; }
#crm__widgets .dse-cl__label span { font: var(--hp-f-small); letter-spacing: -.006em; color: var(--hp-muted); }
#crm__widgets .dse-cl__list { margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; box-shadow: var(--hp-shadow-soft); }
#crm__widgets .dse-cl__list > li { margin: 0; padding: 0; }
#crm__widgets .dse-cl__list > li + li { border-top: 1px solid var(--hp-line); }
#crm__widgets .dse-cl__row { display: grid; grid-template-columns: 52px 128px minmax(0, 1fr) 18px; align-items: center; gap: 16px; min-height: 100px; padding: 10px 20px 10px 14px; background-image: none; color: var(--hp-text) !important; text-decoration: none; transition: background-color .35s var(--hp-ease-inout); }
#crm__widgets .dse-cl__row:hover { background-color: var(--hp-mist); }
#crm__widgets .dse-cl .dse-cl__list .dse-cl__row:focus-visible { outline-offset: -3px; border-radius: calc(var(--hp-r-card) - 1px); }
#crm__widgets .dse-cl__row > svg { width: 16px; height: 16px; color: var(--hp-primary); transition: transform .45s var(--hp-ease-inout); }
#crm__widgets .dse-cl__row:hover > svg { transform: translateX(3px); }
#crm__widgets .dse-cl__date { font: var(--hp-f-micro); display: block; text-align: center; color: var(--hp-muted); }
#crm__widgets .dse-cl__date small { font: var(--hp-f-micro); display: block; color: var(--hp-muted); }
#crm__widgets .dse-cl__date b { font: var(--hp-f-h3); display: block; color: var(--hp-text); letter-spacing: -.006em; }
#crm__widgets .dse-cl__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--hp-r-sm); background: var(--hp-mist); }
#crm__widgets .dse-cl__thumb > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s var(--hp-ease-inout), filter .8s var(--hp-ease-inout); }
#crm__widgets .dse-cl__row:hover .dse-cl__thumb > img { transform: scale(1.06); }
#crm__widgets .dse-cl__row.has-logo .dse-cl__thumb > img { transform: scale(1.14); filter: blur(4px) saturate(1.35); }
#crm__widgets .dse-cl__row.has-logo:hover .dse-cl__thumb > img { transform: scale(1.2); filter: blur(2px) saturate(1.5); }
#crm__widgets .dse-cl__plate { position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; border-radius: var(--hp-r-xs); background: #fff; box-shadow: 0 8px 14px -10px rgb(var(--hp-ink-rgb) / .6); }
#crm__widgets .dse-cl__plate img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
/* a row without a picture, or whose picture does not load (events.js marks it): a tile in the soft tint of the type
   colour with the type's icon (task 18; the start page shows an empty mist box there); a logo that does not load takes
   its plate and the blur with it, so the row shows its picture as a row without a logo does */
#crm__widgets .dse-cl__thumb { background: color-mix(in srgb, var(--k, #6f8798) 12%, #fff); }
#crm__widgets .dse-cl__thumb > img { position: relative; }
#crm__widgets .dse-cl__ticon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--k, #6f8798); font-size: 24px; line-height: 1; }
#crm__widgets .dse-cl__thumb > img.is-broken, #crm__widgets .dse-cl__plate.is-broken { display: none; }
#crm__widgets .dse-cl__what { min-width: 0; display: block; }
#crm__widgets .dse-cl__type { font: var(--hp-f-micro); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--hp-muted); }
#crm__widgets .dse-cl__type i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
#crm__widgets .dse-cl__kind { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 7px; border: 1px solid color-mix(in srgb, var(--k, #6f8798) 32%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--k, #6f8798) 10%, #fff); }
#crm__widgets .dse-cl__type em { font: var(--hp-f-micro); padding: 0 7px; border: 1px solid rgb(138 90 6 / .3); border-radius: 999px; background: #fdf0d9; color: #8a5a06; font-style: normal; }
/* the name is the content of an events page: never cut (the start page clamps it to two lines); long words break with
   a hyphen in the language of the name, overflow-wrap only as the last resort */
#crm__widgets .dse-cl__what strong { font: var(--hp-f-strong); display: block; margin-top: 3px; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
#crm__widgets .dse-cl__sub { font: var(--hp-f-small); display: block; margin-top: 1px; overflow: hidden; color: var(--hp-text); white-space: nowrap; text-overflow: ellipsis; }
#crm__widgets .dse-cl__facts { font: var(--hp-f-small); display: flex; flex-wrap: wrap; column-gap: 1.3em; margin-top: 2px; overflow: hidden; color: var(--hp-muted); }
#crm__widgets .dse-cl__facts > span { position: relative; min-width: 0; }
#crm__widgets .dse-cl__when { white-space: normal; }
#crm__widgets .dse-cl__facts > span + span::before { content: "\00b7"; position: absolute; top: 0; right: 100%; width: 1.3em; text-align: center; }
#crm__widgets .dse-cl__short { display: none; }
#crm__widgets .dse-cl__more { display: flex; margin: 20px auto 0; }
#crm__widgets .dse-cl__more[hidden], #crm__widgets .dse-cl__none[hidden], #crm__widgets .dse-cl__pool { display: none; }
#crm__widgets .dse-cl__none { padding: 44px 20px; border: 1px dashed var(--hp-line); border-radius: var(--hp-r-md); text-align: center; color: var(--hp-muted); }
#crm__widgets .dse-cl__none p { margin: 0 0 14px; }
#crm__widgets .dse-cl .dse-rv.dse-cl__side, #crm__widgets .dse-cl .dse-rv.dse-cl__main { opacity: 1; transform: translateY(18px); transition: transform .6s var(--hp-ease); }
#crm__widgets .dse-cl .dse-rv.is-in { opacity: 1; transform: none; }
@media (max-width: 1023.98px) {
  #crm__widgets .dse-cl__grid { grid-template-columns: minmax(0, 1fr); }
  /* the filters fold behind a button, as the start page's */
  #crm__widgets .dse-cl__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 16px; border: 1px solid #f1f5f9; border-radius: 8px; background: #fff; color: var(--hp-text);
    font: 500 14px/20px var(--hp-body); letter-spacing: -.006em; cursor: pointer; }
  #crm__widgets .dse-cl__toggle > span { display: flex; align-items: center; gap: 8px; }
  #crm__widgets .dse-cl__toggle svg { width: 16px; height: 16px; transition: transform .2s; }
  #crm__widgets .dse-cl__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  #crm__widgets .dse-cl__badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 8px; background: var(--hp-primary); color: #fff; font: 600 12px/16px var(--hp-body); }
  #crm__widgets .dse-cl__badge[hidden] { display: none; }
  #crm__widgets .dse-cl__filters { display: none; }
  #crm__widgets .dse-cl__card.is-open .dse-cl__filters { display: flex; }
}
@media (max-width: 639.98px) {
  /* phones: no row shows a picture (the start page shows only the ones with a logo plate: two rows of eight) */
  #crm__widgets .dse-cl__row, #crm__widgets .dse-cl__row.has-logo { grid-template-columns: 46px minmax(0, 1fr) 16px; gap: 10px; padding: 12px 12px 12px 8px; }
  #crm__widgets .dse-cl__thumb, #crm__widgets .dse-cl__row.has-logo .dse-cl__thumb { display: none; }
  #crm__widgets .dse-cl__date b { font: var(--hp-f-title); }
  #crm__widgets .dse-cl__sort { margin-left: 0; }
  #crm__widgets .dse-cl__long { display: none; }
  #crm__widgets .dse-cl__short { display: inline; }
}

/* =====================================================================================================================
   layout "kinds" (task 18, 2026-11-13): the start page's entry cards "Finden Sie Ihren Einstieg in die DGM"
   (Tools/HomeRedesign/sections/02-paths.vue and the .paths, .hp-sec, .hp-head, .hp-eyebrow, .hp-h2, .hp-swipe, .hp-rv
   rules and tokens of Tools/HomeRedesign/home.css, read only) under the prefix dse-kd. Tall photo cards with a cyan shade
   rising from the bottom, the title on the shade, a count badge at the top; the card under the pointer or the focus
   opens wide (events.js). Below 1280 px one row that scrolls sideways. One addition: a dot in the type colour inside
   the badge. A card without a photograph: a tint in its type colour with the type's icon.
   ===================================================================================================================== */
#crm__widgets .dse--kinds { width: var(--dse-w); margin-inline: auto; }
#crm__widgets .dse--kinds > .dse-empty { width: var(--dse-w); margin-inline: auto; }
/* at the top level of a page the frame spans the page and the section has the start page's measures (white section,
   --hp-space above and below, the content width of the start page) */
#crm__widgets#crm__widgets > .frame-type-dgm_section_events:has(> .dse--kinds .dse-kd) { width: auto; max-width: none; margin: 0; padding-inline: 0; }
#crm__widgets#crm__widgets > .frame-type-dgm_section_events > .dse--kinds { width: auto; margin: 0; }
#crm__widgets .dse-kd {
  --hp-ink-2: #004a62; --hp-primary: #00abe3; --hp-primary-rgb: 0 171 227; --hp-primary-600-rgb: 0 146 194; --hp-primary-700-rgb: 0 122 163;
  --hp-primary-800-rgb: 0 96 129; --hp-primary-900-rgb: 0 72 98; --hp-text: #0f2233;
  --hp-head: Heading-Font, Theme-Font, Inter, system-ui, sans-serif; --hp-body: Theme-Font, Inter, system-ui, sans-serif;
  --hp-ease: cubic-bezier(.22, .8, .24, 1); --hp-ease-inout: cubic-bezier(.45, 0, .25, 1);
  --hp-gutter: clamp(20px, 5.5vw, 96px); --hp-space: clamp(72px, 8.6vw, 124px); --hp-r-lg: 20px; --hp-r-xs: 7px;
  --hp-f-h2: 700 1.5rem/1.25 var(--hp-head); --hp-f-title: 600 1.25rem/1.3 var(--hp-head); --hp-f-body: 400 1rem/1.55 var(--hp-body);
  --hp-f-label: 600 .875rem/1.35 var(--hp-body); --hp-f-micro: 600 .75rem/1.3 var(--hp-body);
  /* inside a section: the element's width, the sideways row reaches the screen edges */
  --hp-wrap: 100%; --dse-kd-bleed: calc((100vw - var(--dse-w)) / 2);
  position: relative; padding-block: 0; color: var(--hp-text); font: var(--hp-f-body); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-align: left; }
#crm__widgets#crm__widgets > .frame-type-dgm_section_events > .dse--kinds > .dse-kd { --hp-wrap: min(1440px, 100% - 2 * var(--hp-gutter)); --dse-kd-bleed: var(--hp-gutter); padding-block: var(--hp-space); background: #fff; }
@media (min-width: 640px) { #crm__widgets .dse-kd { --hp-f-h2: 700 1.875rem/1.25 var(--hp-head); } }
@media (min-width: 1024px) { #crm__widgets .dse-kd { --hp-f-h2: 700 2.25rem/1.25 var(--hp-head); } }
#crm__widgets .dse-kd * { box-sizing: border-box; }
#crm__widgets .dse-kd :is(a, [tabindex]):focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
#crm__widgets .dse-kd__in { width: var(--hp-wrap); margin-inline: auto; }
#crm__widgets .dse-kd__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 16px clamp(32px, 5vw, 72px); margin-bottom: clamp(28px, 3.4vw, 48px); }
@media (max-width: 767.98px) { #crm__widgets .dse-kd__head { grid-template-columns: minmax(0, 1fr); } }
#crm__widgets .dse-kd__eyebrow { font: 700 12px/1.5 var(--hp-body); display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px solid rgb(var(--hp-primary-rgb) / .3); border-radius: calc(infinity * 1px);
  background: rgb(var(--hp-primary-rgb) / .05); color: var(--hp-primary); letter-spacing: .1em; text-transform: uppercase; }
#crm__widgets .dse-kd__eyebrow i { font-size: 12px; line-height: 12px; }
#crm__widgets .dse-kd__h2 { font: var(--hp-f-h2); margin: 0; letter-spacing: -.025em; text-wrap: balance; color: inherit; }
#crm__widgets .dse-kd__eyebrow + .dse-kd__h2 { margin-top: 14px; }
/* the cards (home.css "Entry panels") */
#crm__widgets .dse-kd__row { --n: 5; display: flex; gap: 12px; height: clamp(380px, 31vw, 440px); container-type: inline-size; }
#crm__widgets .dse-kd__item { position: relative; display: block; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--hp-r-lg); background: var(--hp-ink-2); background-image: none; color: #fff !important; text-decoration: none; transition: flex-grow .65s var(--hp-ease); }
#crm__widgets .dse-kd__item.is-on { flex-grow: 2.2; }
#crm__widgets .dse-kd__item:hover { color: #fff; }
/* photo and shade are clipped together by a mask (clipped one by one the light photo shows as a rim along the corners) */
#crm__widgets .dse-kd__media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--hp-r-lg); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
#crm__widgets .dse-kd__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: scale(1.08); transition: transform 1s var(--hp-ease); }
#crm__widgets .dse-kd__item.is-on .dse-kd__img { transform: scale(1); }
/* a card without a photograph: a tint in its type colour (cyan without a type), the type's icon large and light */
#crm__widgets .dse-kd__item.is-tint { background: color-mix(in srgb, var(--k, #00abe3) 14%, #fff); }
#crm__widgets .dse-kd__item.is-tint .dse-kd__media { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--k, #00abe3) 8%, #fff), color-mix(in srgb, var(--k, #00abe3) 30%, #fff)); }
#crm__widgets .dse-kd__ticon { position: absolute; top: 30%; left: 50%; color: color-mix(in srgb, var(--k, #00abe3) 55%, #fff); font-size: 72px; line-height: 1; transform: translate(-50%, -50%) rotate(-6deg); }
/* two fades that crossfade with the card's own transition: closed, only the title; open (::after), title, text, link */
#crm__widgets .dse-kd__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--hp-primary-800-rgb) / 0) 44%, rgb(var(--hp-primary-800-rgb) / .42) 60%, rgb(var(--hp-primary-700-rgb) / .72) 74%, rgb(var(--hp-primary-600-rgb) / .86) 88%, rgb(var(--hp-primary-rgb) / .92) 100%); }
#crm__widgets .dse-kd__shade::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .65s var(--hp-ease); background: linear-gradient(180deg, rgb(var(--hp-primary-800-rgb) / 0) 40%, rgb(var(--hp-primary-800-rgb) / .48) 56%, rgb(var(--hp-primary-700-rgb) / .92) 68%, rgb(var(--hp-primary-700-rgb) / .92) 88%, rgb(var(--hp-primary-600-rgb) / .9) 95%, rgb(var(--hp-primary-rgb) / .92) 100%); }
#crm__widgets .dse-kd__item.is-on .dse-kd__shade::after { opacity: 1; }
@media (max-width: 1279.98px) { #crm__widgets .dse-kd__shade::after { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #crm__widgets .dse-kd__shade::after { transition: none; } }
#crm__widgets .dse-kd :is(.dse-kd__title, .dse-kd__text, .dse-kd__more) { text-shadow: 0 1px 3px rgb(var(--hp-primary-900-rgb) / .6); }
/* the count badge, with one addition: a dot in the type colour (a white ring keeps a cyan dot visible on the cyan badge) */
#crm__widgets .dse-kd__stat { font: var(--hp-f-micro); position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--hp-r-xs); background: var(--hp-primary); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#crm__widgets .dse-kd__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, #fff); box-shadow: 0 0 0 1px #fff; }
#crm__widgets .dse-kd__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
#crm__widgets .dse-kd__title { font: var(--hp-f-title); font-weight: 700; display: block; letter-spacing: -.014em; hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .dse-kd__reveal { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); opacity: 0; transition: grid-template-rows .55s var(--hp-ease), opacity .4s; }
#crm__widgets .dse-kd__reveal > * { min-height: 0; overflow: hidden; }
#crm__widgets .dse-kd__item.is-on .dse-kd__reveal { grid-template-rows: 1fr; opacity: 1; transition-delay: .12s; }
/* the text keeps the width of the OPEN card while the card opens (no reflow): the start page's 380 px, or less when more
   than five cards make the open card narrower (--n cards in the row: the open card's share of the row less its padding) */
#crm__widgets .dse-kd__text { font: var(--hp-f-body); display: block; width: min(380px, 62vw, (100cqw - (var(--n) - 1) * 12px) * 2.2 / (var(--n) + 1.2) - 40px); padding-top: 6px; color: #f1f9fd; hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .dse-kd__text:empty, #crm__widgets .dse-kd__more:empty { display: none; }
#crm__widgets .dse-kd__more { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 8px; padding-top: 10px; color: #fff; }
#crm__widgets .dse-kd__more svg { width: 15px; height: 15px; transition: transform .45s var(--hp-ease-inout); }
#crm__widgets .dse-kd__item:hover .dse-kd__more svg { transform: translateX(3px); }
/* a closed card's title never breaks inside a word without its own hyphen: from 1280 px (where the cards share the row)
   ALL closed titles of a row take one size, the smaller of the normal size and what lets the row's longest word (--kw on
   the row, in em, from the server) fit the closed card's inner width (the row is the container: its width less the
   gaps, the closed card's share, its padding), at least 17 px; below that a word breaks at a joint (soft hyphen). The
   open card keeps the normal size. */
@media (min-width: 1280px) {
  #crm__widgets .dse-kd__item:not(.is-on) .dse-kd__title { font-size: clamp(17px, ((100cqw - (var(--n) - 1) * 12px) / (var(--n) + 1.2) - 40px) / var(--kw, 1), 20px); }
  #crm__widgets .dse-kd__title { transition: font-size .65s var(--hp-ease); }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  #crm__widgets .dse-kd__item:not(.is-on) .dse-kd__title { font-size: clamp(17px, ((100cqw - (var(--n) - 1) * 12px) / (var(--n) + .7) - 32px) / var(--kw, 1), 20px); }
}
@media (prefers-reduced-motion: reduce) { #crm__widgets .dse-kd__title { transition: none; } }
@media (max-width: 1439.98px) {
  #crm__widgets .dse-kd__item.is-on { flex-grow: 1.7; }
  #crm__widgets .dse-kd__body { padding: 16px; }
  #crm__widgets .dse-kd__text { width: min(290px, (100cqw - (var(--n) - 1) * 12px) * 1.7 / (var(--n) + .7) - 32px); }
}
@media (max-width: 1279.98px) {
  #crm__widgets .dse-kd__row { height: auto; margin: -4px calc(-1 * var(--dse-kd-bleed)); padding: 4px var(--dse-kd-bleed); scroll-padding-inline: var(--dse-kd-bleed); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #crm__widgets .dse-kd__row::-webkit-scrollbar { display: none; }
  #crm__widgets .dse-kd__item, #crm__widgets .dse-kd__item.is-on { flex: 0 0 min(78vw, 340px); height: 400px; scroll-snap-align: start; }
  #crm__widgets .dse-kd__reveal { grid-template-rows: 1fr; opacity: 1; }
  #crm__widgets .dse-kd__text { width: auto; }
  #crm__widgets .dse-kd__img { transform: none; }
}
/* the swipe indicator under the row (the start page's .hp-swipe, moved by events.js) */
#crm__widgets .dse-kd__swipe { display: none; }
@media (max-width: 1023.98px), (hover: none) {
  #crm__widgets .dse-kd__swipe { --share: .3; --at: 0; position: relative; display: block; width: 64px; height: 4px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); pointer-events: none; }
  #crm__widgets .dse-kd__swipe i { position: absolute; inset: 0 auto 0 0; width: calc(var(--share) * 100%); border-radius: inherit; background: var(--hp-primary); transform: translateX(calc(var(--at) * (1 / var(--share) - 1) * 100%)); transition: width .3s var(--hp-ease); }
  #crm__widgets .dse-kd__swipe.is-off { display: none; }
}
/* scroll reveal: the head rises and fades in (the shared .dse-rv), the row only rises */
#crm__widgets .dse-rv.dse-kd__row { opacity: 1; transform: translateY(18px); transition: transform .6s var(--hp-ease); }
#crm__widgets .dse-rv.dse-kd__row.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { #crm__widgets .dse-rv.dse-kd__row { transform: none; transition: none; } }

/* =====================================================================================================================
   layout "archive": the CRM's archive widget (inside untouched) in a box that holds its reserved height from the first
   paint (FlexForm "heights" -> CSS in <head> per element key; the fallback below). Until the widget has put in its
   first entries a quiet skeleton covers the box and the widget is invisible (and out of the focus order); events.js
   writes the state per key into <head> (#dse-arch-state), because the site's Vue app renders the content again.
   ===================================================================================================================== */
#crm__widgets .dse-arch { --dse-sk: #e9eff4; position: relative; }
/* the fallback height when the element has no "heights" (lower than the per-element rules in <head>) */
:where(#crm__widgets) .dse-arch { min-height: 960px; }
#crm__widgets .dse-arch__w { visibility: hidden; opacity: 0; transition: opacity var(--dse-base) var(--dse-ease), visibility 0s linear var(--dse-base); }
#crm__widgets .dse-arch::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 12px;
  background:
    linear-gradient(var(--dse-sk) 0 0) 0 0 / min(320px, 60%) 40px no-repeat,
    repeating-linear-gradient(90deg, var(--dse-sk) 0 calc(20% - 26px), transparent calc(20% - 26px) 20%) 0 72px / calc(100% + 32px) 300px no-repeat,
    repeating-linear-gradient(90deg, var(--dse-sk) 0 calc(20% - 26px), transparent calc(20% - 26px) 20%) 0 404px / calc(100% + 32px) 300px no-repeat;
  animation: dse-sk 1.4s ease-in-out infinite alternate; transition: opacity var(--dse-base) var(--dse-ease); }
@keyframes dse-sk { from { opacity: 1; } to { opacity: .55; } }
@media (max-width: 1279.98px) { #crm__widgets .dse-arch::before { background:
    linear-gradient(var(--dse-sk) 0 0) 0 0 / min(320px, 60%) 40px no-repeat,
    repeating-linear-gradient(90deg, var(--dse-sk) 0 calc(33.333% - 22px), transparent calc(33.333% - 22px) 33.333%) 0 72px / calc(100% + 32px) 300px no-repeat,
    repeating-linear-gradient(90deg, var(--dse-sk) 0 calc(33.333% - 22px), transparent calc(33.333% - 22px) 33.333%) 0 404px / calc(100% + 32px) 300px no-repeat; } }
@media (max-width: 639.98px) { #crm__widgets .dse-arch::before { background:
    linear-gradient(var(--dse-sk) 0 0) 0 0 / 100% 40px no-repeat,
    repeating-linear-gradient(180deg, var(--dse-sk) 0 300px, transparent 300px 332px) 0 72px / 100% calc(100% - 72px) no-repeat; } }
#crm__widgets .dse-arch__fail { display: none; position: absolute; inset: 0 0 auto; z-index: 3; padding: 32px 24px; border: 1px solid var(--dse-line); border-radius: 16px; background: #fff; text-align: center; box-shadow: var(--dse-shadow); }
#crm__widgets .dse-arch__msg { margin: 0 0 8px; color: #475569; font-size: 16px; }
#crm__widgets .dse-arch__msg:empty { margin: 0; }
/* round 2: one line on the first grey bar while the list loads (hidden by the state in <head> when it is there) */
#crm__widgets .dse-arch__wait { position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; height: 40px; max-width: 100%; margin: 0; padding: 0 16px; color: #475569;
  font: 500 15px/1.3 Theme-Font, Inter, sans-serif; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #crm__widgets .dse *, #crm__widgets .dse *::before, #crm__widgets .dse *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  #crm__widgets .dse-card:hover .dse-card__pic img { transform: none; }
}

/* =====================================================================================================================
   layout "explore" (task 21, 2026-11-13): the stage's conference cards (.dse-card, unchanged) as a place to find and
   browse events. The controls take the measures of the calendar's (layout browser): fields 40 px, radius 8, type 14 px,
   checkbox 16 px, the sort switch on its track. Bright: white and sky tints, cyan #00abe3 for active states and accents,
   navy #003e52 as text. The month strip is drawn on the page ground as a year planner: a column per month, one mark per
   event in its own colour where its days fall, the year where it begins, a cyan line for today.
   ===================================================================================================================== */
#crm__widgets .dse--explore { --ex-ink: #003e52; --ex-acc: #00abe3; --ex-deep: #007aa8; --ex-sky: #e6f6fd; --ex-mist: #f4fbfe; --ex-line: #dce6ec; --ex-hair: #e3e8ec; --ex-muted: #566b7c; --ex-quiet: #98abb8;
  --ex-body: Theme-Font, Inter, system-ui, sans-serif; --ex-head: Heading-Font, "Inter Tight", Inter, sans-serif; --ex-ease: cubic-bezier(.2, .7, .2, 1);
  /* the calendar's tokens, for its rows in the view "list" */
  --hp-ink-rgb: 0 62 82; --hp-primary: #00abe3; --hp-primary-rgb: 0 171 227; --hp-primary-deep: #007aa8; --hp-mist: #f2f7fa; --hp-tint: #e3f4fb; --hp-track: #e8f0f4;
  --hp-line: #dce6ec; --hp-hairline: #e3e8ec; --hp-text: #0f2233; --hp-muted: #566b7c; --hp-head: Heading-Font, Theme-Font, Inter, system-ui, sans-serif;
  --hp-body: Theme-Font, Inter, system-ui, sans-serif; --hp-ease-inout: cubic-bezier(.45, 0, .25, 1); --hp-r-md: 14px; --hp-r-sm: 10px; --hp-r-xs: 7px; --hp-r-card: 16px;
  --hp-shadow-soft: 0 1px 0 rgba(13, 27, 38, .02), 0 8px 24px rgba(13, 27, 38, .04); --hp-f-h3: 600 1.5rem/1.25 var(--hp-head); --hp-f-title: 600 1.25rem/1.3 var(--hp-head);
  --hp-f-strong: 600 1rem/1.35 var(--hp-body); --hp-f-small: 400 .875rem/1.5 var(--hp-body); --hp-f-micro: 600 .75rem/1.3 var(--hp-body); }
#crm__widgets .dse--explore .dse-head { margin-bottom: 32px; }
#crm__widgets .dse--explore ::selection { background: rgb(0 171 227 / .22); color: inherit; }
#crm__widgets .dse-ex :is(button, input, select, a):focus-visible { outline: 2px solid var(--ex-acc); outline-offset: 2px; }
#crm__widgets .dse-ex__count { margin: 12px 0 0; color: var(--ex-muted); font: 600 16px/1.4 var(--ex-body); font-variant-numeric: tabular-nums; }
#crm__widgets .dse-ex__count--solo { margin: 0 0 14px; color: var(--ex-ink); }

/* the tool row: one white bar that stays under the site's sticky bars while the cards are on screen */
#crm__widgets .dse-ex__bar { position: sticky; top: 84px; z-index: 30; transition: top 220ms var(--ex-ease); }
#crm__widgets .dse-ex__barin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--ex-hair); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 28px -20px rgb(15 34 51 / .2); transition: box-shadow 220ms var(--ex-ease); }
#crm__widgets .dse-ex__bar.is-stuck .dse-ex__barin { box-shadow: 0 1px 2px rgb(15 34 51 / .06), 0 18px 36px -18px rgb(0 33 44 / .38); }
#crm__widgets .dse-ex__search { position: relative; flex: 1 1 240px; min-width: 180px; max-width: 380px; }
#crm__widgets .dse-ex__search svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--ex-muted); transform: translateY(-50%); pointer-events: none; }
#crm__widgets .dse-ex__search input { display: block; width: 100%; height: 40px; margin: 0; padding: 4px 12px 4px 36px; border: 1px solid var(--ex-line); border-radius: 8px; background: var(--hp-mist); color: var(--ex-ink);
  font: 400 14px/20px var(--ex-body); letter-spacing: -.006em; box-shadow: none; caret-color: var(--ex-acc); -webkit-appearance: none; appearance: none; transition: border-color .15s, background-color .15s; }
#crm__widgets .dse-ex__search input::placeholder { color: var(--ex-muted); opacity: 1; }
#crm__widgets .dse-ex__search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#crm__widgets .dse-ex__search input:focus-visible { outline: none; border-color: var(--ex-acc); background: #fff; box-shadow: 0 0 0 3px rgb(0 171 227 / .3); }
#crm__widgets .dse-ex__fl { display: flex; flex-wrap: wrap; gap: 8px; }
#crm__widgets .dse-ex__f { position: relative; }
#crm__widgets :is(.dse-ex__tr, .dse-ex__open) { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 12px 0 14px; border: 1px solid var(--ex-line); border-radius: 8px; background: #fff;
  color: var(--ex-ink); font: 500 14px/20px var(--ex-body); letter-spacing: -.006em; white-space: nowrap; cursor: pointer; transition: border-color .15s, background-color .15s; }
#crm__widgets :is(.dse-ex__tr, .dse-ex__open):hover { border-color: #b6d2de; background: var(--ex-mist); }
#crm__widgets :is(.dse-ex__tr, .dse-ex__open) svg { width: 16px; height: 16px; flex: none; color: var(--ex-muted); transition: transform 200ms var(--ex-ease); }
#crm__widgets .dse-ex__f.is-open .dse-ex__tr svg { transform: rotate(180deg); }
#crm__widgets :is(.dse-ex__f.is-set .dse-ex__tr, .dse-ex__open.is-set) { border-color: var(--ex-acc); background: var(--ex-sky); }
#crm__widgets .dse-ex__fn { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ex-acc); color: #fff; font: 700 12px/1 var(--ex-body); font-variant-numeric: tabular-nums; }
#crm__widgets .dse-ex__open { display: none; padding-left: 12px; }
#crm__widgets .dse-ex__open svg { color: var(--ex-ink); }
/* the panel of a filter: checkboxes with the number each would leave */
#crm__widgets .dse-ex__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; min-width: 264px; max-width: min(620px, calc(100vw - 32px)); max-height: min(68vh, 470px); overflow: auto;
  padding: 8px; border: 1px solid var(--ex-hair); border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgb(15 34 51 / .05), 0 28px 56px -24px rgb(0 33 44 / .4); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ex-line) transparent; }
#crm__widgets .dse-ex__pop.is-right { left: auto; right: 0; }
#crm__widgets .dse-ex__f.is-open .dse-ex__pop { animation: dse-ex-in 160ms var(--ex-ease); }
@keyframes dse-ex-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#crm__widgets .dse-ex__fs { min-width: 0; margin: 0; padding: 0; border: 0; }
#crm__widgets .dse-ex__pop .dse-ex__lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#crm__widgets .dse-ex__pop:has(.dse-ex__fs--cols) { width: min(640px, calc(100vw - 32px)); }
#crm__widgets .dse-ex__pop .dse-ex__fs--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
/* one long list (places on a page with many events): two columns of the same list */
#crm__widgets .dse-ex__pop .dse-ex__fs--cols:not(:has(.dse-ex__og + .dse-ex__og)) { display: block; }
#crm__widgets .dse-ex__pop .dse-ex__fs--cols:not(:has(.dse-ex__og + .dse-ex__og)) .dse-ex__og { columns: 2; column-gap: 8px; }
#crm__widgets .dse-ex__pop .dse-ex__opt { break-inside: avoid; }
#crm__widgets .dse-ex__gl { margin: 6px 8px 4px; color: var(--ex-muted); font: 600 12px/16px var(--ex-body); letter-spacing: .02em; }
#crm__widgets .dse-ex__opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; padding: 5px 8px; border-radius: 8px; color: var(--ex-ink); font: 400 14px/1.35 var(--ex-body);
  letter-spacing: -.006em; cursor: pointer; hyphens: manual; transition: background-color .15s; }
#crm__widgets .dse-ex__opt:hover { background: var(--ex-mist); }
#crm__widgets .dse-ex__opt input { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; border: 1px solid #c3d4dd; border-radius: 4px; background: #fff; -webkit-appearance: none; appearance: none; cursor: pointer; }
#crm__widgets .dse-ex__opt input:checked { border-color: var(--ex-acc); background: var(--ex-acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
#crm__widgets .dse-ex__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--ex-acc)); }
#crm__widgets .dse-ex__ol { flex: 1; min-width: 0; }
#crm__widgets .dse-ex__n { min-width: 2ch; margin-left: 8px; color: var(--ex-muted); font: 600 12px/16px var(--ex-body); font-variant-numeric: tabular-nums; text-align: right; }
#crm__widgets .dse-ex__opt.is-off { color: var(--ex-quiet); cursor: default; }
#crm__widgets .dse-ex__opt.is-off:hover { background: none; }
#crm__widgets .dse-ex__opt.is-off :is(input, .dse-ex__n) { opacity: .6; cursor: default; }
#crm__widgets .dse-ex__opt.is-off .dse-ex__dot { opacity: .35; }
/* sort and view: the calendar's switch on its track */
#crm__widgets .dse-ex__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hp-track); }
#crm__widgets .dse-ex__seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--ex-muted);
  font: 600 14px/1.35 var(--ex-body); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s; }
#crm__widgets .dse-ex__seg button:hover { color: var(--ex-ink); }
#crm__widgets .dse-ex__seg button[aria-pressed="true"] { background: #fff; color: var(--ex-ink); box-shadow: 0 1px 3px rgb(15 34 51 / .16); }
#crm__widgets .dse-ex__seg svg { width: 16px; height: 16px; }
#crm__widgets .dse-ex__bar .dse-ex__seg--sort { margin-left: auto; }
#crm__widgets .dse-ex__bar .dse-ex__seg--view button { padding: 0 9px; }
#crm__widgets .dse-ex__bar .dse-ex__seg--view span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the month strip */
#crm__widgets .dse-ex__time { margin: 22px 0 0; }
#crm__widgets .dse-ex__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(60px, 1fr); margin: -4px -4px -18px; padding: 4px 4px 22px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
#crm__widgets .dse-ex__strip::-webkit-scrollbar { display: none; }
#crm__widgets .dse-ex__strip.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
#crm__widgets .dse-ex__strip.is-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
#crm__widgets .dse-ex__strip.is-more.is-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
#crm__widgets .dse-ex__mo { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: 6px 8px 14px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ex-ink); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; transition: background-color .15s, box-shadow .15s; }
#crm__widgets .dse-ex__mo:hover { background: var(--ex-mist); }
#crm__widgets .dse-ex__mo:focus-visible { outline-offset: -2px; }
/* the baseline of the year and the month ticks on it; a taller, darker tick where a year begins */
#crm__widgets .dse-ex__mo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--ex-line); }
#crm__widgets .dse-ex__mo::before { content: ""; position: absolute; left: 0; bottom: 4px; width: 1px; height: 9px; background: #c6d6de; }
#crm__widgets .dse-ex__mo:first-child::before { display: none; }
#crm__widgets .dse-ex__mo.is-year::before { top: 8px; bottom: 4px; height: auto; background: rgb(0 62 82 / .32); }
#crm__widgets .dse-ex__yr { display: block; height: 16px; color: var(--ex-ink); font: 700 13px/16px var(--ex-head); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
#crm__widgets .dse-ex__mn { display: block; color: var(--ex-ink); font: 600 14px/20px var(--ex-body); letter-spacing: -.006em; }
#crm__widgets .dse-ex__lanes { position: relative; display: block; width: 100%; height: 33px; margin-top: 10px; }
#crm__widgets .dse-ex__lanes i { position: absolute; top: calc(var(--l) * 9px); left: min(var(--x), calc(100% - 10px)); width: max(10px, var(--w)); height: 6px; border-radius: 3px; background: var(--c);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .9); transition: opacity 200ms; }
#crm__widgets .dse-ex__lanes i.is-off { opacity: .12; }
#crm__widgets .dse-ex__now { position: absolute; top: -6px; bottom: -11px; left: var(--x); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ex-acc); }
#crm__widgets .dse-ex__now::after { content: ""; position: absolute; bottom: -2px; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--ex-acc); }
/* "heute" under the line (left or right of it near the month's ends, so it stays in the column) */
#crm__widgets .dse-ex__nowl { position: absolute; top: calc(100% + 16px); left: var(--x); color: #006b94; font: 600 13px/1 var(--ex-body); white-space: nowrap; transform: translateX(-50%); }
#crm__widgets .dse-ex__nowl.is-start { transform: translateX(-2px); }
#crm__widgets .dse-ex__nowl.is-end { transform: translateX(calc(2px - 100%)); }
#crm__widgets .dse-ex__mo[aria-disabled="true"] { cursor: default; }
#crm__widgets .dse-ex__mo[aria-disabled="true"]:hover { background: transparent; }
#crm__widgets .dse-ex__mo[aria-disabled="true"] .dse-ex__mn { color: var(--ex-quiet); font-weight: 500; }
#crm__widgets .dse-ex__mo.is-on { background: var(--ex-sky); box-shadow: inset 0 0 0 1px rgb(0 171 227 / .5); }
#crm__widgets .dse-ex__mo.is-on .dse-ex__mn { font-weight: 700; }
#crm__widgets .dse-ex__strip.has-pick .dse-ex__mo:not(.is-on) .dse-ex__lanes i:not(.is-off) { opacity: .35; }

/* the active filters */
#crm__widgets .dse-ex__state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; }
#crm__widgets .dse-ex__pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#crm__widgets .dse-ex__pills button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; margin: 0; padding: 0 10px 0 12px; border: 1px solid var(--ex-acc); border-radius: 999px; background: var(--ex-acc);
  color: #fff; font: 600 13px/1.25 var(--ex-body); text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
#crm__widgets .dse-ex__pills button:hover { border-color: var(--ex-deep); background: var(--ex-deep); }
#crm__widgets .dse-ex__pills svg { flex: none; width: 11px; height: 11px; }
#crm__widgets .dse-ex__pills .dse-ex__pq { width: 13px; height: 13px; }
#crm__widgets .dse-ex__clear { display: inline-flex; align-items: center; min-height: 36px; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--ex-deep); font: 600 14px/1.3 var(--ex-body);
  text-decoration: underline; text-decoration-color: rgb(0 122 168 / .35); text-underline-offset: 4px; cursor: pointer; }
#crm__widgets .dse-ex__clear:hover { color: var(--ex-ink); text-decoration-color: currentColor; }
#crm__widgets .dse-ex__clear:disabled { color: var(--ex-quiet); text-decoration: none; cursor: default; }

/* the results: year heads over the cards */
#crm__widgets .dse-ex__res { margin-top: 28px; }
#crm__widgets .dse-ex__grp + .dse-ex__grp { margin-top: 44px; }
#crm__widgets .dse-ex__yh { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: var(--ex-ink); }
#crm__widgets .dse-ex__yh[hidden] { display: none; }
#crm__widgets .dse-ex__yh::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--ex-line); }
#crm__widgets .dse-ex__y { font: 700 28px/1.1 var(--ex-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#crm__widgets .dse-ex__yn { order: 2; color: var(--ex-muted); font: 500 15px/1.4 var(--ex-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
#crm__widgets .dse-ex .dse-cl__list { margin: 0; }
/* the detector's stragglers: names and subnames of the cards keep a word company on their last line (here only) */
#crm__widgets .dse-ex .dse-card__name { text-wrap: balance; }
#crm__widgets .dse-ex .dse-card__sub { text-wrap: pretty; }
/* the stage grid's rule: a last card alone in its row spans the row as a horizontal card (picture as wide as a column) */
@media (min-width: 1024px) {
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; }
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(3n+1) .dse-card__pic { flex: 0 0 calc((100% - 40px) / 3); align-self: flex-start; }
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(3n+1) .dse-card__body { justify-content: center; padding: 24px 32px; }
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(3n+1) .dse-ex__ics { margin: 16px -32px -24px; padding: 0 32px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(2n+1) { grid-column: 1 / -1; flex-direction: row; }
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(2n+1) .dse-card__pic { flex: 0 0 calc((100% - 20px) / 2); align-self: flex-start; }
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(2n+1) .dse-card__body { justify-content: center; padding: 20px 24px; }
  #crm__widgets .dse-ex .dse-cards > .dse-card:last-child:nth-child(2n+1) .dse-ex__ics { margin: 16px -24px -20px; padding: 0 24px; }
}
#crm__widgets .dse-ex .dse-cl__list .dse-cl__row:focus-visible { outline-offset: -3px; border-radius: 15px; }
#crm__widgets .dse-ex :is(.dse-cl__date, .dse-cl__facts) { hyphens: manual; -webkit-hyphens: manual; }
/* on the cards: the countdown on the next ones, "add to calendar" as the card's foot */
#crm__widgets .dse-ex__soon { position: absolute; top: 12px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border-radius: 999px; background: #fff;
  color: var(--ex-ink); font: 600 13px/1 var(--ex-body); white-space: nowrap; box-shadow: 0 6px 16px -10px rgb(0 0 0 / .55); transform: rotate(-3deg); }
#crm__widgets .dse-ex__soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ex-acc); }
#crm__widgets .dse-ex__soon.is-now::before { box-shadow: 0 0 0 3px rgb(0 171 227 / .25); }
#crm__widgets .dse-ex__ics { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; align-self: stretch; min-height: 48px; margin: 16px -20px -20px; padding: 0 20px; border: 0; border-top: 1px solid var(--dse-line);
  border-radius: 0; background: #fff; color: var(--ex-ink); font: 600 14px/1.3 var(--ex-body); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
#crm__widgets .dse-ex__ics i { color: var(--ex-acc); font-size: 15px; }
#crm__widgets .dse-ex__ics:hover { background: var(--ex-mist); color: var(--ex-deep); }
#crm__widgets .dse-ex__ics:focus-visible { outline-offset: -3px; }
/* nothing left, "show more" */
#crm__widgets .dse-ex__none { display: grid; justify-items: center; gap: 18px; margin-top: 28px; padding: 48px 24px; border: 1px solid #d3ebf6; border-radius: 16px; background: var(--ex-mist); text-align: center; }
#crm__widgets .dse-ex__none p { max-width: 42ch; color: var(--ex-ink); font: 600 18px/1.45 var(--ex-body); text-wrap: balance; }
#crm__widgets .dse-ex__noneb { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
#crm__widgets .dse-ex__go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 20px; border: 0; border-radius: 10px; background: var(--ex-acc); color: #fff;
  font: 600 15px/1.3 var(--ex-body); white-space: nowrap; cursor: pointer; transition: background-color .2s; }
#crm__widgets .dse-ex__go:hover { background: var(--ex-deep); }
#crm__widgets .dse-ex__more { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 28px auto 0; padding: 0 20px; border: 1px solid var(--ex-line); border-radius: 10px; background: #fff;
  color: var(--ex-ink); font: 600 16px/1.35 var(--ex-body); cursor: pointer; transition: border-color .2s, color .2s; }
#crm__widgets .dse-ex__more:hover { border-color: var(--ex-acc); color: var(--ex-deep); }
#crm__widgets .dse-ex__pool { display: none; }

/* the phone's sheet */
html.dse-lock { overflow: hidden; }
#crm__widgets .dse-ex__sheet { position: fixed; inset: auto 0 0; display: none; flex-direction: column; width: 100%; max-width: 100%; max-height: min(88dvh, 780px); margin: 0; padding: 0; border: 0;
  border-radius: 20px 20px 0 0; background: #fff; color: var(--ex-ink); box-shadow: 0 -24px 60px -24px rgb(0 33 44 / .45); overflow: hidden; }
#crm__widgets .dse-ex__sheet[open] { display: flex; animation: dse-ex-sheet 280ms var(--ex-ease); }
#crm__widgets .dse-ex__sheet::backdrop { background: rgb(0 33 44 / .42); }
@keyframes dse-ex-sheet { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
#crm__widgets .dse-ex__sh { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 10px 10px 20px; border-bottom: 1px solid var(--ex-hair); }
#crm__widgets .dse-ex__sh::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #d5e1e7; }
#crm__widgets .dse-ex__st { margin: 0; color: var(--ex-ink); font: 700 20px/1.2 var(--ex-head); letter-spacing: -.02em; }
#crm__widgets .dse-ex__x { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ex-ink); cursor: pointer; }
#crm__widgets .dse-ex__x:hover { background: var(--ex-mist); }
#crm__widgets .dse-ex__x svg { width: 20px; height: 20px; }
#crm__widgets .dse-ex__sb { flex: 1; min-height: 0; padding: 4px 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
#crm__widgets .dse-ex__sb .dse-ex__fs { padding: 16px 0 10px; }
#crm__widgets .dse-ex__sb .dse-ex__fs + .dse-ex__fs { border-top: 1px solid var(--ex-hair); }
#crm__widgets .dse-ex__sb .dse-ex__lg { float: left; width: 100%; margin: 0 0 8px; padding: 0; color: var(--ex-ink); font: 700 15px/1.3 var(--ex-body); }
#crm__widgets .dse-ex__sb .dse-ex__lg + * { clear: both; }
#crm__widgets .dse-ex__sb .dse-ex__opt { min-height: 44px; margin: 0 -8px; }
#crm__widgets .dse-ex__sb .dse-ex__seg { display: flex; }
#crm__widgets .dse-ex__sb .dse-ex__seg button { flex: 1; justify-content: center; min-height: 40px; }
#crm__widgets .dse-ex__sf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ex-hair); background: #fff; }
#crm__widgets .dse-ex__sf .dse-ex__go { flex: 1; max-width: 320px; min-height: 48px; }
#crm__widgets .dse-ex__sf .dse-ex__clear { white-space: nowrap; }
@media (min-width: 640px) { #crm__widgets .dse-ex__sheet { left: 50%; width: min(560px, 100% - 32px); margin-left: calc(min(560px, 100% - 32px) / -2); } }

@media (max-width: 1023.98px) {
  #crm__widgets .dse-ex__fl, #crm__widgets .dse-ex__bar .dse-ex__seg { display: none; }
  #crm__widgets .dse-ex__open { display: inline-flex; }
  #crm__widgets .dse-ex__search { max-width: none; }
}
@media (max-width: 639.98px) {
  #crm__widgets .dse-ex__barin { gap: 8px; padding: 8px; border-radius: 14px; }
  #crm__widgets .dse-ex__search { flex-basis: 0; min-width: 0; }
  #crm__widgets .dse-ex__search input, #crm__widgets .dse-ex__open { height: 44px; font-size: 16px; }
  #crm__widgets .dse-ex__strip { grid-auto-columns: 62px; margin-inline: -4px calc(-4px - (100vw - var(--dse-w)) / 2); padding-right: calc(4px + (100vw - var(--dse-w)) / 2); }
  #crm__widgets .dse-ex__pills button { min-height: 44px; }
  #crm__widgets .dse-ex__sb .dse-ex__seg button { min-height: 44px; }
  #crm__widgets .dse-ex__clear { min-height: 44px; }
  #crm__widgets .dse-ex__res { margin-top: 24px; }
  #crm__widgets .dse-ex__grp + .dse-ex__grp { margin-top: 36px; }
  #crm__widgets .dse-ex__y { font-size: 24px; }
  #crm__widgets .dse-ex__none { padding: 36px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #crm__widgets .dse-ex__f.is-open .dse-ex__pop, #crm__widgets .dse-ex__sheet[open] { animation: none; }
  #crm__widgets :is(.dse-ex__bar, .dse-ex__barin, .dse-ex__lanes i, .dse-ex__tr svg) { transition: none; }
}

/* =====================================================================================================================
   round 2 (2026-11-13, critique): pictures with width and height (the logo plates keep their own size), the explorer's
   list view on a page of one kind, the compact card on phones
   ===================================================================================================================== */
#crm__widgets :is(.dse-cl__plate, .dse-row__plate) img { width: auto; height: auto; }
#crm__widgets .dse-ex.is-onekind .dse-cl__kind { display: none; }
#crm__widgets .dse-ex.is-onekind .dse-cl__type:not(:has(em)) { display: none; }
@media (max-width: 639.98px) {
  /* the card lies on its side: a picture column of 112 px beside date, name, subname, place and format; "add to calendar"
     stays the card's foot over the whole width (44 px); the logo chip leaves (the name is beside it) */
  #crm__widgets .dse-ex .dse-cards > .dse-card { flex-direction: row; }
  #crm__widgets .dse-ex .dse-card__pic { flex: 0 0 112px; min-height: 140px; aspect-ratio: auto; }
  #crm__widgets .dse-ex .dse-card__pic > img { position: absolute; inset: 0; }
  #crm__widgets .dse-ex .dse-card__logo { display: none; }
  #crm__widgets .dse-ex .dse-card__ph { padding: 10px; color: transparent; }
  #crm__widgets .dse-ex .dse-card__pic .dse-ribbon { top: 8px; left: 8px; max-width: calc(100% - 16px); min-height: 24px; padding: 2px 8px; font-size: 12px; white-space: normal; }
  #crm__widgets .dse-ex .dse-ex__soon { top: auto; right: auto; bottom: 54px; left: 6px; gap: 5px; min-height: 24px; padding: 0 8px; font-size: 12px; }
  #crm__widgets .dse-ex .dse-card__body { gap: 4px; min-width: 0; padding: 14px 14px 14px 16px; }
  #crm__widgets .dse-ex .dse-card__date { font-size: 13px; }
  #crm__widgets .dse-ex .dse-card__name { font-size: 18px; }
  #crm__widgets .dse-ex .dse-card__sub { font-size: 14px; }
  #crm__widgets .dse-ex .dse-card__where { gap: 6px 10px; padding-top: 8px; font-size: 13px; }
  #crm__widgets .dse-ex .dse-ex__ics { min-height: 44px; margin: 12px -14px -14px -128px; padding: 0 16px; }
  #crm__widgets .dse-ex .dse-cards { gap: 12px; }
}

/* =====================================================================================================================
   Akademie task B2 (2026-11-13): the explorer as the Akademie's course finder. Only for the new options, so every other
   explorer looks as before: .dse-ex--course (ex_card "course": the course card, text first), .dse-ex--open
   (ex_filters "open": the filters as an open column from 1024 px), the preset's pill with its count. Body 16 px,
   nothing below 12 px; cyan #00abe3 for accents and active states, navy #003e52 as text.
   ===================================================================================================================== */
/* the course card: name, one line, then the facts; the facts sit at the card's foot so they line up along a row */
#crm__widgets .dse-course { --dse-tc: #6f8798; padding: 20px 22px 18px; border-color: var(--ex-hair); box-shadow: 0 1px 2px rgb(15 34 51 / .04);
  transition: border-color 200ms var(--ex-ease), box-shadow 200ms var(--ex-ease); }
#crm__widgets .dse-course:hover { border-color: rgb(0 171 227 / .45); box-shadow: 0 1px 2px rgb(15 34 51 / .05), 0 18px 34px -24px rgb(0 33 44 / .4); }
#crm__widgets .dse-course__name { margin: 0; color: var(--ex-ink); font: 700 19px/1.3 var(--ex-head); letter-spacing: -.012em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
#crm__widgets .dse-course__name a { color: inherit; transition: color 150ms; }
#crm__widgets .dse-course:hover .dse-course__name a { color: var(--ex-deep); }
#crm__widgets .dse-course__sub { margin: 6px 0 0; color: #355466; font: 400 16px/1.5 var(--ex-body); text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#crm__widgets .dse-course__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
#crm__widgets .dse-course__tags > span { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; font: 600 13px/1.3 var(--ex-body); white-space: nowrap; }
#crm__widgets .dse-course__new { background: var(--ex-sky); color: #00658a; }
#crm__widgets .dse-course__booked { background: #fdeeee; color: #a1262c; }
#crm__widgets .dse-course__kind { border: 1px solid var(--ex-line); color: var(--ex-ink); }
#crm__widgets .dse-course__kind i { width: 8px; height: 8px; border-radius: 50%; background: var(--dse-tc); }
#crm__widgets .dse-course__soon { border: 1px solid var(--ex-line); color: var(--ex-ink); }
#crm__widgets .dse-course__soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ex-acc); }
#crm__widgets .dse-course__facts { display: grid; flex: 1; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
#crm__widgets .dse-course__facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; color: var(--ex-ink); font: 400 15px/1.45 var(--ex-body); font-variant-numeric: tabular-nums; }
#crm__widgets .dse-course__facts i { justify-self: center; color: var(--ex-acc); font-size: 14px; }
#crm__widgets .dse-course__dur { white-space: nowrap; }
#crm__widgets .dse-course__dur::before { content: "\00b7"; margin: 0 7px; color: var(--ex-muted); }
#crm__widgets .dse-course__plan { display: inline-block; margin-left: 4px; padding: 0 8px; border: 1px solid rgb(0 171 227 / .45); border-radius: 999px; background: #f2fbfe; color: #00658a;
  font: 600 13px/22px var(--ex-body); font-style: normal; white-space: nowrap; vertical-align: 1px; }
#crm__widgets .dse-ex.dse-ex--course .dse-cards > .dse-course.dse-card:nth-child(n) .dse-ex__ics { margin: 14px -22px -18px; padding: 0 22px; }
/* the conference card's own rules of the explorer do not apply to the course card */
#crm__widgets .dse-ex--course .dse-cards > .dse-course:last-child:nth-child(n) { grid-column: auto; flex-direction: column; }
#crm__widgets .dse-ex--course .dse-cards { align-items: stretch; }
@media (max-width: 639.98px) {
  #crm__widgets .dse-ex--course .dse-cards > .dse-card { flex-direction: column; }
  #crm__widgets .dse-course { padding: 18px 18px 16px; }
  #crm__widgets .dse-course__name { font-size: 18px; }
  #crm__widgets .dse-ex.dse-ex--course .dse-cards > .dse-course.dse-card:nth-child(n) .dse-ex__ics { min-height: 44px; margin: 12px -18px -16px; padding: 0 18px; }
  /* the month strip runs out to the screen's edge, not 4 px past it (the page must not scroll sideways without a section around it) */
  #crm__widgets .dse-ex--course .dse-ex__strip { margin-right: calc((100vw - var(--dse-w)) / -2); padding-right: calc((100vw - var(--dse-w)) / 2); }
}
/* the search of the course finder: the portal's main field */
#crm__widgets .dse-ex--course .dse-ex__search input { height: 46px; font-size: 16px; }
#crm__widgets .dse-ex--course .dse-ex__search svg { width: 18px; height: 18px; }
#crm__widgets .dse-ex--course :is(.dse-ex__tr, .dse-ex__open) { height: 46px; font-size: 15px; }
/* the preset's pill (a topic or industry page) carries its count */
#crm__widgets .dse-ex__pills .dse-ex__pc { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #fff; color: #00658a;
  font: 700 12px/1 var(--ex-body); font-variant-numeric: tabular-nums; }

/* the open filter column: from 1024 px every filter in view beside the results; the phone keeps its sheet */
#crm__widgets .dse-ex__side { display: none; }
@media (min-width: 1024px) {
  #crm__widgets .dse-ex--open { display: grid; grid-template-columns: 272px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  #crm__widgets .dse-ex--open > :is(.dse-ex__count--solo, .dse-ex__bar) { grid-column: 1 / -1; }
  #crm__widgets .dse-ex--open > .dse-ex__main { grid-column: 2; min-width: 0; }
  #crm__widgets .dse-ex--open > .dse-ex__side { grid-column: 1; display: block; position: sticky; top: var(--ex-side-top, 112px); max-height: calc(100vh - var(--ex-side-top, 112px) - 16px);
    margin-top: 22px; padding: 0 6px 12px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ex-line) transparent; }
  #crm__widgets .dse-ex--open > .dse-ex__side[hidden] { display: none; }
  #crm__widgets .dse-ex--open .dse-ex__search { flex: 1 1 420px; max-width: none; }
  /* beside the filter column: one wide card per row up to 1199 px (a date and its hours stay on one line), two from 1200 px */
  #crm__widgets .dse-ex--open .dse-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1200px) { #crm__widgets .dse-ex--open .dse-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
#crm__widgets .dse-ex__sideh { margin: 0 0 2px; color: var(--ex-ink); font: 700 18px/1.3 var(--ex-head); letter-spacing: -.01em; }
#crm__widgets .dse-ex__side .dse-ex__fs { padding: 14px 0 12px; border-top: 1px solid var(--ex-hair); }
#crm__widgets .dse-ex__side .dse-ex__sideh + .dse-ex__fs { border-top: 0; padding-top: 8px; }
#crm__widgets .dse-ex__side .dse-ex__lg { float: left; width: 100%; margin: 0 0 4px; padding: 0; color: var(--ex-ink); font: 700 15px/1.3 var(--ex-body); }
#crm__widgets .dse-ex__side .dse-ex__lg + * { clear: both; }
#crm__widgets .dse-ex__side .dse-ex__opt { min-height: 36px; margin: 0 -8px; font-size: 15px; hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .dse-ex__side .dse-ex__n { font-size: 13px; }
#crm__widgets .dse-ex__side .dse-ex__gl { margin: 10px 0 2px; font-size: 13px; }
#crm__widgets .dse-ex__side .is-clip:not(.is-all) .dse-ex__og > label:nth-of-type(n+9):not(:has(input:checked)) { display: none; }
#crm__widgets .dse-ex__mopts { display: inline-flex; align-items: center; min-height: 36px; margin: 2px 0 0; padding: 0; border: 0; background: none; color: var(--ex-deep); font: 600 14px/1.3 var(--ex-body);
  text-decoration: underline; text-decoration-color: rgb(0 122 168 / .35); text-underline-offset: 4px; cursor: pointer; }
#crm__widgets .dse-ex__mopts:hover { color: var(--ex-ink); text-decoration-color: currentColor; }

/* round 2 (director, 2026-11-13): a small picture beside name and one line (the feed has one for every course; a calm tint
   in the course's colour while it loads, when there is none or when it fails), the facts and a visible "Zum Kurs" at the
   card's foot (no second link: the name's link covers the card), names and one-liners without automatic hyphens */
#crm__widgets .dse-course__head { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: start; gap: 18px; }
#crm__widgets .dse-course__txt { min-width: 0; }
#crm__widgets .dse-course__pic { --dse-ev: #00abe3; position: relative; display: block; width: 132px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px;
  background: color-mix(in srgb, var(--dse-ev) 16%, #eef6fa); }
#crm__widgets .dse-course__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ex-ease); }
#crm__widgets .dse-course__pic img.is-broken { visibility: hidden; }
#crm__widgets .dse-course:hover .dse-course__pic img { transform: scale(1.04); }
#crm__widgets .dse-course__foot { position: relative; margin-top: auto; padding-top: 22px; }
/* "Zum Kurs" sits in the corner beside the last fact (the language), so the facts keep the card's full width */
#crm__widgets .dse-course__foot:has(.dse-course__go) .dse-course__facts li:last-child { padding-right: 9.5em; }
#crm__widgets .dse-course__foot::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 1px; background: var(--ex-hair); }
#crm__widgets .dse-course__go { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--ex-acc); font: 600 15px/1.45 var(--ex-body); white-space: nowrap; }
#crm__widgets .dse-course__go svg { width: 15px; height: 15px; transition: transform 200ms var(--ex-ease); }
#crm__widgets .dse-course:hover .dse-course__go svg { transform: translateX(3px); }
@media (max-width: 639.98px) {
  #crm__widgets .dse-course__head { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; }
  #crm__widgets .dse-course__pic { width: 88px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { #crm__widgets .dse-course:hover :is(.dse-course__pic img, .dse-course__go svg) { transform: none; } }

/* Akademie task P2 (2026-11-13): an explorer whose preset has no event (presetEmpty): the sentence and two ways on */
#crm__widgets .dse-ex--quiet .dse-ex__none { margin-top: 0; }
#crm__widgets .dse-ex--quiet a.dse-ex__go { color: #fff; text-decoration: none; }
/* Akademie task P2: the related list of one tag (stage_tags) stands inside a section: it takes the section's width */
#crm__widgets .dse--related .dse-rest, #crm__widgets .dse--related > :is(.dse-head, .dse-empty, .dse-foot) { width: auto; margin-inline: 0; }