/******************************************************************
Stylesheet: Frontend styles

Reset based on:
- Josh W. Comeau's Custom CSS Reset: https://www.joshwcomeau.com/css/custom-css-reset/
- Chris Coyier's CSS Starter: https://blog.master.dev/the-coyier-css-starter/

The reset is in a cascade layer, so WordPress core styles, global
styles (theme.json) and the theme styles below the reset always win
over it, whatever their specificity.

Theme styles go after the reset, outside the layer.
******************************************************************/

@layer reset {

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

  /* Remove default margin */
  *:not(dialog) {
    margin: 0;
  }

  html {
    /* Switch to "light dark" when the theme has a dark color scheme */
    color-scheme: light;
    /* Font family, size and line height are set in theme.json */
    tab-size: 2;
    hanging-punctuation: first allow-end last;
    word-break: break-word;
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* Typography */
  h1,
  h2 {
    font-weight: 900;
    letter-spacing: -0.02rem;
  }

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 /* FUTURE :heading */ {
    text-wrap: balance;
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  a {
    text-underline-offset: 2px;

    &:not(:is(:hover, :focus)) {
      text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
    }
  }

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

  sub {
    inset-block-end: -0.25em;
  }

  sup {
    inset-block-start: -0.5em;
  }

  /* Lists */
  ul,
  ol,
  dl {
    padding: 0;
    list-style-position: inside;

    ul,
    ol,
    dl {
      padding-inline-start: 2ch;
    }
  }

  /* Media */
  img,
  picture,
  video,
  canvas,
  svg,
  iframe {
    display: block;
    max-inline-size: 100%;
  }

  /* Not on iframes: it would override their height attribute */
  img,
  video {
    block-size: auto;
  }

  img,
  video,
  iframe {
    border-style: none;
  }

  svg {
    fill: currentColor;
  }

  figcaption {
    contain: inline-size;
    font-size: 90%;
  }

  /* Forms */
  input,
  select,
  textarea,
  button {
    font: inherit;
    /* FUTURE: appearance: base; */
  }

  label {
    display: block;
  }

  input:not(
    :where(
      [type="submit"],
      [type="checkbox"],
      [type="radio"],
      [type="button"],
      [type="reset"]
    )
  ) {
    inline-size: 100%;
  }

  button,
  input:where(
    [type="submit"],
    [type="reset"],
    [type="button"]
  ) {
    background: CanvasText;
    color: Canvas;
    border: 1px solid transparent;
  }

  textarea {
    field-sizing: content;
    min-block-size: 5lh;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  [aria-disabled="true" i],
  [disabled] {
    cursor: not-allowed;
  }

  [disabled],
  label:has(input[disabled]) {
    opacity: 0.5;

    [disabled] {
      opacity: 1;
    }
  }

  [hidden] {
    display: none !important;
  }

  /* Code */
  pre,
  code,
  kbd,
  samp {
    font-family: ui-monospace, SFMono-Regular, monospace;
  }

  pre {
    white-space: pre-wrap;
    background: CanvasText;
    color: Canvas;
    padding: 1.5rem;
  }

  hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
    margin-block: 2.5rem;
  }

  /* Tables */
  table {
    caption-side: bottom;
    border-collapse: collapse;

    td {
      font-size: 90%;
    }

    td,
    th {
      word-break: normal;
      border: 1px solid gray;
      padding: 0.5rem;
    }
  }

  [role="region"][aria-labelledby][tabindex] {
    overflow: auto;
  }

  caption {
    font-size: 90%;
  }

  /* Accessibility */
  .screenreader-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  :focus-visible {
    outline-offset: 2px;
  }

  :target {
    scroll-margin: 3rlh;
  }

  /* Motion */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    html {
      interpolate-size: allow-keywords;

      &:focus-within {
        scroll-behavior: smooth;
      }
    }
  }
}


/*********************
THEME STYLES
*********************/

/*
Design tokens.

The design has two artboards: desktop 1366 × 768 px and mobile 393 × 852 px.
Sizes that differ between them are fluid: clamp() interpolates linearly between
the mobile value (at a 393px viewport) and the desktop value (at 1366px) and
stops at both ends. Tablet sizes are in between, wider screens keep the desktop
size. Font sizes are presets in theme.json (same formula).

Formula for a value going from A px (393px) to B px (1366px):
  slope = (B - A) / 973, intercept = A - slope × 393
  clamp( min(A,B)/16 rem, intercept/16 rem + slope × 100 vw, max(A,B)/16 rem )

Breakpoints: 48rem (768px) tablet, 64rem (1024px) desktop header.
*/
:root {
	/*
	Screen height unit for the blocks that fill the screen (Einstieg, Bildteaser, Seiteneinstieg,
	Kontakt): 1dvh. In the editor at most 7.68px, so 100 units are at most 768px (the desktop
	artboard's height): see library/css/editor-style.css.
	*/
	--ms-dvh: 1dvh;

	--ms-max-width: 85.375rem; /* 1366px: content area 1250px + 2 × 58px gutter */
	--ms-gutter: clamp(1.125rem, 0.1152rem + 4.111vw, 3.625rem); /* 18 → 58 */

	--ms-fs-small: var(--wp--preset--font-size--small); /* 12 → 14 */
	--ms-fs-medium: var(--wp--preset--font-size--medium); /* 12 → 16 */
	--ms-lh-medium: clamp(1.25rem, 1.0985rem + 0.6166vw, 1.625rem); /* 20 → 26 */

	/* Header */
	--ms-header-bar: clamp(3.75rem, 3.4976rem + 1.0277vw, 4.375rem); /* 60 → 70: compact header height */
	--ms-logo-width: clamp(2.375rem, 1.2138rem + 4.7276vw, 5.25rem); /* 38 → 84: big logo */
	--ms-square-compact: clamp(1.875rem, 1.7993rem + 0.3083vw, 2.0625rem); /* 30 → 33: logo square in the compact header */
	--ms-nav-gap: clamp(2.5rem, 1.6922rem + 3.2888vw, 4.5rem); /* 40 → 72 */

	/* Hero */
	--ms-hero-box: clamp(18rem, 14.2134rem + 15.4162vw, 27.375rem); /* 288 → 438 */
	--ms-hero-box-offset: clamp(0rem, -5.3517rem + 21.7883vw, 13.25rem); /* 0 → 212: from the content edge */
	--ms-hero-pad-top: clamp(0.6875rem, 0.1069rem + 2.3638vw, 2.125rem); /* 11 → 34 */
	--ms-hero-pad-start: clamp(1rem, 0.4951rem + 2.0555vw, 2.25rem); /* 16 → 36 */
	--ms-hero-pad-end: clamp(0.6875rem, -0.0446rem + 2.9805vw, 2.5rem); /* 11 → 40 */
	--ms-hero-pad-bottom: clamp(1rem, 0.1922rem + 3.2888vw, 3rem); /* 16 → 48 */
	--ms-hero-gap-title: clamp(0.375rem, 0.3245rem + 0.2055vw, 0.5rem); /* 6 → 8 */
	--ms-hero-gap-text: clamp(0.75rem, 0.649rem + 0.4111vw, 1rem); /* 12 → 16 */

	/* Long titles (font size: preset title-long) */
	--ms-lh-title-long: clamp(2.25rem, 1.3917rem + 3.4943vw, 4.375rem); /* 36 → 70 */

	/* Agentur */
	--ms-agentur-top: clamp(2rem, 1.2427rem + 3.0832vw, 3.875rem); /* 32 → 62: blue area to the eyebrow */
	--ms-agentur-gap: clamp(4.375rem, 3.3147rem + 4.3165vw, 7rem); /* 70 → 112: text to the key figures */
	--ms-agentur-overlap: clamp(3.5rem, 0.8241rem + 10.8941vw, 10.125rem); /* 56 → 162: blue area behind the key figures */
	--ms-agentur-bottom: clamp(2.3125rem, 0.6464rem + 6.7831vw, 6.4375rem); /* 37 → 103 */
	--ms-facts-gap: clamp(0.75rem, 0.4976rem + 1.0277vw, 1.375rem); /* 12 → 22: between the tiles */
	--ms-facts-row: clamp(10rem, 6.5668rem + 13.9774vw, 18.5rem); /* 160 → 296: tile height (at least), from 48rem; mobile: square tiles */
	--ms-facts-pad: clamp(0.5rem, 0.0961rem + 1.6444vw, 1.5rem); /* 8 → 24 */
	--ms-fs-facts-value: clamp(1.375rem, 0.5167rem + 3.4943vw, 3.5rem); /* 22 → 56 */
	--ms-fs-facts-label: clamp(0.625rem, 0.4231rem + 0.8222vw, 1.125rem); /* 10 → 18 */

	/* Kunden */
	--ms-kunden-top: clamp(1.3125rem, 0.6562rem + 2.6721vw, 2.9375rem); /* 21 → 47 */
	--ms-kunden-title-gap: clamp(1.75rem, 2.101rem - 0.4111vw, 2rem); /* 32 → 28 */
	--ms-kunden-cell: clamp(7.1875rem, 4.2592rem + 11.9219vw, 14.4375rem); /* 115 → 231: logo cell width */
	--ms-kunden-line: clamp(4.5625rem, 2.6944rem + 7.6053vw, 9.1875rem); /* 73 → 147: logo cell height */
	--ms-kunden-line-gap: clamp(0.25rem, 0.149rem + 0.4111vw, 0.5rem); /* 4 → 8 */
	--ms-kunden-logo-width: clamp(4.5rem, 2.6824rem + 7.3998vw, 9rem); /* 72 → 144 */
	--ms-kunden-logo-height: clamp(2.625rem, 1.5395rem + 4.4193vw, 5.3125rem); /* 42 → 85 */
	--ms-kunden-bottom: clamp(1rem, -0.3127rem + 5.3443vw, 4.25rem); /* 16 → 68: the mobile design has 0, more space requested by the client */

	/* Bildteaser */
	--ms-teaser-height: clamp(53.25rem, 48.8323rem + 17.9856vw, 64.1875rem); /* 852 → 1027: picture and block, from 48rem (mobile: 100dvh) */
	--ms-teaser-bottom: clamp(7.3125rem, 6.0251rem + 5.2415vw, 10.5rem); /* 117 → 168: square to the bottom */
	--ms-teaser-box: clamp(14.625rem, 11.8229rem + 11.408vw, 21.5625rem); /* 234 → 345: blue square */
	--ms-teaser-pad-top: clamp(0.5rem, -0.0049rem + 2.0555vw, 1.75rem); /* 8 → 28 */
	--ms-teaser-pad-start: clamp(1rem, 0.5709rem + 1.7472vw, 2.0625rem); /* 16 → 33 */
	--ms-teaser-pad-end: clamp(1.3125rem, 1.0853rem + 0.925vw, 1.875rem); /* 21 → 30 */
	--ms-teaser-pad-bottom: clamp(1.5rem, 1.0456rem + 1.8499vw, 2.625rem); /* 24 → 42 */
	--ms-teaser-gap: clamp(0.375rem, 0.1226rem + 1.0277vw, 1rem); /* 6 → 16: eyebrow, title, text */
	--ms-teaser-gap-button: clamp(0.375rem, 0.0216rem + 1.4388vw, 1.25rem); /* 6 → 20: text to the link */
	--ms-fs-button: clamp(0.875rem, 0.8245rem + 0.2055vw, 1rem); /* 14 → 16 */

	/* Text */
	--ms-text-top: clamp(4.1875rem, 3.8846rem + 1.2333vw, 4.9375rem); /* 67 → 79 */
	--ms-text-bottom: clamp(3.875rem, 3.0672rem + 3.2888vw, 5.875rem); /* 62 → 94 */
	--ms-fs-text-large: clamp(0.875rem, 0.774rem + 0.4111vw, 1.125rem); /* 14 → 18 */
	--ms-lh-text-large: clamp(1.5rem, 1.3485rem + 0.6166vw, 1.875rem); /* 24 → 30 */
	--ms-fs-button-large: clamp(0.875rem, 0.7235rem + 0.6166vw, 1.25rem); /* 14 → 20 */
	--ms-button-pad-inline: clamp(0.5rem, 0.298rem + 0.8222vw, 1rem); /* 8 → 16 */
	--ms-button-pad-block: clamp(0.375rem, 0.274rem + 0.4111vw, 0.625rem); /* 6 → 10 */
	--ms-button-gap: clamp(0.75rem, 0.649rem + 0.4111vw, 1rem); /* 12 → 16: text to the arrow */

	/* Partner */
	--ms-partner-pad: clamp(3.75rem, 3.3713rem + 1.5416vw, 4.6875rem); /* 60 → 75: top and bottom */
	--ms-partner-cell: clamp(10.8125rem, 6.8492rem + 16.1357vw, 20.625rem); /* 173 → 330: logo cell width */
	--ms-partner-line: clamp(6.625rem, 4.2016rem + 9.8664vw, 12.625rem); /* 106 → 202: logo cell height */
	--ms-partner-logo-width: clamp(7.875rem, 4.9972rem + 11.7163vw, 15rem); /* 126 → 240 */
	--ms-partner-logo-height: clamp(4.1875rem, 2.6476rem + 6.2693vw, 8rem); /* 67 → 128 */
	--ms-partner-square: clamp(3.4375rem, 2.1753rem + 5.1387vw, 6.5625rem); /* 55 → 105: width of a square logo */

	/* Akkordeon */
	--ms-accordion-top: clamp(4.6875rem, 4.1826rem + 2.0555vw, 5.9375rem); /* 75 → 95 */
	--ms-accordion-bottom: clamp(4.6875rem, 2.567rem + 8.6331vw, 9.9375rem); /* 75 → 159: the mobile design runs into the next section */
	--ms-accordion-pad: clamp(0.8125rem, 0.4969rem + 1.2847vw, 1.59375rem); /* 13 → 25.5: above and below the title */
	--ms-accordion-icon: clamp(1.375rem, 0.8701rem + 2.0555vw, 2.625rem); /* 22 → 42: icon box */
	--ms-accordion-icon-offset: clamp(0rem, -0.5554rem + 2.261vw, 1.375rem); /* 0 → 22: content edge to the icon box */
	--ms-accordion-indent: clamp(2.1875rem, 0.3952rem + 7.297vw, 6.625rem); /* 35 → 106: content edge to the title and text */
	--ms-accordion-toggle: clamp(1.25rem, 0.7451rem + 2.0555vw, 2.5rem); /* 20 → 40: plus/minus */
	--ms-accordion-toggle-inset: clamp(0rem, -0.5049rem + 2.0555vw, 1.25rem); /* 0 → 20: plus/minus to the content edge */
	--ms-accordion-toggle-stroke: clamp(0.125rem, 0.0998rem + 0.1028vw, 0.1875rem); /* 2 → 3 */
	--ms-fs-accordion-title: clamp(1rem, 0.798rem + 0.8222vw, 1.5rem); /* 16 → 24 */
	--ms-lh-accordion-text: clamp(1.25rem, 1.1995rem + 0.2055vw, 1.375rem); /* 20 → 22 */
	--ms-accordion-text-width: clamp(15.6875rem, 11.8504rem + 15.622vw, 25.1875rem); /* 251 → 403 */
	--ms-accordion-text-gap: clamp(0.3125rem, -0.0157rem + 1.3361vw, 1.125rem); /* 5 → 18: title to the text */
	--ms-accordion-text-bottom: clamp(1.3125rem, 2.4532rem - 1.3361vw, 2.125rem); /* 34 → 21: text to the next line */

	/* Kontakt */
	--ms-kontakt-height: clamp(53.25rem, 43.7834rem + 38.541vw, 76.6875rem); /* 996 at 768 → 1227: block, from 48rem (mobile: 100dvh) */
	--ms-kontakt-bottom: clamp(7.3125rem, 5.3435rem + 8.0164vw, 12.1875rem); /* 147 at 768 → 195: blue square to the bottom, from 48rem */
	--ms-kontakt-pad-top: clamp(1.625rem, 1.4988rem + 0.5139vw, 1.9375rem); /* 26 → 31 */
	--ms-kontakt-pad-bottom: clamp(3.0625rem, 4.1154rem - 1.2333vw, 3.8125rem); /* 61 → 49 */
	--ms-fs-kontakt-title: clamp(2.125rem, 1.9736rem + 0.6166vw, 2.5rem); /* 34 → 40 */
	--ms-kontakt-title-gap: clamp(0.5625rem, 0.3858rem + 0.7194vw, 1rem); /* 9 → 16 */
	--ms-kontakt-text-width: clamp(20.125rem, 18.5093rem + 6.578vw, 24.125rem); /* 322 → 386 */
	--ms-kontakt-details-gap: clamp(0.9375rem, 3.6576rem - 3.186vw, 2.875rem); /* 46 → 15: text to the contact details */
	--ms-lh-kontakt-address: clamp(1.25rem, 0.9976rem + 1.0277vw, 1.875rem); /* 20 → 30 */
	--ms-lh-kontakt-link: clamp(1.25rem, 0.7956rem + 1.85vw, 2.375rem); /* 20 → 38: phone, e-mail, social media, link */
	--ms-kontakt-link-gap: clamp(0.1875rem, 1.0649rem - 1.0277vw, 0.8125rem); /* 13 → 3 */
	--ms-kontakt-jobs-gap: clamp(1.6875rem, 1.4098rem + 1.1305vw, 2.375rem); /* 27 → 38: e-mail to the link */
	--ms-kontakt-icon: clamp(1.0625rem, 0.9363rem + 0.5139vw, 1.375rem); /* 17 → 22 */
	--ms-kontakt-indent: clamp(2.0625rem, 1.9363rem + 0.5139vw, 2.375rem); /* 33 → 38: icon to the text */
	--ms-kontakt-col: clamp(12.5rem, 10.4804rem + 8.222vw, 17.5rem); /* 200 → 280: left column (at least) */

	/* Seiteneinstieg (the blue square: Bildteaser tokens) */
	--ms-fs-page-hero-title: clamp(2.25rem, 1.6441rem + 2.4666vw, 3.75rem); /* 36 → 60 (Bildteaser: 34 → 60) */
	--ms-page-hero-bottom: 11.0625rem; /* 177: blue square to the bottom, mobile (below 48rem) */
	--ms-page-hero-overhang: clamp(0rem, -1.0603rem + 4.3165vw, 2.625rem); /* 0 → 42: blue square below the picture, from 48rem */
	--ms-page-hero-after: clamp(0rem, -2.3477rem + 9.5581vw, 5.8125rem); /* 0 → 93: room below the picture, from 48rem */

	/* Team */
	--ms-team-top: clamp(1.5rem, 0.263rem + 5.036vw, 4.5625rem); /* 24 → 73 */
	--ms-team-bottom: clamp(5.5rem, 5.3233rem + 0.7194vw, 5.9375rem); /* 88 → 95 */
	--ms-team-title-gap: clamp(0.8125rem, 0.3834rem + 1.7472vw, 1.875rem); /* 13 → 30: title to the filter */
	--ms-team-filter-gap: clamp(1.75rem, 1.0432rem + 2.8777vw, 3.5rem); /* 28 → 56: filter to the grid */
	--ms-team-gap: clamp(0.75rem, 0.5228rem + 0.925vw, 1.3125rem); /* 12 → 21: between the columns */
	--ms-team-row-gap: clamp(1rem, 0.899rem + 0.4111vw, 1.25rem); /* 16 → 20: from 48rem (mobile: 32px) */
	--ms-fs-team-name: clamp(0.875rem, 0.673rem + 0.8222vw, 1.375rem); /* 14 → 22 */
	--ms-fs-team-meta: clamp(0.75rem, 0.649rem + 0.4111vw, 1rem); /* 12 → 16: position, phone and e-mail */
	--ms-lh-team: clamp(1.375rem, 1.0216rem + 1.4388vw, 2.25rem); /* 22 → 36: name, one line of position */
	--ms-lh-team-contact: clamp(1.375rem, 1.2993rem + 0.3083vw, 1.5625rem); /* 22 → 25: phone and e-mail */
	--ms-team-contact-gap: clamp(0.2063rem, 0.0497rem + 0.6372vw, 0.5938rem); /* 3.3 → 9.5: name to phone/e-mail without a position */
	--ms-team-icon: clamp(0.9rem, 0.8647rem + 0.1439vw, 0.9875rem); /* 14.4 → 15.8: phone and e-mail icon width */
	--ms-team-icon-indent: clamp(1.65rem, 1.6096rem + 0.1644vw, 1.75rem); /* 26.4 → 28: icon start to the text */
	--ms-team-box: clamp(7.5rem, 6.2378rem + 5.1387vw, 10.625rem); /* 120 → 170: white square on the photo, from 48rem */
	--ms-fs-team-contact: calc(var(--ms-team-box) / 12); /* 11.6 → 14.2 (768 → 1366): phone and e-mail in the white square, the number fits on one line */
	--ms-team-box-inset: clamp(0.75rem, 0.5228rem + 0.925vw, 1.3125rem); /* 12 → 21: box to the photo edges */
	--ms-team-box-pad-top: clamp(0.75rem, 0.6894rem + 0.2467vw, 0.9rem); /* 12 → 14.4 */
	--ms-team-box-pad-inline: clamp(0.875rem, 0.7235rem + 0.6166vw, 1.25rem); /* 14 → 20 */

	/* Dropdown (library/css/dropdown.css): filters of Team and Einblicke-Übersicht */
	--ms-dropdown-height: clamp(1.5rem, 1.399rem + 0.4111vw, 1.75rem); /* 24 → 28 (text: --ms-fs-text-large) */
	--ms-dropdown-chevron: clamp(0.875rem, 0.8245rem + 0.2055vw, 1rem); /* 14 → 16 */

	/* Einblicke cards (library/css/cards.css) */
	--ms-cards-gap: clamp(0.75rem, 0.5228rem + 0.925vw, 1.3125rem); /* 12 → 21: between the columns */
	--ms-cards-row-gap: clamp(0.75rem, 0.4471rem + 1.2333vw, 1.5rem); /* 12 → 24 */
	--ms-card-image-gap: clamp(0.8125rem, 0.7115rem + 0.4111vw, 1.0625rem); /* 13 → 17: picture to the texts */
	--ms-fs-card-title: clamp(0.75rem, 0.5985rem + 0.6166vw, 1.125rem); /* 12 → 18 */
	--ms-lh-card-title: clamp(1.25rem, 1.149rem + 0.4111vw, 1.5rem); /* 20 → 24 */
	--ms-lh-card-text: clamp(1.25rem, 1.4255rem - 0.2055vw, 1.375rem); /* 22 → 20 (text 12px) */

	/* Einblicke (homepage) */
	--ms-einblicke-top: clamp(3.4375rem, 2.8569rem + 2.3638vw, 4.875rem); /* 55 → 78 */
	--ms-fs-einblicke-text: clamp(0.875rem, 0.8245rem + 0.2055vw, 1rem); /* 14 → 16 */
	--ms-lh-einblicke-text: clamp(1.5rem, 1.4495rem + 0.2055vw, 1.625rem); /* 24 → 26 */
	--ms-einblicke-cards-top: clamp(1.625rem, -0.2178rem + 7.5026vw, 6.1875rem); /* 26 → 99: text to the cards */
	--ms-einblicke-button-top: clamp(1.0625rem, 0.4314rem + 2.5694vw, 2.625rem); /* 17 → 42: cards to the button */
	--ms-einblicke-bottom: clamp(3rem, 1.4349rem + 6.372vw, 6.875rem); /* 48 → 110 */

	/* Einblicke-Übersicht */
	--ms-overview-filter-top: clamp(1.75rem, 0.6645rem + 4.4193vw, 4.4375rem); /* 28 → 71: text to the filter */
	--ms-overview-bottom: clamp(4rem, 3.1922rem + 3.2888vw, 6rem); /* 64 → 96 */

	/* Beitrag (single post, Publikation, Webinar) */
	--ms-single-overlap: clamp(6.5rem, 3.0416rem + 14.0802vw, 15.0625rem); /* 104 → 241: white box over the picture */
	--ms-single-pad-inline: clamp(0.875rem, 0.3954rem + 1.9527vw, 2.0625rem); /* 14 → 33 */
	--ms-single-pad-top: clamp(1.125rem, 0.6959rem + 1.7472vw, 2.1875rem); /* 18 → 35 */
	--ms-fs-single-title: clamp(1.625rem, 1.2716rem + 1.4388vw, 2.5rem); /* 26 → 40 */
	--ms-lh-single-title: clamp(2.25rem, 1.9218rem + 1.3361vw, 3.0625rem); /* 36 → 49 */
	--ms-fs-single-h2: clamp(1.125rem, 0.923rem + 0.8222vw, 1.625rem); /* 18 → 26: headings in the text */
	--ms-fs-single-h3: clamp(1rem, 0.8485rem + 0.6166vw, 1.375rem); /* 16 → 22 */
	--ms-single-play: clamp(3.75rem, 2.2354rem + 6.1665vw, 7.5rem); /* 60 → 120: play button height */
	--ms-single-author-photo: clamp(5.375rem, 4.5672rem + 3.2888vw, 7.375rem); /* 86 → 118 */
	--ms-single-author-gap: clamp(1rem, 0.8738rem + 0.5139vw, 1.3125rem); /* 16 → 21: photo to the texts */
	--ms-fs-single-author: clamp(0.875rem, 0.673rem + 0.8222vw, 1.375rem); /* 14 → 22: "Autor:in" and name */
	--ms-lh-single-author: clamp(1.5rem, 1.1971rem + 1.2333vw, 2.25rem); /* 24 → 36 */
	--ms-single-bottom: clamp(3rem, 1.6873rem + 5.3443vw, 6.25rem); /* 48 → 100: content to the blue bar */
	--ms-single-pager-height: clamp(3rem, 2.6213rem + 1.5416vw, 3.9375rem); /* 48 → 63 */
	--ms-single-pager-arrow: clamp(1.125rem, 0.9735rem + 0.6166vw, 1.5rem); /* 18 → 24 */

	/* Footer */
	--ms-footer-top: clamp(3rem, 2.4446rem + 2.261vw, 4.375rem); /* 48 → 70 */
	--ms-footer-logo: clamp(3.875rem, 3.5721rem + 1.2333vw, 4.625rem); /* 62 → 74 */
	--ms-footer-button: clamp(2rem, 1.3437rem + 2.6721vw, 3.625rem); /* 32 → 58 */

	/* Shortcode */
	--ms-shortcode-pad: clamp(3.75rem, 3.3713rem + 1.5416vw, 4.6875rem); /* 60 → 75: top and bottom, as Partner */

	/*
	Motion (library/css/motion.css and library/js/motion.js; the homepage intro in
	hero/style.css and header/style.css; the key figures in agentur/style.css).
	*/
	--ms-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out */
	--ms-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* cubic out */
	--ms-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--ms-intro-fade: 0.3s; /* homepage intro: the title fades in */
	--ms-intro-start: 0.1s; /* … and starts to glide right away */
	--ms-intro-move: 1.1s; /* glide of the title, rise of the square, zoom of the picture */
	--ms-reveal-duration: 0.9s; /* lists coming in from below */
	--ms-reveal-distance: 1.5rem;
	--ms-stagger: 90ms;
	--ms-head-duration: 1.6s; /* headlines: slow fade-in … */
	--ms-head-distance: -0.6em; /* … from a little to the left */
	--ms-parallax-scale: 1.12; /* picture size inside its mask: room for the parallax movement */
}

/*
Anchors land right below the fixed header: scroll-padding is the header height,
without the extra margin of the reset (:target { scroll-margin: 3rlh }).
*/
html {
	scroll-padding-top: calc(var(--ms-header-bar) + var(--wp-admin--admin-bar--height, 0px));
}

:target {
	scroll-margin-block: 0;
}

body {
	font-optical-sizing: auto;
}

/*
Content wrapper: max 1366px, centred, with the gutter.
Backgrounds of blocks span the full viewport width; their content goes in .ms-wrap.
*/
.ms-wrap {
	inline-size: 100%;
	max-inline-size: var(--ms-max-width);
	margin-inline: auto;
	padding-inline: var(--ms-gutter);
}

/* Hidden visually, read by screen readers (labels, status messages). */
.ms-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
Mask of a picture: clips the picture's parallax movement and hover zoom
(library/css/motion.css). Team photos, card pictures, the Seiteneinstieg.
*/
.ms-media {
	display: block;
	overflow: clip;
}

/* Arrow of the links "Zum Team ›" …: as high as the text, moves right on hover. */
.ms-arrow {
	flex: none;
	fill: none; /* the reset fills SVGs with currentColor */
	inline-size: auto;
	block-size: 1em;
	transition: translate 0.2s ease-out;

	a:is(:hover, :focus-visible) > & {
		translate: 0.25em 0;
	}
}

/*
Framed link with an arrow: "Jetzt bewerben ›" (Text block), "Weitere Einblicke ›"
(Einblicke), "Jetzt herunterladen ›" (Publikation). Font size: --ms-button-fs.
*/
.ms-button {
	display: inline-flex;
	align-items: center;
	gap: var(--ms-button-gap);
	padding: var(--ms-button-pad-block) var(--ms-button-pad-inline);
	font-size: var(--ms-button-fs, var(--ms-fs-button-large));
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	border: 1px solid currentColor;
	transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;

	&:is(:hover, :focus-visible) {
		color: var(--wp--preset--color--white);
		background-color: var(--wp--preset--color--navy);
		border-color: var(--wp--preset--color--navy);
	}
}

/*
The header is fixed: content starts below it. Except under the Einstieg block
(hero), the Seiteneinstieg block (page-hero) and the picture of a post (single),
which run behind the header.
*/
.ms-main {
	padding-block-start: var(--ms-header-bar);

	&:has(.wp-block-post-content > :is(.ms-hero, .ms-page-hero):first-child, > .ms-single > .ms-single__media:first-child) {
		padding-block-start: 0;
	}
}

/* Template parts and blocks fill the width, without the default layout gaps. */
.wp-site-blocks > * {
	margin-block: 0;
}

/*
Paragraphs, headings and lists added to a page or a Container, between the blocks:
like the text of a post (.ms-single__content), navy 14 → 18px / 24 → 30px, in the
content width (.ms-wrap). One empty line between them; a run of them has the
spacing of the Text block above and below (67 → 79px, 62 → 94px).
Scoped by .ms-main (templates/index.html) so the post editor is not affected;
the page editor gets the same look from editor-style.css.
*/
.ms-main :is(.wp-block-post-content, .ms-container) > :is(p, .wp-block-heading, .wp-block-list) {
	max-inline-size: var(--ms-max-width);
	margin: var(--ms-text-top) auto var(--ms-text-bottom);
	padding-inline: var(--ms-gutter);
	font-size: var(--ms-fs-text-large);
	line-height: var(--ms-lh-text-large);
	color: var(--wp--preset--color--navy);
	overflow-wrap: break-word;

	&:has(+ :is(p, .wp-block-heading, .wp-block-list)) {
		margin-block-end: 0;
	}

	& + :is(p, .wp-block-heading, .wp-block-list) {
		margin-block-start: 1lh;
	}

	&:is(h2, h3, h4) {
		font-weight: 700;
		line-height: 1.3;
	}

	&:is(h2) {
		font-size: var(--ms-fs-single-h2);
	}

	&:is(h3) {
		font-size: var(--ms-fs-single-h3);
	}

	&:is(ul, ol) {
		padding-inline-start: calc(var(--ms-gutter) + 1.25em);
		list-style-position: outside;
	}

	&:is(ul) {
		list-style-type: disc;
	}

	&:is(ol) {
		list-style-type: decimal;
	}

	:is(strong, b) {
		font-weight: 700;
	}

	a {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 0.15em;

		&:hover {
			color: var(--wp--preset--color--blue);
		}
	}
}