{"id":7903,"date":"2024-09-09T12:32:29","date_gmt":"2024-09-09T10:32:29","guid":{"rendered":"https:\/\/jubi2.dev.sixhop.net\/rocni-program\/"},"modified":"2025-10-31T07:23:40","modified_gmt":"2025-10-31T06:23:40","slug":"rocni-program","status":"publish","type":"page","link":"https:\/\/www.jugendbildungsstaette.org\/cs\/rocni-program\/","title":{"rendered":"Ro\u010dn\u00ed program"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7903\" class=\"elementor elementor-7903\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae70b91 e-con-full e-flex e-con e-parent\" data-id=\"ae70b91\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-2098165 e-flex e-con-boxed e-con e-child\" data-id=\"2098165\" 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-bf894c3 elementor-widget elementor-widget-heading\" data-id=\"bf894c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><span class=\"elementor-heading-title elementor-size-default elementor-inline-editing pen\" data-elementor-setting-key=\"title\" data-pen-placeholder=\"Eingabe hier...\" style=\"border: 0px;font-size: 73px;text-transform: uppercase\">UDR\u017dITELN\u00c9 U\u010cEN\u00cd.<br> \nJEDNEJTE D\u016eRAZN\u011a.<\/span><\/h1>\t\t\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-22a3ebb e-flex e-con-boxed e-con e-parent\" data-id=\"22a3ebb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37b2831 elementor-widget elementor-widget-text-editor\" data-id=\"37b2831\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>    <style type=\"text\/css\">\n\/* Hide empty paragraphs *\/\n.icon-row + p:empty,\n.icon-row ~ p:empty {\n    display: none;\n}\n\n.icon-row p:empty {\n    display: none;\n    margin: 0;\n    padding: 0;\n}\n.icon-row {\n    gap: 15px;\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.icon-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex: 1 1 calc(20% - 20px);\n    min-width: 150px;\n}\n\n.icon-item .elementor-widget-heading {\n    display: block;\n    text-align: center;\n    margin: 40px 0 0px;\n}\n\n.icon-item .elementor-widget-heading .elementor-heading-title a {\n    font-family: \"Open Sans\", Sans-serif;\n    font-size: 16px;\n    color: #253a4f !important;\n    text-transform: uppercase;\n    border-bottom: 2px solid #00000000;\n    display: inline-block;\n    padding: 5px 0;\n    width: fit-content;\n    margin: auto;\n    word-break: break-word;\n}\n\n.icon-item.active .elementor-widget-heading .elementor-heading-title a {\n    color: #3c8fa3 !important;\n    text-decoration: none;\n    border-bottom: 2px solid #3c8fa3;\n}\n\n.active-green .icon-item.active .elementor-widget-heading .elementor-heading-title a {\n    color: #799357 !important;\n    border-bottom: 2px solid #799357;\n}\n\n.active-red .icon-item.active .elementor-widget-heading .elementor-heading-title a {\n    border-bottom: 2px solid #933c47;\n    color: #973d49 !important;\n}\n\n.icon-item .cstm_image_twd {\n    position: relative;\n}\n\n.icon-item .cstm_image_twd img {\n    width: 100px !important;\n    object-fit: contain;\n}\n\n\/* Tablet: 3 Column Grid *\/\n@media screen and (min-width: 768px) and (max-width: 1024px) { \n    .icon-row {\n        display: flex;\n        flex-wrap: wrap;\n    }\n    .icon-row .icon-item {\n        width: 33.333%;\n        margin-bottom: 30px;\n    }\n}\n\n\/* Mobile: List Layout with Hexagon Left, Text Right *\/\n@media screen and (max-width: 767px) {\n    .icon-row {\n        display: flex;\n        flex-direction: column;\n        gap: 0;\n    }\n\n    .icon-row .icon-item {\n        width: 100%;\n        flex-direction: row;\n        align-items: center;\n        padding: 10px 0;\n        border-bottom: 1px solid #e0e0e0;\n        margin-bottom: 0;\n    }\n\n    .icon-row .icon-item:last-child {\n        border-bottom: none;\n    }\n\n    \/* Hexagon container on the left *\/\n    .icon-item .cstm_image_twd {\n        flex-shrink: 0;\n        width: 80px;\n        margin-right: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-top: 0;\n    }\n\n    .icon-item .cstm_image_twd img {\n        width: 48px !important;\n        height: auto !important;\n    }\n\n    \/* Remove shadow on mobile for cleaner look *\/\n    .icon-item.active .cstm_image_twd::after {\n        display: none;\n    }\n\n    \/* Text content wrapper *\/\n    .icon-item .elementor-widget-heading {\n        flex: 1;\n        margin: 0;\n        text-align: left;\n        display: flex;\n        align-items: center;\n    }\n\n    .icon-item .elementor-widget-heading .elementor-heading-title {\n        font-size: 16px;\n    }\n\n    .icon-item .elementor-widget-heading .elementor-heading-title a {\n        font-size: 16px;\n        text-transform: uppercase;\n        padding: 0;\n        width: auto;\n        margin: 0;\n        border-bottom: none;\n        display: inline;\n        line-height: 1.2;\n        font-family: \"Open Sans\", Sans-serif;\n        color: #253a4f !important;\n    }\n\n    .icon-item.active .elementor-widget-heading .elementor-heading-title a {\n        color: #3c8fa3 !important;\n        border-bottom: 2px solid #3c8fa3;\n        padding-bottom: 2px;\n    }\n\n    .active-green .icon-item.active .elementor-widget-heading .elementor-heading-title a {\n        color: #799357 !important;\n        border-bottom: 2px solid #799357;\n    }\n\n    .active-red .icon-item.active .elementor-widget-heading .elementor-heading-title a {\n        color: #973d49 !important;\n        border-bottom: 2px solid #933c47;\n    }\n}\n    <\/style>\n\n    <div class=\"e-con icon-row e-flex grid grid-cols-2 md:grid-cols-4 gap-6\">\n                    <div class=\"e-con icon-item\" data-id=\"11204\" data-element_type=\"container\">\n                <div class=\"elementor-element cstm_image_twd elementor-widget elementor-widget-image\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n                    <div class=\"elementor-widget-container\">\n                        <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung-angebote\/arbeitsmarkt\/\">\n                                                            <img decoding=\"async\" src=\"https:\/\/www.jugendbildungsstaette.org\/wp-content\/uploads\/2025\/10\/Jubi_Waldmuenchen_Start_Bildung-2.png\" class=\"attachment-full size-full\" alt=\"Angebote\" loading=\"lazy\" \/>\n                                                    <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"elementor-element elementor-widget elementor-widget-heading\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n                    <div class=\"elementor-widget-container\">\n                        <span class=\"elementor-heading-title elementor-size-default\">\n                            <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung-angebote\/arbeitsmarkt\/\">Angebote<\/a>\n                        <\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <div class=\"e-con icon-item\" data-id=\"5824\" data-element_type=\"container\">\n                <div class=\"elementor-element cstm_image_twd elementor-widget elementor-widget-image\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n                    <div class=\"elementor-widget-container\">\n                        <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung\/jahresprogramm\/\">\n                                                            <img decoding=\"async\" src=\"https:\/\/www.jugendbildungsstaette.org\/wp-content\/uploads\/2025\/10\/Jubi_Waldmuenchen_Start_Bildung-2.png\" class=\"attachment-full size-full\" alt=\"Jahresprogramm\" loading=\"lazy\" \/>\n                                                    <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"elementor-element elementor-widget elementor-widget-heading\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n                    <div class=\"elementor-widget-container\">\n                        <span class=\"elementor-heading-title elementor-size-default\">\n                            <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung\/jahresprogramm\/\">Jahresprogramm<\/a>\n                        <\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <div class=\"e-con icon-item\" data-id=\"11619\" data-element_type=\"container\">\n                <div class=\"elementor-element cstm_image_twd elementor-widget elementor-widget-image\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n                    <div class=\"elementor-widget-container\">\n                        <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung-bausteine\/gemeinsam-fuer-eine-nachhaltige-zukunft\/\">\n                                                            <img decoding=\"async\" src=\"https:\/\/www.jugendbildungsstaette.org\/wp-content\/uploads\/2025\/10\/Jubi_Waldmuenchen_Start_Bildung-2.png\" class=\"attachment-full size-full\" alt=\"Bausteine\" loading=\"lazy\" \/>\n                                                    <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"elementor-element elementor-widget elementor-widget-heading\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n                    <div class=\"elementor-widget-container\">\n                        <span class=\"elementor-heading-title elementor-size-default\">\n                            <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung-bausteine\/gemeinsam-fuer-eine-nachhaltige-zukunft\/\">Bausteine<\/a>\n                        <\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <div class=\"e-con icon-item\" data-id=\"5823\" data-element_type=\"container\">\n                <div class=\"elementor-element cstm_image_twd elementor-widget elementor-widget-image\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n                    <div class=\"elementor-widget-container\">\n                        <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung\/verstaendnis\/\">\n                                                            <img decoding=\"async\" src=\"https:\/\/www.jugendbildungsstaette.org\/wp-content\/uploads\/2025\/10\/Jubi_Waldmuenchen_Start_Bildung-2.png\" class=\"attachment-full size-full\" alt=\"Bildungsverst\u00e4ndnis\" loading=\"lazy\" \/>\n                                                    <\/a>\n                    <\/div>\n                <\/div>\n\n                <div class=\"elementor-element elementor-widget elementor-widget-heading\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n                    <div class=\"elementor-widget-container\">\n                        <span class=\"elementor-heading-title elementor-size-default\">\n                            <a href=\"https:\/\/www.jugendbildungsstaette.org\/bildung\/verstaendnis\/\">Bildungsverst\u00e4ndnis<\/a>\n                        <\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <\/div>\n    <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c32cdaf e-flex e-con-boxed e-con e-parent\" data-id=\"c32cdaf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c1b1024 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-child\" data-id=\"c1b1024\" 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-a81e024 elementor-widget elementor-widget-shortcode\" data-id=\"a81e024\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div class=\"filter-bar\">\n        <div class=\"icon\" id=\"resetFilters\">\n            <img decoding=\"async\" src=\"https:\/\/jubi2.dev.sixhop.net\/wp-content\/uploads\/2025\/05\/7A9357.png\" alt=\"Reset Icon\">\n        <\/div>\n\n        <!-- Zielgruppe -->\n        <div class=\"dropdown\" id=\"zielgruppeDropdown\">\n            <div class=\"dropdown-label\" id=\"zielgruppeLabel\">ZIELGRUPPE<\/div>\n            <div class=\"dropdown-options\" id=\"zielgruppeOptions\">\n                <div class=\"dropdown-option loading\">L\u00e4dt...<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Kategorie -->\n        <div class=\"dropdown\" id=\"kategorieDropdown\">\n            <div class=\"dropdown-label\" id=\"kategorieLabel\">KATEGORIE<\/div>\n            <div class=\"dropdown-options\" id=\"kategorieOptions\">\n                <div class=\"dropdown-option loading\">L\u00e4dt...<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Zeitraum -->\n        <div class=\"calendar-inline\">\n            <label for=\"dateRange\">ZEITRAUM<\/label>\n            <input type=\"text\" id=\"dateRange\" placeholder=\"Datum ausw\u00e4hlen\" readonly>\n        <\/div>\n\n        <button type=\"button\" id=\"applyFilters\" class=\"filter-button\">FILTERN<\/button>\n    <\/div>\n\n    <script>\n        jQuery(document).ready(function ($) {\n            const currentFilters = { zielgruppe: '', kategorie: '', date_from: '', date_until: '' };\n            let datePicker = null;\n\n            \/\/ Fetch ACF options\n            async function fetchACFOptions(fieldName) {\n                try {\n                    const response = await fetch(dynamic_filter_vars.ajax_url, {\n                        method: 'POST',\n                        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n                        body: `action=get_acf_field_options&field_name=${fieldName}&nonce=${dynamic_filter_vars.nonce}`\n                    });\n                    const data = await response.json();\n                    if (data.success) return data.data;\n                } catch (error) {\n                    console.warn('Error fetching ACF field:', fieldName);\n                }\n                const fallback = {\n                    zielgruppe: ['Kinder', 'Jugendliche', 'Erwachsene'],\n                    kategorie: ['Umwelt', 'Medien', 'Fortbildung', 'Kultur']\n                };\n                return fallback[fieldName] || [];\n            }\n\n            \/\/ Populate dropdown\n            function populateDropdown(id, options, label) {\n                const wrap = $(`#${id}Options`);\n                wrap.empty();\n                wrap.append(`<div class=\"dropdown-option\" data-value=\"\">Alle<\/div>`);\n                options.forEach(opt => wrap.append(`<div class=\"dropdown-option\" data-value=\"${opt}\">${opt}<\/div>`));\n                $(`#${id}Label`).text(label);\n            }\n\n            \/\/ Initialize datepicker\n            function initDatepicker() {\n                datePicker = flatpickr(\"#dateRange\", {\n                    mode: \"range\",\n                    dateFormat: \"Y-m-d\",\n                    locale: \"de\",\n                    onClose: (selectedDates) => {\n                        if (selectedDates.length === 2) {\n                            currentFilters.date_from = selectedDates[0].toISOString().slice(0, 10);\n                            currentFilters.date_until = selectedDates[1].toISOString().slice(0, 10);\n                        }\n                    }\n                });\n            }\n\n            \/\/ Apply filters\n            \/*function applyFilters() {\n                const url = new URL(window.location.href);\n                ['zielgruppe', 'kategorie', 'date_from', 'date_until'].forEach(key => {\n                    if (currentFilters[key]) url.searchParams.set(key, currentFilters[key]);\n                    else url.searchParams.delete(key);\n                });\n                window.location.href = url.toString();\n            }*\/\n\n            \/\/ Reset\n            $('#resetFilters').on('click', () => window.location.href = dynamic_filter_vars.archive_url);\n            $('#applyFilters').on('click', applyFilters);\n\n            \/\/ Init dropdowns and datepicker\n            \/*(async function initFilters() {\n                initDatepicker();\n                const [zielgruppeOptions, kategorieOptions] = await Promise.all([\n                    fetchACFOptions('zielgruppe'),\n                    fetchACFOptions('kategorie')\n                ]);\n                populateDropdown('zielgruppe', zielgruppeOptions, 'ZIELGRUPPE');\n                populateDropdown('kategorie', kategorieOptions, 'KATEGORIE');\n\n                \/\/ Dropdown select handling\n                $('.dropdown-option').on('click', function () {\n                    const value = $(this).data('value');\n                    const parent = $(this).closest('.dropdown');\n                    const id = parent.attr('id').replace('Dropdown', '');\n                    currentFilters[id] = value;\n                    parent.find('.dropdown-label').text(value || id.toUpperCase());\n                });\n\n                \/\/ Prefill from URL\n                const params = new URLSearchParams(window.location.search);\n                ['zielgruppe', 'kategorie'].forEach(k => {\n                    if (params.get(k)) {\n                        currentFilters[k] = params.get(k);\n                        $(`#${k}Label`).text(params.get(k));\n                    }\n                });\n                if (params.get('date_from') && params.get('date_until')) {\n                    currentFilters.date_from = params.get('date_from');\n                    currentFilters.date_until = params.get('date_until');\n                    datePicker.setDate([params.get('date_from'), params.get('date_until')]);\n                }\n            })();*\/\n        });\n    <\/script>\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-51ce688 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"51ce688\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n  <meta charset=\"UTF-8\">\r\n  <title>Dynamick\u00fd panel filtr\u016f ACF<\/title>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\r\n  <style>\r\n    .filter-bar {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 20px;\r\n      border-bottom: 2px solid #537380;\r\n      padding: 20px;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      background-color: #f8f9fa;\r\n    }\r\n\r\n    .icon {\r\n      width: 26px;\r\n      height: 26px;\r\n      cursor: pointer;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .icon:hover {\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    .icon img {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n      filter: brightness(0) saturate(100%) invert(34%) sepia(9%) saturate(1194%) hue-rotate(147deg) brightness(92%) contrast(92%);\r\n    }\r\n\r\n    .dropdown {\r\n      position: relative;\r\n      font-weight: 700;\r\n      color: black;\r\n      cursor: pointer;\r\n      min-width: 150px;\r\n    }\r\n\r\n    .dropdown-label {\r\n      padding: 8px 12px;\r\n      background-color: white;\r\n      border: 1px solid #c2dde7;\r\n      border-radius: 4px;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n    .dropdown-label::after {\r\n      content: \"\u25bc\";\r\n      font-size: 10px;\r\n      color: black;\r\n      margin-left: 5px;\r\n    }\r\n\r\n    .dropdown-options {\r\n      display: none;\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0;\r\n      right: 0;\r\n      background: white;\r\n      min-width: 120px;\r\n      box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n      z-index: 10;\r\n      max-height: 300px;\r\n      overflow-y: auto;\r\n      border: 1px solid #c2dde7;\r\n      border-top: none;\r\n      border-radius: 0 0 4px 4px;\r\n    }\r\n\r\n    .dropdown:hover .dropdown-options {\r\n      display: block;\r\n    }\r\n\r\n    .dropdown-option {\r\n      padding: 10px 12px;\r\n      font-weight: 500;\r\n      font-size: 14px;\r\n      color: #11233b;\r\n      border-bottom: 1px solid #f0f0f0;\r\n      transition: background-color 0.2s;\r\n    }\r\n\r\n    .dropdown-option:last-child {\r\n      border-bottom: none;\r\n    }\r\n\r\n    .dropdown-option:hover {\r\n      background-color: #537380;\r\n      color: white;\r\n    }\r\n\r\n    .calendar-inline {\r\n      display: flex;\r\n      flex-direction: row;\r\n      align-items: center;\r\n      gap: 10px;\r\n    }\r\n\r\n    .calendar-inline label {\r\n      font-weight: 700;\r\n      color: black;\r\n      cursor: pointer;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    #dateRange {\r\n      border: 2px solid #c2dde7;\r\n      padding: 10px 35px 10px 10px;\r\n      border-radius: 4px;\r\n      font-size: 15px;\r\n      min-width: 250px;\r\n      color: #103B49;\r\n      background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23537380\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>') no-repeat right 10px center;\r\n      background-size: 20px;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .flatpickr-day.selected,\r\n    .flatpickr-day.startRange,\r\n    .flatpickr-day.endRange,\r\n    .flatpickr-day.inRange {\r\n      background: #52727F !important;\r\n      color: white !important;\r\n      border-color: #52727F !important;\r\n    }\r\n\r\n    .loading {\r\n      opacity: 0.7;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .loading::after {\r\n      content: \" (Loading...)\";\r\n      font-weight: normal;\r\n      font-size: 0.8em;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .filter-bar {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n      }\r\n\r\n      .dropdown, .calendar-inline {\r\n        width: 100%;\r\n      }\r\n      \r\n      #dateRange {\r\n        min-width: auto;\r\n        width: 100%;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n\r\n\r\n<div class=\"filter-bar\">\r\n  <!-- Reset Icon -->\r\n  <div class=\"icon\" id=\"resetFilters\" title=\"Obnoven\u00ed filtr\u016f\">\r\n    <img decoding=\"async\" src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/660\/660252.png\" alt=\"Ikona Reset\">\r\n  <\/div>\r\n\r\n  <!-- Dropdown: Zielgruppe -->\r\n  <div class=\"dropdown\" id=\"zielgruppeDropdown\">\r\n    <div class=\"dropdown-label\" id=\"zielgruppeLabel\">C\u00cdLOV\u00c1 SKUPINA<\/div>\r\n    <div class=\"dropdown-options\" id=\"zielgruppeOptions\">\r\n      <div class=\"dropdown-option loading\">Na\u010d\u00edt\u00e1n\u00ed...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Dropdown: Kategorie -->\r\n  <div class=\"dropdown\" id=\"kategorieDropdown\">\r\n    <div class=\"dropdown-label\" id=\"kategorieLabel\">KATEGORIE<\/div>\r\n    <div class=\"dropdown-options\" id=\"kategorieOptions\">\r\n      <div class=\"dropdown-option loading\">Na\u010d\u00edt\u00e1n\u00ed...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Date Range -->\r\n  <div class=\"calendar-inline\">\r\n    <label for=\"dateRange\">\u010cASOV\u00dd PROSTOR<\/label>\r\n    <input type=\"text\" id=\"dateRange\" placeholder=\"Zvolte datum\" readonly>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/l10n\/de.js\"><\/script>\r\n<script>\r\n  \/\/ Configuration\r\n  const customRedirectUrl = \"https:\/\/www.jugendbildungsstaette.org\/bildung\/jahresprogramm\/\";\r\n  const ajaxUrl = \"\/wp-admin\/admin-ajax.php\"; \/\/ WordPress AJAX URL\r\n\r\n  \/\/ Function to fetch ACF field options\r\n  async function fetchACFOptions(fieldName) {\r\n    try {\r\n      const response = await fetch(ajaxUrl, {\r\n        method: 'POST',\r\n        headers: {\r\n          'Content-Type': 'application\/x-www-form-urlencoded',\r\n        },\r\n        body: `action=get_acf_field_options&field_name=${fieldName}`\r\n      });\r\n      \r\n      if (!response.ok) {\r\n        throw new Error(`HTTP error! status: ${response.status}`);\r\n      }\r\n      \r\n      const data = await response.json();\r\n      \r\n      if (data.success) {\r\n        return data.data;\r\n      } else {\r\n        throw new Error(data.data || 'Unknown error');\r\n      }\r\n    } catch (error) {\r\n      console.error(`Error fetching ${fieldName} options:`, error);\r\n      return [];\r\n    }\r\n  }\r\n\r\n  \/\/ Function to populate dropdown with options\r\n  function populateDropdown(dropdownId, options, defaultLabel) {\r\n    const dropdownOptions = document.getElementById(`${dropdownId}Options`);\r\n    dropdownOptions.innerHTML = '';\r\n    \r\n    \/\/ Add \"Alle\" option\r\n    const allOption = document.createElement('div');\r\n    allOption.className = 'dropdown-option';\r\n    allOption.dataset.value = 'all';\r\n    allOption.textContent = 'Alle';\r\n    dropdownOptions.appendChild(allOption);\r\n    \r\n    \/\/ Add options from ACF field\r\n    options.forEach(value => {\r\n      const option = document.createElement('div');\r\n      option.className = 'dropdown-option';\r\n      option.dataset.value = value;\r\n      option.textContent = value;\r\n      dropdownOptions.appendChild(option);\r\n    });\r\n    \r\n    \/\/ Update dropdown label if it's still showing \"Loading...\"\r\n    const dropdownLabel = document.getElementById(`${dropdownId}Label`);\r\n    if (dropdownLabel.textContent.includes('Loading')) {\r\n      dropdownLabel.textContent = defaultLabel;\r\n    }\r\n  }\r\n\r\n  \/\/ Initialize all dropdowns\r\n  async function initializeDropdowns() {\r\n    try {\r\n      \/\/ Fetch options for both dropdowns in parallel\r\n      const [zielgruppeOptions, kategorieOptions] = await Promise.all([\r\n        fetchACFOptions('zielgruppe'),\r\n        fetchACFOptions('kategorie')\r\n      ]);\r\n      \r\n      \/\/ Populate dropdowns\r\n      populateDropdown('zielgruppe', zielgruppeOptions, 'ZIELGRUPPE');\r\n      populateDropdown('kategorie', kategorieOptions, 'KATEGORIE');\r\n      \r\n      \/\/ Setup event listeners after dropdowns are populated\r\n      setupDropdownListeners();\r\n      \r\n    } catch (error) {\r\n      console.error('Error initializing dropdowns:', error);\r\n      \r\n      \/\/ Show error message in dropdowns\r\n      const errorMessage = 'Error loading options';\r\n      populateDropdown('zielgruppe', [], errorMessage);\r\n      populateDropdown('kategorie', [], errorMessage);\r\n    }\r\n  }\r\n\r\n  \/\/ Initialize date picker\r\n  const datePicker = flatpickr(\"#dateRange\", {\r\n    mode: \"range\",\r\n    dateFormat: \"d.m.Y\",\r\n    locale: \"de\",\r\n    onClose: function (selectedDates) {\r\n      if (selectedDates.length === 2) {\r\n        const startDate = selectedDates[0];\r\n        const endDate = selectedDates[1];\r\n        \r\n        \/\/ Format dates for display\r\n        const formattedStart = datePicker.formatDate(startDate, \"d.m.Y\");\r\n        const formattedEnd = datePicker.formatDate(endDate, \"d.m.Y\");\r\n        document.getElementById('dateRange').value = `${formattedStart} \u2013 ${formattedEnd}`;\r\n        \r\n        \/\/ You can add date-based filtering logic here\r\n        console.log(\"Selected date range:\", startDate, \"to\", endDate);\r\n      }\r\n    }\r\n  });\r\n\r\n  \/\/ Dropdown Redirection\r\n  function setupDropdownListeners() {\r\n    document.querySelectorAll('.dropdown-option').forEach(option => {\r\n      \/\/ Remove existing listeners to prevent duplicates\r\n      option.replaceWith(option.cloneNode(true));\r\n    });\r\n    \r\n    document.querySelectorAll('.dropdown-option').forEach(option => {\r\n      option.addEventListener('click', function () {\r\n        const dropdown = this.closest('.dropdown');\r\n        const label = dropdown.querySelector('.dropdown-label');\r\n        const selectedValue = this.dataset.value;\r\n        \r\n        \/\/ Update dropdown label\r\n        if (label) {\r\n          label.textContent = selectedValue === \"all\" ? \r\n            (dropdown.id === \"kategorieDropdown\" ? \"KATEGORIE\" : \"ZIELGRUPPE\") : \r\n            selectedValue;\r\n        }\r\n        \r\n        \/\/ Handle \"all\" option - redirect to main page without filter\r\n        if (selectedValue === \"all\") {\r\n          window.location.href = customRedirectUrl;\r\n        } \r\n        \/\/ Handle specific filter selection\r\n        else {\r\n          \/\/ Determine which filter is being applied\r\n          const filterType = dropdown.id === \"zielgruppeDropdown\" ? \"zielgruppe\" : \"kategorie\";\r\n          const fullUrl = `${customRedirectUrl}?${filterType}=${encodeURIComponent(selectedValue)}`;\r\n          window.location.href = fullUrl;\r\n        }\r\n      });\r\n    });\r\n  }\r\n\r\n  \/\/ Reset Filters - redirect to main page\r\n  document.getElementById('resetFilters').addEventListener('click', function () {\r\n    \/\/ Reset dropdown labels\r\n    document.getElementById('zielgruppeLabel').textContent = 'ZIELGRUPPE';\r\n    document.getElementById('kategorieLabel').textContent = 'KATEGORIE';\r\n    \r\n    \/\/ Reset date picker\r\n    datePicker.clear();\r\n    \r\n    \/\/ Redirect to main page\r\n    window.location.href = customRedirectUrl;\r\n  });\r\n\r\n  \/\/ Initialize the filter when DOM is loaded\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    initializeDropdowns();\r\n  });\r\n<\/script>\r\n\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7b024c1 e-grid e-con-full e-con e-child\" data-id=\"7b024c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb2d8a6 elementor-widget elementor-widget-shortcode\" data-id=\"cb2d8a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"facetwp-facet facetwp-facet-jp_zielgruppe facetwp-type-dropdown\" data-name=\"jp_zielgruppe\" data-type=\"dropdown\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a90fad3 elementor-widget elementor-widget-shortcode\" data-id=\"a90fad3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"facetwp-facet facetwp-facet-jp_kategorie facetwp-type-dropdown\" data-name=\"jp_kategorie\" data-type=\"dropdown\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f14df47 elementor-widget elementor-widget-shortcode\" data-id=\"f14df47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"facetwp-facet facetwp-facet-jp_datum facetwp-type-date_range\" data-name=\"jp_datum\" data-type=\"date_range\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-89c3d43 e-flex e-con-boxed e-con e-parent\" data-id=\"89c3d43\" 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-d85928d elementor-widget elementor-widget-facetwp-listing\" data-id=\"d85928d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"facetwp-listing.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"facetwp-template\" data-name=\"jahresprogramm\"><div class=\"fwpl-layout el-rq15qo\"><\/div>\n<style>\n.fwpl-layout, .fwpl-row {\n    display: grid;\n}\n.fwpl-layout.el-rq15qo {\n    grid-template-columns: repeat(1, 1fr);\n    grid-gap: 10px;\n}\n.fwpl-btn {\n    text-decoration: none;\n}\n@media (max-width: 480px) { \n    body .facetwp-template .fwpl-layout,  \n    body .facetwp-template-static .fwpl-layout { grid-template-columns: 1fr; } \n} \n\n<\/style>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb10226 elementor-widget elementor-widget-shortcode\" data-id=\"fb10226\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"facetwp-pager\"><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"facetwp-template facetwp-elementor-widget elementor-element elementor-element-ca45623 elementor-grid-1 elementor-grid-tablet-1 elementor-posts-container elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-grid-mobile-1 elementor-widget elementor-widget-loop-grid\" data-id=\"ca45623\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;template_id&quot;:6009,&quot;columns&quot;:1,&quot;columns_tablet&quot;:1,&quot;pagination_type&quot;:&quot;load_more_on_click&quot;,&quot;_skin&quot;:&quot;post&quot;,&quot;columns_mobile&quot;:&quot;1&quot;,&quot;edit_handle_selector&quot;:&quot;[data-elementor-type=\\&quot;loop-item\\&quot;]&quot;,&quot;load_more_spinner&quot;:{&quot;value&quot;:&quot;fas fa-spinner&quot;,&quot;library&quot;:&quot;fa-solid&quot;},&quot;row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"loop-grid.post\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-loop-nothing-found-message\">\n\t\t\t\t\t<div class=\"e-loop-nothing-found-message__text\">\n\t\t\t\tZd\u00e1 se, \u017ee nem\u016f\u017eeme naj\u00edt to, co hled\u00e1te.\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\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>UDR\u017dITELN\u00c9 U\u010cEN\u00cd. JEDNEJTE D\u016eRAZN\u011a. Dynamick\u00fd panel filtr\u016f ACF C\u00cdLOV\u00c1 SKUPINA Na\u010d\u00edt\u00e1n\u00ed&#8230; KATEGORIE Na\u010d\u00edt\u00e1n\u00ed&#8230; \u010cASOV\u00dd PROSTOR 165 \u20ac, erm\u00e4\u00dfigt 155 \u20ac Du hast Texte oder Slams, aber keine B\u00fchne? Talente ab 16 bekommen hier professionelle Unterst\u00fctzung und sammeln neue Erfahrungen. INFO &amp; ANMELDEN Talentschmiede I &#8211; powered by Raum und CHA13 25 \u20ac In dieser praxisnahen &#8230; <a title=\"Ro\u010dn\u00ed program\" class=\"read-more\" href=\"https:\/\/www.jugendbildungsstaette.org\/cs\/rocni-program\/\" aria-label=\"\u010c\u00edst v\u00edce o Ro\u010dn\u00ed program\">\u010c\u00edst d\u00e1l<\/a><\/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":{"_acf_changed":false,"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-7903","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/pages\/7903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/comments?post=7903"}],"version-history":[{"count":15,"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/pages\/7903\/revisions"}],"predecessor-version":[{"id":8130,"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/pages\/7903\/revisions\/8130"}],"wp:attachment":[{"href":"https:\/\/www.jugendbildungsstaette.org\/cs\/wp-json\/wp\/v2\/media?parent=7903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}