@charset "UTF-8";
/* ==========================================================================
   LogistiXpert — logistixpert.com
   Matthias Merz · Intralogistics consulting, technical due diligence,
   interim management.

   Self-hosted fonts (no third-party CDN calls — GDPR).
   No build step: this file is shipped as-is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/sourceserif4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/sourceserif4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand — sampled from the LogistiXpert mark */
  --brand: #2a4a9b;
  --brand-deep: #1d3570;
  --brand-lt: #3a87b4;
  --green: #8ac23a;
  --green-deep: #6da226;

  /* Neutrals */
  --ink: #0c1524;
  --ink-2: #14203a;
  --ink-3: #1d2c4a;
  --paper: #fbfaf8;
  --paper-2: #f2f1ec;
  --line: #e2e0d9;
  --line-dark: rgba(255, 255, 255, 0.13);

  --text: #17202f;
  --text-2: #4a5568;
  --text-3: #636c7e; /* was #737e91: 3.6–4.1:1, below WCAG AA on paper and tone */
  --on-ink: #eef1f6;
  --on-ink-2: #a9b5c8;
  --on-ink-3: #7c8aa2;

  /* Type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
  --step-1: clamp(1.16rem, 1.09rem + 0.34vw, 1.36rem);
  --step-2: clamp(1.38rem, 1.25rem + 0.62vw, 1.75rem);
  --step-3: clamp(1.66rem, 1.42rem + 1.15vw, 2.34rem);
  --step-4: clamp(2rem, 1.58rem + 2.03vw, 3.15rem);
  --step-5: clamp(2.4rem, 1.68rem + 3.4vw, 4.2rem);

  /* Layout */
  --measure: 68ch;
  --wrap: 1180px;
  --wrap-wide: 1320px;
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.75rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --radius: 3px;

  --shadow-sm: 0 1px 2px rgba(12, 21, 36, 0.06),
    0 4px 12px -6px rgba(12, 21, 36, 0.1);
  --shadow-md: 0 2px 4px rgba(12, 21, 36, 0.05),
    0 18px 40px -22px rgba(12, 21, 36, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.05em;
  text-wrap: pretty;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s var(--ease);
}
a:hover {
  color: var(--brand-deep);
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

strong {
  font-weight: 620;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand-lt);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--brand);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100%;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus {
  top: 0.75rem;
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide {
  max-width: var(--wrap-wide);
}
.wrap--narrow {
  max-width: 860px;
}

section[id] {
  scroll-margin-top: 5rem;
}

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: #fff;
}
.section--ink p {
  color: var(--on-ink-2);
}
.section--ink a {
  color: #cfe0f5;
}
.section--ink a:hover {
  color: #fff;
}

.section--tone {
  background: var(--paper-2);
}

.section--line {
  border-top: 1px solid var(--line);
}

/* Section heading block ---------------------------------------------------- */

.eyebrow {
  display: block;
  margin: 0 0 1.15rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.section--ink .eyebrow {
  color: var(--green);
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow--rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

.section-head {
  max-width: 44ch;
  margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}
.section-head--wide {
  max-width: 62ch;
}
.section-head h2 {
  font-size: var(--step-4);
}
.section-head .lede {
  margin-top: 1.15rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 56ch;
}
.section--ink .section-head .lede {
  color: var(--on-ink-2);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-2);
}

.grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.012em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--primary:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.btn--sm {
  padding: 0.62em 1.05em;
  font-size: 0.8rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.arrow-link::after {
  content: "→";
  transition: transform 0.2s var(--ease);
}
.arrow-link:hover::after {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 248, 0.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(251, 250, 248, 0.95);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.brand img {
  width: auto;
  height: 3.1rem;
}
@media (min-width: 48em) {
  .brand img {
    height: 3.7rem;
  }
}

.nav {
  margin-left: auto;
}
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2rem);
}
.nav a {
  position: relative;
  display: block;
  padding-block: 0.35rem;
  font-size: 0.875rem;
  font-weight: 520;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav a:hover,
.nav a[aria-current="true"] {
  color: var(--text);
}
.nav a:hover::after,
.nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.header-aside {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-switch a,
.lang-switch span {
  padding: 0.2rem 0.1rem;
  text-decoration: none;
  color: var(--text-3);
}
.lang-switch a:hover {
  color: var(--brand);
}
.lang-switch [aria-current="true"] {
  color: var(--text);
}
.lang-switch .sep {
  color: var(--line);
  padding: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
}
.nav-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Collapse to the hamburger below 64em (1024px). Raised from 60em when the
   primary nav grew to six items — the longer German labels
   ("Projektmanagement") overflowed in the 960–1024px band otherwise. At
   ≥1024px the full six-item nav fits in both languages. */
@media (max-width: 64em) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto;
    margin: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 1rem var(--gutter) 1.75rem;
    display: none;
  }
  .nav.is-open {
    display: block;
  }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav li + li {
    border-top: 1px solid var(--line);
  }
  .nav a {
    padding-block: 0.95rem;
    font-size: 1rem;
  }
  .nav a::after {
    display: none;
  }
  .header-aside .btn {
    display: none;
  }
  .header-aside {
    order: 3;
  }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center 46%;
  opacity: 0.22;
  filter: saturate(0.35);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      104deg,
      var(--ink) 0%,
      rgba(12, 21, 36, 0.94) 42%,
      rgba(12, 21, 36, 0.68) 72%,
      rgba(12, 21, 36, 0.8) 100%
    ),
    radial-gradient(
      120% 90% at 8% 0%,
      rgba(42, 74, 155, 0.42) 0%,
      transparent 62%
    );
}

