/* Zentrale: r337 imagery and composition on FINAL-v18 tokens. Original assets are embedded unchanged. */
@layer components, layout;

@layer components {
  /* UI-014: Mein Bereich reserves at least one screen while its sections load, so the footer never starts in view and
     jumps away when the content appears. */
  .cockpit-page { min-height: calc(100dvh - var(--shell-sticky-height, 0px)); }
  .cockpit-page .r4x-mark { color: var(--accent-text); letter-spacing: 0; }
  .cockpit-page .r4x-mark__four { color: var(--text); }

  /* Hero: r337 light-trail image with left-to-right brand shade; flatter than before, identical in both themes. */
  .cockpit-page .cockpit-hero {
    position: relative; overflow: hidden; display: grid; gap: var(--s2); align-content: center;
    min-height: 168px; padding: var(--s5) var(--s6); border-color: var(--brand-border); color: var(--brand-text);
    background:
      linear-gradient(90deg, var(--brand-page) 0%, color-mix(in srgb, var(--brand-page) 88%, transparent) 52%, color-mix(in srgb, var(--brand-page) 48%, transparent) 72%, color-mix(in srgb, var(--brand-page) 14%, transparent) 100%),
      url('/assets/feature-carousel/hero-welcome-lighttrail-strip-v2150.webp') center / cover no-repeat,
      var(--brand-page);
  }
  .cockpit-page .cockpit-hero > * { margin: 0; max-width: 760px; }
  .cockpit-page .cockpit-hero h1 { color: var(--brand-text); }
  .cockpit-page .cockpit-hero .eyebrow { color: var(--gold-hover); }
  .cockpit-page .cockpit-hero .r4x-mark__four { color: var(--brand-text); }
  /* Mein Bereich (Daniel 11.10.2026): the r337 greeting opens from the i button beside the H1 (tap, not hover); a gold
     serif quote with a gold rule follows below. */
  .cockpit-page .cockpit-hero__title { display: flex; align-items: center; gap: var(--s3); }
  .cockpit-page .cockpit-hero__title > h1 { margin: 0; }
  .cockpit-page .cockpit-hero__title .info-popover > summary { border-color: var(--brand-border); background: transparent; color: var(--brand-text); }
  .cockpit-page .cockpit-hero__quote { display: flex; gap: var(--s3); align-items: flex-start; min-height: 2.6em; }
  .cockpit-page .cockpit-hero__quote::before { content: ''; flex: none; align-self: stretch; width: 2px; border-radius: var(--radius-pill); background: var(--gold); }
  .cockpit-page .cockpit-hero__quote blockquote { margin: 0; color: var(--gold-hover); font: italic 500 1.5rem/1.3 var(--font-beginner); }

  /* R4X-Gedächtnis (Daniel 11.10.2026, mockup v2): status line with figures, details in an expandable part. */
  .cockpit-page .cockpit-memory-region { margin-block: var(--s5) var(--s6); }
  .memory-icon, .section-icon, .cockpit-next__icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .memory-dot { flex: none; width: var(--s2); height: var(--s2); border-radius: var(--radius-pill); background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
  .cockpit-page .memory { border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: linear-gradient(110deg, var(--gold-soft), transparent 45%), var(--surface); box-shadow: var(--shadow-card); }
  .cockpit-page .memory-bar { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4); min-height: calc(var(--s8) + var(--s4)); padding: var(--s3) var(--s4); }
  .cockpit-page .memory-bar__mark { display: grid; place-items: center; 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); }
  .cockpit-page .memory-bar__mark .memory-icon { width: 1.5rem; height: 1.5rem; }
  .cockpit-page .memory-bar__head { min-width: 0; }
  .cockpit-page .memory-bar__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
  .cockpit-page .memory-bar__title > h2 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
  .cockpit-page .memory-bar__claim { display: block; margin-top: var(--s1); color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .memory-plan { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--s5); padding-inline: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
  .cockpit-page .memory-plan[data-memory-plan='plus'] { border-color: var(--gold-border); color: var(--accent-text); }
  .cockpit-page .memory-plan__plus { color: var(--accent-text); font-weight: 700; text-decoration: none; }
  .cockpit-page .memory-plan__plus:hover { text-decoration: underline; }
  .cockpit-page .memory-hint { display: none; align-items: center; gap: var(--s1); min-height: var(--s5); padding-inline: var(--s2); border: 1px solid var(--info-border); border-radius: var(--radius-pill); color: var(--text); font-size: .75rem; font-weight: 600; white-space: nowrap; }
  .cockpit-page .memory-stats { display: flex; gap: var(--s2); }
  .cockpit-page .memory-stat { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 var(--s2); min-width: 0; padding: var(--s2) var(--s3) var(--s2) var(--s2); border: 1px solid transparent; border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
  .cockpit-page a.memory-stat:hover { border-color: var(--gold-border); background: var(--gold-soft); }
  .cockpit-page .memory-stat__icon { grid-row: 1 / 3; display: grid; place-items: center; width: var(--s6); height: var(--s6); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--accent-text); }
  .cockpit-page .memory-stat__icon .memory-icon { width: 1.125rem; height: 1.125rem; }
  .cockpit-page .memory-stat__value { display: flex; align-items: center; gap: var(--s1); font-size: 1.25rem; font-weight: 800; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .cockpit-page .memory-stat__unit { color: var(--text-muted); font-size: .75rem; white-space: nowrap; }
  .cockpit-page .memory-stat--empty .memory-stat__value { color: var(--text-faint); font-weight: 600; }
  .cockpit-page .memory-stats-note { max-width: 30ch; margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .memory-toggle { display: flex; align-items: center; gap: var(--s2); min-height: var(--touch-target); padding: 0 var(--s2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--accent-text); font: 700 .8125rem/1.2 var(--font-body); white-space: nowrap; cursor: pointer; }
  .cockpit-page .memory-toggle:hover { background: var(--gold-soft); }
  .cockpit-page .memory-toggle__chevron { transition: transform var(--motion-base) var(--ease-standard); }
  .cockpit-page .memory-toggle[aria-expanded='true'] .memory-toggle__chevron { transform: rotate(180deg); }
  .cockpit-page .memory-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows calc(var(--motion-base) * 1.5) var(--ease-standard); }
  .cockpit-page .memory-panel[data-open='true'] { grid-template-rows: 1fr; }
  .cockpit-page .memory-panel__clip { min-height: 0; overflow: hidden; }
  .cockpit-page .memory-panel__inner { display: grid; gap: var(--s4); padding: var(--s4); border-top: 1px solid var(--border-soft); }
  .cockpit-page .memory-panel__plan { display: none; }
  .cockpit-page .memory-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s3); }
  .cockpit-page :is(.memory-then-now, .memory-due, .memory-intro) .eyebrow { display: flex; align-items: center; gap: var(--s2); margin: 0; }
  .cockpit-page :is(.memory-then-now, .memory-due, .memory-intro) .eyebrow .memory-icon { width: 1rem; height: 1rem; }
  .cockpit-page .memory-then-now { position: relative; overflow: hidden; padding: var(--s5); border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: radial-gradient(circle at 100% 0, var(--gold-soft), transparent 60%), var(--surface); }
  .cockpit-page .memory-then-now--calm { border-style: dashed; border-color: var(--border); background: var(--surface-muted); }
  .cockpit-page .memory-then-now__head { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
  .cockpit-page .memory-coin { display: grid; place-items: center; flex: none; width: calc(var(--s7) + var(--s1)); height: calc(var(--s7) + var(--s1)); overflow: hidden; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text); }
  .cockpit-page .memory-coin img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cockpit-page .memory-coin--fallback { color: var(--accent-text); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; }
  .cockpit-page .memory-then-now__subject { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
  .cockpit-page .memory-then-now__more { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) 0 0; color: var(--text-muted); font-size: .875rem; }
  .cockpit-page .memory-timeline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s4); }
  .cockpit-page .memory-timeline__point { display: grid; justify-items: center; gap: var(--s1); text-align: center; }
  .cockpit-page .memory-timeline__dot { width: var(--s4); height: var(--s4); border: 2px solid var(--text-muted); border-radius: var(--radius-pill); background: var(--surface); }
  .cockpit-page .memory-timeline__point--now .memory-timeline__dot { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 var(--s1) var(--gold-soft); }
  .cockpit-page .memory-timeline__label { color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .cockpit-page .memory-timeline__point--now .memory-timeline__label { color: var(--accent-text); }
  .cockpit-page .memory-timeline__gap { position: relative; display: grid; place-items: center; min-height: calc(var(--s5) + var(--s1)); }
  .cockpit-page .memory-timeline__gap::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--gold-border); }
  .cockpit-page .memory-timeline__gap span { position: relative; padding-inline: var(--s3); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: .8125rem; font-weight: 700; }
  .cockpit-page .memory-then-now__note { max-width: 52ch; margin: 0; color: var(--text-muted); }
  .cockpit-page .memory-then-now .btn { margin-top: var(--s4); }
  .cockpit-page .memory-due { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
  .cockpit-page .memory-due__list { display: grid; gap: var(--s2); margin-top: var(--s3); }
  .cockpit-page .memory-due__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--info-border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); text-decoration: none; }
  .cockpit-page .memory-due__item:hover { background: var(--info-soft); }
  .cockpit-page .memory-due__item > .memory-icon:first-child { color: var(--info); }
  .cockpit-page .memory-due__item > .memory-icon:last-child { color: var(--text-muted); }
  .cockpit-page .memory-due__item strong { display: block; font-size: .9375rem; }
  .cockpit-page .memory-due__item small { display: block; color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page :is(.memory-due__calm, .memory-due__areas) { margin: var(--s3) 0 0; color: var(--text-muted); font-size: .875rem; }
  .cockpit-page .memory-due__areas { font-size: .8125rem; }
  .cockpit-page .memory-due__areas b { color: var(--text); font-weight: 600; }
  .cockpit-page .memory-links { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s3); }
  .cockpit-page .memory-links > :only-child { grid-column: 1 / -1; }
  .cockpit-page .memory-link { display: grid; gap: 2px; min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
  .cockpit-page .memory-link:hover { border-color: var(--gold-border); background: var(--gold-soft); }
  .cockpit-page .memory-link strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: .9375rem; }
  .cockpit-page .memory-link > span { color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .memory-link > .memory-link__go { margin-top: var(--s1); color: var(--accent-text); font-weight: 700; }
  .cockpit-page .memory-intro { padding: var(--s5); border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: radial-gradient(circle at 100% 0, var(--gold-soft), transparent 60%), var(--surface); }
  .cockpit-page .memory-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: var(--s3) 0 0; padding: 0; list-style: none; }
  .cockpit-page .memory-benefit { display: flex; align-items: flex-start; gap: var(--s3); }
  .cockpit-page .memory-benefit__icon { display: grid; place-items: center; flex: none; width: calc(var(--s6) + var(--s1)); height: calc(var(--s6) + var(--s1)); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--accent-text); }
  .cockpit-page .memory-benefit strong { display: block; font-size: .9375rem; }
  .cockpit-page .memory-benefit small { display: block; color: var(--text-muted); font-size: .8125rem; line-height: 1.4; }
  .cockpit-page .memory-intro__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0 0; color: var(--text-muted); font-size: .8125rem; }

  /* Bereichsnavigation (Daniel 11.10.2026): central underlined tabs on desktop; phones get the pager and the sheet. */
  .cockpit-page .section-tabs { margin-top: var(--s6); }
  .cockpit-page .section-switch__row { display: grid; grid-template-columns: var(--touch-target) minmax(0, 1fr) var(--touch-target); align-items: stretch; gap: var(--s2); }
  .cockpit-page .section-switch__step { display: grid; place-items: center; min-height: calc(var(--touch-target) + var(--s2)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); cursor: pointer; }
  .cockpit-page .section-switch__step:disabled { opacity: .35; cursor: default; }
  .cockpit-page .section-switch__current { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); min-height: calc(var(--touch-target) + var(--s2)); padding: var(--s2) var(--s3); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
  .cockpit-page .section-switch__current small { display: block; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .cockpit-page .section-switch__current strong { display: block; font-size: .875rem; line-height: 1.25; }
  .cockpit-page .section-switch__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); }
  .cockpit-page .section-switch__bar { min-height: var(--s5); padding: 0; border: 0; background: transparent; cursor: pointer; }
  .cockpit-page .section-switch__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; border-radius: var(--radius-pill); background: var(--border); transform: translateY(-50%); }
  .cockpit-page .section-switch__bar[aria-current='true']::before { background: var(--gold); }
  .section-sheet { display: grid; gap: var(--s2); }
  .section-sheet__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
  .section-sheet__option[aria-current='true'] { border-color: var(--gold); background: var(--gold-soft); }
  .section-sheet__option > .section-icon:first-child { color: var(--accent-text); }
  .section-sheet__option strong { display: block; font-size: .9375rem; }
  .section-sheet__option small { display: block; color: var(--text-muted); font-size: .8125rem; line-height: 1.35; }
  .section-sheet__hint { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s1); color: var(--info); font-size: .75rem; font-weight: 700; }


  /* Nächster Schritt: r337 compass watermark and sender line. */
  .cockpit-page .cockpit-next > .card { position: relative; overflow: hidden; }
  .cockpit-page .cockpit-next > .card > :not(.cockpit-next__compass) { position: relative; z-index: 1; }
  .cockpit-page .cockpit-next__compass { position: absolute; z-index: 0; top: var(--s5); right: var(--s5); width: 200px; height: 200px; color: var(--gold); opacity: .55; pointer-events: none; }
  .cockpit-page .cockpit-next__sender { display: flex; align-items: center; gap: var(--s3); max-width: 58ch; padding-block-end: var(--s4); border-block-end: 1px solid var(--gold-border); }
  .cockpit-page .cockpit-next__sender-avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); font-size: .75rem; font-weight: 800; }
  .cockpit-page .cockpit-next__sender-copy { display: grid; }
  .cockpit-page .cockpit-next__sender-copy small { color: var(--text-muted); }
  .cockpit-page .cockpit-next__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .cockpit-page .cockpit-next__eyebrow .eyebrow { margin: 0; }
  .cockpit-page .cockpit-next__title { max-width: 26ch; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; }
  .cockpit-page .cockpit-next__reason { max-width: 60ch; }
  /* Daniel 11.10.2026: the r337 visit delta as separate parts with an icon, below the reason and above the actions. */
  .cockpit-page .cockpit-next__delta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
  .cockpit-page .cockpit-next__delta > span { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: .875rem; }
  .cockpit-page .cockpit-next__delta .cockpit-next__icon { width: 1.125rem; height: 1.125rem; color: var(--accent-text); }
  /* "Braucht Aufmerksamkeit": the reason as a calm highlighted note with icon and gold edge, never red. */
  .cockpit-page .cockpit-next__callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); max-width: 62ch; padding: var(--s4); border: 1px solid var(--gold-border); border-left: 3px solid var(--gold); border-radius: var(--radius-control); background: var(--surface); }
  .cockpit-page .cockpit-next__callout-icon { display: grid; place-items: center; width: calc(var(--s6) + var(--s1)); height: calc(var(--s6) + var(--s1)); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); }
  .cockpit-page .cockpit-next__callout > .cockpit-next__reason { margin: 0; color: var(--text); line-height: 1.55; }
  /* UI-008: r337 hero compass hover (r4x-cockpit-home-sections v2970) and the gold L-line; attention gets a live dot. */
  .cockpit-page .cockpit-next__compass { transform-origin: center; transition: transform calc(var(--motion-base) * 3) var(--ease-standard), filter calc(var(--motion-base) * 3) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); }
  @media (hover: hover) and (pointer: fine) {
    .cockpit-page .cockpit-next > .card:hover > .cockpit-next__compass { transform: rotate(11deg) scale(1.055); filter: drop-shadow(0 0 10px var(--gold-border)); opacity: .82; }
  }
  .cockpit-page .cockpit-next > .card::before { content: ''; position: absolute; inset-block: var(--s6); inset-inline-start: 0; width: 2px; background: var(--gold); opacity: .85; }
  .cockpit-page .cockpit-next[data-next-class='attention'] .cockpit-next__eyebrow .eyebrow::after { content: ''; display: inline-block; width: var(--s2); height: var(--s2); margin-inline-start: var(--s2); border-radius: var(--radius-pill); background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); vertical-align: middle; animation: attention-pulse calc(var(--motion-base) * 6) var(--ease-standard) 2; }

  /* Prüfen as primary function: r337 content + situation-router image. */
  .cockpit-page .cockpit-pruefen-heading { color: var(--accent-text); }
  .cockpit-page .cockpit-pruefen { overflow: hidden; padding: 0; border-color: var(--gold-border); border-inline-start: 4px solid var(--gold); }
  .cockpit-page .cockpit-pruefen__content { display: grid; gap: var(--s3); align-content: center; padding: var(--s6); }
  .cockpit-page .cockpit-pruefen__content > * { margin: 0; }
  .cockpit-page .cockpit-pruefen__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .cockpit-page .cockpit-pruefen__text { max-width: 52ch; color: var(--text-muted); }
  .cockpit-page .cockpit-pruefen__actions { display: grid; gap: var(--s4); justify-items: start; margin-block-start: var(--s2); }
  .cockpit-page .cockpit-pruefen__direct { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
  .cockpit-page .cockpit-pruefen__direct-label { color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .cockpit-pruefen__direct-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch-target); color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-border); text-underline-offset: 4px; }
  .cockpit-page .cockpit-pruefen__direct-link img { width: 24px; height: 24px; padding: 2px; border-radius: var(--radius-badge); background: var(--tool-surface); }
  .cockpit-page .cockpit-pruefen__media { position: relative; min-height: 100%; background: var(--brand-page); }
  .cockpit-page .cockpit-pruefen__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cockpit-page .cockpit-pruefen__media-heading { display: none; }

  /* Area images (Lernen, Portfolio) and the daily ritual underlay. */
  .cockpit-page .cockpit-area-media { margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--brand-page); }
  .cockpit-page .cockpit-area-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* Feature carousel: r337 card anatomy on v18 components. */
  .cockpit-page .cockpit-discovery__head { display: grid; gap: var(--s1); margin-block-end: var(--s4); }
  .cockpit-page .cockpit-discovery__head > * { margin: 0; }
  .cockpit-page .cockpit-discovery__head p { color: var(--text-muted); }
  .feature-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
  .feature-card:is(:hover, :focus-within) { border-color: var(--gold-border); }
  .feature-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-page); }
  .feature-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .feature-card__topline { position: absolute; inset: var(--s3) var(--s3) auto var(--s3); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); }
  .feature-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--s3); padding: var(--s4); }
  .feature-card__body > p { margin: 0; }
  .feature-card__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; }
  .feature-card__title-row h3 { margin: 0; min-width: 0; font-size: 1.125rem; line-height: 1.3; }
  .feature-card__plus { color: var(--accent-text); }
  .feature-card__included { color: var(--accent-text); font-size: .8125rem; font-weight: 600; }
  .feature-card__text { color: var(--text-muted); font-size: .9375rem; }
  .feature-card__actions { display: grid; gap: var(--s2); margin-block-start: auto; }
  .feature-card__actions > .btn { width: 100%; justify-content: center; }
  .feature-card--overview { border-color: var(--gold-border); }
  .feature-card__media--all { background: radial-gradient(circle at 26% 50%, var(--gold-soft), transparent 34%), var(--brand-page); }
  /* BUG-026: the r337 orbit visual on a responsive grid. The cluster scales as one unit (positions in percent of the
     cluster), the copy column wraps beside it, and the badge sits in the copy column instead of over it. */
  .feature-card__all-visual { --all-cluster: 148px; position: absolute; inset: 0; display: grid; grid-template-columns: var(--all-cluster) minmax(0, 1fr); align-items: center; gap: var(--s4); padding: var(--s4); }
  .feature-card__all-cluster { position: relative; width: var(--all-cluster); aspect-ratio: 1; }
  .feature-card__all-orbit { position: absolute; inset: 13.5%; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); }
  /* Surface, border and shadow come from the central .tool-icon component; only position and size are local. */
  .feature-card__all-main, .feature-card__all-mini { position: absolute; display: grid; place-items: center; height: auto; padding: 0; overflow: hidden; }
  .feature-card__all-main { left: 50%; top: 50%; width: 32%; aspect-ratio: 1; border-radius: var(--radius-control); transform: translate(-50%, -50%); }
  .feature-card__all-main img { width: 70%; height: 70%; object-fit: contain; }
  .feature-card__all-mini { width: 17%; aspect-ratio: 1; border-radius: var(--radius-badge); }
  .feature-card__all-mini img { width: 68%; height: 68%; object-fit: contain; }
  .feature-card__all-mini--1 { left: 41.5%; top: 5%; }
  .feature-card__all-mini--2 { left: 80%; top: 29%; }
  .feature-card__all-mini--3 { left: 76%; top: 70%; }
  .feature-card__all-mini--4 { left: 7%; top: 70%; }
  .feature-card__all-mini--5 { left: 3%; top: 29%; }
  .feature-card__all-copy { display: grid; justify-items: start; gap: var(--s1); min-width: 0; color: var(--brand-text); }
  .feature-card__all-copy .badge { margin-block-end: var(--s1); }
  .feature-card__all-eyebrow { color: var(--gold-hover); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .feature-card__all-copy strong { font-size: clamp(1rem, .9rem + .4vw, 1.125rem); line-height: 1.2; overflow-wrap: break-word; }
  .feature-card__all-copy small { color: var(--brand-muted); font-size: .72rem; }
  .feature-card__all-copy .badge { white-space: nowrap; }
  @media (max-width: 480px) {
    .feature-card__all-visual { --all-cluster: 104px; gap: var(--s3); padding: var(--s3); }
    /* The card text below already names the complete overview; on phones the media keeps eyebrow, title and areas. */
    .feature-card__all-copy .badge { display: none; }
  }

  /* UI-009: "R4X Features entdecken" on the r337 navy discovery surface (r4x-cockpit-home-sections v2970) in both
     themes; the cards inside share the dark brand ink like the hero. */
  .cockpit-page .cockpit-discovery { --surface: var(--navy-surface); --surface-muted: var(--navy-page); --text: var(--brand-text); --text-muted: var(--brand-muted); --border: var(--navy-border); --accent-text: var(--gold-hover);
    position: relative; overflow: hidden; color: var(--brand-text); color-scheme: dark; border-color: var(--navy-border);
    background: radial-gradient(circle at 90% 0, var(--navy-glow), transparent 38%), linear-gradient(145deg, var(--navy-page), var(--brand-surface) 52%, var(--brand-page)); }
  .cockpit-page .cockpit-discovery::before { content: ''; position: absolute; inset: 0 var(--s4) auto; height: 2px; background: linear-gradient(90deg, transparent, var(--navy-line), var(--gold), transparent); }
  .cockpit-page .cockpit-discovery .r4x-mark__four { color: var(--brand-text); }
  .cockpit-page .cockpit-discovery__head h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
  .feature-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-start: var(--s3); }
  .feature-controls__dots { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); }
  .feature-controls__dot { width: 8px; height: 8px; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--border); cursor: pointer; transition: width var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
  .feature-controls__dot[aria-pressed="true"] { width: 22px; background: var(--gold); }
  .feature-controls__arrow { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: 1.25rem; cursor: pointer; }
  .feature-controls__arrow:is(:hover, :focus-visible) { border-color: var(--gold-border); color: var(--accent-text); }
  .feature-controls__arrow:disabled { opacity: .35; cursor: default; }

  /* UI-008: Wissensgedächtnis as figures, Free usage bar and a review card instead of text lines. */
  .cockpit-page .memory-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-block: var(--s3); }
  .cockpit-page .memory-figures p { display: grid; gap: 2px; margin: 0; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .cockpit-page .memory-figures strong { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .cockpit-page .memory-figures span { color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .memory-usage { display: grid; gap: var(--s2); margin-block-end: var(--s3); }
  .cockpit-page .memory-usage p { margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .memory-review { display: grid; gap: var(--s2); margin-block-end: var(--s3); padding: var(--s4); border: 1px solid var(--info-border); border-inline-start: 4px solid var(--info); border-radius: var(--radius-control); background: var(--info-soft); }
  .cockpit-page .memory-review > * { margin: 0; }
  .cockpit-page .memory-review__eyebrow { color: var(--info); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .memory-review h4 { font-size: 1.25rem; }

  /* UI-043: honest empty portfolio state as a three-step path; UI-008: personal hints as signal cards. */
  .cockpit-page .portfolio-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
  .cockpit-page .portfolio-path li { position: relative; display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border: 1px dashed var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .cockpit-page .portfolio-path li[aria-current='step'] { border-style: solid; border-color: var(--gold-border); background: var(--gold-soft); }
  .cockpit-page .portfolio-path__number { display: grid; place-items: center; width: var(--s6); height: var(--s6); flex: none; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-path li[aria-current='step'] .portfolio-path__number { border-color: var(--gold); background: var(--gold); color: var(--button-text); }
  .cockpit-page .portfolio-path strong { display: block; font-size: .875rem; line-height: 1.35; }
  .cockpit-page .portfolio-path small { display: block; color: var(--text-muted); font-size: .8125rem; }
  /* UI-043 example development curve (r337 demo preview), clearly marked; line colours follow the change tokens. */
  .cockpit-page .portfolio-example { display: grid; gap: var(--s3); margin: 0; }
  .cockpit-page .portfolio-example__chart { position: relative; padding: var(--s3); border: 1px dashed var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .cockpit-page .portfolio-example__chart svg { display: block; width: 100%; height: auto; }
  .cockpit-page .portfolio-example__mark { position: absolute; top: var(--s3); left: var(--s3); }
  .cockpit-page .portfolio-example__grid { stroke: var(--border-soft); stroke-width: 1; }
  .cockpit-page .portfolio-example__line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .portfolio-example__line--up, .cockpit-page .portfolio-example__point--up { stroke: var(--success); }
  .cockpit-page .portfolio-example__line--down, .cockpit-page .portfolio-example__point--down { stroke: var(--danger); }
  .cockpit-page .portfolio-example__point { fill: var(--surface); stroke-width: 3; }
  .cockpit-page .portfolio-example__stop-up { stop-color: var(--success); stop-opacity: .22; }
  .cockpit-page .portfolio-example__stop-down { stop-color: var(--danger); stop-opacity: .18; }
  .cockpit-page .portfolio-example__stop-end { stop-color: var(--surface); stop-opacity: 0; }
  .cockpit-page .portfolio-example__stands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .cockpit-page .portfolio-example__stands > span { display: grid; gap: 2px; padding: var(--s2) var(--s3); border: 1px dashed var(--border); border-radius: var(--radius-control); }
  .cockpit-page .portfolio-example__stands small { color: var(--text-muted); font-size: .75rem; }
  .cockpit-page .portfolio-example__stands strong { font-size: .9375rem; }
  .cockpit-page .portfolio-example__note { margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .portfolio-signal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding: var(--s4); border: 1px solid var(--info-border); border-inline-start: 4px solid var(--info); border-radius: var(--radius-card); background: linear-gradient(90deg, var(--info-soft), transparent 60%), var(--surface); }
  .cockpit-page .portfolio-signal__icon { display: grid; place-items: center; width: calc(var(--s6) + var(--s1)); height: calc(var(--s6) + var(--s1)); border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info); }
  .cockpit-page .portfolio-signal__body { display: grid; justify-items: start; gap: var(--s2); min-width: 0; }
  .cockpit-page .portfolio-signal__body > * { margin: 0; }
  .cockpit-page .portfolio-signal__eyebrow { color: var(--info); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .portfolio-signal__title { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
  @media (max-width: 767px) { .cockpit-page .portfolio-path { grid-template-columns: minmax(0, 1fr); } }

  /* r36 (r35 A05): r337 data backup card staging (r4x-data-backup.v2882.css) on the v18 card: hero picture behind a
     surface veil (right on desktop, above the text on mobile), shield before the label, gold accent line. */
  .cockpit-page .data-backup > .card {
    background:
      linear-gradient(90deg, var(--surface) 48%, color-mix(in srgb, var(--surface) 78%, transparent) 62%, transparent 88%),
      url('/assets/r4x-data-backup-hero.v1124.webp') 66% center / cover no-repeat,
      var(--surface);
  }
  .cockpit-page .data-backup__content > * { max-width: 40rem; }
  .cockpit-page .data-backup__eyebrow { display: flex; align-items: center; gap: var(--s2); margin: 0; }
  .cockpit-page .data-backup__icon { display: inline-flex; color: var(--accent-text); }
  /* UI-008: backup scope at a glance; included (success), kept in the account (info), not included (muted). */
  .cockpit-page .data-scope-groups:empty { display: none; }
  .cockpit-page .data-scope-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--s2); min-width: 0; }
  .cockpit-page .data-scope { --scope-color: var(--success); --scope-soft: var(--success-soft); --scope-border: var(--success-border); padding: var(--s3); border: 1px solid var(--scope-border); border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface) 82%, transparent); }
  .cockpit-page .data-scope--account { --scope-color: var(--info); --scope-soft: var(--info-soft); --scope-border: var(--info-border); }
  .cockpit-page .data-scope--excluded { --scope-color: var(--text-muted); --scope-soft: var(--surface-muted); --scope-border: var(--border); }
  .cockpit-page .data-scope h4 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: .8125rem; }
  .cockpit-page .data-scope__icon { display: grid; place-items: center; width: var(--s5); height: var(--s5); border-radius: var(--radius-pill); background: var(--scope-soft); color: var(--scope-color); }
  .cockpit-page .data-scope ul { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
  .cockpit-page .data-scope li { padding: 2px var(--s2); border: 1px solid var(--border-soft); border-radius: var(--radius-badge); color: var(--text-muted); font-size: .75rem; line-height: 1.5; }  .cockpit-page .data-backup__accent { display: block; width: calc(var(--s8) + var(--s5)); height: 3px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), transparent); }

  @media (max-width: 767px) {
    .cockpit-page .data-backup > .card {
      background:
        linear-gradient(180deg, transparent 22vw, var(--surface) 52vw),
        url('/assets/r4x-data-backup-hero-mobile.v1129.webp') center top / 100% auto no-repeat,
        var(--surface);
    }
    .cockpit-page .cockpit-hero { min-height: 0; padding: var(--s4); }
    .cockpit-page .cockpit-hero__quote blockquote { font-size: 1.25rem; }
    .cockpit-page .memory-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); min-height: calc(var(--s8) + var(--s1)); padding: var(--s3); }
    .cockpit-page :is(.memory-stats, .memory-stats-note, .memory-bar__plan, .memory-toggle__label) { display: none; }
    .cockpit-page .memory-hint { display: inline-flex; }
    .cockpit-page .memory-panel__plan { display: block; }
    .cockpit-page .memory-bar__title { gap: var(--s1) var(--s2); }
    .cockpit-page .memory-bar__title > h2 { font-size: 1rem; }
    .cockpit-page .memory-bar__claim { font-size: .75rem; line-height: 1.35; }
    .cockpit-page .memory-toggle { min-width: var(--touch-target); justify-content: center; padding: 0; }
    /* The whole status line opens the details: the toggle covers it (no further controls inside on phones). */
    .cockpit-page .memory-toggle::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
    /* Guest: the sign-in button gets its own full-width row, so the line is not one tap area. */
    .cockpit-page .memory-bar--guest { grid-template-areas: 'mark head toggle' 'cta cta cta'; }
    .cockpit-page .memory-bar--guest > .memory-bar__mark { grid-area: mark; }
    .cockpit-page .memory-bar--guest > .memory-bar__head { grid-area: head; }
    .cockpit-page .memory-bar--guest > .memory-toggle { grid-area: toggle; }
    .cockpit-page .memory-bar--guest > .btn { grid-area: cta; width: 100%; }
    .cockpit-page .memory-bar--guest > .memory-toggle::after { content: none; }
    .cockpit-page .memory-panel__inner { padding: var(--s3); }
    .cockpit-page :is(.memory-row, .memory-links, .memory-benefits) { grid-template-columns: minmax(0, 1fr); }
    .cockpit-page :is(.memory-intro, .memory-then-now) { padding: var(--s4); }
    .cockpit-page .memory-then-now__subject { font-size: 1.25rem; }
    .cockpit-page .memory-then-now .btn { width: 100%; }
    .cockpit-page .cockpit-memory-region { margin-block: var(--s4); }
    .cockpit-page .cockpit-next__delta { display: grid; }
    .cockpit-page .cockpit-next__callout { gap: var(--s2); padding: var(--s3); }
    .cockpit-page .cockpit-next__compass { top: var(--s3); right: var(--s3); width: 120px; height: 120px; opacity: .4; }
    .cockpit-page .cockpit-pruefen__media { order: -1; height: 112px; min-height: 0; }
    .cockpit-page .cockpit-pruefen__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--brand-page) 20%, transparent) 48%, color-mix(in srgb, var(--brand-page) 88%, transparent) 100%); }
    .cockpit-page .cockpit-pruefen__media-heading { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s3); z-index: 1; display: grid; gap: 2px; color: var(--brand-text); }
    .cockpit-page .cockpit-pruefen__media-heading span { color: var(--gold-hover); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .cockpit-page .cockpit-pruefen__media-heading strong { font-size: 1.375rem; line-height: 1.08; }
    .cockpit-page .cockpit-pruefen__eyebrow, .cockpit-page .cockpit-pruefen__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .cockpit-page .cockpit-pruefen__content { padding: var(--s4); }

  }
}

