/* Content element dgm_section_hero_people (Veranstaltungen task 17, 2026-11-13): the bright hero with photographs of
   people as prints. Complete in itself (needs no section template); the positions of the prints per arrangement and
   number are in layouts.css (generated by Tools/VeranstaltungenRedesign/tools/hpp-gen.php).
   Text block: the family's hero measures (dgm_section_hero_photos / dgm_section_head): left edge = the 1280px box with
   64px padding (24px below 1024, 20px below 640), pill top 168px from 1024px up, h1 clamp(1.75rem, 3.65vw, 3.3rem)/1.05
   900 in navy, lead clamp(1.02rem, 1.25vw, 1.18rem)/1.62, buttons 49.6px, radius 10; hero 672px from 1024px up.
   Ground: white into sky (#f4fbfe, #e6f6fd), still; its top is the bright family
   head's top tone, so the site header (bright mode, dark menu) sits on it without a seam.
   Task 22 (agent D, 2026-11-13, "authored, not generated"): the stock ornament is gone (four-point sparkle, dotted arc,
   drifting blobs, pulse dot, the offset-less cyan glow under the filled button). Instead one hand-drawn line figure from
   materials science tucked behind a print (.hpp__fig, option "figure"), the list "Als Nächstes" under the buttons
   (.hpp__next), two more arrangements of three prints (layouts.css). Type: nothing under 12px, whole pixels.
   Prints: white edge 6px, radius 20px, a soft shadow in three layers, tilted at most 6 degrees, overlapping. Each print
   is four boxes, each with one job, so the motions never fight over one transform:
     .hpp__slot   place, size, stacking, the pointer shift (translate, 8px at most)
     .hpp__settle the entrance (CSS, a small spring)            .hpp__float  the float (CSS, own period per print)
     .hpp__turn   the turn to the next picture (CSS keyframes)  .hpp__print  tilt, edge, shadow; straightens and lifts
   Motion only under html.hpp-m (set in <head> by motion.js unless reduced motion) and prefers-reduced-motion:
   no-preference. Without script or with reduced motion everything stands in place. */
.hpp {
  --pad: 64px; --top: 168px; --copy: calc((min(100cqw, 1280px) - 180px) * 7 / 12);
  --ink: #003e52; --text: #475569; --acc: #00abe3;
  --spring: linear(0, 0.0898, 0.2906, 0.5217, 0.7321, 0.8962, 1.0069, 1.0689, 1.093, 1.0915, 1.0756, 1.0541, 1.0329, 1.0155, 1.0029, 0.9953, 0.9917, 0.9911, 0.9921, 0.994, 0.9961, 0.9979, 0.9993, 1.0002, 1);
  --lift: cubic-bezier(.16, 1, .3, 1);   /* the lift under the pointer: an exponential ease-out, no overshoot (task 22) */
  container: hpp / inline-size;
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; margin: 0; color: var(--ink);
  font-family: "Theme-Font", Inter, system-ui, sans-serif;
  background-color: #f4fbfe;
  background: linear-gradient(180deg, #f7fcfe 0%, #f3fafd 38%, #eaf7fd 72%, #e3f4fc 100%);
}
.hpp *, .hpp *::before, .hpp *::after { box-sizing: border-box; }
/* placed as a content element: its frame runs the full width with no outer spacing, as the family's heroes do */
#crm__widgets .frame:has(> .hpp) { max-width: none; width: auto; margin: 0; padding: 0; }
.hpp a { text-decoration: none; }
.hpp p { margin: 0; }

/* ---------- the ground: the still sky of .hpp itself (task 22: the layer of blobs is gone, no washes) ---------- */

/* ---------- the text block (the family's measures, navy on the bright ground) ---------- */
.hpp__inner { position: relative; z-index: 3; width: 100%; max-width: 1280px; min-height: 672px; margin: 0 auto;
  padding: var(--top) var(--pad) 64px; pointer-events: none; }
.hpp__copy { position: relative; z-index: 4; width: var(--copy); max-width: 100%; pointer-events: auto; }
html.nw-fw .hpp__copy { visibility: hidden; }
.hpp__eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem !important; padding: .4rem .85rem .4rem .7rem; vertical-align: top;
  border: 1px solid rgb(0 171 227 / .34); border-radius: 999px; background: rgb(255 255 255 / .78); color: #00475e !important;
  font: 800 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 18px -12px rgb(0 62 82 / .35); transition: border-color .2s ease, background-color .2s ease; }
