TEST Kerstin: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
'''<!-- ============================================================
<!-- ============================================================
     20 JAHRE BÜNDNIS FÜR FAMILIE TÜBINGEN
     20 JAHRE BÜNDNIS FÜR FAMILIE TÜBINGEN
     BEGLEITPROGRAMM 2026
     BEGLEITPROGRAMM 2026

Aktuelle Version vom 11. August 2026, 14:07 Uhr


<style> /* ============================================================ 

  GRUNDLAGEN
  ============================================================ */
  1. buefa-jubilaeum {
   --buefa-orange: #e86f2d;
   --buefa-orange-light: #fff1e8;
   --buefa-yellow: #f4c542;
   --buefa-green: #6a9f58;
   --buefa-blue: #5b8fb9;
   --buefa-purple: #8b6aa8;
   --buefa-text: #333333;
   --buefa-text-light: #666666;
   --buefa-border: #e5e5e5;
   --buefa-bg: #f8f7f4;
   --buefa-white: #ffffff;

   max-width: 1200px;
   margin: 0 auto;
   color: var(--buefa-text);
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
   box-sizing: border-box;

}

  1. buefa-jubilaeum *,
  2. buefa-jubilaeum *::before,
  3. buefa-jubilaeum *::after {
   box-sizing: border-box;

}


/* ============================================================ 

  HERO
  ============================================================ */

.buefa-hero { 

   background:
       linear-gradient(
           135deg,
           rgba(232,111,45,0.96),
           rgba(244,197,66,0.94)
       );
   border-radius: 22px;
   padding: 48px 45px;
   margin: 0 0 35px 0;
   color: #ffffff;
   position: relative;
   overflow: hidden;

}

.buefa-hero::after { 

   content: "20";
   position: absolute;
   right: 25px;
   bottom: -45px;
   font-size: 190px;
   font-weight: 900;
   line-height: 1;
   opacity: 0.12;

}

.buefa-hero-content { 

   position: relative;
   z-index: 2;
   max-width: 760px;

}

.buefa-kicker { 

   font-size: 15px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 10px;

}

.buefa-hero h1 { 

   color: #ffffff !important;
   font-size: clamp(30px, 5vw, 52px);
   line-height: 1.08;
   margin: 0 0 18px 0;
   font-weight: 800;

}

.buefa-hero p { 

   font-size: 19px;
   line-height: 1.55;
   margin: 0;
   max-width: 700px;

}


/* ============================================================ 

  SCHNELLE EINSTIEGE
  ============================================================ */

.buefa-intro { 

   text-align: center;
   margin: 0 0 28px 0;

}

.buefa-intro h2 { 

   font-size: 30px;
   margin: 0 0 8px 0;
   color: var(--buefa-text);

}

.buefa-intro p { 

   color: var(--buefa-text-light);
   margin: 0;

}

.buefa-month-buttons { 

   display: flex;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap;
   margin: 25px 0 38px 0;

}

.buefa-month-button { 

   border: 2px solid var(--buefa-orange);
   background: #ffffff;
   color: var(--buefa-orange);
   padding: 11px 20px;
   border-radius: 30px;
   font-weight: 700;
   cursor: pointer;
   transition: all .2s ease;

}

.buefa-month-button:hover, .buefa-month-button.active { 

   background: var(--buefa-orange);
   color: #ffffff;

}


/* ============================================================ 

  ALS NÄCHSTES
  ============================================================ */

.buefa-next { 

   margin: 0 0 42px 0;

}

.buefa-section-title { 

   font-size: 25px;
   font-weight: 800;
   margin: 0 0 16px 0;

}

.buefa-next-card { 

   background: var(--buefa-orange-light);
   border-left: 7px solid var(--buefa-orange);
   border-radius: 16px;
   padding: 25px 28px;

}

.buefa-next-label { 

   color: var(--buefa-orange);
   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 8px;

}

.buefa-next-card h3 { 

   margin: 0 0 12px 0;
   font-size: 25px;

}

.buefa-next-meta { 

   display: flex;
   flex-wrap: wrap;
   gap: 12px 25px;
   color: #555555;
   margin-bottom: 15px;

}

.buefa-next-description { 

   color: #555555;

}


/* ============================================================ 

  FILTER
  ============================================================ */

.buefa-controls { 

   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   margin-bottom: 25px;
   flex-wrap: wrap;

}

.buefa-filter { 

   display: flex;
   gap: 8px;
   flex-wrap: wrap;

}

.buefa-filter button { 

   border: 1px solid var(--buefa-border);
   background: #ffffff;
   color: #555555;
   border-radius: 22px;
   padding: 8px 15px;
   cursor: pointer;
   font-size: 14px;

}

.buefa-filter button.active { 

   background: #333333;
   color: #ffffff;
   border-color: #333333;

}


/* ============================================================ 

  MONAT
  ============================================================ */

.buefa-month-section { 

   margin: 0 0 45px 0;

}

.buefa-month-heading { 

   display: flex;
   align-items: baseline;
   gap: 15px;
   border-bottom: 3px solid var(--buefa-orange);
   padding-bottom: 10px;
   margin-bottom: 20px;

}

.buefa-month-heading h2 { 

   margin: 0;
   font-size: 31px;

}

.buefa-month-heading span { 

   color: var(--buefa-text-light);
   font-size: 15px;

}


/* ============================================================ 

  VERANSTALTUNGS-KARTE
  ============================================================ */

.buefa-event { 

   display: grid;
   grid-template-columns: 105px 1fr;
   gap: 25px;
   background: #ffffff;
   border: 1px solid var(--buefa-border);
   border-radius: 17px;
   margin-bottom: 14px;
   overflow: hidden;
   transition:
       transform .2s ease,
       box-shadow .2s ease,
       border-color .2s ease;

}

.buefa-event:hover { 

   transform: translateY(-2px);
   box-shadow: 0 7px 22px rgba(0,0,0,.08);
   border-color: #d5d5d5;

}


/* Datum */

.buefa-date { 

   background: var(--buefa-bg);
   min-height: 135px;
   padding: 20px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;

}

.buefa-weekday { 

   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
   color: var(--buefa-orange);

}

.buefa-day { 

   font-size: 42px;
   line-height: 1;
   font-weight: 900;
   margin: 3px 0;

}

.buefa-month-small { 

   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   color: #666666;

}


/* Inhalt */

.buefa-event-content { 

   padding: 20px 22px 20px 0;

}

.buefa-event-title { 

   margin: 0 0 8px 0;
   font-size: 21px;
   line-height: 1.3;
   font-weight: 800;

}

.buefa-event-meta { 

   display: flex;
   flex-wrap: wrap;
   gap: 7px 20px;
   color: #555555;
   font-size: 15px;
   margin-bottom: 9px;

}

.buefa-event-description { 

   color: #666666;
   font-size: 15px;
   margin: 0 0 12px 0;

}

.buefa-event-actions { 

   display: flex;
   gap: 10px;
   flex-wrap: wrap;

}

.buefa-button { 

   border: none;
   border-radius: 20px;
   padding: 8px 15px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 700;

}

.buefa-button-primary { 

   background: var(--buefa-orange);
   color: #ffffff;

}

.buefa-button-secondary { 

   background: #f1f1f1;
   color: #444444;

}


/* Details */

.buefa-details { 

   display: none;
   margin-top: 15px;
   padding-top: 15px;
   border-top: 1px solid var(--buefa-border);
   color: #555555;

}

.buefa-details.open { 

   display: block;

}

.buefa-details-row { 

   margin-bottom: 8px;

}

.buefa-details-label { 

   font-weight: 800;
   margin-right: 6px;

}


/* Kategorien */

.buefa-category { 

   display: inline-block;
   border-radius: 15px;
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 700;
   margin-bottom: 8px;

}

.category-familie { 

   background: #e8f3e3;
   color: #507a43;

}

.category-kultur { 

   background: #eee6f5;
   color: #73558c;

}

.category-wissen { 

   background: #e5f0f8;
   color: #4d7798;

}

.category-workshop { 

   background: #fff1d6;
   color: #9a6b1d;

}

.category-jubilaeum { 

   background: #fff0e7;
   color: #bd5b25;

}


/* Vorläufig */

.buefa-event.provisional { 

   border-left: 6px solid var(--buefa-yellow);

}

.buefa-provisional-label { 

   display: inline-block;
   background: #fff5d8;
   color: #85651b;
   padding: 4px 9px;
   border-radius: 12px;
   font-size: 12px;
   font-weight: 800;
   margin-bottom: 8px;

}


/* Vergangene Termine */

.buefa-event.past { 

   opacity: .55;

}

.buefa-past-label { 

   font-size: 12px;
   color: #777777;
   font-weight: 700;

}


/* Keine Termine */

.buefa-empty { 

   background: var(--buefa-bg);
   border-radius: 15px;
   padding: 25px;
   text-align: center;
   color: #777777;

}


/* ============================================================ 

  IN KLÄRUNG
  ============================================================ */

.buefa-open { 

   background: #f7f5ef;
   border-radius: 18px;
   padding: 25px;
   margin-top: 35px;

}

.buefa-open h2 { 

   margin-top: 0;

}


/* ============================================================ 

  FOOTER
  ============================================================ */

.buefa-footer { 

   margin-top: 45px;
   background: var(--buefa-bg);
   border-radius: 18px;
   padding: 30px;
   text-align: center;

}

.buefa-footer h2 { 

   margin-top: 0;

}

.buefa-footer p { 

   max-width: 700px;
   margin: 0 auto;
   color: #666666;

}


/* ============================================================ 

  MOBILE
  ============================================================ */

@media (max-width: 700px) { 

   #buefa-jubilaeum {
       width: 100%;
   }

   .buefa-hero {
       border-radius: 0;
       margin-left: -12px;
       margin-right: -12px;
       padding: 35px 22px;
   }

   .buefa-hero h1 {
       font-size: 34px;
   }

   .buefa-hero p {
       font-size: 17px;
   }

   .buefa-hero::after {
       font-size: 120px;
       right: 0;
   }

   .buefa-intro h2 {
       font-size: 25px;
   }

   .buefa-month-buttons {
       justify-content: flex-start;
       flex-wrap: nowrap;
       overflow-x: auto;
       padding-bottom: 5px;
       scrollbar-width: none;
   }

   .buefa-month-buttons::-webkit-scrollbar {
       display: none;
   }

   .buefa-month-button {
       flex: 0 0 auto;
   }

   .buefa-next-card {
       padding: 20px;
   }

   .buefa-next-card h3 {
       font-size: 21px;
   }

   .buefa-event {
       display: block;
       border-radius: 15px;
   }

   .buefa-date {
       min-height: auto;
       padding: 10px 15px;
       flex-direction: row;
       justify-content: flex-start;
       gap: 8px;
   }

   .buefa-weekday,
   .buefa-day,
   .buefa-month-small {
       font-size: 14px;
       line-height: 1.2;
   }

   .buefa-day {
       font-size: 22px;
   }

   .buefa-event-content {
       padding: 16px;
   }

   .buefa-event-title {
       font-size: 19px;
   }

   .buefa-event-meta {
       display: block;
   }

   .buefa-event-meta span {
       display: block;
       margin-bottom: 5px;
   }

   .buefa-event-actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
   }

   .buefa-button {
       width: 100%;
   }

   .buefa-month-heading {
       display: block;
   }

   .buefa-month-heading h2 {
       font-size: 26px;
   }

   .buefa-controls {
       display: block;
   }

   .buefa-filter {
       overflow-x: auto;
       flex-wrap: nowrap;
       padding-bottom: 5px;
       scrollbar-width: none;
   }

   .buefa-filter::-webkit-scrollbar {
       display: none;
   }

   .buefa-filter button {
       flex: 0 0 auto;
   }

}


/* ============================================================ 

  SEHR KLEINE BILDSCHIRME
  ============================================================ */

@media (max-width: 420px) { 

   .buefa-event-actions {
       grid-template-columns: 1fr;
   }

   .buefa-section-title {
       font-size: 22px;
   }

}

</style> 



   <section class="buefa-hero">

               20 Jahre Bündnis für Familie Tübingen

Unser Jubiläumsprogramm

Von Oktober bis Dezember 2026 feiern wir gemeinsam 20 Jahre Bündnis für Familie Tübingen. Entdecken Sie Veranstaltungen, Workshops, Gespräche, Kultur und Angebote für Familien. 

   </section>



   <section class="buefa-intro">

Was ist wann und wo?

Hier finden Sie alle Veranstaltungen auf einen Blick. 

   </section>




   <section class="buefa-next">

Als Nächstes 

   </section>



           
               Alle Veranstaltungen
           

           <button
               class="active"
               data-category="alle">
               Alle
           </button>

           <button data-category="familie">
               Familie
           </button>

           <button data-category="wissen">
               Wissen
           </button>

           <button data-category="workshop">
               Workshop
           </button>

           <button data-category="kultur">
               Kultur
           </button>

           <button data-category="jubilaeum">
               Jubiläum
           </button>




   <section
       class="buefa-open"
       id="provisionalEvents"
       style="display:none;">

Noch in Klärung 

   </section>



   <section class="buefa-footer">

20 Jahre Bündnis für Familie Tübingen

Viele Menschen, viele Ideen und viele Angebote – gemeinsam für Familien in Tübingen. 

   </section>


<script> (function () {

"use strict";


/* ============================================================ 

  VERANSTALTUNGEN
  ============================================================

  HIER WERDEN DIE VERANSTALTUNGEN GEPFLEGT.

  Datum:
  YYYY-MM-DD

  Uhrzeit:
  HH:MM

  Kategorie:
  familie
  wissen
  workshop
  kultur
  jubilaeum

  provisional:
  true = vorläufig / noch nicht endgültig

  url:
  Wenn vorhanden, wird ein "Mehr Informationen"-Button
  erzeugt.

  description:
  Kurze Beschreibung.

  location:
  Veranstaltungsort.
  ============================================================ */


const events = [ 

   {
       date: "2026-10-06",
       time: "20:00",
       title: "Hochsensible Kinder gut unterstützen und begleiten",
       location: "Tübingen",
       category: "wissen",
       description: "Informationen und Impulse rund um den Umgang mit hochsensiblen Kindern."
   },

   {
       date: "2026-10-08",
       time: "18:00",
       title: "Filmvorführung mit Gespräch über den Film „All Inclusive“",
       location: "Tübingen",
       category: "kultur",
       description: "Filmvorführung mit anschließendem Gespräch."
   },

   {
       date: "2026-10-09",
       time: "15:00",
       title: "Vorlesezeit in französischer Sprache mit dem LESE-HAUS",
       location: "Stadtbücherei Tübingen",
       category: "familie",
       description: "Vorlesen für Kinder in französischer Sprache."
   },

   {
       date: "2026-10-09",
       time: "16:00",
       title: "Vorlesezeit mit dem LESE-HAUS",
       location: "Stadtbücherei Tübingen",
       category: "familie",
       description: "Gemeinsame Vorlesezeit für Kinder und Familien."
   },

   {
       date: "2026-10-09",
       time: "17:00",
       title: "Vorlesezeit in ukrainischer Sprache mit dem LESE-HAUS",
       location: "Stadtbücherei Tübingen",
       category: "familie",
       description: "Vorlesen für Kinder in ukrainischer Sprache."
   },

   {
       date: "2026-10-09",
       time: "18:00",
       title: "Jubiläumsfeier & Eröffnung der Ausstellung „Familien in Tübingen – viele Formen von Zuhause“",
       location: "Stadtbücherei Tübingen",
       category: "jubilaeum",
       description: "Eröffnung der Jubiläumsausstellung und gemeinsamer Auftakt des Jubiläumsprogramms."
   },

   {
       date: "2026-10-21",
       time: "",
       title: "Familiensprachen und Sprachencafés im elkiko Familienzentrum",
       location: "elkiko Familienzentrum",
       category: "familie",
       description: "Veranstaltung ist noch vorläufig.",
       provisional: true
   },

   {
       date: "2026-10-22",
       time: "18:00",
       title: "Preisverleihung des 23. Schreibwettbewerbs für junge Menschen der Buchhandlung Wekenmann",
       location: "Tübingen",
       category: "kultur",
       description: "Preisverleihung des Schreibwettbewerbs für junge Menschen."
   },

   {
       date: "2026-10-31",
       time: "15:00",
       title: "BamBam-Band & Halloween Fair for Kids",
       location: "Tübingen",
       category: "familie",
       description: "Familienveranstaltung rund um Halloween."
   },



   /* ========================================================
      NOVEMBER
      ======================================================== */

   {
       date: "2026-11-05",
       time: "09:00",
       timeEnd: "11:00",
       title: "„Der Widerspenstigen Zähmung??“ – Workshop",
       location: "Tübingen",
       category: "workshop",
       description: "Workshop zum Thema Erziehung und Familie."
   },

   {
       date: "2026-11-05",
       time: "19:00",
       title: "Nach der Elternzeit – welche Betreuung passt für mein Kind und unsere Familie?",
       location: "Tübingen",
       category: "wissen",
       description: "Informationen und Orientierung rund um Betreuung nach der Elternzeit."
   },

   {
       date: "2026-11-09",
       time: "18:00",
       timeEnd: "20:00",
       title: "Wassergewöhnung – wie unterstütze ich mein Kind?",
       location: "Tübingen",
       category: "familie",
       description: "Informationen und praktische Hinweise zur Wassergewöhnung."
   },

   {
       date: "2026-11-10",
       time: "18:00",
       title: "Live-Show mit Miriam Davoudvandi: Das können wir uns nicht leisten",
       location: "Tübingen",
       category: "kultur",
       description: "Live-Show mit Miriam Davoudvandi."
   },

   {
       date: "2026-11-10",
       time: "17:00",
       timeEnd: "19:00",
       title: "Das Geheimnis des Bildungserfolgs – Teil 1: Entwicklungsaufgaben",
       location: "Tübingen",
       category: "wissen",
       description: "Teil 1 der Veranstaltungsreihe zum Bildungserfolg."
   },

   {
       date: "2026-11-11",
       time: "19:00",
       timeEnd: "21:00",
       title: "„Zu Hause in einer Erziehungsstelle“ – Podiumsdiskussion",
       location: "Tübingen",
       category: "wissen",
       description: "Podiumsdiskussion mit Beteiligten in verschiedenen Rollen."
   },

   {
       date: "2026-11-15",
       time: "14:00",
       timeEnd: "17:00",
       title: "Familienbasteln im Café frieDa",
       location: "Café frieDa",
       category: "familie",
       description: "Gemeinsam kreativ werden und einen schönen Familiennachmittag verbringen."
   },

   {
       date: "2026-11-16",
       time: "17:00",
       timeEnd: "19:00",
       title: "Das Geheimnis des Bildungserfolgs – Teil 2: Erfolg in der Schule, Bildung und Teilhabe",
       location: "Tübingen",
       category: "wissen",
       description: "Teil 2 der Veranstaltungsreihe zum Bildungserfolg."
   },

   {
       date: "2026-11-19",
       time: "09:30",
       timeEnd: "11:30",
       title: "Zutaten für ein starkes Familienleben",
       location: "Tübingen",
       category: "familie",
       description: "Impulse und Austausch rund um ein gutes Familienleben."
   },

   {
       date: "2026-11-21",
       time: "10:00",
       timeEnd: "15:00",
       title: "Bastelspaß für die ganze Familie – Thanksgiving Edition",
       location: "Tübingen",
       category: "familie",
       description: "Kreativer Familientag mit Thanksgiving-Schwerpunkt."
   },

   {
       date: "2026-11-24",
       time: "17:00",
       timeEnd: "19:00",
       title: "Das Geheimnis des Bildungserfolgs – Teil 3: Medienerziehung",
       location: "Tübingen",
       category: "wissen",
       description: "Teil 3 der Veranstaltungsreihe zum Bildungserfolg."
   },

   {
       date: "2026-11-24",
       time: "",
       title: "Gemeinsam gegen Abfall – Papierrecycling in der Stadtbücherei",
       location: "Stadtbücherei Tübingen",
       category: "familie",
       description: "Ganztägiges Angebot rund um Papierrecycling.",
       allDay: true
   },

   {
       date: "2026-11-25",
       time: "",
       title: "Gemeinsam gegen Abfall – Papierrecycling in der Stadtbücherei",
       location: "Stadtbücherei Tübingen",
       category: "familie",
       description: "Ganztägiges Angebot rund um Papierrecycling.",
       allDay: true
   },

   {
       date: "2026-11-26",
       time: "",
       title: "Gemeinsam gegen Abfall – Papierrecycling in der Stadtbücherei",
       location: "Stadtbücherei Tübingen",
       category: "familie",
       description: "Ganztägiges Angebot rund um Papierrecycling.",
       allDay: true
   }

];


/* ============================================================ 

  MONATE
  ============================================================ */

const monthNames = [ 

   "Januar",
   "Februar",
   "März",
   "April",
   "Mai",
   "Juni",
   "Juli",
   "August",
   "September",
   "Oktober",
   "November",
   "Dezember"

];

const weekdayNames = [ 

   "So",
   "Mo",
   "Di",
   "Mi",
   "Do",
   "Fr",
   "Sa"

];


/* ============================================================ 

  STATUS
  ============================================================ */

let selectedMonth = "all"; let selectedCategory = "alle";


/* ============================================================ 

  HILFSFUNKTIONEN
  ============================================================ */

function dateObject(dateString) { 

   return new Date(dateString + "T00:00:00");

}


function formatDate(dateString) { 

   const date = dateObject(dateString);

   return {
       day: date.getDate(),
       month: monthNames[date.getMonth()],
       monthShort: monthNames[date.getMonth()].substring(0,3),
       weekday: weekdayNames[date.getDay()],
       monthNumber: date.getMonth() + 1,
       year: date.getFullYear()
   };

}


function dateTimeValue(event) { 

   const time = event.time || "00:00";

   return new Date(
       event.date + "T" + time + ":00"
   ).getTime();

}


function categoryName(category) { 

   const names = {
       familie: "Familie",
       wissen: "Wissen",
       workshop: "Workshop",
       kultur: "Kultur",
       jubilaeum: "Jubiläum"
   };

   return names[category] || "";

}


function categoryClass(category) { 

   return "category-" + category;

}


function isPast(event) { 

   if (event.provisional) {
       return false;
   }

   const end = event.timeEnd || event.time || "23:59";

   const eventDate = new Date(
       event.date + "T" + end + ":00"
   );

   return eventDate < new Date();

}


/* ============================================================ 

  SORTIERUNG
  ============================================================ */

events.sort(function(a,b) { 

   return dateTimeValue(a) - dateTimeValue(b);

});


/* ============================================================ 

  MONATSBUTTONS ERZEUGEN
  ============================================================ */

function createMonthButtons() { 

   const container =
       document.getElementById("monthButtons");

   const months = [...new Set(
       events
           .filter(event => !event.provisional)
           .map(event => event.date.substring(0,7))
   )];

   let html = `
       <button
           class="buefa-month-button active"
           data-month="all">
           Alle Termine
       </button>
   `;

   months.forEach(function(month) {

       const monthNumber =
           parseInt(month.substring(5,7),10);

       html += `
           <button
               class="buefa-month-button"
               data-month="${month}">
               ${monthNames[monthNumber - 1]}
           </button>
       `;

   });

   container.innerHTML = html;

   container
       .querySelectorAll(".buefa-month-button")
       .forEach(function(button) {

           button.addEventListener("click", function() {

               selectedMonth =
                   this.getAttribute("data-month");

               container
                   .querySelectorAll(".buefa-month-button")
                   .forEach(btn =>
                       btn.classList.remove("active")
                   );

               this.classList.add("active");

               renderEvents();

           });

       });

}


/* ============================================================ 

  NÄCHSTE VERANSTALTUNG
  ============================================================ */

function renderNextEvent() { 

   const container =
       document.getElementById("nextEvent");

   const upcoming = events
       .filter(event => !event.provisional && !isPast(event))
       .sort((a,b) =>
           dateTimeValue(a) - dateTimeValue(b)
       );

   if (!upcoming.length) {

       container.innerHTML = `

               Derzeit sind keine kommenden Veranstaltungen
               hinterlegt.

       `;

       return;
   }

   const event = upcoming[0];
   const date = formatDate(event.date);

   let time = "";

   if (event.allDay) {

       time = "Ganztägig";

   } else if (event.timeEnd) {

       time =
           event.time +
           "–" +
           event.timeEnd +
           " Uhr";

   } else if (event.time) {

       time =
           event.time +
           " Uhr";

   }

   container.innerHTML = `

               Als Nächstes

${event.title} 

               
                   📅 ${date.weekday}, ${date.day}. ${date.month} ${date.year}
               

               
                   🕐 ${time}
               

               
                   📍 ${event.location}
               

               ${event.description || ""}

   `;

}


/* ============================================================ 

  VERANSTALTUNGS-KARTE
  ============================================================ */

function createEventCard(event) { 

   const date = formatDate(event.date);

   const past = isPast(event);

   let time = "";

   if (event.allDay) {

       time = "Ganztägig";

   } else if (event.timeEnd) {

       time =
           event.time +
           "–" +
           event.timeEnd +
           " Uhr";

   } else if (event.time) {

       time =
           event.time +
           " Uhr";

   }



   let cardClass =
       "buefa-event";

   if (event.provisional) {
       cardClass += " provisional";
   }

   if (past) {
       cardClass += " past";
   }



   let provisionalLabel = "";

   if (event.provisional) {

       provisionalLabel = `

               Noch vorläufig

       `;

   }



   let pastLabel = "";

   if (past) {

       pastLabel = `

               Veranstaltung bereits vorbei

       `;

   }



   let urlButton = "";

   if (event.url) {

       urlButton = `
           <a
               href="${event.url}"
               class="buefa-button buefa-button-primary"
               target="_blank"
               rel="noopener">
               Mehr Informationen →
           </a>
       `;

   }



   const detailsId =
       "details-" +
       event.date.replace(/-/g,"") +
       "-" +
       Math.random().toString(36).substring(2,7);



   return `

       <article
           class="${cardClass}"
           data-category="${event.category}">

               
                   ${date.weekday}
               

               
                   ${date.day}
               

               
                   ${date.month}
               



               ${provisionalLabel}

                   ${categoryName(event.category)}

${event.title} 


                   
                       🕐 ${time}
                   

                   
                       📍 ${event.location}


${event.description || ""} 


               ${pastLabel}



                   <button
                       class="buefa-button buefa-button-secondary"
                       onclick="buefaToggleDetails('${detailsId}')">
                       Details
                   </button>

                   ${urlButton}

                   <button
                       class="buefa-button buefa-button-secondary"
                       onclick='buefaAddToCalendar(${JSON.stringify(event)})'>
                       ＋ Termin merken
                   </button>

                   <button
                       class="buefa-button buefa-button-secondary"
                       onclick='buefaShare(${JSON.stringify(event)})'>
                       ↗ Teilen
                   </button>



                       
                           Datum:
                       

                       ${date.weekday},
                       ${date.day}.
                       ${date.month}
                       ${date.year}



                       
                           Uhrzeit:
                       

                       ${time}



                       
                           Ort:
                       

                       ${event.location}



                       ${event.description || ""}

       </article>

   `;

}


/* ============================================================ 

  VERANSTALTUNGEN DARSTELLEN
  ============================================================ */

function renderEvents() { 

   const container =
       document.getElementById("eventList");

   const filtered = events.filter(function(event) {

       if (event.provisional) {
           return false;
       }

       if (
           selectedMonth !== "all" &&
           event.date.substring(0,7) !== selectedMonth
       ) {
           return false;
       }

       if (
           selectedCategory !== "alle" &&
           event.category !== selectedCategory
       ) {
           return false;
       }

       return true;

   });



   if (!filtered.length) {

       container.innerHTML = `

               Für diese Auswahl sind derzeit keine
               Veranstaltungen eingetragen.

       `;

       return;
   }



   const grouped = {};

   filtered.forEach(function(event) {

       const month =
           event.date.substring(0,7);

       if (!grouped[month]) {
           grouped[month] = [];
       }

       grouped[month].push(event);

   });



   let html = "";



   Object.keys(grouped)
       .sort()
       .forEach(function(monthKey) {

           const monthNumber =
               parseInt(monthKey.substring(5,7),10);

           const year =
               monthKey.substring(0,4);

           html += `

               <section
                   class="buefa-month-section">

${monthNames[monthNumber - 1]} 

                       
                           ${year}
                       

           `;



           grouped[monthKey]
               .forEach(function(event) {

                   html += createEventCard(event);

               });



           html += `
               </section>
           `;

       });



   container.innerHTML = html;

}


/* ============================================================ 

  VORLÄUFIGE TERMINE
  ============================================================ */

function renderProvisional() { 

   const wrapper =
       document.getElementById("provisionalEvents");

   const container =
       document.getElementById("provisionalList");

   const provisional =
       events.filter(event => event.provisional);



   if (!provisional.length) {

       wrapper.style.display = "none";

       return;

   }



   wrapper.style.display = "block";

   let html = "";



   provisional.forEach(function(event) {

       const date =
           formatDate(event.date);

       html += `

                   
                       ${date.weekday}
                   

                   
                       ${date.day}
                   

                   
                       ${date.month}
                   

                       Noch in Klärung

${event.title} 

                       
                           📍 ${event.location}

${event.description || ""} 

       `;

   });



   container.innerHTML = html;

}


/* ============================================================ 

  FILTER
  ============================================================ */

document 

   .querySelectorAll("#categoryFilter button")
   .forEach(function(button) {

       button.addEventListener("click", function() {

           selectedCategory =
               this.getAttribute("data-category");

           document
               .querySelectorAll("#categoryFilter button")
               .forEach(btn =>
                   btn.classList.remove("active")
               );

           this.classList.add("active");

           renderEvents();

       });

   });


/* ============================================================ 

  DETAILS AUFKLAPPEN
  ============================================================ */

window.buefaToggleDetails = function(id) { 

   const element =
       document.getElementById(id);

   if (element) {

       element.classList.toggle("open");

   }

};


/* ============================================================ 

  KALENDERDATEI
  ============================================================ */

window.buefaAddToCalendar = function(event) { 

   const start =
       event.date.replace(/-/g,"") +
       "T" +
       (event.time || "0000").replace(":","") +
       "00";



   let endTime =
       event.timeEnd ||
       event.time ||
       "23:59";



   const end =
       event.date.replace(/-/g,"") +
       "T" +
       endTime.replace(":","") +
       "00";



   const ics = [
       "BEGIN:VCALENDAR",
       "VERSION:2.0",
       "PRODID:-//Bündnis für Familie Tübingen//Jubiläum//DE",
       "BEGIN:VEVENT",
       "UID:" +
           Date.now() +
           "@buendnis-fuer-familie-tuebingen.de",
       "DTSTAMP:" +
           new Date()
               .toISOString()
               .replace(/[-:]/g,"")
               .replace(/\.\d{3}/,""),
       "DTSTART:" + start,
       "DTEND:" + end,
       "SUMMARY:" + escapeICS(event.title),
       "LOCATION:" + escapeICS(event.location),
       "DESCRIPTION:" + escapeICS(event.description || ""),
       "END:VEVENT",
       "END:VCALENDAR"
   ].join("\r\n");



   const blob =
       new Blob([ics], {
           type: "text/calendar;charset=utf-8"
       });



   const url =
       URL.createObjectURL(blob);



   const link =
       document.createElement("a");

   link.href = url;

   link.download =
       event.title
           .replace(/[^a-z0-9äöüß]+/gi,"-")
           .replace(/^-|-$/g,"")
           + ".ics";



   document.body.appendChild(link);

   link.click();

   document.body.removeChild(link);

   URL.revokeObjectURL(url);

};


function escapeICS(text) { 

   return String(text)
       .replace(/\\/g,"\\\\")
       .replace(/\n/g,"\\n")
       .replace(/,/g,"\\,")
       .replace(/;/g,"\\;");

}


/* ============================================================ 

  TEILEN
  ============================================================ */

window.buefaShare = function(event) { 

   const date =
       formatDate(event.date);



   const text =
       event.title +
       "\n" +
       date.day +
       ". " +
       date.month +
       " " +
       date.year +
       "\n" +
       (event.time ?
           event.time + " Uhr\n" :
           "") +
       event.location;



   if (
       navigator.share
   ) {

       navigator.share({

           title: event.title,

           text: text,

           url: event.url ||
               window.location.href

       }).catch(function() {});

   } else {

       if (
           navigator.clipboard
       ) {

           navigator.clipboard
               .writeText(text)
               .then(function() {

                   alert(
                       "Die Veranstaltungsinformationen wurden kopiert."
                   );

               });

       } else {

           alert(text);

       }

   }

};


/* ============================================================ 

  INITIALISIERUNG
  ============================================================ */

createMonthButtons();

renderNextEvent();

renderEvents();

renderProvisional();


})(); </script> ```

Abgerufen von „https://www.buendnis-fuer-familie-tuebingen.de/mediawiki/index.php?title=TEST_Kerstin&oldid=8701“