/* Theme stylesheet — ITCSS layering, delivered as ONE file.
   Module CSS (css/modules/_<name>.css) and the blog/case template CSS are
   bundled here on purpose (19 Sep): HubSpot emits a separate <link> for
   every module.css on a page, and PageSpeed pays cold-CDN latency per
   request (homepage: 12 stylesheet requests, now 1). Module styles keep
   their own file and block class; only the delivery changed. Order:
   tokens → generic → objects → elements → components → modules →
   templates → utilities (utilities last so band-rhythm classes win). */

/* Tokens: HubSpot theme fields → --ml-* custom properties (the only file that reads theme.*) */
/* Tokens bridge: HubSpot theme fields → CSS custom properties.
   This is the ONLY file that reads theme.* fields. Everything else consumes var(--ml-*). */

:root {
  /* color */
  --ml-ink: #1D1D1B;
  --ml-ink-soft: #5C677D;
  --ml-muted: #979DAC;
  --ml-bg: #FFFFFF;
  --ml-bg-soft: #EFF1F6;
  --ml-navy: #001233;
  --ml-navy-deep: #14102A;
  --ml-navy-ink: #1C1638;
  --ml-navy-band: #00194B;
  --ml-red: #CC353F;
  --ml-red-deep: #BE2A47;
  --ml-accent: #E63946;
  --ml-accent-soft: #FF8989;
  --ml-accent-tint: #FFD0D0;
  --ml-pink-soft: #FBE8EC;
  --ml-logo-placeholder-text: #F4F5F7;
  /* derived (kept in sync with the palette by hand) */
  --ml-red-hover: #b32e37;
  --ml-azure-77: #b8c1d3;
  --ml-azure: #f4f5f7; /* Figma Colors ML/azurre — solid h1 on art heroes (41:3599) */
  --ml-bg-lilac: #f7f5fa;
  --ml-pink-signet: #ffd0d0; /* knowhow signet base (Figma 29:620 layer bg) */

  /* Blog (Figma 65:6252 BLOG PAGE, sampled 28 Aug) */
  --ml-blog-meta-1: #0d122f;    /* meta-description band, navy end */
  --ml-blog-meta-2: #251a32;    /* meta-description band, berry end */
  --ml-blog-author-1: #2b214a;  /* author band, violet end */
  --ml-blog-author-2: #3c243d;  /* author band, berry end */
  --ml-post-card-head: #62677b; /* related-post card head, default slate */
  /* Blog listing (Figma 65:6196 BLOG LISTING PAGE, sampled 7 Sep) */
  --ml-bloglist-hero-bg: #faf2f2;     /* warm pink-cream title band */
  --ml-bloglist-title: #393130;       /* "Mark Lotse Blog" H1 */
  --ml-bloglist-lead: #716c7d;        /* subline under the H1 */
  --ml-bloglist-chip-bg: #e3e3e3;     /* tag chip, inactive */
  --ml-bloglist-page-active: #3b415a; /* pagination, current page square */
  --ml-bloglist-head-red: #a84e44;    /* card head colours, rotated per card */
  --ml-bloglist-head-cream: #f8eceb;
  --ml-bloglist-head-salmon: #dd968c;
  --ml-bloglist-head-pale: #efd4d1;
  --ml-line: #e6e8ef;
  --ml-line-3: #e4e0ee;
  --ml-card-plum: #14102a;
  --ml-purple-industry: #60308e; /* Figma Background-Branchen base (50:5967) */
  --ml-industry-grad-1: #542038; /* Figma Box-industry dark radial stops (50:5982) */
  --ml-industry-grad-2: #2c1935;
  --ml-industry-grad-3: #171633;
  --ml-industry-grad-4: #031231; /* Figma color/blue/11 — dark signet cards (Leistung page) */
  --ml-ink-3: #33415c;
  --ml-accent-16: rgba(230, 57, 70, 0.16);
  --ml-white-30: rgba(255, 255, 255, 0.3);
  --ml-white-50: rgba(255, 255, 255, 0.5);
  --ml-white-60: rgba(255, 255, 255, 0.6);
  --ml-white-78: rgba(255, 255, 255, 0.78);

  /* type */
  --ml-font: "Bould", "Bould Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ml-font-2: "Ubuntu", "Ubuntu Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ml-fs-12: 0.75rem;    /* 12 — eyebrow */
  --ml-fs-13: 0.8125rem;  /* 13 — sub/meta */
  --ml-fs-15: 0.9375rem;  /* 15 */
  --ml-fs-16: 1rem;       /* 16 — nav item, small body */
  --ml-fs-18: 1.125rem;   /* 18 — body, buttons */
  --ml-fs-20: 1.25rem;    /* 20 — Text ML/Body */
  --ml-fs-21: 1.3125rem;  /* 21 — lead */
  --ml-fs-23: 1.4375rem;  /* 23 — Text ML/h3 */
  --ml-fs-16-5: 1.03125rem; /* 16.5 — card body */
  --ml-fs-13-5: 0.84375rem; /* 13.5 — trust row / stage note */
  --ml-fs-14: 0.875rem;   /* 14 — blog listing tag chips */
  --ml-fs-26: 1.625rem;   /* 26 — h4 / card headline */
  --ml-fs-28: 1.75rem;    /* 28 */
  --ml-fs-30: 1.875rem;   /* 30 — h3 */
  --ml-fs-34: 2.125rem;   /* 34 — h2 */
  --ml-fs-50: 3.125rem;   /* 50 — h1 / display */
  --ml-fs-86: 5.375rem;   /* 86 — hero display (XL) */
  --ml-ls-tight: 0.7px;
  --ml-ls-wide: 1.05px;
  --ml-ls-eyebrow: 1.68px;

  /* layout */
  --ml-container: 1240px;
  --ml-pad-x: 80px;
  --ml-gap: 24px;      /* item spacing s+ */
  --ml-gap-lg: 40px;

  /* radius — brand is square; only deliberately round primitives use these */
  --ml-round-pill: 30px;
  --ml-round-chip: 21px;

  /* inner-page additions — appended from Figma FAQ 41:2971 */
  --ml-ink-2: #221b3a;
  --ml-ink-2-soft: #4a4460;
  --ml-line-2: #e1ddea;
  --ml-fs-17: 1.0625rem;
  --ml-fs-19: 1.1875rem;
  --ml-fs-42: 2.625rem;
  --ml-lh-47: 47px;
  --ml-ls-eyebrow-2: 2.08px;
  --ml-lh-32: 32px;
}

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

:focus-visible {
  outline: 2px solid var(--ml-red);
  outline-offset: 2px;
}

/* Generic: reset, normalize (fonts: generic/_fonts.css is inlined by templates/layouts/base.html, see the note there) */
*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects: layout patterns */
/* Layout objects — container + section band pattern. */

.content-wrapper,
.ml-container {
  max-width: var(--ml-container);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .content-wrapper,
  .ml-container {
    padding: 0 40px;
  }
}

/* full-bleed band with contained inner content */
.ml-band {
  padding-left: 0;
  padding-right: 0;
}
.ml-band > .ml-container { width: 100%; }

.ml-band--soft { background: var(--ml-bg-soft); }
.ml-band--navy { background: var(--ml-navy); color: #fff; }
.ml-band--navy-deep { background: var(--ml-navy-deep); color: #fff; }

/* dnd area helpers kept from boilerplate naming */
.dnd-section {
  padding: 80px 20px;
}
@media (min-width: 768px) {
  .dnd-section {
    padding: 80px var(--ml-pad-x);
  }
}
.dnd-section > .row-fluid {
  max-width: var(--ml-container);
  margin: 0 auto;
}
/* DnD containers — modules own their own vertical rhythm, so sections add none. */

.dnd-section,
.dnd-section > .row-fluid {
  padding: 0;
  margin: 0;
}
.dnd-section > .row-fluid {
  max-width: none;
  width: 100%;
}
.dnd-column, .dnd-row { padding: 0; }

/* Elements: base HTML */
/* Base typography — Bould primary, tokens only. */

html {
  font-size: 16px;
}

body {
  font-family: var(--ml-font);
  font-size: var(--ml-fs-18);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ml-ink);
  background-color: var(--ml-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--ml-font);
  color: inherit;
}

h1, .ml-h1 { font-size: var(--ml-fs-50); font-weight: 700; line-height: 1.15; }
h2, .ml-h2 { font-size: var(--ml-fs-34); font-weight: 700; line-height: 1.2; }
h3, .ml-h3 { font-size: var(--ml-fs-30); font-weight: 600; line-height: 1.25; }
h4, .ml-h4 { font-size: var(--ml-fs-26); font-weight: 600; line-height: 1.3; }
h5, .ml-h5 { font-size: var(--ml-fs-21); font-weight: 600; line-height: 1.35; }
h6, .ml-h6 { font-size: var(--ml-fs-18); font-weight: 700; line-height: 1.15; text-transform: uppercase; }

/* display size for the hero on wide screens */
.ml-display { font-size: var(--ml-fs-50); font-weight: 700; line-height: 1.1; }
@media (min-width: 1200px) {
  .ml-display--xl { font-size: var(--ml-fs-86); line-height: 1.15; }
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

a:hover {
  color: var(--ml-red);
}

strong { font-weight: 700; }

/* eyebrow / kicker — Ubuntu Bold 12, wide tracking (Figma pattern) */
.ml-eyebrow {
  display: block;
  font-family: var(--ml-font-2);
  font-size: var(--ml-fs-12);
  font-weight: 700;
  letter-spacing: var(--ml-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ml-muted);
}
.ml-eyebrow--on-dark { color: var(--ml-accent-soft); }
.ml-eyebrow--red {
  font-family: var(--ml-font-2);
  font-size: var(--ml-fs-13);
  font-weight: 700;
  letter-spacing: var(--ml-ls-eyebrow-2);
  text-transform: uppercase;
  /* --ml-accent (#e63946) is only 4.17:1 on white and this runs at 13px bold,
     which does not qualify for the large-text exemption. --ml-red is 5.06:1.
     Deliberate, documented divergence from the Figma value on a11y grounds. */
  color: var(--ml-red);
}

/* body copy on dark bands */
.ml-on-dark { color: var(--ml-bg); }
.ml-on-dark .ml-eyebrow { color: var(--ml-accent-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Buttons — square (no radius), Bould Medium 18, tracking .7, uppercase.
   Variants map 1:1 to the Figma CTA component:
   primary = red bg / white text · light = white bg / navy-ink text (on dark bands)
   ghost   = transparent + 1px Cosmos border (hero secondary)              */

/* Single-class selector on purpose: element-qualified selectors (a.ml-btn)
   outrank the .ml-btn--* variants and silently kill their border/background. */
.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 50px;
  padding: 12px 28px;
  border: 0;
  border-radius: 0;
  font-family: var(--ml-font);
  font-size: var(--ml-fs-18);
  font-weight: 500;
  letter-spacing: var(--ml-ls-tight);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ml-btn--primary {
  background: var(--ml-red);
  color: var(--ml-bg);
}
.ml-btn--primary:hover,
.ml-btn--primary:focus-visible {
  background: var(--ml-red-hover);
  color: var(--ml-bg);
}

.ml-btn--light {
  background: var(--ml-bg);
  color: var(--ml-navy-ink);
}
.ml-btn--light:hover,
.ml-btn--light:focus-visible {
  background: var(--ml-muted);
  color: var(--ml-navy-ink);
}

.ml-btn--ghost {
  background: transparent;
  color: var(--ml-bg);
  border: 1px solid var(--ml-accent-tint);
  padding: 12px 28px;
}
.ml-btn--ghost:hover,
.ml-btn--ghost:focus-visible {
  background: var(--ml-white-30);
}

.ml-btn .ml-btn__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.ml-btn > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ml-btn .ml-btn__icon svg { width: 100%; height: 100%; }
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: var(--ml-red);
}

.hs-input.invalid.error {
  border-color: var(--ml-red);
}

.hs-error-msg {
  color: var(--ml-red);
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components: global partials (header/footer/modal) */
/* Header wrapper — transparent overlay above the hero band. */
.ml-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
/* Footer — Figma 29:9584. Navy #001233, 12px Comet top border, bottom bar Ebony. */

.ml-footer {
  background: var(--ml-navy);
  border-top: 12px solid var(--ml-ink-soft);
  color: var(--ml-bg);
  padding-top: 44px;
}
.ml-footer a { color: var(--ml-bg); text-decoration: none; }
.ml-footer a:hover { color: var(--ml-accent-soft); }

.ml-footer__container { padding-top: 16px; padding-bottom: 16px; }

.ml-footer__logo { display: inline-flex; width: 221px; height: 41px; margin-bottom: 40px; }
.ml-footer__logo svg,
.ml-footer__logo img { width: 100%; height: 100%; }

.ml-footer__main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 64px;
}

.ml-footer__menu-title,
.ml-footer__office-title {
  font-size: var(--ml-fs-18);
  font-weight: 700;
  line-height: 20.7px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.ml-footer__col ul { margin: 0 0 32px; padding: 0; list-style: none; }
.ml-footer__col li { padding-bottom: 16px; }
.ml-footer__col li a { font-size: var(--ml-fs-18); line-height: 20.7px; }
.ml-footer__menu-group + .ml-footer__menu-group { margin-top: 40px; }
.ml-footer__menu-title--standalone { margin-bottom: 32px; }

.ml-footer__office { margin-bottom: 40px; }
.ml-footer__office p { margin: 0 0 12px; font-size: var(--ml-fs-18); line-height: 20.7px; }
.ml-footer__office-address { white-space: pre-line; } /* address lines break where the editor pressed Enter */
.ml-footer__office a { text-decoration: underline; text-underline-position: from-font; }

.ml-footer__social {
  display: flex;
  gap: 10px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.ml-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--ml-round-pill);
  background: var(--ml-bg);
  color: var(--ml-navy);
}
.ml-footer__social a:hover { background: var(--ml-accent-soft); color: var(--ml-navy); }
.ml-footer__social .ml-icon svg { width: 100%; height: 100%; }

.ml-footer__bottom { background: var(--ml-navy-deep); }
.ml-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.ml-footer__copyright { margin: 0; font-size: var(--ml-fs-16); line-height: 18.4px; }
.ml-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-footer__legal li { padding: 0 16px; border-right: 1px solid var(--ml-white-30); }
.ml-footer__legal li:last-child { border-right: 0; padding-right: 0; }
.ml-footer__legal a {
  font-size: var(--ml-fs-16);
  font-weight: 700;
  line-height: 18.4px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (max-width: 767px) {
  .ml-footer__main { grid-template-columns: 1fr; gap: 8px; }
  .ml-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
  .ml-footer__legal { row-gap: 12px; }
  .ml-footer__legal li:first-child { padding-left: 0; }
}
/* Modal dialog — the Erstgespräch meetings pop-up (partials/meeting-modal.html).
   Square corners like every other surface; sits above the header (z 50). */
.ml-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ml-modal[hidden] { display: none; }
.ml-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ml-navy-deep) 72%, transparent); }
.ml-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 920px);
  max-height: calc(100vh - 40px);
  background: var(--ml-bg);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ml-navy-deep) 45%, transparent);
  outline: none;
}
.ml-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  background: var(--ml-navy);
  color: var(--ml-bg);
}
/* heading policy: styled body text, the dialog is not a document section */
.ml-modal__title { margin: 0; font-size: var(--ml-fs-20); font-weight: 700; }
.ml-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ml-bg);
  cursor: pointer;
}
.ml-modal__close svg { width: 20px; height: 20px; }
.ml-modal__close:hover,
.ml-modal__close:focus-visible { background: color-mix(in srgb, var(--ml-bg) 14%, transparent); }
.ml-modal__close:focus-visible { outline: 2px solid var(--ml-accent); outline-offset: -2px; }
.ml-modal__body { flex: 1 1 auto; min-height: 0; background: var(--ml-bg-lilac); }
.ml-modal__frame { display: block; width: 100%; height: min(700px, calc(100vh - 140px)); border: 0; }
@media (max-width: 767px) {
  .ml-modal { padding: 0; align-items: stretch; }
  .ml-modal__panel { width: 100%; max-height: none; }
  .ml-modal__frame { height: calc(100vh - 76px); }
}

