/* ═══════════════════════════════════════════════════════════════════════════ NestSuite — Seitenmenü. EINE Quelle für alle acht Seiten. ═══════════════════════════════════════════════════════════════════════════ Gehört nach shared/, weil das Menü layout-neutral ist: es ist Rahmenwerk, keine Komponente einer App. Genau die Trennung, die ARCHITEKTUR.md festhält ("geteilt wird, was layout-neutral ist"). Die alten .side-menu-Regeln in den vier styles.css sind entfallen — sie waren viermal fast dasselbe. WAS DAS NEUE AUSSEHEN AUSMACHT (26.07.2026, nach einer Vorlage von MWM). Nicht die Symbole. Drei andere Dinge: 1. FESTE TEXTSPALTE. Die Symbole besetzen eine Spalte fester Breite, alle Beschriftungen beginnen an derselben Kante — auch die ohne Symbol. Vorher begann jeder Text am Containerrand, die Abschnittslabels ebenso; es gab keine Linie, an der das Auge sich festhalten konnte. 2. GEFÜLLTE PILLE für den aktiven Eintrag statt bloß anderer Textfarbe. Eine Farbänderung allein trägt eine Auswahl nicht, besonders nicht bei einer entsättigten Akzentfarbe. 3. EINSTELLUNGEN ALS REGULÄRER ABSCHNITT, gleiche Form wie Module und Inhalt. Vorher war das Zahnrad angeklebt, weil es nachträglich hinein- injiziert wurde. Zurücknehmen: siehe tools/menuversuch/zuruecksetzen.md ═══════════════════════════════════════════════════════════════════════════ */ :root { /* 272 → 208 px (25.08.2026). Die Leiste trug fuenf Schriftgroessen und war 76 px breiter als noetig; sie wirkte dadurch schwerer als der Inhalt, den sie erschliesst. Zum Vergleich gemessen: das Vorbild in Lovable kommt mit 196 px und drei Groessen aus. 208 statt 196, weil unsere Leiste mehr Gruppen hat (Profil, Module, Inhalt, Einstellungen) und laengere Beschriftungen traegt. */ --sm-breite: 208px; --sm-breite-zu: 64px; /* eingeklappt: nur die Symbolspalte */ --sm-icon-spalte: 30px; /* Symbol + Abstand = die Textkante */ } /* ─── Grundgestalt ───────────────────────────────────────────────────────── */ .side-menu { position: fixed; top: 0; left: 0; height: 100%; width: var(--sm-breite); background:var(--sidebar-flaeche); border-right: 1px solid var(--sidebar-marke-linie); padding: var(--sp-4) var(--sp-3); /* Shell.tsx: py-4 px-3 */ /* scrollbar-width erbt NICHT (25.08.2026, MWM: "so fein wie rechts"). In shared/global.css steht die Regel am html-Element; jede eigene Scrollflaeche braucht sie nochmal, sonst zeichnet der Browser hier seinen Standardbalken -- rund doppelt so breit wie unsere 6 px. */ overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--scrollbar-daumen-leiste) transparent; box-sizing: border-box; z-index: calc(var(--z-leiste) - 1); display: flex; flex-direction: column; gap: var(--sp-1); } /* Schlanker Scrollbalken (Wunsch MWM 28.07.2026) — der Browser-Standard wirkte grob neben der sonst zurückhaltenden Menü-Optik. Farbe an --line/--muted angelehnt, nicht am Akzent: der Balken soll sich einordnen, nicht auffallen. Die Pfeile (Scrollbar-Buttons) sind AUSGEBLENDET statt nur verkleinert: WebKit kennt dafür keine schlanke Variante, nur volle Breite oder gar keine — ein 6px schmaler Balken mit Pfeilklötzen in Originalgröße wäre kein Gewinn gewesen. Firefox bekommt dieselbe Optik über scrollbar-width/-color, dort gibt es ohnehin keine Pfeile serienmäßig. */ /* Die Regel steht seit 23.08.2026 in shared/global.css und gilt fuer die ganze Suite -- hier stand sie vorher allein, und jede andere scrollbare Flaeche bekam den groben Browser-Standard. Nicht dupliziert, sondern umgezogen: zwei identische Regeln an zwei Orten sind der Anfang von zwei verschiedenen. */ /* ─── Kopf: Einklappen ─────────────────────────────────────────────────────── Der Knopf steht AUSSERHALB des Flusses (25.08.2026, MWM). Vorher war er eine eigene Zeile mit 10 px Polster darunter — der Profil-Abschnitt begann also erst rund 42 px unter der Oberkante, und die Kapitellinie von "PROFIL" lief weit unterhalb des Kreises ins Leere. Jetzt liegt der Kreis absolut oben rechts und der erste Abschnitt rueckt ganz nach oben. Die Linie laeuft auf der Mittelhoehe des Kreises durch und endet unter ihm: der Knopf traegt eine eigene Flaeche (--paper) und deckt sie ab. Dadurch wirkt er als Punkt AUF der Linie statt als Element darueber. position: absolute bezieht sich auf .side-menu (position: fixed). */ .sm-kopf { position: absolute; z-index: var(--z-inhalt); top: var(--sp-4); right: var(--sp-3); display: flex; align-items: center; padding: 0; } /* Der erste Abschnitt rueckt so weit herunter, dass seine Kapitellinie auf der Mittelhoehe des Kreises sitzt: Kreis oben 16 px (--sp-4), hoch 32 px -> Mitte bei 32 px Label-Linie liegt auf halber Zeilenhoehe, rund 6,5 px unter der Oberkante 32 − 16 − 6,5 ≈ 10 px Die Rechnung steht hier, damit sie beim naechsten Aendern nicht neu erraten werden muss. */ .side-menu > .sm-block:first-of-type { padding-top: var(--sp-zelle); } .sm-zu { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border:1px solid var(--karten-linie); border-radius: var(--r-pill, 999px); /* alles Anfassbare ist rund */ background:var(--paper); color: var(--muted); cursor: pointer; padding: 0; transition: color .15s, border-color .15s, background .15s; } .sm-zu svg { width: 15px; height: 15px; } .sm-zu:hover { color: var(--ink); border-color:var(--ink); } /* ─── Abschnitt: Label + Zeilen ──────────────────────────────────────────── */ /* Abschnitte deutlicher getrennt (Wunsch MWM 26.07.2026): mehr Luft zwischen den Blöcken und zwischen Label und erstem Eintrag. 18 → 30 px unten, 8 → 14 px unter dem Label. Bei acht bis zwölf Zeilen im Menü ist Abstand das einzige Mittel, das gliedert, ohne Striche zwischen jede Zeile zu setzen — die hatten wir schon und sie machten aus der Liste ein Formular. */ .sm-block { display: flex; flex-direction: column; gap: 1px; margin-bottom: 30px; } .sm-block:last-child { margin-bottom: 0; } /* Das Label mit einer Linie, die den Rest der Breite füllt — wie in der Vorlage. Sie sitzt auf der Mittelhöhe des Textes und macht aus der Beschriftung eine KAPITELMARKE statt einer weiteren Zeile. Über ein ::after im Flex statt einer border-bottom am Container: die Linie soll NEBEN dem Wort laufen, nicht darunter. */ .sm-label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-pille); font-weight: var(--fw-fett); text-transform: uppercase; letter-spacing: var(--ls-versal); /* Dieselbe Textfarbe wie die Menüzeilen (Wunsch MWM 26.07.2026). Die Marke bleibt trotzdem zurückhaltend: kleiner Grad, Großbuchstaben und Sperrung tragen die Unterordnung — dafür braucht es kein zweites Grau. */ color: var(--ink); padding: 0 var(--sp-innen) var(--sp-4) calc(6px + var(--sm-icon-spalte)); white-space: nowrap; } .sm-label::after { content: ""; flex: 1; height: 1px; /* Grau statt beige (01.09.2026) — eigener Token, Begruendung in shared/tokens.css bei --sidebar-marke-linie. */ background:var(--sidebar-marke-linie); /* Die Linie steht optisch etwas höher als die Schriftmitte, weil Großbuchstaben keine Unterlängen haben — 1 px zurück gleicht das aus. */ transform: translateY(-1px); } /* ─── Aufklappbarer Abschnitt (27.08.2026, MWM) ──────────────────────────── "Behandel den Bereich Einstellungen wie einen Toggle, so dass ich die Punkte darunter auf- und zuklappen kann." Die Ueberschrift SELBST ist der Knopf -- kein zusaetzliches Element daneben. Man trifft sie mit demselben Blick, mit dem man den Abschnitt sucht, und sie ist bereits die volle Breite der Leiste. Als