@zenit-hosting/zenit-ui 0.1.0

package/styles/_navigation.css

@@ -0,0 +1,179 @@
+/* Package navigation: Tabs, Sidebar, AppHeader, PageHeader, Stepper, Footer.
+   Verbatim from spec/components/bundle.css. The transition block and the
+   layout helpers are already in _grundlage.css, .z-segment belongs to
+   _formulare.css. */
+
+/* Tabs */
+.z-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); overflow-x: auto; }
+.z-tab {
+  display: inline-flex; align-items: center; height: var(--control-md); padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
+  color: var(--text-muted); font-weight: 500;
+}
+.z-tab:hover { color: var(--text); }
+.z-tab[aria-selected="true"], .z-tab[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent-text); }
+
+/* Sidebar */
+.z-side { width: var(--sidebar); max-width: 100%; display: grid; gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+.z-side__group { display: grid; gap: 2px; }
+.z-side__label { padding: 0 var(--space-3) var(--space-1); font-size: 12px; line-height: 16px; color: var(--text-subtle); }
+.z-side__item {
+  display: flex; align-items: center; gap: var(--space-3); width: 100%; height: 36px; padding: 0 var(--space-3);
+  border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; color: var(--text-muted);
+}
+.z-side__item:hover { background: var(--surface-raised); color: var(--text); }
+.z-side__item[aria-current="page"] { background: var(--surface-hover); color: var(--text); font-weight: 600; }
+.z-side__item[aria-current="page"] .z-icon { color: var(--accent-text); }
+.z-theme-mc .z-side__item[aria-current="page"] .z-icon { color: var(--mc-accent); }
+.z-side__count { margin-left: auto; font-size: 12px; color: var(--text-subtle); font-family: var(--font-mono); }
+
+/* AppHeader */
+.z-header { display: flex; align-items: center; gap: var(--space-5); height: var(--header); padding: 0 var(--space-5); border-bottom: 1px solid var(--border); background: var(--bg); }
+.z-header__brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
+.z-header__nav { display: flex; gap: var(--space-1); min-width: 0; overflow-x: auto; }
+.z-header__link { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; white-space: nowrap; }
+.z-root a.z-header__link { color: var(--text-muted); }
+.z-root a.z-header__link:hover { color: var(--text); background: var(--surface-raised); text-decoration: none; }
+.z-root a.z-header__link[aria-current="page"] { color: var(--text); background: var(--accent-subtle); }
+.z-root a.z-header__link[aria-current="page"] .z-icon { color: var(--accent-text); }
+.z-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
+.z-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--surface-hover); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
+
+/* PageHeader */
+.z-pagehead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
+.z-pagehead__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
+.z-pagehead__sub { margin: var(--space-1) 0 0; color: var(--text-muted); }
+.z-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+
+/* Stepper */
+.z-steps { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
+.z-step { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
+.z-step__num { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border-control); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 12px; }
+.z-step[aria-current="step"] { color: var(--text); font-weight: 600; }
+.z-step[aria-current="step"] .z-step__num { border-color: var(--text); background: var(--text); color: var(--bg); }
+.z-step--done .z-step__num { border-color: transparent; background: var(--surface-hover); color: var(--text); }
+
+/* Footer */
+.z-footer { border-top: 1px solid var(--border); padding-block: var(--space-7) var(--space-5); }
+/* Addition to the reference: the footer carries its own ground, like .z-header,
+   so it stays readable above a legacy surface while an app migrates. Same
+   colour as the page, so nothing changes on a migrated page. */
+.z-footer { background: var(--bg); }
+.z-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6); }
+.z-footer__head { margin: 0 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-subtle); }
+.z-footer__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
+.z-root .z-footer__list a { color: var(--text-muted); }
+.z-root .z-footer__list a:hover { color: var(--text); text-decoration: none; }
+.z-footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: 12px; line-height: 16px; color: var(--text-subtle); }
+.z-root .z-footer__base a { color: var(--text-muted); }
+
+/* ---------- Angular hosts and additions of the library ---------- */
+
+.z-root a.z-tab, .z-root a.z-tab:hover { color: var(--text-muted); text-decoration: none; }
+.z-root a.z-tab:hover, .z-root a.z-tab[aria-current="page"] { color: var(--text); }
+.z-root a.z-side__item, .z-root a.z-side__item:hover { text-decoration: none; }
+.z-root a.z-side__item { color: var(--text-muted); }
+.z-root a.z-side__item:hover, .z-root a.z-side__item[aria-current="page"] { color: var(--text); }
+.z-footer, z-stepper { display: block; }
+
+/* New, because bundle.css does not cover it:
+   1. z-sidebar carries list and select, only the list inside it is .z-side.
+   2. Below 900px the sidebar turns into the select (Sidebar/README), above it
+      the select is hidden. 899px instead of 900px, so the rule does not
+      overlap with .z-panel-shell (min-width: 900px).
+   3. In the customer area the footer has no columns (Footer/README). The empty
+      grid collapses, and the gap above it then falls away too.
+   4. Below 900px the navigation folds into a menu while the balance stays
+      visible (AppHeader/README). The menu sits as a surface below the bar, so
+      the bar keeps its height.
+   5. Below 900px the bar may wrap: on public pages two buttons stand on the
+      right, which would otherwise run out of the page horizontally at 360px.
+      The height header remains as the minimum height.
+      Addition to the reference: what wraps, and when. Measured in the first
+      integration: a 60x40 image logo, "Login" and "Registrieren" in the end
+      slot, 360px. The three parts add up to 282px of the 312px between the
+      paddings, yet the two gaps of space-5 pushed the end slot onto a second
+      row and the bar to 126px, with the menu button stranded next to the
+      logo. Three declarations define the behaviour instead:
+      a. gap space-3, the gap the end slot already uses between its own items.
+         282 + 24 fits 312, so that bar is one row of 57px again.
+      b. order 1 on the menu button: logo, end slot, menu button. The DOM keeps
+         the button in front of the <nav>, so Tab still goes from the button
+         into the links it has just opened.
+      c. The end slot takes the room that is left (flex 1 1 0) and wraps its
+         own items, right aligned, when they do not fit in it. "Anmelden" and
+         "Server erstellen" next to that logo need 362px, which a window has
+         from 410px on: below that they stack inside the slot and the bar is
+         109px, logo and menu button centred. Its
+         automatic minimum width stays, which is the widest single item, so
+         the bar itself still wraps as the last resort and nothing runs out of
+         the page.
+      An image or svg in the brand is a block: as inline content it sits on
+      the baseline of a 16px line and made the brand 45px tall instead of 40.
+   6. Below 900px the links of the header are as tall as a control, because
+      click targets are at least 40px tall on mobile. */
+z-sidebar { display: block; }
+z-sidebar > .z-select { display: none; }
+.z-footer__cols:empty + .z-footer__base { margin-top: 0; }
+.z-header__menu { display: none; }
+.z-header__brand :where(img, svg) { display: block; }
+@media (max-width: 899px) {
+  z-sidebar > .z-side { display: none; }
+  z-sidebar > .z-select { display: block; }
+  .z-header { position: relative; flex-wrap: wrap; gap: var(--space-3); height: auto; min-height: var(--header); padding-block: var(--space-2); }
+  .z-header__menu { display: inline-flex; order: 1; }
+  .z-header__end { flex: 1 1 0; flex-wrap: wrap; justify-content: flex-end; }
+  .z-header__nav { display: none; }
+  .z-header .z-header__link { height: var(--control-md); }
+  .z-header--open .z-header__nav {
+    display: grid; gap: var(--space-1);
+    position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-header);
+    padding: var(--space-2) var(--space-5);
+    background: var(--surface-raised); border-bottom: 1px solid var(--border);
+  }
+}
+
+/* Addition to the reference: click targets at least 40px on mobile (CLAUDE.md, Abstand und Layout).
+   Affected are only the links in the footer (columns and base row) and the
+   sidebar entry with its 36px. Tab, sidebar select, header links, menu button
+   and the actions in the PageHeader are already control-md tall, and the
+   stepper cannot be operated. The base row stays flex with wrapping. */
+@media (max-width: 640px) {
+  .z-footer__list a, .z-footer__base a, .z-side__item {
+    display: inline-flex; align-items: center; min-height: var(--control-md);
+  }
+}
+
+/* Addition to the reference: text-subtle never sits on surface-hover
+   (CLAUDE.md, Farbe). The active sidebar entry is the only place in the library
+   where it did: the entry takes surface-hover and .z-side__count keeps
+   text-subtle. text-muted is the next step up and is the colour the entry uses
+   for its icons anyway.
+   Every other surface-hover ground was checked and is clean: .z-segment
+   button[aria-pressed="true"], .z-menu__item:hover and :focus-visible,
+   .z-btn--secondary:hover, .z-avatar and .z-step--done .z-step__num all set
+   text or text-muted on themselves, .z-row__thumb sets text-muted, .z-meter
+   and .z-skel carry no text at all, and the selected game tile changes only
+   its outline over surface-raised. */
+.z-side__item[aria-current="page"] .z-side__count { color: var(--text-muted); }
+
+/* Addition to the reference: the in-page tab group (z-tab-group, z-tab-panel).
+   Its markup is the one Tabs/preview.html shows, so .z-tabs and .z-tab above
+   already carry it: .z-tab resets border, background and padding of a button,
+   is control-md tall and never wraps, and .z-tabs scrolls horizontally when
+   the bar does not fit. Three things the reference does not have:
+   1. The group as a grid, so the bar and the panel below it keep one gap
+      instead of a margin on a sibling (CLAUDE.md, Abstand und Layout). An
+      inactive panel carries the hidden attribute and is therefore display:
+      none and leaves no gap behind. Nothing here may set display on
+      z-tab-panel: an author rule of any specificity beats the browser's
+      [hidden], and the panel would stay visible. As a grid item it becomes a
+      block on its own.
+   2. The bar is the grid item that scrolls, so its automatic minimum size is
+      0 and five tabs cannot push the page sideways at 360px.
+   3. The locked tab as everywhere else in the library: 45 % and not-allowed
+      (15-zustaende.md). It is a natively disabled button, so the reason
+      belongs next to the group, not on the tab.
+   The focus ring is the global one from _grundlage.css, on the tab as well as
+   on the panel, which is a tab stop of its own. */
+z-tab-group { display: grid; gap: var(--space-4); }
+.z-tab:disabled { opacity: 0.45; cursor: not-allowed; }

