/* app.css — Nuvisan ICB, DMPK Order Entry Farbschema nach dem Frontend-Mockup: Nuvisan-Blau #1E2BD3, Pink #FF406D, IBM Plex Sans/Mono. Die Schriften werden nicht von einem CDN geladen (die VM hat keinen zwingenden Internetzugang) — es greift der System-Fallback, wenn IBM Plex lokal nicht installiert ist. */ :root { --blau: #1E2BD3; --pink: #FF406D; /* Beide Werte sind aus den Nuvisan Brand Guidelines 2025 uebernommen und nicht selbst angemischt: --pink-tief ist der dort im Abschnitt „Colour / Tint" gefuehrte Tint der Marken-Pink, --off-weiss die Primaerfarbe „Off white" aus „Colour / Primary". --pink-tief existiert aus einem Kontrastgrund, nicht aus Geschmack. Die Marke will Pink als Signalfarbe fuer Interaktion — das reine --pink (#FF406D) traegt weisse Schrift aber nur mit 3,4:1 und verfehlt damit die 4,5:1, die fuer Text in Normalgroesse verlangt sind. #BF3052 erreicht 5,6:1. Deshalb die Aufteilung: Knoepfe mit Beschriftung in Normalgroesse bekommen den tiefen Ton, das reine Marken-Pink bleibt grossen, fetten Beschriftungen ab 18,7px vorbehalten, wo 3:1 ausreicht. Ein Token allein kann beides nicht leisten. */ --pink-tief: #BF3052; --off-weiss: #f9f9f9; --tinte: #16181f; --grau: #5b6070; --linie: #dfe2ea; --flaeche: #f6f7fa; --weiss: #fff; --warn: #b3541e; --rot: #b42318; /* Arbeitsbreite der Inhaltsflaeche. EINE Stelle, damit Inhalt und Fussbereich nicht auseinanderlaufen. Deutlich grosszuegiger als die alte Lesebreite: der Hauptinhalt sind achtspaltige Tabellen und kein Fliesstext, dem ~90 Zeichen je Zeile gut taeten. Begrenzt bleibt sie trotzdem — ueber die volle Breite eines sehr grossen Monitors verliert das Auge beim Wandern ueber die Zeile den Zeilenbezug. Wer echtes Full-Width will, aendert genau diese Zeile auf 100%. */ --inhaltsbreite: 1800px; } * { box-sizing: border-box; } body { margin: 0; font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinte); background: var(--flaeche); font-size: 15px; line-height: 1.5; } code, .mono, td.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; } /* ─── Kopfzeile ─────────────────────────────────────────────────────────── */ /* `min-height` und NICHT `height`: Die Leiste darf umbrechen (`flex-wrap: wrap`), und eine feste Hoehe widerspricht dem. Sie legt die Leiste auf genau eine Zeile fest, waehrend der Umbruch beliebig viele erzeugt — die zweite Zeile hat dann keinen Platz mehr in der Leiste, laeuft unten aus ihr heraus und legt sich ueber den Inhalt darunter. Mit `min-height` und senkrechtem Innenabstand waechst die Leiste stattdessen mit: Sie ist im unumgebrochenen Fall exakt so hoch wie zuvor (56 px, denn der Inhalt bleibt mit Polster darunter), und bei Umbruch so hoch, wie ihre Zeilen es brauchen. Warum das lange nicht auffiel, obwohl der Fehler alt ist: Unter der Leiste lag bisher immer eine weisse Inhaltsflaeche. Der ueberstehende Text war dort zwar falsch platziert, aber lesbar und sah nur unsauber aus. Seit die Anmelde- und die Startseite direkt unter der Leiste eine Bildflaeche zeigen, liegt derselbe Text auf dem Foto und ist schlicht nicht mehr zu entziffern — aus einem Schoenheitsfehler ist ein Bedienungsfehler geworden. `row-gap` kleiner als `column-gap`: Waagerecht trennt der Abstand Menuepunkte voneinander, senkrecht nur zwei Zeilen derselben Leiste. Ohne eigenen Wert klebten die umgebrochenen Zeilen aneinander (Grundwert 0) oder rissen die Leiste unnoetig auseinander (der volle Spaltenabstand). */ .topbar { display: flex; align-items: center; column-gap: 1.5rem; row-gap: .5rem; background: var(--weiss); border-bottom: 2px solid var(--blau); padding: .5rem 1.5rem; min-height: 56px; flex-wrap: wrap; } .brand { font-weight: 700; color: var(--blau); text-decoration: none; letter-spacing: -.02em; } .brand span { color: var(--tinte); font-weight: 400; } /* Flex-BASIS statt `flex: 1`: Beides laesst die Navigation den freien Platz fuellen, aber `flex: 1` heisst `flex-basis: 0` — die Navigation beansprucht dann rechnerisch keine Breite und bleibt deshalb IMMER auf der Zeile der Marke, egal wie schmal das Fenster wird. Sie quetschte sich dort in die paar Pixel rechts neben dem Logo und stapelte ihre elf Punkte in eine ausgefranste Spalte, die die Leiste auf ein Vielfaches ihrer Hoehe trieb. Mit 22rem sagt sie, wie viel Platz sie braucht, um als Zeile zu taugen; reicht der nicht, rutscht sie als Ganzes auf eine eigene Zeile und nutzt dort die volle Breite. Kein Media-Query: Der Umbruchpunkt ergibt sich aus dem, was danebensteht, und verschiebt sich von allein mit, wenn die Marke oder die Nutzerzeile einmal laenger werden. `flex-grow: 1` bleibt, damit sich bei breitem Fenster nichts aendert. */ .topbar nav { display: flex; gap: 1rem; flex: 1 1 22rem; flex-wrap: wrap; } .topbar nav a { color: var(--tinte); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; } .topbar nav a:hover { border-bottom-color: var(--pink); } .topbar nav a.on { border-bottom-color: var(--blau); font-weight: 600; } .topbar nav a.muted { color: var(--grau); } .who { display: flex; align-items: center; gap: .6rem; font-size: 13px; } .who .role { background: var(--blau); color: #fff; border-radius: 999px; padding: 1px 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .who a { color: var(--grau); } /* „Über"-Knopf: rechtsbuendig in der Kopfzeile, ausserhalb von