/* Modules: one file per module, scoped under its block class */
/* Service cards — Figma Section/Cards Services. Fixed artwork composites come
   from the checked-in Signet imgVector10–12 plus service vectors 13–17/21–24;
   HubSpot uses the cited orange radial. Their palette is artwork, not UI CSS. */

.ml-cards--light { background: var(--ml-bg); }
.ml-cards--soft { background: var(--ml-bg-lilac); }
.ml-cards--dark { background: var(--ml-navy); color: var(--ml-bg); }

.ml-cards__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-cards__head { display: flex; flex-direction: column; gap: 18px; }
.ml-cards__head > p { margin: 0; }
.ml-cards__title {
  margin: 0;
  max-width: 700px;
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-ink-2);
  white-space: pre-line;
}
.ml-cards--dark .ml-cards__title { color: var(--ml-bg); }

.ml-cards__grid {
  /* Fluid tracks stay ~371px with today's container; the deferred G1 width
     decision is what will move them to the 411px Figma geometry. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ml-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-cards__cell { display: flex; }

.ml-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 271px;
  padding: 41px 35px;
  background: var(--ml-bg);
  border: 1px solid var(--ml-line-3);
  color: var(--ml-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ml-card:hover,
.ml-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ml-navy) 12%, transparent);
  color: var(--ml-bg);
}
.ml-card__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ml-card__art img { width: 100%; height: 100%; object-fit: cover; }
.ml-card__title,
.ml-card__text,
.ml-card__link { position: relative; z-index: 1; }
.ml-card__title { margin-top: 20px; font-size: var(--ml-fs-23); font-weight: 700; line-height: normal; color: var(--ml-bg); }
.ml-card__text { flex: 1 1 auto; margin-top: 13.145px; font-size: var(--ml-fs-16-5); line-height: 26.4px; color: var(--ml-bg); }
.ml-card__link { margin-top: 24px; font-size: var(--ml-fs-16); font-weight: 700; color: var(--ml-accent); }
/* (removed) .ml-card--leistungen text override — typography must not change with the
   artwork choice; Sandra hit exactly that mixing artworks on one page (24 Aug). */
.ml-card--none { color: var(--ml-ink); }
.ml-card--none:hover,
.ml-card--none:focus-visible { color: var(--ml-ink); }
.ml-card--none .ml-card__title { font-size: var(--ml-fs-23); color: var(--ml-ink); } /* Übersicht overview cards: 23px per Figma 29-1602 (no --none card ships at 26) */
.ml-card--none .ml-card__text { color: var(--ml-ink-soft); }
.ml-card--none .ml-card__link { color: var(--ml-red); }
.ml-card:hover .ml-card__link { text-decoration: underline; }

@media (max-width: 767px) {
  .ml-cards__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); gap: 32px; }
  .ml-cards__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-card { min-height: 0; padding: 28px 24px; }
}

/* Optional badge right of the head (Figma 29-1602 / 41-3615). It reaches up into the
   section padding exactly as in Figma, and the head reserves the height its lower half
   needs so the cards never paint over it (Sandra, 22 Aug: "partly hidden behind the boxes"). */
.ml-cards__head { position: relative; }
.ml-cards__head--with-badge { min-height: 152px; padding-right: 340px; }
.ml-cards__badge { position: absolute; right: 0; top: -104px; width: 311px; height: 311px; }
@media (max-width: 1199px) {
  .ml-cards__head--with-badge { min-height: 0; padding-right: 0; }
  .ml-cards__badge { position: static; width: 180px; height: 180px; margin-top: 16px; }
}
/* Case metrics — coloured number boxes (Sandra's case-study sketch, "Success
   Metrics"): pink / navy / red rotate per box. */
.ml-metrics--light { background: var(--ml-bg); }
.ml-metrics--soft { background: var(--ml-bg-lilac); }
.ml-metrics__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: var(--band-pt, 96px);
  padding-bottom: var(--band-pb, 96px);
}
.ml-metrics__head { display: flex; flex-direction: column; gap: 18px; max-width: 790px; }
.ml-metrics__eyebrow { margin: 0; }
.ml-metrics__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); color: var(--ml-ink-2); }

.ml-metrics__grid { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.ml-metrics__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-metrics__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-metrics__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ml-metric {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  padding: 40px 32px;
}
.ml-metric--pink { background: var(--ml-pink-soft); color: var(--ml-ink-2); }
.ml-metric--pink .ml-metric__figure { color: var(--ml-red); }
.ml-metric--navy { background: var(--ml-navy-deep); color: var(--ml-bg); }
.ml-metric--red { background: var(--ml-red); color: var(--ml-bg); }
/* heading policy: styled spans, never hN */
.ml-metric__figure { font-size: var(--ml-fs-50); font-weight: 700; line-height: 1.05; }
.ml-metric__text { font-size: var(--ml-fs-16); font-weight: 700; line-height: 1.45; }

@media (max-width: 991px) {
  .ml-metrics__grid--3,
  .ml-metrics__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ml-metrics__inner { gap: 28px; padding-top: var(--band-pt-sm, 56px); padding-bottom: var(--band-pb-sm, 56px); }
  .ml-metrics__grid--2,
  .ml-metrics__grid--3,
  .ml-metrics__grid--4 { grid-template-columns: 1fr; gap: 16px; }
  .ml-metric { min-height: 0; padding: 28px 24px; }
  .ml-metric__figure { font-size: var(--ml-fs-42); }
}
/* Case stats — Figma Cases block with photo/multiply artwork and partner badge. */

.ml-stats--light { background: var(--ml-bg); }
.ml-stats--soft { background: var(--ml-bg-lilac); }
.ml-stats--dark { background: var(--ml-navy); color: var(--ml-bg); }
.ml-stats__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-stats__head { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ml-stats__head > p { margin: 0; }
.ml-stats__badge {
  position: absolute;
  top: -92.28px;
  right: -15px;
  width: 236.898px;
  height: 236.898px;
}
.ml-stats__title {
  margin: 0;
  max-width: 700px;
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-ink-2);
  white-space: pre-line;
}
.ml-stats--dark .ml-stats__title { color: var(--ml-bg); }

.ml-stats__grid {
  /* Fluid tracks stay ~371px with today's container; retune to ~411px only
     after the explicitly deferred container-width decision. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ml-gap);
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
}
.ml-stats__cell { display: flex; min-width: 0; }
.ml-stat {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 307px;
  padding: 37px 33px;
  color: var(--ml-bg);
  text-decoration: none;
  box-shadow: 0 0 10px color-mix(in srgb, var(--ml-ink) 10%, transparent);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ml-stat:hover,
.ml-stat:focus-visible {
  color: var(--ml-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ml-navy) 18%, transparent);
}
.ml-stat__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ml-stat__art img { width: 100%; height: 100%; object-fit: cover; }
.ml-stat__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(57.6596deg, color-mix(in srgb, var(--ml-ink-2) 70%, transparent) 61.836%, color-mix(in srgb, var(--ml-accent) 7%, transparent) 88.627%);
  mix-blend-mode: multiply;
}
.ml-stat__logo,
.ml-stat__figure,
.ml-stat__text,
.ml-stat__link { position: relative; z-index: 1; }
.ml-stat__logo { display: block; width: 150px; height: 44px; }
.ml-stat__figure {
  margin-top: 27.25px;
  font-size: 44px;
  font-weight: 700;
  line-height: 46.2px;
  color: var(--ml-accent);
}
.ml-stat__text { margin-top: 11.25px; font-size: 20px; line-height: 32px; color: var(--ml-bg); }
.ml-stat__link { margin-top: 22px; font-size: var(--ml-fs-15); font-weight: 700; color: var(--ml-accent); }

/* Per-card backgrounds (editor: Card background). Photo keeps the Figma card;
   the solid tones swap the text colours so every line stays WCAG AA:
   navy — figure #e63946 4.5:1 (large text), link on --ml-accent-soft 8.2:1;
   red — white 5.1:1; pink — --ml-red-deep 4.9:1 and ink text. */
.ml-stat--navy { background: var(--ml-navy); }
.ml-stat--navy .ml-stat__link { color: var(--ml-accent-soft); }
.ml-stat--red { background: var(--ml-red); }
.ml-stat--red .ml-stat__figure,
.ml-stat--red .ml-stat__link { color: var(--ml-bg); }
.ml-stat--pink { background: var(--ml-pink-soft); color: var(--ml-ink-2); }
.ml-stat--pink:hover,
.ml-stat--pink:focus-visible,
.ml-stat--pink .ml-stat__text { color: var(--ml-ink-2); }
.ml-stat--pink .ml-stat__figure,
.ml-stat--pink .ml-stat__link { color: var(--ml-red-deep); }

.ml-stats__cta { display: flex; }

@media (max-width: 991px) {
  .ml-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ml-stats__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); gap: 32px; }
  .ml-stats__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-stats__badge { display: none; }
  .ml-stats__grid { grid-template-columns: 1fr; }
  .ml-stats__cta .ml-btn { width: 100%; }
}
/* Case summary — image + client logo | definition list of facts (Sandra's
   case-study sketch, "Media & Summary"). */
.ml-casesum--light { background: var(--ml-bg); }
.ml-casesum--soft { background: var(--ml-bg-lilac); }
.ml-casesum__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px 64px;
  align-items: start;
  padding-top: var(--band-pt, 96px);
  padding-bottom: var(--band-pb, 96px);
}
.ml-casesum__media { display: flex; flex-direction: column; gap: 24px; }
.ml-casesum__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ml-casesum__placeholder { width: 100%; aspect-ratio: 3 / 2; background: var(--ml-bg-lilac); }
.ml-casesum__logo img { display: block; max-width: 220px; max-height: 72px; width: auto; height: auto; }

.ml-casesum__facts { margin: 0; border-top: 1px solid var(--ml-line-2); }
.ml-casesum__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ml-line-2);
}
.ml-casesum__label {
  margin: 0;
  font-family: var(--ml-font-2);
  font-size: var(--ml-fs-12);
  font-weight: 700;
  letter-spacing: 1.68px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ml-ink-2);
}
.ml-casesum__text { margin: 0; font-size: var(--ml-fs-16); line-height: 1.55; color: var(--ml-ink-2-soft); }
.ml-casesum__text a { color: var(--ml-red); }
.ml-casesum__text a:hover,
.ml-casesum__text a:focus-visible { text-decoration: none; }

@media (max-width: 991px) {
  .ml-casesum__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .ml-casesum__inner { padding-top: var(--band-pt-sm, 56px); padding-bottom: var(--band-pb-sm, 56px); }
  .ml-casesum__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}
/* Case studies listing (Sandra's scribble, 14 Sep): Midnight page, two
   dropdown filters, two cards per row with a 4:3 photo under the four-layer
   treatment (photo · tint · logo plate · caption), logo wall. The red tint is
   an accent on positions 2 and 5 of every six visible cards — module.js
   recounts after every filter. All colours are tokens; the gradient stops are
   Sandra's values expressed through the palette. */
.ml-cases { background: var(--ml-navy); color: var(--ml-bg); }
.ml-cases__inner { display: flex; flex-direction: column; padding-top: 56px; padding-bottom: 96px; }

/* filters */
.ml-cases__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid color-mix(in srgb, var(--ml-bg) 15%, transparent);
}
.ml-cases__filter { display: flex; flex-direction: column; gap: 10px; }
.ml-cases__filter-label { display: block; }
.ml-cases__select { position: relative; display: block; }
.ml-cases__select select {
  appearance: none;
  -webkit-appearance: none;
  width: 236px;
  max-width: 100%;
  height: 51px;
  padding: 0 46px 0 18px;
  border: 1px solid color-mix(in srgb, var(--ml-bg) 42%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--ml-bg);
  font: inherit;
  font-size: var(--ml-fs-15);
  font-weight: 500;
  cursor: pointer;
}
.ml-cases__select select option { color: var(--ml-navy); background: var(--ml-bg); }
.ml-cases__select select:focus-visible { outline: 2px solid var(--ml-bg); outline-offset: 2px; }
.ml-cases__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--ml-bg);
  border-bottom: 1.6px solid var(--ml-bg);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ml-cases__count { margin: 0 0 16px auto; font-size: var(--ml-fs-14); color: color-mix(in srgb, var(--ml-bg) 55%, transparent); }

/* cards */
.ml-cases__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.ml-cases__item { display: flex; min-width: 0; }
.ml-cases__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--ml-bg) 12%, transparent);
  background: var(--ml-navy-band);
  color: var(--ml-bg);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.ml-cases__card:hover,
.ml-cases__card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ml-bg) 35%, transparent); color: var(--ml-bg); }
.ml-cases__card:hover .ml-cases__title,
.ml-cases__card:focus-visible .ml-cases__title { color: var(--ml-accent-soft); } /* Sandra, 15 Sep: no underline, pink like the filter labels */

/* image: four layers in one 4:3 frame */
.ml-cases__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ml-navy-deep); }
.ml-cases__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.45) contrast(1.05) brightness(0.92); /* keep this order */
}
.ml-cases__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ml-navy-band) 55%, transparent) 0%, color-mix(in srgb, var(--ml-navy) 78%, transparent) 100%);
}
.ml-cases__item--accent .ml-cases__tint {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ml-red-deep) 58%, transparent) 0%, color-mix(in srgb, var(--ml-navy-deep) 80%, transparent) 100%);
}
.ml-cases__plate {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 64%;
  min-height: 96px;
  padding: 20px 28px;
  background: color-mix(in srgb, var(--ml-bg) 78%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--ml-navy) 30%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transform: translate(-50%, -50%);
}
.ml-cases__plate img { display: block; width: auto; height: auto; max-width: 100%; max-height: 64px; }
.ml-cases__plate-name { font-size: var(--ml-fs-16); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ml-navy-ink); }
.ml-cases__caption { position: absolute; right: 20px; bottom: 16px; left: 20px; font-size: var(--ml-fs-13); color: color-mix(in srgb, var(--ml-bg) 72%, transparent); }

.ml-cases__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.ml-cases__industry { display: block; }
/* heading policy: styled body text, never hN */
.ml-cases__title { font-size: var(--ml-fs-20); font-weight: 700; line-height: 1.3; color: var(--ml-bg); }
.ml-cases__teaser { font-size: var(--ml-fs-15); line-height: 1.6; color: color-mix(in srgb, var(--ml-bg) 78%, transparent); }
.ml-cases__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ml-cases__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--ml-bg) 45%, transparent);
  font-size: var(--ml-fs-12);
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ml-bg);
}
.ml-cases__empty { margin: 0; text-align: center; font-size: var(--ml-fs-18); color: color-mix(in srgb, var(--ml-bg) 70%, transparent); }

