/* dgm_section_contact (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: netzwerk.css (the contact block, tokens), pages/54.css (.nwy-contact),
   groups/nachwuchs.css (.nws-contact, the drawings' line style). Nothing redesigned. */
.frame-type-dgm_section_contact { --nw-primary: #00abe3; --nw-deep: #007aa8; --nw-ink: #003e52; --nw-ink-deep: #00212c; --nw-text: #0f172a; --nw-muted: #475569; --nw-border: rgb(227 232 236); }
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-dgm_section_contact:last-child { margin-bottom: 0; }
/* ---------- 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; }
}

/* ---------- the Nachwuchs page: two e-mail rows on the light side (pages/54.css) ---------- */
.nwy-contact .nw-contact__light { gap: 22px; }
.nwy-contact .nw-contact__row a { overflow-wrap: anywhere; }

/* ---------- the Nachwuchs subpages: rows that may wrap, a drawing above them (groups/nachwuchs.css) ---------- */
.nws-contact .nw-contact__light { gap: 22px; }
.nws-contact .nw-contact__row a { overflow-wrap: anywhere; }
.nws-contact__art { display: block; width: 92px; margin: 0 0 4px 2px; }
.nws-contact:has(.nws-contact__art) .nw-contact__light { justify-content: center; }
@media (max-width: 767.98px) { .nws-contact__art { width: 72px; } }
#crm__widgets .nw-contact .nwh__svg { display: block; width: 100%; height: auto; overflow: visible; }
.nw-contact .nwh__svg .k { stroke: #003e52; stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nw-contact .nwh__svg .k.f { stroke-width: 1.1px; }
.nw-contact .nwh__svg .k.t { stroke-width: 1.3px; }
.nw-contact .nwh__svg path:not(.k), .nw-contact .nwh__spring path { vector-effect: non-scaling-stroke; }

/* ---------- look "themen" (Themen task 20, 2026-11-12, agent D): contactTwo() of Tools/ThemenRedesign/design/lib-themen.php
   is this panel (it was copied from there); themen.css adds hyphenation, a phone number that never wraps (.tm-tel), the gap
   above the panel on pages with the topic browser (QA 12) and 8 px section padding after the newsletter card ---------- */
#crm__widgets .nw-contact--themen { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
#crm__widgets .nw-contact--themen .nw-contact__row a[href^="tel:"] { white-space: nowrap; }
body:has(.tm-b, .frame-type-dgm_section_browser) #crm__widgets .nw-contact--themen { margin-top: 38px; }
@media (max-width: 1099.98px) { body:has(.tm-b, .frame-type-dgm_section_browser) #crm__widgets .nw-contact--themen { margin-top: 48px; } }
#crm__widgets#crm__widgets > section.dgm-ex-root:has(.th-nl) ~ section.dgm-ex-root.dgm-ex-root:has(.nw-contact--themen) { padding-top: 8px; }

/* ---------- look "bright" (Veranstaltungen task 15, 2026-11-13): the same panel, measures and markup as "standard", the left
   half light: sky tint ground (#e6f6fd into #f4fbfe) with one large soft cyan shape far back, navy text, the pill in the
   family's bright style (white, cyan hairline, cyan dot, navy text), the button filled #00abe3 with white text. Task 22
   (agent D, 2026-11-13): no sparkle; the button's shadow has an offset and a blur in the navy of the ground (no cyan glow);
   pill 12px, role 15px (nothing under 12px, whole pixels). Every rule is scoped to .nw-contact--bright: the four other
   looks are untouched.
   Notes: Tools/VeranstaltungenRedesign/design/elements/contact_bright.md ---------- */
#crm__widgets .nw-contact--bright { box-shadow: 0 30px 60px -36px rgb(0 62 82 / .32); }
#crm__widgets .nw-contact--bright .nw-contact__dark { isolation: isolate; overflow: hidden; background: linear-gradient(150deg, #e6f6fd 0%, #f4fbfe 100%); color: #003e52; }
#crm__widgets .nw-contact--bright .nw-contact__dark::before { content: ""; position: absolute; z-index: -1; right: -150px; bottom: -190px; width: 400px; height: 380px; border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; background: radial-gradient(closest-side, rgb(0 171 227 / .2), rgb(0 171 227 / .1) 62%, rgb(0 171 227 / 0)); pointer-events: none; }
#crm__widgets .nw-contact--bright .nw-contact__pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; border-color: rgb(0 171 227 / .34); background: rgb(255 255 255 / .82); color: #003e52; box-shadow: 0 6px 18px -12px rgb(0 62 82 / .35); }
#crm__widgets .nw-contact--bright .nw-contact__pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #00abe3; }
#crm__widgets .nw-contact--bright .nw-contact__title { color: #003e52; }
#crm__widgets .nw-contact--bright .nw-contact__text { color: #003e52; }
#crm__widgets .nw-contact--bright .nw-contact__text a { color: #00abe3; font-weight: 600; }
#crm__widgets .nw-contact--bright .nw-contact__text a:hover { color: #003e52; }
#crm__widgets .nw-contact--bright .nw-contact__btn { box-shadow: 0 1px 2px rgb(0 62 82 / .16), 0 6px 14px -6px rgb(0 62 82 / .3); transition: background-color .2s, box-shadow .2s; }
#crm__widgets .nw-contact--bright .nw-contact__btn:hover { background: #007aa8; box-shadow: 0 1px 2px rgb(0 62 82 / .18), 0 9px 18px -7px rgb(0 62 82 / .36); }
#crm__widgets .nw-contact--bright .nw-contact__role { font-size: 15px; }
#crm__widgets .nw-contact--bright .nw-contact__btn:focus-visible { outline-color: #003e52; }
@media (max-width: 767.98px) {
  #crm__widgets .nw-contact--bright .nw-contact__dark::before { right: -130px; bottom: -200px; width: 320px; height: 300px; }
}