/* dgm_section_hero_people, the course stage (Akademie task H2, 2026-11-13; option "visual" = "courses"). Loaded only by a
   hero with that option, so no other hero sees a rule of this file.
   Round 3 (the owner: "show more than one at once, 3-4 on a big screen, one on mobile"): the idea stays a deck of index
   cards, now laid out as a row. Four cards in front from 1400 px (three from 1100, two from 700), each an index card: a
   white tab with date and place on top, the picture, the name on navy. Behind the last card the deck waits (its edges
   show at the right). A step deals the leftmost card away to the lower left, the row moves up by one and the next card
   comes off the deck; its picture settles more slowly than its text arrives. Transform and opacity only.
   The hero around it (from 900 px): the headline across the content width; below it the lead and the search at the left,
   the topics with their counts at the right; the stage across the content width below both.
   Without script the same cards form a row that scrolls natively (the first four visible); under 700 px always a row that
   snaps, the next card peeking in.
   Type: name 17px (16px on phones), nothing under 12px. Navy #003e52, cyan #00abe3, white, the hero's pale blue. */

.hpp--courses { --out: cubic-bezier(.16, 1, .3, 1); overflow-x: clip; overflow-y: visible; }   /* the search's suggestions may reach below the hero; sideways it still clips (the dealt card) */
.hpp--courses .hpp__inner { min-height: 0; padding-bottom: 0; }

/* ---------- the hero's composition (polish round 2026-11-13; the owner: no photographs, the search a little bigger
   again, the headline a little smaller; then "training doodles ... to make it a little more playful") ----------
   From 1100 px two columns: left the headline (three lines, at most 11.6 em wide), the lead and the Inhouse link; right
   the doodles of option figure = "training" beside the headline (24 px from its longest line, ending at the headline's
   foot, so at least 32 px above the search label) and the search block beside the lead (label, field 520 px, chips),
   right edges aligned. Without doodles the search block stands centred against the left column. The stage across the
   content width, 40 px below the taller column. Under 1100 px one column: headline (the small doodle group beside it
   from 700 px), lead, search, chips, Inhouse link, the stage. */
.hpp--courses { --sbh: 89px; --chh: 40px; }   /* the search block (label 21 + 8 + field 60) and the chips' row */
@media (min-width: 1100px) {
  .hpp.hpp--courses { --cw: min(100% - 2 * var(--pad), 1280px - 2 * var(--pad)); --top: 40px;
    display: grid; grid-template-columns: 1fr minmax(0, calc(var(--cw) - 568px)) 568px 1fr;
    /* rows: the room above the text, tag line, headline, lead, Inhouse link, the stage */
    grid-template-rows: var(--top) auto auto auto auto auto; }
  .hpp--courses .hpp__inner, .hpp--courses .hpp__copy, .hpp--courses .hpc-side, .hpp--courses .hpc-side__in { display: contents; }
  .hpp--courses .hpp__eyebrow { grid-column: 2; grid-row: 2; justify-self: start; }
  .hpp--courses .hpp__h1 { grid-column: 2; grid-row: 3; }
  .hpp--courses .hpp__lead { grid-column: 2; grid-row: 4; align-self: start; max-width: 600px; padding-right: 0; margin-top: 32px; }
  .hpp--courses .hpc-inhouse { grid-column: 2; grid-row: 5; align-self: start; justify-self: start; margin-top: 8px; }
  /* with the doodles: the search beside the lead (tops on one line), the chips beside the Inhouse link */
  .hpp--courses .hpp__search { grid-column: 3; grid-row: 4; align-self: start; justify-self: end; width: 100%; max-width: 520px; margin: 32px 0 0; }
  .hpp--courses .hpc-chips { grid-column: 3; grid-row: 5; align-self: start; justify-self: end; width: 100%; max-width: 520px; margin: 12px 0 0; }
  /* without them: the search block centred against the whole left column (search and chips centre the same margin box) */
  .hpp--courses:not(:has(.hpd-w)) .hpp__search { grid-row: 2 / 6; align-self: center; margin: 0 0 calc(12px + var(--chh)); }
  .hpp--courses:not(:has(.hpd-w)) .hpc-chips { grid-row: 2 / 6; align-self: center; margin: calc(var(--sbh) + 12px) 0 0; }
  .hpp--courses .hpd-w { grid-column: 3; grid-row: 1 / 4; margin-left: 24px; }
  .hpp--courses .hpc { grid-column: 2 / 4; grid-row: 6; }
}
@media (max-width: 1099.98px) {
  .hpp.hpp--courses { display: grid; grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad); grid-template-rows: var(--top); }
  .hpp--courses .hpp__inner, .hpp--courses .hpp__copy, .hpp--courses .hpc-side, .hpp--courses .hpc-side__in { display: contents; }
  .hpp--courses :is(.hpp__eyebrow, .hpp__h1, .hpp__lead, .hpp__search, .hpc-chips, .hpc-inhouse, .hpc-ph) { grid-column: 2; }
  .hpp--courses .hpp__eyebrow { grid-row: 2; justify-self: start; }
  .hpp--courses .hpp__h1 { grid-row: 3; }
  .hpp--courses .hpd-w { grid-column: 2; grid-row: 3 / 5; justify-self: end; width: 38%; }
  .hpp--courses .hpp__lead { grid-row: 4; margin-top: 24px; }
  .hpp--courses .hpc-ph { grid-row: 5; }
  .hpp--courses .hpp__search { grid-row: 6; margin-top: 32px; }
  .hpp--courses .hpc-chips { grid-row: 7; margin-top: 12px; }
  .hpp--courses .hpc-inhouse { grid-row: 8; justify-self: start; margin-top: 8px; }
  .hpp--courses .hpc { grid-column: 1 / 4; grid-row: 9; }
}
@media (min-width: 900px) and (max-width: 1099.98px) { .hpp--courses .hpc { grid-column: 2; } }