.hero-inner {
  padding-block: clamp(3.75rem, 2rem + 8vw, 8.5rem);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 0.42rem 0.9rem 0.42rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0.03em;
  color: var(--on-ink-2);
}
.hero-tag .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.hero h1 {
  max-width: 19ch;
  font-size: var(--step-5);
  font-weight: 550;
  letter-spacing: -0.022em;
  color: #fff;
}
.hero h1 em {
  font-style: normal;
  color: var(--green);
}

.hero .hero-lede {
  max-width: 54ch;
  margin-top: 1.6rem;
  font-size: var(--step-1);
  line-height: 1.58;
  color: var(--on-ink-2);
}

.hero .btn-row {
  margin-top: 2.5rem;
}

.hero-meta {
  margin-top: 2.25rem;
  font-size: var(--step--1);
  color: var(--on-ink-3);
}
.hero-meta strong {
  color: var(--on-ink-2);
  font-weight: 560;
}

/* Promo card in the free right-hand area of the hero (VDA5050 training) */
.hero-promo {
  margin-top: 2.75rem;
  padding: 1.6rem 1.55rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}
.hero-promo .product-mark {
  margin-bottom: 1.2rem;
  padding: 0.7rem 0.95rem;
}
.hero-promo .product-mark img {
  height: 30px;
}
.hero-promo-eyebrow {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green);
}
.hero-promo-title {
  margin: 0.4rem 0 0;
  font-size: var(--step-2);
  font-weight: 550;
  line-height: 1.2;
  color: #fff;
}
.hero-promo-text {
  margin: 0.7rem 0 1.4rem;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--on-ink-2);
}

@media (min-width: 64em) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
  }
  .hero-promo {
    margin-top: 0;
  }
}

/* Credential strip under the hero */
.credbar {
  border-top: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.025);
}
.credbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem clamp(1.25rem, 0.5rem + 2.5vw, 2.75rem);
  padding-block: 1.4rem;
}
.credbar-label {
  font-size: 0.7rem;
  font-weight: 620;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-ink-3);
  margin-right: 0.35rem;
}
.credbar-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(1rem, 0.4rem + 2vw, 2.25rem);
}
.credbar-list li {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  font-size: var(--step-2);
  margin-bottom: 0.75rem;
}
.card p {
  color: var(--text-2);
  font-size: 0.97rem;
}

.section--ink .card {
  background: var(--ink-2);
  border-color: var(--line-dark);
  box-shadow: none;
}
.section--ink .card p {
  color: var(--on-ink-2);
}

.card-num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.section--ink .card-num {
  color: var(--green);
}

/* Numbered risk list (no card chrome — editorial) */
.risk-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}
.risk-list > li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1rem;
  padding-block: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border-bottom: 1px solid var(--line-dark);
  align-items: start;
}
@media (min-width: 52em) {
  .risk-list > li {
    grid-template-columns: 3.5rem minmax(0, 22rem) minmax(0, 1fr);
    gap: 0 clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
    align-items: baseline;
  }
}
.risk-list .n {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  padding-top: 0.2em;
}
.risk-list h3 {
  font-size: var(--step-2);
  color: #fff;
}
.risk-list p {
  grid-column: 2 / -1;
  margin-top: 0.6rem;
  color: var(--on-ink-2);
  max-width: 52ch;
}
@media (min-width: 52em) {
  .risk-list p {
    grid-column: 3;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   9. "Three sides of the table" — credibility columns
   -------------------------------------------------------------------------- */

.sides {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.side {
  position: relative;
  padding-top: 1.65rem;
  border-top: 3px solid var(--brand);
}
.side:nth-child(2) {
  border-top-color: var(--brand-lt);
}
.side:nth-child(3) {
  border-top-color: var(--green);
}
.side-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.7rem;
}
.side:nth-child(2) .side-kicker {
  color: var(--brand-lt);
}
.side:nth-child(3) .side-kicker {
  color: var(--green-deep);
}
.side h3 {
  font-size: var(--step-2);
}
.side .side-org {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 560;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-3);
}
.side p {
  margin-top: 1.1rem;
  font-size: 0.97rem;
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   9b. Stance — the independence statement
   -------------------------------------------------------------------------- */

/* Four items, so the columns are pinned to two rather than left to auto-fit —
   three columns would orphan the fourth on a row of its own. */
.stance {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46em) {
  .stance {
    grid-template-columns: 1fr 1fr;
  }
}
.stance > div {
  position: relative;
  padding-left: 1.75rem;
}
.stance > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--green);
  border-radius: 50%;
}
.stance h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 660;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.stance p {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--on-ink-2);
}

/* --------------------------------------------------------------------------
   10. Engagement models
   -------------------------------------------------------------------------- */

