fertig 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -6,6 +6,71 @@ is the token names, the class names (the seven, plus the layout utilities),
 and the ARIA attributes the component layer reads — changes to any of those
 are breaking.
 
+## Unreleased
+
+## [4.0.0] — 2026-09-01
+
+### Changed
+
+- **The palette is new and intentionally direct.** `gray`, `blue`, `cyan`,
+  `green`, `amber`, `red` and `violet` replace the former
+  `stone/sage/sky/clay/plum/gold` ramps. Each ships at 100/300/500/700/900,
+  stays inside sRGB and uses a consistent OKLCH progression. Blue is the new
+  default accent; `ok`, `warn` and `err` now map directly to green, amber and
+  red.
+- **The default finish is platform-neutral.** Opaque toolbar and surface
+  colors, restrained 8px control geometry, ordinary rounded buttons and generic
+  system font fallbacks replace the OS-specific translucent treatment. The
+  optional squircle enhancement and decorative backdrop blur are gone.
+- **The default hierarchy is clearer and the page gutter is responsive.**
+  `h1` and `h2` now use a restrained fluid type scale, while the new
+  `--fertig-g` token grows from 1.15rem on narrow phones to 1.9rem on larger
+  screens. Desktop density is unchanged; small screens recover useful space.
+- **The generic toolbar stays composed on phones.** A navigation list gets one
+  horizontally scrollable row beneath the identity and trailing control instead
+  of wrapping around them in an uneven cluster.
+
+### Removed
+
+- **The former palette and named accents.** Old ramp tokens and
+  `data-accent="indigo|sky|sage|clay|plum|gold|slate"` are not retained as
+  aliases. Use `data-accent="blue|cyan|green|amber|red|violet|gray"`.
+- **Legacy mockup pages and static social-preview screenshots.** The site build
+  no longer copies them or emits metadata pointing at deleted preview images.
+
+### Fixed
+
+- **Responsive tables scroll before their cells become unreadable.** Below
+  40rem, cell content keeps its intrinsic width inside the existing table scroll
+  container instead of wrapping almost word-by-word.
+- **Size synchronization cannot rewrite third-party measurements.** Published
+  claims are now an explicit manifest of fertig-specific contexts. A changed or
+  missing context fails the command, and a regression test protects unrelated
+  values that happen to match fertig's previous size.
+
+## [3.1.0] — 2026-09-01
+
+### Changed
+
+- **The 72rem default is now a page shell, not a prose measure.**
+  `.max-w-prose` keeps long-form copy at 38rem, while `.wide` provides an 80rem
+  application column. The documentation and customiser now use the same
+  defaults and terminology as the stylesheet.
+- **The documentation toolbar stays compact on phones.** Its primary controls
+  occupy the first row and its links scroll horizontally on the second instead
+  of wrapping into a tall stack. The Components page is now present in the
+  shared navigation.
+
+### Fixed
+
+- **The minified build preserves descendant selectors.** The old punctuation
+  regex changed selectors such as `nav :is(…)` into `nav:is(…)`, silently
+  breaking row controls and popover menus. The minifier now understands CSS
+  strings and comments, with focused regression tests for both failure modes.
+- **Reduced-transparency preferences reach framework wrappers.** A toolbar
+  inside `#root`, `#app`, `#__next` or `[data-fertig]` now drops its backdrop
+  blur just like a toolbar that is a direct child of `body`.
+
 ## [3.0.0] — 2026-08-31
 
 The breaking change is one mechanical line: **every public token now carries a

package/README.md

@@ -2,12 +2,12 @@
 
 A classless CSS file that gives you **components**, not just styled elements —
 menus, dialogs, drawers, toasts and tooltips from plain semantic HTML,
-addressed by the ARIA that makes them accessible, and working with JavaScript
-switched off.
+built from native HTML and the ARIA that makes it accessible, and working with
+JavaScript switched off.
 
 Link it, write ordinary HTML, and the page is finished.
 
-**36.8 KB raw · 8.8 KB gzipped · no build step · no dependencies · no JavaScript.**
+**37.0 KB raw · 8.7 KB gzipped · no build step · no dependencies · no JavaScript.**
 
 ### What makes it different
 
@@ -31,10 +31,10 @@ Surveyed across the eleven most-used classless stylesheets on 2026-08-31
 
 It is *not* the smallest — Concrete.css is 1.2 KB gzipped, and most of the
 field is a fraction of this because it styles elements and stops there. Against
-the two classless sheets that also ship a component layer, fertig is the
-lightest: 8.8 KB against matcha's 8.8 KB and Pico classless at 10.2 KB, and the
-only one of the three whose components work without JavaScript. Size is a
-constraint here, not the pitch.
+the two classless sheets that also ship a component layer, fertig is 8.7 KB,
+beside matcha's 8.8 KB and below Pico classless at 10.2 KB. It is the only one
+of the three whose components work without JavaScript. Size is a constraint
+here, not the pitch.
 
 ## Components that work without JavaScript
 
@@ -43,11 +43,12 @@ Audited in a browser with scripting disabled:
 | | |
 |---|---|
 | Popover menu, dialog, drawer, toast, tooltip, disclosure | **work with no script** |
-| Tabs | **styled only** — switching panels needs ~8 lines of your own |
+| Tabs | **styled only** — selection, panels and arrow keys need a short script |
 
