/* Calio public website — landing page, sign-in / sign-up, legal pages.
   Same colour language as the dashboard (styles.css): accent blue, calm greys.
   Motion rules and tokens: docs/design/website.md */
/* Inter 4.1 (rsms), self-hosted: a Latin subset of InterVariable with both axes (wght 100-900, opsz 14-32),
   founders' decision of 28.09.2026. Licence SIL OFL 1.1: dashboard/assets/fonts/Inter-OFL.txt, and in the font's
   own name table. The unicode-range is the subset's list; how to rebuild the file: the site-review skill, §1.7.
   Every page that loads site.css preloads the font (<link rel="preload" … crossorigin>, the same URL). */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0178, U+02BC, U+02C6, U+02DA, U+02DC,
    U+2009-200A, U+2013-2014, U+2018-201E, U+2020-2022, U+2026, U+202F-2030, U+2039-203A, U+2044, U+20AC,
    U+2122, U+2190-2193, U+2212, U+2713;
}
:root {
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f3f7; --line: #e1e6ec; --line-strong: #c9d1db;
  --text: #121821; --text-2: #4f5b6b; --text-3: #636f80;
  --accent: #1b5fb8; --accent-hover: #164f9a; --accent-soft: #e8f0fb; --accent-ink: #0f3f80; --accent-fill: #1b5fb8;
  --green: #17724a; --green-bg: #e6f5ec; --red: #c2334a; --red-bg: #fdeaed;
  --orange: #9a4f08; --orange-bg: #fdf0e1;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .14);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  /* radius ladder: controls / cards / product windows; pills stay 999px, circles 50% */
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  /* Inter from this origin (@font-face above). Its optical size follows the font size (font-optical-sizing:
     auto): the text cut up to 14 px, the display cut from 32 px, a blend in between. Behind it the system stack,
     for a character outside the subset and for the moment before the file arrives: SF on Apple, Segoe UI Variable
     on Windows 11, Segoe UI on Windows 10, Roboto/system-ui on Android and Linux */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  /* type scale (rem, 16 px base) */
  --fs-xs: .75rem;        /* 12 */
  --fs-sm: .875rem;       /* 14 */
  --fs-body-sm: .9375rem; /* 15: card and answer text */
  --fs-base: 1rem;        /* 16 */
  --fs-lg: 1.125rem;      /* 18: card titles, section intros */
  --fs-xl: 1.25rem;       /* 20: hero lead */
  --fs-h2: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);   /* 28 -> 40 */
  --fs-h1: clamp(2.25rem, .6rem + 3.6vw, 3.25rem); /* 36 -> 52 */
  --fw-display: 600;      /* Inter display cut: 600 reads like the system font at 650 did (compared 28.09.2026) */
  /* section rhythm on the 4-px grid: 64 on phones, 96 on desktop */
  --section: clamp(64px, 5.4vw + 28px, 96px);
  /* form field outline, at least 3:1 against the field (WCAG 1.4.11) */
  --field-line: #858f9e;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
  --ck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  color-scheme: light;
  --logo-accent: #1b5fb8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117; --surface: #151a22; --surface-2: #1b212b; --line: #252c37; --line-strong: #37404d;
    --text: #e8ecf2; --text-2: #a3adbb; --text-3: #8591a1;
    --accent: #4f9cf9; --accent-hover: #2a64c2; --accent-soft: #14233a; --accent-ink: #bcd8ff; --accent-fill: #2f6fd0;
    --green: #63d29b; --green-bg: #10241a; --red: #ff8794; --red-bg: #2c1518;
    --orange: #ffb35c; --orange-bg: #2b1d0c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --field-line: #5d6878;
    color-scheme: dark;
    --logo-accent: #4f9cf9;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font: 16px/1.6 var(--font); background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* line icons: 24-unit grid, 1.5px stroke at the rendered size, rounded caps */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.draw path, .checks .ic path { stroke-dasharray: 1; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: 20px; }

@keyframes up { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }

/* a label may wrap (French and Italian run 20-30 % longer): min-height, never a fixed height */
.btn { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px;
  min-height: 44px; padding: 10px 20px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 600 15px/1.25 var(--font); cursor: pointer;
  text-decoration: none; white-space: normal; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s, transform .1s var(--ease); }
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { min-height: 36px; padding: 6px 14px; font-size: var(--fs-sm); }
.btn.lg { min-height: 52px; padding: 12px 24px; font-size: var(--fs-base); }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pill.blue { background: var(--accent-soft); color: var(--accent); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.orange { background: var(--orange-bg); color: var(--orange); }
.demo { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .2px; }
.ticks li::before, .strip li::before, .included span::before, .auth .brandside li::before {
  content: ""; display: inline-block; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }

.nav { position: sticky; top: 0; z-index: 20; isolation: isolate; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0; transition: opacity .35s var(--ease); }
.nav.scrolled::before { opacity: 1; }
.nav .container { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px;
  color: var(--text); letter-spacing: -.3px; }
.logo:hover { text-decoration: none; }
.logo { min-height: 44px; }
.logo { color: var(--text); }
.brand-logo { display: block; width: auto; height: 32px; }
.logo.sm .brand-logo { height: 26px; }
.brand-logo .lg-ink { stroke: currentColor; }
.brand-logo .lg-acc { stroke: var(--logo-accent, #1b5fb8); }
/* the section links, with a safety valve for a font wider than the measured one (a fallback font such as DejaVu
   Sans while Inter has not arrived or is blocked, a classic Windows scrollbar at the threshold): the block may
   shrink, and a link that no longer fits wraps into a clipped second row and goes whole, instead of the page
   scrolling sideways. The 6-px padding keeps the focus ring and the hover line inside the clip; the margins give
   it back (12 px to the logo, as before). */
.nav .links { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; align-content: flex-start; gap: 20px;
  font-size: 15px; height: calc(1.6em + 12px); padding: 6px; margin: 0 -6px 0 6px; overflow: hidden; overflow: clip; }
/* a link in the clipped row still takes keyboard focus: while it has it, the row shows below the bar (WCAG 2.4.7) */
.nav .links:focus-within { overflow: visible; }
.nav .links a { position: relative; color: var(--text-2); font-weight: 500; transition: color .2s; }
.nav .links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.nav .links a:hover { color: var(--text); text-decoration: none; }
.nav .links a:hover::after { transform: scaleX(1); }
.nav .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* the nav never squeezes: the logo and buttons keep their width and every label stays on one line */
.nav .logo, .nav .actions { flex: none; }
.nav .links a, .nav .actions .btn { white-space: nowrap; }
/* the whole bar needs 887 px (EN), 1004 (DE), 1012 (IT) and 1111 (FR) of the container, which is at most
   1120 px (Inter, 20-px link gap, measured 28.09.2026; Inter at the old 22-px gap left French 1 px): each language
   shows the section links from the width where they still fit beside a classic 17-px Windows scrollbar, English
   from 981, German and Italian from 1080, French from 1180. The flag dropdown of 29.09.2026 (evening) is 50 px wide
   where the four flags were 134 and the text chips 144 (measured): every language needs about 94 px less, and the
   thresholds keep that as room */
@media (max-width: 1079px) { .nav .links { display: none; } }
@media (min-width: 981px) { html:lang(en) .nav .links { display: flex; } }
@media (max-width: 1179px) { html:lang(fr) .nav .links { display: none; } }
/* the language switch — header and footer of the homepage, /kontakt, the account pages: a dropdown of round flags
   (dashboard/site_i18n.py switch, a native <details>). Closed it shows the flag of the current language and a
   chevron, a pill of 32 px (44 px on phones) whose name is «Sprache: Deutsch» (.vh) and its title; open, a panel
   lists the other languages, each a link with its flag and its own name, 40 px high (44 px on phones). It needs no
   script: site.js and auth.js only close it on a click outside and on Escape. The panel hangs below the summary,
   right-aligned with it (every instance stands at the right end of its row), and in the footer above it, where the
   page ends. A thin neutral ring keeps the white of a flag visible on a white page; focus is the usual outline. */
.langsw { position: relative; display: inline-flex; align-items: center; }
.langsw:empty { display: none; }   /* no switch on a page whose load starts one-time state (site_i18n.auth_page) */
.langsw details { position: relative; }
.langsw summary { position: relative; display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 7px 0 5px;
  border-radius: 999px; color: var(--text-3); cursor: pointer; list-style: none; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s; }
.langsw summary::-webkit-details-marker { display: none; }
.langsw summary:hover, .langsw details[open] > summary { background: var(--surface-2); color: var(--text); }
.langsw .chev { flex: none; transition: transform .2s var(--ease); }
.langsw details[open] .chev { transform: rotate(180deg); }
.langsw .fl { position: relative; display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.langsw .flag { display: block; width: 100%; height: 100%; border-radius: 50%; clip-path: circle(50%); }
.langsw .fl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.langsw .langlist { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 2px;
  min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.langsw .langlist a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 9px;
  border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
  white-space: nowrap; touch-action: manipulation; transition: background-color .15s; }
.langsw .langlist a:hover { background: var(--surface-2); text-decoration: none; }
.langsw .langlist a:focus-visible { outline-offset: -2px; }
.footer-switch .langsw .langlist { top: auto; bottom: calc(100% + 6px); }
/* the right-aligned panel needs the flag at the right end of its line: where the flag wraps below the country
   switch (French and Italian at 320 px) it moves to the right, and without a country switch (a one-domain
   installation) the whole group does */
.footer-switch .langsw { margin-left: auto; }
.footer-switch:has(> .countrysw:empty) { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .langsw details[open] > .langlist { animation: langin .16s var(--ease); }
  .footer-switch .langsw details[open] > .langlist { animation-name: langup; }
}
@keyframes langin { from { opacity: 0; transform: translateY(-4px); } }
@keyframes langup { from { opacity: 0; transform: translateY(4px); } }
.nav .langsw { margin-left: auto; }
.nav .langsw + .actions { margin-left: 8px; }
/* the account pages: the switch at the top of the form column, the form centred below it */
.auth-langs { justify-self: end; align-self: start; margin: -20px -8px 0 0; }
/* visually hidden, still read (the flags' names) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a page in another language: «(en allemand)» beside a link to a legal text, which stays German
   (dashboard/site_i18n.py GERMAN_ONLY) — smaller than the link, never wrapped away from it */
.de-only { font-size: .8em; font-weight: 400; opacity: .78; white-space: nowrap; }
/* Schweiz | Österreich, footer — the country domains of this installation. Filled by
   dashboard/site_i18n.py from platform/settings.json -> sites; with a single domain it stays
   empty and is hidden, so a one-country installation looks exactly as it did before. */
.countrysw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--line); }
.countrysw:empty { display: none; }
.countrysw a { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px;
  padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.countrysw a:hover { color: var(--text); text-decoration: none; }
.countrysw a.on { background: var(--text); color: var(--bg); }

/* skip link: the first stop of the keyboard, visible only when focused. The shadow comes with the focus: parked
   above the page, its 60-px blur still greyed the top-left corner */
.skip { position: absolute; left: 16px; top: -100px; z-index: 30; padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font-weight: 600; }
.skip:focus { top: 12px; text-decoration: none; box-shadow: var(--shadow-lg); }

.hero { padding: 64px 0 48px; overflow: hidden; }
/* clip sideways only, so the window's shadow is not cut off in a hard line above the strip */
@supports (overflow: clip) { .hero { overflow: clip visible; } }
.hero .container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-copy > * { animation: up .7s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .07s; }
.hero-copy > :nth-child(3) { animation-delay: .14s; }
.hero-copy > :nth-child(4) { animation-delay: .21s; }
/* a plain label, not a pill: one of the page's three eyebrows (hero, Funktionen, Kontrolle) */
.eyebrow { display: block; margin: 0 0 16px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--accent); }
.hero h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: 1.08;
  letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance; }
/* the accent line is its own block, so balance works on it alone: the <br> fixes the first line, and a
   balance over the whole heading left «préparée.» by itself in French */
.hero h1 em { display: block; font-style: normal; color: var(--accent); }
.hero .lead { font-size: var(--fs-xl); line-height: 1.5; color: var(--text-2); max-width: 30em; text-wrap: pretty; }
.hero .cta { display: flex; gap: 12px 36px; margin-top: 32px; flex-wrap: wrap; }
/* the secondary CTA is a quiet text button; the arrow is a glyph, not part of the label. It hangs by its
   padding, so its text lines up with the column when it wraps below the primary button (French, Italian);
   beside it, the text keeps 36 px from the primary button */
.hero .cta .btn.ghost { padding-inline: 12px; margin-inline-start: -12px; }
.hero .cta .btn.ghost::after { content: "→"; content: "→" / ""; margin-left: 2px; transition: transform .2s var(--ease); }
.hero .cta .btn.ghost:hover::after { transform: translateX(3px); }

/* product preview (pure HTML, no screenshots) — one ~7 s sequence on load, replayable on hover/tap */
.preview { position: relative; isolation: isolate; }
/* flat, not tilted: a rotated window renders its text soft */
.preview .window { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: win .9s var(--ease) .15s both; }
@keyframes win { from { opacity: 0; transform: translateY(16px); } }
.bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.preview .body { display: grid; grid-template-columns: 118px 1fr; min-height: 340px; }
.preview .side { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.preview .side b { font-size: 10px; color: var(--text-3); letter-spacing: .6px; margin: 8px 6px 2px; font-feature-settings: "case"; }
.preview .side span { font-size: 12px; color: var(--text-2); padding: 5px 8px; border-radius: 6px; }
.preview .side span.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.preview .main { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.preview .main h4 { font-size: 15px; }
.preview .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.preview .kpi { border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; min-width: 0; }
.preview .kpi small { display: block; font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; font-feature-settings: "case"; }
.preview .kpi strong { font-size: 17px; letter-spacing: -.3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preview .kpi.red strong { color: var(--red); } .preview .kpi.green strong { color: var(--green); }
.preview .rows { border: 1px solid var(--line); border-bottom: 0; border-radius: 9px 9px 0 0; overflow: hidden; height: 153px; }
.preview .track { animation: slide .7s var(--ease) 4.3s both; }
@keyframes slide { from { transform: translateY(-38px); } }
.preview .r { position: relative; height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 11px; font-size: 12px; border-bottom: 1px solid var(--line); }
.preview .r > :not(.flash) { position: relative; }
.preview .r .flash { position: absolute; inset: 0; background: var(--accent-soft); opacity: 0; }
.preview .r .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.preview .r .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview .pill { font-size: 10.5px; }
.preview .chip { position: absolute; top: 60px; right: -22px; display: flex; gap: 10px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 8px 14px 8px 8px; font-size: 12.5px; line-height: 1.35; opacity: 0; animation: chip 2.3s var(--ease) .8s both; }
.preview .chip b { display: block; font-weight: 600; }
.preview .chip small { display: block; color: var(--text-3); font-size: 11px; }
.preview .chip .fi { width: 32px; height: 32px; border-radius: 8px; background: var(--red-bg); color: var(--red); display: grid; place-items: center; }
.preview .chip .i { width: 18px; height: 18px; stroke-width: 2; }
@keyframes chip { 0% { opacity: 0; transform: translateX(16px); } 22%, 74% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(-16px, 10px) scale(.97); } }
.preview .float { position: absolute; left: -24px; bottom: -40px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px 14px;
  display: flex; gap: 10px; align-items: center; font-size: 13px; max-width: 250px; }
.preview .float .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--green-bg); color: var(--green); flex: none; }
.preview .float .ic .i { width: 20px; height: 20px; stroke-width: 2.2; }
.preview .float small { display: block; color: var(--text-3); font-size: 11.5px; }

/* one-shot animation primitives. Default state = final state (no JS, reduced motion);
   .play on a container runs them, --d is the delay in seconds */
.play .a { animation: a-up .5s var(--ease) calc(var(--d, 0) * 1s) both; }
.play .pop { animation: a-pop .45s var(--ease-back) calc(var(--d, 0) * 1s) both; }
.play .grow { animation: a-grow .8s var(--ease) calc(var(--d, 0) * 1s) both; }
.play .draw path { animation: a-draw .5s var(--ease) calc(var(--d, 0) * 1s) both; }
.play .flash { animation: a-flash 1.8s ease-in-out calc(var(--d, 0) * 1s) both; }
.play .load { animation: a-load .7s var(--ease) calc(var(--d, 0) * 1s) both; }
.play .ring { animation: a-ring 1.5s var(--ease) calc(var(--d, 0) * 1s) both; }
@keyframes a-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes a-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes a-grow { from { transform: scaleX(0); } }
@keyframes a-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes a-flash { 0%, 100% { opacity: 0; } 30% { opacity: 1; } }
@keyframes a-load { 0% { opacity: 1; transform: scaleX(0); } 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes a-ring { 0% { opacity: 0; transform: scale(1); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
.flash, .load, .ring { opacity: 0; pointer-events: none; }
.ring { position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent); }

/* reveal on scroll (only with html.rv: JS present and motion allowed) */
[data-rv] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv [data-rv]:not(.in) { opacity: 0; transform: translateY(14px); }
[data-seq] > * { transition: opacity .6s var(--ease) var(--sd, 0s), transform .6s var(--ease) var(--sd, 0s), translate .3s var(--ease); }
.rv [data-seq]:not(.in) > * { opacity: 0; transform: translateY(12px); }
[data-seq] > :nth-child(2) { --sd: .08s; } [data-seq] > :nth-child(3) { --sd: .16s; }
[data-seq] > :nth-child(4) { --sd: .24s; } [data-seq] > :nth-child(5) { --sd: .32s; }
[data-seq] > :nth-child(6) { --sd: .4s; } [data-seq] > :nth-child(7) { --sd: .48s; }
[data-seq] > :nth-child(8) { --sd: .56s; }

.strip { padding: 24px 0 8px; animation: fade .9s var(--ease) .45s both; }
.strip ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px;
  color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.strip li { display: inline-flex; align-items: center; gap: 8px; }
.strip li::before { color: var(--text-3); }
/* tablets: two centred columns instead of 3 + 1 with one item alone (one row needs 892 px in English, 961 in
   German and 995 in Italian); phones have their own two columns (<= 640) */
@media (min-width: 641px) and (max-width: 1023px) {
  .strip ul { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 12px 40px; }
}

section.block { padding: var(--section) 0; }
section.block.alt { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { max-width: 700px; margin-bottom: 48px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head .kicker { display: block; margin: 0 0 12px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--accent); }
.sec-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.sec-head p { color: var(--text-2); font-size: var(--fs-lg); line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.sec-head.center p { margin-inline: auto; }

.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.tour-frame { display: none; }
.tf-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.tf-ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; flex: none; }
.tf-ic .i { width: 22px; height: 22px; stroke-width: 1.64; }
.tf h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 4px; }
.tf-head p { color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.55; }
.scr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.scr > .bar { padding: 10px 14px; }
.scr > .bar > i { width: 8px; height: 8px; }
.rv .tf:not(.play) :is(.a, .pop) { opacity: 0; }
.rv .tf:not(.play) .grow { transform: scaleX(0); }
.rv .tf:not(.play) .draw path { opacity: 0; }

/* desktop: tabs on the left, one product window on the right (built by site.js) */
.tour.tabs { grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 0 48px; }
.tour.tabs .m-list li { padding: 11px 14px; }
.tour.tabs .m-tab :is(th, td) { padding: 10px 14px; }
.tour-tabs { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 2px; align-self: center; }
.tour.tabs .tour-frame { display: block; grid-area: 1 / 2; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.tour.tabs .tf { grid-area: 1 / 2; padding-top: 43px; z-index: 1; border-radius: var(--r-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.tour.tabs .tf.on { opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s var(--ease) .1s, transform .6s var(--ease) .1s, visibility 0s; }
.tour.tabs .tf:focus-visible { outline-offset: -2px; }
.tour.tabs .scr > .bar { display: none; }
/* the tab already shows title and benefit; the panel keeps them for assistive tech only */
.tour.tabs .tf-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.tour.tabs .scr { height: 100%; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.tour.tabs .m { height: 100%; padding: 26px 30px 30px; gap: 14px; font-size: 13.5px; }
.tt { position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left;
  padding: 8px 14px 10px; border-radius: var(--r); border: 1px solid transparent; background: transparent;
  font: inherit; color: var(--text); cursor: pointer; transition: background-color .2s, border-color .2s; }
.tt:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tt[aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.tt .tf-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); transition: background-color .25s, color .25s; }
.tt .tf-ic .i { width: 20px; height: 20px; stroke-width: 1.8; }
.tt[aria-selected="true"] .tf-ic { background: var(--accent-soft); color: var(--accent); }
.tt-txt { min-width: 0; }
.tt b { display: block; font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; margin-top: 7px; }
/* only the selected tab shows its benefit line, so eight tabs stay short and calm */
.tt small { display: block; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-2); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--ease), opacity .2s, margin .4s var(--ease); }
.tt[aria-selected="true"] small { max-height: 4.5em; opacity: 1; margin-top: 2px;
  transition: max-height .45s var(--ease), opacity .35s .12s, margin .45s var(--ease); }
.tt-prog { position: absolute; left: 64px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--line); overflow: hidden; opacity: 0; transition: opacity .3s; }
.tt-prog i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; }
.tour.auto .tt[aria-selected="true"] .tt-prog { opacity: 1; }
.tour.auto .tt[aria-selected="true"] .tt-prog i { animation: prog 6s linear both; }
.tour[data-paused] .tt-prog i { animation-play-state: paused !important; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* mini-screens (Beispieldaten) */
.m { padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.45; }
.m small { display: block; font-size: 11.5px; color: var(--text-3); }
/* the mock buttons are pictures of the product's buttons: one line, as in the app */
.m .btn, .approve .btn { pointer-events: none; white-space: nowrap; }
.m-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
.m-top b { font-size: 15px; letter-spacing: -.2px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-top .pill { flex: none; }
.m-top > span:not(.pill) { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.m-drop { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--accent);
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.m-drop b { display: block; color: var(--text); font-weight: 600; }
.m-drop small { color: var(--text-2); }
.m-list { list-style: none; overflow: hidden; }
.m-list li { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.m-list li:last-child { border-bottom: 0; }
.m-list li > :not(.flash):not(.load) { position: relative; }
.m-list .load { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform-origin: 0 50%; }
.m-list .flash { position: absolute; inset: 0; background: var(--orange-bg); }
.m-list li.dup, .m-list li.warnrow { background: color-mix(in srgb, var(--orange-bg) 55%, var(--surface)); }
.m-fi { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); display: grid; place-items: center; flex: none; }
.m-fi .i { width: 17px; height: 17px; stroke-width: 2.1; }
.m-name { flex: 1; min-width: 0; }
.m-name b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; }
.m-st .i { width: 14px; height: 14px; stroke-width: 2.6; }
.m-st.ok { background: var(--green-bg); color: var(--green); }
.m-st.warn { background: var(--orange-bg); color: var(--orange); }
.m-foot { font-size: 12px; color: var(--text-3); }
.m-src { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.m-src .i { width: 16px; height: 16px; stroke-width: 2.25; color: var(--text-3); }
.m-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.m-tab th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 8px 12px; border-bottom: 1px solid var(--line); }
.m-tab td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tab :is(th, td):not(:first-child) { width: 25%; text-align: right; font-variant-numeric: tabular-nums; }
/* the name column takes what is left (and shortens); a figure always keeps its full width */
.m-tab :is(th, td):first-child { max-width: 0; }
.m-tab tr:last-child td { border-bottom: 0; }
.m-tab .sum td { font-weight: 650; border-top: 1px solid var(--line-strong); }
.m-tab .sum .m-st { font-weight: 600; }
/* report table: position names wrap in full, figures are never shortened */
.m-rep td:first-child { white-space: normal; }
.m-why { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 9px; padding: 10px 12px; }
.m-btns { display: flex; gap: 8px; align-items: center; }
/* the row labels never run under the first tick (static finding public[3]: they were nowrap in a fixed column, FR
   «Relevé de compte» ran 14–16 px under the January tick): in the narrow cards (82 px, phones 74 px) a label wraps,
   and a single word wider than the column breaks rather than run under the tick; the wide tour (.tour.tabs, below)
   sizes the column to its longest label instead */
.m-grid { display: grid; grid-template-columns: 82px repeat(8, minmax(0, 1fr)); gap: 8px 4px; padding: 12px; align-items: center; justify-items: center; }
.m-grid em { font-style: normal; font-size: 11px; color: var(--text-3); }
.m-grid > span { justify-self: start; font-size: 12px; color: var(--text-2); line-height: 1.2; min-width: 0;
  overflow-wrap: anywhere; }
.m-grid i { position: relative; display: block; width: 22px; height: 22px; border-radius: 6px; background: var(--green-bg); }
.m-grid i::after { content: ""; position: absolute; inset: 5px; background: var(--green);
  -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }
.m-grid i.miss { background: var(--red-bg); box-shadow: inset 0 0 0 1.5px var(--red); }
.m-grid i.miss::after { content: "!"; inset: 0; display: grid; place-items: center; background: none; -webkit-mask: none; mask: none;
  color: var(--red); font: 700 12px/1 var(--font); }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-3); }
.m-legend span { display: inline-flex; align-items: center; gap: 6px; }
.m-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.m-legend .k-ok::before { background: var(--green-bg); box-shadow: inset 0 0 0 1px var(--green); }
.m-legend .k-miss::before { background: var(--red-bg); box-shadow: inset 0 0 0 1px var(--red); }
.m-legend .o::before { background: var(--orange); } .m-legend .r::before { background: var(--red); }
.m-alert { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--red-bg); color: var(--red); }
.m-alert > span:not(.pill) { flex: 1; min-width: 0; }
.m-alert b { display: block; color: var(--text); font-weight: 600; }
.m-alert small { color: var(--text-2); }
.m-aging { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; }
.m-aging i { background: var(--accent); transform-origin: 0 50%; }
.m-aging i.o { background: var(--orange); } .m-aging i.r { background: var(--red); }
.m-due li { gap: 12px; }
.m-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.m-lv { min-width: 82px; text-align: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.m-lv.o { background: var(--orange-bg); color: var(--orange); } .m-lv.r { background: var(--red-bg); color: var(--red); }
.m-date { width: 42px; flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.m-warn-ic { width: 18px; height: 18px; stroke-width: 2; color: var(--orange); }
.m-letter { border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; background: var(--surface);
  box-shadow: 0 12px 26px -16px rgba(16, 24, 40, .3); }
.m-letter-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.m-letter-h b { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-letter p { font-size: 12.5px; color: var(--text-2); }
.m-bank { display: flex; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--orange-bg); color: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 28%, transparent); }
.m-bank > .i { margin-top: 1px; }
.m-bank b { display: block; color: var(--text); font-weight: 650; }
.m-bank small { color: var(--text-2); font-size: 12px; }
.m-iban { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.m-iban span:last-child { color: var(--orange); font-weight: 650; }
.m-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px; color: var(--text-2); }
.m-total b { color: var(--text); font-variant-numeric: tabular-nums; }
.m-chat { gap: 10px; }
.m-q { align-self: flex-end; max-width: 80%; background: var(--accent-fill); color: #fff; padding: 8px 13px; border-radius: 14px 14px 4px 14px; }
.m-typing { position: relative; height: 0; }
.m-typing .flash { position: absolute; left: 0; top: 0; display: flex; gap: 4px; padding: 12px 13px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.m-typing b { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.play .m-typing b { animation: dot .45s ease-in-out .8s 4 alternate both; }
.play .m-typing b:nth-child(2) { animation-delay: .95s; } .play .m-typing b:nth-child(3) { animation-delay: 1.1s; }
@keyframes dot { to { transform: translateY(-3px); } }
.m-ans { max-width: 94%; background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: 10px 13px; display: flex; flex-direction: column; gap: 6px; }
.m-ans ul { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; background: var(--surface); border-radius: 8px; padding: 6px 10px; }
.m-ans li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.m-ans li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-ans li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.m-input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; color: var(--text-3); }
.m-input .i { width: 28px; height: 28px; padding: 6px; border-radius: 7px; background: var(--accent-fill); color: #fff; stroke-width: 2.6; }
/* one line per label in every language where the tour has room (from 960 px): at least 82 px, as wide as the longest */
.tour.tabs .m-grid { grid-template-columns: minmax(82px, max-content) repeat(8, minmax(0, 1fr)); gap: 12px 6px; padding: 16px; }
.tour.tabs .m-grid i { width: 28px; height: 28px; border-radius: 7px; }
.tour.tabs .m-grid i::after { inset: 7px; }
/* Belege: phone scan detail */
.m-up { display: flex; gap: 10px; }
.m-up .m-drop { flex: 1; min-width: 0; }
.m-drop > span { min-width: 0; }
.m-phone { position: relative; flex: none; width: 46px; padding: 6px 5px 11px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); }
.m-phone::after { content: ""; position: absolute; left: calc(50% - 2.5px); bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.m-pg { position: relative; display: block; height: 100%; border-radius: 3px; overflow: hidden;
  background: repeating-linear-gradient(var(--line) 0 1.5px, transparent 1.5px 6px) 5px 6px / calc(100% - 10px) calc(100% - 10px) no-repeat, var(--surface-2); }
.m-pg .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 6px var(--accent); opacity: 0; }
.play .m-pg .scan { animation: a-scan 1s ease-in-out calc(var(--d) * 1s) both; }
@keyframes a-scan { 0% { opacity: 0; transform: none; } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
.m-phone b { position: absolute; top: -7px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--accent-fill); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
/* Zahlungen */
.m-acct { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.m-acct small:first-child { font-size: 10.5px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; font-feature-settings: "case"; }
.m-acct .m-amt { font-size: 15px; }
.m-acct small { white-space: normal; }
.m-box { width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--accent-fill); color: #fff; display: grid; place-items: center; }
.m-box .i { width: 14px; height: 14px; stroke-width: 3; }
.m-pay .m-warn-ic { flex: none; }
.m-pay .warnrow small { color: var(--orange); }
.m-run { flex-wrap: wrap; }
.m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface-2); font-size: 12px; font-weight: 600; }
.m-chip .i { width: 16px; height: 16px; stroke-width: 2.1; color: var(--accent); }
.m-foot b { color: var(--text-2); font-weight: 650; }
/* Berichte */
.m-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.m-check .i { width: 18px; height: 18px; stroke-width: 2.6; }
.m-check b { flex: 1; min-width: 0; color: var(--text); font-weight: 600; }
.m-check span { font-size: 12px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .m-drop { gap: 10px; padding: 10px 12px; }
  .m-drop :is(b, small) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-tab { font-size: 11.5px; }
}

.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps::after { content: ""; position: absolute; top: -1px; left: 41px; z-index: 1; pointer-events: none;
  width: calc((100% - 48px) * 2 / 3 + 48px); height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 45%, var(--line)); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease) .75s; }
.rv .steps:not(.in)::after { transform: scaleX(0); }
.step { position: relative; padding: 32px 24px 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 24px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent-fill); color: #fff; font-weight: 700;
  display: grid; place-items: center; font-size: 15px; box-shadow: 0 0 0 5px var(--surface);
  transition: opacity .35s var(--ease) var(--nd, .75s), transform .5s var(--ease-back) var(--nd, .75s); }
.step:nth-child(2) { --nd: 1.25s; } .step:nth-child(3) { --nd: 1.75s; }
.rv .steps:not(.in) .step::before { opacity: 0; transform: scale(.5); }
.step h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 4px 0 8px; }
.step p { color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.55; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split .sec-head { margin-bottom: 32px; }
.checks { list-style: none; display: grid; gap: 24px; }
.checks li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.checks > :nth-child(2) { --sd: .3s; } .checks > :nth-child(3) { --sd: .6s; } .checks > :nth-child(4) { --sd: .9s; }
.checks li .ic { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; transition: transform .45s var(--ease-back) calc(var(--sd, 0s) + .15s); }
.checks .ic .i { width: 18px; height: 18px; stroke-width: 2; }
.checks .ic path { transition: stroke-dashoffset .5s var(--ease) calc(var(--sd, 0s) + .3s), opacity .1s linear calc(var(--sd, 0s) + .3s); }
.rv .checks:not(.in) .ic { transform: scale(.6); }
.rv .checks:not(.in) .ic path { stroke-dashoffset: 1; opacity: 0; }
.checks b { display: block; font-size: var(--fs-base); font-weight: 600; }
.checks span { color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.55; }
.approve { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 22px; }
.approve .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-bottom: 14px; }
.approve .head b { font-size: 15px; }
.approve .head .pill { font-size: 12px; padding: 3px 10px; }
.approve table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.approve td { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.approve td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.approve .why { margin-top: 12px; font-size: 13px; color: var(--text-2); background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.approve .btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.approve .btn.primary::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); opacity: 0; }
.rv .approve.in .btn.primary::before { animation: a-ring 1.6s var(--ease) 1.6s both; }

