{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "seitenrand-und-ecken-navigation", "name": "Seitenrand- und Vier-Ecken-Navigation", "name_en": "Edge / corner navigation (four-corner layout, vertical side nav)", "kurz": "Logo, Menü, Legende und Zähler stehen in den vier Ecken eines Architekturbüros, invertieren sich per difference über hellen und dunklen Tafeln und wechseln per View Transition zu drei Ecken oder zur Seitenleiste.", "kategorie": "Navigation", "kategorie_slug": "navigation", "kategorie_nr": 3, "bau_chat": "C3", "prioritaet": "B", "trendstatus": "etabliert", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "ruhig", "editorial", "präzise" ], "stimmung_roh": [ "editorial", "kuratiert", "ruhig", "schweizerisch" ], "technik": [ "css", "mix-blend-mode", "writing-mode" ], "technik_gruppen": [ "css" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Die Navigation verteilt sich auf die Ränder statt auf eine Kopfleiste. Typisch: Logo oben links, Menü oben rechts, Projekt oder Kontakt unten links, Zähler oder Uhr unten rechts, alle fix positioniert. Alternativ trägt eine schmale Leiste links gedrehte Labels. Die Mitte bleibt frei für Bild und Inhalt, die Ränder bilden einen ruhigen Rahmen. Oft hält mix-blend-mode: difference die Ecktexte über hellen und dunklen Flächen lesbar.", "warum_es_wirkt": "Die Ecken rahmen den Inhalt wie ein Plakat oder eine Ausstellungswand. Das wirkt kuratiert und schweizerisch-editorial. Der Inhalt bekommt die ganze Fläche, die Navigation bleibt trotzdem immer erreichbar.", "wann_einsetzen": "Portfolios, Galerien, Fotografie, Architektur und immersive WebGL-Seiten. Überall, wo wenige Bereiche auf große Bilder treffen.", "wann_nicht": "Informationsreiche Seiten mit vielen Menüpunkten. Mobile-first-Projekte, die keinen eigenen Umbau für kleine Bildschirme bekommen.", "varianten": [ "Vier Ecken: Logo, Menü, Legende, Zähler oder Uhr (Playermaker, Alpha Blue Ocean laut Speckyboy)", "Drei Ecken, minimal: Logo, Menü-Knopf, Legende (Oropress)", "Vertikale Seitenleiste mit gedrehten Labels", "Zweigeteilte Seitenleiste: Bereiche oben, Steuerungen unten (Paul Hanaoka laut Navbar Gallery)" ], "umsetzung": "Vier fixe Container mit 16 bis 32 px Randabstand oder ein fixes Grid über dem Viewport: pointer-events: none auf dem Grid, pointer-events: auto auf den Links. Vertikale Labels per writing-mode: vertical-rl, für Lesart von unten nach oben zusätzlich transform: rotate(180deg). Nicht nur mit rotate drehen, sonst stimmen Layout und Textauswahl nicht. Lesbarkeit über wechselnden Flächen: color: white mit mix-blend-mode: difference. Oder die Farbe je Ecke aus dem data-theme der Sektion darunter setzen. Wechselnde Labels wie das aktuelle Projekt kurz aus- und wieder einblenden; Goodgrowth nutzt dafür 250 ms ease. Fallstrick: Fixe Ecken verdecken auf kleinen Screens Inhalt. Mobil zu einer Leiste zusammenfassen.", "mobil": "Ecken zu einer Kopfzeile mit Logo und Menü-Knopf zusammenfassen, das Menü öffnet als Overlay. Untere Ecken und vertikale Labels entfallen. Ihre Angaben wandern als Bildunterschrift in den Inhalt.", "reduzierte_bewegung": "Das Muster selbst ist statisch. Wechselnde Labels, Menü-Overlay und Layoutwechsel ohne Gleiten zeigen: kurz überblenden oder sofort tauschen, View Transitions abschalten.", "barrierefreiheit": "DOM-Reihenfolge logisch halten (Logo, Navigation, Inhalt, Kontakt), unabhängig von der Position am Rand. Landmarken wie
und