fertig 4.0.9 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/fertig-classes.css +383 -0
- package/fertig-classes.min.css +1 -0
- package/fertig-themes.css +190 -0
- package/fertig-themes.min.css +1 -0
- package/fertig.css +69 -35
- package/fertig.min.css +1 -1
- package/package.json +13 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ A classless CSS framework for finished interfaces. Link one file and write
|
|
|
7
7
|
semantic HTML; fertig styles the page, forms, tables, dialogs, popovers,
|
|
8
8
|
navigation, feedback, and common layout patterns.
|
|
9
9
|
|
|
10
|
-
**
|
|
10
|
+
**42.2 KB raw · 9.5 KB gzipped · no build step · no dependencies · no JavaScript.**
|
|
11
11
|
|
|
12
12
|
## Use
|
|
13
13
|
|
|
@@ -22,7 +22,7 @@ npm install fertig
|
|
|
22
22
|
Or use the CDN:
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@5/fertig.min.css">
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
That is the complete setup. See the [documentation](https://moji2002.github.io/fertig/docs.html),
|
|
@@ -0,0 +1,383 @@
|
|
|
1
|
+
/*! fertig-classes v5.0.0 — optional class aliases and new components for fertig. MIT */
|
|
2
|
+
|
|
3
|
+
/* Re-opening the layer declared in fertig.css: this file adds class aliases
|
|
4
|
+
over the ARIA/data-attribute selectors in the base, plus new components
|
|
5
|
+
that only exist in the class-based mode. Every rule here re-uses the
|
|
6
|
+
existing tokens — nothing new is declared. */
|
|
7
|
+
|
|
8
|
+
@layer fertig {
|
|
9
|
+
|
|
10
|
+
/* ---- semantic colour contract --------------------------------
|
|
11
|
+
The class layer paints tones, dots and steps with these, so a named theme
|
|
12
|
+
in fertig-themes.css can re-tint the whole sheet from one place. Unthemed,
|
|
13
|
+
they sit on the ramps the base already ships. */
|
|
14
|
+
:root {
|
|
15
|
+
--fertig-primary: var(--fertig-ac);
|
|
16
|
+
--fertig-secondary: light-dark(var(--fertig-violet-700), var(--fertig-violet-300));
|
|
17
|
+
--fertig-neutral: var(--fertig-mut);
|
|
18
|
+
--fertig-info: light-dark(var(--fertig-blue-700), var(--fertig-blue-300));
|
|
19
|
+
--fertig-success: light-dark(var(--fertig-green-700), var(--fertig-green-300));
|
|
20
|
+
--fertig-warning: light-dark(var(--fertig-amber-700), var(--fertig-amber-300));
|
|
21
|
+
--fertig-error: light-dark(var(--fertig-red-700), var(--fertig-red-300));
|
|
22
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
23
|
+
--fertig-on-secondary: light-dark(#f7f8fb, #14101e);
|
|
24
|
+
--fertig-on-neutral: var(--fertig-fg);
|
|
25
|
+
--fertig-on-info: light-dark(#f7f8fb, #0b1030);
|
|
26
|
+
--fertig-on-success: light-dark(#f7f8fb, #081c10);
|
|
27
|
+
--fertig-on-warning: #241a04; /* amber holds dark ink; high-vis warning fills sit at the 3:1 non-text bar (WCAG 1.4.11) by design */
|
|
28
|
+
--fertig-on-error: light-dark(#f7f8fb, #170a0a);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* ---- aliases: surface, empty, skeleton, avatar ------------------ */
|
|
32
|
+
|
|
33
|
+
.surface { background: var(--fertig-el); border: 1px solid var(--fertig-bd);
|
|
34
|
+
border-radius: var(--fertig-rw); padding: 1rem; box-shadow: var(--fertig-up) }
|
|
35
|
+
.surface-flat { background: var(--fertig-face); border: 1px solid var(--fertig-bd);
|
|
36
|
+
border-radius: var(--fertig-rw); padding: 1rem; box-shadow: none }
|
|
37
|
+
.surface-outline { background: transparent; border: 1px solid var(--fertig-bd);
|
|
38
|
+
border-radius: var(--fertig-rw); padding: 1rem; box-shadow: none }
|
|
39
|
+
|
|
40
|
+
.empty {
|
|
41
|
+
display: grid; justify-items: center; gap: .6rem; text-align: center;
|
|
42
|
+
padding: clamp(2rem, 7vw, 4rem); border: 1px dashed var(--fertig-bd);
|
|
43
|
+
border-radius: var(--fertig-rw); background: color-mix(in srgb, var(--fertig-face) 45%, transparent);
|
|
44
|
+
}
|
|
45
|
+
.empty > * { max-inline-size: 32rem; margin-block: 0 }
|
|
46
|
+
|
|
47
|
+
.skeleton {
|
|
48
|
+
color: transparent; border-radius: var(--fertig-r); pointer-events: none;
|
|
49
|
+
user-select: none; min-height: 1em;
|
|
50
|
+
background: linear-gradient(90deg, var(--fertig-face),
|
|
51
|
+
color-mix(in srgb, var(--fertig-fg) 9%, var(--fertig-face)), var(--fertig-face));
|
|
52
|
+
background-size: 200% 100%;
|
|
53
|
+
}
|
|
54
|
+
@media (prefers-reduced-motion: no-preference) and (update: fast) {
|
|
55
|
+
.skeleton { animation: fertig-shimmer 1.4s linear infinite }
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.avatar {
|
|
59
|
+
display: inline-grid; place-items: center; flex: none; overflow: hidden;
|
|
60
|
+
inline-size: 2.5rem; aspect-ratio: 1; border-radius: 50%;
|
|
61
|
+
background: var(--fertig-face); border: 1px solid var(--fertig-bd);
|
|
62
|
+
font-size: .8em; font-weight: 700; color: var(--fertig-mut); object-fit: cover;
|
|
63
|
+
}
|
|
64
|
+
.avatar-sm { inline-size: 1.75rem; font-size: .7em }
|
|
65
|
+
.avatar-lg { inline-size: 3.5rem; font-size: 1em }
|
|
66
|
+
|
|
67
|
+
/* ---- aliases: buttons ------------------------------------------- */
|
|
68
|
+
|
|
69
|
+
.btn {
|
|
70
|
+
display: inline-block; text-decoration: none; text-align: center;
|
|
71
|
+
padding: .55em 1.2em; background: var(--fertig-face); color: var(--fertig-fg); cursor: pointer;
|
|
72
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-r);
|
|
73
|
+
box-shadow: 0 1px 0 0 color-mix(in srgb, var(--fertig-sh) 9%, transparent),
|
|
74
|
+
0 1px 2px var(--fertig-sh1);
|
|
75
|
+
font: inherit; font-weight: 550; min-width: 5rem;
|
|
76
|
+
}
|
|
77
|
+
.btn:hover:not(:disabled) {
|
|
78
|
+
background: color-mix(in srgb, var(--fertig-fg) 6%, var(--fertig-face));
|
|
79
|
+
border-color: color-mix(in srgb, var(--fertig-fg) 20%, var(--fertig-bd));
|
|
80
|
+
box-shadow: 0 1px 0 0 color-mix(in srgb, var(--fertig-sh) 9%, transparent), var(--fertig-up2);
|
|
81
|
+
translate: 0 -1px;
|
|
82
|
+
}
|
|
83
|
+
.btn:active:not(:disabled) { translate: 0 1px; box-shadow: none }
|
|
84
|
+
.btn:disabled { background: var(--fertig-face); border-color: var(--fertig-bd); color: var(--fertig-mut); box-shadow: none }
|
|
85
|
+
|
|
86
|
+
.btn-primary {
|
|
87
|
+
background: var(--fertig-ac); border-color: transparent; color: var(--fertig-on-ac);
|
|
88
|
+
box-shadow: 0 2px 0 0 color-mix(in srgb, var(--fertig-sh) 30%, transparent);
|
|
89
|
+
}
|
|
90
|
+
.btn-primary:hover:not(:disabled) {
|
|
91
|
+
background: color-mix(in oklab, var(--fertig-ac), #fff 9%);
|
|
92
|
+
translate: 0;
|
|
93
|
+
box-shadow: 0 2px 0 0 color-mix(in srgb, var(--fertig-sh) 34%, transparent),
|
|
94
|
+
0 8px 18px -8px color-mix(in srgb, var(--fertig-sh) 34%, transparent);
|
|
95
|
+
}
|
|
96
|
+
.btn-primary:active:not(:disabled) { translate: 0 1px; box-shadow: none }
|
|
97
|
+
.btn-primary:disabled { background: var(--fertig-face); border-color: var(--fertig-bd); color: var(--fertig-mut); box-shadow: none }
|
|
98
|
+
|
|
99
|
+
.btn-ghost { background: none; border-color: transparent; box-shadow: none }
|
|
100
|
+
.btn-ghost:hover:not(:disabled) { background: var(--fertig-face); border-color: var(--fertig-bd); translate: 0; box-shadow: none }
|
|
101
|
+
.btn-ghost:active:not(:disabled) { translate: 0; box-shadow: none }
|
|
102
|
+
|
|
103
|
+
.btn-soft {
|
|
104
|
+
background: color-mix(in srgb, var(--fertig-ac) 13%, var(--fertig-el));
|
|
105
|
+
border-color: transparent; box-shadow: none; color: var(--fertig-ac);
|
|
106
|
+
}
|
|
107
|
+
.btn-soft:hover:not(:disabled) { background: color-mix(in srgb, var(--fertig-ac) 20%, var(--fertig-el)); translate: 0; box-shadow: none }
|
|
108
|
+
|
|
109
|
+
.btn-outline { background: transparent; border-color: var(--fertig-bd); box-shadow: none }
|
|
110
|
+
.btn-outline:hover:not(:disabled) { border-color: var(--fertig-ac); translate: 0; box-shadow: none }
|
|
111
|
+
|
|
112
|
+
.btn-link {
|
|
113
|
+
background: none; border: 0; box-shadow: none; min-width: 0; padding-inline: .2em;
|
|
114
|
+
color: var(--fertig-ac); text-decoration: underline; text-underline-offset: 3px;
|
|
115
|
+
}
|
|
116
|
+
.btn-link:hover:not(:disabled) { background: none; text-decoration-thickness: 2px; translate: 0; box-shadow: none }
|
|
117
|
+
|
|
118
|
+
.btn-sm { padding: .2em .7em; font-size: .85em; min-width: 0 }
|
|
119
|
+
.btn-lg { padding: .55em 1.5em; font-size: 1.05em }
|
|
120
|
+
.btn-block { display: block; width: 100%; min-width: 0 }
|
|
121
|
+
|
|
122
|
+
/* ---- aliases: badge tones --------------------------------------- */
|
|
123
|
+
|
|
124
|
+
.badge-success { color: var(--fertig-success); background: color-mix(in srgb, var(--fertig-success) 12%, var(--fertig-el)); border-color: color-mix(in srgb, var(--fertig-success) 24%, transparent) }
|
|
125
|
+
.badge-info { color: var(--fertig-info); background: color-mix(in srgb, var(--fertig-info) 12%, var(--fertig-el)); border-color: color-mix(in srgb, var(--fertig-info) 24%, transparent) }
|
|
126
|
+
.badge-warning { color: var(--fertig-warning); background: color-mix(in srgb, var(--fertig-warning) 12%, var(--fertig-el)); border-color: color-mix(in srgb, var(--fertig-warning) 24%, transparent) }
|
|
127
|
+
.badge-error { color: var(--fertig-error); background: color-mix(in srgb, var(--fertig-error) 12%, var(--fertig-el)); border-color: color-mix(in srgb, var(--fertig-error) 24%, transparent) }
|
|
128
|
+
|
|
129
|
+
/* ---- aliases: card ---------------------------------------------- */
|
|
130
|
+
|
|
131
|
+
.card-header { padding-inline: 0 }
|
|
132
|
+
.card-title { margin-top: -.1rem; font-weight: 650 }
|
|
133
|
+
.card-footer { margin-top: auto; padding-inline: 0; color: var(--fertig-mut); font-size: .85em }
|
|
134
|
+
.card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-inline: 0 }
|
|
135
|
+
.card-bordered { border: 1px solid var(--fertig-bd) }
|
|
136
|
+
|
|
137
|
+
/* ---- aliases: form ---------------------------------------------- */
|
|
138
|
+
|
|
139
|
+
.form-control {
|
|
140
|
+
display: block; width: 100%; padding: .6em .8em; background: var(--fertig-el);
|
|
141
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-r); box-shadow: none;
|
|
142
|
+
}
|
|
143
|
+
.form-label { display: block; font-size: .85em; color: var(--fertig-mut) }
|
|
144
|
+
.form-legend {
|
|
145
|
+
float: left; width: 100%; margin-bottom: .8rem; padding: 0 0 .6rem;
|
|
146
|
+
border-bottom: 1px solid var(--fertig-bd); font-size: .95em; font-weight: 700; color: var(--fertig-fg);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.input-group {
|
|
150
|
+
display: flex; align-items: center; inline-size: 100%; overflow: clip;
|
|
151
|
+
background: var(--fertig-el); border: 1px solid transparent;
|
|
152
|
+
border-radius: var(--fertig-r); box-shadow: var(--fertig-dn);
|
|
153
|
+
}
|
|
154
|
+
.input-group .form-control,
|
|
155
|
+
.input-group > :is(input, select, textarea) {
|
|
156
|
+
flex: 1 1 auto; min-inline-size: 0; border: 0; border-radius: 0;
|
|
157
|
+
background-color: transparent; box-shadow: none; outline: 0;
|
|
158
|
+
}
|
|
159
|
+
.input-group-addon {
|
|
160
|
+
flex: none; padding-inline: .75em; color: var(--fertig-mut); white-space: nowrap;
|
|
161
|
+
}
|
|
162
|
+
.input-group-action {
|
|
163
|
+
align-self: stretch; min-width: 0; border: 0; border-radius: 0;
|
|
164
|
+
background: transparent; box-shadow: none;
|
|
165
|
+
}
|
|
166
|
+
.input-group:focus-within {
|
|
167
|
+
border-color: color-mix(in srgb, var(--fertig-ac) 55%, transparent);
|
|
168
|
+
box-shadow: var(--fertig-up), 0 0 0 3px color-mix(in srgb, var(--fertig-ac) 16%, transparent);
|
|
169
|
+
}
|
|
170
|
+
.input-otp {
|
|
171
|
+
inline-size: min(100%, 16ch); font: 650 1.25rem/1.4 var(--fertig-fm);
|
|
172
|
+
letter-spacing: .55em; text-indent: .55em; text-align: center;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* ---- aliases: alert / aside tones -------------------------------- */
|
|
176
|
+
|
|
177
|
+
.alert { border: 1px solid color-mix(in srgb, var(--fertig-ac) 26%, transparent); border-radius: var(--fertig-rw); background: color-mix(in srgb, var(--fertig-ac) 9%, var(--fertig-el)); padding: .85rem 1.15rem; margin-block: 1.1rem }
|
|
178
|
+
.alert-success { --fertig-ac: var(--fertig-green-700) }
|
|
179
|
+
.alert-info { --fertig-ac: var(--fertig-blue-700) }
|
|
180
|
+
.alert-warning { --fertig-ac: var(--fertig-amber-700) }
|
|
181
|
+
.alert-error { --fertig-ac: var(--fertig-red-700) }
|
|
182
|
+
|
|
183
|
+
/* ---- aliases: table --------------------------------------------- */
|
|
184
|
+
|
|
185
|
+
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92em; border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); overflow: hidden }
|
|
186
|
+
.table-zebra tbody tr:nth-child(even) { background: var(--fertig-face) }
|
|
187
|
+
|
|
188
|
+
/* ---- aliases: tabs ---------------------------------------------- */
|
|
189
|
+
|
|
190
|
+
.tabs {
|
|
191
|
+
display: flex; gap: .15rem; max-inline-size: 100%; overflow-x: auto;
|
|
192
|
+
margin: 1.1rem 0; padding: .25rem; border: 0; border-radius: var(--fertig-rp);
|
|
193
|
+
background: var(--fertig-face); scrollbar-width: none;
|
|
194
|
+
}
|
|
195
|
+
.tab {
|
|
196
|
+
flex: none; background: none; border: 0; box-shadow: none; min-width: 0; color: var(--fertig-mut);
|
|
197
|
+
padding: .4em .9em; border-radius: var(--fertig-rp); margin: 0;
|
|
198
|
+
}
|
|
199
|
+
.tab:hover:not(:disabled) { background: var(--fertig-face); color: var(--fertig-fg) }
|
|
200
|
+
.tab-active { background: var(--fertig-el); color: var(--fertig-fg); box-shadow: var(--fertig-up) }
|
|
201
|
+
|
|
202
|
+
/* ---- aliases: menu ---------------------------------------------- */
|
|
203
|
+
|
|
204
|
+
.menu {
|
|
205
|
+
list-style: none; padding: 0; margin: 1.1rem 0;
|
|
206
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw);
|
|
207
|
+
background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
208
|
+
}
|
|
209
|
+
.menu > li { padding: .55rem .85rem }
|
|
210
|
+
.menu > li + li { border-top: 1px solid var(--fertig-bd) }
|
|
211
|
+
|
|
212
|
+
/* ---- aliases: item ---------------------------------------------- */
|
|
213
|
+
|
|
214
|
+
.item {
|
|
215
|
+
display: flex; align-items: center; gap: .8rem; min-inline-size: 0;
|
|
216
|
+
padding: .7rem .8rem; border-radius: var(--fertig-r); background: var(--fertig-el);
|
|
217
|
+
border: 1px solid var(--fertig-bd);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* ---- aliases: group / segmented --------------------------------- */
|
|
221
|
+
|
|
222
|
+
.group {
|
|
223
|
+
display: inline-flex; vertical-align: middle; max-inline-size: 100%; padding: .2rem;
|
|
224
|
+
overflow: auto clip; overscroll-behavior-x: contain;
|
|
225
|
+
border-radius: var(--fertig-rp); background: var(--fertig-face);
|
|
226
|
+
}
|
|
227
|
+
.group > * { border: 0; border-radius: var(--fertig-rp); margin: 0; box-shadow: none; min-width: 0 }
|
|
228
|
+
.group > :focus-visible { outline-offset: -3px }
|
|
229
|
+
|
|
230
|
+
/* ---- aliases: dialog / drawer / toast / popover ----------------- */
|
|
231
|
+
|
|
232
|
+
.dialog {
|
|
233
|
+
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid var(--fertig-bd);
|
|
234
|
+
border-radius: var(--fertig-rw); padding: 1.25rem; max-width: min(30rem, 92dvw);
|
|
235
|
+
box-shadow: var(--fertig-up2), 0 28px 70px -24px color-mix(in srgb, var(--fertig-sh) 34%, transparent);
|
|
236
|
+
}
|
|
237
|
+
.popover {
|
|
238
|
+
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid var(--fertig-bd);
|
|
239
|
+
border-radius: var(--fertig-rw); padding: .35rem; min-width: 12rem;
|
|
240
|
+
max-block-size: 60dvh; overflow: auto; font-size: .95em;
|
|
241
|
+
box-shadow: var(--fertig-up2), 0 24px 44px -18px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* ---- aliases: switch -------------------------------------------- */
|
|
245
|
+
|
|
246
|
+
.switch {
|
|
247
|
+
appearance: none; width: 2.5em; height: 1.45em; border-radius: var(--fertig-rp); border: 0;
|
|
248
|
+
background: color-mix(in srgb, var(--fertig-fg) 20%, transparent);
|
|
249
|
+
position: relative; cursor: pointer; vertical-align: -.3em; margin-inline-end: .5em;
|
|
250
|
+
}
|
|
251
|
+
.switch::after {
|
|
252
|
+
content: ""; position: absolute; inset-block-start: .14em; inset-inline-start: .14em;
|
|
253
|
+
width: 1.17em; height: 1.17em; border-radius: 50%; background: #fff; box-shadow: var(--fertig-up);
|
|
254
|
+
transition: translate .16s var(--fertig-ease-out);
|
|
255
|
+
}
|
|
256
|
+
.switch:checked { background: var(--fertig-ac) }
|
|
257
|
+
.switch:checked::after { translate: 1.05em 0 }
|
|
258
|
+
|
|
259
|
+
/* ---- aliases: tooltip ------------------------------------------- */
|
|
260
|
+
|
|
261
|
+
.tooltip { position: relative }
|
|
262
|
+
.tooltip::after {
|
|
263
|
+
content: attr(data-tooltip); position: absolute;
|
|
264
|
+
inset-block-end: 100%; inset-inline-start: 50%;
|
|
265
|
+
translate: -50% -.45em; z-index: 10; white-space: nowrap; pointer-events: none;
|
|
266
|
+
background: light-dark(#1d1d1f, #3a3a40); color: #f7f8fb; font-size: .8em;
|
|
267
|
+
padding: .25em .55em; border-radius: var(--fertig-r); box-shadow: var(--fertig-up2);
|
|
268
|
+
opacity: 0; transition: opacity .12s var(--fertig-ease-out);
|
|
269
|
+
}
|
|
270
|
+
.tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1 }
|
|
271
|
+
|
|
272
|
+
/* ---- new: stats ------------------------------------------------- */
|
|
273
|
+
|
|
274
|
+
.stats {
|
|
275
|
+
display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
276
|
+
}
|
|
277
|
+
.stat {
|
|
278
|
+
background: var(--fertig-el); border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw);
|
|
279
|
+
padding: 1rem; display: flex; flex-direction: column; gap: .3rem;
|
|
280
|
+
}
|
|
281
|
+
.stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1.2 }
|
|
282
|
+
.stat-title { font-size: .78em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fertig-mut) }
|
|
283
|
+
|
|
284
|
+
/* ---- new: steps ------------------------------------------------- */
|
|
285
|
+
|
|
286
|
+
.steps {
|
|
287
|
+
display: flex; gap: 0; counter-reset: step;
|
|
288
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); overflow: hidden;
|
|
289
|
+
}
|
|
290
|
+
.step {
|
|
291
|
+
flex: 1; padding: .7rem 1rem; background: var(--fertig-el);
|
|
292
|
+
border-right: 1px solid var(--fertig-bd); counter-increment: step;
|
|
293
|
+
display: flex; align-items: center; gap: .5rem; font-size: .9em;
|
|
294
|
+
}
|
|
295
|
+
.step:last-child { border-right: 0 }
|
|
296
|
+
.step::before {
|
|
297
|
+
content: counter(step); display: inline-grid; place-items: center;
|
|
298
|
+
width: 1.4em; height: 1.4em; border-radius: 50%; font-size: .75em; font-weight: 700;
|
|
299
|
+
background: var(--fertig-face); border: 1px solid var(--fertig-bd); color: var(--fertig-mut);
|
|
300
|
+
}
|
|
301
|
+
.step[data-active] { background: color-mix(in srgb, var(--fertig-ac) 8%, var(--fertig-el)); color: var(--fertig-ac) }
|
|
302
|
+
.step[data-active]::before {
|
|
303
|
+
background: var(--fertig-ac); border-color: transparent; color: var(--fertig-on-ac);
|
|
304
|
+
}
|
|
305
|
+
.step[data-done]::before { background: var(--fertig-success); border-color: transparent; color: var(--fertig-on-success); content: "✓" }
|
|
306
|
+
.step[data-done]::after { content: none }
|
|
307
|
+
|
|
308
|
+
/* ---- new: timeline ---------------------------------------------- */
|
|
309
|
+
|
|
310
|
+
.timeline {
|
|
311
|
+
border-inline-start: 2px solid var(--fertig-bd); margin: 1rem 0; padding: 0;
|
|
312
|
+
}
|
|
313
|
+
.timeline-entry {
|
|
314
|
+
position: relative; padding: .5rem 0 .5rem 1.2rem;
|
|
315
|
+
}
|
|
316
|
+
.timeline-entry::before {
|
|
317
|
+
content: ""; position: absolute; inset-inline-start: calc(-1rem - 1px);
|
|
318
|
+
top: .7rem; width: .55rem; height: .55rem; border-radius: 50%;
|
|
319
|
+
background: var(--fertig-face); border: 2px solid var(--fertig-bd);
|
|
320
|
+
}
|
|
321
|
+
.timeline-entry[data-active]::before { background: var(--fertig-ac); border-color: var(--fertig-ac) }
|
|
322
|
+
.timeline-time { font-size: .78em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fertig-mut) }
|
|
323
|
+
.timeline-content { font-size: .92em }
|
|
324
|
+
|
|
325
|
+
/* ---- new: chat -------------------------------------------------- */
|
|
326
|
+
|
|
327
|
+
.chat { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 }
|
|
328
|
+
.chat-bubble {
|
|
329
|
+
max-width: 75%; padding: .55rem .9rem; border-radius: var(--fertig-rw);
|
|
330
|
+
font-size: .92em; line-height: 1.55;
|
|
331
|
+
}
|
|
332
|
+
.chat-bubble-user {
|
|
333
|
+
align-self: end; background: var(--fertig-ac); color: var(--fertig-on-ac);
|
|
334
|
+
border-bottom-end-radius: .2rem;
|
|
335
|
+
}
|
|
336
|
+
.chat-bubble-bot {
|
|
337
|
+
align-self: start; background: var(--fertig-face); border: 1px solid var(--fertig-bd);
|
|
338
|
+
border-bottom-start-radius: .2rem;
|
|
339
|
+
}
|
|
340
|
+
.chat-meta { font-size: .72em; color: var(--fertig-mut); margin-top: .2rem }
|
|
341
|
+
|
|
342
|
+
/* ---- new: join -------------------------------------------------- */
|
|
343
|
+
|
|
344
|
+
.join { display: inline-flex; border-radius: var(--fertig-rw); overflow: hidden }
|
|
345
|
+
.join > * { border-radius: 0; border: 0; box-shadow: none }
|
|
346
|
+
.join > * + * { border-left: 1px solid color-mix(in srgb, var(--fertig-fg) 10%, transparent) }
|
|
347
|
+
.join-vertical { flex-direction: column }
|
|
348
|
+
.join-vertical > * + * { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--fertig-fg) 10%, transparent) }
|
|
349
|
+
|
|
350
|
+
/* ---- new: indicator --------------------------------------------- */
|
|
351
|
+
|
|
352
|
+
.indicator {
|
|
353
|
+
position: relative; display: inline-block;
|
|
354
|
+
}
|
|
355
|
+
.indicator-dot {
|
|
356
|
+
position: absolute; inset-inline-end: -.15em; inset-block-start: -.15em;
|
|
357
|
+
width: .55rem; height: .55rem; border-radius: 50%;
|
|
358
|
+
background: var(--fertig-ac); border: 2px solid var(--fertig-el);
|
|
359
|
+
}
|
|
360
|
+
.indicator-dot-success { background: var(--fertig-green-700) }
|
|
361
|
+
.indicator-dot-warning { background: var(--fertig-amber-700) }
|
|
362
|
+
.indicator-dot-error { background: var(--fertig-red-700) }
|
|
363
|
+
|
|
364
|
+
/* ---- new: btn-group --------------------------------------------- */
|
|
365
|
+
|
|
366
|
+
.btn-group {
|
|
367
|
+
display: inline-flex; border-radius: var(--fertig-rp); overflow: hidden;
|
|
368
|
+
border: 1px solid var(--fertig-bd);
|
|
369
|
+
}
|
|
370
|
+
.btn-group > .btn { border-radius: 0; border: 0; box-shadow: none; min-width: 0 }
|
|
371
|
+
.btn-group > .btn + .btn { border-left: 1px solid color-mix(in srgb, var(--fertig-fg) 10%, transparent) }
|
|
372
|
+
.btn-group-sm > .btn { padding: .2em .7em; font-size: .85em }
|
|
373
|
+
|
|
374
|
+
/* ---- new: form-control-group ------------------------------------ */
|
|
375
|
+
|
|
376
|
+
.form-control-group {
|
|
377
|
+
display: grid; gap: .35rem; align-content: start;
|
|
378
|
+
}
|
|
379
|
+
.form-control-group > * { margin-block: 0 }
|
|
380
|
+
.form-control-group > :is(small, [role=alert]) { font-size: .82em }
|
|
381
|
+
.form-control-group > [role=alert] { color: light-dark(var(--fertig-red-700), var(--fertig-red-300)) }
|
|
382
|
+
|
|
383
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! fertig-classes v5.0.0 — optional class aliases and new components for fertig. MIT */@layer fertig{:root{--fertig-primary:var(--fertig-ac);--fertig-secondary:light-dark(var(--fertig-violet-700),var(--fertig-violet-300));--fertig-neutral:var(--fertig-mut);--fertig-info:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-success:light-dark(var(--fertig-green-700),var(--fertig-green-300));--fertig-warning:light-dark(var(--fertig-amber-700),var(--fertig-amber-300));--fertig-error:light-dark(var(--fertig-red-700),var(--fertig-red-300));--fertig-on-primary:var(--fertig-on-ac);--fertig-on-secondary:light-dark(#f7f8fb,#14101e);--fertig-on-neutral:var(--fertig-fg);--fertig-on-info:light-dark(#f7f8fb,#0b1030);--fertig-on-success:light-dark(#f7f8fb,#081c10);--fertig-on-warning:#241a04;--fertig-on-error:light-dark(#f7f8fb,#170a0a)}.surface{background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;box-shadow:var(--fertig-up)}.surface-flat{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;box-shadow:none}.surface-outline{background:transparent;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;box-shadow:none}.empty{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:clamp(2rem,7vw,4rem);border:1px dashed var(--fertig-bd);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-face) 45%,transparent)}.empty>*{max-inline-size:32rem;margin-block:0}.skeleton{color:transparent;border-radius:var(--fertig-r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--fertig-face),color-mix(in srgb,var(--fertig-fg) 9%,var(--fertig-face)),var(--fertig-face));background-size:200% 100%}@media (prefers-reduced-motion:no-preference) and (update:fast){.skeleton{animation:fertig-shimmer 1.4s linear infinite}}.avatar{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--fertig-face);border:1px solid var(--fertig-bd);font-size:.8em;font-weight:700;color:var(--fertig-mut);object-fit:cover}.avatar-sm{inline-size:1.75rem;font-size:.7em}.avatar-lg{inline-size:3.5rem;font-size:1em}.btn{display:inline-block;text-decoration:none;text-align:center;padding:.55em 1.2em;background:var(--fertig-face);color:var(--fertig-fg);cursor:pointer;border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);box-shadow:0 1px 0 0 color-mix(in srgb,var(--fertig-sh) 9%,transparent),0 1px 2px var(--fertig-sh1);font:inherit;font-weight:550;min-width:5rem}.btn:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 6%,var(--fertig-face));border-color:color-mix(in srgb,var(--fertig-fg) 20%,var(--fertig-bd));box-shadow:0 1px 0 0 color-mix(in srgb,var(--fertig-sh) 9%,transparent),var(--fertig-up2);translate:0 -1px}.btn:active:not(:disabled){translate:0 1px;box-shadow:none}.btn:disabled{background:var(--fertig-face);border-color:var(--fertig-bd);color:var(--fertig-mut);box-shadow:none}.btn-primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac);box-shadow:0 2px 0 0 color-mix(in srgb,var(--fertig-sh) 30%,transparent)}.btn-primary:hover:not(:disabled){background:color-mix(in oklab,var(--fertig-ac),#fff 9%);translate:0;box-shadow:0 2px 0 0 color-mix(in srgb,var(--fertig-sh) 34%,transparent),0 8px 18px -8px color-mix(in srgb,var(--fertig-sh) 34%,transparent)}.btn-primary:active:not(:disabled){translate:0 1px;box-shadow:none}.btn-primary:disabled{background:var(--fertig-face);border-color:var(--fertig-bd);color:var(--fertig-mut);box-shadow:none}.btn-ghost{background:none;border-color:transparent;box-shadow:none}.btn-ghost:hover:not(:disabled){background:var(--fertig-face);border-color:var(--fertig-bd);translate:0;box-shadow:none}.btn-ghost:active:not(:disabled){translate:0;box-shadow:none}.btn-soft{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));border-color:transparent;box-shadow:none;color:var(--fertig-ac)}.btn-soft:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-ac) 20%,var(--fertig-el));translate:0;box-shadow:none}.btn-outline{background:transparent;border-color:var(--fertig-bd);box-shadow:none}.btn-outline:hover:not(:disabled){border-color:var(--fertig-ac);translate:0;box-shadow:none}.btn-link{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--fertig-ac);text-decoration:underline;text-underline-offset:3px}.btn-link:hover:not(:disabled){background:none;text-decoration-thickness:2px;translate:0;box-shadow:none}.btn-sm{padding:.2em .7em;font-size:.85em;min-width:0}.btn-lg{padding:.55em 1.5em;font-size:1.05em}.btn-block{display:block;width:100%;min-width:0}.badge-success{color:var(--fertig-success);background:color-mix(in srgb,var(--fertig-success) 12%,var(--fertig-el));border-color:color-mix(in srgb,var(--fertig-success) 24%,transparent)}.badge-info{color:var(--fertig-info);background:color-mix(in srgb,var(--fertig-info) 12%,var(--fertig-el));border-color:color-mix(in srgb,var(--fertig-info) 24%,transparent)}.badge-warning{color:var(--fertig-warning);background:color-mix(in srgb,var(--fertig-warning) 12%,var(--fertig-el));border-color:color-mix(in srgb,var(--fertig-warning) 24%,transparent)}.badge-error{color:var(--fertig-error);background:color-mix(in srgb,var(--fertig-error) 12%,var(--fertig-el));border-color:color-mix(in srgb,var(--fertig-error) 24%,transparent)}.card-header{padding-inline:0}.card-title{margin-top:-.1rem;font-weight:650}.card-footer{margin-top:auto;padding-inline:0;color:var(--fertig-mut);font-size:.85em}.card-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-inline:0}.card-bordered{border:1px solid var(--fertig-bd)}.form-control{display:block;width:100%;padding:.6em .8em;background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);box-shadow:none}.form-label{display:block;font-size:.85em;color:var(--fertig-mut)}.form-legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--fertig-bd);font-size:.95em;font-weight:700;color:var(--fertig-fg)}.input-group{display:flex;align-items:center;inline-size:100%;overflow:clip;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}.input-group .form-control,.input-group>:is(input,select,textarea){flex:1 1 auto;min-inline-size:0;border:0;border-radius:0;background-color:transparent;box-shadow:none;outline:0}.input-group-addon{flex:none;padding-inline:.75em;color:var(--fertig-mut);white-space:nowrap}.input-group-action{align-self:stretch;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}.input-group:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent);box-shadow:var(--fertig-up),0 0 0 3px color-mix(in srgb,var(--fertig-ac) 16%,transparent)}.input-otp{inline-size:min(100%,16ch);font:650 1.25rem/1.4 var(--fertig-fm);letter-spacing:.55em;text-indent:.55em;text-align:center}.alert{border:1px solid color-mix(in srgb,var(--fertig-ac) 26%,transparent);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-ac) 9%,var(--fertig-el));padding:.85rem 1.15rem;margin-block:1.1rem}.alert-success{--fertig-ac:var(--fertig-green-700)}.alert-info{--fertig-ac:var(--fertig-blue-700)}.alert-warning{--fertig-ac:var(--fertig-amber-700)}.alert-error{--fertig-ac:var(--fertig-red-700)}.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92em;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);overflow:hidden}.table-zebra tbody tr:nth-child(even){background:var(--fertig-face)}.tabs{display:flex;gap:.15rem;max-inline-size:100%;overflow-x:auto;margin:1.1rem 0;padding:.25rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face);scrollbar-width:none}.tab{flex:none;background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.4em .9em;border-radius:var(--fertig-rp);margin:0}.tab:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}.tab-active{background:var(--fertig-el);color:var(--fertig-fg);box-shadow:var(--fertig-up)}.menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);background:var(--fertig-el);box-shadow:var(--fertig-up)}.menu>li{padding:.55rem .85rem}.menu>li + li{border-top:1px solid var(--fertig-bd)}.item{display:flex;align-items:center;gap:.8rem;min-inline-size:0;padding:.7rem .8rem;border-radius:var(--fertig-r);background:var(--fertig-el);border:1px solid var(--fertig-bd)}.group{display:inline-flex;vertical-align:middle;max-inline-size:100%;padding:.2rem;overflow:auto clip;overscroll-behavior-x:contain;border-radius:var(--fertig-rp);background:var(--fertig-face)}.group>*{border:0;border-radius:var(--fertig-rp);margin:0;box-shadow:none;min-width:0}.group>:focus-visible{outline-offset:-3px}.dialog{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.25rem;max-width:min(30rem,92dvw);box-shadow:var(--fertig-up2),0 28px 70px -24px color-mix(in srgb,var(--fertig-sh) 34%,transparent)}.popover{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}.switch{appearance:none;width:2.5em;height:1.45em;border-radius:var(--fertig-rp);border:0;background:color-mix(in srgb,var(--fertig-fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}.switch::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.17em;height:1.17em;border-radius:50%;background:#fff;box-shadow:var(--fertig-up);transition:translate .16s var(--fertig-ease-out)}.switch:checked{background:var(--fertig-ac)}.switch:checked::after{translate:1.05em 0}.tooltip{position:relative}.tooltip::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#f7f8fb;font-size:.8em;padding:.25em .55em;border-radius:var(--fertig-r);box-shadow:var(--fertig-up2);opacity:0;transition:opacity .12s var(--fertig-ease-out)}.tooltip:hover::after,.tooltip:focus-visible::after{opacity:1}.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.stat{background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;display:flex;flex-direction:column;gap:.3rem}.stat-value{font-size:1.8rem;font-weight:700;line-height:1.2}.stat-title{font-size:.78em;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fertig-mut)}.steps{display:flex;gap:0;counter-reset:step;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);overflow:hidden}.step{flex:1;padding:.7rem 1rem;background:var(--fertig-el);border-right:1px solid var(--fertig-bd);counter-increment:step;display:flex;align-items:center;gap:.5rem;font-size:.9em}.step:last-child{border-right:0}.step::before{content:counter(step);display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;font-size:.75em;font-weight:700;background:var(--fertig-face);border:1px solid var(--fertig-bd);color:var(--fertig-mut)}.step[data-active]{background:color-mix(in srgb,var(--fertig-ac) 8%,var(--fertig-el));color:var(--fertig-ac)}.step[data-active]::before{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}.step[data-done]::before{background:var(--fertig-success);border-color:transparent;color:var(--fertig-on-success);content:"✓"}.step[data-done]::after{content:none}.timeline{border-inline-start:2px solid var(--fertig-bd);margin:1rem 0;padding:0}.timeline-entry{position:relative;padding:.5rem 0 .5rem 1.2rem}.timeline-entry::before{content:"";position:absolute;inset-inline-start:calc(-1rem - 1px);top:.7rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--fertig-face);border:2px solid var(--fertig-bd)}.timeline-entry[data-active]::before{background:var(--fertig-ac);border-color:var(--fertig-ac)}.timeline-time{font-size:.78em;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fertig-mut)}.timeline-content{font-size:.92em}.chat{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0}.chat-bubble{max-width:75%;padding:.55rem .9rem;border-radius:var(--fertig-rw);font-size:.92em;line-height:1.55}.chat-bubble-user{align-self:end;background:var(--fertig-ac);color:var(--fertig-on-ac);border-bottom-end-radius:.2rem}.chat-bubble-bot{align-self:start;background:var(--fertig-face);border:1px solid var(--fertig-bd);border-bottom-start-radius:.2rem}.chat-meta{font-size:.72em;color:var(--fertig-mut);margin-top:.2rem}.join{display:inline-flex;border-radius:var(--fertig-rw);overflow:hidden}.join>*{border-radius:0;border:0;box-shadow:none}.join>* + *{border-left:1px solid color-mix(in srgb,var(--fertig-fg) 10%,transparent)}.join-vertical{flex-direction:column}.join-vertical>* + *{border-left:0;border-top:1px solid color-mix(in srgb,var(--fertig-fg) 10%,transparent)}.indicator{position:relative;display:inline-block}.indicator-dot{position:absolute;inset-inline-end:-.15em;inset-block-start:-.15em;width:.55rem;height:.55rem;border-radius:50%;background:var(--fertig-ac);border:2px solid var(--fertig-el)}.indicator-dot-success{background:var(--fertig-green-700)}.indicator-dot-warning{background:var(--fertig-amber-700)}.indicator-dot-error{background:var(--fertig-red-700)}.btn-group{display:inline-flex;border-radius:var(--fertig-rp);overflow:hidden;border:1px solid var(--fertig-bd)}.btn-group>.btn{border-radius:0;border:0;box-shadow:none;min-width:0}.btn-group>.btn + .btn{border-left:1px solid color-mix(in srgb,var(--fertig-fg) 10%,transparent)}.btn-group-sm>.btn{padding:.2em .7em;font-size:.85em}.form-control-group{display:grid;gap:.35rem;align-content:start}.form-control-group>*{margin-block:0}.form-control-group>:is(small,[role=alert]){font-size:.82em}.form-control-group>[role=alert]{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}}
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/*! fertig-themes v5.0.0 — named colour themes for fertig. MIT */
|
|
2
|
+
|
|
3
|
+
/* Put data-theme="forest" (or any name below) on the <html> element and the
|
|
4
|
+
whole sheet re-skins: surfaces, text, the accent and the semantic tones, all
|
|
5
|
+
from one place. Each theme is a flat palette of its own — it does not track
|
|
6
|
+
the operating-system scheme, it just declares which one it belongs to with
|
|
7
|
+
color-scheme so form controls and the base's light-dark() tokens follow.
|
|
8
|
+
|
|
9
|
+
The sheet re-opens @layer fertig, which keeps the base's override rules:
|
|
10
|
+
your own unlayered CSS still wins over every theme here without !important. */
|
|
11
|
+
|
|
12
|
+
@layer fertig {
|
|
13
|
+
|
|
14
|
+
/* ---- forest -----------------------------------------------------
|
|
15
|
+
A night-green canopy. Deep moss surfaces, a bright leaf-green accent and a
|
|
16
|
+
gold secondary for the price tags and the sale badges. */
|
|
17
|
+
:root[data-theme=forest] {
|
|
18
|
+
color-scheme: dark;
|
|
19
|
+
--fertig-a1: .34; --fertig-a2: .30;
|
|
20
|
+
--fertig-bg: oklch(24% .02 165);
|
|
21
|
+
--fertig-el: oklch(28% .025 165);
|
|
22
|
+
--fertig-face: oklch(32% .03 165);
|
|
23
|
+
--fertig-tb: oklch(23% .02 165);
|
|
24
|
+
--fertig-fg: oklch(94% .015 165);
|
|
25
|
+
--fertig-mut: oklch(70% .03 165);
|
|
26
|
+
--fertig-bd: oklch(92% .015 165 / .16);
|
|
27
|
+
--fertig-sh: oklch(15% .02 165);
|
|
28
|
+
--fertig-ac: oklch(72% .13 155);
|
|
29
|
+
--fertig-on-ac: oklch(20% .03 160);
|
|
30
|
+
--fertig-primary: var(--fertig-ac);
|
|
31
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
32
|
+
--fertig-secondary: oklch(72% .10 90);
|
|
33
|
+
--fertig-on-secondary: oklch(20% .03 90);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/* ---- aqua -------------------------------------------------------
|
|
37
|
+
A clear-water teal. Cool surfaces, a cyan accent and a violet secondary
|
|
38
|
+
for the layer that implies a different category entirely. */
|
|
39
|
+
:root[data-theme=aqua] {
|
|
40
|
+
color-scheme: dark;
|
|
41
|
+
--fertig-a1: .34; --fertig-a2: .30;
|
|
42
|
+
--fertig-bg: oklch(24% .03 225);
|
|
43
|
+
--fertig-el: oklch(28% .03 225);
|
|
44
|
+
--fertig-face: oklch(32% .035 225);
|
|
45
|
+
--fertig-tb: oklch(23% .03 225);
|
|
46
|
+
--fertig-fg: oklch(94% .02 230);
|
|
47
|
+
--fertig-mut: oklch(71% .04 225);
|
|
48
|
+
--fertig-bd: oklch(94% .02 230 / .16);
|
|
49
|
+
--fertig-sh: oklch(15% .03 225);
|
|
50
|
+
--fertig-ac: oklch(76% .11 195);
|
|
51
|
+
--fertig-on-ac: oklch(20% .03 230);
|
|
52
|
+
--fertig-primary: var(--fertig-ac);
|
|
53
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
54
|
+
--fertig-secondary: oklch(70% .13 285);
|
|
55
|
+
--fertig-on-secondary: oklch(20% .03 285);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* ---- retro ------------------------------------------------------
|
|
59
|
+
Aged paper and a pixel-green ink. Muted, slightly desaturated, with a rust
|
|
60
|
+
secondary for the category labels a terminal could never print. */
|
|
61
|
+
:root[data-theme=retro] {
|
|
62
|
+
color-scheme: light;
|
|
63
|
+
--fertig-a1: .08; --fertig-a2: .10;
|
|
64
|
+
--fertig-bg: oklch(95% .025 85);
|
|
65
|
+
--fertig-el: oklch(97% .02 85);
|
|
66
|
+
--fertig-face: oklch(88% .035 80);
|
|
67
|
+
--fertig-tb: oklch(96% .025 85);
|
|
68
|
+
--fertig-fg: oklch(29% .03 160);
|
|
69
|
+
--fertig-mut: oklch(47% .035 160);
|
|
70
|
+
--fertig-bd: oklch(34% .04 160 / .20);
|
|
71
|
+
--fertig-sh: oklch(35% .03 160);
|
|
72
|
+
--fertig-ac: oklch(42% .10 160);
|
|
73
|
+
--fertig-on-ac: oklch(96% .02 90);
|
|
74
|
+
--fertig-primary: var(--fertig-ac);
|
|
75
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
76
|
+
--fertig-secondary: oklch(52% .10 45);
|
|
77
|
+
--fertig-on-secondary: oklch(96% .02 45);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* ---- coffee -----------------------------------------------------
|
|
81
|
+
A warm cream cup. Espresso text on soft latte surfaces, a caramel accent
|
|
82
|
+
and a butter secondary. */
|
|
83
|
+
:root[data-theme=coffee] {
|
|
84
|
+
color-scheme: light;
|
|
85
|
+
--fertig-a1: .08; --fertig-a2: .10;
|
|
86
|
+
--fertig-bg: oklch(93% .024 60);
|
|
87
|
+
--fertig-el: oklch(96% .02 60);
|
|
88
|
+
--fertig-face: oklch(85% .03 60);
|
|
89
|
+
--fertig-tb: oklch(95% .022 60);
|
|
90
|
+
--fertig-fg: oklch(31% .04 50);
|
|
91
|
+
--fertig-mut: oklch(48% .04 50);
|
|
92
|
+
--fertig-bd: oklch(36% .05 40 / .22);
|
|
93
|
+
--fertig-sh: oklch(33% .04 50);
|
|
94
|
+
--fertig-ac: oklch(45% .10 45);
|
|
95
|
+
--fertig-on-ac: oklch(95% .02 60);
|
|
96
|
+
--fertig-primary: var(--fertig-ac);
|
|
97
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
98
|
+
--fertig-secondary: oklch(63% .09 90);
|
|
99
|
+
--fertig-on-secondary: oklch(22% .04 90);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* ---- night ------------------------------------------------------
|
|
103
|
+
A deep slate-blue. The quietest of the set: low chroma, one indigo accent
|
|
104
|
+
and a cyan secondary. */
|
|
105
|
+
:root[data-theme=night] {
|
|
106
|
+
color-scheme: dark;
|
|
107
|
+
--fertig-a1: .34; --fertig-a2: .30;
|
|
108
|
+
--fertig-bg: oklch(21% .02 255);
|
|
109
|
+
--fertig-el: oklch(25% .025 255);
|
|
110
|
+
--fertig-face: oklch(29% .03 255);
|
|
111
|
+
--fertig-tb: oklch(20% .02 255);
|
|
112
|
+
--fertig-fg: oklch(94% .01 255);
|
|
113
|
+
--fertig-mut: oklch(71% .02 255);
|
|
114
|
+
--fertig-bd: oklch(94% .015 255 / .16);
|
|
115
|
+
--fertig-sh: oklch(14% .02 255);
|
|
116
|
+
--fertig-ac: oklch(72% .11 260);
|
|
117
|
+
--fertig-on-ac: oklch(18% .03 260);
|
|
118
|
+
--fertig-primary: var(--fertig-ac);
|
|
119
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
120
|
+
--fertig-secondary: oklch(76% .09 190);
|
|
121
|
+
--fertig-on-secondary: oklch(18% .03 190);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ---- cyberpunk ------------------------------------------------ */
|
|
125
|
+
/* A near-black magenta grid. Cold neon surfaces and hot magenta accents hold
|
|
126
|
+
ink text, and the secondary is a poison green. */
|
|
127
|
+
:root[data-theme=cyberpunk] {
|
|
128
|
+
color-scheme: dark;
|
|
129
|
+
--fertig-a1: .34; --fertig-a2: .30;
|
|
130
|
+
--fertig-bg: oklch(20% .04 305);
|
|
131
|
+
--fertig-el: oklch(25% .045 305);
|
|
132
|
+
--fertig-face: oklch(29% .05 305);
|
|
133
|
+
--fertig-tb: oklch(19% .04 305);
|
|
134
|
+
--fertig-fg: oklch(95% .02 320);
|
|
135
|
+
--fertig-mut: oklch(74% .04 310);
|
|
136
|
+
--fertig-bd: oklch(94% .03 310 / .18);
|
|
137
|
+
--fertig-sh: oklch(12% .02 305);
|
|
138
|
+
--fertig-ac: oklch(68% .23 335);
|
|
139
|
+
--fertig-on-ac: oklch(19% .04 320);
|
|
140
|
+
--fertig-primary: var(--fertig-ac);
|
|
141
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
142
|
+
--fertig-secondary: oklch(68% .18 160);
|
|
143
|
+
--fertig-on-secondary: oklch(19% .04 160);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* ---- synthwave -------------------------------------------------- */
|
|
147
|
+
/* Deep violet with electric cyan-blue where the sun sets and magenta as the
|
|
148
|
+
second voice. */
|
|
149
|
+
:root[data-theme=synthwave] {
|
|
150
|
+
color-scheme: dark;
|
|
151
|
+
--fertig-a1: .34; --fertig-a2: .30;
|
|
152
|
+
--fertig-bg: oklch(20% .045 300);
|
|
153
|
+
--fertig-el: oklch(25% .05 300);
|
|
154
|
+
--fertig-face: oklch(29% .05 300);
|
|
155
|
+
--fertig-tb: oklch(19% .045 300);
|
|
156
|
+
--fertig-fg: oklch(95% .02 300);
|
|
157
|
+
--fertig-mut: oklch(73% .04 300);
|
|
158
|
+
--fertig-bd: oklch(94% .025 300 / .18);
|
|
159
|
+
--fertig-sh: oklch(13% .03 300);
|
|
160
|
+
--fertig-ac: oklch(75% .12 260);
|
|
161
|
+
--fertig-on-ac: oklch(19% .04 270);
|
|
162
|
+
--fertig-primary: var(--fertig-ac);
|
|
163
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
164
|
+
--fertig-secondary: oklch(70% .15 335);
|
|
165
|
+
--fertig-on-secondary: oklch(19% .04 335);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* ---- blossom ----------------------------------------------------- */
|
|
169
|
+
/* A soft-petal pink. Warm rose text on near-white petals, a rose accent and
|
|
170
|
+
a little lavender for the quiet secondary. */
|
|
171
|
+
:root[data-theme=blossom] {
|
|
172
|
+
color-scheme: light;
|
|
173
|
+
--fertig-a1: .08; --fertig-a2: .10;
|
|
174
|
+
--fertig-bg: oklch(96% .02 350);
|
|
175
|
+
--fertig-el: oklch(98% .015 350);
|
|
176
|
+
--fertig-face: oklch(89% .03 350);
|
|
177
|
+
--fertig-tb: oklch(97% .018 350);
|
|
178
|
+
--fertig-fg: oklch(34% .04 330);
|
|
179
|
+
--fertig-mut: oklch(50% .04 330);
|
|
180
|
+
--fertig-bd: oklch(45% .05 330 / .15);
|
|
181
|
+
--fertig-sh: oklch(33% .03 330);
|
|
182
|
+
--fertig-ac: oklch(48% .13 345);
|
|
183
|
+
--fertig-on-ac: oklch(97% .02 350);
|
|
184
|
+
--fertig-primary: var(--fertig-ac);
|
|
185
|
+
--fertig-on-primary: var(--fertig-on-ac);
|
|
186
|
+
--fertig-secondary: oklch(62% .09 280);
|
|
187
|
+
--fertig-on-secondary: oklch(22% .03 280);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! fertig-themes v5.0.0 — named colour themes for fertig. MIT */@layer fertig{:root[data-theme=forest]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30;--fertig-bg:oklch(24% .02 165);--fertig-el:oklch(28% .025 165);--fertig-face:oklch(32% .03 165);--fertig-tb:oklch(23% .02 165);--fertig-fg:oklch(94% .015 165);--fertig-mut:oklch(70% .03 165);--fertig-bd:oklch(92% .015 165 / .16);--fertig-sh:oklch(15% .02 165);--fertig-ac:oklch(72% .13 155);--fertig-on-ac:oklch(20% .03 160);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(72% .10 90);--fertig-on-secondary:oklch(20% .03 90)}:root[data-theme=aqua]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30;--fertig-bg:oklch(24% .03 225);--fertig-el:oklch(28% .03 225);--fertig-face:oklch(32% .035 225);--fertig-tb:oklch(23% .03 225);--fertig-fg:oklch(94% .02 230);--fertig-mut:oklch(71% .04 225);--fertig-bd:oklch(94% .02 230 / .16);--fertig-sh:oklch(15% .03 225);--fertig-ac:oklch(76% .11 195);--fertig-on-ac:oklch(20% .03 230);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(70% .13 285);--fertig-on-secondary:oklch(20% .03 285)}:root[data-theme=retro]{color-scheme:light;--fertig-a1:.08;--fertig-a2:.10;--fertig-bg:oklch(95% .025 85);--fertig-el:oklch(97% .02 85);--fertig-face:oklch(88% .035 80);--fertig-tb:oklch(96% .025 85);--fertig-fg:oklch(29% .03 160);--fertig-mut:oklch(47% .035 160);--fertig-bd:oklch(34% .04 160 / .20);--fertig-sh:oklch(35% .03 160);--fertig-ac:oklch(42% .10 160);--fertig-on-ac:oklch(96% .02 90);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(52% .10 45);--fertig-on-secondary:oklch(96% .02 45)}:root[data-theme=coffee]{color-scheme:light;--fertig-a1:.08;--fertig-a2:.10;--fertig-bg:oklch(93% .024 60);--fertig-el:oklch(96% .02 60);--fertig-face:oklch(85% .03 60);--fertig-tb:oklch(95% .022 60);--fertig-fg:oklch(31% .04 50);--fertig-mut:oklch(48% .04 50);--fertig-bd:oklch(36% .05 40 / .22);--fertig-sh:oklch(33% .04 50);--fertig-ac:oklch(45% .10 45);--fertig-on-ac:oklch(95% .02 60);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(63% .09 90);--fertig-on-secondary:oklch(22% .04 90)}:root[data-theme=night]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30;--fertig-bg:oklch(21% .02 255);--fertig-el:oklch(25% .025 255);--fertig-face:oklch(29% .03 255);--fertig-tb:oklch(20% .02 255);--fertig-fg:oklch(94% .01 255);--fertig-mut:oklch(71% .02 255);--fertig-bd:oklch(94% .015 255 / .16);--fertig-sh:oklch(14% .02 255);--fertig-ac:oklch(72% .11 260);--fertig-on-ac:oklch(18% .03 260);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(76% .09 190);--fertig-on-secondary:oklch(18% .03 190)}:root[data-theme=cyberpunk]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30;--fertig-bg:oklch(20% .04 305);--fertig-el:oklch(25% .045 305);--fertig-face:oklch(29% .05 305);--fertig-tb:oklch(19% .04 305);--fertig-fg:oklch(95% .02 320);--fertig-mut:oklch(74% .04 310);--fertig-bd:oklch(94% .03 310 / .18);--fertig-sh:oklch(12% .02 305);--fertig-ac:oklch(68% .23 335);--fertig-on-ac:oklch(19% .04 320);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(68% .18 160);--fertig-on-secondary:oklch(19% .04 160)}:root[data-theme=synthwave]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30;--fertig-bg:oklch(20% .045 300);--fertig-el:oklch(25% .05 300);--fertig-face:oklch(29% .05 300);--fertig-tb:oklch(19% .045 300);--fertig-fg:oklch(95% .02 300);--fertig-mut:oklch(73% .04 300);--fertig-bd:oklch(94% .025 300 / .18);--fertig-sh:oklch(13% .03 300);--fertig-ac:oklch(75% .12 260);--fertig-on-ac:oklch(19% .04 270);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(70% .15 335);--fertig-on-secondary:oklch(19% .04 335)}:root[data-theme=blossom]{color-scheme:light;--fertig-a1:.08;--fertig-a2:.10;--fertig-bg:oklch(96% .02 350);--fertig-el:oklch(98% .015 350);--fertig-face:oklch(89% .03 350);--fertig-tb:oklch(97% .018 350);--fertig-fg:oklch(34% .04 330);--fertig-mut:oklch(50% .04 330);--fertig-bd:oklch(45% .05 330 / .15);--fertig-sh:oklch(33% .03 330);--fertig-ac:oklch(48% .13 345);--fertig-on-ac:oklch(97% .02 350);--fertig-primary:var(--fertig-ac);--fertig-on-primary:var(--fertig-on-ac);--fertig-secondary:oklch(62% .09 280);--fertig-on-secondary:oklch(22% .03 280)}}
|
package/fertig.css
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
/*! fertig
|
|
1
|
+
/*! fertig v5.0.0 — a classless CSS stylesheet. MIT */
|
|
2
2
|
|
|
3
3
|
/* Opinions, so you don't have to have them:
|
|
4
4
|
system type · one accent · responsive gutters · a clear content canvas.
|
|
5
|
-
The finish is
|
|
6
|
-
|
|
5
|
+
The finish is confident: bordered, raised surfaces; rendered buttons that
|
|
6
|
+
lift under the pointer and press down; a visible accent focus ring.
|
|
7
7
|
Override the tokens marked "yours"; the rest is the point of view. */
|
|
8
8
|
|
|
9
9
|
/* typed so they interpolate; untyped custom properties cannot animate */
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
from --fertig-fg — AAA would need ~41%, which is close enough to
|
|
94
94
|
--fertig-fg that "muted" stops reading as secondary at all. */
|
|
95
95
|
--fertig-mut: light-dark(oklch(46% .018 260), oklch(72% .02 260));
|
|
96
|
-
--fertig-bd: light-dark(oklch(22% .02 260 / .
|
|
96
|
+
--fertig-bd: light-dark(oklch(22% .02 260 / .14), oklch(95% .012 260 / .17));
|
|
97
97
|
--fertig-tb: light-dark(oklch(99% .003 260), oklch(18% .016 260));
|
|
98
98
|
/* Blue is the neutral default: distinctive enough for interaction, familiar
|
|
99
99
|
enough not to impose a brand. The 700/300 pair clears AA as link text and
|
|
@@ -329,7 +329,10 @@ pre code { background: none; border: 0; padding: 0; font-size: 1em }
|
|
|
329
329
|
:is(.hljs-addition, .token.inserted) { color: light-dark(#15803d, #7ee787) }
|
|
330
330
|
|
|
331
331
|
/* ---- table -------------------------------------------------- */
|
|
332
|
-
table {
|
|
332
|
+
table {
|
|
333
|
+
width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92em;
|
|
334
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); overflow: hidden;
|
|
335
|
+
}
|
|
333
336
|
th, td {
|
|
334
337
|
border-bottom: 1px solid var(--fertig-bd); padding-block: .55rem;
|
|
335
338
|
padding-inline: 0 .7rem; text-align: start;
|
|
@@ -371,8 +374,8 @@ textarea { width: 100%; min-height: 5rem; resize: vertical }
|
|
|
371
374
|
}
|
|
372
375
|
input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),
|
|
373
376
|
select, textarea {
|
|
374
|
-
display: block; width: 100%; padding: .
|
|
375
|
-
border: 1px solid
|
|
377
|
+
display: block; width: 100%; padding: .6em .8em; background: var(--fertig-el);
|
|
378
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-r); box-shadow: none;
|
|
376
379
|
}
|
|
377
380
|
select {
|
|
378
381
|
appearance: none; padding-inline-end: 2.2rem;
|
|
@@ -508,7 +511,7 @@ input:autofill, input:autofill:hover, input:autofill:focus {
|
|
|
508
511
|
nostalgia — a legend keeps its magic placement under block, grid and flex
|
|
509
512
|
fieldsets alike, and floating it is still the only way out. */
|
|
510
513
|
fieldset {
|
|
511
|
-
border: 1px solid
|
|
514
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); padding: 1rem;
|
|
512
515
|
background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
513
516
|
}
|
|
514
517
|
fieldset:focus-within { border-color: color-mix(in srgb, var(--fertig-ac) 45%, var(--fertig-bd)) }
|
|
@@ -522,19 +525,32 @@ legend + * { clear: left }
|
|
|
522
525
|
button, [type=submit], [type=button], [type=reset],
|
|
523
526
|
:where(a.primary, a[role=button]), ::file-selector-button {
|
|
524
527
|
display: inline-block; text-decoration: none; text-align: center;
|
|
525
|
-
padding: .
|
|
526
|
-
border: 1px solid
|
|
528
|
+
padding: .55em 1.2em; background: var(--fertig-face); color: var(--fertig-fg); cursor: pointer;
|
|
529
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-r);
|
|
530
|
+
/* a rendered edge: a hard 1px "belt" under the control plus a soft lift.
|
|
531
|
+
The belt is the whole press metaphor — on :active it goes away and the
|
|
532
|
+
control sinks the same 1px it just lost. */
|
|
533
|
+
box-shadow: 0 1px 0 0 color-mix(in srgb, var(--fertig-sh) 9%, transparent),
|
|
534
|
+
0 1px 2px var(--fertig-sh1);
|
|
527
535
|
font: inherit; font-weight: 550; min-width: 5rem;
|
|
528
536
|
}
|
|
529
537
|
:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled) {
|
|
530
|
-
background: color-mix(in srgb, var(--fertig-fg)
|
|
538
|
+
background: color-mix(in srgb, var(--fertig-fg) 6%, var(--fertig-face));
|
|
539
|
+
border-color: color-mix(in srgb, var(--fertig-fg) 20%, var(--fertig-bd));
|
|
540
|
+
box-shadow: 0 1px 0 0 color-mix(in srgb, var(--fertig-sh) 9%, transparent),
|
|
541
|
+
var(--fertig-up2);
|
|
542
|
+
translate: 0 -1px; /* the control lifts to meet the pointer */
|
|
543
|
+
}
|
|
544
|
+
[type=submit], .primary {
|
|
545
|
+
background: var(--fertig-ac); border-color: transparent; color: var(--fertig-on-ac);
|
|
546
|
+
box-shadow: 0 2px 0 0 color-mix(in srgb, var(--fertig-sh) 30%, transparent);
|
|
531
547
|
}
|
|
532
|
-
[type=submit], .primary { background: var(--fertig-ac); border-color: transparent; color: var(--fertig-on-ac) }
|
|
533
548
|
/* Filled controls must not keep their enabled accent after :disabled. This
|
|
534
549
|
follows the filled rule deliberately: equal-specificity declarations later
|
|
535
550
|
in the cascade restore the quiet control surface and muted text. */
|
|
536
551
|
:is(button,[type=submit],[type=button],[type=reset]):disabled {
|
|
537
|
-
background: var(--fertig-face); border-color:
|
|
552
|
+
background: var(--fertig-face); border-color: var(--fertig-bd); color: var(--fertig-mut);
|
|
553
|
+
box-shadow: none;
|
|
538
554
|
}
|
|
539
555
|
/* The filled button lightens on hover. color-mix does that in oklab, which is
|
|
540
556
|
close enough and is Baseline; relative colour does it by adding to L
|
|
@@ -542,12 +558,20 @@ button, [type=submit], [type=button], [type=reset],
|
|
|
542
558
|
Both derive from --fertig-ac, so a custom accent never needs a second declaration. */
|
|
543
559
|
:is([type=submit], .primary, a.primary):hover:not(:disabled) {
|
|
544
560
|
background: color-mix(in oklab, var(--fertig-ac), #fff 9%);
|
|
561
|
+
translate: 0; /* filled controls stay put; the shadow does the work */
|
|
562
|
+
box-shadow: 0 2px 0 0 color-mix(in srgb, var(--fertig-sh) 34%, transparent),
|
|
563
|
+
0 8px 18px -8px color-mix(in srgb, var(--fertig-sh) 34%, transparent);
|
|
545
564
|
}
|
|
546
565
|
@supports (color: oklch(from red l c h)) {
|
|
547
566
|
:is([type=submit], .primary, a.primary):hover:not(:disabled) {
|
|
548
567
|
background: oklch(from var(--fertig-ac) calc(l + .05) c h);
|
|
549
568
|
}
|
|
550
569
|
}
|
|
570
|
+
/* The press: the belt disappears and the control sinks the 1px it held. */
|
|
571
|
+
:is(button, [type=submit], [type=button], [type=reset], a.primary,
|
|
572
|
+
a[role=button]):active:not(:disabled) {
|
|
573
|
+
translate: 0 1px; box-shadow: none;
|
|
574
|
+
}
|
|
551
575
|
|
|
552
576
|
/* button detail: sizes, variants, toggles, icon and block forms */
|
|
553
577
|
/* Scoped to controls. data-size, data-block and data-variant are names other
|
|
@@ -558,13 +582,16 @@ button, [type=submit], [type=button], [type=reset],
|
|
|
558
582
|
button[data-icon] { min-width: 0; padding: .38em .62em; line-height: 1 }
|
|
559
583
|
:is(button, a, input, select, label)[data-block] { display: block; width: 100%; min-width: 0 }
|
|
560
584
|
:is(button, a, input)[data-variant=ghost] { background: none; border-color: transparent; box-shadow: none }
|
|
561
|
-
:is(button, a, input)[data-variant=ghost]:hover:not(:disabled) {
|
|
585
|
+
:is(button, a, input)[data-variant=ghost]:hover:not(:disabled) {
|
|
586
|
+
background: var(--fertig-face); border-color: var(--fertig-bd); translate: 0; box-shadow: none;
|
|
587
|
+
}
|
|
562
588
|
:is(button, a, input)[data-variant=soft] {
|
|
563
589
|
background: color-mix(in srgb, var(--fertig-ac) 13%, var(--fertig-el));
|
|
564
590
|
border-color: transparent; box-shadow: none; color: var(--fertig-ac);
|
|
565
591
|
}
|
|
566
592
|
:is(button, a, input)[data-variant=soft]:hover:not(:disabled) {
|
|
567
593
|
background: color-mix(in srgb, var(--fertig-ac) 20%, var(--fertig-el));
|
|
594
|
+
translate: 0; box-shadow: none;
|
|
568
595
|
}
|
|
569
596
|
:is(button, a, input)[data-variant=outline] {
|
|
570
597
|
background: transparent; border-color: var(--fertig-bd); box-shadow: none;
|
|
@@ -573,22 +600,25 @@ button[data-icon] { min-width: 0; padding: .38em .62em; line-height: 1 }
|
|
|
573
600
|
background: none; border: 0; box-shadow: none; min-width: 0; padding-inline: .2em;
|
|
574
601
|
color: var(--fertig-ac); text-decoration: underline; text-underline-offset: 3px;
|
|
575
602
|
}
|
|
576
|
-
:is(button, a, input)[data-variant=link]:hover:not(:disabled) {
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
603
|
+
:is(button, a, input)[data-variant=link]:hover:not(:disabled) {
|
|
604
|
+
background: none; text-decoration-thickness: 2px; translate: 0; box-shadow: none;
|
|
605
|
+
}
|
|
606
|
+
button[aria-pressed=true] {
|
|
607
|
+
background: var(--fertig-face); color: var(--fertig-ac); font-weight: 700;
|
|
608
|
+
border-color: var(--fertig-bd); box-shadow: var(--fertig-up);
|
|
580
609
|
}
|
|
610
|
+
button[aria-pressed=true]:hover:not(:disabled) { translate: 0; box-shadow: var(--fertig-up) }
|
|
581
611
|
|
|
582
612
|
/* ---- disclosure / misc -------------------------------------- */
|
|
583
613
|
details {
|
|
584
|
-
border: 1px solid
|
|
614
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw);
|
|
585
615
|
padding: .8rem 1.1rem; background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
586
616
|
}
|
|
587
|
-
/* A disclosure inside a surface that is already a panel -- a table cell
|
|
588
|
-
dialog -- is a control, not a panel of its own: it should not repeat the
|
|
617
|
+
/* A disclosure inside a surface that is already a panel -- a table cell, a card,
|
|
618
|
+
a dialog -- is a control, not a panel of its own: it should not repeat the
|
|
589
619
|
background, the shadow or the padding, and it must not set the height of the
|
|
590
620
|
row it sits in. */
|
|
591
|
-
:is(td, th, dialog) details {
|
|
621
|
+
:is(td, th, dialog, .card) details {
|
|
592
622
|
border: 0; border-radius: 0; padding: 0; margin: 0; background: none; box-shadow: none;
|
|
593
623
|
}
|
|
594
624
|
summary { cursor: pointer; font-weight: 700; list-style: none }
|
|
@@ -597,7 +627,7 @@ details[open] > summary::before { content: "▾ " }
|
|
|
597
627
|
details[open] > summary { margin-bottom: .6rem }
|
|
598
628
|
dialog {
|
|
599
629
|
--fertig-dialog-inset: 1.25rem;
|
|
600
|
-
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid
|
|
630
|
+
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid var(--fertig-bd);
|
|
601
631
|
border-radius: var(--fertig-rw); padding: var(--fertig-dialog-inset); max-width: min(30rem, 92dvw);
|
|
602
632
|
box-shadow: var(--fertig-up2), 0 28px 70px -24px color-mix(in srgb, var(--fertig-sh) 34%, transparent);
|
|
603
633
|
}
|
|
@@ -682,9 +712,9 @@ dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto;
|
|
|
682
712
|
search { display: block; margin-block: 1.1rem } /* a landmark needs its own rhythm */
|
|
683
713
|
::target-text { background: color-mix(in srgb, var(--fertig-ac) 28%, transparent) }
|
|
684
714
|
aside {
|
|
685
|
-
border: 1px solid color-mix(in srgb, var(--fertig-ac)
|
|
715
|
+
border: 1px solid color-mix(in srgb, var(--fertig-ac) 26%, transparent);
|
|
686
716
|
border-radius: var(--fertig-rw);
|
|
687
|
-
background: color-mix(in srgb, var(--fertig-ac)
|
|
717
|
+
background: color-mix(in srgb, var(--fertig-ac) 9%, var(--fertig-el)); padding: .85rem 1.15rem;
|
|
688
718
|
margin-block: 1.1rem; /* or the next block sits flush against it */
|
|
689
719
|
}
|
|
690
720
|
progress { width: 100%; height: .5rem; border: 0; border-radius: var(--fertig-rp); background: var(--fertig-face) }
|
|
@@ -765,7 +795,7 @@ input[switch]:checked::after, input[role=switch]:checked::after { translate: 1.0
|
|
|
765
795
|
|
|
766
796
|
/* menu: any [popover] */
|
|
767
797
|
[popover] {
|
|
768
|
-
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid
|
|
798
|
+
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid var(--fertig-bd);
|
|
769
799
|
border-radius: var(--fertig-rw); padding: .35rem; min-width: 12rem;
|
|
770
800
|
max-block-size: 60dvh; overflow: auto; font-size: .95em;
|
|
771
801
|
box-shadow: var(--fertig-up2), 0 24px 44px -18px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
|
|
@@ -803,7 +833,7 @@ input[switch]:checked::after, input[role=switch]:checked::after { translate: 1.0
|
|
|
803
833
|
/* listbox: a selectable collection, whether standalone or inside a popover */
|
|
804
834
|
[role=listbox] {
|
|
805
835
|
list-style: none; margin: 1rem 0; padding: .35rem;
|
|
806
|
-
background: var(--fertig-el); border: 1px solid
|
|
836
|
+
background: var(--fertig-el); border: 1px solid var(--fertig-bd);
|
|
807
837
|
border-radius: var(--fertig-rw); box-shadow: var(--fertig-up);
|
|
808
838
|
}
|
|
809
839
|
[role=option] {
|
|
@@ -882,7 +912,7 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
|
|
|
882
912
|
|
|
883
913
|
/* surface: the same elevation language as a card, without card anatomy */
|
|
884
914
|
[data-surface] {
|
|
885
|
-
background: var(--fertig-el); border: 1px solid
|
|
915
|
+
background: var(--fertig-el); border: 1px solid var(--fertig-bd);
|
|
886
916
|
border-radius: var(--fertig-rw); padding: 1rem; box-shadow: var(--fertig-up);
|
|
887
917
|
}
|
|
888
918
|
[data-surface=flat] { background: var(--fertig-face); box-shadow: none }
|
|
@@ -894,6 +924,7 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
|
|
|
894
924
|
[data-item] {
|
|
895
925
|
display: flex; align-items: center; gap: .8rem; min-inline-size: 0;
|
|
896
926
|
padding: .7rem .8rem; border-radius: var(--fertig-r); background: var(--fertig-el);
|
|
927
|
+
border: 1px solid var(--fertig-bd);
|
|
897
928
|
}
|
|
898
929
|
[data-item] + [data-item] { margin-top: .35rem }
|
|
899
930
|
[data-item] > :where(div, p) { flex: 1; min-inline-size: 0; margin: 0 }
|
|
@@ -980,7 +1011,7 @@ dialog[data-side=bottom] {
|
|
|
980
1011
|
/* list group: a plain <menu> outside a popover is a bordered list */
|
|
981
1012
|
menu {
|
|
982
1013
|
list-style: none; padding: 0; margin: 1.1rem 0;
|
|
983
|
-
border: 1px solid
|
|
1014
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw);
|
|
984
1015
|
background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
985
1016
|
}
|
|
986
1017
|
menu > li { padding: .55rem .85rem }
|
|
@@ -1051,7 +1082,7 @@ nav menu :is(a, button)[aria-current] {
|
|
|
1051
1082
|
.grid + * { margin-top: 1.1rem }
|
|
1052
1083
|
.card {
|
|
1053
1084
|
container-type: inline-size; /* query it: @container (min-width: …) */
|
|
1054
|
-
border: 1px solid
|
|
1085
|
+
border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); padding: 1.1rem;
|
|
1055
1086
|
background: var(--fertig-el); box-shadow: var(--fertig-up2);
|
|
1056
1087
|
display: flex; flex-direction: column; /* so footers line up across a row */
|
|
1057
1088
|
gap: .85rem; /* spacing is the container's job */
|
|
@@ -1109,12 +1140,14 @@ nav menu :is(a, button)[aria-current] {
|
|
|
1109
1140
|
.max-w-prose { max-inline-size: 38rem }
|
|
1110
1141
|
.hidden { display: none }
|
|
1111
1142
|
|
|
1112
|
-
/*
|
|
1113
|
-
|
|
1114
|
-
|
|
1143
|
+
/* A badge is born toned: a soft accent fill, an accent edge and accent text.
|
|
1144
|
+
[data-tone] re-paints it by redefining --fertig-ac, so a toned badge is the
|
|
1145
|
+
same rule with different tokens — no second badge variant exists. */
|
|
1115
1146
|
.badge {
|
|
1116
|
-
border: 1px solid
|
|
1117
|
-
|
|
1147
|
+
border: 1px solid color-mix(in srgb, var(--fertig-ac) 24%, transparent);
|
|
1148
|
+
border-radius: var(--fertig-rp);
|
|
1149
|
+
background: color-mix(in srgb, var(--fertig-ac) 12%, var(--fertig-el));
|
|
1150
|
+
padding: .18em .65em; font: 650 .78em/1.45 var(--fertig-f); color: var(--fertig-ac);
|
|
1118
1151
|
}
|
|
1119
1152
|
|
|
1120
1153
|
/* card anatomy: an optional header, footer, and full-bleed media */
|
|
@@ -1136,6 +1169,7 @@ nav menu :is(a, button)[aria-current] {
|
|
|
1136
1169
|
radius cleanly at this size — it reads as a detached bar with gaps at the
|
|
1137
1170
|
top corners. A gradient is clipped by the radius, so the tone hugs the curve. */
|
|
1138
1171
|
.card[data-tone] {
|
|
1172
|
+
border-color: color-mix(in srgb, var(--fertig-ac) 32%, var(--fertig-bd));
|
|
1139
1173
|
background: linear-gradient(var(--fertig-ac), var(--fertig-ac)) top / 100% 3px no-repeat,
|
|
1140
1174
|
var(--fertig-el);
|
|
1141
1175
|
}
|
package/fertig.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! fertig v4.0.9 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.08}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.10}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--fertig-ac);caret-color:var(--fertig-ac);--fertig-f:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fertig-fm:ui-monospace,"Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;--fertig-w:72rem;--fertig-g:clamp(1.15rem,4vw,1.9rem);--fertig-r:10px;--fertig-rs:calc(var(--fertig-r) * .6);--fertig-rw:calc(var(--fertig-r) * 1.6);--fertig-rp:calc(var(--fertig-r) * 1000);--fertig-gray-100:oklch(97% .005 260);--fertig-gray-300:oklch(82% .01 260);--fertig-gray-500:oklch(62% .014 260);--fertig-gray-700:oklch(47% .015 260);--fertig-gray-900:oklch(25% .018 260);--fertig-blue-100:oklch(96% .018 255);--fertig-blue-300:oklch(80% .095 255);--fertig-blue-500:oklch(62% .16 255);--fertig-blue-700:oklch(47% .15 255);--fertig-blue-900:oklch(29% .09 255);--fertig-cyan-100:oklch(96% .025 210);--fertig-cyan-300:oklch(82% .085 210);--fertig-cyan-500:oklch(64% .11 210);--fertig-cyan-700:oklch(47% .08 210);--fertig-cyan-900:oklch(29% .05 210);--fertig-green-100:oklch(96% .025 150);--fertig-green-300:oklch(80% .095 150);--fertig-green-500:oklch(62% .13 150);--fertig-green-700:oklch(46% .10 150);--fertig-green-900:oklch(28% .06 150);--fertig-amber-100:oklch(97% .025 80);--fertig-amber-300:oklch(84% .10 80);--fertig-amber-500:oklch(72% .14 80);--fertig-amber-700:oklch(50% .10 80);--fertig-amber-900:oklch(29% .06 80);--fertig-red-100:oklch(96% .018 25);--fertig-red-300:oklch(80% .10 25);--fertig-red-500:oklch(62% .18 25);--fertig-red-700:oklch(47% .15 25);--fertig-red-900:oklch(28% .09 25);--fertig-violet-100:oklch(96% .018 290);--fertig-violet-300:oklch(80% .095 290);--fertig-violet-500:oklch(62% .16 290);--fertig-violet-700:oklch(47% .15 290);--fertig-violet-900:oklch(28% .09 290);--fertig-bg:light-dark(oklch(97% .004 260),oklch(13.5% .014 260));--fertig-el:light-dark(oklch(99.7% .002 260),oklch(19% .016 260));--fertig-face:light-dark(oklch(94.5% .006 260),oklch(24% .018 260));--fertig-fg:light-dark(oklch(22% .02 260),oklch(95% .012 260));--fertig-mut:light-dark(oklch(46% .018 260),oklch(72% .02 260));--fertig-bd:light-dark(oklch(22% .02 260 / .10),oklch(95% .012 260 / .12));--fertig-tb:light-dark(oklch(99% .003 260),oklch(18% .016 260));--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-on-ac:light-dark(#f7f8fb,#07071c);--fertig-sh:oklch(24% .014 270);--fertig-a1:.08;--fertig-a2:.10;--fertig-sh1:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a1) * 100%),transparent);--fertig-sh2:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a2) * 100%),transparent);--fertig-up:0 1px 2px var(--fertig-sh1),0 0 0 1px var(--fertig-bd);--fertig-up2:0 2px 4px var(--fertig-sh1),0 12px 32px -12px var(--fertig-sh2);--fertig-dn:var(--fertig-up);--fertig-caps:.74em/1.4 var(--fertig-f);--fertig-ease-out:cubic-bezier(.22,1,.36,1);--fertig-ease-in:cubic-bezier(.55,0,1,.45);--fertig-ease:cubic-bezier(.4,0,.2,1);--fertig-dur-1:.12s;--fertig-dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:.34;--fertig-a2:.30}}@supports (color:oklch(from red l c h)){:root{--fertig-on-ac:oklch(from var(--fertig-ac) clamp(.06,(l - .62) * -100,.96) 0 h)}}@supports (color:contrast-color(red)){:root{--fertig-on-ac:color-mix(in oklab,contrast-color(var(--fertig-ac)) 96%,var(--fertig-ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:.08;--fertig-a2:.10}[data-theme=dark]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30}[data-accent=blue]{--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300))}[data-accent=cyan]{--fertig-ac:light-dark(var(--fertig-cyan-700),var(--fertig-cyan-300))}[data-accent=green]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-accent=amber]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-accent=red]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-accent=violet]{--fertig-ac:light-dark(var(--fertig-violet-700),var(--fertig-violet-300))}[data-accent=gray]{--fertig-ac:light-dark(var(--fertig-gray-700),var(--fertig-gray-300))}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--fertig-f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--fertig-bg);color:var(--fertig-fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}:focus-visible{outline:2px solid color-mix(in srgb,var(--fertig-ac) 52%,transparent);outline-offset:2px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--fertig-rw);box-shadow:var(--fertig-up2)}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{padding-inline:var(--fertig-g)}body>:where(#root,#app,#__next,[data-fertig]){padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--fertig-bg)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd);border-bottom:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;--fertig-nw:var(--fertig-w);padding-inline:max(var(--fertig-g),calc(50% - var(--fertig-nw) / 2 + var(--fertig-g)),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--fertig-tb);color:var(--fertig-fg);border-bottom:1px solid var(--fertig-bd);font-size:.92em;box-shadow:0 1px 10px color-mix(in srgb,var(--fertig-sh) 4%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fertig-fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav :is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}@media (width <= 40rem){:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{row-gap:.55rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul{order:2;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul::-webkit-scrollbar{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>:last-child:not(ul){margin-inline-start:auto}}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:clamp(2rem,1.55rem + 1.5vw,2.8rem);letter-spacing:-.035em}h2{font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);letter-spacing:-.02em;margin-top:2.4rem}h3{font-size:1.12rem;letter-spacing:-.008em;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.1em;color:var(--fertig-mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) + :is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--fertig-ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--fertig-mut)}hr{border:0;border-top:1px solid var(--fertig-bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--fertig-bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--fertig-mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--fertig-mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--fertig-mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--fertig-mut);text-align:center}code,kbd,samp,pre{font-family:var(--fertig-fm);font-size:.9em}:not(pre)>code,samp{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rs);padding:.08em .35em}kbd{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-bottom-width:2px;border-radius:var(--fertig-rs);padding:.08em .4em;box-shadow:var(--fertig-up)}pre{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--fertig-syn-comment:light-dark(#6b7280,#8b949e);--fertig-syn-key:light-dark(#7c3aed,#c4a7fb);--fertig-syn-str:light-dark(#15803d,#7ee787);--fertig-syn-num:light-dark(#b45309,#f0b866);--fertig-syn-fn:light-dark(#1d4ed8,#93c5fd);--fertig-syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--fertig-syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--fertig-syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--fertig-syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--fertig-syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--fertig-syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--fertig-syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--fertig-mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92em}th,td{border-bottom:1px solid var(--fertig-bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:0;background:var(--fertig-face);font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.09em;color:var(--fertig-mut);padding:.5rem .7rem}thead th:first-child{border-start-start-radius:var(--fertig-r);border-end-start-radius:var(--fertig-r)}thead th:last-child{padding-inline-end:.7rem;border-start-end-radius:var(--fertig-r);border-end-end-radius:var(--fertig-r)}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--fertig-bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--fertig-face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}table :is(th,td){white-space:nowrap}}caption{text-align:start;color:var(--fertig-mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--fertig-mut)}label:has(input){font-size:1rem;color:var(--fertig-fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px));background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:6px 6px;background-repeat:no-repeat}select:dir(rtl){background-position:12px 54%,17px 54%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--fertig-dur-1) var(--fertig-ease),translate var(--fertig-dur-1) var(--fertig-ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;background:var(--fertig-el);margin-block-start:.35rem;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--fertig-r) - 2px)}option:hover{background:var(--fertig-face)}option:checked{background:var(--fertig-ac);color:var(--fertig-on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}@media (prefers-reduced-motion:no-preference) and (update:fast){::picker(select){opacity:0;translate:0 -4px;transform-origin:top center;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}select:open::picker(select){opacity:1;translate:0}@starting-style{select:open::picker(select){opacity:0;translate:0 -4px}}}}:is(input,select,textarea):hover:not(:disabled){background-color:color-mix(in srgb,var(--fertig-face) 55%,var(--fertig-el))}:is(input,select,textarea):focus-visible{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent)}:is(input,select,textarea)[data-variant=secondary]{background:var(--fertig-face);border-color:transparent;box-shadow:none}[data-field]{display:grid;gap:.35rem;align-content:start}[data-field] + [data-field]{margin-top:.9rem}[data-field]>*{margin-block:0}[data-field]>:is(small,[role=alert]){font-size:.82em}[data-field]>[role=alert]{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-field]:has([aria-invalid=true])>label{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-input-group]{display:flex;align-items:center;inline-size:100%;overflow:clip;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}[data-input-group]>:is(input,select,textarea){flex:1 1 auto;min-inline-size:0;border:0;border-radius:0;background-color:transparent;box-shadow:none;outline:0}[data-input-group]>:is(input,select,textarea):hover:not(:disabled){background-color:transparent}[data-input-group]>:where(span,small,output){flex:none;padding-inline:.75em;color:var(--fertig-mut);white-space:nowrap}[data-input-group]>button{align-self:stretch;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}[data-input-group]:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent);box-shadow:var(--fertig-up),0 0 0 3px color-mix(in srgb,var(--fertig-ac) 16%,transparent)}[data-input-group]:has([aria-invalid=true]){border-color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-input-group]:has(textarea){align-items:end}input[data-otp]{inline-size:min(100%,16ch);font:650 1.25rem/1.4 var(--fertig-fm);letter-spacing:.55em;text-indent:.55em;text-align:center}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0;margin-inline-end:.45em;vertical-align:-.18em}:is(input[type=checkbox],input[type=radio],input[type=range],progress,select[multiple]){accent-color:var(--fertig-ac)}:is(input,textarea,[contenteditable]){caret-color:var(--fertig-ac)}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em;margin-inline:0}::placeholder{color:var(--fertig-mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--fertig-face);cursor:default}label:has(+ :required)::after,label:has(:required)::after{content:" *";color:var(--fertig-ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fertig-fg);box-shadow:var(--fertig-dn),inset 0 0 0 100px var(--fertig-el);caret-color:var(--fertig-ac)}:disabled{color:var(--fertig-mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid transparent;border-radius:var(--fertig-rw);padding:1rem;background:var(--fertig-el);box-shadow:var(--fertig-up)}fieldset:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--fertig-bd);font-size:.95em;font-weight:700;color:var(--fertig-fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.5em 1.1em;background:var(--fertig-face);color:var(--fertig-fg);cursor:pointer;border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:none;font:inherit;font-weight:550;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 7%,var(--fertig-face))}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}:is(button,[type=submit],[type=button],[type=reset]):disabled{background:var(--fertig-face);border-color:transparent;color:var(--fertig-mut)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--fertig-ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--fertig-ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--fertig-face);border-color:var(--fertig-bd)}:is(button,a,input)[data-variant=soft]{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));border-color:transparent;box-shadow:none;color:var(--fertig-ac)}:is(button,a,input)[data-variant=soft]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-ac) 20%,var(--fertig-el))}:is(button,a,input)[data-variant=outline]{background:transparent;border-color:var(--fertig-bd);box-shadow:none}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--fertig-ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 7%,var(--fertig-face))}details{border:1px solid transparent;border-radius:var(--fertig-rw);padding:.8rem 1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up)}:is(td,th,dialog) details{border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--fertig-mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{--fertig-dialog-inset:1.25rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid transparent;border-radius:var(--fertig-rw);padding:var(--fertig-dialog-inset);max-width:min(30rem,92dvw);box-shadow:var(--fertig-up2),0 28px 70px -24px color-mix(in srgb,var(--fertig-sh) 34%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--fertig-sh) 42%,transparent)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:calc(0rem - var(--fertig-dialog-inset));background:var(--fertig-el)}dialog>header{inset-block-start:calc(0rem - var(--fertig-dialog-inset));margin-block:calc(0rem - var(--fertig-dialog-inset)) .35rem;padding:var(--fertig-dialog-inset) var(--fertig-dialog-inset) .5rem;font-weight:700;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0}dialog:is([open],:modal)>header>:is(h1,h2,h3,h4,p){margin:0;font-family:var(--fertig-f);font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}dialog>footer{inset-block-end:calc(0rem - var(--fertig-dialog-inset));margin-block:1.35rem calc(0rem - var(--fertig-dialog-inset));padding:.5rem var(--fertig-dialog-inset) var(--fertig-dialog-inset);border-radius:0 0 var(--fertig-rw) var(--fertig-rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}@supports (animation-timeline:scroll()){dialog>header{animation:fertig-rule-under linear both;animation-timeline:scroll(nearest);animation-range:0 1.2rem}dialog>footer{animation:fertig-rule-over linear both;animation-timeline:scroll(nearest);animation-range:calc(100% - 1.2rem) 100%}@keyframes fertig-rule-under{from{box-shadow:none}to{box-shadow:0 1px 0 var(--fertig-bd)}}@keyframes fertig-rule-over{from{box-shadow:0 -1px 0 var(--fertig-bd)}to{box-shadow:none}}}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--fertig-mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--fertig-dur-2) var(--fertig-ease-out),translate var(--fertig-dur-2) var(--fertig-ease-out),display var(--fertig-dur-2) allow-discrete,overlay var(--fertig-dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}aside{border:1px solid color-mix(in srgb,var(--fertig-ac) 18%,transparent);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-ac) 7%,var(--fertig-el));padding:.8rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face)}progress::-webkit-progress-bar{background:var(--fertig-face);border-radius:var(--fertig-rp)}progress::-webkit-progress-value{background:var(--fertig-ac);border-radius:var(--fertig-rp)}progress::-moz-progress-bar{background:var(--fertig-ac);border-radius:var(--fertig-rp)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--fertig-ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;padding:.2rem;overflow:auto clip;overscroll-behavior-x:contain;border-radius:var(--fertig-rp);background:var(--fertig-face)}[role=group]>*{border:0;border-radius:var(--fertig-rp);margin:0;box-shadow:none;min-width:0}[role=group]>:focus-visible{outline-offset:-3px}[role=group]>[aria-pressed=true]{background:var(--fertig-el);color:var(--fertig-fg);font-weight:650;box-shadow:var(--fertig-up)}[role=group]>:active:not(:disabled){translate:none}[role=tablist]{display:flex;gap:.15rem;max-inline-size:100%;overflow-x:auto;margin:1.1rem 0;padding:.25rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face);scrollbar-width:none}[role=tablist]::-webkit-scrollbar{display:none}[role=tab]{flex:none;background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.4em .9em;border-radius:var(--fertig-rp);margin:0}[role=tab]:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}[role=tab][aria-selected=true]{background:var(--fertig-el);color:var(--fertig-fg);box-shadow:var(--fertig-up)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.5em;height:1.45em;border-radius:var(--fertig-rp);border:0;background:color-mix(in srgb,var(--fertig-fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.17em;height:1.17em;border-radius:50%;background:#fff;box-shadow:var(--fertig-up);transition:translate .16s var(--fertig-ease-out)}input[switch]:checked,input[role=switch]:checked{background:var(--fertig-ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:1.05em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-1.05em 0}[popover]{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid transparent;border-radius:var(--fertig-rw);padding:.35rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover] :is(ul,menu){list-style:none;padding:0;margin:0}[popover] :is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--fertig-r) - 2px);font-weight:400}[popover] :is(a,button):hover:not(:disabled){background:var(--fertig-ac);color:var(--fertig-on-ac)}[popover] hr{margin:.3rem 0}[role=listbox]{list-style:none;margin:1rem 0;padding:.35rem;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-rw);box-shadow:var(--fertig-up)}[role=option]{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:var(--fertig-r);cursor:default}[role=option]:is(:hover,:focus-visible){background:var(--fertig-face)}[role=option][aria-selected=true]{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));color:var(--fertig-ac)}[popover] [role=listbox]{margin:0;padding:0;border:0;box-shadow:none}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--fertig-mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible,:active)::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#f7f8fb;font-size:.8em;padding:.25em .55em;border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}[data-tooltip]:dir(rtl)::after{translate:50% -.45em}[data-tone=ok]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-tone=warn]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-tone=err]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-tone] .badge,.badge[data-tone]{color:var(--fertig-ac);border-color:var(--fertig-ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--fertig-face);border:1px solid var(--fertig-bd);font-size:.8em;font-weight:700;color:var(--fertig-mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--fertig-r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--fertig-face),color-mix(in srgb,var(--fertig-fg) 9%,var(--fertig-face)),var(--fertig-face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}[data-surface]{background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-rw);padding:1rem;box-shadow:var(--fertig-up)}[data-surface=flat]{background:var(--fertig-face);box-shadow:none}[data-surface=outline]{background:transparent;border-color:var(--fertig-bd);box-shadow:none}[data-surface]>:first-child{margin-top:0}[data-surface]>:last-child{margin-bottom:0}[data-item]{display:flex;align-items:center;gap:.8rem;min-inline-size:0;padding:.7rem .8rem;border-radius:var(--fertig-r);background:var(--fertig-el)}[data-item] + [data-item]{margin-top:.35rem}[data-item]>:where(div,p){flex:1;min-inline-size:0;margin:0}[data-item]>:where(div,p)>*{display:block;margin-block:0}:is(a,button)[data-item]{inline-size:100%;min-width:0;text-align:start;color:inherit;text-decoration:none}:is(a,button)[data-item]:hover:not(:disabled){background:var(--fertig-face)}[data-empty]{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:clamp(2rem,7vw,4rem);border:1px dashed var(--fertig-bd);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-face) 45%,transparent)}[data-empty]>*{max-inline-size:32rem;margin-block:0}dialog[data-side]{max-width:none;margin:0;border-radius:0}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}[popover][data-toast-region]{position:fixed;inset:auto 1rem 1rem auto;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;background:none;border:0;box-shadow:none;padding:0;max-block-size:none;overflow:visible;pointer-events:none}[popover][data-toast-region]>[data-toast]{pointer-events:auto;position:static;inset:auto;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover][data-toast-region]{position-area:none;inset:auto 1rem 1rem auto}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid transparent;border-radius:var(--fertig-rw);background:var(--fertig-el);box-shadow:var(--fertig-up)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--fertig-bd)}[popover] menu{border:0;padding:0;margin:0;background:none;box-shadow:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu :is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--fertig-r);background:none;box-shadow:none;font:inherit;color:var(--fertig-fg);text-decoration:none;opacity:.72}nav menu :is(a,button):hover{background:var(--fertig-face);opacity:1}nav menu :is(a,button)[aria-current]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--fertig-mut)}.center{text-align:center}.wide{max-width:80rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--fertig-nw:80rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row :is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row :is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid transparent;border-radius:var(--fertig-rw);padding:1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:38rem}.hidden{display:none}.badge{border:1px solid transparent;border-radius:var(--fertig-rp);background:var(--fertig-face);padding:.18em .65em;font:650 .78em/1.45 var(--fertig-f);color:var(--fertig-mut)}.card>:is(header,footer){padding-inline:0}.card>header{margin-top:-.1rem;font-weight:650}.card>footer{margin-top:auto;margin-bottom:-.1rem;color:var(--fertig-mut);font-size:.85em}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;box-shadow:none}.card[data-tone]{background:linear-gradient(var(--fertig-ac),var(--fertig-ac)) top / 100% 3px no-repeat,var(--fertig-el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--fertig-ac) 22%,var(--fertig-bd));box-shadow:var(--fertig-up2),0 16px 30px -16px color-mix(in srgb,var(--fertig-sh) 28%,transparent);translate:0 -1px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-block-start:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--fertig-ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--fertig-ac)}del{color:var(--fertig-mut)}address{font-style:normal;color:var(--fertig-mut)}hgroup>*{margin:0}hgroup>p{color:var(--fertig-mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--fertig-mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--fertig-face)}:is(input,select,textarea)[aria-invalid=true],:is(input,textarea):user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}:is(input,select,textarea)[aria-invalid=true] + small,:is(input,textarea):user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--fertig-ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--fertig-bg:#fff;--fertig-el:#fff;--fertig-fg:#000;--fertig-bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{border:0}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--fertig-ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-contrast:more){:root{--fertig-bd:light-dark(#00000059,#ffffff6b);--fertig-mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=option],[role=group]>*,[data-item],[popover] :is(a,button){transition:box-shadow var(--fertig-dur-1) var(--fertig-ease),background-color var(--fertig-dur-1) var(--fertig-ease),border-color var(--fertig-dur-1) var(--fertig-ease),color var(--fertig-dur-1) var(--fertig-ease),translate .08s var(--fertig-ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--fertig-bg:#f4f6f9;--fertig-el:#fff;--fertig-face:#eceff4;--fertig-fg:#151b24;--fertig-mut:#525962;--fertig-bd:#151b241a;--fertig-tb:#fbfcfe;--fertig-ac:#2850de;--fertig-on-ac:#f7f8fb}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-bg:#0b0e14;--fertig-el:#151a22;--fertig-face:#202630;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff71f;--fertig-tb:#131820;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}[data-theme=dark]{--fertig-bg:#0b0e14;--fertig-el:#151a22;--fertig-face:#202630;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff71f;--fertig-tb:#131820;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table,[data-surface],[data-input-group],[data-empty],[data-item],[role=listbox]{border:1px solid CanvasText}[role=tab][aria-selected=true],[role=option][aria-selected=true]{border:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}
|
|
1
|
+
/*! fertig v5.0.0 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.08}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.10}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--fertig-ac);caret-color:var(--fertig-ac);--fertig-f:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fertig-fm:ui-monospace,"Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;--fertig-w:72rem;--fertig-g:clamp(1.15rem,4vw,1.9rem);--fertig-r:10px;--fertig-rs:calc(var(--fertig-r) * .6);--fertig-rw:calc(var(--fertig-r) * 1.6);--fertig-rp:calc(var(--fertig-r) * 1000);--fertig-gray-100:oklch(97% .005 260);--fertig-gray-300:oklch(82% .01 260);--fertig-gray-500:oklch(62% .014 260);--fertig-gray-700:oklch(47% .015 260);--fertig-gray-900:oklch(25% .018 260);--fertig-blue-100:oklch(96% .018 255);--fertig-blue-300:oklch(80% .095 255);--fertig-blue-500:oklch(62% .16 255);--fertig-blue-700:oklch(47% .15 255);--fertig-blue-900:oklch(29% .09 255);--fertig-cyan-100:oklch(96% .025 210);--fertig-cyan-300:oklch(82% .085 210);--fertig-cyan-500:oklch(64% .11 210);--fertig-cyan-700:oklch(47% .08 210);--fertig-cyan-900:oklch(29% .05 210);--fertig-green-100:oklch(96% .025 150);--fertig-green-300:oklch(80% .095 150);--fertig-green-500:oklch(62% .13 150);--fertig-green-700:oklch(46% .10 150);--fertig-green-900:oklch(28% .06 150);--fertig-amber-100:oklch(97% .025 80);--fertig-amber-300:oklch(84% .10 80);--fertig-amber-500:oklch(72% .14 80);--fertig-amber-700:oklch(50% .10 80);--fertig-amber-900:oklch(29% .06 80);--fertig-red-100:oklch(96% .018 25);--fertig-red-300:oklch(80% .10 25);--fertig-red-500:oklch(62% .18 25);--fertig-red-700:oklch(47% .15 25);--fertig-red-900:oklch(28% .09 25);--fertig-violet-100:oklch(96% .018 290);--fertig-violet-300:oklch(80% .095 290);--fertig-violet-500:oklch(62% .16 290);--fertig-violet-700:oklch(47% .15 290);--fertig-violet-900:oklch(28% .09 290);--fertig-bg:light-dark(oklch(97% .004 260),oklch(13.5% .014 260));--fertig-el:light-dark(oklch(99.7% .002 260),oklch(19% .016 260));--fertig-face:light-dark(oklch(94.5% .006 260),oklch(24% .018 260));--fertig-fg:light-dark(oklch(22% .02 260),oklch(95% .012 260));--fertig-mut:light-dark(oklch(46% .018 260),oklch(72% .02 260));--fertig-bd:light-dark(oklch(22% .02 260 / .14),oklch(95% .012 260 / .17));--fertig-tb:light-dark(oklch(99% .003 260),oklch(18% .016 260));--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-on-ac:light-dark(#f7f8fb,#07071c);--fertig-sh:oklch(24% .014 270);--fertig-a1:.08;--fertig-a2:.10;--fertig-sh1:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a1) * 100%),transparent);--fertig-sh2:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a2) * 100%),transparent);--fertig-up:0 1px 2px var(--fertig-sh1),0 0 0 1px var(--fertig-bd);--fertig-up2:0 2px 4px var(--fertig-sh1),0 12px 32px -12px var(--fertig-sh2);--fertig-dn:var(--fertig-up);--fertig-caps:.74em/1.4 var(--fertig-f);--fertig-ease-out:cubic-bezier(.22,1,.36,1);--fertig-ease-in:cubic-bezier(.55,0,1,.45);--fertig-ease:cubic-bezier(.4,0,.2,1);--fertig-dur-1:.12s;--fertig-dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:.34;--fertig-a2:.30}}@supports (color:oklch(from red l c h)){:root{--fertig-on-ac:oklch(from var(--fertig-ac) clamp(.06,(l - .62) * -100,.96) 0 h)}}@supports (color:contrast-color(red)){:root{--fertig-on-ac:color-mix(in oklab,contrast-color(var(--fertig-ac)) 96%,var(--fertig-ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:.08;--fertig-a2:.10}[data-theme=dark]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30}[data-accent=blue]{--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300))}[data-accent=cyan]{--fertig-ac:light-dark(var(--fertig-cyan-700),var(--fertig-cyan-300))}[data-accent=green]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-accent=amber]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-accent=red]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-accent=violet]{--fertig-ac:light-dark(var(--fertig-violet-700),var(--fertig-violet-300))}[data-accent=gray]{--fertig-ac:light-dark(var(--fertig-gray-700),var(--fertig-gray-300))}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--fertig-f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--fertig-bg);color:var(--fertig-fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}:focus-visible{outline:2px solid color-mix(in srgb,var(--fertig-ac) 52%,transparent);outline-offset:2px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--fertig-rw);box-shadow:var(--fertig-up2)}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{padding-inline:var(--fertig-g)}body>:where(#root,#app,#__next,[data-fertig]){padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--fertig-bg)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd);border-bottom:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;--fertig-nw:var(--fertig-w);padding-inline:max(var(--fertig-g),calc(50% - var(--fertig-nw) / 2 + var(--fertig-g)),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--fertig-tb);color:var(--fertig-fg);border-bottom:1px solid var(--fertig-bd);font-size:.92em;box-shadow:0 1px 10px color-mix(in srgb,var(--fertig-sh) 4%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fertig-fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav :is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}@media (width <= 40rem){:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{row-gap:.55rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul{order:2;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul::-webkit-scrollbar{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>:last-child:not(ul){margin-inline-start:auto}}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:clamp(2rem,1.55rem + 1.5vw,2.8rem);letter-spacing:-.035em}h2{font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);letter-spacing:-.02em;margin-top:2.4rem}h3{font-size:1.12rem;letter-spacing:-.008em;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.1em;color:var(--fertig-mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) + :is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--fertig-ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--fertig-mut)}hr{border:0;border-top:1px solid var(--fertig-bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--fertig-bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--fertig-mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--fertig-mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--fertig-mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--fertig-mut);text-align:center}code,kbd,samp,pre{font-family:var(--fertig-fm);font-size:.9em}:not(pre)>code,samp{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rs);padding:.08em .35em}kbd{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-bottom-width:2px;border-radius:var(--fertig-rs);padding:.08em .4em;box-shadow:var(--fertig-up)}pre{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--fertig-syn-comment:light-dark(#6b7280,#8b949e);--fertig-syn-key:light-dark(#7c3aed,#c4a7fb);--fertig-syn-str:light-dark(#15803d,#7ee787);--fertig-syn-num:light-dark(#b45309,#f0b866);--fertig-syn-fn:light-dark(#1d4ed8,#93c5fd);--fertig-syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--fertig-syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--fertig-syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--fertig-syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--fertig-syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--fertig-syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--fertig-syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--fertig-mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92em;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);overflow:hidden}th,td{border-bottom:1px solid var(--fertig-bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:0;background:var(--fertig-face);font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.09em;color:var(--fertig-mut);padding:.5rem .7rem}thead th:first-child{border-start-start-radius:var(--fertig-r);border-end-start-radius:var(--fertig-r)}thead th:last-child{padding-inline-end:.7rem;border-start-end-radius:var(--fertig-r);border-end-end-radius:var(--fertig-r)}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--fertig-bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--fertig-face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}table :is(th,td){white-space:nowrap}}caption{text-align:start;color:var(--fertig-mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--fertig-mut)}label:has(input){font-size:1rem;color:var(--fertig-fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.6em .8em;background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);box-shadow:none}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px));background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:6px 6px;background-repeat:no-repeat}select:dir(rtl){background-position:12px 54%,17px 54%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--fertig-dur-1) var(--fertig-ease),translate var(--fertig-dur-1) var(--fertig-ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;background:var(--fertig-el);margin-block-start:.35rem;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--fertig-r) - 2px)}option:hover{background:var(--fertig-face)}option:checked{background:var(--fertig-ac);color:var(--fertig-on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}@media (prefers-reduced-motion:no-preference) and (update:fast){::picker(select){opacity:0;translate:0 -4px;transform-origin:top center;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}select:open::picker(select){opacity:1;translate:0}@starting-style{select:open::picker(select){opacity:0;translate:0 -4px}}}}:is(input,select,textarea):hover:not(:disabled){background-color:color-mix(in srgb,var(--fertig-face) 55%,var(--fertig-el))}:is(input,select,textarea):focus-visible{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent)}:is(input,select,textarea)[data-variant=secondary]{background:var(--fertig-face);border-color:transparent;box-shadow:none}[data-field]{display:grid;gap:.35rem;align-content:start}[data-field] + [data-field]{margin-top:.9rem}[data-field]>*{margin-block:0}[data-field]>:is(small,[role=alert]){font-size:.82em}[data-field]>[role=alert]{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-field]:has([aria-invalid=true])>label{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-input-group]{display:flex;align-items:center;inline-size:100%;overflow:clip;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}[data-input-group]>:is(input,select,textarea){flex:1 1 auto;min-inline-size:0;border:0;border-radius:0;background-color:transparent;box-shadow:none;outline:0}[data-input-group]>:is(input,select,textarea):hover:not(:disabled){background-color:transparent}[data-input-group]>:where(span,small,output){flex:none;padding-inline:.75em;color:var(--fertig-mut);white-space:nowrap}[data-input-group]>button{align-self:stretch;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}[data-input-group]:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent);box-shadow:var(--fertig-up),0 0 0 3px color-mix(in srgb,var(--fertig-ac) 16%,transparent)}[data-input-group]:has([aria-invalid=true]){border-color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-input-group]:has(textarea){align-items:end}input[data-otp]{inline-size:min(100%,16ch);font:650 1.25rem/1.4 var(--fertig-fm);letter-spacing:.55em;text-indent:.55em;text-align:center}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0;margin-inline-end:.45em;vertical-align:-.18em}:is(input[type=checkbox],input[type=radio],input[type=range],progress,select[multiple]){accent-color:var(--fertig-ac)}:is(input,textarea,[contenteditable]){caret-color:var(--fertig-ac)}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em;margin-inline:0}::placeholder{color:var(--fertig-mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--fertig-face);cursor:default}label:has(+ :required)::after,label:has(:required)::after{content:" *";color:var(--fertig-ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fertig-fg);box-shadow:var(--fertig-dn),inset 0 0 0 100px var(--fertig-el);caret-color:var(--fertig-ac)}:disabled{color:var(--fertig-mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;background:var(--fertig-el);box-shadow:var(--fertig-up)}fieldset:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--fertig-bd);font-size:.95em;font-weight:700;color:var(--fertig-fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.55em 1.2em;background:var(--fertig-face);color:var(--fertig-fg);cursor:pointer;border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);box-shadow:0 1px 0 0 color-mix(in srgb,var(--fertig-sh) 9%,transparent),0 1px 2px var(--fertig-sh1);font:inherit;font-weight:550;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 6%,var(--fertig-face));border-color:color-mix(in srgb,var(--fertig-fg) 20%,var(--fertig-bd));box-shadow:0 1px 0 0 color-mix(in srgb,var(--fertig-sh) 9%,transparent),var(--fertig-up2);translate:0 -1px}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac);box-shadow:0 2px 0 0 color-mix(in srgb,var(--fertig-sh) 30%,transparent)}:is(button,[type=submit],[type=button],[type=reset]):disabled{background:var(--fertig-face);border-color:var(--fertig-bd);color:var(--fertig-mut);box-shadow:none}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--fertig-ac),#fff 9%);translate:0;box-shadow:0 2px 0 0 color-mix(in srgb,var(--fertig-sh) 34%,transparent),0 8px 18px -8px color-mix(in srgb,var(--fertig-sh) 34%,transparent)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--fertig-ac) calc(l + .05) c h)}}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){translate:0 1px;box-shadow:none}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--fertig-face);border-color:var(--fertig-bd);translate:0;box-shadow:none}:is(button,a,input)[data-variant=soft]{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));border-color:transparent;box-shadow:none;color:var(--fertig-ac)}:is(button,a,input)[data-variant=soft]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-ac) 20%,var(--fertig-el));translate:0;box-shadow:none}:is(button,a,input)[data-variant=outline]{background:transparent;border-color:var(--fertig-bd);box-shadow:none}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--fertig-ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px;translate:0;box-shadow:none}button[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700;border-color:var(--fertig-bd);box-shadow:var(--fertig-up)}button[aria-pressed=true]:hover:not(:disabled){translate:0;box-shadow:var(--fertig-up)}details{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.8rem 1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up)}:is(td,th,dialog,.card) details{border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--fertig-mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{--fertig-dialog-inset:1.25rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:var(--fertig-dialog-inset);max-width:min(30rem,92dvw);box-shadow:var(--fertig-up2),0 28px 70px -24px color-mix(in srgb,var(--fertig-sh) 34%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--fertig-sh) 42%,transparent)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:calc(0rem - var(--fertig-dialog-inset));background:var(--fertig-el)}dialog>header{inset-block-start:calc(0rem - var(--fertig-dialog-inset));margin-block:calc(0rem - var(--fertig-dialog-inset)) .35rem;padding:var(--fertig-dialog-inset) var(--fertig-dialog-inset) .5rem;font-weight:700;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0}dialog:is([open],:modal)>header>:is(h1,h2,h3,h4,p){margin:0;font-family:var(--fertig-f);font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}dialog>footer{inset-block-end:calc(0rem - var(--fertig-dialog-inset));margin-block:1.35rem calc(0rem - var(--fertig-dialog-inset));padding:.5rem var(--fertig-dialog-inset) var(--fertig-dialog-inset);border-radius:0 0 var(--fertig-rw) var(--fertig-rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}@supports (animation-timeline:scroll()){dialog>header{animation:fertig-rule-under linear both;animation-timeline:scroll(nearest);animation-range:0 1.2rem}dialog>footer{animation:fertig-rule-over linear both;animation-timeline:scroll(nearest);animation-range:calc(100% - 1.2rem) 100%}@keyframes fertig-rule-under{from{box-shadow:none}to{box-shadow:0 1px 0 var(--fertig-bd)}}@keyframes fertig-rule-over{from{box-shadow:0 -1px 0 var(--fertig-bd)}to{box-shadow:none}}}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--fertig-mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--fertig-dur-2) var(--fertig-ease-out),translate var(--fertig-dur-2) var(--fertig-ease-out),display var(--fertig-dur-2) allow-discrete,overlay var(--fertig-dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}aside{border:1px solid color-mix(in srgb,var(--fertig-ac) 26%,transparent);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-ac) 9%,var(--fertig-el));padding:.85rem 1.15rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face)}progress::-webkit-progress-bar{background:var(--fertig-face);border-radius:var(--fertig-rp)}progress::-webkit-progress-value{background:var(--fertig-ac);border-radius:var(--fertig-rp)}progress::-moz-progress-bar{background:var(--fertig-ac);border-radius:var(--fertig-rp)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--fertig-ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;padding:.2rem;overflow:auto clip;overscroll-behavior-x:contain;border-radius:var(--fertig-rp);background:var(--fertig-face)}[role=group]>*{border:0;border-radius:var(--fertig-rp);margin:0;box-shadow:none;min-width:0}[role=group]>:focus-visible{outline-offset:-3px}[role=group]>[aria-pressed=true]{background:var(--fertig-el);color:var(--fertig-fg);font-weight:650;box-shadow:var(--fertig-up)}[role=group]>:active:not(:disabled){translate:none}[role=tablist]{display:flex;gap:.15rem;max-inline-size:100%;overflow-x:auto;margin:1.1rem 0;padding:.25rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face);scrollbar-width:none}[role=tablist]::-webkit-scrollbar{display:none}[role=tab]{flex:none;background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.4em .9em;border-radius:var(--fertig-rp);margin:0}[role=tab]:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}[role=tab][aria-selected=true]{background:var(--fertig-el);color:var(--fertig-fg);box-shadow:var(--fertig-up)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.5em;height:1.45em;border-radius:var(--fertig-rp);border:0;background:color-mix(in srgb,var(--fertig-fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.17em;height:1.17em;border-radius:50%;background:#fff;box-shadow:var(--fertig-up);transition:translate .16s var(--fertig-ease-out)}input[switch]:checked,input[role=switch]:checked{background:var(--fertig-ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:1.05em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-1.05em 0}[popover]{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover] :is(ul,menu){list-style:none;padding:0;margin:0}[popover] :is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--fertig-r) - 2px);font-weight:400}[popover] :is(a,button):hover:not(:disabled){background:var(--fertig-ac);color:var(--fertig-on-ac)}[popover] hr{margin:.3rem 0}[role=listbox]{list-style:none;margin:1rem 0;padding:.35rem;background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);box-shadow:var(--fertig-up)}[role=option]{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:var(--fertig-r);cursor:default}[role=option]:is(:hover,:focus-visible){background:var(--fertig-face)}[role=option][aria-selected=true]{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));color:var(--fertig-ac)}[popover] [role=listbox]{margin:0;padding:0;border:0;box-shadow:none}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--fertig-mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible,:active)::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#f7f8fb;font-size:.8em;padding:.25em .55em;border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}[data-tooltip]:dir(rtl)::after{translate:50% -.45em}[data-tone=ok]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-tone=warn]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-tone=err]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-tone] .badge,.badge[data-tone]{color:var(--fertig-ac);border-color:var(--fertig-ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--fertig-face);border:1px solid var(--fertig-bd);font-size:.8em;font-weight:700;color:var(--fertig-mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--fertig-r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--fertig-face),color-mix(in srgb,var(--fertig-fg) 9%,var(--fertig-face)),var(--fertig-face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}[data-surface]{background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;box-shadow:var(--fertig-up)}[data-surface=flat]{background:var(--fertig-face);box-shadow:none}[data-surface=outline]{background:transparent;border-color:var(--fertig-bd);box-shadow:none}[data-surface]>:first-child{margin-top:0}[data-surface]>:last-child{margin-bottom:0}[data-item]{display:flex;align-items:center;gap:.8rem;min-inline-size:0;padding:.7rem .8rem;border-radius:var(--fertig-r);background:var(--fertig-el);border:1px solid var(--fertig-bd)}[data-item] + [data-item]{margin-top:.35rem}[data-item]>:where(div,p){flex:1;min-inline-size:0;margin:0}[data-item]>:where(div,p)>*{display:block;margin-block:0}:is(a,button)[data-item]{inline-size:100%;min-width:0;text-align:start;color:inherit;text-decoration:none}:is(a,button)[data-item]:hover:not(:disabled){background:var(--fertig-face)}[data-empty]{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:clamp(2rem,7vw,4rem);border:1px dashed var(--fertig-bd);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-face) 45%,transparent)}[data-empty]>*{max-inline-size:32rem;margin-block:0}dialog[data-side]{max-width:none;margin:0;border-radius:0}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}[popover][data-toast-region]{position:fixed;inset:auto 1rem 1rem auto;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;background:none;border:0;box-shadow:none;padding:0;max-block-size:none;overflow:visible;pointer-events:none}[popover][data-toast-region]>[data-toast]{pointer-events:auto;position:static;inset:auto;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover][data-toast-region]{position-area:none;inset:auto 1rem 1rem auto}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);background:var(--fertig-el);box-shadow:var(--fertig-up)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--fertig-bd)}[popover] menu{border:0;padding:0;margin:0;background:none;box-shadow:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu :is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--fertig-r);background:none;box-shadow:none;font:inherit;color:var(--fertig-fg);text-decoration:none;opacity:.72}nav menu :is(a,button):hover{background:var(--fertig-face);opacity:1}nav menu :is(a,button)[aria-current]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--fertig-mut)}.center{text-align:center}.wide{max-width:80rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--fertig-nw:80rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row :is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row :is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:38rem}.hidden{display:none}.badge{border:1px solid color-mix(in srgb,var(--fertig-ac) 24%,transparent);border-radius:var(--fertig-rp);background:color-mix(in srgb,var(--fertig-ac) 12%,var(--fertig-el));padding:.18em .65em;font:650 .78em/1.45 var(--fertig-f);color:var(--fertig-ac)}.card>:is(header,footer){padding-inline:0}.card>header{margin-top:-.1rem;font-weight:650}.card>footer{margin-top:auto;margin-bottom:-.1rem;color:var(--fertig-mut);font-size:.85em}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;box-shadow:none}.card[data-tone]{border-color:color-mix(in srgb,var(--fertig-ac) 32%,var(--fertig-bd));background:linear-gradient(var(--fertig-ac),var(--fertig-ac)) top / 100% 3px no-repeat,var(--fertig-el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--fertig-ac) 22%,var(--fertig-bd));box-shadow:var(--fertig-up2),0 16px 30px -16px color-mix(in srgb,var(--fertig-sh) 28%,transparent);translate:0 -1px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-block-start:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--fertig-ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--fertig-ac)}del{color:var(--fertig-mut)}address{font-style:normal;color:var(--fertig-mut)}hgroup>*{margin:0}hgroup>p{color:var(--fertig-mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--fertig-mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--fertig-face)}:is(input,select,textarea)[aria-invalid=true],:is(input,textarea):user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}:is(input,select,textarea)[aria-invalid=true] + small,:is(input,textarea):user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--fertig-ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>*){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--fertig-bg:#fff;--fertig-el:#fff;--fertig-fg:#000;--fertig-bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{border:0}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--fertig-ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-contrast:more){:root{--fertig-bd:light-dark(#00000059,#ffffff6b);--fertig-mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=option],[role=group]>*,[data-item],[popover] :is(a,button){transition:box-shadow var(--fertig-dur-1) var(--fertig-ease),background-color var(--fertig-dur-1) var(--fertig-ease),border-color var(--fertig-dur-1) var(--fertig-ease),color var(--fertig-dur-1) var(--fertig-ease),translate .08s var(--fertig-ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--fertig-bg:#f4f6f9;--fertig-el:#fff;--fertig-face:#eceff4;--fertig-fg:#151b24;--fertig-mut:#525962;--fertig-bd:#151b241a;--fertig-tb:#fbfcfe;--fertig-ac:#2850de;--fertig-on-ac:#f7f8fb}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-bg:#0b0e14;--fertig-el:#151a22;--fertig-face:#202630;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff71f;--fertig-tb:#131820;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}[data-theme=dark]{--fertig-bg:#0b0e14;--fertig-el:#151a22;--fertig-face:#202630;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff71f;--fertig-tb:#131820;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table,[data-surface],[data-input-group],[data-empty],[data-item],[role=listbox]{border:1px solid CanvasText}[role=tab][aria-selected=true],[role=option][aria-selected=true]{border:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fertig",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "A classless CSS stylesheet with no legacy: link one file, write ordinary HTML, done. No build step, no dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"fertig",
|
|
@@ -47,13 +47,25 @@
|
|
|
47
47
|
"exports": {
|
|
48
48
|
".": "./fertig.css",
|
|
49
49
|
"./min": "./fertig.min.css",
|
|
50
|
+
"./classes": "./fertig-classes.css",
|
|
51
|
+
"./classes/min": "./fertig-classes.min.css",
|
|
52
|
+
"./themes": "./fertig-themes.css",
|
|
53
|
+
"./themes/min": "./fertig-themes.min.css",
|
|
50
54
|
"./fertig.css": "./fertig.css",
|
|
51
55
|
"./fertig.min.css": "./fertig.min.css",
|
|
56
|
+
"./fertig-classes.css": "./fertig-classes.css",
|
|
57
|
+
"./fertig-classes.min.css": "./fertig-classes.min.css",
|
|
58
|
+
"./fertig-themes.css": "./fertig-themes.css",
|
|
59
|
+
"./fertig-themes.min.css": "./fertig-themes.min.css",
|
|
52
60
|
"./package.json": "./package.json"
|
|
53
61
|
},
|
|
54
62
|
"files": [
|
|
55
63
|
"fertig.css",
|
|
56
64
|
"fertig.min.css",
|
|
65
|
+
"fertig-classes.css",
|
|
66
|
+
"fertig-classes.min.css",
|
|
67
|
+
"fertig-themes.css",
|
|
68
|
+
"fertig-themes.min.css",
|
|
57
69
|
"README.md",
|
|
58
70
|
"LICENSE"
|
|
59
71
|
],
|