.ml-cases__more-wrap { display: flex; justify-content: center; margin-top: 48px; }
.ml-cases__more {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border: 1px solid color-mix(in srgb, var(--ml-bg) 60%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--ml-bg);
  font: inherit;
  font-size: var(--ml-fs-14);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ml-cases__more:hover,
.ml-cases__more:focus-visible { background: var(--ml-bg); color: var(--ml-navy); }

/* logo wall */
.ml-cases__wall { margin-top: 72px; padding-top: 56px; border-top: 1px solid color-mix(in srgb, var(--ml-bg) 12%, transparent); }
.ml-cases__wall-title { margin: 0 0 32px; font-size: var(--ml-fs-23); font-weight: 600; color: var(--ml-bg); }
.ml-cases__wall-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ml-cases__wall-item {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 12px 20px;
  border-left: 1px solid color-mix(in srgb, var(--ml-bg) 12%, transparent);
}
.ml-cases__wall-item:first-child { border-left: 0; }
/* logos are delivered dark (--ml-navy-ink) for the plate; the wall turns the
   same file white, so editors upload one logo per client */
.ml-cases__wall-item img { display: block; width: auto; height: auto; max-width: 280px; max-height: 72px; opacity: 0.85; filter: brightness(0) invert(1); } /* Sandra, 15 Sep: about twice the previous size */

@media (max-width: 991px) {
  .ml-cases__grid { gap: 24px; }
}
@media (max-width: 767px) {
  .ml-cases__inner { padding-top: 40px; padding-bottom: 64px; }
  .ml-cases__filters { gap: 16px; margin-bottom: 32px; }
  .ml-cases__filter,
  .ml-cases__select select { width: 100%; }
  .ml-cases__count { margin: 0; }
  .ml-cases__grid { grid-template-columns: 1fr; }
  .ml-cases__body { padding: 20px 20px 24px; }
  .ml-cases__wall { margin-top: 56px; padding-top: 40px; }
  .ml-cases__wall-item { flex-basis: 50%; }
}
/* CTA band — centred closing section on the navy artwork. */

.ml-ctaband {
  position: relative;
  background: var(--ml-navy);
  overflow: hidden;
}
.ml-ctaband__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ml-ctaband__radial { width: 100%; height: 100%; object-fit: cover; }
.ml-ctaband__motif {
  position: absolute;
  top: -178.88px;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
}

.ml-ctaband__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 31.285px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-ctaband__title {
  margin: 0;
  max-width: 100%;
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-bg);
  white-space: pre-line;
}
.ml-ctaband__text { margin: 0; max-width: 720px; font-size: var(--ml-fs-21); line-height: 32.55px; color: var(--ml-bg); }
.ml-ctaband__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 23px; }

@media (max-width: 767px) {
  .ml-ctaband__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-ctaband__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-ctaband__motif { top: 0; width: auto; min-width: 100%; height: 100%; object-fit: cover; }
  .ml-ctaband__ctas { width: 100%; gap: 12px; }
  .ml-ctaband__ctas .ml-btn { width: 100%; }
}

/* Optional sub-line under the buttons (Figma: Leistung CTA) */
.ml-ctaband__sub { margin: 24px 0 0; font-size: var(--ml-fs-16); text-align: center; position: relative; z-index: 1; }
.ml-ctaband__sub-prefix { color: var(--ml-accent-tint); }
.ml-ctaband__sub-link { margin-left: 6px; font-weight: 700; color: var(--ml-bg); text-decoration: none; }
.ml-ctaband__sub-link:hover,
.ml-ctaband__sub-link:focus-visible { text-decoration: underline; color: var(--ml-bg); }
/* FAQ — native <details>/<summary> disclosure: keyboard and screen-reader
   support come from the platform, no JS needed. */

.ml-faq--light { background: var(--ml-bg); }
.ml-faq--soft { background: var(--ml-bg-lilac); }

.ml-faq__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-faq__head,
.ml-faq__list {
  width: 100%;
  max-width: 996px;
  margin-right: auto;
  margin-left: auto;
}
.ml-faq__head { display: flex; flex-direction: column; gap: 18px; }
.ml-faq__head p { margin: 0; }
.ml-faq__title {
  margin: 0;
  max-width: 700px;
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-ink-2);
  white-space: pre-line;
}

.ml-faq__list {
  border-top: 1px solid var(--ml-line-2);
}
.ml-faq__item { border-bottom: 1px solid var(--ml-line-2); }

.ml-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 4px;
  font-size: var(--ml-fs-19);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ml-ink-2);
  cursor: pointer;
  list-style: none;
}
.ml-faq__q::-webkit-details-marker { display: none; }

.ml-faq__marker {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 10px;
  color: var(--ml-accent);
  transition: transform 0.15s ease;
}
.ml-faq__marker svg { display: block; width: 100%; height: 100%; }
.ml-faq__marker .ml-icon { width: 100%; height: 100%; }
.ml-faq__item[open] .ml-faq__marker { transform: rotate(180deg); }

.ml-faq__a {
  max-width: 768px;
  padding: 0 4px 28px;
  font-size: var(--ml-fs-17);
  font-weight: 400;
  line-height: 27.2px;
  color: var(--ml-ink-2-soft);
}
.ml-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .ml-faq__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); gap: 32px; }
  .ml-faq__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-faq__q { padding-right: 4px; padding-left: 4px; }
}
/* Feature slider — dark berry radial band (industry dark gradient tokens,
   anchored top-left per Figma 09), bordered plum cards, bare white chevrons. */
.ml-fslider {
  position: relative;
  background:
    radial-gradient(120% 130% at 0% 0%,
      var(--ml-industry-grad-1) 0%,
      var(--ml-industry-grad-2) 33%,
      var(--ml-industry-grad-3) 49%,
      var(--ml-industry-grad-4) 78%);
  overflow: hidden;
}

.ml-fslider__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}

.ml-fslider__head { display: flex; flex-direction: column; gap: 18px; max-width: 790px; }
.ml-fslider__eyebrow { margin: 0; }
.ml-fslider__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); color: var(--ml-bg); }

.ml-fslider__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.ml-fslider__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ml-bg);
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ml-fslider__chevron:hover,
.ml-fslider__chevron:focus-visible { transform: scale(1.12); }
.ml-fslider__chevron[disabled] { opacity: 0.3; cursor: default; transform: none; }

.ml-fslider__track {
  margin: 0;
  padding: 4px;
  list-style: none;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ml-fslider__track::-webkit-scrollbar { display: none; }
.ml-fslider__track:focus-visible { outline: 2px solid var(--ml-accent-tint); outline-offset: 4px; }

.ml-fslider__card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 32px;
  background: color-mix(in srgb, var(--ml-card-plum) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--ml-red) 45%, transparent);
  scroll-snap-align: start;
}
.ml-fslider__track--2 .ml-fslider__card { width: calc((100% - 24px) / 2); }
.ml-fslider__track--3 .ml-fslider__card { width: calc((100% - 48px) / 3); }
.ml-fslider__track--4 .ml-fslider__card { width: calc((100% - 72px) / 4); }

/* heading policy: styled body text, never hN */
.ml-fslider__card-title { font-size: var(--ml-fs-18); font-weight: 700; color: var(--ml-bg); }
.ml-fslider__card-text { font-size: var(--ml-fs-15); line-height: 1.6; color: color-mix(in srgb, var(--ml-bg) 86%, transparent); }

.ml-fslider__dots {
  display: none;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  gap: 8px;
}
.ml-fslider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ml-bg) 35%, transparent);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.ml-fslider__dot.is-active { background: var(--ml-bg); transform: scale(1.25); }

@media (max-width: 991px) {
  .ml-fslider__track--3 .ml-fslider__card,
  .ml-fslider__track--4 .ml-fslider__card { width: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .ml-fslider__inner { gap: 28px; padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-fslider__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-fslider__stage { grid-template-columns: 1fr; }
  .ml-fslider__chevron { display: none; }
  /* chevrons are gone here, so the dots carry the slider affordance */
  .ml-fslider__dots { display: flex; }
  .ml-fslider__track--2 .ml-fslider__card,
  .ml-fslider__track--3 .ml-fslider__card,
  .ml-fslider__track--4 .ml-fslider__card { width: 86%; }
}
/* Photo cards (Figma 09: Team + Standorte) — photo + attached navy panel:
   white bold title, red sub line, optional soft white text, red arrow button. */
.ml-gallery--light { background: var(--ml-bg); }
.ml-gallery--soft { background: var(--ml-bg-lilac); }

.ml-gallery__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}

.ml-gallery__head { display: flex; flex-direction: column; gap: 18px; max-width: 790px; }
.ml-gallery__head--center { align-self: center; align-items: center; text-align: center; }
.ml-gallery__eyebrow { margin: 0; }
.ml-gallery__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); color: var(--ml-navy-deep); }

.ml-gallery__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 32px 24px;
}
.ml-gallery__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-gallery__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-gallery__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ml-gallery__figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.ml-gallery__media { display: block; overflow: hidden; background: color-mix(in srgb, var(--ml-navy-deep) 8%, var(--ml-bg)); }
.ml-gallery__media--1-1 { aspect-ratio: 1 / 1; }
.ml-gallery__media--4-3 { aspect-ratio: 4 / 3; }
.ml-gallery__media--3-4 { aspect-ratio: 3 / 4; }
.ml-gallery__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* "Show the whole image": the frame keeps the chosen ratio so the grid stays
   aligned, the photo is scaled to fit instead of cropped (Eric, 9 Sep). */
.ml-gallery__media--fit-contain img { object-fit: contain; }

.ml-gallery__panel {
  flex: 1;
  display: flex;
  /* top-aligned: with unequal text lengths (Standorte) centering pushed the
     short cards' titles down out of line with the long one (Figma 09) */
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: var(--ml-card-plum);
}
.ml-gallery__panel-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* heading policy: styled body text, never hN */
.ml-gallery__name { font-size: var(--ml-fs-20); font-weight: 700; color: var(--ml-bg); }
.ml-gallery__role {
  font-size: var(--ml-fs-15);
  font-weight: 700;
  /* --ml-red on plum is 3.65:1 and fails WCAG AA; the accent-soft token is the
     established substitute on dark cards (QA R2-2) at 7.46:1 */
  color: var(--ml-accent-soft);
}
.ml-gallery__text {
  margin-top: 6px;
  font-size: var(--ml-fs-15);
  line-height: 1.65;
  color: color-mix(in srgb, var(--ml-bg) 88%, transparent);
}
.ml-gallery__arrow {
  flex: 0 0 auto;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--ml-red);
  color: var(--ml-bg);
  font-size: var(--ml-fs-18);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.ml-gallery__arrow:hover,
.ml-gallery__arrow:focus-visible { background: var(--ml-red-hover); color: var(--ml-bg); }

@media (max-width: 991px) {
  .ml-gallery__grid--3,
  .ml-gallery__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ml-gallery__inner { gap: 32px; padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-gallery__grid--2,
  .ml-gallery__grid--3 { grid-template-columns: 1fr; }
  .ml-gallery__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-gallery__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
}
/* Hero + Form (LP) — dark art band, copy left / HubSpot form right.
   Visual language: hero.module art presets; form skin maps the HS markup
   (.hs-form) onto the theme tokens. Submit mirrors .ml-btn--primary. */

.ml-heroform {
  position: relative;
  /* the global header overlays the band (its bottom sits at ~154px), so the
     copy needs to clear it — 150px put the h1 right under the menu row */
  padding: 210px 20px 110px;
  background: var(--ml-navy);
  overflow: hidden;
}

.ml-heroform__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ml-heroform__cover,
.ml-heroform__radial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ml-heroform__motif {
  position: absolute;
  inset: 0;
  width: 129%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translateX(-14.5%);
}

.ml-heroform__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ml-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: 90px;
  /* top-aligned, not centred: the eyebrow and the form's first label share one
     top line, as on the old landing page (Sandra, 1 Sep) */
  align-items: start;
}

.ml-heroform__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ml-heroform__eyebrow { margin: 0; }
.ml-heroform__title {
  margin: 0;
  /* the old landing page used 86px; 50 read as too small next to it, so the LP
     hero scales up to 72px and stays fluid below (Sandra, 31 Aug) */
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ml-azure); /* art heroes carry the solid azure h1 (41:3599) */
}
.ml-heroform__text {
  font-size: var(--ml-fs-21);
  line-height: 1.55;
  color: var(--ml-azure);
}
.ml-heroform__text p { margin: 0 0 10px; }
.ml-heroform__text p:last-child { margin-bottom: 0; }

/* ── HubSpot form skin ────────────────────────────────────────────────── */
/* HubSpot emits <h3 class="form-title"></h3> even with no title set; an empty
   heading broke the outline (h1 -> h3) in the 30-Aug audit. display:none also
   takes it out of the accessibility tree. */
.ml-heroform__formwrap .form-title:empty { display: none; }
.ml-heroform__formwrap .hs-form fieldset { max-width: none; }
.ml-heroform__formwrap .hs-form-field { margin-bottom: 10px; }
.ml-heroform__formwrap .hs-form-field > label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--ml-fs-15);
  font-weight: 700;
  color: var(--ml-bg);
}
/* Every field must start and end on the same line (Sandra, 31 Aug).
   !important is required here, not laziness: HubSpot injects a stylesheet per
   form embed whose selectors carry that form's own generated id class
   (`.hs-form-f3607f26-… fieldset .hs-input { width: 95% }` plus an 8px right
   margin on `.input`). The id differs per form, so no author selector can
   outrank it generically, and it is injected after the theme CSS. Verified with
   CSS.getMatchedStylesForNode before reaching for this. */
.ml-heroform__formwrap .input { margin-right: 0 !important; }
.ml-heroform__formwrap .hs-input { width: 100% !important; }
.ml-heroform__formwrap input[type="checkbox"].hs-input,
.ml-heroform__formwrap input[type="radio"].hs-input { width: auto !important; }
.ml-heroform__formwrap .hs-input {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 0;
  background: var(--ml-bg);
  font-family: var(--ml-font);
  font-size: var(--ml-fs-16);
  color: var(--ml-ink-2);
}
.ml-heroform__formwrap textarea.hs-input { min-height: 84px; resize: vertical; }
.ml-heroform__formwrap .hs-input:focus-visible {
  outline: 2px solid var(--ml-accent-tint);
  outline-offset: 2px;
}
/* Two-column rows are laid out by us, not by HubSpot's floats. HubSpot keeps
   its columns side by side down to roughly 520px of form width and gives them
   no gutter, so on a phone the two white inputs touched and read as one field
   (Sandra, 1 Sep). A grid gives a predictable gutter, a real single column on
   small screens, and cells that always span their full width so every row
   lines up with the full-width rows. */
