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

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

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

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

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

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


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

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

/* /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); }