.audience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aud { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; background: var(--surface); }
.aud .ic { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.aud .ic .i { width: 22px; height: 22px; stroke-width: 1.64; }
.aud b { display: block; font-size: var(--fs-base); font-weight: 600; margin: 16px 0 4px; }
.aud > span:last-child { color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.55; }
section.alt .aud { background: var(--bg); }

.faq { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.faq summary, .faq p { overflow-wrap: break-word; hyphens: auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 24px; transition: border-color .25s; }
section.alt .faq details { background: var(--bg); }
.faq details[open]:not(.closing) { border-color: var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: var(--fs-base);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: var(--r-sm); transition: color .2s; }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.pm { position: relative; width: 20px; height: 20px; flex: none; color: var(--text-3); transition: transform .4s var(--ease), color .25s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -.75px;
  border-radius: 2px; background: currentColor; transition: transform .4s var(--ease); }
.pm::after { transform: rotate(90deg); }
.faq details[open]:not(.closing) .pm { transform: rotate(180deg); color: var(--accent); }
.faq details[open]:not(.closing) .pm::after { transform: rotate(0deg); }
.faq .ans { overflow: hidden; }
.faq .ans p { color: var(--text-2); padding-bottom: 20px; font-size: var(--fs-body-sm); line-height: 1.55; max-width: 65ch; text-wrap: pretty; }

.interval { display: flex; justify-content: center; align-items: center; gap: 12px; margin: -24px 0 32px; flex-wrap: wrap; }
/* same neutral selected state as the language chips: the accent stays for CTAs and links */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--text); box-shadow: none; transition: transform .45s var(--ease); }
.seg[data-on="yearly"]::before { transform: translateX(100%); }
.seg button { position: relative; height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-2); font: 600 14px var(--font); cursor: pointer; transition: color .3s; }
.seg button.on { color: var(--bg); }
.interval .save { font-size: var(--fs-xs); font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; }
.interval .save:empty { display: none; }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: stretch; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; box-shadow: var(--shadow); }
.price-card.hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.price-card .badge { position: absolute; top: -12px; left: 22px; background: var(--accent-fill); color: #fff; font-size: 12px;
  font-weight: 700; padding: 3px 10px; border-radius: 999px; }
