/* Content element dgm_section_hero_women (task 19, agent B, 2026-11-12): the Women@DGM hero as a TYPO3 element.
   Moved here unchanged from part 1 ("hero") of Tools/NetzwerkRedesign/design/assets/pages/4709.css (brief 15); the
   element's frontend.html writes the markup design/heroes/women.php wrote, class for class. Added at the end: the site
   header rules of netzwerk.css that the hero needs, scoped to pages with .wdh. */
/* Women@DGM (draft 11396 / EN 11397, brief 15): page-own styles, loaded on this page only.
   1. The hero (.wdh, markup design/heroes/women.php, motion 4709.js): the sibling of the Nachwuchs hero. Its text block,
      ground, card and object rules are copied from heroes/nachwuchs.css (.nwh__*, read only) value for value and renamed
      to wdh-; what differs: one headline line with the key word marked, a calmer arc instead of the loop, the network's
      threads and pins, the four drawings of this page and their places.
   2. The page parts (wd-): the CRM committee box, the text beside a photograph, the two CRM boxes of dates and news
      (copied from groups/nachwuchs.css and pages/54.css .nwy-feed*, .nwy-pill), the Mitmachen card. */

/* ================================ 1. hero ================================ */
.wdh {
  --wdh-pad: 64px; --wdh-top: 168px; --wdh-copy: calc((min(100cqw, 1280px) - 180px) * 7 / 12); --wdh-cw: var(--wdh-copy);
  container: wdh / inline-size;
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; margin: 0; color: #0f172a;
  font-family: "Theme-Font", Inter, system-ui, sans-serif;
  background:
    radial-gradient(ellipse 46% 62% at 74% 50%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 70%),
    radial-gradient(ellipse 60% 70% at 100% 100%, rgb(127 216 245 / .22), transparent 70%),
    linear-gradient(160deg, #f6fbfe 0%, #eef8fc 42%, #e4f4fb 74%, #dff2fa 100%);
}
.wdh *, .wdh *::before, .wdh *::after { box-sizing: border-box; }
#crm__widgets .frame:has(> .wdh) { max-width: none; width: auto; margin: 0; padding: 0; }
.wdh a { text-decoration: none; }
.wdh__inner { position: relative; z-index: 3; width: 100%; max-width: 1280px; min-height: 672px; margin: 0 auto; padding: var(--wdh-top) var(--wdh-pad) 64px; pointer-events: none; }
.wdh__copy { position: relative; z-index: 4; width: var(--wdh-copy); max-width: 100%; pointer-events: auto; }
html.nw-fw .wdh__copy { visibility: hidden; }
.wdh__eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem !important; padding: .4rem .85rem .4rem .7rem;
  border: 1px solid rgb(0 171 227 / .34); border-radius: 999px; background: rgb(255 255 255 / .72); color: #00475e;
  font: 800 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 18px -12px rgb(0 62 82 / .35); }
.wdh__pulse { position: relative; display: inline-flex; width: .5rem; height: .5rem; border-radius: 999px; background: #00abe3; box-shadow: 0 0 14px rgb(0 171 227 / .55); }
.wdh__pulse::after { content: ""; position: absolute; inset: -.45rem; border: 1px solid rgb(0 171 227 / .5); border-radius: 999px; animation: wdh-pulse 2.4s ease-out infinite; }
@keyframes wdh-pulse { 0% { opacity: .72; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.8); } }
/* the headline: one line, the family's size and weight; the key word in ink over the marker stroke, "@DGM" in the
   family's accent gradient (as the Nachwuchs hero's second line) */
