fertig 4.0.4 → 4.0.8

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.
Files changed (4) hide show
  1. package/README.md +4 -3
  2. package/fertig.css +230 -106
  3. package/fertig.min.css +1 -1
  4. 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
- **36.7 KB raw · 8.6 KB gzipped · no build step · no dependencies · no JavaScript.**
10
+ **41.2 KB raw · 9.4 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, tables, cards, alerts, tabs, menus, dialogs, drawers,
36
- toasts, tooltips, skeletons, and more
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.4 — a classless CSS stylesheet. MIT */
1
+ /*! fertig v4.0.8 — 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: opaque surfaces, hairlines, restrained
6
- corners and a visible accent focus ring.
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: .06 }
13
- @property --fertig-a2 { syntax: "<number>"; inherits: true; initial-value: .05 }
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: 8px; /* control radius: fields, buttons, menu rows */
46
- --fertig-rs: calc(var(--fertig-r) * .5); /* small: inline chips and code */
47
- --fertig-rw: calc(var(--fertig-r) * 1.33); /* large: cards, dialogs, menus */
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(93.5% .008 260), oklch(15.5% .014 260)); /* page ground */
87
- --fertig-el: light-dark(oklch(99% .004 260), oklch(21% .016 260)); /* content surface */
88
- --fertig-face:light-dark(oklch(97.2% .006 260), oklch(25% .018 260)); /* controls */
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 / .13), oklch(95% .012 260 / .13));
97
- --fertig-tb: light-dark(oklch(97.2% .006 260), oklch(25% .018 260));
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: hairline + compact shadow.
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(30% .012 270);
111
- --fertig-a1: .06; --fertig-a2: .05;
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 1px var(--fertig-sh1);
115
- --fertig-up2: 0 1px 1px var(--fertig-sh1), 0 8px 22px -8px var(--fertig-sh2);
116
- --fertig-dn: inset 0 1px 2px color-mix(in srgb, var(--fertig-sh) 7%, transparent);
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: .42; --fertig-a2: .38 }
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: .06; --fertig-a2: .05 }
143
- [data-theme=dark] { color-scheme: dark; --fertig-a1: .42; --fertig-a2: .38 }
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: 3px solid color-mix(in srgb, var(--fertig-ac) 45%, transparent);
177
- outline-offset: 1px;
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-r); box-shadow: var(--fertig-up2) }
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-el); border-inline: 1px solid var(--fertig-bd);
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: collapse; font-size: .92em }
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: 1px solid color-mix(in srgb, var(--fertig-fg) 45%, transparent);
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-bottom: .4rem;
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 var(--fertig-bd); border-radius: var(--fertig-r); box-shadow: var(--fertig-dn);
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) { border-color: color-mix(in srgb, var(--fertig-fg) 25%, transparent) }
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 var(--fertig-bd); border-radius: var(--fertig-rw); padding: .9rem 1rem 1rem;
460
- background: var(--fertig-face);
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: .48em 1.1em; background: var(--fertig-el); color: var(--fertig-fg); cursor: pointer;
474
- border: 1px solid var(--fertig-bd); border-radius: var(--fertig-r);
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: var(--fertig-bd); color: var(--fertig-mut);
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,29 @@ button[aria-pressed=true]:hover:not(:disabled) {
517
581
 
518
582
  /* ---- disclosure / misc -------------------------------------- */
519
583
  details {
520
- border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw);
521
- padding: .7rem 1.1rem; background: var(--fertig-el);
584
+ border: 1px solid transparent; border-radius: var(--fertig-rw);
585
+ padding: .8rem 1.1rem; background: var(--fertig-el); box-shadow: var(--fertig-up);
586
+ }
587
+ /* A disclosure inside a surface that is already a panel -- a table cell or a
588
+ dialog -- is a control, not a panel of its own: it should not repeat the
589
+ background, the shadow or the padding, and it must not set the height of the
590
+ row it sits in. */
591
+ :is(td, th, dialog) details {
592
+ border: 0; border-radius: 0; padding: 0; margin: 0; background: none; box-shadow: none;
522
593
  }
523
594
  summary { cursor: pointer; font-weight: 700; list-style: none }
524
595
  summary::before { content: "▸ "; color: var(--fertig-mut) }
525
596
  details[open] > summary::before { content: "▾ " }
526
597
  details[open] > summary { margin-bottom: .6rem }
527
598
  dialog {
528
- background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid var(--fertig-bd);
529
- border-radius: var(--fertig-rw); padding: 1.6rem; max-width: min(30rem, 92dvw);
530
- box-shadow: 0 1px 1px color-mix(in srgb, var(--fertig-sh) 8%, transparent),
531
- 0 28px 60px -22px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
599
+ --fertig-dialog-inset: 1.25rem;
600
+ background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid transparent;
601
+ border-radius: var(--fertig-rw); padding: var(--fertig-dialog-inset); max-width: min(30rem, 92dvw);
602
+ box-shadow: var(--fertig-up2), 0 28px 70px -24px color-mix(in srgb, var(--fertig-sh) 34%, transparent);
532
603
  }
533
604
  dialog > :last-child:not(footer) { margin-bottom: 0 }
534
605
  dialog, [popover] { overscroll-behavior: contain }
535
- dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh) 32%, transparent) }
606
+ dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh) 42%, transparent) }
536
607
 
537
608
  /* dialog anatomy: an optional header and footer, pinned while the body scrolls.
538
609
  Sticky rather than a grid, because a classless sheet has no wrapper around
@@ -543,12 +614,13 @@ dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh) 32%, transpar
543
614
  dialog:has(> :is(header, footer)) { max-block-size: min(44rem, 85dvh); overflow: auto }
544
615
  dialog > :is(header, footer) {
545
616
  position: sticky; z-index: 1;
546
- margin-inline: -1.6rem;
617
+ margin-inline: calc(0rem - var(--fertig-dialog-inset));
547
618
  background: var(--fertig-el); /* the dialog's own surface, so it reads as one sheet */
548
619
  }
