/* /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/routine-a.css */
/* Section 2 (research 66, owner 15.10): the PROBLEM — a big question with a clock in its "o"; the owner's problems burst
   out of the clock as small title-only cards and land around the headline. The SOLUTION scene follows (flow-a.css).
   Colours: neutral cards, red cross = a problem (meaning colour), warm circle = time / the agent. Motion: js/routine-a.js. */
#aufgaben.rta { position: relative; max-width: none; padding: 0; margin: 0; }
.rta-pin { position: relative; height: 100svh; overflow: hidden; }

/* ---------- the question ---------- */
.rta-head { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 clamp(16px, 5vw, 96px); text-align: center; transform-origin: 50% 40%; }
.rta .rta-h2 { max-width: 12ch; margin: 0 auto; font: 500 clamp(48px, 7.4vw, 124px)/1.0 var(--font); letter-spacing: -0.04em; text-wrap: balance; }

/* the round letter: a circle the size of the letter's bowl; the flying circle lands exactly here */
/* the real letter is inside, transparent (SEO audit 21.10); overflow: hidden keeps the baseline at the bottom edge */
.rta-o { position: relative; display: inline-block; width: 0.6em; height: 0.6em; margin: 0 0.035em; vertical-align: -0.035em; overflow: hidden; color: transparent; line-height: 0.6em; }
.rta-o__slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 max(2px, 0.04em) rgba(var(--warm-rgb), 0.35); }
/* the letter stays readable until the circle lands (UX audit 22.10) */
/* …in the same box it has after the landing (owner 22.10: the headline jumped from one line split to another when the
   circle landed — the letter was 12 px narrower before): only its colour and overflow change, so the lines never move */
