feat: Website für IONOS und neue Rubriken aktualisieren

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+.playwright-cli/
+node_modules/
+npm-debug.log*

Dockerfile

@@ -5,8 +5,7 @@ LABEL org.opencontainers.image.description="Statische Website der Hardtschule Ka
 LABEL org.opencontainers.image.source="https://git.servercentral.org/jonas/hardtschule-karlsruhe.de"
 
 COPY nginx.conf /etc/nginx/conf.d/default.conf
-COPY index.html impressum.html datenschutz.html styles.css script.js /usr/share/nginx/html/
-COPY public/ /usr/share/nginx/html/public/
+COPY src/website/ /usr/share/nginx/html/
 
 EXPOSE 80
 

README.md

@@ -2,6 +2,35 @@
 
 Ein eigenständiger, responsiver Website-Prototyp auf Basis öffentlich auffindbarer Informationen der bisherigen Schulwebsite, des Webarchivs und der Stadt Karlsruhe.
 
+## Öffentliches Website-Verzeichnis
+
+Alle Dateien, die auf einen Webspace gehören, liegen ausschließlich in:
+
+```text
+src/website/
+├── .htaccess
+├── index.html
+├── impressum.html
+├── datenschutz.html
+├── barrierefreiheit.html
+├── styles.css
+├── script.js
+└── public/
+    └── images/
+```
+
+Für einen Upload oder eine Synchronisation muss deshalb nur der **Inhalt von `src/website/`** in das Zielverzeichnis der Domain übertragen werden. Die versteckte Datei `.htaccess` muss dabei eingeschlossen sein. Dateien aus dem Projektstamm wie `Dockerfile`, `package.json`, `server.mjs` oder `.gitea/` gehören nicht auf den Webspace.
+
+## Auf IONOS/1&1 veröffentlichen
+
+1. Im IONOS-Konto unter **Domains & SSL** prüfen, mit welchem Webspace-Verzeichnis die Domain verbunden ist.
+2. Das SSL-Zertifikat für `hardtschule-karlsruhe.de` aktivieren.
+3. Per SFTP oder Webspace-Explorer den vollständigen Inhalt von `src/website/` in genau dieses Domain-Verzeichnis übertragen.
+4. Darauf achten, dass `.htaccess` mit übertragen wurde; die empfohlenen Dateirechte sind `644`.
+5. Anschließend `https://hardtschule-karlsruhe.de/`, die drei rechtlichen Unterseiten und ein Bild unter `public/images/` testen.
+
+Die `.htaccess` erzwingt HTTPS, deaktiviert Verzeichnislisten, aktiviert gzip-Komprimierung und Browser-Caches und setzt grundlegende Sicherheits-Header. Solange das SSL-Zertifikat noch nicht aktiv ist, muss der entsprechend kommentierte HTTPS-Block vorübergehend auskommentiert werden.
+
 ## Lokal ansehen
 
 ```sh
@@ -59,9 +88,17 @@ Der unveränderliche Commit-Tag erlaubt bei Bedarf ein gezieltes Rollback. `late
 - Stadt Karlsruhe: Städtischer Schülerhort an der Hardtschule
 - Werkraum Karlsruhe: Theaterprojekte 2023/24
 
+## Barrierefreiheit
+
+Die Seiten sind auf WCAG 2.2, Konformitätsstufe AA, ausgerichtet. Dazu gehören unter anderem semantische Seitenstrukturen, vollständige Tastaturbedienung, gut sichtbare Fokusmarkierungen, ausreichende Kontraste, Alternativtexte, große Bedienflächen, reduzierte Bewegung auf Wunsch sowie eine eigene Erklärung zur Barrierefreiheit mit Rückmeldemöglichkeit.
+
+Automatisierte Prüfungen ersetzen keine Tests mit assistiven Technologien und betroffenen Nutzer*innen. Nach größeren inhaltlichen oder gestalterischen Änderungen sollten deshalb erneut automatisierte und manuelle Tests durchgeführt werden.
+
 ## Vor einer Veröffentlichung
 
 - aktuelle Termine, Materiallisten und Pläne ergänzen
 - Kontaktangaben und Zuständigkeiten von der Schule bestätigen lassen
 - Impressum und Datenschutz an Hosting und tatsächliche Dienste anpassen
+- Erklärung zur Barrierefreiheit fachlich prüfen und mindestens jährlich aktualisieren
+- Informationen in Deutscher Gebärdensprache und eine fachlich geprüfte Fassung in Leichter Sprache ergänzen
 - Nutzungsfreigabe für die Gebäudefotos dokumentieren (Dirk Altenkirch / Stadt Karlsruhe); das Hauptmotiv ist ein gekennzeichnetes KI-generiertes Symbolbild

nginx.conf

@@ -24,6 +24,12 @@ server {
         return 200 "ok\n";
     }
 
