{"css_url":"https:\/\/dgm.inventum.de\/api\/customer\/widget\/70f0e820-7b79-4395-88a7-c4344f2e9e23\/668501c060f47668501c060f49?css=1","html":"<div class=\"\">\n\n\n        \n    \n        <Dialog\n    :open=\"!!(textfield || textfield3)\"\n    @update:open=\"(open) => { if (!open) { updateProperty('textfield', null); updateProperty('textfield3', null); updateProperty('objectfield1', {}); } }\"\n>\n    <DialogScrollContent\n        class=\"overflow-hidden rounded-2xl bg-white p-0 shadow-2xl\"\n        :class=\"textfield3 ? 'max-h-[94vh] w-[96vw] max-w-[96vw] sm:max-w-[1200px]' : 'max-h-[85vh] sm:max-w-3xl'\"\n        style=\"z-index: 2147483647; background-color: #fff;\"\n    >\n        <DialogHeader v-if=\"textfield\" class=\"border-b border-border px-5 py-4 text-left\">\n            <div class=\"flex items-start gap-4\">\n                <div class=\"relative size-16 shrink-0 overflow-hidden rounded-full bg-primary\/10\">\n                    <span\n                        class=\"absolute inset-0 flex items-center justify-center text-lg font-semibold text-primary\"\n                        v-text=\"objectfield1.initials\"\n                    ><\/span>\n\n                    <img\n                        v-if=\"objectfield1.avatar\"\n                        :src=\"objectfield1.avatar\"\n                        :alt=\"objectfield1.name || textfield2\"\n                        class=\"absolute inset-0 size-full object-cover\"\n                        :style=\"objectfield1.dead ? 'filter: grayscale(1);' : ''\"\n                        onerror=\"this.style.display='none'\"\n                    >\n                <\/div>\n\n                <div class=\"min-w-0 flex-1\">\n                    <p\n                        v-if=\"objectfield1.prefix\"\n                        class=\"font-mono text-[10px] font-bold uppercase tracking-[0.10em] text-muted-foreground\"\n                        v-text=\"objectfield1.prefix\"\n                    ><\/p>\n\n                    <DialogTitle\n                        class=\"text-xl font-semibold leading-tight text-foreground\"\n                        v-text=\"objectfield1.name || textfield2\"\n                    ><\/DialogTitle>\n\n                    <DialogDescription\n                        v-if=\"objectfield1.company\"\n                        class=\"mt-1 text-sm text-muted-foreground\"\n                        v-text=\"objectfield1.company\"\n                    ><\/DialogDescription>\n\n                    <p\n                        v-if=\"objectfield1.committee\"\n                        class=\"mt-2 flex items-center gap-1.5 text-xs font-medium text-primary\"\n                    >\n                        <i class=\"fal fa-sitemap\" aria-hidden=\"true\"><\/i>\n                        <span v-text=\"objectfield1.committee\"><\/span>\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/DialogHeader>\n\n        <DialogHeader v-else class=\"sr-only\">\n            <DialogTitle>Details<\/DialogTitle>\n        <\/DialogHeader>\n\n        <div v-if=\"textfield\" class=\"max-h-[calc(85vh-7rem)] overflow-y-auto overscroll-contain px-5 py-5\" style=\"overscroll-behavior: contain;\">\n            <h1\n                v-if=\"objectfield1.bodyTitle\"\n                class=\"text-lg font-medium\"\n                v-text=\"objectfield1.bodyTitle\"\n            ><\/h1>\n\n            <div class=\"prose max-w-none text-sm text-foreground\" v-html=\"nl2brHtml(textfield)\"><\/div>\n        <\/div>\n\n        <div v-if=\"textfield3\" class=\"max-h-[calc(94vh-2rem)] overflow-y-auto overscroll-contain px-2 py-4 sm:px-5\" style=\"overscroll-behavior: contain;\" v-html=\"textfield3\"><\/div>\n    <\/DialogScrollContent>\n<\/Dialog>\n\n    <div class=\"ede relative container mx-auto mt-4 sm:mt-6\">\n        <style>\n            .ede {\n                --primary: #4EA4DB;\n                --ede-primary-700: color-mix(in oklab, var(--primary) 78%, black);\n                --ede-primary-100: color-mix(in oklab, var(--primary) 12%, transparent);\n                --ede-primary-50: color-mix(in oklab, var(--primary) 6%, transparent);\n                --ede-ink: var(--foreground, #0d1b26);\n                --ede-ink-muted: var(--muted-foreground, #4b5b69);\n                --ede-ink-mute2: color-mix(in oklab, var(--muted-foreground, #4b5b69) 78%, transparent);\n                --ede-ink-border: var(--border, #e4e8ec);\n            }\n\n            .ede .font-heading {\n                font-family: \"Inter Tight\", \"Inter\", system-ui, sans-serif;\n                letter-spacing: -0.015em;\n            }\n\n            .ede h1, .ede h2, .ede h3 {\n                overflow-wrap: anywhere;\n                hyphens: auto;\n            }\n\n            .ede-eyebrow {\n                display: inline-flex;\n                align-items: center;\n                gap: .4rem;\n                border-radius: 999px;\n                padding: .35rem .75rem;\n                font-size: 11px;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: .12em;\n                color: var(--ede-primary-700);\n                background: var(--ede-primary-100);\n                white-space: nowrap;\n            }\n\n            .ede-label {\n                font-size: 10px;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: .1em;\n                color: var(--ede-ink-mute2);\n            }\n\n            .ede-glass {\n                background: rgba(255, 255, 255, .64);\n                backdrop-filter: blur(18px) saturate(160%);\n                -webkit-backdrop-filter: blur(18px) saturate(160%);\n                border: 1px solid rgba(255, 255, 255, .7);\n            }\n\n            .ede-shadow-soft {\n                box-shadow:\n                    0 1px 0 color-mix(in oklab, var(--ede-ink) 3%, transparent),\n                    0 10px 28px -12px color-mix(in oklab, var(--ede-ink) 22%, transparent);\n            }\n\n            .ede-shadow-lift:hover {\n                box-shadow:\n                    0 1px 0 color-mix(in oklab, var(--ede-ink) 3%, transparent),\n                    0 22px 44px -16px color-mix(in oklab, var(--ede-ink) 26%, transparent);\n            }\n\n            .ede-frame {\n                position: relative;\n                overflow: hidden;\n                border-radius: 1.5rem 1.5rem 0 0;\n            }\n\n            .ede-frame::before {\n                content: '';\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                height: 3px;\n                z-index: 5;\n                background: linear-gradient(90deg, transparent, var(--primary) 18%, color-mix(in oklab, var(--primary) 55%, white) 50%, var(--primary) 82%, transparent);\n            }\n\n            .ede-hero-bg {\n                position: absolute;\n                inset: 0 0 auto 0;\n                top: 0;\n                height: 26rem;\n                -webkit-mask-image: linear-gradient(to bottom, black 0%, black 38%, rgba(0, 0, 0, .45) 60%, transparent 96%);\n                mask-image: linear-gradient(to bottom, black 0%, black 38%, rgba(0, 0, 0, .45) 60%, transparent 96%);\n            }\n\n            @media (min-width: 1024px) {\n                .ede-hero-bg { height: 30rem; }\n            }\n\n            .ede-hero-bg img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                display: block;\n                filter: saturate(1.12) contrast(1.05);\n            }\n\n            .ede-hero-scrim {\n                position: absolute;\n                inset: 0;\n                background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .78) 60%, rgba(255, 255, 255, .98) 100%);\n            }\n\n            @media (min-width: 1024px) {\n                .ede-hero-scrim {\n                    background: linear-gradient(110deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .8) 32%, rgba(255, 255, 255, .32) 56%, rgba(255, 255, 255, .05) 76%);\n                }\n            }\n\n            .ede-hero-glow {\n                position: absolute;\n                inset: 0;\n                pointer-events: none;\n                background:\n                    radial-gradient(44rem 26rem at 6% 26%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 70%),\n                    radial-gradient(26rem 18rem at 96% 4%, color-mix(in oklab, var(--primary) 20%, transparent), transparent 72%);\n            }\n\n            .ede-hero-grain {\n                position: absolute;\n                inset: 0;\n                pointer-events: none;\n                opacity: .05;\n                mix-blend-mode: overlay;\n                background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n            }\n\n            .ede-ribbon {\n                display: inline-flex;\n                align-items: center;\n                border-radius: 999px;\n                padding: .4rem .9rem;\n                font-size: 12px;\n                font-weight: 700;\n                color: #fff;\n                background: #dc2626;\n                box-shadow: 0 8px 20px -6px rgba(220, 38, 38, .55);\n            }\n\n            .ede-h1 {\n                font-weight: 800;\n                line-height: 1.08;\n                letter-spacing: -0.01em;\n                color: var(--ede-ink);\n            }\n\n            .ede-manifest {\n                border-radius: 1.1rem;\n                padding: 1.1rem 1.35rem;\n                box-shadow:\n                    inset 0 1px 0 rgba(255, 255, 255, .8),\n                    0 1px 0 color-mix(in oklab, var(--ede-ink) 3%, transparent),\n                    0 18px 34px -16px color-mix(in oklab, var(--ede-ink) 24%, transparent);\n            }\n\n            .ede-meta-row {\n                display: flex;\n                align-items: center;\n                gap: .55rem;\n                padding: .4rem 0;\n            }\n\n            .ede-meta-row + .ede-meta-row {\n                border-top: 1px solid color-mix(in oklab, var(--ede-ink-border) 70%, transparent);\n            }\n\n            .ede-meta-icon {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 1.75rem;\n                height: 1.75rem;\n                border-radius: .55rem;\n                background: var(--ede-primary-100);\n                color: var(--ede-primary-700);\n                flex-shrink: 0;\n                font-size: 12px;\n                box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 7%, transparent);\n            }\n\n            .ede-btn-primary {\n                position: relative;\n                overflow: hidden;\n                display: inline-flex;\n                align-items: center;\n                gap: .5rem;\n                border-radius: .5rem;\n                font-weight: 600;\n                color: #fff;\n                background: var(--primary);\n                box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 55%, transparent);\n                transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;\n                text-decoration: none;\n            }\n\n            .ede-btn-primary::after {\n                content: '';\n                position: absolute;\n                inset: 0;\n                background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);\n                transform: translateX(-120%);\n                transition: transform .55s ease;\n            }\n\n            .ede-btn-primary:hover::after {\n                transform: translateX(120%);\n            }\n\n            .ede-btn-primary:hover {\n                background: var(--ede-primary-700);\n                color: #fff;\n                transform: translateY(-1px);\n            }\n\n            .ede-btn-ghost {\n                display: inline-flex;\n                align-items: center;\n                gap: .5rem;\n                border-radius: .5rem;\n                font-weight: 600;\n                color: var(--ede-ink);\n                background: #fff;\n                border: 1px solid var(--ede-ink-border);\n                transition: border-color .2s ease, background-color .2s ease, transform .2s ease;\n                text-decoration: none;\n            }\n\n            .ede-btn-ghost:hover {\n                border-color: color-mix(in oklab, var(--primary) 40%, transparent);\n                background: var(--ede-primary-50);\n                color: var(--ede-ink);\n                transform: translateY(-1px);\n            }\n\n            .ede-card {\n                border-radius: 1rem;\n                border: 1px solid var(--ede-ink-border);\n                background: #fff;\n                transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\n            }\n\n            .ede-card:hover {\n                transform: translateY(-2px);\n                border-color: color-mix(in oklab, var(--primary) 35%, transparent);\n            }\n\n            .ede-person-avatar {\n                position: relative;\n                flex-shrink: 0;\n                overflow: hidden;\n                border-radius: 999px;\n                background: var(--ede-primary-100);\n            }\n\n            .ede-person-avatar img {\n                position: relative;\n                z-index: 1;\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                transition: transform .4s ease;\n            }\n\n            .ede-card:hover .ede-person-avatar img {\n                transform: scale(1.05);\n            }\n\n            .ede-chip {\n                display: inline-flex;\n                align-items: center;\n                gap: .3rem;\n                border-radius: 999px;\n                border: 1px solid var(--ede-ink-border);\n                background: #fff;\n                padding: .2rem .55rem;\n                font-size: 11px;\n                font-weight: 500;\n                color: var(--ede-ink-muted);\n                text-decoration: none;\n                transition: border-color .2s ease, background-color .2s ease, color .2s ease;\n            }\n\n            .ede-chip:hover {\n                border-color: color-mix(in oklab, var(--primary) 40%, transparent);\n                background: var(--ede-primary-50);\n                color: var(--ede-primary-700);\n            }\n\n            .ede-badge-count {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                min-width: 1.15rem;\n                height: 1.15rem;\n                padding: 0 .3rem;\n                border-radius: 999px;\n                background: var(--ede-primary-100);\n                color: var(--ede-primary-700);\n                font-size: 10px;\n                font-weight: 700;\n            }\n\n            .ede-tab-scroll-target {\n                scroll-margin-top: 1rem;\n            }\n\n            \/* Named uniquely (not \"fade\") to avoid colliding with an unrelated,\n               accidentally-global .fade-enter-active > * {...} staggered-list\n               rule shipped by another component in the shared webwidgets\n               bundle, which was leaking a \"slide up from below\" stagger onto\n               these tab panels. Enter uses a Motion-generated low-bounce\n               spring (bounce .15, 350ms) for a subtle, lively swap; leave is a\n               fast plain ease since it should just get out of the way. *\/\n            .ede-tabfade-enter-from,\n            .ede-tabfade-leave-to {\n                opacity: 0;\n                transform: translateY(6px);\n            }\n\n            .ede-tabfade-enter-to,\n            .ede-tabfade-leave-from {\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            .ede-tabfade-enter-active {\n                transition:\n                    opacity 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1),\n                    transform 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1);\n            }\n\n            .ede-tabfade-leave-active {\n                transition:\n                    opacity 150ms cubic-bezier(.4, 0, 1, 1),\n                    transform 150ms cubic-bezier(.4, 0, 1, 1);\n            }\n\n            .ede-tabnav {\n                position: sticky;\n                top: .5rem;\n                z-index: 40;\n                display: flex;\n                gap: .4rem;\n                overflow-x: auto;\n                overscroll-behavior-x: contain;\n                padding: .35rem;\n                border-radius: .5rem;\n                background: rgba(255, 255, 255, .85);\n                backdrop-filter: blur(14px);\n                -webkit-backdrop-filter: blur(14px);\n                border: 1px solid var(--ede-ink-border);\n                box-shadow: 0 8px 24px -14px color-mix(in oklab, var(--ede-ink) 30%, transparent);\n                scrollbar-width: none;\n            }\n\n            .ede-tabnav::-webkit-scrollbar {\n                display: none;\n            }\n\n            .ede-tab {\n                display: inline-flex;\n                align-items: center;\n                gap: .4rem;\n                white-space: nowrap;\n                border-radius: .375rem;\n                padding: .5rem 1rem;\n                font-size: 13px;\n                font-weight: 600;\n                color: var(--ede-ink-muted);\n                cursor: pointer;\n                transition: background-color .2s ease, color .2s ease;\n            }\n\n            .ede-tab:hover {\n                color: var(--ede-ink);\n            }\n\n            .ede-tab-on {\n                background: var(--primary);\n                color: #fff !important;\n                box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 60%, transparent);\n            }\n\n            .ede-day-sticky {\n                position: sticky;\n                top: 3.75rem;\n                z-index: 30;\n                display: inline-block;\n            }\n\n            .ede-day-badge {\n                display: inline-flex;\n                align-items: center;\n                gap: .4rem;\n                border-radius: 999px;\n                padding: .35rem .8rem;\n                font-size: 11px;\n                font-weight: 700;\n                text-transform: uppercase;\n                letter-spacing: .1em;\n                color: #fff;\n                background: var(--ede-primary-700);\n                white-space: nowrap;\n            }\n\n            .ede [id^=\"eventItem_\"] {\n                scroll-margin-top: 8.5rem;\n            }\n\n            .ede-toc a {\n                text-decoration: none;\n                color: var(--ede-ink-muted);\n            }\n\n            .ede-toc a:hover {\n                color: var(--ede-primary-700);\n            }\n        <\/style>\n\n        \n        \n        <div class=\"ede-frame\">\n            <div class=\"ede-hero-bg\">\n                                    <img src=\"https:\/\/unrestricted.fsn1.your-objectstorage.com\/13\/07dc56d2-816c-45c7-b01b-a06306c1ec44\/conversions\/1706f027-8833-4815-8d24-769a2c472132-lg.jpg\" alt=\"\">\n                                <div class=\"ede-hero-scrim\"><\/div>\n                <div class=\"ede-hero-glow\"><\/div>\n                <div class=\"ede-hero-grain\"><\/div>\n            <\/div>\n\n            <div class=\"relative px-4 sm:px-8 lg:px-12 pt-10 pb-12 lg:pt-14 lg:pb-16\">\n\n                \n                <div class=\"flex items-start justify-between gap-3 flex-wrap\">\n                    <span class=\"ede-eyebrow\"><i class=\"fal fa-graduation-cap\"><\/i> Short Webinar<\/span>\n\n                                    <\/div>\n\n                \n                                    <div class=\"relative z-20 mt-3 inline-flex items-center gap-2 rounded-full bg-amber-50 border border-amber-200 text-amber-900 text-xs font-semibold px-3 py-1.5\">\n                        <i class=\"fal fa-history\"><\/i>\n                        <span>\n                            This appointment is in the past.\n                                                    <\/span>\n                    <\/div>\n                \n                <div class=\"mt-7 max-w-3xl\">\n                    <h1 class=\"font-heading ede-h1 text-2xl sm:text-3xl md:text-4xl\">Combatting the energy crisis: Untapping the potential of citizen energy and energy communities<\/h1>\n                                    <\/div>\n\n                                    <div class=\"ede-glass ede-manifest mt-7 inline-flex flex-wrap gap-x-6 gap-y-1\">\n                                                    <div class=\"flex items-center gap-2.5 py-1\">\n                                <span class=\"ede-meta-icon\"><i class=\"fal fa-calendar\"><\/i><\/span>\n                                <div>\n                                    <p class=\"ede-label\">When<\/p>\n                                    <p class=\"text-sm font-semibold\" style=\"color: var(--ede-ink);\">08 Nov 2024 14:00 - 15:00<\/p>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"flex items-center gap-2.5 py-1\">\n                                <span class=\"ede-meta-icon\"><i class=\"fal fa-globe\"><\/i><\/span>\n                                <div>\n                                    <p class=\"ede-label\">Where<\/p>\n                                    <p class=\"text-sm font-semibold\" style=\"color: var(--ede-ink);\">Online<\/p>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"flex items-center gap-2.5 py-1\">\n                                <span class=\"ede-meta-icon\"><i class=\"fal fa-language\"><\/i><\/span>\n                                <div>\n                                    <p class=\"ede-label\">Language<\/p>\n                                    <p class=\"text-sm font-semibold\" style=\"color: var(--ede-ink);\">English<\/p>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n                \n                <div class=\"xl:flex xl:items-start xl:justify-between xl:gap-10\">\n                    <div class=\"mt-6  max-w-3xl \">\n                        <div class=\"text-[15px] leading-relaxed prose-xs md:prose max-w-none\" style=\"color:var(--ede-ink-muted); text-wrap:pretty; --tw-prose-bullets:var(--ede-ink-muted); max-width: 95ch;\">\n                            <p>The shift from centralized, fossil fuel-based energy systems to decentralized, renewable energy systems presents a significant global challenge. However, it also opens up opportunities for innovative solutions such as citizen energy and energy communities. These community-driven initiatives have the potential to revolutionize the energy sector by decentralizing and democratizing energy production and consumption. Citizen Energy enables individuals, small and medium-sized businesses, and local organizations to actively participate in energy production and consumption. This approach empowers people to take control of their energy needs and contribute to a more sustainable future.<\/p><p>Energy Communities involve the collective management of energy production, storage, and distribution. They offer services or other benefits to their members or the local community. By operating sustainably, energy communities foster social innovation, generate environmental benefits, and create economic value.<br \/><\/p><p>In the European Union, the European Renewable Energy Directive and the European Electricity Market Design provide a supportive framework for establishing and operating energy communities. This regulatory environment encourages the growth of these initiatives, helping to address the energy transition while promoting sustainability and community involvement.<br \/><\/p><p>ZOOM Meeting ID: 840 8634 9885<br \/>Kenncode: 496700<\/p>\n                        <\/div>\n                    <\/div>\n\n                                    <\/div>\n\n                                    <div class=\"mt-7\">\n                                                    <div class=\"mb-3\">\n                                <p class=\"ede-label mb-2\">Training Chair<\/p>\n                                <ul class=\"flex flex-wrap gap-x-5 gap-y-3 xl:grid xl:grid-cols-[repeat(2,minmax(0,18rem))] xl:gap-x-8\">\n                                                                            <li class=\"flex items-center gap-2\">\n                                            <div class=\"ede-person-avatar h-8 w-8\">\n                                                <img src=\"https:\/\/unrestricted.fsn1.your-objectstorage.com\/13\/0cb2074d-50c4-41d9-9ec5-dd91193e1216\/conversions\/1ecc1e11-337d-4d3f-b0c8-48506a563c00-md.jpg\" alt=\"Katharina Habersbrunner\">\n                                            <\/div>\n                                            <div class=\"min-w-0\">\n                                                <p class=\"text-xs font-semibold leading-4\" style=\"color:var(--ede-ink);\">Katharina Habersbrunner<\/p>\n                                                <p class=\"text-[11px] leading-4\" style=\"color:var(--ede-ink-muted);\">B\u00fcndnis B\u00fcrgerenergie e.V.<\/p>\n                                            <\/div>\n                                        <\/li>\n                                                                    <\/ul>\n                            <\/div>\n                        \n                                            <\/div>\n                \n                <div class=\"mt-8 flex flex-wrap items-center gap-3\">\n                    \n                    \n                                            <a href=\"#6aa3a6f5ef5f2_nav\"\n                           @click=\"updateProperty('currentTab', null) \"\n                           class=\"ede-btn-ghost px-5 py-2.5 text-sm\">\n                            <i class=\"fal fa-book\"><\/i>  Program\n                        <\/a>\n                    \n                    \n                                    <\/div>\n\n                <div class=\"py-2\">\n\n        <ul class=\"space-x-0.5\">\n                                            <li class=\"inline \">\n                    <a href=\"https:\/\/dgm.inventum.de\/widget\/tagOverview\/152\" class=\"relative inline-flex items-center rounded-md border border-gray-300 px-1 py-0.5 opacity-85 hover:opacity-100 hover:bg-lime-200 bg-lime-50\/80  hover:text-lime-800  duration-200 ease-in-out transform hover:scale-105\">\n                        <div class=\"absolute flex-shrink-0 flex items-center justify-center\">\n                            <span class=\"h-1.5 w-1.5 rounded-full bg-lime-500 opacity-90\" aria-hidden=\"true\"><\/span>\n                        <\/div>\n                        <div class=\"ml-2 text-xxs font-semibold text-gray-900 leading-tight\">Circular Materials<\/div>\n                    <\/a>\n                <\/li>\n                                                            <li class=\"inline \">\n                    <a href=\"https:\/\/dgm.inventum.de\/widget\/tagOverview\/33\" class=\"relative inline-flex items-center rounded-md border border-gray-300 px-1 py-0.5 opacity-85 hover:opacity-100 hover:bg-lime-200 bg-lime-50\/80  hover:text-lime-800  duration-200 ease-in-out transform hover:scale-105\">\n                        <div class=\"absolute flex-shrink-0 flex items-center justify-center\">\n                            <span class=\"h-1.5 w-1.5 rounded-full bg-lime-500 opacity-90\" aria-hidden=\"true\"><\/span>\n                        <\/div>\n                        <div class=\"ml-2 text-xxs font-semibold text-gray-900 leading-tight\">Applications &amp; Circular Economy<\/div>\n                    <\/a>\n                <\/li>\n                                                            <li class=\"inline \">\n                    <a href=\"https:\/\/dgm.inventum.de\/widget\/tagOverview\/178\" class=\"relative inline-flex items-center rounded-md border border-gray-300 px-1 py-0.5 opacity-85 hover:opacity-100 hover:bg-green-200 bg-green-50\/80  hover:text-green-800  duration-200 ease-in-out transform hover:scale-105\">\n                        <div class=\"absolute flex-shrink-0 flex items-center justify-center\">\n                            <span class=\"h-1.5 w-1.5 rounded-full bg-green-500 opacity-90\" aria-hidden=\"true\"><\/span>\n                        <\/div>\n                        <div class=\"ml-2 text-xxs font-semibold text-gray-900 leading-tight\">SfS-Alliance<\/div>\n                    <\/a>\n                <\/li>\n                            \n\n        <\/ul>\n    <\/div>\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"ede flex flex-col-reverse gap-x-12 lg:flex-row lg:justify-center xl:gap-x-16 relative container mx-auto mt-8 px-4 sm:px-8 lg:px-12\">\n        <aside class=\"relative mt-6 max-w-[500px] flex-shrink-0 lg:sticky lg:top-6 lg:mt-0 lg:w-[270px] lg:self-start xl:w-[315px]\">\n            <div class=\"ede-card ede-shadow-soft overflow-hidden\">\n                <div class=\"p-5\">\n                    <p class=\"ede-label\">Short Webinar<\/p>\n                    <h1 class=\"font-heading mt-1 text-base font-bold\" style=\"color:var(--ede-ink);\">Combatting the energy crisis: Untapping the potential of citizen energy and energy communities<\/h1>\n                    \n                                            <div class=\"mt-2\">\n                            <span class=\"text-xs bg-amber-50 rounded-full text-amber-800 font-semibold px-2 py-0.5\">\n                                <i class=\"fal fa-exclamation-triangle fa-fw\"><\/i> The event is in the past\n                            <\/span>\n                        <\/div>\n                    \n                                            <div class=\"mt-3\">\n                                                            <div class=\"ede-meta-row\">\n                                    <span class=\"ede-meta-icon\"><i class=\"fal fa-calendar\"><\/i><\/span>\n                                    <div class=\"min-w-0\">\n                                        <p class=\"ede-label\">When<\/p>\n                                        <p class=\"text-xs font-semibold truncate\" style=\"color: var(--ede-ink);\">08 Nov 2024 14:00 - 15:00<\/p>\n                                    <\/div>\n                                <\/div>\n                                                            <div class=\"ede-meta-row\">\n                                    <span class=\"ede-meta-icon\"><i class=\"fal fa-globe\"><\/i><\/span>\n                                    <div class=\"min-w-0\">\n                                        <p class=\"ede-label\">Where<\/p>\n                                        <p class=\"text-xs font-semibold truncate\" style=\"color: var(--ede-ink);\">Online<\/p>\n                                    <\/div>\n                                <\/div>\n                                                            <div class=\"ede-meta-row\">\n                                    <span class=\"ede-meta-icon\"><i class=\"fal fa-language\"><\/i><\/span>\n                                    <div class=\"min-w-0\">\n                                        <p class=\"ede-label\">Language<\/p>\n                                        <p class=\"text-xs font-semibold truncate\" style=\"color: var(--ede-ink);\">English<\/p>\n                                    <\/div>\n                                <\/div>\n                                                    <\/div>\n                    \n                                            <div class=\"pt-4\">\n                                                            <div class=\"mt-4 border-t pt-4\" style=\"border-color:var(--ede-ink-border);\">\n                                    <p class=\"ede-label\">Training Chair<\/p>\n                                    <ul class=\"mt-2 grid grid-cols-1 gap-2\">\n                                                                                    <li class=\"flex items-center gap-2.5\">\n                                                <div class=\"ede-person-avatar h-8 w-8\">\n                                                    <img src=\"https:\/\/unrestricted.fsn1.your-objectstorage.com\/13\/0cb2074d-50c4-41d9-9ec5-dd91193e1216\/conversions\/1ecc1e11-337d-4d3f-b0c8-48506a563c00-md.jpg\" alt=\"\">\n                                                <\/div>\n                                                <div class=\"min-w-0\">\n                                                    <p class=\"text-xs font-semibold truncate leading-4\" style=\"color:var(--ede-ink);\">Katharina Habersbrunner<\/p>\n                                                    <p class=\"text-[11px] truncate leading-4\" style=\"color:var(--ede-ink-muted);\">B\u00fcndnis B\u00fcrgerenergie e.V.<\/p>\n                                                <\/div>\n                                            <\/li>\n                                                                            <\/ul>\n                                <\/div>\n                                                    <\/div>\n                    \n                    \n                    <div class=\"mt-5 border-t pt-4\" style=\"border-color:var(--ede-ink-border);\">\n                        <p class=\"ede-label\">Contact person<\/p>\n                        <div class=\"mt-2 text-xs\" style=\"color:var(--ede-ink-muted);\">\n                            <div class=\"font-semibold\" style=\"color:var(--ede-ink);\">DGM-Akademie-Team<\/div>\n                            <a href=\"mailto:akademie@dgm.de?subject=Combatting%20the%20energy%20crisis%3A%20Untapping%20the%20potential%20of%20citizen%20energy%20and%20energy%20communities\" class=\"block mt-1 hover:underline\" style=\"color:var(--ede-primary-700);\">\n                                <i class=\"fal fa-envelope fa-fw mr-1\"><\/i> akademie@dgm.de\n                            <\/a>\n                                                            <a class=\"block mt-1 hover:underline\" style=\"color:var(--ede-primary-700);\" href=\"call:+49(0)6975306760\">\n                                    <i class=\"fal fa-phone fa-fw mr-1\"><\/i> +49 (0)69 75306 760\n                                <\/a>\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/aside>\n\n\n        \n\n        <div class=\"w-full lg:min-h-screen relative ede-tab-scroll-target\" id=\"6aa3a6f5ef5f2_nav\">\n\n            <nav class=\"ede-tabnav\" aria-label=\"Tabs\" data-dgm-sticky-guard>\n                                    <a href=\"#6aa3a6f5ef5f2_nav\" @click=\"updateProperty('currentTab', null)\"\n                       class=\"ede-tab\"\n                       aria-current=\"page\"\n                       :class=\"{'ede-tab-on':currentTab==null}\"\n                    >\n                        <i class=\"fal fa-calendar-days\"><\/i> Program\n                    <\/a>\n                                    <a href=\"#6aa3a6f5ef5f2_nav\" @click=\"updateProperty('currentTab', 'speakers')\"\n                       class=\"ede-tab\"\n                       aria-current=\"page\"\n                       :class=\"{'ede-tab-on':currentTab=='speakers'}\"\n                    >\n                        <i class=\"fal fa-chalkboard-user\"><\/i> Programme Leadership\n                    <\/a>\n                                    <a href=\"#6aa3a6f5ef5f2_nav\" @click=\"updateProperty('currentTab', 'orga_information')\"\n                       class=\"ede-tab\"\n                       aria-current=\"page\"\n                       :class=\"{'ede-tab-on':currentTab=='orga_information'}\"\n                    >\n                        <i class=\"fal fa-gears\"><\/i> Organizational matters\n                    <\/a>\n                            <\/nav>\n\n            <transition name=\"ede-tabfade\"\n                        mode=\"out-in\"\n                        appear\n                        :duration=\"350\">\n                <div v-if=\"!currentTab\" class=\"mt-6\" key=\"program\">\n                    \n                    <h2 class=\"font-heading text-lg font-bold mb-3\" style=\"color:var(--ede-ink);\">\n                        Program\n                    <\/h2>\n\n                                            <div class=\"mb-6\">\n                            <div class=\"ede-day-sticky mb-3\">\n                                <h3 class=\"ede-day-badge\">\n                                                                            08 Nov 2024 (Fri)\n                                                                    <\/h3>\n                            <\/div>\n\n                                                                                                                                    <div id=\"eventItem_3b5397ff-7ece-462b-a82b-9e2a696622a9\" class=\"ede-card ede-shadow-lift mb-3 overflow-hidden\">\n                                        <div class=\"px-4 py-3 sm:px-5\">\n                                            <div class=\"mb-1 flex items-center font-medium text-xs gap-3\" style=\"color:var(--ede-ink-mute2);\">\n                                                                                                    <span class=\"font-mono\">\n                                                                                                                    <i class=\"fal fa-clock\"><\/i> 14:00\n                                                                                                            <\/span>\n                                                                                                <span>\n                                                                                                            <i class=\"fal fa-presentation\"><\/i>\n                                                                                                        Lecture\n                                                <\/span>\n                                            <\/div>\n                                            <div class=\"font-semibold\" style=\"color:var(--ede-ink); text-wrap:pretty;\">Combatting the energy crisis: Untapping the potential of citizen energy and energy communities<\/div>\n                                        <\/div>\n                                                                                                                            <div class=\"px-4 pb-3 sm:px-5\">\n                                                <ul class=\"space-y-2\">\n                                                                                                                                                                    <li class=\"flex items-center gap-2.5\">\n                                                            <div class=\"ede-person-avatar h-8 w-8\">\n                                                                <img src=\"https:\/\/unrestricted.fsn1.your-objectstorage.com\/13\/0cb2074d-50c4-41d9-9ec5-dd91193e1216\/conversions\/1ecc1e11-337d-4d3f-b0c8-48506a563c00-md.jpg\" alt=\"\">\n                                                            <\/div>\n                                                            <div class=\"min-w-0\">\n                                                                <p class=\"text-xs font-semibold truncate leading-4\" style=\"color:var(--ede-ink);\">Katharina Habersbrunner<\/p>\n                                                                <p class=\"text-[11px] truncate leading-4\" style=\"color:var(--ede-ink-muted);\">B\u00fcndnis B\u00fcrgerenergie e.V.<\/p>\n                                                            <\/div>\n                                                        <\/li>\n                                                                                                    <\/ul>\n                                            <\/div>\n                                                                            <\/div>\n                                                                                                                                                                    <div id=\"eventItem_28c19584-9073-4708-a035-7c5475718c8f\" class=\"ede-card ede-shadow-lift mb-3 overflow-hidden\">\n                                        <div class=\"px-4 py-3 sm:px-5\">\n                                            <div class=\"mb-1 flex items-center font-medium text-xs gap-3\" style=\"color:var(--ede-ink-mute2);\">\n                                                                                                    <span class=\"font-mono\">\n                                                                                                                    <i class=\"fal fa-clock\"><\/i> 14:45\n                                                                                                            <\/span>\n                                                                                                <span>\n                                                                                                            <i class=\"fal fa-comments-alt\"><\/i>\n                                                                                                        Discussion\n                                                <\/span>\n                                            <\/div>\n                                            <div class=\"font-semibold\" style=\"color:var(--ede-ink); text-wrap:pretty;\">Q &amp; A<\/div>\n                                        <\/div>\n                                                                                                                    <\/div>\n                                                                                    <\/div>\n                                    <\/div>\n\n                <div class=\"mt-6\" v-if=\"currentTab=='speakers'\" key=\"speakers\">\n                                                                                                <div class=\"mb-8\">\n                                <h3 class=\"font-heading text-sm font-bold\" style=\"color:var(--ede-ink);\">Training Chair<\/h3>\n                                <ul class=\"mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3\">\n                                                                                                                    <li class=\"ede-card ede-shadow-lift flex items-start gap-3 p-4\">\n                                            <div class=\"ede-person-avatar h-14 w-14\">\n                                                <img src=\"https:\/\/unrestricted.fsn1.your-objectstorage.com\/13\/0cb2074d-50c4-41d9-9ec5-dd91193e1216\/conversions\/1ecc1e11-337d-4d3f-b0c8-48506a563c00-md.jpg\" alt=\"Katharina Habersbrunner\" loading=\"lazy\">\n                                            <\/div>\n                                            <div class=\"min-w-0 flex-1\">\n                                                <p class=\"text-sm font-semibold truncate\" style=\"color:var(--ede-ink);\">Katharina Habersbrunner<\/p>\n                                                <p class=\"text-xs\" style=\"color:var(--ede-ink-muted);\">B\u00fcndnis B\u00fcrgerenergie e.V.<\/p>\n\n                                                <div class=\"mt-2 flex flex-wrap gap-1.5\">\n                                                                                                                                                                <a href=\"https:\/\/www.buendnis-buergerenergie.de\/buendnis\/vorstand\" target=\"_blank\" class=\"ede-chip\">\n                                                            <i class=\"fa-light fa-arrow-up-right-from-square\"><\/i> Website\n                                                        <\/a>\n                                                                                                    <\/div>\n                                            <\/div>\n                                        <\/li>\n                                                                    <\/ul>\n                            <\/div>\n                                                            <\/div>\n\n                <div class=\"prose-sm md:prose mt-6 max-w-none\"\n                     v-if=\"currentTab=='goals'\" key=\"goals\"\n                     style=\"max-width: none;\">\n                    \n\n                                    <\/div>\n\n\n                <div class=\"prose-sm md:prose mt-6 max-w-none\"\n                     v-if=\"currentTab=='target_group'\"\n                     key=\"target_group\" style=\"max-width: none;\">\n                    \n                <\/div>\n\n                <div class=\"prose-sm md:prose mt-6 max-w-none\"\n                     v-if=\"currentTab=='orga_information'\"\n                     key=\"orga\" style=\"max-width: none;\">\n                    <p><strong>All Times are given in Central European Time (CET)<\/strong>. The event will be hosted on our online platform with ZOOM. You can log in via the \"Access the event\" button that will be available on this page one day in advance of the event. We recommend that you install the ZOOM software on your device for the best user experience. Alternatively, the web version can be used directly from your browser without prior installation.<\/p><p>If you do not already have a DGM user account, you can use the \"Forgot password\" function to create a new password on the login page of the online platform. Please use the email address you provided when registering for this event. You will need to register for the event before you can log in to the platform. The platform itself will be available for access one day in advance of the event.<\/p><p>The recorded event will be available for viewing for 2 weeks after the webinar. Simply register for free and log in to the platform.<\/p><p>To familiarize yourself with the event platform, you can watch our <a href=\"https:\/\/www.youtube.com\/watch?v=iH9MOjbklvc\" target=\"_blank\">explanatory video<\/a>.<\/p>\n                <\/div>\n\n                <div class=\"prose-sm md:prose mt-6 max-w-none\"\n                     v-if=\"currentTab=='direction_information'\"\n                     key=\"direction\" style=\"max-width: none;\">\n                    \n                <\/div>\n\n\n                <div class=\"mt-6\" key=\"booking-p\" id=\"booking\"\n                     v-if=\"currentTab=='booking'\">\n\n                    <div class=\"mb-6\">\n                        <div class=\"booking-package-overview container mx-auto\">\n    \n    <style>\n        .booking-package-overview {\n            --bpo-ink: var(--foreground, #0d1b26);\n            --bpo-ink-muted: var(--muted-foreground, #4b5b69);\n            --bpo-ink-mute2: color-mix(in oklab, var(--muted-foreground, #4b5b69) 78%, transparent);\n            --bpo-ink-border: var(--border, #e4e8ec);\n            --bpo-primary: #4EA4DB;\n            --bpo-primary-700: color-mix(in oklab, var(--bpo-primary) 78%, black);\n            --bpo-primary-100: color-mix(in oklab, var(--bpo-primary) 12%, transparent);\n            text-wrap: pretty;\n        }\n\n        .booking-package-overview .font-heading {\n            font-family: \"Inter Tight\", \"Inter\", system-ui, sans-serif;\n            letter-spacing: -0.01em;\n        }\n\n        \/* Neutralize host page heading and header element styles inside the widget\n           (the site CSS gives bare `header` a top margin, max-width and centering). *\/\n        .booking-package-overview :where(h2, h3, h4) { margin: 0; }\n        .booking-package-overview header {\n            margin: 0 0 1rem;\n            max-width: none;\n            width: auto;\n        }\n\n        .booking-package-overview .text-ink { color: var(--bpo-ink); }\n        .booking-package-overview .text-ink-muted { color: var(--bpo-ink-muted); }\n        .booking-package-overview .text-ink-mute2 { color: var(--bpo-ink-mute2); }\n        .booking-package-overview .text-primary-700 { color: var(--bpo-primary-700); }\n        .booking-package-overview .border-ink-border { border-color: var(--bpo-ink-border); }\n        .booking-package-overview .bg-primary\\\/10 { background-color: var(--bpo-primary-100); }\n\n        .booking-package-overview .shadow-mse-soft {\n            box-shadow:\n                0 1px 0 color-mix(in oklab, var(--bpo-ink) 2%, transparent),\n                0 8px 24px color-mix(in oklab, var(--bpo-ink) 4%, transparent);\n        }\n    <\/style>\n\n    \n    \n    \n            <div class=\"my-10\">\n            <div class=\"rounded-2xl border border-dashed border-ink-border bg-white p-8 text-center\">\n                <div class=\"mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-primary\/10 text-primary-700\">\n                    <i class=\"fa-solid fa-ticket text-base\"><\/i>\n                <\/div>\n                <p class=\"text-sm text-ink-muted\">\n                    No tickets available.\n                <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n                    <\/div>\n                    <div class=\"ede-card ede-shadow-soft p-5\">\n                        <p class=\"ede-label\">Contact person<\/p>\n                        <div class=\"mt-2 text-sm\" style=\"color:var(--ede-ink-muted);\">\n                            <div class=\"font-semibold\" style=\"color:var(--ede-ink);\">DGM-Akademie-Team<\/div>\n                            <a href=\"mailto:akademie@dgm.de?subject=Combatting+the+energy+crisis%3A+Untapping+the+potential+of+citizen+energy+and+energy+communities\" class=\"block mt-1 hover:underline\" style=\"color:var(--ede-primary-700);\">\n                                <i class=\"fal fa-envelope fa-fw mr-1\"><\/i> akademie@dgm.de\n                            <\/a>\n                                                            <a class=\"block mt-1 hover:underline\" style=\"color:var(--ede-primary-700);\" href=\"call:+49(0)6975306760\">\n                                    <i class=\"fal fa-phone fa-fw mr-1\"><\/i> +49 (0)69 75306 760\n                                <\/a>\n                                                    <\/div>\n                    <\/div>\n                <\/div>\n            <\/transition>\n        <\/div>\n    <\/div>\n    <!-- Be sure to use this with a layout container that is full-width on mobile -->\n\n<\/div>","generated_at":"2026-09-11 09:00:06"}