/* titles sit on the tagline, so «Solo» and a two-line title start their cards alike */
.price-card h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; align-self: end; text-wrap: balance; }
.price-card .tag { color: var(--text-2); font-size: var(--fs-sm); min-height: 44px; margin: 4px 0 12px; }
.price-card .amount { font-family: var(--font-display); font-size: 36px; font-weight: var(--fw-display); letter-spacing: -.02em; line-height: 1.1; }
.price-card .amount small { font-size: var(--fs-body-sm); font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.price-card .amount .per { font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); letter-spacing: 0; margin-left: 4px; }
/* the contact card has no price: its line is text, not a figure */
.price-card .amount.text { font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0; align-self: end; }
.num { display: inline-grid; clip-path: inset(0 -4px); font-variant-numeric: tabular-nums; }
.num > span { grid-area: 1 / 1; }
.price-card .billed { font-size: var(--fs-sm); color: var(--text-3); margin: 4px 0 16px; min-height: 20px; }
.ticks { list-style: none; display: grid; gap: 8px; margin-bottom: 24px; font-size: var(--fs-sm); color: var(--text-2); }
.ticks li { display: flex; gap: 8px; align-items: baseline; }
.ticks li::before { color: var(--accent); transform: translateY(2px); }
.price-card .btn { align-self: end; }
/* «In jedem Plan»: one quiet checklist panel, not a row of pills */
.included { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 24px;
  max-width: 880px; margin: 32px auto 0; padding: 20px 24px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); font-size: var(--fs-sm); color: var(--text-2); }
