/* ═══════════════════════════════════════════════════════════════════════════ NestSuite — die Kopfleiste ═══════════════════════════════════════════════════════════════════════════ ANLASS 27.08.2026, MWM: "einen Header über alle Seiten, immer an der gleichen Stelle, sehr schlank. Links der Zurück-Button und vorwärts, und der Pfad, wo ich mich gerade befinde." WAS SIE IST Eine 32 px hohe Zeile am oberen Rand jeder Seite: zwei Pfeile und der Weg dorthin, wo man steht. Sie beantwortet zwei Fragen, die eine Modulnavigation nicht beantwortet -- "wo bin ich gerade" und "wie komme ich einen Schritt zurück". WARUM SIE HIER STEHT UND NICHT IN DEN MODULEN Sie ist auf vierzehn Seiten dieselbe. Eine Leiste, die auf jeder Seite gleich aussehen soll, gehört in eine Datei -- alles andere ist die Wette, dass niemand sie je an einer Stelle anfasst. Diese Wette ist in diesem Projekt am 26.08.2026 fünfmal verloren worden (Themen-Pille, Aussenkante, Pop-up-Form, Muelleimer-Symbol, Waschstufen). Gate 27 in tools/check-tokens.mjs haelt sie hier. POSITION: STICKY, NICHT FIXED shared/seitenmenu.css setzt `[data-menu="leiste"] body { padding-left: var(--sm-breite) }`. Ein Element im normalen Fluss ist damit schon richtig eingerueckt -- und wandert beim Ein- und Ausklappen der Seitenleiste von selbst mit, ohne dass hier ein zweiter Wert gepflegt werden muesste. Mit `position: fixed` waere ein eigenes `left: var(--sm-breite)` noetig gewesen, plus dieselbe Transition, plus die Regel fuer den eingeklappten Zustand: drei Werte, die mit der Seitenleiste synchron bleiben muessen. Sticky braucht keinen davon. Die Seitenleiste liegt DAVOR (MWM, 27.08.2026): sie wechselt das Modul, die Leiste zeigt den Ort INNERHALB eines Moduls. Aussen gehoert das Groebere. Lag die Leiste darueber, stuende "Real Estate › Objekt" ueber einer Leiste, die gerade InOut anbietet. EINBINDEN (nach shared/tokens.css, vor dem App-Stylesheet): dazu shared/kopfleiste.js und ein Aufruf von kopfleiste({ pfad: [...] }). Stand: 27.08.2026 ═══════════════════════════════════════════════════════════════════════════ */ .kopfleiste { position: sticky; top: 0; z-index: var(--z-kopfleiste); /* ueber dem Inhalt, unter der Seitenleiste (z-index 60) */ display: flex; align-items: center; gap: var(--sp-2); /* 32 px = --knopfhoehe. Kein eigener Wert: die Leiste ist so hoch wie ein Bedienelement, und das ist keine Kosmetik, sondern der Grund, warum die zwei Pfeile darin ohne Polsterung sitzen koennen. */ height: var(--knopfhoehe); padding: 0 var(--sp-3); /* Halbdurchsichtig mit Weichzeichner: der Inhalt scrollt sichtbar darunter durch, statt an einer harten Kante zu verschwinden. Der Ruecken bleibt lesbar, weil der Weichzeichner den Kontrast nimmt. background-color separat, nicht als Kurzform -- sonst setzt sie backdrop-filter mit zurueck. */ background-color: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(8px); /* --line, nicht --karten-linie (27.08.2026, MWM: "sichtbar statt angedeutet"). Die Kartenlinie trennt gleichrangige Flaechen voneinander; diese Kante trennt die NAVIGATION vom Inhalt und darf deshalb kraeftiger sein. Sie ist ausserdem die einzige Kontur der Leiste -- Flaeche und Text bleiben zurueckhaltend, also muss die Linie die Arbeit machen. --line ist derselbe Ton wie die Kante der Seitenleiste rechts daneben: die zwei Navigationsflaechen schliessen damit sichtbar aneinander an. */ border-bottom: 1px solid var(--line); } /* ─── Die zwei Pfeile ───────────────────────────────────────────────────── Quadratisch auf --knopfhoehe-tabelle (26 px), also kleiner als die Leiste selbst -- sie sollen darin sitzen, nicht sie ausfuellen. Die Geste beim Ueberfahren kommt aus shared/global.css, wie bei jedem anderen Knopf. */ .kopfleiste-pfeil { display: inline-flex; align-items: center; justify-content: center; width: var(--knopfhoehe-tabelle); height: var(--knopfhoehe-tabelle); flex-shrink: 0; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: var(--r-bedien); cursor: pointer; transition: background var(--transition), color var(--transition); } .kopfleiste-pfeil:hover { background: var(--hover-flaeche); color: var(--ink); } .kopfleiste-pfeil svg { width: 15px; height: 15px; display: block; } /* Der Vorwaerts-Knopf ist meistens ohne Ziel. Der Browser sagt nicht, ob es eines gibt (history.length zaehlt auch die Rueckwege), deshalb steht er immer da -- gedaempft. Ein Knopf, der aussieht wie ein Knopf und nichts tut, ist schlimmer als ein sichtbar leiser. */ .kopfleiste-pfeil.ist-still { opacity: .35; } .kopfleiste-pfeil.ist-still:hover { background: transparent; color: var(--muted); } /* ─── Der Pfad ──────────────────────────────────────────────────────────── Kein eigener Schriftgrad: --fs-fuss, wie jede andere Nebenangabe. Die Leiste sagt, wo man ist -- sie ist nicht der Inhalt der Seite. */ .kopfleiste-pfad { display: flex; align-items: center; gap: 2px; min-width: 0; /* sonst sprengt ein langer Name die Leiste */ font-size: var(--fs-fuss); color: var(--muted); } .kopfleiste-pfad a, .kopfleiste-pfad > span { padding: 2px var(--sp-innen); border-radius: var(--r-bild); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kopfleiste-pfad a { color: var(--muted); text-decoration: none; transition: background var(--transition), color var(--transition); } .kopfleiste-pfad a:hover { background: var(--hover-flaeche); color: var(--ink); } /* Der letzte Eintrag ist der Ort, an dem man steht: dunkler und nicht klickbar. Ein Weg, dessen letzter Schritt anklickbar aussieht, laedt zu einem Klick ein, der nichts tut. */ .kopfleiste-pfad .ist-hier { color: var(--ink); font-weight: var(--fw-halbfett); } .kopfleiste-trenner { color: var(--muted); opacity: .5; flex-shrink: 0; user-select: none; } /* Auf schmalen Fenstern schrumpft der Pfad von links: der aktuelle Ort ist wichtiger als der Weg dorthin. */ @media (max-width: 700px) { .kopfleiste-pfad > :not(.ist-hier):not(.kopfleiste-trenner) { max-width: 5rem; } }