/* DGM Akademie: the hero runs to the top of the page under the header (2026-11-13, the owner: "heros … should be going
   all the way to the page top and not be covered by the menu background, menu background only active once we start
   scrolling"). Loaded only through the Akademie's header switch (Configuration/TypoScript/Akademie/chrome.typoscript),
   scoped to the body class `ak-theme`; the hero elements' own CSS is not touched.
   The header (chrome.css) stays sticky in the flow; its ground (::before) shows only once the page is scrolled
   (chrome.js `is-scrolled`, 200 ms, none with reduced motion) and always without script. Here the first element of the
   page is pulled up by the header's height and gets the same amount inside at its top, so its ground and picture reach
   the top edge while its content keeps today's distance from the header. */

/* the header's height at scroll 0: chrome.css's .ak-head__in padding (18 / 12) + the tallest item (50 menu island,
   44 phone buttons). Keep in step with chrome.css. */
.ak-theme { --ak-over: 86px; }
@media (max-width: 1179px) { .ak-theme { --ak-over: 80px; } }
@media (max-width: 719px) { .ak-theme { --ak-over: 68px; } }

/* the first element of the page, when it is one of the portal's heroes: a picture world (section.wo) or the people hero
   (section.hpp). Every one of the 30 pages opens with one of them. Any other first element (a CRM course widget, a form,
   an old html or text element on the pages that were not rebuilt) stays where it is: the header keeps its place in the
   flow above it. Go-live review 2026-11-14: the form skin's `border … !important` (typo3-form-tailwind4.css) beat the
   transparent border below, so the pull-up alone put the form's heading under the header on 8945 and 8947. */
body.ak-theme #crm__widgets > :is(section.wo, section.hpp):nth-child(1 of section, div) { margin-top: calc(-1 * var(--ak-over)); }

/* picture worlds (hero, mosaic, index): their picture layers are absolute with inset 0, so padding carries the ground up */
body.ak-theme #crm__widgets > section.wo:nth-child(1 of section, div) { padding-top: var(--ak-over); }

/* the people hero: a transparent top border of the header's height; the ground paints under it (background from the
   border edge) and the absolutely placed prints move down with the text */
body.ak-theme #crm__widgets > section.hpp:nth-child(1 of section, div) { border-top: var(--ak-over) solid transparent; background-origin: border-box; }

/* legibility at scroll 0 over a photograph: a short light fade under the header (the logo sits on the hero's white scrim
   already; the utilities on the right often stand on the dark part of the picture) */
body.ak-theme #crm__widgets > section.wo--hero:nth-child(1 of section, div)::after {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: calc(var(--ak-over) + 56px); pointer-events: none;
    background: linear-gradient(180deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .82) 55%, rgb(255 255 255 / 0) 100%); }

/* the topic mosaic below 1200: its intro sits in a fixed-height grid row and grows upwards; 24 px more air under the
   header (h1 33 px below the bar instead of 9) */
@media (max-width: 1199.98px) { body.ak-theme #crm__widgets > section.wo--mosaic:nth-child(1 of section, div) { padding-top: calc(var(--ak-over) + 24px); } }