/* dgm_section_feeds (2026-11-12, Netzwerk task 19): CRM dates and/or news in boxes that hold their height from the first
   paint. Complete in itself; moved from the Netzwerk page files (pages/54.css .nwy-feed*, groups/nachwuchs.css .nwy-feed*
   and .nws-feed, pages/53.css .rf-feed* and .rf-date*, pages/4709.css .wd-feed*, pages/52.css .cm-news) under the
   element's own prefix dsf-. Nothing here restyles the inside of a CRM widget. */

/* the frame: as the html elements it replaces (about.css: the last element of a section container ends flush) */
#crm__widgets#crm__widgets section.dgm-ex-root .frame-type-dgm_section_feeds:last-child { margin-bottom: 0; }
/* a section that ends in CRM widgets gives part of its bottom padding to the widgets' own trailing space (the rhythm
   rules of about.css for html frames, copied for this element's frame; the later one wins, as there) */
#crm__widgets#crm__widgets > section.dgm-ex-root:not(.bg-muted\/30):has(> div > div > .frame-type-dgm_section_feeds:last-child .custom-compiled-plugin-element) { padding-bottom: 8px; }
#crm__widgets#crm__widgets > section.dgm-ex-root:not(.bg-muted\/30):has(> div > div > .frame-type-dgm_section_feeds:last-child :is(news-list, .news-list)) { padding-bottom: var(--s-half, calc(clamp(56px, 41px + 4.38vw, 112px) / 2)); }

/* the section's own head is hidden when the element brings two heads of its own (layout "pair") */
#crm__widgets > section.dgm-ex-root:has(.dsf-feeds) > div > header { display: none; }

