@@ Zeile 1: / Zeile 1: @@
 <html>
 <script>
-window.addEventListener('load', function() {
+(function ($) {
+    'use strict';
      var WEBINARE = [
-         { titel: 'Kanabis Release V11', datum: '28.01.2026', tag: 'kanabis', link: 'Kanabis_Webinare' },
+         { titel: 'Kanabis Release V11', datum: '28.01.2026', tag: 'kanabis', video: '20260128 KANABIS Release V11.mp4' },
-         { titel: 'Betriebsfuehrung: Digital und Bedarfsorientiert', datum: '17.12.2025', tag: 'togo', link: 'ToGo-Erneuerungen' },
+         { titel: 'Betriebsfuehrung: Digital & Bedarfsorientiert', datum: '17.12.2025', tag: 'togo', video: 'Betriebsführung Digital Bedarfsorientiert von der Idee in die Praxis.mp4' },
-         { titel: 'Automatische Kanalsanierungsplanung', datum: '12.11.2025', tag: 'kasa', link: 'Automatische_Kanalsanierungsplanung' },
+         { titel: 'Automatische Kanalsanierungsplanung', datum: '12.11.2025', tag: 'kasa', video: 'Automatische Kanalsanierungsplanung Gastbeitrag Aquadocs 251112.mp4' },
-         { titel: 'DWA A 118 / DWA M 119 - Ueberstau und Risikomanagement', datum: '08.10.2025', tag: 'hydraulik', link: 'Schutzkategorien_%26_%C3%9Cberflutungsgef%C3%A4hrdung' },
+         { titel: 'DWA A 118 / DWA M 119 - Ueberstau & Risikomanagement', datum: '08.10.2025', tag: 'hydraulik', video: 'Risikomanagement nach DWAA118 DWAM119 20251008.mp4' },
-         { titel: 'V17 - Releasenews', datum: '04.06.2025', tag: 'release', link: 'Release_News_Version_17' },
+         { titel: 'V17 - Releasenews', datum: '04.06.2025', tag: 'release', video: '20250604 Release Lech V17.mp4' },
-         { titel: 'GeoCPM - Worauf ist bei der Modellierung zu achten?', datum: '09.04.2025', tag: 'geocpm', link: 'GeoCPM_Modellierungsprozess' },
+         { titel: 'GeoCPM - Worauf ist bei der Modellierung zu achten?', datum: '09.04.2025', tag: 'geocpm', video: 'GeoCPM - Worauf ist bei der Modellierung zu achten.mp4' },
-         { titel: 'GeoCPM - Kommunale Sturzfluten / Risikomanagement', datum: '12.03.2025', tag: 'geocpm', link: 'Erneuerungen_GeoCPM' },
+         { titel: 'GeoCPM - Kommunale Sturzfluten / Risikomanagement', datum: '12.03.2025', tag: 'geocpm', video: '250312 BEST PRACTICE Starkregenberechnungen.mp4' },
-         { titel: 'MEGAMAP - Die intelligente Leitungsauskunft', datum: '05.03.2025', tag: 'allgemein', link: 'Megamap' },
+         { titel: 'MEGAMAP - Die intelligente Leitungsauskunft', datum: '05.03.2025', tag: 'allgemein', video: 'MEGAMAP - Die intelligente Leitungsauskunft für Netzbetreiber.mp4' },
-         { titel: 'AQUA++ - Theorie, Modellierung und Fehlersuche', datum: '19.02.2025', tag: 'aqua', link: 'AQUA%2B%2B_Webinare' },
+         { titel: 'AQUA++ - Theorie, Modellierung und Fehlersuche', datum: '19.02.2025', tag: 'aqua', video: 'Drucknetzberechnung von Wasserversorgungsnetzen.mp4' },
-         { titel: 'ToGo - Digitalisierung im Kanalbetrieb', datum: '19.12.2024', tag: 'togo', link: 'ToGo-Erneuerungen' },
+         { titel: 'ToGo - Digitalisierung im Kanalbetrieb', datum: '19.12.2024', tag: 'togo', video: 'BetriebToGo - Digitalisierung im Kanalbetrieb Webinar 241219.mp4' },
-         { titel: 'Datenubernahme aus GIS-Systemen', datum: '06.11.2024', tag: 'allgemein', link: 'Daten%C3%BCbernahme_Strakat' },
+         { titel: 'Datenubernahme aus GIS-Systemen', datum: '06.11.2024', tag: 'allgemein', video: 'Datenübernahme aus bestehenden GIS-Systemen - am Beispiel STRAKAT Webinar 241106.mp4' },
-         { titel: 'KI in der Zustandserfassung', datum: '09.10.2024', tag: 'kasa', link: 'KI_Zustandserfassung' },
+         { titel: 'KI in der Zustandserfassung', datum: '09.10.2024', tag: 'kasa', video: 'KI Kanalzustandserfassung Webinar 241009.mp4' },
-         { titel: 'INSIDe-Projekt', datum: '02.10.2024', tag: 'allgemein', link: 'Inside_Forschungsprojekt' },
+         { titel: 'INSIDe-Projekt', datum: '02.10.2024', tag: 'allgemein', video: 'INSIDe Webinar 241002.mp4' },
-         { titel: 'V16 - Import Radklim', datum: '03.06.2024', tag: 'release', link: 'Import_RADKLIM' },
+         { titel: 'V16 - Import Radklim', datum: '03.06.2024', tag: 'release', video: '20240603 Radklim V16.mp4' },
-         { titel: 'V16 - Zeichentool', datum: '27.06.2024', tag: 'release', link: 'Zeichen-Tool' },
+         { titel: 'V16 - Zeichentool', datum: '27.06.2024', tag: 'release', video: '20240627 V16 Zeichentool.mp4' },
-         { titel: 'V16 - Geo3D Erneuerungen', datum: '25.06.2024', tag: 'geocpm', link: 'Geo3D-Allgemein' },
+         { titel: 'V16 - Geo3D Erneuerungen', datum: '25.06.2024', tag: 'geocpm', video: '25062024 Geo3D.mp4' },
-         { titel: 'V16 - GeoCPM Neuerungen: Durchlaesse', datum: '20.06.2024', tag: 'geocpm', link: 'Durchlass_GeoCPM' },
+         { titel: 'V16 - GeoCPM Neuerungen: Durchlaesse', datum: '20.06.2024', tag: 'geocpm', video: '20240620 V16 GeoCPM.mp4' },
-         { titel: 'V16 - Releasenews', datum: '18.06.2024', tag: 'release', link: 'Release_News' },
+         { titel: 'V16 - Releasenews', datum: '18.06.2024', tag: 'release', video: '2024618 Release V16.mp4' },
-         { titel: 'GeoCPM - DGM-Ausduennung Tipps und Tricks', datum: '24.04.2024', tag: 'geocpm', link: 'Optimierung_durch_Ausd%C3%BCnnung' },
+         { titel: 'GeoCPM - DGM-Ausduennung Tipps & Tricks', datum: '24.04.2024', tag: 'geocpm', video: '20240424 Webinar Ausdünnung.mp4' },
-         { titel: 'Kanabis Release V10', datum: '09.04.2024', tag: 'kanabis', link: 'KANABIS-Vergangene_Webinare' },
+         { titel: 'Kanabis Release V10', datum: '09.04.2024', tag: 'kanabis', video: '20240409 KANABIS Release V10.mp4' },
-         { titel: 'WIKI - Umfrage und Erneuerungen', datum: '20.03.2024', tag: 'allgemein', link: 'Wiki' },
+         { titel: 'WIKI - Umfrage & Erneuerungen', datum: '20.03.2024', tag: 'allgemein', video: '20240319 Wiki&Umfrage.mp4' },
-         { titel: 'GeoCPM - Sturzflut-Risikomanagement Bayern', datum: '16.11.2023', tag: 'geocpm', link: 'Erneuerungen_GeoCPM' },
+         { titel: 'GeoCPM - Sturzflut-Risikomanagement Bayern', datum: '16.11.2023', tag: 'geocpm', video: 'GeoCPM Konzepte zum kommunalen Sturzflut-Risikomanagement in Bayern.mp4' },
-         { titel: 'Flow V15: Neuerungen', datum: '09.11.2023', tag: 'flow', link: 'Bilanzierung_des_Zentralbeckens' },
+         { titel: 'Flow V15: Neuerungen', datum: '09.11.2023', tag: 'flow', video: '20231109 Webinar FLOW-Bestpractice.mp4' },
-         { titel: 'GeoCPM Best Practice V15: Strukturen', datum: '02.11.2023', tag: 'geocpm', link: 'Erneuerungen_GeoCPM' },
+         { titel: 'GeoCPM Best Practice V15: Strukturen', datum: '02.11.2023', tag: 'geocpm', video: '20231107 GeoCPM Bestpractice.mp4' },
-         { titel: 'GeoCPM Erneuerungen V15: OBOs', datum: '19.10.2023', tag: 'geocpm', link: 'Erneuerungen_GeoCPM' },
+         { titel: 'GeoCPM Erneuerungen V15: OBOs', datum: '19.10.2023', tag: 'geocpm', video: '20231019 GeoCPM V15.mp4' },
-         { titel: 'Release Version 15: Inn', datum: '18.10.2023', tag: 'release', link: 'Release_News_Version_15' },
+         { titel: 'Release Version 15: Inn', datum: '18.10.2023', tag: 'release', video: '20231018 Inn Release 15-00-00.mp4' },
-         { titel: 'Kanabis Release V9', datum: '09.02.2023', tag: 'kanabis', link: 'KANABIS-Vergangene_Webinare' },
+         { titel: 'Kanabis Release V9', datum: '09.02.2023', tag: 'kanabis', video: '20230210-KANABIS-Release Version 9.mp4' },
-         { titel: 'Neuerungen KASAnova', datum: '01.12.2022', tag: 'kasa', link: 'Kasanova_Erneuerungen' },
+         { titel: 'Neuerungen KASAnova', datum: '01.12.2022', tag: 'kasa', video: '20221129 Webinar KasaNova 14 10 00.mp4' },
-         { titel: 'Release Version 14.10.00: Main', datum: '24.11.2022', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Release Version 14.10.00: Main', datum: '24.11.2022', tag: 'release', video: '20221124 Release V14.10.00.mp4' },
-         { titel: 'Genauigkeit von Gelaendemodellen', datum: '03.05.2022', tag: 'geocpm', link: 'Optimierung_durch_Ausd%C3%BCnnung' },
+         { titel: 'GeoCPM - Genauigkeit von Gelaendemodellen', datum: '03.05.2022', tag: 'geocpm', video: '20220503 GeoCPM Praxis Ausdünnung.mp4' },
-         { titel: 'A102 + Flow + Practice', datum: '05.04.2022', tag: 'flow', link: 'DWA_A102' },
+         { titel: 'A102 & Flow & Practice', datum: '05.04.2022', tag: 'flow', video: '20220405 Flow A102 Best-Practice.mp4' },
-         { titel: 'Radolan Daten fuer GeoCPM', datum: '22.03.2022', tag: 'geocpm', link: 'Aquazis' },
+         { titel: 'Radolan Daten fuer GeoCPM', datum: '22.03.2022', tag: 'geocpm', video: '20220323 Radolan aus Aquazis.mp4' },
-         { titel: 'Release Version 14: Main', datum: '08.02.2022', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Release Version 14: Main', datum: '08.02.2022', tag: 'release', video: '20220208 Release Main V14.mp4' },
-         { titel: 'Kanabis Release Version 8', datum: '09.12.2021', tag: 'kanabis', link: 'KANABIS-Vergangene_Webinare' },
+         { titel: 'Kanabis Release Version 8', datum: '09.12.2021', tag: 'kanabis', video: '20211209 KANABIS Release V8.0.0.mp4' },
-         { titel: 'Geo3D Best-Practice', datum: '24.11.2021', tag: 'geocpm', link: 'Geo3D-Allgemein' },
+         { titel: 'Geo3D Best-Practice', datum: '24.11.2021', tag: 'geocpm', video: '20211124 Geo3D BestPractise.mp4' },
-         { titel: 'Numerische Simulation', datum: '17.11.2021', tag: 'hydraulik', link: 'Numerische_Simulation' },
+         { titel: 'Numerische Simulation', datum: '17.11.2021', tag: 'hydraulik', video: '20211117 NumerischeSimulationen.mp4' },
-         { titel: 'A102 + Flow', datum: '09.11.2021', tag: 'flow', link: 'DWA_A102' },
+         { titel: 'A102 & Flow', datum: '09.11.2021', tag: 'flow', video: '20211109 A102 Flow.mp4' },
-         { titel: '++SYSTEMS Projektdateimanagement 2.0', datum: '27.10.2021', tag: 'allgemein', link: 'Vergleichs-_und_Importkonfiguration' },
+         { titel: '++SYSTEMS Projektdateimanagement 2.0', datum: '27.10.2021', tag: 'allgemein', video: '20211027 Projektdateimanagement 2.mp4' },
-         { titel: 'Manueller Laengsschnitt', datum: '06.10.2021', tag: 'hydraulik', link: 'Manueller_L%C3%A4ngsschnitt' },
+         { titel: 'Manueller Laengsschnitt', datum: '06.10.2021', tag: 'hydraulik', video: '20211006 Längsschnitt.mp4' },
-         { titel: 'Starkregen - Kommunales Risikomanagement', datum: '20.10.2021', tag: 'geocpm', link: 'GeoCPM_Vergangene_Erneuerungen' },
+         { titel: 'Starkregen - Kommunales Risikomanagement', datum: '20.10.2021', tag: 'geocpm', video: '20211020 GeoCPM KSRRM.mp4' },
-         { titel: 'BIM + Betriebsprozesse', datum: '13.10.2021', tag: 'togo', link: 'ToGo-Erneuerungen' },
+         { titel: 'BIM & Betriebsprozesse', datum: '13.10.2021', tag: 'togo', video: '20211013 BIM&Betriebsprozesse.mp4' },
-         { titel: 'Version 13 Donau3D Erneuerungen', datum: '20.05.2021', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Version 13 Donau3D Erneuerungen', datum: '20.05.2021', tag: 'release', video: 'Release ++SYSTEMS Donau.mp4' },
-         { titel: 'Visualisierung mit dem neuen 3DTool', datum: '22.04.2021', tag: 'geocpm', link: 'Geo3D-Allgemein' },
+         { titel: 'Visualisierung mit dem neuen 3DTool', datum: '22.04.2021', tag: 'geocpm', video: '2021-04-21 Geo3D.mp4' },
-         { titel: 'Aufbereitung von Eingangsdaten mit QGIS', datum: '13.04.2021', tag: 'allgemein', link: 'QGIS' },
+         { titel: 'Aufbereitung von Eingangsdaten mit QGIS', datum: '13.04.2021', tag: 'allgemein', video: '20210413 QGIS Eingangsdaten.mp4' },
-         { titel: 'Vorstellung der neuen Dokumentationsplattform WIKI', datum: '24.03.2021', tag: 'allgemein', link: 'Wiki' },
+         { titel: 'Vorstellung der neuen Dokumentationsplattform WIKI', datum: '24.03.2021', tag: 'allgemein', video: '2021-03-24 WIKI.mp4' },
-         { titel: '++SYSTEMS Kanalzustand und Sanierung', datum: '10.03.2021', tag: 'kasa', link: 'Kasanova_Erneuerungen' },
+         { titel: '++SYSTEMS Kanalzustand und Sanierung', datum: '10.03.2021', tag: 'kasa', video: 'Webinar Kasanova 20210310.mp4' },
-         { titel: 'Multi-User-Plattformen', datum: '03.03.2021', tag: 'allgemein', link: 'Datenbanken' },
+         { titel: 'Multi-User-Plattformen', datum: '03.03.2021', tag: 'allgemein', video: '2021-03-03 10.00 Datenbanken - Multi-User-Plattform.mp4' },
-         { titel: 'Erneuerungen und Best-Practice Feb 2021', datum: '17.02.2021', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Erneuerungen und Best-Practice Feb 2021', datum: '17.02.2021', tag: 'release', video: '++SYSTEMS Isar Neuerungen & Best Practise.mp4' },
-         { titel: 'Entwurfsplanung', datum: '09.12.2020', tag: 'hydraulik', link: 'Entwurfsplanung_Webinar' },
+         { titel: 'Entwurfsplanung', datum: '09.12.2020', tag: 'hydraulik', video: '09122020 Entwurfsplanung.mp4' },
-         { titel: 'GeoCPM Best Practice Dez 2020', datum: '03.12.2020', tag: 'geocpm', link: 'GeoCPM_Vergangene_Erneuerungen' },
+         { titel: 'GeoCPM Best Practice Dez 2020', datum: '03.12.2020', tag: 'geocpm', video: 'GeoCPM Neuerungen und Best Practise comp.mp4' },
-         { titel: 'Vom Radar zum Simulationsergebnis I', datum: '02.12.2020', tag: 'geocpm', link: 'Einbinden_von_Radardaten' },
+         { titel: 'Flow - Best Practice', datum: '18.11.2020', tag: 'flow', video: 'Flow Best Practice 20201215.mp4' },
-         { titel: 'Vom Radar zum Simulationsergebnis II', datum: '24.11.2020', tag: 'geocpm', link: 'Einbinden_von_Radardaten' },
+         { titel: 'Erneuerungen und Best-Practice Nov 2020', datum: '11.11.2020', tag: 'release', video: '20201111 SYSTEMS ReleaseIsar2.mp4' },
-         { titel: 'Flow - Best Practice', datum: '18.11.2020', tag: 'flow', link: 'Schritt-f%C3%BCr-Schritt-Anleitung_Flow' },
+         { titel: 'Bedarfsorientierte Kanalreinigung', datum: '12.05.2020', tag: 'togo', video: '20200512 Togo Kanalreinigung.mp4' },
-         { titel: 'Erneuerungen und Best-Practice Nov 2020', datum: '11.11.2020', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Erneuerungen und Best-Practice Apr 2020', datum: '30.04.2020', tag: 'release', video: '20200430 SYSTEMS Erneuerungen.mp4' },
-         { titel: 'GeoCPM Best Practice Mai 2020', datum: '17.05.2020', tag: 'geocpm', link: 'GeoCPM_Vergangene_Erneuerungen' },
+         { titel: 'Release V12 - Neues Look and Feel', datum: '28.04.2020', tag: 'release', video: '20200428 SYSTEMS ISAR Release Neues Look Feel.mp4' },
-         { titel: 'Bedarfsorientierte Kanalreinigung', datum: '12.05.2020', tag: 'togo', link: 'ToGo-Erneuerungen' },
+         { titel: 'Anbindung von Datenbanken', datum: '07.03.2020', tag: 'allgemein', video: 'Anbindung Datenbanken 20180307.mp4' },
-         { titel: 'Erneuerungen und Best-Practice Apr 2020', datum: '30.04.2020', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Starkregenrisikomanagement LUBW II', datum: '29.05.2019', tag: 'geocpm', video: 'Leitfaden LUBW GeoCPM 201905229.mp4' },
-         { titel: 'Release V12 - Neues Look and Feel', datum: '28.04.2020', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'Bruchkanten', datum: '22.05.2019', tag: 'geocpm', video: 'GeoCPM Bruchkanten 20190522.mp4' },
-         { titel: 'Anbindung von Datenbanken', datum: '07.03.2020', tag: 'allgemein', link: 'Datenbanken' },
+         { titel: '++SYSTEMS Projektdateimanagement 2019', datum: '15.05.2019', tag: 'allgemein', video: 'Projektdateimanagement 20190515.mp4' },
-         { titel: 'Starkregenrisikomanagement LUBW II', datum: '29.05.2019', tag: 'geocpm', link: 'Starkregen_Risikomanagement_Baden_W%C3%BCrttemberg_LUBW' },
+         { titel: 'Koordinatentransformation', datum: '30.04.2019', tag: 'allgemein', video: 'Koordinatentransformation 20190430.mp4' },
-         { titel: 'Bruchkanten', datum: '22.05.2019', tag: 'geocpm', link: 'Bruchkanten' },
+         { titel: 'Planausgabe', datum: '10.04.2019', tag: 'allgemein', video: 'Planausgabe 20190410.mp4' },
-         { titel: '++SYSTEMS Projektdateimanagement 2019', datum: '15.05.2019', tag: 'allgemein', link: 'Vergleichs-_und_Importkonfiguration' },
+         { titel: 'Release V11', datum: '11.03.2019', tag: 'release', video: '++SYSTEMS Release 11 03 00 20190508.mp4' },
-         { titel: 'Koordinatentransformation', datum: '30.04.2019', tag: 'allgemein', link: 'Koordinatentransformation' },
+         { titel: 'Bestandsdaten & Dokumentation 2018', datum: '05.12.2018', tag: 'togo', video: '20181205 TOGO.mp4' },
-         { titel: 'Planausgabe', datum: '10.04.2019', tag: 'allgemein', link: 'Plankonfigurationen' },
+         { titel: 'Funktionale Einheiten - Ergebnislisten', datum: '28.11.2018', tag: 'flow', video: 'Flow 20181128.mp4' },
-         { titel: 'Release V11', datum: '11.03.2019', tag: 'release', link: 'Vergangene_Erneuerungen' },
+         { titel: 'KASAnova 2.0 - Sanierungsmodul Version 11', datum: '14.11.2018', tag: 'kasa', video: 'Webinar KASANova 20181114.mp4' },
-         { titel: 'Bestandsdaten + Dokumentation 2018', datum: '05.12.2018', tag: 'togo', link: 'ToGo-Erneuerungen' },
+         { titel: 'Release Version 11', datum: '08.11.2018', tag: 'release', video: 'GeoCPM V11 20181108.mp4' },
-         { titel: 'Funktionale Einheiten - Ergebnislisten', datum: '28.11.2018', tag: 'flow', link: 'Funktionale_Einheiten' },
+         { titel: 'KASAnova 2.0 - Sanierungsmodul neu aufgelegt', datum: '18.04.2018', tag: 'kasa', video: 'Webinar KASAnova 20180418.mp4' },
-         { titel: 'KASAnova 2.0 - Sanierungsmodul Version 11', datum: '14.11.2018', tag: 'kasa', link: 'Kasanova_Erneuerungen' },
+         { titel: 'DYNA - Rechnet nicht', datum: '21.03.2018', tag: 'hydraulik', video: 'HydraulikRechnetNicht 20180321.mp4' },
-         { titel: 'Release Version 11', datum: '08.11.2018', tag: 'release', link: 'GeoCPM_Vergangene_Erneuerungen' },
+         { titel: 'Datenbanken 2018', datum: '07.03.2018', tag: 'allgemein', video: 'Anbindung Datenbanken 20180307.mp4' },
-         { titel: 'KASAnova 2.0 - Sanierungsmodul neu aufgelegt', datum: '18.04.2018', tag: 'kasa', link: 'Kasanova_Erneuerungen' },
+         { titel: 'Starkregenrisikomanagement LUBW I', datum: '19.07.2017', tag: 'geocpm', video: 'LUBW GeoCPM 20170719.mp4' },
-         { titel: 'DYNA - Rechnet nicht', datum: '21.03.2018', tag: 'hydraulik', link: 'DYNA-Fehlerbehebung' },
+         { titel: 'Import/Export - XML Formate', datum: '15.03.2017', tag: 'allgemein', video: 'ImportExportTeil2 20170315.mp4' },
-         { titel: 'Datenbanken 2018', datum: '07.03.2018', tag: 'allgemein', link: 'Datenbanken' },
+         { titel: 'Import/Export - DXF und ESRI Shape', datum: '07.12.2016', tag: 'allgemein', video: 'ImportExportTeil1 20161207.mp4' },
-         { titel: 'Starkregenrisikomanagement LUBW I', datum: '19.07.2017', tag: 'geocpm', link: 'Starkregen_Risikomanagement_Baden_W%C3%BCrttemberg_LUBW' },
+         { titel: 'Listengenerator', datum: '23.11.2016', tag: 'allgemein', video: '++SYSTEMS Listengenerator 20161123.mp4' },
-         { titel: 'Erneuerung mit Flow++', datum: '10.05.2017', tag: 'flow', link: 'Erneuerung_mit_Flow%2B%2B' },
+         { titel: 'Wasseraustausch - Bi-Direktionale Kopplung', datum: '11.10.2016', tag: 'hydraulik', video: 'GeoCPM 20161011.mp4' },
-         { titel: 'Messstellen', datum: '22.03.2017', tag: 'hydraulik', link: 'Messstellen' },
+         { titel: 'Verteilvorschrift Regenspenden KOSTRA', datum: '22.09.2016', tag: 'hydraulik', video: 'KOSTRA 20160922.mp4' },
-         { titel: 'Import/Export - XML Formate', datum: '15.03.2017', tag: 'allgemein', link: 'Schnittstellen' },
+         { titel: 'Themenplan', datum: '30.06.2016', tag: 'allgemein', video: 'Themenplan 20160630.mp4' },
-         { titel: 'Import/Export - DXF und ESRI Shape', datum: '07.12.2016', tag: 'allgemein', link: 'Schnittstellen' },
+         { titel: 'Schluss mit der Zettelwirtschaft', datum: '16.06.2016', tag: 'togo', video: '20160616 TOGO.mp4' },
-         { titel: 'Listengenerator', datum: '23.11.2016', tag: 'allgemein', link: 'Listengenerator' },
+         { titel: 'Bestandsdaten & Dokumentation 2015', datum: '16.12.2015', tag: 'togo', video: '20151216 TOGO.mp4' },
-         { titel: 'Wasseraustausch - Bi-Direktionale Kopplung', datum: '11.10.2016', tag: 'hydraulik', link: 'Bi-Direktionale_Kopplung' },
+         { titel: 'Einzugsgebietsmanagement', datum: '16.06.2015', tag: 'hydraulik', video: 'Einzugsgebietsmanagement 20150616.mp4' },
-         { titel: 'Verteilvorschrift Regenspenden KOSTRA', datum: '22.09.2016', tag: 'hydraulik', link: 'Verteilungsvorschriften_f%C3%BCr_extreme_Regenspenden' },
+         { titel: 'Integrierte Zustandsbewertung und Sanierungsplanung', datum: '09.05.2015', tag: 'kasa', video: 'Kasanova 20150519.mp4' },
-         { titel: 'Zustandserfassung - Daten-Wellenlaenge', datum: '21.07.2016', tag: 'kasa', link: 'Kasanova_Erneuerungen' },
+         { titel: 'Untersuchungsverwaltung - Zustandsbewertung - Sanierung', datum: '21.10.2014', tag: 'kasa', video: 'Webinar Kanalzustand Sanierung 20141221.mp4' },
-        { titel: 'Themenplan', datum: '30.06.2016', tag: 'allgemein', link: 'Ansichtskonfiguration' },
-        { titel: 'Schluss mit der Zettelwirtschaft', datum: '16.06.2016', tag: 'togo', link: 'ToGo-Erneuerungen' },
-        { titel: 'Bestandsdaten + Dokumentation 2015', datum: '16.12.2015', tag: 'togo', link: 'ToGo-Erneuerungen' },
-        { titel: 'Einzugsgebietsmanagement', datum: '16.06.2015', tag: 'hydraulik', link: 'Einzugsgebietsmanagement' },
-        { titel: 'Integrierte Zustandsbewertung und Sanierungsplanung', datum: '09.05.2015', tag: 'kasa', link: 'Kasanova_Erneuerungen' },
-        { titel: 'Untersuchungsverwaltung - Zustandsbewertung - Sanierung', datum: '21.10.2014', tag: 'kasa', link: 'Kasanova_Erneuerungen' }
      ];
@@ Zeile 102: / Zeile 98: @@
          kanabis:   { label: 'Kanabis',    farbe: '#3B6D11' },
          release:   { label: 'Release',    farbe: '#5F5E5A' },
-         allgemein: { label: 'Allgemein',  farbe: '#444441' }
+         allgemein: { label: 'Allgemein',  farbe: '#444441' },
      };
-     var aktuellerTag = 'alle';
+     function videoUrl(dateiname) {
+        return '/images/' + dateiname.charAt(0).toUpperCase() +
+               '/' + dateiname.charAt(0).toUpperCase() + dateiname.charAt(1) +
+               '/' + encodeURIComponent(dateiname);
+    }
-     var style = document.createElement('style');
+     function injizierCSS() {
-    style.textContent = '#vg-wrap{font-family:sans-serif;margin:1rem 0}#vg-ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}#vg-q{flex:1;min-width:180px;padding:6px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px}.vg-btn{padding:4px 12px;border-radius:20px;border:1px solid #ccc;background:#f8f8f8;font-size:12px;cursor:pointer}.vg-btn.on{color:#fff;border-color:transparent}#vg-n{font-size:12px;color:#888;margin-bottom:8px}#vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}.vg-card{border:1px solid #ddd;border-radius:10px;overflow:hidden;background:#fff}.vg-thumb{display:block;width:100%;padding-top:56.25%;background:#f0f0f4;position:relative;text-decoration:none}.vg-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:32px;color:#999}.vg-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;color:#fff;font-weight:500}.vg-body{padding:10px 12px}.vg-title{font-size:13px;font-weight:600;color:#222;line-height:1.4;margin:6px 0 4px}.vg-date{font-size:11px;color:#888}.vg-empty{text-align:center;padding:2rem;color:#888;grid-column:1/-1}';
+        if (document.getElementById('vg-styles')) return;
-    document.head.appendChild(style);
+        var css = [
+            '#vg-container{font-family:sans-serif;margin:1rem 0}',
+            '#vg-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}',
+            '#vg-suche{flex:1;min-width:180px;padding:6px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px}',
+            '.vg-filter-btn{padding:4px 12px;border-radius:20px;border:1px solid #ccc;background:#f8f8f8;font-size:12px;cursor:pointer}',
+            '.vg-filter-btn.aktiv{color:#fff;border-color:transparent}',
+            '#vg-anzahl{font-size:12px;color:#888;margin-bottom:8px}',
+            '#vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}',
+            '.vg-karte{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}',
+            '.vg-karte:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}',
+            '.vg-karte.aktiv{border:2px solid #666699}',
+            '.vg-thumb{width:100%;aspect-ratio:16/9;background:#1a1a2e;display:flex;align-items:center;justify-content:center;position:relative}',
+            '.vg-play{width:0;height:0;border-style:solid;border-width:18px 0 18px 30px;border-color:transparent transparent transparent rgba(255,255,255,0.85)}',
+            '.vg-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;color:#fff;font-weight:500}',
+            '.vg-body{padding:10px 12px 12px}',
+            '.vg-titel{font-size:13px;font-weight:600;color:#222;line-height:1.4;margin:6px 0 4px}',
+            '.vg-datum{font-size:11px;color:#888}',
+            '.vg-leer{text-align:center;padding:2rem;color:#888;font-size:14px;grid-column:1/-1}',
+            '#vg-player-box{display:none;margin-bottom:20px;background:#000;border-radius:10px;overflow:hidden}',
+            '#vg-player-box video{width:100%;max-height:480px;display:block}',
+            '#vg-player-titel{padding:10px 14px;background:#f5f5f5;font-size:14px;font-weight:600;color:#333;display:flex;justify-content:space-between;align-items:center}',
+            '#vg-player-close{cursor:pointer;font-size:18px;color:#999;line-height:1}',
+        ].join('\n');
+        var s = document.createElement('style');
+        s.id = 'vg-styles';
+        s.textContent = css;
+        document.head.appendChild(s);
+    }
-     var inhalt = document.getElementById('mw-content-text');
+     function baueGalerie(container) {
-    if (!inhalt) return;
+        injizierCSS();
+        var aktuellerTag = 'alle';
+        var aktiveKarte = null;
-    var tbl = inhalt.querySelector('table');
+        var html = '<div id="vg-container">';
-    if (tbl) tbl.style.display = 'none';
+        html += '<div id="vg-controls">';
+        html += '<input id="vg-suche" type="text" placeholder="Webinar suchen..." />';
+        Object.keys(TAGS).forEach(function (key) {
+            var t = TAGS[key];
+            var stil = key === 'alle' ? ' style="background:' + t.farbe + ';color:#fff;border-color:' + t.farbe + ';"' : '';
+            html += '<button class="vg-filter-btn' + (key === 'alle' ? ' aktiv' : '') + '" data-tag="' + key + '"' + stil + '>' + t.label + '</button>';
+        });
+        html += '</div>';
+        html += '<div id="vg-anzahl"></div>';
+        html += '<div id="vg-player-box"><div id="vg-player-titel"><span id="vg-player-name"></span><span id="vg-player-close">&#10005;</span></div><video id="vg-player" controls controlsList="nodownload"></video></div>';
+        html += '<div id="vg-grid"></div>';
+        html += '</div>';
+        container.innerHTML = html;
-    var wrap = document.createElement('div');
+        var suchfeld = document.getElementById('vg-suche');
-    wrap.id = 'vg-wrap';
+        var grid = document.getElementById('vg-grid');
-    inhalt.insertBefore(wrap, inhalt.firstChild);
+        var anzahl = document.getElementById('vg-anzahl');
+        var playerBox = document.getElementById('vg-player-box');
+        var player = document.getElementById('vg-player');
+        var playerName = document.getElementById('vg-player-name');
+        var playerClose = document.getElementById('vg-player-close');
-    var ctrl = document.createElement('div');
+        playerClose.addEventListener('click', function () {
-    ctrl.id = 'vg-ctrl';
+            player.pause();
+            playerBox.style.display = 'none';
+            if (aktiveKarte) aktiveKarte.classList.remove('aktiv');
+            aktiveKarte = null;
+        });
-    var input = document.createElement('input');
+        function spieleVideo(w, karte) {
-    input.id = 'vg-q';
+            if (aktiveKarte) aktiveKarte.classList.remove('aktiv');
-    input.type = 'text';
+            aktiveKarte = karte;
-    input.placeholder = 'Webinar suchen...';
+            karte.classList.add('aktiv');
-    ctrl.appendChild(input);
+            var url = videoUrl(w.video);
+            player.src = url;
+            playerName.textContent = w.titel + ' (' + w.datum + ')';
+            playerBox.style.display = 'block';
+            player.play();
+            playerBox.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
-    Object.keys(TAGS).forEach(function(key) {
+        function renderKarten() {
-        var btn = document.createElement('button');
+            var q = suchfeld.value.toLowerCase().trim();
-        btn.className = 'vg-btn' + (key === 'alle' ? ' on' : '');
+            var gefiltert = WEBINARE.filter(function (w) {
-        btn.textContent = TAGS[key].label;
+                var tagOk = aktuellerTag === 'alle' || w.tag === aktuellerTag;
-        btn.setAttribute('data-tag', key);
+                var suchOk = !q || w.titel.toLowerCase().indexOf(q) > -1;
-        if (key === 'alle') {
+                return tagOk ? suchOk : false;
-            btn.style.background = TAGS[key].farbe;
+            });
-            btn.style.color = '#fff';
+            anzahl.textContent = gefiltert.length + ' Webinar' + (gefiltert.length !== 1 ? 'e' : '');
-            btn.style.borderColor = TAGS[key].farbe;
+            if (!gefiltert.length) {
+                grid.innerHTML = '<p class="vg-leer">Keine Webinare gefunden.</p>';
+                return;
+            }
+            grid.innerHTML = '';
+            gefiltert.forEach(function (w) {
+                var farbe = TAGS[w.tag] ? TAGS[w.tag].farbe : '#666699';
+                var label = TAGS[w.tag] ? TAGS[w.tag].label : w.tag;
+                var karte = document.createElement('div');
+                karte.className = 'vg-karte';
+                karte.innerHTML =
+                    '<div class="vg-thumb"><div class="vg-play"></div></div>' +
+                    '<div class="vg-body">' +
+                    '<span class="vg-badge" style="background:' + farbe + '">' + label + '</span>' +
+                    '<p class="vg-titel">' + w.titel + '</p>' +
+                    '<p class="vg-datum">' + w.datum + '</p>' +
+                    '</div>';
+                karte.addEventListener('click', function () { spieleVideo(w, karte); });
+                grid.appendChild(karte);
+            });
          }
-         btn.onclick = function() {
-             aktuellerTag = key;
+         $(document).on('click', '.vg-filter-btn', function () {
-             ctrl.querySelectorAll('.vg-btn').forEach(function(b) {
+             aktuellerTag = $(this).data('tag');
-                 b.classList.remove('on');
+             $('.vg-filter-btn').each(function () {
-                b.style.background = '';
+                 $(this).removeClass('aktiv').css({ background: '', color: '', borderColor: '' });
-                b.style.color = '';
-                b.style.borderColor = '';
              });
-             btn.classList.add('on');
+             var farbe = TAGS[aktuellerTag] ? TAGS[aktuellerTag].farbe : '#666699';
-            btn.style.background = TAGS[key].farbe;
+             $(this).addClass('aktiv').css({ background: farbe, color: '#fff', borderColor: farbe });
-            btn.style.color = '#fff';
+             renderKarten();
-             btn.style.borderColor = TAGS[key].farbe;
-            render();
-        };
-        ctrl.appendChild(btn);
-    });
-    var nDiv = document.createElement('div');
-    nDiv.id = 'vg-n';
-    var grid = document.createElement('div');
-    grid.id = 'vg-grid';
-    wrap.appendChild(ctrl);
-    wrap.appendChild(nDiv);
-    wrap.appendChild(grid);
-    input.oninput = render;
-    function render() {
-        var q = input.value.toLowerCase().trim();
-        var list = WEBINARE.filter(function(w) {
-            var tagOk = aktuellerTag === 'alle' || w.tag === aktuellerTag;
-             var qOk = !q || w.titel.toLowerCase().indexOf(q) > -1;
-            return tagOk ? qOk : false;
          });
-         nDiv.textContent = list.length + (list.length !== 1 ? ' Webinare' : ' Webinar');
+         $(suchfeld).on('input', renderKarten);
+        renderKarten();
+    }
-        if (!list.length) {
+    $(function () {
-            grid.innerHTML = '<p class="vg-empty">Keine Webinare gefunden.</p>';
+        var inhalt = document.getElementById('mw-content-text');
-            return;
+         if (!inhalt) return;
-         }
+        var container = document.createElement('div');
+        container.id = 'video-galerie';
-        grid.innerHTML = '';
+        var alteTabelle = inhalt.querySelector('table');
-        list.forEach(function(w) {
+        if (alteTabelle) alteTabelle.style.display = 'none';
-            var farbe = TAGS[w.tag] ? TAGS[w.tag].farbe : '#666';
+        inhalt.insertBefore(container, inhalt.firstChild);
-            var label = TAGS[w.tag] ? TAGS[w.tag].label : w.tag;
+         baueGalerie(container);
-            var card = document.createElement('div');
+     });
-            card.className = 'vg-card';
-            card.innerHTML =
-                '<a class="vg-thumb" href="/index.php?title=' + w.link + '">' +
-                '<span class="vg-play">&#9654;</span></a>' +
-                '<div class="vg-body">' +
-                '<span class="vg-badge" style="background:' + farbe + '">' + label + '</span>' +
-                '<p class="vg-title">' + w.titel + '</p>' +
-                '<p class="vg-date">' + w.datum + '</p>' +
-                '</div>';
-            grid.appendChild(card);
-         });
-     }
-    render();
+}(jQuery));
-});
 </script>
 </html>

Webinare: Unterschied zwischen den Versionen

Version vom 19. Mai 2026, 09:56 Uhr