{"id":612,"date":"2026-09-25T08:35:40","date_gmt":"2026-09-25T08:35:40","guid":{"rendered":"https:\/\/beca.test-rmwebsolutions.de\/visualization\/"},"modified":"2026-10-10T16:04:45","modified_gmt":"2026-10-10T16:04:45","slug":"visualization","status":"publish","type":"page","link":"https:\/\/beca.test-rmwebsolutions.de\/en\/visualization\/","title":{"rendered":"Visualization"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><style>\n.beca-vis,\n.beca-vis *{\n  box-sizing:border-box;\n}\n\n.beca-vis{\n  --ink:#11191e;\n  --steel:#647177;\n  --line:#d9dfe2;\n  --acid:#f2da35;\n  --blue:#066a9b;\n  --max:1430px;\n\n  width:100%;\n  overflow:hidden;\n\n  background:#fff;\n  color:var(--ink);\n\n  font-family:\n    Inter,\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n\n  -webkit-font-smoothing:antialiased;\n}\n\n.beca-vis a{\n  color:inherit;\n  text-decoration:none;\n}\n\n.beca-vis img{\n  display:block;\n  max-width:100%;\n}\n\n.beca-vis p{\n  margin:0;\n}\n\n.beca-vis .wrap{\n  width:min(var(--max),calc(100% - 72px));\n  margin:auto;\n}\n\n.beca-vis h1,\n.beca-vis h2,\n.beca-vis h3{\n  margin:0;\n\n  color:var(--ink);\n\n  line-height:.98;\n  letter-spacing:-.05em;\n}\n\n\n\/* =========================================================\n   DIVI FULLWIDTH\n   ========================================================= *\/\n\nbody:has(#beca-vis){\n  overflow-x:hidden;\n}\n\nbody:has(#beca-vis) #page-container,\nbody:has(#beca-vis) #main-content{\n  overflow-x:clip;\n}\n\nbody:has(#beca-vis) .et_pb_section:has(#beca-vis),\nbody:has(#beca-vis) .et_pb_row:has(#beca-vis),\nbody:has(#beca-vis) .et_pb_column:has(#beca-vis),\nbody:has(#beca-vis) .et_pb_code:has(#beca-vis),\nbody:has(#beca-vis) .et_pb_code_inner:has(#beca-vis){\n  width:100%!important;\n  max-width:none!important;\n\n  margin:0!important;\n  padding:0!important;\n}\n\nbody:has(#beca-vis) .et_pb_row:has(#beca-vis){\n  display:block!important;\n}\n\n\n\/* =========================================================\n   EYEBROW\n   ========================================================= *\/\n\n.vis-eyebrow{\n  display:flex;\n  align-items:center;\n\n  gap:12px;\n\n  margin-bottom:20px;\n\n  color:#68747a;\n\n  font-size:.66rem;\n  font-weight:900;\n\n  letter-spacing:.13em;\n\n  text-transform:uppercase;\n}\n\n.vis-eyebrow:before{\n  content:\"\";\n\n  width:32px;\n  height:3px;\n\n  flex:0 0 auto;\n\n  background:var(--acid);\n}\n\n\n\/* =========================================================\n   BUTTON\n   ========================================================= *\/\n\n.vis-btn{\n  position:relative;\n  isolation:isolate;\n\n  overflow:hidden;\n\n  min-height:52px;\n\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n\n  gap:14px;\n\n  padding:0 22px;\n\n  border:1px solid var(--ink);\n\n  background:transparent;\n  color:var(--ink);\n\n  font-size:.76rem;\n  font-weight:850;\n\n  line-height:1;\n\n  transition:\n    color .2s ease,\n    transform .2s ease,\n    border-color .2s ease;\n}\n\n.vis-btn:before{\n  content:\"\";\n\n  position:absolute;\n  z-index:-1;\n  inset:0;\n\n  background:var(--ink);\n\n  transform:translateY(102%);\n\n  transition:\n    transform .3s cubic-bezier(.2,.8,.2,1);\n}\n\n.vis-btn:hover{\n  color:#fff;\n\n  transform:translateY(-2px);\n}\n\n.vis-btn:hover:before{\n  transform:none;\n}\n\n.vis-btn-yellow{\n  border-color:var(--acid);\n\n  background:var(--acid);\n}\n\n.vis-btn-yellow:before{\n  background:#fff;\n}\n\n.vis-btn-yellow:hover{\n  color:var(--ink);\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.vis-hero{\n  background:\n    linear-gradient(\n      rgba(17,23,27,.025) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(17,23,27,.025) 1px,\n      transparent 1px\n    ),\n    #f5f7f7;\n\n  background-size:72px 72px;\n\n  border-bottom:1px solid #dfe5e7;\n}\n\n.vis-hero-grid{\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,1fr)\n    minmax(420px,.82fr);\n\n  gap:clamp(50px,7vw,105px);\n\n  align-items:center;\n\n  padding:62px 0 68px;\n}\n\n.vis-hero h1{\n  max-width:760px;\n\n  margin:20px 0 24px;\n\n  font-size:clamp(2.7rem,3.45vw,3.9rem);\n\n  line-height:.96;\n\n  letter-spacing:-.047em;\n}\n\n.vis-hero h1 span{\n  color:#59666c;\n}\n\n.vis-hero-lead{\n  max-width:720px;\n\n  margin-bottom:28px;\n\n  color:#5f6c72;\n\n  font-size:1.02rem;\n\n  line-height:1.7;\n}\n\n.vis-hero-actions{\n  display:flex;\n  flex-wrap:wrap;\n\n  gap:11px;\n}\n\n\n\/* =========================================================\n   HERO BILD\n   WICHTIG: NICHT ABSCHNEIDEN\n   ========================================================= *\/\n\n.vis-hero-media{\n  position:relative;\n}\n\n.vis-image{\n  position:relative;\n\n  overflow:hidden;\n\n  padding:20px;\n\n  border:1px solid #cfd7da;\n\n  background:#fff;\n\n  box-shadow:\n    0 22px 60px rgba(12,22,28,.08);\n}\n\n.vis-image:before{\n  content:\"\";\n\n  position:absolute;\n  z-index:3;\n\n  top:-1px;\n  left:-1px;\n\n  width:62px;\n  height:4px;\n\n  background:var(--acid);\n}\n\n.vis-image img{\n  display:block;\n\n  width:100%;\n  height:auto;\n\n  max-height:520px;\n\n  object-fit:contain;\n  object-position:center center;\n\n  margin:auto;\n}\n\n\n\/* =========================================================\n   HAUPTINHALT\n   ========================================================= *\/\n\n.vis-main{\n  padding:94px 0 102px;\n\n  background:#fff;\n}\n\n.vis-main-grid{\n  display:grid;\n\n  grid-template-columns:\n    minmax(0,.72fr)\n    minmax(520px,1.28fr);\n\n  gap:clamp(70px,8vw,125px);\n\n  align-items:start;\n}\n\n.vis-main h2{\n  max-width:620px;\n\n  margin-bottom:25px;\n\n  font-size:clamp(2.1rem,2.8vw,3.35rem);\n\n  line-height:1.04;\n\n  letter-spacing:-.05em;\n}\n\n.vis-main-intro p{\n  max-width:630px;\n\n  margin-bottom:18px;\n\n  color:#627077;\n\n  font-size:1rem;\n\n  line-height:1.75;\n}\n\n.vis-main-list{\n  border-top:1px solid #d7dee1;\n}\n\n.vis-main-item{\n  display:grid;\n\n  grid-template-columns:\n    64px minmax(0,1fr);\n\n  gap:20px;\n\n  padding:25px 0;\n\n  border-bottom:1px solid #d7dee1;\n}\n\n.vis-main-item>span{\n  padding-top:3px;\n\n  color:var(--blue);\n\n  font-size:.63rem;\n  font-weight:900;\n}\n\n.vis-main-item h3{\n  margin-bottom:9px;\n\n  font-size:1.02rem;\n\n  line-height:1.15;\n\n  letter-spacing:-.025em;\n}\n\n.vis-main-item p{\n  max-width:760px;\n\n  color:#657278;\n\n  font-size:.86rem;\n\n  line-height:1.65;\n}\n\n\n\/* =========================================================\n   SYSTEME\n   ========================================================= *\/\n\n.vis-systems{\n  padding:100px 0;\n\n  background:\n    linear-gradient(\n      rgba(17,25,30,.018) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(17,25,30,.018) 1px,\n      transparent 1px\n    ),\n    #f1f4f5;\n\n  background-size:64px 64px;\n}\n\n.vis-systems-head{\n  display:grid;\n\n  grid-template-columns:\n    1fr .7fr;\n\n  gap:80px;\n\n  align-items:end;\n\n  margin-bottom:45px;\n}\n\n.vis-systems h2{\n  max-width:760px;\n\n  font-size:clamp(2.1rem,2.8vw,3.35rem);\n\n  line-height:1.04;\n}\n\n.vis-systems-head p{\n  color:#647177;\n\n  line-height:1.7;\n}\n\n.vis-system-grid{\n  display:grid;\n\n  grid-template-columns:\n    repeat(4,1fr);\n\n  gap:14px;\n}\n\n.vis-system-card{\n  position:relative;\n\n  min-height:230px;\n\n  padding:27px 24px;\n\n  border:1px solid #d4dcdf;\n\n  background:#fff;\n\n  transition:\n    transform .2s ease,\n    border-color .2s ease;\n}\n\n.vis-system-card:before{\n  content:\"\";\n\n  position:absolute;\n\n  top:-1px;\n  left:-1px;\n\n  width:40px;\n  height:3px;\n\n  background:#c9d1d4;\n\n  transition:.2s;\n}\n\n.vis-system-card:hover{\n  transform:translateY(-4px);\n\n  border-color:#b9c5c9;\n}\n\n.vis-system-card:hover:before{\n  width:70px;\n\n  background:var(--acid);\n}\n\n.vis-system-card.accent{\n  border-color:#dec521;\n\n  background:\n    linear-gradient(\n      135deg,\n      #fff7b7,\n      #fffce6\n    );\n}\n\n.vis-system-card.accent:before{\n  background:var(--acid);\n}\n\n.vis-system-card>span{\n  display:block;\n\n  margin-bottom:40px;\n\n  color:#879399;\n\n  font-size:.62rem;\n  font-weight:900;\n}\n\n.vis-system-card h3{\n  margin-bottom:11px;\n\n  font-size:1.03rem;\n\n  line-height:1.15;\n}\n\n.vis-system-card p{\n  color:#6b777c;\n\n  font-size:.8rem;\n\n  line-height:1.58;\n}\n\n\n\/* =========================================================\n   LEISTUNGEN\n   ========================================================= *\/\n\n.vis-services{\n  padding:105px 0;\n\n  background:#fff;\n}\n\n.vis-services-head{\n  margin-bottom:44px;\n}\n\n.vis-services h2{\n  max-width:800px;\n\n  font-size:clamp(2.1rem,2.8vw,3.35rem);\n\n  line-height:1.04;\n}\n\n.vis-service-grid{\n  margin-top:44px;\n\n  display:grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  border-top:1px solid #cfd7da;\n  border-left:1px solid #cfd7da;\n}\n\n.vis-service-item{\n  position:relative;\n\n  min-height:145px;\n\n  padding:25px 24px;\n\n  border-right:1px solid #cfd7da;\n  border-bottom:1px solid #cfd7da;\n\n  background:#fff;\n}\n\n.vis-service-item:before{\n  content:\"\";\n\n  position:absolute;\n\n  top:-1px;\n  left:-1px;\n\n  width:34px;\n  height:3px;\n\n  background:#c9d1d4;\n\n  transition:.2s;\n}\n\n.vis-service-item:hover:before{\n  width:60px;\n\n  background:var(--acid);\n}\n\n.vis-service-item span{\n  display:block;\n\n  margin-bottom:21px;\n\n  color:#8b969b;\n\n  font-size:.58rem;\n  font-weight:900;\n}\n\n.vis-service-item h3{\n  margin-bottom:8px;\n\n  font-size:.92rem;\n\n  line-height:1.2;\n\n  letter-spacing:-.025em;\n}\n\n.vis-service-item p{\n  color:#6b777c;\n\n  font-size:.76rem;\n\n  line-height:1.52;\n}\n\n\n\/* =========================================================\n   RELATED\n   ========================================================= *\/\n\n.vis-related{\n  padding:96px 0;\n\n  background:#f3f6f6;\n}\n\n.vis-related h2{\n  max-width:850px;\n\n  margin-bottom:42px;\n\n  font-size:clamp(2.1rem,2.8vw,3.35rem);\n\n  line-height:1.04;\n}\n\n.vis-related-grid{\n  display:grid;\n\n  grid-template-columns:\n    repeat(3,1fr);\n\n  gap:12px;\n}\n\n.vis-related-card{\n  position:relative;\n\n  min-height:220px;\n\n  display:flex;\n  flex-direction:column;\n\n  padding:27px 25px;\n\n  border:1px solid #d4dcdf;\n\n  background:#fff;\n\n  transition:\n    transform .2s ease,\n    border-color .2s ease;\n}\n\n.vis-related-card:before{\n  content:\"\";\n\n  position:absolute;\n\n  top:-1px;\n  left:-1px;\n\n  width:44px;\n  height:3px;\n\n  background:var(--acid);\n}\n\n.vis-related-card:hover{\n  transform:translateY(-4px);\n\n  border-color:#bbc6ca;\n}\n\n.vis-related-card small{\n  color:#89949a;\n\n  font-size:.55rem;\n  font-weight:900;\n\n  letter-spacing:.08em;\n}\n\n.vis-related-card h3{\n  margin:30px 0 11px;\n\n  font-size:1.2rem;\n}\n\n.vis-related-card p{\n  margin-bottom:25px;\n\n  color:#68757a;\n\n  font-size:.8rem;\n\n  line-height:1.6;\n}\n\n.vis-related-card>span{\n  margin-top:auto;\n\n  font-size:.72rem;\n  font-weight:850;\n}\n\n\n\/* =========================================================\n   CTA\n   ========================================================= *\/\n\n.vis-cta{\n  padding:90px 0;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(17,25,30,.055) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      rgba(17,25,30,.055) 1px,\n      transparent 1px\n    ),\n    var(--acid);\n\n  background-size:72px 72px;\n}\n\n.vis-cta-grid{\n  display:grid;\n\n  grid-template-columns:\n    1.2fr .8fr;\n\n  gap:90px;\n\n  align-items:end;\n}\n\n.vis-cta h2{\n  max-width:820px;\n\n  font-size:clamp(2.1rem,2.8vw,3.35rem);\n\n  line-height:1.04;\n}\n\n.vis-cta p{\n  margin-bottom:26px;\n\n  color:rgba(17,25,30,.72);\n\n  line-height:1.66;\n}\n\n\n\/* =========================================================\n   REVEAL\n   ========================================================= *\/\n\n.beca-vis.reveal-ready [data-reveal]{\n  opacity:0;\n\n  transform:translateY(30px);\n\n  transition:\n    opacity .7s,\n    transform .7s;\n}\n\n.beca-vis.reveal-ready [data-reveal].visible{\n  opacity:1;\n\n  transform:none;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media(max-width:1050px){\n\n  .vis-hero-grid,\n  .vis-main-grid,\n  .vis-systems-head,\n  .vis-cta-grid{\n    grid-template-columns:1fr;\n  }\n\n  .vis-hero-grid{\n    gap:50px;\n  }\n\n  .vis-hero-media{\n    max-width:760px;\n  }\n\n  .vis-system-grid{\n    grid-template-columns:\n      1fr 1fr;\n  }\n\n  .vis-service-grid{\n    grid-template-columns:\n      1fr 1fr;\n  }\n\n  .vis-related-grid{\n    grid-template-columns:\n      1fr 1fr;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:700px){\n\n  .beca-vis .wrap{\n    width:calc(100% - 30px);\n  }\n\n  .vis-hero-grid{\n    padding:55px 0 60px;\n  }\n\n  .vis-hero h1{\n    font-size:\n      clamp(\n        2.25rem,\n        10.4vw,\n        3.05rem\n      );\n\n    line-height:.98;\n  }\n\n  .vis-main h2,\n  .vis-systems h2,\n  .vis-services h2,\n  .vis-related h2,\n  .vis-cta h2{\n    font-size:\n      clamp(\n        2rem,\n        8vw,\n        2.8rem\n      );\n\n    line-height:1.05;\n  }\n\n  .vis-image{\n    padding:12px;\n  }\n\n  .vis-image img{\n    width:100%;\n    height:auto;\n\n    max-height:none;\n\n    object-fit:contain;\n  }\n\n  .vis-main,\n  .vis-systems,\n  .vis-services,\n  .vis-related,\n  .vis-cta{\n    padding:74px 0;\n  }\n\n  .vis-main-item{\n    grid-template-columns:\n      48px 1fr;\n\n    gap:14px;\n  }\n\n  .vis-system-grid,\n  .vis-service-grid,\n  .vis-related-grid{\n    grid-template-columns:1fr;\n  }\n\n}\n\n@media(prefers-reduced-motion:reduce){\n\n  .beca-vis *,\n  .beca-vis *:before,\n  .beca-vis *:after{\n    animation:none!important;\n    transition:none!important;\n  }\n\n}\n<\/style>\n\n\n<div class=\"beca-vis\" id=\"beca-vis\">\n\n\n<!-- ========================================================\n     HERO\n     ======================================================== -->\n\n<section class=\"vis-hero\">\n\n  <div class=\"wrap vis-hero-grid\">\n\n\n    <div data-reveal>\n\n      <div class=\"vis-eyebrow\">\n        Visualization \u00b7 HMI \u00b7 Process Automation\n      <\/div>\n\n      <h1>\n        Visualization.<br>\n        <span>Processes at a glance.<\/span>\n      <\/h1>\n\n      <p class=\"vis-hero-lead\">\n        Clear visualization of machines,\n        plants and production processes.\n        BECA\u00ae combines operation, control and\n        process information in a clear\n        and easy-to-understand user interface.\n      <\/p>\n\n\n      <div class=\"vis-hero-actions\">\n\n        <a\n          class=\"vis-btn vis-btn-yellow\"\n          href=\"\/en\/contact\/\"\n        >\n          Discuss project \u2192\n        <\/a>\n\n        <a\n          class=\"vis-btn\"\n          href=\"#visualisierung-info\"\n        >\n          Learn more \u2193\n        <\/a>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div\n      class=\"vis-hero-media\"\n      data-reveal\n    >\n\n      <div class=\"vis-image\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/beca.test-rmwebsolutions.de\/wp-content\/uploads\/2026\/09\/S7-Progammierung-S7-HMI-SPS-2.jpg\"\n          alt=\"S7 HMI PLC visualization at BECA\"\n          fetchpriority=\"high\"\n        >\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ========================================================\n     HAUPTINHALT\n     ======================================================== -->\n\n<section\n  class=\"vis-main\"\n  id=\"visualisierung-info\"\n>\n\n  <div class=\"wrap vis-main-grid\">\n\n\n    <div\n      class=\"vis-main-intro\"\n      data-reveal\n    >\n\n      <div class=\"vis-eyebrow\">\n        Process Visualization\n      <\/div>\n\n      <h2>\n        Operate plants easily and clearly.\n      <\/h2>\n\n      <p>\n        Good visualization presents the relevant\n        information of a plant clearly\n        and supports the operator in day-to-day work.\n      <\/p>\n\n      <p>\n        Statuses, messages, process values and operating functions\n        are presented so that the plant can be operated quickly\n        and safely.\n      <\/p>\n\n    <\/div>\n\n\n    <div\n      class=\"vis-main-list\"\n      data-reveal\n    >\n\n\n      <article class=\"vis-main-item\">\n\n        <span>\n          01\n        <\/span>\n\n        <div>\n\n          <h3>\n            Operation\n          <\/h3>\n\n          <p>\n            Clear user interfaces for machines,\n            process plants and production systems.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"vis-main-item\">\n\n        <span>\n          02\n        <\/span>\n\n        <div>\n\n          <h3>\n            Process Information\n          <\/h3>\n\n          <p>\n            Measured values, plant statuses and process information\n            are presented clearly and in a structured manner.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"vis-main-item\">\n\n        <span>\n          03\n        <\/span>\n\n        <div>\n\n          <h3>\n            Messages &amp; Diagnostics\n          <\/h3>\n\n          <p>\n            Faults and messages can be identified directly\n            via the visualization and\n            traced.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n      <article class=\"vis-main-item\">\n\n        <span>\n          04\n        <\/span>\n\n        <div>\n\n          <h3>\n            Integration\n          <\/h3>\n\n          <p>\n            The visualization is implemented to match the\n            control and automation solution\n            of the respective plant.\n          <\/p>\n\n        <\/div>\n\n      <\/article>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ========================================================\n     SYSTEME\n     ======================================================== -->\n\n<section class=\"vis-systems\">\n\n  <div class=\"wrap\">\n\n\n    <div\n      class=\"vis-systems-head\"\n      data-reveal\n    >\n\n      <div>\n\n        <div class=\"vis-eyebrow\">\n          Visualization Systems\n        <\/div>\n\n        <h2>\n          Matched to the control system and the plant.\n        <\/h2>\n\n      <\/div>\n\n\n      <p>\n        Depending on the project and existing\n        automation environment, different\n        visualization and process control systems are used.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"vis-system-grid\">\n\n\n      <article\n        class=\"vis-system-card accent\"\n        data-reveal\n      >\n\n        <span>\n          01 \/ HMI\n        <\/span>\n\n        <h3>\n          SIMATIC HMI\n        <\/h3>\n\n        <p>\n          Operator panels for machines,\n          plants and decentralized operator stations.\n        <\/p>\n\n      <\/article>\n\n\n      <article\n        class=\"vis-system-card\"\n        data-reveal\n      >\n\n        <span>\n          02 \/ TIA\n        <\/span>\n\n        <h3>\n          TIA Portal\n        <\/h3>\n\n        <p>\n          Visualization and control\n          within a shared\n          engineering environment.\n        <\/p>\n\n      <\/article>\n\n\n      <article\n        class=\"vis-system-card\"\n        data-reveal\n      >\n\n        <span>\n          03 \/ WINCC\n        <\/span>\n\n        <h3>\n          WinCC\n        <\/h3>\n\n        <p>\n          Visualization of plants,\n          statuses, messages and\n          process information.\n        <\/p>\n\n      <\/article>\n\n\n      <article\n        class=\"vis-system-card\"\n        data-reveal\n      >\n\n        <span>\n          04 \/ PROCESS\n        <\/span>\n\n        <h3>\n          Proleit &amp; Braumat\n        <\/h3>\n\n        <p>\n          Process control systems for\n          automated production\n          and process plants.\n        <\/p>\n\n      <\/article>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ========================================================\n     LEISTUNGEN\n     ======================================================== -->\n\n<section class=\"vis-services\">\n\n  <div class=\"wrap\">\n\n\n    <div\n      class=\"vis-services-head\"\n      data-reveal\n    >\n\n      <div class=\"vis-eyebrow\">\n        Examples of Our Services\n      <\/div>\n\n      <h2>\n        Visualization for new and existing plants.\n      <\/h2>\n\n    <\/div>\n\n\n    <div\n      class=\"vis-service-grid\"\n      data-reveal\n    >\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          01\n        <\/span>\n\n        <h3>\n          HMI Engineering\n        <\/h3>\n\n        <p>\n          Creation and customization\n          of user interfaces.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          02\n        <\/span>\n\n        <h3>\n          Process Screens\n        <\/h3>\n\n        <p>\n          Clear visualization\n          of plants and processes.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          03\n        <\/span>\n\n        <h3>\n          Alarm Systems\n        <\/h3>\n\n        <p>\n          Display of operating\n          and fault messages.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          04\n        <\/span>\n\n        <h3>\n          Measured Values &amp; Statuses\n        <\/h3>\n\n        <p>\n          Display of important\n          process and plant values.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          05\n        <\/span>\n\n        <h3>\n          SIMATIC HMI\n        <\/h3>\n\n        <p>\n          Integration of modern\n          Siemens operator panels.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          06\n        <\/span>\n\n        <h3>\n          TIA Portal\n        <\/h3>\n\n        <p>\n          Visualization matched\n          to the S7 control system.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          07\n        <\/span>\n\n        <h3>\n          WinCC\n        <\/h3>\n\n        <p>\n          Engineering and adaptation\n          of existing WinCC solutions.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          08\n        <\/span>\n\n        <h3>\n          Modernization\n        <\/h3>\n\n        <p>\n          Replacement of older HMI\n          and visualization systems.\n        <\/p>\n\n      <\/article>\n\n\n      <article class=\"vis-service-item\">\n\n        <span>\n          09\n        <\/span>\n\n        <h3>\n          Commissioning\n        <\/h3>\n\n        <p>\n          Setup and testing\n          of the visualization at the plant.\n        <\/p>\n\n      <\/article>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ========================================================\n     VERWANDTE THEMEN\n     ======================================================== -->\n\n<section class=\"vis-related\">\n\n  <div class=\"wrap\">\n\n\n    <div data-reveal>\n\n      <div class=\"vis-eyebrow\">\n        Additional Expertise\n      <\/div>\n\n      <h2>\n        Visualization and automation go hand in hand.\n      <\/h2>\n\n    <\/div>\n\n\n    <div class=\"vis-related-grid\">\n\n\n      <a\n        class=\"vis-related-card\"\n        href=\"\/en\/s7-programming\/\"\n        data-reveal\n      >\n\n        <small>\n          01 \/ AUTOMATION\n        <\/small>\n\n        <h3>\n          S7 Programming\n        <\/h3>\n\n        <p>\n          Siemens S7, TIA Portal\n          and automation of\n          process plants.\n        <\/p>\n\n        <span>\n          Learn more \u2192\n        <\/span>\n\n      <\/a>\n\n\n      <a\n        class=\"vis-related-card\"\n        href=\"\/en\/industry-4-0\/\"\n        data-reveal\n      >\n\n        <small>\n          02 \/ DIGITALIZATION\n        <\/small>\n\n        <h3>\n          Industry 4.0\n        <\/h3>\n\n        <p>\n          Connectivity, sensor technology and\n          digital process information.\n        <\/p>\n\n        <span>\n          Learn more \u2192\n        <\/span>\n\n      <\/a>\n\n\n      <a\n        class=\"vis-related-card\"\n        href=\"\/en\/services\/turnkey\/\"\n        data-reveal\n      >\n\n        <small>\n          03 \/ ENGINEERING\n        <\/small>\n\n        <h3>\n          Turnkey\n        <\/h3>\n\n        <p>\n          Process engineering,\n          automation and plant engineering\n          from a single source.\n        <\/p>\n\n        <span>\n          Learn more \u2192\n        <\/span>\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ========================================================\n     CTA\n     ======================================================== -->\n\n<section class=\"vis-cta\">\n\n  <div\n    class=\"wrap vis-cta-grid\"\n    data-reveal\n  >\n\n    <div>\n\n      <div class=\"vis-eyebrow\">\n        Visualization \/ HMI \/ Automation\n      <\/div>\n\n      <h2>\n        Do you need a new or modernized visualization?\n      <\/h2>\n\n    <\/div>\n\n\n    <div>\n\n      <p>\n        Let's talk about your plant,\n        control system and the right\n        operating and visualization solution.\n      <\/p>\n\n      <a\n        class=\"vis-btn\"\n        href=\"\/en\/contact\/\"\n      >\n        Discuss your project with BECA\u00ae \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<\/div>\n\n\n<script>\n(function(){\n\n  const root =\n    document.getElementById(\n      \"beca-vis\"\n    );\n\n  if(!root){\n    return;\n  }\n\n\n  const items = [\n    ...root.querySelectorAll(\n      \"[data-reveal]\"\n    )\n  ];\n\n\n  if(\n    !(\n      \"IntersectionObserver\" in window\n    )\n  ){\n\n    items.forEach(\n      function(el){\n\n        el.classList.add(\n          \"visible\"\n        );\n\n      }\n    );\n\n    return;\n  }\n\n\n  root.classList.add(\n    \"reveal-ready\"\n  );\n\n\n  const observer =\n    new IntersectionObserver(\n      function(entries){\n\n        entries.forEach(\n          function(entry){\n\n            if(\n              !entry.isIntersecting\n            ){\n              return;\n            }\n\n            entry.target\n              .classList\n              .add(\n                \"visible\"\n              );\n\n            observer.unobserve(\n              entry.target\n            );\n\n          }\n        );\n\n      },\n      {\n        threshold:.08,\n        rootMargin:\n          \"0px 0px -5% 0px\"\n      }\n    );\n\n\n  items.forEach(\n    function(el){\n\n      observer.observe(\n        el\n      );\n\n    }\n  );\n\n})();\n<\/script>\n\n<!-- WPML refresh --><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-612","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/pages\/612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/comments?post=612"}],"version-history":[{"count":8,"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/pages\/612\/revisions"}],"predecessor-version":[{"id":730,"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/pages\/612\/revisions\/730"}],"wp:attachment":[{"href":"https:\/\/beca.test-rmwebsolutions.de\/en\/wp-json\/wp\/v2\/media?parent=612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}