/* Changeant - flow-lyne.com variant 18. Order: fonts, tokens, base, layout, components,
   chrome (bar, popover, dock, sheet), screens, product chapters, motion, responsive. */

/* ---------- fonts ---------- */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/newsreader-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/newsreader-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/hanken-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/hanken-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* metric-matched fallbacks so the swap does not move the layout */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 92%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97.5%; ascent-override: 100%; descent-override: 29%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  /* derived from the FlowLyne web app (flowlyne_webapp styles/main.css, tailwind.config.js,
     styles/progress-gradient.css, components/icons/Logo.tsx): white ground, zinc-cool ink with
     a violet cast, primary violet rgb(97 48 209), brand gradient blue #479AFF to violet #6130D1 to
     pink #FA5A92, here lifted towards white for the silk */
  --bg: #FFFFFF; --surface: #FFFFFF; --bg-soft: #F5F4FA;
  --ink: #100E1A; --ink-2: #4A4759; --ink-3: #686578;
  --rule: #ECEBF2; --rule-strong: #D9D6E4;
  --accent: #6130D1; --accent-soft: #EFEAFC; --on-accent: #FFFFFF; --focus: var(--accent);
  --grad: linear-gradient(100deg, #479AFF, #6130D1 52%, #FA5A92);
  --silk-pearl: #FBFAFF; --silk-lilac: #CBB9F7; --silk-rose: #F4BBD2; --silk-sky: #ACC9FB; --silk-violet: #9F8AE6; --silk-shade: #6C6696;
  --shadow-card: 0 1px 2px rgb(24 16 52 / .04), 0 28px 56px -24px rgb(24 16 52 / .18);
  --shadow-sm: 0 1px 2px rgb(24 16 52 / .04), 0 14px 30px -18px rgb(24 16 52 / .16);

  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: "Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;

  --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px;
  --fs-30: clamp(24px, 2.1vw, 30px); --fs-32: clamp(26px, 2.25vw, 32px); --fs-34: clamp(26px, 2.4vw, 34px);
  --fs-48: clamp(34px, 3.35vw, 48px); --fs-52: clamp(34px, 3.6vw, 52px); --fs-56: clamp(36px, 3.9vw, 56px); --fs-64: clamp(40px, 4.45vw, 64px);
  --fs-h1: clamp(40px, 4.1vw, 60px); --fs-poster: clamp(72px, 12vw, 184px);

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; --sp-9: 192px; --sp-10: 256px;
  --container: 1200px; --gutter: clamp(16px, 4vw, 40px); --col-gap: 24px;
  --bar-h: 72px; --stz-y: clamp(88px, 13svh, 152px); --dock-clear: 76px;
  /* one radius scale, the web app's (--radius .5rem): every surface (card, mock-up, popover, stage) is --r-m;
     parts inside a surface and tabs are --r-s or --r-xs; --r-pill only for buttons and chips; circles only for icon buttons, avatars, dots */
  --r-xs: 4px; --r-s: 6px; --r-m: 8px; --r-pill: 999px;

  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-reveal: cubic-bezier(.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-roll: cubic-bezier(.78, 0, .22, 1);
  --ease-accordion: cubic-bezier(.65, .05, .36, 1);
  --ease-nav: cubic-bezier(.45, .05, .55, .95);
  --ease-land: cubic-bezier(.34, 1.3, .64, 1);
  --ease-exit: cubic-bezier(.5, 0, .75, 0);
  --ease-mask: cubic-bezier(.22, 1, .36, 1);
  --ease-curtain: cubic-bezier(.76, 0, .24, 1);
  --ease-drift: cubic-bezier(.37, 0, .63, 1);
  --ease-spring: linear(0, .055, .183, .341, .502, .648, .77, .866, .936, .984, 1.015, 1.031, 1.038, 1.038, 1.034, 1.028, 1.022, 1.016, 1.011, 1.007, 1.004, 1.001, 1);

  --d-press: 120ms; --d-hover: 180ms; --d-base: 300ms; --d-panel: 500ms; --d-reveal: 750ms; --d-large: 1000ms;
  --d-mask: 1000ms; --d-curtain: 900ms; --d-morph: 1200ms; --d-hero: 1800ms; --d-spring: 900ms; --d-exit: 450ms;
  --stagger-line: 90ms; --stagger-item: 70ms; --stagger-char: 30ms; --stagger-list: 60ms;
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --ease-spring: var(--ease-out-expo); } }
@media (prefers-reduced-motion: reduce) {
  :root { --d-hover: 0ms; --d-base: 0ms; --d-panel: 0ms; --d-reveal: 0ms; --d-large: 0ms; --d-mask: 0ms; --d-curtain: 0ms;
    --d-morph: 0ms; --d-hero: 0ms; --d-spring: 0ms; --d-exit: 0ms; --stagger-line: 0ms; --stagger-item: 0ms; --stagger-char: 0ms; --stagger-list: 0ms; }
}

/* ---------- base ---------- */
[hidden]:not([hidden="until-found"]) { display: none !important; }
/* a closed panel keeps its box for find-in-page, and its paint containment makes it a
   stacking context painted above an open sibling in the same grid cell: it never takes a pointer */
[hidden="until-found"] { pointer-events: none; }
.lead__text[hidden], .detail[hidden] { padding-block: 0; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 24px); scroll-padding-bottom: 100px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .seg__ind, .say { transition: none; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-19)/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 300; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }
.skip { position: fixed; left: 16px; top: 12px; z-index: 50; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--r-pill); transform: translateY(-160%); transition: transform var(--d-base) var(--ease-out); }
.skip:focus { transform: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
.sprite clipPath, .sprite clipPath circle { visibility: visible; }

/* ---------- the silk canvas ---------- */
.silk { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-out); }
.silk.is-on { opacity: 1; }
.silk-poster { position: absolute; inset: 0 0 auto 0; width: 100%; height: 100svh; object-fit: cover; object-position: right top; z-index: -1; pointer-events: none; }
html.rm .silk { position: absolute; height: 100svh; }
main, .foot { position: relative; z-index: 1; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* one idea per screen: stanzas sit one stanza gap apart (the white the silk crosses), each
   block centred in the part of the window the dock leaves */
.stanza { position: relative; padding-block: var(--stz-y) calc(var(--stz-y) + var(--dock-clear)); display: flex; flex-direction: column; justify-content: center; }
.center { text-align: center; }
.breath { display: none; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

/* ---------- components ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: var(--r-pill); font: 600 var(--fs-16)/1 var(--sans); white-space: nowrap; transition: background-color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), transform var(--d-base) var(--ease-out-expo); }
.pill:active { transform: scale(.97); transition-duration: var(--d-press); }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: #2B2740; }
.pill--line { border: 1px solid var(--rule-strong); color: var(--ink); background: var(--bg); }
.pill--line:hover { border-color: var(--ink-3); }
.pill--sm { height: 40px; padding: 0 18px; font-size: var(--fs-15); }
.pill--lg { height: 56px; padding: 0 30px; font-size: 17px; }
.tel { gap: 12px; font-weight: 500; }
.tel__word { font-weight: 600; }
.tel .num { color: var(--ink-2); font-weight: 500; }
.arrow { overflow: visible; flex: none; }
.arrow__shaft { opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.arrow__tip { transform: translateX(-2px); transition: transform var(--d-base) var(--ease-out); }
a:hover > .arrow .arrow__shaft, a:focus-visible > .arrow .arrow__shaft { opacity: 1; }
a:hover > .arrow .arrow__tip, a:focus-visible > .arrow .arrow__tip { transform: translateX(1px); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--fs-17)/1.2 var(--sans); position: relative; padding-bottom: 4px; }
.link-arrow::after { content: ""; position: absolute; left: 0; right: 20px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--ease-out); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* quiet text link: a permanent hairline that turns accent and grows on hover */
.link-u { position: relative; display: inline-block; width: fit-content; padding-bottom: 3px; font: 500 var(--fs-15)/1.3 var(--sans); color: var(--ink); }
.link-u::before, .link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
.link-u::before { background: var(--rule-strong); }
.link-u::after { background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--ease-out); }
.link-u:hover::after, .link-u:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.eyebrow { display: flex; align-items: baseline; gap: 14px; font: 500 var(--fs-15)/1.4 var(--sans); color: var(--ink-2); }
.eyebrow--plain { color: var(--ink-3); font-size: var(--fs-14); }
.cap { font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }

/* play: ink disc with drawn glyphs */
.play { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; transition: background-color var(--d-hover) var(--ease-out), transform var(--d-base) var(--ease-out-expo); }
.play:hover { background: #2B2740; }
.play:active { transform: scale(.95); transition-duration: var(--d-press); }
.play svg { width: 22px; height: 22px; }
.play--hero { width: 56px; height: 56px; }
.play--hero svg { width: 24px; height: 24px; }
.play .g-play, .play .g-pause { transform-origin: 12px 12px; transition: opacity var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out); }
.play .g-pause { opacity: 0; transform: scale(.8); }
.play .g-load { opacity: 0; transform-origin: 12px 12px; }
.play.is-playing { background: var(--accent); }
.play.is-playing .g-play { opacity: 0; transform: scale(.8); }
.play.is-playing .g-pause { opacity: 1; transform: none; }
.play.is-loading .g-play, .play.is-loading .g-pause { opacity: 0; }
.play.is-loading .g-load { opacity: 1; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pause { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--bg); transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.pause:hover { border-color: var(--ink-3); color: var(--ink); }
.pause svg { width: 14px; height: 14px; }
.pause .g-play { display: none; }
.pause[aria-pressed="true"] .g-play { display: block; }
.pause[aria-pressed="true"] .g-pause { display: none; }

/* plus / minus */
.pm { position: relative; flex: none; width: 14px; height: 14px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 360ms var(--ease-accordion), opacity 360ms var(--ease-accordion); }
.pm::after { transform: rotate(90deg); }
[aria-expanded="true"] > .pm::after, [aria-expanded="true"] .pm::after, details[open] > summary .pm::after { transform: rotate(180deg); opacity: 0; }
/* chevron: two strokes that turn into a dash when open */
.chev { position: relative; width: 9px; height: 9px; flex: none; }
.chev i { position: absolute; top: 4px; width: 5.5px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--d-base) var(--ease-out); }
.chev i:first-child { left: 0; transform: rotate(40deg); transform-origin: 100% 50%; }
.chev i:last-child { right: 0; transform: rotate(-40deg); transform-origin: 0 50%; }
[aria-expanded="true"] > .chev i { transform: none; }
/* tick: two rotated bars that are drawn with scaleX */
.tick { position: relative; flex: none; display: inline-block; width: 14px; height: 14px; }
.tick i { position: absolute; height: 1.5px; border-radius: 1px; background: currentColor; transform-origin: 0 50%; }
.tick i:first-child { left: 1px; top: 7.5px; width: 5px; transform: rotate(45deg); }
.tick i:last-child { left: 4.4px; top: 10.6px; width: 10px; transform: rotate(-50deg); }

/* logos: one warm-neutral ink */
.logo { filter: var(--f, grayscale(1) contrast(1.15)); mix-blend-mode: multiply; opacity: var(--o, .78); transition: opacity 150ms linear; }
.logos li:hover .logo { opacity: 1; }
.badges img, .tisax__badges img { filter: var(--f, grayscale(1) contrast(1.15)); mix-blend-mode: multiply; opacity: var(--o, .78); }

/* value roll: a slot one line high; states stack and slide (Stripe) */
.roll { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.roll > span { grid-area: 1 / 1; white-space: nowrap; }
.roll__b { transform: translateY(130%); }
.roll__sizer { visibility: hidden; }
.roll__sizer > span { display: block; height: 0; overflow: hidden; }
/* a value in a narrow card wraps inside its cell instead of running past the card */
.kv dd > .roll { max-width: 100%; }
.kv dd > .roll > span { white-space: normal; }

/* status: a word with a 6 px dot, no traffic lights */
.st { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-14)/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.st::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.st--open::before { border: 1.5px solid var(--ink-3); }
.st--work::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); border: 1.5px solid var(--accent); }
.st--done::before { background: var(--ink); }

/* avatars: a pearl disc with a cut of the page's silk and a serif initial */
.av { flex: none; display: block; width: 40px; height: 40px; overflow: visible; }
.av--24 { width: 24px; height: 24px; }
.av--32 { width: 32px; height: 32px; }
.av--44 { width: 44px; height: 44px; }
.av--48 { width: 48px; height: 48px; }
.av--64 { width: 64px; height: 64px; }
.sw { transform-box: view-box; transform-origin: 0 66px; transform: scaleX(var(--sw, 1)); transition: transform 600ms var(--ease-mask) calc(var(--i, 0) * 70ms); }
.ini { opacity: var(--ini, 1); transition: opacity 300ms var(--ease-out) calc(var(--i, 0) * 70ms + 200ms); }
html.motion .av:not(.is-in) { --sw: 0; --ini: 0; }
.who { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- next section: a screen that fills the window says what follows ---------- */
.next { position: absolute; z-index: 2; left: calc((100% - min(100%, var(--container) + 2 * var(--gutter))) / 2 + var(--gutter)); bottom: calc(var(--dock-clear) + 18px); display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; margin-left: -4px; border-radius: var(--r-pill); background: rgb(255 255 255 / .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 var(--fs-15)/1.2 var(--sans); color: var(--ink); white-space: nowrap; }
.next__ic { display: grid; place-items: center; width: 36px; height: 36px; margin-right: 4px; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out); }
.next__ic svg { width: 12px; height: 12px; transition: transform var(--d-base) var(--ease-out); }
.next__k { color: var(--ink-3); }
.next__k::after { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 0 3px 10px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.next:hover .next__ic, .next:focus-visible .next__ic { border-color: var(--accent); background: var(--accent); color: #fff; }
.next:hover .next__ic svg, .next:focus-visible .next__ic svg { transform: translateY(2px); }
.hero > .next { bottom: 28px; }
/* one control for the plain screens, fixed over the dock's line: it says what follows while a
   screen fills the window and steps aside once the next one shows */
.next--fix { position: fixed; z-index: 29; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 360ms var(--ease-out), transform 500ms var(--ease-out-expo), visibility 0s 360ms; }
.next--fix.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 360ms var(--ease-out), transform 500ms var(--ease-out-expo), visibility 0s; }
.next--fix .next__t { display: inline-block; }
/* a pinned sequence: where the reader is in it, and the way past it */
.pin-foot { display: none; }
html.seq .pin-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--dock-clear) + 18px); display: flex; align-items: center; gap: 28px; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); pointer-events: none; }
html.seq .pin-foot > * { pointer-events: auto; }
/* it belongs to the pinned stage: it shows while the stage holds the window */
html.seq .pin-foot { opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s 300ms; }
html.seq .is-pinned .pin-foot { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease-out), visibility 0s; }
.pin-foot .next { position: static; margin-left: 0; }
.prog { display: flex; align-items: center; gap: 12px; font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-3); }
.prog__bar { display: flex; gap: 4px; }
.prog__bar i { width: 18px; height: 3px; border-radius: 2px; background: var(--rule-strong); transition: background-color 400ms var(--ease-out); }
.prog__bar i.is-on { background: var(--accent); }
.prog__bar .prog__gap { width: 8px; background: none; }
.prog__i { color: var(--ink); }
.stanza > .next { transition: opacity var(--d-base) var(--ease-out), visibility 0s; }
.stanza > .next.is-gone { opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease-out), visibility 0s var(--d-base); }
@media (max-width: 1023px) { .next { display: none; } }

