/* /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/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/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/legal.css */
/* Legal pages (site/tools/build-legal.mjs, 21.10): the site's header and footer around a readable document.
   Colours only from the five families of tokens.css (neutral, warm, sky; yellow only in the draft view for [NEED]).
   Light world only, as the rest of the site (tokens.css: no dark theme). Layout: one centred text column of ~72
   characters; from 1100 px the contents list sits beside it and stays in view. Print: only the text. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; }
body.lg-page { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
.lg-page .kfab { display: none; }   /* no floating Kaia button over a text to read (the header menu and the footer keep theirs) */

.lg-skip { position: absolute; left: var(--edge-vw); top: 8px; z-index: 60; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.lg-skip:focus-visible { transform: none; outline: 2px solid var(--sky); outline-offset: 2px; }

/* ---------- grid: head and text in one column of ~72 characters; the contents list beside it from 1100 px ---------- */
.lg { --measure: 72ch; display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; column-gap: clamp(40px, 5vw, 80px);
  padding: clamp(96px, 12vw, 152px) var(--edge) 0; }
.lg-head, .lg-doc, .lg-more, .lg-toc--phone { grid-column: 1; min-width: 0; }
@media (min-width: 1100px) {
  .lg { grid-template-columns: 240px minmax(0, var(--measure)); }
  .lg-head, .lg-doc, .lg-more { grid-column: 2; }
  .lg-toc--side { grid-column: 1; grid-row: 2 / span 2; }
}

/* ---------- head: breadcrumb, title, «Stand», languages ---------- */
.lg-head { position: relative; padding-bottom: clamp(24px, 3vw, 40px); }
.lg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font: 600 var(--fs-label)/1.3 var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.lg-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }   /* 44 px for a finger */
.lg-crumbs a:hover { color: var(--ink); }
.lg-crumbs a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.lg-head h1 { margin: 0; font: 600 clamp(32px, 5.2vw, 56px)/1.06 var(--font); letter-spacing: var(--track-display); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 20px; }
.lg-stand { margin: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; }
.lg-stand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px var(--warm-tint); }   /* the warm circle of the brand */
.lg-langs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--shadow-1); }
.lg-langs a { display: grid; place-items: center; min-width: 40px; height: 36px; padding: 0 10px; border-radius: var(--r-pill); color: var(--text-2);
  font: 600 13px/1 var(--font); letter-spacing: .04em; text-decoration: none; transition: background-color var(--d-micro), color var(--d-micro); }
