Event Calendar<\/title>\n <style>\n .fa { padding-right: 10px; }\n .fa-map-marker-alt { padding-left: 5px; }\n .calendar h3 {\n color: #1c7c7c!important;\n margin-top: 13px;\n line-height: 0px!important;\n font-family: 'Roboto', sans-serif;\n font-size: 1.25rem; \/* Adjust h3 size to a relative size *\/\n }\n .calendar p {\n font-family: 'Roboto', sans-serif !important;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n font-size: 14px!important; \/* Set a base font size *\/\n }\n .calendar {\n width: 100%;\n margin: 0px;\n border: 1px solid #ddd;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n padding: 5px;\n background-color: #ffffff;\n }\n .event {\n padding: 10px;\n border-bottom: 1px solid #ddd;\n cursor: pointer;\n background-color: #f9f9f9;\n }\n .event:last-child {\n border-bottom: none;\n }\n .event:hover {\n background-color: #f0f0f0;\n }\n .event-details {\n display: none;\n padding: 10px;\n margin-top: 5px;\n background-color: #fff;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transition: max-height 0.4s ease-out, opacity 0.4s ease-out;\n }\n .event-details.open {\n max-height: 500px; \/* Higher max-height for smoother transition *\/\n opacity: 1;\n }\n .event a {\n color: #1c7c7c;\n text-decoration: none;\n }\n .event a:hover {\n text-decoration: underline;\n }\n .calendar-buttons {\n display: none!important;\n margin-top: 10px;\n display: flex; \/* Flexbox for horizontal button alignment *\/\n gap: 8px; \/* Add a gap between the buttons *\/\n flex-wrap: wrap; \/* Allow buttons to wrap on mobile *\/\n }\n .calendar-buttons a {\n padding: 5px 10px;\n background-color: #1c7c7c;\n color: #fff;\n border-radius: 4px;\n text-decoration: none;\n font-size: 14px;\n font-family: 'Roboto', sans-serif !important; \/* Apply Roboto font *\/\n white-space: nowrap; \/* Prevent button text from wrapping *\/\n margin-bottom: 8px; \/* Add some margin to space out buttons *\/\n width: auto;\n }\n .calendar-buttons a:hover {\n background-color: #145c5c;\n }\n\n \/* For mobile, adjust font sizes and padding *\/\n @media (max-width: 600px) {\n .fa { padding-right: 6px; }\n .calendar p {\n font-size: 10px; \/* Reduce font size for mobile *\/\n }\n .calender h3 {\n margin-top: 1px;\n margin-bottom: 10px;\n font-size: 1.1rem!important; \/* Adjust h3 size for mobile *\/\n line-height: 25px!important;\n }\n .calendar-buttons a {\n font-size: 12px;\n padding: 8px 16px; \/* Adjust button size for mobile *\/\n width: 100%; \/* Ensure buttons fill the screen width *\/\n box-sizing: border-box; \/* Ensure buttons take full width without cutting off *\/\n margin-bottom: 8px; \/* Add margin to stack buttons properly *\/\n }\n .event {\n padding: 8px; \/* Adjust padding on mobile *\/\n }\n\n \/* Add day icon next to date *\/\n .event p:first-child {\n display: flex;\n align-items: center;\n }\n\n \/* More space between calendar icon and date *\/\n .event p:first-child i {\n font-size: 20px;\n margin-right: 12px; \/* Add more space between the icon and date text *\/\n }\n\n \/* Add an icon for description *\/\n .event p:last-child {\n display: flex;\n align-items: center;\n }\n\n .event p:last-child i {\n font-size: 18px;\n margin-right: 10px; \/* Space between the icon and the description text *\/\n }\n }\n\n \/* Extra Mobile: Make sure buttons have enough space and no overlap *\/\n @media (max-width: 480px) {\n .calendar-buttons a {\n font-size: 14px !important;\n padding: 10px;}\n .calender h3 {line-height: 25px!important;}\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"calendar\">\n\n \n <div class=\"event\" onclick=\"toggleDetails(this)\">\n <h3>Vortrag \"Lebenswertes oberstes Toggenburg\"<\/h3>\n <p><i class=\"fa fa-calendar-day\"><\/i><strong>7.02.2026 20:15<\/strong> <i class=\"fa fa-map-marker-alt\"><\/i><strong> Wildhaus<\/strong><\/p>\n <div class=\"event-details\">\n <p><a href=\"https:\/\/www.outdooractive.com\/de\/event\/ostschweiz-liechtenstein\/verborgene-tierwelt-in-unserer-nachbarschaft\/809600949\/\" target=\"_blank\">Mehr Informationen.<\/a><\/p>\n <\/div>\n <\/div> \n <div class=\"event\" onclick=\"toggleDetails(this)\">\n <h3>NaturVision Filmtage<\/h3>\n <p><i class=\"fa fa-calendar-day\"><\/i><strong>8.02.2026 13:00<\/strong> <i class=\"fa fa-map-marker-alt\"><\/i><strong> Naturmuseum St. Gallen<\/strong><\/p>\n <div class=\"event-details\">\n <p>Filmscreening von THE LEAP BENEATH, SANDCASTLE & RISKY ROUTES mit anschliessendem Q&A.<a href=\"https:\/\/naturmuseumsg.ch\/wp-content\/uploads\/2024\/12\/Flyer_SG_2026_260107_LR.pdf\" target=\"_blank\">Mehr Informationen.<\/a><\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n\n <script>\n let currentlyOpenEvent = null;\n\n function toggleDetails(eventElement) {\n const details = eventElement.querySelector('.event-details');\n const isOpen = details.style.display === 'block';\n if (currentlyOpenEvent && currentlyOpenEvent !== eventElement) {\n const openDetails = currentlyOpenEvent.querySelector('.event-details');\n openDetails.classList.remove('open');\n setTimeout(() => {\n openDetails.style.display = 'none';\n }, 400);\n }\n if (!isOpen) {\n details.style.display = 'block';\n setTimeout(() => {\n details.classList.add('open');\n }, 10);\n currentlyOpenEvent = eventElement;\n } else {\n details.classList.remove('open');\n setTimeout(() => {\n details.style.display = 'none';\n }, 400);\n currentlyOpenEvent = null;\n }\n }\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Offers I love sharing my passion for wildlife and storytelling through engaging talks, hands-on workshops, and immersive exhibitions. Whether you’re interested in behind-the-scenes stories from the field, learning photography techniques, or experiencing nature through my lens, there’s something for everyone. Check out my upcoming Workshops and Talks below! Shop Workshops (Film-)Talks Exhibitions Upcoming Currently there […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"_vp_custom_popup_image":0,"_vp_format_audio_url":"","_vp_album_images":[],"_vp_custom_thumbnail":0,"_vp_custom_thumbnail_focal_point":[],"_vp_custom_thumbnail_cover":0,"_vp_hover_thumbnail":0,"_vp_hover_thumbnail_focal_point":[],"footnotes":""},"class_list":["post-7522","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/pages\/7522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/comments?post=7522"}],"version-history":[{"count":142,"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/pages\/7522\/revisions"}],"predecessor-version":[{"id":8297,"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/pages\/7522\/revisions\/8297"}],"wp:attachment":[{"href":"https:\/\/romanwilli.com\/de\/wp-json\/wp\/v2\/media?parent=7522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}