/* ---------- chrome: top bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--bar-h); transition: transform 500ms var(--ease-curtain); }
.bar::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / .97); border-bottom: 1px solid var(--rule); opacity: 0; transition: opacity var(--d-base) var(--ease-out); }
.bar.is-solid::before { opacity: 1; }
.bar.is-away { transform: translateY(-100%); }
.bar__in { position: relative; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.brand { justify-self: start; display: inline-flex; border-radius: 6px; }
.brand img { width: 133px; height: 28px; }
.bar__nav { display: flex; gap: 28px; font: 500 var(--fs-15)/1 var(--sans); }
.bar__nav a, .dock__nav a { position: relative; color: var(--ink-2); transition: color var(--d-hover) var(--ease-out); }
.bar__nav a { display: inline-flex; align-items: center; gap: 8px; height: 40px; }
.bar__nav a:hover, .bar__nav a[aria-expanded="true"] { color: var(--ink); }
.bar__end { justify-self: end; display: flex; align-items: center; gap: 20px; }
.menu-btn { display: none; height: 40px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--bg); font: 600 var(--fs-15)/1 var(--sans); }
.login { position: relative; }
.login__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; font: 500 var(--fs-15)/1 var(--sans); color: var(--ink-2); }
.login__btn:hover, .login__btn[aria-expanded="true"] { color: var(--ink); }
.login__menu { position: absolute; right: -12px; top: calc(100% + 8px); min-width: 220px; padding: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: 0 12px 32px -12px rgb(24 16 52 / .18); display: none; }
html:not(.js) .login:hover .login__menu, html:not(.js) .login:focus-within .login__menu { display: block; }
.login__menu a { display: block; padding: 10px 12px; border-radius: var(--r-s); font: 500 var(--fs-15)/1.3 var(--sans); color: var(--ink); }
.login__menu a:hover { background: var(--bg-soft); }

/* the shared, morphing popover (Lichtfeld): a 9-slice background that morphs with
   transforms; the panels sit in one clip that follows the same geometry */
.pop { position: absolute; left: 0; right: 0; top: calc(var(--bar-h) - 10px); height: 0; pointer-events: none; transform-origin: 50% 0; opacity: 0; visibility: hidden; perspective: 1200px; }
html:not(.js) .pop { display: none; }
.pop:not(.is-open):not(.is-measuring) { display: none; }
.pop.is-open { pointer-events: auto; visibility: visible; }
.pop__shadow, .pop__bg { position: absolute; top: 0; left: 0; }
.pop__shadow { width: calc(var(--W) * 1px); height: calc(var(--H) * 1px); border-radius: var(--r-m); box-shadow: 0 24px 48px -12px rgb(24 16 52 / .16), 0 4px 12px -4px rgb(24 16 52 / .06); transform-origin: 0 0;
  transform: translateX(calc(var(--x) * 1px)) scale(calc(var(--w) / var(--W)), calc(var(--h) / var(--H))); }
.pop__bg > i { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.pop__bg .r { background: var(--rule); }
.pop__bg .f { background: var(--surface); }
.pop__bg .h.r { top: 12px; width: calc(var(--W) * 1px); height: calc(var(--H) * 1px - 24px); transform: translateX(calc(var(--x) * 1px)) scale(calc(var(--w) / var(--W)), calc((var(--h) - 24) / (var(--H) - 24))); }
.pop__bg .v.r { left: 12px; width: calc(var(--W) * 1px - 24px); height: calc(var(--H) * 1px); transform: translateX(calc(var(--x) * 1px)) scale(calc((var(--w) - 24) / (var(--W) - 24)), calc(var(--h) / var(--H))); }
.pop__bg .h.f { top: 12px; left: 1px; width: calc(var(--W) * 1px - 2px); height: calc(var(--H) * 1px - 24px); transform: translateX(calc(var(--x) * 1px)) scale(calc((var(--w) - 2) / (var(--W) - 2)), calc((var(--h) - 24) / (var(--H) - 24))); }
.pop__bg .v.f { top: 1px; left: 12px; width: calc(var(--W) * 1px - 24px); height: calc(var(--H) * 1px - 2px); transform: translateX(calc(var(--x) * 1px)) scale(calc((var(--w) - 24) / (var(--W) - 24)), calc((var(--h) - 2) / (var(--H) - 2))); }
.pop__bg .c { width: 24px; height: 24px; border-radius: 50%; }
.pop__bg .c.f { width: 22px; height: 22px; }
.pop__bg .c.tl { transform: translate(calc(var(--x) * 1px), 0); }
.pop__bg .c.tr { transform: translate(calc((var(--x) + var(--w) - 24) * 1px), 0); }
.pop__bg .c.bl { transform: translate(calc(var(--x) * 1px), calc((var(--h) - 24) * 1px)); }
.pop__bg .c.br { transform: translate(calc((var(--x) + var(--w) - 24) * 1px), calc((var(--h) - 24) * 1px)); }
.pop__bg .c.f.tl { transform: translate(calc((var(--x) + 1) * 1px), 1px); }
.pop__bg .c.f.tr { transform: translate(calc((var(--x) + var(--w) - 23) * 1px), 1px); }
.pop__bg .c.f.bl { transform: translate(calc((var(--x) + 1) * 1px), calc((var(--h) - 23) * 1px)); }
.pop__bg .c.f.br { transform: translate(calc((var(--x) + var(--w) - 23) * 1px), calc((var(--h) - 23) * 1px)); }
.pop__caret { position: absolute; top: -6px; left: 0; width: 12px; height: 12px; background: var(--surface); border-radius: 2px 0 0 0; box-shadow: -1px -1px 0 var(--rule); transform: translateX(calc(var(--cx) * 1px - 6px)) rotate(45deg); }
.pop__clip { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--H) * 1px);
  clip-path: inset(1px calc(100% - (var(--x) + var(--w) - 1) * 1px) calc(100% - (var(--h) - 1) * 1px) calc((var(--x) + 1) * 1px) round 11px); }
