/* Feed + category components adapted from E, without its homepage layout.
   The palette tokens and theme-art swap remain in the shared site system. */
.df-page { padding-block: 64px 0; }
.df-page [hidden] { display: none !important; }
.df-page :is(h1, h2, h3) { text-wrap: balance; }
.df-page .theme-art { display: block; pointer-events: none; }
.df-page .theme-art img { width: 100%; height: 100%; object-fit: contain; }
.df-heading { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-bottom: 36px; }
.df-heading > div { max-width: 800px; }
.df-heading h1 { font-size: clamp(38px, 4.7vw, 64px); line-height: 1.06; letter-spacing: -.04em; }
.df-heading p { margin-top: 22px; max-width: 64ch; color: var(--tud-color-text-secondary); font-size: 19px; }
.df-heading .df-heading-art { flex: 0 0 230px; width: 230px; height: 230px; transform: rotate(6deg); }
.df-underline { position: relative; white-space: nowrap; }
.df-underline svg { position: absolute; width: 100%; height: 12px; left: 0; bottom: -8px; color: var(--site-accent-text); }
.df-pills { margin-bottom: 42px; gap: 10px; }
.df-pills .deal-pill { border-color: var(--site-control-border); }
.df-pills .deal-pill[aria-current] { color: var(--tud-color-text-on-accent); background: var(--tud-color-accent-base); border-color: var(--tud-color-accent-base); }
.df-section-title { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.df-featured > h2 { margin-bottom: 22px; }
.df-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 40px; padding: 36px 40px 0; border-radius: 16px; color: inherit; text-decoration: none; }
.df-brand-line { display: flex; align-items: center; gap: 14px; min-width: 0; }
.df-brand-line h3 { font-size: 23px; line-height: 1.15; overflow-wrap: anywhere; }
.df-brand-logo { position: relative; flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--tud-color-bg-surface); border: 1px solid var(--tud-color-border-default); border-radius: 10px; color: var(--tud-color-text-secondary); font-size: 18px; font-weight: 700; overflow: hidden; }
.df-brand-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tud-color-bg-surface); padding: 5px; }
.df-saving-number { font-family: var(--tud-font-secondary); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.df-saving-rest { font-weight: 600; line-height: 1.15; text-transform: lowercase; }
.df-saving-label { font-size: 32px; line-height: 1.1; font-weight: 700; overflow-wrap: anywhere; }
.df-feature-saving { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-block: 28px 14px; }
.df-feature-saving .df-saving-number { font-size: clamp(64px, 7vw, 96px); }
.df-feature-saving .df-saving-rest { font-size: 28px; }
.df-feature-title { font-size: 23px; max-width: 32ch; line-height: 1.4; overflow-wrap: anywhere; }
.df-meta { font-size: 14px; line-height: 1.5; }
.df-feature-copy > .df-meta { margin-top: 14px; }
.df-art { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 10px; }
.df-art > .theme-art { width: 100%; height: 100%; }
.df-art .theme-art img { padding: 15px; }
.df-art > .df-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-feature > .df-art { width: 100%; height: 310px; align-self: center; }
.df-feature-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; border-top: 1.5px dashed currentColor; padding-block: 20px; font-weight: 700; }
.df-catalogue, .df-directory { margin-top: 64px; }
.df-catalogue-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.df-catalogue-heading p, .df-directory-heading p { color: var(--tud-color-text-secondary); }
.df-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.df-card { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.df-card-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 200px; padding: 20px; border-radius: 12px; gap: 8px; }
.df-card-saving { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.df-card-saving .df-saving-number { font-size: clamp(38px, 3.7vw, 52px); }
.df-card-saving .df-saving-rest { font-size: 18px; overflow-wrap: anywhere; }
.df-card-saving .df-saving-label { font-size: 25px; }
.df-card-visual > .df-art { height: 150px; }
.df-card-visual .theme-art img { padding: 0; }
.df-card-body { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.df-card-title { margin-top: 14px; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.df-card-body > .df-meta { margin-block: 10px 18px; color: var(--tud-color-text-secondary); }
.df-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tud-color-border-strong); font-size: 14px; font-weight: 700; }
.df-feature:hover, .df-card:hover .df-card-visual { outline: 2px solid var(--site-accent-text); outline-offset: 4px; }
.df-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.df-directory-heading p { margin-top: 10px; }
.df-directory-heading .df-shop-art { width: 80px; height: 80px; flex: none; transform: rotate(6deg); }
.df-brand-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; padding: 0; margin: 0; list-style: none; }
.df-brand { display: flex; align-items: center; gap: 14px; min-height: 100px; padding-block: 20px; border-top: 1px solid var(--tud-color-border-strong); color: inherit; text-decoration: none; }
.df-brand > span:last-child { min-width: 0; }
.df-brand-name { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.df-brand-category { display: block; margin-top: 6px; color: var(--tud-color-text-secondary); font-size: 13px; }
.df-brand:hover .df-brand-name { text-decoration: underline; text-underline-offset: 3px; }
.df-how { margin-top: 64px; padding-block: 36px; border-block: 1px solid var(--tud-color-border-strong); }
.df-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style-position: inside; padding: 0; margin: 28px 0 0; }
.df-how li::marker { color: var(--site-accent-text); font-family: var(--tud-font-secondary); font-weight: 700; }
.df-how strong { font-size: 18px; }
.df-how li span { display: block; margin-top: 8px; max-width: 32ch; color: var(--tud-color-text-secondary); }
.df-signup { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 36px; margin-top: 48px; margin-bottom: 64px; background: var(--tud-color-deal-panel-1); border-radius: 16px; }
.df-signup h2 { font-size: clamp(26px, 3vw, 36px); max-width: 25ch; line-height: 1.1; }
.df-signup p { margin-top: 12px; max-width: 54ch; }
.df-signup .btn { flex: none; }
.df-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 40px 56px; text-align: center; }
.df-state .df-state-art { width: 180px; height: 170px; }
.df-state h2, .df-state h3 { font-size: 30px; line-height: 1.15; }
.df-state p { max-width: 48ch; margin-inline: auto; color: var(--tud-color-text-secondary); }
@media (max-width: 900px) {
  .df-heading .df-heading-art { flex-basis: 150px; width: 150px; height: 160px; }
  .df-feature { padding: 28px 28px 0; gap: 24px; }
  .df-feature > .df-art { height: 260px; }
  .df-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .df-how ol { gap: 24px; }
  .df-signup { padding: 28px; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .df-page { padding-top: 36px; }
  .df-heading { position: relative; display: block; margin-bottom: 28px; }
  .df-heading h1 { padding-right: 28px; }
  .df-heading p { font-size: 17px; margin-top: 20px; }
  .df-heading .df-heading-art { position: absolute; width: 64px; height: 74px; right: -9px; top: -19px; transform: rotate(10deg); }
  .df-heading > div { position: relative; z-index: 1; }
  .df-pills { gap: 8px; margin-bottom: 32px; }
  .df-pills .deal-pill { font-size: 13px; }
  .df-feature { grid-template-columns: 1fr; padding: 24px 24px 0; gap: 20px; }
  .df-feature-saving { margin-top: 22px; }
  .df-feature-saving .df-saving-number { font-size: 76px; }
  .df-feature-title { font-size: 21px; }
  .df-feature > .df-art { height: 190px; }
  .df-feature-bottom { padding-block: 18px; }
  .df-grid { grid-template-columns: 1fr; gap: 32px; }
  .df-card-visual { height: 200px; }
  .df-card-saving .df-saving-number { font-size: 54px; }
  .df-catalogue, .df-directory, .df-how { margin-top: 44px; }
  .df-catalogue-heading { flex-wrap: wrap; gap: 8px; }
  .df-directory-heading { align-items: flex-start; }
  .df-directory-heading .df-shop-art { width: 56px; height: 56px; }
  .df-brand-list { grid-template-columns: 1fr; }
  .df-brand { min-height: 88px; padding-block: 16px; }
  .df-how ol { grid-template-columns: 1fr; gap: 24px; }
  .df-signup { padding: 24px; margin-top: 32px; margin-bottom: 40px; }
}