.included b { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 600; color: var(--text); }
.included span { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; }
.included span::before { width: 12px; height: 12px; color: var(--accent); }
.price-note { text-align: center; color: var(--text-3); font-size: var(--fs-sm); margin-top: 16px; }

.final { padding: var(--section) 0; }
.final .box { background: var(--accent-fill); color: #fff; border-radius: var(--r-lg); padding: 64px 48px; text-align: center;
  position: relative; overflow: hidden; isolation: isolate; }
.final h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); line-height: 1.15;
  letter-spacing: -.02em; margin-bottom: 12px; text-wrap: balance; }
.final p { font-size: var(--fs-lg); margin-bottom: 24px; }
.final .btn { background: #fff; color: #0f3f80; border-color: #fff; margin: 4px; }
.final .btn:hover { background: #f0f5fd; }
.final .btn.outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.final .btn.outline:hover { background: rgba(255, 255, 255, .1); }
/* the accent ring disappears on the accent fill: white on the blue CTA box and the auth panel */
.final .box :focus-visible, .auth .brandside :focus-visible { outline-color: #fff; }

footer.site { border-top: 1px solid var(--line); padding: 40px 0 48px; color: var(--text-3); font-size: var(--fs-sm); }
footer.site .container { display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; align-items: center; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
/* the homepage: logo and links together, the country and language switch (one group) at the end of the row;
   the other pages have no switch in the footer (/kontakt carries its own in the header), and their links stay
   on the right edge */
footer.site nav:has(+ .footer-switch) { margin-right: auto; }
.footer-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
footer.site a { color: var(--text-2); }
footer.site .copy { margin-top: 6px; }

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth .brandside { background: var(--accent-fill); color: #fff; padding: 44px 56px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden; isolation: isolate; }
.auth .brandside .logo { color: #fff; }
.auth .brandside .logo { --logo-accent: #bcd8ff; }
.auth .brandside h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: var(--fw-display); line-height: 1.15;
  letter-spacing: -.02em; margin-bottom: 16px; max-width: 460px; text-wrap: balance; }
.auth .brandside ul { list-style: none; display: grid; gap: 12px; max-width: 460px; }
.auth .brandside li { display: flex; gap: 10px; align-items: baseline; opacity: .95; }
.auth .brandside li::before { width: 16px; height: 16px; transform: translateY(3px); }
.auth .brandside small { opacity: .75; }
.auth .brandside .pitch > * { animation: up .7s var(--ease) both; }
.auth .brandside li { animation: up .6s var(--ease) both; }
.auth .brandside li:nth-child(1) { animation-delay: .15s; } .auth .brandside li:nth-child(2) { animation-delay: .22s; }
.auth .brandside li:nth-child(3) { animation-delay: .29s; } .auth .brandside li:nth-child(4) { animation-delay: .36s; }
/* #30 (B3-POLITUR §8.1): on /registrieren the form is several screens long and the blue side stretched over all of
   it, its pitch at the foot of the first screen. One screen high and sticky at the top of its column, it stays in
   view; /login (one screen) looks as before. Only where the side is shown (it is hidden up to 980 px) and where a
   screen holds its content — on a lower one it grows with the form as before, so nothing is cut off. */
@media (min-width: 981px) and (min-height: 600px) {
  .auth .brandside { position: sticky; top: 0; height: 100vh; align-self: start; }
}
.auth .formside { display: grid; grid-template-rows: auto 1fr; place-items: center; padding: 40px 20px; background: var(--surface); }
/* the form keeps the centred row when the switch is gone (the second-factor steps, auth.js showForm) */
.auth .formside > form { grid-row: 2; }
.auth form, .auth .panel { width: 100%; max-width: 420px; animation: up .6s var(--ease) .05s both; }
.auth h1 { font-family: var(--font-display); font-size: 30px; font-weight: var(--fw-display); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.auth .sub { color: var(--text-2); margin: 6px 0 26px; }
[hidden] { display: none !important; }
.field { display: block; margin-bottom: 16px; }
/* the caption of a field: a span inside <label class="field">, or the <label for> of a <div class="field"> that also
   holds a show/hide button or a hint (auth.html, static finding public[9]) */
.field > span, .field > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.field input, .field select { width: 100%; height: 46px; border-radius: var(--r-sm); border: 1px solid var(--field-line);
  background: var(--surface); color: var(--text); font: 16px var(--font); padding: 0 14px;
  transition: border-color .15s, box-shadow .2s var(--ease); }
.field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--field-line)); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pw { position: relative; }
/* room for the widest show/hide label: Italian «Nascondere» is 100 px, 5 px from the edge (static finding public[18]) */
.pw input { padding-right: 112px; }
.pw button { position: absolute; right: 5px; top: 5px; height: 36px; padding: 0 12px; border: 0; background: transparent;
  color: var(--accent); font: 600 13px var(--font); cursor: pointer; border-radius: var(--r-sm); transition: background-color .15s; }
.pw button:hover { background: var(--accent-soft); }
.meter { height: 5px; border-radius: 999px; background: var(--surface-2); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--red); transition: width .3s var(--ease), background .2s; }
.hint { font-size: 13px; color: var(--text-3); margin-top: 6px; }
/* F18: «Bitte beachten Sie besonders» — the highlighted clauses in full before the consent, scrollable, with a box
   of their own below (auth.html; the dashboard's copy lives in styles.css) */
.hl-box { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); padding: 12px 14px;
  margin: 8px 0 10px; }
.hl-box h2 { font: 700 15px/1.3 var(--font); letter-spacing: 0; margin: 0 0 4px; color: var(--text); }
.hl-box .hint { margin: 0 0 8px; }
.hl-clauses { max-height: 240px; overflow: auto; font-size: 13px; line-height: 1.5; color: var(--text-2);
  padding-right: 6px; overflow-wrap: anywhere; }
.hl-clauses:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hl-clauses h4 { font-size: 13px; font-weight: 700; color: var(--text); margin: 10px 0 4px; }
.hl-clauses section:first-child h4 { margin-top: 0; }
.hl-clauses p, .hl-clauses ul { margin: 0 0 6px; }
.hl-clauses ul { padding-left: 18px; }
/* F3: Impressum, AGB and Datenschutz one click away from every account page */
.auth .formside > .auth-legal { grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  margin-top: 24px; font-size: 13px; }
.auth-legal a { color: var(--text-3); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); margin: 4px 0 18px; }
/* a group of radio answers on the sign-up (F15): the question as its legend, the answers close together */
.choice { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.choice legend { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; padding: 0; }
.choice .check { margin: 2px 0 8px; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -4px 0 18px; }
.between .check { margin: 0; }
/* the sign-in has no «Angemeldet bleiben» any more (F21): «Passwort vergessen?» keeps its place on the right */
.between > a:only-child { margin-left: auto; }
.auth .btn.primary { width: 100%; min-height: 48px; font-size: var(--fs-base); }
.alt-link { text-align: center; margin-top: 22px; color: var(--text-2); font-size: 15px; }
.msg { border-radius: var(--r-sm); padding: 11px 14px; font-size: 14.5px; margin-bottom: 16px; display: none; }
.msg.on { display: block; animation: up .35s var(--ease) both; }
.msg.error { background: var(--red-bg); color: var(--red); }
.msg.info { background: var(--accent-soft); color: var(--accent-ink); }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; font-size: 14px; color: var(--text-2); }
.back .i { width: 16px; height: 16px; stroke-width: 2.25; transition: transform .25s var(--ease); }
.back:hover { color: var(--text); text-decoration: none; }
.back:hover .i { transform: translateX(-3px); }

.msg.ok { background: var(--green-bg); color: var(--green); }
.field > span i { font-style: normal; font-weight: 400; color: var(--text-3); }

/* contact form (/kontakt) — same controls as the sign-in forms, one column */
.contact { padding: 56px 0 80px; }
.contact .container { max-width: 620px; }
.contact .container > * { animation: up .6s var(--ease) both; }
.contact h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.contact .sub { color: var(--text-2); margin: 10px 0 28px; }
.cform { display: block; }
.cform .field { margin: 20px 0 6px; }
.cform > .field:first-child { margin-top: 0; }
.cform input:not([type="checkbox"]), .cform textarea { width: 100%; border-radius: var(--r-sm);
  border: 1px solid var(--field-line); background: var(--surface); color: var(--text);
  font: 16px var(--font); padding: 12px 14px; transition: border-color .15s, box-shadow .2s var(--ease); }
.cform input:not([type="checkbox"]) { height: 46px; padding: 0 14px; }
.cform textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.cform input:not([type="checkbox"]):hover, .cform textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--field-line)); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cform [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-bg); }
.cform .err { color: var(--red); font-size: 13.5px; margin: 6px 0 0; }
.cform .hint { margin-bottom: 14px; }
.cform .err + .hint, .cform .hint + .err { margin-top: 4px; }
.cform > .err:not([hidden]) { margin-bottom: 12px; }
.cform > input, .cform > textarea, .cform .row2 { margin-bottom: 4px; }
.cform .check { margin: 18px 0 8px; align-items: flex-start; }
.cform .check input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--accent); }
.cform .check span { flex: 1; }
.cform .check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 3px; box-shadow: none; }
.cform .btn.primary { width: 100%; }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact .msg.ok { display: block; font-size: 16px; padding: 16px 18px; }
@media (max-width: 560px) { .contact { padding: 40px 0 64px; } .cform .row2 { grid-template-columns: 1fr; } }