549
620
  dialog > header {
550
- inset-block-start: -1.6rem; margin-block: -1.6rem .35rem;
551
- padding: 1.6rem 1.6rem .5rem; font-weight: 700;
621
+ inset-block-start: calc(0rem - var(--fertig-dialog-inset));
622
+ margin-block: calc(0rem - var(--fertig-dialog-inset)) .35rem;
623
+ padding: var(--fertig-dialog-inset) var(--fertig-dialog-inset) .5rem; font-weight: 700;
552
624
  border-radius: var(--fertig-rw) var(--fertig-rw) 0 0;
553
625
  }
554
626
  /* The title carries the header's weight, so it needs no margins of its own,
@@ -562,8 +634,10 @@ dialog:is([open], :modal) > header > :is(h1, h2, h3, h4, p) {
562
634
  line-height: 1.3; letter-spacing: -.01em;
563
635
  }
564
636
  dialog > footer {
565
- inset-block-end: -1.6rem; margin-block: 1.35rem -1.6rem;
566
- padding: .5rem 1.6rem 1.6rem; border-radius: 0 0 var(--fertig-rw) var(--fertig-rw);
637
+ inset-block-end: calc(0rem - var(--fertig-dialog-inset));
638
+ margin-block: 1.35rem calc(0rem - var(--fertig-dialog-inset));
639
+ padding: .5rem var(--fertig-dialog-inset) var(--fertig-dialog-inset);
640
+ border-radius: 0 0 var(--fertig-rw) var(--fertig-rw);
567
641
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
568
642
  justify-content: flex-end; /* actions sit at the end edge */
569
643
  }
