/*! NBC v7.388 · Process Reality Mobile/Tablet Repair · isolated */

/* Tablet: the comparison is interactive, therefore both controls remain proper touch targets. */
@media (max-width:980px){
  #sollweg-echtweg [data-process-reality-app="v6416"] .pr-compare-toggle button{
    min-height:44px!important;
    padding:10px 14px!important;
    font-size:10.5px!important;
    line-height:1.15!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .pr-process-picker button{
    min-height:46px!important;
    font-size:12.5px!important;
    line-height:1.3!important;
  }
}

/* Mobile P0: semantic meaning belongs above the route, never inside the narrow route column. */
@media (max-width:620px){
  /* Prevent a one-frame flash in the historical 76/102px visual rail while JS relocates semantics. */
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-visual > .rf-process-semantic{
    visibility:hidden!important;
    opacity:0!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow > .rf-process-semantic.rf-process-semantic--mobile-rail{
    visibility:visible!important;
    opacity:1!important;
  }

  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .rf-process-semantic.rf-process-semantic--mobile-rail{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0 0 10px!important;
    padding:0!important;
    transform:none!important;
    pointer-events:none!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic--mobile-rail .rf-process-semantic-item{
    min-width:0!important;
    padding:8px 8px 9px!important;
    border:1px solid rgba(183,211,196,.14)!important;
    border-top-width:2px!important;
    border-radius:7px!important;
    background:rgba(9,23,15,.72)!important;
    text-align:left!important;
    overflow:hidden!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic--mobile-rail .rf-process-semantic-item small{
    display:block!important;
    min-width:0!important;
    margin:0 0 4px!important;
    color:rgba(211,226,215,.70)!important;
    font:650 9.5px/1.25 var(--mono,'IBM Plex Mono',monospace)!important;
    letter-spacing:.055em!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic--mobile-rail .rf-process-semantic-item strong{
    display:block!important;
    min-width:0!important;
    color:#eef3ef!important;
    font:600 11.5px/1.28 Archivo,Arial,sans-serif!important;
    letter-spacing:-.01em!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
  }

  /* The route itself gets the intended width. Older 76 px rules must not win the cascade. */
  html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-diagram{
    display:grid!important;
    grid-template-columns:102px minmax(0,1fr)!important;
    gap:12px!important;
    min-width:0!important;
    overflow:visible!important;
  }
  html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-visual{
    grid-column:1!important;
    width:102px!important;
    min-width:102px!important;
    max-width:102px!important;
    height:510px!important;
    overflow:hidden!important;
  }
  html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-labels{
    grid-column:2!important;
    width:auto!important;
    min-width:0!important;
    height:510px!important;
  }

  /* Critical mobile microcopy stays legible; no 6–9 px UI labels. */
  #sollweg-echtweg [data-process-reality-app="v6416"] .pr-mobile-step-index{
    font-size:10.5px!important;
    line-height:1.25!important;
    letter-spacing:.09em!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-flow-key{
    gap:10px!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-flow-key small{
    margin-left:0!important;
    font-size:10px!important;
    line-height:1.35!important;
  }
}

@media (max-width:380px){
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .rf-process-semantic.rf-process-semantic--mobile-rail{
    gap:5px!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic--mobile-rail .rf-process-semantic-item{
    padding-inline:7px!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic--mobile-rail .rf-process-semantic-item small{
    font-size:9px!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic--mobile-rail .rf-process-semantic-item strong{
    font-size:11px!important;
  }
}

/* Legacy-layer override is required because earlier process layout rules use !important inside nbc.legacy. */
@layer nbc.legacy{
  @media (max-width:620px){
    html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-diagram{
      display:grid!important;
      grid-template-columns:102px minmax(0,1fr)!important;
      gap:12px!important;
      min-width:0!important;
      overflow:visible!important;
    }
    html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-visual{
      grid-column:1!important;
      grid-row:1!important;
      width:102px!important;
      min-width:102px!important;
      max-width:102px!important;
      height:510px!important;
      overflow:hidden!important;
    }
    html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-labels{
      grid-column:2!important;
      grid-row:1!important;
      width:auto!important;
      min-width:0!important;
      height:510px!important;
    }
  }
}

/* Match the legacy nested layer that owns the historical 76 px mobile rail. */
@layer nbc.legacy.nbc-premium-7162{
  @media (max-width:620px){
    html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-diagram{
      grid-template-columns:102px minmax(0,1fr)!important;
      gap:12px!important;
    }
    html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-visual{
      width:102px!important;
      min-width:102px!important;
      max-width:102px!important;
      height:510px!important;
      overflow:hidden!important;
    }
    html body.page.service-process #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-flow .of-labels{
      min-width:0!important;
      height:510px!important;
    }
  }
}

/* Tablet microtype floor for process semantics and status key. */
@media (min-width:621px) and (max-width:980px){
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic-item small{
    font-size:9.5px!important;
    line-height:1.25!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-process-semantic-item strong{
    font-size:11.5px!important;
    line-height:1.3!important;
  }
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-flow-key,
  #sollweg-echtweg [data-process-reality-app="v6416"] .rf-flow-key small{
    font-size:10.5px!important;
    line-height:1.35!important;
  }
}