/* V187: corrections scoped to the EVCA Interop page in EN and DE.
   Keep this in the first existing design layer so these local corrections
   also override earlier !important design-system declarations. */
@layer comemso-design {
  html body.cmo-design-system #main-content .evca-interop-config-inputs + .evca-interop-technical-table-group {
    padding-block-start: clamp(24px, 3vw, 36px) !important;
  }

  html body.cmo-design-system #main-content #topology .evca-interop-product-field-band {
    /* Dominant background RGB (0,32,58) in all three existing image sizes. */
    --interop-field-background: #00203a;
    background: var(--interop-field-background) !important;
  }
  html body.cmo-design-system #main-content #topology .evca-interop-product-field-band > picture[data-content-media="natural"] {
    background: var(--interop-field-background) !important;
  }
  html body.cmo-design-system #main-content #topology .evca-interop-product-field-band > picture > img {
    /* A very narrow edge transition blends compression/texture variations.
       No cropping, recolouring or re-encoding of the product illustration. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 .75%, #000 99.25%, transparent), linear-gradient(to bottom, transparent, #000 .75%, #000 99.25%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 .75%, #000 99.25%, transparent), linear-gradient(to bottom, transparent, #000 .75%, #000 99.25%, transparent);
    mask-composite: intersect;
  }


  /* V187-v4: native laptop composition using the unchanged comframe-page UI.
     Three clipped views reuse ONE responsive image URL. Only the middle
     bezel strip changes height. The keyboard and complete UI keep their ratio.
     Source geometry is recorded in Dokumentation/Interop-v187-v4/Bildzuordnung.json. */
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 560px !important;
    aspect-ratio: 1440 / 1028.3282442748 !important;
    height: auto !important;
    margin: 0 auto !important;
    line-height: 0;
    isolation: isolate;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice,
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__screen {
    position: absolute !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice { left: 0; width: 100%; }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop img {
    position: absolute !important;
    display: block !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: fill !important;
    object-position: center !important;
    transform: none !important;
    aspect-ratio: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__base { left: 0 !important; width: 100% !important; }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice--top {
    top: 0; height: 14.1005560051%;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice--top img {
    top: 0 !important; height: 740.6896551724% !important;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice--display {
    top: 14.1005560051%; height: 52.9333165072%;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice--display img {
    top: -24.5762711864% !important;
    height: 182.0338983051% !important;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice--bottom {
    top: 67.0338725123%;
    height: 32.9661274877%;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__slice--bottom img {
    top: -216.8141592920% !important;
    height: 316.8141592920% !important;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__screen {
    z-index: 1;
    left: 14.5833333333%;
    top: 14.1005560051%;
    width: 71.2500000000%;
    height: 52.9333165072%;
    background: #f4f4f4;
  }
  html body.cmo-design-system #main-content #technical-scope .interop-v187-laptop .interop-v187-laptop__ui {
    left: -18.7022900763% !important;
    top: -23.3812949640% !important;
    width: 137.4045801527% !important;
    height: 192.8057553957% !important;
  }
}