/* Leiste (Header) und Fuß – auf allen Seiten gleich: Startseite und Unterseiten. Markup: build.mjs (renderHeader, renderFooter). Tokens aus main.css. Verhalten mit JS: /scripts/site-header.js. */ /* ---------- Schwebende Leiste ---------- Eine abgerundete Leiste mit Abstand zum Rand, die beim Scrollen stehen bleibt. Breit liegt der Inhalt auf der Kante von .wrap (Leiste = Inhaltsbreite + Innenabstand + Rand). Der Innenabstand ist größer als der Abstand zum Fensterrand, damit die Marke nicht eng am Rand sitzt. Drei Lagen, alle ohne JS bedienbar: - schmal (unter 36rem): eine Zeile mit Marke und Menü-Schalter (
); die Links klappen als Karte unter der Leiste auf (.nav-panel, absolut – die Leiste wird dabei nicht höher); - mittel (36–56rem): zwei Zeilen, Marke oben, Links und Sprache darunter; - breit (ab 56rem): eine Zeile. Innenabstand und Marke wachsen ab 60rem (Rand von .wrap). --header-h beschreibt die Verdeckung (Unterkante der Leiste samt Abstand oben); site-header.js misst nach, die Werte hier sind Schätzwerte für Sprungmarken ohne JS. */ :root { --bar-top: 0.75rem; --bar-side: 0.625rem; --bar-pad: 1rem; --bar-pad-block: 0.75rem; --bar-radius: 16px; --bar-bg: color-mix(in srgb, var(--bg-2) 84%, transparent); --bar-line: color-mix(in srgb, var(--text) 13%, transparent); --bar-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.7); --panel-bg: var(--bg-2); /* Menü-Karte deckend: sie liegt über Text */ --wrap-pad: 1.25rem; /* = padding-inline von .wrap in main.css */ --brand-mark: 2.25rem; --brand-logo: 3rem; /* Bildhöhe; das SVG hat oben 15,8 % Leerraum (viewBox), siehe .brand-logo */ --flag-w: 1.25rem; /* Flaggen im Seitenverhältnis 5:3 */ --flag-h: 0.75rem; --header-h: 5.125rem; /* eine Zeile */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* power2.out */ } /* Sehr schmal (unter 360 px): Marke kompakter, damit der Menü-Schalter daneben passt; unter 320 px zusätzlich weniger Rand und Innenabstand. */ @media (max-width: 22.49rem) { :root { --brand-mark: 2rem; --brand-logo: 2.5rem; } } @media (max-width: 19.99rem) { :root { --bar-side: 0.375rem; --bar-pad: 0.625rem; } } @media (min-width: 36rem) { :root { --header-h: 7.875rem; } } @media (min-width: 56rem) { :root { --header-h: 5.125rem; } } @media (min-width: 60rem) { :root { --bar-top: 1rem; --bar-side: 1rem; --bar-pad: 1.75rem; --bar-pad-block: 0.875rem; --wrap-pad: 2.5rem; --brand-mark: 2.75rem; --brand-logo: 3.25rem; --header-h: 5.625rem; } } /* Sprungmarken und Fokus-Scrollen (Tab/Shift+Tab) landen unter der Leiste statt dahinter. Als scroll-padding am Wurzel-Scroller: gilt auch für Elemente ohne id. */ :root { scroll-padding-top: calc(var(--header-h) + 1rem); } .site-header { position: fixed; top: var(--bar-top); left: 0; right: 0; z-index: 30; width: calc(100% - 2 * var(--bar-side)); max-width: calc(var(--wrap) - 2 * var(--wrap-pad) + 2 * var(--bar-pad) + 2px); margin-inline: auto; border: 1px solid var(--bar-line); border-radius: var(--bar-radius); background: var(--bar-bg); box-shadow: var(--bar-shadow); backdrop-filter: saturate(140%) blur(8px); } /* Unschärfe hinter der Leiste: Ausnahme von css.md („kein Glassmorphism“), freigegeben 2026-10-01. Mit .site-header: höher gewichtet als .wrap aus main.css (Innenabstand und Breite der Leiste). */ .site-header .header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem var(--s-4); max-width: none; padding: var(--bar-pad-block) var(--bar-pad); } /* Geringe Höhe (Querformat, starker Zoom): nicht fixiert, damit Inhalt Platz hat – die Leiste scrollt mit (verdeckt nichts, --header-h 0). relative statt static: Bezug der Menü-Karte. */ @media (max-height: 30rem) { :root { --header-h: 0px; } .site-header { position: relative; top: 0; margin-top: var(--bar-top); } } /* Ohne JS (auch nach einem Modulfehler: html ohne .js) schließt nichts die Menü-Karte nach einem Sprung. Schmal scrollt die Leiste deshalb mit: Die offene Karte bleibt oben im Dokument, das Sprungziel liegt frei. */ @media (max-width: 35.99rem) and (min-height: 30.01rem) { html:not(.js) .site-header { position: absolute; } } /* Marke: der conyx-Gecko neben der Wortmarke. Das Logo-SVG hat über „conyx“ 15,8 % Leerraum: Die negative Marge zieht ihn aus dem Layout, die sichtbare Marke sitzt mittig in der Leiste. nur für die dunkle Wortmarke im hellen Kontrastmodus – ohne eigene Box. */ .brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; } :is(.brand, .footer-logo) picture { display: contents; } .brand-mark { width: var(--brand-mark); height: var(--brand-mark); } .brand-logo { width: auto; height: var(--brand-logo); margin-top: calc(var(--brand-logo) * -0.158); } /* Menü-Schalter (nur schmal): ohne Pfeil, als Pill, Klickfläche 44 px. Das Symbol wird beim Öffnen zum Kreuz (nur transform/opacity). „Menü“ ab 26rem sichtbar, darunter nur für Hilfstechnik (sonst passt die Marke nicht daneben). */ .nav-menu { margin-left: auto; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 44px; min-height: 44px; padding-inline: 0.75rem; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); cursor: pointer; list-style: none; } .nav-toggle::-webkit-details-marker { display: none; } .nav-toggle:hover, .nav-menu[open] .nav-toggle { border-color: var(--text-2); } .nav-toggle-icon { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .toggle-top, .toggle-mid, .toggle-bottom { transition: transform 0.2s var(--ease-out), opacity 0.15s linear; } .toggle-top { transform-origin: 12px 7px; } .toggle-bottom { transform-origin: 12px 17px; } .nav-menu[open] .toggle-top { transform: translateY(5px) rotate(45deg); } .nav-menu[open] .toggle-mid { opacity: 0; } .nav-menu[open] .toggle-bottom { transform: translateY(-5px) rotate(-45deg); } @media (max-width: 25.99rem) { .nav-toggle { padding-inline: 0; } .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* Menü-Karte (schmal): nur bei offenem Menü, absolut unter der Leiste in ihrer Breite – die Leiste und damit --header-h bleiben gleich. Mit JS schließt sie nach einem Sprung, mit Esc, wenn der Fokus die Leiste verlässt, und bei Tipp daneben (site-header.js). Bewusst an die Lage im Markup gebunden (.nav-menu[open] + .nav-panel): Der Inhalt eines geschlossenen
lässt sich breit nicht ohne JS zeigen. Links untereinander, „Kontakt“ als breite Lime-Aktion, darunter die Sprache. */ .nav-panel { display: none; position: absolute; top: calc(100% + 0.5rem); left: -1px; right: -1px; flex-direction: column; gap: var(--s-3); padding: var(--s-2) var(--bar-pad) var(--bar-pad); border: 1px solid var(--bar-line); border-radius: var(--bar-radius); background: var(--panel-bg); box-shadow: var(--bar-shadow); } .nav-menu[open] + .nav-panel { display: flex; animation: nav-panel-in 0.2s var(--ease-out); } @keyframes nav-panel-in { from { opacity: 0; transform: translateY(-0.5rem); } } .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; } .nav-link { display: inline-flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--text); } .nav-link:hover { color: var(--lime); } .site-nav .nav-cta { justify-content: center; margin-top: var(--s-3); border-bottom: 0; } .site-nav .lang-menu { margin: var(--s-2) 0 0 -0.5rem; } /* Flagge in der Flucht der Links */ /* Mittel: zwei Zeilen – Marke oben, darunter die Links über die volle Breite, „Kontakt“ als Aktion rechts, daneben die Sprache. Schalter und Karte entfallen (die Karte hat keine eigene Box, ihr Inhalt steht direkt in der Leiste). */ @media (min-width: 36rem) { .nav-menu { display: none; } .nav-panel, .nav-menu[open] + .nav-panel { display: contents; } .site-nav { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 0 var(--s-4); } .nav-link { min-height: 44px; border-bottom: 0; } .site-nav .nav-cta { margin: 0 0 0 auto; } .site-nav .lang-menu { margin: 0 -0.5rem 0 0; } /* der Pfeil endet auf der Innenkante */ } @media (min-width: 40rem) { .site-nav { column-gap: var(--s-5); } } /* Breit: eine Zeile – Marke links, Links, Aktion und Sprache rechts. */ @media (min-width: 56rem) { .site-nav { flex: 0 1 auto; column-gap: var(--s-4); margin-left: auto; } } @media (min-width: 72rem) { .site-nav { column-gap: var(--s-5); } } /* Kurze Links (KI, im Fuß AGB): Klickfläche mindestens 44 px breit, ohne Abstand und Flucht zu ändern – die Fläche reicht mittig in die Lücken (Lücke ≥ 16 px, Überstand ≤ 14 px je Seite). */ .nav-link, .footer-legal-link { position: relative; } :is(.nav-link, .footer-legal-link)::after { content: ""; position: absolute; inset: 0 50%; min-width: 44px; transform: translateX(-50%); } /* Aktion „Kontakt“: Lime-Fläche, die Klickfläche bleibt 44 px hoch, die Fläche selbst 36 px. */ .nav-cta { position: relative; isolation: isolate; padding-inline: 0.95rem; color: var(--on-lime); font-weight: 700; } .nav-cta::before { content: ""; position: absolute; inset: 0.25rem 0; z-index: -1; border-radius: 999px; background: var(--lime); transition: background-color 0.2s ease; } .nav-link.nav-cta:hover { color: var(--on-lime); } .nav-cta:hover::before { background: var(--lime-2); } /* Aktiver Abschnitt (Startseite, home-main.js initNavSpy): Lime wie beim Überfahren; „Kontakt“ bekommt einen Ring. */ .site-nav .nav-link.is-active:not(.nav-cta) { color: var(--lime); } .nav-cta.is-active::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--lime); } /* Sprache als Auswahlliste (
; Rückmeldung Sven 2026-09-25: keine Kürzel nebeneinander). Der Schalter zeigt Flagge, Kürzel und Pfeil (44 px Klickfläche), die Liste nennt die Sprachen ausgeschrieben – ohne Versalien, damit Hilfstechnik „Deutsch“ statt „DEUTSCH“ vorliest. Die aktuelle Sprache trägt aria-current: heller, mit Lime-Häkchen (nicht nur über Farbe). Der Schalter trägt beide Flaggen, sichtbar ist die zu html[lang]. Die Einträge sind Schalter (