.rta:not(.is-landed):not(.is-static) .rta-o { overflow: visible; color: inherit; text-align: center; }
.rta:not(.is-landed):not(.is-static) .rta-o__slot { box-shadow: none; }
.rta.is-landed .rta-o__slot, .rta.is-static .rta-o__slot, .rta-ball { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 0.05em 0.16em -0.04em rgba(var(--warm-rgb), 0.85); }
.rta-o__slot .rta-clock { opacity: 0; }
.rta.is-landed .rta-o__slot .rta-clock, .rta.is-static .rta-o__slot .rta-clock { opacity: 1; }
.rta-clock { display: block; width: 100%; height: 100%; overflow: visible; }
.rta-clock line { stroke: #fff; stroke-linecap: round; }
.rta-clock__ticks line { stroke-width: 3; opacity: 0.55; }
.rta-clock__h { stroke-width: 7; }
.rta-clock__m { stroke-width: 5; }
.rta-clock circle { fill: #fff; }

/* the flying circle: screen coordinates, above the hero and the header */
.rta-ball { position: fixed; left: 0; top: 0; z-index: 30; border-radius: 50%; visibility: hidden; pointer-events: none; box-shadow: 0 10px 26px -10px rgba(var(--warm-rgb), 0.9); }
/* the hero button while its circle is away: an empty warm ring */
.cta.is-lent[data-dot] .cta__dot { background: rgba(var(--warm-rgb), 0.08); box-shadow: inset 0 0 0 2px rgba(var(--warm-rgb), 0.45); }
.cta.is-lent .cta__dot > * { opacity: 0; }


.rta-w { display: inline-block; }   /* each word flies in on its own */

/* the big clock: grows out of the letter into the centre once the question fades */
.rta-big { --bd: min(36vh, 300px); position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--bd); height: var(--bd); margin: calc(var(--bd) / -2) 0 0 calc(var(--bd) / -2); border-radius: 50%; visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 30px 70px -24px rgba(var(--warm-rgb), 0.75), 0 0 0 18px rgba(var(--warm-rgb), 0.08), 0 0 0 40px rgba(var(--warm-rgb), 0.05); }
.rta-big .rta-clock { width: 100%; height: 100%; }
/* the pixel sphere the clock turns into once the answers come (js/pixel-morph.js: the agents' sphere of the site) */
.rta-orb { --bd: min(46vh, 380px); position: absolute; left: 50%; top: 50%; z-index: 1; width: var(--bd); height: var(--bd); margin: calc(var(--bd) / -2) 0 0 calc(var(--bd) / -2); visibility: hidden; pointer-events: none; }
.rta-orb canvas { display: block; width: 100%; height: 100%; }

/* ---------- the problems around the clock ---------- */
.rta-pains { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.rta-pain { position: absolute; z-index: 2; display: flex; align-items: center; gap: 14px; width: min(360px, 28vw); box-sizing: border-box; padding: 18px 22px 18px 16px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 24px 48px -24px rgba(var(--shade), 0.45); font: 600 clamp(16px, 1.3vw, 21px)/1.28 var(--font); color: var(--ink); text-wrap: balance; }
.rta-pain__x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 9px; box-sizing: border-box; border-radius: 50%; color: #fff; background: var(--negative-fill); box-shadow: 0 4px 10px -4px rgba(var(--red-rgb), 0.6); }
.rta-pain__x .icon { display: block; width: 100%; height: 100%; }
.rta-pain__x svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
/* the problem turns into its answer (owner 22.10, js/routine-a.js step 4b): the tick over the cross, the answer in the
   place of the complaint (one grid cell: the card keeps its height) */
.rta-pain__mark { position: relative; flex: none; display: block; }
.rta-pain__ok { position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: 22%; border-radius: 50%; color: #fff; background: var(--positive-fill); box-shadow: 0 4px 10px -4px rgba(var(--green-rgb), 0.6); opacity: 0; visibility: hidden; }
.rta-pain__ok .icon, .rta-pain__ok svg { display: block; width: 100%; height: 100%; }
.rta-pain__ok svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* the answer takes the complaint's place (owner 22.10): both in one grid cell, so the card keeps its height; the
   timeline lets the complaint leave before the answer comes (never two lines on top of each other) */
.rta-pain__txt { display: grid; min-width: 0; }
.rta-pain__p, .rta-pain__s { grid-area: 1 / 1; align-self: center; }
.rta-pain__s { color: var(--positive-ink); font-weight: 700; line-height: 1.25; opacity: 0; visibility: hidden; }
.rta-pain.is-solved { box-shadow: inset 0 0 0 1.5px rgba(var(--green-rgb), 0.28), 0 24px 48px -24px rgba(var(--shade), 0.45); }
/* the copy that flies into the iPhone, and the still page (reduced motion): the answer */
.rta-bridge .rta-pain__x { opacity: 0; } .rta-bridge .rta-pain__ok { opacity: 1; visibility: inherit; }
.rta-bridge .rta-pain__s { opacity: 1; visibility: inherit; } .rta-bridge .rta-pain__p { opacity: 0; }
/* the still page (reduced motion): the complaint and its answer under it */
.rta.is-static .rta-pain__s { opacity: 1; visibility: visible; }
.rta.is-static .rta-pain__p, .rta.is-static .rta-pain__s { grid-area: auto; }
.rta.is-static .rta-pain__x { opacity: 0; } .rta.is-static .rta-pain__ok { opacity: 1; visibility: visible; }
/* landing places (desktop): three on each side of the clock, the middle ones a little closer to it */
.rta-pain:nth-child(1) { left: 5%; top: 13%; }
.rta-pain:nth-child(2) { right: 5%; top: 15%; }
.rta-pain:nth-child(3) { left: 9%; top: 43%; }
.rta-pain:nth-child(4) { right: 9%; top: 45%; }
.rta-pain:nth-child(5) { left: 5%; top: 72%; }
.rta-pain:nth-child(6) { right: 5%; top: 74%; }

/* tablets and desktops: the problem cards are placed inside the page width, on the grid (not from the window edge) */
@media (min-width: 600px) and (min-height: 501px) { .rta-pains { inset: 0 var(--edge-vw); } }
/* large screens (QA 20.10: six small cards on a big empty screen): a bigger clock and bigger cards */
@media (min-width: 1600px) { .rta-big { --bd: min(40vh, 360px); } .rta-pain:nth-child(3) { left: 2%; } .rta-pain:nth-child(4) { right: 2%; } .rta-pain { width: min(420px, 26vw); padding: 22px 28px 22px 18px; gap: 16px; font-size: 19px; border-radius: var(--r-l); } .rta-pain__x { width: 40px; height: 40px; padding: 11px; } }
@media (min-width: 900px) and (max-width: 1199px) { .rta-big { --bd: min(30vh, 220px); } .rta-pain { width: 30vw; } .rta-pain:nth-child(3) { left: 4%; } .rta-pain:nth-child(4) { right: 4%; } }

/* ---------- the data card + Kaia ---------- */
.rta-data { --side: var(--edge); position: relative; z-index: 31; display: grid;   /* z 31: the flying «calls» card (.rta-bridge, z 30) passes under it on its way to the iPhone */
   grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start;
  margin: clamp(48px, 7vw, 96px) var(--side) 0; padding: clamp(28px, 4.4vw, 64px); border-radius: var(--r-xl); background: var(--ink); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(33, 33, 33, 0.7); }
.rta-data__ic { display: grid; place-items: center; width: 64px; height: 64px; padding: 18px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); }
.rta-data__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rta .rta-data h3 { margin: 0; font: 600 clamp(24px, 2.8vw, 42px)/1.1 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.rta-data p { max-width: 56ch; margin: 16px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.rta-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rta-tags li { padding: 7px 12px; border-radius: 999px; font: 500 13px/1.2 var(--font); }
.rta-data .rta-tags li { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }

/* ---------- tablets (portrait) and phones ---------- */
@media (max-width: 899px) {
  .rta .rta-h2 { max-width: 15ch; font-size: clamp(32px, 9.4vw, 52px); }   /* phones (headline check 20.10): fr/ru took 5–6 lines at 40 px in 12ch */
  .rta-pain { padding: 10px 14px 10px 10px; gap: 10px; border-radius: 16px; font-size: 14.5px; }
  .rta-pain__x { width: 24px; height: 24px; padding: 6px; }
  .rta-data { grid-template-columns: 1fr; padding: 24px; border-radius: var(--r-l); }
}
/* tablets (portrait): the clock in the centre, three problems above it and three below */
@media (min-width: 600px) and (max-width: 899px) {
  .rta-big { --bd: min(22vw, 180px); }
  .rta-pain { width: 66vw; font-size: 14.5px; }
  .rta-pain:nth-child(1) { left: 4%; top: 8%; } .rta-pain:nth-child(2) { right: 4%; top: 18%; } .rta-pain:nth-child(3) { left: 6%; top: 28%; }
  .rta-pain:nth-child(4) { right: 4%; top: 62.5%; } .rta-pain:nth-child(5) { left: 4%; top: 73%; } .rta-pain:nth-child(6) { right: 6%; top: 83.5%; }
}
/* phones: no big clock (owner 15.10) — the six problems stand in a column with equal gaps, centred, zigzag a little */
@media (max-width: 599px) {
  .rta-big { display: none; }
  .rta-pains { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 18px); padding: 64px 4vw 92px; box-sizing: border-box; }
  .rta-pain, .rta-pains .rta-pain:nth-child(n) { position: relative; inset: auto; width: auto; }   /* drop the desktop / tablet places: the column lays them out */
  .rta-pain:nth-child(odd) { margin-right: 7vw; } .rta-pain:nth-child(even) { margin-left: 7vw; }
}
@media (max-width: 599px) and (max-height: 700px) {
  .rta-pain { padding: 8px 12px 8px 8px; gap: 8px; font-size: 13px; }
  .rta-pain__x { width: 22px; height: 22px; padding: 6px; }
}
@media (max-width: 599px) and (max-height: 600px) { .rta-pains { gap: 7px; padding: 50px 3vw 78px; } .rta-pain { padding: 6px 10px 6px 7px; line-height: 1.22; } }
/* low landscape screens (phones turned, ≤ 500 px high; QA 20.10: the tablet places piled the cards on the clock):
   no clock, the six problems in two even columns */
@media (min-width: 600px) and (max-height: 500px) {
  .rta-big { display: none; }
  .rta-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 8px 12px; padding: 60px var(--edge-vw) 72px; box-sizing: border-box; }
  .rta-pain, .rta-pains .rta-pain:nth-child(n) { position: relative; inset: auto; width: auto; margin: 0; padding: 8px 12px 8px 8px; gap: 8px; font-size: 13px; line-height: 1.25; }
  .rta-pain__x { width: 22px; height: 22px; padding: 6px; }
}
@media (max-width: 340px) { .rta-pain { font-size: 12px; } .rta-pain:nth-child(odd) { margin-right: 4vw; } .rta-pain:nth-child(even) { margin-left: 4vw; } }

/* ---------- reduce motion: no pin; the question, then the problems as a plain list ---------- */
.rta.is-static .rta-pin { height: auto; overflow: visible; }
.rta.is-static .rta-head { position: static; padding-block: clamp(72px, 10vw, 140px) 32px; }
.rta.is-static .rta-pains { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 clamp(12px, 2.2vw, 32px); }
.rta.is-static .rta-pain { position: static; max-width: 360px; }
.rta.is-static .rta-big { display: none; }
@media (max-width: 340px) and (max-height: 600px) {   /* 320 × 568: no zigzag, so the long German / French / Italian lines fit in two rows */
  .rta-pains .rta-pain:nth-child(n) { margin: 0; font-size: 11.5px; }
  .rta-pains { padding-top: 48px; }
}

/* the bridge to the solution (owner 16.10, variant A): the «calls» card stretches into the iPhone of the next block.
   A copy flies above the page from the card to the iPhone; the card fades, the call screen comes up */
.rta-bridge { position: fixed; left: 0; top: 0; z-index: 30; visibility: hidden; pointer-events: none; }
.rta-bridge > * { position: absolute; inset: 0; box-sizing: border-box; }
.rta-bridge .rta-pain { position: absolute; inset: 0; left: 0; top: 0; right: auto; width: 100%; height: 100%; transform: none; overflow: hidden; }
.rta-bridge__phone { padding: 3.2%; border-radius: inherit; background: linear-gradient(145deg, #3a3a3e, #121214); box-shadow: 0 50px 90px -40px rgba(20, 24, 40, 0.65); opacity: 0; }
.rta-bridge__screen { position: relative; height: 100%; border-radius: inherit; overflow: hidden; container-type: size;
  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); }
.rta-bridge__screen i { position: absolute; bottom: 12%; width: min(23cqw, 11cqh); aspect-ratio: 1; border-radius: 50%; }   /* round buttons stay round while the box stretches */
.rta-bridge__screen i:first-child { left: 10%; background: #ff3b30; } .rta-bridge__screen i:last-child { right: 10%; background: #34c759; }

/* phones: the question stays as a small headline at the top, the column of pains starts under it (UX audit 22.10) */
@media (max-width: 599px) { .rta.is-keep-head .rta-pains { padding-top: 180px; } }   /* under the header too, when it comes back */
/* the circle flew on into «What we do» (owner 22.10): its place in the question keeps a thin ring, like the other headlines */
.rta .rta-o__slot.cl-lent { opacity: 1; background: none; box-shadow: inset 0 0 0 max(2px, .04em) rgba(var(--warm-rgb), .35); }
.rta .rta-o__slot.cl-lent .rta-clock { opacity: 0; }
/* Russian words are longer: at 12ch the question broke into four lines with «у» left at a line end */
html[lang="ru"] .rta .rta-h2 { max-width: 13.5ch; }

/* /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/daten.css */
/* Home section 7 «Your data» (owner 17.10, v3): one wide panel — text left, the pixel map of Switzerland right on the
   Föhn (phones: the map on top). Icons are the site's line icons in sky circles; tags are glass beads. The linking circle
   lands on Zürich (js/circle-link.js). Deliberately not the cards of «What we do». Motion: js/daten.js */
.dt { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
.dt__panel { display: grid; overflow: hidden; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .dt__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* text */
.dt__text { display: grid; align-content: center; gap: 18px; padding: clamp(24px, 4vw, 64px); }
.dt__eyebrow { margin: 0; font: 600 clamp(15px, 1.2vw + 9px, 17px)/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.dt h2 { margin: 0; font: 600 clamp(34px, 4.4vw, 64px)/1.03 var(--font); letter-spacing: -0.035em; text-wrap: balance; color: var(--ink); }
.dt-hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.dt-hw > span { display: inline-block; }
.dt__lead { margin: 0; max-width: 44ch; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dt__points { display: grid; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.dt__points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15.5px; line-height: 1.4; color: var(--text-2); }
.dt__points b { display: block; font-weight: 600; font-size: 16.5px; color: var(--ink); }
.dt__ic { 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 */
.dt__ic .icon, .dt-tag .icon { display: grid; width: 20px; height: 20px; }
.dt svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt__more { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--text-3); }

/* the picture: a soft sky with light from the top, the country in the middle */
.dt__visual { position: relative; min-height: clamp(300px, 40vw, 560px); background: var(--foehn); }
.dt__board { position: absolute; left: 50%; top: 52%; width: min(88%, 150cqh); aspect-ratio: 240 / 150; translate: -50% -50%; }   /* the map and its pins share one box */
.dt__visual { container-type: size; }
.dt__dots { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the pin on Zürich: the landing place of the circle, rings of protection around it, the lock */
.dt-pin { position: absolute; z-index: 2; width: 0; height: 0; }
.dt-pin__dot { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--warm-rgb), .45); }
.dt.is-landed .dt-pin__dot, .dt.is-static .dt-pin__dot { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 6px 18px -6px rgba(var(--warm-rgb), .9); }
.dt-ring { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(var(--warm-rgb), .55); opacity: 0; }
.dt.is-landed .dt-ring, .dt.is-static .dt-ring { animation: dt-ring 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.dt.is-landed .dt-ring:nth-child(2), .dt.is-static .dt-ring:nth-child(2) { animation-delay: 1.2s; }
.dt.is-landed .dt-ring:nth-child(3), .dt.is-static .dt-ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes dt-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(7); opacity: 0; } }
.dt-pin__label { position: absolute; left: 16px; top: -6px; font: 600 13px/1 var(--font); color: var(--ink); white-space: nowrap; }
.dt-tag { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 7px; border-radius: var(--r-pill); translate: -50% -50%;
  background: radial-gradient(120% 140% at 50% 15%, #fff, #f3f6fb 70%); box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, .7), inset 0 4px 4px -2px rgba(255, 255, 255, .95), 0 10px 22px -12px rgba(var(--shade), .55);
  font: 600 clamp(11.5px, 2.6cqw, 13.5px)/1 var(--font); color: var(--ink); white-space: nowrap; }
.dt-tag .icon { width: 16px; height: 16px; color: var(--sky-ink); }

@media (max-width: 899px) {
  .dt__visual { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .dt__panel { border-radius: var(--r-l); }
  .dt__visual { aspect-ratio: 1 / 1; }
  .dt__board { width: min(94%, 150cqh); }
}
@media (prefers-reduced-motion: reduce) { .dt-ring { animation: none !important; } }
/* the circle moved on to the next section: Zürich keeps its empty ring */
.dt .dt-pin__dot.cl-lent { opacity: 1; background: none; box-shadow: inset 0 0 0 2px rgba(var(--warm-rgb), .45); }

/* /design/css/prozess.css */
/* Home section 8 «Any process, your way» (owner 17.10): the head comes from css/leistungen.css (.wd), this file adds
   the flow stage (logos on round white beads ⇄ the pixel sphere), the two ways of working and the control row.
   Motion: js/prozess.js */
.pz-stage { position: relative; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--foehn); box-shadow: var(--shadow-2); }
.pz svg:not([aria-hidden]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pz .icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 100%; height: 100%; }

/* the flow: inbox → agent → the wall of services */
.pz-flow { position: relative; display: grid; gap: 22px; align-items: center; }
.pz-flow > *, .pz-wall > * { min-width: 0; }
@media (min-width: 900px) { .pz-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) minmax(0, 1.45fr); gap: clamp(36px, 4.4vw, 72px); } }
.pz-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.pz-line { fill: none; stroke: rgba(var(--sky-rgb), .85); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-label { margin: 0 0 10px; font: 600 12px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pz-card { position: relative; z-index: 1; padding: 14px 16px; border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow-1); }
.pz-app { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pz-app b { font: 600 14px/1.2 var(--font); color: var(--ink); white-space: nowrap; }
.pz-who { margin-left: auto; font: 500 12.5px/1.2 var(--font); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the real logo as an app tile (rounded square), the mark unchanged in the middle */
.pz-logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--shade), .12); overflow: hidden; }
.pz-logo svg { width: 62%; height: 62%; } .pz-logo img { width: 74%; height: 74%; object-fit: contain; }

/* the inbox: the newest message on top, the older ones step back */
/* a fixed window: the cards are stacked absolutely and move by transform only (no layout shift under the lines) */
.pz-feed { position: relative; --card-h: 112px; height: calc(var(--card-h) * 3 + 20px); }
.pz-feed .pz-msgcard { position: absolute; left: 0; right: 0; top: 0; height: var(--card-h); transform-origin: 50% 0; }
.pz-msgcard .pz-msg { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pz-msg { margin: 10px 0 0; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--grey-1); font-size: 14.5px; line-height: 1.4; color: var(--ink); }

/* the agent */
.pz-agent { padding: 18px; transition: box-shadow .3s; }
.pz-agent.is-busy { box-shadow: 0 0 0 2px rgba(var(--warm-rgb), .55), var(--shadow-1); }
.pz-agent__head { display: flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font); }
.pz-orb { position: relative; flex: none; width: 46px; height: 46px; }
.pz-orb canvas { position: absolute; left: 50%; top: 50%; width: 148%; height: 148%; translate: -50% -50%; }
.pz-doing { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--warm-tint); font: 600 14px/1.3 var(--font); color: var(--warm-ink); }
.pz-dots { display: inline-flex; gap: 3px; }
.pz-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; }
.pz-agent.is-busy .pz-dots i { animation: pz-dot 1s infinite; }
.pz-agent.is-busy .pz-dots i:nth-child(2) { animation-delay: .15s; } .pz-agent.is-busy .pz-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pz-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* the wall of services: every tile a small card; the ones in use light up with their result */
.pz-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pz-svc { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 9px; row-gap: 6px; padding: 10px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 1px 2px rgba(33, 33, 33, .04); transition: background .3s, box-shadow .3s, transform .3s; }
.pz-svc b { font: 600 13px/1.2 var(--font); color: var(--ink); overflow-wrap: anywhere; }   /* a long name wraps, never cut */
.pz-res { grid-column: 1 / -1; display: flex; visibility: hidden; opacity: 0; min-height: 2.4em; align-items: center; gap: 6px; font: 600 11.5px/1.2 var(--font); color: var(--positive-ink); }
.pz-res i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 0 3px rgba(var(--green-rgb), .15); }
.pz-svc.is-lit { background: #fff; box-shadow: 0 0 0 2px var(--sky), var(--shadow-1); }
.pz-svc.is-lit .pz-res { visibility: visible; opacity: 1; animation: pz-pop .35s cubic-bezier(.34, 1.56, .64, 1); }   /* the row is always reserved: lighting up never resizes the tile */
@keyframes pz-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pz-svc--any { grid-column: 1 / -1; background: rgba(255, 255, 255, .4); box-shadow: none; outline: 1.5px dashed rgba(var(--shade), .3); outline-offset: -1.5px; }
.pz-svc--any b { color: var(--text-2); }
.pz-plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .85); font: 500 19px/1 var(--font); color: var(--text-2); }

/* phones: the newest message only, the agent, the wall below */
@media (max-width: 899px) {
  .pz-stage { border-radius: var(--r-l); }
  .pz-feed { height: var(--card-h); }
  .pz-flow { gap: 26px; }
  .pz-wall { gap: 8px; }

}
/* phones, tablets and small laptops up to 1399 px: the tiles stand upright — the logo on top, the name and the result below, nothing cut */
@media (max-width: 1399px) {
  .pz-svc { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 10px 6px; row-gap: 5px; }
  .pz-svc b { white-space: normal; font-size: 12px; line-height: 1.15; }
  .pz-svc .pz-logo { width: 30px; height: 30px; border-radius: 8px; }
  .pz-res { justify-content: center; text-align: center; font-size: 11px; }
  .pz-svc--any { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 10px 12px; }
}
@media (max-width: 380px) { .pz-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pz-svc { transition: none; } .pz-svc.is-lit .pz-res { animation: none; } }

/* the two ways of working and who is in control */
.pz-plans { display: grid; gap: var(--card-gap); margin-top: var(--card-gap); }
@media (min-width: 700px) { .pz-plans { grid-template-columns: 1fr 1fr; } }   /* the two plans side by side from tablets */
.pz-plan { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: var(--card-pad); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1); }
.pz-plan__ic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }
.pz-plan:last-child .pz-plan__ic { background: var(--warm-tint); color: var(--warm-ink); }
.pz-plan__ic .icon, .pz-control__ic .icon { display: grid; width: 22px; height: 22px; }
.pz-plan h3 { margin: 0 0 6px; font: 600 clamp(19px, 1.6vw, 23px)/1.2 var(--font); letter-spacing: -0.015em; }
.pz-plan p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.pz-control { margin-top: clamp(28px, 3vw, 40px); }
.pz-control__t { margin: 0 0 14px; font: 600 12.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.pz-control ul { display: grid; gap: var(--gut, 16px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pz-control ul { grid-template-columns: repeat(3, 1fr); } }
.pz-ctl { display: grid; align-content: start; gap: 14px; padding: var(--card-pad); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-1);
  font: 500 16px/1.45 var(--font); color: var(--ink); }   /* the same white card as the two ways of working */
.pz-control__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--positive-tint); color: var(--positive-ink); }

