@layer components {
  :root {
    --r4x-intent-picker-top: var(--s4);
    --r4x-intent-picker-bottom: var(--s3);
    --r4x-intent-picker-scroll-y: 0;
  }

  .pruefen-route,
  .pruefen-route * {
    min-width: 0;
  }

  .pruefen-hero,
  .pruefen-launch,
  #intent-detail:not([hidden]) {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
  }

  .pruefen-hero {
    position: relative;
    overflow: visible;
    padding: clamp(var(--s5), 4vw, var(--s7));
    background: linear-gradient(135deg, var(--surface), var(--surface-muted));
  }

  /* BUG-008/UI-044: like the Zentrale and Kompass heroes, the description stands visibly on wider screens and moves
     into the info control on phones; the same text is never shown twice. */
  .pruefen-hero > .info-popover {
    display: none;
    float: right;
  }

  @media (max-width: 767px) {
    .pruefen-hero > .info-popover {
      display: block;
    }

    .pruefen-hero__sub {
      display: none;
    }
  }





  /* r36 (r35 A07): the r337 Situationsrouter illustration (v988 .cockpit-intent-hero-card::before) stays behind the
     card. A surface veil keeps the text on the card surface; desktop shows the picture on the right, mobile above. */
  .pruefen-launch {
    --pruefen-launch-media: url("/assets/feature-carousel/feature-situationsrouter-card-v2.webp");
    --pruefen-launch-media-height: calc(var(--s8) * 6);
    padding: clamp(var(--s5), 3vw, var(--s6));
    border-color: var(--gold-border);
    background:
      linear-gradient(90deg, var(--surface), color-mix(in srgb, var(--surface) 60%, transparent) 30%, transparent 62%) right top / calc(var(--pruefen-launch-media-height) * 16 / 9) var(--pruefen-launch-media-height) no-repeat,
      linear-gradient(0deg, var(--surface), transparent 34%) right top / 100% var(--pruefen-launch-media-height) no-repeat,
      var(--pruefen-launch-media) right top / auto var(--pruefen-launch-media-height) no-repeat,
      var(--surface);
  }

  .pruefen-route .wordmark i {
    color: var(--text);
  }

  .r4x-pruefen-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-block: var(--s4) var(--s5);
  }

  .r4x-pruefen-flow span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: var(--s1) var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-muted);
  }

  .r4x-pruefen-flow b,
  .r4x-intent-picker__chevron {
    color: var(--accent-text);
  }

  .r4x-primary-launch__select {
    position: relative;
  }

  .r4x-primary-launch__select-head {
    display: flex;
    min-height: var(--touch-target);
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--s2);
  }

  .r4x-intent-picker__trigger {
    display: flex;
    width: 100%;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--tool-border);
    border-radius: var(--radius-control);
    background: var(--input);
    color: var(--text);
    font: inherit;
    text-align: left;
    box-shadow: var(--tool-shadow);
  }

  .r4x-intent-picker__trigger:hover {
    border-color: var(--gold-border);
    background: var(--surface-muted);
  }

  .r4x-intent-picker__placeholder,
  .r4x-intent-picker__selection {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .r4x-intent-picker__placeholder > span:last-child,
  .r4x-intent-picker__selection > span:last-of-type {
    display: flex;
    flex-direction: column;
  }

  /* r36 (r35 V07): the mark sits on the always white tool tile; its gold text token keeps AA in both themes. */
  .r4x-intent-picker__placeholder-mark {
    color: var(--tool-accent-text);
    font-weight: 700;
  }

  .r4x-intent-picker__trigger strong,
  .r4x-intent-option__copy strong {
    color: var(--text);
  }

  .r4x-intent-picker__trigger small,
  .r4x-intent-option__copy small,
  .r4x-intent-picker__empty {
    color: var(--text-muted);
  }

  .r4x-intent-picker__panel {
    position: absolute;
    z-index: var(--z-drawer);
    top: 100%;
    right: 0;
    left: 0;
    margin-top: var(--s2);
    overflow: hidden;
    border: 1px solid var(--tool-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-elevated);
  }

  .r4x-intent-picker__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .r4x-intent-picker__search {
    padding: var(--s4);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-muted);
  }

  .r4x-intent-picker__options {
    max-height: min(52vh, 28rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--s2);
  }

  .r4x-intent-picker__options button[role='option'] {
    display: grid;
    width: 100%;
    min-height: 60px;
    grid-template-columns: var(--touch-target) minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    padding: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
  }

  .r4x-intent-picker__options button[role='option']:hover,
  .r4x-intent-picker__options button[role='option'][aria-selected='true'] {
    border-color: var(--gold-border);
    background: var(--gold-soft);
  }

  .r4x-intent-option__copy {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }

  .r4x-intent-picker__empty {
    margin: 0;
    padding: var(--s5);
    text-align: center;
  }

  .pruefen-emergency {
    display: grid;
    width: 100%;
    min-height: 80px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4);
    border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    color: var(--text);
    font: inherit;
    text-align: left;
  }

  .pruefen-emergency:hover {
    border-color: var(--danger);
  }

  .pruefen-emergency > span,
  .pruefen-direct span,
  .pruefen-guides a > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }

  .pruefen-emergency small,
  .pruefen-direct small,
  .pruefen-guides small {
    color: var(--text-muted);
  }

  .cockpit-intent-groups {
    display: grid;
    gap: var(--s5);
  }

  .cockpit-intent-group {
    display: grid;
    gap: var(--s4);
  }

  .cockpit-intent-group__head {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .cockpit-intent-group__title,
  .cockpit-situation__title {
    margin: 0;
  }

  .cockpit-intent-group__sub {
    margin: var(--s1) 0 0;
    color: var(--text-muted);
  }

  .cockpit-grid--situations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--s3);
  }

  .cockpit-situation {
    display: grid;
    min-height: 9rem;
    align-content: start;
    gap: var(--s3);
    color: var(--text);
    text-decoration: none;
  }

  .cockpit-situation:hover {
    border-color: var(--gold-border);
  }

  .cockpit-situation__top-v2566 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
  }

  .cockpit-situation__type-v2566 {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .pruefen-direct,
  .pruefen-guides {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
  }

  .pruefen-direct > a,
  .pruefen-guides > a {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
  }

  .pruefen-direct > a:hover,
  .pruefen-guides > a:hover {
    border-color: var(--gold-border);
  }

  /* r69 design pass: the topic symbol sits in a quiet frame at the top, the "Nach dem …" context reads as eyebrow. */
  .pruefen-guides > a {
    align-items: start;
  }

  .pruefen-guides > a > span:first-child {
    display: grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    background: var(--surface-muted);
    font-size: 1.375rem;
  }

  .pruefen-guides > a > span:nth-child(2) > small:first-child {
    color: var(--accent-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .pruefen-guides > a > span:last-child {
    align-self: center;
    color: var(--accent-text);
  }

  .pruefen-direct img {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .pruefen-guides p {
    margin: var(--s1) 0;
  }

  #intent-detail:not([hidden]) {
    overflow: hidden;
    padding: clamp(var(--s4), 3vw, var(--s6));
    border-color: var(--gold-border);
  }

  .intent-modal.cockpit-intent-inline {
    position: static;
    display: block;
  }

  .cockpit-intent-inline .intent-modal-card {
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  .intent-modal-card {
    color: var(--text);
  }

  .intent-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--border);
  }

  .intent-modal-title {
    margin: var(--s2) 0;
  }

  .intent-modal-sub {
    margin: 0;
    color: var(--text-muted);
  }

  .intent-modal-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    color: var(--accent-text);
    font-size: .78rem;
    font-weight: 700;
  }

  .intent-modal-body {
    display: grid;
    gap: var(--s5);
    padding-top: var(--s5);
  }

  .r4x-intent-context-v2422,
  .intent-block,
  .r4x-intent-plus-preview-v2423,
  .r4x-check-result-overview,
  .r4x-check-result-block,
  .r4x-primary-status,
  .r4x-primary-manual,
  .r4x-pool-limit {
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
  }

  .r4x-intent-context-label-v2422,
  .r4x-intent-section-kicker-v2566,
  .r4x-intent-plus-preview-label-v2423,
  .r4x-result__kicker,
  .r4x-result__label,
  .r4x-check-result-overview__eyebrow,
  .r4x-check-result-item__label,
  .r4x-check-result-item__guidance-label {
    color: var(--accent-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .r4x-intent-context-v2422 p:last-child,
  .r4x-intent-plus-preview-intro-v2423,
  .r4x-check-result-block__intro,
  .r4x-check-result-overview__summary {
    margin-bottom: 0;
    color: var(--text-muted);
  }

  .r4x-intent-context-chips-v2566,
  .r4x-pool-limit__actions,
  .r4x-check-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .r4x-intent-context-chips-v2566 {
    margin-top: var(--s3);
  }

  .r4x-intent-context-chips-v2566 span {
    padding: var(--s1) var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .75rem;
  }

  .r4x-intent-type--check-v2566 {
    color: var(--info);
  }

  .r4x-intent-type--guide-v2566 {
    color: var(--accent-text);
  }

  .intent-modal-actions,
  .r4x-intent-section-v441 {
    display: grid;
    gap: var(--s4);
  }

  .r4x-intent-section-title-v441,
  .r4x-intent-plus-preview-head-v2423 h3 {
    margin: 0;
  }

  .r4x-intent-section-grid-v441,
  .r4x-intent-plus-preview-grid-v2423 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
  }

  .r4x-intent-card-v441,
  .r4x-intent-plus-preview-item-v2423 {
    display: grid;
    gap: var(--s3);
  }

  .r4x-intent-card--numbered-v2423 {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .r4x-intent-step-v2422 {
    color: var(--accent-text);
    font-weight: 700;
  }

  .r4x-intent-card-title-v449 {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0;
  }

  .r4x-intent-card-title-text-v449 {
    flex: 1;
  }

  .r4x-intent-benefit-v442,
  .r4x-intent-route-copy-v2422 {
    margin: var(--s3) 0 0;
    color: var(--text-muted);
  }

  .r4x-intent-route-copy-v2422 {
    display: flex;
    gap: var(--s2);
  }

  .r4x-intent-route-icon-v2566 {
    flex: 0 0 20px;
    color: var(--accent-text);
  }

  .r4x-intent-route-icon-v2566 svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
  }

  .r4x-intent-card-action-v2422 {
    grid-column: 1 / -1;
  }

  .r4x-intent-plus-preview-head-v2423 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3);
  }

  .r4x-intent-plus-preview-item-v2423 {
    grid-template-columns: var(--touch-target) minmax(0, 1fr);
    align-items: center;
  }

  .r4x-intent-plus-preview-item-v2423 > span:last-child {
    display: flex;
    flex-direction: column;
  }

  .r4x-intent-plus-preview-item-v2423 small {
    color: var(--text-muted);
  }

  .r4x-intent-watch-body-v2422 ul {
    margin: 0;
    padding-left: var(--s5);
  }

  .r4x-check-view {
    display: grid;
    gap: var(--s5);
    outline: none;
  }

  .r4x-check-limitation {
    border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  }

  .r4x-check-resume-note {
    margin: 0;
    color: var(--accent-text);
    font-weight: 700;
  }

  .r4x-check-progress {
    display: grid;
    gap: var(--s2);
  }

  .r4x-check-progress__text {
    margin: 0;
    color: var(--text-muted);
    font-size: .8125rem;
  }

  .r4x-check-progress__track,
  .r4x-check-distribution__track {
    height: var(--s2);
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
  }

  .r4x-check-progress__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--gold);
  }

  .r4x-check-step {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .r4x-check-question {
    margin-bottom: var(--s2);
    font-size: 1.25rem;
    font-weight: 600;
  }

  .r4x-check-hint {
    color: var(--text-muted);
  }

  .r4x-check-options {
    display: grid;
    gap: var(--s2);
  }

  .r4x-check-option {
    position: relative;
    display: block;
  }

  .r4x-check-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .r4x-check-option__box {
    display: flex;
    min-height: var(--touch-target);
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
  }

  .r4x-check-option:hover .r4x-check-option__box,
  .r4x-check-option__input:checked + .r4x-check-option__box {
    border-color: var(--gold-border);
    background: var(--gold-soft);
  }

  .r4x-check-option__input:focus-visible + .r4x-check-option__box {
    outline: 2px solid var(--accent-text);
    outline-offset: var(--s1);
  }

  .r4x-check-option__mark {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--input);
  }

  .r4x-check-option__input:checked + .r4x-check-option__box .r4x-check-option__mark {
    border-color: var(--gold);
    background: var(--gold);
  }

  .r4x-check-option__input:checked + .r4x-check-option__box .r4x-check-option__mark::after {
    content: '';
    width: var(--s2);
    height: var(--s2);
    border-radius: var(--radius-pill);
    background: var(--button-text);
  }

  .r4x-check-nav {
    justify-content: flex-end;
  }

  .r4x-check-result-title {
    margin: 0;
  }

  .r4x-check-result-overview {
    display: grid;
    gap: var(--s3);
    border-color: var(--gold-border);
  }

  .r4x-check-result-overview__complete {
    display: grid;
    gap: var(--s1);
  }

  .r4x-check-distribution {
    display: grid;
    gap: var(--s2);
  }

  .r4x-check-distribution__track {
    display: flex;
  }

  .r4x-check-distribution__segment--pending {
    background: var(--warning);
  }

  .r4x-check-distribution__segment--unclear {
    background: var(--info);
  }

  .r4x-check-distribution__segment--signal {
    background: var(--danger);
  }

  .r4x-check-distribution__segment--finding {
    background: var(--gold);
  }

  .r4x-check-distribution__segment--documented {
    background: var(--success);
  }

  .r4x-check-distribution > span {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .r4x-check-result-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s2);
  }

  .r4x-check-result-nav__item {
    --check-accent: var(--accent-text);
    position: relative;
    display: grid;
    gap: var(--s1);
    min-height: 92px;
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    text-align: left;
  }

  .r4x-check-result-nav__item--pending,
  .r4x-check-result-block--pending {
    --check-accent: var(--warning);
  }

  .r4x-check-result-nav__item--unclear,
  .r4x-check-result-block--unclear {
    --check-accent: var(--info);
  }

  .r4x-check-result-nav__item--signal,
  .r4x-check-result-block--signal {
    --check-accent: var(--danger);
  }

  .r4x-check-result-nav__item--finding,
  .r4x-check-result-block--finding,
  .r4x-check-result-block--help {
    --check-accent: var(--gold);
  }

  .r4x-check-result-nav__item--documented,
  .r4x-check-result-block--documented {
    --check-accent: var(--success);
  }

  .r4x-check-result-nav__item:not([disabled]):hover {
    border-color: var(--check-accent);
  }

  .r4x-check-result-nav__icon,
  .r4x-check-result-block__icon,
  .r4x-check-result-nav__value {
    color: var(--check-accent);
  }

  .r4x-check-result-nav__label {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .r4x-check-result-block {
    --check-accent: var(--accent-text);
    display: grid;
    gap: var(--s3);
    border-left: 3px solid var(--check-accent);
    scroll-margin-top: var(--s8);
  }

  .r4x-check-result-block.is-jump-target {
    outline: 2px solid var(--check-accent);
    outline-offset: var(--s1);
  }

  .r4x-check-result-block__head {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .r4x-check-result-block__head h3,
  .r4x-check-result-block__head h4,
  .r4x-check-result-block > h3 {
    flex: 1;
    margin: 0;
  }

  .r4x-check-result-block__count {
    color: var(--check-accent);
    font-weight: 700;
  }

  .r4x-check-result-list {
    display: grid;
    gap: var(--s3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .r4x-check-result-item {
    display: grid;
    gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .r4x-check-result-item__row {
    display: grid;
    gap: var(--s1);
  }

  .r4x-check-result-item__value--question {
    font-weight: 600;
  }

  .r4x-check-result-item__answer-chip {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: var(--s1) var(--s2);
    border-radius: var(--radius-badge);
    background: var(--surface-strong);
  }

  .r4x-check-result-item__detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
  }

  .r4x-check-result-item__resolution,
  .r4x-check-result-item__guidance {
    padding: var(--s3);
    border-radius: var(--radius-control);
    background: var(--surface-muted);
  }

  .r4x-check-result-item__notices,
  .r4x-check-result-item__guidance-list {
    margin: var(--s2) 0 0;
    padding-left: var(--s5);
  }

  .r4x-check-documented-details > summary {
    min-height: var(--touch-target);
    color: var(--accent-text);
  }

  .r4x-check-emergency-cta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    color: var(--text);
    text-decoration: none;
  }

  .r4x-check-emergency-cta small {
    color: var(--text-muted);
  }

  .r4x-check-result-disclaimer {
    margin: 0;
    color: var(--text-muted);
    font-size: .8125rem;
  }

  .r4x-primary-launch__mount:not(:empty),
  .r4x-primary {
    display: grid;
    gap: var(--s5);
  }

  .r4x-primary {
    margin-top: var(--s5);
    padding-top: var(--s5);
    border-top: 1px solid var(--border);
  }

  .r4x-primary-form {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .8fr);
    gap: var(--s5);
    align-items: start;
  }

  .r4x-primary-form--apr,
  .r4x-primary-form--stake,
  .r4x-primary-form--token_identity {
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr);
  }

  .r4x-primary-field {
    display: grid;
    gap: var(--s2);
  }

  .r4x-primary-field label,
  .r4x-primary-currencies legend,
  .r4x-primary-choice legend {
    font-size: .8125rem;
    font-weight: 600;
  }

  .r4x-primary-field small,
  .r4x-optional {
    color: var(--text-muted);
    font-size: .8125rem;
  }

  .r4x-primary-money,
  .r4x-primary-percent-input,
  .r4x-primary-combobox {
    position: relative;
  }

  .r4x-primary-money > span,
  .r4x-primary-percent-input > span {
    position: absolute;
    z-index: 1;
    top: 50%;
    color: var(--text-muted);
    font-weight: 600;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .r4x-primary-money > span {
    left: var(--s3);
  }

  .r4x-primary-money .input {
    padding-left: var(--s7);
  }

  .r4x-primary-percent-input > span {
    right: var(--s3);
  }

  .r4x-primary-percent-input .input {
    padding-right: var(--s7);
  }

  .r4x-primary-search {
    position: absolute;
    z-index: var(--z-drawer);
    top: calc(100% + var(--s2));
    right: 0;
    left: 0;
    max-height: 20rem;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--tool-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-elevated);
  }

  .r4x-primary-search__head {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .r4x-primary-search > div[role='listbox'] {
    padding: var(--s2);
  }

  .r4x-primary-search button[role='option'] {
    display: grid;
    width: 100%;
    min-height: 56px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: var(--s3);
    padding: var(--s2);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text);
    text-align: left;
  }

  .r4x-primary-search button[role='option']:hover,
  .r4x-primary-search button[role='option']:focus-visible {
    border-color: var(--gold-border);
    background: var(--gold-soft);
  }

  .r4x-primary-search img,
  .r4x-primary-search__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: var(--radius-control);
    background: var(--tool-surface);
    object-fit: contain;
  }

  .r4x-primary-search__copy {
    display: flex;
    flex-direction: column;
  }

  .r4x-primary-search__copy small,
  .r4x-primary-search__empty {
    color: var(--text-muted);
  }

  .r4x-primary-search__empty {
    padding: var(--s4);
  }

  .r4x-primary-selected-asset,
  .r4x-primary-holding {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s2);
    padding: var(--s3);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-control);
    background: var(--gold-soft);
  }

  .r4x-primary-selected-asset > img,
  .r4x-primary-selected-asset__fallback {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: var(--radius-control);
    background: var(--tool-surface);
    object-fit: contain;
  }

  .r4x-primary-selected-asset__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .r4x-primary-selected-asset__copy span,
  .r4x-primary-holding small,
  .r4x-primary-holding__meta {
    color: var(--text-muted);
    font-size: .8125rem;
  }

  .r4x-primary-currencies,
  .r4x-primary-choice,
  .r4x-primary-status,
  .r4x-primary-manual,
  .r4x-primary-submit,
  .r4x-primary-error {
    grid-column: 1 / -1;
  }

  .r4x-primary-currencies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .r4x-primary-currencies legend {
    margin-right: var(--s2);
  }

  .r4x-primary-status {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .r4x-primary-status__dot {
    width: var(--s2);
    height: var(--s2);
    flex: 0 0 var(--s2);
    border-radius: var(--radius-pill);
    background: var(--info);
  }

  .r4x-primary-status__copy,
  .r4x-primary-holding__main,
  .r4x-primary-holding__meta {
    display: flex;
    flex-direction: column;
  }

  .r4x-primary-status__copy span {
    color: var(--text-muted);
  }

  .r4x-primary-manual__intro {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s4);
    color: var(--text-muted);
  }

  .r4x-primary-manual__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
  }

  .r4x-primary-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .r4x-primary-choice legend {
    grid-column: 1 / -1;
  }

  .r4x-primary-choice label {
    position: relative;
  }

  .r4x-primary-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .r4x-primary-choice label > span {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
  }

  .r4x-primary-choice label > span small {
    color: var(--text-muted);
  }

  .r4x-primary-choice input:checked + span {
    border-color: var(--gold-border);
    background: var(--gold-soft);
  }

  .r4x-primary-choice input:focus-visible + span {
    outline: 2px solid var(--accent-text);
    outline-offset: var(--s1);
  }

  .r4x-primary-submit {
    justify-self: start;
  }

  .r4x-primary-error {
    margin: 0;
    padding: var(--s3);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
    color: var(--text);
  }

  .r4x-primary-result {
    display: grid;
    gap: var(--s4);
    padding: var(--s4);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
    scroll-margin-top: var(--s8);
  }

  .r4x-result__summary,
  .r4x-result__top,
  .r4x-result-asset,
  .r4x-result-stress__head,
  .r4x-before-after,
  .r4x-break-even-shift,
  .r4x-result-next a {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .r4x-result__summary,
  .r4x-result-stress__head,
  .r4x-break-even-shift {
    justify-content: space-between;
  }

  .r4x-result-asset__image,
  .r4x-result-asset__fallback {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border: 1px solid var(--tool-border);
    border-radius: var(--radius-control);
    background: var(--tool-surface);
    object-fit: contain;
  }

  .r4x-result-asset__copy {
    display: flex;
    flex-direction: column;
  }

  .r4x-result-asset__copy span,
  .r4x-result__lead,
  .r4x-result__delta,
  .r4x-direction-note,
  .r4x-result__assumption,
  .r4x-evidence-empty,
  .r4x-identity-card__id {
    color: var(--text-muted);
  }

  .r4x-result__amount {
    font-size: clamp(1.25rem, 3vw, 2rem);
    white-space: nowrap;
  }

  .r4x-result__finding,
  .r4x-result-stress,
  .r4x-evidence-zone,
  .r4x-identity-card {
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-muted);
  }

  .r4x-metric-grid,
  .r4x-evidence-list,
  .r4x-result-next__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s3);
  }

  .r4x-result-metric,
  .r4x-direction,
  .r4x-evidence-list li {
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
  }

  .r4x-before-after {
    justify-content: space-between;
  }

  .r4x-before-after > div:not(.r4x-before-after__arrow) {
    display: flex;
    flex-direction: column;
  }

  .r4x-before-after span,
  .r4x-direction dt {
    color: var(--text-muted);
    font-size: .75rem;
  }

  .r4x-stress-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .r4x-direction-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
  }

  .r4x-direction header,
  .r4x-direction > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
  }

  .r4x-direction dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s2);
  }

  .r4x-direction dd {
    margin: 0;
    font-weight: 700;
  }

  .r4x-direction--down header strong,
  .r4x-direction--down dd {
    color: var(--danger);
  }

  .r4x-direction--up header strong,
  .r4x-direction--up dd {
    color: var(--success);
  }

  .r4x-evidence-list {
    margin: var(--s3) 0 0;
    padding: 0;
    list-style: none;
  }

  .r4x-evidence-list li {
    display: flex;
    flex-direction: column;
  }

  .r4x-open-points {
    margin-top: var(--s3);
    padding: var(--s3);
    border-left: 3px solid var(--info);
    background: var(--surface);
  }

  .r4x-result-next {
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
  }

  .r4x-result-next a {
    color: var(--text);
    text-decoration: none;
  }

  .r4x-result-next a:hover {
    border-color: var(--gold-border);
  }

  .r4x-result-next__copy {
    display: flex;
    flex-direction: column;
  }

  .r4x-result-next__copy span {
    color: var(--text-muted);
  }

  .r4x-pool-limit__actions {
    margin-top: var(--s4);
  }

  .r4x-pool-limit__reset {
    color: var(--text-muted);
  }
}