.ml-heroform__formwrap .form-columns-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.ml-heroform__formwrap .form-columns-2 .hs-form-field {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* left aligned on purpose: Sandra prefers this over the old centred block */
.ml-heroform__formwrap .legal-consent-container { text-align: left; }
.ml-heroform__formwrap .legal-consent-container,
.ml-heroform__formwrap .legal-consent-container .hs-richtext,
.ml-heroform__formwrap .legal-consent-container p {
  font-size: var(--ml-fs-13);
  line-height: 1.5;
  color: var(--ml-white-60);
}
.ml-heroform__formwrap .legal-consent-container a {
  color: var(--ml-bg);
  text-decoration: underline;
}
/* HubSpot's rich text leaves a trailing paragraph margin that stacked with the
   submit spacing into a 42px hole; same per-form-id stylesheet as above, so the
   same justified !important applies. The gap below is then deliberate. */
.ml-heroform__formwrap .legal-consent-container .hs-richtext:last-child { margin-bottom: 0 !important; }
.ml-heroform__formwrap .hs-error-msgs { margin: 6px 0 0; padding: 0; list-style: none; }
.ml-heroform__formwrap .hs-error-msgs label { color: var(--ml-accent-tint); font-size: var(--ml-fs-13); }
.ml-heroform__formwrap .submitted-message {
  font-size: var(--ml-fs-21);
  color: var(--ml-azure);
}

/* submit — mirrors .ml-btn / .ml-btn--primary (kept in sync with
   css/elements/_buttons.css; HS markup cannot carry our classes) */
/* the old landing page puts 22px between the privacy text and the button; an
   empty HubSpot fieldset sits in between and contributes ~22px on its own, so
   the explicit margin is the remainder (Sandra: "compare to the old form") */
.ml-heroform__formwrap .hs_submit { margin-top: 0; }
/* the submit sizes to its label like every other button in the theme; stretched
   to the full form width it read as an oversized bar (Sandra, 31 Aug) */
.ml-heroform__formwrap .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 50px;
  padding: 12px 28px;
  border: 0;
  border-radius: 0;
  font-family: var(--ml-font);
  font-size: var(--ml-fs-18);
  font-weight: 500;
  letter-spacing: var(--ml-ls-tight);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  background: var(--ml-red);
  color: var(--ml-bg);
}
.ml-heroform__formwrap .hs-button:hover,
.ml-heroform__formwrap .hs-button:focus-visible {
  background: var(--ml-red-hover);
  color: var(--ml-bg);
}

.ml-heroform__placeholder {
  padding: 44px 40px;
  background: color-mix(in srgb, var(--ml-bg) 8%, transparent);
  border: 1px dashed var(--ml-white-60);
}
.ml-heroform__placeholder-note {
  margin: 0;
  font-size: var(--ml-fs-16);
  color: var(--ml-azure);
}

@media (max-width: 991px) {
  .ml-heroform { padding: 170px 40px 80px; }
  .ml-heroform__inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
  .ml-heroform__formwrap .form-columns-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ml-heroform { padding: 140px 20px 64px; }
  .ml-heroform__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}
/* Hero — Figma Section/Hero Home. Dark navy band, artwork bleed, gradient headline. */

.ml-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--ml-hero-min-h, 900px);
  padding: 150px 20px 56px;
  background: var(--ml-navy);
  overflow: hidden;
}

.ml-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ml-hero__radial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ml-hero__motif {
  position: absolute;
  inset: 0;
  width: 129%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translateX(-14.5%);
}
.ml-hero__radial svg,
.ml-hero__motif svg { display: block; width: 100%; height: 100%; } /* inline SVG fills its wrapper */

.ml-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ml-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 31px;
}

.ml-hero__eyebrow {
  margin: 0;
  color: var(--ml-accent-tint);
  letter-spacing: var(--ml-ls-eyebrow);
}
.ml-hero__eyebrow .ml-eyebrow { color: inherit; }

.ml-hero__title {
  margin: 0;
  max-width: 821px;
  font-family: var(--ml-font);
  font-size: clamp(2.5rem, 6vw, var(--ml-fs-86));
  font-weight: 600;
  line-height: 1.15;
  background-image: linear-gradient(40deg, var(--ml-azure-77) 19.69%, var(--ml-accent) 65.98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: pre-line;
}

.ml-hero__text {
  max-width: 680px;
  color: var(--ml-accent-tint);
  font-size: var(--ml-fs-21);
  line-height: 32.55px;
}
.ml-hero__text p:last-child { margin-bottom: 0; }

.ml-hero__ctas { display: flex; flex-wrap: wrap; gap: 23px; }

.ml-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--ml-fs-13-5);
  font-weight: 500;
  color: var(--ml-white-60);
}
.ml-hero__trust li { display: flex; align-items: center; gap: 18px; }
.ml-hero__trust li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--ml-accent);
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .ml-hero { padding: 140px 20px 56px; min-height: 0; }
  .ml-hero__inner { gap: 24px; }
  .ml-hero__title { max-width: none; }
  .ml-hero__text { font-size: var(--ml-fs-18); line-height: 1.6; }
  .ml-hero__ctas { gap: 12px; width: 100%; }
  .ml-hero__ctas .ml-btn { width: 100%; }
}

/* Styles-tab background system */
.ml-hero--flat { background: var(--ml-navy); }
.ml-hero--bg-navy { background: var(--ml-navy); }
.ml-hero--bg-navy-deep { background: var(--ml-navy-deep); }
.ml-hero--bg-light { background: var(--ml-bg); color: var(--ml-ink); }
.ml-hero--bg-soft { background: var(--ml-bg-lilac); color: var(--ml-ink); }
.ml-hero__custom-bg { position: absolute; inset: 0; overflow: hidden; }
.ml-hero__custom-bg img { width: 100%; height: 100%; object-fit: cover; }

/* Flat light/soft surfaces need light-surface foregrounds (QA R2-1) */
.ml-hero--bg-light .ml-hero__title,
.ml-hero--bg-soft .ml-hero__title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--ml-navy-deep); }
.ml-hero--bg-light .ml-hero__text,
.ml-hero--bg-soft .ml-hero__text { color: var(--ml-ink-soft); }
.ml-hero--bg-light .ml-hero__eyebrow .ml-eyebrow,
.ml-hero--bg-soft .ml-hero__eyebrow .ml-eyebrow { color: var(--ml-red); }
.ml-hero--bg-light .ml-hero__trust,
.ml-hero--bg-soft .ml-hero__trust { color: var(--ml-ink-soft); }

/* Art-preset heroes: the h1 uses solid --ml-azure in Figma (41:3599); the
   azure-to-accent gradient belongs to the navy motif. Eyebrows use the
   --ml-accent-tint token. */
.ml-hero--art .ml-hero__title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--ml-azure);
}

/* Explicit "solid" choice — must come AFTER --art (same specificity) so the
   editor's choice wins the cascade, and must stay readable on light surfaces:
   on white/soft grounds "solid" means solid INK, not near-white (code audit,
   30 Aug: light + solid produced an almost invisible headline). */
.ml-hero--title-solid .ml-hero__title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--ml-azure);
}
.ml-hero--bg-light.ml-hero--title-solid .ml-hero__title,
.ml-hero--bg-soft.ml-hero--title-solid .ml-hero__title { color: var(--ml-navy-deep); }
/* Image + text cards — unboxed columns: 3:2 image, bold title, soft text,
   red arrow link. Interim geometry (no 09 Figma ref yet); tokens only. */
.ml-itcards--light { background: var(--ml-bg); }
.ml-itcards--soft { background: var(--ml-bg-lilac); }

.ml-itcards__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}

.ml-itcards__head { display: flex; flex-direction: column; gap: 18px; max-width: 790px; }
.ml-itcards__eyebrow { margin: 0; }
.ml-itcards__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); color: var(--ml-navy-deep); }
.ml-itcards__intro { margin: 0; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); color: var(--ml-ink-3); }

.ml-itcards__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 40px 24px;
}
.ml-itcards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-itcards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-itcards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ml-itcards__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.ml-itcards__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ml-bg-lilac); }
.ml-itcards__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ml-itcards__card-title { margin-top: 8px; font-size: var(--ml-fs-23); font-weight: 700; line-height: 1.25; color: var(--ml-ink-2); }
.ml-itcards__card-text { font-size: var(--ml-fs-16-5); line-height: 1.55; color: var(--ml-ink-soft); }
.ml-itcards__link { margin-top: auto; padding-top: 6px; font-size: var(--ml-fs-16); font-weight: 700; color: var(--ml-red); }
a.ml-itcards__card:hover .ml-itcards__link,
a.ml-itcards__card:focus-visible .ml-itcards__link { text-decoration: underline; }

@media (max-width: 991px) {
  .ml-itcards__grid--3,
  .ml-itcards__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ml-itcards__inner { gap: 32px; padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-itcards__grid--2,
  .ml-itcards__grid--3,
  .ml-itcards__grid--4 { grid-template-columns: 1fr; }
  .ml-itcards__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
}
/* Industry cards — Figma Section/Branchen Services. Fixed composites use the
   checked-in imgVector25–29 layers; cards 3/4 include the cited dark radial.
   Container width stays at today's canon; tracks become 302px after G1. */

.ml-industries { background: var(--ml-bg); }
.ml-industries__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ml-gap-lg);
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-industries__head {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 90px;
  align-items: start;
}
.ml-industries__head-main { display: flex; flex-direction: column; gap: 18px; }
.ml-industries__head-main > p { margin: 0; }
.ml-industries__title {
  margin: 0;
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-ink-2);
  white-space: pre-line;
}
.ml-industries__head-copy { display: flex; flex-direction: column; gap: var(--ml-gap); padding-top: 7.75px; }
.ml-industries__intro { font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); color: var(--ml-ink-2-soft); }
.ml-industries__intro p:last-child { margin-bottom: 0; }

.ml-industries__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ml-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-industries__grid--3 { grid-template-columns: repeat(3, minmax(0, 302px)); justify-content: center; }
.ml-industries__cell { display: flex; min-width: 0; }
.ml-industry {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 284px;
  min-width: 0;
  padding: 37px 31px;
  background: var(--ml-navy-deep);
  box-shadow: 0 0 5px color-mix(in srgb, var(--ml-ink) 15%, transparent);
  color: var(--ml-bg);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ml-industry--dark { box-shadow: 0 0 10px color-mix(in srgb, var(--ml-ink) 15%, transparent); }
.ml-industry:hover,
.ml-industry:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ml-navy) 16%, transparent);
  color: var(--ml-bg);
}
.ml-industry__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ml-navy-deep);
}
.ml-industry__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.ml-industry--dark .ml-industry__art {
  background: radial-gradient(farthest-corner at 95% 3%,
    var(--ml-industry-grad-1) 0%,
    var(--ml-industry-grad-2) 33%,
    var(--ml-industry-grad-3) 49%,
    var(--ml-industry-grad-4) 66%);
}
.ml-industry__title,
.ml-industry__sub { position: relative; z-index: 1; }
.ml-industry__title { font-size: var(--ml-fs-21); font-weight: 700; line-height: normal; }
.ml-industry__sub { font-size: var(--ml-fs-15); color: var(--ml-bg-soft); line-height: normal; }

.ml-industries__discover,
.ml-industries__discover .ml-arrow-link { width: 100%; }
.ml-industries .ml-industries__discover .ml-arrow-link {
  display: block;
  color: var(--ml-red);
  font-size: var(--ml-fs-16);
  font-weight: 700;
  text-decoration: none;
}
.ml-industries__discover .ml-arrow-link__head {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
}
.ml-industries__discover .ml-arrow-link__arrow { order: 2; }
.ml-industries__discover .ml-arrow-link:hover .ml-arrow-link__head { text-decoration: underline; }

@media (max-width: 991px) {
  .ml-industries__head { grid-template-columns: 1fr; gap: 32px; }
  .ml-industries__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ml-industries__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-industries__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-industries__grid { grid-template-columns: 1fr; }
}
/* Know-how / lead-magnet band — Figma 7:1461. */

.ml-knowhow {
  padding-right: var(--ml-pad-x);
  padding-left: var(--ml-pad-x);
}
.ml-knowhow--light { background: var(--ml-bg); }
.ml-knowhow--soft { background: var(--ml-bg-lilac); }
.ml-knowhow__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 90px;
  width: 100%;
  max-width: 1416px;
  margin: 0 auto;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-knowhow__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.ml-knowhow__head > p,
.ml-knowhow__title,
.ml-knowhow__text p,
.ml-knowhow__card-eyebrow,
.ml-knowhow__card-title,
.ml-knowhow__card-text p { margin: 0; }
.ml-knowhow__title {
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-ink-2);
  white-space: pre-line;
}
.ml-knowhow__text,
.ml-knowhow__card-text {
  font-size: var(--ml-fs-20);
  font-weight: 400;
  line-height: var(--ml-lh-32);
  color: var(--ml-ink-2-soft);
}

.ml-knowhow__card {
  position: relative;
  min-width: 0;
  min-height: 0; /* hug content — a short card left a huge pink void (Sandra, 24 Aug) */
  padding: 44px 40px;
  background: var(--ml-pink-soft);
  overflow: hidden;
}
.ml-knowhow__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Figma 29:620 layer spec (Dev-Mode panel, 28 Aug): the signet group carries
     opacity .15 with a flat #FFD0D0 base, and the three vectors are
     color/red/56 gradients at 80/50/50 percent - the STRONG vectors make the
     facets survive the .15; earlier the vectors were weak pink, which is why
     removing .15 looked like the fix. */
  opacity: 0.15;
  background: var(--ml-pink-signet);
  pointer-events: none;
}
.ml-knowhow__signet {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  max-width: none;
}
.ml-knowhow__signet--1 { right: 0; width: 45.75%; }
.ml-knowhow__signet--2,
.ml-knowhow__signet--3 { left: 0; width: 100%; }
.ml-knowhow__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ml-knowhow__card-eyebrow .ml-eyebrow { color: var(--ml-red-deep); }
.ml-knowhow__card-title {
  font-size: var(--ml-fs-23);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ml-ink-2);
}
.ml-knowhow__cta { display: flex; }

@media (max-width: 991px) {
  .ml-knowhow { padding-right: 40px; padding-left: 40px; }
  .ml-knowhow__inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 767px) {
  .ml-knowhow { padding-right: 20px; padding-left: 20px; }
  .ml-knowhow__inner { gap: 32px; padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-knowhow__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-knowhow__card { min-height: 0; padding: 36px 24px; }
  .ml-knowhow__cta,
  .ml-knowhow__cta .ml-btn { width: 100%; }
}
/* Logo slider — static, wrapping trust strip. No carousel behavior is needed. */

.ml-logo-slider--light { background: var(--ml-bg); }
.ml-logo-slider--soft { background: var(--ml-bg-lilac); }
.ml-logo-slider--dark { background: var(--ml-navy); }

.ml-logo-slider__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ml-gap);
  padding-top: var(--band-pt, 48px); padding-bottom: var(--band-pb, 0px);
}
.ml-logo-slider__eyebrow { margin: 0; text-align: center; }
.ml-logo-slider__eyebrow .ml-eyebrow { line-height: 15px; }
.ml-logo-slider__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 48px;
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-logo-slider__item,
.ml-logo-slider__link,
.ml-logo-slider__logo,
.ml-logo-slider__placeholder {
  width: 128px;
  height: 48px;
}
.ml-logo-slider__link,
.ml-logo-slider__logo,
.ml-logo-slider__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml-logo-slider__link { text-decoration: none; }
.ml-logo-slider__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.ml-logo-slider__placeholder {
  border-radius: 0; /* no rounded corners in the ML26 canon */
  background: var(--ml-ink-soft);
  color: var(--ml-logo-placeholder-text);
  font-size: var(--ml-fs-16);
  line-height: 1;
}

