@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-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);
  }

  /* Paket U (Daniel 15.10.2026: "stärker und auffälliger … edel in Premium-Optik"): the situation choice is the leading
     action of the page; the picker is its largest control. The r337 shield stands in the area head only.
     Paket AE (UI-059 A, Variante C "Wahl zuerst auf der Bühne"): the card stands on the stage of the area heads: gold
     light top right, the theme-following stage tones ("Hell bleibt hell"), a gold frame and a gold edge on top. */
  .pruefen-launch {
    padding: clamp(var(--s5), 4vw, var(--s7));
    border-color: var(--gold-border);
    background:
      radial-gradient(70% 80% at 100% 0, var(--gold-glow), transparent 60%),
      linear-gradient(160deg, var(--stage-a), var(--stage-b));
    box-shadow: inset 0 3px 0 var(--gold), var(--shadow-elevated);
  }

  .pruefen-launch > h2 {
    margin: var(--s2) 0 var(--s3);
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
    line-height: 1.15;
  }

  .pruefen-launch > p:not(.eyebrow) {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.0625rem;
  }

  /* The three steps read as one path: numbered gold rings joined by the r337 arrows. */
  .r4x-pruefen-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s3);
    margin-block: var(--s5);
    counter-reset: pruefen-flow;
  }

  .r4x-pruefen-flow span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: var(--s2);
    color: var(--text);
    font-weight: 600;
  }

  .r4x-pruefen-flow span::before {
    counter-increment: pruefen-flow;
    content: counter(pruefen-flow);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--gold-soft);
    color: var(--accent-text);
    font-size: .8125rem;
    font-weight: 700;
  }

  /* Paket AE: the first step is where the reader stands, a gold disc with its word in the accent ink. */
  .r4x-pruefen-flow span:first-of-type {
    color: var(--accent-text);
  }

  .r4x-pruefen-flow span:first-of-type::before {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--button-text);
  }

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

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

  /* Paket U: the head of the choice only takes room while its reset action is shown (after a choice). */
  .r4x-primary-launch__select-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .r4x-primary-reset {
    min-height: var(--touch-target);
    margin-bottom: var(--s2);
  }

  /* Paket U: the choice itself is the strongest control of the page: gold frame, a gold halo and a lift on hover.
     Paket AE (UI-059 A): on the stage it is the bright field with a 2 px gold frame inside a wide gold light. */
  .r4x-intent-picker__trigger {
    display: flex;
    width: 100%;
    min-height: 88px;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s4) var(--s5);
    border: 2px solid var(--gold);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    box-shadow: 0 0 0 6px var(--gold-soft), 0 0 40px var(--gold-glow);
    transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
  }

  .r4x-intent-picker__trigger:hover,
  .r4x-intent-picker__trigger:focus-visible {
    box-shadow: 0 0 0 8px var(--gold-soft), 0 0 48px var(--gold-glow), var(--shadow-elevated);
    transform: translateY(-1px);
  }

  .r4x-intent-picker__trigger strong {
    font-size: 1.125rem;
  }

  /* The r337 "⌄" glyph sits low in its line; the ring draws the chevron itself and keeps the glyph for the markup. */
  .r4x-intent-picker__chevron {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--gold-soft);
    font-size: 0;
  }

  .r4x-intent-picker__chevron::before {
    content: '';
    width: var(--s2);
    height: var(--s2);
    margin-top: calc(var(--s1) * -1);
    border-right: 2px solid var(--accent-text);
    border-bottom: 2px solid var(--accent-text);
    transform: rotate(45deg);
  }

  .r4x-intent-picker__trigger[aria-expanded='true'] .r4x-intent-picker__chevron::before {
    margin-top: var(--s1);
    transform: rotate(-135deg);
  }

  /* Wide screens: the copy and the three steps on the left, the choice beside them as the anchor of the card; the first
     finding of a chosen situation spans the card below. */
  @media (min-width: 1024px) {
    .pruefen-launch {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--s7);
    }

    .pruefen-launch > :not(.r4x-primary-launch__select, .r4x-primary-launch__mount) {
      grid-column: 1;
    }

    .pruefen-launch > .r4x-primary-launch__select {
      grid-column: 2;
      grid-row: 1 / span 4;
    }

    .pruefen-launch > .r4x-primary-launch__mount {
      grid-column: 1 / -1;
    }

    .pruefen-launch > .r4x-pruefen-flow {
      margin-bottom: 0;
    }
  }

  /* Paket AE (UI-059 A): phones and tablets read title, choice, sentence and steps in that order (as in the markup). */
  @media (max-width: 1023px) {
    .pruefen-launch > .r4x-primary-launch__select {
      margin-top: var(--s3);
    }

    .pruefen-launch > p:not(.eyebrow) {
      margin-top: var(--s5);
    }

    .pruefen-launch > .r4x-pruefen-flow {
      margin-bottom: 0;
    }
  }

  .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;
  }

  /* Paket U: the question mark of the empty choice is a gold disc (button ink on gold, as the gold primary action). */
  .r4x-intent-picker__placeholder-mark {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--button-text);
    font-size: 1.25rem;
    font-weight: 700;
  }

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

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

  /* Paket AE (UI-059 Fenster, Situationsliste): head on the stage band with the gold edge, the list in a gold frame, the
     situations grouped under their category (named once per group), rows of at least 52 px with a 36 px symbol and an
     arrow in the accent ink. */
  .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(--gold-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-elevated), 0 0 0 4px var(--gold-soft);
  }

  .r4x-intent-picker__dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(160deg, var(--stage-a), var(--stage-b));
    box-shadow: inset 0 3px 0 var(--gold);
  }

  .r4x-intent-picker__dialog-head strong {
    font-size: 1.25rem;
  }

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

  .r4x-intent-picker__options {
    display: grid;
    align-content: start;
    gap: var(--s1);
    max-height: min(52vh, 28rem);
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--s2) var(--s4) var(--s4);
  }

  .r4x-intent-option-group {
    display: grid;
    gap: var(--s1);
  }

  .r4x-intent-option-group__title {
    margin: var(--s3) 0 var(--s1);
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--gold-border);
    color: var(--accent-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

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

  .r4x-intent-option__icon {
    width: calc(var(--s6) + var(--s1));
    height: calc(var(--s6) + var(--s1));
    flex-basis: calc(var(--s6) + var(--s1));
    padding: var(--s1);
  }

  .r4x-intent-option__icon img {
    width: var(--s5);
    height: var(--s5);
  }

  .r4x-intent-option__arrow {
    color: var(--accent-text);
  }

  .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 {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
  }

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

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

  /* Paket AE (UI-059 D, Daniel 17.10.2026, Variante C2 "Kategorie-Zeichen groß": "die Kategorie-Logos etwas größer als
     die Logos für die einzelnen Situationen, damit es eine schöne Übersicht und Hierarchie bekommt"): every group is one
     surface; its head stands on the stage band with a gold edge on top and carries the category symbol at 64 px in a gold
     ring. The situations follow as slim rows (36 px symbol, title, sign on the right), several columns from 20rem each.
     The paddings of these cards are set in the layout layer below, where the central card spacing lives. */
  .cockpit-intent-group {
    display: grid;
    gap: var(--s4);
    overflow: hidden;
  }

  .cockpit-intent-group__head {
    display: flex;
    align-items: center;
    gap: var(--s4);
    background: linear-gradient(160deg, var(--stage-a), var(--stage-b));
    box-shadow: inset 0 3px 0 var(--gold);
  }

  .cockpit-intent-group__icon {
    width: var(--s8);
    height: var(--s8);
    flex: 0 0 var(--s8);
    padding: var(--s2);
    border-color: var(--gold-border);
    box-shadow: 0 0 0 4px var(--gold-soft);
  }

  .cockpit-intent-group__icon img {
    width: calc(var(--s7) - var(--s1));
    height: calc(var(--s7) - var(--s1));
  }

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

  .cockpit-intent-group__title {
    font-size: 1.25rem;
  }

  .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%, 20rem), 1fr));
    gap: var(--s2);
  }

  .cockpit-situation {
    display: grid;
    min-height: var(--touch-target);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3);
    color: var(--text);
    text-decoration: none;
    box-shadow: none;
  }

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

  .cockpit-situation__icon {
    width: calc(var(--s6) + var(--s1));
    height: calc(var(--s6) + var(--s1));
    flex: 0 0 calc(var(--s6) + var(--s1));
    padding: var(--s1);
  }

  .cockpit-situation__icon img {
    width: var(--s5);
    height: var(--s5);
  }

  .cockpit-situation__title {
    font-size: 1rem;
    line-height: 1.35;
  }

  .cockpit-situation__type-v2566 {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .cockpit-situation--check-v2566 .cockpit-situation__type-v2566 {
    color: var(--accent-text);
  }

  #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);
  }

  /* Paket AE (UI-059 Fenster, Daniel 17.10.2026, Runde 2 B, "übersichtlich, gut führen, optisch hervorragend und edel"):
     the head of a window is its own rounded surface on the stage (gold frame, gold light, gold edge on top) with the way
     back, the category symbol large in a gold ring, the type as a sign, a large title, the subtitle in the accent ink
     and the situation sentence as its lead. */
  .intent-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s5);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-card);
    background:
      radial-gradient(70% 90% at 100% 0, var(--gold-glow), transparent 60%),
      linear-gradient(160deg, var(--stage-a), var(--stage-b));
    box-shadow: inset 0 3px 0 var(--gold);
  }

  .intent-modal-title {
    margin: 0;
    font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem);
    line-height: 1.15;
  }

  .intent-modal-sub {
    margin: var(--s2) 0 0;
    color: var(--accent-text);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .intent-modal-lead {
    max-width: 62ch;
    margin-top: var(--s3);
  }

  .intent-modal-lead > p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  /* Under a first finding the sentence leads the steps without a head of its own. */
  .r4x-intent-routing-lead {
    margin: 0 0 var(--s5);
  }

  .intent-modal-kicker {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s3);
    color: var(--accent-text);
    font-size: .8125rem;
    font-weight: 700;
  }

  /* Category and sign stay beside the symbol; on narrow heads the sign wraps below the category. */
  .intent-modal-kicker__copy {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
  }

  .intent-modal-kicker__icon {
    width: var(--s8);
    height: var(--s8);
    flex: 0 0 var(--s8);
    padding: var(--s2);
    border-color: var(--gold-border);
    box-shadow: 0 0 0 4px var(--gold-soft);
  }

  .intent-modal-kicker__icon img {
    width: calc(var(--s7) - var(--s1));
    height: calc(var(--s7) - var(--s1));
  }

  .r4x-intent-type--header-v2566 {
    min-height: 0;
    padding: 2px var(--s2);
    border-radius: var(--radius-pill);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .r4x-intent-type--check-v2566.r4x-intent-type--header-v2566 {
    border-color: var(--gold-border);
    background: var(--gold-soft);
    color: var(--accent-text);
  }

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

  .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-section-kicker-v2566,
  .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-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 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
  }

  .r4x-intent-card-v441 {
    display: grid;
    gap: var(--s3);
  }

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

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

  /* Paket AE _v2 (Daniel 17.10.2026, Fenster-Karten A "Ergebnis-Kasten"): the explanation stays first and quieter; "Das
     klärst du" is the outcome of the card, a gold box with a check disc (calm in the further steps). */
  .r4x-intent-benefit-v442 {
    margin: var(--s2) 0 0;
    color: var(--text-muted);
    font-size: .9375rem;
    line-height: 1.55;
  }

  .r4x-intent-route-copy-v2422 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--s3);
    margin: var(--s4) 0 0;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-control);
    background: var(--gold-soft);
    color: var(--text);
    line-height: 1.5;
  }

  .r4x-intent-route-copy-v2422 strong {
    display: block;
    margin-bottom: var(--s1);
    color: var(--accent-text);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .r4x-intent-route-icon-v2566 {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--s7);
    height: var(--s7);
    border: 1px solid var(--gold);
    border-radius: var(--radius-pill);
    background: var(--gold);
    color: var(--button-text);
  }

  .r4x-intent-route-icon-v2566 svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .r4x-intent-section--step-2 .r4x-intent-route-copy-v2422 {
    border-color: var(--border);
    background: var(--surface);
  }

  .r4x-intent-section--step-2 .r4x-intent-route-icon-v2566 {
    border-color: var(--gold-border);
    background: transparent;
    color: var(--accent-text);
  }

  .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-watch-body-v2422 ul {
    margin: 0;
    padding-left: var(--s5);
  }

  /* Paket AE (UI-059 Fenster): the two steps carry their number at the heading (1 a gold disc, 2 a calm ring); the leading
     card spans the width with a gold edge, the further cards are calm (central muted card, secondary action). */
  .r4x-intent-section--step .r4x-intent-section-heading-v2566 {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }

  .r4x-intent-section-step {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--s6);
    height: var(--s6);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-pill);
    background: var(--gold-soft);
    color: var(--accent-text);
    font-size: .875rem;
    font-weight: 700;
  }

  .r4x-intent-section--step-1 .r4x-intent-section-step {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--button-text);
  }

  .r4x-intent-section--step .r4x-intent-section-title-v441 {
    font-size: 1.125rem;
  }

  .r4x-intent-section--step-1 .r4x-intent-section-grid-v441 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Paket AE _v2: step 1 is the one place to look first (brighter card, gold glow); the further cards stay calm. */
  .r4x-intent-section--step-1 .r4x-intent-card-v2422 {
    border-color: var(--gold-border);
    background: var(--surface-strong);
    box-shadow: inset 0 3px 0 var(--gold), 0 0 0 1px var(--gold-border), 0 18px 48px var(--gold-glow);
  }

  .r4x-intent-section--step-2 .r4x-intent-card-v2422 {
    background: var(--surface-muted);
    box-shadow: none;
  }

  .r4x-intent-section--step-2 .r4x-intent-card-title-text-v449 {
    font-size: 1rem;
  }

  /* Paket AE ("Plus in der Karte", konsistent; _v2 quieter): the Plus part of a card's own plan entry, a footer line. */
  .r4x-intent-plus-line {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin: var(--s4) 0 0;
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: .8125rem;
  }

  .r4x-intent-plus-line .badge {
    flex: none;
  }

  /* A preview tool without a card of its own stays in the Plus box as a short line. */
  .r4x-intent-plus-list {
    display: grid;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .r4x-intent-plus-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s2);
    color: var(--text-muted);
    font-size: .875rem;
  }

  .r4x-intent-plus-list strong {
    color: var(--text);
  }

  .r4x-intent-plus-list__mark {
    color: var(--accent-text);
  }

  /* Paket AE _v2: the Plus box steps back behind the steps (window and the steps under a first finding). */
  .r4x-intent-plus-preview-v2423 {
    border-style: dashed;
    background: transparent;
  }

  .cockpit-intent-legacy .r4x-intent-plus-preview-v2423 {
    display: grid;
    gap: var(--s3);
  }

  .cockpit-intent-legacy .r4x-intent-plus-preview-link-v2423 {
    justify-self: start;
  }

  .cockpit-intent-legacy .r4x-intent-watch-v2422 {
    border-left: 3px solid var(--gold-border);
  }

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

  /* Paket AE _v2 (Direktcheck, Variante B "Zwei Kästen"): what the check does has a gold edge; "Wichtig" is its own
     warning box with a sign. The start spans the width. */
  .r4x-check-view > .intent-block--intro {
    border-color: var(--gold-border);
    box-shadow: inset 3px 0 0 var(--gold);
  }

  .r4x-check-limitation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s1) var(--s3);
    border-color: var(--warning);
    background: var(--warning-soft);
    box-shadow: inset 3px 0 0 var(--warning);
  }

  .r4x-check-limitation__sign {
    display: grid;
    grid-row: 1 / 3;
    place-items: center;
    width: var(--s7);
    height: var(--s7);
    border-radius: var(--radius-pill);
    background: var(--warning);
    color: var(--surface);
    font-weight: 800;
  }

  .r4x-check-limitation h3 {
    margin: 0;
    color: var(--warning);
    font-size: 1rem;
  }

  .r4x-check-limitation p {
    grid-column: 2;
    margin: 0;
    color: var(--text);
  }

  .r4x-check-nav--intro .r4x-check-btn--primary {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .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);
  }

  /* Paket AE _v2 (Daniel 17.10.2026, Ergebnis A "Farbleitsystem"): every tile and every group carries its category colour
     (open: warning, unclear: info, signal: danger, check again: gold, done: success); the ink of check again is the gold
     text tone. The default stands before the categories (before, the group default came after them and turned every
     group gold). */
  .r4x-check-result-nav__item,
  .r4x-check-result-block {
    --check-accent: var(--accent-text);
    --check-ink: var(--check-accent);
  }

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

  .r4x-check-result-nav__item[disabled] {
    border-top-color: var(--border);
    background: var(--surface);
    opacity: .6;
  }

  .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--finding,
  .r4x-check-result-block--finding,
  .r4x-check-result-block--help {
    --check-ink: var(--accent-text);
  }

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

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

  .r4x-check-result-nav__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
  }

  .r4x-check-result-nav__label {
    color: var(--text);
    font-size: .8125rem;
    font-weight: 600;
  }

  .r4x-check-result-block {
    display: grid;
    gap: var(--s3);
    border: 1px solid color-mix(in srgb, var(--check-accent) 40%, var(--border));
    border-left: 4px solid var(--check-accent);
    background: color-mix(in srgb, var(--check-accent) 6%, var(--surface-muted));
    scroll-margin-top: var(--s8);
  }

  .r4x-check-result-block__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--s7);
    height: var(--s7);
    border-radius: var(--radius-pill);
    background: var(--check-accent);
    color: var(--surface);
    font-weight: 800;
  }

  .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__head h4 {
    font-size: 1.125rem;
  }

  .r4x-check-result-block__count {
    display: grid;
    place-items: center;
    min-width: var(--s7);
    height: var(--s7);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--check-accent) 18%, var(--surface));
    color: var(--check-ink);
    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);
    box-shadow: var(--shadow-card);
  }

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

  .r4x-check-result-item__value--question {
    font-size: 1.0625rem;
    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);
  }

  /* The classification stays neutral; the next step ("Jetzt wichtig", "Nächster Schritt") is the coloured callout. */
  .r4x-check-result-item__resolution,
  .r4x-check-result-item__guidance {
    padding: var(--s3);
    border-radius: var(--radius-control);
  }

  .r4x-check-result-item__resolution {
    border: 1px solid var(--border-soft);
    background: var(--surface-muted);
  }

  .r4x-check-result-item__resolution .r4x-check-result-item__label--resolution {
    color: var(--text-muted);
  }

  .r4x-check-result-item__guidance {
    border-left: 3px solid var(--check-accent);
    background: color-mix(in srgb, var(--check-accent) 13%, var(--surface));
  }

  .r4x-check-result-item__guidance .r4x-check-result-item__guidance-label {
    color: var(--check-ink);
  }

  .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);
  }

  /* Paket AE _v2 (Daniel 17.10.2026, Formular A "Optional offen"): the required inputs in one framed panel with larger
     fields, optional parts set apart below with a dashed frame and the sign "Optional", then the check action with the
     shared quota cue as in the Monitor. */
  .r4x-primary-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
  }

  .r4x-primary-required {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4) var(--s5);
    align-items: start;
    padding: var(--s5);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: inset 0 3px 0 var(--gold), var(--shadow-elevated);
  }

  .r4x-primary-form--buy .r4x-primary-required,
  .r4x-primary-form--sell .r4x-primary-required {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, .8fr);
  }

  .r4x-primary-required .input {
    min-height: 56px;
    font-size: 1.0625rem;
  }

  .r4x-primary-required .r4x-primary-field label {
    font-size: .9375rem;
  }

  .r4x-primary-optional {
    padding: var(--s4) var(--s5);
    border: 1px dashed var(--border);
    border-radius: var(--radius-card);
    background: transparent;
  }

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

  /* Paket AH (UI-081): the field message sits in the grid of its field; the gap already spaces it. */
  .r4x-primary-field > .field-error {
    margin-top: 0;
  }

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

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

  .r4x-optional {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-inline-start: var(--s2);
    padding: 2px var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
  }

  .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-actions {
    grid-column: 1 / -1;
  }

  .r4x-primary-actions {
    display: grid;
    gap: var(--s3);
  }

  .r4x-primary-actions .r4x-quota-cue {
    margin: 0;
  }

  .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[hidden] {
    display: none;
  }

  .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: grid;
    gap: var(--s1);
    margin-bottom: var(--s4);
    color: var(--text-muted);
  }

  .r4x-primary-manual__intro > span {
    font-size: .875rem;
  }

  .r4x-primary-manual__intro strong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s1) 0;
    color: var(--text);
  }

  .r4x-primary-manual.r4x-primary-optional {
    border-style: dashed;
    background: transparent;
  }

  .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 {
  /* Paket AE (UI-059 D): the central card sets its padding in this layer (phones s4); the group surface and its rows
     replace it on every width. */
  .cockpit-intent-groups .cockpit-intent-group {
    padding: 0;
  }

  .cockpit-intent-group .cockpit-intent-group__head {
    padding: var(--s4) var(--s5);
  }

  .cockpit-intent-group .cockpit-intent-group__grid {
    padding: 0 var(--s4) var(--s4);
  }

  .cockpit-intent-group__grid .cockpit-situation {
    padding: var(--s3) var(--s4);
  }

  @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;
    }

    .r4x-intent-section-grid-v441,
    .r4x-primary-form--buy .r4x-primary-required,
    .r4x-primary-form--sell .r4x-primary-required,
    .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-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;
    }

    /* Paket AE _v2 (Ergebnis A): the tiles keep two columns on phones, so the five categories stay one overview. */
    .r4x-check-result-nav__item {
      min-height: 76px;
    }

    /* Paket AE _v2 (Formular A): on phones the check action spans the width, as in the Monitor. */
    .r4x-primary-submit {
      justify-self: stretch;
      justify-content: center;
    }

    .r4x-primary-required,
    .r4x-primary-optional {
      padding: var(--s4);
    }
  }

  @media (max-width: 480px) {
    .pruefen-launch,
    #intent-detail:not([hidden]) {
      padding: var(--s4);
    }

    /* Phones: the three steps stand side by side as three cells, number above the word; the arrows give way. */
    .r4x-pruefen-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--s2);
    }

    .r4x-pruefen-flow b {
      display: none;
    }

    .r4x-pruefen-flow span {
      flex-direction: column;
      font-size: .8125rem;
      text-align: center;
    }

    .r4x-intent-picker__trigger {
      min-height: 84px;
      padding: var(--s3) var(--s4);
    }

    .r4x-intent-picker__trigger strong {
      font-size: 1rem;
    }

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

    .intent-modal-header {
      align-items: stretch;
      flex-direction: column-reverse;
      padding: var(--s4);
    }

    .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;
    }
  }
}