.pop.is-morph .pop__shadow, .pop.is-morph .pop__bg > i, .pop.is-morph .pop__caret { transition: transform var(--d-base) var(--ease-nav); }
.pop.is-morph .pop__clip { transition: clip-path var(--d-base) var(--ease-nav); }
.pop__panel { position: absolute; top: 0; left: 0; padding: 28px; opacity: 0; visibility: hidden; font: 500 var(--fs-15)/1.35 var(--sans); }
.pop__panel.is-on { visibility: visible; opacity: 1; }
.pop__cols { display: grid; grid-template-columns: repeat(2, max-content); gap: 48px; }
.pop__h { margin-bottom: 10px; }
.pop__h a { font: 500 var(--fs-14)/1.3 var(--sans); color: var(--ink-3); }
.pop__h a:hover { color: var(--ink); }
.pop__panel li a, .pop__foot a, .pop__big { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--ink); transition: color var(--d-hover) var(--ease-out); }
.pop__panel li a:hover, .pop__foot a:hover, .pop__big:hover { color: var(--accent); }
.pop__foot { display: flex; gap: 28px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pop__panel--stories { display: grid; gap: 14px; justify-items: start; width: 320px; }
.pop__case { font: 300 var(--fs-22)/1.25 var(--serif); color: var(--ink); text-wrap: balance; }
.pop__logos { display: grid; grid-template-columns: repeat(3, 132px); }
.pop__logos a { display: grid; place-items: center; height: 60px; border-radius: var(--r-s); transition: background-color var(--d-hover) var(--ease-out); }
.pop__logos a:hover { background: var(--bg-soft); }
.pop__logos a:hover .logo { opacity: 1; }
.pop__panel--int .pop__foot { margin-top: 12px; }
.pop__panel--login { padding: 20px 28px; min-width: 240px; }

/* ---------- chrome: dock ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: flex; justify-content: center; pointer-events: none; }
.dock[hidden] { display: none; }
.dock__in { pointer-events: auto; display: flex; align-items: center; gap: 4px; height: 56px; padding: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-pill); box-shadow: 0 10px 28px -14px rgb(24 16 52 / .22); transform: translateY(140%); transition: transform 700ms var(--ease-spring) 120ms; }
.dock.is-on .dock__in { transform: none; }
.dock.is-low .dock__in, .dock.is-hush .dock__in { transform: translateY(140%); transition: transform 450ms var(--ease-exit); }
.dock .pause { margin: 0 6px 0 4px; }
.dock__nav { position: relative; display: flex; font: 500 var(--fs-15)/1 var(--sans); }
.dock__nav a { z-index: 1; padding: 13px 16px; border-radius: var(--r-pill); }
.dock__nav a:hover, .dock__nav a.is-cur { color: var(--accent); }
.dock__ind { position: absolute; left: 0; top: 0; height: 100%; width: 100px; border-radius: var(--r-pill); background: var(--bg-soft); transform-origin: left; opacity: 0; transition: transform 500ms var(--ease-in-out), opacity var(--d-base) var(--ease-out); }
.dock__ind.is-on { opacity: 1; }
.dock__menu { display: none; }
.dock__div { width: 1px; height: 24px; background: var(--rule-strong); margin: 0 10px; }
.dock__tel { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; height: 40px; font: 600 var(--fs-15)/1 var(--sans); }
.dock__tel .num { font-weight: 500; color: var(--ink-2); }
.dock__tel:hover .num { color: var(--ink); }

/* ---------- chrome: mobile sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 28px; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); overflow-y: auto; }
.sheet[hidden] { display: none; }
html.motion .sheet { animation: sheet-in 500ms var(--ease-out-expo); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.sheet__close { height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font: 600 var(--fs-15)/1 var(--sans); }
.sheet__nav { display: flex; flex-direction: column; }
.sheet__nav a { padding: 10px 0; font: 300 30px/1.15 var(--serif); border-bottom: 1px solid var(--rule); }
.sheet__row { display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.sheet__nav .sheet__row a { flex: 1; border-bottom: 0; }
.sheet__more { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -12px; color: var(--ink-2); }
.sheet__more .chev { transform: scale(1.5); }
.sheet__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 8px 0 14px; border-bottom: 1px solid var(--rule); }
.sheet__nav .sheet__sub a { display: block; padding: 8px 0; border-bottom: 0; font: 400 var(--fs-15)/1.3 var(--sans); color: var(--ink-2); }
.sheet__nav .sheet__sub .sheet__k a { padding-bottom: 4px; font-weight: 500; color: var(--ink); }
.sheet__login { display: flex; flex-direction: column; gap: 4px; }
.sheet__k { font: 500 var(--fs-14)/1.4 var(--sans); color: var(--ink-3); }
.sheet__login a { padding: 10px 0; font: 500 var(--fs-17)/1.3 var(--sans); }
.sheet__act { margin-top: auto; display: grid; gap: 12px; }
.sheet__act .pill { width: 100%; }
html.motion .sheet__nav a, html.motion .sheet__grp { animation: rise-in 600ms var(--ease-out-expo) backwards; }
html.motion .sheet__grp a { animation: none; }
html.motion .sheet__grp { animation-delay: 60ms; }
html.motion .sheet__nav a:nth-child(2) { animation-delay: 60ms; }
html.motion .sheet__nav a:nth-child(3) { animation-delay: 120ms; }
html.motion .sheet__nav a:nth-child(4) { animation-delay: 180ms; }
html.motion .sheet__nav a:nth-child(5) { animation-delay: 240ms; }
html.motion .sheet__nav a:nth-child(n+6) { animation-delay: 300ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- 0: hero ---------- */
/* v9's composition: copy left, the listening card right, the whole block centred in the
   first screen between the top bar and the next-section control */
.hero { min-height: 100svh; padding-block: calc(var(--bar-h) + 24px) 104px; justify-content: center; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.hero__first { display: contents; }
.hero h1, .hero__sub, .hero__lead, .hero__cta, .badges { grid-column: 1 / span 7; }
.hero h1 { grid-row: 1; width: fit-content; font: 300 var(--fs-h1)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: initial; }
.hero__sub { grid-row: 2; margin-top: 28px; width: fit-content; font: 400 var(--fs-24)/1.3 var(--sans); letter-spacing: -.01em; color: var(--ink-2); }
.hero__lead { grid-row: 3; margin-top: 16px; max-width: 30em; font-size: var(--fs-19); line-height: 1.6; color: var(--ink-2); }
.hero__cta { grid-row: 4; width: fit-content; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.badges { grid-row: 5; width: fit-content; display: flex; align-items: center; gap: 28px; margin-top: 36px; opacity: .8; }
.badge { display: flex; align-items: center; gap: 9px; font: 500 13px/1 var(--sans); letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; }
.badges img { height: 22px; width: auto; }
.badges .badge:first-child img { height: 24px; }
/* the listening card: the silk passes behind it */
.hero__listen { grid-column: 8 / span 5; grid-row: 1 / span 5; align-self: center; justify-self: end; width: min(460px, 100%); display: grid; justify-items: start; gap: 20px; }
.lcard { width: min(460px, 100%); padding: 26px 28px 28px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-card); }
.lcard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lcard__label { font: 500 var(--fs-14)/1.4 var(--sans); color: var(--ink-3); }
.lcard__row { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; margin-top: 22px; }
.lcard__row .play { grid-row: 1 / 3; }
.lcard__title { font: 300 clamp(24px, 2vw, 28px)/1.12 var(--serif); white-space: nowrap; letter-spacing: -.01em; }
.lcard__time { margin-top: 4px; font: 500 var(--fs-15)/1 var(--sans); color: var(--ink-3); }
.lcard .wave { margin-top: 14px; }
.lcard__who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
/* the waveform is the progress and the seek control: the played bars take the app's gradient,
   revealed by two opposed translates (transform only), the rest stay muted */
.wave { position: relative; padding-block: 8px; border-radius: var(--r-xs); }
.wave[role="slider"] { cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.wave__bars { display: block; width: 100%; height: 28px; overflow: visible; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.wave > .wave__bars { stroke: #D9D2F2; transition: stroke var(--d-hover) var(--ease-out); }
.wave:hover > .wave__bars, .lcard.is-playing .wave > .wave__bars { stroke: #CBC0EE; }
.wave__played { position: absolute; inset: 8px 0; overflow: hidden; transform: translateX(-100%); }
.wave__played .wave__bars { transform: translateX(100%); }
.wave:focus-visible { outline-offset: 2px; }
.pause--hero { position: absolute; right: var(--gutter); bottom: 28px; z-index: 2; transition: opacity var(--d-base) var(--ease-out), visibility 0s; }
.pause--hero.is-off { opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease-out), visibility 0s var(--d-base); }

/* ---------- 1: listening ---------- */
.s-listen__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--sp-5); }
.h-stanza { font: 300 var(--fs-64)/1.04 var(--serif); letter-spacing: -.02em; }
.h-48 { font-size: var(--fs-48); line-height: 1.08; letter-spacing: -.018em; }
.h-56 { font-size: var(--fs-56); line-height: 1.06; letter-spacing: -.02em; }
.listen__head { grid-column: 1 / span 7; }
.listen__line { margin-top: 20px; max-width: 46ch; color: var(--ink-2); }
.tracks { grid-column: 1 / span 7; display: grid; gap: 22px; }
.track { display: grid; grid-template-columns: 48px 1fr auto; column-gap: 20px; align-items: center; }
.track__title { font: 300 var(--fs-32)/1.15 var(--serif); letter-spacing: -.01em; transition: transform 500ms var(--ease-out-expo); }
.track__who { transition: transform 500ms var(--ease-out-expo); }
.track.is-playing .track__title, .track.is-playing .track__who { transform: translateX(12px); }
.track__time { font: 500 var(--fs-15)/1 var(--sans); color: var(--ink-3); }
.track > .play { grid-row: 1 / 3; }
.track__who, .lcard__who { display: flex; align-items: center; gap: 8px; font: 400 var(--fs-14)/1.35 var(--sans); color: var(--ink-3); }
.track__time { grid-row: 1; grid-column: 3; }
.track__who { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; }
.track__line { grid-row: 3; }
.track__who b, .lcard__who b { font-weight: 500; color: var(--ink-2); }
.track__line { grid-column: 2 / 4; position: relative; height: 1px; margin-top: 12px; background: var(--rule); transition: background-color var(--d-hover) var(--ease-out); }
.track:hover .track__line { background: var(--rule-strong); }
.track__fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.track__seek { position: absolute; left: 0; right: 0; top: -10px; width: 100%; height: 21px; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
.track__seek:focus-visible { opacity: 1; outline: none; }
.track__seek::-webkit-slider-runnable-track { height: 21px; background: transparent; }
.track__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; }
.track__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--accent); }
.track.is-playing .track__seek { opacity: 1; }
.track audio { grid-column: 1 / -1; width: 100%; margin-top: 12px; }
html.js .track audio { display: none; }
/* laptops of 800 px and less: the list keeps clear of the fixed Weiter control */
@media (min-width: 1024px) and (max-height: 820px) {
  .s-listen__grid { row-gap: 36px; }
  .tracks { gap: 14px; }
  .track__who { margin-top: 2px; }
  .track__line { margin-top: 8px; }
}

/* ---------- 2: customers ---------- */
.s-customers h2 { max-width: 15em; margin-inline: auto; }
.logos { display: grid; justify-content: center; }
.logos li { display: grid; place-items: center; }
.logos--customers { grid-template-columns: repeat(5, 192px); grid-auto-rows: 96px; margin-top: var(--sp-6); }
.fan-slot { height: clamp(120px, 16vh, 150px); }
.logos-more { display: none; }

/* ---------- 3: quote ---------- */
.s-quote__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.quote { grid-column: 5 / span 8; }
.quote p { position: relative; font: 300 var(--fs-34)/1.25 var(--serif); letter-spacing: -.012em; color: var(--ink-2); }
.quote p { text-wrap: pretty; }
.q-lead { display: block; color: var(--ink); }
.q-open { position: absolute; right: 100%; margin-right: .08em; }
.quote__by { display: flex; align-items: center; gap: 16px; margin-top: var(--sp-5); font: 500 var(--fs-16)/1.4 var(--sans); color: var(--ink-2); }
.quote__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.quote__div { width: 1px; height: 32px; background: var(--rule-strong); margin: 0 8px; }

/* ---------- 4: Vorteile (sticky scrubbed sequence) ---------- */
.s-adv__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.s-adv__grid > * { grid-column: 1 / span 7; }
.s-adv .eyebrow { width: fit-content; margin-bottom: 20px; }
/* on the desktop stage the pinned footer counts the items */
html.seq .adv__index { display: none; }
.adv__index { width: fit-content; margin-top: var(--sp-5); font: 500 var(--fs-15)/1 var(--sans); color: var(--ink-3); }
.adv__cur { color: var(--ink); display: inline-grid; overflow: clip; vertical-align: bottom; padding-block: .1em; margin-block: -.1em; }
.adv__cur > span { grid-area: 1 / 1; }
.adv__list { margin-top: var(--sp-3); display: grid; gap: 45svh; }
.adv__title { font: 300 var(--fs-64)/1.04 var(--serif); letter-spacing: -.02em; }
.adv__text { margin-top: 20px; max-width: 40ch; font-size: var(--fs-20); line-height: 1.55; color: var(--ink-2); }
/* seven tabs in two aligned rows: they read as navigation and stay clear of the silk */
.adv__tabs { position: relative; width: fit-content; margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(4, auto); gap: 2px; white-space: nowrap; }
.s-adv__grid > .adv__tabs { grid-column: 1 / -1; }
/* the list is as wide as its longest title: no title wraps, so the tabs below never move */
@media (min-width: 1024px) { .s-adv__grid > .adv__list { grid-column: 1 / span 9; } }
.adv__tab { position: relative; z-index: 1; justify-self: start; height: 34px; padding: 0 11px; border-radius: var(--r-s); font: 500 14px/1 var(--sans); color: var(--ink-2); transition: color 500ms var(--ease-in-out); }
.adv__tab:hover, .adv__tab[aria-selected="true"] { color: var(--ink); }
.adv__ind { position: absolute; inset: 0; pointer-events: none; }
.adv__ind i { position: absolute; top: 0; left: 0; height: 34px; width: 17px; background: var(--bg-soft); transition: transform 500ms var(--ease-in-out); }
.adv__ind i:nth-child(1) { border-radius: var(--r-s) 0 0 var(--r-s); }
.adv__ind i:nth-child(2) { width: 100px; transform-origin: left; }
.adv__ind i:nth-child(3) { border-radius: 0 var(--r-s) var(--r-s) 0; }
html.seq .s-adv { height: 230svh; display: block; padding: 0; }
html.seq .s-adv .adv__tabs { transition: opacity 400ms var(--ease-out); }
html.seq .s-adv.is-low .adv__tabs:not(:focus-within) { opacity: 0; }
html.seq .s-adv__stage { position: sticky; top: 0; height: 100svh; padding-bottom: calc(var(--dock-clear) + 36px); display: flex; flex-direction: column; justify-content: center; }
html.seq .adv__list { display: grid; grid-template: 1fr / 1fr; gap: 0; min-height: 260px; margin-top: var(--sp-6); }
html.seq .adv__item { grid-area: 1 / 1; }
html.seq .adv__title { overflow: clip; padding-block: .1em .12em; margin-block: -.1em -.12em; }
.adv__title > span { display: block; }

/* ---------- product chapters: shared ---------- */
.h-chapter { font: 300 var(--fs-52)/1.08 var(--serif); letter-spacing: -.018em; }
.card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-sm); padding: 20px 22px; font: 400 var(--fs-15)/1.45 var(--sans); }
.card__k { display: flex; align-items: center; gap: 10px; font: 500 var(--fs-14)/1.3 var(--sans); color: var(--ink-3); }
.card__k--row { justify-content: space-between; }
.card__k--row > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.card__logo { height: 16px; width: auto; }
.fl-mark { width: 16px; height: 16px; opacity: .8; }
.kv { display: grid; margin-top: 14px; }
.kv > div { display: grid; grid-template-columns: 8.4em 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.kv dt { color: var(--ink-3); font-size: var(--fs-14); }
.kv dd { color: var(--ink); font-weight: 500; min-width: 0; }
.kv--tight > div { padding: 6px 0; }
.c-tall .note { margin-top: 10px; padding: 10px 14px; }
/* stacked (phones, reduced motion): every dialogue card carries its own mark */
.s-flows:not(.is-seq) .c-say::before { content: "Beispiel"; position: absolute; right: 20px; top: 18px; font: 500 var(--fs-13)/1 var(--sans); color: var(--ink-3); }
.say { display: grid; gap: 4px; }
.nw { white-space: nowrap; }
.say + .say { margin-top: 14px; }
.say { transition: opacity 600ms var(--ease-out); }
.say.is-dim { opacity: .16; transition: none; }
.say__who { font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.say--ai .say__who { color: var(--accent); }
.say__t { font: 300 var(--fs-22)/1.3 var(--serif); letter-spacing: -.005em; color: var(--ink); }

/* ---------- 5: Warum FlowLyne ---------- */
.s-why__grid { display: grid; }
.why__head { max-width: 760px; }
.why__head .h-chapter { margin-top: 18px; }
.why__intro { margin-top: 16px; max-width: 56ch; color: var(--ink-2); text-wrap: pretty; }
.why__body { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.proof { display: none; }
.why__list { grid-column: 1 / -1; display: grid; gap: var(--sp-6); }
.why__btn { display: flex; align-items: baseline; gap: 18px; width: 100%; text-align: left; cursor: default; }
.why__n { font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-3); }
.why__t { font: 300 var(--fs-30)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.why__text { margin-top: 12px; padding-left: 36px; max-width: 46ch; font-size: var(--fs-18); line-height: 1.55; color: var(--ink-2); }
.frag { margin-top: var(--sp-3); margin-left: 36px; padding: 28px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-card); }
.frag__h { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); font: 500 var(--fs-14)/1.3 var(--sans); color: var(--ink-2); }
.frag__h .cap { font-size: var(--fs-13); }
.mhead, .mrow { display: grid; grid-template-columns: minmax(0, 1fr) 124px 116px; column-gap: 16px; align-items: center; }
.mhead { padding-bottom: 8px; font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.mhead span:last-child { text-align: right; }
.mrows { display: grid; }
.mrow { padding: 12px 0; border-top: 1px solid var(--rule); }
.mrow:last-child { border-bottom: 1px solid var(--rule); }
.mrow__s { display: grid; gap: 2px; min-width: 0; font: 500 var(--fs-15)/1.35 var(--sans); color: var(--ink); }
.mrow__t { font: 400 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.mrow__w { font-size: var(--fs-14); color: var(--ink-2); }
.mrow__st { display: flex; justify-content: flex-end; }
.mrow__st .roll, .prow__st .roll { justify-items: end; }
.seg--sm { height: auto; }
.seg--sm .seg__btn { height: 36px; padding: 0 16px; font-size: var(--fs-14); }
.loc__seg { display: inline-flex; }
.agent { margin-top: 24px; display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; row-gap: 4px; align-items: center; }
.agent__av { grid-row: 1 / 3; position: relative; width: 56px; height: 56px; }
.av--56 { width: 56px; height: 56px; }
.agent__av .av { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-out); }
.agent__av .av.is-on { opacity: 1; }
.agent__name { font: 300 var(--fs-34)/1.05 var(--serif); letter-spacing: -.01em; }
.agent__greet { grid-column: 2; font: 300 var(--fs-20)/1.3 var(--serif); color: var(--ink-2); }
.agent__greet .roll > span, .agent__kv .roll > span { white-space: normal; }
.agent__kv { grid-column: 1 / -1; margin-top: 20px; display: grid; }
.agent__kv > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: baseline; font-size: var(--fs-15); line-height: 1.4; }
.agent__kv dt { font-size: var(--fs-14); color: var(--ink-3); }
.agent__kv dd { font-weight: 500; color: var(--ink); min-width: 0; }
/* the location's set-up in figures: the figure first, then what it counts */
.agent__kv--n { margin-top: 16px; }
.agent__kv--n > div { grid-template-columns: 84px minmax(0, 1fr); padding: 7px 0; }
.agent__kv--n dt { font-size: var(--fs-15); color: var(--ink-2); }
.agent__kv--n dd { order: -1; font: 300 var(--fs-22)/1.15 var(--serif); letter-spacing: -.005em; }
.sysl { display: grid; row-gap: 4px; padding: 14px 0; border-top: 1px solid var(--rule); }
.frag__h + .sysl { border-top: 0; padding-top: 0; }
.sysl__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.sysl__logo { height: 18px; width: auto; }
.sysl__logo--crm { height: 14px; }
.sysl__tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font: 500 var(--fs-13)/1 var(--sans); color: var(--ink-2); }
.sysl__t { margin-top: 2px; font: 300 var(--fs-24)/1.2 var(--serif); }
.sysl__m { font-size: var(--fs-14); line-height: 1.45; color: var(--ink-3); }
/* the CRM entry: only the fields FlowLyne hands over */
.crm { margin-top: 8px; display: grid; }
.crm > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 3px 0; font-size: var(--fs-14); line-height: 1.45; align-items: baseline; }
.crm dt { color: var(--ink-3); }
.crm dd { color: var(--ink); min-width: 0; }
.crm__msg dd { color: var(--ink-2); text-wrap: pretty; }
/* calls by concern: one bar per concern, scaled to the largest */
.tagl { display: grid; gap: 15px; }
.tagl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; align-items: baseline; font-size: var(--fs-15); line-height: 1.3; color: var(--ink); }
.tagl__v { font: 300 var(--fs-20)/1 var(--serif); }
.tagl__bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-xs); overflow: hidden; }
.tagl__bar i { display: block; width: calc(var(--v) * 250%); height: 100%; border-radius: var(--r-xs); background: var(--accent); transform-origin: left; }
.tagl__rest { color: var(--ink-2); }
.tagl__rest .tagl__bar i { background: var(--rule-strong); }
.setup__fig { font: 300 clamp(64px, 6.6vw, 96px)/1 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.od__line { display: inline-block; vertical-align: top; margin-top: calc(.5lh - .51em); height: .77em; overflow: clip;
  -webkit-mask-image: linear-gradient(transparent, #000 .05em, #000 calc(100% - .04em), transparent); mask-image: linear-gradient(transparent, #000 .05em, #000 calc(100% - .04em), transparent); }
.od__in { display: block; margin-top: calc(.51em - .5lh); }
.od { display: inline-block; height: 1lh; vertical-align: top; }
.od__s { display: block; }
.od__s > span { display: block; height: 1lh; }
.setup__label { margin-top: 14px; font: 500 var(--fs-15)/1.3 var(--sans); color: var(--ink-2); }
.ticks { margin-top: 26px; display: grid; gap: 12px; font-size: var(--fs-16); color: var(--ink); }
.ticks li { display: flex; align-items: center; gap: 12px; }
.ticks .tick { color: var(--ink); }
.ticks .tick i { transform: rotate(45deg) scaleX(var(--k, 1)); transition: transform 300ms var(--ease-out); }
.ticks .tick i:last-child { transform: rotate(-50deg) scaleX(var(--k2, 1)); transition-delay: 120ms; }
html.motion .ticks .tick:not(.is-on) { --k: 0; --k2: 0; }
.plate { display: inline-flex; align-items: stretch; height: 64px; border: 1px solid var(--ink); border-radius: var(--r-xs); background: #fff; overflow: hidden; }
.plate__eu { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 32px; padding: 9px 0 8px; background: #1F3C96; color: #fff; font: 600 13px/1 var(--sans); }
.plate__eu svg { width: 16px; height: 16px; }
.plate__t { display: flex; align-items: center; padding: 0 22px; font: 600 40px/1 var(--sans); letter-spacing: .02em; color: var(--ink); }
.spoken { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 10px; font: 300 var(--fs-30)/1.2 var(--serif); }
.spoken span { display: inline-block; }
.spoken span:not(:last-child)::after { content: "·"; margin-left: 10px; color: var(--ink-3); }
.spoken--sm { margin-top: 10px; font-size: var(--fs-24); }
.ordno { margin-top: 28px; display: flex; align-items: baseline; gap: 12px; font: 500 var(--fs-14)/1.3 var(--sans); color: var(--ink-3); }
.ordno__v { font: 600 var(--fs-20)/1 var(--sans); letter-spacing: .03em; color: var(--ink); }
.spoken__cap { margin-top: 22px; font-size: var(--fs-14); color: var(--ink-3); }
/* the FIN in its four parts, printed and read the same way: two parts per line, a thin
   rule between them, so the eye maps each part to its letters */
.ordno__v { display: inline-flex; gap: .5em; }
.spoken--fin { flex-direction: column; flex-wrap: nowrap; gap: 6px; font-size: var(--fs-22); }
.spoken.spoken--fin { margin-top: 22px; }
.spoken--fin .spoken__l { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 4px; }
.spoken .spoken__g { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.spoken--fin span.spoken__l::after, .spoken--fin span.spoken__g::after { content: none; }
.spoken--fin .spoken__g + .spoken__g { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--rule-strong); }
.spoken--fin .spoken__g span:not(:last-child)::after { margin-left: 8px; }

/* the stage (desktop): one item at a time, the fragments share one frame */
html.seq .s-why { height: 250svh; display: block; padding: 0; }
html.seq .s-why__stage { position: sticky; top: 0; height: 100svh; padding-bottom: calc(var(--dock-clear) + 36px); display: flex; flex-direction: column; justify-content: center; }
.s-why.is-seq .why__list { grid-column: 1 / span 6; grid-row: 1; position: relative; gap: 0; padding-left: 24px; align-content: space-between; }
.s-why.is-seq .why__list::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--rule-strong); }
.why__bar { position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--accent); transform: scaleY(.2); transform-origin: top; transition: transform 500ms var(--ease-in-out); }
.s-why.is-seq .why__item { padding: 9px 0; }
/* the list holds the height of its tallest state (set by the script), so the heading above
   never moves; a shorter caption spreads its slack over all the gaps */
.s-why.is-seq .why__item.is-cur .why__text { margin-bottom: 8px; }
.s-why.is-seq .why__btn { cursor: pointer; }
.s-why.is-seq .why__item:not(.is-cur) .why__t, .s-why.is-seq .why__item:not(.is-cur) .why__n { color: var(--ink-3); transition: color var(--d-base) var(--ease-out); }
.s-why.is-seq .why__item:not(.is-cur) .why__btn:hover .why__t { color: var(--ink-2); }
.s-why.is-seq .why__text { padding-left: 36px; max-width: calc(50ch + 36px); }
.s-why.is-seq .proof { display: block; position: relative; grid-column: 7 / span 6; grid-row: 1; align-self: center; height: 460px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-card); }
.proof .frag { position: absolute; left: 0; right: 0; top: 0; min-height: 100%; margin: 0; padding: 24px 32px 30px; background: none; border: 0; box-shadow: none; border-radius: var(--r-m); visibility: hidden; display: flex; flex-direction: column; }
/* each fragment's footer sits on the frame's floor */
.proof .agent__kv, .proof .spoken__cap { margin-top: auto; }
.proof .frag--tags .tagl { flex: 1; align-content: space-between; }
.proof .frag--tags .spoken__cap { margin-top: 22px; }
.proof .frag--setup .setup__fig, .proof .frag--plate .plate { margin-top: auto; }
.proof .frag--setup .ticks { margin-bottom: auto; }
.proof .frag--loc .agent { flex: 1; grid-template-rows: auto auto 1fr; }
.proof .loc__seg { align-self: flex-start; }
.proof .frag--setup .ticks { margin-top: 30px; }
.proof .frag.is-on { visibility: visible; }
.proof .frag--plate { display: flex; flex-direction: column; align-items: flex-start; }
.proof .frag--plate .frag__h { align-self: stretch; }

/* ---------- 6: numbers ---------- */
.s-numbers__grid { display: grid; }
.numbers__h { text-wrap: balance; max-width: 34ch; font: 400 var(--fs-22)/1.35 var(--sans); color: var(--ink-2); letter-spacing: -.005em; }
.big { margin-top: var(--sp-5); }
.big__fig { margin-bottom: -.16em; font: 300 var(--fs-poster)/.9 var(--serif); letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.big__label { margin-top: 10px; font: 500 var(--fs-17)/1.3 var(--sans); color: var(--ink-2); }
.numbers__slot { height: clamp(120px, 20vh, 190px); }
.small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.small > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.small dd { font: 300 var(--fs-48)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.small dt { margin-top: 10px; font: 500 var(--fs-15)/1.35 var(--sans); color: var(--ink-2); }
/* odometer (only while a figure rolls; at rest the figure is plain text). Every character is
   a box one line high. Its window runs from just above the digits' tops to just under their
   baseline (Newsreader: ascent .74em, so the baseline sits at half the line height + .24em),
   softened at both edges: a rising or counting digit never leaves the figure and never
   reaches the label under it */
.odo__c { position: relative; display: inline-block; height: 1lh; vertical-align: top; }
.odo__g { color: transparent; }
.odo__w { position: absolute; left: -.06em; right: -.06em; top: calc(.5lh - .51em); height: .77em; overflow: clip; text-align: center;
  -webkit-mask-image: linear-gradient(transparent, #000 .05em, #000 calc(100% - .04em), transparent); mask-image: linear-gradient(transparent, #000 .05em, #000 calc(100% - .04em), transparent); }
.odo__t { display: block; margin-top: calc(.51em - .5lh); line-height: inherit; white-space: pre; will-change: transform; }
.odo__r { display: inline-block; vertical-align: top; height: 1lh; }
.odo__rt { display: block; will-change: transform; }
html.motion .odo-wait { opacity: 0; }

/* ---------- 7: Anwendungsbereiche ---------- */
.s-uses__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.uses__head, .uses__panels { grid-column: 1 / span 7; }
.uses__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.seg { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--surface); }
.seg[hidden] { display: none; }
.seg__ind { position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px; background: var(--ink); clip-path: inset(0 100% 0 0 round var(--r-s)); transition: clip-path 460ms var(--ease-out-expo); }
.seg__btn { position: relative; z-index: 1; height: 40px; padding: 0 20px; border-radius: var(--r-s); font: 600 var(--fs-15)/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: color var(--d-hover) var(--ease-out); }
.seg__btn[aria-selected="true"] { color: #fff; }
@media (prefers-reduced-motion: reduce) { .seg__ind { transition: none; } }
.uses__panels { margin-top: var(--sp-5); display: grid; }
.uses__panel + .uses__panel { margin-top: var(--sp-7); }
html.js .uses__panels { grid-template: auto / 1fr; }
html.js .uses__panel { grid-area: 1 / 1; margin: 0; }
.uses__kicker { display: block; margin-bottom: 10px; font: 500 var(--fs-14)/1.4 var(--sans); color: var(--ink-3); letter-spacing: 0; }
html.js .uses__kicker { display: none; }
.uses__tag { font: 300 var(--fs-48)/1.08 var(--serif); letter-spacing: -.018em; }
.uses__intro { margin-top: 20px; max-width: 52ch; color: var(--ink-2); }
.leads { margin-top: var(--sp-5); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); align-items: start; }
@media (min-width: 1024px) {
  .leads { grid-template-rows: repeat(3, auto); }
  .leads__col { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; }
}
.lead { border-top: 1px solid var(--rule); }
.leads__col .lead:last-child { border-bottom: 1px solid var(--rule); }
.lead__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0; text-align: left; font: 500 var(--fs-17)/1.3 var(--sans); }
.lead__btn .pm { color: var(--ink-3); }
.lead__btn:hover .pm { color: var(--ink); }
.lead__text { padding: 0 32px 18px 0; font-size: var(--fs-17); line-height: 1.55; color: var(--ink-2); }
/* the vignette: one card from the product, swapping with the tab */
.uses__vig { grid-column: 9 / span 4; grid-row: 2; align-self: start; margin-top: var(--sp-5); display: grid; justify-items: end; }
.vig { grid-area: 1 / 1; width: min(380px, 100%); padding: 24px 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-card); font-size: var(--fs-15); }
html.js .vig:not(.is-on) { visibility: hidden; }
.vig__top { display: flex; align-items: center; justify-content: space-between; font: 500 var(--fs-14)/1.3 var(--sans); color: var(--ink-2); }
.vig__k { margin-top: 22px; font: 500 var(--fs-14)/1.3 var(--sans); color: var(--ink-3); }
.vig__car { margin-top: 6px; font: 300 var(--fs-30)/1.15 var(--serif); color: var(--ink); }
.vig__st { margin-top: 18px; font: 500 var(--fs-18)/1.3 var(--sans); color: var(--ink); }
.vig__line { margin-top: 6px; color: var(--ink-2); }
.vig__kv { margin-top: 12px; display: grid; }
.vig__kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.vig__kv dt { color: var(--ink-3); }
.vig__kv dd { color: var(--ink); font-weight: 500; }
.vig__line--ink { margin-top: 14px; color: var(--ink); font-weight: 500; }
.vig__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-3); }
.vig__foot .logo { height: 16px; width: auto; }