.packages {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: stretch;
}
.pkg {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pkg--feature {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.pkg-head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.pkg h3 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1.3;
  /* Reserve two lines so the duration lines up across all three packages
     regardless of how long the individual title is. */
  min-height: 2.6em;
}
.pkg--feature h3 {
  color: var(--brand);
}
.pkg-dur {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.pkg dl {
  margin: 1.35rem 0 0;
}
.pkg dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}
.pkg dd {
  margin: 0 0 1.3rem;
  font-size: 0.95rem;
  color: var(--text-2);
}
.pkg dd:last-child {
  margin-bottom: 0;
}
.pkg-badge {
  position: absolute;
  top: -0.75rem;
  left: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  padding: 0.28rem 0.7rem;
  background: var(--brand);
  color: #fff;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pkg {
  position: relative;
}

.terms-bar {
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  padding: 1.15rem 1.4rem;
  background: var(--ink);
  color: var(--on-ink-2);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: var(--step--1);
}
.terms-bar span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.terms-bar span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* --------------------------------------------------------------------------
   9c. Service overview — the four pillars on the homepage.
        Each card links to its own page. Large, editorial, clickable.
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  gap: clamp(1.1rem, 0.8rem + 1.2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46em) {
  .pillars {
    grid-template-columns: 1fr 1fr;
  }
}

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.pillar:hover {
  border-color: #cfd4dd;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.pillar-n {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}
.pillar h3 {
  margin: 0.9rem 0 0.15rem;
  font-size: var(--step-2);
}
.pillar .role {
  display: block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.85rem;
}
.pillar p {
  color: var(--text-2);
  font-size: 0.97rem;
}
.pillar ul {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  /* Same 12px floor as .chip-list: these are the same pills in a smaller size. */
  gap: 0.75rem;
}
.pillar ul li {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.pillar .go {
  margin-top: auto;
  padding-top: 1.5rem;
}
/* whole-card link: the stretched anchor sits on the "go" row but covers the card */
.pillar .go a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.pillar .go a:focus-visible {
  outline: none;
}
.pillar:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(58, 135, 180, 0.25);
}

/* --------------------------------------------------------------------------
   9d. Service page hero — lighter than the homepage hero. No photographic
        background; the ink panel and a kicker carry it.
   -------------------------------------------------------------------------- */

.svc-hero {
  background: var(--ink);
  color: var(--on-ink);
}
.svc-hero-inner {
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
  max-width: 60ch;
}
.svc-hero .crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--on-ink-3);
}
.svc-hero .crumb a {
  color: var(--on-ink-2);
  text-decoration: none;
}
.svc-hero .crumb a:hover {
  color: #fff;
}
.svc-hero .crumb .sep {
  opacity: 0.5;
}
.svc-hero .kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.1rem;
}
.svc-hero h1 {
  font-size: var(--step-4);
  font-weight: 550;
  letter-spacing: -0.02em;
  color: #fff;
}
.svc-hero h1 em {
  font-style: normal;
  color: var(--green);
}
.svc-hero .lede {
  margin-top: 1.35rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--on-ink-2);
}
.svc-hero .btn-row {
  margin-top: 2rem;
}

/* Cross-links between the four services, at the foot of each service page */
.svc-nav {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.svc-nav a {
  display: block;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.svc-nav a:hover {
  border-color: var(--brand);
  background: #fff;
}
.svc-nav .role {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.35rem;
}
.svc-nav .nm {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   9e. Product page — screenshots, spec numbers, feature rows, checklist.
   -------------------------------------------------------------------------- */

/* Framed screenshot with an optional caption. */
.shot {
  margin: 0;
}
.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.section--ink .shot img {
  border-color: var(--line-dark);
}
.shot figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--text-3);
  max-width: 60ch;
}
.section--ink .shot figcaption {
  color: var(--on-ink-3);
}
/* A screenshot lifted onto the hero boundary — dark above, light below. */
.shot--hero {
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  margin-bottom: calc(-1 * clamp(3rem, 2rem + 5vw, 6rem));
}

/* Product wordmark on the hero — the LogIQ logo is blue-on-white, so it goes
   on a light plate to keep its colours against the dark hero. */
.product-mark {
  display: inline-block;
  margin-bottom: 1.75rem;
  padding: 1.05rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}
.product-mark img {
  display: block;
  width: auto;
  height: clamp(52px, 40px + 3vw, 74px);
}

/* The product hero carries a full-width header image (logo, dashboard and
   verdict card in one picture), so its column is wider than the 60ch text
   column - the running text keeps its measure. */
.svc-hero-inner--wide {
  max-width: 72rem;
}
.svc-hero-inner--wide .lede {
  max-width: 60ch;
}
.product-hero {
  margin: 0 0 1.9rem;
}
.product-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
}