-Tabs are the one gap, and it is deliberate: `aria-selected` must be a real
-attribute for a screen reader to announce the right tab, and CSS cannot set
-attributes. The snippet is in the docs.
+This gap is deliberate: `aria-selected` must be a real attribute, inactive tabs
+need roving focus, and CSS cannot implement the arrow-key contract. The complete
+enhancement is in the docs. `<details name>` remains an exclusive accordion,
+not a tabs substitute.
 
 ```html
 <link rel="stylesheet" href="fertig.css">
@@ -69,11 +70,11 @@ If you override tokens, prefix what you set. The common ones:
 |---|---|
 | `--ac` | `--fertig-ac` |
 | `--on-ac` | `--fertig-on-ac` |
-| `--w` | `--fertig-w` |
+| `--w` / `--g` | `--fertig-w` / `--fertig-g` |
 | `--r` / `--rs` / `--rw` | `--fertig-r` / `--fertig-rs` / `--fertig-rw` |
 | `--bg` / `--el` / `--face` / `--fg` / `--mut` / `--bd` / `--tb` | `--fertig-*` (same short name) |
-| `--up` / `--up2` / `--dn` / `--sh` / `--sh1` / `--sh2` | `--fertig-up` / `--fertig-up2` / `--fertig-dn` / `--fertig-sh1` / `--fertig-sh{2}` |
-| fonts `--f` / `--fm`, measure `--w`, caps `--caps`, `--nw` | `--fertig-*` |
+| `--up` / `--up2` / `--dn` / `--sh` / `--sh1` / `--sh2` | `--fertig-up` / `--fertig-up2` / `--fertig-dn` / `--fertig-sh` / `--fertig-sh1` / `--fertig-sh2` |
+| fonts `--f` / `--fm`, page width `--w`, gutter `--g`, caps `--caps`, `--nw` | `--fertig-*` |
 | color ramps `--stone-*` / `--sage-*` / `--sky-*` / `--clay-*` / `--plum-*` / `--gold-*` | `--fertig-*` (same stop) |
 
 The rule is simple: **any `--name` you set becomes `--fertig-name`.** Nothing
@@ -81,12 +82,12 @@ changed meaning; the prefix exists so the sheet never collides with a custom
 property of yours (it is the same reason `--fertig-a1` / `--fertig-a2` were
 already prefixed — those are `@property` registrations, which are global).
 
-Two defaults change visually, so pin `fertig@2` if you want the old look:
+The defaults now favor a platform-neutral interface:
 
 - **Palette.** Accents and neutrals moved to a cooler voice — graphite
   neutrals and a violet-blue accent — replacing the older indigo/warm scheme.
-- **Buttons.** Fully rounded (`border-radius: 999px`) instead of the moderate
-  radius.
+- **Geometry.** Buttons share the restrained control radius. Pill geometry is
+  reserved for badges, switches, meters and joined ends.
 
 The docs site was also rebuilt and the two demo pages (`app.html` /
 `app-invoice.html`) are gone. None of that touches the sheet.
@@ -99,7 +100,7 @@ npm install fertig
 
 ```html
 <!-- or from a CDN, pinned -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@3/fertig.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@4/fertig.min.css">
 ```
 
 ```css
@@ -109,21 +110,23 @@ npm install fertig
 
 ## What it is
 
-Opinions, so you don't have to have them: system type, one accent, one
-measure, a window on a desktop. The structure is classic — a title bar, sunken
-fields, raised buttons — and the finish is macOS: vibrancy, hairlines, soft
-radii, a violet-blue focus ring over cool graphite neutrals. None of it is a
-period costume, and none of it is a picture of an OS: it is all CSS that every
-current engine already ships.
-
-- **System type, set properly** — 16px on a 1.65 line height across roughly
-  seventy characters. Code keeps a monospace face, where it earns its place.
-- **A window on a desktop.** `<nav>` becomes a full-bleed toolbar with a
-  vibrancy blur; `header`/`main`/`footer` are the paper.
+Opinions, so you don't have to have them: system type, one accent, one page
+width and a clear content canvas. The structure is classic — a toolbar,
+sunken fields and raised buttons — while the finish stays platform-neutral:
+opaque surfaces, hairlines, restrained corners and a violet-blue focus ring
+over cool graphite neutrals.
+
+- **System type, set properly** — 16px on a 1.65 line height. Long-form copy
+  gets a roughly seventy-character measure with `.max-w-prose`. Code keeps a
+  monospace face, where it earns its place.
+- **A centered content canvas.** `<nav>` becomes a full-bleed opaque toolbar;
+  `header`/`main`/`footer` form the page surface.
 - **Depth from hairlines and soft shadows.** Buttons and cards sit above the
   page, inputs and code sit below it. Shadow alphas step up in dark mode,
   because a shadow on a dark background does nothing on its own.
 - **Quiet text.** Links underline on hover rather than inverting mid-paragraph.
+- **Comfortable foregrounds.** Light mode uses graphite rather than absolute
+  black; dark mode uses a softened near-white rather than full white.
 - **Dark mode with no second stylesheet.** One `light-dark()` token block.
   Add `data-theme="dark"` (or `"light"`) on `<html>` to override the OS.
 
@@ -133,13 +136,19 @@ Direct children of `<body>` are the containers:
 
 ```html
 <body>
-  <nav>…</nav>       <!-- toolbar: full-bleed, contents on the measure -->
+  <nav>…</nav>       <!-- toolbar: full-bleed, contents on the page column -->
   <header>…</header>
   <main>…</main>
   <footer>…</footer>
 </body>
 ```
 
+The default page shell is `72rem`, roomy enough for application layouts and
+documentation. Add `.max-w-prose` to long-form content for a readable `38rem`
+line length, or `.wide` to a shell that genuinely needs the `80rem` column.
+The `--fertig-g` gutter scales from `1.15rem` on narrow phones to `1.9rem` on
+larger screens, and can be overridden independently of the shell width.
+
 One wrapper is fine. React, Vue, Svelte and Next render into a mount node, so
 the shell matches `body`'s children *or* the children of a single `#root`,
 `#app`, `#__next`, or `[data-fertig]` wrapper:
@@ -162,17 +171,17 @@ yourself — it is the only place `body >` appears:
 
 ## Components
 
-Addressed by ARIA attributes, not by class — the markup stays semantic and
-accessible by construction.
+Addressed by semantic HTML and ARIA attributes, not by component classes — the
+markup stays accessible by construction.
 
 | Component | Markup |
 |---|---|
 | Segmented control | `<div role="group">` of buttons, `aria-pressed` |
