npm - fertig - Versions diffs - 4.0.2 → 4.0.4 - Mend

fertig 4.0.2 → 4.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -1,473 +1,76 @@
 # fertig
-[![Bundlephobia minified size](https://img.shields.io/bundlephobia/min/fertig?label=minified&cacheSeconds=86400)](https://bundlephobia.com/package/fertig)
-[![Bundlephobia minified and compressed size](https://img.shields.io/bundlephobia/minzip/fertig?label=min%2Bgzip&cacheSeconds=86400)](https://bundlephobia.com/package/fertig)
+[![minified size](https://img.shields.io/bundlephobia/min/fertig?label=minified&cacheSeconds=86400)](https://bundlephobia.com/package/fertig)
+[![min+gzip size](https://img.shields.io/bundlephobia/minzip/fertig?label=min%2Bgzip&cacheSeconds=86400)](https://bundlephobia.com/package/fertig)
-A classless CSS file that gives you **components**, not just styled elements —
-menus, dialogs, drawers, toasts and tooltips from plain semantic HTML,
-built from native HTML and the ARIA that makes it accessible, and working with
-JavaScript switched off.
+A classless CSS framework for finished interfaces. Link one file and write
+semantic HTML; fertig styles the page, forms, tables, dialogs, popovers,
+navigation, feedback, and common layout patterns.
-Link it, write ordinary HTML, and the page is finished.
+**36.7 KB raw · 8.6 KB gzipped · no build step · no dependencies · no JavaScript.**
-**36.6 KB raw · 8.6 KB gzipped · no build step · no dependencies · no JavaScript.**
-### What makes it different
-Surveyed across the eleven most-used classless stylesheets on 2026-08-31
-([working notes](docs/classless-landscape-2026.md)):
-- **Components addressed by ARIA.** Only one other classless sheet ships a
-  single ARIA-addressed component. None ships tabs, a segmented control, or an
-  anchored popover menu.
-- **Behaviour without JavaScript.** Others style `<dialog>` and leave the open
-  and close to you. Here `popover`, `command` and anchor positioning do it —
-  [audited with scripting disabled](#components-that-work-without-javascript).
-- **Modern CSS.** Zero of the eleven use `oklch()`, `light-dark()`, `@layer`,
-  `@property`, container queries or anchor positioning. This sheet uses all of
-  them.
-- **Cascade-layered.** It lives in `@layer fertig`, so your own unlayered CSS
-  wins at any specificity and overriding never needs `!important`. No other
-  classless sheet does this.
-- **RTL by construction.** Written in logical properties throughout, not
-  patched with `[dir=rtl]` overrides afterwards.
-`fertig.min.css` is 8.6 KB gzipped. That includes semantic element styling,
-the component layer, responsive utilities, light and dark themes, RTL support
-and accessibility safeguards. Size is a constraint here, not the pitch.
-## Components that work without JavaScript
-Audited in a browser with scripting disabled:
-| | |
-|---|---|
-| Popover menu, dialog, drawer, toast, tooltip, disclosure | **work with no script** |
-| Tabs | **styled only** — selection, panels and arrow keys need a short script |
-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">
-```
-That is the whole integration. Write semantic HTML; it looks finished.
-Open the [live site](https://moji2002.github.io/fertig/) for the full demo.
-## Upgrading from 2.x
-3.0 is breaking for one reason: **every public token now carries a `--fertig-`
-prefix**, and the old names are gone — no aliases. The classes, the ARIA
-attributes the components read, and the layout utilities are all unchanged.
-The sheet's behaviour is the same; the migration is a rename.
-If you override tokens, prefix what you set. The common ones:
-| 2.x | 3.0 |
-|---|---|
-| `--ac` | `--fertig-ac` |
-| `--on-ac` | `--fertig-on-ac` |
-| `--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-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
-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).
-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.
-- **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.
-## Install
+## Use
 ```sh
 npm install fertig
 ```
-```html
-<!-- or from a CDN, pinned -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@4/fertig.min.css">
-```
 ```css
-/* or through a bundler */
 @import "fertig";
 ```
-## What it is
-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 flat 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.** Cards sit above the page while
-  buttons stay flat and 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.
-## Layout
-Direct children of `<body>` are full-width containers with responsive page
-gutters:
+Or use the CDN:
 ```html
-<body>
-  <nav>…</nav>       <!-- toolbar: full-bleed, contents on the page column -->
-  <header>…</header>
-  <main>…</main>
-  <footer>…</footer>
-</body>
-```
-There is no default maximum width on body-level containers. Add
-`.max-w-prose` to long-form content for a readable `38rem` line length, or use
-the `max-w-*` utilities when a page needs a specific measure. The
-`--fertig-g` gutter scales from `1.15rem` on narrow phones to `1.9rem` on
-larger screens.
-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:
-```html
-<body>
-  <div id="root">
-    <nav>…</nav>
-    <main>…</main>
-  </div>
-</body>
-```
-Deeper than that, or a differently named mount node, and you re-point the shell
-yourself — it is the only place `body >` appears:
-```css
-#shell > *, #shell > header, #shell > main, #shell > footer { /* … */ }
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fertig@4/fertig.min.css">
 ```
-## Components
+That is the complete setup. See the [documentation](https://moji2002.github.io/fertig/docs.html),
+[component catalogue](https://moji2002.github.io/fertig/components.html), and
+[copy-paste blocks](https://moji2002.github.io/fertig/blocks.html).
-Addressed by semantic HTML and ARIA attributes, not by component classes — the
-markup stays accessible by construction.
+## What it includes
-| Component | Markup |
-|---|---|
-| Segmented control | `<div role="group">` of buttons, `aria-pressed` |
-| 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; 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 |
-| Card anatomy | `<header>` / `<footer>` inside `.card`; `<a class="card">` lifts on hover |
-| Tones | `data-tone="ok\|warn\|err"` retints any component |
+- Light and dark themes through `light-dark()`
+- Accessible forms, tables, cards, alerts, tabs, menus, dialogs, drawers,
+  toasts, tooltips, skeletons, and more
+- Native no-JavaScript behavior for popovers, dialogs, drawers, disclosures,
+  toasts, and tooltips
+- Logical properties for RTL layouts
+- OKLCH color ramps and WCAG AA semantic pairs
+- A cascade layer, so unlayered project CSS overrides fertig cleanly
-And a second set, added for parity with the component libraries — same rule,
-no classes:
+Seven component classes are optional: `.row`, `.grid`, `.card`, `.badge`,
+`.muted`, `.center`, and `.wide`. Layout utilities are available when semantic
+HTML alone cannot express the layout.
-| Component | Markup |
-|---|---|
-| Avatar | `data-avatar` on an `<img>` or on initials in a `<span>`; `="sm\|lg"` |
-| Skeleton | `data-skeleton` on the element that is still loading |
-| Sheet / drawer | `<dialog data-side="left\|right\|bottom">` — the same dialog, docked to an edge |
-| Toast | `[popover][data-toast]` — non-modal, parked in a corner. Several at once: `<div popover="manual" data-toast-region>` with a `<div data-toast>` per message |
-| List group | a plain `<menu>` outside a popover becomes a bordered list |
-| Nav menu | a `<menu>` inside a `<nav>` is navigation instead — no rules, no bullets, `aria-current` marks the page |
-| Sidebar layout | `data-layout="sidebar"` on a wrapper of two children; the first sticks |
-| Carousel | `data-carousel` — scroll snapping, with real scroll buttons where they exist |
+## Customize
-## The seven optional classes
-`.row` `.grid` `.card` `.badge` `.muted` `.center` `.wide`
-Plus `.primary` on a button — though `type="submit"` already gets it.
-## Layout utilities
-A compact set of predictable layout helpers covers common flex, grid,
-alignment, gap, margin, width and visibility needs.
-```
-.flex  .flex-col  .flex-wrap  .flex-1
-.grid-cols-2  .grid-cols-3  .grid-cols-4
-.items-start  .items-center  .items-end
-.justify-start  .justify-center  .justify-end  .justify-between
-.gap-0  .gap-1  .gap-2  .gap-3  .gap-4  .gap-6      (0 · .25 · .5 · .75 · 1 · 1.5rem)
-.mx-auto  .ms-auto  .me-auto  .w-full  .hidden
-.max-w-xs .max-w-sm .max-w-md .max-w-lg .max-w-xl            (20 · 24 · 28 · 32 · 36rem)
-.max-w-2xl .max-w-3xl .max-w-4xl .max-w-5xl .max-w-6xl .max-w-7xl  (42 · 48 · 56 · 64 · 72 · 80rem)
-.max-w-full  .max-w-none  .max-w-prose
-```
-Layout and width only. No colour or type scale, and no responsive
-variants — those need a build step, and this file does not have one. The
-margins are flow-relative (`ms`/`me`, not `ml`/`mr`), so a toolbar still lands
-correctly in Persian or Arabic. `.grid` is fertig's own auto-fit grid;
-adding `.grid-cols-3` pins it to three columns.
-The `max-w-*` scale is complete rather than partial — a half-scale 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 can constrain a page container as readily as
-anything inside one. `.max-w-prose` is a fixed `38rem` reading measure.
-## Customising
-Override the tokens you'd actually want to change:
+Override tokens in your own CSS:
 ```css
 :root {
-  --fertig-ac: light-dark(var(--fertig-blue-700), var(--fertig-blue-300)); /* blue accent */
-  --fertig-w: 48rem;                                              /* toolbar content width */
-  --fertig-g: 1.25rem;                                            /* page gutter */
-  --fertig-r: 0px;                                                /* control radius — go sharp */
-  --fertig-f: "Inter", system-ui, sans-serif;                     /* text font */
+  --fertig-ac: oklch(52% 0.18 270);
+  --fertig-r: 10px;
+  --fertig-w: 72rem;
 }
 ```
-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="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:
-```html
-<button data-tone="err">Delete</button>
-```
-If you change `--fertig-ac`, check `--fertig-on-ac` too — that is the text
-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 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
-of the viewport.
-## Also handled
-`:target`, external-link arrows, `user-invalid` fields, a CSS-drawn select
-chevron, thin scrollbars, `sup`/`sub` that don't stretch lines, `q`/`dfn`/
-`ins`/`del`/`address`/`meter`/`output`/`optgroup`/`hgroup`, print styles, and
-`prefers-reduced-motion`.
-## Right-to-left
-Every inline-direction rule is flow-relative — `padding-inline-start`,
-`border-inline-start`, `margin-inline-end`, `text-align: start`,
-`border-start-end-radius` — so `dir="rtl"` mirrors the sheet with nothing to
-configure:
-```html
-<html lang="fa" dir="rtl">
-```
-List markers, blockquote and `<aside>` accent bars, table gutters, breadcrumb
-separators, the segmented control's rounded ends, the `<select>` chevron and
-the switch knob all move to the correct side. Two of those cannot be expressed
-logically — `translate` and a background position — and carry `:dir(rtl)`
-rules instead. The layout utilities follow the same rule: `.ms-auto` and
-`.me-auto` exist, `.ml-auto` deliberately does not.
-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, calculated from the computed token values:
-| Pair | Light | Dark |
-|---|---:|---:|
-| 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 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
-assistive technology reads.
-## Size
-| File | Raw | Gzip |
-|---|---:|---:|
-| **fertig.min.css** | **36.6 KB** | **8.6 KB** |
-Measured with `gzip -9`; KB = 1024 bytes.
-## Overriding it
-The sheet declares two layers, `@layer fertig, fertig-a11y` — the second holds
-the forced-colors block so it can beat a `.card` shadow on layer order instead
-of `!important`. Anything you write outside a layer beats both whatever the
-specificity, so overriding is never a fight:
-```css
-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 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; `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
-that used to need it are taken with `color-mix` against `transparent` instead —
-pixel-identical, and three years older, which is what keeps Safari 17.5 inside
-the floor. Two things are *not* on the list because they are part of the floor:
-`@property`, which types the shadow alphas so elevation can transition, and
-`container-type` on `.card`, which makes every card a container you can write
-`@container` queries against.
-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`.
-And it survives content it has never seen: a pasted URL wraps instead of
-widening the page, tables scroll themselves on a phone, autofilled fields are
-repainted so the browser yellow never shows, required and read-only fields
-read correctly, numerals are slashed and tabular, and print gets real page
-margins with no stranded lines.
-## Browser support
-The two-year window is on *browsers*, not on CSS. fertig runs in anything
-released since August 2024. The CSS it uses is mostly older than that:
-`@layer` has been cross-engine since 2022, `oklch()` and `color-mix()` since
-2023, `light-dark()` since May 2024. The newest thing it *requires* is
-`@starting-style`, cross-engine since August 2024 — nothing it needs shipped
-inside the last two years.
-It carries almost nothing for the browsers before that: no polyfills, no
-fallback build, and no vendor prefixes beyond the three no engine has replaced
-(`-webkit-text-size-adjust`, the `-webkit-text-fill-color` autofill repaint,
-and the `progress` pseudo-elements). The one concession is a `@supports not
-(color: light-dark(…))` block restating the palette in flat sRGB — without it
-an engine that lacks `light-dark()` gets invalid colour tokens and lands
-unreadable rather than plain.
-| Engine | Minimum | Set by |
-|---|---|---|
-| Chrome / Edge | **123** | `light-dark()` |
-| Safari | **17.5** | `light-dark()`, `@starting-style`, `text-wrap: balance` |
-| Firefox | **129** | `@starting-style`, `transition-behavior` |
-No component needs more than that floor — anything a component would *like* to
-have it asks for through `@supports`. Anchor positioning, for instance, is
-gated; without it `[popover]` menus centre on screen instead of sitting under
-their button. Below the floor everything degrades to unstyled-but-readable
-HTML.
-Per-component and per-enhancement version tables, with the shipping dates
-behind them, are in [`docs/browser-support-research.md`](docs/browser-support-research.md)
-and on the [docs site](https://moji2002.github.io/fertig/docs.html#support).
 ## Development
 ```sh
-npm run hooks:install # enable the committed pre-commit hook in this clone
-npm run check         # run the same complete gate manually
-npm run build      # regenerate fertig.min.css and print sizes
-npm run site       # build the site into dist/ with Eleventy
-npm run site:serve # build + live-reload on :8080 (the Eleventy dev server)
-npm run sizes      # sync the size claims in README + site copy
+npm install
+npm run build       # regenerate fertig.min.css
+npm test            # library and site tests
+npm run site        # Astro production build
+npm run site:serve  # Astro development server
+npm run check       # complete release check
 ```
-The pre-commit gate is read-only for tracked files. It rejects whitespace
-errors, inconsistent release versions, stale minified CSS, stale size claims,
-bundle-budget regressions, test failures, invalid site output and unexpected
-package contents. If a generated file or size claim is stale, run the command
-named by the failure, review the diff, and commit it deliberately.
-Tracked changes must be fully staged, preventing an unstaged fix from hiding a
-broken staged snapshot during validation.
-## Builds
-| Build | Raw | Gzip | |
-|---|---:|---:|---|
-| `fertig.min.css` | 36.6 KB | 8.6 KB | everything |
-## Files
-The sheet:
-- `fertig.css` — source, commented
-- `fertig.min.css` — minified, what you ship
-- `build.js` — minifier and size report
-The site (Eleventy, output to `dist/`):
-- `src/_includes/layout.njk` — shared document shell and navigation
-- `src/_includes/{page-header,footer}.njk` — shared inner-page header and footer
-- `src/_data/site.js` — version pulled from `package.json` (the one source of truth)
-- `src/{index,docs,components,blocks}.njk` — the only authored page sources
-- `site.css`, `site.js`, `icons.svg`, `favicon.svg` — the site's own chrome,
-  none of it part of the sheet
-- `dist/` — the built site that GitHub Pages deploys
-Everything else:
-- `llms.txt` — machine-readable summary for LLMs, per llmstxt.org
-- `CHANGELOG.md` — what changed and why, per release
-- `docs/classless-css-research.md` — the research behind the decisions
-The sheet itself ships without the site — the npm package holds the two CSS
-files plus the README and licence, nothing else.
+The package publishes only `fertig.css`, `fertig.min.css`, this README, and the
+MIT license. The Astro site lives in `src/pages`, with its shared shell in
+`src/layouts` and `src/components`.
 ## License
-MIT © Mojtaba Beheshti
+MIT

package/fertig.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! fertig v4.0.2 — a classless CSS stylesheet. MIT */
+/*! fertig v4.0.4 — a classless CSS stylesheet. MIT */
 /* Opinions, so you don't have to have them:
    system type · one accent · responsive gutters · a clear content canvas.
@@ -476,6 +476,12 @@ button, [type=submit], [type=button], [type=reset],
 }
 :is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled) { background: var(--fertig-face) }
 [type=submit], .primary { background: var(--fertig-ac); border-color: transparent; color: var(--fertig-on-ac) }
+/* Filled controls must not keep their enabled accent after :disabled. This
+   follows the filled rule deliberately: equal-specificity declarations later
+   in the cascade restore the quiet control surface and muted text. */
+:is(button,[type=submit],[type=button],[type=reset]):disabled {
+  background: var(--fertig-face); border-color: var(--fertig-bd); color: var(--fertig-mut);
+}
 /* The filled button lightens on hover. color-mix does that in oklab, which is
    close enough and is Baseline; relative colour does it by adding to L
    directly, which holds the hue exactly when --fertig-ac is a wide-gamut override.
@@ -900,7 +906,9 @@ nav menu :is(a, button)[aria-current] {
 /* 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 { --fertig-nw: 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 }
 /* 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. */

package/fertig.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- /! fertig v4.0.2 — a classless CSS stylesheet. MIT /@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.06}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.05}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--fertig-ac);caret-color:var(--fertig-ac);--fertig-f:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fertig-fm:ui-monospace,"Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;--fertig-w:72rem;--fertig-g:clamp(1.15rem,4vw,1.9rem);--fertig-r:8px;--fertig-rs:calc(var(--fertig-r) * .5);--fertig-rw:calc(var(--fertig-r) * 1.33);--fertig-rp:calc(var(--fertig-r) * 1000);--fertig-gray-100:oklch(97% .005 260);--fertig-gray-300:oklch(82% .01 260);--fertig-gray-500:oklch(62% .014 260);--fertig-gray-700:oklch(47% .015 260);--fertig-gray-900:oklch(25% .018 260);--fertig-blue-100:oklch(96% .018 255);--fertig-blue-300:oklch(80% .095 255);--fertig-blue-500:oklch(62% .16 255);--fertig-blue-700:oklch(47% .15 255);--fertig-blue-900:oklch(29% .09 255);--fertig-cyan-100:oklch(96% .025 210);--fertig-cyan-300:oklch(82% .085 210);--fertig-cyan-500:oklch(64% .11 210);--fertig-cyan-700:oklch(47% .08 210);--fertig-cyan-900:oklch(29% .05 210);--fertig-green-100:oklch(96% .025 150);--fertig-green-300:oklch(80% .095 150);--fertig-green-500:oklch(62% .13 150);--fertig-green-700:oklch(46% .10 150);--fertig-green-900:oklch(28% .06 150);--fertig-amber-100:oklch(97% .025 80);--fertig-amber-300:oklch(84% .10 80);--fertig-amber-500:oklch(72% .14 80);--fertig-amber-700:oklch(50% .10 80);--fertig-amber-900:oklch(29% .06 80);--fertig-red-100:oklch(96% .018 25);--fertig-red-300:oklch(80% .10 25);--fertig-red-500:oklch(62% .18 25);--fertig-red-700:oklch(47% .15 25);--fertig-red-900:oklch(28% .09 25);--fertig-violet-100:oklch(96% .018 290);--fertig-violet-300:oklch(80% .095 290);--fertig-violet-500:oklch(62% .16 290);--fertig-violet-700:oklch(47% .15 290);--fertig-violet-900:oklch(28% .09 290);--fertig-bg:light-dark(oklch(93.5% .008 260),oklch(15.5% .014 260));--fertig-el:light-dark(oklch(99% .004 260),oklch(21% .016 260));--fertig-face:light-dark(oklch(97.2% .006 260),oklch(25% .018 260));--fertig-fg:light-dark(oklch(22% .02 260),oklch(95% .012 260));--fertig-mut:light-dark(oklch(46% .018 260),oklch(72% .02 260));--fertig-bd:light-dark(oklch(22% .02 260 / .13),oklch(95% .012 260 / .13));--fertig-tb:light-dark(oklch(97.2% .006 260),oklch(25% .018 260));--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-on-ac:light-dark(#f7f8fb,#07071c);--fertig-sh:oklch(30% .012 270);--fertig-a1:.06;--fertig-a2:.05;--fertig-sh1:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a1) * 100%),transparent);--fertig-sh2:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a2) * 100%),transparent);--fertig-up:0 1px 1px var(--fertig-sh1);--fertig-up2:0 1px 1px var(--fertig-sh1),0 8px 22px -8px var(--fertig-sh2);--fertig-dn:inset 0 1px 2px color-mix(in srgb,var(--fertig-sh) 7%,transparent);--fertig-caps:.74em/1.4 var(--fertig-f);--fertig-ease-out:cubic-bezier(.22,1,.36,1);--fertig-ease-in:cubic-bezier(.55,0,1,.45);--fertig-ease:cubic-bezier(.4,0,.2,1);--fertig-dur-1:.12s;--fertig-dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:.42;--fertig-a2:.38}}@supports (color:oklch(from red l c h)){:root{--fertig-on-ac:oklch(from var(--fertig-ac) clamp(.06,(l - .62) * -100,.96) 0 h)}}@supports (color:contrast-color(red)){:root{--fertig-on-ac:color-mix(in oklab,contrast-color(var(--fertig-ac)) 96%,var(--fertig-ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:.06;--fertig-a2:.05}[data-theme=dark]{color-scheme:dark;--fertig-a1:.42;--fertig-a2:.38}[data-accent=blue]{--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300))}[data-accent=cyan]{--fertig-ac:light-dark(var(--fertig-cyan-700),var(--fertig-cyan-300))}[data-accent=green]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-accent=amber]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-accent=red]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-accent=violet]{--fertig-ac:light-dark(var(--fertig-violet-700),var(--fertig-violet-300))}[data-accent=gray]{--fertig-ac:light-dark(var(--fertig-gray-700),var(--fertig-gray-300))},::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--fertig-f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--fertig-bg);color:var(--fertig-fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--fertig-ac) 45%,transparent);outline-offset:1px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}body>,body>:where(#root,#app,#__next,[data-fertig])>{padding-inline:var(--fertig-g)}body>:where(#root,#app,#__next,[data-fertig]){padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--fertig-el);border-inline:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd);border-bottom:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;--fertig-nw:var(--fertig-w);padding-inline:max(var(--fertig-g),calc(50% - var(--fertig-nw) / 2 + var(--fertig-g)),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--fertig-tb);color:var(--fertig-fg);border-bottom:1px solid var(--fertig-bd);font-size:.92em}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fertig-fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav :is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}@media (width <= 40rem){:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{row-gap:.55rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul{order:2;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul::-webkit-scrollbar{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>:last-child:not(ul){margin-inline-start:auto}}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:clamp(2rem,1.55rem + 1.5vw,2.8rem);letter-spacing:-.035em}h2{font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);letter-spacing:-.02em;margin-top:2.4rem}h3{font-size:1.12rem;letter-spacing:-.008em;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.1em;color:var(--fertig-mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) + :is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--fertig-ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--fertig-mut)}hr{border:0;border-top:1px solid var(--fertig-bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--fertig-bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--fertig-mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--fertig-mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--fertig-mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--fertig-mut);text-align:center}code,kbd,samp,pre{font-family:var(--fertig-fm);font-size:.9em}:not(pre)>code,samp{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rs);padding:.08em .35em}kbd{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-bottom-width:2px;border-radius:var(--fertig-rs);padding:.08em .4em;box-shadow:var(--fertig-up)}pre{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--fertig-syn-comment:light-dark(#6b7280,#8b949e);--fertig-syn-key:light-dark(#7c3aed,#c4a7fb);--fertig-syn-str:light-dark(#15803d,#7ee787);--fertig-syn-num:light-dark(#b45309,#f0b866);--fertig-syn-fn:light-dark(#1d4ed8,#93c5fd);--fertig-syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--fertig-syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--fertig-syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--fertig-syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--fertig-syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--fertig-syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--fertig-syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--fertig-mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--fertig-bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fertig-fg) 45%,transparent);font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.09em;color:var(--fertig-mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--fertig-bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--fertig-face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}table :is(th,td){white-space:nowrap}}caption{text-align:start;color:var(--fertig-mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--fertig-mut)}label:has(input){font-size:1rem;color:var(--fertig-fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px));background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:6px 6px;background-repeat:no-repeat}select:dir(rtl){background-position:12px 54%,17px 54%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--fertig-dur-1) var(--fertig-ease),translate var(--fertig-dur-1) var(--fertig-ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;background:var(--fertig-el);margin-block-start:.35rem;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--fertig-r) - 2px)}option:hover{background:var(--fertig-face)}option:checked{background:var(--fertig-ac);color:var(--fertig-on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}@media (prefers-reduced-motion:no-preference) and (update:fast){::picker(select){opacity:0;translate:0 -4px;transform-origin:top center;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}select:open::picker(select){opacity:1;translate:0}@starting-style{select:open::picker(select){opacity:0;translate:0 -4px}}}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--fertig-ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0;margin-inline-end:.45em;vertical-align:-.18em}:is(input[type=checkbox],input[type=radio],input[type=range],progress,select[multiple]){accent-color:var(--fertig-ac)}:is(input,textarea,[contenteditable]){caret-color:var(--fertig-ac)}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--fertig-mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--fertig-face);cursor:default}label:has(+ :required)::after,label:has(:required)::after{content:" ";color:var(--fertig-ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fertig-fg);box-shadow:var(--fertig-dn),inset 0 0 0 100px var(--fertig-el);caret-color:var(--fertig-ac)}:disabled{color:var(--fertig-mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.9rem 1rem 1rem;background:var(--fertig-face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--fertig-bd);font-size:.95em;font-weight:700;color:var(--fertig-fg)}legend + {clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.48em 1.1em;background:var(--fertig-el);color:var(--fertig-fg);cursor:pointer;border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--fertig-face)}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--fertig-ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--fertig-ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--fertig-face);border-color:var(--fertig-bd)}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--fertig-ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 7%,var(--fertig-face))}details{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.7rem 1.1rem;background:var(--fertig-el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--fertig-mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.6rem;max-width:min(30rem,92dvw);box-shadow:0 1px 1px color-mix(in srgb,var(--fertig-sh) 8%,transparent),0 28px 60px -22px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--fertig-sh) 32%,transparent)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.6rem;background:var(--fertig-el)}dialog>header{inset-block-start:-1.6rem;margin-block:-1.6rem .35rem;padding:1.6rem 1.6rem .5rem;font-weight:700;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0}dialog:is([open],:modal)>header>:is(h1,h2,h3,h4,p){margin:0;font-family:var(--fertig-f);font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}dialog>footer{inset-block-end:-1.6rem;margin-block:1.35rem -1.6rem;padding:.5rem 1.6rem 1.6rem;border-radius:0 0 var(--fertig-rw) var(--fertig-rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}@supports (animation-timeline:scroll()){dialog>header{animation:fertig-rule-under linear both;animation-timeline:scroll(nearest);animation-range:0 1.2rem}dialog>footer{animation:fertig-rule-over linear both;animation-timeline:scroll(nearest);animation-range:calc(100% - 1.2rem) 100%}@keyframes fertig-rule-under{from{box-shadow:none}to{box-shadow:0 1px 0 var(--fertig-bd)}}@keyframes fertig-rule-over{from{box-shadow:0 -1px 0 var(--fertig-bd)}to{box-shadow:none}}}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--fertig-mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--fertig-dur-2) var(--fertig-ease-out),translate var(--fertig-dur-2) var(--fertig-ease-out),display var(--fertig-dur-2) allow-discrete,overlay var(--fertig-dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}aside{border:1px solid var(--fertig-bd);border-inline-start:3px solid var(--fertig-ac);border-radius:var(--fertig-rw);border-start-start-radius:0;border-end-start-radius:0;background:var(--fertig-el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face)}progress::-webkit-progress-bar{background:var(--fertig-face);border-radius:var(--fertig-rp)}progress::-webkit-progress-value{background:var(--fertig-ac);border-radius:var(--fertig-rp)}progress::-moz-progress-bar{background:var(--fertig-ac);border-radius:var(--fertig-rp)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--fertig-ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;overflow:auto clip;overscroll-behavior-x:contain}[role=group]>{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:focus-visible{outline-offset:-3px}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--fertig-rp);border-end-start-radius:var(--fertig-rp)}[role=group]>:last-child{border-start-end-radius:var(--fertig-rp);border-end-end-radius:var(--fertig-rp)}[role=group]>[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}[role=group]>:active:not(:disabled){translate:none}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--fertig-bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.45em .9em;border-radius:var(--fertig-r) var(--fertig-r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}[role=tab][aria-selected=true]{color:var(--fertig-fg);box-shadow:inset 0 -2px 0 var(--fertig-ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;border-radius:var(--fertig-rp);border:0;background:color-mix(in srgb,var(--fertig-fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.02em;height:1.02em;border-radius:50%;background:#fff;box-shadow:var(--fertig-up);transition:translate .16s var(--fertig-ease-out)}input[switch]:checked,input[role=switch]:checked{background:var(--fertig-ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 0}[popover]{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover] :is(ul,menu){list-style:none;padding:0;margin:0}[popover] :is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--fertig-r) - 2px);font-weight:400}[popover] :is(a,button):hover:not(:disabled){background:var(--fertig-ac);color:var(--fertig-on-ac)}[popover] hr{margin:.3rem 0}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--fertig-mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible,:active)::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#f7f8fb;font-size:.8em;padding:.25em .55em;border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}[data-tooltip]:dir(rtl)::after{translate:50% -.45em}[data-tone=ok]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-tone=warn]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-tone=err]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-tone] .badge,.badge[data-tone]{color:var(--fertig-ac);border-color:var(--fertig-ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--fertig-face);border:1px solid var(--fertig-bd);font-size:.8em;font-weight:700;color:var(--fertig-mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--fertig-r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--fertig-face),color-mix(in srgb,var(--fertig-fg) 9%,var(--fertig-face)),var(--fertig-face));background-size:200% 100%}[data-skeleton] {visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}[popover][data-toast-region]{position:fixed;inset:auto 1rem 1rem auto;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;background:none;border:0;box-shadow:none;padding:0;max-block-size:none;overflow:visible;pointer-events:none}[popover][data-toast-region]>[data-toast]{pointer-events:auto;position:static;inset:auto;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover][data-toast-region]{position-area:none;inset:auto 1rem 1rem auto}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);background:var(--fertig-el)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--fertig-bd)}[popover] menu{border:0;padding:0;margin:0;background:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu :is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--fertig-r);background:none;box-shadow:none;font:inherit;color:var(--fertig-fg);text-decoration:none;opacity:.72}nav menu :is(a,button):hover{background:var(--fertig-face);opacity:1}nav menu :is(a,button)[aria-current]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--fertig-mut)}.center{text-align:center}.wide{max-width:80rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{--fertig-nw:80rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row :is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row :is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + {margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up2);display:flex;flex-direction:column;gap:.85rem}.card>{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:38rem}.hidden{display:none}.badge{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rp);background:var(--fertig-face);padding:.1em .6em;font:700 var(--fertig-caps);color:var(--fertig-mut);text-transform:uppercase;letter-spacing:.07em}.card>:is(header,footer){margin-inline:-1.1rem;padding-inline:1.1rem}.card>header{margin-top:-.25rem;padding-bottom:.7rem;font-weight:600;border-bottom:1px solid var(--fertig-bd)}.card>footer{margin-top:auto;margin-bottom:-.25rem;padding-top:.7rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;box-shadow:none}.card[data-tone]{background:linear-gradient(var(--fertig-ac),var(--fertig-ac)) top / 100% 3px no-repeat,var(--fertig-el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd));box-shadow:var(--fertig-up2),0 16px 30px -16px color-mix(in srgb,var(--fertig-sh) 28%,transparent);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-block-start:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--fertig-ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--fertig-ac)}del{color:var(--fertig-mut)}address{font-style:normal;color:var(--fertig-mut)}hgroup>{margin:0}hgroup>p{color:var(--fertig-mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--fertig-mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--fertig-face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--fertig-ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--fertig-bg:#fff;--fertig-el:#fff;--fertig-fg:#000;--fertig-bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}body>,body>:where(#root,#app,#__next,[data-fertig])>{border:0}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--fertig-ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-contrast:more){:root{--fertig-bd:light-dark(#00000059,#ffffff6b);--fertig-mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=group]>,[popover] :is(a,button){transition:box-shadow var(--fertig-dur-1) var(--fertig-ease),background-color var(--fertig-dur-1) var(--fertig-ease),border-color var(--fertig-dur-1) var(--fertig-ease),color var(--fertig-dur-1) var(--fertig-ease),translate .08s var(--fertig-ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--fertig-bg:#e6eaef;--fertig-el:#fafcfe;--fertig-face:#f3f6fa;--fertig-fg:#151b24;--fertig-mut:#525962;--fertig-bd:#151b2421;--fertig-tb:#f3f6fa;--fertig-ac:#2850de;--fertig-on-ac:#f7f8fb}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-bg:#090c12;--fertig-el:#141920;--fertig-face:#1c222a;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff721;--fertig-tb:#1c222a;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}[data-theme=dark]{--fertig-bg:#090c12;--fertig-el:#141920;--fertig-face:#1c222a;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff721;--fertig-tb:#1c222a;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true]{border-bottom:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}
1	+ /! fertig v4.0.4 — a classless CSS stylesheet. MIT /@property --fertig-a1{syntax:"<number>";inherits:true;initial-value:.06}@property --fertig-a2{syntax:"<number>";inherits:true;initial-value:.05}@layer fertig,fertig-a11y;@layer fertig{:root{color-scheme:light dark;accent-color:var(--fertig-ac);caret-color:var(--fertig-ac);--fertig-f:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fertig-fm:ui-monospace,"Cascadia Code","Roboto Mono",Consolas,"Liberation Mono",monospace;--fertig-w:72rem;--fertig-g:clamp(1.15rem,4vw,1.9rem);--fertig-r:8px;--fertig-rs:calc(var(--fertig-r) * .5);--fertig-rw:calc(var(--fertig-r) * 1.33);--fertig-rp:calc(var(--fertig-r) * 1000);--fertig-gray-100:oklch(97% .005 260);--fertig-gray-300:oklch(82% .01 260);--fertig-gray-500:oklch(62% .014 260);--fertig-gray-700:oklch(47% .015 260);--fertig-gray-900:oklch(25% .018 260);--fertig-blue-100:oklch(96% .018 255);--fertig-blue-300:oklch(80% .095 255);--fertig-blue-500:oklch(62% .16 255);--fertig-blue-700:oklch(47% .15 255);--fertig-blue-900:oklch(29% .09 255);--fertig-cyan-100:oklch(96% .025 210);--fertig-cyan-300:oklch(82% .085 210);--fertig-cyan-500:oklch(64% .11 210);--fertig-cyan-700:oklch(47% .08 210);--fertig-cyan-900:oklch(29% .05 210);--fertig-green-100:oklch(96% .025 150);--fertig-green-300:oklch(80% .095 150);--fertig-green-500:oklch(62% .13 150);--fertig-green-700:oklch(46% .10 150);--fertig-green-900:oklch(28% .06 150);--fertig-amber-100:oklch(97% .025 80);--fertig-amber-300:oklch(84% .10 80);--fertig-amber-500:oklch(72% .14 80);--fertig-amber-700:oklch(50% .10 80);--fertig-amber-900:oklch(29% .06 80);--fertig-red-100:oklch(96% .018 25);--fertig-red-300:oklch(80% .10 25);--fertig-red-500:oklch(62% .18 25);--fertig-red-700:oklch(47% .15 25);--fertig-red-900:oklch(28% .09 25);--fertig-violet-100:oklch(96% .018 290);--fertig-violet-300:oklch(80% .095 290);--fertig-violet-500:oklch(62% .16 290);--fertig-violet-700:oklch(47% .15 290);--fertig-violet-900:oklch(28% .09 290);--fertig-bg:light-dark(oklch(93.5% .008 260),oklch(15.5% .014 260));--fertig-el:light-dark(oklch(99% .004 260),oklch(21% .016 260));--fertig-face:light-dark(oklch(97.2% .006 260),oklch(25% .018 260));--fertig-fg:light-dark(oklch(22% .02 260),oklch(95% .012 260));--fertig-mut:light-dark(oklch(46% .018 260),oklch(72% .02 260));--fertig-bd:light-dark(oklch(22% .02 260 / .13),oklch(95% .012 260 / .13));--fertig-tb:light-dark(oklch(97.2% .006 260),oklch(25% .018 260));--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300));--fertig-on-ac:light-dark(#f7f8fb,#07071c);--fertig-sh:oklch(30% .012 270);--fertig-a1:.06;--fertig-a2:.05;--fertig-sh1:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a1) * 100%),transparent);--fertig-sh2:color-mix(in srgb,var(--fertig-sh) calc(var(--fertig-a2) * 100%),transparent);--fertig-up:0 1px 1px var(--fertig-sh1);--fertig-up2:0 1px 1px var(--fertig-sh1),0 8px 22px -8px var(--fertig-sh2);--fertig-dn:inset 0 1px 2px color-mix(in srgb,var(--fertig-sh) 7%,transparent);--fertig-caps:.74em/1.4 var(--fertig-f);--fertig-ease-out:cubic-bezier(.22,1,.36,1);--fertig-ease-in:cubic-bezier(.55,0,1,.45);--fertig-ease:cubic-bezier(.4,0,.2,1);--fertig-dur-1:.12s;--fertig-dur-2:.2s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-a1:.42;--fertig-a2:.38}}@supports (color:oklch(from red l c h)){:root{--fertig-on-ac:oklch(from var(--fertig-ac) clamp(.06,(l - .62) * -100,.96) 0 h)}}@supports (color:contrast-color(red)){:root{--fertig-on-ac:color-mix(in oklab,contrast-color(var(--fertig-ac)) 96%,var(--fertig-ac))}}[data-theme=light]{color-scheme:light;--fertig-a1:.06;--fertig-a2:.05}[data-theme=dark]{color-scheme:dark;--fertig-a1:.42;--fertig-a2:.38}[data-accent=blue]{--fertig-ac:light-dark(var(--fertig-blue-700),var(--fertig-blue-300))}[data-accent=cyan]{--fertig-ac:light-dark(var(--fertig-cyan-700),var(--fertig-cyan-300))}[data-accent=green]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-accent=amber]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-accent=red]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-accent=violet]{--fertig-ac:light-dark(var(--fertig-violet-700),var(--fertig-violet-300))}[data-accent=gray]{--fertig-ac:light-dark(var(--fertig-gray-700),var(--fertig-gray-300))},::before,::after{box-sizing:border-box}html{font:16px/1.65 var(--fertig-f);-webkit-text-size-adjust:100%;tab-size:2}body{margin:0;background:var(--fertig-bg);color:var(--fertig-fg);overflow-wrap:break-word;font-variant-numeric:slashed-zero tabular-nums}::selection{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}:focus-visible{outline:3px solid color-mix(in srgb,var(--fertig-ac) 45%,transparent);outline-offset:1px}img,video,iframe{display:block;max-width:100%;height:auto}svg{max-width:100%;vertical-align:middle}img,video{border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}body>,body>:where(#root,#app,#__next,[data-fertig])>{padding-inline:var(--fertig-g)}body>:where(#root,#app,#__next,[data-fertig]){padding-inline:0}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>:is(header,main,footer){background:var(--fertig-el);border-inline:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>header{padding-block:2.4rem .8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>main{padding-bottom:2.8rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>footer{padding-block:1.2rem 2rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd);border-bottom:1px solid var(--fertig-bd)}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{position:sticky;top:0;z-index:9;--fertig-nw:var(--fertig-w);padding-inline:max(var(--fertig-g),calc(50% - var(--fertig-nw) / 2 + var(--fertig-g)),env(safe-area-inset-left),env(safe-area-inset-right));display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-block:calc(.6rem + env(safe-area-inset-top,0px)) .6rem;background:var(--fertig-tb);color:var(--fertig-fg);border-bottom:1px solid var(--fertig-bd);font-size:.92em}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a{color:var(--fertig-fg);text-decoration:none;opacity:.75}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav a:hover{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav :is(strong,b) a{opacity:1}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav ul{display:flex;flex-wrap:wrap;gap:1.1rem;list-style:none;padding:0;margin:0;flex:1}@media (width <= 40rem){:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{row-gap:.55rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul{order:2;flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>ul::-webkit-scrollbar{display:none}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav>:last-child:not(ul){margin-inline-start:auto}}h1,h2,h3,h4,h5,h6{line-height:1.3;margin:1.4rem 0 .7rem;text-wrap:balance}h1{font-size:clamp(2rem,1.55rem + 1.5vw,2.8rem);letter-spacing:-.035em}h2{font-size:clamp(1.35rem,1.2rem + .5vw,1.65rem);letter-spacing:-.02em;margin-top:2.4rem}h3{font-size:1.12rem;letter-spacing:-.008em;margin-top:1.9rem}h4{font-size:1rem}h5,h6{font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.1em;color:var(--fertig-mut)}:is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0}@supports (text-box:trim-both cap alphabetic){h1,h2,h3,h4{text-box:trim-both cap alphabetic}}:is(section,article) + :is(section,article){margin-top:2.8rem}p,ul,ol,dl,pre,blockquote,table,figure,details,fieldset,hr{margin:1.1rem 0}p{text-wrap:pretty}a{color:var(--fertig-ac);text-underline-offset:3px;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}small{font-size:.85em;color:var(--fertig-mut)}hr{border:0;border-top:1px solid var(--fertig-bd);margin:2.2rem 0}mark{background:light-dark(#ffe58f,#5c4a15);color:inherit;border-radius:3px;padding:0 .15em}abbr[title]{text-decoration:underline dotted;cursor:help}blockquote{border-inline-start:2px solid var(--fertig-bd);padding-block:.15rem;padding-inline:1.2rem 0;color:var(--fertig-mut)}ul,ol{padding-inline-start:1.5rem}li::marker{color:var(--fertig-mut)}dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem}dt{color:var(--fertig-mut)}dd{margin:0}figcaption{font-size:.85em;color:var(--fertig-mut);text-align:center}code,kbd,samp,pre{font-family:var(--fertig-fm);font-size:.9em}:not(pre)>code,samp{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rs);padding:.08em .35em}kbd{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-bottom-width:2px;border-radius:var(--fertig-rs);padding:.08em .4em;box-shadow:var(--fertig-up)}pre{background:var(--fertig-face);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1rem;overflow-x:auto}pre code{background:none;border:0;padding:0;font-size:1em}:root{--fertig-syn-comment:light-dark(#6b7280,#8b949e);--fertig-syn-key:light-dark(#7c3aed,#c4a7fb);--fertig-syn-str:light-dark(#15803d,#7ee787);--fertig-syn-num:light-dark(#b45309,#f0b866);--fertig-syn-fn:light-dark(#1d4ed8,#93c5fd);--fertig-syn-attr:light-dark(#b91c1c,#ff9492)}:is(.hljs-comment,.hljs-quote,.token.comment,.token.prolog,.token.doctype){color:var(--fertig-syn-comment);font-style:italic}:is(.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type,.hljs-built_in,.token.keyword,.token.atrule,.token.rule,.token.important,.token.selector){color:var(--fertig-syn-key)}:is(.hljs-string,.hljs-meta-string,.token.string,.token.attr-value,.token.char){color:var(--fertig-syn-str)}:is(.hljs-number,.hljs-symbol,.hljs-bullet,.token.number,.token.boolean,.token.constant,.token.unit){color:var(--fertig-syn-num)}:is(.hljs-title,.hljs-name,.hljs-section,.hljs-function,.token.tag,.token.function,.token.class-name){color:var(--fertig-syn-fn)}:is(.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable,.token.attr-name,.token.property,.token.variable){color:var(--fertig-syn-attr)}:is(.hljs-punctuation,.hljs-operator,.token.punctuation,.token.operator){color:var(--fertig-mut)}:is(.hljs-emphasis,.token.italic){font-style:italic}:is(.hljs-strong,.token.bold){font-weight:700}:is(.hljs-deletion,.token.deleted){color:light-dark(#c0392b,#ff6b6b)}:is(.hljs-addition,.token.inserted){color:light-dark(#15803d,#7ee787)}table{width:100%;border-collapse:collapse;font-size:.92em}th,td{border-bottom:1px solid var(--fertig-bd);padding-block:.55rem;padding-inline:0 .7rem;text-align:start}th:last-child,td:last-child{padding-inline-end:0}thead th{border-bottom:1px solid color-mix(in srgb,var(--fertig-fg) 45%,transparent);font:700 var(--fertig-caps);text-transform:uppercase;letter-spacing:.09em;color:var(--fertig-mut);padding-bottom:.4rem}tbody tr:last-child td{border-bottom:0}tfoot td{font-weight:700;border-top:1px solid var(--fertig-bd);border-bottom:0}:is(th,td)[align=right]{text-align:right}:is(th,td)[align=center]{text-align:center}tbody tr:hover{background:var(--fertig-face)}@media (width <= 40rem){table{display:block;overflow-x:auto;overscroll-behavior-x:contain}table :is(th,td){white-space:nowrap}}caption{text-align:start;color:var(--fertig-mut);font-size:.85em;padding-bottom:.35rem}button,input,select,textarea{font:inherit;color:inherit}label{display:block;font-size:.85em;color:var(--fertig-mut)}label:has(input){font-size:1rem;color:var(--fertig-fg)}:is(input,select,textarea) + label{margin-top:.9rem}textarea{width:100%;min-height:5rem;resize:vertical}@supports (field-sizing:content){textarea{field-sizing:content;max-height:24rem}}input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset]),select,textarea{display:block;width:100%;padding:.52em .7em;background:var(--fertig-el);border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);box-shadow:var(--fertig-dn)}select{appearance:none;padding-inline-end:2.2rem;background-image:linear-gradient(45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + .5px),transparent calc(50% + .5px));background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:6px 6px;background-repeat:no-repeat}select:dir(rtl){background-position:12px 54%,17px 54%}select[multiple]{background-image:none;padding-inline-end:.6em}@supports (appearance:base-select){select,::picker(select){appearance:base-select}select{display:flex;align-items:center;justify-content:space-between;gap:.6em;background-image:none;padding-inline-end:.7em}select::picker-icon{content:"";inline-size:.45em;block-size:.45em;flex:none;border:solid currentColor;border-width:0 1px 1px 0;rotate:45deg;translate:0 -.15em;opacity:.7;transition:rotate var(--fertig-dur-1) var(--fertig-ease),translate var(--fertig-dur-1) var(--fertig-ease)}select:open::picker-icon{rotate:225deg;translate:0 .1em}::picker(select){min-width:anchor-size(width);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;background:var(--fertig-el);margin-block-start:.35rem;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}option{display:flex;align-items:center;gap:.5em;padding:.4em .6em;border-radius:calc(var(--fertig-r) - 2px)}option:hover{background:var(--fertig-face)}option:checked{background:var(--fertig-ac);color:var(--fertig-on-ac)}option::checkmark{order:1;margin-inline-start:auto;content:"✓"}@media (prefers-reduced-motion:no-preference) and (update:fast){::picker(select){opacity:0;translate:0 -4px;transform-origin:top center;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}select:open::picker(select){opacity:1;translate:0}@starting-style{select:open::picker(select){opacity:0;translate:0 -4px}}}}:is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent)}:is(input,select,textarea):focus-visible{border-color:var(--fertig-ac)}input[type=checkbox],input[type=radio]{width:1.15em;height:1.15em;margin:0;margin-inline-end:.45em;vertical-align:-.18em}:is(input[type=checkbox],input[type=radio],input[type=range],progress,select[multiple]){accent-color:var(--fertig-ac)}:is(input,textarea,[contenteditable]){caret-color:var(--fertig-ac)}label:has(input[type=checkbox]),label:has(input[type=radio]){line-height:1.9}input[type=range]{width:100%;height:1.15em}::placeholder{color:var(--fertig-mut)}@supports selector(::spelling-error){::spelling-error{text-decoration:wavy underline light-dark(#c0392b,#ff6b6b)}::grammar-error{text-decoration:wavy underline light-dark(#9a6700,#d29922)}}:is(input,textarea):read-only:not(:disabled){background:var(--fertig-face);cursor:default}label:has(+ :required)::after,label:has(:required)::after{content:" ";color:var(--fertig-ac)}input:autofill,input:autofill:hover,input:autofill:focus{-webkit-text-fill-color:var(--fertig-fg);box-shadow:var(--fertig-dn),inset 0 0 0 100px var(--fertig-el);caret-color:var(--fertig-ac)}:disabled{color:var(--fertig-mut);cursor:not-allowed;box-shadow:none}fieldset{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.9rem 1rem 1rem;background:var(--fertig-face)}fieldset:focus-within{border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd))}legend{float:left;width:100%;margin-bottom:.8rem;padding:0 0 .6rem;border-bottom:1px solid var(--fertig-bd);font-size:.95em;font-weight:700;color:var(--fertig-fg)}legend + {clear:left}button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),::file-selector-button{display:inline-block;text-decoration:none;text-align:center;padding:.48em 1.1em;background:var(--fertig-el);color:var(--fertig-fg);cursor:pointer;border:1px solid var(--fertig-bd);border-radius:var(--fertig-r);font:inherit;min-width:5rem}:is(button,[type=submit],[type=button],[type=reset],a.primary,a[role=button]):hover:not(:disabled){background:var(--fertig-face)}[type=submit],.primary{background:var(--fertig-ac);border-color:transparent;color:var(--fertig-on-ac)}:is(button,[type=submit],[type=button],[type=reset]):disabled{background:var(--fertig-face);border-color:var(--fertig-bd);color:var(--fertig-mut)}:is([type=submit],.primary,a.primary):hover:not(:disabled){background:color-mix(in oklab,var(--fertig-ac),#fff 9%)}@supports (color:oklch(from red l c h)){:is([type=submit],.primary,a.primary):hover:not(:disabled){background:oklch(from var(--fertig-ac) calc(l + .05) c h)}}:is(button,a,input,select,label)[data-size=sm]{padding:.2em .7em;font-size:.85em;min-width:0}:is(button,a,input,select,label)[data-size=lg]{padding:.55em 1.5em;font-size:1.05em}button[data-icon]{min-width:0;padding:.38em .62em;line-height:1}:is(button,a,input,select,label)[data-block]{display:block;width:100%;min-width:0}:is(button,a,input)[data-variant=ghost]{background:none;border-color:transparent;box-shadow:none}:is(button,a,input)[data-variant=ghost]:hover:not(:disabled){background:var(--fertig-face);border-color:var(--fertig-bd)}:is(button,a,input)[data-variant=link]{background:none;border:0;box-shadow:none;min-width:0;padding-inline:.2em;color:var(--fertig-ac);text-decoration:underline;text-underline-offset:3px}:is(button,a,input)[data-variant=link]:hover:not(:disabled){background:none;text-decoration-thickness:2px}button[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}button[aria-pressed=true]:hover:not(:disabled){background:color-mix(in srgb,var(--fertig-fg) 7%,var(--fertig-face))}details{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.7rem 1.1rem;background:var(--fertig-el)}summary{cursor:pointer;font-weight:700;list-style:none}summary::before{content:"▸ ";color:var(--fertig-mut)}details[open]>summary::before{content:"▾ "}details[open]>summary{margin-bottom:.6rem}dialog{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.6rem;max-width:min(30rem,92dvw);box-shadow:0 1px 1px color-mix(in srgb,var(--fertig-sh) 8%,transparent),0 28px 60px -22px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}dialog>:last-child:not(footer){margin-bottom:0}dialog,[popover]{overscroll-behavior:contain}dialog::backdrop{background:color-mix(in srgb,var(--fertig-sh) 32%,transparent)}dialog:has(>:is(header,footer)){max-block-size:min(44rem,85dvh);overflow:auto}dialog>:is(header,footer){position:sticky;z-index:1;margin-inline:-1.6rem;background:var(--fertig-el)}dialog>header{inset-block-start:-1.6rem;margin-block:-1.6rem .35rem;padding:1.6rem 1.6rem .5rem;font-weight:700;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0}dialog:is([open],:modal)>header>:is(h1,h2,h3,h4,p){margin:0;font-family:var(--fertig-f);font-size:1.1rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}dialog>footer{inset-block-end:-1.6rem;margin-block:1.35rem -1.6rem;padding:.5rem 1.6rem 1.6rem;border-radius:0 0 var(--fertig-rw) var(--fertig-rw);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;justify-content:flex-end}@supports (animation-timeline:scroll()){dialog>header{animation:fertig-rule-under linear both;animation-timeline:scroll(nearest);animation-range:0 1.2rem}dialog>footer{animation:fertig-rule-over linear both;animation-timeline:scroll(nearest);animation-range:calc(100% - 1.2rem) 100%}@keyframes fertig-rule-under{from{box-shadow:none}to{box-shadow:0 1px 0 var(--fertig-bd)}}@keyframes fertig-rule-over{from{box-shadow:0 -1px 0 var(--fertig-bd)}to{box-shadow:none}}}dialog>footer>:is(p,span):first-child{margin:0;margin-inline-end:auto;color:var(--fertig-mut)}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog,dialog::backdrop{transition:opacity var(--fertig-dur-2) var(--fertig-ease-out),translate var(--fertig-dur-2) var(--fertig-ease-out),display var(--fertig-dur-2) allow-discrete,overlay var(--fertig-dur-2) allow-discrete}dialog{opacity:0;translate:0 10px}dialog[open]{opacity:1;translate:0}dialog::backdrop{opacity:0}dialog[open]::backdrop{opacity:1}@starting-style{dialog[open]{opacity:0;translate:0 10px}}@starting-style{dialog[open]::backdrop{opacity:0}}[popover]{opacity:0;translate:0 -4px;transition:opacity .13s var(--fertig-ease-out),translate .13s var(--fertig-ease-out),display .13s allow-discrete,overlay .13s allow-discrete}[popover]:popover-open{opacity:1;translate:0}@starting-style{[popover]:popover-open{opacity:0;translate:0 -4px}}}search{display:block;margin-block:1.1rem}::target-text{background:color-mix(in srgb,var(--fertig-ac) 28%,transparent)}aside{border:1px solid var(--fertig-bd);border-inline-start:3px solid var(--fertig-ac);border-radius:var(--fertig-rw);border-start-start-radius:0;border-end-start-radius:0;background:var(--fertig-el);padding:.7rem 1.1rem;margin-block:1.1rem}progress{width:100%;height:.5rem;border:0;border-radius:var(--fertig-rp);background:var(--fertig-face)}progress::-webkit-progress-bar{background:var(--fertig-face);border-radius:var(--fertig-rp)}progress::-webkit-progress-value{background:var(--fertig-ac);border-radius:var(--fertig-rp)}progress::-moz-progress-bar{background:var(--fertig-ac);border-radius:var(--fertig-rp)}@supports selector(::details-content){@media (prefers-reduced-motion:no-preference) and (update:fast){details{interpolate-size:allow-keywords}details::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--fertig-ease),content-visibility .28s allow-discrete}details[open]::details-content{block-size:auto}}}[role=group]{display:inline-flex;vertical-align:middle;max-inline-size:100%;overflow:auto clip;overscroll-behavior-x:contain}[role=group]>{border-radius:0;margin-inline-start:-1px;box-shadow:none;min-width:0}[role=group]>:focus-visible{outline-offset:-3px}[role=group]>:first-child{margin-inline-start:0;border-start-start-radius:var(--fertig-rp);border-end-start-radius:var(--fertig-rp)}[role=group]>:last-child{border-start-end-radius:var(--fertig-rp);border-end-end-radius:var(--fertig-rp)}[role=group]>[aria-pressed=true]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:700}[role=group]>:active:not(:disabled){translate:none}[role=tablist]{display:flex;gap:.1rem;border-bottom:1px solid var(--fertig-bd);margin:1.1rem 0}[role=tab]{background:none;border:0;box-shadow:none;min-width:0;color:var(--fertig-mut);padding:.45em .9em;border-radius:var(--fertig-r) var(--fertig-r) 0 0;margin-bottom:-1px}[role=tab]:hover:not(:disabled){background:var(--fertig-face);color:var(--fertig-fg)}[role=tab][aria-selected=true]{color:var(--fertig-fg);box-shadow:inset 0 -2px 0 var(--fertig-ac)}input[type=checkbox][switch],input[type=checkbox][role=switch]{appearance:none;width:2.2em;height:1.3em;border-radius:var(--fertig-rp);border:0;background:color-mix(in srgb,var(--fertig-fg) 20%,transparent);position:relative;cursor:pointer;vertical-align:-.3em;margin-inline-end:.5em}input[switch]::after,input[role=switch]::after{content:"";position:absolute;inset-block-start:.14em;inset-inline-start:.14em;width:1.02em;height:1.02em;border-radius:50%;background:#fff;box-shadow:var(--fertig-up);transition:translate .16s var(--fertig-ease-out)}input[switch]:checked,input[role=switch]:checked{background:var(--fertig-ac)}input[switch]:checked::after,input[role=switch]:checked::after{translate:.9em 0}:is(input[switch],input[role=switch]):checked:dir(rtl)::after{translate:-.9em 0}[popover]{background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:.35rem;min-width:12rem;max-block-size:60dvh;overflow:auto;font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover]{position:fixed;inset:auto;position-anchor:auto;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline;margin:.35rem 0 0}@supports (min-width:anchor-size(width)){[popover]{min-width:max(12rem,anchor-size(width));position-visibility:anchors-visible}}}[popover] :is(ul,menu){list-style:none;padding:0;margin:0}[popover] :is(a,button):not(:disabled){display:block;width:100%;text-align:start;background:none;border:0;box-shadow:none;min-width:0;padding:.4em .6em;text-decoration:none;color:inherit;border-radius:calc(var(--fertig-r) - 2px);font-weight:400}[popover] :is(a,button):hover:not(:disabled){background:var(--fertig-ac);color:var(--fertig-on-ac)}[popover] hr{margin:.3rem 0}nav[aria-label] ol{display:flex;flex-wrap:wrap;gap:.5em;list-style:none;padding:0;font-size:.9em}nav[aria-label] ol li + li::before{content:"/";margin-inline-end:.5em;color:var(--fertig-mut)}[aria-busy=true]{cursor:progress}[aria-busy=true]::before{content:"";display:inline-block;width:.85em;height:.85em;margin-inline-end:.55em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;vertical-align:-.1em}@media (prefers-reduced-motion:no-preference) and (update:fast){[aria-busy=true]::before{animation:fertig-spin .6s linear infinite}}@keyframes fertig-spin{to{rotate:360deg}}[data-tooltip]{position:relative}[data-tooltip]:is(:hover,:focus-visible,:active)::after{content:attr(data-tooltip);position:absolute;inset-block-end:100%;inset-inline-start:50%;translate:-50% -.45em;z-index:10;white-space:nowrap;pointer-events:none;background:light-dark(#1d1d1f,#3a3a40);color:#f7f8fb;font-size:.8em;padding:.25em .55em;border-radius:var(--fertig-r);box-shadow:var(--fertig-up2)}[data-tooltip]:dir(rtl)::after{translate:50% -.45em}[data-tone=ok]{--fertig-ac:light-dark(var(--fertig-green-700),var(--fertig-green-300))}[data-tone=warn]{--fertig-ac:light-dark(var(--fertig-amber-700),var(--fertig-amber-300))}[data-tone=err]{--fertig-ac:light-dark(var(--fertig-red-700),var(--fertig-red-300))}[data-tone] .badge,.badge[data-tone]{color:var(--fertig-ac);border-color:var(--fertig-ac)}[data-avatar]{display:inline-grid;place-items:center;flex:none;overflow:hidden;inline-size:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--fertig-face);border:1px solid var(--fertig-bd);font-size:.8em;font-weight:700;color:var(--fertig-mut);object-fit:cover}[data-avatar=sm]{inline-size:1.75rem;font-size:.7em}[data-avatar=lg]{inline-size:3.5rem;font-size:1em}[data-skeleton]{color:transparent;border-radius:var(--fertig-r);pointer-events:none;user-select:none;min-height:1em;background:linear-gradient(90deg,var(--fertig-face),color-mix(in srgb,var(--fertig-fg) 9%,var(--fertig-face)),var(--fertig-face));background-size:200% 100%}[data-skeleton] {visibility:hidden}@media (prefers-reduced-motion:no-preference) and (update:fast){[data-skeleton]{animation:fertig-shimmer 1.4s linear infinite}@keyframes fertig-shimmer{to{background-position:-200% 0}}}dialog[data-side]{max-width:none;margin:0;border-radius:0;padding:1.4rem}dialog[data-side=right]{inset:0 0 0 auto;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-end:0}dialog[data-side=left]{inset:0 auto 0 0;block-size:100dvh;inline-size:min(28rem,92dvw);border-block:0;border-inline-start:0}dialog[data-side=bottom]{inset:auto 0 0 0;inline-size:100%;max-block-size:85dvh;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;border-bottom:0}@media (prefers-reduced-motion:no-preference) and (update:fast){dialog[data-side=right]{translate:100% 0}dialog[data-side=left]{translate:-100% 0}dialog[data-side=bottom]{translate:0 100%}dialog[data-side][open]{translate:0 0}@starting-style{dialog[data-side=right][open]{translate:100% 0}dialog[data-side=left][open]{translate:-100% 0}dialog[data-side=bottom][open]{translate:0 100%}}}[popover][data-toast]{position:fixed;inset:auto 1rem 1rem auto;margin:0;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem}@supports (position-area:block-end span-inline-end){[popover][data-toast]{position-area:none;inset:auto 1rem 1rem auto;min-width:16rem}}[popover][data-toast-region]{position:fixed;inset:auto 1rem 1rem auto;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;background:none;border:0;box-shadow:none;padding:0;max-block-size:none;overflow:visible;pointer-events:none}[popover][data-toast-region]>[data-toast]{pointer-events:auto;position:static;inset:auto;min-width:16rem;max-width:min(24rem,92dvw);padding:.8rem 1rem;background:var(--fertig-el);color:var(--fertig-fg);border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);font-size:.95em;box-shadow:var(--fertig-up2),0 24px 44px -18px color-mix(in srgb,var(--fertig-sh) 28%,transparent)}@supports (position-area:block-end span-inline-end){[popover][data-toast-region]{position-area:none;inset:auto 1rem 1rem auto}}menu{list-style:none;padding:0;margin:1.1rem 0;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);background:var(--fertig-el)}menu>li{padding:.55rem .85rem}menu>li + li{border-top:1px solid var(--fertig-bd)}[popover] menu{border:0;padding:0;margin:0;background:none}[popover] menu>li{padding:0}[popover] menu>li + li{border-top:0}nav menu{border:0;background:none;padding:0;margin-block:0 1.2rem}nav menu>li{padding:0}nav menu>li + li{border-top:0}nav menu :is(a,button){display:block;inline-size:100%;text-align:start;padding:.38rem .6rem;border:0;border-radius:var(--fertig-r);background:none;box-shadow:none;font:inherit;color:var(--fertig-fg);text-decoration:none;opacity:.72}nav menu :is(a,button):hover{background:var(--fertig-face);opacity:1}nav menu :is(a,button)[aria-current]{background:var(--fertig-face);color:var(--fertig-ac);font-weight:600;opacity:1}[data-layout=sidebar]{display:grid;gap:1.5rem;align-items:start}@media (width>= 56rem){[data-layout=sidebar]{grid-template-columns:15rem minmax(0,1fr)}[data-layout=sidebar]>:first-child{position:sticky;top:4.5rem}}[data-layout=sidebar]>{min-width:0}[data-carousel]{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}[data-carousel]>{scroll-snap-align:start;flex:0 0 min(20rem,82%)}.muted{color:var(--fertig-mut)}.center{text-align:center}.wide{max-width:80rem}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav.wide{max-width:none;--fertig-nw:80rem}.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}.row :is(input:not([type=checkbox],[type=radio]),textarea){width:auto;flex:1 1 10rem;min-width:0}.row select{width:auto;flex:0 1 auto;min-width:0}.row :is(progress,meter){width:auto;flex:1 1 6rem}.row>label{flex:none;margin-top:0}.grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.grid + {margin-top:1.1rem}.card{container-type:inline-size;border:1px solid var(--fertig-bd);border-radius:var(--fertig-rw);padding:1.1rem;background:var(--fertig-el);box-shadow:var(--fertig-up2);display:flex;flex-direction:column;gap:.85rem}.card>{margin-block:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1;min-width:0}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.items-start{align-items:start}.items-center{align-items:center}.items-end{align-items:end}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-end{justify-content:end}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.mx-auto{margin-inline:auto}.ms-auto{margin-inline-start:auto}.me-auto{margin-inline-end:auto}.w-full{width:100%}.max-w-xs{max-inline-size:20rem}.max-w-sm{max-inline-size:24rem}.max-w-md{max-inline-size:28rem}.max-w-lg{max-inline-size:32rem}.max-w-xl{max-inline-size:36rem}.max-w-2xl{max-inline-size:42rem}.max-w-3xl{max-inline-size:48rem}.max-w-4xl{max-inline-size:56rem}.max-w-5xl{max-inline-size:64rem}.max-w-6xl{max-inline-size:72rem}.max-w-7xl{max-inline-size:80rem}.max-w-full{max-inline-size:100%}.max-w-none{max-inline-size:none}.max-w-prose{max-inline-size:38rem}.hidden{display:none}.badge{border:1px solid var(--fertig-bd);border-radius:var(--fertig-rp);background:var(--fertig-face);padding:.1em .6em;font:700 var(--fertig-caps);color:var(--fertig-mut);text-transform:uppercase;letter-spacing:.07em}.card>:is(header,footer){margin-inline:-1.1rem;padding-inline:1.1rem}.card>header{margin-top:-.25rem;padding-bottom:.7rem;font-weight:600;border-bottom:1px solid var(--fertig-bd)}.card>footer{margin-top:auto;margin-bottom:-.25rem;padding-top:.7rem;color:var(--fertig-mut);font-size:.85em;border-top:1px solid var(--fertig-bd)}.card>:is(img,video):first-child{align-self:stretch;width:auto;max-width:none;margin:-1.1rem -1.1rem 0;aspect-ratio:16 / 9;object-fit:cover;border:0;border-radius:var(--fertig-rw) var(--fertig-rw) 0 0;box-shadow:none}.card[data-tone]{background:linear-gradient(var(--fertig-ac),var(--fertig-ac)) top / 100% 3px no-repeat,var(--fertig-el)}:is(a,button).card{display:flex;width:100%;text-align:start;color:inherit;text-decoration:none;font:inherit}:is(a,button).card:hover:not(:disabled){border-color:color-mix(in srgb,var(--fertig-ac) 45%,var(--fertig-bd));box-shadow:var(--fertig-up2),0 16px 30px -16px color-mix(in srgb,var(--fertig-sh) 28%,transparent);translate:0 -2px}:is(a,button).card:active:not(:disabled){translate:0 0}[hidden]:not([hidden=until-found]){display:none}@media (prefers-reduced-motion:no-preference) and (update:fast){html{scroll-behavior:smooth}}:target{scroll-margin-block-start:4rem}:is(h1,h2,h3,h4):target{background:color-mix(in srgb,var(--fertig-ac) 12%,transparent)}a[target=_blank]:not(:has(>img,>svg))::after{content:" ↗";font-size:.85em;opacity:.6}a:has(>img),a:has(>code){text-decoration:none}sup,sub{line-height:0;font-size:.75em}q{quotes:"“" "”" "‘" "’"}dfn{font-style:normal;font-weight:700}ins{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--fertig-ac)}del{color:var(--fertig-mut)}address{font-style:normal;color:var(--fertig-mut)}hgroup>{margin:0}hgroup>p{color:var(--fertig-mut)}output{font-weight:700}meter{width:100%;height:.5rem}optgroup{font-weight:700;color:var(--fertig-mut)}::file-selector-button{margin-inline-end:.8em}::file-selector-button:hover{background:var(--fertig-face)}input:user-invalid,textarea:user-invalid{border-color:light-dark(#c0392b,#ff6b6b)}input:user-invalid + small{color:light-dark(#c0392b,#ff6b6b)}summary:hover{color:var(--fertig-ac)}:is(pre,table,textarea,dialog,[popover],menu,fieldset,[role=group],[data-carousel],[data-layout=sidebar]>){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fertig-fg) 25%,transparent) transparent}@page{margin:2cm}@media print{:root{--fertig-bg:#fff;--fertig-el:#fff;--fertig-fg:#000;--fertig-bd:#999}:is(body,body>:where(#root,#app,#__next,[data-fertig]))>nav{display:none}body>,body>:where(#root,#app,#__next,[data-fertig])>{border:0}p,blockquote,li{orphans:3;widows:3}a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}pre,table,figure,details,tr,img{break-inside:avoid}h1,h2,h3,h4{break-after:avoid}}@media (pointer:coarse){button,[type=submit],[type=button],[type=reset],:where(a.primary,a[role=button]),select,summary,input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]){min-height:44px}input[type=checkbox],input[type=radio]{width:1.4em;height:1.4em}:is(button,a,input,select,label)[data-size=sm]{min-height:32px}}@media (inverted-colors:inverted){img,video,iframe{filter:invert(1) hue-rotate(180deg)}}@media (color-gamut:p3){@supports (color:oklch(60% .2 250)){:root{--fertig-ac:light-dark(oklch(52% .21 258),oklch(76% .15 258))}}}:root{text-spacing-trim:trim-start;text-autospace:normal}@media (prefers-contrast:more){:root{--fertig-bd:light-dark(#00000059,#ffffff6b);--fertig-mut:light-dark(#45454a,#c6c6ce)}}@media (prefers-reduced-motion:no-preference) and (update:fast){a,button,input,select,textarea,summary,tr,[type=submit],[type=button],[type=reset],.card,.badge,[role=tab],[role=group]>,[popover] :is(a,button){transition:box-shadow var(--fertig-dur-1) var(--fertig-ease),background-color var(--fertig-dur-1) var(--fertig-ease),border-color var(--fertig-dur-1) var(--fertig-ease),color var(--fertig-dur-1) var(--fertig-ease),translate .08s var(--fertig-ease-out)}:focus-visible{transition:none}}@supports not (color:light-dark(#000,#fff)){:root{--fertig-bg:#e6eaef;--fertig-el:#fafcfe;--fertig-face:#f3f6fa;--fertig-fg:#151b24;--fertig-mut:#525962;--fertig-bd:#151b2421;--fertig-tb:#f3f6fa;--fertig-ac:#2850de;--fertig-on-ac:#f7f8fb}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--fertig-bg:#090c12;--fertig-el:#141920;--fertig-face:#1c222a;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff721;--fertig-tb:#1c222a;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}[data-theme=dark]{--fertig-bg:#090c12;--fertig-el:#141920;--fertig-face:#1c222a;--fertig-fg:#eaeff7;--fertig-mut:#9da5b1;--fertig-bd:#eaeff721;--fertig-tb:#1c222a;--fertig-ac:#90b5ff;--fertig-on-ac:#07071c}}}@layer fertig-a11y{@media (forced-colors:active){*{box-shadow:none}button,[type=submit],[type=button],[type=reset],input,select,textarea,.card,.badge,details,dialog,[popover],fieldset,table{border:1px solid CanvasText}[role=tab][aria-selected=true]{border-bottom:2px solid Highlight}button[aria-pressed=true]{border-color:Highlight}}}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "fertig",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "A classless CSS stylesheet with no legacy in it: no polyfills, no required classes. Link one file, write ordinary HTML, done — 8.6 KB gzipped, no build step, no dependencies.",
   "keywords": [
     "fertig",
@@ -55,7 +55,6 @@
     "fertig.css",
     "fertig.min.css",
     "README.md",
-    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {
@@ -67,14 +66,14 @@
     "check:site": "npm run site && node tools/check-site.js",
     "check:package": "npm pack --dry-run --ignore-scripts",
     "hooks:install": "git config core.hooksPath .githooks",
-    "site": "eleventy --config=.eleventy.js",
-    "site:serve": "eleventy --config=.eleventy.js --serve",
-    "site:clean": "rm -rf dist",
-    "dev": "python3 -m http.server 8899",
+    "site:prepare": "node tools/prepare-site.mjs",
+    "site": "npm run site:prepare && astro build",
+    "site:serve": "npm run site:prepare && astro dev",
+    "dev": "npm run site:serve",
     "prepublishOnly": "node build.js",
     "sizes": "python3 tools/sizes.py"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^3.1.6"
+    "astro": "^5.18.2"
   }
 }

package/CHANGELOG.md DELETED Viewed

@@ -1,470 +0,0 @@
-# Changelog
-All notable changes to this project are documented here. This project follows
-[Semantic Versioning](https://semver.org/spec/v2.0.0.html). The public surface
-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.2] — 2026-09-01
-### Changed
-- **Body-level page containers are full width by default.** fertig keeps the
-  responsive page gutter but no longer applies a maximum width to direct body
-  children or supported app-root children. Explicit `max-w-*`
-  utilities remain available when a page needs a constrained measure.
-## [4.0.1] — 2026-09-01
-### Changed
-- **Buttons are flat and stay put.** The raised shadow, filled-button highlight
-  and active press nudge are gone. Hover contrast, focus-visible outlines,
-  disabled feedback and coarse-pointer target sizing remain intact.
-- **The public documentation speaks only about fertig.** Comparative product
-  names, size rankings and survey links were removed from every published page.
-### Fixed
-- **Shared mobile controls now have reliable touch targets.** Navigation,
-  theme, colour, catalogue filter and sidebar controls reach 44 by 44 pixels;
-  catalogue filters stay in one horizontal row instead of building a tall
-  stack on narrow screens.
-- **Theme and copy feedback are clearer.** The theme control names its target,
-  while clipboard fallbacks select the text and use platform-neutral wording.
-## [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
-`--fertig-` prefix, and the old names are gone** — no aliases, no shims. The
-classes, the layout utilities and the ARIA attributes the component layer reads
-are all untouched. The sheet does exactly what it did; the migration is a
-rename.
-`--fertig-a1` / `--fertig-a2` already carried the prefix for the reason the rest
-receive it now: a short, unprefixed custom property is a bet you only lose
-once. `--ac` collided with your own `--ac`; the prefix makes every token yours
-to override, and no future rename is ever needed again.
-**To migrate:** prefix whatever you override. `--w` → `--fertig-w`,
-`--ac` / `--on-ac` → `--fertig-ac` / `--fertig-on-ac`, the radii
-`--r` / `--rs` / `--rw` → `--fertig-*`, the surfaces (`--bg`, `--el`, `--face`,
-`--fg`, `--mut`, `--bd`, `--tb`, `--nw`), the depth tokens (`--up`, `--up2`,
-`--dn`, `--sh`, `--sh1`, `--sh2`, and the `@property` alphas `--a1` / `--a2`),
-the motion tokens (`--ease`, `--ease-in`, `--ease-out`, `--dur-1`, `--dur-2`),
-`--caps`, and the colour ramps (`--stone-*`, `--sage-*`, `--sky-*`, `--clay-*`,
-`--plum-*`, `--gold-*`). The rule is one line: **any `--name` you set becomes
-`--fertig-name`.** Nothing changed meaning.
-### Changed
-- **The palette moves to a cooler voice.** Neutrals are a cool graphite
-  (hue ≈ 258) with a faint violet cast, replacing the warm stone; the accent is
-  a violet-blue (hue 266), replacing indigo. Measured: the accent clears 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. The
-  `@supports not (color: light-dark(…))` flat-sRGB fallback is restated to match,
-  and every pair still clears WCAG AA in both schemes.
-- **Buttons are fully rounded.** The shared button rule takes a new
-  `--fertig-rp` (pill) token instead of the control radius. It matches the
-  badge, the switch and the progress bar, which were already pills. Set
-  `--fertig-rp: var(--fertig-r)` for square-shouldered buttons.
-- **One radius, and the rest derived from it.** `--fertig-r` (12px) is the base;
-  `--fertig-rs` is `calc(var(--fertig-r) * .5)` and `--fertig-rw` is
-  `calc(var(--fertig-r) * 1.33)`, so setting the base on `:root` rescales the
-  whole sheet instead of desynchronising it. Windows — cards, dialogs, popover
-  menus, the select picker, `pre`, `details`, `fieldset`, `aside`, toasts —
-  now take `--fertig-rw` rather than the control radius, and full-bleed card
-  media follows the card it bleeds into.
-- **Badges are uppercase.** They already used the caps *size*; they never got
-  the transform that `h5`, `h6` and `th` get.
-- **The dialog lost its banded rules.** No hairline under the header or over
-  the footer by default; the separation is spacing. The rule now arrives as
-  scroll state — a scroll-driven animation fades it in under the header once the
-  body has scrolled and out of the footer at the end — so a dialog that fits
-  shows no rules at all. Title takes `--fertig-f`, the interface face, at
-  600/1.1rem: a monospaced heading font reads as a terminal on a dialog.
-- **The `err` tone is red, not clay.** `[data-tone=err]` borrowed
-  `--fertig-clay-700`, which at 50% lightness reads brown on a destructive
-  button. Now `oklch(52% .16 27)` / `oklch(74% .13 25)` — 5.97:1 with the white
-  label, and `--fertig-on-ac` still derives correctly in both themes.
-- **The select picker animates open and closed**, with `display` and `overlay`
-  transitioned discretely so the close is not a pop.
-### Fixed
-- **`accent-color` and `caret-color` ignored every local accent.** Both were
-  declared once on `:root`. They are inherited properties, so they resolved
-  there against the root accent and every descendant inherited that *computed
-  colour* — a `[data-accent]` or `[data-tone]` subtree repainted its buttons and
-  links but left its checkboxes, radios, ranges and caret on the root's tint.
-  Both are now re-declared on the elements that consume them.
-- **The segmented control showed a vertical scrollbar.** `overflow-x: auto`
-  makes `overflow-y` compute to `auto` as well, and Safari paints a scrollbar
-  for a sub-pixel of overflow. The block axis is now clipped (`overflow: auto
-  clip`), and group children take their focus ring inside the edge
-  (`outline-offset: -3px`) so the clip cannot slice it.
-- **The `<select>` marker was a different shape per engine.** Engines without
-  `appearance: base-select` fell back to a solid filled triangle while the
-  styleable picker drew a thin chevron. The fallback now draws the same
-  stroked chevron.
-- **The docs site is built with Eleventy.** The pages moved out of hand-edited
-  HTML at the repo root into `src/` templates that build to `dist/`, with the
-  version flowing from `package.json` as the single source of truth. This is how
-  the sheet's own site is maintained; it is not part of the npm package, which
-  ships the two CSS files plus the README and licence.
-- **The demo template pages are gone.** `app.html`, `app-invoice.html` and the
-  whole `templates/` set (`dashboard`, `article`, `pricing`, `signin`) are
-  removed from the site and repo; the docs no longer point at them.
-## [2.0.0] — 2026-08-31
-### Breaking
-- **`--a1` / `--a2` are now `--fertig-a1` / `--fertig-a2`, with no alias.**
-  These are `@property` registrations, and a registration is global — it cannot
-  be layered, scoped or overridden. A two-character name meant a consumer's own
-  `--a1` was silently retyped to `<number>`, which is a bug that only a rename
-  can fix.
-  **To migrate:** if you set `--a1` or `--a2`, rename them. Nothing else
-  changes — the values mean the same thing and the elevation scale is
-  untouched. If you never set them, there is nothing to do.
-  Every other token name is unchanged. They are ordinary custom properties,
-  they are the documented API, and they are deliberately short.
-A visual refresh, an audit pass, and a component-first repositioning. One token
-rename aside, the surface is the same — the same classes and attributes — but
-the default look changes visibly, so treat this as a redesign rather than a
-drop-in bump.
-### Added
-- **Named accents.** `data-accent="indigo|sky|sage|clay|plum|gold|slate"` on any
-  element retints everything inside it: links, focus rings, filled buttons, the
-  caret, the selection. Scoped rather than global, so one section can differ
-  from the rest of a page. Each pair is measured — the light tone clears AA as
-  link text on paper, the dark tone clears it on the dark ground.
-- **Motion tokens.** `--ease-out`, `--ease-in`, `--ease` and the durations
-  `--dur-1` / `--dur-2`. The sheet had been animating with a bare `ease`, which
-  is the browser default and the flattest curve available.
-- `--rs`, a small radius for inline chips and code, so they do not inherit the
-  larger control radius and read as lozenges.
-### Changed
-- **The default accent is indigo**, not the desaturated navy it was. Measured
-  6.28:1 as link text on paper and 6.39:1 for a white label on the fill in
-  light; 8.72:1 and 10.26:1 in dark. Both sit inside sRGB.
-- **Cards no longer paint a tinted strip behind their header and footer.** A
-  filled bar across the top of a card is the old panel-heading pattern and is
-  what dated the sheet on sight; a hairline separates just as well and lets the
-  card read as one surface.
-- Radii up: `--r` 6px → 9px, `--rw` 10px → 14px. Controls have more room —
-  buttons and fields gained roughly a tenth of an em of padding.
-- More things transition, on the named curves: tabs, badges, cards, segmented
-  controls and popover items, alongside the controls that already did.
-  `:focus-visible` is explicitly excluded — a focus ring has to be there the
-  instant focus lands, not fade in after it.
-### Fixed
-- The tone bar on `.card[data-tone]` follows the corner radius again. It was an
-  inset shadow, which does not track the curve cleanly at the larger radius —
-  it read as a detached line with gaps at both top corners. It is a background
-  layer now, which the radius clips. The duplicate indicator on
-  `.card > header` is gone with it: the filled header used to hide it, and
-  without the fill both were painting.
-- Navigation lists. `[data-layout=sidebar]` shipped without any styling for the
-  nav inside it, so the obvious markup — a `<menu>` in a `<nav>` — came out as
-  a boxed list group. It is navigation now: no rules between items, no bullets,
-  and the link fills the row.
-- `aside` and `search` are block landmarks that had no vertical rhythm of their
-  own, so whatever followed sat flush against them.
-### Fixed — audit pass
-An audit pass. Everything here came out of `docs/known-flaws.md`, which lists
-what was found, what was verified in a browser, and what was left alone on
-purpose.
-- **The shell survives a framework wrapper.** The page shell was `body > *`, so
-  a React, Vue, Svelte or Next app rendering into `<div id="root">` lost the
-  measure, the paper surface and the gutters with nothing on screen to say why.
-  The shell now also matches the children of a single `#root`, `#app`,
-  `#__next` or `[data-fertig]` wrapper. Every added selector sits inside
-  `:where()`, so specificity is unchanged.
-- **A floor under the floor.** Every colour token was an unguarded
-  `light-dark()`. In an engine without it the tokens were invalid at
-  computed-value time, so backgrounds went transparent and colour was
-  inherited — a page could land unreadable rather than plain. A
-  `@supports not (color: light-dark(…))` block at the end of the layer restates
-  the palette in flat sRGB, in both schemes.
-- **`data-size`, `data-variant` and `data-block` are scoped to controls.** As
-  bare attribute selectors they restyled any element carrying those very common
-  attribute names — a `<span data-size="sm">` picked up button padding.
-- **The focus ring no longer reshapes what it rings.** `:focus-visible` set
-  `border-radius: var(--r)`, which is the element's own radius, not the ring's:
-  a focused `<dialog>` snapped from `--rw` (14px) to `--r` (9px). Outlines
-  already follow the element's corners, so the declaration is simply gone.
-- **`<svg>` stays inline.** It was in the `display: block` rule with `img`,
-  `video` and `iframe`, which dropped every inline icon onto its own line.
-- **Toasts can stack.** Two `[popover][data-toast]` elements shared one set of
-  corner coordinates and overlapped, and an open popover is in the top layer so
-  no ordinary wrapper could stack them. `<div popover="manual"
-  data-toast-region>` is now the popover, with a `<div data-toast>` per message.
-- **A selected tab is visible in Windows High Contrast.** Its cue was a
-  `box-shadow` that the forced-colors layer removes, and the replacement set
-  `border-color` on an element with `border: 0`. It now sets a real
-  `border-bottom`.
-- **`--on-ac` survives a custom `--ac` in shipping browsers.** The
-  `contrast-color()` guard is real but almost nothing implements it. A relative
-  colour branch reaches the same black-or-white decision from the accent's own
-  lightness, and has been cross-engine since 2024.
-- **`interpolate-size: allow-keywords` is set on `details`, not `:root`.** It is
-  inherited, so the old placement changed how *your* `height: auto` transitions
-  behaved as a side effect of animating a disclosure.
-- **Two universal rules narrowed to what the sheet actually styles.**
-  `scrollbar-width: thin` no longer thins the page's own scrollbar (a
-  target-size problem for imprecise pointers), and `corner-shape: squircle` no
-  longer reshapes your components.
-- **`input[type=image]` is a button, not a text field.** It was missing from the
-  `:not()` list and got full-width sunken-field treatment.
-- **The tooltip is flow-relative and reachable on touch** — logical inset
-  properties with a `:dir(rtl)` offset, and `:active` alongside `:hover`. It is
-  still decorative, and now says so in the sheet, the README and the docs.
-- **`a[target=_blank]`** no longer appends an arrow to a link wrapping an image.
-- **Print keeps the footer.** It was hidden along with the toolbar, which drops
-  the legal line, the contact and the citations from every printout.
-- **The small variant stays small on touch.** `(pointer: coarse)` forced
-  `min-height: 44px` on everything; `data-size="sm"` opts down to 32px, still
-  above the 24px WCAG 2.5.8 floor.
-- `package.json`'s size claim, the one string `tools/sizes.py` does not reach.
-### Changed
-- `--a1` / `--a2` renamed — see **Breaking** above.
-## [1.0.3] — 2026-08-30
-### Changed
-- `--mut` lifted from 50%/70% lightness to 47%/73%. The weakest muted pairing
-  — on the desktop ground in light, on chrome in dark — was 4.96:1 and 5.99:1,
-  a hair over AA; it is 5.65:1 and 6.70:1 now. Not taken to AAA, which would need 41.5%: that
-  is close enough to `--fg` that muted text stops reading as secondary at all.
-### Added
-- `--nw`, the column the toolbar's contents line up with. It follows `--w`, so
-  nothing changes by default, and `<nav class="wide">` re-points it at the wide
-  column — an app screen built on `.wide` no longer gets a wordmark floating in
-  the middle of the viewport while its content spans the full width.
-### Fixed
-- Breadcrumb separators no longer leak into other navigation. The `/` was on
-  `nav[aria-label] li + li`, so any labelled `<nav>` containing a `<ul>` — an
-  ordinary sidebar — got breadcrumb slashes between its links. Scoped to `ol`,
-  matching the layout rule directly above it and the documented markup.
-- A `.grid` no longer collides with the block that follows it. It is a
-  block-level container and nothing gave it vertical rhythm. The space is on
-  `.grid + *` rather than a margin on `.grid` itself, which would collapse out
-  through the top of a padding-less container and open a seam above it.
-- A segmented control (`role="group"`) with four or more buttons no longer
-  pushes the page sideways on a narrow screen. It scrolls within its own width
-  instead of wrapping, which would break the joined run of corner radii.
-- A `<dl>` with a long value no longer widens the page. The value column was
-  a bare `1fr`, whose automatic minimum is its content, so it could not shrink;
-  it is `minmax(0, 1fr)` now.
-## [1.0.2] — 2026-08-30
-### Fixed
-- Menus and toasts no longer jump across the viewport as they close. The anchor
-  positioning was scoped to `[popover]:popover-open`, but the close is
-  transitioned (`display .13s allow-discrete`), so for those 130ms the popover
-  still painted while no longer matching the selector — falling back to the UA's
-  centred `inset: 0` and visibly flying to the middle of the screen. Both the
-  menu and the `[data-toast]` corner override now sit on the base selector.
-## [1.0.1] — 2026-08-30
-Packaging only; the stylesheet is unchanged apart from its version banner.
-### Changed
-- `homepage` points at the documentation site rather than the README, and the
-  repository URLs follow the repo's rename to `moji2002/fertig`.
-- `fertig` and `fertig.css` added as keywords: the package is `fertig`, but
-  people search npm for the project's name.
-## [1.0.1] - 2026-08-30
-### Changed
-- npm keywords only: added `css-framework`, `lightweight`, `minimalist`, `html`,
-  `frontend`, `ui` and `responsive`. `css-framework` is the term the rest of the
-  category (Pico, Water.css) registers under, and it was missing. No stylesheet
-  changes — the CSS is byte-identical to 1.0.0.
-## [1.0.0] — 2026-08-30
-First release. The project and the npm package are `fertig`. The stylesheet
-file keeps the name `fertig.css`, because it is a CSS file, and the cascade
-layer is `@layer fertig` — a dot in a layer name would declare a sub-layer.
-### Added
-- Classless styling for the full semantic element set: headings, prose, lists,
-  description lists, quotes, rules, code, tables, every form control,
-  fieldsets, buttons, details, dialog, figures, media and asides.
-- Layout model where direct children of `<body>` are containers — `<nav>` is a
-  full-bleed toolbar with a vibrancy blur, and
-  `header`/`main`/`footer` are the page.
-- Light and dark themes from a single `light-dark()` token block, with
-  `data-theme="light|dark"` to override the OS preference.
-- Elevation scale (`--up`, `--up2`, `--dn`) whose shadow alphas step up in dark
-  mode, since a shadow on a dark ground reads as nothing on its own. The
-  shadows come off a real colour token (`--sh`) through relative colour syntax,
-  not an HSL triplet you could not use directly.
-- Component layer addressed by ARIA rather than by class: segmented controls
-  (`role="group"`), tabs (`role="tablist"`), switches (`role="switch"`),
-  `[popover]` menus anchored to their invoker, breadcrumbs, `<dialog>` with an
-  entrance transition, `aria-busy` spinners and `data-tooltip`.
-- Button variants (`data-variant`, `data-size`, `data-icon`, `data-block`) and
-  card anatomy (`<header>`/`<footer>`, full-bleed media, `data-tone`,
-  `<a class="card">` hover lift).
-- Seven optional classes: `.row`, `.grid`, `.card`, `.badge`, `.muted`,
-  `.center`, `.wide`.
-- Dialog anatomy: an optional `<header>` and `<footer>` that run edge to edge
-  and stay pinned while the body scrolls. Sticky rather than a grid, because a
-  classless sheet has no wrapper around the loose middle children to make a
-  grid row out of; the sticky offsets are negative so the chrome pins to the
-  dialog's border edge rather than its padding edge, which is where content
-  would otherwise scroll through.
-- A max-width scale on Tailwind's names — `.max-w-xs` through `.max-w-7xl`,
-  plus `.max-w-full`, `.max-w-none` and `.max-w-prose`. Whole rather than
-  partial: a scale where `.max-w-2xl` works and `.max-w-3xl` silently does not
-  is worse than no scale. They are `max-inline-size`, so they still mean
-  "along the text" in a vertical writing mode.
-- Layout utilities, named after Tailwind's so the names transfer: `.flex`,
-  `.flex-col`, `.flex-wrap`, `.flex-1`, `.grid-cols-2|3|4`,
-  `.items-start|center|end`, `.justify-start|center|end|between`,
-  `.gap-0|1|2|3|4|6`, `.mx-auto`, `.ms-auto`, `.me-auto`, `.w-full`,
-  `.hidden`. Layout only — no colour, type or sizing scale, and no responsive
-  variants, which would need a build step.
-- Right-to-left support. Every inline-direction rule is flow-relative, with
-  `:dir(rtl)` rules for the two that cannot be — the switch knob's `translate`
-  and the fallback `<select>` chevron's background position. Verified by
-  rendering a Persian page in both directions.
-- A second layer, `fertig-a11y`, declared after `fertig`. The forced-colors
-  block lives there and wins on layer order.
-- Print styles, `prefers-reduced-motion` handling, and thin scrollbars.
-- Robustness: `overflow-wrap: break-word`; `:required`, `:read-only` and
-  `:autofill` states; slashed, tabular numerals; `object-fit` on card media;
-  smooth in-page scrolling; `overscroll-behavior` on overlays; `@page` margins
-  with orphan and widow control.
-- Environment queries: `inverted-colors` and `color-gamut: p3`.
-- `anchor-size()` and `position-visibility` for menus, `::spelling-error`,
-  and Safari's native `<input switch>` styled to match `role="switch"`.
-### Browser support
-- Two-year support policy: the sheet targets browsers from the last two years.
-  The only thing carried for the ones before them is the flat-sRGB palette
-  above ("a floor under the floor"). It ships no vendor prefixes except the
-  three no engine has replaced (`-webkit-text-size-adjust`, the autofill
-  repaint, and the `progress` pseudo-elements).
-- The sheet is wrapped in `@layer fertig`, so unlayered author CSS overrides it
-  at any specificity. There is no `!important` anywhere in it: inside a cascade
-  layer an important declaration outranks your own unlayered CSS, which would
-  contradict the point of shipping in a layer.
-### Site
-- A blocks gallery with 16 ready-to-use patterns — toolbars, stat rows, tables
-  with totals, pagination, empty states, sign-in, settings, alerts, confirm
-  dialogs, tabs, menus, pricing and shortcuts. Each snippet is generated from
-  its own live preview at runtime, so the code and the demo cannot drift apart.
-- `llms.txt` describing the layout model, the seven classes, the ARIA
-  component conventions and the tokens.
-### Verified
-- All foreground/background pairs meet WCAG 2.1 AA (≥ 4.5:1) in both themes,
-  at rest and on hover; the tightest is muted text on chrome at 4.65:1.
-- Progressive enhancement behind `@supports`: `contrast-color()`,
-  `::details-content` with `interpolate-size`, `field-sizing`,
-  `corner-shape: squircle`, `text-box: trim-both` and `@property`-typed
-  shadow alphas. None of them are required for the sheet to work.
-- Tables scroll themselves below 40rem instead of widening the page.
-- 28.0 KB raw, 7.6 KB gzipped, 6.7 KB brotli (`fertig.min.css`).