@layer tokens, base, components, layout;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scrollbar-gutter: stable; }
  html.layer-open { overflow: hidden; }
  body { margin: 0; background: var(--page); color: var(--text); font: 400 1rem/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
  a { color: inherit; text-underline-offset: .2em; }
  a:hover { color: var(--accent-text); }
  button, input, select, textarea { font: inherit; }
  button, summary { cursor: pointer; }
  button { color: inherit; }
  input, select, textarea { min-width: 0; max-width: 100%; }
  img, video, svg { max-width: 100%; }
  img, video { display: block; height: auto; }
  h1, h2, h3, h4, p, figure { margin: 0 0 var(--s4); }
  h1, h2, h3, h4, strong { font-weight: 600; }
  h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.04em; }
  h2 { font-size: var(--type-section); line-height: 1.2; letter-spacing: -.03em; }
  h3 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.02em; }
  :focus-visible { outline: 2px solid var(--accent-text); outline-offset: var(--s1); }
  :disabled, [aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
  hr { border: 0; border-top: 1px solid var(--border); margin: var(--s4) 0; }
  [hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

@layer components {
  .learning-section { --learning-ink:var(--text-muted); --learning-line:var(--border); --learning-fill:var(--surface-muted); padding:var(--s4);border-inline-start:var(--s1) solid var(--learning-line);border-radius:var(--radius-control);background:var(--learning-fill); }
  .learning-section-info { --learning-ink:var(--info);--learning-line:var(--info);--learning-fill:var(--info-soft); }
  .learning-section-accent { --learning-ink:var(--accent-text);--learning-line:var(--gold);--learning-fill:var(--gold-soft); }
  .learning-section-danger { --learning-ink:var(--danger);--learning-line:var(--danger);--learning-fill:var(--danger-soft); }
  .learning-section-warning { --learning-ink:var(--warning);--learning-line:var(--warning);--learning-fill:color-mix(in srgb,var(--warning) 8%,var(--surface)); }
  .learning-section-context { --learning-ink:var(--learning-context);--learning-line:var(--learning-context);--learning-fill:color-mix(in srgb,var(--learning-context) 8%,var(--surface)); }
  .learning-section-relevance { --learning-ink:var(--learning-relevance);--learning-line:var(--learning-relevance);--learning-fill:color-mix(in srgb,var(--learning-relevance) 8%,var(--surface)); }
  .learning-section-watch { --learning-ink:var(--learning-watch);--learning-line:var(--learning-watch);--learning-fill:color-mix(in srgb,var(--learning-watch) 8%,var(--surface)); }
  .learning-section > :is(h3,h4) { margin:0 0 var(--s2);font-size:.875rem;line-height:1.4;color:var(--learning-ink); }
  .learning-section > p { margin:0;overflow-wrap:anywhere; }
  .beginner-return { --beginner-return-clearance:var(--s4); position:fixed; inset-inline-start:0; bottom:calc(var(--bottom-nav-space, env(safe-area-inset-bottom, 0px)) + var(--beginner-return-clearance)); z-index:var(--z-sticky); max-width:100%; color:var(--text); font-family:var(--font-body); }
  .beginner-return[data-side='right'] { --beginner-return-clearance:calc(var(--touch-target) + var(--s5)); inset-inline-start:auto; inset-inline-end:0; }
  @media (max-width:26rem) { .beginner-return { --beginner-return-clearance:calc(var(--touch-target) + var(--s5)); } }
  /* Paket R (V8): compact r337 dock (v1182): one header line, dark brand surface in both themes like the other bars
     (data-theme-scope="dark" from beginner-return.mjs), 44 px controls kept. */
  .beginner-return__panel { width:min(22rem, calc(100vw - var(--s4) * 2)); margin-inline:var(--s2); padding:var(--s2) var(--s3) var(--s3); border:1px solid var(--gold-border); border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow-elevated); max-height:calc(100dvh - var(--shell-sticky-height) - var(--bottom-nav-space, 0px) - var(--touch-target) - var(--s7)); overflow:auto; }
  .beginner-return__head { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2); }
  .beginner-return__label { display:flex; align-items:center; gap:var(--s2); min-width:0; font-size:.8125rem; font-weight:700; line-height:1.3; }
  .beginner-return__controls { display:flex; gap:var(--s1); margin-inline-start:auto; flex:none; }
  .beginner-return__panel > .btn { display:flex; width:100%; }
  .beginner-return .beginner-return__tab { display:flex; align-items:center; width:auto; gap:var(--s1); padding-inline:var(--s2); border-color:var(--gold-border); border-inline-start:0; border-radius:0 var(--radius-control) var(--radius-control) 0; background:var(--surface); box-shadow:var(--shadow-elevated); }
  .beginner-return[data-side='right'] .beginner-return__tab { border-inline-start:1px solid var(--gold-border); border-inline-end:0; border-radius:var(--radius-control) 0 0 var(--radius-control); }
 /* The shared return pill has one CSS owner; its timing and lifecycle stay in resume.mjs. */
 .r4x-landing-feedback-pill { position:fixed; left:50%; top:calc(var(--shell-sticky-height) + var(--s3)); transform:translate(-50%,-6px); z-index:var(--z-toast); pointer-events:none; opacity:0; padding:var(--s2) var(--s3); border-radius:var(--radius-pill); border:1px solid var(--gold-border); background:var(--surface); color:var(--accent-text); font-size:.8125rem; font-weight:700; line-height:1.3; box-shadow:var(--shadow-card); transition:opacity .18s ease,transform .18s ease; max-width:calc(100vw - var(--s5) * 2); }
 .r4x-landing-feedback-pill.is-visible { opacity:1; transform:translate(-50%,0); }

  /* FINAL v18 eyebrow: short rule before the label (components layer so route rules can still hide or align it). */
  .eyebrow { display: flex; align-items: center; gap: 9px; }
  .eyebrow::before { content: ''; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--eyebrow-rule); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .back-top { position: fixed; right: max(var(--s4), env(safe-area-inset-right)); bottom: max(var(--s4), env(safe-area-inset-bottom)); z-index: var(--z-sticky); box-shadow: var(--shadow-elevated); }
  /* BUG-047: the floating control of every page is never printed. */
  @media print { .back-top { display: none; } }
  .skip-link { position: fixed; top: var(--s4); left: var(--s4); transform: translateY(-200%); z-index: var(--z-toast); background: var(--surface); color: var(--text); padding: var(--s3) var(--s4); }
  .skip-link:focus { transform: none; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 46px; min-width: var(--touch-target); max-width: 100%; padding: var(--s2) var(--s4); border: 1px solid transparent; border-radius: var(--radius-button); font-size: .92rem; font-weight: 500; line-height: 1.3; text-decoration: none; text-align: center; transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
  .btn-plus-primary { background: var(--gold); border-color: var(--gold); color: var(--button-text); }
  .btn-plus-primary:hover:enabled, a.btn-plus-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--button-text); transform: translateY(-1px); }
  .btn-free-primary { background: var(--action-free); border-color: var(--action-free); color: var(--button-text); }
  .btn-free-primary:hover:enabled, a.btn-free-primary:hover { background: var(--action-free-hover); border-color: var(--action-free-hover); color: var(--button-text); transform: translateY(-1px); }
  .btn-free-secondary { background: var(--surface); border-color: var(--input-border); color: var(--text); }
  .btn-free-secondary:hover:enabled, a.btn-free-secondary:hover { background: var(--surface-strong); border-color: var(--text-muted); color: var(--text); }
  .btn-plus-secondary { background: var(--gold-soft); border-color: var(--gold-border); color: var(--accent-text); }
