, das mit Default
display:inline keine zuverlässige Flex-Höhenkette mitmacht. Workaround: ein
position:relative-Wrapper bekommt vom Flex-Parent die Resthöhe, die TreeList
füllt den Wrapper absolut aus — damit hat sie eine definitive Höhe, der interne
Virtual-Scroll-Viewer kann darin intern scrollen. */
.nl-probenbaum-treewrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.nl-probenbaum-treewrap > .nl-proben-treelist {
position: absolute !important;
inset: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.nl-probenbaum-treewrap > .nl-proben-treelist > .dxbl-scroll-viewer {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
}
.nl-proben-treelist svg {
max-width: 1.25rem;
max-height: 1.25rem;
}
.nl-proben-treelist .dxbl-grid-filter-row .dxbl-edit input,
.nl-proben-treelist .dxbl-grid-filter-row .dxbl-text-edit-input {
height: 28px;
font-size: var(--nl-font-size-sm);
padding: 2px 8px;
}
/* Linkzelle: Probennummer mit farbiger Kante je Probentyp */
.nl-proben-treelist-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-left: 3px solid transparent;
border-radius: var(--nl-radius-sm);
text-decoration: none;
color: var(--nl-color-primary);
font-weight: 500;
transition: background 0.15s ease;
}
.nl-proben-treelist-link:hover {
background: var(--nl-color-surface-hover);
color: var(--nl-color-primary-dark);
text-decoration: none;
}
.nl-proben-treelist-link code {
color: inherit;
font-weight: 600;
}
.nl-proben-treelist-typ {
display: inline-block;
font-size: var(--nl-font-size-xs);
font-weight: 600;
color: var(--nl-color-text-secondary);
/* [LAY-18] text-transform: uppercase entfernt — Typ wird Normal-Case angezeigt
("Original" statt "ORIGINAL"). User-Feedback 2026-05-26: Badge war "zu gross
geschrieben". Farbcodierung via nl-probe-typ-* bleibt erhalten (WCAG-konform). */
text-transform: none;
letter-spacing: 0.02em;
padding: 1px 7px;
border-radius: 9999px;
border: 1px solid rgba(15, 48, 87, 0.10);
background: var(--nl-color-bg);
line-height: 1.2;
}
/* Probentyp-Akzentfarben für Link & Typ-Pille */
.nl-proben-treelist-link.nl-probe-typ-original { border-left-color: var(--nl-color-probe-original); }
.nl-proben-treelist-link.nl-probe-typ-teilung { border-left-color: var(--nl-color-probe-teilung); }
.nl-proben-treelist-link.nl-probe-typ-nachuntersuchung { border-left-color: var(--nl-color-probe-nachuntersuchung); }
.nl-proben-treelist-link.nl-probe-typ-rueckstellprobe { border-left-color: var(--nl-color-probe-rueckstellprobe); }
.nl-proben-treelist-link.nl-probe-typ-blindwert { border-left-color: var(--nl-color-probe-blindwert); }
.nl-proben-treelist-link.nl-probe-typ-duplikat { border-left-color: var(--nl-color-probe-duplikat); }
.nl-proben-treelist-typ.nl-probe-typ-original { color: var(--nl-color-probe-original); border-color: rgba(38, 39, 102, 0.30); }
.nl-proben-treelist-typ.nl-probe-typ-teilung { color: var(--nl-color-probe-teilung); border-color: rgba(124, 58, 237, 0.30); }
.nl-proben-treelist-typ.nl-probe-typ-nachuntersuchung { color: var(--nl-color-probe-nachuntersuchung); border-color: rgba(8, 145, 178, 0.30); }
.nl-proben-treelist-typ.nl-probe-typ-rueckstellprobe { color: var(--nl-color-probe-rueckstellprobe); border-color: rgba(146, 64, 14, 0.30); }
.nl-proben-treelist-typ.nl-probe-typ-blindwert { color: var(--nl-color-probe-blindwert); border-color: rgba(55, 65, 81, 0.30); }
.nl-proben-treelist-typ.nl-probe-typ-duplikat { color: var(--nl-color-probe-duplikat); border-color: rgba(6, 95, 70, 0.30); }
/* =====================================================================
Stammdaten-Cockpit (/stammdaten)
===================================================================== */
.nl-cockpit {
padding: 12px 0 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.nl-cockpit-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.nl-cockpit-title {
font-size: var(--nl-font-size-2xl);
font-weight: 700;
color: var(--nl-color-text-primary);
margin: 4px 0 4px;
letter-spacing: -0.01em;
}
.nl-cockpit-sub {
color: var(--nl-color-text-secondary);
font-size: var(--nl-font-size-base);
margin: 0;
max-width: 720px;
}
/* ----- KPI-Reihe ----- */
.nl-cockpit-kpis .nl-cockpit-kpi-link {
display: block;
text-decoration: none;
color: inherit;
border-radius: var(--nl-radius-lg);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nl-cockpit-kpis .nl-cockpit-kpi-link:hover {
transform: translateY(-1px);
box-shadow: var(--nl-shadow-md);
}
.nl-cockpit-kpis .nl-cockpit-kpi-link:focus-visible {
outline: 2px solid var(--nl-color-primary-light);
outline-offset: 2px;
}
.nl-cockpit-kpi-warn {
color: var(--nl-color-warn);
font-weight: 600;
}
.nl-cockpit-kpi-sep {
color: var(--nl-color-text-secondary);
}
/* ----- Sektion-Header ----- */
.nl-cockpit-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 12px;
}
.nl-cockpit-legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: var(--nl-font-size-xs);
color: var(--nl-color-text-secondary);
}
.nl-akk-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ----- Cockpit-Filter-Card (aufgeräumt) ----- */
.nl-filter-card {
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-lg);
box-shadow: var(--nl-shadow-sm);
border: 1px solid rgba(15, 48, 87, 0.06);
padding: 14px 16px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.nl-filter-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.nl-filter-row-search {
align-items: flex-end;
justify-content: space-between;
}
.nl-filter-label {
font-size: var(--nl-font-size-xs);
color: var(--nl-color-text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.nl-filter-label-chips {
flex-shrink: 0;
min-width: 70px;
color: var(--nl-color-text-secondary);
}
.nl-filter-search {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 320px;
max-width: 520px;
}
.nl-filter-search-input {
width: 100%;
}
.nl-filter-toggles {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
padding-bottom: 2px;
}
.nl-filter-toggle {
font-size: var(--nl-font-size-sm);
color: var(--nl-color-text-primary);
}
.nl-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1 1 auto;
align-items: center;
}
/* Schmale, abgerundete Chip-Buttons */
.nl-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 9999px;
font-size: var(--nl-font-size-xs);
font-weight: 600;
line-height: 1.4;
color: var(--nl-color-text-secondary);
background: var(--nl-color-bg);
border: 1px solid rgba(15, 48, 87, 0.14);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
white-space: nowrap;
}
.nl-chip:hover {
background: rgba(38, 39, 102, 0.07);
color: var(--nl-color-primary-dark);
border-color: rgba(38, 39, 102, 0.30);
}
.nl-chip:focus-visible {
outline: 2px solid var(--nl-color-primary-light);
outline-offset: 2px;
}
.nl-chip-active {
background: var(--nl-color-primary);
color: var(--nl-color-text-inverted);
border-color: var(--nl-color-primary);
box-shadow: 0 1px 3px rgba(38, 39, 102, 0.25);
}
.nl-chip-active:hover {
background: var(--nl-color-primary-light);
color: var(--nl-color-text-inverted);
border-color: var(--nl-color-primary-light);
}
.nl-filter-footer {
border-top: 1px solid rgba(15, 48, 87, 0.06);
padding-top: 8px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nl-filter-stats {
font-size: var(--nl-font-size-xs);
color: var(--nl-color-text-secondary);
letter-spacing: 0.02em;
}
.nl-filter-stats strong {
color: var(--nl-color-text-primary);
font-weight: 700;
}
.nl-filter-stats-sep {
margin: 0 6px;
color: rgba(15, 48, 87, 0.20);
}
/* Mobile: Suche und Toggles untereinander stapeln */
@media (max-width: 768px) {
.nl-filter-row-search {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.nl-filter-search {
max-width: none;
}
.nl-filter-toggles {
gap: 14px;
}
.nl-filter-label-chips {
min-width: 0;
width: 100%;
}
}
/* ----- Akkreditierungs-Matrix ----- */
.nl-cockpit-grid {
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-lg);
box-shadow: var(--nl-shadow-sm);
padding: 8px;
overflow-x: auto;
}
.nl-akk-grid {
--nl-akk-cell-bg: var(--nl-color-surface-subtle);
}
.nl-akk-param {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
}
.nl-akk-param-kuerzel {
font-weight: 600;
color: var(--nl-color-text-primary);
background: transparent;
padding: 0;
}
.nl-akk-param-bezeichnung {
font-size: var(--nl-font-size-xs);
color: var(--nl-color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
}
.nl-akk-cell {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 60px;
padding: 4px 10px;
border-radius: var(--nl-radius-sm);
border: 1px solid transparent;
font-size: var(--nl-font-size-xs);
font-weight: 600;
line-height: 1.4;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
background: var(--nl-akk-cell-bg, #F3F4F6);
color: var(--nl-color-text-primary);
}
.nl-akk-cell:hover {
transform: translateY(-1px);
box-shadow: var(--nl-shadow-sm);
filter: brightness(1.03);
}
.nl-akk-cell:focus-visible {
outline: 2px solid var(--nl-color-primary-light);
outline-offset: 2px;
}
.nl-akk-cell-akkreditiert {
background: rgba(22, 163, 74, 0.14);
color: #14532D;
border-color: rgba(22, 163, 74, 0.35);
}
.nl-akk-cell-nicht {
background: rgba(217, 119, 6, 0.14);
color: #7C2D12;
border-color: rgba(217, 119, 6, 0.35);
}
.nl-akk-cell-leer {
background: rgba(107, 114, 128, 0.10);
color: var(--nl-color-text-secondary);
border: 1px dashed rgba(107, 114, 128, 0.35);
}
/* ----- Workflow-Karten ----- */
.nl-cockpit-workflow-card {
padding: 16px 18px;
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-lg);
box-shadow: var(--nl-shadow-sm);
}
.nl-cockpit-workflow-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.nl-cockpit-workflow-head h2 {
margin: 0;
}
.nl-cockpit-table {
margin-bottom: 0;
}
.nl-cockpit-table th {
font-size: var(--nl-font-size-xs);
color: var(--nl-color-text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid rgba(15, 48, 87, 0.10);
}
.nl-cockpit-row {
cursor: pointer;
transition: background 0.12s ease;
}
.nl-cockpit-row:hover {
background: var(--nl-color-surface-hover);
}
.nl-cockpit-typ {
display: inline-block;
padding: 1px 8px;
border-radius: 9999px;
font-size: var(--nl-font-size-xs);
font-weight: 600;
background: rgba(38, 39, 102, 0.10);
color: var(--nl-color-primary);
}
.nl-cockpit-bezeichnung {
color: var(--nl-color-text-primary);
font-weight: 500;
}
/* =====================================================================
Editor-Forms in Card-Sektionen (FormCard)
Wird von allen Anlage-/Editor-Pages genutzt: MatrixEditor, MethodeEditor,
ParameterEditor, PruefpositionEditor, AuftragsartEditor, KundenEditor,
PruefumfangDetail, GrenzwertsetDetail, AuftragNeu.
===================================================================== */
/* Aeusserer Container begrenzt die Formularbreite auf grossen Monitoren. */
.nl-form-container {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
}
.nl-form-container.nl-form-container-wide {
max-width: 1200px;
}
.nl-form-container.nl-form-container-xwide {
max-width: 1500px;
}
/* ProbeDetail: Page nutzt die volle verfügbare Breite — wie der Probenbaum auf Auftragsliste. */
.nl-form-container.nl-form-container-full {
max-width: none;
}
/* =====================================================================
Einheitlicher Seitenkopf (.nl-page-head, plus Aliasse für Bestand).
Kompakt: h1 1.5rem; Trennung rein über Margin – kein Hairline-Rule,
damit der Header nicht „freischwebend" über dem Card-Layout wirkt.
===================================================================== */
.nl-page-head,
.nl-form-page-head,
.nl-hub-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 0 0 14px 0;
}
.nl-page-head h1,
.nl-form-page-head h1,
.nl-hub-head h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--nl-color-text-primary);
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.nl-page-head p,
.nl-page-head small,
.nl-hub-head p,
.nl-hub-head small,
.nl-form-page-head p,
.nl-form-page-head small {
color: var(--nl-color-text-secondary);
font-size: 0.8125rem;
margin: 2px 0 0 0;
display: block;
line-height: 1.4;
}
.nl-page-head-actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.nl-form-page-eyebrow {
text-transform: uppercase;
letter-spacing: 0.10em;
font-size: var(--nl-font-size-xs);
font-weight: 600;
color: var(--nl-color-text-secondary);
margin-bottom: 2px;
}
.nl-form-page-status {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Schmale Info-Card oberhalb der Formular-Cards: Erstellt/Freigegeben-Meta. */
.nl-form-status-card {
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-lg);
padding: 12px 18px;
box-shadow: var(--nl-shadow-sm);
border: 1px solid rgba(15, 48, 87, 0.06);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 4px 24px;
font-size: var(--nl-font-size-sm);
}
.nl-form-status-card dt {
color: var(--nl-color-text-secondary);
font-weight: 500;
font-size: var(--nl-font-size-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
.nl-form-status-card dd {
margin: 0 0 6px 0;
color: var(--nl-color-text-primary);
}
/* Card-Sektion (FormCard.razor) */
.nl-card-form {
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-lg);
box-shadow: var(--nl-shadow-sm);
border: 1px solid rgba(15, 48, 87, 0.06);
padding: 20px 22px;
}
.nl-card-form + .nl-card-form {
margin-top: 18px;
}
/* Innerhalb eines EditForm: Cards ebenfalls mit Abstand zueinander */
.nl-form-container form > .nl-card-form + .nl-card-form,
.nl-form-container form > .nl-card-form + .nl-form-actions,
.nl-form-container form > .nl-form-actions {
margin-top: 18px;
}
/* Mehrspaltiges Card-Layout (Bootstrap-row mit FormCards): gleiche Höhe + Abstand
zu Geschwister-Cards/Action-Bar. */
.nl-form-container form > .nl-card-form + .nl-form-row,
.nl-form-container form > .nl-form-row + .nl-card-form,
.nl-form-container form > .nl-form-row + .nl-form-actions,
.nl-form-container form > .nl-form-row {
margin-top: 18px;
}
.nl-form-row > [class*="col-"] { display: flex; }
.nl-form-row > [class*="col-"] > .nl-card-form { width: 100%; }
/* Probe-Detail-Toolbar: Status-Aktionen links, Anlegen/Sperren rechts.
Sticky-Verhalten: bleibt unter dem Header (56px) sichtbar beim Scrollen. */
.nl-probe-toolbar {
position: sticky;
top: 56px;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 10px 14px;
background: var(--nl-color-bg-card);
border: 1px solid rgba(15, 48, 87, 0.06);
border-radius: var(--nl-radius-md);
box-shadow: var(--nl-shadow-sm);
backdrop-filter: saturate(140%) blur(2px);
}
/* 2-Spalten-Row Übersicht (groß) + Prüfumfang-Hint (schmal). */
.nl-probe-overview-row > [class*="col-"] {
display: flex;
}
.nl-probe-overview-row > [class*="col-"] > .nl-detail-card {
width: 100%;
}
.nl-probe-toolbar-left,
.nl-probe-toolbar-right {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.nl-probe-toolbar-left:empty {
/* Wenn keine Status-Übergänge möglich (Gesperrt/Archiviert),
trotzdem nicht kollabieren — Layout-Stabilität. */
min-width: 1px;
}
/* Action-Bar im ProbeDetail — eine einheitliche horizontale Reihe mit
logischer Button-Gruppierung. Ersetzt das alte left/right-Split-Pattern. */
.nl-probe-actionbar {
justify-content: flex-start;
flex-wrap: wrap;
gap: 6px;
padding: 8px 12px;
}
.nl-probe-actionbar-spacer { flex: 1 1 auto; }
.nl-probe-actionbar-divider {
display: inline-block;
width: 1px;
height: 18px;
background: var(--nl-color-border-default);
margin: 0 4px;
}
/* In der Action-Bar sollen native Buttons + DxButton-Wrapper die
gleiche Linie haben — unsere nl-btn-*-Klassen reichen. */
.nl-probe-actionbar .nl-btn-primary-sm,
.nl-probe-actionbar .nl-btn-link-sm {
line-height: 1.2;
}
/* Inline-Editor in der Wert-Spalte des Ergebnis-Grids: kompakter ohne Border-Hover */
.nl-ergebnis-grid .nl-ergebnis-input {
max-width: 180px;
}
/* Operator-Auswahl + Zahleneingabe + Einheit nebeneinander */
.nl-numeric-edit {
display: flex;
gap: 4px;
align-items: center;
}
.nl-operator-select {
width: 64px;
flex-shrink: 0;
}
.nl-ergebnis-einheit {
flex-shrink: 0;
white-space: nowrap;
}
/* Ergebnis-Grid soll seine volle Höhe einnehmen — kein internes Scrolling.
DevExpress setzt Default-Höhen am Wrapper, die wir hier auflösen. */
.nl-ergebnis-grid,
.nl-ergebnis-grid .dxbl-grid,
.nl-ergebnis-grid .dxbl-grid-table-content-area {
height: auto !important;
max-height: none !important;
}
.nl-ergebnis-grid .dxbl-scroll-viewer,
.nl-ergebnis-grid .dxbl-grid-table-scroll-container {
overflow: visible !important;
max-height: none !important;
}
.nl-ergebnis-actions {
display: flex;
gap: 4px;
align-items: center;
justify-content: flex-end;
}
/* Inline-Icon-Button für Aktionen in Grid-Zellen (Sonderwert, Kommentar). */
.nl-cell-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--nl-color-border-default);
background: var(--nl-color-bg-card);
border-radius: 6px;
color: var(--nl-color-text-secondary, #6b7280);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nl-cell-icon-btn:hover:not(:disabled) {
background: rgba(38, 39, 102, 0.06);
color: var(--nl-color-primary, #262766);
border-color: var(--nl-color-primary, #262766);
}
.nl-cell-icon-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.nl-cell-icon-btn.nl-cell-icon-btn-active {
background: rgba(251, 188, 58, 0.12);
color: var(--nl-color-accent, #fbbc3a);
border-color: rgba(251, 188, 58, 0.4);
}
.nl-cell-icon-btn svg { width: 14px; height: 14px; }
/* Kleines Badge im Icon-Button (z. B. Anzahl verknüpfter Chargen). */
.nl-cell-icon-badge {
margin-left: 3px;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
/* Aktions-Liste innerhalb des „Weitere Aktionen"-Popups (DxPopup). */
.nl-overflow-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.nl-overflow-action {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: 1px solid #e5e7eb;
background: #fff;
border-radius: 8px;
cursor: pointer;
text-align: left;
transition: background 0.15s, border-color 0.15s;
}
.nl-overflow-action:hover:not(:disabled) {
background: rgba(38, 39, 102, 0.05);
border-color: rgba(38, 39, 102, 0.25);
}
.nl-overflow-action:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.nl-overflow-action-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(38, 39, 102, 0.08);
color: var(--nl-color-primary, #262766);
}
.nl-overflow-action-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.nl-overflow-action-title {
font-weight: 600;
color: var(--nl-color-text-primary, #1a1a2e);
font-size: 14px;
line-height: 1.3;
}
.nl-overflow-action-desc {
color: var(--nl-color-text-secondary, #6b7280);
font-size: 12px;
line-height: 1.35;
}
.nl-overflow-action-warn .nl-overflow-action-icon {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
}
.nl-overflow-action-warn .nl-overflow-action-title {
color: #b45309;
}
.nl-aenderungs-counter {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px;
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
background: rgba(91, 141, 184, 0.15);
color: var(--nl-color-secondary);
border: 1px solid rgba(91, 141, 184, 0.3);
cursor: help;
}
.nl-grenzwert-hint {
font-size: 11px;
color: var(--nl-color-text-secondary);
margin-top: 2px;
line-height: 1.3;
}
.nl-grenzwert-cell {
font-size: 12px;
color: var(--nl-color-text-primary);
line-height: 1.3;
}
.nl-dirty-dot {
color: var(--nl-color-warn);
font-weight: 700;
font-size: 14px;
line-height: 1;
}
/* Handbuch-Link in der unteren NavMenu-Sektion (über Account). */
.nl-nav-foot {
padding: 4px 8px 8px 8px;
}
.nl-nav-link-foot {
font-size: var(--nl-font-size-sm);
opacity: 0.85;
}
.nl-nav-link-foot:hover { opacity: 1; }
/* ---------------------------------------------------------------------
Handbuch / Hilfe-Page
--------------------------------------------------------------------- */
.nl-hilfe-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
align-items: start;
}
.nl-hilfe-sidebar {
position: sticky;
top: 16px;
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-md);
box-shadow: var(--nl-shadow-sm);
border: 1px solid var(--nl-color-border-default);
/* Marken-"Buchrücken"-Leiste oben — dezenter Navy-Akzent, Gold bleibt den
aktiven/hervorgehobenen Elementen (Eyebrow-Balken, aktiver Link) vorbehalten. */
border-top: 3px solid var(--nl-color-primary);
padding: 16px 14px;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.nl-hilfe-eyebrow {
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.10em;
font-size: var(--nl-font-size-xs);
font-weight: 700;
color: var(--nl-color-primary);
margin-bottom: 10px;
}
.nl-hilfe-eyebrow::before {
content: "";
flex: none;
width: 4px;
height: 14px;
background: var(--nl-color-accent);
border-radius: 2px;
}
.nl-hilfe-liste {
list-style: none;
padding: 0;
margin: 0;
}
.nl-hilfe-link {
display: block;
padding: 6px 10px;
border-radius: var(--nl-radius-sm);
color: var(--nl-color-text-primary);
text-decoration: none;
font-size: var(--nl-font-size-sm);
transition: background-color 120ms ease-out, color 120ms ease-out;
}
.nl-hilfe-link:hover { background: var(--nl-color-surface-hover); }
.nl-hilfe-link.active {
background: var(--nl-color-primary);
color: var(--nl-color-text-inverted);
font-weight: 600;
/* Gold-Akzent als Inset statt border-left, damit sich Padding/Breite nicht
gegenüber dem inaktiven Zustand verschieben. */
box-shadow: inset 3px 0 0 var(--nl-color-accent);
}
/* Hierarchische Sidebar — Top-Level + ausklappbarer Subordner */
.nl-hilfe-tree-item { margin-bottom: 2px; }
.nl-hilfe-tree-summary {
list-style: none;
display: flex;
align-items: center;
cursor: pointer;
padding: 0;
border-radius: 4px;
}
.nl-hilfe-tree-summary::marker,
.nl-hilfe-tree-summary::-webkit-details-marker { display: none; }
.nl-hilfe-tree-summary::before {
content: "›";
display: inline-block;
width: 14px;
margin-right: 2px;
text-align: center;
font-weight: 600;
color: var(--nl-color-text-secondary);
transition: transform 120ms ease-out;
}
details[open] > .nl-hilfe-tree-summary::before {
transform: rotate(90deg);
}
.nl-hilfe-link-top {
flex: 1 1 auto;
font-weight: 500;
}
.nl-hilfe-sublist {
border-left: 1px solid var(--nl-color-border-default);
margin: 2px 0 6px 10px;
padding-left: 6px;
}
.nl-hilfe-link-sub {
font-size: 0.86rem;
padding-left: 14px;
color: var(--nl-color-text-secondary);
}
.nl-hilfe-link-sub:hover { color: var(--nl-color-text-primary); }
.nl-hilfe-link-sub.active { color: var(--nl-color-text-inverted); }
.nl-hilfe-content {
background: var(--nl-color-bg-card);
border-radius: var(--nl-radius-md);
box-shadow: var(--nl-shadow-sm);
border: 1px solid var(--nl-color-border-default);
padding: 24px 32px;
min-height: 320px;
}
/* Prose-Dokulayout: zentrierte Lesespalte mit Buchsatz-Typografie, angelehnt an
gepflegte Doku-Tools (z. B. GitBook/Notion). Alle Werte über --nl-*-Tokens. */
.nl-hilfe-article {
max-width: 760px;
margin: 0 auto;
font-size: var(--nl-font-size-base);
line-height: 1.65;
color: var(--nl-color-text-primary);
}
.nl-hilfe-article > *:first-child { margin-top: 0; }
.nl-hilfe-article p { margin: 0 0 14px; }
.nl-hilfe-article ul,
.nl-hilfe-article ol {
margin: 0 0 14px;
padding-left: 1.4em;
}
.nl-hilfe-article li + li { margin-top: 4px; }
.nl-hilfe-article li > ul,
.nl-hilfe-article li > ol { margin: 4px 0 0; }
.nl-hilfe-article strong { font-weight: 600; }
.nl-hilfe-article hr {
border: none;
border-top: 1px solid var(--nl-color-border-default);
margin: 32px 0;
}
.nl-hilfe-article a {
color: var(--nl-color-primary);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--nl-color-primary) 35%, transparent);
text-underline-offset: 2px;
}
.nl-hilfe-article a:hover {
text-decoration-color: var(--nl-color-primary);
}
.nl-hilfe-article a:focus-visible,
.nl-hilfe-link:focus-visible,
.nl-hilfe-tree-summary:focus-visible {
outline: 2px solid var(--nl-color-primary-light);
outline-offset: 2px;
}
.nl-hilfe-article h1,
.nl-hilfe-article h2,
.nl-hilfe-article h3 {
color: var(--nl-color-text-primary);
}
/* Kapitel-Kopf im Anfänger-Guide-Look (docs/anfaenger-guide/guide.css .step__head):
Navy-Markenband mit Gold-Leiste links + "Handbuch"-Eyebrow. Der Marken-Verlauf ist
bewusst themeunabhängig (Hell/Dunkel) — identischer Verlauf wie .nl-hero auf der
Landing-Page, daher fest über die Brand-/Primary-Tokens statt Fläche/Text-Tokens. */
.nl-hilfe-article h1 {
position: relative;
margin: 0 0 28px;
padding: 22px 28px 20px 32px;
background: linear-gradient(135deg, var(--nl-color-primary-dark, #1a1b4b) 0%, var(--nl-color-primary, #262766) 60%, var(--nl-color-primary-light, #5678b5) 100%);
color: var(--nl-color-text-inverted);
font-size: var(--nl-font-size-2xl);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.3;
border-radius: var(--nl-radius-md);
box-shadow: var(--nl-shadow-md);
}
.nl-hilfe-article h1::before {
content: "Handbuch";
display: block;
font-size: var(--nl-font-size-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--nl-color-accent);
margin-bottom: 8px;
}
.nl-hilfe-article h1::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--nl-color-accent);
border-radius: var(--nl-radius-md) 0 0 var(--nl-radius-md);
}
/* Sektionskopf: Gold-Bar-Akzent links (wie .step__head/.fs-section__h im Guide). */
.nl-hilfe-article h2 {
font-size: var(--nl-font-size-xl);
font-weight: 700;
color: var(--nl-color-primary);
letter-spacing: -0.005em;
margin: 40px 0 16px;
padding-left: 14px;
border-left: 4px solid var(--nl-color-accent);
}
/* h3 bewusst dezenter als h2 — nur Marken-Farbakzent, kein Balken. */
.nl-hilfe-article h3 {
font-size: var(--nl-font-size-lg);
font-weight: 600;
color: var(--nl-color-primary);
margin: 26px 0 8px;
}
.nl-hilfe-article h2:first-child,
.nl-hilfe-article h3:first-child { margin-top: 0; }
/* Handbuch-Bilder: als gerahmte "Figure" wie im Anfänger-Guide (Rahmen + weicher
Marken-Schatten + Radius über Tokens), kompakt dargestellt. Lightbox-Verhalten
(cursor:zoom-in, JS-Overlay unten) bleibt unverändert. */
.nl-hilfe-article img {
display: block;
max-width: 480px;
max-height: 320px;
width: auto;
height: auto;
margin: 16px 0;
cursor: zoom-in;
background: var(--nl-color-bg-card);
border: 1px solid var(--nl-color-border-card);
border-radius: var(--nl-radius-sm);
box-shadow: var(--nl-shadow-sm);
transition: box-shadow 120ms ease-out, transform 120ms ease-out;
}
.nl-hilfe-article img:hover {
box-shadow: var(--nl-shadow-md);
transform: translateY(-1px);
}
/* Lightbox-Overlay (dynamisch per JS angehängt). */
.nl-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 10500;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
animation: nl-lightbox-fade 120ms ease-out;
}
@keyframes nl-lightbox-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.nl-lightbox img {
max-width: 95vw;
max-height: 95vh;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
border-radius: 4px;
cursor: default;
}
.nl-lightbox-close {
position: absolute;
top: 16px;
right: 24px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #fff;
border-radius: 50%;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.nl-lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Farb-Eingabe: Picker-Swatch + Text-Feld + Reset-Button. Wird z. B. im
Probentyp-Editor verwendet. Text-Feld erlaubt auch CSS-Farbnamen, der
Swatch ist nur ein Schnellwähler. */
.nl-color-edit {
display: flex;
align-items: center;
gap: 8px;
}
.nl-color-swatch {
width: 36px;
height: 36px;
padding: 0;
border: 1px solid rgba(15, 48, 87, 0.18);
border-radius: 6px;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.nl-color-swatch:hover {
border-color: var(--nl-color-primary);
}
.nl-color-swatch::-webkit-color-swatch {
border: none;
border-radius: 4px;
}
.nl-color-swatch::-moz-color-swatch {
border: none;
border-radius: 4px;
}
.nl-color-text {
flex: 1 1 auto;
}
.nl-color-clear {
width: 28px;
height: 28px;
border: 1px solid rgba(15, 48, 87, 0.12);
background: transparent;
color: var(--nl-color-text-secondary);
border-radius: 4px;
cursor: pointer;
line-height: 1;
font-size: 18px;
flex-shrink: 0;
}
.nl-color-clear:hover {
background: rgba(15, 48, 87, 0.05);
color: var(--nl-color-text-primary);
}
.nl-hilfe-article code {
background: var(--nl-color-surface-subtle);
color: var(--nl-color-text-primary);
font-family: var(--nl-font-family-mono);
padding: 2px 6px;
border: 1px solid var(--nl-color-border-default);
border-radius: var(--nl-radius-sm);
font-size: 0.875em;
}
.nl-hilfe-article pre {
background: var(--nl-color-surface-subtle);
border: 1px solid var(--nl-color-border-default);
border-radius: var(--nl-radius-sm);
padding: 14px 16px;
overflow-x: auto;
line-height: 1.5;
}
.nl-hilfe-article pre code { background: none; border: none; padding: 0; font-size: 0.85em; }
/* Mermaid-Diagramme im Handbuch: mermaid.js ersetzt durch