Header: responsive Bildmarke + Apex Brush wordmark lockup

- Replace the baked-in full-logo PNG in the header with the standalone
  Bildmarke (SVG) + live Apex Brush wordmark; "Regenbogen" uses the
  rainbow gradient (same as headings)
- Responsive: icon-only on mobile, two-line wordmark on sm–lg, one-line
  on xl; move nav breakpoint md->lg so the two-line wordmark doesn't
  collide with the inline nav (tablet uses the menu button)
- Footer and elsewhere keep the full logo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/Header.astro

@@ -15,13 +15,22 @@ const isActive = (href: string) => pathname === href || pathname.startsWith(href
 
   <div class="bg-[var(--color-paper)]/85 backdrop-blur-md border-b border-[var(--color-border)]">
     <div class="max-w-6xl mx-auto px-4 flex items-center justify-between gap-4 py-3">
-      <!-- Logo: jetzt mit Präsenz -->
-      <a href="/" class="shrink-0 transition-transform duration-200 hover:-rotate-2 hover:scale-[1.03]" aria-label="Kitafreunde Regenbogen — Startseite">
-        <img src="/logo/logo.png" alt="Kitafreunde Regenbogen" class="h-14 sm:h-16 w-auto" width="744" height="745" />
+      <!-- Logo: Bildmarke + Apex-Brush-Wortmarke (responsiv) -->
+      <a href="/" class="group shrink-0 flex items-center gap-2.5" aria-label="Kitafreunde Regenbogen — Startseite">
+        <img
+          src="/logo/bildmarke.svg" alt=""
+          class="h-12 lg:h-14 w-auto transition-transform duration-200 group-hover:-rotate-3 group-hover:scale-105"
+          width="159" height="177"
+        />
+        <!-- Wortmarke: mobil aus · sm–xl zweizeilig · xl+ einzeilig -->
+        <span class="hidden sm:flex font-brand text-[var(--color-primary)] leading-[0.9] flex-col xl:flex-row xl:items-baseline xl:gap-2 text-[26px] xl:text-[30px]">
+          <span>Kitafreunde</span>
+          <span class="rainbow-text">Regenbogen</span>
+        </span>
       </a>
 
-      <!-- Desktop Nav -->
-      <nav class="hidden md:flex items-center gap-7 text-[15px] font-semibold">
+      <!-- Desktop Nav (ab lg, damit die zweizeilige Wortmarke Platz hat) -->
+      <nav class="hidden lg:flex items-center gap-6 text-[15px] font-semibold">
         {nav.map(({ href, label }) => (
           <a
             href={href}
@@ -38,14 +47,14 @@ const isActive = (href: string) => pathname === href || pathname.startsWith(href
         ))}
       </nav>
 
-      <a href="/mitglied-werden" class="btn-primary text-sm hidden md:inline-flex">
+      <a href="/mitglied-werden" class="btn-primary text-sm hidden lg:inline-flex">
         <span aria-hidden="true">♥</span> Mitglied werden
       </a>
 
-      <!-- Mobile Button -->
+      <!-- Mobile/Tablet Button -->
       <button
         id="mobile-menu-btn"
-        class="md:hidden p-2 rounded-xl text-[var(--color-primary)] hover:bg-[var(--color-surface-alt)]"
+        class="lg:hidden p-2 rounded-xl text-[var(--color-primary)] hover:bg-[var(--color-surface-alt)]"
         aria-label="Menü öffnen" aria-expanded="false"
       >
         <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -54,8 +63,8 @@ const isActive = (href: string) => pathname === href || pathname.startsWith(href
       </button>
     </div>
 
-    <!-- Mobile Nav -->
-    <div id="mobile-menu" class="hidden md:hidden border-t border-[var(--color-border)] bg-[var(--color-paper)]">
+    <!-- Mobile/Tablet Nav -->
+    <div id="mobile-menu" class="hidden lg:hidden border-t border-[var(--color-border)] bg-[var(--color-paper)]">
       <div class="px-4 py-5 flex flex-col gap-1 text-base font-semibold">
         {nav.map(({ href, label }) => (
           <a href={href}