/* DGM Akademie: the portal's theme (beauty pass, task T, 2026-11-13).
   Loaded only through the Akademie's header switch (Configuration/TypoScript/Akademie/chrome.typoscript, which also adds
   the body class `ak-theme`); no other site and no other install loads this file. It sets the frame the section
   elements land in: grounds, one type scale, rhythm and axes, one elevation style. It addresses the elements' public
   classes from outside and never edits their own CSS. Every overridden selector is listed with its reason in
   Tools/AkademieRedesign/data/theme.md. The finder's course card and list (`.dse-course`, `.dse-ex*`) belong to task C
   and are left alone here. */

/* ─── tokens ─────────────────────────────────────────────────────────────── */
.ak-theme {
    /* colour: five text colours for the main content (plus the finder's own) */
    --akt-navy: #003e52;             /* every heading, strong text */
    --akt-ink: #284b59;              /* body text, leads (9.3:1 on white, 8.6:1 on the band) */
    --akt-mute: #4f6b78;             /* secondary text, labels (5.9:1 on white, 5.5:1 on the band) */
    --akt-blue: #00abe3;             /* links, accents, filled buttons (pinned) */
    --akt-band: #edf7fc;             /* the pale cyan band (the hero's tone, a little more cyan than the footer) */
    --akt-band-2: #e2f3fa;           /* pale fills on white (icon wells, the contact's first column) */
    --akt-line: rgba(0, 62, 82, .13);/* the hairline: the one elevation style at rest */
    --akt-line-hi: rgba(0, 171, 227, .5);
    --akt-lift: 0 1px 2px rgba(0, 40, 60, .06), 0 18px 36px -22px rgba(0, 40, 60, .38); /* hover only */
    --akt-r: 16px;                   /* cards, panels, pictures */
    --akt-r-s: 10px;                 /* buttons, fields, icon wells */
    /* type: one scale for the whole site */
    --akt-display: Heading-Font, "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
    --akt-h1-hero: clamp(2rem, 1.05rem + 3.95vw, 4.25rem);    /* home and overview: 32 at 390 … 68 at 1440 (32 keeps
                                                                 "Materialwissenschaft" whole in 358 px) */
    --akt-h1: clamp(1.75rem, 1.1rem + 2.7vw, 3.25rem);        /* sub pages: 28 at 390 … 52 at 1440 (the longest word,
                                                                 "Materialcharakterisierung", fits the hero's 620 px column at 52 and 358 px at 390) */
    --akt-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);         /* sections: 24 at 390 … 36 at 1440 */
    --akt-h2-s: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);      /* a section's single box (callout, contact): 22 … 28 */
    --akt-h3: clamp(1.25rem, 1.15rem + .3vw, 1.375rem);       /* card titles: 20 … 22 */
    --akt-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);    /* leads: 17 … 19 */
    --akt-track: -.022em;
    /* rhythm and axes */
    --akt-gut: 24px;
    --akt-wide: 1152px;
    --akt-text: 760px;
    --akt-w: min(var(--akt-wide), 100vw - 2 * var(--akt-gut));
    --akt-sec: clamp(40px, 24px + 2.2vw, 56px);    /* a section's padding: 40 at 390 … 56 at 1440, so two neighbours'
                                                      contents stand 80 … 112 apart, split by the change of ground */
    --akt-head-gap: clamp(40px, 34px + 1.5vw, 56px); /* a section head to its content: 40 at 390 … 56 at 1440 */
    background: #fff;
}
@media (max-width: 639.98px) { .ak-theme { --akt-gut: 16px; } }

