Plex und ein Pfad
sieht aus wie ein Wort. */
.nb-hilfe code,
.nb-lesen code {
font-family: var(--nb-schriftart-code);
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body {
font-family: var(--nb-schriftart-bedienen);
background: var(--bg); color: var(--t1); font-size: 14px; -webkit-font-smoothing: antialiased;
}
/* ===== Tastatur-Fokus =====
Der Standard-Ring des Browsers ist im Dunkelmodus grellweiß und dominiert die halbe Fläche.
Er läuft stattdessen in der Markenfarbe (--pri), die ohnehin mit hell/dunkel umschaltet - eine
eigene Einstellung dafür wäre eine Stellschraube mehr, die niemand findet.
Nur :focus-visible, nicht :focus - sonst umrahmt jeder Mausklick das Angeklickte. Der Browser
entscheidet damit selbst, ob der Fokus per Tastatur kam. */
:focus-visible {
outline: 2px solid var(--pri);
outline-offset: 2px;
border-radius: 4px;
}
/* Das Seitenfenster bekommt den Fokus beim Öffnen programmgesteuert - damit die Tastatur darin
beginnt, nicht weil es selbst bedienbar wäre. Ein Ring um den ganzen Rahmen sagt darum nichts
und stört nur. Die Bedienelemente darin behalten ihren. */
.nb-modalfenster .mud-dialog:focus, .nb-modalfenster .mud-dialog:focus-visible { outline: none; }
/* Ein Modalfenster in einem anderen Fenster (Chatfenster → „Aufgabe aus Chat“): MudBlazors
Öffnungsanimation lässt ein transform am äußeren Dialog stehen, und darunter bezieht sich
„position: fixed“ auf ihn statt auf den Bildschirm - das innere Fenster säße eingesperrt und
abgeschnitten darin. !important schlägt den Animationswert, ohne die Animation neu abzuspielen. */
.mud-dialog:has(.nb-modalfenster) { transform: none !important; }
/* Gerenderte Hilfetexte: Der Markdown kommt fertig vom Server, hier bekommt er nur Maß. */
.nb-hilfe p { margin: 0 0 .6em; line-height: 1.55; }
.nb-hilfe p:last-child { margin-bottom: 0; }
.nb-hilfe ul, .nb-hilfe ol { margin: 0 0 .6em; padding-left: 1.2em; }
.nb-hilfe li { margin: .2em 0; }
.nb-hilfe code {
background: var(--surf2); border: 1px solid var(--line);
border-radius: 4px; padding: 1px 5px; font-size: .92em;
}
/* Puls des KI-Betriebs: zwoelf Saeulen statt einer Zahl. Ob der Durchsatz steigt, faellt oder
steht, sieht man an der Form - an einem Mittelwert nicht. */
.nb-puls { display: flex; align-items: flex-end; gap: 3px; height: 46px; min-width: 180px; }
.nb-puls .saeule {
display: block; width: 10px; border-radius: 2px 2px 0 0; background: var(--pri); opacity: .85;
}
/* ===== Bildlaufleisten =====
Der Griff bekam schon die Linienfarbe, die Schiene blieb aber hell: Ohne color-scheme weiss der
Browser nichts vom Dunkelmodus und zeichnet seinen eigenen Teil - Schiene, Pfeile, Ecke - in
Hell. Das Bekenntnis steht deshalb an html.dark/html.light (siehe oben) und gilt zugleich fuer
alles andere, was der Browser selbst malt: Auswahlfelder, Datumswaehler, Autofill.
Der Griff traegt einen durchsichtigen Rand und zeichnet nur in seinen Inhaltsbereich: So
schwebt er in der Schiene, statt sie randlos auszufuellen. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--line2); border-radius: 99px;
border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--t3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox kennt die Einzelteile nicht, nur Breite und zwei Farben. */
html { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
/* ===== Kopfleiste (Mockup .appbar) ===== */
/* Ladebalken: ganz oben, über allem, ohne Platz zu nehmen - er soll sagen „es passiert etwas",
nicht die Seite verschieben. */
.nb-ladebalken {
position: fixed; top: 0; left: 0; right: 0; z-index: 2000; pointer-events: none;
}
.nb-appbar {
height: 58px; background: var(--bg2); border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 5px; padding: 0 16px;
}
.nb-brand {
display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px;
letter-spacing: -.3px; margin-right: 16px; cursor: pointer; white-space: nowrap; color: var(--t1);
text-decoration: none;
}
/* Das Zeichen (Shared/FlowZeichen): Fläche, Rahmen, Punkt - die Farben aus dem Designkatalog. */
.nb-flowzeichen { display: block; flex: none; }
.nb-flowzeichen .flaeche { fill: var(--nb-zeichen-flaeche); }
.nb-flowzeichen .rahmen { fill: none; stroke: var(--nb-zeichen-rahmen); stroke-width: 8; }
.nb-flowzeichen.klein .rahmen { stroke-width: 14; }
.nb-flowzeichen .punkt { fill: var(--nb-zeichen-punkt); }
/* Mandantenname neben der Marke: Wer mehrere Instanzen betreut, muss ohne Blick in die
Adresszeile sehen, wessen Daten vor ihm liegen. */
.nb-mandant {
display: flex; align-items: center; gap: 6px; margin-right: 14px; padding: 4px 10px;
border-radius: 8px; background: var(--surf2); color: var(--t2); font-size: 12.5px;
font-weight: 600; white-space: nowrap; max-width: 220px; overflow: hidden;
text-overflow: ellipsis;
}
.nb-mnav { display: flex; gap: 1px; flex: 1; overflow-x: auto; }
.nb-mnav a {
padding: 8px 12px; border-radius: 9px; font-size: 13.5px; color: var(--t2); cursor: pointer;
display: flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none;
}
.nb-mnav a:hover { background: var(--surf2); color: var(--t1); }
.nb-mnav a.on { background: var(--pri-w); color: var(--pri-t); font-weight: 600; }
.nb-hico {
width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
cursor: pointer; color: var(--t2); font-size: 15px; flex: 0 0 36px; border: none; background: transparent;
}
.nb-hico:hover { background: var(--surf2); color: var(--t1); }
.nb-userbtn {
display: flex; align-items: center; gap: 9px; padding: 4px 11px 4px 4px; border-radius: 99px;
cursor: pointer; margin-left: 2px; border: none; background: transparent; color: var(--t1); font: inherit;
}
.nb-userbtn:hover { background: var(--surf2); }
.nb-userbtn .nm { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
/* Angemeldeter Benutzer samt Statuszeile in der Kopfzeile (ADR-0131, Abnahme-Fund Schritt 3).
Der Präsenzpunkt braucht eine eigene positionierte Hülle - im MudAvatar säße er ohne
positionierten Vorfahren irgendwo, nur nicht an der Ecke. */
.nb-avatarhuelle { position: relative; display: inline-flex; }
.nb-userinfo { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.nb-userinfo .rl { font-size: 10.5px; color: var(--t3); line-height: 1.2; white-space: nowrap;
max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* ===== Bühne: Rail + Inhalt (Mockup .shell) ===== */
.nb-stage { height: calc(100vh - 58px); display: grid; grid-template-columns: var(--nb-rail-w, 238px) minmax(0, 1fr); }
.nb-stage.ohne-rail { grid-template-columns: minmax(0, 1fr); }
.nb-rail {
background: var(--bg2); border-right: 1px solid var(--line); padding: 12px 9px; overflow-y: auto;
position: relative;
}
/* Griff zum Ziehen der Spaltenbreite - liegt auf der Trennlinie, nicht daneben, damit er die
Aufteilung des Rasters nicht verändert. Sichtbar wird er erst beim Darüberfahren: Eine ständig
eingefärbte Linie wäre eine zweite Trennlinie neben der echten. */
/* Der Griff liegt INNEN an der Kante, nicht auf ihr: Drei Pixel darueber hinaus, und die Spalte
hatte etwas zu scrollen - eine waagrechte Bildlaufleiste unter einer Navigation, die gar nicht
breiter ist als ihre Spalte. */
.nb-griff {
position: absolute; top: 0; right: 0; width: 7px; height: 100%;
cursor: col-resize; z-index: 5; background: transparent;
transition: background .12s;
}
.nb-griff:hover, .nb-griff:active { background: var(--pri-w); }
/* Am Chat-Panel sitzt der Griff an der LINKEN Kante - die Breite wächst nach links (ADR-0131). */
.nb-griff.kante-links { right: auto; left: 0; cursor: ew-resize; }
/* Waagrechter Griff der geteilten Chat-Fläche: liegt als eigene Rasterzeile zwischen Liste und
Unterhaltung, nicht absolut - er trägt die Trennlinie selbst. */
.nb-griff.waagrecht {
position: relative; top: auto; right: auto; width: auto; height: 7px;
cursor: row-resize; border-top: 1px solid var(--line);
}
/* Am angedockten Antwortbereich liegt der Griff auf dessen Oberkante - absolut, weil der Bereich
selbst schon die Trennlinie traegt. */
.nb-griff.waagrecht.kante-oben {
position: absolute; top: -3px; left: 0; right: 0; height: 7px;
border-top: none;
}
.nb-rail .kopf {
padding: 4px 11px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3);
display: flex; align-items: center; gap: 6px;
}
.nb-rail a {
display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px;
font-size: 13.5px; color: var(--t2); cursor: pointer; text-decoration: none; margin-bottom: 1px;
/* Ein langer Name bricht um, statt die Spalte zu verbreitern: Sonst waere die Spalte auf einmal
breiter als ihr Platz, und darunter staende eine waagrechte Bildlaufleiste. */
min-width: 0; overflow: hidden;
}
.nb-rail a:hover { background: var(--surf2); color: var(--t1); }
.nb-rail a.on { background: var(--pri-w); color: var(--pri-t); font-weight: 600; }
/* Der stille Zaehler am Menuepunkt (flow-agent-031): rechts, gedeckt, kein Signalrot - er soll
da sein, nicht stoeren. */
.nb-menuezahl {
margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; text-align: center;
font-size: 11px; font-weight: 600; line-height: 18px; background: var(--surf2); color: var(--t2);
}
.nb-arbeit { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.nb-inhalt { overflow-y: auto; padding: 20px; flex: 1; min-height: 0; }
/* Aktionsleiste (ADR-0089, Nachtrag 13): ein Band unter der Navigation, von der Modul-Spalte
bis zum Chat-Panel. Sie scrollt NICHT mit - was man tun kann, soll nicht davonwandern. */
.nb-aktionsleiste {
display: flex; align-items: center; gap: 2px; flex: 0 0 auto; overflow-x: auto;
height: 41px; padding: 0 10px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
/* "Nach der ersten Spalte" heisst nicht immer dasselbe: Hat die Gruppe nur einen Eintrag, faellt
die aeussere Rail weg - dann IST die Modul-Spalte der Seite die erste, und das Band gehoert
NEBEN sie. Darum liegt es hier ausserhalb des Flusses: Im Fluss schoebe es die Navigation der
Seite um seine Hoehe nach unten, und die gehoert an den oberen Rand. Die Breite kommt aus
derselben Variablen, die der Spaltengriff setzt - so wandert das Band beim Ziehen mit. */
.nb-stage.ohne-rail .nb-aktionsleiste.hinter-rail {
position: absolute; top: 0; right: 0; left: var(--nb-modul-rail-w, 238px); z-index: 3;
}
.nb-akt {
display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
border: none; background: transparent; color: var(--t2); font: inherit; font-size: 13px;
white-space: nowrap; cursor: pointer;
}
.nb-akt:hover:not(:disabled) { background: var(--surf2); color: var(--t1); }
/* Blass, aber lesbar: Ein Knopf, den man nicht mehr entziffert, ist so gut wie versteckt -
und genau das Verstecken wollten wir nicht. */
.nb-akt:disabled { color: var(--t3); opacity: .55; cursor: not-allowed; }
.nb-akt.wichtig { color: var(--pri); font-weight: 600; }
.nb-akt.ab { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 14px; border-radius: 0 8px 8px 0; }
/* ===== Modul-eigene Rail (Mockup: railK etc.) - Seiten rendern ihre eigene linke Spalte ===== */
.nb-modul { display: grid; grid-template-columns: var(--nb-modul-rail-w, 238px) minmax(0, 1fr); margin: -20px; height: calc(100vh - 58px - var(--nb-leiste-h, 0px)); }
.nb-modul > .nb-rail { height: 100%; }
.nb-modul-inhalt { overflow-y: auto; padding: 20px; padding-top: calc(20px + var(--nb-leiste-schweb, 0px)); }
/* Seiten, die die Flaeche selbst in Spalten teilen: Die Polsterung wuerde ihre erste Spalte
hineinruecken, und dann sieht sie aus wie ein Kasten IN der Flaeche statt wie eine Spalte
DER Flaeche. */
.nb-modul-inhalt.randlos { padding: 0; padding-top: var(--nb-leiste-schweb, 0px); }
.nb-rail .sect {
padding: 16px 11px 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3); display: flex; align-items: center; gap: 6px;
}
/* Alle Knoepfe an den rechten Rand - eine Flucht, wie die Zaehler an den Zeilen darunter.
Zwischen Beschriftung und Knopf zu stehen hiess: Der Knopf springt mit der Laenge des Namens,
und das Auge findet ihn nicht wieder (Abnahme mj, 20.09.2026).
An einer EIGENEN Huelle festgemacht und nicht an MudBlazors Klassen: Deren Aufbau kann sich
mit der naechsten Fassung aendern, und dann stuenden die Knoepfe wieder mitten drin. */
.nb-rail .kopf .rechts,
.nb-rail .sect .rechts { margin-left: auto; display: inline-flex; align-items: center; }
/* Die Zahl bleibt VOR dem Knopf, mit Abstand: Sie gehoert zur Gruppe, nicht zum Einstellen. */
.nb-rail .sect .n { margin-left: auto; }
.nb-rail .sect .n + .rechts, .nb-rail .sect .n ~ .rechts { margin-left: 4px; }
/* Der kleine Pfeil an „Meine Arbeit": Der Eintrag fuehrt aus dem Modul heraus, und das soll man
sehen, bevor man klickt. */
.nb-rail a .hin { margin-left: 4px; opacity: .5; }
.nb-rail a .n {
margin-left: auto; font-size: 11px; color: var(--t3); background: var(--surf3);
border-radius: 99px; padding: 1px 7px;
}
.nb-rail a.on .n { color: var(--pri-t); background: transparent; }
/* Die Zahl mit dem Zahnrad dahinter (Leistenzahl, mj 12.10.2026): beim Überfahren des Eintrags wird die Zahl zum
Zahnrad. Auf Geräten ohne Maus steht das Zahnrad am gewählten Eintrag immer da - sonst käme man nie hin. */
.nb-rail a .nb-leistenzahl { margin-left: auto; display: inline-flex; align-items: center; position: relative; }
.nb-rail a .nb-leistenzahl .n { margin-left: 0; }
.nb-rail a .nb-leistenzahl .rad {
display: none; border: none; background: transparent; color: var(--t2); padding: 0 2px; cursor: pointer; line-height: 0;
}
.nb-rail a .nb-leistenzahl .rad:hover { color: var(--pri-t); }
.nb-rail a:hover .nb-leistenzahl.mit-rad .n,
.nb-rail a:focus-within .nb-leistenzahl.mit-rad .n { display: none; }
.nb-rail a:hover .nb-leistenzahl.mit-rad .rad,
.nb-rail a:focus-within .nb-leistenzahl.mit-rad .rad { display: inline-flex; }
@media (hover: none) {
.nb-rail a.on .nb-leistenzahl.mit-rad .rad { display: inline-flex; }
}
/* Ein Punkt, solange eine Einstellung etwas weglässt. */
.nb-rail a .nb-leistenzahl.wirkt::after {
content: ""; position: absolute; top: -2px; right: -4px; width: 6px; height: 6px; border-radius: 50%;
background: var(--mud-palette-primary);
}
/* Bereichsangabe an einem Rail-Eintrag: rechtsbündig und zurückgenommen, damit sie den Namen
nicht verdrängt. Gezeigt wird sie nur, wenn die Liste mehrere Bereiche umfasst - derselbe
Baumname darf je Bereich einmal vorkommen. */
.nb-rail a .nb-bereich {
margin-left: auto; font-size: 11px; color: var(--t3); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.nb-rail a.on .nb-bereich { color: var(--pri-t); opacity: .8; }
.nb-neu-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin: 4px 2px 10px; padding: 9px; border-radius: 9px; width: calc(100% - 4px);
background: var(--pri); color: var(--auf-pri); font-weight: 600; cursor: pointer; border: none; font: inherit;
}
.nb-neu-btn:hover { filter: brightness(1.1); }
/* ---- Kalender-Modul im Design des Auftraggebers (04.10.2026) ------------------------------
Gemessen am Entwurf: Stunde 48 px, Kalenderfarben aus Kalenderfarben.Palette (Server).
Hinterlegung und Rand werden aus der Kalenderfarbe GEMISCHT, nicht frei gewählt: 17 % bzw.
32 % auf --kal-basis trifft die gemessenen Werte (#1d2a40, #3a2f1f, #19332d) und trägt auch eine
frei gewählte Farbe und den hellen Modus. Flächen und Linien aus den Tokens - der Kalender
folgt dem Design des Bereichs wie jede andere Seite. */
.nb-kal { --kal-gruen: 17%; --kal-rand: 32%; }
html.light .nb-kal { --kal-gruen: 14%; --kal-rand: 40%; }
.nb-modul.nb-kal { grid-template-columns: var(--nb-modul-rail-w, 238px) 320px minmax(0, 1fr); }
.nb-modul.nb-kal.leiste-zu { grid-template-columns: 320px minmax(0, 1fr); }
.nb-modul.nb-kal.liste-zu { grid-template-columns: var(--nb-modul-rail-w, 238px) minmax(0, 1fr); }
.nb-modul.nb-kal.leiste-zu.liste-zu { grid-template-columns: minmax(0, 1fr); }
/* Leiste */
.nb-kal-neu { display: flex; gap: 8px; align-items: center; margin: 2px 2px 14px; }
.nb-kal-neu .neu { flex: 1; }
.nb-kal-neu .neu .mud-button-root:first-child { flex: 1; }
/* EINE HÖHE FÜR ALLE DREI (gemessen mj, 04.10.2026): Der Pfeil war 31 px hoch, der Knopf daneben
35 px - MudBlazor setzt .mud-menu auf align-self: center, damit sitzt das Menü in der Gruppe mittig
statt gestreckt. Gruppe und Einklapp-Knopf teilen sich deshalb eine feste Höhe. */
.nb-kal-neu { --nb-kal-neu-hoehe: 36px; }
.nb-kal-neu .neu { height: var(--nb-kal-neu-hoehe); }
.nb-kal-neu .neu > .mud-button-root { height: 100%; }
.nb-kal-neu .neu > .mud-menu { align-self: stretch; display: inline-flex; width: auto; }
.nb-kal-neu .neu > .mud-menu .mud-icon-button {
height: 100%; padding: 0 6px;
border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
}
.nb-kal-klapp { width: var(--nb-kal-neu-hoehe); height: var(--nb-kal-neu-hoehe); border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--t2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nb-kal-klapp:hover { background: var(--surf2); color: var(--t1); }
.nb-kal-mini { padding: 0 6px 6px; }
.nb-kal-mini .mkopf { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 6px; }
.nb-kal-mini .mkopf span { flex: 1; }
.nb-kal-mini .mkopf button { background: none; border: none; color: var(--t2); cursor: pointer; font-size: 16px; width: 24px; }
.nb-kal-mini .mraster { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; column-gap: 0; }
.nb-kal-mini .mwt { font-size: 10.5px; color: var(--t3); text-align: center; padding: 2px 0; }
.nb-kal-mini .mtag { background: none; border: none; color: var(--t1); font: inherit; font-size: 12px; padding: 5px 0; border-radius: 6px; cursor: pointer; }
.nb-kal-mini .mtag:hover { background: var(--surf2); }
.nb-kal-mini .mtag.fremd { color: var(--t3); }
/* Ein Band über die sichtbaren Tage, ohne Lücke - rund nur an seinen Enden (siehe BandKlasse). */
.nb-kal-mini .mtag.sichtbar { background: var(--pri-w); border-radius: 0; }
.nb-kal-mini .mtag.sichtbar.anfang { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.nb-kal-mini .mtag.sichtbar.ende { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.nb-kal-mini .mtag.heute { background: var(--pri); color: var(--auf-pri); font-weight: 700; }
.nb-rail a.nb-kal-wahl { gap: 10px; }
.nb-kal-wahl .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Stift steht immer leise da - nur beim Darüberfahren sichtbar, fand ihn niemand (mj, 04.10.2026). */
.nb-kal-wahl .bearb, .nb-kal-wahl .art { opacity: .35; display: inline-flex; color: var(--t3); }
.nb-kal-wahl:hover .bearb { opacity: .9; }
/* Die Palette für die eigene Farbe - leise wie der Stift, deutlich beim Darüberfahren. */
.nb-kal-wahl .farbe { display: inline-flex; opacity: .35; }
.nb-kal-wahl:hover .farbe { opacity: .9; }
.nb-kal-wahl .farbe .mud-icon-button { padding: 2px; color: var(--t3); }
.nb-farbmenue { padding: 12px 14px; max-width: 260px; }
.nb-farbmenue .titel { font-size: 13px; font-weight: 600; color: var(--t1); }
.nb-farbmenue .hinweis { font-size: 12px; color: var(--t3); }
.nb-kal-wahl .art { opacity: .55; }
/* Ein Abo, das nicht nachkommt (kalender-028): ein Zeichen statt still veralteter Einträge. */
.nb-kal-wahl .warnung { display: inline-flex; color: var(--mud-palette-warning); }
.nb-abo-stand { font-size: 13px; color: var(--t2); display: flex; flex-direction: column; gap: 2px; }
/* Die Farbwahl eines Kalenders: die Palette des Servers, „automatisch" und eine eigene Farbe. */
.nb-farbwahl .punkte { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.nb-farbwahl .punkt {
width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer; position: relative;
background: var(--kf); border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--line2);
display: inline-flex; align-items: center; justify-content: center; color: var(--t2);
font: inherit; font-size: 11px; font-weight: 700;
}
.nb-farbwahl .punkt.an { border-color: var(--t1); }
.nb-farbwahl .punkt.auto { background: var(--surf2); }
.nb-farbwahl .punkt.frei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.nb-kal-chk { width: 15px; height: 15px; border-radius: 4px; border: 2px solid var(--kf); flex: none; position: relative; box-sizing: border-box; }
.nb-kal-chk.an { background: var(--kf); }
.nb-kal-chk.an::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid var(--bg2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Spalte „Termine" - die nächsten sieben Tage */
.nb-kal-liste { background: var(--surf); border-right: 1px solid var(--line); overflow-y: auto; height: 100%; padding: 0 0 16px; }
.nb-kal-liste .lkopf { display: flex; align-items: center; gap: 2px; padding: 12px 10px 8px 16px; position: sticky; top: 0; background: var(--surf); z-index: 2; }
.nb-kal-liste .lkopf .titel { flex: 1; font-size: 15px; font-weight: 700; color: var(--t1); }
.nb-kal-liste .lsuche { padding: 0 12px 8px; }
.nb-kal-liste .lsect { display: flex; justify-content: space-between; padding: 6px 16px 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
.nb-kal-liste .lsect span:last-child { text-transform: none; letter-spacing: 0; }
.nb-kal-liste .ltag { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 6px 10px 10px 6px; border-bottom: 1px solid var(--line); }
.nb-kal-liste .ldatum { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.nb-kal-liste .ldatum .wt { font-size: 10px; color: var(--t3); letter-spacing: .5px; }
.nb-kal-liste .ldatum .nr { font-size: 22px; font-weight: 700; color: var(--t1); line-height: 1.1; }
.nb-kal-liste .ldatum .mo { font-size: 11px; color: var(--t3); }
.nb-kal-liste .leintraege { display: flex; flex-direction: column; gap: 2px; }
.nb-kal-liste .leintrag { display: flex; gap: 9px; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.nb-kal-liste .leintrag:hover { background: var(--surf2); }
.nb-kal-liste .leintrag.ganztags { background: color-mix(in srgb, var(--kf) var(--kal-gruen), var(--kal-basis)); }
.nb-kal-liste .leintrag .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--kf); flex: none; margin-top: 6px; }
.nb-kal-liste .leintrag .lt { font-size: 14px; font-weight: 600; color: var(--t1); }
.nb-kal-liste .leintrag .lz { font-size: 12px; color: var(--t2); }
.nb-kal-liste .lleer { padding: 12px 16px; color: var(--t3); font-size: 13px; }
/* Arbeitsbereich: Kopfzeile und Raster */
.nb-kal-inhalt { background: var(--surf); display: flex; flex-direction: column; }
.nb-kal-kopf { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surf); z-index: 3; }
.nb-kal-kopf .mud-typography-h4 { font-size: 20px; font-weight: 700; margin: 0 4px 0 8px; white-space: nowrap; }
.nb-kal-kopf .kw { font-size: 11px; color: var(--t2); background: var(--surf2); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.nb-kal-ansichten { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line); margin-right: 4px; }
.nb-kal-ansichten button { width: 34px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nb-kal-ansichten button:hover { color: var(--t1); }
.nb-kal-ansichten button.on { background: var(--surf3); color: var(--t1); }
.nb-kal-ansichten .kal-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 15px; border: 1.5px solid currentColor; border-top-width: 3.5px; border-radius: 3px; font-size: 8.5px; font-weight: 700; line-height: 1; box-sizing: border-box; }
.nb-kal-woche { display: grid; background: var(--surf2); gap: 0 1px; }
.nb-kal-woche .kopfzelle { background: var(--surf); padding: 10px 10px 8px; display: flex; align-items: center; gap: 8px; }
.nb-kal-woche .kopfzelle .wt { font-size: 11px; color: var(--t3); letter-spacing: .5px; }
.nb-kal-woche .kopfzelle .nr { font-size: 18px; font-weight: 700; color: var(--t1); min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.nb-kal-woche .kopfzelle.heute .nr { background: var(--pri); color: var(--auf-pri); }
.nb-kal-woche .kopfzelle.zeitlabel { font-size: 10px; color: var(--t3); justify-content: flex-end; padding: 8px 6px; }
.nb-kal-woche .ganztags { background: color-mix(in srgb, var(--surf) 88%, var(--bg2)); min-height: 34px; padding: 4px; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--line2); cursor: pointer; }
.nb-kal-spalte { position: relative; background: var(--surf); }
.nb-kal-stunde { height: 48px; border-top: 1px solid var(--surf2); box-sizing: border-box; }
.nb-kal-zeitspalte .nb-kal-stunde { font-size: 10.5px; color: var(--t3); text-align: right; padding-right: 8px; padding-top: 3px; border-top-color: transparent; }
.nb-kal-block { position: absolute; border-radius: 6px; padding: 4px 7px; overflow: hidden; cursor: pointer; box-sizing: border-box;
background: color-mix(in srgb, var(--kf) var(--kal-gruen), var(--kal-basis));
border: 1px solid color-mix(in srgb, var(--kf) var(--kal-rand), var(--kal-basis)); color: var(--t1); }
.nb-kal-block:hover { filter: brightness(1.12); z-index: 2; }
/* ── Ziehen (kalender-008) ───────────────────────────────────────────────────────────────────
Ziehbar ist, was der Server als änderbar meldet. touch-action: none, damit der Finger am Tablet
den Termin zieht und nicht die Seite; user-select, damit kein Text markiert wird. */
.nb-kal-block.ziehbar, .nb-kal-zeile.ziehbar, .nb-kal-chip.ziehbar { cursor: grab; touch-action: none; user-select: none; }
.nb-kal-block .griff { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.nb-kal-block .griff:hover { background: color-mix(in srgb, var(--kf) 45%, transparent); }
.nb-kal-block.gezogen, .nb-kal-zeile.gezogen, .nb-kal-chip.gezogen { opacity: .35; }
.nb-kal-woche.zieht, .nb-kal-monat.zieht { cursor: grabbing; user-select: none; }
/* Der Schatten fängt keine Maus - sonst bekäme die Spalte darunter das Eintreten nicht mit. */
.nb-kal-block.geist { pointer-events: none; z-index: 4; border-style: dashed; border-width: 2px; box-shadow: 0 6px 18px color-mix(in srgb, var(--schatten-farbe) 65%, transparent); }
.nb-kal-block.geist.gesperrt { border-color: var(--bad); }
.nb-kal-block.geist .bh { font-size: 11px; color: var(--t2); margin-top: 2px; }
.nb-kal-tag.ziel { outline: 2px dashed var(--pri); outline-offset: -2px; }
.nb-kal-tag.ziel.gesperrt { outline-color: var(--bad); }
.nb-kal-block .bt { font-size: 13px; font-weight: 600; line-height: 1.25; }
.nb-kal-block .bz { font-size: 11px; color: var(--kf); }
.nb-kal-block .bo { font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-kal-block.frei { border-style: dashed; }
.nb-kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--bad); z-index: 4; pointer-events: none; }
.nb-kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.nb-kal-chip { font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
background: color-mix(in srgb, var(--kf) var(--kal-gruen), var(--kal-basis));
border: 1px solid color-mix(in srgb, var(--kf) var(--kal-rand), var(--kal-basis)); color: var(--t1); }
.nb-kal-monat { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); background: var(--surf2); gap: 1px; }
.nb-kal-monat .kw-kopf, .nb-kal-monat .kw-zelle { background: var(--surf); }
.nb-kal-monat .kw-zelle { font-size: 10px; color: var(--t3); padding: 10px 6px; }
.nb-kal-wt { background: var(--surf); padding: 8px 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
.nb-kal-tag { background: var(--surf); min-height: 150px; padding: 6px 7px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nb-kal-tag:hover { background: color-mix(in srgb, var(--surf) 92%, var(--t1)); }
.nb-kal-tag .tkopf { display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-height: 24px; }
.nb-kal-tag .nr { font-size: 13px; color: var(--t2); padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.nb-kal-tag.fremd .nr { color: var(--t3); }
.nb-kal-tag.fremd .nb-kal-chip, .nb-kal-tag.fremd .nb-kal-zeile { opacity: .6; }
.nb-kal-tag.heute .nr { background: var(--pri); color: var(--auf-pri); font-weight: 700; min-width: 24px; text-align: center; }
.nb-kal-zeile { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t1); white-space: nowrap; overflow: hidden; cursor: pointer; padding: 1px 2px; border-radius: 4px; }
.nb-kal-zeile:hover { background: var(--surf2); }
.nb-kal-zeile .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--kf); flex: none; }
.nb-kal-zeile .zeit { color: var(--t2); flex: none; }
.nb-kal-zeile .nb-lesen { overflow: hidden; text-overflow: ellipsis; }
.nb-kal-tag .weitere { background: none; border: none; padding: 1px 2px; text-align: left; color: var(--pri-t); font: inherit; font-size: 12px; cursor: pointer; }
.nb-kal-eintrag { font-size: 11px; line-height: 1.35; padding: 1px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-kal-eintrag.abgeleitet { background: transparent; color: var(--t2); }
/* Liste (Agenda, kalender-007) */
.nb-kal-agenda { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.nb-kal-agenda .tag { border: 1px solid var(--line); border-radius: 12px; background: var(--surf); overflow: hidden; }
.nb-kal-agenda .tag h3 { margin: 0; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--t2); background: var(--bg2); display: flex; gap: 8px; align-items: center; }
.nb-kal-agenda .tag.heute h3 { color: var(--pri-t); }
.nb-kal-agenda .tag.ueberfaellig h3 { color: var(--bad); }
.nb-kal-agenda .zeile { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 6px 12px; border-top: 1px solid var(--line); border-left: 3px solid var(--kf, var(--pri)); font-size: 13px; cursor: pointer; }
.nb-kal-agenda .zeile:hover { background: var(--surf2); }
.nb-kal-agenda .zeile .zeit { color: var(--t2); font-variant-numeric: tabular-nums; }
.nb-kal-agenda .zeile .hinweis { color: var(--t3); font-size: 12px; }
.nb-kal-agenda .leer { padding: 6px 12px; color: var(--t3); font-size: 12px; border-top: 1px solid var(--line); }
.nb-kal-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--pri); flex: none; }
/* Arbeitsfreie Tage und Arbeitszeit im Kalenderraster */
.nb-kal-tag.arbeitsfrei { background: color-mix(in srgb, var(--surf) 94%, var(--pri) 6%); opacity: .68; }
.nb-kal-tag.arbeitsfrei:hover { opacity: 1; }
.nb-kal-tag.arbeitsfrei.hat-eintraege { opacity: 1; }
.nb-kal-frei-label { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-kal-sperre { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--t3) 12%, transparent) 6px 7px); pointer-events: none; }
/* Kommunikations-Modul: Chatverlauf */
.nb-chat { display: flex; flex-direction: column; height: calc(100vh - 58px - 40px); }
.nb-chat-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
/* Die Unterhaltung als Spalte in der Mitte (mj, 09.10.2026): Auf breiten Flächen klebten die Beiträge an beiden Rändern,
und das Auge sprang hin und her. Höchstens 860 px breit, der Rand wächst mit - als Innenabstand, damit die
Bildlaufleiste außen bleibt. Eingabe und die Leisten darüber stehen in derselben Spalte. */
.nb-mf-unterhaltung { --nb-chat-rand: max(12px, calc((100% - 860px) / 2)); }
.nb-mf-unterhaltung > .nb-chat-verlauf,
.nb-mf-unterhaltung > .nb-chat-eingabe,
.nb-mf-unterhaltung > .nb-chat-antwort-leiste,
.nb-mf-unterhaltung > .nb-chat-bearbeiten-leiste,
.nb-mf-unterhaltung > .nb-chat-erwaehnen,
.nb-mf-unterhaltung > .nb-chat-anhaenge-offen,
.nb-mf-unterhaltung > .nb-chat-aufnahme,
.nb-mf-unterhaltung > .nb-chat-aus-sprache,
.nb-mf-unterhaltung > .nb-tippt,
.nb-mf-unterhaltung > .nb-ki-status { padding-left: var(--nb-chat-rand); padding-right: var(--nb-chat-rand); }
.nb-chat-beitrag { max-width: 72%; padding: 8px 12px; border-radius: 12px; background: var(--surf2); align-self: flex-start; }
.nb-chat-beitrag.eigener { background: var(--pri-w); color: var(--pri-t); align-self: flex-end; }
.nb-chat-beitrag .meta { font-size: 10px; color: var(--t3); margin-bottom: 2px; }
/* kommunikation-017: Ändern und Löschen am eigenen Beitrag - leise, erst beim Überfahren deutlich. */
.nb-chat-beitrag .nb-chat-beitrag-aktionen { margin-left: 6px; opacity: .35; }
.nb-chat-beitrag:hover .nb-chat-beitrag-aktionen { opacity: 1; }
.nb-chat-beitrag-aktionen button { background: none; border: 0; padding: 0 2px; color: var(--t3); cursor: pointer; vertical-align: middle; }
.nb-chat-beitrag-aktionen button:hover { color: var(--t1); }
.nb-chat-beitrag .text.geloescht { font-style: italic; color: var(--t3); }
/* kommunikation-018: das Zitat über einer Antwort - ein Klick springt zum Beitrag. */
.nb-chat-zitat { display: block; width: 100%; text-align: start; font: inherit; font-size: 12px; background: var(--nb-hover);
border: 0; border-left: 3px solid var(--pri); border-radius: 6px; padding: 3px 8px; margin: 2px 0 4px; cursor: pointer;
color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-chat-zitat b { color: var(--t1); font-weight: 600; margin-right: 4px; }
.nb-chat-beitrag.angesprungen { outline: 2px solid var(--pri); transition: outline-color .4s; }
.nb-chat-antwort-leiste { display: flex; align-items: center; gap: 6px; padding: 4px 12px 0; font-size: 12px; color: var(--t2); }
.nb-chat-antwort-leiste .an { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* kommunikation-019: Vorschläge zum „@…“ über der Eingabe. */
.nb-chat-beitrag .text .nb-erwaehnung { color: var(--pri-t); font-weight: 600; background: var(--pri-w); border-radius: 4px; padding: 0 2px; }
/* Interne Verweise als Chip (kommunikation-035) - überall, wo Nachrichtentext gezeichnet wird. */
.nb-verweis-chip { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line);
background: var(--surf2); color: var(--pri-t); font-size: .92em; text-decoration: none; white-space: nowrap; }
a.nb-verweis-chip:hover { background: var(--pri-w); }
.nb-verweis-chip.ohne-ziel { color: var(--t2); }
/* Was ein Kollege an dieser Unterhaltung schreibt (kommunikation-030) - ein Hinweis über dem Verlauf. */
.nb-fremder-entwurf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; padding: 6px 10px;
border: 1px dashed var(--line2); border-radius: 6px; background: var(--surf2); color: var(--t2); font-size: 13px; }
.nb-fremder-entwurf .text { flex-basis: 100%; color: var(--t1); padding-top: 4px; }
/* KI-Vorschläge in der Unterhaltung (kommunikation-029) */
.nb-ki-vorschlaege { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--pri); border-radius: 6px; background: var(--surf2); }
.nb-ki-vorschlaege > .kopf { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; }
.nb-ki-vorschlaege > .kopf .nb-ki-alle { margin-left: auto; }
.nb-ki-vorschlag { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.nb-ki-vorschlaege > .kopf + .nb-ki-vorschlag { border-top: none; }
.nb-ki-vorschlag .art { color: var(--pri); flex: none; }
.nb-ki-vorschlag .mitte { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.nb-ki-vorschlag .mitte.felder .nb-ki-titel { flex: 2 1 240px; }
.nb-ki-vorschlag .mitte.felder .nb-ki-gruppe, .nb-ki-vorschlag .mitte.felder .nb-ki-faellig { flex: 1 1 140px; }
.nb-ki-vorschlag .titel { color: var(--t1); }
.nb-ki-vorschlag .stelle { flex-basis: 100%; color: var(--t2); font-size: 12.5px; font-style: italic; }
.nb-pf-ki-vorschlag { color: var(--pri); }
/* „Weitere“ in der Leiste der Kommunikation: die seltenen Sichten eingerückt darunter */
.nb-rail .nb-pf-weitere-liste a { padding-left: 28px; }
/* Stummgeschaltete Unterhaltungen: Zeichen am Namen, die Zahl leise. */
.nb-chatzeile .stumm { color: var(--t3); vertical-align: middle; }
.nb-chatzeile .ung.leise { background: var(--surf3); color: var(--t2); }
/* Sprachnachrichten: die Aufnahme über der Eingabe, der Abspieler im Beitrag. */
.nb-chat-aufnahme { display: flex; align-items: center; gap: 8px; padding-top: 6px; font-size: 12.5px; color: var(--t2); }
.nb-chat-aufnahme .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: nb-aufnahme 1.2s infinite; }
@keyframes nb-aufnahme { 50% { opacity: .3; } }
.nb-chat-beitrag audio.nb-chat-ton { display: block; width: 260px; max-width: 100%; height: 36px; }
/* Die Mitschrift einer Sprachnachricht - nur auf Verlangen, leise unter dem Abspieler. */
.nb-chat-beitrag .nb-chat-mitschreiben { padding: 4px 0 0; font-size: 12px; }
.nb-chat-beitrag .nb-chat-mitschreiben:disabled { color: var(--t3); cursor: default; text-decoration: none; }
.nb-chat-mitschrift { max-width: 260px; padding-top: 4px; font-size: 12.5px; font-style: italic; color: var(--t2); white-space: pre-wrap; }
/* „Neu erzeugen“ an der letzten KI-Antwort - leise in der Modellzeile. */
.nb-ki-neu { font: inherit; font-size: inherit; color: var(--pri-t); background: none; border: 0; padding: 0 0 0 6px; cursor: pointer;
display: inline-flex; align-items: center; gap: 2px; }
.nb-ki-neu:hover { text-decoration: underline; }
.nb-chat-aus-sprache { display: flex; align-items: center; gap: 6px; padding-top: 6px; font-size: 12px; color: var(--pri-t); }
.nb-chat-erwaehnen { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px 0; }
.nb-chat-erwaehnen button { font: inherit; font-size: 12px; border: 1px solid var(--line2); background: var(--surf); color: var(--t1);
border-radius: 99px; padding: 2px 9px; cursor: pointer; }
.nb-chat-erwaehnen button:hover { background: var(--pri-w); color: var(--pri-t); }
/* kommunikation-020: wer den Raum verwaltet. */
.nb-raum-verwalter { display: block; font-size: 11px; color: var(--pri-t); }
.nb-chat-bearbeiten-leiste { display: flex; align-items: center; gap: 6px; padding: 4px 12px 0; font-size: 12px; color: var(--pri-t); }
.nb-chat-beitrag.eigener .meta { color: var(--pri-t); opacity: .7; }
.nb-chat-beitrag .text { font-size: 13px; word-break: break-word; }
/* Kein pre-wrap mehr: Der Text wird als Markdown dargestellt, Absätze sind jetzt - beides
zusammen ergäbe doppelte Leerzeilen. Einzelne Umbrüche bleiben erhalten (harte Umbrüche in
der Pipeline), deshalb geht durch den Wechsel nichts verloren. */
.nb-chat-beitrag .text > :first-child { margin-top: 0; }
.nb-chat-beitrag .text > :last-child { margin-bottom: 0; }
.nb-chat-beitrag .text p { margin: 0 0 .5em; }
.nb-chat-beitrag .text ul, .nb-chat-beitrag .text ol { margin: .25em 0 .5em; padding-left: 1.2em; }
.nb-chat-beitrag .text li { margin: .15em 0; }
.nb-chat-beitrag .text code { font-size: 12px; padding: 1px 4px; border-radius: 4px;
background: color-mix(in srgb, var(--t2) 18%, transparent); }
.nb-chat-beitrag .text pre { margin: .4em 0; padding: 8px 10px; border-radius: 8px; overflow-x: auto;
background: color-mix(in srgb, var(--t2) 14%, transparent); }
.nb-chat-beitrag .text pre code { background: none; padding: 0; }
.nb-chat-beitrag .text blockquote { margin: .4em 0; padding-left: 8px; border-left: 2px solid var(--line);
opacity: .85; }
.nb-chat-beitrag .text h1, .nb-chat-beitrag .text h2, .nb-chat-beitrag .text h3,
.nb-chat-beitrag .text h4, .nb-chat-beitrag .text h5, .nb-chat-beitrag .text h6 {
font-size: 13px; font-weight: 600; margin: .5em 0 .25em; }
.nb-chat-beitrag .text table { border-collapse: collapse; margin: .4em 0; }
.nb-chat-beitrag .text th, .nb-chat-beitrag .text td { border: 1px solid var(--line); padding: 2px 6px; }
.nb-chat-beitrag.gewaehlt { outline: 2px solid var(--pri); }
/* Ältere Beiträge nachladen (kommunikation-016): leise oben im Verlauf, meldet sich beim Hochrollen selbst. */
.nb-chat-aelter { display: block; margin: 0 auto 8px; font: inherit; font-size: 11.5px; color: var(--t3); background: none;
border: 0; padding: 4px 10px; border-radius: 99px; cursor: pointer; }
.nb-chat-aelter:hover { background: var(--nb-hover); color: var(--t2); }
.nb-chat-neu-linie { display: flex; align-items: center; gap: 8px; color: var(--pri-t); font-size: 11px; }
.nb-chat-neu-linie::before, .nb-chat-neu-linie::after { content: ""; flex: 1; border-top: 1px solid var(--pri); opacity: .5; }
.nb-chat-eingabe { display: flex; gap: 8px; padding-top: 10px; align-items: flex-end; }
/* Chat-Fenster aus der Glocke (kommunikation-014): feste Höhe, damit Verlauf und Eingabe ihren Platz
haben, statt dass das Fenster mit jeder Nachricht wächst. */
.nb-chatfenster { height: min(80vh, 760px); }
.nb-chatfenster .nb-chat-verlauf { padding: 10px 12px; }
.nb-chatfenster .nb-chat-eingabe { padding: 8px 12px 12px; }
/* Kein Tooltip darf das Dokument breiter machen. Ein Tooltip ist ein absolut positionierter
Popover: Steht sein Anker am rechten Rand (Chat-Panel) und ist der Text lang, ragt er über den
Viewport hinaus, das Dokument bekommt eine waagrechte Bildlaufleiste, das Layout rutscht - und
damit rutscht der Zeiger vom Anker weg, der Tooltip schließt, die Leiste verschwindet, es
rutscht zurück, der Zeiger steht wieder am Anker: ein Flattern, das erst mit dem Zeiger endet.
Die Grenze gilt global, weil auch der Quellen-Schnipsel der KI beliebig lang sein kann. */
.mud-tooltip { max-width: 320px; text-align: start; overflow-wrap: anywhere; }
/* Messenger-Fläche (ADR-0131): der wirtsneutrale Inhalt - eine Unterhaltung. Die Liste führt der Wirt
(Kommunikation → Chats, ADR-0212). */
.nb-mf { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nb-mf .nb-mf-unterhaltung { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nb-prow.on { background: var(--pri-w); }
/* Die KI steht oben in der Liste, vor Personen und Gruppen (ADR-0131) - abgesetzt, weil sie
weder Person noch Raum ist. */
.nb-prow.ki { border-bottom: 1px solid var(--line); }
.nb-prow .grpico.ki { background: var(--pri-w); color: var(--pri-t); }
/* Was eine Antwort belegt, steht darunter - fehlen die Chips, war nichts zu finden. */
.nb-ki-quellen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nb-ki-modell { font-size: 10.5px; color: var(--t3); margin-top: 4px; }
.nb-ki-warnung { margin: 0 12px 6px; padding: 7px 10px; border-radius: 8px; font-size: 11.5px;
background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); border: 1px solid var(--bad); }
/* Glocke der Kopfzeile (ADR-0131): Liste der Benachrichtigungen, Ungelesenes hervorgehoben. */
.nb-glocke { min-width: 340px; max-width: 420px; max-height: 60vh; overflow-y: auto; }
.nb-glocke .leer { padding: 18px 15px; font-size: 12.5px; color: var(--t3); }
.nb-glocke .zeile { display: flex; gap: 10px; align-items: flex-start; padding: 9px 15px;
cursor: pointer; border-bottom: 1px solid var(--line); }
.nb-glocke .zeile:hover { background: var(--surf2); }
/* Ungelesenes trägt einen Balken statt einer Flächenfarbe - eine eingefärbte Zeile las sich
wie eine Auswahl, nicht wie „neu". */
.nb-glocke .zeile.neu { border-left: 3px solid var(--pri); padding-left: 12px; }
/* Schlummern an der Erinnerung (kalender-030) - in der Glocke und im Fenster gleich. */
.nb-schlummern { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.nb-schlummern .was { font-size: 12px; color: var(--t3); margin-right: 2px; }
.nb-schlummern button { font: inherit; font-size: 12px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--line2); background: transparent; color: var(--t2); }
.nb-schlummern button:hover { background: var(--surf2); color: var(--t1); }
.nb-erinnerung { display: flex; flex-direction: column; }
.nb-glocke .txt { flex: 1; min-width: 0; }
.nb-glocke .txt b { font-size: 12.5px; font-weight: 600; display: block; }
.nb-glocke .txt span { font-size: 11.5px; color: var(--t3); display: block;
overflow: hidden; text-overflow: ellipsis; }
.nb-glocke .mal { margin-left: 6px; color: var(--pri-t); font-weight: 700; }
.nb-glocke .zt { font-size: 10.5px; color: var(--t3); white-space: nowrap; }
/* Präsenzpunkt (ADR-0131): sitzt an der Ecke des Avatars bzw. als kleiner Punkt im Menü.
Farbe = Status; der Text daneben sagt, WOHER der Status kommt. */
.nb-pres {
position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px;
border-radius: 50%; border: 2px solid var(--bg2); box-sizing: content-box;
}
.nb-pres.frei { background: var(--ok); }
.nb-pres.busy { background: var(--warn); }
.nb-pres.dnd { background: var(--bad); }
.nb-pres.weg { background: var(--t3); }
.nb-pres.nb-pres-menu { position: static; display: inline-block; width: 9px; height: 9px;
border: 0; margin-right: 8px; vertical-align: baseline; }
.nb-prow .grpico { position: relative; }
.nb-chatkopf { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.nb-chatkopf .t2 { flex: 1; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
.nb-chatkopf .ic2 { cursor: pointer; color: var(--t3); font-size: 14px; background: none; border: none; padding: 2px; }
.nb-chatkopf .ic2:hover, .nb-chatkopf .ic2.an { color: var(--pri-t); }
.nb-prow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; }
.nb-prow:hover { background: var(--surf2); }
.nb-prow .grpico { width: 30px; height: 30px; border-radius: 10px; background: var(--surf3, var(--surf2));
display: grid; place-items: center; font-size: 12px; color: var(--t2); flex: 0 0 30px; }
.nb-prow .nm3 { flex: 1; min-width: 0; }
.nb-prow .nm3 b { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-prow .nm3 span { font-size: 10.5px; color: var(--t3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-prow .ung { background: var(--pri); color: var(--auf-pri); border-radius: 99px; font-size: 10px; font-weight: 700; padding: 1px 6px; }
.nb-crailh { padding: 13px 15px 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; }
.nb-crailh .t { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--t3); flex: 1; }
.nb-chattop { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.nb-chattop .zur { cursor: pointer; color: var(--t3); font-size: 17px; }
.nb-chattop .zur:hover { color: var(--pri-t); }
.nb-chattop .titel { flex: 1; font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-appbar .nb-hico { position: relative; }
.nb-appbar .nb-hico .ung { position: absolute; top: 2px; right: 0; background: var(--pri); color: var(--auf-pri);
border-radius: 99px; font-size: 9px; font-weight: 700; padding: 0 4px; line-height: 13px; }
/* ---------- Modale Fenster (generelles UI-Design) ----------
1) Deutlich vom Hintergrund abgehoben: Primärfarbener Rahmen mit weichem Leuchten.
2) Reiter: Luft zwischen Reiterzeile und Inhalt sowie zwischen den Reitern.
3) Feste Höhe mit innerem Scrollen (nb-modal-fest) - kein Springen beim Reiterwechsel. */
/* MudDialog-basierte Fenster (KI-Fortschritt u. a.) tragen denselben Look. */
.mud-dialog {
border: 1px solid var(--mud-palette-primary);
border-radius: 10px;
box-shadow:
0 0 18px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent),
0 24px 64px var(--schatten-farbe);
}
.nb-modal {
border: 1px solid var(--mud-palette-primary);
border-radius: 10px;
box-shadow:
0 0 18px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent),
0 24px 64px var(--schatten-farbe);
}
.nb-modal .mud-tabs-toolbar { margin-bottom: 18px; }
.nb-modal .mud-tab { margin-right: 10px; }
.mud-tabs-panels { padding-top: 10px; }
.nb-modal-fest { height: 64vh; display: flex; flex-direction: column; }
.nb-modal-fest .mud-tabs { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.nb-modal-fest .mud-tabs-panels { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
html.nb-glow-aus .nb-modal,
html.nb-glow-aus .mud-dialog {
box-shadow: 0 24px 64px var(--schatten-farbe);
}
/* Wer die nächste Frage beantwortet - über der Eingabe, nicht erst unter der Antwort (ADR-0134). */
.nb-ki-antwortet { font-size: 11px; color: var(--t3); padding: 4px 2px 0; }
/* Vermerk an einer Antwort ohne Hausunterlagen: „keine Quellen" heißt hier nicht
„nichts gefunden", sondern „nicht gesucht". */
.nb-ki-ohnehaus { margin-left: 4px; color: var(--warn); }
/* Laufende KI-Frage: Die eigene Frage steht sofort da, blass, bis der Server sie geschrieben hat. */
.nb-chat-beitrag.vorlaeufig { opacity: .6; }
/* Die Statuszeile liegt ÜBER der Eingabe, nicht im Verlauf: Im Verlauf wäre sie bei längerem
Gespräch unterhalb der sichtbaren Kante - da war der bisherige Ladebalken. */
.nb-ki-status { display: flex; align-items: center; gap: 8px; padding: 6px 2px 0;
font-size: 12px; color: var(--t2); }
/* Das Fragezeichen eines Reiters im Einstellungs-Fenster steht rechts über dem Inhalt. */
.nb-einst-kopf { display: flex; justify-content: flex-end; margin-top: -8px; }
/* „Anna schreibt …" - über der Eingabe, damit es beim Tippen im Blick liegt. */
.nb-tippt { font-size: 11px; color: var(--t3); padding: 4px 2px 0; font-style: italic; }
/* Der KI-Entwurf: sichtbar abgesetzt, weil ihn außer dem Fragenden noch niemand sieht. */
.nb-ki-entwurf { border: 1px dashed var(--pri); border-radius: 10px; padding: 8px 10px; margin: 6px 2px 0;
background: color-mix(in srgb, var(--pri) 6%, transparent); }
.nb-ki-entwurf .kopf { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t2); }
.nb-ki-entwurf .kopf .modell { opacity: .8; }
.nb-ki-entwurf .knoepfe { display: flex; gap: 8px; margin-top: 6px; }
/* „eingestellt von … · bearbeitet" neben Name und Zeit. */
.nb-ki-quelle-vermerk { opacity: .8; }
/* Die Leiste unter der Eingabe: Womit die KI antwortet, gehört dorthin, wo man schreibt. */
.nb-eingabeleiste { display: flex; align-items: center; gap: 6px; padding: 2px 2px 0;
font-size: 11px; color: var(--t3); }
.nb-eingabeleiste .wer, .nb-eingabeleiste .token { white-space: nowrap; }
/* Postfach: drei Spalten wie in jedem Mailprogramm - wer antwortet, will die Frage daneben sehen. */
/* Kategorien: die Gliederung, die Mailordner ersetzt (ADR-0093). Eine schmale Spalte links -
sie ist Wegweiser, nicht Inhalt. */
.nb-postfach { display: grid; grid-template-columns: 180px minmax(260px, 360px) 1fr;
gap: var(--nb-spalt, 12px);
height: calc(100vh - 190px - var(--nb-leiste-h, 0px)); }
/* Ohne Kategorienspalte: Die Gliederung steht seit dem Umbau in der Modul-Leiste links. */
/* Ohne Seitenkopf laeuft die Flaeche ueber die ganze Modulhoehe - der Kopf steht jetzt IN der
Spalte, so wie ueber einer Rail. */
/* Ohne Luecke zwischen den Spalten: Die Listenspalte traegt eine Trennlinie und einen eigenen
Hintergrund - das trennt genug. Die Luecke liess dagegen einen Streifen Hintergrund neben dem
angedockten Antwortbereich stehen, und ein negativer Rand half nicht: Die Inhaltsspalte
schneidet ihn ab (overflow: hidden), sonst wuerde der rollende Verlauf darunter hervorlaufen. */
/* Die dritte Spalte nimmt nur, was sie braucht: „auto" heisst zugeklappt ein Griff, aufgeklappt
ihre Breite - die Nachricht behaelt den Rest. */
.nb-postfach.zwei.mit-aufgaben {
grid-template-columns: var(--nb-nachrichten-w, 340px) minmax(0, 1fr) auto;
}
.nb-postfach.zwei { grid-template-columns: var(--nb-nachrichten-w, 340px) minmax(0, 1fr); gap: 0;
height: calc(100vh - 58px - var(--nb-leiste-h, 0px) - var(--nb-leiste-schweb, 0px)); }
.nb-kat-leiste { overflow-y: auto; font-size: 13px; }
.nb-kat-leiste .titel { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
color: var(--t3); margin: 4px 0 6px 6px; display: flex; align-items: center; gap: 4px; }
.nb-kat-zeile { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px;
cursor: pointer; color: var(--t2); }
.nb-kat-zeile:hover { background: var(--surf2); }
.nb-kat-zeile.on { background: var(--pri-w); color: var(--pri-t); font-weight: 600; }
.nb-kat-zeile .sym { width: 14px; text-align: center; }
.nb-kat-zeile .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-kat-zeile .anz { color: var(--t3); font-size: 11px; }
.nb-kat-zeile.fremd .nm { font-style: italic; }
/* Farb- und Symbolwahl im Formular */
.nb-kat-symbol { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px;
cursor: pointer; border: 1px solid var(--line); }
.nb-kat-symbol.on { border-color: var(--pri); color: var(--pri); }
/* Die Spalte selbst - Kopf oben fest, Liste darunter scrollend. Farbe und Trennlinie wie bei
einer Rail-Spalte: Sie ist eine Spalte der Flaeche, kein Kasten darin. */
.nb-pf-spalte {
display: flex; flex-direction: column; min-height: 0; position: relative;
background: var(--bg2); border-right: 1px solid var(--line);
/* Platz fuer den Griff an der Kante: Ohne ihn laege die Bildlaufleiste der Liste genau
darunter, und wer sie ziehen wollte, veraenderte die Spaltenbreite. */
padding-right: 7px;
}
.nb-pf-spalte > .kopf {
display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
padding: 14px 14px 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3);
}
/* Suchfeld ueber der Liste, darunter der Satz, was gesucht wird (ADR-0147, Punkt 7). Der Satz
steht DAUERHAFT da und nicht erst im Fehlerfall: Wer nichts findet, liest sonst „es gibt das
nicht" - die schlimmste Antwort, weil sie falsch ist und sicher klingt. */
.nb-pf-suche { flex: 0 0 auto; padding: 0 14px 8px; }
.nb-pf-suche .mud-input-control { margin-top: 0; }
.nb-pf-suche .hinweis {
display: block; margin-top: 2px; font-size: 11px; color: var(--t3); line-height: 1.4;
}
/* Die Erklaerung zur leeren Trefferliste darf nicht wie eine Fehlermeldung aussehen - es ist
kein Fehler passiert, die Suche hat nur Grenzen. */
/* „gefunden in Rechnung.pdf" - die Erklärung, warum diese Zeile im Ergebnis steht. Zurückhaltend
gesetzt: Sie beantwortet eine Frage, sie ist nicht der Inhalt der Zeile. */
/* Der Stand des Anhangs-Durchsuchens in der Kontenzeile. Zurückhaltend: Es ist eine Auskunft
über einen Hintergrundlauf, keine Handlungsaufforderung. */
/* Der Editor IN der Fläche, nicht darüber (ADR-0150). Er füllt den Inhaltsbereich; die Rail
daneben bleibt stehen, damit der Weg zurück sichtbar ist. */
.nb-editorflaeche {
display: flex; flex-direction: column; min-height: 0; height: 100%;
background: var(--bg2);
}
.nb-editorflaeche .kopf {
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg2);
}
.nb-editorflaeche .kopf .name { font-weight: 600; }
.nb-editorflaeche .kopf .hinweis { font-size: 11px; opacity: .6; }
.nb-editorflaeche iframe { flex: 1; border: 0; width: 100%; min-height: 0; }
/* Im Vollbild sitzt der Kasten direkt auf dem Bildschirm - ohne den Hintergrund der Fläche
sähe man durch ihn hindurch. */
.nb-editorflaeche.voll { background: var(--bg); }
.nb-editorflaeche:fullscreen { background: var(--bg); }
@media (max-width: 900px) {
/* Auf schmalem Schirm ist der Hinweis das Erste, was weichen darf. */
.nb-editorflaeche .kopf .hinweis { display: none; }
}
/* Der Office-Editor im Fenster: Er braucht Platz, sonst arbeitet man durch ein Schlüsselloch. */
.nb-editor { height: 78vh; display: flex; }
.nb-editor iframe { flex: 1; border: 0; width: 100%; height: 100%; }
/* Sichtprüfung: links das Original, rechts der gelesene Text. Nebeneinander, weil man eine Zeile
auf dem Beleg mit derselben Zeile im Ergebnis vergleicht - untereinander müsste man scrollen
und dabei behalten, was oben stand. */
/* Das Fenster steht, gerollt wird NUR in den beiden Hälften.
Abnahme-Fund mj: Rechts rollte der Text das ganze Fenster mit - und damit wanderte links das
PDF samt seiner Werkzeugleiste aus dem Bild. Zum Vergleichen taugt das nicht: Man will eine
Zeile rechts suchen und dabei links stehenbleiben. */
.nb-pruefen { height: 88vh; display: flex; flex-direction: column; }
.nb-pruefen-inhalt {
flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
.nb-erkennung {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
flex: 1; min-height: 0;
}
.nb-erkennung > div {
display: flex; flex-direction: column; min-height: 0;
border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.nb-erkennung .kopf {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--line);
}
.nb-erkennung .kopf .zaehler { font-weight: 400; letter-spacing: 0; text-transform: none; }
.nb-erkennung .original { background: var(--bg2); }
.nb-erkennung .original img,
.nb-erkennung .original object {
flex: 1; min-height: 0; width: 100%; object-fit: contain; border: 0;
}
.nb-erkennung .kein-bild {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; flex: 1; color: var(--t3); font-size: 13px; text-align: center; padding: 16px;
}
/* Der gelesene Text in Festbreite: Eine Rechnungsnummer liest man zeichenweise, und in einer
Proportionalschrift sehen 1 und l gleich aus - genau da steckt der Fehler, den man sucht. */
.nb-erkennung .gelesen pre {
margin: 0; padding: 10px; overflow: auto; flex: 1; white-space: pre-wrap;
word-break: break-word; font-size: 12.5px; line-height: 1.5;
font-family: var(--nb-schriftart-code);
}
.nb-erkennung .gelesen .leer { padding: 16px; color: var(--t3); font-size: 13px; }
@media (max-width: 900px) {
/* Auf schmalem Schirm geht nebeneinander nicht mehr - dann lieber untereinander als winzig.
Dann rollt auch wieder das Fenster: Zwei Hälften übereinander, die je für sich rollen,
hiessen zwei Fensterchen von je einer Handbreit. */
.nb-pruefen { height: auto; }
.nb-pruefen-inhalt { overflow: auto; }
.nb-erkennung { grid-template-columns: 1fr; }
.nb-erkennung > div { min-height: 55vh; }
}
/* Der Stand der Verarbeitung selbst - zwei Angaben nebeneinander, ohne Kasten im Kasten. */
.nb-engine { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.nb-anhangsstand {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
margin-top: 4px; font-size: .75rem; opacity: .75;
}
.nb-anhangsstand .mud-icon-root { font-size: 15px; }
.nb-anhangsstand .scan, .nb-anhangsstand .huelle { cursor: help; }
.nb-pf-fund {
display: flex; align-items: center; gap: 4px;
margin-top: 2px; font-size: 11px; color: var(--t3);
}
.nb-pf-fund .mud-icon-root { font-size: 13px; }
.nb-pf-nichts { line-height: 1.55; }
.nb-pf-nichts p { margin: 10px 0 4px; }
.nb-pf-nichts ul { margin: 0; padding-left: 18px; }
.nb-pf-nichts li { margin-bottom: 6px; }
.nb-pf-liste { overflow-y: auto; flex: 1; min-height: 0; }
/* Die Inhaltsspalte teilt sich: Oben rollt der Verlauf, unten haengt der Antwortbereich fest.
Mitzurollen hiess, beim Nachlesen genau das Feld zu verlieren, in dem man gerade schreibt. */
.nb-pf-inhalt { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.nb-pf-lauf { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.nb-pf-liste .leer, .nb-pf-inhalt .leer { padding: 16px; color: var(--t3); font-size: 13px; }
/* Tagestrenner: Eine Liste ohne sie liest sich wie eine Tabelle - alle Zeilen gleich weit weg.
Mitlaufend am oberen Rand, damit beim Scrollen nicht der Bezug verlorengeht - und deshalb mit
DECKENDEM Hintergrund: Ein durchsichtiger stünde über den Zeilen, die darunter wegscrollen.
(Genau das passierte mit einem Farbwert, den es nicht gibt - CSS fällt dann still auf
durchsichtig zurück, und der Fehler sieht aus wie ein Fehler im Layout.) */
.nb-pf-tag {
font-size: 11px; font-weight: 700; letter-spacing: 1.1px; color: var(--t3);
text-transform: uppercase; padding: 10px 12px 6px; position: sticky; top: 0;
background: var(--bg2); border-bottom: 1px solid var(--line); z-index: 2;
}
/* Zeile im Stil der schmalen Leiste (ADR-0089 Nachtrag 13): gerundet, durch Luft getrennt statt
durch Linien - und innen nach dem Entwurf gebaut. Vier Zeilen in fester Ordnung: wer, worum es
geht, wie es anfaengt, und woran man ist. Der Auszug ist der eigentliche Gewinn: Ein Betreff
wie "Ihre Anfrage" sagt nichts, der erste Satz fast alles. */
.nb-pf-zeile {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
padding: 9px 10px; margin: 0 6px 3px; border-radius: 10px; cursor: pointer;
}
.nb-pf-zeile:hover { background: var(--surf2); }
.nb-pf-zeile.on { background: var(--pri-w); }
/* Das Symbolfeld haelt den linken Rand: Ohne es beginnt jede Zeile ein paar Pixel woanders,
weil der Name mal kurz und mal lang ist. */
/* „horcht" in der Postfachliste - klein und ruhig: Es ist der Normalzustand, kein Alarm. Sein
Fehlen ist die Auskunft, und die sucht man dann auch. */
.nb-horcht {
display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
font-size: 11px; color: var(--ok);
}
/* Das Kontextmenue der Liste. Fest positioniert und nicht im Fluss: Es steht, wo geklickt wurde,
und die Liste darunter rollt nicht mit ihm weg. */
/* „horcht" in der Postfachliste - klein und ruhig: Es ist der Normalzustand, kein Alarm. Sein
Fehlen ist die Auskunft, und die sucht man dann auch. */
.nb-horcht {
display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
font-size: 11px; color: var(--ok);
}
/* Wie ein Postfach bedient wird - klein unter dem Abrufzeitpunkt. „horcht" ist der Normalfall
und deshalb ruhig; sein Fehlen ist die Auskunft, die man sucht. */
.nb-abrufart { display: flex; align-items: center; font-size: 11px; color: var(--t3); margin-top: 2px; }
.nb-abrufart .horcht { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); }
.nb-abrufart .still { display: inline-flex; align-items: center; gap: 3px; color: var(--t3); }
/* Wie ein Postfach bedient wird - klein unter dem Abrufzeitpunkt. „horcht" ist der Normalfall
und deshalb ruhig; sein Fehlen ist die Auskunft, die man sucht. */
.nb-abrufart { display: flex; align-items: center; font-size: 11px; color: var(--t3); margin-top: 2px; }
.nb-abrufart .horcht { display: inline-flex; align-items: center; gap: 3px; color: var(--ok); }
.nb-abrufart .still { display: inline-flex; align-items: center; gap: 3px; color: var(--t3); }
/* Die dritte Spalte: Aufgaben zur Unterhaltung (ADR-0135). Einklappbar, weil sie nicht immer
gebraucht wird - und weil eine Spalte, die man nicht wegbekommt, auf schmalen Schirmen die
Nachricht verdraengt, um die es eigentlich geht. Zugeklappt bleibt nur der Griff stehen: Er
traegt die Zahl, und ohne ihn wuesste niemand, dass es die Spalte gibt. */
.nb-aufgabenspalte {
display: flex; border-left: 1px solid var(--line); background: var(--bg2);
min-width: 0; overflow: hidden;
}
.nb-aufgabenspalte .griff {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 6px; background: none; border: 0; cursor: pointer; color: var(--t3);
}
.nb-aufgabenspalte .griff:hover { color: var(--t1); }
.nb-aufgabenspalte .griff .zahl {
font-size: 10px; background: var(--pri-w); color: var(--pri-t);
border-radius: 8px; padding: 0 5px;
}
.nb-aufgabenspalte .inhalt { width: 260px; padding: 8px 10px 12px 2px; overflow-y: auto; }
.nb-aufgabenspalte .kopf {
display: flex; align-items: center; justify-content: space-between;
font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--t3);
margin-bottom: 6px;
}
.nb-aufgabenspalte .leer { font-size: 12px; color: var(--t3); line-height: 1.5; }
.nb-aufgabe {
border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; margin-bottom: 6px;
background: var(--surf);
}
/* Ueberfaellig: ein Rand, keine Flaeche. Eine rote Kachel schreit; ein roter Rand sagt es. */
.nb-aufgabe.faellig { border-color: var(--bad); }
.nb-aufgabe.faellig .frist { color: var(--bad); font-weight: 600; }
.nb-aufgabe .zeile1 { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.nb-aufgabe .nr { color: var(--t3); }
.nb-aufgabe .st { color: var(--t2); }
.nb-aufgabe .st.erledigt { color: var(--ok); }
.nb-aufgabe .st.verworfen { color: var(--t3); text-decoration: line-through; }
.nb-aufgabe .titel { font-size: 13px; color: var(--t1); margin: 2px 0 3px; line-height: 1.35; }
.nb-aufgabe .zeile2 {
display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--t3);
}
.nb-aufgabe .grund { font-size: 11px; color: var(--t3); margin-top: 3px; font-style: italic; }
.nb-aufgabe .zeit { color: var(--t2); font-variant-numeric: tabular-nums; }
.nb-aufgabe .projekt {
display: flex; align-items: center; gap: 4px; margin-top: 3px;
font-size: 11px; color: var(--t3);
}
/* Die Knoepfe sitzen rechts in der Zeile - die Angaben links, die Handlung rechts. */
.nb-aufgabe .zeile2 .mud-icon-button { margin-left: auto; }
/* Die Klappgriffe in der Leiste: klein und stumm - sie sind Bedienung, keine Auskunft. */
.nb-rail .sect .klapp {
background: none; border: 0; padding: 0 2px 0 0; cursor: pointer; color: var(--t3);
display: inline-flex; align-items: center;
}
.nb-rail .sect .klapp:hover { color: var(--t1); }
.nb-rail .hinweis { font-size: 11px; color: var(--t3); padding: 2px 8px 6px; line-height: 1.4; }
/* Die eigene Marke in der Zeile: rund statt eckig, ohne Symbol. Eine Kategorie sagt, worum es
geht; eine Marke, was ICH damit vorhabe - gleich auszusehen hiesse, beides zu verwechseln. */
.nb-pf-zeile .eigen {
font-size: 10px; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--f, var(--line2)); color: var(--f, var(--t2));
white-space: nowrap;
}
/* Die Farbwahl der Marke: eine feste Auswahl, kein Farbwaehler - ein freier braechte Farben
hervor, die auf dunklem Grund nicht mehr zu sehen sind. */
/* Eine Zeile je Marke im Verwaltungsfenster: Name links, Zahl daneben, Handlungen rechts. */
.nb-markenzeile {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.nb-markenzeile .punkt { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.nb-markenzeile .name { flex: 1; min-width: 0; }
/* Die Zahl ist die Folge, die beim Loeschen zaehlt - deshalb steht sie immer da, nicht erst in
der Rueckfrage. */
.nb-markenzeile .anzahl { font-size: 11px; color: var(--t3); white-space: nowrap; }
.nb-markenzeile .farben { display: flex; gap: 4px; }
/* Der Bestand in der Kopfzeile der Liste: ruhig, weil er sich nicht bewegt - anders als die
Zahl in der Leiste, die sagt, was auf einen wartet. */
.nb-pf-spalte .kopf .bestand {
font-size: 11px; color: var(--t3); font-variant-numeric: tabular-nums;
}
/* Eine Seite, die in der Gruppenspalte des Rahmens steht und KEINE eigene braucht: Sie fuellt
die Buehne und bringt ihre Hoehe selbst mit. Ohne das landete sie in einem zweiten Raster mit
leerer erster Spalte - und die Liste stand in einer Rinne. */
.nb-flaeche {
height: calc(100vh - 58px - var(--nb-leiste-h, 0px));
padding-top: var(--nb-leiste-schweb, 0px);
margin: -20px; overflow: hidden;
/* Liste und Detailspalte nebeneinander - die Liste nimmt, was uebrig bleibt. */
display: flex; min-width: 0;
}
.nb-flaeche > .nb-aufgabenflaeche { flex: 1; min-width: 0; }
/* Die gewählte Aufgabe im Aufgabenfenster, Abschnitte außer „Aufgabe“ (mj, 13.10.2026: ein Fenster statt Seitenfenster). */
.nb-aufgabendetail { padding: 2px 0; }
.nb-aufgabe-nachrichtinhalt { border-top: 1px solid var(--line); padding-top: 8px; font-size: 12px; }
.nb-aufgabe-nachrichtinhalt .kopf { color: var(--t3); margin-bottom: 4px; }
.nb-aufgabe-nachrichtinhalt .text { white-space: pre-wrap; color: var(--t1); }
.nb-aufgabendetail .kopf {
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.nb-aufgabendetail .kopf .nr { font-size: 11px; color: var(--t3); }
.nb-aufgabendetail .kopf .titel { font-size: 14px; color: var(--t1); }
.nb-aufgabendetail .feld {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px;
}
.nb-aufgabendetail .feld .k { width: 70px; flex: none; color: var(--t3); }
.nb-aufgabendetail .antwort { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
/* Das Projekt über einen Monat (Block 3, 11.10.2026): Kopf, Summen nebeneinander, Tabellen mit rechtsbündigen Zahlen. */
.nb-projekt-kopf { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.nb-projekt-kopf .marke { padding: 1px 8px; border: 1px solid var(--line2); border-radius: 999px; color: var(--t2); }
.nb-projekt-kopf .leise { color: var(--t3); }
.nb-projekt-summen { display: flex; gap: 24px; }
.nb-projekt-summen > div { display: flex; flex-direction: column; }
.nb-projekt-summen .k { font-size: 11px; color: var(--t3); }
.nb-projekt-summen b { font-size: 18px; color: var(--t1); }
.nb-projektdetail td.zahl, .nb-projektdetail th.zahl { text-align: right; white-space: nowrap; }
.nb-projekt-aufgabe { cursor: pointer; }
.nb-projekt-aufgabe:hover { background: var(--surf2); }
/* Die Zeit an der Aufgabe (Block 2, 11.10.2026): Uhr, Summe, Buchungen. Eigene Zeilen lassen sich öffnen. */
.nb-aufgabenzeit-block { margin: 10px 0; border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; }
.nb-zeit-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-zeit-kopf .k { width: 70px; flex: none; color: var(--t3); }
.nb-zeit-laeuft { color: var(--pri-t); }
.nb-zeit-summe { margin: 8px 0 4px; color: var(--t2); }
.nb-zeit-leer { margin-top: 6px; color: var(--t3); }
.nb-buchung {
display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; border-radius: 4px; color: var(--t2);
}
.nb-buchung.eigene { cursor: pointer; }
.nb-buchung.eigene:hover { background: var(--surf2); }
.nb-buchung .wann { flex: none; width: 108px; }
.nb-buchung .dauer { flex: none; width: 52px; text-align: right; color: var(--t1); }
.nb-buchung .wer { flex: none; color: var(--t3); }
.nb-buchung .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-buchung .marke { flex: none; font-size: 11px; color: var(--t3); }
.nb-buchung .marke.nb-buchung-gekappt { color: var(--warn); }
.nb-aufgabenflaeche .filter .nb-filter-projekt,
.nb-aufgabenflaeche .filter .nb-filter-bearbeiter { max-width: 180px; }
.nb-aufgabendetail .antwort .k {
font-size: 11px; color: var(--t3); margin-bottom: 6px; display: block;
}
/* Die Aufgabenflaeche (ADR-0135, Nachtrag). Eine Spalte der Flaeche, kein Kasten darin - wie die
Kommunikation daneben. */
.nb-aufgabenflaeche { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.nb-aufgabenflaeche > .kopf {
display: flex; align-items: center; gap: 8px; padding: 10px 14px;
border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 2;
font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--t3);
}
.nb-aufgabenflaeche > .kopf .bestand { font-variant-numeric: tabular-nums; }
.nb-aufgabenflaeche > .kopf .suche { max-width: 220px; text-transform: none; }
.nb-aufgabenflaeche .leer { padding: 16px; color: var(--t3); font-size: 13px; }
/* Die Einengungen als Reihe statt als Spalte - fuenf Knoepfe sind keine Gliederung, und eine
Spalte kostet Platz, den die Liste braucht. */
.nb-aufgabenflaeche .filter {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 8px 14px; border-bottom: 1px solid var(--line);
}
.nb-aufgabenflaeche .filter button {
display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
background: none; border: 1px solid var(--line2); border-radius: 999px; cursor: pointer;
color: var(--t2); font-size: 12px;
}
.nb-aufgabenflaeche .filter button:hover { background: var(--surf2); }
.nb-aufgabenflaeche .filter button.on {
background: var(--pri-w); border-color: var(--pri); color: var(--pri-t);
}
.nb-aufgabenflaeche .filter button .n {
font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums;
}
.nb-aufgabenflaeche .filter .trenner {
width: 1px; height: 18px; background: var(--line2); margin: 0 4px;
}
.nb-aufgabenzeile {
padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.nb-aufgabenzeile:hover { background: var(--surf2); }
/* Ueberfaellig: ein Streifen am Rand, keine rote Flaeche. Eine Flaeche schreit, und wer den
ganzen Tag draufsieht, sieht sie irgendwann nicht mehr. */
.nb-aufgabenzeile.faellig { border-left: 3px solid var(--bad); padding-left: 11px; }
.nb-aufgabenzeile.faellig .frist { color: var(--bad); font-weight: 600; }
.nb-aufgabenzeile .zeile1 { display: flex; align-items: center; gap: 8px; }
.nb-aufgabenzeile .nr { font-size: 11px; color: var(--t3); font-variant-numeric: tabular-nums; }
.nb-aufgabenzeile .titel { font-size: 14px; color: var(--t1); }
.nb-aufgabenzeile .frist { font-size: 11px; color: var(--t2); white-space: nowrap; }
.nb-aufgabenzeile .zeile2 {
display: flex; align-items: center; gap: 10px; margin-top: 3px;
font-size: 11px; color: var(--t3);
}
.nb-aufgabenzeile .zeile2 .projekt,
.nb-aufgabenzeile .zeile2 .zeit { display: inline-flex; align-items: center; gap: 3px; }
.nb-aufgabenzeile .zeile2 .zeit { font-variant-numeric: tabular-nums; }
.nb-aufgabenzeile .zeile2 .mud-icon-button { margin-left: auto; }
/* Sichtbar nur als Vertretung (kalender-010) - die Marke sagt, für wen. */
.nb-aufgabenzeile .zeile2 .nb-vertretungsmarke { color: var(--pri-t); font-style: italic; }
.nb-vorhang { position: fixed; inset: 0; z-index: 1400; }
.nb-kontextmenue {
position: fixed; z-index: 1401; padding: 4px;
background: var(--surf); border: 1px solid var(--line2); border-radius: 10px;
box-shadow: 0 10px 30px color-mix(in srgb, var(--schatten-farbe) 65%, transparent);
/* Bleibt im Bild, auch wenn unten oder rechts geklickt wurde. */
max-height: 80vh; overflow: auto;
transform: translate(0, 0);
/* Das Menue waechst mit seinem laengsten Eintrag, statt ihn umbrechen zu lassen: „Noch zu
Lesen" stand ueber zwei Zeilen, und zwei Zeilen lesen sich wie zwei Eintraege (Abnahme mj,
21.09.2026). Die Obergrenze verhindert, dass ein langer Markenname das halbe Fenster
einnimmt - dann wird er abgeschnitten und der Titel nennt ihn ganz. */
min-width: 210px; width: max-content; max-width: 22rem;
}
/* „flex-start" ausdruecklich: Ohne das zentriert eine geerbte Knopfregel den Inhalt, und dann
stehen genau die Eintraege mittig, die KEINEN Pfeil tragen - der Pfeil schiebt die anderen mit
„margin-left:auto" nach links. Das Menue sah dadurch aus wie zwei verschiedene Listen. */
.nb-kontextmenue button {
display: flex; align-items: center; justify-content: flex-start; gap: 8px;
width: 100%; padding: 7px 10px;
background: none; border: 0; border-radius: 7px; cursor: pointer;
color: var(--t2); font-size: 13px; text-align: left;
}
/* Die Beschriftung nimmt den Platz - sonst haengt sie am Symbol und der Pfeil bestimmt, wo sie
steht. */
.nb-kontextmenue button > span {
flex: 1; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-kontextmenue button:hover:not(:disabled) { background: var(--surf2); }
.nb-kontextmenue button:disabled { opacity: .45; cursor: default; }
.nb-kontextmenue button .pfeil { margin-left: auto; opacity: .6; }
/* „Zurueck" unten und abgesetzt: Es fuehrt aus dem Zweig heraus und ist keine Handlung an der
Nachricht - stuende es zwischen ihnen, klickte man es versehentlich statt der ersten. */
.nb-kontextmenue button.zurueck {
margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; color: var(--t3);
}
/* Die Kopfzeilen im Original: Feste Schrift, weil dort Ausrichtung Bedeutung traegt - ein
Empfangsvermerk ist nach Spalten gebaut. Umbruch erlaubt, sonst schiebt eine einzige lange
DKIM-Signatur die ganze Spalte auf. */
.nb-kopfzeilen {
font-family: var(--nb-schriftart-code); font-size: 11px;
line-height: 1.45; white-space: pre-wrap; word-break: break-all;
background: var(--surf2); border: 1px solid var(--line); border-radius: 8px;
padding: 8px 10px; margin: 6px 0 0; max-height: 40vh; overflow: auto; color: var(--t2);
}
.nb-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--pri-t); }
/* Der Druckbogen steht am Bildschirm nicht im Weg. */
#nb-druck { display: none; }
/* Drucken: Nicht der Bildschirm, sondern ein Schriftstueck.
Der Bogen haengt fuer die Dauer des Druckens als KOPIE unmittelbar am Dokument (drucken.js).
Alles andere unmittelbar unter
faellt weg - nicht ueber eine Liste von Klassen, denn
die muesste jede Flaeche kennen, die es gibt, und die naechste neue druckte wieder mit.
Und zwar mit „display", nicht mit „visibility": Unsichtbar heisst NICHT platzlos. Die
ausgeblendete Flaeche belegte weiter ihre Hoehe, der Bogen begann darunter - und der Ausdruck
war eine leere Seite mit dem Text irgendwo dahinter. */
@media print {
body > *:not(#nb-druckbogen) { display: none !important; }
/* Die Flaeche setzt feste Hoehen und sperrt das Rollen - auf Papier gibt es beides nicht. */
html, body {
height: auto !important; overflow: visible !important;
background: var(--papier) !important; margin: 0 !important;
}
#nb-druckbogen {
display: block !important; position: static; width: 100%;
background: var(--papier); color: var(--papier-text); font-size: 11pt; line-height: 1.5;
}
#nb-druckbogen h1 { font-size: 15pt; margin: 0 0 12pt; }
/* Je Nachricht ein Block - und der Umbruch DAVOR, damit ein Faden nicht als Fliessband
herauskommt. Der erste bekommt keinen, sonst begaenne der Ausdruck mit einer leeren Seite. */
#nb-druckbogen section { break-before: page; page-break-before: always; padding-top: 6pt; }
#nb-druckbogen section:first-of-type { break-before: auto; page-break-before: auto; }
#nb-druckbogen .kopf {
border-bottom: 1px solid var(--papier-linie); padding-bottom: 6pt; margin-bottom: 8pt; font-size: 10pt;
}
#nb-druckbogen .koerper pre { white-space: pre-wrap; font-family: inherit; }
#nb-druckbogen img { max-width: 100% !important; }
/* Verweise mit ihrer Adresse: Auf Papier ist ein blaues Wort nichts wert. */
#nb-druckbogen a::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--papier-leise); }
/* Der Wochenplan (kalender-024): je Tag ein Block, der nicht über die Seite bricht; die Art als
Form, damit es in Graustufen lesbar bleibt. */
#nb-druckbogen .legende { font-size: 9pt; margin-bottom: 8pt; display: flex; gap: 12pt; }
#nb-druckbogen .tag { break-inside: avoid; border-top: 1px solid var(--papier-linie); padding: 4pt 0; }
#nb-druckbogen .tag .datum { font-weight: 700; }
#nb-druckbogen .eintrag { display: flex; gap: 6pt; font-size: 10pt; }
#nb-druckbogen .eintrag .zeit { min-width: 70pt; }
#nb-druckbogen .eintrag .ort { color: var(--papier-leise); }
#nb-druckbogen .leer { color: var(--papier-leise); }
/* Der Bogen ist die Seite - was im Browserfenster rollt, hat hier keine Bedeutung. */
@page { margin: 18mm 15mm; }
}
/* Die Trennlinie im Verlauf: „ab hier ist es neu". Eine Linie mit Wort statt einer Faerbung der
Blasen - Farbe traegt im Verlauf schon eine Bedeutung (wer hat gesprochen), und zwei
Bedeutungen auf einem Mittel liest niemand auseinander. */
.nb-chat-neu {
display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; color: var(--pri-t);
font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.nb-chat-neu::before, .nb-chat-neu::after {
content: ""; flex: 1; height: 1px; background: var(--pri-t); opacity: .45;
}
/* Die Marke am Listenende - sie traegt nur Hoehe, damit der Beobachter etwas zu sehen bekommt. */
.nb-pf-mehr {
min-height: 28px; display: grid; place-items: center;
font-size: 11px; color: var(--t3);
}
.nb-pf-zeile .sym {
width: 30px; display: flex; flex-direction: column; align-items: center; gap: 2px;
color: var(--t3);
}
.nb-pf-zeile .sym .feld {
width: 30px; height: 30px; border-radius: 8px; background: var(--surf2);
display: grid; place-items: center;
}
/* Die Bueroklammer unter dem Brief: kleiner und blasser, weil sie eine Beigabe meldet und nicht
die Zeile anfuehrt. Die Zahl steht nur ab zwei daneben - bei einem Anhang ist sie eine
ueberfluessige „1". */
.nb-pf-zeile .sym .klammer {
display: flex; align-items: center; gap: 1px; font-size: 10px; line-height: 1; opacity: .8;
}
.nb-pf-zeile .sym .klammer .mud-icon-root { font-size: 14px; }
.nb-pf-zeile.on .sym { color: var(--pri-t); }
.nb-pf-zeile .kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb-pf-zeile .kopf .wer {
font-size: 13px; font-weight: 600; color: var(--t2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-pf-zeile .kopf .zeichen { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--t3); }
.nb-pf-zeile .kopf .zeichen .mud-icon-root { font-size: 15px; }
.nb-pf-zeile .kopf .zeit { font-size: 11px; color: var(--t3); white-space: nowrap; }
.nb-pf-zeile .betreff {
font-size: 15px; color: var(--t2); margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ungelesen steht in der Schrift, nicht in einem Abzeichen vor dem Betreff: Das Abzeichen schob
den Text jeder zweiten Zeile nach rechts - damit war der linke Rand keiner mehr. */
.nb-pf-zeile.neu .kopf .wer, .nb-pf-zeile.neu .betreff { color: var(--t1); font-weight: 700; }
.nb-pf-zeile .auszug {
font-size: 14px; color: var(--t3); margin-top: 2px; min-height: 1.35em; line-height: 1.4;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-pf-zeile .marken { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.nb-pf-zeile .mk, .nb-pf-zeile .kat {
display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px;
font-size: 11px; white-space: nowrap; line-height: 17px;
}
.nb-pf-zeile .mk { background: var(--surf3); color: var(--t2); }
.nb-pf-zeile .mk .mud-icon-root { font-size: 13px; }
/* Wer die Sache hat, ist die eine Auskunft, die Doppelarbeit verhindert - sie darf auffallen. */
.nb-pf-zeile .mk.mir { background: var(--pri); color: var(--auf-pri); font-weight: 600; }
.nb-pf-zeile .mk.erledigt { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
/* Der Stand der Aufgabe in der Zeile.
Farbig, weil man ihn im Vorbeisehen erfassen soll: „wartet" und „in Arbeit" unterscheiden
sich im Wort um zwei Buchstaben, in der Farbe sofort. „Neu" bleibt absichtlich unauffaellig -
es ist der Normalfall und soll nicht wie eine Warnung aussehen. */
.nb-pf-zeile .mk.st { font-weight: 600; }
.nb-pf-zeile .mk.st.inarbeit { background: color-mix(in srgb, var(--pri) 18%, transparent); color: var(--pri); }
.nb-pf-zeile .mk.st.wartet { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.nb-pf-zeile .mk.st.erledigt { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.nb-pf-zeile .mk.st.verworfen { opacity: .6; text-decoration: line-through; }
/* Der Stand im geoeffneten Faden ist anklickbar - das muss man ihm ansehen. */
.nb-aufgabe .st.waehlbar {
display: inline-flex; align-items: center; gap: 2px; cursor: pointer;
border: 1px solid transparent;
}
.nb-aufgabe .st.waehlbar:hover { border-color: var(--line); }
.nb-pf-zeile .mk.neu { background: var(--pri); color: var(--auf-pri); font-weight: 600; }
/* Die Kategorie in ihrer eigenen Farbe, aber gedaempft hinterlegt: Eine volle Flaeche in
Signalfarbe zoege das Auge von der Nachricht auf die Etikette. */
.nb-pf-zeile .kat { color: var(--f, var(--t2)); background: color-mix(in srgb, var(--f, var(--t3)) 18%, transparent); }
.nb-pf-mailkopf { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
.nb-pf-versand { font-size: 11px; color: var(--t3); margin-top: 2px; }
/* Rückmeldungen am Block im Raster (kalender-013): klein, rechts neben dem Titel. */
.nb-kal-block .nb-rueckmeldung { float: right; margin-left: 4px; font-size: 11px; color: var(--t2); }
.nb-kal-block .nb-rueckmeldung.abgesagt { color: var(--bad); font-weight: 600; }
/* Antworten von außen im Terminfenster (kalender-013). */
.nb-externstand { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); margin-top: 2px; }
/* Schalter „Auch am Desktop melden“ in der Glocke. */
.nb-glocke .nb-systemmeldung { padding: 2px 12px 6px; border-bottom: 1px solid var(--line); }
.nb-glocke .nb-systemmeldung .hinweis { display: block; font-size: 11px; color: var(--bad); }
/* Chats in der Glocke (kommunikation-014): je Unterhaltung Kopf, letzter Beitrag, Kurzantwort. */
.nb-glocke-chats { border-bottom: 1px solid var(--line); }
.nb-glocke-chat { padding: 9px 15px; border-left: 3px solid var(--pri); padding-left: 12px; border-bottom: 1px solid var(--line); }
.nb-glocke-chat:last-child { border-bottom: none; }
.nb-glocke-chat .kopf { display: flex; gap: 10px; align-items: baseline; cursor: pointer; }
.nb-glocke-chat .kopf b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; }
.nb-glocke-chat .letzt { font-size: 11.5px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.nb-glocke-chat .antwort { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.nb-glocke-chat .antwort .feld { flex: 1; margin: 0; }
/* Einladung an der Nachricht (kalender-012): eine Karte wie eine Beilage, nicht wie Text. */
.nb-einladungskarte {
display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 8px 10px;
border: 1px solid var(--line); border-left: 3px solid var(--pri); border-radius: 6px; background: var(--surf2);
}
.nb-einladungskarte.abgesagt, .nb-einladungskarte.veraltet { border-left-color: var(--line2); opacity: .8; }
.nb-einladungskarte .inhalt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--t2); }
.nb-einladungskarte .titel { font-size: 14px; color: var(--t1); font-weight: 600; }
.nb-einladungskarte .stand { margin-top: 4px; color: var(--t3); }
.nb-einladungskarte .hinweis { color: var(--bad); }
.nb-einladungskarte .knoepfe { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
/* ===== Verlauf als Unterhaltung =====
Eingegangenes links, Eigenes rechts, Internes in der Mitte. Die Stelle beantwortet „wer hat das
gesagt", bevor man den Namen liest - eine Reihe gleich aussehender Kaesten tut das nicht. */
/* ── Kopf und Reiter einer Unterhaltung (Mockup, Stufe 2) ───────────────────────────────────
Der Kopf beantwortet, was man VOR dem Lesen wissen will: worum, mit wem, seit wann, bei wem.
Aus einzelnen Blasen zusammengereimt hat das bisher jeder selbst gemacht. */
/* Kopf und Reiter stehen fest, nur der Verlauf rollt: Wer beim Lesen nach unten kommt, verliert
sonst die Auskunft, worum es ueberhaupt geht. */
.nb-vorgangskopf {
flex: 0 0 auto; padding: 12px 16px 8px; border-bottom: 1px solid var(--line);
}
/* Marken neben dem Betreff statt darunter - das spart eine ganze Zeile, und gewonnene Hoehe ist
hier Nachricht. Der Betreff darf schrumpfen, die Marken nicht. */
.nb-vorgangskopf .betreffzeile {
display: flex; align-items: flex-start; gap: 12px;
}
.nb-vorgangskopf .betreffzeile .betreff { flex: 1; min-width: 0; }
.nb-vorgangskopf .betreffzeile .marken {
flex: 0 1 auto; justify-content: flex-end; margin-top: 0; max-width: 55%;
}
.nb-vorgangskopf .betreff {
font-size: 16px; font-weight: 600; color: var(--t1); line-height: 1.3;
word-break: break-word;
}
.nb-vorgangskopf .zeile {
margin-top: 3px; font-size: 12px; color: var(--t3);
display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.nb-vorgangskopf .zeile .trenn { color: var(--line2); }
.nb-vorgangskopf .marken {
margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
/* Die Signatur im Schreibbereich: zu, weil man weiss, was unten steht. Der Name bleibt
sichtbar - dass die falsche gewaehlt ist, muss man merken, ohne aufzuklappen. */
.nb-signaturblock > .kopf {
appearance: none; background: none; border: none; width: 100%; cursor: pointer;
display: flex; align-items: center; gap: 6px; padding: 4px 2px; font: inherit;
font-size: 11px; color: var(--t3); text-align: left;
}
.nb-signaturblock > .kopf:hover { color: var(--t1); }
.nb-signaturblock .kopf .welche { color: var(--t2); font-weight: 600; }
.nb-signaturblock .kopf .pfeil { margin-left: auto; }
/* Der Waehler sitzt neben dem Kopf, nicht darin: Er ist eine eigene Handlung und darf das
Auf- und Zuklappen nicht ausloesen. */
.nb-signaturblock .waehler { position: absolute; right: 22px; margin-top: -26px; }
.nb-signaturblock { position: relative; }
/* Eine Entwurfszeile: kein Absender, kein Verlauf, keine Gegenseite - deshalb eine eigene
Zeile und keine geliehene. Schraeg, damit man sie im Vorbeigehen von einer Nachricht
unterscheidet: Was hier steht, ist noch nicht hinausgegangen. */
.nb-entwurfszeile .wer { font-style: italic; opacity: .85; }
.nb-entwurfszeile .betreff { font-weight: 600; }
.nb-entwurfszeile .auszug {
font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Fuss einer Einstellungsspalte - „Speichern" sitzt am Ende der Felder, nicht im
Fensterfuss: Dort gehoerte er zum Fenster, nicht zu dem, was man gerade bearbeitet. */
.nb-felder-fuss { display: flex; justify-content: flex-end; padding-top: 6px; }
/* Wenn links nichts ist - ein Satz statt eines leeren Rahmens. */
/* Die Rueckfrage nimmt die Stelle der Einstellungen ein, damit die Zahl nicht untergeht. */
.nb-kat-loeschfrage {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; text-align: center; height: 100%; padding: 20px;
}
/* Die Unterhaltungen an einer Aufgabe (Block A): Betreff als Sprung, dahinter leise wer und wann. */
.nb-aufgabe-nachricht .wer { color: var(--t3); font-size: var(--nb-schrift-beiwerk); }
.nb-aufgabe-nachricht + .nb-aufgabe-nachricht { margin-top: 2px; }
/* „An Aufgabe hängen“ (Block A): die Aufgaben zur Wahl - eine Zeile je Aufgabe, die gewählte wie eine gewählte Verwaltungszeile. */
.nb-anhaengen-aufgabe { display: block; width: 100%; text-align: left; padding: 6px 8px; border: none; border-radius: 6px;
background: transparent; color: var(--t1); cursor: pointer; }
.nb-anhaengen-aufgabe:hover { background: var(--surf2); }
.nb-anhaengen-aufgabe.gewaehlt { background: var(--surf2); font-weight: 600; }
/* Die Rueckfrage vor dem Loeschen einer Kategorie - im Fuss des Fensters, mit den Zahlen.
Ein zweites Fenster darueber waere ein Dialog im Dialog, und die Zahl ginge unter. */
.nb-kat-loeschen {
display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;
font-size: 12px; line-height: 1.45; color: var(--t2); padding-right: 12px;
}
.nb-kat-loeschen .mud-icon-root { color: var(--bad); flex: 0 0 auto; margin-top: 1px; }
/* Der Stift an einer Kategoriezeile: sichtbar beim Darueberfahren, sonst aus dem Weg. Zwoelf
Zeilen mit staendig sichtbarem Symbol waeren zwoelf Symbole, die niemand braucht. */
.nb-rail a .stift {
appearance: none; background: none; border: none; cursor: pointer; color: var(--t3);
padding: 1px; line-height: 0; border-radius: 4px; margin-left: auto; opacity: 0;
}
.nb-rail a:hover .stift { opacity: 1; }
.nb-rail a .stift:hover { color: var(--t1); background: var(--surf2); }
/* Mit der Tastatur erreichbar bleiben - sonst waere er fuer manche gar nicht da. */
.nb-rail a .stift:focus-visible { opacity: 1; outline: 2px solid var(--pri-t); }
/* Der Weg zurueck an der Ueberschrift: Er hebt JEDE Einengung auf, nicht nur die der Leiste. */
.nb-pf-spalte .kopf .weg {
appearance: none; background: none; border: none; cursor: pointer; color: var(--t3);
padding: 2px; line-height: 0; border-radius: 6px;
}
.nb-pf-spalte .kopf .weg:hover { color: var(--t1); background: var(--surf2); }
/* Suchfeld und Zahnrad in EINER Zeile: Die beiden Schalter lagen darunter und kosteten zwei
Zeilen Liste - bei einer Liste, die die ganze Spalte traegt, ist das der teuerste Platz der
Seite (Abnahme mj, 22.09.2026). Das Feld nimmt den Rest, das Zahnrad bleibt schmal. */
.nb-pf-suche .feld { display: flex; align-items: center; gap: 2px; }
.nb-pf-suche .feld .mud-input-control { flex: 1 1 auto; min-width: 0; }
.nb-pf-suche .feld .mud-menu { flex: 0 0 auto; }
/* Die zwei Schalter unter „Meine Arbeit" - nur dort sichtbar, deshalb eingerückt und klein.
Sie sind eine Verfeinerung der Sicht, kein eigener Eintrag der Leiste. */
.nb-arbeitfilter {
display: flex; align-items: center; gap: 2px; padding: 2px 0 6px 30px; font-size: 11px;
}
.nb-arbeitfilter button {
appearance: none; background: none; border: 1px solid transparent; cursor: pointer;
color: var(--t3); padding: 1px 7px; border-radius: 999px; font: inherit;
}
.nb-arbeitfilter button:hover { color: var(--t1); }
.nb-arbeitfilter button.on { color: var(--t1); border-color: var(--line2); background: var(--surf2); }
.nb-arbeitfilter .trenn { width: 1px; height: 11px; background: var(--line); margin: 0 5px; }
/* Wer schon hingesehen hat - der Punkt beantwortet „antwortet da gerade jemand anderer?" */
.nb-gelesen {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--surf3); color: var(--t2);
font-size: 10px; font-weight: 600; letter-spacing: .3px;
}
.nb-pf-reiter {
display: flex; gap: 2px; border-bottom: 1px solid var(--line);
flex: 0 0 auto; padding: 0 16px;
}
.nb-pf-reiter button {
appearance: none; background: none; border: none; cursor: pointer;
padding: 7px 12px; font-size: 12.5px; color: var(--t3);
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nb-pf-reiter button:hover { color: var(--t1); }
.nb-pf-reiter button.an { color: var(--pri-t); border-bottom-color: var(--pri); font-weight: 600; }
.nb-pf-reiter .luecke { flex: 1; }
/* Eine Verwaltungsseite. Der Kopf braucht keine eigene Klasse mehr: Er ist dasselbe MudStack wie
auf den uebrigen Seiten (docs/oberflaeche.md, Punkt 1). */
.nb-page { display: block; width: 100%; }
/* Eine Kopfzeile IN einem Reiter - sie muss die volle Breite nehmen, sonst schiebt der
Zwischenraum nichts an den rechten Rand, und „Filter" steht mitten im Nichts. */
.nb-reiterkopf { width: 100%; }
/* Reiter einer SEITE - groesser als die schmale Leiste in der Nachrichtenflaeche. Dort sitzen
sie ueber einer Liste und sollen wenig Platz nehmen; hier gliedern sie die ganze Seite und
muessen auf den ersten Blick als Reiter zu erkennen sein (mj, 18.09.2026) - dieselbe Anmutung
wie unter System → Dateien. */
.nb-seitenreiter { gap: 4px; padding: 0; }
.nb-seitenreiter button {
padding: 12px 18px;
font-size: 13px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
border-bottom-width: 2px;
}
.nb-seitenreiter button:hover { background: var(--nb-hover); }
.nb-seitenreiter button.an { font-weight: 600; }
/* Das Zeichen einer Kategorie im Menue - so breit wie ein Symbol, damit die Namen fluchten. */
.nb-akt-zeichen { display: inline-block; width: 20px; text-align: center; margin-right: 6px; }
/* Auch im Menueband bleibt ein Eintrag EINZEILIG.
„Noch zu Lesen" brach dort ueber zwei Zeilen - und zwei Zeilen lesen sich wie zwei Eintraege
(Abnahme mj, 21.09.2026). Das Menue waechst stattdessen mit seinem laengsten Namen; wird es
zu breit, schneidet es ab und der Titel nennt den Namen ganz. */
.nb-aktionsleiste + .mud-popover .mud-list-item,
.mud-popover .mud-list-item.nb-akt-eintrag {
white-space: nowrap;
}
.mud-popover .mud-list-item-text,
.mud-popover .mud-typography {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Sortierung ist kein Reiter - sie darf auch nicht wie einer aussehen. */
.nb-pf-reiter button.sortierung {
border-bottom: none; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px;
}
.nb-pf-reiter button.sortierung .mud-icon-root { font-size: 15px; }
/* Eine Zahl am Reiter: Wie viele Sendungen gescheitert sind, muss man sehen, ohne hinzugehen -
sonst schaut niemand nach, und genau so bleibt ein kaputter Versand wochenlang unbemerkt. */
.nb-pf-zahl {
display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px;
background: var(--bad); color: var(--auf-pri); font-size: 11px; font-weight: 600;
}
/* Der Grund ist oft lang - in der Zeile gekuerzt, vollstaendig im Tooltip. */
.nb-ausgang-grund {
display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; vertical-align: bottom; color: var(--bad); font-size: 12px;
}
/* Die Spur: was geschehen ist, aelteste oben. Bewusst schmucklos - sie wird gelesen, wenn etwas
geklaert werden muss, nicht im Vorbeigehen. */
.nb-spur { list-style: none; margin: 0; padding: 0; }
.nb-spur li {
display: flex; gap: 10px; align-items: baseline; padding: 6px 0 6px 12px;
border-left: 2px solid var(--line); font-size: 12.5px; color: var(--t2);
}
.nb-spur li .zeit { flex: 0 0 auto; color: var(--t3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nb-spur li .was { flex: 1; min-width: 0; }
.nb-spur li .wer { flex: 0 0 auto; color: var(--t3); font-size: 11.5px; }
/* Was schiefging, faellt auf - der Rest nicht. */
.nb-spur li.versandfehler { border-left-color: var(--bad); color: var(--bad); }
.nb-spur li.uebernommen, .nb-spur li.zugewiesen { border-left-color: var(--pri); }
/* Details: Merkzeilen wie im Entwurf - Bezeichnung links, Wert rechts. */
.nb-merkblock {
border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
background: var(--surf);
}
.nb-merkblock .kopf {
font-size: 12px; font-weight: 600; color: var(--t1); margin-bottom: 6px;
padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.nb-merkblock .zeile {
display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 12.5px;
}
.nb-merkblock .zeile .k { flex: 0 0 130px; color: var(--t3); }
.nb-merkblock .zeile b { flex: 1; min-width: 0; color: var(--t1); font-weight: 500; word-break: break-word; }
.nb-merkblock .zeile b.mono { font-family: var(--nb-schriftart-code); font-size: 11.5px; }
/* ── Antwortbereich (Mockup, Stufe 3) ───────────────────────────────────────────────────────
Er steht UNTER dem Verlauf, nicht an seiner Stelle: Beim Antworten sieht man nach, was der
andere geschrieben hat. */
.nb-antwort {
margin-top: 12px; border: 1px solid var(--line); border-radius: 10px;
background: var(--surf); overflow: hidden;
}
/* Angedockt geht er von Kante zu Kante - ohne Rand, ohne Ecken, ohne Abstand: Er ist kein Kasten
IN der Spalte, sondern deren unterer Teil. */
.nb-antwort.angedockt {
position: relative; margin: 0; border-radius: 0; border: none;
border-top: 1px solid var(--line);
flex: 0 0 var(--nb-antwort-h, 260px); min-height: 0;
display: flex; flex-direction: column;
}
.nb-antwort.angedockt .nb-antwort-feld,
.nb-antwort.angedockt .nb-antwort-vorschau { flex: 1; min-height: 0; overflow-y: auto; resize: none; }
.nb-kanalreiter { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0; }
.nb-kanalreiter button {
appearance: none; background: none; border: none; cursor: pointer;
padding: 8px 12px; font-size: 12.5px; color: var(--t3);
border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nb-kanalreiter button.an { color: var(--pri-t); border-bottom-color: var(--pri); font-weight: 600; }
/* Die Notiz sieht anders aus als alles, was nach draussen geht - der Unterschied ist zu gross,
um ihn nur im Text zu behaupten. */
.nb-kanalreiter button.intern.an { color: var(--warn); border-bottom-color: var(--warn); }
.nb-antwort-kopf {
display: flex; align-items: center; gap: 10px;
padding: 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.nb-antwort-kopf .k { flex: 0 0 64px; color: var(--t3); }
/* „+ Cc" und „+ Bcc" stehen neben dem Betreff, nicht als eigene Zeile: Zwei leere Felder bei
jeder Antwort kosten Platz und fragen nach einer Entscheidung, die fast nie ansteht. */
.nb-mehrfeld {
appearance: none; background: none; border: none; cursor: pointer;
color: var(--t3); font-size: 12px; padding: 2px 6px; border-radius: 5px; flex: 0 0 auto;
}
.nb-mehrfeld:hover { background: var(--surf3); color: var(--t1); }
/* Empfaenger als Marken statt als Zeichenkette mit Kommas: Wer fuenf eingetragen hat, sieht
fuenf Dinge - und nimmt jedes einzeln wieder weg. In einer Zeichenkette sucht man das Komma,
hinter dem die falsche Adresse steht. */
.nb-empfaenger {
display: flex; align-items: flex-start; gap: 10px;
padding: 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.nb-empfaenger .k { flex: 0 0 64px; color: var(--t3); padding-top: 7px; }
.nb-empfaenger .marken {
flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.nb-adresse {
display: inline-flex; align-items: center; gap: 5px;
background: var(--surf3); border-radius: 12px; padding: 2px 4px 2px 9px;
font-size: 12px; color: var(--t1); max-width: 100%;
}
.nb-adresse button {
appearance: none; background: none; border: none; cursor: pointer;
color: var(--t3); font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.nb-adresse button:hover { background: var(--bad); color: var(--auf-pri); }
.nb-adresseingabe { flex: 1; min-width: 160px; }
.nb-antwort-kopf .mud-input { flex: 1; }
.nb-antwort-kopf.intern { background: color-mix(in srgb, var(--warn) 10%, transparent); padding: 8px 12px; }
.nb-antwort-kopf .warnung { margin-left: auto; color: var(--warn); font-weight: 600; }
.nb-tbar {
display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
padding: 4px 8px; border-bottom: 1px solid var(--line); background: var(--bg2);
}
.nb-tbar button {
appearance: none; background: none; border: none; cursor: pointer; border-radius: 5px;
padding: 4px 7px; color: var(--t2); font-size: 12px; line-height: 1;
display: inline-flex; align-items: center;
}
.nb-tbar button:hover:not(:disabled) { background: var(--surf3); color: var(--t1); }
.nb-tbar button.an { background: var(--surf3); color: var(--pri-t); }
/* Ausgegraut statt versteckt: Ein Knopf, der fehlt, wirft die Frage auf, ob man ihn uebersehen
hat - einer, der aus ist, sagt mit seinem Tooltip auch warum. */
.nb-tbar button.aus { opacity: .35; cursor: not-allowed; }
.nb-tbar .luecke { flex: 1; }
/* Der KI-Knopf zeigt seinen Stand: Er dreht sich, solange gerechnet wird, und traegt einen Punkt,
wenn ein Vorschlag wartet. */
.nb-tbar button.nb-ki-text { position: relative; }
.nb-tbar button.nb-ki-text .dreht { width: 16px !important; height: 16px !important; }
.nb-tbar button.nb-ki-text .punkt {
position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%;
background: var(--pri);
}
/* Das Fenster zum Textvorschlag. */
.nb-textvorschlag { display: flex; flex-direction: column; gap: 16px; }
.nb-textvorschlag .zugang.lokal {
display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2);
}
.nb-textvorschlag .lauf { display: flex; align-items: center; gap: 12px; }
.nb-textvorschlag .lauf .klein { font-size: 12px; color: var(--t2); margin-top: 2px; }
.nb-textvorschlag .vorschlag {
border: 1px solid var(--line2); border-radius: 10px; background: var(--surf2); overflow: hidden;
}
/* pre-wrap: Der Vorschlag hat Absaetze - als ein Block gelesen waere er nicht zu beurteilen. */
.nb-textvorschlag .vorschlag .text {
white-space: pre-wrap; padding: 12px 14px; max-height: 45vh; overflow: auto;
font-size: 15px; line-height: 1.55; color: var(--t1);
}
.nb-textvorschlag .vorschlag .herkunft {
display: flex; align-items: center; gap: 6px; padding: 6px 14px;
border-top: 1px solid var(--line); font-size: 12px; color: var(--t2);
}
.nb-visitenkarte-wahl { display: flex; flex-direction: column; gap: 12px; }
/* Komponenten und Software im Gerätesteckbrief. */
.nb-komponenten { display: flex; flex-direction: column; gap: 12px; }
.nb-komponenten .kopf { display: flex; align-items: center; }
.nb-komponenten .erklaerung { color: var(--t2); margin: 0; }
.nb-komponenten .nb-unterkopf { font-size: 15px; font-weight: 600; margin: 12px 0 0; }
.nb-komponententabelle td.art { color: var(--t2); white-space: nowrap; }
.nb-komponententabelle td.modell { font-weight: 600; }
.nb-hinzufuegen .nb-schmal { max-width: 180px; }
.nb-anschluesse td.gegen { white-space: nowrap; }
/* Feste Spaltenbreiten (mj, 03.10.2026): Sonst richtet sich jede Spalte nach ihrem Inhalt, und eine
Auswahl wie „Art" schrumpft auf drei Buchstaben. Die Breiten stehen im der Tabelle. */
.nb-feste-spalten table { table-layout: fixed; width: 100%; }
.nb-feste-spalten td { overflow: hidden; }
.nb-anschluesse td.gegen .kabel { color: var(--t2); font-size: 12px; margin-left: 6px; }
.nb-anschluesse td.gegen .klein { color: var(--t3); font-size: 12px; }
/* Die Rackansicht: zwei Seiten nebeneinander, 24 px je Höheneinheit. */
.nb-rack-seiten { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.nb-rack-seite { flex: 1 1 360px; max-width: 560px; }
.nb-rack-seite .titel { font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 6px; }
.nb-rack { border: 2px solid var(--line2); border-radius: 8px; padding: 4px; background: var(--surf2); }
.nb-rack .feld { position: relative; display: flex; align-items: stretch; border-bottom: 1px dashed var(--line); box-sizing: border-box; }
.nb-rack .feld .he { width: 28px; flex: none; font-size: 10px; color: var(--t3); text-align: right; padding: 4px 6px 0 0; }
.nb-rack .feld.frei.ziel { background: var(--pri-w); }
.nb-rack .feld.geraet .inhalt {
flex: 1; margin: 1px 0; padding: 2px 8px; border-radius: 6px; background: var(--surf3);
border: 1px solid var(--line2); cursor: grab; overflow: hidden; display: flex; flex-wrap: wrap;
align-items: center; gap: 2px 8px;
}
.nb-rack .feld.geraet.gezogen .inhalt { opacity: .5; }
.nb-rack .feld.geraet .name { font-size: 12px; font-weight: 600; color: var(--t1); text-decoration: none; }
.nb-rack .feld.geraet .modell { font-size: 11px; color: var(--t2); }
.nb-rack .ports { display: flex; flex-wrap: wrap; gap: 2px; }
.nb-rack .port {
width: 9px; height: 9px; padding: 0; border-radius: 2px; border: 1px solid var(--t3);
background: transparent; cursor: pointer;
}
.nb-rack .port.belegt { background: var(--pri); border-color: var(--pri); }
.nb-rack .port.an { outline: 2px solid var(--t1); outline-offset: 1px; }
.nb-rack-port {
display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 10px;
border-radius: 8px; background: var(--surf2); border: 1px solid var(--line2); font-size: 13px;
}
.nb-rack-port .kabel, .nb-rack-port .frei { color: var(--t2); }
.nb-visitenkarte-wahl .hinweis { color: var(--t2); }
/* Textbausteine (Block 9): die Vorschläge zu „/kürzel“ direkt unter dem Feld - der erste ist der, den Enter nimmt. */
.nb-bausteinwahl { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.nb-bausteinwahl button { border: 1px solid var(--line2); border-radius: 4px; background: transparent; color: inherit; padding: 2px 8px; font-size: 13px; cursor: pointer; }
.nb-bausteinwahl button:first-child { border-color: var(--mud-palette-primary); }
.nb-bausteinwahl button code { color: var(--pri-t); }
.nb-bausteinwahl button span { opacity: .75; }
.nb-antwort-feld {
display: block; width: 100%; box-sizing: border-box; resize: vertical;
border: none; outline: none; padding: 10px 12px; min-height: 120px;
background: transparent; color: var(--t1); font: inherit; font-size: 13px; line-height: 1.55;
}
.nb-antwort-vorschau { padding: 10px 12px; min-height: 120px; font-size: 13px; }
/* Der HTML-Bereich: Was man sieht, ist was hinausgeht. Weisser Grund mit dunkler Schrift, auch
in der dunklen Ansicht - beim Empfaenger ist es genauso, und eine Hervorhebung, die hier
passt und dort nicht, ist keine. */
/* Mit dem Vorfahren davor, damit die Regel nicht gegen .nb-antwort-feld verliert - dort steht
„transparent", und in der dunklen Ansicht saehe der Editor dann aus wie ein Textfeld. */
.nb-antwort .nb-antwort-feld/* Mit dem Vorfahren davor, damit die Regel nicht gegen .nb-antwort-feld verliert - dort steht
„transparent", und in der dunklen Ansicht saehe der Editor dann aus wie ein Textfeld. */
.nb-antwort .nb-antwort-feld.nb-editor {
background: var(--papier); color: var(--papier-text); outline: none; overflow-y: auto;
}
/* Ohne offene Unterhaltung fuellt der Bereich die Flaeche: Wer etwas Neues verfasst, hat nichts,
worauf er nebenher schauen muesste. */
/* Ohne offene Unterhaltung fuellt der Bereich die Flaeche - und der leere Laufbereich darueber
darf ihm nichts wegnehmen. */
/* Ueber dem Verfassen-Bereich: Ohne Unterhaltung daneben sagt sonst nichts, was gerade
geschieht - und der Platz stand ohnehin leer. */
.nb-verfassenkopf {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px 10px; border-bottom: 1px solid var(--line);
font-size: 14px; font-weight: 600; color: var(--t1); flex: 0 0 auto;
}
.nb-verfassenkopf .mud-icon-root { font-size: 18px; color: var(--t3); }
.nb-antwort.voll {
margin: 0; border-radius: 0; border: none; flex: 1; min-height: 0;
display: flex; flex-direction: column;
}
.nb-pf-inhalt:has(> .nb-antwort.voll) > .nb-pf-lauf { flex: 0 0 auto; }
.nb-antwort.voll .nb-antwort-feld,
.nb-antwort.voll .nb-antwort-vorschau { flex: 1; min-height: 0; overflow-y: auto; resize: none; }
/* Der Hinweis kommt aus dem Element, nicht aus der Stilvorlage: Ob gerade eine Antwort oder
eine neue Nachricht entsteht, weiss nur die Flaeche. */
.nb-editor:empty::before {
content: attr(data-platzhalter); color: var(--papier-leise);
}
.nb-editor p { margin: 0 0 8px; }
.nb-editor h1, .nb-editor h2, .nb-editor h3 { margin: 10px 0 6px; font-size: 15px; }
.nb-editor ul, .nb-editor ol { margin: 0 0 8px; padding-left: 22px; }
.nb-editor blockquote {
margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--papier-linie); color: var(--papier-leise);
}
.nb-editor code { background: color-mix(in srgb, var(--papier-linie) 15%, var(--papier)); border-radius: 3px; padding: 0 3px; }
.nb-editor a { color: var(--papier-verweis); }
/* Die Farbprobe im Menue - so breit wie ein Wort, damit man den Ton wirklich sieht. */
.nb-ton {
display: inline-block; min-width: 42px; text-align: center; border-radius: 4px;
padding: 1px 6px; margin-right: 8px; font-size: 12px;
}
.nb-antwort-fuss {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--t3);
}
.nb-antwort-fuss .zuviel { color: var(--bad); font-weight: 600; }
.nb-antwort-hinweis { padding: 0 12px 9px; font-size: 11.5px; color: var(--t3); }
.nb-chat-zeile { display: flex; margin-bottom: 10px; }
.nb-chat-zeile.eingehend { justify-content: flex-start; }
.nb-chat-zeile.ausgehend { justify-content: flex-end; }
/* Die interne Notiz steht RECHTS wie alles, was von uns kommt - sie ist unser Beitrag, nur nicht
fuer draussen. Mittig hatte sie eine dritte Spur aufgemacht und die Seitenlogik verwaessert. */
.nb-chat-zeile.intern { justify-content: flex-end; }
/* Zwei Drittel, nicht vier Fuenftel: Erst wenn eine Blase sichtbar KURZ vor dem anderen Rand
endet, sieht man auf einen Blick, von welcher Seite sie kommt. Bei 82 % fuellen beide Seiten
fast dieselbe Flaeche, und die Unterscheidung lebt nur noch von ein paar Pixeln. */
.nb-chat-blase {
max-width: 66%; min-width: 0; padding: 10px 12px; border-radius: 12px;
background: var(--surf); border: 1px solid var(--line);
}
.nb-chat-zeile.ausgehend .nb-chat-blase { background: var(--pri-w); border-color: var(--pri-w); }
/* Die interne Notiz ist keine Nachricht nach draussen - sie darf auch nicht so aussehen. */
.nb-chat-zeile.intern .nb-chat-blase {
background: color-mix(in srgb, var(--warn) 12%, transparent);
border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
/* Zitat und Signatur: da, aber zusammengefaltet. */
.nb-chat-falt { margin-top: 6px; font-size: 12px; color: var(--t3); }
.nb-chat-falt summary { cursor: pointer; user-select: none; }
.nb-chat-falt pre {
white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 6px 0 0;
padding-left: 8px; border-left: 2px solid var(--line2);
}
/* Anhaenge an der Nachricht: Sie sind oft das Eigentliche - „siehe Anhang" ist ein ganzer Satz. */
.nb-beilagen { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.nb-beilage {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px;
font-size: 12px; color: var(--t1); background: var(--surf2);
}
.nb-beilage .nm {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: inherit; text-decoration: none;
}
/* Der Name ist ein KNOPF und kein Link: Ein nackter Link in einen neuen Tab traegt kein
Bearer-Zeichen und stirbt mit 401. Aussehen soll er trotzdem wie Text, nicht wie ein Knopf. */
.nb-beilage button.nm {
appearance: none; background: none; border: none; padding: 0; cursor: pointer;
font: inherit; text-align: left;
}
.nb-beilage button.nm:hover { text-decoration: underline; background: none; }
.nb-beilage .gr { color: var(--t3); font-size: 11px; flex: 0 0 auto; }
.nb-beilage .mud-icon-root { font-size: 15px; color: var(--t3); }
/* Im Antwortbereich traegt die Beilage einen Wegnehmen-Knopf - anders als im Verlauf, wo sie
eine Tatsache ist und keine Wahl. */
.nb-antwort-beilagen { padding: 6px 12px 0; }
.nb-beilage button {
appearance: none; background: none; border: none; cursor: pointer;
color: var(--t3); font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.nb-beilage button:hover { background: var(--bad); color: var(--auf-pri); }
/* Alle Dateien einer Unterhaltung, im festen Kopf.
Eingeklappt EINE Zeile mit den ersten Namen: Der Kopf kostet Hoehe, die sonst Nachricht waere -
und „3 Dateien" allein beantwortet die Frage nicht, die man stellt, naemlich ob ein bestimmter
Name dabei ist. */
.nb-vorgangsdateien { margin-top: 6px; }
.nb-vorgangsdateien .griff {
appearance: none; background: var(--surf2); border: 1px solid var(--line);
border-radius: 8px; cursor: pointer; width: 100%;
display: flex; align-items: center; gap: 7px; padding: 4px 9px;
font-size: 12px; color: var(--t2); text-align: left;
}
.nb-vorgangsdateien .griff:hover { border-color: var(--line2); color: var(--t1); }
.nb-vorgangsdateien .griff .mud-icon-root { font-size: 15px; color: var(--t3); flex: 0 0 auto; }
.nb-vorgangsdateien .griff .zahl { font-weight: 600; color: var(--t1); flex: 0 0 auto; }
.nb-vorgangsdateien .griff .namen {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--t3);
}
.nb-vorgangsdateien .griff .mehr { flex: 0 0 auto; color: var(--t3); }
.nb-vorgangsdateien .griff .pfeil { margin-left: auto; }
.nb-vorgangsdateien.auf .griff {
border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent;
}
/* Aufgeklappt bekommt jede Datei eine Zeile - und die Liste eine eigene Hoehengrenze: Eine
Unterhaltung mit dreissig Anhaengen schoebe den Verlauf sonst ganz aus dem Bild. */
.nb-vorgangsdateien .liste {
border: 1px solid var(--line); border-top: 0;
border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
max-height: 34vh; overflow: auto; background: var(--surf2);
}
.nb-vorgangsdateien .zeile {
display: flex; align-items: center; gap: 8px; padding: 5px 9px;
border-top: 1px solid var(--line);
}
.nb-vorgangsdateien .zeile:first-child { border-top: 0; }
.nb-vorgangsdateien .zeile:hover { background: var(--surf3, var(--bg2)); }
.nb-vorgangsdateien .zeile > .mud-icon-root { font-size: 17px; color: var(--t3); flex: 0 0 auto; }
.nb-vorgangsdateien .wer { flex: 1; min-width: 0; }
.nb-vorgangsdateien .wer .nm {
font-size: 12.5px; color: var(--t1);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-vorgangsdateien .wer .her { font-size: 11px; color: var(--t3); }
.nb-vorgangsdateien .wer .her .trenn { color: var(--line2); margin: 0 3px; }
.nb-vorgangsdateien .zeile button {
appearance: none; background: none; border: 1px solid transparent; cursor: pointer;
color: var(--t3); padding: 3px; border-radius: 6px; line-height: 0; flex: 0 0 auto;
}
.nb-vorgangsdateien .zeile button:hover { border-color: var(--line2); color: var(--t1); }
/* Schon uebernommen: ein ruhiges Haekchen, kein Knopf - es gibt nichts mehr zu tun. */
.nb-vorgangsdateien .drin { color: var(--ok); }
.nb-vorgangsdateien .wartet { color: var(--t3); opacity: .6; }
.nb-chat-fuss { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Der Hinweis, warum etwas ausbleibt - ruhig, aber nicht unsichtbar: Eine zurueckgehaltene
Nachricht, von der niemand weiss, ist schlimmer als eine, die nachlaedt. */
.nb-chat-hinweis {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; color: var(--t3);
}
.nb-chat-hinweis .mud-icon-root { font-size: 14px; }
/* Auch das Original bleibt in der Blase: Volle Breite hat den Verlauf zu einer Reihe gleich
breiter Kaesten gemacht, und dann sieht man nicht mehr, von welcher Seite etwas kam. Ein
breiter Newsletter bekommt stattdessen einen eigenen Rollbalken - und in voller Breite gibt es
ihn auf Knopfdruck im eigenen Fenster. */
.nb-chat-zeile.weit .nb-pf-koerper.nb-eingebettet { overflow: auto; }
/* Im Verlauf immer hell: Dort ist kein Platz fuer einen Schalter, und heller Grund ist der Fall,
fuer den Post gebaut wird. Wer es anders braucht, oeffnet das eigene Fenster. */
.nb-pf-koerper.nb-eingebettet {
max-height: 60vh; overflow: auto; background: var(--papier); color: var(--papier-text);
border: 1px solid var(--line); border-radius: 8px; padding: 8px;
}
/* Das Original im Fenster darf so breit sein, wie es gebaut wurde. */
.nb-pf-koerper.nb-original { max-height: 70vh; overflow: auto; border-radius: 6px; padding: 8px; }
/* Post ist fast immer fuer hellen Grund gebaut - in der dunklen Ansicht stuende sonst dunkler
Text auf dunklem Grund. Umschaltbar, weil es auch den umgekehrten Fall gibt. */
.nb-pf-koerper.nb-original.hell { background: var(--papier); color: var(--papier-text); }
.nb-pf-koerper.nb-original.dunkel { background: var(--bg2); color: var(--t1); }
/* Der Stand der Einordnung an der Nachricht - eine Randnotiz, kein Signal: Sie beantwortet eine
Frage, die man nur stellt, wenn etwas nicht stimmt. */
.nb-pf-einordnung {
display: flex; align-items: center; gap: 6px; margin-top: 6px;
font-size: 11px; color: var(--t3);
}
.nb-pf-einordnung .mud-icon-root { font-size: 14px; }
/* Fremdes HTML bleibt in seinem Kasten: Eine Mail mit 900px breiter Tabelle darf die Seite nicht
auseinanderziehen. */
.nb-pf-koerper { margin-top: 8px; font-size: 13px; overflow-x: auto; }
.nb-pf-koerper img { max-width: 100%; height: auto; }
.nb-pf-koerper pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; }
/* Der Deckel fuer lange Nachrichten: etwa eine halbe Bildschirmhoehe, darunter ein Verlauf ins
Nichts, damit man SIEHT, dass es weitergeht - eine harte Kante liest sich wie ein Ende. */
.nb-pf-koerper.gedeckelt { max-height: 45vh; overflow: hidden; position: relative; }
.nb-pf-koerper.gedeckelt::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
background: linear-gradient(to bottom, transparent, var(--surf));
pointer-events: none;
}
.nb-chat-zeile.ausgehend .nb-pf-koerper.gedeckelt::after {
background: linear-gradient(to bottom, transparent, var(--pri-w));
}
.nb-chat-zeile.intern .nb-pf-koerper.gedeckelt::after {
background: linear-gradient(to bottom, transparent,
color-mix(in srgb, var(--warn) 12%, var(--surf)));
}
.nb-mehr {
appearance: none; background: none; border: none; cursor: pointer; padding: 6px 0 0;
font-size: 12px; color: var(--pri-t); font-weight: 600;
}
.nb-mehr:hover { text-decoration: underline; }
/* Gewandeltes Markdown in der Blase: Die Abstaende muessen kleiner sein als im Fliesstext -
sonst steht in einer Blase mit drei Saetzen mehr Luft als Inhalt. */
.nb-md > :first-child { margin-top: 0; }
.nb-md > :last-child { margin-bottom: 0; }
.nb-md p { margin: 0 0 8px; }
.nb-md ul, .nb-md ol { margin: 0 0 8px; padding-left: 20px; }
.nb-md li { margin: 2px 0; }
.nb-md h1, .nb-md h2, .nb-md h3, .nb-md h4, .nb-md h5, .nb-md h6 {
margin: 10px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3;
}
.nb-md blockquote {
margin: 6px 0; padding-left: 10px;
border-left: 2px solid var(--line2); color: var(--t3);
}
.nb-md code { background: var(--surf3); border-radius: 3px; padding: 0 3px; font-size: .9em; }
.nb-md pre code { background: none; padding: 0; }
.nb-md hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }
.nb-md a { color: var(--pri); word-break: break-word; }
.nb-md table { border-collapse: collapse; }
.nb-md td, .nb-md th { border: 1px solid var(--line); padding: 2px 6px; }
/* Verhuellte Zeile: Was nicht im Vorbeigehen mitgelesen werden soll, steht auch nicht im Auszug. */
.nb-pf-zeile .betreff.verhuellt { display: flex; align-items: center; gap: 6px; color: var(--t3); font-style: italic; }
.nb-pf-zeile .betreff.verhuellt .mud-icon-root { font-size: 15px; }
/* Entschaerfte Nachricht: Der Linktext bleibt lesbar, sein Ziel steht daneben - und nichts
davon ist anklickbar. Genau dort sieht man, dass „Ihre Bank" woanders hinzeigt. */
.nb-pf-koerper.entschaerft .nb-link-tot { text-decoration: underline dotted; color: var(--t2); }
.nb-pf-koerper.entschaerft .nb-link-ziel {
display: inline-block; margin: 0 4px; padding: 0 5px; border-radius: 4px;
background: var(--surf3); color: var(--bad); font-family: var(--nb-schriftart-code); font-size: .85em;
word-break: break-all;
}
/* ── Liste links, Gewaehltes rechts ─────────────────────────────────────────────────────────
Dasselbe Raster wie in der Kommunikation, nur unter neutralem Namen: „pf" heisst Postfach,
und ein Behaelterwort hat in einer Kontaktflaeche nichts zu suchen. Die Kommunikation behaelt
ihre alten Klassen, bis sie ohnehin angefasst wird - ein Zweitname kostet ein paar Zeilen
hier und keine einzige in Nachrichten.razor. */
.nb-zweispalt {
display: grid; grid-template-columns: var(--nb-liste-w, 340px) minmax(0, 1fr);
height: calc(100vh - 58px - var(--nb-leiste-h, 0px) - var(--nb-leiste-schweb, 0px));
}
.nb-sp-spalte {
display: flex; flex-direction: column; min-height: 0; position: relative;
background: var(--bg2); border-right: 1px solid var(--line);
/* Platz fuer den Griff an der Kante - sonst laege die Bildlaufleiste genau darunter. */
padding-right: 7px;
}
.nb-sp-spalte > .kopf {
display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
padding: 14px 14px 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3);
}
.nb-sp-spalte > .suche { flex: 0 0 auto; padding: 0 14px 8px; }
.nb-sp-liste { overflow-y: auto; flex: 1; min-height: 0; }
.nb-sp-inhalt { overflow-y: auto; padding: 16px; min-width: 0; }
.nb-sp-liste .leer, .nb-sp-inhalt .leer { padding: 16px; color: var(--t3); font-size: 13px; }
/* Der Fuss traegt das Blaettern. Fest unten statt mitscrollend: Wer auf Seite 7 ist, will nicht
erst ans Listenende scrollen, um auf Seite 8 zu kommen. */
.nb-sp-fuss {
flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
padding: 6px 10px 6px 14px; border-top: 1px solid var(--line);
font-size: 11px; color: var(--t3); white-space: nowrap;
}
.nb-sp-fuss .stand { margin-right: auto; }
.nb-sp-fuss select {
background: var(--surf2); color: var(--t2); border: 1px solid var(--line);
border-radius: 6px; padding: 2px 4px; font-size: 11px; cursor: pointer;
}
.nb-sp-fuss button {
background: none; border: none; color: var(--t2); cursor: pointer; padding: 2px 6px;
border-radius: 6px; font-size: 13px; line-height: 1;
}
.nb-sp-fuss button:hover:not(:disabled) { background: var(--surf2); }
.nb-sp-fuss button:disabled { opacity: .3; cursor: default; }
/* ── Kontaktdetail: Kopf, Reiter, Kontextspalte ─────────────────────────────────────────────
Nach dem Entwurf (netbits.world.docu/mockups/netbits-flow.html, Kontaktpanel): Was man
DURCHSIEHT steht in Reitern links, was man NEBENBEI IM BLICK hat rechts. Vorher lag beides
als Kachelbahn untereinander - man scrollte an den Wegen vorbei, um die Notiz zu lesen. */
.nb-kd { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.nb-kd-kopf { flex: 0 0 auto; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); }
.nb-kd-kopf .zeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nb-kd-kopf .marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.nb-kd-kopf .uid { font-size: 12px; color: var(--t3); }
/* Das Rund mit den Initialen - es traegt den linken Rand, damit der Name bei kurzem und langem
Namen an derselben Stelle beginnt. */
.nb-kd-avatar {
flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px;
display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--auf-pri);
}
.nb-kd-kern { flex: 1; min-height: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
/* Erst mit Kontextspalte wird geteilt - ohne sie nimmt der Hauptbereich alles. */
.nb-kd-kern.mit-seite { grid-template-columns: minmax(0, 1fr) var(--nb-kd-seite-w, 320px); }
.nb-kd-main { min-width: 0; overflow-y: auto; }
.nb-kd-side { min-width: 0; overflow-y: auto; position: relative; padding-right: 2px; }
.nb-kd-block { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; background: var(--surf); }
.nb-kd-block > .kopf {
display: flex; align-items: center; gap: 6px; padding: 9px 11px;
font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--t3);
}
.nb-kd-block > .inhalt { padding: 0 11px 11px; }
.nb-kd-block .zeile { display: flex; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.nb-kd-block .zeile .k { flex: 0 0 96px; color: var(--t3); }
.nb-kd-block .zeile .w { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
/* Anmerkungen: zwei Bereiche, und die Beschriftung sagt, wer mitliest. Ohne den Unterschied
schreibt jemand hier hinein, was er fuer sich behalten wollte - und merkt es nie. */
.nb-kd-anm { border-radius: 8px; padding: 8px 10px; background: var(--surf2); }
.nb-kd-anm + .nb-kd-anm { margin-top: 9px; }
.nb-kd-anm .kopf {
display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
letter-spacing: .7px; text-transform: uppercase; color: var(--t3); margin-bottom: 5px;
}
.nb-kd-anm .sicht { font-size: 9.5px; padding: 1px 6px; border-radius: 999px; }
.nb-kd-anm .sicht.alle { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.nb-kd-anm .sicht.ich { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.nb-kd-anm .txt { font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.nb-kd-anm .txt.leer { color: var(--t3); font-style: italic; }
.nb-kd-anm .wer { font-size: 10.5px; color: var(--t3); margin-top: 2px; }
.nb-kd-anm .eintrag + .eintrag { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
/* Zeitleiste der Aktivitaet - der Punkt links haelt die Spur, die Linie verbindet sie. */
.nb-kd-zeit { position: relative; padding-left: 22px; }
.nb-kd-zeit::before {
content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line);
}
.nb-kd-zeit .schritt { position: relative; padding: 0 0 16px; }
.nb-kd-zeit .schritt::before {
content: ""; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px;
border-radius: 50%; background: var(--pri); box-shadow: 0 0 0 3px var(--surf);
}
.nb-kd-zeit .wann { font-size: 11px; color: var(--t3); }
.nb-kd-zeit .was { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-kd-zeit .dazu { font-size: 12px; color: var(--t2); margin-top: 2px; overflow-wrap: anywhere; }
.nb-kd-zeit .herkunft {
font-size: 9.5px; padding: 1px 6px; border-radius: 999px; background: var(--surf3);
color: var(--t2); text-transform: none; letter-spacing: 0; font-weight: 500;
}
/* Formularbahn in einer breiten Spalte: Die Reiterleiste darueber nimmt die ganze Breite - sonst
schiebt MudBlazor die hinteren Reiter in eine Bildlaufleiste, und ein Reiter, den man nicht
sieht, ist einer, den man nicht ausfuellt. Die FELDER bleiben schmaler: Eine Eingabezeile ueber
1500 Pixel liest niemand besser, und das Auge verliert den Bezug zur Beschriftung links. */
.nb-formularbahn { max-width: 900px; }
/* Die Zeile. Zweizeilig statt tabellarisch: In 340 Pixel stehen Name, Wege und Kategorien
nicht nebeneinander - untereinander schon. */
.nb-sp-zeile {
display: flex; gap: 9px; padding: 8px 10px 8px 14px; cursor: pointer;
border-bottom: 1px solid var(--line); min-width: 0;
}
.nb-sp-zeile:hover { background: var(--surf2); }
.nb-sp-zeile.on { background: var(--pri-w); }
.nb-sp-zeile > .sym {
flex: 0 0 22px; display: flex; justify-content: center; padding-top: 2px; color: var(--t3);
}
.nb-sp-zeile.on > .sym { color: var(--pri-t); }
.nb-sp-zeile > .feld { flex: 1; min-width: 0; }
.nb-sp-zeile .kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb-sp-zeile .kopf .nm {
font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-sp-zeile .kopf .rf { font-size: 11px; color: var(--t3); }
.nb-sp-zeile .kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nb-sp-zeile .kopf .rechts .mud-icon-root { font-size: 15px; }
.nb-sp-zeile .weg {
font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; margin-top: 1px;
}
.nb-sp-zeile .marken { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.nb-sp-zeile .mk {
font-size: 10px; padding: 1px 6px; border-radius: 999px;
background: var(--surf3); color: var(--t2);
}
/* ===== Schmale Flächen: Handy und sehr schmale Fenster (ADR-0098) =====
Am Handy zeigt die Kopfleiste nicht dieselben Dinge wie am Desktop, nur kleiner - sie zeigt
weniger. Was hier verschwindet, ist nicht verloren: Die Menügruppen wandern in die untere
Leiste, Name und Status stehen im Avatar-Menü, der Mandant in dessen Kopfzeile.
Ohne das war die Leiste breiter als der Bildschirm, und die ganze Seite ließ sich seitlich
schieben - der Inhalt darunter gleich mit. */
@media (max-width: 760px) {
/* Die Hauptnavigation ersetzt die untere Leiste (ADR-0098): zwei Wege zum selben Ort wären
einer zu viel, und quer scrollen musste man dafür auch noch. */
.nb-mnav { display: none; }
/* Der Mandant steht am Handy nicht dauerhaft in der Leiste - bei einer Instanz mit einem
Mandanten ist er ohnehin immer derselbe. */
.nb-mandant { display: none; }
/* Vom Benutzerknopf bleibt der Avatar; Name und Statuszeile kosteten die halbe Breite. */
.nb-userbtn .nb-userinfo { display: none; }
/* Vom Bereichsfilter bleibt das Symbol. */
.nb-bereichstext { display: none; }
/* Enger zusammen: Bei vier Symbolen nebeneinander zählt jeder Pixel. */
.nb-appbar { padding: 0 8px; gap: 2px; }
.nb-brand { margin-right: 4px; }
/* Die untere Leiste tritt an die Stelle der Menügruppen. Fest am unteren Rand, weil der
Daumen dort ist - und über der Gestenleiste, die sonst auf den Zielflächen läge. */
.nb-untenleiste {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
background: var(--bg2); border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom);
}
.nb-untenleiste a,
.nb-untenleiste button {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 7px 2px 6px; position: relative;
background: none; border: 0; cursor: pointer;
font-size: 10.5px; line-height: 1.1; color: var(--t3); text-decoration: none;
/* Fünf Ziele auf einer Handybreite: Unter etwa 56px wird die Fläche unzuverlässig. */
min-height: 54px;
}
.nb-untenleiste .on { color: var(--pri); }
/* Der Zähler sitzt am Symbol, nicht an der Beschriftung - sonst wandert er beim Umbruch. */
.nb-untenleiste .ung {
position: absolute; top: 4px; left: 50%; margin-left: 2px;
background: var(--pri); color: var(--auf-pri); font-size: 9px; font-weight: 700;
min-width: 15px; height: 15px; border-radius: 999px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
}
/* Die Modul-Spalte belegte eine feste Grid-Spalte von 238px. Auf Handybreite blieb für den
Inhalt zu wenig übrig, er sprengte das Raster, und die Seite ließ sich seitlich schieben.
Sie wird deshalb zum Ausklappfach hinter dem Symbol links in der Kopfleiste - dieselben
Einträge, nur auf Abruf. */
.nb-stage,
.nb-stage.ohne-rail { grid-template-columns: minmax(0, 1fr); }
.nb-stage > .nb-rail { display: none; }
/* Nur hier gibt es Symbol und Fächer - am Desktop steht alles offen daneben. */
.nb-railknopf { display: inline-flex; }
.nb-fachschatten { display: block; }
/* Die beiden Fächer: außerhalb des Bildes geparkt, auf Abruf hereingefahren. Dasselbe
Muster wie das Chat-Panel - fest positioniert und per transform bewegt, damit nichts
das Layout darunter verschiebt. */
.nb-railfach {
display: block; transform: translateX(-100%);
padding-top: calc(12px + env(safe-area-inset-top));
}
.nb-mehrfach {
display: block; transform: translateY(100%);
padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.nb-railfach.auf, .nb-mehrfach.auf { transform: none; }
/* Die eigene Spalte der Seite (Kategorien, Adressbücher) wird zum selben Fach. Sie bleibt im
Markup der Seite stehen - nur ihre Darstellung wechselt, sodass keine Seite etwas vom
Handy-Layout wissen muss. Das Raster darunter wird einspaltig, sonst bliebe ihre Spur als
Lücke stehen. */
.nb-modul { grid-template-columns: minmax(0, 1fr); margin: 0; height: 100%; }
.nb-modul > .nb-rail {
position: fixed; top: 0; bottom: 0; left: 0; width: min(78vw, 300px); z-index: 260;
transform: translateX(-100%);
transition: transform .22s cubic-bezier(.25,.8,.3,1);
box-shadow: 12px 0 34px color-mix(in srgb, var(--schatten-farbe) 65%, transparent);
padding-top: calc(12px + env(safe-area-inset-top));
overscroll-behavior: contain;
}
.seitenrail-auf .nb-modul > .nb-rail { transform: none; }
/* Der Griff zum Breitenziehen ist eine Maus-Angelegenheit. */
.nb-modul > .nb-rail .nb-griff { display: none; }
/* ===== Eine Ansicht nach der anderen =====
Zwei Spalten nebeneinander brauchen Breite, die es hier nicht gibt: Die Liste allein ist am
Desktop 340px breit, daneben soll noch ein Kontakt stehen. Auf Handybreite gequetscht wird
beides unbrauchbar, und das Raster läuft seitlich aus dem Bild.
Stattdessen bekommt jeweils eine der beiden die ganze Fläche - Liste, bis man jemanden
auswählt, danach der Kontakt. Welche, sagt die Klasse detail-offen, die die Seite aus ihrem
eigenen Zustand setzt. */
.nb-zweispalt { grid-template-columns: minmax(0, 1fr); }
.nb-zweispalt > .nb-sp-inhalt { display: none; }
.nb-zweispalt.detail-offen > .nb-sp-spalte { display: none; }
.nb-zweispalt.detail-offen > .nb-sp-inhalt { display: block; }
/* Der Rückweg steht über dem Inhalt und bleibt beim Rollen stehen - wer unten in einem langen
Kontakt steht, soll nicht erst hochscrollen müssen, um herauszukommen. */
.nb-zurueck {
position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px;
width: 100%; margin: -16px -16px 8px; padding: 10px 16px; min-height: 44px;
background: var(--bg2); border: 0; border-bottom: 1px solid var(--line);
color: var(--t2); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
/* Der Trenngriff zwischen den Spalten hat ohne zweite Spalte nichts zu trennen. */
.nb-zweispalt > .nb-griff { display: none; }
/* Das Fluchtventil „Mehr": von unten, mit denselben Zeilen wie die Kopfleiste am Desktop. */
.nb-mehr .kopf {
padding: 14px 16px 8px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3);
}
.nb-mehr a {
display: flex; align-items: center; gap: 10px; padding: 12px 16px;
color: var(--t2); text-decoration: none; font-size: 14px;
}
.nb-mehr a.on { color: var(--pri); background: var(--pri-w); font-weight: 600; }
}
/* Über der Handybreite gibt es sie nicht: Dort trägt die Kopfleiste die Menügruppen, und zwei
Wege zum selben Ort wären einer zu viel (ADR-0092, „genau einmal"). */
@media (min-width: 761px) {
.nb-untenleiste { display: none; }
}
/* Seitlich schieben lässt sich hier grundsätzlich nichts: Eine Ansicht, die quer wegläuft, ist
am Handy verloren - man findet sie nicht zurück, weil es keinen Anhaltspunkt gibt. Läuft etwas
über, ist das ein Fehler im Layout und soll auffallen, statt sich wegschieben zu lassen. */
html, body { max-width: 100%; overflow-x: hidden; }
/* Das Symbol für die Modul-Spalte ist eine reine Handy-Angelegenheit: Am Desktop steht die
Spalte offen daneben, ein Knopf zum Ausklappen wäre dort ohne Wirkung. */
.nb-railknopf { display: none; }
/* ===== Ausklappfächer des Handy-Layouts =====
Am Desktop gibt es sie nicht - dort tragen Kopfleiste und Modul-Spalte ihre Einträge offen.
Deshalb steht das display:none hier außerhalb jeder Bedingung und wird erst im
Handy-Breakpoint aufgehoben: Ein Fach, das am Desktop nur zufällig unsichtbar wäre, stünde
beim nächsten Stilfehler mitten im Bild. */
.nb-railfach, .nb-mehrfach, .nb-fachschatten { display: none; }
.nb-railfach, .nb-mehrfach {
position: fixed; z-index: 260; background: var(--bg2);
transition: transform .22s cubic-bezier(.25,.8,.3,1);
overflow-y: auto; overscroll-behavior: contain;
}
.nb-railfach {
top: 0; bottom: 0; left: 0; width: min(78vw, 300px);
border-right: 1px solid var(--line); box-shadow: 12px 0 34px color-mix(in srgb, var(--schatten-farbe) 65%, transparent);
padding: 12px 9px;
}
.nb-mehrfach {
left: 0; right: 0; bottom: 0; max-height: 70vh;
border-top: 1px solid var(--line); box-shadow: 0 -12px 34px color-mix(in srgb, var(--schatten-farbe) 65%, transparent);
border-radius: 14px 14px 0 0;
}
.nb-railfach .kopf, .nb-mehrfach .kopf {
padding: 4px 11px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3);
}
.nb-mehrfach .kopf { padding: 14px 16px 8px; }
/* Die Zwischenueberschrift eines Abschnitts - dieselbe wie in der Spalte am Desktop, damit das
Fach am Handy nicht anders gegliedert aussieht als die Spalte, die es ersetzt. */
.nb-railfach .sect {
padding: 16px 11px 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--t3);
}
.nb-railfach a, .nb-mehrfach a {
display: flex; align-items: center; gap: 10px;
color: var(--t2); text-decoration: none; border-radius: 8px;
}
.nb-railfach a { padding: 9px 11px; font-size: 13px; }
.nb-mehrfach a { padding: 12px 16px; font-size: 14px; border-radius: 0; }
.nb-railfach a.on, .nb-mehrfach a.on { background: var(--pri-w); color: var(--pri-t); font-weight: 600; }
/* Die Verdunkelung liegt unter den Fächern und über allem anderen. */
.nb-fachschatten {
position: fixed; inset: 0; z-index: 259; background: var(--veil);
}
/* Der Rückweg aus dem Inhalt zur Liste ist eine Handy-Angelegenheit: Am Desktop stehen beide
nebeneinander, ein Knopf „zurück zur Liste" führte dort nirgendwohin. */
.nb-zurueck { display: none; }
/* Signaturen (ADR-0144) -------------------------------------------------- */
/* Der Block unter dem Eingabefeld: sichtbar, aber erkennbar NICHT das Feld. Er ist gedaempft und
hat keinen Cursor - wer hineinklickt, soll merken, dass hier nicht geschrieben wird. */
.nb-signaturblock {
margin: 8px 0 0;
padding: 8px 10px;
border-left: 3px solid var(--nb-rand, var(--line2));
background: var(--nb-hover);
border-radius: 0 6px 6px 0;
opacity: .85;
user-select: none;
}
.nb-signaturblock .kopf {
display: flex;
align-items: center;
gap: 6px;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
opacity: .7;
}
.nb-signaturblock pre {
margin: 4px 0 0;
font: inherit;
white-space: pre-wrap;
word-break: break-word;
}
.nb-signaturblock img { max-width: 240px; max-height: 90px; margin-top: 4px; }
/* Die gestaltete Fassung im Verfassen-Bereich: gezeigt, nicht als Quelltext abgedruckt. Der
Rahmen bleibt gedaempft - es ist eine Vorschau, kein Eingabefeld. */
.nb-signaturblock .gestaltet { margin-top: 4px; overflow-x: auto; }
.nb-signaturblock .gestaltet table { border-collapse: collapse; }
/* Der Editor der Vorlage - wie das Textfeld, nur mit Inhalt statt Zeilen. */
.nb-signaturpflege .nb-editor {
min-height: 220px;
overflow-y: auto;
}
.nb-signaturpflege .nb-editor table { border-collapse: collapse; }
.nb-farbprobe { padding: 1px 8px; border-radius: 4px; }
/* Hell schreiben, obwohl das Programm dunkel laeuft ------------------------
Es geht um die ANSICHT, nicht um die Nachricht: Was hinausgeht, traegt keinen Hintergrund. Der
Schalter beantwortet „wie sieht das beim Empfaenger aus" - und die Frage stellt sich, seit die
Signatur gestaltet sein darf. Dunkelgraue Schrift aus einer Agenturvorlage sieht im dunklen
Flow richtig aus und ist auf weissem Grund kaum zu lesen.
Gesetzt wird BEIDES, Grund und Schrift: Nur den Grund zu wechseln ergaebe helles Weiss mit
hellgrauer Schrift - genau der Fehler, den der Schalter sichtbar machen soll. */
.nb-antwort.hell .nb-antwort-feld,
.nb-antwort.hell .nb-signaturblock,
.nb-antwort.hell .nb-antwort-vorschau {
background: var(--papier);
color: var(--papier-text);
color-scheme: light;
}
.nb-antwort.hell .nb-antwort-feld a,
.nb-antwort.hell .nb-signaturblock a { color: var(--papier-verweis); }
.nb-antwort.hell .nb-signaturblock {
border-left-color: var(--papier-linie);
opacity: 1;
}
.nb-antwort.hell .nb-signaturblock .kopf { color: var(--papier-leise); }
.nb-signaturpflege .nb-tbar button.an { background: color-mix(in srgb, var(--t2) 20%, transparent); }
/* Die Pflege: eine Zeile je Signatur, das Formular klappt darunter auf. */
.nb-signaturpflege .zeile {
border: 1px solid var(--line2);
border-radius: 6px;
margin-bottom: 6px;
}
.nb-signaturpflege .kopf {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
cursor: pointer;
}
.nb-signaturpflege .kopf .name { font-weight: 600; }
.nb-signaturpflege .art {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
opacity: .6;
}
.nb-signaturpflege .formular { padding: 0 8px 10px; }
.nb-signaturpflege .bild { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-signaturpflege .bild img { max-width: 180px; max-height: 70px; }
.nb-signaturpflege .bild .hinweis { font-size: .75rem; opacity: .6; }
.nb-signaturpflege .knoepfe { display: flex; gap: 8px; }
.nb-signaturpflege .wo { font-size: .75rem; opacity: .55; }
/* Das Textfeld der Vorlage: dieselbe Anmutung wie der Antwortbereich, damit die Leiste darueber
erkennbar dazugehoert. */
.nb-signaturfeld {
width: 100%;
margin-top: 6px;
padding: 8px 10px;
border: 1px solid var(--line2);
border-radius: 6px;
background: transparent;
color: inherit;
font: inherit;
resize: vertical;
}
/* Die Platzhalter zum Klicken - „{NAME}" abzuschreiben ist genau die Stelle fuer einen
Tippfehler, den erst der Empfaenger sieht. */
.nb-signaturpflege .platzhalter {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.nb-signaturpflege .platzhalter .k { font-size: .75rem; opacity: .6; }
.nb-signaturpflege .platzhalter button {
border: 1px solid var(--line2);
border-radius: 4px;
background: transparent;
color: inherit;
font: inherit;
font-size: .78rem;
padding: 1px 6px;
cursor: pointer;
}
.nb-signaturpflege .platzhalter button:hover { background: color-mix(in srgb, var(--t2) 12%, transparent); }
/* Ein Abschnitt als KARTE (mj, 18.09.2026, nach dem Vorbild von Jira): Ueberschrift, Erklaerung
und Inhalt gehoeren sichtbar zusammen. Vorher standen drei Abschnitte untereinander, nur durch
eine Linie getrennt - und die Ueberschrift sah aus wie der Text darunter. */
.nb-abschnitt {
border: 1px solid var(--line2);
border-radius: 8px;
padding: 14px 16px 16px;
margin-bottom: 18px;
}
/* Ueberschrift und Anlegen-Knopf in EINER Zeile - der Knopf sitzt oben rechts, wie ueberall
sonst im Haus (mj, 18.09.2026). */
.nb-abschnitt > .kopf {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.nb-abschnitt h2 {
margin: 0 0 2px;
font-size: 15px;
font-weight: 700;
letter-spacing: .01em;
}
.nb-abschnitt > .kopf h2 { margin-bottom: 0; }
/* Die Erklaerung traegt die Begruendung und wird einmal gelesen - sie darf nicht so laut sein
wie die Ueberschrift darueber. */
.nb-abschnitt > .erklaerung {
margin: 0 0 12px;
font-size: 13px;
opacity: .7;
line-height: 1.45;
}
/* Wer unterschreibt womit - eine Zeile je Zuweisung, gelesen von links nach rechts. */
.nb-zuweisungen .zeile {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-bottom: 1px solid var(--line);
}
.nb-zuweisungen .zeile .ziel { font-weight: 600; min-width: 180px; }
.nb-zuweisungen .zeile .art {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .04em;
opacity: .6;
}
.nb-zuweisungen .neu {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
.nb-zuweisungen .neu .mud-input-control { min-width: 220px; max-width: 320px; }
/* „Filter" steht neben dem Feld, nicht darin - und buendig mit dem rechten Tabellenrand.
„margin-left:auto" statt eines Zwischenraums, und „flex:0 0 auto" ist das Entscheidende: Der
Rahmen eines MudSelect traegt „flex: 1 1 auto" und nimmt in einer Flex-Zeile den ganzen Rest.
Das sichtbare Feld bleibt darin links stehen - es sah aus, als klebte der Filter mitten in der
Zeile, obwohl die Zeile sehr wohl bis zum Rand ging. */
.nb-pf-filter {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
.nb-pf-filter .mud-input-control { flex: 0 0 auto; width: 220px; }
.nb-pf-filterwort { font-size: 13px; opacity: .7; white-space: nowrap; }
/* Der Bedingungs-Baukasten (Entwurf mj, 21.09.2026) - heute im Quellfilter der Ablage.
Die Einrückung mit farbiger Kante ist der Ersatz für Klammern: Man sieht die Schachtelung,
ohne sie lesen zu müssen. */
/* Jede Ebene eine Spur heller als die darüber.
Das ist keine Verzierung: Ohne Farbunterschied muss man die Einrückung ABZÄHLEN, um zu
sehen, welche Zeile zu welchem „oder" gehört - und bei drei Ebenen zählt niemand mehr
richtig. Mit der Staffelung sieht man es, ohne hinzusehen (Entwurf mj, 21.09.2026).
Gemischt wird gegen die Primärfarbe, nicht gegen Weiß: Im dunklen Erscheinungsbild wird es
damit heller, im hellen kräftiger - in beiden Fällen unterscheidbar. Gegen Weiß gemischt
wäre im hellen Bild ab der zweiten Ebene nichts mehr zu erkennen. */
.nb-regelgruppe {
border: 1px solid var(--mud-palette-lines-default);
border-radius: 3px;
padding: .5rem;
/* Rückfall für Browser ohne color-mix: einfarbig, aber nie ohne Hintergrund. */
background: var(--mud-palette-surface);
background: color-mix(
in srgb,
var(--mud-palette-primary) calc(4% + var(--stufe, 0) * 4%),
var(--mud-palette-surface));
}
.nb-regelgruppe:not(.oben) {
margin: .4rem 0;
/* Die Kante trägt die Schachtelung zusätzlich zur Farbe - wer Farben schlecht
unterscheidet, sieht die Zugehörigkeit trotzdem. */
border-left: 3px solid var(--mud-palette-primary);
}
/* Die Zeilen selbst bleiben neutral: Läge über dem getönten Grund noch eine zweite Tönung,
verschwämme der Unterschied zwischen „Zeile" und „Gruppe". Neutral heißt seit 06.10.2026 die
Feldfarbe, die überall gilt - sonst stünde im Feld ein zweifarbiger Kasten. */
.nb-regelzeile .mud-input-slot {
background: var(--feld);
}
.nb-regelgruppe > .kopf {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .4rem;
}
.nb-regelgruppe > .kopf .verknuepfung {
display: inline-flex;
align-items: center;
gap: .25rem;
font: inherit;
font-weight: 600;
font-size: .8rem;
letter-spacing: .04em;
padding: .2rem .55rem;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 3px;
background: var(--mud-palette-background);
color: inherit;
cursor: pointer;
}
.nb-regelgruppe > .kopf .verknuepfung:hover {
border-color: var(--mud-palette-primary);
}
.nb-regelgruppe > .kopf .erklaerung {
font-size: .8rem;
opacity: .7;
}
.nb-regelgruppe .rechts {
margin-left: auto;
display: flex;
align-items: center;
gap: .4rem;
}
/* Die Zahl je Zeile: rechtsbündig und in gleicher Breite, damit die Spalte steht. */
.nb-regelgruppe .zahl {
min-width: 4.5rem;
text-align: right;
font-size: .8rem;
font-variant-numeric: tabular-nums;
opacity: .75;
padding: .15rem .4rem;
background: var(--mud-palette-background-grey);
border-radius: 2px;
}
.nb-regelgruppe > .zeilen {
padding-left: .5rem;
}
.nb-regelzeile {
display: flex;
align-items: center;
gap: .5rem;
margin-bottom: .3rem;
}
.nb-regelzeile .feld { max-width: 15rem; flex: 1 1 15rem; }
.nb-regelzeile .op { max-width: 12rem; flex: 1 1 12rem; }
.nb-regelzeile .wert { max-width: 14rem; flex: 1 1 14rem; }
.nb-regelzeile .wert.zahl { max-width: 7rem; flex: 0 0 7rem; }
.nb-regelzeile .einheit { max-width: 6.5rem; flex: 0 0 6.5rem; }
.nb-regelgruppe > .zeilen > .fuss {
display: flex;
gap: .5rem;
margin-top: .4rem;
}
/* Die Aufgaben im Reiter - waagrecht statt in einer Spalte.
Eine eigene Spalte kostete dauerhaft Breite fuer meist EINE Aufgabe, und wer „Meine Arbeit"
offen hat, sieht seine Aufgaben ohnehin links (Abnahme mj, 21.09.2026). */
.nb-aufgabenleiste {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.nb-aufgabenleiste .karte {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px;
background: var(--surf2); color: var(--t1); font: inherit; font-size: 12.5px;
cursor: pointer; max-width: 22rem;
}
.nb-aufgabenleiste .karte:hover { border-color: var(--pri); }
/* Die gewaehlte traegt den Rahmen, nicht nur eine andere Fuellung: Bei zwei Karten
nebeneinander ist eine Fuellung allein schwer auszumachen. */
.nb-aufgabenleiste .karte.gewaehlt { border-color: var(--pri); box-shadow: 0 0 0 1px var(--pri); }
.nb-aufgabenleiste .karte.faellig .nr { color: var(--bad); font-weight: 700; }
.nb-aufgabenleiste .karte .nr { font-variant-numeric: tabular-nums; opacity: .8; }
.nb-aufgabenleiste .karte .titel {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-aufgabenleiste .karte .st { font-size: 11px; padding: 1px 6px; border-radius: 10px; }
.nb-aufgabenleiste .karte .st.inarbeit { background: color-mix(in srgb, var(--pri) 20%, transparent); color: var(--pri); }
.nb-aufgabenleiste .karte .st.wartet { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); }
.nb-aufgabenleiste .karte .st.erledigt { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.nb-aufgabenleiste .karte .st.verworfen { opacity: .6; text-decoration: line-through; }
.nb-aufgabenfelder { max-width: 46rem; }
/* Die Zahl am Reiter - dieselbe Anmutung wie die Zaehler in der Leiste. */
.nb-pf-reiter button .anzahl {
margin-left: 5px; padding: 0 5px; border-radius: 9px;
background: var(--surf3); font-size: 11px; font-variant-numeric: tabular-nums;
}
/* Wer die Aufgabe hat - in der Karte der Leiste.
„noch niemand" gedaempft: Es ist eine Auskunft, aber keine Person. */
.nb-aufgabenleiste .karte .wer {
display: inline-flex; align-items: center; gap: 2px;
font-size: 11.5px; opacity: .85; white-space: nowrap;
}
.nb-aufgabenleiste .karte .wer.offen { opacity: .55; font-style: italic; }
/* Mehrere Zeilen auf einmal (Abnahme mj, 21.09.2026).
Das Briefsymbol IST die Auswahl - ein eigener Umschalter „Mehrfachauswahl" waere ein Knopf,
den man erst findet, wenn man weiss, dass es ihn gibt, und danach vergisst auszuschalten. */
.nb-pf-zeile .sym .feld { position: relative; cursor: pointer; border-radius: 4px; }
.nb-pf-zeile .sym .feld .haken { display: none; }
/* Beim Darueberfahren tritt der leere Kasten an die Stelle des Briefs - so sieht man, dass hier
etwas zu waehlen ist, ohne dass ein zweites Zeichen die Zeile verbreitert. */
.nb-pf-zeile .sym .feld:hover > .mud-icon-root:first-child { display: none; }
.nb-pf-zeile .sym .feld:hover .haken { display: inline-flex; }
.nb-pf-zeile .sym .feld.gewaehlt { color: var(--pri); }
.nb-pf-zeile .sym .feld.gewaehlt:hover > .mud-icon-root:first-child { display: inline-flex; }
.nb-pf-zeile .sym .feld.gewaehlt:hover .haken { display: none; }
/* Die Zahl bleibt stehen, auch wenn man die gewaehlten Zeilen weggescrollt hat. Der Hinweis auf die
Loeschvorschlaege (ADR-0133) ist dieselbe Art Leiste: eine Aussage ueber die ganze Liste darunter. */
.nb-pf-auswahl, .nb-pf-vorschlag {
display: flex; align-items: center; gap: 8px;
padding: 4px 10px; font-size: 12.5px;
background: color-mix(in srgb, var(--pri) 14%, transparent);
border-bottom: 1px solid var(--line);
}
/* Dateivorschau: feste Fenstergröße, damit der Rahmen nicht bei jeder Datei springt. Wer drei
Anhänge nacheinander ansieht, soll den Schließen-Knopf immer an derselben Stelle finden.
Die Höhe steht am PAPIER, nicht am Inhalt: „mud-dialog-content" ist „flex: 1 1 auto" und
nimmt damit die Höhe seines Inhalts - ein