.btn-plus-secondary:hover:enabled, a.btn-plus-secondary:hover { border-color: var(--gold); color: var(--accent-text); }
.btn-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover:enabled, a.btn-danger:hover { background: var(--surface); border-color: var(--danger); color: var(--danger); }
  .btn-text, .text-action { background: transparent; border-color: transparent; color: var(--text); }
  .btn-text:hover:enabled, a.btn-text:hover, .text-action:hover { color: var(--accent-text); }
  .btn:active:enabled, a.btn:active { transform: translateY(1px); }
  .text-action { min-height: var(--touch-target); min-width: var(--touch-target); padding: 0; border: 0; text-align: left; text-decoration: underline; text-underline-offset: .2em; }
  .badge { display: inline-flex; align-items: center; min-height: 28px; padding: var(--s1) 10px; border: 1px solid var(--border); border-radius: var(--radius-badge); background: var(--surface-muted); color: var(--text-muted); font-size: .72rem; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .badge-plus { background: var(--gold-soft); border-color: var(--gold-border); color: var(--accent-text); }
  .badge-free { background: color-mix(in srgb, var(--text) 5%, transparent); }
  .badge-on-media { background: var(--brand-page); border-color: var(--brand-border); color: var(--brand-text); }
  .badge-plus.badge-on-media { border-color: var(--gold-border); color: var(--gold-hover); }
  .badge-success { color: var(--success); }
  .badge-warning { color: var(--warning); }
  .badge-danger { color: var(--danger); }
  .badge-info { color: var(--info); }
  .chip { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); min-width: var(--touch-target); padding: var(--s2) var(--s3); border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-muted); font-size: .8125rem; }
  .chip[aria-pressed='true'] { background: var(--gold-soft); color: var(--accent-text); border-color: var(--gold-border); }
  .chip:hover { border-color: var(--gold-border); }
  .segmented-control { display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:100%;min-width:0;border:1px solid var(--input-border);border-radius:var(--radius-control);background:var(--surface); }
  .segmented-control > .btn { min-width:0;border:0;border-radius:0;white-space:normal;overflow-wrap:anywhere; }
  .segmented-control > .btn:first-child { border-start-start-radius:var(--radius-control);border-end-start-radius:var(--radius-control); }
  .segmented-control > .btn:last-child { border-start-end-radius:var(--radius-control);border-end-end-radius:var(--radius-control); }
  .segmented-control > .btn + .btn { border-inline-start:1px solid var(--input-border); }
  .segmented-control > .btn-free-secondary[aria-pressed='true'] { background:var(--action-free);color:var(--button-text); }
  .segmented-control > .btn-plus-secondary[aria-pressed='true'] { background:var(--gold);color:var(--button-text); }
  .segmented-control > .btn:focus-visible { position:relative;z-index:1; }
  /* UI-041: one display-currency switch (EUR | USD | CHF) for every route; square v18 options, state from aria-pressed. */
  .currency-field { display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);min-width:0;max-width:100%; }
  .currency-field__label { color:var(--text-muted);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
  .currency-switch { display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(3.5rem,1fr);gap:var(--s1);max-width:100%;padding:var(--s1);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface-muted); }
  .currency-switch__option { display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target);min-width:var(--touch-target);padding:0 var(--s3);border:1px solid transparent;border-radius:var(--radius-button);background:transparent;color:var(--text-muted);font-size:.8125rem;font-weight:700;letter-spacing:.06em;line-height:1;font-variant-numeric:tabular-nums;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard); }
  .currency-switch__option:hover:enabled { background:var(--surface);color:var(--text); }
  .currency-switch__option[aria-pressed='true'] { background:var(--surface);border-color:var(--gold-border);color:var(--text);box-shadow:var(--shadow-card); }
  .currency-switch__option:focus-visible { position:relative;z-index:1;outline-offset:1px; }
  .currency-switch__option:disabled { cursor:progress; }
  @media (prefers-reduced-motion: reduce) { .currency-switch__option { transition:none; } }
  .card { min-width: 0; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
  .card > :last-child { margin-bottom: 0; }
  .card-accent { border-color: var(--gold-border); position: relative; }
  .card-accent::before { content: ''; position: absolute; top: var(--s4); bottom: var(--s4); left: 0; width: 2px; background: var(--gold); }
  .card-muted { background: var(--surface-muted); box-shadow: none; }
  .tool-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 6px; border: 1px solid var(--tool-border); border-radius: var(--radius-control); background: var(--tool-surface); color: var(--tool-text); box-shadow: var(--tool-shadow); }
  .tool-icon--situation { background: var(--brand-page); border-color: var(--brand-border); color: var(--brand-text); }
  .plain-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .tool-icon img, .plain-icon img, img[data-image-role='icon'] { width: 30px; height: 30px; object-fit: contain; flex: none; }
  /* Image roles survive extraction; intrinsic source attributes stay intact. */
  img[data-image-role='flag'] { width: 30px; height: auto; object-fit: contain; flex: none; }
  img[data-image-role='flag'][data-image-shape='square'] { width: 22px; }
  img[data-image-role='flag'][data-image-size='heading'] { width: 32px; }
  img[data-image-role='flag'][data-image-size='heading'][data-image-shape='square'] { width: 25px; }
  img[data-image-role='flag'][data-image-size='inline'] { width: 24px; }
  img[data-image-role='flag'][data-image-size='inline'][data-image-shape='square'] { width: 17px; }
  img[data-image-role='content'] { height: auto; object-fit: contain; }
  img[data-image-role='scene'] { width: 100%; height: auto; object-fit: contain; }
  img[data-image-role='cover'] { width: 94px; height: auto; object-fit: contain; flex: none; }
  [data-image-slot='cover'] { flex: none; }
  img[data-image-role='illustration'], img[data-image-role='logo'] { height: auto; object-fit: contain; }
  img[data-image-size='badge'] { width: 170px; }
  img[data-image-size='newsletter'] { width: min(220px, 58vw); }
  img[data-image-size='completion'] { width: 170px; }
  @media (max-width: 700px) {
    img[data-image-role='cover'] { width: 80px; }
    img[data-image-size='badge'] { width: 125px; }
    img[data-image-size='newsletter'] { width: min(168px, 52vw); }
    img[data-image-size='completion'] { width: 190px; }
  }
  /* r337 section titles with an illustration in front (news icon, .r4x-news-title-with-icon, 24-26 px). */
  .heading-with-icon { display: inline-flex; align-items: center; gap: var(--s3); }
  /* r69 section head: heading, intro, count pill and text action in one aligned row with a quiet rule below. */
  .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--border-soft); }
  .section-head__copy { flex: 1 1 32ch; min-width: 0; max-width: var(--reading-max); }
  .section-head__title { margin: 0; }
  .section-head__intro { margin: var(--s2) 0 0; color: var(--text-muted); }
  .section-head__aside { display: flex; flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%; align-items: center; gap: var(--s2) var(--s4); }
  .section-head__meta { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
  .section-head__aside .btn-text { min-height: var(--touch-target); }
  .section-head--sub { padding-bottom: 0; border-bottom: 0; }
  .section-head--sub .section-head__title { font-size: 1.125rem; }
  /* UI-053 numbered variant: step mark and eyebrow lead the title; --section-head-accent tints both (default info). */
  .section-head--step { justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: var(--s4); border-bottom-color: var(--border); }
  .section-head__step { display: grid; place-items: center; width: var(--s8); height: var(--s8); flex: none; border: 1px solid color-mix(in srgb, var(--section-head-accent, var(--info)) 45%, var(--border)); border-radius: var(--radius-card); background: linear-gradient(135deg, color-mix(in srgb, var(--section-head-accent, var(--info)) 20%, var(--surface)), var(--surface)); color: color-mix(in srgb, var(--section-head-accent, var(--info)) 75%, var(--text)); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .section-head__eyebrow { margin: 0 0 var(--s1); color: color-mix(in srgb, var(--section-head-accent, var(--info)) 70%, var(--text)); font-size: .75rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
  .section-head--step .section-head__title { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem); line-height: 1.2; }
  .section-head__title:focus-visible { outline: 2px solid var(--info); outline-offset: var(--s1); }
  @media (max-width: 600px) { .section-head__step { width: var(--s7); height: var(--s7); font-size: 1.125rem; } }
  /* Paket U: the info symbol beside a section title keeps the 10 px distance of every info symbol (Paket S). */
  .section-head__title-row { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
  .section-head__title-row > .section-head__title { min-width: 0; }
  /* Paket U (Daniel 15.10.2026, "ein roter Faden"): the seven area pages (Prüfen, Investment, Wissen, Web3, Sicherheit,
     Training, News) share one rhythm: the same distance between sections and the same short gold line above every
     section title; sub heads inside a section keep their quieter style. A section head of its own make (the r337 news
     header, since Paket V also the section titles of Mein Bereich) takes the line with `section-rule`. */
  .area-flow { display: grid; gap: var(--s7); align-content: start; }
  :is(.area-flow .section-head:not(.section-head--sub, .section-head--step), .section-rule) { position: relative; padding-top: var(--s4); }
  :is(.area-flow .section-head:not(.section-head--sub, .section-head--step), .section-rule)::before { content: ''; position: absolute; top: 0; left: 0; width: var(--s7); height: 2px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--gold), transparent); }
  @media (max-width: 767px) { .area-flow { gap: var(--s6); } }
  /* Paket U (Daniel 15.10.2026): the one guide card of the area pages and the Wissen entries, r337 .r4x-context-guide:
     topic symbol in a gold frame, eyebrow, title, text, source line and arrow; the whole card is the link. Three cards
     stand in three columns; otherwise two, an odd last card spans the row (r337 .r4x-context-guide--wide). */
  .context-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .context-guides--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .context-guides:not(.context-guides--three) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .context-guide { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s4); min-width: 0; padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(90deg, var(--gold), transparent) left top / var(--s8) 2px no-repeat, linear-gradient(160deg, var(--surface), var(--surface-muted)); color: var(--text); text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
  .context-guide:is(:hover, :focus-visible) { border-color: var(--gold-border); color: var(--text); box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
  .context-guide:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .context-guide__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: radial-gradient(circle at 30% 25%, var(--surface), var(--gold-soft)); font-size: 1.5rem; line-height: 1; }
  .context-guide--tool .context-guide__icon { background: var(--tool-surface); }
  .context-guide--tool .context-guide__icon img { width: 36px; height: 36px; object-fit: contain; }
  .context-guide__copy { display: grid; gap: var(--s1); min-width: 0; }
  .context-guide__copy .eyebrow { margin: 0 0 var(--s1); }
  .context-guide__title { font-size: 1.0625rem; line-height: 1.35; }
  .context-guide__text { color: var(--text-muted); font-size: .9375rem; line-height: 1.55; }
  .context-guide__meta { margin-top: var(--s2); color: var(--text-faint); font-size: .8125rem; }
  .context-guide__arrow { align-self: center; color: var(--accent-text); font-size: 1.25rem; transition: transform var(--motion-base) var(--ease-standard); }
  .context-guide:is(:hover, :focus-visible) .context-guide__arrow { transform: translateX(3px); }
  @media (max-width: 1023px) { .context-guides--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .context-guides--three > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
  @media (max-width: 767px) {
    .context-guides, .context-guides--three { grid-template-columns: minmax(0, 1fr); }
    .context-guide { gap: var(--s3); padding: var(--s4); }
    .context-guide__icon { width: var(--touch-target); height: var(--touch-target); font-size: 1.375rem; }
  }
  .heading-icon { flex: none; width: 26px; height: 26px; object-fit: contain; }
  .breadcrumbs { color: var(--text-muted); font-size: .8125rem; margin-bottom: var(--s5); }
  /* Paket U (Daniel 15.10.2026): "← Zurück" at the top left above the page title of every tool and Wissen page, a v18 text
     button with a full touch target; on Wissen pages it shares the row with the breadcrumbs. */
  .page-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); margin-bottom: var(--s4); }
  .page-top .breadcrumbs { margin-bottom: 0; }
  .area-return { display: flex; min-width: 0; }
  .area-return[hidden] { display: none; }
  .area-return__link { min-height: var(--touch-target); margin-inline-start: calc(var(--s2) * -1); padding-inline: var(--s2); font-weight: 600; }
  .area-return__arrow { font-size: 1.125rem; line-height: 1; transition: transform var(--motion-base) var(--ease-standard); }
  .area-return__link:is(:hover, :focus-visible) .area-return__arrow { transform: translateX(-3px); }
  .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
  .breadcrumbs li { min-width: 0; display: inline-flex; gap: var(--s2); align-items: center; }
  .breadcrumbs a { text-decoration: none; }
  .field { display: grid; gap: var(--s2); }
  .field label { font-size: .8125rem; font-weight: 600; }
  .input { width: 100%; min-height: 48px; padding: var(--s3); border: 1px solid var(--input-border); border-radius: var(--radius-control); background: var(--input); color: var(--text); transition: border-color var(--motion-fast) var(--ease-standard); }
  .input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
  .input::placeholder { color: var(--text-muted); }
  textarea.input { min-height: 128px; resize: vertical; }
  .field-hint { color: var(--text-muted); font-size: .8125rem; }
  .field-check { grid-template-columns: auto 1fr; align-items: center; min-height: var(--touch-target); }
  .field-check label { grid-column: 2; grid-row: 1; padding-block: var(--s3); }
  .field-check input { grid-column: 1; grid-row: 1; width: 20px; height: 20px; accent-color: var(--gold); }
  .field-check .field-hint { grid-column: 2; }
  .accordion { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s4); min-height: var(--touch-target); font-weight: 600; list-style: none; }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--gold-border); border-radius: var(--radius-control); color: var(--accent-text); background: var(--gold-soft); transition: transform var(--motion-fast) var(--ease-standard); }
  /* Only the own summary turns; nested closed accordions inside an open one keep their "+" (UI-026 Beginner FAQ). */
  .accordion[open] > summary .accordion-icon { transform: rotate(45deg); }
  .accordion-content { padding: 0 var(--s4) var(--s4); color: var(--text-muted); }
  .metric { display: grid; gap: var(--s1); min-width: 0; }
  .metric:where(:not(.metric-flat)) { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .metric-label, .metric-detail { color: var(--text-muted); font-size: .8125rem; }
  .metric-value { font-size: 1.75rem; line-height: 1.2; }
  .metric-detail-success { color: var(--success); }
  .metric-detail-danger { color: var(--danger); }
  .progress { display: grid; gap: var(--s2); font-size: .8125rem; }
  progress { width: 100%; height: var(--s2); appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--surface-strong); accent-color: var(--gold); overflow: hidden; }
  progress::-webkit-progress-bar { background: var(--surface-strong); }
  progress::-webkit-progress-value { background: var(--gold); border-radius: var(--radius-pill); }
  progress::-moz-progress-bar { background: var(--gold); border-radius: var(--radius-pill); }
  /* Full-width descriptive scale (r337 Fear-and-Greed track): token gradient, value shown as a marker line. */
  .meter-scale { display: block; width: 100%; height: var(--s3); margin-block: var(--s4) var(--s2); appearance: none; border: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--danger), var(--warning) 50%, var(--success)); }
  .meter-scale::-webkit-meter-bar { height: var(--s3); border: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--danger), var(--warning) 50%, var(--success)); }
  .meter-scale::-webkit-meter-optimum-value, .meter-scale::-webkit-meter-suboptimum-value, .meter-scale::-webkit-meter-even-less-good-value { background: transparent; box-shadow: inset -4px 0 0 var(--text), inset -6px 0 0 var(--surface); }
  .meter-scale::-moz-meter-bar { background: transparent; box-shadow: inset -4px 0 0 var(--text), inset -6px 0 0 var(--surface); }
  .meter-scale-labels { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); margin: 0 0 var(--s4); font-size: .8125rem; }
  .meter-scale-labels > :nth-child(2) { text-align: center; }
  .meter-scale-labels > :last-child { text-align: end; }
  /* UI-028/UI-030/UI-042: Free/Plus area switch. Two linked halves; Free silver, Plus gold.
     Paket U (Daniel 15.10.2026, "Plus … deutlich schöner inszeniert"): the Plus half carries gold light and the R4X star
     on every state, so its added value reads before the click; the current half is marked by a bar, a check and its
     filled surface, never by colour alone. */
  .tier-switch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s1); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
  .tier-switch__item { --tier-color: var(--text); --tier-soft: var(--action-free); --tier-border: var(--border); position: relative; display: grid; gap: var(--s1); min-width: 0; padding: var(--s3) var(--s4); border: 1px solid transparent; border-radius: var(--radius-control); color: var(--text); text-decoration: none; transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); }
  .tier-switch__item--plus { --tier-color: var(--accent-text); --tier-soft: var(--gold-soft); --tier-border: var(--gold-border); border-color: var(--gold-border); background: radial-gradient(120% 140% at 100% 0%, var(--gold-soft), transparent 60%), var(--surface); }
  .tier-switch__item:hover { border-color: var(--tier-border); background-color: var(--surface); }
  .tier-switch__item--plus:hover { box-shadow: 0 0 0 3px var(--gold-soft), 0 0 24px var(--gold-glow); }
  .tier-switch__item[aria-current='page'] { border-color: var(--tier-border); background-color: var(--surface); box-shadow: inset 0 -3px 0 var(--tier-color), var(--shadow-card); }
  .tier-switch__item--plus[aria-current='page'] { border-color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold), 0 0 0 3px var(--gold-soft), var(--shadow-elevated); }
  .tier-switch__head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
  .tier-switch__head strong { font-size: 1rem; }
  .tier-switch__mark { color: var(--gold); font-size: 1rem; line-height: 1; }
  .tier-switch__item[aria-current='page'] .tier-switch__head strong { color: var(--tier-color); }
  .tier-switch__item[aria-current='page'] .tier-switch__head::after { content: '✓' / ''; margin-inline-start: auto; color: var(--tier-color); font-weight: 700; }
  .tier-switch__text { color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
  @media (max-width: 520px) { .tier-switch:has(> :nth-child(3)) { grid-auto-flow: row; } .tier-switch__item { padding: var(--s2) var(--s3); } .tier-switch__text { font-size: .75rem; } }
  /* Paket U (Daniel 15.10.2026: "Die Plus-Vorschau des Tages muss wirklich ein eigenes, perfekt inszeniertes Design
     bekommen … das Gefühl von Plus"): one stage for the Plus moments of the knowledge tools (Plus-Vorschau des Tages,
     Insight des Tages, the locked Plus depth) with the R4X star behind the copy. Paket W (Daniel 15.10.2026, "Hell bleibt
     hell"): the skin is the theme-following stage (.r4x-stage: gold frame, line and light, light in light, dark in dark). */
  .plus-stage { padding: clamp(var(--s5), 3vw, var(--s7)); }
  /* The Plus badge lies in the gold light of the stage; on the stage surface its gold text keeps 4.5:1 in light too. */
  .plus-stage .badge-plus { background: var(--stage-a); }
  .plus-stage::after { content: '✦' / ''; position: absolute; right: var(--s5); bottom: calc(var(--s5) * -1); z-index: -1; color: var(--gold); font-size: calc(var(--s8) * 2); line-height: 1; opacity: .12; pointer-events: none; }
  .plus-stage__eyebrow { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
  .plus-stage__eyebrow::before { content: '✦' / ''; color: var(--gold); letter-spacing: 0; }
  .plus-stage__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
  .plus-stage__chips li { padding: var(--s1) var(--s3); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--text); font-size: .8125rem; }
  @media (max-width: 767px) { .plus-stage { padding: var(--s5) var(--s4); } }
  /* UI-008/UI-013: Fear-and-Greed card. The value carries its state colour; the explanation sits in the info popover. */
  .mood-card { --mood-color: var(--text); display: grid; gap: var(--s1); }
  .mood-card[data-mood-tone='extreme-fear'] { --mood-color: var(--danger); }
  .mood-card[data-mood-tone='fear'] { --mood-color: var(--warning); }
  .mood-card[data-mood-tone='neutral'] { --mood-color: var(--accent-text); }
  .mood-card[data-mood-tone='greed'] { --mood-color: color-mix(in srgb, var(--success) 70%, var(--accent-text)); }
  .mood-card[data-mood-tone='extreme-greed'] { --mood-color: var(--success); }
  .mood-card > p { margin: 0; }
  .mood-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
  .mood-card__label { color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .mood-card__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
  .mood-card__number { color: var(--mood-color); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
  .mood-card__state { color: var(--mood-color); font-size: 1.25rem; font-weight: 650; }
  .mood-card .meter-scale-labels { margin-block-end: var(--s2); }
  .mood-card__comparison, .mood-card__note { color: var(--text-muted); font-size: .875rem; }
  .status { --status-color: var(--info); display: grid; gap: var(--s2); padding: var(--s4); background: var(--surface); border: 1px solid color-mix(in srgb, var(--status-color) 40%, var(--border)); border-radius: var(--radius-card); }
  .status > strong { color: var(--status-color); }
  .status-success { --status-color: var(--success); }
  .status-warning { --status-color: var(--warning); }
  .status-danger { --status-color: var(--danger); }
  .status p:last-child { margin-bottom: 0; }
  .status-action, .dialog-actions, .r4x-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
  .table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .table-scroll table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .875rem; }
  .table-scroll th, .table-scroll td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-soft); }
  .table-scroll th { color: var(--text-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
  .table-scroll caption { padding: var(--s4); font-weight: 600; text-align: left; }
  .list-row { display: flex; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--border-soft); }
  .list-row small { display: block; color: var(--text-muted); }
  .list-row:has(> .list-row__value) { align-items: center; }
  .list-row__value { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s1) var(--s3); text-align: end; }
  .list-row__value .btn-text[href*='/plus/'] { color: var(--accent-text); }
  .tabs > [role='tablist'] { display: flex; flex-wrap: wrap; padding: var(--s1); gap: var(--s1); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-control); }
  .tabs [role='tab'] { min-height: var(--touch-target); min-width: var(--touch-target); padding: var(--s2) var(--s3); border: 1px solid transparent; border-radius: var(--radius-button); background: transparent; color: var(--text-muted); }
  .tabs [role='tab'][aria-selected='true'] { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-card); }
  .tabs > [role='tabpanel'] { padding-block: var(--s4); }
  /* Underlined tab variant (Mein Bereich, 11.10.2026): a gold rule marks the current tab; an optional icon precedes it. */
  .tabs--underline > [role='tablist'] { flex-wrap: nowrap; gap: var(--s2); padding: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
  .tabs--underline [role='tab'] { display: inline-flex; align-items: center; gap: var(--s2); min-height: calc(var(--touch-target) + var(--s2)); padding: var(--s3) var(--s4); margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast); }
  .tabs--underline [role='tab']:hover { color: var(--text); background: var(--gold-soft); }
  .tabs--underline [role='tab'][aria-selected='true'] { border-color: transparent; border-bottom-color: var(--gold); background: transparent; box-shadow: none; color: var(--text); }
  .tabs--underline [role='tab'][aria-selected='true'] .tab-icon { color: var(--accent-text); }
  .chart-surface { position: relative; margin: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .chart-surface svg { display: block; width: 100%; height: auto; }
  .chart-tooltip { display: grid; gap: var(--s1); max-width: 100%; padding: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); box-shadow: var(--shadow-elevated); font-size: .8125rem; }
  .chart-tooltip span { color: var(--text-muted); }

  /* Informational variant of the shared disclosure. One owner for trigger and panel. */
  .info-context { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
  .info-context > .eyebrow { margin: 0; }
  .info-popover { display: inline-block; flex: none; vertical-align: middle; text-align: start; }
  /* UI-019 (Daniel 14.10.2026, design C): one info symbol everywhere, a fine gold ring of 24 px with an italic serif
     "i"; an invisible ring keeps the full 44 px touch target. */
  .info-popover > summary { position: relative; display: inline-grid; place-items: center; width: var(--s5); height: var(--s5); padding: 0; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: transparent; color: var(--accent-text); font: italic 600 1.0625rem/1 var(--font-beginner); list-style: none; cursor: pointer; }
  /* The ring is placed from the padding box, so the 1 px border is added back to reach the full 44 px. */
  .info-popover > summary::after { content: ''; position: absolute; inset: calc((var(--s5) - var(--touch-target)) / 2 - 1px); border-radius: var(--radius-pill); }
  .info-popover > summary::-webkit-details-marker { display: none; }
  .info-popover > summary:hover, .info-popover[open] > summary { background: var(--gold-soft); border-color: var(--gold); color: var(--accent-text); }
  .info-popover__panel { box-sizing: border-box; position: fixed; inset: auto; left: var(--info-left, var(--s4)); top: var(--info-top, var(--s4)); z-index: var(--z-toast); width: min(22rem, calc(var(--info-viewport-width, 100vw) - 2 * var(--s4))); max-width: calc(var(--info-viewport-width, 100vw) - 2 * var(--s4)); max-height: calc(var(--info-viewport-height, 100dvh) - 2 * var(--s4)); overflow: auto; overscroll-behavior: contain; margin: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); box-shadow: var(--shadow-elevated); font: 400 .875rem/1.6 var(--font-body); letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
  /* A closed popover has no box: its fixed panel must never widen the page (e.g. inside a transformed swipe region). */
  .info-popover:not([open]) > .info-popover__panel { display: none; }
  .info-popover__panel > :first-child { margin-top: 0; }
  .info-popover__panel > :last-child { margin-bottom: 0; }
  .info-popover__panel::backdrop { background: transparent; pointer-events: none; }
  /* Paket P2: framed panel with a visible heading (accordion titled), calm term list (infoTerms) and note (infoNote). */
  .info-popover--titled > .info-popover__panel { width: min(24rem, calc(var(--info-viewport-width, 100vw) - 2 * var(--s4))); padding: var(--s5); border-color: var(--gold-border); background: linear-gradient(180deg, var(--gold-soft), transparent var(--s8)), var(--surface); }
  .info-popover__title { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--border-soft); color: var(--text); font: 700 1rem/1.35 var(--font-body); }
  .info-popover__title::before { content: 'i'; display: grid; place-items: center; width: var(--s5); height: var(--s5); flex: none; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: transparent; color: var(--accent-text); font: italic 600 1.0625rem/1 var(--font-beginner); }
  .info-terms { display: grid; margin: 0; }
  .info-terms > div { position: relative; display: grid; gap: 2px; padding: var(--s3) 0 var(--s3) var(--s4); border-top: 1px solid var(--border-soft); }
  .info-terms > div:first-child { padding-top: 0; border-top: 0; }
  .info-terms > div::before { content: ''; position: absolute; left: 0; top: calc(var(--s3) + .5em); width: var(--s2); height: var(--s2); border-radius: var(--radius-pill); background: var(--accent-text); }
  .info-terms > div:first-child::before { top: .5em; }
  .info-terms dt { color: var(--text); font-weight: 700; }
  .info-terms dd { margin: 0; color: var(--text-muted); }
  .info-popover__note { display: grid; align-items: center; gap: var(--s3); margin: var(--s4) 0 0; padding: var(--s3); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }
  .info-popover__note:has(> .info-popover__note-graphic) { grid-template-columns: var(--s7) minmax(0, 1fr); }
  .info-popover__note-graphic { display: grid; gap: var(--s1); }
  .skeleton { display: grid; gap: var(--s2); }
  .skeleton-bar { height: var(--s4); border-radius: var(--radius-pill); background: var(--surface-strong); animation: skeleton-pulse 1.5s var(--ease-standard) infinite alternate; }
  @keyframes skeleton-pulse { to { opacity: .4; } }
  .theme-control, .icon-control { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); flex: 0 0 var(--touch-target); border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--surface); color: var(--text); font-size: 1.25rem; }
  .theme-control:hover, .icon-control:hover { background: var(--surface-muted); border-color: var(--gold-border); }
  /* BUG-039: page title and its share control in one row; long titles wrap beside the fixed control. */
  .title-share { display: flex; align-items: flex-start; gap: var(--s3); }
  .title-share > h1 { flex: 1 1 auto; min-width: 0; margin-block: 0; }
  .title-share > .icon-control { margin-block-start: var(--s1); }
  .theme-control[hidden] { display: none; }
  .dialog { width: min(640px, calc(100% - var(--s6))); max-height: calc(100dvh - var(--s6) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); box-shadow: var(--shadow-elevated); overflow: auto; overscroll-behavior: contain; z-index: var(--z-modal); }
  .dialog::backdrop { background: var(--overlay); }
  .dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
  .dialog-heading h2 { margin: 0; padding-top: var(--s2); }
  .dialog-actions { justify-content: flex-end; margin-top: var(--s5); }
  .dialog-actions:empty { display: none; }
  .dialog-media { width: min(1200px, calc(100% - var(--s6))); }
  /* Paket Y (BUG-049): the tour card is not modal, so the page stays scrollable; outside the top layer it keeps its fixed
     place itself, and a swipe on the card moves the page as well. */
  /* Paket Z2 (Daniel 16.10.2026, Variante B): the card stands off the page it explains, a lifted warm surface with a gold
     edge on top. */
  .dialog-tour { position: fixed; inset: 0; width: min(480px, calc(100% - var(--s6))); max-height: 55dvh; overscroll-behavior: auto; margin: auto max(var(--s4), env(safe-area-inset-right)) max(var(--s4), env(safe-area-inset-bottom)) auto; border-color: var(--gold-border); background: var(--surface-strong); box-shadow: inset 0 3px 0 var(--gold), var(--shadow-elevated); }
  /* BUG-041: a compact explanation card, so title, text and the three tour actions fit on small phones without inner
     scrolling (the card keeps more of the marked target visible). */
  .dialog-tour .dialog-heading { margin-bottom: var(--s2); }
  .dialog-tour .dialog-heading h2 { display: flex; align-items: center; gap: var(--s2); font-size: 1.25rem; line-height: 1.3; }
  /* Paket Z2: one segment per step, filled up to the current one, the step line below it, and the mark of the last step
     in a gold ring beside its title (sized here, so the card never depends on another sheet). */
  .tour-progress { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: var(--s1); }
  .tour-progress span { height: 4px; border-radius: var(--radius-pill); background: var(--border); }
  .tour-progress .is-done { background: var(--gold); }
  .tour-count { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .tour-done { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--accent-text); }
  .tour-done svg { width: var(--s5); height: var(--s5); margin: 0; }
  .dialog-tour .r4x-actions { margin-block: var(--s4) 0; }
  /* On low screens the card may grow a little; should a text still be longer, only the text scrolls and title, position
     and the tour actions stay in view. */
  .dialog-tour[open] { display: flex; flex-direction: column; overflow: hidden; }
  .dialog-tour [data-dialog-content] { display: flex; flex-direction: column; gap: var(--s2); min-height: 0; }
  .dialog-tour [data-dialog-content] > p { margin: 0; }
  /* Narrow phones: "Überspringen" leads alone, "Zurück" and "Weiter" share the row below. */
  @media (max-width: 359px) { .dialog-tour [data-tour-action='skip'] { flex-basis: 100%; justify-content: flex-start; } }
  .dialog-tour [data-dialog-content] > p:not(.tour-count) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  @media (max-height: 720px) { .dialog-tour { max-height: 70dvh; } }
  /* FINAL v18 Exit Guard: centred elevated panel, gold edge, white tool icon, two equal actions. */
  /* The open modal dialog keeps its own fixed position (and is the containing block of the line below). A position set
     here would make it absolute in the top layer: the page then jumped to the top when the dialog opened (Paket R3). */
  .dialog-exit { width: min(390px, calc(100% - var(--s6))); padding: 28px 24px 23px; border-color: var(--gold-border); text-align: center; }
  .dialog-exit::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-hover), transparent); }
  .dialog-exit .dialog-heading { flex-direction: column; align-items: center; gap: var(--s4); margin-bottom: var(--s2); }
  .dialog-exit .dialog-heading h2 { padding-top: 0; font-size: 1.15rem; line-height: 1.3; font-weight: 600; }
  .dialog-exit [data-dialog-close] { display: none; }
  .dialog-exit [data-dialog-content] p { max-width: 31ch; margin: 0 auto; color: var(--text-muted); font-size: .87rem; line-height: 1.55; }
  .dialog-exit [data-dialog-content] p + p { margin-top: var(--s2); }
  .dialog-exit .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s5); }
  /* A third action (Beginner Plus window: Zurück, Anmelden, Plus ansehen) takes the full last row. */
  .dialog-exit .dialog-actions > :nth-child(3):last-child { grid-column: 1 / -1; }
  .dialog-exit .dialog-actions .btn { width: 100%; min-height: 48px; padding: var(--s2) 13px; white-space: normal; }
  .dialog-tool-icon { overflow: hidden; }
  /* Paket W (Daniel 15.10.2026, Wissensgedächtnis "premium inszenieren"): the stage variant of the central dialog, the
     theme-following stage of Mein Bereich (light white to cream, dark the brand black) with gold frame, line and light;
     the title in the display serif. Content, focus and keyboard stay those of the central dialog. */
  .dialog-stage { width: min(880px, calc(100% - var(--s6))); padding: var(--s6); border-color: var(--gold-border); background: radial-gradient(70% 55% at 100% 0, var(--gold-glow), transparent 62%), linear-gradient(160deg, var(--stage-a), var(--stage-b)); }
  .dialog-stage::before { content: ''; position: absolute; inset: 0 var(--s6) auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); pointer-events: none; }
  /* Paket X (BUG-052): the open stage window is a column: the heading stays, the content takes the rest of the height
     the window may have, so a part of it (the list of terms) can scroll on its own; the window itself scrolls only when
     even that part reaches its least height. */
  .dialog-stage[open] { display: flex; flex-direction: column; }
  .dialog-stage > [data-dialog-content] { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .dialog-stage .dialog-heading { margin-bottom: var(--s5); }
  .dialog-stage .dialog-heading h2 { font-family: var(--font-beginner); font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.375rem); font-weight: 600; line-height: 1.1; }
  @media (max-width: 520px) { .dialog-exit { padding: 24px 18px 18px; } .dialog-exit .dialog-actions { grid-template-columns: 1fr; } }
  /* r32 share dialog (Daniel 30.09.2026): all actions stay, as a grid; the first (primary) action spans the row. */
  .dialog-share [data-dialog-content] p { overflow-wrap: anywhere; }
  .dialog-share .dialog-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .dialog-share .dialog-actions .btn { width: 100%; min-width: 0; white-space: normal; }
  .dialog-share .dialog-actions .btn-free-primary { grid-column: 1 / -1; }
  @media (max-width: 640px) { .dialog-share .dialog-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  /* UI-040 (r69) spotlight, BUG-041 (r337 spotlight as reference): the tour no longer dims the page through the dialog
     backdrop; the spot over the marked part of the target leaves it bright while everything around it recedes. The spot
     ends above the card when a tall target does not fit beside it. tour-runtime.mjs (tourLayout) measures and places spot
     and card; the margin only exposes the bottom safe area to that measurement. */
  .dialog-tour::backdrop { background: transparent; }
  .tour-spot { position: fixed; inset: var(--spot-top) auto auto var(--spot-left); width: var(--spot-width); height: var(--spot-height); margin-bottom: env(safe-area-inset-bottom, 0px); border-radius: var(--radius-card); outline: 3px solid var(--accent-text); outline-offset: 0; box-shadow: 0 0 0 100vmax var(--overlay); pointer-events: none; z-index: var(--z-drawer); animation: tour-mark-in calc(var(--motion-base) + var(--motion-fast)) var(--ease-standard); }
  .dialog-tour[data-tour-place]:not([data-tour-place='dock']) { inset: var(--tour-top) auto auto var(--tour-left); width: var(--tour-width); max-width: none; margin: 0; }
  /* Paket Y (BUG-049, r337 r4x-tour-scroll-hint): a target that continues below the mark says so on the lower edge of the
     mark, half in the gap above the card, so it covers little of the marked content. */
  .tour-spot__more { display: none; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: var(--s1) var(--s3); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-elevated); font-size: .78rem; font-weight: 600; white-space: nowrap; }
  .tour-spot[data-more] .tour-spot__more { display: inline-flex; }
  /* r43 (Prüfliste C1): "So entsteht ein Hinweis" on the account page: four stations. The layout follows the card
     width (container query): stacked with downward arrows in a narrow card, in a row with arrows in a wide one. */
  .hint-flow { margin: var(--s4) 0; container-type: inline-size; }
  .hint-flow > figcaption { margin-bottom: var(--s3); }
  .hint-flow ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin: 0; padding: 0; list-style: none; }
  .hint-flow__step { position: relative; display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s1); align-items: start; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-muted); }
  .hint-flow__step:not(:last-child)::after { content: '↓'; position: absolute; left: calc(var(--s3) + var(--s2)); bottom: calc(-1 * var(--s5)); display: grid; place-items: center; height: var(--s5); color: var(--accent-text); font-weight: 700; }
  .hint-flow__icon { grid-row: span 2; display: inline-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); }
  .hint-flow__icon svg { width: 18px; height: 18px; }
  .hint-flow__step strong { font-size: .9rem; }
  .hint-flow__step > span:last-child { color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
  @container (min-width: 760px) {
    .hint-flow ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hint-flow__step { grid-template-columns: minmax(0, 1fr); }
    .hint-flow__icon { grid-row: auto; }
    .hint-flow__step:not(:last-child)::after { content: '→'; left: auto; right: calc(-1 * var(--s5)); bottom: auto; top: 50%; width: var(--s5); height: auto; transform: translateY(-50%); }
  }
  /* r43 (Prüfliste A1): the tour mark settles onto its target instead of jumping. */
  @keyframes tour-mark-in { from { outline-color: transparent; outline-offset: var(--s2); } to { outline-color: var(--accent-text); outline-offset: 0; } }
  @media (prefers-reduced-motion: reduce) { .tour-spot { animation: none; } }
  .media-viewer { max-width: 100%; max-height: 65dvh; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; border-radius: var(--radius-control); background: var(--surface-muted); }
  .media-viewer-image { display: block; height: auto; max-width: none; margin: 0; }
  .media-viewer-image[data-zoom='1'] { width: 100%; }
  .media-viewer-image[data-zoom='1.5'] { width: 150%; }
  .media-viewer-image[data-zoom='2'] { width: 200%; }
  .media-viewer-image[data-zoom='2.5'] { width: 250%; }
  .media-viewer-image[data-zoom='3'] { width: 300%; }
  .dialog-theme { width: min(320px, calc(100% - var(--s6))); }
  .theme-picker { display: grid; gap: var(--s1); }
  .theme-picker button { display: flex; justify-content: space-between; min-height: var(--touch-target); padding: var(--s2) var(--s3); border: 1px solid transparent; border-radius: var(--radius-button); background: transparent; color: var(--text); text-align: left; }
  .theme-picker button:hover { background: var(--surface-muted); }
  .theme-picker button[aria-pressed='true'] { color: var(--accent-text); background: var(--gold-soft); }
  .feedback { position: fixed; left: max(var(--s4), env(safe-area-inset-left)); right: max(var(--s4), env(safe-area-inset-right)); bottom: max(var(--s4), env(safe-area-inset-bottom)); z-index: var(--z-toast); pointer-events: none; display: grid; justify-items: end; gap: var(--s2); }
  .feedback > div { max-width: min(100%, 480px); }
  .toast { display: flex; align-items: start; gap: var(--s3); box-shadow: var(--shadow-elevated); pointer-events: auto; }
  .toast .icon-control { background: transparent; }
  .toast > span { flex: 1; }
  @media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }
}