/* Three specification blocks: big number, label, description. */
.specs {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.spec {
  padding-top: 1.5rem;
  border-top: 3px solid var(--brand);
}
.spec:nth-child(2) {
  border-top-color: var(--brand-lt);
}
.spec:nth-child(3) {
  border-top-color: var(--green);
}
.spec-n {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.spec-n .num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.spec-n .unit {
  font-size: 0.8rem;
  font-weight: 620;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.spec h3 {
  margin: 0.85rem 0 0.15rem;
  font-size: var(--step-1);
}
.spec .ver {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--brand);
  margin-bottom: 0.7rem;
}
.spec p {
  font-size: 0.94rem;
  color: var(--text-2);
}

/* Alternating feature row: screenshot beside text. */
.feature {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60em) {
  .feature {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .feature--flip .shot {
    order: 2;
  }
}
.feature + .feature {
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.feature-body h3 {
  font-size: var(--step-2);
  margin-bottom: 0.8rem;
}
.feature-body p {
  color: var(--text-2);
}
.section--ink .feature-body p {
  color: var(--on-ink-2);
}

/* Checklist — ticked items for the security section. */
.checklist {
  display: grid;
  gap: 1.1rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.checklist > li {
  position: relative;
  padding-left: 2.1rem;
}
.checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c1524' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}
.checklist h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 660;
  letter-spacing: 0;
  margin-bottom: 0.25rem;
}
.section--ink .checklist h3 {
  color: #fff;
}
.checklist p {
  font-size: 0.92rem;
  color: var(--text-2);
}
.section--ink .checklist p {
  color: var(--on-ink-2);
}

/* Small print — the no-certification disclaimer. */
.disclaimer {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.86rem;
  color: var(--on-ink-3);
  max-width: 70ch;
}
/* The note appears on the dark hero and on the light closing section, so a
   link in it takes the colour of the text around it. The brand blue is a
   light-ground colour and is close to unreadable on ink. */
.disclaimer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.disclaimer a:hover,
.disclaimer a:focus-visible {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   10b. Process flow — what actually happens, step by step.
        Numbered circles rather than icons, reusing the .lens-n language.
   -------------------------------------------------------------------------- */

.flow-block {
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.flow-block > h3 {
  font-size: var(--step-2);
  margin-bottom: 0.75rem;
}
.flow-block > p {
  max-width: 56ch;
  color: var(--text-2);
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

/* Six steps, so the column count is pinned rather than auto-fit: 3×2 on
   desktop and 2×3 on tablet both come out even. auto-fit gave 4+2. */
.flow {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 0.8rem + 2.5vw, 2.75rem);
  grid-template-columns: 1fr;
  counter-reset: flowstep;
}
@media (min-width: 40em) {
  .flow {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 62em) {
  .flow {
    grid-template-columns: repeat(3, 1fr);
  }
  /* A four-step process reads best as one linear row, left to right, rather
     than 3 + 1 orphan. */
  .flow--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.flow > li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 2.9rem;
  border-top: 2px solid var(--line);
}
.flow > li::before {
  counter-increment: flowstep;
  content: counter(flowstep);
  position: absolute;
  top: 0.85rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--serif);
  font-size: 0.88rem;
  color: var(--brand);
}
/* the first two steps carry the brand rule, so the eye starts at the left */
.flow > li:nth-child(1),
.flow > li:nth-child(2) {
  border-top-color: var(--brand);
}
.flow h4 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 660;
  line-height: 1.35;
  margin-bottom: 0.45rem;
}
.flow p {
  font-size: 0.91rem;
  line-height: 1.55;
  color: var(--text-2);
}
/* margin-top:auto pins the timing to the bottom so the labels line up across
   a row. Safe here because it is one short line, unlike the case cards. */
.flow .when {
  display: block;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   11. Scope / four lenses
   -------------------------------------------------------------------------- */

.lenses {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 44em) {
  .lenses {
    grid-template-columns: 1fr 1fr;
  }
}
.lens {
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 44em) {
  .lens {
    padding-inline: clamp(1.5rem, 0.5rem + 3vw, 3rem);
  }
  .lens:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--line);
  }
  .lens:nth-child(even) {
    padding-right: 0;
  }
}
.lens-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand);
}
.lens h3 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.85rem;
}
.lens p {
  color: var(--text-2);
  font-size: 0.97rem;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   12. Case studies
   -------------------------------------------------------------------------- */

.cases {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.4vw, 1.85rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.case {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.15rem + 1.3vw, 2.15rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.case:hover {
  border-color: #cfd4dd;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.case--wide {
  grid-column: 1 / -1;
}
@media (min-width: 60em) {
  .case--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  }
}

.case-kicker {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.case h3 {
  font-size: var(--step-2);
  margin-bottom: 0.9rem;
}
.case-body p {
  font-size: 0.96rem;
  color: var(--text-2);
}

.case-facts {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}
.case-facts div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.87rem;
}
@media (max-width: 30em) {
  .case-facts div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}
.case-facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.15rem;
}
.case-facts dd {
  margin: 0;
  color: var(--text);
}

/* Deliberately NOT margin-top:auto — grid stretches the cards to equal height,
   and pushing the outcome to the bottom of the tallest card opens a hole in
   the middle of the shorter ones. Trailing whitespace reads better. */
.case-outcome {
  padding-top: 1.25rem;
}
.pull {
  margin: 1.5rem 0 0;
  padding-left: 1.15rem;
  border-left: 2px solid var(--green);
  font-family: var(--serif);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
}
.section--ink .pull {
  color: #fff;
}

.case-tech {
  margin-top: 1.15rem;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-3);
}
.case-tech strong {
  color: var(--text-2);
  font-weight: 620;
}

/* --------------------------------------------------------------------------
   13. Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.stat .num {
  /* Fixed box, bottom-aligned: sits every figure on a shared baseline even
     when one of them is stepped down by .num--wide. */
  display: flex;
  align-items: flex-end;
  min-height: clamp(2.6rem, 1.9rem + 3vw, 4rem);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.9rem + 3vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Longer figures such as "100 Mio. €+" would wrap to a second line and push
   their label out of alignment with the other three. Step the size down
   instead so every number stays on one line and every label starts at the
   same height. */
.stat .num--wide {
  font-size: clamp(1.9rem, 1.35rem + 2.3vw, 2.9rem);
  letter-spacing: -0.02em;
}
.stat .lbl {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--on-ink-2);
  max-width: 22ch;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  /* 12px is the floor for the space between two bordered things anywhere on
     the site; tighter than that, a row of pills reads as one striped block. */
  gap: 0.75rem;
  margin-top: 1rem;
}
.chip-list li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  font-size: 0.82rem;
  color: var(--on-ink-2);
}
.section--tone .chip-list li,
.section:not(.section--ink) .chip-list li {
  border-color: var(--line);
  color: var(--text-2);
}