@media (max-width: 699px) { .pz-plan { border-radius: var(--r-l); } }

.pz-marks { margin: 10px 4px 0; font-size: 12.5px; color: var(--text-3); text-align: right; }
@media (max-width: 699px) { .pz-ctl { border-radius: var(--r-l); } .pz-marks { text-align: center; } }
.pz-logo svg, .pz-logo svg path { stroke: none; }   /* brand marks exactly as they are, no outline from the line-icon rules */

/* /design/css/kunden.css */
/* Home section «New customers» (owner 18.10, research/…/78): the cards, head and chips come from css/leistungen.css,
   this file adds the layout of three cards on the customer's way and their three objects. Motion: js/kunden.js */

/* layout: three in a row from 1100 px with an arrow between them (the way of the customer); 700–1099 one wide card
   per row with the object beside the text; phones: one per row, the object above the text (the card stack) */
@media (min-width: 900px) { .ku__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) and (max-width: 1099px) {
  .ku-card .wd-card__in { flex-direction: row; align-items: center; }
  .ku .ku-card .wd-vis { flex: 0 0 52%; }   /* beats the flex: none at the end */
  .ku-card .wd-card__text { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 8px; }
}
@media (min-width: 1100px) {
  .ku__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  /* bigger fans on the desktop, so the three objects are about the same height (owner 18.10: no empty room) */
  .ku .ku-corp__hero { aspect-ratio: 4 / 5.2; }   /* taller photos on the desktop, same widths (wider would push the shop over the texts) */
  .ku .ku-land__hero { aspect-ratio: 1 / 1.15; }
  .ku .ku-shop__grid .ku-prod--0 { grid-template-columns: 52% minmax(0, 1fr); }
  .ku-card .wd-vis { flex: none; }   /* its height per row comes from js/kunden.js (alignRows): the texts of a row start on one line */
  .ku-card:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -36px; display: grid; place-items: center;
    width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); font: 600 15px/1 var(--font); color: var(--warm-ink); }
}
.ku-num { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/1 var(--font); letter-spacing: 0; }

/* ads · mockups of a Google search ad and an Instagram ad; under each the requests and the budget */
.ku-ads { display: grid; gap: 12px; }
.ku-mock { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); }
.ku-mock:nth-child(1) { transform: rotate(-1.2deg); } .ku-mock:nth-child(2) { transform: rotate(1deg); }
.ku-logo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--shade), .1); }
.ku-logo svg { width: 60%; height: 60%; }
.ku-logo svg path { stroke: none; }
.ku-logo--bare { box-shadow: none; width: 20px; height: 20px; }
.ku-logo--bare svg { width: 100%; height: 100%; }
.ku-ic { display: grid; flex: none; width: 15px; height: 15px; color: var(--text-3); }
.ku-g__search { display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; padding: 7px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(var(--shade), .14);
  font: 500 clamp(12px, 3.4cqw, 13.5px)/1.2 var(--font); color: var(--ink); }
.ku-g__search > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ku-g__res { display: grid; gap: 3px; padding: 10px 14px 4px; }
.ku-spons { font: 600 clamp(11px, 3cqw, 12px)/1.2 var(--font); color: var(--ink); }
.ku-g__url { display: flex; align-items: center; gap: 6px; font: 400 clamp(11px, 3cqw, 12px)/1.2 var(--font); color: var(--text-2); }
.ku-g__url i { width: 14px; height: 14px; border-radius: 50%; background: var(--warm); }
.ku-g__title { font: 500 clamp(14px, 4.2cqw, 17px)/1.25 var(--font); color: var(--sky-ink); }   /* the link colour from our palette (5 colours) */
.ku-g__desc { font: 400 clamp(11.5px, 3.3cqw, 13px)/1.35 var(--font); color: var(--text-2); }
.ku-mock__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ku-mock__who { display: grid; flex: 1; min-width: 0; font: 600 clamp(12px, 3.4cqw, 13.5px)/1.2 var(--font); }
.ku-mock__who small { font: 400 11px/1.2 var(--font); color: var(--text-3); }
.ku-avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/1 var(--font); }
.ku-ig__img { aspect-ratio: 2.4 / 1; overflow: hidden; }   /* a wide banner keeps the ad card compact */
.ku-ig__img img, .ku-post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ku-ig__cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--grey-1);
  font: 500 clamp(11.5px, 3.3cqw, 13px)/1.25 var(--font); }
.ku-ig__cta b { flex: none; color: var(--sky-ink); font-weight: 600; }
.ku-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 14px 10px; border-top: 1px solid rgba(var(--shade), .08); }
.ku-meter small { font: 500 clamp(11px, 3cqw, 12px)/1.2 var(--font); color: var(--text-3); }
.ku-meter .ku-ad__n { grid-row: 1 / 3; grid-column: 2; display: grid; justify-items: end; }
.ku-ad__bar { display: block; height: 6px; border-radius: 6px; background: rgba(var(--shade), .08); overflow: hidden; }
.ku-ad__bar i { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: 0 50%; transform: scaleX(.3); }
.ku-ad[data-k="1"] .ku-ad__bar i { transform: scaleX(.75); }
.ku-ad__n b { font: 600 clamp(20px, 6cqw, 26px)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.ku-ads__out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 2.6em; }
.ku-lead { background: var(--warm-tint); color: var(--warm-ink); }
.ku-reply { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--positive-tint); color: var(--positive-ink);
  font: 600 clamp(12px, 3.3cqw, 13.5px)/1.25 var(--font); }
.ku-reply .icon { display: grid; flex: none; width: 1.1em; height: 1.1em; }
.ku-reply svg { stroke-width: 2.6; }
.ku .ku-reply .wd-ball--px, .ku .ku-chat__a .wd-ball--px, .ku .ku-inbox__head .wd-ball--px { width: 28px; height: 28px; }

/* site · three mini websites at once, fanned out: a company site left, the online shop in front, a landing page right.
   They overlap only by the edges of the pictures, never over a text (owner 18.10) */
