/* dgm_section_media (Netzwerk task 19, 2026-11-12, agent C): complete in itself. Copied rule for rule from the audited
   draft files of Tools/NetzwerkRedesign/design/assets: groups/nachwuchs.css (text beside a photograph, the file line),
   pages/53.css (Regionalforen), pages/4709.css (Women@DGM), pages/35.css (the hub's Mitmachen with its tokens and the
   shared heads). Nothing redesigned. */
.frame-type-dgm_section_media { --nw-primary: #00abe3; --nw-deep: #007aa8; --nw-ink: #003e52; --nw-text: #0f172a; --nw-muted: #475569; --nw-border: rgb(227 232 236);
  --hb-muted: #5b6b7f; --hb-fast: 120ms; --hb-base: 220ms; --hb-slow: 320ms; --hb-ease: cubic-bezier(.2, .7, .2, 1);
  --hb-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2); --hb-sk: #e6edf3; }
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-dgm_section_media:last-child { margin-bottom: 0; }

/* ---------- text beside one photograph (groups/nachwuchs.css) ---------- */
.nws-media { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 56px; width: 100%; }
.nws-media__pic { margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: #e7f4fa; box-shadow: 0 1px 2px rgb(15 34 51 / .06), 0 26px 50px -30px rgb(0 33 44 / .5); }
.nws-media__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nws-media__pic--contain { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3.4; padding: 28px; box-shadow: none; border: 1px solid var(--nw-border);
  background: radial-gradient(circle at 50% 40%, #fff, rgb(255 255 255 / 0) 70%), linear-gradient(160deg, #eef8fc, #d9f0f9); }
.nws-media__pic--contain img { width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 1px 2px rgb(0 33 44 / .2), 0 22px 36px -18px rgb(0 33 44 / .5); }
.nws-media__text { color: #0f172a; font: 400 17px/1.7 Theme-Font, Inter, sans-serif; }
.nws-media__text p { margin: 0; }
.nws-media__text p + p { margin-top: 1em; }
.nws-media__text a { color: #00abe3; font-weight: 600; }
@media (max-width: 899.98px) { .nws-media { grid-template-columns: minmax(0, 1fr); gap: 28px; } .nws-media__pic--contain { aspect-ratio: auto; height: 340px; } }

/* the file line under the text (the study guide) */
.nws-media__file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 1.4em !important; }
.nws-media__file a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 10px; background: #00abe3; color: #fff !important; font: 600 16px/1.2 Theme-Font, Inter, sans-serif; text-decoration: none; }
.nws-media__file a:hover, .nws-media__file a:focus-visible { background: #007aa8; }
.nws-media__file a:focus-visible { outline: 2px solid #003e52; outline-offset: 3px; }
.nws-media__meta { color: #475569; font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.nws-media__pic > a { display: contents; }

/* ---------- Regionalforen: large photograph, pill, h2, text (pages/53.css) ---------- */
.rf-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 14px; padding: 6px 12px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px;
  background: rgb(0 171 227 / .05); color: #00abe3; font: 700 11px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.rf-h2 { margin: 0 0 20px; color: #0f172a; font: 700 36px/1.15 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.9px; text-wrap: balance; }
#crm__widgets > section.dgm-ex-root:has(.rf-local) > div > header { display: none; }
.rf-local { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; width: 100%; text-align: left; }
.rf-local__ph { position: relative; margin: 0; overflow: hidden; border-radius: 16px; aspect-ratio: 3680 / 2300; background: #e7f4fa;
  box-shadow: 0 1px 2px rgb(15 34 51 / .06), 0 24px 48px -28px rgb(0 33 44 / .45); }
.rf-local__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rf-local__text { display: flex; flex-direction: column; }
.rf-local__body { color: #334155; font: 400 17px/1.7 Theme-Font, Inter, sans-serif; }
.rf-local__body p { margin: 0 0 14px; }
.rf-local__body p:last-child { margin-bottom: 0; }
@media (max-width: 1023.98px) { .rf-local { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 767.98px) { .rf-h2 { font-size: 30px; letter-spacing: -.6px; } }
@media (max-width: 639.98px) { .rf-local__body { font-size: 16px; } }

/* ---------- Women@DGM: a tilted photograph in a white frame (pages/4709.css) ---------- */
.wd-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 14px; padding: 6px 12px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px;
  background: rgb(0 171 227 / .05); color: #00abe3; font: 700 11px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.wd-h2 { margin: 0 0 20px; color: #0f172a; font: 700 36px/1.15 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.9px; text-wrap: balance; }
@media (max-width: 767.98px) { .wd-h2 { font-size: 30px; letter-spacing: -.6px; } }
#crm__widgets > section.dgm-ex-root:has(.wd-what) > div > header { display: none; }
.wd-what { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; width: min(1152px, 100vw - 48px); margin: 0 auto; }
.wd-what__pic { margin: 0; }
.wd-what__frame { display: block; padding: 8px; border-radius: 18px; background: #fff; transform: rotate(-1.5deg);
  box-shadow: 0 0 0 1px rgb(0 62 82 / .06), 0 24px 48px -26px rgb(0 33 44 / .45); }
.wd-what__frame img { display: block; width: 100%; height: auto; aspect-ratio: 880 / 480; object-fit: cover; border-radius: 12px; background: #dff2fa; }
.wd-what__text { display: flex; flex-direction: column; min-width: 0; color: #334155; font: 400 17px/1.7 Theme-Font, Inter, sans-serif; }
.wd-what__text p:not(.wd-pill) { margin: 0; text-wrap: pretty; }
.wd-what__text p:not(.wd-pill) + p { margin-top: 1em; }
@media (max-width: 1023.98px) {
  .wd-what { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 680px; }
  .wd-what__frame { transform: rotate(-1deg); }
}

/* ---------- the hub's Mitmachen: photograph beside the head and numbered steps (pages/35.css) ---------- */
#crm__widgets .hb-join { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
#crm__widgets .hb-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border: 1px solid rgb(0 171 227 / .3); border-radius: 999px;
  background: rgb(0 171 227 / .05); color: #00abe3; font: 700 11px/16.5px Theme-Font, Inter, system-ui, sans-serif; letter-spacing: 1.1px; text-transform: uppercase; }
#crm__widgets .hb-pill i { font-size: 11px; }
#crm__widgets .hb-h2 { margin: 0; color: #111827; font: 700 36px/1.375 Heading-Font, Theme-Font, Inter, system-ui, sans-serif; letter-spacing: -.9px; text-wrap: pretty; hyphens: manual; -webkit-hyphens: manual; }
#crm__widgets .hb-lead { margin: 16px 0 0; color: #475569; font: 400 18px/1.625 Theme-Font, Inter, system-ui, sans-serif; text-wrap: pretty; }
@media (max-width: 639.98px) { #crm__widgets .hb-h2 { font-size: 30px; letter-spacing: -.75px; } #crm__widgets .hb-lead { font-size: 16px; } }
#crm__widgets .hb-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #00abe3; font: 600 15px/1.3 Theme-Font, Inter, sans-serif; text-decoration: none; transition: color var(--hb-fast) var(--hb-ease); }
#crm__widgets .hb-link i { font-size: 11px; transition: transform var(--hb-base) var(--hb-ease); }
#crm__widgets .hb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#crm__widgets .hb-link:hover i { transform: translateX(3px); }
#crm__widgets .hb-link:focus-visible { outline: 2px solid #00abe3; outline-offset: 3px; border-radius: 4px; }
#crm__widgets > section.dgm-ex-root:has(.hb-join) > div > header { display: none; }
/* ======================= Mitmachen (section 5, #mitmachen): photograph beside the head and three numbered steps ======================= */
#crm__widgets .hb-join { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; width: min(1152px, 100vw - 48px); margin: 0 calc((100% - min(1152px, 100vw - 48px)) / 2); text-align: left; }
#crm__widgets .hb-join__pic { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--hb-sk); box-shadow: 0 30px 60px -36px rgb(0 33 44 / .45); }
#crm__widgets .hb-join__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
#crm__widgets .hb-steps { margin: 32px 0 0; padding: 0; list-style: none; }
#crm__widgets .hb-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; margin: 0; padding-bottom: 28px; }
#crm__widgets .hb-step:last-child { padding-bottom: 0; }
#crm__widgets .hb-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 56px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(0 171 227 / .55), rgb(0 171 227 / .12)); }
#crm__widgets .hb-step__no { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #00abe3; border-radius: 50%; background: #fff; color: #007aa8; font: 800 18px/1 Heading-Font, "Inter Tight", Inter, sans-serif; }
#crm__widgets .hb-step:first-child .hb-step__no { background: #00abe3; color: #fff; }
#crm__widgets .hb-step__title { margin: 10px 0 6px; color: #0f172a; font: 700 19px/1.3 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.2px; }
#crm__widgets .hb-step__text { margin: 0; color: #475569; font: 400 16px/1.6 Theme-Font, Inter, sans-serif; }
#crm__widgets .hb-step__link { margin-top: 8px; }
@media (max-width: 899.98px) {
  #crm__widgets .hb-join { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #crm__widgets .hb-join__pic { aspect-ratio: 16 / 10; }
  #crm__widgets .hb-join__pic img { object-position: 50% 30%; }
}
@media (max-width: 639.98px) { #crm__widgets .hb-step { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; } #crm__widgets .hb-step__no { width: 40px; height: 40px; font-size: 16px; } #crm__widgets .hb-step:not(:last-child)::before { left: 19px; top: 48px; } #crm__widgets .hb-step__title { margin-top: 7px; } }

/* ---------- text only: the 680px column (netzwerk.css .nw-text, groups/nachwuchs.css .nws-text) ---------- */
#crm__widgets .nw-text { width: min(680px, 100vw - 48px); margin: 0 calc((100% - min(680px, 100vw - 48px)) / 2); color: var(--nw-text); font: 400 17px/1.7 Theme-Font, Inter, sans-serif; }
#crm__widgets .nw-text p + p { margin-top: 1em; }
#crm__widgets .nw-text a { color: var(--nw-primary); font-weight: 600; }
#crm__widgets .nws-text p { margin: 0; }
#crm__widgets .nws-text p + p { margin-top: 1em; }

@media (prefers-reduced-motion: reduce) { .nws-media__file a { transition: none; } }

/* ---------- look "editorial" (Themen task 20, 2026-11-12, agent D): "Worum es geht" of the topic pages, aboutV2() of
   Tools/ThemenRedesign/design/lib-themen.php; the rules of its themen.css (tm-ed renamed th-ed), tokens --th-* ---------- */
.frame-type-dgm_section_media { --th-primary: #00abe3; --th-deep: #007aa8; --th-ink: #003e52; --th-text: #0f172a; --th-muted: #475569; --th-border: rgb(227 232 236); --th-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2); --th-grid: min(1152px, 100vw - 48px); }
/* "Worum es geht" (brief 12): h2 like the other block heads, a 20px lead, 17px paragraphs, one column of 60-68 characters,
   the photograph as tall as the text (never flatter than 4:3), both centred on each other */
#crm__widgets .th-ed { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; width: min(1152px, 100vw - 48px); margin: 0 calc((100% - min(1152px, 100vw - 48px)) / 2); scroll-margin-top: 140px; }
#crm__widgets .th-ed__pic { position: relative; align-self: stretch; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -36px rgb(0 33 44 / .5); }
#crm__widgets .th-ed__min { display: block; padding-top: 75%; }
#crm__widgets .th-ed__pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
#crm__widgets .th-ed__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
#crm__widgets .th-ed__text { max-width: 580px; }
#crm__widgets .th-ed__h2 { margin: 0 0 16px; color: var(--th-text); font: 700 28px/1.2 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.7px; }
#crm__widgets .th-ed__lead { margin: 0 0 16px; color: #0f172a; font: 500 20px/1.55 Theme-Font, Inter, sans-serif; letter-spacing: -.1px; text-wrap: pretty; }
#crm__widgets .th-ed__body { color: var(--th-muted); font: 400 17px/1.7 Theme-Font, Inter, sans-serif; }
#crm__widgets .th-ed__body p { margin: 0 0 15px; }
#crm__widgets .th-ed__body p:last-child { margin-bottom: 0; }
@media (max-width: 1099.98px) { #crm__widgets .th-ed { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; } #crm__widgets .th-ed__lead { font-size: 19px; } }
@media (max-width: 899.98px) { #crm__widgets .th-ed { grid-template-columns: minmax(0, 1fr); gap: 28px; } #crm__widgets .th-ed__pic { align-self: auto; aspect-ratio: 16 / 10; } #crm__widgets .th-ed__min { display: none; } #crm__widgets .th-ed__text { max-width: 640px; } #crm__widgets .th-ed__h2 { font-size: 24px; } #crm__widgets .th-ed__lead { font-size: 19px; } #crm__widgets .th-ed__body { font-size: 16.5px; } }
#crm__widgets .th-ed { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }