/*
 * Page styles of draft V3 (research, desktop only).
 *
 * Colours, radii and shadows read the system's tokens, so a variant switch repaints
 * the page around the components. Fixed pixel values are layout. The page's own
 * controls are quiet (HeroUI): grey track, raised surface for the chosen option.
 */

/* An island is React's root for the part inside it and no box of its own (insel.mjs). */
e-island { display: contents; }
/*
 * Finding 16 (PRODUKTBEFUNDE.md): in the browser React Aria closes a disclosure with
 * hidden="until-found", which keeps the box, and the panel keeps its padding: 16 px
 * of empty space under every closed item. Until the system fixes it, the page does.
 */
.sw-disclosure__panel[hidden] { padding-block: 0; }
/*
 * Finding 18: several of our components show no press, a chosen Switch or Checkbox
 * shows no hover, and the links of the ErrorSummary show neither (plain <a>, while
 * .sw-link answers to React Aria's data-hovered). The page gives them one, after
 * HeroUI: a press shrinks a little or darkens, a hover on what is on darkens its fill.
 */
.sw-tabs__tab[data-pressed], .sw-toggle-button[data-pressed] { scale: 0.96; }
.sw-tabs__tab, .sw-toggle-button { transition-property: color, background-color, border-color, box-shadow, scale; }
.sw-switch[data-pressed] .sw-switch__thumb { scale: 0.85; }
.sw-choice[data-pressed] .sw-choice__control { scale: 0.88; }
.sw-switch__thumb, .sw-choice__control { transition: scale 0.12s var(--sw-motion-easing-standard), transform var(--sw-motion-duration-fast) var(--sw-motion-easing-standard), background-color var(--sw-motion-duration-fast), border-color var(--sw-motion-duration-fast); }
.sw-switch[data-selected][data-hovered] .sw-switch__track,
.sw-choice[data-selected][data-hovered] .sw-choice__control { background: var(--sw-color-accent-hover); border-color: var(--sw-color-accent-hover); }
.sw-nav-list__link:active, .sw-disclosure__trigger[data-pressed], .sw-tree__chevron[data-pressed] { background: var(--sw-color-surface-pressed); }
.sw-calendar__cell[data-selected][data-pressed] { scale: 0.92; }
.sw-error-summary a.sw-link:hover { color: var(--sw-color-text-link-hover); text-decoration-thickness: max(var(--sw-border-width-thin), 0.1em); }
.sw-error-summary a.sw-link:active { color: var(--sw-color-text-link-pressed); }
.e-icon:active { scale: 0.92; }

:root {
  --e-muted: var(--sw-color-neutral-600);
  --e-line: var(--sw-color-border-subtle);
  --e-plus: color-mix(in srgb, var(--sw-color-text-primary) 30%, transparent);
  --e-gutter: 0px;
  --e-vw: 100vw;
  --e-float-top: 76px;
  --e-sec-pad: 112px;
  --e-c1: var(--sw-color-accent-default);
  --e-c2: color-mix(in srgb, var(--sw-color-accent-default) 42%, var(--sw-color-surface-raised));
  --e-c3: color-mix(in srgb, var(--sw-color-accent-default) 16%, var(--sw-color-surface-raised));
  --e-tint-1: var(--sw-color-brand-200);
  --e-tint-2: color-mix(in oklch, var(--sw-color-brand-300), #f0abfc 45%);
  --e-tint-3: color-mix(in oklch, var(--sw-color-brand-100), #7dd3fc 45%);
  --e-blob: 0.75;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
:root[data-config-open] { --e-gutter: 336px; }
/* Width of the content: boxed at 1200 px or fluid to the edges (64 px gutters). */
:root { --e-max: 1200px; }
:root[data-e-layout="fluid"] { --e-max: 100vw; }
/*
 * Outlines go through --e-outline, the lines of the line grids through --e-grid.
 * Dividing lines (sections, sidebars, table rows) keep --e-line.
 * Klar took over what the skin "Pur" did to the browser mockup (owner, 2026-10-20):
 * inside the mockup the outlines vanish; Pur itself is gone.
 */
:root, [data-sw-skin] { --e-outline: var(--sw-color-border-subtle); --e-grid: var(--sw-color-border-subtle); }
[data-sw-skin="base"] .e-frame { --e-outline: transparent; }
[data-sw-brand="graphite"] { --e-tint-1: #c7d2fe; --e-tint-2: #fbcfe8; --e-tint-3: #bae6fd; }
[data-sw-color-scheme="dark"] { --e-muted: var(--sw-color-neutral-400); --e-blob: 0.2; }
@media (prefers-color-scheme: dark) {
  [data-sw-color-scheme="system"] { --e-muted: var(--sw-color-neutral-400); --e-blob: 0.2; }
}

body {
  margin: 0;
  min-width: 1200px;
  background: var(--sw-color-surface-page);
  color: var(--sw-color-text-primary);
  font-family: var(--sw-font-family-sans);
  -webkit-font-smoothing: antialiased;
}
.e-wrap { width: min(var(--e-max), 100% - 64px); margin-inline: auto; }
.e-row { display: flex; align-items: center; gap: var(--sw-space-1); }
.e-row--end { align-items: flex-end; }
.e-row--gap { gap: var(--sw-space-3); margin-block-end: var(--sw-space-2); }
.e-end { justify-content: flex-end; }
.e-push { margin-inline-start: auto; }
.e-hint { margin: 0; font-size: var(--sw-font-size-sm); color: var(--e-muted); display: flex; align-items: center; gap: 4px; }
/* Fields draw their own ring on the box (field.css); an input with a tabindex must not get a second one here. */
:where(button, a, summary, [tabindex]:not(input, textarea, select, .sw-listbox__item)):focus-visible { outline: 2px solid var(--sw-color-border-focus); outline-offset: 2px; }
/*
 * Finding 19: a list opened by a click (Select) gets its focus from React Aria, by
 * script, and the browser's :focus-visible matches then, so the system's own rule
 * (base.css) rings the chosen option for a mouse user. React Aria knows better
 * (data-focus-visible, as base.css says); the page follows it in lists.
 */
.sw-listbox__item:focus-visible:not([data-focus-visible]) { outline: none; }

/* The content makes room for the floating configurator; it never covers anything. */
.e-hero, .e-section:not(.e-section--build), .e-foot {
  padding-inline-end: var(--e-gutter);
  transition: padding-inline-end 0.3s var(--sw-motion-easing-standard);
}

/* --- Quiet controls (page UI) ------------------------------------------------- */

.e-qseg {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--sw-radius-full);
  background: var(--e-quiet-track);
}
.e-qseg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 30px; min-width: 30px; padding: 0 12px;
  border: 0; border-radius: var(--sw-radius-full); background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: var(--sw-font-weight-medium); color: var(--e-quiet-text);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.e-qseg button:hover { color: var(--sw-color-text-primary); }
.e-qseg button:is([aria-checked="true"], [aria-pressed="true"]) {
  background: var(--e-quiet-on); color: var(--sw-color-text-primary);
  font-weight: var(--sw-font-weight-semibold);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03);
}
.e-qseg--icons button { width: 30px; padding: 0; }
.e-qseg--wide { display: flex; width: 100%; box-sizing: border-box; }
.e-qseg--wide button { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
/* The scene switcher: our Tabs in the segmented strip of .e-seg, a pill for track and tabs. */
.e-seg--scenes { width: max-content; margin: 0 auto 20px; }
/* Tabs are a container that reports 480 px of its own (D-205); seven scenes need more, so here the width comes from the tabs. */
.e-seg.e-seg--scenes .sw-tabs { container-type: normal; }
.e-seg.e-seg--scenes .sw-tabs__list { padding: 4px; border-radius: var(--sw-radius-full); }
.e-seg.e-seg--scenes .sw-tabs__tab { min-block-size: 36px; padding-inline: 16px; gap: 7px; border-radius: var(--sw-radius-full); font-size: 14px; font-weight: var(--sw-font-weight-medium); }
.e-seg.e-seg--scenes .sw-tabs__tab[data-selected] { font-weight: var(--sw-font-weight-semibold); }
.e-seg.e-seg--scenes .sw-tabs__label { display: inline-flex; align-items: center; gap: 7px; }
.e-seg.e-seg--scenes .e-seg__ind { top: 4px; bottom: 4px; border-radius: var(--sw-radius-full); }

.e-iconbtn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--sw-radius-full); cursor: pointer;
  background: var(--e-quiet-track); color: var(--e-quiet-text);
  transition: background-color 0.15s, color 0.15s;
}
.e-iconbtn:hover { color: var(--sw-color-text-primary); }
.e-iconbtn[aria-pressed="true"] {
  background: var(--e-quiet-on); color: var(--sw-color-text-primary);
  box-shadow: inset 0 0 0 3px var(--e-quiet-track), 0 1px 2px rgb(0 0 0 / 0.08);
}
.e-iconbtn--sm { width: 28px; height: 28px; background: transparent; }
.e-iconbtn--sm:hover { background: var(--e-quiet-track); }
.e-dice { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.e-dice circle { fill: currentColor; stroke: none; }
.e-textbtn { border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--e-muted); padding: 4px 6px; border-radius: var(--sw-radius-md); }
.e-textbtn:hover { color: var(--sw-color-text-primary); background: var(--e-quiet-track); }

/* Tooltip: the system's .sw-tooltip, shown by entwurf.js after a pause. */
.e-tip { position: fixed; z-index: var(--sw-z-tooltip); pointer-events: none; max-width: 280px; font-size: 13px; }
.e-tip[hidden] { display: none; }

/* --- Navigation ------------------------------------------------------------ */

.e-nav {
  position: sticky; top: 0; z-index: var(--sw-z-sticky); height: 64px;
  background: color-mix(in srgb, var(--sw-color-surface-page) 80%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
}
.e-nav__in { height: 100%; width: min(1680px, 100% - 48px); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
/*
 * Logo, built by rules (owner, 2026-10-20; LOGO-REGELN.md). Everything follows φ:
 *   mark m = 24 px = two cells c and one gap g, with g = c / φ³
 *     → c = 10.73 px, g = 2.53 px (g / m = 0.105573)
 *   corner of a square cell = c / φ⁴; gap from mark to word = c = φ³ · g
 *   tones 1, 1/φ, 1/φ², 1/φ³ (set by entwurf.js); stacked words in the ratio φ.
 * Every shape is inscribed in its cell and touches the cell's outer edges, so the
 * mark always fills its square (the MIT Media Lab rule against tiny logos).
 */
.e-logo {
  --m: 24px; --g: calc(var(--m) * 0.105573); --c: calc((var(--m) - var(--g)) / 2);
  display: flex; align-items: center; gap: var(--c); min-width: 200px;
  color: inherit; text-decoration: none;
}
.e-logo__mark { display: grid; grid-template-columns: var(--c) var(--c); grid-template-rows: var(--c) var(--c); gap: var(--g); width: var(--m); height: var(--m); flex: none; }
.e-logo__mark i {
  background: var(--sw-color-accent-default); border-radius: calc(var(--c) * 0.145898); clip-path: inset(0);
  transition: border-radius 0.45s var(--sw-motion-easing-standard), opacity 0.45s, clip-path 0.45s var(--sw-motion-easing-standard), transform 0.45s var(--sw-motion-easing-standard);
}
.e-logo__mark i[data-s="sq"] { border-radius: calc(var(--c) * 0.145898); }
.e-logo__mark i[data-s="ci"] { border-radius: 50%; }
.e-logo__mark i[data-s="tl"] { border-radius: 100% 0 0 0; }
.e-logo__mark i[data-s="tr"] { border-radius: 0 100% 0 0; }
.e-logo__mark i[data-s="br"] { border-radius: 0 0 100% 0; }
.e-logo__mark i[data-s="bl"] { border-radius: 0 0 0 100%; }
.e-logo__mark i[data-s="lf"] { border-radius: 100% 0; }
.e-logo__mark i[data-s="lf2"] { border-radius: 0 100%; }
/* A dot is a circle scaled by 1/φ; the peak points up. */
.e-logo__mark i[data-s="dot"] { border-radius: 50%; transform: scale(0.618); }
.e-logo__mark i[data-s="tri"] { border-radius: 0; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
/* Right triangles, named by the corner that holds the right angle. */
.e-logo__mark i[data-s^="t-"] { border-radius: 0; }
.e-logo__mark i[data-s="t-tl"] { clip-path: polygon(0 0, 100% 0, 0 100%); }
.e-logo__mark i[data-s="t-tr"] { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.e-logo__mark i[data-s="t-br"] { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.e-logo__mark i[data-s="t-bl"] { clip-path: polygon(0 0, 100% 100%, 0 100%); }

/* Wordmark: at most two weights, far apart (Gestalt: similarity and difference). */
.e-logo__word { display: flex; align-items: baseline; gap: 0.3em; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.e-logo__word b { font-weight: var(--sw-font-weight-bold); }
.e-logo__word span { font-weight: var(--sw-font-weight-regular); }
.e-logo__word[data-word="1"] :is(b, span) { font-weight: var(--sw-font-weight-semibold); }
/* Stacked: the block is as tall as the mark, the two sizes in the ratio φ. */
.e-logo__word[data-word="2"] { flex-direction: column; justify-content: space-between; gap: 0; height: var(--m); line-height: 1; }
.e-logo__word[data-word="2"] b { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; margin-top: -1px; }
.e-logo__word[data-word="2"] span { font-size: calc(15px / 1.618); font-weight: var(--sw-font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-muted); }
.e-logo__word[data-word="3"] b { font-weight: var(--sw-font-weight-regular); }
.e-logo__word[data-word="3"] span { font-weight: var(--sw-font-weight-bold); }
.e-logo__word[data-word="4"] { font-family: var(--sw-font-family-mono); font-size: 14.5px; text-transform: lowercase; letter-spacing: 0; }

.e-nav__links { display: flex; gap: 2px; }
.e-nav__links a {
  padding: 7px 12px; border-radius: var(--sw-radius-full);
  color: var(--e-muted); text-decoration: none; font-size: 14px; font-weight: var(--sw-font-weight-medium);
  transition: color 0.15s, background-color 0.15s;
}
.e-nav__links a:hover { color: var(--sw-color-text-primary); }
.e-nav__links a[aria-current="true"] { color: var(--sw-color-text-primary); }
/* One pill under the section in view; it glides from link to link (owner, 2026-10-21). */
.e-nav__links { position: relative; }
.e-nav__links a { position: relative; z-index: 1; }
.e-nav__pill {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--sw-radius-full);
  background: var(--e-quiet-track); opacity: 0;
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.e-nav__pill[data-on] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .e-nav__pill { transition: opacity 0.2s; } }
:root[data-e-motion="still"] .e-nav__pill { transition: opacity 0.2s; }
.e-nav__tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.e-picker { display: flex; align-items: center; height: 36px; padding: 3px; box-sizing: border-box; border-radius: var(--sw-radius-full); background: var(--e-quiet-track); }
.e-picker__arrow, .e-picker__btn { border: 0; background: none; cursor: pointer; font: inherit; color: var(--e-quiet-text); }
.e-picker__arrow { width: 30px; height: 30px; border-radius: var(--sw-radius-full); display: grid; place-items: center; }
.e-picker__arrow:hover { color: var(--sw-color-text-primary); }
.e-picker__btn {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; min-width: 148px;
  border-radius: var(--sw-radius-full); background: var(--e-quiet-on);
  font-size: 13px; font-weight: var(--sw-font-weight-medium); color: var(--sw-color-text-primary);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03);
}
.e-picker__dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--sw-color-accent-default) 0 50%, var(--sw-color-brand-300) 0);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}

/* --- Hero ------------------------------------------------------------------ */

.e-hero { position: relative; padding-block: 72px 56px; isolation: isolate; overflow: clip; }
.e-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/*
 * Soft blobs from radial gradients: no filter, nothing to compute while scrolling.
 * V2 (owner): none of them reaches up behind the sticky header, so header and page
 * meet on the same plain grey (HeroUI), and none sits behind the scene tabs, so the
 * grey tabs rest on grey ground. The third one glows out from behind the frame,
 * bottom left.
 */
.e-blob { position: absolute; border-radius: 50%; opacity: var(--e-blob); }
.e-blob--1 { width: 900px; height: 520px; inset-inline-start: -300px; top: 40px; background: radial-gradient(closest-side, var(--e-tint-1), transparent); }
.e-blob--2 { width: 860px; height: 520px; inset-inline-end: -280px; top: 20px; background: radial-gradient(closest-side, var(--e-tint-2), transparent); }
.e-blob--3 { width: 980px; height: 720px; inset-inline-start: calc(50% - 880px); bottom: -120px; background: radial-gradient(closest-side, var(--e-tint-3), transparent); }
.e-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--e-line) 1px, transparent 1px), linear-gradient(to bottom, var(--e-line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  mask-image: radial-gradient(ellipse 58% 40% at 50% 10%, #000 15%, transparent 78%);
  opacity: 0.6;
}
.e-noise {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-sw-color-scheme="dark"] .e-noise { mix-blend-mode: screen; opacity: 0.035; }

.e-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.e-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 11px; box-sizing: border-box;
  border-radius: var(--sw-radius-full); border: 1px solid var(--e-outline);
  background: color-mix(in srgb, var(--sw-color-surface-raised) 72%, transparent); backdrop-filter: blur(8px);
  font-size: 13px; font-weight: var(--sw-font-weight-medium); color: var(--sw-color-text-primary); cursor: default;
}
.e-badge .sw-icon { color: var(--sw-color-status-success-text); font-size: 15px; }
.e-h1 { margin: 26px 0 0; font-size: 84px; line-height: 0.98; letter-spacing: -0.052em; font-weight: var(--sw-font-weight-bold); }
.e-lead { max-width: 640px; margin: 24px auto 0; font-size: 19px; line-height: 1.6; color: var(--e-muted); text-wrap: pretty; }
.e-cta { display: flex; gap: 12px; margin-top: 34px; justify-content: center; }

/*
 * Hero buttons: one family. Both are pills with the same light that follows the
 * pointer and the same lift; only the surface tells primary from secondary.
 */
.e-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; box-sizing: border-box;
  border: 0; border-radius: var(--sw-radius-full); cursor: pointer; text-decoration: none;
  font: inherit; font-size: 15px; font-weight: var(--sw-font-weight-semibold);
  transition: transform 0.2s var(--sw-motion-easing-standard), box-shadow 0.2s var(--sw-motion-easing-standard);
}
.e-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(150px circle at var(--x, 50%) var(--y, -80px), var(--e-glint), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.e-btn:hover { transform: translateY(-1px); }
.e-btn:hover::after { opacity: 1; }
.e-btn:active { transform: translateY(0); }
.e-btn--primary {
  --e-glint: color-mix(in srgb, var(--sw-color-text-on-accent) 24%, transparent);
  background: var(--sw-color-accent-default); color: var(--sw-color-text-on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sw-color-text-on-accent) 16%, transparent), 0 1px 2px rgb(0 0 0 / 0.14), 0 8px 20px -10px rgb(0 0 0 / 0.4);
}
.e-btn--primary:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sw-color-text-on-accent) 16%, transparent), 0 2px 4px rgb(0 0 0 / 0.12), 0 14px 28px -12px rgb(0 0 0 / 0.45); }
.e-btn--secondary {
  --e-glint: color-mix(in srgb, var(--sw-color-text-primary) 8%, transparent);
  background: var(--sw-color-surface-raised); color: var(--sw-color-text-primary);
  box-shadow: inset 0 0 0 1px var(--e-quiet-line), 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 20px -12px rgb(0 0 0 / 0.16);
}
.e-btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--e-quiet-line), 0 2px 4px rgb(0 0 0 / 0.05), 0 14px 28px -14px rgb(0 0 0 / 0.22); }
.e-btn .sw-icon { font-size: 16px; }
.e-btn--block { width: 100%; height: 40px; font-size: 14px; }