@media (max-width: 767px) {
  .ml-logo-slider__list { row-gap: var(--ml-gap); }
  .ml-logo-slider__inner { padding-top: var(--band-pt-sm, 48px); padding-bottom: var(--band-pb-sm, 24px); }
}
/* Main navigation — Figma section-navigation. The desktop row returns only at
   1120px; below that, the mega panel remains nested in the drawer flow. */

.ml-nav {
  width: 100%;
  color: var(--ml-bg);
}

.ml-nav__inner {
  position: relative;
  max-width: 1416px;
  margin: 0 auto;
  padding: 0 48px;
}

.ml-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 24px;
}

.ml-nav__logo {
  display: inline-flex;
  width: 180px;
  height: 36px;
}

.ml-nav__logo svg,
.ml-nav__logo img {
  width: 100%;
  height: 100%;
}

.ml-nav__utility {
  display: flex;
  align-items: center;
  gap: 28px;
}

.ml-nav__utility-list {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml-nav__utility-list a {
  color: var(--ml-bg);
  font-size: var(--ml-fs-13);
  font-weight: 500;
  letter-spacing: var(--ml-ls-wide);
  line-height: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.ml-nav__utility-list a:hover,
.ml-nav__lang a:hover {
  color: var(--ml-accent-soft);
}

.ml-nav__divider {
  width: 1px;
  height: 14px;
  background: var(--ml-white-30);
}

.ml-nav__lang {
  display: flex;
  gap: 6px;
}

.ml-nav__lang a {
  color: var(--ml-white-50);
  font-size: var(--ml-fs-13);
  font-weight: 500;
  letter-spacing: 1.04px;
  text-decoration: none;
}

.ml-nav__lang a[aria-current="page"] {
  color: var(--ml-bg);
  font-weight: 700;
}

.ml-nav__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 0 24px;
}

.ml-nav__menu {
  flex: 1 1 auto;
}

.ml-nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ml-bg);
  cursor: pointer;
  font-family: var(--ml-font);
  font-size: var(--ml-fs-15);
  font-weight: 700;
  letter-spacing: var(--ml-ls-wide);
  line-height: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.ml-nav__link:hover,
.ml-nav__link[aria-expanded="true"] {
  color: var(--ml-accent-soft);
}

.ml-nav__caret {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.ml-nav__link[aria-expanded="true"] .ml-nav__caret {
  transform: rotate(180deg);
}

.ml-nav__cta {
  flex: 0 0 auto;
}

.ml-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}

.ml-nav__burger-bar {
  width: 24px;
  height: 2px;
  background: var(--ml-bg);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ml-nav__burger[aria-expanded="true"] .ml-nav__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.ml-nav__burger[aria-expanded="true"] .ml-nav__burger-bar:nth-child(2) {
  opacity: 0;
}

.ml-nav__burger[aria-expanded="true"] .ml-nav__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.ml-mega {
  position: absolute;
  z-index: 60;
  top: 100%;
  right: 48px;
  left: 48px;
  color: var(--ml-ink);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--ml-navy) 25%, transparent);
}

.ml-mega__panels {
  display: flex;
  align-items: stretch;
}

.ml-mega__links {
  flex: 1 1 auto;
  padding: 40px 80px;
  background: var(--ml-bg);
}
/* dropdowns with more than five links run in two columns */
.ml-mega__list--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, max-content));
  gap: 10px 56px;
}
.ml-mega__overview { display: block; text-decoration: none; }
.ml-mega__overview-link {
  display: block;
  margin-top: 6px;
  color: var(--ml-ink);
  font-size: var(--ml-fs-13);
  font-weight: 600;
  letter-spacing: var(--ml-ls-tight);
}
.ml-mega__overview:hover .ml-mega__overview-link,
.ml-mega__overview:focus-visible .ml-mega__overview-link { color: var(--ml-red); }
.ml-nav__link--static { cursor: default; }
.ml-nav__link--static:hover { color: var(--ml-bg); }

/* Quick Lane: the second column of the Figma dropdown (situational shortcuts) */
.ml-mega__quick {
  flex: 0 0 auto;
  min-width: 300px;
  max-width: 360px;
  padding: 40px 20px 40px 40px;
  background: var(--ml-bg-soft);
}
.ml-mega__quick .ml-mega__item-title { display: flex; gap: 2px; }

.ml-mega__proof {
  display: flex;
  flex: 0 0 440px;
  padding: 40px;
  background: var(--ml-bg-soft);
}

.ml-mega__links > p,
.ml-mega__quick > p,
.ml-mega__hubs > p,
.ml-mega__proof-card > p {
  margin: 0;
}

.ml-mega__proof-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
  background: var(--ml-navy-deep);
  color: var(--ml-bg);
}

.ml-mega__proof-title {
  font-family: var(--ml-font-2);
  font-size: var(--ml-fs-26);
  font-weight: 700;
  line-height: 1.25;
}

.ml-mega__proof-text {
  color: var(--ml-muted);
  font-family: var(--ml-font-2);
  font-size: var(--ml-fs-16);
  line-height: 22px;
}

.ml-mega__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ml-mega__item {
  display: block;
  padding: 4px 0;
  text-decoration: none;
}

.ml-mega__item-title {
  display: block;
  color: var(--ml-ink);
  font-size: var(--ml-fs-16);
  font-weight: 600;
  letter-spacing: var(--ml-ls-tight);
  line-height: 15px;
}

.ml-mega__item-sub {
  display: block;
  margin-top: 4px;
  color: var(--ml-ink-soft);
  font-size: var(--ml-fs-13);
  line-height: 15px;
}

.ml-mega__item:hover .ml-mega__item-title,
.ml-mega__arrow {
  color: var(--ml-red);
}

.ml-mega__hubs {
  padding: 20px 40px 30px 80px;
  border-top: 1px solid var(--ml-muted);
  background: var(--ml-bg);
}

.ml-mega__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ml-mega__pill {
  padding: 10px 17px;
  border-radius: var(--ml-round-chip);
  background: var(--ml-bg-soft);
  color: var(--ml-ink);
  font-size: 13.4px;
  font-weight: 600;
  letter-spacing: 0.58px;
  line-height: 12.5px;
}

body.ml-nav-lock {
  overflow: hidden;
}

@media (max-width: 1119px) {
  .ml-nav__utility {
    display: none;
  }

  .ml-nav__burger {
    display: inline-flex;
  }

  .ml-nav__main {
    position: absolute;
    z-index: 60;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    max-height: calc(100vh - 84px);
    padding: 16px 48px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ml-navy);
  }

  .ml-nav--open .ml-nav__main {
    display: flex;
  }

  .ml-nav__list {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .ml-nav__item {
    border-bottom: 1px solid var(--ml-white-30);
  }

  .ml-nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 14px 0;
  }

  .ml-nav__cta {
    padding-top: 16px;
  }

  .ml-nav__cta .ml-btn {
    width: 100%;
  }

  .ml-mega {
    position: static;
    box-shadow: none;
  }

  .ml-mega__panels {
    flex-direction: column;
  }

  .ml-mega__links,
  .ml-mega__quick,
  .ml-mega__proof {
    flex-basis: auto;
    min-width: 0;
    padding: 20px;
  }

  .ml-mega__list--cols {
    grid-template-columns: 1fr;
  }

  .ml-mega__hubs {
    display: none;
  }
}

@media (max-width: 767px) {
  .ml-nav__inner {
    padding: 0 20px;
  }

  .ml-nav__main {
    padding-right: 20px;
    padding-left: 20px;
  }
}
/* Table of contents for long pages — the blog post's pink card, promoted to a
   band module so it can sit anywhere on a pillar page. */
.ml-ptoc--light { background: var(--ml-bg); }
.ml-ptoc--soft { background: var(--ml-bg-lilac); }
.ml-ptoc[hidden] { display: none; }

.ml-ptoc__inner {
  padding-top: var(--band-pt, 64px);
  padding-bottom: var(--band-pb, 64px);
}
.ml-ptoc__card {
  max-width: 952px;
  margin: 0 auto;
  padding: 32px 36px;
  background: var(--ml-pink-soft);
}
/* heading policy: styled body text, never hN */
.ml-ptoc__title {
  margin: 0 0 18px;
  font-size: var(--ml-fs-23);
  font-weight: 700;
  color: var(--ml-ink-2);
}
.ml-ptoc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ptoc;
}
.ml-ptoc__list--2 { column-count: 2; column-gap: 48px; }
.ml-ptoc__item { margin: 0 0 12px; break-inside: avoid; }
.ml-ptoc__item--sub { padding-left: 20px; }
.ml-ptoc__link {
  font-size: var(--ml-fs-16-5);
  line-height: 1.5;
  color: var(--ml-ink-2-soft);
  text-decoration: none;
}
.ml-ptoc__item--sub .ml-ptoc__link { font-size: var(--ml-fs-15); }
.ml-ptoc__link::before {
  content: counter(ptoc) ". ";
  counter-increment: ptoc;
  font-weight: 700;
  color: var(--ml-red);
}
.ml-ptoc__item--sub .ml-ptoc__link::before { content: none; }
.ml-ptoc__link:hover,
.ml-ptoc__link:focus-visible { color: var(--ml-ink-2); text-decoration: underline; }

@media (max-width: 767px) {
  .ml-ptoc__inner { padding-top: var(--band-pt-sm, 40px); padding-bottom: var(--band-pb-sm, 40px); }
  .ml-ptoc__card { padding: 26px 22px; }
  .ml-ptoc__list--2 { column-count: 1; }
}
/* Process Steps — numbered rows (Figma 61:3868, Leistung page).
   Row 1120×187 centered, padding 44/24, lilac card, red 01. numerals. */
.ml-steps { background: var(--ml-bg); }
.ml-steps--soft { background: var(--ml-bg-lilac); }
.ml-steps__inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-steps__head { max-width: 760px; display: flex; flex-direction: column; gap: var(--ml-gap); }
.ml-steps__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); } /* locked regardless of h2/h3 (QA R2-3) */
.ml-steps__intro { margin: 0; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); color: var(--ml-ink-soft); }
.ml-steps__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 1120px);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ml-steps__row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  min-height: 187px; /* Figma row height (QA R2-11) */
  padding: 44px 24px;
  background: var(--ml-bg-lilac);
}
.ml-steps--soft .ml-steps__row { background: var(--ml-bg); }
.ml-steps__num {
  flex: 0 0 130px;
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
  color: var(--ml-red);
  font-variant-numeric: tabular-nums;
}
.ml-steps__content { flex: 1 1 auto; max-width: 758px; padding-top: 13px; }
.ml-steps__text { margin: 0; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); color: var(--ml-ink-soft); }
.ml-steps__lead { font-weight: 700; color: var(--ml-ink); }
.ml-steps__result { margin: 12px 0 0; font-size: var(--ml-fs-16); font-weight: 700; color: var(--ml-red); }

/* LOTSE stages — 1280px row with marker, title and body tracks (Figma 41:3055). */
.ml-steps--stages .ml-steps__list {
  align-self: center;
  width: min(calc(100vw - var(--ml-pad-x) - var(--ml-pad-x)), 1280px);
}
.ml-steps--stages .ml-steps__row {
  display: grid;
  grid-template-columns: 130px 300px minmax(0, 1fr);
  column-gap: 48px;
  min-height: 187px;
}
.ml-steps--stages .ml-steps__num {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 130px;
}
.ml-steps__letter {
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
  color: var(--ml-red);
}
.ml-steps__stage {
  font-size: var(--ml-fs-16);
  font-weight: 400;
  line-height: 22px;
  color: var(--ml-ink-soft);
}
.ml-steps__titles { display: flex; flex-direction: column; gap: 6px; }
.ml-steps__name {
  margin: 0;
  font-size: var(--ml-fs-30);
  font-weight: 700;
  line-height: 34px;
  color: var(--ml-ink);
}
.ml-steps__sub {
  margin: 0;
  font-size: var(--ml-fs-16);
  line-height: 22px;
  color: var(--ml-ink-soft);
}
.ml-steps--stages .ml-steps__content { max-width: none; padding-top: 0; }
.ml-steps--stages .ml-steps__text {
  font-size: var(--ml-fs-16);
  line-height: 28px;
  color: var(--ml-ink-soft);
}

@media (max-width: 991px) {
  .ml-steps--stages .ml-steps__list { width: 100%; }
  .ml-steps--stages .ml-steps__row { grid-template-columns: 1fr; gap: 24px; }
  .ml-steps--stages .ml-steps__num {
    flex-direction: row;
    align-items: baseline;
    width: auto;
  }
}

@media (max-width: 767px) {
  .ml-steps__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-steps__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); gap: 40px; }
  .ml-steps__row { flex-direction: column; gap: 8px; padding: 24px 20px; min-height: 0; }
  .ml-steps__num { flex-basis: auto; font-size: 42px; line-height: 47px; }
  .ml-steps__content { padding-top: 0; }
  .ml-steps--stages .ml-steps__row { gap: 8px; min-height: 0; }
  .ml-steps--stages .ml-steps__num { gap: 12px; }
  .ml-steps__letter { font-size: 42px; line-height: 47px; }
}
/* Quote / Case Highlight — wide plum card (Figma 61:3844, Leistung page).
   Card 1280×271, padding 41px 35px, left case column 400px + right quote. */
.ml-quote { background: var(--ml-bg); }
.ml-quote--soft { background: var(--ml-bg-lilac); }
.ml-quote__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-quote__head { display: flex; flex-direction: column; gap: var(--ml-gap); }
.ml-quote__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); } /* locked regardless of h2/h3 (QA R2-3) */
.ml-quote__card {
  position: relative;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 60px;
  min-height: 271px;
  margin: 0;
  padding: 41px 35px;
  background: var(--ml-card-plum);
  border: 1px solid var(--ml-line-3);
  color: var(--ml-bg);
  overflow: hidden;
}
/* quote-only: no case column, the quote spans the card (Eric, 9 Sep) */
.ml-quote__card--solo { grid-template-columns: minmax(0, 1fr); align-content: center; }
.ml-quote__bg { position: absolute; top: -360px; right: -90px; width: 1370px; height: 1370px; pointer-events: none; opacity: 0.5; }
.ml-quote__bg img { position: absolute; right: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-quote__case,
.ml-quote__body { position: relative; z-index: 1; }
.ml-quote__case { display: flex; flex-direction: column; gap: 23px; padding-top: 13px; }
.ml-quote__case-text { margin: 0; font-size: var(--ml-fs-16); line-height: 26.4px; }
.ml-quote__case-link { font-size: var(--ml-fs-16); font-weight: 700; color: var(--ml-accent-soft); text-decoration: none; } /* accent = 4.43:1 on plum — AA fail (QA R2-2) */
.ml-quote__case-link:hover,
.ml-quote__case-link:focus-visible { text-decoration: underline; color: var(--ml-accent-soft); }
.ml-quote__mark { display: block; font-size: 72px; font-weight: 700; line-height: 46px; color: var(--ml-accent); }
.ml-quote__quote { margin: 16px 0 0; }
.ml-quote__text { margin: 0; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); }
.ml-quote__attribution { margin-top: 8px; font-size: var(--ml-fs-16); color: var(--ml-accent-tint); }