-| Tabs | `<div role="tablist">`, `<button role="tab" aria-selected>` |
+| ARIA tabs | `<div role="tablist">`, `<button role="tab" aria-selected>`; switching and arrow keys need script |
 | Switch | `<input type="checkbox" role="switch">` |
 | Menu | any `[popover]` + `popovertarget` (anchored, no JS) |
 | Breadcrumb | `<nav aria-label="Breadcrumb"><ol>` |
-| Dialog | `<dialog>` — animates in, blurs the page behind; optional `<header>`/`<footer>` pin while the body scrolls |
+| Dialog | `<dialog>` — animates in; optional `<header>`/`<footer>` pin while the body scrolls |
 | Loading | `aria-busy="true"` (inline spinner) |
 | Tooltip | `data-tooltip="…"` — decorative; put the same words in `aria-label` too |
 | Button variants | `data-variant="ghost\|link"`, `data-size="sm\|lg"`, `data-icon`, `data-block` — on controls only, so they cannot catch a `<span data-size>` of yours |
@@ -227,7 +236,8 @@ where `.max-w-2xl` works and `.max-w-3xl` silently does not is worse than no
 scale at all. They are `max-inline-size`, so they still mean "along the text"
 in a vertical writing mode, and they outrank the sheet's own measure on
 `body > *`, so they retarget a page container as readily as anything inside
-one. `.max-w-prose` is that measure, as a class.
+one. `.max-w-prose` is a fixed `38rem` reading measure, independent of the
+`72rem` page shell.
 
 ## Customising
 
@@ -235,21 +245,28 @@ Override the tokens you'd actually want to change:
 
 ```css
 :root {
-  --fertig-ac: light-dark(oklch(50% .22 266), oklch(78% .13 266)); /* violet-blue accent */
-  --fertig-w: 48rem;                                              /* measure */
+  --fertig-ac: light-dark(var(--fertig-blue-700), var(--fertig-blue-300)); /* blue accent */
+  --fertig-w: 48rem;                                              /* page shell width */
+  --fertig-g: 1.25rem;                                            /* page gutter */
   --fertig-r: 0px;                                                /* control radius — go sharp */
   --fertig-f: "Inter", system-ui, sans-serif;                     /* text font */
 }
 ```
 
-The accent is the only colour most people touch. In 3.0 the default is a
-violet-blue (`hue 266`) sitting on cool graphite neutrals (`hue 258`); the
+The accent is the only colour most people touch. The default is blue sitting
+on cool gray neutrals; the
 `data-accent` attribute retints a whole region without touching tokens:
 
 ```html
-<section data-accent="sage">…</section>  <!-- or sky, clay, plum, gold, slate -->
+<section data-accent="green">…</section>  <!-- or blue, cyan, amber, red, violet, gray -->
 ```
 
+The palette exposes `gray`, `blue`, `cyan`, `green`, `amber`, `red` and
+`violet` ramps at `100`, `300`, `500`, `700` and `900`. For example,
+`--fertig-violet-500` is the middle violet stop. The former
+`stone/sage/sky/clay/plum/gold` ramps and named accents were removed rather
+than retained as aliases.
+
 Tones work the same way — `data-tone="ok|warn|err"` retints any component
 without a round trip through the tokens:
 
@@ -262,7 +279,7 @@ colour sitting on the accent, and a light accent needs dark text to stay
 legible. `--fertig-up` / `--fertig-up2` / `--fertig-dn` are the elevation
 scale, `--fertig-a1` / `--fertig-a2` the shadow alphas (these two are
 `@property` registrations, and a registration is global — hence the prefix),
-`--fertig-rw` the window radius, and `--fertig-nw` the column the toolbar's
+`--fertig-rw` the large-surface radius, and `--fertig-nw` the column the toolbar's
 contents line up with. `--fertig-nw` follows `--fertig-w`, so nothing moves by
 default; `<nav class="wide">` re-points it at the wide column, which is what an
 app screen built on `.wide` wants so its wordmark doesn't float in the middle
@@ -298,19 +315,20 @@ Tested by rendering a Persian page in both directions, not by inspection.
 ## Accessibility
 
 Every foreground/background pair meets WCAG 2.1 AA (>= 4.5:1) in **both**
-themes, measured in-browser from the computed token values:
+themes, calculated from the computed token values:
 
 | Pair | Light | Dark |
 |---|---:|---:|
-| Body text on paper | 17.05 | 15.31 |
-| Muted text on paper | 6.73 | 7.41 |
-| Links on paper | 6.38 | 8.97 |
-| Muted on chrome | 6.30 | 6.70 |
-| Muted on the desktop ground | 5.65 | 8.11 |
-| Text on accent | 6.48 | 10.63 |
-| Tones (ok / warn / err) | 4.80–6.55 | 7.63–9.43 |
+| Body text on content surface | 16.83 | 15.32 |
+| Muted text on content surface | 6.92 | 7.15 |
+| Links on content surface | 6.72 | 9.50 |
+| Muted on controls | 6.57 | 6.45 |
+| Muted on page ground | 5.89 | 7.88 |
+| Text on accent | 6.16 | 11.22 |
+| Tones (ok / warn / err) | 5.91–7.17 | 9.12–10.76 |
 
-The tightest pair in the sheet is the warn tone on paper in light, at 4.80:1.
+The tightest pair in the sheet is text on the amber fill in light mode, at
+5.41:1.
 
 Motion is gated behind `prefers-reduced-motion`, focus uses a visible ring at
 `:focus-visible`, and the component layer is driven by the same ARIA attributes
@@ -320,7 +338,7 @@ assistive technology reads.
 
 | Sheet | Raw | Gzip |
 |---|---:|---:|
-| **fertig** | **36.8 KB** | **8.8 KB** |
+| **fertig** | **37.0 KB** | **8.7 KB** |
 | Pico 2.1.1 classless | 69.4 KB | 10.1 KB |
 
 Measured with `gzip -9`, KB = 1024 bytes for every row. Most of the gap is Pico's full
