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>

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;
-    }
+/* --- 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);
+}
 
-    body.nav-open .site-header__actions {
-        visibility: hidden;
+.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;
+    }
+}