/* Showcase */
.e-show { width: min(var(--e-max), 100% - 176px); margin-top: 64px; }
.e-stage { position: relative; }
.e-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--sw-radius-full); cursor: pointer; font-size: 20px;
  background: var(--sw-color-surface-raised); color: var(--e-quiet-text);
  box-shadow: inset 0 0 0 1px var(--e-quiet-line), 0 1px 2px rgb(0 0 0 / 0.05);
  transition: color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.e-arrow:is(:hover, [data-hovered]) { color: var(--sw-color-text-primary); box-shadow: inset 0 0 0 1px var(--sw-color-border-default), 0 4px 12px -4px rgb(0 0 0 / 0.15); }
.e-arrow:is(:active, [data-pressed]) { transform: scale(0.96); }
/* The band's arrows and pause are our IconButton and ToggleButton; the page keeps their round, quiet look. */
.e-arrow.sw-button { min-inline-size: 44px; min-block-size: 44px; border: 0; background: var(--sw-color-surface-raised); color: var(--e-quiet-text); }
.e-arrow.sw-button[data-selected] { background: var(--sw-color-surface-raised); color: var(--sw-color-text-primary); }
.e-arrow .sw-button__label { display: grid; }

/* V2 (owner): no outline around the frame; one solid surface. The inner outline stays. */
.e-frame {
  position: relative; padding: 0 6px 6px; border-radius: 24px;
  background: var(--sw-color-surface-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 24px 48px -32px rgb(0 0 0 / 0.18);
}
.e-frame__dots { height: 30px; display: flex; align-items: center; gap: 7px; padding-inline: 10px; }
.e-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--sw-color-neutral-300); }
[data-sw-color-scheme="dark"] .e-frame__dots i { background: var(--sw-color-neutral-700); }
.e-frame__app {
  position: relative; height: 660px; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--e-outline);
  background: var(--sw-color-surface-page);
}
.e-frame__scene {
  position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sw-color-text-primary) 20%, transparent) transparent;
  animation: e-in 0.32s var(--sw-motion-easing-decelerate);
}
@keyframes e-in { from { opacity: 0; transform: translateY(8px) scale(0.996); } }

.e-under { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; }
.e-live { display: flex; align-items: center; gap: 6px; }
.e-live__label { margin-inline-end: 10px; font-size: 13px; font-weight: var(--sw-font-weight-medium); color: var(--e-muted); }
.e-live__dash {
  position: relative; width: 26px; height: 6px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--sw-radius-full); background: var(--sw-color-neutral-300);
  transition: width 0.3s var(--sw-motion-easing-standard), background-color 0.3s;
}
[data-sw-color-scheme="dark"] .e-live__dash { background: var(--sw-color-neutral-700); }
.e-live__dash::before { content: ""; position: absolute; inset: -10px -3px; }
.e-live__dash:is(:hover, [data-hovered]) { background: var(--sw-color-neutral-400); }
.e-live__dash[data-pressed] { background: var(--sw-color-neutral-500); }
.e-live__dash[data-selected] { width: 48px; background: var(--sw-color-text-primary); }
.e-live__dash[data-selected][data-pressed] { scale: 0.9; }
/* The dashes are our ToggleButtons in a ToggleButtonGroup; the page draws them as strokes. */
.e-live__group { display: flex; align-items: center; gap: 6px; }
.e-live__dash.sw-button { min-inline-size: 0; min-block-size: 0; height: 6px; padding: 0; border: 0; box-shadow: none; }
.e-live__dash .sw-button__label { display: none; }
.e-live__now { font-size: 13px; color: var(--e-muted); }

/* --- Scenes ---------------------------------------------------------------- */

.e-scene { min-height: 100%; box-sizing: border-box; padding: 24px; }
.e-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.e-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.e-card__title { margin: 0; font-size: 15px; font-weight: var(--sw-font-weight-semibold); letter-spacing: -0.01em; line-height: 1.5; }
.e-card__sub { margin: 2px 0 0; font-size: 13px; color: var(--e-muted); }
.e-app__title { margin: 0; font-size: 20px; font-weight: var(--sw-font-weight-semibold); letter-spacing: -0.02em; line-height: 1.5; }
/* Where the title and the controls do not fit side by side, the controls go below, whole (B-116), as in the dashboard. */
.e-app__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.e-logo-dot { width: 20px; height: 20px; flex: none; border-radius: calc(var(--sw-skin-radius-control) * 0.75); background: var(--sw-color-accent-default); }
.e-person { display: inline-flex; align-items: center; gap: 10px; }
.e-person > span:not(.e-av) { display: flex; flex-direction: column; }
.e-person strong { font-size: 13.5px; font-weight: var(--sw-font-weight-medium); }
.e-person small { font-size: 12px; color: var(--e-muted); }

/*
 * Round nine (owner, 2026-10-20): the mockup polished detail by detail, after HeroUI,
 * tweakcn and shadcn. The rules below hold for every skin, brand and scheme; they use
 * the system's tokens, and the few fixed sizes are the draft's own.
 */

/* Avatars with a soft hue of their own (build.mjs): text stays text-primary, so the contrast is the text's. */
.sw-avatar.e-av { --e-hue: var(--sw-color-info-500); background: color-mix(in oklab, var(--e-hue) 20%, var(--sw-color-surface-raised)); color: var(--sw-color-text-primary); }
.sw-avatar.e-av--success { --e-hue: var(--sw-color-success-500); }
.sw-avatar.e-av--warning { --e-hue: var(--sw-color-warning-500); }
.sw-avatar.e-av--danger { --e-hue: var(--sw-color-danger-500); }
.sw-avatar.e-av--brand { --e-hue: var(--sw-color-brand-500); }
[data-sw-color-scheme="dark"] .sw-avatar.e-av { background: color-mix(in oklab, var(--e-hue) 32%, var(--sw-color-surface-raised)); }

/* Status and change as soft chips: a tint, the word in the tone's text colour; the dot or arrow repeats it. */
.e-status, .e-trend {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; box-sizing: border-box; flex: none;
  border-radius: var(--sw-radius-full); font-size: 12px; font-weight: var(--sw-font-weight-medium); line-height: 1; white-space: nowrap;
  background: var(--sw-color-status-success-surface); color: var(--sw-color-status-success-text);
}
.e-status i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
:is(.e-status, .e-trend)[data-tone="warning"] { background: var(--sw-color-status-warning-surface); color: var(--sw-color-status-warning-text); }
:is(.e-status, .e-trend)[data-tone="danger"] { background: var(--sw-color-status-danger-surface); color: var(--sw-color-status-danger-text); }
:is(.e-status, .e-trend)[data-tone="info"] { background: var(--sw-color-status-info-surface); color: var(--sw-color-status-info-text); }
.e-status[data-tone="neutral"] { background: var(--e-quiet-track); color: var(--sw-color-text-secondary); }
.e-trend { gap: 4px; padding: 0 7px 0 6px; font-weight: var(--sw-font-weight-semibold); font-variant-numeric: tabular-nums; }
.e-trend .sw-icon { font-size: 13px; }

/* Fields bring 16 px of margin below them (field.css), meant for forms; in bars and stacks it pushed them off the line of their buttons. Here the layout spaces them. */
.e-frame .sw-field { margin-block-end: 0; }

/* Counts are round (owner): one or two digits sit in a circle, not in a pill of 22 by 20. */
.e-frame :is(.sw-nav-list, .e-crm__colhead, .e-chat__meta) .sw-badge { inline-size: 22px; min-inline-size: 22px; block-size: 22px; padding: 0; font-size: 11px; }
.e-crm__colhead .sw-badge { background: var(--sw-color-surface-raised); }
/* The dot of the bell sits on the bell, not on the corner of the invisible 44 px box. */
.e-dash__head .sw-badge-anchor > .sw-badge { inset-block-start: 11px; inset-inline-end: 12px; box-shadow: 0 0 0 2px var(--sw-color-surface-page); }

/* Tables in the mockup: no fill behind the head (owner). Capitals and the stronger rule say it is the head. */
.e-frame .sw-table th { background: transparent; border-block-end-color: var(--sw-color-border-default); }
.e-frame .sw-table :is(th, td):first-child { padding-inline-start: 0; }
.e-frame .sw-table :is(th, td):last-child { padding-inline-end: 0; }
.e-frame .sw-table tbody tr:last-child td { border-block-end-color: transparent; }
.e-amt { font-variant-numeric: tabular-nums; }
.e-amt[data-tone="success"] { font-weight: var(--sw-font-weight-semibold); }