@@ -341,11 +359,12 @@ button { background: hotpink }   /* wins, no !important needed */
 ## Modern CSS, used deliberately
 
 Everything past the floor sits behind `@supports` and is additive:
-`contrast-color()` picks the text colour on your accent so an override cannot
-fail contrast; anchor positioning attaches popover menus to their button;
+`contrast-color()` picks the light or dark text colour on your accent and a
+small mix keeps it away from absolute black or white; anchor positioning
+attaches popover menus to their button;
 `::details-content` with `interpolate-size` animates disclosures open;
-`field-sizing` grows textareas; `corner-shape: squircle` gives continuous
-corners; `text-box: trim-both` sits headings on their cap height; and
+`field-sizing` grows textareas; `text-box: trim-both` sits headings on their
+cap height; and
 `appearance: base-select` styles the dropdown picker itself. Without any of it,
 nothing breaks. Relative colour (`oklch(from …)`) is on that list too, for one
 job only: lightening the filled button on hover in OKLCH. The shadow alphas
@@ -356,8 +375,8 @@ the floor. Two things are *not* on the list because they are part of the floor:
 `container-type` on `.card`, which makes every card a container you can write
 `@container` queries against.
 
-It also answers to the OS: `prefers-reduced-motion`,
-`prefers-reduced-transparency`, `prefers-contrast`, `forced-colors`,
+It also answers to user and device preferences: `prefers-reduced-motion`,
+`prefers-contrast`, `forced-colors`,
 `pointer: coarse` (44px targets, WCAG 2.5.8), `env(safe-area-inset-*)`,
 `update: fast` (e-ink never starts a transition), `inverted-colors` and
 `color-gamut: p3`.
@@ -414,7 +433,7 @@ npm run sizes      # sync the size claims in README + site copy
 
 | Build | Raw | Gzip | |
 |---|---:|---:|---|
-| `fertig.min.css` | 36.8 KB | 8.8 KB | everything |
+| `fertig.min.css` | 37.0 KB | 8.7 KB | everything |
 
 ## Files
 

package/fertig.css

@@ -1,9 +1,9 @@
-/*! fertig v3.0.0 — a classless CSS stylesheet. MIT */
+/*! fertig v4.0.0 — a classless CSS stylesheet. MIT */
 
 /* Opinions, so you don't have to have them:
-   system type · one accent · one measure · a window on a desktop.
-   Structure is classic (title bar, sunken fields, raised buttons); the finish
-   is macOS (vibrancy, hairlines, soft radii, the blue focus ring).
+   system type · one accent · one page width · a clear content canvas.
+   The finish is platform-neutral: opaque surfaces, hairlines, restrained
+   corners and a visible accent focus ring.
    Override the tokens marked "yours"; the rest is the point of view. */
 
 /* typed so they interpolate; untyped custom properties cannot animate */
@@ -33,69 +33,75 @@
   accent-color: var(--fertig-ac);
   caret-color: var(--fertig-ac);
 
-  --fertig-f: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-       Roboto, "Helvetica Neue", Arial, sans-serif;                  /* yours */
-  --fertig-fm: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+  --fertig-f: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;                                            /* yours */
+  --fertig-fm: ui-monospace, "Cascadia Code", "Roboto Mono", Consolas,
         "Liberation Mono", monospace;                                /* code */
-  --fertig-w: 38rem;                            /* ~70 characters — yours */
+  --fertig-w: 72rem;                            /* page shell width — yours */
+  --fertig-g: clamp(1.15rem, 4vw, 1.9rem);      /* responsive page gutter — yours */
   /* One radius, and the rest derived from it: set --fertig-r and the whole
      sheet rescales together. Four independent numbers meant --fertig-r: 4px
      left tight fields sitting inside cards that were still round. */
-  --fertig-r: 12px;                             /* control radius: fields, menu rows */
+  --fertig-r: 8px;                              /* control radius: fields, buttons, menu rows */
   --fertig-rs: calc(var(--fertig-r) * .5);      /* small: inline chips and code */
-  --fertig-rw: calc(var(--fertig-r) * 1.33);    /* window: cards, dialogs, menus */
-  --fertig-rp: calc(infinity * 1px);            /* pill: buttons, badges, switches, meters */
+  --fertig-rw: calc(var(--fertig-r) * 1.33);    /* large: cards, dialogs, menus */
+  --fertig-rp: calc(var(--fertig-r) * 1000);    /* pill: badges, switches, meters, joined ends */
+  /* --fertig-rp multiplies rather than naming infinity: any non-zero radius
+     still clamps to a true pill, while --fertig-r: 0 squares the whole shape
+     system consistently. */
 
   /* ---- palette ------------------------------------------------
-     Low chroma on purpose. Vivid palettes shout; these are meant to sit
-     under text all day. OKLCH, so a step means the same thing in every hue.
-     The neutrals are a cool graphite (hue ≈ 258) with a faint violet cast —
-     crisper and less dated than a warm stone, and better under the accent. */
-  --fertig-stone-100: oklch(97.5% .006 258); --fertig-stone-300: oklch(91% .009 258);
-  --fertig-stone-500: oklch(72% .012 258);   --fertig-stone-700: oklch(47% .014 258);
-  --fertig-stone-900: oklch(26% .016 258);
-
-  --fertig-sage-100: oklch(96% .024 160); --fertig-sage-300: oklch(87% .046 160);
-  --fertig-sage-500: oklch(66% .064 160); --fertig-sage-700: oklch(47% .06 160);
-  --fertig-sage-900: oklch(29% .042 160);
-
-  --fertig-sky-100: oklch(96% .024 242); --fertig-sky-300: oklch(87% .05 244);
-  --fertig-sky-500: oklch(64% .095 246); --fertig-sky-700: oklch(48% .1 250);
-  --fertig-sky-900: oklch(30% .064 250);
-
-  --fertig-clay-100: oklch(96% .024 45); --fertig-clay-300: oklch(88% .05 45);
-  --fertig-clay-500: oklch(68% .095 45); --fertig-clay-700: oklch(50% .098 40);
-  --fertig-clay-900: oklch(31% .06 40);
-
-  --fertig-plum-100: oklch(96% .022 318); --fertig-plum-300: oklch(88% .042 318);
-  --fertig-plum-500: oklch(66% .066 318); --fertig-plum-700: oklch(47% .07 318);
-  --fertig-plum-900: oklch(29% .046 318);
-
-  --fertig-gold-100: oklch(96.5% .03 92); --fertig-gold-300: oklch(89% .06 88);
-  --fertig-gold-500: oklch(74% .092 85);  --fertig-gold-700: oklch(55% .092 80);
-  --fertig-gold-900: oklch(33% .056 80);
+     Seven direct, familiar names; five perceptually even OKLCH stops each.
+     The chroma rises toward the middle of every ramp while the endpoints stay
+     quiet enough for surfaces and text. Every value is inside sRGB. */
+  --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);
 
   /* ---- semantic ----------------------------------------------- */