@media (max-width: 900px) {
  .ml-quote__card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  .ml-quote__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-quote__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); gap: 32px; }
  .ml-quote__card { padding: 28px 24px; }
}
/* Related posts — coloured head block + title + teaser (Figma 65:6252
   "Andere Beiträge"). The head block carries the post's first tag and date;
   "Featured image" swaps it for the post image. */
.ml-relposts--light { background: var(--ml-bg); }
.ml-relposts--soft { background: var(--ml-bg-lilac); }

.ml-relposts__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}

.ml-relposts__head { display: flex; flex-direction: column; gap: 18px; max-width: 790px; }
.ml-relposts__head--center { align-self: center; align-items: center; text-align: center; }
.ml-relposts__eyebrow { margin: 0; }
.ml-relposts__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); color: var(--ml-navy-deep); }

.ml-relposts__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 32px 24px;
}
.ml-relposts__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-relposts__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-relposts__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ml-relposts__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.ml-relposts__cardhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  overflow: hidden;
  text-align: center;
}
.ml-relposts__cardhead--slate { background: var(--ml-post-card-head); }
.ml-relposts__cardhead--navy { background: var(--ml-navy-deep); }
.ml-relposts__cardhead--berry { background: var(--ml-blog-author-2); }
.ml-relposts__cardhead--red { background: var(--ml-red); }
.ml-relposts__cardhead--image { padding: 0; background: var(--ml-bg-lilac); }
.ml-relposts__cardhead--image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* "case": the case studies listing's media treatment (cases-listing.module,
   keep the two in step): 4:3 photo, desaturated, under the navy tint; the
   accent items (2nd and 5th of six) get the red tint. No logo plate here:
   the client logos live in the listing's Clients list, not on the posts. */
.ml-relposts__cardhead--case { position: relative; aspect-ratio: 4 / 3; padding: 0; background: var(--ml-navy-deep); }
.ml-relposts__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.45) contrast(1.05) brightness(0.92); /* keep this order */
}
.ml-relposts__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ml-navy-band) 55%, transparent) 0%, color-mix(in srgb, var(--ml-navy) 78%, transparent) 100%);
}
.ml-relposts__item--accent .ml-relposts__tint {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ml-red-deep) 58%, transparent) 0%, color-mix(in srgb, var(--ml-navy-deep) 80%, transparent) 100%);
}

.ml-relposts__kicker {
  font-size: var(--ml-fs-30);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ml-bg);
}
.ml-relposts__date {
  font-size: var(--ml-fs-13);
  color: color-mix(in srgb, var(--ml-bg) 82%, transparent);
}

/* heading policy: styled body text, never hN */
.ml-relposts__card-title { font-size: var(--ml-fs-20); font-weight: 700; line-height: 1.3; color: var(--ml-ink-2); }
.ml-relposts__card-text { font-size: var(--ml-fs-16-5); line-height: 1.55; color: var(--ml-ink-soft); }
.ml-relposts__card:hover .ml-relposts__card-title,
.ml-relposts__card:focus-visible .ml-relposts__card-title { text-decoration: underline; }

@media (max-width: 991px) {
  .ml-relposts__grid--3,
  .ml-relposts__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ml-relposts__inner { gap: 32px; padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-relposts__grid--2,
  .ml-relposts__grid--3,
  .ml-relposts__grid--4 { grid-template-columns: 1fr; }
  .ml-relposts__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
}
/* Image slider — scroll-snap track, square nav buttons in the head row.
   Works without JS (native scroll); module.js wires the buttons. */
.ml-slider--light { background: var(--ml-bg); }
.ml-slider--soft { background: var(--ml-bg-lilac); }

.ml-slider__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}

.ml-slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.ml-slider__headings { display: flex; flex-direction: column; gap: 18px; max-width: 790px; }
.ml-slider__eyebrow { margin: 0; }
.ml-slider__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); color: var(--ml-navy-deep); }

.ml-slider__nav { display: flex; gap: 8px; }
.ml-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--ml-line-3);
  border-radius: 0;
  background: var(--ml-bg);
  color: var(--ml-navy-deep);
  font-size: var(--ml-fs-18);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ml-slider__btn:hover,
.ml-slider__btn:focus-visible { background: var(--ml-navy-deep); color: var(--ml-bg); border-color: var(--ml-navy-deep); }
.ml-slider__btn[disabled] { opacity: 0.35; cursor: default; }
.ml-slider__btn[disabled]:hover { background: var(--ml-bg); color: var(--ml-navy-deep); border-color: var(--ml-line-3); }

.ml-slider__track {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ml-slider__track:focus-visible { outline: 2px solid var(--ml-accent-tint); outline-offset: 4px; }
.ml-slider__slide {
  flex: 0 0 auto;
  width: min(720px, 92%);
  scroll-snap-align: start;
}
.ml-slider__figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ml-slider__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ml-bg-lilac); }
.ml-slider__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* "Show the whole image": slides keep one height, the photo is never cropped. */
.ml-slider__media--fit-contain img { object-fit: contain; }
.ml-slider__caption { font-size: var(--ml-fs-15); color: var(--ml-ink-soft); }

@media (max-width: 767px) {
  .ml-slider__inner { gap: 28px; padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-slider__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-slider__slide { width: 92%; }
}
/* Text columns — covers Figma "Text 40-60 Light" and "Text 50-50 Dark". */

.ml-textcols { position: relative; padding: 0; overflow: hidden; }
.ml-textcols--light { background: var(--ml-bg); }
.ml-textcols--soft { background: var(--ml-bg-lilac); }
.ml-textcols--dark { background: var(--ml-navy); color: var(--ml-bg); }
.ml-textcols__radial { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ml-textcols__radial img { width: 100%; height: 100%; object-fit: cover; }

.ml-textcols__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 90px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-textcols__inner--40-60 { grid-template-columns: 400px 1fr; }
.ml-textcols__inner--50-50 { grid-template-columns: 1fr 1fr; }
/* 65-35: Figma 06 Branche S3 splits 829/451 so the six help items stay on one line
   each while the service tags sit in a narrow side rail (QA pages-56 MED-2). */
.ml-textcols__inner--65-35 { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); gap: 40px; }
.ml-textcols__inner--50-50.ml-textcols__inner--with-stages { grid-template-columns: minmax(0, 1fr) 645px; }

.ml-textcols__head { display: flex; flex-direction: column; gap: 18px; }
.ml-textcols__head .ml-textcols__title { margin-bottom: 14px; } /* headline breathes before text/checklist (Sandra, 25 Aug) */
.ml-textcols__head > p { margin: 0; }
.ml-textcols__title {
  margin: 0;
  font-size: var(--ml-fs-42);
  font-weight: 700;
  line-height: var(--ml-lh-47);
  color: var(--ml-navy-deep);
  white-space: pre-line;
}
.ml-textcols--dark .ml-textcols__title { color: var(--ml-bg); }

.ml-textcols__body { padding-top: 8px; display: flex; flex-direction: column; gap: 27px; }
.ml-textcols__text { font-size: var(--ml-fs-20); font-weight: 400; line-height: var(--ml-lh-32); color: var(--ml-ink-3); }
.ml-textcols__highlight { font-size: var(--ml-fs-26); font-weight: 500; line-height: 37.7px; color: var(--ml-navy-deep); }
.ml-textcols__text p,
.ml-textcols__highlight p { margin: 0; }
.ml-textcols--dark .ml-textcols__highlight em { color: var(--ml-accent); } /* Figma Amaranth on dark; large-text AA 4.4:1 (QA R2-8) */
.ml-textcols__highlight em { color: var(--ml-red); font-style: normal; }
.ml-textcols--dark .ml-textcols__body,
.ml-textcols--dark .ml-textcols__text,
.ml-textcols--dark .ml-textcols__highlight { color: var(--ml-bg); }

/* stage strip */
/* One row, always: the 5 stages share the column and shrink instead of wrapping
   (5x121 + gaps exceeds a 50/50 column at 1440). */
.ml-stages {
  display: grid;
  grid-template-columns: repeat(var(--ml-stage-count, 5), minmax(0, 121px));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-stages__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ml-stages__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 121px;
  height: 122px;
  background: var(--ml-accent-16);
  border: 1px solid color-mix(in srgb, var(--ml-accent) 50%, transparent);
  font-size: var(--ml-fs-50);
  font-weight: 700;
  color: var(--ml-bg);
}
.ml-stages__name { font-size: var(--ml-fs-13-5); font-weight: 500; line-height: 1; color: color-mix(in srgb, var(--ml-bg) 62%, transparent); text-align: center; overflow-wrap: anywhere; }

.ml-textcols__note { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.ml-textcols__note-title { font-weight: 700; }
.ml-textcols__note-detail { font-size: var(--ml-fs-16); opacity: 0.8; }

@media (max-width: 991px) {
  .ml-textcols__inner--40-60,
  .ml-textcols__inner--50-50,
  .ml-textcols__inner--65-35 { grid-template-columns: 1fr; gap: 32px; }
}
/* Stages variant collapses earlier: the fixed 645px track would clip the
   headline ("Gewässer." = 198.8px @42px Bould Bold) between 992-1013px (QA R2-4). */
@media (max-width: 1023px) {
  .ml-textcols__inner--50-50.ml-textcols__inner--with-stages { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
  .ml-textcols__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); }
  .ml-textcols__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-stages { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
  .ml-stages__box { width: 100%; height: auto; aspect-ratio: 121 / 122; }
}

/* Optional content image (Figma Elements variants) */
.ml-textcols__image { margin: 24px 0 0; }
/* mirrored columns (Figma 09): head column right, content column left */
.ml-textcols__inner--mirror .ml-textcols__head { order: 2; }
.ml-textcols__inner--mirror .ml-textcols__body { order: 1; }
@media (min-width: 992px) {
  .ml-textcols__inner--mirror.ml-textcols__inner--40-60 { grid-template-columns: 1fr 400px; }
}
@media (max-width: 991px) {
  .ml-textcols__inner--mirror .ml-textcols__head { order: 0; }
  .ml-textcols__inner--mirror .ml-textcols__body { order: 1; }
}
/* the stages variant collapses at 1023px, so its mirror order must reset there
   too — otherwise 992-1023px showed the body above the heading (code audit) */
@media (max-width: 1023px) {
  .ml-textcols__inner--mirror.ml-textcols__inner--with-stages .ml-textcols__head { order: 0; }
  .ml-textcols__inner--mirror.ml-textcols__inner--with-stages .ml-textcols__body { order: 1; }
}

/* media-only body: the two columns centre on each other (Sandra, 28 Aug) */
.ml-textcols__inner--media-center { align-items: center; }
.ml-textcols__inner--media-center .ml-textcols__body { padding-top: 0; }
.ml-textcols__inner--media-center .ml-textcols__image { margin-top: 0; }
.ml-textcols__image img { display: block; max-width: 100%; height: auto; } /* no width here: the editor's size lands as the img width attribute (a presentational hint), and any author width — 100% or auto — would override it (Sandra, 28 Aug) */

/* Full-width single-column presentation (Figma: Leistung intro / "Für wen das passt") */
.ml-textcols__inner--full { display: block; }
.ml-textcols__inner--full .ml-textcols__head { max-width: none; }
.ml-textcols__inner--full .ml-textcols__body { max-width: none; padding-top: 8px; }
.ml-textcols--intro .ml-textcols__body { padding-inline: 90px; }
.ml-textcols--intro .ml-textcols__text { font-size: var(--ml-fs-23); line-height: 36px; }
@media (max-width: 767px) {
  .ml-textcols--intro .ml-textcols__body { padding-inline: 0; }
  .ml-textcols--intro .ml-textcols__text { font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); }
}

/* Check-marked list (Figma: Leistungen band — 30px red box, 12×9.4 white check) */
.ml-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 27.2px; }
.ml-checklist__item { display: flex; gap: 12px; align-items: flex-start; }
.ml-checklist__box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--ml-red); color: var(--ml-bg); }
.ml-checklist__text { font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); min-width: 0; overflow-wrap: anywhere; }
.ml-textcols__head .ml-checklist { gap: 18px; }
.ml-textcols--dark .ml-checklist__text { color: var(--ml-bg); }

/* Optional linked/unlinked service tags (Figma 66:7097). */
.ml-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-tags__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--ml-bg) 22%, transparent);
  background: color-mix(in srgb, var(--ml-bg) 12%, transparent);
  color: var(--ml-bg);
  font-size: var(--ml-fs-16);
  line-height: 22px;
}
.ml-tags__link { color: inherit; text-decoration: none; }
.ml-tags__link:hover,
.ml-tags__link:focus-visible { text-decoration: underline; }
.ml-textcols--light .ml-tags__item,
.ml-textcols--soft .ml-tags__item {
  border-color: color-mix(in srgb, var(--ml-ink) 12%, transparent);
  background: var(--ml-bg-lilac);
  color: var(--ml-ink);
}

/* Narrow measure for full-width mode (Figma 41-4376: Platinum status section) */
.ml-textcols--narrow .ml-textcols__head,
.ml-textcols--narrow .ml-textcols__body { max-width: 760px; }

/* Badge right of the text — full-width mode (Figma 41-3615) */
/* the badge centres on the text it sits next to; start-aligned it hung low
   whenever the copy was shorter than 311px (Sandra, 1 Sep) */
.ml-textcols__body--with-badge { display: grid; grid-template-columns: minmax(0, 1fr) 311px; gap: 60px; align-items: center; }
.ml-textcols__body--with-badge .ml-textcols__badge { width: 311px; height: 311px; }
@media (max-width: 1023px) {
  .ml-textcols__body--with-badge { grid-template-columns: minmax(0, 1fr); }
  .ml-textcols__body--with-badge .ml-textcols__badge { width: 180px; height: 180px; }
}

/* Accordion — expandable service list in the content column (Figma 61-4616).
   Closed row 51px (1px top rule + 50px title row); chevron rotates open. */
.ml-acc { display: flex; flex-direction: column; }
.ml-acc__item { border-top: 1px solid color-mix(in srgb, var(--ml-bg) 22%, transparent); }
.ml-acc__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ml-bg) 22%, transparent); }
.ml-acc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 50px; padding: 9px 0;
  font-size: var(--ml-fs-20); font-weight: 700; line-height: var(--ml-lh-32);
  cursor: pointer; list-style: none;
}
.ml-acc__summary::-webkit-details-marker { display: none; }
.ml-acc__summary:focus-visible { outline: 2px solid var(--ml-accent-soft); outline-offset: 2px; }
.ml-acc__marker { display: inline-flex; transform: rotate(-90deg); transition: transform 0.15s ease; }
.ml-acc__item[open] > .ml-acc__summary .ml-acc__marker { transform: rotate(0deg); }
.ml-acc__body { padding: 0 0 21px; }
.ml-acc__text { margin: 0; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); }
.ml-acc__link { display: inline-block; margin-top: 8px; font-size: var(--ml-fs-16); font-weight: 700; text-decoration: none; }
.ml-acc__link:hover, .ml-acc__link:focus-visible { text-decoration: underline; }
.ml-textcols--dark .ml-acc__summary { color: var(--ml-bg); }
.ml-textcols--dark .ml-acc__text { color: var(--ml-accent-tint); }
.ml-textcols--dark .ml-acc__link { color: var(--ml-accent-soft); }
.ml-textcols--light .ml-acc__summary, .ml-textcols--soft .ml-acc__summary { color: var(--ml-ink); }
.ml-textcols--light .ml-acc__text, .ml-textcols--soft .ml-acc__text { color: var(--ml-ink-soft); }
.ml-textcols--light .ml-acc__link, .ml-textcols--soft .ml-acc__link { color: var(--ml-red); }
@media (prefers-reduced-motion: reduce) { .ml-acc__marker { transition: none; } }

