feat: bunte Farbwelt und neues Hero-Motiv

README.md

@@ -64,4 +64,4 @@ Der unveränderliche Commit-Tag erlaubt bei Bedarf ein gezieltes Rollback. `late
 - 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
-- Nutzungsfreigabe für Fotos dokumentieren (Fotos im Prototyp: Dirk Altenkirch / Stadt Karlsruhe)
+- Nutzungsfreigabe für die Gebäudefotos dokumentieren (Dirk Altenkirch / Stadt Karlsruhe); das Hauptmotiv ist ein gekennzeichnetes KI-generiertes Symbolbild

index.html

@@ -7,9 +7,9 @@
       name="description"
       content="Hardtschule Karlsruhe – bewegte Grundschule in Mühlburg. Lernen, Gemeinschaft und wichtige Informationen für Familien."
     />
-    <meta name="theme-color" content="#0c4a3e" />
+    <meta name="theme-color" content="#3f63d3" />
     <title>Hardtschule Karlsruhe · Bewegte Grundschule</title>
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2224%22 fill=%22%230c4a3e%22/><path d=%22M22 67V39L50 22l28 17v28%22 fill=%22none%22 stroke=%22%23f5c95d%22 stroke-width=%229%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/><path d=%22M35 70V52h30v18%22 fill=%22none%22 stroke=%22white%22 stroke-width=%229%22 stroke-linecap=%22round%22/></svg>" />
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2224%22 fill=%22%233f63d3%22/><path d=%22M22 67V39L50 22l28 17v28%22 fill=%22none%22 stroke=%22%23ffc857%22 stroke-width=%229%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/><path d=%22M35 70V52h30v18%22 fill=%22none%22 stroke=%22white%22 stroke-width=%229%22 stroke-linecap=%22round%22/></svg>" />
     <link rel="stylesheet" href="styles.css" />
     <script src="script.js" defer></script>
   </head>
@@ -148,17 +148,17 @@
           <div class="hero-visual reveal" style="--delay: 120ms">
             <div class="hero-image-wrap">
               <img
-                src="public/images/hardtschule-hero.jpg"
-                alt="Historischer Anbau der Hardtschule mit gelber Backsteinfassade"
-                width="1500"
-                height="785"
+                src="public/images/hardtschule-kinder-herz.webp"
+                alt="Kinder bilden aus der Vogelperspektive ein großes Herz auf einem bunten Schulhof"
+                width="1537"
+                height="1023"
               />
-              <span class="photo-credit">Foto: Dirk Altenkirch / Stadt Karlsruhe</span>
+              <span class="photo-credit">KI-generiertes Symbolbild</span>
             </div>
             <div class="hero-sticker sticker-year" aria-hidden="true">
-              <span>seit</span>
-              <strong>1847</strong>
-              <span>in Mühlburg</span>
+              <span>gemeinsam</span>
+              <strong>stark</strong>
+              <span>an der Hardtschule</span>
             </div>
             <div class="hero-sticker sticker-move" aria-hidden="true">
               <svg><use href="#icon-shoe"></use></svg>
@@ -252,10 +252,10 @@
           <div class="place-visual reveal">
             <img
               class="place-image-main"
-              src="public/images/hardtschule-anbau.jpg"
-              alt="Seitenansicht des denkmalgeschützten Anbaus der Hardtschule"
+              src="public/images/hardtschule-hero.jpg"
+              alt="Historischer Anbau der Hardtschule mit gelber Backsteinfassade"
               width="1500"
-              height="998"
+              height="785"
               loading="lazy"
             />
             <img

server.mjs

@@ -13,6 +13,7 @@ const mimeTypes = {
   ".jpeg": "image/jpeg",
   ".png": "image/png",
   ".svg": "image/svg+xml",
+  ".webp": "image/webp",
 };
 
 createServer((request, response) => {

styles.css

@@ -1,21 +1,28 @@
 :root {
-  --ink: #17302b;
-  --ink-soft: #4b5e59;
-  --green-950: #073a31;
-  --green-900: #0c4a3e;
-  --green-800: #145e4f;
-  --green-100: #dcebe4;
-  --blue-700: #255da8;
-  --blue-100: #dce9f8;
-  --coral-600: #e76850;
-  --coral-100: #f8ded7;
-  --sun-500: #f5c95d;
+  --navy-950: #252451;
+  --blue-700: #3f63d3;
+  --blue-100: #e3edff;
+  --violet-700: #7655d8;
+  --violet-100: #eee7ff;
+  --mint-100: #dff6ec;
+  --coral-600: #ed6a61;
+  --coral-100: #ffe3de;
+  --sun-500: #ffc857;
   --sun-100: #fff0bd;
-  --cream-50: #fbf9f2;
-  --cream-100: #f4efe2;
+  --cream-50: #fffaf3;
+  --cream-100: #f7f0e7;
   --white: #ffffff;
-  --shadow-soft: 0 1px 2px rgba(23, 48, 43, 0.05), 0 12px 32px rgba(23, 48, 43, 0.08);
-  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 18px 50px rgba(0, 27, 22, 0.2);
+
+  /* Semantische Farbtokens */
+  --ink: #29263f;
+  --ink-soft: #625e75;
+  --green-950: var(--navy-950);
+  --green-900: var(--blue-700);
+  --green-800: var(--violet-700);
+  --green-100: var(--mint-100);
+
+  --shadow-soft: 0 1px 2px rgba(37, 36, 81, 0.05), 0 12px 32px rgba(37, 36, 81, 0.09);
+  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 22px 55px rgba(30, 27, 78, 0.24);
   --radius-sm: 12px;
   --radius-md: 18px;
   --radius-lg: 28px;
@@ -55,7 +62,7 @@ body.dialog-open {
 img {
   display: block;
   max-width: 100%;
-  outline: 1px solid rgba(7, 58, 49, 0.08);
+  outline: 1px solid rgba(37, 36, 81, 0.1);
   outline-offset: -1px;
 }
 
@@ -151,7 +158,7 @@ svg {
 }
 
 .utility-bar {
-  background: var(--green-950);
+  background: var(--navy-950);
   color: rgba(255, 255, 255, 0.82);
   font-size: 0.78rem;
   font-weight: 600;
@@ -207,8 +214,8 @@ svg {
   display: grid;
   place-items: center;
   border-radius: 15px;
-  background: var(--green-900);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px rgba(7, 58, 49, 0.16);
+  background: linear-gradient(135deg, var(--blue-700), var(--violet-700));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 20px rgba(69, 111, 232, 0.24);
 }
 
 .brand-roof {
@@ -447,7 +454,10 @@ svg {
   position: relative;
   min-height: 680px;
   overflow: hidden;
-  background: var(--green-900);
+  background:
+    radial-gradient(circle at 8% 18%, rgba(255, 200, 87, 0.14), transparent 27%),
+    radial-gradient(circle at 92% 82%, rgba(237, 106, 97, 0.18), transparent 26%),
+    linear-gradient(135deg, #3d66d8 0%, #5e50cd 56%, #7149c2 100%);
   color: var(--white);
 }
 
@@ -490,7 +500,7 @@ svg {
   display: flex;
   align-items: center;
   gap: 10px;
-  color: var(--green-800);
+  color: var(--violet-700);
   font-size: 0.73rem;
   font-weight: 850;
   letter-spacing: 0.16em;
@@ -522,7 +532,7 @@ svg {
 .hero-lead {
   max-width: 580px;
   margin-top: 28px;
-  color: rgba(255, 255, 255, 0.78);
+  color: rgba(255, 255, 255, 0.9);
   font-size: clamp(1rem, 1.5vw, 1.16rem);
   line-height: 1.7;
 }
@@ -539,7 +549,7 @@ svg {
   flex-wrap: wrap;
   gap: 12px 22px;
   margin-top: 44px;
-  color: rgba(255, 255, 255, 0.66);
+  color: rgba(255, 255, 255, 0.8);
   font-size: 0.75rem;
   font-weight: 650;
 }
@@ -569,8 +579,8 @@ svg {
 .hero-image-wrap {
   position: relative;
   overflow: hidden;
-  aspect-ratio: 0.95;
-  border-radius: 160px 32px 32px 32px;
+  aspect-ratio: 4 / 3;
+  border-radius: 42px 148px 42px 42px;
   box-shadow: var(--shadow-float);
 }
 
@@ -578,7 +588,7 @@ svg {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(180deg, transparent 65%, rgba(7, 58, 49, 0.34));
+  background: linear-gradient(180deg, transparent 68%, rgba(37, 36, 81, 0.32));
   pointer-events: none;
 }
 
@@ -622,7 +632,8 @@ svg {
 
 .sticker-year strong {
   font-family: var(--font-display);
-  font-size: 2rem;
+  font-size: 1.55rem;
+  letter-spacing: -0.04em;
 }
 
 .sticker-year span {
@@ -766,8 +777,8 @@ svg {
 .quick-blue { background: var(--blue-100); }
 .quick-coral { background: var(--coral-100); }
 .quick-yellow { background: var(--sun-100); }
-.quick-green { background: var(--green-100); }
-.quick-cream { background: var(--cream-100); }
+.quick-green { background: var(--mint-100); }
+.quick-cream { background: var(--violet-100); }
 
 .section-heading h2 {
   font-size: clamp(2.55rem, 5vw, 4.35rem);
@@ -1028,7 +1039,9 @@ svg {
 .life-section {
   position: relative;
   overflow: hidden;
-  background: var(--green-900);
+  background:
+    radial-gradient(circle at 88% 18%, rgba(255, 200, 87, 0.15), transparent 24%),
+    linear-gradient(145deg, #354fbb 0%, #6746bc 58%, #7a46b8 100%);
   color: var(--white);
 }
 
@@ -1058,7 +1071,7 @@ svg {
 .section-heading-split > p {
   max-width: 430px;
   padding-bottom: 8px;
-  color: rgba(255, 255, 255, 0.68);
+  color: rgba(255, 255, 255, 0.82);
 }
 
 .story-grid {
@@ -1096,7 +1109,7 @@ svg {
 .story-yellow { background: var(--sun-500); }
 .story-blue { background: #8fb9e9; }
 .story-coral { background: #ef8d77; }
-.story-green { background: var(--green-800); }
+.story-green { background: var(--violet-700); }
 
 .story-copy {
   position: relative;
@@ -1133,7 +1146,7 @@ svg {
 }
 
 .story-green p {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.86);
 }
 
 .story-green .text-link {
@@ -1434,7 +1447,9 @@ svg {
 }
 
 .parents-section {
-  background: var(--blue-700);
+  background:
+    radial-gradient(circle at 4% 92%, rgba(255, 200, 87, 0.14), transparent 28%),
+    linear-gradient(145deg, #246fc2 0%, #3f63d3 54%, #5e50cd 100%);
   color: var(--white);
 }
 
@@ -1457,7 +1472,7 @@ svg {
 
 .parents-intro > p:not(.eyebrow) {
   margin-top: 24px;
-  color: rgba(255, 255, 255, 0.74);
+  color: rgba(255, 255, 255, 0.86);
   font-size: 1.02rem;
 }
 
@@ -1565,7 +1580,7 @@ svg {
 
 .accordion-content p {
   max-width: 610px;
-  color: rgba(255, 255, 255, 0.72);
+  color: rgba(255, 255, 255, 0.86);
   font-size: 0.86rem;
 }
 
@@ -1664,7 +1679,7 @@ svg {
   overflow: hidden;
   min-height: 450px;
   border-radius: 24px;
-  background: #e6ecdd;
+  background: #e7edfb;
 }
 
 .map-illustration::before {
@@ -1701,14 +1716,14 @@ svg {
   border: 8px solid rgba(255, 255, 255, 0.62);
   border-right: 0;
   border-left: 0;
-  background: #9dcad0;
+  background: #a6d5eb;
   transform: rotate(-12deg);
 }
 
 .map-park {
   position: absolute;
   border-radius: 50%;
-  background: #b9d0a7;
+  background: #d9cff7;
 }
 
 .park-one { width: 190px; height: 140px; top: -30px; right: -40px; }
@@ -1787,7 +1802,7 @@ svg {
 }
 
 .site-footer {
-  background: var(--green-950);
+  background: var(--navy-950);
   color: var(--white);
 }
 
@@ -1885,7 +1900,7 @@ svg {
 }
 
 .detail-dialog::backdrop {
-  background: rgba(6, 42, 35, 0.72);
+  background: rgba(28, 25, 68, 0.74);
   backdrop-filter: blur(5px);
 }
 
@@ -1984,7 +1999,7 @@ svg {
 }
 
 .legal-header {
-  background: var(--green-950);
+  background: var(--navy-950);
   color: var(--white);
 }
 
@@ -2142,8 +2157,8 @@ svg {
   }
 
   .hero-image-wrap {
-    aspect-ratio: 1.15;
-    border-radius: 130px 28px 28px 28px;
+    aspect-ratio: 4 / 3;
+    border-radius: 32px 120px 32px 32px;
   }
 
   .sticker-move {
@@ -2287,8 +2302,8 @@ svg {
   }
 
   .hero-image-wrap {
-    aspect-ratio: 0.95;
-    border-radius: 100px 22px 22px 22px;
+    aspect-ratio: 4 / 3;
+    border-radius: 26px 92px 26px 26px;
   }
 
   .sticker-year {
@@ -2298,7 +2313,7 @@ svg {
   }
 
   .sticker-year strong {
-    font-size: 1.65rem;
+    font-size: 1.28rem;
   }
 
   .sticker-move {