-  --fertig-bg:  light-dark(oklch(93.5% .008 258), oklch(15.5% .014 258));  /* desktop */
-  --fertig-el:  light-dark(oklch(99% .004 258), oklch(21% .016 258));  /* paper */
-  --fertig-face:light-dark(oklch(97.2% .006 258), oklch(25% .018 258));  /* chrome */
-  --fertig-fg:  light-dark(oklch(22% .02 258),  oklch(95% .012 258));
-  /* lifted from 50%/70%: the weakest pairing (muted on the desktop ground in
-     light, muted on chrome in dark) was 4.96:1 and 5.99:1, a hair over AA.
+  --fertig-bg:  light-dark(oklch(93.5% .008 260), oklch(15.5% .014 260));  /* page ground */
+  --fertig-el:  light-dark(oklch(99% .004 260), oklch(21% .016 260));  /* content surface */
+  --fertig-face:light-dark(oklch(97.2% .006 260), oklch(25% .018 260));  /* controls */
+  --fertig-fg:  light-dark(oklch(22% .02 260),  oklch(95% .012 260));
+  /* lifted from 50%/70%: the weakest pairing (muted on the page ground in
+     light, muted on controls in dark) was 4.96:1 and 5.99:1, a hair over AA.
      46%/72% takes them to 5.7:1 and 6.8:1 while keeping a clear step down
      from --fertig-fg — AAA would need ~41%, which is close enough to
      --fertig-fg that "muted" stops reading as secondary at all. */
-  --fertig-mut: light-dark(oklch(46% .018 258),  oklch(72% .02 258));
-  --fertig-bd:  light-dark(oklch(22% .02 258 / .13), oklch(95% .012 258 / .13));
-  --fertig-tb:  light-dark(oklch(97.2% .006 258 / .85), oklch(25% .018 258 / .85));
-  /* a violet-indigo, not the azure every other classless sheet lands on.
-     Higher chroma than the old indigo so it reads electric without shouting.
-     Measured: 6.21:1 as link text on paper and 6.39:1 for a white label on
-     the fill in light; 8.62:1 in dark. Both sit inside sRGB. */
-  --fertig-ac:  light-dark(oklch(50% .22 266), oklch(78% .13 266));    /* yours */
-  --fertig-on-ac: light-dark(#fff, #07071c);    /* text on the accent, both themes */
-
-  /* depth: hairline + soft shadow, macOS weight.
+  --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));
+  /* Blue is the neutral default: distinctive enough for interaction, familiar
+     enough not to impose a brand. The 700/300 pair clears AA as link text and
+     as a filled control in its respective theme. */
+  --fertig-ac:  light-dark(var(--fertig-blue-700), var(--fertig-blue-300)); /* yours */
+  --fertig-on-ac: light-dark(#f7f8fb, #07071c); /* off-white / ink text on the accent */
+
+  /* depth: hairline + compact shadow.
      --fertig-sh is an ordinary colour — override it with any notation you like, and
      every shadow in the sheet retints. Lighter than a pure black so the shadows
      read as diffuse atmosphere rather than dark bars. The alphas are taken with
@@ -123,14 +129,15 @@
 }
 /* --fertig-on-ac has to survive any --fertig-ac override, or a custom accent ships an
    unreadable label. contrast-color() does that properly but has almost no
-   support; relative colour reaches the same black-or-white decision from the
-   accent's own lightness, and has been cross-engine since 2024. Both are
-   additive — the measured light-dark() pair above stands if neither exists. */
+   support; relative colour reaches the same light-or-dark decision from the
+   accent's own lightness, and has been cross-engine since 2024. The endpoints
+   deliberately stop short of absolute black and white. Both are additive —
+   the measured light-dark() pair above stands if neither exists. */
 @supports (color: oklch(from red l c h)) {
-  :root { --fertig-on-ac: oklch(from var(--fertig-ac) clamp(0, (l - .62) * -100, 1) 0 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: contrast-color(var(--fertig-ac)) }
+  :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 }
@@ -139,15 +146,15 @@
    data-accent on any element and everything inside it — links, focus rings,
    filled buttons, the caret, the selection — follows. Scoped rather than
    global, so one section of a page can differ from the rest.
-   Each pair is measured: the light tone clears AA as link text on paper, the
+   Each pair is measured: the light tone clears AA as link text on the content surface, the
    dark tone clears it on the dark ground. */
-[data-accent=indigo] { --fertig-ac: light-dark(oklch(50% .19 275),  oklch(78% .11 275)) }
-[data-accent=sky]    { --fertig-ac: light-dark(var(--fertig-sky-700),      oklch(78% .085 245)) }
-[data-accent=sage]   { --fertig-ac: light-dark(var(--fertig-sage-700),     oklch(80% .075 155)) }
-[data-accent=clay]   { --fertig-ac: light-dark(var(--fertig-clay-700),     oklch(80% .085 45)) }
-[data-accent=plum]   { --fertig-ac: light-dark(var(--fertig-plum-700),     oklch(80% .065 320)) }
-[data-accent=gold]   { --fertig-ac: light-dark(oklch(55% .085 80),  oklch(84% .09 85)) }
-[data-accent=slate]  { --fertig-ac: light-dark(oklch(35% .01 250),  oklch(86% .006 250)) }
+[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)) }
 
 /* ---- base --------------------------------------------------- */
 *, ::before, ::after { box-sizing: border-box }
@@ -162,7 +169,7 @@ body {
   font-variant-numeric: slashed-zero tabular-nums;
 }
 ::selection { background: color-mix(in srgb, var(--fertig-ac) 28%, transparent) }
-/* The macOS ring. No border-radius here: an outline already follows the
+/* No border-radius here: an outline already follows the
    element's own corners, and setting one would reshape whatever takes focus —
    a focused dialog would snap from --fertig-rw to --fertig-r for as long as it is focused. */
 :focus-visible {
@@ -175,15 +182,15 @@ 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) }
 
