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

  /* 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); }
  /* 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; }
  /* Paket Y (UI-072): greeting.js chooses the r337 greeting before the first paint; without a choice the first shows. */
  :root:not([data-r4x-greeting='returning']) .cockpit-hero [data-greeting='returning'], :root[data-r4x-greeting='returning'] .cockpit-hero [data-greeting='first'] { display: none; }
  .cockpit-page .cockpit-hero__title .info-popover > summary { border-color: var(--brand-border); background: transparent; color: var(--brand-text); }
  /* Paket X (UI-063): the two lines of the quote are reserved in the size of the quote itself (2 × line height 1.3);
     measured on the figure they were 42 instead of 62 px, and the head grew when the serif font arrived. */
  /* Paket AH (UI-088, Variante C): "R4X-Tipp" with a bulb above the quote, gold and eyebrow size, without surface or
     frame; the gold rule stays beside the quote only. */
  .cockpit-page .cockpit-hero__quote { display: grid; grid-template-columns: 2px minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: start; }
  .cockpit-page .cockpit-hero__quote::before { content: ''; grid-row: 2; grid-column: 1; align-self: stretch; border-radius: var(--radius-pill); background: var(--gold); }
  .cockpit-page .cockpit-hero__tip { grid-row: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); color: var(--gold); font-size: .72rem; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
  .cockpit-page .cockpit-hero__tip-mark { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .cockpit-hero__quote blockquote { grid-row: 2; grid-column: 2; min-height: 2.6em; 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. */
  /* Paket AG (UI-084): greeting, R4X-Gedächtnis and the areas are independent sections. */
  .cockpit-page .cockpit-memory-region { margin-block: var(--section-gap); }
  .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(--attention); box-shadow: 0 0 0 3px var(--attention-soft); }
  /* Paket U (Daniel 15.10.2026, "ordentliche Aufwertung"): mockup v2 stays; the memory gains its finish: a gold line on top,
     soft gold light, a glowing mark, the figures in the display serif of the brand divided by fine gold rules, the Plus
     plan in gold with the R4X star and the movement of the history as a gold capsule. Sources and counting unchanged. */
  .cockpit-page .memory { position: relative; border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: radial-gradient(60% 160% at 0% 0%, var(--gold-soft), transparent 62%), linear-gradient(110deg, var(--gold-soft), transparent 45%), var(--surface); box-shadow: var(--shadow-elevated); }
  .cockpit-page .memory::before { content: ''; position: absolute; inset: 0 var(--s5) auto; height: 2px; border-radius: var(--radius-pill); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .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); }
  /* Paket AJ _v5 (UI-117): the guest's way to Mein Krypto Status, below the status line. */
  .cockpit-page .memory-guest-link { margin: 0; padding: 0 var(--s4) var(--s3); }
  .cockpit-page .memory-guest-link a { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--touch-target); color: var(--accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  /* Paket AJ _v2 (Daniel 18.10.2026, UI-108 Variante C): from 1280 px the line of an account holds the figures, the
     Mein Krypto Status button and the toggle; narrower, the figures take a second line (measured: from 1141 to 1279 px
     the claim broke into two or three lines beside them). */
  @media (min-width: 1280px) { .cockpit-page .memory-bar:not(.memory-bar--guest) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; } }
  .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: radial-gradient(circle at 30% 25%, var(--surface), var(--gold-soft)); color: var(--accent-text); box-shadow: 0 0 0 4px var(--gold-soft), 0 0 22px var(--gold-glow); }
  .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); background: linear-gradient(135deg, var(--gold-soft), transparent 80%), var(--surface); color: var(--accent-text); font-weight: 700; box-shadow: 0 0 14px var(--gold-glow); }
  .cockpit-page :is(.memory-plan[data-memory-plan='plus'], .memory-plan__plus)::before { content: '✦' / ''; margin-inline-end: var(--s1); color: var(--gold); }
  .cockpit-page .memory-plan__plus { position: relative; color: var(--accent-text); font-weight: 700; text-decoration: none; }
  /* Paket U: the link inside the slim pill keeps a full touch target through an invisible ring above and below. */
  .cockpit-page .memory-plan__plus::after { content: ''; position: absolute; inset: calc(var(--s3) * -1) 0; }
  .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 { position: relative; 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 .memory-stat + .memory-stat::before { content: ''; position: absolute; inset: var(--s2) auto var(--s2) calc(var(--s1) * -1); width: 1px; background: linear-gradient(180deg, transparent, var(--gold-border), transparent); }
  /* Paket W (Daniel 15.10.2026, "jeder Bereich als eigenständig erkennbar"): the six areas of the memory carry their own
     tone (--memory-*) on symbol, edge and light; titles stay in the text colour. */
  .cockpit-page [data-memory-area] { --area-soft: color-mix(in srgb, var(--area) 13%, transparent); --area-line: color-mix(in srgb, var(--area) 46%, transparent); }
  .cockpit-page [data-memory-area='learn'] { --area: var(--memory-learn); }
  .cockpit-page [data-memory-area='check'] { --area: var(--memory-check); }
  .cockpit-page [data-memory-area='growth'] { --area: var(--memory-growth); }
  .cockpit-page [data-memory-area='status'] { --area: var(--memory-status); }
  .cockpit-page [data-memory-area='favorite'] { --area: var(--memory-favorite); }
  .cockpit-page [data-memory-area='recent'] { --area: var(--memory-recent); }
  .cockpit-page .memory-medal { display: grid; place-items: center; flex: none; width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--area-line); border-radius: var(--radius-pill); background: radial-gradient(circle at 32% 26%, var(--surface), var(--area-soft)); color: var(--area); box-shadow: 0 0 0 var(--s1) var(--area-soft); }
  .cockpit-page .memory-medal .memory-icon { width: 1.375rem; height: 1.375rem; }
  .cockpit-page .memory-stat__icon { grid-row: 1 / 3; display: grid; place-items: center; width: var(--s6); height: var(--s6); border: 1px solid var(--area-line); border-radius: var(--radius-pill); background: var(--area-soft); color: var(--area); }
  .cockpit-page .memory-stat__icon .memory-icon { width: 1.125rem; height: 1.125rem; }
  /* Paket V (Daniel 15.10.2026): figures in the body font (the serif draws old-style figures only). Paket W: in the tone
     of their area. */
  .cockpit-page .memory-stat__value { display: flex; align-items: center; gap: var(--s1); color: var(--area); font-size: 1.75rem; font-weight: 700; line-height: 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); transition: content-visibility calc(var(--motion-base) * 1.5) allow-discrete; }
  /* Paket X (UI-064, BUG-053): the closed panel is not rendered (it was laid out and painted behind its clip); it renders
     at once when it opens and stays rendered until it has closed. */
  .cockpit-page .memory-panel[data-open='false'] .memory-panel__inner { content-visibility: hidden; }
  .cockpit-page .memory-panel__plan { display: none; }
  /* Paket W (Daniel 15.10.2026): the open memory as tiles, one per area. Each tile: medal, the area name in its tone, the
     title in the display serif, light and a line in the tone. Damals ↔ Heute (Prüf-Ergebnisse) leads on the left, Lernen
     and Entwicklung stand beside it; Mein Krypto Status, Favoriten and Zuletzt geöffnet follow below. */
  .cockpit-page .memory-areas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--s3); }
  .cockpit-page .memory-areas > .memory-then-now { grid-row: span 2; }
  /* With nothing to re-check, the three tiles stand side by side at equal width (no large empty tile). */
  @media (min-width: 768px) { .cockpit-page .memory-areas:has(> .memory-tile--calm.memory-then-now) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; } }
  .cockpit-page .memory-areas > .memory-tile--calm.memory-then-now { grid-row: auto; }
  .cockpit-page .memory-tile { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--s3); min-width: 0; padding: var(--s5); overflow: hidden; border: 1px solid var(--area-line); border-radius: var(--radius-card); background: radial-gradient(120% 120% at 100% 0, var(--area-soft), transparent 62%), var(--surface); }
  .cockpit-page .memory-tile--calm { border-style: dashed; }
  .cockpit-page :is(.memory-tile, .memory-link, .memory-benefit)::before { content: ''; position: absolute; inset: 0 var(--s5) auto; height: 2px; border-radius: var(--radius-pill); background: linear-gradient(90deg, transparent, var(--area), transparent); pointer-events: none; }
  .cockpit-page .memory-tile__head { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
  .cockpit-page .memory-tile__names { display: grid; gap: 2px; min-width: 0; }
  .cockpit-page .memory-tile__area { color: var(--area); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .memory-tile__title { margin: 0; font-family: var(--font-beginner); font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
  .cockpit-page .memory-tile__calm { margin: 0; color: var(--text-muted); font-size: .9375rem; }
  .cockpit-page .memory-then-now__head { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
  .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(--area-line); border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text); box-shadow: 0 0 0 var(--s1) var(--area-soft); }
  .cockpit-page .memory-coin img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cockpit-page .memory-coin--fallback { color: var(--area); 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); width: 100%; margin: var(--s3) 0 var(--s2); }
  .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(--area); background: var(--area); box-shadow: 0 0 0 var(--s1) var(--area-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(--area); }
  .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(--area-line); }
  .cockpit-page .memory-timeline__gap span { position: relative; padding-inline: var(--s3); border: 1px solid var(--area-line); 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(--s2); }
  .cockpit-page .memory-due__list { display: grid; gap: var(--s2); width: 100%; }
  .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(--area-line); border-radius: var(--radius-control); background: var(--surface); color: var(--text); text-decoration: none; }
  .cockpit-page .memory-due__item:is(:hover, :focus-visible) { border-color: var(--area); background: var(--area-soft); }
  .cockpit-page .memory-due__item > .memory-icon:first-child { color: var(--area); }
  .cockpit-page .memory-due__item > .memory-icon:last-child { color: var(--text-muted); }
  /* Paket AJ _v2: title and sub line of a row as a text pair (4 px, before 0 px). */
  .cockpit-page .memory-due__item > span { display: grid; gap: var(--s1); }
  .cockpit-page .memory-due__item strong { font-size: .9375rem; }
  .cockpit-page .memory-due__item small { color: var(--text-muted); font-size: .8125rem; }
  /* Paket AJ _v2 (Daniel 18.10.2026, UI-108 mit Klartext): each tile names what flows in and when it is due again;
     "Zuletzt festgehalten" lists the newest entries, each with a dot in the tone of its area. */
  .cockpit-page .memory-tile__rule { margin: 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
  .cockpit-page .memory-tile__more { margin: 0; color: var(--text-muted); font-size: .875rem; line-height: 1.45; }
  .cockpit-page .memory-tile__more strong { color: var(--text); }
  .cockpit-page .memory-recent { display: grid; gap: var(--s2); width: 100%; margin: 0; padding: 0; list-style: none; }
  .cockpit-page .memory-recent li { display: grid; grid-template-columns: var(--s2) auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border-soft); font-size: .875rem; }
  .cockpit-page .memory-recent li:last-child { padding-bottom: 0; border-bottom: 0; }
  .cockpit-page .memory-recent li::before { content: ''; width: var(--s2); height: var(--s2); border-radius: var(--radius-pill); background: var(--area); }
  .cockpit-page .memory-recent time { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* Paket AJ _v3 (Daniel 18.10.2026): the marked preview of the Prüf-Ergebnisse. B: the own coins and when they are due
     again (the central progress of the 30 days); A: two example coins in a dashed box. */
  .cockpit-page .memory-next { display: grid; gap: var(--s3); width: 100%; }
  .cockpit-page :is(.memory-next__head, .memory-sample figcaption) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.4; }
  .cockpit-page .memory-next__head > span:last-child { color: var(--text); font-weight: 700; }
  .cockpit-page .memory-next__list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
  .cockpit-page .memory-next__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
  .cockpit-page .memory-next__coin { width: calc(var(--s6) + var(--s2)); height: calc(var(--s6) + var(--s2)); box-shadow: none; }
  .cockpit-page .memory-next__copy { display: grid; gap: var(--s1); min-width: 0; }
  .cockpit-page .memory-next__copy strong { font-size: .9375rem; }
  .cockpit-page .memory-next__copy small { color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .memory-sample { display: grid; gap: var(--s3); width: 100%; margin: 0; padding: var(--s3); border: 1px dashed var(--area-line); border-radius: var(--radius-control); background: var(--surface-muted); }
  /* Paket W: Mein Krypto Status, Favoriten and Zuletzt geöffnet as cards of their own: medal, the area name in its tone,
     the state as title in the text colour, the way on; light and a line in the tone. */
  .cockpit-page .memory-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .cockpit-page .memory-links > :only-child { grid-column: 1 / -1; }
  /* A single area card across a wide screen: the way on at its right end (phones keep it below). */
  @media (min-width: 768px) {
    /* Paket AJ _v2: with an account two cards (Favoriten, Zuletzt geöffnet) share the row. */
    .cockpit-page .memory-links:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cockpit-page .memory-links > :only-child { align-items: center; }
    .cockpit-page .memory-links > :only-child .memory-link__copy { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s4); }
    .cockpit-page .memory-links > :only-child .memory-link__copy > :not(.memory-link__go) { grid-column: 1; }
    .cockpit-page .memory-links > :only-child .memory-link__go { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  }
  /* Paket X (Daniel 16.10.2026, UI-065): the open memory in two labelled groups. "Was dein R4X-Gedächtnis festhält" holds
     the tiles (they explain and show a state, they are no links); "Direkt öffnen" holds the area cards, which read as
     links: the arrow in a ring at their end, lifted on hover, a ring of their tone on focus. */
  .cockpit-page .memory-group { display: grid; gap: var(--s3); min-width: 0; }
  .cockpit-page .memory-group--opens { margin-top: var(--s2); }
  .cockpit-page .memory-group__label { display: flex; align-items: center; gap: var(--s3); margin: 0; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .memory-group__label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-border), transparent); }
  .cockpit-page .memory-link { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s4); overflow: hidden; border: 1px solid var(--area-line); border-radius: var(--radius-card); background: radial-gradient(120% 140% at 100% 0, var(--area-soft), transparent 62%), var(--surface); box-shadow: var(--shadow-card); color: var(--text); text-decoration: none; overflow-wrap: anywhere; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
  .cockpit-page .memory-link:hover { border-color: var(--area); box-shadow: 0 0 0 var(--s1) var(--area-soft), var(--shadow-elevated); transform: translateY(-1px); }
  .cockpit-page .memory-link:focus-visible { border-color: var(--area); box-shadow: 0 0 0 var(--s1) var(--area-soft); }
  .cockpit-page .memory-link__open { display: grid; place-items: center; flex: none; width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--area-line); border-radius: var(--radius-pill); background: var(--surface); color: var(--area); transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
  .cockpit-page .memory-link__open .memory-icon { width: 1.125rem; height: 1.125rem; }
  .cockpit-page .memory-link:is(:hover, :focus-visible) .memory-link__open { background: var(--area); color: var(--surface); }
  .cockpit-page .memory-link__copy { display: grid; gap: var(--s1); min-width: 0; }
  .cockpit-page .memory-link__area { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); color: var(--area); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .memory-link__area .badge { letter-spacing: normal; text-transform: none; }
  .cockpit-page .memory-link strong { font-size: 1.0625rem; line-height: 1.3; }
  .cockpit-page .memory-link__go { margin-top: var(--s1); color: var(--text-muted); font-size: .8125rem; font-weight: 700; }
  .cockpit-page .memory-link:is(:hover, :focus-visible) .memory-link__go { color: var(--text); }
  .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: 0; padding: 0; list-style: none; }
  .cockpit-page .memory-benefit { position: relative; display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); overflow: hidden; border: 1px solid var(--area-line); border-radius: var(--radius-card); background: radial-gradient(120% 140% at 100% 0, var(--area-soft), transparent 62%), var(--surface); }
  .cockpit-page .memory-benefit strong { display: block; color: var(--area); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .memory-benefit small { display: block; margin-top: var(--s1); color: var(--text); font-size: .9375rem; 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); }
  /* Paket W: each bar is a 44 px touch area; the fine line stays in its middle. */
  .cockpit-page .section-switch__bar { position: relative; min-height: var(--touch-target); 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; }


  /* Weitermachen & Prüfen (Paket V, Daniel 15.10.2026, N1d; the tab name since Paket W): no lead sentence; from 1024 px both cards side by side,
     the same height and the same order (eyebrow, title, text, actions at the foot). The next step leads on the accent
     stage (.r4x-stage--accent) with the large r337 compass watermark and its sender line. */
  .cockpit-page .cockpit-next, .cockpit-page .cockpit-next > .card { height: 100%; }
  .cockpit-page .cockpit-next > .card { display: flex; flex-direction: column; gap: var(--s4); }
  .cockpit-page .cockpit-next > .card > :not(.cockpit-next__compass) { position: relative; z-index: 1; }
  /* Paket W (Leistung): the glow is a soft gold light painted once behind the compass; the former drop-shadow filter made
     the 360 px compass a layer of its own that the GPU blurred on every frame (and lifted the elements above it too). */
  .cockpit-page .cockpit-next__compass { position: absolute; z-index: 0; right: calc(var(--s7) * -1); bottom: calc(var(--s7) * -1); width: 360px; height: 360px; border-radius: var(--radius-pill); background: radial-gradient(closest-side, var(--gold-glow), transparent 72%); color: var(--gold); opacity: .9; 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; }
  /* Paket W: both lines fit beside the 44 px avatar, so the sender line has the height of the avatar at every width (the
     eyebrow of Prüfen beside it moves down by exactly that height). */
  .cockpit-page .cockpit-next__sender-copy { display: grid; line-height: 1.3; }
  .cockpit-page .cockpit-next__sender-copy small { color: var(--text-muted); }
  /* Paket W: the eyebrow row keeps the height of a badge (28 px) with or without "Neu", so the eyebrow of Prüfen beside it
     stands at the same height. */
  .cockpit-page .cockpit-next__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .cockpit-page :is(.cockpit-next__eyebrow, .cockpit-pruefen__eyebrow) { min-height: calc(var(--s5) + var(--s1)); }
  .cockpit-page .cockpit-next__eyebrow .eyebrow { margin: 0; }
  .cockpit-page .cockpit-next__title { max-width: 15ch; margin: 0; font-family: var(--font-beginner); font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.05; }
  .cockpit-page .cockpit-next__reason { max-width: 44ch; margin: 0; font-size: 1.0625rem; line-height: 1.6; }
  /* 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 orange edge (UI-121), 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(--attention-border); border-left: 3px solid var(--attention); 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(--attention-soft); color: var(--attention); }
  .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), 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); opacity: 1; }
  }
  /* Paket AK (UI-121): "Braucht Aufmerksamkeit" in Weitermachen & Prüfen in the one orange of the attention state. */
  .cockpit-page .cockpit-next[data-next-class='attention'] .cockpit-next__eyebrow .eyebrow { color: var(--attention); }
  .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(--attention); box-shadow: 0 0 0 4px var(--attention-soft); vertical-align: middle; animation: attention-pulse calc(var(--motion-base) * 6) var(--ease-standard) 2; }

  /* Prüfen (r337 content and situation-router picture), the calm card beside the next step. Paket V: eyebrow and title in
     the picture at every width (r337 did so on phones). Paket W (Daniel 15.10.2026, "Bild wirkt zur Hälfte abgeschnitten"):
     the picture keeps its 16:9, so the whole shield stays visible; eyebrow and title stand at its upper left on a light
     veil of the card surface (the eyebrow keeps the colour of "Dein empfohlener nächster Schritt" in both themes, and from
     1024 px its height: the padding of the neighbour card); below, the picture fades softly into the card. */
  .cockpit-page .cockpit-pruefen { display: flex; flex-direction: column; height: 100%; overflow: hidden; container-type: inline-size; }
  .cockpit-page .cockpit-pruefen__media { position: relative; flex: none; aspect-ratio: 16 / 9; background: var(--surface); }
  .cockpit-page .cockpit-pruefen__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  /* One veil for every width: the box always has the 16:9 of the file, so the shield stands at the same place (its rim
     from 62 %). The veil stays dense up to 55 %, where the fixed-size eyebrow ends in a narrow card, and is gone at 66 %. */
  .cockpit-page .cockpit-pruefen__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 96%, transparent) 55%, transparent 66%), linear-gradient(180deg, transparent 74%, var(--surface) 100%); }
  .cockpit-page .cockpit-pruefen__heading { position: absolute; z-index: 1; top: var(--s7); left: var(--s6); right: 42%; display: grid; gap: var(--s1); }
  /* An attention message opens with the Ready4nexxt sender line (44 px avatar, its rule and the gap below): the eyebrow
     of Prüfen moves down by the same height. */
  @media (min-width: 1024px) { .cockpit-page .cockpit-next-step:has(.cockpit-next__sender) .cockpit-pruefen__heading { top: calc(var(--s7) + var(--touch-target) + var(--s4) * 2 + 1px); } }
  .cockpit-page .cockpit-pruefen__heading > * { margin: 0; }
  /* The title grows with the card, not the window: in the narrow column at 1024 px it stays on the veil like at 1280 px
     instead of running into the shield. */
  .cockpit-page .cockpit-pruefen__title { font-family: var(--font-beginner); font-size: clamp(1.375rem, 6.4cqi, 2rem); font-weight: 600; line-height: 1.05; }
  .cockpit-page .cockpit-pruefen__content { display: flex; flex: 1; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--s6) var(--s6); }
  .cockpit-page .cockpit-pruefen__content > * { margin: 0; }
  .cockpit-page .cockpit-pruefen__text { color: var(--text-muted); }
  .cockpit-page .cockpit-pruefen__actions { display: grid; gap: var(--s3); margin-top: auto; }
  .cockpit-page .cockpit-pruefen__actions > .btn { width: 100%; justify-content: center; }
  .cockpit-page .cockpit-pruefen__direct { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s2); }
  .cockpit-page .cockpit-pruefen__direct-label { grid-column: 1 / -1; color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .cockpit-pruefen__direct-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--touch-target); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text); font-weight: 600; text-decoration: none; }
  .cockpit-page .cockpit-pruefen__direct-link:hover { border-color: var(--gold-border); }
  .cockpit-page .cockpit-pruefen__direct-link img { width: 24px; height: 24px; padding: 2px; border-radius: var(--radius-badge); background: var(--tool-surface); }

  /* 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; }
  /* Paket V (Lernen B1): the R4X Kompass card on the stage; Daniel's picture "R4X Kompass" lies on its right side above
     the card surface and fades into it (on phones above the text). */
  .cockpit-page [data-compass] > .card { display: grid; align-content: center; min-height: 380px; }
  .cockpit-page [data-compass] .cockpit-learning-summary { max-width: 58%; }
  .cockpit-page [data-compass] .cockpit-learning-summary-heading h3 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); }
  .cockpit-page .cockpit-compass-media { position: relative; z-index: 1; margin: 1px 1px 1px 0; overflow: hidden; border-radius: var(--radius-card); border-start-start-radius: 0; border-end-start-radius: 0; pointer-events: none; }
  /* The picture never sets the height of the row: the card does; the picture fills the frame the row gives it. */
  .cockpit-page .cockpit-compass-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, var(--brand-page) 30%); }
  /* Paket AG (UI-085, Daniel 17.10.2026): the Wissensgedächtnis is one card with its picture, like the R4X Kompass card:
     the picture lies in the same cell on the left of the card and fades into its surface (on phones a low band above
     the text, so the closed card stays compact). Head with title and toggle; the chevron turns with the state. */
  .cockpit-page .cockpit-area-media--learning { position: relative; z-index: 1; justify-self: start; width: 32%; margin: 1px 0 1px 1px; border: 0; border-radius: var(--radius-card); border-start-end-radius: 0; border-end-end-radius: 0; background: transparent; pointer-events: none; }
  .cockpit-page .cockpit-area-media--learning img { position: absolute; inset: 0; mask-image: linear-gradient(270deg, transparent, var(--brand-page) 40%); }
  /* Paket AK: where title and toggle do not fit side by side (phones), the toggle moves below the title instead of
     running past the card edge. */
  .cockpit-page .memory-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
  .cockpit-page .memory-card__head h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
  /* Paket AK (UI-114): the hat of the Wissensgedächtnis before its title, in the accent tone as in the glossary. */
  .cockpit-page .memory-card__icon { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .memory-card__head .btn { flex: none; gap: var(--s1); }
  .cockpit-page .memory-toggle__icon { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-base) var(--ease-standard); }
  .cockpit-page .memory-frame:not(.memory-frame--closed) .memory-toggle__icon { transform: rotate(180deg); }
  .cockpit-page .memory-frame--closed .memory-figures { margin-block-end: 0; }
  /* 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); }
  /* Paket V (Lernen B1): the figures in gold, the term due today on a gold note. */
  .cockpit-page .memory-figures p { display: grid; gap: 2px; margin: 0; padding: var(--s3); border: 1px solid var(--border-soft); border-radius: var(--radius-control); background: linear-gradient(160deg, var(--surface-muted), var(--surface)); }
  .cockpit-page .memory-figures strong { color: var(--accent-text); font-size: 2rem; font-weight: 700; 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(--gold-border); border-inline-start: 4px solid var(--gold); border-radius: var(--radius-control); background: linear-gradient(90deg, var(--gold-soft), transparent 70%), var(--surface); }
  .cockpit-page .memory-review > * { margin: 0; }
  .cockpit-page .memory-review__eyebrow { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .cockpit-page .memory-review h4 { font-size: 1.5rem; }

  /* Paket V (Daniel 15.10.2026, Portfolio B): the portfolio card on the stage, the title in the display serif; UI-043 honest
     empty state as a three-step path, now a gold line from top to bottom (current step in gold). */
  .cockpit-page [data-portfolio] > .card h3 { font-family: var(--font-beginner); font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 600; line-height: 1.1; }
  .cockpit-page .portfolio-path { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
  .cockpit-page .portfolio-path li { position: relative; display: flex; align-items: flex-start; gap: var(--s3); margin-inline-start: calc(var(--s6) / 2); padding: var(--s2) 0 var(--s2) var(--s4); border-inline-start: 2px solid var(--gold-border); }
  .cockpit-page .portfolio-path__number { display: grid; place-items: center; width: var(--s6); height: var(--s6); flex: none; margin-inline-start: calc((var(--s6) / -2) - var(--s4) - 1px); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--stage-a); 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; }
  /* Paket AT _v3 (Daniel 24.10.2026, Variante A): from 1024 px the r337 area picture stands in the upper row of the card
     beside head, value and hints, reaches its top and right edge and fades into it; the development runs below over the
     full width. The page picture above the card serves the narrower widths. */
  .cockpit-page .portfolio-card__top { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cockpit-page .portfolio-card__media { display: none; }
  @media (min-width: 1024px) {
    .cockpit-page .cockpit-portfolio-layout > .cockpit-area-media--portfolio { display: none; }
    .cockpit-page .portfolio-card__top { grid-template-columns: minmax(0, 1fr) 40%; gap: var(--s6); }
    .cockpit-page .portfolio-card__media { position: relative; display: block; min-height: 20rem; margin: calc(var(--s7) * -1) calc(var(--s7) * -1) 0 0; overflow: hidden; border-start-end-radius: var(--radius-card); pointer-events: none; }
    .cockpit-page .portfolio-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; mask-image: linear-gradient(90deg, transparent, var(--brand-page) 50%), linear-gradient(180deg, var(--brand-page) 70%, transparent); mask-composite: intersect; }
  }  /* 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; }
  /* Paket X (UI-070): the example on the Plus stage: "Plus-Vorschau" and the Plus badge above it. */
  .cockpit-page .portfolio-example__topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
  .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; }
  /* Paket AT: inside the Plus disclosure on phones the three example stands wrap instead of squeezing their amounts. */
  .cockpit-page .portfolio-example__stands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 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; }
  /* Paket AU (Daniel 24.10.2026: "logische Struktur", "die wichtigsten Informationen sofort", CTA oben, "Premium"): the head
     with the title, the eye and the way into the tracker; the value with its price time and its change since the last
     stand; then the development over the full width with its count, the range choice, the curve and the Plus part. */
  .cockpit-page .portfolio-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .cockpit-page .portfolio-card__head h3 { flex: 1 1 auto; min-width: 0; margin: 0; }
  .cockpit-page .portfolio-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .cockpit-page .portfolio-card__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--accent-text); }
  .cockpit-page .portfolio-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .portfolio-card__icon--small { width: 32px; height: 32px; }
  .cockpit-page .portfolio-card__icon--small svg { width: 18px; height: 18px; }
  .cockpit-page .portfolio-eye { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .portfolio-card__lead { margin: 0; font-size: 1.15rem; }
  .cockpit-page .portfolio-hero { display: grid; justify-items: start; gap: var(--s2); padding-block-start: var(--s4); border-block-start: 1px solid var(--border-soft); }
  .cockpit-page .portfolio-hero > * { margin: 0; }
  .cockpit-page .portfolio-hero__label { color: var(--text-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .cockpit-page .portfolio-hero__basis { margin-inline-start: var(--s2); color: var(--text-muted); font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-hero__value { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-hero__change { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); color: var(--text-muted); font-size: .875rem; }
  .cockpit-page .portfolio-delta { display: inline-flex; align-items: center; margin: 0; padding: var(--s1) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text-muted); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* r337 referenceDeltaHtml: the change since the reference stand, its date at the end of the row. */
  .cockpit-page .portfolio-reference { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: 0; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); }
  .cockpit-page .portfolio-reference span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .cockpit-page .portfolio-reference strong { font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-reference small { margin-inline-start: auto; color: var(--text-muted); font-size: .75rem; }
  .cockpit-page :is(.portfolio-delta--success, .portfolio-reference--success) { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
  .cockpit-page :is(.portfolio-delta--danger, .portfolio-reference--danger) { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
  .cockpit-page .portfolio-intro { display: grid; gap: var(--s1); }
  .cockpit-page .portfolio-intro > * { margin: 0; }
  .cockpit-page .portfolio-intro p { color: var(--text-muted); font-size: .875rem; }
  .cockpit-page .portfolio-dev { display: grid; gap: var(--s4); padding-block-start: var(--s5); border-block-start: 1px solid var(--border-soft); }
  .cockpit-page .portfolio-dev__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  .cockpit-page .portfolio-dev__head h4 { margin: 0; font-size: 1.125rem; }
  .cockpit-page .portfolio-dev__count { color: var(--text-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-dev__ranges { gap: var(--s2); margin-inline-start: auto; }
  /* The curve: the newest stand (or the one under the pointer) and the period of the chosen range above it, highest and
     lowest value at their guide lines, the area in the tone of the period, start, middle and end date below. */
  .cockpit-page .portfolio-chart__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s2) var(--s4); margin-block-end: var(--s3); }
  .cockpit-page :is(.portfolio-chart__readout, .portfolio-chart__period) { display: grid; gap: var(--s1); margin: 0; }
  .cockpit-page .portfolio-chart__period { justify-items: end; text-align: end; }
  .cockpit-page :is(.portfolio-chart__readout, .portfolio-chart__period) small { color: var(--text-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .cockpit-page .portfolio-chart__readout strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-chart__frame { position: relative; }
  .cockpit-page .portfolio-chart__plot { display: block; width: 100%; height: clamp(9rem, 24vw, 13rem); cursor: crosshair; }
  .cockpit-page .portfolio-chart__tick { position: absolute; left: calc(5.5% + var(--s4)); display: inline-flex; align-items: baseline; gap: var(--s1); padding: 0 var(--s1); border-radius: var(--radius-badge); background: var(--surface); color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; pointer-events: none; }
  .cockpit-page .portfolio-chart__tick small { color: var(--text-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .cockpit-page .portfolio-chart__tick--max { top: 14.67%; transform: translateY(-120%); }
  .cockpit-page .portfolio-chart__tick--min { top: 85.33%; transform: translateY(20%); }
  .cockpit-page .portfolio-chart__axis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); margin-block-start: var(--s2); }
  .cockpit-page .portfolio-chart__label { display: grid; gap: 0; font-variant-numeric: tabular-nums; }
  .cockpit-page .portfolio-chart__label small { color: var(--text-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .cockpit-page .portfolio-chart__label strong { font-size: .8125rem; }
  .cockpit-page .portfolio-chart__axis .portfolio-chart__label:nth-child(2):not(:last-child) { justify-items: center; text-align: center; }
  .cockpit-page .portfolio-chart__axis .portfolio-chart__label:last-child { justify-items: end; text-align: end; }
  .cockpit-page .portfolio-chart__legend { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0 0; color: var(--text-muted); font-size: .75rem; }
  .cockpit-page .portfolio-chart__legend-line { width: 18px; border-block-start: 2px dashed var(--info); }
  .cockpit-page :is(.portfolio-chart__plot, .portfolio-locked__chart > svg) path { vector-effect: non-scaling-stroke; }
  .cockpit-page .portfolio-chart__grid { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 6; }
  .cockpit-page .portfolio-chart__fill { stop-color: var(--text-faint); stop-opacity: .16; }
  .cockpit-page .portfolio-chart__plot--success .portfolio-chart__fill { stop-color: var(--success); stop-opacity: .22; }
  .cockpit-page .portfolio-chart__plot--danger .portfolio-chart__fill { stop-color: var(--danger); stop-opacity: .2; }
  .cockpit-page .portfolio-chart__fill-end { stop-color: var(--surface); stop-opacity: 0; }
  .cockpit-page .portfolio-chart__step { fill: none; stroke-width: 3.5; stroke-linecap: round; }
  .cockpit-page .portfolio-chart__hairline { fill: none; stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0; }
  .cockpit-page .portfolio-chart__hairline.is-visible { opacity: 1; }
  .cockpit-page .portfolio-chart__reference { fill: none; stroke: var(--info); stroke-width: 2; stroke-dasharray: 6 7; }
  .cockpit-page .portfolio-chart__baseline { fill: none; stroke: var(--gold-border); stroke-width: 3; stroke-linecap: round; }
  .cockpit-page .portfolio-chart__point path { fill: none; stroke-linecap: round; }
  .cockpit-page .portfolio-chart__halo { stroke: var(--surface); stroke-width: 14; }
  .cockpit-page .portfolio-chart__dot { stroke-width: 8; }
  .cockpit-page .portfolio-chart__glow { stroke-width: 30; stroke-opacity: .2; }
  .cockpit-page :is(.portfolio-chart__point--last, .portfolio-chart__point--single, .portfolio-chart__point.is-active) .portfolio-chart__halo { stroke-width: 19; }
  .cockpit-page :is(.portfolio-chart__point--last, .portfolio-chart__point--single, .portfolio-chart__point.is-active) .portfolio-chart__dot { stroke-width: 12; }
  .cockpit-page :is(.portfolio-chart__step--up, .portfolio-chart__point--up .portfolio-chart__dot, .portfolio-chart__point--up .portfolio-chart__glow) { stroke: var(--success); }
  .cockpit-page :is(.portfolio-chart__step--down, .portfolio-chart__point--down .portfolio-chart__dot, .portfolio-chart__point--down .portfolio-chart__glow) { stroke: var(--danger); }
  .cockpit-page :is(.portfolio-chart__step--flat, .portfolio-chart__point--flat .portfolio-chart__dot, .portfolio-chart__point--flat .portfolio-chart__glow) { stroke: var(--text-faint); }
  .cockpit-page .portfolio-chart__point--reference .portfolio-chart__dot { stroke: var(--info); }
  .cockpit-page :is(.portfolio-chart__point--single, .portfolio-chart__point--gold) :is(.portfolio-chart__dot, .portfolio-chart__glow) { stroke: var(--gold); }
  /* The Plus part: the saved stands on their gold-veiled surface (count of the last stand and the reference in its row);
     Free gets the Plus offer instead of a save button. */
  .cockpit-page [data-portfolio-details] { border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: linear-gradient(180deg, var(--gold-soft), transparent 55%), var(--surface-muted); }
  .cockpit-page [data-portfolio-details] > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); }
  .cockpit-page [data-portfolio-details] > summary > .accordion-icon { margin-inline-start: auto; }
  .cockpit-page [data-portfolio-details] > .accordion-content { padding: 0 var(--s4) var(--s4); }
  .cockpit-page .portfolio-stands__title { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; }
  .cockpit-page .portfolio-stands__meta { color: var(--text-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
  .cockpit-page [data-portfolio-details][open] .portfolio-stands__meta { display: none; }
  .cockpit-page .portfolio-offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: linear-gradient(90deg, var(--gold-soft), transparent 70%), var(--surface); }
  .cockpit-page .portfolio-offer p { margin: 0; color: var(--text-muted); font-size: .875rem; }
  @media (max-width: 640px) {
    .cockpit-page .portfolio-offer { grid-template-columns: auto minmax(0, 1fr); }
    .cockpit-page .portfolio-offer > .btn { grid-column: 2; justify-self: start; }
    .cockpit-page .portfolio-dev__ranges { margin-inline-start: 0; }
    .cockpit-page .portfolio-chart__period { justify-items: start; text-align: start; }
  }
  .cockpit-page .portfolio-offer strong { color: var(--accent-text); }
  .cockpit-page .portfolio-offer__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); }
  /* r337 lockedPreview(true): the gold curve under its lock, the marks above, the three stand steps below. */
  .cockpit-page .portfolio-locked { display: grid; gap: var(--s3); margin: 0; }
  .cockpit-page .portfolio-locked__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
  .cockpit-page .portfolio-locked__lead { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; color: var(--accent-text); font-size: .8125rem; font-weight: 700; }
  .cockpit-page .portfolio-lock { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .portfolio-locked__chart { position: relative; padding: var(--s3); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .cockpit-page .portfolio-locked__chart > svg { display: block; width: 100%; height: clamp(6rem, 18vw, 8rem); }
  .cockpit-page .portfolio-locked__chart .portfolio-chart__halo { stroke: var(--surface-muted); }
  .cockpit-page .portfolio-locked__line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .cockpit-page .portfolio-locked__stop { stop-color: var(--gold); stop-opacity: .26; }
  .cockpit-page .portfolio-locked__overlay { position: absolute; inset: auto var(--s3) var(--s3); display: grid; justify-items: start; gap: 2px; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface) 90%, transparent); }
  .cockpit-page .portfolio-locked__overlay .portfolio-lock { color: var(--accent-text); }
  .cockpit-page .portfolio-locked__overlay small { color: var(--text-muted); font-size: .8125rem; }
  .cockpit-page .portfolio-locked__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); gap: var(--s2); }
  .cockpit-page .portfolio-locked__steps > span { display: grid; gap: 2px; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
  .cockpit-page .portfolio-locked__steps small { color: var(--text-muted); font-size: .75rem; }
  /* On phones the third step or example stand takes the full row below the two others, as the saved stands do. */
  @media (max-width: 640px) { .cockpit-page :is(.portfolio-locked__steps, .portfolio-example__stands) > :last-child:nth-child(3) { grid-column: 1 / -1; } }

  /* r36 (r35 A05): r337 data backup card staging (r4x-data-backup.v2882.css): the hero picture behind a veil (right on
     desktop, above the text on mobile), shield before the label. Paket V (Daniel 15.10.2026, Daten B): on the stage, the
     picture as its --stage-picture; "Meine Daten" as eyebrow, the title in the display serif, descriptions in an "i". */
  .cockpit-page #meine-daten > .eyebrow { margin: 0 0 var(--s3); }
  .cockpit-page .data-backup > .card {
    --stage-picture: linear-gradient(90deg, var(--stage-a) 56%, color-mix(in srgb, var(--stage-a) 78%, transparent) 68%, transparent 92%), url('/assets/r4x-data-backup-hero.v1124.webp') 66% center / cover no-repeat;
  }
  /* From 768 px the text stays on the solid part of the veil; on phones the picture stands above it. */
  @media (min-width: 768px) { .cockpit-page .data-backup__content > * { max-width: min(40rem, 55%); } }
  .cockpit-page .data-backup__content h3 { margin: 0; font-family: var(--font-beginner); font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); font-weight: 600; line-height: 1.1; }
  .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); }
  .cockpit-page .data-backup__account { display: grid; justify-items: start; gap: var(--s2); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface) 70%, transparent); }
  .cockpit-page .data-backup__account h4 { margin: 0; }
  /* UI-008: backup scope at a glance: in the backup file (gold, Paket V) and kept in the account (info). */
  .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(--gold-soft); --scope-border: var(--gold-border); padding: var(--s3); border: 1px solid var(--scope-border); border-radius: var(--radius-control); background: linear-gradient(160deg, var(--scope-soft), transparent); }
  .cockpit-page .data-scope--account { --scope-color: var(--info); --scope-soft: var(--info-soft); --scope-border: var(--info-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: .8125rem; line-height: 1.5; }
  @media (max-width: 767px) {
    .cockpit-page .data-backup > .card { --stage-picture: linear-gradient(180deg, transparent 22vw, var(--stage-a) 52vw), url('/assets/r4x-data-backup-hero-mobile.v1129.webp') center top / 100% auto no-repeat; }
    .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 button of the line (sign-in for guests; Paket AJ _v2: Mein Krypto Status with an account) gets its own
       full-width row, so the line is not one tap area. */
    .cockpit-page .memory-bar { grid-template-areas: 'mark head toggle' 'cta cta cta'; }
    .cockpit-page .memory-bar > .memory-bar__mark { grid-area: mark; }
    .cockpit-page .memory-bar > .memory-bar__head { grid-area: head; }
    .cockpit-page .memory-bar > .memory-toggle { grid-area: toggle; }
    .cockpit-page .memory-bar > .btn { grid-area: cta; width: 100%; }
    .cockpit-page .memory-panel__inner { padding: var(--s3); }
    .cockpit-page .memory-guest-link { padding: 0 var(--s3) var(--s2); }
    .cockpit-page :is(.memory-areas, .memory-links, .memory-benefits) { grid-template-columns: minmax(0, 1fr); }
    .cockpit-page .memory-areas > .memory-then-now { grid-row: auto; }
    .cockpit-page :is(.memory-intro, .memory-tile) { padding: var(--s4); }
    .cockpit-page .memory-tile__title { font-size: 1.5rem; }
    .cockpit-page .memory-then-now__subject { font-size: 1.25rem; }
    .cockpit-page .memory-then-now .btn { width: 100%; }
    .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(--s4); right: calc(var(--s5) * -1); bottom: auto; width: 150px; height: 150px; opacity: .5; }
    .cockpit-page .cockpit-pruefen__heading { top: var(--s5); left: var(--s5); right: 38%; }
    .cockpit-page .cockpit-pruefen__content { padding: var(--s4) var(--s5) var(--s5); }
    .cockpit-page [data-compass] > .card { min-height: 0; }
    .cockpit-page [data-compass] .cockpit-learning-summary { max-width: none; }
    .cockpit-page .cockpit-compass-media { margin: 1px 1px 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
    .cockpit-page .cockpit-compass-media img { mask-image: linear-gradient(180deg, var(--brand-page) 55%, transparent); }
    .cockpit-page .cockpit-area-media--learning { align-self: start; justify-self: stretch; width: auto; height: calc(var(--s8) * 1.5); margin: 1px 1px 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
    .cockpit-page .cockpit-area-media--learning img { mask-image: linear-gradient(180deg, var(--brand-page) 40%, transparent); }

  }
}

@layer layout {
  /* Paket V: the paddings of the stage cards of Mein Bereich (this layer holds the central mobile card padding). */
  .cockpit-page :is(.cockpit-next, [data-compass], [data-portfolio], .data-backup) > .card, .cockpit-page .cockpit-market .market-story--lead { padding: var(--s7); }
  /* Paket W: the Prüfen card has no padding of its own at any width; its picture runs to the edges, its content carries
     the padding. */
  .cockpit-page .cockpit-pruefen { padding: 0; }
  /* The actions of the next step sit at the foot of the card (the central r4x-actions margin lives in this layer). */
  .cockpit-page .cockpit-next > .card > .r4x-actions { margin-block: auto 0; }
  /* Paket AG (UI-085): the text of the Wissensgedächtnis card starts beside its picture (on phones below the band). */
  .cockpit-page [data-learning-memory] .card { padding-inline-start: calc(32% + var(--s6)); }
  /* Paket AT: the three saved stands in the Plus disclosure (central grid of this layer) wrap on narrow surfaces instead of
     breaking "Letzter gespeicherter Stand" inside its words. */
  .cockpit-page [data-portfolio-details] .cockpit-snapshot-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
  .cockpit-page [data-portfolio-details] .cockpit-snapshot-stats .metric { overflow-wrap: normal; }
  /* AT _v2: on phones the last saved stand takes the full row below the two others (r337 order, no empty cell). */
  @media (max-width: 640px) { .cockpit-page [data-portfolio-details] .cockpit-snapshot-stats > :last-child:nth-child(3) { grid-column: 1 / -1; } }
  /* Paket AU: the range choice in the head of the development follows the gap of its row (the central actions margin lives
     in this layer). */
  .cockpit-page .portfolio-dev__ranges { margin-block: 0; }
  @media (max-width: 767px) {
    .cockpit-page :is(.cockpit-next, [data-portfolio]) > .card, .cockpit-page .cockpit-market .market-story--lead { padding: var(--s5); }
    .cockpit-page [data-compass] > .card { padding: calc(var(--s8) * 3 + var(--s2)) var(--s5) var(--s5); }
    .cockpit-page [data-learning-memory] .card { padding: calc(var(--s8) * 1.5 + var(--s2)) var(--s4) var(--s4); }
    .cockpit-page .data-backup > .card { padding: 46vw var(--s5) var(--s5); }
  }
  /* Paket V (Daniel 15.10.2026, Marktimpuls C): in Mein Bereich the impulse of the day reads like a newspaper: the lead
     on the stage, large and on the left from 1024 px, the two further impulses beside it; titles without underline.
     The News page keeps its own composition. On phones the head of the disclosure takes two lines. In this layer, beside the
     market story base rules of components.css. */
  .cockpit-page .cockpit-market .market-story__title a { text-decoration-line: none; }
  .cockpit-page .cockpit-market .market-story__title a:is(:hover, :focus-visible) { text-decoration-line: underline; }
  .cockpit-page .cockpit-market .market-story--lead { align-content: end; min-height: 340px; }
  .cockpit-page .cockpit-market .market-story--lead > .market-story__title { font-family: var(--font-beginner); font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.625rem); font-weight: 600; line-height: 1.15; }
  .cockpit-page .cockpit-market .market-story--lead .market-story__body { max-width: 56ch; padding-inline-start: var(--s4); border-inline-start: 2px solid var(--gold); color: var(--text); font-size: 1.0625rem; line-height: 1.6; }
  @media (min-width: 1024px) {
    .cockpit-page .cockpit-market .market-disclosure > .accordion-content { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
    .cockpit-page .cockpit-market .market-story-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
    .cockpit-page .cockpit-market :is(.market-story--crypto, .market-story--market) { align-content: center; }
  }
  @media (max-width: 767px) {
    .cockpit-page .cockpit-market .market-disclosure > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); }
    .cockpit-page .cockpit-market .market-disclosure__copy { grid-column: 1; grid-row: 1; }
    .cockpit-page .cockpit-market .market-disclosure__count { grid-column: 1; grid-row: 2; margin-inline-start: 0; }
    .cockpit-page .cockpit-market .market-disclosure > summary > .accordion-icon { grid-column: 2; grid-row: 1 / span 2; }
    .cockpit-page .cockpit-market .market-story--lead { min-height: 0; }
    .cockpit-page .cockpit-market .market-story--lead > .market-story__title { font-size: 1.5rem; }
  }

  /* Paket V: the next step and Prüfen side by side from 1024 px while a recommendation is shown; one column before.
     Paket W: the grid lives on the inner wrapper; the area itself is switched with hidden and never gets a display.
     Paket X (BUG-051): this area has no visible heading, so its cards keep the distance of the area headings
     (.cockpit-section-heading) from the tabs and the phone choice. */
  .cockpit-page .cockpit-next-step { display: grid; gap: var(--section-gap) var(--s5); margin-block-start: var(--s6); }
  @media (min-width: 1024px) {
    .cockpit-page .cockpit-next-step:has(.cockpit-next) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
  }
  /* Tablet: the figures move to a second line of the memory status line (mockup v2). */
  @media (min-width: 768px) and (max-width: 1279px) {
    .cockpit-page .memory-bar:not(.memory-bar--guest) { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'mark head status toggle' 'stats 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) > .btn { grid-area: status; }
    .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; }
  }
  @media (min-width: 768px) and (max-width: 1140px) {
    .cockpit-page .section-tabs [role='tab'] { padding-inline: var(--s3); font-size: .875rem; }
  }
}