/* «Hilfe & Support» (/hilfe, dashboard/hilfe.html) — the order of a help centre: the search first, the topics
   as chips, three cards for the help inside Calio, the questions per topic (the homepage's .faq accordion),
   «Schnell zur Antwort», and the way to a person at the end. Same tokens as the rest of the site. */
.help-hero { position: relative; padding: 64px 0 40px; text-align: center; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, var(--bg)) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line); }
.help-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
.help-hero .eyebrow { margin-bottom: 12px; }
.help-hero h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-display); line-height: 1.08;
  letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.help-hero .lead { max-width: 36em; margin: 0 auto; color: var(--text-2); font-size: var(--fs-lg); line-height: 1.55; text-wrap: pretty; }
.hsearch { position: relative; max-width: 680px; margin: 28px auto 0; }
.hsearch > .i { position: absolute; left: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--text-3);
  pointer-events: none; }
.hsearch input { width: 100%; height: 60px; padding: 0 22px 0 56px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font: 17px var(--font); box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .2s var(--ease); -webkit-appearance: none; appearance: none; }
.hsearch input::placeholder { color: var(--text-3); }
.hsearch input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
.hsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.hsearch input::-webkit-search-cancel-button { cursor: pointer; }
.hsearch-status { min-height: 1.5em; margin: 10px auto 0; font-size: var(--fs-sm); color: var(--text-2); }
.hsearch-status:empty { min-height: 0; margin: 0; }
.hchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: 24px auto 0; }
.hchips a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 11px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.25; box-shadow: var(--shadow-sm);
  transition: border-color .15s, color .15s, transform .15s var(--ease); }
