Initial website — Astro + Tailwind + Sanity schema, 9 pages

src/components/Header.astro

@@ -0,0 +1,68 @@
+---
+const nav = [
+  { href: "/ueber-uns",      label: "Über uns" },
+  { href: "/was-wir-tun",    label: "Was wir tun" },
+  { href: "/projekte",       label: "Projekte" },
+  { href: "/aktuelles",      label: "Aktuelles" },
+  { href: "/unterstuetzen",  label: "Unterstützen" },
+];
+
+const pathname = Astro.url.pathname;
+---
+
+<header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-[var(--color-border)]">
+  <div class="rainbow-bar"></div>
+  <div class="max-w-6xl mx-auto px-4 flex items-center justify-between h-16">
+    <a href="/" class="flex items-center gap-2 font-brand text-xl text-[var(--color-primary)]">
+      🌈 Kitafreunde Regenbogen
+    </a>
+
+    <!-- Desktop Nav -->
+    <nav class="hidden md:flex items-center gap-6 text-sm font-medium">
+      {nav.map(({ href, label }) => (
+        <a
+          href={href}
+          class:list={[
+            "transition-colors hover:text-[var(--color-primary)]",
+            pathname.startsWith(href)
+              ? "text-[var(--color-primary)] font-semibold"
+              : "text-[var(--color-text-muted)]"
+          ]}
+        >
+          {label}
+        </a>
+      ))}
+    </nav>
+
+    <a href="/mitglied-werden" class="btn-primary text-sm hidden md:inline-flex">
+      Mitglied werden
+    </a>
+
+    <!-- Mobile Menu Button -->
+    <button
+      id="mobile-menu-btn"
+      class="md:hidden p-2 rounded-lg text-[var(--color-text-muted)]"
+      aria-label="Menü öffnen"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+      </svg>
+    </button>
+  </div>
+
+  <!-- Mobile Nav -->
+  <div id="mobile-menu" class="hidden md:hidden border-t border-[var(--color-border)] bg-white">
+    <div class="px-4 py-4 flex flex-col gap-4 text-sm font-medium">
+      {nav.map(({ href, label }) => (
+        <a href={href} class="text-[var(--color-text)] hover:text-[var(--color-primary)]">{label}</a>
+      ))}
+      <a href="/mitglied-werden" class="btn-primary text-center">Mitglied werden</a>
+    </div>
+  </div>
+</header>
+
+<script>
+  const btn = document.getElementById("mobile-menu-btn");
+  const menu = document.getElementById("mobile-menu");
+  btn?.addEventListener("click", () => menu?.classList.toggle("hidden"));
+</script>