+    location ~ /\.ht {
+        deny all;
+        access_log off;
+        log_not_found off;
+    }
+
     location = / {
         expires -1;
         try_files /index.html =404;

server.mjs

@@ -1,8 +1,8 @@
 import { createReadStream, existsSync, statSync } from "node:fs";
 import { createServer } from "node:http";
-import { extname, join, normalize } from "node:path";
+import { extname, join, relative, resolve, sep } from "node:path";
 
-const root = process.cwd();
+const root = resolve(process.cwd(), "src", "website");
 const port = Number(process.env.PORT || 4173);
 
 const mimeTypes = {
@@ -19,10 +19,16 @@ const mimeTypes = {
 createServer((request, response) => {
   const pathname = decodeURIComponent(new URL(request.url, `http://${request.headers.host}`).pathname);
   const requested = pathname === "/" ? "/index.html" : pathname;
-  const safePath = normalize(requested).replace(/^(\.\.(\/|\\|$))+/, "");
-  let filePath = join(root, safePath);
+  let filePath = resolve(root, `.${requested}`);
+  const relativePath = relative(root, filePath);
+  const pathSegments = relativePath.split(sep);
 
-  if (!filePath.startsWith(root) || !existsSync(filePath)) {
+  if (
+    relativePath === ".." ||
+    relativePath.startsWith(`..${sep}`) ||
+    pathSegments.some((segment) => segment.startsWith(".")) ||
+    !existsSync(filePath)
+  ) {
     response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
     response.end("Nicht gefunden");
     return;
@@ -32,6 +38,12 @@ createServer((request, response) => {
   response.writeHead(200, {
     "Content-Type": mimeTypes[extname(filePath).toLowerCase()] || "application/octet-stream",
     "Cache-Control": "no-cache",
+    "Content-Security-Policy":
+      "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'; form-action 'self'",
+    "Permissions-Policy": "camera=(), microphone=(), geolocation=()",
+    "Referrer-Policy": "strict-origin-when-cross-origin",
+    "X-Content-Type-Options": "nosniff",
+    "X-Frame-Options": "SAMEORIGIN",
   });
   createReadStream(filePath).pipe(response);
 }).listen(port, "127.0.0.1", () => {

src/website/.htaccess

@@ -0,0 +1,60 @@
+# Hardtschule Karlsruhe – Apache/IONOS Webhosting
+
+Options -Indexes -MultiViews
+DirectoryIndex index.html
+AddDefaultCharset UTF-8
+
+# HTTPS erzwingen. Voraussetzung: Das SSL-Zertifikat ist im IONOS-Konto aktiv.
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteCond %{SERVER_PORT} !=443
+  RewriteRule ^(.*)$ https://hardtschule-karlsruhe.de/$1 [R=301,L]
+</IfModule>
+
+# Korrekte Auslieferung moderner Bildformate.
+<IfModule mod_mime.c>
+  AddType image/webp .webp
+</IfModule>
+
+# Kompression für Textdateien.
+<IfModule mod_deflate.c>
+  AddOutputFilterByType DEFLATE text/plain
+  AddOutputFilterByType DEFLATE text/html
+  AddOutputFilterByType DEFLATE text/css
+  AddOutputFilterByType DEFLATE application/javascript
+  AddOutputFilterByType DEFLATE application/json
+  AddOutputFilterByType DEFLATE application/xml
+  AddOutputFilterByType DEFLATE image/svg+xml
+</IfModule>
+
+# Sinnvolle Browser-Caches: kurze Laufzeit für Code, lange für Bilder.
+<IfModule mod_expires.c>
+  ExpiresActive On
+  ExpiresByType text/html "access plus 0 seconds"
+  ExpiresByType text/css "access plus 1 hour"
+  ExpiresByType application/javascript "access plus 1 hour"
+  ExpiresByType image/jpeg "access plus 30 days"
+  ExpiresByType image/png "access plus 30 days"
+  ExpiresByType image/webp "access plus 30 days"
+  ExpiresByType image/svg+xml "access plus 30 days"
+</IfModule>
+
+<IfModule mod_headers.c>
+  Header always set X-Content-Type-Options "nosniff"
+  Header always set X-Frame-Options "SAMEORIGIN"
+  Header always set Referrer-Policy "strict-origin-when-cross-origin"
+  Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()"
+  Header always set Content-Security-Policy "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'; form-action 'self'"
+
+  <FilesMatch "\.html$">
+    Header set Cache-Control "no-cache, must-revalidate"
+  </FilesMatch>
+
+  <FilesMatch "\.(css|js)$">
+    Header set Cache-Control "public, max-age=3600"
+  </FilesMatch>
+
+  <FilesMatch "\.(jpe?g|png|webp|svg)$">
+    Header set Cache-Control "public, max-age=2592000"
+  </FilesMatch>
+</IfModule>

src/website/barrierefreiheit.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Erklärung zur Barrierefreiheit der Website der Hardtschule Karlsruhe mit Kontakt- und Schlichtungsmöglichkeiten."
+    />
+    <meta name="theme-color" content="#252451" />
+    <title>Barrierefreiheit · Hardtschule Karlsruhe</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body class="legal-body">
+    <a class="skip-link" href="#hauptinhalt">Zum Inhalt springen</a>
+
+    <header class="legal-header">
+      <div class="shell header-inner">
+        <a class="brand brand-footer" href="/">
+          <span class="brand-mark" aria-hidden="true"><span class="brand-roof"></span><span class="brand-door"></span></span>
+          <span class="brand-copy"><strong>Hardtschule</strong><span>Karlsruhe</span></span>
+        </a>
+        <a class="button button-sun button-small" href="/">Zur Startseite</a>
+      </div>
+    </header>
+
+    <main class="legal-main" id="hauptinhalt" tabindex="-1">
+      <article class="shell legal-content">
+        <p class="eyebrow">Barrierefreiheit</p>
+        <h1>Erklärung zur Barrierefreiheit</h1>
+        <p class="legal-intro">
+          Die Hardtschule Karlsruhe ist bemüht, diese Website in Einklang mit § 10 Absatz 1 des Landes-Behindertengleichstellungsgesetzes Baden-Württemberg (L-BGG) barrierefrei zugänglich zu machen.
+        </p>
+
+        <h2>Geltungsbereich</h2>
+        <p>Diese Erklärung gilt für die Website <strong>hardtschule-karlsruhe.de</strong> einschließlich der Seiten Impressum und Datenschutz.</p>
+
+        <h2>Stand der Vereinbarkeit</h2>
+        <p>
+          Die Website ist nach einer Selbstbewertung teilweise mit den Anforderungen des § 10 Absatz 1 L-BGG und der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) vereinbar.
+        </p>
+
+        <h2>Nicht barrierefreie Inhalte</h2>
+        <ul>
+          <li>Erläuterungen zu den wesentlichen Inhalten in Deutscher Gebärdensprache stehen noch nicht zur Verfügung.</li>
+          <li>Eine fachlich geprüfte Fassung der wesentlichen Inhalte in Leichter Sprache steht noch nicht zur Verfügung.</li>
+          <li>Für Inhalte verlinkter externer Websites kann die Hardtschule keine vollständige Barrierefreiheit gewährleisten.</li>
+        </ul>
+        <p>Wir arbeiten daran, die noch bestehenden Barrieren zu beseitigen. Benötigen Sie Informationen in einer anderen Form, kontaktieren Sie uns bitte.</p>
+
+        <h2>Erstellung dieser Erklärung</h2>
+        <p>Diese Erklärung wurde am 27. Juli 2026 erstellt und zuletzt am 27. Juli 2026 überprüft.</p>
+        <p>
+          Grundlage war eine Selbstbewertung mit automatisierten Prüfungen sowie manuellen Tests von Tastaturbedienung, Fokusführung, Vergrößerung und Umbruch, Kontrasten, Seitenstruktur und zugänglichen Namen.
+        </p>
+
+        <h2>Rückmeldung und Kontakt</h2>
+        <p>
+          Sind Ihnen Barrieren aufgefallen? Teilen Sie uns bitte mit, auf welcher Seite und bei welchem Inhalt das Problem auftritt. Wenn möglich, nennen Sie auch den verwendeten Browser oder die eingesetzte assistive Technik.
+        </p>
+        <address class="legal-address">
+          <strong>Hardtschule Karlsruhe</strong><br />
+          Hardtstraße 3<br />
+          76185 Karlsruhe<br />
+          Telefon: <a href="tel:+497211334686">0721 133-4686</a><br />
+          E-Mail:
+          <a href="mailto:poststelle@hardtschule-ka.schule.bwl.de?subject=R%C3%BCckmeldung%20zur%20Barrierefreiheit">poststelle@hardtschule-ka.schule.bwl.de</a>
+        </address>
+
+        <h2>Schlichtungsverfahren</h2>
+        <p>
+          Wenn Sie innerhalb von vier Wochen keine oder keine zufriedenstellende Antwort auf Ihre Rückmeldung erhalten, können Sie sich an die Schlichtungsstelle des Landeszentrums Barrierefreiheit wenden. Das Schlichtungsverfahren ist kostenlos.
+        </p>
+        <address class="legal-address">
+          <strong>Landeszentrum Barrierefreiheit – Schlichtungsstelle</strong><br />
+          Else-Josenhans-Straße 6<br />
+          70173 Stuttgart<br />
+          Telefon: <a href="tel:+4971112339375">0711 123 39375</a><br />
+          E-Mail: <a href="mailto:schlichtung@barrierefreiheit.bwl.de">schlichtung@barrierefreiheit.bwl.de</a><br />
+          Website: <a href="https://barrierefreiheit-bw.de/">barrierefreiheit-bw.de</a>
+        </address>
+        <p>Auf die Möglichkeit des Verbandsklagerechts nach § 12 Absatz 1 Satz 1 Nummer 4 L-BGG wird hingewiesen.</p>
+      </article>
+
+      <nav class="shell legal-nav" aria-label="Rechtliche Informationen">
+        <a href="/impressum.html">Impressum</a>
+        <a href="/datenschutz.html">Datenschutz</a>
+      </nav>
+    </main>
+  </body>
+</html>

src/website/datenschutz.html

@@ -4,25 +4,27 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex" />
+    <meta name="theme-color" content="#252451" />
     <title>Datenschutz · Hardtschule Karlsruhe</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body class="legal-body">
+    <a class="skip-link" href="#hauptinhalt">Zum Inhalt springen</a>
     <header class="legal-header">
       <div class="shell header-inner">
-        <a class="brand brand-footer" href="index.html" aria-label="Zurück zur Startseite">
+        <a class="brand brand-footer" href="/">
           <span class="brand-mark" aria-hidden="true"><span class="brand-roof"></span><span class="brand-door"></span></span>
           <span class="brand-copy"><strong>Hardtschule</strong><span>Karlsruhe</span></span>
         </a>
-        <a class="button button-sun button-small" href="index.html">Zur Startseite</a>
+        <a class="button button-sun button-small" href="/">Zur Startseite</a>
       </div>
     </header>
-    <main class="legal-main">
+    <main class="legal-main" id="hauptinhalt" tabindex="-1">
       <article class="shell legal-content">
         <p class="eyebrow">Rechtliches</p>
         <h1>Datenschutz</h1>
         <h2>Verantwortliche Stelle</h2>
-        <p>Hardtschule Karlsruhe<br />Hardtstraße 3<br />76185 Karlsruhe<br />Telefon: <a href="tel:+497211334686">0721 133-4686</a><br />E-Mail: <a href="mailto:schulleitung@hardtschule-karlsruhe.de">schulleitung@hardtschule-karlsruhe.de</a></p>
+        <p>Hardtschule Karlsruhe<br />Hardtstraße 3<br />76185 Karlsruhe<br />Telefon: <a href="tel:+497211334686">0721 133-4686</a><br />E-Mail: <a href="mailto:poststelle@hardtschule-ka.schule.bwl.de">poststelle@hardtschule-ka.schule.bwl.de</a></p>
         <h2>Datenverarbeitung auf dieser Website</h2>
         <p>Der vorliegende Prototyp verwendet keine Analysewerkzeuge, keine Werbetracker, keine extern geladenen Schriftarten und setzt selbst keine Cookies. Die Kontaktlinks öffnen lediglich die Telefon- oder E-Mail-Anwendung des jeweiligen Geräts.</p>
         <h2>Server-Protokolle</h2>
@@ -33,6 +35,10 @@
         <p>Betroffene Personen haben im gesetzlichen Rahmen insbesondere Rechte auf Auskunft, Berichtigung, Löschung, Einschränkung der Verarbeitung und Beschwerde bei der zuständigen Datenschutzaufsicht.</p>
         <p class="legal-note"><strong>Vor Veröffentlichung erforderlich:</strong> Diese Datenschutzhinweise müssen an den tatsächlichen Hostinganbieter, mögliche Formulare, eingebundene Dienste und die Datenschutzorganisation des Schulträgers angepasst und fachlich geprüft werden.</p>
       </article>
+      <nav class="shell legal-nav" aria-label="Rechtliche Informationen">
+        <a href="/impressum.html">Impressum</a>
+        <a href="/barrierefreiheit.html">Barrierefreiheit</a>
+      </nav>
     </main>
   </body>
 </html>

src/website/impressum.html

@@ -4,27 +4,29 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex" />
+    <meta name="theme-color" content="#252451" />
     <title>Impressum · Hardtschule Karlsruhe</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body class="legal-body">
+    <a class="skip-link" href="#hauptinhalt">Zum Inhalt springen</a>
     <header class="legal-header">
       <div class="shell header-inner">
-        <a class="brand brand-footer" href="index.html" aria-label="Zurück zur Startseite">
+        <a class="brand brand-footer" href="/">
           <span class="brand-mark" aria-hidden="true"><span class="brand-roof"></span><span class="brand-door"></span></span>
           <span class="brand-copy"><strong>Hardtschule</strong><span>Karlsruhe</span></span>
         </a>
-        <a class="button button-sun button-small" href="index.html">Zur Startseite</a>
+        <a class="button button-sun button-small" href="/">Zur Startseite</a>
       </div>
     </header>
-    <main class="legal-main">
+    <main class="legal-main" id="hauptinhalt" tabindex="-1">
       <article class="shell legal-content">
         <p class="eyebrow">Rechtliches</p>
         <h1>Impressum</h1>
         <h2>Angaben zum Anbieter</h2>
         <p>Hardtschule (Grundschule)<br />Hardtstraße 3<br />76185 Karlsruhe</p>
         <h2>Kontakt</h2>
-        <p>Telefon: <a href="tel:+497211334685">0721 133-4685</a> (Schulleitung)<br />Telefon: <a href="tel:+497211334686">0721 133-4686</a> (Sekretariat)<br />E-Mail: <a href="mailto:schulleitung@hardtschule-karlsruhe.de">schulleitung@hardtschule-karlsruhe.de</a></p>
+        <p>Telefon: <a href="tel:+497211334685">0721 133-4685</a> (Schulleitung)<br />Telefon: <a href="tel:+497211334686">0721 133-4686</a> (Sekretariat)<br />E-Mail: <a href="mailto:poststelle@hardtschule-ka.schule.bwl.de">poststelle@hardtschule-ka.schule.bwl.de</a></p>
         <h2>Vertretung</h2>
         <p>Vertreten durch die Schulleitung: Elena Hauer.</p>
         <h2>Haftung für Inhalte und Links</h2>
@@ -33,6 +35,10 @@
         <p>Die auf dieser Website erstellten Inhalte unterliegen dem deutschen Urheberrecht. Fotos der städtischen Projektseite sind mit dem jeweiligen Bildnachweis gekennzeichnet.</p>
         <p class="legal-note"><strong>Hinweis zum Prototyp:</strong> Die Angaben wurden aus der bisherigen Schulwebsite rekonstruiert. Vor einer Veröffentlichung müssen sie von der Schule rechtlich und redaktionell geprüft werden.</p>
       </article>
+      <nav class="shell legal-nav" aria-label="Rechtliche Informationen">
+        <a href="/datenschutz.html">Datenschutz</a>
+        <a href="/barrierefreiheit.html">Barrierefreiheit</a>
+      </nav>
     </main>
   </body>
 </html>

src/website/index.html

@@ -64,6 +64,18 @@
       <symbol id="icon-close" viewBox="0 0 24 24">
         <path d="m6 6 12 12M18 6 6 18" />
       </symbol>
+      <symbol id="icon-news" viewBox="0 0 24 24">
+        <path d="M5 4h14v16H5V4Z" />
+        <path d="M8 8h8M8 12h8M8 16h5" />
+      </symbol>
+      <symbol id="icon-users" viewBox="0 0 24 24">
+        <circle cx="9" cy="8" r="3" />
+        <circle cx="17" cy="9" r="2" />
+        <path d="M3 20a6 6 0 0 1 12 0M15 15a5 5 0 0 1 6 5" />
+      </symbol>
+      <symbol id="icon-download" viewBox="0 0 24 24">
+        <path d="M12 3v12M7 10l5 5 5-5M4 20h16" />
+      </symbol>
     </svg>
 
     <div class="utility-bar">
@@ -78,7 +90,7 @@
 
     <header class="site-header" data-header>
       <div class="shell header-inner">
-        <a class="brand" href="#top" aria-label="Hardtschule Karlsruhe – Startseite">
+        <a class="brand" href="#top">
           <span class="brand-mark" aria-hidden="true">
             <span class="brand-roof"></span>
             <span class="brand-door"></span>
@@ -87,13 +99,17 @@
             <strong>Hardtschule</strong>
             <span>Karlsruhe</span>
           </span>
+          <span class="sr-only"> – Startseite</span>
         </a>
 
         <nav class="desktop-nav" aria-label="Hauptnavigation">
-          <a href="#schule">Die Schule</a>
+          <a href="#top">Startseite</a>
           <a href="#schulleben">Schulleben</a>
-          <a href="#gemeinschaft">Gemeinschaft</a>
-          <a href="#elterninfo">Elterninfo</a>
+          <a href="#schulkonzept">Schulkonzept</a>
+          <a href="#klassen">Unsere Klassen</a>
+          <a href="#news">News</a>
+          <a href="#kalender">Kalender</a>
+          <a href="#downloads">Downloads</a>
         </nav>
 
         <a class="button button-small button-dark header-contact" href="#kontakt">
@@ -109,16 +125,19 @@
 
       <nav class="mobile-nav" id="mobile-navigation" aria-label="Mobile Navigation" data-mobile-nav hidden>
         <div class="shell mobile-nav-inner">
-          <a href="#schule">Die Schule</a>
+          <a href="#top">Startseite</a>
           <a href="#schulleben">Schulleben</a>
-          <a href="#gemeinschaft">Gemeinschaft</a>
-          <a href="#elterninfo">Elterninfo</a>
+          <a href="#schulkonzept">Schulkonzept</a>
+          <a href="#klassen">Unsere Klassen</a>
+          <a href="#news">News</a>
+          <a href="#kalender">Kalender</a>
+          <a href="#downloads">Downloads</a>
           <a href="#kontakt">Kontakt</a>
         </div>
       </nav>
     </header>
 
-    <main id="hauptinhalt">
+    <main id="hauptinhalt" tabindex="-1">
       <section class="hero" id="top">
         <div class="hero-dots" aria-hidden="true"></div>
         <div class="shell hero-grid">
@@ -129,20 +148,20 @@
               Eine lebendige Grundschule in Mühlburg, an der Kinder neugierig lernen, Verantwortung übernehmen und sich wohlfühlen können.
             </p>
             <div class="hero-actions reveal" style="--delay: 240ms">
-              <a class="button button-sun" href="#schule">
-                Schule kennenlernen
+              <a class="button button-sun" href="#news">
+                Neuigkeiten entdecken
                 <svg aria-hidden="true"><use href="#icon-arrow"></use></svg>
               </a>
-              <a class="text-link text-link-light" href="#elterninfo">
-                Direkt zu den Elterninfos
+              <a class="text-link text-link-light" href="#kalender">
+                Termine &amp; Downloads
                 <svg aria-hidden="true"><use href="#icon-arrow"></use></svg>
               </a>
             </div>
-            <div class="hero-signals reveal" style="--delay: 320ms" aria-label="Schwerpunkte der Hardtschule">
-              <span><i class="signal-dot signal-yellow"></i> Bewegte Grundschule</span>
-              <span><i class="signal-dot signal-coral"></i> Soziales Lernen</span>
-              <span><i class="signal-dot signal-blue"></i> Deutschförderung</span>
-            </div>
+            <ul class="hero-signals reveal" style="--delay: 320ms" aria-label="Schwerpunkte der Hardtschule">
+              <li><i class="signal-dot signal-yellow" aria-hidden="true"></i> Bewegte Grundschule</li>
+              <li><i class="signal-dot signal-coral" aria-hidden="true"></i> Soziales Lernen</li>
+              <li><i class="signal-dot signal-blue" aria-hidden="true"></i> Deutschförderung</li>
+            </ul>
           </div>
 
           <div class="hero-visual reveal" style="--delay: 120ms">
@@ -184,17 +203,17 @@
               <span><strong>Schulanfang</strong><small>Gut vorbereitet starten</small></span>
               <svg class="quick-arrow" aria-hidden="true"><use href="#icon-arrow"></use></svg>
             </button>
-            <button class="quick-card quick-coral" type="button" data-detail="materiallisten">
+            <a class="quick-card quick-coral" href="#downloads">
               <span class="quick-icon"><svg aria-hidden="true"><use href="#icon-bag"></use></svg></span>
               <span><strong>Materiallisten</strong><small>Für Klassen 1–4 &amp; VKL</small></span>
               <svg class="quick-arrow" aria-hidden="true"><use href="#icon-arrow"></use></svg>
-            </button>
-            <a class="quick-card quick-yellow" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulferien" target="_blank" rel="noreferrer">
+            </a>
+            <a class="quick-card quick-yellow" href="#kalender">
               <span class="quick-icon"><svg aria-hidden="true"><use href="#icon-sun"></use></svg></span>
-              <span><strong>Ferien</strong><small>Termine der Stadt Karlsruhe</small></span>
+              <span><strong>Kalender</strong><small>Termine &amp; Ferien im Blick</small></span>
               <svg class="quick-arrow" aria-hidden="true"><use href="#icon-arrow"></use></svg>
             </a>
-            <a class="quick-card quick-green" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulkindbetreuung/staedtische-schuelerhorte-auf-einen-blick/staedtischer-schuelerhort-an-der-hardtschule" target="_blank" rel="noreferrer">
+            <a class="quick-card quick-green" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulkindbetreuung/staedtische-schuelerhorte-auf-einen-blick/staedtischer-schuelerhort-an-der-hardtschule">
               <span class="quick-icon"><svg aria-hidden="true"><use href="#icon-clock"></use></svg></span>
               <span><strong>Betreuung</strong><small>Städtischer Schülerhort</small></span>
               <svg class="quick-arrow" aria-hidden="true"><use href="#icon-arrow"></use></svg>
@@ -208,10 +227,60 @@
         </div>
       </section>
 
-      <section class="profile-section section" id="schule">
+      <section class="news-section section" id="news">
+        <div class="shell">
+          <div class="section-heading section-heading-split section-heading-dark reveal">
+            <div>
+              <p class="eyebrow">News</p>
+              <h2>Neues aus der <em>Hardtschule</em></h2>
+            </div>
+            <p>Einblicke in Projekte, Aktionen und alles, was unsere Schulgemeinschaft gerade bewegt.</p>
+          </div>
+
+          <div class="news-grid">
+            <article class="news-card news-card-featured reveal">
+              <div class="news-card-top">
+                <span class="news-badge">Neu</span>
+                <time datetime="2026-07">Juli 2026</time>
+              </div>
+              <div class="news-card-copy">
+                <span class="news-icon"><svg aria-hidden="true"><use href="#icon-news"></use></svg></span>
+                <h3>Willkommen auf unserer neuen Website</h3>
+                <p>Wichtige Informationen, Termine und Einblicke ins Schulleben finden Familien jetzt übersichtlich an einem Ort.</p>
+              </div>
+            </article>
+
+            <article class="news-card news-card-movement reveal" style="--delay: 100ms">
+              <div class="news-card-top">
+                <span class="news-badge">Schulprofil</span>
+              </div>
+              <div class="news-card-copy">
+                <span class="news-icon"><svg aria-hidden="true"><use href="#icon-shoe"></use></svg></span>
+                <h3>Lernen mit Kopf, Herz und Bewegung</h3>
+                <p>Bewegungszeiten, aktive Pausen und bewegtes Lernen gehören fest zum Alltag der Hardtschule.</p>
+                <a class="text-link" href="#schulkonzept">Unser Konzept <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
+              </div>
+            </article>
+
+            <article class="news-card news-card-classes reveal" style="--delay: 200ms">
+              <div class="news-card-top">
+                <span class="news-badge">Aus den Klassen</span>
+                <span>Demnächst mehr</span>
+              </div>
+              <div class="news-card-copy">
+                <span class="news-icon"><svg aria-hidden="true"><use href="#icon-users"></use></svg></span>
+                <h3>Hier werden Klassengeschichten lebendig</h3>
+                <p>Dieser Bereich ist für aktuelle Berichte, Kinderwerke, Ausflüge und gemeinsame Erlebnisse vorbereitet.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="profile-section section" id="schulkonzept">
         <div class="shell">
           <div class="section-heading section-heading-centered reveal">
-            <p class="eyebrow">Was uns ausmacht</p>
+            <p class="eyebrow">Schulkonzept</p>
             <h2>Eine Schule, die Kinder <em>ganzheitlich</em> stärkt</h2>
             <p>Wissen, Bewegung, Sprache und ein respektvolles Miteinander gehören an der Hardtschule zusammen.</p>
           </div>
@@ -219,7 +288,7 @@
           <div class="profile-grid">
             <article class="profile-card profile-movement reveal">
               <div class="profile-icon"><svg aria-hidden="true"><use href="#icon-shoe"></use></svg></div>
-              <span class="profile-number">01</span>
+              <span class="profile-number" aria-hidden="true">01</span>
               <h3>Lernen in Bewegung</h3>
               <p>Bewegungszeiten, bewegtes Lernen und abwechslungsreiche Pausen bringen Körper und Kopf in Schwung.</p>
               <div class="profile-fact"><strong>Seit 2010</strong><span>zertifizierte Grundschule mit sport- und bewegungserzieherischem Schwerpunkt</span></div>
@@ -228,7 +297,7 @@
 
             <article class="profile-card profile-community reveal" style="--delay: 100ms">
               <div class="profile-icon"><svg aria-hidden="true"><use href="#icon-heart"></use></svg></div>
-              <span class="profile-number">02</span>
+              <span class="profile-number" aria-hidden="true">02</span>
               <h3>Stark miteinander</h3>
               <p>Klassenrat, Schüler*innenparlament und soziale Lernzeiten geben Kindern Stimme, Halt und Verantwortung.</p>
               <div class="profile-fact"><strong>Seit 2023</strong><span>verankert ein Sozialcurriculum die gemeinsame Präventionsarbeit im Schulalltag</span></div>
@@ -237,7 +306,7 @@
 
             <article class="profile-card profile-language reveal" style="--delay: 200ms">
               <div class="profile-icon"><svg aria-hidden="true"><use href="#icon-speech"></use></svg></div>
-              <span class="profile-number">03</span>
+              <span class="profile-number" aria-hidden="true">03</span>
               <h3>Sprache öffnet Türen</h3>
               <p>In der Vorbereitungsklasse und der nachgehenden Förderung bekommen Kinder Zeit und Raum für Deutsch.</p>
               <div class="profile-fact"><strong>VKL &amp; Förderung</strong><span>für einen sicheren Einstieg in Unterricht, Freundschaften und den Schulalltag</span></div>
@@ -273,11 +342,11 @@
             <p class="eyebrow">Unser Ort</p>
             <h2>Ein Schulhaus mit <em>Geschichte</em> und Zukunft</h2>
             <p class="place-lead">Die Hardtschule prägt Mühlburg seit 1847. Hinter der historischen Fassade entsteht jeden Tag Neues: Ideen, Freundschaften und mutige erste Schritte.</p>
-            <div class="place-facts">
-              <div><strong>1847</strong><span>erbaut in Mühlburg</span></div>
-              <div><strong>2020</strong><span>denkmalgerecht saniert</span></div>
-              <div><strong>direkt nebenan</strong><span>Carl-Benz-Halle für Sport &amp; Feste</span></div>
-            </div>
+            <dl class="place-facts">
+              <div><dt>1847</dt><dd>erbaut in Mühlburg</dd></div>
+              <div><dt>2020</dt><dd>denkmalgerecht saniert</dd></div>
+              <div><dt>direkt nebenan</dt><dd>Carl-Benz-Halle für Sport &amp; Feste</dd></div>
+            </dl>
             <p>Zum Schulgelände gehören Klassenzimmer, Lesezimmer, Schülerhort, der Schulhof und die „Grüne Insel“ mit Spielgeräten.</p>
             <button class="button button-outline" type="button" data-detail="rundgang">
               Rundgang entdecken
@@ -288,6 +357,52 @@
         </div>
       </section>
 
+      <section class="classes-section section" id="klassen">
+        <div class="shell">
+          <div class="section-heading section-heading-split section-heading-dark reveal">
+            <div>
+              <p class="eyebrow">Unsere Klassen</p>
+              <h2>Gemeinsam durch die <em>Grundschulzeit</em></h2>
+            </div>
+            <p>Jede Klassenstufe hat ihre eigenen Entwicklungsschritte. Hier entsteht nach und nach ein lebendiger Einblick in die Lerngruppen.</p>
+          </div>
+
+          <div class="classes-grid">
+            <article class="class-card class-one reveal">
+              <span class="class-number" aria-hidden="true">1</span>
+              <span class="class-label">Klasse 1</span>
+              <h3>Ankommen &amp; entdecken</h3>
+              <p>Vertraut werden, erste Buchstaben und Zahlen erforschen und als Klasse zusammenwachsen.</p>
+            </article>
+            <article class="class-card class-two reveal" style="--delay: 70ms">
+              <span class="class-number" aria-hidden="true">2</span>
+              <span class="class-label">Klasse 2</span>
+              <h3>Sicherer werden</h3>
+              <p>Grundlagen festigen, eigene Ideen entwickeln und immer selbstständiger arbeiten.</p>
+            </article>
+            <article class="class-card class-three reveal" style="--delay: 140ms">
+              <span class="class-number" aria-hidden="true">3</span>
+              <span class="class-label">Klasse 3</span>
+              <h3>Neues erforschen</h3>
+              <p>Zusammenhänge verstehen, Projekte gestalten und Verantwortung übernehmen.</p>
+            </article>
+            <article class="class-card class-four reveal" style="--delay: 210ms">
+              <span class="class-number" aria-hidden="true">4</span>
+              <span class="class-label">Klasse 4</span>
+              <h3>Mutig weitergehen</h3>
+              <p>Wissen vertiefen, Gemeinschaft stärken und den Übergang gut vorbereiten.</p>
+            </article>
+            <article class="class-card class-vkl reveal" style="--delay: 280ms">
+              <span class="class-number class-number-vkl" aria-hidden="true">VKL</span>
+              <span class="class-label">Vorbereitungsklasse</span>
+              <h3>Deutsch lernen &amp; dazugehören</h3>
+              <p>Sprache, Orientierung und Begegnung öffnen Schritt für Schritt den Weg in den Schulalltag.</p>
+              <button class="text-link" type="button" data-detail="sprache">Mehr über die VKL <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></button>
+            </article>
+          </div>
+        </div>
+      </section>
+
       <section class="life-section section" id="schulleben">
         <div class="shell">
           <div class="section-heading section-heading-split reveal">
@@ -385,6 +500,79 @@
         </div>
       </section>
 
+      <section class="calendar-section section" id="kalender">
+        <div class="shell calendar-grid">
+          <div class="calendar-intro reveal">
+            <p class="eyebrow">Kalender</p>
+            <h2>Termine gut <em>im Blick</em></h2>
+            <p>Aktuelle Schultermine werden hier veröffentlicht, sobald sie von der Schule bestätigt sind.</p>
+            <a class="button button-dark" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulferien">
+              Ferien der Stadt Karlsruhe
+              <svg aria-hidden="true"><use href="#icon-arrow"></use></svg>
+            </a>
+          </div>
+
+          <div class="calendar-card reveal" style="--delay: 100ms">
+            <div class="calendar-sheet" aria-hidden="true">
+              <span></span><span></span>
+              <strong>Termine</strong>
+              <svg><use href="#icon-calendar"></use></svg>
+            </div>
+            <div class="calendar-empty">
+              <span class="news-badge">Wird laufend ergänzt</span>
+              <h3>Der Schulkalender wird vorbereitet</h3>
+              <p>Bis zur Veröffentlichung erhalten Familien verbindliche Termine über die bekannten Informationswege der Schule.</p>
+              <a class="text-link" href="mailto:poststelle@hardtschule-ka.schule.bwl.de?subject=Anfrage%20zu%20Schulterminen">
+                Termin anfragen
+                <svg aria-hidden="true"><use href="#icon-arrow"></use></svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="downloads-section section" id="downloads">
+        <div class="shell">
+          <div class="section-heading section-heading-centered reveal">
+            <p class="eyebrow">Downloads</p>
+            <h2>Wichtige Unterlagen <em>schnell gefunden</em></h2>
+            <p>Der Downloadbereich ist vorbereitet und kann mit den freigegebenen, aktuellen Dokumenten der Schule befüllt werden.</p>
+          </div>
+
+          <div class="downloads-grid">
+            <article class="download-card reveal">
+              <span class="download-icon"><svg aria-hidden="true"><use href="#icon-bag"></use></svg></span>
+              <div>
+                <span class="download-status">Wird ergänzt</span>
+                <h3>Materiallisten</h3>
+                <p>Aktuelle Listen für die Klassen 1–4 und die Vorbereitungsklasse.</p>
+              </div>
+              <button class="text-link" type="button" data-detail="materiallisten">Informationen ansehen <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></button>
+            </article>
+
+            <article class="download-card reveal" style="--delay: 100ms">
+              <span class="download-icon download-icon-coral"><svg aria-hidden="true"><use href="#icon-download"></use></svg></span>
+              <div>
+                <span class="download-status">Wird ergänzt</span>
+                <h3>Formulare &amp; Elternbriefe</h3>
+                <p>Freigegebene Formulare und Informationen für Familien an einem Ort.</p>
+              </div>
+              <a class="text-link" href="mailto:poststelle@hardtschule-ka.schule.bwl.de?subject=Anfrage%20zu%20Formularen">Unterlage anfragen <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
+            </article>
+
+            <article class="download-card reveal" style="--delay: 200ms">
+              <span class="download-icon download-icon-blue"><svg aria-hidden="true"><use href="#icon-calendar"></use></svg></span>
+              <div>
+                <span class="download-status">Externer Kalender</span>
+                <h3>Ferien &amp; freie Tage</h3>
+                <p>Die veröffentlichten Schulferien für Karlsruhe direkt bei der Stadt nachsehen.</p>
+              </div>
+              <a class="text-link" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulferien">Ferienkalender öffnen <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
+            </article>
+          </div>
+        </div>
+      </section>
+
       <section class="parents-section section" id="elterninfo">
         <div class="shell parents-grid">
           <div class="parents-intro reveal">
@@ -419,7 +607,7 @@
               <summary><span>03</span>Betreuung nach dem Unterricht <i></i></summary>
               <div class="accordion-content">
                 <p>Der städtische Schülerhort befindet sich direkt an der Hardtschule. Verbindliche Angaben zu Angebot und Anmeldung stellt die Stadt Karlsruhe bereit.</p>
-                <a class="text-link" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulkindbetreuung/staedtische-schuelerhorte-auf-einen-blick/staedtischer-schuelerhort-an-der-hardtschule" target="_blank" rel="noreferrer">Zur Hort-Seite <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
+                <a class="text-link" href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulkindbetreuung/staedtische-schuelerhorte-auf-einen-blick/staedtischer-schuelerhort-an-der-hardtschule">Zur Hort-Seite <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
               </div>
             </details>
             <details name="elterninfo">
@@ -446,7 +634,7 @@
             <p class="eyebrow">Kontakt &amp; Anfahrt</p>
             <h2>Wir sind gern <em>für Sie da.</em></h2>
             <p class="contact-lead">Sie haben eine Frage? Rufen Sie an oder schreiben Sie uns. Bei einem Besuch melden Sie sich bitte zuerst im Sekretariat.</p>
-            <div class="contact-list">
+            <address class="contact-list">
               <div>
                 <span class="contact-icon"><svg aria-hidden="true"><use href="#icon-map"></use></svg></span>
                 <p><strong>Hardtschule Karlsruhe</strong><br />Hardtstraße 3<br />76185 Karlsruhe</p>
@@ -461,12 +649,12 @@
               </div>
               <div>
                 <span class="contact-icon"><svg aria-hidden="true"><use href="#icon-mail"></use></svg></span>
-                <p><strong>E-Mail</strong><br /><a href="mailto:schulleitung@hardtschule-karlsruhe.de">schulleitung@hardtschule-karlsruhe.de</a></p>
+                <p><strong>E-Mail</strong><br /><a href="mailto:poststelle@hardtschule-ka.schule.bwl.de">poststelle@hardtschule-ka.schule.bwl.de</a></p>
               </div>
-            </div>
+            </address>
           </div>
 
-          <div class="map-card reveal" style="--delay: 120ms" aria-label="Anfahrt zur Hardtschule">
+          <div class="map-card reveal" style="--delay: 120ms">
             <div class="map-illustration" aria-hidden="true">
               <span class="map-road road-one"></span>
               <span class="map-road road-two"></span>
@@ -480,7 +668,7 @@
             </div>
             <div class="map-footer">
               <div><strong>Hardtstraße 3</strong><span>Karlsruhe-Mühlburg</span></div>
-              <a class="button button-dark button-small" href="https://www.openstreetmap.org/search?query=Hardtstra%C3%9Fe%203%2C%2076185%20Karlsruhe" target="_blank" rel="noreferrer">Route planen <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
+              <a class="button button-dark button-small" href="https://www.openstreetmap.org/search?query=Hardtstra%C3%9Fe%203%2C%2076185%20Karlsruhe">Route planen <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
             </div>
           </div>
         </div>
@@ -489,21 +677,22 @@
 
     <footer class="site-footer">
       <div class="shell footer-top">
-        <a class="brand brand-footer" href="#top" aria-label="Zurück nach oben">
+        <a class="brand brand-footer" href="#top">
           <span class="brand-mark" aria-hidden="true"><span class="brand-roof"></span><span class="brand-door"></span></span>
           <span class="brand-copy"><strong>Hardtschule</strong><span>Karlsruhe</span></span>
+          <span class="sr-only"> – zurück nach oben</span>
         </a>
         <p>Eine bewegte Grundschule mit Herz – mitten in Mühlburg.</p>
-        <a class="button button-sun button-small" href="mailto:schulleitung@hardtschule-karlsruhe.de">E-Mail schreiben <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
+        <a class="button button-sun button-small" href="mailto:poststelle@hardtschule-ka.schule.bwl.de">E-Mail schreiben <svg aria-hidden="true"><use href="#icon-arrow"></use></svg></a>
       </div>
       <div class="shell footer-links">
         <div>
           <strong>Entdecken</strong>
-          <a href="#schule">Die Schule</a><a href="#schulleben">Schulleben</a><a href="#gemeinschaft">Gemeinschaft</a>
+          <a href="#top">Startseite</a><a href="#schulleben">Schulleben</a><a href="#schulkonzept">Schulkonzept</a><a href="#klassen">Unsere Klassen</a>
         </div>
         <div>
           <strong>Für Familien</strong>
-          <a href="#elterninfo">Elterninfo</a><a href="https://www.karlsruhe.de/bildung-soziales/schulstadt-karlsruhe/schulferien" target="_blank" rel="noreferrer">Ferienplan</a><a href="#kontakt">Kontakt</a>
+          <a href="#news">News</a><a href="#kalender">Kalender</a><a href="#downloads">Downloads</a><a href="#kontakt">Kontakt</a>
         </div>
         <div>
           <strong>Adresse</strong>
@@ -512,17 +701,17 @@
       </div>
       <div class="shell footer-bottom">
         <span>© <span data-year></span> Hardtschule Karlsruhe</span>
-        <div><a href="impressum.html">Impressum</a><a href="datenschutz.html">Datenschutz</a></div>
+        <div><a href="/impressum.html">Impressum</a><a href="/datenschutz.html">Datenschutz</a><a href="/barrierefreiheit.html">Barrierefreiheit</a></div>
       </div>
     </footer>
 
-    <dialog class="detail-dialog" data-dialog>
+    <dialog class="detail-dialog" aria-labelledby="dialog-title" data-dialog>
       <div class="dialog-shell">
         <button class="dialog-close" type="button" aria-label="Dialog schließen" data-dialog-close>
           <svg aria-hidden="true"><use href="#icon-close"></use></svg>
         </button>
         <span class="dialog-kicker" data-dialog-kicker></span>
-        <h2 data-dialog-title></h2>
+        <h2 id="dialog-title" tabindex="-1" data-dialog-title>Informationen</h2>
         <div class="dialog-content" data-dialog-content></div>
         <div class="dialog-actions" data-dialog-actions></div>
       </div>

src/website/script.js

@@ -1,5 +1,6 @@
 const menuButton = document.querySelector("[data-menu-button]");
 const mobileNav = document.querySelector("[data-mobile-nav]");
+const menuButtonLabel = menuButton?.querySelector(".sr-only");
 const dialog = document.querySelector("[data-dialog]");
 const dialogTitle = document.querySelector("[data-dialog-title]");
 const dialogKicker = document.querySelector("[data-dialog-kicker]");
@@ -18,7 +19,7 @@ const detailContent = {
     `,
     actions: [
       { label: "Sekretariat anrufen", href: "tel:+497211334686", primary: true },
-      { label: "E-Mail schreiben", href: "mailto:schulleitung@hardtschule-karlsruhe.de" },
+      { label: "E-Mail schreiben", href: "mailto:poststelle@hardtschule-ka.schule.bwl.de" },
     ],
   },
   materiallisten: {
@@ -30,7 +31,7 @@ const detailContent = {
       <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: "Liste anfragen", href: "mailto:poststelle@hardtschule-ka.schule.bwl.de?subject=Aktuelle%20Materialliste", primary: true },
       { label: "Sekretariat anrufen", href: "tel:+497211334686" },
     ],
   },
@@ -47,7 +48,7 @@ const detailContent = {
       </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 }],
+    actions: [{ label: "Zum Schulleben", href: "#schulleben", primary: true }],
   },
   miteinander: {
     kicker: "Soziales Lernen",
@@ -73,7 +74,7 @@ const detailContent = {
       <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: "VKL-Anfrage senden", href: "mailto:poststelle@hardtschule-ka.schule.bwl.de?subject=Anfrage%20zur%20VKL", primary: true },
       { label: "Sekretariat anrufen", href: "tel:+497211334686" },
     ],
   },
@@ -137,13 +138,14 @@ const detailContent = {
       </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 }],
+    actions: [{ label: "Mitgliedschaft anfragen", href: "mailto:poststelle@hardtschule-ka.schule.bwl.de?subject=Kontakt%20zum%20F%C3%B6rderverein", primary: true }],
   },
 };
 
 function setMenu(open) {
   if (!menuButton || !mobileNav) return;
   menuButton.setAttribute("aria-expanded", String(open));
+  if (menuButtonLabel) menuButtonLabel.textContent = open ? "Menü schließen" : "Menü öffnen";
   mobileNav.hidden = !open;
   document.body.classList.toggle("menu-open", open);
 }
@@ -156,6 +158,23 @@ mobileNav?.querySelectorAll("a").forEach((link) => {
   link.addEventListener("click", () => setMenu(false));
 });
 
+document.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape") return;
+
+  if (dialog?.open) {
+    dialog.close();
+    return;
+  }
+
+  if (menuButton?.getAttribute("aria-expanded") !== "true") return;
+  setMenu(false);
+  menuButton.focus();
+});
+
+window.matchMedia("(min-width: 1051px)").addEventListener("change", (event) => {
+  if (event.matches) setMenu(false);
+});
+
 function renderActions(actions = []) {
   dialogActions.innerHTML = "";
   actions.forEach((action) => {
@@ -171,10 +190,6 @@ function renderActions(actions = []) {
       });
     } else {
       element.href = action.href;
-      if (action.external) {
-        element.target = "_blank";
-        element.rel = "noreferrer";
-      }
       if (action.href?.startsWith("#")) {
         element.addEventListener("click", () => dialog.close());
       }
@@ -201,6 +216,7 @@ function openDetail(key) {
 
   if (!dialog.open) dialog.showModal();
   document.body.classList.add("dialog-open");
+  requestAnimationFrame(() => dialogTitle.focus());
 }
 
 document.querySelectorAll("[data-detail]").forEach((trigger) => {
@@ -256,7 +272,7 @@ if ("IntersectionObserver" in window && navLinks.length) {
 
       navLinks.forEach((link) => {
         const active = link.getAttribute("href") === `#${visible.target.id}`;
-        if (active) link.setAttribute("aria-current", "true");
+        if (active) link.setAttribute("aria-current", "location");
         else link.removeAttribute("aria-current");
       });
     },

src/website/styles.css

@@ -5,7 +5,8 @@
   --violet-700: #7655d8;
   --violet-100: #eee7ff;
   --mint-100: #dff6ec;
-  --coral-600: #ed6a61;
+  --coral-600: #c24b46;
+  --coral-700: #b94742;
   --coral-100: #ffe3de;
   --sun-500: #ffc857;
   --sun-100: #fff0bd;
@@ -40,7 +41,7 @@
 
 html {
   scroll-behavior: smooth;
-  scroll-padding-top: 108px;
+  scroll-padding-top: 96px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -129,6 +130,10 @@ svg {
   padding: 112px 0;
 }
 
+main[tabindex="-1"]:focus {
+  outline: none;
+}
+
 .svg-library,
 .sr-only {
   position: absolute;
@@ -197,7 +202,7 @@ svg {
   min-height: 80px;
   display: flex;
   align-items: center;
-  gap: 30px;
+  gap: 20px;
 }
 
 .brand {
@@ -263,7 +268,7 @@ svg {
 .desktop-nav {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: 1px;
   margin-left: auto;
 }
 
@@ -272,18 +277,19 @@ svg {
   display: grid;
   min-height: 44px;
   place-items: center;
-  padding: 0 12px;
+  padding: 0 8px;
   color: var(--ink-soft);
-  font-size: 0.9rem;
+  font-size: 0.78rem;
   font-weight: 650;
+  white-space: nowrap;
 }
 
 .desktop-nav a::after {
   content: "";
   position: absolute;
-  right: 12px;
+  right: 8px;
   bottom: 6px;
-  left: 12px;
+  left: 8px;
   height: 2px;
   border-radius: 2px;
   background: var(--coral-600);
@@ -295,7 +301,7 @@ svg {
 }
 
 .desktop-nav a:hover::after,
-.desktop-nav a[aria-current="true"]::after {
+.desktop-nav a[aria-current]::after {
   transform: scaleX(1);
 }
 
@@ -431,6 +437,8 @@ svg {
 }
 
 .mobile-nav {
+  max-height: calc(100vh - 114px);
+  overflow-y: auto;
   border-top: 1px solid rgba(23, 48, 43, 0.08);
   background: var(--cream-50);
 }
@@ -516,7 +524,7 @@ svg {
 }
 
 .eyebrow-light {
-  color: rgba(255, 255, 255, 0.78);
+  color: var(--white);
 }
 
 .eyebrow-light::before {
@@ -549,12 +557,14 @@ svg {
   flex-wrap: wrap;
   gap: 12px 22px;
   margin-top: 44px;
+  padding: 0;
   color: rgba(255, 255, 255, 0.8);
   font-size: 0.75rem;
   font-weight: 650;
+  list-style: none;
 }
 
-.hero-signals span {
+.hero-signals li {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -780,6 +790,130 @@ svg {
 .quick-green { background: var(--mint-100); }
 .quick-cream { background: var(--violet-100); }
 
+.news-section {
+  background:
+    radial-gradient(circle at 92% 10%, rgba(118, 85, 216, 0.1), transparent 24%),
+    var(--cream-100);
+}
+
+.section-heading-split.section-heading-dark > p {
+  color: var(--ink-soft);
+}
+
+.news-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 1fr 1fr;
+  gap: 16px;
+  margin-top: 52px;
+}
+
+.news-card {
+  display: flex;
+  min-height: 400px;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 30px;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 0 1px rgba(37, 36, 81, 0.06), 0 14px 34px rgba(37, 36, 81, 0.08);
+}
+
+.news-card-featured {
+  background:
+    radial-gradient(circle at 92% 8%, rgba(255, 200, 87, 0.24), transparent 32%),
+    linear-gradient(145deg, var(--blue-700), var(--violet-700));
+  color: var(--white);
+}
+
+.news-card-movement {
+  background: var(--sun-100);
+}
+
+.news-card-classes {
+  background: var(--violet-100);
+}
+
+.news-card-top {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--ink-soft);
+  font-size: 0.7rem;
+  font-weight: 750;
+}
+
+.news-card-featured .news-card-top {
+  color: var(--white);
+}
+
+.news-badge,
+.download-status {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 28px;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.66);
+  color: var(--ink);
+  font-size: 0.65rem;
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.news-card-copy {
+  position: relative;
+  z-index: 1;
+}
+
+.news-icon,
+.download-icon {
+  display: grid;
+  width: 56px;
+  height: 56px;
+  place-items: center;
+  border-radius: 17px;
+  background: rgba(255, 255, 255, 0.68);
+  color: var(--blue-700);
+  box-shadow: 0 1px 4px rgba(37, 36, 81, 0.07);
+}
+
+.news-card-featured .news-icon {
+  background: rgba(255, 255, 255, 0.14);
+  color: var(--sun-500);
+}
+
+.news-icon svg,
+.download-icon svg {
+  width: 28px;
+  height: 28px;
+}
+
+.news-card h3 {
+  margin-top: 22px;
+  font-family: var(--font-display);
+  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
+  font-weight: 400;
+}
+
+.news-card p {
+  margin-top: 13px;
+  color: var(--ink-soft);
+  font-size: 0.86rem;
+}
+
+.news-card-featured p {
+  color: var(--white);
+}
+
+.news-card .text-link {
+  margin-top: 14px;
+}
+
 .section-heading h2 {
   font-size: clamp(2.55rem, 5vw, 4.35rem);
 }
@@ -954,6 +1088,7 @@ svg {
   right: 0;
   bottom: 0;
   width: 44%;
+  height: auto;
   aspect-ratio: 1;
   object-fit: cover;
   border: 10px solid var(--cream-100);
@@ -1008,14 +1143,15 @@ svg {
   align-items: center;
 }
 
-.place-facts strong {
+.place-facts dt {
   color: var(--green-900);
   font-family: var(--font-display);
   font-size: 1.17rem;
   font-weight: 400;
 }
 
-.place-facts span {
+.place-facts dd {
+  margin: 0;
   color: var(--ink-soft);
   font-size: 0.78rem;
 }
@@ -1032,8 +1168,119 @@ svg {
 .image-source {
   display: block;
   margin-top: 16px;
-  color: rgba(23, 48, 43, 0.48);
-  font-size: 0.62rem;
+  color: var(--ink-soft);
+  font-size: 0.75rem;
+}
+
+.classes-section {
+  background:
+    radial-gradient(circle at 5% 12%, rgba(255, 200, 87, 0.16), transparent 22%),
+    var(--cream-50);
+}
+
+.classes-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-top: 52px;
+}
+
+.class-card {
+  position: relative;
+  display: flex;
+  min-height: 330px;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 28px;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 0 1px rgba(37, 36, 81, 0.06), 0 12px 30px rgba(37, 36, 81, 0.07);
+}
+
+.class-card::after {
+  content: "";
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  top: -76px;
+  right: -58px;
+  border: 24px solid rgba(255, 255, 255, 0.35);
+  border-radius: 50%;
+}
+
+.class-one { background: var(--sun-100); }
+.class-two { background: var(--coral-100); }
+.class-three { background: var(--blue-100); }
+.class-four { background: var(--mint-100); }
+.class-vkl {
+  min-height: 250px;
+  grid-column: span 4;
+  padding-right: min(42%, 470px);
+  background:
+    radial-gradient(circle at 86% 38%, rgba(255, 200, 87, 0.17), transparent 28%),
+    linear-gradient(145deg, var(--blue-700), var(--violet-700));
+  color: var(--white);
+}
+
+.class-number {
+  position: absolute;
+  top: 16px;
+  right: 22px;
+  color: rgba(37, 36, 81, 0.12);
+  font-family: var(--font-display);
+  font-size: 6.2rem;
+  line-height: 1;
+}
+
+.class-number-vkl {
+  top: 30px;
+  right: 54px;
+  color: rgba(255, 255, 255, 0.1);
+  font-size: clamp(5rem, 12vw, 9rem);
+}
+
+.class-label {
+  position: relative;
+  z-index: 1;
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.68);
+  font-size: 0.65rem;
+  font-weight: 850;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.class-vkl .class-label {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.class-card h3 {
+  position: relative;
+  z-index: 1;
+  margin-top: auto;
+  font-family: var(--font-display);
+  font-size: clamp(1.55rem, 2.2vw, 2rem);
+  font-weight: 400;
+}
+
+.class-card p {
+  position: relative;
+  z-index: 1;
+  margin-top: 12px;
+  color: var(--ink-soft);
+  font-size: 0.82rem;
+}
+
+.class-vkl p {
+  color: var(--white);
+}
+
+.class-vkl .text-link {
+  position: relative;
+  z-index: 1;
+  margin-top: 12px;
+  color: var(--white);
 }
 
 .life-section {
@@ -1499,13 +1746,19 @@ svg {
 }
 
 .parents-note span {
-  color: rgba(255, 255, 255, 0.65);
-  font-size: 0.66rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.75rem;
 }
 
 .parents-note a {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
   font-size: 1.05rem;
   font-weight: 800;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
 }
 
 .info-accordion {
@@ -1535,7 +1788,7 @@ svg {
 }
 
 .info-accordion summary > span {
-  color: rgba(255, 255, 255, 0.44);
+  color: rgba(255, 255, 255, 0.82);
   font-family: var(--font-sans);
   font-size: 0.68rem;
   font-weight: 800;
@@ -1589,6 +1842,192 @@ svg {
   color: var(--white);
 }
 
+.calendar-section {
+  background:
+    radial-gradient(circle at 0% 100%, rgba(237, 106, 97, 0.12), transparent 26%),
+    var(--cream-100);
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: 0.72fr 1.28fr;
+  align-items: center;
+  gap: clamp(54px, 8vw, 100px);
+}
+
+.calendar-intro h2 {
+  margin-top: 18px;
+  font-size: clamp(2.8rem, 5vw, 4.5rem);
+}
+
+.calendar-intro h2 em {
+  color: var(--coral-600);
+}
+
+.calendar-intro > p:not(.eyebrow) {
+  margin-top: 22px;
+  color: var(--ink-soft);
+}
+
+.calendar-intro .button {
+  margin-top: 28px;
+}
+
+.calendar-card {
+  display: grid;
+  min-height: 410px;
+  grid-template-columns: 0.78fr 1.22fr;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 34px;
+  background: var(--white);
+  box-shadow: 0 0 0 1px rgba(37, 36, 81, 0.06), 0 18px 45px rgba(37, 36, 81, 0.09);
+}
+
+.calendar-sheet {
+  position: relative;
+  display: grid;
+  min-height: 100%;
+  place-content: center;
+  overflow: hidden;
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at 84% 14%, rgba(255, 200, 87, 0.35), transparent 24%),
+    linear-gradient(145deg, var(--blue-700), var(--violet-700));
+  color: var(--white);
+  text-align: center;
+}
+
+.calendar-sheet > span {
+  position: absolute;
+  top: 0;
+  width: 16px;
+  height: 34px;
+  border-radius: 0 0 8px 8px;
+  background: var(--sun-500);
+}
+
+.calendar-sheet > span:first-child { left: 28%; }
+.calendar-sheet > span:nth-child(2) { right: 28%; }
+
+.calendar-sheet strong {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.calendar-sheet svg {
+  width: 72px;
+  height: 72px;
+  margin: 20px auto 0;
+  color: var(--sun-500);
+  stroke-width: 1.4;
+}
+
+.calendar-empty {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  padding: 34px;
+}
+
+.calendar-empty .news-badge {
+  background: var(--sun-100);
+}
+
+.calendar-empty h3 {
+  margin-top: 20px;
+  font-family: var(--font-display);
+  font-size: clamp(1.8rem, 3vw, 2.5rem);
+  font-weight: 400;
+}
+
+.calendar-empty p {
+  margin-top: 14px;
+  color: var(--ink-soft);
+  font-size: 0.86rem;
+}
+
+.calendar-empty .text-link {
+  margin-top: 18px;
+}
+
+.downloads-section {
+  background: var(--cream-50);
+}
+
+.downloads-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 52px;
+}
+
+.download-card {
+  display: flex;
+  min-height: 340px;
+  align-items: flex-start;
+  flex-direction: column;
+  padding: 30px;
+  border-radius: var(--radius-lg);
+  background: var(--white);
+  box-shadow: 0 0 0 1px rgba(37, 36, 81, 0.06), 0 12px 30px rgba(37, 36, 81, 0.06);
+  transition-property: box-shadow, transform;
+  transition-duration: 180ms;
+  transition-timing-function: ease-out;
+}
+
+.download-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 0 0 1px rgba(37, 36, 81, 0.08), 0 18px 38px rgba(37, 36, 81, 0.09);
+}
+
+.download-icon {
+  background: var(--sun-100);
+  color: #7d5a05;
+}
+
+.download-icon-coral {
+  background: var(--coral-100);
+  color: var(--coral-700);
+}
+
+.download-icon-blue {
+  background: var(--blue-100);
+  color: var(--blue-700);
+}
+
+.download-card > div {
+  margin-top: 24px;
+}
+
+.download-status {
+  min-height: 26px;
+  padding-inline: 9px;
+  background: var(--cream-100);
+  color: var(--ink-soft);
+  font-size: 0.6rem;
+}
+
+.download-card h3 {
+  margin-top: 13px;
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 400;
+}
+
+.download-card p {
+  margin-top: 10px;
+  color: var(--ink-soft);
+  font-size: 0.84rem;
+}
+
+.download-card .text-link {
+  margin-top: auto;
+  padding-top: 20px;
+}
+
 .contact-section {
   background: var(--cream-100);
 }
@@ -1619,6 +2058,7 @@ svg {
   gap: 0;
   margin-top: 32px;
   border-top: 1px solid rgba(23, 48, 43, 0.14);
+  font-style: normal;
 }
 
 .contact-list > div {
@@ -1659,11 +2099,20 @@ svg {
   color: var(--green-900);
   font-weight: 750;
   overflow-wrap: anywhere;
+  text-decoration: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+.contact-list p a {
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
 }
 
 .contact-list small {
   color: var(--ink-soft);
-  font-size: 0.68rem;
+  font-size: 0.75rem;
 }
 
 .map-card {
@@ -1863,13 +2312,23 @@ svg {
 .footer-links a,
 .footer-links span {
   color: rgba(255, 255, 255, 0.68);
-  font-size: 0.78rem;
+  font-size: 0.82rem;
   transition-property: color;
   transition-duration: 160ms;
 }
 
+.footer-links a {
+  display: inline-flex;
+  min-height: 32px;
+  align-items: center;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 0.2em;
+}
+
 .footer-links a:hover {
   color: var(--white);
+  text-decoration-color: currentColor;
 }
 
 .footer-bottom {
@@ -1878,15 +2337,31 @@ svg {
   align-items: center;
   justify-content: space-between;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 0.67rem;
+  color: rgba(255, 255, 255, 0.76);
+  font-size: 0.75rem;
 }
 
 .footer-bottom div {
   display: flex;
+  flex-wrap: wrap;
   gap: 22px;
 }
 
+.footer-bottom a {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 0.2em;
+}
+
+.footer-bottom a:hover,
+.footer-bottom a:focus-visible {
+  color: var(--white);
+  text-decoration-color: currentColor;
+}
+
 .detail-dialog {
   width: min(660px, calc(100vw - 32px));
   max-height: min(760px, calc(100vh - 32px));
@@ -1947,8 +2422,8 @@ svg {
 }
 
 .dialog-kicker {
-  color: var(--coral-600);
-  font-size: 0.68rem;
+  color: var(--coral-700);
+  font-size: 0.75rem;
   font-weight: 850;
   letter-spacing: 0.14em;
   text-transform: uppercase;
@@ -2033,6 +2508,18 @@ svg {
   color: var(--ink-soft);
 }
 
+.legal-content li + li {
+  margin-top: 8px;
+}
+
+.legal-content strong {
+  color: var(--ink);
+}
+
+.legal-intro {
+  font-size: 1.1rem;
+}
+
 .legal-content a {
   color: var(--green-900);
   font-weight: 700;
@@ -2040,6 +2527,32 @@ svg {
   text-underline-offset: 3px;
 }
 
+.legal-address {
+  margin-top: 18px;
+  color: var(--ink-soft);
+  font-style: normal;
+}
+
+.legal-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 28px;
+  max-width: 780px;
+  margin-top: 48px;
+  padding-top: 24px;
+  border-top: 1px solid rgba(23, 48, 43, 0.14);
+}
+
+.legal-nav a {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  color: var(--green-900);
+  font-weight: 750;
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
 .legal-note {
   margin-top: 32px !important;
   padding: 20px;
@@ -2066,8 +2579,9 @@ svg {
 }
 
 :focus-visible {
-  outline: 3px solid var(--sun-500);
-  outline-offset: 3px;
+  outline: 3px solid var(--white);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px var(--navy-950);
 }
 
 @media (max-width: 1050px) {
@@ -2096,6 +2610,23 @@ svg {
     grid-template-columns: repeat(3, 1fr);
   }
 
+  .news-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .news-card-featured {
+    grid-column: span 2;
+    min-height: 360px;
+  }
+
+  .classes-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .class-vkl {
+    grid-column: span 2;
+  }
+
   .profile-grid {
     grid-template-columns: 1fr 1fr;
   }
@@ -2175,6 +2706,17 @@ svg {
     grid-template-columns: 1fr 1fr;
   }
 
+  .news-grid,
+  .downloads-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .news-card,
+  .news-card-featured {
+    min-height: 340px;
+    grid-column: auto;
+  }
+
   .quick-card:last-child {
     grid-column: span 2;
   }
@@ -2192,6 +2734,7 @@ svg {
 
   .place-grid,
   .parents-grid,
+  .calendar-grid,
   .contact-grid {
     grid-template-columns: 1fr;
   }
@@ -2217,6 +2760,10 @@ svg {
     position: static;
   }
 
+  .calendar-card {
+    max-width: 620px;
+  }
+
   .parents-intro > p:not(.eyebrow) {
     max-width: 560px;
   }
@@ -2244,6 +2791,10 @@ svg {
 }
 
 @media (max-width: 600px) {
+  html {
+    scroll-padding-top: 84px;
+  }
+
   :root {
     --shell: calc(100vw - 28px);
   }
@@ -2350,13 +2901,41 @@ svg {
     transform: translate(3px, -50%);
   }
 
+  .news-card {
+    min-height: 330px;
+    padding: 25px;
+    border-radius: 24px;
+  }
+
   .section-heading h2,
   .place-copy h2,
   .parents-intro h2,
+  .calendar-intro h2,
   .contact-copy h2 {
     font-size: 2.65rem;
   }
 
+  .classes-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .class-card,
+  .class-vkl {
+    min-height: 300px;
+    grid-column: auto;
+    padding: 25px;
+  }
+
+  .class-vkl {
+    padding-right: 25px;
+  }
+
+  .class-number-vkl {
+    top: 38px;
+    right: 20px;
+    font-size: 5rem;
+  }
+
   .profile-card,
   .profile-card:last-child {
     min-height: 460px;
@@ -2438,6 +3017,23 @@ svg {
     padding-left: 44px;
   }
 
+  .calendar-card {
+    grid-template-columns: 1fr;
+  }
+
+  .calendar-sheet {
+    min-height: 230px;
+  }
+
+  .calendar-empty {
+    padding: 26px 18px 28px;
+  }
+
+  .download-card {
+    min-height: 310px;
+    padding: 26px;
+  }
+
   .map-illustration {
     min-height: 390px;
   }
@@ -2499,4 +3095,39 @@ svg {
     transform: none;
     filter: none;
   }
+
+  .button:active,
+  .quick-card:active,
+  .dialog-close:active,
+  .menu-button:active {
+    scale: 1;
+  }
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 3px solid CanvasText;
+    box-shadow: none;
+  }
+
+  .brand-mark,
+  .quick-card,
+  .news-card,
+  .profile-card,
+  .class-card,
+  .story-card,
+  .community-card,
+  .calendar-card,
+  .download-card,
+  .map-card,
+  .parents-note,
+  .dialog-note {
+    border: 1px solid CanvasText;
+  }
+
+  .signal-dot,
+  .eyebrow::before,
+  .desktop-nav a::after {
+    background: CanvasText;
+  }
 }