/* ---------- layout "pair": dates and news side by side ---------- */
.dsf-feeds { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; width: 100%; text-align: left; --dsf-h: 424px; }
.dsf-feed { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 176px; }
.dsf-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; }
.dsf-h2 { margin: 0 0 24px; color: #0f172a; font: 700 36px/1.15 Heading-Font, "Inter Tight", Inter, sans-serif; letter-spacing: -.9px; text-wrap: balance; }

/* the box: one fixed height for both columns, so nothing below moves when the widgets arrive */
.dsf-feed__card { position: relative; display: flex; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2); }
.dsf-feed__box { position: relative; height: var(--dsf-h); overflow: hidden; padding: 20px 20px 0; }
.dsf-feed__box::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(rgb(255 255 255 / 0), #fff); pointer-events: none; }
.dsf-feed--news .dsf-feed__box { padding: 16px 16px 0; }
/* the dates card is as tall as its list (a short list leaves the page ground, not an empty white box); its box never
   grows past the news box, so the row keeps the news box's fixed height */
.dsf-feed--dates .dsf-feed__card { flex: none; }
.dsf-feed--dates .dsf-feed__box { height: auto; min-height: 132px; max-height: var(--dsf-h); }
/* "no dates": feeds.js shows the line (a style rule per element in <head>, because the site's Vue app renders
   #crm__widgets again after load) */
.dsf-feed__empty { display: none; position: absolute; inset: 0 0 56px; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 24px; color: #475569;
  font: 400 15px/1.5 Theme-Font, Inter, sans-serif; text-align: center; }
.dsf-feed__card--nofoot .dsf-feed__empty { inset: 0; }
.dsf-feed__empty i { color: #00abe3; }
.dsf-feed__foot { margin: 0; padding: 16px 20px 18px; border-top: 1px solid rgb(227 232 236); background: #fff; }
.dsf-feed__foot a { display: inline-flex; align-items: center; gap: 8px; color: #00abe3 !important; font: 600 15px/1.3 Theme-Font, Inter, sans-serif; text-decoration: none; }
.dsf-feed__foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dsf-feed__foot a i { font-size: 12px; }

/* source "committee" (one committee's CRM calendar widget): a fixed box that scrolls inside, no fade */
.dsf-src--committee .dsf-feed--dates .dsf-feed__box { height: 268px; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; padding-bottom: 16px; }
.dsf-src--committee .dsf-feed--dates .dsf-feed__box::after { display: none; }
/* source "tags": the empty line stacked; the list drawn by feeds.js from the public calendar feed */
.dsf-src--tags .dsf-feed__empty { flex-direction: column; }
.dsf-src--tags .dsf-feed__empty i { font-size: 20px; }
.dsf-dates { margin: 0; padding: 0; list-style: none; }
.dsf-date { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid rgb(227 232 236); }
.dsf-date:first-child { padding-top: 0; border-top: 0; }
.dsf-date__d { color: #00475e; font: 700 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dsf-date__t { color: #0f172a; font: 600 15px/1.4 Theme-Font, Inter, sans-serif; }
.dsf-date__t a { color: inherit !important; text-decoration: none; }
.dsf-date__t a:hover { color: #00abe3 !important; text-decoration: underline; }
.dsf-date__p { margin-top: 2px; color: #475569; font: 400 13.5px/1.4 Theme-Font, Inter, sans-serif; }

@media (min-width: 1024px) and (max-width: 1199.98px) { .dsf-feeds { --dsf-h: 440px; } }
@media (max-width: 1023.98px) {
  .dsf-feeds { grid-template-columns: minmax(0, 1fr); gap: 56px; --dsf-h: 412px; }
  /* one column: the dates box has a fixed height (the news come right after it) */
  .dsf-feed--dates .dsf-feed__box { height: 200px; min-height: 0; }
  .dsf-src--committee .dsf-feed--dates .dsf-feed__box { height: 220px; }
}
@media (max-width: 767.98px) {
  .dsf-h2 { font-size: 30px; letter-spacing: -.6px; }
  .dsf-feeds { --dsf-h: 580px; }
  .dsf-feed__box { padding: 14px 12px 0; }
}
@media (min-width: 640px) and (max-width: 767.98px) { .dsf-feeds { --dsf-h: 430px; } }
@media (max-width: 359.98px) { .dsf-feeds { --dsf-h: 680px; } }

/* ---------- layout "dates": the dates card alone, one fixed box (room for about three dates; more fade out) ---------- */
.dsf-solo { --dsf-h: 236px; width: min(760px, 100%); margin: 0 auto; text-align: left; }
.dsf-solo .dsf-feed__card { flex: none; }
.dsf-solo.dsf-src--committee .dsf-feed__box { overflow: auto; overscroll-behavior: contain; padding-bottom: 16px; }
.dsf-solo.dsf-src--committee .dsf-feed__box::after { display: none; }
@media (max-width: 767.98px) { .dsf-solo { --dsf-h: 300px; } }

/* ---------- layout "news": the news widget without a card; its height is reserved per width (field "heights",
   written per element into <head> by the ReservedHeightsProcessor; this default is the value for eight articles as
   cards). Option "loading placeholder": a quiet 4 x 2 skeleton until the widget has rendered (feeds.js), then the
   widget fades in. Optional: a centred link under it. From pages/52.css .cm-news and pages/35.css .hb-res--news, .hb-more ---------- */
.dsf-news { position: relative; min-height: 169px; }
#crm__widgets .dsf-more { display: flex; justify-content: center; margin: 24px 0 0; }

/* ---------- layout "aside": head with intro and link left, the calendar in a card right (the hub's next meetings;
   pages/35.css .hb-meet, its shared heads .hb-pill, .hb-h2, .hb-lead, .hb-link and tokens, renamed) ---------- */
.dsf-aside, .dsf-news, .dsf-more { --dsf-muted: #5b6b7f; --dsf-fast: 120ms; --dsf-base: 220ms; --dsf-slow: 320ms; --dsf-ease: cubic-bezier(.2, .7, .2, 1);
  --dsf-shadow: 0 1px 2px rgb(15 34 51 / .04), 0 10px 30px -18px rgb(15 34 51 / .2); --dsf-sk: #e6edf3; }
#crm__widgets .dsf-aside { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
#crm__widgets > section.dgm-ex-root:has(.dsf-aside) > div > header { display: none; }
#crm__widgets .dsf-hd-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 .dsf-hd-pill i { font-size: 11px; }
#crm__widgets .dsf-hd-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 .dsf-hd-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 .dsf-hd-h2 { font-size: 30px; letter-spacing: -.75px; } #crm__widgets .dsf-hd-lead { font-size: 16px; } }
#crm__widgets .dsf-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(--dsf-fast) var(--dsf-ease); }
#crm__widgets .dsf-link i { font-size: 11px; transition: transform var(--dsf-base) var(--dsf-ease); }
#crm__widgets .dsf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
#crm__widgets .dsf-link:hover i { transform: translateX(3px); }
#crm__widgets .dsf-link:focus-visible { outline: 2px solid #00abe3; outline-offset: 3px; border-radius: 4px; }
#crm__widgets .dsf-aside { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; width: min(1152px, 100vw - 48px); margin: 0 calc((100% - min(1152px, 100vw - 48px)) / 2); text-align: left; }
#crm__widgets .dsf-aside__head { padding-top: 6px; }
#crm__widgets .dsf-aside__head .dsf-link { margin-top: 18px; }
#crm__widgets .dsf-aside__box { min-width: 0; padding: 22px 26px; border: 1px solid rgb(227 232 236); border-radius: 16px; background: #fff; box-shadow: var(--dsf-shadow); }
#crm__widgets .dsf-aside__empty { margin: 0; color: #475569; font: 400 16px/1.6 Theme-Font, Inter, sans-serif; }
#crm__widgets .dsf-aside__empty[hidden] { display: none; }
@media (max-width: 899.98px) {
  #crm__widgets .dsf-aside { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #crm__widgets .dsf-aside__box { padding: 16px 18px; }
}

/* the loading placeholder (pages/35.css .hb-res, from themen.css .tm-res): a quiet skeleton until the widget has
   rendered (feeds.js adds is-ready), then the widget fades in, its inside untouched */
#crm__widgets .dsf-res { position: relative; }
#crm__widgets .dsf-res::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; pointer-events: none; background: var(--dsf-sk-bg); animation: dsf-sk 1.2s ease-in-out infinite alternate; transition: opacity var(--dsf-base) var(--dsf-ease); }
#crm__widgets .dsf-res.is-ready::before { opacity: 0; animation: none; }
#crm__widgets .dsf-res > * { position: relative; z-index: 1; transition: opacity var(--dsf-base) var(--dsf-ease), transform var(--dsf-base) var(--dsf-ease); }
#crm__widgets .dsf-res:not(.is-ready) > * { opacity: 0; transform: translateY(6px); }
@keyframes dsf-sk { from { opacity: 1; } to { opacity: .5; } }
/* calendar skeleton: four rows of a date tile and two lines; news: two rows of four cards */
#crm__widgets .dsf-res--cal { --dsf-sk-bg:
  linear-gradient(var(--dsf-sk) 0 0) 0 4px / 48px 48px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 10px / 60% 12px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 32px / 34% 10px no-repeat,
  linear-gradient(var(--dsf-sk) 0 0) 0 84px / 48px 48px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 90px / 55% 12px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 112px / 30% 10px no-repeat,
  linear-gradient(var(--dsf-sk) 0 0) 0 164px / 48px 48px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 170px / 62% 12px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 192px / 36% 10px no-repeat,
  linear-gradient(var(--dsf-sk) 0 0) 0 244px / 48px 48px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 250px / 50% 12px no-repeat, linear-gradient(var(--dsf-sk) 0 0) 64px 272px / 32% 10px no-repeat; }
#crm__widgets .dsf-res--news { width: min(1152px, 100vw - 48px); margin: 0 calc((100% - min(1152px, 100vw - 48px)) / 2);
  --dsf-sk-bg: linear-gradient(var(--dsf-sk) 0 0) 0 0 / calc((100% - 72px) / 4) 46% no-repeat, linear-gradient(var(--dsf-sk) 0 0) 33.333% 0 / calc((100% - 72px) / 4) 46% no-repeat,
    linear-gradient(var(--dsf-sk) 0 0) 66.666% 0 / calc((100% - 72px) / 4) 46% no-repeat, linear-gradient(var(--dsf-sk) 0 0) 100% 0 / calc((100% - 72px) / 4) 46% no-repeat,
    linear-gradient(var(--dsf-sk) 0 0) 0 100% / calc((100% - 72px) / 4) 46% no-repeat, linear-gradient(var(--dsf-sk) 0 0) 33.333% 100% / calc((100% - 72px) / 4) 46% no-repeat,
    linear-gradient(var(--dsf-sk) 0 0) 66.666% 100% / calc((100% - 72px) / 4) 46% no-repeat, linear-gradient(var(--dsf-sk) 0 0) 100% 100% / calc((100% - 72px) / 4) 46% no-repeat; }
/* the calendar's default reservation (the hub's, five dates, layout 3); the element's field "heights" overrides it */
.dsf-res--cal { min-height: 402px; }
@media (prefers-reduced-motion: reduce) { #crm__widgets .dsf-res::before { animation: none; } #crm__widgets .dsf-res > * { transition: none; } }

/* 2026-11-12 (Themen task 20, director): option "news_inset" of the layout "news": the list stays inside the element's
   frame instead of taking the page grid's width (the Themen newsletter page: its list was an html element inside its
   frame, 16 px narrower on each side below 640 px). Off by default: the Netzwerk pages are unchanged. */
#crm__widgets .dsf-news.dsf-news--inset { width: auto; margin: 0; }