/* ─── ground: white base, no slate anywhere ─────────────────────────────── */
body.ak-theme { background: #fff; color: var(--akt-ink); }
.ak-theme ::selection { background: rgba(0, 171, 227, .22); color: var(--akt-navy); }
body.ak-theme #crm__widgets { margin: 0; }
.ak-theme .ak-foot { margin-top: 0; }

/* header and footer keep chrome.css's 1280: the menu with its labels and the four utilities does not fit 1152 (tried and
   seen colliding at 1440); phones: one 16 px gutter for header, heroes, sections and footer */
@media (max-width: 639.98px) { body.ak-theme #crm__widgets .hpp { --pad: var(--akt-gut); } }
/* the people hero between 640 and 1280: its text on the content axis (it keeps 64 px there, the sections 24 … 64) */
@media (min-width: 640px) and (max-width: 1279.98px) { body.ak-theme #crm__widgets .hpp { --pad: max(var(--akt-gut), (100vw - var(--akt-wide)) / 2); } }

/* ─── sections: pale cyan bands, counted from the end so the last section (white) meets the pale footer and the
   pale bands alternate up the page; the first section under a hero stays white so it never merges with the hero ── */
body.ak-theme #crm__widgets > section.dgm-ex-root { padding-block: var(--akt-sec); background: #fff; color: var(--akt-ink); }
body.ak-theme #crm__widgets > section.dgm-ex-root:nth-last-of-type(even) { background: var(--akt-band); }
body.ak-theme #crm__widgets > :is(section.hpp, section.wo) + .ce-anchor + section.dgm-ex-root,
body.ak-theme #crm__widgets > :is(section.hpp, section.wo) + section.dgm-ex-root { background: #fff; }
body.ak-theme #crm__widgets > section.dgm-ex-root > div { max-width: calc(var(--akt-wide) + 2 * var(--akt-gut)); padding-inline: var(--akt-gut); }
/* a finder placed without a section around it (the home page) gets the same frame */
body.ak-theme #crm__widgets > .frame { max-width: calc(var(--akt-wide) + 2 * var(--akt-gut)); margin: 0 auto; padding: var(--akt-sec) var(--akt-gut); }
body.ak-theme #crm__widgets section.dgm-ex-root .frame { margin-top: 0; }
body.ak-theme #crm__widgets section.dgm-ex-root .frame + .frame { margin-top: var(--akt-head-gap); }

/* ─── section heads: on the left axis, lead below, one size, navy ───────── */
body.ak-theme #crm__widgets > section.dgm-ex-root > div > header { max-width: var(--akt-text); margin: 0 0 var(--akt-head-gap); padding-inline: 0; text-align: left; }
body.ak-theme #crm__widgets > section.dgm-ex-root > div > header:not(:has(*)) { display: none; }
body.ak-theme #crm__widgets > section.dgm-ex-root > div > header h2,
body.ak-theme #crm__widgets :is(.dse-h2, .du-head__h2, .md-offer__h2, .hb-h2) {
    color: var(--akt-navy); font-family: var(--akt-display); font-size: var(--akt-h2); font-weight: 700; line-height: 1.12; letter-spacing: var(--akt-track); text-wrap: balance; }
body.ak-theme #crm__widgets > section.dgm-ex-root > div > header h2 + div,
body.ak-theme #crm__widgets :is(.dse-lead) {
    max-width: 62ch; margin-top: 14px; color: var(--akt-ink); font-size: var(--akt-lead); line-height: 1.6; text-wrap: pretty; }
body.ak-theme #crm__widgets .dse-head { max-width: var(--akt-text); margin-left: 0; margin-bottom: var(--akt-head-gap); text-align: left; }
body.ak-theme #crm__widgets .dse--stage > .dse-head, body.ak-theme #crm__widgets .dse--browser > .dse-head { margin-inline: auto; max-width: none; }
body.ak-theme #crm__widgets .du-head { margin-bottom: var(--akt-head-gap); }

/* polish round: every heading balances its lines (no single word left on the last line) and is never hyphenated by the
   browser ("Teilnahmebescheinigung", "Werkstoffkenntnisse" break only where a word ends); a word longer than its column
   still wraps instead of overflowing */
body.ak-theme #crm__widgets :is(h1, h2, h3) { text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }

/* ─── heroes: the H1 scale ─────────────────────────────────────────────── */
body.ak-theme #crm__widgets :is(.hpp__h1, .wo__h) { letter-spacing: -.028em; line-height: 1.04; hyphens: manual; overflow-wrap: break-word; }
/* the photo hero's text on the content axis at every width (its box is 1280 with a 64 px gutter, the content 1152) */
body.ak-theme #crm__widgets .wo--hero { --wo-gut: calc(max(var(--akt-gut), (100% - var(--akt-wide)) / 2) - max(0px, (100% - var(--wo-box)) / 2)); }
body.ak-theme #crm__widgets :is(.hpp__h1, .wo--light .wo__h) { color: var(--akt-navy); }
body.ak-theme #crm__widgets .hpp__h1, body.ak-theme #crm__widgets .wo--hero .wo__h { font-size: var(--akt-h1); font-weight: 800; }
body.ak-theme #crm__widgets :is(.hpp--search, .hpp--courses) .hpp__h1 { font-size: var(--akt-h1-hero); }
/* polish round (the owner: "reduce font size ... to make it not as wide"): the home hero's h1 a step smaller than the
   overview heroes: 54 px from 1200 px (beside the 520 px search; "in Materialwissenschaft" is 10.7 em and has to fit the
   left column, which is 100vw - 616 px wide up to 1200 px), 44 px at 1024 where the columns stack, 32 px on phones */
body.ak-theme #crm__widgets .hpp--courses .hpp__h1 { font-size: clamp(2rem, .6rem + 3.37vw, 3rem); }
@media (min-width: 1100px) { body.ak-theme #crm__widgets .hpp--courses .hpp__h1 { font-size: min(3.375rem, (100vw - 616px) / 10.9); } }
/* polish round: under 380 px the home h1 follows the width (30 px at 360), so "in Materialwissenschaft" keeps one line
   and "in" is never left alone (at 32 px it was) */
@media (max-width: 379.98px) { body.ak-theme #crm__widgets :is(.hpp--search, .hpp--courses) .hpp__h1 { font-size: 8.3vw; } }
/* the topic mosaic: as the overview's h1 the hero size (64 at 1440: "Fortbildungen" fits its 420 px cell), as a section
   head on the home page the h2 size */
body.ak-theme #crm__widgets .wo--mosaic h1.wo__h { font-size: min(var(--akt-h1-hero), 4rem, 4.4vw); }
/* the mosaic's intro sits in fixed-height grid rows: below 1200 (one row) and on phones the sub page size, so the lead
   and the button never push the h1 up under the header */
@media (max-width: 1199.98px) { body.ak-theme #crm__widgets .wo--mosaic h1.wo__h { font-size: min(var(--akt-h1-hero), 2.75rem); } }
body.ak-theme #crm__widgets .wo--mosaic h2.wo__h { font-size: var(--akt-h2); font-weight: 700; letter-spacing: var(--akt-track); }
body.ak-theme #crm__widgets .wo--light.wo--hero .wo__lead, body.ak-theme #crm__widgets .hpp__lead { color: var(--akt-ink); font-size: var(--akt-lead); }
/* polish round: the light sub page hero under 1024 px. The pale wash over the whole picture dimmed the faces (on FAQs the
   speaker was hidden): here the text stands on the hero's pale ground and the photograph follows below it as a clear
   picture, 200 to 240 px high, with the cards' radius, framed by the element's focus fields (object-position); the
   material pictures of the topic pages the same way. The pill menu keeps its place on the hero's lower edge, below the
   picture. */
@media (max-width: 1023.98px) {
    body.ak-theme #crm__widgets .wo--light.wo--hero { display: flex; flex-direction: column; background: var(--akt-band); }
    body.ak-theme #crm__widgets .wo--light.wo--hero .wo__scrim { display: none; }
    body.ak-theme #crm__widgets .wo--light.wo--hero .wo__inner { order: 1; width: 100%; min-height: 0; padding: 32px var(--wo-gut) 24px; align-items: flex-start; }
    body.ak-theme #crm__widgets .wo--light.wo--hero .wo__bg { order: 2; position: relative; inset: auto; height: clamp(200px, 56vw, 240px); margin: 0 var(--wo-gut) 32px; border-radius: var(--akt-r); background: var(--akt-band-2); }
    body.ak-theme #crm__widgets .wo--light.wo--hero.wo--pills .wo__bg { margin-bottom: 40px; }
    body.ak-theme #crm__widgets .wo--light.wo--hero .wo__img { filter: none; }
}

/* the picture worlds: flat grounds instead of the pale gradient; the mosaic of pictures stands on white (it is colour
   enough), the index of industries on the band */
body.ak-theme #crm__widgets .wo--light.wo--mosaic { background: #fff; }
body.ak-theme #crm__widgets .wo--light.wo--index { background: var(--akt-band); }

/* ─── the wide axis: elements that size themselves to 952 / 1200 / 1280 now take the one wide width ─── */
body.ak-theme #crm__widgets :is(.nw-contact, .nws-light, .hb-join, .th-ed, .hb-ways) { width: var(--akt-w); margin-inline: calc((100% - var(--akt-w)) / 2); }
body.ak-theme #crm__widgets .du-ak { --du-w: var(--akt-w); }
body.ak-theme #crm__widgets .md-offer { width: var(--akt-w); }
body.ak-theme #crm__widgets .dsl-faq { width: min(100%, var(--akt-text)); margin-left: 0; }
body.ak-theme #crm__widgets .wo__tiles--2 { margin-left: 0; }

/* ─── one elevation style: a hairline at rest, a lift only on hover; white on the band, white with a hairline on white ── */
body.ak-theme #crm__widgets :is(.nw-contact, .nws-light, .th-list, .dse-card, .dsw-com__card, .th-strip__card, .hb-way__a) {
    border: 1px solid var(--akt-line); border-radius: var(--akt-r); background: #fff; box-shadow: none; }
body.ak-theme #crm__widgets :is(.dse-card, .th-strip__card, .hb-way__a):hover { border-color: var(--akt-line-hi); box-shadow: var(--akt-lift); }
body.ak-theme #crm__widgets :is(.md-offer__pic, .md-story__pic, .hb-join__pic, .th-ed__pic, .nws-media__pic, .wo__tile, .dkn__pic) { border-radius: var(--akt-r); box-shadow: none; }
/* (2026-11-14: the course stage's date pill left this list; its shape and shadow are in section-hero-people/assets/stage.css) */
body.ak-theme #crm__widgets :is(.wo__btn, .hpp__btn, .hpp__sbtn, .nws-light__btn, .nw-contact__btn, .md-offer__btn, .dse-card__logo, .dsh-card, .dsh-mark) { box-shadow: none; }
body.ak-theme #crm__widgets .hpc__btn { border: 1px solid var(--akt-line); box-shadow: none; }
/* the stage cards of the home hero: a flat navy body instead of the navy gradient */
body.ak-theme #crm__widgets .hpc__body { background: var(--akt-navy); }
body.ak-theme #crm__widgets :is(.hpp__sbox, .wo__ra) { border-radius: var(--akt-r-s); }
body.ak-theme #crm__widgets :is(.nws-light__btn, .nw-contact__btn, .md-offer__btn) { border-radius: var(--akt-r-s); }
body.ak-theme #crm__widgets .nw-contact__person img { box-shadow: none; }
/* pictures stand straight: no tilted white-framed prints in the section elements (the heroes are task A's) */
body.ak-theme #crm__widgets :is(.md-offer__print, .du-tb__print) { padding: 0; border-radius: var(--akt-r); overflow: hidden; background: none; box-shadow: none; transform: none; rotate: 0deg; }
/* the callout: flat, no gradient, no glow; its icon in a pale well */
@media (min-width: 768px) { body.ak-theme #crm__widgets .nws-light { padding: 32px 36px; } }
body.ak-theme #crm__widgets .nws-light__icon { border-radius: var(--akt-r-s); background: var(--akt-band); box-shadow: none; }
body.ak-theme #crm__widgets section.dgm-ex-root:nth-last-of-type(even) .nws-light__icon { background: var(--akt-band-2); }
/* the contact: its first column flat pale instead of the gradient */
body.ak-theme #crm__widgets .nw-contact__dark { background: var(--akt-band); }
body.ak-theme #crm__widgets .nw-contact__dark::before { content: none; }
body.ak-theme #crm__widgets section.dgm-ex-root:nth-last-of-type(even) .nw-contact__dark { background: var(--akt-band-2); }

/* ─── type inside the elements: headings navy, text in two tones ───────── */
body.ak-theme #crm__widgets :is(.nws-light__h2, .nw-contact__title) { color: var(--akt-navy); font-family: var(--akt-display); font-size: var(--akt-h2-s); letter-spacing: var(--akt-track); line-height: 1.15; }
body.ak-theme #crm__widgets :is(.dse-card__name, .dse-rest__h, .th-list__title, .nw-contact__name, .dsl-person__name, .du-ix__h, .du-q__pt-t, .dsl-faq__qt) { color: var(--akt-navy); }
body.ak-theme #crm__widgets :is(.dse-card__name, .dsl-person__name, .du-ix__h) { font-size: var(--akt-h3); letter-spacing: -.012em; }
body.ak-theme #crm__widgets .dse-rest__h { font-size: var(--akt-h2-s); letter-spacing: var(--akt-track); }
body.ak-theme #crm__widgets :is(.nws-light__text, .nw-contact__text, .dsl-faq__a) { color: var(--akt-ink); }
body.ak-theme #crm__widgets :is(.dse-card__sub, .th-list__desc, .nw-contact__role, .nw-contact__label) { color: var(--akt-mute); }
body.ak-theme #crm__widgets .du-ak { --du-text: var(--akt-ink); }
body.ak-theme #crm__widgets :is(.hb-step__title, .dsh-mark, .du-v__course, .hb-step__no) { color: var(--akt-navy); }
body.ak-theme #crm__widgets :is(.hb-step__text, .dsh-card__sub, .dkn__lead, .dkn__lx, .wo__rname) { color: var(--akt-ink); }
body.ak-theme #crm__widgets :is(.hpc__where, .hpc__pos, .hpc__of, .hpc-side__head, .dsh-sr, .dkn__dm, .dkn__sr, .wo__rcount) { color: var(--akt-mute); }
/* director, 2026-11-13: under 1024 px the industry index rows are picture strips with a navy scrim; names and counts on them stay light
   (the two rules above made them navy and grey on the dark picture) */
@media (max-width: 1023.98px) {
  body.ak-theme #crm__widgets .wo--index .wo__row .wo__rname { color: #fff; }
  body.ak-theme #crm__widgets .wo--index .wo__row .wo__rcount { color: #dff3fb; }
}
body.ak-theme #crm__widgets .frame { --nw-text: var(--akt-navy); --nw-muted: var(--akt-mute); --nw-border: var(--akt-line); --th-text: var(--akt-navy); --th-muted: var(--akt-mute); --th-border: var(--akt-line); --th-shadow: none; }
body.ak-theme #crm__widgets .nw-contact__label { font-size: 12px; }

/* ─── touch targets at phone width (the contact's mail and phone links, text links in lists) ── */
@media (max-width: 767.98px) {
    body.ak-theme #crm__widgets .nw-contact__row a { display: inline-flex; align-items: center; min-height: 44px; }
    /* standalone "all of these" and "more" links (links inside running text are exempt) */
    body.ak-theme #crm__widgets :is(.dsh__all, .dkn__all, .du-more__a, .hpc-all, .md-story__a, .dsl-way__a, .dse-foot .dse-link) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ─── reduced motion: no lift ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body.ak-theme #crm__widgets :is(.dse-card, .th-strip__card, .hb-way__a) { transition: none; }
}

/* =====================================================================================================================
   Fix round r3 (2026-11-14, second design review). Every rule scoped like the rest of this file.
   ===================================================================================================================== */
/* the display headlines: the tight tracking closed the word spaces at 54 px ("derDGM"); a touch looser, wider spaces */
body.ak-theme #crm__widgets :is(.hpp__h1, .wo__h) { letter-spacing: -.022em; word-spacing: .06em; }
/* one axis: the openers of the Themen and Branchen overviews sat on a 1376 px grid (32 px from the window at 1440);
   now on the 1152 px column of every other section (the pictures stay large inside it) */
body.ak-theme #crm__widgets .wo--mosaic:not(.wo--compact) .wo__grid,
body.ak-theme #crm__widgets .wo--index:not(.wo--compact) .wo__inner { width: min(100% - 2 * var(--akt-gut), var(--akt-wide)); }
/* elements inside a section: the frame adds no gutter of its own (on phones it doubled the section's 16 px to 32) */
body.ak-theme #crm__widgets > section.dgm-ex-root .frame { padding-inline: 0; }
/* the start page's conference panel and the Inhouse story on the column's edges (were 20 / 8 px inside or outside it) */
body.ak-theme #crm__widgets .dse-pn { margin-inline: 0; }
body.ak-theme #crm__widgets .md-story { width: 100%; margin-inline: 0; }   /* its own width used 100vw - 48 px (16 px short on phones) */
/* related topics or industries: two tiles share the whole row (they stood in a four-column grid, half of it empty) */
@media (min-width: 640px) {
  body.ak-theme #crm__widgets .wo__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  body.ak-theme #crm__widgets .wo__tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the contact card: the button follows the text, the block centred in its column (no dead space under the text) */
body.ak-theme #crm__widgets .nw-contact__dark { justify-content: center; }
body.ak-theme #crm__widgets .nw-contact__btn { margin-top: 0; }
body.ak-theme #crm__widgets .nw-contact__text { text-wrap: pretty; }
/* the contact rows on phones: 44 px touch targets */
@media (max-width: 767.98px) {
  body.ak-theme #crm__widgets .nw-contact__row a { display: inline-flex; align-items: center; min-height: 44px; }
  /* the Inhouse band on topic and industry pages: no icon tile above the heading on phones */
  body.ak-theme #crm__widgets .nws-light__icon { display: none; }
}
/* "Wissen aus der DGM": the news pictures are social-media graphics with small text of their own and three layouts, so
   they stand small beside the title (rows, as on phones) and the title does the work: three lines, then an ellipsis */
@media (min-width: 640px) {
  body.ak-theme #crm__widgets .dkn__cards { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.ak-theme #crm__widgets .dkn__card + .dkn__card { border-top: 1px solid var(--akt-line); }
  body.ak-theme #crm__widgets .dkn__a { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "p d" "p t"; gap: 4px 20px; align-content: start; padding: 16px 0; }
  body.ak-theme #crm__widgets .dkn__card:first-child .dkn__a { padding-top: 4px; }
  body.ak-theme #crm__widgets .dkn__pic { grid-area: p; border-radius: 10px; }
  body.ak-theme #crm__widgets .dkn__date { grid-area: d; align-self: end; margin: 0; }
  body.ak-theme #crm__widgets .dkn__t { grid-area: t; align-self: start; margin: 0; }
}
body.ak-theme #crm__widgets .dkn__t { text-wrap: pretty; }
/* Referenzen: the list under the pull quotes reads as text, not as a wall of small print */
body.ak-theme #crm__widgets .dsl-more__a { display: inline-flex; align-items: center; min-height: 44px; }
body.ak-theme #crm__widgets .dsl-rest { column-gap: clamp(40px, 6vw, 88px); margin-top: 48px; }
body.ak-theme #crm__widgets .dsl-voice { padding: 32px 0 40px; }
body.ak-theme #crm__widgets .dsl-voice__text { font-size: 16px; line-height: 1.7; color: var(--akt-ink); }
body.ak-theme #crm__widgets .dsl-voice__by { margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--akt-mute); }
body.ak-theme #crm__widgets .dsl-voice__name { display: block; margin-bottom: 2px; color: var(--akt-navy); font: 700 17px/1.35 var(--akt-display); letter-spacing: -.01em; }
body.ak-theme #crm__widgets .dsl-voice__org::before { content: none; }
/* the home page's topic mosaic on phones: lower tiles (name, count and arrow need about 100 px), so the finder starts
   about 250 px earlier */
@media (max-width: 767.98px) {
  body.ak-theme #crm__widgets .wo--mosaic.wo--compact .wo__tile:not(.wo__tile--xl) { min-height: 112px; }
  body.ak-theme #crm__widgets .wo--mosaic.wo--compact .wo__tile--xl { min-height: 224px; }
}
/* the overviews on the 1152 column: the Themen h1 sized so "Fortbildungen" keeps one line in the intro column; the
   Branchen index names wrap (two lines at most) instead of ending in an ellipsis */
@media (min-width: 1200px) { body.ak-theme #crm__widgets .wo--mosaic h1.wo__h { font-size: min(var(--akt-h1-hero), 3rem, 3.3vw); } }
body.ak-theme #crm__widgets .wo--index:not(.wo--compact) .wo__rname { white-space: normal; text-overflow: clip; overflow: visible; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.2; }
/* the sibling pills of a topic or industry hero on the 1152 column too (the box was 1240 px) */
body.ak-theme #crm__widgets .wo__pbox { max-width: min(100%, var(--akt-wide)); }

/* director, 2026-11-14. The owner: "headers like Das Team der DGM-Akademie should be in dgm primary color". The page
   headline (h1) of every sub page hero and overview opener stands in the DGM's primary cyan; section headings (h2, h3)
   stay navy; the home hero keeps its two-tone headline. */
body.ak-theme #crm__widgets .wo--light h1.wo__h { color: var(--akt-blue); }

/* Go-live review (2026-11-14, golive agent): the form pages 8945 / 8947 (EXT:form, never rebuilt) under the new header.
   The rule `#crm__widgets > .frame` above sets their frame's margin to 0 (the form skin keeps its own border, padding
   and shadow with !important), so the form box stood glued to the header's lower edge and to the footer. The air the
   other frames get from that rule's padding, as margin here. Only the form element's frame: no page of the portal holds
   one. */
body.ak-theme #crm__widgets > .frame.frame-type-form_formframework { margin-top: var(--akt-sec); margin-bottom: var(--akt-sec); }

/* director, 2026-11-14 (audit of the rebuilt Inhouse page). The points of a "points" list and the checklist of a
   "story" block stand in columns of about 320 px; with automatic hyphenation nearly every second line ended in a
   split word ("Bran-che", "bestim-men", "Ver-pflegung"). From 640 px these short texts break only between words
   (soft hyphens an editor sets still work); phones keep the automatic hyphenation. */
@media (min-width: 640px) {
  body.ak-theme #crm__widgets :is(.dsl-point__b, .md-story__body) :is(p, li) { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
}