a.hpp__eyebrow:hover { border-color: var(--acc); background: #fff; }
a.hpp__eyebrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hpp__back { display: inline-flex; width: .62rem; height: .62rem; color: var(--acc); transition: transform .2s ease; }
.hpp__back svg { width: 100%; height: 100%; }
a.hpp__eyebrow:hover .hpp__back { transform: translateX(-2px); }
.hpp__h1 { max-width: 680px; margin: 0; color: var(--ink); font-family: "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.65vw, 3.3rem); font-size: round(nearest, clamp(1.75rem, 3.65vw, 3.3rem), 1px); font-weight: 900; line-height: 1.05; letter-spacing: -.015em; text-wrap: balance;
  hyphens: manual; overflow-wrap: break-word; }
/* the accent part: on a line of its own, in the family's cyan as the headline accents of the start page (director,
   2026-11-13, after the line under it was removed) */
.hpp__accent { display: block; margin-top: .06em; color: #00abe3; }
.hpp__mark { }   /* the hand-drawn line under the headline was removed on the user's word, 2026-11-13 ("no line below the text") */
.hpp__lead { max-width: 540px; margin-top: 1.5rem; color: var(--text); font-size: clamp(1.02rem, 1.25vw, 1.18rem); font-size: round(nearest, clamp(1.02rem, 1.25vw, 1.18rem), 1px); line-height: 1.62; text-wrap: pretty; }
.hpp__lead p + p { margin-top: .6em; }
.hpp__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.hpp__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; padding: .8rem 1.4rem;
  border-radius: 10px; font-size: 1rem; font-weight: 800; letter-spacing: .01em; line-height: 1.2; text-decoration: none;
  transition: box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.hpp__btn i { display: inline-block; width: 1.1em; font-size: 1rem; text-align: center; }
/* a real shadow: offset and blur, tinted from the navy of the ground (no cyan glow) */
.hpp__btn--primary { background: var(--acc); color: #fff !important; box-shadow: 0 1px 2px rgb(0 62 82 / .16), 0 6px 14px -6px rgb(0 62 82 / .3); }
.hpp__btn--primary:hover, .hpp__btn--primary:focus-visible { background: #007aa8; color: #fff !important; box-shadow: 0 1px 2px rgb(0 62 82 / .18), 0 9px 18px -7px rgb(0 62 82 / .36); }
.hpp__btn--secondary { border: 1px solid rgb(0 62 82 / .26); background: rgb(255 255 255 / .8); color: var(--ink) !important; }
.hpp__btn--secondary:hover, .hpp__btn--secondary:focus-visible { border-color: var(--acc); background: #fff; color: var(--ink) !important; }
.hpp__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- "Als Nächstes": the next dates of the CRM under the buttons (the bright relative of the start page's
   "Als Nächstes im Kalender": a date block, the name, the place; rows on a hairline, the active one cyan) ---------- */
.hpp__next { max-width: 460px; margin-top: 28px; }
.hpp__nexthead { margin: 0 0 4px !important; color: var(--text); font: 600 14px/1.35 "Theme-Font", Inter, system-ui, sans-serif; }
.hpp__nextlist { margin: 0; padding: 0; list-style: none; }
.hpp__nextlist > li { margin: 0; padding: 0; }
.hpp__nextlist > li::before { content: none; }
.hpp__ni { display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; align-items: center; gap: 14px; padding: 10px 2px 10px 0;
  color: var(--ink) !important; text-decoration: none; box-shadow: inset 0 1px 0 rgb(0 62 82 / .14); transition: box-shadow .3s ease; }
a.hpp__ni:hover { box-shadow: inset 0 2px 0 var(--acc); }
a.hpp__ni:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.hpp__nd { display: block; color: var(--text); font: 600 12px/1.25 "Theme-Font", Inter, system-ui, sans-serif; }
.hpp__nd b { display: block; color: var(--ink); font: 700 20px/1.1 "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif; letter-spacing: -.014em; }
.hpp__nd--run b { color: var(--ink); font: 700 14px/1.2 "Theme-Font", Inter, system-ui, sans-serif; letter-spacing: 0; }
.hpp__nm { display: block; min-width: 0; }
.hpp__nt { display: -webkit-box; overflow: hidden; color: var(--ink); font: 600 15px/1.35 "Theme-Font", Inter, system-ui, sans-serif; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: pretty; }
.hpp__np { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; margin-top: 2px; color: var(--text); font: 500 13px/1.4 "Theme-Font", Inter, system-ui, sans-serif; }
.hpp__ndot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--acc)); }
.hpp__nu::before { content: "·"; margin-right: 7px; }
.hpp__narrow { width: 12px; height: 12px; color: var(--acc); transition: translate .2s ease; }
a.hpp__ni:hover .hpp__narrow { translate: 3px 0; }
/* below the short list: how many further events there are, the link leads to the calendar (the primary button's
   target); the owner, 2026-11-13 */
.hpp__more { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 10px 2px 2px 0;
  box-shadow: inset 0 1px 0 rgb(0 62 82 / .14); color: var(--acc) !important; text-decoration: none;
  font: 600 14px/1.35 "Theme-Font", Inter, system-ui, sans-serif; }
a.hpp__more:hover { text-decoration: underline; text-underline-offset: 3px; }
a.hpp__more:hover .hpp__narrow { translate: 3px 0; }
a.hpp__more:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.hpp__vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the board of prints (beside the text from 900px; positions in layouts.css) ---------- */
.hpp__art { position: absolute; z-index: 2; top: 84px; bottom: 26px;
  left: calc(max(0px, (100cqw - 1280px) / 2) + var(--pad) + 540px + 44px); right: max(8px, calc((100cqw - 1280px) / 2 - 6px));
  container-type: size; display: grid; place-items: center; pointer-events: none; }
.hpp__board { --ar: 1.15; position: relative; width: min(100cqw, 100cqh * 1.15); aspect-ratio: 1.15; pointer-events: none; }
.hpp__slot { position: absolute; left: calc(var(--x, 50) * 1%); top: calc(var(--y, 50) * 1%); width: calc(var(--w, 30) * 1%);
  z-index: var(--z, 1); pointer-events: auto;
  translate: calc(-50% + var(--mx, 0px) * var(--d, 1)) calc(-50% + var(--my, 0px) * var(--d, 1));
  transition: translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.hpp__slot--print { --a: .8; } .hpp__slot--wide { --a: 1.5; } .hpp__slot--square { --a: 1; }
.hpp__slot:hover, .hpp__slot:focus-within { z-index: 30; }
.hpp__settle, .hpp__float, .hpp__turn { display: block; }
.hpp__print { position: relative; display: block; aspect-ratio: var(--a); padding: 6px; border-radius: 20px; background: #fff;
  rotate: var(--r, 0deg);
  box-shadow: 0 0 0 1px rgb(0 62 82 / .05), 0 1px 2px rgb(0 33 44 / .08), 0 10px 22px -10px rgb(0 33 44 / .26), 0 26px 48px -26px rgb(0 62 82 / .34);
  transition: rotate .7s var(--lift), scale .7s var(--lift), translate .7s var(--lift), box-shadow .35s ease; }
.hpp__slot:hover .hpp__print, .hpp__slot:focus-within .hpp__print, .hpp__slot.is-front .hpp__print {
  rotate: 0deg; scale: 1.045; translate: 0 -6px;
  box-shadow: 0 0 0 1px rgb(0 62 82 / .05), 0 2px 4px rgb(0 33 44 / .08), 0 18px 34px -12px rgb(0 33 44 / .3), 0 40px 70px -30px rgb(0 62 82 / .42); }
.hpp__layer { position: absolute; inset: 6px; opacity: 0; visibility: hidden;
  transition: opacity 0s linear var(--sw, 0s), visibility 0s linear var(--sw, 0s); }
.hpp__layer.is-on { opacity: 1; visibility: visible; }
.hpp__photo { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: #dff2fa; }
.hpp__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* day: the print that comes forward lifts further (its turn in the conference day) */
.hpp__board[data-arr="day"] > .hpp__slot.is-front .hpp__print, .hpp__board[data-arr="day"] > .hpp__slot:hover .hpp__print, .hpp__board[data-arr="day"] > .hpp__slot:focus-within .hpp__print { scale: 1.1; translate: 0 -10px; }
.hpp__board[data-arr="day"] > .hpp__slot.is-front { z-index: 25; }
.hpp__board[data-arr="day"]:has(> .hpp__slot:hover, > .hpp__slot:focus-within) > .hpp__slot.is-front:not(:hover):not(:focus-within) { z-index: var(--z, 1); }
.hpp__board[data-arr="day"]:has(> .hpp__slot:hover, > .hpp__slot:focus-within) > .hpp__slot.is-front:not(:hover):not(:focus-within) .hpp__print { rotate: var(--r, 0deg); scale: 1; translate: 0 0; }

/* the stickers: a tilted pill on a soft tint of an event type's colour (about 13 % on white) with a dot of that colour;
   navy text (at least 8:1 on every tint) */
.hpp__slot:nth-of-type(6n+1) { --sc: #00abe3; } .hpp__slot:nth-of-type(6n+2) { --sc: #12a182; } .hpp__slot:nth-of-type(6n+3) { --sc: #7a5ad8; }
.hpp__slot:nth-of-type(6n+4) { --sc: #ee9b1c; } .hpp__slot:nth-of-type(6n+5) { --sc: #e0587c; } .hpp__slot:nth-of-type(6n+6) { --sc: #00abe3; }
.hpp__board[data-arr="day"] > .hpp__slot:nth-of-type(2) { --sc: #7a5ad8; }
.hpp__board[data-arr="day"] > .hpp__slot:nth-of-type(3) { --sc: #ee9b1c; }
.hpp__board[data-arr="day"] > .hpp__slot:nth-of-type(4) { --sc: #12a182; }
.hpp__sticker { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; max-width: calc(100% + 24px); padding: 6px 11px 6px 9px;
  border: 1px solid #cdeefa; border: 1px solid color-mix(in srgb, var(--sc) 30%, #fff); border-radius: 999px;
  background: #e6f6fd; background: color-mix(in srgb, var(--sc) 13%, #fff); color: var(--ink) !important;
  font: 700 13px/1.15 "Theme-Font", Inter, system-ui, sans-serif; letter-spacing: .005em; white-space: nowrap;
  rotate: var(--sr, -3deg); box-shadow: 0 1px 1px rgb(0 33 44 / .06), 0 8px 16px -10px rgb(0 33 44 / .4);
  transition: background-color .2s ease, box-shadow .2s ease; }
.hpp__sdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.hpp__sarrow { flex: none; width: 10px; height: 10px; margin-left: 1px; color: var(--ink); transition: translate .2s ease; }
a.hpp__sticker:hover { background: color-mix(in srgb, var(--sc) 22%, #fff); }
a.hpp__sticker:hover .hpp__sarrow { translate: 2px 0; }
a.hpp__sticker:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the figure: one hand-drawn line figure from materials science (option "figure"), a pencil note tucked behind a print:
   below every print (z-index 1), so it never lies over a face; placed by layouts.css next to a corner or an edge of
   its print and moved with that print by the pointer shift. One stroke weight at every size (2px, non-scaling). */
.hpp__fig { position: absolute; z-index: 1; display: none; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: auto;
  aspect-ratio: 1; overflow: visible; translate: calc(-50% + var(--mx, 0px) * var(--d, 1)) calc(-50% + var(--my, 0px) * var(--d, 1)); rotate: var(--r, 0deg);
  fill: none; stroke: var(--acc); stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
  transition: translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.hpp__fig path { stroke-width: 2px; vector-effect: non-scaling-stroke; }
.hpp__fig .hpp__fig-h { stroke-dasharray: 5 5; }

/* the conference day: a dotted path behind the prints, a small cyan dot travelling on it */
.hpp__path { position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hpp__trail { fill: none; stroke: var(--acc); stroke-width: 4.2; stroke-linecap: round; stroke-dasharray: 0 13; opacity: .85; }
.hpp__dot { fill: var(--acc); stroke: #fff; stroke-width: 4; opacity: 0; transition: opacity .4s ease; filter: drop-shadow(0 1px 2px rgb(0 33 44 / .35)); }
.hpp.is-live .hpp__dot { opacity: 1; }
/* the dot travels above the prints (its own layer), the path stays behind them */
.hpp__dotl { position: absolute; inset: 0; z-index: 28; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (min-width: 900px) and (max-width: 1599.98px) { .hpp__path--land, .hpp__dotl--land { display: block; } }
@media (min-width: 1600px) { .hpp__path--wide, .hpp__dotl--wide { display: block; } }
@media (min-width: 640px) and (max-width: 899.98px) { .hpp__path--strip, .hpp__dotl--strip { display: block; } .hpp__path--strip .hpp__trail { stroke-width: 6; stroke-dasharray: 0 17; } .hpp__dotl--strip .hpp__dot { stroke-width: 5; } }
@media (max-width: 639.98px) { .hpp__path--phone, .hpp__dotl--phone { display: block; } .hpp__path--phone .hpp__trail { stroke-width: 7; stroke-dasharray: 0 20; } .hpp__dotl--phone .hpp__dot { stroke-width: 6; } }

/* ---------- motion (only with html.hpp-m and no reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the entrance: one print after the other, a small spring; --el (set by the script on a copy the page's Vue app puts
     in place later) continues where the first copy was, so nothing settles twice */
  html.hpp-m .hpp__settle { animation: hpp-settle .75s var(--spring) both, hpp-show .32s ease-out both;
    animation-delay: calc(var(--i, 0) * 105ms + 160ms - var(--el, 0ms)); }
  html.hpp-m .hpp__float { animation: hpp-float var(--fd, 7s) ease-in-out calc(var(--fo, 0s) - var(--el, 0ms)) infinite alternate; }
  html.hpp-m .hpp__fig { animation: hpp-show .6s ease-out calc(900ms - var(--el, 0ms)) both; }
  html.hpp-m :is(.hpp__path, .hpp__dotl) { animation: hpp-show .6s ease-out calc(700ms - var(--el, 0ms)) both; }
  html.hpp-m .hpp__turn.is-turn-a { animation: hpp-turn-a .64s both; }
  html.hpp-m .hpp__turn.is-turn-b { animation: hpp-turn-b .64s both; }
  html.hpp-m .hpp__turn.is-turn-a .hpp__layer, html.hpp-m .hpp__turn.is-turn-b .hpp__layer { --sw: .29s; }
}
.hpp__slot:nth-of-type(1) { --i: 0; --fd: 7.2s; --fo: -1.1s; } .hpp__slot:nth-of-type(2) { --i: 1; --fd: 8.4s; --fo: -4.6s; }
.hpp__slot:nth-of-type(3) { --i: 2; --fd: 6.6s; --fo: -2.3s; } .hpp__slot:nth-of-type(4) { --i: 3; --fd: 9.2s; --fo: -6.1s; }
.hpp__slot:nth-of-type(5) { --i: 4; --fd: 7.8s; --fo: -3.4s; } .hpp__slot:nth-of-type(6) { --i: 5; --fd: 8.9s; --fo: -5.2s; }
@keyframes hpp-settle { from { transform: translate3d(0, 34px, 0) scale(.86) rotate(5deg); } to { transform: none; } }
@keyframes hpp-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpp-float { from { transform: translate3d(0, -3px, 0) rotate(-.35deg); } to { transform: translate3d(0, 3.5px, 0) rotate(.35deg); } }
/* the turn to the next picture: edge-on at 45 % (the pictures swap there, --sw), then back with a small overshoot */
@keyframes hpp-turn-a {
  0% { transform: perspective(900px) rotateY(0deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  45% { transform: perspective(900px) rotateY(90deg); }
  45.01% { transform: perspective(900px) rotateY(-90deg); animation-timing-function: cubic-bezier(.15, .7, .3, 1); }
  82% { transform: perspective(900px) rotateY(7deg); animation-timing-function: ease-in-out; }
  100% { transform: perspective(900px) rotateY(0deg); }
}
@keyframes hpp-turn-b {
  0% { transform: perspective(900px) rotateY(0deg); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  45% { transform: perspective(900px) rotateY(-90deg); }
  45.01% { transform: perspective(900px) rotateY(90deg); animation-timing-function: cubic-bezier(.15, .7, .3, 1); }
  82% { transform: perspective(900px) rotateY(-7deg); animation-timing-function: ease-in-out; }
  100% { transform: perspective(900px) rotateY(0deg); }
}

/* ---------- from 1600: the group grows with the page (a wider board, 1.3, reaching into the margin beside the 1280 box) ---------- */
@media (min-width: 1600px) {
  .hpp__art { top: 80px; bottom: 18px; right: calc((100cqw - 1280px) / 2 - 150px); }
  .hpp__board { width: min(100cqw, 100cqh * 1.3); aspect-ratio: 1.3; }
}
/* ---------- 1024 to 1279: the family's 480px text column ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hpp { --copy: min(calc((min(100cqw, 1280px) - 180px) * 7 / 12), 480px); }
  .hpp__art { left: calc(var(--pad) + 480px + 32px); right: 12px; }
}
/* under 1280 the boards are smaller: the stickers a size smaller, so they stay on their own print */
@media (max-width: 1279.98px) { .hpp__sticker { gap: 6px; padding: 5px 9px 5px 8px; font-size: 12px; } }
/* ---------- 900 to 1023: the text column 420px, the board beside it ---------- */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .hpp { --pad: 24px; --top: 116px; --copy: 420px; }
  .hpp__art { left: calc(24px + 420px + 24px); right: 8px; top: 88px; bottom: 32px; }
}
/* ---------- under 900: the text first, then the board below it as a wider strip ---------- */
@media (max-width: 899.98px) {
  .hpp { --pad: 24px; --top: 116px; --copy: 100%; }
  .hpp__inner { min-height: 0; padding-bottom: 0; }
  .hpp__copy { max-width: 620px; }
  .hpp__art { position: relative; inset: auto; z-index: 2; display: block; container-type: normal; max-width: 1280px; margin: 0 auto; padding: 34px var(--pad) 44px; }
  .hpp__board { width: min(100%, 500px); aspect-ratio: 1.37; margin: 0 auto; }
}
@media (max-width: 639.98px) {
  .hpp { --pad: 20px; --top: 84px; }
  .hpp__eyebrow { gap: .45rem; margin-bottom: 1rem !important; padding: .28rem .7rem; font-size: 12px; letter-spacing: .08em; line-height: 1.45; }
  .hpp__lead { margin-top: 1.25rem; font-size: 16px; line-height: 1.55; }
  /* phones: the dates side by side in a row that swipes (as the start page's rail), so the prints stay on the first screen */
  .hpp__next { max-width: none; margin-top: 22px; }
  .hpp__nextlist { display: flex; gap: 14px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .hpp__nextlist::-webkit-scrollbar { display: none; }
  .hpp__nextlist > li { flex: 0 0 min(264px, 76%); scroll-snap-align: start; }
  .hpp__nextlist > li:only-child { flex-basis: 100%; }
  .hpp__ni { height: 100%; align-items: start; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-top: 12px; }
  .hpp__narrow { display: none; }
  .hpp__buttons { flex-direction: column; align-items: stretch; margin-top: 1.6rem; }
  .hpp__btn { width: 100%; }
  .hpp__art { padding: 26px 14px 30px; }
  /* phones: a taller board of its own (layouts.css), so the faces stay recognisable: a cluster 1.097, the day a staggered two by two 0.905 */
  .hpp__board { width: 100%; aspect-ratio: 1.097; }
  .hpp__board[data-arr="day"] { aspect-ratio: .905; }
  .hpp__print { padding: 5px; border-radius: 16px; }
  .hpp__layer { inset: 5px; }
  .hpp__photo { border-radius: 11px; }
  .hpp__sticker { gap: 5px; padding: 4px 8px 4px 7px; font-size: 12px; }
  .hpp__sdot { width: 7px; height: 7px; }
  .hpp__slot:hover .hpp__print, .hpp__slot.is-front .hpp__print { scale: 1.06; translate: 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .hpp__print, .hpp__slot, .hpp__fig, .hpp__btn, .hpp__eyebrow, .hpp__back, .hpp__sticker, .hpp__sarrow, .hpp__layer, .hpp__ni, .hpp__narrow { transition: none !important; }
  .hpp__board > .hpp__slot:hover .hpp__print, .hpp__board > .hpp__slot:focus-within .hpp__print, .hpp__board > .hpp__slot.is-front .hpp__print,
  .hpp__board[data-arr] > .hpp__slot:hover .hpp__print, .hpp__board[data-arr] > .hpp__slot:focus-within .hpp__print, .hpp__board[data-arr] > .hpp__slot.is-front .hpp__print { rotate: var(--r, 0deg); scale: 1; translate: 0 0; }
}

/* ---------- the site header over this bright element (as dgm_section_head does, scoped to pages with .hpp; page
   field tx_dgm_fullscreen_hero = 2, the dark menu of a bright hero) ---------- */
body.dgm-page-has-fullscreen-hero-dark:has(.hpp) .mainmenu.dgm-mainmenu--pinned #logo img { filter: brightness(0) invert(1); }
body.dgm-page-has-fullscreen-hero-dark:has(.hpp) .mainmenu:not(.dgm-mainmenu--float) .dgm-mainmenu-overlay-actions :is(button[aria-label="Search"], #options-menu) { border: 1px solid rgb(15 23 42 / .28) !important; background: rgb(255 255 255 / .7) !important; color: #0f172a !important; }
body.dgm-page-has-fullscreen-hero-dark:has(.hpp) .mainmenu:not(.dgm-mainmenu--float) .dgm-mainmenu-overlay-actions :is(button[aria-label="Search"], #options-menu) * { color: #0f172a !important; }
body.dgm-page-has-fullscreen-hero-dark:has(.hpp) .mainmenu:not(.dgm-mainmenu--float) .dgm-mainmenu-overlay-actions :is(button[aria-label="Search"], #options-menu):hover { border-color: #00abe3 !important; }

/* ---------- Akademie task P1 (2026-11-13), additions only: rules for three new classes that the template sets only when
   their option is set (.hpp--flow, .hpp--compact, .hpp--search); an element without them renders as before ----------
   "top: flow": the site header stands above the hero in the page flow (header mode 0, as on the Akademie pages), so the
   text needs no room for a menu over it: it starts right below the header (B1 measured 176 px of air above the h1).
   "size: compact": a lower hero for a subpage, the prints smaller (the board follows the height of its box).
   search: a search field under the lead (GET form to the finder; assets/search.js hands the words over in place). */
.hpp--flow { --top: 48px; }
.hpp--flow .hpp__art { top: 28px; }
@media (min-width: 1600px) { .hpp--flow .hpp__art { top: 24px; } }
@media (min-width: 900px) and (max-width: 1023.98px) { .hpp--flow { --top: 40px; } .hpp--flow .hpp__art { top: 28px; } }
@media (max-width: 899.98px) { .hpp--flow { --top: 36px; } }
@media (max-width: 639.98px) { .hpp--flow { --top: 28px; } }

.hpp--compact .hpp__inner { min-height: 440px; padding-bottom: 48px; }
.hpp--compact .hpp__art { bottom: 20px; }
@media (max-width: 899.98px) {
  .hpp--compact .hpp__inner { min-height: 0; padding-bottom: 0; }
  .hpp--compact .hpp__art { padding-top: 24px; padding-bottom: 32px; }
  .hpp--compact .hpp__board { width: min(100%, 420px); }
}
@media (max-width: 639.98px) { .hpp--compact .hpp__board { width: min(100%, 360px); margin: 0 auto; } }

/* with a search field the first screen holds the search and the next dates: the headline a step smaller, the buttons
   after the list of dates (the template writes them there, so the reading and focus order is the visual order) */
.hpp--search .hpp__h1 { font-size: clamp(1.75rem, 3.05vw, 2.75rem); font-size: round(nearest, clamp(1.75rem, 3.05vw, 2.75rem), 1px); }
.hpp--search .hpp__buttons { margin-top: 24px; }
.hpp--search .hpp__buttons:empty, .hpp--compact .hpp__buttons:empty { display: none; }
.hpp--search .hpp__next { margin-top: 26px; }
.hpp__search { max-width: 580px; margin: 28px 0 0; }
.hpp__slabel { display: block; margin: 0 0 8px; color: var(--ink); font: 700 15px/1.35 "Theme-Font", Inter, system-ui, sans-serif; }
.hpp__sbox { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border: 1px solid rgb(0 62 82 / .2); border-radius: 14px;
  background: #fff; box-shadow: 0 1px 2px rgb(0 33 44 / .06), 0 14px 30px -18px rgb(0 62 82 / .42); transition: border-color .2s ease; }
.hpp__sbox:hover { border-color: rgb(0 62 82 / .36); }
.hpp__sbox:has(.hpp__sinput:focus) { border-color: var(--acc); outline: 2px solid var(--ink); outline-offset: 2px; }
.hpp__sicon { flex: none; width: 20px; height: 20px; color: var(--acc); }
.hpp .hpp__sinput, .hpp .hpp__sinput:focus { flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; padding: 0 6px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; outline: none; color: var(--ink); caret-color: var(--acc);
  font: 500 17px/1.3 "Theme-Font", Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
.hpp .hpp__sinput::placeholder { color: #5d6f7c; opacity: 1; }
.hpp__sinput::selection { background: rgb(0 171 227 / .22); color: var(--ink); }
.hpp__sbtn { flex: none; min-height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: 10px; background: var(--acc); color: #fff;
  font: 800 16px/1.2 "Theme-Font", Inter, system-ui, sans-serif; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 62 82 / .16), 0 6px 14px -6px rgb(0 62 82 / .3); transition: background-color .2s ease; }
.hpp__sbtn:hover, .hpp__sbtn:focus-visible { background: #007aa8; }
.hpp__sbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 639.98px) {
  .hpp__search { margin-top: 22px; }
  .hpp__slabel { font-size: 14px; }
  .hpp__sbox { padding: 5px 5px 5px 12px; border-radius: 12px; }
  .hpp__sicon { display: none; }
  .hpp .hpp__sinput, .hpp .hpp__sinput:focus { height: 46px; font-size: 16px; }
  .hpp__sbtn { min-height: 46px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .hpp__sbox, .hpp__sbtn { transition: none !important; } }

/* Akademie task P2 (2026-11-13): a compact hero on a phone (up to 480 px): the prints at most about 200 px tall, so the
   page content (the finder of a topic page) comes up soon; only .hpp--compact, the full heroes stay as they are */
@media (max-width: 480px) { .hpp--compact .hpp__board { width: min(100%, 220px); } .hpp--compact .hpp__art { padding-top: 16px; padding-bottom: 24px; } }