@layer layout {
  @media (max-width: 900px) {
    .r4x-check-result-nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .r4x-check-result-nav__item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .r4x-metric-grid,
    .r4x-evidence-list,
    .r4x-result-next__links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 767px) {
    html.r4x-intent-picker-open,
    body.r4x-intent-picker-open {
      overflow: hidden;
      overscroll-behavior: none;
    }

    body.r4x-intent-picker-open {
      position: fixed;
      top: var(--r4x-intent-picker-scroll-y, 0);
      right: 0;
      left: 0;
      width: 100%;
    }

    .r4x-intent-picker__backdrop:not([hidden]) {
      position: fixed;
      z-index: calc(var(--z-modal) - 1);
      inset: 0;
      background: var(--overlay);
    }

    .r4x-intent-picker__panel {
      position: fixed;
      z-index: var(--z-modal);
      top: max(var(--r4x-intent-picker-top, var(--s4)), env(safe-area-inset-top));
      right: var(--s3);
      bottom: max(var(--r4x-intent-picker-bottom, var(--s3)), env(safe-area-inset-bottom));
      left: var(--s3);
      display: grid;
      min-height: 0;
      grid-template-rows: auto auto minmax(0, 1fr);
      margin: 0;
    }

    .r4x-intent-picker__options {
      max-height: none;
      min-height: 0;
    }

    .pruefen-direct,
    .pruefen-guides,
    .r4x-intent-section-grid-v441,
    .r4x-intent-plus-preview-grid-v2423,
    .r4x-primary-form,
    .r4x-primary-form--apr,
    .r4x-primary-form--stake,
    .r4x-primary-form--token_identity,
    .r4x-primary-manual__grid,
    .r4x-primary-choice,
    .r4x-direction-grid,
    .r4x-check-result-item__detail-grid,
    .r4x-metric-grid,
    .r4x-evidence-list,
    .r4x-result-next__links {
      grid-template-columns: minmax(0, 1fr);
    }

    .pruefen-emergency {
      grid-template-columns: 48px minmax(0, 1fr);
    }

    .pruefen-emergency > span:last-child {
      grid-column: 1 / -1;
    }

    .r4x-primary-manual__intro,
    .r4x-result__summary,
    .r4x-result-stress__head,
    .r4x-break-even-shift {
      align-items: flex-start;
      flex-direction: column;
    }

    .r4x-primary-search {
      position: fixed;
      z-index: var(--z-modal);
      top: max(var(--s4), env(safe-area-inset-top));
      right: var(--s3);
      bottom: max(var(--s3), env(safe-area-inset-bottom));
      left: var(--s3);
      max-height: none;
    }

    .r4x-check-nav .btn {
      flex: 1;
    }

    .r4x-check-result-nav {
      grid-template-columns: minmax(0, 1fr);
    }

    .r4x-check-result-nav__item:last-child:nth-child(odd) {
      grid-column: auto;
    }
  }

  @media (max-width: 480px) {
    .pruefen-route {
      gap: var(--s4);
    }

    .pruefen-launch,
    #intent-detail:not([hidden]) {
      padding: var(--s4);
    }

    .r4x-pruefen-flow {
      gap: var(--s1);
    }

    .r4x-pruefen-flow span {
      padding-inline: var(--s2);
      font-size: .75rem;
    }

    .cockpit-grid--situations {
      grid-template-columns: minmax(0, 1fr);
    }

    .pruefen-direct > a,
    .pruefen-guides > a {
      grid-template-columns: var(--touch-target) minmax(0, 1fr) auto;
    }

    .intent-modal-header {
      align-items: stretch;
      flex-direction: column-reverse;
    }

    .intent-modal-close {
      align-self: flex-start;
    }

    .r4x-check-emergency-cta {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .r4x-check-emergency-cta small {
      grid-column: 1 / -1;
    }
  }

  /* r36: mobile shows the Situationsrouter picture above the text (after the 480 px padding rule on purpose). */
  @media (max-width: 760px) {
    .pruefen-launch {
      --pruefen-launch-media-height: 56vw;
      padding-top: 46vw;
      background:
        linear-gradient(180deg, transparent 45%, var(--surface)) center top / 100% var(--pruefen-launch-media-height) no-repeat,
        var(--pruefen-launch-media) center top / 100% auto no-repeat,
        var(--surface);
    }
  }
}