Familienangebote im August: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<html lang="de">
<style>
<head>
  .buefa-calendar {
   <meta charset="utf-8" />
    max-width: 1180px;
   <meta name="viewport" content="width=device-width, initial-scale=1" />
    margin: 0 auto;
   <title>Familienangebote im August 2026</title>
    padding: 24px 0 40px;
   <link rel="preconnect" href="https://fonts.googleapis.com">
    font-family: Arial, Helvetica, sans-serif;
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    color: #28251d;
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  }
   <style>
  .buefa-calendar-head {
     :root {
    display: flex;
      --bg: #f7f6f2;
    justify-content: space-between;
      --surface: #ffffff;
    align-items: end;
      --surface-2: #f3f0ec;
    gap: 16px;
      --text: #28251d;
    margin-bottom: 18px;
      --muted: #6f6a63;
    flex-wrap: wrap;
      --border: rgba(40, 37, 29, 0.12);
  }
      --primary: #01696f;
   .buefa-calendar h2 {
      --primary-soft: #dcebea;
    margin: 0;
      --shadow: 0 10px 28px rgba(36, 31, 24, 0.08);
    font-size: 2rem;
      --radius: 18px;
    line-height: 1.15;
      --radius-sm: 12px;
  }
     }
   .buefa-calendar-head p {
    margin: 8px 0 0;
    color: #6f6a63;
    max-width: 70ch;
   }
   .buefa-badge {
    display: inline-block;
    background: #dcebea;
    color: #01696f;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: bold;
  }
  .buefa-weekdays,
   .buefa-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }
  .buefa-weekday {
    text-align: center;
    padding: 12px 8px;
    color: #6f6a63;
    font-weight: bold;
    font-size: 0.92rem;
  }
   .buefa-day {
    min-height: 146px;
    background: #fff;
    border: 1px solid rgba(40, 37, 29, 0.12);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 28px rgba(36, 31, 24, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
   }
  .buefa-day-empty {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
  }
  .buefa-day-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
     gap: 8px;
  }
  .buefa-day-number {
    font-weight: bold;
    font-size: 0.98rem;
    color: #6f6a63;
  }
  .buefa-event-count {
    font-size: 0.78rem;
    color: #01696f;
    background: #dcebea;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: bold;
  }
  .buefa-events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .buefa-event-btn {
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: #f3f0ec;
    border-radius: 12px;
    padding: 10px 11px;
    cursor: pointer;
  }
  .buefa-event-btn:hover,
  .buefa-event-btn:focus {
    border-color: rgba(1, 105, 111, 0.3);
    background: #eef6f5;
    outline: none;
  }
  .buefa-event-time {
    display: block;
    color: #01696f;
    font-weight: bold;
    font-size: 0.82rem;
    margin-bottom: 3px;
  }
  .buefa-event-title {
    display: block;
    font-size: 0.92rem;
    font-weight: bold;
    color: #28251d;
  }
  .buefa-empty-text {
    color: #6f6a63;
    font-style: italic;
  }
  .buefa-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 34, 0.55);
    z-index: 9998;
    display: none;
  }
  .buefa-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 620px);
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
    z-index: 9999;
    display: none;
    padding: 22px;
  }
  .buefa-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    margin-bottom: 18px;
  }
  .buefa-modal-header h3 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
  }
  .buefa-close {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(40, 37, 29, 0.12);
    background: #f3f0ec;
    font-size: 1.2rem;
    cursor: pointer;
  }
  .buefa-detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 14px;
    margin-bottom: 22px;
  }
  .buefa-detail-label {
    font-weight: bold;
    color: #6f6a63;
  }
  .buefa-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
  }
  .buefa-btn {
    display: inline-block;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid rgba(40, 37, 29, 0.12);
    color: #28251d;
    background: #fff;
    line-height: 1.5;
  }
  .buefa-btn-primary {
    background: #01696f;
    color: #fff;
    border-color: #01696f;
  }
  .buefa-muted-empty {
    color: #6f6a63;
    font-style: italic;
  }
  @media (max-width: 780px) {
    .buefa-weekdays { display: none; }
    .buefa-calendar-grid { grid-template-columns: 1fr; }
    .buefa-day-empty { display: none; }
    .buefa-day { min-height: auto; padding: 14px; }
     .buefa-detail-grid { grid-template-columns: 1fr; gap: 6px 0; }
  }
</style>


    * { box-sizing: border-box; }