@layer layout {
  .container { width: 100%; max-width: var(--desktop-max); padding-inline: max(var(--desktop-pad), env(safe-area-inset-left)) max(var(--desktop-pad), env(safe-area-inset-right)); margin-inline: auto; }
  .consent-notice { position: fixed; z-index: var(--z-sticky); left: max(var(--s4), env(safe-area-inset-left)); right: max(var(--s4), env(safe-area-inset-right)); bottom: max(var(--s4), env(safe-area-inset-bottom)); width: auto; max-width: 640px; max-height: calc(100dvh - var(--s6) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; box-shadow: var(--shadow-elevated); }
  .consent-notice .r4x-actions { margin-bottom: 0; }
  .main-content { min-height: 40vh; padding-block: var(--s7) var(--s8); }
  .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: var(--header-surface); }
  .logo-dark { display: none; }
  html[data-theme='dark'] .logo-dark { display: block; }
  html[data-theme='dark'] .logo-light { display: none; }
  .site-footer { --surface: var(--brand-page); --surface-muted: var(--brand-surface); --text: var(--brand-text); --text-muted: var(--brand-muted); --border: var(--brand-border); --accent-text: var(--gold-hover); color: var(--brand-text); background: var(--brand-page); color-scheme: dark; }
  .primary-navigation { display: flex; gap: var(--s2); }
  .primary-navigation .btn { border-color: var(--gold-border); }
  .primary-navigation [aria-current='page'] { color: var(--gold-hover); background: var(--gold-soft); }
  .menu-disclosure > summary { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: 1px solid var(--gold-border); border-radius: var(--radius-button); font-size: 1.5rem; list-style: none; }
  .menu-disclosure > summary::-webkit-details-marker { display: none; }
  .menu-disclosure .menu-content { position: absolute; right: var(--s5); top: 100%; width: min(360px, calc(100% - var(--s6))); max-height: 70vh; overflow: auto; padding: var(--s5); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); }
  .dialog-menu { width: min(400px, calc(100% - var(--s6))); margin-right: max(var(--s4), env(safe-area-inset-right)); z-index: var(--z-drawer); }
  .menu-navigation { display: grid; }
  .menu-navigation a { display: flex; align-items: center; min-height: var(--touch-target); padding: var(--s2) var(--s3); text-decoration: none; border-radius: var(--radius-button); }
  .menu-navigation a:hover, .menu-navigation [aria-current='page'] { color: var(--accent-text); background: var(--gold-soft); }
  .menu-heading { display: block; color: var(--accent-text); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .menu-status { display: grid; gap: var(--s2); padding: var(--s4); margin-top: var(--s4); border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: var(--gold-soft); }
  .account-status { padding-top: var(--s3); border-top: 1px solid var(--border); }
  .account-status p { margin-block: var(--s1); font-size: .8125rem; color: var(--text-muted); }
  /* Light/dark switch at the end of the menu (wish Daniel 12.10.2026), the shared segmented control at full width. */
  .menu-theme { display: grid; gap: var(--s2); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }
  .menu-theme .segmented-control { width: 100%; }
  .site-footer { --surface: var(--footer-page); --surface-muted: var(--footer-surface); background: var(--footer-page); padding-block: var(--s7) max(var(--s7), env(safe-area-inset-bottom)); }
  .footer-insights { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); border: 1px solid var(--gold-border); background: var(--gold-soft); border-radius: var(--radius-card); padding: var(--s4) var(--s5); margin-bottom: var(--s7); }
  .footer-insights-copy { display: flex; align-items: center; gap: var(--s4); }
  /* Title and claim stack as two lines; only these two (Paket W: the spans of the R4X mark inside the title stay inline). */
  .footer-insights-copy > div > :is(strong, span) { display: block; }
  .footer-insights-copy strong { color: var(--gold-hover); }
  .footer-insights-copy > div > span { color: var(--text-muted); font-size: .875rem; }
  .insights-mark { color: var(--gold); flex: 0 0 32px; }
  .footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s7); }
  .footer-logo { display: inline-block; }
  .footer-logo img { width: 87px; height: 44px; object-fit: contain; }
  .footer-claim { color: var(--text-muted); font-size: .875rem; margin: var(--s2) 0 0; }
  .footer-promise { color: var(--gold); font-size: .875rem; margin: var(--s1) 0 var(--s3); }
  .footer-ai { font-size: .75rem; }
  .footer-ai summary { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--touch-target); color: var(--gold-hover); list-style: none; }
  .footer-ai summary::-webkit-details-marker { display: none; }
  .footer-ai > div { max-width: var(--reading-max); padding-top: var(--s3); }
  .footer-navigation { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s5); }
  .footer-column { display: flex; flex-direction: column; align-items: start; gap: var(--s2); }
  .footer-column a, .footer-column button { font-size: .875rem; text-decoration: none; color: var(--text-muted); }
  .footer-column a:hover, .footer-column button:hover { color: var(--gold-hover); }
  .footer-column .footer-heading { font-size: .8125rem; color: var(--gold); font-weight: 600; }
  .footer-legal { max-width: 88ch; border-top: 1px solid var(--border); margin: var(--s6) 0 0; padding-top: var(--s5); color: var(--text-muted); font-size: .8125rem; line-height: 1.6; }
  /* Paket V (Daniel 15.10.2026): R4X is always the brand mark. Light theme: R and X in the text colour, the 4 in gold;
     dark theme and the dark chrome: R and X in gold, the 4 in the text colour (--mark-rx, --mark-four); in the body
     font, bold. brand-mark.mjs turns every visible "R4X" into this mark. Ready4nexxt (.wordmark) shares the colours. */
  .wordmark, .r4x-mark { color: var(--mark-rx); }
  .wordmark i, .r4x-mark__four { color: var(--mark-four); font-style: normal; }
  .r4x-mark { font-family: var(--font-body); font-weight: 700; white-space: nowrap; }
  /* On the solid fill of a primary button gold or white letters would vanish: the whole mark takes the button text. */
  :is(.btn-free-primary, .btn-plus-primary) :is(.r4x-mark, .wordmark) { --mark-rx: currentColor; --mark-four: currentColor; }
  .r4x-editorial { min-width: 0; }
  .r4x-editorial p, .r4x-editorial li { max-width: var(--reading-max); }
  .r4x-hero { padding-block: var(--s5) var(--s7); border-bottom: 1px solid var(--border); }
  .r4x-section { padding-block: var(--s7); }
  /* Paket U: on /wissen/ the area rhythm (.area-flow gap) spaces the sections instead of their own padding. */
  .area-flow > .r4x-section { padding-block: 0; }
  .r4x-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .r4x-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r4x-grid > * { min-width: 0; }
  /* r337 market ticker (/news/ and Zentrale): desktop one row, mobile two columns. */
  /* Shared editorial cards: one owner for News and Mein Bereich. */
  .market-story { display: grid; gap: var(--s4); color: var(--text); }
  .market-story > * { margin: 0; }
  /* UI-013/BUG-015: the r337 R4X Pick staging (5px gold accent, gold wash towards the text, brand mark). */
  .market-story--lead { border-color: var(--gold-border); border-inline-start: 5px solid var(--gold); padding-inline-start: calc(var(--s5) + var(--s1)); background: linear-gradient(90deg, var(--gold-soft), transparent 55%), var(--surface); }
  .market-story__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
  /* Paket V: the pick badge holds the R4X mark and the word as two items. */
  .market-story__pick { gap: var(--s1); }
  .market-story__head .icon-control { margin-inline-start: auto; flex: none; }
  .market-story__eyebrow { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
  .market-story__title { color: var(--text); overflow-wrap: anywhere; }
  .market-story > .market-story__title { font-size: 1.25rem; line-height: 1.4; }
  .market-story--lead > .market-story__title { font-size: clamp(1.35rem, 1rem + .8vw, 1.75rem); line-height: 1.3; }
  .market-story__title a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--gold-border); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  /* Paket W: every title link of the market stories and the news list reaches 44 px to tap; the link stays in the text
     flow, so its vertical padding widens the touch area without moving any line. The box of an inline link is its glyph
     height (at least 1em, less than the line height) plus the padding, hence 1em. */
  .market-story__title a { padding-block: max(0px, (var(--touch-target) - 1em) / 2); }
  .market-story__title a:is(:hover, :focus-visible) { text-decoration-color: var(--accent-text); }
  .market-story__body { max-width: 72ch; color: var(--text-muted); }
  .market-story__angle, .market-story__motto { color: var(--accent-text); font-weight: 700; }
  .market-story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .market-story__source { font-weight: 700; letter-spacing: .04em; }
  .market-story__time { font-variant-numeric: tabular-nums; }
  .market-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--s4); }
  /* UI-013: r337 colour logic, gold for crypto news and blue for traditional markets. */
  .market-story--crypto { --news-tone: var(--news-crypto); --news-tone-soft: var(--gold-soft); --news-tone-border: var(--gold-border); }
  .market-story--market { --news-tone: var(--news-market); --news-tone-soft: var(--news-market-soft); --news-tone-border: var(--news-market-border); }
  :is(.market-story--crypto, .market-story--market) { border-color: var(--news-tone-border); border-block-start: 3px solid var(--news-tone); }
  :is(.market-story--crypto, .market-story--market) .badge { border-color: var(--news-tone-border); background: var(--news-tone-soft); color: var(--news-tone); }
  :is(.market-story--crypto, .market-story--market) .market-story__title a { text-decoration-color: var(--news-tone-border); }
  :is(.market-story--crypto, .market-story--market) .market-story__title a:is(:hover, :focus-visible) { color: var(--news-tone); text-decoration-color: var(--news-tone); }
  .market-story--market .market-story__source { color: var(--news-market); }
  .market-disclosure__copy { display: grid; gap: var(--s1); min-width: 0; }
  .market-disclosure__preview { color: var(--text-muted); font-size: .875rem; font-weight: 400; }
  .market-disclosure[open] .market-disclosure__preview { display: none; }
  .market-disclosure__count { margin-inline-start: auto; color: var(--text-muted); font-size: .8125rem; }
  @media (max-width: 767px) {
    .market-story-grid { grid-template-columns: minmax(0, 1fr); }
    .market-story { padding: var(--s4); }
  }
  .currency-switch.market-currency { margin-block: var(--s5); }
  /* Paket X (Daniel 16.10.2026, UI-071): the symbol before the short name of a market value: coin logos round, flags with
     a fine edge, the gold bar in the gold of the brand. One fixed size, so nothing moves while a logo loads. */
  .metric-label:has(> .market-mark) { display: flex; align-items: center; gap: var(--s2); }
  .market-mark { display: inline-grid; flex: none; place-items: center; width: var(--s5); height: var(--s5); }
  .market-mark--logo img { display: block; width: 100%; height: 100%; border-radius: var(--radius-pill); object-fit: contain; }
  .market-mark--flag svg { display: block; width: 100%; height: auto; border-radius: calc(var(--s1) / 2); box-shadow: 0 0 0 1px var(--border); }
  .market-mark--gold { color: var(--gold); }
  .market-mark--gold svg { display: block; width: 100%; height: auto; }
  @media (min-width: 1200px) { .r4x-grid.market-ticker { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s3); } }
  @media (max-width: 767px) { .r4x-grid.market-ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } }
  .r4x-actions { align-items: center; margin-block: var(--s5); }
  .r4x-lead { font-size: 1.125rem; color: var(--text-muted); max-width: var(--reading-max); }
  .r4x-callout { padding: var(--s5); border-left: 2px solid var(--gold); background: var(--surface-muted); margin-block: var(--s5); }
  .r4x-editorial-context, .eyebrow { color: var(--accent-text); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  .r4x-media { max-width: 100%; margin-block: var(--s5); }
  .r4x-media img { max-width: 100%; height: auto; border-radius: var(--radius-card); }
  .r4x-media figcaption { font-size: .8125rem; color: var(--text-muted); margin-top: var(--s2); }
  .editorial-illustration { margin-inline: 0; }
  .editorial-illustration > .btn { display: grid; gap: var(--s2); width: 100%; padding: 0; text-align: start; white-space: normal; }
  /* r36: r337 knowledge card images (/wissen/) with the access badges on the image; the wide cards put image and text
     side by side from 701 px (r337 breakpoint of the navigator picture). */
  .r4x-card-media { position: relative; min-width: 0; margin-bottom: var(--s4); overflow: hidden; border-radius: var(--radius-control); background: var(--brand-page); }
  .r4x-card-media picture, .r4x-card-media img { display: block; width: 100%; height: auto; }
  .r4x-card-media-badges { position: absolute; top: var(--s3); right: var(--s3); }
  .r4x-card-media-badges, .r4x-card-media-badges > div { display: flex; gap: var(--s2); }
  .r4x-media-card { display: grid; align-items: center; column-gap: var(--s5); }
  .r4x-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
  @media (min-width: 701px) {
    .r4x-media-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .r4x-media-card > .r4x-card-media { margin-bottom: 0; }
    .r4x-only-mobile { display: none; }
  }
  @media (max-width: 700px) { .r4x-only-desktop { display: none; } }
  /* r68 H: canonical collection roles, retained before generic extraction can flatten them. */
  .r4x-collection { width: 100%; max-width: calc(var(--desktop-max) * 5 / 6); margin-inline: auto; }
  .r4x-collection-hero { padding: var(--s6); border: 1px solid var(--gold-border); border-bottom: 3px solid var(--gold); border-radius: var(--radius-card); background: var(--surface); }
  .r4x-collection-hero h1 { max-width: 22ch; color: var(--accent-text); }
  .r4x-collection-hero .eyebrow { margin-bottom: var(--s4); }
  .r4x-collection-claim { margin-block: var(--s5) var(--s2); font-size: 1.35rem; font-weight: 700; }
  .r4x-collection-claim em { color: var(--accent-text); font-style: normal; }
  .r4x-collection-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s5); }
  .r4x-collection-metric { display: grid; gap: var(--s2); padding: var(--s4); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .r4x-collection-metric strong { font-size: 1.5rem; line-height: 1.2; }
  .r4x-collection-metric span { font-size: .8125rem; color: var(--text-muted); }
  .r4x-collection-topics, .r4x-collection-scope { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s5); }
  .r4x-collection-topic, .r4x-collection-scope > a { display: grid; gap: var(--s3); padding: var(--s5); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-card); }
  .r4x-collection-topic small { color: var(--text-muted); }
  .r4x-collection-scope > a { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: var(--s4); }
  .r4x-collection-scope-copy { display: grid; gap: var(--s2); }
  .r4x-collection-scope-copy small { color: var(--text-muted); }
  .r4x-collection-scope-copy em { justify-self: start; font-size: .75rem; font-style: normal; font-weight: 700; color: var(--accent-text); }
  .r4x-collection-arrow { grid-column: 2; color: var(--accent-text); }
  .r4x-collection-icon { display: grid; place-items: center; flex: 0 0 var(--s7); width: var(--s7); height: var(--s7); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); font-size: 1.5rem; }
  .r4x-collection-group { border-top: 1px solid var(--border); }
  .r4x-collection-heading { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s4); }
  .r4x-collection-heading :is(h2, p) { margin-block: 0 var(--s2); }
  .r4x-collection-cards, .r4x-collection-bridges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .r4x-collection-card { display: grid; align-content: start; gap: var(--s2); text-decoration: none; color: var(--text); border-left: 3px solid var(--gold); }
  .r4x-collection-card[data-icon] { grid-template-columns: var(--s7) minmax(0, 1fr); column-gap: var(--s4); }
  .r4x-collection-card[data-icon] > :not(.r4x-collection-icon) { grid-column: 2; }
  .r4x-collection-card > .r4x-collection-icon { grid-column: 1; grid-row: 1 / span 5; }
  .r4x-collection-card--wide { grid-column: 1 / -1; }
  .r4x-collection-card > :is(b, strong) { display: block; font-size: 1.125rem; line-height: 1.4; }
  .r4x-collection-card > small { color: var(--accent-text); font-size: .75rem; font-weight: 700; }
  .r4x-collection-card > span:not([class]) { color: var(--text-muted); font-size: .9375rem; }
  .r4x-collection-card > em, .r4x-collection-card-action { display: flex; align-items: center; gap: var(--s2); padding-top: var(--s3); font-style: normal; font-weight: 700; font-size: .875rem; color: var(--accent-text); }
  .r4x-collection-card:hover, .r4x-collection-topic:hover, .r4x-collection-scope > a:hover, .r4x-collection-bridge:hover { border-color: var(--gold); background: var(--surface-strong); }
  .r4x-collection :is(a, figure):focus-visible { outline: 2px solid var(--gold); outline-offset: var(--s1); }
  .r4x-collection-flags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s3); }
  .r4x-collection-flags > span { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); font-size: .8125rem; }
  .r4x-collection-bridge { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-card); background: var(--surface); color: var(--text); text-decoration: none; }
  .r4x-collection-bridge b, .r4x-collection-bridge > span > span { display: block; }
  .r4x-collection-bridge > span > span { margin-top: var(--s2); color: var(--text-muted); font-size: .875rem; }
  .r4x-collection-figure { max-width: 100%; margin: var(--s5) 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .r4x-collection-figure > svg { display: block; width: 100%; height: auto; min-width: calc(var(--s8) * 14); max-width: none; }
  .r4x-collection-notice p { margin-bottom: 0; }
  /* One consolidated entry per family, using its existing artwork and v18 controls. */
  .r4x-family-mount { display: grid; grid-template-columns: minmax(0, 1fr); }
  .r4x-family-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s6); align-items: start; }
  .r4x-family-card > .r4x-card-media { margin-bottom: 0; }
  .r4x-family-body { min-width: 0; }
  .r4x-family-title { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3); }
  .r4x-family-title :is(h3, p) { margin: 0; }
  .r4x-family-title .eyebrow { margin-bottom: var(--s2); }
  .r4x-family-body > p { color: var(--text-muted); }
  .r4x-family-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .r4x-family-tier { padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
  .r4x-family-tier[data-access='plus'] { border-color: var(--gold-border); }
  .r4x-family-tier h4 { margin: var(--s3) 0 var(--s2); font-size: .875rem; }
  .r4x-family-tier ul { display: grid; gap: var(--s2); margin: 0; padding-left: var(--s4); font-size: .875rem; }
  .r4x-family-body > .r4x-actions { margin-bottom: 0; }
  .r4x-family-badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-inline-start: auto; align-self: start; }
  .r4x-family-card--plain { grid-template-columns: minmax(0, 1fr); }
  /* r337 guide topics: two columns of short entries with a gold point. */
  .r4x-family-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s4); margin: 0 0 var(--s4); padding: var(--s3) 0 0; border-top: 1px solid var(--border); list-style: none; color: var(--text-muted); font-size: .875rem; }
  .r4x-family-topics li { display: flex; align-items: center; gap: var(--s2); }
  .r4x-family-topics li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
  /* r337 Krypto Decoder product card: compact cover in a fixed column, marked as preview of the full cover. */
  .r4x-family-card--book { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); align-items: center; }
  .r4x-book-preview { position: relative; display: grid; place-items: center; height: 240px; padding: 0 0 var(--s7); overflow: hidden; border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: radial-gradient(circle at 50% 44%, var(--gold-soft), transparent 55%), var(--brand-page); cursor: zoom-in; }
  .r4x-book-preview img { width: auto; height: 176px; max-width: calc(100% - var(--s7)); object-fit: contain; filter: drop-shadow(0 14px 20px rgb(0 0 0 / .42)); transition: transform var(--motion-base) var(--ease-standard); }
  .r4x-book-preview:hover img { transform: scale(1.035); }
  .r4x-book-preview__label { position: absolute; left: 50%; bottom: var(--s3); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) 10px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); background: var(--brand-surface); color: var(--gold-hover); font-size: .72rem; font-weight: 600; }
  .r4x-book-preview__label::before { content: '+'; font-size: 1rem; line-height: 1; }
  @media (max-width: 1023px) {
    .r4x-collection-topics, .r4x-collection-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r4x-family-card, .r4x-family-card--book { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 767px) {
    .r4x-collection-hero { padding: var(--s4); }
    .r4x-collection-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .r4x-collection-cards, .r4x-collection-bridges, .r4x-family-tiers { grid-template-columns: minmax(0, 1fr); }
    .r4x-collection-card[data-icon] { column-gap: var(--s3); }
    .r4x-family-card { gap: var(--s5); }
  }
  @media (max-width: 479px) {
    .r4x-collection-topics, .r4x-collection-scope, .r4x-family-topics { grid-template-columns: minmax(0, 1fr); }
  }

  /* r36: r337 area hero (v846/v846.1): desktop shows eyebrow and lead; on phones an "i" row replaces both and opens
     the lead in place. Never both at once. UI-019 (Daniel 14.10.2026): one rule for every area entry of both domains
     (`heroInfo` in components.mjs), at the breakpoint of the mobile shell (767 px). */
  .r4x-hero-info { display: none; }
  @media (max-width: 767px) {
    .r4x-hero-info { display: flex; margin-bottom: var(--s2); }
    .r4x-hero-eyebrow, .r4x-hero-sub { display: none; }
  }
  .beginner-editorial { background: var(--beginner-canvas); }
  .beginner-display { font-family: var(--font-beginner); }
  @media (min-width: 768px) and (max-width: 1023px) { .r4x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-main { grid-template-columns: 1fr; gap: var(--s6); } }
  @media (max-width: 767px) {
    .container { padding-inline: max(var(--mobile-pad), env(safe-area-inset-left)) max(var(--mobile-pad), env(safe-area-inset-right)); }
    .main-content { padding-block: var(--s6) var(--s7); }
    .primary-navigation { flex: 1; gap: var(--s1); min-width: 0; }
    .primary-navigation .btn { font-size: .75rem; padding-inline: var(--s2); flex: 1; }
    .menu-disclosure .menu-content { right: var(--s4); }
    .card, .dialog { padding: var(--s4); }
    .dialog-actions .btn { flex: 1; }
    /* Sheet variant (Mein Bereich, 11.10.2026): full width from the bottom edge with a gold upper rim. */
    .dialog-sheet { width: 100%; max-width: none; margin: auto 0 0; padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); border-color: var(--gold-border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
    .footer-main, .footer-navigation, .r4x-grid { grid-template-columns: 1fr; }
    .footer-main, .footer-navigation { gap: var(--s6); }
    .footer-insights { flex-wrap: wrap; padding: var(--s4); gap: var(--s4); }
    /* Wish Daniel 12.10.2026: on its own line the sign-up button sits centred in the card. */
    .footer-insights > .btn { margin-inline: auto; }
    .footer-column { gap: 0; }
    .footer-column a, .footer-column button { display: inline-flex; align-items: center; min-height: var(--touch-target); min-width: var(--touch-target); }
    .footer-column .footer-heading { min-height: var(--touch-target); display: flex; align-items: center; }
    .breadcrumbs a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
    .r4x-section { padding-block: var(--s6); }
    .feedback { bottom: max(var(--s4), env(safe-area-inset-bottom)); }
  }
  /* r68: one measured pinned stack; the info bar remains in normal flow. */
  html { --shell-header-height: 0px; --shell-sticky-height: 0px; scroll-padding-top: calc(var(--shell-sticky-height) + var(--s3)); }
  .menu-group + .menu-group { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
  .menu-group .menu-heading { margin-bottom: var(--s1); }
  /* BUG-036 (r337 shared-header v2691 .hamburger-subnav.is-current, .hamburger-current-tool): the open area is bold on gold,
     the open tool below it is r337 orange and bold, so the current position never depends on hover. The menu is dark in
     both themes like the header (data-theme-scope="dark" on the menu dialog). */
  .menu-navigation [aria-current='page'] { font-weight: 600; }
  .menu-current-tool { display: block; padding: 0 var(--s3) var(--s2) var(--s5); color: var(--nav-current-tool); font-size: .8125rem; font-weight: 600; }
  .menu-learning-path { display: grid; padding: 0 0 var(--s2) var(--s4); }
  .menu-learning-path__label { margin: var(--s1) 0; color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .menu-navigation .menu-learning-path a { gap: var(--s2); font-size: .875rem; }
  .menu-learning-path__num { flex: 0 0 24px; color: var(--accent-text); font-weight: 700; }
  .workspace-bar, .bottom-nav { --surface: var(--brand-page); --surface-muted: var(--brand-surface); --text: var(--brand-text); --text-muted: var(--brand-muted); --border: var(--brand-border); --accent-text: var(--gold-hover); color: var(--brand-text); background: var(--brand-page); color-scheme: dark; }
  .workspace-bar { position: sticky; top: var(--shell-header-height); z-index: var(--z-nav); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .workspace-bar__inner { display: flex; align-items: center; gap: var(--s4); min-height: 56px; }
  .workspace-nav { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--s1); min-width: 0; }
  .workspace-nav__item { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 var(--s2); border-radius: var(--radius-button); color: var(--text-muted); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .workspace-nav__item:hover { color: var(--text); background: var(--surface-muted); }
  .workspace-nav__item[aria-current='page'] { color: var(--gold-hover); background: var(--gold-soft); box-shadow: inset 0 -2px 0 var(--gold); }
  .workspace-nav__tools { display: flex; flex: none; gap: var(--s2); }
  .workspace-nav__tool { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--touch-target); padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius-button); background: transparent; color: var(--text); font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
  .workspace-nav__tool:hover { border-color: var(--gold-border); color: var(--gold-hover); }
  .workspace-nav__tool svg, .bottom-nav__icon svg { width: 18px; height: 18px; }
  .bottom-nav { display: none; }
  /* r337 tool resume: the remembered tool card is briefly highlighted after returning. */
  .r4x-focus-pulse { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-card); }
  .dialog-search { width: min(680px, calc(100% - var(--s6))); }
  .search-panel { display: grid; gap: var(--s4); }
  .search-input { width: 100%; min-height: var(--touch-target); padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text); font: inherit; font-size: 1rem; }
  .search-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .search-results { max-height: min(60vh, 560px); overflow: auto; overscroll-behavior: contain; }
  .search-results__list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
  .search-result { display: grid; gap: 2px; padding: var(--s3); border: 1px solid transparent; border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
  a.search-result:hover, a.search-result:focus-visible { border-color: var(--gold-border); background: var(--surface-muted); }
  .search-result__type { color: var(--accent-text); font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
  .search-result__title { font-weight: 600; line-height: 1.35; }
  .search-result__plus { color: var(--accent-text); }
  .search-result__included { color: var(--accent-text); font-size: .75rem; }
  .search-result__desc { color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
  .search-hint, .search-empty { margin: 0; padding: var(--s5) var(--s3); color: var(--text-muted); text-align: center; }
  .dialog-areas { width: min(400px, calc(100% - var(--s6))); }
  .areas-drawer { display: grid; gap: var(--s2); }
  .areas-drawer__group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--border); }
  .areas-drawer__group .menu-heading { grid-column: 1 / -1; margin-bottom: var(--s1); }
  .areas-drawer__item { display: flex; align-items: center; gap: var(--s2); min-width: 0; min-height: var(--touch-target); padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius-button); background: var(--surface-muted); color: var(--text); font: inherit; font-size: .875rem; overflow-wrap: anywhere; text-align: start; text-decoration: none; cursor: pointer; }
  .areas-drawer [hidden] { display: none; }
  .areas-drawer__item:hover, .areas-drawer__item[aria-current='page'] { color: var(--accent-text); background: var(--gold-soft); }
  .areas-drawer__icon { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; }
  .areas-drawer__icon img, .areas-drawer__icon svg { width: 24px; height: 24px; object-fit: contain; }
  /* BUG-048: the full search opens from the top of the drawer, with the search icon of the navigation. */
  .areas-drawer__search { width: 100%; gap: var(--s2); }
  .areas-drawer__search-icon { display: inline-flex; flex: none; }
  .areas-drawer__search-icon svg { width: 18px; height: 18px; }
  @media (max-width: 767px) {
    body[data-shell='workspace'] { --bottom-nav-space: calc(64px + env(safe-area-inset-bottom)); padding-bottom: var(--bottom-nav-space); }
    html { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .workspace-bar { display: none; }
    .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: grid; grid-template-columns: repeat(5, minmax(max-content, 1fr)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-top: 1px solid var(--border); }
    /* BUG-048 (Daniel 14.10.2026): five places with equal columns; a column never gets narrower than its label, so
       "Mein Bereich" stays on one line and centred at 320 px (78 px, the others share the rest). */
    .bottom-nav__label { white-space: nowrap; }
    .bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: var(--s1); border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .6875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
    .bottom-nav__icon svg { width: 22px; height: 22px; }
    .bottom-nav__item[aria-current='page'], .bottom-nav__item[data-active] { color: var(--gold-hover); }
    body[data-shell='workspace'] :is(.back-top, .feedback, .consent-notice) { bottom: calc(var(--bottom-nav-space) + var(--s3)); }
    /* BUG-047: on the phone the cookie notice takes the full width above the bottom navigation; the floating control
       steps aside until the decision is made. */
    body:has([data-consent-notice]) .back-top { display: none; }
    .dialog-search { width: calc(100% - var(--s4)); }
  }
  /* r39 dashboard header (decision Daniel 04.10.2026): one row in the dark brand chrome (both themes) with logo,
     Startseite, Mein Bereich, Shop and menu; the r337 gold line (shared-header: 3px) closes it. */
  .site-header--app { --header-surface: var(--brand-page); --surface: var(--brand-page); --surface-muted: var(--brand-surface); --text: var(--brand-text); --text-muted: var(--brand-muted); --border: var(--brand-border); --accent-text: var(--gold-hover);
    color: var(--brand-text); border-bottom: 3px solid var(--gold); color-scheme: dark; }
  .header-app { display: flex; align-items: center; gap: var(--s4); min-height: var(--s8); padding-top: env(safe-area-inset-top); }
  .header-app__logo { display: grid; align-items: center; flex: none; min-width: var(--touch-target); min-height: var(--touch-target); }
  .header-app__logo img { display: block; width: auto; height: 44px; }
  .site-header--app .primary-navigation { margin-left: auto; }
  /* Context, tour, account, Plus and theme remain in the scrolling info bar below the sticky header. */
  .info-bar { --surface: var(--brand-surface); --surface-muted: var(--brand-page); --text: var(--brand-text); --text-muted: var(--brand-muted); --border: var(--brand-border); --accent-text: var(--gold-hover);
    color: var(--brand-text); background: var(--brand-surface); border-bottom: 1px solid var(--border); color-scheme: dark; }
  .info-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: calc(var(--touch-target) + var(--s1)); }
  .info-bar__context { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; margin: 0; white-space: nowrap; }
  .info-bar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .875rem; font-weight: 600; }
  .info-bar__sub { color: var(--text-muted); font-size: .8125rem; }
  .info-bar__tour { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--gold); font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .info-bar__tour:hover { color: var(--gold-hover); }
  /* UI-052 (10.10.2026): the account state is plain status text; Konto and Plus ansehen are underlined text links. */
  .info-bar__status { display: flex; flex: none; align-items: center; gap: var(--s4); }
  .info-status { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
  /* Paket X (UI-063): the account state changes from "Wird geprüft" to its answer after the page has drawn; the label
     keeps the width of the longest state ("Nicht angemeldet", 16 characters), so the bar beside it does not move. */
  .info-status [data-session-short] { min-inline-size: 16ch; }
  .info-status__dot { width: var(--s2); height: var(--s2); border-radius: var(--radius-pill); background: var(--text-muted); }
  .info-status[data-session-state='active'] .info-status__dot { background: var(--brand-success); }
  .info-status:is([data-session-state='unavailable'],[data-session-state='checking']) .info-status__dot { background: var(--brand-info); }
  .info-status--plus { color: var(--gold); }
  .info-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-target); min-height: var(--touch-target); color: var(--text); font-size: .8125rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand-border); text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
  .info-link:hover, .info-link:focus-visible { color: var(--gold-hover); text-decoration-color: currentColor; }
  .info-link--plus { color: var(--gold); text-decoration-color: var(--gold-border); }
  :is(.info-status, .info-link)[hidden] { display: none; }
  /* r337 r4x-pwa v9: install hint under the bars on phones and touch tablets, and the lasting menu entry. */
  .install-hint { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--gold-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); color: var(--text); }
  .install-hint__label { display: flex; flex: 1; align-items: center; gap: var(--s2); min-width: 0; font-size: .875rem; font-weight: 650; line-height: 1.25; }
  .install-hint .icon-control { border: 0; background: transparent; color: var(--text-muted); }
  .install-hint svg, .install-entry svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
  .install-entry { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: var(--touch-target); margin-block: var(--s3) 0; padding: var(--s2) var(--s4); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: var(--gold-soft); color: var(--text); font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
  .install-entry:hover { border-color: var(--gold); }
  @media (max-width: 767px) {
    .header-app { gap: var(--s2); min-height: calc(var(--s7) + var(--s3)); }
    .header-app__logo img { height: var(--s6); }
    .site-header--app .primary-navigation { flex: none; }
    .site-header--app .primary-navigation .btn { flex: none; }
    .info-bar__sub, .info-status[data-session-summary] { display: none; }
    .info-bar__status { gap: var(--s2); }
    /* Mobile overflow (r69): the page title was cut to "Z…"/"Beginner Gru…". On phones "kurz erklären?" becomes a round
       "?" control with the same accessible name (label visually hidden), styled like the central info trigger (the R4X
       mark the bar once had here is gone on every width since Paket Z2). */
    .info-bar__inner { gap: var(--s2); }
    .info-bar__context { align-items: center; gap: var(--s1); }
    .info-bar__title { flex: 0 1 auto; }
    .info-bar__tour { position: relative; flex: none; justify-content: center; min-width: var(--touch-target); text-decoration: none; }
    .info-bar__tour::before { content: '?'; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--gold-border); border-radius: var(--radius-pill); color: var(--gold); font-size: .875rem; font-weight: 700; line-height: 1; }
    .info-bar__tour:hover::before, .info-bar__tour:focus-visible::before { border-color: var(--gold); background: var(--gold-soft); }
    .info-bar__tour-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
  @media (max-width: 380px) {
    .header-app__logo img { height: 28px; }
    .site-header--app .primary-navigation .btn { padding-inline: var(--s1); }
  }
  /* Paket Q (BUG-041/BUG-044 at 320 px): logo, three head buttons and the menu were 13 px wider than a 320 px phone, so
     every page scrolled sideways. Below 360 px the head keeps all four with a tighter gap and a smaller logo. */
  @media (max-width: 359px) {
    .header-app { gap: var(--s1); }
    .header-app__logo img { height: var(--s5); }
  }
  html [hidden] { display: none; }
}

