/* ============================================================================
LohnPulse Design System — components.css (v1.0)
----------------------------------------------------------------------------
The ONE shared component stylesheet every website page links, extracted +
reconciled (single-author, no drift) from the two approved mockups:
· mock-v9-homepage.html (shell, grounds, homepage archetypes, Laufband)
· mock-feature-page.html (feature-page archetypes, Sticky-Produkttour,
tokenized CSS app-screens .px-*)
LOAD ORDER (every page):
HARD RULES: role tokens + color-mix(in oklab) ONLY — no raw hex, never the
polar lab color function (project render bug; raw hex lives exclusively in
tokens.css). Shadows may use rgba
ink-alpha (precedent: tokens.css --shadow-*). Cards ≤ --radius-lg;
--radius-xl for media/hero frames only. Motion: one beat, then silence;
reduced-motion + no-JS are final-visible (tokens.css ships the global
reduced-motion kill-switch).
SECTIONS: 0 Root · 1 Base · 2 Layout · 3 Shell (nav/footer/site-chrome) ·
4 Grounds · 5 Buttons/Chips · 6 Reveals · 7 Archetypes · 8 Cards ·
9 Primitives (Pulsstrich/Ledger/Schaubild nodes) · 10 Tables ·
11 CSS-App-Mockups (.px-* + .pbx-* + .hx-* + .fx-ov2-* + Laufband) ·
12 Utilities
============================================================================ */
/* ============================================================================
0 · ROOT ADDITIONS (dimensions + root-frozen aliases; no colors added)
============================================================================ */
:root{
/* shell height (nav) + the alias main.js reads for smooth-scroll offset */
--navh: 64px;
--header-height: var(--navh);
/* Root-frozen brand primary: computed ON :root (= the app-green value from
tokens.css), so it survives the .sec--forest / .card--forest token remap.
Used by .figcard / app-screen stages to RESET to app-green on any ground —
the token-clean replacement for the mockups' inline literal. */
--brand-primary-root: var(--brand-primary);
}
/* ============================================================================
1 · BASE (from mock-v9 / mock-feature-page — identical, single-authored)
============================================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--surface); color:var(--text-body);
font-family:var(--font-sans); font-size:var(--text-base);
line-height:var(--leading-body); -webkit-font-smoothing:antialiased;
/* clip (not hidden): pre-reveal [data-fade] translateX(±22px) must never
create horizontal scroll; clip keeps position:sticky working. */
overflow-x:clip; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-strong);
text-wrap:balance; margin:0; }
p{ margin:0; text-wrap:pretty; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; }
a{ color:var(--text-link); }
a:hover{ color:var(--text-link-hover); }
:focus-visible{ outline:2px solid var(--border-focus); outline-offset:2px; border-radius:2px; }
/* ============================================================================
2 · LAYOUT PRIMITIVES
============================================================================ */
.l-center{ max-inline-size:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* ============================================================================
3 · SHELL — sticky nav (clean, no glass), logo lockup, footer, site chrome
============================================================================ */
.site-nav{ position:sticky; top:0; z-index:60; height:var(--navh);
background:var(--surface);
border-bottom:1px solid var(--border-hairline);
transition:box-shadow var(--dur-base) var(--ease); }
.site-nav.scrolled{ box-shadow:var(--shadow-sm); }
.nav-in{ height:100%; display:flex; align-items:center; gap:2rem; }
.nav-logo{ display:inline-flex; align-items:center; gap:.55rem;
text-decoration:none; color:var(--text-strong);
font:700 1.15rem/1 var(--font-display); letter-spacing:-0.01em; }
/* Official logo lockup (paths 1:1 from logo-light-v2.svg): pictogram tile +
pulse-line cut-outs, token-driven via --logo-tile / --logo-cut. Nav = brand
tile with paper cut-outs; the footer remaps to mint tile on green-950. */
.lp-mark{ width:30px; height:30px; display:block; flex:0 0 auto;
--logo-tile:var(--brand-primary-root); --logo-cut:var(--green-50); }
.lp-mark .lpm-tile{ fill:var(--logo-tile); }
.lp-mark .lpm-cut{ fill:var(--logo-cut); }
.nav-links{ display:flex; align-items:center; gap:1.6rem; margin-left:auto; }
.nav-links a{ font:500 var(--text-sm)/1 var(--font-sans);
color:var(--text-secondary); text-decoration:none;
padding:.4rem 0; border-bottom:2px solid transparent;
transition:color var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease); }
.nav-links a:hover{ color:var(--text-strong); border-bottom-color:var(--brand-primary); }
.nav-links a[aria-current="page"]{ color:var(--text-strong);
border-bottom-color:var(--brand-primary); }
.nav-links a.nav-cta{ border-bottom:0; padding:.55rem 1rem; }
.nav-links a.nav-cta.btn-primary{ color:var(--btn-primary-text); }
.nav-links a.nav-cta.btn-primary:hover{ color:var(--btn-primary-text); background:var(--btn-primary-hover); }
.nav-links a.nav-cta.btn-quiet{ color:var(--btn-secondary-text);
border-bottom:1px solid color-mix(in oklab, var(--btn-secondary-border) 40%, transparent); }
.nav-links a.nav-cta.btn-quiet:hover{ color:var(--btn-secondary-text);
background:color-mix(in oklab, var(--btn-secondary-border) 6%, transparent);
border-bottom-color:var(--btn-secondary-border); }
.nav-cta{ margin-left:.4rem; }
/* Compact "Demo"-CTA in the mobile header row (next to the hamburger, visible
without opening the menu). Desktop keeps the full "Demo buchen" in .nav-links. */
a.nav-cta-mobile{ display:none; }
/* --- Nav dropdown: "Für Unternehmen ▾" (Überblick/Handwerk/Bau) ---
Structure: .nav-drop > .nav-drop-link (real link, own SEO destination) +
.nav-drop-toggle (button, disclosure arrow) + .nav-drop-menu (ul).
Desktop: :hover OR :focus-within OR .open (click/keyboard) reveals the
panel — works with a mouse, a keyboard-only Tab, AND touch (no hover). */
.nav-drop{ position:relative; display:flex; align-items:center; }
.nav-links .nav-drop-link{ font:500 var(--text-sm)/1 var(--font-sans);
color:var(--text-secondary); text-decoration:none;
padding:.4rem 0; border-bottom:2px solid transparent;
transition:color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.nav-links .nav-drop-link:hover{ color:var(--text-strong); border-bottom-color:var(--brand-primary); }
.nav-links .nav-drop-link[aria-current="page"]{ color:var(--text-strong);
border-bottom-color:var(--brand-primary); }
.nav-drop-toggle{ display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; margin-left:.1rem; padding:0; border:0; background:none;
color:var(--text-secondary); cursor:pointer; border-radius:var(--radius-sm);
transition:color var(--dur-base) var(--ease); }
.nav-drop-toggle:hover{ color:var(--text-strong); }
.nav-drop-toggle:focus-visible{ outline:2px solid var(--border-focus); outline-offset:1px; }
.nav-drop-toggle svg{ width:9px; height:9px; display:block;
transition:transform var(--dur-base) var(--ease); }
.nav-drop-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-drop-menu{ position:absolute; top:100%; left:0; margin:.65rem 0 0; min-width:190px;
background:var(--surface); border:1px solid var(--border-hairline);
border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:.4rem;
opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none;
transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
visibility 0s linear var(--dur-base); z-index:70; }
/* Invisible hover-bridge filling the .65rem gap between the trigger and the
panel: without it, the mouse leaves .nav-drop (and thus loses :hover) the
moment it crosses the gap, closing the panel before it can be reached. As
a generated child of .nav-drop-menu it only exists while the panel itself
is visible/hoverable, so it can't accidentally open the menu on its own. */
.nav-drop-menu::before{ content:""; position:absolute; top:-.65rem; left:0; right:0;
height:.65rem; }
.nav-drop-menu li{ margin:0; }
.nav-links .nav-drop-menu a{ display:block; padding:.55rem .7rem;
border-radius:var(--radius-sm); border-bottom:0;
font:500 var(--text-sm)/1.2 var(--font-sans); color:var(--text-secondary);
text-decoration:none;
transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-links .nav-drop-menu a:hover{ background:var(--surface-sunken); color:var(--text-strong);
border-bottom:0; }
.nav-links .nav-drop-menu a[aria-current="page"]{ color:var(--brand-primary); font-weight:700; }
@media (hover:hover){
.nav-drop:hover .nav-drop-menu{ opacity:1; visibility:visible; transform:none;
pointer-events:auto; transition-delay:0s; }
}
.nav-drop.open .nav-drop-menu,
.nav-drop.hover-open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:none;
pointer-events:auto; transition-delay:0s; }
/* Escape override: wins over :hover/:focus-within while focus stays on the
toggle button, so Escape visibly closes the panel (main.js toggles it). */
.nav-drop.force-closed .nav-drop-menu{ opacity:0!important; visibility:hidden!important;
transform:translateY(-6px)!important; pointer-events:none!important; }
/* --- Mobile nav: hamburger toggle → slide-down panel (≤980px) --- */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px;
width:44px; height:44px; margin-left:auto; padding:11px 9px;
background:none; border:0; cursor:pointer; }
.nav-toggle span{ display:block; height:2px; width:100%; border-radius:2px;
background:var(--text-strong);
transition:transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); }
.site-nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:980px){
.nav-toggle{ display:flex; margin-left:0; }
a.nav-cta-mobile{ display:inline-flex; align-items:center; margin-left:auto;
margin-right:.6rem; white-space:nowrap; }
.nav-links{ position:fixed; inset:var(--navh) 0 auto 0; margin-left:0;
flex-direction:column; align-items:stretch; gap:0;
background:var(--surface); border-bottom:1px solid var(--border-hairline);
box-shadow:var(--shadow-lg); padding:.25rem var(--gutter) 1.1rem;
max-height:calc(100svh - var(--navh)); overflow-y:auto;
transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease),
visibility 0s linear var(--dur-base); }
.site-nav.nav-open .nav-links{ transform:none; opacity:1; visibility:visible;
pointer-events:auto; transition-delay:0s; }
.nav-links a{ padding:1rem .25rem; width:100%; font-size:var(--text-base);
border-bottom:1px solid var(--border-hairline); }
.nav-links a[aria-current="page"]{ border-bottom-color:var(--border-hairline); color:var(--brand-strong); }
.nav-links a.nav-cta{ margin:.9rem 0 0; border-bottom:0; justify-content:center;
padding:.9rem 1rem; border-radius:var(--radius-md); }
/* Nav dropdown → indented accordion. Link + arrow share one row
(flex-wrap), the panel wraps onto its own full-width row below and is
collapsed via max-height (only the .open state from the toggle button —
:hover/:focus-within are gated to hover-capable pointers above, so a
stray tap can't leave the panel visually stuck open here). */
.nav-drop{ display:flex; flex-wrap:wrap; align-items:center; width:100%;
border-bottom:1px solid var(--border-hairline); }
.nav-links .nav-drop-link{ flex:1 1 auto; width:auto; border-bottom:0; }
.nav-drop-toggle{ width:44px; height:44px; flex:0 0 auto; }
.nav-drop-toggle svg{ width:11px; height:11px; }
.nav-drop-menu{ position:static; flex:0 0 100%; width:100%; margin:0;
padding:0 0 0 1rem; background:none; border:0; box-shadow:none;
opacity:1; visibility:visible; transform:none; pointer-events:none;
max-height:0; overflow:hidden;
transition:max-height var(--dur-slow) var(--ease); }
.nav-drop.open .nav-drop-menu{ max-height:220px; pointer-events:auto; }
.nav-links .nav-drop-menu a{ padding:.8rem .25rem; border-bottom:0; }
.nav-links .nav-drop-menu li:not(:last-child) a{ border-bottom:1px solid var(--border-hairline); }
}
/* --- Urgency banner (site chrome, below nav — tokenized from the live site) --- */
/* WHY green-950→900 (the hero's own stops): a mid-green strip clashed between
the white nav and the deep-forest hero; matching the hero tones makes
nav → banner → hero read as one cohesive band. Mint link keeps it distinct. */
.urgency-banner{ background:linear-gradient(90deg, var(--green-950), var(--green-900));
color:var(--white); text-align:center; padding:.6rem 1.5rem;
font:500 var(--text-sm)/1.5 var(--font-sans); }
.urgency-banner a{ color:var(--mint); text-decoration:underline;
text-underline-offset:2px; font-weight:600; }
.urgency-banner a:hover{ color:var(--white); }
@media (max-width:768px){ .urgency-banner{ font-size:var(--text-xs); padding:.5rem 1rem; } }
/* --- Footer (on-palette: deep green-cast ink, never cold navy) --- */
.site-footer{ background:var(--green-950); color:var(--d-sec);
border-top:1px solid var(--d-hairline); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:clamp(1.5rem,4vw,3rem); padding-block:clamp(2.5rem,5vw,3.5rem) 2rem; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-brand .nav-logo{ color:var(--white); }
.foot-brand .lp-mark{ --logo-tile:var(--mint); --logo-cut:var(--green-950); }
.foot-brand p{ margin-top:.9rem; font-size:var(--text-sm); color:var(--d-sec);
max-inline-size:30ch; }
.foot-brand .btn{ margin-top:1.2rem; background:var(--mint); color:var(--ink-label); }
.foot-brand .btn:hover{ background:var(--mint-calm); color:var(--ink-label); }
.site-footer h4{ color:var(--d-text); font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
border-top:1px solid var(--d-hairline); padding-top:.8rem; }
.site-footer ul{ margin-top:.8rem; }
.site-footer ul li{ padding-block:.28rem; }
.site-footer ul a{ color:var(--d-sec); text-decoration:none;
font-size:var(--text-sm); }
.site-footer ul a:hover{ color:var(--mint); }
.foot-bottom{ border-top:1px solid var(--d-hairline);
padding-block:1.2rem 1.6rem; display:flex; justify-content:space-between;
gap:.8rem 2rem; flex-wrap:wrap;
font:500 var(--text-2xs)/1.6 var(--font-mono); color:var(--d-muted); }
/* --- Cookie banner (site chrome, tokenized; JS contract: js/main.js
#cookie-banner + .show + #cookie-accept / #cookie-necessary) --- */
.cookie-banner{ position:fixed; bottom:0; left:0; right:0; z-index:9999;
background:var(--surface); border-top:1px solid var(--border-hairline);
box-shadow:0 -4px 20px rgba(20,32,27,.12);
padding:1.25rem 1.5rem; display:none; }
.cookie-banner.show{ display:block; }
.cookie-inner{ max-width:var(--container); margin:0 auto;
display:flex; align-items:center; gap:1.5rem; }
.cookie-text{ flex:1; font-size:var(--text-sm); color:var(--text-secondary);
line-height:1.5; }
.cookie-text a{ color:var(--text-link); text-decoration:underline; }
.cookie-buttons{ display:flex; gap:.75rem; flex-shrink:0; }
.cookie-btn{ padding:.6rem 1.25rem; border-radius:var(--radius-md);
font:600 var(--text-xs)/1.4 var(--font-sans); cursor:pointer; border:0;
transition:background var(--dur-base) var(--ease),
color var(--dur-base) var(--ease); }
.cookie-btn-accept{ background:var(--btn-primary-bg); color:var(--btn-primary-text); }
.cookie-btn-accept:hover{ background:var(--btn-primary-hover); }
.cookie-btn-necessary{ background:var(--ink-100); color:var(--ink-700);
border:1px solid var(--ink-300); }
.cookie-btn-necessary:hover{ background:var(--ink-200); }
@media (max-width:768px){
.cookie-inner{ flex-direction:column; align-items:stretch; gap:.9rem; }
.cookie-buttons{ justify-content:flex-end; }
}
/* --- Lightbox (site chrome — js/main.js injects the overlay on every page;
hidden until .open. Tokenized port of the legacy styles.css block.) --- */
.lightbox-overlay{ position:fixed; inset:0; z-index:10000;
background:rgba(11,20,16,.85); display:flex; align-items:center;
justify-content:center; opacity:0; visibility:hidden;
transition:opacity var(--dur-base) var(--ease),
visibility var(--dur-base) var(--ease); }
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-overlay img{ max-width:92vw; max-height:90vh; object-fit:contain;
border-radius:var(--radius-md); box-shadow:0 8px 40px rgba(0,0,0,.4);
transform:scale(.92); transition:transform var(--dur-base) var(--ease); }
.lightbox-overlay.open img{ transform:scale(1); }
.lightbox-close{ position:absolute; top:1rem; right:1.25rem;
width:2.5rem; height:2.5rem; border:0; border-radius:50%; cursor:pointer;
background:rgba(255,255,255,.15); color:var(--white);
font:400 1.5rem/1 var(--font-sans);
display:flex; align-items:center; justify-content:center;
transition:background var(--dur-base) var(--ease); }
.lightbox-close:hover{ background:rgba(255,255,255,.3); }
/* ============================================================================
4 · GROUNDS — section shell + kicker (Pulsstrich grammar).
NOTE: the .sec--white/.sec--cream/.sec--alt/.sec--mint/.sec--accent/
.sec--forest[-flat] ground utilities (incl. the on-dark token remap) ship in
tokens.css — do NOT redefine them here. Rule: adjacent sections never share
a ground; a deep ground punctuates every 3rd–4th section.
============================================================================ */
/* overflow-x:clip: pre-reveal [data-fade] transforms (±22px) must never widen
the document — element-level clip removes the overflow contribution without
creating a scroll container (sticky children keep working). */
.sec{ padding-block:var(--space-section); overflow-x:clip; }
.kicker{ display:inline-flex; align-items:center; gap:.55rem;
font:600 var(--text-xs)/1 var(--font-mono); letter-spacing:var(--tracking-caps);
text-transform:uppercase; color:var(--green-700); }
.kicker::before{ content:""; width:28px; height:12px; flex:0 0 auto;
background:var(--brand-primary);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.sec--forest .kicker, .sec--forest-flat .kicker{ color:var(--mint); }
.sec h2{ font-size:var(--text-2xl); line-height:var(--leading-snug);
letter-spacing:var(--tracking-tight); margin-top:.6rem; }
.sec .dek{ max-inline-size:var(--measure); color:var(--text-secondary);
margin-top:.7rem; }
.sec--forest .dek, .sec--forest-flat .dek{ color:var(--d-sec); }
.sec-head{ margin-bottom:clamp(1.8rem,4vw,3rem); }
.sec-head.center{ text-align:center; }
.sec-head.center .dek{ margin-inline:auto; }
/* ============================================================================
5 · BUTTONS & CHIPS (R20: Deep-Forest-Ink on light grounds → mint pair on
forest grounds; the flip lives in tokens.css .sec--forest)
============================================================================ */
.btn{ display:inline-flex; align-items:center; gap:.5rem;
font:600 var(--text-sm)/1 var(--font-sans); text-decoration:none;
padding:.85rem 1.4rem; border-radius:var(--radius-md);
transition:background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease),
color var(--dur-base) var(--ease); }
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn-primary{ background:var(--btn-primary-bg); color:var(--btn-primary-text); }
.btn-primary:hover{ background:var(--btn-primary-hover); color:var(--btn-primary-text); }
.btn-quiet{ color:var(--btn-secondary-text);
border:1px solid color-mix(in oklab, var(--btn-secondary-border) 40%, transparent);
background:transparent; }
.btn-quiet:hover{ color:var(--btn-secondary-text);
border-color:var(--btn-secondary-border);
background:color-mix(in oklab, var(--btn-secondary-border) 6%, transparent); }
.btn-mint{ background:var(--mint); color:var(--ink-900); }
.btn-mint:hover{ background:var(--mint-calm); color:var(--ink-900); }
.btn-outline-d{ color:var(--d-text); border:1px solid var(--d-hairline-strong);
background:transparent; }
.btn-outline-d:hover{ border-color:var(--mint); color:var(--white);
background:color-mix(in oklab, var(--mint) 8%, transparent); }
.btn-sm{ padding:.55rem 1rem; font-size:var(--text-xs); }
/* pause/play control (Laufband etc.) — hidden without JS */
.ctl{ appearance:none; border:1px solid var(--border-default);
background:var(--surface); color:var(--text-strong);
font-family:var(--font-mono); font-size:var(--text-xs);
padding:.45rem .9rem; border-radius:var(--radius-md); cursor:pointer;
transition:border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease); }
.ctl:hover{ border-color:var(--brand-primary); }
.sec--forest .ctl, .sec--forest-flat .ctl{ background:transparent;
color:var(--d-text); border-color:var(--d-hairline-strong); }
.sec--forest .ctl:hover, .sec--forest-flat .ctl:hover{ border-color:var(--mint); }
html:not(.js) .ctl{ display:none; }
/* ============================================================================
6 · REVEALS — role-varied one-shot fades (§2d one beat, then silence).
Hidden ONLY under html.js.motion → no-JS / reduced-motion = final-visible.
============================================================================ */
html.js.motion [data-fade]{ opacity:0; transform:translateY(14px);
transition:opacity .6s var(--ease) var(--fd,0s),
transform .6s var(--ease) var(--fd,0s); }
html.js.motion [data-fade="left"]{ transform:translateX(-22px); }
html.js.motion [data-fade="right"]{ transform:translateX(22px); }
html.js.motion [data-fade="rise-lg"]{ transform:translateY(30px); }
html.js.motion [data-fade="scale"]{ transform:scale(.965); }
html.js.motion [data-fade].in{ opacity:1; transform:none; }
/* ============================================================================
7 · ARCHETYPES
============================================================================ */
/* ---------- 7a · Homepage-Hero (one viewport, Tief × Bright) ---------- */
.hero{ background:linear-gradient(155deg,var(--hero-g1),var(--hero-g2));
color:var(--d-text);
/* 30.09.2026: keine volle Viewport-Höhe mehr — der nächste Abschnitt soll anschauen */
display:grid; align-items:center; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.38fr);
gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
padding-block:clamp(2.5rem,8vh,5.5rem); width:100%; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; padding-block:clamp(2rem,4.5vh,3.5rem); } .hero{ min-height:0; } }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:.55rem;
font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.07em;
text-transform:uppercase; color:var(--mint); white-space:nowrap; }
.hero-eyebrow::before{ content:""; width:28px; height:12px; background:var(--mint);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.hero-copy h1{ color:var(--white);
font-size:clamp(2.25rem,1.9rem + 2vw,3.5rem); font-weight:700;
line-height:1.04; letter-spacing:var(--tracking-display); margin-top:1rem; }
.hero-copy h1 em{ font-style:normal; color:var(--mint); }
.hero-sub{ color:var(--d-sec); font-size:var(--text-md); line-height:1.6;
max-inline-size:42ch; margin-top:1.1rem; }
.hero-cta{ display:flex; align-items:center; gap:.9rem; margin-top:1.8rem; flex-wrap:wrap; }
.hero-micro{ margin-top:1.4rem; font:500 var(--text-2xs)/1.6 var(--font-mono);
color:var(--d-muted); }
/* ---------- 7b · Feature-Hero (forest, quieter than homepage) ---------- */
.feat-hero{ padding-block:clamp(3rem,7vw,5.5rem); }
.fh-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:900px){ .fh-grid{ grid-template-columns:1fr; } }
.fh-crumb{ font:500 var(--text-2xs)/1 var(--font-mono); color:var(--d-muted);
letter-spacing:.04em; }
.fh-crumb a{ color:var(--d-sec); text-decoration:none; }
.fh-crumb a:hover{ color:var(--mint); }
.fh-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem;
font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.07em;
text-transform:uppercase; color:var(--mint); }
.fh-eyebrow::before{ content:""; width:28px; height:12px; background:var(--mint);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.feat-hero h1{ color:var(--white); font-size:var(--text-3xl); font-weight:700;
line-height:1.08; letter-spacing:var(--tracking-display); margin-top:.9rem; }
.feat-hero h1 em{ font-style:normal; color:var(--mint); }
.fh-dek{ color:var(--d-sec); font-size:var(--text-md); line-height:1.6;
max-inline-size:46ch; margin-top:1.1rem; }
.fh-cta{ display:flex; align-items:center; gap:.9rem; margin-top:1.7rem; flex-wrap:wrap; }
.fh-micro{ margin-top:1.3rem; font:500 var(--text-2xs)/1.6 var(--font-mono);
color:var(--d-muted); }
/* ---------- 7c · Trust-Strip (tech/compliance badges only) ---------- */
.trustbar{ background:var(--sect-white); border-bottom:1px solid var(--border-hairline); }
.trustbar-in{ display:flex; align-items:center; justify-content:center;
gap:.9rem 2.4rem; flex-wrap:wrap; padding-block:1.05rem; }
.tb-lead{ font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--text-muted); }
.tb-badge{ display:inline-flex; align-items:center; gap:.45rem;
font:500 var(--text-xs)/1 var(--font-mono); letter-spacing:.03em;
color:var(--text-secondary); white-space:nowrap; }
.tb-badge svg{ width:13px; height:13px; flex:0 0 auto; color:var(--green-600); }
/* ---------- 7d · Glance-Strip (mint, thin — feature pages) ---------- */
.glance{ background:var(--sect-mint); border-bottom:1px solid var(--sect-mint-edge); }
.glance-in{ display:flex; align-items:center; justify-content:center;
gap:.9rem 2.2rem; flex-wrap:wrap; padding-block:1.05rem; }
.gl-item{ display:inline-flex; align-items:center; gap:.5rem;
font:500 var(--text-xs)/1 var(--font-mono); letter-spacing:.03em;
color:var(--ink-700); white-space:nowrap; }
.gl-item svg{ width:13px; height:13px; flex:0 0 auto; color:var(--green-700);
stroke:currentColor; fill:none; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round; }
/* ---------- 7e · Problem / Pain (two columns + Punch) ---------- */
.pain-grid{ display:grid; grid-template-columns:1fr 1fr;
gap:clamp(1.5rem,4vw,3.5rem); }
@media (max-width:820px){ .pain-grid{ grid-template-columns:1fr; } }
.pain-col{ border-top:1px solid var(--border-default); padding-top:1.1rem; }
.pain-col .pc-kick{ display:block; font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--green-700); margin-bottom:.55rem; }
.pain-col h3{ font-size:var(--text-lg); line-height:var(--leading-heading); }
.pain-col p{ margin-top:.8rem; color:var(--text-body); font-size:var(--text-base); }
.pain-col .pc-close{ color:var(--text-strong); font-weight:600; }
.punch{ max-inline-size:560px; margin:clamp(2.2rem,5vw,3.5rem) auto 0;
text-align:center; }
.punch .p-rule{ border:0; height:0; width:168px; margin:0 auto 1.3rem;
border-top:3px double var(--fx-rule-sum); }
.punch .p-lead{ font-family:var(--font-display); font-weight:700;
font-size:var(--text-xl); color:var(--brand-strong); letter-spacing:var(--tracking-tight); }
.punch .p-sub{ margin-top:.6rem; color:var(--text-secondary); font-size:var(--text-sm); }
/* Pain on cream: Pulsstrich emphasis — rail + beat per column */
.sec--cream .pain-col{ border-top:0; border-left:1px solid var(--border-default);
padding-top:.2rem; padding-left:1.25rem; position:relative; }
.sec--cream .pain-col::before{ content:""; position:absolute; left:-2px; top:0;
width:3px; height:38px; background:var(--brand-primary); border-radius:2px; }
/* ---------- 7f · Steps with number badges + benefit row (§2.4) ---------- */
.benefit-row{ display:flex; justify-content:center; gap:.8rem 2.2rem;
flex-wrap:wrap; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
.benefit-row .br{ display:inline-flex; align-items:center; gap:.6rem;
font:500 var(--text-sm)/1.35 var(--font-sans); color:var(--text-body); }
.do-ico{ display:inline-grid; place-items:center; width:24px; height:24px;
border-radius:50%; flex:0 0 auto; color:var(--brand-primary);
box-shadow:inset 0 0 0 1.5px var(--badge-ring); }
.do-ico svg{ width:12px; height:12px; stroke:currentColor; fill:none;
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.steps{ --step-gap:clamp(1.25rem,3vw,2.5rem);
display:grid; grid-template-columns:repeat(3,1fr);
gap:var(--step-gap); counter-reset:step; position:relative;
margin-top:clamp(1.2rem,2.5vw,2rem); }
/* Spine springs from the centre of badge 01, runs THROUGH badge 03 and tapers
out to the container edge (reads as continuing, never cut off). */
.steps::before{ content:""; position:absolute; top:19px; left:19px; right:0;
height:1px;
background:linear-gradient(to right,
color-mix(in oklab, var(--green-500) 38%, var(--ink-200)) calc(100% - 110px),
transparent);
z-index:0; }
/* NOTE: the tick masks the spine with the mint section ground — the steps
archetype sits on .sec--mint by design (mock-v9). */
.spine-tick{ position:absolute; top:8px; left:50%; transform:translateX(-50%);
z-index:1; background:var(--sect-mint); padding-inline:.55rem; }
.spine-tick svg{ display:block; width:34px; height:22px; }
.spine-tick svg path{ fill:none; stroke:var(--brand-primary); stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; }
/* 4-step variant (baulohn, handwerk): one row instead of 3+1 */
.steps--4{ grid-template-columns:repeat(4,1fr); }
.step{ counter-increment:step; position:relative; z-index:1; border-top:0; }
.step-badge{ width:38px; height:38px; border-radius:50%; display:grid;
place-items:center; font:700 var(--text-sm)/1 var(--font-mono);
color:var(--brand-strong); background:var(--surface);
box-shadow:inset 0 0 0 1.6px var(--badge-ring);
font-variant-numeric:tabular-nums; }
.step-badge::before{ content:counter(step, decimal-leading-zero); }
.step .st-no{ display:block; margin-top:.85rem;
font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--green-700); }
.step h3{ font-size:var(--text-lg); margin-top:.45rem;
line-height:var(--leading-heading); }
.step p{ margin-top:.6rem; font-size:var(--text-sm); color:var(--text-body); }
.step-done{ display:inline-flex; align-items:center; gap:.45rem;
margin-top:.85rem; font:600 var(--text-2xs)/1 var(--font-mono);
color:var(--green-800); }
.step-done i{ display:inline-grid; place-items:center; width:18px; height:18px;
border-radius:50%; background:var(--mint); color:var(--ink-label);
font:700 11px/1 var(--font-sans); font-style:normal; }
@media (max-width:820px){
.steps{ grid-template-columns:1fr; }
.steps::before{ display:none; }
/* Mobile spine is VERTICAL: badge moves into a left gutter and the step
content indents clear of it, so the connector line never crosses the
text (WHY: full-width text + a left-rail line = line-through-copy). */
.step{ padding-left:3.25rem; }
.step-badge{ position:absolute; left:0; top:0; z-index:1; }
/* One continuous spine from badge-01 centre → badge-03 centre, masked
behind each opaque badge; the last badge ends it (no dangling stub). */
.step:not(:last-child)::after{ content:""; position:absolute; left:18px;
top:19px; bottom:calc(-1 * var(--step-gap) - 19px); width:2px;
background:color-mix(in oklab, var(--green-500) 50%, var(--ink-200));
border-radius:1px; z-index:0; }
.spine-tick{ display:none; }
}
/* ---------- 7g · Video band + Media band (radius-xl media frames) ---------- */
.vid-band{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width:820px){ .vid-band{ grid-template-columns:1fr; } }
.vid-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-xl);
overflow:hidden; cursor:pointer; border:1px solid var(--border-hairline);
background:linear-gradient(155deg,var(--hero-g1),var(--hero-g2));
box-shadow:var(--shadow-md); }
.vid-frame .vf-line{ position:absolute; inset:auto 8% 34% 8%; height:60px; }
.vid-frame .vf-line path{ fill:none; stroke:color-mix(in oklab, var(--mint) 55%, transparent);
stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.vid-frame .vf-play{ position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%;
display:grid; place-items:center; background:var(--mint);
transition:transform var(--dur-base) var(--ease); }
.vid-frame:hover .vf-play{ transform:translate(-50%,-50%) scale(1.06); }
.vid-frame .vf-play svg{ width:22px; height:22px; fill:var(--ink-900);
margin-left:3px; }
.vid-frame .vf-cap{ position:absolute; left:0; right:0; bottom:0;
padding:.7rem 1rem; font:500 var(--text-2xs)/1.4 var(--font-mono);
color:var(--d-sec); background:color-mix(in oklab, var(--hero-g1) 82%, transparent); }
.media-band{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width:820px){ .media-band{ grid-template-columns:1fr; } }
.sec--forest .vid-frame{ border:0; outline:1px solid color-mix(in oklab, var(--mint) 30%, transparent);
box-shadow:var(--shadow-lg); }
.mb-kick{ display:block; font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--mint); margin-bottom:.75rem; }
.mb-note{ margin-top:.85rem; font:500 var(--text-2xs)/1.6 var(--font-mono);
color:var(--d-sec); }
/* ---------- 7h · Duo-Contrast (paper card + forest card, §2.5) ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr;
gap:clamp(1.25rem,3vw,2.5rem); align-items:stretch; }
@media (max-width:820px){ .duo{ grid-template-columns:1fr; } }
/* Synced pair: both cards flex-column, CTA pressed to one shared baseline. */
.duo .card{ display:flex; flex-direction:column; }
.duo .sp-kick{ display:block; font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--green-700); margin-bottom:.5rem; }
.card--forest .sp-kick{ color:var(--mint); }
.duo h3{ font-size:var(--text-xl); line-height:var(--leading-heading);
color:var(--text-strong); }
.duo ul{ margin-top:1rem; margin-bottom:1.4rem; }
.duo li{ display:flex; gap:.7rem; align-items:flex-start; padding-block:.55rem;
border-bottom:1px solid var(--border-hairline); font-size:var(--text-sm);
color:var(--text-body); }
/* Equal beats L↔R: fixed bullet row height so hairlines align (side-by-side only) */
@media (min-width:821px){ .duo li{ min-height:4.3rem; } }
.duo li .do-ico{ margin-top:.05rem; width:22px; height:22px; }
.card--forest .do-ico{ color:var(--mint);
box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--mint) 55%, transparent); }
.duo .btn{ margin-top:auto; align-self:flex-start; }
/* ---------- 7i · Flagship feature rows (homepage, copy ↔ figcard) ---------- */
.flag{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
padding-block:clamp(1.8rem,4vw,2.8rem);
border-top:1px solid var(--border-hairline); }
.flag:first-of-type{ border-top:0; }
.flag.rev > .flag-fig{ order:-1; }
@media (max-width:820px){ .flag{ grid-template-columns:1fr; }
.flag.rev > .flag-fig{ order:0; } }
.flag .fl-kick{ display:block; font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--green-700); margin-bottom:.55rem; }
.flag h3{ font-size:var(--text-xl); line-height:var(--leading-heading); }
.flag p{ margin-top:.75rem; font-size:var(--text-sm); color:var(--text-body); }
.flag .more{ display:inline-block; margin-top:.9rem;
font:600 var(--text-sm)/1 var(--font-sans); text-decoration:none; }
.flag .more::after{ content:" →"; }
/* "und mehr" band (standard features live on the Funktionen page) */
.more-band{ margin-top:clamp(1.8rem,4vw,2.6rem);
border-top:1px solid var(--border-hairline); padding-top:1.4rem;
display:flex; flex-direction:column; align-items:center; gap:.7rem;
text-align:center; }
.more-band .mb-list{ font:500 var(--text-2xs)/1.7 var(--font-mono);
color:var(--text-muted); letter-spacing:.02em; max-inline-size:72ch; }
.more-band .more{ font:600 var(--text-sm)/1 var(--font-sans);
text-decoration:none; }
.more-band .more::after{ content:" →"; }
/* ---------- 7j · Feature-detail rows (feature pages, copy ↔ domain figure) ---------- */
.frow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
padding-block:clamp(1.8rem,4vw,2.8rem);
border-top:1px solid var(--border-hairline); }
.frow:first-of-type{ border-top:0; padding-top:0; }
.frow.rev > .frow-fig{ order:-1; }
@media (max-width:820px){ .frow{ grid-template-columns:1fr; }
.frow.rev > .frow-fig{ order:0; } }
.frow .fr-kick{ display:block; font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--green-700); margin-bottom:.55rem; }
.frow h3{ font-size:var(--text-xl); line-height:var(--leading-heading); }
.frow p{ margin-top:.75rem; font-size:var(--text-sm); color:var(--text-body);
max-inline-size:52ch; }
.frow .fr-note{ margin-top:.9rem; font:500 var(--text-2xs)/1.6 var(--font-mono);
color:var(--text-muted); }
.frow .fr-note .para{ color:var(--fx-src); }
/* ---------- 7k · Statband (forest-flat; mint Summenstrich = real sum) ---------- */
.statband-sec{ border-top:1px solid var(--d-hairline); }
.statband{ display:grid; grid-template-columns:repeat(4,1fr);
gap:clamp(1rem,3vw,2.5rem); text-align:center;
border-top:1px solid var(--d-hairline);
border-bottom:3px double var(--mint);
padding-block:clamp(1.6rem,3.5vw,2.6rem); }
@media (max-width:680px){ .statband{ grid-template-columns:1fr 1fr; } }
.stat-fig{ font:600 var(--text-3xl)/1.05 var(--font-mono); color:var(--white);
letter-spacing:-0.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stat-lbl{ margin-top:.45rem; font:500 var(--text-xs)/1.4 var(--font-sans);
color:var(--d-sec); }
.tbadges{ display:flex; justify-content:center; gap:1rem 2rem; flex-wrap:wrap;
margin-top:clamp(1.5rem,3vw,2.2rem); }
.tbadges span{ display:inline-flex; align-items:center; gap:.5rem;
font:500 var(--text-xs)/1 var(--font-mono); color:var(--text-secondary); }
.tbadges svg{ width:15px; height:15px; color:var(--green-700);
stroke:currentColor; fill:none; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; }
.sec--forest-flat .tbadges{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.sec--forest-flat .tbadges span, .sec--forest .tbadges span{ color:var(--d-sec); }
.sec--forest-flat .tbadges svg, .sec--forest .tbadges svg{ color:var(--mint); }
/* ---------- 7l · Quote-Feature + Quote-Grid (§2.6) ---------- */
.quote-feature{ margin:0 auto; max-inline-size:660px; text-align:center; }
.pull-open{ display:flex; align-items:center; justify-content:center;
gap:.7rem; margin-bottom:1.4rem; }
.pull-open::before, .pull-open::after{ content:""; height:1px; width:64px;
background:var(--border-default); }
.pull-open svg{ display:block; width:34px; height:14px; }
.pull-open svg path{ fill:none; stroke:var(--brand-primary); stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; }
.quote-feature blockquote{ margin:0;
font:500 var(--text-2xl)/1.32 var(--font-display);
letter-spacing:var(--tracking-tight); color:var(--text-strong);
text-wrap:balance; }
.qf-by{ margin-top:1.3rem; display:flex; align-items:center;
justify-content:center; gap:.7rem;
font:500 var(--text-xs)/1.5 var(--font-mono); color:var(--text-muted); }
.qf-by b{ color:var(--text-secondary); font-weight:600; }
.qf-ava{ width:34px; height:34px; border-radius:50%; display:grid;
place-items:center;
background:linear-gradient(155deg,var(--green-800),var(--green-950));
color:var(--mint); font:600 .85rem/1 var(--font-display); }
.quote-grid{ display:grid; grid-template-columns:1fr 1fr;
gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(2rem,5vw,3rem);
max-inline-size:900px; margin-inline:auto; }
@media (max-width:820px){ .quote-grid{ grid-template-columns:1fr; } }
.qg{ margin:0; border-top:1px solid var(--border-default); padding-top:1rem; }
.qg blockquote{ margin:0; font:500 var(--text-md)/1.5 var(--font-display);
color:var(--text-strong); letter-spacing:var(--tracking-tight); }
.qg .qt-by{ margin-top:.8rem; font:500 var(--text-xs)/1.5 var(--font-mono);
color:var(--text-muted); }
.qg .qt-by b{ color:var(--text-secondary); font-weight:600; }
/* ---------- 7m · FAQ (details/summary, hairlines) ---------- */
.faq{ max-inline-size:var(--container-narrow); margin-inline:auto;
border-top:1px solid var(--border-default); }
.faq details{ border-bottom:1px solid var(--border-hairline); }
.faq summary{ cursor:pointer; list-style:none; display:flex;
justify-content:space-between; align-items:center; gap:1rem;
padding:1.05rem .2rem; font:600 var(--text-base)/1.4 var(--font-sans);
color:var(--text-strong); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .fq-m{ font:500 1.2rem/1 var(--font-mono); color:var(--green-700);
transition:transform var(--dur-base) var(--ease); }
.faq details[open] summary .fq-m{ transform:rotate(45deg); }
.faq .fq-a{ padding:0 .2rem 1.15rem; font-size:var(--text-sm);
color:var(--text-body); max-inline-size:var(--measure); }
/* ---------- 7n · Founder (the ONE warm accent moment) ---------- */
.founder{ display:grid; grid-template-columns:auto 1fr;
gap:clamp(1.5rem,4vw,2.5rem); align-items:start;
max-inline-size:860px; margin-inline:auto; }
@media (max-width:680px){ .founder{ grid-template-columns:1fr; } }
.f-ava{ width:104px; height:104px; border-radius:50%; overflow:hidden;
background:linear-gradient(155deg,var(--green-800),var(--green-950));
color:var(--mint); display:grid; place-items:center;
font:600 1.6rem/1 var(--font-display); border:1px solid var(--green-200); }
.f-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.founder h3{ font-size:var(--text-xl); }
.founder .f-role{ font:600 var(--text-xs)/1.4 var(--font-mono);
color:var(--green-700); margin-top:.3rem; }
.founder p{ margin-top:.8rem; font-size:var(--text-sm); color:var(--text-body);
max-inline-size:var(--measure); }
.f-creds{ display:flex; gap:.7rem 1.4rem; flex-wrap:wrap; margin-top:1rem;
font:500 var(--text-2xs)/1 var(--font-mono); color:var(--text-muted); }
.f-creds span{ border-top:1px solid var(--border-hairline); padding-top:.45rem; }
/* ---------- 7o · CTA-Band (forest; button pair flips via local remap) ---------- */
.cta-band{ background:var(--hero-g2); color:var(--d-text);
border-top:1px solid var(--d-hairline);
padding-block:clamp(3rem,7vw,5rem); text-align:center;
--btn-primary-bg:var(--mint); --btn-primary-text:var(--ink-label);
--btn-primary-hover:var(--mint-calm);
--btn-secondary-text:var(--mint); --btn-secondary-border:var(--d-hairline-strong); }
.cta-beat{ display:block; width:min(320px,70%); height:26px; margin:0 auto 1.4rem; }
.cta-beat path{ fill:none; stroke:var(--d-hairline-strong); stroke-width:1.5; }
.cta-beat .beat{ stroke:var(--mint); stroke-width:2; }
html.js.motion .cta-beat .beat{ stroke-dasharray:1000; stroke-dashoffset:1000; }
html.js.motion .cta-sec.is-in .cta-beat .beat{ stroke-dashoffset:0;
transition:stroke-dashoffset 800ms var(--ease-standard) 100ms; }
.cta-band h2{ color:var(--white); font-size:var(--text-2xl);
letter-spacing:var(--tracking-tight); line-height:var(--leading-snug); }
.cta-band .cta-dek{ color:var(--d-sec); margin:.8rem auto 0;
max-inline-size:52ch; font-size:var(--text-md); }
.cta-band .cta-row{ display:flex; justify-content:center; gap:.9rem;
margin-top:1.8rem; flex-wrap:wrap; }
.cta-band .cta-micro{ margin-top:1.3rem;
font:500 var(--text-2xs)/1.6 var(--font-mono); color:var(--d-muted); }
/* ---------- 7p · Sticky-Produkttour (Option B, forest — feature pages) ---------- */
.tour-sec{ position:relative; }
.tour-beat{ display:block; inline-size:100%; block-size:30px;
margin-bottom:clamp(1.2rem,3vw,2rem); }
.tour-beat path{ fill:none; stroke:var(--d-hairline); stroke-width:1.5; }
.tour-beat .beat{ stroke:var(--mint); stroke-width:2; }
html.js.motion .tour-beat .beat{ stroke-dasharray:1000; stroke-dashoffset:1000; }
html.js.motion .tour-sec.is-in .tour-beat .beat{ stroke-dashoffset:0;
transition:stroke-dashoffset 900ms var(--ease-standard) 120ms; }
.tour{ display:grid; grid-template-columns:minmax(240px,4fr) 8fr;
gap:clamp(1.5rem,3.5vw,3.25rem); align-items:start; }
.tour-steps{ position:relative; min-width:0; }
.tour-steps::before{ content:""; position:absolute; left:5px; top:36px; bottom:36px;
width:1px; background:var(--d-hairline-strong); }
.tour-step{ position:relative; min-height:min(66vh,600px); display:flex; flex-direction:column;
justify-content:center; padding:var(--space-lg) 0 var(--space-lg) 1.9rem;
opacity:.4; transition:opacity var(--dur-slow) var(--ease); }
.tour-step::before{ content:""; position:absolute; left:0; top:50%;
translate:0 -50%; width:11px; height:11px; border-radius:50%;
background:var(--hero-g2); border:2px solid var(--d-hairline-strong);
transition:background var(--dur-slow) var(--ease),
border-color var(--dur-slow) var(--ease); }
.tour-step.is-current{ opacity:1; }
.tour-step.is-current::before{ background:var(--mint); border-color:var(--mint); }
html:not(.js) .tour-step{ opacity:1; }
.tour-step .idx{ font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:.06em; color:var(--d-muted); margin-bottom:.55rem; }
.tour-step h3{ font-size:var(--text-xl); line-height:var(--leading-heading);
color:var(--white); }
.tour-step p{ margin-top:.6rem; color:var(--d-sec); font-size:var(--text-sm);
max-inline-size:38ch; }
.tour-step .fact{ margin-top:.9rem; font:600 var(--text-2xs)/1.5 var(--font-mono);
color:var(--mint); }
.tour-stage{ position:sticky; top:calc(var(--navh) + clamp(1.5rem,5vh,3rem)); }
.stage-wrap{ position:relative; }
.stage-screens{ position:relative; aspect-ratio:860/410; background:var(--hero-g2); }
.stage-shot{ position:absolute; inset:0; opacity:0;
transition:opacity var(--dur-slow) var(--ease),
transform var(--dur-slow) var(--ease); }
html.js.motion .stage-shot{ transform:translateY(10px); }
.stage-shot.is-active{ opacity:1; transform:none; }
.stage-idx{ position:absolute; right:.8rem; bottom:.6rem; z-index:4;
font:600 var(--text-2xs)/1 var(--font-mono); color:var(--d-sec);
background:color-mix(in oklab, var(--hero-g1) 86%, transparent);
border:1px solid var(--d-hairline); border-radius:var(--radius-pill);
padding:.22rem .65rem; font-variant-numeric:tabular-nums; }
.stage-phone{ position:absolute; left:-1.9rem; bottom:-3.4rem; z-index:6;
width:clamp(104px,9vw,124px); display:none; }
@media (min-width:1100px){ .stage-phone{ display:block; } }
.stage-phone .ph-cap{ margin-top:.45rem; text-align:center;
font:500 9.5px/1.4 var(--font-mono); color:var(--d-muted); }
.tour-step .step-shot{ display:none; margin:0; }
@media (max-width:900px){
.tour{ grid-template-columns:1fr; }
.tour-stage{ display:none; }
.tour-steps::before{ top:24px; bottom:24px; }
.tour-step{ min-height:0; opacity:1; padding-block:var(--space-md); }
.tour-step::before{ top:1.9rem; translate:none; }
.tour-step .step-shot{ display:block; margin-top:var(--space-sm); }
}
/* ============================================================================
8 · CARDS & MEDIA FRAMES
============================================================================ */
.card{ border-radius:var(--radius-lg); }
.card--paper{ background:var(--surface); border:1px solid var(--border-hairline);
box-shadow:var(--shadow-md); padding:clamp(1.3rem,3vw,2rem); }
.card--forest{ background:var(--green-900);
border:1px solid color-mix(in oklab, var(--mint) 30%, transparent);
color:var(--d-text); padding:clamp(1.3rem,3vw,2rem);
--text-strong:var(--white); --text-body:var(--d-text);
--text-secondary:var(--d-sec); --text-muted:var(--d-muted);
--border-hairline:var(--d-hairline); --brand-primary:var(--mint); }
/* Figcard = ALWAYS paper: token reset keeps it a light ledger even on forest
grounds (the root-frozen brand primary replaces the mockups' inline value). */
.figcard{ background:var(--surface); border:1px solid var(--ink-200);
border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
padding:1.1rem 1.25rem; font-variant-numeric:tabular-nums;
--text-strong:var(--ink-900); --text-body:var(--ink-800);
--text-secondary:var(--ink-600); --text-muted:var(--ink-500);
--border-hairline:var(--ink-200); --border-default:var(--ink-300);
--brand-primary:var(--brand-primary-root);
--fx-rule-sum:var(--brand-primary-root); --fx-src:var(--green-700);
color:var(--ink-800); }
.sec--forest .figcard, .sec--forest-flat .figcard{ box-shadow:var(--shadow-lg); }
.figcard .fc-kick{ display:flex; justify-content:space-between; align-items:center;
gap:.8rem; font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.07em;
text-transform:uppercase; color:var(--text-muted); margin-bottom:.7rem; }
.figcard .fc-kick .tag{ color:var(--green-700); letter-spacing:.03em;
text-transform:none; }
/* Browser + phone media frames (radius-xl allowed: media only) */
.frame{ border-radius:var(--radius-xl); overflow:hidden; background:var(--surface);
border:1px solid var(--border-hairline); box-shadow:var(--shadow-lg); }
.frame-bar{ display:flex; align-items:center; gap:.65rem; padding:.5rem .8rem;
background:var(--surface-alt); border-bottom:1px solid var(--border-hairline);
contain:inline-size; min-width:0; }
.frame-dots{ display:flex; gap:5px; }
.frame-dots i{ inline-size:8px; block-size:8px; border-radius:50%; background:var(--ink-300); }
.frame-url{ font-family:var(--font-mono); font-size:var(--text-2xs);
color:var(--text-muted); background:var(--surface);
border:1px solid var(--border-hairline); border-radius:var(--radius-pill);
padding:.12rem .8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
min-width:0; flex:0 1 auto; }
.sec--forest .frame, .sec--forest-flat .frame{
border-color:var(--d-hairline-strong); box-shadow:0 14px 34px -10px rgba(0,0,0,.5); }
.sec--forest .frame-bar, .sec--forest-flat .frame-bar{
background:var(--d-inset); border-bottom-color:var(--d-hairline); }
.sec--forest .frame-dots i, .sec--forest-flat .frame-dots i{
background:color-mix(in oklab, var(--mint) 30%, var(--hero-g2)); }
.sec--forest .frame-url, .sec--forest-flat .frame-url{
background:var(--hero-g2); border-color:var(--d-hairline); color:var(--d-muted); }
.phone{ border-radius:26px; border:1px solid var(--border-hairline);
background:var(--ink-900); padding:8px; box-shadow:var(--shadow-lg); margin:0; }
.sec--forest .phone, .sec--forest-flat .phone{
border-color:var(--d-hairline-strong); background:var(--ink-950);
box-shadow:0 14px 34px -10px rgba(0,0,0,.5); }
/* ============================================================================
9 · PRIMITIVES — Pulsstrich/Ledger grammar + Schaubild node cards
============================================================================ */
/* Lohn-Ledger rows (Rechenweg) */
.lrow{ display:flex; justify-content:space-between; gap:.8rem;
font:500 var(--text-xs)/1.9 var(--font-mono); color:var(--text-body); }
.lrow > span:last-child{ white-space:nowrap; }
.lrow .lbl small{ color:var(--text-muted); font-size:.82em; }
.lrow .lbl .para{ color:var(--fx-src); }
.lrow.sub{ color:var(--text-secondary); }
.lrow.sum{ font-weight:700; color:var(--text-strong); }
.l-sumrule{ border:0; height:0; margin:.35rem 0;
border-top:3px double var(--fx-rule-sum); }
.l-hair{ border:0; height:0; margin:.3rem 0;
border-top:1px solid var(--border-hairline); }
/* Pulsemap mini (figcard-scale heatmap) */
.pmap{ display:grid; grid-template-columns:auto 1fr; gap:.4rem .7rem;
align-items:center; }
.pmap .pm-name{ font:600 var(--text-2xs)/1 var(--font-mono);
color:var(--text-secondary); }
.pmap .pm-row{ display:grid; grid-template-columns:repeat(14,1fr); gap:3px; }
.pmap .c{ aspect-ratio:1; border-radius:3px; background:var(--green-100); }
.pmap .c.ok{ background:var(--green-400); }
.pmap .c.hi{ background:var(--amber); }
.pmap .c.lo{ background:var(--green-200); }
.pmap .c.we{ background:var(--ink-100); }
.pmap .c.ab{ background:repeating-linear-gradient(-45deg,
var(--green-100) 0 3px, var(--green-300) 3px 5px); }
.pmap .c.td{ box-shadow:inset 0 0 0 2px var(--green-700); background:var(--green-50); }
.pmap-legend{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.8rem;
font:500 9.5px/1 var(--font-mono); color:var(--text-muted); }
.pmap-legend i{ display:inline-block; width:9px; height:9px; border-radius:2px;
margin-right:.3rem; vertical-align:-1px; }
/* Zeiterfassung mini ("Dein Tag") */
.ztag{ display:flex; align-items:center; justify-content:space-between; gap:.7rem;
padding-block:.55rem; border-bottom:1px solid var(--border-hairline);
font:500 var(--text-xs)/1.4 var(--font-mono); }
.ztag:last-of-type{ border-bottom:0; }
.ztag .zt-chip{ font:600 10px/1 var(--font-mono); letter-spacing:.03em;
color:var(--green-800); background:var(--green-50);
border:1px solid var(--green-200); border-radius:var(--radius-pill);
padding:.3rem .6rem; }
.ztag .zt-time{ color:var(--text-secondary); }
.ztag .zt-val{ font-weight:600; color:var(--text-strong); }
.zt-live{ display:inline-flex; align-items:center; gap:.4rem;
color:var(--green-700); font-weight:600; }
.zt-live svg{ width:16px; height:8px; }
.zt-live svg path{ fill:none; stroke:var(--green-500); stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round; }
/* Genehmigungs-Queue mini */
.qrow{ display:grid; grid-template-columns:minmax(0,1fr) auto;
gap:.15rem .8rem; align-items:center; padding-block:.6rem;
border-bottom:1px solid var(--border-hairline);
font:500 var(--text-xs)/1.45 var(--font-mono); }
.qrow:last-of-type{ border-bottom:0; }
.qrow .qn{ grid-area:1 / 1; font-weight:600; color:var(--text-strong); }
.qrow .qs{ grid-area:2 / 1; color:var(--text-secondary); font-size:var(--text-2xs); }
.qrow .qs .okm{ color:var(--green-700); font-weight:600; }
.qrow .qs .para{ color:var(--fx-src); }
.qrow .qa{ grid-area:1 / 2 / span 2 / 3; align-self:center; }
.qbtn{ display:inline-block; font:600 10px/1 var(--font-mono); letter-spacing:.02em;
border:1px solid var(--green-200); color:var(--green-800);
background:var(--green-50); border-radius:var(--radius-pill);
padding:.35rem .7rem; white-space:nowrap; }
.qbtn--warn{ border-color:color-mix(in oklab, var(--amber) 55%, var(--white));
background:color-mix(in oklab, var(--amber) 16%, var(--white));
color:var(--warning); }
/* Dark inset node card (Schaubild result/intake nodes — hairline, never glass) */
.dnode{ position:absolute; background:var(--d-inset);
border:1px solid var(--d-hairline); border-radius:var(--radius-md);
padding:.6rem .75rem; font-variant-numeric:tabular-nums;
box-shadow:0 10px 26px -14px rgba(4,14,9,.6); }
.nd-kick{ display:block; font:600 9.5px/1 var(--font-mono);
letter-spacing:.08em; text-transform:uppercase; color:var(--d-muted);
margin-bottom:.3rem; }
.nd-main{ display:block; font:600 13px/1.3 var(--font-mono); color:var(--d-fig); }
.nd-sub{ display:block; font:500 10.5px/1.4 var(--font-mono);
color:var(--d-sec); margin-top:.15rem; }
/* Result rows + Summenstrich + amber seal (Schaubild grammar) */
.rr{ display:flex; justify-content:space-between; gap:.8rem;
font:500 11px/1.75 var(--font-mono); color:var(--d-sec); white-space:nowrap; }
.rr .ok{ color:var(--mint); }
.rr .stf{ color:var(--d-muted); font-size:8.5px; letter-spacing:.01em; }
.rr-sum{ font-weight:700; color:var(--white); font-size:12.5px; margin-top:.15rem; }
.rr-sum .ok{ color:var(--white); }
.b-sum{ position:relative; height:6px; margin:.3rem 0 .4rem; }
.b-sum::before,.b-sum::after{ content:""; position:absolute; left:0; right:0;
background:var(--mint); transform-origin:left center; }
.b-sum::before{ top:0; height:1px; }
.b-sum::after{ bottom:0; height:2px; }
.ack{ position:absolute; inset:-5px -3px; border-radius:5px; pointer-events:none;
opacity:0; box-shadow:0 0 16px 2px color-mix(in oklab, var(--mint) 40%, transparent); }
.rr-final{ display:flex; align-items:center; justify-content:space-between;
gap:.35rem; flex-wrap:wrap; white-space:nowrap; }
.rr-final .fin{ font:600 10px/1 var(--font-mono); color:var(--mint); }
.b-seal{ font:600 9.5px/1 var(--font-mono); letter-spacing:.04em;
color:var(--ink-900); background:var(--amber); padding:.35rem .5rem;
border-radius:4px; }
.seal-row{ display:flex; gap:.4rem; margin-top:.45rem; }
/* Leader lines + §-stamp + travelling record (Schaubild annotations) */
.lk-lead{ position:absolute; width:1px; background:var(--d-hairline-strong); }
.lk-lead::after{ content:""; position:absolute; left:50%; bottom:-2px;
width:5px; height:5px; transform:translateX(-50%) rotate(45deg);
background:var(--mint-calm); }
.lk-lead--up::after{ bottom:auto; top:-2px; }
.lk-stamp{ position:absolute; transform:translateX(-50%);
display:inline-flex; align-items:center; gap:.45rem;
border:1px solid var(--mint); border-radius:var(--radius-sm);
padding:.4rem .6rem; background:color-mix(in oklab, var(--mint) 8%, transparent); }
.lk-stamp .sp-mark{ display:grid; place-items:center; width:18px; height:18px;
border:1.5px solid var(--mint); border-radius:4px;
font:700 12px/1 var(--font-mono); color:var(--mint); }
.lk-stamp .sp-txt{ font:600 10.5px/1 var(--font-mono); letter-spacing:.03em;
color:var(--mint); white-space:nowrap; }
.lk-stamp::after{ content:""; position:absolute; inset:-7px;
border:1px solid var(--mint); border-radius:calc(var(--radius-sm) + 6px);
opacity:0; pointer-events:none; }
.lk-rec{ offset-rotate:0deg; offset-distance:100%; }
.lk-rec .rec-tag{ font:600 12px/1 var(--font-mono); fill:var(--d-sec);
text-anchor:middle; letter-spacing:.02em; }
.lk-rec .raw{ opacity:0; }
.lk-rec .raw .ring{ fill:none; stroke:var(--mint); stroke-width:2; }
.lk-rec .done .disc{ fill:var(--mint); }
.lk-rec .done .chk{ font:700 11px/1 var(--font-sans); fill:var(--ink-900);
text-anchor:middle; }
.lk-rec .done .rec-tag{ fill:var(--mint); text-anchor:end; }
/* ============================================================================
10 · TABLES — Preisvergleich (paper card, warm zebra, promoted hero column)
============================================================================ */
.cmp-wrap{ overflow-x:auto; margin-top:clamp(1.5rem,3vw,2rem); }
.cmp{ width:100%; border-collapse:separate; border-spacing:0; min-width:760px;
background:var(--white); border:1px solid var(--border-hairline);
border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
font-size:var(--text-sm); }
.cmp th,.cmp td{ text-align:center; padding:.7rem 1rem; border:0;
vertical-align:middle; }
.cmp th:first-child,.cmp td:first-child{ text-align:left;
padding-left:clamp(1rem,2vw,1.4rem); }
.cmp thead th{ font:600 var(--text-2xs)/1.3 var(--font-mono);
letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted);
padding-block:1.05rem .85rem;
border-bottom:1px solid var(--border-default); }
.cmp tbody tr.zeb td{
background:color-mix(in oklab, var(--green-50) 55%, var(--white)); }
.cmp tbody td{ color:var(--text-body); font-variant-numeric:tabular-nums; }
.cmp tbody td:first-child{ color:var(--text-strong); }
.cmp td.num{ font-family:var(--font-mono); font-size:var(--text-xs);
font-variant-numeric:tabular-nums; }
.cmp td small{ display:block; color:var(--text-muted); font-size:.8em;
font-family:var(--font-sans); font-weight:400; }
.cmp thead th:first-child{ border-top-left-radius:var(--radius-lg); }
.cmp thead th:last-child{ border-top-right-radius:var(--radius-lg); }
.cmp tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--radius-lg); }
.cmp tbody tr:last-child td:last-child{ border-bottom-right-radius:var(--radius-lg); }
.cmp .hl{ background:color-mix(in oklab, var(--mint) 16%, var(--white));
border-inline:1px solid var(--card-edge-mint); }
.cmp tbody tr.zeb .hl{
background:color-mix(in oklab, var(--mint) 25%, var(--white)); }
.cmp thead .hl{ color:var(--green-900); font-weight:700;
border-top:3px double var(--fx-rule-sum);
background:color-mix(in oklab, var(--mint) 22%, var(--white)); }
.cmp tbody tr:last-child .hl{ border-bottom:3px double var(--fx-rule-sum); }
.cmp .hl.num strong{ color:var(--green-900); }
.cmp-us{ display:inline-flex; align-items:center; gap:.5rem; }
.cmp-us svg{ width:24px; height:10px; flex:0 0 auto; }
.cmp-us svg path{ fill:none; stroke:var(--brand-primary); stroke-width:2.2;
stroke-linecap:round; stroke-linejoin:round; }
.cmp .chk{ display:inline-grid; place-items:center; width:20px; height:20px;
border-radius:50%; color:var(--green-700);
box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--green-500) 48%, transparent);
font:700 11px/1 var(--font-sans); vertical-align:-5px; }
.cmp .hl .chk{ background:var(--green-700); color:var(--white); box-shadow:none; }
.cmp .x{ color:var(--ink-400); font-weight:500; }
.cmp .part{ display:inline-block; color:var(--accent-warm-text);
font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.02em;
padding:.3rem .55rem; border-radius:var(--radius-pill);
background:color-mix(in oklab, var(--orange-500) 10%, var(--white)); }
.cmp tr.grp td{ text-align:left; padding-block:.85rem .65rem;
background:color-mix(in oklab, var(--green-900) 6%, var(--white));
border-top:1px solid var(--border-hairline); }
.cmp tr.grp .g-in{ display:flex; align-items:baseline; gap:.8rem 1.4rem;
justify-content:space-between; flex-wrap:wrap; }
.cmp tr.grp .g-kick{ display:inline-flex; align-items:center; gap:.55rem;
font:600 var(--text-2xs)/1 var(--font-mono);
letter-spacing:var(--tracking-caps); text-transform:uppercase;
color:var(--green-800); white-space:nowrap; }
.cmp tr.grp .g-kick::before{ content:""; width:3px; height:14px; flex:0 0 auto;
background:var(--brand-primary); border-radius:2px; align-self:center; }
.cmp tr.grp .g-note{ font:500 var(--text-2xs)/1.4 var(--font-mono);
color:var(--text-muted); text-align:right; }
.cmp tr.sum td{ padding-block:.9rem 1rem;
border-top:3px double var(--fx-rule-sum); }
.cmp tr.sum .hl strong{ display:block; color:var(--green-900);
font-family:var(--font-mono); font-size:var(--text-xs); }
.cmp-note{ text-align:center; margin-top:1.1rem;
font:500 var(--text-2xs)/1.6 var(--font-mono); color:var(--text-muted); }
@media (max-width:700px){
.cmp{ min-width:660px; }
.cmp thead th:first-child,
.cmp tbody tr:not(.grp) td:first-child{ position:sticky; left:0; z-index:2;
background:var(--white); min-width:136px; max-width:136px;
box-shadow:1px 0 0 var(--border-hairline); }
.cmp tbody tr.zeb td:first-child{
background:color-mix(in oklab, var(--green-50) 55%, var(--white)); }
.cmp th.hl,.cmp td.hl{ position:sticky; left:136px; z-index:2; }
.cmp tr.grp .g-note{ display:none; }
.cmp tr.grp .g-kick{ position:sticky; left:1rem; }
}
/* ============================================================================
11 · CSS-APP-MOCKUPS — vector-sharp product screens (NEVER raster).
Two namespaces, both fully token-driven:
.px-fit/.pxs/.px-* — feature-page screens (Sticky-Produkttour stages)
.pbx-fit/.pbx-stage — homepage Produkt-Laufband stages (.hx-*, .fx-ov2-*)
Each stage is native 860×410 (phone 214×…) and scales losslessly via
transform:scale(); a page script sets the exact scale (clientWidth/860).
Both stages RESET the ground-remapped tokens (figcard precedent) so screens
stay a light app surface on forest grounds.
============================================================================ */
/* ── 11a · .px namespace (feature pages / Produkttour) ─────────────────── */
.px-fit{ position:relative; width:100%; aspect-ratio:860/410; overflow:hidden;
background:var(--app-canvas); --pxs:.5; }
@media (min-width:901px){ .px-fit{ --pxs:.66; } }
@media (min-width:1080px){ .px-fit{ --pxs:.75; } }
@media (min-width:1240px){ .px-fit{ --pxs:.83; } }
@media (max-width:900px){ .px-fit{ --pxs:.78; } }
@media (max-width:700px){ .px-fit{ --pxs:.5; } }
@media (max-width:430px){ .px-fit{ --pxs:.36; } }
.px-fit--phone{ aspect-ratio:214/430; --pxs:.52; }
.stage-shot .px-fit{ position:absolute; inset:0; aspect-ratio:auto; height:100%; }
.phone .px-fit{ border-radius:19px; }
/* stage (token reset; reconciliations: info-blue → plum accent, urlaub-teal →
green-500 ramp — the DS carries no standalone blue/teal, deny-list) */
.pxs{
--x-t1:var(--ink-900); --x-t2:var(--ink-600); --x-t3:var(--ink-500);
--x-faint:var(--ink-400);
--x-hair:var(--ink-200); --x-border:var(--ink-300);
--x-card:var(--white); --x-canvas:var(--app-canvas); --x-chrome:var(--surface-alt);
--x-pri:var(--brand-primary-root);
--x-pri-text:var(--green-700);
--x-mintfill:color-mix(in oklab, var(--mint) 30%, var(--white));
--x-ok-bg:var(--success-bg); --x-ok-ink:var(--green-800);
--x-warn-bg:var(--warning-bg); --x-warn-ink:var(--warning);
--x-amber:var(--amber); --x-err:var(--error);
--x-info:var(--plum-600);
--x-info-fill:color-mix(in oklab, var(--plum-500) 14%, var(--white));
--x-teal:var(--green-500);
--x-teal-fill:color-mix(in oklab, var(--green-500) 18%, var(--white));
position:absolute; left:50%; top:50%; width:860px; height:410px;
transform:translate(-50%,-50%) scale(var(--pxs,.5));
transform-origin:center center;
font-family:var(--font-sans); font-size:15px; line-height:1.4;
color:var(--x-t2); text-align:left; background:var(--x-canvas);
display:flex; font-variant-numeric:tabular-nums; }
.pxs, .pxs *, .pxs *::before, .pxs *::after{ box-sizing:border-box; }
.pxs p{ margin:0; }
.pxs--phone{ width:214px; height:430px; display:flex; flex-direction:column;
background:var(--x-card); padding:14px 12px 8px; }
.px-side{ flex:0 0 148px; display:flex; flex-direction:column; gap:2px;
background:var(--x-chrome); border-right:1px solid var(--x-hair);
padding:10px 8px; }
.px-logo{ display:flex; align-items:center; gap:6px;
font:800 12px/1 var(--font-sans); color:var(--x-t1); margin:0 5px 8px; }
.px-nav{ display:flex; align-items:center; gap:6px; padding:4px 7px;
border-radius:7px; font:600 10.5px/1.4 var(--font-sans); color:var(--x-t2);
white-space:nowrap; }
.px-nav svg{ width:12px; height:12px; flex:0 0 auto; }
.px-nav.active{ background:var(--x-mintfill); color:var(--x-pri-text); }
.px-navsep{ height:1px; background:var(--x-hair); margin:4px 5px; flex:0 0 auto; }
.px-navnum{ margin-left:auto; width:12px; height:12px; border-radius:var(--radius-pill);
background:var(--x-pri); color:var(--white); font-style:normal;
font:800 7px/1 var(--font-sans); display:inline-flex; align-items:center;
justify-content:center; flex:0 0 auto; }
.px-main{ flex:1 1 auto; min-width:0; overflow:hidden; display:flex;
flex-direction:column; gap:8px; padding:12px 14px; }
.px-h1{ font:800 19px/1.15 var(--font-display); letter-spacing:-.01em; color:var(--x-t1); }
.px-sub{ font-size:10.5px; color:var(--x-t3); margin-top:2px; }
.px-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.px-topbar{ display:flex; align-items:center; justify-content:flex-end; gap:7px; flex:0 0 auto; }
.px-pill-amber{ font:700 9px/1.4 var(--font-sans); color:var(--x-warn-ink);
background:var(--x-warn-bg);
border:1px solid color-mix(in oklab, var(--x-amber) 50%, transparent);
border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; }
.px-bell{ position:relative; width:20px; height:20px; flex:0 0 auto;
border:1px solid var(--x-hair); border-radius:6px; background:var(--x-card);
display:inline-flex; align-items:center; justify-content:center; color:var(--x-t2); }
.px-bell i{ position:absolute; top:-4px; right:-4px; min-width:10px; height:10px;
padding:0 2px; border-radius:var(--radius-pill); background:var(--x-err);
color:var(--white); font-style:normal; font:800 6.5px/1 var(--font-sans);
display:flex; align-items:center; justify-content:center; }
.px-user{ font:600 9px/1.4 var(--font-sans); color:var(--x-t2); white-space:nowrap; }
.px-card{ background:var(--x-card); border:1px solid var(--x-hair);
border-radius:var(--radius-lg); padding:8px 11px; box-shadow:var(--shadow-xs); min-width:0; }
.px-cardhead{ display:flex; align-items:center; justify-content:space-between;
gap:8px; margin-bottom:6px; }
.px-cardhead b{ font:700 11.5px/1.3 var(--font-sans); color:var(--x-t1); }
.px-kpis{ display:grid; gap:8px; }
.px-kpi{ background:var(--x-card); border:1px solid var(--x-hair);
border-left:3px solid var(--x-pri); border-radius:var(--radius-md);
padding:6px 9px; min-width:0; }
.px-kpi.warn{ border-left-color:var(--x-amber); }
.px-kpi .lbl{ display:block; font:600 9.5px/1.3 var(--font-sans); color:var(--x-t2); }
.px-kpi b{ display:block; font:800 20px/1.2 var(--font-sans); color:var(--x-t1);
letter-spacing:-.01em; white-space:nowrap; }
.px-kpi > span:last-child{ display:block; font-size:8.5px; color:var(--x-t3); line-height:1.3; }
.px-btn{ display:inline-flex; align-items:center; gap:4px; font:700 10px/1.4 var(--font-sans);
padding:4px 9px; border-radius:7px; border:1px solid var(--x-border);
background:var(--x-card); color:var(--ink-700); white-space:nowrap; flex:0 0 auto; }
.px-btn.pri{ background:var(--x-pri); border-color:var(--x-pri); color:var(--white); }
.px-badge{ font:700 9px/1.4 var(--font-sans); padding:2px 7px;
border-radius:var(--radius-pill); white-space:nowrap; flex:0 0 auto; }
.px-badge.ok{ background:var(--x-ok-bg); color:var(--x-ok-ink); }
.px-badge.warn{ background:var(--x-warn-bg); color:var(--x-warn-ink); }
.px-badge.muted{ background:var(--ink-100); color:var(--x-t3); }
.px-badge.mint{ background:var(--x-mintfill); color:var(--x-pri-text); }
.px-note{ font-size:8.5px; color:var(--x-t3); line-height:1.4; }
.px-hero{ display:flex; align-items:center; gap:16px;
background:linear-gradient(115deg, var(--x-mintfill) 0%, var(--x-card) 58%);
border:1px solid var(--x-hair); border-radius:var(--radius-lg);
padding:9px 14px; box-shadow:var(--shadow-xs); min-width:0; }
.px-kicker{ font:700 8.5px/1.3 var(--font-sans); letter-spacing:.12em;
text-transform:uppercase; color:var(--x-t3); }
.px-hero-h{ font:700 22px/1.12 var(--font-display); letter-spacing:-.01em;
color:var(--x-t1); margin:2px 0 3px; }
.px-hero-h em{ font-style:normal; color:var(--x-pri-text); }
.px-hero-line{ font-size:10.5px; color:var(--x-t2); line-height:1.45; }
.px-chip{ display:inline-flex; align-items:center; gap:5px; margin-top:6px;
font:700 9px/1.4 var(--font-sans); color:var(--x-pri-text); background:var(--x-card);
border:1px solid var(--x-hair); border-radius:var(--radius-pill);
padding:2px 8px; white-space:nowrap; }
.px-chip i{ width:6px; height:6px; border-radius:50%; background:var(--green-400); }
.px-ready{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
text-align:center; gap:3px; max-width:175px; }
.px-ready .lbl{ font:700 7.5px/1.35 var(--font-sans); letter-spacing:.09em;
text-transform:uppercase; color:var(--x-t3); }
.px-ready .val{ font-size:8.5px; color:var(--x-t2); line-height:1.35; }
.px-ring{ position:relative; width:62px; height:62px; border-radius:50%;
background:conic-gradient(var(--x-pri) calc(var(--p,44) * 1%), var(--ink-200) 0); }
.px-ring::after{ content:''; position:absolute; inset:6px; border-radius:50%;
background:var(--x-card); }
.px-ring b{ position:absolute; inset:0; z-index:1; display:flex; align-items:center;
justify-content:center; font:800 14.5px/1 var(--font-sans); color:var(--x-t1); }
.px-trow{ display:flex; align-items:center; gap:8px; padding:6px 8px;
border:1px solid var(--x-hair); border-radius:var(--radius-md);
background:var(--x-card); min-width:0; }
.px-trow.warn{ border-color:color-mix(in oklab, var(--x-amber) 50%, transparent);
background:color-mix(in oklab, var(--x-amber) 7%, var(--white)); }
.px-trow .grow{ flex:1 1 auto; min-width:0; }
.px-trow b{ display:block; font:700 11px/1.3 var(--font-sans); color:var(--x-t1); }
.px-trow small{ display:block; font-size:9px; color:var(--x-t3); line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.px-av{ width:20px; height:20px; border-radius:50%; flex:0 0 auto;
background:var(--x-pri); color:var(--white); font:800 8px/1 var(--font-sans);
font-style:normal; display:inline-flex; align-items:center; justify-content:center; }
.px-steps{ display:flex; gap:5px; flex:0 0 auto; }
.px-step{ font:700 9.5px/1.4 var(--font-sans); padding:3px 9px;
border-radius:var(--radius-pill); border:1px solid var(--x-hair);
background:var(--x-card); color:var(--x-t3); white-space:nowrap; }
.px-step.done{ background:var(--green-50);
border-color:color-mix(in oklab, var(--x-pri) 35%, transparent); color:var(--x-pri-text); }
.px-step.active{ background:var(--x-pri); border-color:var(--x-pri); color:var(--white); }
.px-lrow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
font:500 10.5px/1.9 var(--font-mono); color:var(--ink-800); }
.px-lrow .para{ color:var(--x-pri-text); }
.px-lrow small{ color:var(--x-t3); font-size:.82em; }
.px-lrow > span:last-child{ white-space:nowrap; }
.px-lrow.sub{ color:var(--x-t2); }
.px-lrow.sum{ font-weight:700; color:var(--x-t1); font-size:11.5px; }
.px-sumrule{ border:0; height:0; margin:4px 0; border-top:3px double var(--x-pri); }
.px-hairrule{ border:0; height:0; margin:3px 0; border-top:1px solid var(--x-hair); }
.px-sumrow{ display:flex; align-items:baseline; justify-content:space-between;
gap:10px; font:500 10.5px/1.7 var(--font-mono); color:var(--x-t2); padding:2px 0; }
.px-sumrow b{ font:700 11.5px/1.5 var(--font-mono); color:var(--x-t1); white-space:nowrap; }
.px-sumrow.total{ border-top:3px double var(--x-pri); margin-top:3px; padding-top:5px; }
.px-sumrow.total b{ font-size:12.5px; color:var(--x-pri-text); }
.px-seal{ font:600 9.5px/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-900);
background:var(--x-amber); padding:4px 6px; border-radius:4px; flex:0 0 auto; }
.px-check{ display:flex; align-items:center; gap:8px; padding:5px 8px;
border:1px solid var(--x-hair); border-radius:var(--radius-md); }
.px-check > span:nth-child(2){ flex:1 1 auto; min-width:0; }
.px-check b{ display:block; font:700 10.5px/1.3 var(--font-sans); color:var(--x-t1); }
.px-check small{ display:block; font-size:8.5px; color:var(--x-t3); line-height:1.3; }
.px-dot{ width:16px; height:16px; border-radius:50%; flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center;
font:800 9px/1 var(--font-sans); }
.px-dot.ok{ background:var(--x-ok-bg); color:var(--x-ok-ink); }
.px-pm{ border:1px solid var(--x-hair); border-radius:var(--radius-lg);
background:var(--x-card); overflow:hidden; box-shadow:var(--shadow-xs); }
.px-pmhead, .px-pmrow{ display:flex; align-items:stretch; }
.px-pmhead{ background:var(--x-chrome); border-bottom:1px solid var(--x-hair); height:24px; }
.px-pmrow{ border-top:1px solid var(--ink-100); height:32px; }
.px-pmrow:first-of-type{ border-top:0; }
.px-pm .n{ flex:0 0 150px; min-width:0; display:flex; align-items:center;
gap:6px; padding:0 5px 0 9px; }
.px-pmhead .n{ font:700 8.5px/1 var(--font-sans); color:var(--x-t3); }
.px-pm .n .px-av{ width:17px; height:17px; font-size:7px; }
.px-pm .n .nn{ min-width:0; }
.px-pm .n b{ display:block; font:700 9.5px/1.15 var(--font-sans); color:var(--x-t1);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.px-pm .n small{ display:block; font-size:7.5px; color:var(--x-t3); line-height:1.2;
white-space:nowrap; }
.px-pmhead .d{ flex:1 1 0; min-width:0; display:flex; align-items:center;
justify-content:center; font:700 8.5px/1 var(--font-sans); color:var(--x-t3); }
.px-pmhead .d.we{ color:var(--x-faint); font-weight:600; }
.px-pmhead .d.today i{ width:16px; height:16px; border-radius:50%;
background:var(--x-pri); color:var(--white); font-style:normal;
font:800 8px/1 var(--font-sans); display:inline-flex; align-items:center;
justify-content:center; }
.px-pm .s{ flex:0 0 52px; display:flex; align-items:center; justify-content:flex-end;
padding-right:9px; font:700 9px/1 var(--font-mono); color:var(--x-t1); white-space:nowrap; }
.px-pm .s.first{ border-left:1px solid var(--x-hair); }
.px-pmhead .s{ color:var(--x-t3); font:700 8.5px/1 var(--font-sans); }
.px-pm .s.soll{ color:var(--x-t3); font-weight:600; }
.px-pm .s.pos{ color:var(--x-pri-text); }
.px-pm .s.neg{ color:var(--x-err); }
.px-c{ flex:1 1 0; min-width:0; margin:3px 1.5px; border-radius:5px;
display:flex; align-items:center; justify-content:center;
font:700 8.5px/1 var(--font-mono); color:var(--x-faint); background:var(--x-canvas); }
.px-c.ap{ background:color-mix(in oklab, var(--x-pri) 12%, var(--white)); color:var(--x-pri-text); }
.px-c.su{ background:var(--x-info-fill); color:var(--ink-800); position:relative;
box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--x-info) 35%, transparent); }
.px-c.su::after{ content:''; position:absolute; top:2px; right:2px; width:4px;
height:4px; border-radius:50%; background:var(--x-amber); }
.px-c.dr{ background:color-mix(in oklab, var(--ink-300) 38%, var(--white)); color:var(--ink-700); }
.px-c.ot{ background:var(--x-warn-bg); color:var(--x-warn-ink); }
.px-c.re{ background:color-mix(in oklab, var(--x-err) 14%, var(--white)); color:var(--x-err); }
.px-c.k{ background:var(--x-warn-bg); color:var(--x-warn-ink); }
.px-c.u{ background:var(--x-teal-fill); color:var(--x-teal); }
.px-c.ae{ background:var(--x-teal-fill); color:var(--x-teal);
background-image:repeating-linear-gradient(135deg, transparent 0 4px,
color-mix(in oklab, var(--x-teal) 14%, transparent) 4px 7px); }
.px-c.we{ background:var(--ink-100); color:var(--x-faint); font-weight:600; }
.px-c.today{ box-shadow:inset 0 0 0 2px var(--x-pri); }
.px-leg{ display:flex; flex-wrap:wrap; gap:4px 13px;
font:500 9px/1.4 var(--font-sans); color:var(--x-t2); align-items:center; }
.px-leg i{ display:inline-block; width:8px; height:8px; border-radius:2.5px;
margin-right:4px; vertical-align:-1px; }
.px-time{ display:flex; align-items:baseline; gap:5px; }
.px-time .amount{ font:800 34px/1 var(--font-mono); letter-spacing:-.02em;
color:var(--x-pri-text); }
.px-time .unit{ font:600 13px/1 var(--font-sans); color:var(--x-pri-text); }
.px-seg{ display:flex; align-items:center; justify-content:space-between; gap:8px;
font:500 10.5px/1.4 var(--font-mono); padding:4.5px 0;
border-bottom:1px solid var(--ink-100); }
.px-seg:last-child{ border-bottom:0; }
.px-seg b{ font-weight:600; color:var(--ink-800); min-width:0; }
.px-seg b small{ display:block; font-weight:500; font-size:.78em; line-height:1.35;
color:var(--x-t3); }
.px-seg.live b, .px-seg.live b small{ color:var(--x-pri-text); }
.px-seg .val{ white-space:nowrap; font-weight:700; color:var(--x-t1); flex:0 0 auto; }
.px-seg .val.plus{ color:var(--x-pri-text); }
.px-seg .val.mut{ color:var(--x-t3); font-weight:600; }
.px-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.px-tile{ background:var(--x-card); border:1px solid var(--x-hair);
border-radius:var(--radius-md); padding:6px 4px; text-align:center; }
.px-tile b{ display:block; font:800 12px/1.3 var(--font-mono); color:var(--x-t1);
letter-spacing:-.01em; white-space:nowrap; }
.px-tile span{ font-size:8.5px; color:var(--x-t3); }
.px-p-head{ display:flex; align-items:center; justify-content:space-between;
gap:6px; margin-bottom:6px; }
.px-p-head b{ font:700 12px/1.3 var(--font-sans); color:var(--x-t1); }
.px-pill{ font:700 9px/1.4 var(--font-sans); padding:2px 8px;
border-radius:var(--radius-pill); background:var(--x-mintfill);
color:var(--x-pri-text); white-space:nowrap; }
.pxs--phone .px-time .amount{ font-size:27px; }
.pxs--phone .px-tiles{ gap:4px; margin:8px 0; }
.pxs--phone .px-tile{ padding:5px 2px; }
.pxs--phone .px-tile b{ font-size:10px; }
.pxs--phone .px-tile span{ font-size:7.5px; }
.pxs--phone .px-seg{ font-size:9.5px; padding:3.5px 0; }
.px-tabbar{ margin-top:auto; display:grid; grid-template-columns:repeat(5,1fr);
gap:1px; padding-top:6px; border-top:1px solid var(--x-hair); }
.px-tab{ display:flex; flex-direction:column; align-items:center; gap:2px;
font:600 7px/1 var(--font-sans); color:var(--x-t3); }
.px-tab svg{ width:14px; height:14px; display:block; }
.px-tab.active{ color:var(--x-pri-text); }
/* ── 11b · .pbx namespace (homepage Produkt-Laufband stages) ───────────── */
.pbx-fit{ position:relative; width:100%; aspect-ratio:860/410; --pbx-s:.5; }
.belt-item--phone .pbx-fit{ aspect-ratio:214/464; --pbx-s:.7; }
/* fail-safe scales without JS — the page script sets --pbx-s exactly */
@media (max-width:1100px){ .pbx-fit{ --pbx-s:.45; } }
@media (max-width:640px){ .pbx-fit{ --pbx-s:.34; } .belt-item--phone .pbx-fit{ --pbx-s:.5; } }
.pbx-stage{
/* DS-token remap of the live-app palette (single-author, replaces the
mockups' scoped hex): the stage resets ground-remapped tokens so screens
stay a light app surface on the forest ground. */
--brand-primary: var(--brand-primary-root);
--brand-logo: var(--green-800);
--brand-accent: var(--green-400);
--neutral-100: var(--ink-100); --neutral-200: var(--ink-200);
--neutral-300: var(--ink-300); --neutral-400: var(--ink-400);
--neutral-500: var(--ink-500); --neutral-600: var(--ink-600);
--neutral-700: var(--ink-700); --neutral-800: var(--ink-800);
--neutral-900: var(--ink-900);
--warning-border: var(--amber);
--error-border: var(--error);
--fx-red: var(--error);
--fx-light: var(--surface-alt);
--pbx-chrome: var(--surface-alt);
--pbx-mintfill: color-mix(in oklab, var(--mint) 26%, var(--white));
--pbx-warn-ink: var(--warning);
--fx-shadow: 0 18px 40px -12px rgba(16,40,24,.28), 0 6px 14px -8px rgba(0,0,0,.12);
position:absolute; left:50%; top:50%; width:860px; height:410px;
transform:translate(-50%,-50%) scale(var(--pbx-s,.5));
transform-origin:center center;
font-family:var(--font-sans); font-size:15px; line-height:1.4;
color:var(--neutral-800); text-align:left;
}
.pbx-stage, .pbx-stage *, .pbx-stage *::before, .pbx-stage *::after{ box-sizing:border-box; }
.pbx-stage--phone{ width:214px; height:464px; }
/* browser frame */
.pbx-stage .hx-browser{ position:absolute; display:flex; flex-direction:column;
background:var(--white); border:1px solid var(--fx-hairline); border-radius:14px;
overflow:hidden; box-shadow:var(--fx-shadow); }
.pbx-stage .hx-bar{ flex:0 0 auto; display:flex; align-items:center; gap:.55rem;
padding:.42rem .7rem; background:var(--pbx-chrome); border-bottom:1px solid var(--fx-hairline); }
.pbx-stage .hx-dots{ display:flex; gap:.28rem; flex:0 0 auto; }
.pbx-stage .hx-dots i{ width:8px; height:8px; border-radius:50%; }
.pbx-stage .hx-dots i:nth-child(1){ background:var(--error-border); }
.pbx-stage .hx-dots i:nth-child(2){ background:var(--warning-border); }
.pbx-stage .hx-dots i:nth-child(3){ background:var(--brand-accent); }
.pbx-stage .hx-url{ flex:0 1 auto; min-width:0; max-width:330px; background:var(--white);
border:1px solid var(--fx-hairline); border-radius:999px; font-size:.62rem;
color:var(--neutral-500); padding:.22rem .7rem;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbx-stage .hx-url b{ color:var(--fx-primary-text); font-weight:600; }
.pbx-stage .hx-body{ flex:1 1 auto; display:flex; min-height:0; }
/* app chrome: sidebar + main */
.pbx-stage .hx-side{ flex:0 0 148px; display:flex; flex-direction:column; gap:.12rem;
background:var(--pbx-chrome); border-right:1px solid var(--fx-hairline); padding:.6rem .5rem; }
.pbx-stage .hx-logo{ display:flex; align-items:center; gap:.35rem;
font-size:12px; font-weight:800; color:var(--neutral-900); margin:0 .3rem .45rem; }
.pbx-stage .hx-sect{ font-size:7.5px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--neutral-400); margin:.4rem .35rem .08rem; }
.pbx-stage .hx-nav{ display:flex; align-items:center; gap:.4rem; padding:.26rem .45rem;
border-radius:7px; font-size:10.5px; font-weight:600; color:var(--neutral-600); white-space:nowrap; }
.pbx-stage .hx-nav svg{ width:12px; height:12px; flex:0 0 auto; }
.pbx-stage .hx-nav.active{ background:var(--pbx-mintfill); color:var(--fx-primary-text); }
.pbx-stage .hx-navsep{ height:1px; background:var(--neutral-200); margin:.28rem .35rem; flex:0 0 auto; }
.pbx-stage .hx-navnum{ margin-left:auto; width:12px; height:12px; border-radius:999px; flex:0 0 auto;
background:var(--brand-primary); color:var(--white); font-style:normal;
font-size:7px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.pbx-stage .hx-main{ flex:1 1 auto; min-width:0; overflow:hidden;
display:flex; flex-direction:column; gap:.6rem; padding:.8rem .9rem; }
.pbx-stage .hx-h1{ font-size:19px; font-weight:800; color:var(--neutral-900); line-height:1.15; letter-spacing:-.01em; }
.pbx-stage .hx-sub{ font-size:10.5px; color:var(--neutral-500); margin-top:.15rem; }
/* KPI tiles */
.pbx-stage .hx-kpis{ display:grid; gap:.55rem; }
.pbx-stage .hx-kpi{ background:var(--white); border:1px solid var(--neutral-200);
border-left:3px solid var(--brand-primary); border-radius:10px;
padding:.5rem .6rem; box-shadow:var(--shadow-sm); min-width:0; }
.pbx-stage .hx-kpi.warn{ border-left-color:var(--warning-border); }
.pbx-stage .hx-kpi .lbl{ display:block; font-size:9.5px; font-weight:600; color:var(--neutral-600); }
.pbx-stage .hx-kpi b{ display:block; font-size:21px; font-weight:800; color:var(--neutral-900); line-height:1.2; }
.pbx-stage .hx-kpi > span:last-child{ display:block; font-size:8.5px; color:var(--neutral-500); line-height:1.3; }
/* cards, track, legend */
.pbx-stage .hx-card{ background:var(--white); border:1px solid var(--neutral-200);
border-radius:10px; padding:.55rem .65rem; box-shadow:var(--shadow-sm); min-width:0; }
.pbx-stage .hx-cardhead{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.45rem; }
.pbx-stage .hx-cardhead b{ font-size:11.5px; font-weight:700; color:var(--neutral-900); }
.pbx-stage .hx-track{ display:flex; height:8px; border-radius:999px; background:var(--neutral-200); overflow:hidden; margin-bottom:.4rem; }
.pbx-stage .hx-track i{ height:100%; display:block; }
.pbx-stage .hx-leg{ display:flex; flex-wrap:wrap; gap:.3rem .8rem; font-size:9px; color:var(--neutral-600); align-items:center; }
.pbx-stage .hx-leg i{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.28rem; vertical-align:0; }
.pbx-stage .hx-leg .sq{ border-radius:2.5px; width:8px; height:8px; }
.pbx-stage .hx-leg .sq.hatch{ background:repeating-linear-gradient(135deg, var(--ink-100) 0 2px, var(--ink-300) 2px 4px); }
.pbx-stage .hx-quick{ display:flex; gap:.4rem; }
.pbx-stage .hx-quick .hx-btn{ flex:1 1 0; text-align:center; }
/* badges, buttons, tag chip */
.pbx-stage .hx-badge{ font-size:9px; font-weight:700; padding:.14rem .48rem; border-radius:999px; white-space:nowrap; flex:0 0 auto; }
.pbx-stage .hx-badge.ok{ background:var(--success-bg); color:var(--brand-logo); }
.pbx-stage .hx-badge.warn{ background:var(--warning-bg); color:var(--pbx-warn-ink); }
.pbx-stage .hx-badge.muted{ background:var(--neutral-100); color:var(--neutral-500); }
.pbx-stage .hx-btn{ display:inline-block; font-size:10px; font-weight:700; padding:.32rem .6rem;
border-radius:7px; border:1px solid var(--neutral-300);
background:var(--white); color:var(--neutral-700); white-space:nowrap; flex:0 0 auto; }
.pbx-stage .hx-btn.pri{ background:var(--brand-primary); border-color:var(--brand-primary); color:var(--white); }
.pbx-stage .hx-tag{ position:absolute; z-index:5; font-size:11px; font-weight:800;
color:var(--white); background:var(--brand-logo);
padding:.32rem .7rem; border-radius:999px; box-shadow:var(--shadow-lg); white-space:nowrap; }
.pbx-stage .hx-note{ font-size:8.5px; color:var(--neutral-500); line-height:1.4; margin-top:.35rem; }
/* topbar (dashboard) */
.pbx-stage .hx-topbar{ display:flex; align-items:center; justify-content:flex-end; gap:.45rem; flex:0 0 auto; }
.pbx-stage .hx-pill-amber{ font-size:9px; font-weight:700; color:var(--pbx-warn-ink); background:var(--warning-bg);
border:1px solid color-mix(in oklab, var(--amber) 50%, transparent); border-radius:999px; padding:.2rem .55rem; white-space:nowrap; }
.pbx-stage .hx-bell{ position:relative; width:20px; height:20px; flex:0 0 auto;
border:1px solid var(--neutral-200); border-radius:6px; background:var(--white);
display:inline-flex; align-items:center; justify-content:center; color:var(--neutral-600); }
.pbx-stage .hx-bell i{ position:absolute; top:-4px; right:-4px; min-width:10px; height:10px; padding:0 2px;
border-radius:999px; background:var(--error-border); color:var(--white); font-style:normal;
font-size:6.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.pbx-stage .hx-user{ font-size:9px; font-weight:600; color:var(--neutral-600); white-space:nowrap; }
/* dashboard hero card: mint→white gradient + readiness ring */
.pbx-stage .hx-hero{ display:flex; align-items:center; gap:1rem;
background:linear-gradient(115deg, var(--pbx-mintfill) 0%, var(--white) 58%);
border:1px solid var(--fx-hairline); border-radius:12px;
padding:.55rem .85rem; box-shadow:var(--shadow-sm); min-width:0; }
.pbx-stage .hx-kicker{ font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--neutral-500); }
.pbx-stage .hx-hero-h{ font-family:var(--font-serif, Georgia, 'Times New Roman', serif);
font-size:22px; font-weight:700; color:var(--neutral-900);
line-height:1.12; letter-spacing:-.01em; margin:.15rem 0 .25rem; }
.pbx-stage .hx-hero-h em{ font-style:normal; color:var(--fx-primary-text); }
.pbx-stage .hx-hero-line{ font-size:10.5px; color:var(--neutral-600); line-height:1.45; }
.pbx-stage .hx-chip{ display:inline-flex; align-items:center; gap:.32rem; margin-top:.45rem;
font-size:9px; font-weight:700; color:var(--fx-primary-text);
background:var(--white); border:1px solid var(--fx-hairline);
border-radius:999px; padding:.18rem .55rem; white-space:nowrap; }
.pbx-stage .hx-chip i{ width:6px; height:6px; border-radius:50%; background:var(--brand-accent); }
.pbx-stage .hx-ready{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
text-align:center; gap:.25rem; max-width:175px; padding-right:.3rem; }
.pbx-stage .hx-ready .lbl{ font-size:7.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--neutral-500); line-height:1.35; }
.pbx-stage .hx-ready .val{ font-size:8.5px; color:var(--neutral-600); line-height:1.35; }
.pbx-stage .hx-bigring{ position:relative; flex:0 0 auto; width:62px; height:62px; border-radius:50%;
background:conic-gradient(var(--brand-primary) calc(var(--p, 44) * 1%), var(--neutral-200) 0); }
.pbx-stage .hx-bigring::after{ content:''; position:absolute; inset:6px; border-radius:50%; background:var(--white); }
.pbx-stage .hx-bigring b{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
font-size:14.5px; font-weight:800; color:var(--neutral-900); }
/* Lohn-Rhythmus timeline: 4 nodes on a horizontal line */
.pbx-stage .hx-tl{ position:relative; display:flex; padding-top:.1rem; }
.pbx-stage .hx-tl::before{ content:''; position:absolute; top:calc(.1rem + 5px); left:12.5%; right:12.5%;
height:2px; border-radius:1px; background:var(--neutral-200); }
.pbx-stage .hx-tlnode{ position:relative; flex:1 1 0; min-width:0;
display:flex; flex-direction:column; align-items:center; text-align:center; gap:.2rem; }
.pbx-stage .hx-tlnode i{ width:12px; height:12px; border-radius:50%; z-index:1; flex:0 0 auto;
background:var(--white); border:3px solid var(--neutral-300); }
.pbx-stage .hx-tlnode.over i{ border-color:var(--warning-border); background:var(--warning-bg); }
.pbx-stage .hx-tlnode.next i{ border-color:var(--brand-primary); background:var(--brand-primary); }
.pbx-stage .hx-tlnode b{ font-size:9.5px; font-weight:700; color:var(--neutral-800); white-space:nowrap; }
.pbx-stage .hx-tlnode small{ font-size:8.5px; color:var(--neutral-500); white-space:nowrap; }
/* steps/tabs pills */
.pbx-stage .hx-steps{ display:flex; gap:.35rem; flex:0 0 auto; }
.pbx-stage .hx-stepper{ font-size:9.5px; font-weight:700; padding:.26rem .58rem; border-radius:999px;
border:1px solid var(--neutral-200); background:var(--white); color:var(--neutral-500); white-space:nowrap; }
.pbx-stage .hx-stepper.done{ background:var(--surface-alt);
border-color:color-mix(in oklab, var(--brand-primary) 35%, transparent); color:var(--fx-primary-text); }
.pbx-stage .hx-stepper.active{ background:var(--brand-primary); border-color:var(--brand-primary); color:var(--white); }
/* check rows (Vollständigkeits-Check) */
.pbx-stage .hx-check{ display:flex; align-items:center; gap:.5rem;
padding:.34rem .5rem; border:1px solid var(--neutral-200); border-radius:9px; margin-bottom:.32rem; }
.pbx-stage .hx-check > span:nth-child(2){ flex:1 1 auto; min-width:0; }
.pbx-stage .hx-check b{ display:block; font-size:10.5px; font-weight:700; color:var(--neutral-800); }
.pbx-stage .hx-check small{ display:block; font-size:8.5px; color:var(--neutral-500); line-height:1.3; }
.pbx-stage .hx-dot{ width:16px; height:16px; border-radius:50%; flex:0 0 auto;
display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; }
.pbx-stage .hx-dot.ok{ background:var(--success-bg); color:var(--brand-logo); }
.pbx-stage .hx-dot.warn{ background:var(--warning-bg); color:var(--pbx-warn-ink); }
.pbx-stage .hx-sumrow{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
font-size:10.5px; color:var(--neutral-600); padding:.22rem 0; }
.pbx-stage .hx-sumrow b{ font-size:11.5px; font-weight:700; color:var(--neutral-900); white-space:nowrap; }
.pbx-stage .hx-sumrow.total{ border-top:1px solid var(--neutral-200); margin-top:.15rem; padding-top:.4rem; }
.pbx-stage .hx-sumrow.total b{ font-size:13px; font-weight:800; color:var(--fx-primary-text); }
/* list/table rows (Genehmigungen, Mandanten) */
.pbx-stage .hx-trow{ display:flex; align-items:center; gap:.55rem;
padding:.4rem .55rem; border:1px solid var(--neutral-200); border-radius:9px; background:var(--white); min-width:0; }
.pbx-stage .hx-trow.warn{ border-color:color-mix(in oklab, var(--amber) 50%, transparent);
background:color-mix(in oklab, var(--amber) 8%, var(--white)); }
.pbx-stage .hx-trow .grow{ flex:1 1 auto; min-width:0; }
.pbx-stage .hx-trow b{ display:block; font-size:11px; font-weight:700; color:var(--neutral-900); }
.pbx-stage .hx-trow small{ display:block; font-size:9px; color:var(--neutral-500); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbx-stage .hx-trow small em{ font-style:normal; font-weight:700; color:var(--fx-red); }
.pbx-stage .hx-av{ width:20px; height:20px; border-radius:50%; flex:0 0 auto;
background:var(--brand-primary); color:var(--white);
font-size:8px; font-weight:800; font-style:normal;
display:inline-flex; align-items:center; justify-content:center; }
/* Pulsemap heatmap: employee rows × day columns */
.pbx-stage .hx-pm{ border:1px solid var(--neutral-200); border-radius:10px; background:var(--white); overflow:hidden; box-shadow:var(--shadow-sm); }
.pbx-stage .hx-pmhead, .pbx-stage .hx-pmrow{ display:flex; align-items:stretch; }
.pbx-stage .hx-pmhead{ background:var(--pbx-chrome); border-bottom:1px solid var(--neutral-200); height:24px; }
.pbx-stage .hx-pmrow{ border-top:1px solid var(--neutral-100); height:31px; }
.pbx-stage .hx-pmrow:first-of-type{ border-top:0; }
.pbx-stage .hx-pm .n{ flex:0 0 150px; min-width:0; display:flex; align-items:center; gap:.38rem; padding:0 .3rem 0 .55rem; }
.pbx-stage .hx-pmhead .n{ font-size:8.5px; font-weight:700; color:var(--neutral-500); }
.pbx-stage .hx-pm .n .hx-av{ width:17px; height:17px; font-size:7px; }
.pbx-stage .hx-pm .n .nn{ min-width:0; }
.pbx-stage .hx-pm .n b{ display:block; font-size:9.5px; font-weight:700; color:var(--neutral-800); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbx-stage .hx-pm .n small{ display:block; font-size:7.5px; color:var(--neutral-500); line-height:1.2; white-space:nowrap; }
.pbx-stage .hx-pmhead .d{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:700; color:var(--neutral-500); }
.pbx-stage .hx-pmhead .d.we{ color:var(--neutral-400); font-weight:600; }
.pbx-stage .hx-pmhead .d.today i{ width:16px; height:16px; border-radius:50%; background:var(--brand-primary); color:var(--white); font-style:normal; font-size:8px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.pbx-stage .hx-pm .s{ flex:0 0 52px; display:flex; align-items:center; justify-content:flex-end; padding-right:.5rem; font-size:9px; font-weight:700; color:var(--neutral-800); white-space:nowrap; }
.pbx-stage .hx-pm .s.first{ border-left:1px solid var(--neutral-200); }
.pbx-stage .hx-pmhead .s{ color:var(--neutral-500); font-size:8.5px; }
.pbx-stage .hx-pm .s.soll{ color:var(--neutral-500); font-weight:600; }
.pbx-stage .hx-pm .s.pos{ color:var(--fx-primary-text); }
.pbx-stage .hx-pm .s.neg{ color:var(--fx-red); }
.pbx-stage .hx-pmc{ flex:1 1 0; min-width:0; margin:3px 1.5px; border-radius:5px;
display:flex; align-items:center; justify-content:center;
font-size:8.5px; font-weight:700; color:var(--neutral-400); }
.pbx-stage .hx-pmc.ok{ background:var(--pbx-mintfill); color:var(--fx-primary-text); }
.pbx-stage .hx-pmc.ot{ background:var(--warning-bg); color:var(--pbx-warn-ink); }
/* under-Soll: pale green ramp (DS carries no standalone blue — v9 Pulsemap-mini precedent) */
.pbx-stage .hx-pmc.lo{ background:var(--green-100); color:var(--green-800); }
.pbx-stage .hx-pmc.abs{ background:repeating-linear-gradient(135deg, var(--ink-100) 0 3px, var(--ink-200) 3px 6px); color:var(--neutral-500); }
.pbx-stage .hx-pmc.we{ background:var(--neutral-100); color:var(--neutral-400); font-weight:600; }
.pbx-stage .hx-pmc.today{ box-shadow:inset 0 0 0 2px var(--brand-primary); }
/* high-fidelity iPhone frame (fx-ov2-*): titanium bezel via ink-ramp mixes */
.pbx-stage .fx-ov2-phone{ flex:0 0 auto; width:214px; position:relative;
aspect-ratio:9 / 19.5; border-radius:44px; padding:3px;
background:linear-gradient(145deg,
color-mix(in oklab, var(--ink-400) 52%, var(--ink-950)) 0%,
color-mix(in oklab, var(--ink-400) 18%, var(--ink-950)) 26%,
color-mix(in oklab, var(--ink-400) 7%, var(--ink-950)) 52%,
color-mix(in oklab, var(--ink-400) 22%, var(--ink-950)) 78%,
color-mix(in oklab, var(--ink-400) 42%, var(--ink-950)) 100%);
box-shadow:var(--fx-shadow), inset 0 0 1px rgba(255,255,255,.4); }
.pbx-stage .fx-ov2-btn{ position:absolute; width:3px; border-radius:2px; z-index:0;
background:linear-gradient(90deg,
color-mix(in oklab, var(--ink-400) 46%, var(--ink-950)),
color-mix(in oklab, var(--ink-400) 12%, var(--ink-950))); }
.pbx-stage .fx-ov2-btn.action{ left:-2px; top:18%; height:22px; }
.pbx-stage .fx-ov2-btn.volup{ left:-2px; top:27%; height:38px; }
.pbx-stage .fx-ov2-btn.voldown{ left:-2px; top:37%; height:38px; }
.pbx-stage .fx-ov2-btn.power{ right:-2px; top:28%; height:58px; }
.pbx-stage .fx-ov2-body{ position:relative; height:100%;
background:color-mix(in oklab, var(--ink-950) 92%, transparent); border-radius:41px; padding:7px; }
.pbx-stage .fx-ov2-screen{ position:relative; height:100%; border-radius:34px; overflow:hidden;
background:var(--fx-light); display:flex; flex-direction:column; }
.pbx-stage .fx-ov2-island{ position:absolute; top:9px; left:50%; transform:translateX(-50%);
width:34%; height:19px; background:var(--ink-950); border-radius:999px; z-index:3;
box-shadow:inset 0 0 3px rgba(255,255,255,.08); }
.pbx-stage .fx-ov2-island::after{ content:''; position:absolute; right:6px; top:50%; transform:translateY(-50%);
width:9px; height:9px; border-radius:50%;
background:radial-gradient(circle at 35% 32%,
color-mix(in oklab, var(--plum-700) 55%, var(--ink-950)) 0%,
color-mix(in oklab, var(--plum-700) 18%, var(--ink-950)) 55%,
var(--ink-950) 100%); }
.pbx-stage .fx-ov2-statusbar{ display:flex; justify-content:space-between; align-items:center;
padding:.6rem 1.1rem .05rem; font-size:.64rem; font-weight:700;
color:var(--ink-900); flex:0 0 auto; }
.pbx-stage .fx-ov2-statusbar svg{ height:10px; width:auto; display:inline-block; }
.pbx-stage .fx-ov2-pw{ flex:1 1 auto; padding:.5rem .72rem .3rem; }
.pbx-stage .fx-ov2-tabbar{ flex:0 0 auto; display:grid; gap:.05rem;
padding:.34rem .25rem .15rem; border-top:1px solid var(--fx-hairline); background:var(--pbx-chrome); }
.pbx-stage .fx-ov2-tab{ display:flex; flex-direction:column; align-items:center; gap:.1rem;
font-size:.46rem; font-weight:600; color:var(--fx-muted); line-height:1; }
.pbx-stage .fx-ov2-tab svg{ width:15px; height:15px; display:block; }
.pbx-stage .fx-ov2-tab.active{ color:var(--fx-primary-text); }
.pbx-stage .fx-ov2-home{ flex:0 0 auto; width:36%; height:4px; border-radius:2px;
background:color-mix(in oklab, var(--ink-900) 26%, transparent); margin:.3rem auto .45rem; }
.pbx-stage .fx-ov2-glare{ position:absolute; inset:3px; border-radius:41px; pointer-events:none; z-index:4;
background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 46%); }
/* phone app content ("Dein Tag") */
.pbx-stage .fx-ov-p-head{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-bottom:.55rem; }
.pbx-stage .fx-ov-p-head b{ font-size:.74rem; color:var(--ink-900); font-weight:700; }
.pbx-stage .fx-ov-pill{ font-size:.6rem; font-weight:700; padding:.16rem .5rem;
border-radius:999px; background:var(--neutral-100); color:var(--fx-muted); white-space:nowrap; }
.pbx-stage .fx-ov-hero{ display:flex; align-items:baseline; gap:.3rem; flex-wrap:wrap; }
.pbx-stage .fx-ov-hero .amount{ font-size:1.9rem; font-weight:800; letter-spacing:-.02em; color:var(--fx-primary-text); line-height:1; }
.pbx-stage .fx-ov-hero .unit{ font-size:.82rem; font-weight:600; color:var(--fx-primary-text); }
.pbx-stage .fx-ov-cap{ font-size:.62rem; color:var(--fx-muted); margin:.2rem 0 .6rem; }
.pbx-stage .fx-ov-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.35rem; margin-bottom:.55rem; }
.pbx-stage .fx-ov-tile{ background:var(--white); border:1px solid var(--fx-hairline); border-radius:9px; padding:.4rem .2rem; text-align:center; }
.pbx-stage .fx-ov-tile b{ display:block; font-size:.68rem; font-weight:800; color:var(--ink-900); white-space:nowrap; letter-spacing:-.01em; }
.pbx-stage .fx-ov-tile span{ font-size:.52rem; color:var(--fx-muted); }
.pbx-stage .fx-ov-list{ display:grid; gap:.3rem; }
.pbx-stage .fx-ov-mini{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.66rem; }
.pbx-stage .fx-ov-mini b{ font-weight:600; color:var(--neutral-700); min-width:0; }
.pbx-stage .fx-ov-mini > span{ white-space:nowrap; flex:0 0 auto; }
.pbx-stage .fx-ov-mini b small{ display:block; font-weight:500; font-size:.55rem; line-height:1.3; color:var(--fx-muted); }
.pbx-stage .fx-ov-mini.live b{ color:var(--fx-primary-text); }
.pbx-stage .fx-ov-mini.live b small{ color:var(--fx-primary-text); font-weight:600; }
.pbx-stage .fx-ov-plus{ color:var(--fx-primary-text); font-weight:700; font-size:.72rem; }
.pbx-stage .fx-ov-muted-val{ color:var(--fx-muted); font-weight:600; font-size:.72rem; }
/* ── 11c · Produkt-Laufband (continuous band of framed screens; §2d waiver
like the hero — pure CSS keyframes; no-JS/reduced-motion: 3 static) ── */
/* WHY .on-dark#produkt (not bare #produkt): the homepage belt section and the
funktionen Sticky-Produkttour BOTH use id="produkt". overflow:hidden clips
the belt marquee but creates a scroll-container that BREAKS position:sticky
on the tour stage. .on-dark scopes it to the homepage belt only. */
.on-dark#produkt{ overflow:hidden; }
.belt-zone{ position:relative; margin-top:var(--space-lg); }
.belt{ position:relative; display:flex; justify-content:center;
align-items:center; gap:var(--space-md); padding-inline:var(--gutter);
min-height:clamp(240px, 30vw, 380px); }
.belt-item{ width:clamp(280px, 30vw, 460px); flex:0 0 auto; }
html.js.motion .belt-item{ width:clamp(320px, 42vw, 560px); }
.belt-item--phone, html.js.motion .belt-item--phone{ width:clamp(96px, 10vw, 150px); }
/* static fallback (no-JS / reduced-motion): only the 3 lead screens */
.belt-item:nth-child(n+4){ display:none; }
/* WHY a centered OPACITY-crossfade (not a translateX marquee): a continuously
transform-animated element is rasterized by the compositor at 1× DPR → the
app-mockup text renders soft on retina. Animating ONLY opacity (items stacked
in one grid cell, transform:none) lets the browser rasterize each screen once
at full DPR — pin-sharp, exactly like the Sticky-Produkttour crossfade. */
html.js.motion .belt{ display:grid; place-items:center; padding-inline:0; }
/* display:block is load-bearing — it overrides the no-JS `.belt-item:nth-child(n+4)
{display:none}` fallback so ALL SIX screens rotate (3 items can't fill the cycle). */
html.js.motion .belt-item{ display:block; grid-area:1/1; position:relative; left:auto; top:auto;
transform:none; opacity:0;
animation:belt-fade 42s ease-in-out infinite; }
html.js.motion .belt-item:nth-child(1){ animation-delay:0s; }
html.js.motion .belt-item:nth-child(2){ animation-delay:-7s; }
html.js.motion .belt-item:nth-child(3){ animation-delay:-14s; }
html.js.motion .belt-item:nth-child(4){ animation-delay:-21s; }
html.js.motion .belt-item:nth-child(5){ animation-delay:-28s; }
html.js.motion .belt-item:nth-child(6){ animation-delay:-35s; }
html.js.motion #produkt.is-paused .belt-item{ animation-play-state:paused; }
/* 6 items × 16.67% spacing → each visible ~0–22% so adjacent screens overlap
during the fade (continuous, no empty gap). */
@keyframes belt-fade{
0% { opacity:0; z-index:1; }
4% { opacity:1; z-index:3; }
16% { opacity:1; z-index:3; }
22% { opacity:0; z-index:1; }
100% { opacity:0; z-index:1; }
}
/* deep-forest edge masks: screens surface from + sink back into the ground */
.belt-mask{ position:absolute; inset-block:0;
inline-size:clamp(90px,14vw,220px); z-index:5; pointer-events:none; }
.belt-mask--l{ left:0; background:linear-gradient(90deg, var(--hero-g1),
color-mix(in oklab, var(--hero-g1) 55%, transparent) 55%, transparent); }
.belt-mask--r{ right:0; background:linear-gradient(270deg, var(--hero-g2),
color-mix(in oklab, var(--hero-g2) 55%, transparent) 55%, transparent); }
/* pulse baseline under the band: hairline with ONE beat under the focus point */
.belt-pulse{ margin-top:var(--space-md); display:block; inline-size:100%;
block-size:34px; }
.belt-pulse path{ fill:none; stroke:var(--d-hairline-strong); stroke-width:1.5; }
.belt-pulse .beat{ stroke:var(--mint); stroke-width:2; }
.belt-ctl{ display:flex; justify-content:center; margin-top:var(--space-sm); }
/* ============================================================================
12 · UTILITIES
============================================================================ */
.diag-wrap{ overflow-x:auto; }