/* ---------- 8: names ---------- */
.s-names { min-height: 100svh; }
.names { display: grid; justify-items: center; }
.names__eye { font: 500 var(--fs-15)/1.4 var(--sans); color: var(--ink-2); }
.names__row { display: none; }
.names__h { margin-top: calc(64px + 64px); font: 300 clamp(40px, 6vw, 88px)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: initial; }
.nm { position: relative; display: inline-block; }
.nm .av { position: absolute; left: calc(50% - 32px - .14em); bottom: calc(100% + 18px); }
.nm:last-child .av { left: calc(50% - 32px - .1em); }
.names__line { margin-top: var(--sp-4); max-width: 44ch; color: var(--ink-2); }
.names__link { margin-top: var(--sp-4); }

/* ---------- 9: the flows ---------- */
.flows__head .h-chapter { margin-top: 10px; }
.flows__tabs { margin-top: 22px; }
.flow { margin-top: var(--sp-5); }
.flow__name { margin-bottom: 20px; font: 600 var(--fs-17)/1.3 var(--sans); }
html.js .flow__name { display: none; }
.flow__grid { display: grid; gap: var(--sp-4); }
.flow__area { display: none; }
.strip { display: grid; grid-template-columns: 40px 1fr auto auto; align-items: center; column-gap: 14px; padding: 12px 18px 12px 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-sm); }
.strip__who { display: grid; line-height: 1.25; }
.strip__name { font: 600 var(--fs-15)/1.3 var(--sans); }
.strip__dealer { font-size: var(--fs-13); color: var(--ink-3); }
.strip__caller { display: none; font: 500 var(--fs-15)/1 var(--sans); color: var(--ink-2); }
.strip__state { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-14)/1.2 var(--sans); }
.strip__state .dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: background-color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); }
.strip[data-state="live"] .dot { background: var(--accent); border-color: var(--accent); }
.strip[data-state="end"] .dot { background: var(--ink); border-color: var(--ink); }
.strip__timer { font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-3); }
.steps { display: grid; gap: var(--sp-5); }
.step__btn { display: block; text-align: left; cursor: default; }
.step__name { font: 600 var(--fs-16)/1.3 var(--sans); color: var(--ink); }
.step__cap { margin-top: 6px; max-width: 52ch; font-size: var(--fs-16); line-height: 1.5; color: var(--ink-2); }
.step__st { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 var(--fs-13)/1.2 var(--sans); color: var(--ink-2); }
.step__st::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--ink-3); }
.step__st--live::before { background: var(--accent); border-color: var(--accent); }
.step__st--end::before { background: var(--ink); border-color: var(--ink); }
.s-flows.is-seq .step__st { display: none; }
.s-flows:not(.is-seq) .strip__state, .s-flows:not(.is-seq) .strip__timer { display: none; }
.s-flows:not(.is-seq) .strip { grid-template-columns: 40px 1fr auto; }
.s-flows:not(.is-seq) .strip__caller { display: block; }
.cards { margin-top: 18px; display: grid; gap: 14px; }
.steps__nav { display: flex; gap: 8px; }
.snav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--ink-2); background: var(--surface); transition: border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), opacity var(--d-hover) var(--ease-out); }
.snav:hover { border-color: var(--ink-3); color: var(--ink); }
.snav:disabled { opacity: .4; cursor: default; }
.snav svg { width: 12px; height: 12px; }
/* cards */
.plan__filter { margin-top: 6px; font-size: var(--fs-14); color: var(--ink-2); }
.plan { margin-top: 14px; display: grid; grid-template-columns: 42px repeat(5, 1fr); gap: 5px; align-items: center; }
.plan__d { font: 500 var(--fs-13)/1 var(--sans); color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.plan__t { font: 500 var(--fs-13)/1 var(--sans); color: var(--ink-3); }
.slot { position: relative; display: block; height: 30px; border-radius: var(--r-s); }
.slot.is-taken { background: var(--bg-soft); }
.slot.is-free { box-shadow: inset 0 0 0 1px var(--rule-strong); background: var(--surface); }
.slot__fill { position: absolute; inset: 0; border-radius: var(--r-s); background: var(--accent); opacity: 0; }
.slot.is-booked .slot__fill { opacity: 1; }
.slot.is-booked .slot__fill::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translate(-50%, -70%) rotate(-45deg); }
.plan__res { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; font: 500 var(--fs-14)/1.2 var(--sans); }
.pill-q { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font: 500 var(--fs-13)/1 var(--sans); color: var(--ink); background: var(--bg-soft); }
.note { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-s); background: var(--bg-soft); }
.note__k { font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.note__t { margin-top: 4px; font-size: var(--fs-15); line-height: 1.45; color: var(--ink); }
.card__foot { margin-top: 10px; font: 500 var(--fs-13)/1.35 var(--sans); color: var(--ink-3); }
.prow-list { margin-top: 10px; overflow: hidden; display: grid; }
.prow { display: grid; grid-template-columns: 92px minmax(0, 1fr) 112px 132px; align-items: center; column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: var(--fs-14); background: var(--surface); }
.prow__t { color: var(--ink-3); }
.prow__s { font: 500 var(--fs-15)/1.35 var(--sans); color: var(--ink); min-width: 0; }
.prow__sum { display: block; margin-top: 2px; font: 400 var(--fs-14)/1.4 var(--sans); color: var(--ink-3); }
.prow__st { display: flex; justify-content: flex-end; }
.prow__w { color: var(--ink-2); overflow-wrap: anywhere; }
.prow--solo { grid-template-columns: 1fr auto; grid-template-areas: "t st" "s st" "w st"; row-gap: 2px; margin-top: 10px; }
.prow--solo .prow__t { grid-area: t; }
.prow--solo .prow__s { grid-area: s; }
.prow--solo .prow__w { grid-area: w; font-size: var(--fs-13); color: var(--ink-3); }
.prow--solo .prow__st { grid-area: st; }
.prow__via { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font: 500 var(--fs-13)/1.35 var(--sans); color: var(--ink-3); }
.prow__via .roll { display: grid; }
.prow__via .roll > span { white-space: normal; }
.mail__head { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); font-size: var(--fs-14); }
.mail__head > div { display: grid; grid-template-columns: 4.5em 1fr; }
.mail__head dt { color: var(--ink-3); }
.mail__subj { font-weight: 600; }
.kv--mail { margin-top: 6px; }
.kv--mail > div { padding: 6px 0; border-top: 0; grid-template-columns: 9em 1fr; }
.mail__sum { margin-top: 8px; font-size: var(--fs-14); color: var(--ink-2); }
.mail__k { display: block; color: var(--ink-3); font-size: var(--fs-13); }
.mail__act { margin-top: 14px; }
.mbtn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 var(--fs-14)/1 var(--sans); }
.c-page { text-align: center; }
.page__k { font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.page__who { margin-top: 6px; font: 300 var(--fs-24)/1.2 var(--serif); }
.page__meta { margin-top: 4px; font: 400 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.page__sum { margin: 12px auto 0; max-width: 30ch; text-wrap: balance; font-size: var(--fs-14); line-height: 1.45; color: var(--ink-2); }
.page__btn { margin-top: 18px; display: flex; justify-content: center; align-items: center; height: 46px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 var(--fs-15)/1 var(--sans); transition: background-color var(--d-base) var(--ease-out); }
.page__btn.is-done::before { content: ""; flex: none; width: 10px; height: 5px; margin: -3px 10px 0 0; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.page__saved { margin-top: 10px; font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
html.motion .page__saved { opacity: 0; transition: opacity 400ms var(--ease-out); }
html.motion .page__saved.is-on { opacity: 1; }

/* the stage (desktop): steps left, the call strip and up to two cards right */
html.seq .s-flows { height: 400svh; display: block; padding: 0; }
html.seq .s-flows__stage { position: sticky; top: 0; height: 100svh; padding-bottom: calc(var(--dock-clear) + 36px); display: flex; flex-direction: column; justify-content: center; }
.s-flows.is-seq .s-flows__stage > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.s-flows.is-seq .flow { grid-row: 2; grid-column: 1; margin-top: 36px; }
.s-flows.is-seq .flow.is-leaving { pointer-events: none; }
.flows__next { display: none; }
.s-flows.is-seq .flows__next { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0 24px; padding-bottom: 4px; border-bottom: 1px solid var(--rule-strong); font: 600 var(--fs-15)/1.3 var(--sans); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out-expo), visibility 0s 400ms, border-color var(--d-hover) var(--ease-out); }
.s-flows.is-seq .flows__next.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 300ms, 300ms, 0s, 0s; }
.flows__next:hover { border-color: var(--accent); }
.flows__next:hover > .arrow .arrow__shaft, .flows__next:focus-visible > .arrow .arrow__shaft { opacity: 1; }
.flows__next:hover > .arrow .arrow__tip, .flows__next:focus-visible > .arrow .arrow__tip { transform: translateX(1px); }
.s-flows.is-seq .flow__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--col-gap); row-gap: 24px; }
.s-flows.is-seq .strip { grid-column: 5 / span 8; grid-row: 1; height: 64px; grid-template-columns: 40px 1fr auto auto auto; }
.s-flows.is-seq .strip__caller { display: block; }
.s-flows.is-seq .flow__area { display: block; position: relative; grid-column: 5 / span 8; grid-row: 2; height: 420px; }
.s-flows.is-seq .flow__left { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: start; }
.s-flows.is-seq .steps { position: relative; gap: 0; padding-left: 24px; }
.s-flows.is-seq .steps::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--rule-strong); }
.steps__bar { position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--accent); transform: scaleY(.2); transform-origin: top; transition: transform 500ms var(--ease-in-out); }
.s-flows.is-seq .step { padding: 11px 0; }
.s-flows.is-seq .step__btn { cursor: pointer; }
.s-flows.is-seq .step:not(.is-cur) .step__name { color: var(--ink-3); transition: color var(--d-base) var(--ease-out); }
.s-flows.is-seq .step:not(.is-cur) .step__btn:hover .step__name { color: var(--ink-2); }
.s-flows.is-seq .cards { display: none; }
.pin-nav { display: flex; gap: 8px; margin-left: -8px; }
.pin-nav .snav { width: 36px; height: 36px; }
.s-flows.is-seq .card { position: absolute; visibility: hidden; }
.s-flows.is-seq .card.is-on { visibility: visible; }
.flow__area .c-l { left: 0; top: 0; width: calc(50% - 8px); }
.flow__area .c-r { left: calc(50% + 8px); top: 0; width: calc(50% - 8px); }
.flow__area .c-wide { left: 0; top: 148px; width: 100%; }
.flow__area .c-page { padding: 30px 28px; }