/* Tabs as a segmented strip (owner: as on HeroUI and as our scene tabs). The chosen tab is a raised pill that glides (entwurf.js). */
.e-seg { position: relative; }
.e-seg .sw-tabs { gap: 0; align-items: flex-start; }
.e-seg .sw-tabs__list {
  position: relative; display: inline-flex; gap: 2px; padding: 3px; overflow: visible; box-shadow: none;
  border-radius: calc(var(--sw-skin-radius-control) + 3px); background: var(--e-quiet-track);
}
.e-seg .sw-tabs__tab {
  position: relative; z-index: 1; min-block-size: 30px; padding-inline: 14px; border: 0;
  border-radius: var(--sw-skin-radius-control); font-size: 13px; color: var(--e-quiet-text);
}
.e-seg .sw-tabs__tab[data-hovered], .e-seg .sw-tabs__tab:hover { color: var(--sw-color-text-primary); }
.e-seg .sw-tabs__tab[data-selected] { color: var(--sw-color-text-primary); }
.e-seg:not([data-ind]) .sw-tabs__tab[data-selected], .e-seg__ind {
  background: var(--e-quiet-on); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03);
}
.e-seg__ind {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: var(--sw-skin-radius-control);
  transition: translate 0.3s var(--sw-motion-easing-standard), width 0.3s var(--sw-motion-easing-standard);
}
[data-sw-color-scheme="dark"] :is(.e-seg:not([data-ind]) .sw-tabs__tab[data-selected], .e-seg__ind) { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 0 0 1px rgb(255 255 255 / 0.06); }

/*
 * The small filter (build.mjs): our Select with an icon in front, as in V2. The Select
 * has no place for one (B-112), so the icon lies over the button where its padding
 * is, and the pointer goes through it to the button. Inset and size follow the
 * field's own ladder (field.css: 0.75 to 1.25 of the density's inset, with the text),
 * so it sits right in every size and density, and on the other side in RTL.
 */
.e-filter { display: inline-flex; position: relative; --e-k: 1; }
.e-filter:has(.sw-field[data-size="xs"]) { --e-k: 0.75; }
.e-filter:has(.sw-field[data-size="sm"]) { --e-k: 0.875; }
.e-filter:has(.sw-field[data-size="lg"]) { --e-k: 1.125; }
.e-filter:has(.sw-field[data-size="xl"]) { --e-k: 1.25; }
.e-filter > .sw-icon {
  position: absolute; z-index: 1; inset-block: 0; margin-block: auto;
  inset-inline-start: calc(var(--sw-inset) * var(--e-k) + var(--sw-skin-border-width));
  font-size: calc(1rem * var(--e-k)); color: var(--sw-color-text-secondary); pointer-events: none;
}
.e-filter[data-lead] .sw-select__button { padding-inline-start: calc(var(--sw-field-inset) + 1em + var(--sw-space-05)); }
/* A filter shows its value on one line (B-116): where a bar gets tight, the bar gives way, not the value (finding 21). */
.e-filter .sw-select__value { white-space: nowrap; }
/*
 * The filter answers the pointer in every scheme (B-111). A field shows its hover only
 * by its border, and that border does not change in the dark scheme of every brand but
 * Graphit, nor under `contrast: more` (findings 15 and 22). The filter is a button, so
 * it takes the tint of a button for hover and press, as in V2.
 */
.e-filter .sw-select__button[data-hovered] { background-color: var(--sw-color-surface-hover); }
.e-filter .sw-select__button[data-pressed] { background-color: var(--sw-color-surface-pressed); }
/*
 * It also looks like the buttons beside it, as in V2 (owner): their weight, their surface
 * and their border, stronger on hover (button.css, secondary). In Graphit that is the
 * quiet line of the lead style (leitstil.css): like a secondary button, the filter is
 * told by its value, icon and chevron, not by its border (1.4.11).
 */
.e-filter .sw-select__button { border-color: var(--sw-color-border-default); background-color: var(--sw-color-surface-raised); font-weight: var(--sw-skin-control-weight); }
.e-filter .sw-select__button[data-hovered] { border-color: var(--sw-color-border-strong); }
[data-sw-brand="graphite"] .e-filter .sw-select__button { border-color: var(--e-quiet-line); }
[data-sw-brand="graphite"] .e-filter .sw-select__button[data-hovered] { border-color: var(--sw-color-border-default); }

/*
 * Bars where fields and buttons stand side by side (B-116, owner): every part takes
 * the height of the tallest, as a label inside a field makes that field taller. One
 * rule for the page, wherever a row of the mockup or the blocks holds both.
 * - The tallest keeps its height; the others stretch to it. A field's box grows with
 *   its field, so its focus ring and border follow; a button keeps its text and icon
 *   in the middle; an IconButton stays square by its own aspect ratio (button.css).
 * - Where a field shows its label on top, the label is not part of the height: the
 *   parts stay at the foot of the box, as before, and the box is as tall as the
 *   buttons of its size.
 * - Heights outside such bars do not change.
 */
:is(.e-row, .e-chat__input):has(.sw-field):has(.sw-button:not(.sw-field *)) { align-items: stretch; }
:is(.e-row, .e-chat__input):has(.sw-button:not(.sw-field *)):has(.sw-field[data-label-style="top"]:not([data-label-hidden])) { align-items: flex-end; }
:is(.e-row, .e-chat__input):has(.sw-button:not(.sw-field *)) .sw-field[data-label-style="top"] > .sw-field__box { flex: 1 1 auto; }

/* Dashboard (HeroUI): collapsible sidebar, segmented tabs with filters, charts and a table. */
.e-dash { display: flex; height: 100%; padding: 0; }
.e-dash__side, .e-app__side { --e-side-bg: var(--sw-color-surface-raised); background: var(--e-side-bg); }
.e-dash__side {
  width: 232px; flex: none; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: 14px 12px;
  border-inline-end: 1px solid var(--e-line);
  transition: width 0.28s var(--sw-motion-easing-standard), padding 0.28s var(--sw-motion-easing-standard), border-color 0.28s;
}
.e-dash__brand { display: flex; align-items: center; gap: 10px; padding: 2px 2px 2px 8px; font-size: 14px; font-weight: var(--sw-font-weight-semibold); white-space: nowrap; }
.e-dash__me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--sw-skin-radius-control); background: var(--sw-color-surface-page); white-space: nowrap; }
[data-sw-skin="base"] .e-dash__me { background: var(--sw-color-surface-raised); }
.e-dash__me strong { display: block; font-size: 13px; }
.e-dash__me small { font-size: 12px; color: var(--e-muted); }
.e-dash[data-collapsed="true"] .e-dash__side { width: 0; padding-inline: 0; border-inline-end-color: transparent; }
.e-dash__title { display: flex; align-items: flex-start; gap: 10px; }
/* The collapse button is our IconButton (Collapse in insel.mjs); only its place is the page's. */
.e-dash__title .e-dash__collapse { flex: none; margin-block-start: -4px; margin-inline-start: -8px; }
.e-dash__main { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 28px; scrollbar-width: thin; }
.e-dash__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.e-dash__head .e-row { gap: 6px; }
.e-dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.e-dash__bar .e-row { gap: 8px; }
.e-dash__panel { display: flex; flex-direction: column; gap: 14px; }
.e-dash__panel[hidden] { display: none; }
.e-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 14px; }
/*
 * Figures are our Stat (B-111). The page sets the size of the figure, puts the change
 * of a KPI top right as in V2, and draws the change as a soft chip.
 */