/* --------------------------------------------------------------------------
   14. Services (secondary)
   -------------------------------------------------------------------------- */

.svc {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.svc h3 {
  font-size: var(--step-2);
  margin-bottom: 1rem;
}
.svc h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 1.35rem 0 0.6rem;
}
.svc ul li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 0.35rem;
}
.svc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 1px;
  background: var(--green-deep);
}

/* --------------------------------------------------------------------------
   15. Profile / CV
   -------------------------------------------------------------------------- */

.profile {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (min-width: 56em) {
  .profile {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
}
.profile-photo {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.profile-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
.profile-ident {
  margin-top: 1.25rem;
}
.profile-ident .nm {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: block;
}
.profile-ident .rl {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  color: var(--text-3);
}

.cv {
  border-top: 1px solid var(--line);
}
.cv > li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 34em) {
  .cv > li {
    grid-template-columns: 1fr;
  }
}
.cv .yr {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
.cv .rl {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.cv .org {
  grid-column: 2;
  font-size: 0.88rem;
  color: var(--text-2);
}
@media (max-width: 34em) {
  .cv .org {
    grid-column: 1;
  }
}

.facts {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-top: 2rem;
}
.facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}
.facts dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (min-width: 56em) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.contact-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}
.contact-list > li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line-dark);
}
@media (max-width: 30em) {
  .contact-list > li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}
.contact-list dt,
.contact-list .k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-3);
}
.contact-list .v {
  font-size: 1.02rem;
  color: #fff;
}
.contact-list .v a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color 0.18s var(--ease);
}
.contact-list .v a:hover {
  border-bottom-color: var(--green);
}
.contact-list .v small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--on-ink-3);
}

.nda-note {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-dark);
  border-left: 2px solid var(--green);
  border-radius: var(--radius);
  font-size: 0.94rem;
  color: var(--on-ink-2);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: #08101c;
  color: var(--on-ink-3);
  padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem);
  font-size: 0.87rem;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand img {
  height: 2rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}
.footer-brand p {
  margin-top: 0.85rem;
  max-width: 34ch;
  color: var(--on-ink-3);
  font-size: 0.87rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}