.ku-site { display: grid; gap: 4px; }
.ku-fan--web { position: relative; display: grid; grid-template: auto / 1fr; align-items: start; margin-top: 4px; padding-bottom: 8px; }   /* the three share one cell: the tallest sets the height */
.ku-web { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden; width: 36%; border-radius: 12px; background: #fff; box-shadow: var(--shadow-2); }
.ku-web--corp { justify-self: start; margin-top: 6cqw; transform: rotate(-5deg); z-index: 1; }
.ku-web--land { justify-self: end; margin-top: 5cqw; transform: rotate(5deg); z-index: 1; }
.ku-web--shop { justify-self: center; z-index: 2; width: 40%; box-shadow: 0 18px 40px -12px rgba(33, 33, 33, .4); }
.ku-bar { display: flex; align-items: center; gap: 3px; padding: 5px 7px; background: var(--grey-1); }
.ku-bar i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--shade), .22); }
.ku-url { flex: 1; min-width: 0; margin-left: 4px; padding: 2px 6px; border-radius: var(--r-pill); background: #fff; font: 500 clamp(8px, 2.3cqw, 10px)/1.2 var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ku-kind { align-self: flex-start; margin: 6px 7px 7px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--acc-tint); color: var(--acc-ink); font: 600 clamp(9px, 2.5cqw, 11px)/1.2 var(--font); }
.ku-web--land .ku-kind { align-self: flex-end; }
.ku-web--shop .ku-kind { align-self: center; background: var(--warm-tint); color: var(--warm-ink); }
/* the company site: a skeleton menu, the office photo with the headline on it */
.ku-corp__nav { display: flex; align-items: center; gap: 4px; padding: 5px 7px; }
.ku-corp__logo { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warm); }
.ku-corp__nav span:not(.ku-corp__logo) { width: 18%; height: 4px; border-radius: 4px; background: rgba(var(--shade), .14); font-size: 0; }
.ku-corp__hero { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.ku-corp__hero img, .ku-land__hero img, .ku-prod__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ku-corp__hero b { position: absolute; left: 0; right: 22%; bottom: 0; padding: 18px 7px 7px; color: #fff; font: 600 clamp(10px, 2.9cqw, 13px)/1.2 var(--font);
  background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
/* the landing page: one big photo, the offer and its button */
.ku-land__hero { aspect-ratio: 4 / 3; overflow: hidden; }
.ku-land__text { display: grid; justify-items: end; gap: 5px; padding: 6px 7px 0 22%; text-align: right; }
.ku-land__text b { font: 600 clamp(10px, 2.9cqw, 13px)/1.2 var(--font); }
.ku-btn { padding: 3px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 clamp(8.5px, 2.4cqw, 10.5px)/1.2 var(--font); }
/* the online shop: the cart, one product big, two small */
.ku-shop__head { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; font: 600 clamp(10px, 2.8cqw, 12.5px)/1.2 var(--font); }
.ku-cart { position: relative; display: grid; width: 16px; height: 16px; color: var(--ink); }
.ku-cart .icon, .ku-cart svg { width: 100%; height: 100%; }
.ku-cart i { position: absolute; right: -6px; top: -5px; display: grid; place-items: center; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: var(--warm); color: #fff; font: 600 8.5px/1 var(--font); font-style: normal; }
.ku-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 6px; }
.ku-prod { display: grid; gap: 2px; min-width: 0; font: 500 clamp(8.5px, 2.4cqw, 10.5px)/1.2 var(--font); }
.ku-prod b { font: 600 clamp(9px, 2.5cqw, 11px)/1.2 var(--font); }
.ku-prod--0 { grid-column: 1 / -1; grid-template-columns: 44% minmax(0, 1fr); column-gap: 7px; align-items: center; }
.ku-prod--0 .ku-prod__img { grid-row: span 3; }
.ku-prod__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--grey-1); }
.ku-prod__n { overflow-wrap: anywhere; }
.ku-prod__add { justify-self: start; max-width: 100%; overflow-wrap: anywhere; padding: 3px 7px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 clamp(8px, 2.2cqw, 10px)/1.2 var(--font); }
.ku-chat { display: grid; gap: 6px; padding: 4px 0 0; min-height: 9.5em; align-content: start; }
.ku-chat__a { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.ku-chat__a .wd-msg--out { max-width: 82%; }
.ku .wd-msg__t { display: inline; }
.ku .wd-done { margin-top: 2px; justify-self: end; }

/* social · the connected networks, posts in their own frames, one agent's inbox for every network */
.ku-social { display: grid; gap: 10px; }
.ku-nets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ku-nets__t { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 4px 10px 4px 7px; border-radius: var(--r-pill); background: var(--positive-tint); color: var(--positive-ink); font: 600 12px/1.2 var(--font); }
.ku-nets__t .icon { display: grid; width: 13px; height: 13px; }
.ku-nets__t svg { stroke-width: 2.6; }
/* three posts at once, side by side like phones on a table: Instagram left, TikTok in front in the middle, Facebook right.
   They overlap only by the edge of the pictures, never over a text (owner 18.10: the TikTok covered a phrase) */
.ku-feed__win { position: relative; height: clamp(230px, 74cqw, 440px); margin: 4px 0 6px; }
.ku-post { position: absolute; display: flex; flex-direction: column; overflow: hidden; width: 35%; border-radius: 14px; background: #fff; box-shadow: var(--shadow-2); }
.ku-post--ig { left: 0; top: 8%; transform: rotate(-5deg); z-index: 1; }
.ku-post--fb { right: 0; top: 6%; transform: rotate(5deg); z-index: 1; }
.ku-post--tt { left: 50%; top: 0; z-index: 2; width: 34%; aspect-ratio: 9 / 16; margin-left: -17%; background: #111; box-shadow: 0 18px 40px -12px rgba(33, 33, 33, .45); }
.ku-post .ku-mock__head { gap: 6px; padding: 6px 8px; }
.ku-post .ku-mock__who { font-size: clamp(10.5px, 2.9cqw, 12px); }
.ku-post .ku-avatar { width: 20px; height: 20px; font-size: 10px; }
.ku-post .ku-logo { width: 20px; height: 20px; border-radius: 6px; }
.ku-post__img { overflow: hidden; }
.ku-post--ig .ku-post__img { aspect-ratio: 1; }
.ku-post--fb .ku-post__img { aspect-ratio: 4 / 3; }
.ku-post__cap { padding: 6px 8px 8px; font: 600 clamp(10.5px, 2.9cqw, 12px)/1.25 var(--font); }
.ku-post--fb .ku-post__cap { padding: 0 8px 6px; font-weight: 500; }
/* the network mark and the caption sit on the outer edge of each side post: the TikTok in front covers a strip of the inner edge */
.ku-post--ig .ku-mock__head { flex-direction: row-reverse; }

.ku-post--tt .ku-post__img { position: absolute; inset: 0; }
.ku-tt__logo { position: absolute; top: 8px; left: 8px; }
.ku-tt__side { position: absolute; right: 7px; bottom: 30%; display: grid; gap: 9px; color: #fff; }
.ku-tt__side .icon { display: grid; width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.ku-post--tt .ku-post__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 24px 30px 9px 9px; color: #fff; font-weight: 500;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.ku-post--tt .ku-post__cap b { font-weight: 600; }
/* the message that comes up on a post before it flies to the inbox */
.ku-ping { position: absolute; z-index: 3; top: 36%; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px 4px 6px; border-radius: var(--r-pill);
  background: var(--warm); color: #fff; font: 600 11px/1 var(--font); box-shadow: 0 6px 16px -4px rgba(var(--warm-rgb), .7); }
.ku-ping .icon { display: grid; width: 13px; height: 13px; }
.ku-best { position: absolute; z-index: 4; top: -6px; left: 2%; background: #fff; color: var(--warm-ink); box-shadow: var(--shadow-1); }
.ku-best svg { fill: currentColor; }
.ku-inbox { display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); }
.ku-inbox__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font: 600 clamp(12.5px, 3.5cqw, 14px)/1.2 var(--font); }
.ku-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--grey-1);
  font: 400 clamp(12px, 3.4cqw, 13.5px)/1.3 var(--font); }
.ku-row .ku-logo { width: 24px; height: 24px; }
.ku-row__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--positive-ink); font: 600 11.5px/1 var(--font); }
.ku-row__ok .icon { display: grid; width: 14px; height: 14px; }
.ku-row__ok svg { stroke-width: 2.6; }
@container (max-width: 330px) { .ku-row__ok > span:last-child { display: none; } }

/* telegram · the bot's chat, the shop opens inside as a mini app, payment, then the agent answers */
.ku-tg { position: relative; overflow: hidden; max-width: 420px; margin: 0 auto; width: 100%; border-radius: 22px; background: #fff; box-shadow: var(--shadow-2); }
.ku-tg__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(var(--shade), .08); }
.ku-tg__head .ku-mock__who small { color: var(--sky-ink); }
.ku-tg__chat { position: relative; display: grid; align-content: start; gap: 8px; min-height: clamp(300px, 92cqw, 380px); padding: 12px; background: linear-gradient(170deg, var(--sky-tint), #f4f7fb); }
.ku-tg__m { max-width: 80%; padding: 8px 11px; border-radius: 14px; background: #fff; font: 400 clamp(12px, 3.4cqw, 13.5px)/1.35 var(--font); box-shadow: 0 1px 1px rgba(33, 33, 33, .06); }
.ku-tg__m--me { justify-self: end; background: var(--sky-soft); border-bottom-right-radius: 4px; }
.ku-tg__m--bot { justify-self: start; border-bottom-left-radius: 4px; }
.ku-tg__btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; padding: 6px 10px; border-radius: 10px; background: var(--sky-tint); color: var(--sky-ink); font-weight: 600; }
.ku-tg__btn .icon { display: grid; width: 15px; height: 15px; }
.ku-tg__a { display: flex; align-items: flex-end; gap: 6px; }
/* the mini app: a sheet from the bottom of the chat */
.ku-tg__sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 8px 14px 14px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -12px 30px -14px rgba(33, 33, 33, .35); }
.ku-tg__grip { justify-self: center; width: 34px; height: 4px; border-radius: 4px; background: rgba(var(--shade), .2); }
.ku-tg__sheet > b { font: 600 clamp(13px, 3.6cqw, 15px)/1.2 var(--font); }
.ku-tg__prod { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; font: 500 clamp(12px, 3.3cqw, 13.5px)/1.3 var(--font); }
.ku-tg__pay, .ku-tg__paid { grid-area: 4 / 1; justify-self: stretch; }
.ku-tg__pay { padding: 9px; border-radius: 12px; background: var(--sky); color: #fff; text-align: center; font: 600 clamp(12.5px, 3.4cqw, 14px)/1.2 var(--font); }
.ku-tg__paid { justify-content: center; width: auto; background: var(--positive-tint); color: var(--positive-ink); padding: 9px; border-radius: 12px; }
.ku-tg__paid svg { stroke-width: 2.6; }

/* pay · every way to pay, crypto set apart */
.ku-pay { display: grid; gap: 12px; }
.ku-pay__box { padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-2); }
.ku-pay__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ku-pay__sum small { font: 600 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ku-pay__sum b { font: 600 clamp(20px, 6cqw, 26px)/1 var(--font); font-variant-numeric: tabular-nums; }
.ku-pay__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ku-pay__m { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border-radius: 12px; background: var(--grey-1); font: 600 clamp(12px, 3.3cqw, 13.5px)/1.2 var(--font);
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s, background .25s; }
.ku-pay__m.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--sky); }
.ku-pay__m .icon { display: grid; flex: none; width: 20px; height: 20px; color: var(--sky-ink); }
.ku-pay__m > span { overflow-wrap: anywhere; }
.ku-pay__twint { flex: none; width: 20px; height: 20px; object-fit: contain; }
/* crypto for business: the dark panel with warm coins */
.ku-crypto { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: var(--shadow-2); }
.ku-crypto__head { display: flex; align-items: center; gap: 8px; font: 600 clamp(13.5px, 3.8cqw, 15.5px)/1.2 var(--font); }
.ku-crypto__head .icon { display: grid; width: 18px; height: 18px; color: var(--warm); }
.ku-crypto__coins { display: flex; flex-wrap: wrap; gap: 6px; }
.ku-coin { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font: 600 12.5px/1 var(--font); }
.ku-coin i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warm); color: #fff; font: 700 13px/1 var(--font); font-style: normal; }
.ku-coin--more { padding-left: 10px; color: rgba(255, 255, 255, .75); }
.ku-crypto__flow { display: flex; flex-wrap: wrap; gap: 6px; min-height: 2.2em; }
.ku-chf { background: rgba(255, 255, 255, .12); color: #fff; }
.ku-booked { background: var(--positive-tint); color: var(--positive-ink); }
.ku-booked svg { stroke-width: 2.6; }

/* the smallest phones */
@media (max-width: 380px) {
  .ku-ads__out { min-height: 6.4em; }
}
@media (prefers-reduced-motion: reduce) { .ku-card:not(:last-child)::after { transition: none; } }

.ku-post--ig .ku-ping { right: auto; left: 8px; }   /* away from the edge the TikTok covers */
.ku-pay, .ku-pay__box, .ku-crypto, .ku-tg { min-width: 0; }
.ku-crypto .wd-chip { width: auto; }   /* a long label wraps instead of widening the card (de-CH at 320 px) */
.ku-pay__logos { display: flex; gap: 3px; flex: none; }
.wd .ku-mark { display: block; flex: none; width: 22px; height: 22px; stroke: none; }   /* .wd svg (css/leistungen.css) would stretch it */
.wd .ku-mark path { stroke: none; }
.ku-pay__m--brand { justify-content: center; }
.wd .ku-pay__m--brand .ku-mark { width: 64px; height: 40px; margin: -8px 0; }   /* the Pay marks are small inside their square */
.ku-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the text follows its object right away (also in «What we do»); when the phone stack makes all cards one height, the extra room goes under
   the text, not between the object and the text (owner 18.10: the description sat too low) */
.ku-card .wd-vis, .wd-card .wd-vis { flex: none; }

/* /design/css/ablauf.css */
/* Home section «How we work» (owner 20.10), js/ablauf.js. The head comes from css/leistungen.css (.wd); spacing and
   card tokens from css/tokens.css. Four step cards 1 → 2 → 4 per row (never 3 + 1), a line through their numbers on
   desktops, then the wide «monthly care» card on Föhn */
.ab-body { display: grid; gap: var(--card-gap); }
.ab-steps { position: relative; display: grid; gap: var(--card-gap); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ab-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-line { display: none; }
@media (min-width: 1000px) {   /* the path of the four steps: a thin line behind the numbers */
  .ab-line { display: block; position: absolute; z-index: 0; left: 12%; right: 12%; top: calc(var(--card-pad) + 22px); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--warm-rgb), .45), rgba(var(--sky-rgb), .45)); }
}
.ab-step { position: relative; z-index: 1; display: grid; align-content: start; gap: 12px; padding: var(--card-pad); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-1); }
.ab-step__n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; color: #fff; font: 600 17px/1 var(--font);
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 6px 16px -8px rgba(var(--warm-rgb), .9); }
.ab-step h3 { margin: 0; font: 600 clamp(20px, 1.7vw, 24px)/1.2 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.ab-step p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.ab-step .ab-step__time { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; padding: 6px 12px 6px 9px; border-radius: var(--r-s);
  background: var(--sky-tint); color: var(--sky-ink); font: 500 13.5px/1.25 var(--font); }
.ab-step__time .icon { display: block; flex: none; width: 16px; height: 16px; }
.ab-step__time .icon svg, .ab-care .icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-care { display: grid; gap: 18px; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--foehn); box-shadow: var(--shadow-1); }
.ab-care h3 { margin: 0; font: 600 clamp(22px, 2vw, 30px)/1.15 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.ab-care ul { display: grid; gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .ab-care ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-care li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--ink); }
.ab-care li .icon { display: block; flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--positive); }   /* green = a confirmed part of the service */
@media (max-width: 599px) { .ab-step, .ab-care { border-radius: var(--r-l); } }
/* the time of a step is a fact, not a button (heat map 22.10: the tinted pill drew taps): a quiet line with its clock,
   a hairline above it instead of a filled chip */