/* Video shares the image slot (Sandra, 27 Aug) */
.ml-textcols__video video { display: block; width: 100%; height: auto; background: var(--ml-navy); }
/* Value Cards — 2×2 dark signet cards (Figma 61:3747, Leistung page).
   Card: 468×271, padding 41px 35px, plum #14102a + three signet vectors,
   border 1px line-3. Title Bould Bold 23 white; text 16 white. */
.ml-vcards { background: var(--ml-bg); }
.ml-vcards--soft { background: var(--ml-bg-lilac); }
.ml-vcards__inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding-top: var(--band-pt, 120px);
  padding-bottom: var(--band-pb, 120px);
}
.ml-vcards__head { max-width: 760px; display: flex; flex-direction: column; gap: var(--ml-gap); }
.ml-vcards__title { margin: 0; font-size: var(--ml-fs-42); font-weight: 700; line-height: var(--ml-lh-47); } /* locked regardless of h2/h3 (QA R2-3) */
.ml-vcards__intro { margin: 0; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); color: var(--ml-ink-soft); }
.ml-vcards__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 27px;
  width: min(100%, 968px);
}
.ml-vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 271px;
  padding: 41px 35px;
  background: var(--ml-card-plum);
  border: 1px solid var(--ml-line-3);
  color: var(--ml-bg);
  text-decoration: none;
  overflow: hidden;
}
a.ml-vcard { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.ml-vcard:hover,
a.ml-vcard:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--ml-navy) 20%, transparent); color: var(--ml-bg); }
.ml-vcard__bg { position: absolute; top: -21px; left: -6px; width: 473px; height: 478px; pointer-events: none; }
.ml-vcard__bg img { position: absolute; display: block; }
.ml-vcard__bg-v1 { left: 251px; top: 0; width: 223px; height: 1001px; }
.ml-vcard__bg-v2 { left: -3px; top: -6px; width: 487px; height: 1000px; opacity: 0.7; }
.ml-vcard__bg-v3 { left: -236px; top: -43px; width: 487px; height: 1007px; }
.ml-vcard__title,
.ml-vcard__text,
.ml-vcard__link { position: relative; z-index: 1; }
.ml-vcard__title { margin-top: 20px; font-size: var(--ml-fs-23); font-weight: 700; line-height: normal; }
.ml-vcard__text { flex: 1 1 auto; margin-top: 13.145px; font-size: var(--ml-fs-16); line-height: normal; }
.ml-vcard__link { margin-top: 24px; font-size: var(--ml-fs-16); font-weight: 700; color: var(--ml-accent-soft); } /* accent = 4.43:1 on plum — AA fail (QA R2-2) */
a.ml-vcard:hover .ml-vcard__link { text-decoration: underline; }

@media (max-width: 900px) {
  .ml-vcards__grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .ml-vcard { min-height: 0; }
}
@media (max-width: 767px) {
  .ml-vcards__title { font-size: clamp(1.75rem, 8vw, var(--ml-fs-42)); line-height: 1.12; }
  .ml-vcards__inner { padding-top: var(--band-pt-sm, 64px); padding-bottom: var(--band-pb-sm, 64px); gap: 40px; }
  .ml-vcard { padding: 28px 24px; }
}

/* Templates: blog + case study (system/dev keep their own file via template_css) */
/* Blog post template (Figma 65:6252 "BLOG PAGE").
   Bands: warm-white title header → dark meta band → body + sticky TOC →
   violet/berry author band. Colours are theme tokens (see theme-overrides). */

/* ── Title header ─────────────────────────────────────────────────────── */
.ml-post {
  /* the global header is a transparent overlay built for dark heroes; the post
     header is warm white, so the band paints a navy strip exactly as tall as
     the header (measured: 154px desktop, 68px from 991px down) — Figma 65:6252
     shows the same dark nav strip above the cream title band */
  --ml-post-nav-h: 154px;
}
.ml-post__header {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ml-post-nav-h) + 56px) 20px 64px;
  /* same pink-cream band as the blog listing, signet facets via .ml-bloglist__art
     in the template (Sandra, 8 Sep) */
  background:
    linear-gradient(100deg, var(--ml-blog-meta-1) 0%, var(--ml-blog-meta-2) 100%) top / 100% var(--ml-post-nav-h) no-repeat,
    var(--ml-bloglist-hero-bg);
}
.ml-post__header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.ml-post__title {
  max-width: 952px;
  margin: 0;
  font-size: var(--ml-fs-50);
  font-weight: 700;
  line-height: 1.16;
  text-align: center;
  color: var(--ml-navy-deep);
}
.ml-post__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  width: 100%;
  max-width: 952px;
  font-size: var(--ml-fs-16);
  color: var(--ml-ink-soft);
}
.ml-post__avatar {
  display: inline-flex;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: var(--ml-bg-lilac);
}
.ml-post__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-post__author { font-weight: 700; color: var(--ml-ink-2); }
.ml-post__date::before { content: "·"; margin-right: 12px; color: var(--ml-ink-soft); }

/* ── Meta-description band ────────────────────────────────────────────── */
.ml-post__lead {
  padding: 56px 20px;
  background: linear-gradient(100deg, var(--ml-blog-meta-1) 0%, var(--ml-blog-meta-2) 100%);
}
.ml-post__lead-inner { display: flex; justify-content: center; }
.ml-post__lead p {
  max-width: 952px;
  margin: 0;
  font-size: var(--ml-fs-21);
  line-height: 1.55;
  text-align: center;
  color: var(--ml-bg);
}

/* ── Body + table of contents ─────────────────────────────────────────── */
.ml-post__main { padding: 0 20px; background: var(--ml-bg); }
.ml-post__main-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 72px;
  align-items: start;
  padding-top: 96px;
  padding-bottom: 120px;
}
.ml-post__meta-date {
  margin: 0 0 10px;
  font-family: var(--ml-font-2);
  font-size: var(--ml-fs-13);
  font-weight: 700;
  letter-spacing: 2.08px;
  text-transform: uppercase;
  color: var(--ml-red);
}
/* Prose rules below are guarded against module wrappers — modules the editor
   inserts into a post body bring their own colours and rhythm (Eric, 9 Sep). */
.ml-post__body {
  max-width: 790px;
  font-size: var(--ml-fs-18);
  line-height: 1.7;
  color: var(--ml-ink-3);
  /* bands inserted into a post body use the compact rhythm, like case studies */
  --band-pt: 48px;
  --band-pb: 48px;
  --band-pt-sm: 32px;
  --band-pb-sm: 32px;
}
.ml-post__body .hs_cos_wrapper_type_module,
.ml-post__body .hs-module { display: block; margin: 0; }
.ml-post__body h2:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  margin: 48px 0 18px;
  font-size: var(--ml-fs-34);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ml-navy-deep);
  scroll-margin-top: 120px;
}
.ml-post__body h3:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  margin: 36px 0 14px;
  font-size: var(--ml-fs-23);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ml-navy-deep);
}
.ml-post__body > *:first-child { margin-top: 0; }
.ml-post__body p:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin: 0 0 20px; }
.ml-post__body ul:not(.hs_cos_wrapper_type_module *):not(.hs-module *),
.ml-post__body ol:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin: 0 0 20px; padding-left: 22px; }
.ml-post__body li:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin-bottom: 8px; }
.ml-post__body a:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { color: var(--ml-accent-soft-ink, var(--ml-red)); }
.ml-post__body img:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { display: block; max-width: 100%; height: auto; margin: 32px 0; }
.ml-post__body { overflow-wrap: anywhere; }
/* Comparison tables are normal blog content; they must scroll inside their own
   box instead of widening the page (mobile QA, 28 Aug: a table's min-content
   pushed the grid column 53px past the viewport). */
.ml-post__body table:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 28px 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--ml-fs-16);
}
.ml-post__body table th:not(.hs_cos_wrapper_type_module *):not(.hs-module *),
.ml-post__body table td:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  padding: 12px 16px;
  border: 1px solid var(--ml-line-3);
  text-align: left;
  vertical-align: top;
}
.ml-post__body table th:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  background: var(--ml-navy-deep);
  color: var(--ml-bg);
  font-weight: 700;
}
.ml-post__body table tr:nth-child(even) td:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { background: var(--ml-bg-lilac); }

.ml-post__body blockquote:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--ml-red);
  font-size: var(--ml-fs-21);
  line-height: 1.5;
  color: var(--ml-ink-2);
}

/* ── Accordion module inside the post body ────────────────────────────── */
/* Editors insert the portal's "Accordion" module (Design Manager id
   36537217116, built for the old theme) into the body for FAQ blocks. It ships
   JS but no CSS: on the old site its look came from the old theme's global
   stylesheet, so under this template each trigger rendered as a bare <button>
   (grey, centred, content-width — Sandra, 3 Sep). Styled here to match the FAQ
   module: full width, left-aligned, divider lines, chevron. */
.ml-post__body .accordion__group {
  margin: 28px 0 36px;
  border-top: 1px solid var(--ml-line-2);
}
.ml-post__body .accordion__item { border-bottom: 1px solid var(--ml-line-2); }
.ml-post__body .accordion__trigger {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 22px 4px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ml-ink-2);
  cursor: pointer;
}
.ml-post__body .accordion__trigger:focus-visible {
  outline: 2px solid var(--ml-accent);
  outline-offset: 2px;
}
.ml-post__body .accordion__title {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}
.ml-post__body .accordion__title h3,
.ml-post__body .accordion__title h4,
.ml-post__body .accordion__title p {
  margin: 0;
  font-size: var(--ml-fs-19);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  color: var(--ml-ink-2);
}
/* chevron drawn with borders — the module's icon span is empty */
.ml-post__body .accordion__icon {
  display: block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin: -5px 4px 0 0;
  border-right: 2px solid var(--ml-accent);
  border-bottom: 2px solid var(--ml-accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.ml-post__body .accordion__trigger[aria-expanded="true"] .accordion__icon {
  margin-top: 5px;
  transform: rotate(-135deg);
}
.ml-post__body .accordion__panel { padding: 0 4px 26px; }
.ml-post__body .accordion__panel[hidden] { display: none; }
.ml-post__body .accordion__content {
  max-width: 768px;
  font-size: var(--ml-fs-17);
  line-height: 1.6;
  color: var(--ml-ink-2-soft);
}
.ml-post__body .accordion__content p:last-child { margin-bottom: 0; }

.ml-post__toc {
  position: sticky;
  top: 120px;
  padding: 28px 26px;
  background: var(--ml-pink-soft);
}
.ml-post__toc-title { margin: 0 0 14px; font-size: var(--ml-fs-18); font-weight: 700; color: var(--ml-ink-2); }
.ml-post__toc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: toc; }
.ml-post__toc-list a {
  font-size: var(--ml-fs-16);
  line-height: 1.45;
  color: var(--ml-ink-2-soft);
  text-decoration: none;
}
.ml-post__toc-list a:hover,
.ml-post__toc-list a:focus-visible { color: var(--ml-ink-2); text-decoration: underline; }

/* ── Author band ──────────────────────────────────────────────────────── */
.ml-post__author-band {
  padding: 88px 20px;
  background: linear-gradient(115deg, var(--ml-blog-author-1) 0%, var(--ml-blog-author-2) 100%);
}
.ml-post__author-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 64px;
  align-items: start;
}
.ml-post__author-copy { display: flex; flex-direction: column; gap: 10px; max-width: 790px; }
.ml-post__author-label { margin: 0 0 14px; font-size: var(--ml-fs-21); color: var(--ml-bg); }
.ml-post__author-name { margin: 0; font-size: var(--ml-fs-34); font-weight: 700; line-height: 1.1; color: var(--ml-bg); }
.ml-post__author-role { margin: 0; font-size: var(--ml-fs-18); font-weight: 700; color: var(--ml-bg); }
.ml-post__author-bio { font-size: var(--ml-fs-18); line-height: 1.6; color: color-mix(in srgb, var(--ml-bg) 88%, transparent); }
.ml-post__author-bio p { margin: 0 0 12px; }
.ml-post__author-social { display: flex; gap: 16px; margin: 10px 0 0; padding: 0; list-style: none; }
.ml-post__author-social a { font-size: var(--ml-fs-15); font-weight: 700; color: var(--ml-accent-soft); text-decoration: none; }
.ml-post__author-social a:hover,
.ml-post__author-social a:focus-visible { text-decoration: underline; }
.ml-post__author-photo img { display: block; width: 100%; height: auto; object-fit: cover; }

@media (max-width: 991px) {
  .ml-post { --ml-post-nav-h: 68px; }
  .ml-post__header { padding: calc(var(--ml-post-nav-h) + 48px) 40px 48px; }
  .ml-post__main { padding: 0 40px; }
  .ml-post__main-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 64px; padding-bottom: 80px; }
  .ml-post__toc { position: static; order: -1; }
  .ml-post__author-band { padding: 64px 40px; }
  .ml-post__author-inner { grid-template-columns: 1fr; gap: 32px; }
  .ml-post__author-photo { max-width: 180px; }
}
@media (max-width: 767px) {
  .ml-post__header { padding: calc(var(--ml-post-nav-h) + 40px) 20px 40px; }
  .ml-post__title { font-size: clamp(1.9rem, 8vw, var(--ml-fs-50)); }
  .ml-post__lead { padding: 40px 20px; }
  .ml-post__lead p { font-size: var(--ml-fs-18); }
  .ml-post__main { padding: 0 20px; }
  .ml-post__body h2:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { font-size: var(--ml-fs-28); }
  .ml-post__author-band { padding: 56px 20px; }
  .ml-post__author-name { font-size: var(--ml-fs-28); }
}

/* ── Blog listing (Figma 65:6196 "BLOG LISTING PAGE", 1440×3002) ─────────
   Title band: pink-cream with the faint signet facets, H1 86px left, 82px
   page margin (1276 container). Lilac band: tag chips 40px, 3×326px cards on
   a 1040px grid (32px columns / 60px rows), centred pagination. */
.ml-bloglist { --ml-post-nav-h: 154px; }
.ml-bloglist__wide { max-width: 1276px; margin: 0 auto; }

.ml-bloglist__hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ml-post-nav-h) + 156px) 20px 154px;
  background:
    linear-gradient(100deg, var(--ml-blog-meta-1) 0%, var(--ml-blog-meta-2) 100%) top / 100% var(--ml-post-nav-h) no-repeat,
    var(--ml-bloglist-hero-bg);
}
/* signet facets, same layering as the know-how card, much fainter on cream */
.ml-bloglist__art {
  position: absolute;
  top: var(--ml-post-nav-h);
  right: 0;
  bottom: 0;
  width: 62%;
  opacity: 0.12;
  pointer-events: none;
}
.ml-bloglist__signet { position: absolute; top: 0; display: block; height: 100%; max-width: none; }
.ml-bloglist__signet--1 { right: 0; width: 45.75%; }
.ml-bloglist__signet--2,
.ml-bloglist__signet--3 { left: 0; width: 100%; }
.ml-bloglist__hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
/* copy rendered by listing-intro.module: its own H1 → subline rhythm (32px,
   raised from Figma's 26 on Sercan's request, 8 Sep); long headlines shrink */
