/* /fuer-angehoerige/ (67a-angehoerige-page.php). Loaded only on that route, after callback.css.
   Reading text 20 px desktop / 19 px phone, nothing under 16 px, 65ch measure.
   `html body.dueseweb-modern #main` beats the Mediterran/Ruhe `.about-page-2026 .ap-section` rules. */

html body.dueseweb-modern #main .dw-ang :is(.ap-section p, .ap-section li, .dw-ang-reach-line) {
  font-size: 20px !important; line-height: 1.6 !important; max-width: 65ch;
}

/* Hero buttons under the chapter head. */
html body.dueseweb-modern #main .dw-ang .dw-ang-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-hero-cta .ap-btn, .dw-ang-print) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 26px;
  border-radius: 16px; font-size: 19px !important; font-weight: 700; line-height: 1.25; white-space: normal;
  text-align: center; text-decoration: none !important; box-sizing: border-box; cursor: pointer; transform: none;
}
html body.dueseweb-modern #main .dw-ang .dw-ang-hero-cta .ap-btn-primary {
  background: var(--dw-terracotta-cta, #bf501c) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 2px solid var(--dw-terracotta-cta, #bf501c) !important;
}
html body.dueseweb-modern #main .dw-ang .dw-ang-hero-cta .ap-btn-primary:is(:hover, :focus-visible, :active) {
  background: var(--dw-terracotta-cta-hover, #a3431a) !important; border-color: var(--dw-terracotta-cta-hover, #a3431a) !important;
}
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-hero-cta a.ap-btn.ap-btn-secondary.dw-cta, .dw-ang-print):not(#dw-ang-x) {
  background: #fffaf2 !important; color: #22180f !important; -webkit-text-fill-color: #22180f !important;
  border: 2px solid #a8431a !important;
}
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-hero-cta .ap-btn-secondary, .dw-ang-print):is(:hover, :focus-visible, :active) { background: #f3e2c7 !important; }
html body.dueseweb-modern #main .dw-ang :is(.ap-btn, .dw-ang-print, a):focus-visible { outline: 3px solid #6e2810 !important; outline-offset: 3px; }

/* Chapter headings with a number coin. */
html body.dueseweb-modern #main .dw-ang .dw-ang-h2 { display: flex; align-items: center; gap: 14px; hyphens: manual; }
html body.dueseweb-modern #main .dw-ang .dw-ang-coin {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: #6e2810; color: #fff; -webkit-text-fill-color: #fff;
  font: 700 22px/1 var(--dw-font-sans, sans-serif);
}

/* Kapitel 1: checklist with big numbers; Kapitel 3: numbered steps. */
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-checklist, .dw-ang-steps) {
  list-style: none !important; counter-reset: dw-ang; margin: 16px 0 !important; padding: 0 !important; max-width: 65ch;
}
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-checklist, .dw-ang-steps) > li {
  counter-increment: dw-ang; position: relative; margin: 0 !important; padding: 12px 0 12px 60px !important;
  border-top: 1px solid rgba(110, 40, 16, .22); list-style: none !important;
}
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-checklist, .dw-ang-steps) > li:first-child { border-top: 0; }
html body.dueseweb-modern #main .dw-ang :is(.dw-ang-checklist, .dw-ang-steps) > li::before {
  content: counter(dw-ang); position: absolute; left: 0; top: 10px; width: 42px; text-align: center;
  font: 700 30px/1.1 var(--dw-font-serif, Georgia, serif); color: #a8431a;
}
html body.dueseweb-modern #main .dw-ang .ap-section li::marker { content: none; }
html body.dueseweb-modern #main .dw-ang .dw-ang-note { font-style: normal; border-left: 4px solid #17546d; padding-left: 14px !important; }
html body.dueseweb-modern #main .dw-ang .dw-ang-print-row { margin: 16px 0 0 !important; }