<div class="buefa-calendar" id="buefaCalendarApp">
    html { scroll-behavior: smooth; }
  <div class="buefa-calendar-head">
    body {
     <div>
      margin: 0;
       <h2>Familienangebote im August 2026</h2>
      font-family: 'Inter', system-ui, sans-serif;
       <p>In der Übersicht erscheinen nur Uhrzeit und Titel. Beim Klick öffnen sich die vollständigen Informationen.</p>
      background: var(--bg);
     </div>
      color: var(--text);
     <div class="buefa-badge">August 2026 · mobil optimiert</div>
      line-height: 1.5;
  </div>
    }
 
    .calendar-app {
      max-width: 1180px;
      margin: 0 auto;
      padding: 24px 16px 40px;
    }
 
    .calendar-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
 
     .calendar-title-wrap h1 {
       margin: 0;
       font-size: clamp(1.7rem, 2.8vw, 2.5rem);
      line-height: 1.1;
     }
 
     .calendar-title-wrap p {
      margin: 8px 0 0;
      color: var(--muted);
      max-width: 70ch;
      font-size: 0.98rem;
    }
 
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--primary-soft);
      color: var(--primary);
      border-radius: 999px;
      padding: 10px 14px;
      font-size: 0.92rem;
      font-weight: 600;
      white-space: nowrap;
    }
 
    .weekday-row,
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 10px;
    }
 
    .weekday {
      text-align: center;
      padding: 12px 8px;
      color: var(--muted);
      font-weight: 700;
      font-size: 0.92rem;
    }
 
    .day-card {
      min-height: 146px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
 
    .day-card.empty {
      background: transparent;
      border-style: dashed;
      box-shadow: none;
      min-height: 146px;
    }
 
    .day-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
 
    .day-number {
      font-weight: 700;
      font-size: 0.98rem;
      color: var(--muted);
    }
 
    .event-count {
      font-size: 0.78rem;
      color: var(--primary);
      background: var(--primary-soft);
      padding: 4px 8px;
      border-radius: 999px;
      font-weight: 600;
    }
 
    .events-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
 
    .event-chip {
      width: 100%;
      text-align: left;
      border: 1px solid transparent;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      padding: 10px 11px;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
 
    .event-chip:hover,
    .event-chip:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(1, 105, 111, 0.3);
      box-shadow: 0 8px 18px rgba(1, 105, 111, 0.10);
      background: #eef6f5;
      outline: none;
    }
 
    .event-time {
      display: block;
      color: var(--primary);
      font-weight: 700;
      font-size: 0.82rem;
      margin-bottom: 3px;
    }
 
    .event-title {
      display: block;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
    }
 
    dialog {
      width: min(94vw, 620px);
      border: none;
      padding: 0;
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,.25);
    }


     dialog::backdrop {
  <div class="buefa-weekdays">
      background: rgba(20, 24, 34, 0.55);
     <div class="buefa-weekday">Mo</div>
      backdrop-filter: blur(3px);
    <div class="buefa-weekday">Di</div>
     }
    <div class="buefa-weekday">Mi</div>
    <div class="buefa-weekday">Do</div>
     <div class="buefa-weekday">Fr</div>
    <div class="buefa-weekday">Sa</div>
    <div class="buefa-weekday">So</div>
  </div>


    .modal-content {
  <div class="buefa-calendar-grid" id="buefaCalendarGrid"></div>
      background: var(--surface);
</div>
      padding: 22px;
    }


    .modal-header {
<div class="buefa-modal-overlay" id="buefaModalOverlay"></div>
      display: flex;
<div class="buefa-modal" id="buefaModal" role="dialog" aria-modal="true" aria-labelledby="buefaModalTitle">
      justify-content: space-between;
  <div class="buefa-modal-header">
      gap: 12px;
    <h3 id="buefaModalTitle"></h3>
      align-items: start;
    <button type="button" class="buefa-close" id="buefaModalClose" aria-label="Schließen">&times;</button>
      margin-bottom: 18px;
  </div>
     }
  <div class="buefa-detail-grid">
    <div class="buefa-detail-label">Datum</div>
    <div id="buefaDetailDate"></div>
    <div class="buefa-detail-label">Uhrzeit</div>
    <div id="buefaDetailTime"></div>
    <div class="buefa-detail-label">Ort</div>
    <div id="buefaDetailLocation"></div>
    <div class="buefa-detail-label">Zielgruppe</div>
    <div id="buefaDetailAudience"></div>
    <div class="buefa-detail-label">Anmeldung</div>
    <div id="buefaDetailRegistration"></div>
    <div class="buefa-detail-label">Zusatztext</div>
    <div id="buefaDetailDescription"></div>
  </div>
  <div class="buefa-modal-actions">
    <button type="button" class="buefa-btn" id="buefaModalCloseBottom">Schließen</button>
     <a class="buefa-btn buefa-btn-primary" id="buefaDetailLink" href="#" target="_blank" rel="noopener noreferrer">Mehr Infos</a>
  </div>