.ab-step .ab-step__time { padding: 10px 0 0; border-radius: 0; background: none; border-top: 1px solid rgba(var(--shade), .1); color: var(--sky-ink); font-weight: 600; }

/* /design/css/ehrlich.css */
/* Home block «Honest» (owner 18.10): the fake wall of praise crumbles into pixels, the answer stays.
   One screen, pinned by js/ehrlich.js. Palette: neutral cards, warm stars and badge, sky avatar and badge, grey logos;
   no red (nothing here is an error message) */
.eh { position: relative; margin-top: var(--section-y); }   /* the same gap as between the other sections (QA 20.10: 13 px) */
.eh__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; padding: 0 16px; }
.eh__fx, .eh__wall { position: absolute; inset: 0; pointer-events: none; }   /* no z-index: the warm circle must rise above the answer */
.eh__wall { z-index: 1; }
.eh-it { position: absolute; left: 50%; top: 50%; filter: blur(0px) grayscale(0);
  -webkit-mask-size: 240px 240px; mask-size: 240px 240px; -webkit-mask-repeat: repeat; mask-repeat: repeat; will-change: transform, opacity; }

.eh-stars { color: var(--warm); letter-spacing: .12em; font-size: 15px; line-height: 1; }

.eh-it[hidden] { display: none; }

