/* /design/css/tokens.css */
/* Metric-matched fallback for Onest (perf 21.10): the text set in Arial/Helvetica takes the width and line height of Onest, so the swap
   when the font file arrives does not move the lines. Values: Onest hhea 970 / -305 / 0 on 1000 upm, mean letter width vs Arial. */
@font-face { font-family: "Onest Fallback"; font-weight: 400; src: local("Arial"), local("Helvetica"), local("Arimo"), local("Liberation Sans"); size-adjust: 107.69%; ascent-override: 90.07%; descent-override: 28.32%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; font-weight: 500; src: local("Arial"), local("Helvetica"), local("Arimo"), local("Liberation Sans"); size-adjust: 108.88%; ascent-override: 89.09%; descent-override: 28.01%; line-gap-override: 0%; }
@font-face { font-family: "Onest Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Arimo Bold"), local("Liberation Sans Bold"); size-adjust: 100.13%; ascent-override: 96.87%; descent-override: 30.46%; line-gap-override: 0%; }

/* Klaumo design tokens — brandbook v1.2 (14.10.2026) + Liquid Glass rules (research 26, 52–54).
   Light world only: the owner excluded dark themes, so there is no dark-mode remap. */
:root {
  /* brand colours (brandbook p.10) */
  --ink: #212121;
  --paper: #f6f5fa;
  /* 5 colour families (owner 14.10) — nothing outside them:
     1 neutral (ink · paper · white · greys) · 2 warm (brand circle, the result) · 3 sky (the client, focus)
     4 green (confirm / success only) · 5 red (error / end only). Each family: base · soft · tint · ink · rgb channels */
  --warm: #e8743b;        /* the circle: the next step / the answer. Never text */
  --warm-soft: #f4b48c;   /* only inside Föhn */
  --warm-tint: #fbe4d6;
  --warm-ink: #a8491a;    /* text/glyph on warm-tint 4.73:1 */
  --warm-rgb: 232, 116, 59;
  --sky: #6f9bd1;         /* the client */
  --sky-soft: #bfd3ea;    /* only inside Föhn and the sky tile */
  --sky-tint: #dce8f5;
  --sky-ink: #33609a;     /* text/glyph on sky-tint 5.15:1 */
  --sky-rgb: 111, 155, 209;
  --green-rgb: 31, 122, 58;
  --red-rgb: 215, 0, 21;
  --grey-1: #e4e6ec;      /* underlays, info cards, grey tile */
  --grey-2: #ebeaf1;      /* group underlay */
  --shade: 31, 62, 120;   /* every shadow: one cool shade, alpha only */
  /* legacy names → families (keep old markup working) */
  --sky-pastel: var(--sky-soft);
  --peach: var(--warm-soft);
  --alice: var(--grey-1);

  --bg: var(--paper);
  --card: #ffffff;
  --text: var(--ink);
  --text-2: #5c5c66;      /* 6.09:1 on paper */
  --text-3: #6e6e78;      /* captions ≥ 13 px only */
  --line: var(--alice);
  --fill: rgba(120, 130, 150, 0.12);   /* iOS fill: chips, fields, slots — no borders */
  --fill-strong: rgba(120, 130, 150, 0.2);
  --focus: #3d6fb3;   /* 4.9:1 on white, the light sky ring was 2.88:1 (a11y audit 22.10, WCAG 1.4.11) */

  /* meaning (owner 14.10): every positive action and answer is GREEN, every negative one is RED.
     Fills carry white text (≥ 4.7:1 across the gradient); bright Apple green/red only as glow, never alone. */
  --positive: #1f7a3a;                                         /* 4.96:1 on paper — dots, icons, text */
  --positive-fill: linear-gradient(180deg, #22843e, #1a6a32);  /* buttons: white text 4.73–6.66:1 */
  --positive-tint: #e3f6e7;
  --positive-ink: #1b6e2f;                                     /* text on tint 5.61:1 */
  --positive-glow: rgba(52, 199, 89, 0.45);
  --negative: #d70015;                                         /* white text 5.38:1 */
  --negative-fill: linear-gradient(180deg, #e0141f, #b00012);  /* buttons: white text 4.9–7.36:1 */
  --negative-tint: #ffe5e3;
  --negative-ink: #d70015;                                     /* text on tint 4.5:1 */
  --negative-glow: rgba(255, 59, 48, 0.45);
  /* legacy names used by components */
  --loss: var(--negative); --loss-ink: var(--negative-ink); --loss-tint: var(--negative-tint);
  --gain: var(--positive); --gain-ink: var(--positive-ink); --gain-tint: var(--positive-tint);

  /* Föhn: sky pastel bottom-left, peach top-right, on paper */
  --foehn:
    radial-gradient(120% 90% at 100% 0%, rgba(244, 180, 140, 0.55), rgba(244, 180, 140, 0) 60%),
    radial-gradient(120% 90% at 0% 100%, rgba(191, 211, 234, 0.9), rgba(191, 211, 234, 0) 62%),
    var(--paper);

  /* type: Onest 400 / 500 / 600 */
  --font: "Onest", "Onest Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(40px, 9vw, 76px);
  --fs-title: clamp(28px, 6vw, 40px);
  --fs-headline: 21px;
  --fs-body: 18px;
  --fs-callout: 16px;
  --fs-caption: 13px;
  --fs-label: 13px;
  --lh-tight: 1.04;
  --lh-title: 1.15;
  --lh-body: 1.5;
  --track-display: -0.032em;
  --track-label: 0.08em;

  /* space: 4 / 8 rhythm */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  /* page layout (owner 20.10: «spacing in order on every screen»): one content width, one edge, one rhythm for every
     section of the site — the home page and the industry landings */
  --page-max: 1376px;                                                       /* content width */
  --edge: max(clamp(16px, 2.2vw, 32px), calc((100% - var(--page-max)) / 2));  /* side edge: 16 on phones → 32, then centred */
  --section-y: clamp(64px, 9vw, 128px);                                     /* from one section to the next */
  --head-gap: clamp(32px, 5vw, 64px);                                       /* from a section headline to its cards */
  --card-gap: 16px;                                                         /* between cards (12 on phones) */
  --edge-vw: max(clamp(16px, 2.2vw, 32px), calc((100vw - var(--page-max)) / 2));   /* the same edge for fixed and absolute layers (header, hero) */
  --card-pad: clamp(20px, 2.4vw, 32px);                                   /* inside a card: 20 on phones → 32 */
  --col-8: 912px;                                                           /* 8 of 12 columns of the page width: centred text columns */

  /* radii: concentric (inner = outer − padding) */
  --r-xl: 36px; --r-l: 28px; --r-m: 20px; --r-s: 14px; --r-pill: 999px;  /* one scale: sheets · cards/tiles · rows/fields · small */

  /* elevation */
  --shadow-1: 0 1px 2px rgba(33, 33, 33, 0.05), 0 8px 24px -12px rgba(31, 62, 120, 0.18);
  --shadow-2: 0 1px 2px rgba(33, 33, 33, 0.05), 0 28px 56px -24px rgba(31, 62, 120, 0.32);
  --shadow-warm: 0 10px 30px -8px rgba(232, 116, 59, 0.55);

  /* glass (functional layer only, ≥ 55 % tint because Safari hides Reduce Transparency) */
  --glass-1: linear-gradient(140deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.58) 60%, rgba(255, 255, 255, 0.66));
  --glass-2: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(232, 238, 247, 0.66) 60%, rgba(252, 236, 226, 0.7));
  --glass-ink: linear-gradient(160deg, rgba(64, 64, 70, 0.94), rgba(33, 33, 33, 0.97));
  --blur-1: blur(18px) saturate(190%);
  --blur-2: blur(24px) saturate(180%);

  /* motion (research 27 §6.1) */
  --d-micro: 160ms; --d-ui: 320ms; --d-step: 640ms; --d-story: 1100ms;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-snap: cubic-bezier(0.5, 0, 0.1, 1);
  --e-morph: cubic-bezier(0.7, 0, 0.2, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: var(--e-out);   /* the name five style sheets used without it being defined (UX audit 22.10) */

  /* layers */
  --z-content: 0; --z-sticky: 10; --z-dock: 40; --z-sheet: 100; --z-toast: 200; --z-loader: 1000;

  /* touch */
  --hit: 44px;
  --btn-h: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 1ms; --d-ui: 1ms; --d-step: 1ms; --d-story: 1ms; }
}

/* touch (UX audit 22.10): no grey flash on a tap on iPhone, no double-tap zoom delay on controls; components.css had it,
   but neither the home nor the landings load that file */
a, button, summary, [role="button"], input, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* every link and button shows a clear ring for the keyboard (a11y audit 22.10: the browser's thin default on some links) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }   /* a section the keyboard was moved to is not a control */

/* text that wraps well (visual audit 22.10, ui-ux-pro-max: no single word left on the last line): headlines balance their
   lines, running text avoids an orphan; no automatic hyphenation anywhere ("erhal-ten") */
h1, h2, h3, h4, summary, .wd-card__title, .pr-title { text-wrap: balance; }
p, li, figcaption, blockquote, dd, .pr-card__what, .pr-card__for span { text-wrap: pretty; }
html { hyphens: manual; -webkit-hyphens: manual; }
.sh__logo { color: inherit; }

/* text for screen readers only (every page, also those without components.css) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* «Play again» (owner 22.10: one button everywhere): the demo call, the service cards, the landing's chat and cards.
   A 44 px white disc, a small filled triangle. The !important on the glyph beats the landing's rule that draws every
   icon as a stroke at full size (it made a big outlined triangle over the text) */
.fa-replay, .wd-replay, .v4-replay { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: scale .2s ease;
  /* a soft warm glow so it reads as a button on any picture (owner 22.10: «not obvious, not seen»), breathing slowly */
  box-shadow: 0 0 0 4px rgba(var(--warm-rgb), .16), 0 6px 20px -4px rgba(var(--warm-rgb), .55), inset 0 0 0 1px rgba(var(--warm-rgb), .25);
  animation: replay-glow 2.8s ease-in-out infinite; }
@keyframes replay-glow { 50% { box-shadow: 0 0 0 7px rgba(var(--warm-rgb), .08), 0 6px 26px -2px rgba(var(--warm-rgb), .7), inset 0 0 0 1px rgba(var(--warm-rgb), .35); } }
@media (prefers-reduced-motion: reduce) { .fa-replay, .wd-replay, .v4-replay { animation: none; } }
/* the triangle sits on its centre of gravity, the optical centre of the circle (the icon's path is drawn at x 8–18.5 of
   24, so its middle of mass is at 11.5: no extra shift; the old 2 px push put it right of centre) */
.fa-replay svg, .wd-replay svg, .v4-replay svg, .wd-replay .icon, .v4-replay .icon { width: 16px !important; height: 16px !important; margin: 0 !important; fill: currentColor !important; stroke: none !important; }
.wd-replay .icon, .v4-replay .icon { display: grid; place-items: center; }
.fa-replay:active, .wd-replay:active, .v4-replay:active { scale: .94; }
.fa-replay:focus-visible, .wd-replay:focus-visible, .v4-replay:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* /design/css/hero-video.css */
/* Hero, video variant (research 58). Screen 1: the frost is in the video itself; HTML on top: headline + the circle.
   Screen 2 opens as a circle growing from the button: code letters assemble Kaia's head. */
html, body { margin: 0; background: var(--paper); }
html { height: 100%; } body { min-height: 100%; }   /* min-height: a body that clips at one screen (a scroll lock) can never shrink the page and throw the scroll to the top (22.10) */
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }   /* nothing that flies or tilts may widen the page on phones */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  /* one fluid unit for the hero (owner 14.10: elements adapt to the screen, not wider margins):
     1px at 1440 wide, scales with the viewport, from 0.82px (≈1180) up to 1.6px (≈2300+) */
  --k: clamp(0.82px, calc(100vw / 1440), 1.6px); --gutter: calc(56 * var(--k)); }
.s1, .s2 { position: absolute; inset: 0; }

/* screen 1 */
.s1 { background: radial-gradient(120% 90% at 100% 0%, #f6e9e2, transparent 60%), linear-gradient(180deg, #edf1f7, #e2ecf7); }   /* matches the video's own frosted background */
.s1__video { position: absolute; left: -2%; top: -2%; width: 104%; height: 104%; object-fit: fill; will-change: transform;
  /* the video is moved so the finger meets the circle; its edges fade out so a moved frame never shows a hard border */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect; }
/* no layout shift (CLS, check 20.10): the video and the button are drawn only once the script has placed them */
.s1__video:not(.is-placed) { visibility: hidden !important; }   /* !important: GSAP's autoAlpha writes an inline visibility */
.s1:not(.is-placed) .cta, .s1:not(.is-placed) .cta-waves { visibility: hidden; }
/* extra frost over the video: the body stays a silhouette (its design does not have to match Kaia's head on screen 2);
   only the spot where the fingertip meets the glass stays clear */
.s1__code { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; filter: blur(2px); }   /* code just behind the glass: soft, but readable as letters */
.s1__frost { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(244, 246, 250, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%);
  -webkit-mask-image: radial-gradient(circle at var(--kx, 70%) var(--ky, 40%), transparent 0 38px, #000 120px);
  mask-image: radial-gradient(circle at var(--kx, 70%) var(--ky, 40%), transparent 0 38px, #000 120px); }
.s1::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* keeps the headline side calm and readable */
  background: linear-gradient(90deg, rgba(246, 245, 250, 0.72) 0%, rgba(246, 245, 250, 0.35) 38%, transparent 58%); }
.s1__knock { position: absolute; z-index: 2; left: var(--kx, 70%); top: var(--ky, 50%); width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.8); }

.top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(calc(20 * var(--k)), env(safe-area-inset-top)) var(--gutter) 0; }
.top img { height: calc(28 * var(--k)); width: auto; }
.top__menu { width: calc(48 * var(--k)); height: calc(48 * var(--k)); border: 0; border-radius: 50%; display: grid; place-content: center; grid-auto-flow: column; gap: 4px; cursor: pointer;
  background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: var(--blur-1); backdrop-filter: var(--blur-1);
  box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, 0.9), 0 6px 16px -8px rgba(var(--shade), 0.35); }
.top__menu span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }

.copy { position: absolute; z-index: 10; left: var(--edge-vw); top: 0; bottom: 0; width: min(calc(620 * var(--k)), calc(62vw - var(--edge-vw))); display: flex;   /* never into the right half (the button) */ flex-direction: column; justify-content: center; pointer-events: none; }
.copy__eyebrow { margin: 0 0 calc(18 * var(--k)); font-size: max(12px, calc(13 * var(--k))); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.copy__h1 { margin: 0; font-size: calc(76 * var(--k)); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.copy__sub { max-width: 36ch; margin: calc(28 * var(--k)) 0 0; font-size: calc(17 * var(--k)); line-height: 1.45; color: var(--text-2); }

/* the button (research 59): one pill = a familiar button shape. Left: the warm brand circle with a mic (the robot's
   finger presses it). Right: the action text and an arrow. Placed by JS: --bx/--by = centre of the whole button. */
.cta { --dot: calc(60 * var(--k)); position: absolute; z-index: 10; left: var(--bx, 75%); top: var(--by, 50%);   /* centred by GSAP xPercent/yPercent (GSAP also moves it) */
  display: inline-flex; align-items: center; gap: calc(14 * var(--k)); height: calc(76 * var(--k)); padding: calc(8 * var(--k)) calc(24 * var(--k)) calc(8 * var(--k)) calc(8 * var(--k)); border: 0; border-radius: 999px; overflow: hidden;
  font: 600 calc(18 * var(--k))/1 var(--font); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; will-change: transform; }
.cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
/* shape A · ink: the main button of the design system */
.cta[data-shape="ink"] { color: #fff; background: radial-gradient(120% 160% at 30% 0%, #4a4a52, #212121 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 18px 40px -16px rgba(0, 0, 0, 0.55); }
/* shape B · glass: Liquid Glass in the tone of the frosted pane */
.cta[data-shape="glass"] { color: var(--ink); background: linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 8px -4px rgba(var(--shade), 0.28), 0 18px 40px -16px rgba(var(--shade), 0.5); }
.cta__dot { position: relative; flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(var(--warm-rgb), 0.18), 0 6px 16px -6px rgba(var(--warm-rgb), 0.8); }
.cta__dot canvas { grid-area: 1 / 1; width: 100%; height: 100%; }
.cta[data-dot="flat"] .cta__dot { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); }
.cta[data-dot="flat"] .cta__dot canvas { display: none; }
.cta[data-dot="plasma"] .cta__dot::after { content: ""; grid-area: 1 / 1; width: 100%; height: 100%;   /* calm the bright centre under the mic */
  background: radial-gradient(circle, rgba(110, 32, 0, 0.5) 0, rgba(110, 32, 0, 0.2) 30%, transparent 55%); }
.cta__mic { grid-area: 1 / 1; z-index: 1; width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(80, 20, 0, 0.6)); }
.cta__arrow { width: calc(20 * var(--k)); height: calc(20 * var(--k)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-left: -4px; }
/* a light sheen sweeps across once (on the first knock of a cycle and on hover) — a finite attention cue */
.cta__sheen { position: absolute; inset: 0; pointer-events: none; visibility: hidden;   /* position only via GSAP xPercent (set in JS) */
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); }
.cta[data-shape="glass"] .cta__sheen { background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.95) 50%, transparent 70%); }
/* soft waves under the button (owner 14.10): pill-shaped rings drift out slowly and fade */
.cta-waves { position: absolute; z-index: 9; left: var(--bx, 75%); top: var(--by, 50%); width: var(--bw, 290px); height: var(--bh, 76px); pointer-events: none; }   /* centred by GSAP, moves with the button */
.cta-waves i { position: absolute; inset: 0; border-radius: 999px; opacity: 0;   /* smooth filled waves, no outline (owner 14.10) */
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25) 60%, rgba(var(--warm-rgb), 0.06) 85%, transparent);
  filter: blur(6px);
  animation: cta-wave 5.4s cubic-bezier(0.25, 0.1, 0.25, 1) 3; }   /* three rounds (~16 s), then still (UX audit 22.10) */
.cta-waves i:nth-child(2) { animation-delay: 1.8s; }
.cta-waves i:nth-child(3) { animation-delay: 3.6s; }
@keyframes cta-wave { 0% { opacity: 0; transform: scale(0.95, 0.9); } 20% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1.35, 2.1); } }
@media (prefers-reduced-motion: reduce) { .cta-waves i { animation: none; } }
/* one impulse from the circle on every knock (drawn outside the pill, so it is a separate element) */
.cta-ring { position: absolute; z-index: 9; left: var(--ox); top: var(--oy); width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(var(--warm-rgb), 0.75), 0 0 22px rgba(var(--warm-rgb), 0.5); }

/* screen 2 */
.s1 { z-index: 2; }
/* screen 2 lies under screen 1: on press the glass of screen 1 dissolves (noise mask) and the head from code shows through */
.s2 { z-index: 1; background: var(--foehn); }
.s2__rain, .s2__head { position: absolute; inset: 0; width: 100%; height: 100%; }
.s2__face { position: absolute; opacity: 0; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.s2__cta { position: absolute; z-index: 10; left: 0; right: 0; bottom: clamp(28px, 8vh, 80px); display: flex; justify-content: center; opacity: 0; }
.btn-start { height: calc(60 * var(--k)); min-height: 52px; padding: 0 calc(32 * var(--k)); border: 0; border-radius: 999px; font: 600 calc(18 * var(--k))/1 var(--font); color: var(--ink); cursor: pointer;   /* same white glass as the main button (owner 14.10) */
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 8px -4px rgba(var(--shade), 0.28), 0 18px 40px -16px rgba(var(--shade), 0.5); }
.btn-start:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* phone (portrait): robot and circle on top, headline at the bottom (owner 14.10) */
@media (max-aspect-ratio: 4/5) {
  .stage { --k: 1px; --gutter: 16px; }
  .cta { --dot: 56px; height: 70px; font-size: 17px; padding-right: 20px; }
  .copy { width: auto; right: 16px; justify-content: flex-end; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  /* the eyebrow sits at the top, under the logo (owner 14.10); headline and subheading stay at the bottom */
  .copy__eyebrow { position: absolute; left: 0; right: 0; top: calc(max(14px, env(safe-area-inset-top)) + 58px); margin: 0; font-size: 12px; }
  .copy__h1 { font-size: clamp(32px, 9.4vw, 46px); }
  /* the subheading stays on the phone (owner 14.10): with the slogan as H1 it is the line that says what we do */
  .copy__sub { display: block; max-width: 40ch; margin-top: 14px; font-size: 15px; line-height: 1.45; }
  .s1::after { background: linear-gradient(0deg, rgba(246, 245, 250, 0.94) 0%, rgba(246, 245, 250, 0.7) 32%, transparent 56%); }
}



/* ---------- K loader (research 60): the same frosted glass as the hero; the glass stays, only the mark leaves ---------- */
.stage.is-loading .copy, .stage.is-loading .top, .stage.is-loading .cta, .stage.is-loading .cta-waves, .stage.is-loading .s1__code, .stage.is-loading .kbubble { visibility: hidden; }
.kl { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: calc(28 * var(--k)); pointer-events: none; }
.kl__glass { position: absolute; inset: 0; background: var(--foehn); }
.kl__glass::after { content: ""; position: absolute; inset: 0; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* the full logo (K + laumo): large on desktop, almost the full width on the phone (owner 14.10) */
.kl__mark { position: relative; width: min(88vw, calc(780 * var(--k))); aspect-ratio: 398 / 108; }
.kl__svg { width: 100%; height: 100%; overflow: visible; }
/* while loading: a large warm circle with the counter inside and a progress arc around it */
.kl__orb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(170px, 34vmin, 340px); aspect-ratio: 1; display: grid; place-items: center; container-type: inline-size; }
.kl__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: -90deg; }
.kl__track, .kl__arc { fill: none; stroke-width: 1.6; }
.kl__track { stroke: rgba(var(--warm-rgb), 0.22); }
.kl__arc { stroke: var(--warm); stroke-linecap: round; }
.kl__comet { fill: var(--warm); }
.kl__core { width: 78%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--warm);
  box-shadow: 0 10px 30px -12px rgba(var(--warm-rgb), 0.7); }
