hardtschule-karlsruhe.de/script.js

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));
}