package/styles/_overlays.css

@@ -0,0 +1,86 @@
+/* Package overlays: Dialog and Menu.
+   The sections Dialog, Menu and CDK overlays stand verbatim as in
+   spec/components/bundle.css. `.z-scrim` already gets its display here from
+   the Dialog section and therefore appears in no second host rule. */
+
+/* Dialog */
+.z-scrim { display: grid; place-items: center; padding: var(--space-5); background: var(--scrim); }
+.z-dialog { width: min(480px, 100%); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
+.z-dialog__header { padding: var(--space-5) var(--space-5) 0; }
+.z-dialog__title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
+.z-dialog__body { display: grid; gap: var(--space-4); padding: var(--space-3) var(--space-5) var(--space-5); color: var(--text-muted); }
+.z-dialog__body .z-input { background: var(--bg); }
+.z-dialog__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
+
+/* Menu */
+.z-menu { display: grid; min-width: 200px; padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
+.z-menu__item { display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; text-align: left; color: var(--text); }
+.z-menu__item:hover { background: var(--surface-hover); }
+.z-menu__item--danger, .z-menu__item--danger .z-icon { color: var(--danger); }
+.z-menu__key { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
+.z-menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--border); }
+
+/* CDK overlays */
+.z-backdrop { background: var(--scrim); }
+.z-dialog-panel { width: min(480px, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-5)); }
+.z-dialog-panel .z-dialog { width: 100%; max-height: inherit; overflow: auto; }
+.z-dialog { display: block; }
+@media (max-width: 640px) {
+  .z-dialog-panel { width: 100vw; align-self: flex-end; }
+  .z-dialog-panel .z-dialog { border-radius: var(--radius-md) var(--radius-md) 0 0; }
+}
+.z-menu__item:disabled, .z-menu__item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+.z-menu__item:focus-visible { background: var(--surface-hover); }
+
+/* Angular hosts */
+/* Addition to the reference: CDK backdrop without a fade in (CLAUDE.md, Bewegung). */
+.z-backdrop.cdk-overlay-backdrop { transition: none; }
+/* The separator is an element of its own and therefore inline otherwise. */
+z-menu-separator { display: block; }
+/* The body of the dialog colours its text text-muted, the label of a field
+   stays text (in the preview as a style on the label). */
+.z-dialog__body .z-field__label { color: var(--text); }
+/* Click target at least 40px on mobile, the entry measures 36px otherwise. */
+@media (max-width: 640px) {
+  .z-menu__item { height: var(--control-md); }
+}
+/* Addition to the reference: an entry may be a link when it leads somewhere.
+   `.z-root a` (0,1,1) beats `.z-menu__item` (0,1,0) and would colour it
+   accent-text and underline it on hover, so the colours of the reference are
+   restored with the same weight, exactly as the a.z-btn rules in
+   _grundlage.css do. */
+.z-root a.z-menu__item, .z-root a.z-menu__item:hover { text-decoration: none; }
+.z-root a.z-menu__item { color: var(--text); }
+.z-root a.z-menu__item--danger { color: var(--danger); }
+/* Addition to the reference: a long dialog scrolls inside instead of growing
+   past the screen. Two links of the chain were missing. The CDK loads the
+   styles of `.cdk-overlay-pane` at runtime, so they stand after this stylesheet
+   and its `max-height: 100%` beat the reference rule of the same specificity;
+   the limit is therefore repeated with the pane class in front of it. And the
+   reference hands the limit down to `.z-dialog` with `max-height: inherit`,
+   while through `ZDialog.open()` the CDK container and the host element of the
+   opened component stand in between: `inherit` only arrives when every one of
+   them passes the limit on. Both become flex columns, so the limit reaches the
+   dialog and, inside it, only the body moves: header and footer with the
+   actions stay put. */
+.cdk-overlay-pane.z-dialog-panel { max-height: calc(100vh - 2 * var(--space-5)); }
+.z-dialog-panel > cdk-dialog-container,
+.z-dialog-panel > cdk-dialog-container > * { display: flex; flex-direction: column; width: 100%; min-height: 0; max-height: inherit; }
+.z-dialog-panel .z-dialog { display: flex; flex-direction: column; }
+.z-dialog-panel .z-dialog__header, .z-dialog-panel .z-dialog__footer { flex: none; }
+/* `scroll-padding` keeps the 2px focus ring of a control at the edge of the
+   scrolling body from being cut off when the browser scrolls it into view. The
+   ring of the body itself lies inside for the same reason: `overflow: auto`
+   clips at its padding box, so a ring outside it would be cut off by the header
+   and the footer (same idiom as .z-game__cover in _werkzeuge.css). */
+.z-dialog-panel .z-dialog__body { min-height: 0; overflow: auto; scroll-padding: var(--space-1); }
+.z-dialog-panel .z-dialog__body:focus-visible { outline-offset: -2px; }
+/* dvh where the browser has it, so the URL bar of a phone does not cut the
+   footer off; the vh rule of the reference stays as the fallback. */
+@supports (max-height: 100dvh) {
+  .cdk-overlay-pane.z-dialog-panel { max-height: calc(100dvh - 2 * var(--space-5)); }
+}
+/* Docked at the bottom on mobile, so the footer keeps clear of the home bar. */
+@media (max-width: 640px) {
+  .z-dialog-panel .z-dialog__footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
+}