.kl__num { font: 600 30cqw/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff; }
.kl__fly { position: fixed; z-index: 40; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 6px 16px -6px rgba(var(--warm-rgb), 0.8); }
.kl__raster { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Kaia's speech bubble above the button (research 59 §10); nothing under the button (owner 14.10) ----------
   The outer box is placed by JS from the button's real box; only the inner box is animated
   by GSAP (GSAP would absorb a CSS translate on the element it moves). */
.kbubble { position: absolute; z-index: 11; left: 55%; bottom: 60%;   /* placed by JS from the button's real box */
  width: min(calc(360 * var(--k)), calc(100vw - 32px)); min-width: min(280px, calc(100vw - 32px)); pointer-events: none; }
@media (max-aspect-ratio: 4/5) {
  .kbubble { width: auto; left: 16px; right: 16px; min-width: 0; }
  .kbubble__in { margin: 0 auto; max-width: 360px; padding: 12px 16px 13px; }
  .kbubble__hello, .kbubble__text { font-size: 15px; }
  }
/* very short phones (iPhone SE 1st gen, 320×568): everything slightly tighter so eyebrow, bubble, button, headline and
   subheading all fit — German texts are the longest (check 14.10) */
@media (max-aspect-ratio: 4/5) and (max-height: 620px) {
  .copy { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .copy__eyebrow { top: calc(max(14px, env(safe-area-inset-top)) + 52px); font-size: 11px; }
  .copy__h1 { font-size: 28px; }
  .copy__sub { margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
  .cta { --dot: 50px; height: 60px; font-size: 16px; }
  .kbubble__in { padding: 10px 14px 11px; }
  .kbubble__hello, .kbubble__text { font-size: 13.5px; }
}
/* the slogan breaks into even lines (no single word left on the second line: "Less busywork, more / time") */
.copy__h1 { text-wrap: balance; }
.kbubble__text, .copy__sub { text-wrap: pretty; }

/* ---------- headline accents (owner 15.10, prototype: ?fx=none|marker|line|letters) ---------- */

/* ---------- bubble variants (prototype: ?bubble=light|warm|warmw|ink) ---------- */
.kbubble[data-bubble="warm"] .kbubble__in, .kbubble[data-bubble="warmw"] .kbubble__in {
  background: radial-gradient(circle at 30% 20%, #f39a66, var(--warm) 60%, #db6630); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 14px 30px -14px rgba(var(--warm-rgb), 0.8); }
.kbubble[data-bubble="warm"] .kbubble__in::after, .kbubble[data-bubble="warmw"] .kbubble__in::after { background: #e06d34; box-shadow: none; }
.kbubble[data-bubble="warmw"] .kbubble__hello, .kbubble[data-bubble="warmw"] .kbubble__text { color: #fff; }
.kbubble[data-bubble="warm"] .kbubble__caret, .kbubble[data-bubble="warmw"] .kbubble__caret { background: currentColor; }


/* the press is felt on the hero button too (UX audit 22.10; the landing's button had no feedback) */
.cta { transition: scale .12s ease; }
.cta:active { scale: .97; }

/* the hero holds the headline, the subheading and the Kaia button only (owner 22.10: «accent on the button, the
   headline and the subheading»); the facts and the call-back link live further down the page */

/* the eyebrow (the page's keyword) and the slogan are one <h1> (SEO-v5 §1, keyword audit 22.10); each keeps its own look */
.copy__title { margin: 0; font: inherit; color: inherit; letter-spacing: normal; }
.copy__title > .copy__eyebrow, .copy__title > .copy__h1 { display: block; }

/* /design/css/kaia-accents.css */
/* Kaia's speech bubble and the headline marker — shared by the hero and the design system (section 18).
   Sizes follow the hero unit --k (1px at 1440 wide); outside the hero --k falls back to 1px. Owner 14–15.10. */

/* ---------- bubble: glass base; the approved look is black (.kbubble[data-bubble="ink"]) ---------- */
.kbubble__in { position: relative; padding: calc(14 * var(--k, 1px)) calc(18 * var(--k, 1px)) calc(15 * var(--k, 1px)); border-radius: calc(22 * var(--k, 1px)) calc(22 * var(--k, 1px)) calc(22 * var(--k, 1px)) 8px; transform-origin: 26px 100%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 1px 1px #fff, 0 14px 34px -16px rgba(var(--shade), 0.45); }
.kbubble__in::after { content: ""; position: absolute; left: var(--tail, 22px); bottom: -7px; width: 14px; height: 14px; border-radius: 3px; rotate: 45deg;   /* the tail points at the warm circle */
  background: rgba(255, 255, 255, 0.86); box-shadow: 3px 3px 6px -3px rgba(var(--shade), 0.25); }
.kbubble__hello { margin: 0 0 4px; font: 600 calc(15 * var(--k, 1px))/1.3 var(--font); color: var(--ink); min-height: 1.3em; }
.kbubble__text { margin: 0; font: 400 calc(15 * var(--k, 1px))/1.45 var(--font); color: var(--ink); min-height: 1.45em; }   /* one short line since 22.10 (owner): no empty band under it */
.kbubble__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--warm); border-radius: 1px; }

/* approved 15.10: black bubble, white text (16:1), the greeting in peach */
.kbubble[data-bubble="ink"] .kbubble__in { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 14px 30px -14px rgba(33, 33, 33, 0.6); }
.kbubble[data-bubble="ink"] .kbubble__in::after { background: var(--ink); box-shadow: none; }
.kbubble[data-bubble="ink"] .kbubble__hello { color: var(--warm-soft); }
.kbubble[data-bubble="ink"] .kbubble__text { color: #fff; }

/* ---------- marker under the promise: the two masked lines + the accent ---------- */
.h1-ln { display: block; overflow: clip; padding-bottom: 0.2em; margin-bottom: -0.2em; }   /* the mask each line rises from */
.h1-in { display: inline-block; }
.h1-key { position: relative; display: inline-block;
  background-image: linear-gradient(var(--warm-soft), var(--warm-soft)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 0.34em; }
.h1-key__t { position: relative; z-index: 1; }
.h1-line { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.3em; overflow: visible; pointer-events: none; }
.h1-line path { fill: none; stroke: var(--warm); stroke-width: 6; stroke-linecap: round; }

/* /design/css/site-header.css */
/* Site header (research 61, variant A). Glass = functional layer only: the nav capsule, the round buttons,
   the dropdowns, the sheet and the floating Kaia button. Blur is never animated (only transform / opacity / clip-path). */
.sh { --sh-h: 48px; --sh-pad: var(--edge-vw);   /* the logo and the buttons stand on the page edge (grid 20.10) */
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) var(--sh-pad) 0; pointer-events: none; }
.sh > * { pointer-events: auto; }
/* once the page scrolls, a soft paper fade (not glass) keeps the logo readable over the content */
.sh::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -28px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: linear-gradient(180deg, rgba(246, 245, 250, 0.94) 0%, rgba(246, 245, 250, 0.8) 60%, rgba(246, 245, 250, 0)); }
.sh.sh--scrolled::before { opacity: 1; }
body.is-loading .sh, body.is-loading .kfab { visibility: hidden; }

.sh__logo { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; border-radius: 12px; }
.sh__logo img { height: clamp(24px, 1.9vw, 30px); width: auto; display: block; }

/* glass recipe shared by the capsule, the round buttons, the dropdowns, the sheet and the floating button */
.sh__nav, .sh__round, .sh__drop, .sh-sheet, .kfab {
  background: var(--glass-1); -webkit-backdrop-filter: var(--blur-1); backdrop-filter: var(--blur-1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 10px 30px -14px rgba(var(--shade), 0.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sh__nav, .sh__round, .sh__drop, .sh-sheet, .kfab { background: rgba(255, 255, 255, 0.96); }
}

/* desktop capsule */
.sh__nav { position: relative; display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.sh__item { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: none; color: var(--ink); font: 500 15px/1 var(--font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.sh__item:focus-visible, .sh__round:focus-visible, .sh__logo:focus-visible, .sh-ind:focus-visible, .sh-lang:focus-visible, .sh-sheet__item:focus-visible, .kfab:focus-visible, .sh-kaia:focus-visible {
  outline: 2px solid var(--sky); outline-offset: 2px; }
.sh__bead { position: absolute; z-index: -1; inset: 0; border-radius: 999px; pointer-events: none;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px -3px rgba(var(--shade), 0.35), inset 0 1px 0 #fff; }
.sh__chev { display: inline-flex; width: 16px; height: 16px; transition: rotate 0.3s var(--ease-out, ease); }
.sh__chev svg, .sh-ind__icon svg, .sh-lang__check svg, .kfab__dot svg, .sh-kaia__dot svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[aria-expanded="true"] > .sh__chev { rotate: 180deg; }

.sh__right { justify-self: end; display: flex; gap: 8px; }
.sh__round { width: var(--sh-h); height: var(--sh-h); border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); font: 600 13px/1 var(--font); letter-spacing: 0.04em; }
.sh__burger { display: grid; place-content: center; gap: 0; }
.sh__burger i { display: block; width: 18px; height: 1.75px; border-radius: 2px; background: var(--ink); margin: 2.6px 0; }

/* dropdown panels */
.sh__drop { position: absolute; top: calc(100% + 10px); border-radius: 28px; padding: 10px; }
.sh__branchen { left: 50%; width: min(840px, calc(100vw - 2 * var(--sh-pad))); padding: 18px; }
.sh__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
.sh-group { display: grid; align-content: start; gap: 2px; }
.sh-group__label { margin: 0 0 4px 10px; font: 600 11.5px/1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.sh-ind { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 14px; color: var(--ink); font: 500 15px/1.25 var(--font); text-decoration: none; }
@media (hover: hover) { .sh-ind:hover { background: rgba(255, 255, 255, 0.75); } }
.sh-ind__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border-radius: 10px; color: var(--sky); background: rgba(var(--sky-rgb, 111, 155, 209), 0.12); }
.sh__langs { right: var(--sh-pad); width: 200px; display: grid; gap: 2px; }
.sh-lang { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px 0 14px; border: 0; border-radius: 16px; background: none; color: var(--ink); font: 500 15px/1 var(--font); cursor: pointer; text-align: left; }
@media (hover: hover) { .sh-lang:hover { background: rgba(255, 255, 255, 0.75); } }
.sh-lang__check { width: 18px; height: 18px; color: var(--sky); opacity: 0; }
.sh-lang[aria-checked="true"] .sh-lang__check { opacity: 1; }

/* phone sheet (from the top) */
.sh-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(33, 33, 33, 0.2); opacity: 0; visibility: hidden; }
.sh-sheet { position: fixed; z-index: 49; top: max(8px, env(safe-area-inset-top)); left: 8px; right: 8px; max-height: calc(100svh - 16px); overflow: auto; overscroll-behavior: contain;
  border-radius: 28px; padding: 76px 12px 16px; }
.sh-sheet__nav { display: grid; }
.sh-sheet__item { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 12px; border: 0; border-radius: 16px; background: none; color: var(--ink); font: 600 22px/1.2 var(--font); letter-spacing: -0.015em; text-decoration: none; text-align: left; cursor: pointer; }
.sh-sheet__item .sh__chev { width: 22px; height: 22px; }
.sh-sheet__branchen { overflow: hidden; display: grid; gap: 12px; padding: 4px 0 12px; }
.sh-sheet__foot { display: grid; gap: 14px; justify-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(var(--shade), 0.1); }
.sh-kaia { display: inline-flex; align-items: center; gap: 12px; width: 100%; justify-content: center; height: 56px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 16px/1 var(--font); cursor: pointer; }
.sh-kaia__dot, .kfab__dot { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--warm); color: #fff; box-shadow: 0 4px 10px -4px rgba(var(--warm-rgb), 0.8); }
.sh-sheet__quiet { color: var(--text-2); font: 500 14px/1.4 var(--font); text-underline-offset: 3px; }
html.sh-locked, html.sh-locked body { overflow: hidden; }

/* floating Kaia button: the hero button in small */
.kfab { position: fixed; z-index: 45; left: 50%; bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));   /* centred by GSAP xPercent */
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 10px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--ink); font: 600 16px/1 var(--font); white-space: nowrap; }
.kfab__dot { transition: scale 0.25s var(--e-out, ease); }
@media (hover: hover) { .kfab:hover .kfab__dot { scale: 1.08; } }
.kfab:active .kfab__dot { scale: .9; }
/* reading down the page the button folds into its circle at the right edge, so it covers no text; back up it opens
   again (UX audit 22.10). left moves with it: GSAP centres the button with xPercent -50 */
.kfab { transition: left .32s var(--e-out, ease), padding .32s var(--e-out, ease), gap .32s var(--e-out, ease); }
.kfab > span[data-t] { display: inline-block; max-width: 220px; overflow: hidden; transition: max-width .32s var(--e-out, ease), opacity .2s ease; }
.kfab.is-mini { left: calc(100% - 16px - 28px); padding: 0 10px; gap: 0; }
.kfab.is-mini > span[data-t] { max-width: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .kfab, .kfab > span[data-t] { transition: none; } }

/* desktop: capsule in the middle, no burger */
@media (min-width: 1024px) {
  .sh__nav { display: inline-flex; }
  .sh__burger, .sh-sheet, .sh-scrim { display: none; }
}
/* very small phones: a bit tighter */
@media (max-width: 359px) { .sh { --sh-h: 44px; } .sh__right { gap: 6px; } }
@media (max-width: 1023px) { .sh__branchen { display: none; } }
/* [hidden] must win over the display rules above (closed panels and the closed accordion stay out of the layout) */
.sh [hidden], .sh-sheet[hidden], .sh-sheet [hidden] { display: none !important; }
.sh__right { grid-column: 3; }
html.sh-locked .proto { visibility: hidden; }   /* prototype switches never cover the open menu */
/* desktop: tap areas ≥ 44 px and the header grows with the screen (1 at 1440, up to 1.4 on very wide screens) */
@media (min-width: 1024px) {
  .sh { --hk: clamp(1px, calc(100vw / 1440), 1.4px); --sh-h: calc(52 * var(--hk)); }
  .sh__item { height: calc(44 * var(--hk)); padding: 0 calc(18 * var(--hk)); font-size: calc(15 * var(--hk)); }
  .sh__chev { width: calc(16 * var(--hk)); height: calc(16 * var(--hk)); }
  .sh__round { font-size: calc(13 * var(--hk)); }
  .sh__logo img { height: calc(28 * var(--hk)); }
  .sh-ind, .sh-lang { font-size: calc(15 * var(--hk)); min-height: calc(44 * var(--hk)); }
}

/* ---------- v2 (owner 14.10): smaller menu type, column hierarchy, round pastel icons, visible hover, dimmed page ---------- */
/* an icon inside a disc fills the disc; standalone icons (chevron, check, arrow) keep their own size */
.sh-ind__icon > .icon, .kfab__dot > .icon, .sh-kaia__dot > .icon, .hs-chip__icon > .icon, .hs-kaia__dot > .icon { display: block; width: 100%; height: 100%; }
.sh .icon svg, .sh-sheet .icon svg, .kfab .icon svg, .home .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* columns from the biggest group to the smallest: [4] [3 + 2] [3 + 2], then "another industry" across */
.sh__branchen { width: min(780px, calc(100vw - 2 * var(--sh-pad))); padding: 16px; }
.sh__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.sh__col { display: grid; align-content: start; gap: 14px; }
.sh-group__label { margin: 0 0 2px 8px; font-size: 11px; }
.sh-ind { gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 14px; font-size: 14px; line-height: 1.25; hyphens: auto; transition: background-color 0.15s ease; }
.sh-ind__label { min-width: 0; }
/* icons as in the design system: round, on a light pastel sky disc with a soft inner light */
.sh-ind__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: var(--sky-ink);
  background: radial-gradient(circle at 50% 42%, #eaf2fb, var(--sky-tint) 70%);
  box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 6px -4px rgba(var(--shade), 0.22); }
.sh-ind__icon--warm { color: #9a4a22; background: radial-gradient(circle at 50% 42%, #fdf0e7, #f8dcc8 70%); }
.hs-chip__icon { color: var(--sky-ink); background: radial-gradient(circle at 50% 42%, #eaf2fb, var(--sky-tint) 70%);
  box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, 0.85), inset 0 -4px 6px -4px rgba(var(--shade), 0.22); }
/* hover / focus / current must be visible on the white glass (owner 14.10): a clear sky tint, not white on white */
@media (hover: hover) { .sh-ind:hover, .sh-lang:hover, .sh-other:hover, .sh-sheet__item:hover { background: rgba(var(--sky-rgb), 0.16); } }
.sh-ind:active, .sh-lang:active, .sh-other:active { background: rgba(var(--sky-rgb), 0.26); }
.sh-ind:focus-visible, .sh-lang:focus-visible, .sh-other:focus-visible { background: rgba(var(--sky-rgb), 0.16); outline: 2px solid var(--sky); outline-offset: -2px; }
.sh-lang { font-size: 14px; }
.sh-lang[aria-checked="true"] { background: rgba(var(--sky-rgb), 0.12); font-weight: 600; }
.sh-lang[aria-checked="true"]:hover { background: rgba(var(--sky-rgb), 0.2); }
.sh-lang__check { color: var(--sky-ink); }

.sh-other { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px 10px 8px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  background: rgba(var(--warm-rgb), 0.08); color: var(--ink); font: 14px/1.3 var(--font); transition: background-color 0.15s ease; }
@media (hover: hover) { .sh-other:hover { background: rgba(var(--warm-rgb), 0.16); } }
.sh-other__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sh-other__text b { font-weight: 600; }
.sh-other__text small { font-size: 13px; color: var(--text-2); }
.sh-other__arrow { flex: none; width: 18px !important; height: 18px !important; color: var(--text-2); }
.sh-sheet__branchen .sh-other { margin-top: 4px; }

/* the dimmed page behind any open menu (desktop too) */
.sh-scrim { display: block !important; z-index: 49; background: rgba(33, 33, 33, 0.3); }   /* no blur: the design system never animates blur */
.sh-sheet { z-index: 49; }
.sh { z-index: 50; }

@media (min-width: 1024px) {
  .sh-ind, .sh-lang { font-size: 14px; min-height: 44px; }
}
/* the sheet: only the list scrolls (it never slides under the logo and buttons), the Kaia button stays pinned below */
.sh-sheet { display: flex; flex-direction: column; overflow: hidden; height: auto; max-height: calc(100svh - 16px); }
.sh-sheet__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.sh-sheet__foot { flex: none; }
/* a grid would squeeze the accordion (overflow hidden → min-height 0) instead of scrolling: plain block flow */
.sh-sheet__nav { display: block; }
.sh-sheet__nav > * { width: 100%; }
.sh, .sh *, .sh-sheet, .sh-sheet *, .kfab, .kfab * { box-sizing: border-box; }   /* paddings count inside max-height */
.sh-ind__icon { width: 38px; height: 38px; padding: 9px; }   /* 20 px glyph in a 38 px disc (design system: 24 in 44) */

/* industry discs (owner 14.10: orange was too loud → calm neutral glass, dark glyphs): the design system's card disc */
.sh-ind__icon, .sh-ind__icon--warm, .hs-chip__icon {
  color: var(--ink);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.95), rgba(236, 238, 243, 0.98) 72%);
  box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, 0.9), inset 0 -4px 7px -4px rgba(var(--shade), 0.22), 0 4px 10px -5px rgba(var(--shade), 0.3); }
.sh-ind__icon svg, .hs-chip__icon svg { stroke-width: 1.75; }

/* the glyph box is pinned inside the disc (a grid item with height:100% grew to the line height and sat 2 px low) */
.sh-ind__icon, .hs-chip__icon, .kfab__dot, .sh-kaia__dot, .hs-kaia__dot { position: relative; }
.sh-ind__icon > .icon, .hs-chip__icon > .icon, .kfab__dot > .icon, .sh-kaia__dot > .icon, .hs-kaia__dot > .icon {
  position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; }
.hs-chip__icon > .icon { width: 18px; height: 18px; }
.sh-ind__icon > .icon svg, .hs-chip__icon > .icon svg, .kfab__dot > .icon svg, .sh-kaia__dot > .icon svg, .hs-kaia__dot > .icon svg { display: block; width: 100%; height: 100%; }

/* floating Kaia button = the same black button as in the phone menu (owner 14.10), not glass */
.kfab { background: var(--ink); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 12px 28px -12px rgba(33, 33, 33, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.kfab:focus-visible { outline-color: var(--sky); }

/* reading down: the folded Kaia button slides out at the edge, it comes back on the way up or after a pause (re-audit 22.10) */
.kfab { transition: left .32s var(--e-out, ease), padding .32s var(--e-out, ease), gap .32s var(--e-out, ease), translate .3s var(--e-out, ease), opacity .3s ease; }
.kfab.is-away { translate: 0 calc(100% + 24px); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kfab { transition: none; } }
/* «Zum Inhalt»: the first stop of the keyboard, hidden until focused (a11y audit 22.10) */
.skip-link { position: fixed; z-index: 100; left: 12px; top: 12px; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 15px/1.2 var(--font); text-decoration: none; translate: 0 -200%; }
.skip-link:focus, .skip-link:focus-visible { translate: 0 0; outline: 3px solid var(--focus); outline-offset: 2px; }
#main:focus { outline: none; }

/* ---------- v3 (22.10, «modern header and footer»): the phone menu is a solid paper sheet, numbered rows ---------- */
/* the glass let the hero show through the menu items (UI check 22.10): on the sheet the paper is solid */
.sh-sheet { background: #f8f7fb; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px rgba(var(--shade), .06), 0 30px 60px -24px rgba(var(--shade), .45); }
@media (max-width: 1023px) { .sh-scrim { background: rgba(33, 33, 33, .42); } }
.sh-sheet__nav { counter-reset: shn; }
.sh-sheet .sh-sheet__item { justify-content: flex-start; gap: 0; min-height: 64px; padding: 0 8px 0 4px; font-size: 26px; letter-spacing: -0.025em;
  background-image: linear-gradient(rgba(var(--shade), .1), rgba(var(--shade), .1)); background-position: 12px 100%; background-size: calc(100% - 24px) 1px; background-repeat: no-repeat; }
/* the number of the row: small, quiet, in tabular figures */
.sh-sheet .sh-sheet__item::before { counter-increment: shn; content: counter(shn, decimal-leading-zero); flex: none; width: 40px; padding-left: 8px;
  color: var(--text-2); font: 500 12px/1 var(--font); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sh-sheet .sh-sheet__item .sh__chev { margin-left: auto; color: var(--text-2); }
/* a link row ends in an arrow that moves on press */
.sh-sheet a.sh-sheet__item::after { content: ""; flex: none; margin-left: auto; width: 22px; height: 22px; background: currentColor; opacity: .3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .2s var(--ease-out, ease), opacity .2s ease; }
.sh-sheet a.sh-sheet__item:active::after { translate: 4px 0; opacity: 1; }
@media (hover: hover) { .sh-sheet a.sh-sheet__item:hover::after { translate: 4px 0; opacity: .8; } }
.sh-sheet__item[aria-expanded="true"] { background-image: none; }
.sh-sheet__branchen { padding: 4px 4px 16px; }
@media (max-width: 359px) { .sh-sheet .sh-sheet__item { font-size: 22px; min-height: 56px; } .sh-sheet .sh-sheet__item::before { width: 34px; } }
@media (prefers-reduced-motion: reduce) { .sh-sheet a.sh-sheet__item::after { transition: none; } }

/* «All industries» under the industry list (22.10): a quiet text link to the hub page, 44 px tall */
.sh-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 0 8px; color: var(--ink); font: 600 14.5px/1.2 var(--font); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(33, 33, 33, .25); }
.sh-all__arrow { display: grid; width: 16px; height: 16px; transition: transform .2s var(--e-out, ease); }
.sh-all__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .sh-all:hover .sh-all__arrow { transform: translateX(3px); } }
.sh-all:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 8px; }

/* /design/css/section-bar.css */
/* The line under the header that names the section in view (js/section-bar.js, UX audit 22.10). Phones and tablets.
   It sits under the header and moves up into its place when the header hides on the way down (html.sh-up). */
.sbar { position: fixed; z-index: 44; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 74px); translate: -50% 0;
  width: min(420px, calc(100vw - 24px)); transition: top .32s var(--e-out, cubic-bezier(.16, 1, .3, 1)); }
html.sh-up .sbar { top: calc(env(safe-area-inset-top, 0px) + 8px); }
/* re-audit 22.10: page text showed through the pill and in the gap above it — a veil of the page colour from the top
   edge down behind the pill, fading out under it */
.sbar::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: calc(-8px - env(safe-area-inset-top, 0px)); height: calc(env(safe-area-inset-top, 0px) + 72px);
  background: linear-gradient(var(--paper, #f6f5fa) 70%, rgba(246, 245, 250, 0)); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
html.sh-up .sbar::before { opacity: 1; }
.sbar[hidden] { display: none; }
.sbar__btn { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px 0 12px; overflow: hidden;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 20px -12px rgba(33, 33, 33, .35), inset 0 0 0 1px rgba(33, 33, 33, .06);
  color: var(--ink); font: 600 14px/1.2 var(--font); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sbar__btn:active { scale: .98; }
.sbar__btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.sbar__n { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--warm-tint, #fbe6d9); color: var(--warm-ink, #9a4a1f); font: 600 12px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.sbar__t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sbar__chev { flex: none; display: grid; width: 16px; height: 16px; opacity: .6; transition: rotate .2s ease; }
.sbar__chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sbar__btn[aria-expanded="true"] .sbar__chev { rotate: 180deg; }
/* how far down the page: a hairline along the bottom of the pill */
.sbar__p { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: var(--warm, #e8743b); transform-origin: 0 50%; scale: var(--p, 0) 1; pointer-events: none; }
.sbar__list { margin: 8px 0 0; padding: 6px; list-style: none; max-height: min(60svh, 440px); overflow: auto; overscroll-behavior: contain;
  border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(33, 33, 33, .4)); }
.sbar__list[hidden] { display: none; }
.sbar__list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 14px; color: var(--ink); font: 500 15px/1.25 var(--font); text-decoration: none; }
.sbar__list a span { flex: none; width: 22px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sbar__list a[aria-current] { background: var(--grey-1, #eef0f4); font-weight: 600; }
.sbar__list a:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
@media (hover: hover) { .sbar__list a:hover { background: var(--grey-1, #eef0f4); } }
@media (min-width: 1024px) { .sbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .sbar { transition: none; } }
/* the sections land under the header and the line when jumped to */
#home > [id] { scroll-margin-top: 72px; }

/* /design/css/home-sections.css */
/* Home sections under the hero — a quiet draft layout so the header and the floating Kaia button can be tested */
.home { background: var(--paper); }
.hs { max-width: var(--page-max); margin: 0 var(--edge); padding: var(--section-y) 0 0; scroll-margin-top: 76px; }
.hs__head { max-width: 720px; margin-bottom: var(--head-gap); }
.hs__eyebrow { margin: 0 0 10px; font: 600 clamp(15px, 1.2vw + 9px, 17px)/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.hs h2 { margin: 0 0 12px; font: 600 clamp(30px, 3.6vw, 48px)/1.08 var(--font); letter-spacing: -0.025em; }
.hs__head > p:last-child { margin: 0; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.hs__sub { margin: 40px 0 14px; font: 600 20px/1.3 var(--font); }
.hs__grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.hs__grid--2 { margin-top: 16px; }
.hs-card { margin: 0; padding: 24px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }
.hs-card--flat { background: rgba(var(--sky-rgb), 0.08); box-shadow: none; }
.hs-card h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font); }
.hs-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hs-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-1); color: var(--ink); font: 500 15px/1 var(--font); text-decoration: none; }
.hs-chip__icon { display: grid; place-items: center; width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--sky); background: rgba(var(--sky-rgb), 0.12); }
.hs-chip__icon svg, .hs-kaia__dot svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hs__note { margin: 16px 0 0; font-size: 14px; color: var(--text-2); }
.hs-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: var(--card-gap); grid-template-columns: minmax(0, 1fr); }
/* four steps: 1 → 2 → 4 per row, never 3 + 1 (layout check 20.10) */
@media (min-width: 600px) { .hs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hs-steps__n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: rgba(var(--sky-rgb), 0.14); color: var(--ink); font: 600 14px/1 var(--font); }
.hs-steps__time { margin-top: 10px !important; font-size: 13px !important; color: var(--sky) !important; font-weight: 500; }
.hs-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.hs-list--num { max-width: 640px; margin-bottom: 28px; font-size: 17px; }
.hs--action { text-align: left; }
/* every Kaia button of the page = the fixed button at the bottom (.kfab, css/site-header.css; owner 18.10: «the buttons
   must be the same»): 56 px, the warm mic dot 36 px, 16 px text; black on light backgrounds, white on the black cards */
.hs-kaia { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 10px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 16px/1 var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(33, 33, 33, .55); }
@media (hover: hover) { .hs-kaia:hover .hs-kaia__dot { scale: 1.08; } }
.hs-kaia { transition: scale .12s ease; }
.hs-kaia:active { scale: .97; }   /* the press is felt (UX audit 22.10) */
/* the mic inside the dot: 20 px in a 36 px dot, set here so the button looks the same on every page (the header styles
   are not loaded everywhere, without them the icon grew and stretched the dot) */
.hs-kaia__dot .icon { display: block; width: 20px; height: 20px; }
.hs-kaia__dot .icon svg { display: block; width: 100%; height: 100%; }
.hs-kaia__dot { box-sizing: border-box; flex: none; }
.hs-kaia:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.hs-kaia__dot { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--warm); color: #fff;
  box-shadow: 0 4px 10px -4px rgba(var(--warm-rgb), .8); transition: scale .25s var(--ease-out, ease); }
.hs__quiet { display: inline-block; margin-top: 10px; color: var(--text-2); font-size: 14px; text-underline-offset: 3px; }
.hs-faq { display: grid; gap: 10px; }
.hs-faq summary { cursor: pointer; font: 600 17px/1.4 var(--font); list-style: none; min-height: 28px; }
.hs-faq summary::-webkit-details-marker { display: none; }
.hs-faq details p { margin-top: 10px; }
.hs-foot { max-width: 1120px; margin: clamp(64px, 9vw, 120px) auto 0; padding: 32px clamp(16px, 3.9vw, 56px) calc(40px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; border-top: 1px solid rgba(var(--shade), 0.1); font-size: 14px; color: var(--text-2); }
.hs-foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.hs-foot a { color: var(--text-2); min-height: 44px; display: inline-flex; align-items: center; }
.hs-foot p { margin: 0 0 0 auto; }

/* QA 20.10: the quiet «book a meeting» links get a 44 px tap height without looking bigger */
.hs__quiet, .kcta__quiet, .ft__quiet { display: inline-flex; align-items: center; min-height: 44px; }

/* pinned screens held by the browser (js/sticky-pin.js): the track is as tall as screen + scroll distance, the screen sticks */
.sticky-track { position: relative; }
.sticky-track > .rta-pin, .sticky-track > .eh__stage { position: sticky; top: 0; }
.hs__note { margin: 6px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.45; color: var(--text-2); }   /* what happens on «Talk to Kaia» (re-audit 22.10) */

/* /design/css/flow-a.css */
/* "How it works" v3 (research 66 §12): brief card · iPhone (call → transcript → WhatsApp) · result card + 4 steps.
   Brand colours on our own UI; the phone screens use the look of the real apps (iOS call green/red, WhatsApp greens)
   so they read as real screenshots. Motion: js/flow-a.js. */
.fa { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
/* wide screens (owner 27.10): the block stays while the scroll plays the call (js/flow-a.js, js/sticky-pin.js) */
.fa-track { position: relative; }
.fa-track > .fa-play { position: sticky; top: 0; box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.fa-head { max-width: 820px; margin: 0 auto var(--head-gap); text-align: center; }
.fa-eyebrow { margin: 0 0 12px; font: 600 clamp(15px, 1.2vw + 9px, 17px)/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rta .fa-h2 { margin: 0; font: 600 clamp(32px, 4.6vw, 68px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.fa-key { background-image: linear-gradient(var(--warm-soft), var(--warm-soft)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.32em; }
.fa-intro { max-width: 52ch; margin: 18px auto 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

.fa-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px); border-radius: var(--r-xl); isolation: isolate;
  background: radial-gradient(90% 70% at 85% 0%, rgba(var(--sky-rgb), 0.16), transparent 60%), radial-gradient(80% 60% at 10% 100%, rgba(var(--warm-rgb), 0.08), transparent 60%), #f4f5fa; }
.fa-wires { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fa-wire { fill: none; stroke: var(--sky); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.7; }

/* ---------- cards ---------- */
.fa-card { position: relative; padding: clamp(20px, 2vw, 28px); border-radius: var(--r-l); background: #fff;
  box-shadow: 0 1px 2px rgba(33, 33, 33, 0.04), 0 30px 60px -36px rgba(var(--shade), 0.4); }
.fa-card .icon, .fa-card svg { display: inline-block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
.fa-kind { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.fa-card__t { margin: 0; font: 600 clamp(19px, 1.6vw, 24px)/1.2 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.fa-list { margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--grey-1); font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.fa-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; line-height: 1.35; color: var(--ink); }
.fa-checks li { display: flex; align-items: center; gap: 10px; }
.fa-ck { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(var(--shade), 0.25); }
.fa-ck i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(0.4); transition: opacity 0.25s, transform 0.3s var(--e-spring); font: 700 12px/1 var(--font); font-style: normal; color: #fff; }
.fa-ck__ok { background: var(--positive-fill); }
.fa-ck__ok svg { width: 11px; height: 11px; stroke-width: 3.2; }
.fa-ck__ask { background: var(--warm); }
.fa-ck[data-st="ok"] .fa-ck__ok, .fa-ck[data-st="ask"] .fa-ck__ask { opacity: 1; transform: none; }
.fa-status { position: relative; display: grid; margin: 18px 0 0; }
.fa-status > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font: 600 13px/1.2 var(--font); }
.fa-status__wait { background: var(--fill); color: var(--text-2); }
.fa-status__wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); animation: fa-blink 1.2s ease-in-out infinite; }
.fa-status__done { background: var(--positive-tint); color: var(--positive-ink); }
@keyframes fa-blink { 50% { opacity: 0.3; } }

.fa-ok { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 10px; border-radius: 999px; background: var(--positive-tint); color: var(--positive-ink); font: 600 12.5px/1 var(--font); }
.fa-sub { margin: 6px 0 0; font-size: 15px; color: var(--text-2); }
.fa-rows { list-style: none; margin: 18px 0 0; padding: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--grey-1); }
.fa-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; font-size: 14.5px; color: var(--ink); }
.fa-rows li + li { border-top: 1px solid var(--grey-1); }
.fa-rows__ic { color: var(--text-2); }
.fa-rows__m { display: grid; justify-items: end; font: 500 13.5px/1 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.fa-rows__m > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.fa-m2 { color: var(--positive-ink); }

/* ---------- the iPhone ---------- */
.fa-phone { position: relative; width: 300px; aspect-ratio: 300 / 620; padding: 10px; border-radius: 52px; background: linear-gradient(145deg, #3a3a3e, #121214);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), 0 50px 90px -40px rgba(20, 24, 40, 0.65); }
.ip-screen { position: relative; height: 100%; border-radius: 43px; overflow: hidden; background: #000; font-family: -apple-system, "SF Pro Text", var(--font); }
.ip-scr { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ip-bar { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 26px 0 30px; font: 600 14px/1 -apple-system, "SF Pro Text", var(--font); color: #000; flex: none; }
.ip-bar--dark { color: #fff; }
.ip-isl { width: 92px; height: 26px; border-radius: 20px; background: #000; }
.ip-sig { display: flex; align-items: flex-end; gap: 1.5px; }
.ip-sig b { width: 3px; border-radius: 1px; background: currentColor; }
.ip-sig b:nth-child(1) { height: 4px; } .ip-sig b:nth-child(2) { height: 6px; } .ip-sig b:nth-child(3) { height: 8px; } .ip-sig b:nth-child(4) { height: 10px; margin-right: 5px; }
.ip-sig svg { width: 24px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.9; }
.ip-sig .ip-batt { fill: currentColor; stroke: none; }

/* incoming + live call: iOS full-screen call on a blurred wallpaper */
.ip-in, .ip-call { color: #fff; background: radial-gradient(120% 70% at 20% 10%, #5a6c8f, transparent 60%), radial-gradient(100% 70% at 90% 90%, #7a5a6a, transparent 60%), linear-gradient(170deg, #2d3448, #1d2030); }
.ip-who { padding: 34px 20px 0; text-align: center; }
.ip-name { margin: 0; font: 400 34px/1.1 -apple-system, "SF Pro Display", var(--font); letter-spacing: -0.01em; }
.ip-name--s { font-size: 26px; }
.ip-subl { margin: 6px 0 0; font-size: 16px; opacity: 0.75; }
.ip-act { display: flex; justify-content: space-between; margin-top: auto; padding: 0 30px 56px; }
.ip-btn { display: grid; justify-items: center; gap: 8px; font-size: 14px; }
.ip-btn i { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; }
.ip-btn i .icon, .ip-btn i svg, .ip-end svg { width: 30px; height: 30px; fill: currentColor; stroke: currentColor; stroke-width: 0.5; }
.ip-btn--no i { background: #ff3b30; }
.ip-btn--no i svg, .ip-end svg { transform: rotate(135deg); }
.ip-btn--yes i { background: #34c759; }
.ip-live { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 12.5px; font-weight: 600; }
.ip-live i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.3); }
.ip-timer { margin: 4px 0 0; font-size: 15px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.ip-lines { flex: 1; min-height: 0; margin: 16px 0 112px; padding: 0 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 34px); mask-image: linear-gradient(to bottom, transparent, #000 34px); }
.ip-track { display: grid; gap: 7px; padding-top: 10px; }
.ip-line { --hl: 0; margin: 0; padding: 8px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.32; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 calc(var(--hl) * 2px) rgba(244, 180, 140, 0.95); }
.ip-line b { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; opacity: 0.7; }
.ip-line--a { background: rgba(232, 116, 59, 0.32); }
.ip-note { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 8px 3px 5px; border-radius: 999px; background: #34c759; color: #fff; font: 600 11px/1 var(--font); }
.fa .ip-note .icon { width: 11px; height: 11px; }
.ip-note svg { stroke-width: 3.2; }
.ip-end { position: absolute; left: 50%; bottom: 36px; display: grid; place-items: center; width: 62px; height: 62px; margin-left: -31px; border-radius: 50%; background: #ff3b30; color: #fff; }

/* WhatsApp (iOS light) */
.ip-wa { background: #efeae2; color: #111b21; }
.ip-wa .ip-bar { background: #f6f6f6; }
.wa-head { display: flex; align-items: center; gap: 8px; padding: 4px 12px 10px 6px; background: #f6f6f6; border-bottom: 1px solid #dedede; flex: none; }
.wa-head .icon, .wa-head svg { width: 22px; height: 22px; fill: none; stroke: #007aff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-back svg { transform: rotate(90deg); }
.wa-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); }
.wa-head b { display: block; font: 600 15px/1.2 -apple-system, var(--font); }
.wa-head small { display: block; font-size: 11.5px; color: #556570; }
.wa-call { margin-left: auto; }
.wa-chat { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; overflow: hidden;
  background: radial-gradient(circle at 10px 10px, rgba(0, 0, 0, 0.035) 2px, transparent 2.5px) 0 0 / 26px 26px, #efeae2; }
.wa-msg { position: relative; max-width: 84%; margin: 0; padding: 6px 8px 16px 9px; border-radius: 9px; font-size: 13.5px; line-height: 1.3; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.wa-msg time { position: absolute; right: 7px; bottom: 3px; display: flex; align-items: center; gap: 2px; font-size: 10px; color: #556570; }
.wa-msg--in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; padding-right: 36px; }
.wa-msg--out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; padding-right: 52px; }
.wa-tick { display: inline-flex; color: #8696a0; }
.wa-tick .icon, .wa-tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; }
.wa-tick .icon + .icon, .wa-tick svg + svg { margin-left: -8px; }
.wa-input { display: flex; align-items: center; gap: 10px; padding: 8px 12px 26px; background: #f6f6f6; flex: none; color: #007aff; font-size: 24px; }
.wa-input i { flex: 1; height: 32px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #e0e0e0; }
.wa-mic svg, .wa-mic .icon { width: 22px; height: 22px; fill: none; stroke: #007aff; stroke-width: 2; }

/* ---------- cursors ---------- */
.fa-cur { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 4px; pointer-events: none; opacity: 0; visibility: hidden; }
.fa-cur b { padding: 4px 9px; border-radius: 999px; font: 600 12px/1 var(--font); white-space: nowrap; }
.fa-cur--agent { margin: -11px 0 0 -11px; }
.fa-cur--agent i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 0 0 0 rgba(232, 116, 59, 0.5), 0 6px 14px -4px rgba(232, 116, 59, 0.8); }
.fa-cur--agent b { background: #b4541f; color: #fff; }   /* white on the warm orange was 2.97:1 */

/* ---------- steps ---------- */
.fa-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);   /* every step in one row, however many (5 in the copy; QA 20.10: the 5th fell under the 4th) */
   gap: clamp(12px, 2vw, 32px); margin: 24px 0 0; padding: 0; }
.fa-steps button { display: grid; gap: 12px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; width: 100%; padding: 0 0 6px; border: 0; background: none; text-align: left; font: 500 15px/1.3 var(--font); color: var(--text-3); cursor: pointer; }
.fa-steps button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.fa-steps i { display: block; height: 3px; border-radius: 3px; background: rgba(var(--shade), 0.12); overflow: hidden; }
.fa-steps b { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.fa[data-step="0"] .fa-steps li:nth-child(1) button, .fa[data-step="1"] .fa-steps li:nth-child(2) button,
.fa[data-step="2"] .fa-steps li:nth-child(3) button, .fa[data-step="3"] .fa-steps li:nth-child(4) button { color: var(--ink); }

/* ---------- reduce motion: the finished story ---------- */
.fa.is-done .ip-in, .fa.is-done .ip-call { display: none; }
.fa.is-done .ip-wa, .fa.is-done .wa-msg { opacity: 1; visibility: visible; }
.fa.is-done .fa-ck i { opacity: 1; transform: none; }
.fa.is-done .fa-ck__ask { display: none; }
.fa.is-done .fa-status__wait, .fa.is-done .fa-m1 { display: none; }
.fa.is-done .fa-steps b { transform: none; }
.fa.is-done .fa-wire { stroke-dashoffset: 0; }
.fa.is-done .fa-cur { display: none; }

/* ---------- phones: steps on top, the iPhone, then the card of the current step ---------- */
@media (max-width: 899px) {
  .fa, .fa-play { display: flex; flex-direction: column; }
  .fa-steps { order: 1; margin: 0 0 14px !important; }   /* steps above the iPhone, so the story is readable without scrolling */
  .fa-stage { order: 2;  grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; padding: 20px 12px 24px; border-radius: var(--r-l); }
  .fa-wires { display: none; }
  .fa-phone { order: 1; width: min(272px, 78vw); }
  .fa-brief, .fa-result { order: 2; grid-area: auto; width: 100%; max-width: 420px; box-sizing: border-box; }
  .fa[data-step="3"] .fa-brief { display: none; }
  .fa:not([data-step="3"]) .fa-result { display: none; }
  .fa.is-done .fa-brief { display: none; }
  .fa.is-done .fa-result { display: block; }
  .fa-steps { gap: 6px; }
  .fa-steps button { gap: 8px; font-size: 12px; }
  .ip-name { font-size: 30px; }
}

/* icons inside the scene: own sizes (the site-wide `.home .icon svg { width: 100% }` would blow them up) */
.fa .icon { display: inline-grid; flex: none; width: 1em; height: 1em; vertical-align: -0.12em; }
.fa .icon svg { display: block; width: 100%; height: 100%; }
.fa .wa-head .icon, .fa .wa-mic .icon { width: 22px; height: 22px; }
.fa .wa-tick .icon { width: 12px; height: 12px; }
.fa .wa-tick .icon + .icon { margin-left: -8px; }
.fa .ip-btn i .icon, .fa .ip-end .icon { width: 30px; height: 30px; }
.fa .fa-ck__ok .icon { width: 11px; height: 11px; }

/* the voice on the line: bars like a voice visualiser, warm while the agent speaks */
.ip-wave { display: flex; justify-content: center; align-items: center; gap: 3px; height: 22px; margin-top: 10px; }
.ip-wave i { width: 3px; height: 30%; border-radius: 2px; background: rgba(255, 255, 255, 0.8); animation: ip-wave 0.9s ease-in-out infinite; }
.ip-wave i:nth-child(2n) { animation-duration: 0.7s; } .ip-wave i:nth-child(3n) { animation-duration: 1.1s; } .ip-wave i:nth-child(5n) { animation-delay: -0.3s; }
.fa[data-voice="a"] .ip-wave i { background: #f4b48c; }
@keyframes ip-wave { 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .ip-wave i, .fa-status__wait i { animation: none; } }

.fa .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fa-play { background: inherit; }

/* QA 20.10: long words (de «Gesprächsaufnahme») wrapped inside their column instead of running over at ~1024 px;
   the step buttons reach 44 px for a finger while the bar and the label keep their look */
.fa-rows__t { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.fa-steps button { position: relative; min-height: 44px; align-content: start; }
/* phones: the scheme opens on the result, ▶ plays the call (js/flow-a.js, re-audit 22.10) */
.fa-replay { position: absolute; z-index: 9; right: 14px; bottom: 14px; }   /* the look: tokens.css «play again» */
.fa-replay:active { scale: .94; }
.fa[data-scene=""] .fa-replay { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
@media (min-width: 900px) { .fa-replay { display: none; } }
.fa-steps span { hyphens: manual; -webkit-hyphens: manual; }   /* «erhal-ten» (re-audit 22.10) */
.fa-h2 .fa-key { display: inline-block; }   /* the second part keeps its words together on its own line where it wraps */
/* phones (visual audit 22.10): five labels in five narrow columns broke into one word per line — the bars stay the
   buttons, the label of the current step is written once under them, across the whole width */
@media (max-width: 899px) {
  .fa-steps { position: relative; padding-bottom: 24px; }
  .fa-steps button { position: static; }
  .fa-steps span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 13px; line-height: 1.3; color: var(--ink); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
  .fa[data-step="0"] .fa-steps li:nth-child(1) span, .fa[data-step="1"] .fa-steps li:nth-child(2) span, .fa[data-step="2"] .fa-steps li:nth-child(3) span,
  .fa[data-step="3"] .fa-steps li:nth-child(4) span, .fa[data-step="4"] .fa-steps li:nth-child(5) span, .fa.is-done .fa-steps li:last-child span { opacity: 1; }
}

/* the step's number (owner 23.10): only up to 899 px, where the bars stand without their names */
.fa-steps__n { display: none; font-style: normal; color: var(--text-2); }
@media (max-width: 899px) { .fa-steps__n { display: inline; } }

/* /design/css/flow-end.css */
/* «How it works», the parts the end adds to css/flow-a.css (owner 15–16.10): the next screen after the call —
   the agent's actions as pastel cards — and the phone rules (only the call on the iPhone, sized to the screen).
   Used by the home page (hero-video.html) and the prototype (agents-flow.html) */
.fa-h2 { margin: 0; font: 600 clamp(30px, 4.6vw, 64px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.fa-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fa[data-step="4"] .fa-steps li:nth-child(5) button { color: var(--ink); }

/* the end: a glass sheet over the stage; coloured results on the left, the client and the gain on the right */
.fa-end { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: inherit; opacity: 0; visibility: hidden; perspective: 1200px;
  background: rgba(244, 245, 250, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fa-outs { display: grid; gap: 14px; justify-items: end; }
.fa-out { width: min(360px, 100%); box-sizing: border-box; padding: 16px 18px; border-radius: 20px; color: #fff; backface-visibility: hidden;
  box-shadow: 0 30px 50px -26px rgba(var(--shade), .75); }
.fa-out p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 12.5px/1 var(--font); color: rgba(255,255,255,.85); }
.fa-out b { display: block; font: 600 clamp(17px, 1.5vw, 20px)/1.2 var(--font); letter-spacing: -0.01em; }
.fa-out small { display: block; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.8); }
.fa-out__ok { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink); }
.fa .fa-out__ok .icon { width: 12px; height: 12px; }
.fa-out__ok svg { stroke-width: 3.2; }
.fa-out--sky { background: linear-gradient(150deg, #86aee0, #5f8fd0); }
.fa-out--green { background: linear-gradient(150deg, #2d9c4e, #1f7a3a); }
.fa-out--ink { background: linear-gradient(150deg, #3a3d46, #212121); }
.fa-win { display: grid; gap: 14px; justify-items: start; }
.fa-client { width: min(380px, 100%); box-sizing: border-box; padding: 18px 20px; border-radius: 22px; background: linear-gradient(150deg, #fff6ec, #fbe4d6);
  box-shadow: 0 30px 50px -28px rgba(var(--shade), .6); }
.fa-client__who { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; margin: 0; }
.fa-client__who span { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--warm); color: #fff; font-weight: 600; }
.fa-client__who b { font-size: 15px; } .fa-client__who small { font-size: 13px; color: var(--text-2); }
.fa-client q { display: block; margin: 12px 0 0; font: 500 clamp(17px, 1.5vw, 20px)/1.3 var(--font); quotes: "«" "»"; }
.fa-stars { margin: 8px 0 0; color: var(--warm); font-size: 20px; letter-spacing: 2px; } .fa-stars i { display: inline-block; font-style: normal; }
.fa-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
.fa-gain { padding: 11px 16px; border-radius: 999px; color: #fff; font: 600 14.5px/1.2 var(--font); }
.fa-gain--0 { background: #6f9bd1; } .fa-gain--1 { background: #e8743b; } .fa-gain--2 { background: #212121; }
.fa.is-done .fa-end { display: none; }
/* the agent doing the actions: a thin line fills under each card before its tick */
.fa-out { position: relative; overflow: hidden; }
.fa-out__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.75); transform: scaleX(0); transform-origin: 0 50%; }
.fa-end__h { margin: 0 0 2px; font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); justify-self: stretch; }
/* the next screen, every width (owner 16.10): the call slides away → the agent doing the actions */
.fa-stage { overflow: hidden; }
.fa-win { display: none; }   /* owner 16.10: the end is the actions only */
.fa-end { grid-template-columns: minmax(0, 720px); justify-content: center; align-content: center; }
/* owner 16.10: the result cards are squares — three in a row; label on top, the result big at the bottom */
.fa-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); justify-items: stretch; }
.fa-end__h { grid-column: 1 / -1; }
.fa-out { width: 100%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 1.8vw, 24px); border-radius: var(--r-l); }
.fa-out b { font-size: clamp(18px, 2vw, 24px); line-height: 1.12; text-wrap: balance;}
/* pastel tones of the design system, dark text (owner 16.10) */
.fa-out { color: var(--ink); box-shadow: 0 1px 2px rgba(33,33,33,.04), 0 26px 44px -30px rgba(var(--shade), .55); }
.fa-out p { color: var(--text-2); } .fa-out small { color: var(--text-2); }
.fa-out { justify-content: flex-start; } .fa-out b { margin-top: auto; }   /* the result sits at the bottom */
.fa-out--sky { background: var(--sky-pastel); } .fa-out--sky p, .fa-out--sky small { color: var(--ink); }   /* grey on the blue was 4.31:1 (a11y audit 22.10) */ .fa-out--green { background: var(--positive-tint); } .fa-out--ink { background: var(--warm-tint); }
.fa-out .fa-out__ok { background: #fff; color: var(--positive-ink); box-shadow: 0 2px 6px rgba(var(--shade), .25); }
.fa-out__bar { background: rgba(33, 33, 33, .18); }
.fa-out svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* line icons, not filled squares */
.fa-out .fa-out__ok svg { stroke-width: 3.2; }
.fa[data-scene="end"] .fa-end { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fa[data-scene="end"] .fa-steps li:nth-child(4) button { color: var(--text-3); }
.fa[data-scene="end"] .fa-steps li:nth-child(5) button { color: var(--ink); }

@media (max-width: 899px) {
  /* phones: five bars in a row, and only the current step's name under them, full width (no overlapping words) */
  .fa-steps { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding-bottom: 26px; }
  .fa-steps button { padding: 6px 0; }
  .fa-steps span { position: absolute; left: 0; right: 0; top: 18px; font: 600 14px/1.2 var(--font); color: var(--ink); opacity: 0; transition: opacity .25s; pointer-events: none; }
  .fa[data-step="0"] .fa-steps li:nth-child(1) span, .fa[data-step="1"] .fa-steps li:nth-child(2) span, .fa[data-step="2"] .fa-steps li:nth-child(3) span,
  .fa[data-step="3"] .fa-steps li:nth-child(4) span, .fa[data-step="4"] .fa-steps li:nth-child(5) span { opacity: 1; }
  .fa-end { grid-template-columns: minmax(0, 440px); justify-content: center; align-content: start; gap: 12px; padding: 22px 14px; }
  .fa-outs { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* phones: two squares on top, the third centred under them */
  .fa-out { grid-column: span 2; } .fa-out:nth-of-type(3) { grid-column: 2 / span 2; }
  .fa-outs { gap: 10px; } .fa-out p { margin-bottom: 5px; } .fa-out b { font-size: 16px; } .fa-out small { font-size: 13px; }
  .fa-outs, .fa-win { justify-items: stretch; }
  .fa-out, .fa-client { width: 100%; padding: 13px 15px; }
  .fa-gains { max-width: none; }
  .fa-gain { padding: 9px 13px; font-size: 13.5px; }
  /* one screen holds the whole story: a smaller iPhone (zoom keeps its inner proportions) and a compact card under it */
  .fa-stage { gap: 12px; padding: 14px 10px 16px; }
  .fa-phone { width: 272px; }
  .fa-card { padding: 14px 16px; }
  .fa-kind { display: none; }
  .fa-card__t { font-size: 17px; }
  .fa-list { margin: 10px 0 8px; padding-top: 10px; }
  .fa-checks { gap: 5px; font-size: 13.5px; } .fa-list { display: none; }
  .fa-status { margin-top: 10px; }
  .fa-rows { margin-top: 10px; } .fa-rows li { padding: 9px 12px; font-size: 14px; }
  .fa-cur b { display: none; }
  /* owner 15.10: no big card under the iPhone; each ticked point slides out from under the iPhone as a small card */
  .fa-stage { gap: 0; }
  .fa-brief, .fa-result { padding: 0; background: none; box-shadow: none; max-width: none; margin-top: 10px; position: relative; z-index: 1; }
  .fa-phone { z-index: 3; }   /* the small cards live behind the iPhone and slide out from under it */
  .fa-brief .fa-card__t, .fa-brief .fa-status, .fa-result .fa-ok, .fa-result .fa-card__t, .fa-result .fa-sub { display: none; }
  .fa-checks { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fa-checks li, .fa-rows li { padding: 9px 11px; border-radius: 14px; background: #fff; font-size: 13px; line-height: 1.3;
    box-shadow: 0 1px 2px rgba(33,33,33,.05), 0 14px 26px -16px rgba(var(--shade), .55);
    opacity: 0; transform: translate(var(--fx, 0), -110px) rotate(var(--fr, 0)) scale(.8); transition: opacity .25s, transform .75s cubic-bezier(.34, 1.56, .64, 1); }
  .fa-checks li:has(.fa-ck[data-st="ok"]) { opacity: 1; transform: rotate(var(--rr, 0)); }
  .fa-checks li:nth-child(odd) { --fx: 40px; --fr: 8deg; --rr: -1.5deg; transform-origin: 80% 0; }
  .fa-checks li:nth-child(even) { --fx: -40px; --fr: -8deg; --rr: 1.5deg; transform-origin: 20% 0; }
  .fa-rows li:nth-child(odd) { --fr: 5deg; --rr: -0.8deg; } .fa-rows li:nth-child(even) { --fr: -5deg; --rr: 0.8deg; }
  .fa-rows li { transform: translate(0, -150px) rotate(var(--fr, 0)) scale(.85); }
  .fa-ck { width: 18px; height: 18px; }
  .fa-rows { margin: 0; display: grid; gap: 8px; box-shadow: none; }
  .fa-rows li + li { border-top: 0; }
  .fa[data-step="3"] .fa-rows li { opacity: 1; transform: rotate(var(--rr, 0)); }
  .fa[data-step="3"] .fa-rows li:nth-child(2) { transition-delay: .15s; } .fa[data-step="3"] .fa-rows li:nth-child(3) { transition-delay: .3s; }
  .fa.is-done .fa-checks li, .fa.is-done .fa-rows li { opacity: 1; transform: none; }
  /* the end, compact: one line per coloured card, a short client card, the gains as small pills */
  .fa-end { gap: 10px; padding: 14px 12px; }
  .fa-outs { gap: 10px; } .fa-out { padding: 14px; } .fa-out p { margin-bottom: 3px; } .fa-out small { display: none; } .fa-out b { font-size: 17px; }
  .fa-client { padding: 12px 14px; } .fa-client q { margin-top: 8px; font-size: 15px; } .fa-stars { margin-top: 4px; font-size: 16px; }
  .fa-gains { gap: 6px; } .fa-gain { padding: 7px 11px; font-size: 12.5px; }
  .fa[data-step="4"] .fa-brief { display: none; }
  .fa-result { display: none !important; }   /* owner 16.10: the results are the next screen, not cards under the iPhone */
  .fa-brief { display: none !important; }
  .fa-stage { min-height: 530px; align-content: center; box-sizing: border-box; }   /* owner 16.10: nothing under the iPhone — the call alone, then the actions screen */
        .fa-outs { align-content: center; }
  .fa-end { align-content: center; }
  /* scroll end: the stage clips the iPhone leaving to the left; the steps line names the last step */
  .fa-stage { overflow: hidden; }
  .fa[data-scene="end"] .fa-steps span { opacity: 0 !important; }
  .fa[data-scene="end"] .fa-steps li:nth-child(5) span { opacity: 1 !important; }
  .fa[data-scene="end"] .fa-end { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* only the results stay under the sheet, so the stage keeps one screen */
  /* while the end plays, the card under the iPhone stays put so the sheet covers the same height */
  .fa[data-end="on"] .fa-result { display: block; }
}

/* text fit (16.10 test on 10 widths × 5 languages) */
@media (max-width: 380px) {   /* narrow phones: the cards grow with long words instead of cutting them */
  .fa-out { aspect-ratio: auto; min-height: 150px; }
  .fa-out b { font-size: 15.5px; overflow-wrap: break-word; }
}
@media (min-width: 600px) and (max-width: 899px) {   /* portrait tablets: the three cards in a row, as on desktop */
  .fa-end { grid-template-columns: minmax(0, 640px); }
  .fa-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fa-out, .fa-out:nth-of-type(3) { grid-column: auto; }
}
/* phones (visual audit 22.10): the result cards were tall squares with an empty top; they keep their colour and
   order but take the height of their words */
@media (max-width: 899px) { .fa-out { aspect-ratio: auto; min-height: 118px; } }

/* /design/css/kaia-cta.css */
/* The one black Kaia card of the site (home and landings, owner 21.10). Its headline rule is `.kcta .kcta__text h2` so a
   section's headline rule (.wd h2) never reaches it when the card stands inside a section.
   The Kaia call to action under «How it works» (owner 16.10): a black card of the design system («ink» tile) with
   a rain of the letters k l a u m o — the code Kaia develops from — and the white button to Kaia.
   No picture of Kaia here. The approval page: design/kaia-cta.html. Motion: js/kaia-cta.js */
.kcta { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; min-height: 420px;
  margin: var(--section-y) var(--edge) 0; padding: clamp(24px, 4.5vw, 64px);
  border-radius: var(--r-xl); overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(70% 90% at 85% 30%, rgba(var(--sky-rgb), .22), transparent 70%), radial-gradient(120% 90% at 80% 100%, #3a3a40, #212121 60%); }
.kcta__rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.35) 40%, #000 70%); mask-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.35) 40%, #000 70%); }
.kcta__text { position: relative; z-index: 1; }
.kcta__eyebrow { margin: 0 0 14px; font: 600 12.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.kcta .kcta__text h2 { margin: 0; max-width: none; font: 600 clamp(30px, 4.4vw, 58px)/1.03 var(--font); letter-spacing: -0.035em; text-wrap: balance; color: #fff; }
.kcta__nb { white-space: nowrap; }   /* «KI-Agent», «ИИ-агент» never break at the hyphen */
.kcta__sub { margin: 18px 0 0; max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; text-wrap: pretty; color: rgba(255, 255, 255, .78); }
.kcta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.kcta .hs-kaia { background: #fff; color: var(--ink); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .6); }   /* the home Kaia button, white on the black card */
.kcta .hs-kaia__dot { position: relative; }
.kcta .hs-kaia__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--warm-rgb), .55); animation: kcta-ring 2.2s ease-out 3; }   /* three rings, then still (UX audit 22.10: endless motion, WCAG 2.2.2) */
@keyframes kcta-ring { to { box-shadow: 0 0 0 16px rgba(var(--warm-rgb), 0); } }
.kcta__quiet { font-size: 15px; color: #fff; opacity: .75; text-decoration: underline; text-underline-offset: 4px; }
.kcta__quiet:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
@media (max-width: 860px) {
  .kcta { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 120px; }
  .kcta__rain { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.12) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.12) 100%); }
}
@media (prefers-reduced-motion: reduce) { .kcta .hs-kaia__dot::after { animation: none; } }
/* the second card (owner 17.10): until the linking circle lands, the button's dot is an empty warm ring */
.kcta--programs:not(.is-landed):not(.is-static) .hs-kaia__dot, .kcta--clients:not(.is-landed):not(.is-static) .hs-kaia__dot { background: transparent; box-shadow: inset 0 0 0 2px rgba(var(--warm-rgb), .6); color: transparent; }
.kcta--programs:not(.is-landed):not(.is-static) .hs-kaia__dot::after, .kcta--clients:not(.is-landed):not(.is-static) .hs-kaia__dot::after { animation: none; }
.kcta--programs .hs-kaia__dot.cl-lent, .kcta--clients .hs-kaia__dot.cl-lent { opacity: 1; }
.kcta .hs-kaia__dot .icon { display: grid; width: 20px; height: 20px; }   /* the card carries its own icon size (no page-level .icon rule needed) */

/* phones (headline check 20.10): no lone word on the last line of the black card */
@media (max-width: 599px) { .kcta .kcta__text h2 { font-size: clamp(25px, 7.2vw, 30px); text-wrap: pretty; } }

/* optional slots of the same card (owner 21.10: one component for the home and the landings) */
.kcta__note { margin: 16px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .62); }
/* the numbered steps of the talk on the right (the landing's «Kaia» section); the rain stays visible around them */
.kcta--steps { gap: clamp(28px, 4vw, 64px); }
.kcta__steps { position: relative; z-index: 1; display: grid; gap: 16px; align-self: center; margin: 0; padding: clamp(20px, 2.4vw, 32px); list-style: none; counter-reset: kcta;
  border-radius: var(--r-l); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.kcta__steps li { counter-increment: kcta; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: rgba(255, 255, 255, .9); }
.kcta__steps li::before { content: counter(kcta); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 600 15px/1 var(--font); }
/* phones: text, then the steps, then the button and the note */
@media (max-width: 860px) {
  .kcta--steps .kcta__text { display: contents; }
  .kcta--steps > :not(canvas), .kcta--steps .kcta__text > * { position: relative; z-index: 1; }
  .kcta--steps .kcta__eyebrow { order: 1; } .kcta--steps h2 { order: 2; } .kcta--steps .kcta__sub { order: 3; }
  .kcta--steps .kcta__steps { order: 4; margin-top: 8px; } .kcta--steps .kcta__act { order: 5; margin-top: 8px; } .kcta--steps .kcta__note { order: 6; }
  .kcta--steps { gap: 14px; }
}

/* a Kaia button while its window loads (audit 22.10): it shows that the press was taken */
[data-kaia][aria-busy="true"] { cursor: progress; opacity: .72; transition: opacity .16s ease; }

/* /design/css/leistungen.css */
/* Home section 6 «What we do» (owner 17.10): coloured cards like the industry tiles (css/branchen.css) — the tile in
   its own step of the palette, icon in a white circle + name — with one big live object each (Pinterest refs 6/9/36).
   Desktop: two per row (bento); phones: one per row, the object above the text. Motion: js/leistungen.js */
.wd { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
.wd__head { margin: 0 auto var(--head-gap); text-align: center; }   /* the big centred headline (owner 17.10) */
.wd__eyebrow { margin: 0 0 14px; font: 600 clamp(15px, 1.2vw + 9px, 17px)/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.wd h2 { margin: 0 auto; max-width: 17ch; font: 600 clamp(36px, 6.2vw, 92px)/1.02 var(--font); letter-spacing: -0.04em; text-wrap: balance; color: var(--ink); }
.wd-hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }   /* the mask of every headline word */
.wd-hw > span { display: inline-block; }
/* the "o" of the headline: an empty ring until the linking circle lands (js/circle-link.js), then the warm circle */
/* the real letter is inside, transparent (SEO audit 21.10: the headline text keeps its "o"); overflow: hidden keeps the
   box's baseline at its bottom edge, so it sits exactly where the empty slot sat */
.wd-o { position: relative; display: inline-block; width: .6em; height: .6em; margin: 0 .03em; vertical-align: -.035em; overflow: hidden; color: transparent; line-height: .6em; }
.wd-o__slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 max(2px, .04em) rgba(var(--warm-rgb), .35); }
/* until the circle lands the letter is a plain readable "o" (UX audit 22.10: «W◯ Ihr Studio», «R◯utine» read as an empty
   ring on 5 headlines); on landing the circle takes its place as before */
.wd:not(.is-landed):not(.is-static) .wd-o { width: auto; height: auto; margin: 0; overflow: visible; color: inherit; line-height: inherit; vertical-align: baseline; }
.wd:not(.is-landed):not(.is-static) .wd-o__slot { box-shadow: none; }
.wd.is-landed .wd-o__slot, .wd.is-static .wd-o__slot, .cl-ball__warm { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 .05em .16em -.04em rgba(var(--warm-rgb), .85); }
.cl-ball { position: fixed; left: 0; top: 0; z-index: 30; border-radius: 50%; visibility: hidden; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #6b6b74, #2b2b30 55%, #18181b); }
.cl-ball__warm { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
/* the start of a flight: a ball just disappears, a headline "o" keeps its empty ring (the circle moved on) */
.cl-lent { opacity: 0; }
.wd .wd-o__slot.cl-lent { opacity: 1; background: none; box-shadow: inset 0 0 0 max(2px, .04em) rgba(var(--warm-rgb), .35); }
.wd__intro { margin: 20px auto 0; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }

.wd__grid { display: grid; gap: var(--card-gap); }
@media (min-width: 900px) { .wd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- the card: the industry tile, bigger */
.wd-card { position: relative; display: grid; }   /* the pin wrapper only */
.wd-card__in { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; color: var(--ink);
  /* one background for every card (owner 17.10): the brand Föhn — light, warm from the top right, sky from the bottom left */
  background: radial-gradient(110% 80% at 100% 0%, rgba(244, 180, 140, .5), rgba(244, 180, 140, 0) 62%),
    radial-gradient(110% 85% at 0% 100%, rgba(191, 211, 234, .95), rgba(191, 211, 234, 0) 65%),
    linear-gradient(160deg, #fff 0%, var(--paper) 100%); }
/* the accent family of every card (owner 17.10): warm (audit, content) and sky (agents, own), on the common Föhn background.
   --acc = the accent, --acc-tint / --acc-soft = its light steps, --acc-ink = text and glyphs on them */
.wd-tone--warm { --acc: var(--warm); --acc-rgb: var(--warm-rgb); --acc-tint: var(--warm-tint); --acc-soft: var(--peach); --acc-ink: var(--warm-ink); --acc-hi: #f29a68; }
.wd-tone--sky { --acc: var(--sky); --acc-rgb: var(--sky-rgb); --acc-tint: var(--sky-tint); --acc-soft: var(--sky-soft); --acc-ink: var(--sky-ink); --acc-hi: #9dbde3; }
.wd-card__text { display: grid; gap: 16px; padding: 6px clamp(20px, 2.4vw, 32px) clamp(36px, 3.4vw, 44px); }
.wd-card__top { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12.5px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.wd-card__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .8); color: var(--acc-ink); }
.wd-card__ic .icon { display: grid; width: 20px; height: 20px; }
.wd-card__title { margin: 0; font: 500 clamp(23px, 2.2vw, 31px)/1.18 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.wd-w { display: inline-block; }
.wd-card__items { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.wd-card__items li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.55; color: rgba(33, 33, 33, .78); }
.wd-card__items .icon { display: grid; width: 18px; height: 18px; margin-top: 2px; color: var(--acc-ink); }
.wd svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the object area: a white panel on the tile, a second one behind it for depth */
.wd-vis { position: relative; flex: 1; display: grid; align-items: center; padding: clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) 22px; container-type: inline-size; }
/* the second sheet behind the panel follows the panel, whatever the card height */
.wd-panel::before { content: ""; position: absolute; inset: 14px -10px -12px 12px; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .45); transform: rotate(4deg); }
.wd-panel { position: relative; padding: clamp(14px, 4cqw, 22px); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-2); transform: rotate(-1.2deg); }
.wd-chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  font: 600 clamp(12px, 3.3cqw, 14px)/1.2 var(--font); }
.wd-chip .icon { display: grid; flex: none; width: 1.1em; height: 1.1em; }
.wd-chip--title { background: var(--acc-tint); color: var(--acc-ink); margin-bottom: 10px; }
.wd-ball { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--acc-hi), var(--acc) 70%); box-shadow: 0 10px 30px -8px rgba(var(--acc-rgb), .55); }

/* audit · the map of the week */
.wd-map { --rc: clamp(30px, 8.5cqw, 40px); }
.wd-map__rows { position: relative; display: grid; grid-auto-rows: calc(var(--rc) + 12px); }
.wd-map__rail { position: absolute; left: calc(var(--rc) / 2 - 1px); top: 10%; bottom: 10%; width: 2px; border-radius: 2px; background: rgba(var(--shade), .18); }
.wd-map__dot { position: absolute; z-index: 3; left: calc(var(--rc) / 2); top: 10%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .25), 0 0 14px rgba(var(--acc-rgb), .7); opacity: 0; }
.wd-map__scan { position: absolute; left: -10px; right: -10px; top: 0; height: 20%; border-radius: var(--r-s); opacity: 0;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0), rgba(var(--acc-rgb), .28) 30%, rgba(var(--acc-rgb), .28) 70%, rgba(var(--acc-rgb), 0)); }
.wd-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rc) minmax(0, 1fr) auto; align-items: center; gap: 3cqw; }
.wd-row__c { display: grid; place-items: center; width: var(--rc); height: var(--rc); border-radius: 50%; background: var(--acc-tint); color: var(--acc-ink); }
.wd-row__c .icon { display: grid; width: 48%; height: 48%; }
.wd-row__l { font: 500 clamp(13px, 3.8cqw, 16px)/1.2 var(--font); }
.wd-row__s { display: grid; justify-items: end; }
.wd-tag { grid-area: 1 / 1; font-size: clamp(11.5px, 3.2cqw, 13px); padding: 5px 10px 5px 8px; }
.wd-tag--slow { background: var(--warm-tint); color: var(--warm-ink); opacity: 0; }
.wd-tag--auto { background: var(--positive-tint); color: var(--positive-ink); }
.wd-tag--auto svg, .wd-done svg { stroke-width: 2.6; }
@container (max-width: 300px) { .wd-tag .icon { display: none; } .wd-tag { padding-inline: 8px; } .wd-row { gap: 8px; } }   /* the smallest phones: the word, not the icon */

/* agents · the chat in three languages */
.wd-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 clamp(13px, 3.6cqw, 15px)/1.2 var(--font); }
.wd-chat__list { display: grid; gap: 6px; }
.wd-msg { display: inline-flex; align-items: center; gap: 7px; max-width: 86%; padding: 8px 12px; border-radius: 16px; font: 400 clamp(12.5px, 3.6cqw, 14.5px)/1.3 var(--font); }
.wd-msg--in { justify-self: start; background: var(--acc-tint); border-bottom-left-radius: 5px; }
.wd-msg--out { justify-self: end; min-height: 1.3em; background: var(--acc-ink); color: #fff; border-bottom-right-radius: 5px; }
.wd-lang { flex: none; padding: 2px 6px; border-radius: 6px; background: #fff; font: 700 10.5px/1.2 var(--font); letter-spacing: .04em; color: var(--acc-ink); }
.wd-typing { display: none; gap: 4px; padding: 3px 0; }
.wd-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
.wd-done { margin-top: 12px; background: var(--positive-tint); color: var(--positive-ink); }

/* content · the month */
.wd-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, 1.2cqw, 6px); }
.wd-day { padding-bottom: 2px; font: 600 clamp(10px, 2.8cqw, 12px)/1 var(--font); color: var(--text-3); text-align: center; }
.wd-cell { position: relative; aspect-ratio: 1; border-radius: clamp(6px, 2cqw, 10px); background: rgba(var(--acc-rgb), .07); }
.wd-cell__n { position: absolute; left: 5px; top: 4px; font: 500 clamp(9px, 2.5cqw, 11px)/1 var(--font); color: var(--text-3); }
.wd-post { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: inherit; color: var(--acc-ink); }
.wd-post .icon { display: grid; width: 40%; height: 40%; }
.wd-post--photo { background: linear-gradient(150deg, var(--acc-tint), var(--acc-soft)); }
.wd-post--video { background: linear-gradient(150deg, var(--acc-soft), rgba(var(--acc-rgb), .72)); color: #fff; }   /* soft, not a loud accent */
.wd-star { position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--acc-ink); color: #fff; }
.wd-star svg { fill: currentColor; }
.wd-best { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); max-width: none; background: var(--acc-ink); color: #fff; box-shadow: var(--shadow-1); }
.wd-best svg { fill: currentColor; }

/* own · the safe of the company */
.wd-safe { position: relative; padding: clamp(40px, 11cqw, 64px) clamp(12px, 3.5cqw, 24px) clamp(24px, 7cqw, 48px); border-radius: var(--r-l);
  background: rgba(255, 255, 255, .55); border: 2px dashed rgba(var(--acc-rgb), .7); }
.wd-safe__lock { position: absolute; left: 12px; right: 12px; top: 0; z-index: 2; display: flex; justify-content: center; transform: translateY(-50%); }
.wd-chip--lock { background: #fff; color: var(--acc-ink); box-shadow: var(--shadow-1); text-align: center; }
.wd-safe__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: clamp(8px, 3cqw, 18px); }
.wd-docs { display: grid; gap: clamp(7px, 2.4cqw, 12px); }
.wd-doc { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: clamp(8px, 2.6cqw, 13px) clamp(9px, 2.6cqw, 13px); border-radius: 12px; background: #fff; box-shadow: var(--shadow-1);
  font: 500 clamp(11.5px, 3.4cqw, 15px)/1.15 var(--font); min-width: 0; }
.wd-doc .icon { display: grid; flex: none; width: 16px; height: 16px; color: var(--acc-ink); }
.wd-doc > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wd-hub { display: grid; justify-items: center; gap: 6px; font: 600 clamp(12px, 3.3cqw, 14px)/1.2 var(--font); text-align: center; }
.wd-hub .wd-ball { width: clamp(56px, 19cqw, 104px); height: clamp(56px, 19cqw, 104px); }
/* the pixel sphere (js/pixel-morph.js): the canvas is larger than the ball, its glow and sparks reach around it */
.wd-ball--px { position: relative; background: none; box-shadow: none; overflow: visible; }
.wd-panel__head .wd-ball--px { width: 42px; height: 42px; }
.wd-ball--px canvas { position: absolute; left: 50%; top: 50%; width: 147%; height: 147%; translate: -50% -50%; pointer-events: none; }
.wd-team { display: grid; gap: 6px; justify-items: end; }
.wd-team__who { display: grid; place-items: center; width: clamp(32px, 9cqw, 42px); height: clamp(32px, 9cqw, 42px); border-radius: 50%; background: var(--acc-tint); color: var(--acc-ink); }
.wd-team__who .icon { display: grid; width: 18px; height: 18px; }
.wd-bubble { padding: 8px 11px; border-radius: 14px; font: 400 clamp(11.5px, 3.4cqw, 15px)/1.25 var(--font); text-align: left; }
.wd-bubble--ask { background: #fff; box-shadow: var(--shadow-1); border-top-right-radius: 4px; }
.wd-bubble--reply { background: var(--acc-ink); color: #fff; border-top-right-radius: 4px; }

/* phones and tablets: the stack — the shadow on top of every card shows it sliding over the one before */
.wd-card__veil { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(33, 33, 33, .28); opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  .wd-card__in { box-shadow: 0 -14px 34px -20px rgba(var(--shade), .45); }
}
/* phones */
@media (max-width: 599px) {
  /* the chat is the tallest object: a little tighter on phones so the common card height stays close to a screen */
  .wd-chat .wd-panel__head { margin-bottom: 8px; }
  .wd-chat__list { gap: 4px; }
  .wd-msg { padding: 6px 10px; }
  .wd-done { margin-top: 8px; }
  .wd-vis { padding-bottom: 14px; }
  .wd__grid { gap: 12px; }
  .wd-card__in { border-radius: var(--r-l); }
  .wd-card__items li { font-size: 15.5px; }
  .wd-card__text { gap: 18px; padding: 8px 20px 40px; }
  .wd-card__items { gap: 14px; }
}
@media (max-width: 380px) {
  .wd-safe__in { grid-template-columns: minmax(0, 1fr) auto; }
  .wd-team { grid-column: 1 / -1; justify-items: stretch; grid-template-columns: auto 1fr; align-items: start; }
  .wd-team__who { grid-row: span 2; }
  .wd-bubble { justify-self: start; }
}
/* the safe fills its tile (the row height comes from the month next to it) */
@media (min-width: 900px) { .wd-card--own .wd-vis { align-items: stretch; } }   /* phones: centred like the other objects */
.wd-card--own .wd-safe { display: grid; align-content: center; }
@container (max-width: 380px) { .wd-doc .icon { display: none; } }

/* tablets (700–899, layout check 20.10): one card per row, the object beside the text as in «New customers»,
   instead of one card stretched over the whole width */
@media (min-width: 700px) and (max-width: 899px) {
  .wd:not(.ku) .wd-card .wd-card__in { flex-direction: row; align-items: center; }
  .wd:not(.ku) .wd-card .wd-vis { flex: 0 0 52%; }
  .wd:not(.ku) .wd-card .wd-card__text { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 8px; }
}

/* phones (headline check 20.10): the long fr / ru / de headlines took 4–5 lines at 36 px; a step smaller */
@media (max-width: 599px) { .wd h2 { font-size: clamp(30px, 8.6vw, 40px); } }

/* the place of a card in the phone stack (js/section-kit.js stackCards, UX audit 22.10) */
.wd-card__n { position: absolute; z-index: 6; top: 14px; right: 14px; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 0 0 1px rgba(33, 33, 33, .08); color: var(--text-2); font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums; pointer-events: none; }

/* «We also build» (re-audit 22.10): the offers outside the four lines, folded under the cards */
.wd-more { display: grid; gap: 10px; max-width: 760px; margin: clamp(28px, 4vw, 48px) auto 0; padding: 0 var(--edge); }
.wd-more__h { margin: 0 0 4px; color: var(--text-2); font: 600 13px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.wd-more__item { border-radius: 20px; background: #fff; box-shadow: 0 10px 30px -22px rgba(var(--shade), .5), inset 0 0 0 1px rgba(33, 33, 33, .05); }
.wd-more__item summary { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.wd-more__item summary::-webkit-details-marker { display: none; }
.wd-more__item summary:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 20px; }
.wd-more__item .wd-card__ic { flex: none; background: var(--acc-tint); }
.wd-more__item .wd-card__items .icon { color: var(--sky-ink); }
.wd-more__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.wd-more__t b { font: 600 16px/1.25 var(--font); color: var(--ink); }
.wd-more__t span { font: 400 14px/1.35 var(--font); color: var(--text-2); }
.wd-more__chev { flex: none; display: grid; width: 18px; height: 18px; opacity: .55; transition: rotate .2s ease; }
.wd-more__chev svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wd-more__item[open] .wd-more__chev { rotate: 180deg; }
.wd-more__item .wd-card__items { margin: 0; padding: 0 18px 18px 66px; }
@media (prefers-reduced-motion: reduce) { .wd-more__chev { transition: none; } }
/* the ▶ in the corner of a card's picture: the picture shows the result, a tap plays the story (re-audit 22.10) */
.wd-replay { position: relative; z-index: 7; align-self: flex-end; margin: -38px 10px 10px 0; }   /* the right corner: on the left it stood over the line icon (owner 22.10) */   /* over the lower left corner of the picture, clear of the Kaia button; the look: tokens.css «play again» */
.wd-replay:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wd-replay .icon { display: grid; }
@media (hover: hover) { .wd-vis:hover .wd-replay { scale: 1.06; } }
.wd-replay { flex: none; }
@media (min-width: 700px) and (max-width: 899px) {   /* tablets: the picture beside the text — the ▶ in its lower left corner */
  .wd:not(.ku) .wd-card .wd-replay { position: absolute; right: 14px; left: auto; bottom: 14px; margin: 0; }
}

/* /design/css/footer.css */
/* Home footer (owner 18.10): the black final block with the giant k of the design system (index.html § supergraphic:
   «the giant k runs off the edge, the warm circle is the button of the final block»). Motion and markup: js/footer.js */
.ft-host { display: block; margin: var(--section-y) 0 0; }   /* no .hs-foot: its old link and paragraph rules broke the icons */
.ft { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) var(--edge) 0;   /* the footer text lines up with the sections */
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--ink); color: #fff; font-size: 15px; }
.ft a { color: #fff; text-decoration: none; }
.ft a:hover { color: #f4b48c; }
.ft a:focus-visible, .ft button:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* the last call */
.ft__call { position: relative; z-index: 1; max-width: 760px; }
.ft__h { margin: 0; font: 600 clamp(34px, 5.4vw, 72px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.ft .ft__sub { margin: 16px 0 0; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255, 255, 255, .7); }
.ft__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.ft .hs-kaia { background: #fff; color: var(--ink); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .6); }   /* white on black, as on the black cards */
.ft__quiet { color: rgba(255, 255, 255, .78) !important; text-decoration: underline !important; text-underline-offset: 4px; font-size: 15px; }

/* the columns */
.ft__cols { position: relative; z-index: 1; display: grid; gap: 36px 48px; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 900px) { .ft__cols { grid-template-columns: 2fr 1fr 1.1fr; } }
.ft__col h3 { margin: 0 0 14px; font: 600 12.5px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ft__col ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ft__col--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.ft__col li { min-width: 0; }
.ft__col li > a, .ft__col li > .ft-need { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; line-height: 1.3; }   /* 44 px for a finger (a11y 22.10) */
.ft__social { display: flex; gap: 10px; margin-top: 18px; }
.ft .ft-soc { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background .2s; }
a.ft-soc:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.ft-soc svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.ft-soc b { font: 700 17px/1 var(--font); letter-spacing: -0.02em; }
.ft-need { opacity: .55; cursor: default; }   /* [NEED] no link yet (js/footer-copy.js CONTACT) */

/* the giant k runs off the right and the bottom edge; its warm circle is the Kaia button */
.ft__k { position: relative; height: clamp(280px, 38vw, 540px); margin-top: clamp(16px, 3vw, 40px); pointer-events: none; }
.ft__kbox { position: absolute; right: -3%; top: 0; height: 112%; aspect-ratio: 1; }   /* the whole k, it only runs off the right and a little off the bottom */
.ft__kbox svg { width: 100%; height: 100%; overflow: visible; }
/* the raster k (js/footer.js): the dots of the design-system raster K in paper colour, a few twinkle */
.ft__kpx circle { fill: var(--paper); opacity: .32; }
.ft__kpx .ft-px--tw { animation: ft-twinkle 4s var(--d) ease-in-out infinite; }
/* the entrance (js/footer.js): the dots wait at scale 0, then grow in a wave from the stem, 4 ms apart */
.ft__kpx circle { transform-box: fill-box; transform-origin: center; }
.ft__kpx--wait:not(.is-in) circle { scale: 0; }
.ft__kpx.is-in circle { animation: ft-grow .45s cubic-bezier(.34, 1.8, .64, 1) both; animation-delay: calc(var(--n, 0) * 4ms); }
.ft__kpx.is-in .ft-px--tw { animation: ft-grow .45s cubic-bezier(.34, 1.8, .64, 1) both, ft-twinkle 4s var(--d) ease-in-out infinite; animation-delay: calc(var(--n, 0) * 4ms), var(--d); }
@keyframes ft-grow { from { scale: 0; } }
@keyframes ft-twinkle { 0%, 100% { opacity: .32; } 50% { opacity: .9; } }
/* the mic blinks and a ring goes out of the circle: it reads as a button */
.ft__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--warm-rgb), .7); animation: ft-ring 2.4s ease-out infinite; pointer-events: none; }
.ft__dot .icon { animation: ft-blink 2.4s ease-in-out infinite; }
@keyframes ft-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes ft-blink { 0%, 55%, 100% { opacity: 1; } 70% { opacity: .2; } 85% { opacity: 1; } }
.ft__dot { position: absolute; left: calc(70 / 110 * 100%); top: calc(47.75 / 110 * 100%); width: calc(28 / 110 * 100%); aspect-ratio: 1; translate: -50% -50%;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; color: #fff;
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 20px 50px -18px rgba(var(--warm-rgb), .9); transition: scale .25s var(--ease-out, ease); }
@media (hover: hover) { .ft__dot:hover { scale: 1.05; } }
.ft__dot .icon { display: block; width: 30%; height: 30%; }
.ft__dot .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* the legal line sits over the foot of the k */
.ft__legal { position: absolute; z-index: 2; left: var(--edge); bottom: calc(60px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 6px 22px; max-width: 58%; font-size: 13px; color: rgba(255, 255, 255, .6); }
.ft__legal nav { display: flex; flex-wrap: wrap; gap: 0 18px; }   /* Impressum, Datenschutz, AGB, AVV: wraps on narrow screens */
.ft__legal a { color: rgba(255, 255, 255, .75); min-height: 32px; display: inline-flex; align-items: center; }
/* «Cookie-Einstellungen» (js/consent.js): a button that looks like the links, shown only when consent handling is on */
.ft-cookies { display: none; min-height: 32px; align-items: center; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .75);
  font: inherit; cursor: pointer; }
html.consent-on .ft-cookies { display: inline-flex; }
.ft-cookies:hover { color: #fff; }
.ft-cookies:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 599px) {
  .ft { border-radius: var(--r-l) var(--r-l) 0 0; }
  .ft__col--wide ul { column-gap: 14px; font-size: 14px; }
  .ft__k { height: 320px; }
}
/* phones and small tablets: the k cannot move further right without cutting the warm circle, so the legal line goes
   under the k instead of over it (owner 18.10) */
@media (max-width: 899px) {
  .ft__kbox { right: -86px; height: 100%; }
  .ft__legal { position: static; max-width: none; margin-top: 12px; gap: 2px 18px; }
}
@media (prefers-reduced-motion: reduce) { .ft__dot { transition: none; } .ft__dot::after, .ft__dot .icon, .ft__kpx circle { animation: none; } }

/* contact (owner 20.10): no number and no address, two buttons — book (white, the main one on black) and call */
.ft__contact { display: grid; gap: 10px; justify-items: start; margin-bottom: 18px; }
.ft-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill); color: #fff; text-decoration: none;
  font: 600 15px/1 var(--font); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); transition: background .2s, box-shadow .2s; }
.ft-btn:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.ft .ft-btn--main { background: #fff; color: var(--ink); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .6); }
.ft .ft-btn--main:hover { background: #f1f1f4; box-shadow: none; }
.ft-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.ft-btn .icon { display: block; width: 18px; height: 18px; }
.ft-btn .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) { .ft__h { font-size: clamp(26px, 7.6vw, 40px); } }   /* phones: question and invitation, one line each (landings, 20.10) */

/* link columns: a plain column from 600 px, an opening row on phones (owner 20.10). js/footer.js accordion() */
.ft-acc h3 { margin: 0 0 14px; }
.ft-acc__btn { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: default; }
.ft-acc__btn .qa-toggle { display: none; }
/* wide screens: every column open, its title a plain heading (the button exists only on phones; a11y audit 22.10) */
.ft-acc__btn { display: none; }
@media (max-width: 599px) {
  .ft-acc__btn { display: flex; }
  .ft-acc__plain { display: none; }
  .ft .ft__cols { gap: 0; }
  .ft-acc { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .ft-acc h3 { margin: 0; }
  .ft-acc__btn { min-height: 60px; cursor: pointer; font: 600 15px/1.3 var(--font); letter-spacing: .02em; text-transform: none; color: #fff; }
  .ft-acc__btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
  .ft-acc__btn .qa-toggle { display: block; width: 36px; height: 36px; background: rgba(255, 255, 255, .12); color: #fff; }   /* the question toggle, light on black */
  .ft [aria-expanded="true"] .qa-toggle { background: #fff; color: var(--ink); }
  .ft.has-acc .ft-acc__panel { height: 0; overflow: hidden; }
  .ft.has-acc .ft-acc__panel.is-open { height: auto; }
  .ft-acc__panel > ul { padding-bottom: 16px; }
  .ft__cols > .ft__col:not(.ft-acc) { padding-top: 24px; }   /* contact: always open, under the two rows */
  .ft__cols > .ft__col:not(.ft-acc) h3 { margin-bottom: 16px; font: 600 15px/1.3 var(--font); letter-spacing: .02em; text-transform: none; color: #fff; }   /* same title style as the rows */
}
.ft__note { margin: 12px 0 0; max-width: 46ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .62); }   /* what happens on «Talk to Kaia» (re-audit 22.10) */
/* links of the footer reach 44 px for a finger (a11y audit 22.10: 32–36 px) */
.ft a, .ft .ft-cookies { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- v3 (22.10, «modern header and footer»): light on the black, one card for contact, quiet links ---------- */
/* the black gets depth: a sky light from the top corner, the warm light of the circle from the bottom (palette only) */
.ft { background: radial-gradient(60% 45% at 0% 0%, rgba(var(--sky-rgb), .12), transparent 70%),
  radial-gradient(70% 50% at 100% 100%, rgba(var(--warm-rgb), .16), transparent 70%), var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
/* link hierarchy: the links a step quieter than the titles of the rows, white with a drawn line on hover */
.ft__col li > a { color: rgba(255, 255, 255, .78); background: linear-gradient(currentColor, currentColor) 0 calc(50% + .78em) / 0 1px no-repeat;
  transition: color .2s ease, background-size .3s var(--ease-out, ease); }
@media (hover: hover) { .ft__col li > a:hover { color: #fff; background-size: 100% 1px; } }
.ft .ft-prices { color: #fff; font-weight: 600; }   /* «All services and prices»: the way on, not one more item */
/* the column titles on wide screens: a small warm dot, the brand circle in small */
@media (min-width: 600px) { .ft__col > h3::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--warm); vertical-align: middle; } }
/* contact = one card: the two buttons side by side, the networks under them */
.ft__col--contact { align-self: start; padding: 20px; border-radius: var(--r-l); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ft__col--contact .ft__contact { display: flex; flex-wrap: wrap; gap: 10px; }
.ft__social { flex-wrap: wrap; gap: 8px; }
.ft .ft-soc { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .2s ease, color .2s ease, translate .2s var(--ease-out, ease); }
@media (hover: hover) { a.ft-soc:hover { background: #fff; color: var(--ink); translate: 0 -2px; } }
/* phones: the card sits under the two opening rows */
@media (max-width: 599px) {
  .ft__cols > .ft__col--contact { margin-top: 24px; padding: 20px; }
  .ft__cols > .ft__col--contact h3 { margin-bottom: 14px; }
  .ft-acc__btn .qa-toggle { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  .ft__legal { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 8px; }
}
/* 600–1179: the two link columns side by side from 900, the contact card across under them as one row */
@media (min-width: 600px) and (max-width: 1179px) {
  .ft__col--contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 24px; }
  .ft__col--contact h3 { flex-basis: 100%; margin: 0; }
  .ft__col--contact .ft__contact { margin: 0; }
  .ft__col--contact .ft__social { margin: 0 0 0 auto; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .ft__cols { grid-template-columns: 2fr 1fr; }
  .ft__col--contact { grid-column: 1 / -1; }
}
/* wide screens: three columns, the card the third */
@media (min-width: 1180px) {
  .ft__cols { grid-template-columns: 1.7fr 1fr 1.3fr; }
  .ft__col--contact { margin-top: -24px; padding: 24px; }   /* its title on the line of the other column titles */
}
@media (prefers-reduced-motion: reduce) { .ft__col li > a, .ft .ft-soc { transition: none; } }
/* very small phones: six networks do not fit one row in the card, so three and three, not four and two */
@media (max-width: 359px) { .ft__col--contact .ft__social { display: grid; grid-template-columns: repeat(3, 44px); } }
/* short legal words (AGB, AVV) still get a 44 px wide tap area */
.ft__legal a { min-width: 44px; justify-content: center; }
/* the language versions of the page, plain links for every crawler (SEO/GEO audit 22.10) */
.ft__langs { display: flex; flex-wrap: wrap; gap: 0 4px; }
.ft__langs a { min-width: 44px; justify-content: center; color: rgba(255, 255, 255, .6); font-weight: 600; letter-spacing: .04em; }
.ft__langs a[aria-current] { color: #fff; }

/* «© 2026 Klaumo · Alle Rechte vorbehalten» (owner 22.10): alone, centred, the last line of the footer — no longer in the
   row of links, where it sat higher than the 32 px tall links beside it */
.ft__copy { position: absolute; z-index: 2; left: var(--edge); right: var(--edge); bottom: calc(20px + env(safe-area-inset-bottom)); margin: 0;
  text-align: center; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .55); letter-spacing: .01em; }
@media (max-width: 899px) { .ft__copy { position: static; margin-top: 10px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } }   /* under the links, as the k */

/* /design/css/booking.css */
/* The booking window (owner 20.10): name + phone, opened by every «book a meeting» link. js/booking.js
   Design system: white sheet, radius 36, fields on --fill without borders, the main button black, errors red only */
.bk { width: min(460px, calc(100% - 32px)); max-width: none; max-height: calc(100svh - 32px); margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--ink); font-family: var(--font); }
.bk::backdrop { background: rgba(33, 33, 33, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bk__panel { position: relative; padding: clamp(24px, 4vw, 34px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
.bk__x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fill); cursor: pointer; }
.bk__x span, .bk__x span::after { position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); translate: -50% -50%; rotate: 45deg; content: ""; }
.bk__x span::after { rotate: 90deg; translate: -50% -50%; }
.bk__x:focus-visible, .bk__send:focus-visible, .bk__close:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.bk__form, .bk__done { display: grid; gap: 14px; }
.bk__form[hidden], .bk__done[hidden], .bk__fail[hidden] { display: none; }
.bk__h { margin: 0 52px 0 0; font: 600 clamp(24px, 3vw, 30px)/1.12 var(--font); letter-spacing: -0.02em; }
.bk__sub { margin: 0 0 6px; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.bk__f { display: grid; gap: 6px; font: 500 14px/1.2 var(--font); color: var(--text-2); }
.bk__f input { height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-s); background: var(--fill); color: var(--ink); font: 500 17px/1 var(--font); }
.bk__f input:focus { outline: 2px solid var(--sky); outline-offset: 0; background: #fff; }
.bk__f input[aria-invalid="true"] { outline: 2px solid var(--negative); }
.bk__err { min-height: 0; font: 500 13px/1.3 var(--font); font-style: normal; color: var(--negative-ink); }
.bk__err:empty { display: none; }
.bk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk__send, .bk__close { height: 56px; margin-top: 6px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 16px/1 var(--font); cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(33, 33, 33, .55); }
.bk__send { transition: opacity .2s; }   /* not on .bk__close: GSAP animates its opacity, a CSS transition would fight it */
.bk__send:disabled { opacity: .6; cursor: progress; }
.bk__fail { margin: 0; font-size: 14px; }
.bk__fail a { color: var(--negative-ink); }
.bk__privacy { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.bk__done { justify-items: center; text-align: center; padding: 8px 0 0; }
.bk__done .bk__h { margin: 0; }
.bk__done .bk__close { width: 100%; }
.bk__check { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--positive-tint); }   /* green = success only */
.bk__check::after { content: ""; position: absolute; left: 50%; top: 46%; width: 22px; height: 12px; border: solid var(--positive); border-width: 0 0 3px 3px; translate: -50% -50%; rotate: -45deg; }
@media (max-width: 599px) {   /* phones: a sheet from the bottom, the thumb reaches the button */
  .bk { width: 100%; max-height: 92svh; margin: auto 0 0; }
  .bk__panel { border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* the page under the open window does not scroll (audit 22.10); overflow keeps the position, unlike a fixed body */
html.bk-open { overflow: hidden; }
.bk__send:active { scale: .98; }   /* the press is felt (UX audit 22.10) */

/* the phone field (js/phone-field.js, owner 22.10: the same as Kaia's): country button with flag and code, the digits
   grouped, a searchable country list under the row */
.pf { position: relative; }
.pf__row { display: flex; gap: 8px; }
.pf__cc { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 10px 0 14px; border: 0; border-radius: var(--r-s); background: var(--fill);
  color: var(--ink); font: 600 16px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.pf__cc:focus-visible, .pf__cc[aria-expanded="true"] { outline: 2px solid var(--sky); outline-offset: 0; }
.pf__flag { font-size: 20px; line-height: 1; }
.pf__chev { display: grid; width: 18px; height: 18px; color: var(--text-2); transition: transform .2s; }
.pf__chev svg, .pf__search svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf__cc[aria-expanded="true"] .pf__chev { transform: rotate(180deg); }
.pf__row input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: var(--r-s); background: var(--fill); color: var(--ink); font: 500 17px/1 var(--font); font-variant-numeric: tabular-nums; }
.pf__row input:focus { outline: 2px solid var(--sky); outline-offset: 0; background: #fff; }
.pf__row input[aria-invalid="true"] { outline: 2px solid var(--negative); }
.pf__pop { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(320px, 45svh);
  border-radius: 20px; background: #fff; box-shadow: 0 20px 44px -16px rgba(var(--shade), .45), inset 0 0 0 1px rgba(33, 33, 33, .06); overflow: hidden; }
.pf__pop[hidden] { display: none; }
.pf__search { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 0 12px; border-radius: 14px; background: var(--fill); color: var(--text-2); }
.pf__search svg { flex: none; width: 18px; height: 18px; }
.pf__search input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; font: 500 16px/1 var(--font); color: var(--ink); }
.pf__search input:focus { outline: 0; }
.pf__list { margin: 0; padding: 0 6px 8px; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.pf__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--ink); }
.pf__list li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf__d { color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf__list li[aria-selected="true"] { background: var(--sky-tint); }
.pf__list li.is-current .pf__d::after { content: " ✓"; color: var(--positive); }
.pf__list .pf__sep { min-height: 0; height: 1px; padding: 0; margin: 6px 10px; background: rgba(120, 130, 150, .2); cursor: default; }
.pf__list .pf__none { grid-template-columns: 1fr; color: var(--text-3); cursor: default; }

/* phones: the sheet sits on the keyboard, never under it (js/booking.js fitKeyboard sets --kb and --vvh) */
@media (max-width: 599px) {
  .bk { margin: auto 0 var(--kb, 0px); max-height: calc(var(--vvh, 100svh) - 12px); }
  .bk__panel { max-height: calc(var(--vvh, 100svh) - 12px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
}

/* /design/css/qa-toggle.css */
/* Design system · the question toggle (owner 18.10: «exactly these, record them in the design system»).
   A flat round button 40 px: closed = a light fill (--fill) with an ink plus, open = an ink circle with a white cross
   (the plus turns 45°). Used by every question list: the FAQ block of the home page and the landings (js/faq-block.js) and the accordion of the design
   system page (js/flows.js). Open state: inside an open <details>, or on [aria-expanded="true"], or .is-open */
.qa-toggle { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--ink);
  transition: background-color .25s var(--ease-out, ease), color .25s, transform .3s var(--ease-out, ease); }
.qa-toggle::before, .qa-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; margin: -1px 0 0 -7.5px; border-radius: 2px; background: currentColor; }
.qa-toggle::after { transform: rotate(90deg); }
details[open] > summary .qa-toggle, [aria-expanded="true"] .qa-toggle, .qa-toggle.is-open { background: var(--ink); color: #fff; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .qa-toggle { transition: none; } }

/* /design/css/faq-block.css */
/* The one «Questions» block (owner 21.10: the landing design, now used by the home page and every industry landing).
   The head is the design system's section head (css/leistungen.css: .wd__head, the circle letter); this file is the
   narrow centred column of white rounded rows with the round «+» (css/qa-toggle.css) and the optional end under it.
   Markup and behaviour: js/faq-block.js */
.fq-list { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.fq-item { border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }
.fq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 22px; cursor: pointer; list-style: none; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-l); }
.fq-q { flex: 1; margin: 0; font: 600 18px/1.4 var(--font); color: var(--ink); text-wrap: balance; }
.fq-item .qa-toggle { width: 32px; height: 32px; }   /* the landing size of the design-system toggle */
.fq-item .qa-toggle::before, .fq-item .qa-toggle::after { width: 12px; margin-left: -6px; }
.fq-a { display: grid; gap: 10px; max-width: 64ch; padding: 0 22px 20px; }
.fq-a p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.fq-end { display: grid; justify-items: center; gap: 14px; margin-top: clamp(28px, 4vw, 44px); text-align: center; }
@media (max-width: 399px) {
  .fq-q { font-size: 16px; }
  .fq-item summary { gap: 12px; padding: 14px 16px; }
  .fq-a { padding: 0 16px 18px; }
}
/* the link under an answer that names a price (to «Leistungen & Preise») */
.fq-a .fq-more { margin-top: 10px; }
.fq-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(var(--warm-rgb), .6); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fq-more a::after { content: "→"; color: var(--warm-ink); }
@media (hover: hover) { .fq-more a:hover { text-decoration-color: var(--warm); } }

/* /design/css/quiz.css */
/* The price quiz «Was kostet es bei mir?» (js/quiz.js, owner 22.10): on the price page and on every industry landing.
   One question per screen with big tiles, the result with its sums, the contract switch Flex | Partner 12 (the design
   system's Segmented) and the one needed service «gleich dazu». Page: css/prices.css; data: tools/quiz-data.mjs */
/* ---------- the contract switch: the design system's Segmented (design/index.html § 09, css/components.css + bead.css):
   a light pill, a white glass thumb that springs to the choice; every set-up figure follows it ---------- */
.pr-switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 24px; padding: 4px; border-radius: 999px;
  background: rgba(232, 231, 238, .95); box-shadow: inset 0 1px 2px rgba(var(--shade), .12); }
.pr-switch button { position: relative; z-index: 1; min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px; background: none; color: var(--ink);
  font: 500 16px/1 var(--font); white-space: nowrap; cursor: pointer; transition: color var(--d-ui, .32s); }
.pr-switch button[aria-checked="true"] { font-weight: 600; }
.pr-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pr-switch .segmented__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, #fafafb, #e4e4e9); transition: transform var(--d-ui, .32s) var(--e-spring, ease);
  box-shadow: inset 0 0 4px 1px rgba(255, 255, 255, .9), inset 0 2px 0 rgba(var(--sky-rgb), .35), inset 0 -2px 3px rgba(255, 255, 255, .8), 0 6px 14px -6px rgba(0, 0, 0, .3); }
body[data-contract="p12"] .pr-switch .segmented__thumb { transform: translateX(100%); }
.pr-switch__note { margin: 10px 0 0; color: var(--ink); font: 500 15px/1.4 var(--font); }
.pr-switch__note [data-for="p12"], body[data-contract="p12"] .pr-switch__note [data-for="flex"] { display: none; }
body[data-contract="p12"] .pr-switch__note [data-for="p12"] { display: inline; color: var(--positive-ink); }
@media (prefers-reduced-motion: reduce) { .pr-switch .segmented__thumb { transition: none; } }
.pr-terms { display: block; max-width: 62ch; margin: 12px 0 0; padding: 0; background: none; box-shadow: none; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.pr-n--p12 { display: none; }
body[data-contract="p12"] .pr-n--flex { display: none; }
body[data-contract="p12"] .pr-n--p12 { display: inline; color: var(--positive-ink); }

/* ---------- the quiz «Was kostet es bei mir?» (js/quiz.js): one question per screen, big tiles with ticks ---------- */
.qz { max-width: var(--pr-max, 1180px); margin: 0 auto; scroll-margin-top: 80px; }
.qz__card { padding: clamp(22px, 4vw, 44px); border-radius: 32px; background: #fff; box-shadow: 0 1px 2px rgba(33, 33, 33, .04), 0 30px 60px -36px rgba(var(--shade), .5); }
.qz__head h2 { margin: 0; font: 600 clamp(24px, 3vw, 36px)/1.12 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.qz__head p { max-width: 56ch; margin: 8px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.5; }
.qz__stage { margin-top: clamp(20px, 3vw, 32px); scroll-margin-top: 90px; }
.qz__noscript { margin: 0; color: var(--text-2); }
.qz__progress { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--text-2); font: 500 14px/1 var(--font); font-variant-numeric: tabular-nums; }
.qz__bar { flex: 1; height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.qz__bar i { display: block; height: 100%; border-radius: inherit; background: var(--warm); transition: width .35s var(--e-out, ease-out); }
.qz__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.qz__q { padding: 0; font: 600 clamp(21px, 2.4vw, 28px)/1.2 var(--font); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; outline: 0; }
.qz__hint { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
.qz__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-top: 18px; }
.qz-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 48px 12px 14px; border-radius: 18px; background: var(--paper); cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s ease, background-color .2s ease; font: 500 16px/1.3 var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent; }
.qz-opt input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) { .qz-opt:hover { background: var(--warm-tint); } }
.qz-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.qz-opt:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 2px var(--warm), 0 10px 24px -16px rgba(var(--warm-rgb), .8); }
.qz-opt__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--warm-ink); box-shadow: inset 0 0 0 1px rgba(var(--warm-rgb), .18); }
.qz-opt__ic .icon { display: grid; width: 20px; height: 20px; }
.qz-opt__t { min-width: 0; text-wrap: pretty; }
.qz-opt__tick { position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(33, 33, 33, .25); transition: background-color .2s ease, box-shadow .2s ease; }
.qz-opt input[type="checkbox"] ~ .qz-opt__tick { border-radius: 8px; }
.qz-opt:has(input:checked) .qz-opt__tick { background: var(--warm); box-shadow: none; }
.qz-opt:has(input:checked) .qz-opt__tick::after { content: ""; position: absolute; left: 7px; top: 5px; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; rotate: -45deg; }
.qz__err { min-height: 1.4em; margin: 10px 0 0; color: var(--negative-ink); font-size: 14px; }
.qz__err:empty { min-height: 0; margin: 0; }
.qz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.qz__back, .qz__edit, .qz__restart { min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 500 16px/1 var(--font); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(33, 33, 33, .3); cursor: pointer; }
.qz__next { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 16px/1 var(--font); cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(33, 33, 33, .55); }
.qz__next:active { scale: .98; }
.qz__next:focus-visible, .qz__back:focus-visible, .qz__edit:focus-visible, .qz__restart:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* phones: «Weiter» stays at the foot of the screen, above the keyboard and the thumb */
@media (max-width: 599px) {
  .qz__card { margin-inline: calc(var(--edge) * -0.5); padding: 22px 16px 18px; border-radius: 26px; }
  .qz__opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .qz-opt { min-height: 56px; font-size: 15.5px; }
  .qz__nav { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 5; padding: 8px; margin-inline: -8px; border-radius: 999px; background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -14px rgba(var(--shade), .5); }
  .qz__next { flex: 1; justify-content: center; }
}

@media (max-width: 599px) { body.qz-in .kfab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } }   /* !important: GSAP keeps the button's visibility inline */

/* the result */
.qz__rh { margin: 0; font: 600 clamp(22px, 2.6vw, 30px)/1.15 var(--font); letter-spacing: -0.02em; outline: 0; }
.qz__rsub { margin: 6px 0 0; color: var(--text-2); }
.qz__sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-top: 18px; }
.qz__sums p { display: grid; gap: 6px; margin: 0; padding: 18px 20px; border-radius: 20px; background: var(--warm-tint); }
.qz__sums p.qz__m { background: var(--sky-tint); }
.qz__sums span { color: var(--text-2); font: 500 14px/1.3 var(--font); }
.qz__sums b { font: 600 clamp(30px, 4vw, 42px)/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qz__sums .qz__m b { color: var(--sky-ink); }
.qz__disc { margin: 10px 0 0; color: var(--positive-ink); font: 600 14.5px/1.4 var(--font); }
.qz__contract { margin-top: 6px; }
.qz__contract .pr-switch { margin-top: 12px; }
.qz__lines { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.qz__lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: var(--paper); }
.qz__lines b { display: block; font: 600 16px/1.3 var(--font); }
.qz__why { display: block; margin-top: 2px; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.qz__lp { color: var(--ink); font: 600 15px/1.3 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qz__note { margin: 14px 0 0; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.qz__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.qz__again { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px -14px 0; }


/* «gleich dazu»: one needed service at half the set-up (js/quiz.js) */
.qz__add { display: grid; gap: 10px; margin-top: 16px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(var(--warm-rgb), .14), rgba(var(--warm-rgb), .04));
  box-shadow: inset 0 0 0 1.5px rgba(var(--warm-rgb), .45); }
.qz__add.is-on { background: #fff; box-shadow: inset 0 0 0 2px var(--warm), 0 14px 30px -18px rgba(var(--warm-rgb), .8); }
.qz__add-k { margin: 0; color: var(--warm-ink); font: 700 13px/1.3 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.qz__add-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.qz__add-row b { display: block; font: 600 17px/1.3 var(--font); }
.qz__add-p { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qz__add-p b { display: inline; font: 700 20px/1.2 var(--font); color: var(--ink); }
.qz__add-one { margin-right: 6px; color: var(--text-2); font-size: 14px; }
.qz__add-p span { color: var(--sky-ink); font-weight: 600; font-size: 14px; }
.qz__add-btn { justify-self: start; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--warm-ink); color: #fff; font: 600 16px/1 var(--font); cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(var(--warm-rgb), .9); }
.qz__add-btn[aria-pressed="true"] { background: #fff; color: var(--positive-ink); box-shadow: inset 0 0 0 2px var(--positive-ink); }
.qz__add-btn[aria-pressed="true"]::before { content: "✓ "; }
.qz__add-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.qz__add-note { margin: 0; color: var(--text-2); font-size: 13px; }

/* on the industry landings: a section of the page, between «Kurz zu den Bedingungen» and the Kaia card */
.v4-quiz { margin: var(--section-y, clamp(72px, 10vw, 140px)) var(--edge, 20px) 0; }
@media (min-width: 1240px) { .v4-quiz { margin-inline: auto; } }
.qz__cta--top { margin-top: 14px; }
.qz__what { display: block; margin-top: 3px; color: var(--ink); font-size: 14px; line-height: 1.4; }

/* the result (owner 22.10: next, back, Kaia — nothing else): plain lines instead of headings and buttons */
.qz__info { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.qz__info--add { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--warm-rgb), .1); color: var(--ink); }
.qz__sums { outline: 0; }
.qz__lines li { align-items: baseline; }
.qz__kaia-dot { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 2px 0 -12px; border-radius: 50%; background: var(--warm); color: #fff; }
.qz__kaia-dot .icon { display: grid; width: 16px; height: 16px; }
.qz__kaia-dot svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* «Weiter» / «Mit Kaia besprechen» stays at the foot of the screen on every size (owner 22.10: a fixed next) */
.qz__nav { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 5; }
@media (min-width: 600px) { .qz__nav { padding: 8px; margin-inline: -8px; border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -14px rgba(var(--shade), .5); } }
/* the price page: one H1 over the quiz, no intro */
.pr-head--quiz { padding-bottom: clamp(16px, 2vw, 24px); }

/* ===== Quiz result (owner 22.10): what changes for you → two packages, Flex and Partner 12 (the discounted one), each
   with its pluses → Zurück + Kaia. Colour grammar: neutral = Flex, warm = the discount, green = a plus, sky = a condition.
   No strike-through: two real prices side by side ===== */
.qz-win { display: grid; gap: var(--s-5); }
.qz-win__k { margin: 0 0 var(--s-3); color: var(--text-2); font: 600 14px/1.3 var(--font); }
.qz-win__sol ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.qz-win__sol li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink); font: 600 19px/1.35 var(--font); letter-spacing: -0.01em;
  animation: qz-win-in .5s var(--e-out) both; animation-delay: calc(var(--i, 0) * 90ms); }
.qz-win__tick { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; background: var(--positive-tint); color: var(--positive-ink); }
.qz-win__tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* two packages to choose (radio cards): the chosen one gets the ink ring; Partner 12 carries the warm tint and a badge */
.qz-win__packs { display: grid; gap: var(--s-3); }
.qz-pack { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--s-5); border-radius: var(--r-m); background: var(--paper);
  animation: qz-win-in .55s var(--e-out) both; animation-delay: .25s; }
.qz-pack--p12 { background: var(--warm-tint); box-shadow: var(--shadow-1); animation-delay: .4s; }
.qz-pack__badge { align-self: flex-start; margin: 0 0 var(--s-2); padding: 4px 12px; border-radius: var(--r-pill); background: var(--warm-ink); color: #fff; font: 600 14px/1.4 var(--font);
  animation: qz-win-pop .45s var(--e-out) both; animation-delay: .9s; }
.qz-pack__name { color: var(--text-2); font: 600 16px/1.3 var(--font); }
.qz-pack--p12 .qz-pack__name { color: var(--warm-ink); }
.qz-pack__amt { margin-top: var(--s-1); color: var(--ink); font: 600 22px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.qz-pack__amt > span { color: var(--text-2); font-weight: 500; font-size: 17px; }
.qz-pack__amt b { font-size: 34px; font-weight: 600; letter-spacing: var(--track-display); }
.qz-pack--p12 .qz-pack__amt b { font-size: 40px; }
.qz-pack__mo { color: var(--text-2); font: 500 15px/1.4 var(--font); font-variant-numeric: tabular-nums; }
.qz-pack__list { display: grid; gap: 6px; margin-top: var(--s-3); }
.qz-pack__plus, .qz-pack__cond { display: flex; gap: var(--s-2); color: var(--ink); font: 500 15px/1.4 var(--font); }
.qz-pack__plus::before { content: "✓" / ""; flex: none; width: 16px; color: var(--positive-ink); font-weight: 700; }
.qz-pack__cond { color: var(--sky-ink); }
.qz-pack__cond::before { content: "•" / ""; flex: none; width: 16px; text-align: center; font-weight: 700; }

/* the bonus: a gift from the catalogue's own terms, ticked with «Nehme ich» */
.qz-bonus { display: grid; gap: var(--s-2); margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); border: 1.5px dashed rgba(var(--warm-rgb), .55); border-radius: var(--r-m);
  animation: qz-win-in .55s var(--e-out) both; animation-delay: .6s; }
.qz-bonus > .qz-win__k { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); color: var(--warm-ink); }
.qz-bonus__gift { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--warm); color: #fff; }
.qz-bonus__gift svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.qz-bonus ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.qz-bonus__row { display: flex; }
.qz-bonus__t { flex: 1; display: grid; gap: 2px; color: var(--ink); }
.qz-bonus__t b { font: 600 17px/1.35 var(--font); }
.qz-bonus__t small { color: var(--text-2); font: 500 14px/1.4 var(--font); }
.qz-win__note { margin: calc(var(--s-2) * -1) 0 0; color: var(--text-3); font: 400 13px/1.45 var(--font); text-align: center; }
@keyframes qz-win-in { from { opacity: 0; translate: 0 10px; } }
@keyframes qz-win-pop { from { opacity: 0; scale: .85; } }
@media (prefers-reduced-motion: reduce) { .qz-win__sol li, .qz-pack, .qz-pack__badge, .qz-bonus { animation: none; } }

/* ---------- the one action of the result: «talk to our agent», in the flow under the estimate (owner 22.10) ---------- */
.qz-win__cta { display: flex; justify-content: center; animation: qz-win-in .55s var(--e-out) both; animation-delay: .7s; }
.qz-offer__kaia { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; gap: var(--s-3); min-height: 64px;
  padding: 8px var(--s-6, 32px) 8px 10px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 17px/1 var(--font); cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(33, 33, 33, .55); transition: scale var(--d-micro) var(--e-out), box-shadow var(--d-ui) var(--e-out); }
.qz-offer__dot { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--warm); color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--warm-rgb), .22); animation: qz-offer-breathe 2.8s ease-in-out infinite; transition: scale var(--d-micro) var(--e-out); }
.qz-offer__dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes qz-offer-breathe { 50% { box-shadow: 0 0 0 7px rgba(var(--warm-rgb), .1); } }

/* states */
@media (hover: hover) {
  .qz-offer__kaia:hover { box-shadow: 0 16px 34px -12px rgba(33, 33, 33, .7); }
}
.qz-offer__kaia:active { scale: .97; box-shadow: 0 6px 16px -10px rgba(33, 33, 33, .6); }
.qz-offer__kaia:active .qz-offer__dot { scale: .9; }
.qz-offer__kaia:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.qz-offer__kaia[aria-busy="true"] { cursor: progress; }                                     /* Kaia connecting: the dot breathes faster, the label stays */
.qz-offer__kaia[aria-busy="true"] .qz-offer__dot { animation-duration: .9s; }
@media (prefers-reduced-motion: reduce) { .qz-offer__dot { animation: none; } .qz-offer__kaia:active { scale: 1; } }

/* ---------- phone ---------- */
@media (max-width: 599px) {
  .qz-win__sol li { font-size: 17px; }
  .qz-offer__kaia { flex: 1; gap: var(--s-3); padding: 8px var(--s-4) 8px 10px; }
}
/* ---------- tablet and desktop: the packages side by side, the discounted one a little wider ---------- */
@media (min-width: 700px) {
  .qz-win__packs:not(.is-one) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-4); }
  .qz-pack--p12 .qz-pack__amt b { font-size: 48px; }
}
@media (min-width: 900px) {
  .qz-win { gap: var(--s-6); }
  .qz-win__sol li { font-size: 21px; }
  .qz-pack { padding: var(--s-5) 28px 28px; }
  .qz-offer__kaia { min-width: 360px; }
}

/* the Kaia button: what it does and what you get, two lines (owner 22.10: «talk to our agent — you'll see how it works») */
.qz-offer__lbl { display: grid; gap: 2px; text-align: left; }
.qz-offer__lbl small { color: rgba(255, 255, 255, .72); font: 500 13px/1.2 var(--font); }

/* ---------- phone: the step buttons sit fixed at the foot of the screen while the quiz is on it (owner 22.10: «they
   jump»); the stage keeps room for them, so nothing moves when they appear. The result has no bar ---------- */
@media (max-width: 599px) {
  .qz__stage:not(.is-result) { padding-bottom: 96px; }
  .qz__nav { position: fixed; z-index: var(--z-sticky, 40); left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom));
    margin: 0; padding: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: var(--blur-1); backdrop-filter: var(--blur-1); box-shadow: var(--shadow-2);
    transition: opacity var(--d-ui) ease, translate var(--d-ui) var(--e-out), visibility 0s; }
  body:not(.qz-in) .qz__nav { opacity: 0; translate: 0 16px; visibility: hidden; pointer-events: none;
    transition: opacity var(--d-ui) ease, translate var(--d-ui) var(--e-out), visibility 0s var(--d-ui); }
  .qz-offer__lbl { font-size: 16px; line-height: 1.2; }
  .qz-offer__lbl small { font-size: 13px; }
}

/* ---------- v2 (22.10): own words, «not sure», the facts under the estimate, trust, «change answers» ---------- */
.qz__own { display: grid; gap: 6px; margin-top: var(--s-4); }
.qz__own-l { color: var(--text-2); font: 600 14px/1.3 var(--font); }
.qz__own-i { box-sizing: border-box; width: 100%; min-height: 52px; padding: 0 var(--s-4); border: 1.5px solid var(--line-strong, rgba(33, 33, 33, .22)); border-radius: var(--r-s); background: #fff;
  color: var(--ink); font: 500 17px/1.3 var(--font); }
.qz__own-i:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: transparent; }
.qz__own-h, .qz__unknown { margin: 0; color: var(--text-2); font: 500 14px/1.4 var(--font); }
.qz__unknown { margin-top: var(--s-3); }
.qz__own[hidden], .qz__unknown[hidden] { display: none; }

.qz-win__facts { display: grid; gap: 6px; margin: var(--s-4) 0 0; padding: 0; list-style: none; color: var(--text-2); font: 500 15px/1.45 var(--font); }
.qz-win__facts li { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.qz-win__kind { color: var(--ink); font-weight: 600; }
.qz-win__pay b { color: var(--positive-ink); font-weight: 600; }
.qz-win__pay small { flex-basis: 100%; color: var(--text-3); font: 400 13px/1.4 var(--font); }

.qz-talk { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-m); background: var(--warm-tint); }
.qz-talk p { margin: 0; color: var(--ink); font: 500 17px/1.45 var(--font); }
.qz-talk .qz-talk__h { color: var(--warm-ink); font: 600 22px/1.25 var(--font); letter-spacing: -0.01em; }
.qz-talk .qz-talk__s { color: var(--text-2); font-size: 14px; }

.qz-win__trust { margin: calc(var(--s-2) * -1) 0 0; color: var(--text-2); font: 500 13px/1.45 var(--font); text-align: center; }
.qz-win__change { margin: 0; text-align: center; }
.qz-link { min-height: 44px; padding: 0 var(--s-3); border: 0; background: none; color: var(--text-2); font: 500 14px/1 var(--font); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(33, 33, 33, .3); }
@media (hover: hover) { .qz-link:hover { color: var(--ink); } }
.qz-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-s); }
.qz__more { margin-top: var(--s-2); }
.qz-opt[hidden] { display: none; }

/* /branchen/assets/landing.css */
/* Industry landings v3 (owner 18.10): every section = the home «What we do» frame — eyebrow, the big centred headline
   whose "o" receives the travelling warm circle, one line under it — then cards. Only what the home page lacks is here.
   Colours: the 5 families of design system v2 (neutral, warm brand circle, sky, green = what you win, red = the pain mark). */

.lp .wd { scroll-margin-top: 76px; }
.lp-inner { max-width: 1180px; margin: 0 auto; }
.lp-center { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
.lp .icon svg, .lp-sheet svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lp-subhead { margin: clamp(48px, 6vw, 72px) auto 18px; max-width: 1180px; font: 600 clamp(22px, 2.2vw, 28px)/1.2 var(--font); letter-spacing: -0.02em; text-align: center; }

/* ---------- pains: three cards in the owner's words, then the emergency card ---------- */
.lp-pains__grid { display: grid; gap: 16px; max-width: 1180px; margin: 0 auto; }
@media (min-width: 900px) { .lp-pains__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-pain { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-xl);
  background: radial-gradient(110% 80% at 100% 0%, rgba(244, 180, 140, .32), rgba(244, 180, 140, 0) 60%), linear-gradient(160deg, #fff, var(--paper));
  box-shadow: 0 1px 2px rgba(var(--shade), .06), 0 24px 48px -28px rgba(var(--shade), .35); }
.lp-pain__n { position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(20px, 2.4vw, 30px); font: 600 15px/1 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.lp-pain__ic { display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }
.lp-pain h3 { margin: 6px 0 0; font: 600 clamp(22px, 2vw, 26px)/1.2 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.lp-pain p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.lp-pain .lp-pain__cost { display: flex; gap: 10px; align-items: center; margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(var(--shade), .1); color: var(--ink); font-weight: 600; }
.lp-pain__x { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--negative); color: #fff; }
.lp-sos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; max-width: 1180px; margin: 16px auto 0;
  padding: clamp(24px, 3.6vw, 48px); border-radius: var(--r-xl); background: var(--ink); color: #fff; box-shadow: 0 30px 60px -30px rgba(33, 33, 33, .7); }
.lp-sos__ic { display: grid; place-items: center; width: 56px; height: 56px; padding: 15px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); }
.lp-sos h3 { margin: 4px 0 0; font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.lp-sos p { max-width: 60ch; margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.lp-sos__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.lp-sos__tags li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 14px; font-weight: 500; }
@media (max-width: 599px) { .lp-sos { grid-template-columns: 1fr; } }

/* ---------- the call scenario: the common headline above, the scheme's own head hidden ---------- */
.lp-flowhead { margin-bottom: 0; }
.lp-flow .fa-head { display: none; }
.lp-flow .fa { padding-top: 0; }

/* ---------- «What we build»: third card full width on two columns; what you get as tiles ---------- */
@media (min-width: 900px) { .lp-build__grid .wd-card:nth-child(3) { grid-column: 1 / -1; } }
.lp-tiles { display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.lp-tile { padding: 22px 24px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }
.lp-tile h3 { margin: 0 0 8px; font: 600 18px/1.3 var(--font); }
.lp-tile p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }

/* ---------- calculator: two numbers, the gain first ---------- */
.lp-calc { display: grid; gap: clamp(24px, 4vw, 56px); max-width: 1180px; margin: 0 auto; padding: clamp(22px, 3.4vw, 48px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .lp-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.lp-calc__fields { display: grid; gap: 26px; }
.lp-calc__field label { display: block; margin-bottom: 10px; font: 600 18px/1.35 var(--font); }
.lp-calc__inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.lp-num { display: inline-flex; align-items: center; min-height: 56px; padding: 0 16px; border-radius: var(--r-m); background: var(--fill); }
.lp-num:focus-within { box-shadow: 0 0 0 2px var(--focus); background: #fff; }
.lp-num input { width: 2.6ch; border: 0; background: none; font: 600 24px/1 var(--font); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); -moz-appearance: textfield; }
.lp-num input:focus { outline: none; }
.lp-num input::-webkit-inner-spin-button, .lp-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lp-calc__assume { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.lp-range { --p: 50%; width: 100%; height: var(--hit); margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.lp-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--p), rgba(200, 201, 210, .75) var(--p)); }
.lp-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(200, 201, 210, .75); }
.lp-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.lp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .12); }
.lp-range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.lp-range:focus-visible { outline: none; }
.lp-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus), 0 3px 8px rgba(0, 0, 0, .2); }
.lp-gain { container-type: inline-size; display: grid; gap: 8px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-l); background: var(--positive-tint); }
.lp-gain__k { font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--positive-ink); }
.lp-gain__big { font: 600 clamp(44px, 17cqi, 84px)/1 var(--font); letter-spacing: -0.04em; color: var(--positive-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-gain__hours { margin: 4px 0 0; font: 600 clamp(18px, 1.6vw, 21px)/1.35 var(--font); color: var(--ink); }
.lp-gain__low { margin: 0; font: 600 20px/1.4 var(--font); color: var(--ink); }
.lp-gain.is-low { background: var(--grey-2); }
.lp-gain.is-low .lp-gain__k { color: var(--text-2); }
.lp-gain__fine { display: grid; gap: 6px; margin: 14px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(var(--green-rgb), .2); font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* ---------- four steps and the price ---------- */
.lp-steps { display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 900px) { .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-step { display: grid; align-content: start; gap: 10px; padding: 26px 24px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }
.lp-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 18px/1 var(--font); }
.lp-step h3 { margin: 6px 0 0; font: 600 21px/1.25 var(--font); }
.lp-step p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.lp-step__time { justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--sky-tint); color: var(--sky-ink); font-size: 13.5px; font-weight: 600; }
.lp-price { display: grid; gap: 14px; max-width: 1180px; margin: 14px auto 0; }
@media (min-width: 900px) { .lp-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.lp-price__card { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); color: #fff; background: radial-gradient(120% 90% at 80% 100%, #3a3a40, #212121 60%); }
.lp-price__name { margin: 0; font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.lp-price__big { margin: 12px 0 0; font: 600 clamp(26px, 2.8vw, 36px)/1.15 var(--font); letter-spacing: -0.025em; text-wrap: balance; font-variant-numeric: tabular-nums; }
.lp-price__more { margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.lp-price__care { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }
.lp-price__care h3 { margin: 0 0 14px; font: 600 19px/1.3 var(--font); }
.lp-price__care ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-price__care li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; }
.lp-price__care .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--positive); }

/* ---------- at a glance ---------- */
.lp-facts__list { max-width: 1180px; margin: 0 auto; display: grid; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.lp-facts__row { display: grid; gap: 6px; padding: 18px 24px; border-bottom: 1px solid rgba(var(--shade), .08); }
.lp-facts dt { font: 600 12.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sky-ink); }
.lp-facts dd { margin: 0; font-size: 17px; line-height: 1.5; }
@media (min-width: 760px) {
  .lp-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-facts__row:nth-child(odd) { border-right: 1px solid rgba(var(--shade), .08); }
  .lp-facts__row:nth-last-child(-n + 2) { border-bottom: 0; }
}
.lp-facts__date { max-width: 1180px; margin: 12px auto 0; font-size: 13.5px; color: var(--text-3); }

/* ---------- the conversation with Kaia: the big black card, one column, with the steps ---------- */
.lp-action .kcta { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: clamp(64px, 9vw, 128px); padding: clamp(28px, 5vw, 80px); }
.lp-action .kcta__text { max-width: 760px; }
.lp-action .kcta h2 { font-size: clamp(34px, 5.2vw, 72px); }
.lp-action__steps { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: k; }
.lp-action__steps li { counter-increment: k; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; color: rgba(255, 255, 255, .9); }
.lp-action__steps li::before { content: counter(k); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; font-size: 15px; }
.lp-action__calm { margin: 18px 0 0; font-size: 14px; color: rgba(255, 255, 255, .62); }

/* ---------- questions ---------- */
.lp-faq__list { max-width: 900px; margin: 0 auto; }
.hs-faq .lp-q { display: inline; margin: 0; font: inherit; }
.lp-faq details p { font-size: 16.5px; }

/* footer languages */
.lp-foot__langs { display: flex; gap: 4px; }
.lp-foot__langs a { min-width: 44px; justify-content: center; border-radius: 999px; font-weight: 600; text-decoration: none; }
.lp-foot__langs a[aria-current="page"] { background: var(--fill); color: var(--ink); }

/* Kaia sheet: the Föhn glass of the home Kaia sheet, from the bottom on phones */
.lp-sheet { width: min(100% - 16px, 520px); max-height: min(92svh, 640px); inset: auto 0 0 0; margin: 0 auto calc(8px + env(safe-area-inset-bottom)); padding: 18px 22px 26px; border: 0; border-radius: var(--r-xl); color: var(--ink); text-align: center;
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--warm-rgb), 0.4), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(var(--sky-rgb), 0.6), transparent 62%), rgba(250, 250, 252, 0.96);
  box-shadow: inset 0 0 6px 1px rgba(255, 255, 255, 0.8), 0 -10px 40px -10px rgba(var(--shade), 0.35); }
.lp-sheet::backdrop { background: rgba(20, 20, 24, 0.4); }
.lp-sheet[open] { display: grid; gap: 14px; justify-items: center; }
.lp-sheet__head { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.lp-sheet__head h2 { margin: 0; font: 600 21px/1.2 var(--font); }
.lp-sheet__close { display: grid; place-items: center; width: var(--hit); height: var(--hit); padding: 12px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.7); color: var(--ink); cursor: pointer; }
.lp-sheet__orb { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--sky-soft) 50%, var(--sky) 100%); box-shadow: 0 0 40px 4px rgba(var(--sky-rgb), 0.4); }
.lp-sheet__orb span { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: var(--shadow-warm); }
.lp-sheet p { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.45; }
.lp-sheet__calc { padding: 10px 14px; border-radius: var(--r-m); background: var(--positive-tint); color: var(--positive-ink); font-weight: 500; }
.lp-sheet__mic { font-size: 14px !important; color: var(--text-2); }
.lp-sheet__start { justify-content: center; width: 100%; text-decoration: none; }
@media (min-width: 1024px) { .lp-sheet { inset: 0; margin: auto; } }

/* /branchen/assets/landing-v4.css */
/* Industry landing v4 — docs/copy/landings/handwerk-v4-ui.md. Home tokens and components only:
   neutral, warm (the circle), sky (icons, terms), green (the gain), red (only the «what it costs» mark). */

.v4 { --v4-max: 1180px; }
.v4 .icon, .v4 .icon svg, .v4-ic svg, .v4-chip__ic svg { display: block; }
.v4 .icon svg, .v4-ic svg, .v4-chip__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.v4-sec { scroll-margin-top: 76px; }
.v4 .wd__head h2 { font-size: clamp(34px, 5vw, 72px); max-width: 16ch; }
@media (max-width: 379px) { .v4 .wd__head h2 { font-size: clamp(28px, 9.4vw, 34px); } }   /* 320 px: «Bedingungen» was 3 px wider than the screen (re-audit 22.10) */
.v4 .wd__intro { max-width: 46ch; }
.v4-center { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.v4-card { border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }

/* ---------- 1 · hero: fact chips and the note under the button ---------- */
/* Kaia's short line above the hero button: the black bubble of the home page (approved 15.10), its tail points at the
   warm circle (owner 22.10: «short, and it should say this is a button to press»). The full hint is #kaiaHint (sr-only) */
.v4-ctanote { position: absolute; z-index: 10; left: var(--bx, 75%); top: calc(var(--by, 50%) - var(--bh, 76px) / 2 - 16px); width: max-content;
  max-width: min(340px, calc(100vw - 32px)); margin: 0; transform: translate(-50%, -100%); display: grid; gap: 2px; padding: 12px 16px 13px;
  border-radius: 20px; background: var(--ink); color: #fff; font: 400 15px/1.4 var(--font); text-align: left; pointer-events: none;
  box-shadow: 0 14px 30px -14px rgba(33, 33, 33, .6); }
.v4-ctanote b { font-weight: 600; color: var(--warm-soft); }
.v4-ctanote::after { content: ""; position: absolute; bottom: -6px; left: calc(50% - var(--bx, 0px) + var(--ox, 0px) - 7px); width: 14px; height: 14px; border-radius: 3px;
  rotate: 45deg; background: var(--ink); }
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .v4-ctanote { font-size: 14px; padding: 10px 14px 11px; } }

/* ---------- 2 · problem: three cards ---------- */
.v4-grid3 { display: grid; gap: 20px; max-width: var(--v4-max); margin: 0 auto; }
@media (min-width: 600px) and (max-width: 1023px) { .v4-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v4-grid3 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .v4-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .v4-grid3 { gap: 12px; } }
.v4-pain { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 32px; transition: transform var(--d-micro) var(--e-out), box-shadow var(--d-micro); }
@media (hover: hover) { .v4-pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }
@media (max-width: 599px) { .v4-pain { padding: 24px; } }
.v4-ic { box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }   /* the site's icon circle (design system; was 72 px with its padding, owner 23.10) */
.v4-ic .icon { width: 20px; height: 20px; }
.v4-ic svg { stroke-width: 1.8; }
.v4-pain__n { position: absolute; top: 32px; right: 32px; font: 600 15px/1 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.v4-pain h3 { margin: 8px 0 0; font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.v4-pain p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.v4-pain .v4-pain__cost { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(var(--shade), .08); font: 600 16px/1.4 var(--font); color: var(--ink); }
.v4-pain__x { box-sizing: border-box; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--negative-tint); color: var(--negative-ink); }   /* a soft mark: full red is for errors only (five colours) */
.v4-pain__x .icon { width: 14px; height: 14px; }

/* ---------- 3 · solution: 2 × 2 cards of the home page, two new objects ---------- */
.v4-solve { max-width: 1376px; margin: 0 auto; }
.v4-solve .wd-card__title { font-size: clamp(23px, 2.2vw, 28px); }
.v4-solve__text { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(33, 33, 33, .78); max-width: 52ch; }
/* desktop (owner 18.10: «квадратные карточки, идут с поворотом, чуть со смещением»): four square cards in two columns,
   each one slightly tilted (left and right in turn) and the right column set lower, so the grid is loose, not strict.
   Separate white cards, the colour only in the frame: sky · warm on the diagonal. The tilt sits on the card wrapper,
   the entrance animates the card inside it */
@media (min-width: 900px) {
  .v4-solve { --off: clamp(56px, 6vw, 96px); max-width: 1180px; column-gap: clamp(32px, 4vw, 64px); row-gap: clamp(32px, 3.4vw, 52px); padding-bottom: var(--off); }
  .v4-solve .wd-card { rotate: -1.6deg; }
  .v4-solve .wd-card:nth-child(2) { rotate: 1.4deg; translate: 0 var(--off); }
  .v4-solve .wd-card:nth-child(3) { rotate: 1.1deg; }
  .v4-solve .wd-card:nth-child(4) { rotate: -1.3deg; translate: 0 var(--off); }
  .v4-solve .wd-card__in { aspect-ratio: 1 / 1; min-height: 0; height: auto; padding: 10px; background: #fff; border: 1px solid rgba(var(--shade), .07); box-shadow: var(--shadow-2); }   /* square, taller only when the text needs it */
  .v4-solve .wd-vis { flex: 1; min-height: 200px; place-items: center; padding: clamp(16px, 2vw, 28px); border-radius: calc(var(--r-xl) - 10px); overflow: hidden;
    background: radial-gradient(110% 90% at 100% 0%, rgba(244, 180, 140, .55), rgba(244, 180, 140, 0) 66%), linear-gradient(160deg, #fff, var(--paper)); }
  .v4-solve .wd-card:nth-child(1) .wd-vis, .v4-solve .wd-card:nth-child(4) .wd-vis {
    background: radial-gradient(110% 90% at 0% 100%, rgba(191, 211, 234, .95), rgba(191, 211, 234, 0) 70%), linear-gradient(160deg, #fff, var(--paper)); }
  .v4-solve .wd-panel { width: min(100%, 440px); }
  .v4-solve .wd-card__text { flex: none; gap: 10px; padding: 22px clamp(14px, 1.8vw, 26px) 24px; }
  .v4-solve .wd-card__ic { background: var(--acc-tint); }
  .v4-solve .wd-card__title { font-size: clamp(21px, 1.9vw, 27px); }
  .v4-solve .v4-solve__text { font-size: 15.5px; }
}
/* squares under 1200 px: the chat keeps one question and one answer, so it fits its frame */
@media (min-width: 900px) and (max-width: 1199px) { .v4-solve .wd-chat__list > :nth-child(n+3) { display: none; } .v4-solve .wd-vis { flex: none; min-height: 256px; } .v4-solve .wd-card__in { aspect-ratio: auto; } }
.v4-sms { width: min(100%, 360px); padding: 16px 18px; }
.v4-sms__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.v4-sms__top small { color: var(--text-3); font-size: 12.5px; }
.v4-sms__app { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--positive); color: #fff; }
.v4-sms__kind { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--warm-tint); color: var(--warm-ink); font: 600 13px/1 var(--font); }
.v4-sms__kind .icon { width: 15px; height: 15px; }
.v4-sms__line { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.v4-sms__line:first-of-type { font-weight: 600; }
/* object library (18.10): status, approval, reminder, waiting list, review, documents — same panel, chips and tones as the home objects */
.v4-status, .v4-approve, .v4-remind, .v4-wait, .v4-review, .v4-docs { width: min(100%, 380px); padding: 16px 18px; }
.v4-status__steps, .v4-wait__list, .v4-docs__list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.v4-status__steps li, .v4-docs__list li, .v4-wait__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; }
.v4-status__steps i, .v4-docs__list i, .v4-wait__list i { box-sizing: border-box; display: grid; place-items: center; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(var(--shade), .07); color: var(--text-3); }
.v4-status__steps li.is-on i, .v4-docs__list li.is-on i { background: var(--positive); color: #fff; }
.v4-msg { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--acc-tint); color: var(--acc-ink); font: 600 14px/1.35 var(--font); }
.v4-msg .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.v4-done { margin-top: 12px; }
.v4-approve__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(var(--shade), .08); font-size: 15px; }
.v4-approve__row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-approve__btn, .v4-remind__yes, .v4-remind__no { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 12px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--font); }
.v4-approve__btn, .v4-remind__yes { background: var(--ink); color: #fff; }
.v4-remind__no { background: rgba(var(--shade), .07); color: var(--ink); }
.v4-remind__msg { margin: 4px 0 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: rgba(var(--shade), .05); font-size: 15px; line-height: 1.4; }
.v4-remind__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-wait__slot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--shade), .05); font: 600 14px/1.2 var(--font); }
.v4-wait__free { padding: 4px 9px; border-radius: 999px; background: var(--warm-tint); color: var(--warm-ink); font-size: 12.5px; white-space: nowrap; }
.v4-review__ask { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.v4-review__stars { display: flex; gap: 6px; margin: 12px 0 0; }
.v4-review__stars i { display: block; width: 26px; height: 26px; color: var(--warm); }
.wd .v4-review__stars svg, .wd .v4-review__stars svg * { fill: currentColor; }
.v4-status__steps i .icon, .v4-docs__list i .icon, .v4-wait__list i .icon { width: 14px; height: 14px; }
.v4-week { width: min(100%, 380px); padding: 16px; }
.v4-week__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.v4-week__day { position: relative; display: grid; align-content: start; gap: 5px; min-height: 120px; padding: 8px 6px; border-radius: 12px; background: rgba(var(--shade), .04); font: 600 12px/1 var(--font); color: var(--text-2); text-align: center; }
.v4-week__busy { display: block; height: 18px; border-radius: 6px; background: rgba(var(--shade), .12); transform-origin: left; }
.v4-week__busy--s { width: 70%; }
.v4-week__slot { display: grid; gap: 3px; padding: 7px 4px; border-radius: 8px; background: var(--sky); color: #fff; font: 600 11.5px/1.15 var(--font); box-shadow: 0 6px 14px -6px rgba(var(--sky-rgb), .8); }
.v4-week__slot small { font-weight: 500; font-size: 10.5px; opacity: .9; }

/* ---------- 4 · example: the common headline above, the scheme's own head hidden ---------- */
.v4-flow .fa-head { display: none; }
.v4-flow .fa { margin-top: clamp(16px, 2vw, 24px); }
/* the Kaia cards inside a section (after the solution cards, after the calculator): the home card, a gap above it */
.v4-kcta-end .kcta { margin: clamp(40px, 5vw, 72px) 0 0; }

/* ---------- 5 · calculator ---------- */
.v4-calc { display: grid; gap: clamp(24px, 4vw, 56px); max-width: var(--v4-max); margin: 0 auto; padding: clamp(22px, 3.4vw, 48px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .v4-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .v4-gain { position: sticky; top: 96px; } }
.v4-calc__fields { display: grid; gap: 30px; align-content: start; }
.v4-field label { display: block; margin-bottom: 12px; font: 600 18px/1.35 var(--font); }
.v4-field__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 16px; }
.v4-num { display: grid; place-items: center; height: 56px; border-radius: var(--r-m); background: var(--fill); }
.v4-num:focus-within { box-shadow: 0 0 0 2px var(--focus); background: #fff; }
.v4-num input { width: 100%; border: 0; background: none; font: 600 24px/1 var(--font); text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); -moz-appearance: textfield; }
.v4-num input:focus { outline: none; }
.v4-num input::-webkit-inner-spin-button, .v4-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.v4-calc__assume { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.v4-range { --p: 50%; width: 100%; height: var(--hit); margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.v4-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--p), rgba(200, 201, 210, .75) var(--p)); }
.v4-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(200, 201, 210, .75); }
.v4-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.v4-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .12); }
.v4-range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.v4-range:focus-visible { outline: none; }
.v4-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus), 0 3px 8px rgba(0, 0, 0, .2); }
.v4-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus), 0 3px 8px rgba(0, 0, 0, .2); }   /* Firefox too */
.v4-gain { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-l); background: var(--positive-tint); }
.v4-gain__k { font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--positive-ink); }
.v4-gain__big { margin-top: 6px; font: 600 clamp(40px, 16cqi, 84px)/1 var(--font); letter-spacing: -0.04em; color: var(--positive-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.v4-gain__hours { margin: 6px 0 0; font: 600 clamp(18px, 1.6vw, 21px)/1.35 var(--font); color: var(--ink); }
.v4-gain__low { margin: 6px 0 0; font: 600 20px/1.4 var(--font); color: var(--ink); }
.v4-gain.is-low { background: var(--grey-2); }
.v4-gain.is-low .v4-gain__k { color: var(--text-2); }
.v4-gain__fine { display: grid; gap: 6px; margin: 16px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(var(--green-rgb), .2); font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* ---------- 6 · launch: four steps, the progress line, the price ---------- */
.v4-steps-wrap { position: relative; max-width: var(--v4-max); margin: 0 auto; }
.v4-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) and (max-width: 1023px) { .v4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v4-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v4-step { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 26px; }
.v4-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 18px/1 var(--font); }
.v4-step h3 { margin: 6px 0 0; font: 600 21px/1.25 var(--font); }
.v4-step p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.v4-step__time { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--sky-tint); color: var(--sky-ink); font: 600 13.5px/1.2 var(--font); }
.v4-steps__line { display: block; height: 2px; margin: 18px 22px 0; border-radius: 2px; background: rgba(var(--shade), .1); overflow: hidden; }
.v4-steps__line i { display: block; height: 100%; background: linear-gradient(90deg, var(--warm), rgba(var(--warm-rgb), .45)); transform-origin: left; transform: scaleX(0); }
/* phones (owner 22.10: «why the black bar»): no progress line, the numbers 1–4 show the order, the cards use the full width */
@media (max-width: 599px) { .v4-steps__line { display: none; } }
.v4-price { display: grid; gap: 16px; max-width: var(--v4-max); margin: 24px auto 0; }
@media (min-width: 900px) { .v4-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.v4-price__dark { padding: clamp(26px, 3vw, 40px); border-radius: var(--r-l); color: #fff; background: radial-gradient(120% 90% at 80% 100%, #3a3a40, #212121 60%); box-shadow: 0 30px 60px -30px rgba(33, 33, 33, .6); }
.v4-price__name { margin: 0; font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.v4-price__line { margin: 14px 0 0; font: 600 clamp(19px, calc(10px + 2.9vw), 32px)/1.2 var(--font); letter-spacing: -0.025em; text-wrap: balance; font-variant-numeric: tabular-nums; }
.v4-price__more { margin: 18px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.v4-price__care { padding: clamp(26px, 3vw, 40px); }
.v4-price__care h3 { margin: 0 0 16px; font: 600 19px/1.3 var(--font); }
.v4-price__care ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v4-price__care li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.v4-price__care .icon { width: 20px; height: 20px; color: var(--positive); }

/* ---------- 7 · terms ---------- */
.v4-terms { display: grid; max-width: var(--v4-max); margin: 0 auto; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.v4-terms__row { display: grid; gap: 6px; padding: 20px 26px; border-bottom: 1px solid rgba(var(--shade), .08); }
.v4-terms dt { font: 600 12.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sky-ink); }
.v4-terms dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.v4-terms__row:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .v4-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-terms__row:nth-child(odd):not(.v4-terms__row--wide) { border-right: 1px solid rgba(var(--shade), .08); }
  .v4-terms__row--wide { grid-column: 1 / -1; }
}
.v4-terms__date { max-width: var(--v4-max); margin: 12px auto 0; font-size: 13.5px; color: var(--text-3); }

/* ---------- 8 · Kaia and 9 · questions: the shared components (design/css/kaia-cta.css, design/css/faq-block.css) ---------- */

/* hero headline of this page is longer than the home slogan: two to three lines at every width (UI spec §1) */
.v4-stage .copy__h1 { font-size: calc(54 * var(--k)); }
.v4-stage .copy { width: min(calc(680 * var(--k)), calc(50vw - var(--gutter) - 24px)); }
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .v4-stage .copy__h1 { font-size: clamp(25px, 7.4vw, 36px); } .v4-stage .copy { width: auto; } }
}

/* ---------- the section headline is its own screen (home, research 66): pinned while the warm circle lands in its
   "o" and the words fly in, then the view flies through it and the section comes up ---------- */
.v4 .v4-scene { margin-top: 0; padding-bottom: clamp(48px, 6vw, 96px); }   /* with the title gap ≈ 160 px between sections on a phone (UX audit 22.10) */
/* capped as on the home page (min(76svh, 640px)): on tall screens 72svh left 400 px of nothing under the headline (QA 20.10) */
/* the headline sits at the bottom of its screen: under it always the same gap of the design system (--head-gap), the air
   is above it, where the warm circle flies in (QA 20.10: centred, the gap under it was 170–290 px and different per section) */
/* UX audit 22.10: the air above each headline was half a screen (2.7 screens of nothing on a phone landing); now a
   section gap of 112–160 px, the warm circle still flies over it */
.v4-title { display: grid; place-items: end center; padding: clamp(72px, 10vw, 160px) 0 var(--head-gap); }   /* re-audit: 112 on phones still read as empty */
.v4-title .wd__head { margin: 0 auto; }
.v4-body { position: relative; }
.v4-scene--open { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .v4-title { height: auto; padding: clamp(72px, 10vw, 128px) 0 clamp(32px, 4vw, 48px); }
}

/* ---------- 7 · terms as tiles (the home industry tiles), no table ---------- */
.v4-tiles { display: grid; gap: 16px; max-width: var(--v4-max); margin: 0 auto; }
@media (min-width: 600px) { .v4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v4-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4-tile { display: grid; align-content: start; gap: 10px; min-height: 230px; padding: 28px; border-radius: var(--r-l); }
.v4-tile--white { background: var(--card); box-shadow: var(--shadow-1); }
.v4-tile--sky { background: var(--sky-tint); }
.v4-tile--warm { background: var(--warm-tint); }
/* the site's icon circle (design system, as on the home page: leistungen.css «wd-card__ic», daten.css «dt__ic»; owner 23.10):
   44 px circle, a 20 px glyph, stroke 1.8, a light tint of the card's colour, no shadow */
.v4-tile__ic { box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }
.v4-tile--sky .v4-tile__ic, .v4-tile--warm .v4-tile__ic { background: rgba(255, 255, 255, .85); }
.v4-tile--warm .v4-tile__ic { color: var(--warm-ink); }
.v4-tile__ic .icon { display: grid; width: 20px; height: 20px; }
.v4-tile__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v4-tile__k { margin: 0; font: 600 12.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.v4-tile h3 { margin: 0; font: 600 clamp(24px, 2.2vw, 28px)/1.15 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.v4-tile__t { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 599px) { .v4-tile { min-height: 0; padding: 24px; } .v4-tile__ic { margin-bottom: 6px; } }
.v4-anchor { display: block; width: 44px; height: 44px; margin: 32px auto -44px; border-radius: 50%; opacity: 0; pointer-events: none; }   /* takes no room of its own (re-audit 22.10: +44 px of nothing under every section) */
.v4-anchor.hs-kaia__dot { width: 44px; height: 44px; padding: 0; background: none; }   /* only a start point: the circle leaves warm, as from a Kaia dot */

/* ---------- headlines without stray line breaks, every width (owner 18.10) ---------- */
.v4 h2, .v4 h3, .v4 .wd-card__title, .v4-price__line, .v4-stage .copy__h1, .v4-stage .copy__sub { text-wrap: balance; }
/* hero: the text column may use the room left of the button (its left edge is at 75 % − half its width) */
.v4-stage .copy { width: min(calc(680 * var(--k)), calc(60vw - var(--gutter) - 24px)); }
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .v4-stage .copy { width: auto; } }

/* phones: card titles a step smaller so every title fits in two lines (owner 18.10) */
@media (max-width: 599px) { .v4-solve .wd-card__title { font-size: clamp(20px, 6vw, 23px); } }
.v4-price__line > span { display: block; }

/* ---------- 4b · the example as a message thread (niches without a phone agent, 18.10) ---------- */
.v4-flow--chat { padding-block: 8px clamp(48px, 6vw, 88px); }
.v4-thread { display: grid; gap: clamp(20px, 3vw, 40px); max-width: 1080px; margin: 0 auto; padding-inline: 16px;
  grid-template-areas: "phone" "side"; }
@media (min-width: 900px) { .v4-thread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "phone side"; align-items: center; } }
.v4-thread__phone { grid-area: phone; justify-self: center; width: min(100%, 420px); padding: 14px; border-radius: var(--r-xl); background: #fff;
  border: 1px solid rgba(var(--shade), .07); box-shadow: var(--shadow-2); }
.v4-thread__head { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 6px 6px 14px; border-bottom: 1px solid rgba(var(--shade), .07); }
.v4-thread__head b { font: 600 16px/1.2 var(--font); }
.v4-thread__head small { grid-column: 2; color: var(--positive); font: 500 13px/1.2 var(--font); }
.v4-thread__ava { grid-row: span 2; display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--positive); color: #fff; }
.v4-thread__kind { margin: 14px 4px 4px; font: 600 14px/1.35 var(--font); color: var(--ink); }
.v4-thread__kind span { display: block; margin-bottom: 2px; color: var(--text-3); font: 600 11.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.v4-thread__msgs { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border-radius: calc(var(--r-xl) - 14px); background: var(--paper); list-style: none; min-height: 260px; align-content: start; }
.v4-bub { position: relative; max-width: 86%; padding: 9px 12px; border-radius: 16px; font: 400 15px/1.4 var(--font); }
.v4-bub--in { justify-self: start; background: #fff; border-top-left-radius: 4px; box-shadow: var(--shadow-1); }
.v4-bub--out { justify-self: end; background: var(--warm-ink); color: #fff; border-top-right-radius: 4px; }
/* the dots lie over the bubble's own text (which stays in the flow, hidden): the bubble keeps its height while the agent «types» — no layout shift (perf 21.10) */
.v4-typing { position: absolute; inset: 0 auto 0 12px; display: inline-flex; align-items: center; gap: 4px; visibility: hidden; }
.v4-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; animation: v4-typing 1s infinite ease-in-out; }
.v4-typing i:nth-child(2) { animation-delay: .15s; } .v4-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes v4-typing { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
.v4-thread__side { grid-area: side; display: grid; gap: 14px; }
.v4-thread__doing { margin: 0; font: 600 clamp(20px, 2vw, 26px)/1.2 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.v4-thread__out { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v4-thread__out li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-l); background: #fff;
  border: 1px solid rgba(var(--shade), .07); box-shadow: var(--shadow-1); }
.v4-thread__out i { display: grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--positive); color: #fff; }
.v4-thread__out i .icon, .v4-thread__ava .icon { display: block; width: 100%; height: 100%; color: #fff; }
.wd .v4-thread__out i svg, .v4-thread__out i svg, .v4-thread__ava svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v4-thread__out b { display: block; font: 600 16px/1.3 var(--font); }
.v4-thread__out span, .v4-thread__out small { display: block; margin-top: 2px; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.v4-thread__out small { color: var(--text-3); font-size: 14px; }
/* where the talk stands (owner 23.10): one quiet line in the phone — five dots, the done ones grey, the current one warm */
.v4-thread__step { display: flex; align-items: center; gap: 10px; margin: 6px 4px 2px; color: var(--text-2); font: 600 13px/1.3 var(--font); }
.v4-thread__dots { display: inline-flex; flex: none; align-items: center; gap: 5px; }
.v4-thread__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--shade), .16); transition: background-color .3s, scale .3s; }
.v4-thread__dots i.is-done { background: var(--text-3); }
.v4-thread__dots i.is-now { background: var(--warm); scale: 1.35; }
.v4-thread__now { min-width: 0; }
.v4-thread.is-static .v4-typing { display: none; }
@media (max-width: 599px) { .v4-thread__msgs { min-height: 0; } }

/* where the visitor is (UX audit 22.10): a quiet line above the eyebrow */
.v4-crumbs ol { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0 6px; margin: 0 0 2px; padding: 0; list-style: none; font: 500 13px/1.3 var(--font); color: var(--text-2); }
.v4-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.v4-crumbs li + li::before { content: "›"; color: var(--text-3, #9a9aa3); }
.v4-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(33, 33, 33, .25); }
.v4-crumbs [aria-current] { color: var(--ink); }
/* the example chat shows the whole talk; a tap plays it again (re-audit 22.10) */
.v4-replayable { position: relative; cursor: pointer; }
.v4-replayable .wd-replay { position: absolute; right: 10px; left: auto; bottom: 10px; margin: 0; }
/* «Short on terms» on phones (re-audit 22.10: six tall tiles ≈ two screens): the icon beside the text, no fixed height */
@media (max-width: 599px) {
  .v4-tile { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px 18px 20px; }
  .v4-tile__ic { grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; }   /* box-sizing: the circle fits its 40 px column (owner 23.10: icons overlapped the text) */
  .v4-tile h3 { font-size: 20px; }
}
.v4-gain__price b { display: block; }   /* the package name on its own line: «… für Studios / Ab CHF 950» read as one sentence */
.v4-price__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .5); }   /* to «Leistungen & Preise» */
/* the ▶ after the chat list (not inside it), pulled up over the list's bottom-left corner (a11y check 22.10) */
.v4-replay { position: relative; z-index: 1; margin: 12px 0 4px auto; }   /* under the chat, not over its last message (owner 22.10) */

/* the package as figures (owner 22.10: «colour, hierarchy, an accent»; on phones not three rows with an empty right side):
   set-up big and the month beside it on one baseline, Partner 12 across below; the catalogue sentence is sr-only */
.v4-price__fig { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 16px 0 0; padding: 18px 18px 16px;
  border-radius: 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.v4-price__main, .v4-price__month { display: grid; gap: 4px; margin: 0; }
.v4-price__k { color: rgba(255, 255, 255, .62); font: 600 11.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.v4-price__big { font: 600 clamp(32px, 4vw, 44px)/1.02 var(--font); letter-spacing: -0.025em; color: #fff; }
.v4-price__big small { margin-right: 3px; color: rgba(255, 255, 255, .62); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.v4-price__month { justify-items: end; text-align: right; }
.v4-price__month b { padding: 6px 12px; border-radius: 999px; background: rgba(var(--warm-rgb), .22); color: var(--warm-soft); font: 600 17px/1.2 var(--font); }
.v4-price__p12 { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12);
  color: #9fdcae; font: 500 14.5px/1.35 var(--font); }
.v4-price__p12 .icon { display: grid; flex: none; width: 16px; height: 16px; }
.v4-price__p12 .icon svg, .v4-pills .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 599px) { .v4-price__fig { padding: 16px 14px 14px; } .v4-price__big { font-size: 30px; } .v4-price__month b { font-size: 15px; } }
/* under the calculator's result: the package name, then two pills */
.v4-gain__price { margin-top: 14px; }
.v4-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v4-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--positive-ink);
  font: 600 14px/1.2 var(--font); box-shadow: inset 0 0 0 1px rgba(31, 122, 58, .18); }
.v4-pill--ink { background: var(--ink); color: #fff; box-shadow: none; }
/* the time of a step is a fact, not a button (heat map 22.10): a quiet line, no filled pill */
.v4-step__time { padding: 10px 0 0; border-radius: 0; background: none; border-top: 1px solid rgba(var(--shade), .1); justify-self: stretch; }