OpenNIT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

/* ============================================================
   Ausstattung & Preise (Modul `catalog`) – Prefix: cat-
   Baut auf den zentralen Komponenten aus app.css auf; nur
   modul-spezifische Ergänzungen. Farben über Design-Tokens.
   ============================================================ */

.cat-wrap { width: 100%; }

/* Filterleiste – eine Zeile: Suchfeld wächst, Kategorie-Select nimmt seine
   Inhaltsbreite, Buttons bleiben kompakt. Umbruch erst auf schmalen Screens. */
.cat-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; width: 100%; }
.cat-filter input[type="search"] { flex: 1 1 220px; min-width: 200px; max-width: 520px; }
.cat-filter select { flex: 0 0 auto; width: auto; }
/* Kategorie-Filter als durchsuchbares Dropdown: feste, kompakte Breite statt
   der vollen Zeilenbreite (Standard von .ss-wrap). */
.cat-filter .ss-wrap { flex: 0 0 auto; width: auto; min-width: 210px; }

/* Übersicht: feste Spaltenbreiten (per <colgroup> im Template) – so fluchten
   die Spalten über alle Kategorien durchgehend; zu lange Einträge brechen
   zweizeilig um statt zu überlaufen. */
.cat-list-table { table-layout: fixed; }
.cat-list-table th { white-space: normal; }
.cat-list-table td { overflow-wrap: break-word; }

/* Kategorie-Trennzeile innerhalb der durchgehenden Tabelle: eine dezente
   Abschnittszeile mit Farbpunkt und Anzahl (statt separater Tabellen je
   Kategorie). Farbe des Punkts über die token-basierten cat-s*-Klassen. */
.cat-catrow td {
    background: var(--gray-50);
    font-weight: 700;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}
.cat-catrow:first-child td { border-top: 0; }
.cat-catrow-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    margin-right: 0.5rem; vertical-align: middle;
    background: var(--cat-c, var(--indigo-500));
}
.cat-catrow-count { margin-left: 0.5rem; font-weight: 500; font-size: 0.78rem; color: var(--color-text-muted); }

.cat-col-price { text-align: right; white-space: nowrap; }
.cat-col-actions { text-align: right; white-space: nowrap; width: 1%; }
.cat-col-num { text-align: right; width: 1%; white-space: nowrap; }
.cat-price-alt { display: block; font-size: 0.78rem; }
.cat-spec { font-size: 0.8rem; }
.cat-std { margin-left: 0.4rem; }
.cat-stale { color: var(--amber-700); font-weight: 600; }

/* Detailseite */
.cat-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.1rem; align-items: start; }
.cat-detail-main { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.cat-detail-side { min-width: 0; }
@media (max-width: 900px) { .cat-detail-grid { grid-template-columns: 1fr; } }

.cat-dl { margin: 0; }
.cat-dl-row { display: flex; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--color-border); }
.cat-dl-row:first-child { border-top: 0; }
.cat-dl-row dt { flex: 0 0 11rem; color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }
.cat-dl-row dd { margin: 0; font-weight: 500; color: var(--color-text); }
.cat-spec-box { margin-top: 0.9rem; font-size: 0.88rem; line-height: 1.55; }

/* Preisverlauf */
.cat-chart-scroll { overflow-x: auto; }
.cat-chart { width: 100%; min-width: 480px; height: auto; display: block; }
.cat-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--color-text-muted); }
.cat-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cat-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--cat-c, var(--indigo-500)); }

/* Diagramm-Farben ausschließlich über Design-Tokens (keine Hex-Literale). */
.cat-chart .cat-grid { stroke: var(--color-border); stroke-width: 1; }
.cat-chart .cat-axis { fill: var(--gray-500); }
.cat-chart .cat-line { fill: none; stroke-width: 2; stroke: var(--cat-c, var(--indigo-500)); }
.cat-chart .cat-dot  { fill: var(--cat-c, var(--indigo-500)); }
.cat-s0 { --cat-c: var(--indigo-500); }
.cat-s1 { --cat-c: var(--emerald-500); }
.cat-s2 { --cat-c: var(--amber-500); }
.cat-s3 { --cat-c: var(--red-500); }
.cat-s4 { --cat-c: var(--blue-500); }
.cat-s5 { --cat-c: var(--violet-500); }

/* Preis-Erfassen-Formular */
.cat-price-form .form-group { margin-bottom: 0.7rem; }
.cat-calc-preview {
    font-size: 0.85rem; color: var(--color-text-muted); margin: 0.2rem 0 0.7rem;
    background: var(--gray-50); border-radius: 0.4rem; padding: 0.45rem 0.6rem;
}
.cat-calc-preview span { font-weight: 700; color: var(--color-text); }

