Footer neu: 4 Spalten (Brand+Claim+Social, Seiten, Kontakt mit Icons, Rechtliches), 18px Schrift, Akzent-Headings, Bottom-Bar mit Verbänden

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/components/footer.php

@@ -3,34 +3,61 @@
 declare(strict_types=1);
 
 /**
- * Footer: Vereinsdaten (NAP aus club.json), Social-Links, Rechtliches.
+ * Footer: Brand-Block (Logo, Entity-Satz, Social), Seiten-Navigation,
+ * Kontakt (NAP aus club.json — identisch zu JSON-LD), Rechtliches.
+ * Alle Daten aus den Single-Source-Dateien (club.json / navigation.json).
  */
 $club = json_load('club');
 $nav = json_load('navigation');
 
 $socialLabels = ['instagram' => 'Instagram', 'facebook' => 'Facebook', 'youtube' => 'YouTube'];
+$socialIcons = ['instagram' => 'instagram', 'facebook' => 'facebook', 'youtube' => 'youtube'];
+
+$footerNav = array_merge(
+    array_filter($nav['main'], static fn (array $item): bool => !str_starts_with($item['slug'], '#')),
+    $nav['ctas'] ?? []
+);
 ?>
     <footer class="site-footer">
         <div class="container site-footer__grid">
-            <div>
+            <div class="site-footer__brand">
-                <h2 class="site-footer__heading"><?= e($club['legal_name']) ?></h2>
+                <img src="<?= e(asset('img/logo.svg')) ?>" alt="" width="62" height="80" loading="lazy">
-                <address class="site-footer__address">
+                <p class="site-footer__claim"><?= e($club['description']) ?></p>
-                    <?= e($club['address']['venue']) ?><br>
+                <ul class="site-footer__social" aria-label="Social Media">
-                    <?= e($club['address']['street']) ?><br>
-                    <?= e($club['address']['zip']) ?> <?= e($club['address']['city']) ?><br>
-                    <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a>
-                </address>
-            </div>
-            <div>
-                <h2 class="site-footer__heading">Folge uns</h2>
-                <ul class="site-footer__list">
 <?php foreach ($club['social'] as $key => $socialUrl): ?>
 <?php if ($socialUrl): ?>
-                    <li><a href="<?= e($socialUrl) ?>" rel="noopener"><?= e($socialLabels[$key] ?? ucfirst($key)) ?></a></li>
+                    <li>
+                        <a href="<?= e($socialUrl) ?>" rel="noopener">
+                            <?= icon($socialIcons[$key] ?? 'link-45deg') ?><?= e($socialLabels[$key] ?? ucfirst($key)) ?>
+                        </a>
+                    </li>
 <?php endif; ?>
 <?php endforeach; ?>
                 </ul>
             </div>
+            <nav aria-label="Footer-Navigation">
+                <h2 class="site-footer__heading">Seiten</h2>
+                <ul class="site-footer__list">
+<?php foreach ($footerNav as $item): ?>
+                    <li><a href="<?= e(url($item['slug'])) ?>"><?= e($item['label']) ?></a></li>
+<?php endforeach; ?>
+                </ul>
+            </nav>
+            <div>
+                <h2 class="site-footer__heading">Kontakt</h2>
+                <address class="site-footer__address">
+                    <p>
+                        <?= icon('geo-alt') ?>
+                        <span><?= e($club['address']['venue']) ?><br>
+                        <?= e($club['address']['street']) ?><br>
+                        <?= e($club['address']['zip']) ?> <?= e($club['address']['city']) ?></span>
+                    </p>
+                    <p>
+                        <?= icon('envelope') ?>
+                        <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a>
+                    </p>
+                </address>
+            </div>
             <div>
                 <h2 class="site-footer__heading">Rechtliches</h2>
                 <ul class="site-footer__list">
@@ -40,7 +67,10 @@ $socialLabels = ['instagram' => 'Instagram', 'facebook' => 'Facebook', 'youtube'
                 </ul>
             </div>
         </div>
-        <div class="container site-footer__copyright">
+        <div class="site-footer__bottom">
+            <div class="container site-footer__bottom-inner">
                 <p>&copy; <?= e(date('Y')) ?> <?= e($club['legal_name']) ?></p>
+                <p>Mitglied im <?= e(implode(', ', $club['memberships'])) ?></p>
+            </div>
         </div>
     </footer>

public/assets/css/layout.css

@@ -218,51 +218,137 @@
 /* --- Footer --- */
 .site-footer {
     margin-top: var(--space-section);
-    padding: 70px 0 25px;
     background: var(--clr-bg-footer);
-    font-size: var(--fs-400);
+    font-size: var(--fs-500);
 }
 
 .site-footer__grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
-    gap: 2.5rem;
+    gap: 3rem;
+    padding-block: 4.5rem 3.5rem;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 992px) {
+    .site-footer__grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 600px) {
     .site-footer__grid {
         grid-template-columns: 1fr;
+        gap: 2.5rem;
     }
 }
 
+/* Brand-Block */
+.site-footer__brand {
+    display: grid;
+    justify-items: start;
+    gap: 1.25rem;
+}
+
+.site-footer__claim {
+    color: var(--clr-text-muted);
+    max-width: 36ch;
+}
+
+.site-footer__social {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.site-footer__social a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding-block: 0.3rem;
+    color: var(--clr-text-muted);
+    text-decoration: none;
+    transition: color var(--transition);
+}
+
+.site-footer__social .icon {
+    font-size: 1.25em;
+    color: var(--clr-text);
+}
+
+/* Spalten-Headings mit rotem Akzentstrich */
 .site-footer__heading {
     font-size: var(--fs-600);
-    margin-bottom: 0.75rem;
+    margin-bottom: 1.1rem;
+    padding-bottom: 0.5rem;
+    position: relative;
+}
+
+.site-footer__heading::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 2.5rem;
+    height: 3px;
+    background: var(--clr-accent);
+    border-radius: 2px;
 }
 
 .site-footer__address {
     font-style: normal;
     color: var(--clr-text-muted);
+    display: grid;
+    gap: 1rem;
+}
+
+.site-footer__address p {
+    display: flex;
+    gap: 0.6rem;
+    margin: 0;
+}
+
+.site-footer__address .icon {
+    flex: none;
+    margin-top: 0.3em;
+    color: var(--clr-text);
 }
 
 .site-footer__list {
     display: grid;
-    gap: 0.4rem;
+    gap: 0.25rem;
 }
 
 .site-footer__list a,
 .site-footer__address a {
+    display: inline-block;
+    padding-block: 0.3rem;
     color: var(--clr-text-muted);
+    text-decoration: none;
+    transition: color var(--transition);
 }
 
 .site-footer__list a:hover,
-.site-footer__address a:hover {
+.site-footer__address a:hover,
+.site-footer__social a:hover {
     color: var(--clr-text);
+    text-decoration: underline;
+    text-underline-offset: 0.25em;
 }
 
-.site-footer__copyright {
+/* Bottom-Bar */
-    margin-top: 3rem;
+.site-footer__bottom {
-    padding-top: 1.5rem;
     border-top: 1px solid var(--clr-glass-border);
-    color: var(--clr-text-faint);
+}
+
+.site-footer__bottom-inner {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem 2rem;
+    padding-block: 1.5rem;
+    font-size: var(--fs-400);
+    color: var(--clr-text-muted);
+}
+
+.site-footer__bottom-inner p {
+    margin: 0;
 }

public/assets/icons/envelope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/></svg>

public/assets/icons/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/></svg>

public/assets/icons/geo-alt.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"/>
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/></svg>

public/assets/icons/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/></svg>