feat: neue Website mit Docker-Deployment

script.js

@@ -0,0 +1,267 @@
+const menuButton = document.querySelector("[data-menu-button]");
+const mobileNav = document.querySelector("[data-mobile-nav]");
+const dialog = document.querySelector("[data-dialog]");
+const dialogTitle = document.querySelector("[data-dialog-title]");
+const dialogKicker = document.querySelector("[data-dialog-kicker]");
+const dialogContent = document.querySelector("[data-dialog-content]");
+const dialogActions = document.querySelector("[data-dialog-actions]");
+const dialogClose = document.querySelector("[data-dialog-close]");
+
+const detailContent = {
+  schulanfang: {
+    kicker: "Für zukünftige Erstklässler*innen",
+    title: "Ein guter Start in die Schule",
+    html: `
+      <p>Die Hardtschule informiert Familien rechtzeitig über Schulanmeldung, Kennenlernnachmittag, Elternabend und Einschulung.</p>
+      <p><strong>Für verbindliche Termine des kommenden Schuljahres</strong> wenden Sie sich bitte an das Sekretariat. So landen keine veralteten Termine aus dem Webarchiv auf Ihrer Merkliste.</p>
+      <div class="dialog-note">Dieser Prototyp ist bereits für eine jährlich aktualisierbare Termin- und Downloadpflege vorbereitet.</div>
+    `,
+    actions: [
+      { label: "Sekretariat anrufen", href: "tel:+497211334686", primary: true },
+      { label: "E-Mail schreiben", href: "mailto:schulleitung@hardtschule-karlsruhe.de" },
+    ],
+  },
+  materiallisten: {
+    kicker: "Downloads",
+    title: "Materiallisten klar nach Klasse sortiert",
+    html: `
+      <p>Vorgesehen sind aktuelle Listen für <strong>Klasse 1, 2, 3, 4 sowie die VKL</strong>. Frühere Listen aus dem Schuljahr 2025/26 wurden bewusst nicht als aktuell übernommen.</p>
+      <p>Bis die neuen PDF-Dateien von der Schule eingestellt sind, erhalten Familien die verbindliche Liste über die Klassenleitung oder das Sekretariat.</p>
+      <div class="dialog-note">Gut erhaltene Schulsachen können in der Regel weiterverwendet werden – bitte immer die aktuelle Klassenliste beachten.</div>
+    `,
+    actions: [
+      { label: "Liste anfragen", href: "mailto:schulleitung@hardtschule-karlsruhe.de?subject=Aktuelle%20Materialliste", primary: true },
+      { label: "Sekretariat anrufen", href: "tel:+497211334686" },
+    ],
+  },
+  bewegung: {
+    kicker: "Schulprofil",
+    title: "Bewegung gehört zum Lernen",
+    html: `
+      <p>Die Hardtschule ist seit 2010 als Grundschule mit sport- und bewegungserzieherischem Schwerpunkt zertifiziert und wurde 2016 erfolgreich rezertifiziert.</p>
+      <ul>
+        <li>regelmäßige Bewegungszeiten im Klassenzimmer</li>
+        <li>Methoden des bewegten Lernens</li>
+        <li>drei Sportstunden in der benachbarten Carl-Benz-Halle</li>
+        <li>Spiel- und Sportgeräte für aktive Pausen</li>
+      </ul>
+      <p>So können Kinder nach konzentrierten Arbeitsphasen neue Energie sammeln und Lernen mit allen Sinnen erleben.</p>
+    `,
+    actions: [{ label: "Zur Schulgemeinschaft", href: "#gemeinschaft", primary: true }],
+  },
+  miteinander: {
+    kicker: "Soziales Lernen",
+    title: "Respekt wird jeden Tag geübt",
+    html: `
+      <p>Das 2023 verabschiedete Sozialcurriculum bildet die Grundlage für Prävention und soziales Lernen.</p>
+      <ul>
+        <li>angemessen und respektvoll mit Konflikten umgehen</li>
+        <li>zusammen arbeiten, leben und lernen</li>
+        <li>einander unterstützen und bei Bedarf Hilfe holen</li>
+        <li>Verantwortung im Klassenrat und Schüler*innenparlament übernehmen</li>
+      </ul>
+      <p>Ergänzend finden bedarfsgerechte Projekte mit externen Partnern statt – etwa Theaterpädagogik, Selbstbehauptung und Klassentraining.</p>
+    `,
+    actions: [{ label: "Beratung kennenlernen", action: "beratung", primary: true }],
+  },
+  sprache: {
+    kicker: "VKL & Deutschförderung",
+    title: "Sprache schafft Zugehörigkeit",
+    html: `
+      <p>In der Vorbereitungsklasse (VKL) lernen neu zugewanderte Kinder Deutsch und finden schrittweise in den Schulalltag hinein.</p>
+      <p>Die Förderung verbindet sprachliches Lernen mit Begegnung, Orientierung und der Teilnahme an der Schulgemeinschaft. Nach dem Wechsel in eine Regelklasse kann nachgehende Deutschförderung unterstützen.</p>
+      <div class="dialog-note">Aufnahme und Förderumfang werden individuell mit Schule und zuständigen Stellen abgestimmt.</div>
+    `,
+    actions: [
+      { label: "VKL-Anfrage senden", href: "mailto:schulleitung@hardtschule-karlsruhe.de?subject=Anfrage%20zur%20VKL", primary: true },
+      { label: "Sekretariat anrufen", href: "tel:+497211334686" },
+    ],
+  },
+  rundgang: {
+    kicker: "Gebäude & Gelände",
+    title: "Willkommen in der Hardtschule",
+    html: `
+      <p>Im historischen Schulhaus befinden sich Klassenräume, Sekretariat und Rektorat. Das Lesezimmer wird auch für den Unterricht der VKL genutzt.</p>
+      <ul>
+        <li>Klassenzimmer auf mehreren Etagen</li>
+        <li>Lesezimmer und Räume für Förderung</li>
+        <li>Schülerhort direkt an der Schule</li>
+        <li>Schulhof, Spielplatz und „Grüne Insel“</li>
+        <li>Carl-Benz-Halle für Sport, Einschulung und Feste</li>
+      </ul>
+      <p>Der denkmalgeschützte Anbau von 1906 wurde 2020 behutsam saniert. Historische Materialien blieben dabei erhalten.</p>
+    `,
+    actions: [
+      { label: "Anfahrt ansehen", href: "#kontakt", primary: true },
+      { label: "Städtisches Bauprojekt", href: "https://www.karlsruhe.de/mobilitaet-stadtbild/hochbau-und-architektur/neubauten-und-bauen-im-bestand/hardtschule-brandschutz-und-wc-sanierung", external: true },
+    ],
+  },
+  mitbestimmung: {
+    kicker: "Schüler*innenparlament",
+    title: "Kinder gestalten ihre Schule mit",
+    html: `
+      <p>Klassensprecher*innen bringen die Perspektiven ihrer Klassen in das Schüler*innenparlament ein. Sie hören zu, vertreten Interessen und helfen dabei, gemeinsame Lösungen zu finden.</p>
+      <p>Klassenrat, Pausenengel und soziale Lernstunden geben Beteiligung einen festen Platz im Alltag – nicht nur bei besonderen Projekten.</p>
+    `,
+    actions: [{ label: "Mehr zum sozialen Lernen", action: "miteinander", primary: true }],
+  },
+  beratung: {
+    kicker: "Schulsozialarbeit",
+    title: "Vertrauliche Hilfe direkt an der Schule",
+    html: `
+      <p>Die Schulsozialarbeit ist ein Beratungsangebot der Stadt Karlsruhe für Schüler*innen, Erziehungsberechtigte und das Kollegium.</p>
+      <ul>
+        <li>freiwillig, vertraulich und kostenlos</li>
+        <li>Unterstützung bei schulischen und persönlichen Anliegen</li>
+        <li>Begleitung bei Konflikten und Fragen zum Kinder- und Jugendschutz</li>
+        <li>Projekte zu Prävention, Sozialkompetenz und Klassengemeinschaft</li>
+      </ul>
+      <p><strong>Telefon Schulsozialarbeit:</strong> 0721 133-5755<br><strong>Sprechzeiten:</strong> Montag, Mittwoch, Donnerstag und Freitag, 9:00–13:00 Uhr. Individuelle Termine sind möglich.</p>
+    `,
+    actions: [
+      { label: "Schulsozialarbeit anrufen", href: "tel:+497211335755", primary: true },
+      { label: "Infos der Stadt", href: "https://www.karlsruhe.de/schuso", external: true },
+    ],
+  },
+  foerderverein: {
+    kicker: "Engagement",
+    title: "Gemeinsam mehr möglich machen",
+    html: `
+      <p>Der Förderverein unterstützt Lern- und Erfahrungsmöglichkeiten, die allen Kindern der Hardtschule zugutekommen.</p>
+      <ul>
+        <li>Theaterbesuche und außerschulische Lernorte</li>
+        <li>Pausenobst im Rahmen des EU-Schulprogramms</li>
+        <li>neue Bücher und Spiele für das Lesezimmer</li>
+        <li>Spiel- und Sportgeräte für die Pausen</li>
+        <li>Feste, Projekttage und gemeinschaftliche Erlebnisse</li>
+      </ul>
+      <p>Mitgliedschaft und Mithilfe stärken ein solidarisches Miteinander im Interesse aller Kinder.</p>
+    `,
+    actions: [{ label: "Mitgliedschaft anfragen", href: "mailto:schulleitung@hardtschule-karlsruhe.de?subject=Kontakt%20zum%20F%C3%B6rderverein", primary: true }],
+  },
+};
+
+function setMenu(open) {
+  if (!menuButton || !mobileNav) return;
+  menuButton.setAttribute("aria-expanded", String(open));
+  mobileNav.hidden = !open;
+  document.body.classList.toggle("menu-open", open);
+}
+
+menuButton?.addEventListener("click", () => {
+  setMenu(menuButton.getAttribute("aria-expanded") !== "true");
+});
+
+mobileNav?.querySelectorAll("a").forEach((link) => {
+  link.addEventListener("click", () => setMenu(false));
+});
+
+function renderActions(actions = []) {
+  dialogActions.innerHTML = "";
+  actions.forEach((action) => {
+    const element = document.createElement("a");
+    element.className = `button ${action.primary ? "button-dark" : "button-outline"}`;
+    element.textContent = action.label;
+
+    if (action.action) {
+      element.href = "#";
+      element.addEventListener("click", (event) => {
+        event.preventDefault();
+        openDetail(action.action);
+      });
+    } else {
+      element.href = action.href;
+      if (action.external) {
+        element.target = "_blank";
+        element.rel = "noreferrer";
+      }
+      if (action.href?.startsWith("#")) {
+        element.addEventListener("click", () => dialog.close());
+      }
+    }
+
+    const arrow = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    arrow.setAttribute("aria-hidden", "true");
+    const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+    use.setAttribute("href", "#icon-arrow");
+    arrow.append(use);
+    element.append(arrow);
+    dialogActions.append(element);
+  });
+}
+
+function openDetail(key) {
+  const content = detailContent[key];
+  if (!content || !dialog) return;
+
+  dialogKicker.textContent = content.kicker;
+  dialogTitle.textContent = content.title;
+  dialogContent.innerHTML = content.html;
+  renderActions(content.actions);
+
+  if (!dialog.open) dialog.showModal();
+  document.body.classList.add("dialog-open");
+}
+
+document.querySelectorAll("[data-detail]").forEach((trigger) => {
+  trigger.addEventListener("click", () => openDetail(trigger.dataset.detail));
+});
+
+dialogClose?.addEventListener("click", () => dialog.close());
+
+dialog?.addEventListener("click", (event) => {
+  if (event.target === dialog) dialog.close();
+});
+
+dialog?.addEventListener("close", () => {
+  document.body.classList.remove("dialog-open");
+});
+
+document.querySelectorAll("[data-year]").forEach((element) => {
+  element.textContent = new Date().getFullYear();
+});
+
+const revealElements = document.querySelectorAll(".reveal");
+const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+if (reduceMotion || !("IntersectionObserver" in window)) {
+  revealElements.forEach((element) => element.classList.add("is-visible"));
+} else {
+  const revealObserver = new IntersectionObserver(
+    (entries, observer) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add("is-visible");
+        observer.unobserve(entry.target);
+      });
+    },
+    { threshold: 0.12, rootMargin: "0px 0px -40px" },
+  );
+
+  revealElements.forEach((element) => revealObserver.observe(element));
+}
+
+const navLinks = [...document.querySelectorAll(".desktop-nav a")];
+const sections = navLinks
+  .map((link) => document.querySelector(link.getAttribute("href")))
+  .filter(Boolean);
+
+if ("IntersectionObserver" in window && navLinks.length) {
+  const sectionObserver = new IntersectionObserver(
+    (entries) => {
+      const visible = entries
+        .filter((entry) => entry.isIntersecting)
+        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+      if (!visible) return;
+
+      navLinks.forEach((link) => {
+        const active = link.getAttribute("href") === `#${visible.target.id}`;
+        if (active) link.setAttribute("aria-current", "true");
+        else link.removeAttribute("aria-current");
+      });
+    },
+    { rootMargin: "-30% 0px -60%", threshold: [0, 0.1, 0.3] },
+  );
+
+  sections.forEach((section) => sectionObserver.observe(section));
+}