/* ---------- 10: portal ---------- */
.portal__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.portal__head h2 { grid-column: 1 / span 7; }
.portal__points { grid-column: 9 / span 4; display: grid; gap: 12px; font-size: var(--fs-18); line-height: 1.45; color: var(--ink-2); }
.portal__points li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; }
.portal__points .tick { margin-top: .32em; color: var(--ink); }
.portal__tabs { margin-top: var(--sp-5); }
.app { position: relative; margin-top: 20px; display: grid; grid-template-columns: 188px minmax(0, 1fr); height: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-card); overflow: hidden; }
.app__rail { padding: 18px 10px; background: var(--bg-soft); border-right: 1px solid var(--rule); font-size: var(--fs-14); }
.rail__brand { display: flex; align-items: center; gap: 8px; padding-left: 8px; font: 600 var(--fs-13)/1.3 var(--sans); white-space: nowrap; }
.rail__brand img { width: 18px; height: 18px; }
.rail__loc { margin-top: 4px; padding-left: 34px; font-size: var(--fs-13); color: var(--ink-3); }
/* the web app's sidebar (components/app-sidebar.tsx): group label, then items with their icon */
.rail__lbl { margin: 16px 8px 4px; font: 500 12px/1.3 var(--sans); color: var(--ink-3); }
.rail__it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: var(--r-s); font: 400 var(--fs-14)/1.25 var(--sans); color: var(--ink-2); text-align: left; white-space: nowrap; transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.rail__it svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail__tabs { display: grid; gap: 1px; }
button.rail__it:hover { color: var(--ink); background: rgb(97 48 209 / .04); }
.rail__it.is-on, button.rail__it.is-on:hover { color: var(--ink); background: rgb(97 48 209 / .08); }
/* without JavaScript the controls are disabled: they show their state and take no pointer */
.app button:disabled { cursor: default; pointer-events: none; }
html.js .app { height: 600px; grid-template-rows: minmax(0, 1fr); }
.app__rail { grid-row: 1; }
.app__view { min-width: 0; grid-column: 2; grid-row: 1; }
.app__view[hidden] { pointer-events: none; }
html:not(.js) .app__view--stats { grid-row: 2; border-top: 1px solid var(--rule); }
html:not(.js) .app__rail { grid-row: 1 / span 2; }
.app__view--list { display: grid; grid-template-columns: minmax(0, 1fr) 288px; }
.calls { overflow: hidden; }
.calls__table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.calls__table th { position: sticky; top: 0; text-align: left; padding: 16px 12px 12px; font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); border-bottom: 1px solid var(--rule); background: var(--surface); white-space: nowrap; }
.calls__table td { padding: 0 12px; height: 64px; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink-2); }
.calls__table td.num { font-size: var(--fs-13); }
.calls__day { position: relative; z-index: 2; }
.calls__day th { position: static; height: auto; padding: 10px 12px 8px 20px; font: 500 var(--fs-13)/1.2 var(--sans); color: var(--ink-3); background: var(--bg-soft); border-bottom: 1px solid var(--rule); text-align: left; }
.calls__table th:first-child, .calls__table td:first-child { padding-left: 20px; }
.calls__table tbody tr { position: relative; background: var(--surface); transition: background-color var(--d-hover) var(--ease-out); }
.calls__table tbody tr:hover { background: #FAF9FD; }
.calls__table tbody tr.is-sel { background: var(--bg-soft); }
.calls__table tbody tr.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--ink); }
.call__sel { display: block; width: 100%; padding: 6px 0; text-align: left; font: 500 var(--fs-15)/1.35 var(--sans); color: var(--ink); }
.call__sel:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.c-dur, .c-tag, .c-call { display: none; }
.tg { display: inline-flex; height: 24px; align-items: center; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); font-size: var(--fs-13); color: var(--ink-2); white-space: nowrap; }
.pane { padding: 20px 22px; border-left: 1px solid var(--rule); font-size: var(--fs-14); overflow: hidden; }
.pane__t { font: 300 var(--fs-22)/1.2 var(--serif); color: var(--ink); }
.pane__t .roll > span, .pane__sum .roll > span, .pane__kv dd .roll > span { white-space: normal; }
.pane__k { margin-top: 14px; font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.pane__sum { margin-top: 4px; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }
.pane__kv { margin-top: 12px; display: grid; }
.pane__kv > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule); }
.pane__kv dt { color: var(--ink-3); }
.pane__kv dd { color: var(--ink); }
.pane__kv dd.pane__st { align-self: center; }
/* the analytics: the web app's Überblick, Reaktionszeiten and Stoßzeiten pages
   (app/[locale]/my/reporting) at website scale, with sample data; chart colours are the app's own */
