Testseite: Unterschied zwischen den Versionen

Aus Bündnis für Familie Tübingen.
Keine Bearbeitungszusammenfassung
Markierung: Manuelle Zurücksetzung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<!doctype html>
<html lang="de">
<html lang="de">
<head>
<head>
<meta charset="UTF-8" />
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kalender - August 2026</title>
  <title>Viele Formen von Familie – Programm 2026</title>
<style>
  <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
      --bg: #f6f7fb;
      --surface: #ffffff;
      --surface-soft: #f8fafc;
      --text: #1f2937;
      --muted: #64748b;
      --line: #dbe1ea;
      --accent: #0f766e;
      --accent-dark: #115e59;
      --accent-soft: #ecfdf5;
      --focus: #2563eb;
      --radius: 16px;
    }


    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
     body {
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      margin: 0;
       background: #f1f5f9;
      color: var(--text);
      color: #1e293b;
      background: var(--bg);
      padding: 1.5rem 1rem 3rem;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }
       line-height: 1.5;
 
    /* ===== HEADER ===== */
    .cal-header {
      max-width: 860px;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: baseline;
      gap: 1rem;
     }
     }
     .cal-header h2 {
     .wrap { width: min(100% - 2rem, 1200px); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) 0; }
      font-size: 1.6rem;
    h1, h2, h3 { line-height: 1.2; overflow-wrap: anywhere; }
       font-weight: 700;
    h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
       color: #0f172a;
    h2 { margin: 0 0 1rem; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
       letter-spacing: -0.03em;
    .intro { margin: 0 0 1.5rem; color: var(--muted); }
    .notice {
       margin: 0 0 1.5rem;
      padding: .85rem 1rem;
      border-left: 4px solid #d97706;
      border-radius: 10px;
       color: #78350f;
       background: #fffbeb;
     }
     }
     .cal-header p {
     .month {
       font-size: 0.8rem;
       margin-bottom: 1.5rem;
       color: #94a3b8;
      padding: clamp(.85rem, 2vw, 1.25rem);
       font-weight: 400;
      background: var(--surface);
      border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: 0 8px 24px rgb(15 23 42 / 5%);
     }
     }
 
     .weekdays, .grid {
    /* ===== GRID WRAPPER ===== */
     .cal-wrap {
      max-width: 860px;
       display: grid;
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       grid-template-columns: repeat(7, minmax(0, 1fr));
       border-radius: 16px;
       gap: clamp(4px, 1vw, 10px);
      overflow: hidden;
      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;
     }
     }
 
    .weekdays { margin-bottom: .5rem; }
     /* ===== COLUMN HEADERS ===== */
     .weekdays div {
    .col-header {
      padding: .25rem;
       background: #1e293b;
      color: var(--muted);
      font-size: .85rem;
       font-weight: 700;
       text-align: center;
       text-align: center;
      padding: 0.6rem 0.2rem;
      font-size: 0.7rem;
      font-weight: 600;
      color: #94a3b8;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    /* ===== DAY CELLS ===== */
    .day-empty {
      min-height: 90px;
      background: #f8fafc;
     }
     }
     .day {
     .day {
       min-height: 90px;
      min-width: 0;
       padding: 0.5rem 0.5rem 0.4rem;
       min-height: 120px;
       background: #ffffff;
       padding: .6rem;
       background: var(--surface-soft);
      border: 1px solid var(--line);
      border-radius: 12px;
       display: flex;
       display: flex;
       flex-direction: column;
       flex-direction: column;
       gap: 0.3rem;
       gap: .5rem;
      position: relative;
      transition: background 0.1s;
    }
    .day.we { background: #fafbff; }
 
    .day-num {
      font-size: 0.75rem;
      font-weight: 600;
      color: #64748b;
      line-height: 1;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      flex-shrink: 0;
     }
     }
 
    .day.muted { opacity: .45; }
     /* ===== CSS-ONLY POPUP ===== */
     .dn { color: #374151; font-size: .9rem; font-weight: 700; }
    .ev-toggle { display: none; }
     .event {
 
      width: 100%;
     .ev-chip {
      min-width: 0;
       display: block;
       padding: .65rem .7rem;
       background: #eff6ff;
       color: var(--accent-dark);
       border-left: 3px solid #3b82f6;
       text-align: left;
       border-radius: 0 6px 6px 0;
      font: inherit;
       padding: 0.22rem 0.4rem;
       background: var(--accent-soft);
       font-size: 0.67rem;
       border: 1px solid rgb(15 118 110 / 18%);
       line-height: 1.35;
       border-left: 4px solid var(--accent);
       border-radius: 10px;
       cursor: pointer;
       cursor: pointer;
       user-select: none;
       overflow-wrap: anywhere;
       transition: background 0.15s, transform 0.1s;
       transition: background .2s ease, transform .2s ease;
     }
     }
     .ev-chip:hover {
     .event:hover, .event:focus-visible { background: #d1fae5; transform: translateY(-1px); }
      background: #dbeafe;
    .event:focus-visible, button:focus-visible {
      transform: translateY(-1px);
      outline: 3px solid rgb(37 99 235 / 35%);
      outline-offset: 2px;
     }
     }
     .chip-time { font-weight: 700; color: #2563eb; display: block; }
     .event-time { display: block; margin-bottom: .15rem; font-size: .75rem; font-weight: 800; }
     .chip-title { color: #1e40af; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     .et { display: block; font-size: .84rem; font-weight: 700; line-height: 1.35; }


    /* Overlay */
     .event-dialog {
     .ev-overlay {
       width: min(92vw, 680px);
       display: none;
       max-height: 88vh;
       position: fixed;
       padding: 0;
       inset: 0;
      color: var(--text);
       background: rgba(15, 23, 42, 0.6);
       background: var(--surface);
       backdrop-filter: blur(2px);
      border: 0;
       z-index: 9998;
      border-radius: 18px;
      box-shadow: 0 20px 60px rgb(15 23 42 / 25%);
    }
    .event-dialog::backdrop { background: rgb(15 23 42 / 58%); }
    .dialog-inner { max-height: 88vh; overflow: auto; padding: 1.25rem; }
    .dialog-close {
      float: right;
       width: 2.75rem;
      height: 2.75rem;
      border: 0;
      border-radius: 50%;
      color: var(--text);
       background: #eef2f7;
      font-size: 1.5rem;
      line-height: 1;
       cursor: pointer;
       cursor: pointer;
     }
     }
    .dialog-close:hover { background: #e2e8f0; }
    .dialog-title { margin: 0 3.25rem .9rem 0; color: var(--accent-dark); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); }
    .dialog-date { margin: 0 0 1rem; color: var(--muted); font-weight: 700; }
    .dialog-details { display: grid; gap: .85rem; }
    .detail-row { padding-top: .85rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
    .detail-row strong { display: block; margin-bottom: .2rem; color: var(--text); }
    .detail-description { white-space: pre-line; }
    .dialog-link { color: var(--accent-dark); font-weight: 700; overflow-wrap: anywhere; }


     /* Modal */
     @media (max-width: 700px) {
    .ev-modal {
       .wrap { width: min(100% - 1rem, 600px); }
       display: none;
       .month { padding: .85rem; border-radius: 14px; }
       position: fixed;
       .weekdays, .grid { grid-template-columns: repeat(7, minmax(30px, 1fr)); gap: 3px; }
       top: 50%;
       .weekdays div { padding: .2rem 0; font-size: .7rem; }
      left: 50%;
       .day { min-height: 62px; padding: .35rem; border-radius: 9px; }
       transform: translate(-50%, -50%);
       .dn { font-size: .78rem; }
       z-index: 9999;
       .event { padding: .55rem .6rem; border-left-width: 3px; }
      background: #fff;
       .event-time { font-size: .65rem; }
      border-radius: 16px;
       .et { font-size: .74rem; }
       max-width: 460px;
       width: calc(100% - 2rem);
       padding: 2rem;
       box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.08);
     }
     }


     .ev-toggle:checked ~ .ev-overlay { display: block; }
     @media (max-width: 480px) {
    .ev-toggle:checked ~ .ev-modal  { display: block; }
      .grid { display: block; }
 
      .day { display: none; }
    .ev-modal-date {
      .day.has-events {
      font-size: 0.72rem;
        display: block;
      font-weight: 600;
        min-height: auto;
      color: #3b82f6;
        margin-bottom: .7rem;
      letter-spacing: 0.07em;
        padding: .7rem;
      text-transform: uppercase;
        background: var(--surface-soft);
      margin-bottom: 0.4rem;
       }
    }
       .day.has-events .dn { margin-bottom: .55rem; font-size: 1rem; }
    .ev-modal-title {
      .day.muted { display: none; }
      font-size: 1.3rem;
       .event { margin-top: .5rem; }
       font-weight: 700;
       .event-time { font-size: .76rem; }
       color: #0f172a;
       .et { font-size: .92rem; }
      letter-spacing: -0.02em;
      margin-bottom: 0.75rem;
      line-height: 1.3;
    }
    .ev-modal-time {
      display: inline-flex;
       align-items: center;
       gap: 0.35rem;
      font-size: 0.82rem;
       font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border-radius: 20px;
      padding: 0.3rem 0.8rem;
      margin-bottom: 1rem;
     }
     }
    .ev-modal-note {
      font-size: 0.88rem;
      color: #475569;
      line-height: 1.65;
      margin-bottom: 1.25rem;
    }
    .ev-modal-link {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
      font-size: 0.82rem;
      font-weight: 600;
      border-radius: 8px;
      padding: 0.5rem 1rem;
      transition: background 0.15s;
    }
    .ev-modal-link:hover { background: #1d4ed8; }


    /* Close button */
     @media (prefers-reduced-motion: reduce) {
    .ev-close {
       *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
      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: 580px) {
       body { padding: 1rem 0.5rem 2rem; }
      .cal-header { flex-direction: column; gap: 0.2rem; }
      .cal-header h2 { font-size: 1.3rem; }
      .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>
</head>
</head>
<body>
<body>
  <main class="wrap">
    <h1>Viele Formen von Familie</h1>
    <p class="intro">Hier findet ihr eine Übersicht über das gesamte Programm zur Ausstellung. Die Ausstellung ist von Anfang Oktober bis Dezember 2026 in der Hauptstelle der Stadtbücherei (Kinder- und Jugendbereich sowie 1. Stock) und im Stadtmuseum zu sehen.</p>
    <p class="notice"><strong>In Klärung:</strong> Kino – drei Sonntagsmatineen mit Familienfilmen.</p>


<div class="cal-header">
    <section class="month" aria-labelledby="oktober">
  <h2>Kalender - August 2026</h2>
      <h2 id="oktober">Oktober 2026</h2>
  <p>Klick auf einen Termin fuer mehr Details</p>
      <div class="weekdays" aria-hidden="true"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
</div>
      <div class="grid">
        <div class="day muted"><div class="dn">28</div></div>
        <div class="day muted"><div class="dn">29</div></div>
        <div class="day muted"><div class="dn">30</div></div>
        <div class="day"><div class="dn">1</div></div>
        <div class="day"><div class="dn">2</div></div>
        <div class="day"><div class="dn">3</div></div>
        <div class="day"><div class="dn">4</div></div>
        <div class="day"><div class="dn">5</div></div>
        <div class="day has-events"><div class="dn">6. Oktober</div><button class="event" type="button" data-date="Dienstag, 6. Oktober 2026" data-time="20:00–21:00 Uhr" data-audience="Eltern" data-place="Digitales Format" data-description="Eltern sein in Tübingen – so geht's leichter! Welche konkreten Tipps haben Tübinger Expert*innen für Eltern von jüngeren und älteren Kindern – zu Erziehungsthemen, aber auch zu Herausforderungen, die das Elternsein mit sich bringt? Diese und andere Fragen werden anschaulich, alltagsnah und verständlich für alle aufbereitet.


<div class="cal-wrap">
Durch das bewusst gewählte Online-Format können Interessierte bequem von überall aus teilnehmen – bei Bedarf anonym und ohne Kinderbetreuung organisieren zu müssen.
  <span class="col-header">Mo</span>
  <span class="col-header">Di</span>
  <span class="col-header">Mi</span>
  <span class="col-header">Do</span>
  <span class="col-header">Fr</span>
  <span class="col-header">Sa</span>
  <span class="col-header">So</span>


Diese Online-Themenreihe ist eine Kooperation der Universitätsstadt Tübingen mit der Familien-Bildungsstätte (FBS) und dem Bündnis für Familie (BüFa).


    <!-- ============================================================
Nach der Anmeldung erhalten Sie einen Zoom-Zugangscode. Ein eigener Zoom-Account ist nicht erforderlich. Für die Teilnahme benötigen Sie beispielsweise einen Computer, Laptop oder ein Smartphone mit Internetzugang, Kamera und Mikrofon." data-link="https://www.fbs-tuebingen.de/eltern-und-lebensthemen"><span class="event-time">20:00 Uhr</span><span class="et">Hochsensible Kinder gut unterstützen und begleiten</span></button></div>
    LEERE ZELLEN: August 2026 beginnt an einem Samstag (Spalte 6)
        <div class="day"><div class="dn">7</div></div>
    -> 5 leere Zellen fuer Mo bis Fr
        <div class="day has-events"><div class="dn">8. Oktober</div><button class="event" type="button" data-date="Donnerstag, 8. Oktober 2026" data-time="18:00 Uhr" data-audience="Alle Generationen, für Kinder ab 7 Jahren" data-place="Aula des Uhland-Gymnasiums, Uhlandstraße 24, 72072 Tübingen" data-description="Filmvorführung mit Gespräch über den Film „All Inclusive“. Die Veranstaltung wird vom Interkulturellen Mehrgenerationenhaus InFö e. V. und der Lebenshilfe veranstaltet."><span class="event-time">18:00 Uhr</span><span class="et">Filmvorführung mit Gespräch über den Film „All Inclusive“</span></button></div>
    ============================================================ -->
        <div class="day has-events"><div class="dn">9. Oktober</div><button class="event" type="button" data-date="Freitag, 9. Oktober 2026" data-time="15:00 Uhr" data-audience="Kinder von 4 bis 8 Jahren" data-place="Stadtbücherei Tübingen, Nonnengasse 19, Thekla-Waitz-Studio" data-description="Geschichten und Lieder auf Französisch laden Kinder spielerisch dazu ein, erste Eindrücke der Sprache zu sammeln. Mitarbeitende des Institut Culturel Franco-Allemand (ICFA) gestalten diese besondere Vorlesezeit rund um das Thema Familie."><span class="event-time">15:00 Uhr</span><span class="et">Vorlesezeit in französischer Sprache mit dem LESE-HAUS</span></button><button class="event" type="button" data-date="Freitag, 9. Oktober 2026" data-time="16:00 Uhr" data-audience="Kinder von 4 bis 8 Jahren" data-place="Stadtbücherei Tübingen, Nonnengasse 19, Thekla-Waitz-Studio" data-description="Bei dieser Vorlesezeit auf Deutsch stehen Geschichten rund um das Thema Familie im Mittelpunkt – mal lustig, mal spannend, mal berührend."><span class="event-time">16:00 Uhr</span><span class="et">Vorlesezeit mit dem LESE-HAUS</span></button><button class="event" type="button" data-date="Freitag, 9. Oktober 2026" data-time="17:00 Uhr" data-audience="Kinder von 4 bis 8 Jahren" data-place="Stadtbücherei Tübingen, Nonnengasse 19, Thekla-Waitz-Studio" data-description="Lesepatinnen aus der Ukraine lesen Geschichten in ihrer Muttersprache und geben Einblicke in ukrainische Erzähltraditionen rund um das Thema Familie."><span class="event-time">17:00 Uhr</span><span class="et">Vorlesezeit in ukrainischer Sprache mit dem LESE-HAUS</span></button></div>
    <div class="day-empty"></div><!-- Mo -->
        <div class="day"><div class="dn">10</div></div>
    <div class="day-empty"></div><!-- Di -->
        <div class="day"><div class="dn">11</div></div>
    <div class="day-empty"></div><!-- Mi -->
        <div class="day"><div class="dn">12</div></div>
    <div class="day-empty"></div><!-- Do -->
        <div class="day"><div class="dn">13</div></div>
    <div class="day-empty"></div><!-- Fr -->
        <div class="day"><div class="dn">14</div></div>
        <div class="day"><div class="dn">15</div></div>
        <div class="day"><div class="dn">16</div></div>
        <div class="day"><div class="dn">17</div></div>
        <div class="day"><div class="dn">18</div></div>
        <div class="day"><div class="dn">19</div></div>
        <div class="day"><div class="dn">20</div></div>
        <div class="day has-events"><div class="dn">21. Oktober</div><button class="event" type="button" data-date="Mittwoch, 21. Oktober 2026" data-time="17:00 Uhr" data-audience="Tübinger Familien und Interessierte" data-place="Stadtbücherei, Hauptstelle" data-description="Mitmachangebote zum Thema Familiensprachen sowie Informationen zu den Sprachencafés im elkiko Familienzentrum."><span class="event-time">17:00 Uhr</span><span class="et">Familiensprachen und Sprachencafés im elkiko Familienzentrum</span></button></div>
        <div class="day has-events"><div class="dn">22. Oktober</div><button class="event" type="button" data-date="Donnerstag, 22. Oktober 2026" data-time="18:00 Uhr" data-audience="Alle Interessierten" data-place="Museumsgesellschaft Obere Säle, Wilhelmstraße 3, Tübingen" data-description="Festliche Preisverleihung: Die sechs Preisträger*innen des Schreibwettbewerbs „We are family“ lesen aus ihren Siegertexten. Dr. Daniela Hüttig, Erste Landesbeamtin und Schirmherrin des Wettbewerbs, spricht ein Grußwort. Musikalisch umrahmt wird der Abend von Singer/Songwriter Jakob Longfield."><span class="event-time">18:00 Uhr</span><span class="et">Preisverleihung des 23. Schreibwettbewerbs für junge Menschen der Buchhandlung Wekenmann</span></button></div>
        <div class="day"><div class="dn">23</div></div>
        <div class="day"><div class="dn">24</div></div>
        <div class="day"><div class="dn">25</div></div>
        <div class="day"><div class="dn">26</div></div>
        <div class="day"><div class="dn">27</div></div>
        <div class="day"><div class="dn">28</div></div>
        <div class="day"><div class="dn">29</div></div>
        <div class="day"><div class="dn">30</div></div>
        <div class="day has-events"><div class="dn">31. Oktober</div><button class="event" type="button" data-date="Samstag, 31. Oktober 2026" data-time="15:00 Uhr" data-audience="Familien mit Kindern ab 3 Jahren" data-place="d.a.i. Tübingen, Karlstraße 3, Tübingen" data-description="Konzert und Halloween für die ganze Familie. Ab 15 Uhr spielt die BamBam-Band. Ab 16 Uhr heißt es Trick or Treat: Kinderdisco, Basteln, Gaming und jede Menge Spaß mit Popcorn und Snacks.


    <!-- Sa  1 --> <div class="day we"><div class="day-num">1</div></div>
Alles kostenfrei auf Spendenbasis. Kostüme sind sehr willkommen. Die Veranstaltung findet in deutscher und englischer Sprache statt." data-link="https://www.dai-tuebingen.de/bambam"><span class="event-time">15:00 Uhr</span><span class="et">BamBam-Band &amp; Halloween Fair for Kids</span></button></div>
    <!-- So  2 --> <div class="day we"><div class="day-num">2</div></div>
        <div class="day muted"><div class="dn">1</div></div>
    <!-- Mo  3 --> <div class="day">   <div class="day-num">3</div></div>
      </div>
    <!-- Di  4 --> <div class="day">  <div class="day-num">4</div></div>
    </section>


     <!-- ============================================================
     <section class="month" aria-labelledby="november">
    TERMIN HINZUFUEGEN: Kopiere den Block zwischen den Stern-Kommentaren
      <h2 id="november">November 2026</h2>
    in den gewuenschten Tag. Aendere:
      <div class="weekdays" aria-hidden="true"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
      - id="ev-XX" -> eindeutige ID, z.B. ev-04, ev-05 ...
      <div class="grid">
      - chip-time  -> Uhrzeit
        <div class="day muted"><div class="dn">26</div></div>
      - chip-title  -> Kurztitel (wird im Chip angezeigt)
        <div class="day muted"><div class="dn">27</div></div>
      - ev-modal-date -> Datum ausgeschrieben
        <div class="day muted"><div class="dn">28</div></div>
      - ev-modal-title -> Voller Titel
        <div class="day muted"><div class="dn">29</div></div>
      - ev-modal-time -> Uhrzeit
        <div class="day muted"><div class="dn">30</div></div>
      - ev-modal-note  -> Beschreibungstext
        <div class="day muted"><div class="dn">31</div></div>
      - href          -> URL (oder ganzen <a>-Tag entfernen wenn keine URL)
        <div class="day"><div class="dn">1</div></div>
    ============================================================ -->
        <div class="day"><div class="dn">2</div></div>
        <div class="day"><div class="dn">3</div></div>
        <div class="day"><div class="dn">4</div></div>
        <div class="day has-events"><div class="dn">5. November</div><button class="event" type="button" data-date="Donnerstag, 5. November 2026" data-time="09:00–11:00 Uhr" data-audience="Eltern von Kindern im Vorschulalter" data-place="Jugend- und Familienberatungszentrum Tübingen, Bismarckstraße 110, 72072 Tübingen, 2. Stock" data-description="Manche Kinder sind Weltmeister darin, Erwachsene an ihre Grenzen zu bringen. Gemeinsam soll ein Verständnis für als schwierig empfundene kindliche Verhaltensweisen entwickelt werden. Ziel ist außerdem, neue Reaktionsweisen auszuprobieren, um unnötige Machtkämpfe im Familienalltag zu vermeiden." data-link="mailto:jfbz-tue@kreis-tuebingen.de"><span class="event-time">09:00–11:00 Uhr</span><span class="et">„Der Widerspenstigen Zähmung?“ – Workshop</span></button><button class="event" type="button" data-date="Donnerstag, 5. November 2026" data-time="19:00 Uhr" data-audience="(Werdende) Eltern, die sich über Kleinkindbetreuung informieren möchten" data-place="Online" data-description="Um eine passende Betreuung nach der Elternzeit zu finden, braucht es einen Überblick über die verschiedenen Möglichkeiten der Kinderbetreuung. Welches Modell passt für welches Kind und welche Familie, welche Kriterien können eine Rolle spielen und was sind die Besonderheiten der Kindertagespflege?" data-link="mailto:info@tageselternverein.de"><span class="event-time">19:00 Uhr</span><span class="et">Nach der Elternzeit – welche Betreuung passt für mein Kind und unsere Familie?</span></button></div>
        <div class="day"><div class="dn">6</div></div>
        <div class="day"><div class="dn">7</div></div>
        <div class="day"><div class="dn">8</div></div>
        <div class="day has-events"><div class="dn">9. November</div><button class="event" type="button" data-date="Montag, 9. November 2026" data-time="18:00–20:00 Uhr" data-audience="Alle Eltern und Erziehungsberechtigten" data-place="Hirsch Begegnungsstätte, Hirschgasse 9, 72070 Tübingen" data-description="Schwimmen für alle Kinder informiert zu einem besseren Verständnis von Wassergewöhnung. Enthalten sind alltagspraktische Übungen für Kinder vor dem Schwimmkurs. Eintritt frei, Getränke gegen Spende."><span class="event-time">18:00–20:00 Uhr</span><span class="et">Wassergewöhnung – wie unterstütze ich mein Kind?</span></button></div>
        <div class="day has-events"><div class="dn">10. November</div><button class="event" type="button" data-date="Dienstag, 10. November 2026" data-time="18:00 Uhr" data-audience="Alle Interessierten" data-place="Gemeindehaus Lamm, Großer Saal 1, Am Markt 7, Tübingen" data-description="Was es bedeutet, in Deutschland arm aufzuwachsen: Journalistin und Podcasterin Miriam Davoudvandi (aka Cashmiri) bringt mit dem aktuellen Buch „Das können wir uns nicht leisten“ ihre Geschichte mit Texten, persönlichen Geschichten, Humor und Pop auf die Bühne."><span class="event-time">18:00 Uhr</span><span class="et">Live-Show mit Miriam Davoudvandi: Das können wir uns nicht leisten</span></button><button class="event" type="button" data-date="Dienstag, 10. November 2026" data-time="17:00–19:00 Uhr" data-audience="Eltern von Kindern der 1. bis 6. Klasse" data-place="Brückenhaus, Werkstraße 8, 72074 Tübingen" data-description="Teil 1: Entwicklungsaufgaben, Eltern-Kind-Bindung, Mutter und Vater als Unterstützer*innen, Lernen und Selbstwirksamkeit. Wie können Eltern ihr Kind unterstützen, damit es in der Schule gut zurechtkommt? Wo gibt es Unterstützung? Welche verschiedenen Wege zum Erfolg gibt es? Was brauchen Kinder für eine gute Entwicklung?


    <!-- Mi  5 - TERMIN -->
Zu diesen Fragen gibt es jeweils einen kurzen Vortrag auf Deutsch, Englisch, Arabisch und Persisch."><span class="event-time">17:00–19:00 Uhr</span><span class="et">Das Geheimnis des Bildungserfolgs, Teil 1: Entwicklungsaufgaben</span></button></div>
    <div class="day">
        <div class="day has-events"><div class="dn">11. November</div><button class="event" type="button" data-date="Mittwoch, 11. November 2026" data-time="19:00–21:00 Uhr" data-audience="Eltern" data-place="Lorettoplatz 30, Tübingen" data-description="Vorstellung von kit jugendhilfe mit dem Schwerpunkt auf professionellen Pflegefamilien und anschließender Diskussionsrunde. Eine kurze Rückmeldung zur Teilnahme wäre schön, ist aber nicht zwingend notwendig." data-link="mailto:andrea.leitgeb@kit-jugendhilfe.de"><span class="event-time">19:00–21:00 Uhr</span><span class="et">„Zu Hause in einer Erziehungsstelle“ – Podiumsdiskussion mit Beteiligten in verschiedenen Rollen</span></button></div>
      <div class="day-num">5</div>
        <div class="day"><div class="dn">12</div></div>
      <!-- *** TERMIN ANFANG *** -->
        <div class="day"><div class="dn">13</div></div>
      <input type="checkbox" class="ev-toggle" id="ev-01">
        <div class="day"><div class="dn">14</div></div>
      <label class="ev-chip" for="ev-01">
        <div class="day has-events"><div class="dn">15. November</div><button class="event" type="button" data-date="Sonntag, 15. November 2026" data-time="14:00–17:00 Uhr" data-audience="Familien mit Kindern, 0 bis 99 Jahre" data-place="Café frieDa, Friedrich-Dannenmann-Straße 69, 72070 Tübingen" data-description="Bunte Bastelstunde im Café frieDa mit Angeboten für die ganz Kleinen und Größeren. Unter anderem werden Leinenbeutel bemalt und bedruckt. Für die großen Gäste gibt es Kaffee und Kuchen auf Spendenbasis. Keine Anmeldung erforderlich."><span class="event-time">14:00–17:00 Uhr</span><span class="et">Familienbasteln im Café frieDa</span></button></div>
        <span class="chip-time">14:00</span>
        <div class="day"><div class="dn">16</div></div>
        <span class="chip-title">Stadtfest Tuebingen</span>
        <div class="day has-events"><div class="dn">17. November</div><button class="event" type="button" data-date="Dienstag, 17. November 2026" data-time="17:00–19:00 Uhr" data-audience="Eltern von Kindern der 1. bis 6. Klasse" data-place="Brückenhaus, Werkstraße 8, 72074 Tübingen" data-description="Das Geheimnis des Bildungserfolgs – was Ihr Kind von Ihnen als Mutter und Vater braucht. Drei internationale Präsenz-Elternabende auf Deutsch, Englisch, Arabisch und Persisch für Eltern von Kindern der 1. bis 6. Klasse. Wie können Sie als Eltern Ihr Kind unterstützen?"><span class="event-time">17:00–19:00 Uhr</span><span class="et">Das Geheimnis des Bildungserfolgs, Teil 2: Erfolg in Schule, Bildung und Teilhabe</span></button></div>
      </label>
        <div class="day"><div class="dn">18</div></div>
      <label class="ev-overlay" for="ev-01"></label>
        <div class="day has-events"><div class="dn">19. November</div><button class="event" type="button" data-date="Donnerstag, 19. November 2026" data-time="09:30–11:30 Uhr" data-audience="Eltern mit Kindern im Alter von 0 bis 3 Jahren" data-place="Jugend- und Familienberatungszentrum Tübingen, Bismarckstraße 110, 72072 Tübingen, 2. Stock" data-description="Rezeptideen für ein starkes Familienleben – Zutaten: Feinfühligkeit, Zeit, Vertrauen und mehr. In gemütlicher und kleinkindorientierter Atmosphäre wird gemeinsam darüber gesprochen, was für ein starkes Familienleben sorgt." data-link="mailto:fruehehilfen@kreis-tuebingen.de"><span class="event-time">09:30–11:30 Uhr</span><span class="et">Zutaten für ein starkes Familienleben</span></button></div>
      <div class="ev-modal">
         <div class="day"><div class="dn">20</div></div>
         <label class="ev-close" for="ev-01">✕</label>
         <div class="day has-events"><div class="dn">21. November</div><button class="event" type="button" data-date="Samstag, 21. November 2026" data-time="10:00–15:00 Uhr" data-audience="Familien mit Kindern aller Altersgruppen" data-place="d.a.i. Tübingen, Karlstraße 3, Bibliothek" data-description="Kommen Sie ins d.a.i. Tübingen und basteln Sie gemeinsam wunderschöne Thanksgiving-Dekorationen. Feiern Sie den Tag der Dankbarkeit bei einer gemütlichen Bastelrunde in der d.a.i.-Bibliothek."><span class="event-time">10:00–15:00 Uhr</span><span class="et">Bastelspaß für die ganze Familie – Thanksgiving Edition</span></button></div>
         <div class="ev-modal-date">Mittwoch, 5. August 2026</div>
         <div class="day"><div class="dn">22</div></div>
         <div class="ev-modal-title">Stadtfest Tuebingen</div>
        <div class="day"><div class="dn">23</div></div>
         <div class="ev-modal-time">🕐 14:00 Uhr</div>
         <div class="day has-events"><div class="dn">24. November</div><button class="event" type="button" data-date="Dienstag, 24. November 2026" data-time="17:00–19:00 Uhr" data-audience="Eltern von Kindern der 1. bis 6. Klasse" data-place="Brückenhaus, Werkstraße 8, 72074 Tübingen" data-description="Das Geheimnis des Bildungserfolgs – was Ihr Kind von Ihnen als Mutter und Vater braucht. Drei internationale Präsenz-Elternabende auf Deutsch, Englisch, Arabisch und Persisch. Wie können Sie als Eltern Ihr Kind unterstützen?"><span class="event-time">17:00–19:00 Uhr</span><span class="et">Das Geheimnis des Bildungserfolgs, Teil 3: Medienerziehung</span></button><button class="event" type="button" data-date="Dienstag, 24. November 2026" data-time="Ganztägig" data-audience="Familien" data-place="Stadtbücherei Tübingen, Nonnengasse 19, Tübingen" data-description="Im Rahmen der Europäischen Woche der Abfallvermeidung bietet die Stadtbücherei Tübingen eine besondere Mitmachaktion an: An einem Papierbindetisch können aus einseitig bedrucktem Altpapier Spiralblöcke hergestellt werden. Papier ist vor Ort verfügbar, kann aber auch gerne mitgebracht werden."><span class="event-time">Ganztägig</span><span class="et">Gemeinsam gegen Abfall – Papierrecycling in der Stadtbücherei</span></button></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>
         <div class="day has-events"><div class="dn">25. November</div><button class="event" type="button" data-date="Mittwoch, 25. November 2026" data-time="Ganztägig" data-audience="Familien" data-place="Stadtbücherei Tübingen, Nonnengasse 19, Tübingen" data-description="Im Rahmen der Europäischen Woche der Abfallvermeidung bietet die Stadtbücherei Tübingen eine besondere Mitmachaktion an: An einem Papierbindetisch können aus einseitig bedrucktem Altpapier Spiralblöcke hergestellt werden. Papier ist vor Ort verfügbar, kann aber auch gerne mitgebracht werden."><span class="event-time">Ganztägig</span><span class="et">Gemeinsam gegen Abfall – Papierrecycling in der Stadtbücherei</span></button></div>
         <a class="ev-modal-link" href="https://www.tuebingen.de" target="_blank" rel="noopener">🔗 Mehr Infos</a>
        <div class="day has-events"><div class="dn">26. November</div><button class="event" type="button" data-date="Donnerstag, 26. November 2026" data-time="Ganztägig" data-audience="Familien" data-place="Stadtbücherei Tübingen, Nonnengasse 19, Tübingen" data-description="Im Rahmen der Europäischen Woche der Abfallvermeidung bietet die Stadtbücherei Tübingen eine besondere Mitmachaktion an: An einem Papierbindetisch können aus einseitig bedrucktem Altpapier Spiralblöcke hergestellt werden. Papier ist vor Ort verfügbar, kann aber auch gerne mitgebracht werden."><span class="event-time">Ganztägig</span><span class="et">Gemeinsam gegen Abfall – Papierrecycling in der Stadtbücherei</span></button></div>
        <div class="day"><div class="dn">27</div></div>
        <div class="day"><div class="dn">28</div></div>
        <div class="day"><div class="dn">29</div></div>
         <div class="day"><div class="dn">30</div></div>
        <div class="day muted"><div class="dn">1</div></div>
        <div class="day muted"><div class="dn">2</div></div>
        <div class="day muted"><div class="dn">3</div></div>
        <div class="day muted"><div class="dn">4</div></div>
        <div class="day muted"><div class="dn">5</div></div>
        <div class="day muted"><div class="dn">6</div></div>
       </div>
       </div>
      <!-- *** TERMIN ENDE *** -->
    </section>
    </div>
  </main>


    <!-- Do  6 --> <div class="day">  <div class="day-num">6</div></div>
  <dialog id="eventDialog" class="event-dialog" aria-labelledby="dialogTitle">
    <!-- Fr  7 --> <div class="day">   <div class="day-num">7</div></div>
    <div class="dialog-inner">
    <!-- Sa  8 --> <div class="day we"><div class="day-num">8</div></div>
      <button type="button" class="dialog-close" id="dialogClose" aria-label="Details schließen">×</button>
    <!-- So  9 --> <div class="day we"><div class="day-num">9</div></div>
      <h2 id="dialogTitle" class="dialog-title"></h2>
    <!-- Mo 10 --> <div class="day">  <div class="day-num">10</div></div>
      <p id="dialogDate" class="dialog-date"></p>
    <!-- Di 11 --> <div class="day">  <div class="day-num">11</div></div>
      <div class="dialog-details">
 
        <div class="detail-row"><strong>Uhrzeit</strong><span id="dialogTime"></span></div>
    <!-- Mi 12 - TERMIN -->
         <div class="detail-row"><strong>Zielgruppe</strong><span id="dialogAudience"></span></div>
    <div class="day">
        <div class="detail-row"><strong>Treffpunkt</strong><span id="dialogPlace"></span></div>
      <div class="day-num">12</div>
         <div class="detail-row"><strong>Beschreibung</strong><div id="dialogDescription" class="detail-description"></div></div>
      <!-- *** TERMIN ANFANG *** -->
         <div id="dialogLinkRow" class="detail-row" hidden><strong>Weitere Informationen / Anmeldung</strong><a id="dialogLink" class="dialog-link" target="_blank" rel="noopener"></a></div>
      <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>
       </div>
      <!-- *** TERMIN ENDE *** -->
     </div>
     </div>
  </dialog>


    <!-- Do 13 --> <div class="day">   <div class="day-num">13</div></div>
   <script>
     <!-- Fr 14 --> <div class="day">  <div class="day-num">14</div></div>
     (() => {
    <!-- Sa 15 --> <div class="day we"><div class="day-num">15</div></div>
      const dialog = document.getElementById("eventDialog");
    <!-- So 16 --> <div class="day we"><div class="day-num">16</div></div>
      const closeButton = document.getElementById("dialogClose");
    <!-- Mo 17 --> <div class="day">  <div class="day-num">17</div></div>
       const title = document.getElementById("dialogTitle");
    <!-- Di 18 --> <div class="day">  <div class="day-num">18</div></div>
       const date = document.getElementById("dialogDate");
    <!-- Mi 19 --> <div class="day">  <div class="day-num">19</div></div>
       const time = document.getElementById("dialogTime");
    <!-- Do 20 --> <div class="day">  <div class="day-num">20</div></div>
       const audience = document.getElementById("dialogAudience");
    <!-- Fr 21 --> <div class="day">  <div class="day-num">21</div></div>
       const place = document.getElementById("dialogPlace");
    <!-- Sa 22 --> <div class="day we"><div class="day-num">22</div></div>
      const description = document.getElementById("dialogDescription");
 
      const linkRow = document.getElementById("dialogLinkRow");
    <!-- So 23 - TERMIN -->
      const link = document.getElementById("dialogLink");
    <div class="day we">
       <div class="day-num">23</div>
       <!-- *** TERMIN ANFANG *** -->
      <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>
      document.querySelectorAll(".event").forEach((event) => {
    <!-- Di 25 --> <div class="day">  <div class="day-num">25</div></div>
        event.addEventListener("click", () => {
    <!-- Mi 26 --> <div class="day">  <div class="day-num">26</div></div>
          title.textContent = event.querySelector(".et").textContent.trim();
    <!-- Do 27 --> <div class="day">  <div class="day-num">27</div></div>
          date.textContent = event.dataset.date || "";
    <!-- Fr 28 --> <div class="day">  <div class="day-num">28</div></div>
          time.textContent = event.dataset.time || "Nicht angegeben";
    <!-- Sa 29 --> <div class="day we"><div class="day-num">29</div></div>
          audience.textContent = event.dataset.audience || "Nicht angegeben";
    <!-- So 30 --> <div class="day we"><div class="day-num">30</div></div>
          place.textContent = event.dataset.place || "Nicht angegeben";
    <!-- Mo 31 --> <div class="day">  <div class="day-num">31</div></div>
          description.textContent = event.dataset.description || "Keine Beschreibung vorhanden.";


    <!-- ============================================================
          const url = event.dataset.link;
    LEERE ZELLEN NACH TAG 31
          if (url) {
    31. August = Montag -> noch 6 leere Zellen (Di bis So)
            linkRow.hidden = false;
    ============================================================ -->
            link.href = url;
    <div class="day-empty"></div><!-- Di -->
            link.textContent = url.startsWith("mailto:") ? url.replace("mailto:", "") : url;
    <div class="day-empty"></div><!-- Mi -->
            link.target = url.startsWith("mailto:") ? "_self" : "_blank";
    <div class="day-empty"></div><!-- Do -->
          } else {
    <div class="day-empty"></div><!-- Fr -->
            linkRow.hidden = true;
    <div class="day-empty"></div><!-- Sa -->
            link.removeAttribute("href");
    <div class="day-empty"></div><!-- So -->
            link.textContent = "";
          }


</div><!-- .cal-wrap -->
          dialog.showModal();
        });
      });


      closeButton.addEventListener("click", () => dialog.close());
      dialog.addEventListener("click", (event) => {
        if (event.target === dialog) dialog.close();
      });
    })();
  </script>
</body>
</body>
</html>
</html>

Version vom 7. September 2026, 12:07 Uhr

<!doctype html> Viele Formen von Familie – Programm 2026

Viele Formen von Familie

Hier findet ihr eine Übersicht über das gesamte Programm zur Ausstellung. Die Ausstellung ist von Anfang Oktober bis Dezember 2026 in der Hauptstelle der Stadtbücherei (Kinder- und Jugendbereich sowie 1. Stock) und im Stadtmuseum zu sehen.

In Klärung: Kino – drei Sonntagsmatineen mit Familienfilmen.

Oktober 2026

28
29
30
1
2
3
4
5
6. Oktober
7
8. Oktober
9. Oktober
10
11
12
13
14
15
16
17
18
19
20
21. Oktober
22. Oktober
23
24
25
26
27
28
29
30
31. Oktober
1

November 2026

26
27
28
29
30
31
1
2
3
4
5. November
6
7
8
9. November
10. November
11. November
12
13
14
15. November
16
17. November
18
19. November
20
21. November
22
23
24. November
25. November
26. November
27
28
29
30
1
2
3
4
5
6

Uhrzeit
Zielgruppe
Treffpunkt
Beschreibung

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