.e-frame .sw-stat__trend {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 6px; box-sizing: border-box; flex: none; align-self: flex-start;
  border-radius: var(--sw-radius-full); font-size: 12px; font-weight: var(--sw-font-weight-semibold); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.e-frame .sw-stat__trend[data-sentiment="positive"] { background: var(--sw-color-status-success-surface); color: var(--sw-color-status-success-text); }
.e-frame .sw-stat__trend[data-sentiment="negative"] { background: var(--sw-color-status-danger-surface); color: var(--sw-color-status-danger-text); }
.e-frame .sw-stat__trend .sw-icon { font-size: 13px; }
.e-frame .sw-stat__value { font-family: var(--e-font-head, inherit); font-weight: var(--sw-font-weight-bold); font-variant-numeric: tabular-nums; }
.e-kpi { position: relative; margin: 0; padding: 16px 16px 12px; }
.e-kpi .sw-stat, .e-kpi .sw-stat__body { gap: 6px; }
/* A Stat whose label is for screen readers only keeps the gap of that empty label, 4px above the figure (finding 23); it closes here, as in V2. */
.sw-stat:has(> .sw-stat__label > .sw-visually-hidden:only-child) { gap: 0; }
.e-kpi .sw-stat__label { font-size: 13px; line-height: 22px; font-weight: var(--sw-font-weight-medium); color: var(--e-muted); }
.e-kpi .sw-stat__value { font-size: 24px; line-height: 1.5; letter-spacing: -0.025em; }
.e-kpi .sw-stat__trend { position: absolute; top: 16px; inset-inline-end: 16px; }
.e-spark { width: 100%; height: 34px; display: block; overflow: visible; }
.e-spark__line { fill: none; stroke: var(--e-c1); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.e-dash__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; }

/* Charts (build.mjs): scale left, dots on every point, a line and a card under the pointer. */
.e-stop-a { stop-color: var(--e-c1); stop-opacity: 0.16; }
.e-stop-b { stop-color: var(--e-c1); stop-opacity: 0; }
.e-ranges > [hidden] { display: none; }
.e-range { display: flex; flex-direction: column; gap: 14px; }
.e-chart__sum { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -4px; }
.e-chart__total { display: block; margin: 0; }
.e-chart__total .sw-stat__body { flex-direction: row; align-items: center; gap: 10px; }
.e-chart__total .sw-stat__value { font-size: 26px; line-height: 1.5; letter-spacing: -0.03em; }
.e-chart__total .sw-stat__trend { align-self: center; }
.e-chart { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: var(--h) auto; gap: 10px 12px; }
.e-chart__y { position: relative; grid-row: 1; grid-column: 1; font-size: 11px; color: var(--e-muted); font-variant-numeric: tabular-nums; }
.e-chart__y span { position: absolute; right: 0; translate: 0 -50%; line-height: 1; }
.e-chart__plot { position: relative; grid-row: 1; grid-column: 2; cursor: crosshair; }
.e-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.e-chart__x { position: relative; grid-row: 2; grid-column: 2; height: 13px; font-size: 11px; color: var(--e-muted); }
.e-chart__x span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; line-height: 1.2; }
.e-line { fill: none; stroke: var(--e-c1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.e-line--prev { stroke: var(--e-c2); stroke-dasharray: 4 5; stroke-width: 1.5; }
.e-grid-line { stroke: var(--e-line); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.e-chart__dots { position: absolute; inset: 0; pointer-events: none; }
.e-chart__dots i {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-sizing: border-box; border-radius: 50%;
  background: var(--sw-color-surface-raised); border: 2px solid var(--e-c1);
  transition: transform 0.15s var(--sw-motion-easing-standard), background-color 0.15s;
}
.e-chart__dots i[data-on] { transform: scale(1.4); background: var(--e-c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-c1) 18%, transparent); }
.e-chart__dots[data-k="1"] i { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-width: 1.5px; border-color: var(--e-c2); opacity: 0; }
.e-chart__dots[data-k="1"] i[data-on] { opacity: 1; transform: none; background: var(--sw-color-surface-raised); box-shadow: none; }
.e-chart__cursor {
  position: absolute; top: 0; bottom: 0; left: 0; width: 1px; margin-left: -0.5px; pointer-events: none;
  background: color-mix(in srgb, var(--sw-color-text-primary) 24%, transparent); opacity: 0; transition: opacity 0.15s;
}
.e-chart__tip {
  position: absolute; top: -6px; left: 0; z-index: 2; width: max-content; min-width: 150px; box-sizing: border-box; padding: 9px 11px; pointer-events: none; white-space: nowrap;
  border-radius: calc(var(--sw-skin-radius-control) + 2px); background: var(--sw-color-surface-overlay); color: var(--sw-color-text-primary);
  box-shadow: 0 0 0 1px var(--sw-color-border-subtle), 0 10px 28px -10px rgb(0 0 0 / 0.28);
  font-size: 12px; opacity: 0; transition: opacity 0.15s;
}
.e-chart[data-hover] :is(.e-chart__cursor, .e-chart__tip) { opacity: 1; }
.e-chart__tip b { display: block; margin-bottom: 5px; font-weight: var(--sw-font-weight-semibold); }
.e-chart__tip p { display: flex; align-items: center; gap: 7px; margin: 0; line-height: 1.65; color: var(--sw-color-text-secondary); }
.e-chart__tip p i { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--e-c1); }
.e-chart__tip p + p i { background: var(--e-c2); }
.e-chart__tip p span { margin-inline-start: auto; padding-inline-start: 14px; font-weight: var(--sw-font-weight-semibold); color: var(--sw-color-text-primary); font-variant-numeric: tabular-nums; }
.e-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.e-legend li, .e-legend span { display: flex; align-items: center; gap: 8px; }
.e-legend b { margin-inline-start: auto; font-weight: var(--sw-font-weight-semibold); font-variant-numeric: tabular-nums; }
.e-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.e-legend--inline { flex-direction: row; gap: 14px; font-size: 12px; color: var(--e-muted); }
:is(.e-legend i, .e-donut__seg)[data-i="0"] { background: var(--e-c1); stroke: var(--e-c1); }
:is(.e-legend i, .e-donut__seg)[data-i="1"] { background: var(--e-c2); stroke: var(--e-c2); }
:is(.e-legend i, .e-donut__seg)[data-i="2"] { background: var(--e-c3); stroke: var(--e-c3); }
.e-legend i[data-i="p"] { background: repeating-linear-gradient(90deg, var(--e-c2) 0 3px, transparent 3px 5px); height: 2px; }
.e-donut { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.e-donut__ring { position: relative; width: 156px; height: 156px; }
.e-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.e-donut__track { fill: none; stroke: var(--e-quiet-track); stroke-width: 4.5; }
.e-donut__seg { fill: none; stroke-width: 4.5; }
.e-donut__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.e-donut__c b { font-size: 20px; font-weight: var(--sw-font-weight-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.e-donut__c small { font-size: 12px; color: var(--e-muted); }
/*
 * As the page builds up, a figure counts up in a copy laid over it (B-113, entwurf.js).
 * The figure itself stays, transparent, for screen readers; the copy has no text of its
 * own for them ("/ ''"), and a browser without that syntax keeps the first content.
 */
[data-e-count] { position: relative; -webkit-text-fill-color: transparent; }
[data-e-count]::after {
  content: attr(data-e-count); content: attr(data-e-count) / "";
  position: absolute; inset: 0; white-space: nowrap; -webkit-text-fill-color: currentColor;
}
.e-donut .e-legend { width: 100%; }
.e-bars { display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 176px auto; gap: 10px 12px; }
.e-bars__plot { position: relative; grid-row: 1; grid-column: 2; display: flex; align-items: flex-end; gap: 10px; }
.e-bars__tick { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--e-line); }
.e-bars__col { position: relative; z-index: 1; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.e-bars__col i { position: relative; width: 100%; max-width: 24px; border-radius: 99px; background: var(--e-c3); transition: background-color 0.15s; }
.e-bars__col[data-top] i { background: var(--e-c1); }
.e-bars__col:not([data-top]):is(:hover, [data-on]) i { background: var(--e-c2); }
.e-bars__col i::after {
  content: attr(data-v); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 4px; padding: 3px 7px;
  border-radius: 6px; background: var(--sw-color-text-primary); color: var(--sw-color-surface-page);
  font-size: 11px; font-weight: var(--sw-font-weight-semibold); font-style: normal; opacity: 0; pointer-events: none;
  transition: opacity 0.15s, translate 0.15s var(--sw-motion-easing-standard);
}
.e-bars__col:is(:hover, [data-on]) i::after { opacity: 1; translate: -50% 0; }
/* The refresh of the dashboard (B-114): skeletons of the system laid over figures and charts while they load (entwurf.js). */
.e-skel-host { position: relative; }
.e-skel { position: absolute; z-index: 1; }
/* While it waits, the refresh button shows the system's spinner in place of its icon, so it keeps its size (Befund 25). */
.e-refresh[data-pending] .sw-button__icon { display: none; }
.e-refresh[data-pending]::after { margin-inline-start: 0; }
/* As the page builds up, the bars grow from their baseline (B-113, entwurf.js). */
.e-bars__col i { transform-origin: bottom; }
/*
 * Charts do not mirror in RTL: Material ("charts and graphs" are not mirrored, clocks
 * still turn clockwise), Wikimedia Codex (not where it could change how the data reads)
 * and AG Charts (axes keep their direction). The lines and the ring never did; the bars
 * did, through flex, so the days ran the other way than the months beside them. Now one
 * direction holds in the whole dashboard, and the arrow keys follow it (owner, 2026-10-22).
 */
[dir="rtl"] :is(.e-bars__plot, .e-bars__x) { direction: ltr; }
.e-bars__x { grid-row: 2; grid-column: 2; display: flex; gap: 10px; font-size: 11px; color: var(--e-muted); }
.e-bars__x span { flex: 1; text-align: center; }

/* Mail and chat */
.e-app { display: flex; height: 100%; padding: 0; }
.e-app__side {
  width: 220px; flex: none; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px; padding: 16px 12px;
  border-inline-end: 1px solid var(--e-line);
}
.e-app__brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px; font-weight: var(--sw-font-weight-semibold); font-size: 14px; }
/*
 * The labels of the mail sidebar keep the small look of V2 (B-111): a NavSection with a
 * quiet title and short rows, below the folders. The dot sits in the icon place of its
 * NavItem; an `<i>` is inline, so it needs a box of its own to be drawn.
 */
.e-app__side .sw-nav-list__section { margin-block-start: 10px; }
.e-app__side .sw-nav-list__section-title { margin-block-end: 6px; padding-inline: 10px; font-size: 12px; color: var(--e-muted); }
.e-app__side .sw-nav-list__section .sw-nav-list__list { gap: 2px; }
.e-app__side .sw-nav-list__section .sw-nav-list__link { min-block-size: 35px; gap: 12px; padding: 7px 10px; box-sizing: border-box; font-size: 14px; color: var(--sw-color-text-secondary); }
.e-app__side .sw-nav-list__section .sw-nav-list__link:hover { color: var(--sw-color-text-primary); }
.e-label-dot { display: block; width: 8px; height: 8px; margin-inline: 4px; border-radius: 50%; background: var(--sw-color-status-info-solid); }
.e-label-dot[data-tone="success"] { background: var(--sw-color-status-success-solid); }
.e-label-dot[data-tone="warning"] { background: var(--sw-color-status-warning-solid); }
.e-mail__list {
  width: 320px; flex: none; box-sizing: border-box; overflow: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-inline-end: 1px solid var(--e-line);
}
/*
 * Mail and chat lists are our ListBox (B-111). The rows keep the mockup's look: a
 * card for the open mail, no line between rows, and no tick - the raised card and
 * the outline are the mark of the chosen row, which stays a shape in forced colours.
 */
/*
 * Their name is for screen readers only, as in V2: the list sits under the search or
 * the app's name, and a visible "Posteingang" would repeat the folder beside it. Our
 * ListBox always shows its label (B-112), so the page hides it the way
 * `sw-visually-hidden` does; the list stays named by it (`aria-labelledby`).
 */
:is(.e-mail__items, .e-chat__list) > .sw-field__label {
  position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:is(.e-mail__items, .e-chat__list) .sw-listbox { max-block-size: none; overflow: visible; gap: 4px; }
:is(.e-mail__items, .e-chat__list) .sw-listbox__item {
  flex-shrink: 0; padding: 10px; border: 0; border-radius: var(--sw-skin-radius-control);
  font-weight: inherit; transition: background-color 0.15s;
}
:is(.e-mail__items, .e-chat__list) .sw-listbox__label { min-width: 0; }
:is(.e-mail__items, .e-chat__list) .sw-listbox__check { display: none; }
.e-chat__list .sw-listbox { gap: 2px; }
.e-mail__item:not([data-selected]):is(:hover, [data-hovered], [data-focused]) { background: color-mix(in srgb, var(--sw-color-text-primary) 4%, transparent); }
.e-mail__item[data-pressed]:not([data-selected]) { background: color-mix(in srgb, var(--sw-color-text-primary) 8%, transparent); }
.e-mail__item[data-selected] { background: var(--sw-color-surface-raised); box-shadow: 0 0 0 1px var(--e-outline), var(--sw-skin-shadow-raised); }
:is(.e-mail__items, .e-chat__list) .sw-listbox__item[data-selected][data-pressed] { scale: 0.985; }
:is(.e-mail__items, .e-chat__list) .sw-listbox__item { transition-property: background-color, box-shadow, scale; }
.e-mail__row { display: flex; gap: 10px; }
.e-mail__text { flex: 1; min-width: 0; }
.e-mail__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.e-mail__top strong { font-weight: var(--sw-font-weight-medium); }
.e-mail__top span { display: inline-flex; align-items: center; font-size: 12px; color: var(--e-muted); white-space: nowrap; }
.e-mail__subj { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 13px; }
.e-mail__subj .sw-icon { flex: none; font-size: 12px; color: var(--e-muted); }
.e-mail__item--unread :is(.e-mail__top strong, .e-mail__subj) { font-weight: var(--sw-font-weight-semibold); }
.e-mail__item--unread .e-mail__top > span { color: var(--sw-color-text-primary); font-weight: var(--sw-font-weight-medium); }
.e-unread.sw-badge { min-inline-size: 0; min-block-size: 0; }
.e-unread { width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--sw-color-accent-default); }
.e-mail__prev { display: block; font-size: 12px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-mail__read { flex: 1; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 28px; background: var(--sw-color-surface-raised); }
.e-mail__head { display: flex; align-items: center; gap: 12px; }
.e-mail__head strong { font-size: 14px; }
.e-mail__body p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.e-attach {
  display: flex; align-items: center; gap: 12px; align-self: flex-start; min-width: 300px; box-sizing: border-box;
  padding: 8px 8px 8px 14px; border-radius: var(--sw-skin-radius-control); background: var(--sw-color-surface-page);
}
.e-attach > .sw-icon { flex: none; font-size: 20px; color: var(--e-muted); }
.e-attach > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.e-attach strong { font-size: 13px; font-weight: var(--sw-font-weight-medium); }
.e-attach small { font-size: 12px; color: var(--e-muted); }
.e-mail__reply { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.e-chat__side { width: 268px; }
.e-chat__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.e-chat__text { display: flex; flex-direction: column; min-width: 0; }
.e-chat__text strong { font-size: 13px; }
.e-chat__text > span { font-size: 12px; color: var(--e-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-chat__item:not([data-selected]):is(:hover, [data-hovered], [data-focused]) { background: color-mix(in srgb, var(--sw-color-text-primary) 4%, transparent); }
.e-chat__item[data-pressed]:not([data-selected]) { background: color-mix(in srgb, var(--sw-color-text-primary) 8%, transparent); }
.e-chat__item[data-selected] { background: var(--e-quiet-track); box-shadow: 0 0 0 1px var(--e-outline); }
.e-chat__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; align-self: stretch; justify-content: center; }
.e-chat__meta small { font-size: 11px; color: var(--e-muted); }
.e-presence { position: relative; display: inline-flex; flex: none; }
/* Presence is our BadgeAnchor with a dot Badge; the page puts the dot bottom right, with a ring in the side's colour. */
.e-presence > .sw-badge[data-dot] {
  inset: auto -1px -1px auto; translate: none; width: 11px; height: 11px; min-inline-size: 0; min-block-size: 0; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--e-side-bg); background: var(--sw-color-status-success-solid);
}
/* Avatar groups are our AvatarGroup; the page keeps the ring of its surface and its overlap. */
.e-stack .sw-avatar { box-shadow: 0 0 0 2px var(--sw-color-surface-raised); }
.e-stack.sw-avatar-group > * + * { margin-inline-start: -6px; }
.e-chat__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.e-chat__main > .e-mail__head { padding: 12px 24px; border-block-end: 1px solid var(--e-line); background: var(--sw-color-surface-raised); }
.e-chat__msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; }
.e-chat__day { align-self: center; padding: 2px 10px; border-radius: var(--sw-radius-full); background: var(--e-quiet-track); font-size: 12px; color: var(--e-muted); }
.e-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 68%; }
.e-msg[data-who="me"] { align-self: flex-end; }
.e-msg > .sw-avatar.e-av, .e-msg__gap { margin-block-end: 20px; }
.e-msg__gap { width: var(--sw-space-3); flex: none; }
.e-msg__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e-msg[data-who="me"] .e-msg__col { align-items: flex-end; }
.e-msg__name { padding-inline: 4px; font-size: 12px; font-weight: var(--sw-font-weight-semibold); color: var(--e-muted); }
.e-msg__time { display: inline-flex; align-items: center; gap: 3px; padding-inline: 4px; font-size: 11px; color: var(--e-muted); }
.e-msg__time .sw-icon { font-size: 12px; }
.e-msg__bubble {
  margin: 0; padding: 10px 14px; font-size: 14px; line-height: 1.5;
  border-radius: calc(var(--sw-skin-radius-surface) + 4px); border-end-start-radius: 6px;
  background: var(--sw-color-surface-raised); box-shadow: 0 0 0 1px var(--e-outline), var(--sw-skin-shadow-raised);
}
.e-msg[data-who="me"] .e-msg__bubble {
  background: var(--sw-color-accent-default); color: var(--sw-color-text-on-accent); box-shadow: var(--sw-skin-shadow-button);
  border-end-start-radius: calc(var(--sw-skin-radius-surface) + 4px); border-end-end-radius: 6px;
}
.e-msg--typing > .sw-avatar.e-av { margin-block-end: 0; }
.e-msg--typing .e-msg__bubble { display: flex; align-items: center; gap: 4px; padding: 13px 14px; }
.e-msg--typing .e-msg__bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--e-muted); opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-e-motion="still"]) .e-msg--typing .e-msg__bubble i { animation: e-typing 1.2s ease-in-out infinite; }
  :root:not([data-e-motion="still"]) .e-msg--typing .e-msg__bubble i:nth-child(2) { animation-delay: 0.15s; }
  :root:not([data-e-motion="still"]) .e-msg--typing .e-msg__bubble i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes e-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
.e-chat__input { display: flex; align-items: flex-end; gap: 8px; padding: 14px 24px 16px; border-block-start: 1px solid var(--e-line); background: var(--sw-color-surface-raised); }
.e-chat__input .sw-field { flex: 1; }

/* Finance */
.e-fin { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.e-fin__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.e-fin__top { display: flex; align-items: center; justify-content: space-between; }
.e-fin__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.e-fin__row .e-spark { width: 200px; height: 58px; flex: none; }
.e-fin__stat { display: block; margin: 0; }
.e-fin__stat .sw-stat__body { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.e-fin__stat .sw-stat__value { flex-basis: 100%; font-size: 40px; line-height: 1; letter-spacing: -0.035em; }
.e-fin__stat .sw-stat__trend { align-self: center; }
.e-fin__stat .sw-stat__description { font-size: 13px; color: var(--e-muted); }
.e-fin__balance { gap: 16px; }
.e-fin__balance > .e-row { gap: 8px; }

/* CRM */
.e-crm { display: flex; flex-direction: column; gap: 16px; }
.e-crm .e-app__bar .e-row { gap: 8px; }
.e-crm .e-app__bar .sw-field:not(.sw-select) { width: 220px; }
.e-crm__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.e-crm__col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--sw-skin-radius-surface); background: var(--e-quiet-track); }
.e-crm__colhead { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px 6px; font-size: 13px; font-weight: var(--sw-font-weight-semibold); }
.e-crm__coltitle { margin: 0; font-size: 13px; font-weight: var(--sw-font-weight-semibold); line-height: 1.5; letter-spacing: normal; }
.e-crm__colhead small { margin-inline-start: auto; font-size: 12px; font-weight: var(--sw-font-weight-medium); color: var(--e-muted); font-variant-numeric: tabular-nums; }
.e-crm__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sw-color-neutral-400); }
.e-crm__dot[data-step="1"] { background: var(--sw-color-status-info-solid); }
.e-crm__dot[data-step="2"] { background: var(--sw-color-status-warning-solid); }
.e-crm__dot[data-step="3"] { background: var(--sw-color-status-success-solid); }
.e-crm__card {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border-radius: var(--sw-skin-radius-control); background: var(--sw-color-surface-raised);
  box-shadow: 0 0 0 1px var(--e-outline), var(--sw-skin-shadow-raised);
  transition: translate 0.2s var(--sw-motion-easing-standard), box-shadow 0.2s;
}
.e-crm__card:is(:hover, :has(.e-crm__link[data-hovered])) { translate: 0 -1px; box-shadow: 0 0 0 1px var(--e-outline), 0 8px 18px -10px rgb(0 0 0 / 0.22); }
.e-crm__card:has(.e-crm__link[data-pressed]) { translate: 0 0; box-shadow: 0 0 0 1px var(--e-outline); }
.e-crm__card:has(.e-crm__link[data-focus-visible]) { outline: var(--sw-focus-width) solid var(--sw-color-border-focus); outline-offset: 2px; }
/* The outline above is the card's edge, as in V2; the Card's own border stays, see-through, for forced colours, and the padding gives its width back. */
.e-crm__card.sw-card { border-color: transparent; padding: calc(12px - var(--sw-skin-border-width)); }
/* The name is the card's link (sw-card__link); the card keeps the mockup's lift instead of the system's grey on hover. */
.e-crm__card.sw-card[data-linked]:has(a:hover) { background: var(--sw-color-surface-raised); }
.e-crm__link { color: inherit; text-decoration: none; }
.e-crm__link[data-hovered] { text-decoration: underline; text-underline-offset: 0.2em; }
.e-crm__link[data-pressed] { color: var(--sw-color-text-secondary); }
.e-crm__link::after { border-radius: inherit; }
.e-crm__link:focus-visible { outline: none; }
.e-crm__name { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: var(--sw-font-weight-medium); }
.e-crm__amt { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: var(--sw-font-weight-semibold); font-variant-numeric: tabular-nums; }
.e-crm__meta { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--e-muted); font-variant-numeric: tabular-nums; }
.e-crm__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.e-crm__meta .sw-icon { font-size: 13px; }
.e-crm__col > .sw-button { justify-content: flex-start; color: var(--e-muted); }

