{"id":718,"date":"2025-12-01T16:54:35","date_gmt":"2025-12-01T16:54:35","guid":{"rendered":"https:\/\/zerkom.de\/home\/"},"modified":"2026-06-09T11:27:35","modified_gmt":"2026-06-09T11:27:35","slug":"home","status":"publish","type":"page","link":"https:\/\/zerkom.de\/zh-hans\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Zerkom - 100% \u8ba4\u8bc1\u53ef\u5806\u80a5<\/title>\r\n <style>\r\n \/* Grundlegendes Reset und Variablen *\/\r\n :root {\r\n --zk-primary: #bef264;\r\n --zk-primary-dark: #a3e635;\r\n --zk-secondary: #ffffff;\r\n --zk-text-body: #cbd5e1;\r\n --zk-bg-dark: #0f172a;\r\n --font-main: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: var(--font-main);\r\n color: white;\r\n background-color: var(--zk-bg-dark);\r\n line-height: 1.5;\r\n overflow-x: hidden; \r\n }\r\n\r\n h1, h2, h3, h4, h5, h6, p, ul {\r\n font-family: var(--font-main);\r\n }\r\n\r\n \/* Container *\/\r\n .zk-wrapper {\r\n width: 100%;\r\n overflow: hidden; \r\n position: relative;\r\n }\r\n\r\n .zk-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 1.5rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* Hero Section Styling - Zentriert *\/\r\n .zk-hero {\r\n position: relative;\r\n min-height: 100vh;\r\n min-height: 100dvh; \r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n padding-top: 12rem; \r\n padding-bottom: 8rem; \r\n }\r\n\r\n \/* Overlay - Radialer Fokus auf die Mitte *\/\r\n .zk-hero-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at center, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.95) 100%);\r\n z-index: 1;\r\n }\r\n\r\n .zk-hero-content {\r\n padding-top: 2rem;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* Neues Layout *\/\r\n .zk-main-col {\r\n max-width: 900px;\r\n margin-bottom: 5rem; \r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .zk-cards-row {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 2.5rem;\r\n max-width: 1100px; \r\n width: 100%;\r\n text-align: left; \/* Karteninhalt bleibt linksb\u00fcndig f\u00fcr Lesbarkeit *\/\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-cards-row {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n \/* --- FADE IN ANIMATION --- *\/\r\n @keyframes blurryFadeIn {\r\n 0% { opacity: 0; filter: blur(12px); transform: translateY(30px); }\r\n 100% { opacity: 1; filter: blur(0); transform: translateY(0); }\r\n }\r\n\r\n .zk-animate-in {\r\n opacity: 0; \r\n animation: blurryFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\r\n }\r\n\r\n \/* Animation Delays *\/\r\n .zk-delay-1 { animation-delay: 0.1s; }\r\n .zk-delay-2 { animation-delay: 0.25s; }\r\n .zk-delay-3 { animation-delay: 0.4s; }\r\n .zk-delay-4 { animation-delay: 0.55s; }\r\n .zk-delay-5 { animation-delay: 0.7s; }\r\n .zk-delay-6 { animation-delay: 0.85s; }\r\n .zk-delay-7 { animation-delay: 1.0s; }\r\n\r\n \/* Text Styles *\/\r\n .zk-text-gradient {\r\n background: linear-gradient(135deg, #bef264 0%, #4ade80 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n display: inline; \r\n }\r\n\r\n \/* Tag-Cloud Liste - Zentriert *\/\r\n .zk-tag-list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 1.5rem 0 2.5rem 0;\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.6rem;\r\n justify-content: center;\r\n }\r\n\r\n .zk-tag-list li {\r\n position: relative;\r\n padding: 0.4rem 1.25rem 0.4rem 2.2rem;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 99px;\r\n font-size: 0.95rem;\r\n display: inline-flex;\r\n align-items: center;\r\n backdrop-filter: blur(4px);\r\n transition: all 0.3s ease;\r\n cursor: default;\r\n \/* Endlos-Animation f\u00fcr das sequentielle Highlighten hinzuf\u00fcgen *\/\r\n animation: tagHighlight 7s infinite; \r\n }\r\n\r\n \/* Sequentielle Highlight-Animation *\/\r\n @keyframes tagHighlight {\r\n 0%, 15%, 100% {\r\n transform: translateY(0) scale(1);\r\n background: rgba(255, 255, 255, 0.05);\r\n border-color: rgba(255, 255, 255, 0.1);\r\n box-shadow: none;\r\n }\r\n 5%, 10% {\r\n transform: translateY(-3px) scale(1.02);\r\n background: rgba(190, 242, 100, 0.2);\r\n border-color: rgba(190, 242, 100, 0.5);\r\n box-shadow: 0 4px 12px rgba(190, 242, 100, 0.2);\r\n }\r\n }\r\n\r\n \/* Verz\u00f6gerungen f\u00fcr die einzelnen Tags, damit sie nacheinander aufleuchten *\/\r\n .zk-tag-list li:nth-child(1) { animation-delay: 1s; }\r\n .zk-tag-list li:nth-child(2) { animation-delay: 2s; }\r\n .zk-tag-list li:nth-child(3) { animation-delay: 3s; }\r\n .zk-tag-list li:nth-child(4) { animation-delay: 4s; }\r\n .zk-tag-list li:nth-child(5) { animation-delay: 5s; }\r\n .zk-tag-list li:nth-child(6) { animation-delay: 6s; }\r\n .zk-tag-list li:nth-child(7) { animation-delay: 7s; }\r\n\r\n \/* Hover Animation f\u00fcr Tags (\u00fcberschreibt die automatische Animation bei Hover) *\/\r\n .zk-tag-list li:hover {\r\n transform: translateY(-3px) scale(1.02) !important;\r\n background: rgba(190, 242, 100, 0.15) !important;\r\n border-color: rgba(190, 242, 100, 0.4) !important;\r\n box-shadow: 0 4px 12px rgba(190, 242, 100, 0.1) !important;\r\n animation-play-state: paused;\r\n }\r\n\r\n .zk-tag-list li::before {\r\n content: '';\r\n position: absolute;\r\n left: 0.75rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 14px;\r\n height: 14px;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23bef264' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C\/polyline%3E%3C\/svg%3E\");\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n }\r\n\r\n \/* Schwebende Karten (Glas-Effekt) *\/\r\n .zk-floating-card {\r\n background: rgba(15, 23, 42, 0.5);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 1rem;\r\n padding: 2.5rem;\r\n backdrop-filter: blur(16px);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); \r\n }\r\n \r\n \/* Erweiterte Hover Animation f\u00fcr Karten *\/\r\n .zk-floating-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);\r\n border-color: rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .zk-floating-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n }\r\n\r\n .zk-card-highlight::before { background: var(--zk-primary); }\r\n .zk-card-danger::before { background: #f87171; }\r\n\r\n .zk-risk-title {\r\n color: #f87171; \r\n font-weight: 600;\r\n margin-bottom: 1.25rem;\r\n display: block;\r\n font-size: 1.15rem;\r\n }\r\n\r\n .zk-list {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n \r\n .zk-list li {\r\n position: relative;\r\n padding-left: 2rem;\r\n margin-bottom: 0.85rem;\r\n display: flex;\r\n align-items: flex-start;\r\n color: #cbd5e1;\r\n font-size: 0.95rem;\r\n line-height: 1.5;\r\n }\r\n \r\n .zk-list li:last-child { margin-bottom: 0; }\r\n\r\n .zk-list li::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 2px;\r\n width: 20px;\r\n height: 20px;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'\/%3E%3C\/svg%3E\");\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n transform: rotate(90deg);\r\n }\r\n\r\n \/* Badge Design *\/\r\n .zk-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n margin-bottom: 2rem;\r\n background: rgba(15, 23, 42, 0.4);\r\n border: 1px solid rgba(163, 230, 53, 0.3);\r\n border-radius: 99px;\r\n padding: 6px 20px 6px 6px;\r\n gap: 12px;\r\n backdrop-filter: blur(8px);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\r\n transition: all 0.3s ease; \r\n cursor: pointer;\r\n }\r\n\r\n .zk-badge:hover {\r\n transform: scale(1.05);\r\n border-color: rgba(163, 230, 53, 0.6);\r\n box-shadow: 0 12px 25px rgba(163, 230, 53, 0.15);\r\n background: rgba(15, 23, 42, 0.6);\r\n }\r\n\r\n .zk-badge:hover .zk-eu-circle img {\r\n transform: scale(1.25) rotate(5deg);\r\n }\r\n\r\n .zk-eu-circle {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n background-color: #003399; \r\n }\r\n \r\n .zk-eu-circle img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transform: scale(1.15); \r\n transition: transform 0.4s ease; \r\n }\r\n\r\n .zk-badge-text {\r\n color: #bef264;\r\n font-size: 12px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n line-height: 1.3;\r\n letter-spacing: 0.04em;\r\n }\r\n\r\n \/* Buttons *\/\r\n .zk-btn-group {\r\n display: flex; \r\n gap: 1.25rem; \r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n\r\n .zk-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n padding: 0.85rem 2.25rem;\r\n border-radius: 99px;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: all 0.3s ease; \r\n border: none;\r\n width: 100%; \r\n }\r\n \r\n @media (min-width: 480px) { .zk-btn { width: auto; } }\r\n\r\n .zk-btn-primary { background-color: var(--zk-primary); color: #0f172a; }\r\n .zk-btn-primary:hover {\r\n background-color: var(--zk-primary-dark); color: #0f172a !important; \r\n transform: translateY(-3px); box-shadow: 0 10px 20px -3px rgba(190, 242, 100, 0.4);\r\n }\r\n\r\n .zk-btn-secondary {\r\n background-color: rgba(255, 255, 255, 0.1); \r\n color: #ffffff !important; \r\n backdrop-filter: blur(4px); \r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .zk-btn-secondary span {\r\n color: #ffffff !important;\r\n }\r\n .zk-btn-secondary:hover {\r\n background-color: rgba(255, 255, 255, 0.2); \r\n border-color: rgba(255, 255, 255, 0.4); \r\n color: #ffffff !important; \r\n transform: translateY(-3px); \r\n box-shadow: 0 10px 20px -3px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .zk-icon {\r\n flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;\r\n stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; \r\n }\r\n\r\n .zk-btn:hover svg { transform: translateX(6px); }\r\n \r\n \/* H1 Optimierung & Mobile Anpassungen *\/\r\n .zk-wrapper h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1rem; color: white; font-weight: 800; line-height: 1.15; }\r\n \r\n @media (max-width: 768px) {\r\n .zk-hero { padding-top: 8rem; padding-bottom: 6rem; }\r\n .zk-main-col { margin-bottom: 4rem; }\r\n .zk-wrapper h1 { font-size: 2.25rem; }\r\n .zk-wrapper h1 br { display: none; }\r\n .zk-badge { padding: 6px 16px 6px 6px; gap: 10px; }\r\n .zk-eu-circle { width: 32px; height: 32px; }\r\n .zk-badge-text { font-size: 10px; }\r\n .zk-floating-card { padding: 2rem; }\r\n .zk-tag-list { justify-content: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"zk-wrapper\">\r\n <header class=\"zk-hero\" style=\"background-image: url('https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/photo-1542601906990-b4d3fb778b09-scaled.jpg');\">\r\n <!-- Overlay -->\r\n <div class=\"zk-hero-overlay\"><\/div>\r\n\r\n <div class=\"zk-container zk-hero-content\">\r\n \r\n <!-- OBERER BEREICH -->\r\n <div class=\"zk-main-col\">\r\n \r\n <!-- BADGE -->\r\n <div class=\"zk-badge zk-animate-in zk-delay-1\">\r\n <div class=\"zk-eu-circle\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Flag_of_Europe.svg\" alt=\"EU\" title=\"\u7b26\u5408\u6b27\u76df\u89c4\u5b9a\">\r\n <\/div>\r\n <div class=\"zk-badge-text\">\r\n \u4f9d\u7167\u65b0\u6b27\u76df\u6307\u4ee4\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u5b98\u65b9\u8ba4\u8bc1\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Headline -->\r\n <h1 class=\"zk-animate-in zk-delay-2\">\r\n \u8ba9\u60a8\u7684<span class=\"zk-text-gradient\">\u7eff\u8272\u58f0\u660e<\/span>\u5408\u6cd5\u5408\u89c4\u3002\r\n <\/h1>\r\n\r\n <!-- Vertrauensanker -->\r\n <p class=\"zk-animate-in zk-delay-3\" style=\"font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 600; color: white; margin-bottom: 1.5rem;\">\r\n \u7ecf\u72ec\u7acb\u62c5\u4fdd\u54c1\u724c\u6cd5\u5f8b\u5ba1\u6838\u5e76\u8ba4\u8bc1\u3002\r\n <\/p>\r\n \r\n <!-- Flie\u00dftext \/ Subline -->\r\n <div class=\"zk-animate-in zk-delay-4\" style=\"font-size: clamp(1rem, 2vw, 1.15rem); color: #cbd5e1; line-height: 1.6;\">\r\n <p>\u6839\u636e\u6b27\u76df EmpCo \u6307\u4ee4\u548c\u300a\u7eff\u8272\u58f0\u660e\u6307\u4ee4\u300b\uff0c\u73af\u5883\u53ca\u53ef\u6301\u7eed\u6027\u58f0\u660e\u53ca\u5176\u6807\u793a\u4ec5\u53ef\u5728\u53ef\u8bc1\u660e\u3001\u53ef\u6838\u9a8c\u4e14\u7ecf\u72ec\u7acb\u9a8c\u8bc1\u7684\u60c5\u51b5\u4e0b\u4f7f\u7528\u3002\u5c24\u5176\u9002\u7528\u4e8e\u4ee5\u4e0b\u58f0\u660e\uff1a<\/p>\r\n \r\n <!-- Tags -->\r\n <ul class=\"zk-tag-list\">\r\n <li>\u53ef\u56de\u6536<\/li>\r\n <li>\u518d\u751f\u6599\u542b\u91cf<\/li>\r\n <li>\u53ef\u5806\u80a5<\/li>\r\n <li>\u78b3\u4e2d\u548c<\/li>\r\n <li>\u53ef\u6301\u7eed<\/li>\r\n <li>\u73af\u4fdd<\/li>\r\n <li>\u7c7b\u4f3c\u7684\u4e00\u822c\u7528\u8bed<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- Buttons -->\r\n <div class=\"zk-btn-group zk-animate-in zk-delay-5\">\r\n <a href=\"javascript:void(0)\" class=\"zk-btn zk-btn-primary js-scroll-down\">\r\n \u4e86\u89e3\u66f4\u591a \r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\" style=\"width: 18px;\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/\" class=\"zk-btn zk-btn-secondary\">\r\n <span>\u6211\u4eec\u7684\u8ba4\u8bc1<\/span>\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\" style=\"width: 18px;\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- UNTERER BEREICH -->\r\n <div class=\"zk-cards-row\">\r\n \r\n <!-- Hinweis Karte -->\r\n <div class=\"zk-floating-card zk-card-highlight zk-animate-in zk-delay-6\">\r\n <strong style=\"color: var(--zk-primary); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 1.25rem;\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line><\/svg>\r\n \u91cd\u8981\u63d0\u793a\r\n <\/strong>\r\n <p style=\"color: white; font-size: 1.1rem; margin: 0; line-height: 1.6;\">\r\n \u6839\u636e\u6b27\u76df EmpCo \u6307\u4ee4\uff0c\u81ea\u4e5d\u6708\u8d77\u5fc5\u987b\u5f3a\u5236\u7533\u62a5\u518d\u751f\u6599\u542b\u91cf\u5e76\u63d0\u4f9b\u53ef\u6838\u9a8c\u8bc1\u660e\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Risiko Karte -->\r\n <div class=\"zk-floating-card zk-card-danger zk-animate-in zk-delay-7\">\r\n <span class=\"zk-risk-title\">\u82e5\u65e0\u7ecf\u6838\u5b9e\u7684\u8bc1\u660e\uff0c\u5c06\u9762\u4e34\uff1a<\/span>\r\n <ul class=\"zk-list\">\r\n <li>\u6d88\u8d39\u8005\u4fdd\u62a4\u534f\u4f1a\u7684\u8b66\u544a\u51fd<\/li>\r\n <li>\u5728\u5fb7\u56fd\u53ca\u6574\u4e2a\u6b27\u76df\u7684\u9500\u552e\u7981\u4ee4<\/li>\r\n <li>\u9ad8\u989d\u7f5a\u6b3e\u53ca\u58f0\u8a89\u635f\u5bb3<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/header>\r\n <\/div>\r\n\r\n <!-- Skript -->\r\n <script>\r\n const scrollDownBtn = document.querySelector('.js-scroll-down');\r\n if (scrollDownBtn) {\r\n scrollDownBtn.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n window.scrollBy({\r\n top: 800, \r\n left: 0,\r\n behavior: 'smooth'\r\n });\r\n });\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a2c1bac e-con-full e-flex e-con e-parent\" data-id=\"a2c1bac\" data-element_type=\"container\" data-e-type=\"container\" id=\"positionierung\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2821e2e elementor-widget elementor-widget-html\" data-id=\"2821e2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom - Modern Content<\/title>\r\n <style>\r\n \/* --- ISOLIERTE VARIABLEN F\u00dcR DIESES MODUL --- *\/\r\n .zk-mc-module {\r\n --zk-mc-primary: #bef264;\r\n --zk-mc-primary-dark: #a3e635;\r\n --zk-mc-lime-text: #4d7c0f;\r\n --zk-mc-text-heading: #0f172a;\r\n --zk-mc-text-body: #475569;\r\n --zk-mc-bg-light: #f8fafc;\r\n --zk-mc-border: #e2e8f0;\r\n --zk-mc-font-main: 'Inter', 'Roboto', system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n \r\n font-family: var(--zk-mc-font-main);\r\n color: var(--zk-mc-text-body);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* --- ISOLIERUNG F\u00dcR ELEMENTOR --- *\/\r\n .zk-mc-module *, .zk-mc-module *::before, .zk-mc-module *::after { \r\n box-sizing: border-box; \r\n }\r\n\r\n .zk-mc-module a {\r\n text-decoration: none !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n \/* --- LAYOUT GRUNDLAGEN --- *\/\r\n .zk-mc-section { padding: 4rem 1.25rem; position: relative; overflow: hidden; }\r\n @media (min-width: 768px) { .zk-mc-section { padding: 6rem 1.5rem; } }\r\n \r\n .zk-mc-section-dark { background-color: var(--zk-mc-text-heading); color: #f8fafc; }\r\n .zk-mc-section-gray { background-color: var(--zk-mc-bg-light); }\r\n .zk-mc-section-closer { padding-top: 2rem !important; }\r\n \r\n .zk-mc-container { max-width: 1100px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }\r\n \r\n .zk-mc-grid-2 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }\r\n .zk-mc-grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }\r\n .zk-mc-grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }\r\n \r\n @media (min-width: 768px) {\r\n .zk-mc-grid-2 { grid-template-columns: 1fr 1fr; gap: 4rem; }\r\n .zk-mc-grid-3 { grid-template-columns: repeat(3, 1fr); }\r\n .zk-mc-grid-4 { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (min-width: 1024px) {\r\n .zk-mc-grid-4 { grid-template-columns: repeat(4, 1fr); }\r\n }\r\n\r\n \/* --- HINTERGRUND GRID (Scharf) --- *\/\r\n .zk-mc-bg-grid {\r\n position: absolute; inset: 0; z-index: 0; pointer-events: none;\r\n background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);\r\n background-size: 32px 32px;\r\n mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\r\n -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\r\n }\r\n\r\n \/* --- ANIMATION (Knackig) --- *\/\r\n @keyframes sharpReveal {\r\n 0% { opacity: 0; filter: blur(8px); transform: translateY(20px); }\r\n 100% { opacity: 1; filter: blur(0); transform: translateY(0); }\r\n }\r\n .zk-mc-reveal { opacity: 0; }\r\n .zk-mc-reveal.is-visible { animation: sharpReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }\r\n .zk-mc-delay-1 { animation-delay: 0.1s; }\r\n .zk-mc-delay-2 { animation-delay: 0.2s; }\r\n .zk-mc-delay-3 { animation-delay: 0.3s; }\r\n\r\n \/* --- TYPOGRAFIE & ELEMENTE --- *\/\r\n .zk-mc-eyebrow {\r\n display: inline-flex; align-items: center; gap: 0.5rem;\r\n color: var(--zk-mc-lime-text) !important; font-weight: 700; text-transform: uppercase;\r\n letter-spacing: 0.1em; font-size: 0.8rem; margin-bottom: 1.5rem;\r\n background: rgba(190, 242, 100, 0.15); border: 1px solid rgba(190, 242, 100, 0.4);\r\n padding: 0.5rem 1.25rem; border-radius: 99px;\r\n }\r\n .zk-mc-section-dark .zk-mc-eyebrow { color: var(--zk-mc-primary) !important; border-color: rgba(190, 242, 100, 0.2); }\r\n \r\n .zk-mc-eyebrow::before {\r\n content: ''; width: 6px; height: 6px; background-color: currentColor; border-radius: 50%;\r\n animation: zkMcPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);\r\n }\r\n @keyframes zkMcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }\r\n\r\n .zk-mc-h2 {\r\n color: var(--zk-mc-text-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;\r\n line-height: 1.15; margin: 0 0 1.5rem 0; letter-spacing: -0.03em; position: relative; z-index: 1;\r\n }\r\n .zk-mc-section-dark .zk-mc-h2 { color: white; }\r\n\r\n .zk-mc-highlight { \r\n position: relative; \r\n color: inherit; \r\n display: inline;\r\n background: linear-gradient(to bottom, transparent 60%, var(--zk-mc-primary) 60%);\r\n padding: 0 4px;\r\n box-decoration-break: clone;\r\n -webkit-box-decoration-break: clone;\r\n z-index: 1; \r\n }\r\n \r\n \/* Farbverlauf-Text im Darkmode (wie im Hero) statt Hintergrund-Highlight *\/\r\n .zk-mc-section-dark .zk-mc-highlight { \r\n background: linear-gradient(135deg, var(--zk-mc-primary) 0%, var(--zk-mc-primary-dark) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n color: transparent !important;\r\n padding: 0;\r\n }\r\n\r\n .zk-mc-text { font-size: 1.125rem; margin: 0 0 1.5rem 0; }\r\n \r\n \/* Sichere Listen mit SVG-Icons gegen Elementor Override *\/\r\n .zk-mc-list { list-style: none; padding: 0; margin: 0 0 2rem 0; }\r\n .zk-mc-list li { position: relative; padding-left: 2rem; margin-bottom: 1rem; font-weight: 500; }\r\n .zk-mc-list li::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 4px;\r\n width: 20px;\r\n height: 20px;\r\n \/* Expliziter Rechts-Pfeil Pfad (Line + Polyline) *\/\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23bef264' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'\/%3E%3Cpolyline points='12 5 19 12 12 19'\/%3E%3C\/svg%3E\");\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n transform: rotate(0deg) !important; \/* Elementor Fix f\u00fcr verdrehte Icons *\/\r\n }\r\n\r\n \/* Buttons gesch\u00fctzt vor Elementor *\/\r\n .zk-mc-btn {\r\n display: inline-flex; align-items: center; gap: 0.75rem;\r\n background-color: var(--zk-mc-primary) !important; color: var(--zk-mc-text-heading) !important;\r\n padding: 1rem 2rem; border-radius: 0.5rem; font-weight: 700; font-size: 1rem;\r\n text-decoration: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n border: none; cursor: pointer;\r\n }\r\n .zk-mc-btn:hover {\r\n transform: translateY(-4px) scale(1.02); background-color: var(--zk-mc-primary-dark) !important;\r\n box-shadow: 0 15px 25px -5px rgba(190, 242, 100, 0.3);\r\n }\r\n .zk-mc-btn svg { stroke: currentColor !important; fill: none !important; transform: rotate(0deg) !important; }\r\n\r\n \/* --- KARTEN (Zertifikate) - NEUES DESIGN --- *\/\r\n .zk-mc-card {\r\n background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);\r\n border: 1px solid rgba(226, 232, 240, 0.8);\r\n border-radius: 1rem;\r\n padding: 2rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1;\r\n overflow: hidden;\r\n }\r\n \/* Limettengr\u00fcne Akzentlinie am Boden der Karte *\/\r\n .zk-mc-card::after {\r\n content: ''; position: absolute; bottom: 0; left: 0; height: 4px; width: 0%;\r\n background: linear-gradient(90deg, var(--zk-mc-primary), var(--zk-mc-primary-dark));\r\n transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .zk-mc-card:hover::after { width: 100%; }\r\n \r\n .zk-mc-card:hover {\r\n border-color: transparent; transform: translateY(-8px);\r\n box-shadow: 0 20px 40px -10px rgba(190, 242, 100, 0.15), 0 10px 20px -5px rgba(15, 23, 42, 0.05);\r\n }\r\n .zk-mc-card-link { text-decoration: none !important; color: inherit !important; display: block; height: 100%; }\r\n \r\n .zk-mc-icon-box {\r\n width: 56px; height: 56px;\r\n background: linear-gradient(135deg, #f7fee7 0%, #ecfccb 100%);\r\n border: 1px solid rgba(190, 242, 100, 0.3);\r\n border-radius: 16px;\r\n display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem;\r\n color: var(--zk-mc-lime-text) !important; transition: all 0.3s;\r\n box-shadow: 0 8px 16px -4px rgba(190, 242, 100, 0.2);\r\n }\r\n .zk-mc-card:hover .zk-mc-icon-box { \r\n background: var(--zk-mc-primary); color: var(--zk-mc-text-heading) !important; \r\n transform: scale(1.1) rotate(-5deg); box-shadow: 0 12px 20px -4px rgba(190, 242, 100, 0.4);\r\n }\r\n .zk-mc-icon-box svg { stroke: currentColor !important; fill: none !important; width: 26px; height: 26px; }\r\n\r\n \/* --- STEPS \/ TIMELINE - NEUES DESIGN --- *\/\r\n .zk-mc-step-card {\r\n background: white; border: 1px solid var(--zk-mc-border); border-radius: 1.5rem;\r\n padding: 3rem 2rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n display: flex; flex-direction: column; align-items: center; justify-content: center;\r\n position: relative; z-index: 1; text-align: center;\r\n overflow: hidden;\r\n }\r\n \/* Riesiges Wasserzeichen f\u00fcr die Nummer *\/\r\n .zk-mc-step-card::before {\r\n content: attr(data-step);\r\n position: absolute; top: -10px; right: -10px;\r\n font-size: 8rem; font-weight: 900; color: var(--zk-mc-bg-light);\r\n z-index: -1; transition: all 0.5s ease; line-height: 1;\r\n }\r\n .zk-mc-step-card:hover::before {\r\n color: rgba(190, 242, 100, 0.2);\r\n transform: scale(1.05) translate(-10px, 10px);\r\n }\r\n \r\n .zk-mc-step-card:hover {\r\n border-color: var(--zk-mc-primary); transform: translateY(-8px);\r\n box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.08);\r\n }\r\n \/* Kleines Nummern-Badge *\/\r\n .zk-mc-step-num {\r\n font-size: 1.25rem; font-weight: 800; color: var(--zk-mc-text-heading);\r\n background: var(--zk-mc-primary); width: 48px; height: 48px;\r\n display: flex; align-items: center; justify-content: center; border-radius: 50%;\r\n margin-bottom: 1.5rem; box-shadow: 0 8px 16px -4px rgba(190, 242, 100, 0.4);\r\n transition: transform 0.3s;\r\n }\r\n .zk-mc-step-card:hover .zk-mc-step-num { transform: scale(1.1) rotate(5deg); }\r\n \r\n \/* Desktop Pfeile zwischen den Steps *\/\r\n @media (min-width: 768px) {\r\n .zk-mc-step-card:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: -1rem; \/* Zentriert in der 2rem L\u00fccke *\/\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'\/%3E%3Cpolyline points='12 5 19 12 12 19'\/%3E%3C\/svg%3E\");\r\n background-size: contain;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n transform: translate(50%, -50%) rotate(0deg) !important; \/* Fix gegen Elementor Rotationen *\/\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n }\r\n\r\n \/* --- ZUS\u00c4TZLICHE KLASSEN F\u00dcR MOBILE --- *\/\r\n .zk-mc-dark-box {\r\n background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); \r\n padding: 1.5rem; border-radius: 1rem; backdrop-filter: blur(10px);\r\n }\r\n @media (min-width: 768px) { .zk-mc-dark-box { padding: 2.5rem; border-radius: 1.5rem; } }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"zk-mc-module\">\r\n\r\n <!-- 1. POSITIONIERUNG (Intro) -->\r\n <section class=\"zk-mc-section\" style=\"text-align: center;\">\r\n <div class=\"zk-mc-bg-grid\"><\/div>\r\n <div class=\"zk-mc-container\" style=\"max-width: 900px;\">\r\n <div class=\"zk-mc-eyebrow zk-mc-reveal zk-mc-delay-1\">\u5b9a\u4f4d<\/div>\r\n <h2 class=\"zk-mc-h2 zk-mc-reveal zk-mc-delay-2\" style=\"font-size: clamp(1.75rem, 5vw, 3.5rem);\">\r\n ZERKOM \u662f\u72ec\u7acb\u7684 <br>\r\n <span class=\"zk-mc-highlight\">\u68c0\u9a8c\u4e0e\u8ba4\u8bc1\u5e73\u53f0<\/span><br> \r\n \u9762\u5411\u7eff\u8272\u58f0\u660e\u3002\r\n <\/h2>\r\n <p class=\"zk-mc-text zk-mc-reveal zk-mc-delay-3\" style=\"font-size: 1.25rem; max-width: 750px; margin: 0 auto;\">\r\n \u6211\u4eec\u5e2e\u52a9\u4f01\u4e1a\u5408\u6cd5\u5408\u89c4\u5730\u4f7f\u7528\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u6027\u58f0\u660e\u2014\u2014\u4ece\u9996\u6b21\u8bc4\u4f30\u5230\u7ecf\u8ba4\u8bc1\u7684\u5e02\u573a\u5e94\u7528\u3002\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 2. PRE-CHECK UND AUDIT (Dark Mode) -->\r\n <section class=\"zk-mc-section zk-mc-section-dark\">\r\n <div class=\"zk-mc-container\">\r\n <div class=\"zk-mc-grid-2\">\r\n <div>\r\n <div class=\"zk-mc-eyebrow zk-mc-reveal\">\u5ba1\u8ba1\u4e0e\u9a8c\u8bc1<\/div>\r\n <h2 class=\"zk-mc-h2 zk-mc-reveal zk-mc-delay-1\">\u68c0\u9a8c\u60a8\u7684\u58f0\u660e\u2014\u2014<br><span class=\"zk-mc-highlight\">\u81ea\u52a8\u5316\u4e14\u53ef\u5ba1\u8ba1<\/span><\/h2>\r\n <p class=\"zk-mc-text zk-mc-reveal zk-mc-delay-2\">\u901a\u8fc7\u6211\u4eec\u7684\u5e73\u53f0\uff0c\u4f01\u4e1a\u53ef\u76f4\u63a5\u68c0\u9a8c\u7eff\u8272\u58f0\u660e\uff1a<\/p>\r\n <ul class=\"zk-mc-list zk-mc-reveal zk-mc-delay-2\">\r\n <li><strong>\u9884\u68c0\uff08Pre-Check\uff09\uff1a<\/strong>\u9996\u6b21\u81ea\u52a8\u5316\u8bc4\u4f30<\/li>\r\n <li><strong>\u5b8c\u6574\u5ba1\u8ba1\uff1a<\/strong>\u7ed3\u6784\u5316\u5ba1\u6838\u6d41\u7a0b\uff0c\u9644\u6587\u4ef6\u5316\u9a8c\u8bc1<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"zk-mc-reveal zk-mc-delay-3 zk-mc-dark-box\">\r\n <p class=\"zk-mc-text\" style=\"font-weight: 600; margin-bottom: 2rem;\">\r\n \u8fd9\u610f\u5473\u7740\uff1a\u6211\u4eec\u5df2\u5728\u5e73\u53f0\u4e0a\u5f00\u5c55\u771f\u5b9e\u5ba1\u8ba1\u6d41\u7a0b\u2014\u2014\u4e0d\u4ec5\u662f\u9884\u5ba1\u3002\u58f0\u660e\u53ef\u76f4\u63a5\u5728\u6211\u4eec\u5904\u68c0\u9a8c\u3001\u5ba1\u8ba1\u5e76\u8ba4\u8bc1\u3002\r\n <\/p>\r\n <a href=\"https:\/\/check.zerkom.de\" class=\"zk-mc-btn\">\r\n \u7acb\u5373\u68c0\u9a8c\u58f0\u660e\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 3. REZYKLAT & RECYCLING -->\r\n <section class=\"zk-mc-section\">\r\n <div class=\"zk-mc-bg-grid\" style=\"mask-image: linear-gradient(to bottom, black, transparent);\"><\/div>\r\n <div class=\"zk-mc-container\">\r\n <div class=\"zk-mc-grid-2\">\r\n <div class=\"zk-mc-reveal\">\r\n <h2 class=\"zk-mc-h2\">\u518d\u751f\u6599\u542b\u91cf\u4e0e\u56de\u6536\u58f0\u660e <br><span class=\"zk-mc-highlight\">\u6b63\u786e\u4e3e\u8bc1<\/span><\/h2>\r\n <p class=\"zk-mc-text\">\u6b27\u76df\u5bf9\u518d\u751f\u6599\u542b\u91cf\u4e0e\u53ef\u56de\u6536\u6027\u7684\u7533\u62a5\u8981\u6c42\u4e0d\u65ad\u63d0\u9ad8\u3002\u4f01\u4e1a\u987b\u8bc1\u660e\uff1a<\/p>\r\n <\/div>\r\n <div class=\"zk-mc-reveal zk-mc-delay-1\">\r\n <ul class=\"zk-mc-list\" style=\"margin-bottom: 1.5rem;\">\r\n <li>\u6d88\u8d39\u540e\u518d\u751f\u6599\uff08PCR\uff09\u7684\u5b9e\u9645\u5360\u6bd4<\/li>\r\n <li>\u6765\u6e90\u4e0e\u53ef\u8ffd\u6eaf\u6027<\/li>\r\n <li>\u4e0e\u5b9e\u9645\u7269\u6599\u6d41\u4e00\u81f4<\/li>\r\n <\/ul>\r\n <p style=\"margin-bottom: 0; font-weight: 700; color: var(--zk-mc-text-heading); border-left: 3px solid var(--zk-mc-primary); padding-left: 1rem;\">\r\n ZERKOM \u72ec\u7acb\u4e14\u53ef\u5ba1\u8ba1\u5730\u68c0\u9a8c\u5e76\u8ba4\u8bc1\u4e0a\u8ff0\u4fe1\u606f\u3002\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 4. ZERTIFIKATE (Cards) -->\r\n <section class=\"zk-mc-section zk-mc-section-gray zk-mc-section-closer\">\r\n <div class=\"zk-mc-container\">\r\n <div class=\"zk-mc-reveal\" style=\"text-align: center; max-width: 700px; margin: 0 auto 4rem auto;\">\r\n <div class=\"zk-mc-eyebrow\">\u6b27\u76df\u5e02\u573a\u51c6\u5165<\/div>\r\n <h2 class=\"zk-mc-h2\">\u7ecf\u8ba4\u8bc1\u7684\u58f0\u660e\u2014\u2014<br>\u8fdb\u5165\u6b27\u76df\u5e02\u573a\u7684\u901a\u9053<\/h2>\r\n <p class=\"zk-mc-text\">\u6211\u4eec\u7684\u8bc1\u4e66\u652f\u6301\u7eff\u8272\u58f0\u660e\u7684\u5408\u6cd5\u5408\u89c4\u4f7f\u7528\u3002\u8bf7\u5728\u8be6\u60c5\u677f\u5757\u4e86\u89e3\u66f4\u591a\uff1a<\/p>\r\n <\/div>\r\n\r\n <div class=\"zk-mc-grid-4\">\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/#cert-techum\" class=\"zk-mc-card-link zk-mc-reveal zk-mc-delay-1\">\r\n <div class=\"zk-mc-card\">\r\n <div class=\"zk-mc-icon-box\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg><\/div>\r\n <h3 style=\"margin:0; font-size: 1.125rem; font-weight: 700; color: var(--zk-mc-text-heading);\">\u518d\u751f\u6599\u542b\u91cf \/ Recycled Content<\/h3>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/#cert-zc-de-003\" class=\"zk-mc-card-link zk-mc-reveal zk-mc-delay-2\">\r\n <div class=\"zk-mc-card\">\r\n <div class=\"zk-mc-icon-box\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22v-10\"\/><\/svg><\/div>\r\n <h3 style=\"margin:0; font-size: 1.125rem; font-weight: 700; color: var(--zk-mc-text-heading);\">\u53ef\u56de\u6536\u6027<\/h3>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/#cert-zc-de-001\" class=\"zk-mc-card-link zk-mc-reveal zk-mc-delay-3\">\r\n <div class=\"zk-mc-card\">\r\n <div class=\"zk-mc-icon-box\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\"\/><path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\"\/><\/svg><\/div>\r\n <h3 style=\"margin:0; font-size: 1.125rem; font-weight: 700; color: var(--zk-mc-text-heading);\">\u53ef\u5806\u80a5\u6027<\/h3>\r\n <\/div>\r\n <\/a>\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/#cert-c2c\" class=\"zk-mc-card-link zk-mc-reveal\" style=\"animation-delay: 0.4s;\">\r\n <div class=\"zk-mc-card\">\r\n <div class=\"zk-mc-icon-box\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><\/svg><\/div>\r\n <h3 style=\"margin:0; font-size: 1.125rem; font-weight: 700; color: var(--zk-mc-text-heading);\">ESG \u4e0e\u53ef\u6301\u7eed\u6027\u58f0\u660e<\/h3>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 5. ABLAUF \/ STRUKTUR -->\r\n <section class=\"zk-mc-section\">\r\n <div class=\"zk-mc-container\">\r\n <div class=\"zk-mc-reveal\" style=\"text-align: center; margin-bottom: 4rem;\">\r\n <h2 class=\"zk-mc-h2\">\u4e09\u6b65\u5b9e\u73b0<span class=\"zk-mc-highlight\">\u5408\u6cd5\u5408\u89c4\u4f7f\u7528<\/span>\u60a8\u7684 \u58f0\u660e<\/h2>\r\n <\/div>\r\n \r\n <div class=\"zk-mc-grid-3\">\r\n <div class=\"zk-mc-step-card zk-mc-reveal zk-mc-delay-1\" data-step=\"01\">\r\n <div class=\"zk-mc-step-num\">01<\/div>\r\n <h3 style=\"margin:0; font-size: 1.25rem; color: var(--zk-mc-text-heading);\">\u9884\u68c0<\/h3>\r\n <\/div>\r\n <div class=\"zk-mc-step-card zk-mc-reveal zk-mc-delay-2\" data-step=\"02\">\r\n <div class=\"zk-mc-step-num\">02<\/div>\r\n <h3 style=\"margin:0; font-size: 1.25rem; color: var(--zk-mc-text-heading);\">\u5ba1\u8ba1\u4e0e\u9a8c\u8bc1<\/h3>\r\n <\/div>\r\n <div class=\"zk-mc-step-card zk-mc-reveal zk-mc-delay-3\" data-step=\"03\">\r\n <div class=\"zk-mc-step-num\">03<\/div>\r\n <h3 style=\"margin:0; font-size: 1.25rem; color: var(--zk-mc-text-heading);\">\u8ba4\u8bc1\u4e0e\u5e02\u573a\u5e94\u7528<\/h3>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"zk-mc-reveal\" style=\"text-align: center; margin-top: 4rem;\">\r\n <a href=\"https:\/\/check.zerkom.de\" class=\"zk-mc-btn\">\r\n \u7acb\u5373\u8fdb\u884c\u9884\u68c0\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n <!-- Scroll Observer Script -->\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('is-visible');\r\n observer.unobserve(entry.target); \/\/ Nur einmal animieren\r\n }\r\n });\r\n }, { threshold: 0.15, rootMargin: \"0px 0px -50px 0px\" });\r\n\r\n document.querySelectorAll('.zk-mc-reveal').forEach(el => observer.observe(el));\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-00ce036 e-flex e-con-boxed e-con e-parent\" data-id=\"00ce036\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8e42c36 elementor-widget elementor-widget-html\" data-id=\"8e42c36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom Statement Widget<\/title>\r\n <style>\r\n \/* =========================================\r\n WIDGET STYLES (UNIQUE SCOPE: .zk-statement-widget)\r\n Basiert auf der CI von Widget 1 & 2\r\n ========================================= *\/\r\n\r\n .zk-statement-widget {\r\n \/* LOKALE VARIABLEN - CI Colors *\/\r\n --zk-primary: #bef264; \/* Das Lime Green *\/\r\n --zk-lime-text: #4d7c0f; \/* Dunkles Gr\u00fcn f\u00fcr Text *\/\r\n --zk-text-heading: #0f172a; \/* Fast Schwarz *\/\r\n --zk-text-body: #64748b; \/* Slate Grey *\/\r\n --zk-bg-light: #f7fee7; \/* Ganz helles Gr\u00fcn f\u00fcr Hintergr\u00fcnde *\/\r\n \r\n \/* DSGVO-Update: Nutzung von System-Schriftarten statt externer Google Fonts *\/\r\n --font-main: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n\r\n width: 100%;\r\n \/* Container Style wie in Widget 1 (Card) *\/\r\n background-color: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 1.5rem; \/* 24px Radius wie in den Beispielen *\/\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\r\n \r\n padding: 2.5rem;\r\n margin: 3rem 0; \/* Abstand nach oben\/unten *\/\r\n position: relative;\r\n overflow: hidden; \/* F\u00fcr Deko-Elemente *\/\r\n \r\n font-family: var(--font-main);\r\n text-align: left;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n \/* Hover Effekt \u00e4hnlich Widget 1 (subtil) *\/\r\n @media (hover: hover) {\r\n .zk-statement-widget:hover {\r\n border-color: var(--zk-primary);\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n transform: translateY(-2px);\r\n }\r\n }\r\n\r\n \/* Reset f\u00fcr interne Elemente *\/\r\n .zk-statement-widget *,\r\n .zk-statement-widget *::before,\r\n .zk-statement-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* --- Typografie --- *\/\r\n\r\n \/* 1. Eyebrow (Die kleine \u00dcberschrift dr\u00fcber) *\/\r\n .zk-statement-eyebrow {\r\n color: var(--zk-lime-text);\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n font-size: 0.875rem; \/* ca 14px *\/\r\n text-transform: uppercase;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n \/* Kleiner gr\u00fcner Punkt vor dem Eyebrow Text (optionaler Deko-Akzent) *\/\r\n .zk-statement-eyebrow::before {\r\n content: '';\r\n display: block;\r\n width: 8px;\r\n height: 8px;\r\n background-color: var(--zk-primary);\r\n border-radius: 50%;\r\n }\r\n\r\n \/* 2. Headline *\/\r\n .zk-statement-headline {\r\n color: var(--zk-text-heading);\r\n font-size: clamp(1.5rem, 3vw, 2rem); \/* Responsiv: 24px bis 32px *\/\r\n line-height: 1.3;\r\n font-weight: 800; \/* Extra Bold wie in Widget 1 *\/\r\n margin: 0 0 1rem 0;\r\n }\r\n\r\n \/* 3. Der Marker-Effekt (Highlight) - Angepasst f\u00fcr durchgehende Markierung *\/\r\n .zk-statement-highlight {\r\n color: var(--zk-lime-text); \/* Text wird gr\u00fcn *\/\r\n \/* \u00c4nderung: 'to bottom' sorgt f\u00fcr einen horizontalen Verlauf, der nicht abgeschnitten wird *\/\r\n background: linear-gradient(to bottom, transparent 50%, rgba(190, 242, 100, 0.5) 50%);\r\n background-repeat: no-repeat;\r\n background-size: 100% 100%; \/* Deckt die volle Breite und H\u00f6he des Text-Containers ab *\/\r\n display: inline;\r\n font-weight: inherit;\r\n box-decoration-break: clone;\r\n -webkit-box-decoration-break: clone;\r\n padding: 0 4px; \/* Kleiner Abstand links\/rechts f\u00fcr sch\u00f6nere Optik *\/\r\n }\r\n\r\n \/* 4. Subline \/ Body Text *\/\r\n .zk-statement-sub {\r\n font-size: 1.125rem; \/* 18px *\/\r\n color: var(--zk-text-body);\r\n font-weight: 400;\r\n line-height: 1.6;\r\n margin: 0;\r\n max-width: 90%;\r\n }\r\n \r\n \/* Linke Border als CI Element (Optional, passt aber gut zur \"Statement\" Logik) *\/\r\n .zk-statement-widget::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n bottom: 0;\r\n width: 6px;\r\n background-color: var(--zk-primary);\r\n }\r\n\r\n \/* Mobile Anpassung *\/\r\n @media (max-width: 768px) {\r\n .zk-statement-widget {\r\n padding: 1.5rem 1.5rem 1.5rem 2rem; \/* Links etwas mehr Platz wegen Border *\/\r\n border-radius: 1rem;\r\n }\r\n .zk-statement-headline {\r\n font-size: 1.35rem;\r\n }\r\n .zk-statement-sub {\r\n font-size: 1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Widget Content -->\r\n <div class=\"zk-statement-widget\" lang=\"zh-Hans\">\r\n <div class=\"zk-statement-eyebrow\">\r\n ZERKOM \u4fdd\u969c\r\n <\/div>\r\n \r\n <h2 class=\"zk-statement-headline\">\r\n \u6211\u4eec\u6b63\u5f0f\u786e\u8ba4\uff0c\u60a8\u7684\u4ea7\u54c1\u786e\u5b9e<span class=\"zk-statement-highlight\">\u300c100% \u53ef\u5806\u80a5\u300d<\/span>\u2014\u2014\u7b26\u5408 EmpCo \u6307\u4ee4\u8981\u6c42\u3002\r\n <\/h2>\r\n \r\n <p class=\"zk-statement-sub\">\r\n \u7acb\u5373\u4fdd\u62a4\u60a8\u7684\u4f01\u4e1a\uff0c\u907f\u514d\u865a\u5047\u73af\u4fdd\u58f0\u660e\u548c\u6cd5\u5f8b\u98ce\u9669\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-531137c e-con-full e-flex e-con e-parent\" data-id=\"531137c\" data-element_type=\"container\" data-e-type=\"container\" id=\"empco\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91c2eec elementor-widget elementor-widget-html\" data-id=\"91c2eec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>ZERKOM\u00ae EmpCo-Pr\u00fcfstandard | High-End Widget<\/title>\r\n <style>\r\n :root {\r\n --zk-lime: #bef264;\r\n --zk-lime-glow: rgba(190, 242, 100, 0.15);\r\n --zk-bg: #0f172a;\r\n --zk-card-bg: rgba(15, 23, 42, 0.88);\r\n --zk-border: rgba(190, 242, 100, 0.2);\r\n --zk-text-muted: #94a3b8;\r\n --zk-text-bright: #f8fafc;\r\n --font-main: 'Inter', system-ui, -apple-system, sans-serif;\r\n }\r\n\r\n \/* ELEMENTOR STABILITY WRAPPER *\/\r\n .zk-cyber-widget {\r\n all: initial;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: \r\n radial-gradient(circle at 50% 50%, rgba(190, 242, 100, 0.08) 0%, transparent 70%),\r\n radial-gradient(circle at 20% 30%, rgba(30, 41, 59, 1) 0%, rgba(15, 23, 42, 1) 100%);\r\n position: relative;\r\n font-family: var(--font-main);\r\n padding: 3.5rem 1rem;\r\n box-sizing: border-box;\r\n width: 100%;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n .zk-cyber-widget * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: inherit;\r\n color: inherit;\r\n -webkit-tap-highlight-color: transparent !important;\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n }\r\n\r\n \/* --- THE CORE CARD --- *\/\r\n .zk-main-card {\r\n width: 100%;\r\n max-width: 1140px;\r\n position: relative;\r\n z-index: 1;\r\n background: var(--zk-card-bg);\r\n border: 1px solid var(--zk-border);\r\n border-radius: 2rem;\r\n padding: 3rem;\r\n overflow: hidden;\r\n box-shadow: 0 50px 100px -20px rgba(0,0,0,0.9);\r\n backdrop-filter: blur(25px);\r\n }\r\n\r\n .zk-grid-pattern {\r\n position: absolute;\r\n inset: 0;\r\n background-image: linear-gradient(rgba(190, 242, 100, 0.04) 1px, transparent 1px), \r\n linear-gradient(90deg, rgba(190, 242, 100, 0.04) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n opacity: 0.4;\r\n pointer-events: none;\r\n }\r\n\r\n \/* --- TOP CONTENT --- *\/\r\n .zk-header-flex {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 2rem;\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n }\r\n\r\n .zk-status-badge {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(0,0,0,0.4);\r\n padding: 8px 18px;\r\n border-radius: 99px;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n max-width: 100%;\r\n }\r\n\r\n .zk-pulse {\r\n width: 8px;\r\n height: 8px;\r\n background: var(--zk-lime);\r\n border-radius: 50%;\r\n box-shadow: 0 0 8px var(--zk-lime);\r\n animation: pulse 2s infinite;\r\n flex-shrink: 0;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.3); opacity: 0.6; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n .zk-status-text {\r\n font-size: 10px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n color: var(--zk-lime);\r\n }\r\n\r\n .zk-eu-seal {\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 50%;\r\n border: 2px solid var(--zk-lime);\r\n padding: 4px;\r\n background: var(--zk-bg);\r\n flex-shrink: 0;\r\n }\r\n\r\n .zk-eu-seal img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* --- TITLE AREA --- *\/\r\n .zk-title-area {\r\n text-align: left;\r\n margin-bottom: 3rem;\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n }\r\n\r\n .zk-pre-title {\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: var(--zk-lime);\r\n text-transform: uppercase;\r\n letter-spacing: 0.15em;\r\n margin-bottom: 0.75rem;\r\n display: block;\r\n }\r\n\r\n .zk-main-title {\r\n font-size: clamp(1.8rem, 4vw, 2.75rem);\r\n font-weight: 800;\r\n color: white;\r\n line-height: 1.15;\r\n letter-spacing: -0.02em;\r\n max-width: 900px;\r\n }\r\n\r\n .zk-main-title em {\r\n font-style: normal;\r\n background: linear-gradient(135deg, #bef264 0%, #a3e635 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .zk-sub-info {\r\n margin-top: 1rem;\r\n color: var(--zk-text-muted);\r\n font-size: 1.1rem;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* --- EXPOSED SECTIONS --- *\/\r\n .zk-exposed-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 2.5rem;\r\n margin-bottom: 2.5rem;\r\n text-align: left;\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n }\r\n\r\n .zk-exposed-item p {\r\n font-size: 1.05rem;\r\n color: var(--zk-text-bright);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* --- INTERACTIVE ACCORDION --- *\/\r\n .zk-cyber-accordion {\r\n width: 100%;\r\n background: rgba(0,0,0,0.3);\r\n border: 1px solid var(--zk-border);\r\n border-radius: 1.25rem;\r\n overflow: hidden;\r\n transition: all 0.4s ease;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .zk-acc-btn {\r\n width: 100%;\r\n padding: 1.25rem 2rem;\r\n background: transparent !important;\r\n border: none !important;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n cursor: pointer;\r\n outline: none !important;\r\n gap: 15px;\r\n text-align: left;\r\n min-height: 4rem;\r\n }\r\n\r\n .zk-btn-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n flex: 1;\r\n min-width: 0; \/* Essential for flex child to allow text wrapping *\/\r\n }\r\n\r\n .zk-icon-box {\r\n width: 32px;\r\n height: 32px;\r\n flex-shrink: 0;\r\n background: var(--zk-lime);\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--zk-bg);\r\n }\r\n\r\n .zk-btn-text {\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n color: white;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n line-height: 1.4;\r\n white-space: normal; \/* Force text to wrap *\/\r\n overflow-wrap: break-word;\r\n word-break: normal;\r\n }\r\n\r\n .zk-chevron {\r\n width: 20px;\r\n height: 20px;\r\n flex-shrink: 0;\r\n stroke: var(--zk-lime);\r\n fill: none;\r\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .zk-cyber-accordion.active .zk-chevron { transform: rotate(180deg); }\r\n\r\n .zk-content-gate {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n width: 100%;\r\n }\r\n\r\n .zk-inner-data {\r\n padding: 2.5rem 3rem 3.5rem 3rem;\r\n color: var(--zk-text-muted);\r\n border-top: 1px solid var(--zk-border);\r\n text-align: left;\r\n line-height: 1.7;\r\n }\r\n\r\n .zk-inner-data h3 {\r\n color: white;\r\n margin: 2.5rem 0 1.25rem 0;\r\n font-size: 1.25rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n font-weight: 800;\r\n }\r\n\r\n .zk-inner-data h3:first-child { margin-top: 0; }\r\n\r\n .zk-inner-data h3::before {\r\n content: \"\";\r\n width: 4px;\r\n height: 18px;\r\n background: var(--zk-lime);\r\n border-radius: 2px;\r\n flex-shrink: 0;\r\n }\r\n\r\n .zk-inner-data h4 {\r\n color: white;\r\n margin: 1.5rem 0 0.75rem 0;\r\n font-size: 1.05rem;\r\n font-weight: 700;\r\n }\r\n\r\n .zk-inner-data p { margin-bottom: 1.25rem; font-size: 0.95rem; }\r\n .zk-inner-data ul, .zk-inner-data ol { margin-left: 1.5rem; margin-bottom: 2rem; }\r\n .zk-inner-data li { margin-bottom: 0.6rem; font-size: 0.95rem; }\r\n .zk-inner-data strong { color: var(--zk-lime); font-weight: 700; }\r\n\r\n \/* --- FOOTER ELEMENTS --- *\/\r\n .zk-footer-claim {\r\n margin-top: 3rem;\r\n font-weight: 700;\r\n font-size: 1.15rem;\r\n color: white;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n opacity: 0.85;\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n }\r\n\r\n .zk-legal-note {\r\n margin-top: 3rem;\r\n font-size: 10px;\r\n color: var(--zk-text-muted);\r\n opacity: 0.35;\r\n text-align: left;\r\n line-height: 1.6;\r\n max-width: 100%;\r\n border-top: 1px solid rgba(255,255,255,0.06);\r\n padding-top: 1.5rem;\r\n }\r\n\r\n \/* REVEAL ANIMATION *\/\r\n .reveal { opacity: 0; transform: translateY(20px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }\r\n .reveal.visible { opacity: 1; transform: translateY(0); }\r\n\r\n \/* MOBILE OPTIMIERUNG *\/\r\n @media (max-width: 768px) {\r\n .zk-cyber-widget { padding: 1.5rem 0.75rem; }\r\n .zk-main-card { padding: 2rem 1.25rem; border-radius: 1.5rem; }\r\n .zk-header-flex { flex-direction: column; gap: 1.25rem; align-items: flex-start; }\r\n .zk-eu-seal { order: -1; width: 48px; height: 48px; }\r\n .zk-exposed-grid { grid-template-columns: 1fr; gap: 2rem; }\r\n \r\n .zk-main-title { font-size: 1.6rem; }\r\n .zk-sub-info { font-size: 1rem; }\r\n \r\n .zk-inner-data { padding: 1.5rem 1rem; }\r\n .zk-inner-data h3 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem 0; }\r\n \r\n .zk-acc-btn { padding: 1.25rem 1rem; min-height: auto; }\r\n .zk-btn-text { font-size: 0.85rem; }\r\n .zk-btn-label { gap: 10px; }\r\n \r\n .zk-footer-claim { font-size: 0.95rem; margin-top: 2rem; }\r\n }\r\n\r\n @media (max-width: 380px) {\r\n .zk-main-card { padding: 1.5rem 1rem; }\r\n .zk-main-title { font-size: 1.4rem; }\r\n .zk-btn-text { font-size: 0.8rem; letter-spacing: 0.02em; }\r\n .zk-btn-label { gap: 8px; }\r\n .zk-icon-box { width: 28px; height: 28px; }\r\n .zk-icon-box svg { width: 14px; height: 14px; }\r\n .zk-acc-btn { padding: 1rem 0.75rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"zk-cyber-widget\">\r\n <div class=\"zk-main-card reveal\">\r\n <div class=\"zk-grid-pattern\"><\/div>\r\n \r\n <!-- Top Interface -->\r\n <div class=\"zk-header-flex\">\r\n <div class=\"zk-status-badge\">\r\n <div class=\"zk-pulse\"><\/div>\r\n <span class=\"zk-status-text\">\u6307\u4ee4 (EU) 2024\/825<\/span>\r\n <\/div>\r\n <div class=\"zk-eu-seal\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Flag_of_Europe.svg\" alt=\"\u6b27\u76df\u65d7\u5e1c\">\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Title Section -->\r\n <div class=\"zk-title-area\">\r\n <span class=\"zk-pre-title\">\u5408\u89c4\u4e0e\u6cd5\u5f8b\u4fdd\u969c<\/span>\r\n <h1 class=\"zk-main-title\">\r\n \u4f01\u4e1a\u91c7\u7528 ZERKOM\u00ae \u68c0\u9a8c\u6807\u51c6\u7684<em>\u5fc5\u8981\u6027<\/em>\r\n <\/h1>\r\n <div class=\"zk-sub-info\">\r\n \u4f9d\u636e\u6b27\u76df EmpCo \u6307\u4ee4 (EU) 2024\/825 \u5bf9\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\u8fdb\u884c\u68c0\u9a8c\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Exposed Content: Einleitungstexte -->\r\n <div class=\"zk-exposed-grid\">\r\n <div class=\"zk-exposed-item\">\r\n <p>ZERKOM\u00ae EmpCo \u68c0\u9a8c\u6807\u51c6\u5c06\u6b27\u76df EmpCo \u6307\u4ee4\uff08\u8d4b\u80fd\u6d88\u8d39\u8005\u7eff\u8272\u8f6c\u578b\uff09\u7684\u8981\u6c42\u8f6c\u5316\u4e3a\u5ba2\u89c2\u3001\u72ec\u7acb\u3001\u53ef\u9a8c\u8bc1\u7684\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\uff08\u201c\u7eff\u8272\u58f0\u660e\u201d\uff09\u8ba4\u8bc1\u4e0e\u68c0\u9a8c\u7a0b\u5e8f\u3002<\/p>\r\n <\/div>\r\n <div class=\"zk-exposed-item\">\r\n <p>\u9762\u5411\u5e0c\u671b\u4ee5\u5408\u6cd5\u3001\u900f\u660e\u3001\u53ef\u8ffd\u6eaf\u65b9\u5f0f\u68c0\u9a8c\u6216\u8bc1\u660e\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\u7684\u4f01\u4e1a\u3001\u76d1\u7ba1\u673a\u6784\u53ca\u5e02\u573a\u53c2\u4e0e\u8005\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Main Interactive Element (Details 1-7) -->\r\n <div class=\"zk-cyber-accordion\">\r\n <button class=\"zk-acc-btn\" id=\"zkTrigger\">\r\n <div class=\"zk-btn-label\">\r\n <div class=\"zk-icon-box\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n <\/div>\r\n <span class=\"zk-btn-text\">\u5ba1\u8ba1\u65b9\u6cd5\u8bba\u4e0e\u6d41\u7a0b\u8be6\u60c5<\/span>\r\n <\/div>\r\n <svg class=\"zk-chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n \r\n <div class=\"zk-content-gate\">\r\n <div class=\"zk-inner-data\">\r\n \r\n <h3>1. \u68c0\u9a8c\u6807\u51c6\u7684\u76ee\u7684<\/h3>\r\n <p>\u672c\u68c0\u9a8c\u6807\u51c6\u7528\u4e8e\u5bf9\u7b26\u5408\u6b27\u76df\u6307\u4ee4 (EU) 2024\/825\uff08\u8d4b\u80fd\u6d88\u8d39\u8005\u7eff\u8272\u8f6c\u578b \u2013 EmpCo\uff09\u542b\u4e49\u7684\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\uff08\u201c\u7eff\u8272\u58f0\u660e\u201d\uff09\u8fdb\u884c\u5ba2\u89c2\u3001\u72ec\u7acb\u3001\u53ef\u8ffd\u6eaf\u7684\u68c0\u9a8c\u3002<\/p>\r\n <p>\u76ee\u6807\u662f\u63d0\u4f9b\u62bd\u8c61\u6cd5\u5f8b\u8981\u6c42\u7684\u5177\u4f53\u3001\u53ef\u9a8c\u8bc1\u5b9e\u65bd\u65b9\u6848\uff0c\u4ece\u800c\u5efa\u7acb\u900f\u660e\u5ea6\u3001\u53ef\u6bd4\u6027\u548c\u6cd5\u5f8b\u4fdd\u969c\u3002<\/p>\r\n\r\n <h3>2. \u9002\u7528\u8303\u56f4<\/h3>\r\n <p>ZERKOM\u00ae EmpCo \u68c0\u9a8c\u6807\u51c6\u9002\u7528\u4e8e\uff1a<\/p>\r\n <ul>\r\n <li>\u4e0e\u4ea7\u54c1\u76f8\u5173\u7684\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\uff0c<\/li>\r\n <li>\u4e0e\u4f01\u4e1a\u76f8\u5173\u7684\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\uff0c<\/li>\r\n <li>\u4f7f\u7528\u7684\u672f\u8bed\u3001\u6807\u7b7e\u3001\u5370\u7ae0\u548c\u7b26\u53f7\uff0c<\/li>\r\n <li>\u5e7f\u544a\u3001\u9500\u552e\u548c\u4f20\u64ad\u6750\u6599\uff08B2C \u4ee5\u53ca\u95f4\u63a5 B2B\uff09\u3002<\/li>\r\n <\/ul>\r\n\r\n <h3>3. \u6cd5\u5f8b\u4f9d\u636e<\/h3>\r\n <p>\u672c\u68c0\u9a8c\u6807\u51c6\u4e3b\u8981\u57fa\u4e8e\uff1a<\/p>\r\n <ul>\r\n <li>\u6307\u4ee4 (EU) 2024\/825\uff08EmpCo\uff09\uff0c<\/li>\r\n <li>\u6307\u4ee4 2005\/29\/EC\uff08\u4e0d\u516c\u5e73\u5546\u4e1a\u884c\u4e3a \u2013 UCPD\uff09\uff0c<\/li>\r\n <li>\u76f8\u5173\u6b27\u76df\u6cd5\u89c4\uff0c\u7279\u522b\u662f\u5faa\u73af\u7ecf\u6d4e\u4e0e\u5305\u88c5\u6cd5\u9886\u57df\uff0c<\/li>\r\n <li>\u56fd\u5bb6\u5b9e\u65bd\u6cd5\u5f8b\uff08\u4f8b\u5982\u53cd\u4e0d\u6b63\u5f53\u7ade\u4e89\u6cd5 \u2013 UWG\uff09\u3002<\/li>\r\n <\/ul>\r\n\r\n <h3>4. \u68c0\u9a8c\u65b9\u6cd5<\/h3>\r\n <p>ZERKOM\u00ae \u4f9d\u636e\u4ee5\u4e0b\u56db\u5927\u68c0\u9a8c\u652f\u67f1\u5bf9\u73af\u5883\u4e0e\u53ef\u6301\u7eed\u53d1\u5c55\u58f0\u660e\u8fdb\u884c\u68c0\u9a8c\uff1a<\/p>\r\n \r\n <h4>4.1 \u5177\u4f53\u6027<\/h4>\r\n <ul>\r\n <li>\u58f0\u660e\u662f\u5426\u6e05\u6670\u3001\u5177\u4f53\u3001\u660e\u786e\uff1f<\/li>\r\n <li>\u662f\u5426\u907f\u514d\u6216\u5145\u5206\u5177\u4f53\u5316\u201c\u73af\u4fdd\u201d\u3001\u201c\u53ef\u6301\u7eed\u201d\u6216\u201c\u7eff\u8272\u201d\u7b49\u7b3c\u7edf\u8868\u8ff0\uff1f<\/li>\r\n <\/ul>\r\n\r\n <h4>4.2 \u53ef\u9a8c\u8bc1\u6027<\/h4>\r\n <ul>\r\n <li>\u662f\u5426\u6709\u53ef\u9760\u3001\u53ef\u9a8c\u8bc1\u3001\u53ef\u8ffd\u6eaf\u7684\u8bc1\u660e\uff1f<\/li>\r\n <li>\u8fd9\u4e9b\u8bc1\u660e\u662f\u5426\u6709\u8bb0\u5f55\u3001\u53ef\u91cd\u590d\u4e14\u4e3a\u6700\u65b0\uff1f<\/li>\r\n <\/ul>\r\n\r\n <h4>4.3 \u76f8\u5173\u6027\u4e0e\u5b8c\u6574\u6027<\/h4>\r\n <ul>\r\n <li>\u58f0\u660e\u662f\u5426\u6d89\u53ca\u5173\u952e\u73af\u5883\u6216\u53ef\u6301\u7eed\u53d1\u5c55\u65b9\u9762\uff1f<\/li>\r\n <li>\u76f8\u5173\u9650\u5236\u3001\u6761\u4ef6\u6216\u524d\u63d0\u662f\u5426\u900f\u660e\u5448\u73b0\uff1f<\/li>\r\n <\/ul>\r\n\r\n <h4>4.4 \u72ec\u7acb\u6027<\/h4>\r\n <ul>\r\n <li>\u68c0\u9a8c\u662f\u5426\u72ec\u7acb\u4e8e\u88ab\u68c0\u4f01\u4e1a\u7684\u7ecf\u6d4e\u5229\u76ca\uff1f<\/li>\r\n <li>\u6807\u51c6\u6240\u6709\u6743\u3001\u5546\u6807\u6743\u4e0e\u68c0\u9a8c\u51b3\u5b9a\u4e4b\u95f4\u662f\u5426\u660e\u786e\u5206\u79bb\uff1f<\/li>\r\n <\/ul>\r\n\r\n <h3>5. \u68c0\u9a8c\u6d41\u7a0b<\/h3>\r\n <p>\u68c0\u9a8c\u6d41\u7a0b\u5305\u62ec\u4ee5\u4e0b\u6b65\u9aa4\uff1a<\/p>\r\n <ol>\r\n <li>\u7533\u8bf7\u4eba\u63d0\u4ea4\u7533\u8bf7<\/li>\r\n <li>\u6587\u4ef6\u4e0e\u6570\u636e\u5ba1\u67e5<\/li>\r\n <li>\u5408\u7406\u6027\u4e0e\u4e00\u81f4\u6027\u68c0\u9a8c<\/li>\r\n <li>\u7ed3\u679c\u8bc4\u4f30<\/li>\r\n <li>\u8ba4\u8bc1\u51b3\u5b9a<\/li>\r\n <li>\u5f55\u5165 ZERKOM\u00ae \u6ce8\u518c\u5e93<\/li>\r\n <\/ol>\r\n\r\n <h3>6. \u64a4\u9500\u4e0e\u5236\u88c1<\/h3>\r\n <p>\u82e5\u524d\u63d0\u6761\u4ef6\u4e0d\u518d\u6ee1\u8db3\u3001\u5b58\u5728\u8bef\u5bfc\u6027\u4f7f\u7528\u6216\u7f3a\u4e4f\u66f4\u65b0\uff0c\u53ef\u91c7\u53d6\u4ee5\u4e0b\u63aa\u65bd\uff1a<\/p>\r\n <ul>\r\n <li>\u64a4\u9500\u8ba4\u8bc1\uff0c<\/li>\r\n <li>\u4ece ZERKOM\u00ae \u6ce8\u518c\u5e93\u4e2d\u5220\u9664\uff0c<\/li>\r\n <li>\u7981\u6b62\u7ee7\u7eed\u4f7f\u7528\u5370\u7ae0\u6216\u8bc1\u4e66\u5f15\u7528\u3002<\/li>\r\n <\/ul>\r\n\r\n <h3>7. \u900f\u660e\u5ea6<\/h3>\r\n <p>\u68c0\u9a8c\u6807\u51c6\u3001\u68c0\u9a8c\u6d41\u7a0b\u53ca\u8bc1\u4e66\u6ce8\u518c\u5e93\u516c\u5f00\u53ef\u67e5\uff0c\u4ee5\u786e\u4fdd\u76d1\u7ba1\u90e8\u95e8\u3001\u5e02\u573a\u548c\u6d88\u8d39\u8005\u53ef\u8ffd\u6eaf\u3002<\/p>\r\n\r\n <h3>ZERKOM\u00ae \u2013 \u5c06\u76d1\u7ba1\u8981\u6c42\u8f6c\u5316\u4e3a\u53ef\u9a8c\u8bc1\u7684\u73b0\u5b9e<\/h3>\r\n\r\n <div class=\"zk-legal-note\">\r\n \u6cd5\u5f8b\u58f0\u660e\uff1aZERKOM\u00ae EmpCo \u68c0\u9a8c\u6807\u51c6\u5c5e\u4e8e\u79c1\u6cd5\u68c0\u9a8c\u4e0e\u8ba4\u8bc1\u7a0b\u5e8f\uff0c\u4e0d\u66ff\u4ee3\u4efb\u4f55\u5b98\u65b9\u51b3\u5b9a\u3002\u5176\u65e8\u5728\u4f9d\u636e\u9002\u7528\u7684\u6b27\u76df\u6d88\u8d39\u8005\u4fdd\u62a4\u4e0e\u7ade\u4e89\u6cd5\u89c4\u63d0\u4f9b\u5ba2\u89c2\u8bc1\u660e\u5e76\u964d\u4f4e\u98ce\u9669\u3002\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Footer -->\r\n <div class=\"zk-footer-claim\">\r\n ZERKOM\u00ae \u2013 \u5c06\u76d1\u7ba1\u8981\u6c42\u8f6c\u5316\u4e3a\u53ef\u9a8c\u8bc1\u7684\u73b0\u5b9e\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\n (function() {\r\n const accordion = document.querySelector('.zk-cyber-accordion');\r\n const trigger = document.getElementById('zkTrigger');\r\n const gate = document.querySelector('.zk-content-gate');\r\n\r\n if(trigger) {\r\n trigger.addEventListener('click', () => {\r\n const isActive = accordion.classList.contains('active');\r\n if (!isActive) {\r\n accordion.classList.add('active');\r\n gate.style.maxHeight = gate.scrollHeight + \"px\";\r\n } else {\r\n accordion.classList.remove('active');\r\n gate.style.maxHeight = null;\r\n }\r\n trigger.blur();\r\n });\r\n }\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-af36399 e-con-full e-flex e-con e-parent\" data-id=\"af36399\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ac84aa elementor-widget elementor-widget-html\" data-id=\"4ac84aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom Pricing Widget<\/title>\r\n <style>\r\n \/* =========================================\r\n VORSCHAU-RESET (Nur f\u00fcr die Anzeige hier)\r\n ========================================= *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f1f5f9; \/* Leichter grauer Hintergrund f\u00fcr Kontrast *\/\r\n \/* Nutzung der System-Schriftarten *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n color: #333;\r\n \/* WICHTIG: Kein 'display: flex' auf dem Body, damit Ihre Webseite nicht kaputt geht *\/\r\n }\r\n\r\n \/* =========================================\r\n WIDGET STYLES (UNIQUE SCOPE: .zk-pricing-section)\r\n Optimiert f\u00fcr Elementor & Mobilger\u00e4te\r\n ========================================= *\/\r\n\r\n .zk-pricing-section {\r\n \/* LOKALE VARIABLEN - Damit es unabh\u00e4ngig vom Global Style funktioniert *\/\r\n --zk-p-primary: #bef264; \r\n --zk-p-primary-dark: #a3e635; \r\n --zk-p-lime-text: #4d7c0f; \r\n --zk-p-lime-bg-light: #f7fee7; \r\n --zk-p-text-heading: #0f172a; \r\n --zk-p-text-body: #64748b; \r\n \r\n \/* DSGVO-Update: Nutzung von System-Schriftarten statt nur 'Inter' *\/\r\n --font-main: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n\r\n width: 100%;\r\n background-color: white; \r\n \/* Mobile First Padding - reduziert f\u00fcr mehr Breite (war 1rem) *\/\r\n padding: 3rem 0.5rem; \r\n position: relative;\r\n z-index: 10;\r\n \r\n \/* Schriftart-Reset *\/\r\n font-family: var(--font-main);\r\n color: var(--zk-p-text-body);\r\n line-height: 1.5;\r\n text-align: left;\r\n }\r\n\r\n \/* Tablet & Desktop Padding *\/\r\n @media (min-width: 768px) {\r\n .zk-pricing-section {\r\n padding: 5rem 1.5rem;\r\n }\r\n }\r\n\r\n \/* Box-Sizing Reset NUR innerhalb dieses Widgets *\/\r\n .zk-pricing-section *,\r\n .zk-pricing-section *::before,\r\n .zk-pricing-section *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Typografie Resets *\/\r\n .zk-pricing-section h2, \r\n .zk-pricing-section h3, \r\n .zk-pricing-section p, \r\n .zk-pricing-section a {\r\n margin: 0;\r\n padding: 0;\r\n font-weight: normal; \r\n text-decoration: none;\r\n }\r\n\r\n \/* SILBENTRENNUNG OPTIMIERUNG \r\n Headlines & Buttons: Nur manuell (­), damit keine Wortfetzen entstehen.\r\n Flie\u00dftext (p): Automatisch, basierend auf lang=\"de\".\r\n *\/\r\n .zk-pricing-section h2, \r\n .zk-pricing-section h3, \r\n .zk-pricing-section a {\r\n hyphens: manual;\r\n -webkit-hyphens: manual;\r\n -ms-hyphens: manual;\r\n }\r\n\r\n .zk-pricing-section p {\r\n hyphens: auto;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n }\r\n\r\n \/* Container *\/\r\n .zk-pricing-section .zk-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- Header Bereich --- *\/\r\n .zk-pricing-section .zk-section-header {\r\n text-align: center;\r\n margin-bottom: 2.5rem;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n padding: 0 0.5rem; \r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-pricing-section .zk-section-header {\r\n margin-bottom: 4rem;\r\n }\r\n }\r\n\r\n .zk-pricing-section .zk-eyebrow {\r\n color: var(--zk-p-lime-text);\r\n font-weight: 700; \r\n letter-spacing: 0.1em; \r\n font-size: 0.875rem;\r\n text-transform: uppercase;\r\n display: block;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .zk-pricing-section .zk-headline {\r\n font-weight: 800;\r\n font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n line-height: 1.2;\r\n color: var(--zk-p-text-heading);\r\n margin: 0;\r\n }\r\n\r\n \/* --- HIGHLIGHT UPDATE START --- *\/\r\n .zk-pricing-section .zk-highlight {\r\n color: var(--zk-p-lime-text);\r\n \/* UPDATE: Horizontaler Verlauf (to bottom) statt schr\u00e4g (120deg) *\/\r\n background: linear-gradient(to bottom, transparent 50%, rgba(190, 242, 100, 0.5) 50%);\r\n background-repeat: no-repeat;\r\n \/* UPDATE: Volle Gr\u00f6\u00dfe *\/\r\n background-size: 100% 100%;\r\n display: inline;\r\n font-weight: inherit;\r\n box-decoration-break: clone;\r\n -webkit-box-decoration-break: clone;\r\n \/* Kleines Padding f\u00fcr bessere Optik *\/\r\n padding: 0 4px;\r\n }\r\n \/* --- HIGHLIGHT UPDATE ENDE --- *\/\r\n\r\n \/* --- Grid System --- *\/\r\n .zk-pricing-section .zk-grid-3 {\r\n display: grid;\r\n grid-template-columns: 1fr; \r\n gap: 2rem; \r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-pricing-section .zk-grid-3 {\r\n grid-template-columns: 1fr 1fr; \r\n }\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-pricing-section .zk-grid-3 {\r\n grid-template-columns: 1fr 1fr 1fr; \r\n }\r\n }\r\n\r\n \/* --- Card Styles (Design Update) --- *\/\r\n .zk-pricing-section .zk-pricing-card {\r\n text-align: center;\r\n padding: 2rem;\r\n border-radius: 1.5rem;\r\n background-color: #ffffff;\r\n border: 1px solid #e2e8f0; \r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\r\n \/* UPDATE: Etwas l\u00e4ngere Transition f\u00fcr geschmeidigere \"Pop\"-Effekte *\/\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 100%; \r\n position: relative;\r\n scroll-margin-top: 120px; \r\n }\r\n\r\n \/* --- HOVER EFFEKTE (Jetzt ohne Media-Query f\u00fcr garantierte Sichtbarkeit) --- *\/\r\n \r\n .zk-pricing-section .zk-pricing-card:hover {\r\n border-color: var(--zk-p-primary);\r\n \/* UPDATE: St\u00e4rkerer Lift und leichte Vergr\u00f6\u00dferung (Scale) f\u00fcr \"Pop\"-Effekt *\/\r\n transform: translateY(-12px) scale(1.03);\r\n \/* UPDATE: Tieferer Schatten mit einem subtilen Limetten-Glow *\/\r\n box-shadow: 0 30px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1), 0 0 20px -5px rgba(190, 242, 100, 0.4);\r\n z-index: 2; \/* Sicherstellen, dass es \u00fcber anderen Elementen liegt *\/\r\n }\r\n \r\n .zk-pricing-section .zk-pricing-card:hover .zk-icon-circle {\r\n \/* UPDATE: St\u00e4rkere Rotation und Vergr\u00f6\u00dferung des Icons *\/\r\n transform: scale(1.15) rotate(8deg);\r\n background-color: var(--zk-p-primary);\r\n color: #0f172a;\r\n }\r\n \r\n \/* --- COOLER BUTTON HOVER --- *\/\r\n .zk-pricing-section .zk-btn-lime:hover {\r\n background-color: var(--zk-p-primary-dark);\r\n \/* UPDATE: St\u00e4rkerer Lift, leichter Scale und \"elastischer\" Schatten *\/\r\n transform: translateY(-4px) scale(1.02);\r\n box-shadow: 0 15px 25px -5px rgba(163, 230, 53, 0.6);\r\n color: #0f172a; \r\n }\r\n \r\n \/* Pfeil-Animation im Button *\/\r\n .zk-pricing-section .zk-btn-lime:hover::after {\r\n \/* UPDATE: Pfeil bewegt sich weiter *\/\r\n transform: translateX(6px);\r\n }\r\n\r\n .zk-pricing-section .zk-icon-circle {\r\n width: 80px;\r\n height: 80px;\r\n background-color: var(--zk-p-lime-bg-light);\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 1.5rem;\r\n color: var(--zk-p-lime-text);\r\n \/* UPDATE: Elastische Transition f\u00fcr das Icon *\/\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n flex-shrink: 0;\r\n }\r\n\r\n .zk-pricing-section .zk-card-title {\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n margin: 0 0 1rem 0;\r\n color: var(--zk-p-text-heading);\r\n line-height: 1.3;\r\n }\r\n\r\n .zk-pricing-section .zk-card-text {\r\n font-weight: 400;\r\n color: var(--zk-p-text-body);\r\n margin-bottom: 2rem;\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n flex-grow: 1; \r\n }\r\n\r\n \/* --- Button --- *\/\r\n .zk-pricing-section .zk-btn-lime {\r\n background-color: var(--zk-p-primary);\r\n color: #0f172a; \r\n border: none;\r\n padding: 0.75rem 2rem;\r\n border-radius: 99px; \r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n cursor: pointer;\r\n \/* UPDATE: \"Elastische\" Transition (cubic-bezier) f\u00fcr einen cooleren Bounce-Effekt *\/\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n }\r\n \r\n .zk-pricing-section .zk-btn-lime::after {\r\n content: \"\u2192\"; \/* Pfeil Symbol *\/\r\n display: inline-block;\r\n \/* UPDATE: Auch der Pfeil nutzt jetzt die elastische Transition *\/\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n font-family: sans-serif;\r\n }\r\n\r\n .zk-pricing-section .zk-icon {\r\n flex-shrink: 0;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 1.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n width: 40px;\r\n height: 40px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Widget Anfang -->\r\n <!-- lang=\"de\" stellt sicher, dass Browser deutsche Trennregeln nutzen -->\r\n <section id=\"dienstleistungen\" class=\"zk-pricing-section\" lang=\"zh-Hans\">\r\n <div class=\"zk-container\">\r\n \r\n <!-- Header -->\r\n <div class=\"zk-section-header\">\r\n <!-- ­ f\u00fcgt eine optionale Trennstelle ein -->\r\n <span class=\"zk-eyebrow\">ZERKOM\u00ae \u4fdd\u8bc1\u4ea7\u54c1\u5c5e\u6027<\/span>\r\n <h2 class=\"zk-headline\">\r\n \u6211\u4eec\u63d0\u4f9b\u900f\u660e\u5b9a\u4ef7\uff0c\u52a9\u60a8\u7684\u4f01\u4e1a\u505a\u51fa<span class=\"zk-highlight\">\u6b63\u786e\u51b3\u7b56<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <!-- Grid -->\r\n <div class=\"zk-grid-3\">\r\n \r\n <!-- Service 1 (ID entfernt) -->\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\r\n <!-- Shield Icon -->\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"zk-card-title\">\u5305\u88c5\u4e0e\u4ea7\u54c1\u8ba4\u8bc1<\/h3>\r\n <p class=\"zk-card-text\">\u5305\u88c5\u4e0e\u4ea7\u54c1\u8ba4\u8bc1\u786e\u4fdd\u9ad8\u8d28\u91cf\u6807\u51c6\u4e0e\u5b89\u5168\u6027\uff0c\u589e\u5f3a\u6d88\u8d39\u8005\u4fe1\u4efb\uff0c\u5e76\u5e2e\u52a9\u4f01\u4e1a\u6ee1\u8db3\u6cd5\u5f8b\u8981\u6c42\u3002<\/p>\r\n <a href=\"https:\/\/zerkom.de\/gesetzgebung\" class=\"zk-btn-lime\">\u4e86\u89e3\u66f4\u591a<\/a>\r\n <\/div>\r\n\r\n <!-- Service 2 (ID entfernt) -->\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\r\n <!-- Award Icon -->\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"7\"\/><polyline points=\"8.21 13.89 7 23 12 20 17 23 15.79 13.88\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"zk-card-title\">\u8d28\u91cf\u6807\u5fd7\u6388\u4e88<\/h3>\r\n <p class=\"zk-card-text\">\u8d28\u91cf\u6807\u5fd7\u7684\u6388\u4e88\u786e\u8ba4\u7b26\u5408\u6807\u51c6\u4e0e\u51c6\u5219\uff0c\u63d0\u5347\u6d88\u8d39\u8005\u4fe1\u4efb\uff0c\u5e76\u5728\u7ade\u4e89\u6fc0\u70c8\u7684\u5e02\u573a\u4e2d\u7a81\u51fa\u54c1\u724c\u4ef7\u503c\u3002<\/p>\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/\" class=\"zk-btn-lime\">\u4e86\u89e3\u66f4\u591a<\/a>\r\n <\/div>\r\n\r\n <!-- Service 3 (ID entfernt - Problem behoben) -->\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\r\n <!-- FileText Icon -->\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"\/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"\/><line x1=\"10\" x2=\"8\" y1=\"9\" y2=\"9\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"zk-card-title\">\u900f\u660e\u5305\u88c5\u4e0e\u4ea7\u54c1\u89e3\u51b3\u65b9\u6848<\/h3>\r\n <p class=\"zk-card-text\">\u900f\u660e\u5305\u88c5\u4e0e\u4ea7\u54c1\u89e3\u51b3\u65b9\u6848\u63d0\u5347\u4ea7\u54c1\u53ef\u89c1\u6027\u4e0e\u5c55\u793a\u6548\u679c\uff0c\u589e\u5f3a\u6d88\u8d39\u8005\u4fe1\u4efb\uff0c\u5e76\u901a\u8fc7\u4f7f\u7528\u73af\u4fdd\u6750\u6599\u652f\u6301\u53ef\u6301\u7eed\u5b9e\u8df5\u3002<\/p>\r\n <a href=\"#kontakt\" class=\"zk-btn-lime\">\u4e86\u89e3\u66f4\u591a<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <!-- Widget Ende -->\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce8826b e-con-full e-flex e-con e-parent\" data-id=\"ce8826b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcee400 elementor-widget elementor-widget-html\" data-id=\"dcee400\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n :root {\r\n --zk-lime: #bef264;\r\n --zk-bg: #0f172a;\r\n --zk-card-bg: rgba(15, 23, 42, 0.98);\r\n --zk-border: rgba(190, 242, 100, 0.4);\r\n --font-main: 'Inter', system-ui, -apple-system, sans-serif;\r\n }\r\n\r\n \/* POPUP OVERLAY *\/\r\n #zk-popup-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(2, 6, 23, 0.92);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n z-index: 999999;\r\n display: none; \r\n justify-content: center;\r\n align-items: center;\r\n padding: 15px;\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n #zk-popup-overlay.active {\r\n display: flex;\r\n opacity: 1;\r\n }\r\n\r\n \/* POPUP CARD *\/\r\n .zk-popup-card {\r\n width: 100%;\r\n max-width: 480px;\r\n background: var(--zk-card-bg) !important;\r\n border: 1px solid var(--zk-border) !important;\r\n border-radius: 2rem;\r\n padding: 3.5rem 2rem;\r\n position: relative;\r\n box-shadow: 0 0 60px rgba(190, 242, 100, 0.15);\r\n text-align: center;\r\n transform: translateY(40px);\r\n transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n box-sizing: border-box;\r\n }\r\n\r\n #zk-popup-overlay.active .zk-popup-card {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* HEADER *\/\r\n .zk-pop-header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .zk-pop-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(190, 242, 100, 0.1);\r\n padding: 6px 14px;\r\n border-radius: 99px;\r\n border: 1px solid rgba(190, 242, 100, 0.2);\r\n }\r\n\r\n .zk-pop-pulse {\r\n width: 8px; height: 8px;\r\n background: var(--zk-lime);\r\n border-radius: 50%;\r\n animation: zkPulse 2s infinite;\r\n }\r\n\r\n .zk-pop-eu-seal {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n border: 1.5px solid var(--zk-lime);\r\n padding: 2px;\r\n background: var(--zk-bg);\r\n flex-shrink: 0;\r\n }\r\n\r\n .zk-pop-eu-seal img {\r\n width: 100%; height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n @keyframes zkPulse {\r\n 0%, 100% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.4); opacity: 0.5; }\r\n }\r\n\r\n \/* TITLE REVERTED *\/\r\n .zk-pop-title {\r\n color: #ffffff !important;\r\n font-size: 1.7rem;\r\n font-weight: 800;\r\n line-height: 1.25;\r\n margin-bottom: 1rem;\r\n letter-spacing: -0.02em;\r\n display: block !important;\r\n }\r\n\r\n .zk-pop-title em {\r\n font-style: normal !important;\r\n color: var(--zk-lime) !important;\r\n -webkit-text-fill-color: var(--zk-lime) !important;\r\n text-fill-color: var(--zk-lime) !important;\r\n background: none !important;\r\n display: inline !important;\r\n }\r\n\r\n .zk-pop-text {\r\n color: #94a3b8 !important;\r\n font-size: 1.05rem;\r\n line-height: 1.6;\r\n margin-bottom: 2.5rem;\r\n display: block !important;\r\n }\r\n\r\n \/* BUTTON UPDATED *\/\r\n .zk-pop-btn {\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n background-color: var(--zk-lime) !important;\r\n color: var(--zk-bg) !important;\r\n padding: 1.25rem 1.5rem !important;\r\n border-radius: 14px !important;\r\n font-weight: 800 !important;\r\n text-transform: uppercase !important;\r\n letter-spacing: 0.05em !important;\r\n border: none !important;\r\n cursor: pointer !important;\r\n width: 100% !important;\r\n font-size: 0.85rem !important;\r\n line-height: 1.3 !important;\r\n white-space: normal !important;\r\n text-align: center !important;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\r\n -webkit-tap-highlight-color: transparent !important;\r\n outline: none !important;\r\n box-shadow: 0 4px 15px rgba(190, 242, 100, 0.2) !important;\r\n }\r\n\r\n .zk-pop-btn:hover {\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 10px 30px rgba(190, 242, 100, 0.4) !important;\r\n }\r\n\r\n \/* CLOSE *\/\r\n .zk-close-x {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n color: #475569 !important;\r\n cursor: pointer;\r\n padding: 10px;\r\n z-index: 10;\r\n -webkit-tap-highlight-color: transparent !important;\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .zk-popup-card { padding: 3rem 1.5rem; }\r\n .zk-pop-title { font-size: 1.5rem; }\r\n .zk-pop-btn { font-size: 0.8rem !important; padding: 1.1rem !important; }\r\n }\r\n<\/style>\r\n\r\n<div id=\"zk-popup-overlay\">\r\n <div class=\"zk-popup-card\">\r\n <div class=\"zk-close-x\" onclick=\"closeZkPopup()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\r\n <\/div>\r\n \r\n <div class=\"zk-pop-header\">\r\n <div class=\"zk-pop-badge\">\r\n <div class=\"zk-pop-pulse\"><\/div>\r\n <span style=\"color:var(--zk-lime); font-size:10px; font-weight:800; letter-spacing:1px;\">\u65b0\u6b27\u76df\u6307\u4ee4<\/span>\r\n <\/div>\r\n <div class=\"zk-pop-eu-seal\">\r\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b7\/Flag_of_Europe.svg\" alt=\"\u6b27\u76df\u65d7\u5e1c\">\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 class=\"zk-pop-title\">\u9700\u7acb\u5373\u884c\u52a8\uff1a\u6839\u636e EmpCo \u4f7f\u60a8\u7684\u58f0\u660e<em>\u5408\u6cd5\u5408\u89c4<\/em><\/h2>\r\n \r\n <p class=\"zk-pop-text\">\r\n \u6b27\u76df\u6307\u4ee4 2024\/825 \u5927\u5e45\u63d0\u9ad8\u4e86\u8981\u6c42\u3002\u5c06 ZERKOM\u00ae \u68c0\u9a8c\u6807\u51c6\u4f5c\u4e3a\u60a8\u7684\u5b9e\u65bd\u6307\u5357\u3002\r\n <\/p>\r\n\r\n <button class=\"zk-pop-btn\" onclick=\"ctaFollowLink()\">\r\n \u67e5\u770b\u68c0\u9a8c\u6807\u51c6\u4e0e\u8be6\u60c5\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n function openZkPopup() {\r\n const overlay = document.getElementById('zk-popup-overlay');\r\n if(!overlay) return;\r\n overlay.style.display = 'flex';\r\n setTimeout(() => { overlay.classList.add('active'); }, 50);\r\n }\r\n\r\n function closeZkPopup() {\r\n const overlay = document.getElementById('zk-popup-overlay');\r\n if(!overlay) return;\r\n overlay.classList.remove('active');\r\n setTimeout(() => { overlay.style.display = 'none'; }, 500);\r\n }\r\n\r\n function ctaFollowLink() {\r\n closeZkPopup();\r\n setTimeout(() => {\r\n const element = document.getElementById('empco');\r\n if (element) {\r\n const offset = 100; \r\n const bodyRect = document.body.getBoundingClientRect().top;\r\n const elementRect = element.getBoundingClientRect().top;\r\n const elementPosition = elementRect - bodyRect;\r\n const offsetPosition = elementPosition - offset;\r\n\r\n window.scrollTo({ top: offsetPosition, behavior: 'smooth' });\r\n } else {\r\n window.location.hash = 'empco';\r\n }\r\n }, 400);\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n setTimeout(openZkPopup, 5000); \r\n });\r\n\r\n document.getElementById('zk-popup-overlay').addEventListener('click', function(e) {\r\n if (e.target === this) closeZkPopup();\r\n });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9131673 e-con-full e-flex e-con e-parent\" data-id=\"9131673\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c03b6a2 elementor-widget elementor-widget-html\" data-id=\"c03b6a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom Services Widget<\/title>\r\n <style>\r\n \/* --- CI VARIABLEN --- *\/\r\n :root {\r\n --zk-primary: #bef264;\r\n --zk-primary-dark: #a3e635;\r\n --zk-text-heading: #0f172a;\r\n --zk-text-body: #64748b;\r\n --zk-lime-light: #ecfccb;\r\n --zk-lime-icon: #65a30d;\r\n --font-main: 'Inter', system-ui, -apple-system, sans-serif;\r\n }\r\n\r\n \/* --- WIDGET WRAPPER --- *\/\r\n .zk-services-section {\r\n background-color: transparent;\r\n font-family: var(--font-main);\r\n padding: 4rem 1.5rem;\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n overflow: visible;\r\n }\r\n\r\n .zk-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- FADE IN ANIMATION --- *\/\r\n @keyframes blurryFadeIn {\r\n 0% { opacity: 0; filter: blur(12px); transform: translateY(30px); }\r\n 100% { opacity: 1; filter: blur(0); transform: translateY(0); }\r\n }\r\n\r\n .zk-reveal {\r\n opacity: 0;\r\n animation: blurryFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\r\n }\r\n\r\n \/* --- GRID --- *\/\r\n .zk-grid-4 {\r\n display: grid;\r\n grid-template-columns: repeat(1, 1fr);\r\n gap: 1.5rem;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-grid-4 { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-grid-4 { grid-template-columns: repeat(4, 1fr); }\r\n }\r\n\r\n \/* --- CARD STYLE (Original CI) --- *\/\r\n .zk-card {\r\n background-color: rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n border-radius: 1rem;\r\n padding: 2rem 1.5rem;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n height: 100%;\r\n text-align: left;\r\n }\r\n\r\n .zk-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\r\n border-color: var(--zk-primary);\r\n }\r\n\r\n .zk-card-icon-wrapper {\r\n width: 56px;\r\n height: 56px;\r\n background: var(--zk-lime-light);\r\n color: var(--zk-lime-icon);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 1.25rem;\r\n flex-shrink: 0;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .zk-card:hover .zk-card-icon-wrapper {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n .zk-card h3 {\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n margin: 0;\r\n color: var(--zk-text-heading);\r\n line-height: 1.3;\r\n }\r\n\r\n .zk-icon {\r\n width: 32px;\r\n height: 32px;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n \/* --- MODAL (Heller CI Stil) --- *\/\r\n .zk-modal-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(15, 23, 42, 0.4);\r\n backdrop-filter: blur(8px);\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n padding: 1.5rem;\r\n }\r\n\r\n .zk-modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .zk-modal-content {\r\n background: white;\r\n padding: 3rem 2rem;\r\n border-radius: 1.5rem;\r\n max-width: 450px;\r\n width: 100%;\r\n position: relative;\r\n transform: scale(0.9);\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n text-align: center;\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .zk-modal-overlay.active .zk-modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .zk-modal-close {\r\n position: absolute;\r\n top: 1rem;\r\n right: 1rem;\r\n width: 32px;\r\n height: 32px;\r\n cursor: pointer;\r\n color: var(--zk-text-body);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 50%;\r\n transition: background 0.2s;\r\n }\r\n\r\n .zk-modal-close:hover { background: var(--zk-lime-light); color: var(--zk-lime-icon); }\r\n\r\n .zk-modal-icon-container {\r\n width: 72px;\r\n height: 72px;\r\n background: var(--zk-lime-light);\r\n color: var(--zk-lime-icon);\r\n border-radius: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 1.5rem;\r\n }\r\n\r\n .zk-modal-title {\r\n font-size: 1.25rem;\r\n font-weight: 800;\r\n color: var(--zk-text-heading);\r\n margin-bottom: 1rem;\r\n line-height: 1.3;\r\n }\r\n\r\n .zk-modal-text {\r\n color: var(--zk-text-body);\r\n line-height: 1.6;\r\n font-size: 0.95rem;\r\n margin: 0;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"zk-services-section\">\r\n <div class=\"zk-container zk-reveal\">\r\n <div class=\"zk-grid-4\">\r\n \r\n <!-- Card 1 -->\r\n <div class=\"zk-card\" onclick=\"openModal(0)\">\r\n <div class=\"zk-card-icon-wrapper\">\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"m7.5 4.27 9 5.15\"\/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22v-10\"\/><\/svg>\r\n <\/div>\r\n <h3>\u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\u8ba4\u8bc1<\/h3>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\r\n <div class=\"zk-card\" onclick=\"openModal(1)\">\r\n <div class=\"zk-card-icon-wrapper\">\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5\"\/><path d=\"M8.293 13.596 7.196 9.5 3.1 9.598\"\/><path d=\"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843\"\/><path d=\"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.774l-1.226-2.12\"\/><path d=\"m14 16-3 3 3 3\"\/><path d=\"m16.378 5 3 3-3 3\" transform=\"rotate(50, 15, 8)\"\/><\/svg>\r\n <\/div>\r\n <h3>\u5305\u88c5\u4e0e\u4ea7\u54c1\u751f\u547d\u5468\u671f\u5206\u6790<\/h3>\r\n <\/div>\r\n\r\n <!-- Card 3 -->\r\n <div class=\"zk-card\" onclick=\"openModal(2)\">\r\n <div class=\"zk-card-icon-wrapper\">\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\"\/><path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\"\/><\/svg>\r\n <\/div>\r\n <h3>\u751f\u6001\u5305\u88c5\u4e0e\u4ea7\u54c1\u89e3\u51b3\u65b9\u6848<\/h3>\r\n <\/div>\r\n\r\n <!-- Card 4 -->\r\n <div class=\"zk-card\" onclick=\"openModal(3)\">\r\n <div class=\"zk-card-icon-wrapper\">\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18\"\/><path d=\"M18 17V9\"\/><path d=\"M13 17V5\"\/><path d=\"M8 17v-3\"\/><\/svg>\r\n <\/div>\r\n <h3>\u670d\u52a1\u53ef\u6301\u7eed\u6027\u54a8\u8be2<\/h3>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- MODAL OVERLAY -->\r\n<div class=\"zk-modal-overlay\" id=\"zkModalOverlay\" onclick=\"closeModal()\">\r\n <div class=\"zk-modal-content\" onclick=\"event.stopPropagation()\">\r\n <div class=\"zk-modal-close\" onclick=\"closeModal()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\r\n <\/div>\r\n <div class=\"zk-modal-icon-container\" id=\"modalIcon\"><\/div>\r\n <h3 class=\"zk-modal-title\" id=\"modalTitle\"><\/h3>\r\n <p class=\"zk-modal-text\" id=\"modalText\"><\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const serviceData = [\r\n {\r\n title: \"\u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\u8ba4\u8bc1\",\r\n text: \"\u8ba4\u8bc1\u786e\u4fdd\u5305\u88c5\u548c\u4ea7\u54c1\u53ef\u5806\u80a5\uff0c\u5e76\u80fd\u591f\u4ee5\u73af\u4fdd\u65b9\u5f0f\u5904\u7f6e\u3002\",\r\n icon: '<svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"m7.5 4.27 9 5.15\"\/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22v-10\"\/><\/svg>'\r\n },\r\n {\r\n title: \"\u5305\u88c5\u4e0e\u4ea7\u54c1\u751f\u547d\u5468\u671f\u5206\u6790\",\r\n text: \"\u5305\u88c5\u4e0e\u4ea7\u54c1\u751f\u547d\u5468\u671f\u5206\u6790\u8bc4\u4f30\u4ece\u751f\u4ea7\u5230\u5305\u88c5\u4e0e\u4ea7\u54c1\u5904\u7f6e\u5168\u8fc7\u7a0b\u7684\u73af\u5883\u5f71\u54cd\u3002\",\r\n icon: '<svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5\"\/><path d=\"M8.293 13.596 7.196 9.5 3.1 9.598\"\/><path d=\"m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843\"\/><path d=\"M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.774l-1.226-2.12\"\/><path d=\"m14 16-3 3 3 3\"\/><path d=\"m16.378 5 3 3-3 3\" transform=\"rotate(50, 15, 8)\"\/><\/svg>'\r\n },\r\n {\r\n title: \"\u751f\u6001\u5305\u88c5\u4e0e\u4ea7\u54c1\u89e3\u51b3\u65b9\u6848\",\r\n text: \"\u751f\u6001\u5305\u88c5\u4e0e\u4ea7\u54c1\u89e3\u51b3\u65b9\u6848\u63d0\u4f9b\u73af\u4fdd\u66ff\u4ee3\u65b9\u6848\uff0c\u51cf\u5c11\u5e9f\u5f03\u7269\u5e76\u4fc3\u8fdb\u53ef\u6301\u7eed\u5b9e\u8df5\u3002\",\r\n icon: '<svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z\"\/><path d=\"M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12\"\/><\/svg>'\r\n },\r\n {\r\n title: \"\u670d\u52a1\u53ef\u6301\u7eed\u6027\u54a8\u8be2\",\r\n text: \"\u670d\u52a1\u53ef\u6301\u7eed\u6027\u54a8\u8be2\u5e2e\u52a9\u4f01\u4e1a\u5b9e\u65bd\u73af\u4fdd\u5b9e\u8df5\u5e76\u63d0\u5347\u8fd0\u8425\u6548\u7387\u3002\",\r\n icon: '<svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18\"\/><path d=\"M18 17V9\"\/><path d=\"M13 17V5\"\/><path d=\"M8 17v-3\"\/><\/svg>'\r\n }\r\n ];\r\n\r\n function openModal(index) {\r\n const data = serviceData[index];\r\n document.getElementById('modalTitle').innerText = data.title;\r\n document.getElementById('modalText').innerText = data.text;\r\n document.getElementById('modalIcon').innerHTML = data.icon;\r\n document.getElementById('zkModalOverlay').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('zkModalOverlay').classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n \/\/ Close modal on Escape key\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape') closeModal();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8830940 e-con-full e-flex e-con e-parent\" data-id=\"8830940\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d28fdd elementor-widget elementor-widget-html\" data-id=\"3d28fdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>ZERKOM\u00ae Accordion Widget<\/title>\r\n <style>\r\n \/* =========================================\r\n VORSCHAU-RESET\r\n Damit das Widget hier im Editor gut aussieht.\r\n (Hat keinen Einfluss auf die Funktion des Widgets selbst)\r\n ========================================= *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f1f5f9;\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n color: #333;\r\n \/* Kein display: flex auf Body, um Konflikte zu vermeiden *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-acc-widget\">\r\n\r\n <!-- STYLES (Scoped & Mobil-Optimiert + Height Fix) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-acc-widget {\r\n \/* Variablen Lokal *\/\r\n --zk-lime-50: #f7fee7;\r\n --zk-lime-200: #d9f99d;\r\n --zk-lime-500: #84cc16;\r\n --zk-lime-600: #65a30d;\r\n \r\n --zk-slate-100: #f1f5f9;\r\n --zk-slate-500: #64748b;\r\n --zk-slate-700: #334155;\r\n --zk-slate-800: #1e293b;\r\n --zk-slate-900: #0f172a;\r\n \r\n --zk-shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\r\n --zk-shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\r\n --zk-shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\r\n \r\n \/* DSGVO-Update: Nutzung von System-Schriftarten statt Google Fonts *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n \r\n line-height: 1.5;\r\n color: var(--zk-slate-800);\r\n background-color: #fafaf9;\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 3rem 1.5rem;\r\n overflow: hidden; \/* Verhindert Scrollbars am Rand *\/\r\n }\r\n\r\n \/* Reset innerhalb des Widgets *\/\r\n .zk-acc-widget *, .zk-acc-widget *::before, .zk-acc-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Typografie *\/\r\n .zk-acc-widget h2 { \r\n margin: 0 0 2rem 0; \r\n font-weight: 700; \r\n line-height: 1.2; \r\n font-size: clamp(1.75rem, 5vw, 3rem); \r\n text-align: center; \r\n color: var(--zk-slate-900); \r\n }\r\n \r\n .zk-acc-widget h3 { \r\n margin: 0 0 1rem 0; \r\n font-weight: 700; \r\n font-size: 1.25rem; \r\n line-height: 1.3; \r\n border-bottom: 1px solid var(--zk-slate-100); \r\n padding-bottom: 1rem; \r\n color: var(--zk-slate-900);\r\n }\r\n \r\n .zk-acc-widget p { \r\n margin-bottom: 1rem; \r\n color: var(--zk-slate-500); \r\n line-height: 1.6; \r\n font-size: 0.95rem;\r\n }\r\n \r\n .zk-acc-widget ul {\r\n padding-left: 1.5rem; \r\n list-style-type: disc; \r\n color: var(--zk-slate-500); \r\n margin-bottom: 1rem;\r\n }\r\n \r\n .zk-acc-widget li {\r\n margin-bottom: 0.5rem;\r\n }\r\n \r\n .zk-acc-widget button { font-family: inherit; }\r\n\r\n \/* --- Layout Container --- *\/\r\n \/* Auf Mobile: Standard Block Layout (Alles untereinander) *\/\r\n .zk-interleaved-layout {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n \/* --- Desktop Layout (Magic Grid) --- *\/\r\n @media (min-width: 1024px) {\r\n .zk-acc-widget { padding: 5rem 1.5rem; }\r\n .zk-acc-widget h3 { font-size: 1.5rem; }\r\n\r\n .zk-interleaved-layout {\r\n display: grid;\r\n \/* Grid Definition: Buttons links (fixer\/flexibler Anteil), Content rechts *\/\r\n grid-template-columns: 5fr 7fr; \r\n gap: 0;\r\n column-gap: 4rem;\r\n align-items: start;\r\n \/* Wichtig: Grid Auto Rows sorgt daf\u00fcr, dass die Buttons ihren Platz finden *\/\r\n grid-auto-rows: min-content;\r\n }\r\n }\r\n\r\n \/* --- Hintergrund Karte (Nur Desktop) --- *\/\r\n .zk-desktop-bg-card {\r\n display: none; \/* Mobil ausblenden *\/\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-desktop-bg-card {\r\n display: block;\r\n grid-column: 2; \/* Rechte Spalte *\/\r\n \/* WICHTIG: Erstreckt sich \u00fcber alle Zeilen, passt sich aber dem Grid-Inhalt an *\/\r\n grid-row: 1 \/ 100; \r\n background: #ffffff;\r\n border-radius: 1rem;\r\n box-shadow: var(--zk-shadow-xl);\r\n border: 1px solid var(--zk-slate-100);\r\n position: relative;\r\n min-height: 400px; \/* Mindesth\u00f6he, w\u00e4chst aber mit *\/\r\n height: 100%; \/* F\u00fcllt die Zelle komplett aus *\/\r\n z-index: 0;\r\n }\r\n }\r\n\r\n \/* Deko-Element (Blob) *\/\r\n .zk-deco-blob {\r\n position: absolute; \r\n top: 0; \r\n right: 0; \r\n width: 8rem; \r\n height: 8rem;\r\n background: linear-gradient(to bottom left, var(--zk-lime-200), transparent);\r\n border-bottom-left-radius: 100%; \r\n opacity: 0.5;\r\n pointer-events: none;\r\n }\r\n\r\n \/* --- Buttons --- *\/\r\n .zk-tab-btn {\r\n width: 100%; \r\n text-align: left; \r\n padding: 1rem 1.25rem;\r\n border-radius: 0.5rem;\r\n background: #ffffff; \r\n border: 1px solid var(--zk-slate-100);\r\n color: var(--zk-slate-700); \r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center;\r\n cursor: pointer; \r\n transition: all 0.2s ease;\r\n white-space: normal; \r\n line-height: 1.4;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Desktop spezifische Positionierung der Buttons *\/\r\n @media (min-width: 1024px) {\r\n .zk-tab-btn {\r\n grid-column: 1; \/* Linke Spalte *\/\r\n margin-bottom: 0.5rem;\r\n }\r\n }\r\n\r\n .zk-tab-btn:hover { \r\n background-color: var(--zk-lime-50); \r\n color: var(--zk-lime-600); \r\n transform: translateX(4px);\r\n }\r\n\r\n .zk-tab-btn.active {\r\n background-color: var(--zk-lime-500); \r\n color: #ffffff; \r\n border-color: var(--zk-lime-500);\r\n box-shadow: var(--zk-shadow-lg);\r\n }\r\n \r\n @media (min-width: 1024px) {\r\n .zk-tab-btn.active {\r\n transform: scale(1.02);\r\n }\r\n }\r\n \r\n .zk-tab-btn svg {\r\n width: 18px; height: 18px;\r\n min-width: 18px;\r\n margin-left: 10px;\r\n transition: 0.2s;\r\n }\r\n \r\n \/* Mobil: Pfeil drehen wenn aktiv *\/\r\n @media (max-width: 1023px) {\r\n .zk-tab-btn.active svg {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n\r\n \/* --- Content Panels --- *\/\r\n .zk-tab-content { \r\n display: none; \/* Standardm\u00e4\u00dfig zu *\/\r\n background: white;\r\n padding: 1.5rem;\r\n border-radius: 0 0 0.5rem 0.5rem;\r\n border: 1px solid var(--zk-slate-100);\r\n border-top: none;\r\n margin-top: -0.5rem; \/* Andocken an Button mobil *\/\r\n margin-bottom: 0.5rem;\r\n animation: zkFadeIn 0.4s ease;\r\n }\r\n\r\n .zk-tab-content.active { display: block; }\r\n\r\n \/* DESKTOP: Content in die rechte Karte verschieben *\/\r\n @media (min-width: 1024px) {\r\n .zk-tab-content {\r\n \/* Content in rechte Spalte zwingen *\/\r\n grid-column: 2; \r\n grid-row: 1 \/ 100; \/* Muss mit der Card \u00fcbereinstimmen *\/\r\n \r\n \/* Visuelle Resets, da die Hintergrundkarte (.zk-desktop-bg-card) das Styling \u00fcbernimmt *\/\r\n background: transparent;\r\n border: none;\r\n padding: 3rem;\r\n margin: 0;\r\n z-index: 2; \/* \u00dcber der Hintergrundkarte *\/\r\n \r\n \/* FIX: Wir nutzen hier display:none (via Klasse active geregelt) \r\n statt Opacity, damit die Grid-H\u00f6he sich anpasst! *\/\r\n }\r\n\r\n \/* Animation f\u00fcr Desktop *\/\r\n .zk-tab-content.active {\r\n display: block;\r\n animation: zkFadeInDesktop 0.5s ease forwards;\r\n }\r\n }\r\n \r\n @keyframes zkFadeIn { \r\n from { opacity: 0; transform: translateY(10px); } \r\n to { opacity: 1; transform: translateY(0); } \r\n }\r\n \r\n @keyframes zkFadeInDesktop { \r\n from { opacity: 0; transform: translateY(5px); } \r\n to { opacity: 1; transform: translateY(0); } \r\n }\r\n\r\n \/* --- Externe Link Buttons (Footer) - UPDATED --- *\/\r\n .zk-badges-container {\r\n margin-top: 2.5rem; \r\n display: flex; \r\n flex-wrap: wrap; \r\n gap: 1rem;\r\n z-index: 1;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-badges-container {\r\n grid-column: 1; \/* Linke Spalte, unter den Buttons *\/\r\n }\r\n }\r\n \r\n .zk-link-badge {\r\n display: inline-flex; \r\n align-items: center;\r\n padding: 0.75rem 1.25rem;\r\n \/* FIX: !important um Elementor Styles zu \u00fcberschreiben *\/\r\n color: #ffffff !important;\r\n font-size: 0.8rem; \r\n font-weight: 700; \r\n text-transform: uppercase; \r\n letter-spacing: 0.05em;\r\n border-radius: 9999px;\r\n text-decoration: none !important; \/* Elementor Unterstreichungen entfernen *\/\r\n background-color: #84CC15; \r\n line-height: 1.2;\r\n box-shadow: var(--zk-shadow-md);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n white-space: normal;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden; \r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); \r\n }\r\n \r\n .zk-link-badge::after {\r\n content: '\u2197';\r\n margin-left: 0.5rem;\r\n font-size: 1em;\r\n line-height: 1;\r\n }\r\n\r\n \/* Glanz-Effekt (Shine) Element *\/\r\n .zk-link-badge::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 50%;\r\n height: 100%;\r\n background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: skewX(-20deg);\r\n transition: 0s;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Hover Animation: Bewegung + Farbwechsel *\/\r\n .zk-link-badge:hover {\r\n transform: translateY(-4px) scale(1.02);\r\n background-color: var(--zk-lime-600); \/* NEU: Button wird dunkler *\/\r\n box-shadow: 0 10px 20px -5px rgba(101, 163, 13, 0.6); \/* Schatten passend zur neuen Farbe *\/\r\n opacity: 1;\r\n color: #ffffff !important; \/* Sicherheitshalber auch beim Hover *\/\r\n }\r\n\r\n \/* Glanz fliegt r\u00fcber beim Hover *\/\r\n .zk-link-badge:hover::before {\r\n left: 150%;\r\n transition: 0.7s ease-in-out;\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT (Interleaved Structure) -->\r\n <h2>\u8ba4\u8bc1\u6d41\u7a0b\u4e0e\u7acb\u6cd5<\/h2>\r\n\r\n <div class=\"zk-interleaved-layout\">\r\n \r\n <!-- Desktop Background Card (Empty container for visuals) -->\r\n <div class=\"zk-desktop-bg-card\">\r\n <div class=\"zk-deco-blob\"><\/div>\r\n <\/div>\r\n\r\n <!-- ITEM 0 (NEU: EmpCo Richtlinie) -->\r\n <button class=\"zk-tab-btn active\" onclick=\"zkSwitchTab(0)\">\r\n <span>2026\u5e74\u8d77\u65b0\u6cd5\u89c4\uff1aEmpCo \u6307\u4ee4<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content active\" id=\"zk-tab-0\">\r\n <h3>\u65b0\u7684\u6cd5\u5b9a\u5e02\u573a\u5f62\u52bf\uff1aEmpCo \u6307\u4ee4\u5c06\u4e8e 27. September 2026 \u5168\u9762\u751f\u6548<\/h3>\r\n <p>\u968f\u7740\u6b27\u76df EmpCo \u6307\u4ee4\uff08Empowering Consumers for the Green Transition\uff09\u7684\u751f\u6548\uff0c\u751f\u6001\u4ea7\u54c1\u58f0\u660e\u5e02\u573a\u6b63\u5728\u53d1\u751f\u6839\u672c\u6027\u53d8\u5316\u3002\u81ea 27. September 2026 \u8d77\uff0c\u73af\u5883\u548c\u53ef\u6301\u7eed\u6027\u58f0\u660e\u5c06\u53d7\u5230\u4e25\u683c\u76d1\u7ba1\u3002<\/p>\r\n <p>\u8bf8\u5982\"\u53ef\u5806\u80a5\"\u3001\"\u53ef\u751f\u7269\u964d\u89e3\"\u3001\"\u73af\u4fdd\"\u6216\"CO\u2082 \u4e2d\u548c\"\u7b49\u58f0\u660e\uff0c\u4eca\u540e\u53ea\u6709\u5728\u6709\u72ec\u7acb\u3001\u53ef\u9a8c\u8bc1\u8bc1\u636e\u652f\u6301\u7684\u60c5\u51b5\u4e0b\u65b9\u53ef\u4f7f\u7528\u3002<\/p>\r\n \r\n <p><strong>\u5bf9\u5236\u9020\u5546\u800c\u8a00\uff0c\u8fd9\u610f\u5473\u7740\uff1a<\/strong><\/p>\r\n <ul>\r\n <li>\u672a\u7ecf\u68c0\u9a8c\u7684\u81ea\u6211\u58f0\u660e\uff08\"self claims\"\uff09\u88ab\u7981\u6b62\u3002<\/li>\r\n <li>\u73af\u5883\u6807\u8bc6\u548c\u6807\u7b7e\u5fc5\u987b\u83b7\u5f97\u56fd\u5bb6\u8ba4\u53ef\u6216\u4e25\u683c\u8ba4\u8bc1\u3002<\/li>\r\n <li>\u7f3a\u4e4f\u8bc1\u636e\u53ef\u80fd\u5bfc\u81f4\u7f5a\u6b3e\u3001\u8b66\u544a\u51fd\u548c\u5e02\u573a\u7981\u5165\u3002<\/li>\r\n <li>\u53ea\u6709\u72ec\u7acb\u7684\u8ba4\u8bc1\u673a\u6784\u624d\u80fd\u786e\u8ba4\u6b64\u7c7b\u58f0\u660e\u7684\u771f\u5b9e\u6027\u3002<\/li>\r\n <\/ul>\r\n <p>\u7531\u6b64\u4ea7\u751f\u65b0\u7684\u5e02\u573a\u8981\u6c42\u2014\u2014\u540c\u65f6\u4e5f\u7ed9\u5e0c\u671b\u7ee7\u7eed\u4ee5\u751f\u6001\u58f0\u660e\u8fdb\u884c\u5ba3\u4f20\u7684\u4f01\u4e1a\u5e26\u6765\u9ad8\u98ce\u9669\u3002<\/p>\r\n \r\n <br>\r\n \r\n <h3 style=\"border:none; margin-bottom: 0.5rem; color: var(--zk-lime-600);\">\u4e3a\u4f55 ZERKOM\u00ae \u73b0\u5728\u81f3\u5173\u91cd\u8981<\/h3>\r\n <p>ZERKOM\u00ae \u662f\u5fb7\u56fd\u548c\u6b27\u6d32\u552f\u4e00\u83b7\u5f97\u56fd\u5bb6\u8ba4\u53ef\u7684\u8ba4\u8bc1\u673a\u6784\uff0c\u4ee5\u5b98\u65b9\u3001\u7ecf\u5ba1\u6838\u7684\u62c5\u4fdd\u5546\u6807\u786e\u8ba4\"100 % \u53ef\u5806\u80a5\"\u4fdd\u8bc1\u3002\u4ec5\u6b64\u8ba4\u8bc1\u65b9\u5f0f\u5373\u53ef\u5b8c\u5168\u6ee1\u8db3\u65b0 EmpCo \u6307\u4ee4\u7684\u8981\u6c42\u3002<\/p>\r\n \r\n <p><strong>\u5bf9\u5236\u9020\u5546\u800c\u8a00\uff0c\u8fd9\u5e26\u6765\u51b3\u5b9a\u6027\u4f18\u52bf\uff1a<\/strong><\/p>\r\n <!-- Liste ohne Standard-Bullets f\u00fcr die Haken -->\r\n <ul style=\"list-style-type: none; padding-left: 0;\">\r\n <li>\u2714 <strong>\u6cd5\u5f8b\u5b89\u5168\u7684\"100 % \u53ef\u5806\u80a5\"\u58f0\u660e<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u53ea\u6709\u83b7\u5f97 ZERKOM\u00ae \u8ba4\u8bc1\uff0c\u8be5\u58f0\u660e\u4eca\u540e\u65b9\u53ef\u7ee7\u7eed\u516c\u5f00\u4f7f\u7528\u3002<\/span><\/li>\r\n <li>\u2714 <strong>\u9632\u8303\u8b66\u544a\u51fd\u548c\u5e02\u573a\u7981\u5165<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u672a\u7ecf\u72ec\u7acb\u68c0\u9a8c\u7684\u6807\u8bc6\u4eca\u540e\u5c06\u88ab\u7981\u6b62\u3002ZERKOM\u00ae \u53ef\u89c4\u907f\u6b64\u98ce\u9669\u3002<\/span><\/li>\r\n <li>\u2714 <strong>\u7b26\u5408\u6b27\u76df\u8981\u6c42\u7684\u5b98\u65b9\u68c0\u9a8c\u6d41\u7a0b<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u4ee5\u5408\u6cd5\u5408\u89c4\u7684\u7a0b\u5e8f\u8bb0\u5f55\uff0c\u5b8c\u5168\u6ee1\u8db3 EmpCo \u8981\u6c42\u3002<\/span><\/li>\r\n <li>\u2714 <strong>2026 \u5e74\u8d77\u7684\u7ade\u4e89\u4f18\u52bf<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u6301\u6709 ZERKOM\u00ae \u6807\u8bc6\u7684\u5236\u9020\u5546\u5728\u622a\u6b62\u65e5\u671f\u540e\u4ecd\u53ef\u53ef\u4fe1\u5730\u8fdb\u884c\u5ba3\u4f20\u3002<\/span><\/li>\r\n <\/ul>\r\n \r\n <p style=\"margin-top: 1.5rem; font-weight: 600;\">ZERKOM\u00ae \u662f\u65b0\u6cd5\u89c4\u5f62\u52bf\u4e0b\u7684\u89e3\u51b3\u65b9\u6848\u3002\u901a\u8fc7 ZERKOM\u00ae\uff0c\u60a8\u7684\u4ea7\u54c1\u5c06\u83b7\u5f97\u8ba4\u53ef\u7684\u68c0\u9a8c\u6807\u8bc6\uff0c\u5e76\u83b7\u51c6\u7ee7\u7eed\u5b89\u5168\u5730\u8fdb\u884c\u5ba3\u4f20\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 1 (Vorher Item 0) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(1)\">\r\n <span>\u56de\u987e\uff1a\u81ea 17.01.2024 \u8d77\u7684\u5e02\u573a\u5f62\u52bf<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-1\">\r\n <h3>\u81ea 17.01.2024 \u8d77\u7684\u65b0\u5e02\u573a\u5f62\u52bf<\/h3>\r\n <p><strong>\u9650\u5236\u6f02\u7eff\u884c\u4e3a\u7684\u6b27\u76df\u6cd5\u5f8b<\/strong><br>\u968f\u7740\u9650\u5236\u6f02\u7eff\u884c\u4e3a\u7684\u65b0\u6b27\u76df\u6cd5\u5f8b\u4e8e 17. Januar 2024 \u751f\u6548\uff0c\u660e\u786e\u8981\u6c42\u63d0\u4f9b\u6e05\u6670\u53ef\u8fa8\u7684\u62c5\u4fdd\u4fe1\u606f\uff0c\u5e76\u5f15\u5165\u8d85\u51fa\u6cd5\u5b9a\u4fdd\u4fee\u8303\u56f4\u7684\u65b0\u62c5\u4fdd\u6807\u7b7e\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 2 (Vorher Item 1) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(2)\">\r\n <span>ZERKOM\u00ae \u63d0\u4f9b\u4fdd\u969c<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-2\">\r\n <h3>ZERKOM\u00ae \u63d0\u4f9b\u4fdd\u969c<\/h3>\r\n <p>\u4ee5\u62c5\u4fdd\u5546\u6807\u5f62\u5f0f\u5448\u73b0\u7684 ZERKOM\u00ae \u53ef\u6301\u7eed\u6027\u6807\u8bc6\u72ec\u4e00\u65e0\u4e8c\uff0c\u586b\u8865\u4e86\u8d28\u91cf\u6807\u8bc6\u7684\u4fdd\u62a4\u7a7a\u767d\u3002\u4f20\u7edf\u8d28\u91cf\u6807\u8bc6\u4ec5\u4ee3\u8868\u68c0\u9a8c\u65f6\u70b9\u7684\u5feb\u7167\uff0c\u800c ZERKOM\u00ae \u4e3a\u4ea7\u54c1\u7279\u6027\u63d0\u4f9b\u6301\u4e45\u4e14\u5177\u6709\u6cd5\u5f8b\u7ea6\u675f\u529b\u7684\u4fdd\u8bc1\u6216\u62c5\u4fdd\u3002<br><br>\u968f\u7740\u8fd1\u5e74\u6765\u65b0\u6307\u4ee4\u3001\u6cd5\u89c4\u548c\u6cd5\u5f8b\u7684\u51fa\u53f0\uff0c\u4e00\u4e2a\u660e\u786e\u7684\u8d8b\u52bf\u6b63\u5728\u663e\u73b0\uff1a\u5851\u6599\u548c\u6f02\u7eff\u884c\u4e3a\u5728\u672a\u6765\u5c06\u53d7\u5230\u8d8a\u6765\u8d8a\u4e25\u5389\u7684\u6253\u51fb\u3002\u66f4\u4e25\u683c\u7684\u65b0\u6cd5\u5f8b\u5c06\u9646\u7eed\u51fa\u53f0\uff0c\u7ed9\u53d7\u5f71\u54cd\u4f01\u4e1a\u53ca\u5176\u8fd0\u8425\u548c\u6218\u7565\u89c4\u5212\u5e26\u6765\u4e0d\u53ef\u4f30\u91cf\u7684\u98ce\u9669\u3002\u53ef\u7591\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\u6216\u6f02\u7eff\u884c\u4e3a\u53ef\u80fd\u6c38\u4e45\u635f\u5bb3\u4f01\u4e1a\u5f62\u8c61\uff0c\u5bfc\u81f4\u5ba2\u6237\u6d41\u5931\u3001\u8d22\u52a1\u635f\u5931\uff0c\u751a\u81f3\u6cd5\u5f8b\u540e\u679c\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 3 (Vorher Item 2) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(3)\">\r\n <span>ZERKOM\u00ae \u53ef\u6301\u7eed\u6027\u6807\u8bc6\u7684\u4f18\u52bf<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-3\">\r\n <h3>ZERKOM\u00ae \u53ef\u6301\u7eed\u6027\u6807\u8bc6\u7684\u4f18\u52bf<\/h3>\r\n <!-- FLIESSTEXT -->\r\n <p>ZERKOM\u00ae \u6807\u8bc6\u4f7f\u4f01\u4e1a\u80fd\u591f\u51ed\u501f\u771f\u6b63\u7eff\u8272\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\u5728\u7ade\u4e89\u4e2d\u8131\u9896\u800c\u51fa\uff0c\u5e76\u4e3a\u6240\u6709\u76f8\u5173\u65b9\u2014\u2014\u4ece\u5236\u9020\u5546\u3001\u7ecf\u9500\u5546\u5230\u7ec8\u7aef\u6d88\u8d39\u8005\u2014\u2014\u5e26\u6765\u4f18\u52bf\u3002\u8fd9\u6709\u52a9\u4e8e\u83b7\u5f97\u79ef\u6781\u7684\u5a92\u4f53\u62a5\u9053\u3001\u6d88\u8d39\u8005\u8ba4\u53ef\uff0c\u4ee5\u53ca ZERKOM\u00ae \u6beb\u4e0d\u59a5\u534f\u7684\u7eff\u8272\u53ef\u6301\u7eed\u6027\u6807\u8bc6\u5411\u76f8\u5e94\u4f01\u4e1a\u4f20\u9012\u7684\u6b63\u9762\u54c1\u724c\u5f62\u8c61\u3002<\/p>\r\n <p>\u6d88\u8d39\u8005\u9996\u6b21\u62e5\u6709\u4e86\u4e00\u4e2a\u5728\u6cd5\u5f8b\u4e0a\u5177\u6709\u7ea6\u675f\u529b\u5730\u4fdd\u8bc1\u4ea7\u54c1\u7279\u6027\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\u3002\u4f5c\u4e3a\u552f\u4e00\u9002\u7528\u4e8e 100% \u53ef\u5806\u80a5\u4ea7\u54c1\u548c\u5305\u88c5\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\uff0cZERKOM\u00ae \u73b0\u5df2\u7b26\u5408\u65b0\u7684\u6b27\u76df\u6307\u4ee4\uff0c\u4ece\u800c\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4e86\u9762\u5411\u672a\u6765\u6570\u5e74\u53ca\u65b0\u6cd5\u89c4\u7684\u89c4\u5212\u4fdd\u969c\u3002<\/p>\r\n \r\n <!-- PUNKTE \/ CHECKLISTE -->\r\n <ul style=\"list-style-type: none; padding-left: 0; margin-top: 1.5rem;\">\r\n <li>\u2714 <strong>\u6cd5\u5f8b\u5b89\u5168\u7684\"100 % \u53ef\u5806\u80a5\"\u58f0\u660e<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u53ea\u6709\u83b7\u5f97 ZERKOM\u00ae \u8ba4\u8bc1\uff0c\u8be5\u58f0\u660e\u4eca\u540e\u65b9\u53ef\u7ee7\u7eed\u516c\u5f00\u4f7f\u7528\u3002<\/span><\/li>\r\n <li>\u2714 <strong>\u9632\u8303\u8b66\u544a\u51fd\u548c\u5e02\u573a\u7981\u5165<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u672a\u7ecf\u72ec\u7acb\u68c0\u9a8c\u7684\u6807\u8bc6\u4eca\u540e\u5c06\u88ab\u7981\u6b62\u3002ZERKOM\u00ae \u53ef\u89c4\u907f\u6b64\u98ce\u9669\u3002<\/span><\/li>\r\n <li>\u2714 <strong>\u7b26\u5408\u6b27\u76df\u8981\u6c42\u7684\u5b98\u65b9\u68c0\u9a8c\u6d41\u7a0b<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u6211\u4eec\u7684\u8ba4\u8bc1\u4ee5\u5408\u6cd5\u5408\u89c4\u7684\u7a0b\u5e8f\u8bb0\u5f55\u53ef\u5806\u80a5\u6027\u3002<\/span><\/li>\r\n <li>\u2714 <strong>2026 \u5e74\u8d77\u7684\u7ade\u4e89\u4f18\u52bf<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">\u6301\u6709 ZERKOM\u00ae \u6807\u8bc6\u7684\u5236\u9020\u5546\u5728\u622a\u6b62\u65e5\u671f\u540e\u4ecd\u53ef\u53ef\u4fe1\u5730\u8fdb\u884c\u5ba3\u4f20\u3002<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- ITEM 4 (Vorher Item 3) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(4)\">\r\n <span>\u5546\u6807\"100% \u53ef\u5806\u80a5\"\u627f\u62c5\u62c5\u4fdd<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-4\">\r\n <h3>\u5546\u6807\"100% \u53ef\u5806\u80a5\"\u627f\u62c5\u62c5\u4fdd<\/h3>\r\n <p>\u7eff\u8272\u5706\u70b9\u548c\u7eff\u8272\u6309\u94ae\u5df2\u5e7f\u4e3a\u4eba\u77e5\u3002\u5982\u4eca\u8fd8\u6709\"100% \u53ef\u5806\u80a5\"\u5546\u6807\uff0c\u8fd9\u5f97\u76ca\u4e8e 14. Januar 2020 \u751f\u6548\u7684\u300a\u5546\u6807\u6cd5\u73b0\u4ee3\u5316\u6cd5\u6848\u300b\u3002\u8be5\u6cd5\u5f8b\u901a\u8fc7\"\u62c5\u4fdd\u5546\u6807\"\u521b\u5efa\u4e86\u4e00\u7c7b\u65b0\u7684\u5546\u6807\u3002\u73b0\u5728\u53ef\u4ee5\u6ce8\u518c\u6807\u8bc6\uff0c\u7531\u5546\u6807\u6301\u6709\u4eba\u5bf9\u5176\u4ed6\u4f9b\u5e94\u5546\u5546\u54c1\u548c\u670d\u52a1\u7684\u7279\u5b9a\u7279\u6027\u627f\u62c5\u62c5\u4fdd\u3002<\/p>\r\n <p>\u4e0e\u4e2a\u4f53\u5546\u6807\u7684\u6765\u6e90\u529f\u80fd\u4e0d\u540c\uff0c\u62c5\u4fdd\u5546\u6807\u5177\u6709\u62c5\u4fdd\u529f\u80fd\u3002\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u4e0d\u5f97\u81ea\u884c\u63d0\u4f9b\u5176\u4e3a\u4e4b\u627f\u62c5\u7279\u6027\u62c5\u4fdd\u7684\u5546\u54c1\u548c\u670d\u52a1\uff0c\u7531\u6b64\u5b9e\u73b0\u4e00\u5b9a\u7a0b\u5ea6\u7684\u4e2d\u7acb\u6027\u3002\u56e0\u6b64\uff0c\u8d85\u5e02\u8fde\u9501\u7b49\u4f7f\u7528\u7684\u81ea\u6709\u8d28\u91cf\u6807\u8bc6\u65e0\u6cd5\u4f5c\u4e3a\u62c5\u4fdd\u5546\u6807\u83b7\u5f97\u4fdd\u62a4\u3002\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u5fc5\u987b\u5728\u7ae0\u7a0b\u4e2d\u89c4\u5b9a\u5176\u5546\u6807\u7684\u5177\u4f53\u89c4\u5219\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 5 (Vorher Item 4) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(5)\">\r\n <span>\u8d28\u91cf\u6807\u8bc6\u4fdd\u62a4\u7a7a\u767d\u5df2\u586b\u8865<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-5\">\r\n <h3>\u8d28\u91cf\u6807\u8bc6\u4fdd\u62a4\u7a7a\u767d\u5df2\u586b\u8865<\/h3>\r\n <p>\u6b64\u524d\uff0c\u5373\u4f7f\u662f\u5ba2\u89c2\u7684\u8d28\u91cf\u6807\u8bc6\u4e5f\u53ea\u80fd\u5728\u975e\u5e38\u6709\u9650\u7684\u8303\u56f4\u5185\u4f5c\u4e3a\u5546\u6807\u53d7\u5230\u4fdd\u62a4\u3002\u4e2a\u4f53\u5546\u6807\u2014\u2014\u901a\u4fd7\u5730\u8bf4\u2014\u2014\u662f\u67d0\u4e00\u7279\u5b9a\u5236\u9020\u5546\u4ea7\u54c1\u7684\u540d\u79f0\u3002\u7136\u800c\uff0c\u8d28\u91cf\u6807\u8bc6\u662f\u5728\u4e0d\u540c\u5236\u9020\u5546\u7684\u4ea7\u54c1\u6ee1\u8db3\u8981\u6c42\u8d28\u91cf\u65f6\u8d34\u9644\u4e8e\u4ea7\u54c1\u4e4b\u4e0a\uff0c\u56e0\u6b64\u5b83\u4eec\u5e76\u975e\u4f20\u7edf\u610f\u4e49\u4e0a\u7684\u5546\u6807\u3002<\/p>\r\n <p>\u5373\u4f7f\u4e2a\u522b\u8d28\u91cf\u6807\u8bc6\u5df2\u6ce8\u518c\u4e3a\u5546\u6807\uff0c\u4ece\u6cd5\u5f8b\u89d2\u5ea6\u770b\u4e5f\u65e0\u6cd5\u4f5c\u4e3a\u5546\u6807\u4f7f\u7528\uff0c\u56e0\u6b64\u672a\u83b7\u6cd5\u9662\u8ba4\u53ef\u3002\u62c5\u4fdd\u5546\u6807\u7531\u6b64\u586b\u8865\u4e86\u6b64\u7c7b\u6807\u8bc6\u6ce8\u518c\u4e2d\u7684\u4fdd\u62a4\u7a7a\u767d\u3002<\/p>\r\n <p>\"100% \u53ef\u5806\u80a5\"\u5546\u6807\u5229\u7528\u8fd9\u4e00\u65b0\u673a\u9047\uff0c\u901a\u8fc7\u5728\u6cd5\u5f8b\u4e0a\u5177\u6709\u7ea6\u675f\u529b\u5730\u4fdd\u8bc1\u4ea7\u54c1\u7279\u6027\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\uff0c\u4e3a\u4f01\u4e1a\u4e0e\u6d88\u8d39\u8005\u63d0\u4f9b\u4fdd\u969c\u3002\u4f5c\u4e3a\u552f\u4e00\u9002\u7528\u4e8e 100% \u53ef\u5806\u80a5\u4ea7\u54c1\u548c\u5305\u88c5\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\uff0c\u5b83\u73b0\u5df2\u7b26\u5408\u65b0\u7684\u6b27\u76df\u6307\u4ee4\uff0c\u4ece\u800c\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4e86\u9762\u5411\u672a\u6765\u6570\u5e74\u53ca\u65b0\u6cd5\u89c4\u7684\u89c4\u5212\u4fdd\u969c\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 6 (Vorher Item 5) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(6)\">\r\n <span>\u4ec0\u4e48\u662f\u62c5\u4fdd\u5546\u6807\uff1f<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-6\">\r\n <h3>\u4ec0\u4e48\u662f\u62c5\u4fdd\u5546\u6807\uff1f<\/h3>\r\n <p>\u62c5\u4fdd\u5546\u6807\u662f\u4e00\u79cd\u7279\u6b8a\u7c7b\u578b\u7684\u5546\u6807\uff0c\u7528\u4e8e\u4fdd\u8bc1\u5546\u54c1\u6216\u670d\u52a1\u7684\u7279\u5b9a\u7279\u6027\u6216\u8d28\u91cf\u7279\u5f81\u3002\u6b64\u7c7b\u5546\u6807\u5e76\u975e\u7531\u4ea7\u54c1\u5236\u9020\u5546\u81ea\u8eab\u4f7f\u7528\uff0c\u800c\u662f\u7531\u72ec\u7acb\u673a\u6784\u4f7f\u7528\uff0c\u8be5\u673a\u6784\u68c0\u9a8c\u5e76\u8ba4\u8bc1\u662f\u5426\u7b26\u5408\u7279\u5b9a\u6807\u51c6\u3002\u62c5\u4fdd\u5546\u6807\u7684\u4e3b\u8981\u529f\u80fd\u662f\u5411\u6d88\u8d39\u8005\u8868\u660e\u4ea7\u54c1\u6216\u670d\u52a1\u7b26\u5408\u7279\u5b9a\u65e2\u5b9a\u6807\u51c6\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 7 (Vorher Item 6) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(7)\">\r\n <span>\u7ed3\u679c\uff1a\u8d28\u91cf\u6807\u8bc6<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-7\">\r\n <h3>\u7ed3\u679c\uff1a\u8d28\u91cf\u6807\u8bc6<\/h3>\r\n <p>\u8d28\u91cf\u6807\u8bc6\u662f\u8d34\u9644\u4e8e\u4ea7\u54c1\u4e0a\u7684\u53ef\u89c1\u6807\u5fd7\uff08\u901a\u5e38\u4ee5\u6807\u8bc6\u5f62\u5f0f\u5448\u73b0\uff09\uff0c\u8868\u660e\u4ea7\u54c1\u7b26\u5408\u62c5\u4fdd\u5546\u6807\u6240\u89c4\u5b9a\u7684\u6807\u51c6\u3002\u53ea\u6709\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u6709\u6743\u6388\u4e88\u8be5\u8d28\u91cf\u6807\u8bc6\u3002\u6301\u6709\u4eba\u901a\u5e38\u662f\u72ec\u7acb\u7ec4\u7ec7\u6216\u673a\u6784\uff0c\u5b9a\u671f\u8fdb\u884c\u68c0\u67e5\uff0c\u4ee5\u786e\u4fdd\u4ea7\u54c1\u6216\u670d\u52a1\u7b26\u5408\u65e2\u5b9a\u8981\u6c42\u3002<\/p>\r\n <p>\u968f\u7740\u8fd1\u5e74\u6765\u65b0\u6307\u4ee4\u3001\u6cd5\u89c4\u548c\u6cd5\u5f8b\u7684\u51fa\u53f0\uff0c\u4e00\u4e2a\u660e\u786e\u7684\u8d8b\u52bf\u6b63\u5728\u663e\u73b0\uff1a\u5851\u6599\u548c\u6f02\u7eff\u884c\u4e3a\u5728\u672a\u6765\u5c06\u53d7\u5230\u8d8a\u6765\u8d8a\u4e25\u5389\u7684\u6253\u51fb\u3002\u66f4\u4e25\u683c\u7684\u65b0\u6cd5\u5f8b\u5c06\u9646\u7eed\u51fa\u53f0\uff0c\u7ed9\u53d7\u5f71\u54cd\u4f01\u4e1a\u53ca\u5176\u8fd0\u8425\u548c\u6218\u7565\u89c4\u5212\u5e26\u6765\u4e0d\u53ef\u4f30\u91cf\u7684\u98ce\u9669\u3002\u53ef\u7591\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\u6216\u6f02\u7eff\u884c\u4e3a\u53ef\u80fd\u6c38\u4e45\u635f\u5bb3\u4f01\u4e1a\u5f62\u8c61\uff0c\u5bfc\u81f4\u5ba2\u6237\u6d41\u5931\u3001\u8d22\u52a1\u635f\u5931\uff0c\u751a\u81f3\u6cd5\u5f8b\u540e\u679c\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 8 (Vorher Item 7) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(8)\">\r\n <span>\u4e0e\u6587\u5b57\u5546\u6807\u6216\u81c6\u9020\u5546\u6807\u7684\u533a\u522b<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-8\">\r\n <h3>\u4e0e\u6587\u5b57\u5546\u6807\u6216\u81c6\u9020\u5546\u6807\u7684\u533a\u522b<\/h3>\r\n <p><strong>\u6587\u5b57\u5546\u6807\uff1a<\/strong>\u6587\u5b57\u5546\u6807\u7531\u4e00\u4e2a\u6216\u591a\u4e2a\u8bcd\u8bed\u7ec4\u6210\uff0c\u7528\u4e8e\u533a\u5206\u4e00\u5bb6\u4f01\u4e1a\u7684\u5546\u54c1\u6216\u670d\u52a1\u4e0e\u5176\u4ed6\u4f01\u4e1a\u7684\u5546\u54c1\u6216\u670d\u52a1\u3002\u5b83\u4fdd\u62a4\u7279\u5b9a\u7684\u540d\u79f0\u6216\u8868\u8fbe\uff0c\u6301\u6709\u4eba\u53ef\u5c06\u5176\u7528\u4e8e\u6807\u8bc6\u81ea\u6709\u4ea7\u54c1\u3002<\/p>\r\n <p><strong>\u81c6\u9020\u5546\u6807\uff1a<\/strong>\u81c6\u9020\u5546\u6807\u662f\u6587\u5b57\u5546\u6807\u7684\u4e00\u79cd\u7279\u6b8a\u5f62\u5f0f\uff0c\u7531\u6ca1\u6709\u76f4\u63a5\u542b\u4e49\u7684\u865a\u6784\u8bcd\u8bed\u6784\u6210\u3002\u4f8b\u5982\"Kodak\"\u6216\"Xerox\"\u7b49\u54c1\u724c\u3002\u6b64\u7c7b\u5546\u6807\u540c\u6837\u7528\u4e8e\u533a\u5206\u4e00\u5bb6\u4f01\u4e1a\u7684\u4ea7\u54c1\u4e0e\u5176\u4ed6\u4f01\u4e1a\u7684\u4ea7\u54c1\u3002<\/p>\r\n <p>\u76f8\u6bd4\u4e4b\u4e0b\uff0c\u62c5\u4fdd\u5546\u6807\u5e76\u975e\u4e3b\u8981\u7528\u4e8e\u533a\u5206\u4e0d\u540c\u4f01\u4e1a\u4ea7\u54c1\u7684\u6765\u6e90\uff0c\u800c\u662f\u7528\u4e8e\u786e\u8ba4\u7279\u5b9a\u7684\u8d28\u91cf\u6807\u51c6\u3002<\/p>\r\n <p>\u6d88\u8d39\u8005\u9996\u6b21\u62e5\u6709\u4e86\u4e00\u4e2a\u5728\u6cd5\u5f8b\u4e0a\u5177\u6709\u7ea6\u675f\u529b\u5730\u4fdd\u8bc1\u4ea7\u54c1\u7279\u6027\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\u3002\u4f5c\u4e3a\u552f\u4e00\u9002\u7528\u4e8e 100% \u53ef\u5806\u80a5\u4ea7\u54c1\u548c\u5305\u88c5\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\uff0cZERKOM\u00ae \u73b0\u5df2\u7b26\u5408\u65b0\u7684\u6b27\u76df\u6307\u4ee4\uff0c\u4ece\u800c\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4e86\u9762\u5411\u672a\u6765\u6570\u5e74\u53ca\u65b0\u6cd5\u89c4\u7684\u89c4\u5212\u4fdd\u969c\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 9 (Vorher Item 8) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(9)\">\r\n <span>\u62c5\u4fdd\u5546\u6807\"100% \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\"<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-9\">\r\n <h3>\u62c5\u4fdd\u5546\u6807\"100% \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\"<\/h3>\r\n <p>\u62c5\u4fdd\u5546\u6807\"100% \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\"\u610f\u5473\u7740\u6240\u6709\u8d34\u9644\u8be5\u8d28\u91cf\u6807\u8bc6\u7684\u5305\u88c5\u548c\u4ea7\u54c1\u5747\u5b8c\u5168\u53ef\u5806\u80a5\uff0c\u4ece\u800c\u7b26\u5408\u7279\u5b9a\u73af\u5883\u6807\u51c6\u3002\u8be5\u5546\u6807\u5411\u6d88\u8d39\u8005\u4fdd\u8bc1\uff1a<\/p>\r\n <ul>\r\n <li><strong>\u73af\u4fdd\u6027\uff1a<\/strong>\u5305\u88c5\u548c\u4ea7\u54c1\u7ecf\u8bbe\u8ba1\u53ef\u5728\u7279\u5b9a\u6761\u4ef6\u4e0b\u5b8c\u5168\u751f\u7269\u964d\u89e3\u3002<\/li>\r\n <li><strong>\u8d28\u91cf\u63a7\u5236\uff1a<\/strong>\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u5b9a\u671f\u68c0\u9a8c\u662f\u5426\u7b26\u5408\u8fd9\u4e9b\u6807\u51c6\u3002<\/li>\r\n <li><strong>\u4fe1\u4efb\uff1a<\/strong>\u6d88\u8d39\u8005\u53ef\u76f8\u4fe1\u8d34\u9644\u8be5\u8d28\u91cf\u6807\u8bc6\u7684\u4ea7\u54c1\u786e\u5b9e\u73af\u4fdd\u3002<\/li>\r\n <\/ul>\r\n <p>\u53ea\u6709\u8be5\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u6709\u6743\u5411\u4ea7\u54c1\u7b26\u5408\u65e2\u5b9a\u6807\u51c6\u7684\u5236\u9020\u5546\u6388\u4e88\"100% \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\"\u8d28\u91cf\u6807\u8bc6\u3002\u8fd9\u786e\u4fdd\u53ea\u6709\u7ecf\u68c0\u9a8c\u548c\u8ba4\u8bc1\u7684\u4ea7\u54c1\u65b9\u53ef\u8d34\u9644\u6b64\u6807\u8bc6\u3002<\/p>\r\n <p>\u603b\u4e4b\uff0c\"100% \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\"\u7b49\u62c5\u4fdd\u5546\u6807\u4e3a\u6d88\u8d39\u8005\u63d0\u4f9b\u5bf9\u6240\u6807\u8bc6\u4ea7\u54c1\u8d28\u91cf\u548c\u73af\u4fdd\u6027\u7684\u4fdd\u969c\u4e0e\u4fe1\u4efb\u3002<\/p>\r\n <p>\u4e0e\u4e2a\u4f53\u5546\u6807\u7684\u6765\u6e90\u529f\u80fd\u4e0d\u540c\uff0c\u62c5\u4fdd\u5546\u6807\u5177\u6709\u62c5\u4fdd\u529f\u80fd\u3002\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u4e0d\u5f97\u81ea\u884c\u63d0\u4f9b\u5176\u4e3a\u4e4b\u627f\u62c5\u7279\u6027\u62c5\u4fdd\u7684\u5546\u54c1\u548c\u670d\u52a1\uff0c\u7531\u6b64\u5b9e\u73b0\u4e00\u5b9a\u7a0b\u5ea6\u7684\u4e2d\u7acb\u6027\u3002\u56e0\u6b64\uff0c\u8d85\u5e02\u8fde\u9501\u7b49\u4f7f\u7528\u7684\u81ea\u6709\u8d28\u91cf\u6807\u8bc6\u65e0\u6cd5\u4f5c\u4e3a\u62c5\u4fdd\u5546\u6807\u83b7\u5f97\u4fdd\u62a4\u3002\u62c5\u4fdd\u5546\u6807\u6301\u6709\u4eba\u5fc5\u987b\u5728\u7ae0\u7a0b\u4e2d\u89c4\u5b9a\u5176\u5546\u6807\u7684\u5177\u4f53\u89c4\u5219\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 10 (Vorher Item 9) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(10)\">\r\n <span>\u8ba4\u8bc1\u7684\u4f18\u52bf<\/span>\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <div class=\"zk-tab-content\" id=\"zk-tab-10\">\r\n <h3>\u8ba4\u8bc1\u7684\u4f18\u52bf<\/h3>\r\n <p>\u901a\u8fc7 ZERKOM\u00ae \u5bf9 100 % \u53ef\u5806\u80a5\u5305\u88c5\u548c\u4ea7\u54c1\u7684\u8ba4\u8bc1\uff0c\u4f01\u4e1a\u4e0d\u4ec5\u6709\u673a\u4f1a\u5efa\u7acb\u5ba2\u6237\u4fe1\u4efb\uff0c\u8fd8\u80fd\u5c55\u793a\u5176\u5bf9\u53ef\u6301\u7eed\u53d1\u5c55\u7684\u627f\u8bfa\u3002\u6211\u4eec\u7684\u62c5\u4fdd\u5546\u6807\u4ee3\u8868\u7ecf\u68c0\u9a8c\u7684\u8d28\u91cf\u548c\u73af\u4fdd\u6027\u3002<\/p>\r\n <p>\u5373\u4f7f\u4e2a\u522b\u8d28\u91cf\u6807\u8bc6\u5df2\u6ce8\u518c\u4e3a\u5546\u6807\uff0c\u4ece\u6cd5\u5f8b\u89d2\u5ea6\u770b\u4e5f\u65e0\u6cd5\u4f5c\u4e3a\u5546\u6807\u4f7f\u7528\uff0c\u56e0\u6b64\u672a\u83b7\u6cd5\u9662\u8ba4\u53ef\u3002\u62c5\u4fdd\u5546\u6807\u7531\u6b64\u586b\u8865\u4e86\u6b64\u7c7b\u6807\u8bc6\u6ce8\u518c\u4e2d\u7684\u4fdd\u62a4\u7a7a\u767d\u3002<\/p>\r\n <p>\"100% \u53ef\u5806\u80a5\"\u5546\u6807\u5229\u7528\u8fd9\u4e00\u65b0\u673a\u9047\uff0c\u901a\u8fc7\u5728\u6cd5\u5f8b\u4e0a\u5177\u6709\u7ea6\u675f\u529b\u5730\u4fdd\u8bc1\u4ea7\u54c1\u7279\u6027\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\uff0c\u4e3a\u4f01\u4e1a\u4e0e\u6d88\u8d39\u8005\u63d0\u4f9b\u4fdd\u969c\u3002\u4f5c\u4e3a\u552f\u4e00\u9002\u7528\u4e8e 100% \u53ef\u5806\u80a5\u4ea7\u54c1\u548c\u5305\u88c5\u7684\u53ef\u6301\u7eed\u6027\u6807\u8bc6\uff0c\u5b83\u73b0\u5df2\u7b26\u5408\u65b0\u7684\u6b27\u76df\u6307\u4ee4\uff0c\u4ece\u800c\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4e86\u9762\u5411\u672a\u6765\u6570\u5e74\u53ca\u65b0\u6cd5\u89c4\u7684\u89c4\u5212\u4fdd\u969c\u3002<\/p>\r\n <\/div>\r\n\r\n <!-- EXTERNAL LINKS (Immer ganz unten) - UPDATED CLASS NAMES -->\r\n <div class=\"zk-badges-container\">\r\n <a href=\"https:\/\/www.europarl.europa.eu\/news\/de\/press-room\/20240112IPR16772\/parlament-nimmt-verbot-von-grunfarberei-und-irrefuhrender-produktinformation-an\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">\u6b27\u6d32\u8bae\u4f1a\u65b0\u95fb\u7a3f<\/a>\r\n <a href=\"https:\/\/www.umweltbundesamt.de\/sites\/default\/files\/medien\/376\/dokumente\/impulsvortrag_jutta_figge.pdf\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">\u8054\u90a6\u53f8\u6cd5\u4e0e\u6d88\u8d39\u8005\u4fdd\u62a4\u90e8<\/a>\r\n <a href=\"https:\/\/www.dpma.de\/marken\/markenschutz\/mamog\/gewaehrleistungsmarke\/index.html\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">\u5fb7\u56fd\u4e13\u5229\u5546\u6807\u5c40<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- SCRIPT -->\r\n <script>\r\n function zkSwitchTab(index) {\r\n \/\/ 1. Alle Buttons zur\u00fccksetzen (Klasse 'active' entfernen)\r\n const buttons = document.querySelectorAll('.zk-tab-btn');\r\n buttons.forEach(btn => btn.classList.remove('active'));\r\n \r\n \/\/ 2. Geklickten Button aktivieren\r\n \/\/ Da die Buttons keine ID haben, nutzen wir die Reihenfolge (Index), \r\n \/\/ um sicherzugehen, dass wir den richtigen erwischen, falls das Script mehrfach genutzt w\u00fcrde.\r\n \/\/ Hier gehen wir davon aus, dass die Reihenfolge der Buttons den Indizes 0-9 entspricht.\r\n if(buttons[index]) {\r\n buttons[index].classList.add('active');\r\n }\r\n\r\n \/\/ 3. Alle Content-Bereiche verstecken\r\n const contents = document.querySelectorAll('.zk-tab-content');\r\n contents.forEach(content => content.classList.remove('active'));\r\n \r\n \/\/ 4. Den gew\u00fcnschten Content anzeigen\r\n const targetContent = document.getElementById('zk-tab-' + index);\r\n if(targetContent) {\r\n targetContent.classList.add('active');\r\n \r\n \/\/ Optional: Bei Mobile zum Inhalt scrollen, damit der User sieht, dass sich was ge\u00e4ndert hat\r\n if(window.innerWidth < 1024) {\r\n targetContent.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4b55c0 elementor-widget elementor-widget-html\" data-id=\"b4b55c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\nfunction zkSwitchTab(index) {\r\n \/\/ 1. Alle Buttons zur\u00fccksetzen (Klasse 'active' entfernen)\r\n const buttons = document.querySelectorAll('.zk-tab-btn');\r\n buttons.forEach(btn => btn.classList.remove('active'));\r\n \r\n \/\/ 2. Geklickten Button aktivieren\r\n \/\/ Da die Buttons keine ID haben, nutzen wir die Reihenfolge (Index), \r\n \/\/ um sicherzugehen, dass wir den richtigen erwischen, falls das Script mehrfach genutzt w\u00fcrde.\r\n \/\/ Hier gehen wir davon aus, dass die Reihenfolge der Buttons den Indizes 0-9 entspricht.\r\n if(buttons[index]) {\r\n buttons[index].classList.add('active');\r\n }\r\n\r\n \/\/ 3. Alle Content-Bereiche verstecken\r\n const contents = document.querySelectorAll('.zk-tab-content');\r\n contents.forEach(content => content.classList.remove('active'));\r\n \r\n \/\/ 4. Den gew\u00fcnschten Content anzeigen\r\n const targetContent = document.getElementById('zk-tab-' + index);\r\n if(targetContent) {\r\n targetContent.classList.add('active');\r\n \r\n \/\/ Optional: Bei Mobile zum Inhalt scrollen, damit der User sieht, dass sich was ge\u00e4ndert hat\r\n if(window.innerWidth < 1024) {\r\n targetContent.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n }\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9662671 e-con-full e-flex e-con e-parent\" data-id=\"9662671\" data-element_type=\"container\" data-e-type=\"container\" id=\"video\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-809517a elementor-widget elementor-widget-html\" data-id=\"809517a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom Video Widget<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-video-widget\">\r\n\r\n <!-- STYLES (Isoliert & Responsive) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* VORSCHAU-HELFER *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #0f172a; \r\n }\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-video-widget {\r\n \/* LOKALE VARIABLEN *\/\r\n --zk-v-lime-400: #a3e635;\r\n --zk-v-lime-500: #84cc16; \/* Primary *\/\r\n --zk-v-lime-600: #65a30d;\r\n \r\n --zk-v-slate-300: #cbd5e1;\r\n --zk-v-slate-400: #94a3b8;\r\n --zk-v-slate-900: #0f172a; \/* Dunkler Hintergrund *\/\r\n \r\n --zk-v-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 \/ 0.25);\r\n \r\n \/* Basis Einstellungen f\u00fcr diesen Block - DSGVO Konform *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n color: #ffffff;\r\n background-color: var(--zk-v-slate-900);\r\n width: 100%;\r\n box-sizing: border-box;\r\n position: relative;\r\n overflow: hidden; \r\n }\r\n\r\n \/* Reset f\u00fcr Elemente innerhalb des Widgets *\/\r\n .zk-video-widget *, \r\n .zk-video-widget *::before, \r\n .zk-video-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .zk-video-widget h2,\r\n .zk-video-widget p,\r\n .zk-video-widget img,\r\n .zk-video-widget iframe {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* --- Typografie --- *\/\r\n .zk-video-widget h2 { \r\n margin-bottom: 1.5rem; \r\n font-weight: 700; \r\n line-height: 1.1; \r\n \/* Responsive Schriftgr\u00f6\u00dfe: Min 2rem, Max 3rem *\/\r\n font-size: clamp(2rem, 5vw, 3rem); \r\n color: white;\r\n }\r\n\r\n .zk-video-widget p { \r\n margin-bottom: 1.5rem; \r\n color: var(--zk-v-slate-300); \r\n font-size: 1.125rem; \r\n line-height: 1.6; \r\n }\r\n\r\n \/* --- Layout & Container --- *\/\r\n .zk-video-widget .zk-section-padding { \r\n padding: 5rem 0; \/* Innenabstand oben\/unten *\/\r\n }\r\n\r\n .zk-video-widget .zk-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 1.5rem;\r\n position: relative;\r\n z-index: 5; \/* \u00dcber den Blobs *\/\r\n }\r\n\r\n \/* Grid System *\/\r\n .zk-video-widget .zk-grid-2 { \r\n display: grid; \r\n gap: 3rem; \r\n align-items: center;\r\n grid-template-columns: 1fr; \/* Standard: 1 Spalte (Mobile) *\/\r\n }\r\n \r\n @media (min-width: 1024px) {\r\n .zk-video-widget .zk-grid-2 { \r\n grid-template-columns: 1fr 1fr; \/* Desktop: 2 Spalten *\/\r\n gap: 5rem; \r\n }\r\n }\r\n\r\n \/* --- Dark Feature Box --- *\/\r\n .zk-video-widget .zk-dark-feature {\r\n display: flex; \r\n align-items: center; \r\n gap: 1rem;\r\n background: rgba(255,255,255,0.05);\r\n padding: 1rem 1.25rem; \r\n border-radius: 0.75rem;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n backdrop-filter: blur(4px);\r\n margin-top: 2rem;\r\n max-width: 100%;\r\n width: fit-content;\r\n }\r\n \r\n .zk-video-widget .zk-icon-group {\r\n display: flex; \r\n color: var(--zk-v-lime-400); \/* Sterne Farbe *\/\r\n flex-shrink: 0;\r\n gap: 2px; \r\n }\r\n\r\n \/* --- Video Frame (STABLE VERSION) --- *\/\r\n .zk-video-widget .zk-video-frame {\r\n position: relative;\r\n width: 100%;\r\n height: 0;\r\n \/* Padding-Hack: 16:9 Verh\u00e4ltnis (9 \/ 16 * 100 = 56.25%) *\/\r\n \/* H\u00e4lt den Platz frei und verhindert Layout-Shifts *\/\r\n padding-bottom: 56.25%; \r\n \r\n border-radius: 1rem; \r\n overflow: hidden; \r\n box-shadow: var(--zk-v-shadow-2xl);\r\n border: 4px solid rgba(255, 255, 255, 0.1);\r\n background-color: #000;\r\n cursor: pointer;\r\n z-index: 10;\r\n }\r\n\r\n .zk-video-widget .zk-video-img {\r\n position: absolute; \/* WICHTIG f\u00fcr Padding-Hack *\/\r\n top: 0;\r\n left: 0;\r\n width: 100%; \r\n height: 100%; \r\n object-fit: cover; \r\n opacity: 0.8; \r\n transition: all 0.7s ease;\r\n display: block;\r\n z-index: 20; \/* Bild liegt \u00fcber dem schwarzen Hintergrund *\/\r\n }\r\n \r\n .zk-video-widget .zk-video-frame:has(.zk-play-circle):hover .zk-video-img { \r\n transform: scale(1.05); \r\n opacity: 0.6; \r\n }\r\n\r\n .zk-video-widget .zk-play-circle {\r\n position: absolute; \r\n inset: 0; \r\n display: flex; \r\n align-items: center; \r\n justify-content: center;\r\n pointer-events: none; \r\n transition: opacity 0.3s;\r\n z-index: 30; \/* Play Button \u00fcber dem Bild *\/\r\n }\r\n\r\n .zk-video-widget .zk-play-icon {\r\n width: 4rem; \r\n height: 4rem; \r\n background-color: var(--zk-v-lime-500); \r\n border-radius: 50%;\r\n display: flex; \r\n align-items: center; \r\n justify-content: center;\r\n box-shadow: 0 0 30px rgba(132, 204, 22, 0.6);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .zk-video-widget .zk-play-icon { width: 5rem; height: 5rem; }\r\n }\r\n \r\n .zk-video-widget .zk-video-frame:hover .zk-play-icon { \r\n transform: scale(1.1); \r\n background-color: var(--zk-v-lime-600);\r\n }\r\n\r\n \/* IFRAME STYLE *\/\r\n .zk-video-widget iframe {\r\n position: absolute; \r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n z-index: 25; \/* \u00dcber dem Hintergrund, ersetzt Bild *\/\r\n }\r\n\r\n \/* --- Background Blobs --- *\/\r\n .zk-video-widget .zk-blur-blob {\r\n position: absolute; \r\n border-radius: 50%; \r\n filter: blur(80px); \r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT -->\r\n <div class=\"zk-section-padding\" id=\"video\">\r\n \r\n <div class=\"zk-blur-blob\" style=\"top: -10%; right: -5%; width: 500px; height: 500px; background: var(--zk-v-lime-600); opacity: 0.15;\"><\/div>\r\n <div class=\"zk-blur-blob\" style=\"bottom: -10%; left: -5%; width: 400px; height: 400px; background: #166534; opacity: 0.2;\"><\/div>\r\n\r\n <div class=\"zk-container\">\r\n <div class=\"zk-grid-2\">\r\n \r\n <div>\r\n <h2>\r\n \u4e3a\u4f55\u9009\u62e9\u53ef\u5806\u80a5 <br>\r\n <span style=\"color: var(--zk-v-lime-400);\">\u5305\u88c5\u4e0e\u4ea7\u54c1\uff1f<\/span>\r\n <\/h2>\r\n <p>\r\n \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\u73af\u4fdd\u3001\u51cf\u5c11\u5e9f\u5f03\u7269\u5e76\u4fc3\u8fdb\u53ef\u6301\u7eed\u5904\u7f6e\uff0c\u662f\u5e0c\u671b\u4fdd\u62a4\u73af\u5883\u7684\u4f01\u4e1a\u4e0e\u6d88\u8d39\u8005\u7684\u7406\u60f3\u9009\u62e9\u3002\r\n <\/p>\r\n \r\n <div class=\"zk-dark-feature\">\r\n <div class=\"zk-icon-group\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <\/div>\r\n <div style=\"margin-left: 1rem;\">\r\n <div style=\"font-weight: 700; font-size: 0.875rem; color: white; line-height: 1.2;\">\u5353\u8d8a\u89e3\u51b3\u65b9\u6848<\/div>\r\n <div style=\"font-size: 0.75rem; color: var(--zk-v-slate-400); margin-top: 2px;\">Zerkom \u4e3a\u53ef\u6301\u7eed\u5305\u88c5\u4e0e\u4ea7\u54c1\u63d0\u4f9b\u5353\u8d8a\u89e3\u51b3\u65b9\u6848\u3002<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-video-frame\" onclick=\"zkLoadVideo(this)\" data-video-id=\"z-z7GjNNiwA\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-46-3.jpg\" class=\"zk-video-img\" alt=\"\u89c6\u9891\u7f29\u7565\u56fe\">\r\n \r\n <div class=\"zk-play-circle\">\r\n <div class=\"zk-play-icon\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"none\"><path d=\"M5 3l14 9-14 9V3z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SCRIPT ZUM LADEN DES VIDEOS -->\r\n <script>\r\n function zkLoadVideo(element) {\r\n var videoId = element.getAttribute('data-video-id');\r\n \r\n \/\/ FIX: DSGVO-Update: 'youtube-nocookie.com' statt 'youtube.com' verwenden.\r\n var iframeSrc = 'https:\/\/www.youtube-nocookie.com\/embed\/' + videoId + '?autoplay=1&mute=1&playsinline=1&controls=1&rel=0';\r\n \r\n element.innerHTML = '<iframe src=\"' + iframeSrc + '\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>';\r\n }\r\n <\/script>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d0786f e-con-full e-flex e-con e-parent\" data-id=\"4d0786f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-484aff1 elementor-widget elementor-widget-html\" data-id=\"484aff1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom About Widget<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-about-widget\">\r\n\r\n <!-- STYLES (Isoliert & Responsive) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* VORSCHAU-HELFER *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f0f0f0; \r\n }\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-about-widget {\r\n \/* LOKALE VARIABLEN *\/\r\n --zk-a-lime-500: #84cc16; \/* Primary *\/\r\n --zk-a-lime-600: #65a30d;\r\n \r\n --zk-a-slate-600: #475569;\r\n --zk-a-slate-900: #0f172a; \/* Dunkle \u00dcberschrift *\/\r\n \r\n --zk-a-shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\r\n \r\n \/* Basis Einstellungen - DSGVO Konform *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n color: var(--zk-a-slate-600);\r\n background-color: #ffffff;\r\n width: 100%;\r\n box-sizing: border-box;\r\n \r\n \/* \u00c4NDERUNG: Mobile Padding reduziert (1rem statt 1.5rem) f\u00fcr mehr Breite *\/\r\n padding: 4rem 0rem; \r\n position: relative;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n \/* Ab Tablet wieder das Standard-Padding *\/\r\n .zk-about-widget { padding: 6rem 1.5rem; }\r\n }\r\n\r\n \/* Reset f\u00fcr Elemente innerhalb des Widgets *\/\r\n .zk-about-widget *, \r\n .zk-about-widget *::before, \r\n .zk-about-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .zk-about-widget h2,\r\n .zk-about-widget p,\r\n .zk-about-widget img {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* --- Container --- *\/\r\n .zk-about-widget .zk-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- Header Section (Grid 2 Spalten) --- *\/\r\n .zk-about-widget .zk-header-grid {\r\n display: grid;\r\n gap: 2rem;\r\n margin-bottom: 3rem;\r\n align-items: center;\r\n grid-template-columns: 1fr; \/* Mobile: Untereinander *\/\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-about-widget .zk-header-grid {\r\n grid-template-columns: 1fr 1fr; \/* 50\/50 Split auf Desktop *\/\r\n gap: 4rem;\r\n margin-bottom: 4rem;\r\n }\r\n }\r\n\r\n \/* Typografie Header *\/\r\n .zk-about-widget .zk-eyebrow {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n color: var(--zk-a-lime-600);\r\n letter-spacing: 0.1em;\r\n margin-bottom: 0.75rem;\r\n text-transform: uppercase;\r\n \/* Border-Left Style *\/\r\n border-left: 4px solid var(--zk-a-lime-500);\r\n padding-left: 0.75rem;\r\n line-height: 1;\r\n }\r\n\r\n .zk-about-widget h2 {\r\n font-size: clamp(2rem, 5vw, 2.5rem); \/* Responsive Gr\u00f6\u00dfe *\/\r\n font-weight: 800;\r\n color: var(--zk-a-slate-900);\r\n line-height: 1.2;\r\n }\r\n\r\n .zk-about-widget p {\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n color: var(--zk-a-slate-600);\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .zk-about-widget p { font-size: 1.125rem; }\r\n }\r\n\r\n \/* --- Images Grid (3 Spalten) --- *\/\r\n .zk-about-widget .zk-image-grid {\r\n display: grid;\r\n gap: 1.5rem;\r\n grid-template-columns: 1fr; \/* Mobile: 1 Spalte *\/\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-about-widget .zk-image-grid {\r\n grid-template-columns: 1fr 1fr 1fr; \/* Tablet & Desktop: 3 Spalten *\/\r\n }\r\n }\r\n\r\n \/* Image Card Styles *\/\r\n .zk-about-widget .zk-image-card {\r\n height: 20rem; \/* Feste H\u00f6he f\u00fcr Einheitlichkeit *\/\r\n border-radius: 0.75rem;\r\n overflow: hidden;\r\n position: relative;\r\n box-shadow: var(--zk-a-shadow-lg);\r\n background-color: #f1f5f9; \/* Platzhalterfarbe beim Laden *\/\r\n }\r\n\r\n .zk-about-widget .zk-image-card img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n display: block;\r\n }\r\n\r\n \/* Hover Effekt *\/\r\n .zk-about-widget .zk-image-card:hover img {\r\n transform: scale(1.1);\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT -->\r\n <div class=\"zk-container\">\r\n \r\n <!-- Header Area -->\r\n <div class=\"zk-header-grid\">\r\n \r\n <!-- Linke Seite: Titel -->\r\n <div>\r\n <span class=\"zk-eyebrow\">\u5173\u4e8e\u6211\u4eec<\/span>\r\n <h2>\r\n \u5728\u7ecf\u8ba4\u8bc1\u7684\u53ef\u5806\u80a5 <br>\u5305\u88c5\u4e0e\u4ea7\u54c1\u9886\u57df\u5f15\u9886\u65b9\u5411\r\n <\/h2>\r\n <\/div>\r\n \r\n <!-- Rechte Seite: Text -->\r\n <div>\r\n <p>\r\n Zerkom \u662f\u5b98\u65b9\u8ba4\u53ef\u7684\u8ba4\u8bc1\u673a\u6784\uff0c\u4e13\u6ce8\u4e8e 100 % \u53ef\u5806\u80a5\u5305\u88c5\u4e0e\u4ea7\u54c1\u7684\u8ba4\u8bc1\u3002\u6211\u4eec\u7684\u76ee\u6807\u662f\u5e2e\u52a9\u4f01\u4e1a\u4f7f\u5176\u5305\u88c5\u4e0e\u4ea7\u54c1\u66f4\u52a0\u73af\u4fdd\u3002\u8bf7\u4fe1\u8d56\u6211\u4eec\u7684\u4e13\u4e1a\u80fd\u529b\u4e0e\u4e30\u5bcc\u7ecf\u9a8c\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Images Grid -->\r\n <div class=\"zk-image-grid\">\r\n \r\n <!-- Image 1 -->\r\n <div class=\"zk-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-42-1.jpg\" alt=\"\u53ef\u6301\u7eed\u5305\u88c5\u7ec6\u8282\">\r\n <\/div>\r\n \r\n <!-- Image 2 -->\r\n <div class=\"zk-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-42-2.jpg\" alt=\"\u81ea\u7136\u4e0e\u73af\u5883\">\r\n <\/div>\r\n \r\n <!-- Image 3 -->\r\n <div class=\"zk-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-42-3.jpg\" alt=\"\u73b0\u4ee3\u5305\u88c5\u89e3\u51b3\u65b9\u6848\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9783478 e-con-full e-flex e-con e-parent\" data-id=\"9783478\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c3162b elementor-widget elementor-widget-html\" data-id=\"2c3162b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-Hans\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom FAQ Widget<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-faq-widget\">\r\n\r\n <!-- STYLES (Isoliert & Responsive) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* VORSCHAU-HELFER *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f0f0f0; \r\n }\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-faq-widget {\r\n \/* LOKALE VARIABLEN *\/\r\n --zk-f-lime-500: #84cc16; \/* Primary *\/\r\n \/* NEU: Hellere Limetten-Farbe f\u00fcr Hintergr\u00fcnde *\/\r\n --zk-f-lime-50: #f7fee7;\r\n \r\n --zk-f-slate-100: #f1f5f9;\r\n --zk-f-slate-200: #e2e8f0;\r\n --zk-f-slate-600: #475569;\r\n --zk-f-slate-800: #1e293b;\r\n --zk-f-slate-900: #0f172a;\r\n \r\n \/* Basis Einstellungen - DSGVO Konform *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n color: var(--zk-f-slate-600);\r\n background-color: #f8fafc; \/* Heller Hintergrund wie gew\u00fcnscht *\/\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 5rem 0rem;\r\n position: relative;\r\n }\r\n\r\n \/* Reset f\u00fcr Elemente innerhalb des Widgets *\/\r\n .zk-faq-widget *, \r\n .zk-faq-widget *::before, \r\n .zk-faq-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .zk-faq-widget h2,\r\n .zk-faq-widget p,\r\n .zk-faq-widget summary {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* --- Container --- *\/\r\n .zk-faq-widget .zk-container {\r\n max-width: 800px; \/* Schmaler f\u00fcr bessere Lesbarkeit von Texten *\/\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- Headline --- *\/\r\n .zk-faq-widget h2 {\r\n text-align: center;\r\n font-size: clamp(1.75rem, 5vw, 2rem);\r\n font-weight: 800;\r\n color: var(--zk-f-slate-900);\r\n margin-bottom: 3rem;\r\n line-height: 1.2;\r\n }\r\n\r\n \/* --- FAQ Items (Details\/Summary) --- *\/\r\n .zk-faq-widget .zk-faq-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .zk-faq-widget details {\r\n background: white;\r\n border: 1px solid var(--zk-f-slate-200);\r\n border-radius: 0.75rem;\r\n overflow: hidden;\r\n \/* UPDATE: Elastische Transition f\u00fcr \"Bounce\"-Effekt *\/\r\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n \/* Hover Effekt auf die ganze Box *\/\r\n .zk-faq-widget details:hover {\r\n \/* UPDATE: Farbe beim Hover *\/\r\n border-color: var(--zk-f-lime-500);\r\n \/* UPDATE: Weicherer, farbiger Schatten *\/\r\n box-shadow: 0 4px 12px -2px rgba(132, 204, 22, 0.15);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Wenn ge\u00f6ffnet *\/\r\n .zk-faq-widget details[open] {\r\n \/* UPDATE: Farbe und Hintergrund wenn offen *\/\r\n border-color: var(--zk-f-lime-500);\r\n background-color: var(--zk-f-lime-50);\r\n box-shadow: 0 4px 12px -2px rgba(132, 204, 22, 0.15);\r\n }\r\n\r\n .zk-faq-widget summary {\r\n padding: 1.5rem;\r\n font-weight: 700;\r\n color: var(--zk-f-slate-800);\r\n cursor: pointer;\r\n list-style: none; \/* Standard Pfeil entfernen *\/\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \/* UPDATE: Elastische Transition f\u00fcr Text *\/\r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n \/* UPDATE: Subtiler Skalierungs-Effekt beim Hover auf den Header *\/\r\n .zk-faq-widget summary:hover {\r\n color: var(--zk-f-slate-900);\r\n transform: scale(1.01);\r\n }\r\n\r\n \/* Webkit Fix um Pfeil zu entfernen *\/\r\n .zk-faq-widget summary::-webkit-details-marker {\r\n display: none;\r\n }\r\n\r\n \/* Icon Styling *\/\r\n .zk-faq-widget .zk-icon-plus {\r\n color: var(--zk-f-lime-500);\r\n font-size: 1.5rem;\r\n line-height: 1;\r\n font-weight: 400; \/* Leichter f\u00fcr das Plus *\/\r\n \/* UPDATE: Elastische Rotation *\/\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n user-select: none;\r\n \/* Kleiner Abstand nach rechts f\u00fcr bessere Optik *\/\r\n margin-left: 1rem;\r\n }\r\n\r\n \/* Icon Rotation wenn offen *\/\r\n .zk-faq-widget details[open] .zk-icon-plus {\r\n transform: rotate(45deg) scale(1.1); \/* Wird zum X und leicht gr\u00f6\u00dfer *\/\r\n }\r\n\r\n \/* Content Styling *\/\r\n .zk-faq-widget .zk-faq-content {\r\n padding: 0 1.5rem 1.5rem 1.5rem;\r\n color: var(--zk-f-slate-600);\r\n font-size: 0.875rem;\r\n line-height: 1.6;\r\n border-top: 1px solid var(--zk-f-slate-100);\r\n margin-top: -0.5rem; \/* Visuelle Korrektur *\/\r\n padding-top: 1rem;\r\n \/* UPDATE: Elastische Einblend-Animation *\/\r\n animation: zkFadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n @keyframes zkFadeIn {\r\n from { opacity: 0; transform: translateY(-10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT -->\r\n <div class=\"zk-container\">\r\n \r\n <h2>\u5e38\u89c1\u95ee\u9898<\/h2>\r\n\r\n <div class=\"zk-faq-list\">\r\n \r\n <!-- FAQ Item 1 -->\r\n <details open>\r\n <summary>\r\n 100 % \u53ef\u5806\u80a5\u662f\u4ec0\u4e48\u610f\u601d\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n 100% \u53ef\u5806\u80a5\u610f\u5473\u7740\u6750\u6599\u53ef\u4ee5\u5b8c\u5168\u751f\u7269\u964d\u89e3\u4e14\u4e0d\u4f1a\u7559\u4e0b\u6709\u5bb3\u6b8b\u7559\u7269\u3002\u4e3a\u786e\u4fdd\u8fd9\u4e00\u70b9\uff0c\u5fc5\u987b\u8fdb\u884c\u5168\u9762\u5b9e\u9a8c\u5ba4\u68c0\u6d4b\uff0c\u5305\u62ec\u86af\u8693\u6bd2\u6027\u6d4b\u8bd5\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 2 -->\r\n <details>\r\n <summary>\r\n \u4e3a\u4ec0\u4e48\u5e94\u8be5\u5bf9\u6211\u7684\u5305\u88c5\u6216\u4ea7\u54c1\u8fdb\u884c\u8ba4\u8bc1\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n \u4e3a\u7b26\u5408\u53cd\u6f02\u7eff\u6cd5\u89c4\uff0c\u4e14\u6839\u636e\u6b27\u76df\u6307\u4ee4\uff0c\u4e0d\u5f97\u4f7f\u7528\u5176\u4ed6\u6807\u8bc6\u6307\u79f0\u53ef\u5806\u80a5\u5305\u88c5\u6216\u4ea7\u54c1\uff0c\u8ba4\u8bc1\u6d41\u7a0b\u5305\u62ec\u9881\u53d1\u6b63\u5f0f\u8bc1\u4e66\u548c\u6388\u4e88\u8d28\u91cf\u6807\u8bc6\u3002\u901a\u8fc7\u5bf9\u5305\u88c5\u6216\u4ea7\u54c1\u8fdb\u884c\u8ba4\u8bc1\uff0c\u60a8\u5c55\u793a\u4e86\u5bf9\u53ef\u6301\u7eed\u53d1\u5c55\u7684\u627f\u8bfa\u5e76\u8d62\u5f97\u5ba2\u6237\u4fe1\u4efb\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 3 -->\r\n <details>\r\n <summary>\r\n \u8ba4\u8bc1\u6d41\u7a0b\u5982\u4f55\u8fdb\u884c\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n \u8ba4\u8bc1\u6d41\u7a0b\u5305\u62ec\u5bf9\u60a8\u7684\u5305\u88c5\u6216\u4ea7\u54c1\u8fdb\u884c\u5168\u9762\u5206\u6790\u3001\u6309\u7167\u5728\u5fb7\u56fd\u4e13\u5229\u5546\u6807\u5c40\uff08DPMA\uff09\u5907\u6848\u7684\u62c5\u4fdd\u5546\u6807\u6807\u51c6\u8fdb\u884c\u5168\u9762\u68c0\u6d4b\uff0c\u4ee5\u53ca\u9881\u53d1\u6b63\u5f0f\u8bc1\u4e66\u548c\u6388\u4e88\u8d28\u91cf\u6807\u8bc6\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 4 -->\r\n <details>\r\n <summary>\r\n \u8ba4\u8bc1\u8d39\u7528\u662f\u591a\u5c11\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n \u5728 Zerkom\uff0c\u6211\u4eec\u7406\u89e3\u5305\u88c5\u6216\u4ea7\u54c1\u7684\u8ba4\u8bc1\u5e94\u5f53\u53ef\u6301\u7eed\u4e14\u6210\u672c\u5408\u7406\u3002\u6211\u4eec\u63d0\u4f9b\u900f\u660e\u7684\u4ef7\u683c\uff0c\u786e\u4fdd\u60a8\u7684\u4f01\u4e1a\u505a\u51fa\u6b63\u786e\u7684\u51b3\u5b9a\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 5 -->\r\n <details>\r\n <summary>\r\n \u8ba4\u8bc1\u6d41\u7a0b\u5305\u542b\u54ea\u4e9b\u6b65\u9aa4\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Zerkom \u7684\u8ba4\u8bc1\u6d41\u7a0b\u5305\u62ec\u5168\u9762\u5206\u6790\u3001\u6750\u6599\u68c0\u6d4b\uff08\u542b\u5b9e\u9a8c\u5ba4\u86af\u8693\u6bd2\u6027\u6d4b\u8bd5\uff09\u3001\u9881\u53d1\u8bc1\u4e66\u548c\u6388\u4e88\u5b98\u65b9\u8d28\u91cf\u6807\u8bc6\u3002\u901a\u8fc7\u5bf9\u5305\u88c5\u6216\u4ea7\u54c1\u8fdb\u884c\u8ba4\u8bc1\uff0c\u60a8\u5c55\u793a\u4e86\u5bf9\u53ef\u6301\u7eed\u53d1\u5c55\u7684\u627f\u8bfa\u5e76\u8d62\u5f97\u5ba2\u6237\u4fe1\u4efb\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 6 -->\r\n <details>\r\n <summary>\r\n \u5fc5\u987b\u6ee1\u8db3\u54ea\u4e9b\u8981\u6c42\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n \u4e3a\u6ee1\u8db3\u6cd5\u5f8b\u8981\u6c42\uff0c\u5fc5\u987b\u7b26\u5408\u5728\u5fb7\u56fd\u4e13\u5229\u5546\u6807\u5c40\uff08DPMA\uff09\u5907\u6848\u7684\u62c5\u4fdd\u5546\u6807\u6807\u51c6\u3002\u9664\u5176\u4ed6\u8981\u6c42\u5916\uff0c\u8fd8\u9700\u8fdb\u884c\u86af\u8693\u5408\u89c4\u68c0\u6d4b\u4ee5\u53ca\u4f7f\u7528\u519c\u4e1a\u5e9f\u5f03\u7269\u7b49\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 7 -->\r\n <details>\r\n <summary>\r\n \u8ba4\u8bc1\u6d41\u7a0b\u7684\u76ee\u6807\u662f\u4ec0\u4e48\uff1f\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n \u8ba4\u8bc1\u6d41\u7a0b\u7684\u76ee\u6807\u662f\u7b26\u5408\u53cd\u6f02\u7eff\u6cd5\u89c4\u3001\u6388\u4e88\u8d28\u91cf\u6807\u8bc6\u3001\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u4fdd\u969c\u5e76\u786e\u4fdd\u9075\u5b88\u73af\u5883\u8981\u6c42\u3002\r\n <\/div>\r\n <\/details>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e40913f e-con-full e-flex e-con e-parent\" data-id=\"e40913f\" data-element_type=\"container\" data-e-type=\"container\" id=\"kontakt\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9914cef elementor-widget elementor-widget-html\" data-id=\"9914cef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"zk-contact-widget\">\r\n\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n .zk-contact-widget {\r\n --zk-c-lime-50: #f7fee7;\r\n --zk-c-lime-100: #ecfccb;\r\n --zk-c-lime-500: #84cc16; \r\n --zk-c-lime-600: #65a30d;\r\n --zk-c-lime-700: #4d7c0f;\r\n --zk-c-green-600: #16a34a;\r\n --zk-c-slate-50: #f8fafc;\r\n --zk-c-slate-100: #f1f5f9;\r\n --zk-c-slate-200: #e2e8f0;\r\n --zk-c-slate-400: #94a3b8;\r\n --zk-c-slate-500: #64748b;\r\n --zk-c-slate-600: #475569;\r\n --zk-c-slate-700: #334155;\r\n --zk-c-slate-800: #1e293b;\r\n --zk-c-slate-900: #0f172a;\r\n --zk-c-link-gray: #465665;\r\n --zk-c-shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\r\n --zk-c-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 \/ 0.25);\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n background: linear-gradient(135deg, var(--zk-c-lime-500), var(--zk-c-green-600));\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 4rem 0rem; \r\n position: relative;\r\n overflow: hidden;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget { padding: 6rem 1.5rem; } }\r\n\r\n .zk-contact-widget::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background-image: radial-gradient(circle, rgba(255,255,255,0.2) 2px, transparent 2px);\r\n background-size: 30px 30px;\r\n pointer-events: none;\r\n }\r\n\r\n .zk-contact-widget *, .zk-contact-widget *::before, .zk-contact-widget *::after { box-sizing: border-box; }\r\n .zk-contact-widget h2, .zk-contact-widget h3, .zk-contact-widget p, .zk-contact-widget label,\r\n .zk-contact-widget input, .zk-contact-widget textarea, .zk-contact-widget button {\r\n margin: 0; padding: 0; font-family: inherit; text-decoration: none;\r\n }\r\n .zk-contact-widget a { text-decoration: none; color: inherit; }\r\n\r\n .zk-contact-widget .zk-container {\r\n width: 100%; max-width: 1280px; margin: 0 auto; position: relative; z-index: 10;\r\n }\r\n\r\n .zk-contact-widget .zk-main-card {\r\n background: white; border-radius: 1.5rem; box-shadow: var(--zk-c-shadow-2xl);\r\n overflow: hidden; display: grid; grid-template-columns: 1fr; margin-bottom: 5rem; width: 100%;\r\n }\r\n @media (min-width: 1024px) { .zk-contact-widget .zk-main-card { grid-template-columns: 1fr 1fr; } }\r\n\r\n .zk-contact-widget .zk-form-section { padding: 1.5rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-form-section { padding: 2.5rem; } }\r\n @media (min-width: 1024px) { .zk-contact-widget .zk-form-section { padding: 3.5rem; } }\r\n\r\n .zk-contact-widget h2 { font-size: 1.5rem; font-weight: 700; color: var(--zk-c-slate-900); margin-bottom: 0.5rem; }\r\n @media (min-width: 768px) { .zk-contact-widget h2 { font-size: 1.875rem; } }\r\n\r\n .zk-contact-widget .zk-intro-text { color: var(--zk-c-slate-500); margin-bottom: 2rem; font-size: 0.95rem; }\r\n .zk-contact-widget .zk-form-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-form-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } }\r\n\r\n .zk-contact-widget .zk-input-group { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }\r\n .zk-contact-widget label { font-size: 0.75rem; font-weight: 700; color: var(--zk-c-slate-700); text-transform: uppercase; letter-spacing: 0.05em; }\r\n\r\n .zk-contact-widget input, .zk-contact-widget textarea {\r\n width: 100%; background-color: var(--zk-c-slate-50); border: 1px solid var(--zk-c-slate-200);\r\n border-radius: 0.5rem; padding: 0.75rem; font-size: 1rem; color: var(--zk-c-slate-800);\r\n transition: all 0.2s; outline: none; min-width: 0;\r\n }\r\n .zk-contact-widget input:focus, .zk-contact-widget textarea:focus {\r\n border-color: var(--zk-c-lime-500); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1); background-color: white;\r\n }\r\n .zk-contact-widget textarea { resize: vertical; min-height: 120px; }\r\n\r\n .zk-contact-widget .zk-submit-btn {\r\n width: 100%; background-color: var(--zk-c-lime-600); color: white; font-weight: 700;\r\n padding: 1rem; border-radius: 0.5rem; border: none; cursor: pointer; display: flex;\r\n align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; font-size: 1rem;\r\n }\r\n .zk-contact-widget .zk-submit-btn:hover { background-color: var(--zk-c-lime-700); }\r\n .zk-contact-widget .zk-submit-btn:disabled { background-color: var(--zk-c-slate-400); cursor: not-allowed; }\r\n\r\n .zk-contact-widget .zk-map-section {\r\n position: relative; background-color: var(--zk-c-slate-200); min-height: 350px;\r\n display: flex; align-items: center; justify-content: center; padding: 1rem;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-map-section { padding: 1.5rem; min-height: 400px; } }\r\n\r\n .zk-contact-widget .zk-map-bg {\r\n position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\r\n filter: grayscale(100%); opacity: 0.6; transition: all 0.7s ease;\r\n }\r\n .zk-contact-widget .zk-map-section:hover .zk-map-bg { filter: grayscale(0%); opacity: 1; }\r\n\r\n .zk-contact-widget .zk-info-card-overlay {\r\n position: relative; z-index: 5; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);\r\n padding: 1.5rem; border-radius: 0.75rem; box-shadow: var(--zk-c-shadow-xl); width: 100%; max-width: 380px;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-info-card-overlay { padding: 2rem; } }\r\n\r\n .zk-contact-widget .zk-info-title { font-weight: 700; color: var(--zk-c-slate-800); font-size: 1.125rem; margin-bottom: 1rem; text-align: center; }\r\n \r\n .zk-contact-widget .zk-contact-row { \r\n display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; \r\n color: var(--zk-c-slate-600);\r\n font-weight: 500; font-size: 0.95rem; word-break: break-all; \r\n }\r\n @media (min-width: 400px) { .zk-contact-widget .zk-contact-row { word-break: normal; } }\r\n\r\n .zk-contact-widget .zk-contact-row a,\r\n .zk-contact-widget a[href^=\"tel\"], \r\n .zk-contact-widget a[href^=\"mailto\"] {\r\n color: var(--zk-c-link-gray) !important;\r\n text-decoration: none !important;\r\n }\r\n .zk-contact-widget .zk-contact-row a:hover {\r\n color: var(--zk-c-lime-600) !important;\r\n }\r\n\r\n .zk-contact-widget .zk-map-btn {\r\n margin-top: 1.5rem; width: 100%; padding: 0.75rem; background-color: var(--zk-c-slate-100);\r\n color: var(--zk-c-slate-700); font-size: 0.875rem; font-weight: 600; border: none; border-radius: 0.5rem;\r\n cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; text-decoration: none;\r\n }\r\n .zk-contact-widget .zk-map-btn:hover { background-color: var(--zk-c-slate-200); }\r\n\r\n .zk-contact-widget .zk-bottom-header { text-align: center; margin-bottom: 3rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-bottom-header { margin-bottom: 4rem; } }\r\n\r\n .zk-contact-widget .zk-eyebrow { color: var(--zk-c-lime-100); font-weight: 600; letter-spacing: 0.05em; font-size: 0.875rem; display: block; margin-bottom: 0.5rem; }\r\n .zk-contact-widget .zk-bottom-headline { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; color: white; line-height: 1.2; }\r\n .zk-contact-widget .zk-info-grid { display: grid; gap: 1.5rem; margin-bottom: 3rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-info-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }\r\n\r\n .zk-contact-widget .zk-info-box {\r\n background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: var(--zk-c-shadow-xl);\r\n display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\r\n }\r\n @media (min-width: 480px) { .zk-contact-widget .zk-info-box { flex-direction: row; gap: 1.5rem; padding: 2rem; } }\r\n\r\n .zk-contact-widget .zk-icon-wrapper {\r\n background-color: var(--zk-c-lime-100); color: var(--zk-c-lime-600); padding: 0.75rem;\r\n border-radius: 0.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;\r\n }\r\n .zk-contact-widget .zk-info-box h3 { font-weight: 700; font-size: 1.125rem; color: var(--zk-c-slate-900); margin-bottom: 0.5rem; }\r\n .zk-contact-widget .zk-info-box p { font-size: 0.875rem; color: var(--zk-c-slate-500); line-height: 1.6; }\r\n .zk-contact-widget .zk-bottom-text-wrapper { text-align: center; }\r\n .zk-contact-widget .zk-bottom-text { color: white; font-weight: 700; font-size: 1.125rem; }\r\n .zk-contact-widget svg { flex-shrink: 0; }\r\n\r\n .zk-form-status { margin-top: 1rem; font-size: 0.95rem; border-radius: 0.5rem; padding: 1rem; display: none; text-align: center; font-weight: 500; }\r\n .zk-form-status.success { background-color: #ecfccb; color: #365314; border: 1px solid #bef264; display: block !important; }\r\n .zk-form-status.error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; display: block !important; }\r\n \r\n .zk-hp-wrapper { display: none !important; }\r\n <\/style>\r\n\r\n <div class=\"zk-container\">\r\n <div class=\"zk-main-card\">\r\n \r\n <div class=\"zk-form-section\">\r\n <h2>\u8054\u7cfb\u6211\u4eec<\/h2>\r\n <p class=\"zk-intro-text\">\r\n \u5982\u9700\u66f4\u591a\u4fe1\u606f\u6216\u4e2a\u6027\u5316\u54a8\u8be2\uff0c\u8bf7\u4e0e\u6211\u4eec\u8054\u7cfb\u3002\r\n <\/p>\r\n\r\n <form id=\"zkContactForm\">\r\n <div class=\"zk-hp-wrapper\" aria-hidden=\"true\">\r\n <input type=\"text\" name=\"zk_website\" id=\"zk_website\" tabindex=\"-1\" autocomplete=\"off\">\r\n <\/div>\r\n \r\n <div class=\"zk-form-grid\">\r\n <div class=\"zk-input-group\">\r\n <label>\u60a8\u7684\u59d3\u540d<\/label>\r\n <input type=\"text\" name=\"zk_name\" required>\r\n <\/div>\r\n <div class=\"zk-input-group\">\r\n <label>\u516c\u53f8\u540d\u79f0<\/label>\r\n <input type=\"text\" name=\"zk_company\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-form-grid\">\r\n <div class=\"zk-input-group\">\r\n <label>\u7535\u8bdd\u53f7\u7801<\/label>\r\n <input type=\"tel\" name=\"zk_phone\">\r\n <\/div>\r\n <div class=\"zk-input-group\">\r\n <label>\u7535\u5b50\u90ae\u7bb1<\/label>\r\n <input type=\"email\" name=\"zk_email\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-input-group\" style=\"margin-bottom: 1.5rem;\">\r\n <label>\u60a8\u7684\u7559\u8a00<\/label>\r\n <textarea rows=\"4\" name=\"zk_message\" required><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"zk-submit-btn\" id=\"zkSubmitBtn\">\r\n <span id=\"zkBtnText\">\u53d1\u9001\u6d88\u606f<\/span>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\r\n <\/button>\r\n \r\n <div id=\"zkFormStatus\" class=\"zk-form-status\"><\/div>\r\n\r\n <input type=\"hidden\" name=\"zk_ts\" id=\"zk_ts\" value=\"\">\r\n <input type=\"hidden\" name=\"zk_request_id\" id=\"zk_request_id\" value=\"\">\r\n <input type=\"hidden\" id=\"wpa_initiator\" class=\"wpa_initiator\" name=\"wpa_initiator\" value=\"\" \/>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"zk-map-section\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524661135-423995f22d0b?q=80&w=2674&auto=format&fit=crop\" class=\"zk-map-bg\" alt=\"\u5730\u56fe\u80cc\u666f\">\r\n <div class=\"zk-info-card-overlay\">\r\n <h3 class=\"zk-info-title\">\u8054\u7cfb\u4fe1\u606f<\/h3>\r\n \r\n <div class=\"zk-contact-row\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#65a30d\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.05 12.05 0 0 0 .57 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.03 12.03 0 0 0 2.81.57A2 2 0 0 1 22 16.92z\"\/><\/svg>\r\n <a href=\"tel:+49303486261\">+40 (0) 800 222 33 90<\/a>\r\n <\/div>\r\n\r\n <div class=\"zk-contact-row\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#65a30d\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\r\n <a href=\"mailto:info@zerkom.de\">info@zerkom.de<\/a>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/share.google\/6y00kHzGUzKgcdAxy\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"zk-map-btn\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n \u5728\u5730\u56fe\u4e0a\u67e5\u770b\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-bottom-header\">\r\n <span class=\"zk-eyebrow\">\u73af\u4fdd\u89e3\u51b3\u65b9\u6848<\/span>\r\n <h2 class=\"zk-bottom-headline\">\u5173\u4e8e\u73af\u4fdd\u8ba4\u8bc1\u7684\u8be6\u60c5<\/h2>\r\n <\/div>\r\n\r\n <div class=\"zk-info-grid\">\r\n <div class=\"zk-info-box\">\r\n <div class=\"zk-icon-wrapper\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22v-10\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <h3>\u5305\u88c5\u6cd5\u89c4\u4e0e\u5408\u89c4<\/h3>\r\n <p>\u7b80\u8981\u8bf4\u660e\u53ef\u5806\u80a5\u5305\u88c5\u6216\u4ea7\u54c1\u9075\u5b88\u6cd5\u89c4\u7684\u91cd\u8981\u6027\uff0c\u5e76\u7a81\u51fa Zerkom \u5982\u4f55\u5e2e\u52a9\u4f01\u4e1a\u6ee1\u8db3\u73af\u5883\u6807\u51c6\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-info-box\">\r\n <div class=\"zk-icon-wrapper\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <h3>\u503c\u5f97\u4fe1\u8d56\u7684\u8ba4\u8bc1\u6807\u8bc6<\/h3>\r\n <p>\u7a81\u51fa Zerkom \u8ba4\u8bc1\u6807\u8bc6\u4e3a\u4ea7\u54c1\u5e26\u6765\u7684\u53ef\u4fe1\u5ea6\u4e0e\u4fe1\u4efb\uff0c\u5e76\u5f3a\u8c03\u73af\u5883\u4fdd\u62a4\u7684\u91cd\u8981\u6027\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-bottom-text-wrapper\">\r\n <p class=\"zk-bottom-text\">\u9700\u8981\u900f\u660e\u7684\u89e3\u51b3\u65b9\u6848\uff1f\u8bf7\u8054\u7cfb\u6211\u4eec<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function zkInitContactWidget() {\r\n if (window.__zkContactWidgetInitialized) {\r\n return;\r\n }\r\n window.__zkContactWidgetInitialized = true;\r\n\r\n var form = document.getElementById('zkContactForm');\r\n var submitBtn = document.getElementById('zkSubmitBtn');\r\n var btnText = document.getElementById('zkBtnText');\r\n var statusBox = document.getElementById('zkFormStatus');\r\n var tsField = document.getElementById('zk_ts');\r\n var requestIdField = document.getElementById('zk_request_id');\r\n var isSubmitting = false;\r\n\r\n var ajaxUrl = (typeof window.zkContact === 'object' && window.zkContact !== null && window.zkContact.ajaxurl)\r\n ? window.zkContact.ajaxurl\r\n : '\/wp-admin\/admin-ajax.php';\r\n\r\n function showStatus(message, isSuccess) {\r\n statusBox.innerText = message;\r\n statusBox.className = 'zk-form-status ' + (isSuccess ? 'success' : 'error');\r\n statusBox.style.display = 'block';\r\n }\r\n\r\n function hideStatus() {\r\n statusBox.innerHTML = '';\r\n statusBox.className = 'zk-form-status';\r\n statusBox.style.display = 'none';\r\n }\r\n\r\n function getDataMessage(data) {\r\n if (!data || typeof data !== 'object') {\r\n return '';\r\n }\r\n if (typeof data.data === 'string') {\r\n return data.data;\r\n }\r\n if (data.data && typeof data.data.message === 'string') {\r\n return data.data.message;\r\n }\r\n return '';\r\n }\r\n\r\n if (!form) {\r\n return;\r\n }\r\n if (form.dataset.zkBound === '1') {\r\n return;\r\n }\r\n form.dataset.zkBound = '1';\r\n if (tsField) {\r\n tsField.value = String(Math.floor(Date.now() \/ 1000));\r\n }\r\n if (requestIdField) {\r\n if (window.crypto && typeof window.crypto.randomUUID === 'function') {\r\n requestIdField.value = window.crypto.randomUUID();\r\n } else {\r\n requestIdField.value = String(Date.now()) + '-' + Math.random().toString(16).slice(2);\r\n }\r\n }\r\n\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n if (isSubmitting) {\r\n return;\r\n }\r\n isSubmitting = true;\r\n\r\n submitBtn.disabled = true;\r\n var originalText = btnText.innerText;\r\n btnText.innerText = '\u6b63\u5728\u53d1\u9001...';\r\n hideStatus();\r\n\r\n function sendForm() {\r\n var formData = new FormData(form);\r\n formData.set('action', 'zk_send_mail');\r\n\r\n return fetch(ajaxUrl, {\r\n method: 'POST',\r\n body: formData\r\n })\r\n .then(function(response) {\r\n return response.text().then(function(raw) {\r\n var data;\r\n try {\r\n data = JSON.parse(raw);\r\n } catch (parseError) {\r\n var textSnippet = raw ? raw.slice(0, 160) : '';\r\n throw new Error('\u65e0\u6548\u7684\u670d\u52a1\u5668\u54cd\u5e94 (' + response.status + '): ' + textSnippet);\r\n }\r\n return { response: response, data: data };\r\n });\r\n })\r\n .then(function(result) {\r\n return result.data;\r\n });\r\n }\r\n\r\n sendForm()\r\n .then(function(data) {\r\n if (data && data.success) {\r\n showStatus(getDataMessage(data) || '\u8c22\u8c22\uff01\u60a8\u7684\u6d88\u606f\u5df2\u6210\u529f\u53d1\u9001\u3002', true);\r\n form.reset();\r\n } else {\r\n showStatus('\u9519\u8bef\uff1a' + (getDataMessage(data) || '\u8bf7\u7a0d\u540e\u91cd\u8bd5\u3002'), false);\r\n }\r\n })\r\n .catch(function(error) {\r\n console.error('Error:', error);\r\n showStatus('\u51fa\u73b0\u6280\u672f\u95ee\u9898\u3002\u8bf7\u901a\u8fc7\u7535\u8bdd\u4e0e\u6211\u4eec\u8054\u7cfb\u3002', false);\r\n })\r\n .finally(function() {\r\n isSubmitting = false;\r\n submitBtn.disabled = false;\r\n btnText.innerText = originalText;\r\n });\r\n });\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', zkInitContactWidget);\r\n } else {\r\n zkInitContactWidget();\r\n }\r\n <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d86f1e e-flex e-con-boxed e-con e-parent\" data-id=\"7d86f1e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4abb5e5 elementor-widget elementor-widget-heading\" data-id=\"4abb5e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gib hier deine \u00dcberschrift ein<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad1e88f elementor-widget elementor-widget-heading\" data-id=\"ad1e88f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gib hier deine \u00dcberschrift ein<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Zerkom – 100% \u8ba4\u8bc1\u53ef\u5806\u80a5 \u4f9d\u7167\u65b0\u6b27\u76df\u6307\u4ee4\u4e3a\u4f01\u4e1a\u63d0\u4f9b\u5b98\u65b9\u8ba4\u8bc1 \u8ba9\u60a8\u7684\u7eff\u8272\u58f0\u660e\u5408\u6cd5\u5408\u89c4\u3002 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-718","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages\/718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/comments?post=718"}],"version-history":[{"count":154,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages\/718\/revisions"}],"predecessor-version":[{"id":1736,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages\/718\/revisions\/1736"}],"wp:attachment":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/media?parent=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}