/* * Nav — ported from the standalone mockup (home-mockup.BACKUP-liked-version.html), fixed * frosted-glass bar shown at all times (no scroll-position switching). Reuses the same * --hero-* token pattern as hero.css/cta-band.css, self-contained since .nn-nav isn't a * descendant of either of those sections. * * The logo is Custom HTML (two tags, light/dark swapped via media query — see * .nn-logo-img below) rather than core/site-title: since the Hero pattern already has its * own

, core/site-title's default h1 output would create a second h1 on the front page, * which the site-title block doesn't avoid on its own. Files: assets/images/logo-*.png, * sourced from nonoise-mockups/logo-*.png (not in git, local reference only). * * Links reuse the real core/navigation block (ref 21, the DB-managed Navigation entity — * see CLAUDE.md Abschnitt 5) styled to match, instead of hardcoding tags — keeps the * nav editable in the Site Editor like the rest of the project's navigation. Mobile: WP's * own responsive hamburger/overlay behaviour is left as-is (the mockup itself never solved * mobile nav, it just hid the links below 720px with nothing to replace them) — only the * toggle icon colour is themed here. */ .nn-nav, .nn-nav *, .nn-nav *::before, .nn-nav *::after { box-sizing: border-box; } .nn-nav { /* raw palette values for both themes, always available regardless of which is active — see the "Light/Dark-Konvention" block below for why light is the unconditional default and dark is the guarded/explicit variant */ --ground: #0a1410; --ink: #e7e9ec; --ink-muted: #b0b5bf; --line: #22362c; --jade-light: #b7e5ba; --paper: #f7f9f7; --ink-on-paper: #12211a; --ink-on-paper-muted: #5c6d64; --line-light: #dfe8e2; --jade-dark: #1a5140; --hero-bg: var(--paper); --hero-ink: var(--ink-on-paper); --hero-ink-muted: var(--ink-on-paper-muted); --hero-line: var(--line-light); --hero-accent: var(--jade-dark); --hero-text-shadow: rgba(255, 255, 255, 0.5); position: fixed; top: 0; left: 0; right: 0; /* war 20 — die klebende Ankernavigation auf den Leistungsseiten (.anchors in cro.css, seo-geo.css usw.) sitzt bei z-index:30, sobald sie einrastet. Die Haupt-Nav lag damit darunter, wodurch ihr aufgeklapptes "Leistungen"-Untermenü hinter der Ankerleiste verschwand statt darüber zu liegen. Die Haupt-Nav (samt Untermenü und mobilem Overlay, beides Nachfahren in derselben Stacking-Context) muss immer über jeder Seiten-eigenen Sticky-Leiste liegen. */ z-index: 40; display: flex; align-items: center; justify-content: space-between; /* war 1.75rem / clamp(1.25rem,3vw,1.75rem) oben/unten — auf Wunsch schlanker, damit die Nav insgesamt weniger Höhe frisst. Seitliche Abstände unverändert. */ padding: 1.1rem clamp(1.5rem, 5vw, 4rem) clamp(0.85rem, 2.2vw, 1.1rem); text-shadow: 0 1px 12px var(--hero-text-shadow); border-bottom: 1px solid var(--hero-line); /* Light: reines Glas, keine Farbschicht hinter dem Blur (war color-mix mit --paper/ #f7f9f7, gab der Nav einen leicht cremigen Weißstich — auf Wunsch entfernt). Der dunkle Tönungs-Layer bleibt bewusst bestehen, siehe Dark-Override unten — nur die Light-Variante war als störend gemeldet. .nn-nav--solid (Ankerleisten-Einrast-Zustand auf den Leistungsseiten) ist davon bewusst unberührt, nutzt weiterhin --hero-bg direkt. */ background: transparent; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); margin: 0; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nn-nav { --hero-bg: var(--ground); --hero-ink: var(--ink); --hero-ink-muted: var(--ink-muted); --hero-line: var(--line); --hero-accent: #288760; --hero-text-shadow: rgba(0, 0, 0, 0.45); background: color-mix(in srgb, var(--hero-bg) 10%, transparent); } } html[data-theme="dark"] .nn-nav { --hero-bg: var(--ground); --hero-ink: var(--ink); --hero-ink-muted: var(--ink-muted); --hero-line: var(--line); --hero-accent: #288760; --hero-text-shadow: rgba(0, 0, 0, 0.45); background: color-mix(in srgb, var(--hero-bg) 10%, transparent); } /* * ============================================================================ * Light/Dark-Konvention — jedes künftige themable Pattern sollte diesem Muster folgen: * * .nn-x { --token: ; ... } (Basis, ungeschützt) * @media (prefers-color-scheme: dark) { * html:not([data-theme="light"]) .nn-x { --token: ; } * } * html[data-theme="dark"] .nn-x { --token: ; } * * Immer Hell als unbedingte Basis, Dunkel als einzige Variante (system- oder * explizit-gesteuert) — dadurch reicht IMMER nur eine Bewachung (":not([data-theme=light])"), * nie zwei sich widersprechende. `[data-theme]` sitzt auf , gesetzt von * assets/js/theme-switcher.js (Klick) + der Inline-Bootstrap in functions.php (verhindert * Flackern beim ersten Laden). Ohne gespeicherte Präferenz bleibt das Attribut komplett * weg, dann entscheidet ausschließlich prefers-color-scheme. * ============================================================================ */ /* Solide, nicht-transparente Nav — von assets/js/seo-geo.js gesetzt, sobald die klebende Ankernavigation einer Leistungsseite (seo-geo-hero.php) unter der Nav einrastet. Der normale 10%-Glaslook ist fürs Bild/Farbfeld des Heros gedacht; sobald direkt darunter noch ein zweiter geblurrter Streifen (die Ankerleiste) hängt, wirken zwei übereinander liegende Transparenz-Ebenen unruhig. Deckend dahinter bleibt die Ankerleiste lesbar. Selektor mit `html`-Präfix (statt nur zwei Klassen): die beiden Dark-Mode-Regeln oben (html:not([data-theme="light"]) .nn-nav / html[data-theme="dark"] .nn-nav) sind mit Spezifität (0,2,1) sonst spezifischer als .nn-nav.nn-nav--solid (0,2,0) und gewinnen im Dark Mode immer — die Nav blieb dort dauerhaft im 10%-Glaslook hängen, komplett unabhängig vom eingerastet-Zustand der Ankerleiste. Mit `html` zieht die Spezifität gleich (0,2,1), die Regel-Reihenfolge (diese Regel steht im File nach den Dark-Blöcken) entscheidet dann zugunsten von .nn-nav--solid. */ html .nn-nav.nn-nav--solid { background: var(--hero-bg); } .nn-logo { display: inline-flex; align-items: center; white-space: nowrap; } /* two raster logo files (logo-white.png / logo-dark.png, see nonoise-mockups) swapped via the same light-default/dark-guarded-and-explicit pattern as --hero-bg above, since the nav bar itself flips between a near-white and a near-black background. */ .nn-logo-img { height: 33px; width: auto; display: block; } .nn-logo-img--light { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nn-logo-img--light { display: block; } html:not([data-theme="light"]) .nn-logo-img--dark { display: none; } } html[data-theme="dark"] .nn-logo-img--light { display: block; } html[data-theme="dark"] .nn-logo-img--dark { display: none; } /* icon-only mark (favicon-white-square.png / favicon-dark-square.png) — shown only below the mobile breakpoint (see .nn-nav-mobile-bp comment further down), replacing the full wordmark so the compact mobile header has room for the hamburger + envelope button. display:none by default on all viewports; the mobile media query below both reveals the correct one of this pair (light/dark, same guarded convention as .nn-logo-img above) and hides the wordmark pair instead. */ .nn-logo-icon { /* war 32px, dann 40px, dann 44px, dann 50px (zwei parallele Sessions haben das Logo unabhängig voneinander vergrößert — 50px aus der jeweils letzten Anpassung übernommen, damit Header und aufgeklapptes Mobile-Menü gleich groß bleiben, siehe .nn-nav-mobile-logo .nn-logo-icon unten). Beide Varianten nutzen jetzt dieselbe quadratisch gepadfelte Grafik (favicon-dark-square.png / favicon-white-square.png), sind also von Haus aus gleich groß in Light und Dark Mode. */ height: 50px; width: 50px; /* hidden on every viewport by default; the mobile breakpoint block near the end of this file is the only place either variant is ever revealed (with its own light/dark swap nested inside), so no light/dark distinction is needed at this base rule. */ display: none; } /* right-hand cluster (nav links, CTA button) — grouped into one flex container so .nn-nav's own space-between only ever has two things to split (logo left, this group right), instead of unevenly spreading three+ independent flex children. The theme toggle used to live in here too; it's now in the footer (see footer.css) instead. */ .nn-nav-right { display: flex; align-items: center; /* war clamp(1.25rem, 3vw, 2rem) — auf Wunsch vergrößert, damit Menü und Kontakt-Button sichtbar getrennte Gruppen bilden statt eng aneinanderzurücken. Gilt gleichermaßen für den Abstand vor UND nach dem neuen .nn-nav-sep-Trenner unten (einziger Gap-Wert für alle drei Flex-Kinder: Menü, Trenner, Button). */ gap: clamp(1.75rem, 4vw, 2.75rem); } /* Trennzeichen zwischen Menü und Kontakt-Button (2026-08-29) — rein dekorativ (aria-hidden), gedämpfter Ton statt voller Textfarbe, damit es als Trenner statt als drittes Wort wirkt. Nur auf Desktop: unterhalb des Mobile-Breakpoints steht hier nur noch der Hamburger neben dem Icon-only-Kontakt-Button, ein Pipe dazwischen wäre bedeutungslos (siehe Ausblendung im Mobile-Header-Block weiter unten). */ .nn-nav-sep { color: var(--hero-ink-muted); font-size: 1.2rem; line-height: 1; font-weight: 400; } /* solid button, deliberately FIXED jade (#288760) in both themes rather than the theme-swapped --hero-accent — same reasoning as Leistungen's hover-arrow (see CLAUDE.md): a solid coloured background with fixed dark text needs a colour that stays readable against itself, not one tuned to alternate between a dark and a light background. */ .nn-nav-cta { display: inline-flex; align-items: center; /* Abstand zwischen Text und Icon — vorher kein Gap nötig, da das Icon bis 2026-08-28 nur im mobilen Icon-only-Zustand sichtbar war (kein zweites sichtbares Kind). Jetzt, wo das Icon auch auf Desktop neben dem Text steht, braucht es einen Abstand. */ gap: 0.5rem; white-space: nowrap; background: #288760; color: #06110c; /* gleiche Größe wie die Menüpunkte daneben (.nn-nav .nn-links, 1.1rem) — bewusst derselbe Wert, damit Button und Menü in einer Zeile optisch gleichwertig wirken. */ font-size: 1.1rem; font-weight: 700; padding: 0.6rem 1.35rem; border-radius: 999px; text-decoration: none; text-shadow: none; /*