@layer layout {
  .cockpit-page .cockpit-pruefen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  /* r337 carousel card width: three cards on wide screens, peek on smaller ones. */
  .cockpit-page .feature-track { gap: var(--s4); }
  .cockpit-page .feature-slide { flex-basis: min(82vw, 365px); }
  /* Tablet: the figures move to a second line of the memory status line (mockup v2). */
  @media (min-width: 768px) and (max-width: 1140px) {
    .cockpit-page .memory-bar:not(.memory-bar--guest) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'mark head toggle' 'stats stats stats'; }
    .cockpit-page .memory-bar:not(.memory-bar--guest) > .memory-bar__mark { grid-area: mark; }
    .cockpit-page .memory-bar:not(.memory-bar--guest) > .memory-bar__head { grid-area: head; }
    .cockpit-page .memory-bar:not(.memory-bar--guest) > .memory-toggle { grid-area: toggle; }
    .cockpit-page :is(.memory-stats, .memory-stats-note) { grid-area: stats; padding-top: var(--s2); border-top: 1px solid var(--border-soft); }
    .cockpit-page .memory-stat { flex: 1; }
    .cockpit-page .section-tabs [role='tab'] { padding-inline: var(--s3); font-size: .875rem; }
  }
  @media (min-width: 768px) { .cockpit-page .feature-slide { flex-basis: min(43vw, 380px); } }
  @media (min-width: 1120px) { .cockpit-page .feature-slide { flex-basis: calc((100% - (var(--s4) * 2)) / 3); } }
  @media (max-width: 767px) {
    /* r36: room for the data backup picture above the text (the central mobile card padding lives in this layer). */
    .cockpit-page .data-backup > .card { padding-top: 46vw; }
    .cockpit-page .cockpit-pruefen { grid-template-columns: minmax(0, 1fr); }
    .cockpit-page .feature-track { gap: var(--s3); }
  }
}