/* Public editorial compositions (r68 live bugs BUG-014/019/020, UI-023).
   Layout, order and proportions follow the r337 page compositions; colours, type, surfaces, radii and controls come from
   FINAL v18 tokens in light and dark. The renderer emits only the ed-* names defined here (apps/public/render.mjs).
   Deliberately dark r337 bands use the brand chrome tokens in both themes. */
@layer layout {
  /* ---------- Shared composition primitives ---------- */
  :is(.ed-how, .ed-phil, .ed-about-page, .ed-tools-page, .ed-about-hub-main) { --ed-band: 100vmax; }
  :is(.ed-how, .ed-phil, .ed-about-page, .ed-tools-page, .ed-about-hub-main) :is(p, li) { max-width: none; }
  :is(.ed-how, .ed-phil, .ed-about-page, .ed-tools-page, .ed-about-hub-main) .eyebrow { display: block; margin: 0 0 var(--s3); }
  :is(.ed-how, .ed-phil, .ed-about-page, .ed-tools-page, .ed-about-hub-main) .eyebrow::before { content: none; }
  :is(.ed-wrap, .ed-about-wrap, .ed-tools-wrap) { width: 100%; max-width: 1120px; margin-inline: auto; }
  .ed-brand-word { display: inline-block; color: var(--accent-text); }
  .ed-brand-four { color: var(--text); }
  /* Full-width bands inside the shared container, as on the public start page. */
  :is(.ed-section, .ed-about-section, .ed-tool-section, .ed-tools-intro, .ed-final, .ed-about-final, .ed-tools-final) { padding-block: 76px; border-top: 1px solid var(--border-soft); box-shadow: 0 0 0 var(--ed-band) var(--page-solid); clip-path: inset(0 calc(-1 * var(--ed-band))); background: var(--page-solid); }
  :is(.ed-paper, .ed-about-paper) { background: var(--surface); box-shadow: 0 0 0 var(--ed-band) var(--surface); }
  :is(.ed-soft, .ed-about-soft) { background: var(--surface-strong); box-shadow: 0 0 0 var(--ed-band) var(--surface-strong); }
  :is(.ed-section, .ed-tool-section).ed-dark, .ed-about-dark, .ed-final, .ed-about-final, .ed-tools-final { background: var(--brand-page); box-shadow: 0 0 0 var(--ed-band) var(--brand-page); border-top-color: var(--brand-border); color: var(--brand-text); }
  :is(.ed-dark, .ed-about-dark, .ed-final, .ed-about-final, .ed-tools-final) :is(h2, h3) { color: var(--brand-text); }
  :is(.ed-dark, .ed-about-dark, .ed-final, .ed-about-final, .ed-tools-final) p { color: var(--brand-muted); }
  :is(.ed-dark, .ed-about-dark, .ed-final, .ed-about-final, .ed-tools-final) .eyebrow { color: var(--gold-hover); }
  :is(.ed-dark, .ed-about-dark, .ed-final, .ed-about-final, .ed-tools-final, .ed-card.ed-dark) .ed-brand-word { color: var(--gold-hover); }
  :is(.ed-dark, .ed-about-dark, .ed-final, .ed-about-final, .ed-tools-final, .ed-card.ed-dark) .ed-brand-four { color: var(--brand-text); }
  :is(.ed-head, .ed-about-head) { max-width: 780px; margin: 0 auto 34px; text-align: center; }
  :is(.ed-head, .ed-about-head) h2 { margin: 0; }
  :is(.ed-head, .ed-about-head) p { max-width: 680px; margin: 13px auto 0; color: var(--text-muted); }
  :is(.ed-final, .ed-about-final, .ed-tools-final) { text-align: center; }
  :is(.ed-final, .ed-about-final, .ed-tools-final) h2 { max-width: 760px; margin: 0 auto; }
  :is(.ed-final, .ed-about-final, .ed-tools-final) p { max-width: 620px; margin: 14px auto 0; }
  :is(.ed-ctas, .ed-about-ctas, .ed-tools-ctas) { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s5); }
  .ed-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--gold-border); border-radius: 13px; background: var(--gold-soft); color: var(--accent-text); }
  .ed-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- So funktioniert Ready4nexxt (r337 main.how) ---------- */
  .ed-how > .ed-hero { padding: 64px 0 58px; text-align: center; }
  .ed-how > .ed-hero h1 { max-width: 820px; margin: 0 auto; }
  .ed-how .ed-hero .ed-lead { max-width: 770px; margin: 21px auto 0; color: var(--text-muted); font-size: 1.125rem; line-height: 1.7; }
  .ed-how .ed-hero .ed-note { max-width: 700px; margin: 12px auto 0; color: var(--text-faint); font-size: .875rem; }
  .ed-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-card); }
  .ed-flow-card { position: relative; padding: 23px 20px 24px; }
  .ed-flow-card + .ed-flow-card { border-left: 1px solid var(--border-soft); }
  .ed-flow-top { display: flex; align-items: center; gap: var(--s3); }
  .ed-stepno { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
  .ed-flow-card h3 { margin: 14px 0 0; font-size: 1.125rem; }
  .ed-flow-card p { margin: var(--s2) 0 0; color: var(--text-muted); font-size: .84375rem; line-height: 1.58; }
  .ed-reason { display: flex; align-items: center; gap: 18px; max-width: 1000px; margin: 0 auto var(--s5); padding: 21px 23px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); }
  .ed-reason h3, .ed-system-intro h3 { margin: 0; font-size: 1.25rem; }
  .ed-reason p, .ed-system-intro p { margin: 7px 0 0; color: var(--text-muted); font-size: .875rem; }
  .ed-how .ed-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
  .ed-how .ed-card { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
  .ed-how .ed-card.ed-dark { border-color: var(--gold-border); background: var(--brand-surface); color: var(--brand-text); }
  .ed-how .ed-card.ed-dark h3 { color: var(--brand-text); }
  .ed-how .ed-card.ed-dark p { color: var(--brand-muted); }
  .ed-market { padding: 14px; }
  .ed-market img { width: 100%; max-height: 330px; object-fit: contain; border-radius: 11px; }
  .ed-card-copy { padding: 18px 21px 22px; }
  .ed-card-copy h3 { margin: 0; font-size: 1.1875rem; }
  .ed-card-copy p { margin: 7px 0 0; color: var(--text-muted); font-size: .84375rem; line-height: 1.6; }
  .ed-how .ed-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--gold-soft), transparent 25%), var(--brand-page); }
  .ed-how .ed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .ed-how .ed-video .ed-play { position: relative; z-index: 1; width: 72px; height: 72px; padding: 0 0 0 5px; border: 0; border-radius: 50%; background: var(--gold); color: var(--button-text); font-size: 1.625rem; }
  .ed-how .ed-video .ed-play:hover { background: var(--gold-hover); }
  .ed-video-note { padding: 10px 21px 14px; color: var(--brand-muted); font-size: .72rem; }
  .ed-areas, .ed-usecases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
  .ed-area, .ed-use, .ed-myitem { padding: 21px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
  .ed-area h3 { margin: 14px 0 0; font-size: 1.125rem; }
  .ed-area p { margin: var(--s2) 0 0; color: var(--text-muted); font-size: .875rem; line-height: 1.58; }
  .ed-system-intro { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 15px; align-items: start; max-width: 760px; margin: 0 auto 27px; }
  .ed-system, .ed-guided-img { max-width: 1000px; margin: 0 auto; padding: 18px; border: 1px solid var(--gold-border); border-radius: 20px; background: var(--brand-page); box-shadow: var(--shadow-elevated); }
  .ed-system img, .ed-guided-img img { width: 100%; height: auto; border-radius: 12px; }
  .ed-use-head { display: flex; align-items: center; gap: var(--s3); }
  .ed-use-head h3 { margin: 0; font-size: 1.125rem; }
  .ed-use .ed-path { display: grid; gap: 9px; margin-top: 18px; }
  .ed-path-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--text-muted); font-size: .84375rem; line-height: 1.5; }
  .ed-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-soft); color: var(--accent-text); font-size: .72rem; font-weight: 700; }
  .ed-guided { display: grid; grid-template-columns: .34fr .66fr; gap: 30px; align-items: center; max-width: 1000px; margin: 0 auto; }
  .ed-guided h2 { margin: 0; }
  .ed-guided p { margin: 13px 0 0; color: var(--text-muted); }
  .ed-guided-img { padding: 12px; border-radius: 16px; box-shadow: none; }
  .ed-myarea { max-width: 1000px; margin: 0 auto; }
  .ed-myarea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .ed-myitem { padding: 19px; border-radius: var(--radius-card); }
  .ed-myitem .ed-icon { width: 37px; height: 37px; border-radius: 11px; }
  .ed-myitem .ed-icon svg { width: 19px; height: 19px; }
  .ed-myitem h3 { margin: var(--s3) 0 0; font-size: 1rem; }
  .ed-myitem p { margin: 6px 0 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.55; }
  .ed-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; }
  .ed-split-col { padding: var(--s5); background: var(--surface); }
  .ed-split-col + .ed-split-col { border-left: 1px solid var(--border-soft); background: var(--surface-muted); }
  .ed-split-col h3 { margin: 0; font-size: 1.1875rem; }
  .ed-split-col ul { margin: 14px 0 0; padding-left: 18px; color: var(--text-muted); font-size: .875rem; line-height: 1.65; }
  .ed-split-col li + li { margin-top: 5px; }
  /* ---------- Wissen und Nachschlagen (r337 /wissen/, cockpit knowledge family) ---------- */
  /* BUG-017: the navigator card uses the same head as the knowledge family cards (icon beside eyebrow and title). */
  .ed-cockpit-knowledge-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: center; min-width: 0; }
  .ed-cockpit-knowledge-card__body > * { grid-column: 1 / -1; }
  .ed-cockpit-knowledge-card__body > .ed-cockpit-knowledge-card__top { grid-column: 1; grid-row: 1 / span 2; }
  .ed-cockpit-knowledge-card__body > .eyebrow { grid-column: 2; margin: 0 0 var(--s2); }
  .ed-cockpit-knowledge-card__body > .ed-cockpit-knowledge-card__navigator-title-row { grid-column: 2; }
  .ed-cockpit-knowledge-card__navigator-title-row h3 { margin: 0; }
  .ed-cockpit-knowledge-card__body > p { margin: var(--s4) 0 0; color: var(--text-muted); }
  .ed-cockpit-knowledge-card__footer { margin-top: var(--s4); }
  /* BUG-020: the Nachschlagewerke overview card with separated topics and actions. */
  .ed-r4x-knowledge-wide-card__body { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
  .ed-r4x-knowledge-wide-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
  .ed-r4x-knowledge-wide-card__head :is(h3, p) { margin: 0; }
  .ed-r4x-knowledge-wide-card__head .eyebrow { margin-bottom: var(--s2); }
  .ed-r4x-knowledge-wide-card__text { margin: 0; color: var(--text-muted); }
  .ed-cockpit-guide-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }
  .ed-cockpit-guide-topics__item { display: flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: .875rem; }
  .ed-cockpit-guide-topics__item::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
  .ed-r4x-knowledge-wide-card__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
  @media (max-width: 700px) {
    .ed-cockpit-knowledge-card__body { grid-template-columns: minmax(0, 1fr); }
    .ed-cockpit-knowledge-card__body > :is(.eyebrow, .ed-cockpit-knowledge-card__navigator-title-row) { grid-column: 1 / -1; }
  }
  @media (max-width: 480px) {
    .ed-cockpit-guide-topics { grid-template-columns: minmax(0, 1fr); }
  }
  /* Paket U (Daniel 15.10.2026, Teil A Nr. 7): the gate to all basics, a dark brand card like the area heads: gold mark,
     the number of articles, the topics and the whole list of the overview page behind one toggle. */
  .knowledge-gate { display: grid; gap: var(--s5); margin-bottom: var(--s5); padding: clamp(var(--s5), 3vw, var(--s7)); border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: radial-gradient(90% 120% at 100% 0%, var(--gold-soft), transparent 60%), var(--brand-surface); color: var(--text); box-shadow: var(--shadow-elevated); }
  .knowledge-gate__intro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s5); }
  .knowledge-gate__mark { display: grid; place-items: center; width: calc(var(--s8) + var(--s2)); height: calc(var(--s8) + var(--s2)); border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: var(--gold-soft); color: var(--gold); }
  .knowledge-gate__copy :is(.eyebrow, h3, p) { margin: 0; }
  .knowledge-gate__copy h3 { margin-block: var(--s1) var(--s2); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2; }
  .knowledge-gate__copy h3 a { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch-target); color: var(--text); text-decoration: none; }
  .knowledge-gate__copy h3 a span { display: inline-block; color: var(--gold); transition: transform var(--motion-base) var(--ease-standard); }
  .knowledge-gate__copy h3 a:is(:hover, :focus-visible) span { transform: translateX(3px); }
  .knowledge-gate__copy h3 a:focus-visible { outline: 2px solid var(--gold); outline-offset: var(--s1); }
  .knowledge-gate__copy > p:last-child { max-width: var(--reading-max); color: var(--text-muted); }
  .knowledge-gate__count { display: grid; justify-items: center; margin: 0; padding: var(--s2) 0 var(--s2) var(--s5); border-left: 1px solid var(--gold-border); }
  .knowledge-gate__count strong { color: var(--gold); font-family: var(--font-beginner); font-size: 3.25rem; line-height: 1; }
  .knowledge-gate__count span { color: var(--text-muted); font-size: .8125rem; }
  .knowledge-gate__topics { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
  .knowledge-gate__topics li { max-width: none; padding: var(--s1) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: .8125rem; }
  .knowledge-gate__list { border-top: 1px solid var(--border); }
  .knowledge-gate__list > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--touch-target); padding-top: var(--s4); color: var(--gold); font-weight: 600; list-style: none; }
  .knowledge-gate__list > summary::-webkit-details-marker { display: none; }
  .knowledge-gate__list > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: var(--s1); }
  .knowledge-gate__list .accordion-icon { transition: transform var(--motion-base) var(--ease-standard); }
  .knowledge-gate__list[open] .accordion-icon { transform: rotate(45deg); }
  .knowledge-gate__groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); padding-top: var(--s4); }
  /* Paket BH (Daniel 25.10.2026, Variante B): five topics stand in one row from 1200px, as on the overview. */
  @media (min-width: 1200px) { .knowledge-gate__groups:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .knowledge-gate__group h4 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--gold-border); font-size: 1rem; }
  .knowledge-gate__group h4 span { color: var(--gold); font-size: .8125rem; }
  .knowledge-gate__part { margin: var(--s3) 0 0; color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .knowledge-gate__group ul { margin: 0; padding: 0; list-style: none; }
  .knowledge-gate__group a { display: flex; align-items: center; min-height: var(--touch-target); color: var(--text-muted); font-size: .875rem; line-height: 1.45; text-decoration: none; }
  .knowledge-gate__group a:is(:hover, :focus-visible) { color: var(--gold); }
  /* Paket U: the term, question and myth lists as calm reading columns; the terms carry a letter bar. */
  .knowledge-directory__letters { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--border-soft); }
  .knowledge-directory__letters a { display: grid; place-items: center; min-width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--accent-text); font-weight: 700; text-decoration: none; }
  .knowledge-directory__letters a:hover { background: var(--gold); color: var(--button-text); }
  .knowledge-directory__columns { columns: 3 16rem; column-gap: var(--s6); margin: 0; padding: 0; list-style: none; }
  .knowledge-directory__letter { break-inside: avoid; margin-bottom: var(--s4); scroll-margin-top: calc(var(--s8) * 3); }
  .knowledge-directory__letter h3 { margin: 0 0 var(--s1); color: var(--accent-text); font-family: var(--font-beginner); font-size: 1.75rem; line-height: 1.2; }
  .knowledge-directory__letter ul { margin: 0; padding: 0; list-style: none; }
  .knowledge-directory__columns li { break-inside: avoid; max-width: none; }
  .knowledge-directory__columns a { display: flex; align-items: center; min-height: var(--touch-target); border-bottom: 1px solid var(--border-soft); color: var(--text); text-decoration: none; }
  .knowledge-directory__columns a:is(:hover, :focus-visible) strong { color: var(--accent-text); }
  .knowledge-directory__label > span { color: var(--text-faint); font-size: .875rem; }
  @media (max-width: 1023px) { .knowledge-gate__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 767px) {
    .knowledge-gate__intro { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .knowledge-gate__mark { width: calc(var(--s7) + var(--s2)); height: calc(var(--s7) + var(--s2)); }
    .knowledge-gate__count { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) 0 0; border-top: 1px solid var(--gold-border); border-left: 0; }
    .knowledge-gate__count strong { font-size: 2.25rem; }
    .knowledge-gate__groups { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------- Nachschlagewerke und Ratgeber: the 23 r337 articles (UI-023). Two r337 templates share one vocabulary:
     the light tax template (hero with tool card) and the explainer template (dark hero with claim). ---------- */
  /* r337 content width: 1000px wrap minus its 22px side padding. */
  .ed-ratgeber .ed-wrap { max-width: 956px; }
  /* Paket AG (UI-084, UI-055): the sections of an article keep the one distance of independent sections of a page. */
.ed-ratgeber section { padding-block: var(--section-gap); border-top: 1px solid var(--border-soft); }
  /* Paket AY: with a table of contents the sections stand in .page-toc-layout__main instead of directly in .ed-wrap. */
  .ed-ratgeber section:first-of-type, .ed-ratgeber :is(.ed-wrap, .page-toc-layout__main) > section:first-child { border-top: 0; }
  .ed-ratgeber section > h3, .ed-ratgeber :is(.ed-wrap, .page-toc-layout__main) > section h3:not([class]) { margin: 34px 0 10px; }
  .ed-ratgeber :is(h2.ed-sec, section > h2) { margin: 0 0 18px; }
  .ed-ratgeber section > h2 + p:is(.ed-lead, .ed-muted) { margin-top: -6px; }
  .ed-ratgeber { --ed-hero-pad: 40px; }
  .ed-ratgeber .ed-hero { padding: var(--ed-hero-pad) 0; }
  .ed-ratgeber .ed-hero h1 { max-width: 20ch; margin: 0 0 20px; }
  .ed-ratgeber .ed-hero .eyebrow { margin-bottom: var(--s5); }
  /* Explainer template: the dark r337 opening band with the gold title and claim. */
  .ed-ratgeber .ed-hero:has(.ed-claim) { --mark-rx: var(--gold-hover); --mark-four: var(--brand-text); --text: var(--brand-text); --text-muted: var(--brand-muted); --accent-text: var(--gold-hover); padding-block: 64px 56px; border-bottom: 3px solid var(--gold); background: var(--brand-page); box-shadow: 0 0 0 100vmax var(--brand-page); clip-path: inset(0 -100vmax); color: var(--text); }
  .ed-ratgeber .ed-hero:has(.ed-claim) h1 { color: var(--gold-hover); }
  .ed-ratgeber .ed-hero:has(.ed-claim) .eyebrow { color: var(--gold-hover); }
  .ed-ratgeber .ed-hero:has(.ed-claim) .icon-control { color: var(--brand-text); border-color: var(--brand-border); background: transparent; }
  /* Text tokens: the dark band sets them above; the collection card keeps its surface colours. */
  .ed-sub { margin: 0 0 34px; color: var(--text-muted); }
  .ed-claim { max-width: 46ch; margin: 0 0 10px; color: var(--text); font-size: clamp(1.1875rem, 2.4vw, 1.4375rem); font-weight: 700; line-height: 1.4; }
  .ed-claim em { color: var(--accent-text); font-style: normal; }
  .ed-claim-sub { max-width: 52ch; margin: 0; color: var(--text-muted); }
  .ed-ratgeber .ed-lede, .ed-ratgeber .ed-lead { max-width: 62ch; color: var(--text-muted); font-size: clamp(1.0625rem, 2.2vw, 1.1875rem); }
  .ed-ratgeber .ed-lede { margin: 0 0 30px; }
  .ed-muted, .ed-ratgeber .ed-note { color: var(--text-muted); }
  .ed-ratgeber .ed-note { font-size: .90625rem; }
  .ed-stand, .ed-disclaimer { margin: 26px 0 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.68; }
  .ed-disclaimer { margin: 0; }
  .ed-toolcard { margin: 0 0 var(--s3); padding: 30px 32px; border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
  .ed-toolcard h2 { margin: 0 0 var(--s2); font-size: 1.3125rem; }
  .ed-toolcard p { max-width: 56ch; margin: 0 0 22px; color: var(--text-muted); }
  .ed-btn-note { display: block; margin-top: 14px; color: var(--text-muted); font-size: .84375rem; }
  .ed-ratgeber :is(.ed-figure, .ed-fig) { margin: 30px 0 10px; }
  .ed-ratgeber .ed-figure svg { display: block; width: 100%; height: auto; }
  .ed-ratgeber .ed-fig { overflow-x: auto; }
  .ed-ratgeber .ed-fig svg { display: block; width: 100%; min-width: 780px; height: auto; }
  .ed-ratgeber .ed-fig img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
  .ed-ratgeber :is(.ed-figure, .ed-fig) figcaption { max-width: 66ch; margin-top: var(--s3); color: var(--text-muted); font-size: .84375rem; line-height: 1.6; }
  /* UI-055: r337 reading widths of the article figures (inline max-width in the r337 articles), so photos and
     illustrations no longer stretch past the text column to 956px. */
  .ed-ratgeber .ed-fig.ed-fig-380 { max-width: 380px; }
  .ed-ratgeber .ed-fig.ed-fig-420 { max-width: 420px; }
  .ed-ratgeber .ed-fig.ed-fig-460 { max-width: 460px; }
  .ed-ratgeber .ed-fig.ed-fig-560 { max-width: 560px; }
  .ed-ratgeber .ed-fig.ed-fig-620 { max-width: 620px; }
  .ed-fig--tall { max-width: 420px; }
  .ed-fig--key { max-width: 290px; margin: 0; }
  .ed-fig--key img { box-shadow: var(--shadow-elevated); }
  .ed-fig--banner { margin: 0 0 30px; }
  .ed-ratgeber .ed-fig.ed-fig--ebene { max-width: 150px; margin: 0 0 18px; }
  .ed-ratgeber .ed-fig.ed-fig--breit { max-width: 640px; margin: 26px 0 22px; }
  .ed-ratgeber .ed-fig.ed-fig--birnen { max-width: 190px; margin: 0 auto; }
  .ed-auf-img { width: 100%; max-width: 300px; margin: 0 0 18px; }
  .ed-tablewrap { margin: 30px 0 8px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .ed-tablewrap table { min-width: 480px; margin: 0; border: 0; }
  .ed-ratgeber .ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: var(--s4); margin: 30px 0 8px; }
  .ed-ratgeber .ed-item { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
  .ed-ratgeber .ed-item svg { display: block; margin-bottom: 14px; }
  .ed-ratgeber .ed-item h3 { margin: 0 0 7px; font-size: 1.03125rem; }
  .ed-ratgeber .ed-item p { margin: 0; color: var(--text-muted); font-size: .925rem; line-height: 1.62; }
  .ed-mistakes, .ed-merks { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: ed-list; }
  .ed-mistakes li, .ed-merks li { position: relative; max-width: 66ch; margin-bottom: 22px; padding-left: 54px; counter-increment: ed-list; }
  .ed-mistakes li::before, .ed-merks li::before { content: counter(ed-list, decimal-leading-zero); position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 36px; height: 32px; border: 1px solid var(--gold-border); border-radius: 8px; background: var(--gold-soft); color: var(--accent-text); font-size: .8125rem; font-weight: 700; }
  .ed-merks li::before { content: counter(ed-list); width: 32px; }
  .ed-mistakes strong { display: block; margin-bottom: 3px; font-size: 1.03125rem; }
  .ed-ratgeber :is(.ed-callout, .ed-pull) { margin: 30px 0 8px; padding: 22px 26px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-card) var(--radius-card) 0; background: var(--surface-strong); }
  .ed-ratgeber :is(.ed-callout, .ed-pull) p { max-width: 62ch; margin: 0; }
  .ed-pull p { font-size: 1.09375rem; font-weight: 600; line-height: 1.55; }
  .ed-related, .ed-bridges { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 26px; }
  .ed-related > a, .ed-bridge { display: block; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-card); transition: transform var(--motion-fast) var(--ease-standard); }
  .ed-related > a:hover, .ed-bridge:hover { transform: translateY(-1px); color: var(--text); }
  .ed-related > a > span { display: block; margin-top: var(--s1); color: var(--text-muted); font-size: .875rem; font-weight: 400; }
  .ed-related > .ed-related-item, .ed-bridge { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; border-left: 3px solid var(--gold); }
  .ed-related-item img, .ed-bridge img { width: 40px; height: 40px; border-radius: 9px; }
  .ed-related-item b, .ed-bridge b { display: block; font-size: .96875rem; line-height: 1.3; }
  .ed-related-item span span, .ed-bridge span span { display: block; margin-top: 3px; color: var(--text-muted); font-size: .8625rem; font-weight: 400; }
  .ed-ratgeber .ed-sources { margin-top: 34px; padding: 26px 28px; border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--surface-strong); }
  .ed-ratgeber .ed-sources h3 { margin: 0 0 var(--s3); color: var(--accent-text); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
  .ed-ratgeber .ed-sources :is(ul, p) { max-width: none; margin: 0 0 14px; color: var(--text-muted); font-size: .875rem; line-height: 1.68; }
  .ed-ratgeber .ed-sources ul { padding-left: 20px; }
  .ed-ratgeber .ed-sources > :last-child { margin-bottom: 0; }
  .ed-mediarow, .ed-cols, .ed-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
  .ed-cols { gap: 34px; }
  .ed-balance { margin-top: 26px; }
  .ed-mediarow .ed-label { margin: 0 0 10px; color: var(--accent-text); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .ed-ratgeber .ed-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--brand-page); }
  .ed-ratgeber .ed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .ed-pane, .ed-stat, .ed-phase, .ed-case, .ed-check, .ed-shot { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .ed-pane { padding: 26px 28px; box-shadow: var(--shadow-card); }
  .ed-pane--chance { border-top: 3px solid var(--success); }
  .ed-pane--risk { border-top: 3px solid var(--danger); }
  .ed-pane h3 { margin: 0 0 var(--s1); font-size: 1.25rem; }
  .ed-pane h4 { margin: 20px 0 5px; font-size: .96875rem; }
  .ed-pane--chance h3 { color: var(--success); }
  .ed-pane--risk h3 { color: var(--danger); }
  .ed-pane :is(p, li) { font-size: .96875rem; line-height: 1.6; }
  .ed-pane ul { margin: 14px 0; padding-left: 20px; }
  .ed-claimline { margin: 0 0 var(--s4); font-weight: 700; }
  .ed-close { margin-top: 18px; padding-top: var(--s4); border-top: 1px solid var(--border-soft); font-weight: 700; }
  .ed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 26px 0 8px; }
  .ed-stat { padding: 20px 22px; box-shadow: var(--shadow-card); }
  .ed-stat b { display: block; margin-bottom: var(--s1); font-size: 1.625rem; line-height: 1.2; }
  .ed-stat span { color: var(--text-muted); font-size: .875rem; line-height: 1.5; }
  /* Paket AZ: the steps of a new article are an ordered list of phases. */
  .ed-phases, .ed-checks { display: grid; gap: 10px; margin-top: 24px; padding: 0; list-style: none; }
  .ed-phase { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 18px; padding: 14px 18px; }
  .ed-phase b { color: var(--accent-text); font-size: .90625rem; }
  .ed-phase span { font-size: .9375rem; }
  .ed-phase--now { border-color: var(--gold-border); background: var(--gold-soft); }
  .ed-cases { display: grid; gap: var(--s4); margin-top: 26px; }
  .ed-case { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5); align-items: start; padding: 22px 24px; box-shadow: var(--shadow-card); }
  .ed-case h3 { margin: 0 0 var(--s2); font-size: 1.125rem; }
  .ed-case p { max-width: none; margin: 0 0 10px; font-size: .95625rem; line-height: 1.62; }
  .ed-lbl { color: var(--accent-text); font-weight: 700; }
  .ed-case-media { display: grid; place-items: center; }
  .ed-case-img { width: 100%; max-width: 120px; height: auto; }
  .ed-case-img--frame, .ed-ebene-img--frame { border: 1px solid var(--border-soft); border-radius: 10px; }
  .ed-ebene-img, .ed-birnen-img { width: 100%; border-radius: var(--radius-control); }
  .ed-breit-img { border: 1px solid var(--border); border-radius: var(--radius-card); }
  .ed-check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s4); align-items: start; padding: 16px 20px; }
  .ed-box { width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--gold-border); border-radius: 6px; }
  .ed-shot { margin: 30px 0 10px; overflow: hidden; box-shadow: var(--shadow-card); }
  .ed-shot img { width: 100%; height: auto; }
  @media (max-width: 820px) {
    .ed-mediarow, .ed-cols, .ed-balance { grid-template-columns: minmax(0, 1fr); }
    .ed-case { grid-template-columns: 84px minmax(0, 1fr); gap: var(--s4); }
  }
  @media (max-width: 640px) {
    .ed-ratgeber section { padding-block: 42px; }
    .ed-ratgeber .ed-hero:has(.ed-claim) { padding-block: 44px 40px; }
    .ed-toolcard { padding: 24px 22px; }
    .ed-pane { padding: 20px 22px; }
    .ed-phase { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
    .ed-mistakes li, .ed-merks li { padding-left: 46px; }
    .ed-ratgeber :is(.ed-callout, .ed-pull) { padding: 18px 20px; }
  }
  /* Paket AY (Daniel 24.10.2026, Variante A): "Auf dieser Seite" (apps/public/page-toc.mjs). Below 1200px a box under
     the opening, open in two columns from 768px and closed on phones until a tap (apps/public/page-toc-runtime.mjs);
     from 1200px a column beside the text that stays below the pinned head and marks the section being read. The article
     grows by that column, so the text keeps up to its r337 width of 956px; at 1200px it is 873px, so the r337 figures
     keep their 780px and the smallest label in them (11 of 900 units) stays above the type floor. */
  .ed-ratgeber { --page-toc-width: 14.5rem; }
  .page-toc { margin-top: var(--s5); }
  .page-toc__box { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .page-toc__head { display: flex; align-items: center; gap: var(--s3); min-height: var(--touch-target); padding: var(--s3) var(--s5); color: var(--text); font-weight: 700; list-style: none; }
  .page-toc__head::-webkit-details-marker { display: none; }
  .page-toc__head::after { content: ''; flex: none; width: var(--s2); height: var(--s2); margin-left: auto; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: translateY(-25%) rotate(45deg); transition: transform var(--motion-base) var(--ease-standard); }
  .page-toc__box[open] > .page-toc__head::after { transform: translateY(25%) rotate(-135deg); }
  .page-toc__count { color: var(--text-muted); font-size: .8125rem; font-weight: 600; }
  .page-toc__list { margin: 0; padding: 0 var(--s5) var(--s3); list-style: none; }
  .page-toc__list li { max-width: none; break-inside: avoid; border-top: 1px solid var(--border-soft); }
  .page-toc__list a { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); align-items: baseline; padding-block: var(--s3); color: var(--text); font-size: .9375rem; line-height: 1.45; text-decoration: none; }
  .page-toc__list a:hover { color: var(--accent-text); }
  .page-toc__num { color: var(--accent-text); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
  /* A jump lands below the pinned head (scroll-padding-top of the shared shell) with the section mark above its heading. */
  .ed-ratgeber .eyebrow + h2.ed-sec { scroll-margin-top: calc(var(--s6) + var(--s1)); }
  /* From 768px the list is always open and its head is a label (the page script sets the box open and keeps it so). It
     shows from the first paint, so nothing below it moves when the script runs. */
  @media (min-width: 768px) {
    .page-toc__box::details-content { content-visibility: visible; }
    .page-toc__head { cursor: default; }
    .page-toc__head::after { content: none; }
    .page-toc__list { columns: 2; column-gap: var(--s7); }
  }
  @media (min-width: 1200px) {
    /* The opening band of the explainers starts its text where the text column starts. */
    .ed-ratgeber:has(.page-toc) .ed-wrap { max-width: calc(956px + var(--page-toc-width) + var(--s6)); }
    .ed-ratgeber:has(.page-toc) .ed-hero > .ed-wrap { padding-left: calc(var(--page-toc-width) + var(--s6)); }
    .page-toc-layout { display: grid; grid-template-columns: var(--page-toc-width) minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
    .page-toc-layout > * { grid-column: 2; }
    /* The list spans the opening of the tax articles and the sections. Its first line stands level with the first line
       beside it: the top padding of the sections, or of the light opening (.ed-ratgeber .ed-hero). The outer padding
       holds the gold mark and the focus ring inside the scrolling list. */
    .page-toc-layout > .page-toc { position: sticky; top: calc(var(--shell-sticky-height) + var(--s5)); grid-column: 1; grid-row: 1 / span 2; max-height: calc(100dvh - var(--shell-sticky-height) - 2 * var(--s5)); margin: var(--section-gap) 0 0 calc(-1 * var(--s3)); padding: 0 var(--s4) var(--s2) var(--s3); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--border); }
    .page-toc-layout > .ed-hero ~ .page-toc { margin-top: var(--ed-hero-pad); }
    .page-toc__box { border: 0; border-radius: 0; background: none; }
    .page-toc__head { flex-wrap: wrap; gap: 0 var(--s2); min-height: 0; padding: 0 0 var(--s3); color: var(--text-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
    .page-toc__count { font-size: .72rem; }
    .page-toc__list { columns: auto; padding: 0; }
    .page-toc__list li { border-top: 0; }
    .page-toc__list a { position: relative; padding-block: var(--s2); color: var(--text-muted); font-size: .875rem; }
    .page-toc__list a[aria-current] { color: var(--text); font-weight: 700; }
    .page-toc__list a[aria-current]::before { content: ''; position: absolute; inset-block: var(--s1); left: calc(-1 * var(--s3)); width: 3px; border-radius: var(--radius-pill); background: var(--gold); }
  }
  @media print {
    .page-toc { display: none; }
  }
  /* Paket AZ: the new articles (apps/public/beitrag.mjs) use the explainer vocabulary above. Added only what the 23 r337
     articles do not have: the title picture in the opening band, the reading time and (Paket AZ _v2) the placeholder of
     a picture or graphic still to be made. They close with the box "Einordnung" of the 23. */
  .ed-meta { margin: var(--s4) 0 0; color: var(--text-muted); font-size: .8125rem; font-weight: 600; }
  /* The tool card of a section (the tax openings use an h2 there). */
  .ed-ratgeber .ed-toolcard__title { margin: 0 0 var(--s2); font-size: 1.3125rem; }
  .ed-cover { max-width: 560px; margin: var(--s6) 0 0; }
  .ed-cover img { display: block; width: 100%; height: auto; border: 1px solid var(--brand-border); border-radius: var(--radius-card); }
  .ed-cover figcaption { margin-top: var(--s2); color: var(--text-muted); font-size: .75rem; }
  @media (min-width: 1024px) {
    .ed-ratgeber .ed-hero > .ed-wrap:has(> .ed-cover) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: var(--s6); align-items: center; }
    .ed-cover { margin: 0; }
  }
  /* Paket BI (Daniel 26.10.2026, Variante C): the original logo of a portrait, unchanged in a light round field before the
     mark of the opening and in the icon field of its card on the overview. --paper stays light in both themes, so black
     marks stay visible in the dark band; the logo keeps 32px (the smallest size the owners allow) and a clear margin. */
  .ed-mark { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
  .ed-mark .eyebrow { margin: 0; }
  .ed-mark__logo { display: grid; place-items: center; flex: none; width: var(--s7); height: var(--s7); border: 1px solid var(--paper-border); border-radius: 50%; background: var(--paper); }
  .r4x-collection-icon.r4x-collection-icon--logo { border-color: var(--paper-border); background: var(--paper); }
  :is(.ed-mark__logo, .r4x-collection-icon--logo) img { display: block; width: var(--s6); height: var(--s6); object-fit: contain; }
  .ed-ratgeber .ed-figure > .ed-phases { margin-top: 0; }
  /* Paket AZ _v2 (Daniel 25.10.2026, Variante wie gezeigt): a dashed frame in the reading width of the figures, the label
     "Bildplatzhalter · Bild/Grafik", the description that briefs the picture, and the caption that stays. */
  .ed-placeholder { max-width: 620px; margin: var(--s6) 0 var(--s2); }
  .ed-placeholder__frame { display: grid; place-content: center; gap: var(--s2); aspect-ratio: 16 / 9; padding: var(--s5); border: 2px dashed var(--border); border-radius: var(--radius-card); background: var(--surface-muted); text-align: center; }
  .ed-placeholder__label { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .ed-placeholder__text { max-width: 52ch; margin: 0 auto; color: var(--text-muted); font-size: .875rem; line-height: 1.55; }
  .ed-placeholder figcaption { margin-top: var(--s3); color: var(--text-muted); font-size: .84375rem; line-height: 1.6; }
  @media (max-width: 640px) {
    .ed-placeholder__frame { aspect-ratio: auto; min-height: 12rem; padding: var(--s4); }
  }
  /* Paket BB (Daniel 25.10.2026, Antwort 2 "Premium Inszenierung"): the learning calculator of a Ratgeber (block "rechner",
     apps/public/rechner-runtime.mjs). A calm surface under a gold line with a soft gold glow, the fields and chips of the
     design system, three result tiles with the figures in the serif of the gold numbers, and a bar comparison drawn as SVG
     from tokens. Without JavaScript the fields stay hidden and the same tiles show the worked example. */
  .ed-rechner { margin: var(--s6) 0 var(--s5); padding: clamp(var(--s4), 4vw, var(--s6)); border: 1px solid var(--gold-border); border-top: 3px solid var(--gold); border-radius: var(--radius-card); background: radial-gradient(circle at 100% 0, var(--gold-glow), transparent 260px), var(--surface); box-shadow: var(--shadow-elevated); }
  .ed-rechner__mark, .ed-rechner__label { margin: 0; color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .ed-rechner__title { margin: var(--s2) 0; font-size: 1.3125rem; }
  .ed-rechner__head p { max-width: 60ch; margin: 0; color: var(--text-muted); }
  .ed-rechner__form { margin-top: var(--s5); }
  .ed-rechner__examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
  .ed-rechner__examples .ed-rechner__label { margin-right: var(--s2); }
  .ed-rechner__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); align-items: start; }
  .ed-rechner__field .input { font-variant-numeric: tabular-nums; }
  .ed-rechner__result { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border-soft); }
  .ed-rechner__scenario { margin: 0 0 var(--s3); color: var(--text-muted); font-size: .875rem; }
  .ed-rechner__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .ed-rechner__tile { display: grid; align-content: start; gap: var(--s1); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
  .ed-rechner__tile strong { color: var(--text); font-family: var(--font-beginner); font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
  .ed-rechner__tile--differenz { border-color: var(--gold-border); background: var(--gold-soft); }
  .ed-rechner__tile--differenz strong { color: var(--accent-text); }
  .ed-rechner__detail { color: var(--text-muted); font-size: .84375rem; line-height: 1.5; }
  .ed-rechner__chart { margin: var(--s5) 0 0; }
  .ed-rechner__chart dl { display: grid; gap: var(--s3); margin: var(--s3) 0 0; }
  .ed-rechner__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: var(--s3); }
  .ed-rechner__row dt { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
  .ed-rechner__row dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin: 0; }
  .ed-rechner__bar { display: block; width: 100%; height: .75rem; border-radius: var(--radius-pill); overflow: hidden; }
  .ed-rechner__track { fill: var(--surface-strong); }
  .ed-rechner__fill--einsatz { fill: var(--text-faint); }
  .ed-rechner__fill--einmal { fill: var(--gold-deep); }
  .ed-rechner__fill--teile { fill: var(--gold); }
  .ed-rechner__amount { min-width: 7.5rem; color: var(--text); font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
  .ed-rechner__summary { margin: var(--s4) 0 0; font-weight: 600; }
  .ed-rechner__note { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: .84375rem; line-height: 1.55; }
  @media (max-width: 767px) {
    .ed-rechner__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-rechner__tiles { grid-template-columns: minmax(0, 1fr); }
    .ed-rechner__row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  }
  @media (max-width: 359px) {
    .ed-rechner__fields { grid-template-columns: minmax(0, 1fr); }
  }
  @media print {
    .ed-rechner { background: var(--surface); box-shadow: none; }
  }

  /* ---------- Begriffe und Fragen: the 134 term and 102 FAQ pages (r337 begriff.v2560, faq.v2565) ----------
     One vocabulary for both templates: dark opening card, wide definition beside the facts, connection cards,
     the Glossar Plus block beside its actions, and the way back to the overview. */
  :is(.ed-r4x-term-hero, .ed-r4x-faq-hero) { --mark-rx: var(--gold-hover); --mark-four: var(--brand-text); --text: var(--brand-text); --text-muted: var(--brand-muted); --accent-text: var(--gold-hover); --surface: var(--brand-surface); --border: var(--brand-border); position: relative; overflow: hidden; padding: clamp(var(--s5), 5vw, 56px); border: 1px solid var(--brand-border); border-radius: var(--radius-card); background: var(--brand-page); color: var(--text); box-shadow: var(--shadow-elevated); }
  :is(.ed-r4x-term-hero, .ed-r4x-faq-hero)::after { content: ''; position: absolute; top: -130px; right: -110px; width: 290px; height: 290px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 24%, transparent), transparent 68%); pointer-events: none; }
  :is(.ed-r4x-term-hero, .ed-r4x-faq-hero) h1 { max-width: 850px; margin: 0; color: var(--text); }
  :is(.ed-r4x-term-hero, .ed-r4x-faq-hero) .icon-control { position: relative; z-index: 1; }
  :is(.ed-r4x-term-kicker, .ed-r4x-faq-kicker) { margin-bottom: var(--s3); }
  :is(.ed-r4x-term-layout, .ed-r4x-faq-layout) { grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); gap: var(--s5); align-items: start; margin-top: var(--s5); }
  :is(.ed-r4x-term-definition, .ed-r4x-faq-answer) { margin: 0; font-size: clamp(1.0625rem, 2vw, 1.21875rem); }
  .ed-r4x-faq-detail { margin-top: var(--s5); }
  :is(.ed-r4x-term-facts, .ed-r4x-faq-facts) { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  :is(.ed-r4x-term-facts, .ed-r4x-faq-facts) li { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  :is(.ed-r4x-term-facts, .ed-r4x-faq-facts) li:first-child { padding-top: 0; }
  :is(.ed-r4x-term-facts, .ed-r4x-faq-facts) li:last-child { padding-bottom: 0; border-bottom: 0; }
  :is(.ed-r4x-term-facts, .ed-r4x-faq-facts) span { display: block; color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  :is(.ed-r4x-term-facts, .ed-r4x-faq-facts) strong { display: block; margin-top: var(--s1); font-size: .98rem; }
  :is(.ed-r4x-term-section, .ed-r4x-faq-section) { margin-top: var(--s6); padding: 0; border: 0; }
  :is(.ed-r4x-term-section__head, .ed-r4x-faq-section__head) { display: flex; justify-content: space-between; align-items: end; gap: var(--s5); margin-bottom: var(--s4); }
  :is(.ed-r4x-term-section__head, .ed-r4x-faq-section__head) h2 { margin: 0; }
  :is(.ed-r4x-term-section__head, .ed-r4x-faq-section__head) p { max-width: 650px; margin: 0; color: var(--text-muted); }
  :is(.ed-r4x-term-related, .ed-r4x-faq-related) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  :is(.ed-r4x-term-related, .ed-r4x-faq-related) > a { display: flex; flex-direction: column; min-height: 205px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  :is(.ed-r4x-term-related, .ed-r4x-faq-related) > a:is(:hover, :focus-visible) { transform: translateY(-3px); border-color: var(--gold-border); box-shadow: var(--shadow-elevated); }
  :is(.ed-r4x-term-related__label, .ed-r4x-faq-related__label) { color: var(--accent-text); font-size: .73rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
  :is(.ed-r4x-term-related, .ed-r4x-faq-related) strong { margin-top: 10px; font-size: 1.0625rem; line-height: 1.35; }
  :is(.ed-r4x-term-related, .ed-r4x-faq-related) p { margin: 10px 0 18px; color: var(--text-muted); font-size: .92rem; line-height: 1.55; }
  :is(.ed-r4x-term-related__arrow, .ed-r4x-faq-related__arrow) { margin-top: auto; color: var(--accent-text); font-weight: 700; }
  :is(.ed-r4x-term-plus, .ed-r4x-faq-plus) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 28px; align-items: center; margin-top: var(--s6); padding: clamp(var(--s5), 4vw, 42px); }
  :is(.ed-r4x-term-plus, .ed-r4x-faq-plus) h2 { margin: var(--s2) 0 10px; }
  :is(.ed-r4x-term-plus, .ed-r4x-faq-plus) p { margin: 0; }
  :is(.ed-r4x-term-plus, .ed-r4x-faq-plus) p + p { margin-top: var(--s3); }
  :is(.ed-r4x-term-plus__included, .ed-r4x-faq-plus__included) { color: var(--text); font-weight: 700; }
  /* Paket AG (UI-087, Daniel 17.10.2026): "Kurz erklärt" on a blue surface (the info family of the tokens); Glossar Plus
     keeps its gold; the Wissens-Navigator stands below it as a tool of its own, a calm card with its access marks. */
  section.ed-r4x-term-card { padding: clamp(var(--s5), 3vw, var(--s6)); border: 1px solid var(--info-border); border-inline-start: var(--s1) solid var(--info); border-radius: var(--radius-card); background: var(--info-soft); }
  section.ed-r4x-term-card h2 { margin: 0 0 var(--s3); color: var(--info); }
  section.ed-r4x-term-card .ed-r4x-term-definition { color: var(--text); }
  .ed-r4x-term-tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3) var(--s5); align-items: center; margin-top: var(--s5); padding: clamp(var(--s5), 3vw, var(--s6)); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
  .ed-r4x-term-tool__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  .ed-r4x-term-tool__head > :first-child { margin: 0; }
  .ed-r4x-term-tool__access { display: inline-flex; gap: var(--s1); }
  .ed-r4x-term-tool > p { grid-column: 1; margin: 0; color: var(--text-muted); }
  .ed-r4x-term-tool > a { grid-column: 2; grid-row: 1 / span 2; }
  :is(.ed-r4x-term-gold, .ed-r4x-faq-gold) { color: var(--accent-text); font-weight: 800; letter-spacing: inherit; }
  :is(.ed-r4x-term-actions, .ed-r4x-faq-actions) { display: grid; gap: 14px; align-content: start; }
  :is(.ed-r4x-term-actions, .ed-r4x-faq-actions) > .btn { width: 100%; }
  :is(.ed-r4x-term-action-card, .ed-r4x-faq-action-card) { display: grid; gap: 10px; padding: var(--s4) 18px; border-color: var(--gold-border); }
  :is(.ed-r4x-term-action-card, .ed-r4x-faq-action-card) p { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.55; }
  :is(.ed-r4x-term-back, .ed-r4x-faq-back) { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: var(--s5); padding: 18px 22px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  :is(.ed-r4x-term-back, .ed-r4x-faq-back) p { margin: 0; color: var(--text-muted); }
  :is(.ed-r4x-term-back, .ed-r4x-faq-back) a { color: var(--accent-text); font-weight: 700; text-decoration: none; }
  :is(.ed-r4x-term-back, .ed-r4x-faq-back) a:hover { text-decoration: underline; }
  @media (max-width: 820px) {
    :is(.ed-r4x-term-layout, .ed-r4x-faq-layout, .ed-r4x-term-plus, .ed-r4x-faq-plus, .ed-r4x-term-related, .ed-r4x-faq-related) { grid-template-columns: minmax(0, 1fr); }
    .ed-r4x-term-tool { grid-template-columns: minmax(0, 1fr); }
    .ed-r4x-term-tool > a { grid-column: 1; grid-row: auto; }
    :is(.ed-r4x-term-related, .ed-r4x-faq-related) > a { min-height: 0; }
    :is(.ed-r4x-term-section__head, .ed-r4x-faq-section__head) { display: block; }
    :is(.ed-r4x-term-section__head, .ed-r4x-faq-section__head) p { margin-top: var(--s2); }
    :is(.ed-r4x-term-actions, .ed-r4x-faq-actions) { gap: var(--s3); }
  }
  @media (max-width: 560px) {
    :is(.ed-r4x-term-back, .ed-r4x-faq-back) { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- DNA & Philosophie (r337 main.phil) ---------- */
  .ed-phil > .ed-hero { position: relative; display: grid; align-items: center; min-height: 560px; overflow: hidden; background: var(--brand-page); box-shadow: 0 0 0 var(--ed-band) var(--brand-page); clip-path: inset(0 calc(-1 * var(--ed-band))); color: var(--brand-text); }
  .ed-hero-bg { position: absolute; inset: 0; }
  .ed-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .58; filter: saturate(.86) contrast(1.03); }
  .ed-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-page) 96%, transparent) 0%, color-mix(in srgb, var(--brand-page) 83%, transparent) 45%, color-mix(in srgb, var(--brand-page) 42%, transparent) 72%, color-mix(in srgb, var(--brand-page) 58%, transparent) 100%); }
  .ed-hero-content { position: relative; z-index: 1; max-width: 720px; padding: 86px 0; }
  .ed-phil > .ed-hero h1 { margin: 0; color: var(--brand-text); }
  .ed-phil > .ed-hero .eyebrow { color: var(--gold-hover); }
  .ed-phil > .ed-hero .ed-brand-word { color: var(--gold-hover); }
  .ed-phil > .ed-hero .ed-brand-four { color: var(--brand-text); }
  .ed-phil > .ed-hero .ed-lead { max-width: 670px; margin: 22px 0 0; color: var(--brand-muted); font-size: 1.125rem; line-height: 1.72; }
  .ed-origin { max-width: 930px; margin: 0 auto; }
  .ed-question { margin: 0; padding-left: 22px; border-left: 3px solid var(--gold); font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600; line-height: 1.3; color: var(--text); }
  .ed-origin-copy { max-width: 790px; margin: 28px 0 0 25px; }
  .ed-origin-copy p { margin: 0; color: var(--text-muted); line-height: 1.74; }
  .ed-origin-copy p + p { margin-top: 15px; }
  .ed-future { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr); gap: var(--s7); align-items: center; max-width: 1000px; margin: 0 auto; }
  .ed-future-visual { display: grid; place-items: center; min-height: 320px; overflow: hidden; border: 1px solid var(--gold-border); border-radius: 20px; background: var(--brand-page); }
  .ed-future-visual img { width: 100%; height: auto; object-fit: contain; }
  .ed-future-copy h2 { margin: 0; }
  .ed-future-copy p { margin: 14px 0 0; color: var(--text-muted); line-height: 1.72; }
  .ed-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
  .ed-principle, .ed-about-card, .ed-clarity-card { padding: 25px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); }
  :is(.ed-principle .ed-num, .ed-about-card .ed-n) { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
  :is(.ed-principle, .ed-about-card) h3 { margin: 11px 0 0; font-size: 1.3125rem; line-height: 1.25; }
  :is(.ed-principle, .ed-about-card, .ed-clarity-card) p { margin: 9px 0 0; color: var(--text-muted); font-size: .90625rem; line-height: 1.63; }
  .ed-clarity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
  .ed-clarity-card { display: flex; flex-direction: column; padding: 28px; border-radius: 18px; }
  .ed-clarity-visual { display: grid; place-items: center; height: 250px; margin-bottom: 22px; }
  .ed-clarity-visual img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .ed-clarity-card h3 { margin: 0; font-size: 1.375rem; }
  .ed-learning { max-width: 900px; margin: 0 auto; padding: 36px 40px; border: 1px solid var(--gold-border); border-radius: 20px; background: linear-gradient(135deg, var(--brand-surface), var(--brand-page)); }
  .ed-learning h2 { margin: 0; }
  .ed-learning p { margin: 15px 0 0; line-height: 1.72; }
  .ed-not-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); max-width: 980px; margin: 0 auto; }
  .ed-not-item { padding: 22px; border: 1px solid var(--brand-border); border-radius: 15px; background: color-mix(in srgb, var(--brand-text) 2.5%, transparent); }
  .ed-not-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--gold-border); border-radius: 50%; color: var(--gold-hover); font-size: 1.0625rem; }
  .ed-not-item h3 { margin: 14px 0 0; font-size: 1.0625rem; }
  .ed-not-item p { margin: 7px 0 0; font-size: .84375rem; line-height: 1.58; }
  .ed-middle, .ed-goal { max-width: 940px; margin: 0 auto; text-align: center; }
  .ed-middle h2, .ed-goal h2 { margin: 0; }
  .ed-middle > p, .ed-goal > p { max-width: 770px; margin: 15px auto 0; color: var(--text-muted); line-height: 1.72; }
  .ed-axis { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; margin: 34px auto 0; }
  .ed-axis-side { padding: 19px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text-muted); font-size: .875rem; }
  .ed-axis-center { padding: 21px 28px; border-radius: var(--radius-card); background: var(--brand-surface); color: var(--brand-text); box-shadow: var(--shadow-card); }
  .ed-axis-center strong { display: block; font-size: 1.125rem; }
  .ed-axis-center .ed-brand-word { color: var(--gold-hover); }
  .ed-axis-center .ed-brand-four { color: var(--brand-text); }
  .ed-axis-center > span { display: block; margin-top: 5px; color: var(--brand-muted); font-size: .8125rem; }
  .ed-goal-visual { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto var(--s5); }
  .ed-goal-visual img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .ed-goal .eyebrow { justify-content: center; }
  .ed-mantra { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 29px auto 0; }
  .ed-mantra span, .ed-tools-pills span, .ed-about-tool-tags span { padding: 8px 13px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .8125rem; font-weight: 500; }

  /* ---------- Über mich (r337 main.about-page) ---------- */
  .ed-about-hero { padding: 64px 0 70px; }
  .ed-about-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 58px; align-items: center; max-width: 1000px; margin: 0 auto; }
  .ed-about-portrait, .ed-about-book-link { display: grid; place-items: center; padding: 18px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-elevated); }
  .ed-about-portrait { min-height: 430px; }
  .ed-about-portrait img { width: auto; max-width: 100%; max-height: 420px; border-radius: 15px; }
  .ed-about-hero-copy { max-width: 500px; }
  .ed-about-hero-copy h1 { margin: 0; }
  .ed-about-lead { margin: 22px 0 0; color: var(--text-muted); font-size: 1.125rem; line-height: 1.72; }
  .ed-about-name { margin-top: 25px; color: var(--accent-text); font-size: 1.5rem; font-weight: 600; }
  .ed-about-story { max-width: 860px; margin: 0 auto; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.82; }
  .ed-about-story p { margin: 0; }
  .ed-about-story p + p { margin-top: 20px; }
  .ed-about-pull { margin: 34px 0; padding: 23px 27px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--text); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 600; line-height: 1.38; }
  .ed-about-perspectives { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: 0 auto; }
  .ed-about-bridge { display: grid; grid-template-columns: minmax(0, 1fr) 105px minmax(0, 1fr); gap: 22px; align-items: center; max-width: 930px; margin: 0 auto; }
  .ed-about-bridge-side { display: flex; flex-direction: column; justify-content: center; min-height: 190px; padding: 28px; border: 1px solid var(--brand-border); border-radius: 18px; background: color-mix(in srgb, var(--brand-text) 2.5%, transparent); }
  .ed-about-bridge-side h3 { margin: 0; font-size: 1.4375rem; }
  .ed-about-bridge-side p { margin: 10px 0 0; font-size: .875rem; line-height: 1.65; }
  .ed-about-bridge-center { position: relative; display: grid; place-items: center; width: 105px; height: 105px; margin: 0 auto; border: 1px solid var(--gold-border); border-radius: 50%; color: var(--gold-hover); font-size: .75rem; font-weight: 600; letter-spacing: .045em; text-align: center; }
  .ed-about-bridge-center::before, .ed-about-bridge-center::after { content: ''; position: absolute; top: 50%; width: 32px; height: 1px; background: var(--gold-border); }
  .ed-about-bridge-center::before { right: 100%; }
  .ed-about-bridge-center::after { left: 100%; }
  .ed-about-personal { display: grid; grid-template-columns: .86fr 1.14fr; gap: 46px; align-items: center; max-width: 930px; margin: 0 auto; scroll-margin-top: var(--shell-sticky-height, 0px); }
  .ed-about-book { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .ed-about-book-link { padding: 14px; border-radius: 20px; text-decoration: none; }
  .ed-about-book-link img { width: 100%; max-width: 360px; border-radius: 12px; }
  .ed-about-book-zoom { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); padding: 8px 14px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .8125rem; font-weight: 600; text-decoration: none; }
  .ed-about-personal-copy h2 { margin: 0; }
  .ed-about-personal-copy p { margin: 15px 0 0; color: var(--text-muted); line-height: 1.72; }
  .ed-about-attitude { max-width: 900px; margin: 0 auto; text-align: center; }
  .ed-about-attitude h2 { margin: 0; }
  .ed-about-attitude p { max-width: 760px; margin: 18px auto 0; color: var(--text-muted); line-height: 1.72; }
  .ed-about-attitude-line { width: 74px; height: 2px; margin: 28px auto 0; background: var(--gold); }
  /* Paket AC (Daniel 17.10.2026, Über mich Teil A Nr. 4 bis 6): the three groups of "Erst verstehen, dann entscheiden."
     are the page's cards inside the story (variant B): 01 and 02 side by side, 03 wide below on the gold stage ("Hell
     bleibt hell"); its four questions are flat tags that do not look like buttons (no border, no control height, not
     interactive). A gold box that closes a story keeps only the section padding below it. "Zum Buch" closes
     "Die persönliche Dimension". */
  .ed-about-groups { margin: var(--s6) 0; }
  .ed-about-groups .ed-about-card h3 { color: var(--text); }
  .ed-about-groups .ed-about-card p { margin-top: var(--s2); }
  .ed-about-group-target { border-color: var(--gold-border); background: linear-gradient(160deg, var(--stage-a), var(--stage-b)); box-shadow: inset 0 3px 0 var(--gold), 0 var(--s4) var(--s7) var(--gold-glow); }
  .ed-about-questions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
  .ed-about-question { display: inline-block; padding: var(--s1) var(--s3); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--text); font-size: .875rem; font-weight: 600; line-height: 1.5; cursor: default; }
  .ed-about-story > .ed-about-pull:last-child { margin-bottom: 0; }
  .ed-about-book-cta { margin-top: var(--s5); }
  @media (min-width: 901px) {
    .ed-about-perspectives.ed-about-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-about-group-target { grid-column: 1 / -1; }
  }

  /* ---------- Buchseite Krypto Decoder (Paket AC, Daniel 17.10.2026, apps/public/book.mjs) ----------
     The Über mich composition with its own parts: the front cover in the head, "Krypto" in the readable gold and
     "Decoder" in the text colour, chances and risks as two cards, the reading sample as a book page card (gold edge on
     top, two columns on wide screens, the sketch in the text, the quote between gold lines, "Teil I" beside the world map
     picture). */
  .ed-book-cover { cursor: zoom-in; }
  /* Paket AF (layout shift): a fixed width instead of 100 % of the shrink-wrapped button, so the cover has its place before
     the picture loaded (desktop CLS 0.11). The size it is shown at stays 300 px, narrower only where the column is. */
  .ed-book-cover img { width: 18.75rem; max-width: 100%; box-shadow: 0 var(--s4) var(--s7) var(--gold-glow); }
  .ed-book-ctas { justify-content: flex-start; }
  .ed-book-page .ed-about-story strong { color: var(--text); }
  .ed-book-titleline { color: var(--text); font-size: 1.1875rem; }
  .ed-book-krypto { color: var(--accent-text); font-weight: 700; }
  .ed-about-perspectives.ed-book-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--s6) 0; }
  .ed-book-pair .ed-about-card p { margin-top: var(--s2); font-size: 1rem; }
  .ed-book-pair .ed-n { font-size: .8125rem; text-transform: uppercase; }
  .ed-book-risks { border-color: var(--gold-border); }
  .ed-book-subline { color: var(--text-muted); font-style: italic; }
  .ed-book-sample .ed-about-head .ed-book-subline { font-size: 1.0625rem; }
  .ed-book-leaf { max-width: 61.25rem; margin: 0 auto; padding: var(--s7) var(--s7) var(--s6); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 3px 0 var(--gold), var(--shadow-elevated); color: var(--text); font-size: 1rem; line-height: 1.7; }
  .ed-book-columns { columns: 2; column-gap: var(--s7); }
  .ed-book-columns p { margin: 0 0 var(--s4); break-inside: avoid; }
  .ed-book-sketch { float: right; width: 42%; margin: var(--s1) 0 var(--s3) var(--s4); }
  .ed-book-sketch img, .ed-book-map img { display: block; width: 100%; height: auto; border-radius: var(--radius-control); }
  .ed-book-map { margin: 0; }
  .ed-book-quote { max-width: 26.25rem; margin: var(--s6) auto; padding: var(--s4) 0; border-block: 1px solid var(--gold-border); text-align: center; font-style: italic; font-weight: 600; }
  .ed-book-quote p { margin: 0; }
  .ed-book-part { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: start; padding-top: var(--s6); border-top: 1px solid var(--border-soft); }
  .ed-book-part h3 { margin: 0; font-size: 1.5rem; }
  .ed-book-part p { margin: 0 0 var(--s4); }
  .ed-book-part .ed-book-subline { margin: var(--s1) 0 var(--s5); }
  .ed-book-part .ed-book-chapter { margin-bottom: 0; font-size: 1.125rem; }
  @media (max-width: 900px) {
    .ed-book-columns { columns: 1; }
    .ed-book-part { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 620px) {
    .ed-book-leaf { padding: var(--s5) var(--s4); }
    .ed-about-perspectives.ed-book-pair { grid-template-columns: minmax(0, 1fr); }
    .ed-book-sketch { width: 48%; }
    .ed-book-ctas { justify-content: center; }
  }

  /* ---------- Alles über Ready4nexxt (r337 main.about-hub-main) ---------- */
  .ed-about-hub-hero { padding: 64px 0 48px; text-align: center; }
  .ed-about-hub-hero .eyebrow { justify-content: center; }
  .ed-about-hub-title { margin: 0; }
  .ed-about-hub-brand { display: inline-block; white-space: nowrap; color: var(--accent-text); }
  .ed-about-hub-brand-four { color: var(--text); }
  .ed-about-hub-lead { max-width: 760px; margin: 20px auto 0; color: var(--text-muted); font-size: 1.125rem; line-height: 1.7; }
  .ed-about-hub-primary { padding-block: 46px 56px; background: var(--gold-soft); box-shadow: 0 0 0 var(--ed-band) var(--gold-soft); clip-path: inset(0 calc(-1 * var(--ed-band))); }
  /* Paket AC v5 (Daniel 17.10.2026, variant A): the book is the fourth card, four cards side by side. */
  .ed-about-hub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .ed-about-hub-card { display: block; color: var(--text); text-decoration: none; }
  .ed-about-hub-card h2 { margin: 13px 0 0; font-size: 1.25rem; line-height: 1.35; }
  .ed-about-hub-card p { margin: 7px 0 0; color: var(--text-muted); font-size: .875rem; line-height: 1.55; }
  .ed-about-hub-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .ed-about-hub-media { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--tool-surface); }
  .ed-about-hub-media img { width: 100%; height: 100%; object-fit: cover; }
  .ed-about-hub-media.ed-fit-contain img { object-fit: contain; }
  .ed-about-hub-media.ed-dark { background: var(--brand-page); }
  .ed-about-hub-media.ed-dark img { object-fit: contain; }
  /* The upright front cover stands whole inside the 16:10 frame, with air above and below. */
  .ed-about-hub-media.ed-hub-book img { padding: var(--s2); }
  .ed-about-tools-cta { padding-block: 68px 78px; }
  .ed-about-tools-panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: center; max-width: 980px; margin: 0 auto; padding: 34px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
  .ed-about-tools-copy h2 { margin: 0; }
  .ed-about-tools-copy p { margin: 16px 0 0; color: var(--text-muted); font-size: 1.0625rem; line-height: 1.7; }
  .ed-about-tool-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 22px; }
  .ed-about-tools-action { display: flex; justify-content: flex-end; align-items: center; }

  /* ---------- R4X Hilfsmittel (r337 main.tools-page) ---------- */
  .ed-tools-hero { padding: 64px 0 72px; }
  .ed-tools-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
  .ed-tools-hero-inner .eyebrow { justify-content: center; }
  .ed-tools-hero-inner h1 { margin: 0; }
  .ed-tools-hero-inner > p { max-width: 760px; margin: 21px auto 0; color: var(--text-muted); font-size: 1.125rem; line-height: 1.72; }
  .ed-tools-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 25px; }
  .ed-tools-intro { padding-block: 44px; background: var(--surface); box-shadow: 0 0 0 var(--ed-band) var(--surface); }
  .ed-tools-intro-inner { max-width: 820px; margin: 0 auto; color: var(--text-muted); text-align: center; line-height: 1.7; }
  .ed-tools-intro-inner strong { color: var(--text); }
  .ed-tool-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 46px; align-items: center; }
  .ed-tool-layout.ed-media-left { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
  .ed-tool-copy h2 { margin: 0; }
  .ed-tool-copy .ed-lead { margin: 14px 0 0; color: var(--text-muted); line-height: 1.72; }
/* Paket AG (UI-037): on a dark band the lead takes the muted text of the band (measured 3.17:1 with --text-muted). */
.ed-tool-section.ed-dark .ed-tool-copy .ed-lead { color: var(--brand-muted); }
  .ed-tool-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 20px; }
  .ed-tool-list span { padding: 8px 11px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .78125rem; font-weight: 600; }
  .ed-tool-note { margin-top: 20px; padding: 15px 17px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--text-muted); font-size: .875rem; line-height: 1.62; }
  .ed-tool-section.ed-dark .ed-tool-list span { color: var(--gold-hover); }
  .ed-tool-section.ed-dark .ed-tool-note { color: var(--brand-muted); }
  .ed-gallery { min-width: 0; }
  .ed-main-shot { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: transparent; box-shadow: var(--shadow-elevated); cursor: zoom-in; }
  .ed-main-shot img { width: 100%; height: auto; max-height: 560px; object-fit: contain; border: 1px solid var(--gold-border); border-radius: 20px; background: var(--brand-page); }
  .ed-main-shot::after { content: 'Vergrößern'; position: absolute; right: 13px; bottom: 13px; padding: 7px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand-page) 74%, transparent); color: var(--brand-text); font-size: .72rem; font-weight: 600; pointer-events: none; }
  .ed-thumb-row { display: flex; gap: 10px; margin-top: 11px; padding: 2px 2px 5px; overflow-x: auto; scrollbar-width: thin; }
  .ed-thumb-shot { position: relative; flex: 0 0 154px; min-width: 154px; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text-muted); cursor: zoom-in; text-align: left; }
  .ed-thumb-shot img { width: 100%; height: 94px; object-fit: cover; object-position: top; background: var(--brand-page); }
  .ed-thumb-shot span { display: block; padding: 8px 9px; font-size: .72rem; line-height: 1.3; }
  .ed-gallery-caption { margin: 10px 2px 0; color: var(--text-faint); font-size: .78125rem; }
  .ed-tool-section.ed-dark .ed-gallery-caption { color: var(--brand-muted); }

  /* ---------- Rechtliches, Impressum, Datenschutz, AGB, Kontakt (r337 main.legal-main) ---------- */
  .ed-legal-main { padding-block: var(--s5) var(--s6); }
  .ed-legal-main .ed-wrap { max-width: 920px; margin-inline: 0; }
  .ed-legal-title { margin: 0; }
  .ed-legal-intro { max-width: 64ch; margin: 16px 0 0; color: var(--text-muted); }
  .ed-legal-card { max-width: 920px; margin: 38px 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(90% 70% at 0 0, var(--gold-soft), transparent 55%), var(--surface); }
  .ed-legal-section { padding: 30px 36px; border-bottom: 1px solid var(--border); }
  .ed-legal-section:last-child { border-bottom: 0; }
  .ed-legal-section h2 { margin: 0 0 10px; font-size: 1.125rem; line-height: 1.35; }
  .ed-legal-section h2::after { content: ''; display: block; width: 46px; height: 1px; margin-top: 10px; background: var(--gold-border); }
  .ed-legal-section :is(p, address) { margin: 0; color: var(--text-muted); font-style: normal; }
  .ed-legal-section p + p { margin-top: var(--s3); }
  .ed-legal-section address span { display: block; color: var(--text); }
  .ed-legal-section :is(ul, ol) { margin: var(--s3) 0 0; padding-left: 22px; color: var(--text-muted); }
  .ed-legal-section li + li { margin-top: 7px; }
  .ed-legal-section a { color: var(--accent-text); }
  .ed-legal-section strong { color: var(--text); }
  .ed-mail { display: inline-block; margin-top: var(--s3); }
  .ed-legal-note { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--text-muted); }
  .ed-legal-meta { display: flex; flex-wrap: wrap; gap: var(--s2) 14px; margin-top: 14px; color: var(--text-faint); font-size: .8125rem; }

  @media (max-width: 900px) {
    .ed-future, .ed-principles, .ed-clarity, .ed-about-hero-grid, .ed-about-personal, .ed-about-perspectives, .ed-about-bridge, .ed-tool-layout, .ed-tool-layout.ed-media-left { grid-template-columns: minmax(0, 1fr); }
    .ed-tool-layout.ed-media-left .ed-gallery { order: 2; }
    .ed-not-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-about-portrait { width: 100%; max-width: 520px; margin: 0 auto; }
    .ed-about-bridge-center::before, .ed-about-bridge-center::after { display: none; }
  }
  @media (max-width: 820px) {
    .ed-about-hub-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: auto; }
    .ed-about-tools-panel { grid-template-columns: minmax(0, 1fr); }
    .ed-about-tools-action { justify-content: flex-start; }
  }
  @media (max-width: 900px) {
    .ed-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ed-flow-card:nth-child(3) { border-left: 0; }
    .ed-flow-card:nth-child(n + 3) { border-top: 1px solid var(--border-soft); }
    .ed-how .ed-media, .ed-guided { grid-template-columns: minmax(0, 1fr); }
    .ed-areas, .ed-usecases, .ed-myarea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    :is(.ed-section, .ed-about-section, .ed-tool-section, .ed-final, .ed-about-final, .ed-tools-final) { padding-block: 58px; }
    .ed-how > .ed-hero { padding: 42px 0 40px; }
    .ed-flow, .ed-areas, .ed-usecases, .ed-myarea-grid, .ed-split { grid-template-columns: minmax(0, 1fr); }
    .ed-flow-card + .ed-flow-card, .ed-split-col + .ed-split-col { border-left: 0; border-top: 1px solid var(--border-soft); }
    .ed-reason { align-items: flex-start; }
    .ed-phil > .ed-hero { min-height: 500px; }
    .ed-hero-content { padding: 62px 0; }
    .ed-origin-copy { margin-left: 0; }
    .ed-not-grid, .ed-axis { grid-template-columns: minmax(0, 1fr); }
    .ed-learning { padding: 27px 23px; }
    .ed-about-hero, .ed-tools-hero, .ed-about-hub-hero { padding-block: 40px 44px; }
    .ed-about-portrait { min-height: 0; }
    .ed-about-story { font-size: 1rem; }
    .ed-about-hub-primary { padding-block: 34px 46px; }
    .ed-about-tools-cta { padding-block: 50px 60px; }
    .ed-about-tools-panel { padding: var(--s5); }
    .ed-main-shot img { max-height: none; }
    .ed-thumb-shot { flex-basis: 132px; min-width: 132px; }
    .ed-thumb-shot img { height: 80px; }
    .ed-legal-section { padding: 26px 24px; }
  }
}