package/styles/_rueckmeldung.css

@@ -0,0 +1,100 @@
+/* Package rueckmeldung: Alert, EmptyState, Skeleton, Toast, Toast outlet and
+   Tooltip. Verbatim from spec/components/bundle.css. */
+
+/* Alert */
+.z-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); }
+.z-alert__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
+.z-alert__title { font-weight: 600; }
+.z-alert__body { color: var(--text-muted); }
+.z-alert--info { background: var(--info-subtle); } .z-alert--info .z-icon { color: var(--info); }
+.z-alert--success { background: var(--success-subtle); } .z-alert--success .z-icon { color: var(--success); }
+.z-alert--warning { background: var(--warning-subtle); } .z-alert--warning .z-icon { color: var(--warning); }
+.z-alert--danger { background: var(--danger-subtle); } .z-alert--danger .z-icon { color: var(--danger); }
+@media (max-width: 640px) { .z-alert { flex-wrap: wrap; } .z-alert > .z-btn { margin-left: 32px; } }
+/* Addition to the reference: only with flex-basis does the button wrap below
+   the text (Alert/README.md "Mobil bricht der Button unter den Text um"). The
+   indent of 32px puts it below the text, not below the icon. */
+@media (max-width: 640px) { .z-alert > .z-btn { flex-basis: 100%; } }
+
+/* EmptyState */
+.z-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-4); text-align: center; }
+/* margin and font-size: addition for headingLevel, so an h1 to h4 looks
+   exactly like the span of the reference (no browser margin, no 2em). */
+.z-empty__title { font-weight: 600; margin: 0; font-size: inherit; }
+.z-empty__body { max-width: 40ch; color: var(--text-muted); }
+.z-empty .z-btn { margin-top: var(--space-2); }
+
+/* Skeleton */
+.z-skel { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--surface-hover); }
+.z-skel--thumb { width: 32px; height: 32px; }
+/* Addition to the reference: the placeholder of a button[zGameTile] for a
+   z-game-grid that loads. It repeats the boxes of .z-game (_werkzeuge.css):
+   a grid with the gap space-2, a cover area in radius-md whose aspect ratio
+   is set together with .z-game__cover in _werkzeuge.css, a title line
+   one line box of the inherited type tall and a price line of 12px/16px, the
+   values of .z-game__price. Each text line draws a bar of the 12px skeleton
+   height centred in its line box, so the cell is exactly the cell of a tile.
+   The host keeps the opacity animation; its own fill is dropped. */
+.z-skel--tile { display: grid; gap: var(--space-2); height: auto; min-width: 0; border-radius: 0; background: none; }
+.z-skel__cover { width: 100%; border-radius: var(--radius-md); background: var(--surface-hover); }
+.z-skel__line { height: 12px; margin-block: calc((1lh - 12px) / 2); border-radius: var(--radius-sm); background: var(--surface-hover); }
+.z-skel__line--title { width: 72%; font-weight: 600; }
+.z-skel__line--price { width: 48%; font-size: 12px; line-height: 16px; }
+@media (prefers-reduced-motion: no-preference) {
+  .z-skel { animation: z-skel 1.2s ease-in-out infinite alternate; }
+  @keyframes z-skel { from { opacity: 1; } to { opacity: 0.5; } }
+}
+
+/* Toast */
+.z-toast { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 420px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }
+.z-toast--success .z-icon { color: var(--success); }
+.z-toast--danger .z-icon { color: var(--danger); }
+.z-toast__action { margin-left: var(--space-2); padding: 0; border: 0; background: none; cursor: pointer; color: var(--accent-text); font-weight: 500; white-space: nowrap; }
+
+/* Toast outlet */
+.z-toast-outlet { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast); display: grid; justify-items: end; gap: var(--space-2); pointer-events: none; }
+.z-toast-outlet .z-toast { pointer-events: auto; }
+.z-toast__close { margin-left: var(--space-1); }
+@media (max-width: 640px) {
+  .z-toast-outlet { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); justify-items: stretch; }
+  .z-toast-outlet .z-toast { max-width: none; }
+}
+
+/* Tooltip */
+.z-tooltip { max-width: 240px; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-overlay); color: var(--text); font-size: 12px; line-height: 16px; }
+
+/* Addition to the reference: the tooltip has to stay reachable with the
+   pointer (WCAG 2.1 SC 1.4.13 "Hoverable"). The panel hangs in the overlay on
+   the body, space-2 away from the trigger, and the pointer would cross nothing
+   on the way. The transparent padding of the pane covers exactly that gap, so
+   the directive positions the pane flush against the trigger and this padding
+   is the visible distance. */
+.cdk-overlay-pane.z-tooltip-pane { padding-block: var(--space-2); }
+
+/* Addition to the reference: click targets at least 40px on mobile (CLAUDE.md,
+   Abstand und Layout). The height of the close button comes from the rule for
+   z-btn--sm in _grundlage.css; all that remains here is that the buttons in
+   the toast do not shrink and the action itself becomes 40px tall. */
+@media (max-width: 640px) {
+  .z-toast .z-btn, .z-toast__action { flex: none; }
+  .z-toast__action { display: inline-flex; align-items: center; min-height: var(--control-md); }
+}
+
+/* Addition to the reference: the statuses info and warning, mirrored from the
+   rules the reference has for success and danger. Only the icon takes the
+   colour; the toast keeps the plain surface of the reference, without a tinted
+   fill and without a coloured frame, and the status also stands in the text.
+   With a title the two lines share one column, built like .z-alert__text. */
+.z-toast--info .z-icon { color: var(--info); }
+.z-toast--warning .z-icon { color: var(--warning); }
+.z-toast__text { display: grid; gap: 2px; min-width: 0; }
+.z-toast__title { font-weight: 600; }
+.z-toast__body { color: var(--text-muted); }
+
+/* Addition to the reference: the outlet keeps two live regions, one polite and
+   one assertive, so a screen reader announces a toast that appears inside them.
+   display: contents removes the two boxes again, so the toasts themselves stay
+   the grid items of .z-toast-outlet and keep gap, alignment and the mobile
+   rules; the order set per toast restores the order of the list across both
+   regions. */
+.z-toast-outlet__live { display: contents; }

