/* ========================================================================== BAUTEIL · MOBIL-MENUE v1.1 · Stand 2026-09-21 · Schalter gegen fremde .knopf-Regeln abgesichert (v1.0 · 2026-09-04) Das Menue fuer schmale Schirme: Blatt unter der Kopfleiste, Fokus-Falle, Scroll-Sperre ohne Ruck, Escape und Anker-Klick schliessen. ZUSAMMENSPIEL MIT DER GRUNDSCHICHT (Skills/design-repertoire/references/grundschicht.css) Das Blatt traegt ZUSAETZLICH die Klasse `menue`, der Schalter die Klasse `knopf`. Damit greifen die Grundschicht-Regeln automatisch und werden hier NICHT wiederholt: · Beruehrschutz — `:hover` nur in @media (hover:hover) and (pointer:fine) · Druckzustand — `.knopf:active { transform: scale(.97) }` · prefers-reduced-motion / -transparency / -contrast fuer `.menue` Diese Datei ergaenzt nur, was die Grundschicht unter ihren Namen nicht kennt. ========================================================================== */ :root { /* --- Stellschrauben (alle mit Standardwert, alle ueberschreibbar) ------ */ --menue-grund: #14110e; /* MUSS deckend sein — siehe F11 */ --menue-farbe: #f6f2ec; --menue-akzent: #ff7716; --menue-rand: rgba(255,255,255,.10); --menue-kopf-hoehe: 64px; /* Hoehe der Leiste, an der das Blatt haengt */ --menue-polster: 24px; --menue-schrift: clamp(1.15rem, 5.5vw, 1.5rem); --menue-dauer: var(--dauer-flaeche, 320ms); --menue-kurve: var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)); --menue-treffer: var(--treffer-min, 44px); /* Breite, ab der die Leiste wieder waagerecht laeuft. Ein Wert in einer Media Query kann keine Variable sein — wer ihn aendert, aendert die beiden `@media`-Zeilen weiter unten MIT. Standard: 860px. */ --menue-ab: 860px; } /* -------------------------------------------------------------------------- 1 · DIE BUEHNE Das Blatt haengt am Kopf (position:absolute; top:100%), nicht am Fenster (position:fixed). Grund: F17 — `fixed` unter einer klebenden Leiste verhaelt sich in der Handy-Emulation wie `static`; das Menue meldete "offen, 361px hoch" und war im Bild nicht da. Absolut am Kopf folgt es der Leiste per Konstruktion. Der Kopf selbst muss dafuer positioniert sein (`sticky` oder `fixed`) — das macht der Bau bzw. das Bauteil `glas-navigation`. -------------------------------------------------------------------------- */ [data-menue-buehne] { position: relative; } /* -------------------------------------------------------------------------- 2 · DER SCHALTER (Burger) -------------------------------------------------------------------------- */ .menue-schalter { display: none; /* erst unterhalb der Schwelle sichtbar */ flex-direction: column; justify-content: center; gap: 5px; width: var(--menue-treffer); height: var(--menue-treffer); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; align-items: center; } .menue-schalter__balken { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dauer-ui, 200ms) var(--ease-out, cubic-bezier(0.23,1,0.32,1)), opacity var(--dauer-sofort, 120ms) linear; } /* Der Zustand kommt aus aria-expanded — EINE Wahrheit, kein zweites Attribut. */ /* v1.1 · Der Schalter traegt `.knopf` — Seiten, die `.knopf` Polster oder `gap` geben (Canaletto Sky, 21.09.2026: `gap:10px`, `padding:0 20px`), zerlegten das X, weil translateY(7px) mit gap 5 + Balken 2 rechnet. Hoehere Spezifitaet haelt die Masse fest. */ .menue-schalter.knopf, .kopf .menue-schalter.knopf { gap: 5px; padding: 0; width: var(--menue-treffer); height: var(--menue-treffer); min-height: var(--menue-treffer); } .menue-schalter[aria-expanded="true"] .menue-schalter__balken:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menue-schalter[aria-expanded="true"] .menue-schalter__balken:nth-child(2) { opacity: 0; } .menue-schalter[aria-expanded="true"] .menue-schalter__balken:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- 3 · DAS BLATT — schmale Schirme Ohne JS bleibt alles sichtbar (F10): das Verstecken haengt an `html.js-menue`, und diese Klasse setzt erst das Skript. Ohne Skript steht das Menue als normale Liste unter der Leiste — nie eine leere Seite. -------------------------------------------------------------------------- */ @media (max-width: 860px) { .menue-schalter { display: flex; } .mobil-menue { position: absolute; top: 100%; left: 0; right: 0; /* Das Blatt deckt genau den Bereich UNTER der Leiste ab. dvh, damit die ein-/ausfahrende Browserleiste am Handy keinen Rest freilaesst. */ height: calc(100dvh - var(--menue-kopf-hoehe)); max-height: calc(100dvh - var(--menue-kopf-hoehe)); overflow-y: auto; overscroll-behavior: contain; /* kein Durchscrollen auf die Seite darunter */ display: flex; flex-direction: column; gap: 2px; padding: var(--menue-polster) var(--menue-polster) calc(var(--menue-polster) * 2); /* DECKEND, nicht verglast: eine Glasflaeche ueber Text ist auf dem Handy unlesbar, und `backdrop-filter` an der Leiste macht sie zum Containing Block (F11). Deshalb hier bewusst eine volle Farbe. */ background: var(--menue-grund); border-top: 1px solid var(--menue-rand); color: var(--menue-farbe); } html.js-menue .mobil-menue { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--menue-dauer) var(--menue-kurve), transform var(--menue-dauer) var(--menue-kurve), visibility 0s linear var(--menue-dauer); /* NIE `transition: all` — Eigenschaften einzeln nennen (Grundschicht §3). */ } html.js-menue .mobil-menue[data-offen="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; } .mobil-menue a { display: flex; align-items: center; min-height: var(--menue-treffer); padding: 12px 4px; font-size: var(--menue-schrift); color: var(--menue-farbe); text-decoration: none; border-bottom: 1px solid var(--menue-rand); } .mobil-menue a:last-of-type { border-bottom: 0; } .mobil-menue a:focus-visible { outline: 2px solid var(--menue-akzent); outline-offset: 3px; } } /* Ein Sprungziel darf nicht unter der Kopfleiste landen. Gilt nur fuer das tatsaechlich angesprungene Element — kostet sonst nichts. */ :target { scroll-margin-top: calc(var(--menue-kopf-hoehe) + 12px); } /* -------------------------------------------------------------------------- 4 · BREITE SCHIRME — dieselbe Liste, waagerecht Ein Menue, zwei Formen. Kein zweites Markup, keine zweite Wahrheit. -------------------------------------------------------------------------- */ @media (min-width: 861px) { .mobil-menue { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); } .mobil-menue a { color: inherit; text-decoration: none; } } /* -------------------------------------------------------------------------- 5 · SCROLL-SPERRE OHNE RUCK `overflow:hidden` allein nimmt dem Fenster den Balken — der Inhalt springt um dessen Breite nach rechts. Das Skript misst die Luecke und legt sie als `--scrollbalken-luecke` an ab; hier wird sie zurueckgegeben. Auf dem Handy ist die Luecke 0 (ueberlagernde Balken) — der Block kostet dort nichts und rettet den Desktop-Fall. -------------------------------------------------------------------------- */ html[data-menue-offen="true"] { overflow: hidden; padding-right: var(--scrollbalken-luecke, 0px); } /* Eine FEST am Fenster haengende Leiste (position:fixed) sitzt ausserhalb der Polsterung von und braucht ihren eigenen Ausgleich. */ html[data-menue-offen="true"] [data-scroll-ausgleich] { right: var(--scrollbalken-luecke, 0px); } /* -------------------------------------------------------------------------- 6 · BEWEGUNG REDUZIEREN Die Grundschicht faengt `.menue` bereits ab. Hier steht nur, was sie unter IHREN Namen nicht kennt: der Burger-Strich. „Reduziert" heisst nicht „keine Rueckmeldung" — das Kreuz entsteht weiterhin, nur ohne Weg. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .menue-schalter__balken { transition-duration: 1ms; } html.js-menue .mobil-menue { transition: opacity 120ms linear, visibility 0s linear 120ms !important; transform: none !important; } html.js-menue .mobil-menue[data-offen="true"] { transform: none !important; } }