-/* ---- layout: a window on a desktop --------------------------- */
+/* ---- layout: a centered page shell --------------------------- */
 /* The shell is body's own children — or the children of the single wrapper a
    framework insists on (#root, #app, #__next, or your own [data-fertig]).
-   Without this a React page silently loses the measure, the paper and the
+   Without this a React page silently loses the measure, the content surface and the
    gutters, and nothing on screen says why. The wrapper list sits inside
    :where() so every selector keeps the specificity it had as `body > *`. */
 body > *,
 body > :where(#root, #app, #__next, [data-fertig]) > * {
-  max-width: var(--fertig-w); margin-inline: auto; padding-inline: 1.9rem;
+  max-width: var(--fertig-w); margin-inline: auto; padding-inline: var(--fertig-g);
 }
 /* the wrapper is not itself a shell element; it just gets out of the way */
 body > :where(#root, #app, #__next, [data-fertig]) { max-width: none; padding-inline: 0 }
@@ -195,22 +202,19 @@ body > :where(#root, #app, #__next, [data-fertig]) { max-width: none; padding-in
 :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);
-  border-radius: 0 0 var(--fertig-rw) var(--fertig-rw); margin-bottom: 2.5rem;
-  box-shadow: 0 20px 32px -24px color-mix(in srgb, var(--fertig-sh) 38%, transparent);
 }
-/* nav = unified toolbar: full-bleed, vibrant, contents on the measure */
+/* nav = unified toolbar: full-bleed, opaque, contents on the measure */
 :is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav {
   position: sticky; top: 0; z-index: 9; max-width: none;
   /* the toolbar is full-bleed but its contents line up with the page column.
      --fertig-nw is that column: it follows --fertig-w, so overriding the measure moves the
      toolbar with it, and .wide re-points it at the wide column instead. */
   --fertig-nw: var(--fertig-w);
-  padding-inline: max(1.9rem, calc(50% - var(--fertig-nw) / 2 + 1.9rem),
+  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);
-  backdrop-filter: saturate(180%) blur(20px);
   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 }
@@ -220,12 +224,23 @@ body > :where(#root, #app, #__next, [data-fertig]) { max-width: none; padding-in
   display: flex; flex-wrap: wrap; gap: 1.1rem; list-style: none; padding: 0; margin: 0;
   flex: 1;                       /* takes the slack, so a trailing control sits at the end */
 }
+/* On a narrow screen, keep the identity and trailing control together while
+   the links get one stable, horizontally scrollable row of their own. */
+@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 }
+}
 
 /* ---- type --------------------------------------------------- */
 h1, h2, h3, h4, h5, h6 { line-height: 1.3; margin: 1.4rem 0 .7rem; text-wrap: balance }
-h1 { font-size: 1.55rem; letter-spacing: -.015em }
-h2 { font-size: 1.25rem; letter-spacing: -.01em; margin-top: 2.4rem }
-h3 { font-size: 1.08rem; margin-top: 1.9rem }
+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 }
@@ -333,6 +348,7 @@ tfoot td { font-weight: 700; border-top: 1px solid var(--fertig-bd); border-bott
 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 }
 
@@ -455,7 +471,7 @@ 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-rp); box-shadow: var(--fertig-up);
+  border: 1px solid var(--fertig-bd); border-radius: var(--fertig-r); box-shadow: var(--fertig-up);
   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) }
