+ Vorschau der Navigation
+ Dieser Bereich dient nur zum Testen der Navbar.
+
+
+
+
+
diff --git a/src/components/navigationsbar/navigation.js b/src/components/navigationsbar/navigation.js
new file mode 100644
index 0000000..eaf7d71
--- /dev/null
+++ b/src/components/navigationsbar/navigation.js
@@ -0,0 +1,51 @@
+(function () {
+ var toggle = document.querySelector(".navbar__toggle");
+ var nav = document.querySelector(".navbar__nav");
+ var dropdownToggle = document.querySelector(".navbar__dropdown-toggle");
+ var dropdown = document.querySelector("#dropdown-spektrum");
+
+ if (!toggle || !nav || !dropdownToggle || !dropdown) return;
+
+ // Mobiles Menü öffnen/schließen
+ toggle.addEventListener("click", function () {
+ var isOpen = nav.classList.toggle("is-open");
+ toggle.setAttribute("aria-expanded", String(isOpen));
+ toggle.setAttribute(
+ "aria-label",
+ isOpen ? "Menü schließen" : "Menü öffnen",
+ );
+ });
+
+ // Dropdown "Triathlon Spektrum" per Klick öffnen/schließen
+ dropdownToggle.addEventListener("click", function () {
+ var isOpen = dropdown.classList.toggle("is-open");
+ dropdownToggle.setAttribute("aria-expanded", String(isOpen));
+ });
+
+ // Escape schließt Dropdown/Menü, Fokus geht zurück auf den Auslöser
+ document.addEventListener("keydown", function (e) {
+ if (e.key !== "Escape") return;
+
+ if (dropdown.classList.contains("is-open")) {
+ dropdown.classList.remove("is-open");
+ dropdownToggle.setAttribute("aria-expanded", "false");
+ dropdownToggle.focus();
+ }
+ if (nav.classList.contains("is-open")) {
+ nav.classList.remove("is-open");
+ toggle.setAttribute("aria-expanded", "false");
+ toggle.focus();
+ }
+ });
+
+ // Klick außerhalb schließt das Dropdown
+ document.addEventListener("click", function (e) {
+ if (
+ !dropdown.contains(e.target) &&
+ !dropdownToggle.contains(e.target)
+ ) {
+ dropdown.classList.remove("is-open");
+ dropdownToggle.setAttribute("aria-expanded", "false");
+ }
+ });
+})();
diff --git a/src/styles/navigation.css b/src/styles/navigation.css
new file mode 100644
index 0000000..e249cf0
--- /dev/null
+++ b/src/styles/navigation.css
@@ -0,0 +1,223 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600&display=swap");
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ padding-top: 72px; /* Platz für die fixierte Navbar */
+ background-color: #0d0d1a;
+ font-family: "Inter", system-ui, sans-serif;
+}
+
+/* ---------- Kriterium 1: durchgehend fixiert am oberen Bildschirmrand ---------- */
+.navbar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 72px;
+ padding: 0 2rem;
+ background-color: #0d0d1a;
+ border-bottom: 1px solid #1a1a2e;
+}
+
+/* ---------- Logo ---------- */
+.navbar__logo {
+ display: flex;
+ flex-direction: column;
+ line-height: 1.2;
+ color: #fff;
+ text-decoration: none;
+}
+
+.navbar__logo-title {
+ font-family: "Playfair Display", serif;
+ font-weight: 700;
+ font-size: 1.1rem;
+ letter-spacing: 0.05em;
+}
+
+.navbar__logo-tagline {
+ font-size: 0.7rem;
+ color: #94a3b8;
+}
+
+/* ---------- Menü ---------- */
+.navbar__menu {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.navbar__link {
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+ background: none;
+ border: none;
+ color: #f8fafc;
+ text-decoration: none;
+ font-size: 0.95rem;
+ font-family: inherit;
+ cursor: pointer;
+ padding: 0.5rem 0.25rem;
+}
+
+.navbar__link:hover {
+ color: #10b981;
+}
+
+.navbar__link--login {
+ padding: 0.5rem 1.25rem;
+ border: 1px solid #10b981;
+ border-radius: 999px;
+ color: #10b981;
+}
+
+.navbar__link--login:hover {
+ background: #10b981;
+ color: #0d0d1a;
+}
+
+/* ---------- Dropdown ---------- */
+.navbar__item--has-dropdown {
+ position: relative;
+}
+
+.navbar__chevron {
+ width: 10px;
+ height: 6px;
+ transition: transform 0.15s ease;
+}
+
+.navbar__dropdown-toggle[aria-expanded="true"] .navbar__chevron {
+ transform: rotate(180deg);
+}
+
+.navbar__dropdown {
+ display: none;
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ left: 0;
+ min-width: 180px;
+ background: #1a1a2e;
+ border: 1px solid #262640;
+ border-radius: 8px;
+ list-style: none;
+ margin: 0;
+ padding: 0.5rem;
+}
+
+.navbar__dropdown.is-open {
+ display: block;
+}
+
+.navbar__dropdown-link {
+ display: block;
+ padding: 0.5rem 0.75rem;
+ color: #f8fafc;
+ text-decoration: none;
+ font-size: 0.9rem;
+ border-radius: 4px;
+}
+
+.navbar__dropdown-link:hover {
+ background: #0d0d1a;
+ color: #10b981;
+}
+
+/* ---------- Kriterium 2: barrierefreie Tastatursteuerung ---------- */
+.skip-link {
+ position: absolute;
+ top: -40px;
+ left: 0;
+ background: #10b981;
+ color: #0d0d1a;
+ font-weight: 600;
+ padding: 0.75rem 1rem;
+ z-index: 1100;
+ transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+ top: 0;
+}
+
+.navbar a:focus-visible,
+.navbar button:focus-visible {
+ outline: 3px solid #10b981;
+ outline-offset: 2px;
+ border-radius: 4px;
+}
+
+/* ---------- Mobile Toggle ---------- */
+.navbar__toggle {
+ display: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+}
+
+.navbar__toggle-icon,
+.navbar__toggle-icon::before,
+.navbar__toggle-icon::after {
+ display: block;
+ width: 24px;
+ height: 2px;
+ background: #fff;
+ position: relative;
+}
+
+.navbar__toggle-icon::before,
+.navbar__toggle-icon::after {
+ content: "";
+ position: absolute;
+}
+.navbar__toggle-icon::before {
+ top: -8px;
+}
+.navbar__toggle-icon::after {
+ top: 8px;
+}
+
+@media (max-width: 860px) {
+ .navbar__toggle {
+ display: block;
+ }
+
+ .navbar__nav {
+ position: absolute;
+ top: 72px;
+ left: 0;
+ right: 0;
+ background: #0d0d1a;
+ border-bottom: 1px solid #1a1a2e;
+ display: none;
+ }
+
+ .navbar__nav.is-open {
+ display: block;
+ }
+
+ .navbar__menu {
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 1rem 2rem;
+ gap: 1rem;
+ }
+
+ .navbar__dropdown {
+ position: static;
+ margin-top: 0.5rem;
+ }
+}