/* Components */
.e-comps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.e-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.e-comps__search { gap: 10px; }
.e-avatars { align-items: center; }
.e-avatars .sw-avatar { box-shadow: 0 0 0 2px var(--sw-color-surface-raised); }
.e-avatars.sw-avatar-group > * + * { margin-inline-start: -8px; }
.e-avatars [data-part="overflow"] {
  display: inline-grid; place-items: center; width: var(--sw-space-6); height: var(--sw-space-6); border-radius: 50%;
  background: var(--e-quiet-track); font-size: 13px; font-weight: var(--sw-font-weight-semibold); color: var(--sw-color-text-secondary);
}
.e-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Icons: search and groups work (entwurf.js); every icon moves on hover (icon-motion.css). */
.e-icons-scene { display: flex; flex-direction: column; gap: 16px; }
.e-icons-scene .e-app__bar .sw-field { width: 260px; }
.e-icons { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 8px; }
.e-icon {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 20px; cursor: default;
  border-radius: var(--sw-skin-radius-control); background: var(--sw-color-surface-raised); box-shadow: 0 0 0 1px var(--e-outline);
  transition: translate 0.2s var(--sw-motion-easing-standard), box-shadow 0.2s;
}
.e-icon:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--e-outline), 0 8px 18px -10px rgb(0 0 0 / 0.28); }
.e-icon[hidden] { display: none; }
.e-icons__none { margin: 8px 0 0; font-size: 14px; color: var(--e-muted); }

/* --- Sections, with Geist's quiet structure lines -------------------------- */

.e-section { position: relative; padding-block: var(--e-sec-pad); border-block-start: 1px solid var(--e-line); }
.e-section > .e-wrap { position: relative; }
.e-section:not(#templates) > .e-wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * var(--e-sec-pad)) -1px; border-inline: 1px solid var(--e-line);
}
.e-section > .e-wrap:first-child::after {
  content: ""; position: absolute; pointer-events: none; height: 11px;
  top: calc(-1 * var(--e-sec-pad) - 6px); inset-inline: -6px;
  background:
    linear-gradient(var(--e-plus) 0 0) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--e-plus) 0 0) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--e-plus) 0 0) 100% 5px / 11px 1px no-repeat,
    linear-gradient(var(--e-plus) 0 0) calc(100% - 5px) 0 / 1px 11px no-repeat;
}
.e-section__head { max-width: 700px; margin-bottom: 48px; }
.e-section__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.e-section__head--row > div:first-child { max-width: 700px; }
.e-kicker { margin: 0; font-family: var(--sw-font-family-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--e-muted); }
.e-h2 { margin: 14px 0 0; font-size: 46px; line-height: 1.06; letter-spacing: -0.038em; font-weight: var(--sw-font-weight-bold); text-wrap: balance; }
.e-lead--sm { margin: 16px 0 0; font-size: 17px; max-width: 600px; }

/*
 * Line grids (Geist) with LobeHub's spotlight: 1 px gaps show the line colour, and
 * near the pointer a soft light shines through them. Corner cells round off one
 * pixel inside the outer radius, so the line follows the curve.
 */
.e-lines, .e-wall {
  --R: 24px; --mx: -999px; --my: -999px;
  display: grid; gap: 1px; padding: 1px; border-radius: var(--R); overflow: hidden;
  background:
    radial-gradient(480px circle at var(--mx) var(--my), color-mix(in srgb, var(--sw-color-text-primary) 32%, transparent), transparent 45%),
    var(--e-grid);
}
.e-lines--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-lines--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-lines--3 > :nth-child(1), .e-lines--4 > :nth-child(1) { border-start-start-radius: calc(var(--R) - 1px); }
.e-lines--3 > :nth-child(3), .e-lines--4 > :nth-child(3) { border-start-end-radius: calc(var(--R) - 1px); }
.e-lines--3 > :nth-child(4), .e-lines--4 > :nth-child(4) { border-end-start-radius: calc(var(--R) - 1px); }
.e-lines--3 > :nth-child(6), .e-lines--4 > :nth-child(7) { border-end-end-radius: calc(var(--R) - 1px); }
:is(.e-why, .e-base, .e-tile)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--tx, -999px) var(--ty, -999px), color-mix(in srgb, var(--sw-color-text-primary) 4%, transparent), transparent 45%);
}

/* Advantages */
.e-why { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 22px; background: var(--sw-color-surface-raised); }
.e-why__visual {
  position: relative; overflow: hidden; height: 176px; box-sizing: border-box; margin-bottom: 14px; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: var(--sw-color-surface-page);
}
.e-why__title { margin: 0; font-size: 18px; font-weight: var(--sw-font-weight-semibold); letter-spacing: -0.015em; }
.e-why__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--e-muted); }
.e-more { margin-top: auto; padding-top: 10px; font-size: 13px; }
.e-more summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--e-muted); font-weight: var(--sw-font-weight-medium); border-radius: var(--sw-radius-sm); }
.e-more summary::-webkit-details-marker { display: none; }
.e-more summary::before { content: "+"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--e-quiet-track); font-size: 12px; line-height: 1; }
.e-more[open] summary::before { content: "–"; }
.e-more summary:hover { color: var(--sw-color-text-primary); }
.e-more p { margin: 8px 0 0; line-height: 1.55; color: var(--e-muted); }
.e-aa { display: flex; align-items: center; gap: 26px; }
.e-aa__big { font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -0.06em; }
.e-aa ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.e-aa li { display: flex; align-items: center; gap: 8px; }
.e-aa .sw-icon, .e-ai .sw-icon { color: var(--sw-color-status-success-text); }
.e-matrix { display: grid; grid-template-columns: repeat(6, 26px); gap: 9px; }
.e-matrix__dot {
  width: 26px; height: 26px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--sw-skin-radius-control); background: var(--sw-color-accent-default);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
  transition: transform 0.15s var(--sw-motion-easing-standard);
}
.e-matrix__dot:hover { transform: scale(1.14); }
.e-matrix__dot[aria-pressed="true"] { outline: 2px solid color-mix(in srgb, var(--sw-color-text-primary) 70%, transparent); outline-offset: 2px; }
.e-why__visual .sw-field { width: 100%; text-align: start; }
.e-minis { position: absolute; inset: 0; }
.e-mini {
  position: absolute; width: 220px; padding: 14px; box-sizing: border-box; text-align: start;
  border: 1px solid var(--e-outline); border-radius: 14px; background: var(--sw-color-surface-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 10px 24px -14px rgb(0 0 0 / 0.25);
}
.e-mini:first-child { inset-inline-start: 22px; top: 22px; z-index: 1; }
.e-mini--back { inset-inline-end: 18px; top: 52px; rotate: 4deg; }
.e-speed { display: grid; justify-items: center; text-align: center; gap: 4px; }
.e-speed__num { font-size: 68px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.e-speed__unit { font-size: 15px; font-weight: var(--sw-font-weight-semibold); color: var(--e-muted); margin-top: -2px; }
.e-speed__note { max-width: 240px; font-size: 12px; color: var(--e-muted); }
.e-ai { width: 100%; display: flex; flex-direction: column; gap: 10px; font-size: 13px; text-align: start; }
.e-ai p { margin: 0; }
.e-ai__q { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--sw-color-accent-default); color: var(--sw-color-text-on-accent); }
.e-ai__a { align-self: flex-start; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--sw-color-surface-raised); border: 1px solid var(--e-outline); line-height: 1.75; }
.e-ai__a .sw-icon { vertical-align: -2px; margin-inline-end: 4px; }

/*
 * Templates and components: an endless band that drifts on its own, can be dragged
 * and flung, and keeps gliding after release (entwurf.js). It pauses under the
 * pointer and has a pause button (WCAG 2.2.2); with reduced motion it starts paused.
 */
.e-slider__nav { display: flex; gap: 8px; flex: none; }