/* the five-star cards */
.eh-rev { width: 248px; margin: 0; padding: 16px 18px; border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow-1); }
.eh-rev blockquote { margin: 8px 0 12px; font: 500 15px/1.35 var(--font); color: var(--ink); }
.eh-rev figcaption { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
/* owner 27.10: the fake reviews, badges and logos are visibly crossed out, so a screenshot never reads as real praise */
.eh-rev blockquote, .eh-badge, .eh-logo span { text-decoration: line-through; text-decoration-color: rgba(var(--red-rgb), .85); text-decoration-thickness: 2px; }
.eh-rev::after, .eh-badge::after, .eh-logo::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 3px; border-radius: 2px;
  background: rgba(var(--red-rgb), .8); transform: rotate(-8deg); pointer-events: none; }
.eh-ava { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 600 12px/1 var(--font); }
.eh-ava--warm { background: var(--warm-tint); color: var(--warm-ink); }
.eh-ava--sky { background: var(--sky-tint); color: var(--sky-ink); }

/* «No 1», «100 %» */
.eh-badge { padding: 10px 16px; border-radius: var(--r-pill); font: 600 14px/1.2 var(--font); white-space: nowrap; box-shadow: var(--shadow-1); }
.eh-badge--warm { background: var(--warm-tint); color: var(--warm-ink); }
.eh-badge--sky { background: var(--sky-tint); color: var(--sky-ink); }

/* the «logos»: grey marks that only name what they pretend to be */
.eh-logo { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-s); background: var(--grey-1); color: #8a8d98;
  font: 600 13px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.eh-logo svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

