{"id":718,"date":"2025-12-01T16:54:35","date_gmt":"2025-12-01T16:54:35","guid":{"rendered":"https:\/\/zerkom.de\/home\/"},"modified":"2026-05-24T13:33:18","modified_gmt":"2026-05-24T13:33:18","slug":"home","status":"publish","type":"page","link":"https:\/\/zerkom.de\/zh-hans\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Zerkom - 100% Zertifiziert Kompostierbar<\/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-Konform\">\r\n <\/div>\r\n <div class=\"zk-badge-text\">\r\n Offizielle Zertifizierungen f\u00fcr Unternehmen gem\u00e4\u00df neuer EU-Richtlinien\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Headline -->\r\n <h1 class=\"zk-animate-in zk-delay-2\">\r\n Machen Sie Ihre Green Claims <span class=\"zk-text-gradient\">rechtssicher.<\/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 Rechtssicher gepr\u00fcft und zertifiziert durch eine unabh\u00e4ngige Gew\u00e4hrleistungsmarke.\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>Mit der EU-EmpCo-Richtlinie und der Green Claims Directive d\u00fcrfen Umwelt- und Nachhaltigkeitsaussagen sowie deren Deklarierung nur noch verwendet werden, wenn sie nachweisbar, \u00fcberpr\u00fcfbar und unabh\u00e4ngig verifiziert sind. Dies betrifft insbesondere Aussagen wie:<\/p>\r\n \r\n <!-- Tags -->\r\n <ul class=\"zk-tag-list\">\r\n <li>recycelbar<\/li>\r\n <li>Rezyklatanteil<\/li>\r\n <li>kompostierbar<\/li>\r\n <li>CO\u2082-neutral<\/li>\r\n <li>nachhaltig<\/li>\r\n <li>umweltfreundlich<\/li>\r\n <li>\u00e4hnliche allgemeine Begriffe<\/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 Mehr erfahren \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>Unsere Zertifizierungen<\/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 Wichtiger Hinweis\r\n <\/strong>\r\n <p style=\"color: white; font-size: 1.1rem; margin: 0; line-height: 1.6;\">\r\n Der Rezyklatanteil muss gem\u00e4\u00df EU-EmpCo-Richtlinie ab September verpflichtend deklariert und \u00fcberpr\u00fcfbar nachgewiesen werden.\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\">Ohne verifizierte Nachweise drohen:<\/span>\r\n <ul class=\"zk-list\">\r\n <li>Abmahnungen durch Verbraucher­schutzverb\u00e4nde<\/li>\r\n <li>Vertriebsverbote in Deutschland und der gesamten EU<\/li>\r\n <li>Empfindliche Bu\u00dfgelder und Reputationssch\u00e4den<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/header>\r\n <\/div>\r\n\r\n <!-- Skript -->\r\n <script>\r\n const scrollDownBtn = document.querySelector('.js-scroll-down');\r\n if (scrollDownBtn) {\r\n scrollDownBtn.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n window.scrollBy({\r\n top: 800, \r\n left: 0,\r\n behavior: 'smooth'\r\n });\r\n });\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a2c1bac e-con-full e-flex e-con e-parent\" data-id=\"a2c1bac\" data-element_type=\"container\" data-e-type=\"container\" id=\"positionierung\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2821e2e elementor-widget elementor-widget-html\" data-id=\"2821e2e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\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\">Positionierung<\/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 ist eine unabh\u00e4ngige <br>\r\n <span class=\"zk-mc-highlight\">Pr\u00fcf- und Zertifizierungsplattform<\/span><br> \r\n f\u00fcr Green Claims.\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 Wir erm\u00f6glichen Unternehmen den rechtssicheren Einsatz ihrer Umwelt- und Nachhaltigkeitsaussagen \u2013 von der ersten Bewertung bis zur zertifizierten Nutzung im Markt.\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\">Audit & Verifizierung<\/div>\r\n <h2 class=\"zk-mc-h2 zk-mc-reveal zk-mc-delay-1\">Pr\u00fcfen Sie Ihre Claims \u2013 <br><span class=\"zk-mc-highlight\">automatisiert und auditierbar<\/span><\/h2>\r\n <p class=\"zk-mc-text zk-mc-reveal zk-mc-delay-2\">\u00dcber unsere Plattform k\u00f6nnen Unternehmen ihre Green Claims direkt pr\u00fcfen lassen:<\/p>\r\n <ul class=\"zk-mc-list zk-mc-reveal zk-mc-delay-2\">\r\n <li><strong>als Pre-Check:<\/strong> erste automatisierte Einsch\u00e4tzung<\/li>\r\n <li><strong>als vollst\u00e4ndiger Audit:<\/strong> strukturierter Pr\u00fcfprozess mit dokumentierter Verifizierung<\/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 Das bedeutet: Wir f\u00fchren bereits auf der Plattform echte Audit-Vorg\u00e4nge durch \u2013 nicht nur Vorpr\u00fcfungen. Claims k\u00f6nnen somit direkt bei uns gepr\u00fcft, auditiert und zertifiziert werden.\r\n <\/p>\r\n <a href=\"https:\/\/precheck.zerkom.de\" class=\"zk-mc-btn\">\r\n Jetzt Claim pr\u00fcfen\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\">Rezyklatanteil und Recycling-Claims <br><span class=\"zk-mc-highlight\">korrekt nachweisen<\/span><\/h2>\r\n <p class=\"zk-mc-text\">Die EU stellt steigende Anforderungen an die Deklaration von Rezyklatanteilen und Recyclingf\u00e4higkeit. Unternehmen m\u00fcssen belegen:<\/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>Tats\u00e4chlicher Anteil an Post-Consumer-Rezyklat (PCR)<\/li>\r\n <li>Herkunft und R\u00fcckverfolgbarkeit<\/li>\r\n <li>\u00dcbereinstimmung mit realen Materialstr\u00f6men<\/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 pr\u00fcft und zertifiziert diese Angaben unabh\u00e4ngig und auditierbar.\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\">EU-Marktzugang<\/div>\r\n <h2 class=\"zk-mc-h2\">Zertifizierte Claims \u2013 <br>Ihr Zugang zum EU-Markt<\/h2>\r\n <p class=\"zk-mc-text\">Unsere Zertifikate erm\u00f6glichen die rechtssichere Nutzung von Green Claims. Erfahren Sie mehr in den Detailbereichen:<\/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);\">Recycled Content \/ Rezyklatanteil<\/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);\">Recyclingf\u00e4higkeit<\/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);\">Kompostierbarkeit<\/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- und Nachhaltigkeitsclaims<\/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\">In drei Schritten zur <span class=\"zk-mc-highlight\">rechtssicheren Nutzung<\/span> Ihrer Claims<\/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);\">Pre-Check<\/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);\">Audit & Verifizierung<\/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);\">Zertifizierung & Marktnutzung<\/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:\/\/precheck.zerkom.de\" class=\"zk-mc-btn\">\r\n Jetzt Pre-Check machen\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>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-00ce036 e-flex e-con-boxed e-con e-parent\" data-id=\"00ce036\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8e42c36 elementor-widget elementor-widget-html\" data-id=\"8e42c36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\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=\"de\">\r\n <div class=\"zk-statement-eyebrow\">\r\n Sicherheit durch ZERKOM\r\n <\/div>\r\n \r\n <h2 class=\"zk-statement-headline\">\r\n Wir best\u00e4tigen offiziell, dass Ihr Produkt tats\u00e4chlich <span class=\"zk-statement-highlight\">\u201e100 % kompostierbar\u201c<\/span> ist \u2013 gem\u00e4\u00df EmpCo-Richtlinie.\r\n <\/h2>\r\n \r\n <p class=\"zk-statement-sub\">\r\n Sch\u00fctzen Sie Ihr Unternehmen jetzt vor falschen Umweltclaims und Abmahnungen.\r\n <\/p>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-531137c e-con-full e-flex e-con e-parent\" data-id=\"531137c\" data-element_type=\"container\" data-e-type=\"container\" id=\"empco\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91c2eec elementor-widget elementor-widget-html\" data-id=\"91c2eec\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\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\">Richtlinie (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 & Rechtssicherheit<\/span>\r\n <h1 class=\"zk-main-title\">\r\n Die <em>Notwendigkeit<\/em> des ZERKOM\u00ae Pr\u00fcfstandards f\u00fcr Unternehmen\r\n <\/h1>\r\n <div class=\"zk-sub-info\">\r\n Pr\u00fcfung von Umwelt- und Nachhaltigkeitsaussagen gem\u00e4\u00df EU-EmpCo-Richtlinie (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>Der ZERKOM\u00ae EmpCo-Pr\u00fcfstandard \u00fcbersetzt die Anforderungen der EU-EmpCo-Richtlinie (Empowering Consumers for the Green Transition) in ein objektives, unabh\u00e4ngiges und pr\u00fcfbares Zertifizierungs- und Pr\u00fcfverfahren f\u00fcr Umwelt- und Nachhaltigkeitsaussagen (\u201eGreen Claims\u201c).<\/p>\r\n <\/div>\r\n <div class=\"zk-exposed-item\">\r\n <p>Er richtet sich an Unternehmen, Beh\u00f6rden und Marktteilnehmer, die Umwelt- und Nachhaltigkeitsaussagen rechtssicher, transparent und nachvollziehbar pr\u00fcfen oder nachweisen m\u00f6chten.<\/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-Methodik & Prozess-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. Zweck des Pr\u00fcfstandards<\/h3>\r\n <p>Dieser Pr\u00fcfstandard dient der objektiven, unabh\u00e4ngigen und nachvollziehbaren Pr\u00fcfung von Umwelt- und Nachhaltigkeitsaussagen (\u201eGreen Claims\u201c) im Sinne der EU-Richtlinie (EU) 2024\/825 (Empowering Consumers for the Green Transition \u2013 EmpCo).<\/p>\r\n <p>Ziel ist es, eine konkrete und pr\u00fcfbare Umsetzung abstrakter gesetzlicher Anforderungen bereitzustellen und dadurch Transparenz, Vergleichbarkeit und Rechtssicherheit zu schaffen.<\/p>\r\n\r\n <h3>2. Anwendungsbereich<\/h3>\r\n <p>Der ZERKOM\u00ae EmpCo-Pr\u00fcfstandard findet Anwendung auf:<\/p>\r\n <ul>\r\n <li>produktbezogene Umwelt- und Nachhaltigkeitsaussagen,<\/li>\r\n <li>unternehmensbezogene Nachhaltigkeitsaussagen,<\/li>\r\n <li>verwendete Begriffe, Labels, Siegel und Symbole,<\/li>\r\n <li>Werbe-, Vertriebs- und Kommunikationsmaterialien (B2C sowie mittelbar B2B).<\/li>\r\n <\/ul>\r\n\r\n <h3>3. Rechtsgrundlagen<\/h3>\r\n <p>Der Pr\u00fcfstandard basiert insbesondere auf:<\/p>\r\n <ul>\r\n <li>Richtlinie (EU) 2024\/825 (EmpCo),<\/li>\r\n <li>Richtlinie 2005\/29\/EG (Unlautere Gesch\u00e4ftspraktiken \u2013 UCPD),<\/li>\r\n <li>einschl\u00e4gigen EU-Verordnungen, insbesondere im Bereich Kreislaufwirtschaft und Verpackungsrecht,<\/li>\r\n <li>nationalem Umsetzungsrecht (z. B. Gesetz gegen den unlauteren Wettbewerb \u2013 UWG).<\/li>\r\n <\/ul>\r\n\r\n <h3>4. Pr\u00fcfmethodik<\/h3>\r\n <p>ZERKOM\u00ae pr\u00fcft Umwelt- und Nachhaltigkeitsaussagen anhand der folgenden vier Pr\u00fcfs\u00e4ulen:<\/p>\r\n \r\n <h4>4.1 Konkretheit<\/h4>\r\n <ul>\r\n <li>Ist die Aussage klar, spezifisch und eindeutig formuliert?<\/li>\r\n <li>Werden pauschale Begriffe wie \u201eumweltfreundlich\u201c, \u201enachhaltig\u201c oder \u201egr\u00fcn\u201c vermieden oder ausreichend konkretisiert?<\/li>\r\n <\/ul>\r\n\r\n <h4>4.2 Nachweisbarkeit<\/h4>\r\n <ul>\r\n <li>Liegen belastbare, \u00fcberpr\u00fcfbare und nachvollziehbare Nachweise vor?<\/li>\r\n <li>Sind diese dokumentiert, reproduzierbar und aktuell?<\/li>\r\n <\/ul>\r\n\r\n <h4>4.3 Relevanz und Vollst\u00e4ndigkeit<\/h4>\r\n <ul>\r\n <li>Bezieht sich die Aussage auf den wesentlichen Umwelt- oder Nachhaltigkeitsaspekt?<\/li>\r\n <li>Werden relevante Einschr\u00e4nkungen, Bedingungen oder Voraussetzungen transparent dargestellt?<\/li>\r\n <\/ul>\r\n\r\n <h4>4.4 Unabh\u00e4ngigkeit<\/h4>\r\n <ul>\r\n <li>Erfolgt die Pr\u00fcfung unabh\u00e4ngig vom wirtschaftlichen Interesse des gepr\u00fcften Unternehmens?<\/li>\r\n <li>Besteht eine klare Trennung zwischen Standardinhaberschaft, Markenrechten und Pr\u00fcfentscheidung?<\/li>\r\n <\/ul>\r\n\r\n <h3>5. Pr\u00fcfprozess<\/h3>\r\n <p>Der Pr\u00fcfprozess erfolgt in folgenden Schritten:<\/p>\r\n <ol>\r\n <li>Antragstellung durch den Pr\u00fcfteilnehmer<\/li>\r\n <li>Dokumenten- und Datenpr\u00fcfung<\/li>\r\n <li>Plausibilit\u00e4ts- und Konsistenzpr\u00fcfung<\/li>\r\n <li>Ergebnisbewertung<\/li>\r\n <li>Zertifizierungsentscheidung<\/li>\r\n <li>Eintrag in das ZERKOM\u00ae-Register<\/li>\r\n <\/ol>\r\n\r\n <h3>6. Entzug und Sanktionen<\/h3>\r\n <p>Bei Wegfall der Voraussetzungen, irref\u00fchrender Nutzung oder fehlender Aktualisierung k\u00f6nnen folgende Ma\u00dfnahmen ergriffen werden:<\/p>\r\n <ul>\r\n <li>Entzug der Zertifizierung,<\/li>\r\n <li>L\u00f6schung aus dem ZERKOM\u00ae-Register,<\/li>\r\n <li>Untersagung der weiteren Nutzung von Siegeln oder Zertifikatsverweisen.<\/li>\r\n <\/ul>\r\n\r\n <h3>7. Transparenz<\/h3>\r\n <p>Die Pr\u00fcfkriterien, der Pr\u00fcfprozess sowie das Zertifikatsregister sind \u00f6ffentlich zug\u00e4nglich, um eine beh\u00f6rdliche, marktseitige und verbraucherbezogene Nachvollziehbarkeit sicherzustellen.<\/p>\r\n\r\n <h3>ZERKOM\u00ae \u2013 \u00dcbersetzung von Regulierung in pr\u00fcfbare Realit\u00e4t<\/h3>\r\n\r\n <div class=\"zk-legal-note\">\r\n Rechtlicher Hinweis: Der ZERKOM\u00ae EmpCo-Pr\u00fcfstandard stellt ein privatrechtliches Pr\u00fcf- und Zertifizierungsverfahren dar und ersetzt keine beh\u00f6rdliche Entscheidung. Er dient der objektiven Nachweisf\u00fchrung und Risikominimierung im Sinne der geltenden EU-Verbraucherschutz- und Wettbewerbsregelungen.\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 \u00dcbersetzung von Regulierung in pr\u00fcfbare Realit\u00e4t\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\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>\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=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom Pricing Widget<\/title>\r\n <style>\r\n \/* =========================================\r\n VORSCHAU-RESET (Nur f\u00fcr die Anzeige hier)\r\n ========================================= *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f1f5f9; \/* Leichter grauer Hintergrund f\u00fcr Kontrast *\/\r\n \/* Nutzung der System-Schriftarten *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n color: #333;\r\n \/* WICHTIG: Kein 'display: flex' auf dem Body, damit Ihre Webseite nicht kaputt geht *\/\r\n }\r\n\r\n \/* =========================================\r\n WIDGET STYLES (UNIQUE SCOPE: .zk-pricing-section)\r\n Optimiert f\u00fcr Elementor & Mobilger\u00e4te\r\n ========================================= *\/\r\n\r\n .zk-pricing-section {\r\n \/* LOKALE VARIABLEN - Damit es unabh\u00e4ngig vom Global Style funktioniert *\/\r\n --zk-p-primary: #bef264; \r\n --zk-p-primary-dark: #a3e635; \r\n --zk-p-lime-text: #4d7c0f; \r\n --zk-p-lime-bg-light: #f7fee7; \r\n --zk-p-text-heading: #0f172a; \r\n --zk-p-text-body: #64748b; \r\n \r\n \/* DSGVO-Update: Nutzung von System-Schriftarten statt nur 'Inter' *\/\r\n --font-main: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n\r\n width: 100%;\r\n background-color: white; \r\n \/* Mobile First Padding - reduziert f\u00fcr mehr Breite (war 1rem) *\/\r\n padding: 3rem 0.5rem; \r\n position: relative;\r\n z-index: 10;\r\n \r\n \/* Schriftart-Reset *\/\r\n font-family: var(--font-main);\r\n color: var(--zk-p-text-body);\r\n line-height: 1.5;\r\n text-align: left;\r\n }\r\n\r\n \/* Tablet & Desktop Padding *\/\r\n @media (min-width: 768px) {\r\n .zk-pricing-section {\r\n padding: 5rem 1.5rem;\r\n }\r\n }\r\n\r\n \/* Box-Sizing Reset NUR innerhalb dieses Widgets *\/\r\n .zk-pricing-section *,\r\n .zk-pricing-section *::before,\r\n .zk-pricing-section *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Typografie Resets *\/\r\n .zk-pricing-section h2, \r\n .zk-pricing-section h3, \r\n .zk-pricing-section p, \r\n .zk-pricing-section a {\r\n margin: 0;\r\n padding: 0;\r\n font-weight: normal; \r\n text-decoration: none;\r\n }\r\n\r\n \/* SILBENTRENNUNG OPTIMIERUNG \r\n Headlines & Buttons: Nur manuell (­), damit keine Wortfetzen entstehen.\r\n Flie\u00dftext (p): Automatisch, basierend auf lang=\"de\".\r\n *\/\r\n .zk-pricing-section h2, \r\n .zk-pricing-section h3, \r\n .zk-pricing-section a {\r\n hyphens: manual;\r\n -webkit-hyphens: manual;\r\n -ms-hyphens: manual;\r\n }\r\n\r\n .zk-pricing-section p {\r\n hyphens: auto;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n }\r\n\r\n \/* Container *\/\r\n .zk-pricing-section .zk-container {\r\n width: 100%;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- Header Bereich --- *\/\r\n .zk-pricing-section .zk-section-header {\r\n text-align: center;\r\n margin-bottom: 2.5rem;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n padding: 0 0.5rem; \r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-pricing-section .zk-section-header {\r\n margin-bottom: 4rem;\r\n }\r\n }\r\n\r\n .zk-pricing-section .zk-eyebrow {\r\n color: var(--zk-p-lime-text);\r\n font-weight: 700; \r\n letter-spacing: 0.1em; \r\n font-size: 0.875rem;\r\n text-transform: uppercase;\r\n display: block;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .zk-pricing-section .zk-headline {\r\n font-weight: 800;\r\n font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n line-height: 1.2;\r\n color: var(--zk-p-text-heading);\r\n margin: 0;\r\n }\r\n\r\n \/* --- HIGHLIGHT UPDATE START --- *\/\r\n .zk-pricing-section .zk-highlight {\r\n color: var(--zk-p-lime-text);\r\n \/* UPDATE: Horizontaler Verlauf (to bottom) statt schr\u00e4g (120deg) *\/\r\n background: linear-gradient(to bottom, transparent 50%, rgba(190, 242, 100, 0.5) 50%);\r\n background-repeat: no-repeat;\r\n \/* UPDATE: Volle Gr\u00f6\u00dfe *\/\r\n background-size: 100% 100%;\r\n display: inline;\r\n font-weight: inherit;\r\n box-decoration-break: clone;\r\n -webkit-box-decoration-break: clone;\r\n \/* Kleines Padding f\u00fcr bessere Optik *\/\r\n padding: 0 4px;\r\n }\r\n \/* --- HIGHLIGHT UPDATE ENDE --- *\/\r\n\r\n \/* --- Grid System --- *\/\r\n .zk-pricing-section .zk-grid-3 {\r\n display: grid;\r\n grid-template-columns: 1fr; \r\n gap: 2rem; \r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-pricing-section .zk-grid-3 {\r\n grid-template-columns: 1fr 1fr; \r\n }\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-pricing-section .zk-grid-3 {\r\n grid-template-columns: 1fr 1fr 1fr; \r\n }\r\n }\r\n\r\n \/* --- Card Styles (Design Update) --- *\/\r\n .zk-pricing-section .zk-pricing-card {\r\n text-align: center;\r\n padding: 2rem;\r\n border-radius: 1.5rem;\r\n background-color: #ffffff;\r\n border: 1px solid #e2e8f0; \r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\r\n \/* UPDATE: Etwas l\u00e4ngere Transition f\u00fcr geschmeidigere \"Pop\"-Effekte *\/\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n height: 100%; \r\n position: relative;\r\n scroll-margin-top: 120px; \r\n }\r\n\r\n \/* --- HOVER EFFEKTE (Jetzt ohne Media-Query f\u00fcr garantierte Sichtbarkeit) --- *\/\r\n \r\n .zk-pricing-section .zk-pricing-card:hover {\r\n border-color: var(--zk-p-primary);\r\n \/* UPDATE: St\u00e4rkerer Lift und leichte Vergr\u00f6\u00dferung (Scale) f\u00fcr \"Pop\"-Effekt *\/\r\n transform: translateY(-12px) scale(1.03);\r\n \/* UPDATE: Tieferer Schatten mit einem subtilen Limetten-Glow *\/\r\n box-shadow: 0 30px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1), 0 0 20px -5px rgba(190, 242, 100, 0.4);\r\n z-index: 2; \/* Sicherstellen, dass es \u00fcber anderen Elementen liegt *\/\r\n }\r\n \r\n .zk-pricing-section .zk-pricing-card:hover .zk-icon-circle {\r\n \/* UPDATE: St\u00e4rkere Rotation und Vergr\u00f6\u00dferung des Icons *\/\r\n transform: scale(1.15) rotate(8deg);\r\n background-color: var(--zk-p-primary);\r\n color: #0f172a;\r\n }\r\n \r\n \/* --- COOLER BUTTON HOVER --- *\/\r\n .zk-pricing-section .zk-btn-lime:hover {\r\n background-color: var(--zk-p-primary-dark);\r\n \/* UPDATE: St\u00e4rkerer Lift, leichter Scale und \"elastischer\" Schatten *\/\r\n transform: translateY(-4px) scale(1.02);\r\n box-shadow: 0 15px 25px -5px rgba(163, 230, 53, 0.6);\r\n color: #0f172a; \r\n }\r\n \r\n \/* Pfeil-Animation im Button *\/\r\n .zk-pricing-section .zk-btn-lime:hover::after {\r\n \/* UPDATE: Pfeil bewegt sich weiter *\/\r\n transform: translateX(6px);\r\n }\r\n\r\n .zk-pricing-section .zk-icon-circle {\r\n width: 80px;\r\n height: 80px;\r\n background-color: var(--zk-p-lime-bg-light);\r\n border-radius: 50%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 1.5rem;\r\n color: var(--zk-p-lime-text);\r\n \/* UPDATE: Elastische Transition f\u00fcr das Icon *\/\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n flex-shrink: 0;\r\n }\r\n\r\n .zk-pricing-section .zk-card-title {\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n margin: 0 0 1rem 0;\r\n color: var(--zk-p-text-heading);\r\n line-height: 1.3;\r\n }\r\n\r\n .zk-pricing-section .zk-card-text {\r\n font-weight: 400;\r\n color: var(--zk-p-text-body);\r\n margin-bottom: 2rem;\r\n font-size: 1rem;\r\n line-height: 1.6;\r\n flex-grow: 1; \r\n }\r\n\r\n \/* --- Button --- *\/\r\n .zk-pricing-section .zk-btn-lime {\r\n background-color: var(--zk-p-primary);\r\n color: #0f172a; \r\n border: none;\r\n padding: 0.75rem 2rem;\r\n border-radius: 99px; \r\n font-weight: 600;\r\n font-size: 0.95rem;\r\n cursor: pointer;\r\n \/* UPDATE: \"Elastische\" Transition (cubic-bezier) f\u00fcr einen cooleren Bounce-Effekt *\/\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n }\r\n \r\n .zk-pricing-section .zk-btn-lime::after {\r\n content: \"\u2192\"; \/* Pfeil Symbol *\/\r\n display: inline-block;\r\n \/* UPDATE: Auch der Pfeil nutzt jetzt die elastische Transition *\/\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n font-family: sans-serif;\r\n }\r\n\r\n .zk-pricing-section .zk-icon {\r\n flex-shrink: 0;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 1.5;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n width: 40px;\r\n height: 40px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Widget Anfang -->\r\n <!-- lang=\"de\" stellt sicher, dass Browser deutsche Trennregeln nutzen -->\r\n <section id=\"dienstleistungen\" class=\"zk-pricing-section\" lang=\"de\">\r\n <div class=\"zk-container\">\r\n \r\n <!-- Header -->\r\n <div class=\"zk-section-header\">\r\n <!-- ­ f\u00fcgt eine optionale Trennstelle ein -->\r\n <span class=\"zk-eyebrow\">ZERKOM\u00ae bietet eine Garantie f\u00fcr die Produkt­eigenschaften<\/span>\r\n <h2 class=\"zk-headline\">\r\n Wir bieten transparente Preise, damit Ihr Unternehmen die <span class=\"zk-highlight\">richtige Ent­scheidung trifft<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <!-- Grid -->\r\n <div class=\"zk-grid-3\">\r\n \r\n <!-- Service 1 (ID entfernt) -->\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\r\n <!-- Shield Icon -->\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"zk-card-title\">Zertifizierung von Verpackungen & Produkten<\/h3>\r\n <p class=\"zk-card-text\">Die Zertifizierung von Verpackungen & Produkten gew\u00e4hrleistet hohe Qualit\u00e4tsstandards und Sicherheit, f\u00f6rdert das Vertrauen der Verbraucher und unterst\u00fctzt Unternehmen bei der Einhaltung gesetzlicher Anforderungen.<\/p>\r\n <a href=\"https:\/\/zerkom.de\/gesetzgebung\" class=\"zk-btn-lime\">Mehr erfahren<\/a>\r\n <\/div>\r\n\r\n <!-- Service 2 (ID entfernt) -->\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\r\n <!-- Award Icon -->\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"7\"\/><polyline points=\"8.21 13.89 7 23 12 20 17 23 15.79 13.88\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"zk-card-title\">Verleihung von Qualit\u00e4ts­siegeln<\/h3>\r\n <p class=\"zk-card-text\">Die Verleihung von Qualit\u00e4ts­siegeln best\u00e4tigt die Einhaltung von Standards und Kriterien, steigert das Vertrauen der Verbraucher und hebt die Marke im wettbewerbsintensiven Markt hervor.<\/p>\r\n <a href=\"https:\/\/zerkom.de\/gewaerleistungsmarken\/\" class=\"zk-btn-lime\">Mehr erfahren<\/a>\r\n <\/div>\r\n\r\n <!-- Service 3 (ID entfernt - Problem behoben) -->\r\n <div class=\"zk-pricing-card\">\r\n <div class=\"zk-icon-circle\">\r\n <!-- FileText Icon -->\r\n <svg class=\"zk-icon\" viewBox=\"0 0 24 24\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" x2=\"8\" y1=\"13\" y2=\"13\"\/><line x1=\"16\" x2=\"8\" y1=\"17\" y2=\"17\"\/><line x1=\"10\" x2=\"8\" y1=\"9\" y2=\"9\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"zk-card-title\">Transparente Ver­packungs- & Pro­dukt­l\u00f6sungen<\/h3>\r\n <p class=\"zk-card-text\">Transparente Verpackungs- & Produktl\u00f6sungen erm\u00f6glichen Sichtbarkeit und Pr\u00e4sentation von Produkten, f\u00f6rdern das Vertrauen der Verbraucher und unterst\u00fctzen nachhaltige Praktiken durch die Verwendung umweltfreundlicher Materialien.<\/p>\r\n <a href=\"#kontakt\" class=\"zk-btn-lime\">Mehr erfahren<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <!-- Widget Ende -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce8826b e-con-full e-flex e-con e-parent\" data-id=\"ce8826b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcee400 elementor-widget elementor-widget-html\" data-id=\"dcee400\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n :root {\r\n --zk-lime: #bef264;\r\n --zk-bg: #0f172a;\r\n --zk-card-bg: rgba(15, 23, 42, 0.98);\r\n --zk-border: rgba(190, 242, 100, 0.4);\r\n --font-main: 'Inter', system-ui, -apple-system, sans-serif;\r\n }\r\n\r\n \/* POPUP OVERLAY *\/\r\n #zk-popup-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(2, 6, 23, 0.92);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n z-index: 999999;\r\n display: none; \r\n justify-content: center;\r\n align-items: center;\r\n padding: 15px;\r\n opacity: 0;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n #zk-popup-overlay.active {\r\n display: flex;\r\n opacity: 1;\r\n }\r\n\r\n \/* POPUP CARD *\/\r\n .zk-popup-card {\r\n width: 100%;\r\n max-width: 480px;\r\n background: var(--zk-card-bg) !important;\r\n border: 1px solid var(--zk-border) !important;\r\n border-radius: 2rem;\r\n padding: 3.5rem 2rem;\r\n position: relative;\r\n box-shadow: 0 0 60px rgba(190, 242, 100, 0.15);\r\n text-align: center;\r\n transform: translateY(40px);\r\n transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n box-sizing: border-box;\r\n }\r\n\r\n #zk-popup-overlay.active .zk-popup-card {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* HEADER *\/\r\n .zk-pop-header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .zk-pop-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(190, 242, 100, 0.1);\r\n padding: 6px 14px;\r\n border-radius: 99px;\r\n border: 1px solid rgba(190, 242, 100, 0.2);\r\n }\r\n\r\n .zk-pop-pulse {\r\n width: 8px; height: 8px;\r\n background: var(--zk-lime);\r\n border-radius: 50%;\r\n animation: zkPulse 2s infinite;\r\n }\r\n\r\n .zk-pop-eu-seal {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n border: 1.5px solid var(--zk-lime);\r\n padding: 2px;\r\n background: var(--zk-bg);\r\n flex-shrink: 0;\r\n }\r\n\r\n .zk-pop-eu-seal img {\r\n width: 100%; height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n @keyframes zkPulse {\r\n 0%, 100% { transform: scale(1); opacity: 1; }\r\n 50% { transform: scale(1.4); opacity: 0.5; }\r\n }\r\n\r\n \/* TITLE REVERTED *\/\r\n .zk-pop-title {\r\n color: #ffffff !important;\r\n font-size: 1.7rem;\r\n font-weight: 800;\r\n line-height: 1.25;\r\n margin-bottom: 1rem;\r\n letter-spacing: -0.02em;\r\n display: block !important;\r\n }\r\n\r\n .zk-pop-title em {\r\n font-style: normal !important;\r\n color: var(--zk-lime) !important;\r\n -webkit-text-fill-color: var(--zk-lime) !important;\r\n text-fill-color: var(--zk-lime) !important;\r\n background: none !important;\r\n display: inline !important;\r\n }\r\n\r\n .zk-pop-text {\r\n color: #94a3b8 !important;\r\n font-size: 1.05rem;\r\n line-height: 1.6;\r\n margin-bottom: 2.5rem;\r\n display: block !important;\r\n }\r\n\r\n \/* BUTTON UPDATED *\/\r\n .zk-pop-btn {\r\n display: flex !important;\r\n align-items: center !important;\r\n justify-content: center !important;\r\n background-color: var(--zk-lime) !important;\r\n color: var(--zk-bg) !important;\r\n padding: 1.25rem 1.5rem !important;\r\n border-radius: 14px !important;\r\n font-weight: 800 !important;\r\n text-transform: uppercase !important;\r\n letter-spacing: 0.05em !important;\r\n border: none !important;\r\n cursor: pointer !important;\r\n width: 100% !important;\r\n font-size: 0.85rem !important;\r\n line-height: 1.3 !important;\r\n white-space: normal !important;\r\n text-align: center !important;\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\r\n -webkit-tap-highlight-color: transparent !important;\r\n outline: none !important;\r\n box-shadow: 0 4px 15px rgba(190, 242, 100, 0.2) !important;\r\n }\r\n\r\n .zk-pop-btn:hover {\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 10px 30px rgba(190, 242, 100, 0.4) !important;\r\n }\r\n\r\n \/* CLOSE *\/\r\n .zk-close-x {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n color: #475569 !important;\r\n cursor: pointer;\r\n padding: 10px;\r\n z-index: 10;\r\n -webkit-tap-highlight-color: transparent !important;\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .zk-popup-card { padding: 3rem 1.5rem; }\r\n .zk-pop-title { font-size: 1.5rem; }\r\n .zk-pop-btn { font-size: 0.8rem !important; padding: 1.1rem !important; }\r\n }\r\n<\/style>\r\n\r\n<div id=\"zk-popup-overlay\">\r\n <div class=\"zk-popup-card\">\r\n <div class=\"zk-close-x\" onclick=\"closeZkPopup()\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\r\n <\/div>\r\n \r\n <div class=\"zk-pop-header\">\r\n <div class=\"zk-pop-badge\">\r\n <div class=\"zk-pop-pulse\"><\/div>\r\n <span style=\"color:var(--zk-lime); font-size:10px; font-weight:800; letter-spacing:1px;\">NEUE EU-RICHTLINIE<\/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 Flagge\">\r\n <\/div>\r\n <\/div>\r\n\r\n <h2 class=\"zk-pop-title\">Handlungsbedarf: Machen Sie Ihre Claims jetzt <em>rechtssicher<\/em> nach EmpCo<\/h2>\r\n \r\n <p class=\"zk-pop-text\">\r\n Die EU-Richtlinie 2024\/825 versch\u00e4rft die Anforderungen massiv. Nutzen Sie den ZERKOM\u00ae Pr\u00fcfstandard als Ihren Leitfaden zur Umsetzung.\r\n <\/p>\r\n\r\n <button class=\"zk-pop-btn\" onclick=\"ctaFollowLink()\">\r\n Pr\u00fcfstandard & Details anzeigen\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n function openZkPopup() {\r\n const overlay = document.getElementById('zk-popup-overlay');\r\n if(!overlay) return;\r\n overlay.style.display = 'flex';\r\n setTimeout(() => { overlay.classList.add('active'); }, 50);\r\n }\r\n\r\n function closeZkPopup() {\r\n const overlay = document.getElementById('zk-popup-overlay');\r\n if(!overlay) return;\r\n overlay.classList.remove('active');\r\n setTimeout(() => { overlay.style.display = 'none'; }, 500);\r\n }\r\n\r\n function ctaFollowLink() {\r\n closeZkPopup();\r\n setTimeout(() => {\r\n const element = document.getElementById('empco');\r\n if (element) {\r\n const offset = 100; \r\n const bodyRect = document.body.getBoundingClientRect().top;\r\n const elementRect = element.getBoundingClientRect().top;\r\n const elementPosition = elementRect - bodyRect;\r\n const offsetPosition = elementPosition - offset;\r\n\r\n window.scrollTo({ top: offsetPosition, behavior: 'smooth' });\r\n } else {\r\n window.location.hash = 'empco';\r\n }\r\n }, 400);\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n setTimeout(openZkPopup, 5000); \r\n });\r\n\r\n document.getElementById('zk-popup-overlay').addEventListener('click', function(e) {\r\n if (e.target === this) closeZkPopup();\r\n });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9131673 e-con-full e-flex e-con e-parent\" data-id=\"9131673\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c03b6a2 elementor-widget elementor-widget-html\" data-id=\"c03b6a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\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>Zertifizierung f\u00fcr kompostierbare Verpackungen & Produkte<\/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>Analyse des Verpackungs- & Produktlebenszyklus<\/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>\u00d6kologische Verpackungs- & Produktl\u00f6sungen<\/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>Nachhaltigkeitsberatung f\u00fcr Dienstleistungen<\/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: \"Zertifizierung f\u00fcr kompostierbare Verpackungen & Produkte\",\r\n text: \"Die Zertifizierung garantiert, dass Verpackungen & Produkte kompostierbar sind und umweltfreundlich entsorgt werden k\u00f6nnen.\",\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: \"Analyse des Verpackungs- & Produktlebenszyklus\",\r\n text: \"Die Analyse des Verpackungs- & Produktlebenszyklus bewertet Umweltwirkungen, von der Herstellung bis zur Entsorgung von Verpackungen & Produkten.\",\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: \"\u00d6kologische Verpackungs- & Produktl\u00f6sungen\",\r\n text: \"\u00d6kologische Verpackungs- & Produktl\u00f6sungen bieten umweltfreundliche Alternativen, die Abfall reduzieren und nachhaltige Praktiken f\u00f6rdern.\",\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: \"Nachhaltigkeitsberatung f\u00fcr Dienstleistungen\",\r\n text: \"Nachhaltigkeitsberatung f\u00fcr Dienstleistungen hilft Unternehmen, umweltfreundliche Praktiken zu implementieren und ihre Effizienz zu steigern.\",\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>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8830940 e-con-full e-flex e-con e-parent\" data-id=\"8830940\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d28fdd elementor-widget elementor-widget-html\" data-id=\"3d28fdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\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 Accordion Widget<\/title>\r\n <style>\r\n \/* =========================================\r\n VORSCHAU-RESET\r\n Damit das Widget hier im Editor gut aussieht.\r\n (Hat keinen Einfluss auf die Funktion des Widgets selbst)\r\n ========================================= *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f1f5f9;\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n color: #333;\r\n \/* Kein display: flex auf Body, um Konflikte zu vermeiden *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-acc-widget\">\r\n\r\n <!-- STYLES (Scoped & Mobil-Optimiert + Height Fix) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-acc-widget {\r\n \/* Variablen Lokal *\/\r\n --zk-lime-50: #f7fee7;\r\n --zk-lime-200: #d9f99d;\r\n --zk-lime-500: #84cc16;\r\n --zk-lime-600: #65a30d;\r\n \r\n --zk-slate-100: #f1f5f9;\r\n --zk-slate-500: #64748b;\r\n --zk-slate-700: #334155;\r\n --zk-slate-800: #1e293b;\r\n --zk-slate-900: #0f172a;\r\n \r\n --zk-shadow-md: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\r\n --zk-shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\r\n --zk-shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\r\n \r\n \/* DSGVO-Update: Nutzung von System-Schriftarten statt Google Fonts *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n \r\n line-height: 1.5;\r\n color: var(--zk-slate-800);\r\n background-color: #fafaf9;\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 3rem 1.5rem;\r\n overflow: hidden; \/* Verhindert Scrollbars am Rand *\/\r\n }\r\n\r\n \/* Reset innerhalb des Widgets *\/\r\n .zk-acc-widget *, .zk-acc-widget *::before, .zk-acc-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* Typografie *\/\r\n .zk-acc-widget h2 { \r\n margin: 0 0 2rem 0; \r\n font-weight: 700; \r\n line-height: 1.2; \r\n font-size: clamp(1.75rem, 5vw, 3rem); \r\n text-align: center; \r\n color: var(--zk-slate-900); \r\n }\r\n \r\n .zk-acc-widget h3 { \r\n margin: 0 0 1rem 0; \r\n font-weight: 700; \r\n font-size: 1.25rem; \r\n line-height: 1.3; \r\n border-bottom: 1px solid var(--zk-slate-100); \r\n padding-bottom: 1rem; \r\n color: var(--zk-slate-900);\r\n }\r\n \r\n .zk-acc-widget p { \r\n margin-bottom: 1rem; \r\n color: var(--zk-slate-500); \r\n line-height: 1.6; \r\n font-size: 0.95rem;\r\n }\r\n \r\n .zk-acc-widget ul {\r\n padding-left: 1.5rem; \r\n list-style-type: disc; \r\n color: var(--zk-slate-500); \r\n margin-bottom: 1rem;\r\n }\r\n \r\n .zk-acc-widget li {\r\n margin-bottom: 0.5rem;\r\n }\r\n \r\n .zk-acc-widget button { font-family: inherit; }\r\n\r\n \/* --- Layout Container --- *\/\r\n \/* Auf Mobile: Standard Block Layout (Alles untereinander) *\/\r\n .zk-interleaved-layout {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.5rem;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n \/* --- Desktop Layout (Magic Grid) --- *\/\r\n @media (min-width: 1024px) {\r\n .zk-acc-widget { padding: 5rem 1.5rem; }\r\n .zk-acc-widget h3 { font-size: 1.5rem; }\r\n\r\n .zk-interleaved-layout {\r\n display: grid;\r\n \/* Grid Definition: Buttons links (fixer\/flexibler Anteil), Content rechts *\/\r\n grid-template-columns: 5fr 7fr; \r\n gap: 0;\r\n column-gap: 4rem;\r\n align-items: start;\r\n \/* Wichtig: Grid Auto Rows sorgt daf\u00fcr, dass die Buttons ihren Platz finden *\/\r\n grid-auto-rows: min-content;\r\n }\r\n }\r\n\r\n \/* --- Hintergrund Karte (Nur Desktop) --- *\/\r\n .zk-desktop-bg-card {\r\n display: none; \/* Mobil ausblenden *\/\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-desktop-bg-card {\r\n display: block;\r\n grid-column: 2; \/* Rechte Spalte *\/\r\n \/* WICHTIG: Erstreckt sich \u00fcber alle Zeilen, passt sich aber dem Grid-Inhalt an *\/\r\n grid-row: 1 \/ 100; \r\n background: #ffffff;\r\n border-radius: 1rem;\r\n box-shadow: var(--zk-shadow-xl);\r\n border: 1px solid var(--zk-slate-100);\r\n position: relative;\r\n min-height: 400px; \/* Mindesth\u00f6he, w\u00e4chst aber mit *\/\r\n height: 100%; \/* F\u00fcllt die Zelle komplett aus *\/\r\n z-index: 0;\r\n }\r\n }\r\n\r\n \/* Deko-Element (Blob) *\/\r\n .zk-deco-blob {\r\n position: absolute; \r\n top: 0; \r\n right: 0; \r\n width: 8rem; \r\n height: 8rem;\r\n background: linear-gradient(to bottom left, var(--zk-lime-200), transparent);\r\n border-bottom-left-radius: 100%; \r\n opacity: 0.5;\r\n pointer-events: none;\r\n }\r\n\r\n \/* --- Buttons --- *\/\r\n .zk-tab-btn {\r\n width: 100%; \r\n text-align: left; \r\n padding: 1rem 1.25rem;\r\n border-radius: 0.5rem;\r\n background: #ffffff; \r\n border: 1px solid var(--zk-slate-100);\r\n color: var(--zk-slate-700); \r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center;\r\n cursor: pointer; \r\n transition: all 0.2s ease;\r\n white-space: normal; \r\n line-height: 1.4;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* Desktop spezifische Positionierung der Buttons *\/\r\n @media (min-width: 1024px) {\r\n .zk-tab-btn {\r\n grid-column: 1; \/* Linke Spalte *\/\r\n margin-bottom: 0.5rem;\r\n }\r\n }\r\n\r\n .zk-tab-btn:hover { \r\n background-color: var(--zk-lime-50); \r\n color: var(--zk-lime-600); \r\n transform: translateX(4px);\r\n }\r\n\r\n .zk-tab-btn.active {\r\n background-color: var(--zk-lime-500); \r\n color: #ffffff; \r\n border-color: var(--zk-lime-500);\r\n box-shadow: var(--zk-shadow-lg);\r\n }\r\n \r\n @media (min-width: 1024px) {\r\n .zk-tab-btn.active {\r\n transform: scale(1.02);\r\n }\r\n }\r\n \r\n .zk-tab-btn svg {\r\n width: 18px; height: 18px;\r\n min-width: 18px;\r\n margin-left: 10px;\r\n transition: 0.2s;\r\n }\r\n \r\n \/* Mobil: Pfeil drehen wenn aktiv *\/\r\n @media (max-width: 1023px) {\r\n .zk-tab-btn.active svg {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n\r\n \/* --- Content Panels --- *\/\r\n .zk-tab-content { \r\n display: none; \/* Standardm\u00e4\u00dfig zu *\/\r\n background: white;\r\n padding: 1.5rem;\r\n border-radius: 0 0 0.5rem 0.5rem;\r\n border: 1px solid var(--zk-slate-100);\r\n border-top: none;\r\n margin-top: -0.5rem; \/* Andocken an Button mobil *\/\r\n margin-bottom: 0.5rem;\r\n animation: zkFadeIn 0.4s ease;\r\n }\r\n\r\n .zk-tab-content.active { display: block; }\r\n\r\n \/* DESKTOP: Content in die rechte Karte verschieben *\/\r\n @media (min-width: 1024px) {\r\n .zk-tab-content {\r\n \/* Content in rechte Spalte zwingen *\/\r\n grid-column: 2; \r\n grid-row: 1 \/ 100; \/* Muss mit der Card \u00fcbereinstimmen *\/\r\n \r\n \/* Visuelle Resets, da die Hintergrundkarte (.zk-desktop-bg-card) das Styling \u00fcbernimmt *\/\r\n background: transparent;\r\n border: none;\r\n padding: 3rem;\r\n margin: 0;\r\n z-index: 2; \/* \u00dcber der Hintergrundkarte *\/\r\n \r\n \/* FIX: Wir nutzen hier display:none (via Klasse active geregelt) \r\n statt Opacity, damit die Grid-H\u00f6he sich anpasst! *\/\r\n }\r\n\r\n \/* Animation f\u00fcr Desktop *\/\r\n .zk-tab-content.active {\r\n display: block;\r\n animation: zkFadeInDesktop 0.5s ease forwards;\r\n }\r\n }\r\n \r\n @keyframes zkFadeIn { \r\n from { opacity: 0; transform: translateY(10px); } \r\n to { opacity: 1; transform: translateY(0); } \r\n }\r\n \r\n @keyframes zkFadeInDesktop { \r\n from { opacity: 0; transform: translateY(5px); } \r\n to { opacity: 1; transform: translateY(0); } \r\n }\r\n\r\n \/* --- Externe Link Buttons (Footer) - UPDATED --- *\/\r\n .zk-badges-container {\r\n margin-top: 2.5rem; \r\n display: flex; \r\n flex-wrap: wrap; \r\n gap: 1rem;\r\n z-index: 1;\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-badges-container {\r\n grid-column: 1; \/* Linke Spalte, unter den Buttons *\/\r\n }\r\n }\r\n \r\n .zk-link-badge {\r\n display: inline-flex; \r\n align-items: center;\r\n padding: 0.75rem 1.25rem;\r\n \/* FIX: !important um Elementor Styles zu \u00fcberschreiben *\/\r\n color: #ffffff !important;\r\n font-size: 0.8rem; \r\n font-weight: 700; \r\n text-transform: uppercase; \r\n letter-spacing: 0.05em;\r\n border-radius: 9999px;\r\n text-decoration: none !important; \/* Elementor Unterstreichungen entfernen *\/\r\n background-color: #84CC15; \r\n line-height: 1.2;\r\n box-shadow: var(--zk-shadow-md);\r\n border: 1px solid rgba(255,255,255,0.2);\r\n white-space: normal;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden; \r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); \r\n }\r\n \r\n .zk-link-badge::after {\r\n content: '\u2197';\r\n margin-left: 0.5rem;\r\n font-size: 1em;\r\n line-height: 1;\r\n }\r\n\r\n \/* Glanz-Effekt (Shine) Element *\/\r\n .zk-link-badge::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 50%;\r\n height: 100%;\r\n background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: skewX(-20deg);\r\n transition: 0s;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Hover Animation: Bewegung + Farbwechsel *\/\r\n .zk-link-badge:hover {\r\n transform: translateY(-4px) scale(1.02);\r\n background-color: var(--zk-lime-600); \/* NEU: Button wird dunkler *\/\r\n box-shadow: 0 10px 20px -5px rgba(101, 163, 13, 0.6); \/* Schatten passend zur neuen Farbe *\/\r\n opacity: 1;\r\n color: #ffffff !important; \/* Sicherheitshalber auch beim Hover *\/\r\n }\r\n\r\n \/* Glanz fliegt r\u00fcber beim Hover *\/\r\n .zk-link-badge:hover::before {\r\n left: 150%;\r\n transition: 0.7s ease-in-out;\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT (Interleaved Structure) -->\r\n <h2>Zertifizierungsprozess & Gesetzgebung<\/h2>\r\n\r\n <div class=\"zk-interleaved-layout\">\r\n \r\n <!-- Desktop Background Card (Empty container for visuals) -->\r\n <div class=\"zk-desktop-bg-card\">\r\n <div class=\"zk-deco-blob\"><\/div>\r\n <\/div>\r\n\r\n <!-- ITEM 0 (NEU: EmpCo Richtlinie) -->\r\n <button class=\"zk-tab-btn active\" onclick=\"zkSwitchTab(0)\">\r\n <span>Neue Gesetzeslage ab 2026: EmpCo-Richtlinie<\/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>Neue gesetzliche Marktsituation: Die EmpCo-Richtlinie tritt am 27. September 2026 vollst\u00e4ndig in Kraft<\/h3>\r\n <p>Mit dem Inkrafttreten der EU-EmpCo-Richtlinie (Empowering Consumers for the Green Transition) ver\u00e4ndert sich der Markt f\u00fcr \u00f6kologische Produktangaben grundlegend. Ab dem 27. September 2026 sind Umwelt- und Nachhaltigkeitsaussagen streng reguliert.<\/p>\r\n <p>Aussagen wie \u201ekompostierbar\u201c, \u201ebiologisch abbaubar\u201c, \u201eumweltfreundlich\u201c oder \u201eCO\u2082-neutral\u201c d\u00fcrfen k\u00fcnftig nur noch verwendet werden, wenn sie durch unabh\u00e4ngige, nachpr\u00fcfbare Nachweise belegt sind.<\/p>\r\n \r\n <p><strong>F\u00fcr Hersteller bedeutet das:<\/strong><\/p>\r\n <ul>\r\n <li>Selbstbehauptungen (\u201eself claims\u201c) ohne Pr\u00fcfung sind verboten.<\/li>\r\n <li>Umweltlogos und Labels m\u00fcssen staatlich anerkannt oder streng zertifiziert sein.<\/li>\r\n <li>Fehlende Belege k\u00f6nnen zu Bu\u00dfgeldern, Abmahnungen und Marktverboten f\u00fchren.<\/li>\r\n <li>Nur unabh\u00e4ngige Zertifizierungsstellen d\u00fcrfen die Echtheit solcher Claims best\u00e4tigen.<\/li>\r\n <\/ul>\r\n <p>Damit entstehen neue Marktanforderungen \u2013 und gleichzeitig ein hohes Risiko f\u00fcr Unternehmen, die weiterhin mit \u00f6kologischen Aussagen werben m\u00f6chten.<\/p>\r\n \r\n <br>\r\n \r\n <h3 style=\"border:none; margin-bottom: 0.5rem; color: var(--zk-lime-600);\">Warum ZERKOM\u00ae jetzt entscheidend ist<\/h3>\r\n <p>ZERKOM\u00ae ist die einzig staatlich anerkannte Zertifizierungsstelle in Deutschland und Europa, die die Garantie \u201e100 % kompostierbar\u201c mit einer offiziellen, \u00fcberpr\u00fcften Gew\u00e4hrleistungsmarke best\u00e4tigt. Allein diese Art der Zertifizierung erf\u00fcllt die Anforderungen der neuen EmpCo-Richtlinie vollst\u00e4ndig.<\/p>\r\n \r\n <p><strong>F\u00fcr Hersteller bringt das entscheidende Vorteile:<\/strong><\/p>\r\n <!-- Liste ohne Standard-Bullets f\u00fcr die Haken -->\r\n <ul style=\"list-style-type: none; padding-left: 0;\">\r\n <li>\u2714 <strong>Rechtssichere Aussage \u201e100 % kompostierbar\u201c<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Nur mit der ZERKOM\u00ae-Zertifizierung darf diese Aussage k\u00fcnftig weiterhin \u00f6ffentlich verwendet werden.<\/span><\/li>\r\n <li>\u2714 <strong>Schutz vor Abmahnungen und Marktverboten<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Siegel ohne unabh\u00e4ngige Pr\u00fcfung sind k\u00fcnftig verboten. ZERKOM\u00ae verhindert dieses Risiko.<\/span><\/li>\r\n <li>\u2714 <strong>Offizielle Pr\u00fcfprozesse gem\u00e4\u00df EU-Vorgaben<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Dokumentiert in einem rechtskonformen Verfahren, das die EmpCo vollst\u00e4ndig erf\u00fcllt.<\/span><\/li>\r\n <li>\u2714 <strong>Wettbewerbsvorteil ab 2026<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Hersteller mit ZERKOM\u00ae-Siegel k\u00f6nnen auch nach dem Stichtag weiterhin glaubw\u00fcrdig werben.<\/span><\/li>\r\n <\/ul>\r\n \r\n <p style=\"margin-top: 1.5rem; font-weight: 600;\">ZERKOM\u00ae ist die L\u00f6sung f\u00fcr die neue Gesetzeslage. Mit ZERKOM\u00ae erh\u00e4lt Ihr Produkt ein anerkanntes Pr\u00fcfsiegel und die Erlaubnis, weiterhin sicher zu werben.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 1 (Vorher Item 0) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(1)\">\r\n <span>R\u00fcckblick: Marktsituation seit dem 17.01.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>Neue Marktsituation seit dem 17.01.2024<\/h3>\r\n <p><strong>EU-Gesetz zur Einschr\u00e4nkung von Greenwashing<\/strong><br>Mit dem Inkrafttreten des neuen EU-Gesetzes zur Einschr\u00e4nkung von Greenwashing am 17. Januar 2024 wird die Notwendigkeit deutlich erkennbarer Garantieinformationen und die Einf\u00fchrung eines neuen Etiketts f\u00fcr Garantien, die \u00fcber gesetzliche Gew\u00e4hrleistungen hinausgehen, vorgeschrieben.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 2 (Vorher Item 1) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(2)\">\r\n <span>ZERKOM\u00ae bietet Sicherheit<\/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 bietet Sicherheit<\/h3>\r\n <p>Das ZERKOM\u00ae Nachhaltigkeitssiegel in Form einer Gew\u00e4hrleistungsmarke ist einzigartig und schlie\u00dft die Schutzl\u00fccke f\u00fcr Qualit\u00e4tssiegel. W\u00e4hrend herk\u00f6mmliche G\u00fctesiegel lediglich eine Momentaufnahme zum Zeitpunkt der Pr\u00fcfung darstellen, bietet ZERKOM\u00ae eine dauerhafte und rechtlich bindende Garantie bzw. Gew\u00e4hrleistung f\u00fcr Produkteigenschaften.<br><br>Mit den neuen Richtlinien, Verordnungen und Gesetzen der vergangenen Jahre zeichnet sich ein eindeutiger Trend ab: Plastik und Greenwashing werden in Zukunft zunehmend intensiv bek\u00e4mpft. Weitere, striktere Gesetze werden folgen und stellen f\u00fcr betroffene Unternehmen und ihre operative sowie strategische Planung ein unkalkulierbares Risiko dar. Fragw\u00fcrdige Nachhaltigkeitssiegel bzw. Greenwashing k\u00f6nnen das Image nachhaltig sch\u00e4digen, zum Verlust von Kunden sowie finanziellen Einbu\u00dfen und sogar zu rechtlichen Folgen f\u00fchren.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 3 (Vorher Item 2) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(3)\">\r\n <span>Vorteile des ZERKOM\u00ae Nachhaltigkeitssiegels<\/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>Vorteile des ZERKOM\u00ae Nachhaltigkeitssiegels<\/h3>\r\n <!-- FLIESSTEXT -->\r\n <p>Das ZERKOM\u00ae Siegel bietet Unternehmen die M\u00f6glichkeit, sich mit einem echten gr\u00fcnen Nachhaltigkeitssiegel von der Konkurrenz abzuheben und bietet Vorteile f\u00fcr alle involvierten Akteure \u2013 vom Hersteller \u00fcber Wiederverk\u00e4ufer bis hin zum Endverbraucher. Dies f\u00fchrt zu positiver Berichterstattung, Zuspruch von Verbrauchern sowie zu einem positiven Imagetransfer von ZERKOM\u00aes kompromisslos gr\u00fcnem Nachhaltigkeitssiegel auf das entsprechende Unternehmen.<\/p>\r\n <p>Verbraucher haben erstmals Sicherheit mit einem Nachhaltigkeitssiegel, das Produkteigenschaften rechtlich bindend garantiert. Als einziges Nachhaltigkeitssiegel f\u00fcr 100% kompostierbare Produkte und Verpackungen entspricht ZERKOM\u00ae bereits jetzt den neuen EU-Richtlinien und bietet Unternehmen somit schon heute Planungssicherheit f\u00fcr die kommenden Jahre und Gesetze.<\/p>\r\n \r\n <!-- PUNKTE \/ CHECKLISTE -->\r\n <ul style=\"list-style-type: none; padding-left: 0; margin-top: 1.5rem;\">\r\n <li>\u2714 <strong>Rechtssichere Aussage \u201e100 % kompostierbar\u201c<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Nur mit der ZERKOM\u00ae-Zertifizierung darf diese Aussage k\u00fcnftig weiterhin \u00f6ffentlich verwendet werden.<\/span><\/li>\r\n <li>\u2714 <strong>Schutz vor Abmahnungen und Marktverboten<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Siegel ohne unabh\u00e4ngige Pr\u00fcfung sind k\u00fcnftig verboten. ZERKOM\u00ae verhindert dieses Risiko.<\/span><\/li>\r\n <li>\u2714 <strong>Offizielle Pr\u00fcfprozesse gem\u00e4\u00df EU-Vorgaben<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Unsere Zertifizierung dokumentiert die Kompostierbarkeit in einem rechtskonformen Verfahren.<\/span><\/li>\r\n <li>\u2714 <strong>Wettbewerbsvorteil ab 2026<\/strong><br><span style=\"font-size: 0.9em; opacity: 0.8;\">Hersteller mit ZERKOM\u00ae-Siegel k\u00f6nnen auch nach dem Stichtag glaubw\u00fcrdig werben.<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <!-- ITEM 4 (Vorher Item 3) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(4)\">\r\n <span>Die Marke \u201c100% Kompostierbar\u201d \u00fcbernimmt Garantie<\/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>Die Marke \u201c100% Kompostierbar\u201d \u00fcbernimmt Garantie<\/h3>\r\n <p>Bekannt sind bereits der Gr\u00fcne Punkt und der Gr\u00fcne Knopf. Nun gibt es auch die Marke \u201c100% Kompostierbar\u201d, erm\u00f6glicht durch das Markenrechtsmodernisierungsgesetz, das am 14. Januar 2020 in Kraft getreten ist. Dieses Gesetz hat mit der \u201cGew\u00e4hrleistungsmarke\u201d eine neue Markenkategorie geschaffen. Dadurch k\u00f6nnen nun Zeichen angemeldet werden, mit denen ein Markeninhaber die Gew\u00e4hr f\u00fcr bestimmte Eigenschaften der Waren und Dienstleistungen anderer Anbieter \u00fcbernimmt.<\/p>\r\n <p>Im Gegensatz zur Herkunftsfunktion bei der Individualmarke hat die Gew\u00e4hrleistungsmarke eine Garantiefunktion. Eine gewisse Neutralit\u00e4t des Gew\u00e4hrleistungsmarkeninhabers wird dadurch erreicht, dass er die Waren und Dienstleistungen, f\u00fcr deren Beschaffenheit er die Gew\u00e4hr tr\u00e4gt, nicht selbst anbieten darf. Eigene Qualit\u00e4tssiegel, wie sie beispielsweise manche Supermarktketten verwenden, k\u00f6nnen somit nicht als Gew\u00e4hrleistungsmarke gesch\u00fctzt werden. Die genauen Regeln zu seiner Marke muss der Gew\u00e4hrleistungsmarkeninhaber in einer Satzung festlegen.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 5 (Vorher Item 4) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(5)\">\r\n <span>Schutzl\u00fccke f\u00fcr Qualit\u00e4tssiegel geschlossen<\/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>Schutzl\u00fccke f\u00fcr Qualit\u00e4tssiegel geschlossen<\/h3>\r\n <p>Bisher lie\u00dfen sich selbst objektive Qualit\u00e4tssiegel nur sehr eingeschr\u00e4nkt als Marke sch\u00fctzen. Eine Individualmarke ist \u2013 anschaulich ausgedr\u00fcckt \u2013 der Name eines Produkts eines bestimmten Herstellers. Qualit\u00e4tssiegel werden jedoch auf Produkten unterschiedlicher Hersteller angebracht, wenn diese die geforderte Qualit\u00e4t erf\u00fcllen. Damit sind sie keine Marken im herk\u00f6mmlichen Sinn.<\/p>\r\n <p>Auch wenn einzelne Qualit\u00e4tssiegel als Marke eingetragen wurden, konnten sie rechtlich gesehen nicht als solche benutzt werden und wurden deshalb von den Gerichten nicht anerkannt. Die Gew\u00e4hrleistungsmarke schlie\u00dft damit eine Schutzl\u00fccke bei der Registrierung solcher Siegel.<\/p>\r\n <p>Die Marke \u201c100% Kompostierbar\u201d nutzt diese neue M\u00f6glichkeit und bietet Unternehmen sowie Verbrauchern Sicherheit durch ein Nachhaltigkeitssiegel, das Produkteigenschaften rechtlich bindend garantiert. Als einziges Nachhaltigkeitssiegel f\u00fcr 100% kompostierbare Produkte und Verpackungen entspricht es bereits jetzt den neuen EU-Richtlinien und bietet Unternehmen somit schon heute Planungssicherheit f\u00fcr die kommenden Jahre und Gesetze.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 6 (Vorher Item 5) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(6)\">\r\n <span>Was sind Gew\u00e4hrleistungsmarken?<\/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>Was sind Gew\u00e4hrleistungsmarken?<\/h3>\r\n <p>Eine Gew\u00e4hrleistungsmarke ist eine besondere Art von Marke, die dazu dient, bestimmte Eigenschaften oder Qualit\u00e4tsmerkmale von Waren oder Dienstleistungen zu garantieren. Diese Marken werden nicht vom Hersteller der Produkte selbst verwendet, sondern von einer unabh\u00e4ngigen Stelle, die die Einhaltung bestimmter Standards \u00fcberpr\u00fcft und zertifiziert. Die Hauptfunktion einer Gew\u00e4hrleistungsmarke besteht darin, dem Verbraucher zu signalisieren, dass das Produkt oder die Dienstleistung bestimmten festgelegten Kriterien entspricht.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 7 (Vorher Item 6) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(7)\">\r\n <span>Konsequenz: G\u00fctesiegel<\/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>Konsequenz: G\u00fctesiegel<\/h3>\r\n <p>Ein G\u00fctesiegel ist ein sichtbares Zeichen (oft in Form eines Logos), das auf Produkten angebracht wird, um anzuzeigen, dass diese den durch die Gew\u00e4hrleistungsmarke festgelegten Standards entsprechen. Nur der Inhaber der Gew\u00e4hrleistungsmarke hat das Recht, dieses G\u00fctesiegel zu vergeben. Der Inhaber ist in der Regel eine unabh\u00e4ngige Organisation oder Institution, die regelm\u00e4\u00dfig Kontrollen durchf\u00fchrt, um sicherzustellen, dass die Produkte oder Dienstleistungen den festgelegten Anforderungen entsprechen.<\/p>\r\n <p>Mit den neuen Richtlinien, Verordnungen und Gesetzen der vergangenen Jahre zeichnet sich ein eindeutiger Trend ab: Plastik und Greenwashing werden in Zukunft zunehmend intensiv bek\u00e4mpft. Weitere, striktere Gesetze werden folgen und stellen f\u00fcr betroffene Unternehmen und ihre operative sowie strategische Planung ein unkalkulierbares Risiko dar. Fragw\u00fcrdige Nachhaltigkeitssiegel bzw. Greenwashing k\u00f6nnen das Image nachhaltig sch\u00e4digen, zum Verlust von Kunden sowie finanziellen Einbu\u00dfen und sogar zu rechtlichen Folgen f\u00fchren.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 8 (Vorher Item 7) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(8)\">\r\n <span>Unterschied zu einer Wortmarke oder Fantasiemarke<\/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>Unterschied zu einer Wortmarke oder Fantasiemarke<\/h3>\r\n <p><strong>Wortmarke:<\/strong> Eine Wortmarke besteht aus einem oder mehreren W\u00f6rtern und dient dazu, Waren oder Dienstleistungen eines Unternehmens von denen anderer Unternehmen zu unterscheiden. Sie sch\u00fctzt den spezifischen Namen oder Ausdruck und kann von ihrem Inhaber zur Kennzeichnung seiner eigenen Produkte verwendet werden.<\/p>\r\n <p><strong>Fantasiemarke:<\/strong> Eine Fantasiemarke ist eine spezielle Art der Wortmarke, bei der es sich um ein erfundenes Wort handelt, das keine direkte Bedeutung hat. Beispiele hierf\u00fcr sind Marken wie \u201cKodak\u201d oder \u201cXerox\u201d. Auch diese Marke dient zur Unterscheidung der Produkte eines Unternehmens von denen anderer Unternehmen.<\/p>\r\n <p>Im Gegensatz dazu dient eine Gew\u00e4hrleistungsmarke nicht prim\u00e4r zur Unterscheidung der Herkunft von Produkten verschiedener Unternehmen, sondern zur Best\u00e4tigung bestimmter Qualit\u00e4tsstandards.<\/p>\r\n <p>Verbraucher haben erstmals Sicherheit mit einem Nachhaltigkeitssiegel, das Produkteigenschaften rechtlich bindend garantiert. Als einziges Nachhaltigkeitssiegel f\u00fcr 100% kompostierbare Produkte und Verpackungen entspricht ZERKOM\u00ae bereits jetzt den neuen EU-Richtlinien und bietet Unternehmen somit schon heute Planungssicherheit f\u00fcr die kommenden Jahre und Gesetze.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 9 (Vorher Item 8) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(9)\">\r\n <span>Gew\u00e4hrleistungsmarke \u201c100% Kompostierbare Verpackungen & Produkte\u201d<\/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>Gew\u00e4hrleistungsmarke \u201c100% Kompostierbare Verpackungen & Produkte\u201d<\/h3>\r\n <p>Die Gew\u00e4hrleistungsmarke \u201c100% Kompostierbare Verpackungen & Produkte\u201d w\u00fcrde bedeuten, dass alle Verpackungen & Produkte mit diesem G\u00fctesiegel vollst\u00e4ndig kompostierbar sind und somit bestimmten Umweltstandards entsprechen. Diese Marke garantiert dem Verbraucher:<\/p>\r\n <ul>\r\n <li><strong>Umweltfreundlichkeit:<\/strong> Die Verpackungen & Produkte sind so konzipiert, dass sie unter bestimmten Bedingungen vollst\u00e4ndig biologisch abgebaut werden k\u00f6nnen.<\/li>\r\n <li><strong>Qualit\u00e4tskontrolle:<\/strong> Die Einhaltung dieser Standards wird regelm\u00e4\u00dfig durch den Inhaber der Gew\u00e4hrleistungsmarke \u00fcberpr\u00fcft.<\/li>\r\n <li><strong>Vertrauen:<\/strong> Verbraucher k\u00f6nnen darauf vertrauen, dass Produkte mit diesem G\u00fctesiegel tats\u00e4chlich umweltfreundlich sind.<\/li>\r\n <\/ul>\r\n <p>Nur der Inhaber dieser Gew\u00e4hrleistungsmarke hat das Recht, das G\u00fctesiegel \u201c100% Kompostierbare Verpackungen & Produkte\u201d an Hersteller zu vergeben, deren Produkte den festgelegten Kriterien entsprechen. Dies stellt sicher, dass nur gepr\u00fcfte und zertifizierte Produkte dieses Siegel tragen d\u00fcrfen.<\/p>\r\n <p>Zusammengefasst bietet eine Gew\u00e4hrleistungsmarke wie \u201c100% Kompostierbare Verpackungen & Produkte\u201d Verbrauchern Sicherheit und Vertrauen in die Qualit\u00e4t und Umweltfreundlichkeit der gekennzeichneten Produkte.<\/p>\r\n <p>Im Gegensatz zur Herkunftsfunktion bei der Individualmarke hat die Gew\u00e4hrleistungsmarke eine Garantiefunktion. Eine gewisse Neutralit\u00e4t des Gew\u00e4hrleistungsmarkeninhabers wird dadurch erreicht, dass er die Waren und Dienstleistungen, f\u00fcr deren Beschaffenheit er die Gew\u00e4hr tr\u00e4gt, nicht selbst anbieten darf. Eigene Qualit\u00e4tssiegel, wie sie beispielsweise manche Supermarktketten verwenden, k\u00f6nnen somit nicht als Gew\u00e4hrleistungsmarke gesch\u00fctzt werden. Die genauen Regeln zu seiner Marke muss der Gew\u00e4hrleistungsmarkeninhaber in einer Satzung festlegen.<\/p>\r\n <\/div>\r\n\r\n <!-- ITEM 10 (Vorher Item 9) -->\r\n <button class=\"zk-tab-btn\" onclick=\"zkSwitchTab(10)\">\r\n <span>Vorteile der Zertifizierung<\/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>Vorteile der Zertifizierung<\/h3>\r\n <p>Die Zertifizierung von 100 % kompostierbaren Verpackungen & Produkten durch ZERKOM\u00ae bietet Unternehmen nicht nur die M\u00f6glichkeit, Kundenvertrauen aufzubauen, sondern zeigt auch deren Engagement f\u00fcr Nachhaltigkeit. Unsere Gew\u00e4hrleistungsmarken stehen f\u00fcr gepr\u00fcfte Qualit\u00e4t und Umweltfreundlichkeit.<\/p>\r\n <p>Auch wenn einzelne Qualit\u00e4tssiegel als Marke eingetragen wurden, konnten sie rechtlich gesehen nicht als solche benutzt werden und wurden deshalb von den Gerichten nicht anerkannt. Die Gew\u00e4hrleistungsmarke schlie\u00dft damit eine Schutzl\u00fccke bei der Registrierung solcher Siegel.<\/p>\r\n <p>Die Marke \u201c100% Kompostierbar\u201d nutzt diese neue M\u00f6glichkeit und bietet Unternehmen sowie Verbrauchern Sicherheit durch ein Nachhaltigkeitssiegel, das Produkteigenschaften rechtlich bindend garantiert. Als einziges Nachhaltigkeitssiegel f\u00fcr 100% kompostierbare Produkte und Verpackungen entspricht es bereits jetzt den neuen EU-Richtlinien und bietet Unternehmen somit schon heute Planungssicherheit f\u00fcr die kommenden Jahre und Gesetze.<\/p>\r\n <\/div>\r\n\r\n <!-- EXTERNAL LINKS (Immer ganz unten) - UPDATED CLASS NAMES -->\r\n <div class=\"zk-badges-container\">\r\n <a href=\"https:\/\/www.europarl.europa.eu\/news\/de\/press-room\/20240112IPR16772\/parlament-nimmt-verbot-von-grunfarberei-und-irrefuhrender-produktinformation-an\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">Pressemitteilung Europ\u00e4isches Parlament<\/a>\r\n <a href=\"https:\/\/www.umweltbundesamt.de\/sites\/default\/files\/medien\/376\/dokumente\/impulsvortrag_jutta_figge.pdf\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">Bundesministerium der Justiz und Verbraucherschutz<\/a>\r\n <a href=\"https:\/\/www.dpma.de\/marken\/markenschutz\/mamog\/gewaehrleistungsmarke\/index.html\" target=\"_blank\" class=\"zk-link-badge\" rel=\"noopener\">Deutsches Patent- und Markenamt<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- SCRIPT -->\r\n <script>\r\n function zkSwitchTab(index) {\r\n \/\/ 1. Buttons aktualisieren\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\r\n \/\/ 2. Content aktualisieren\r\n const contents = document.querySelectorAll('.zk-tab-content');\r\n contents.forEach(content => content.classList.remove('active'));\r\n \r\n const targetContent = document.getElementById('zk-tab-' + index);\r\n if(targetContent) {\r\n targetContent.classList.add('active');\r\n }\r\n }\r\n <\/script>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4b55c0 elementor-widget elementor-widget-html\" data-id=\"b4b55c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\nfunction zkSwitchTab(index) {\r\n \/\/ 1. Alle Buttons zur\u00fccksetzen (Klasse 'active' entfernen)\r\n const buttons = document.querySelectorAll('.zk-tab-btn');\r\n buttons.forEach(btn => btn.classList.remove('active'));\r\n \r\n \/\/ 2. Geklickten Button aktivieren\r\n \/\/ Da die Buttons keine ID haben, nutzen wir die Reihenfolge (Index), \r\n \/\/ um sicherzugehen, dass wir den richtigen erwischen, falls das Script mehrfach genutzt w\u00fcrde.\r\n \/\/ Hier gehen wir davon aus, dass die Reihenfolge der Buttons den Indizes 0-9 entspricht.\r\n if(buttons[index]) {\r\n buttons[index].classList.add('active');\r\n }\r\n\r\n \/\/ 3. Alle Content-Bereiche verstecken\r\n const contents = document.querySelectorAll('.zk-tab-content');\r\n contents.forEach(content => content.classList.remove('active'));\r\n \r\n \/\/ 4. Den gew\u00fcnschten Content anzeigen\r\n const targetContent = document.getElementById('zk-tab-' + index);\r\n if(targetContent) {\r\n targetContent.classList.add('active');\r\n \r\n \/\/ Optional: Bei Mobile zum Inhalt scrollen, damit der User sieht, dass sich was ge\u00e4ndert hat\r\n if(window.innerWidth < 1024) {\r\n targetContent.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n }\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9662671 e-con-full e-flex e-con e-parent\" data-id=\"9662671\" data-element_type=\"container\" data-e-type=\"container\" id=\"video\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-809517a elementor-widget elementor-widget-html\" data-id=\"809517a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom Video Widget<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-video-widget\">\r\n\r\n <!-- STYLES (Isoliert & Responsive) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* VORSCHAU-HELFER *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #0f172a; \r\n }\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-video-widget {\r\n \/* LOKALE VARIABLEN *\/\r\n --zk-v-lime-400: #a3e635;\r\n --zk-v-lime-500: #84cc16; \/* Primary *\/\r\n --zk-v-lime-600: #65a30d;\r\n \r\n --zk-v-slate-300: #cbd5e1;\r\n --zk-v-slate-400: #94a3b8;\r\n --zk-v-slate-900: #0f172a; \/* Dunkler Hintergrund *\/\r\n \r\n --zk-v-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 \/ 0.25);\r\n \r\n \/* Basis Einstellungen f\u00fcr diesen Block - DSGVO Konform *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n color: #ffffff;\r\n background-color: var(--zk-v-slate-900);\r\n width: 100%;\r\n box-sizing: border-box;\r\n position: relative;\r\n overflow: hidden; \r\n }\r\n\r\n \/* Reset f\u00fcr Elemente innerhalb des Widgets *\/\r\n .zk-video-widget *, \r\n .zk-video-widget *::before, \r\n .zk-video-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .zk-video-widget h2,\r\n .zk-video-widget p,\r\n .zk-video-widget img,\r\n .zk-video-widget iframe {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* --- Typografie --- *\/\r\n .zk-video-widget h2 { \r\n margin-bottom: 1.5rem; \r\n font-weight: 700; \r\n line-height: 1.1; \r\n \/* Responsive Schriftgr\u00f6\u00dfe: Min 2rem, Max 3rem *\/\r\n font-size: clamp(2rem, 5vw, 3rem); \r\n color: white;\r\n }\r\n\r\n .zk-video-widget p { \r\n margin-bottom: 1.5rem; \r\n color: var(--zk-v-slate-300); \r\n font-size: 1.125rem; \r\n line-height: 1.6; \r\n }\r\n\r\n \/* --- Layout & Container --- *\/\r\n .zk-video-widget .zk-section-padding { \r\n padding: 5rem 0; \/* Innenabstand oben\/unten *\/\r\n }\r\n\r\n .zk-video-widget .zk-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 1.5rem;\r\n position: relative;\r\n z-index: 5; \/* \u00dcber den Blobs *\/\r\n }\r\n\r\n \/* Grid System *\/\r\n .zk-video-widget .zk-grid-2 { \r\n display: grid; \r\n gap: 3rem; \r\n align-items: center;\r\n grid-template-columns: 1fr; \/* Standard: 1 Spalte (Mobile) *\/\r\n }\r\n \r\n @media (min-width: 1024px) {\r\n .zk-video-widget .zk-grid-2 { \r\n grid-template-columns: 1fr 1fr; \/* Desktop: 2 Spalten *\/\r\n gap: 5rem; \r\n }\r\n }\r\n\r\n \/* --- Dark Feature Box --- *\/\r\n .zk-video-widget .zk-dark-feature {\r\n display: flex; \r\n align-items: center; \r\n gap: 1rem;\r\n background: rgba(255,255,255,0.05);\r\n padding: 1rem 1.25rem; \r\n border-radius: 0.75rem;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n backdrop-filter: blur(4px);\r\n margin-top: 2rem;\r\n max-width: 100%;\r\n width: fit-content;\r\n }\r\n \r\n .zk-video-widget .zk-icon-group {\r\n display: flex; \r\n color: var(--zk-v-lime-400); \/* Sterne Farbe *\/\r\n flex-shrink: 0;\r\n gap: 2px; \r\n }\r\n\r\n \/* --- Video Frame (STABLE VERSION) --- *\/\r\n .zk-video-widget .zk-video-frame {\r\n position: relative;\r\n width: 100%;\r\n height: 0;\r\n \/* Padding-Hack: 16:9 Verh\u00e4ltnis (9 \/ 16 * 100 = 56.25%) *\/\r\n \/* H\u00e4lt den Platz frei und verhindert Layout-Shifts *\/\r\n padding-bottom: 56.25%; \r\n \r\n border-radius: 1rem; \r\n overflow: hidden; \r\n box-shadow: var(--zk-v-shadow-2xl);\r\n border: 4px solid rgba(255, 255, 255, 0.1);\r\n background-color: #000;\r\n cursor: pointer;\r\n z-index: 10;\r\n }\r\n\r\n .zk-video-widget .zk-video-img {\r\n position: absolute; \/* WICHTIG f\u00fcr Padding-Hack *\/\r\n top: 0;\r\n left: 0;\r\n width: 100%; \r\n height: 100%; \r\n object-fit: cover; \r\n opacity: 0.8; \r\n transition: all 0.7s ease;\r\n display: block;\r\n z-index: 20; \/* Bild liegt \u00fcber dem schwarzen Hintergrund *\/\r\n }\r\n \r\n .zk-video-widget .zk-video-frame:has(.zk-play-circle):hover .zk-video-img { \r\n transform: scale(1.05); \r\n opacity: 0.6; \r\n }\r\n\r\n .zk-video-widget .zk-play-circle {\r\n position: absolute; \r\n inset: 0; \r\n display: flex; \r\n align-items: center; \r\n justify-content: center;\r\n pointer-events: none; \r\n transition: opacity 0.3s;\r\n z-index: 30; \/* Play Button \u00fcber dem Bild *\/\r\n }\r\n\r\n .zk-video-widget .zk-play-icon {\r\n width: 4rem; \r\n height: 4rem; \r\n background-color: var(--zk-v-lime-500); \r\n border-radius: 50%;\r\n display: flex; \r\n align-items: center; \r\n justify-content: center;\r\n box-shadow: 0 0 30px rgba(132, 204, 22, 0.6);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .zk-video-widget .zk-play-icon { width: 5rem; height: 5rem; }\r\n }\r\n \r\n .zk-video-widget .zk-video-frame:hover .zk-play-icon { \r\n transform: scale(1.1); \r\n background-color: var(--zk-v-lime-600);\r\n }\r\n\r\n \/* IFRAME STYLE *\/\r\n .zk-video-widget iframe {\r\n position: absolute; \r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n z-index: 25; \/* \u00dcber dem Hintergrund, ersetzt Bild *\/\r\n }\r\n\r\n \/* --- Background Blobs --- *\/\r\n .zk-video-widget .zk-blur-blob {\r\n position: absolute; \r\n border-radius: 50%; \r\n filter: blur(80px); \r\n pointer-events: none;\r\n z-index: 1;\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT -->\r\n <div class=\"zk-section-padding\" id=\"video\">\r\n \r\n <div class=\"zk-blur-blob\" style=\"top: -10%; right: -5%; width: 500px; height: 500px; background: var(--zk-v-lime-600); opacity: 0.15;\"><\/div>\r\n <div class=\"zk-blur-blob\" style=\"bottom: -10%; left: -5%; width: 400px; height: 400px; background: #166534; opacity: 0.2;\"><\/div>\r\n\r\n <div class=\"zk-container\">\r\n <div class=\"zk-grid-2\">\r\n \r\n <div>\r\n <h2>\r\n Warum kompostierbare <br>\r\n <span style=\"color: var(--zk-v-lime-400);\">Verpackungen & Produkte w\u00e4hlen?<\/span>\r\n <\/h2>\r\n <p>\r\n Kompostierbare Verpackungen & Produkte sind umweltfreundlich, reduzieren Abfall und f\u00f6rdern eine nachhaltige Entsorgung, wodurch sie eine ideale Wahl f\u00fcr Unternehmen und Verbraucher sind, die die Umwelt sch\u00fctzen m\u00f6chten.\r\n <\/p>\r\n \r\n <div class=\"zk-dark-feature\">\r\n <div class=\"zk-icon-group\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\r\n <\/div>\r\n <div style=\"margin-left: 1rem;\">\r\n <div style=\"font-weight: 700; font-size: 0.875rem; color: white; line-height: 1.2;\">Hervorragende L\u00f6sungen<\/div>\r\n <div style=\"font-size: 0.75rem; color: var(--zk-v-slate-400); margin-top: 2px;\">Zerkom bietet hervorragende L\u00f6sungen f\u00fcr nachhaltige Verpackungen & Produkte.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-video-frame\" onclick=\"zkLoadVideo(this)\" data-video-id=\"z-z7GjNNiwA\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-46-3.jpg\" class=\"zk-video-img\" alt=\"Video Thumbnail\">\r\n \r\n <div class=\"zk-play-circle\">\r\n <div class=\"zk-play-icon\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"none\"><path d=\"M5 3l14 9-14 9V3z\"\/><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SCRIPT ZUM LADEN DES VIDEOS -->\r\n <script>\r\n function zkLoadVideo(element) {\r\n var videoId = element.getAttribute('data-video-id');\r\n \r\n \/\/ FIX: DSGVO-Update: 'youtube-nocookie.com' statt 'youtube.com' verwenden.\r\n var iframeSrc = 'https:\/\/www.youtube-nocookie.com\/embed\/' + videoId + '?autoplay=1&mute=1&playsinline=1&controls=1&rel=0';\r\n \r\n element.innerHTML = '<iframe src=\"' + iframeSrc + '\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>';\r\n }\r\n <\/script>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d0786f e-con-full e-flex e-con e-parent\" data-id=\"4d0786f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-484aff1 elementor-widget elementor-widget-html\" data-id=\"484aff1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom About Widget<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-about-widget\">\r\n\r\n <!-- STYLES (Isoliert & Responsive) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* VORSCHAU-HELFER *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f0f0f0; \r\n }\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-about-widget {\r\n \/* LOKALE VARIABLEN *\/\r\n --zk-a-lime-500: #84cc16; \/* Primary *\/\r\n --zk-a-lime-600: #65a30d;\r\n \r\n --zk-a-slate-600: #475569;\r\n --zk-a-slate-900: #0f172a; \/* Dunkle \u00dcberschrift *\/\r\n \r\n --zk-a-shadow-lg: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\r\n \r\n \/* Basis Einstellungen - DSGVO Konform *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n color: var(--zk-a-slate-600);\r\n background-color: #ffffff;\r\n width: 100%;\r\n box-sizing: border-box;\r\n \r\n \/* \u00c4NDERUNG: Mobile Padding reduziert (1rem statt 1.5rem) f\u00fcr mehr Breite *\/\r\n padding: 4rem 0rem; \r\n position: relative;\r\n }\r\n \r\n @media (min-width: 768px) {\r\n \/* Ab Tablet wieder das Standard-Padding *\/\r\n .zk-about-widget { padding: 6rem 1.5rem; }\r\n }\r\n\r\n \/* Reset f\u00fcr Elemente innerhalb des Widgets *\/\r\n .zk-about-widget *, \r\n .zk-about-widget *::before, \r\n .zk-about-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .zk-about-widget h2,\r\n .zk-about-widget p,\r\n .zk-about-widget img {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* --- Container --- *\/\r\n .zk-about-widget .zk-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- Header Section (Grid 2 Spalten) --- *\/\r\n .zk-about-widget .zk-header-grid {\r\n display: grid;\r\n gap: 2rem;\r\n margin-bottom: 3rem;\r\n align-items: center;\r\n grid-template-columns: 1fr; \/* Mobile: Untereinander *\/\r\n }\r\n\r\n @media (min-width: 1024px) {\r\n .zk-about-widget .zk-header-grid {\r\n grid-template-columns: 1fr 1fr; \/* 50\/50 Split auf Desktop *\/\r\n gap: 4rem;\r\n margin-bottom: 4rem;\r\n }\r\n }\r\n\r\n \/* Typografie Header *\/\r\n .zk-about-widget .zk-eyebrow {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n color: var(--zk-a-lime-600);\r\n letter-spacing: 0.1em;\r\n margin-bottom: 0.75rem;\r\n text-transform: uppercase;\r\n \/* Border-Left Style *\/\r\n border-left: 4px solid var(--zk-a-lime-500);\r\n padding-left: 0.75rem;\r\n line-height: 1;\r\n }\r\n\r\n .zk-about-widget h2 {\r\n font-size: clamp(2rem, 5vw, 2.5rem); \/* Responsive Gr\u00f6\u00dfe *\/\r\n font-weight: 800;\r\n color: var(--zk-a-slate-900);\r\n line-height: 1.2;\r\n }\r\n\r\n .zk-about-widget p {\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n color: var(--zk-a-slate-600);\r\n }\r\n \r\n @media (min-width: 768px) {\r\n .zk-about-widget p { font-size: 1.125rem; }\r\n }\r\n\r\n \/* --- Images Grid (3 Spalten) --- *\/\r\n .zk-about-widget .zk-image-grid {\r\n display: grid;\r\n gap: 1.5rem;\r\n grid-template-columns: 1fr; \/* Mobile: 1 Spalte *\/\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .zk-about-widget .zk-image-grid {\r\n grid-template-columns: 1fr 1fr 1fr; \/* Tablet & Desktop: 3 Spalten *\/\r\n }\r\n }\r\n\r\n \/* Image Card Styles *\/\r\n .zk-about-widget .zk-image-card {\r\n height: 20rem; \/* Feste H\u00f6he f\u00fcr Einheitlichkeit *\/\r\n border-radius: 0.75rem;\r\n overflow: hidden;\r\n position: relative;\r\n box-shadow: var(--zk-a-shadow-lg);\r\n background-color: #f1f5f9; \/* Platzhalterfarbe beim Laden *\/\r\n }\r\n\r\n .zk-about-widget .zk-image-card img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n display: block;\r\n }\r\n\r\n \/* Hover Effekt *\/\r\n .zk-about-widget .zk-image-card:hover img {\r\n transform: scale(1.1);\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT -->\r\n <div class=\"zk-container\">\r\n \r\n <!-- Header Area -->\r\n <div class=\"zk-header-grid\">\r\n \r\n <!-- Linke Seite: Titel -->\r\n <div>\r\n <span class=\"zk-eyebrow\">\u00dcBER UNS<\/span>\r\n <h2>\r\n Wegweisend in zertifizierten <br>kompostierbaren Verpackungen & Produkten\r\n <\/h2>\r\n <\/div>\r\n \r\n <!-- Rechte Seite: Text -->\r\n <div>\r\n <p>\r\n Zerkom ist eine offiziell anerkannte Akkreditierungsstelle, die sich auf die Zertifizierung von 100 % kompostierbaren Verpackungen & Produkten spezialisiert hat. Unser Ziel ist es, Unternehmen dabei zu unterst\u00fctzen, ihre Verpackungen & Produkte umweltfreundlicher zu gestalten. Vertrauen Sie auf unsere Expertise und Erfahrung.\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Images Grid -->\r\n <div class=\"zk-image-grid\">\r\n \r\n <!-- Image 1 -->\r\n <div class=\"zk-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-42-1.jpg\" alt=\"Nachhaltige Verpackung Detail\">\r\n <\/div>\r\n \r\n <!-- Image 2 -->\r\n <div class=\"zk-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-42-2.jpg\" alt=\"Natur und Umwelt\">\r\n <\/div>\r\n \r\n <!-- Image 3 -->\r\n <div class=\"zk-image-card\">\r\n <img decoding=\"async\" src=\"https:\/\/zerkom.de\/wp-content\/uploads\/2025\/12\/technology-42-3.jpg\" alt=\"Moderne Verpackungsl\u00f6sungen\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9783478 e-con-full e-flex e-con e-parent\" data-id=\"9783478\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c3162b elementor-widget elementor-widget-html\" data-id=\"2c3162b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Zerkom FAQ Widget<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- WIDGET START -->\r\n<div class=\"zk-faq-widget\">\r\n\r\n <!-- STYLES (Isoliert & Responsive) -->\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n \/* VORSCHAU-HELFER *\/\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f0f0f0; \r\n }\r\n\r\n \/* --- Scope Wrapper --- *\/\r\n .zk-faq-widget {\r\n \/* LOKALE VARIABLEN *\/\r\n --zk-f-lime-500: #84cc16; \/* Primary *\/\r\n \/* NEU: Hellere Limetten-Farbe f\u00fcr Hintergr\u00fcnde *\/\r\n --zk-f-lime-50: #f7fee7;\r\n \r\n --zk-f-slate-100: #f1f5f9;\r\n --zk-f-slate-200: #e2e8f0;\r\n --zk-f-slate-600: #475569;\r\n --zk-f-slate-800: #1e293b;\r\n --zk-f-slate-900: #0f172a;\r\n \r\n \/* Basis Einstellungen - DSGVO Konform *\/\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n color: var(--zk-f-slate-600);\r\n background-color: #f8fafc; \/* Heller Hintergrund wie gew\u00fcnscht *\/\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 5rem 0rem;\r\n position: relative;\r\n }\r\n\r\n \/* Reset f\u00fcr Elemente innerhalb des Widgets *\/\r\n .zk-faq-widget *, \r\n .zk-faq-widget *::before, \r\n .zk-faq-widget *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .zk-faq-widget h2,\r\n .zk-faq-widget p,\r\n .zk-faq-widget summary {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* --- Container --- *\/\r\n .zk-faq-widget .zk-container {\r\n max-width: 800px; \/* Schmaler f\u00fcr bessere Lesbarkeit von Texten *\/\r\n margin: 0 auto;\r\n }\r\n\r\n \/* --- Headline --- *\/\r\n .zk-faq-widget h2 {\r\n text-align: center;\r\n font-size: clamp(1.75rem, 5vw, 2rem);\r\n font-weight: 800;\r\n color: var(--zk-f-slate-900);\r\n margin-bottom: 3rem;\r\n line-height: 1.2;\r\n }\r\n\r\n \/* --- FAQ Items (Details\/Summary) --- *\/\r\n .zk-faq-widget .zk-faq-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .zk-faq-widget details {\r\n background: white;\r\n border: 1px solid var(--zk-f-slate-200);\r\n border-radius: 0.75rem;\r\n overflow: hidden;\r\n \/* UPDATE: Elastische Transition f\u00fcr \"Bounce\"-Effekt *\/\r\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n \/* Hover Effekt auf die ganze Box *\/\r\n .zk-faq-widget details:hover {\r\n \/* UPDATE: Farbe beim Hover *\/\r\n border-color: var(--zk-f-lime-500);\r\n \/* UPDATE: Weicherer, farbiger Schatten *\/\r\n box-shadow: 0 4px 12px -2px rgba(132, 204, 22, 0.15);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Wenn ge\u00f6ffnet *\/\r\n .zk-faq-widget details[open] {\r\n \/* UPDATE: Farbe und Hintergrund wenn offen *\/\r\n border-color: var(--zk-f-lime-500);\r\n background-color: var(--zk-f-lime-50);\r\n box-shadow: 0 4px 12px -2px rgba(132, 204, 22, 0.15);\r\n }\r\n\r\n .zk-faq-widget summary {\r\n padding: 1.5rem;\r\n font-weight: 700;\r\n color: var(--zk-f-slate-800);\r\n cursor: pointer;\r\n list-style: none; \/* Standard Pfeil entfernen *\/\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n \/* UPDATE: Elastische Transition f\u00fcr Text *\/\r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n \/* UPDATE: Subtiler Skalierungs-Effekt beim Hover auf den Header *\/\r\n .zk-faq-widget summary:hover {\r\n color: var(--zk-f-slate-900);\r\n transform: scale(1.01);\r\n }\r\n\r\n \/* Webkit Fix um Pfeil zu entfernen *\/\r\n .zk-faq-widget summary::-webkit-details-marker {\r\n display: none;\r\n }\r\n\r\n \/* Icon Styling *\/\r\n .zk-faq-widget .zk-icon-plus {\r\n color: var(--zk-f-lime-500);\r\n font-size: 1.5rem;\r\n line-height: 1;\r\n font-weight: 400; \/* Leichter f\u00fcr das Plus *\/\r\n \/* UPDATE: Elastische Rotation *\/\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n user-select: none;\r\n \/* Kleiner Abstand nach rechts f\u00fcr bessere Optik *\/\r\n margin-left: 1rem;\r\n }\r\n\r\n \/* Icon Rotation wenn offen *\/\r\n .zk-faq-widget details[open] .zk-icon-plus {\r\n transform: rotate(45deg) scale(1.1); \/* Wird zum X und leicht gr\u00f6\u00dfer *\/\r\n }\r\n\r\n \/* Content Styling *\/\r\n .zk-faq-widget .zk-faq-content {\r\n padding: 0 1.5rem 1.5rem 1.5rem;\r\n color: var(--zk-f-slate-600);\r\n font-size: 0.875rem;\r\n line-height: 1.6;\r\n border-top: 1px solid var(--zk-f-slate-100);\r\n margin-top: -0.5rem; \/* Visuelle Korrektur *\/\r\n padding-top: 1rem;\r\n \/* UPDATE: Elastische Einblend-Animation *\/\r\n animation: zkFadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n }\r\n\r\n @keyframes zkFadeIn {\r\n from { opacity: 0; transform: translateY(-10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n <\/style>\r\n\r\n <!-- HTML CONTENT -->\r\n <div class=\"zk-container\">\r\n \r\n <h2>H\u00e4ufig gestellte Fragen<\/h2>\r\n\r\n <div class=\"zk-faq-list\">\r\n \r\n <!-- FAQ Item 1 -->\r\n <details open>\r\n <summary>\r\n Was bedeutet 100 % kompostierbar?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n 100% kompostierbar bedeutet, dass das Material vollst\u00e4ndig biologisch abgebaut werden kann und keine sch\u00e4dlichen R\u00fcckst\u00e4nde hinterl\u00e4sst. Um dies zu gew\u00e4hrleisten, m\u00fcssen umfangreiche Labortests durchgef\u00fchrt werden, einschlie\u00dflich eines Regenwurmtoxizit\u00e4tstests.\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 2 -->\r\n <details>\r\n <summary>\r\n Warum sollte ich meine Verpackungen oder Produkte zertifizieren lassen?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Um dem Gesetz gegen Greenwashing zu entsprechen und da es gem\u00e4\u00df der EU-Richtlinie nicht erlaubt ist, mit anderen Siegeln auf kompostierbare Verpackungen oder Produkte zu verweisen, beinhaltet der Zertifizierungsprozess die Ausstellung eines offiziellen Zertifikats und die Vergabe des G\u00fctesiegels. Durch die Zertifizierung Ihrer Verpackungen oder Produkte zeigen Sie Ihr Engagement f\u00fcr Nachhaltigkeit und gewinnen das Vertrauen Ihrer Kunden.\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 3 -->\r\n <details>\r\n <summary>\r\n Wie l\u00e4uft der Zertifizierungsprozess ab?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Der Zertifizierungsprozess umfasst eine umfassende Analyse Ihrer Verpackungen oder Produkte, umfangreiche Tests nach Ma\u00dfgabe der beim DPMA hinterlegten Gew\u00e4hrleistungsmarke sowie die Ausstellung eines offiziellen Zertifikats und die Vergabe des G\u00fctesiegels.\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 4 -->\r\n <details>\r\n <summary>\r\n Kosten einer Zertifizierung?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Bei Zerkom verstehen wir, dass die Zertifizierung Ihrer Verpackungen oder Produkte nachhaltig und kosteng\u00fcnstig sein sollte. Wir bieten transparente Preise, um sicherzustellen, dass Ihr Unternehmen die richtige Entscheidung trifft.\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 5 -->\r\n <details>\r\n <summary>\r\n Welche Schritte umfasst der Zertifizierungsprozess?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Der Zertifizierungsprozess bei Zerkom umfasst eine umfassende Analyse, Testung der Materialien, einschlie\u00dflich einer Labortest Regenwurm-Toxizit\u00e4tspr\u00fcfung, die Ausstellung des Zertifikats und die Vergabe des offiziellen G\u00fctesiegels. Durch die Zertifizierung Ihrer Verpackungen oder Produkte zeigen Sie Ihr Engagement f\u00fcr Nachhaltigkeit und gewinnen das Vertrauen Ihrer Kunden.\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 6 -->\r\n <details>\r\n <summary>\r\n Welche Anforderungen m\u00fcssen erf\u00fcllt werden?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Um den rechtlichen Anforderungen gerecht zu werden, m\u00fcssen die Richtlinien der beim DPMA hinterlegten Standards der Gew\u00e4hrleistungsmarke erf\u00fcllt sein. Eine Regenwurmkonformit\u00e4tspr\u00fcfung sowie die Verwendung von Agrabf\u00e4llen sind u.a. ebenfalls erforderlich.\r\n <\/div>\r\n <\/details>\r\n\r\n <!-- FAQ Item 7 -->\r\n <details>\r\n <summary>\r\n Was ist das Ziel des Zertifizierungsprozesses?\r\n <span class=\"zk-icon-plus\">+<\/span>\r\n <\/summary>\r\n <div class=\"zk-faq-content\">\r\n Der Zertifizierungsprozess hat zum Ziel, dem Gesetz gegen Greenwashing zu entsprechen. Ein Qualit\u00e4tssiegel zu vergeben, Sicherheit f\u00fcr Unternehmen zu bieten und die Einhaltung der Umweltauflagen sicherzustellen.\r\n <\/div>\r\n <\/details>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n<!-- WIDGET ENDE -->\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e40913f e-con-full e-flex e-con e-parent\" data-id=\"e40913f\" data-element_type=\"container\" data-e-type=\"container\" id=\"kontakt\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9914cef elementor-widget elementor-widget-html\" data-id=\"9914cef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"zk-contact-widget\">\r\n\r\n <style>\r\n \/* --- Schriftart --- *\/\r\n \/* Google Fonts Import entfernt f\u00fcr DSGVO-Konformit\u00e4t *\/\r\n\r\n .zk-contact-widget {\r\n --zk-c-lime-50: #f7fee7;\r\n --zk-c-lime-100: #ecfccb;\r\n --zk-c-lime-500: #84cc16; \r\n --zk-c-lime-600: #65a30d;\r\n --zk-c-lime-700: #4d7c0f;\r\n --zk-c-green-600: #16a34a;\r\n --zk-c-slate-50: #f8fafc;\r\n --zk-c-slate-100: #f1f5f9;\r\n --zk-c-slate-200: #e2e8f0;\r\n --zk-c-slate-400: #94a3b8;\r\n --zk-c-slate-500: #64748b;\r\n --zk-c-slate-600: #475569;\r\n --zk-c-slate-700: #334155;\r\n --zk-c-slate-800: #1e293b;\r\n --zk-c-slate-900: #0f172a;\r\n --zk-c-link-gray: #465665;\r\n --zk-c-shadow-xl: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1);\r\n --zk-c-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 \/ 0.25);\r\n font-family: 'Inter', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n line-height: 1.5;\r\n background: linear-gradient(135deg, var(--zk-c-lime-500), var(--zk-c-green-600));\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 4rem 0rem; \r\n position: relative;\r\n overflow: hidden;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget { padding: 6rem 1.5rem; } }\r\n\r\n .zk-contact-widget::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background-image: radial-gradient(circle, rgba(255,255,255,0.2) 2px, transparent 2px);\r\n background-size: 30px 30px;\r\n pointer-events: none;\r\n }\r\n\r\n .zk-contact-widget *, .zk-contact-widget *::before, .zk-contact-widget *::after { box-sizing: border-box; }\r\n .zk-contact-widget h2, .zk-contact-widget h3, .zk-contact-widget p, .zk-contact-widget label,\r\n .zk-contact-widget input, .zk-contact-widget textarea, .zk-contact-widget button {\r\n margin: 0; padding: 0; font-family: inherit; text-decoration: none;\r\n }\r\n .zk-contact-widget a { text-decoration: none; color: inherit; }\r\n\r\n .zk-contact-widget .zk-container {\r\n width: 100%; max-width: 1280px; margin: 0 auto; position: relative; z-index: 10;\r\n }\r\n\r\n .zk-contact-widget .zk-main-card {\r\n background: white; border-radius: 1.5rem; box-shadow: var(--zk-c-shadow-2xl);\r\n overflow: hidden; display: grid; grid-template-columns: 1fr; margin-bottom: 5rem; width: 100%;\r\n }\r\n @media (min-width: 1024px) { .zk-contact-widget .zk-main-card { grid-template-columns: 1fr 1fr; } }\r\n\r\n .zk-contact-widget .zk-form-section { padding: 1.5rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-form-section { padding: 2.5rem; } }\r\n @media (min-width: 1024px) { .zk-contact-widget .zk-form-section { padding: 3.5rem; } }\r\n\r\n .zk-contact-widget h2 { font-size: 1.5rem; font-weight: 700; color: var(--zk-c-slate-900); margin-bottom: 0.5rem; }\r\n @media (min-width: 768px) { .zk-contact-widget h2 { font-size: 1.875rem; } }\r\n\r\n .zk-contact-widget .zk-intro-text { color: var(--zk-c-slate-500); margin-bottom: 2rem; font-size: 0.95rem; }\r\n .zk-contact-widget .zk-form-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-form-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } }\r\n\r\n .zk-contact-widget .zk-input-group { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }\r\n .zk-contact-widget label { font-size: 0.75rem; font-weight: 700; color: var(--zk-c-slate-700); text-transform: uppercase; letter-spacing: 0.05em; }\r\n\r\n .zk-contact-widget input, .zk-contact-widget textarea {\r\n width: 100%; background-color: var(--zk-c-slate-50); border: 1px solid var(--zk-c-slate-200);\r\n border-radius: 0.5rem; padding: 0.75rem; font-size: 1rem; color: var(--zk-c-slate-800);\r\n transition: all 0.2s; outline: none; min-width: 0;\r\n }\r\n .zk-contact-widget input:focus, .zk-contact-widget textarea:focus {\r\n border-color: var(--zk-c-lime-500); box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1); background-color: white;\r\n }\r\n .zk-contact-widget textarea { resize: vertical; min-height: 120px; }\r\n\r\n .zk-contact-widget .zk-submit-btn {\r\n width: 100%; background-color: var(--zk-c-lime-600); color: white; font-weight: 700;\r\n padding: 1rem; border-radius: 0.5rem; border: none; cursor: pointer; display: flex;\r\n align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; font-size: 1rem;\r\n }\r\n .zk-contact-widget .zk-submit-btn:hover { background-color: var(--zk-c-lime-700); }\r\n .zk-contact-widget .zk-submit-btn:disabled { background-color: var(--zk-c-slate-400); cursor: not-allowed; }\r\n\r\n .zk-contact-widget .zk-map-section {\r\n position: relative; background-color: var(--zk-c-slate-200); min-height: 350px;\r\n display: flex; align-items: center; justify-content: center; padding: 1rem;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-map-section { padding: 1.5rem; min-height: 400px; } }\r\n\r\n .zk-contact-widget .zk-map-bg {\r\n position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;\r\n filter: grayscale(100%); opacity: 0.6; transition: all 0.7s ease;\r\n }\r\n .zk-contact-widget .zk-map-section:hover .zk-map-bg { filter: grayscale(0%); opacity: 1; }\r\n\r\n .zk-contact-widget .zk-info-card-overlay {\r\n position: relative; z-index: 5; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);\r\n padding: 1.5rem; border-radius: 0.75rem; box-shadow: var(--zk-c-shadow-xl); width: 100%; max-width: 380px;\r\n }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-info-card-overlay { padding: 2rem; } }\r\n\r\n .zk-contact-widget .zk-info-title { font-weight: 700; color: var(--zk-c-slate-800); font-size: 1.125rem; margin-bottom: 1rem; text-align: center; }\r\n \r\n .zk-contact-widget .zk-contact-row { \r\n display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; \r\n color: var(--zk-c-slate-600);\r\n font-weight: 500; font-size: 0.95rem; word-break: break-all; \r\n }\r\n @media (min-width: 400px) { .zk-contact-widget .zk-contact-row { word-break: normal; } }\r\n\r\n .zk-contact-widget .zk-contact-row a,\r\n .zk-contact-widget a[href^=\"tel\"], \r\n .zk-contact-widget a[href^=\"mailto\"] {\r\n color: var(--zk-c-link-gray) !important;\r\n text-decoration: none !important;\r\n }\r\n .zk-contact-widget .zk-contact-row a:hover {\r\n color: var(--zk-c-lime-600) !important;\r\n }\r\n\r\n .zk-contact-widget .zk-map-btn {\r\n margin-top: 1.5rem; width: 100%; padding: 0.75rem; background-color: var(--zk-c-slate-100);\r\n color: var(--zk-c-slate-700); font-size: 0.875rem; font-weight: 600; border: none; border-radius: 0.5rem;\r\n cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; text-decoration: none;\r\n }\r\n .zk-contact-widget .zk-map-btn:hover { background-color: var(--zk-c-slate-200); }\r\n\r\n .zk-contact-widget .zk-bottom-header { text-align: center; margin-bottom: 3rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-bottom-header { margin-bottom: 4rem; } }\r\n\r\n .zk-contact-widget .zk-eyebrow { color: var(--zk-c-lime-100); font-weight: 600; letter-spacing: 0.05em; font-size: 0.875rem; display: block; margin-bottom: 0.5rem; }\r\n .zk-contact-widget .zk-bottom-headline { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; color: white; line-height: 1.2; }\r\n .zk-contact-widget .zk-info-grid { display: grid; gap: 1.5rem; margin-bottom: 3rem; }\r\n @media (min-width: 768px) { .zk-contact-widget .zk-info-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }\r\n\r\n .zk-contact-widget .zk-info-box {\r\n background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: var(--zk-c-shadow-xl);\r\n display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;\r\n }\r\n @media (min-width: 480px) { .zk-contact-widget .zk-info-box { flex-direction: row; gap: 1.5rem; padding: 2rem; } }\r\n\r\n .zk-contact-widget .zk-icon-wrapper {\r\n background-color: var(--zk-c-lime-100); color: var(--zk-c-lime-600); padding: 0.75rem;\r\n border-radius: 0.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;\r\n }\r\n .zk-contact-widget .zk-info-box h3 { font-weight: 700; font-size: 1.125rem; color: var(--zk-c-slate-900); margin-bottom: 0.5rem; }\r\n .zk-contact-widget .zk-info-box p { font-size: 0.875rem; color: var(--zk-c-slate-500); line-height: 1.6; }\r\n .zk-contact-widget .zk-bottom-text-wrapper { text-align: center; }\r\n .zk-contact-widget .zk-bottom-text { color: white; font-weight: 700; font-size: 1.125rem; }\r\n .zk-contact-widget svg { flex-shrink: 0; }\r\n\r\n .zk-form-status { margin-top: 1rem; font-size: 0.95rem; border-radius: 0.5rem; padding: 1rem; display: none; text-align: center; font-weight: 500; }\r\n .zk-form-status.success { background-color: #ecfccb; color: #365314; border: 1px solid #bef264; display: block !important; }\r\n .zk-form-status.error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; display: block !important; }\r\n \r\n .zk-hp-wrapper { display: none !important; }\r\n <\/style>\r\n\r\n <div class=\"zk-container\">\r\n <div class=\"zk-main-card\">\r\n \r\n <div class=\"zk-form-section\">\r\n <h2>Kontaktiere uns<\/h2>\r\n <p class=\"zk-intro-text\">\r\n Kontaktieren Sie uns f\u00fcr weitere Informationen und individuelle Beratung.\r\n <\/p>\r\n\r\n <form id=\"zkContactForm\">\r\n <div class=\"zk-hp-wrapper\" aria-hidden=\"true\">\r\n <input type=\"text\" name=\"zk_website\" id=\"zk_website\" tabindex=\"-1\" autocomplete=\"off\">\r\n <\/div>\r\n \r\n <div class=\"zk-form-grid\">\r\n <div class=\"zk-input-group\">\r\n <label>Ihr Name<\/label>\r\n <input type=\"text\" name=\"zk_name\" required>\r\n <\/div>\r\n <div class=\"zk-input-group\">\r\n <label>Firmenname<\/label>\r\n <input type=\"text\" name=\"zk_company\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-form-grid\">\r\n <div class=\"zk-input-group\">\r\n <label>Telefonnummer<\/label>\r\n <input type=\"tel\" name=\"zk_phone\">\r\n <\/div>\r\n <div class=\"zk-input-group\">\r\n <label>E-Mail-Adresse<\/label>\r\n <input type=\"email\" name=\"zk_email\" required>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-input-group\" style=\"margin-bottom: 1.5rem;\">\r\n <label>Ihre Nachricht<\/label>\r\n <textarea rows=\"4\" name=\"zk_message\" required><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"zk-submit-btn\" id=\"zkSubmitBtn\">\r\n <span id=\"zkBtnText\">Nachricht senden<\/span>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\r\n <\/button>\r\n \r\n <div id=\"zkFormStatus\" class=\"zk-form-status\"><\/div>\r\n\r\n <input type=\"hidden\" name=\"zk_ts\" id=\"zk_ts\" value=\"\">\r\n <input type=\"hidden\" name=\"zk_request_id\" id=\"zk_request_id\" value=\"\">\r\n <input type=\"hidden\" id=\"wpa_initiator\" class=\"wpa_initiator\" name=\"wpa_initiator\" value=\"\" \/>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"zk-map-section\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524661135-423995f22d0b?q=80&w=2674&auto=format&fit=crop\" class=\"zk-map-bg\" alt=\"Map Background\">\r\n <div class=\"zk-info-card-overlay\">\r\n <h3 class=\"zk-info-title\">Kontaktinformationen<\/h3>\r\n \r\n <div class=\"zk-contact-row\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#65a30d\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.05 12.05 0 0 0 .57 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.03 12.03 0 0 0 2.81.57A2 2 0 0 1 22 16.92z\"\/><\/svg>\r\n <a href=\"tel:+49303486261\">+49 (0) 30 3486261<\/a>\r\n <\/div>\r\n\r\n <div class=\"zk-contact-row\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#65a30d\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\r\n <a href=\"mailto:info@zerkom.de\">info@zerkom.de<\/a>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/share.google\/6y00kHzGUzKgcdAxy\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"zk-map-btn\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n Auf Karte zeigen\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"zk-bottom-header\">\r\n <span class=\"zk-eyebrow\">Umweltfreundliche L\u00f6sung<\/span>\r\n <h2 class=\"zk-bottom-headline\">Details zu Zertifizierungen f\u00fcr <br> Umweltfreundlichkeit<\/h2>\r\n <\/div>\r\n\r\n <div class=\"zk-info-grid\">\r\n <div class=\"zk-info-box\">\r\n <div class=\"zk-icon-wrapper\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22v-10\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <h3>Verpackungsgesetzgebung & Compliance<\/h3>\r\n <p>Erkl\u00e4ren Sie kurz die Bedeutung der gesetzlichen Einhaltung f\u00fcr kompostierbare Verpackungen oder Produkte und heben Sie hervor, wie Zerkom Unternehmen dabei unterst\u00fctzt, Umweltstandards zu erf\u00fcllen.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-info-box\">\r\n <div class=\"zk-icon-wrapper\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <div>\r\n <h3>Vertrauensw\u00fcrdige Zertifizierungsmarken<\/h3>\r\n <p>Stellen Sie die Glaubw\u00fcrdigkeit und das Vertrauen heraus, die die Zertifizierungssiegel von Zerkom den Produkten verleihen, und betonen Sie die Bedeutung des Umweltschutzes.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"zk-bottom-text-wrapper\">\r\n <p class=\"zk-bottom-text\">Ben\u00f6tigen Sie eine transparente L\u00f6sung? Kontaktieren Sie uns<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function zkInitContactWidget() {\r\n if (window.__zkContactWidgetInitialized) {\r\n return;\r\n }\r\n window.__zkContactWidgetInitialized = true;\r\n\r\n var form = document.getElementById('zkContactForm');\r\n var submitBtn = document.getElementById('zkSubmitBtn');\r\n var btnText = document.getElementById('zkBtnText');\r\n var statusBox = document.getElementById('zkFormStatus');\r\n var tsField = document.getElementById('zk_ts');\r\n var requestIdField = document.getElementById('zk_request_id');\r\n var isSubmitting = false;\r\n\r\n var ajaxUrl = (typeof window.zkContact === 'object' && window.zkContact !== null && window.zkContact.ajaxurl)\r\n ? window.zkContact.ajaxurl\r\n : '\/wp-admin\/admin-ajax.php';\r\n\r\n function showStatus(message, isSuccess) {\r\n statusBox.innerText = message;\r\n statusBox.className = 'zk-form-status ' + (isSuccess ? 'success' : 'error');\r\n statusBox.style.display = 'block';\r\n }\r\n\r\n function hideStatus() {\r\n statusBox.innerHTML = '';\r\n statusBox.className = 'zk-form-status';\r\n statusBox.style.display = 'none';\r\n }\r\n\r\n function getDataMessage(data) {\r\n if (!data || typeof data !== 'object') {\r\n return '';\r\n }\r\n if (typeof data.data === 'string') {\r\n return data.data;\r\n }\r\n if (data.data && typeof data.data.message === 'string') {\r\n return data.data.message;\r\n }\r\n return '';\r\n }\r\n\r\n if (!form) {\r\n return;\r\n }\r\n if (form.dataset.zkBound === '1') {\r\n return;\r\n }\r\n form.dataset.zkBound = '1';\r\n if (tsField) {\r\n tsField.value = String(Math.floor(Date.now() \/ 1000));\r\n }\r\n if (requestIdField) {\r\n if (window.crypto && typeof window.crypto.randomUUID === 'function') {\r\n requestIdField.value = window.crypto.randomUUID();\r\n } else {\r\n requestIdField.value = String(Date.now()) + '-' + Math.random().toString(16).slice(2);\r\n }\r\n }\r\n\r\n form.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n if (isSubmitting) {\r\n return;\r\n }\r\n isSubmitting = true;\r\n\r\n submitBtn.disabled = true;\r\n var originalText = btnText.innerText;\r\n btnText.innerText = 'Wird gesendet...';\r\n hideStatus();\r\n\r\n function sendForm() {\r\n var formData = new FormData(form);\r\n formData.set('action', 'zk_send_mail');\r\n\r\n return fetch(ajaxUrl, {\r\n method: 'POST',\r\n body: formData\r\n })\r\n .then(function(response) {\r\n return response.text().then(function(raw) {\r\n var data;\r\n try {\r\n data = JSON.parse(raw);\r\n } catch (parseError) {\r\n var textSnippet = raw ? raw.slice(0, 160) : '';\r\n throw new Error('Ungueltige Server-Antwort (' + response.status + '): ' + textSnippet);\r\n }\r\n return { response: response, data: data };\r\n });\r\n })\r\n .then(function(result) {\r\n return result.data;\r\n });\r\n }\r\n\r\n sendForm()\r\n .then(function(data) {\r\n if (data && data.success) {\r\n showStatus(getDataMessage(data) || 'Vielen Dank! Ihre Nachricht wurde erfolgreich versendet.', true);\r\n form.reset();\r\n } else {\r\n showStatus('Fehler: ' + (getDataMessage(data) || 'Bitte versuchen Sie es spaeter erneut.'), false);\r\n }\r\n })\r\n .catch(function(error) {\r\n console.error('Error:', error);\r\n showStatus('Es gab ein technisches Problem. Bitte kontaktieren Sie uns telefonisch.', false);\r\n })\r\n .finally(function() {\r\n isSubmitting = false;\r\n submitBtn.disabled = false;\r\n btnText.innerText = originalText;\r\n });\r\n });\r\n }\r\n\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', zkInitContactWidget);\r\n } else {\r\n zkInitContactWidget();\r\n }\r\n <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d86f1e e-flex e-con-boxed e-con e-parent\" data-id=\"7d86f1e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4abb5e5 elementor-widget elementor-widget-heading\" data-id=\"4abb5e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gib hier deine \u00dcberschrift ein<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ad1e88f elementor-widget elementor-widget-heading\" data-id=\"ad1e88f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gib hier deine \u00dcberschrift ein<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Zerkom – 100% Zertifiziert Kompostierbar Offiziel […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-718","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages\/718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/comments?post=718"}],"version-history":[{"count":136,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages\/718\/revisions"}],"predecessor-version":[{"id":1598,"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/pages\/718\/revisions\/1598"}],"wp:attachment":[{"href":"https:\/\/zerkom.de\/zh-hans\/wp-json\/wp\/v2\/media?parent=718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}