@@ -608,9 +682,9 @@ dialog > footer > :is(p, span):first-child { margin: 0; margin-inline-end: auto;
608
682
  search { display: block; margin-block: 1.1rem } /* a landmark needs its own rhythm */
609
683
  ::target-text { background: color-mix(in srgb, var(--fertig-ac) 28%, transparent) }
610
684
  aside {
611
- border: 1px solid var(--fertig-bd); border-inline-start: 3px solid var(--fertig-ac);
612
- border-radius: var(--fertig-rw); border-start-start-radius: 0; border-end-start-radius: 0;
613
- background: var(--fertig-el); padding: .7rem 1.1rem;
685
+ border: 1px solid color-mix(in srgb, var(--fertig-ac) 18%, transparent);
686
+ border-radius: var(--fertig-rw);
687
+ background: color-mix(in srgb, var(--fertig-ac) 7%, var(--fertig-el)); padding: .8rem 1.1rem;
614
688
  margin-block: 1.1rem; /* or the next block sits flush against it */
615
689
  }
616
690
  progress { width: 100%; height: .5rem; border: 0; border-radius: var(--fertig-rp); background: var(--fertig-face) }
@@ -642,53 +716,56 @@ progress::-moz-progress-bar { background: var(--fertig-ac); border-radius: var(-
642
716
  The block axis is clipped rather than left to compute to auto alongside it:
643
717
  Safari paints a vertical scrollbar for a sub-pixel of overflow, and the row
644
718
  has no vertical overflow worth scrolling to in the first place. */
645
- [role=group] { display: inline-flex; vertical-align: middle; max-inline-size: 100%;
646
- overflow: auto clip; overscroll-behavior-x: contain }
647
- [role=group] > * { border-radius: 0; margin-inline-start: -1px; box-shadow: none; min-width: 0 }
719
+ [role=group] {
720
+ display: inline-flex; vertical-align: middle; max-inline-size: 100%; padding: .2rem;
721
+ overflow: auto clip; overscroll-behavior-x: contain;
722
+ border-radius: var(--fertig-rp); background: var(--fertig-face);
723
+ }
724
+ [role=group] > * { border: 0; border-radius: var(--fertig-rp); margin: 0; box-shadow: none; min-width: 0 }
648
725
  /* The buttons fill the group exactly and the group clips on the block axis,
649
726
  so an outset ring would be sliced off. Inside the edge, it is all there. */
650
727
  [role=group] > :focus-visible { outline-offset: -3px }
651
- [role=group] > :first-child {
652
- margin-inline-start: 0;
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);
728
+ [role=group] > [aria-pressed=true] {
729
+ background: var(--fertig-el); color: var(--fertig-fg); font-weight: 650; box-shadow: var(--fertig-up);
657
730
  }
658
- [role=group] > [aria-pressed=true] { background: var(--fertig-face); color: var(--fertig-ac); font-weight: 700 }
659
731
  /* The press nudge would push a button half a pixel past the scroll port and
660
732
  flash a scrollbar, so joined buttons stay put and read the press by shadow. */
661
733
  [role=group] > :active:not(:disabled) { translate: none }
662
734
 
663
735
  /* tabs: <div role=tablist> of <button role=tab aria-selected> */
664
- [role=tablist] { display: flex; gap: .1rem; border-bottom: 1px solid var(--fertig-bd); margin: 1.1rem 0 }
736
+ [role=tablist] {
737
+ display: flex; gap: .15rem; max-inline-size: 100%; overflow-x: auto;
738
+ margin: 1.1rem 0; padding: .25rem; border: 0; border-radius: var(--fertig-rp);
739
+ background: var(--fertig-face); scrollbar-width: none;
740
+ }
741
+ [role=tablist]::-webkit-scrollbar { display: none }
665
742
  [role=tab] {
666
- background: none; border: 0; box-shadow: none; min-width: 0; color: var(--fertig-mut);
667
- padding: .45em .9em; border-radius: var(--fertig-r) var(--fertig-r) 0 0; margin-bottom: -1px;
743
+ flex: none; background: none; border: 0; box-shadow: none; min-width: 0; color: var(--fertig-mut);
744
+ padding: .4em .9em; border-radius: var(--fertig-rp); margin: 0;
668
745
  }
669
746
  [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: inset 0 -2px 0 var(--fertig-ac) }
747
+ [role=tab][aria-selected=true] { background: var(--fertig-el); color: var(--fertig-fg); box-shadow: var(--fertig-up) }
671
748
 
672
749
  /* switch: <input type=checkbox role=switch> */
673
750
  input[type=checkbox][switch],
674
751
  input[type=checkbox][role=switch] {
675
- appearance: none; width: 2.2em; height: 1.3em; border-radius: var(--fertig-rp); border: 0;
752
+ appearance: none; width: 2.5em; height: 1.45em; border-radius: var(--fertig-rp); border: 0;
676
753
  background: color-mix(in srgb, var(--fertig-fg) 20%, transparent);
677
754
  position: relative; cursor: pointer; vertical-align: -.3em; margin-inline-end: .5em;
678
755
  }
679
756
  input[switch]::after, input[role=switch]::after {
680
757
  content: ""; position: absolute; inset-block-start: .14em; inset-inline-start: .14em;
681
- width: 1.02em; height: 1.02em; border-radius: 50%; background: #fff; box-shadow: var(--fertig-up);
758
+ width: 1.17em; height: 1.17em; border-radius: 50%; background: #fff; box-shadow: var(--fertig-up);
682
759
  transition: translate .16s var(--fertig-ease-out);
683
760
  }
684
761
  input[switch]:checked, input[role=switch]:checked { background: var(--fertig-ac) }
685
762
  /* translate is physical, so the knob is told which way to travel */
686
- input[switch]:checked::after, input[role=switch]:checked::after { translate: .9em 0 }
687
- :is(input[switch], input[role=switch]):checked:dir(rtl)::after { translate: -.9em 0 }
763
+ input[switch]:checked::after, input[role=switch]:checked::after { translate: 1.05em 0 }
764
+ :is(input[switch], input[role=switch]):checked:dir(rtl)::after { translate: -1.05em 0 }
688
765
 
689
766
  /* menu: any [popover] */
690
767
  [popover] {
691
- background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid var(--fertig-bd);
768
+ background: var(--fertig-el); color: var(--fertig-fg); border: 1px solid transparent;
692
769
  border-radius: var(--fertig-rw); padding: .35rem; min-width: 12rem;
693
770
  max-block-size: 60dvh; overflow: auto; font-size: .95em;
694
771
  box-shadow: var(--fertig-up2), 0 24px 44px -18px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
@@ -723,6 +800,22 @@ input[switch]:checked::after, input[role=switch]:checked::after { translate: .9e
723
800
  [popover] :is(a, button):hover:not(:disabled) { background: var(--fertig-ac); color: var(--fertig-on-ac) }
724
801
  [popover] hr { margin: .3rem 0 }
725
802
 
803
+ /* listbox: a selectable collection, whether standalone or inside a popover */
804
+ [role=listbox] {
805
+ list-style: none; margin: 1rem 0; padding: .35rem;
806
+ background: var(--fertig-el); border: 1px solid transparent;
807
+ border-radius: var(--fertig-rw); box-shadow: var(--fertig-up);
808
+ }
809
+ [role=option] {
810
+ display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem;
811
+ border-radius: var(--fertig-r); cursor: default;
812
+ }
813
+ [role=option]:is(:hover, :focus-visible) { background: var(--fertig-face) }
814
+ [role=option][aria-selected=true] {
815
+ background: color-mix(in srgb, var(--fertig-ac) 13%, var(--fertig-el)); color: var(--fertig-ac);
816
+ }
817
+ [popover] [role=listbox] { margin: 0; padding: 0; border: 0; box-shadow: none }
818
+
726
819
  /* breadcrumbs: <nav aria-label="Breadcrumb"><ol> */
727
820
  nav[aria-label] ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; padding: 0; font-size: .9em }
728
821
  nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; color: var(--fertig-mut) }
@@ -787,6 +880,37 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
787
880
  @keyframes fertig-shimmer { to { background-position: -200% 0 } }
788
881
  }
789
882
 
883
+ /* surface: the same elevation language as a card, without card anatomy */
884
+ [data-surface] {
885
+ background: var(--fertig-el); border: 1px solid transparent;
886
+ border-radius: var(--fertig-rw); padding: 1rem; box-shadow: var(--fertig-up);
887
+ }
888
+ [data-surface=flat] { background: var(--fertig-face); box-shadow: none }
889
+ [data-surface=outline] { background: transparent; border-color: var(--fertig-bd); box-shadow: none }
890
+ [data-surface] > :first-child { margin-top: 0 }
891
+ [data-surface] > :last-child { margin-bottom: 0 }
892
+
893
+ /* item: avatar or icon, flexible content, and an optional trailing action */
894
+ [data-item] {
895
+ display: flex; align-items: center; gap: .8rem; min-inline-size: 0;
896
+ padding: .7rem .8rem; border-radius: var(--fertig-r); background: var(--fertig-el);
897
+ }
898
+ [data-item] + [data-item] { margin-top: .35rem }
899
+ [data-item] > :where(div, p) { flex: 1; min-inline-size: 0; margin: 0 }
900
+ [data-item] > :where(div, p) > * { display: block; margin-block: 0 }
901
+ :is(a, button)[data-item] {
902
+ inline-size: 100%; min-width: 0; text-align: start; color: inherit; text-decoration: none;
903
+ }
904
+ :is(a, button)[data-item]:hover:not(:disabled) { background: var(--fertig-face) }
905
+
906
+ /* empty: a deliberate endpoint rather than a lonely paragraph in a panel */
907
+ [data-empty] {
908
+ display: grid; justify-items: center; gap: .6rem; text-align: center;
909
+ padding: clamp(2rem, 7vw, 4rem); border: 1px dashed var(--fertig-bd);
910
+ border-radius: var(--fertig-rw); background: color-mix(in srgb, var(--fertig-face) 45%, transparent);
911
+ }
912
+ [data-empty] > * { max-inline-size: 32rem; margin-block: 0 }
913
+
790
914
  /* sheet / drawer: the same <dialog>, docked to an edge.
791
915
  Docked to a physical edge on purpose — "right" means the right edge of the
792
916
  screen, not the end of the writing direction. inset is physical, so a drawer
@@ -794,7 +918,7 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
794
918
  translate is physical for the same reason: 100% of the drawer's own inline
795
919
  width moves it off the edge it came from. RTL readers still get the same
796
920
  right/left drawer as anyone else; direction would make "right" ambiguous. */
797
- dialog[data-side] { max-width: none; margin: 0; border-radius: 0; padding: 1.4rem }
921
+ dialog[data-side] { max-width: none; margin: 0; border-radius: 0 }
798
922
  dialog[data-side=right] {
799
923
  inset: 0 0 0 auto; block-size: 100dvh; inline-size: min(28rem, 92dvw);
800
924
  border-block: 0; border-inline-end: 0;
@@ -856,11 +980,12 @@ dialog[data-side=bottom] {
856
980
  /* list group: a plain <menu> outside a popover is a bordered list */
857
981
  menu {
858
982
  list-style: none; padding: 0; margin: 1.1rem 0;
859
- border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); background: var(--fertig-el);
983
+ border: 1px solid transparent; border-radius: var(--fertig-rw);
984
+ background: var(--fertig-el); box-shadow: var(--fertig-up);
860
985
  }
861
986
  menu > li { padding: .55rem .85rem }
862
987
  menu > li + li { border-top: 1px solid var(--fertig-bd) }
863
- [popover] menu { border: 0; padding: 0; margin: 0; background: none }
988
+ [popover] menu { border: 0; padding: 0; margin: 0; background: none; box-shadow: none }
864
989
  [popover] menu > li { padding: 0 }
865
990
  [popover] menu > li + li { border-top: 0 }
866
991
 
@@ -926,7 +1051,7 @@ nav menu :is(a, button)[aria-current] {
926
1051
  .grid + * { margin-top: 1.1rem }
927
1052
  .card {
928
1053
  container-type: inline-size; /* query it: @container (min-width: …) */
929
- border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw); padding: 1.1rem;
1054
+ border: 1px solid transparent; border-radius: var(--fertig-rw); padding: 1.1rem;
930
1055
  background: var(--fertig-el); box-shadow: var(--fertig-up2);
931
1056
  display: flex; flex-direction: column; /* so footers line up across a row */
932
1057
  gap: .85rem; /* spacing is the container's job */
@@ -985,24 +1110,18 @@ nav menu :is(a, button)[aria-current] {
985
1110
  .hidden { display: none }
986
1111
 
987
1112
  .badge {
988
- border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rp); background: var(--fertig-face);
989
- padding: .1em .6em; font: 700 var(--fertig-caps); color: var(--fertig-mut);
990
- text-transform: uppercase; letter-spacing: .07em; /* a label, like h5/h6 and th */
1113
+ border: 0; border-radius: var(--fertig-rp); background: var(--fertig-face);
1114
+ padding: .18em .65em; font: 650 .78em/1.45 var(--fertig-f); color: var(--fertig-mut);
991
1115
  }
992
1116
 
993
1117
  /* card anatomy: an optional header, footer, and full-bleed media */
994
- /* No fill on the header and footer. A tinted strip across the top of a card is
995
- the old panel-heading pattern and it is what dates a sheet on sight; a
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 }
1118
+ /* Header and footer are spacing hooks, not banded sub-surfaces. */
1119
+ .card > :is(header, footer) { padding-inline: 0 }
998
1120
  .card > header {
999
- margin-top: -.25rem; padding-bottom: .7rem; font-weight: 600;
1000
- border-bottom: 1px solid var(--fertig-bd);
1121
+ margin-top: -.1rem; font-weight: 650;
1001
1122
  }
1002
1123
  .card > footer {
1003
- margin-top: auto; margin-bottom: -.25rem; padding-top: .7rem;
1004
- color: var(--fertig-mut); font-size: .85em;
1005
- border-top: 1px solid var(--fertig-bd);
1124
+ margin-top: auto; margin-bottom: -.1rem; color: var(--fertig-mut); font-size: .85em;
1006
1125
  }
1007
1126
  .card > :is(img, video):first-child {
1008
1127
  align-self: stretch; width: auto; max-width: none; margin: -1.1rem -1.1rem 0;
@@ -1025,9 +1144,9 @@ nav menu :is(a, button)[aria-current] {
1025
1144
  text-decoration: none; font: inherit;
1026
1145
  }
1027
1146
  :is(a, button).card:hover:not(:disabled) {
1028
- border-color: color-mix(in srgb, var(--fertig-ac) 45%, var(--fertig-bd));
1147
+ border-color: color-mix(in srgb, var(--fertig-ac) 22%, var(--fertig-bd));
1029
1148
  box-shadow: var(--fertig-up2), 0 16px 30px -16px color-mix(in srgb, var(--fertig-sh) 28%, transparent);
1030
- translate: 0 -2px;
1149
+ translate: 0 -1px;
1031
1150
  }
1032
1151
  :is(a, button).card:active:not(:disabled) { translate: 0 0 }
1033
1152
 
@@ -1053,8 +1172,10 @@ meter { width: 100%; height: .5rem }
1053
1172
  optgroup { font-weight: 700; color: var(--fertig-mut) }
1054
1173
  ::file-selector-button { margin-inline-end: .8em }
1055
1174
  ::file-selector-button:hover { background: var(--fertig-face) }
1056
- input:user-invalid, textarea:user-invalid { border-color: light-dark(#c0392b, #ff6b6b) }
1057
- input:user-invalid + small { color: light-dark(#c0392b, #ff6b6b) }
1175
+ :is(input,select,textarea)[aria-invalid=true],
1176
+ :is(input,textarea):user-invalid { border-color: light-dark(#c0392b, #ff6b6b) }
1177
+ :is(input,select,textarea)[aria-invalid=true] + small,
1178
+ :is(input,textarea):user-invalid + small { color: light-dark(#c0392b, #ff6b6b) }
1058
1179
  summary:hover { color: var(--fertig-ac) }
1059
1180
  /* thin, unobtrusive scrollbars */
1060
1181
  /* scrollbar-width is Safari 18.2, scrollbar-color Safari 26.2 — both younger
@@ -1122,7 +1243,7 @@ summary:hover { color: var(--fertig-ac) }
1122
1243
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
1123
1244
  a, button, input, select, textarea, summary, tr,
1124
1245
  [type=submit], [type=button], [type=reset], .card, .badge,
1125
- [role=tab], [role=group] > *, [popover] :is(a, button) {
1246
+ [role=tab], [role=option], [role=group] > *, [data-item], [popover] :is(a, button) {
1126
1247
  transition: box-shadow var(--fertig-dur-1) var(--fertig-ease),
1127
1248
  background-color var(--fertig-dur-1) var(--fertig-ease),
1128
1249
  border-color var(--fertig-dur-1) var(--fertig-ease),
@@ -1145,20 +1266,20 @@ summary:hover { color: var(--fertig-ac) }
1145
1266
  [data-tone] or [data-accent] element just inherits the one from :root. */
1146
1267
  @supports not (color: light-dark(#000, #fff)) {
1147
1268
  :root {
1148
- --fertig-bg: #e6eaef; --fertig-el: #fafcfe; --fertig-face: #f3f6fa; --fertig-fg: #151b24;
1149
- --fertig-mut: #525962; --fertig-bd: #151b2421; --fertig-tb: #f3f6fa;
1269
+ --fertig-bg: #f4f6f9; --fertig-el: #fff; --fertig-face: #eceff4; --fertig-fg: #151b24;
1270
+ --fertig-mut: #525962; --fertig-bd: #151b241a; --fertig-tb: #fbfcfe;
1150
1271
  --fertig-ac: #2850de; --fertig-on-ac: #f7f8fb;
1151
1272
  }
1152
1273
  @media (prefers-color-scheme: dark) {
1153
1274
  :root:not([data-theme=light]) {
1154
- --fertig-bg: #090c12; --fertig-el: #141920; --fertig-face: #1c222a; --fertig-fg: #eaeff7;
1155
- --fertig-mut: #9da5b1; --fertig-bd: #eaeff721; --fertig-tb: #1c222a;
1275
+ --fertig-bg: #0b0e14; --fertig-el: #151a22; --fertig-face: #202630; --fertig-fg: #eaeff7;
1276
+ --fertig-mut: #9da5b1; --fertig-bd: #eaeff71f; --fertig-tb: #131820;
1156
1277
  --fertig-ac: #90b5ff; --fertig-on-ac: #07071c;
1157
1278
  }
1158
1279
  }
1159
1280
  [data-theme=dark] {
1160
- --fertig-bg: #090c12; --fertig-el: #141920; --fertig-face: #1c222a; --fertig-fg: #eaeff7;
1161
- --fertig-mut: #9da5b1; --fertig-bd: #eaeff721; --fertig-tb: #1c222a;
1281
+ --fertig-bg: #0b0e14; --fertig-el: #151a22; --fertig-face: #202630; --fertig-fg: #eaeff7;
1282
+ --fertig-mut: #9da5b1; --fertig-bd: #eaeff71f; --fertig-tb: #131820;
1162
1283
  --fertig-ac: #90b5ff; --fertig-on-ac: #07071c;
1163
1284
  }
1164
1285
  }
@@ -1171,12 +1292,15 @@ summary:hover { color: var(--fertig-ac) }
1171
1292
  @media (forced-colors: active) {
1172
1293
  * { box-shadow: none }
1173
1294
  button, [type=submit], [type=button], [type=reset], input, select, textarea,
1174
- .card, .badge, details, dialog, [popover], fieldset, table {
1295
+ .card, .badge, details, dialog, [popover], fieldset, table,
1296
+ [data-surface], [data-input-group], [data-empty], [data-item], [role=listbox] {
1175
1297
  border: 1px solid CanvasText;
1176
1298
  }
1177
- /* [role=tab] sets border:0, so there is nothing for border-color to land
1178
- on, and the rule above just removed the box-shadow that marked it */
1179
- [role=tab][aria-selected=true] { border-bottom: 2px solid Highlight }
1299
+ /* Selected pills rely on fill and shadow in ordinary colours. Give them a
1300
+ real system-colour edge when both disappear in High Contrast. */
1301
+ [role=tab][aria-selected=true], [role=option][aria-selected=true] {
1302
+ border: 2px solid Highlight;
1303
+ }
1180
1304
  button[aria-pressed=true] { border-color: Highlight }
1181
1305
  }
1182
1306
  }
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.8 — a classless CSS stylesheet. MIT */@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.08}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.10}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--fertig-ac);caret-color:var(--fertig-ac);--fertig-f:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fertig-fm:ui-monospace,"Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;--fertig-w:72rem;--fertig-g:clamp(1.15rem,4vw,1.9rem);--fertig-r:10px;--fertig-rs:calc(var(--fertig-r) * .6);--fertig-rw:calc(var(--fertig-r) * 1.6);--fertig-rp:calc(var(--fertig-r) * 1000);--fertig-gray-100:oklch(97% .005 260);--fertig-gray-300:oklch(82% .01 260);--fertig-gray-500:oklch(62% .014 260);--fertig-gray-700:oklch(47% .015 260);--fertig-gray-900:oklch(25% .018 260);--fertig-blue-100:oklch(96% .018 255);--fertig-blue-300:oklch(80% .095 255);--fertig-blue-500:oklch(62% .16 255);--fertig-blue-700:oklch(47% .15 255);--fertig-blue-900:oklch(29% .09 255);--fertig-cyan-100:oklch(96% .025 210);--fertig-cyan-300:oklch(82% .085 210);--fertig-cyan-500:oklch(64% .11 210);--fertig-cyan-700:oklch(47% .08 210);--fertig-cyan-900:oklch(29% .05 210);--fertig-green-100:oklch(96% .025 150);--fertig-green-300:oklch(80% .095 150);--fertig-green-500:oklch(62% .13 150);--fertig-green-700:oklch(46% .10 150);--fertig-green-900:oklch(28% .06 150);--fertig-amber-100:oklch(97% .025 80);--fertig-amber-300:oklch(84% .10 80);--fertig-amber-500:oklch(72% .14 80);--fertig-amber-700:oklch(50% .10 80);--fertig-amber-900:oklch(29% .06 80);--fertig-red-100:oklch(96% .018 25);--fertig-red-300:oklch(80% .10 25);--fertig-red-500:oklch(62% .18 25);--fertig-red-700:oklch(47% .15 25);--fertig-red-900:oklch(28% .09 25);--fertig-violet-100:oklch(96% .018 290);--fertig-violet-300:oklch(80% .095 290);--fertig-violet-500:oklch(62% .16 290);--fertig-violet-700:oklch(47% .15 290);--fertig-violet-900:oklch(28% .09 290);--fertig-bg:light-dark(oklch(97% .004 260),oklch(13.5% .014 260));--fertig-el:light-dark(oklch(99.7% .002 260),oklch(19% .016 260));--fertig-face:light-dark(oklch(94.5% .006 260),oklch(24% .018 260));--fertig-fg:light-dark(oklch(22% .02 260),oklch(95% .012 260));--fertig-mut:light-dark(oklch(46% .018 260),oklch(72% .02 260));--fertig-bd:light-dark(oklch(22% .02 260 / .10),oklch(95% .012 260 / .12));--fertig-tb:light-dark(oklch(99% .003 260),oklch(18% .016 260));--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-on-ac:light-dark(#f7f8fb,#07071c);--fertig-sh:oklch(24% .014 270);--fertig-a1:.08;--fertig-a2:.10;--fertig-sh1:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a1) * 100%),transparent);--fertig-sh2:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a2) * 100%),transparent);--fertig-up:0 1px 2px var(--fertig-sh1),0 0 0 1px var(--fertig-bd);--fertig-up2:0 2px 4px var(--fertig-sh1),0 12px 32px -12px var(--fertig-sh2);--fertig-dn:var(--fertig-up);--fertig-caps:.74em/1.4 var(--fertig-f);--fertig-ease-out:cubic-bezier(.22,1,.36,1);--fertig-ease-in:cubic-bezier(.55,0,1,.45);--fertig-ease:cubic-bezier(.4,0,.2,1);--fertig-dur-1:.12s;--fertig-dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:.34;--fertig-a2:.30}}@supports (color:oklch(from red l c h)){:root{--fertig-on-ac:oklch(from var(--fertig-ac) clamp(.06,(l - .62) * -100,.96) 0 h)}}@supports (color:contrast-color(red)){:root{--fertig-on-ac:color-mix(in oklab,contrast-color(var(--fertig-ac)) 96%,var(--fertig-ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:.08;--fertig-a2:.10}[data-theme=dark]{color-scheme:dark;--fertig-a1:.34;--fertig-a2:.30}[data-accent=blue]{--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300))}[data-accent=cyan]{--fertig-ac:light-dark(var(--fertig-cyan-700),var(--fertig-cyan-300))}[data-accent=green]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-accent=amber]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-accent=red]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-accent=violet]{--fertig-ac:light-dark(var(--fertig-violet-700),var(--fertig-violet-300))}[data-accent=gray]{--fertig-ac:light-dark(var(--fertig-gray-700),var(--fertig-gray-300))}*,::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--fertig-f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--fertig-bg);color:var(--fertig-fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}:focus-visible{outline:2px solid color-mix(in srgb,var(--fertig-ac) 52%,transparent);outline-offset:2px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--fertig-rw);box-shadow:var(--fertig-up2)}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{padding-inline:var(--fertig-g)}body>:where(#root,#app,#__next,[data-fertig]){padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--fertig-bg)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd);border-bottom:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;--fertig-nw:var(--fertig-w);padding-inline:max(var(--fertig-g),calc(50% - var(--fertig-nw) / 2 + var(--fertig-g)),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--fertig-tb);color:var(--fertig-fg);border-bottom:1px solid var(--fertig-bd);font-size:.92em;box-shadow:0 1px 10px color-mix(in srgb,var(--fertig-sh) 4%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fertig-fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav :is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}@media (width <= 40rem){:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{row-gap:.55rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul{order:2;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul::-webkit-scrollbar{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>:last-child:not(ul){margin-inline-start:auto}}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:clamp(2rem,1.55rem + 1.5vw,2.8rem);letter-spacing:-.035em}h2{font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);letter-spacing:-.02em;margin-top:2.4rem}h3{font-size:1.12rem;letter-spacing:-.008em;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.1em;color:var(--fertig-mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) + :is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--fertig-ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--fertig-mut)}hr{border:0;border-top:1px solid var(--fertig-bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--fertig-bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--fertig-mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--fertig-mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--fertig-mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--fertig-mut);text-align:center}code,kbd,samp,pre{font-family:var(--fertig-fm);font-size:.9em}:not(pre)>code,samp{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rs);padding:.08em .35em}kbd{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-bottom-width:2px;border-radius:var(--fertig-rs);padding:.08em .4em;box-shadow:var(--fertig-up)}pre{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--fertig-syn-comment:light-dark(#6b7280,#8b949e);--fertig-syn-key:light-dark(#7c3aed,#c4a7fb);--fertig-syn-str:light-dark(#15803d,#7ee787);--fertig-syn-num:light-dark(#b45309,#f0b866);--fertig-syn-fn:light-dark(#1d4ed8,#93c5fd);--fertig-syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--fertig-syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--fertig-syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--fertig-syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--fertig-syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--fertig-syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--fertig-syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--fertig-mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:separate;border-spacing:0;font-size:.92em}th,td{border-bottom:1px solid var(--fertig-bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:0;background:var(--fertig-face);font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.09em;color:var(--fertig-mut);padding:.5rem .7rem}thead th:first-child{border-start-start-radius:var(--fertig-r);border-end-start-radius:var(--fertig-r)}thead th:last-child{padding-inline-end:.7rem;border-start-end-radius:var(--fertig-r);border-end-end-radius:var(--fertig-r)}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--fertig-bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--fertig-face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}table :is(th,td){white-space:nowrap}}caption{text-align:start;color:var(--fertig-mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--fertig-mut)}label:has(input){font-size:1rem;color:var(--fertig-fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px));background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:6px 6px;background-repeat:no-repeat}select:dir(rtl){background-position:12px 54%,17px 54%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--fertig-dur-1) var(--fertig-ease),translate var(--fertig-dur-1) var(--fertig-ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;background:var(--fertig-el);margin-block-start:.35rem;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--fertig-r) - 2px)}option:hover{background:var(--fertig-face)}option:checked{background:var(--fertig-ac);color:var(--fertig-on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}@media (prefers-reduced-motion:no-preference) and (update:fast){::picker(select){opacity:0;translate:0 -4px;transform-origin:top center;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}select:open::picker(select){opacity:1;translate:0}@starting-style{select:open::picker(select){opacity:0;translate:0 -4px}}}}:is(input,select,textarea):hover:not(:disabled){background-color:color-mix(in srgb,var(--fertig-face) 55%,var(--fertig-el))}:is(input,select,textarea):focus-visible{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent)}:is(input,select,textarea)[data-variant=secondary]{background:var(--fertig-face);border-color:transparent;box-shadow:none}[data-field]{display:grid;gap:.35rem;align-content:start}[data-field] + [data-field]{margin-top:.9rem}[data-field]>*{margin-block:0}[data-field]>:is(small,[role=alert]){font-size:.82em}[data-field]>[role=alert]{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-field]:has([aria-invalid=true])>label{color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-input-group]{display:flex;align-items:center;inline-size:100%;overflow:clip;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}[data-input-group]>:is(input,select,textarea){flex:1 1 auto;min-inline-size:0;border:0;border-radius:0;background-color:transparent;box-shadow:none;outline:0}[data-input-group]>:is(input,select,textarea):hover:not(:disabled){background-color:transparent}[data-input-group]>:where(span,small,output){flex:none;padding-inline:.75em;color:var(--fertig-mut);white-space:nowrap}[data-input-group]>button{align-self:stretch;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}[data-input-group]:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 55%,transparent);box-shadow:var(--fertig-up),0 0 0 3px color-mix(in srgb,var(--fertig-ac) 16%,transparent)}[data-input-group]:has([aria-invalid=true]){border-color:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-input-group]:has(textarea){align-items:end}input[data-otp]{inline-size:min(100%,16ch);font:650 1.25rem/1.4 var(--fertig-fm);letter-spacing:.55em;text-indent:.55em;text-align:center}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0;margin-inline-end:.45em;vertical-align:-.18em}:is(input[type=checkbox],input[type=radio],input[type=range],progress,select[multiple]){accent-color:var(--fertig-ac)}:is(input,textarea,[contenteditable]){caret-color:var(--fertig-ac)}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em;margin-inline:0}::placeholder{color:var(--fertig-mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--fertig-face);cursor:default}label:has(+ :required)::after,label:has(:required)::after{content:" *";color:var(--fertig-ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fertig-fg);box-shadow:var(--fertig-dn),inset 0 0 0 100px var(--fertig-el);caret-color:var(--fertig-ac)}:disabled{color:var(--fertig-mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid transparent;border-radius:var(--fertig-rw);padding:1rem;background:var(--fertig-el);box-shadow:var(--fertig-up)}fieldset:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--fertig-bd);font-size:.95em;font-weight:700;color:var(--fertig-fg)}legend + *{clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.5em 1.1em;background:var(--fertig-face);color:var(--fertig-fg);cursor:pointer;border:1px solid transparent;border-radius:var(--fertig-r);box-shadow:none;font:inherit;font-weight:550;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 7%,var(--fertig-face))}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}:is(button,[type=submit],[type=button],[type=reset]):disabled{background:var(--fertig-face);border-color:transparent;color:var(--fertig-mut)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--fertig-ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--fertig-ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--fertig-face);border-color:var(--fertig-bd)}:is(button,a,input)[data-variant=soft]{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));border-color:transparent;box-shadow:none;color:var(--fertig-ac)}:is(button,a,input)[data-variant=soft]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-ac) 20%,var(--fertig-el))}:is(button,a,input)[data-variant=outline]{background:transparent;border-color:var(--fertig-bd);box-shadow:none}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--fertig-ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 7%,var(--fertig-face))}details{border:1px solid transparent;border-radius:var(--fertig-rw);padding:.8rem 1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up)}:is(td,th,dialog) details{border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--fertig-mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{--fertig-dialog-inset:1.25rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid transparent;border-radius:var(--fertig-rw);padding:var(--fertig-dialog-inset);max-width:min(30rem,92dvw);box-shadow:var(--fertig-up2),0 28px 70px -24px color-mix(in srgb,var(--fertig-sh) 34%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--fertig-sh) 42%,transparent)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:calc(0rem - var(--fertig-dialog-inset));background:var(--fertig-el)}dialog>header{inset-block-start:calc(0rem - var(--fertig-dialog-inset));margin-block:calc(0rem - var(--fertig-dialog-inset)) .35rem;padding:var(--fertig-dialog-inset) var(--fertig-dialog-inset) .5rem;font-weight:700;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0}dialog:is([open],:modal)>header>:is(h1,h2,h3,h4,p){margin:0;font-family:var(--fertig-f);font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}dialog>footer{inset-block-end:calc(0rem - var(--fertig-dialog-inset));margin-block:1.35rem calc(0rem - var(--fertig-dialog-inset));padding:.5rem var(--fertig-dialog-inset) var(--fertig-dialog-inset);border-radius:0 0 var(--fertig-rw) var(--fertig-rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}@supports (animation-timeline:scroll()){dialog>header{animation:fertig-rule-under linear both;animation-timeline:scroll(nearest);animation-range:0 1.2rem}dialog>footer{animation:fertig-rule-over linear both;animation-timeline:scroll(nearest);animation-range:calc(100% - 1.2rem) 100%}@keyframes fertig-rule-under{from{box-shadow:none}to{box-shadow:0 1px 0 var(--fertig-bd)}}@keyframes fertig-rule-over{from{box-shadow:0 -1px 0 var(--fertig-bd)}to{box-shadow:none}}}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--fertig-mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--fertig-dur-2) var(--fertig-ease-out),translate var(--fertig-dur-2) var(--fertig-ease-out),display var(--fertig-dur-2) allow-discrete,overlay var(--fertig-dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}aside{border:1px solid color-mix(in srgb,var(--fertig-ac) 18%,transparent);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-ac) 7%,var(--fertig-el));padding:.8rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face)}progress::-webkit-progress-bar{background:var(--fertig-face);border-radius:var(--fertig-rp)}progress::-webkit-progress-value{background:var(--fertig-ac);border-radius:var(--fertig-rp)}progress::-moz-progress-bar{background:var(--fertig-ac);border-radius:var(--fertig-rp)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--fertig-ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;padding:.2rem;overflow:auto clip;overscroll-behavior-x:contain;border-radius:var(--fertig-rp);background:var(--fertig-face)}[role=group]>*{border:0;border-radius:var(--fertig-rp);margin:0;box-shadow:none;min-width:0}[role=group]>:focus-visible{outline-offset:-3px}[role=group]>[aria-pressed=true]{background:var(--fertig-el);color:var(--fertig-fg);font-weight:650;box-shadow:var(--fertig-up)}[role=group]>:active:not(:disabled){translate:none}[role=tablist]{display:flex;gap:.15rem;max-inline-size:100%;overflow-x:auto;margin:1.1rem 0;padding:.25rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face);scrollbar-width:none}[role=tablist]::-webkit-scrollbar{display:none}[role=tab]{flex:none;background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.4em .9em;border-radius:var(--fertig-rp);margin:0}[role=tab]:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}[role=tab][aria-selected=true]{background:var(--fertig-el);color:var(--fertig-fg);box-shadow:var(--fertig-up)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.5em;height:1.45em;border-radius:var(--fertig-rp);border:0;background:color-mix(in srgb,var(--fertig-fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.17em;height:1.17em;border-radius:50%;background:#fff;box-shadow:var(--fertig-up);transition:translate .16s var(--fertig-ease-out)}input[switch]:checked,input[role=switch]:checked{background:var(--fertig-ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:1.05em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-1.05em 0}[popover]{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid transparent;border-radius:var(--fertig-rw);padding:.35rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover] :is(ul,menu){list-style:none;padding:0;margin:0}[popover] :is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--fertig-r) - 2px);font-weight:400}[popover] :is(a,button):hover:not(:disabled){background:var(--fertig-ac);color:var(--fertig-on-ac)}[popover] hr{margin:.3rem 0}[role=listbox]{list-style:none;margin:1rem 0;padding:.35rem;background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-rw);box-shadow:var(--fertig-up)}[role=option]{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:var(--fertig-r);cursor:default}[role=option]:is(:hover,:focus-visible){background:var(--fertig-face)}[role=option][aria-selected=true]{background:color-mix(in srgb,var(--fertig-ac) 13%,var(--fertig-el));color:var(--fertig-ac)}[popover] [role=listbox]{margin:0;padding:0;border:0;box-shadow:none}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--fertig-mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible,:active)::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#f7f8fb;font-size:.8em;padding:.25em .55em;border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}[data-tooltip]:dir(rtl)::after{translate:50% -.45em}[data-tone=ok]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-tone=warn]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-tone=err]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-tone] .badge,.badge[data-tone]{color:var(--fertig-ac);border-color:var(--fertig-ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--fertig-face);border:1px solid var(--fertig-bd);font-size:.8em;font-weight:700;color:var(--fertig-mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--fertig-r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--fertig-face),color-mix(in srgb,var(--fertig-fg) 9%,var(--fertig-face)),var(--fertig-face));background-size:200% 100%}[data-skeleton] *{visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}[data-surface]{background:var(--fertig-el);border:1px solid transparent;border-radius:var(--fertig-rw);padding:1rem;box-shadow:var(--fertig-up)}[data-surface=flat]{background:var(--fertig-face);box-shadow:none}[data-surface=outline]{background:transparent;border-color:var(--fertig-bd);box-shadow:none}[data-surface]>:first-child{margin-top:0}[data-surface]>:last-child{margin-bottom:0}[data-item]{display:flex;align-items:center;gap:.8rem;min-inline-size:0;padding:.7rem .8rem;border-radius:var(--fertig-r);background:var(--fertig-el)}[data-item] + [data-item]{margin-top:.35rem}[data-item]>:where(div,p){flex:1;min-inline-size:0;margin:0}[data-item]>:where(div,p)>*{display:block;margin-block:0}:is(a,button)[data-item]{inline-size:100%;min-width:0;text-align:start;color:inherit;text-decoration:none}:is(a,button)[data-item]:hover:not(:disabled){background:var(--fertig-face)}[data-empty]{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:clamp(2rem,7vw,4rem);border:1px dashed var(--fertig-bd);border-radius:var(--fertig-rw);background:color-mix(in srgb,var(--fertig-face) 45%,transparent)}[data-empty]>*{max-inline-size:32rem;margin-block:0}dialog[data-side]{max-width:none;margin:0;border-radius:0}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}[popover][data-toast-region]{position:fixed;inset:auto 1rem 1rem auto;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;background:none;border:0;box-shadow:none;padding:0;max-block-size:none;overflow:visible;pointer-events:none}[popover][data-toast-region]>[data-toast]{pointer-events:auto;position:static;inset:auto;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover][data-toast-region]{position-area:none;inset:auto 1rem 1rem auto}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid transparent;border-radius:var(--fertig-rw);background:var(--fertig-el);box-shadow:var(--fertig-up)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--fertig-bd)}[popover] menu{border:0;padding:0;margin:0;background:none;box-shadow:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu :is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--fertig-r);background:none;box-shadow:none;font:inherit;color:var(--fertig-fg);text-decoration:none;opacity:.72}nav menu :is(a,button):hover{background:var(--fertig-face);opacity:1}nav menu :is(a,button)[aria-current]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>*{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>*{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--fertig-mut)}.center{text-align:center}.wide{max-width:80rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--fertig-nw:80rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row :is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row :is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + *{margin-top:1.1rem}.card{container-type:inline-size;border:1px solid transparent;border-radius:var(--fertig-rw);padding:1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up2);display:flex;flex-direction:column;gap:.85rem}.card>*{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:38rem}.hidden{display:none}.badge{border: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",
4
- "description": "A classless CSS stylesheet with no legacy in it: no polyfills, no required classes. Link one file, write ordinary HTML, done — 8.6 KB gzipped, no build step, no dependencies.",
3
+ "version": "4.0.8",
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": {