{"id":720,"date":"2025-12-01T16:54:35","date_gmt":"2025-12-01T16:54:35","guid":{"rendered":"https:\/\/zerkom.de\/home\/"},"modified":"2026-05-27T20:50:14","modified_gmt":"2026-05-27T20:50:14","slug":"home","status":"publish","type":"page","link":"https:\/\/zerkom.de\/en\/","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% Certified Compostable<\/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=\"EU compliant\">\r\n <\/div>\r\n <div class=\"zk-badge-text\">\r\n Official certifications for businesses under the new EU directives\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Headline -->\r\n <h1 class=\"zk-animate-in zk-delay-2\">\r\n Make your Green Claims <span class=\"zk-text-gradient\">legally compliant.<\/span>\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 Legally verified and certified by an independent warranty mark.\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>Under the EU EmpCo Directive and the Green Claims Directive, environmental and sustainability claims and their labeling may only be used if they are demonstrable, verifiable, and independently verified. This applies in particular to claims such as:<\/p>\r\n \r\n <!-- Tags -->\r\n <ul class=\"zk-tag-list\">\r\n <li>recyclable<\/li>\r\n <li>recycled content<\/li>\r\n <li>compostable<\/li>\r\n <li>CO\u2082-neutral<\/li>\r\n <li>sustainable<\/li>\r\n <li>environmentally friendly<\/li>\r\n <li>similar general terms<\/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 Learn more \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>Our certifications<\/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 Important notice\r\n <\/strong>\r\n <p style=\"color: white; font-size: 1.1rem; margin: 0; line-height: 1.6;\">\r\n Under the EU EmpCo Directive, the recycled content share must be mandatorily declared and verifiably proven from September onward.\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\">Without verified evidence, you risk:<\/span>\r\n <ul class=\"zk-list\">\r\n <li>Warning letters from consumer protection associations<\/li>\r\n <li>Sales bans in Germany and throughout the EU<\/li>\r\n <li>Significant fines and reputational damage<\/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-ddcaec4 e-con-full e-flex e-con e-parent\" data-id=\"ddcaec4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c581924 elementor-widget elementor-widget-html\" data-id=\"c581924\" 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-a2c1bac e-flex e-con-boxed e-con e-parent\" data-id=\"a2c1bac\" 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-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=\"en\">\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=\"en\">\r\n <div class=\"zk-statement-eyebrow\">\r\n Security through ZERKOM\r\n <\/div>\r\n \r\n <h2 class=\"zk-statement-headline\">\r\n We officially confirm that your product is indeed <span class=\"zk-statement-highlight\">\"100 % compostable\"<\/span> \u2013 in accordance with the EmpCo Directive.\r\n <\/h2>\r\n \r\n <p class=\"zk-statement-sub\">\r\n Protect your business now from false environmental claims and legal warnings.\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-78891b1 e-con-full e-flex e-con e-parent\" data-id=\"78891b1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0285a08 elementor-widget elementor-widget-html\" data-id=\"0285a08\" 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=\"en\">\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\">Directive (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=\"EU Flag\">\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\">Compliance & Legal Certainty<\/span>\r\n <h1 class=\"zk-main-title\">\r\n The <em>Necessity<\/em> of the ZERKOM\u00ae Testing Standard for Businesses\r\n <\/h1>\r\n <div class=\"zk-sub-info\">\r\n Verification of environmental and sustainability claims in accordance with the EU EmpCo Directive (EU) 2024\/825\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>The ZERKOM\u00ae EmpCo testing standard translates the requirements of the EU EmpCo Directive (Empowering Consumers for the Green Transition) into an objective, independent, and verifiable certification and testing procedure for environmental and sustainability claims (\"Green Claims\").<\/p>\r\n <\/div>\r\n <div class=\"zk-exposed-item\">\r\n <p>It is aimed at businesses, authorities, and market participants who wish to verify or demonstrate environmental and sustainability claims in a legally secure, transparent, and traceable manner.<\/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\">Audit Methodology & Process Details<\/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. Purpose of the Testing Standard<\/h3>\r\n <p>This testing standard serves the objective, independent, and traceable verification of environmental and sustainability claims (\"Green Claims\") within the meaning of EU Directive (EU) 2024\/825 (Empowering Consumers for the Green Transition \u2013 EmpCo).<\/p>\r\n <p>The aim is to provide a concrete and verifiable implementation of abstract legal requirements, thereby creating transparency, comparability, and legal certainty.<\/p>\r\n\r\n <h3>2. Scope of Application<\/h3>\r\n <p>The ZERKOM\u00ae EmpCo testing standard applies to:<\/p>\r\n <ul>\r\n <li>product-related environmental and sustainability claims,<\/li>\r\n <li>company-related sustainability claims,<\/li>\r\n <li>terms, labels, seals, and symbols used,<\/li>\r\n <li>advertising, sales, and communication materials (B2C as well as indirectly B2B).<\/li>\r\n <\/ul>\r\n\r\n <h3>3. Legal Basis<\/h3>\r\n <p>The testing standard is based in particular on:<\/p>\r\n <ul>\r\n <li>Directive (EU) 2024\/825 (EmpCo),<\/li>\r\n <li>Directive 2005\/29\/EC (Unfair Commercial Practices \u2013 UCPD),<\/li>\r\n <li>relevant EU regulations, particularly in the areas of circular economy and packaging law,<\/li>\r\n <li>national implementing legislation (e.g., Act Against Unfair Competition \u2013 UWG).<\/li>\r\n <\/ul>\r\n\r\n <h3>4. Testing Methodology<\/h3>\r\n <p>ZERKOM\u00ae verifies environmental and sustainability claims based on the following four pillars:<\/p>\r\n \r\n <h4>4.1 Specificity<\/h4>\r\n <ul>\r\n <li>Is the claim clearly, specifically, and unambiguously formulated?<\/li>\r\n <li>Are vague terms such as \"environmentally friendly,\" \"sustainable,\" or \"green\" avoided or sufficiently specified?<\/li>\r\n <\/ul>\r\n\r\n <h4>4.2 Verifiability<\/h4>\r\n <ul>\r\n <li>Are reliable, verifiable, and traceable evidence available?<\/li>\r\n <li>Is this documentation reproducible and current?<\/li>\r\n <\/ul>\r\n\r\n <h4>4.3 Relevance and Completeness<\/h4>\r\n <ul>\r\n <li>Does the claim relate to the essential environmental or sustainability aspect?<\/li>\r\n <li>Are relevant limitations, conditions, or requirements presented transparently?<\/li>\r\n <\/ul>\r\n\r\n <h4>4.4 Independence<\/h4>\r\n <ul>\r\n <li>Is the verification conducted independently of the economic interests of the company being audited?<\/li>\r\n <li>Is there a clear separation between standard ownership, trademark rights, and verification decisions?<\/li>\r\n <\/ul>\r\n\r\n <h3>5. Verification Process<\/h3>\r\n <p>The verification process follows these steps:<\/p>\r\n <ol>\r\n <li>Application by the applicant<\/li>\r\n <li>Document and data review<\/li>\r\n <li>Plausibility and consistency check<\/li>\r\n <li>Results evaluation<\/li>\r\n <li>Certification decision<\/li>\r\n <li>Entry in the ZERKOM\u00ae register<\/li>\r\n <\/ol>\r\n\r\n <h3>6. Revocation and Sanctions<\/h3>\r\n <p>If requirements cease to apply, misleading use occurs, or updates are missing, the following measures may be taken:<\/p>\r\n <ul>\r\n <li>Revocation of certification,<\/li>\r\n <li>Deletion from the ZERKOM\u00ae register,<\/li>\r\n <li>Prohibition of further use of seals or certificate references.<\/li>\r\n <\/ul>\r\n\r\n <h3>7. Transparency<\/h3>\r\n <p>The verification criteria, verification process, and certificate register are publicly accessible to ensure traceability for authorities, the market, and consumers.<\/p>\r\n\r\n <h3>ZERKOM\u00ae \u2013 Translating Regulation into Verifiable Reality<\/h3>\r\n\r\n <div class=\"zk-legal-note\">\r\n Legal Notice: The ZERKOM\u00ae EmpCo testing standard constitutes a private-law verification and certification procedure and does not replace any official decision. It serves objective evidence and risk minimization within the meaning of applicable EU consumer protection and competition regulations.\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 Translating Regulation into Verifiable Reality\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=\"en\">\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 - EN<\/title>\r\n <style>\r\n .zk-pricing-section {\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 --font-main: 'Inter', system-ui, -apple-system, sans-serif;\r\n\r\n width: 100%;\r\n background-color: white;\r\n padding: 3rem 0.5rem;\r\n position: relative;\r\n z-index: 10;\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 @media (min-width: 768px) { .zk-pricing-section { padding: 5rem 1.5rem; } }\r\n .zk-pricing-section *, .zk-pricing-section *::before, .zk-pricing-section *::after { box-sizing: border-box; }\r\n .zk-pricing-section h2, .zk-pricing-section h3, .zk-pricing-section p, .zk-pricing-section a { margin: 0; padding: 0; font-weight: normal; text-decoration: none; }\r\n \r\n \/* Disable auto-hyphenation for English headlines *\/\r\n .zk-pricing-section h2, .zk-pricing-section h3, .zk-pricing-section a { hyphens: manual; -webkit-hyphens: manual; }\r\n .zk-pricing-section p { hyphens: auto; -webkit-hyphens: auto; }\r\n\r\n .zk-pricing-section .zk-container { width: 100%; max-width: 1280px; margin: 0 auto; }\r\n .zk-pricing-section .zk-section-header { text-align: center; margin-bottom: 2.5rem; max-width: 800px; margin-left: auto; margin-right: auto; padding: 0 0.5rem; }\r\n @media (min-width: 768px) { .zk-pricing-section .zk-section-header { margin-bottom: 4rem; } }\r\n\r\n .zk-pricing-section .zk-eyebrow { color: var(--zk-p-lime-text); font-weight: 700; letter-spacing: 0.1em; font-size: 0.875rem; text-transform: uppercase; display: block; margin-bottom: 0.5rem; }\r\n .zk-pricing-section .zk-headline { font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; color: var(--zk-p-text-heading); margin: 0; }\r\n\r\n .zk-pricing-section .zk-highlight {\r\n color: var(--zk-p-lime-text);\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%;\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;\r\n }\r\n\r\n .zk-pricing-section .zk-grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }\r\n @media (min-width: 768px) { .zk-pricing-section .zk-grid-3 { grid-template-columns: 1fr 1fr; } }\r\n @media (min-width: 1024px) { .zk-pricing-section .zk-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }\r\n\r\n .zk-pricing-section .zk-pricing-card {\r\n text-align: center; padding: 2rem; border-radius: 1.5rem; background-color: #ffffff; border: 1px solid #e2e8f0;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: flex; flex-direction: column; align-items: center; height: 100%; position: relative;\r\n }\r\n\r\n .zk-pricing-section .zk-pricing-card:hover {\r\n border-color: var(--zk-p-primary);\r\n transform: translateY(-12px) scale(1.03);\r\n box-shadow: 0 30px 40px -10px rgba(0, 0, 0, 0.15), 0 0 20px -5px rgba(190, 242, 100, 0.4);\r\n z-index: 2;\r\n }\r\n \r\n .zk-pricing-section .zk-pricing-card:hover .zk-icon-circle { transform: scale(1.15) rotate(8deg); background-color: var(--zk-p-primary); color: #0f172a; }\r\n .zk-pricing-section .zk-btn-lime:hover { background-color: var(--zk-p-primary-dark); transform: translateY(-4px) scale(1.02); box-shadow: 0 15px 25px -5px rgba(163, 230, 53, 0.6); color: #0f172a; }\r\n .zk-pricing-section .zk-btn-lime:hover::after { transform: translateX(6px); }\r\n\r\n .zk-pricing-section .zk-icon-circle { width: 80px; height: 80px; background-color: var(--zk-p-lime-bg-light); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--zk-p-lime-text); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); flex-shrink: 0; }\r\n .zk-pricing-section .zk-card-title { font-weight: 700; font-size: 1.25rem; margin: 0 0 1rem 0; color: var(--zk-p-text-heading); line-height: 1.3; }\r\n .zk-pricing-section .zk-card-text { font-weight: 400; color: var(--zk-p-text-body); margin-bottom: 2rem; font-size: 1rem; line-height: 1.6; flex-grow: 1; }\r\n\r\n .zk-pricing-section .zk-btn-lime {\r\n background-color: var(--zk-p-primary); color: #0f172a; border: none; padding: 0.75rem 2rem; border-radius: 99px;\r\n font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.5;\r\n }\r\n .zk-pricing-section .zk-btn-lime::after { content: \"\u2192\"; display: inline-block; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: sans-serif; }\r\n .zk-pricing-section .zk-icon { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; width: 40px; height: 40px; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section id=\"services\" class=\"zk-pricing-section\" lang=\"en\">\r\n <div class=\"zk-container\">\r\n <div class=\"zk-section-header\">\r\n <span class=\"zk-eyebrow\">ZERKOM\u00ae provides a guarantee for product properties<\/span>\r\n <h2 class=\"zk-headline\">\r\n We offer transparent pricing to help your company make the <span class=\"zk-highlight\">right decision<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"zk-grid-3\">\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\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\">Certification of Packaging & Products<\/h3>\r\n <p class=\"zk-card-text\">Certification of packaging and products ensures high quality standards and safety, promotes consumer trust, and supports companies in complying with legal requirements.<\/p>\r\n <a href=\"https:\/\/zerkom.de\/en\/legislation\" class=\"zk-btn-lime\">Learn more<\/a>\r\n <\/div>\r\n\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\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\">Awarding of Quality Seals<\/h3>\r\n <p class=\"zk-card-text\">Awarding of quality seals confirms compliance with standards and criteria, increases consumer trust, and makes the brand stand out in a competitive market.<\/p>\r\n <a href=\"https:\/\/zerkom.de\/en\/warranty-marks\/\" class=\"zk-btn-lime\">Learn more<\/a>\r\n <\/div>\r\n\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\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\">Transparent Packaging & Product Solutions<\/h3>\r\n <p class=\"zk-card-text\">Transparent packaging & product solutions allow for visibility and presentation of products, promote consumer trust, and support sustainable practices through eco-friendly materials.<\/p>\r\n <a href=\"#contact\" class=\"zk-btn-lime\">Learn more<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\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-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 #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 { display: flex; opacity: 1; }\r\n\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 { transform: translateY(0); }\r\n\r\n .zk-pop-header { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 1.5rem; }\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 { width: 8px; height: 8px; background: var(--zk-lime); border-radius: 50%; animation: zkPulse 2s infinite; }\r\n\r\n .zk-pop-eu-seal { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--zk-lime); padding: 2px; background: var(--zk-bg); flex-shrink: 0; }\r\n\r\n .zk-pop-eu-seal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }\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 .zk-pop-title { color: #ffffff !important; font-size: 1.7rem; font-weight: 800; line-height: 1.25; margin-bottom: 1rem; letter-spacing: -0.02em; display: block !important; }\r\n .zk-pop-title em { font-style: normal !important; color: var(--zk-lime) !important; display: inline !important; }\r\n\r\n .zk-pop-text { color: #94a3b8 !important; font-size: 1.05rem; line-height: 1.6; margin-bottom: 2.5rem; display: block !important; }\r\n\r\n .zk-pop-btn {\r\n display: flex !important; align-items: center !important; justify-content: center !important;\r\n background-color: var(--zk-lime) !important; color: var(--zk-bg) !important;\r\n padding: 1.25rem 1.5rem !important; border-radius: 14px !important;\r\n font-weight: 800 !important; text-transform: uppercase !important;\r\n letter-spacing: 0.05em !important; border: none !important; cursor: pointer !important; width: 100% !important;\r\n font-size: 0.85rem !important; line-height: 1.3 !important; text-align: center !important;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !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 { transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(190, 242, 100, 0.4) !important; }\r\n\r\n .zk-close-x { position: absolute; top: 20px; right: 20px; color: #475569 !important; cursor: pointer; padding: 10px; z-index: 10; }\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;\">NEW EU DIRECTIVE<\/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=\"EU Flag\">\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 class=\"zk-pop-title\">Action Required: Make your claims <em>legally secure<\/em> according to EmpCo<\/h2>\r\n \r\n <p class=\"zk-pop-text\">\r\n EU Directive 2024\/825 massively tightens the requirements. Use the ZERKOM\u00ae inspection standard as your guide for implementation.\r\n <\/p>\r\n\r\n <button class=\"zk-pop-btn\" onclick=\"ctaFollowLink()\">\r\n View Inspection Standard & Details\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 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>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71aa595 e-con-full e-flex e-con e-parent\" data-id=\"71aa595\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d03349 elementor-widget elementor-widget-html\" data-id=\"5d03349\" 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=\"en\">\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>Certification for Compostable Packaging & Products<\/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>Packaging & Product Lifecycle Analysis<\/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>Ecological Packaging & Product Solutions<\/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>Sustainability Consulting for Services<\/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: \"Certification for Compostable Packaging & Products\",\r\n text: \"Certification guarantees that packaging and products are compostable and can be disposed of in an environmentally friendly manner.\",\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: \"Packaging & Product Lifecycle Analysis\",\r\n text: \"Packaging and product lifecycle analysis evaluates environmental impacts from manufacturing through to disposal of packaging and products.\",\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: \"Ecological Packaging & Product Solutions\",\r\n text: \"Ecological packaging and product solutions offer environmentally friendly alternatives that reduce waste and promote sustainable practices.\",\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: \"Sustainability Consulting for Services\",\r\n text: \"Sustainability consulting for services helps businesses implement environmentally friendly practices and increase their efficiency.\",\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<div class=\"zk-acc-widget\" lang=\"en\">\r\n <style>\r\n .zk-acc-widget {\r\n --zk-lime-50: #f7fee7; --zk-lime-200: #d9f99d; --zk-lime-500: #84cc16; --zk-lime-600: #65a30d;\r\n --zk-slate-100: #f1f5f9; --zk-slate-500: #64748b; --zk-slate-700: #334155; --zk-slate-800: #1e293b; --zk-slate-900: #0f172a;\r\n --zk-shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1); --zk-shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1); --zk-shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1);\r\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n line-height: 1.5; color: var(--zk-slate-800); background-color: #fafaf9; width: 100%; box-sizing: border-box; padding: 3rem 1.5rem; overflow: hidden;\r\n }\r\n .zk-acc-widget *, .zk-acc-widget *::before, .zk-acc-widget *::after { box-sizing: border-box; }\r\n .zk-acc-widget h2 { margin: 0 0 2rem 0; font-weight: 700; line-height: 1.2; font-size: clamp(1.75rem, 5vw, 3rem); text-align: center; color: var(--zk-slate-900); }\r\n .zk-acc-widget h3 { margin: 0 0 1rem 0; font-weight: 700; font-size: 1.25rem; line-height: 1.3; border-bottom: 1px solid var(--zk-slate-100); padding-bottom: 1rem; color: var(--zk-slate-900); }\r\n .zk-acc-widget p { margin-bottom: 1rem; color: var(--zk-slate-500); line-height: 1.6; font-size: 0.95rem; }\r\n .zk-acc-widget ul { padding-left: 1.5rem; list-style-type: disc; color: var(--zk-slate-500); margin-bottom: 1rem; }\r\n .zk-acc-widget li { margin-bottom: 0.5rem; }\r\n .zk-interleaved-layout { display: flex; flex-direction: column; gap: 0.5rem; max-width: 1280px; margin: 0 auto; position: relative; }\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 .zk-interleaved-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 0; column-gap: 4rem; align-items: start; grid-auto-rows: min-content; }\r\n }\r\n .zk-desktop-bg-card { display: none; }\r\n @media (min-width: 1024px) {\r\n .zk-desktop-bg-card { display: block; grid-column: 2; grid-row: 1 \/ 100; background: #ffffff; border-radius: 1rem; box-shadow: var(--zk-shadow-xl); border: 1px solid var(--zk-slate-100); position: relative; min-height: 400px; height: 100%; z-index: 0; }\r\n }\r\n .zk-deco-blob { position: absolute; top: 0; right: 0; width: 8rem; height: 8rem; background: linear-gradient(to bottom left, var(--zk-lime-200), transparent); border-bottom-left-radius: 100%; opacity: 0.5; pointer-events: none; }\r\n .zk-tab-btn { width: 100%; text-align: left; padding: 1rem 1.25rem; border-radius: 0.5rem; background: #ffffff; border: 1px solid var(--zk-slate-100); color: var(--zk-slate-700); font-weight: 600; font-size: 0.9rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s ease; white-space: normal; line-height: 1.4; position: relative; z-index: 1; }\r\n @media (min-width: 1024px) { .zk-tab-btn { grid-column: 1; margin-bottom: 0.5rem; } }\r\n .zk-tab-btn:hover { background-color: var(--zk-lime-50); color: var(--zk-lime-600); transform: translateX(4px); }\r\n .zk-tab-btn.active { background-color: var(--zk-lime-500); color: #ffffff; border-color: var(--zk-lime-500); box-shadow: var(--zk-shadow-lg); }\r\n .zk-tab-btn svg { width: 18px; height: 18px; min-width: 18px; margin-left: 10px; transition: 0.2s; }\r\n @media (max-width: 1023px) { .zk-tab-btn.active svg { transform: rotate(180deg); } }\r\n .zk-tab-content { display: none; background: white; padding: 1.5rem; border-radius: 0 0 0.5rem 0.5rem; border: 1px solid var(--zk-slate-100); border-top: none; margin-top: -0.5rem; margin-bottom: 0.5rem; animation: zkFadeIn 0.4s ease; }\r\n .zk-tab-content.active { display: block; }\r\n @media (min-width: 1024px) {\r\n .zk-tab-content { grid-column: 2; grid-row: 1 \/ 100; background: transparent; border: none; padding: 3rem; margin: 0; z-index: 2; }\r\n .zk-tab-content.active { display: block; animation: zkFadeInDesktop 0.5s ease forwards; }\r\n }\r\n @keyframes zkFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n @keyframes zkFadeInDesktop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }\r\n .zk-badges-container { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; z-index: 1; }\r\n @media (min-width: 1024px) { .zk-badges-container { grid-column: 1; } }\r\n .zk-link-badge { display: inline-flex; align-items: center; padding: 0.75rem 1.25rem; color: #ffffff !important; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 9999px; text-decoration: none !important; background-color: #84CC15; line-height: 1.2; box-shadow: var(--zk-shadow-md); border: 1px solid rgba(255,255,255,0.2); white-space: normal; text-align: center; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }\r\n .zk-link-badge::after { content: '\u2197'; margin-left: 0.5rem; }\r\n .zk-link-badge:hover { transform: translateY(-4px); background-color: var(--zk-lime-600); box-shadow: 0 10px 20px -5px rgba(101, 163, 13, 0.6); color: #ffffff !important; }\r\n <\/style>\r\n\r\n <h2>Certification Process & Legislation<\/h2>\r\n\r\n <div class=\"zk-interleaved-layout\">\r\n <div class=\"zk-desktop-bg-card\"><div class=\"zk-deco-blob\"><\/div><\/div>\r\n\r\n <button class=\"zk-tab-btn active\" onclick=\"zkSwitchTab(0)\">\r\n <span>New Legal Situation from 2026: EmpCo Directive<\/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>New Legal Market Situation: The EmpCo Directive enters into full force on Sept 27, 2026<\/h3>\r\n <p>With the entry into force of the EU EmpCo Directive (Empowering Consumers for the Green Transition), the market for ecological product information is fundamentally changing. From Sept 27, 2026, environmental and sustainability claims are strictly regulated.<\/p>\r\n <p>Claims such as \"compostable,\" \"biodegradable,\" \"environmentally friendly,\" or \"CO\u2082 neutral\" may only be used in the future if they are supported by independent, verifiable evidence.<\/p>\r\n <p><strong>For manufacturers, this means:<\/strong><\/p>\r\n <ul>\r\n <li>Self-claims without verification are prohibited.<\/li>\r\n <li>Environmental logos and labels must be government-recognized or strictly certified.<\/li>\r\n <li>Lack of evidence can lead to fines, warnings, and market bans.<\/li>\r\n <li>Only independent certification bodies may confirm the authenticity of such claims.<\/li>\r\n <\/ul>\r\n <h3 style=\"border:none; margin-bottom: 0.5rem; color: var(--zk-lime-600);\">Why ZERKOM\u00ae is crucial now<\/h3>\r\n <p>ZERKOM\u00ae is the only government-recognized certification body in Germany and Europe that confirms the \"100% compostable\" guarantee with an official, verified warranty mark. This type of certification alone fully meets the requirements of the new EmpCo Directive.<\/p>\r\n <ul style=\"list-style-type: none; padding-left: 0;\">\r\n <li>\u2714 <strong>Legally secure claim \"100% compostable\"<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Only with ZERKOM\u00ae certification may this statement continue to be used publicly in the future.<\/span><\/li>\r\n <li>\u2714 <strong>Protection against warnings and market bans<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Seals without independent verification will be prohibited in the future. ZERKOM\u00ae prevents this risk.<\/span><\/li>\r\n <li>\u2714 <strong>Official testing processes according to EU specifications<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Documented in a legally compliant procedure that fully fulfills the EmpCo requirements.<\/span><\/li>\r\n <li>\u2714 <strong>Competitive advantage from 2026<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Manufacturers with the ZERKOM\u00ae seal can continue to advertise credibly even after the deadline.<\/span><\/li>\r\n <\/ul>\r\n <p style=\"margin-top: 1.5rem; font-weight: 600;\">ZERKOM\u00ae is the solution for the new legal situation. With ZERKOM\u00ae, your product receives a recognized seal of approval and permission to continue advertising safely.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(1)\">\r\n <span>Retrospective: Market Situation since Jan 17, 2024<\/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>New Market Situation since January 17, 2024<\/h3>\r\n <p><strong>EU Law to Restrict Greenwashing<\/strong><br>With the entry into force of the new EU law to restrict greenwashing on January 17, 2024, the requirement for clearly recognizable guarantee information and the introduction of a new label for guarantees that go beyond legal warranties was mandated.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(2)\">\r\n <span>ZERKOM\u00ae Provides Security<\/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 Provides Security<\/h3>\r\n <p>The ZERKOM\u00ae sustainability seal in the form of a warranty mark is unique and closes the protection gap for quality seals. While conventional quality seals only represent a snapshot at the time of testing, ZERKOM\u00ae offers a permanent and legally binding guarantee or warranty for product properties.<\/p>\r\n <p>Questionable sustainability seals or greenwashing can damage the image in the long term, lead to the loss of customers as well as financial losses and even legal consequences.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(3)\">\r\n <span>Advantages of the ZERKOM\u00ae Sustainability Seal<\/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>Advantages of the ZERKOM\u00ae Sustainability Seal<\/h3>\r\n <p>The ZERKOM\u00ae seal offers companies the opportunity to stand out from the competition with a genuine green sustainability seal and provides advantages for all actors involved \u2013 from manufacturers to resellers and end consumers. This leads to positive reporting, consumer approval, and a positive image transfer from ZERKOM\u00ae's uncompromisingly green sustainability seal to the respective company.<\/p>\r\n <p>Consumers have security for the first time with a sustainability seal that guarantees product properties in a legally binding manner. As the only sustainability seal for 100% compostable products and packaging, ZERKOM\u00ae already complies with the new EU directives and thus offers companies planning security for the coming years and laws today.<\/p>\r\n <ul style=\"list-style-type: none; padding-left: 0; margin-top: 1.5rem;\">\r\n <li>\u2714 <strong>Legally secure statement \"100% compostable\"<\/strong><\/li>\r\n <li>\u2714 <strong>Protection against warnings and market bans<\/strong><\/li>\r\n <li>\u2714 <strong>Official testing processes according to EU specifications<\/strong><\/li>\r\n <li>\u2714 <strong>Competitive advantage from 2026<\/strong><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(4)\">\r\n <span>The Mark \"100% Compostable\" Assumes Warranty<\/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>The Mark \"100% Compostable\" Assumes Warranty<\/h3>\r\n <p>The Green Dot and the Green Button are already well known. Now there is also the \"100% Compostable\" mark, made possible by the Trademark Law Modernization Act, which came into force on January 14, 2020. This law created a new trademark category with the \"warranty mark.\" This allows signs to be registered with which a trademark owner assumes the warranty for certain properties of the goods and services of other providers.<\/p>\r\n <p>In contrast to the origin function of an individual mark, the warranty mark has a guarantee function.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(5)\">\r\n <span>Protection Gap for Quality Seals Closed<\/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>Protection Gap for Quality Seals Closed<\/h3>\r\n <p>Previously, even objective quality seals could only be protected as a trademark to a very limited extent. The warranty mark closes a protection gap in the registration of such seals.<\/p>\r\n <p>The \"100% Compostable\" mark uses this new possibility and offers companies and consumers security through a sustainability seal that guarantees product properties in a legally binding manner.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(6)\">\r\n <span>What are Warranty Marks?<\/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>What are Warranty Marks?<\/h3>\r\n <p>A warranty mark is a special type of trademark that serves to guarantee certain properties or quality features of goods or services. These marks are not used by the manufacturer of the products themselves, but by an independent body that verifies and certifies compliance with certain standards.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(7)\">\r\n <span>Consequence: Quality Seal<\/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>Consequence: Quality Seal<\/h3>\r\n <p>A quality seal is a visible sign (often in the form of a logo) that is applied to products to indicate that they meet the standards set by the warranty mark. Only the holder of the warranty mark has the right to award this quality seal.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(8)\">\r\n <span>Difference from a Word Mark or Fanciful Mark<\/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>Difference from a Word Mark or Fanciful Mark<\/h3>\r\n <p><strong>Word Mark:<\/strong> A word mark consists of one or more words and serves to distinguish the goods or services of one company from those of other companies.<\/p>\r\n <p><strong>Fanciful Mark:<\/strong> A fanciful mark is a special type of word mark consisting of an invented word that has no direct meaning (e.g., \"Kodak\").<\/p>\r\n <p>In contrast, a warranty mark does not primarily serve to distinguish the origin of products, but to confirm certain quality standards.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(9)\">\r\n <span>Warranty Mark \"100% Compostable Packaging & Products\"<\/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>Warranty Mark \"100% Compostable Packaging & Products\"<\/h3>\r\n <p>The warranty mark \"100% Compostable Packaging & Products\" guarantees the consumer: Eco-friendliness, Quality control, and Trust.<\/p>\r\n <\/div>\r\n\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(10)\">\r\n <span>Advantages of Certification<\/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>Advantages of Certification<\/h3>\r\n <p>Certification of 100% compostable packaging & products by ZERKOM\u00ae not only offers companies the opportunity to build customer trust, but also demonstrates their commitment to sustainability.<\/p>\r\n <\/div>\r\n\r\n <div class=\"zk-badges-container\">\r\n <a href=\"https:\/\/www.europarl.europa.eu\/news\/en\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">Press Release European Parliament<\/a>\r\n <a href=\"https:\/\/www.bmj.de\/EN\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">Federal Ministry of Justice<\/a>\r\n <a href=\"https:\/\/www.dpma.de\/english\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">German Patent and Trade Mark Office<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\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 const buttons = document.querySelectorAll('.zk-tab-btn');\r\n buttons.forEach(btn => btn.classList.remove('active'));\r\n if(buttons[index]) {\r\n buttons[index].classList.add('active');\r\n }\r\n const contents = document.querySelectorAll('.zk-tab-content');\r\n contents.forEach(content => content.classList.remove('active'));\r\n const targetContent = document.getElementById('zk-tab-' + index);\r\n if(targetContent) {\r\n targetContent.classList.add('active');\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<div class=\"zk-video-widget\" lang=\"en\">\r\n\r\n <style>\r\n .zk-video-widget {\r\n --zk-v-lime-400: #a3e635;\r\n --zk-v-lime-500: #84cc16;\r\n --zk-v-lime-600: #65a30d;\r\n --zk-v-slate-300: #cbd5e1;\r\n --zk-v-slate-400: #94a3b8;\r\n --zk-v-slate-900: #0f172a;\r\n --zk-v-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 \/ 0.25);\r\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n line-height: 1.5; color: #ffffff; background-color: var(--zk-v-slate-900);\r\n width: 100%; box-sizing: border-box; position: relative; overflow: hidden; \r\n }\r\n .zk-video-widget *, .zk-video-widget *::before, .zk-video-widget *::after { box-sizing: border-box; }\r\n .zk-video-widget h2 { margin-bottom: 1.5rem; font-weight: 700; line-height: 1.1; font-size: clamp(2rem, 5vw, 3rem); color: white; }\r\n .zk-video-widget p { margin-bottom: 1.5rem; color: var(--zk-v-slate-300); font-size: 1.125rem; line-height: 1.6; }\r\n .zk-video-widget .zk-section-padding { padding: 5rem 0; }\r\n .zk-video-widget .zk-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 5; }\r\n .zk-video-widget .zk-grid-2 { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr; }\r\n @media (min-width: 1024px) { .zk-video-widget .zk-grid-2 { grid-template-columns: 1fr 1fr; gap: 5rem; } }\r\n \r\n \/* Hinweis-Stil unter dem Video *\/\r\n .zk-video-note { margin-top: 1rem; font-size: 0.85rem; color: var(--zk-v-slate-400); font-style: italic; text-align: center; }\r\n\r\n .zk-video-widget .zk-dark-feature { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,0.05); padding: 1rem 1.25rem; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(4px); margin-top: 2rem; width: fit-content; }\r\n .zk-video-widget .zk-icon-group { display: flex; color: var(--zk-v-lime-400); gap: 2px; }\r\n .zk-video-widget .zk-video-frame { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; border-radius: 1rem; overflow: hidden; box-shadow: var(--zk-v-shadow-2xl); border: 4px solid rgba(255, 255, 255, 0.1); background-color: #000; cursor: pointer; z-index: 10; }\r\n .zk-video-widget .zk-video-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: all 0.7s ease; z-index: 20; }\r\n .zk-video-widget .zk-play-circle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 30; }\r\n .zk-video-widget .zk-play-icon { width: 4rem; height: 4rem; background-color: var(--zk-v-lime-500); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(132, 204, 22, 0.6); }\r\n .zk-video-widget iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 25; }\r\n .zk-video-widget .zk-blur-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 1; }\r\n <\/style>\r\n\r\n <div class=\"zk-section-padding\" id=\"video\">\r\n <div class=\"zk-container\">\r\n <div class=\"zk-grid-2\">\r\n <div>\r\n <h2>Why choose compostable <br><span style=\"color: var(--zk-v-lime-400);\">packaging & products?<\/span><\/h2>\r\n <p>Compostable packaging & products are eco-friendly, reduce waste, and promote sustainable disposal, making them an ideal choice for businesses and consumers who want to protect the environment.<\/p>\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;\">Excellent Solutions<\/div>\r\n <div style=\"font-size: 0.75rem; color: var(--zk-v-slate-400);\">Zerkom offers excellent solutions for sustainable packaging & products.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\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=\"Video Thumbnail\">\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\"><path d=\"M5 3l14 9-14 9V3z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-video-note\">Note: This video is only available in German.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function zkLoadVideo(element) {\r\n var videoId = element.getAttribute('data-video-id');\r\n var iframeSrc = 'https:\/\/www.youtube-nocookie.com\/embed\/' + videoId + '?autoplay=1&mute=1&playsinline=1&controls=1&rel=0';\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<\/div>\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<div class=\"zk-about-widget\" lang=\"en\">\r\n\r\n <style>\r\n .zk-about-widget {\r\n --zk-a-lime-500: #84cc16; \r\n --zk-a-lime-600: #65a30d;\r\n --zk-a-slate-600: #475569;\r\n --zk-a-slate-900: #0f172a;\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 font-family: 'Inter', system-ui, -apple-system, 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 padding: 4rem 0rem; \r\n position: relative;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .zk-about-widget { padding: 6rem 1.5rem; }\r\n }\r\n\r\n .zk-about-widget *, .zk-about-widget *::before, .zk-about-widget *::after { box-sizing: border-box; }\r\n .zk-about-widget h2, .zk-about-widget p, .zk-about-widget img { margin: 0; padding: 0; }\r\n\r\n .zk-about-widget .zk-container { max-width: 1280px; margin: 0 auto; }\r\n\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;\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;\r\n gap: 4rem;\r\n margin-bottom: 4rem;\r\n }\r\n }\r\n\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: 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);\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 .zk-about-widget .zk-image-grid {\r\n display: grid;\r\n gap: 1.5rem;\r\n grid-template-columns: 1fr;\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;\r\n }\r\n }\r\n\r\n .zk-about-widget .zk-image-card {\r\n height: 20rem;\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;\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 .zk-about-widget .zk-image-card:hover img {\r\n transform: scale(1.1);\r\n }\r\n <\/style>\r\n\r\n <div class=\"zk-container\">\r\n <div class=\"zk-header-grid\">\r\n <div>\r\n <span class=\"zk-eyebrow\">ABOUT US<\/span>\r\n <h2>\r\n Pioneering in certified <br>compostable packaging & products\r\n <\/h2>\r\n <\/div>\r\n <div>\r\n <p>\r\n Zerkom is an officially recognized accreditation body specializing in the certification of 100% compostable packaging & products. Our goal is to support companies in making their packaging & products more environmentally friendly. Trust in our expertise and experience.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-image-grid\">\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=\"Sustainable packaging detail\">\r\n <\/div>\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=\"Nature and environment\">\r\n <\/div>\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=\"Modern packaging solutions\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/div>\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<div class=\"zk-faq-widget\" lang=\"en\">\r\n\r\n <style>\r\n .zk-faq-widget {\r\n --zk-f-lime-500: #84cc16; \r\n --zk-f-lime-50: #f7fee7;\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 font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n line-height: 1.5;\r\n color: var(--zk-f-slate-600);\r\n background-color: #f8fafc; \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 .zk-faq-widget *, .zk-faq-widget *::before, .zk-faq-widget *::after { box-sizing: border-box; }\r\n .zk-faq-widget h2, .zk-faq-widget p, .zk-faq-widget summary { margin: 0; padding: 0; }\r\n .zk-faq-widget .zk-container { max-width: 800px; margin: 0 auto; }\r\n\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 .zk-faq-widget .zk-faq-list { display: flex; flex-direction: column; gap: 1rem; }\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 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n .zk-faq-widget details:hover {\r\n border-color: var(--zk-f-lime-500);\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 .zk-faq-widget details[open] {\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;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n .zk-faq-widget summary:hover { color: var(--zk-f-slate-900); transform: scale(1.01); }\r\n .zk-faq-widget summary::-webkit-details-marker { display: none; }\r\n\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;\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n user-select: none;\r\n margin-left: 1rem;\r\n }\r\n\r\n .zk-faq-widget details[open] .zk-icon-plus { transform: rotate(45deg) scale(1.1); }\r\n\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;\r\n padding-top: 1rem;\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 <\/style>\r\n\r\n <div class=\"zk-container\">\r\n \r\n <h2>Frequently Asked Questions<\/h2>\r\n\r\n <div class=\"zk-faq-list\">\r\n \r\n <details open>\r\n <summary>\r\n What does 100% compostable mean?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n 100% compostable means that the material can be completely biodegraded and leaves no harmful residues. To ensure this, extensive laboratory tests must be conducted, including an earthworm toxicity test.\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n Why should I have my packaging or products certified?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n In order to comply with the law against greenwashing and since, according to the EU directive, it is not permitted to refer to compostable packaging or products with other seals, the certification process includes the issuance of an official certificate and the awarding of the quality seal. By certifying your packaging or products, you demonstrate your commitment to sustainability and gain the trust of your customers.\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n How does the certification process work?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n The certification process includes a comprehensive analysis of your packaging or products, extensive tests in accordance with the warranty mark registered with the DPMA, as well as the issuance of an official certificate and the awarding of the quality seal.\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n Cost of certification?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n At Zerkom, we understand that certifying your packaging or products should be sustainable and cost-effective. We offer transparent pricing to ensure that your company makes the right decision.\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n What steps does the certification process include?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n The certification process at Zerkom includes a comprehensive analysis, testing of materials including a laboratory earthworm toxicity test, the issuance of the certificate, and the awarding of the official quality seal. By certifying your packaging or products, you demonstrate your commitment to sustainability and gain the trust of your customers.\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n What requirements must be met?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n To meet legal requirements, the guidelines of the standards for the warranty mark registered with the DPMA must be fulfilled. An earthworm compliance test and the use of agricultural waste, among other things, are also required.\r\n <\/div>\r\n <\/details>\r\n\r\n <details>\r\n <summary>\r\n What is the goal of the certification process?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n The certification process aims to comply with the law against greenwashing, to award a quality seal, to provide security for companies, and to ensure compliance with environmental regulations.\r\n <\/div>\r\n <\/details>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/div>\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\" lang=\"en\">\r\n\r\n <style>\r\n .zk-contact-widget {\r\n --zk-c-lime-50: #f7fee7; --zk-c-lime-100: #ecfccb; --zk-c-lime-500: #84cc16; --zk-c-lime-600: #65a30d; --zk-c-lime-700: #4d7c0f; --zk-c-green-600: #16a34a;\r\n --zk-c-slate-50: #f8fafc; --zk-c-slate-100: #f1f5f9; --zk-c-slate-200: #e2e8f0; --zk-c-slate-500: #64748b; --zk-c-slate-600: #475569; --zk-c-slate-700: #334155; --zk-c-slate-800: #1e293b; --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); --zk-c-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 \/ 0.25);\r\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n line-height: 1.5; background: linear-gradient(135deg, var(--zk-c-lime-500), var(--zk-c-green-600)); width: 100%; box-sizing: border-box; padding: 4rem 0rem; position: relative; overflow: hidden;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget { padding: 6rem 1.5rem; } }\r\n .zk-contact-widget::before { content: \"\"; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.2) 2px, transparent 2px); background-size: 30px 30px; pointer-events: none; }\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, .zk-contact-widget input, .zk-contact-widget textarea, .zk-contact-widget button { margin: 0; padding: 0; font-family: inherit; text-decoration: none; }\r\n .zk-contact-widget a { text-decoration: none; color: inherit; }\r\n .zk-contact-widget .zk-container { width: 100%; max-width: 1280px; margin: 0 auto; position: relative; z-index: 10; }\r\n .zk-contact-widget .zk-main-card { background: white; border-radius: 1.5rem; box-shadow: var(--zk-c-shadow-2xl); overflow: hidden; display: grid; grid-template-columns: 1fr; margin-bottom: 5rem; width: 100%; }\r\n @media (min-width: 1024px) { .zk-contact-widget .zk-main-card { grid-template-columns: 1fr 1fr; } }\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 .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 .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 .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 .zk-contact-widget input, .zk-contact-widget textarea { width: 100%; background-color: var(--zk-c-slate-50); border: 1px solid var(--zk-c-slate-200); border-radius: 0.5rem; padding: 0.75rem; font-size: 1rem; color: var(--zk-c-slate-800); transition: all 0.2s; outline: none; min-width: 0; }\r\n .zk-contact-widget input:focus, .zk-contact-widget textarea:focus { border-color: var(--zk-c-lime-500); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1); background-color: white; }\r\n .zk-contact-widget textarea { resize: vertical; min-height: 120px; }\r\n .zk-contact-widget .zk-submit-btn { width: 100%; background-color: var(--zk-c-lime-600); color: white; font-weight: 700; padding: 1rem; border-radius: 0.5rem; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; font-size: 1rem; }\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 .zk-contact-widget .zk-map-section { position: relative; background-color: var(--zk-c-slate-200); min-height: 350px; display: flex; align-items: center; justify-content: center; padding: 1rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-map-section { padding: 1.5rem; min-height: 400px; } }\r\n .zk-contact-widget .zk-map-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); opacity: 0.6; transition: all 0.7s ease; }\r\n .zk-contact-widget .zk-map-section:hover .zk-map-bg { filter: grayscale(0%); opacity: 1; }\r\n .zk-contact-widget .zk-info-card-overlay { position: relative; z-index: 5; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); padding: 1.5rem; border-radius: 0.75rem; box-shadow: var(--zk-c-shadow-xl); width: 100%; max-width: 380px; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-info-card-overlay { padding: 2rem; } }\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 .zk-contact-widget .zk-contact-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; color: var(--zk-c-slate-600); font-weight: 500; font-size: 0.95rem; word-break: break-all; }\r\n @media (min-width: 400px) { .zk-contact-widget .zk-contact-row { word-break: normal; } }\r\n .zk-contact-widget .zk-contact-row a, .zk-contact-widget a[href^=\"tel\"], .zk-contact-widget a[href^=\"mailto\"] { color: var(--zk-c-link-gray) !important; text-decoration: none !important; }\r\n .zk-contact-widget .zk-contact-row a:hover { color: var(--zk-c-lime-600) !important; }\r\n .zk-contact-widget .zk-map-btn { margin-top: 1.5rem; width: 100%; padding: 0.75rem; background-color: var(--zk-c-slate-100); color: var(--zk-c-slate-700); font-size: 0.875rem; font-weight: 600; border: none; border-radius: 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; text-decoration: none; }\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 .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 .zk-contact-widget .zk-info-box { background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: var(--zk-c-shadow-xl); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }\r\n @media (min-width: 480px) { .zk-contact-widget .zk-info-box { flex-direction: row; gap: 1.5rem; padding: 2rem; } }\r\n .zk-contact-widget .zk-icon-wrapper { background-color: var(--zk-c-lime-100); color: var(--zk-c-lime-600); padding: 0.75rem; border-radius: 0.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }\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-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 <\/style>\r\n\r\n <div class=\"zk-container\">\r\n <div class=\"zk-main-card\">\r\n <div class=\"zk-form-section\">\r\n <h2>Contact Us<\/h2>\r\n <p class=\"zk-intro-text\">Get in touch for further information and individual consultation.<\/p>\r\n <form id=\"zkContactForm\">\r\n <div class=\"zk-form-grid\">\r\n <div class=\"zk-input-group\"><label>Your Name<\/label><input type=\"text\" name=\"zk_name\" required><\/div>\r\n <div class=\"zk-input-group\"><label>Company Name<\/label><input type=\"text\" name=\"zk_company\"><\/div>\r\n <\/div>\r\n <div class=\"zk-form-grid\">\r\n <div class=\"zk-input-group\"><label>Phone Number<\/label><input type=\"tel\" name=\"zk_phone\"><\/div>\r\n <div class=\"zk-input-group\"><label>Email Address<\/label><input type=\"email\" name=\"zk_email\" required><\/div>\r\n <\/div>\r\n <div class=\"zk-input-group\" style=\"margin-bottom: 1.5rem;\"><label>Your Message<\/label><textarea rows=\"4\" name=\"zk_message\" required><\/textarea><\/div>\r\n <button type=\"submit\" class=\"zk-submit-btn\" id=\"zkSubmitBtn\"><span id=\"zkBtnText\">Send Message<\/span><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><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><\/button>\r\n <div id=\"zkFormStatus\" class=\"zk-form-status\"><\/div>\r\n <\/form>\r\n <\/div>\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=\"Map Background\">\r\n <div class=\"zk-info-card-overlay\">\r\n <h3 class=\"zk-info-title\">Contact Information<\/h3>\r\n <div class=\"zk-contact-row\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#65a30d\" stroke-width=\"2\"><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><a href=\"tel:+49303486261\">+49 (0) 30 3486261<\/a><\/div>\r\n <div class=\"zk-contact-row\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#65a30d\" stroke-width=\"2\"><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><a href=\"mailto:info@zerkom.de\">info@zerkom.de<\/a><\/div>\r\n <a href=\"https:\/\/share.google\/6y00kHzGUzKgcdAxy\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"zk-map-btn\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><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>Show on map<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-bottom-header\">\r\n <span class=\"zk-eyebrow\">Eco-friendly solution<\/span>\r\n <h2 class=\"zk-bottom-headline\">Details regarding certifications for <br> eco-friendliness<\/h2>\r\n <\/div>\r\n <div class=\"zk-info-grid\">\r\n <div class=\"zk-info-box\">\r\n <div class=\"zk-icon-wrapper\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><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 <div>\r\n <h3>Packaging Legislation & Compliance<\/h3>\r\n <p>Explain briefly the importance of legal compliance for compostable packaging or products and highlight how Zerkom supports businesses in meeting environmental standards.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-info-box\">\r\n <div class=\"zk-icon-wrapper\"><svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><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><\/div>\r\n <div>\r\n <h3>Trusted Certification Marks<\/h3>\r\n <p>Emphasize the credibility and trust that Zerkom certification seals grant to products, underscoring the importance of environmental protection.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-bottom-text-wrapper\"><p class=\"zk-bottom-text\">Need a transparent solution? Contact us<\/p><\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", function() {\r\n const form = document.getElementById('zkContactForm');\r\n const submitBtn = document.getElementById('zkSubmitBtn');\r\n const btnText = document.getElementById('zkBtnText');\r\n const statusBox = document.getElementById('zkFormStatus');\r\n if(form) {\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n submitBtn.disabled = true;\r\n const originalText = btnText.innerText;\r\n btnText.innerText = 'Sending...';\r\n statusBox.innerHTML = '';\r\n statusBox.className = 'zk-form-status';\r\n statusBox.style.display = 'none';\r\n const formData = new FormData(form);\r\n formData.append('action', 'zk_send_mail');\r\n fetch('\/wp-admin\/admin-ajax.php', { method: 'POST', body: formData })\r\n .then(response => response.json())\r\n .then(data => {\r\n if(data.success) {\r\n statusBox.innerHTML = 'Thank you! Your message has been sent successfully.'; \r\n statusBox.classList.add('success');\r\n statusBox.style.display = 'block';\r\n form.reset();\r\n } else {\r\n statusBox.innerText = 'Error: ' + (data.data || 'Please try again later.');\r\n statusBox.classList.add('error');\r\n statusBox.style.display = 'block';\r\n }\r\n })\r\n .catch(error => {\r\n statusBox.innerText = 'Technical problem. Please contact us by phone.';\r\n statusBox.classList.add('error');\r\n statusBox.style.display = 'block';\r\n })\r\n .finally(() => {\r\n submitBtn.disabled = false;\r\n btnText.innerText = originalText;\r\n });\r\n });\r\n }\r\n });\r\n <\/script>\r\n<\/div>\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% Certified Compostable Official certifications for businesses under the new EU directives Make your Green Claims legally compliant. Legally verified and certified by an independent warranty mark. Under the EU EmpCo Directive and the Green Claims Directive, environmental and sustainability claims and their labeling may only be used if they are demonstrable, verifiable, […]<\/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-720","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\/en\/wp-json\/wp\/v2\/pages\/720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/comments?post=720"}],"version-history":[{"count":16,"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/pages\/720\/revisions"}],"predecessor-version":[{"id":1663,"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/pages\/720\/revisions\/1663"}],"wp:attachment":[{"href":"https:\/\/zerkom.de\/en\/wp-json\/wp\/v2\/media?parent=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}