/* Page stylesheet of the new DGM start page, loaded through the page's own TypoScript template.
   Lives here and not in the element <style> blocks because @keyframes cannot be nested in the
   scoped wrapper and because the rules must be in place before the Vue elements mount. */

/* Tokens. Text only ever uses one of the --hp-f roles, so sizes stay on one scale. */
:root {
  --hp-ink: #003e52;
  --hp-ink-rgb: 0 62 82;
  /* DGM primary and its darker shades (OKLab mixes of #00abe3 with black, as the site's primary-700 is built) */
  --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-ink-tint: #00698b;
  --hp-ink-2: #004a62;
  --hp-primary: #00abe3;
  --hp-primary-deep: #007aa8;
  --hp-sky: #7fd8f5;
  --hp-mist: #f2f7fa;
  --hp-tint: #e3f4fb;
  --hp-track: #e8f0f4;
  --hp-line: #dce6ec;
  --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);

  /* One content width for the whole page, the site header included. Coloured sections are panels floating
     inside the page margin, their content still sits on the same width. */
  --hp-gutter: clamp(20px, 5.5vw, 96px);
  --hp-wrap: min(1440px, 100vw - 2 * var(--hp-gutter));
  --hp-inset: clamp(8px, 1.4vw, 20px);
  --hp-space: clamp(72px, 8.6vw, 124px);
  --hp-panel-space: clamp(56px, 6.2vw, 88px);
  --hp-newsbar: 88px;
  --hp-hero: max(min(100svh - var(--hp-newsbar), 860px), 680px);

  --hp-r-xl: 28px;
  --hp-r-lg: 20px;
  --hp-r-md: 14px;
  --hp-r-sm: 10px;
  --hp-r-xs: 7px;
  --hp-shadow: 0 1px 2px rgba(15, 34, 51, .05), 0 18px 40px -30px rgba(15, 34, 51, .3);
  /* Family card surface, value for value from Build/Webwidgets/src/tailwind/default.scss (border-ink-border,
     shadow-mse-soft, shadow-mse-card) and the blocks' rounded-2xl: cards on light ground rest on the soft shadow and
     take the card shadow and a primary/.4 border on hover. --hp-r-md (14px) stays for the cards this does not touch. */
  --hp-hairline: #e3e8ec;
  --hp-r-card: 16px;
  --hp-shadow-soft: 0 1px 0 rgba(13, 27, 38, .02), 0 8px 24px rgba(13, 27, 38, .04);
  --hp-shadow-card: 0 1px 0 rgba(13, 27, 38, .02), 0 24px 48px rgba(13, 27, 38, .06);
  /* mono accents (award years, committee letters, the Nachwuchs step number) */
  --hp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* the figures band and the Akademie panel, also drawn by their placeholders while loading */
  --hp-band: linear-gradient(110deg, #00698f 0%, var(--hp-primary-deep) 45%, #0086b8 100%);
  --hp-acad: radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), var(--hp-tint);

  --hp-f-display: 600 clamp(1.75rem, min(9vw, 1.4rem + 2.8vw), 3.5rem)/1.08 var(--hp-head);
  --hp-f-stat: 600 clamp(2.75rem, 1rem + 3.4vw, 4rem)/1 var(--hp-head);
  /* the blocks' h2 (text-2xl sm:text-3xl lg:text-4xl leading-tight): 24px, 30px from 640px, 36px from 1024px, weight
     700, line-height 1.25, letter-spacing -0.025em (on .hp-h2); the steps are in the media blocks of the reservations */
  --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);
  /* card and tile titles in the heading font like the blocks' card titles (font-heading), size and weight unchanged */
  --hp-f-h3: 600 1.5rem/1.25 var(--hp-head);
  --hp-f-title: 600 1.25rem/1.3 var(--hp-head);
  --hp-f-lead: 400 1.125rem/1.6 var(--hp-body);
  --hp-f-body: 400 1rem/1.55 var(--hp-body);
  --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-control: 500 .875rem/1.3 var(--hp-body);
  --hp-f-micro: 600 .75rem/1.3 var(--hp-body);
}
/* "Materialwissenschaft" cannot break: the display size has to fit the hero column, which is narrowest here. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root { --hp-f-display: 600 2.75rem/1.08 var(--hp-head); }
}
@media (max-width: 639.98px) {
  :root { --hp-f-lead: 400 1rem/1.55 var(--hp-body); }
}
/* Section intros wrap "pretty" (no word alone on the last line). On phones Chrome's pretty only evens out the last lines
   and left the committee intro ragged around its long compounds; balance gives even lines there (at most five lines at
   360px, so it never falls back), measured without a one-word last line in both languages. */
@media (max-width: 639.98px) {
  :is(.hero, .hp-sec) :is(.hero__lead, .hp-lead, .join__lead, .young__panel p) { text-wrap: balance; }
}

/* First paint (README, Loading): the hero and the news strip arrive as server HTML (00-hero-shell.html,
   01-newsbar-shell.html) with the classes of the Vue sections, so these rules style both. Their frames add nothing. */
.frame:has(> [data-hero-ssr]), .frame:has(> [data-newsbar-ssr]) { max-width: none; width: 100%; margin: 0; padding: 0; }
/* The very first frames come before the parser has reached the end of the shell. The page ground is the hero's ink
   until then, the site's light background would flash pale under the white menu. The parser can also pause inside a
   shell and Chrome paints the half: a hero without its ticker centres its copy lower and then moves it up. So a shell
   shows once its last element is in (the Vue sections always have it). Keep :has() in the subject here: on html with
   body as the subject it restyled the whole page on every DOM change (calendar search 7x slower). The site's blurred
   background blobs lie behind the hero on this page, they only ever showed in those frames. */
body:not(:has(.hero__railbox > .hp-swipe)) { background: var(--hp-ink); }
.hero:not(:has(.hero__railbox > .hp-swipe)), .newsbar:not(:has(.newsbar__more)) { visibility: hidden; }
body > .relative:has(> .pointer-events-none > .blur-3xl) { display: none; }
/* Only if the shell were missing: keep the transparent white menu readable until the hero element has mounted. */
#crm__widgets:not(:has(.hero))::before {
  content: "";
  display: block;
  height: var(--hp-hero);
  background: var(--hp-ink);
}

/* ===== Loading (README, Loading). The shared bundle mounts the Vue sections late on slow connections. Until then every
   mount point holds a little LESS than its section's height (#vue-<key> becomes the element's id when publishing), so
   the page is already long, the news below sits far down and a mount can only add height under the reader, never pull
   content up. The coloured panels show their shape meanwhile. [data-v-app] is set by Vue on mounting and ends the
   reservation. When a section's height changes for good, re-measure it and keep these numbers below it (README). */