package/styles/_werkzeuge.css

@@ -0,0 +1,119 @@
+/* Package werkzeuge: Console, Hero, GameTile, PriceSummary, SpecList, Faq.
+   Verbatim from spec/components/bundle.css. */
+
+/* GameTile */
+.z-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-4); }
+.z-game { display: grid; gap: var(--space-2); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; min-width: 0; }
+.z-game__cover {
+  width: 100%; border-radius: var(--radius-md); overflow: hidden;
+  background: var(--surface-raised); outline: 1px solid var(--border); outline-offset: -1px;
+  display: grid; place-items: center; text-align: center;
+  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--text-muted);
+}
+/* Deviation from the reference (3:4 cover): the cover area is landscape in the
+   ratio of a store header, 460:215, the only images the games have until real
+   3:4 covers arrive. This is the one place of that ratio: the placeholder of
+   z-skeleton tile (_rueckmeldung.css) takes it from here, so loading does not
+   jump. A header fills the area uncropped, any other ratio is cut centred. */
+.z-game__cover, .z-skel__cover { aspect-ratio: 460 / 215; }
+.z-game__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
+/* The text fallback (no cover, or one that failed) in the same area: padding
+   here instead of on the area, so an image reaches the edges, and at most two
+   lines, which fit the lowest area of a 128px column. */
+.z-game__fallback { padding: var(--space-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
+.z-game:hover .z-game__cover { outline-color: var(--border-control); }
+.z-game[aria-pressed="true"] .z-game__cover { outline: 2px solid var(--accent-text); outline-offset: -2px; }
+.z-game__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.z-game__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; color: var(--text-muted); }
+/* Addition to the reference: a[zGameTile]. The counter-rule every library
+   class on an anchor needs (_grundlage.css), so the link tile keeps the text
+   colour of the button tile and gets no underline on hover. */
+.z-root a.z-game, .z-root a.z-game:hover { color: inherit; text-decoration: none; }
+
+/* SpecList */
+.z-spec { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); margin: 0; }
+.z-spec dt, .z-spec dd { margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
+.z-spec dt { color: var(--text-muted); }
+.z-spec dt:first-of-type, .z-spec dt:first-of-type + dd { border-top: 0; }
+.z-spec dd small { font-size: 12px; color: var(--text-subtle); margin-left: var(--space-2); }
+@media (max-width: 480px) {
+  .z-spec { grid-template-columns: 1fr; }
+  .z-spec dd { border-top: 0; padding-top: 0; }
+}
+
+/* Hero */
+.z-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; padding-block: var(--space-9); }
+.z-hero__title { margin: 0; font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
+.z-hero__lead { margin: var(--space-5) 0 0; max-width: 52ch; font-size: 20px; line-height: 30px; color: var(--text-muted); }
+.z-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
+.z-hero__note { margin: var(--space-4) 0 0; font-size: 12px; line-height: 16px; color: var(--text-subtle); }
+@media (max-width: 900px) { .z-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8); } }
+@media (max-width: 640px) { .z-hero__title { font-size: 40px; line-height: 44px; } .z-hero__lead { font-size: 16px; line-height: 24px; } }
+/* Addition to the reference: Hero/README.md keeps display-xl for the start page
+   and /minecraft and gives sub-pages display-lg, which bundle.css only has
+   below 640px. Same two values, so a hero in size="lg" reads at every width as
+   an xl hero reads below 640px; the media query above keeps it there. */
+.z-hero--lg .z-hero__title { font-size: 40px; line-height: 44px; }
+/* Addition to the reference: Hero/README.md gives sub-pages a hero that "kommt
+   oft ohne rechte Spalte aus", while bundle.css fixes .z-hero at 7fr/5fr above
+   900px. Such a hero would keep an empty right column at every width above
+   900px, so without the slot the row is one column. The slot marker
+   [zHeroAside] adds no class of its own, so the attribute is what the rule
+   asks for. The lead keeps its own 52ch measure and does not stretch. */
+.z-hero:not(:has(> [zHeroAside])) { grid-template-columns: minmax(0, 1fr); }
+
+/* PriceSummary */
+.z-summary { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+.z-summary__label { font-size: 12px; line-height: 16px; color: var(--text-muted); }
+.z-summary__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 28px; line-height: 34px; font-weight: 600; }
+.z-summary__price small { font-size: 12px; font-weight: 400; color: var(--text-subtle); }
+.z-summary__lines { display: grid; margin: 0; }
+.z-summary__line { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--border); color: var(--text-muted); }
+.z-summary__line dd { margin: 0; color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.z-summary__note { font-size: 12px; line-height: 16px; color: var(--text-subtle); }
+
+/* Console */
+.z-console { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; }
+.z-console__log { max-height: 240px; margin: 0; padding: var(--space-3) var(--space-4); overflow: auto; font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
+.z-log__time { color: var(--text-subtle); }
+.z-log--warn { color: var(--warning); }
+.z-log--error { color: var(--danger); }
+.z-log--cmd { color: var(--text); }
+.z-console__input { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4); border-top: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--text-subtle); }
+.z-console__input input { flex: 1; min-width: 0; height: var(--control-md); border: 0; background: none; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
+.z-console__input input::placeholder { color: var(--text-subtle); }
+
+/* Faq */
+.z-faq { border-top: 1px solid var(--border); }
+.z-faq:last-of-type { border-bottom: 1px solid var(--border); }
+.z-faq summary { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font-size: 16px; line-height: 24px; font-weight: 600; cursor: pointer; list-style: none; }
+.z-faq summary::-webkit-details-marker { display: none; }
+.z-faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-muted); }
+.z-faq[open] summary::after { content: "\2212"; }
+.z-faq__body { max-width: var(--measure); margin: 0; padding: 0 0 var(--space-5); font-size: 16px; line-height: 24px; color: var(--text-muted); }
+
+/* ---------- Angular hosts and additions of the library ---------- */
+
+.z-console, z-faq, z-spec-list, z-price-summary { display: block; }
+
+/* Every question sits in a z-faq of its own. That makes every details the
+   :last-of-type of its host and it would get a second line. Only the last
+   question keeps it, otherwise there would be 2px between the questions. */
+z-faq:not(:last-of-type) .z-faq { border-bottom: 0; }
+
+/* The button "Zum Ende" does not appear in the preview, because the preview
+   does not scroll. It sits between log and input. Tokens only. */
+.z-console__end { display: flex; justify-content: center; padding: var(--space-2); border-top: 1px solid var(--border); }
+
+/* Disabled input like .z-btn:disabled: 45 % and not-allowed. */
+.z-console__input input:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* Addition to the reference: the empty state in the log is running text, not a
+   log. The enclosing pre sets mono, 12px and white-space: pre-wrap; here
+   body-sm with normal wrapping applies again. */
+.z-console__log .z-empty {
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 20px;
+  white-space: normal;
+}

