PageSourceSearch

https://www.kabelik.at/

html kabelik.at collected 2026-10-04 18:17:43 UTC 72,567 bytes, 1,226 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="description"
8        content="Explore our range of Remote Sensing, Geomatics and IT services designed to provide accurate and reliable information to help businesses make decisions.">
9    <title>Kabelik GmbH - Kabelik GmbH your Partner for Remote Sensing, Geomatics and IT Services</title>
10    <!-- Tailwind CSS for Styling -->
11    
11<script src="https://cdn.tailwindcss.com"></script>
11
12    <!-- Three.js for 3D Rendering -->
13    
13<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13
14    <!-- Font -->
15    <link
16        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=JetBrains+Mono:wght@400&display=swap"
17        rel="stylesheet">
18    <link rel="icon" type="image/png" href="assets/favicon.png">
19
20    <!-- NOTE: Tailwind Play CDN is used for development/demonstration. 
21         For production, a compiled CSS file or Tailwind CLI should be used. -->
22    <style>
23        body {
24            margin: 0;
25            overflow-x: hidden;
26            background: #050505;
27            color: white;
28            font-family: 'Inter', sans-serif;
29        }
30
31        #canvas-container {
32            position: fixed;
33            top: 0;
34            left: 0;
35            width: 100%;
36            height: 100vh;
37            z-index: -1;
38        }
39
40        .glass-panel {
41            background: rgba(20, 20, 20, 0.6);
42            backdrop-filter: blur(12px);
43            border: 1px solid rgba(255, 255, 255, 0.1);
44            border-radius: 12px;
45        }
46
47        .tech-font {
48            font-family: 'JetBrains Mono', monospace;
49        }
50
51        .gradient-text {
52            background: linear-gradient(90deg, #a2d032 0%, #003a5d 100%);
53            -webkit-background-clip: text;
54            background-clip: text;
55            -webkit-text-fill-color: transparent;
56        }
57
58        /* Custom Scrollbar */
59        ::-webkit-scrollbar {
60            width: 8px;
61        }
62
63        ::-webkit-scrollbar-track {
64            background: #050505;
65        }
66
67        ::-webkit-scrollbar-thumb {
68            background: #333;
69            border-radius: 4px;
70        }
71
72        /* Lightbox Custom Styles */
73        #image-lightbox {
74            transition: opacity 0.3s ease;
75        }
76        #lightbox-img {
77            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
78        }
79    </style>
80    
80<script type="application/ld+json">
81    {
82      "@context": "https://schema.org",
83      "@type": "Organization",
84      "name": "Kabelik GmbH",
85      "url": "https://www.kabelik.at",
86      "logo": "https://www.kabelik.at/assets/logo_transparent_1_278.png",
87      "description": "Expert Geomatics, LIDAR, and IT Services in Austria.",
88      "contactPoint": {
89        "@type": "ContactPoint",
90        "email": "[email protected]",
91        "contactType": "customer service"
92      },
93      "address": {
94        "@type": "PostalAddress",
95        "streetAddress": "Merbotogasse 58D",
96        "addressLocality": "Wiener Neustadt",
97        "postalCode": "2700",
98        "addressCountry": "AT"
99      }
100    }
101    </script>
101
102
103
104
105
106
107</head>
108
109<body>
110
111    <!-- 3D Background Layer -->
112    <div id="canvas-container"></div>
113
114    <!-- Navigation -->
115    <nav class="fixed top-0 w-full p-6 flex justify-between items-center z-50 mix-blend-difference">
116        <a href="#" class="flex items-center gap-2">
117            <img src="./assets/logo_transparent_1_278.png" alt="Kabelik Logo" class="h-10 w-auto">
118        </a>
119        <div class="hidden md:flex gap-2 lg:gap-3 xl:gap-4 text-[8px] lg:text-[9px] xl:text-[10px] font-bold tracking-widest text-[#a2d032] items-center">
120            <a href="#lidar" class="hover:text-white transition">LIDAR</a>
121            <a href="#bathymetry" class="hover:text-white transition">BATHYMETRY</a>
122            <a href="#photogrammetry" class="hover:text-white transition">PHOTOGRAMMETRY</a>
123            <a href="#gaussian-splatting" class="hover:text-white transition">GAUSSIAN SPLATTING</a>
124            <a href="#fmv" class="hover:text-white transition">FMV TELEMETRY</a>
125            <a href="#orthophoto" class="hover:text-white transition">ORTHOPHOTO</a>
126            <a href="#thermal-imaging" class="hover:text-white transition">THERMAL</a>
127            <a href="#hyperspectral" class="hover:text-white transition">HYPERSPECTRAL</a>
128            <a href="#web-gis" class="hover:text-white transition">WEB/GIS</a>
129            <a href="#it-services" class="hover:text-white transition">IT SERVICES</a>
130            <a href="#projects" class="hover:text-white transition">PROJECTS</a>
131            <a href="#about-us" class="hover:text-white transition">ABOUT US</a>
132            <a href="#contact" class="hover:text-white transition">CONTACT</a>
133        </div>
134        <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
135            class="border border-white/20 px-4 py-2 rounded-full text-[10px] sm:text-xs hover:bg-[#a2d032] hover:text-black hover:border-[#a2d032] transition flex items-center gap-2 font-bold tracking-widest text-[#a2d032]">
136            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
137                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 10l7-7m0 0l7 7m-7-7v18">
138                </path>
139            </svg>
140            TOP
141        </button>
142    </nav>
143
144    <!-- Main Content -->
145    <main>
146        <!-- HERO SECTION -->
147        <section class="h-screen flex items-center px-6 md:px-20">
148            <div class="max-w-2xl">
149                <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest">DIGITAL TWIN TECHNOLOGY</div>
150                <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6">
151                    Capture Reality.<br>
152                    <span class="gradient-text">Down to the pixel.</span>
153                </h1>
154                <p class="text-gray-400 text-lg mb-8 max-w-lg">
155                    Specialized in Airborne LiDAR, High-Res Bathymetry, and Photorealistic Gaussian Splatting for
156                    engineering and simulation.
157                </p>
158                <div class="flex gap-4">
159                    <a href="#projects"
160                        class="bg-[#a2d032] hover:bg-[#8ab32a] px-8 py-3 rounded-lg font-medium transition text-white inline-block text-center cursor-pointer">
161                        View Projects
162                    </a>
163                    <a href="#about-us"
164                        class="glass-panel px-8 py-3 rounded-lg font-medium hover:bg-white/10 transition inline-block text-center cursor-pointer">
165                        Our Tech Stack
166                    </a>
167                </div>
168            </div>
169
170            <!-- Floating UI Element simulating data -->
171            <div class="absolute right-10 bottom-20 glass-panel p-6 w-64 hidden md:block">
172                <div class="flex justify-between text-xs text-gray-400 mb-2">
173                    <span>POINTS LOADED</span>
174                    <span class="tech-font text-[#a2d032]">14,203,992</span>
175                </div>
176                <div class="flex justify-between text-xs text-gray-400 mb-2">
177                    <span>GROUND RES</span>
178                    <span class="tech-font">2 cm/px</span>
179                </div>
180                <div class="h-1 w-full bg-gray-700 mt-2 overflow-hidden rounded-full">
181                    <div class="h-full bg-[#a2d032] w-2/3"></div>
182                </div>
183            </div>
184        </section>
185
186        <!-- LIDAR SECTION -->
187        <section id="lidar"
188            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
189            <div class="grid md:grid-cols-2 gap-16 items-center">
190                <div class="glass-panel p-8 md:p-12">
191                    <h2 class="text-3xl font-bold mb-4">LIDAR</h2>
192                    <p class="text-gray-400 mb-6">
193                        We deliver classified point clouds with extreme density. From forestry management to
194                        infrastructure monitoring, our data integrates seamlessly into your GIS workflow.
195                    </p>
196                    <ul class="space-y-3 text-sm text-gray-300">
197                        <li class="flex items-center gap-2">
198                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> 20+ points / m² density
199                        </li>
200                        <li class="flex items-center gap-2">
201                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Full waveform analysis
202                        </li>
203                        <li class="flex items-center gap-2">
204                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> DTM & DSM generation
205                        </li>
206                    </ul>
207                    <div class="mt-8 pt-6 border-t border-white/10">
208                        <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Key Industry
209                            Capability</div>
210                        <div class="text-sm font-bold mb-1">Critical Infrastructure Monitoring</div>
211                        <p class="text-xs text-gray-400">Large-scale LiDAR & Orthophoto acquisition for European power
212                            grid expansion and corridor planning.</p>
213                    </div>
214                </div>
215                <!-- Interactive Potree Viewer -->
216                <div
217                    class="relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group">
218                    <iframe id="potree-iframe" src="lk6/lk.html" class="w-full h-full border-none" title="Potree Viewer"
219                        allowfullscreen></iframe>
220                    <button onclick="document.getElementById('potree-iframe').requestFullscreen()"
221                        class="absolute top-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 p-2.5 rounded-lg hover:border-[#a2d032] hover:text-[#a2d032] transition-all opacity-0 group-hover:opacity-100 flex items-center gap-2 text-[10px] font-bold tracking-widest z-10">
222                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
223                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
224                                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
225                            </path>
226                        </svg>
227                        FULLSCREEN
228                    </button>
229                </div>
230            </div>
231        </section>
232
233        <!-- BATHYMETRY SECTION -->
234        <section id="bathymetry"
235            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
236            <div class="grid md:grid-cols-2 gap-16 items-center">
237                <div class="order-2 md:order-1 space-y-4">
238                    <div class="glass-panel overflow-hidden rounded-xl border border-white/10">
239                        <img src="assets/cross_section.webp" alt="Bathymetry Cross Section"
240                            class="w-full h-auto opacity-80 hover:opacity-100 transition duration-500">
241                        <div class="p-4 bg-black/40 backdrop-blur-md">
242                            <span class="tech-font text-[10px] text-gray-400 uppercase">Riverbed Cross-Section
243                                Analysis</span>
244                        </div>
245                    </div>
246                    <div class="grid grid-cols-2 gap-4">
247                        <div class="glass-panel overflow-hidden rounded-xl border border-white/10 font-bold uppercase">
248                            <img src="assets/15_dsm.webp" alt="Digital Surface Model"
249                                class="w-full aspect-square object-cover opacity-60 hover:opacity-100 transition duration-500">
250                            <div class="p-2 text-center bg-black/40">
251                                <span class="tech-font text-[9px] text-gray-500">DSM VIEW</span>
252                            </div>
253                        </div>
254                        <div class="glass-panel overflow-hidden rounded-xl border border-white/10 font-bold uppercase">
255                            <img src="assets/16_dtm.webp" alt="Digital Terrain Model"
256                                class="w-full aspect-square object-cover opacity-60 hover:opacity-100 transition duration-500">
257                            <div class="p-2 text-center bg-black/40">
258                                <span class="tech-font text-[9px] text-gray-500">DTM VIEW</span>
259                            </div>
260                        </div>
261                    </div>
262                </div>
263                <div class="glass-panel p-8 md:p-12 order-1 md:order-2">
264                    <h2 class="text-3xl font-bold mb-4">BATHYMETRY</h2>
265                    <p class="text-gray-400 mb-6">
266                        Using green-wavelength laser technology, we map the underwater topography of rivers and lakes.
267                        Seamlessly merging land and water data into a single mesh.
268                    </p>
269                    <div class="flex gap-4 mt-4">
270                        <div class="text-center">
271                            <div class="text-2xl font-bold underline decoration-[#a2d032]">ALB</div>
272                            <div class="text-[9px] text-gray-500 tech-font uppercase">Active Sensors</div>
273                        </div>
274                        <div class="text-center border-l border-white/10 pl-4">
275                            <div class="text-2xl font-bold underline decoration-[#a2d032]">Refract</div>
276                            <div class="text-[9px] text-gray-500 tech-font uppercase">Correction</div>
277                        </div>
278                    </div>
279                    <div class="mt-8 pt-6 border-t border-white/10">
280                        <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Hydrology &
281                            Defense</div>
282                        <div class="text-sm font-bold mb-1">Sub-Surface Target Detection</div>
283                        <p class="text-xs text-gray-400">Providing specialized expertise in bathymetric LiDAR for
284                            riverbed modeling and underwater object identification.</p>
285                    </div>
286                </div>
287            </div>
288        </section>
289
290        <!-- PHOTOGRAMMETRY SECTION -->
291        <section id="photogrammetry"
292            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
293            <div class="grid md:grid-cols-2 gap-16 items-center">
294                <div class="glass-panel p-8 md:p-12">
295                    <div class="tech-font text-[#a2d032] text-xs mb-4">NEXT GEN VISUALIZATION</div>
296                    <h2 class="text-3xl font-bold mb-4">PHOTOGRAMMETRY</h2>
297                    <p class="text-gray-400 mb-6">
298                        Precision Digital Twins and Asset Monitoring. We deliver high-resolution 3D meshes and 3D Tiles
299                        for
300                        large-scale industrial infrastructure, refineries, and heritage sites, georeferenced to
301                        sub-centimeter accuracy.
302                    </p>
303                    <ul class="space-y-3 text-sm text-gray-300">
304                        <li class="flex items-center gap-2">
305                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Sub-centimeter accuracy &
306                            Georeferencing
307                        </li>
308                        <li class="flex items-center gap-2">
309                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> High-fidelity 3D Reconstruction
310                        </li>
311                        <li class="flex items-center gap-2">
312                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Seamless Web Integration (3D Tiles)
313                        </li>
314                    </ul>
315                    <div class="mt-8 pt-6 border-t border-white/10">
316                        <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Latest
317                            Technology</div>
318                        <div class="text-sm font-bold mb-1">Industrial Digital Twins</div>
319                        <p class="text-xs text-gray-400">Complete spatial reconstruction of complex industrial plants
320                            for planning, maintenance, and virtual site visits.</p>
321                    </div>
322                </div>
323                <!-- Interactive 3D Tiles Viewer -->
324                <div
325                    class="relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group">
326                    <iframe id="cesium-iframe" src="3dtiles.html" class="w-full h-full border-none"
327                        title="3D Tiles Viewer" allowfullscreen></iframe>
328                    <button onclick="document.getElementById('cesium-iframe').requestFullscreen()"
329                        class="absolute top-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 p-2.5 rounded-lg hover:border-[#a2d032] hover:text-[#a2d032] transition-all opacity-0 group-hover:opacity-100 flex items-center gap-2 text-[10px] font-bold tracking-widest z-10">
330                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
331                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
332                                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
333                            </path>
334                        </svg>
335                        FULLSCREEN
336                    </button>
337                </div>
338            </div>
339        </section>
340
341        <!-- GAUSSIAN SPLATTING SECTION -->
342        <section id="gaussian-splatting"
343            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
344            <div class="grid md:grid-cols-2 gap-16 items-center">
345                <div
346                    class="order-2 md:order-1 relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group bg-black">
347
348                    <div id="splat-placeholder"
349                        class="absolute inset-0 flex flex-col items-center justify-center bg-[#0a0a0a] z-20 transition-opacity duration-500">
350                        <!-- Add a subtle grid background for tech feel -->
351                        <div class="absolute inset-0 opacity-20"
352                            style="background-image: linear-gradient(#a2d032 1px, transparent 1px), linear-gradient(90deg, #a2d032 1px, transparent 1px); background-size: 40px 40px; background-position: center center;">
353                        </div>
354
355                        <div class="relative z-10 flex flex-col items-center">
356                            <div class="tech-font text-[#a2d032] text-[10px] uppercase tracking-widest mb-4">Interactive
357                                WebGL App</div>
358                            <button onclick="loadSplatViewer()"
359                                class="bg-[#a2d032] hover:bg-[#8ab32a] text-black px-6 py-3 rounded-lg font-bold tracking-widest uppercase transition-all hover:scale-105 flex items-center gap-3 shadow-[0_0_20px_rgba(162,208,50,0.3)] border border-[#c3f542]">
360                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
361                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
362                                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z">
363                                    </path>
364                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
365                                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
366                                </svg>
367                                LOAD 3D SPLAT VIEWER
368                            </button>
369                            <div class="text-[9px] text-gray-500 mt-4 tech-font uppercase">~High CPU usage • GPU
370                                Accelerated</div>
371                        </div>
372                    </div>
373
374                    <iframe id="splat-iframe" data-src="gsplat-lod-benchmark/spark-view.html?file=input-lod.rad"
375                        class="w-full h-full border-none" title="Gaussian Splatting Viewer" allowfullscreen></iframe>
376
377                    
377<script>
378                        function loadSplatViewer() {
379                            const iframe = document.getElementById('splat-iframe');
380                            const placeholder = document.getElementById('splat-placeholder');
381                            
382                            // Detect if user is on a mobile device
383                            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
384                            let src = iframe.getAttribute('data-src');
385                            if (isMobile) {
386                                src = "gsplat-lod-benchmark/mobile.html?file=input-lod.rad";
387                            }
388                            
389                            iframe.src = src;
390                            placeholder.style.opacity = '0';
391                            setTimeout(() => placeholder.style.display = 'none', 500);
392                        }
393                    </script>
393
394
395                    <button onclick="document.getElementById('splat-iframe').requestFullscreen()"
396                        class="absolute top-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 p-2.5 rounded-lg hover:border-[#a2d032] hover:text-[#a2d032] transition-all opacity-0 group-hover:opacity-100 flex items-center gap-2 text-[10px] font-bold tracking-widest z-10">
397                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
398                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
399                                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
400                            </path>
401                        </svg>
402                        FULLSCREEN
403                    </button>
404                </div>
405                <div class="glass-panel p-8 md:p-12 order-1 md:order-2">
406                    <div class="tech-font text-[#a2d032] text-xs mb-4">NOVEL VIEW SYNTHESIS</div>
407                    <h2 class="text-3xl font-bold mb-4">GAUSSIAN SPLATTING</h2>
408                    <p class="text-gray-400 mb-6">
409                        Achieving photorealistic details through state-of-the-art volumetric representation. This model
410                        was created using a nadir only dataset out of a helicopter, achieving around 5cm resolution.
411                    </p>
412                    <ul class="space-y-3 text-sm text-gray-300">
413                        <li class="flex items-center gap-2">
414                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Helicopter-based acquisition
415                        </li>
416                        <li class="flex items-center gap-2">
417                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Nadir-only image capture
418                        </li>
419                        <li class="flex items-center gap-2">
420                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> ~5cm spatial resolution
421                        </li>
422                    </ul>
423                    <div class="mt-8 pt-6 border-t border-white/10">
424                        <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Performance
425                        </div>
426                        <div class="text-sm font-bold mb-1">High-Speed Web Rendering</div>
427                        <p class="text-xs text-gray-400 mb-4">Real-time exploration of photorealistic scenes directly in
428                            your browser.</p>
429                        <a href="./gsplat-lod-benchmark/playcanvas-view.html" target="_blank"
430                            class="inline-flex items-center gap-2 border border-white/20 px-4 py-2.5 rounded-lg text-[10px] hover:bg-[#a2d032] hover:text-[#050505] hover:border-[#a2d032] transition font-bold tracking-widest bg-white/5">
431                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
432                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
433                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
434                                </path>
435                            </svg>
436                            OPEN ADVANCED SPLAT EDITOR
437                        </a>
438                    </div>
439                </div>
440            </div>
441        </section>
442
443        <!-- FULL MOTION VIDEO (FMV) SECTION -->
444        <section id="fmv"
445            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
446            <div class="grid md:grid-cols-2 gap-16 items-center">
447                <div class="glass-panel p-8 md:p-12">
448                    <div class="tech-font text-[#a2d032] text-xs mb-4">REAL-TIME AIRBORNE SENSING</div>
449                    <h2 class="text-3xl font-bold mb-4">FULL MOTION VIDEO (FMV)</h2>
450                    <p class="text-gray-400 mb-6">
451                        Synchronized airborne video streaming with embedded MISB ST 0601 KLV telemetry. Our web viewer projects video live onto the 3D Cesium globe terrain while synchronizing aircraft flight paths and ground sensor footprints.
452                    </p>
453                    <ul class="space-y-3 text-sm text-gray-300">
454                        <li class="flex items-center gap-2">
455                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> 3-View Synchronized Playback (Video, 3D Cesium, 2D Map)
456                        </li>
457                        <li class="flex items-center gap-2">
458                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> MISB ST 0601 / ST 0102 KLV Telemetry Decoding
459                        </li>
460                        <li class="flex items-center gap-2">
461                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Client-Side Video Upload & Live Telemetry Parsing
462                        </li>
463                    </ul>
464                    <div class="mt-8 pt-6 border-t border-white/10">
465                        <div class="text-[10px] text-[#a2d032] tech-font mb-2 tracking-widest uppercase">Airborne Intelligence</div>
466                        <div class="text-sm font-bold mb-1">Georectified Video Projection</div>
467                        <p class="text-xs text-gray-400 mb-4">Interactive target tracking and footprint projection directly in the web browser.</p>
468                        <a href="fmv.html" target="_blank"
469                            class="inline-flex items-center gap-2 bg-[#a2d032] hover:bg-[#8ab32a] text-black px-6 py-3 rounded-lg font-bold tracking-widest uppercase transition-all hover:scale-105 shadow-[0_0_20px_rgba(162,208,50,0.3)]">
470                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
471                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
472                            </svg>
473                            LAUNCH FMV VIEWER
474                        </a>
475                    </div>
476                </div>
477                <!-- Interactive FMV Preview -->
478                <div class="relative h-[560px] md:h-[700px] rounded-xl overflow-hidden glass-panel border border-white/10 group">
479                    <iframe src="fmv.html" class="w-full h-full border-none" title="FMV Telemetry Viewer" allowfullscreen></iframe>
480                </div>
481            </div>
482        </section>
483
484        <!-- ORTHOPHOTO SECTION -->
485        <section id="orthophoto"
486            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
487            <div class="grid md:grid-cols-2 gap-16 items-center">
488                <div class="glass-panel p-8 md:p-12">
489                    <div class="tech-font text-[#a2d032] text-xs mb-4">GEOMETRICALLY CORRECTED IMAGERY</div>
490                    <h2 class="text-3xl font-bold mb-4">ORTHOPHOTO</h2>
491                    <p class="text-gray-400 mb-6">
492                        We produce highly accurate, orthorectified aerial imagery with uniform scale and precise map
493                        projections. Unlike raw aerial photographs, our orthophotos are fully corrected for topographic
494                        relief, lens distortion, and camera tilt.
495                    </p>
496                    <ul class="space-y-3 text-sm text-gray-300">
497                        <li class="flex items-center gap-2">
498                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Absolute geometric accuracy for
499                            measurements
500                        </li>
501                        <li class="flex items-center gap-2">
502                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Seamless GIS and CAD integration
503                        </li>
504                        <li class="flex items-center gap-2">
505                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Up to 3cm Ground Sample Distance
506                            (GSD)
507                        </li>
508                    </ul>
509                </div>
510                <div
511                    class="relative h-[300px] md:h-[500px] rounded-xl overflow-hidden glass-panel border border-white/10 group">
512                    <img src="assets/39_ortho.webp" alt="Orthophoto 6cm GSD Lanzenkirchen"
513                        class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
514                    <div
515                        class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 max-w-[90%] text-right">
516                        <span class="tech-font text-[9px] text-[#a2d032] block mb-1">DATA SAMPLE</span>
517                        <span class="tech-font text-[10px] text-gray-300">Orthophoto 6cm GSD, Lanzenkirchen,
518                            Austria</span>
519                    </div>
520                </div>
521            </div>
522        </section>
523
524        <!-- THERMAL IMAGING SECTION -->
525        <section id="thermal-imaging"
526            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
527            <div class="grid md:grid-cols-2 gap-16 items-center">
528                <div
529                    class="order-2 md:order-1 relative h-[300px] md:h-[500px] rounded-xl overflow-hidden glass-panel border border-white/10 group">
530                    <img src="assets/40_thermal_imaging.webp" alt="Thermal Orthophoto 25cm GSD Schönkirchen"
531                        class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
532                    <div
533                        class="absolute bottom-4 left-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 max-w-[90%]">
534                        <span class="tech-font text-[9px] text-[#a2d032] block mb-1">DATA SAMPLE</span>
535                        <span class="tech-font text-[10px] text-gray-300">Thermal Orthophoto 25cm GSD, Schönkirchen,
536                            Austria</span>
537                    </div>
538                </div>
539                <div class="glass-panel p-8 md:p-12 order-1 md:order-2">
540                    <div class="tech-font text-[#a2d032] text-xs mb-4">INFRARED THERMOGRAPHY (IRT)</div>
541                    <h2 class="text-3xl font-bold mb-4">THERMAL IMAGING</h2>
542                    <p class="text-gray-400 mb-6">
543                        Our advanced thermal imaging sensors detect long-infrared radiation (9–14 µm) to reveal thermal
544                        signatures completely invisible to the naked eye. By capturing precise temperature distributions
545                        across large geographical areas, our radiometric thermal orthophotos enable critical
546                        applications.
547                    </p>
548                    <ul class="space-y-3 text-sm text-gray-300">
549                        <li class="flex items-center gap-2">
550                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> District heating leak detection
551                        </li>
552                        <li class="flex items-center gap-2">
553                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Sub-surface pipeline monitoring
554                        </li>
555                        <li class="flex items-center gap-2">
556                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Night-time / zero-illumination
557                            operability
558                        </li>
559                    </ul>
560                </div>
561            </div>
562        </section>
563
564        <!-- HYPERSPECTRAL IMAGING SECTION -->
565        <section id="hyperspectral"
566            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
567            <div class="grid md:grid-cols-2 gap-16 items-center">
568                <div class="glass-panel p-8 md:p-12">
569                    <div class="tech-font text-[#a2d032] text-xs mb-4">MATERIAL CLASSIFICATION & SPECTRAL ANALYSIS</div>
570                    <h2 class="text-3xl font-bold mb-4">HYPERSPECTRAL IMAGING</h2>
571                    <p class="text-gray-400 mb-6">
572                        Capturing continuous spectral information across hundreds of narrow bands, our hyperspectral
573                        workflows provide detailed biochemical and physical insights. We deliver atmospherically
574                        corrected (VNIR/SWIR) data cubes that allow for precise material identification.
575                    </p>
576                    <ul class="space-y-3 text-sm text-gray-300">
577                        <li class="flex items-center gap-2">
578                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> High-fidelity spectrum per pixel
579                        </li>
580                        <li class="flex items-center gap-2">
581                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Vegetation health & agricultural
582                            analysis
583                        </li>
584                        <li class="flex items-center gap-2">
585                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Environmental monitoring & mineral
586                            mapping
587                        </li>
588                    </ul>
589                </div>
590                <div
591                    class="relative h-[300px] md:h-[500px] rounded-xl overflow-hidden glass-panel border border-white/10 group">
592                    <img src="assets/26_vnir_swir_gras_asphalt-1.webp" alt="Hyperspectral Flightstrip"
593                        class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
594                    <div
595                        class="absolute bottom-4 right-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 max-w-[90%] text-right">
596                        <span class="tech-font text-[9px] text-[#a2d032] block mb-1">SPECTRAL COMPARISON</span>
597                        <span class="tech-font text-[10px] text-gray-300">VNIR/SWIR. Asphalt vs Grass spectra in St.
598                            Andrä, Austria.</span>
599                    </div>
600                </div>
601            </div>
602        </section>
603
604        <!-- WEB/GIS SECTION -->
605        <section id="web-gis"
606            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
607            <div class="grid md:grid-cols-2 gap-16 items-center">
608                <div class="glass-panel p-8 md:p-12">
609                    <div class="tech-font text-[#a2d032] text-xs mb-4">SPATIAL DATA ARCHITECTURE</div>
610                    <h2 class="text-3xl font-bold mb-4">WEB/GIS</h2>
611                    <p class="text-gray-400 mb-6">
612                        Custom Geoinformation data handling, conversion and enterprise management. We architect
613                        high-performance Spatial Data Infrastructures for seamless data access and mobile field
614                        workflows.
615                    </p>
616                    <ul class="space-y-4 text-sm text-gray-300">
617                        <li class="flex items-start gap-3">
618                            <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span>
619                            <div>
620                                <span class="font-bold text-white">GeoNode SDI Stack</span>
621                                <p class="text-xs text-gray-400 mt-0.5">Enterprise spatial catalog for mapping, sharing,
622                                    and securely managing vector and raster datasets.</p>
623                            </div>
624                        </li>
625                        <li class="flex items-start gap-3">
626                            <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span>
627                            <div>
628                                <span class="font-bold text-white">GeoServer & QGIS Server</span>
629                                <p class="text-xs text-gray-400 mt-0.5">High-performance rendering engines providing
630                                    standardized OGC-compliant WMS and WFS web services.</p>
631                            </div>
632                        </li>
633                        <li class="flex items-start gap-3">
634                            <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span>
635                            <div>
636                                <span class="font-bold text-white">Mergin Maps Server</span>
637                                <p class="text-xs text-gray-400 mt-0.5">Enabling collaborative field data collection
638                                    natively synchronized with central enterprise databases.</p>
639                            </div>
640                        </li>
641                        <li class="flex items-start gap-3">
642                            <span class="w-2 h-2 bg-[#a2d032] rounded-full mt-1.5 flex-shrink-0"></span>
643                            <div>
644                                <span class="font-bold text-white">QWC2 Integrated Dashboards</span>
645                                <p class="text-xs text-gray-400 mt-0.5">Custom QGIS Web Client 2 implementations for
646                                    deeply interactive web mapping applications and analysis tools.</p>
647                            </div>
648                        </li>
649                    </ul>
650                </div>
651                <!-- QWC2 Interactive Map Viewer -->
652                <div class="h-full flex flex-col justify-center relative">
653                    <div class="glass-panel overflow-hidden rounded-xl border border-white/10 group relative">
654                        <img src="assets/qwc2.webp" alt="QWC2 Web GIS Client"
655                            class="w-full h-auto opacity-80 group-hover:opacity-100 transition duration-500">
656                        <div
657                            class="absolute bottom-4 left-4 bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-lg border border-white/10">
658                            <span class="tech-font text-[10px] text-[#a2d032] uppercase tracking-widest">QGIS Web Client
659                                2</span>
660                        </div>
661                    </div>
662                </div>
663            </div>
664        </section>
665
666        <!-- IT SERVICES SECTION -->
667        <section id="it-services"
668            class="min-h-[80vh] flex flex-col justify-center px-6 md:px-20 relative border-t border-white/5">
669            <div class="grid md:grid-cols-2 gap-16 items-center">
670                <div
671                    class="order-2 md:order-1 relative h-[300px] md:h-full rounded-xl overflow-hidden glass-panel border border-white/10 group">
672                    <img src="assets/41_msf7-jpg.webp" alt="IT Services Infrastructure"
673                        class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500">
674                    <div
675                        class="absolute top-4 left-4 bg-black/80 backdrop-blur-md px-4 py-2.5 rounded-lg border border-[#a2d032]/30 flex flex-col gap-0.5">
676                        <span class="tech-font text-[11px] text-[#a2d032] font-bold">msf6 > run
677                            post/enterprise/infrastructure_pwn</span>
678                        <span class="tech-font text-[9px] text-gray-400">[*] IT-Sec confirmed. We break our servers so
679                            we know how to fix yours.</span>
680                    </div>
681                </div>
682                <div class="glass-panel p-8 md:p-12 order-1 md:order-2">
683                    <h2 class="text-3xl font-bold mb-4">IT SERVICES</h2>
684                    <p class="text-gray-400 mb-6">
685                        Professional IT infrastructure specialized in Linux, Mergin, Postgres (PostGIS), and QGIS Server
686                        ecosystems. We also provide comprehensive Windows administration and support.
687                    </p>
688                    <ul class="space-y-3 text-sm text-gray-300">
689                        <li class="flex items-center gap-2">
690                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Linux (Debian/Ubuntu) & Windows
691                            Expert
692                        </li>
693                        <li class="flex items-center gap-2">
694                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Scalable Cloud Infrastructure
695                            (Nginx/Docker)
696                        </li>
697                        <li class="flex items-center gap-2">
698                            <span class="w-2 h-2 bg-[#a2d032] rounded-full"></span> Enterprise Architecture & 24/7
699                            Operations
700                        </li>
701                    </ul>
702                </div>
703            </div>
704        </section>
705
706        <!-- PROJECTS HIGHLIGHTS -->
707        <section id="projects" class="py-20 px-6 md:px-20 border-t border-white/5 bg-white/[0.02]">
708            <div class="max-w-6xl mx-auto">
709                <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest text-center">EXCELLENCE IN EXECUTION
710                </div>
711                <h2 class="text-4xl font-bold mb-12 text-center">SELECTED CASE STUDIES</h2>
712                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
713                    <!-- Project 1 -->
714                    <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500">
715                        <div class="flex justify-between items-start mb-4">
716                            <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Transmission
717                                Grid</span>
718                        </div>
719                        <h4 class="font-bold mb-2">Power Corridor Monitoring</h4>
720                        <p class="text-xs text-gray-400 mb-4">Operational LiDAR and Orthophoto campaigns for major
721                            European power transmission networks.</p>
722                        <div class="text-[9px] text-gray-500 tech-font uppercase">LiDAR • Orthophoto • Corridor Mapping
723                        </div>
724                    </div>
725                    <!-- Project 2 -->
726                    <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500">
727                        <div class="flex justify-between items-start mb-4">
728                            <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Energy
729                                Sector</span>
730                        </div>
731                        <h4 class="font-bold mb-2">Aerial Infrastructure Thermography</h4>
732                        <p class="text-xs text-gray-400 mb-4">Large-scale thermal monitoring of pipeline networks and
733                            industrial assets for anomaly detection.</p>
734                        <div class="text-[9px] text-gray-500 tech-font uppercase">Thermal Imaging • Asset Management
735                        </div>
736                    </div>
737                    <!-- Project 3 -->
738                    <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500">
739                        <div class="flex justify-between items-start mb-4">
740                            <span
741                                class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Sub-Aquatic</span>
742                        </div>
743                        <h4 class="font-bold mb-2">Bathymetric Mine Detection</h4>
744                        <p class="text-xs text-gray-400 mb-4">Expert consulting and R&D for underwater target
745                            identification through LiDAR bathymetry.</p>
746                        <div class="text-[9px] text-gray-500 tech-font uppercase">Bathy-LiDAR • R&D • Defense Tech</div>
747                    </div>
748                    <!-- Project 4 -->
749                    <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500">
750                        <div class="flex justify-between items-start mb-4">
751                            <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Industry
752                                4.0</span>
753                        </div>
754                        <h4 class="font-bold mb-2">Industrial Facility Digital Twin</h4>
755                        <p class="text-xs text-gray-400 mb-4">Generation of high-precision 3D meshes and Gaussian Splats
756                            for petrochemical complex management.</p>
757                        <div class="text-[9px] text-gray-500 tech-font uppercase">Gaussian Splats • Asset Management
758                        </div>
759                    </div>
760                    <!-- Project 5 -->
761                    <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500">
762                        <div class="flex justify-between items-start mb-4">
763                            <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">IT & GIS</span>
764                        </div>
765                        <h4 class="font-bold mb-2">Fiber-Optic GIS Transformation</h4>
766                        <p class="text-xs text-gray-400 mb-4">Transition of legacy GIS landscapes to high-performance
767                            Open-Source stacks based on PostGIS.</p>
768                        <div class="text-[9px] text-gray-500 tech-font uppercase">QGIS Server • PostGIS • Automation
769                        </div>
770                    </div>
771                    <!-- Project 6 -->
772                    <div class="glass-panel p-6 hover:border-[#a2d032]/50 transition duration-500">
773                        <div class="flex justify-between items-start mb-4">
774                            <span class="text-[10px] bg-[#a2d032]/10 text-[#a2d032] px-2 py-1 rounded">Hydrology</span>
775                        </div>
776                        <h4 class="font-bold mb-2">Riverbed & Sediment Analysis</h4>
777                        <p class="text-xs text-gray-400 mb-4">Merging terrestrial and bathymetric data for seamless
778                            terrain modeling and water management.</p>
779                        <div class="text-[9px] text-gray-500 tech-font uppercase">Terrasolid • LiDAR Bathymetry</div>
780                    </div>
781                </div>
782            </div>
783        </section>
784
785        <!-- ABOUT US SECTION -->
786        <section id="about-us" class="py-20 px-6 md:px-20 border-t border-white/5">
787            <div class="max-w-6xl mx-auto">
788                <div class="grid md:grid-cols-3 gap-12">
789                    <div class="md:col-span-1">
790                        <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest">ESTABLISHED EXPERTISE</div>
791                        <h2 class="text-4xl font-bold mb-8">KABELIK GMBH</h2>
792                        <div class="glass-panel p-8">
793                            <p class="text-sm text-gray-400 leading-relaxed italic">
794                                "Bridging the gap between operational aviation experience and cutting-edge
795                                Geoinformatics."
796                            </p>
797                        </div>
798                        <div class="mt-8 space-y-4">
799                            <div class="glass-panel p-6">
800                                <h4
801                                    class="text-[10px] font-bold mb-4 tech-font text-gray-500 uppercase tracking-widest">
802                                    Organizational Core</h4>
803                                <div class="flex flex-wrap gap-2">
804                                    <span
805                                        class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">GmbH
806                                        Entity</span>
807                                    <span
808                                        class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">Remote
809                                        Sensing</span>
810                                    <span
811                                        class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">Enterprise
812                                        IT</span>
813                                    <span
814                                        class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">GIS
815                                        Architecture</span>
816                                    <span
817                                        class="px-2 py-1 bg-white/5 border border-white/10 rounded text-[9px] text-gray-400">Aviation
818                                        Operations</span>
819                                </div>
820                            </div>
821                        </div>
822                    </div>
823                    <div class="md:col-span-2 space-y-10">
824                        <div>
825                            <p class="text-2xl text-gray-200 leading-tight mb-6">
826                                Professional Remote Sensing, Geomatics, and IT Infrastructure.
827                            </p>
828                            <p class="text-gray-400 leading-relaxed text-sm mb-6">
829                                Kabelik GmbH is a specialized provider of high-end geospatial services and complex IT
830                                infrastructure solutions. Based in Wiener Neustadt, we operate at the intersection of
831                                aerial data acquisition and advanced data processing.
832                            </p>
833                            <p class="text-gray-400 leading-relaxed text-sm">
834                                Our focus lies on the entire value chain of remote sensing: from the strategic planning
835                                and execution of sensor missions to the high-performance processing and refinement of
836                                massive datasets into actionable Business Intelligence. We support industrial partners
837                                and utility providers in managing complex spatial data—efficie
837ntly, scalably, and at the
838                                highest technological level.
839                            </p>
840                        </div>
841
842                        <div class="grid md:grid-cols-2 gap-12">
843                            <div>
844                                <h4 class="text-[#a2d032] tech-font text-[10px] uppercase tracking-widest mb-6">Service
845                                    Philosophy</h4>
846                                <div class="space-y-6">
847                                    <div class="relative pl-6 border-l border-[#a2d032]/30">
848                                        <div class="absolute -left-[5px] top-0 w-2 h-2 bg-[#a2d032] rounded-full"></div>
849                                        <div class="text-sm font-bold">End-to-End Mission Management</div>
850                                        <p class="text-xs text-gray-400 mt-2">Integrating flight operations with data
851                                            analysis to ensure zero-loss information transfer.</p>
852                                    </div>
853                                    <div class="relative pl-6 border-l border-white/10">
854                                        <div class="text-sm font-bold">Open-Source Excellence</div>
855                                        <p class="text-xs text-gray-400 mt-2">Developing scalable, vendor-independent
856                                            stacks based on QGIS, PostGIS, and Linux.</p>
857                                    </div>
858                                    <div class="relative pl-6 border-l border-white/10">
859                                        <div class="text-sm font-bold">Infrastructure Reliability</div>
860                                        <p class="text-xs text-gray-400 mt-2">Providing enterprise-grade IT environments
861                                            for critical geospatial data processing.</p>
862                                    </div>
863                                </div>
864                            </div>
865                            <div>
866                                <h4 class="text-[#a2d032] tech-font text-[10px] uppercase tracking-widest mb-6">
867                                    Certifications & Expertise</h4>
868                                <div class="space-y-6">
869                                    <div class="relative pl-6 border-l border-white/10">
870                                        <div class="text-sm font-bold">Geoinformation Science</div>
871                                        <p class="text-xs text-gray-400">Deep expertise in LiDAR stripping, refraction
872                                            correction, and multi-sensor fusion.</p>
873                                    </div>
874                                    <div class="relative pl-6 border-l border-white/10">
875                                        <div class="text-sm font-bold">IT Management & Strategy</div>
876                                        <p class="text-xs text-gray-400">Systemic approach to ITIL standards, cloud
877                                            architecture, and data security.</p>
878                                    </div>
879                                    <div class="mt-8 pt-8 border-t border-white/5">
880                                        <div class="text-[10px] text-gray-500 tech-font uppercase tracking-widest mb-4">
881                                            Strategic Partners</div>
882                                        <div class="text-[11px] text-gray-400 space-y-2">
883                                            <div>• Airborne Operations Network</div>
884                                            <div>• Open-Source GIS Community</div>
885                                            <div>• High-Performance Computing Partners</div>
886                                        </div>
887                                    </div>
888                                </div>
889                            </div>
890                        </div>
891                    </div>
892                </div>
893            </div>
894        </section>
895        <!-- FOOTER -->
896        <footer id="contact" class="py-20 border-t border-white/5 text-center">
897            <h2 class="text-2xl font-bold mb-8">Kabelik GmbH</h2>
898            <div class="text-sm text-gray-400 mb-8 tech-font space-x-4">
899                <a href="mailto:[email protected]" class="hover:text-[#a2d032]">[email protected]</a>
900            </div>
901            <div class="text-sm text-gray-600 tech-font">
902                Kabelik GmbH, Merbotogasse 58D<br>
903                2700 Wiener Neustadt<br>
904                AUSTRIA
905            </div>
906            <div class="mt-8 text-xs">
907                <a href="legal.html" class="text-gray-500 hover:text-white transition underline">Privacy Policy & Legal
908                    Notice</a>
909            </div>
910        </footer>
911
912        <!-- AIRCRAFT GALLERY -->
913        <section id="aircraft" class="py-20 px-6 md:px-20 border-t border-white/5">
914            <div class="max-w-6xl mx-auto">
915                <div class="tech-font text-[#a2d032] text-xs mb-4 tracking-widest text-center">BEHIND THE SCENES</div>
916                <h2 class="text-4xl font-bold mb-12 text-center">AERIAL OPERATIONS & IMPRESSIONS</h2>
917                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
918                    <div
919                        class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative lg:col-span-2 h-64 md:h-80">
920                        <img src="assets/aircraft/01_aircraft_kabelik.webp" alt="Flight Operations"
921                            class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
922                    </div>
923                    <div
924                        class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80">
925                        <img src="assets/aircraft/IMG_20140702_125323.webp" alt="Aircraft Pre-flight"
926                            class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
927                    </div>
928                    <div
929                        class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80">
930                        <img src="assets/aircraft/IMG_4190.webp" alt="Aerial Mission"
931                            class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
932                    </div>
933                    <div
934                        class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80">
935                        <img src="assets/aircraft/PXL_20250110_111320888.
935webp" alt="Aircraft Exterior"
936                            class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
937                    </div>
938                    <div
939                        class="glass-panel overflow-hidden border border-white/10 rounded-xl group relative h-64 md:h-80">
940                        <img src="assets/aircraft/PXL_20250112_152612423.webp" alt="Aircraft Detailing"
941                            class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition duration-500 group-hover:scale-105">
942                    </div>
943                </div>
944            </div>
945        </section>
946
947    </main>
948
949    <!-- COOKIE BANNER -->
950    <div id="cookie-banner"
951        class="fixed bottom-0 left-0 w-full z-[9999] p-6 translate-y-full transition-transform duration-500 flex justify-center pointer-events-none">
952        <div
953            class="glass-panel p-6 md:p-8 w-full max-w-4xl pointer-events-auto border-t-2 border-[#a2d032] bg-[#050505]/95 shadow-2xl">
954            <h3 class="text-xl font-bold mb-3 text-white">Privacy & Cookies</h3>
955            <p class="text-sm text-gray-400 mb-6 leading-relaxed">
956                We use functional cookies to provide you with the best possible experience and continuously improve our
957                website.
958                Non-essential cookies or third-party tracking tools are only loaded with your active consent.
959                You can change your decision at any time. For more information, please read our
960                <a href="legal.html" class="text-[#a2d032] underline hover:text-white transition">Privacy Policy</a>.
961            </p>
962            <div class="flex flex-col sm:flex-row gap-4 justify-end">
963                <button onclick="handleCookieConsent(false)"
964                    class="px-6 py-2.5 rounded font-bold text-sm border border-white/20 text-white bg-white/5 hover:bg-white/15 transition text-center w-full sm:w-auto focus:outline-none">
965                    Essential Only (Reject)
966                </button>
967                <button onclick="handleCookieConsent(true)"
968                    class="px-6 py-2.5 rounded font-bold text-sm border border-white/20 text-white bg-white/5 hover:bg-white/15 transition text-center w-full sm:w-auto focus:outline-none">
969                    Accept All
970                </button>
971            </div>
972        </div>
973    </div>
974
975    
975<script>
976        document.addEventListener("DOMContentLoaded", () => {
977            const banner = document.getElementById("cookie-banner");
978            const consent = localStorage.getItem("cookie_consent");
979
980            if (!consent) {
981                setTimeout(() => {
982                    banner.classList.remove("translate-y-full");
983                }, 1000);
984            } else {
985                applyConsent(consent === "true");
986            }
987        });
988
989        function handleCookieConsent(accepted) {
990            localStorage.setItem("cookie_consent", accepted);
991            const banner = document.getElementById("cookie-banner");
992            banner.classList.add("translate-y-full");
993            applyConsent(accepted);
994        }
995
996        function applyConsent(accepted) {
997            if (accepted) {
998                console.log("Nicht-essenzielle Cookies und Scripte werden geladen...");
999                // Hook to load non-essential scripts (e.g., analytics)
1000            } else {
1001                console.log("Nur essenzielle Cookies/Scripts sind aktiv.");
1002            }
1003        }
1004    </script>
1004
1005
1006    <!-- Three.js Logic for Background Animation -->
1007    
1007<script>
1008        const scene = new THREE.Scene();
1009        scene.fog = new THREE.FogExp2(0x050505, 0.002);
1010
1011        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
1012        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
1013
1014        renderer.setSize(window.innerWidth, window.innerHeight);
1015        document.getElementById('canvas-container').appendChild(renderer.domElement);
1016
1017        // CREATE PARTICLES (Simulating LiDAR Point Cloud)
1018        const geometry = new THREE.BufferGeometry();
1019        const vertices = [];
1020        const colors = [];
1021
1022        const color1 = new THREE.Color(0xffffff);
1023        const color2 = new THREE.Color(0x999999);
1024
1025        for (let i = 0; i < 5000; i++) {
1026            const x = (Math.random() - 0.5) * 2000;
1027            const y = (Math.random() - 0.5) * 2000;
1028            const z = (Math.random() - 0.5) * 2000;
1029            vertices.push(x, y, z);
1030
1031            // Gradient color based on height (Y)
1032            const mixedColor = color1.clone().lerp(color2, Math.random());
1033            colors.push(mixedColor.r, mixedColor.g, mixedColor.b);
1034        }
1035
1036        geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
1037        geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
1038
1039        const material = new THREE.PointsMaterial({
1040            size: 3,
1041            vertexColors: true,
1042            transparent: true,
1043            opacity: 0.8
1044        });
1045
1046        const starField = new THREE.Points(geometry, material);
1047        scene.add(starField);
1048
1049        camera.position.z = 100;
1050
1051        // ANIMATION LOOP
1052        let mouseX = 0;
1053        let mouseY = 0;
1054
1055        document.addEventListener('mousemove', (e) => {
1056            mouseX = e.clientX - window.innerWidth / 2;
1057            mouseY = e.clientY - window.innerHeight / 2;
1058        });
1059
1060        function animate() {
1061            requestAnimationFrame(animate);
1062
1063            // Optimization: Pause rendering if scrolled past the hero section to save battery/CPU
1064            if (window.scrollY > window.innerHeight * 1.2) return;
1065
1066            // Gentle rotation
1067            starField.rotation.x += 0.0005;
1068            starField.rotation.y += 0.0005;
1069
1070            // Interactive movement
1071            camera.position.x += (mouseX * 0.05 - camera.position.x) * 0.05;
1072            camera.position.y += (-mouseY * 0.05 - camera.position.y) * 0.05;
1073            camera.lookAt(scene.position);
1074
1075            renderer.render(scene, camera);
1076        }
1077
1078        animate();
1079
1080        // Handle Resize
1081        window.addEventListener('resize', () => {
1082            camera.aspect = window.innerWidth / window.innerHeight;
1083            camera.updateProjectionMatrix();
1084            renderer.setSize(window.innerWidth, window.innerHeight);
1085        });
1086    </script>
1086
1087
1088    <!-- Image Lightbox Modal -->
1089    <div id="image-lightbox" class="fixed inset-0 z-[10000] hidden bg-black/90 backdrop-blur-xl flex flex-col justify-center items-center p-4 opacity-0">
1090        <!-- Close Button -->
1091        <button id="lightbox-close" class="absolute top-6 right-6 text-white/70 hover:text-[#a2d032] hover:scale-110 transition duration-300 z-50 p-2 focus:outline-none" aria-label="Close lightbox">
1092            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1093                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
1094            </svg>
1095        </button>
1096
1097        <!-- Navigation Left Arrow -->
1098        <button id="lightbox-prev" class="absolute left-4 md:left-8 text-white/50 hover:text-[#a2d032] hover:scale-110 transition duration-300 z-50 p-3 bg-black/30 backdrop-blur-md rounded-full border border-white/10 hover:border-[#a2d032]/50 focus:outline-none" aria-label="Previous image">
1099            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1100                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
1101            </svg>
1102        </button>
1103
1104        <!-- Image Container -->
1105        <div class="relative max-w-full max-h-[80vh] flex flex-col items-center justify-center">
1106            <img id="lightbox-img" src="" alt="" class="max-w-full max-h-[75vh] object-contain rounded-lg shadow-2xl scale-95 border border-white/10">
1107        </div>
1108
1109        <!-- Navigation Right Arrow -->
1110        <button id="lightbox-next" class="absolute right-4 md:right-8 text-white/50 hover:text-[#a2d032] hover:scale-110 transition duration-300 z-50 p-3 bg-black/30 backdrop-blur-md rounded-full border border-white/10 hover:border-[#a2d032]/50 focus:outline-none" aria-label="Next image">
1111            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1112                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
1113            </svg>
1114        </button>
1115
1116        <!-- Caption / Info -->
1117        <div id="lightbox-caption-container" class="mt-6 text-center max-w-xl px-4 z-40">
1118            <div id="lightbox-index" class="tech-font text-[#a2d032] text-[10px] tracking-widest uppercase mb-1">IMAGE 1 OF 10</div>
1119            <div id="lightbox-caption" class="text-sm font-medium text-gray-200 tracking-wide">Image Description</div>
1120        </div>
1121    </div>
1122
1123    <!-- Lightbox Script -->
1124    
1124<script>
1125        document.addEventListener("DOMContentLoaded", () => {
1126            const lightbox = document.getElementById("image-lightbox");
1127            const lightboxImg = document.getElementById("lightbox-img");
1128            const lightboxCaption = document.getElementById("lightbox-caption");
1129            const lightboxIndex = document.getElementById("lightbox-index");
1130            const closeBtn = document.getElementById("lightbox-close");
1131            const prevBtn = document.getElementById("lightbox-prev");
1132            const nextBtn = document.getElementById("lightbox-next");
1133
1134            // Select all content images in the sections (exclude logos or utility/template elements)
1135            const images = Array.from(document.querySelectorAll("main img, section img")).filter(img => {
1136                return !img.src.includes("logo_transparent") && !img.closest("nav");
1137            });
1138
1139            let currentIndex = 0;
1140
1141            // Add interactive zoom cursor and click listeners
1142            images.forEach((img, index) => {
1143                img.classList.add("cursor-zoom-in");
1144                img.addEventListener("click", (e) => {
1145                    e.stopPropagation();
1146                    openLightbox(index);
1147                });
1148            });
1149
1150            function openLightbox(index) {
1151                currentIndex = index;
1152                updateLightboxContent();
1153                lightbox.classList.remove("hidden");
1154                // Allow browser to render hidden state first, then transition opacity/scale
1155                setTimeout(() => {
1156                    lightbox.classList.remove("opacity-0");
1157                    lightboxImg.classList.remove("scale-95");
1158                }, 20);
1159                document.body.style.overflow = "hidden"; // Disable background scrolling
1160            }
1161
1162            function closeLightbox() {
1163                lightbox.classList.add("opacity-0");
1164                lightboxImg.classList.add("scale-95");
1165                setTimeout(() => {
1166                    lightbox.classList.add("hidden");
1167                    document.body.style.overflow = "";
1168                }, 300);
1169            }
1170
1171            function navigate(direction) {
1172                currentIndex = (currentIndex + direction + images.length) % images.length;
1173                
1174                // Fade out/scale down the image, swap source, then fade in/scale up
1175                lightboxImg.style.opacity = "0";
1176                lightboxImg.style.transform = "scale(0.95)";
1177                
1178                setTimeout(() => {
1179                    updateLightboxContent();
1180                    lightboxImg.style.opacity = "1";
1181                    lightboxImg.style.transform = "scale(1)";
1182                }, 150);
1183            }
1184
1185            function updateLightboxContent() {
1186                const img = images[currentIndex];
1187                lightboxImg.src = img.src;
1188                lightboxImg.alt = img.alt;
1189                lightboxCaption.textContent = img.alt || "Aerial Operations Impression";
1190                lightboxIndex.textContent = `IMAGE ${currentIndex + 1} OF ${images.length}`;
1191            }
1192
1193            closeBtn.addEventListener("click", closeLightbox);
1194            prevBtn.addEventListener("click", (e) => {
1195                e.stopPropagation();
1196                navigate(-1);
1197            });
1198            nextBtn.addEventListener("click", (e) => {
1199                e.stopPropagation();
1200                navigate(1);
1201            });
1202
1203            // Close when clicking outside the image container
1204            lightbox.addEventListener("click", (e) => {
1205                if (e.target === lightbox || e.target.id === "lightbox-img-container" || e.target === lightboxImg.parentElement) {
1206                    closeLightbox();
1207                }
1208            });
1209
1210            // Keyboard support
1211            document.addEventListener("keydown", (e) => {
1212                if (lightbox.classList.contains("hidden")) return;
1213                
1214                if (e.key === "Escape") {
1215                    closeLightbox();
1216                } else if (e.key === "ArrowLeft") {
1217                    navigate(-1);
1218                } else if (e.key === "ArrowRight") {
1219                    navigate(1);
1220                }
1221            });
1222        });
1223    </script>
1223
1224</body>
1225
1226</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.