/* ============================================ Impact Up – Gemeinsame Navigation (ALLE 44 Seiten) EINZIGE Quelle für Nav-Styles + Design-Tokens (:root). - Hauptseiten laden sie über @import in style.css - session-werkstatt/*.html laden ../nav.css direkt Markup-Referenz:

(identisch in allen Seiten, Labels pro Sprache = Stand der index.*.html). nav.js baut daraus Hamburger + Mobile-Drawer. ============================================ */ :root { --gold: #C9A961; /* Kontrast-Geschwister des Golds (Welle 1, 05.08.2026) – gleicher Farbton (H 41.5°, S 49%), nur die Helligkeit verschoben. Sie gelten fuer KLEINE Gold-Texte (Eyebrow, Weiterlesen, Inline-Links); Linien, Ziffern, Kanten, Buttons und der Hero bleiben --gold. --gold-ink L 30.5% -> 5.40:1 auf Pergament #F4ECD8, 6.15:1 auf #FFFBF0 --gold-bright L 67% -> 5.28:1 auf Moos #2D4A2B, 7.23:1 auf #1F3320 */ --gold-ink: #745C28; --gold-bright: #D4BB82; /* Dunkelgold: Gold, abgedunkelt fuer helle Flaechen, wo reines Gold zu blass waere. Stand in DESIGN.md, fehlte als Token - und wurde bereits benutzt (Kartenziffern), fiel dort still auf inherit zurueck. */ --gold-deep: #A9843D; --moss: #2D4A2B; /* Die tiefste Moos-Stufe hiess frueher --moss-deep; unter diesem Namen verstehen die Session-Builder-Seiten aber #2D4A2B. Kanonisch heisst sie jetzt --moss-deepest (Alias in Welle 2 entfernt, alle Nutzungen umgestellt). */ --moss-deepest: #1F3320; --stone: #B8855E; --parchment: #F4ECD8; --ink: #1F1A14; /* Weiche Tinte: der Body-Ton fuer lange Textstrecken auf hellem Grund (10.6:1 auf Pergament). Stand als Farbe in DESIGN.md, fehlte hier aber als Token - alle var(--ink-soft) fielen deshalb still auf inherit zurueck. */ --ink-soft: #3A332A; --purple: #4A2B5C; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --maxw: 1040px; } /* ============================================ Fokus + Skip-Link (Welle 1) Liegt in der EINEN Nav-Quelle, damit auch die session-werkstatt-Seiten beides bekommen. ============================================ */ :focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; } /* Auf den dunklen Flaechen (Nav, Drawer) traegt das helle Gold besser */ .nav :focus-visible, .nav__drawer :focus-visible, .nav__toggle:focus-visible { outline-color: var(--gold); } /* Sprung zum Inhalt: unsichtbar, bis er den Fokus bekommt */ .skip-link { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; z-index: 2000; } .skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; overflow: visible; padding: 11px 20px; background: var(--gold); color: var(--ink); border-radius: 3px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; line-height: 1.2; text-decoration: none; } /* .nav ist direktes -Kind (Mai 2026) -> fixed greift seitenweit, nicht nur solange der Hero im Viewport ist. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; gap: 32px; margin: 0; width: 100%; max-width: none; padding: 12px 32px; background: rgba(21, 39, 26, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201, 169, 97, 0.32); transition: background .3s ease, border-color .3s ease, padding .3s ease; font-family: var(--sans); font-size: 17px; line-height: 1.6; } /* Index lädt main.js → JS setzt .nav--transparent, solange das Hero-Lockup noch im Bild ist; beim Wegscrollen fällt die Klasse weg und die Nav wird wieder solide (mit Wortmarke + Goldlinie). Default = solide, damit die Nav auf den JS-losen Unterseiten überall lesbar bleibt. */ .nav--transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .nav__left { display: flex; align-items: center; gap: 28px; } /* Wortmarke: im Default sichtbar (= solide Nav). Über dem Hero (--transparent) eingeklappt, weil dort das große Lockup steht. */ .nav__wordmark { text-decoration: none; display: flex; align-items: center; gap: 9px; flex: none; white-space: nowrap; max-width: 320px; opacity: 1; overflow: hidden; transition: max-width .4s ease, opacity .35s ease, margin-right .4s ease; margin-right: 4px; } .nav--transparent .nav__wordmark { max-width: 0; opacity: 0; margin-right: 0; } .nav__wordmark-mark { width: 26px; height: auto; flex: none; display: block; } .nav__wordmark-name { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: -0.01em; color: var(--parchment); } .nav__wordmark-name em { font-style: normal; color: var(--gold); } .nav__links--right { justify-content: flex-end; width: auto; } .nav__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 14px; letter-spacing: 0.5px; } .nav__links a { color: var(--parchment); opacity: 0.75; text-decoration: none; transition: opacity .2s, color .2s; } .nav__links a:hover { opacity: 1; color: var(--gold); } /* Active-Highlight (Scrollspy bzw. aktuelle Seite) */ .nav__links a.is-active { opacity: 1; color: var(--gold); } /* Dropdown im Menu */ .nav__item--has-dropdown { position: relative; } /* Hover-Brücke: füllt den schmalen Spalt zwischen Trigger und Menü, damit das Dropdown beim Runterfahren zur Liste nicht zuklappt. */ .nav__item--has-dropdown::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 14px; display: none; } .nav__item--has-dropdown:hover::before, .nav__item--has-dropdown:focus-within::before { display: block; } .nav__dropdown { position: absolute; top: 100%; left: -16px; list-style: none; margin: 0; padding: 8px 0; min-width: 200px; background: rgba(31, 51, 32, 0.96); backdrop-filter: blur(10px); border: 1px solid rgba(201, 169, 97, 0.3); border-top: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 1001; } .nav__item--has-dropdown:hover .nav__dropdown, .nav__item--has-dropdown:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown li { display: block; } .nav__dropdown a { display: block; padding: 10px 18px; text-decoration: none; color: var(--parchment); font-size: 13px; letter-spacing: 0.5px; opacity: 0.85; transition: color .2s, opacity .2s, background .2s; } .nav__dropdown a:hover { color: var(--gold); opacity: 1; background: rgba(201, 169, 97, 0.08); } .nav__item--has-dropdown > a::after { content: ' ▾'; font-size: 9px; opacity: 0.7; } /* Sprachumschalter in der Nav */ .nav__lang { margin-left: 14px; } .nav__lang > a { display: inline-block; padding: 3px 9px; border: 1px solid currentColor; border-radius: 3px; font-size: 0.72rem; letter-spacing: 1.4px; font-weight: 500; opacity: 0.7; transition: opacity 0.2s ease; } .nav__lang > a:hover { opacity: 1; } /* Sprach-Dropdown: schmales Panel, rechtsbündig unter dem Kürzel */ .nav__lang .nav__dropdown { min-width: 0; left: auto; right: -9px; } .nav__lang .nav__dropdown a { letter-spacing: 1.4px; font-size: 0.72rem; } /* ============================================ MOBILE-NAV (Hamburger + Drawer) nav.js baut Button + Drawer auf allen Seiten; unabhängig von main.js. Drawer = Overlay aus . ============================================ */ /* Trefferflaeche 44x44 (WCAG 2.5.8), Optik unveraendert: die 2px/6px, die die Box gegenueber der alten 42x38 waechst, holen die negativen Margins wieder heraus – Nav-Hoehe und Balkenbreite (26px) bleiben identisch. */ .nav__toggle { box-sizing: border-box; display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin: -3px -1px; padding: 9px; background: none; border: none; cursor: pointer; flex: none; } .nav__toggle span { display: block; height: 2px; width: 100%; background: var(--parchment); border-radius: 2px; } .nav__drawer { position: fixed; inset: 0; z-index: 1200; background: rgba(21, 39, 26, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 78px 32px 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .nav__drawer.open { opacity: 1; visibility: visible; transform: none; } .nav__drawer a { display: block; color: var(--parchment); font-family: var(--serif); font-size: 22px; line-height: 1.2; padding: 11px 0; border-bottom: 1px solid rgba(201, 169, 97, 0.15); opacity: 0.92; text-decoration: none; transition: color .2s ease; } .nav__drawer a:hover { color: var(--gold); } .nav__drawer a.sub { font-size: 16px; padding-left: 18px; opacity: 0.72; } /* Zugeklappte Dropdown-Gruppen im Drawer: Text navigiert, Pfeil klappt aus */ .nav__drawer .drawer-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(201, 169, 97, 0.15); } .nav__drawer .drawer-row a { flex: 1; border-bottom: none; } .nav__drawer .drawer-toggle { background: none; border: none; color: var(--gold); font-size: 20px; padding: 8px 6px 8px 22px; cursor: pointer; line-height: 1; } .nav__drawer .drawer-toggle span { display: inline-block; transition: transform .25s ease; } .nav__drawer .drawer-group.open .drawer-toggle span { transform: rotate(180deg); } .nav__drawer .drawer-subs { display: none; border-bottom: 1px solid rgba(201, 169, 97, 0.15); padding-bottom: 6px; } .nav__drawer .drawer-group.open .drawer-subs { display: block; } .nav__drawer .drawer-subs a { border-bottom: none; padding: 8px 0 8px 18px; } .nav__drawer a.lang { margin-top: 22px; border: 1px solid var(--gold); border-bottom: 1px solid var(--gold); width: max-content; padding: 6px 16px; font-size: 14px; letter-spacing: 1.6px; } /* Trefferflaeche >=44x44 (WCAG 2.5.8) ohne Optik-Aenderung: Polster nach aussen, negative Margins holen es zurueck, top/right sind um genau dieses Polster vorgeschoben – das Kreuz steht weiter exakt auf 20px/24px. */ .nav__drawer-close { position: absolute; top: 26px; right: 38px; margin: -6px -14px; padding: 6px 14px; background: none; border: none; color: var(--parchment); font-size: 32px; line-height: 1; cursor: pointer; } /* Kontakt am Drawer-Fuss: dieselbe Gold-Pill wie .nav__cta auf dem Desktop. nav.js haengt sie als eigenstaendiges Element hinter die Menuepunkte. */ .nav__drawer a.drawer-cta { display: block; width: max-content; max-width: 100%; margin: 26px 0 0; padding: 12px 22px; background: var(--gold); color: var(--ink); border: none; border-bottom: none; border-radius: 3px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.5px; line-height: 1.2; opacity: 1; transition: background .2s ease, color .2s ease; } .nav__drawer a.drawer-cta:hover, .nav__drawer a.drawer-cta:focus-visible { background: var(--ink); color: var(--gold); } @media (min-width: 901px) { .nav__drawer { display: none; } } @media (max-width: 900px) { .nav__toggle { display: flex; } .nav__links { display: none; } } /* Wer Bewegung abbestellt hat, bekommt die Nav ohne Uebergaenge. Muster wie in stefan.html; gilt auch fuer die session-werkstatt-Seiten, die nur nav.css laden. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav, .nav__wordmark, .nav__links a, .nav__dropdown, .nav__lang > a, .nav__drawer, .nav__drawer a, .nav__drawer .drawer-toggle span { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .nav__drawer { transform: none; } } /* Nav taucht in Ausdrucken/PDF-Exports nicht auf */ @media print { .nav, .nav__toggle, .nav__drawer { display: none !important; } } /* Kontakt als kleiner Gold-Pill oben rechts ------------------- Fuehrt auf dieselbe Seite wie "Kooperiere mit uns" und traegt deshalb dasselbe Gold. Navklein, damit die Zeile ruhig bleibt. Liegt hier in der EINEN Nav-Quelle, damit auch die Session-Builder-Seiten (laden nur nav.css) den Pill bekommen. */ .nav .nav__links a.nav__cta { display: inline-block; padding: 7px 14px; margin: -7px 0; /* Pill vergroessert die Nav-Hoehe nicht */ background: var(--gold); color: #1F1A14; opacity: 1; border-radius: 3px; font-weight: 600; letter-spacing: 0.5px; line-height: 1; transition: background .2s ease, color .2s ease; } .nav .nav__links a.nav__cta:hover, .nav .nav__links a.nav__cta:focus-visible { /* dasselbe Hover wie der Hero-Button (.btn--primary:hover): goldene Schrift auf dunklem Grund */ background: var(--ink); color: var(--gold); opacity: 1; } /* Zwischen Hamburger-Grenze (900px) und breitem Desktop wurde die Nav schon vorher zweizeilig; mit dem Pill etwas frueher. In diesem Band ruecken Abstaende und Schriftgrad zusammen, damit die Zeile eine Zeile bleibt. */ @media (min-width: 901px) and (max-width: 1140px) { .nav { gap: 18px; padding-left: 20px; padding-right: 20px; } .nav__left { gap: 16px; } .nav__links { gap: 16px; font-size: 13px; } .nav__wordmark-name { font-size: 17px; } .nav .nav__links a.nav__cta { padding: 6px 11px; } .nav__lang { margin-left: 6px; } }