.lg-langs a:hover { color: var(--ink); background: var(--fill); }
.lg-langs a[aria-current="page"] { background: var(--ink); color: #fff; }
.lg-langs a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.lg-banner { margin: 20px 0 0; padding: 14px 18px; border-radius: var(--r-s); background: var(--sky-tint); color: var(--sky-ink); font-size: 15px; line-height: 1.5; }
.lg-banner--draft { background: #fff3bf; color: #5c4800; box-shadow: inset 0 0 0 1px #f0d264; font-weight: 600; }

/* ---------- contents: a closed row on phones, a sticky column on desktop ---------- */
.lg-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lg-toc a { display: grid; grid-template-columns: 2.2em 1fr; align-items: baseline; gap: 4px; min-height: 40px; padding: 9px 12px; border-radius: var(--r-s);
  color: var(--text-2); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: background-color var(--d-micro), color var(--d-micro); }
.lg-toc a:hover { background: var(--card); color: var(--ink); }
.lg-toc a:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.lg-toc a[aria-current] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.lg-toc__n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.lg-toc a > span:only-child { grid-column: 1 / -1; }
.lg-toc__h { margin: 0 0 8px 12px; font: 600 var(--fs-label)/1.3 var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.lg-toc--side { display: none; }
@media (min-width: 1100px) {
  .lg-toc--phone { display: none; }
  .lg-toc--side { display: block; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; padding-bottom: 24px; }
}
.lg-toc--phone { margin-bottom: 16px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }
.lg-toc--phone summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 12px 0 20px; cursor: pointer; list-style: none;
  font: 600 16px/1.3 var(--font); border-radius: var(--r-l); }
.lg-toc--phone summary::-webkit-details-marker { display: none; }
.lg-toc--phone summary:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.lg-toc--phone nav { padding: 0 8px 12px; }

/* ---------- the document: a white sheet on paper ---------- */
.lg-doc { padding: clamp(24px, 4.4vw, 56px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-1); overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; }   /* only long words break: no «klaum-o.ch» */
.lg-doc > :first-child { margin-top: 0; }
.lg-doc > :last-child { margin-bottom: 0; }
.lg-doc p, .lg-doc ul, .lg-doc ol, .lg-doc blockquote { margin: 0 0 1em; }
.lg-doc h2 { display: flex; gap: .45em; margin: 2.2em 0 .7em; padding-top: 1.1em; border-top: 1px solid var(--line); font: 600 clamp(21px, 2.3vw, 26px)/1.25 var(--font); letter-spacing: -0.015em; text-wrap: balance; }
.lg-doc > h2:first-child { padding-top: 0; border-top: 0; }
.lg-h__n { flex: none; min-width: 1.5em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lg-doc h3 { margin: 1.8em 0 .5em; font: 600 18.5px/1.35 var(--font); letter-spacing: -0.01em; }
.lg-doc h4 { margin: 1.5em 0 .4em; font: 600 17px/1.4 var(--font); }
.lg-doc h2 + h3 { margin-top: 0; }
.lg-doc strong { font-weight: 600; }
.lg-doc a { color: var(--sky-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg-doc a:hover { text-decoration-thickness: 2px; }
.lg-doc a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 3px; }
.lg-doc ul, .lg-doc ol { padding-left: 1.4em; }
.lg-doc li { margin: .3em 0; padding-left: .2em; }
.lg-doc li::marker { color: var(--text-3); }
.lg-doc ol li::marker { font-variant-numeric: tabular-nums; }
.lg-doc hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.lg-doc blockquote p { margin: 0 0 .6em; } .lg-doc blockquote p:last-child { margin: 0; }
.lg-doc blockquote { padding: 12px 18px; border-left: 3px solid var(--sky); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--grey-2); color: var(--text-2); }
/* a numbered clause «1.1 …»: the number hangs in its own column */
.lg-cl { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: .4em; }
.lg-cl__n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.lg-cl + ol, .lg-cl + ul { margin-left: 3.4em; }
.lg-note { color: var(--text-2); font-style: italic; }
.lg-need { padding: 0 .2em; border-radius: 4px; background: #ffe066; color: #3d3000; font-style: normal; font-weight: 600; }

/* tables: the site's grey head row, rounded, scroll sideways on narrow screens (focusable for the keyboard) */
.lg-table { margin: 1.2em 0 1.6em; overflow-x: auto; border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.lg-table:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.lg-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.45; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.lg-table th { background: var(--grey-2); font-weight: 600; text-align: left; }
.lg-table th, .lg-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table td + td, .lg-table th + th { border-left: 1px solid var(--line); }
.lg-table tbody tr:last-child td { border-bottom: 0; }
.lg-table td:first-child { font-weight: 600; }

/* ---------- other documents ---------- */
.lg-more { margin-top: clamp(32px, 4vw, 48px); }
.lg-more__h { margin: 0 0 12px; font: 600 var(--fs-label)/1.3 var(--font); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-2); }
.lg-more ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lg-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--card); color: var(--ink);
  font: 600 15px/1 var(--font); text-decoration: none; box-shadow: var(--shadow-1); transition: box-shadow var(--d-micro); }
.lg-more a:hover { box-shadow: var(--shadow-2); }
.lg-more a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

@media (max-width: 599px) {
  body.lg-page { font-size: 16.5px; }
  .lg-doc { border-radius: var(--r-l); }
  .lg-cl { grid-template-columns: 2.6em minmax(0, 1fr); }
  .lg-cl + ol, .lg-cl + ul { margin-left: 1em; }
}

/* ---------- print: only the document, black on white ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  body.lg-page { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  .sh, .sh-scrim, .sh-sheet, .kfab, .ft-host, .lg-toc, .lg-langs, .lg-more, .lg-skip, .lg-crumbs, dialog { display: none !important; }
  .lg { display: block; padding: 0; }
  .lg-head h1 { font-size: 22pt; }
  .lg-stand::before { display: none; }
  .lg-doc { padding: 0; border-radius: 0; box-shadow: none; }
  .lg-doc h2 { break-after: avoid; page-break-after: avoid; font-size: 14pt; }
  .lg-doc h3, .lg-doc h4 { break-after: avoid; page-break-after: avoid; }
  .lg-doc p, .lg-doc li, .lg-table tr { break-inside: avoid; page-break-inside: avoid; }
  .lg-doc a { color: #000; }
  .lg-doc a[href^="http"]::after, .lg-doc a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .lg-table { overflow: visible; box-shadow: none; }
  .lg-table table { min-width: 0; font-size: 9pt; }
  .lg-table th, .lg-table td { border: 1px solid #999; }
  .lg-table th { position: static; background: #eee; }
}