.hchips a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); text-decoration: none; }
.hchips .i { width: 16px; height: 16px; stroke-width: 2; color: var(--accent); }
.help-block { padding: 48px 0; }
.help-h2 { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
  font-weight: var(--fw-display); letter-spacing: -.015em; line-height: 1.2; margin: 0 0 20px; }
.help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.help-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hcard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.hcard-ic, .htopic-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent); }
.hcard-ic .i { width: 22px; height: 22px; stroke-width: 1.7; }
.hcard h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin-top: 4px; }
.hcard p { color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.55; text-wrap: pretty; }
.hcard-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; min-height: 32px;
  font-weight: 600; font-size: var(--fs-sm); }
.hcard-link .i { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .2s var(--ease); }
.hcard-link:hover { text-decoration: none; }
.hcard-link:hover .i { transform: translateX(3px); }
.help-topics { padding: 8px 0 64px; }
/* the topics as cards, two per row — the questions inside each card as one accordion (the homepage's .faq,
   drawn as rows): a long page reads as a set of drawers, like the article lists of a help centre */
.htopics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 8px; }
.htopic { padding: 22px 24px 8px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-sm); scroll-margin-top: 84px; }
.htopic .help-h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }
.htopic-ic { width: 36px; height: 36px; }
.htopic-ic .i { width: 19px; height: 19px; stroke-width: 1.8; }
.help .faq { max-width: none; margin: 0; gap: 0; }
.help .htopic .faq details { padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.help .htopic .faq details:first-child { border-top: 0; }
.help .htopic .faq summary { padding: 14px 0; font-size: var(--fs-body-sm); line-height: 1.4; }
.help .htopic .faq .ans p { padding-bottom: 14px; }
.help .faq .ans p + p { margin-top: -6px; }
.help-empty { margin: 32px 0 12px; padding: 20px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r);
  background: var(--surface); color: var(--text-2); }
.help-quick { background: var(--surface); border-block: 1px solid var(--line); }
.help-quick .hcard { background: var(--bg); box-shadow: none; }
.help-contact { padding: 64px 0 80px; }
.hcontact { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px; padding: 40px;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.hcontact h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
.hcontact-main > p { color: var(--text-2); font-size: var(--fs-lg); line-height: 1.55; max-width: 40em; }
.hcontact h3 { font-size: var(--fs-base); font-weight: 600; margin: 28px 0 10px; }
.htopics-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.htopics-pick .btn { border-radius: 999px; font-weight: 500; }
.hprep { list-style: none; display: grid; gap: 8px; margin: 0 0 28px; color: var(--text-2); font-size: var(--fs-body-sm); }
.hprep li { display: flex; gap: 10px; align-items: baseline; }
.hprep li::before { content: ""; display: inline-block; width: 14px; height: 14px; flex: none; background: var(--accent);
  transform: translateY(2px); -webkit-mask: var(--ck) center / contain no-repeat; mask: var(--ck) center / contain no-repeat; }
.hsafe { align-self: start; display: grid; gap: 10px; padding: 24px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--text-2); font-size: var(--fs-body-sm); line-height: 1.55; }
.hsafe .hcard-ic { background: var(--surface); }
.hsafe h3 { margin: 4px 0 0; color: var(--accent-ink); }
html.hsearching .help-cards-block, html.hsearching .hchips, html.hsearching .help-quick { display: none; }
@media (max-width: 900px) {
  .help-cards { grid-template-columns: minmax(0, 1fr); }
  .help-cards.two { grid-template-columns: minmax(0, 1fr); }
  .htopics { grid-template-columns: minmax(0, 1fr); }
  .hcontact { grid-template-columns: minmax(0, 1fr); padding: 28px; }
}
@media (max-width: 640px) {
  .help-hero { padding: 36px 0 28px; }
  .help-hero .lead { font-size: var(--fs-base); }
  .hsearch { margin-top: 22px; }
  .hsearch input { height: 54px; font-size: 16px; padding-left: 50px; }
  .hsearch > .i { left: 18px; }
  /* the ten topics in one row that scrolls sideways — inside its own box, never the page */
  .hchips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 20px -16px 0; padding: 2px 16px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 16px; }
  .hchips::-webkit-scrollbar { display: none; }
  .hchips a { flex: none; min-height: 44px; white-space: nowrap; }
  .help-block { padding: 36px 0; }
  /* a card in one row on a phone: the icon beside the title, the text and the link below */
  .hcard { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 18px; }
  .hcard > :not(.hcard-ic):not(h3) { grid-column: 1 / -1; }
  .hcard .hcard-ic { width: 40px; height: 40px; }
  .hcard h3 { margin: 0; }
  .htopics { gap: 14px; }
  .htopic { padding: 18px 18px 4px; }
  .help-contact { padding: 40px 0 56px; }
  .hcontact { padding: 22px 18px; gap: 24px; }
  .htopics-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htopics-pick .btn { min-height: 44px; padding-inline: 10px; font-size: 13px; }
  .hsafe .hcard-ic { width: 40px; height: 40px; }
}

/* the two Swiss badges (dashboard/site_i18n.py trust): «Entwickelt in der Schweiz» with the Swiss flag, and
   «Daten gespeichert in der Schweiz» with its line — in the footer of every public page, under the prices and
   under the account forms. Our own design in the site's style: a light card, the site's type, a red square. */
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.tb { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 9px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; line-height: 1.35;
  box-shadow: var(--shadow-sm); text-align: left; }