/* ---------- the style element beside the headline (option figure = "training", only with the course stage) ----------
   Polish round 2026-11-13 (the owner, after three other tries: "experts being taught by more experts with lots of
   exchange and lab practice"): one calm line scene in the blue manner of the Netzwerk heroes (Nachwuchs, Women@DGM):
   navy strokes, a few pale fills, cyan for the accents. Three professionals at eye level around a lab bench: the expert
   (blazer, lanyard) points at a monitor that shows the microscope's image of a few grains, a colleague in a lab coat
   holds a tensile specimen and answers, a third (lab coat, safety glasses pushed up) leans in at the microscope. Faces
   left open, plain clothing lines. The room (.hpd-w) takes the rows beside the headline and has no size of its own (no
   layout shift); the scene stands at its bottom right on the content's right edge, at least 32 px above the search
   label. From 1200 px the whole scene, 1024 to 1199 px the two at the instrument, none below.
   Life: it draws itself once (about a second, after the font wait); now and then one grain on the monitor lights up;
   the expert's pointing hand and the held specimen move by a few degrees; the scene follows the pointer by a few
   pixels (assets/doodles.js). Nothing to operate; nothing of it moves with reduced motion. */
.hpd-w { position: relative; min-width: 0; min-height: 0; pointer-events: none; }
.hpi { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; overflow: visible;
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px); transition: translate 1.4s cubic-bezier(.2, .7, .2, 1); }
.hpi :is(path, circle) { stroke: #003e52; stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.hpi .hpi__hair, .hpi .hpi__thin { stroke-width: 1.2px; }
.hpi .hpi__limbo { stroke: #003e52; stroke-width: 8px; }
.hpi .hpi__limb { stroke: #fff; stroke-width: 5px; }
.hpi .hpi__floor { stroke: rgb(0 62 82 / .28); stroke-width: 1.2px; }
.hpi .hpi__gb { stroke: rgb(0 62 82 / .7); stroke-width: 1.1px; }
.hpi .hpi__grain { stroke: none; fill: #7fd8f5; }
.hpi .hpi__lanyard { stroke: #00abe3; stroke-width: 1.6px; }
.hpi .hpi__glasses { stroke: #00abe3; stroke-width: 3px; }
.hpi .hpi__finger { stroke: #003e52; stroke-width: 2.4px; }
.hpi__arm, .hpi__spec { transform-box: fill-box; }
.hpi__arm { transform-origin: 100% 30%; }
.hpi__spec { transform-origin: 30% 0%; }
@media (max-width: 1199.98px) { .hpi__p2 { display: none; } }
@media (max-width: 1023.98px) { .hpd-w { display: none; } }
html.nw-fw .hpd-w { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.hpc-js .hpi :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  html.hpc-js:not(.nw-fw) .hpi :is(path, circle) { animation: hpi-draw .95s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
  html.hpc-js:not(.nw-fw) :is(.hpi__p2, .hpi__p3) :is(path, circle) { animation-delay: .3s; }
  html.hpc-js:not(.nw-fw) .hpi__p1 :is(path, circle) { animation-delay: .45s; }
  html.hpc-js .hpi .hpi__grain { fill-opacity: 0; }
  html.hpc-js:not(.nw-fw) .hpi .hpi__grain { animation: hpi-grain 9s ease-in-out 1.4s infinite; }
  .hpi__arm { animation: hpi-arm 5.5s ease-in-out 2s infinite alternate; }
  .hpi__spec { animation: hpi-spec 4.6s ease-in-out 2.6s infinite alternate; }
}
@keyframes hpi-draw { 55% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
/* one grain on the monitor lights up, stays a while, fades */
@keyframes hpi-grain { 0%, 100% { fill-opacity: 0; } 18%, 70% { fill-opacity: 1; } }
@keyframes hpi-arm { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@keyframes hpi-spec { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .hpi { translate: none; transition: none; } }
/* the headline keeps its three lines at every size ("in Materialwissenschaft" is 10.7 em, "... und" would be 12.4 em) */
.hpp--courses .hpp__h1 { max-width: 11.6em; }
/* the search field as the instrument: 60 px high (1 + 5 + 48 + 5 + 1), the filled button 48 px inside it, label 15 px */
.hpp--courses .hpp__slabel { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; }
.hpp--courses .hpp__sbox { min-height: 60px; padding: 5px 5px 5px 16px; }
.hpp.hpp--courses .hpp__sinput, .hpp.hpp--courses .hpp__sinput:focus { height: 48px; font-size: 17px; }

/* ---------- the stage ---------- */
.hpc { --k: 1; --gap: 16px; --dx: 16px; --dy: 6px; --tab: 34px; --txt: 152px;
  position: relative; z-index: 2; color: var(--ink); padding: 26px 0 0; }
@media (min-width: 700px) { .hpc { --k: 2; } }
@media (min-width: 1100px) { .hpc { --k: 3; --gap: 20px; } }
@media (min-width: 1400px) { .hpc { --k: 4; } }
.hpc__in { container-type: inline-size; }
html.hpc-js .hpc:not(.is-live) .hpc__in { opacity: 0; animation: hpc-show 0s 2.5s forwards; }
@keyframes hpc-show { to { opacity: 1; } }
.hpc.is-live .hpc__in { opacity: 1; }

.hpc :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.hpc :where(li) { margin: 0; padding: 0; }
.hpc li::before { content: none; }

/* ---------- an index card ---------- */
.hpc__card { position: relative; display: grid; grid-template-rows: var(--tab) auto minmax(0, 1fr); height: 100%; color: var(--ink) !important;
  text-decoration: none !important; filter: drop-shadow(0 10px 14px rgb(0 33 44 / .16)) drop-shadow(0 2px 3px rgb(0 33 44 / .08)); }
.hpc__card:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 14px; }
/* the tab: date and place */
.hpc__band { grid-row: 1; grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100% - 22px);
  height: var(--tab); padding: 0 14px; border-radius: 12px 12px 0 0; background: #fff; white-space: nowrap; }
.hpc__when { flex: none; color: var(--ink); font: 700 13px/1.2 "Theme-Font", Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.hpc__where { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font: 500 13px/1.2 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__where:empty { display: none; }
.hpc__where::before { content: "·"; margin-right: 8px; color: rgb(0 62 82 / .4); }
/* the picture: a fixed 16:9 box, a calm navy tint while it loads, when it fails or when there is none */
.hpc__pic { grid-row: 2; grid-column: 1; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 14px 0 0;
  background: linear-gradient(160deg, #0b5a76 0%, #003e52 62%, #002c3a 100%); }
.hpc__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
html.hpc-js .hpc__img { opacity: 0; transition: opacity .5s ease; }
html.hpc-js .hpc__img.is-loaded { opacity: 1; }
.hpc__img.is-failed { visibility: hidden; }
.hpc__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 62 82 / .04) 55%, rgb(0 44 58 / .5) 100%); }
/* the feed's ribbon ("Neu ab 2027"), on the picture */
.hpc__tags { grid-row: 2; grid-column: 1; z-index: 2; align-self: end; justify-self: start; display: flex; gap: 6px; padding: 10px 12px; }
.hpc__tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px; border-radius: 7px; background: #fff; color: var(--ink);
  font: 700 12px/1.2 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
/* the text on navy */
.hpc__body { grid-row: 3; grid-column: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; overflow: hidden; padding: 12px 15px 11px;
  border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #003e52 0%, #002f3f 100%); color: #fff; }
.hpc__name { display: -webkit-box; overflow: hidden; flex: none; color: #fff; font: 700 16px/1.25 "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif;
  letter-spacing: -.008em; text-wrap: pretty; hyphens: manual; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.hpc__sub { display: -webkit-box; overflow: hidden; color: rgb(255 255 255 / .82); font: 400 14px/1.36 "Theme-Font", Inter, system-ui, sans-serif;
  text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hpc__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
/* polish round: the facts wrap instead of being cut ("08:30–17:00 · auf Englisch" beside "Zur Fortbildung") */
.hpc__facts { min-width: 0; overflow: hidden; color: rgb(255 255 255 / .74); text-wrap: pretty; font: 500 13px/1.3 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__go { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--acc); font: 600 13px/1.3 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__go svg { width: 10px; height: 10px; transition: translate .25s var(--out); }
.hpc__card:hover .hpc__go { text-decoration: underline; text-underline-offset: 3px; }
.hpc__card:hover .hpc__go svg { translate: 3px 0; }
.hpc__card:hover .hpc__img { scale: 1.03; }
.hpc__img { transition: opacity .5s ease, scale .9s var(--out), transform 1.2s var(--out); }

/* ---------- the rail: one tick per course, the counter, the controls ---------- */
.hpc__rail { margin-top: 20px; }
.hpc__ticks { display: flex; gap: 4px; height: 4px; }
.hpc__tick { position: relative; flex: 1 1 0; overflow: hidden; border-radius: 2px; background: rgb(0 62 82 / .13); }
.hpc__tick i { position: absolute; inset: 0; border-radius: inherit; background: rgb(0 62 82 / .5); transform: scaleX(0); transform-origin: 0 50%; }
.hpc__tick.is-done i { transform: scaleX(1); }
.hpc__tick.is-in i { background: rgb(0 171 227 / .4); transform: scaleX(1); }
.hpc__tick.is-now i { background: var(--acc); transform: scaleX(1); }
.hpc.is-auto .hpc__tick.is-now i { animation: hpc-fill var(--sec, 6s) linear forwards; }
.hpc.is-auto.is-held .hpc__tick.is-now i { animation-play-state: paused; }
@keyframes hpc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hpc__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.hpc__count { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin: 0 !important; color: var(--ink); font: 600 14px/1.3 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hpc__pos { flex: none; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.hpc__pos b { color: var(--ink); font-weight: 700; }
.hpc__of { margin: 0 3px; }
.hpc__ctrl { display: flex; flex: none; gap: 8px; }
.hpc__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgb(0 62 82 / .18); border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 6px 14px -10px rgb(0 33 44 / .45);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.hpc__btn svg { width: 18px; height: 18px; }
.hpc__btn:hover { border-color: var(--acc); color: var(--acc); }
.hpc__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hpc__btn:active { background: #eef9fd; }
.hpc__i-play { display: none; }
.hpc__btn--play.is-off .hpc__i-play { display: block; }
.hpc__btn--play.is-off .hpc__i-pause { display: none; }
/* without script there is nothing to control: the rail keeps its room (no shift when the script starts) */
.hpc:not(.is-live) .hpc__ticks, .hpc:not(.is-live) .hpc__ctrl, .hpc:not(.is-live) .hpc__pos { visibility: hidden; }
.hpc__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the row (without script, and under 700 px): the cards side by side, scrolling natively ---------- */
.hpc__deck { --W: round(down, calc((100cqw - 3 * var(--dx) - (var(--k) - 1) * var(--gap)) / var(--k)), 1px);   /* whole pixels: tab, picture and card edges line up */ --H: calc(var(--tab) + var(--W) * .5625 + var(--txt));
  display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 4px 2px 22px; margin: calc(var(--dy) * 3 - 4px) -2px -22px; }
.hpc__deck::-webkit-scrollbar { display: none; }
/* the same card size as in the deck (no shift when the script lays the deck out); the next card peeks in at the right */
.hpc__slide { flex: 0 0 var(--W); scroll-snap-align: start; min-width: 0; }
.hpc__slide .hpc__card { min-height: var(--H); }

/* ---------- the deck (from 700 px, with script): k cards in front, the deck waiting behind the last one ---------- */
.hpc.is-deck .hpc__deck { position: relative; display: block; overflow: visible; height: var(--H); margin: calc(var(--dy) * 3) 0 0; padding: 0; touch-action: pan-y; }
.hpc.is-deck .hpc__slide { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform-origin: 100% 0;
  transform: translate(calc(var(--r, 0) * (var(--W) + var(--gap)) + var(--s, 0) * var(--dx)), calc(var(--s, 0) * var(--dy) * -1)) scale(calc(1 - var(--s, 0) * .04));
  /* polish round (the owner: "the appearance of the next card on the stack seems strange"): one physical gesture. The top
     card of the deck is a real card while it waits (picture, tab and text there, a step smaller and slightly dimmed); on a
     step it slides out into the last place and grows to full size in one soft ease-out, while the others move one place
     with the same timing and the deck behind closes up by one step. Nothing on it arrives late. */
  --deal: .46s cubic-bezier(.22, .61, .36, 1);
  transition: transform var(--deal), opacity .3s ease; }
.hpc.is-deck .hpc__slide .hpc__card { min-height: 0; }
.hpc.is-deck .hpc__slide[data-d="in"] { z-index: 10; }
.hpc.is-deck .hpc__slide[data-d="d1"] { z-index: 9; }
.hpc.is-deck .hpc__slide[data-d="d2"] { z-index: 8; }
.hpc.is-deck .hpc__slide[data-d="d3"] { z-index: 7; }
.hpc.is-deck .hpc__slide[data-d="d4"] { z-index: 6; opacity: 0; }
.hpc.is-deck .hpc__slide[data-d="far"] { display: none; }
/* before the script has laid the deck out (the stage is still invisible): the same boxes already, so the start of the
   deck moves nothing in the layout (no layout shift; the cards only get their transforms) */
@media (min-width: 700px) {
  html.hpc-js .hpc:not(.is-live) .hpc__deck { position: relative; display: block; overflow: visible; height: var(--H); margin: calc(var(--dy) * 3) 0 0; padding: 0; }
  html.hpc-js .hpc:not(.is-live) .hpc__slide { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); }
}
/* dealt off: the leftmost card tips forward and drops away to the lower left, gone before the row has settled */
.hpc.is-deck .hpc__slide[data-d="out"] { z-index: 11; transform: translate(-30%, 72px) rotate(-7deg) scale(.95); opacity: 0;
  transition: transform .5s cubic-bezier(.3, .55, .4, 1), opacity .22s cubic-bezier(.4, 0, 1, 1); }
.hpc.is-deck .hpc__slide.no-t, .hpc.is-deck .hpc__slide.no-t * { transition: none !important; }
/* the waiting cards recede (a pale veil, deeper is paler) and keep their text back */
.hpc.is-deck .hpc__card::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 14px; background: #e6f5fc; opacity: 0; pointer-events: none; transition: opacity var(--deal); }
.hpc.is-deck .hpc__slide[data-d="d1"] .hpc__card::after { opacity: .16; }
.hpc.is-deck .hpc__slide[data-d="d2"] .hpc__card::after { opacity: .34; }
.hpc.is-deck .hpc__slide[data-d="d3"] .hpc__card::after, .hpc.is-deck .hpc__slide[data-d="d4"] .hpc__card::after { opacity: .5; }
/* a waiting card lies lower: its shadow is smaller and grows as it comes out */
.hpc.is-deck .hpc__card { transition: filter var(--deal); }
.hpc.is-deck .hpc__slide:not([data-d="in"]):not([data-d="out"]) .hpc__card { filter: drop-shadow(0 4px 6px rgb(0 33 44 / .12)) drop-shadow(0 1px 2px rgb(0 33 44 / .06)); }
.hpc.is-deck .hpc__slide:not([data-d="in"]) .hpc__card { pointer-events: none; }
/* (polish round: the waiting cards keep picture, tab and text; nothing is revealed late when one comes off the deck) */
.hpc.is-deck :is(.hpc__body > *, .hpc__tags, .hpc__band > *) { transition: opacity .12s linear; }
.hpc.is-deck .hpc__slide[data-d="out"] :is(.hpc__body > *, .hpc__tags, .hpc__band > *) { opacity: 0; transition: opacity .12s linear; }
/* the entrance once per page load: the cards lay themselves down from left to right */
.hpc.is-deck.is-enter .hpc__slide { opacity: 0; transform: translate(calc(var(--r, 0) * (var(--W) + var(--gap)) + var(--s, 0) * var(--dx)), 30px) scale(.97); transition: none; }
/* reduced motion: no movement, the row cross-fades (stage.js fades it out and in around a change) */
.hpc.is-rm .hpc__slide, .hpc.is-rm .hpc__img, .hpc.is-rm .hpc__body > *, .hpc.is-rm .hpc__tags, .hpc.is-rm .hpc__band > * { transition-property: opacity !important; transition-delay: 0s !important; }
.hpc.is-rm.is-deck .hpc__slide[data-d="out"] { transform: none; }
.hpc.is-rm.is-deck .hpc__img, .hpc.is-rm.is-deck :is(.hpc__body > *, .hpc__tags, .hpc__band > *) { transform: none !important; }
.hpc.is-rm .hpc__deck.is-swap .hpc__slide { opacity: 0 !important; transition: opacity .18s ease !important; }

/* ---------- the quick entries (chips with counts) and the Inhouse link ---------- */
.hpc-side { position: relative; z-index: 4; }
.hpc-side__in { width: 100%; max-width: 1280px; margin: 0 auto; padding: 16px var(--pad) 0; }
/* while the hero's text waits for its web fonts (fontwait.js), the parts below it wait too: the font swap moves them */
html.nw-fw .hpc-side, html.nw-fw .hpc, html.nw-fw .hpc-ph { visibility: hidden; }
.hpc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hpc-chips > li { margin: 0; padding: 0; }
.hpc-chips > li::before { content: none; }
.hpc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 7px 0 12px; border: 1px solid rgb(0 62 82 / .16); border-radius: 10px;
  background: #fff; color: var(--ink) !important; text-decoration: none !important; white-space: nowrap;
  font: 600 14px/1.2 "Theme-Font", Inter, system-ui, sans-serif; box-shadow: 0 4px 12px -10px rgb(0 33 44 / .4);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.hpc-chip__c { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; background: #e6f6fd; color: #00658a;
  font: 700 13px/1 "Theme-Font", Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.hpc-chip__short { display: none; }
/* the short forms where the row is narrow: beside the headline at 1100 to 1199 px and on phones */
@media (min-width: 1100px) and (max-width: 1199.98px), (max-width: 639.98px) { .hpc-chip__long { display: none; } .hpc-chip__short { display: inline; } }
.hpc-chip:hover { border-color: var(--acc); box-shadow: 0 6px 16px -10px rgb(0 62 82 / .45); }
.hpc-chip:hover .hpc-chip__c { background: #d4effb; }
.hpc-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hpc-chip:active { background: #f4fbfe; }
.hpc-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--acc) !important; text-decoration: none !important;
  font: 700 15px/1.35 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc-all:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.hpc-all__arrow { width: 12px; height: 12px; flex: none; transition: translate .2s ease; }
.hpc-all:hover .hpc-all__arrow { translate: 3px 0; }
.hpc-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.hpc-inhouse { margin-top: 8px; }

/* ---------- widths ---------- */
@media (min-width: 900px) {
  .hpc { padding: 22px 0 16px; }   /* the cards' tabs 40 px below the taller column; a lower hero (polish round) */
  /* one line: the counter, the ticks, the controls */
  .hpc__rail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; margin-top: 16px; }
  .hpc__ticks { grid-column: 2; grid-row: 1; }
  .hpc__bar { display: contents; }
  .hpc__count { grid-column: 1; grid-row: 1; }
  .hpc__ctrl { grid-column: 3; grid-row: 1; }
}
@media (min-width: 700px) and (max-width: 899.98px) { .hpc { padding: 30px var(--pad) 0; } }
@media (max-width: 699.98px) {
  .hpc { padding-top: 24px; }
  .hpc__deck { gap: var(--pad); margin: -4px 0 -22px; padding: 4px var(--pad) 22px; scroll-padding-inline: var(--pad); }
  .hpc__slide { flex-basis: min(86%, 420px); }
  .hpc__slide .hpc__card { min-height: 0; }
  .hpc__rail { padding: 0 var(--pad) 36px; }
}
/* phones: the chips as one row that scrolls sideways (no wrap), the Inhouse link under them */
@media (max-width: 899.98px) {
  .hpc-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad) 4px; }
  .hpc-chips::-webkit-scrollbar { display: none; }
  .hpc-chips > li { flex: none; }
}
@media (max-width: 639.98px) { .hpc-chip { min-height: 40px; padding-left: 12px; } }
@media (max-width: 479.98px) {
  .hpc__sub { display: none; }
  /* a large headline (the site theme sets 36 px at 390) must not break inside "Materialwissenschaft": real hyphenation */
  .hpp--courses .hpp__h1 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 3 12; }
}
@media (prefers-reduced-motion: reduce) {
  .hpc__deck { scroll-behavior: auto; }
  html.hpc-js .hpc__img { transition: none; }
}

/* ---------- the photographs of people in DGM courses (round 5; polish round 2026-11-13) ----------
   The element's first three photographs as one deliberate row beside the headline from 900 px: one height (stage.js
   fits it, 112 to 148 px), the course group in its wide crop in the middle and a step (12 px) higher, the lecturer and
   the participants in their upright crops beside it, overlapping evenly by 16 px; the cards' radius, a 3 px white edge
   and one soft offset shadow on each, no rotation. The group's top sits on the headline's cap height, its right edge on
   the content's right edge (above the search), at least 40 px from the headline's words and ending 40 px above the
   search label. stage.js shows three from 1281 px, two below, one or none when the room is short. It enters once with a
   short stagger (not with reduced motion). Without script the group stays hidden (the hero reads complete without it).
   Under 900 px: a strip of three equal photographs between lead and search, same radius, edge and shadow. */
.hpc-ph { position: relative; min-width: 0; min-height: 0; }
.hpc-ph__box { position: absolute; right: 0; top: calc(var(--ph-top, 0) * 1px); display: flex; align-items: flex-start; visibility: hidden; }
.hpc-ph.is-fit .hpc-ph__box { visibility: visible; }
.hpc-ph__i { --r: .8; position: relative; z-index: 1; flex: none; display: block; box-sizing: border-box; overflow: hidden;
  width: calc(var(--ph-h, 140) * var(--r) * 1px); height: calc(var(--ph-h, 140) * 1px); margin-top: 12px;
  border: 3px solid #fff; border-radius: 16px; background: #dcebf2; box-shadow: 0 12px 26px -12px rgb(0 33 44 / .4); }
.hpc-ph__i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hpc-ph__i--1 { --r: 1.5; z-index: 2; order: 2; margin-top: 0; }
.hpc-ph__i--2 { order: 1; }
.hpc-ph__i--3 { order: 3; margin-left: -16px; }
.hpc-ph:is([data-show="2"], [data-show="3"]) .hpc-ph__i--1 { margin-left: -16px; }
.hpc-ph[data-show="1"] .hpc-ph__i--1 { margin-left: 0; }
.hpc-ph[data-show="2"] .hpc-ph__i--3, .hpc-ph[data-show="1"] :is(.hpc-ph__i--2, .hpc-ph__i--3) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hpc-ph.is-fit.is-in .hpc-ph__i { animation: hpc-ph-in .65s var(--out) backwards; }
  .hpc-ph.is-fit.is-in .hpc-ph__i--1 { animation-delay: .08s; }
  .hpc-ph.is-fit.is-in .hpc-ph__i--3 { animation-delay: .16s; }
}
@keyframes hpc-ph-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 899.98px) {
  .hpc-ph { margin-top: 24px; }
  .hpc-ph__box { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; height: clamp(96px, 16vw, 132px); visibility: visible; }
  .hpc-ph__i, .hpc-ph[data-show] .hpc-ph__i { width: auto; height: 100%; margin: 0; box-shadow: 0 8px 18px -10px rgb(0 33 44 / .4); }
  /* the upright crops in a wider box: keep the heads (they sit in the upper third) */
  .hpc-ph__i:is(.hpc-ph__i--2, .hpc-ph__i--3) img { object-position: 50% 18%; }
  .hpc-ph__i--1 img { object-position: 50% 30%; }
}

/* ---------- fix round r3 (2026-11-14): one facts line, the people, the waiting cards' tabs, contrast ----------
   The card's text block: name (3 lines at most), the one line (2), the facts in one format ("2 Tage · Aachen",
   "1 Tag · Online", "3 Tage · Saarbrücken und online · auf Englisch"; the tab carries the date alone) with the way in as a
   filled arrow beside them, then under a hairline the stack of up to three portraits with the first person's name (two
   lines at most, never an ellipsis in a name). The block's fixed height (216 px) holds the longest case, so nothing is cut. */
.hpc { --txt: 216px; }
.hpc__body { gap: 6px; }
.hpc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 2px; }
.hpc__facts { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hpc__go { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #00abe3; color: #fff; }
.hpc__go svg { width: 11px; height: 11px; }
.hpc__card:hover .hpc__go { text-decoration: none; background: #0096c8; }
.hpc__pp { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; min-height: 34px; margin-top: 4px; padding-top: 9px; border-top: 1px solid rgb(255 255 255 / .14); }
.hpc__faces { display: flex; flex: none; }
.hpc__face { display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #003e52; background: #0b5a76; }
.hpc__face + .hpc__face { margin-left: -7px; }
.hpc__face--ini { display: grid; place-items: center; color: #fff; font: 700 11px/1 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__ppn { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-width: 0; color: rgb(255 255 255 / .86);
  font: 500 13px/1.3 "Theme-Font", Inter, system-ui, sans-serif; text-wrap: balance; hyphens: manual; }
.hpc__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the waiting cards (behind the fourth) keep the tab's edge, not its words: they collided with the card in front */
.hpc.is-deck .hpc__slide:is([data-d="d1"], [data-d="d2"], [data-d="d3"], [data-d="d4"]) .hpc__band > * { opacity: 0; }
/* the caption under the deck: "Beliebt" where the row is narrow (phones), the full words for screen readers */
.hpc__title-s { display: none; }
@media (max-width: 699.98px) {
  .hpc__title-s { display: inline; }
  .hpc__title-l { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* the quick entries on phones: 44 px touch targets */
@media (max-width: 899.98px) { .hpc-chip { min-height: 44px; } }
/* ---------- fix round r3: nothing beside the headline (the owner: "Nothing beside it"; option figure = none) ----------
   Two balanced columns from 1100 px: left the headline (three lines), the lead and the Inhouse link (600 px at the
   1152 px column); right the search block (label, the 520 px field, the chips) on the content's right edge, centred
   against the whole left column. The deck 40 px below the taller column. A lower card picture (2:1) and a one-line
   subtitle on the deck from 1100 px keep all four cards on a 1440 × 900 screen. */
@media (min-width: 1100px) {
  .hpp.hpp--courses:not(:has(.hpd-w)) { --top: 32px; grid-template-columns: 1fr minmax(0, calc(var(--cw) - 552px)) 552px 1fr; }
  .hpp--courses:not(:has(.hpd-w)) .hpp__lead { margin-top: 24px; }
  .hpp--courses:not(:has(.hpd-w)) .hpp__h1 { max-width: none; }
  .hpp--courses .hpc { --txt: 200px; }
  .hpp--courses .hpc__pic { aspect-ratio: 2 / 1; }
  .hpp--courses .hpc__deck { --H: calc(var(--tab) + var(--W) * .5 + var(--txt)); }
  .hpp--courses .hpc__sub { -webkit-line-clamp: 1; }
}
/* ---------- r3, the owner: "the leaders only show first name if multiple leaders, just show the avatar and ... tooltip
   hover with name and company" ----------
   One person: portrait and name (two lines at most). Several: portraits only, up to four (28 px, a 2 px white ring,
   overlapping by 8 px), then "+n" in the same disc; each portrait names its person in a tooltip (tip.js, tip.css), the
   "+n" disc lists the rest. The card's link describes all of them ("Leitung: …") for screen readers. */
.hpc__pp { min-height: 38px; }
.hpc__faces { display: flex; flex: none; align-items: center; }
.hpc__face { position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box; width: 28px; height: 28px; overflow: hidden;
  border-radius: 50%; background: #0b5a76; box-shadow: 0 0 0 2px #fff; color: #fff; font: 700 11px/1 "Theme-Font", Inter, system-ui, sans-serif; }
.hpc__face + .hpc__face { margin-left: -8px; }
.hpc__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hpc__face--more { background: #e6f6fd; color: #003e52; font-size: 11.5px; letter-spacing: -.02em; }
.hpc__pp:not(.is-one) .hpc__face { cursor: default; }

/* ---------- r3: the living ground (ground.js) and the inviting search (invite.js) ----------
   The canvas lies behind everything in the hero (its own stacking context; the text, the search and the deck paint
   above it), over the padding box only (the header zone stays plain), and takes no pointer events. It fades in once
   drawn; without script it stays empty and the plain pale ground shows. */
.hpp--courses:has(> .hpg) { position: relative; isolation: isolate; }
.hpg { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.hpg.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hpg { transition: none; } }
/* the quick entries: a short staggered entrance once the fonts are in, and a clear hover (the count fills cyan) */
@media (prefers-reduced-motion: no-preference) {
  html.hpc-js:not(.nw-fw) .hpc-chips > li { animation: hpc-chip-in .5s cubic-bezier(.16, 1, .3, 1) backwards; }
  html.hpc-js:not(.nw-fw) .hpc-chips > li:nth-child(2) { animation-delay: .07s; }
  html.hpc-js:not(.nw-fw) .hpc-chips > li:nth-child(3) { animation-delay: .14s; }
  html.hpc-js:not(.nw-fw) .hpc-chips > li:nth-child(4) { animation-delay: .21s; }
}
@keyframes hpc-chip-in { from { opacity: 0; transform: translateY(8px); } }
.hpc-chip__c { transition: background-color .16s ease, color .16s ease; }
.hpc-chip:hover .hpc-chip__c, .hpc-chip:focus-visible .hpc-chip__c { background: #00abe3; color: #fff; }

/* director, 2026-11-14. The owner: hover transitions and transforms had no duration and no easing (the arrow's colour
   snapped, the card did not answer). Every hover change of a front card now runs over a short time with ease-in-out:
   the card lifts 4 px, the arrow button fills and grows a little, the picture scales calmly, a portrait rises. */
.hpc.is-deck .hpc__slide[data-d="in"] .hpc__card { transition: filter var(--deal), transform .24s ease-in-out; }
.hpc__go { transition: background-color .2s ease-in-out, transform .2s ease-in-out; }
.hpc__go svg { transition: translate .2s ease-in-out; }
.hpc__img { transition: opacity .5s ease, scale .45s ease-in-out, transform 1.2s var(--out); }
.hpc__face { transition: transform .18s ease-in-out; }
@media (hover: hover) {
  .hpc.is-deck .hpc__slide[data-d="in"] .hpc__card:hover { transform: translateY(-4px); }
  .hpc__card:hover .hpc__go { transform: scale(1.08); }
  .hpc__face:hover { transform: translateY(-2px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hpc.is-deck .hpc__slide[data-d="in"] .hpc__card, .hpc__go, .hpc__go svg, .hpc__face { transition: none; }
  .hpc.is-deck .hpc__slide[data-d="in"] .hpc__card:hover, .hpc__card:hover .hpc__go, .hpc__face:hover { transform: none; }
}

/* director, 2026-11-14. The owner: "the date pill should overlap the image a little so it looks more connected. the
   disappearing, falling animation looks a little unpolished, should be a little bit 3d and the new card sliding in
   should be above the disappearing one".
   1 The date is a pill that sits half on the picture: the card's first row is only the part that stands out above the
     picture (--tab), the pill keeps its own height (--pill) and reaches into the picture, set in from the corner. The
     picture has both top corners round now (no tab covers the left one). The waiting cards show no pill (their words
     were hidden already; the empty white shapes behind the last card were clutter): it fades in as the card comes out. */
.hpc { --pill: 34px; --tab: 16px; }
.hpc__band { position: relative; z-index: 3; align-self: start; height: var(--pill); margin-left: 14px; max-width: calc(100% - 28px); border-radius: 999px;
  box-shadow: 0 1px 2px rgb(0 33 44 / .1), 0 5px 14px rgb(0 33 44 / .16); }
.hpc__pic { border-radius: 14px 14px 0 0; }
.hpc.is-deck .hpc__band { transition: opacity .22s ease-in-out; }
.hpc.is-deck .hpc__slide:is([data-d="d1"], [data-d="d2"], [data-d="d3"], [data-d="d4"]) .hpc__band { opacity: 0; }
/* 2 Dealt off: the card no longer drops in front of the row. It lies UNDER the row now and turns away like a door hinged
     at its left edge: it moves out to the left, its right edge swings back into the depth (under the next card, which
     slides over it into the first place), it dims and is gone before the row has settled. Its words stay on it while it
     goes (a card being covered, not a card being emptied). The step back runs the same way in reverse: the card swings
     in from behind at the left. The transform keeps the slide's transform-origin (100% 0, the deck's scaling needs it)
     and moves the vanishing point to the card's middle and the hinge to its left edge by translations around
     perspective() and rotateY(), so nothing jumps when the state changes. */
.hpc.is-deck .hpc__slide[data-d="out"] { z-index: 5; opacity: 0;
  transform: translate(-50%, 50%) perspective(1000px) translate(50%, -50%) translate3d(-27%, 6px, -60px) translate(-100%, 50%) rotateY(32deg) scale(.96) translate(100%, -50%);
  transition: transform .52s cubic-bezier(.3, .6, .3, 1), opacity .3s cubic-bezier(.4, 0, 1, 1) .17s; }
.hpc.is-deck .hpc__slide[data-d="out"] :is(.hpc__body > *, .hpc__tags, .hpc__band > *) { opacity: 1; }
.hpc.is-deck .hpc__slide[data-d="out"] .hpc__card::after { opacity: .3; }
.hpc.is-deck .hpc__slide[data-d="out"] .hpc__card { filter: drop-shadow(0 4px 6px rgb(0 33 44 / .12)) drop-shadow(0 1px 2px rgb(0 33 44 / .06)); }
/* 3 The owner, the same day: "the subname should be line clamp 2". From 1100 px the subtitle had one line (fix round r3,
     to keep four cards on a 1440 x 900 screen); it has two again. The text part grows by one line (200 to 220 px); the
     card as a whole stays as high as before, because the pill's row above the picture lost 18 px. */
@media (min-width: 1100px) {
  .hpp--courses .hpc { --txt: 220px; }
  .hpp--courses .hpc__sub { -webkit-line-clamp: 2; }
}