.ml-bloglist__intro { display: flex; flex-direction: column; gap: 32px; }
.ml-bloglist__title.ml-bloglist__title--long { max-width: 1000px; font-size: 4rem; line-height: 1.05; }
.ml-bloglist__title {
  margin: 0;
  max-width: 900px;
  font-size: var(--ml-fs-86);
  font-weight: 700;
  line-height: 1;
  color: var(--ml-bloglist-title);
}
.ml-bloglist__lead { margin: 0; max-width: 660px; font-size: var(--ml-fs-21); line-height: 1.35; color: var(--ml-bloglist-lead); }

.ml-bloglist__main { padding: 81px 20px 90px; background: var(--ml-bg-lilac); }
.ml-bloglist__chips { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 60px; padding: 0; list-style: none; }
.ml-bloglist__chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  background: var(--ml-bloglist-chip-bg);
  font-size: var(--ml-fs-14);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ml-ink-2);
  text-decoration: none;
}
.ml-bloglist__chip:hover,
.ml-bloglist__chip:focus-visible { background: color-mix(in srgb, var(--ml-bloglist-chip-bg) 65%, var(--ml-post-card-head)); }
.ml-bloglist__chip.is-active { background: var(--ml-post-card-head); color: var(--ml-bg); }

.ml-bloglist__grid { display: grid; gap: 60px 32px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.ml-bloglist__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-bloglist__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-bloglist__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ml-bg);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ml-ink-2) 8%, transparent);
  color: inherit;
  text-decoration: none;
}
.ml-bloglist__cardhead {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 170px;
  padding: 20px 24px;
  overflow: hidden;
  text-align: center;
  color: var(--ml-bg);
}
.ml-bloglist__cardhead--slate { background: var(--ml-post-card-head); }
.ml-bloglist__cardhead--red { background: var(--ml-bloglist-head-red); }
/* Figma sets white on the salmon head (2.4:1); navy keeps AA like on cream/pale */
.ml-bloglist__cardhead--salmon { background: var(--ml-bloglist-head-salmon); color: var(--ml-navy); }
.ml-bloglist__cardhead--navy { background: var(--ml-navy); }
.ml-bloglist__cardhead--berry { background: var(--ml-blog-author-2); }
.ml-bloglist__cardhead--cream { background: var(--ml-bloglist-head-cream); color: var(--ml-navy); }
.ml-bloglist__cardhead--pale { background: var(--ml-bloglist-head-pale); color: var(--ml-navy); }
.ml-bloglist__cardhead--image { padding: 0; background: var(--ml-bg-lilac); }
.ml-bloglist__cardhead--image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-bloglist__kicker { font-size: var(--ml-fs-30); font-weight: 700; line-height: 1.15; }
.ml-bloglist__date { font-size: var(--ml-fs-13); }
/* heading policy: styled body text, never hN */
.ml-bloglist__card-title { display: block; padding: 24px 20px 0; font-size: var(--ml-fs-20); font-weight: 700; line-height: 1.3; color: var(--ml-ink); }
.ml-bloglist__card-text { display: block; padding: 14px 20px 50px; font-size: var(--ml-fs-20); line-height: var(--ml-lh-32); color: var(--ml-ink); }
.ml-bloglist__card:hover .ml-bloglist__card-title,
.ml-bloglist__card:focus-visible .ml-bloglist__card-title { text-decoration: underline; }
.ml-bloglist__empty { margin: 0; text-align: center; font-size: var(--ml-fs-18); color: var(--ml-ink-soft); }

.ml-bloglist__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  margin: 64px 0 0;
  font-size: var(--ml-fs-15);
  color: var(--ml-ink);
}
.ml-bloglist__pages { display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; list-style: none; }
.ml-bloglist__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  color: var(--ml-ink);
  text-decoration: none;
}
.ml-bloglist__num:hover,
.ml-bloglist__num:focus-visible { text-decoration: underline; }
.ml-bloglist__num.is-active { background: var(--ml-bloglist-page-active); color: var(--ml-bg); font-weight: 700; }
.ml-bloglist__gap { font-weight: 700; }
.ml-bloglist__page { display: inline-flex; align-items: center; gap: 10px; color: var(--ml-ink); text-decoration: none; }
.ml-bloglist__page:hover span,
.ml-bloglist__page:focus-visible span { text-decoration: underline; }
.ml-bloglist__page svg { display: block; width: 16px; height: 16px; }
/* icons/arrow.html points left (the "back" arrow); the forward link flips it */
.ml-bloglist__page--next svg { transform: rotate(180deg); }
.ml-bloglist__page.is-disabled { color: var(--ml-muted); }

@media (max-width: 991px) {
  .ml-bloglist { --ml-post-nav-h: 68px; }
  .ml-bloglist__hero { padding: calc(var(--ml-post-nav-h) + 88px) 40px 88px; }
  .ml-bloglist__hero-inner { gap: 28px; }
  .ml-bloglist__title { font-size: clamp(2.6rem, 8vw, var(--ml-fs-86)); }
  .ml-bloglist__title.ml-bloglist__title--long { font-size: clamp(2.2rem, 6vw, 4rem); }
  .ml-bloglist__intro { gap: 24px; }
  .ml-bloglist__main { padding: 56px 40px 64px; }
  .ml-bloglist__chips { margin-bottom: 40px; }
  .ml-bloglist__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 767px) {
  .ml-bloglist__hero { padding: calc(var(--ml-post-nav-h) + 64px) 20px 64px; }
  .ml-bloglist__title { font-size: clamp(2.2rem, 10vw, var(--ml-fs-50)); }
  .ml-bloglist__lead { font-size: var(--ml-fs-18); }
  .ml-bloglist__main { padding: 48px 20px 56px; }
  .ml-bloglist__chips { gap: 12px; margin-bottom: 32px; }
  .ml-bloglist__grid--3,
  .ml-bloglist__grid--2 { grid-template-columns: 1fr; gap: 32px; }
  .ml-bloglist__card-text { font-size: var(--ml-fs-18); line-height: 1.6; padding-bottom: 32px; }
  .ml-bloglist__pagination { gap: 16px 24px; margin-top: 48px; }
  .ml-bloglist__pages { gap: 20px; }
}

/* ── Cases listing: same structure on the dark referenzen photo ─────────── */
.ml-bloglist--cases .ml-bloglist__hero { background: var(--ml-navy-deep); }
.ml-bloglist__photo { position: absolute; inset: 0; }
.ml-bloglist__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ml-bloglist__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ml-navy-deep) 72%, transparent) 0%, color-mix(in srgb, var(--ml-navy-deep) 40%, transparent) 60%, transparent 100%);
}
.ml-bloglist--cases .ml-bloglist__title { color: var(--ml-bg); }
.ml-bloglist--cases .ml-bloglist__lead { color: color-mix(in srgb, var(--ml-bg) 88%, transparent); }
/* Case study post template (Sandra's "Case Study Layout" sketch, 4 Sep 2026).
   Bands: dark hero on the referenzen photo → white body (prose in a 790px
   column, inserted modules full width) → CTA + related (modules).
   Prose typography mirrors .ml-post__body in blog.css — keep the two in sync. */

.ml-case { --ml-post-nav-h: 154px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.ml-case__hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ml-post-nav-h) + 96px) 20px 96px;
  background: var(--ml-navy-deep);
  color: var(--ml-bg);
}
.ml-case__bg { position: absolute; inset: 0; }
.ml-case__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* darken the left half so the title stays AA on the photo */
.ml-case__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ml-navy-deep) 72%, transparent) 0%, color-mix(in srgb, var(--ml-navy-deep) 40%, transparent) 60%, transparent 100%);
}
.ml-case__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: end;
}
.ml-case__hero-copy { display: flex; flex-direction: column; gap: 24px; }
.ml-case__eyebrow { margin: 0; }
.ml-case__title {
  margin: 0;
  max-width: 760px;
  font-size: var(--ml-fs-50);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ml-bg);
}
.ml-case__lead {
  margin: 0;
  max-width: 620px;
  font-size: var(--ml-fs-21);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ml-bg) 88%, transparent);
}
.ml-case__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ml-case__tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--ml-bg) 45%, transparent);
  font-size: var(--ml-fs-13);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ml-bg);
  text-decoration: none;
}
.ml-case__tag:hover,
.ml-case__tag:focus-visible { background: color-mix(in srgb, var(--ml-bg) 12%, transparent); }
/* the industry tag stands apart from the service tags: pink like the eyebrow (Sandra, 15 Sep) */
.ml-case__tag--industry { border-color: var(--ml-accent-soft); background: var(--ml-accent-soft); color: var(--ml-navy-ink); }
.ml-case__tag--industry:hover,
.ml-case__tag--industry:focus-visible { background: color-mix(in srgb, var(--ml-accent-soft) 85%, var(--ml-bg)); color: var(--ml-navy-ink); }

/* ── Body ─────────────────────────────────────────────────────────────── */
.ml-case__main { padding: 64px 0 96px; background: var(--ml-bg); }
/* Compact band rhythm for modules inserted into the body: 48px per band edge
   (96 between two blocks) instead of the page default 96/120 (Serhat, 8 Sep:
   the case study felt too spacious next to the blog post's 96 rhythm; the
   team had hand-tuned the JUMAG post to ~64px gaps). The module's own Padding
   choice (None, Small, Large) still overrides this, it sets the variables on
   the section itself. */
.ml-case__body {
  --band-pt: 48px;
  --band-pb: 48px;
  --band-pt-sm: 32px;
  --band-pb-sm: 32px;
  font-size: var(--ml-fs-18);
  line-height: 1.7;
  color: var(--ml-ink-3);
  overflow-wrap: anywhere;
}

/* prose typography (mirrors .ml-post__body; margins split so the column rule
   below can keep margin-left/right on auto).
   Every prose rule is guarded against the wrappers HubSpot puts around modules
   inserted into the body: without the guard `blockquote { color: --ml-ink-2 }`
   repainted the quote module's text dark on its plum card (1.13:1, Eric 9 Sep),
   and `img { margin: 32px }` pushed module artwork around. */
.ml-case__body h2:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  margin-top: 48px;
  margin-bottom: 18px;
  font-size: var(--ml-fs-34);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ml-navy-deep);
  scroll-margin-top: 120px;
}
.ml-case__body h3:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin-top: 36px; margin-bottom: 14px; font-size: var(--ml-fs-23); font-weight: 700; line-height: 1.25; color: var(--ml-navy-deep); }
.ml-case__body p:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin-top: 0; margin-bottom: 20px; }
.ml-case__body ul:not(.hs_cos_wrapper_type_module *):not(.hs-module *),
.ml-case__body ol:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin-top: 0; margin-bottom: 20px; padding-left: 22px; }
.ml-case__body li:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin-bottom: 8px; }
.ml-case__body a:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { color: var(--ml-accent-soft-ink, var(--ml-red)); }
.ml-case__body img:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { display: block; max-width: 100%; height: auto; margin-top: 32px; margin-bottom: 32px; }
.ml-case__body table:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 28px;
  margin-bottom: 28px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--ml-fs-16);
}
.ml-case__body table th:not(.hs_cos_wrapper_type_module *):not(.hs-module *),
.ml-case__body table td:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { padding: 12px 16px; border: 1px solid var(--ml-line-3); text-align: left; vertical-align: top; }
.ml-case__body table th:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { background: var(--ml-navy-deep); color: var(--ml-bg); font-weight: 700; }
.ml-case__body table tr:nth-child(even) td:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { background: var(--ml-bg-lilac); }
.ml-case__body blockquote:not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--ml-red);
  font-size: var(--ml-fs-21);
  line-height: 1.5;
  color: var(--ml-ink-2);
}

/* the column: prose sits in a 790px column (830 incl. gutters), modules
   inserted into the body keep the full page width so their own bands run edge
   to edge. HubSpot wraps post_body in a wrapper (a span live, a div in the
   editor — Eric, 8 Sep: "content not as wide in the preview"), so the rules
   target the elements themselves, not direct children. */
.ml-case__body > .hs_cos_wrapper_type_rich_text { display: block; }
.ml-case__body :is(p, h2, h3, h4, ul, ol, blockquote, figure, table, pre, hr):not(.hs_cos_wrapper_type_module *):not(.hs-module *) {
  box-sizing: border-box;
  max-width: 830px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.ml-case__body :is(p, h2, h3, h4):first-child:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { margin-top: 0; }
/* bands stack like sections on a page: their padding carries the rhythm */
.ml-case__body .hs_cos_wrapper_type_module,
.ml-case__body .hs-module { display: block; margin-top: 0; margin-bottom: 0; }

@media (max-width: 991px) {
  .ml-case { --ml-post-nav-h: 68px; }
  .ml-case__hero { padding: calc(var(--ml-post-nav-h) + 72px) 40px 72px; }
  .ml-case__hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .ml-case__tags { justify-content: flex-start; }
  .ml-case__main { padding: 56px 0 80px; }
}
@media (max-width: 767px) {
  .ml-case__hero { padding: calc(var(--ml-post-nav-h) + 56px) 20px 56px; }
  .ml-case__title { font-size: clamp(1.9rem, 8vw, var(--ml-fs-50)); }
  .ml-case__lead { font-size: var(--ml-fs-18); }
  .ml-case__main { padding: 48px 0 64px; }
  .ml-case__body h2:not(.hs_cos_wrapper_type_module *):not(.hs-module *) { font-size: var(--ml-fs-28); }
}

/* Utilities */
/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}
/* Skip link — visible on focus only */
.ml-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ml-navy);
  color: #fff;
  font-family: var(--ml-font);
  font-size: var(--ml-fs-16);
}
.ml-skip-link:focus-visible {
  left: 0;
}

/* Inline icon sizes are deliberately finite so the macro never emits styles. */
.ml-icon { display: inline-flex; align-items: center; justify-content: center; }
.ml-icon--20 { width: 20px; height: 20px; }
.ml-icon--24 { width: 24px; height: 24px; }
.ml-icon svg { display: block; max-width: 100%; max-height: 100%; }
/* Band vertical rhythm — editor-overridable via Styles > Padding.
   Scale: none=0 · s=64/40 · default(Figma)=120/64 · l=160/88 (desktop/mobile).
   Modules consume var(--band-pt/--band-pb) with their own Figma default as
   fallback; these utilities only SET the variables (mobile via the -sm pair). */
.ml-pt-none { --band-pt: 0px;   --band-pt-sm: 0px; }
.ml-pt-s    { --band-pt: 64px;  --band-pt-sm: 40px; }
.ml-pt-l    { --band-pt: 160px; --band-pt-sm: 88px; }
.ml-pb-none { --band-pb: 0px;   --band-pb-sm: 0px; }
.ml-pb-s    { --band-pb: 64px;  --band-pb-sm: 40px; }
.ml-pb-l    { --band-pb: 160px; --band-pb-sm: 88px; }

/* Motion hygiene — kill decorative transforms for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .ml-card, .ml-vcard, .ml-industry, .ml-stat { transition: none; }
  .ml-card:hover, .ml-vcard:hover, .ml-industry:hover, .ml-stat:hover,
  .ml-card:focus-visible, .ml-vcard:focus-visible, .ml-industry:focus-visible, .ml-stat:focus-visible { transform: none; }
}