.wdh__h1 { position: relative; width: fit-content; max-width: 680px; margin: 0; color: #003e52; font-family: "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3.65vw, 3.3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.015em; overflow-wrap: break-word; }
/* the family's accent gradient lies on the whole headline, as long as on the Nachwuchs hero (the copy column, at most
   680px, from the headline's left edge), so "@DGM" takes the same colours as the accent words there do at that place */
.wdh__h1 { background: linear-gradient(90deg, #007aa8 0%, #00abe3 100%) 0 0 / min(680px, var(--wdh-cw)) 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
.wdh__key { position: relative; display: inline-block; z-index: 0; color: #003e52; -webkit-text-fill-color: #003e52; }
.wdh__accent { display: inline-block; padding-bottom: .14em; margin-bottom: -.14em; line-height: 1.05; color: transparent; -webkit-text-fill-color: transparent; }
.wdh__lead { max-width: 540px; margin-top: 1.5rem; color: #475569; font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.62; text-wrap: pretty; }
.wdh__lead p { margin: 0; }
.wdh__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2rem; }
.wdh__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; }
.wdh__btn i { display: inline-block; width: 1.1em; font-size: 1rem; text-align: center; }
.wdh__btn--primary { background: #00abe3; color: #fff !important; box-shadow: 0 16px 34px -14px rgb(0 171 227 / .6); }
.wdh__btn--primary:hover, .wdh__btn--primary:focus-visible { background: #007aa8; color: #fff !important; box-shadow: 0 18px 36px -14px rgb(0 122 168 / .6); }
.wdh__btn--secondary { border: 1px solid rgb(0 62 82 / .26); background: rgb(255 255 255 / .74); color: #003e52 !important; }
.wdh__btn--secondary:hover, .wdh__btn--secondary:focus-visible { border-color: #00abe3; background: #fff; color: #003e52 !important; }
.wdh__btn:focus-visible { outline: 2px solid #003e52; outline-offset: 3px; }
.wdh__glow { position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: radial-gradient(circle at calc(50% + min(50cqw, 640px) - 300px) 46%, rgb(127 216 245 / .32), rgb(127 216 245 / 0) 340px); }

/* ---------- hand-made touches ---------- */
.wdh__mark { position: absolute; left: -.06em; right: 0; bottom: -.12em; width: calc(100% + .04em); height: .3em; overflow: visible; pointer-events: none; z-index: -1; }
.wdh__mark path { fill: none; stroke: #7fd8f5; stroke-width: .15em; stroke-linecap: round; stroke-linejoin: round; vector-effect: none;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wdh-draw .75s cubic-bezier(.55, .08, .3, 1) .35s forwards; }
/* a calm arc from the headline towards the photographs (no loop: this page is the quieter sibling) */
.wdh__arrow { position: absolute; left: calc(100% + .35em); top: -.05em; width: 3.2em; height: 1.92em; overflow: visible; pointer-events: none; }
.wdh__arrow path { fill: none; stroke: #00abe3; stroke-width: 2.2px; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: wdh-draw .8s cubic-bezier(.45, .05, .35, 1) 1.05s forwards; }
.wdh__arrow path[data-k="ah"] { animation-duration: .26s; animation-delay: 1.8s; }
html.nw-fw :is(.wdh__mark, .wdh__arrow) path { animation: none; }
@keyframes wdh-draw { to { stroke-dashoffset: 0; } }

/* ---------- the scene (a stage of 600 x 500 units, 1 unit = var(--u)) ---------- */
.wdh__area { position: absolute; z-index: 2; top: 92px; bottom: 60px; left: var(--wdh-al); right: var(--wdh-ar); container-type: size; display: grid; place-items: center; pointer-events: none; }
.wdh { --wdh-al: calc(max(0px, (100cqw - 1280px) / 2) + 64px + 540px + 40px); --wdh-ar: calc(max(0px, (100cqw - 1280px) / 2) + 24px); }
.wdh__stage { position: relative; width: min(100cqw, 100cqh * 600 / 500); aspect-ratio: 600 / 500; container-type: inline-size; pointer-events: auto; touch-action: auto; }
.wdh__stage > * { --u: calc(100cqw / 600); position: absolute; }
.wdh__card { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); margin: 0; }
.wdh__cj { position: relative; display: block; padding: calc(4px + .35 * var(--u) * 6); border-radius: 15px; background: #fff; transform: rotate(var(--r));
  box-shadow: 0 0 0 1px rgb(0 62 82 / .06), 0 1px 2px rgb(0 33 44 / .08); will-change: transform; }
.wdh__cj img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; border-radius: 10px; background: #dff2fa; }
.wdh__cs { position: absolute; inset: 6% 4% -2%; border-radius: 18px; transform: rotate(var(--r)); background: rgb(0 33 44 / .28); filter: blur(14px); opacity: .9; will-change: transform, opacity; }
.wdh__card--q { --ar: 640 / 780; }
.wdh__card--r { --ar: 900 / 510; }
.wdh__card--l { --ar: 900 / 600; }
.wdh__o { left: calc((var(--cx) - var(--w) / 2) * var(--u)); top: calc(var(--cy) * var(--u)); width: calc(var(--w) * var(--u)); translate: 0 -50%; display: block; }
.wdh__oj { display: block; transform: rotate(var(--r)); will-change: transform; }
.wdh__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wdh__svg .k { stroke: #003e52; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wdh__steam { stroke: url(#wdh-steam-g); stroke-width: 2.8px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.wdh__steam[data-s="1"] { opacity: .75; }
/* the badge hangs from its pivot (the straps' top) */
.wdh__o--badge { translate: 0 0; }
.wdh__o--badge .wdh__oj { transform-origin: 50% 2.8%; }
/* the threads of the network: fine primary lines between pins; above the photographs, under the drawn things */
.wdh__net { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wdh__thread { fill: none; stroke: #00abe3; stroke-width: 1.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.wdh__pin circle { fill: #fff; stroke: #00abe3; stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.wdh__pin circle.c { fill: #003e52; stroke: none; }

/* layers */
.wdh__o--micro { z-index: 1; }
/* the badge hangs from behind the room's photograph, as if from its pin board */
.wdh__o--badge { z-index: 2; }
.wdh__card--r { z-index: 3; } .wdh__card--q { z-index: 4; } .wdh__card--l { z-index: 5; }
.wdh__net { z-index: 6; }
.wdh__o--cup, .wdh__o--bubble { z-index: 7; }

/* ---------- the arrangement (desktop, 600 x 500 units): three photographs as a loose ring, joined by threads ---------- */
.wdh__card--q { --x: 30; --y: 24; --w: 164; --r: -4deg; }
.wdh__card--r { --x: 236; --y: 50; --w: 336; --r: 2.5deg; }
.wdh__card--l { --x: 136; --y: 290; --w: 262; --r: -3deg; }
.wdh__o--micro { --cx: 64; --cy: 410; --w: 80; --r: -4deg; }
.wdh__o--cup { --cx: 478; --cy: 420; --w: 80; --r: 0deg; }
.wdh__o--badge { --cx: 540; --cy: 222; --w: 50; --r: 0deg; }
.wdh__o--bubble { --cx: 522; --cy: 18; --w: 62; --r: 4deg; }
.wdh__os { position: absolute; left: 14%; right: 14%; top: 22%; bottom: 10%; border-radius: 50%; background: rgb(0 33 44 / .2); filter: blur(7px); transform: translateY(9px) rotate(var(--r)); will-change: transform; }
.wdh__o--cup .wdh__os { top: 66%; bottom: 2%; left: 6%; right: 6%; }
.wdh__o--micro .wdh__os { top: 76%; bottom: 0; left: 8%; right: 12%; }
.wdh__o--badge .wdh__os { top: 58%; bottom: 2%; left: 10%; right: 10%; border-radius: 18%; }
.wdh__o--bubble .wdh__os { top: 20%; bottom: 0; }

/* ---------- arrival: a small spring, a little slower than the Nachwuchs hero's ---------- */
@keyframes wdh-in-card { from { opacity: 0; transform: translateY(14px) scale(.95) rotate(2deg); } 22% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wdh-in-obj { from { opacity: 0; transform: scale(.6) rotate(-10deg); } 18% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes wdh-in-net { from { opacity: 0; } to { opacity: 1; } }
.wdh__card, .wdh__o { animation: wdh-in-card 1.05s both; animation-timing-function: linear(0, 0.0341, 0.1219, 0.2437, 0.3828, 0.5256, 0.6619, 0.7845, 0.8891, 0.9736, 1.0377, 1.0827, 1.1106, 1.124, 1.1258, 1.1191, 1.1063, 1.09, 1.0722, 1.0543, 1.0375, 1.0227, 1.0103, 1.0005, 0.9932, 0.9882, 0.9853, 0.9841, 0.9843, 0.9854, 0.9872, 0.9893, 0.9916, 0.9938, 0.9959, 0.9977, 1); }
.wdh__o { animation-name: wdh-in-obj; }
.wdh__net { animation: wdh-in-net .6s ease-out .55s both; }
.wdh__card--r { animation-delay: .05s; } .wdh__card--q { animation-delay: .17s; } .wdh__card--l { animation-delay: .29s; }
.wdh__o--micro { animation-delay: .5s; } .wdh__o--cup { animation-delay: .6s; } .wdh__o--badge { animation-delay: .7s; } .wdh__o--bubble { animation-delay: .8s; }

/* the section pill menu overlaps the hero's lower edge by 30px */
body:has(.wdh) #crm__widgets .frame-type-menu_subpages { margin-top: -30px; z-index: 41; }

/* ---------- widths ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .wdh { --wdh-copy: min(calc((min(100cqw, 1280px) - 180px) * 7 / 12), 480px); --wdh-al: calc(64px + 480px + 28px); --wdh-ar: 20px; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  .wdh { --wdh-pad: 24px; --wdh-top: 116px; --wdh-copy: 420px; --wdh-al: calc(24px + 420px + 26px); --wdh-ar: 16px; }
}
/* under 900: text first, then the scene in the flow; a stage of 600 x 430 units with the three photographs as large as
   the width allows, the threads, the cup and the bubble */
@media (max-width: 899.98px) {
  .wdh { --wdh-pad: 24px; --wdh-top: 104px; --wdh-copy: 100%; --wdh-cw: min(620px, 100cqw - 2 * var(--wdh-pad)); background: linear-gradient(170deg, #f6fbfe 0%, #eef8fc 50%, #e1f3fa 100%); }
  .wdh__inner { min-height: 0; padding-bottom: 0; }
  .wdh__copy { max-width: 620px; }
  .wdh__glow, .wdh__arrow { display: none; }
  .wdh__area { position: relative; inset: auto; display: block; width: auto; max-width: 640px; margin: 0 auto; padding: 14px 20px 44px; container-type: inline-size; }
  .wdh__stage { width: 100%; aspect-ratio: 600 / 430; }
  .wdh__o--micro, .wdh__o--badge { display: none; }
  .wdh__card--q { --x: 14; --y: 14; --w: 170; --r: -4deg; }
  .wdh__card--r { --x: 226; --y: 34; --w: 362; --r: 2.5deg; }
  .wdh__card--l { --x: 168; --y: 262; --w: 236; --r: -3deg; }
  .wdh__o--cup { --cx: 494; --cy: 342; --w: 78; }
  .wdh__o--bubble { --cx: 70; --cy: 300; --w: 70; }
}
@media (max-width: 639.98px) {
  .wdh { --wdh-pad: 20px; --wdh-top: 84px; }
  .wdh__eyebrow { gap: .45rem; margin-bottom: 1rem !important; padding: .28rem .7rem; font-size: .6875rem; letter-spacing: .1em; line-height: 1.45; }
  .wdh__lead { margin-top: 1.25rem; font-size: .95rem; line-height: 1.55; }
  .wdh__buttons { flex-direction: column; align-items: stretch; }
  .wdh__btn { width: 100%; }
  .wdh__area { padding: 10px 12px 40px; }
  .wdh__cj { border-radius: 10px; } .wdh__cj img { border-radius: 6px; }
}

/* ---------- still: reduced motion and the slow-device still (class is-still) ---------- */
@media (prefers-reduced-motion: reduce) {
  .wdh__pulse::after { animation: none; opacity: 0; }
  .wdh__card, .wdh__o, .wdh__net, .wdh__mark path, .wdh__arrow path { animation: none !important; }
  .wdh__mark path, .wdh__arrow path { stroke-dashoffset: 0; }
  .wdh__btn { transition: none; }
}
.wdh.is-still :is(.wdh__card, .wdh__o, .wdh__net, .wdh__mark path, .wdh__arrow path) { animation: none !important; }
.wdh.is-still :is(.wdh__mark path, .wdh__arrow path) { stroke-dashoffset: 0; }
.wdh.is-still .wdh__card:hover .wdh__cj, .wdh.is-rm .wdh__card:hover .wdh__cj { box-shadow: 0 0 0 2px #00abe3, 0 1px 2px rgb(0 33 44 / .08); }


/* ---------- the site header over this bright element (copied from netzwerk.css "site header", 2026-11-12, scoped to
   pages that carry the element; page field tx_dgm_fullscreen_hero = 2, the dark menu of a bright hero) ---------- */
body.dgm-page-has-fullscreen-hero-dark:has(.wdh) .mainmenu.dgm-mainmenu--pinned #logo img { filter: brightness(0) invert(1); }
body.dgm-page-has-fullscreen-hero-dark:has(.wdh) .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(.wdh) .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(.wdh) .mainmenu:not(.dgm-mainmenu--float) .dgm-mainmenu-overlay-actions :is(button[aria-label="Search"], #options-menu):hover { border-color: #00abe3 !important; }