/* Netzwerk (draft tree "Netzwerk (Entwurf)", task 05, 2026-11-12): page-scoped additions on top of the Die DGM look
   (about.css, loaded through sys_template 434 via basedOn). Only what the family needs so far: the section pill menu's
   hub entry, the text column, the contact block, the site header over bright heroes and light heads, the font wait.
   Parts copied from ../../ThemenRedesign/design/assets/themen.css (2026-11-12) carry a "from themen.css" note; the
   class prefix is nw- instead of tm-. themen.css itself is never loaded on these pages. Nothing restyles the inside of
   a CRM widget. Tokens as in about.css: primary #00abe3, hover #007aa8, ink #003e52, text #0f172a, border rgb(227 232 236). */
:root {
  --nw-primary: #00abe3;
  --nw-deep: #007aa8;
  --nw-ink: #003e52;
  --nw-ink-deep: #00212c;
  --nw-sky: #7fd8f5;
  --nw-text: #0f172a;
  --nw-muted: #475569;
  --nw-border: rgb(227 232 236);
  --nw-grid: min(1152px, 100vw - 48px);
}
#crm__widgets .nw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- section pill menu (menu_subpages listing the hub and the branch pages; publish.php navNetzwerk()) ----------
   Glass, dark labels, the current page filled and the compact stuck state come from about.css unchanged. The hub entry
   gets the same inner padding as the Die DGM and Themen hub entries (about.css names only their addresses). */
#crm__widgets .frame-type-menu_subpages li:first-child > a:is([href$="/netzwerk-neu"], [href$="/network-new"], [href$="/netzwerk"], [href$="/network"]) { padding-left: 14px; }

/* ---------- text column (from themen.css .tm-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; }

/* ---------- contact block (from themen.css .tm-contact): dark left half (the page's one dark element), people and
   contact rows on the right; its section has no head of its own ---------- */
#crm__widgets .nw-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(952px, 100vw - 48px); margin: 0 calc((100% - min(952px, 100vw - 48px)) / 2); overflow: hidden; border: 1px solid var(--nw-border); border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -36px rgb(0 33 44 / .45); scroll-margin-top: 176px; }
#crm__widgets .nw-contact__dark { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 44px 40px; background: radial-gradient(120% 80% at 0% 0%, rgb(0 171 227 / .22), transparent 60%), linear-gradient(150deg, var(--nw-ink), var(--nw-ink-deep)); color: #fff; }
#crm__widgets .nw-contact__pill { margin: 0 0 14px; padding: 4px 10px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; background: rgb(255 255 255 / .06); color: #7fd8f5; font: 700 11px/1.2 Theme-Font, Inter, sans-serif; letter-spacing: 1.1px; text-transform: uppercase; }
#crm__widgets .nw-contact__title { margin: 0 0 14px; color: #fff; font: 700 28px/1.2 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.7px; }
#crm__widgets .nw-contact__text { margin: 0 0 28px; color: rgb(255 255 255 / .8); font: 400 16px/1.65 Theme-Font, Inter, sans-serif; }
/* an e-mail address inside the dark half's sentence: the light DGM tone (#00abe3 on the dark ground is under 4.5:1) */
#crm__widgets .nw-contact__text a { color: #7fd8f5; text-decoration: underline; text-underline-offset: 3px; }
#crm__widgets .nw-contact__text a:hover { color: #fff; }
#crm__widgets .nw-contact__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: auto; padding: 0 22px; border-radius: 10px; background: var(--nw-primary); color: #fff !important; font: 600 16px/1 Theme-Font, Inter, sans-serif; text-decoration: none; transition: background-color .2s; }
#crm__widgets .nw-contact__btn:hover { background: var(--nw-deep); }
#crm__widgets .nw-contact__btn:focus-visible { outline: 2px solid #7fd8f5; outline-offset: 3px; }
#crm__widgets .nw-contact__light { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 40px; }
#crm__widgets .nw-contact__people { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
#crm__widgets .nw-contact__person { display: flex; align-items: center; gap: 16px; margin: 0; }
#crm__widgets .nw-contact__person img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(0 171 227 / .3); }
#crm__widgets .nw-contact__name { margin: 0; color: var(--nw-text); font: 700 17px/1.3 Heading-Font, "Inter Tight", Inter, sans-serif; }
#crm__widgets .nw-contact__role { margin: 2px 0 0; color: var(--nw-muted); font: 400 14.5px/1.4 Theme-Font, Inter, sans-serif; }
#crm__widgets .nw-contact__row { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--nw-border); }
#crm__widgets .nw-contact__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: rgb(0 171 227 / .1); color: var(--nw-primary); }
#crm__widgets .nw-contact__label { margin: 0; color: var(--nw-muted); font: 600 12px/1.3 Theme-Font, Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#crm__widgets .nw-contact__row a { color: var(--nw-primary); font: 600 16px/1.4 Theme-Font, Inter, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
#crm__widgets .nw-contact__row--first { padding-top: 0; border-top: 0; }
#crm__widgets > section.dgm-ex-root:has(.nw-contact) > div > header { display: none; }
@media (max-width: 767.98px) {
  #crm__widgets .nw-contact { grid-template-columns: minmax(0, 1fr); border-radius: 20px; }
  #crm__widgets .nw-contact__dark, #crm__widgets .nw-contact__light { padding: 28px 24px; }
  #crm__widgets .nw-contact__title { font-size: 24px; }
  #crm__widgets .nw-contact__person img { width: 60px; height: 60px; }
}

/* ---------- site header (from themen.css, round 2 and v2) ---------- */
/* bright heroes (dark menu, page field tx_dgm_fullscreen_hero = 2): pinned, the bar is the same blue as on the dark
   heroes, so the blue logo turns white there (at the top it stays blue on the bright ground) */
body.dgm-page-has-fullscreen-hero-dark .mainmenu.dgm-mainmenu--pinned #logo img { filter: brightness(0) invert(1); }
/* bright heroes, header over the hero (not pinned): search and language buttons with ink icons and a visible border */
body.dgm-page-has-fullscreen-hero-dark .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 .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 .mainmenu:not(.dgm-mainmenu--float) .dgm-mainmenu-overlay-actions :is(button[aria-label="Search"], #options-menu):hover { border-color: #00abe3 !important; }
/* pages with the light head: the header keeps its 80px in flow (back at the top it returned at 50px first and pushed
   the page down twice, layout shift 0.06 in the Themen audit) */
body:not(.dgm-page-has-fullscreen-hero) .dgm-page-header-wrap .mainmenu:not(.dgm-mainmenu--float) { min-height: 80px; }

/* ---------- font wait (netzwerk-fw.js sets html.nw-fw; from themen.css round 2, tm-fw renamed) ----------
   An Event Hero's copy is hidden with visibility until its web fonts are in, so nothing visible moves at the swap. A
   page-own hero (the network hero) hides its own text block under html.nw-fw in its own stylesheet. */
html.nw-fw #crm__widgets section[data-event-hero] [class$="-hero__copy"] { visibility: hidden; }