.app__view--stats { display: grid; }
.rp { min-width: 0; display: flex; flex-direction: column; padding: 18px 22px 20px; }
html.js .rp { grid-area: 1 / 1; }
.rp[hidden] { pointer-events: none; }
html:not(.js) .rp + .rp { border-top: 1px solid var(--rule); }
.rp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.rp-title { font: 600 var(--fs-20)/1.2 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.rp-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-date { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); font: 400 var(--fs-13)/1 var(--sans); color: var(--ink-2); }
.rp-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-ic--s { display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -2px; }
.rp-ic--i { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -2px; color: var(--ink-3); }
.rp-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); font: 500 var(--fs-13)/1 var(--sans); color: var(--ink); white-space: nowrap; }
.rp-kpis { margin-top: 14px; display: grid; gap: 12px; }
.rp-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rp-kpi, .rp-card { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: 0 1px 2px rgb(24 16 52 / .05); }
.rp-kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 12px 14px 14px; overflow: hidden; }
.rp-kpi__h { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-kpi__k { font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink); }
.rp-kpi__x { display: grid; place-items: center; width: 24px; height: 24px; margin: -4px -6px -4px 0; border-radius: var(--r-xs); color: var(--ink-3); transition: color var(--d-hover) var(--ease-out); }
.rp-kpi__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-base) var(--ease-out); }
.rp-kpi__x:hover { color: var(--ink); }
.rp-kpi__x[aria-expanded="true"] svg { transform: rotate(180deg); }
.rp-kpi__v { position: relative; margin-top: 6px; font: 600 var(--fs-24)/1.1 var(--sans); color: var(--ink); letter-spacing: -.01em; }
.rp-kpi__s { position: relative; margin-top: 5px; font: 400 12px/1.35 var(--sans); color: var(--ink-3); }
.rp-kpi__sub { position: relative; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); display: grid; gap: 4px; font-size: 12px; line-height: 1.4; }
.rp-kpi__sub div { display: flex; justify-content: space-between; gap: 8px; }
.rp-kpi__sub dt { color: var(--ink-3); }
.rp-kpi__sub dd { font-weight: 600; color: var(--ink); }
.rp-kpi__spark { position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; fill: var(--ink); opacity: .05; pointer-events: none; }
.rp-cards { flex: 1; margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rp-card { display: flex; flex-direction: column; padding: 10px 16px 12px; }
.rp-card__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.rp-card__t { font: 600 var(--fs-14)/1.3 var(--sans); color: var(--ink); }
.rp-card > .rp-card__t, .rp-card__h:has(> .rp-hb__leg) { min-height: 24px; display: flex; align-items: center; }
.rp-hb__leg { display: flex; flex-wrap: wrap; gap: 2px 12px; font: 400 11px/1.3 var(--sans); color: var(--ink-3); }
.rp-hb__leg span { display: inline-flex; align-items: center; gap: 5px; }
.rp-hb__leg i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
/* controls: the app's toggle groups and weekday chips */
.rp-tgl { display: inline-flex; height: 32px; border: 1px solid var(--rule-strong); border-radius: var(--r-s); overflow: hidden; }
.rp-tgl--sm { height: 28px; }
.rp-tgl__b { padding: 0 11px; font: 400 12px/1 var(--sans); color: var(--ink-3); transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.rp-tgl__b + .rp-tgl__b { border-left: 1px solid var(--rule-strong); }
.rp-tgl__b:hover { color: var(--ink); }
.rp-tgl__b[aria-pressed="true"] { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
.rp-tgl__b:focus-visible, .rp-chip:focus-visible, .rp-leg__b:focus-visible { outline-offset: -2px; }
.rp-tgl--still .rp-tgl__b { display: inline-flex; align-items: center; }
.rp-tgl--still .rp-tgl__b:hover { color: var(--ink-3); }
.rp-tgl--still .rp-tgl__b[aria-pressed="true"]:hover { color: var(--ink); }
.rp-chips { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); font: 400 12px/1 var(--sans); color: var(--ink-3); transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.rp-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.rp-chip:hover { background: var(--bg-soft); }
.rp-chip[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.rp-chip[aria-pressed="true"] i { background: var(--c); }
.rp-chip--avg i { width: 12px; height: 2px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 3px, transparent 3px 5px); }
.rp-chip--avg[aria-pressed="true"] i { background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 5px); }
.rp-chips__sep { width: 1px; height: 16px; margin: 0 4px; background: var(--rule-strong); }
/* charts: stretched SVG for lines and grids, HTML for every label so text stays crisp at any width */
.rp-grid { fill: none; stroke: #E4E2EC; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rp-y, .rp-x { position: relative; font: 400 11px/1 var(--sans); color: var(--ink-3); }
.rp-y span { position: absolute; right: 8px; bottom: calc(var(--p) * 1%); transform: translateY(50%); white-space: nowrap; }
.rp-x span { position: absolute; top: 7px; left: calc(var(--p) * 1%); transform: translateX(-50%); white-space: nowrap; }
.rp-lc { flex: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: minmax(var(--h, 180px), 1fr) 22px; padding: 6px 4px 0 0; }
.rp-lc__plot { position: relative; grid-column: 2; }
.rp-lc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-lc .rp-x { grid-column: 2; }
.rp-day { flex: 1; display: grid; margin-top: 12px; }
.rp-ln { fill: none; stroke: #DEDCE6; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke var(--d-hover) var(--ease-out); }
.rp-ln.is-on { stroke: var(--c); stroke-width: 2; }
.rp-avg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.rp-vb { flex: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: minmax(var(--h, 180px), 1fr) 22px; margin-top: 12px; padding-top: 6px; }
.rp-vb__plot { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rp-vb__grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-vb__c { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.rp-vb__b { position: relative; width: 78%; height: var(--h); background: #7c3aed; border-radius: 4px 4px 0 0; transform-origin: bottom; }
.rp-vb__b em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; font: 400 11px/1 var(--sans); color: var(--ink-3); }
.rp-vb__x { grid-column: 2; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-top: 7px; text-align: center; font: 400 11px/1 var(--sans); color: var(--ink-3); }
.rp-hb { margin-top: 8px; }
.rp-hb__plot { position: relative; display: grid; gap: 3px; padding: 4px 0; }
.rp-hb__grid { position: absolute; top: 0; left: calc(var(--lw) + 9px); width: calc(100% - var(--lw) - 61px); height: 100%; overflow: visible; }
.rp-hb__r { position: relative; display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 15px; font: 400 12px/1.15 var(--sans); }
.rp-hb__l { text-align: right; color: var(--ink-2); }
.rp-hb__b { display: flex; align-items: center; align-self: stretch; padding-right: 52px; border-left: 1px solid var(--rule-strong); }
.rp-hb__b i { flex: none; width: var(--w); height: 11px; background: var(--c); transform-origin: left; }
.rp-hb__b i:last-of-type { border-radius: 0 3px 3px 0; }
.rp-hb__b em { margin-left: 6px; font: 400 11px/1 var(--sans); color: var(--ink-3); }
.rp-hb .rp-x { height: 20px; margin: 0 52px 0 calc(var(--lw) + 9px); border-top: 1px solid var(--rule-strong); }
.rp-hb .rp-x span { top: 5px; }
.rp-pie { flex: 1; display: grid; align-content: center; justify-items: center; gap: 2px; }
.rp-pie svg { max-width: 100%; height: auto; overflow: visible; }
.rp-pie text { font: 400 11px var(--sans); }
.rp-pie__ln { fill: none; stroke-width: 1; }
.rp-pie__leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 400 12px/1.3 var(--sans); }
.rp-pie__leg li { display: flex; align-items: center; gap: 6px; color: var(--c); }
.rp-pie__leg i { width: 10px; height: 10px; background: var(--c); }
/* Reaktionszeiten: trend with a clickable legend, recipient table with the calculation basis */
.rp-cards--rt { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.rp-leg { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.rp-lc--trend .rp-x span:nth-child(even) { display: none; }
@media (min-width: 1024px) { .rp-leg { gap: 2px 6px; } .rp-leg__b { gap: 5px; font-size: 11px; } .rp-leg__b i { width: 10px; } }
.rp-leg__b { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin-left: -4px; border-radius: var(--r-xs); font: 400 12px/1.3 var(--sans); color: var(--ink-3); transition: opacity var(--d-hover) var(--ease-out); }
.rp-leg__b i { width: 14px; height: 2px; border-radius: 1px; background: var(--c); }
.rp-leg__b[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.rp-lc--trend { grid-template-columns: 46px minmax(0, 1fr) 38px; margin-top: 10px; }
.rp-y--r { grid-column: 3; grid-row: 1; }
.rp-y--r span { right: auto; left: 8px; }
.rp-tl--median { --c: #7c3aed; } .rp-tl--p90 { --c: #0d9488; } .rp-tl--quota { --c: #2563eb; } .rp-tl--deadline { --c: #dc2626; }
path.rp-tl { fill: none; stroke: var(--c); stroke-width: 2; vector-effect: non-scaling-stroke; }
path.rp-tl--quota { stroke-dasharray: 6 3; }
path.rp-tl--deadline { stroke-width: 1; stroke-dasharray: 5 4; }
.rp-dl { position: absolute; right: 4px; top: calc(20% + 5px); font: 400 11px/1 var(--sans); color: var(--c); }
.rp-dots i { position: absolute; left: calc(var(--x) * 1%); top: calc(100% - var(--y) * 1%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid var(--c); border-radius: 50%; background: var(--surface); }
.rp-lc--trend.no-median .rp-tl--median, .rp-lc--trend.no-p90 .rp-tl--p90, .rp-lc--trend.no-quota .rp-tl--quota, .rp-lc--trend.no-deadline .rp-tl--deadline { display: none; }
.rp-t { margin-top: 6px; }
.rp-t__t { width: 100%; border-collapse: collapse; font: 400 var(--fs-13)/1.3 var(--sans); }
.rp-t__t th { padding: 8px 10px 8px 0; text-align: right; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rp-t__t td { padding: 6px 10px 6px 0; text-align: right; color: var(--ink); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rp-t__t tr:last-child td { border-bottom: 0; }
.rp-t__t th:first-child, .rp-t__t td:first-child { text-align: left; }
.rp-t__t th:last-child, .rp-t__t td:last-child { padding-right: 0; }
.rp-t__t th[aria-sort] { color: var(--ink); }
.rp-t__t .rp-t__n { font-weight: 500; white-space: normal; }
.rp-t__n.is-none { color: var(--ink-3); }
.rp-pc { display: block; font-size: 12px; color: var(--ink-3); }
.rp-pc--amber { font-weight: 600; color: #b45309; }
.rp-pc--red { font-weight: 600; color: #b91c1c; }
.rp-mb { display: block; width: 64px; height: 5px; margin: 3px 0 0 auto; overflow: hidden; border-radius: 3px; background: var(--bg-soft); }
.rp-mb i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #059669; }
.rp-mb--quiet i { background: var(--rule-strong); }
.rp-mb--amber i { background: #f59e0b; }
.rp-mb--red i { background: #dc2626; }
/* Stoßzeiten: the daily curve gets the wider card, as in the app (3 of 5 columns) */
.rp-cards--pk { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.rp-lc--day { --h: 200px; }
#rp-blk .rp-x span:first-child { transform: none; }
#rp-blk .rp-x span:last-child { transform: translateX(-100%); }
.app__cap { margin-top: 14px; font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.detail { padding: 0 0 18px; display: grid; gap: 8px; }
.detail__k { font: 500 var(--fs-13)/1.3 var(--sans); color: var(--ink-3); }
.detail__sum { font-size: var(--fs-15); line-height: 1.5; color: var(--ink-2); }
.detail__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--fs-14); }
.detail__meta div { display: flex; gap: 8px; }
.detail__meta dt { color: var(--ink-3); }

/* ---------- 11: case and results ---------- */
.s-case__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.case { grid-column: 1 / span 7; }
.h-eyebrow { font: 300 var(--fs-32)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink-2); }
.case__logo { margin-top: var(--sp-6); width: 147px; height: 32px; }
.case__title { margin-top: var(--sp-4); font: 300 var(--fs-56)/1.06 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.case .link-arrow { margin-top: var(--sp-5); }
.results { grid-column: 1 / span 8; margin-top: calc(var(--stz-y) + 56px); }
.results__h { font: 500 var(--fs-17)/1.3 var(--sans); color: var(--ink); }
.res__t { display: block; }
.results__list { margin-top: var(--sp-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.results__list p { font-size: var(--fs-16); line-height: 1.5; color: var(--ink-2); max-width: 32ch; }
.results__list .fig { display: block; margin-bottom: 4px; font: 300 clamp(48px, 4.45vw, 64px)/1 var(--serif); letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.results__list .rev { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

/* ---------- 12: integrations ---------- */
.int__head h2 { max-width: 16em; margin-inline: auto; }
.int__sub { max-width: 62ch; margin: 24px auto 0; color: var(--ink-2); }
.logos--int { margin-top: var(--sp-7); grid-template-columns: repeat(5, minmax(0, 200px)); grid-auto-rows: 96px; column-gap: 48px; }
.int__more { margin-top: var(--sp-5); font: 300 var(--fs-24)/1.3 var(--serif); color: var(--ink-2); }
.int__start { margin-top: var(--sp-4); }

/* ---------- 13: So starten Sie ---------- */
.start__head { max-width: 760px; }
.start__intro { margin-top: 20px; max-width: 46ch; color: var(--ink-2); }
.start__path { height: 112px; }
.start__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); }
.sstep__n { display: block; font: 300 48px/1 var(--serif); color: var(--ink-3); font-variant-numeric: lining-nums; transition: color 300ms var(--ease-out); }
.sstep.is-lit .sstep__n { color: var(--ink); }
html.rm .sstep__n, html:not(.js) .sstep__n { color: var(--ink); }
.sstep__t { margin-top: 20px; font: 600 var(--fs-18)/1.3 var(--sans); }
.sstep__p { margin-top: 10px; font-size: var(--fs-17); line-height: 1.5; color: var(--ink-2); }

/* ---------- 14: brands ---------- */
.s-brands h2 { max-width: 14em; margin-inline: auto; }
.logos--brands { margin-top: var(--sp-6); grid-template-columns: repeat(12, 68px); grid-auto-rows: 80px; }
.logos--brands li { grid-column: span 2; }
.logos--brands li:nth-child(7) { grid-column: 2 / span 2; }

/* ---------- 15: TISAX ---------- */
.s-tisax__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.tisax__text { grid-column: 1 / span 7; }
.tisax__text p { margin-top: var(--sp-4); max-width: 58ch; color: var(--ink-2); }
.tisax__text strong { color: var(--ink); }
.tisax__badges { grid-column: 9 / span 4; display: flex; align-items: center; justify-content: center; gap: 40px; }
.tisax__badges img { height: 64px; width: auto; }
.tisax__slot { grid-column: 1 / -1; height: clamp(80px, 14vh, 140px); }

/* ---------- 16: closing ---------- */
.close { max-width: 880px; margin-inline: auto; padding-block: var(--sp-6); }
.h-close { font: 300 var(--fs-56)/1.06 var(--serif); letter-spacing: -.02em; }
.close__act { margin-top: var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.close__lead { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-17); color: var(--ink-2); }
.close__num { font: 300 44px/1.1 var(--serif); color: var(--ink); letter-spacing: -.01em; position: relative; }
/* the brand gradient of the web app, once on the page: under the number to call */
.close__num::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--grad); opacity: .7; }
.close__num::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--ease-out); }
.close__num:hover::after, .close__num:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 17: FAQ ---------- */
.s-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.s-faq h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--bar-h) + 32px); }
.faq { grid-column: 6 / span 7; }
.faq__g { padding: 40px 0 12px; font: 600 var(--fs-15)/1.3 var(--sans); color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.faq__g:first-child { padding-top: 0; }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none; font: 500 var(--fs-18)/1.35 var(--sans); }
.qa summary > span:first-child { text-wrap: balance; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { color: var(--ink-3); }
.qa summary:hover .pm { color: var(--ink); }
.qa__a { padding: 0 48px 24px 0; font-size: var(--fs-18); line-height: 1.6; color: var(--ink-2); }
.qa__a p + p { margin-top: 12px; }
.qa__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--d-hover) var(--ease-out); }
.qa__link:hover, .qa__link:focus-visible { text-decoration-color: var(--accent); }

/* ---------- footer ---------- */
/* a hair short of opaque: software compositors cull the silk canvas under a fully opaque
   footer and drop the mirrored rows at the top of the window instead */
.foot { border-top: 1px solid var(--rule); background: rgb(255 255 255 / .985); padding: var(--sp-6) 0 var(--sp-5); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-5) var(--col-gap); }
.foot__brand { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.foot__tel { font: 500 var(--fs-16)/1 var(--sans); color: var(--ink-2); }
.foot__tel:hover { color: var(--ink); }
.foot__h { font: 500 var(--fs-14)/1.4 var(--sans); color: var(--ink-3); margin-bottom: 12px; }
.foot__col ul { display: grid; gap: 8px; }
.foot__col a { font-size: var(--fs-16); color: var(--ink-2); }
.foot__col a:hover { color: var(--ink); }
.foot__copy { grid-column: 1 / -1; font-size: var(--fs-14); color: var(--ink-3); }

/* ---------- motion (only after JS adds .motion to <html>) ---------- */
html.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
html.motion [data-reveal] { transition: opacity var(--d-reveal) var(--ease-reveal), transform var(--d-reveal) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * var(--stagger-list) + 160ms); }
/* P1 masked line rise */
.ln { display: block; width: fit-content; max-width: 100%; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.center .ln { margin-inline: auto; }
.ln__in { display: block; transform-origin: 0 100%; }
html.motion [data-rise].is-split:not(.is-in) .ln__in { transform: translateY(110%) rotate(2deg); }
html.motion [data-rise].is-split .ln__in { transition: transform var(--d-mask) var(--ease-mask); transition-delay: calc(var(--l, 0) * var(--stagger-line)); }
.center .ln__in { transform-origin: 50% 100%; }
/* logo arrival */
html.motion [data-logos] li { transition: opacity 700ms var(--ease-mask), transform 700ms var(--ease-mask); transition-delay: calc(var(--i, 0) * 45ms + 60ms); }
html.motion [data-logos]:not(.is-in) li { opacity: 0; transform: translateY(12px); }

/* ---------- responsive ---------- */
/* on wide screens the frame keeps its width: two more columns, the subject keeps the room
   for at most three lines */
@media (min-width: 1600px) {
  .c-dur, .c-tag { display: table-cell; }
  .calls__table .c-subj { width: 40%; }
}
/* where the silk only runs along the margin, the white between two chapters is tighter */
@media (min-width: 1024px) {
  .s-numbers { padding-bottom: calc(var(--stz-y) * .45 + var(--dock-clear)); }
  .s-uses { padding-top: calc(var(--stz-y) * .45); }
  .s-names { min-height: 0; padding-bottom: calc(var(--stz-y) * .3 + var(--dock-clear)); }
  .s-portal { padding-top: clamp(64px, 9svh, 96px); padding-bottom: calc(var(--stz-y) * .45 + var(--dock-clear)); }
  /* after the portal the art screens are as high as their content plus one band of white
     for the silk to cross: the page's second half is dampened like its first */
  .s-case, .s-int, .s-start, .s-brands, .s-tisax { padding-block: clamp(80px, 11svh, 112px); }
  .s-close { padding-block: clamp(80px, 11svh, 112px) calc(clamp(80px, 11svh, 112px) + var(--dock-clear) * .5); }
  .s-faq { padding-block: clamp(80px, 11svh, 112px) calc(var(--dock-clear) + 56px); }
  .results { margin-top: var(--sp-7); }
  .s-case, .s-start { padding-top: clamp(112px, 16svh, 152px); }
  /* the pinned flows end in the empty foot of their stage: the portal starts in it, and
     the case study follows the portal at the standard gap, not a gap and a half */
  html.seq .s-flows + .s-portal { padding-top: 0; margin-top: -96px; }
  .s-portal + .s-case { padding-top: 40px; }
  .s-brands .fan-slot { height: 104px; }
  .tisax__slot { height: 72px; }
  .logos--int { margin-top: var(--sp-6); }
  /* the flows without the stage (reduced motion, no JS): the stage's grid, one step per row,
     its text left and its cards right, two side by side */
  .s-flows:not(.is-seq) .flow__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--sp-5); }
  .s-flows:not(.is-seq) .strip { grid-column: 5 / span 8; grid-template-columns: 40px 1fr auto auto auto; }
  .s-flows:not(.is-seq) .strip__caller { display: block; }
  .s-flows:not(.is-seq) .flow__left { grid-column: 1 / -1; }
  .s-flows:not(.is-seq) .steps { gap: clamp(200px, 30svh, 280px); }
  .s-flows:not(.is-seq) .step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--col-gap); align-content: start; }
  .s-flows:not(.is-seq) .step__btn, .s-flows:not(.is-seq) .step__cap, .s-flows:not(.is-seq) .step__st { grid-column: 1 / span 4; }
  .s-flows:not(.is-seq) .step__st { justify-self: start; }
  .s-flows:not(.is-seq) .cards { grid-column: 5 / span 8; grid-row: 1 / span 3; margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .s-flows:not(.is-seq) .cards .c-wide { grid-column: 1 / -1; }
  /* "Warum FlowLyne" without the stage: each difference with its proof beside it */
  .s-why:not(.is-seq) .why__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--col-gap); }
  .s-why:not(.is-seq) .why__btn, .s-why:not(.is-seq) .why__text { grid-column: 1 / span 5; }
  .s-why:not(.is-seq) .frag { grid-column: 7 / span 6; grid-row: 1 / span 2; margin: 0; }
  .s-why:not(.is-seq) .why__list { gap: clamp(240px, 40svh, 360px); }
  .s-why:not(.is-seq) .why__body { margin-top: clamp(96px, 16svh, 160px); }
  /* stacked (reduced motion, no JS): a chapter's last card and the next chapter never share a screen */
  .s-why:not(.is-seq), .s-flows:not(.is-seq) { padding-bottom: calc(var(--stz-y) * 1.6 + var(--dock-clear)); }
  html:not(.js) .bar { position: absolute; }
}
@media (max-width: 1180px) {
  .bar__nav { gap: 20px; }
  .logos--int { grid-template-columns: repeat(5, minmax(0, 180px)); column-gap: 24px; }
  .app__view--list { grid-template-columns: minmax(0, 1fr) 280px; }
  .calls__table tr.calls__more { display: none !important; }
  .rp { padding: 16px 18px 18px; }
}
@media (max-width: 1259px) {
  .rp-t .c-calls, .rp-t .c-p90 { display: none; }
  .rp-kpis--5 { gap: 8px; }
  .rp-kpis--5 .rp-kpi { padding: 10px 11px 12px; }
  .rp-kpis--5 .rp-kpi__v { font-size: var(--fs-20); }
}
@media (min-width: 1024px) and (max-width: 1100px) { .rp-kpis--5 .rp-kpi__v { font-size: 18px; } }
@media (max-width: 1023px) {
  :root { --bar-h: 64px; --col-gap: 16px; }
  .bar__nav, .login, .bar__end > .pill, .pop { display: none; }
  .bar__in { grid-template-columns: 1fr auto; }
  .bar::before { background: #fff; }
  .menu-btn { display: inline-flex; align-items: center; }
  .stanza { min-height: 0; display: block; padding-block: 0 var(--sp-5); }
  .breath { display: block; height: 16svh; }
  /* where the silk only enters as a seam, or does not cross at all, the gap is short */
  .chapter > .breath { height: 11svh; }
  .s-names > .breath { height: 8svh; }
  .fan-slot { display: none; }
  /* the first screen holds the headline, the calls to action, the card and the badges,
     centred between the top bar and the screen's foot; the paragraph opens the second */
  .hero { min-height: 0; padding-block: var(--bar-h) 0; }
  .hero__grid { display: block; }
  .hero__first { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - var(--bar-h)); padding-block: 12px 20px; }
  .hero h1 { font-size: clamp(40px, 10.8vw, 64px); line-height: 1.03; max-width: 8em; }
  .hero h1 .d { display: none; }
  .hero__sub { margin-top: 16px; font-size: 18px; max-width: 22em; }
  /* the calls to action and the card stand clear of the right gutter, where the silk runs */
  .hero__cta { width: auto; margin-top: 24px; margin-right: 40px; display: grid; gap: 12px; }
  .hero__cta .pill { width: 100%; }
  .hero__listen { width: auto; justify-self: stretch; margin-top: 24px; margin-right: 40px; min-width: 0; align-self: stretch; justify-items: stretch; gap: 16px; }
  .lcard { width: 100%; padding: 20px 18px 22px; }
  .lcard__row { grid-template-columns: 48px 1fr; column-gap: 12px; margin-top: 16px; }
  .lcard__row .play { width: 48px; height: 48px; }
  .lcard__title { font-size: clamp(18px, 5.2vw, 22px); }
  .lcard .wave { margin-top: 10px; }
  .wave__bars { height: 24px; }
  .hero__listen .link-u { justify-self: start; }
  /* the badges close the first screen, the paragraph opens the second */
  .badges { display: grid; grid-template-columns: repeat(2, max-content); gap: 16px 32px; margin-top: 32px; }
  .hero__lead { margin-top: 56px; padding-bottom: var(--sp-4); font-size: 18px; }
  .badges img { height: 20px; }
  .pause--hero { display: none; }
  .listen__head, .tracks, .quote, .s-adv__grid > *, .uses__head, .uses__panels, .case, .results, .tisax__text, .tisax__badges, .s-faq h2, .faq { grid-column: 1 / -1; }
  .h-stanza { font-size: clamp(36px, 9.5vw, 56px); }
  .h-48, .h-56, .h-chapter { font-size: clamp(32px, 8.4vw, 44px); }
  .track { grid-template-columns: 48px 1fr auto; column-gap: 14px; row-gap: 4px; }
  .track__title { font-size: 24px; }
  .track__time { grid-row: 1; grid-column: 3; }
  .track__line { grid-column: 2 / 4; }
  .logos--customers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 84px; width: 100%; margin-top: var(--sp-5); }
  .logos--brands { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 76px; width: 100%; margin-top: var(--sp-5); }
  .logos--brands li, .logos--brands li:nth-child(7) { grid-column: auto; }
  html.js .logos.is-capped li:nth-child(n+7) { display: none; }
  .logos-more { display: inline-flex; align-items: center; height: 44px; margin-top: 12px; padding: 0 20px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--bg); font: 600 var(--fs-15)/1 var(--sans); }
  .logos-more[hidden] { display: none; }
  .adv__breath { height: 20svh; margin-top: -6svh; }
  .quote { padding-left: 14px; }
  .quote p { font-size: 26px; line-height: 1.28; }
  .quote__by { flex-wrap: wrap; }
  .quote__name { flex: 1 1 60%; }
  .quote__div { display: none; }
  .quote__logo { margin-left: 80px; }
  .adv__index { display: none; }
  .adv__list { margin-top: var(--sp-5); gap: 6svh; }
  /* a row of cards to swipe through; the next one peeks in at the right edge */
  .s-adv.is-car .adv__index { display: block; margin-top: var(--sp-4); }
  .s-adv.is-car .adv__list { display: flex; align-items: stretch; gap: 12px; margin-top: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 24px; scroll-padding-inline: var(--gutter); }
  .s-adv.is-car .adv__list::-webkit-scrollbar { display: none; }
  .s-adv.is-car .adv__item { flex: 0 0 84%; scroll-snap-align: start; padding: 24px 22px 26px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-sm); }
  .s-adv.is-car .adv__breath { display: none; }
  .s-adv.is-car .adv__title { font-size: 30px; }
  .s-adv.is-car .adv__text { margin-top: 12px; font-size: 17px; }
  .adv__title { font-size: clamp(32px, 8.4vw, 44px); }
  .adv__text { font-size: 18px; }
  .why__head { padding-right: 8px; }
  .why__list { margin-top: var(--sp-2); gap: var(--sp-6); }
  /* a phone keeps the proofs that only this chapter shows: the figure, the portal and the
     call card are on the page already (Zahlen, Portal, the flows) */
  .s-why:not(.is-seq) .frag--setup, .s-flows:not(.is-seq) [data-card="a-call"], .s-flows:not(.is-seq) [data-card="b-call"], .s-flows:not(.is-seq) [data-card="a-bye"] { display: none; }
  .why__t { font-size: 26px; }
  /* the accordion: one difference open at a time */
  .s-why.is-acc .why__list { gap: 0; margin-top: var(--sp-4); border-bottom: 1px solid var(--rule); }
  .s-why.is-acc .why__item { border-top: 1px solid var(--rule); padding: 14px 0 16px; }
  /* the number sits on the title's first line; the line itself stays centred in the tap target */
  .s-why.is-acc .why__btn { flex-wrap: wrap; align-content: center; align-items: baseline; cursor: pointer; min-height: 44px; }
  .s-why.is-acc .why__btn .pm { align-self: center; }
  .s-why.is-acc .why__t { flex: 1; font-size: 22px; }
  .s-why.is-acc .why__btn .pm { color: var(--ink-3); }
  .s-why.is-acc .why__item:not(.is-cur) .why__n { color: var(--ink-3); }
  .s-why.is-acc .frag { margin-top: var(--sp-2); }
  .why__text { padding-left: 0; margin-top: 10px; }
  .why__btn { gap: 12px; }
  .frag { margin-left: 0; padding: 22px 20px; }
  .mhead { display: none; }
  .mrows .mrow:first-child { border-top: 0; padding-top: 0; }
  .mrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s st" "w st"; row-gap: 2px; }
  .mrow__s { grid-area: s; } .mrow__w { grid-area: w; font-size: var(--fs-13); color: var(--ink-3); } .mrow__st { grid-area: st; }
  .agent__greet { font-size: 18px; }
  .agent__kv > div { grid-template-columns: 1fr; gap: 2px; }
  .agent__kv--n > div { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .agent__kv--n dd { font-size: 20px; }
  .agent__kv--n dt { font-size: var(--fs-14); }
  .crm > div { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .crm .crm__msg { grid-template-columns: 1fr; gap: 2px; }
  .sysl__t { font-size: 22px; }
  .plate { height: 56px; }
  .plate__t { font-size: 32px; padding: 0 16px; }
  .spoken { font-size: 21px; gap: 4px 7px; }
  .spoken span:not(:last-child)::after { margin-left: 7px; }
  .spoken--sm { font-size: 19px; }
  .spoken .spoken__g { gap: 2px 6px; }
  .spoken--fin { gap: 4px; font-size: 16px; }
  .spoken--fin .spoken__g { column-gap: 4px; }
  .spoken--fin .spoken__g + .spoken__g { margin-left: 10px; padding-left: 10px; }
  .spoken--fin .spoken__g span:not(:last-child)::after { margin-left: 4px; }
  .spoken.spoken--fin { margin-top: 14px; }
  .numbers__h { font-size: 19px; }
  .big__fig { font-size: clamp(56px, 16.4vw, 120px); }
  .numbers__slot { height: 22svh; }
  .small { grid-template-columns: 1fr 1fr; row-gap: var(--sp-5); }
  .small dd { font-size: clamp(32px, 10.2vw, 40px); }
  .uses__head { flex-direction: column; align-items: stretch; }
  .seg { display: flex; }
  .seg__btn { flex: 1; }
  .uses__tag { font-size: clamp(30px, 8vw, 40px); }
  .leads { grid-template-columns: 1fr; }
  .leads__col + .leads__col .lead:first-child { border-top: 0; }
  .leads__col:first-child .lead:last-child { border-bottom: 0; }
  .uses__vig { grid-column: 1 / -1; grid-row: auto; margin-top: var(--sp-5); justify-items: stretch; }
  .vig { width: 100%; }
  .s-names { min-height: 0; }
  .names__row { display: flex; justify-content: center; gap: 10px; margin-top: var(--sp-5); }
  .names__h { margin-top: var(--sp-4); font-size: 40px; line-height: 1.1; max-width: 9em; text-wrap: balance; }
  .nm .av { display: none; }
  .flows__tabs { display: flex; }
  .flows__tabs .seg__btn { height: auto; min-height: 52px; padding: 8px 12px; white-space: normal; line-height: 1.25; }
  .flow { margin-top: var(--sp-4); }
  .flow__grid { gap: var(--sp-5); }
  .strip { position: relative; }
  .steps { gap: var(--sp-6); }
  /* a phone swipes through a flow's five steps, one card set at a time */
  .s-flows.is-car .steps { display: flex; align-items: flex-start; gap: var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .s-flows.is-car .steps::-webkit-scrollbar { display: none; }
  .s-flows.is-car .flow, .s-flows.is-car .flow__grid, .s-flows.is-car .flow__grid > * { min-width: 0; }
  .s-flows.is-car .flow__grid { grid-template-columns: minmax(0, 1fr); }
  .s-flows.is-car .step { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
  .s-flows.is-car .steps__nav { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
  .s-flows.is-car .steps__nav .snav svg { transform: rotate(-90deg); }
  .steps__n { margin-right: auto; font: 500 var(--fs-14)/1 var(--sans); color: var(--ink-3); }
  .steps__n b { font-weight: 500; color: var(--ink); }
  .say__t { font-size: 20px; }
  .kv > div { grid-template-columns: 8.5em 1fr; align-items: start; }
  .kv dt { padding-top: 2px; }
  /* a long value wraps between its words inside the card, never past its edge */
  .kv dd .roll { max-width: 100%; }
  .kv dd .roll > span { white-space: normal; }
  .prow { grid-template-columns: 1fr auto; grid-template-areas: "t st" "s st" "w st"; row-gap: 2px; }
  .prow__t { grid-area: t; } .prow__s { grid-area: s; } .prow__w { grid-area: w; font-size: var(--fs-13); color: var(--ink-3); } .prow__st { grid-area: st; }
  .c-page { max-width: 300px; }
  .portal__head { row-gap: 20px; }
  .portal__head h2, .portal__points { grid-column: 1 / -1; }
  .portal__tabs { display: flex; margin-top: var(--sp-4); }
  .app, html.js .app { grid-template-columns: 1fr; height: auto; }
  .app__rail, .pane { display: none; }
  .app__view { grid-column: 1; }
  .app__view--list { display: block; }
  .calls__table thead { display: none; }
  .calls__table, .calls__table tbody, .calls__table tr, .calls__table td { display: block; width: auto; }
  .calls__table tbody tr[data-row] { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "subj subj" "time st" "who st"; padding: 16px 18px; border-bottom: 1px solid var(--rule); column-gap: 12px; row-gap: 4px; }
  .calls__table tbody tr[data-row] td { padding: 0; height: auto; border: 0; }
  .calls__table tbody tr[data-row] td:nth-child(1) { grid-area: time; padding-left: 0; }
  .calls__table tbody tr[data-row] td:nth-child(2), .calls__table .c-dur, .calls__table .c-tag { display: none; }
  .calls__table tbody tr[data-row] td:nth-child(3) { grid-area: subj; }
  .calls__table tbody tr[data-row] td:nth-child(5) { grid-area: st; align-self: center; }
  .calls__table tbody tr[data-row] td:nth-child(7) { grid-area: who; font-size: var(--fs-14); color: var(--ink-3); }
  .calls__day th { display: block; padding: 10px 18px 8px; }
  .calls__table tbody tr.is-sel { background: var(--surface); }
  .calls__table tbody tr.is-sel td:first-child { box-shadow: none; }
  .call__sel { font-size: 17px; }
  .call__detail td { padding: 0 18px; border-bottom: 1px solid var(--rule); }
  html.js .app[data-v="stats"] .app__rail { display: block; grid-row: 1; padding: 8px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .app__rail > :not(.rail__tabs) { display: none; }
  .rail__tabs { display: flex; gap: 4px; }
  .rail__tabs .rail__it { flex: 1; justify-content: center; min-height: 44px; padding: 9px 4px; }
  .rail__tabs svg { display: none; }
  html.js .app__view { grid-row: 2; }
  html:not(.js) .app__view--stats { grid-row: auto; }
  .rp { padding: 16px 14px 18px; }
  .rp-kpis { gap: 8px; }
  .rp-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpis--5 .rp-kpi:last-child { grid-column: 1 / -1; }
  .rp-kpi { padding: 10px 10px 12px; }
  .rp-kpi__k { font-size: 12px; }
  .rp-kpi__v { font-size: var(--fs-19); }
  .rp-title, .rp-btn, .rp-yr { display: none; }
  .rp-cards, .rp-cards--rt, .rp-cards--pk { grid-template-columns: minmax(0, 1fr); }
  .rp-card { padding: 12px 12px 14px; }
  .rp-hb { --lw: 96px !important; }
  .rp-lc--day { --h: 190px; }
  .rp-vb { --h: 160px; }
  .rp-lc--trend { --h: 170px; }
  .rp-t .c-calls { display: table-cell; }
  .rp-t__t th, .rp-t__t td:nth-child(3) { white-space: normal; }
  .rp-t__t th:nth-child(3), .rp-t__t td:nth-child(3) { display: none; }
  .rp-mb { width: 52px; }
  .case__title { font-size: clamp(32px, 8.4vw, 44px); }
  .results { margin-top: var(--sp-6); }
  .results__list { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-3); }
  .results__list .fig { font-size: clamp(34px, 10vw, 44px); }
  .results__list p { font-size: 15px; }
  .logos--int { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 84px; column-gap: 0; width: 100%; margin-top: var(--sp-5); }
  .int__more { margin-top: var(--sp-5); font-size: 22px; }
  .start__path { display: none; }
  .start__steps { margin-top: var(--sp-5); grid-template-columns: 1fr; row-gap: var(--sp-4); padding-left: 48px; }
  .sstep { position: relative; }
  .sstep__n { font-size: 36px; }
  .sstep__t { margin-top: 10px; }
  .tisax__badges { justify-content: flex-start; margin-top: var(--sp-5); }
  .tisax__badges img { height: 52px; }
  .tisax__slot { display: none; }
  .h-close { font-size: clamp(32px, 8.4vw, 48px); }
  .close__num { font-size: clamp(28px, 8.7vw, 34px); }
  .s-faq h2 { position: static; }
  .faq { margin-top: var(--sp-5); }
  .faq__g { padding-top: 32px; }
  .qa summary { font-size: 17px; min-height: 64px; }
  .qa__a { padding-right: 0; font-size: 17px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  /* dock becomes Menü | Anrufen | Demo buchen */
  .dock { left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .dock__in { width: 100%; height: 60px; justify-content: space-between; gap: 6px; }
  .dock .pause, .dock__nav, .dock__div, .dock__num { display: none; }
  .dock__menu { display: inline-flex; align-items: center; height: 48px; padding: 0 16px; font: 600 var(--fs-15)/1 var(--sans); border-radius: var(--r-pill); }
  .dock__tel { flex: 1; justify-content: center; height: 48px; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); padding: 0 12px; }
  .dock .pill--sm { height: 48px; padding: 0 18px; }
}
/* phones: Gespräche takes the full row, the other two tiles share one and drop the watermark */
@media (max-width: 599px) {
  .rp-kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-kpis--3 .rp-kpi:first-child { grid-column: 1 / -1; }
  .rp-kpis--3 .rp-kpi + .rp-kpi .rp-kpi__spark { display: none; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 40px; }
  .hero__cta, .hero__listen { margin-right: 36px; }
  .tel { gap: 8px; padding: 0 16px; }
  .dock__menu { padding: 0 10px; }
  .names__h { font-size: 36px; }
  .seg--sm .seg__btn { padding: 0 10px; }
  .rp { padding-inline: 10px; }
  .rp-kpi__v { font-size: 16px; white-space: normal; }
  .rp-t .c-calls { display: none; }
  .rp-mb { width: 44px; }
}
/* laptop heights: the hero stays inside the first screen, the stages scale down */
@media (min-width: 1024px) and (max-height: 880px) {
  .hero { padding-top: calc(var(--bar-h) + 8px); padding-bottom: 88px; }
  .hero h1 { font-size: clamp(40px, min(4.1vw, 7.2vh), 60px); }
  .hero__sub { margin-top: 22px; }
  .hero__cta, .badges { margin-top: 28px; }
  .s-flows.is-seq .flow { margin-top: 24px; }
  .flows__tabs { margin-top: 16px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .s-flows .h-chapter, .s-why .h-chapter { font-size: clamp(32px, 2.8vw, 40px); }
  .s-flows.is-seq .flow { margin-top: 18px; }
  .flows__tabs { margin-top: 12px; }
  .s-flows.is-seq .flow__grid { row-gap: 16px; }
  .s-flows.is-seq .flow__area { height: 384px; }
  .why__head .h-chapter { margin-top: 10px; }
  .why__body { margin-top: 32px; }
  .s-why.is-seq .proof { height: 400px; }
  .s-why.is-seq .why__item { padding: 5px 0; }
  .why__intro { margin-top: 10px; }
  .s-flows.is-seq .c-tall .card__foot { display: none; }
}
@media (min-width: 1024px) and (max-height: 740px) {
  .s-flows.is-seq .flow__area { height: 360px; }
  .s-flows.is-seq .strip { height: 56px; }
  .s-flows.is-seq .card { padding: 16px 20px; }
  .say + .say { margin-top: 10px; }
  .s-why.is-seq .proof { height: 360px; }
  html.seq .s-why__stage { padding-bottom: calc(var(--dock-clear) + 28px); }
  .why__intro { margin-top: 6px; }
  .why__body { margin-top: 16px; }
  .s-why.is-seq .why__item.is-cur .why__text { margin-bottom: 10px; }
  .s-why.is-seq .why__item { padding: 3px 0; }
  .s-why.is-seq .why__text { font-size: var(--fs-16); }
  .proof .frag { padding: 18px 28px 22px; }
  .proof .frag__h { margin-bottom: 14px; }
  .proof .sysl { padding: 10px 0; }
  .proof .crm > div { padding: 2px 0; }
  .proof .agent__kv--n > div { padding: 5px 0; }
  /* the Vorteile stage keeps its two tab rows clear of its footer */
  html.seq .s-adv__stage { padding-bottom: calc(var(--dock-clear) + 60px); }
  html.seq .adv__list { margin-top: var(--sp-4); }
  .adv__tabs { margin-top: var(--sp-3); }
}
/* a narrow, short laptop: the proof cards wrap more, so they tighten as on a short screen */
@media (min-width: 1024px) and (max-width: 1179px) and (max-height: 820px) {
  .proof .frag { padding: 18px 28px 22px; }
  .proof .frag__h { margin-bottom: 14px; }
  .proof .sysl { padding: 10px 0; }
  .proof .crm > div { padding: 2px 0; }
}
html.art body > *:not(.silk) { visibility: hidden !important; }
@media (max-width: 374px) { .spoken--fin { font-size: 15px; } .ordno__v { flex-wrap: wrap; row-gap: 6px; } }
/* the plate read-out stays on one line on phones */
@media (max-width: 430px) {
  .spoken:not(.spoken--sm) { font-size: 18px; gap: 4px 6px; }
  .spoken:not(.spoken--sm) span:not(:last-child)::after { margin-left: 6px; }
}
/* the hero sample's line as a byline: the name above, the dealership below */
@media (max-width: 430px) {
  .lcard__who b { display: block; }
  .lcard__sep { display: none; }
}