.tb-flag { flex: none; width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.tb-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; }
.tb-t { font-weight: 600; }
.tb-data { align-items: flex-start; }
.tb-data .tb-ic { margin-top: 1px; }
.tb-x { display: grid; gap: 2px; min-width: 0; }
.tb-l { max-width: 44em; color: var(--text-3); font-size: 12px; line-height: 1.45; text-wrap: pretty; }
.tb-l a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
footer.site .trust { flex-basis: 100%; margin-top: 4px; }
.price-trust { display: flex; justify-content: center; margin-top: 28px; }
.price-trust .trust { justify-content: center; }
.auth .formside > .auth-trust { grid-row: 4; max-width: 520px; margin-top: 20px; }
.auth-trust .trust { justify-content: center; }
@media (max-width: 640px) {
  .tb { width: 100%; }
}

.legal { padding: 64px 0 80px; }
.legal .container { max-width: 720px; }
.legal .container > * { animation: up .6s var(--ease) both; }
.legal .container > :nth-child(2) { animation-delay: .06s; } .legal .container > :nth-child(3) { animation-delay: .12s; }
.legal h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; text-wrap: balance; }
.legal .note { background: var(--orange-bg); color: var(--orange); border-radius: var(--r-sm); padding: 14px 16px; margin: 20px 0; }
.legal p { color: var(--text-2); margin-bottom: 12px; }
.legal-body h2 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; margin: 32px 0 12px; color: var(--text); }
.legal-body ul { margin: 0 0 14px 22px; color: var(--text-2); }
.legal-body li { margin-bottom: 6px; }
.legal-body b { color: var(--text); }
/* #28: 1 px on each side — a wider right padding read as a space before the comma that follows «[fehlt: …]» */
.legal-body mark.gap { background: var(--orange-bg); color: var(--orange); border-radius: calc(var(--r-sm) / 2); padding: 0 1px; font-weight: 600; }
.legal-body .stand { margin-top: 30px; font-size: 14px; color: var(--text-3); }

@media (min-width: 700px) {
  .tour:not(.tabs) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
}
@media (min-width: 641px) and (max-width: 1000px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the two-column hero from 981 to 1159 px leaves the window 406-487 px: three KPIs cut the Italian
   «Giustificativi aperti», so it shows two, as on the phone */
@media (min-width: 981px) and (max-width: 1159px) {
  .preview .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview .kpis .kpi:last-child { display: none; }
}
@media (max-width: 980px) {
  .hero .container, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .preview .float { left: 12px; bottom: -20px; }
  .preview .chip { right: 12px; }
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth .brandside { display: none; }
}
@media (max-width: 640px) {
  /* Keep the wordmark readable alongside both languages. A single row reduced it to
     37 px at 360 px; two rows leave every navigation target at least 44 px. */
  html { scroll-padding-top: 136px; }
  .nav .container { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    height: auto; gap: 8px; padding-block: 8px; }
  .nav .logo { justify-self: start; }
  .nav .actions, .nav .langsw + .actions { grid-column: 1 / -1; margin: 0;
    display: flex; gap: 8px; }
  /* two buttons share one phone row: each starts from its own label width (so «Essayer gratuitement» stays on one
     line from 360 px) and may wrap rather than push the page sideways at 320 px */
  .nav .actions .btn { flex: 1 1 auto; white-space: normal; }
  .nav .actions .btn { min-height: 44px; padding: 6px 16px; font-size: var(--fs-sm); }
  .countrysw a { min-width: 44px; min-height: 44px; }
  .langsw summary { height: 44px; min-width: 44px; padding: 0 10px 0 8px; }
  .langsw .fl { width: 24px; height: 24px; }
  .langsw .langlist a { min-height: 44px; }
  .auth-langs { margin: -28px -12px 0 0; }
  .hero { padding-top: 36px; }
  /* a little tighter on phones (close to the old -1 px of the final question), so the Italian accent line and the
     French final question keep their lines at 375 px */
  .hero h1, .final h2 { letter-spacing: -.035em; }
  .hero .lead { font-size: var(--fs-lg); }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn.ghost { align-self: center; margin-inline-start: 0; }
  /* four facts in two columns instead of a ragged centred wrap */
  .strip ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; justify-items: start; text-align: left; }
  .strip li { align-items: flex-start; }
  .strip li::before { transform: translateY(3px); }
  .steps, .audience { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 32px; }
  .steps::after { display: none; }
  .preview .body { grid-template-columns: minmax(0, 1fr); }
  .preview .side { display: none; }
  .preview .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview .kpis .kpi:last-child { display: none; }
  .preview .chip { top: 52px; right: 8px; }
  .row2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .final .box { padding: 40px 24px; }
  .final .btn { width: 100%; max-width: 320px; }
  .seg button { height: 44px; }
  .m-grid { grid-template-columns: 74px repeat(8, minmax(0, 1fr)); gap: 8px 2px; padding: 10px; }
  .m-grid > span { font-size: 11px; }
  .m-grid em { font-size: 10px; }
  .m-grid i { width: 20px; height: 20px; border-radius: 5px; }
  .m-grid i::after { inset: 4px; }
  .m-lv { min-width: 0; }
  .m-tab :is(th, td) { padding: 7px 8px; }
  .m-tab :is(th, td):not(:first-child) { width: 28%; }
  .m-due .m-name small { display: none; }
  /* «1st dunning notice» (the dashboard's English) is wider than «1st reminder» was: on a phone the customer
     and the draft letter's title take a second line instead of being cut («Muster Café …») */
  .m-due .m-name b, .m-letter-h b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  /* a sample card's head may take a second line instead of being cut («Échéances des 30 prochains jo…» on /fr);
     the small label beside it keeps its width */
  .m-top b { white-space: normal; overflow: visible; text-overflow: clip; }
  .m-top > span:not(.pill) { flex: none; }
  .m-btns { flex-wrap: wrap; }
  footer.site nav { gap: 0 4px; margin-left: -10px; }
  footer.site nav a { display: inline-block; padding: 11px 10px; }
  .pw input { height: 48px; }
  .pw button { top: 2px; right: 2px; height: 44px; }
  .back, .between a { display: inline-flex; align-items: center; min-height: 44px; }
  .back { margin-bottom: 14px; }
  .between { flex-wrap: wrap; }
  .check { min-height: 44px; align-items: center; }
  .legal { overflow-wrap: anywhere; }
  /* «Geschäftsbedingungen» ist bei 36 px breiter als ein Telefon (374 von 350 px, Durchgang
     calio.ch 25.09.2026): kleiner, damit das Wort ganz bleibt, und Silbentrennung als Rückfall */
  .legal h1 { font-size: 30px; hyphens: auto; }
  /* standalone links only: a link inside a sentence keeps the sentence flow (WCAG 2.5.8 exempts it) */
  .alt-link a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
/* the narrowest phones: the customer's name takes the whole first line (amount and badge below it), and a sample
   card's head and the small label beside it may share two lines (acceptance check, 320 px) */
@media (max-width: 360px) {
  .m-due li:not(:has(.m-date)) { flex-wrap: wrap; }
  .m-due li:not(:has(.m-date)) .m-name { flex-basis: 100%; }
  .m-top { flex-wrap: wrap; }
}
/* narrow phones: each report row stacks, name on top, both figures aligned below */
@media (max-width: 420px) {
  .m-rep, .m-rep :is(thead, tbody) { display: block; }
  .m-rep tr { display: grid; grid-template-columns: minmax(0, 1fr) 7.6em 7.6em; border-bottom: 1px solid var(--line); }
  .m-rep tbody tr:last-child { border-bottom: 0; }
  .m-tab.m-rep :is(th, td) { width: auto; max-width: none; border: 0; }
  .m-rep .sum { border-top: 1px solid var(--line-strong); }
  .m-rep td:first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .m-rep td:nth-child(2) { grid-column: 2; }
  .m-rep td:nth-child(3) { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}