/* Kapitel 5: plain question / answer pairs. */
html body.dueseweb-modern #main .dw-ang .dw-ang-q {
  margin: 22px 0 6px !important; font-family: var(--dw-font-sans, sans-serif) !important; font-size: 21px !important;
  font-weight: 700 !important; line-height: 1.4 !important; color: #22180f !important; -webkit-text-fill-color: #22180f;
  background: none !important; border: 0 !important; padding: 0 !important; max-width: 65ch; hyphens: manual;
}
html body.dueseweb-modern #main .dw-ang .dw-ang-q:first-of-type { margin-top: 4px !important; }
html body.dueseweb-modern #main .dw-ang .dw-ang-a { margin: 0 !important; }

/* Closing band: callback block, then phone + WhatsApp lines. */
html body.dueseweb-modern #main .dw-ang .dw-ang-close { margin: 28px 0 0; }
html body.dueseweb-modern #main .dw-ang .dw-ang-close > .dw-cb { margin: 0 0 20px; }
html body.dueseweb-modern #main .dw-ang .dw-ang-reach-line { margin: 0 0 10px !important; }
html body.dueseweb-modern #main .dw-ang .dw-ang-reach-line:last-child { margin-bottom: 0 !important; }

@media (max-width: 959px) {
  html body.dueseweb-modern #main .dw-ang :is(.ap-section p, .ap-section li, .dw-ang-reach-line) { font-size: 19px !important; }
  html body.dueseweb-modern #main .dw-ang .dw-ang-hero-cta .ap-btn,
  html body.dueseweb-modern #main .dw-ang .dw-ang-print { width: 100%; }
  html body.dueseweb-modern #main .dw-ang :is(.dw-ang-checklist, .dw-ang-steps) > li { padding-left: 52px !important; }
  html body.dueseweb-modern #main .dw-ang .dw-ang-q { font-size: 20px !important; }
}

/* Print („Checkliste drucken“ or Ctrl+P): the article only, black on white.
   angehoerige.js marks the article's ancestors .dw-ang-print-root (the callback.css idiom);
   :not(#…) adds id weight against the header sheets' fixed #id !important buttons. */
@media print {
  html.dw-ang-printing body > :not(.dw-ang-print-root):not(#dw-ang-x):not(#dw-ang-y),
  html.dw-ang-printing .dw-ang-print-root > :not(.dw-ang-print-root):not(.ap-shell):not(#dw-ang-x):not(#dw-ang-y),
  html.dw-ang-printing .ap-shell :is(.dw-med-head__img, .dw-med-head__scrim, .dw-med-head__chips, .dw-ang-hero-cta, .dw-ang-print-row) { display: none !important; }
  /* The closing band prints only its Telefon line (the checklist sheet keeps the number to call). */
  html.dw-ang-printing .ap-shell .dw-ang-close > :not(.dw-ang-reach),
  html.dw-ang-printing .ap-shell .dw-ang-reach > :not(.dw-ang-reach-line--tel) { display: none !important; }
  /* A printed callback confirmation (callback.css hides the block's siblings) keeps the Telefon line too;
     three ids outrank callback.css's two-id :not() chain. */
  html.dw-cb-printing .dw-ang-close.dw-cb-print-root > .dw-ang-reach:not(#dw-ang-x):not(#dw-ang-y):not(#dw-ang-z) { display: block !important; background: #fff !important; box-shadow: none !important; border: 0 !important; padding: 8pt 0 0 !important; }
  html.dw-cb-printing .dw-ang-reach > :not(.dw-ang-reach-line--tel) { display: none !important; }
  html.dw-cb-printing .dw-ang-reach :is(p, strong, a) { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  html.dw-ang-printing .dw-ang-print-root { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; position: static !important; }
  html.dw-ang-printing body, html.dw-ang-printing .ap-shell, html.dw-ang-printing .ap-shell :is(section, .dw-med-head__inner) {
    background: #fff !important; box-shadow: none !important; border-color: #999 !important; position: static !important; min-height: 0 !important;
  }
  html.dw-ang-printing .ap-shell :is(p, li, h2, h3, strong, a, span) { color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: none !important; }
  html.dw-ang-printing .ap-shell .dw-ang-coin { background: none !important; border: 2px solid #000; }
  html.dw-ang-printing .ap-shell .ap-section { break-inside: avoid; padding: 8pt 0 !important; margin: 0 0 8pt !important; }
}