@layer layout {
  /* Paket V (Daniel 15.10.2026, "Hell bleibt hell"): the stage of Mein Bereich, a skin over the card it marks (layout
     layer, so it wins over the base look of the card). Light white to cream, dark the brand black (--stage-a, --stage-b);
     gold edge, a gold line on top and soft gold light. A picture of the card lies in --stage-picture and fades into the
     stage. --accent leads the area: gold frame with a halo and a brighter line. */
  .r4x-stage { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--gold-border); border-radius: var(--radius-card); background: var(--stage-picture, none), radial-gradient(70% 120% at 100% 0%, var(--gold-glow), transparent 58%), linear-gradient(160deg, var(--stage-a), var(--stage-b)); color: var(--text); box-shadow: var(--shadow-elevated); }
  .r4x-stage::before { content: ''; position: absolute; inset: 0 0 auto; z-index: 2; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); pointer-events: none; }
  .r4x-stage--accent { border-color: var(--gold); background: radial-gradient(80% 110% at 0% 0%, var(--gold-glow), transparent 55%), radial-gradient(60% 90% at 100% 100%, var(--gold-soft), transparent 70%), linear-gradient(160deg, var(--stage-a), var(--stage-b)); box-shadow: 0 0 0 4px var(--gold-soft), var(--shadow-elevated); }
  .r4x-stage--accent::before { height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-hover), var(--gold)); }
  /* The daily ritual card. Paket V (Daniel 15.10.2026, Verstehen des Tages C, "Hell bleibt hell"): it follows the theme on
     the stage surface; the r337 sunrise underlay fades into it from above and from the left, so streak and milestones stay
     on calm ground in both themes. While the impulse is open: the term large on the left, streak, week dots and milestones
     on the right; the r337 flight stands at the lower right edge. */
  .card-ritual {
    position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--gold-border); border-top: var(--s1) solid var(--gold);
    background: var(--stage-a); color: var(--text);
  }
  .card-ritual::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(180deg, var(--stage-a) 0%, color-mix(in srgb, var(--stage-a) 94%, transparent) 42%, transparent 82%),
      linear-gradient(90deg, var(--stage-a) 0%, color-mix(in srgb, var(--stage-a) 90%, transparent) 50%, transparent 100%),
      url('/assets/feature-carousel/ritual-underlay-v2163.webp') right bottom / cover no-repeat;
  }
  .card-ritual:has(> .ritual-body) {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "eye streak" "body dots" "body ladder" "body reward";
    grid-template-rows: auto auto auto 1fr; column-gap: var(--s7); row-gap: var(--s3); padding: var(--s7);
  }
  .card-ritual:has(> .ritual-body) > :is(.ritual-heading, .ritual-week) { display: contents; }
  .ritual-heading, .ritual-week { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
  .ritual-heading .eyebrow { grid-area: eye; display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
  .ritual-heading .eyebrow::before { display: none; }
  .ritual-heading > strong { grid-area: streak; justify-self: end; color: var(--accent-text); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
  .ritual-sun { width: var(--s5); height: var(--s5); flex: 0 0 var(--s5); fill: none; stroke: var(--accent-text); stroke-width: 1.6; }
  .ritual-dots { grid-area: dots; justify-self: end; display: flex; gap: var(--s2); }
  .ritual-dot { width: var(--s3); height: var(--s3); border: 1px solid var(--accent-text); border-radius: var(--radius-pill); }
  .ritual-dot.is-filled { background: var(--accent-text); box-shadow: 0 0 0 3px var(--gold-soft); }
  .ritual-dot.is-today { outline: 1px solid var(--accent-text); outline-offset: var(--s1); }
  .ritual-body { grid-area: body; }
  .ritual-body .r4x-stack { max-width: 48ch; grid-template-columns: minmax(0, 1fr); }
  .ritual-body h3 { margin: 0; }
  .ritual-body p { color: var(--text); font-size: 1.1875rem; line-height: 1.6; }
  /* Paket W (Daniel 15.10.2026): the explanation as the main text with a gold rule; the context of the day as a note of
     its own: surface, person symbol and the violet of personal relevance (r337 learning role). */
  .ritual-body .ritual-text { padding-inline-start: var(--s4); border-inline-start: 2px solid var(--gold); }
  .ritual-body .ritual-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s3); margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--learning-relevance-border); border-inline-start: 3px solid var(--learning-relevance); border-radius: var(--radius-control); background: linear-gradient(90deg, var(--learning-relevance-soft), transparent 78%), var(--surface); font-size: .9375rem; line-height: 1.5; }
  .ritual-note__icon { width: 1.25rem; height: 1.25rem; margin-top: 1px; fill: none; stroke: var(--learning-relevance); stroke-width: 1.6; stroke-linecap: round; }
  .ritual-kicker { display: block; margin-bottom: var(--s2); color: var(--text-muted); font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
  /* A long term breaks inside the card (hyphenation, then anywhere) instead of running past it. */
  .ritual-term { display: block; color: var(--accent-text); font-family: var(--font-beginner); font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); font-weight: 600; line-height: 1; overflow-wrap: anywhere; hyphens: auto; }
  .ritual-rocket { position: absolute; right: var(--s7); bottom: var(--s7); width: var(--s5); height: 48%; overflow: visible; fill: var(--accent-text); stroke: var(--accent-text); stroke-width: 1; }
  .ritual-rocket > line { stroke: var(--gold-border); }
  .ritual-rocket circle { fill: var(--stage-a); }
  .ritual-ladder { grid-area: ladder; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
  .ritual-ladder .btn { padding-inline: var(--s3); border: 1px solid var(--gold-border); border-radius: var(--radius-pill); font-size: .75rem; }
  .ritual-reward { grid-area: reward; }
  /* Paket X (Daniel 16.10.2026, UI-067): a day already done ends the card with its state and "Tagesimpuls schließen"
     beside it, below the text column (the flight keeps the right edge); on phones the action stands below the state. */
  .card-ritual:has(> .ritual-done) { grid-template-areas: "eye streak" "body dots" "body ladder" "body reward" "done ."; grid-template-rows: auto auto auto 1fr auto; }
  .ritual-done { grid-area: done; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding-top: var(--s4); border-top: 1px solid var(--gold-border); }
  .ritual-done__state { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; color: var(--text); font-weight: 700; }
  .ritual-done__icon { width: 1.375rem; height: 1.375rem; flex: none; fill: var(--gold-soft); stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  @media (max-width: 767px) {
    .card-ritual::before {
      background:
        linear-gradient(180deg, var(--stage-a) 0%, var(--stage-a) 62%, color-mix(in srgb, var(--stage-a) 82%, transparent) 80%, color-mix(in srgb, var(--stage-a) 30%, transparent) 100%),
        url('/assets/feature-carousel/ritual-underlay-v2163.webp') 92% 100% / 185% auto no-repeat;
    }
    .card-ritual:has(> .ritual-body) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eye" "streak" "dots" "ladder" "body" "reward"; grid-template-rows: none; padding: var(--s5); }
    .ritual-heading > strong { justify-self: start; font-size: 1.375rem; }
    .ritual-term { font-size: 2.125rem; }
    :is(.ritual-dots, .ritual-ladder) { justify-self: start; justify-content: flex-start; }
    .ritual-ladder .btn { padding-inline: var(--s2); }
    .ritual-body { position: relative; padding-right: var(--s7); }
    .ritual-rocket { top: 0; right: 0; bottom: auto; height: 100%; }
    .card-ritual:has(> .ritual-done) { grid-template-areas: "eye" "streak" "dots" "ladder" "body" "reward" "done"; }
    /* On phones the row lies on the sunrise of the underlay: a calm plate of the stage surface keeps it readable. */
    .ritual-done { flex-direction: column; align-items: flex-start; padding: var(--s4); border: 1px solid var(--gold-border); border-radius: var(--radius-control); background: color-mix(in srgb, var(--stage-a) 88%, transparent); }
  }  .ritual-discovery { width: 160px; max-width: 100%; height: 130px; fill: var(--gold-soft); stroke: var(--accent-text); stroke-width: 1.5; }
  .ritual-reward { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
  .r4x-stack { display: grid; gap: var(--s5); align-content: start; }
  /* Paket V (Features C): the arrows and the position bars steer the track; no scrollbar. */
  .feature-track { display: flex; position: relative; gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding-bottom: var(--s4); scrollbar-width: none; cursor: grab; }
  .feature-track::-webkit-scrollbar { display: none; }
  .feature-track[data-feature-dragging] { scroll-snap-type: none; user-select: none; cursor: grabbing; }
  /* BUG-038: r337 rule (r4x-feature-carousel.v2492): while the mouse drags, the card content takes no pointer events, so a
     drag that starts on a card image moves the track instead of starting the browser's native image drag. */
  .feature-track[data-feature-dragging] .feature-slide * { pointer-events: none; }
  .feature-slide { flex: 0 0 min(340px, 90%); min-width: 0; scroll-snap-align: start; }
  .feature-slide > .card { height: 100%; display: flex; flex-direction: column; gap: var(--s3); }
  .feature-slide > .card > .btn { margin-top: auto; }
  /* Mein Bereich area navigation (Daniel 11.10.2026): underlined tabs with an area icon on desktop; on phones a pager
     with four tappable bars. Hint dots come from the existing attention controller (data-has-attention). */
  .section-switch { display: none; }
  .section-tabs .tab-icon, .section-switch__bar { position: relative; }
  .section-tabs .tab-icon { display: inline-grid; }
  .section-tabs [role='tab'][data-has-attention='true'] .tab-icon::after, .section-switch__bar[data-has-attention='true']::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--info); }
  .section-tabs [role='tab'][data-has-attention='true'] .tab-icon::after { top: -3px; right: -5px; }
  .section-switch__bar[data-has-attention='true']::after { top: 2px; right: 2px; }
  /* r43 (Prüfliste A5): a new hint pulses twice, then rests. */
  .section-tabs [role='tab'][data-has-attention='true'] .tab-icon::after, .section-switch__bar[data-has-attention='true']::after { animation: attention-pulse calc(var(--motion-base) * 6) var(--ease-standard) 2; }
  @keyframes attention-pulse { 0% { box-shadow: 0 0 0 0 var(--info-border); } 70% { box-shadow: 0 0 0 var(--s2) transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
  @media (prefers-reduced-motion: reduce) { .section-tabs [role='tab'][data-has-attention='true'] .tab-icon::after, .section-switch__bar[data-has-attention='true']::after { animation: none; } }
  [data-home-section], [data-home-section] [id] { scroll-margin-top: 12rem; }
  @media (max-width: 767px) {
    .section-tabs { display: none; }
    .section-switch { display: grid; gap: var(--s1); }
    [data-section-workspace] { touch-action: pan-y pinch-zoom; }
  }
  .r4x-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
  .r4x-columns > * { min-width: 0; }
  /* Source page composition; colors, controls and surfaces retain central v18 tokens. */
  .cockpit-hero { margin-block: var(--s5) var(--s6); padding: var(--s6); }
  .cockpit-entry-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); gap: var(--s7); align-items: center; }
  .cockpit-entry-layout > * { min-width: 0; }
  /* r40 (r35 C07): r337 activation artifact (r4x-activation v2885): returner rows with icon, title, explanation and
     action; account rows in the info tone, backup rows in the success tone. */
  .entry-returner { display: grid; gap: var(--s3); }
  .entry-returner__head { display: grid; gap: var(--s1); }
  .entry-returner__head > * { margin: 0; }
  .entry-returner__head > p:last-child { color: var(--text-muted); font-size: .875rem; }
  .entry-returner b { color: var(--accent-text); font-weight: 600; }
  .entry-returner__preview { margin: 0; padding-left: var(--s5); font-size: .875rem; }
  .entry-returner__list { display: grid; gap: var(--s2); }
  .entry-returner__row { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
  .entry-returner__action { grid-column: 1 / -1; width: 100%; }
  .entry-returner__icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); color: var(--text-muted); }
  .entry-returner__copy { min-width: 0; }
  .entry-returner__copy strong { display: block; margin-bottom: var(--s1); font-size: .9rem; }
  .entry-returner__copy > span { display: block; color: var(--text-muted); font-size: .8125rem; line-height: 1.45; }
  .entry-returner__row--account { border-color: var(--info-border); background: var(--info-soft); }
  .entry-returner__row--account .entry-returner__icon { border-color: var(--info-border); color: var(--info); }
  .entry-returner__row--backup { border-color: var(--success-border); background: var(--success-soft); }
  .entry-returner__row--backup .entry-returner__icon { border-color: var(--success-border); color: var(--success); }
  .entry-returner__divider { display: flex; align-items: center; gap: var(--s2); margin: var(--s1) 0 0; color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .entry-returner__divider::before, .entry-returner__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .entry-returner__note { margin: 0; padding: var(--s3); border: 1px solid var(--success-border); border-radius: var(--radius-control); background: var(--success-soft); font-size: .8125rem; }
  /* minmax(0, 1fr): the welcome feature carousel must scroll inside the column instead of widening the page. */
  .cockpit-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); margin-block: var(--s7); }
  .cockpit-welcome > section { min-width: 0; }
  .cockpit-heading-link { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
  /* FINAL v18 section head: H2 at the global scale, lead in muted text directly below. */
  .cockpit-section-heading { margin-block: var(--s6) var(--s5); }
  .cockpit-section-heading :is(h2, h3) { margin: 0; }
  /* Paket X (UI-069): a subsection of an area (Marktimpulse Highlights in Portfolio & Markt) keeps its h3 and reads like
     the area title; a heading with an action carries it at its end (wraps below on narrow screens). */
  .cockpit-section-heading h3 { font-size: var(--type-section); line-height: 1.2; letter-spacing: -.03em; }
  .cockpit-section-heading--action { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); }
  .cockpit-section-heading > p { margin: var(--s2) 0 0; max-width: 72ch; color: var(--text-muted); }
  .cockpit-editorial { display: grid; gap: var(--s5); align-items: stretch; }
  /* Paket V (Daniel 15.10.2026, Portfolio B): one column, the area picture above the card; from 1024 px picture and card
     share one cell, the picture on the right side of the card (cockpit.css). */
  .cockpit-portfolio-layout { grid-template-columns: minmax(0, 1fr); }
  .cockpit-portfolio-layout > .cockpit-area-media--portfolio { aspect-ratio: 16 / 9; }
  @media (min-width: 1024px) {
    .cockpit-portfolio-layout > * { grid-area: 1 / 1; }
    .cockpit-portfolio-layout > .cockpit-area-media--portfolio { justify-self: end; align-self: start; width: 40%; height: 100%; max-height: 560px; aspect-ratio: auto; }
  }
  .cockpit-editorial > *, .cockpit-learning-layout > * { min-width: 0; }
  /* Paket V (Daniel 15.10.2026, Lernen B1): the R4X Kompass as a stage over the full width with Daniel's picture on its
     right (one cell, the picture above the card surface); the area picture stands beside the Wissensgedächtnis.
     Paket X (Daniel 16.10.2026, UI-068): Verstehen des Tages leads, the Wissensgedächtnis follows, the R4X Kompass ends
     the area (the same order in the document). */
  .cockpit-learning-layout { display: grid; grid-template-areas: "daily daily" "education memory" "kompass kompass"; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: var(--s5); align-items: stretch; }
  .cockpit-learning-layout > .cockpit-area-media { grid-area: education; height: auto; min-height: 260px; aspect-ratio: auto; }
  .cockpit-learning-layout > :is([data-compass], .cockpit-compass-media) { grid-area: kompass; }
  .cockpit-learning-layout > .cockpit-compass-media { justify-self: end; width: 36%; }
  .cockpit-learning-layout > [data-learning] { display: contents; }
  .cockpit-learning-layout [data-learning-memory] { grid-area: memory; min-width: 0; }
  .cockpit-learning-layout [data-learning-daily], .cockpit-learning-layout > [data-learning] > .status { grid-area: daily; min-width: 0; }
  .cockpit-learning-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4); }
  .cockpit-learning-summary-heading { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); }
  .cockpit-learning-summary h3, .cockpit-learning-summary p { margin-bottom: var(--s2); }
  .cockpit-learning-summary p { font-size: .875rem; }
  .cockpit-learning-summary .progress { margin-bottom: var(--s2); }
  .cockpit-market { margin-top: var(--s6); }
  .cockpit-discovery { margin-top: var(--s8); }
  .cockpit-portfolio-layout .r4x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-portfolio-overview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--s4); align-items: start; }
  .cockpit-portfolio-overview > * { min-width: 0; }
  .cockpit-snapshot-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .cockpit-snapshot-stats .metric { min-width: 0; padding: var(--s2); overflow-wrap: anywhere; }
  .cockpit-snapshot-stats .metric-label, .cockpit-snapshot-stats .metric-detail { font-size: .75rem; }
  .cockpit-snapshot-stats .metric-value { font-size: 1.125rem; }
  @media (max-width: 767px) {
    .cockpit-hero { padding: var(--s4); }
    .cockpit-learning-summary { grid-template-columns: minmax(0, 1fr); }
    .cockpit-entry-layout, .cockpit-editorial { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .cockpit-learning-layout { grid-template-areas: "daily" "education" "memory" "kompass"; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .cockpit-learning-layout > .cockpit-area-media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
    .cockpit-learning-layout > .cockpit-compass-media { align-self: start; justify-self: stretch; width: auto; height: calc(var(--s8) * 3); }
    .cockpit-portfolio-layout .r4x-grid { grid-template-columns: minmax(0, 1fr); }
    .cockpit-portfolio-overview { grid-template-columns: minmax(0, 1fr); }
    .cockpit-portfolio-layout .accordion-content { padding-inline: var(--s1); }
    .cockpit-snapshot-stats .metric { padding: var(--s1); }
    .cockpit-snapshot-stats .metric-value { font-size: .875rem; }
    .cockpit-discovery { margin-top: var(--s7); }
  }
  .otp-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s1); }
  .otp-fields .input { padding-inline: 0; text-align: center; }
  .otp-fields label { text-align: center; font-size: .75rem; }
  @media (max-width: 399px) { .otp-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 767px) {
    .r4x-columns { grid-template-columns: 1fr; }

  }
}