@@ -499,16 +515,6 @@ button[aria-pressed=true]:hover:not(:disabled) {
 :is([type=submit], .primary) { box-shadow: var(--fertig-up), inset 0 1px 0 light-dark(#ffffff33, #ffffff26) }
 :is([type=submit], .primary):active:not(:disabled) { box-shadow: inset 0 1px 3px #0006 }
 
-@supports (corner-shape: squircle) {
-  /* the surfaces this sheet rounds, not `*` — a universal rule would reshape
-     your components too, and this one is a taste, not a repair */
-  :is(button, [type=submit], [type=button], [type=reset], input, select, textarea,
-      fieldset, details, dialog, [popover], pre, kbd, code, samp, img, video,
-      menu, aside, [data-avatar], [data-skeleton], .card, .badge) {
-    corner-shape: squircle;
-  }
-}
-
 /* ---- disclosure / misc -------------------------------------- */
 details {
   border: 1px solid var(--fertig-bd); border-radius: var(--fertig-rw);
@@ -526,7 +532,7 @@ dialog {
 }
 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); backdrop-filter: blur(4px) }
+dialog::backdrop { background: color-mix(in srgb, var(--fertig-sh) 32%, transparent) }
 
 /* dialog anatomy: an optional header and footer, pinned while the body scrolls.
    Sticky rather than a grid, because a classless sheet has no wrapper around
@@ -743,18 +749,16 @@ nav[aria-label] ol li + li::before { content: "/"; margin-inline-end: .5em; colo
   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: #fff; font-size: .8em;
+  background: light-dark(#1d1d1f, #3a3a40); color: #f7f8fb; font-size: .8em;
   padding: .25em .55em; border-radius: var(--fertig-r); box-shadow: var(--fertig-up2);
 }
 /* translate is physical; the offset has to be told which way to go */
 [data-tooltip]:dir(rtl)::after { translate: 50% -.45em }
 
 /* tones: retint any component by redefining its accent */
-[data-tone=ok]   { --fertig-ac: light-dark(var(--fertig-sage-700), oklch(76% .085 155)) }
-[data-tone=warn] { --fertig-ac: light-dark(var(--fertig-gold-700), oklch(80% .095 85)) }
-/* err is the one tone that does not come from the palette: clay at this
-   lightness reads as brown, and a destructive button has to read as red. */
-[data-tone=err]  { --fertig-ac: light-dark(oklch(52% .16 27), oklch(74% .13 25)) }
+[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) }
 
 /* ---- parity with the component libraries --------------------- */
@@ -898,11 +902,11 @@ nav menu :is(a, button)[aria-current] {
 /* ---- the only classes (all optional) ------------------------ */
 .muted  { color: var(--fertig-mut) }
 .center { text-align: center }
-.wide   { max-width: 66rem }
-/* on the toolbar .wide cannot mean "be 66rem wide" — the bar stays full-bleed
+.wide   { max-width: 80rem }
+/* on the toolbar .wide cannot mean "be 80rem wide" — the bar stays full-bleed
    and its contents move out to the wide column, so an app screen's wordmark
    lines up with the app's own content rather than floating mid-screen. */
-:is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav.wide { max-width: none; --fertig-nw: 66rem }
+: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 }
 /* Form controls are full-width blocks by default, which is right in a form and
    wrong in a toolbar. Inside a .row they size to the row instead. */
@@ -977,8 +981,8 @@ nav menu :is(a, button)[aria-current] {
 .max-w-7xl  { max-inline-size: 80rem }
 .max-w-full { max-inline-size: 100% }
 .max-w-none { max-inline-size: none }
-/* the measure the sheet already sets prose on, as a class you can reach for */
-.max-w-prose { max-inline-size: var(--fertig-w) }
+/* Keep the prose utility readable even when the page shell is app-wide. */
+.max-w-prose { max-inline-size: 38rem }
 .hidden { display: none }
 
 .badge {
@@ -1053,7 +1057,7 @@ optgroup { font-weight: 700; color: var(--fertig-mut) }
 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) }
-/* thin scrollbars, macOS weight */
+/* thin, unobtrusive scrollbars */
 /* scrollbar-width is Safari 18.2, scrollbar-color Safari 26.2 — both younger
    than the floor, and both left ungated on purpose: there is no fallback to
    write. An engine without them paints its own scrollbar, which is exactly
@@ -1074,7 +1078,6 @@ summary:hover { color: var(--fertig-ac) }
   :is(body, body > :where(#root, #app, #__next, [data-fertig])) > nav { display: none }
   /* the footer stays: the legal line, the contact and the citations live there,
      and a printout without them is missing the part people keep */
-  :is(body, body > :where(#root, #app, #__next, [data-fertig])) > footer { box-shadow: none; margin-bottom: 0 }
   body > *, body > :where(#root, #app, #__next, [data-fertig]) > * { border: 0; max-width: none }
   p, blockquote, li { orphans: 3; widows: 3 }   /* no stranded single lines */
   a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555 }
@@ -1110,12 +1113,6 @@ summary:hover { color: var(--fertig-ac) }
 /* CJK text wants punctuation and Latin spacing handled */
 :root { text-spacing-trim: trim-start; text-autospace: normal }
 
-/* translucency is decorative; drop it when it is unwanted */
-@media (prefers-reduced-transparency: reduce) {
-  body > nav { background: var(--fertig-face); backdrop-filter: none }
-  dialog::backdrop { backdrop-filter: none }
-}
-
 @media (prefers-contrast: more) {
   :root {
     --fertig-bd:  light-dark(#00000059, #ffffff6b);
@@ -1150,19 +1147,19 @@ summary:hover { color: var(--fertig-ac) }
 @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: #f3f6fad9;
-    --fertig-ac: #2850de; --fertig-on-ac: #fff;
+    --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: #1c222ad9;
+      --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: #1c222ad9;
+    --fertig-mut: #9da5b1; --fertig-bd: #eaeff721; --fertig-tb: #1c222a;
     --fertig-ac: #90b5ff; --fertig-on-ac: #07071c;
   }
 }

package/fertig.min.css

@@ -1 +1 @@
-/*! fertig v3.0.0 — 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,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fertig-fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--fertig-w:38rem;--fertig-r:12px;--fertig-rs:calc(var(--fertig-r) * .5);--fertig-rw:calc(var(--fertig-r) * 1.33);--fertig-rp:calc(infinity * 1px);--fertig-stone-100:oklch(97.5% .006 258);--fertig-stone-300:oklch(91% .009 258);--fertig-stone-500:oklch(72% .012 258);--fertig-stone-700:oklch(47% .014 258);--fertig-stone-900:oklch(26% .016 258);--fertig-sage-100:oklch(96% .024 160);--fertig-sage-300:oklch(87% .046 160);--fertig-sage-500:oklch(66% .064 160);--fertig-sage-700:oklch(47% .06 160);--fertig-sage-900:oklch(29% .042 160);--fertig-sky-100:oklch(96% .024 242);--fertig-sky-300:oklch(87% .05 244);--fertig-sky-500:oklch(64% .095 246);--fertig-sky-700:oklch(48% .1 250);--fertig-sky-900:oklch(30% .064 250);--fertig-clay-100:oklch(96% .024 45);--fertig-clay-300:oklch(88% .05 45);--fertig-clay-500:oklch(68% .095 45);--fertig-clay-700:oklch(50% .098 40);--fertig-clay-900:oklch(31% .06 40);--fertig-plum-100:oklch(96% .022 318);--fertig-plum-300:oklch(88% .042 318);--fertig-plum-500:oklch(66% .066 318);--fertig-plum-700:oklch(47% .07 318);--fertig-plum-900:oklch(29% .046 318);--fertig-gold-100:oklch(96.5% .03 92);--fertig-gold-300:oklch(89% .06 88);--fertig-gold-500:oklch(74% .092 85);--fertig-gold-700:oklch(55% .092 80);--fertig-gold-900:oklch(33% .056 80);--fertig-bg:light-dark(oklch(93.5% .008 258),oklch(15.5% .014 258));--fertig-el:light-dark(oklch(99% .004 258),oklch(21% .016 258));--fertig-face:light-dark(oklch(97.2% .006 258),oklch(25% .018 258));--fertig-fg:light-dark(oklch(22% .02 258),oklch(95% .012 258));--fertig-mut:light-dark(oklch(46% .018 258),oklch(72% .02 258));--fertig-bd:light-dark(oklch(22% .02 258 / .13),oklch(95% .012 258 / .13));--fertig-tb:light-dark(oklch(97.2% .006 258 / .85),oklch(25% .018 258 / .85));--fertig-ac:light-dark(oklch(50% .22 266),oklch(78% .13 266));--fertig-on-ac:light-dark(#fff,#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(0,(l - .62) * -100,1) 0 h)}}@supports (color:contrast-color(red)){:root{--fertig-on-ac:contrast-color(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=indigo]{--fertig-ac:light-dark(oklch(50% .19 275),oklch(78% .11 275))}[data-accent=sky]{--fertig-ac:light-dark(var(--fertig-sky-700),oklch(78% .085 245))}[data-accent=sage]{--fertig-ac:light-dark(var(--fertig-sage-700),oklch(80% .075 155))}[data-accent=clay]{--fertig-ac:light-dark(var(--fertig-clay-700),oklch(80% .085 45))}[data-accent=plum]{--fertig-ac:light-dark(var(--fertig-plum-700),oklch(80% .065 320))}[data-accent=gold]{--fertig-ac:light-dark(oklch(55% .085 80),oklch(84% .09 85))}[data-accent=slate]{--fertig-ac:light-dark(oklch(35% .01 250),oklch(86% .006 250))}*,::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])>*{max-width:var(--fertig-w);margin-inline:auto;padding-inline:1.9rem}body>:where(#root,#app,#__next,[data-fertig]){max-width:none;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);border-radius:0 0 var(--fertig-rw) var(--fertig-rw);margin-bottom:2.5rem;box-shadow:0 20px 32px -24px color-mix(in srgb,var(--fertig-sh) 38%,transparent)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;max-width:none;--fertig-nw:var(--fertig-w);padding-inline:max(1.9rem,calc(50% - var(--fertig-nw) / 2 + 1.9rem),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);backdrop-filter:saturate(180%) blur(20px);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}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:1.55rem;letter-spacing:-.015em}h2{font-size:1.25rem;letter-spacing:-.01em;margin-top:2.4rem}h3{font-size:1.08rem;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}}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-rp);box-shadow:var(--fertig-up);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)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--fertig-dn);translate:0 .5px}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}: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))}:is([type=submit],.primary){box-shadow:var(--fertig-up),inset 0 1px 0 light-dark(#fff3,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}@supports (corner-shape:squircle){:is(button,[type=submit],[type=button],[type=reset],input,select,textarea,fieldset,details,dialog,[popover],pre,kbd,code,samp,img,video,menu,aside,[data-avatar],[data-skeleton],.card,.badge){corner-shape:squircle}}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);backdrop-filter:blur(4px)}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:#fff;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-sage-700),oklch(76% .085 155))}[data-tone=warn]{--fertig-ac:light-dark(var(--fertig-gold-700),oklch(80% .095 85))}[data-tone=err]{--fertig-ac:light-dark(oklch(52% .16 27),oklch(74% .13 25))}[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:66rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--fertig-nw:66rem}.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:var(--fertig-w)}.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}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{box-shadow:none;margin-bottom:0}body>*,body>:where(#root,#app,#__next,[data-fertig])>*{border:0;max-width:none}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-reduced-transparency:reduce){body>nav{background:var(--fertig-face);backdrop-filter:none}dialog::backdrop{backdrop-filter:none}}@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:#f3f6fad9;--fertig-ac:#2850de;--fertig-on-ac:#fff}@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:#1c222ad9;--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:#1c222ad9;--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}}}
+/*! fertig v4.0.0 — 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])>*{max-width:var(--fertig-w);margin-inline:auto;padding-inline:var(--fertig-g)}body>:where(#root,#app,#__next,[data-fertig]){max-width:none;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;max-width:none;--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);box-shadow:var(--fertig-up);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)}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):active:not(:disabled){box-shadow:var(--fertig-dn);translate:0 .5px}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}: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))}:is([type=submit],.primary){box-shadow:var(--fertig-up),inset 0 1px 0 light-dark(#ffffff33,#ffffff26)}:is([type=submit],.primary):active:not(:disabled){box-shadow:inset 0 1px 3px #0006}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;max-width:none}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}}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fertig",
-  "version": "3.0.0",
-  "description": "A classless CSS stylesheet with no legacy in it: no polyfills, no classes. Link one file, write ordinary HTML, done — 8.4 KB gzipped, no build step, no dependencies.",
+  "version": "4.0.0",
+  "description": "A classless CSS stylesheet with no legacy in it: no polyfills, no required classes. Link one file, write ordinary HTML, done — 8.7 KB gzipped, no build step, no dependencies.",
   "keywords": [
     "fertig",
     "fertig.css",
@@ -59,6 +59,7 @@
     "LICENSE"
   ],
   "scripts": {
+    "test": "node --test",
     "build": "node build.js",
     "site": "eleventy --config=.eleventy.js",
     "site:serve": "eleventy --config=.eleventy.js --serve",