</div>


     .modal-header h2 {
<script>
      margin: 0;
(function () {
      font-size: 1.4rem;
  var events = [
      line-height: 1.2;
     { date: "2026-08-01", title: "B&auml;chlewanderung mit Kind und Kescher", time: "10:00 - 13:00", location: "Start und Treffpunkt ist am Parkplatz Bebenhausen.", audience: "Geeignet f&uuml;r Familien mit Kindern ab 5 Jahren", registration: "wird benötigt", url: "https://www.fbs-tuebingen.de/eltern-und-kinder/kw/bereich/kursdetails/kurs/261-2516B/kursname/Baechlewanderung%20mit%20Kind%20und%20Kescher/kategorie-id/11/", description: "Wir wandern am Goldersbach entlang über die Tellerbrücke zur Teufelsbrücke." },
     }
    { date: "2026-08-02", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Caf&eacute; frieDa, Friedrich-Dannenmann-Straße 69, 72070 T&uuml;bingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
    { date: "2026-08-02", title: "Geschwisterchen auf dem Weg", time: "10:00 - 12:00", location: "FBS, Raum 003 Villa Metz, Hechingerstraße 13", audience: "Für Kinder ab 4 Jahren mit einem Elternteil", registration: "wird benötigt", url: "https://www.fbs-tuebingen.de/programm/kw/bereich/kursdetails/kurs/261-2509/kursname/Geschwisterchen%20auf%20dem%20Weg/", description: "Vorbereitung auf ein Geschwisterchen." },
    { date: "2026-08-04", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-05", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Piratenspielplatz, Anlagenpark", audience: "Familien mit j&uuml;ngeren Kindern", registration: "Keine Anmeldung erforderlich", url: "", description: "Treffpunkt zum Austausch mit der Familienbeauftragten." },
    { date: "2026-08-06", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-06", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 T&uuml;bingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei sch&ouml;nem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
    { date: "2026-08-09", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Caf&eacute; frieDa, Friedrich-Dannenmann-Straße 69, 72070 T&uuml;bingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
    { date: "2026-08-11", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
     { date: "2026-08-12", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
    { date: "2026-08-13", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-13", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 T&uuml;bingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei sch&ouml;nem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
    { date: "2026-08-16", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Caf&eacute; frieDa, Friedrich-Dannenmann-Straße 69, 72070 T&uuml;bingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
    { date: "2026-08-16", title: "Bunt backen mit Kindern: Regenbogen-Muffins &amp; Cake-Pops", time: "16:00 - 18:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
    { date: "2026-08-18", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-19", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
    { date: "2026-08-20", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-20", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 T&uuml;bingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei sch&ouml;nem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
    { date: "2026-08-23", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Caf&eacute; frieDa, Friedrich-Dannenmann-Straße 69, 72070 T&uuml;bingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
    { date: "2026-08-25", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-26", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
    { date: "2026-08-27", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit S&auml;uglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
    { date: "2026-08-27", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 T&uuml;bingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei sch&ouml;nem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
    { date: "2026-08-30", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Caf&eacute; frieDa, Friedrich-Dannenmann-Straße 69, 72070 T&uuml;bingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." }
  ];


    .modal-close {
  var weekdayLabels = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
      width: 42px;
  var monthName = "August";
      height: 42px;
  var year = 2026;
      border-radius: 999px;
  var monthIndex = 7;
      border: 1px solid var(--border);
  var calendarGrid = document.getElementById("buefaCalendarGrid");
      background: var(--surface-2);
  var overlay = document.getElementById("buefaModalOverlay");
      font-size: 1.2rem;
  var modal = document.getElementById("buefaModal");
      cursor: pointer;
      flex: 0 0 auto;
    }


    .detail-grid {
  if (!calendarGrid) {
      display: grid;
    return;
      grid-template-columns: 140px 1fr;
  }
      gap: 12px 14px;
      margin-bottom: 22px;
    }


    .detail-label {
  var grouped = {};
      font-weight: 700;
  var i;
      color: var(--muted);
  for (i = 0; i < events.length; i++) {
    var item = events[i];
    var parts = item.date.split("-");
    var dayKey = parseInt(parts[2], 10);
    if (!grouped[dayKey]) {
      grouped[dayKey] = [];
     }
     }
    grouped[dayKey].push(item);
  }


    .detail-value {
  var firstDay = new Date(year, monthIndex, 1);
      min-width: 0;
  var daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
    }
  var offset = (firstDay.getDay() + 6) % 7;


     .modal-actions {
  for (i = 0; i < offset; i++) {
      display: flex;
     var empty = document.createElement("div");
      justify-content: flex-end;
    empty.className = "buefa-day buefa-day-empty";
      gap: 10px;
    calendarGrid.appendChild(empty);
      flex-wrap: wrap;
  }
    }


    .btn {
  for (var day = 1; day <= daysInMonth; day++) {
      display: inline-flex;
    var items = grouped[day] || [];
      align-items: center;
    var card = document.createElement("div");
      justify-content: center;
    card.className = "buefa-day";
      min-height: 44px;
      padding: 10px 16px;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 600;
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface);
    }


     .btn-primary {
     var top = document.createElement("div");
      background: var(--primary);
    top.className = "buefa-day-top";
      color: #fff;
      border-color: var(--primary);
    }


     .muted-empty {
     var weekday = weekdayLabels[(offset + day - 1) % 7];
      color: var(--muted);
    var dayLabel = document.createElement("div");
      font-style: italic;
    dayLabel.className = "buefa-day-number";
     }
    dayLabel.appendChild(document.createTextNode(weekday + ", " + day + ". " + monthName));
     top.appendChild(dayLabel);


     @media (max-width: 780px) {
     if (items.length > 0) {
       .weekday-row { display: none; }
       var count = document.createElement("div");
       .calendar-grid { grid-template-columns: 1fr; }
       count.className = "buefa-event-count";
       .day-card.empty { display: none; }
       count.appendChild(document.createTextNode(items.length + " Termin" + (items.length > 1 ? "e" : "")));
      .day-card {
       top.appendChild(count);
        min-height: auto;
        padding: 14px;
      }
      .day-top {
        align-items: start;
      }
      .day-number {
        font-size: 1rem;
       }
      .detail-grid {
        grid-template-columns: 1fr;
        gap: 6px 0;
      }
     }
     }
  </style>
</head>
<body>
  <section class="calendar-app" aria-labelledby="calendar-heading">
    <div class="calendar-head">
      <div class="calendar-title-wrap">
        <h1 id="calendar-heading">Familienangebote im August 2026</h1>
        <p>In der Übersicht erscheinen nur Uhrzeit und Titel. Beim Klick öffnet sich ein Popup mit allen Details, Hinweisen zur Anmeldung und dem Link zu weiteren Informationen.</p>
      </div>
      <div class="badge">August 2026 · mobile optimiert</div>
    </div>


     <div class="weekday-row" aria-hidden="true">
     card.appendChild(top);
      <div class="weekday">Mo</div>
      <div class="weekday">Di</div>
      <div class="weekday">Mi</div>
      <div class="weekday">Do</div>
      <div class="weekday">Fr</div>
      <div class="weekday">Sa</div>
      <div class="weekday">So</div>
    </div>


     <div class="calendar-grid" id="calendarGrid"></div>
     var list = document.createElement("div");
  </section>
    list.className = "buefa-events-list";


  <dialog id="eventDialog" aria-labelledby="dialogTitle">
    if (items.length === 0) {
    <div class="modal-content">
      var emptyText = document.createElement("div");
       <div class="modal-header">
      emptyText.className = "buefa-empty-text";
         <h2 id="dialogTitle"></h2>
      emptyText.appendChild(document.createTextNode("Keine Einträge"));
         <button class="modal-close" type="button" id="closeDialog" aria-label="Popup schließen">✕</button>
       list.appendChild(emptyText);
      </div>
    } else {
      for (var j = 0; j < items.length; j++) {
        var eventItem = items[j];
         var btn = document.createElement("button");
         btn.className = "buefa-event-btn";
        btn.type = "button";
        btn.setAttribute("data-index", String(i) + "-" + String(j) + "-" + String(day));
        btn.buefaData = eventItem;


      <div class="detail-grid">
        var time = document.createElement("span");
         <div class="detail-label">Datum</div>
         time.className = "buefa-event-time";
         <div class="detail-value" id="dialogDate"></div>
         time.appendChild(document.createTextNode(eventItem.time || "Uhrzeit offen"));


         <div class="detail-label">Uhrzeit</div>
         var title = document.createElement("span");
         <div class="detail-value" id="dialogTime"></div>
         title.className = "buefa-event-title";
        title.appendChild(document.createTextNode(eventItem.title));


         <div class="detail-label">Ort</div>
         btn.appendChild(time);
        <div class="detail-value" id="dialogLocation"></div>
         btn.appendChild(title);
 
         btn.onclick = function () {
        <div class="detail-label">Zielgruppe</div>
          openModal(this.buefaData);
        <div class="detail-value" id="dialogAudience"></div>
         };
 
         list.appendChild(btn);
        <div class="detail-label">Anmeldung</div>
        <div class="detail-value" id="dialogRegistration"></div>
 
        <div class="detail-label">Zusatztext</div>
        <div class="detail-value" id="dialogDescription"></div>
      </div>
 
      <div class="modal-actions">
        <button class="btn" type="button" id="dialogCloseBottom">Schließen</button>
        <a class="btn btn-primary" id="dialogLink" href="#" target="_blank" rel="noopener noreferrer">Mehr Infos</a>
      </div>
    </div>
  </dialog>
 
  <script>
    const events = [
      {
        date: "2026-08-01",
        title: "Bächlewanderung mit Kind und Kescher",
        time: "10:00 - 13:00",
        location: "Start und Treffpunkt ist am Parkplatz Bebenhausen.",
        audience: "Geeignet für Familien mit Kindern ab 5 Jahren",
        registration: "wird benötigt",
        url: "https://www.fbs-tuebingen.de/eltern-und-kinder/kw/bereich/kursdetails/kurs/261-2516B/kursname/Baechlewanderung%20mit%20Kind%20und%20Kescher/kategorie-id/11/",
        description: "Wir wandern am Goldersbach entlang über die Tellerbrücke zur Teufelsbrücke."
      },
      {
        date: "2026-08-02",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-02",
        title: "Geschwisterchen auf dem Weg",
        time: "10:00 - 12:00",
         location: "FBS, Raum 003 Villa Metz, Hechingerstraße 13",
        audience: "Für Kinder ab 4 Jahren mit einem Elternteil",
        registration: "wird benötigt",
        url: "https://www.fbs-tuebingen.de/programm/kw/bereich/kursdetails/kurs/261-2509/kursname/Geschwisterchen%20auf%20dem%20Weg/",
        description: "Vorbereitung auf ein Geschwisterchen."
      },
      {
        date: "2026-08-04",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-05",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Piratenspielplatz, Anlagenpark",
        audience: "Familien mit jüngeren Kindern",
        registration: "Keine Anmeldung erforderlich",
        url: "",
        description: "Treffpunkt zum Austausch mit der Familienbeauftragten."
      },
      {
        date: "2026-08-06",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-06",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
         audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-09",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-11",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-12",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-13",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-13",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
        audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-16",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-16",
        title: "Bunt backen mit Kindern: Regenbogen-Muffins & Cake-Pops",
        time: "16:00 - 18:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-18",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
         location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-19",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-20",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-20",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
         audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-23",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
      },
      {
        date: "2026-08-25",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-26",
        title: "Spielplatztreff",
        time: "14:30 - 15:30",
        location: "Ort bitte ergänzen",
        audience: "Zielgruppe bitte ergänzen",
        registration: "Keine Angabe",
        url: "",
        description: ""
      },
      {
        date: "2026-08-27",
        title: "BabyBrunch",
        time: "09:30 - 11:30",
        location: "elkiko Familienzentrum",
        audience: "Eltern mit Säuglingen und Kleinkindern",
        registration: "babybrunch@elkiko.de",
        url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html",
        description: ""
      },
      {
        date: "2026-08-27",
        title: "Sommerferien mit dem LESE-HAUS",
        time: "11:00",
        location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen",
        audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen",
        registration: "Keine Angabe",
        url: "https://tuebingen.ferienprogramm-online.de/",
        description: "Vorlesestunde zum Thema „Unsere Welt ist bunt“ mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio."
      },
      {
        date: "2026-08-30",
        title: "Eiscafé frieDa",
        time: "14:00 - 17:00",
        location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen",
        audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung",
        registration: "Keine Angabe",
        url: "https://www.lebenshilfe-tuebingen.de/service/termine/",
        description: "Das Eiscafé frieDa ist ein Begegnungs-Ort."
       }
       }
    ];
    const weekdayLabels = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
    const monthName = "August";
    const year = 2026;
    const monthIndex = 7;
    const calendarGrid = document.getElementById("calendarGrid");
    const dialog = document.getElementById("eventDialog");
    const grouped = events.reduce((acc, item) => {
      const day = Number(item.date.split("-")[2]);
      if (!acc[day]) acc[day] = [];
      acc[day].push(item);
      return acc;
    }, {});
    const firstDay = new Date(year, monthIndex, 1);
    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
    const offset = (firstDay.getDay() + 6) % 7;
    for (let i = 0; i < offset; i++) {
      const empty = document.createElement("div");
      empty.className = "day-card empty";
      empty.setAttribute("aria-hidden", "true");
      calendarGrid.appendChild(empty);
     }
     }


     for (let day = 1; day <= daysInMonth; day++) {
     card.appendChild(list);
      const card = document.createElement("article");
    calendarGrid.appendChild(card);
      card.className = "day-card";
  }


      const items = grouped[day] || [];
  function setText(id, value, fallback) {
      const weekday = weekdayLabels[(offset + day - 1) % 7];
    var el = document.getElementById(id);
      const top = document.createElement("div");
    if (!el) {
      top.className = "day-top";
       return;
      top.innerHTML = `
        <div class="day-number">${weekday}, ${day}. ${monthName}</div>
        ${items.length ? `<div class="event-count">${items.length} Termin${items.length > 1 ? 'e' : ''}</div>` : ''}
      `;
      card.appendChild(top);
 
      const list = document.createElement("div");
      list.className = "events-list";
 
      if (!items.length) {
        const emptyText = document.createElement("div");
        emptyText.className = "muted-empty";
        emptyText.textContent = "Keine Einträge";
        list.appendChild(emptyText);
       } else {
        items.forEach(item => {
          const btn = document.createElement("button");
          btn.className = "event-chip";
          btn.type = "button";
          btn.innerHTML = `<span class="event-time">${item.time || 'Uhrzeit offen'}</span><span class="event-title">${item.title}</span>`;
          btn.addEventListener("click", () => openDialog(item));
          list.appendChild(btn);
        });
      }
 
      card.appendChild(list);
      calendarGrid.appendChild(card);
     }
     }
 
     var finalText = value;
     const fields = {
    if (!finalText || String(finalText).replace(/\s+/g, "") === "") {
      title: document.getElementById("dialogTitle"),
       finalText = fallback;
      date: document.getElementById("dialogDate"),
       el.className = "buefa-muted-empty";
      time: document.getElementById("dialogTime"),
     } else {
      location: document.getElementById("dialogLocation"),
       el.className = "";
      audience: document.getElementById("dialogAudience"),
       registration: document.getElementById("dialogRegistration"),
       description: document.getElementById("dialogDescription"),
      link: document.getElementById("dialogLink")
     };
 
    function formatDate(dateString) {
       return new Date(dateString + "T00:00:00").toLocaleDateString("de-DE", {
        weekday: "long",
        day: "numeric",
        month: "long",
        year: "numeric"
      });
     }
     }
    el.textContent = finalText;
  }


    function fillValue(el, value, fallback = "Keine Angabe") {
  function formatDate(dateString) {
      el.textContent = value && String(value).trim() ? value : fallback;
    var date = new Date(dateString + "T00:00:00");
       el.classList.toggle("muted-empty", !(value && String(value).trim()));
    return date.toLocaleDateString("de-DE", {
    }
      weekday: "long",
      day: "numeric",
       month: "long",
      year: "numeric"
    });
  }


    function openDialog(item) {
  function openModal(item) {
      fields.title.textContent = item.title;
    setText("buefaModalTitle", item.title, "Termin");
      fillValue(fields.date, formatDate(item.date));
    setText("buefaDetailDate", formatDate(item.date), "Keine Angabe");
      fillValue(fields.time, item.time, "Uhrzeit offen");
    setText("buefaDetailTime", item.time, "Uhrzeit offen");
      fillValue(fields.location, item.location);
    setText("buefaDetailLocation", item.location, "Keine Angabe");
      fillValue(fields.audience, item.audience);
    setText("buefaDetailAudience", item.audience, "Keine Angabe");
      fillValue(fields.registration, item.registration);
    setText("buefaDetailRegistration", item.registration, "Keine Angabe");
      fillValue(fields.description, item.description);
    setText("buefaDetailDescription", item.description, "Keine Angabe");


    var link = document.getElementById("buefaDetailLink");
    if (link) {
       if (item.url && item.url.trim()) {
       if (item.url && item.url.trim()) {
         fields.link.href = item.url;
         link.href = item.url;
         fields.link.style.display = "inline-flex";
         link.style.display = "inline-block";
       } else {
       } else {
         fields.link.removeAttribute("href");
         link.removeAttribute("href");
         fields.link.style.display = "none";
         link.style.display = "none";
       }
       }
      dialog.showModal();
     }
     }


     function closeDialog() {
     overlay.style.display = "block";
      dialog.close();
    modal.style.display = "block";
    }
  }


     document.getElementById("closeDialog").addEventListener("click", closeDialog);
  function closeModal() {
     document.getElementById("dialogCloseBottom").addEventListener("click", closeDialog);
     overlay.style.display = "none";
     modal.style.display = "none";
  }


    dialog.addEventListener("click", (event) => {
  var closeTop = document.getElementById("buefaModalClose");
      const rect = dialog.getBoundingClientRect();
  var closeBottom = document.getElementById("buefaModalCloseBottom");
      const clickedOutside = event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
  if (closeTop) {
      if (clickedOutside) dialog.close();
    closeTop.onclick = closeModal;
    });
  }
  </script>
  if (closeBottom) {
</body>
    closeBottom.onclick = closeModal;
</html>
  }
  if (overlay) {
    overlay.onclick = closeModal;
  }
})();
</script>

Version vom 10. Juni 2026, 10:20 Uhr

<style> 

 .buefa-calendar {
   max-width: 1180px;
   margin: 0 auto;
   padding: 24px 0 40px;
   font-family: Arial, Helvetica, sans-serif;
   color: #28251d;
 }
 .buefa-calendar-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 16px;
   margin-bottom: 18px;
   flex-wrap: wrap;
 }
 .buefa-calendar h2 {
   margin: 0;
   font-size: 2rem;
   line-height: 1.15;
 }
 .buefa-calendar-head p {
   margin: 8px 0 0;
   color: #6f6a63;
   max-width: 70ch;
 }
 .buefa-badge {
   display: inline-block;
   background: #dcebea;
   color: #01696f;
   border-radius: 999px;
   padding: 10px 14px;
   font-size: 0.92rem;
   font-weight: bold;
 }
 .buefa-weekdays,
 .buefa-calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 10px;
 }
 .buefa-weekday {
   text-align: center;
   padding: 12px 8px;
   color: #6f6a63;
   font-weight: bold;
   font-size: 0.92rem;
 }
 .buefa-day {
   min-height: 146px;
   background: #fff;
   border: 1px solid rgba(40, 37, 29, 0.12);
   border-radius: 18px;
   padding: 12px;
   box-shadow: 0 10px 28px rgba(36, 31, 24, 0.08);
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
 .buefa-day-empty {
   background: transparent;
   border-style: dashed;
   box-shadow: none;
 }
 .buefa-day-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
 }
 .buefa-day-number {
   font-weight: bold;
   font-size: 0.98rem;
   color: #6f6a63;
 }
 .buefa-event-count {
   font-size: 0.78rem;
   color: #01696f;
   background: #dcebea;
   padding: 4px 8px;
   border-radius: 999px;
   font-weight: bold;
 }
 .buefa-events-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 .buefa-event-btn {
   width: 100%;
   text-align: left;
   border: 1px solid transparent;
   background: #f3f0ec;
   border-radius: 12px;
   padding: 10px 11px;
   cursor: pointer;
 }
 .buefa-event-btn:hover,
 .buefa-event-btn:focus {
   border-color: rgba(1, 105, 111, 0.3);
   background: #eef6f5;
   outline: none;
 }
 .buefa-event-time {
   display: block;
   color: #01696f;
   font-weight: bold;
   font-size: 0.82rem;
   margin-bottom: 3px;
 }
 .buefa-event-title {
   display: block;
   font-size: 0.92rem;
   font-weight: bold;
   color: #28251d;
 }
 .buefa-empty-text {
   color: #6f6a63;
   font-style: italic;
 }
 .buefa-modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(20, 24, 34, 0.55);
   z-index: 9998;
   display: none;
 }
 .buefa-modal {
   position: fixed;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: min(94vw, 620px);
   max-height: 88vh;
   overflow: auto;
   background: #fff;
   border-radius: 22px;
   box-shadow: 0 24px 60px rgba(0,0,0,.25);
   z-index: 9999;
   display: none;
   padding: 22px;
 }
 .buefa-modal-header {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   align-items: start;
   margin-bottom: 18px;
 }
 .buefa-modal-header h3 {
   margin: 0;
   font-size: 1.4rem;
   line-height: 1.2;
 }
 .buefa-close {
   width: 42px;
   height: 42px;
   border-radius: 999px;
   border: 1px solid rgba(40, 37, 29, 0.12);
   background: #f3f0ec;
   font-size: 1.2rem;
   cursor: pointer;
 }
 .buefa-detail-grid {
   display: grid;
   grid-template-columns: 140px 1fr;
   gap: 12px 14px;
   margin-bottom: 22px;
 }
 .buefa-detail-label {
   font-weight: bold;
   color: #6f6a63;
 }
 .buefa-modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   flex-wrap: wrap;
 }
 .buefa-btn {
   display: inline-block;
   min-height: 44px;
   padding: 11px 16px;
   border-radius: 12px;
   text-decoration: none;
   font-weight: bold;
   border: 1px solid rgba(40, 37, 29, 0.12);
   color: #28251d;
   background: #fff;
   line-height: 1.5;
 }
 .buefa-btn-primary {
   background: #01696f;
   color: #fff;
   border-color: #01696f;
 }
 .buefa-muted-empty {
   color: #6f6a63;
   font-style: italic;
 }
 @media (max-width: 780px) {
   .buefa-weekdays { display: none; }
   .buefa-calendar-grid { grid-template-columns: 1fr; }
   .buefa-day-empty { display: none; }
   .buefa-day { min-height: auto; padding: 14px; }
   .buefa-detail-grid { grid-template-columns: 1fr; gap: 6px 0; }
 }

</style>

Familienangebote im August 2026

In der Übersicht erscheinen nur Uhrzeit und Titel. Beim Klick öffnen sich die vollständigen Informationen.

August 2026 · mobil optimiert
Mo
Di
Mi
Do
Fr
Sa
So

<script> (function () { 

 var events = [
   { date: "2026-08-01", title: "Bächlewanderung mit Kind und Kescher", time: "10:00 - 13:00", location: "Start und Treffpunkt ist am Parkplatz Bebenhausen.", audience: "Geeignet für Familien mit Kindern ab 5 Jahren", registration: "wird benötigt", url: "https://www.fbs-tuebingen.de/eltern-und-kinder/kw/bereich/kursdetails/kurs/261-2516B/kursname/Baechlewanderung%20mit%20Kind%20und%20Kescher/kategorie-id/11/", description: "Wir wandern am Goldersbach entlang über die Tellerbrücke zur Teufelsbrücke." },
   { date: "2026-08-02", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
   { date: "2026-08-02", title: "Geschwisterchen auf dem Weg", time: "10:00 - 12:00", location: "FBS, Raum 003 Villa Metz, Hechingerstraße 13", audience: "Für Kinder ab 4 Jahren mit einem Elternteil", registration: "wird benötigt", url: "https://www.fbs-tuebingen.de/programm/kw/bereich/kursdetails/kurs/261-2509/kursname/Geschwisterchen%20auf%20dem%20Weg/", description: "Vorbereitung auf ein Geschwisterchen." },
   { date: "2026-08-04", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-05", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Piratenspielplatz, Anlagenpark", audience: "Familien mit jüngeren Kindern", registration: "Keine Anmeldung erforderlich", url: "", description: "Treffpunkt zum Austausch mit der Familienbeauftragten." },
   { date: "2026-08-06", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-06", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
   { date: "2026-08-09", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
   { date: "2026-08-11", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-12", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
   { date: "2026-08-13", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-13", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
   { date: "2026-08-16", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
   { date: "2026-08-16", title: "Bunt backen mit Kindern: Regenbogen-Muffins & Cake-Pops", time: "16:00 - 18:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
   { date: "2026-08-18", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-19", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
   { date: "2026-08-20", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-20", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
   { date: "2026-08-23", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." },
   { date: "2026-08-25", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-26", title: "Spielplatztreff", time: "14:30 - 15:30", location: "Ort bitte ergänzen", audience: "Zielgruppe bitte ergänzen", registration: "Keine Angabe", url: "", description: "" },
   { date: "2026-08-27", title: "BabyBrunch", time: "09:30 - 11:30", location: "elkiko Familienzentrum", audience: "Eltern mit Säuglingen und Kleinkindern", registration: "babybrunch@elkiko.de", url: "https://www.elkiko.de/content2/index.php/de/programm/babybrunch-brunch1plus.html", description: "" },
   { date: "2026-08-27", title: "Sommerferien mit dem LESE-HAUS", time: "11:00", location: "Alter Botanischer Garten, Wiese neben dem Kinderspielplatz; bei schlechtem Wetter: Thekla-Waitz-Studio, im EG der Stadtbücherei, Nonnengasse 19, 72070 Tübingen", audience: "Kinder von 4 bis 8 Jahre mit Begleitpersonen", registration: "Keine Angabe", url: "https://tuebingen.ferienprogramm-online.de/", description: "Vorlesestunde zum Thema Unsere Welt ist bunt mit Geschichten von Lesepatinnen und Lesepaten des LESE-HAUSes sowie Mitarbeitenden der Stadtbücherei. Bei schönem Wetter findet die Veranstaltung im Alten Botanischen Garten statt, bei schlechtem Wetter im Thekla-Waitz-Studio." },
   { date: "2026-08-30", title: "Eiscafé frieDa", time: "14:00 - 17:00", location: "Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen", audience: "Familien, Nachbarn, Menschen mit und ohne Behinderung", registration: "Keine Angabe", url: "https://www.lebenshilfe-tuebingen.de/service/termine/", description: "Das Eiscafé frieDa ist ein Begegnungs-Ort." }
 ];

 var weekdayLabels = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
 var monthName = "August";
 var year = 2026;
 var monthIndex = 7;
 var calendarGrid = document.getElementById("buefaCalendarGrid");
 var overlay = document.getElementById("buefaModalOverlay");
 var modal = document.getElementById("buefaModal");

 if (!calendarGrid) {
   return;
 }

 var grouped = {};
 var i;
 for (i = 0; i < events.length; i++) {
   var item = events[i];
   var parts = item.date.split("-");
   var dayKey = parseInt(parts[2], 10);
   if (!grouped[dayKey]) {
     grouped[dayKey] = [];
   }
   grouped[dayKey].push(item);
 }

 var firstDay = new Date(year, monthIndex, 1);
 var daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
 var offset = (firstDay.getDay() + 6) % 7;

 for (i = 0; i < offset; i++) {
   var empty = document.createElement("div");
   empty.className = "buefa-day buefa-day-empty";
   calendarGrid.appendChild(empty);
 }

 for (var day = 1; day <= daysInMonth; day++) {
   var items = grouped[day] || [];
   var card = document.createElement("div");
   card.className = "buefa-day";

   var top = document.createElement("div");
   top.className = "buefa-day-top";

   var weekday = weekdayLabels[(offset + day - 1) % 7];
   var dayLabel = document.createElement("div");
   dayLabel.className = "buefa-day-number";
   dayLabel.appendChild(document.createTextNode(weekday + ", " + day + ". " + monthName));
   top.appendChild(dayLabel);

   if (items.length > 0) {
     var count = document.createElement("div");
     count.className = "buefa-event-count";
     count.appendChild(document.createTextNode(items.length + " Termin" + (items.length > 1 ? "e" : "")));
     top.appendChild(count);
   }

   card.appendChild(top);

   var list = document.createElement("div");
   list.className = "buefa-events-list";

   if (items.length === 0) {
     var emptyText = document.createElement("div");
     emptyText.className = "buefa-empty-text";
     emptyText.appendChild(document.createTextNode("Keine Einträge"));
     list.appendChild(emptyText);
   } else {
     for (var j = 0; j < items.length; j++) {
       var eventItem = items[j];
       var btn = document.createElement("button");
       btn.className = "buefa-event-btn";
       btn.type = "button";
       btn.setAttribute("data-index", String(i) + "-" + String(j) + "-" + String(day));
       btn.buefaData = eventItem;

       var time = document.createElement("span");
       time.className = "buefa-event-time";
       time.appendChild(document.createTextNode(eventItem.time || "Uhrzeit offen"));

       var title = document.createElement("span");
       title.className = "buefa-event-title";
       title.appendChild(document.createTextNode(eventItem.title));

       btn.appendChild(time);
       btn.appendChild(title);
       btn.onclick = function () {
         openModal(this.buefaData);
       };
       list.appendChild(btn);
     }
   }

   card.appendChild(list);
   calendarGrid.appendChild(card);
 }

 function setText(id, value, fallback) {
   var el = document.getElementById(id);
   if (!el) {
     return;
   }
   var finalText = value;
   if (!finalText || String(finalText).replace(/\s+/g, "") === "") {
     finalText = fallback;
     el.className = "buefa-muted-empty";
   } else {
     el.className = "";
   }
   el.textContent = finalText;
 }

 function formatDate(dateString) {
   var date = new Date(dateString + "T00:00:00");
   return date.toLocaleDateString("de-DE", {
     weekday: "long",
     day: "numeric",
     month: "long",
     year: "numeric"
   });
 }

 function openModal(item) {
   setText("buefaModalTitle", item.title, "Termin");
   setText("buefaDetailDate", formatDate(item.date), "Keine Angabe");
   setText("buefaDetailTime", item.time, "Uhrzeit offen");
   setText("buefaDetailLocation", item.location, "Keine Angabe");
   setText("buefaDetailAudience", item.audience, "Keine Angabe");
   setText("buefaDetailRegistration", item.registration, "Keine Angabe");
   setText("buefaDetailDescription", item.description, "Keine Angabe");

   var link = document.getElementById("buefaDetailLink");
   if (link) {
     if (item.url && item.url.trim()) {
       link.href = item.url;
       link.style.display = "inline-block";
     } else {
       link.removeAttribute("href");
       link.style.display = "none";
     }
   }

   overlay.style.display = "block";
   modal.style.display = "block";
 }

 function closeModal() {
   overlay.style.display = "none";
   modal.style.display = "none";
 }

 var closeTop = document.getElementById("buefaModalClose");
 var closeBottom = document.getElementById("buefaModalCloseBottom");
 if (closeTop) {
   closeTop.onclick = closeModal;
 }
 if (closeBottom) {
   closeBottom.onclick = closeModal;
 }
 if (overlay) {
   overlay.onclick = closeModal;
 }

})(); </script>

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