:root {
  --hp-res-paths: 630px; --hp-res-stage: 800px; --hp-res-academy: 1070px; --hp-res-topics: 1170px; --hp-res-news: 975px;
  --hp-res-impact: 610px; --hp-res-network: 1170px; --hp-res-young: 1020px; --hp-res-join: 800px; --hp-res-calendar: 1400px;
}
@media (min-width: 640px) {
  :root {
    --hp-f-h2: 700 1.875rem/1.25 var(--hp-head);
    --hp-res-paths: 640px; --hp-res-stage: 800px; --hp-res-academy: 880px; --hp-res-topics: 870px; --hp-res-news: 1030px;
    --hp-res-impact: 530px; --hp-res-network: 1250px; --hp-res-young: 1070px; --hp-res-join: 570px; --hp-res-calendar: 1330px;
  }
}
/* below 768px the conference tiles scroll sideways in two rows, from 768px they stand in a grid of three rows */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --hp-res-stage: 950px; }
}
@media (min-width: 1024px) {
  :root {
    --hp-f-h2: 700 2.25rem/1.25 var(--hp-head);
    --hp-res-paths: 680px; --hp-res-stage: 660px; --hp-res-academy: 720px; --hp-res-topics: 760px; --hp-res-news: 595px;
    --hp-res-impact: 640px; --hp-res-network: 760px; --hp-res-young: 800px; --hp-res-join: 590px; --hp-res-calendar: 1250px;
  }
}
@media (min-width: 1280px) {
  :root {
    --hp-res-paths: 710px; --hp-res-stage: 660px; --hp-res-academy: 700px; --hp-res-topics: 780px; --hp-res-news: 590px;
    --hp-res-impact: 650px; --hp-res-network: 790px; --hp-res-young: 820px; --hp-res-join: 620px; --hp-res-calendar: 1270px;
  }
}
:is(#dgm-vue-ce-74908, #dgm-vue-ce-74909):not([data-v-app]) { min-height: var(--hp-res-paths); }
:is(#dgm-vue-ce-74910, #dgm-vue-ce-74911):not([data-v-app]) { min-height: var(--hp-res-stage); }
:is(#dgm-vue-ce-76373, #dgm-vue-ce-76374):not([data-v-app]) { min-height: var(--hp-res-academy); }
:is(#dgm-vue-ce-74912, #dgm-vue-ce-74913):not([data-v-app]) { min-height: var(--hp-res-topics); }
:is(#dgm-vue-ce-74914, #dgm-vue-ce-74915):not([data-v-app]) { min-height: var(--hp-res-impact); }
:is(#dgm-vue-ce-74918, #dgm-vue-ce-74919):not([data-v-app]) { min-height: var(--hp-res-network); }
:is(#dgm-vue-ce-74920, #dgm-vue-ce-74921):not([data-v-app]) { min-height: var(--hp-res-young); }
:is(#dgm-vue-ce-74924, #dgm-vue-ce-74925):not([data-v-app]) { min-height: var(--hp-res-join); }
:is(#dgm-vue-ce-74926, #dgm-vue-ce-74927):not([data-v-app]) { min-height: var(--hp-res-calendar); }
/* the news section is server HTML, its list arrives with the bundle (the widget's spinner stays hidden here) */
#aktuelles > .hp-wrap:not(:has(.news-list button)) { min-height: var(--hp-res-news); }
#aktuelles .news-list > .py-6 { visibility: hidden; }
/* panel shapes with the margins of the mounted sections, see .hp-sec--ink, .acad, .impact, .cal */
:is(:is(#dgm-vue-ce-74910, #dgm-vue-ce-74911), :is(#dgm-vue-ce-76373, #dgm-vue-ce-76374), :is(#dgm-vue-ce-74914, #dgm-vue-ce-74915), :is(#dgm-vue-ce-74918, #dgm-vue-ce-74919), :is(#dgm-vue-ce-74926, #dgm-vue-ce-74927)):not([data-v-app]) { margin-inline: var(--hp-inset); border-radius: var(--hp-r-xl); }
:is(#dgm-vue-ce-74910, #dgm-vue-ce-74911):not([data-v-app]) { background: var(--hp-ink); }
:is(#dgm-vue-ce-76373, #dgm-vue-ce-76374):not([data-v-app]) { margin-top: var(--hp-inset); background: var(--hp-acad); }
:is(#dgm-vue-ce-74914, #dgm-vue-ce-74915):not([data-v-app]) { margin-bottom: var(--hp-inset); background: var(--hp-band); }
:is(:is(#dgm-vue-ce-74918, #dgm-vue-ce-74919), :is(#dgm-vue-ce-74926, #dgm-vue-ce-74927)):not([data-v-app]) { background: var(--hp-mist); }
:is(#dgm-vue-ce-74926, #dgm-vue-ce-74927):not([data-v-app]) { margin-block: var(--hp-inset); }
/* Four sections render shorter while they wait for the calendar data. They keep the reservation until it has
   answered (is-settled, also on failure; the calendar once its rows have folded in), so mounting never makes the
   page shorter. */
:is(.stage, .acad, .topics, .cal):not(.is-settled) { box-sizing: border-box; }
.stage:not(.is-settled) { min-height: var(--hp-res-stage); }
.acad:not(.is-settled) { min-height: var(--hp-res-academy); }
.topics:not(.is-settled) { min-height: var(--hp-res-topics); }
.cal:not(.is-settled) { min-height: var(--hp-res-calendar); }
/* A section that mounts fades in. Its panel colour is already there, so only the content fades; the parts with their
   own scroll reveal (.hp-rv) are left to it. */
.dgm-vue-component[data-v-app] > .hp-sec > :not(.hp-rv) { animation: hp-in .45s var(--hp-ease-inout) backwards; }
@keyframes hp-in { from { opacity: 0; } }
/* The footer's brand and podcast icons need two icon fonts (530 KB) that nothing on the first screen uses. Without a
   glyph to draw, the browser does not fetch them; home.js sets data-hp-foot when the footer comes near or the sections
   have mounted, so on slow connections they no longer compete with the bundle that mounts the page. */
html:not([data-hp-foot]) .dgm-page-shell footer :is(.fa-brands, .fab, .far, .fa-regular)::before { content: none !important; }
@keyframes hp-wait { 50% { opacity: .5; } }

#crm__widgets { margin-bottom: 0; overflow-x: clip; background: #fff; }
.dgm-page-shell footer { margin-top: 0; }
.dgm-vue-component { display: block; scroll-margin-top: 124px; }
/* The shared menu sits flush with the screen edge at 1280 and 1536px. On this page it follows the content width. */
@media (min-width: 1024px) {
  .dgm-mainmenu--overlay > .container { width: max(var(--hp-wrap), 100vw - 48px); max-width: none; padding-inline: 0; }
}
@media (min-width: 1120px) {
  .dgm-mainmenu--overlay > .container { width: var(--hp-wrap); }
}
/* Search, language and login share one glass style on the hero and in the pinned bar; login is the solid one. */
/* the header pinned while scrolling: DGM blue from the deep shade (white text 4.9:1) towards the brand cyan, a cyan hairline below */
body .dgm-page-shell--fullscreen-hero .mainmenu.dgm-mainmenu--overlay.dgm-mainmenu--float::before { background: linear-gradient(100deg, rgb(0 108 150 / .97) 0%, rgb(0 122 168 / .96) 45%, rgb(0 140 192 / .95) 100%); box-shadow: inset 0 -1px 0 rgba(127, 216, 245, .4), 0 12px 32px -20px rgba(0, 60, 90, .7); }
body .dgm-page-shell--fullscreen-hero .mainmenu.dgm-mainmenu--float .dgm-mainmenu-overlay-nav { background: rgba(255, 255, 255, .1); }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions { gap: 8px; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions > * { margin-inline: 0 !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a { font: var(--hp-f-control) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto; height: 36px; min-width: 36px; padding: 0 12px !important; border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: var(--hp-r-sm) !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important; letter-spacing: 0; box-shadow: none !important; transform: none !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s, border-color .2s, color .2s !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button { width: 36px; padding: 0 !important; font-size: 14px !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions [data-slot="search-trigger"] > button:hover,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu:hover,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu[aria-expanded="true"] { border-color: rgba(255, 255, 255, .42) !important; background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu span { padding-left: 0; font-weight: 600; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu .fa-globe { opacity: .85; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions #options-menu .dgm-langmenu__chev { font-size: 11px; opacity: .75; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a { padding: 0 14px !important; border-color: #fff !important; background: #fff !important; color: var(--hp-ink) !important; font-weight: 600 !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a:hover,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu--overlay .dgm-mainmenu-overlay-actions > a:focus { border-color: var(--hp-tint) !important; background: var(--hp-tint) !important; color: var(--hp-ink) !important; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions > a > span { display: inline-flex !important; font-size: 14px; }
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions button:focus-visible,
.dgm-page-shell--fullscreen-hero .dgm-mainmenu-overlay-actions > a:focus-visible { outline: 3px solid var(--hp-sky) !important; outline-offset: 2px; }

/* Header dropdowns on the dark hero: the shared stylesheet draws them as 42% glass with a light sheen, which washes the
   white text out over photos and white sections. Here they are a deep, almost opaque panel with a tighter layout. */
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal { max-width: 420px; border-radius: var(--hp-r-md); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal:has(.grid-cols-2) { max-width: 680px; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal::before { background: rgb(var(--hp-ink-rgb) / .95); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal > div { border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -24px rgba(0, 0, 0, .6); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal > div::before { background: radial-gradient(120% 70% at 0% 0%, rgba(0, 171, 227, .16), transparent 62%); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal > div > div { padding: 6px !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal .grid { gap: 2px !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a { align-items: center; gap: 12px; padding: 9px 12px 9px 10px !important; border-radius: var(--hp-r-sm); box-shadow: none !important; transform: none !important; scale: none !important; transition: background-color .25s var(--hp-ease-inout) !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a > * + * { margin-left: 0 !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:hover, body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:focus-visible { background: rgba(255, 255, 255, .08) !important; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a > div:first-child { flex: none; margin: 0; padding: 0; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .07); color: var(--hp-sky) !important; font-size: 15px; transition: background-color .25s var(--hp-ease-inout); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a:hover i { background: rgba(0, 171, 227, .2); }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a p:first-child { font: 600 .9375rem/1.3 var(--hp-body); color: #fff !important; letter-spacing: -.006em; }
body.dgm-page-has-fullscreen-hero .dgm-mainmenu-flyout--portal a p + p { font: 400 .8125rem/1.4 var(--hp-body); margin-top: 2px; color: rgba(255, 255, 255, .68) !important; letter-spacing: 0; }

/* Search: the shared command dialog in the page's colours, with a larger field and calmer results */
[data-slot="search-overlay"] { background-color: rgb(var(--hp-ink-rgb) / .5) !important; }
[data-slot="search-content"] { width: min(720px, calc(100% - 32px)) !important; }
[data-slot="search-content"] > div { --background: #fff; --foreground: var(--hp-text); --muted: var(--hp-mist); --muted-foreground: var(--hp-muted); --accent: var(--hp-tint); --accent-foreground: var(--hp-text); --border: var(--hp-line); --primary: var(--hp-primary); --ring: var(--hp-sky); border: 0 !important; border-radius: var(--hp-r-lg) !important; background: #fff !important; color: var(--hp-text); font-family: var(--hp-body); letter-spacing: -.006em; box-shadow: 0 0 0 1px rgb(var(--hp-ink-rgb) / .08), 0 44px 90px -28px rgb(var(--hp-ink-rgb) / .7) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; -webkit-font-smoothing: antialiased; }
[data-slot="search-content"] [data-slot="command-input-wrapper"] { gap: 14px; height: 72px; padding: 0 24px; border-bottom: 1px solid var(--hp-line); }
[data-slot="search-content"] [data-slot="command-input-wrapper"] > svg { width: 22px; height: 22px; color: var(--hp-primary); }
[data-slot="search-content"] [data-slot="command-input"] { font: 500 1.25rem/1.3 var(--hp-body) !important; height: 100% !important; padding: 0 !important; color: var(--hp-text); letter-spacing: -.012em; }
[data-slot="search-content"] [data-slot="command-input"]::placeholder { color: #8a9bab; }
[data-slot="search-content"] .flex-col.text-center { gap: 14px; padding: 36px 32px 40px; }
[data-slot="search-content"] .flex-col.text-center > div { font: var(--hp-f-small); max-width: 400px; color: var(--hp-muted); text-wrap: balance; }
[data-slot="search-content"] .flex-col.text-center:not(:has(svg))::before { content: ""; width: 52px; height: 52px; border-radius: 50%; background: var(--hp-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007aa8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 22px no-repeat; }
[data-slot="search-content"] .uppercase.tracking-wider { font: var(--hp-f-micro); gap: 6px; padding: 18px 24px 6px; color: var(--hp-primary); letter-spacing: .06em; }
[data-slot="search-content"] [data-slot="search-hit"] { margin: 0 8px; padding: 12px 16px; border-radius: var(--hp-r-md); }
[data-slot="search-content"] [data-slot="search-hit"][data-highlighted] { background: var(--hp-tint); }
[data-slot="search-content"] [data-slot="search-hit"] .truncate.font-medium { font: var(--hp-f-strong); color: var(--hp-text); }
[data-slot="search-content"] [data-slot="search-hit"][data-highlighted] .truncate.font-medium { color: var(--hp-primary); }
[data-slot="search-content"] [data-slot="search-hit"] .hl { padding: 0 2px; border-radius: 3px; background: rgba(0, 171, 227, .16); color: inherit; font-style: normal; }
[data-slot="search-content"] > div > div:last-child { gap: 16px; padding: 12px 24px; border-top: 1px solid var(--hp-line); background: var(--hp-mist); color: var(--hp-muted); font: 500 .75rem/1.3 var(--hp-body); }
[data-slot="search-content"] kbd { padding: 3px 8px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-xs); background: #fff; color: var(--hp-text); font: 600 .6875rem/1.2 var(--hp-body); box-shadow: 0 1px 0 var(--hp-line); }

/* Shared building blocks */
.hp-wrap { width: var(--hp-wrap); margin-inline: auto; }
.frame.frame-default:has(.hp-sec) { max-width: none; width: 100%; padding-inline: 0; margin-block: 0; }
.hp-sec { position: relative; padding-block: var(--hp-space); scroll-margin-top: 124px; color: var(--hp-text); background: #fff; }
.hp-sec *, .hero * { box-sizing: border-box; }
/* Inter Tight needs no tightening at headline sizes, Inter reads wide without a touch of it. */
.hero, .hp-sec { font: var(--hp-f-body); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.hero h1, .hp-h2, .hero__name, .stage__name, .impact__stats dd { letter-spacing: 0; }
.hero__day b, .paths__title, .topics__intro h3, .topics__date b, .young__label, .cal__label, .cal__date b, #aktuelles .news-list .md\:grid-cols-2 h4 { letter-spacing: -.014em; }
.hp-sec--ink, .hp-sec--mist, .hp-sec--tint { margin-inline: var(--hp-inset); padding-block: var(--hp-panel-space); border-radius: var(--hp-r-xl); }
.hp-sec--mist { background: var(--hp-mist); }
.hp-sec--tint { background: var(--hp-tint); }
.hp-sec--ink { background: var(--hp-ink); color: #fff; }
/* Tag line: the pill of the DGM blocks (exhibition-section, "Header" section of its template: inline-flex, gap 2,
   rounded-full, border primary/30, bg primary/5, px-3 py-1.5, 11px bold uppercase, tracking-widest, primary; the icon
   fa-solid at the text size), mirrored here so it does not depend on the utilities being in the CDN build; a block-level
   flex box of its own width, so no line box adds space under it */
.hp-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; }
.hp-eyebrow i { font-size: 11px; line-height: 11px; }
/* on dark panels (the block has no dark version): border primary 45 %, background primary 16 %, white text */
:is(.hp-sec--ink, .join) .hp-eyebrow { border-color: rgb(var(--hp-primary-rgb) / .45); background: rgb(var(--hp-primary-rgb) / .16); color: #fff; }
/* the block's h2 sits 14px under its pill (mt-3.5) */
.hp-eyebrow + :is(h2, .hp-h2) { margin-top: 14px; }
.hp-h2 { font: var(--hp-f-h2); margin: 0; letter-spacing: -.025em; text-wrap: balance; color: inherit; }
.hp-lead { font: var(--hp-f-lead); margin: 0; color: var(--hp-muted); text-wrap: pretty; }
.hp-sec--ink .hp-lead { color: #b6c8d4; }
/* Headline left, its lead or button on the same baseline at the right */
.hp-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); }
.hp-head > .hp-btn { justify-self: end; }
@media (max-width: 767.98px) {
  .hp-head { grid-template-columns: minmax(0, 1fr); }
  .hp-head > .hp-btn { justify-self: start; }
}
.hp-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 transparent; text-decoration: none; white-space: nowrap; cursor: pointer; background-image: none; transition: transform .25s var(--hp-ease), background-color .2s, border-color .2s, color .2s, box-shadow .25s; }
.hp-btn:hover { transform: translateY(-2px); }
/* One focus language: a 2px ring 2px off the element, DGM cyan on light ground, white on the dark panels, the hero and
   photos. Rows inside clipping lists (the calendar) draw it 3px inside their edge instead, scrollers keep 4px of
   padding around their items so the ring is never cut off. */
:is(.hero, .newsbar, .hp-sec, .secnav) :is(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
:is(.hero, .hp-sec--ink, .join__panel) :is(a, button, input, [tabindex]):focus-visible, .hp-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cal-ui :focus-visible { box-shadow: none; }
/* Stand-alone text links: a 32px hit area (7px above and below the text, 8px beside it) that takes no room, and a focus
   ring 2px off the text, as a small rounded frame instead of a tall box around the padding */
:is(.hero__nexthead a, .newsbar__more, .acad__flyer, .acad__nexthead a, .impact__report, .awards__links a, .young__links a, .join__more, .topics__all) { padding-inline: 8px; margin-inline: -8px; border-radius: var(--hp-r-xs); }
:is(.hero, .newsbar, .hp-sec) :is(.hero__nexthead a, .newsbar__more, .acad__flyer, .acad__nexthead a, .impact__report, .awards__links a, .young__links a, .join__more, .topics__all):focus-visible { outline-offset: -5px; }
.hp-btn--primary { background-color: var(--hp-primary); color: #fff; box-shadow: 0 10px 22px -14px rgba(0, 171, 227, .8); }
.hp-btn--primary:hover { background-color: var(--hp-primary-deep); color: #fff; }
.hp-btn--ghost { border-color: rgba(255, 255, 255, .32); color: #fff; background-color: rgba(255, 255, 255, .06); }
.hp-btn--ghost:hover { background-color: rgba(255, 255, 255, .16); color: #fff; }
.hp-btn--line { border-color: var(--hp-line); color: var(--hp-text); background-color: #fff; }
.hp-btn--line:hover { border-color: var(--hp-primary); color: var(--hp-primary); }
.hp-btn--white { background-color: #fff; color: var(--hp-primary); }
.hp-btn--white:hover { background-color: var(--hp-tint); color: var(--hp-primary); }
.hp-btn svg { width: 17px; height: 17px; flex: none; }

/* Read out, not shown: the full date range behind a date block */
.hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A date that has started and not ended shows its end, with "bis" / "until" in the micro role above the day */
:is(.hero__day, .topics__date, .cal__date) small { font: var(--hp-f-micro); display: block; color: var(--hp-muted); }
.hero__day small { color: #b6c8d4; }

/* Scroll reveal, driven by a small observer in each element */
.hp-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--hp-ease), transform .8s var(--hp-ease); transition-delay: var(--rv, 0ms); }
.hp-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hp-rv { opacity: 1; transform: none; transition: none; }
  .hero__ph, .newsbar__ph, .hero__rail > li, .newsbar__list > li, .dgm-vue-component[data-v-app] > .hp-sec > * { animation: none !important; }
  .hero__rail--ph, .newsbar__phs > li, .hero__controls { transition: none !important; }
}

/* Swipe indicator under the rows that scroll sideways on touch screens and small windows, moved by home.js:
   the thumb is the visible share of the row and travels with it. */
.hp-swipe { display: none; }
@media (max-width: 1023.98px), (hover: none) {
  .hp-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; }
  .hp-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); }
  .hp-swipe.is-off { display: none; }
  /* the hero and news rows fill in after the first paint, their track keeps its room so nothing below moves */
  .hero .hp-swipe.is-off { display: block; visibility: hidden; }
  .hero .hp-swipe, .impact .hp-swipe { color: #fff; }
  .hero .hp-swipe i, .impact .hp-swipe i { background: var(--hp-sky); }
  .newsbar .hp-swipe { grid-column: 1 / -1; margin-top: 0; }
  .impact .hp-swipe { margin: 6px calc((100vw - 2 * var(--hp-inset) - var(--hp-wrap)) / 2) 22px; }
}

/* ===== Section menu: a frosted bar that pins under the site header once the news strip has gone. The cyan pill slides
   to the section in view, the cyan line along the lower edge is the reading progress. 01-secnav.vue teleports it into
   .dgm-page-header-wrap (z 999 around the whole page), where 900 puts it above the sections and below the site header. ===== */
.secnav { position: fixed; left: 0; right: 0; z-index: 900; border-bottom: 1px solid rgba(15, 34, 51, .08); background: rgba(255, 255, 255, .8); color: var(--hp-text); font: var(--hp-f-body); letter-spacing: -.006em; box-shadow: 0 14px 34px -28px rgb(var(--hp-ink-rgb) / .55); -webkit-font-smoothing: antialiased; opacity: 0; transform: translateY(calc(-100% - 4px)); pointer-events: none; transition: transform .5s var(--hp-ease), opacity .3s var(--hp-ease-inout), top .3s cubic-bezier(.16, 1, .3, 1), -webkit-backdrop-filter 0s .5s, backdrop-filter 0s .5s; }
/* The frosted glass only while the bar is out: a hidden bar with a backdrop filter made Chrome draw all page text with
   grey instead of LCD antialiasing, which changed the hero text the moment the bar mounted. */
.secnav.is-on { opacity: 1; transform: none; pointer-events: auto; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); transition: transform .5s var(--hp-ease), opacity .3s var(--hp-ease-inout), top .3s cubic-bezier(.16, 1, .3, 1); }
.secnav * { box-sizing: border-box; }
.secnav__in { display: flex; align-items: center; gap: 20px; height: 56px; }
.secnav__scroller { position: relative; min-width: 0; flex: 1; margin: -4px; padding: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.secnav__scroller::-webkit-scrollbar { display: none; }
.secnav__list { position: relative; z-index: 1; display: flex; gap: 2px; width: max-content; margin: 0; padding: 0; list-style: none; }
.secnav__link { font: var(--hp-f-label); display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background-image: none; color: var(--hp-muted); text-decoration: none; white-space: nowrap; transition: color .35s var(--hp-ease-inout); }
.secnav__link:hover { color: var(--hp-text); }
.secnav__link.is-on, .secnav__link.is-on:hover { color: #fff; }
.secnav__pill { position: absolute; top: 4px; left: 0; z-index: 0; height: 36px; border-radius: 999px; background: var(--hp-primary); box-shadow: 0 6px 14px -8px rgba(0, 171, 227, .9); opacity: 0; transition: transform .5s var(--hp-ease-inout), width .5s var(--hp-ease-inout), opacity .3s var(--hp-ease-inout); }
.secnav__pill.is-on { opacity: 1; }
.secnav__cta { font: var(--hp-f-label); display: inline-flex; flex: none; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--hp-r-sm); background: var(--hp-primary); background-image: none; color: #fff; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 18px -12px rgba(0, 171, 227, .9); transition: background-color .35s var(--hp-ease-inout), box-shadow .35s var(--hp-ease-inout), transform .35s var(--hp-ease-inout); }
.secnav__cta:hover { background: var(--hp-primary-deep); color: #fff; }
.secnav__cta:hover { transform: translateY(-1px); }
.secnav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--hp-primary), var(--hp-sky)); transform: scaleX(0); transform-origin: left center; }
.secnav.is-still, .secnav.is-still .secnav__pill, .secnav.is-still .secnav__link, .secnav.is-still .secnav__cta { transition: none; }
@media (max-width: 1023.98px) {
  .secnav__in { height: 52px; gap: 12px; }
  .secnav__scroller { margin-inline: calc(-1 * var(--hp-gutter)) -4px; padding-left: var(--hp-gutter); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hp-gutter), #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--hp-gutter), #000 calc(100% - 28px), transparent); }
  .secnav__list { padding-right: 28px; }
  .secnav__link { padding: 0 12px; }
}
@media (max-width: 767.98px) {
  .secnav__cta { display: none; }
  .secnav__scroller { margin-right: calc(-1 * var(--hp-gutter)); }
}

/* ===== Hero: one photo at full height, fading into the hexagon background under the text ===== */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: var(--hp-hero); padding-top: 104px; background: var(--hp-ink); color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / .5) 0, rgb(var(--hp-ink-rgb) / .2) 26%, rgb(var(--hp-ink-rgb) / .4) 60%, var(--hp-ink) 94%), linear-gradient(90deg, rgb(var(--hp-ink-rgb) / .68), rgb(var(--hp-ink-rgb) / .84) 60%), url(/fileadmin/DGM/Startseite/hintergrund_startseite_kacheln.jpg) center / cover no-repeat; background-color: var(--hp-ink-tint); background-blend-mode: normal, normal, luminosity; }
.hero__body { flex: 1; display: flex; flex-direction: column; gap: clamp(24px, 4vh, 40px); padding-bottom: 28px; }
.hero__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { max-width: 660px; }
.hero__eyebrow { font: var(--hp-f-label); margin: 0 0 16px; color: var(--hp-sky); text-wrap: balance; }
.hero h1 { font: var(--hp-f-display); margin: 0; color: #fff; text-wrap: balance; }
.hero__lead { font: var(--hp-f-lead); margin: 20px 0 0; max-width: 560px; color: #d3e0e8; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__spot { display: block; align-self: end; color: #fff; text-decoration: none; background-image: none; }
.hero__spot:hover { color: #fff; }
.hero__media { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 66%; overflow: hidden; background: url(/fileadmin/DGM/Startseite/Neu/photo/e35.webp) var(--hero-pos, 46% 30%) / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 7%, rgba(0, 0, 0, .5) 19%, #000 33%); mask-image: linear-gradient(90deg, transparent 7%, rgba(0, 0, 0, .5) 19%, #000 33%); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 46% 30%); opacity: 0; transform: scale(1.05); transition: opacity 0s linear 1.1s, transform 7s linear; }
.hero__img.is-on { z-index: 1; opacity: 1; transform: scale(1); transition: opacity 1.1s var(--hp-ease), transform 7s linear; }
.hero__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / .84) 0, rgb(var(--hp-ink-rgb) / .5) 11%, rgb(var(--hp-ink-rgb) / 0) 25%, rgb(var(--hp-ink-rgb) / 0) 42%, rgb(var(--hp-ink-rgb) / .72) 64%, var(--hp-ink) 88%); }
.hero__caption { display: block; animation: hero-in .7s var(--hp-ease) both; }
.hero__caption.is-still { animation: none; }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero__when { font: var(--hp-f-label); display: block; color: var(--hp-sky); }
.hero__name { font: var(--hp-f-feature); display: -webkit-box; margin-top: 6px; overflow: hidden; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero__sub { font: var(--hp-f-small); display: -webkit-box; margin-top: 4px; overflow: hidden; color: #d3e0e8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero__open { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.hero__open svg { width: 15px; height: 15px; flex: none; transition: transform .45s var(--hp-ease-inout); }
.hero__spot:hover .hero__open svg { transform: translateX(3px); }

/* Rail: four dates on the page width, the active one carries the progress line */
/* The ticker keeps one height from the first paint: the head row is as tall as its buttons, every row holds two title
   lines and the placeholder rail stands in the same grid cell as the dates, which fade in over it. */
.hero__nexthead { display: flex; align-items: center; gap: 16px; min-height: 32px; margin-bottom: 12px; }
.hero__nexthead p { font: var(--hp-f-label); margin: 0; color: #c7d7e1; }
.hero__nexthead a { font: var(--hp-f-label); padding-block: 7px; margin-block: -7px; background-image: none; color: var(--hp-sky); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.hero__nexthead a:hover { color: #fff; }
.hero__controls { display: flex; gap: 6px; margin-left: auto; visibility: hidden; opacity: 0; transition: opacity .5s var(--hp-ease-inout), visibility 0s .5s; }
.hero__next.is-ready .hero__controls { visibility: visible; opacity: 1; transition: opacity .5s var(--hp-ease-inout); }
.hero__controls button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--hp-r-xs); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background-color .2s; }
.hero__controls button:hover { background: rgba(255, 255, 255, .18); }
.hero__controls svg { width: 14px; height: 14px; }
.hero__railbox { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__railbox > .hero__rail { grid-area: 1 / 1; }
.hero__railbox > .hp-swipe { grid-row: 2; }
.hero__rail { --gap: 24px; --per: 4; display: flex; gap: var(--gap); margin: -4px; padding: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hero__rail:not(.hero__rail--ph) > li { animation: hp-in .5s var(--hp-ease-inout) backwards; }
.hero__rail--ph { overflow: hidden; pointer-events: none; transition: opacity .5s var(--hp-ease-inout), visibility 0s .5s; }
.hero__next.is-ready .hero__rail--ph { visibility: hidden; opacity: 0; }
.hero__next.is-empty .hero__rail--ph { visibility: hidden; transition: none; }
.hero__rail::-webkit-scrollbar { display: none; }
.hero__rail > li { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); }
.hero__item, .hero__ph { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; height: 100%; padding: 14px 0 2px; background-image: none; color: #fff; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); transition: box-shadow .35s var(--hp-ease-inout); }
.hero__item:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.hero__item.is-on { box-shadow: inset 0 2px 0 var(--hp-sky); }
.hero__day, .hero__phday { font: var(--hp-f-micro); display: block; color: #b6c8d4; }
.hero__day b, .hero__phday b { font: var(--hp-f-title); display: block; color: #fff; }
.hero__meta, .hero__phmeta { min-width: 0; display: block; }
.hero__kind, .hero__phmeta small { font: var(--hp-f-micro); display: block; overflow: hidden; color: var(--hp-sky); white-space: nowrap; text-overflow: ellipsis; }
.hero__title, .hero__phmeta b { font: var(--hp-f-label); display: -webkit-box; min-height: 2lh; margin-top: 3px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* placeholders: soft white bars on the text lines, breathing slowly while the calendar answers */
.hero__ph { animation: hp-wait 2.4s var(--hp-ease-inout) infinite; }
.hero__ph :is(b, small), .hero__phday { color: transparent; }
.hero__phday b { width: 26px; border-radius: var(--hp-r-xs); background: rgba(255, 255, 255, .1); }
.hero__phday { background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) 0 100% / 22px .7em no-repeat; }
.hero__phmeta small { background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 0 60% / 38% .75em no-repeat; }
.hero__phmeta b { background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) 0 22% / 92% .72em no-repeat, linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) 0 80% / 58% .72em no-repeat; }
.hero__next.is-empty .hero__ph { animation: none; }
.hero__next.is-ready .hero__ph { animation-play-state: paused; }
.hero__bar { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: #fff; transform-origin: left; animation: hp-progress 5.5s linear both; }

@media (max-width: 1439.98px) {
  .hero__img { object-position: var(--hero-pos, 32% 30%); }
  .hero__media { background-position: var(--hero-pos, 32% 30%); }
}
@media (max-width: 1279.98px) {
  .hero__rail { --per: 3; }
}
/* Small laptops: the caption sits on the middle of the photo, where faces are. A soft shade of the photo card's own
   ink behind it, fading out on every side, gives the text a calm ground. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hero__caption { position: relative; z-index: 0; }
  .hero__caption::before { content: ""; position: absolute; z-index: -1; inset: -56px -64px -48px -72px; background: radial-gradient(closest-side, rgb(var(--hp-ink-rgb) / .78), rgb(var(--hp-ink-rgb) / .5) 55%, rgb(var(--hp-ink-rgb) / 0)); pointer-events: none; }
}
/* Tablets and phones: the slogan opens the hero under the menu, the current event follows as a photo card */
@media (max-width: 1023.98px) {
  .hero { --photo: clamp(280px, 64vw, 460px); min-height: 0; padding-top: 96px; }
  .hero__bg { background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / .76) 0, rgb(var(--hp-ink-rgb) / .86) 45%, var(--hp-ink) 100%), url(/fileadmin/DGM/Startseite/hintergrund_startseite_kacheln.jpg) center top / cover no-repeat; background-color: var(--hp-ink-tint); background-blend-mode: normal, luminosity; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__copy { max-width: none; }
  .hero__spot { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: var(--photo); padding: 20px 22px; overflow: hidden; border-radius: var(--hp-r-lg); box-shadow: 0 28px 56px -32px rgba(0, 0, 0, .7); }
  .hero__media { inset: 0; width: auto; border-radius: var(--hp-r-lg); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
  .hero__shade { background: linear-gradient(180deg, rgb(var(--hp-ink-rgb) / 0) 34%, rgb(var(--hp-ink-rgb) / .55) 62%, rgb(var(--hp-ink-rgb) / .92) 100%); }
  .hero__rail { margin-inline: calc(-1 * var(--hp-gutter)); padding-inline: var(--hp-gutter); scroll-padding-inline: var(--hp-gutter); }
  .hero__rail > li { flex-basis: 280px; }
}
@media (max-width: 639.98px) {
  .hero__sub { display: none; }
  .hero__cta .hp-btn { flex: 1 1 100%; }
  .hero__nexthead p { white-space: nowrap; }
  .hero__nexthead a { white-space: nowrap; }
  .hero__controls button:not(:nth-child(2)) { display: none; }
  .hero__rail { --gap: 18px; }
  .hero__rail > li { flex-basis: 248px; }
}

/* ===== News strip: a compact label, the three latest articles and the link to the section at the end ===== */
.newsbar { border-bottom: 1px solid var(--hp-line); background: #fff; color: var(--hp-text); font: var(--hp-f-body); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.newsbar * { box-sizing: border-box; }
.newsbar__in { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; gap: 20px; align-items: center; min-height: calc(var(--hp-newsbar) - 1px); padding-block: 12px; }
.newsbar__label { grid-area: 1 / 1; font: var(--hp-f-strong); display: flex; align-items: center; gap: 10px; margin: 0; color: var(--hp-text); letter-spacing: -.01em; white-space: nowrap; }
.newsbar__label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hp-primary); box-shadow: 0 0 0 4px rgba(0, 171, 227, .16); }
.newsbar__more { grid-area: 1 / -2; font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 6px; justify-self: end; padding-block: 7px; margin-block: -7px; background-image: none; color: var(--hp-primary); text-decoration: none; white-space: nowrap; transition: color .35s var(--hp-ease-inout); }
.newsbar__more:hover { color: var(--hp-text); }
.newsbar__more svg { flex: none; width: 14px; height: 14px; transition: transform .45s var(--hp-ease-inout); }
.newsbar__more:hover svg { transform: translateY(3px); }
/* The three slots are placed by number, the placeholders (.newsbar__phs) and the articles share them and cross-fade,
   and the link at the row end keeps its column before the articles arrive. The positional rules key on the class: on a
   bare li they made Chrome restyle every following row of every list (the calendar's too) on each insert or removal. */
.newsbar__list, .newsbar__phs { display: contents; margin: 0; padding: 0; list-style: none; }
.newsbar__slot { min-width: 0; padding-left: 20px; border-left: 1px solid var(--hp-line); }
.newsbar__slot:last-child { padding-right: 20px; border-right: 1px solid var(--hp-line); }
.newsbar__slot:nth-child(1) { grid-area: 1 / 2; }
.newsbar__slot:nth-child(2) { grid-area: 1 / 3; }
.newsbar__slot:nth-child(3) { grid-area: 1 / 4; }
.newsbar__list > li { animation: hp-in .5s var(--hp-ease-inout) backwards; }
.newsbar__phs > li { transition: opacity .5s var(--hp-ease-inout), visibility 0s .5s; }
.newsbar.is-ready .newsbar__phs > li { visibility: hidden; opacity: 0; }
.newsbar.is-empty .newsbar__phs > li { visibility: hidden; transition: none; }
.newsbar__item { display: block; background-image: none; color: var(--hp-text); text-decoration: none; }
.newsbar__item.has-thumb, .newsbar__ph { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.newsbar__ph { animation: hp-wait 2.4s var(--hp-ease-inout) infinite; }
.newsbar__ph > i { display: block; width: 56px; height: 56px; border-radius: var(--hp-r-sm); background: var(--hp-mist); }
.newsbar__ph :is(small, b) { color: transparent; }
.newsbar__ph small { background: linear-gradient(var(--hp-track), var(--hp-track)) 0 55% / 34% .7em no-repeat; }
.newsbar__ph b { background: linear-gradient(var(--hp-track), var(--hp-track)) 0 22% / 94% .72em no-repeat, linear-gradient(var(--hp-track), var(--hp-track)) 0 80% / 62% .72em no-repeat; }
.newsbar.is-empty .newsbar__ph { animation: none; }
.newsbar.is-ready .newsbar__ph { animation-play-state: paused; }
.newsbar__item:hover { color: var(--hp-primary); }
.newsbar__thumb { display: block; width: 56px; height: 56px; border-radius: var(--hp-r-sm); background: var(--hp-track); object-fit: cover; outline: 1px solid rgba(15, 34, 51, .08); outline-offset: -1px; transition: transform .8s var(--hp-ease-inout); }
.newsbar__item:hover .newsbar__thumb { transform: scale(1.04); }
.newsbar__text { display: block; min-width: 0; }
.newsbar__text small { font: var(--hp-f-micro); display: block; color: var(--hp-muted); }
/* Long German compounds may break in the short title columns ("Werkstoffwissen-schaft") where the browser has a
   hyphenation dictionary for the page language; headless Chromium has none and keeps its breaks. Same for the
   Aktuelles rows. */
.newsbar__text b, #aktuelles .news-list .lg\:grid-cols-4 p { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
.newsbar__text b { font: var(--hp-f-label); display: -webkit-box; min-height: 2lh; margin-top: 2px; overflow: hidden; transition: color .35s var(--hp-ease-inout); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* The link never wraps. Small laptops keep three articles with smaller pictures; tablets in landscape and small
   windows (900 to 1199px) show the two latest (smaller pictures below 1100px), so every headline keeps two readable
   lines. The shell has the same slots, these rules draw both. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .newsbar__in { gap: 16px; }
  .newsbar__slot { padding-left: 16px; }
  .newsbar__slot:last-child { padding-right: 16px; }
}
@media (min-width: 900px) and (max-width: 1099.98px), (min-width: 1200px) and (max-width: 1279.98px) {
  .newsbar__item.has-thumb, .newsbar__ph { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .newsbar__thumb, .newsbar__ph > i { width: 44px; height: 44px; }
}
/* an element set to two articles (dgm_home_newsbar) */
.newsbar--n2 .newsbar__in { grid-template-columns: auto repeat(2, minmax(0, 1fr)) auto; }
@media (min-width: 900px) and (max-width: 1199.98px) {
  .newsbar__in { grid-template-columns: auto repeat(2, minmax(0, 1fr)) auto; }
  .newsbar__slot:nth-child(2) { padding-right: 16px; border-right: 1px solid var(--hp-line); }
  .newsbar__slot:nth-child(3) { display: none; }
}
/* one row from 900px on, nothing scrolls there: no track, also not for the moment before home.js has measured */
@media (min-width: 900px) {
  .newsbar .hp-swipe { display: none; }
}
@media (max-width: 899.98px) {
  .newsbar__in { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding-block: 16px; }
  .newsbar__label { grid-area: 1 / 1; }
  .newsbar__more { grid-area: 1 / 2; }
  .newsbar__list, .newsbar__phs { grid-area: 2 / 1 / 3 / -1; display: flex; gap: 20px; margin: -4px calc(-1 * var(--hp-gutter)); padding: 4px var(--hp-gutter); overflow-x: auto; scroll-padding-inline: var(--hp-gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .newsbar__phs { overflow: hidden; pointer-events: none; }
  .newsbar .hp-swipe.is-off { display: block; visibility: hidden; }
  .newsbar__list::-webkit-scrollbar { display: none; }
  .newsbar__slot, .newsbar__slot:last-child { flex: 0 0 min(72vw, 300px); padding: 0; border: 0; scroll-snap-align: start; }
}

/* ===== DGM Akademie: a light panel right under the conferences. Logo, pitch and figures beside the next six dates
   and the topic links into the Akademie website. ===== */
.acad { margin-top: var(--hp-inset); overflow: hidden; background: var(--hp-acad); }
.acad__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.4vw, 72px); align-items: start; }
.acad__logo { display: inline-block; margin-bottom: 22px; background-image: none; }
.acad__logo img { display: block; width: auto; height: 64px; }
.acad .hp-lead { max-width: 520px; margin-top: 16px; }
.acad__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 520px; margin: 28px 0 0; }
.acad__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-left: 14px; border-left: 2px solid var(--hp-primary); }
.acad__facts dd { font: var(--hp-f-feature); margin: 0; color: var(--hp-text); }
.acad__facts dt { font: var(--hp-f-small); margin-top: 2px; color: var(--hp-muted); }
.acad__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.acad__flyer { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 8px; margin-block: 11px -7px; padding-block: 7px; background-image: none; color: var(--hp-primary); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.acad__flyer:hover { color: var(--hp-text); }
.acad__flyer svg { width: 16px; height: 16px; flex: none; }
.acad__next { min-width: 0; }
.acad__nexthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.acad__nexthead p { font: var(--hp-f-strong); margin: 0; color: var(--hp-text); }
.acad__nexthead a { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 6px; padding-block: 7px; margin-block: -7px; background-image: none; color: var(--hp-primary); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.acad__nexthead a:hover { color: var(--hp-text); }
.acad__nexthead svg { width: 14px; height: 14px; flex: none; transition: transform .45s var(--hp-ease-inout); }
.acad__nexthead a:hover svg { transform: translateX(3px); }
.acad__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.acad__list > li { min-width: 0; }
.acad__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 9px 13px 9px 9px; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; background-image: none; color: var(--hp-text); text-decoration: none; box-shadow: var(--hp-shadow-soft); transition: transform .45s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout), border-color .35s var(--hp-ease-inout); }
.acad__item:hover { border-color: rgb(var(--hp-primary-rgb) / .4); color: var(--hp-text); transform: translateY(-3px); box-shadow: var(--hp-shadow-card); }
.acad__thumb { display: block; width: 76px; height: 76px; overflow: hidden; border-radius: var(--hp-r-sm); background: var(--hp-mist); transform: translateZ(0); }
.acad__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1; transition: scale .8s var(--hp-ease-inout); }
.acad__item:hover .acad__thumb img { scale: 1.08; }
.acad__text { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.acad__meta { font: var(--hp-f-micro); overflow: hidden; color: var(--hp-primary); white-space: nowrap; text-overflow: ellipsis; }
.acad__name { font: var(--hp-f-label); display: -webkit-box; overflow: hidden; text-wrap: pretty; transition: color .35s var(--hp-ease-inout); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.acad__item:hover .acad__name { color: var(--hp-primary); }
.acad__when { font: var(--hp-f-micro); font-weight: 500; color: var(--hp-muted); }
.acad__topics { margin-top: 28px; }
.acad__topics p { font: var(--hp-f-strong); margin: 0 0 14px; color: var(--hp-text); }
.acad__topics ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acad__topics a { font: var(--hp-f-control); display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 15px 0 13px; border: 1px solid var(--hp-hairline); border-radius: 999px; background: #fff; background-image: none; color: var(--hp-text); text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 34, 51, .04); transition: transform .45s var(--hp-ease-inout), color .35s var(--hp-ease-inout), border-color .35s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout); }
/* the number of dates per topic, only when the element switches it on (Anzahl der Termine zeigen) */
.acad__count { margin-left: -2px; color: var(--hp-muted); font-variant-numeric: tabular-nums; }
.acad__topics a:hover { border-color: rgb(var(--hp-primary-rgb) / .4); color: var(--hp-primary); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgb(var(--hp-ink-rgb) / .6); }
.acad__topics i { width: 16px; color: var(--hp-primary); font-size: 15px; text-align: center; }
.acad__topics .hp-swipe { margin-top: 14px; }
/* below 1180px the dates move under the pitch, which splits into text and figures side by side */
@media (max-width: 1179.98px) {
  .acad__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .acad__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 5vw, 64px); align-items: end; }
  .acad__facts { margin-top: 0; }
}
@media (max-width: 1023.98px) {
  .acad__topics ul { flex-wrap: nowrap; margin: -4px calc(-1 * var(--hp-gutter)); padding: 4px var(--hp-gutter); overflow-x: auto; scroll-padding-inline: var(--hp-gutter); scrollbar-width: none; }
  .acad__topics ul::-webkit-scrollbar { display: none; }
  .acad__topics li { flex: none; }
}
@media (max-width: 767.98px) {
  .acad__intro { grid-template-columns: minmax(0, 1fr); }
  .acad__list { grid-template-columns: minmax(0, 1fr); }
  .acad__list > li:nth-child(n+4) { display: none; }
  .acad__facts { gap: 12px; }
  .acad__facts > div { padding-left: 10px; }
  .acad__facts dd { font: var(--hp-f-title); }
  .acad__facts dt { font: var(--hp-f-micro); font-weight: 500; }
  .acad__logo img { height: 52px; }
}
@media (max-width: 639.98px) {
  .acad__cta .hp-btn { flex: 1 1 100%; }
  .acad__nexthead { flex-direction: column; gap: 4px; }
}

/* ===== Entry panels ===== */
.paths__row { display: flex; gap: 12px; height: clamp(380px, 31vw, 440px); }
.paths__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; text-decoration: none; transition: flex-grow .65s var(--hp-ease); }
.paths__item.is-on { flex-grow: 2.2; }
.paths__item:hover { color: #fff; }
/* photo and shade are clipped together by a mask: clipped one by one (or by clip-path) the light photo shows as a rim
   along the rounded corners */
.paths__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); }
.paths__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.08); transition: transform 1s var(--hp-ease); }
.paths__item.is-on .paths__img { transform: scale(1); }
/* Two fades that crossfade with the panel's own transition, lighter and shorter by the user's choice (elegance before
   contrast for this block): a closed panel shows only its title (700, large text), the open panel's fade (::after)
   carries title, description and link; its 700 zone is at the allowed maximum (.92). Below 1280px every card shows its
   description, so the open fade is always on. Measured: closed title 3.2, open title 4.6, description 4.4, link 3.4. */
.paths__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%); }
.paths__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%); }
.paths__item.is-on .paths__shade::after { opacity: 1; }
@media (max-width: 1279.98px) {
  .paths__shade::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .paths__shade::after { transition: none; }
}
.paths__title, .paths__text, .paths__more { text-shadow: 0 1px 3px rgb(var(--hp-primary-900-rgb) / .6); }
.paths__stat { font: var(--hp-f-micro); position: absolute; top: 14px; left: 14px; 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); }
.paths__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.paths__title { font: var(--hp-f-title); font-weight: 700; display: block; }
.paths__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; }
.paths__reveal > * { min-height: 0; overflow: hidden; }
.paths__item.is-on .paths__reveal { grid-template-rows: 1fr; opacity: 1; transition-delay: .12s; }
.paths__text { font: var(--hp-f-body); display: block; width: min(380px, 62vw); padding-top: 6px; color: #f1f9fd; }
.paths__more { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 8px; padding-top: 10px; color: #fff; }
.paths__more svg { width: 15px; height: 15px; transition: transform .45s var(--hp-ease-inout); }
.paths__item:hover .paths__more svg { transform: translateX(3px); }
@media (max-width: 1439.98px) {
  .paths__item.is-on { flex-grow: 1.7; }
  .paths__body { padding: 16px; }
  .paths__text { width: 290px; }
}
@media (max-width: 1279.98px) {
  .paths__row { height: auto; margin: -4px calc(-1 * var(--hp-gutter)); padding: 4px var(--hp-gutter); scroll-padding-inline: var(--hp-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .paths__row::-webkit-scrollbar { display: none; }
  .paths__item, .paths__item.is-on { flex: 0 0 min(78vw, 340px); height: 400px; scroll-snap-align: start; }
  .paths__reveal { grid-template-rows: 1fr; opacity: 1; }
  .paths__text { width: auto; }
  .paths__img { transform: none; }
}

/* ===== Conference stage ===== */
.stage { overflow: hidden; isolation: isolate; }
.stage__bg { position: absolute; inset: -40px; z-index: -2; }
.stage__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(46px) saturate(1.25); transition: opacity 1.2s var(--hp-ease); }
.stage__bg img.is-on { opacity: .34; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  /* dark behind the headline, a primary glow rising from the lower right corner, a faint one at the upper left */
  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)); }
.stage__grid { display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 8fr); gap: 16px; }
.stage__feature { position: relative; display: block; min-height: 392px; overflow: hidden; border-radius: var(--hp-r-lg); background: none; color: #fff; text-decoration: none; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .8); }
.stage__feature:hover { color: #fff; }
.stage__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); }
.stage__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0s linear .9s, transform 7s linear; }
.stage__photo.is-on { z-index: 1; opacity: 1; transform: scale(1); transition: opacity .9s var(--hp-ease), transform 7s linear; }
/* the lead card keeps its dark ink fade (user: "looks fancier"); the stops sit a little earlier and denser than the
   original (0 28%, .7 58%, .95) so the sky date line keeps 4.5:1 over every picture in the rotation, phones earlier
   still because the texts start higher there */
.stage__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) {
  .stage__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%); }
}
.stage__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); }
.stage__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; padding: 24px; animation: hero-in .6s var(--hp-ease) both; }
.stage__date { font: var(--hp-f-label); display: block; color: var(--hp-sky); }
.stage__name { font: var(--hp-f-feature); display: block; margin-top: 6px; }
.stage__sub { font: var(--hp-f-small); display: -webkit-box; margin-top: 6px; overflow: hidden; color: #d3e0e8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stage__open { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #fff; }
.stage__open svg { width: 15px; height: 15px; transition: transform .45s var(--hp-ease-inout); }
.stage__feature:hover .stage__open svg { transform: translateX(3px); }
.stage__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.stage__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; text-decoration: none; transition: transform .45s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout); }
.stage__tile:hover { color: #fff; transform: translateY(-3px); }
/* white: the sky ring fell to 2.3:1 against the primary glow of the corner */
.stage__tile.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(127, 216, 245, .2); }
/* The event's own picture as a soft colour wash, a sharp photo behind a logo looks busy */
.stage__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); }
.stage__tile:hover .stage__tileimg, .stage__tile.is-on .stage__tileimg { filter: blur(3px) saturate(1.5); transform: scale(1.08); }
.stage__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%); }
.stage__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); }
.stage__plate img { display: block; max-width: 100%; max-height: 48px; object-fit: contain; }
.stage__plate b { font: var(--hp-f-label); text-align: center; }
.stage__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); }
.stage__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); }
.stage__tile--more::after { content: none; }
.stage__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #fff; transform-origin: left; animation: hp-progress 6s linear both; }
@keyframes hp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1023.98px) {
  .stage__grid { grid-template-columns: minmax(0, 1fr); }
  .stage__feature { min-height: 320px; }
}
.stage__grid > .hp-swipe { grid-column: 1 / -1; margin-top: 2px; }
/* Phones: the tiles become two rows that scroll sideways in date order (down, then right), a third column peeks in at
   the edge. The padding gives the active ring and the focus ring room inside the scroller. */
@media (max-width: 767.98px) {
  .stage__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; }
  .stage__tiles::-webkit-scrollbar { display: none; }
  .stage__tiles > li { min-width: 0; scroll-snap-align: start; }
  .stage__tile { min-height: 112px; padding: 10px 10px 7px; }
  .stage__feature { min-height: 300px; }
}
@media (min-width: 640px) and (max-width: 767.98px) {
  .stage__tiles { --cols: 3.25; }
}
@media (min-width: 768px) {
  .stage__grid > .hp-swipe { display: none; }
}

/* ===== Topic explorer ===== */
.topics { padding-bottom: var(--hp-space); }
.topics__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.topics__switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hp-r-sm); background: var(--hp-track); margin-bottom: 14px; }
.topics__switch 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; }
.topics__switch button.is-on { background: #fff; color: var(--hp-text); box-shadow: 0 1px 3px rgba(15, 34, 51, .16); }
.topics__list { display: flex; flex-direction: column; gap: 2px; max-height: 416px; margin: -4px; padding: 4px; scroll-padding-block: 4px 40px; list-style: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hp-line) transparent; }
.topics__list.is-long { padding-bottom: 32px; -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
.topics__item { font: var(--hp-f-control); display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 8px 12px; border: 0; border-radius: var(--hp-r-sm); background: transparent; color: var(--hp-text); text-align: left; cursor: pointer; transition: background-color .35s var(--hp-ease-inout), color .35s var(--hp-ease-inout); }
.topics__item b { font: var(--hp-f-micro); flex: none; min-width: 30px; padding: 2px 7px; border-radius: var(--hp-r-xs); background: color-mix(in srgb, var(--hp-primary) 15%, #fff); color: var(--hp-primary); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.topics__item:hover { background: var(--hp-mist); }
.topics__item.is-on b { background: #fff; color: var(--hp-primary); }
.topics__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(20px, 2.8vw, 40px); }
.topics__intro { position: relative; isolation: isolate; -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); min-height: 460px; overflow: hidden; border-radius: var(--hp-r-lg); background: var(--hp-ink-2); color: #fff; }
/* the entry panels' dark-to-primary fade, made readable for any text height: a soft 800 veil over the photo (::after)
   and the 700 ground behind the title and description itself (.topics__copy), ending in the brand cyan at the edge */
.topics__intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--hp-primary-800-rgb) / 0) 44%, rgb(var(--hp-primary-800-rgb) / .42) 70%, rgb(var(--hp-primary-700-rgb) / .62) 100%); }
.topics__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hp-pop .6s var(--hp-ease) both; }
@keyframes hp-pop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.topics__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 72px 24px 24px; background: linear-gradient(180deg, rgb(var(--hp-primary-700-rgb) / 0) 0, rgb(var(--hp-primary-700-rgb) / .8) 48px, rgb(var(--hp-primary-700-rgb) / .92) 64px, rgb(var(--hp-primary-700-rgb) / .92) calc(100% - 22px), rgb(var(--hp-primary-600-rgb) / .9) calc(100% - 9px), rgb(var(--hp-primary-rgb) / .92) 100%); }
.topics__intro h3 { font: var(--hp-f-h3); margin: 0; color: #fff; text-shadow: 0 1px 3px rgb(var(--hp-primary-900-rgb) / .6); }
/* whole sentences only, 04-topics.vue picks as many as fit three lines */
.topics__intro p { font: var(--hp-f-small); margin: 8px 0 0; color: #f1f9fd; text-wrap: pretty; text-shadow: 0 1px 3px rgb(var(--hp-primary-900-rgb) / .6); }
.topics__side { display: flex; flex-direction: column; min-width: 0; }
.topics__types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.topics__types button { font: var(--hp-f-control); min-height: 36px; padding: 0 12px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-sm); background: #fff; color: var(--hp-muted); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.topics__types button span { opacity: .62; }
.topics__events { margin: 0 0 7px; padding: 0 18px; list-style: none; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; box-shadow: var(--hp-shadow-soft); }
.topics__events:empty { display: none; }
.topics__events li + li { border-top: 1px solid var(--hp-hairline); }
.topics__events a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 84px; padding: 12px 0; background-image: none; color: var(--hp-text); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.topics__events a:hover { color: var(--hp-primary); }
.topics__events svg { width: 16px; height: 16px; color: var(--hp-primary); transition: transform .45s var(--hp-ease-inout); }
.topics__events a:hover svg { transform: translateX(3px); }
.topics__date { font: var(--hp-f-micro); display: block; color: var(--hp-muted); }
.topics__date b { font: var(--hp-f-title); display: block; color: var(--hp-text); }
.topics__what strong { font: var(--hp-f-strong); display: -webkit-box; overflow: hidden; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.topics__what em { font: var(--hp-f-small); display: block; margin-top: 2px; overflow: hidden; font-style: normal; color: var(--hp-muted); white-space: nowrap; text-overflow: ellipsis; }
.topics__all { font: var(--hp-f-label); display: inline-block; align-self: flex-start; margin: auto -8px -7px; padding: 7px 8px; background-image: none; color: var(--hp-primary); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.topics__all:hover { color: var(--hp-text); }
@media (max-width: 1179.98px) {
  .topics__grid { grid-template-columns: minmax(0, 1fr); }
  .topics__list, .topics__list.is-long { flex-direction: row; max-height: none; margin: -4px calc(-1 * var(--hp-gutter)); padding: 4px var(--hp-gutter); overflow-x: auto; overflow-y: hidden; overscroll-behavior: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .topics__list::-webkit-scrollbar { display: none; }
  .topics__item { flex: none; width: auto; min-height: 44px; white-space: nowrap; border: 1px solid var(--hp-line); }
}
@media (max-width: 767.98px) {
  .topics__panel { grid-template-columns: minmax(0, 1fr); }
  .topics__intro { min-height: 320px; }
}

/* ===== Numbers and photo strip ===== */
/* Figures and photos as one slim band after the news: title, three figures and the report on one row, a low photo strip. */
.impact { overflow: hidden; margin-bottom: var(--hp-inset); padding-top: clamp(28px, 3vw, 40px); padding-bottom: 0; }
.impact__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(20px, 2.2vw, 28px); }
.impact__title { font: var(--hp-f-h3); margin: 0; color: #fff; text-wrap: balance; }
.impact__stats { display: flex; justify-content: center; gap: clamp(20px, 3vw, 48px); margin: 0; }
.impact__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .2); }
.impact__stats dd { font: var(--hp-f-feature); margin: 0; color: #fff; }
.impact__stats dt { font: var(--hp-f-micro); font-weight: 500; margin-top: 2px; color: #c7d7e1; }
.impact__foot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.impact__foot p { font: var(--hp-f-micro); font-weight: 500; margin: 0; color: #9fb6c4; }
.impact__report { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 6px; padding-block: 7px; margin-block: -7px; background-image: none; color: var(--hp-sky); text-decoration: none; white-space: nowrap; transition: color .35s var(--hp-ease-inout); }
.impact__report:hover { color: #fff; }
.impact__report svg { width: 14px; height: 14px; flex: none; transition: transform .45s var(--hp-ease-inout); }
.impact__report:hover svg { transform: translateX(3px); }
/* The band in DGM blue, from the deep shade (white text 4.9:1) into the brand cyan, the hexagon texture very faintly on top
   (more made the text hard to read). Everything on it is white, the light cyan of the dark panels would be too weak here. */
.impact.hp-sec--ink { background: var(--hp-band); }
.impact::before { content: ""; position: absolute; inset: 0; background: url(/fileadmin/DGM/Startseite/hintergrund_startseite_kacheln.jpg) center / cover no-repeat; opacity: .07; mix-blend-mode: soft-light; pointer-events: none; }
.impact > * { position: relative; }
.impact__stats > div { border-left-color: rgba(255, 255, 255, .38); }
.impact__stats dt { color: #fff; }
.impact__foot p { color: rgba(255, 255, 255, .9); }
.impact__report { color: #fff; }
.impact__report:hover { color: var(--hp-tint); }
.impact .hp-swipe i { background: #fff; }
.impact .film__tile { background: rgba(0, 62, 82, .4); }
/* Prizes and awards: one compact tile per award with its latest laureates, at the foot of the figures band */
.awards { padding-block: clamp(24px, 2.6vw, 32px) clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .22); }
.awards__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.awards__head h3 { font: var(--hp-f-title); margin: 0; color: #fff; }
.awards__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.awards__links a { font: var(--hp-f-label); padding-block: 7px; margin-block: -7px; background-image: none; color: #fff; text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.awards__links a::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .45s var(--hp-ease-inout); }
.awards__links a:hover::after { transform: translateX(3px); }
.awards__links a:hover { color: var(--hp-tint); }
/* twelve awards fit two rows of six on large screens */
.awards__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.awards__item { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 14px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--hp-r-md); background: rgba(255, 255, 255, .09); background-image: none; color: #fff; text-decoration: none; transition: background-color .35s var(--hp-ease-inout), border-color .35s var(--hp-ease-inout), transform .45s var(--hp-ease-inout); }
.awards__item:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .17); color: #fff; transform: translateY(-3px); }
.awards__people { display: flex; align-items: center; height: 30px; }
.awards__face { position: relative; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border: 2px solid #0080b0; border-radius: 50%; background: rgba(0, 62, 82, .45); }
.awards__face + .awards__face { margin-left: -9px; }
.awards__face b { font: 600 .625rem/1 var(--hp-body); color: #fff; }
.awards__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awards__people i { font: var(--hp-f-micro); margin-left: 6px; font-style: normal; color: rgba(255, 255, 255, .85); }
.awards__item strong { font: var(--hp-f-label); overflow-wrap: anywhere; }
.awards__item small { font: var(--hp-f-micro); font-weight: 500; display: -webkit-box; overflow: hidden; color: rgba(255, 255, 255, .94); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.awards__item em { font: 800 .75rem/1.3 var(--hp-mono); font-style: normal; color: #fff; }
/* the cards of one row share their row heights (subgrid), so every laureate line starts on the same line */
@media (min-width: 1024px) {
  .awards__list > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .awards__item { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
}
@media (max-width: 1179.98px) {
  .awards__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
  .awards__list { display: flex; margin: -4px calc(-1 * var(--hp-gutter)); padding: 4px var(--hp-gutter); overflow-x: auto; scroll-padding-inline: var(--hp-gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .awards__list::-webkit-scrollbar { display: none; }
  .awards__list > li { flex: 0 0 min(62vw, 220px); scroll-snap-align: start; }
  .impact .awards .hp-swipe { margin: 14px 0 0; }
}
.film { margin-top: -4px; padding-top: 4px; padding-bottom: var(--hp-inset); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.film::-webkit-scrollbar { display: none; }
.film__track { display: flex; width: max-content; padding-inline: calc((100vw - 2 * var(--hp-inset) - var(--hp-wrap)) / 2); }
.film__tile { flex: none; width: clamp(150px, 13vw, 210px); aspect-ratio: 3 / 2; margin: 0 8px 0 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--hp-r-sm); background: var(--hp-ink-2); cursor: zoom-in; }
.film__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hp-ease-inout); }
.film__tile:hover img { transform: scale(1.05); }

.film.is-drifting { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.film.is-drifting .film__track { padding-inline: 0; animation: hp-drift 110s linear infinite; }
.film.is-drifting:hover .film__track, .film.is-drifting:focus-within .film__track { animation-play-state: paused; }
@keyframes hp-drift { to { transform: translateX(-50%); } }
.hp-lightbox { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 56px); background: rgba(4, 12, 19, .94); }
.hp-lightbox__img { max-width: 100%; max-height: 100%; border-radius: var(--hp-r-sm); object-fit: contain; }
.hp-lightbox__count { font: var(--hp-f-small); position: absolute; left: 50%; bottom: 14px; margin: 0; transform: translateX(-50%); color: #c7d7e1; }
.hp-lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--hp-r-sm); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .2s; }
.hp-lightbox__btn:hover { background: rgba(255, 255, 255, .24); }
.hp-lightbox__btn svg { width: 18px; height: 18px; }
.hp-lightbox__close { top: 16px; right: 16px; }
.hp-lightbox__prev { left: 16px; top: 50%; margin-top: -24px; }
.hp-lightbox__next { right: 16px; top: 50%; margin-top: -24px; }
@media (max-width: 1179.98px) {
  .impact__top { grid-template-columns: minmax(0, 1fr) auto; }
  .impact__stats { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (max-width: 639.98px) {
  .impact__top { grid-template-columns: minmax(0, 1fr); }
  .impact__foot { align-items: flex-start; }
  .impact__stats { grid-row: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .impact__stats > div { padding-left: 10px; }
  .impact__stats dd { font: var(--hp-f-title); }
}

/* ===== News: the shared widget keeps its article overlay, only its layout follows the page ===== */
/* right after the white topic section, whose bottom padding already leaves the room */
#aktuelles { padding-top: clamp(16px, 2vw, 32px); }
#aktuelles .news-list > div > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px clamp(32px, 4vw, 56px); align-items: start; }
#aktuelles .news-list > div > div > .grid { margin-top: 0; }
/* Hover in the news: the card grows a little and its picture zooms a little more inside the frame, the headline takes the
   brand colour, all eased in and out. The widget's own scale has no transition once the colour transition is set. */
#aktuelles .news-list button { border: 0; border-radius: 0; background-color: transparent; box-shadow: none; transform: none; scale: 1; transition: scale .55s var(--hp-ease-inout), color .35s var(--hp-ease-inout); }
#aktuelles .news-list button:hover { transform: none; }
#aktuelles .news-list button > div:first-child { transform: translateZ(0); }
#aktuelles .news-list button img { scale: 1; transition: scale .8s var(--hp-ease-inout) !important; }
@media (hover: hover) {
  #aktuelles .news-list button:hover { scale: 1.04 !important; }
  #aktuelles .news-list button:hover img { scale: 1.06 !important; }
}
#aktuelles .news-list button:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
#aktuelles .news-list button.is-flash { border-radius: var(--hp-r-xs); animation: hp-flash 2.2s var(--hp-ease) both; }
@keyframes hp-flash { 0%, 45% { background-color: var(--hp-tint); box-shadow: 0 0 0 10px var(--hp-tint); } 100% { background-color: transparent; box-shadow: 0 0 0 10px transparent; } }
#aktuelles .news-list .md\:grid-cols-2 { gap: clamp(20px, 2.4vw, 32px); }
#aktuelles .news-list .md\:grid-cols-2 > button { flex-direction: column; gap: 0; padding: 0; }
#aktuelles .news-list .md\:grid-cols-2 > button > div:first-child { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--hp-r-lg); }
/* The two large articles are family cards: white, hairline, soft shadow, the picture full-bleed at the top and the text
   inset; on hover the card shadow and a primary/.4 border join the existing scale. */
#aktuelles .news-list .md\:grid-cols-2 > button { overflow: hidden; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background-color: #fff; box-shadow: var(--hp-shadow-soft); transition: scale .55s var(--hp-ease-inout), color .35s var(--hp-ease-inout), border-color .35s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout); }
#aktuelles .news-list .md\:grid-cols-2 > button:hover { border-color: rgb(var(--hp-primary-rgb) / .4); box-shadow: var(--hp-shadow-card); }
#aktuelles .news-list .md\:grid-cols-2 > button > div:first-child { border-radius: 0; }
#aktuelles .news-list .md\:grid-cols-2 > button > div:last-child { padding-inline: 20px; padding-bottom: 20px; }
#aktuelles .news-list .md\:grid-cols-2 > button .hp-news-date { left: 20px; max-width: calc(100% - 40px); }
#aktuelles .news-list .md\:grid-cols-2 > button.is-flash { border-radius: var(--hp-r-card); animation-name: hp-flash-card; }
@keyframes hp-flash-card { 0%, 45% { background-color: var(--hp-tint); box-shadow: 0 0 0 10px var(--hp-tint); } 100% { background-color: #fff; box-shadow: var(--hp-shadow-soft); } }
/* News dates (home.js): a quiet line above every title. Its room is reserved from the first render (the padding),
   the date sits in it out of the flow, so a date that comes late or never moves nothing. */
#aktuelles .news-list .md\:grid-cols-2 > button > div:last-child { --news-gap: 16px; position: relative; padding-top: calc(var(--news-gap) + 1.3 * .75rem + 4px); }
#aktuelles .news-list .lg\:grid-cols-4 p { position: relative; padding-top: calc(1.3 * .75rem + 3px); }
/* the element can switch the dates off (data-news-dates="0"): no reserved line then */
#aktuelles[data-news-dates="0"] .news-list .md\:grid-cols-2 > button > div:last-child { padding-top: var(--news-gap); }
#aktuelles[data-news-dates="0"] .news-list .lg\:grid-cols-4 p { padding-top: 0; }
#aktuelles .hp-news-date { font: var(--hp-f-micro); position: absolute; top: 0; left: 0; display: block; max-width: 100%; overflow: hidden; color: var(--hp-muted); letter-spacing: normal; white-space: nowrap; text-overflow: ellipsis; }
#aktuelles .news-list .md\:grid-cols-2 .hp-news-date { top: var(--news-gap); }
#aktuelles .news-list .md\:grid-cols-2 h4 { font: var(--hp-f-title); display: -webkit-box; overflow: hidden; color: var(--hp-text); transition: color .35s var(--hp-ease-inout); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#aktuelles .news-list .md\:grid-cols-2 button:hover h4 { color: var(--hp-primary); }
#aktuelles .news-list .md\:grid-cols-2 p { font: var(--hp-f-small); margin-top: 8px; color: var(--hp-muted); }
#aktuelles .news-list .lg\:grid-cols-4 { display: block; }
#aktuelles .news-list .lg\:grid-cols-4 > button { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hp-line); }
#aktuelles .news-list .lg\:grid-cols-4 > button:first-child { padding-top: 0; border-top: 0; }
#aktuelles .news-list .lg\:grid-cols-4 > button > div:first-child { width: 64px; height: 64px; border-radius: var(--hp-r-sm); }
#aktuelles .news-list .lg\:grid-cols-4 p { font: var(--hp-f-label); color: var(--hp-text); transition: color .35s var(--hp-ease-inout); }
#aktuelles .news-list .lg\:grid-cols-4 button:hover p { color: var(--hp-primary); }
@media (max-width: 1023.98px) {
  #aktuelles .news-list > div > div { grid-template-columns: minmax(0, 1fr); }
  #aktuelles .news-list .lg\:grid-cols-4 > button:first-child { padding-top: 14px; border-top: 1px solid var(--hp-line); }
}
/* the track home.js adds under the two large cards, only the phone row scrolls */
#aktuelles .hp-swipe { grid-column: 1 / -1; margin-top: -4px; }
@media (min-width: 768px) {
  #aktuelles .hp-swipe { display: none; }
}
/* Phones: the two large cards become one row that scrolls sideways, the next card peeks in at the edge; the five
   articles below stay a list with smaller pictures and two-line titles. The padding leaves room for the hover scale. */
@media (max-width: 767.98px) {
  #aktuelles .news-list .md\:grid-cols-2 { display: flex; gap: 16px; margin: -8px calc(-1 * var(--hp-gutter)); padding: 8px var(--hp-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hp-gutter); scrollbar-width: none; }
  #aktuelles .news-list .md\:grid-cols-2::-webkit-scrollbar { display: none; }
  #aktuelles .news-list .md\:grid-cols-2 > button { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  #aktuelles .news-list .md\:grid-cols-2 > button > div:last-child { --news-gap: 14px; }
  #aktuelles .news-list .md\:grid-cols-2 p { -webkit-line-clamp: 2; }
  #aktuelles .news-list .lg\:grid-cols-4 > button { gap: 14px; padding-block: 12px; }
  #aktuelles .news-list .lg\:grid-cols-4 > button > div:first-child { width: 56px; height: 56px; }
  #aktuelles .news-list .lg\:grid-cols-4 p { -webkit-line-clamp: 2; }
}

/* ===== Committee finder ===== */
.net__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.4vw, 64px); }
.net__side { display: flex; flex-direction: column; }
.net__side .hp-lead { margin-top: 14px; }
.net__photo { position: relative; flex: 1; min-height: 240px; margin-top: 28px; overflow: hidden; border-radius: var(--hp-r-lg); background: var(--hp-track); }
.net__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.net__main { display: flex; flex-direction: column; height: 660px; padding: 19px 21px 0; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; box-shadow: var(--hp-shadow-soft); }
.net__search { display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-sm); background: var(--hp-mist); color: var(--hp-muted); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.net__search:focus-within { border-color: var(--hp-primary); background: #fff; outline: 2px solid var(--hp-primary); outline-offset: 2px; }
.net .net__search input:focus-visible { outline: 0; }
.net__search svg { width: 19px; height: 19px; flex: none; }
.net__search input { font: var(--hp-f-body); flex: 1; min-width: 0; height: 50px; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--hp-text); }
.net__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.net__chips button { font: var(--hp-f-control); min-height: 36px; padding: 0 12px; border: 1px solid var(--hp-line); border-radius: var(--hp-r-sm); background: #fff; color: var(--hp-muted); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.net__chips button span { opacity: .62; }
.net__letters { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 1px; margin-top: 10px; }
.net__letters button { font: 800 .875rem/1 var(--hp-mono); height: 32px; margin-block: -1px; padding: 0; border: 0; border-radius: var(--hp-r-xs); background: transparent; color: rgb(var(--hp-primary-700-rgb)); cursor: pointer; transition: background-color .15s, color .15s; }
.net__letters button:hover:not(:disabled) { background: var(--hp-mist); }
.net__letters button:disabled { color: #b9c7d1; cursor: default; }
.net__letters button.is-on, .net__letters button.is-on:hover:not(:disabled) { background: var(--hp-primary); color: #fff; }
.net__list { flex: 1; min-height: 0; margin: 6px -8px 0 -4px; padding: 4px 8px 36px 4px; scroll-padding-block: 4px 44px; -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--hp-line) transparent; }
.net__list > li { display: grid; grid-template-rows: 1fr; }
.net__fold { min-height: 0; }
.net__line { display: flex; align-items: center; justify-content: space-between; gap: 14px; box-shadow: inset 0 1px 0 var(--hp-line); }
.net__line > a { flex: 1; min-width: 0; padding: 11px 0; background-image: none; color: var(--hp-text); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.net__line > a:hover { color: var(--hp-primary); }
.net__line strong { font: var(--hp-f-strong); display: block; }
.net__line em { font: var(--hp-f-small); display: block; margin-top: 1px; font-style: normal; color: var(--hp-muted); }
.net__line button { font: var(--hp-f-micro); flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--hp-r-xs); background: var(--hp-mist); color: var(--hp-muted); cursor: pointer; white-space: nowrap; transition: background-color .35s var(--hp-ease-inout), color .35s var(--hp-ease-inout); }
.net__line button:hover { color: var(--hp-primary); }
.net__line svg { width: 14px; height: 14px; transition: transform .25s var(--hp-ease); }
.is-open .net__line svg { transform: rotate(180deg); }
.net__kids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; margin: 0; padding: 2px 0 14px; list-style: none; }
.net__kids a { font: var(--hp-f-small); display: block; margin-block: -2px; padding: 6px 0; background-image: none; color: var(--hp-primary); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.net__kids a:hover { color: var(--hp-text); }
.net__none { margin: 22px 0 0; color: var(--hp-muted); }
/* Filtering folds rows in and out like the calendar; the row line is drawn inside the fold so it shrinks away with it */
.net__main { position: relative; }
.net-row-move { transition: transform .48s var(--hp-ease); }
.net-row-enter-active, .net-row-leave-active { transition: grid-template-rows .48s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.net__list > li.net-row-enter-from, .net__list > li.net-row-leave-to { grid-template-rows: 0fr; }
.net__list > li.net-row-leave-to { opacity: 0; }
.net-row-enter-active > .net__fold, .net-row-leave-active > .net__fold { overflow: hidden; }
.net-row-enter-active .net__line { transition: opacity .4s ease, transform .5s var(--hp-ease); transition-delay: calc(var(--i, 0) * 30ms); }
.net-row-enter-from .net__line { opacity: 0; transform: translateY(-10px); }
.net__kidswrap { display: grid; grid-template-rows: 1fr; }
.net__kidsin { min-height: 0; margin: -2px -4px 0; padding: 2px 4px 0; overflow: hidden; }
.net-kids-enter-active, .net-kids-leave-active { transition: grid-template-rows .42s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.net-kids-enter-from, .net-kids-leave-to { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .join__tile img, .join__tile img.is-new { animation: none; transition: none; }
  .join__mosaic, .join__tile { transform: none !important; transition: none; }
  .young__big img.is-on, .young__badge { animation: none; }
  .young__ring { display: none; }
  .net [class*="-enter-active"], .net [class*="-leave-active"], .net [class*="-move"], .net [class*="-enter-active"] .net__line { transition: none !important; }
}
@media (max-width: 1023.98px) {
  .net__grid { grid-template-columns: minmax(0, 1fr); }
  .net__photo { flex: none; aspect-ratio: 16 / 9; }
  .net__main { height: 600px; overscroll-behavior: auto; }
  .net__list { overscroll-behavior: auto; }
}
@media (max-width: 639.98px) {
  .net__main { padding: 13px 13px 0; }
  .net__kids { grid-template-columns: minmax(0, 1fr); }
  .net__letters { grid-template-columns: repeat(13, minmax(0, 1fr)); }
}

/* ===== Young talent: three stops of one path beside one photo ===== */
.young__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.4vw, 64px); }
.young__hl { color: var(--hp-primary); }
/* the tag line of this section is a larger label, young talent work is meant to stand out on the page */
/* the Nachwuchs tag line is the family pill like every other (.hp-eyebrow); its own big pill is gone */
.young__big { position: relative; min-height: 480px; overflow: hidden; border-radius: var(--hp-r-lg); background: var(--hp-mist); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); }
.young__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--hp-ease), transform 1.2s var(--hp-ease); }
.young__big img.is-on { opacity: 1; transform: none; animation: young-zoom 9s var(--hp-ease-inout) both; }
@keyframes young-zoom { from { scale: 1.1; } to { scale: 1; } }
/* short and light: only the bottom 30 %, 800 to 600 to the brand cyan at the edge, the chip keeps its glass */
.young__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(var(--hp-primary-800-rgb) / 0) 70%, rgb(var(--hp-primary-800-rgb) / .45) 80%, rgb(var(--hp-primary-600-rgb) / .7) 91%, rgb(var(--hp-primary-rgb) / .8) 100%); }
.young__badge { position: absolute; left: 20px; bottom: 20px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 14px; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--hp-r-md); background: rgb(var(--hp-primary-900-rgb) / .58); color: #fff; -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); animation: young-badge .7s var(--hp-ease) both; }
.young__badge b { font: 800 2.25rem/1 var(--hp-mono); color: rgb(255 255 255 / .8); }
.young__badge > span { font: var(--hp-f-strong); }
.young__badge small { font: var(--hp-f-micro); display: block; color: rgba(255, 255, 255, .78); }
@keyframes young-badge { from { opacity: 0; transform: translateY(12px); } }
.young__big::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(15, 34, 51, .08); }
.young__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* the three steps hang on one line that fills with cyan up to the active one */
.young__step { position: relative; }
.young__step:not(:last-child)::before, .young__step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 52px; bottom: -12px; width: 2px; border-radius: 2px; background: var(--hp-line); }
.young__step:not(:last-child)::after { background: linear-gradient(var(--hp-primary), var(--hp-sky)); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--hp-ease-inout); }
.young__step.is-done::after { transform: scaleY(1); }
.young__step h3 { margin: 0; font: inherit; }
.young__step button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 0; border: 0; background: none; color: var(--hp-text); text-align: left; cursor: pointer; }
.young__num { font: var(--hp-f-label); position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--hp-line); border-radius: 50%; background: #fff; color: var(--hp-muted); transition: background-color .45s var(--hp-ease-inout), border-color .45s var(--hp-ease-inout), color .45s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout); }
@property --young-p { syntax: "<number>"; inherits: false; initial-value: 0; }
.young__ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(var(--hp-primary) calc(var(--young-p) * 360deg), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: young-ring var(--young-ms, 6500ms) linear both; }
@keyframes young-ring { to { --young-p: 1; } }
.young__label { font: var(--hp-f-title); transition: color .35s var(--hp-ease-inout); }
.young__name { font: var(--hp-f-small); margin-left: auto; color: var(--hp-muted); white-space: nowrap; }
.young__step button:hover .young__label { color: var(--hp-primary); }
.young__step.is-on .young__num { border-color: transparent; background: linear-gradient(135deg, var(--hp-primary), var(--hp-primary-deep)); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 122, 168, .9); }
.young__step.is-done .young__num { border-color: var(--hp-primary); background: var(--hp-tint); color: var(--hp-primary); }
.young__step.is-on .young__label { color: var(--hp-primary); }
.young__panel { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); transition: grid-template-rows .5s var(--hp-ease); }
.young__panel > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .5s; }
.young__step.is-on .young__panel { grid-template-rows: 1fr; }
.young__step.is-on .young__panel > div { visibility: visible; transition-delay: 0s; }
.young__panel p { font: var(--hp-f-body); margin: 0; padding-left: 46px; color: var(--hp-muted); text-wrap: pretty; }
.young__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; padding: 0 0 22px 46px; }
.young__links a { font: var(--hp-f-label); display: inline-flex; align-items: center; gap: 7px; padding-block: 7px; margin-block: -7px; background-image: none; color: var(--hp-primary); text-decoration: none; transition: color .35s var(--hp-ease-inout); }
.young__links a:hover { color: var(--hp-text); }
.young__links svg { width: 15px; height: 15px; transition: transform .45s var(--hp-ease-inout); }
.young__links a:hover svg { transform: translateX(3px); }
.young__live { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 13px 15px; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; background-image: none; color: var(--hp-text); text-decoration: none; box-shadow: var(--hp-shadow-soft); transition: border-color .35s var(--hp-ease-inout), box-shadow .45s var(--hp-ease-inout); }
.young__live:hover { border-color: rgb(var(--hp-primary-rgb) / .4); color: var(--hp-text); box-shadow: var(--hp-shadow-card); }
.young__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hp-primary); box-shadow: 0 0 0 0 rgba(0, 171, 227, .55); animation: hp-pulse 2.2s ease-out infinite; }
@keyframes hp-pulse { to { box-shadow: 0 0 0 12px rgba(0, 171, 227, 0); } }
.young__live > span:nth-child(2) { flex: 1; min-width: 0; }
.young__live small { font: var(--hp-f-micro); display: block; color: var(--hp-muted); }
.young__live b { font: var(--hp-f-strong); display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.young__live em { font: var(--hp-f-label); flex: none; font-style: normal; color: var(--hp-primary); }
@media (max-width: 1023.98px) {
  .young__grid { grid-template-columns: minmax(0, 1fr); }
  .young__big { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 639.98px) {
  .young__name { display: none; }
  .young__badge { left: 12px; bottom: 12px; gap: 10px; padding: 8px 14px 8px 10px; }
  .young__badge b { font-size: 1.75rem; }
  .young__live b { white-space: normal; }
}

/* ===== Membership: photo and fee finder as one panel ===== */
/* Membership: a compact overview over a living mosaic of people at DGM events, linking on to the membership pages */
.join { padding-block: 0; margin-inline: var(--hp-inset); background: none; }
.join__panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--hp-r-xl); -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); color: #fff;
  /* like the conference panel: dark on the text side, a primary glow from the lower right (the gaps between the hexagons
     glow towards it), a faint one at the upper left */
  background:
    radial-gradient(70% 90% at 100% 100%, rgb(var(--hp-primary-rgb) / .85), rgb(var(--hp-primary-rgb) / 0) 70%),
    radial-gradient(45% 55% at 0% 0%, rgb(var(--hp-primary-rgb) / .25), rgb(var(--hp-primary-rgb) / 0) 70%),
    linear-gradient(135deg, rgb(var(--hp-primary-900-rgb)), rgb(var(--hp-primary-800-rgb)) 48%, rgb(var(--hp-primary-700-rgb))); }
/* a honeycomb of photo hexagons on the right: inline-block tiles, the floated spacer's stepped shape-outside indents
   every other row by half a tile */
.join__mosaic { --s: clamp(124px, 12.6vw, 184px); --m: 5px; --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px); position: absolute; z-index: -3; top: -60px; right: -90px; bottom: -60px; left: 36%; overflow: hidden; font-size: 0; line-height: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 220px); mask-image: linear-gradient(90deg, transparent 0, #000 220px); }
/* follows the mouse a little, against its direction and with a slow ease, like looking through a window */
.join__mosaic { transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0); transition: transform 1.4s var(--hp-ease); }
.join__mosaic::before { content: ""; float: left; width: calc(var(--s) / 2 + var(--m)); height: 140%; shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f)); }
.join__tile { position: relative; display: inline-block; width: var(--s); height: calc(var(--s) * 1.1547); margin: var(--m); margin-bottom: calc(var(--m) - var(--s) * .2885); overflow: hidden; vertical-align: top; background: var(--hp-ink-2); clip-path: polygon(0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0); }
/* a first load fades in, a swap fades the new photo in over the old one, which stays underneath until covered */
.join__tile { transition: transform .6s var(--hp-ease-inout), filter .6s var(--hp-ease-inout); }
@media (hover: hover) and (pointer: fine) {
  .join__tile:hover { z-index: 2; transform: scale(1.07); filter: brightness(1.12) saturate(1.1); }
}
/* the text column and the shade let the pointer through to the honeycomb, the links and cards take it back */
.join__shade, .join__body { pointer-events: none; }
.join__body > * { pointer-events: auto; }
.join__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); opacity: 0; transition: opacity .9s var(--hp-ease-inout); }
.join__tile img.is-loaded, .join__tile img.is-new { opacity: 1; }
.join__tile img.is-new { z-index: 1; animation: join-tile-in 1.6s var(--hp-ease-inout) both; }
@keyframes join-tile-in { from { opacity: 0; scale: 1.05; } to { opacity: 1; scale: 1; } }
/* The shade is dense under the whole text column (its right edge is --join-edge, the column is at most 600px wide)
   and fades out to the right of it, so headline, checklist and cards sit on calm ink at every width and the honeycomb
   only comes in beside them. */
.join__shade { --join-edge: calc((100% - var(--hp-wrap)) / 2 + min(600px, var(--hp-wrap))); position: absolute; inset: -1px; z-index: -1; background: linear-gradient(90deg, rgb(var(--hp-primary-900-rgb) / .97) 0, color-mix(in srgb, rgb(var(--hp-primary-800-rgb) / .95) 67%, rgb(var(--hp-primary-900-rgb) / .95)) calc(var(--join-edge) + 24px), color-mix(in srgb, rgb(var(--hp-primary-700-rgb) / .6) 54%, rgb(var(--hp-primary-800-rgb) / .6)) calc(var(--join-edge) + 128px), rgb(var(--hp-primary-rgb) / .14) calc(var(--join-edge) + 300px), rgb(var(--hp-primary-rgb) / 0) 100%); }
.join__body { display: flex; flex-direction: column; align-items: flex-start; padding-block: clamp(48px, 5.6vw, 80px); }
.join__body > * { max-width: 600px; }
.join .hp-h2 { color: #fff; }
.join__lead { font: var(--hp-f-lead); margin: 16px 0 0; color: #d3e0e8; text-wrap: pretty; }
.join__perks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; padding: 0; list-style: none; }
.join__perks li { font: var(--hp-f-label); display: flex; align-items: center; gap: 8px; color: #fff; }
.join__perks svg { width: 16px; height: 16px; flex: none; color: var(--hp-primary); }
.join__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 28px 0 0; padding: 0; list-style: none; }
.join__kind { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px 16px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--hp-r-card); background: rgba(255, 255, 255, .06); background-image: none; color: #fff; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .35s var(--hp-ease-inout), border-color .35s var(--hp-ease-inout), transform .45s var(--hp-ease-inout); }
.join__kind:hover { border-color: rgba(0, 171, 227, .8); background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-3px); }
/* the blocks' icon tile (bg-primary/10, primary icon), 44px, radius 10px */
.join__kind i { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--hp-r-sm); background: rgb(var(--hp-primary-rgb) / .1); color: var(--hp-primary); font-size: 18px; }
.join__kind span { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.join__kind b { font: var(--hp-f-strong); }
.join__kind small { font: var(--hp-f-micro); font-weight: 500; color: #d3e0e8; }
.join__kind svg { width: 15px; height: 15px; color: var(--hp-primary); transition: transform .45s var(--hp-ease-inout); }
.join__kind:hover svg { transform: translateX(3px); }
.join__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.join__more { font: var(--hp-f-label); padding-block: 7px; margin-block: -7px; background-image: none; color: #fff; text-decoration: underline; text-decoration-color: var(--hp-primary); text-underline-offset: 4px; transition: text-decoration-color .3s var(--hp-ease-inout); }
.join__more:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 1023.98px) {
  .join__mosaic { left: 44%; }
}
@media (max-width: 767.98px) {
  .join__panel { display: flex; flex-direction: column; }
  .join__mosaic { --s: 86px; --m: 3px; position: relative; inset: auto; z-index: 0; height: 230px; margin: -30px -40px 0 -20px; -webkit-mask-image: none; mask-image: none; }
  /* phones: the glow sits behind the honeycomb at the top, the texts below stay on the dark part; the honeycomb fades
     out by its own mask into the panel colour, so there is no seam */
  .join__panel { background: radial-gradient(120% 42% at 100% 0%, rgb(var(--hp-primary-rgb) / .7), rgb(var(--hp-primary-rgb) / 0) 70%), linear-gradient(180deg, rgb(var(--hp-primary-800-rgb)), rgb(var(--hp-primary-900-rgb)) 55%); }
  .join__mosaic { -webkit-mask-image: linear-gradient(180deg, #000 61%, transparent 100%); mask-image: linear-gradient(180deg, #000 61%, transparent 100%); }
  .join__shade { display: none; }
  .join__body { position: relative; z-index: 1; }
  .join__body { padding-block: 8px 32px; }
  .join__kinds { grid-template-columns: minmax(0, 1fr); }
  .join__kind { flex-direction: row; align-items: center; }
  .join__cta .hp-btn { flex: 1 1 100%; }
}


/* ===== Event calendar ===== */
.cal { margin-block: var(--hp-inset); }
.cal__grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.cal__side { min-width: 0; }
.cal__wait { min-height: 788px; border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); background: #fff; box-shadow: var(--hp-shadow-soft); }
/* the shadcn filter card (its utilities have no specificity, see below) on the family surface like the list beside it */
.cal__side > .cal-ui { border: 1px solid var(--hp-hairline); border-radius: var(--hp-r-card); box-shadow: var(--hp-shadow-soft); }
.cal__main { position: relative; min-width: 0; min-height: 620px; }
/* The filter's select lists open in a portal on body, outside the page wrapper's z-index 999 layer that holds every
   section, so they need a layer above it or they open invisibly underneath. Reka copies this to its popper wrapper. */
.cal-ui[data-slot="select-content"] { z-index: 1100 !important; }
/* The filter's utilities have no specificity (build.mjs wraps them in :where), so the "today" tint, emitted later, beat
   the picked state when both apply. A picked day always shows the DGM-blue fill. */
.cal-ui [data-reka-calendar-cell-trigger][data-selected] { background-color: var(--hp-primary); color: #fff; }
/* a type row is one hit area: the label (bound to the checkbox) spreads a layer over the whole row, its count included */
.cal-ui__types > div { position: relative; cursor: pointer; }
.cal-ui__types label::after { content: ""; position: absolute; inset: 0; }
.cal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.cal__count { font: var(--hp-f-strong); margin: 0; color: var(--hp-text); }
.cal__count span { display: inline-block; }
.cal__pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cal__pills:empty { display: none; }
.cal__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; }
.cal__pills button:hover { border-color: var(--hp-primary-deep); background: var(--hp-primary-deep); color: #fff; }
.cal__pills svg { width: 11px; height: 11px; }
.cal__sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--hp-r-sm); background: var(--hp-track); margin-left: auto; }
.cal__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; }
.cal__sort button.is-on { background: #fff; color: var(--hp-text); box-shadow: 0 1px 3px rgba(15, 34, 51, .16); }
/* months are spaced by a margin inside their fold, so a closing month takes its gap with it */
.cal__groups { margin-bottom: -24px; }
.cal__groups:empty { margin-bottom: 0; }
.cal__group { display: grid; grid-template-rows: 1fr; }
.cal__groupbody { min-height: 0; }
.cal__groupbody > .cal__list { margin-bottom: 24px; }
.cal__label { font: var(--hp-f-title); display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: var(--hp-text); }
.cal__label span { font: var(--hp-f-small); letter-spacing: -.006em; color: var(--hp-muted); }
.cal__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); }
.cal__list li + li { border-top: 1px solid var(--hp-line); }
.cal__list > li { display: grid; grid-template-rows: 1fr; }
.cal__fold { min-height: 0; }
.cal__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); text-decoration: none; transition: background-color .35s var(--hp-ease-inout); }
.cal__row:hover { background-color: var(--hp-mist); color: var(--hp-text); }
.cal .cal__list .cal__row:focus-visible { outline-offset: -3px; border-radius: calc(var(--hp-r-card) - 1px); }
.cal__row > svg { width: 16px; height: 16px; color: var(--hp-primary); transition: transform .45s var(--hp-ease-inout); }
.cal__row:hover > svg { transform: translateX(3px); }
.cal__date { font: var(--hp-f-micro); display: block; text-align: center; color: var(--hp-muted); }
.cal__date b { font: var(--hp-f-h3); display: block; color: var(--hp-text); }
.cal__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--hp-r-sm); background: var(--hp-mist); }
.cal__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--hp-ease-inout), filter .8s var(--hp-ease-inout); }
.cal__row:hover .cal__thumb > img { transform: scale(1.06); }
/* Same look as the conference tiles: the picture turns into a colour wash behind a white logo plate */
.cal__row.has-logo .cal__thumb > img { transform: scale(1.14); filter: blur(4px) saturate(1.35); }
.cal__row.has-logo:hover .cal__thumb > img { transform: scale(1.2); filter: blur(2px) saturate(1.5); }
.cal__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); }
.cal__plate img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.cal__what { min-width: 0; display: block; }
.cal__type { font: var(--hp-f-micro); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--hp-muted); }
.cal__type i { width: 8px; height: 8px; flex: none; border-radius: 50%; }
/* the kind (its colour from the CRM or the interim list as --k) and the status flags: tinted pills, 12px as before */
.cal__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); }
.cal__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; }
.cal__what strong { font: var(--hp-f-strong); display: -webkit-box; margin-top: 3px; overflow: hidden; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cal__sub { font: var(--hp-f-small); display: block; margin-top: 1px; overflow: hidden; color: var(--hp-text); white-space: nowrap; text-overflow: ellipsis; }
.cal__facts { font: var(--hp-f-small); display: flex; flex-wrap: wrap; column-gap: 1.3em; margin-top: 2px; overflow: hidden; color: var(--hp-muted); }
.cal__facts > span { position: relative; min-width: 0; }
/* the strings carry no-break spaces: a range never breaks, a single day only after the comma before its times */
.cal__when { white-space: normal; }
.cal__facts > span + span::before { content: "\00b7"; position: absolute; top: 0; right: 100%; width: 1.3em; text-align: center; }
.cal__short { display: none; }
.cal__more { display: flex; margin: 20px auto 0; }
.cal__none { padding: 44px 20px; border: 1px dashed var(--hp-line); border-radius: var(--hp-r-md); text-align: center; color: var(--hp-muted); }
.cal__none p { margin: 0 0 14px; }

/* Calendar motion when filtering: rows and months fold open and shut, so the card and everything under it glide
   instead of jumping. Every fold shares one duration and curve with no delay, so the list height moves in one straight
   glide from old to new; the cascade lives only in the rows' fade (--i). Leaving and entering items also get the move
   class, so the move rules come first and lose to them. */
.cal-row-move, .cal-group-move { transition: transform .48s var(--hp-ease); }
.cal-pill-move { transition: transform .3s var(--hp-ease); }
.cal-row-enter-active, .cal-row-leave-active, .cal-group-enter-active, .cal-group-leave-active { transition: grid-template-rows .48s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.cal__list > li.cal-row-enter-from, .cal__list > li.cal-row-leave-to { grid-template-rows: 0fr; }
.cal__list > li.cal-row-leave-to, .cal-group-enter-from, .cal-group-leave-to { opacity: 0; }
.cal-group-enter-from, .cal-group-leave-to { grid-template-rows: 0fr; }
.cal-row-enter-active > .cal__fold, .cal-row-leave-active > .cal__fold, .cal-group-enter-active > .cal__groupbody, .cal-group-leave-active > .cal__groupbody { overflow: hidden; }
.cal-row-enter-active .cal__row { transition: opacity .4s ease, transform .5s var(--hp-ease), background-color .2s; transition-delay: calc(var(--i, 0) * 34ms); }
.cal-row-enter-from .cal__row { opacity: 0; transform: translateY(-12px); }
.cal-pill-enter-active { transition: opacity .25s ease, transform .35s var(--hp-ease); }
.cal-pill-leave-active { transition: opacity .18s ease, transform .2s ease; }
.cal-pill-enter-from, .cal-pill-leave-to { opacity: 0; transform: scale(.82); }
.cal-count-enter-active, .cal-count-leave-active { transition: opacity .14s ease, transform .18s var(--hp-ease); }
.cal-count-enter-from { opacity: 0; transform: translateY(6px); }
.cal-count-leave-to { opacity: 0; transform: translateY(-6px); }
.cal-fade-enter-active { transition: opacity .35s ease .12s, transform .45s var(--hp-ease) .12s; }
.cal-fade-leave-active { position: absolute; inset-inline: 0; transition: opacity .2s ease, transform .2s ease; }
.cal__more.cal-fade-leave-active { width: max-content; }
.cal-fade-enter-from, .cal-fade-leave-to { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .cal [class*="-enter-active"], .cal [class*="-leave-active"], .cal [class*="-move"], .cal [class*="-enter-active"] .cal__row { transition: none !important; }
}
@media (min-width: 1024px) and (min-height: 900px) {
  .cal__side { position: sticky; top: 96px; }
}
@media (max-width: 1023.98px) {
  .cal__grid { grid-template-columns: minmax(0, 1fr); }
  .cal__wait { min-height: 124px; }
  .cal__main { min-height: 0; }
}
@media (max-width: 639.98px) {
  .cal__row { grid-template-columns: 46px minmax(0, 1fr) 16px; gap: 10px; padding: 12px 12px 12px 8px; }
  .cal__thumb { display: none; }
  .cal__row.has-logo { grid-template-columns: 46px minmax(0, 1fr) 88px; }
  .cal__row.has-logo > svg { display: none; }
  .cal__row.has-logo .cal__thumb { order: 1; display: block; aspect-ratio: 4 / 3; }
  .cal__plate { inset: 6px; padding: 3px 4px; }
  .cal__date b { font: var(--hp-f-title); }
  .cal__sort { margin-left: 0; }
  /* phones: a multi-day date without its clock times, a single day keeps them */
  .cal__long { display: none; }
  .cal__short { display: inline; }
}

/* ===== Selected state, one look for every list and chip ===== */
.topics__item.is-on, .topics__types button.is-on, .net__chips button.is-on { border-color: var(--hp-primary); background: var(--hp-primary); color: #fff; box-shadow: 0 6px 14px -10px rgba(0, 171, 227, .9); }
.topics__item.is-on:hover, .topics__types button.is-on:hover, .net__chips button.is-on:hover { color: #fff; }
.net__chips button.is-on span { opacity: .85; }