.e-slider {
  overflow: hidden; padding-block: 4px 8px; cursor: grab; touch-action: pan-y;
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.e-slider[data-dragging] { cursor: grabbing; user-select: none; }
.e-slider[data-dragging] * { pointer-events: none; }
/* Avoid promoting all three sets to one very wide texture, particularly at high
   device pixel ratios and when the masked band returns into view. */
.e-slider__track { display: flex; gap: 20px; width: max-content; }
/* The band is laid out left to right in every direction: its endless loop measures from the left (entwurf.js). The slides keep the page direction. */
[dir="rtl"] .e-slider { direction: ltr; }
[dir="rtl"] .e-slide { direction: rtl; }
.e-slider:focus-visible { outline-offset: -2px; }
.e-slide { width: 380px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.e-slide__stage {
  position: relative; height: 470px; box-sizing: border-box; padding: 24px; overflow: hidden;
  border: 1px solid var(--e-outline); border-radius: 22px; background: var(--sw-color-surface-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
  mask-image: linear-gradient(#000 calc(100% - 36px), transparent);
}
.e-slide__intro { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.e-slide__title { margin: 0; font-size: 17px; line-height: 1.5; }
.e-slide__intro .sw-text { margin: 0; font-size: 13px; color: var(--e-muted); }
.e-slide__cap { padding-inline: 4px; }
.e-slide__kind { font-family: var(--sw-font-family-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--e-muted); }
.e-slide__cap h3 { margin: 4px 0 2px; font-size: 17px; font-weight: var(--sw-font-weight-semibold); letter-spacing: -0.01em; }
.e-slide__cap p { margin: 0; font-size: 14px; color: var(--e-muted); }

/* Variant wall */
.e-wall { display: flex; flex-direction: column; --R: 22px; }
.e-wall__row { display: grid; grid-template-columns: 104px repeat(var(--n, 5), minmax(0, 1fr)); gap: 1px; }
.e-wall__row:first-child > :first-child { border-start-start-radius: calc(var(--R) - 1px); }
.e-wall__row:first-child > :last-child { border-start-end-radius: calc(var(--R) - 1px); }
.e-wall__row:last-child > :first-child { border-end-start-radius: calc(var(--R) - 1px); }
.e-wall__row:last-child > :last-child { border-end-end-radius: calc(var(--R) - 1px); }
.e-wall__label {
  padding: 22px 18px; background: var(--sw-color-surface-raised);
  font-family: var(--sw-font-family-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--e-muted);
}
.e-tile { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 16px; background: var(--sw-color-surface-raised); color: var(--sw-color-text-primary); }
.e-tile__preview {
  flex: 1; min-height: 128px; box-sizing: border-box; padding: 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  border: 1px solid var(--e-outline); border-radius: 14px; background: var(--sw-color-surface-page);
}
.e-tile__ramp { display: flex; height: 34px; border-radius: 9px; overflow: hidden; }
.e-tile__ramp i { flex: 1; }
.e-tile__demo { display: flex; align-items: center; gap: 8px; }
.e-tile__preview .sw-field__label { font-size: 12px; }
.e-tile__hit { all: unset; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.e-tile__hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.e-tile__hit:focus-visible::after { outline: 2px solid var(--sw-color-border-focus); outline-offset: -5px; border-radius: 16px; }
.e-tile__name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: var(--sw-font-weight-semibold); }
.e-tile__note { font-size: 13px; color: var(--e-muted); }
/* The chosen tile: a rounded ring inside the cell in the text colour (owner: as in V1), and a tick. */
.e-tile::after {
  content: ""; position: absolute; inset: 6px; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--sw-color-text-primary);
  opacity: 0; transform: scale(0.985);
  transition: opacity 0.2s, transform 0.2s var(--sw-motion-easing-standard);
}
.e-tile[data-active]::after { opacity: 1; transform: none; }
.e-tile__check {
  position: absolute; bottom: 37px; inset-inline-end: 16px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--sw-color-text-primary); color: var(--sw-color-surface-raised);
  font-size: 13px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s var(--sw-motion-easing-standard);
}
.e-tile[data-active] .e-tile__check { opacity: 1; transform: none; }
.e-tile__check .sw-icon { stroke-width: 3; }
em[data-level], .e-tile__name em, .e-skinbtn em {
  font-style: normal; font-size: 11px; font-weight: var(--sw-font-weight-medium); white-space: nowrap;
  padding: 1px 7px; border-radius: var(--sw-radius-full); background: var(--e-quiet-track); color: var(--e-muted);
}
em[data-level="AAA"] { color: var(--sw-color-status-success-text); }

/* Builder: preview on the left, the configurator's slot on the right edge. */
.e-section--build { border-block-start: 1px solid var(--e-line); }
.e-build {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; align-items: stretch;
  padding-inline: max(32px, calc((var(--e-vw) - var(--e-gutter) - var(--e-max)) / 2)) 16px;
  transition: padding 0.3s var(--sw-motion-easing-standard);
}
.e-build__stage { min-width: 0; }
.e-build__preview {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; padding: 24px;
  border: 1px solid var(--e-outline); border-radius: 26px; background: var(--sw-color-surface-raised);
}
.e-build__preview > .sw-card, .e-build__side > .sw-card { background: var(--sw-color-surface-page); }
.e-build__side { display: flex; flex-direction: column; gap: 16px; }
.e-build__form .sw-inline { flex-wrap: nowrap; }
.e-build__form .sw-inline > .sw-field { flex: 1; min-width: 0; }
.e-build__slot { position: relative; min-height: 100%; }

/* Configurator panel */
.e-config {
  width: 320px; box-sizing: border-box; display: flex; flex-direction: column;
  max-height: calc(100vh - var(--e-float-top) - 16px);
  border: 1px solid var(--e-outline); border-radius: 20px; background: var(--sw-color-surface-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 44px -22px rgb(0 0 0 / 0.22);
}
.e-config[data-mode="dock"] { position: sticky; top: var(--e-float-top); }
.e-config[data-mode="float"], .e-config[data-mode="hidden"] { position: fixed; top: var(--e-float-top); inset-inline-end: 16px; z-index: calc(var(--sw-z-sticky) - 1); }
.e-config[data-mode="hidden"] { visibility: hidden; opacity: 0; transform: translateX(16px); pointer-events: none; }
.e-config[data-anim] { animation: e-float-in 0.3s var(--sw-motion-easing-decelerate); }
@keyframes e-float-in { from { opacity: 0; transform: translateX(16px); } }
.e-config[data-mode="dock"] [data-config-close] { visibility: hidden; }
.e-config__head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 12px 18px; border-block-end: 1px solid var(--e-line); }
.e-config__head strong { margin-inline-end: auto; font-size: 15px; }
.e-config__body { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 18px; padding: 16px 18px; }
.e-config__foot { padding: 12px 18px 16px; border-block-start: 1px solid var(--e-line); }
.e-opt { display: flex; flex-direction: column; gap: 8px; }
.e-opt__label { font-size: 12px; font-weight: var(--sw-font-weight-semibold); color: var(--e-muted); }
.e-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.e-swatch {
  all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 2px 6px; border-radius: 12px; color: var(--sw-color-text-primary);
}
.e-swatch:hover, .e-swatch[aria-pressed="true"] { background: var(--e-quiet-track); }
.e-swatch:focus-visible { outline: 2px solid var(--sw-color-border-focus); }
.e-swatch i {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-color-brand-300), var(--sw-color-accent-default) 70%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.e-swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--sw-color-surface-raised), 0 0 0 4px color-mix(in srgb, var(--sw-color-text-primary) 55%, transparent); }
.e-swatch span { font-size: 11px; }
.e-skinlist { display: flex; flex-direction: column; gap: 2px; }
.e-skinbtn {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 7px 10px; border-radius: 10px;
}
.e-skinbtn span { font-size: 14px; font-weight: var(--sw-font-weight-medium); }
.e-skinbtn small { grid-row: 2; font-size: 12px; color: var(--e-muted); }
.e-skinbtn em { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.e-skinbtn:hover { background: var(--e-quiet-track); }
.e-skinbtn[aria-pressed="true"] { background: var(--e-quiet-track); box-shadow: inset 0 0 0 1px var(--e-quiet-line); }
.e-skinbtn[aria-pressed="true"] span { font-weight: var(--sw-font-weight-semibold); }
.e-skinbtn:focus-visible { outline: 2px solid var(--sw-color-border-focus); }
.e-rp { width: 13px; height: 13px; box-sizing: border-box; border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor; translate: 2px 2px; }
.e-ip { display: grid; font-size: 16px; }
.e-ip--hair .sw-icon { stroke-width: 1; }
.e-ip--thin .sw-icon { stroke-width: 1.5; }
.e-ip:not([class*="--"]) .sw-icon { stroke-width: 2; }
.e-ip--bold .sw-icon { stroke-width: 2.5; }
.e-ip--heavy .sw-icon { stroke-width: 3; }
.e-ip--duo .sw-icon { stroke-width: 2; }
.e-ip--fill .sw-icon { stroke-width: 2; }
/* The fill of the two previews comes from entwurf.js, with the icon styles. */

/* Foundations */
.e-base { position: relative; display: flex; flex-direction: column; min-height: 236px; padding: 24px; box-sizing: border-box; background: var(--sw-color-surface-raised); }
.e-base--wide { grid-column: span 2; }
.e-base__title { margin: 0; font-size: 16px; font-weight: var(--sw-font-weight-semibold); }
.e-base__sub { margin: 4px 0 16px; font-size: 13px; color: var(--e-muted); }
.e-base__foot { margin: 8px 0 0; font-size: 13px; color: var(--e-muted); }
.e-ramp { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.e-ramp i { height: 46px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); }
.e-big { margin-top: auto; font-size: 46px; line-height: 1; font-weight: var(--sw-font-weight-bold); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.e-type {
  margin-top: auto; font-size: 124px; line-height: 0.85; font-weight: var(--sw-font-weight-semibold); letter-spacing: -0.06em;
  background: linear-gradient(180deg, var(--sw-color-text-primary), color-mix(in srgb, var(--sw-color-text-primary) 30%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.e-ladder { margin-top: auto; display: flex; align-items: flex-end; gap: 6px; }
.e-shapes { margin-top: auto; display: flex; align-items: flex-end; gap: 12px; }
.e-shape { display: block; width: 56px; height: 56px; background: var(--sw-color-surface-raised); border: 1px solid var(--sw-color-border-default); box-shadow: var(--sw-skin-shadow-raised); }
.e-shape--control { border-radius: var(--sw-skin-radius-control); }
.e-shape--surface { width: 76px; height: 76px; border-radius: var(--sw-skin-radius-surface); }
.e-shape--pill { width: 84px; height: 38px; border: 0; border-radius: var(--sw-skin-radius-pill); background: var(--sw-color-accent-default); box-shadow: var(--sw-skin-shadow-button); }
.e-minicons { margin-top: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 10px; font-size: 21px; }
.e-share { margin-top: auto; }
.e-share code {
  display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--e-outline);
  background: var(--sw-color-surface-page); color: var(--e-muted);
  font-family: var(--sw-font-family-mono); font-size: 12px; line-height: 1.5; word-break: break-all;
}

/* Closing band and footer */
.e-close { padding-block: 104px; text-align: center; }
.e-close__in { display: flex; flex-direction: column; align-items: center; }
.e-close .e-lead--sm { margin-inline: auto; }
.e-foot { padding-block: 32px 48px; border-block-start: 1px solid var(--e-line); font-size: 13px; color: var(--e-muted); }
.e-foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.e-foot__legal { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
a.e-foot__legal { color: inherit; }
/* The portfolio's legal texts in our Dialog: long, so the modal scrolls; long addresses
   break. Their headings stay below the dialog's title, which is xl. */
.e-legal__text { overflow-wrap: break-word; }
.e-legal__text h3 { font-size: var(--sw-font-size-lg); }
.e-legal__text h4 { font-size: var(--sw-font-size-md); }

/* Logo gallery (index.html#logos) */
.e-gallery { position: fixed; inset: 0; z-index: var(--sw-z-modal); overflow: auto; background: var(--sw-color-surface-page); padding: 32px 56px 56px; }
.e-gallery__head { position: sticky; z-index: 1; top: -32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 0 24px; background: var(--sw-color-surface-page); }
.e-gallery__head .e-qseg button, .e-gallery__head strong { white-space: nowrap; }
.e-gallery__head strong { font-size: 22px; letter-spacing: -0.02em; }
.e-gallery__head span { margin-inline-end: auto; color: var(--e-muted); font-size: 14px; }
.e-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.e-gallery__item {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 18px;
  padding: 26px 22px 16px; border-radius: 18px; background: var(--sw-color-surface-raised); overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.e-gallery__item:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgb(0 0 0 / 0.25); }
.e-gallery__item:focus-visible { outline: 2px solid var(--sw-color-border-focus); outline-offset: 2px; }
.e-gallery__item .e-logo { transform: scale(1.5); transform-origin: left center; pointer-events: none; }
.e-gallery__item small { font-family: var(--sw-font-family-mono); font-size: 12px; color: var(--e-muted); }

/*
 * Klar (from Pur): the mockup without any inner outline. A transparent border still
 * left a 1 px seam where the app's grey showed between the white frame and a white
 * sidebar. So no border at all: the app fills the frame below the three dots.
 */
[data-sw-skin="base"] .e-frame__app { border: 0; }

/* Headings follow the type preset: font, size ratio to the body text, tracking. */
:is(.e-h1, .e-h2, .e-app__title, .e-card__title, .e-why__title, .e-base__title, .e-slide__cap h3, .e-big, .e-speed__num, .e-aa__big, .e-type) {
  font-family: var(--e-font-head, inherit);
}
.e-h1 { font-size: calc(84px * var(--e-head-scale, 1)); letter-spacing: var(--e-head-track, -0.052em); font-weight: var(--e-head-weight, 700); }
.e-h2 { font-size: calc(46px * var(--e-head-scale, 1)); letter-spacing: var(--e-head-track, -0.038em); font-weight: var(--e-head-weight, 700); }
.e-fp { font-size: 15px; font-weight: 600; line-height: 1; }
.e-fp[data-e-fp="system"] { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.e-fp[data-e-fp="editorial"] { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.e-fp[data-e-fp="tech"] { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.e-fp[data-e-fp="legible"] { font-family: "Atkinson Hyperlegible Next", Verdana, sans-serif; }

/*
 * The variant picker as a select box (owner, 2026-10-20): same quiet pill as before,
 * the left arrow gone, the right one turned to point down - and up while the menu
 * is open. The menu is a native popover, so outside clicks and Esc close it.
 */
.e-picker { padding: 3px; }
.e-picker__btn { anchor-name: --e-picker; min-width: 172px; padding: 0 8px 0 12px; }
.e-picker__chev { display: grid; margin-inline-start: auto; color: var(--e-quiet-text); transform: rotate(90deg); transition: transform 0.25s var(--sw-motion-easing-standard); }
.e-picker__btn[aria-expanded="true"] .e-picker__chev { transform: rotate(-90deg); }
.e-menu {
  position-anchor: --e-picker; inset: auto; top: anchor(bottom); right: anchor(right);
  margin: 8px 0 0; width: 300px; max-height: calc(100vh - 96px); overflow: auto; padding: 8px;
  border: 0; border-radius: 16px; background: var(--sw-color-surface-overlay); color: var(--sw-color-text-primary);
  box-shadow: 0 0 0 1px var(--e-outline), 0 18px 40px -16px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.1);
}
.e-menu:popover-open { animation: e-menu-in 0.18s var(--sw-motion-easing-decelerate); }
@keyframes e-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.e-menu__title { margin: 8px 10px 4px; font-size: 11px; font-weight: var(--sw-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--e-muted); }
.e-menu__title:first-child { margin-top: 4px; }
.e-menu__item {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 22px 1fr 16px; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 7px 10px; border-radius: 10px;
}
.e-menu__item:hover, .e-menu__item:focus-visible { background: var(--e-quiet-track); }
.e-menu__item:focus-visible { outline: 2px solid var(--sw-color-border-focus); outline-offset: -2px; }
.e-menu__item > :first-child { grid-row: 1 / 3; }
.e-menu__name { font-size: 14px; font-weight: var(--sw-font-weight-medium); }
.e-menu__item small { grid-column: 2; font-size: 12px; color: var(--e-muted); }
.e-menu__item > .sw-icon { grid-column: 3; grid-row: 1 / 3; opacity: 0; color: var(--sw-color-text-primary); }
.e-menu__item[aria-checked="true"] > .sw-icon { opacity: 1; }
.e-menu__item[aria-checked="true"] .e-menu__name { font-weight: var(--sw-font-weight-semibold); }
.e-menu__dot i { display: block; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--sw-color-brand-300), var(--sw-color-accent-default) 70%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.e-menu__dot { all: unset; display: grid; place-items: center; }

/* The section links sit in the middle between the logo and the select box. */
.e-nav__links { margin-inline: auto; }
.e-nav__tools { margin-inline-start: 0; }

/* The dice sits inside the select box's grey track, right of the choice. */
.e-picker__dice {
  display: grid; place-items: center; width: 30px; height: 30px; margin-inline-start: 2px; padding: 0;
  border: 0; border-radius: var(--sw-radius-full); background: transparent; color: var(--e-quiet-text); cursor: pointer;
}
.e-picker__dice:hover { color: var(--sw-color-text-primary); background: var(--e-quiet-on); }
/* The same arrows as "Überrasch mich" in the configurator; a click turns them once. */
.e-picker__dice .sw-icon { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.e-picker__dice:active .sw-icon { transform: rotate(180deg); transition-duration: 0.12s; }

/* Language switch: two quiet links, the current one raised. */
.e-qseg--lang a {
  display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 34px; padding: 0 8px;
  border-radius: var(--sw-radius-full); color: var(--e-quiet-text); text-decoration: none;
  font-size: 12px; font-weight: var(--sw-font-weight-semibold); letter-spacing: 0.04em;
}
.e-qseg--lang a:hover { color: var(--sw-color-text-primary); }
.e-qseg--lang a[aria-current="true"] { background: var(--e-quiet-on); color: var(--sw-color-text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03); }

/*
 * The configurator in the opposite scheme of the page (owner): dark on a light page,
 * light on a dark one - it is the page's central tool and should stand apart.
 * entwurf.js sets brand and scheme on the panel; the page's own variables are
 * declared again here so they resolve in the panel's scheme.
 */
.e-config {
  --e-line: var(--sw-color-border-subtle);
  --e-outline: var(--sw-color-border-subtle);
  background: var(--sw-color-surface-raised); color: var(--sw-color-text-primary);
}
[data-sw-color-scheme="light"] { --e-muted: var(--sw-color-neutral-600); }
.e-config[data-sw-color-scheme="dark"] { box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 24px 48px -20px rgb(0 0 0 / 0.5); }
.e-opt__label { display: flex; align-items: center; gap: 7px; }
.e-opt__label .sw-icon { font-size: 14px; opacity: 0.8; }
.e-morebtn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px;
  border: 0; border-radius: var(--sw-radius-lg); background: var(--e-quiet-track); color: var(--sw-color-text-primary);
  font: inherit; font-size: 13px; font-weight: var(--sw-font-weight-medium); cursor: pointer;
}
.e-morebtn:hover { background: var(--e-quiet-on); box-shadow: 0 0 0 1px var(--e-line); }
.e-morebtn .sw-icon { transition: transform 0.25s var(--sw-motion-easing-standard); }
.e-morebtn[aria-expanded="true"] .sw-icon { transform: rotate(180deg); }
.e-morebtn .e-when-open, .e-morebtn[aria-expanded="true"] .e-when-closed { display: none; }
.e-morebtn[aria-expanded="true"] .e-when-open { display: inline; }
.e-config__more { display: flex; flex-direction: column; gap: 18px; }
.e-config__more[hidden] { display: none; }

/*
 * Logo style "Licht" (after the MIT Media Lab): three beams over the whole mark,
 * each a polygon of five points. clip-path interpolates point by point, so one mark
 * melts into the next. Style "Raster" keeps the four cells.
 */
.e-logo__mark { position: relative; }
.e-logo__mark > b {
  position: absolute; inset: 0; background: var(--sw-color-accent-default);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.e-logo__mark[data-style="light"] > i, .e-logo__mark:not([data-style="light"]) > b { display: none; }
.e-logo__mark > i { transition-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) { .e-logo__mark > :is(b, i) { transition: none; } }

/*
 * Fourth round. The current brand and skin are always visible, in the select menu
 * and in the configurator: a fill lighter than hover, a check and a heavier name.
 * The fills mix the text colour of the element itself, so they hold on the inverted
 * configurator and in every scheme.
 */
.e-menu__item, .e-swatch, .e-skinbtn {
  --e-hover-fill: color-mix(in srgb, var(--sw-color-text-primary) 9%, transparent);
  --e-sel-fill: color-mix(in srgb, var(--sw-color-text-primary) 5%, transparent);
}
.e-menu__item[aria-checked="true"], .e-swatch[aria-pressed="true"], .e-skinbtn[aria-pressed="true"] { background: var(--e-sel-fill); box-shadow: none; }
.e-menu__item:hover, .e-menu__item:focus-visible, .e-swatch:hover, .e-skinbtn:hover { background: var(--e-hover-fill); }
.e-skinbtn { grid-template-columns: 1fr auto 16px; }
.e-skinbtn > .sw-icon { grid-row: 1 / 3; grid-column: 3; align-self: center; opacity: 0; }
.e-skinbtn[aria-pressed="true"] > .sw-icon { opacity: 1; }

/* Reset at the end of the select menu. */
.e-menu__sep { height: 1px; margin: 6px 10px; background: var(--e-line); }
.e-menu__item--reset > .sw-icon { grid-column: 1; justify-self: center; opacity: 1; color: var(--e-quiet-text); }

/* Language, as on heroui.com: an icon button and a small menu with a check. */
.e-langbtn { anchor-name: --e-lang; }
.e-menu--lang { position-anchor: --e-lang; left: auto; right: anchor(right); width: 200px; }
.e-menu--lang .e-menu__item { grid-template-columns: 1fr 16px; color: inherit; text-decoration: none; }
.e-menu--lang .e-menu__item > .sw-icon { grid-column: 2; grid-row: 1; }

/* Klar (from Pur): no line between the sidebar or a list and the content; the sidebar takes the page tone instead. */
[data-sw-skin="base"] :is(.e-dash__side, .e-app__side, .e-mail__list) { border-inline-end-color: transparent; }
[data-sw-skin="base"] :is(.e-dash__side, .e-app__side) { --e-side-bg: var(--sw-color-surface-page); }

/*
 * Fifth round (owner, 2026-10-20): patterns, a calmer aurora, a glow on the headline
 * and an effect under the pointer.
 *
 * Patterns: muster.css gives each one a mask (--e-pat), a tile size and an ink
 * factor. The layer is the line colour shown through that mask, then faded by the
 * same radial mask as before. Two nested masks multiply, so no mask-composite.
 */
/* The hero draws in the same ink as the gallery, at two thirds of its strength. */
.e-grid { --e-line: color-mix(in srgb, var(--sw-color-text-primary) 15%, transparent); background-image: none; opacity: calc(0.6 * var(--e-pat-ink, 1)); }
.e-grid::before, .e-pat__bg::before {
  content: ""; position: absolute; inset: 0; background: var(--e-line);
  -webkit-mask: var(--e-pat) center top / var(--e-pat-size) var(--e-pat-repeat, repeat);
  mask: var(--e-pat) center top / var(--e-pat-size) var(--e-pat-repeat, repeat);
}

/*
 * Aurora after ant.design: three saturated discs at 10 to 20 % opacity that drift
 * and breathe over five seconds. Radial gradients instead of blur(100px), so nothing
 * is filtered while scrolling. The layer fades out over its top 180 px: at rest no
 * light reaches the header, so the header never cuts it off.
 */
.e-aurora { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 180px); mask-image: linear-gradient(to bottom, transparent, #000 180px); }
.e-aurora .e-blob {
  inset: auto; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 50%, transparent) 38%, transparent 100%);
  opacity: calc(var(--o, 0.15) * var(--e-aur-k));
  translate: var(--tx, 0) var(--ty, 0); scale: var(--s, 1);
  transition: translate 5s ease-in-out, scale 5s ease-in-out, opacity 5s ease-in-out;
}
.e-aurora .e-blob--1 { left: 6%; top: 16%; --c: var(--e-aur-1); }
.e-aurora .e-blob--2 { left: 96%; top: 40%; --c: var(--e-aur-2); }
.e-aurora .e-blob--3 { left: 24%; top: 90%; --c: var(--e-aur-3); }
:root {
  --e-aur-k: 1;
  --e-aur-1: color-mix(in oklch, var(--sw-color-accent-default) 45%, #ee35f1);
  --e-aur-2: color-mix(in oklch, var(--sw-color-accent-default) 45%, #00d6ff);
  --e-aur-3: color-mix(in oklch, var(--sw-color-accent-default) 55%, #5939dc);
}
[data-sw-brand="graphite"] { --e-aur-1: #ee35f1; --e-aur-2: #00d6ff; --e-aur-3: #5939dc; }
/*
 * Creme takes a set of its own as well (B-109): mixed with its brown accent, magenta and
 * violet go the short way round the hue circle, through red. Gold, blue and light gold
 * are the colours of the website the brand comes from.
 */
[data-sw-brand="demo-two"] { --e-aur-1: #E9CB55; --e-aur-2: #77A8BE; --e-aur-3: #F6DD7A; }
/*
 * The four mixes stay to choose in the configurator, "Aurora" (owner, 2026-10-22, picture
 * 160). Website, the default, is the rule above. Sand takes sand instead of light gold for
 * Creme. OKLab mixes every brand but Graphit in OKLab instead of OKLCH. Original is the
 * mix from before B-109, without Creme's own set.
 */
:root[data-e-aurora="sand"][data-sw-brand="demo-two"] { --e-aur-3: #b28e61; }
:root[data-e-aurora="oklab"]:not([data-sw-brand="graphite"]) {
  --e-aur-1: color-mix(in oklab, var(--sw-color-accent-default) 45%, #ee35f1);
  --e-aur-2: color-mix(in oklab, var(--sw-color-accent-default) 45%, #00d6ff);
  --e-aur-3: color-mix(in oklab, var(--sw-color-accent-default) 55%, #5939dc);
}
:root[data-e-aurora="original"]:not([data-sw-brand="graphite"]) {
  --e-aur-1: color-mix(in oklch, var(--sw-color-accent-default) 45%, #ee35f1);
  --e-aur-2: color-mix(in oklch, var(--sw-color-accent-default) 45%, #00d6ff);
  --e-aur-3: color-mix(in oklch, var(--sw-color-accent-default) 55%, #5939dc);
}
[data-sw-color-scheme="dark"] { --e-aur-k: 1.35; }
@media (prefers-color-scheme: dark) { [data-sw-color-scheme="system"] { --e-aur-k: 1.35; } }
@media (prefers-reduced-motion: reduce) { .e-aurora .e-blob { transition: none; } }

/*
 * Glow: whenever the logo changes, a band in the colours of the aurora runs once
 * over the headline, left to right, in the 1.5 s the logo needs to melt. No white
 * on the light page, since white over black reads as a grey film (owner); dark
 * pages get a white core. A copy of the text (data-text, read by no screen
 * reader) lies on top, and only the band shows through it. Never with "Bewegung:
 * Aus" or reduced motion.
 */
.e-h1 {
  position: relative;
  --e-glow-core: color-mix(in oklab, var(--e-aur-1) 50%, var(--e-aur-2));
  --e-glow-halo: color-mix(in srgb, var(--e-aur-1) 42%, transparent);
  --e-glow-halo-2: color-mix(in srgb, var(--e-aur-2) 30%, transparent);
}
[data-sw-color-scheme="dark"] .e-h1 { --e-glow-core: #fff; }
@media (prefers-color-scheme: dark) { [data-sw-color-scheme="system"] .e-h1 { --e-glow-core: #fff; } }
.e-h1__b {
  background: linear-gradient(180deg, var(--sw-color-text-primary) 5%, color-mix(in srgb, var(--sw-color-text-primary) 42%, transparent) 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.e-h1::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute; inset: 0; white-space: pre-line; pointer-events: none;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg,
    transparent 40%,
    color-mix(in oklab, var(--e-aur-3) 75%, transparent) 44.5%,
    var(--e-aur-1) 48.5%,
    var(--e-glow-core) 50%,
    var(--e-aur-2) 51.5%,
    color-mix(in oklab, var(--e-aur-2) 75%, transparent) 55.5%,
    transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 5px var(--e-glow-halo)) drop-shadow(0 0 14px var(--e-glow-halo-2));
  visibility: hidden;
}
.e-h1[data-glow]::after { visibility: visible; animation: e-glow 1.5s cubic-bezier(0.45, 0, 0.25, 1) both; }
@keyframes e-glow { from { background-position: 100% 0; } to { background-position: 0% 0; } }
:root[data-e-motion="still"] .e-h1::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) { .e-h1::after { animation: none; display: none; } }

/* The word mark changes with the mark: it fades out soft and comes back in its next cut (entwurf.js). */
.e-logo__mark > b { transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 1.4s cubic-bezier(0.65, 0, 0.35, 1); }

/* The aurora behind the mockup steps back a notch; the two at the top stay (owner). */
.e-aurora .e-blob--3 { opacity: calc(var(--o, 0.15) * var(--e-aur-k) * 0.6); }

.e-hero__in { position: relative; }

/* Scramble: while a word shuffles, its box keeps its width. */
.e-w[data-busy] { display: inline-block; text-align: start; white-space: nowrap; }

/* Configurator: the background row opens the pattern gallery. */
.e-patbtn {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 12px; border-radius: 12px; background: var(--e-quiet-track); font-size: 13px;
}
.e-patbtn [data-out="pattern"] { font-weight: var(--sw-font-weight-semibold); }
.e-patbtn__all { margin-inline-start: auto; color: var(--e-muted); }
.e-patbtn:hover .e-patbtn__all { color: var(--sw-color-text-primary); }
.e-patbtn:focus-visible { outline: 2px solid var(--sw-color-border-focus); }

/* The pattern gallery: every tile is a small hero on the page grey. */
.e-gallery__grid--pat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; }
.e-pat { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.e-pat__stage {
  position: relative; height: 230px; border-radius: 18px; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  background: var(--sw-color-surface-page); box-shadow: inset 0 0 0 1px var(--e-outline);
  transition: box-shadow 0.2s, transform 0.2s;
}
.e-pat__stage::before, .e-pat__stage::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; z-index: -2; opacity: calc(0.17 * var(--e-aur-k)); }
.e-pat__stage::before { left: -170px; top: -40px; background: radial-gradient(closest-side, var(--e-aur-1), transparent); }
.e-pat__stage::after { right: -180px; bottom: -170px; background: radial-gradient(closest-side, var(--e-aur-2), transparent); }
/* In the tiles the pattern is darker than in the hero and fades later, so ten of them can be compared. */
.e-pat__bg { --e-line: color-mix(in srgb, var(--sw-color-text-primary) 15%, transparent); position: absolute; inset: 0; z-index: -1; opacity: min(1, calc(0.9 * var(--e-pat-ink, 1))); -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 28%, #000 25%, transparent 88%); mask-image: radial-gradient(ellipse 85% 80% at 50% 28%, #000 25%, transparent 88%); }
.e-pat__h { font-size: 30px; line-height: 1; letter-spacing: -0.045em; font-weight: var(--sw-font-weight-bold); }
.e-pat:hover .e-pat__stage { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--e-outline), 0 14px 30px -18px rgb(0 0 0 / 0.3); }
.e-pat[aria-pressed="true"] .e-pat__stage { box-shadow: 0 0 0 2px var(--sw-color-surface-page), 0 0 0 4px color-mix(in srgb, var(--sw-color-text-primary) 55%, transparent); }
.e-pat:focus-visible .e-pat__stage { outline: 2px solid var(--sw-color-border-focus); outline-offset: 4px; }
.e-pat__name { font-size: 14px; font-weight: var(--sw-font-weight-semibold); padding-inline: 4px; }
.e-pat__name small { display: block; margin-top: 2px; font-size: 12px; font-weight: var(--sw-font-weight-regular); color: var(--e-muted); }

/*
 * Skin symbols in the select menu (owner: the pills told the skins too little
 * apart). Each is a tiny skeleton - card, avatar, two lines of text, a button -
 * drawn the way its skin draws:
 *   Klar   outlined card, square button      Pur    grey card, no outline at all
 *   Lumen  card on a soft shadow             Soft   shadows on every part, raised button
 *   Rund   round card, pill button           Fein   hairline, thin lines, small corners
 */
.e-menu__item { grid-template-columns: 30px 1fr 16px; }
.e-sk {
  --ink: var(--sw-color-text-primary); --line: 2px; --r: 4px; --btn-r: 1.5px;
  --bg: var(--sw-color-surface-raised); --bd: transparent; --sh: 0 0 #0000; --btn-bg: var(--ink); --btn-sh: none;
  position: relative; display: block; width: 30px; height: 22px; box-sizing: border-box;
  border-radius: var(--r); background: var(--bg); box-shadow: inset 0 0 0 1px var(--bd), var(--sh);
}
.e-sk > i { position: absolute; display: block; background: var(--ink); }
.e-sk__av { left: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; opacity: 0.5; }
.e-sk__l1 { left: 12px; top: 5px; width: 13px; height: var(--line); border-radius: 1px; opacity: 0.42; }
.e-sk__l2 { left: 12px; top: calc(6px + var(--line) * 2); width: 8px; height: var(--line); border-radius: 1px; opacity: 0.26; }
.e-sk__btn { right: 4px; bottom: 4px; width: 11px; height: 5px; border-radius: var(--btn-r); background: var(--btn-bg); box-shadow: var(--btn-sh); opacity: 0.9; }
.e-sk[data-sk="base"] { --bd: color-mix(in srgb, var(--ink) 30%, transparent); }
.e-sk[data-sk="lumen"] { --r: 5px; --sh: 0 2px 6px -1px rgb(0 0 0 / 0.28), 0 0 0 0.5px rgb(0 0 0 / 0.06); --btn-r: 2px; }
.e-sk[data-sk="soft"] {
  --r: 5px; --sh: 0 2px 6px -1px rgb(0 0 0 / 0.28), 0 0 0 0.5px rgb(0 0 0 / 0.06);
  --btn-bg: var(--sw-color-surface-raised); --btn-sh: 0 1px 2.5px rgb(0 0 0 / 0.45), 0 0 0 0.5px rgb(0 0 0 / 0.08); --btn-r: 2px;
}
.e-sk[data-sk="soft"] .e-sk__av { opacity: 1; background: var(--sw-color-surface-raised); box-shadow: 0 1px 2px rgb(0 0 0 / 0.4); }
.e-sk[data-sk="soft"] .e-sk__btn { opacity: 1; }
.e-sk[data-sk="round"] { --r: 9px; --btn-r: 99px; --bd: color-mix(in srgb, var(--ink) 30%, transparent); }
.e-sk[data-sk="round"] .e-sk__btn { width: 12px; }
.e-sk[data-sk="fine"] { --r: 2.5px; --line: 1px; --btn-r: 1px; --bd: color-mix(in srgb, var(--ink) 20%, transparent); }
.e-sk[data-sk="fine"] .e-sk__btn { width: 9px; height: 4px; }
.e-sk[data-sk="fine"] .e-sk__av { width: 5px; height: 5px; }
[data-sw-color-scheme="dark"] .e-sk { --bg: var(--sw-color-surface-sunken); }
[data-sw-color-scheme="dark"] .e-sk:is([data-sk="lumen"], [data-sk="soft"]) { --sh: 0 2px 6px -1px rgb(0 0 0 / 0.7), 0 0 0 0.5px rgb(255 255 255 / 0.12); }

/* Vorteile: the six boxes reach 16 px past the section lines on either side (owner). */
#vorteile .e-lines { margin-inline: -16px; }

/*
 * Seventh round (owner, 2026-10-20).
 *
 * Builder: the configurator and the example share one row, so they start on the
 * same line and are equally tall in every variant - the taller of the two sets the
 * height, the other stretches.
 */
.e-build { grid-template-rows: auto 1fr; }
.e-build__head { grid-column: 1; grid-row: 1; }
.e-build__stage { grid-column: 1; grid-row: 2; display: flex; }
.e-build__stage > .e-build__preview { flex: 1; }
.e-build__slot { grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column; }
.e-config[data-mode="dock"] { height: 100%; }
.e-config[data-mode="dock"] .e-config__body { flex: 1; }

/* Grundlagen and Varianten reach 16 px past the section lines, like Vorteile. */
#grundlagen .e-lines, #varianten .e-wall { margin-inline: -16px; }

/* Skin symbols: one line of text less, the rest a little larger (owner: too fiddly). */
.e-sk__av { left: 4px; top: 5px; width: 7px; height: 7px; }
.e-sk__l1 { left: 13px; top: 7.5px; width: 12px; }
.e-sk__btn { width: 12px; height: 5.5px; }
.e-sk[data-sk="fine"] .e-sk__av { width: 6px; height: 6px; top: 5.5px; }
.e-sk[data-sk="fine"] .e-sk__l1 { top: 8px; }
.e-sk[data-sk="round"] .e-sk__btn { width: 13px; }

/*
 * The pattern fades in at the top too: over the first 40 px below the header it
 * rises from 15 % to full, so the edge to the header never shows as a line. All
 * variants; the aurora fades over 180 px on its own.
 */
.e-backdrop {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.15), #000 40px);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0.15), #000 40px);
}

/*
 * Switching language loads the other page. Same-origin page loads cross-fade
 * (cross-document view transitions; Chrome 126, Safari 18.2), and until the first
 * frame nothing transitions, so the logo does not grow out of a square.
 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
:root.e-preload.e-preload *, :root.e-preload.e-preload *::before, :root.e-preload.e-preload *::after { transition: none; }
:root.e-preload .e-menu:popover-open { animation: none; }

/* The pattern gallery in two groups: the six proposals first, then those in use. */
.e-gallery__group { margin: 8px 0 14px; font-size: 13px; font-weight: var(--sw-font-weight-semibold); color: var(--e-muted); }
.e-gallery__group:not(:first-of-type) { margin-top: 36px; }
.e-pat__new {
  display: inline-block; margin-inline-start: 8px; padding: 1px 7px; border-radius: var(--sw-radius-full); vertical-align: 1px;
  font-size: 11px; font-weight: var(--sw-font-weight-semibold); background: var(--sw-color-text-primary); color: var(--sw-color-surface-page);
}

/*
 * Logo style "Raster 6 × 6" (default since round 8): up to eight forms, each a box
 * with corner radii on the invisible 6 × 6 grid. Position, size, radii, tone and
 * stroke all transition, so one mark morphs into the next.
 */
.e-logo__mark > s {
  position: absolute; box-sizing: border-box; border: 0 solid transparent; text-decoration: none;
  transition-property: left, top, width, height, border-radius, background-color, border-color, border-width, opacity;
  transition-duration: 1.4s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.e-logo__mark:not([data-style="raster6"], [data-style="golden"], [data-style="wire"], [data-style="wire-open"]) > s, .e-logo__mark:is([data-style="raster6"], [data-style="golden"], [data-style="wire"], [data-style="wire-open"]) > :is(i, b) { display: none; }
/* Gallery at four times the size, to judge the forms; the word mark steps aside. */
.e-gallery[data-zoom="4"] .e-gallery__item .e-logo { --m: 96px; transform: none; }
/* In the gallery the marks stand still: no morph, and a zoom shows its sizes at once. */
.e-gallery .e-logo__mark > * { transition: none; }
.e-gallery[data-zoom="4"] .e-gallery__item .e-logo__word { display: none; }
@media (prefers-reduced-motion: reduce) { .e-logo__mark > s { transition: none; } }

/*
 * Round 7, follow-ups (owner, 2026-10-20).
 *
 * Builder: docked, the panel lies over the slot and takes the row's height; the
 * row is at least as tall as the closed panel (--e-config-h, measured). "Alle
 * Optionen" then scrolls inside the panel instead of stretching the example.
 */
.e-build__stage { min-height: var(--e-config-h, 0px); }
.e-build__slot { position: relative; }
.e-config[data-mode="dock"] { position: absolute; inset: 0; height: auto; max-height: none; }
.e-config__body > * { flex-shrink: 0; }

/* "Alle Optionen anzeigen" is a secondary button in both schemes, and keeps its height when it reads "Weniger". */
.e-morebtn { flex: none; min-height: 36px; background: color-mix(in srgb, var(--sw-color-text-primary) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-color-text-primary) 10%, transparent); }
.e-morebtn:hover { background: color-mix(in srgb, var(--sw-color-text-primary) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-color-text-primary) 14%, transparent); }
.e-morebtn:focus-visible { outline: 2px solid var(--sw-color-border-focus); outline-offset: 2px; }

/*
 * Line grids: the outer line is an outline, not 1 px of background between padding
 * and cells. At 125 % display scaling the cells sit on half device pixels, and the
 * background line came out pale on the left and doubled on the right (measured);
 * an outline is drawn on whole pixels on both sides. Inner lines stay as gaps.
 */
.e-lines, .e-wall { outline: 1px solid var(--e-grid); outline-offset: -1px; background-clip: content-box; }

/* The logo gallery's style switch shows its choice like every quiet switch. */
.e-qseg button[aria-pressed="true"] {
  background: var(--e-quiet-on); color: var(--sw-color-text-primary); font-weight: var(--sw-font-weight-semibold);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.03);
}

/* Reset: in the panel always in place but off while nothing differs; in the menu only when needed, at the top. */
.e-textbtn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.e-menu__reset[hidden] { display: none; }
.e-menu__reset .e-menu__sep { margin-block: 6px 2px; }
.e-menu__reset[hidden] + .e-menu__title { margin-top: 4px; }

/*
 * Round nine, page UI (owner, 2026-10-20).
 * The chosen brand and skin in the configurator read at a glance: a 2 px frame in the
 * text colour on top of the light fill; the swatch's name turns bold.
 */
.e-swatch[aria-pressed="true"], .e-skinbtn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sw-color-text-primary); }
.e-swatch[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.e-swatch[aria-pressed="true"] span { font-weight: var(--sw-font-weight-semibold); }

/* Feedback (build.mjs): a quiet tab on the right edge, turned; a small panel on click. */
.e-fb { position: fixed; z-index: 60; right: 0; bottom: 64px; transition: right 0.3s var(--sw-motion-easing-standard); }
:root[data-fb-shift] .e-fb { right: var(--e-gutter); }
.e-fb__tab {
  display: flex; align-items: center; gap: 8px; padding: 14px 8px; border: 0; cursor: pointer;
  writing-mode: vertical-rl; rotate: 180deg; border-radius: 0 10px 10px 0;
  background: var(--sw-color-surface-raised); color: var(--sw-color-text-secondary);
  box-shadow: 0 0 0 1px var(--sw-color-border-subtle), 0 6px 16px -8px rgb(0 0 0 / 0.22);
  font: inherit; font-size: 13px; font-weight: var(--sw-font-weight-medium); letter-spacing: 0.01em;
  transition: translate 0.2s var(--sw-motion-easing-standard), color 0.15s, background-color 0.15s;
}
.e-fb__tab:hover, .e-fb__tab[aria-expanded="true"] { color: var(--sw-color-text-primary); translate: 2px 0; }
.e-fb__tab .e-face { order: 2; width: 18px; height: 18px; rotate: 180deg; }
.e-fb__tab span { order: 1; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-e-motion="still"]) .e-fb__tab:hover .e-face { animation: ei-wobble 0.6s var(--sw-motion-easing-standard); }
}
.e-fb__panel {
  position: absolute; right: calc(100% + 12px); bottom: 0; width: 320px; box-sizing: border-box; padding: 16px;
  border-radius: 16px; background: var(--sw-color-surface-overlay); color: var(--sw-color-text-primary);
  box-shadow: 0 0 0 1px var(--sw-color-border-subtle), 0 18px 40px -16px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.08);
  animation: e-fb-in 0.25s var(--sw-motion-easing-decelerate);
}
.e-fb__panel[hidden], .e-fb__more[hidden], .e-fb__thanks[hidden], .e-fb__faces[hidden], .e-fb__scale[hidden] { display: none; }
@keyframes e-fb-in { from { opacity: 0; transform: translateX(12px); } }
.e-fb__head { display: flex; align-items: flex-start; gap: 8px; }
.e-fb__title { flex: 1; margin: 0; font-size: 14px; font-weight: var(--sw-font-weight-semibold); line-height: 1.4; }
.e-fb__close {
  display: grid; place-items: center; width: 28px; height: 28px; margin: -4px -6px 0 0; flex: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--e-quiet-text); cursor: pointer;
}
.e-fb__close:hover { background: var(--e-quiet-track); color: var(--sw-color-text-primary); }
.e-fb__faces { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
.e-fb__faces button {
  flex: 1; display: grid; place-items: center; height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--e-quiet-track); color: var(--sw-color-text-secondary);
  transition: background-color 0.15s, color 0.15s, translate 0.15s var(--sw-motion-easing-standard);
}
.e-fb__faces button:hover { translate: 0 -2px; color: var(--sw-color-text-primary); background: color-mix(in srgb, var(--sw-color-text-primary) 10%, transparent); }
.e-fb__faces button[aria-checked="true"] { background: var(--sw-color-accent-default); color: var(--sw-color-text-on-accent); }
.e-face { width: 24px; height: 24px; display: block; }
.e-fb__scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--e-muted); }
.e-fb__more { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.e-fb__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.e-fb__actions .sw-button { flex: none; white-space: nowrap; }
.e-fb__note { font-size: 11px; color: var(--e-muted); }
.e-fb__thanks { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font-size: 14px; color: var(--sw-color-status-success-text); }

/*
 * The builder sits in the same box as every other section (owner, 2026-10-21): head
 * on the section lines, the example and the docked configurator reach 16 px past
 * them like the boxes of Vorteile and Grundlagen. Before, the configurator docked
 * at the window's edge, which looked fluid on wide screens.
 */
.e-build.e-wrap { padding-inline: 0; }
.e-build__stage { margin-inline-start: -16px; }
.e-build__slot { margin-inline-end: -16px; }
/* The example's edge takes the light of the line grids near the pointer. */
.e-build__preview { position: relative; --R: 24px; border: 0; border-radius: var(--R); outline: 1px solid var(--e-grid); outline-offset: -1px; }
.e-build__preview::before {
  content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(480px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--sw-color-text-primary) 32%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/*
 * Headline: the word of a line changes under the pointer (entwurf.js). While it
 * shuffles, its box eases to the width of the next word.
 */
.e-w[data-busy] { display: inline-block; white-space: nowrap; vertical-align: bottom; }

/* Docked, the panel takes its slot to the overhang, as wide as the boxes reach. */
.e-build__slot > .e-config[data-mode="dock"] { width: 100%; }
/* With the configurator open the mockup narrows; the bar's buttons keep their words on one line. */
.e-dash__bar .sw-button { white-space: nowrap; }
.e-dash__bar { flex-wrap: wrap; row-gap: 10px; }

/* Grundlagen: each small icon is a tile; hover or click starts its motion (icon-motion.css). */
.e-gicon { display: grid; place-items: center; padding: 6px 0; border-radius: 10px; cursor: pointer; transition: background-color 0.15s; }
.e-gicon:hover { background: var(--e-quiet-track); }

/*
 * Skalierung (owner, 2026-10-21): fluid only acts below 1280 px (D-160). On the
 * desktop the option would do nothing visible, so it shows only below that width;
 * the setting itself stays and is needed once the page is built for phones.
 */
@media (min-width: 1280px) { .e-opt--narrow { display: none; } }

/*
 * The builder's box is as wide as the boxes of Live gemessen and Varianten (owner,
 * 2026-10-21): one box 16 px past the section lines holds the example and the
 * docked configurator; its edge takes the light of the line grids.
 */
.e-build { grid-template-columns: minmax(0, 1fr); }
.e-build__box {
  grid-column: 1; grid-row: 2; position: relative; --R: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: stretch;
  margin-inline: -16px; padding: 24px; border-radius: var(--R); background: var(--sw-color-surface-raised);
  outline: 1px solid var(--e-grid); outline-offset: -1px;
}
.e-build__box::before {
  content: ""; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(480px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--sw-color-text-primary) 32%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.e-build__box > .e-build__stage { grid-column: 1; grid-row: 1; margin: 0; }
.e-build__box > .e-build__slot { grid-column: 2; grid-row: 1; margin: 0; }
.e-build__preview { padding: 0; border: 0; outline: 0; border-radius: 0; background: none; }
.e-build__preview::before { content: none; }