/* SaentisAnalytica — marketing site
   Swiss minimalism: restrained palette, generous whitespace, no decoration for its
   own sake. Deliberately self-contained — no webfonts, no CDNs, no trackers, so a
   visitor's browser contacts nobody but us. That is the argument the site makes;
   it should also be true of the site. */

:root {
  --navy:        #1B3A6B;   /* from the logo */
  --navy-deep:   #16293B;   /* product text colour */
  --blue:        #2E6FB0;   /* product primary */
  --blue-soft:   #E7F0F9;
  --green:       #4F9D69;
  --ink:         #1F2A33;
  --ink-muted:   #5B6B7A;
  --rule:        #E2E8EE;
  --bg:          #FFFFFF;
  --bg-alt:      #F4F7F9;

  --wrap: 1080px;
  --step: clamp(1.5rem, 4vw, 3rem);
  --radius: 4px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear the sticky header, or a jump lands under it. */
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 720px); }

h1, h2, h3 { color: var(--navy-deep); line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.15rem); font-weight: 600; margin-bottom: 1.25rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: 1.075rem; font-weight: 600; margin-bottom: .5rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--blue); }

.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: .85rem;
}
.eyebrow-light { color: #9DB4C8; }

.lead, .section-lead {
  font-size: 1.13rem; color: var(--ink-muted); max-width: 62ch; margin-bottom: 1.75rem;
}
.section-note { font-size: .95rem; color: var(--ink-muted); margin-top: 2rem; }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Sticky, because full-viewport sections make the page long and the nav is the
   only way back to the CTA without scrolling. */
/* Solid white, no backdrop-filter. A blurred backdrop composites this element's
   children into their own layer, and WebKit resamples that layer — which turned
   the striped bar in the logo into a solid smear. Not worth a frosted-glass
   effect. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .6rem;
}
.brand img { display: block; height: clamp(64px, 8vw, 96px); width: auto; }
.nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.nav a { color: var(--ink-muted); text-decoration: none; font-size: .94rem; }
.nav a:hover { color: var(--navy); }
/* `.nav a` outranks `.btn`, which left the header button grey on navy. */
.nav a.btn, .nav a.btn:hover { color: #fff; }

/* Mobile menu: a <details> toggle, shown only below 640px (see the media
   query further down). No JavaScript needed to open it. */
.nav-mobile { display: none; }
.nav-mobile summary {
  list-style: none; cursor: pointer; padding: .5rem .25rem;
  color: var(--navy); font-weight: 500; font-size: .97rem;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; gap: .25rem;
  padding: .75rem 1.25rem 1.25rem;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 16px rgba(22, 41, 59, .08);
}
.nav-mobile-panel a { color: var(--ink); text-decoration: none; padding: .55rem 0; }
.nav-mobile-panel a.btn { color: #fff; text-align: center; margin-top: .5rem; padding: .7rem 1rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; background: var(--navy); color: #fff;
  padding: .8rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 500; font-size: .97rem;
  transition: background .15s ease;
}
.btn:hover { background: var(--blue); }
.btn-small { padding: .5rem 1rem; font-size: .9rem; }
.btn-large { padding: 1rem 2rem; font-size: 1.08rem; }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--rule); }
.btn-ghost:hover { background: var(--bg-alt); color: var(--navy); }

/* ── Sections ───────────────────────────────────────────────────────────────
   Sections size to their content. They used to be at least one viewport tall,
   which left the short ones (Für wen, Kontakt) as a screen of empty white —
   the first thing reviewers noticed.

   Three tones only, in a fixed rhythm — light, dark, grey, light, dark, grey,
   light. The dark sections land on the two places the page needs weight: the
   problem, and the sovereignty argument.                                      */