package/styles/themes/accents.css

@@ -0,0 +1,91 @@
+/* Zenit themes / accents.
+
+   An accent replaces the five tokens that carry "you can click this" or "this
+   is active": accent, accent-hover, on-accent, accent-text, accent-subtle.
+   Nothing else moves. Surfaces, text, borders, status and the Minecraft
+   subtheme stay exactly where the scheme put them.
+
+   rot is the default of the design system and has no block here: it comes from
+   tokens.css for dark, from light.css and from contrast.css. The theme service
+   therefore removes data-accent entirely for rot instead of writing it out.
+
+   Two blocks per accent, because accent-text has to reach 4.5:1 on the bg AND
+   the surface of the scheme it is read on:
+   - [data-accent="X"] holds the values for the dark grounds (dark, contrast).
+     accent-text is a light tint there, the fill is a deep saturated colour.
+   - [data-theme="light"][data-accent="X"] replaces all five for the light
+     ground: accent-text becomes a deep colour, accent-subtle an opaque light
+     tint, matching how light.css handles rot and the status colours.
+   The second block has specificity (0,2,0) and wins over the first (0,1,0)
+   regardless of order; the first wins over [data-theme="light"] (0,1,0) only
+   because this file is imported after light.css. That is why themes.css fixes
+   the order base -> light -> contrast -> accents.
+
+   Derivation, per accent and per scheme:
+   1. The fill is deepened until white as on-accent clears 4.5:1 on accent AND
+      on accent-hover; accent-hover is one step deeper than accent, as in the
+      dark scheme.
+   2. accent also has to keep 3:1 against focus, which is white on the dark
+      grounds and near black on the light one. That is the binding limit on the
+      light ground and it is why the light fills are not deeper still.
+      accent-hover is exempt on the light ground (2.41:1 to 2.97:1): it has to
+      be deeper than accent, and the focus ring never touches the fill anyway,
+      because it is drawn with a 2px offset on the surface around the button.
+   3. accent-text is pushed away from the ground until it clears 4.5:1 on bg
+      and on surface of that scheme.
+   4. accent-subtle follows accent-text: 12 % of it on the dark grounds, an
+      opaque light tint of the same hue on the light ground.
+
+   Known overlap: with gruen, accent-text sits close to --success, and with
+   blau close to --info. The design system answers that itself, because a
+   status is always written out as a word as well (CLAUDE.md, "Farbe").
+
+   All values are verified by tools/check-theme-contrast.mjs. */
+
+/* Blau */
+[data-accent="blau"] {
+  --accent: #1d4ed8;
+  --accent-hover: #1a44ba;
+  --on-accent: #ffffff;
+  --accent-text: #7ab0ff;
+  --accent-subtle: rgba(122, 176, 255, 0.12);
+}
+[data-theme="light"][data-accent="blau"] {
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --on-accent: #ffffff;
+  --accent-text: #1d4ed8;
+  --accent-subtle: #e6edfd;
+}
+
+/* Gruen */
+[data-accent="gruen"] {
+  --accent: #15803d;
+  --accent-hover: #116a32;
+  --on-accent: #ffffff;
+  --accent-text: #5fd07a;
+  --accent-subtle: rgba(95, 208, 122, 0.12);
+}
+[data-theme="light"][data-accent="gruen"] {
+  --accent: #15803d;
+  --accent-hover: #116a32;
+  --on-accent: #ffffff;
+  --accent-text: #116a32;
+  --accent-subtle: #e3f3e9;
+}
+
+/* Violett */
+[data-accent="violett"] {
+  --accent: #7e22ce;
+  --accent-hover: #6b1fae;
+  --on-accent: #ffffff;
+  --accent-text: #c795f5;
+  --accent-subtle: rgba(199, 149, 245, 0.12);
+}
+[data-theme="light"][data-accent="violett"] {
+  --accent: #8b2ade;
+  --accent-hover: #7420bd;
+  --on-accent: #ffffff;
+  --accent-text: #6b1fae;
+  --accent-subtle: #f0e4fb;
+}

