/* ============================================================ Komponente: nav-rail (Navigationsstreifen links, Tablet) ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → Navigation Rail, node 13866:15968 (Vor Ort) und 12845:14624 (Inhalte), ausgelesen am 04.09.2026. Das Tablet-Gegenstück zur Bottom Nav. nav.css im Design System beschreibt die BOTTOM Nav — waagerecht, mit wandernder Bubble, transluzent mit Blur. Der Streifen ist etwas anderes: senkrecht, deckende Fläche in surface-secondary, und der aktive Zustand ist ein Kreis, der an seinem Tab BLEIBT statt zu wandern. Deshalb eine eigene Datei und nicht ein Modifier an .nav — geteilt sind nur die Tokens, nicht der Aufbau. nav.css wird nicht angefasst (AGENTS.md §16). WAS AUS nav.css ÜBERNOMMEN IST · Der aktive Tab hängt an aria-current="page", nicht an einer Klasse. Der Zustand muss auch für Screenreader da sein. · Kein Glow am aktiven Kreis (§7). · Das Label wechselt OHNE Übergang (§23.3): es trägt die Auskunft „du bist jetzt hier", und Auskunft darf nicht nachlaufen. AN DIESER STELLE HÄNGT §19: Solange der Streifen sichtbar ist, zeigt ein Screen ein ← ; ist er verdeckt, ein ✕. Er ist die einzige jederzeit sichtbare Struktur der App. Setzt tokens.css, base.css und components/wortmarke.css voraus. VERWENDUNG ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 112 Breite des Streifens. 78 x 71 Tab-Fläche. 46 Kreis um das Icon. Über der Untergrenze von 44 (§11.2), unter dem Zielwert 48 — der Tab selbst ist mit 78 x 71 aber deutlich größer, und er ist die Klickfläche. 20 Abstandhalter zwischen Logo und erstem Tab. In Figma ein eigener 20-x-20-Frame; zusammen mit den zwei Abständen von 16 ergibt das 52 unter dem Logo. 26 / 23 / 25 Icon-Größen. Je Icon anders, so exportiert. ============================================================ */ .nav-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); /* 16 */ width: 112px; /* gemessen, siehe Kopf */ padding-block: var(--space-lg); /* 24 */ padding-inline: var(--space-xs); /* 8 */ /* Deckende Fläche, nicht transluzent wie die Bottom Nav: der Streifen steht neben dem Inhalt, nicht darüber — es gibt nichts, was durchscheinen sollte. */ background-color: var(--surface-secondary); } /* Der Abstandhalter aus Figma. Ein leeres Element ist hier ehrlicher als ein größerer gap: der gap gilt für alle Abstände, dieser Abstand nur für den einen unter dem Logo. */ .nav-rail__abstand { width: 20px; height: 20px; flex-shrink: 0; } .nav-rail__liste { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); /* 16 */ list-style: none; margin: 0; padding: 0; width: 100%; } /* ------------------------------------------------------------ Tab ------------------------------------------------------------ */ .nav-rail__tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2xs); /* 4 */ width: 78px; /* gemessen, siehe Kopf */ height: 71px; margin-inline: auto; border: 0; background: none; cursor: pointer; color: var(--nav-text); } /* Der Kreis ist im Ruhezustand durchsichtig und im Aktiv-Zustand gefüllt. Er ist IMMER da — sonst springt das Icon um die halbe Kreisgröße, sobald der Tab aktiv wird (AGENTS.md §15). */ .nav-rail__kreis { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; /* gemessen, siehe Kopf */ height: 46px; border-radius: var(--radius-full); background-color: transparent; color: var(--nav-icon); } .nav-rail__ikon { display: block; overflow: visible; width: 26px; height: 26px; } /* ------------------------------------------------------------ Jedes Icon hat zwei Fassungen ------------------------------------------------------------ IM RUHEZUSTAND UMRISS, IM AKTIV-ZUSTAND GEFÜLLT. So exportiert Figma alle vier: die Ruhe-Fassung trägt nur einen Strich, die Aktiv-Fassung ist eine gefüllte Silhouette in nav-icon-active. Nachgezogen am 04.09.2026 — vorher war nur der Pin gefüllt und die anderen drei blieben auch aktiv Umriss. Quellen der Aktiv-Fassungen: Vor Ort 13866:15971 Entdecken 12945:34979 Inhalte 12945:34928 Meine Titel 13856:15453 Warum gefüllt: auf dem gefüllten Kreis hat ein Umriss-Icon zwei konkurrierende Konturen — die eigene und die Kreiskante. Die Silhouette liest sich auf 20 px klarer, und der Wechsel Umriss → Fläche ist ein zweites Signal neben der Farbe (WCAG 1.4.1). Beide Fassungen liegen im Markup und werden hier umgeschaltet — kein JS, und beide sind für Screenreader ohnehin unsichtbar (aria-hidden). ------------------------------------------------------------ */ .nav-rail__ikon--aktiv { display: none; } .nav-rail__tab[aria-current="page"] .nav-rail__ikon--ruhe { display: none; } .nav-rail__tab[aria-current="page"] .nav-rail__ikon--aktiv { display: block; } /* Je Icon eine eigene Größe — so exportiert, nicht gerundet. */ .nav-rail__ikon--vorort { width: 20.278px; height: 25.5px; } .nav-rail__ikon--entdecken { width: 26px; height: 26px; } .nav-rail__ikon--inhalte { width: 23px; height: 23px; } .nav-rail__ikon--meinetitel { width: 26.353px; height: 25px; } .nav-rail__label { font-family: var(--font-family-inter); font-size: var(--font-size-small-text); line-height: var(--line-height-small-text); font-weight: var(--font-weight-regular); text-align: center; white-space: nowrap; } /* ------------------------------------------------------------ Aktiver Tab ------------------------------------------------------------ Vier Signale gleichzeitig, nicht nur Farbe (WCAG 1.4.1): gefüllter Kreis, gefülltes statt umrissenes Icon, umgekehrter Icon-Kontrast, fettes Label. ------------------------------------------------------------ */ .nav-rail__tab[aria-current="page"] { color: var(--nav-text-active); } .nav-rail__tab[aria-current="page"] .nav-rail__kreis { background-color: var(--nav-icon-background-active); color: var(--nav-icon-active); } .nav-rail__tab[aria-current="page"] .nav-rail__label { font-weight: var(--font-weight-bold); } /* ------------------------------------------------------------ Zustände ------------------------------------------------------------ Wie in nav.css: der Press-Zustand tönt die Fläche, es gibt keinen Glow. Hover nur auf Zeigergeräten (AGENTS.md §17). ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .nav-rail__tab:hover:not([aria-current="page"]) .nav-rail__kreis { background-color: var(--nav-bg-fill); } } .nav-rail__tab:active .nav-rail__kreis { background-color: var(--nav-bg-fill-press); } /* Das Label wechselt ohne Übergang (§23.3) — deshalb steht font-weight NICHT in der transition. Der Kreis darf laufen: er ist Form, nicht Auskunft. */ .nav-rail__kreis { transition: background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out); } @media (prefers-reduced-motion: reduce) { .nav-rail__kreis { transition: none; } } /* ============================================================ OFFEN ------------------------------------------------------------ · Der Streifen ist im Design System nicht spezifiziert. SKILL.md §7 kennt nur die Bottom Nav; §0 nennt Tablet als zu bauenden Breakpoint, sagt aber nichts zur Navigation dort. Diese Datei ist aus den Screens gemessen — sie gehört als Komponente ins System, nicht in einen Prototypen. · Hover und Press stehen in Figma nicht an der Komponente. Beide sind hier aus nav.css übernommen. ============================================================ */