.footer-nav a {
  color: var(--on-ink-2);
  text-decoration: none;
}
.footer-nav a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
}
.footer-bottom p {
  margin: 0;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.footer-legal a {
  color: var(--on-ink-3);
  text-decoration: none;
}
.footer-legal a:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   18. Legal / long-form pages
   -------------------------------------------------------------------------- */

.page-header {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}
.page-header h1 {
  font-size: var(--step-4);
}
.page-header p {
  margin-top: 0.9rem;
  color: var(--on-ink-2);
  max-width: 50ch;
}

.prose {
  max-width: var(--measure);
}
.prose h2 {
  font-size: var(--step-2);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 660;
  letter-spacing: 0;
  margin-top: 1.85rem;
  margin-bottom: 0.5rem;
}
.prose p,
.prose li {
  color: var(--text-2);
}
.prose ul {
  list-style: disc;
  padding-left: 1.35rem;
  margin-bottom: 1.05em;
}
.prose ul li {
  margin-bottom: 0.35rem;
}
.prose address {
  font-style: normal;
  line-height: 1.75;
  color: var(--text);
}
.prose .todo {
  display: block;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  background: #fff8e6;
  border: 1px solid #f0d9a0;
  border-left: 3px solid #d9a441;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: #6b4e15;
}

/* --------------------------------------------------------------------------
   19. Utilities & motion
   -------------------------------------------------------------------------- */

.u-center {
  text-align: center;
}
.u-mt-lg {
  margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
}
.u-mt-md {
  margin-top: 1.5rem;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Reveal-on-scroll is scoped to .js, which an inline snippet in <head> sets.
   Without JavaScript the content is simply visible — it is never hidden by
   default, so search engines, reader modes and no-JS visitors see everything. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-toggle,
  .btn-row,
  .site-footer .footer-nav {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
  }
  .hero,
  .section--ink,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
  .hero::before,
  .hero::after {
    display: none;
  }
  .hero h1,
  .section--ink h2,
  .section--ink h3,
  .stat .num {
    color: #000 !important;
  }
  .section--ink p,
  .contact-list .v,
  .stat .lbl {
    color: #222 !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
  }
  .card,
  .pkg,
  .case {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* ==========================================================================
   Report package check — the panel at the top of /verify and /de/pruefen
   ========================================================================== */

/* This is the first thing on the page and the thing most visitors came for,
   so it is a panel of its own rather than one more card in a column. */
/* The panel is what most visitors came for, so it sits directly under the
   hero rather than a full section-gap below it — on a 768px-tall laptop a
   normal gap pushed the button off the bottom of the screen. #check only
   exists on these two pages, so this scopes itself. */
#check { padding-top: 0; }
#check-hero { padding-bottom: clamp(1.2rem, 0.8rem + 1.5vw, 2rem); }
#check + .section { padding-top: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }

.verify-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(12, 21, 36, 0.08));
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
}
.verify-panel-head { margin-bottom: 1.4rem; }
.verify-panel-head h2 { margin: 0.2rem 0 0.5rem; }
.verify-panel-head .lede { margin: 0; }

/* The drop zone reads as one big button, because that is what it is. A dashed
   outline alone was almost invisible — people did not see where to click. */
.verify-drop {
  display: grid;
  place-items: center;
  gap: 0.7rem;
  padding: clamp(1.8rem, 1.2rem + 3vw, 3.2rem) 1.5rem;
  border: 2px dashed var(--brand);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f7faff, #eef4fd);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.verify-drop:hover,
.verify-drop:focus-within,
.verify-drop.is-over {
  border-color: var(--brand-deep);
  background: linear-gradient(180deg, #eef4fd, #e3edfb);
}
.verify-drop.is-over { transform: scale(1.005); }
/* The label carries the click, so the button inside is decoration — it must
   not swallow the pointer or announce itself as a second control. */
.verify-cta { pointer-events: none; font-size: var(--step-0); }
.verify-drop-hint { font-size: var(--step--1); color: var(--text-2); }

.verify-out { margin-top: 1.5rem; }

/* Three states, and each says which it is in words as well as in colour —
   colour alone is not an answer for everybody reading this. */
.verify-result {
  border-left: 4px solid var(--line);
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.verify-result--good { border-left-color: var(--green-deep); background: #f3f9ec; }
.verify-result--warn { border-left-color: #b8860b; background: #fdf8ec; }
.verify-result--bad  { border-left-color: #b3261e; background: #fdf1f0; }
.verify-result--busy { border-left-color: var(--brand-lt); }

.verify-headline { font-weight: 700; font-size: var(--step-1); margin: 0 0 0.7rem; }
.verify-result--good .verify-headline { color: var(--green-deep); }
.verify-result--warn .verify-headline { color: #8a6508; }
.verify-result--bad  .verify-headline { color: #b3261e; }

.verify-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.9rem;
  margin: 0 0 0.9rem;
  font-size: var(--step--1);
}
.verify-meta dt { color: var(--text-3); }
.verify-meta dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

.verify-lines { list-style: none; margin: 0; padding: 0; }
.verify-line {
  position: relative;
  padding-left: 1.5rem;
  margin: 0.35rem 0;
  font-size: var(--step--1);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.verify-line::before { position: absolute; left: 0; font-weight: 700; }
.verify-line--good::before { content: "\2713"; color: var(--green-deep); }
.verify-line--warn::before { content: "!"; color: #8a6508; }
.verify-line--bad::before  { content: "\2717"; color: #b3261e; }

.verify-privacy {
  margin: 1.1rem 0 0;
  font-size: var(--step--1);
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   9f. Product page, second edition — hero with product view, jump
        navigation, audiences, prices and benefit, resources, enlargement.
        Additive: nothing above is changed, so other pages are unaffected.
   -------------------------------------------------------------------------- */

.prod-hero-inner {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
}
@media (min-width: 62em) {
  .prod-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  }
}
.prod-hero .product-mark {
  margin-bottom: 1.4rem;
  padding: 0.8rem 1.1rem;
}
.prod-hero .product-mark img {
  height: clamp(48px, 36px + 2.6vw, 66px);
}
.prod-hero h1 {
  font-size: var(--step-4);
}
.prod-hero .slogan {
  margin: 0.7rem 0 0;
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.25;
  color: var(--green);
}
.prod-hero .shot img {
  border-color: var(--line-dark);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6);
}
.prod-hero .shot figcaption {
  color: var(--on-ink-3);
}
.prod-hero .disclaimer {
  margin-top: 1.75rem;
}

/* Compact jump navigation directly under the hero. Wraps rather than
   scrolling sideways, so the page never gains a horizontal scrollbar. */
.jump-nav {
  background: var(--ink-2);
  border-top: 1px solid var(--line-dark);
}
.jump-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  padding-block: 0.7rem;
}
.jump-nav a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  color: var(--on-ink);
  font-size: 0.86rem;
  font-weight: 560;
  text-decoration: none;
}
.jump-nav a:hover,
.jump-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.jump-nav .n {
  color: var(--green);
  margin-right: 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* Main-area divider: the eyebrow of the five main areas carries a number. */
.area-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

/* Three audiences, each read as situation → workflow → result. */
.parties {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .parties {
    grid-template-columns: repeat(3, 1fr);
  }
}
.party {
  padding-top: 1.3rem;
  border-top: 3px solid var(--brand);
}
.party:nth-child(2) { border-top-color: var(--brand-lt); }
.party:nth-child(3) { border-top-color: var(--green); }
.party h3 {
  font-size: var(--step-2);
  margin-bottom: 1rem;
}
.party dl {
  margin: 0;
}
.party dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.2rem;
}
.party dd {
  margin: 0 0 1rem;
  color: var(--text-2);
  font-size: 0.97rem;
}
.party dd:last-child {
  margin-bottom: 0;
}

/* Four-question rows under a feature: input, what LogIQ does, result,
   decision. Rendered as a definition list beside the screenshot text. */
.io {
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.2rem 1rem;
  grid-template-columns: 1fr;
  font-size: 0.95rem;
}
@media (min-width: 36em) {
  .io {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }
}
.io dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  padding-top: 0.25rem;
}
.io dd {
  margin: 0 0 0.55rem;
  color: var(--text-2);
}

/* A single boxed fact: an extra figure, a limit or a result. */
.fact {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--brand-lt);
  background: rgba(58, 135, 180, 0.07);
  font-size: 0.93rem;
  color: var(--text-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.fact strong {
  color: var(--text);
}
.fact--limit {
  border-left-color: #b8860b;
  background: #fdf8ec;
}

/* Screenshots open larger. The link works without script (it opens the
   image); with script it opens the dialog below. */
a.zoom {
  display: block;
  position: relative;
  cursor: zoom-in;
}
a.zoom::after {
  content: "Enlarge";
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
  background: rgba(12, 21, 36, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
a.zoom:hover::after,
a.zoom:focus-visible::after {
  opacity: 1;
}
.zoom-dialog {
  width: min(96vw, 1500px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.zoom-dialog::backdrop {
  background: rgba(12, 21, 36, 0.8);
}
.zoom-dialog figure {
  margin: 0;
  padding: 2.9rem 1rem 1rem;
}
.zoom-dialog img {
  width: 100%;
  height: auto;
  max-height: calc(94vh - 6.5rem);
  object-fit: contain;
}
.zoom-dialog figcaption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--text-2);
}
.zoom-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Small uppercase labels on the monitoring page (measured, derived,
   indication). Always carry a text, so the style is never the only signal. */
.tag {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.tag--assume {
  background: #fff;
  color: var(--text-2);
  border: 1px solid var(--line);
}

/* Resources: every download with its type and size, as one list. */
.resources {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 56em) {
  .resources {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}
.resources li {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.resources a {
  font-weight: 620;
}
.resources .meta {
  display: block;
  font-size: 0.84rem;
  color: var(--text-3);
}
.resources p {
  margin: 0.2rem 0 0;
  font-size: 0.92rem;
  color: var(--text-2);
}

/* Collapsible technical detail. The buying argument is never in here. */
.more {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.more summary {
  cursor: pointer;
  padding: 0.8rem 0;
  font-weight: 620;
  color: var(--brand);
}
.more summary:focus-visible {
  outline: 2px solid var(--brand-lt);
}
.more > div {
  padding-bottom: 0.4rem;
  color: var(--text-2);
  font-size: 0.95rem;
}

/* The jump navigation sits under the site header and, on wide screens,
   stays there while the page scrolls. Anchor targets clear both bars. */
.jump-nav {
  position: relative;
  z-index: 90;
}
@media (min-width: 64em) {
  .jump-nav {
    position: sticky;
    top: calc(5.25rem + 1px);
  }
  html:has(.jump-nav) {
    scroll-padding-top: 9rem;
  }
  html:has(.jump-nav) section[id] {
    scroll-margin-top: 0;
  }
}
.jump-nav a[aria-current="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* On narrow screens the jump navigation is one row that scrolls sideways
   inside itself; four wrapped rows pushed the product name off the first
   screen. The page itself never scrolls sideways. */
@media (max-width: 63.99em) {
  .jump-nav ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-block: 0.45rem;
    scrollbar-width: thin;
  }
  .jump-nav a {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
  }
}

/* Three cards in a row: pinned to one or three columns. auto-fit gave
   two plus an orphan on tablets. */
.trio {
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .trio {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   18. Site revision 09/2026 — navigation with a consulting submenu, the
       experience proof under the hero, situation cards, project examples
       with their origin, contact guidance. Additive.
   -------------------------------------------------------------------------- */

/* The primary list is a flex row; the submenu inside it is not. */
.nav .has-sub {
  position: relative;
}
.nav .subnav {
  display: none;
}
.nav .subnav a {
  white-space: normal;
}
@media (min-width: 64.001em) {
  .nav .subnav {
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 110;
    min-width: 17.5rem;
    padding: 0.6rem 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* a bridge over the gap between the label and the panel */
  .nav .subnav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.8rem;
    height: 0.8rem;
  }
  .nav .has-sub:hover > .subnav,
  .nav .has-sub:focus-within > .subnav {
    display: flex;
  }
  .nav .subnav a {
    padding: 0.55rem 1rem;
  }
  .nav .subnav a::after {
    display: none;
  }
  .nav .subnav a:hover,
  .nav .subnav a[aria-current="page"] {
    background: var(--paper-2);
    color: var(--text);
  }
  .nav .has-sub > a {
    padding-right: 0.9rem;
  }
  .nav .has-sub > a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.38rem;
    height: 0.38rem;
    margin-top: -0.3rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.6;
  }
}
@media (max-width: 64em) {
  .nav {
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
  }
  .nav .subnav {
    display: block;
    padding: 0 0 0.6rem 1rem;
  }
  .nav .subnav li + li {
    border-top: 0;
  }
  .nav .subnav a {
    padding-block: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-2);
  }
}
.nav a[aria-current="page"] {
  color: var(--text);
}

/* Experience proof inside the home hero: figures and the employers they
   come from, labelled as background rather than as clients. */
.proof {
  border-top: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.03);
}
.proof-inner {
  display: grid;
  gap: 1.5rem clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-block: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) {
  .proof-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 64em) {
  .proof-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.proof-item .num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
}
.proof-item .lbl {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--on-ink-2);
}
.proof-bg {
  border-top: 1px solid var(--line-dark);
}
.proof-bg .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-block: 1.1rem;
  font-size: 0.86rem;
  color: var(--on-ink-3);
}
.proof-bg strong {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-3);
}
.proof-bg ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
.proof-bg li {
  color: var(--on-ink-2);
}
.proof-bg a {
  color: var(--on-ink-2);
}

.hero h1.hero-claim {
  max-width: 24ch;
  font-size: var(--step-4);
  line-height: 1.12;
}

/* Situation cards: the client's sentence is the heading, the service is
   the label above it. Built on .pillar. */
.pillar .say {
  margin: 0.9rem 0 0.8rem;
  font-size: var(--step-2);
}
.pillar .say::before { content: "\201C"; }
.pillar .say::after { content: "\201D"; }
:lang(de) .pillar .say::before { content: "\201E"; }
:lang(de) .pillar .say::after { content: "\201C"; }
.pillar .svc-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}
.pillar .gain {
  color: var(--text);
  font-weight: 520;
}

/* Project examples: origin label, then situation, own part, result. */
.origin {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-2);
  background: var(--paper);
}
.origin--lx {
  border-color: var(--green-deep);
  color: #3f6512;
  background: #eef6e4;
}
.case-steps {
  margin: 0.2rem 0 0;
}
.case-steps dt {
  margin-top: 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.case-steps dd {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--text-2);
}
.cases--three {
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .cases--three {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cases--two {
  grid-template-columns: 1fr;
}
@media (min-width: 52em) {
  .cases--two {
    grid-template-columns: 1fr 1fr;
  }
}

/* Short benefit list on service pages and the product teaser. */
.gains {
  display: grid;
  gap: 1rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 52em) {
  .gains {
    grid-template-columns: repeat(3, 1fr);
  }
}
.gains > li {
  padding-top: 1rem;
  border-top: 3px solid var(--green);
}
.gains h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 660;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}
.gains p {
  font-size: 0.95rem;
  color: var(--text-2);
}
.section--ink .gains p {
  color: var(--on-ink-2);
}

.ticks > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.38rem;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* Contact guidance: what to put in the first message. */
.brief-list {
  margin-top: 1.5rem;
  counter-reset: brief;
}
.brief-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2.3rem;
  border-top: 1px solid var(--line-dark);
  color: var(--on-ink-2);
  font-size: 0.97rem;
}
.brief-list li::before {
  counter-increment: brief;
  content: counter(brief);
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font-size: 0.78rem;
  line-height: 1.4rem;
  text-align: center;
  color: var(--green);
}
.brief-list strong {
  color: #fff;
  font-weight: 600;
}

/* Short profile on the home page. */
.profile-short {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 52em) {
  .profile-short {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  }
}
.profile-short .profile-photo img {
  aspect-ratio: 4 / 5;
}
.profile-short p {
  color: var(--text-2);
}

/* Touch targets on small screens: buttons and nav rows at least 44px. */
@media (max-width: 40em) {
  .btn {
    min-height: 2.75rem;
  }
  .btn-row .btn {
    flex: 1 1 auto;
  }
}

/* Contact list as a real list (it was a dl holding li elements). */
ul.contact-list {
  margin: 0;
  padding: 0;
}

.cases--one {
  grid-template-columns: 1fr;
  max-width: 46rem;
}

/* Product hero, stacked: text first, then the screenshot at full width so
   its text stays legible, then the independence note. */
.prod-hero-inner--stack {
  grid-template-columns: 1fr !important;
}
.prod-hero-inner--stack > div {
  max-width: 62ch;
}
.hero-ticks {
  margin: 1.4rem 0 0;
  color: var(--on-ink);
}
.hero-ticks li {
  color: var(--on-ink);
}
.hero-note {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  color: var(--on-ink-3);
  max-width: 60ch;
}
.prod-hero-inner--stack .disclaimer {
  margin-top: 0;
}
.profile-short .profile-photo,
.profile .profile-photo {
  margin: 0;
}
:lang(de) a.zoom::after {
  content: "Vergrößern";
}

/* Steps are h3 under the section's h2 (was h4: a skipped level). */
.flow h3 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 660;
  line-height: 1.35;
  letter-spacing: 0;
  margin-bottom: 0.45rem;
}

/* The findings screenshot in the product hero shows its top part; the full
   picture opens on click. */
.prod-hero-inner--stack .shot img {
  max-height: 36rem;
  object-fit: cover;
  object-position: top;
}

/* Product page: the header image carries the product name, so the slogan
   is the heading and takes the heading's size. */
.prod-hero h1.slogan {
  margin: 0;
  font-size: var(--step-4);
  line-height: 1.12;
  color: var(--green);
}