.section, .hero {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.section > .wrap, .hero > .wrap { width: min(100% - 2.5rem, var(--wrap)); }
.section > .wrap.narrow, .hero > .wrap.narrow { width: min(100% - 2.5rem, 720px); }

.tone-light { background: var(--bg); }
.tone-grey  { background: var(--bg-alt); }
.tone-dark  { background: var(--navy-deep); color: #C9D6E2; }

.tone-dark h2, .tone-dark h3 { color: #fff; }
.tone-dark .section-lead, .tone-dark .hero-note { color: #9DB4C8; }
.tone-dark .eyebrow { color: #7E97B0; }

/* Legacy aliases, kept so nothing silently loses its background. */
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--navy-deep); color: #C9D6E2; }
.section-dark h2 { color: #fff; }
.section-dark .section-lead { color: #9DB4C8; }
.hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
/* Same size as .section-note — both are small print under a block. */
.hero-note { font-size: .95rem; color: var(--ink-muted); margin: 0; }

/* ── Grid + cards ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-wide { gap: 1.5rem; }
/* Three feature cards side by side above 980px; two, then one, below —
   auto-fit alone would strand a lone card on its own row at awkward widths. */
@media (min-width: 980px) { .grid-3.grid-wide { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem; }
.card p:last-child { margin-bottom: 0; }
.section-alt .card { background: #fff; }
/* Narrower now that three sit side by side, so the padding comes in a little. */
.card-feature { padding: 1.75rem; display: flex; flex-direction: column; }
.card-feature .ticks { margin-top: auto; padding-top: .5rem; }
.card-dark { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.card-dark h3 { color: #fff; }
.card-dark p { color: #9DB4C8; margin-bottom: 0; }

/* Navy cards on a light section — carries the weight where the page would
   otherwise read as an unbroken field of white. */
.card-navy { background: var(--navy); border-color: var(--navy); padding: 1.9rem; }
.card-navy h3 { color: #fff; }
.card-navy p { color: #B9CBDD; margin-bottom: 0; }

/* Four problem tiles, locked to 2x2 rather than reflowing to 4-across. */
.grid-2x2 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2x2 { grid-template-columns: repeat(2, 1fr); } }

.icon { color: var(--blue); margin-bottom: 1rem; }
.icon svg { width: 40px; height: 40px; stroke-linecap: square; stroke-linejoin: miter; }
/* --blue is too dark to read on the navy sections; a lighter tint of it. */
.tone-dark .icon { color: #6FA3D8; }

/* ── Datenfluss-Skizze ──────────────────────────────────────────────────── */
.flow { margin: 0 0 2.5rem; }
/* No paper, no frame — the diagram sits straight on the section background. */
.flow-svg { display: block; width: 100%; height: auto; }
.flow figcaption {
  margin-top: .9rem; font-size: .95rem; color: var(--ink-muted); max-width: 62ch;
}

/* ── Lists ──────────────────────────────────────────────────────────────── */
.ticks, .crosses { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.ticks li, .crosses li {
  position: relative; padding-left: 1.6rem; margin-bottom: .6rem;
  /* 1rem, not 0.96 — these lists carry body copy and must match paragraphs.
     The "Für wen" section is built entirely from them, so any shortfall here
     made that whole section read a size smaller than the rest of the page. */
  font-size: 1rem; color: var(--ink-muted);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: .5rem; height: .28rem;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.crosses li::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--ink-muted);
}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 2.5rem 0 0; counter-reset: s; }
.steps li { display: flex; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.steps li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.step-no {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-soft); color: var(--navy);
  font-weight: 600; font-size: .98rem;
}
.steps p:last-child { margin-bottom: 0; }

/* ── Fit ────────────────────────────────────────────────────────────────── */
.fit { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2rem; }
/* Here the lists ARE the content, not supporting detail under a paragraph, so
   they take full body colour rather than the muted tone used inside cards. */
.fit .ticks li, .fit .crosses li { color: var(--ink); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
/* No border-top — the tonal change from grey to white already separates it. */
.section-cta { text-align: center; }
.section-cta .section-lead { margin-inline: auto; }
.contact-actions { margin: 2rem 0 1rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Legal pages (Impressum, Datenschutz) */
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }

.site-footer { background: var(--navy-deep); color: #9DB4C8; padding-block: 3rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.footer-logo { display: block; height: 48px; width: auto; margin-bottom: .75rem; }
.footer-line { max-width: 34ch; font-size: .94rem; margin: 0; }
.footer-meta { text-align: right; font-size: .94rem; }
.footer-meta p { margin: 0 0 .4rem; }
.footer-meta a { color: #C9D6E2; text-decoration: none; }
.footer-meta a:hover { color: #fff; text-decoration: underline; }
.muted { color: #6B8199; margin-top: 1rem !important; }

@media (max-width: 640px) {
  .footer-meta { text-align: left; }
  .nav { gap: 1rem; font-size: .9rem; }
  .nav-main { display: none; }
  .nav-mobile { display: block; }
  .steps li { gap: 1rem; }
}

/* ── Gründer ────────────────────────────────────────────────────────────── */
/* Photo beside the closing paragraph; stacks on narrow screens. */
.founder {
  display: flex; align-items: center; gap: 1.75rem;
  margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule);
}
.founder img {
  flex: 0 0 auto; width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
}
.founder p { margin: 0; }
@media (max-width: 640px) {
  .founder { flex-direction: column; align-items: flex-start; }
}