package/styles/themes/base.css

@@ -0,0 +1,26 @@
+/* Zenit themes / base.
+
+   What belongs here: the declarations every scheme needs that tokens.css must
+   not carry. tokens.css is compiled from spec/tokens.json and has to stay byte
+   identical to spec/tokens.css, so nothing may be added there by hand.
+
+   color-scheme is the one such declaration today. It tells the engine which
+   palette to use for the parts a page cannot style itself: the drop-down of a
+   native <select>, scrollbars, the text caret, spin buttons, the default
+   background of a form control and the focus ring the platform draws before
+   CSS takes over. Without it a dark page opens a white drop-down list.
+
+   The value follows the chosen scheme, never the operating system: `dark` is
+   the default of the design system, and [data-theme="light"] overrides it in
+   light.css. Because :root and [data-theme=...] have the same specificity
+   (0,1,0), this file has to be imported BEFORE light.css and contrast.css.
+
+   The default for a page without data-theme no longer depends on this file:
+   _grundlage.css carries it as :where(:root) at specificity (0,0,0), so an
+   application that only includes tokens.css and zenit-ui.css gets dark native
+   UI as well. [data-theme="dark"] stays here and is the reason the file
+   remains: a dark subtree inside a light page inherits color-scheme: light
+   from the root, and only this selector puts it back. The :root here is
+   therefore a duplicate of the base styles' default, kept so that themes.css
+   reads completely on its own. */
+:root, [data-theme="dark"] { color-scheme: dark; }