/* the lines in the middle */
.eh__mid { grid-area: 1 / 1; position: relative; z-index: 2; text-align: center; }
.eh__mid { display: grid; justify-items: center; gap: 18px; }
.eh__says { display: grid; place-items: center; }
.eh__says > * { grid-area: 1 / 1; }
.eh__eyebrow { margin: 0; color: var(--text-3); font: 600 clamp(15px, 1.2vw + 9px, 17px)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.eh__say { max-width: 20ch; margin: 0; font: 600 clamp(30px, 4.3vw, 60px)/1.08 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.eh-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.eh-w > span { display: inline-block; }

@media (max-width: 699px) {
  .eh__stage { padding: 0 16px; }
  .eh-rev { width: 176px; padding: 12px 14px; }
  .eh-rev blockquote { margin: 6px 0 8px; font-size: 13px; }
  .eh-rev figcaption { font-size: 11.5px; gap: 6px; }
  .eh-ava { width: 22px; height: 22px; font-size: 11px; }
  .eh-stars { font-size: 12px; }
  .eh-badge { padding: 8px 12px; font-size: 12px; }
  .eh-logo { padding: 8px 12px; font-size: 11px; }
  .eh-logo svg { width: 16px; height: 16px; }
  .eh__say { font-size: clamp(28px, 8vw, 36px); max-width: 13ch; }
  .eh .hs-kaia { height: 52px; font-size: 15px; }
}

/* reduced motion (and the state before the scene starts): only the answer */
.eh.is-still .eh__fx, .eh.is-still .eh__mid { display: none; }
.eh.is-still .eh__stage { height: auto; min-height: 0; padding: clamp(64px, 9vw, 120px) 20px; }

/* the warm circle: the brand circle that runs the eraser */
.eh-ball { position: absolute; left: 0; top: 0; z-index: 4; width: clamp(84px, 10vw, 140px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 18px 40px -12px rgba(var(--warm-rgb), .6); }

/* the trail of the eraser, in the colour of the page */
.eh-trail { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; }
.eh-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* the slot machine counter: digits roll in grey wells, the stars run over */
.eh-slot { position: absolute; left: 50%; top: 56%; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 18px 28px 20px;
  border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); color: var(--text-2); font-size: 15px; }
.eh-slot__stars { white-space: nowrap; font-size: 18px; }
.eh-slot__n { display: flex; gap: .08em; font: 600 clamp(44px, 6vw, 84px)/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.eh-dg { display: block; height: 1.1em; overflow: hidden; padding: 0 .1em; border-radius: .16em; background: var(--grey-1); }
.eh-dg > span { display: flex; flex-direction: column; }
.eh-dg i { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; text-align: center; }

@keyframes eh-caret { 50% { opacity: 0; } }
@media (max-width: 699px) {
  .eh-slot { padding: 14px 18px 16px; font-size: 13px; }
  .eh-slot__stars { font-size: 14px; }
}

/* ── e · combined (owner 18.10) ── */
/* the counter as a piece of the wall: its stars may run over five without widening it */
.eh-it.eh-slot { z-index: 2; }
.eh-slot__stars { width: 0; min-width: 100%; overflow: hidden; text-align: center; }
/* the typed turn: the full line keeps its place, the typed part and the caret lie on top */
.eh-tw { display: grid; }
.eh-tw > span { grid-area: 1 / 1; }
.eh-tw__ghost { visibility: hidden; }
.eh-tw__live.is-on::after { content: ""; display: inline-block; width: .06em; height: .95em; margin-left: .04em; vertical-align: -.1em; background: var(--warm); animation: eh-caret 1s steps(1) infinite; }

/* the answer: five stars over the headline, two cards, the black Kaia card */
.eh-ans { display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); max-width: var(--page-max); margin: 0 var(--edge); padding: var(--section-y) 0 0; }
.eh-hl { text-align: center; }
.eh-hl__stars { display: flex; justify-content: center; gap: .1em; color: var(--warm); font-size: clamp(38px, 5.4vw, 72px); line-height: 1; }
.eh-hl__stars > span { display: inline-block; -webkit-mask-size: 240px 240px; mask-size: 240px 240px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.eh-hl h2 { max-width: 15ch; margin: .3em auto 0; font: 600 clamp(40px, 6.6vw, 96px)/1.02 var(--font); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.eh-cards { display: grid; gap: 12px; width: 100%; max-width: var(--col-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .eh-cards { grid-template-columns: 1fr 1fr; gap: var(--card-gap); } }
.eh-card { display: grid; align-content: start; gap: 18px; padding: var(--card-pad); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-1); }
.eh-card__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }
.eh-card__ic .icon { display: block; width: 24px; height: 24px; }
.eh-card__ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.eh-card__ic--warm { background: var(--warm-tint); color: var(--warm-ink); }
.eh-card__ic--sky { background: var(--sky-tint); color: var(--sky-ink); }
.eh-card p { margin: 0; font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--font); color: var(--ink); text-wrap: pretty; }
.eh-kaia { width: 100%; }
.eh.is-still[data-v="e"] .eh__stage { display: none; }

/* headlines broken at their «|» marks (owner 18.10: no stray breaks on any device): every line stays whole, the font
   shrinks to the widest line (js/ehrlich.js fitLines) */
.eh-ln { display: block; white-space: nowrap; }
.eh-fit, .eh-hl h2.eh-fit { max-width: none; }
.eh-tw__live { white-space: pre-line; }
.eh__say--tease, .eh__say--turn, .eh-hl h2 { text-wrap: nowrap; }
@media (max-width: 699px) {   /* phones: smaller praise, so more of it fits around the line */
  .eh[data-v="e"] .eh-rev { width: 148px; padding: 10px 12px; }
  .eh[data-v="e"] .eh-rev blockquote { font-size: 12px; margin: 4px 0 6px; }
  .eh[data-v="e"] .eh-rev figcaption { font-size: 10.5px; }
  .eh[data-v="e"] .eh-logo, .eh[data-v="e"] .eh-badge { font-size: 10.5px; padding: 7px 10px; }
}

/* e · the «Trusted by» strip (owner 19.10): grey wordmarks run past like on every agency site; invented names only */
.eh-trust { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; justify-items: center; gap: 10px; padding: 0 0 clamp(14px, 2.4vw, 26px); pointer-events: none; }
.eh-trust__cap { font: 600 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.eh-trust__row { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.eh-trust__track { display: flex; gap: clamp(28px, 4vw, 56px); width: max-content; animation: eh-trust 32s linear infinite; }
@keyframes eh-trust { to { transform: translateX(-50%); } }
.eh-wm { display: inline-flex; align-items: center; gap: 7px; color: #9a9da8; font: 600 clamp(17px, 1.7vw, 22px)/1 var(--font); white-space: nowrap; }
.eh-wm svg { width: 1.05em; height: 1.05em; fill: currentColor; }
.eh-wm--1 { letter-spacing: .14em; font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); }
.eh-wm--2 { font-weight: 500; letter-spacing: -0.03em; }
.eh-wm--3 { font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .eh-trust__track { animation: none; } }

/* e · layout 20.10 (owner): the line on top, the counter under it, the reviews rain down below */
.eh[data-v="e"] .eh__mid { align-self: start; margin-top: clamp(28px, 7svh, 88px); }
.eh[data-v="e"] .eh-it.eh-slot { left: 50%; }
.eh[data-v="e"] .eh__say { font-size: clamp(26px, 3.6vw, 52px); }

.eh-kaia .kcta { margin: 0; }   /* the answer block already has the page edge and the gap */

@media (prefers-reduced-motion: reduce) { .eh-tw__live.is-on::after { animation: none; } }   /* the caret stands still (UX audit 22.10) */

/* «What many agencies do» over the fake wall (re-audit 22.10): a crossed-out label, gone with the wipe */
.eh-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1.5px dashed rgba(var(--red-rgb), .55);
  background: rgba(255, 255, 255, .9); color: #a3121c; font: 600 13px/1.2 var(--font); }
.eh-tag .icon { display: grid; width: 14px; height: 14px; }
.eh-tag svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }

/* /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/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/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/branchen.css */
/* Home section «industries» (owner 16.10): the design-system entry tiles (css/layout.css «.btile»: label top left,
   ↗ top right, big title anchored to the bottom, the whole tile is the link), every industry in its own colour.
   «Other industry» is the dark wide tile with the ball, it opens Kaia. Motion: js/branchen.js */
.br { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
.br__head { margin: 0 0 var(--head-gap); }
.br__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); }
.br h2 { margin: 0; max-width: 18ch; font: 600 clamp(32px, 4.6vw, 64px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; color: var(--ink); }

.br__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }

.br-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 172px; padding: 22px;
  border: 0; border-radius: var(--r-l); overflow: hidden; color: var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
  transition: transform .25s var(--e-out); touch-action: manipulation; }
.br-tile:hover { transform: translateY(-3px); }
.br-tile:active { transform: scale(.98); }
.br-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* the colour wave (js/branchen.js): a grey veil over the tile's colour and the ball, under its text */
.br-tile__veil { position: absolute; inset: 0; z-index: 1; background: var(--grey-2); pointer-events: none; }
.br-tile--ink .br-tile__veil { background: #3a3a40; }
.br-tile__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.br-tile__eyebrow { min-width: 0; overflow-wrap: anywhere; hyphens: auto; font: 600 11.5px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.br-tile__go .icon, .br-tile__ic .icon { display: grid; width: 20px; height: 20px; }
.br-tile__go svg, .br-tile__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.br-tile__go { transition: transform .25s var(--e-out); }
.br-tile:hover .br-tile__go { transform: translate(2px, -2px); }
.br-tile__body { position: relative; z-index: 2; display: grid; gap: 6px; }
.br-tile__lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.br-tile__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.br-tile__name { min-width: 0; font: 500 clamp(22px, 2vw, 28px)/1.06 var(--font); letter-spacing: -0.03em; text-wrap: balance; hyphens: auto; overflow-wrap: anywhere; }   /* long words (Liegenschaftsverwaltung) break with a hyphen, never cut (QA 20.10) */
.br-tile__pain { font-size: 14.5px; line-height: 1.35; color: var(--text-2); }

/* every industry its own colour: the steps of the five-colour system (warm, sky, neutral); ink text on all of them
   (ink on sky 5.9:1, on warm 5.6:1), the dark tile only for «other industry» */
.br-tile--warm-grad { background: linear-gradient(150deg, var(--warm-tint), var(--peach)); }
.br-tile--peach { background: var(--peach); }
.br-tile--peach-grad { background: linear-gradient(150deg, var(--peach), var(--warm-tint)); }
.br-tile--warm-tint { background: var(--warm-tint); }
.br-tile--warm { background: linear-gradient(150deg, #f08a52, var(--warm)); }
.br-tile--sky { background: linear-gradient(150deg, #86aee0, var(--sky)); }
.br-tile--sky-soft { background: var(--sky-soft); }
.br-tile--sky-tint { background: var(--sky-tint); }
.br-tile--grey { background: var(--grey-1); }
.br-tile--white { background: #fff; box-shadow: 0 1px 2px rgba(33, 33, 33, .04), 0 24px 44px -32px rgba(var(--shade), .6); }
.br-tile--warm .br-tile__eyebrow, .br-tile--sky .br-tile__eyebrow, .br-tile--warm .br-tile__pain, .br-tile--sky .br-tile__pain,
.br-tile--peach .br-tile__eyebrow, .br-tile--sky-soft .br-tile__eyebrow, .br-tile--peach .br-tile__pain, .br-tile--sky-soft .br-tile__pain { color: var(--ink); opacity: .78; }   /* peach and soft sky too: 3.69 / 4.31:1 before (a11y audit 22.10) */
.br-tile--warm .br-tile__ic, .br-tile--sky .br-tile__ic { background: rgba(255, 255, 255, .85); }
.br-tile--ink { background: radial-gradient(120% 90% at 80% 100%, #3a3a40, #212121 60%); color: #fff; }
.br-tile--ink .br-tile__eyebrow, .br-tile--ink .br-tile__pain { color: rgba(255, 255, 255, .7); }
.br-other { grid-column: span 2; }
.br-other__art { position: absolute; z-index: 0; right: -6%; bottom: -24%; width: 42%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #6b6b74, #2b2b30 55%, #18181b); box-shadow: inset -12px -18px 30px rgba(0,0,0,.45), 0 30px 60px -20px rgba(0,0,0,.6); }
.br-other .br-tile__body { max-width: 60%; }

@media (max-width: 1023px) { .br__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .br-other { grid-column: span 3; } }

/* phones: two columns; the name at the bottom, the group label and the pain stay on the industry page */
@media (max-width: 599px) {
  .br__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .br-tile { min-height: 96px; padding: 12px 12px 14px; gap: 8px; border-radius: var(--r-m); }
  .br-tile__eyebrow, .br-tile__pain { display: none; }
  .br-tile__ic { width: 34px; height: 34px; }
  .br-tile__ic .icon { width: 17px; height: 17px; }
  .br-tile__go .icon { width: 18px; height: 18px; }
  .br-tile__name { font-size: clamp(15px, 4.6vw, 18px); line-height: 1.12; }
  .br-other { grid-column: span 2; min-height: 104px; }
  .br-other .br-tile__eyebrow { display: block; }
  .br-other .br-tile__pain { display: block; font-size: 13.5px; }
  .br-other .br-tile__body { max-width: 58%; }   /* clear of the ball (re-audit 22.10: it covered «mit Ihnen an») */
}
@media (prefers-reduced-motion: reduce) { .br-tile, .br-tile__go { transition: none; } }