{"id":974,"date":"2019-07-26T20:36:37","date_gmt":"2019-07-26T20:36:37","guid":{"rendered":"http:\/\/alarmcentar.hr\/projekte\/"},"modified":"2026-07-13T15:29:36","modified_gmt":"2026-07-13T15:29:36","slug":"projekte","status":"publish","type":"page","link":"https:\/\/alarmcentar.hr\/de\/projekte\/","title":{"rendered":"Projekte"},"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_heading_0 et_pb_heading et_pb_module et_flex_module\"><div class=\"et_pb_heading_container\"><h1 class=\"et_pb_module_header\">Projekte<\/h1><\/div><\/div>\n\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>Langj\u00e4hrige Erfahrung in der Objektsicherheit.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n<div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_1 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_1 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.ac-projects-wrap {\n  --ac-accent: #c60f0f;\n  --ac-dark: #141414;\n  --ac-gray: #6b6b6b;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 40px 20px 60px;\n  font-family: inherit;\n}\n\n.ac-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 28px;\n}\n\n@media (max-width: 900px) {\n  .ac-grid { grid-template-columns: repeat(2, 1fr); }\n}\n@media (max-width: 600px) {\n  .ac-grid { grid-template-columns: 1fr; }\n}\n\n.ac-card {\n  cursor: pointer;\n  position: relative;\n  border-radius: 6px;\n  overflow: hidden;\n  background: #111;\n  box-shadow: 0 6px 20px rgba(0,0,0,0.15);\n  transition: transform .25s ease, box-shadow .25s ease;\n}\n.ac-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 14px 30px rgba(0,0,0,0.25);\n}\n.ac-card:focus-visible {\n  outline: 3px solid var(--ac-accent);\n  outline-offset: 2px;\n}\n\n.ac-card-img {\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  object-fit: cover;\n  display: block;\n  transition: transform .4s ease, opacity .3s ease;\n}\n.ac-card:hover .ac-card-img {\n  transform: scale(1.06);\n  opacity: 0.85;\n}\n\n.ac-card-title {\n  padding: 14px 16px 16px;\n  font-size: 1.05rem;\n  font-weight: 700;\n  color: var(--ac-dark);\n  border-left: 4px solid var(--ac-accent);\n  background: #fff;\n  line-height: 1.3;\n}\n\n\/* ---------------- MODAL \/ POPUP ---------------- *\/\n.ac-modal-overlay {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(10,10,10,0.9);\n  z-index: 999999999 !important; \/* Maximum priority *\/\n  align-items: flex-start;\n  justify-content: center;\n  overflow-y: auto;\n  padding: 40px 16px;\n}\n.ac-modal-overlay.ac-open {\n  display: flex;\n}\n\n.ac-modal {\n  background: #fff;\n  width: 100%;\n  max-width: 880px;\n  border-radius: 8px;\n  overflow: hidden;\n  position: relative;\n  animation: acFadeIn .25s ease;\n}\n\n@keyframes acFadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.ac-modal-close {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--ac-accent);\n  color: #fff;\n  border: none;\n  font-size: 22px;\n  line-height: 1;\n  cursor: pointer;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ac-modal-close:hover { filter: brightness(1.1); }\n\n.ac-modal-header {\n  padding: 32px 32px 20px;\n  border-bottom: 3px solid var(--ac-accent);\n}\n.ac-modal-title {\n  font-size: 1.6rem;\n  font-weight: 800;\n  color: var(--ac-dark);\n  margin: 0 0 12px;\n}\n.ac-modal-desc {\n  color: var(--ac-gray);\n  line-height: 1.65;\n  font-size: 0.98rem;\n  margin: 0;\n}\n\n.ac-modal-body {\n  padding: 24px 32px 32px;\n}\n\n\/* Gallery inside modal *\/\n.ac-gallery {\n  position: relative;\n}\n.ac-gallery-main {\n  width: 100%;\n  aspect-ratio: 16 \/ 10;\n  border-radius: 6px;\n  overflow: hidden;\n  background: #000;\n  position: relative;\n}\n.ac-gallery-main img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n.ac-gallery-nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: rgba(0,0,0,0.55);\n  color: #fff;\n  border: none;\n  width: 42px;\n  height: 42px;\n  border-radius: 50%;\n  font-size: 20px;\n  cursor: pointer;\n}\n.ac-gallery-nav:hover { background: var(--ac-accent); }\n.ac-gallery-prev { left: 10px; }\n.ac-gallery-next { right: 10px; }\n\n.ac-gallery-thumbs {\n  display: flex;\n  gap: 10px;\n  margin-top: 14px;\n  flex-wrap: wrap;\n}\n.ac-gallery-thumbs img {\n  width: 74px;\n  height: 56px;\n  object-fit: cover;\n  border-radius: 4px;\n  cursor: pointer;\n  opacity: 0.55;\n  border: 2px solid transparent;\n  transition: opacity .2s ease, border-color .2s ease;\n}\n.ac-gallery-thumbs img.ac-active {\n  opacity: 1;\n  border-color: var(--ac-accent);\n}\n\n\/* Video inside modal *\/\n.ac-video-wrap {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  border-radius: 6px;\n  overflow: hidden;\n  background: #000;\n}\n.ac-video-wrap video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n<\/style>\n\n<div class=\"ac-projects-wrap\">\n  <div class=\"ac-grid\" id=\"ac-grid\"><\/div>\n<\/div>\n\n<!-- MODAL -->\n<div class=\"ac-modal-overlay\" id=\"ac-modal-overlay\">\n  <div class=\"ac-modal\" role=\"dialog\" aria-modal=\"true\">\n    <button class=\"ac-modal-close\" id=\"ac-modal-close\" aria-label=\"Close\">&times;<\/button>\n    <div class=\"ac-modal-header\">\n      <h3 class=\"ac-modal-title\" id=\"ac-modal-title\"><\/h3>\n      <p class=\"ac-modal-desc\" id=\"ac-modal-desc\"><\/p>\n    <\/div>\n    <div class=\"ac-modal-body\" id=\"ac-modal-body\"><\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  var projects = [\n    {\n      title: \"18th-Century Castle\",\n      cover: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_1348-e1555446775167.jpg\",\n      type: \"gallery\",\n      desc: \"This is a project for a private owner who placed immense trust in us, of which we are extremely proud. Landing a property of this type, which is a protected cultural monument where virtually everything\u2014both interior and exterior space\u2014is entirely unique and one-of-a-kind, is not something you get to contract and work on every day. Approaching this job was highly demanding, requiring first and foremost a well-thought-out, comprehensive technical solution that would reconcile many critical factors, such as aesthetics, security, non-invasive installation methods, etc. Satisfaction with the completed work was mutual, and we can safely call it a win-win situation.\",\n      images: [\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_2315-e1555446764948.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_2473-e1555446679293.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_2472-e1555446661145.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_2471-e1555446703507.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_2481-e1555446753434.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_2315-e1555446764948.jpg\"\n      ]\n    },\n    {\n      title: \"Coworking Zadar - COIN\",\n      cover: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/COIN_ID_SOCIAL_MEDIA-PROFILE-PIC-SQ-1-2.png\",\n      type: \"gallery\",\n      desc: \"This is an interesting project from 2015 that we secured by winning a public tender issued by the City of Zadar. The project was launched by a young team of enthusiastic professionals employed by the City of Zadar, who recognized the potential they could leverage as a city by collaborating with EU funds to finance well-designed projects. They transformed a dilapidated and abandoned property into a space where many young entrepreneurs have access to all the necessary infrastructure and clean, modern working premises. The project was co-financed at roughly 85% by EU funds, with the remainder funded by city resources, which in practice meant strict and direct oversight from the EU. One of the main conditions was that the equipment had to possess certificates of origin from EU countries\u2014something nearly impossible to find given today's mass manufacturing in China. Fortunately, since we became certified installers for the Scottish manufacturer IndigoVision back in 2011, we managed to meet the specified requirement and successfully deliver on our task.\",\n      images: [\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/coworking-zadar.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/Coin_64-1024x682.jpg\"\n      ]\n    },\n    {\n      title: \"City of Zagreb\",\n      cover: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_1432-e1555447030468.jpg\",\n      type: \"gallery\",\n      desc: \"We contracted and began this project back in 2016 as a partner and subcontractor to the main contractor, the renowned company Vodotehnika d.d. We earned the opportunity based on a recommendation and were quickly invited by the investor, the City of Zagreb, to offer a video surveillance solution in cooperation with Vodotehnika's engineers\u2014something we are very proud of today. The project was quite demanding because it had to satisfy numerous factors: from a limited budget to an exceptionally large open public area. Furthermore, everything had to be discrete and aesthetically integrated into the environment to preserve a casual atmosphere for citizens while simultaneously providing adequate security. Today, we can say that we successfully blended our knowledge, experience, and Hikvision equipment into this project, proving that a less prominent brand can still be highly competitive.\",\n      images: [\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_1431-e1555447038212.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_1434-e1555447020921.jpg\",\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/IMG_1428.jpg\"        \n      ]\n    },\n    {\n      title: \"KRA\u0160 ECO PARK\",\n      cover: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/kra\u01611.jpg\",\n      type: \"gallery\",\n      desc: \"Eco Park Kra\u0161 is located near the village of Bratina in the municipality of Pisarovina, about 15 kilometers from Zagreb. This investment, valued at 7.5 million euros, marks Kra\u0161's first major project outside its core domain of confectionery manufacturing. It features holiday homes with apartments, bungalows, two lakes, swimming pools, children's playgrounds, sports fields, farms, and numerous areas planted with various agricultural crops\u2014all spanning an area of over 400 hectares. This presented a major challenge from a technical standpoint when Kra\u0161 management invited us in 2013 to design their video surveillance system. In cooperation with the company Markoja and our chief designer Mr. Petrac, a high-quality conceptual design was developed, which served as the foundation for building the fiber-optic infrastructure\u2014the main prerequisite for camera installation. Thanks to a lesser-known but high-quality camera brand from the Taiwanese manufacturer I-View, which we import directly, we were already able to offer 5 Mpix cameras at an exceptionally good price back in 2013. With regular maintenance, the system continues to function flawlessly and has proven its worth numerous times.\",\n      images: [\n        \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/04\/kra\u01612.jpg\"\n      ]\n    },\n    {\n      title: \"Tipico Sportwetten\",\n      cover: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2026\/07\/Tipico-Sportwetten-logo.jpg\",\n      type: \"video\",\n      desc: \"This story began quite by accident more than 5 years ago. On the recommendation of a satisfied client from neighboring Herzegovina, we landed and completed our first job for Tipico sports betting shops. That is how it all started, and it continues to this day; in the meantime, we have surpassed the milestone of one hundred branches secured by our security systems across Austria and Germany. Tipico is one of the largest international franchisors in the field of sports betting and casinos, headquartered in Malta\u2014with over 750 betting shops open in Germany alone. The Tipico concept differs greatly from the betting shops we are used to seeing in our local towns: they are designed according to the most modern standards, featuring numerous betting terminals, dozens of LCD TVs, and large video walls, often spanning several hundred square meters. Since 2013, Oliver Kahn has been the face of Tipico Sportwetten, alongside the slogan 'Ihre Wette in sicheren H\u00e4nden' (Your bet in safe hands).\",\n      video: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/06\/VIDEO-2019-02-02-23-54-15.mp4\"\n    },\n    {\n      title: \"Sports Bar 11\",\n      cover: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/06\/sportsbar11.png\",\n      type: \"video\",\n      desc: \"This is the Sports Bars concept that goes hand in hand with Tipico betting shops, mutually complementing one another with their diverse offerings. Very modernly designed, with clean and sharp lines, they emphasize the character of a true sports bar where guests can unwind and enjoy live match broadcasts on large, high-resolution TVs with top-tier sound systems. To ensure that the sense of security and relaxation is mutual for both guests and staff, we made sure that through our security systems, everyone spending time here can enjoy themselves with maximum safety, 24 hours a day.\",\n      video: \"https:\/\/alarmcentar.hr\/wp-content\/uploads\/2019\/06\/sportsbar_zuffenhausen1.mp4\"\n    }\n  ];\n\n  var grid = document.getElementById('ac-grid');\n  var overlay = document.getElementById('ac-modal-overlay');\n  var modalTitle = document.getElementById('ac-modal-title');\n  var modalDesc = document.getElementById('ac-modal-desc');\n  var modalBody = document.getElementById('ac-modal-body');\n  var closeBtn = document.getElementById('ac-modal-close');\n\n  \/\/ NEW: We move the entire modal to the end of the <body> tag as soon as the script runs\n  \/\/ This resolves the \"Stacking Context\" issue in WordPress and pushes it in front of the footer\n  if (overlay) {\n    document.body.appendChild(overlay);\n  }\n\n  \/\/ Render cards\n  projects.forEach(function (p, idx) {\n    var card = document.createElement('div');\n    card.className = 'ac-card';\n    card.setAttribute('tabindex', '0');\n    card.setAttribute('role', 'button');\n    card.innerHTML =\n      '<img decoding=\"async\" class=\"ac-card-img\" src=\"' + p.cover + '\" alt=\"' + p.title + '\">' +\n      '<div class=\"ac-card-title\">' + p.title + '<\/div>';\n    card.addEventListener('click', function () { openProject(idx); });\n    card.addEventListener('keypress', function (e) {\n      if (e.key === 'Enter' || e.key === ' ') openProject(idx);\n    });\n    grid.appendChild(card);\n  });\n\n  var currentGalleryIndex = 0;\n\n  function openProject(idx) {\n    var p = projects[idx];\n    modalTitle.textContent = p.title;\n    modalDesc.textContent = p.desc;\n    modalBody.innerHTML = '';\n\n    if (p.type === 'gallery') {\n      currentGalleryIndex = 0;\n      var galWrap = document.createElement('div');\n      galWrap.className = 'ac-gallery';\n\n      var main = document.createElement('div');\n      main.className = 'ac-gallery-main';\n      var mainImg = document.createElement('img');\n      mainImg.src = p.images[0];\n      mainImg.alt = p.title;\n      main.appendChild(mainImg);\n\n      if (p.images.length > 1) {\n        var prevBtn = document.createElement('button');\n        prevBtn.className = 'ac-gallery-nav ac-gallery-prev';\n        prevBtn.innerHTML = '\u276e';\n        prevBtn.setAttribute('aria-label', 'Previous image');\n\n        var nextBtn = document.createElement('button');\n        nextBtn.className = 'ac-gallery-nav ac-gallery-next';\n        nextBtn.innerHTML = '\u276f';\n        nextBtn.setAttribute('aria-label', 'Next image');\n\n        prevBtn.addEventListener('click', function () {\n          currentGalleryIndex = (currentGalleryIndex - 1 + p.images.length) % p.images.length;\n          updateGallery(p, mainImg, thumbsWrap);\n        });\n        nextBtn.addEventListener('click', function () {\n          currentGalleryIndex = (currentGalleryIndex + 1) % p.images.length;\n          updateGallery(p, mainImg, thumbsWrap);\n        });\n\n        main.appendChild(prevBtn);\n        main.appendChild(nextBtn);\n      }\n\n      galWrap.appendChild(main);\n\n      var thumbsWrap = document.createElement('div');\n      thumbsWrap.className = 'ac-gallery-thumbs';\n      p.images.forEach(function (imgSrc, i) {\n        var thumb = document.createElement('img');\n        thumb.src = imgSrc;\n        thumb.alt = p.title + ' - image ' + (i + 1);\n        if (i === 0) thumb.className = 'ac-active';\n        thumb.addEventListener('click', function () {\n          currentGalleryIndex = i;\n          updateGallery(p, mainImg, thumbsWrap);\n        });\n        thumbsWrap.appendChild(thumb);\n      });\n      if (p.images.length > 1) galWrap.appendChild(thumbsWrap);\n\n      modalBody.appendChild(galWrap);\n    } else if (p.type === 'video') {\n      var videoWrap = document.createElement('div');\n      videoWrap.className = 'ac-video-wrap';\n      videoWrap.innerHTML =\n        '<video controls playsinline preload=\"metadata\">' +\n        '<source src=\"' + p.video + '\" type=\"video\/mp4\">' +\n        'Your browser does not support the video tag.' +\n        '<\/video>';\n      modalBody.appendChild(videoWrap);\n    }\n\n    overlay.classList.add('ac-open');\n    document.body.style.overflow = 'hidden';\n  }\n\n  function updateGallery(p, mainImg, thumbsWrap) {\n    mainImg.src = p.images[currentGalleryIndex];\n    var thumbs = thumbsWrap.querySelectorAll('img');\n    thumbs.forEach(function (t, i) {\n      t.className = (i === currentGalleryIndex) ? 'ac-active' : '';\n    });\n  }\n\n  function closeModal() {\n    overlay.classList.remove('ac-open');\n    document.body.style.overflow = '';\n    var vid = modalBody.querySelector('video');\n    if (vid) vid.pause();\n  }\n\n  closeBtn.addEventListener('click', closeModal);\n  overlay.addEventListener('click', function (e) {\n    if (e.target === overlay) closeModal();\n  });\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'Escape' && overlay.classList.contains('ac-open')) closeModal();\n  });\n})();\n<\/script><\/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":{"inline_featured_image":false,"footnotes":""},"class_list":["post-974","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/pages\/974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/comments?post=974"}],"version-history":[{"count":6,"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/pages\/974\/revisions"}],"predecessor-version":[{"id":1793,"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/pages\/974\/revisions\/1793"}],"wp:attachment":[{"href":"https:\/\/alarmcentar.hr\/de\/wp-json\/wp\/v2\/media?parent=974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}