.cat-form-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }

/* Kalkulation */
.cat-calc-add { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.cat-calc-add .form-group { margin: 0; }
.cat-calc-add .cat-calc-qty input { width: 6rem; }
/* Artikel-Auswahl (durchsuchbares Dropdown) ist das Hauptfeld – lang; das
   Profil-Feld bleibt kompakt. */
.cat-calc-add .cat-calc-item { flex: 1 1 340px; min-width: 260px; }
.cat-calc-add .cat-calc-profile { flex: 0 1 240px; min-width: 200px; }
.cat-calc-sep { flex: 1 1 1rem; }
.cat-calc-totals { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }
.cat-total {
    display: flex; flex-direction: column; gap: 0.1rem;
    background: var(--gray-50); border: 1px solid var(--color-border);
    border-radius: 0.6rem; padding: 0.7rem 1rem; min-width: 12rem;
}
.cat-total-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.cat-total-net { font-size: 1.15rem; font-weight: 800; color: var(--color-text); }
.cat-total-gross { font-size: 0.8rem; color: var(--color-text-muted); }
/* Hervorgehobene Summenbox (laufende Kosten) – u. a. in der Kalkulation. */
.cat-total--accent { border-color: var(--color-primary); background: var(--blue-50); }
.cat-total--accent .cat-total-label { color: var(--color-primary); }

/* Pakete */
.cat-bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.1rem; align-items: start; }
.cat-bundle-desc { margin-top: 0; font-size: 0.88rem; }
/* Zwei-Preise-Zusammenfassung (Einmalig / Laufend) am Kartenfuß: Label links,
   Wert rechts. Kompakt und clip-sicher – anders als Preisboxen läuft hier nichts
   über die schmale Kartenspalte hinaus. */
.cat-bundle-totals { margin-top: 0.9rem; border-top: 1px solid var(--color-border); }
.cat-bt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.cat-bt-row:last-child { border-bottom: 0; }
.cat-bt-label { color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; }
.cat-bt-unit { font-weight: 400; }
.cat-bt-val { font-weight: 800; font-size: 1.05rem; text-align: right; }
.cat-bt-val small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--color-text-muted); }
.cat-bt-row--accent { background: var(--blue-50); border-radius: 0.4rem; border-bottom: 0; padding: 0.5rem 0.7rem; margin-top: 0.25rem; }
.cat-bt-row--accent .cat-bt-label { color: var(--color-primary); }
.cat-bt-row--accent .cat-bt-val { color: var(--color-primary); }
.cat-bundle-list { list-style: none; margin: 0.5rem 0 0.8rem; padding: 0; }
.cat-bundle-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--color-border); font-size: 0.9rem; }
.cat-bundle-list li:first-child { border-top: 0; }
.cat-bundle-price { white-space: nowrap; font-weight: 600; }

/* Paket-Formular */
.cat-subhead { font-size: 0.95rem; font-weight: 700; margin: 1.2rem 0 0.6rem; }
.cat-brow { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.cat-brow select { flex: 2; min-width: 8rem; }
/* Durchsuchbares Dropdown ersetzt das native <select> durch einen .ss-wrap –
   dieser übernimmt in der Flex-Zeile die Breite des ursprünglichen Selects. */
.cat-brow .ss-wrap { flex: 2; min-width: 8rem; }
.cat-brow-qty { width: 6rem; flex: none; }
.cat-brow-note { flex: 1; min-width: 8rem; }
.cat-req-note { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0.6rem 0 0.25rem; }
.cat-bundle-req { border-left: 2px solid var(--color-border); padding-left: 0.6rem; }
.cat-img-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.cat-img-preview { width: 96px; height: 72px; flex: none; border: 1px solid var(--color-border); border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gray-50); font-size: 0.72rem; }
.cat-img-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-img-fields { flex: 1; min-width: 0; }
.cat-img-remove { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--gray-600); }
.cat-linklike { background: none; border: none; padding: 0; color: var(--color-primary); font: inherit; cursor: pointer; text-decoration: underline; }
/* Produktbild-Thumbnails in Liste, Detail und Preisliste */
.cat-thumb { width: 44px; height: 34px; border: 1px solid var(--color-border); border-radius: 0.3rem; object-fit: contain; background: var(--gray-50); vertical-align: middle; }
.cat-detail-img { max-width: 220px; max-height: 165px; border: 1px solid var(--color-border); border-radius: 0.5rem; object-fit: contain; background: var(--gray-50); }
.cat-name-cell { display: flex; align-items: center; gap: 0.6rem; }

/* Admin-Kategorien */
.cat-cat-inline { display: contents; }
.cat-cat-add { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-top: 1rem; }
.cat-cat-add .form-group { margin: 0; }