/* 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); }
  .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); }
  .ed-ratgeber section:first-of-type, .ed-ratgeber > .ed-wrap > section:first-child { border-top: 0; }
  .ed-ratgeber section > h3, .ed-ratgeber .ed-wrap > 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 { padding: 40px 0 40px; }
  .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; }
  .ed-phases, .ed-checks { display: grid; gap: 10px; margin-top: 24px; }
  .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; }
  }

  /* ---------- 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; }
  }
}