fertig 4.0.4 → 4.0.7
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 +4 -3
- package/fertig.css +223 -106
- package/fertig.min.css +1 -1
- package/package.json +5 -4
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
|
+
**41.1 KB raw · 9.3 KB gzipped · no build step · no dependencies · no JavaScript.**
|
|
11
11
|
|
|
12
12
|
## Use
|
|
13
13
|
|
|
@@ -32,8 +32,8 @@ That is the complete setup. See the [documentation](https://moji2002.github.io/f
|
|
|
32
32
|
## What it includes
|
|
33
33
|
|
|
34
34
|
- Light and dark themes through `light-dark()`
|
|
35
|
-
- Accessible forms,
|
|
36
|
-
|
|
35
|
+
- Accessible forms, input groups, one-time codes, listboxes, surfaces, cards,
|
|
36
|
+
items, empty states, tabs, menus, dialogs, tooltips, and more
|
|
37
37
|
- Native no-JavaScript behavior for popovers, dialogs, drawers, disclosures,
|
|
38
38
|
toasts, and tooltips
|
|
39
39
|
- Logical properties for RTL layouts
|
|
@@ -60,6 +60,7 @@ Override tokens in your own CSS:
|
|
|
60
60
|
|
|
61
61
|
```sh
|
|
62
62
|
npm install
|
|
63
|
+
npm run hooks:install # enable automatic patch versioning for commits
|
|
63
64
|
npm run build # regenerate fertig.min.css
|
|
64
65
|
npm test # library and site tests
|
|
65
66
|
npm run site # Astro production build
|
package/fertig.css
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
/*! fertig v4.0.
|
|
1
|
+
/*! fertig v4.0.7 — 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 platform-neutral:
|
|
6
|
-
|
|
5
|
+
The finish is platform-neutral: soft surfaces, rounded controls, restrained
|
|
6
|
+
depth and 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 */
|
|
10
10
|
/* Registrations are global: they cannot be layered, scoped or overridden.
|
|
11
11
|
Hence the prefix — a bare --a1 would silently retype a property of yours. */
|
|
12
|
-
@property --fertig-a1 { syntax: "<number>"; inherits: true; initial-value: .
|
|
13
|
-
@property --fertig-a2 { syntax: "<number>"; inherits: true; initial-value: .
|
|
12
|
+
@property --fertig-a1 { syntax: "<number>"; inherits: true; initial-value: .08 }
|
|
13
|
+
@property --fertig-a2 { syntax: "<number>"; inherits: true; initial-value: .10 }
|
|
14
14
|
|
|
15
15
|
/* Two layers, in this order. Your own unlayered CSS wins over both regardless
|
|
16
16
|
of specificity, so overriding never needs !important — and neither does this
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
accent-color: var(--fertig-ac);
|
|
34
34
|
caret-color: var(--fertig-ac);
|
|
35
35
|
|
|
36
|
-
--fertig-f: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
|
|
36
|
+
--fertig-f: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
|
|
37
37
|
Arial, sans-serif; /* yours */
|
|
38
38
|
--fertig-fm: ui-monospace, "Cascadia Code", "Roboto Mono", Consolas,
|
|
39
39
|
"Liberation Mono", monospace; /* code */
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
/* One radius, and the rest derived from it: set --fertig-r and the whole
|
|
43
43
|
sheet rescales together. Four independent numbers meant --fertig-r: 4px
|
|
44
44
|
left tight fields sitting inside cards that were still round. */
|
|
45
|
-
--fertig-r:
|
|
46
|
-
--fertig-rs: calc(var(--fertig-r) * .
|
|
47
|
-
--fertig-rw: calc(var(--fertig-r) * 1.
|
|
45
|
+
--fertig-r: 10px; /* control radius: fields, buttons, menu rows */
|
|
46
|
+
--fertig-rs: calc(var(--fertig-r) * .6); /* small: inline chips and code */
|
|
47
|
+
--fertig-rw: calc(var(--fertig-r) * 1.6); /* large: cards, dialogs, menus */
|
|
48
48
|
--fertig-rp: calc(var(--fertig-r) * 1000); /* pill: badges, switches, meters, joined ends */
|
|
49
49
|
/* --fertig-rp multiplies rather than naming infinity: any non-zero radius
|
|
50
50
|
still clamps to a true pill, while --fertig-r: 0 squares the whole shape
|
|
@@ -83,9 +83,9 @@
|
|
|
83
83
|
--fertig-violet-900: oklch(28% .09 290);
|
|
84
84
|
|
|
85
85
|
/* ---- semantic ----------------------------------------------- */
|
|
86
|
-
--fertig-bg: light-dark(oklch(
|
|
87
|
-
--fertig-el: light-dark(oklch(99% .
|
|
88
|
-
--fertig-face:light-dark(oklch(
|
|
86
|
+
--fertig-bg: light-dark(oklch(97% .004 260), oklch(13.5% .014 260)); /* page ground */
|
|
87
|
+
--fertig-el: light-dark(oklch(99.7% .002 260), oklch(19% .016 260)); /* raised surface */
|
|
88
|
+
--fertig-face:light-dark(oklch(94.5% .006 260), oklch(24% .018 260)); /* quiet controls */
|
|
89
89
|
--fertig-fg: light-dark(oklch(22% .02 260), oklch(95% .012 260));
|
|
90
90
|
/* lifted from 50%/70%: the weakest pairing (muted on the page ground in
|
|
91
91
|
light, muted on controls in dark) was 4.96:1 and 5.99:1, a hair over AA.
|
|
@@ -93,27 +93,27 @@
|
|
|
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 / .
|
|
97
|
-
--fertig-tb: light-dark(oklch(
|
|
96
|
+
--fertig-bd: light-dark(oklch(22% .02 260 / .10), oklch(95% .012 260 / .12));
|
|
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
|
|
100
100
|
as a filled control in its respective theme. */
|
|
101
101
|
--fertig-ac: light-dark(var(--fertig-blue-700), var(--fertig-blue-300)); /* yours */
|
|
102
102
|
--fertig-on-ac: light-dark(#f7f8fb, #07071c); /* off-white / ink text on the accent */
|
|
103
103
|
|
|
104
|
-
/* depth:
|
|
104
|
+
/* depth: a soft surface shadow and a broader overlay shadow.
|
|
105
105
|
--fertig-sh is an ordinary colour — override it with any notation you like, and
|
|
106
106
|
every shadow in the sheet retints. Lighter than a pure black so the shadows
|
|
107
107
|
read as diffuse atmosphere rather than dark bars. The alphas are taken with
|
|
108
108
|
color-mix against transparent rather than relative colour: same result, and
|
|
109
109
|
it is three years older, which keeps Safari 17.5 inside the floor. */
|
|
110
|
-
--fertig-sh: oklch(
|
|
111
|
-
--fertig-a1: .
|
|
110
|
+
--fertig-sh: oklch(24% .014 270);
|
|
111
|
+
--fertig-a1: .08; --fertig-a2: .10;
|
|
112
112
|
--fertig-sh1: color-mix(in srgb, var(--fertig-sh) calc(var(--fertig-a1) * 100%), transparent);
|
|
113
113
|
--fertig-sh2: color-mix(in srgb, var(--fertig-sh) calc(var(--fertig-a2) * 100%), transparent);
|
|
114
|
-
--fertig-up: 0 1px
|
|
115
|
-
--fertig-up2: 0
|
|
116
|
-
--fertig-dn:
|
|
114
|
+
--fertig-up: 0 1px 2px var(--fertig-sh1), 0 0 0 1px var(--fertig-bd);
|
|
115
|
+
--fertig-up2: 0 2px 4px var(--fertig-sh1), 0 12px 32px -12px var(--fertig-sh2);
|
|
116
|
+
--fertig-dn: var(--fertig-up);
|
|
117
117
|
--fertig-caps: .74em/1.4 var(--fertig-f);
|
|
118
118
|
|
|
119
119
|
/* motion. One decelerating curve for things arriving, one accelerating for
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
--fertig-dur-2: .2s; /* something appearing or leaving */
|
|
126
126
|
}
|
|
127
127
|
@media (prefers-color-scheme: dark) {
|
|
128
|
-
:root:not([data-theme=light]) { --fertig-a1: .
|
|
128
|
+
:root:not([data-theme=light]) { --fertig-a1: .34; --fertig-a2: .30 }
|
|
129
129
|
}
|
|
130
130
|
/* --fertig-on-ac has to survive any --fertig-ac override, or a custom accent ships an
|
|
131
131
|
unreadable label. contrast-color() does that properly but has almost no
|
|
@@ -139,8 +139,8 @@
|
|
|
139
139
|
@supports (color: contrast-color(red)) {
|
|
140
140
|
:root { --fertig-on-ac: color-mix(in oklab, contrast-color(var(--fertig-ac)) 96%, var(--fertig-ac)) }
|
|
141
141
|
}
|
|
142
|
-
[data-theme=light] { color-scheme: light; --fertig-a1: .
|
|
143
|
-
[data-theme=dark] { color-scheme: dark; --fertig-a1: .
|
|
142
|
+
[data-theme=light] { color-scheme: light; --fertig-a1: .08; --fertig-a2: .10 }
|
|
143
|
+
[data-theme=dark] { color-scheme: dark; --fertig-a1: .34; --fertig-a2: .30 }
|
|
144
144
|
|
|
145
145
|
/* Named accents. The ramps already exist, so this is a mapping table: put
|
|
146
146
|
data-accent on any element and everything inside it — links, focus rings,
|
|
@@ -173,14 +173,14 @@ body {
|
|
|
173
173
|
element's own corners, and setting one would reshape whatever takes focus —
|
|
174
174
|
a focused dialog would snap from --fertig-rw to --fertig-r for as long as it is focused. */
|
|
175
175
|
:focus-visible {
|
|
176
|
-
outline:
|
|
177
|
-
outline-offset:
|
|
176
|
+
outline: 2px solid color-mix(in srgb, var(--fertig-ac) 52%, transparent);
|
|
177
|
+
outline-offset: 2px;
|
|
178
178
|
}
|
|
179
179
|
img, video, iframe { display: block; max-width: 100%; height: auto }
|
|
180
180
|
/* svg is left inline: it is as often an icon inside a sentence or a button as
|
|
181
181
|
it is a standalone figure, and display:block drops the icon onto its own row */
|
|
182
182
|
svg { max-width: 100%; vertical-align: middle }
|
|
183
|
-
img, video { border-radius: var(--fertig-
|
|
183
|
+
img, video { border-radius: var(--fertig-rw); box-shadow: var(--fertig-up2) }
|
|
184
184
|
|
|
185
185
|
/* ---- layout: full-width page containers ---------------------- */
|
|
186
186
|
/* The shell is body's own children — or the children of the single wrapper a
|
|
@@ -195,7 +195,7 @@ body > :where(#root, #app, #__next, [data-fertig]) > * {
|
|
|
195
195
|
/* the wrapper is not itself a shell element; it just gets out of the way */
|
|
196
196
|
body > :where(#root, #app, #__next, [data-fertig]) { padding-inline: 0 }
|
|
197
197
|
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > :is(header, main, footer) {
|
|
198
|
-
background: var(--fertig-
|
|
198
|
+
background: var(--fertig-bg);
|
|
199
199
|
}
|
|
200
200
|
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > header { padding-block: 2.4rem .8rem }
|
|
201
201
|
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > main { padding-bottom: 2.8rem }
|
|
@@ -216,6 +216,7 @@ body > :where(#root, #app, #__next, [data-fertig]) { padding-inline: 0 }
|
|
|
216
216
|
padding-block: calc(.6rem + env(safe-area-inset-top, 0px)) .6rem;
|
|
217
217
|
background: var(--fertig-tb); color: var(--fertig-fg);
|
|
218
218
|
border-bottom: 1px solid var(--fertig-bd); font-size: .92em;
|
|
219
|
+
box-shadow: 0 1px 10px color-mix(in srgb, var(--fertig-sh) 4%, transparent);
|
|
219
220
|
}
|
|
220
221
|
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav a { color: var(--fertig-fg); text-decoration: none; opacity: .75 }
|
|
221
222
|
:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav a:hover { opacity: 1 }
|
|
@@ -328,16 +329,21 @@ pre code { background: none; border: 0; padding: 0; font-size: 1em }
|
|
|
328
329
|
:is(.hljs-addition, .token.inserted) { color: light-dark(#15803d, #7ee787) }
|
|
329
330
|
|
|
330
331
|
/* ---- table -------------------------------------------------- */
|
|
331
|
-
table { width: 100%; border-collapse:
|
|
332
|
+
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92em }
|
|
332
333
|
th, td {
|
|
333
334
|
border-bottom: 1px solid var(--fertig-bd); padding-block: .55rem;
|
|
334
335
|
padding-inline: 0 .7rem; text-align: start;
|
|
335
336
|
}
|
|
336
337
|
th:last-child, td:last-child { padding-inline-end: 0 }
|
|
337
338
|
thead th {
|
|
338
|
-
border-bottom:
|
|
339
|
+
border-bottom: 0; background: var(--fertig-face);
|
|
339
340
|
font: 700 var(--fertig-caps); text-transform: uppercase; letter-spacing: .09em; color: var(--fertig-mut);
|
|
340
|
-
padding
|
|
341
|
+
padding: .5rem .7rem;
|
|
342
|
+
}
|
|
343
|
+
thead th:first-child { border-start-start-radius: var(--fertig-r); border-end-start-radius: var(--fertig-r) }
|
|
344
|
+
thead th:last-child {
|
|
345
|
+
padding-inline-end: .7rem;
|
|
346
|
+
border-start-end-radius: var(--fertig-r); border-end-end-radius: var(--fertig-r);
|
|
341
347
|
}
|
|
342
348
|
tbody tr:last-child td { border-bottom: 0 }
|
|
343
349
|
/* a totals row is not just another row */
|
|
@@ -366,7 +372,7 @@ textarea { width: 100%; min-height: 5rem; resize: vertical }
|
|
|
366
372
|
input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),
|
|
367
373
|
select, textarea {
|
|
368
374
|
display: block; width: 100%; padding: .52em .7em; background: var(--fertig-el);
|
|
369
|
-
border: 1px solid
|
|
375
|
+
border: 1px solid transparent; border-radius: var(--fertig-r); box-shadow: var(--fertig-dn);
|
|
370
376
|
}
|
|
371
377
|
select {
|
|
372
378
|
appearance: none; padding-inline-end: 2.2rem;
|
|
@@ -423,8 +429,54 @@ select[multiple] { background-image: none; padding-inline-end: .6em }
|
|
|
423
429
|
@starting-style { select:open::picker(select) { opacity: 0; translate: 0 -4px } }
|
|
424
430
|
}
|
|
425
431
|
}
|
|
426
|
-
:is(input,select,textarea):hover:not(:disabled) {
|
|
427
|
-
:is(input,select,textarea):focus-visible { border-color: var(--fertig-ac) }
|
|
432
|
+
:is(input,select,textarea):hover:not(:disabled) { background-color: color-mix(in srgb, var(--fertig-face) 55%, var(--fertig-el)) }
|
|
433
|
+
:is(input,select,textarea):focus-visible { border-color: color-mix(in srgb, var(--fertig-ac) 55%, transparent) }
|
|
434
|
+
:is(input,select,textarea)[data-variant=secondary] {
|
|
435
|
+
background: var(--fertig-face); border-color: transparent; box-shadow: none;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/* A compound field keeps its label, control, help and error text together. */
|
|
439
|
+
[data-field] { display: grid; gap: .35rem; align-content: start }
|
|
440
|
+
[data-field] + [data-field] { margin-top: .9rem }
|
|
441
|
+
[data-field] > * { margin-block: 0 }
|
|
442
|
+
[data-field] > :is(small, [role=alert]) { font-size: .82em }
|
|
443
|
+
[data-field] > [role=alert] { color: light-dark(var(--fertig-red-700), var(--fertig-red-300)) }
|
|
444
|
+
[data-field]:has([aria-invalid=true]) > label { color: light-dark(var(--fertig-red-700), var(--fertig-red-300)) }
|
|
445
|
+
|
|
446
|
+
/* Input group: one focus surface around an input, addons and compact actions. */
|
|
447
|
+
[data-input-group] {
|
|
448
|
+
display: flex; align-items: center; inline-size: 100%; overflow: clip;
|
|
449
|
+
background: var(--fertig-el); border: 1px solid transparent;
|
|
450
|
+
border-radius: var(--fertig-r); box-shadow: var(--fertig-dn);
|
|
451
|
+
}
|
|
452
|
+
[data-input-group] > :is(input, select, textarea) {
|
|
453
|
+
flex: 1 1 auto; min-inline-size: 0; border: 0; border-radius: 0;
|
|
454
|
+
background-color: transparent; box-shadow: none; outline: 0;
|
|
455
|
+
}
|
|
456
|
+
[data-input-group] > :is(input, select, textarea):hover:not(:disabled) {
|
|
457
|
+
background-color: transparent;
|
|
458
|
+
}
|
|
459
|
+
[data-input-group] > :where(span, small, output) {
|
|
460
|
+
flex: none; padding-inline: .75em; color: var(--fertig-mut); white-space: nowrap;
|
|
461
|
+
}
|
|
462
|
+
[data-input-group] > button {
|
|
463
|
+
align-self: stretch; min-width: 0; border: 0; border-radius: 0;
|
|
464
|
+
background: transparent; box-shadow: none;
|
|
465
|
+
}
|
|
466
|
+
[data-input-group]:focus-within {
|
|
467
|
+
border-color: color-mix(in srgb, var(--fertig-ac) 55%, transparent);
|
|
468
|
+
box-shadow: var(--fertig-up), 0 0 0 3px color-mix(in srgb, var(--fertig-ac) 16%, transparent);
|
|
469
|
+
}
|
|
470
|
+
[data-input-group]:has([aria-invalid=true]) {
|
|
471
|
+
border-color: light-dark(var(--fertig-red-700), var(--fertig-red-300));
|
|
472
|
+
}
|
|
473
|
+
[data-input-group]:has(textarea) { align-items: end }
|
|
474
|
+
|
|
475
|
+
/* One native field keeps OTP autofill, paste and screen-reader behavior. */
|
|
476
|
+
input[data-otp] {
|
|
477
|
+
inline-size: min(100%, 16ch); font: 650 1.25rem/1.4 var(--fertig-fm);
|
|
478
|
+
letter-spacing: .55em; text-indent: .55em; text-align: center;
|
|
479
|
+
}
|
|
428
480
|
input[type=checkbox], input[type=radio] {
|
|
429
481
|
width: 1.15em; height: 1.15em; margin: 0; margin-inline-end: .45em; vertical-align: -.18em;
|
|
430
482
|
}
|
|
@@ -435,7 +487,7 @@ input[type=checkbox], input[type=radio] {
|
|
|
435
487
|
}
|
|
436
488
|
:is(input, textarea, [contenteditable]) { caret-color: var(--fertig-ac) }
|
|
437
489
|
label:has(input[type=checkbox]), label:has(input[type=radio]) { line-height: 1.9 }
|
|
438
|
-
input[type=range] { width: 100%; height: 1.15em }
|
|
490
|
+
input[type=range] { width: 100%; height: 1.15em; margin-inline: 0 }
|
|
439
491
|
::placeholder { color: var(--fertig-mut) }
|
|
440
492
|
@supports selector(::spelling-error) {
|
|
441
493
|
::spelling-error { text-decoration: wavy underline light-dark(#c0392b, #ff6b6b) }
|
|
@@ -456,8 +508,8 @@ input:autofill, input:autofill:hover, input:autofill:focus {
|
|
|
456
508
|
nostalgia — a legend keeps its magic placement under block, grid and flex
|
|
457
509
|
fieldsets alike, and floating it is still the only way out. */
|
|
458
510
|
fieldset {
|
|
459
|
-
border: 1px solid
|
|
460
|
-
background: var(--fertig-
|
|
511
|
+
border: 1px solid transparent; border-radius: var(--fertig-rw); padding: 1rem;
|
|
512
|
+
background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
461
513
|
}
|
|
462
514
|
fieldset:focus-within { border-color: color-mix(in srgb, var(--fertig-ac) 45%, var(--fertig-bd)) }
|
|
463
515
|
legend {
|
|
@@ -470,17 +522,19 @@ legend + * { clear: left }
|
|
|
470
522
|
button, [type=submit], [type=button], [type=reset],
|
|
471
523
|
:where(a.primary, a[role=button]), ::file-selector-button {
|
|
472
524
|
display: inline-block; text-decoration: none; text-align: center;
|
|
473
|
-
padding: .
|
|
474
|
-
border: 1px solid
|
|
475
|
-
font: inherit; min-width: 5rem;
|
|
525
|
+
padding: .5em 1.1em; background: var(--fertig-face); color: var(--fertig-fg); cursor: pointer;
|
|
526
|
+
border: 1px solid transparent; border-radius: var(--fertig-r); box-shadow: none;
|
|
527
|
+
font: inherit; font-weight: 550; min-width: 5rem;
|
|
528
|
+
}
|
|
529
|
+
: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) 7%, var(--fertig-face));
|
|
476
531
|
}
|
|
477
|
-
:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled) { background: var(--fertig-face) }
|
|
478
532
|
[type=submit], .primary { background: var(--fertig-ac); border-color: transparent; color: var(--fertig-on-ac) }
|
|
479
533
|
/* Filled controls must not keep their enabled accent after :disabled. This
|
|
480
534
|
follows the filled rule deliberately: equal-specificity declarations later
|
|
481
535
|
in the cascade restore the quiet control surface and muted text. */
|
|
482
536
|
:is(button,[type=submit],[type=button],[type=reset]):disabled {
|
|
483
|
-
background: var(--fertig-face); border-color:
|
|
537
|
+
background: var(--fertig-face); border-color: transparent; color: var(--fertig-mut);
|
|
484
538
|
}
|
|
485
539
|
/* The filled button lightens on hover. color-mix does that in oklab, which is
|
|
486
540
|
close enough and is Baseline; relative colour does it by adding to L
|
|
@@ -505,6 +559,16 @@ button[data-icon] { min-width: 0; padding: .38em .62em; line-height: 1 }
|
|
|
505
559
|
:is(button, a, input, select, label)[data-block] { display: block; width: 100%; min-width: 0 }
|
|
506
560
|
:is(button, a, input)[data-variant=ghost] { background: none; border-color: transparent; box-shadow: none }
|
|
507
561
|
:is(button, a, input)[data-variant=ghost]:hover:not(:disabled) { background: var(--fertig-face); border-color: var(--fertig-bd) }
|
|
562
|
+
:is(button, a, input)[data-variant=soft] {
|
|
563
|
+
background: color-mix(in srgb, var(--fertig-ac) 13%, var(--fertig-el));
|
|
564
|
+
border-color: transparent; box-shadow: none; color: var(--fertig-ac);
|
|
565
|
+
}
|
|
566
|
+
:is(button, a, input)[data-variant=soft]:hover:not(:disabled) {
|
|
567
|
+
background: color-mix(in srgb, var(--fertig-ac) 20%, var(--fertig-el));
|
|
568
|
+
}
|
|
569
|
+
:is(button, a, input)[data-variant=outline] {
|
|
570
|
+
background: transparent; border-color: var(--fertig-bd); box-shadow: none;
|
|
571
|
+
}
|
|
508
572
|
:is(button, a, input)[data-variant=link] {
|
|
509
573
|
background: none; border: 0; box-shadow: none; min-width: 0; padding-inline: .2em;
|
|
510
574
|
color: var(--fertig-ac); text-decoration: underline; text-underline-offset: 3px;
|
|
@@ -517,22 +581,22 @@ button[aria-pressed=true]:hover:not(:disabled) {
|
|
|
517
581
|
|
|
518
582
|
/* ---- disclosure / misc -------------------------------------- */
|
|
519
583
|
details {
|
|
520
|
-
border: 1px solid
|
|
521
|
-
padding: .
|
|
584
|
+
border: 1px solid transparent; border-radius: var(--fertig-rw);
|
|
585
|
+
padding: .8rem 1.1rem; background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
522
586
|
}
|
|
523
587
|
summary { cursor: pointer; font-weight: 700; list-style: none }
|
|
524
588
|
summary::before { content: "▸ "; color: var(--fertig-mut) }
|
|
525
589
|
details[open] > summary::before { content: "▾ " }
|
|
526
590
|
details[open] > summary { margin-bottom: .6rem }
|
|
527
591
|
dialog {
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
592
|
+
--fertig-dialog-inset: 1.25rem;
|
|
593
|
+
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid transparent;
|
|
594
|
+
border-radius: var(--fertig-rw); padding: var(--fertig-dialog-inset); max-width: min(30rem, 92dvw);
|
|
595
|
+
box-shadow: var(--fertig-up2), 0 28px 70px -24px color-mix(in srgb, var(--fertig-sh) 34%, transparent);
|
|
532
596
|
}
|
|
533
597
|
dialog > :last-child:not(footer) { margin-bottom: 0 }
|
|
534
598
|
dialog, [popover] { overscroll-behavior: contain }
|
|
535
|
-
dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh)
|
|
599
|
+
dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh) 42%, transparent) }
|
|
536
600
|
|
|
537
601
|
/* dialog anatomy: an optional header and footer, pinned while the body scrolls.
|
|
538
602
|
Sticky rather than a grid, because a classless sheet has no wrapper around
|
|
@@ -543,12 +607,13 @@ dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh) 32%, transpar
|
|
|
543
607
|
dialog:has(> :is(header, footer)) { max-block-size: min(44rem, 85dvh); overflow: auto }
|
|
544
608
|
dialog > :is(header, footer) {
|
|
545
609
|
position: sticky; z-index: 1;
|
|
546
|
-
margin-inline: -
|
|
610
|
+
margin-inline: calc(0rem - var(--fertig-dialog-inset));
|
|
547
611
|
background: var(--fertig-el); /* the dialog's own surface, so it reads as one sheet */
|
|
548
612
|
}
|
|
549
613
|
dialog > header {
|
|
550
|
-
inset-block-start:
|
|
551
|
-
|
|
614
|
+
inset-block-start: calc(0rem - var(--fertig-dialog-inset));
|
|
615
|
+
margin-block: calc(0rem - var(--fertig-dialog-inset)) .35rem;
|
|
616
|
+
padding: var(--fertig-dialog-inset) var(--fertig-dialog-inset) .5rem; font-weight: 700;
|
|
552
617
|
border-radius: var(--fertig-rw) var(--fertig-rw) 0 0;
|
|
553
618
|
}
|
|
554
619
|
/* The title carries the header's weight, so it needs no margins of its own,
|
|
@@ -562,8 +627,10 @@ dialog:is([open], :modal) > header > :is(h1, h2, h3, h4, p) {
|
|
|
562
627
|
line-height: 1.3; letter-spacing: -.01em;
|
|
563
628
|
}
|
|
564
629
|
dialog > footer {
|
|
565
|
-
inset-block-end:
|
|
566
|
-
|
|
630
|
+
inset-block-end: calc(0rem - var(--fertig-dialog-inset));
|
|
631
|
+
margin-block: 1.35rem calc(0rem - var(--fertig-dialog-inset));
|
|
632
|
+
padding: .5rem var(--fertig-dialog-inset) var(--fertig-dialog-inset);
|
|
633
|
+
border-radius: 0 0 var(--fertig-rw) var(--fertig-rw);
|
|
567
634
|
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
|
|
568
635
|
justify-content: flex-end; /* actions sit at the end edge */
|
|
569
636
|
}
|
|
@@ -608,9 +675,9 @@ dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto;
|
|
|
608
675
|
search { display: block; margin-block: 1.1rem } /* a landmark needs its own rhythm */
|
|
609
676
|
::target-text { background: color-mix(in srgb, var(--fertig-ac) 28%, transparent) }
|
|
610
677
|
aside {
|
|
611
|
-
border: 1px solid
|
|
612
|
-
border-radius: var(--fertig-rw);
|
|
613
|
-
background: var(--fertig-el); padding: .
|
|
678
|
+
border: 1px solid color-mix(in srgb, var(--fertig-ac) 18%, transparent);
|
|
679
|
+
border-radius: var(--fertig-rw);
|
|
680
|
+
background: color-mix(in srgb, var(--fertig-ac) 7%, var(--fertig-el)); padding: .8rem 1.1rem;
|
|
614
681
|
margin-block: 1.1rem; /* or the next block sits flush against it */
|
|
615
682
|
}
|
|
616
683
|
progress { width: 100%; height: .5rem; border: 0; border-radius: var(--fertig-rp); background: var(--fertig-face) }
|
|
@@ -642,53 +709,56 @@ progress::-moz-progress-bar { background: var(--fertig-ac); border-radius: var(-
|
|
|
642
709
|
The block axis is clipped rather than left to compute to auto alongside it:
|
|
643
710
|
Safari paints a vertical scrollbar for a sub-pixel of overflow, and the row
|
|
644
711
|
has no vertical overflow worth scrolling to in the first place. */
|
|
645
|
-
[role=group] {
|
|
646
|
-
|
|
647
|
-
|
|
712
|
+
[role=group] {
|
|
713
|
+
display: inline-flex; vertical-align: middle; max-inline-size: 100%; padding: .2rem;
|
|
714
|
+
overflow: auto clip; overscroll-behavior-x: contain;
|
|
715
|
+
border-radius: var(--fertig-rp); background: var(--fertig-face);
|
|
716
|
+
}
|
|
717
|
+
[role=group] > * { border: 0; border-radius: var(--fertig-rp); margin: 0; box-shadow: none; min-width: 0 }
|
|
648
718
|
/* The buttons fill the group exactly and the group clips on the block axis,
|
|
649
719
|
so an outset ring would be sliced off. Inside the edge, it is all there. */
|
|
650
720
|
[role=group] > :focus-visible { outline-offset: -3px }
|
|
651
|
-
[role=group] >
|
|
652
|
-
|
|
653
|
-
border-start-start-radius: var(--fertig-rp); border-end-start-radius: var(--fertig-rp);
|
|
654
|
-
}
|
|
655
|
-
[role=group] > :last-child {
|
|
656
|
-
border-start-end-radius: var(--fertig-rp); border-end-end-radius: var(--fertig-rp);
|
|
721
|
+
[role=group] > [aria-pressed=true] {
|
|
722
|
+
background: var(--fertig-el); color: var(--fertig-fg); font-weight: 650; box-shadow: var(--fertig-up);
|
|
657
723
|
}
|
|
658
|
-
[role=group] > [aria-pressed=true] { background: var(--fertig-face); color: var(--fertig-ac); font-weight: 700 }
|
|
659
724
|
/* The press nudge would push a button half a pixel past the scroll port and
|
|
660
725
|
flash a scrollbar, so joined buttons stay put and read the press by shadow. */
|
|
661
726
|
[role=group] > :active:not(:disabled) { translate: none }
|
|
662
727
|
|
|
663
728
|
/* tabs: <div role=tablist> of <button role=tab aria-selected> */
|
|
664
|
-
[role=tablist] {
|
|
729
|
+
[role=tablist] {
|
|
730
|
+
display: flex; gap: .15rem; max-inline-size: 100%; overflow-x: auto;
|
|
731
|
+
margin: 1.1rem 0; padding: .25rem; border: 0; border-radius: var(--fertig-rp);
|
|
732
|
+
background: var(--fertig-face); scrollbar-width: none;
|
|
733
|
+
}
|
|
734
|
+
[role=tablist]::-webkit-scrollbar { display: none }
|
|
665
735
|
[role=tab] {
|
|
666
|
-
background: none; border: 0; box-shadow: none; min-width: 0; color: var(--fertig-mut);
|
|
667
|
-
padding: .
|
|
736
|
+
flex: none; background: none; border: 0; box-shadow: none; min-width: 0; color: var(--fertig-mut);
|
|
737
|
+
padding: .4em .9em; border-radius: var(--fertig-rp); margin: 0;
|
|
668
738
|
}
|
|
669
739
|
[role=tab]:hover:not(:disabled) { background: var(--fertig-face); color: var(--fertig-fg) }
|
|
670
|
-
[role=tab][aria-selected=true] { color: var(--fertig-fg); box-shadow:
|
|
740
|
+
[role=tab][aria-selected=true] { background: var(--fertig-el); color: var(--fertig-fg); box-shadow: var(--fertig-up) }
|
|
671
741
|
|
|
672
742
|
/* switch: <input type=checkbox role=switch> */
|
|
673
743
|
input[type=checkbox][switch],
|
|
674
744
|
input[type=checkbox][role=switch] {
|
|
675
|
-
appearance: none; width: 2.
|
|
745
|
+
appearance: none; width: 2.5em; height: 1.45em; border-radius: var(--fertig-rp); border: 0;
|
|
676
746
|
background: color-mix(in srgb, var(--fertig-fg) 20%, transparent);
|
|
677
747
|
position: relative; cursor: pointer; vertical-align: -.3em; margin-inline-end: .5em;
|
|
678
748
|
}
|
|
679
749
|
input[switch]::after, input[role=switch]::after {
|
|
680
750
|
content: ""; position: absolute; inset-block-start: .14em; inset-inline-start: .14em;
|
|
681
|
-
width: 1.
|
|
751
|
+
width: 1.17em; height: 1.17em; border-radius: 50%; background: #fff; box-shadow: var(--fertig-up);
|
|
682
752
|
transition: translate .16s var(--fertig-ease-out);
|
|
683
753
|
}
|
|
684
754
|
input[switch]:checked, input[role=switch]:checked { background: var(--fertig-ac) }
|
|
685
755
|
/* translate is physical, so the knob is told which way to travel */
|
|
686
|
-
input[switch]:checked::after, input[role=switch]:checked::after { translate: .
|
|
687
|
-
:is(input[switch], input[role=switch]):checked:dir(rtl)::after { translate:
|
|
756
|
+
input[switch]:checked::after, input[role=switch]:checked::after { translate: 1.05em 0 }
|
|
757
|
+
:is(input[switch], input[role=switch]):checked:dir(rtl)::after { translate: -1.05em 0 }
|
|
688
758
|
|
|
689
759
|
/* menu: any [popover] */
|
|
690
760
|
[popover] {
|
|
691
|
-
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid
|
|
761
|
+
background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid transparent;
|
|
692
762
|
border-radius: var(--fertig-rw); padding: .35rem; min-width: 12rem;
|
|
693
763
|
max-block-size: 60dvh; overflow: auto; font-size: .95em;
|
|
694
764
|
box-shadow: var(--fertig-up2), 0 24px 44px -18px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
|
|
@@ -723,6 +793,22 @@ input[switch]:checked::after, input[role=switch]:checked::after { translate: .9e
|
|
|
723
793
|
[popover] :is(a, button):hover:not(:disabled) { background: var(--fertig-ac); color: var(--fertig-on-ac) }
|
|
724
794
|
[popover] hr { margin: .3rem 0 }
|
|
725
795
|
|
|
796
|
+
/* listbox: a selectable collection, whether standalone or inside a popover */
|
|
797
|
+
[role=listbox] {
|
|
798
|
+
list-style: none; margin: 1rem 0; padding: .35rem;
|
|
799
|
+
background: var(--fertig-el); border: 1px solid transparent;
|
|
800
|
+
border-radius: var(--fertig-rw); box-shadow: var(--fertig-up);
|
|
801
|
+
}
|
|
802
|
+
[role=option] {
|
|
803
|
+
display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem;
|
|
804
|
+
border-radius: var(--fertig-r); cursor: default;
|
|
805
|
+
}
|
|
806
|
+
[role=option]:is(:hover, :focus-visible) { background: var(--fertig-face) }
|
|
807
|
+
[role=option][aria-selected=true] {
|
|
808
|
+
background: color-mix(in srgb, var(--fertig-ac) 13%, var(--fertig-el)); color: var(--fertig-ac);
|
|
809
|
+
}
|
|
810
|
+
[popover] [role=listbox] { margin: 0; padding: 0; border: 0; box-shadow: none }
|
|
811
|
+
|
|
726
812
|
/* breadcrumbs: <nav aria-label="Breadcrumb"><ol> */
|
|
727
813
|
nav[aria-label] ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; padding: 0; font-size: .9em }
|
|
728
814
|
nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; color: var(--fertig-mut) }
|
|
@@ -787,6 +873,37 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
|
|
|
787
873
|
@keyframes fertig-shimmer { to { background-position: -200% 0 } }
|
|
788
874
|
}
|
|
789
875
|
|
|
876
|
+
/* surface: the same elevation language as a card, without card anatomy */
|
|
877
|
+
[data-surface] {
|
|
878
|
+
background: var(--fertig-el); border: 1px solid transparent;
|
|
879
|
+
border-radius: var(--fertig-rw); padding: 1rem; box-shadow: var(--fertig-up);
|
|
880
|
+
}
|
|
881
|
+
[data-surface=flat] { background: var(--fertig-face); box-shadow: none }
|
|
882
|
+
[data-surface=outline] { background: transparent; border-color: var(--fertig-bd); box-shadow: none }
|
|
883
|
+
[data-surface] > :first-child { margin-top: 0 }
|
|
884
|
+
[data-surface] > :last-child { margin-bottom: 0 }
|
|
885
|
+
|
|
886
|
+
/* item: avatar or icon, flexible content, and an optional trailing action */
|
|
887
|
+
[data-item] {
|
|
888
|
+
display: flex; align-items: center; gap: .8rem; min-inline-size: 0;
|
|
889
|
+
padding: .7rem .8rem; border-radius: var(--fertig-r); background: var(--fertig-el);
|
|
890
|
+
}
|
|
891
|
+
[data-item] + [data-item] { margin-top: .35rem }
|
|
892
|
+
[data-item] > :where(div, p) { flex: 1; min-inline-size: 0; margin: 0 }
|
|
893
|
+
[data-item] > :where(div, p) > * { display: block; margin-block: 0 }
|
|
894
|
+
:is(a, button)[data-item] {
|
|
895
|
+
inline-size: 100%; min-width: 0; text-align: start; color: inherit; text-decoration: none;
|
|
896
|
+
}
|
|
897
|
+
:is(a, button)[data-item]:hover:not(:disabled) { background: var(--fertig-face) }
|
|
898
|
+
|
|
899
|
+
/* empty: a deliberate endpoint rather than a lonely paragraph in a panel */
|
|
900
|
+
[data-empty] {
|
|
901
|
+
display: grid; justify-items: center; gap: .6rem; text-align: center;
|
|
902
|
+
padding: clamp(2rem, 7vw, 4rem); border: 1px dashed var(--fertig-bd);
|
|
903
|
+
border-radius: var(--fertig-rw); background: color-mix(in srgb, var(--fertig-face) 45%, transparent);
|
|
904
|
+
}
|
|
905
|
+
[data-empty] > * { max-inline-size: 32rem; margin-block: 0 }
|
|
906
|
+
|
|
790
907
|
/* sheet / drawer: the same <dialog>, docked to an edge.
|
|
791
908
|
Docked to a physical edge on purpose — "right" means the right edge of the
|
|
792
909
|
screen, not the end of the writing direction. inset is physical, so a drawer
|
|
@@ -794,7 +911,7 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
|
|
|
794
911
|
translate is physical for the same reason: 100% of the drawer's own inline
|
|
795
912
|
width moves it off the edge it came from. RTL readers still get the same
|
|
796
913
|
right/left drawer as anyone else; direction would make "right" ambiguous. */
|
|
797
|
-
dialog[data-side] { max-width: none; margin: 0; border-radius: 0
|
|
914
|
+
dialog[data-side] { max-width: none; margin: 0; border-radius: 0 }
|
|
798
915
|
dialog[data-side=right] {
|
|
799
916
|
inset: 0 0 0 auto; block-size: 100dvh; inline-size: min(28rem, 92dvw);
|
|
800
917
|
border-block: 0; border-inline-end: 0;
|
|
@@ -856,11 +973,12 @@ dialog[data-side=bottom] {
|
|
|
856
973
|
/* list group: a plain <menu> outside a popover is a bordered list */
|
|
857
974
|
menu {
|
|
858
975
|
list-style: none; padding: 0; margin: 1.1rem 0;
|
|
859
|
-
border: 1px solid
|
|
976
|
+
border: 1px solid transparent; border-radius: var(--fertig-rw);
|
|
977
|
+
background: var(--fertig-el); box-shadow: var(--fertig-up);
|
|
860
978
|
}
|
|
861
979
|
menu > li { padding: .55rem .85rem }
|
|
862
980
|
menu > li + li { border-top: 1px solid var(--fertig-bd) }
|
|
863
|
-
[popover] menu { border: 0; padding: 0; margin: 0; background: none }
|
|
981
|
+
[popover] menu { border: 0; padding: 0; margin: 0; background: none; box-shadow: none }
|
|
864
982
|
[popover] menu > li { padding: 0 }
|
|
865
983
|
[popover] menu > li + li { border-top: 0 }
|
|
866
984
|
|
|
@@ -926,7 +1044,7 @@ nav menu :is(a, button)[aria-current] {
|
|
|
926
1044
|
.grid + * { margin-top: 1.1rem }
|
|
927
1045
|
.card {
|
|
928
1046
|
container-type: inline-size; /* query it: @container (min-width: …) */
|
|
929
|
-
border: 1px solid
|
|
1047
|
+
border: 1px solid transparent; border-radius: var(--fertig-rw); padding: 1.1rem;
|
|
930
1048
|
background: var(--fertig-el); box-shadow: var(--fertig-up2);
|
|
931
1049
|
display: flex; flex-direction: column; /* so footers line up across a row */
|
|
932
1050
|
gap: .85rem; /* spacing is the container's job */
|
|
@@ -985,24 +1103,18 @@ nav menu :is(a, button)[aria-current] {
|
|
|
985
1103
|
.hidden { display: none }
|
|
986
1104
|
|
|
987
1105
|
.badge {
|
|
988
|
-
border:
|
|
989
|
-
padding: .
|
|
990
|
-
text-transform: uppercase; letter-spacing: .07em; /* a label, like h5/h6 and th */
|
|
1106
|
+
border: 0; border-radius: var(--fertig-rp); background: var(--fertig-face);
|
|
1107
|
+
padding: .18em .65em; font: 650 .78em/1.45 var(--fertig-f); color: var(--fertig-mut);
|
|
991
1108
|
}
|
|
992
1109
|
|
|
993
1110
|
/* card anatomy: an optional header, footer, and full-bleed media */
|
|
994
|
-
/*
|
|
995
|
-
|
|
996
|
-
hairline does the same separating job and lets the card read as one surface. */
|
|
997
|
-
.card > :is(header, footer) { margin-inline: -1.1rem; padding-inline: 1.1rem }
|
|
1111
|
+
/* Header and footer are spacing hooks, not banded sub-surfaces. */
|
|
1112
|
+
.card > :is(header, footer) { padding-inline: 0 }
|
|
998
1113
|
.card > header {
|
|
999
|
-
margin-top: -.
|
|
1000
|
-
border-bottom: 1px solid var(--fertig-bd);
|
|
1114
|
+
margin-top: -.1rem; font-weight: 650;
|
|
1001
1115
|
}
|
|
1002
1116
|
.card > footer {
|
|
1003
|
-
margin-top: auto; margin-bottom: -.
|
|
1004
|
-
color: var(--fertig-mut); font-size: .85em;
|
|
1005
|
-
border-top: 1px solid var(--fertig-bd);
|
|
1117
|
+
margin-top: auto; margin-bottom: -.1rem; color: var(--fertig-mut); font-size: .85em;
|
|
1006
1118
|
}
|
|
1007
1119
|
.card > :is(img, video):first-child {
|
|
1008
1120
|
align-self: stretch; width: auto; max-width: none; margin: -1.1rem -1.1rem 0;
|
|
@@ -1025,9 +1137,9 @@ nav menu :is(a, button)[aria-current] {
|
|
|
1025
1137
|
text-decoration: none; font: inherit;
|
|
1026
1138
|
}
|
|
1027
1139
|
:is(a, button).card:hover:not(:disabled) {
|
|
1028
|
-
border-color: color-mix(in srgb, var(--fertig-ac)
|
|
1140
|
+
border-color: color-mix(in srgb, var(--fertig-ac) 22%, var(--fertig-bd));
|
|
1029
1141
|
box-shadow: var(--fertig-up2), 0 16px 30px -16px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
|
|
1030
|
-
translate: 0 -
|
|
1142
|
+
translate: 0 -1px;
|
|
1031
1143
|
}
|
|
1032
1144
|
:is(a, button).card:active:not(:disabled) { translate: 0 0 }
|
|
1033
1145
|
|
|
@@ -1053,8 +1165,10 @@ meter { width: 100%; height: .5rem }
|
|
|
1053
1165
|
optgroup { font-weight: 700; color: var(--fertig-mut) }
|
|
1054
1166
|
::file-selector-button { margin-inline-end: .8em }
|
|
1055
1167
|
::file-selector-button:hover { background: var(--fertig-face) }
|
|
1056
|
-
input
|
|
1057
|
-
input:user-invalid
|
|
1168
|
+
:is(input,select,textarea)[aria-invalid=true],
|
|
1169
|
+
:is(input,textarea):user-invalid { border-color: light-dark(#c0392b, #ff6b6b) }
|
|
1170
|
+
:is(input,select,textarea)[aria-invalid=true] + small,
|
|
1171
|
+
:is(input,textarea):user-invalid + small { color: light-dark(#c0392b, #ff6b6b) }
|
|
1058
1172
|
summary:hover { color: var(--fertig-ac) }
|
|
1059
1173
|
/* thin, unobtrusive scrollbars */
|
|
1060
1174
|
/* scrollbar-width is Safari 18.2, scrollbar-color Safari 26.2 — both younger
|
|
@@ -1122,7 +1236,7 @@ summary:hover { color: var(--fertig-ac) }
|
|
|
1122
1236
|
@media (prefers-reduced-motion: no-preference) and (update: fast) {
|
|
1123
1237
|
a, button, input, select, textarea, summary, tr,
|
|
1124
1238
|
[type=submit], [type=button], [type=reset], .card, .badge,
|
|
1125
|
-
[role=tab], [role=group] > *, [popover] :is(a, button) {
|
|
1239
|
+
[role=tab], [role=option], [role=group] > *, [data-item], [popover] :is(a, button) {
|
|
1126
1240
|
transition: box-shadow var(--fertig-dur-1) var(--fertig-ease),
|
|
1127
1241
|
background-color var(--fertig-dur-1) var(--fertig-ease),
|
|
1128
1242
|
border-color var(--fertig-dur-1) var(--fertig-ease),
|
|
@@ -1145,20 +1259,20 @@ summary:hover { color: var(--fertig-ac) }
|
|
|
1145
1259
|
[data-tone] or [data-accent] element just inherits the one from :root. */
|
|
1146
1260
|
@supports not (color: light-dark(#000, #fff)) {
|
|
1147
1261
|
:root {
|
|
1148
|
-
--fertig-bg: #
|
|
1149
|
-
--fertig-mut: #525962; --fertig-bd: #
|
|
1262
|
+
--fertig-bg: #f4f6f9; --fertig-el: #fff; --fertig-face: #eceff4; --fertig-fg: #151b24;
|
|
1263
|
+
--fertig-mut: #525962; --fertig-bd: #151b241a; --fertig-tb: #fbfcfe;
|
|
1150
1264
|
--fertig-ac: #2850de; --fertig-on-ac: #f7f8fb;
|
|
1151
1265
|
}
|
|
1152
1266
|
@media (prefers-color-scheme: dark) {
|
|
1153
1267
|
:root:not([data-theme=light]) {
|
|
1154
|
-
--fertig-bg: #
|
|
1155
|
-
--fertig-mut: #9da5b1; --fertig-bd: #
|
|
1268
|
+
--fertig-bg: #0b0e14; --fertig-el: #151a22; --fertig-face: #202630; --fertig-fg: #eaeff7;
|
|
1269
|
+
--fertig-mut: #9da5b1; --fertig-bd: #eaeff71f; --fertig-tb: #131820;
|
|
1156
1270
|
--fertig-ac: #90b5ff; --fertig-on-ac: #07071c;
|
|
1157
1271
|
}
|
|
1158
1272
|
}
|
|
1159
1273
|
[data-theme=dark] {
|
|
1160
|
-
--fertig-bg: #
|
|
1161
|
-
--fertig-mut: #9da5b1; --fertig-bd: #
|
|
1274
|
+
--fertig-bg: #0b0e14; --fertig-el: #151a22; --fertig-face: #202630; --fertig-fg: #eaeff7;
|
|
1275
|
+
--fertig-mut: #9da5b1; --fertig-bd: #eaeff71f; --fertig-tb: #131820;
|
|
1162
1276
|
--fertig-ac: #90b5ff; --fertig-on-ac: #07071c;
|
|
1163
1277
|
}
|
|
1164
1278
|
}
|
|
@@ -1171,12 +1285,15 @@ summary:hover { color: var(--fertig-ac) }
|
|
|
1171
1285
|
@media (forced-colors: active) {
|
|
1172
1286
|
* { box-shadow: none }
|
|
1173
1287
|
button, [type=submit], [type=button], [type=reset], input, select, textarea,
|
|
1174
|
-
.card, .badge, details, dialog, [popover], fieldset, table
|
|
1288
|
+
.card, .badge, details, dialog, [popover], fieldset, table,
|
|
1289
|
+
[data-surface], [data-input-group], [data-empty], [data-item], [role=listbox] {
|
|
1175
1290
|
border: 1px solid CanvasText;
|
|
1176
1291
|
}
|
|
1177
|
-
/*
|
|
1178
|
-
|
|
1179
|
-
[role=tab][aria-selected=true]
|
|
1292
|
+
/* Selected pills rely on fill and shadow in ordinary colours. Give them a
|
|
1293
|
+
real system-colour edge when both disappear in High Contrast. */
|
|
1294
|
+
[role=tab][aria-selected=true], [role=option][aria-selected=true] {
|
|
1295
|
+
border: 2px solid Highlight;
|
|
1296
|
+
}
|
|
1180
1297
|
button[aria-pressed=true] { border-color: Highlight }
|
|
1181
1298
|
}
|
|
1182
1299
|
}
|
package/fertig.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! fertig v4.0.4 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.06}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.05}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--fertig-ac);caret-color:var(--fertig-ac);--fertig-f: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:8px;--fertig-rs:calc(var(--fertig-r) * .5);--fertig-rw:calc(var(--fertig-r) * 1.33);--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(93.5% .008 260),oklch(15.5% .014 260));--fertig-el:light-dark(oklch(99% .004 260),oklch(21% .016 260));--fertig-face:light-dark(oklch(97.2% .006 260),oklch(25% .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 / .13),oklch(95% .012 260 / .13));--fertig-tb:light-dark(oklch(97.2% .006 260),oklch(25% .018 260));--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-on-ac:light-dark(#f7f8fb,#07071c);--fertig-sh:oklch(30% .012 270);--fertig-a1:.06;--fertig-a2:.05;--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 1px var(--fertig-sh1);--fertig-up2:0 1px 1px var(--fertig-sh1),0 8px 22px -8px var(--fertig-sh2);--fertig-dn:inset 0 1px 2px color-mix(in srgb,var(--fertig-sh) 7%,transparent);--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:.42;--fertig-a2:.38}}@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:.06;--fertig-a2:.05}[data-theme=dark]{color-scheme:dark;--fertig-a1:.42;--fertig-a2:.38}[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:3px solid color-mix(in srgb,var(--fertig-ac) 45%,transparent);outline-offset:1px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--fertig-r);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-el);border-inline:1px solid var(--fertig-bd)}: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}: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:collapse;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:1px solid color-mix(in srgb,var(--fertig-fg) 45%,transparent);font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.09em;color:var(--fertig-mut);padding-bottom:.4rem}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 var(--fertig-bd);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){border-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--fertig-ac)}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}::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:.9rem 1rem 1rem;background:var(--fertig-face)}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:.48em 1.1em;background:var(--fertig-el);color:var(--fertig-fg);cursor:pointer;border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background: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:var(--fertig-bd);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=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 var(--fertig-bd);border-radius:var(--fertig-rw);padding:.7rem 1.1rem;background:var(--fertig-el)}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{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.6rem;max-width:min(30rem,92dvw);box-shadow:0 1px 1px color-mix(in srgb,var(--fertig-sh) 8%,transparent),0 28px 60px -22px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--fertig-sh) 32%,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:-1.6rem;background:var(--fertig-el)}dialog>header{inset-block-start:-1.6rem;margin-block:-1.6rem .35rem;padding:1.6rem 1.6rem .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:-1.6rem;margin-block:1.35rem -1.6rem;padding:.5rem 1.6rem 1.6rem;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 var(--fertig-bd);border-inline-start:3px solid var(--fertig-ac);border-radius:var(--fertig-rw);border-start-start-radius:0;border-end-start-radius:0;background:var(--fertig-el);padding:.7rem 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%;overflow:auto clip;overscroll-behavior-x:contain}[role=group]>*{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:focus-visible{outline-offset:-3px}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--fertig-rp);border-end-start-radius:var(--fertig-rp)}[role=group]>:last-child{border-start-end-radius:var(--fertig-rp);border-end-end-radius:var(--fertig-rp)}[role=group]>[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}[role=group]>:active:not(:disabled){translate:none}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--fertig-bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.45em .9em;border-radius:var(--fertig-r) var(--fertig-r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}[role=tab][aria-selected=true]{color:var(--fertig-fg);box-shadow:inset 0 -2px 0 var(--fertig-ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;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.02em;height:1.02em;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:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 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}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}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}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)}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}[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 var(--fertig-bd);border-radius:var(--fertig-rp);background:var(--fertig-face);padding:.1em .6em;font:700 var(--fertig-caps);color:var(--fertig-mut);text-transform:uppercase;letter-spacing:.07em}.card>:is(header,footer){margin-inline:-1.1rem;padding-inline:1.1rem}.card>header{margin-top:-.25rem;padding-bottom:.7rem;font-weight:600;border-bottom:1px solid var(--fertig-bd)}.card>footer{margin-top:auto;margin-bottom:-.25rem;padding-top:.7rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd)}.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) 45%,var(--fertig-bd));box-shadow:var(--fertig-up2),0 16px 30px -16px color-mix(in srgb,var(--fertig-sh) 28%,transparent);translate:0 -2px}: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)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input: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=group]>*,[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:#e6eaef;--fertig-el:#fafcfe;--fertig-face:#f3f6fa;--fertig-fg:#151b24;--fertig-mut:#525962;--fertig-bd:#151b2421;--fertig-tb:#f3f6fa;--fertig-ac:#2850de;--fertig-on-ac:#f7f8fb}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-bg:#090c12;--fertig-el:#141920;--fertig-face:#1c222a;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff721;--fertig-tb:#1c222a;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}[data-theme=dark]{--fertig-bg:#090c12;--fertig-el:#141920;--fertig-face:#1c222a;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff721;--fertig-tb:#1c222a;--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{border:1px solid CanvasText}[role=tab][aria-selected=true]{border-bottom:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}
|
|
1
|
+
/*! fertig v4.0.7 — 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)}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:0;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}}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fertig",
|
|
3
|
-
"version": "4.0.
|
|
4
|
-
"description": "A classless CSS stylesheet with no legacy
|
|
3
|
+
"version": "4.0.7",
|
|
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",
|
|
7
7
|
"fertig.css",
|
|
@@ -61,16 +61,17 @@
|
|
|
61
61
|
"test": "node --test",
|
|
62
62
|
"build": "node build.js",
|
|
63
63
|
"check": "npm run check:release && npm run check:sizes && npm test && npm run check:site && npm run check:package",
|
|
64
|
-
"check:release": "node tools/check-release.js",
|
|
64
|
+
"check:release": "node tools/sync-release.js --check && node tools/check-release.js",
|
|
65
65
|
"check:sizes": "python3 tools/sizes.py --check",
|
|
66
66
|
"check:site": "npm run site && node tools/check-site.js",
|
|
67
67
|
"check:package": "npm pack --dry-run --ignore-scripts",
|
|
68
68
|
"hooks:install": "git config core.hooksPath .githooks",
|
|
69
|
+
"release:sync": "node tools/sync-release.js",
|
|
69
70
|
"site:prepare": "node tools/prepare-site.mjs",
|
|
70
71
|
"site": "npm run site:prepare && astro build",
|
|
71
72
|
"site:serve": "npm run site:prepare && astro dev",
|
|
72
73
|
"dev": "npm run site:serve",
|
|
73
|
-
"prepublishOnly": "node build.js",
|
|
74
|
+
"prepublishOnly": "node build.js && npm run check:release && npm run check:sizes",
|
|
74
75
|
"sizes": "python3 tools/sizes.py"
|
|
75
76
|
},
|
|
76
77
|
"devDependencies": {
|