Back-to-top-Button: erscheint nach 1,5 Viewporthöhen, Fokus-Management, reduced-motion, 48px-Ziel

Enthält auch User-Upgrade: JSON-LD als @graph mit seitenspezifischen Extra-Knoten Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-11 23:00:03 +02:00
parent 557fe1c16b
commit 259e209692
6 changed files with 252 additions and 20 deletions
--- a/app/components/jsonld.php
+++ b/app/components/jsonld.php
@@ -3,13 +3,19 @@
 declare(strict_types=1);

 /**
- * SportsClub-Schema aus data/club.json — auf jeder Seite identisch (NAP-Konsistenz für SEO/GEO).
+ * JSON-LD als ein @graph. Der SportsClub-Knoten (aus data/club.json) ist auf jeder
+ * Seite identisch (NAP-Konsistenz für SEO/GEO) und hat eine feste @id, auf die
+ * seitenspezifische Knoten verweisen.
+ * Props:
+ *   $extra array — zusätzliche Graph-Knoten der Seite (z. B. SportsTeam, FAQPage,
+ *                  BreadcrumbList), gebaut via team_schema()/page_schema().
 */
 $club = json_load('club');
+$clubId = abs_url() . '#club';

-$schema = [
-    '@context'      => 'https://schema.org',
+$clubNode = [
    '@type'         => 'SportsClub',
+    '@id'           => $clubId,
    'name'          => $club['name'],
    'alternateName' => $club['legal_name'],
    'foundingDate'  => $club['founded'],
@@ -27,5 +33,10 @@ $schema = [
    ],
    'sameAs'        => array_values(array_filter($club['social'])),
 ];
+
+$graph = [
+    '@context' => 'https://schema.org',
+    '@graph'   => array_merge([$clubNode], $extra ?? []),
+];
 ?>
-    <script type="application/ld+json"><?= json_encode($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?></script>
+    <script type="application/ld+json"><?= json_encode($graph, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?></script>
--- a/app/components/meta.php
+++ b/app/components/meta.php
@@ -16,7 +16,7 @@ if (empty($meta['title_absolute'])) {
 $description = $meta['description'] ?? $club['description'];
 $canonical = abs_url($current === '404' ? '' : $current);
 $ogImage = rtrim((string) config('base_url'), '/') . '/assets/' . ltrim($meta['og_image'] ?? 'img/og-default.jpg', '/');
-$scripts = array_merge(['nav.js'], $meta['scripts'] ?? []);
+$scripts = array_merge(['nav.js', 'back-to-top.js'], $meta['scripts'] ?? []);
 ?>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -49,4 +49,4 @@ $scripts = array_merge(['nav.js'], $meta['scripts'] ?? []);
 <?php foreach ($scripts as $js): ?>
    <script defer src="<?= e(asset("js/{$js}")) ?>"></script>
 <?php endforeach; ?>
-<?php component('jsonld'); ?>
+<?php component('jsonld', ['extra' => $meta['schema'] ?? []]); ?>
--- a/app/layout.php
+++ b/app/layout.php
@@ -14,9 +14,12 @@ declare(strict_types=1);
 <body>
    <a class="skip-link" href="#main">Zum Inhalt springen</a>
 <?php component('header', ['current' => $current]); ?>
-    <main id="main">
+    <main id="main" tabindex="-1">
 <?= $content ?>
    </main>
 <?php component('footer'); ?>
+    <a class="back-to-top" href="#main" hidden>
+        <?= icon('arrow-up') ?><span class="visually-hidden">Zurück nach oben</span>
+    </a>
 </body>
 </html>
--- a/public/assets/css/layout.css
+++ b/public/assets/css/layout.css
@@ -86,6 +86,111 @@
    border-bottom-color: var(--clr-accent);
 }

+/* --- Dropdown-Untermenü --- */
+.site-nav__item--has-submenu {
+    position: relative;
+}
+
+/* Unsichtbare Brücke über die Lücke zwischen Trigger und Menü: hält den :hover
+   durchgehend, damit das Dropdown beim Rüberfahren nicht sofort schließt. */
+.site-nav__item--has-submenu:hover::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 15rem;
+    max-width: 90vw;
+    height: 0.85rem;
+}
+
+/* Dropdown-Trigger sieht aus wie die übrigen Nav-Links (ist aber ein <button>). */
+.site-nav__sublink {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3em;
+    margin: 0;
+    padding: 0.25em 0;
+    font: inherit;
+    color: var(--clr-text);
+    background: none;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: border-color var(--transition);
+}
+
+.site-nav__sublink:hover,
+.site-nav__sublink[data-current],
+.site-nav__item--has-submenu:focus-within > .site-nav__sublink {
+    border-bottom-color: var(--clr-accent);
+}
+
+.site-nav__chevron {
+    font-size: 0.7em;
+    transition: transform var(--transition);
+}
+
+.site-nav__item--has-submenu:hover .site-nav__chevron,
+.site-nav__item--has-submenu:focus-within .site-nav__chevron,
+.site-nav__sublink[aria-expanded="true"] .site-nav__chevron {
+    transform: rotate(180deg);
+}
+
+.site-nav__submenu {
+    position: absolute;
+    top: calc(100% + 0.4rem);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 25;
+    display: grid;
+    gap: 0.35rem;
+    min-width: 13rem;
+    margin: 0;
+    padding: 0.6rem;
+    list-style: none;
+    background: var(--clr-bg-deep);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    box-shadow: var(--shadow-card);
+    /* Clippt die Hover-Flächen sauber an den abgerundeten Ecken (kein Überstehen). */
+    overflow: hidden;
+    /* Sanftes Einblenden statt hartem display-Wechsel (animierbar). */
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--transition), top var(--transition), visibility var(--transition);
+}
+
+.site-nav__item--has-submenu:hover > .site-nav__submenu,
+.site-nav__item--has-submenu:focus-within > .site-nav__submenu,
+.site-nav__sublink[aria-expanded="true"] + .site-nav__submenu {
+    opacity: 1;
+    visibility: visible;
+    top: calc(100% + 0.75rem);
+}
+
+.site-nav__list .site-nav__submenu a:not(.btn) {
+    display: block;
+    padding: 0.6rem 0.85rem;
+    border-bottom: 0;
+    border-radius: var(--radius-btn);
+    font-size: var(--fs-500);
+    line-height: 1.25;
+    white-space: nowrap;
+    transition: background var(--transition), color var(--transition);
+}
+
+.site-nav__list .site-nav__submenu a:not(.btn):hover,
+.site-nav__list .site-nav__submenu a:not(.btn):focus-visible {
+    border-bottom: 0;
+    background: rgb(var(--clr-accent-rgb) / 0.16);
+}
+
+.site-nav__list .site-nav__submenu a:not(.btn)[aria-current="page"] {
+    border-bottom: 0;
+    background: rgb(var(--clr-accent-rgb) / 0.24);
+}
+
@media (max-width: 1249px) {
    /* Mobile: Logo links, CTAs + Burger rechts */
    .site-header__inner {
@@ -172,6 +277,41 @@
        text-transform: uppercase;
    }

+    /* Dropdown im Overlay: Trigger wie die anderen Punkte, Untermenü inline darunter. */
+    .site-nav__sublink {
+        font-family: var(--ff-heading);
+        font-size: var(--fs-700);
+        text-transform: uppercase;
+        justify-content: center;
+    }
+
+    /* Im Overlay inline einklappen — display statt visibility, sonst bliebe Platz reserviert. */
+    .site-nav__submenu {
+        position: static;
+        transform: none;
+        display: none;
+        opacity: 1;
+        visibility: visible;
+        gap: 0.25rem;
+        min-width: 0;
+        margin: 0.75rem 0 0;
+        padding: 0;
+        background: none;
+        border: 0;
+        box-shadow: none;
+        text-align: center;
+    }
+
+    .site-nav__item--has-submenu:focus-within > .site-nav__submenu,
+    .site-nav__sublink[aria-expanded="true"] + .site-nav__submenu {
+        display: grid;
+    }
+
+    .site-nav__list .site-nav__submenu a:not(.btn) {
+        font-size: var(--fs-600);
+        color: var(--clr-text-muted);
+    }
+
    body.nav-open .site-nav__list {
        visibility: visible;
        opacity: 1;
@@ -188,13 +328,8 @@
    }
 }

-/* CTAs im Overlay-Menü: nur auf schmalen Screens (dort fehlen sie im Header) */
-.site-nav__cta {
-    display: none;
-}
-
@media (max-width: 600px) {
-    /* Schmale Screens: nur der primäre (letzte) CTA neben dem Burger */
+    /* Schmale Screens: CTA(s) kompakter neben dem Burger. */
    .site-header__actions a:not(:last-child) {
        display: none;
    }
@@ -203,15 +338,50 @@
        font-size: var(--fs-400);
        padding: 8px 14px;
    }
-
-    /* Im offenen Menü übernehmen die Overlay-CTAs */
-    .site-nav__cta {
-        display: block;
-        margin-top: 1rem;
 }

-    body.nav-open .site-header__actions {
+/* --- Back-to-top --- */
+.back-to-top {
+    position: fixed;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 15;
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    color: var(--clr-text);
+    font-size: 1.25rem;
+    background: rgb(10 10 10 / 0.82);
+    border: 1px solid var(--clr-glass-border-strong);
+    border-radius: 50%;
+    backdrop-filter: blur(6px);
+    /* Unsichtbar, bis genug gescrollt wurde (is-visible via JS) */
+    opacity: 0;
    visibility: hidden;
+    translate: 0 10px;
+    transition: opacity var(--transition), visibility var(--transition), translate var(--transition), background var(--transition);
+}
+
+.back-to-top.is-visible {
+    opacity: 1;
+    visibility: visible;
+    translate: 0 0;
+}
+
+.back-to-top:hover {
+    background: var(--clr-accent);
+    border-color: var(--clr-accent);
+}
+
+.back-to-top:focus-visible {
+    outline: 2px solid var(--clr-text);
+    outline-offset: 3px;
+}
+
+@media print {
+    .back-to-top {
+        display: none;
    }
 }

@@ -354,3 +524,10 @@
 .site-footer__bottom-inner p {
    margin: 0;
 }
+
+/* Verbände-Zeile bleibt ab Tablet-Breite einzeilig (wrappt als Ganzes in die nächste Reihe) */
+@media (min-width: 768px) {
+    .site-footer__memberships {
+        white-space: nowrap;
+    }
+}
--- a/public/assets/icons/arrow-up.svg
+++ b/public/assets/icons/arrow-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>
--- a/public/assets/js/back-to-top.js
+++ b/public/assets/js/back-to-top.js
@@ -0,0 +1,40 @@
+/* Back-to-top: erscheint nach ~1,5 Viewporthöhen Scrolltiefe.
+   Sanftes Scrollen kommt aus dem CSS (scroll-behavior + reduced-motion-Kill-Switch);
+   JS übernimmt Sichtbarkeit und Fokus-Management. Ohne JS bleibt der Button hidden. */
+(function () {
+    'use strict';
+
+    var button = document.querySelector('.back-to-top');
+    var main = document.getElementById('main');
+    if (!button || !main) {
+        return;
+    }
+
+    button.hidden = false;
+
+    var ticking = false;
+
+    function update() {
+        button.classList.toggle('is-visible', window.scrollY > window.innerHeight * 1.5);
+        ticking = false;
+    }
+
+    window.addEventListener('scroll', function () {
+        if (!ticking) {
+            ticking = true;
+            window.requestAnimationFrame(update);
+        }
+    }, { passive: true });
+
+    update();
+    // Deep-Link-Einstiege (#anker): Sprung passiert teils vor dem Listener-Setup.
+    window.addEventListener('load', update);
+
+    button.addEventListener('click', function (event) {
+        event.preventDefault();
+        var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' });
+        // Fokus an den Seitenanfang mitnehmen (Tastatur/Screenreader).
+        main.focus({ preventScroll: true });
+    });
+})();
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/></svg>`