Testseite: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Zeile 8: Zeile 8:


     body {
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
       font-family: 'Segoe UI', system-ui, sans-serif;
       background: #f1f5f9;
       background: #f0f4f8;
       color: #1e293b;
       color: #1a202c;
      min-height: 100vh;
       padding: 1.5rem 1rem 3rem;
       padding: 1.5rem 1rem 3rem;
     }
     }


     /* ===== HEADER ===== */
     header { text-align: center; margin-bottom: 1.75rem; }
    .cal-header {
 
      max-width: 860px;
     header h1 {
      margin-bottom: 1.25rem;
       font-size: clamp(1.5rem, 5vw, 2.25rem);
      display: flex;
      align-items: baseline;
      gap: 1rem;
     }
    .cal-header h2 {
       font-size: 1.6rem;
       font-weight: 700;
       font-weight: 700;
      color: #0f172a;
       letter-spacing: -0.02em;
       letter-spacing: -0.03em;
      color: #1a202c;
     }
     }
     .cal-header p {
 
      font-size: 0.8rem;
     header p { color: #64748b; font-size: 0.9rem; margin-top: 0.3rem; }
       color: #94a3b8;
 
       font-weight: 400;
    .calendar {
       max-width: 900px;
      margin: 0 auto;
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
       box-shadow: 0 4px 24px rgba(0,0,0,.08);
     }
     }


    /* ===== GRID WRAPPER ===== */
     .weekdays {
     .cal-wrap {
      max-width: 860px;
       display: grid;
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       grid-template-columns: repeat(7, 1fr);
       border-radius: 16px;
       background: #1e3a5f;
      overflow: hidden;
       color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 8px 24px rgba(0,0,0,.08);
      border: 1px solid #e2e8f0;
       background: #e2e8f0; /* gap color between cells */
      gap: 1px;
     }
     }


    /* ===== COLUMN HEADERS ===== */
     .weekdays span {
     .col-header {
      background: #1e293b;
       text-align: center;
       text-align: center;
       padding: 0.6rem 0.2rem;
       padding: 0.65rem 0;
       font-size: 0.7rem;
       font-size: 0.75rem;
       font-weight: 600;
       font-weight: 600;
      color: #94a3b8;
       letter-spacing: 0.06em;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       text-transform: uppercase;
     }
     }


     /* ===== DAY CELLS ===== */
     .days {
    .day-empty {
      display: grid;
       min-height: 90px;
      grid-template-columns: repeat(7, 1fr);
       background: #f8fafc;
       border-left: 1px solid #e2e8f0;
       border-top: 1px solid #e2e8f0;
     }
     }


     .day {
     .day {
       min-height: 90px;
       min-height: 90px;
       padding: 0.5rem 0.5rem 0.4rem;
       padding: 0.45rem;
       background: #ffffff;
      border-right: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
       background: #fff;
       display: flex;
       display: flex;
       flex-direction: column;
       flex-direction: column;
       gap: 0.3rem;
       gap: 0.3rem;
      position: relative;
      transition: background 0.1s;
     }
     }
    .day.we { background: #fafbff; }


     .day-num {
     .day.empty { background: #f8fafc; }
      font-size: 0.75rem;
 
       font-weight: 600;
    .day.today .day-number {
       color: #64748b;
       background: #1e3a5f;
       line-height: 1;
       color: #fff;
       width: 22px;
       border-radius: 50%;
       height: 22px;
       width: 26px;
       height: 26px;
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
       justify-content: center;
       justify-content: center;
      border-radius: 50%;
      flex-shrink: 0;
     }
     }


     /* ===== CSS-ONLY POPUP ===== */
     .day-number {
    .ev-toggle { display: none; }
      font-size: 0.8rem;
      font-weight: 600;
      color: #475569;
      line-height: 1;
      margin-bottom: 0.1rem;
    }


     .ev-chip {
     .event-chip {
      display: block;
       background: #dbeafe;
       background: #eff6ff;
       border-left: 3px solid #2563eb;
       border-left: 3px solid #3b82f6;
       border-radius: 4px;
       border-radius: 0 6px 6px 0;
       padding: 0.2rem 0.35rem;
       padding: 0.22rem 0.4rem;
       font-size: 0.7rem;
       font-size: 0.67rem;
       line-height: 1.3;
       line-height: 1.35;
       cursor: pointer;
       cursor: pointer;
      user-select: none;
       transition: background 0.15s, transform 0.1s;
       transition: background 0.15s, transform 0.1s;
      word-break: break-word;
    }
    .event-chip:hover { background: #bfdbfe; transform: translateY(-1px); }
    .event-chip .chip-time {
      font-weight: 700;
      color: #1d4ed8;
      display: block;
     }
     }
     .ev-chip:hover {
 
       background: #dbeafe;
     .event-chip .chip-title {
       transform: translateY(-1px);
       color: #1e3a5f;
      display: block;
       white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
     }
     }
    .chip-time  { font-weight: 700; color: #2563eb; display: block; }
    .chip-title { color: #1e40af; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


    /* Overlay */
     .modal-overlay {
     .ev-overlay {
       display: none;
       display: none;
       position: fixed;
       position: fixed;
       inset: 0;
       inset: 0;
       background: rgba(15, 23, 42, 0.6);
       background: rgba(15, 23, 42, 0.55);
       backdrop-filter: blur(2px);
       z-index: 100;
       z-index: 9998;
      align-items: center;
       cursor: pointer;
       justify-content: center;
       padding: 1rem;
     }
     }


    /* Modal */
     .modal-overlay.open { display: flex; }
     .ev-modal {
 
      display: none;
    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
       background: #fff;
       background: #fff;
       border-radius: 16px;
       border-radius: 16px;
       max-width: 460px;
       max-width: 480px;
       width: calc(100% - 2rem);
       width: 100%;
       padding: 2rem;
       padding: 2rem;
       box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
      position: relative;
       box-shadow: 0 20px 60px rgba(0,0,0,.2);
      animation: pop .18s ease-out;
    }
 
    @keyframes pop {
      from { opacity: 0; transform: scale(.94); }
      to  { opacity: 1; transform: scale(1); }
    }
 
    .modal-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: #f1f5f9;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      transition: background .15s;
     }
     }


     .ev-toggle:checked ~ .ev-overlay { display: block; }
     .modal-close:hover { background: #e2e8f0; }
    .ev-toggle:checked ~ .ev-modal  { display: block; }


     .ev-modal-date {
     .modal-date {
       font-size: 0.72rem;
       font-size: 0.8rem;
       font-weight: 600;
       font-weight: 600;
      color: #3b82f6;
       letter-spacing: 0.05em;
       letter-spacing: 0.07em;
       text-transform: uppercase;
       text-transform: uppercase;
      color: #2563eb;
       margin-bottom: 0.4rem;
       margin-bottom: 0.4rem;
     }
     }
     .ev-modal-title {
 
     .modal-title {
       font-size: 1.3rem;
       font-size: 1.3rem;
       font-weight: 700;
       font-weight: 700;
       color: #0f172a;
       color: #1a202c;
      letter-spacing: -0.02em;
       margin-bottom: 0.6rem;
       margin-bottom: 0.75rem;
       line-height: 1.3;
       line-height: 1.3;
     }
     }
     .ev-modal-time {
 
     .modal-time {
       display: inline-flex;
       display: inline-flex;
       align-items: center;
       align-items: center;
       gap: 0.35rem;
       gap: 0.4rem;
       font-size: 0.82rem;
      background: #f0f9ff;
      color: #0369a1;
      border-radius: 6px;
      padding: 0.3rem 0.7rem;
       font-size: 0.85rem;
       font-weight: 600;
       font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border-radius: 20px;
      padding: 0.3rem 0.8rem;
       margin-bottom: 1rem;
       margin-bottom: 1rem;
     }
     }
     .ev-modal-note {
 
       font-size: 0.88rem;
     .modal-note {
       font-size: 0.9rem;
       color: #475569;
       color: #475569;
       line-height: 1.65;
       line-height: 1.6;
       margin-bottom: 1.25rem;
       margin-bottom: 1.2rem;
     }
     }
     .ev-modal-link {
 
     .modal-link {
       display: inline-flex;
       display: inline-flex;
       align-items: center;
       align-items: center;
       gap: 0.4rem;
       gap: 0.4rem;
       background: #2563eb;
       background: #1e3a5f;
       color: #fff;
       color: #fff;
       text-decoration: none;
       text-decoration: none;
       font-size: 0.82rem;
      border-radius: 8px;
      padding: 0.55rem 1.1rem;
       font-size: 0.85rem;
       font-weight: 600;
       font-weight: 600;
      border-radius: 8px;
       transition: background .15s;
      padding: 0.5rem 1rem;
       transition: background 0.15s;
     }
     }
    .ev-modal-link:hover { background: #1d4ed8; }


    /* Close button */
     .modal-link:hover { background: #2563eb; }
     .ev-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: #f1f5f9;
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      cursor: pointer;
      font-size: 0.8rem;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      transition: background 0.15s;
    }
    .ev-close:hover { background: #e2e8f0; color: #0f172a; }


    /* ===== MOBILE ===== */
     @media (max-width: 600px) {
     @media (max-width: 580px) {
       .weekdays span { font-size: 0.62rem; }
      body { padding: 1rem 0.5rem 2rem; }
       .day { min-height: 60px; padding: 0.3rem; }
      .cal-header { flex-direction: column; gap: 0.2rem; }
       .event-chip { font-size: 0.62rem; padding: 0.15rem 0.25rem; }
      .cal-header h2 { font-size: 1.3rem; }
       .event-chip .chip-title { display: none; }
       .col-header { font-size: 0.58rem; padding: 0.5rem 0; }
       .day, .day-empty { min-height: 56px; }
      .day { padding: 0.3rem 0.25rem; }
      .day-num { font-size: 0.68rem; }
       .ev-chip { font-size: 0.6rem; padding: 0.15rem 0.25rem; }
       .chip-title { display: none; }
     }
     }
   </style>
   </style>
Zeile 229: Zeile 230:
<body>
<body>


<div class="cal-header">
<header>
   <h2>Kalender - August 2026</h2>
   <h1>August 2026</h1>
   <p>Klick auf einen Termin fuer mehr Details</p>
   <p>Klick auf einen Termin fur mehr Details</p>
</header>
 
<div class="calendar">
  <div class="weekdays">
    <span>Mo</span><span>Di</span><span>Mi</span><span>Do</span><span>Fr</span><span>Sa</span><span>So</span>
  </div>
  <div class="days" id="calGrid"></div>
</div>
</div>


<div class="cal-wrap">
<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true">
   <span class="col-header">Mo</span>
   <div class="modal">
  <span class="col-header">Di</span>
    <button class="modal-close" id="modalClose" aria-label="Schliessen">✕</button>
  <span class="col-header">Mi</span>
    <div class="modal-date" id="mDate"></div>
  <span class="col-header">Do</span>
    <div class="modal-title" id="mTitle"></div>
  <span class="col-header">Fr</span>
    <div class="modal-time">🕐 <span id="mTimeText"></span></div>
  <span class="col-header">Sa</span>
    <div class="modal-note" id="mNote"></div>
   <span class="col-header">So</span>
    <a class="modal-link" id="mLink" href="#" target="_blank" rel="noopener">
      🔗 Mehr Infos
    </a>
   </div>
</div>


<script>
  // ==================================================
  // TERMINE - hier pflegen
  // ==================================================
  var events = [
    {
      datum: "2026-08-05",
      titel: "Stadtfest Reutlingen",
      uhrzeit: "14:00",
      zusatztext: "Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.",
      url: "https://www.reutlingen.de"
    },
    {
      datum: "2026-08-12",
      titel: "Team-Meeting Q3",
      uhrzeit: "09:30",
      zusatztext: "Quartals-Review mit allen Abteilungen. Bitte Berichte bis 08.08. einreichen. Video-Call-Link wird separat verschickt.",
      url: "https://meet.example.com/q3-review"
    },
    {
      datum: "2026-08-22",
      titel: "Open-Air Kino",
      uhrzeit: "21:00",
      zusatztext: "Filmabend im Stadtpark - gezeigt wird Cinema Paradiso (1988). Einlass ab 20:00 Uhr, Decke und Sitzkissen empfohlen. Eintritt frei.",
      url: "https://www.openair-kino-beispiel.de"
    }
  ];
  // ==================================================


    <!-- ============================================================
  var byDate = {};
    LEERE ZELLEN: August 2026 beginnt an einem Samstag (Spalte 6)
  events.forEach(function(e) {
     -> 5 leere Zellen fuer Mo bis Fr
     if (!byDate[e.datum]) byDate[e.datum] = [];
    ============================================================ -->
     byDate[e.datum].push(e);
    <div class="day-empty"></div><!-- Mo -->
  });
    <div class="day-empty"></div><!-- Di -->
     <div class="day-empty"></div><!-- Mi -->
    <div class="day-empty"></div><!-- Do -->
    <div class="day-empty"></div><!-- Fr -->


    <!-- Sa  1 --> <div class="day we"><div class="day-num">1</div></div>
  var grid = document.getElementById('calGrid');
    <!-- So  2 --> <div class="day we"><div class="day-num">2</div></div>
  var year = 2026;
    <!-- Mo  3 --> <div class="day">   <div class="day-num">3</div></div>
  var month = 7;
    <!-- Di  4 --> <div class="day">   <div class="day-num">4</div></div>
  var firstDay = new Date(year, month, 1).getDay();
  var offset = (firstDay + 6) % 7;
   var daysInMonth = new Date(year, month + 1, 0).getDate();
   var today = new Date();


    <!-- ============================================================
  for (var i = 0; i < offset; i++) {
    TERMIN HINZUFUEGEN: Kopiere den Block zwischen den Stern-Kommentaren
     var empty = document.createElement('div');
     in den gewuenschten Tag. Aendere:
    empty.className = 'day empty';
      - id="ev-XX"  -> eindeutige ID, z.B. ev-04, ev-05 ...
    grid.appendChild(empty);
      - chip-time  -> Uhrzeit
  }
      - chip-title  -> Kurztitel (wird im Chip angezeigt)
      - ev-modal-date  -> Datum ausgeschrieben
      - ev-modal-title -> Voller Titel
      - ev-modal-time  -> Uhrzeit
      - ev-modal-note  -> Beschreibungstext
      - href          -> URL (oder ganzen <a>-Tag entfernen wenn keine URL)
    ============================================================ -->


    <!-- Mi  5 - TERMIN -->
  for (var d = 1; d <= daysInMonth; d++) {
    <div class="day">
    var cell = document.createElement('div');
      <div class="day-num">5</div>
    cell.className = 'day';
      <!-- *** TERMIN ANFANG *** -->
      <input type="checkbox" class="ev-toggle" id="ev-01">
      <label class="ev-chip" for="ev-01">
        <span class="chip-time">14:00</span>
        <span class="chip-title">Stadtfest Tuebingen</span>
      </label>
      <label class="ev-overlay" for="ev-01"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-01">✕</label>
        <div class="ev-modal-date">Mittwoch, 5. August 2026</div>
        <div class="ev-modal-title">Stadtfest Tuebingen</div>
        <div class="ev-modal-time">🕐 14:00 Uhr</div>
        <div class="ev-modal-note">Das jaehrliche Stadtfest in der Innenstadt mit Live-Musik, Essen und Marktstaenden. Parkplaetze sind begrenzt - Anreise mit OPNV empfohlen.</div>
        <a class="ev-modal-link" href="https://www.tuebingen.de" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
    </div>


     <!-- Do  6 --> <div class="day">  <div class="day-num">6</div></div>
     var isToday = today.getFullYear() === year
    <!-- Fr  7 --> <div class="day">  <div class="day-num">7</div></div>
      && today.getMonth() === month
    <!-- Sa  8 --> <div class="day we"><div class="day-num">8</div></div>
      && today.getDate() === d;
    <!-- So  9 --> <div class="day we"><div class="day-num">9</div></div>
     if (isToday) cell.classList.add('today');
    <!-- Mo 10 --> <div class="day">  <div class="day-num">10</div></div>
     <!-- Di 11 --> <div class="day">  <div class="day-num">11</div></div>


     <!-- Mi 12 - TERMIN -->
     var num = document.createElement('div');
    <div class="day">
    num.className = 'day-number';
      <div class="day-num">12</div>
    num.textContent = d;
      <!-- *** TERMIN ANFANG *** -->
     cell.appendChild(num);
      <input type="checkbox" class="ev-toggle" id="ev-02">
      <label class="ev-chip" for="ev-02">
        <span class="chip-time">09:30</span>
        <span class="chip-title">Netzwerktreffen Buendnis</span>
      </label>
      <label class="ev-overlay" for="ev-02"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-02">✕</label>
        <div class="ev-modal-date">Mittwoch, 12. August 2026</div>
        <div class="ev-modal-title">Netzwerktreffen Buendnis fuer Familie</div>
        <div class="ev-modal-time">🕐 09:30 Uhr</div>
        <div class="ev-modal-note">Quartalsweise Netzwerktreffen aller Mitglieder des Buendnisses fuer Familie Tuebingen. Bitte Berichte bis 08.08. einreichen.</div>
        <a class="ev-modal-link" href="https://www.buendnis-fuer-familie-tuebingen.de/Netzwerke_und_Arbeitsgruppen" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
     </div>


     <!-- Do 13 --> <div class="day">  <div class="day-num">13</div></div>
     var mm = String(month + 1).padStart(2, '0');
    <!-- Fr 14 --> <div class="day">  <div class="day-num">14</div></div>
     var dd = String(d).padStart(2, '0');
    <!-- Sa 15 --> <div class="day we"><div class="day-num">15</div></div>
     var dateKey = year + '-' + mm + '-' + dd;
     <!-- So 16 --> <div class="day we"><div class="day-num">16</div></div>
     <!-- Mo 17 --> <div class="day">  <div class="day-num">17</div></div>
    <!-- Di 18 --> <div class="day">  <div class="day-num">18</div></div>
    <!-- Mi 19 --> <div class="day">  <div class="day-num">19</div></div>
    <!-- Do 20 --> <div class="day">  <div class="day-num">20</div></div>
    <!-- Fr 21 --> <div class="day">  <div class="day-num">21</div></div>
    <!-- Sa 22 --> <div class="day we"><div class="day-num">22</div></div>


     <!-- So 23 - TERMIN -->
     if (byDate[dateKey]) {
    <div class="day we">
       byDate[dateKey].forEach(function(ev) {
       <div class="day-num">23</div>
         var chip = document.createElement('div');
      <!-- *** TERMIN ANFANG *** -->
         chip.className = 'event-chip';
      <input type="checkbox" class="ev-toggle" id="ev-03">
      <label class="ev-chip" for="ev-03">
         <span class="chip-time">11:00</span>
        <span class="chip-title">Familienfest Stadtpark</span>
      </label>
      <label class="ev-overlay" for="ev-03"></label>
      <div class="ev-modal">
        <label class="ev-close" for="ev-03">✕</label>
        <div class="ev-modal-date">Sonntag, 23. August 2026</div>
         <div class="ev-modal-title">Familienfest im Stadtpark</div>
        <div class="ev-modal-time">🕐 11:00 Uhr</div>
        <div class="ev-modal-note">Grosses Familienfest mit Spiel, Spass und Unterhaltung fuer Kinder jeden Alters. Eintritt frei, Anmeldung nicht erforderlich.</div>
        <a class="ev-modal-link" href="https://www.buendnis-fuer-familie-tuebingen.de/Aktuelles" target="_blank" rel="noopener">🔗 Mehr Infos</a>
      </div>
      <!-- *** TERMIN ENDE *** -->
    </div>


    <!-- Mo 24 --> <div class="day">  <div class="day-num">24</div></div>
        var timeSpan = document.createElement('span');
    <!-- Di 25 --> <div class="day">  <div class="day-num">25</div></div>
        timeSpan.className = 'chip-time';
    <!-- Mi 26 --> <div class="day">  <div class="day-num">26</div></div>
        timeSpan.textContent = ev.uhrzeit;
    <!-- Do 27 --> <div class="day">  <div class="day-num">27</div></div>
    <!-- Fr 28 --> <div class="day">  <div class="day-num">28</div></div>
    <!-- Sa 29 --> <div class="day we"><div class="day-num">29</div></div>
    <!-- So 30 --> <div class="day we"><div class="day-num">30</div></div>
    <!-- Mo 31 --> <div class="day">  <div class="day-num">31</div></div>


    <!-- ============================================================
        var titleSpan = document.createElement('span');
     LEERE ZELLEN NACH TAG 31
        titleSpan.className = 'chip-title';
     31. August = Montag -> noch 6 leere Zellen (Di bis So)
        titleSpan.textContent = ev.titel;
     ============================================================ -->
 
     <div class="day-empty"></div><!-- Di -->
        chip.appendChild(timeSpan);
     <div class="day-empty"></div><!-- Mi -->
        chip.appendChild(titleSpan);
     <div class="day-empty"></div><!-- Do -->
 
     <div class="day-empty"></div><!-- Fr -->
        chip.addEventListener('click', (function(evData) {
     <div class="day-empty"></div><!-- Sa -->
          return function() { openModal(evData); };
     <div class="day-empty"></div><!-- So -->
        })(ev));
 
        cell.appendChild(chip);
      });
     }
 
     grid.appendChild(cell);
  }
 
  var overlay  = document.getElementById('modalOverlay');
  var btnClose = document.getElementById('modalClose');
 
  function openModal(ev) {
     var d = new Date(ev.datum + 'T00:00:00');
    document.getElementById('mDate').textContent =
      d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
     document.getElementById('mTitle').textContent  = ev.titel;
     document.getElementById('mTimeText').textContent = ev.uhrzeit + ' Uhr';
     document.getElementById('mNote').textContent    = ev.zusatztext;
     var link = document.getElementById('mLink');
     if (ev.url) {
      link.href = ev.url;
      link.style.display = 'inline-flex';
     } else {
      link.style.display = 'none';
    }
    overlay.classList.add('open');
  }


</div><!-- .cal-wrap -->
  function closeModal() { overlay.classList.remove('open'); }


  btnClose.addEventListener('click', closeModal);
  overlay.addEventListener('click', function(e) { if (e.target === overlay) closeModal(); });
  document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });
</script>
</body>
</body>
</html>
</html>

Version vom 10. Juni 2026, 11:23 Uhr

Kalender - August 2026

August 2026

Klick auf einen Termin fur mehr Details

MoDiMiDoFrSaSo

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