/* /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/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 12px/1.3 var(--font); letter-spacing: 0.1em; 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/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; }
@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: 500 13px/1.3 var(--font); letter-spacing: .14em; 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; } }

/* /design/css/prices.css */
/* «Leistungen & Preise» (site/tools/build-prices.mjs, 22.10): the catalogue as cards, every price from
   docs/pricing/services.json. The look of the site: paper background, white cards, warm accents, Onest.
   v2 (owner 22.10: «colour, hierarchy, an accent — not all the same»): every line opens with an icon and a count; in a card
   the price is the hero (big sum, small «ab CHF»), the monthly fee a sky pill, Partner 12 a green line; the smallest paid
   step of each line carries a warm «entry» badge */
body.pr-page { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); }
.pr { --pr-max: 1180px; padding: 0 var(--edge); }
.pr-head { max-width: var(--pr-max); margin: 0 auto; padding: clamp(104px, 12vw, 160px) 0 clamp(28px, 4vw, 48px); }
.pr-crumbs { margin-bottom: 18px; }
.pr-h1 { margin: 0; font: inherit; }
.pr-eyebrow { display: block; margin: 0 0 14px; color: var(--text-2); font: 600 13px/1.3 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.pr-title { display: block; max-width: 20ch; font: 600 clamp(34px, 5vw, 64px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.pr-intro { max-width: 58ch; margin: 18px 0 0; color: var(--text-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; text-wrap: pretty; }
.pr-page .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }

/* the line icon disc (the folded price list's headings) */
.pr-line__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--warm-ink);
  background: radial-gradient(circle at 50% 38%, #fff, var(--warm-tint) 78%); box-shadow: inset 0 0 0 1px rgba(var(--warm-rgb), .18); }
.pr-line__ic .icon { display: grid; width: 20px; height: 20px; }

/* ---------- every price, folded: one table per line ---------- */
.pr-all { max-width: var(--pr-max); margin: clamp(36px, 5vw, 64px) auto 0; scroll-margin-top: 80px; }
.pr-all__d { border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px rgba(33, 33, 33, .06); }
.pr-all__d > summary { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 22px; cursor: pointer; list-style: none; }
.pr-all__d > summary::-webkit-details-marker { display: none; }
.pr-all__d > summary h2 { flex: 1; margin: 0; font: 600 clamp(19px, 2vw, 24px)/1.2 var(--font); }
.pr-all__n { color: var(--text-2); font-size: 14px; white-space: nowrap; }
.pr-all__d > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 28px; }
.pr-all__note { margin: 0 22px; color: var(--text-2); font-size: 14.5px; }
.pr-all__line { padding: 18px 22px 6px; scroll-margin-top: 80px; }
.pr-all__line h3 { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; font: 600 18px/1.25 var(--font); }
.pr-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pr-t thead th { padding: 6px 0; color: var(--text-2); font: 500 12.5px/1.2 var(--font); text-align: right; white-space: nowrap; }
.pr-t thead th:first-child { text-align: left; }
.pr-t thead th + th { padding-left: 14px; }
.pr-t tbody tr { border-top: 1px solid rgba(var(--shade), .09); scroll-margin-top: 90px; }
.pr-t tbody th { padding: 10px 12px 10px 0; text-align: left; font-weight: 400; }
.pr-t tbody th b { display: block; font: 600 15px/1.3 var(--font); }
.pr-t tbody th span { display: block; margin-top: 2px; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.pr-t td { padding: 10px 0 10px 14px; text-align: right; white-space: nowrap; vertical-align: top; font: 600 15px/1.3 var(--font); }
.pr-t td small { color: var(--text-2); font-weight: 500; font-size: 12.5px; }
.pr-t__m { color: var(--sky-ink); }
.pr-t__word { color: var(--text-2); font-weight: 500; }
.pr-none { color: var(--text-3, #9a9aa3); font-weight: 400; }
.pr-more { margin: 0; color: var(--text-2); font-size: 13px; }
@media (max-width: 599px) {
  .pr-all__d { margin-inline: calc(var(--edge) * -0.5); border-radius: 24px; }
  .pr-all__d > summary { padding: 12px 16px; }
  .pr-all__note { margin: 0 16px; }
  .pr-all__line { padding: 14px 16px 4px; }
  .pr-t tbody th { padding-right: 8px; }
  .pr-t td { padding-left: 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .qz-opt, .qz-opt__tick, .qz__bar i, .pr-switch button { transition: none; } }

/* ---------- projects on request ---------- */
.pr-custom { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.pr-custom li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(33, 33, 33, .06); }
.pr-custom b { font: 600 17px/1.3 var(--font); }
.pr-custom span { color: var(--text-2); font-size: 15px; line-height: 1.45; }
.pr-custom em { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--warm-tint); color: var(--warm-ink); font-style: normal; font-weight: 600; font-size: 13px; }
.pr-page #fuss { margin-top: clamp(56px, 7vw, 96px); }
.pr-crumbs ol { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 0 6px; margin: 0 0 2px; padding: 0; list-style: none; font: 500 13px/1.3 var(--font); color: var(--text-2); }
.pr-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.pr-crumbs li + li::before { content: "›"; color: var(--text-3, #9a9aa3); }
.pr-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(33, 33, 33, .25); }
.pr-crumbs [aria-current] { color: var(--ink); }

/* The industry hubs (tools/build-hubs.mjs, 22.10): the home page's industry tiles (css/branchen.css) inside the page's
   column, each with its everyday pain; a link on to the prices under the grid */
.pr-page .hub { max-width: var(--pr-max); margin: 0 auto; }
@media (min-width: 600px) { .pr-page .hub .br-tile { min-height: 196px; } }
/* phones: one column, the pain line stays (on the home page it hides; here it is what the visitor chooses by) */
@media (max-width: 599px) {
  .pr-page .hub .br__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pr-page .hub .br-tile { min-height: 0; padding: 14px 16px 16px; gap: 10px; }
  .pr-page .hub .br-tile__pain { display: block; font-size: 14px; }
  .pr-page .hub .br-other { grid-column: auto; }
  .pr-page .hub .br-other .br-tile__body { max-width: 62%; }
}
.hub-more { margin: clamp(24px, 3vw, 36px) 0 0; }
.hub-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(33, 33, 33, .25); }
/* the price page's questions: the site's FAQ block inside the page's column */
.pr-page #fragen .fq { margin-top: clamp(56px, 7vw, 96px); }