@layer cm-ds-priority {

  html body :is(
    .cmo-button:not(.cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary, .secondary, .outline, .dark-button),
    .cmo-button--primary,
    a[data-design-button="primary"],
    .n39-button:not(.n39-button--outline),
    .c38-button:not(.c38-button--outline),
    .cal29-button, .v111-btn, .v112-btn,
    a[data-reference-testimonials-button]
  ) {
    background: #006097 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    border: 2px solid #006097 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  html body :is(
    .cmo-button:not(.cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary, .secondary, .outline, .dark-button),
    .cmo-button--primary,
    a[data-design-button="primary"],
    .n39-button:not(.n39-button--outline),
    .c38-button:not(.c38-button--outline),
    .cal29-button, .v111-btn, .v112-btn,
    a[data-reference-testimonials-button]
  ):hover {
    background: #004470 !important;
    border-color: #004470 !important;
    color: #ffffff !important;
  }

  html body :is(
    .cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary,
    .cmo-button.secondary, .cmo-button.outline, .cmo-button.dark-button,
    a[data-design-button="outline"], a[data-design-button="secondary"],
    .n39-button--outline, .c38-button--outline
  ) {
    background: #ffffff !important;
    background-image: none !important;
    color: #006097 !important;
    -webkit-text-fill-color: currentColor !important;
    border: 2px solid #006097 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  html body :is(
    .cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary,
    .cmo-button.secondary, .cmo-button.outline, .cmo-button.dark-button,
    a[data-design-button="outline"], a[data-design-button="secondary"],
    .n39-button--outline, .c38-button--outline
  ):hover {
    background: #004470 !important;
    border-color: #004470 !important;
    color: #ffffff !important;
  }

  html body :is(.cmo-button, a[data-design-button], .n39-button, .c38-button, .cal29-button, .v111-btn, .v112-btn, a[data-reference-testimonials-button]):focus-visible {
    outline: 3px solid #006097 !important;
    outline-offset: 3px !important;
  }

  html body #main-content :is(.cmo-ref-quote, .customer-testimonial),
  html body main :is(.cmo-ref-quote, .customer-testimonial) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #001c32 !important;
    text-align: left !important;
  }
  html body #main-content :is(.cmo-ref-quote, .customer-testimonial)::before,
  html body main :is(.cmo-ref-quote, .customer-testimonial)::before,
  html body main blockquote.proof-quote::before,
  html body main .quote-card blockquote::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    margin: 0 0 16px !important;
    background: #006097 !important;
    order: -1 !important;
  }
  html body #main-content :is(.cmo-ref-quote, .customer-testimonial) > :is(blockquote, p),
  html body main :is(.cmo-ref-quote, .customer-testimonial) > :is(blockquote, p),
  html body main blockquote.proof-quote,
  html body main .quote-card blockquote {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    font: 400 16px/1.55 Roboto, Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    text-align: left !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) blockquote :is(p, q),
  html body main blockquote.proof-quote :is(p, q),
  html body main .quote-card blockquote :is(p, q) {
    margin: 0 !important;
    font: inherit !important;
    font-style: normal !important;
    color: inherit !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) > figcaption {
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #59595a !important;
    -webkit-text-fill-color: currentColor !important;
    font: 400 14px/1.45 Roboto, Helvetica, Arial, sans-serif !important;
    text-align: left !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) > figcaption strong {
    display: block !important;
    margin: 0 !important;
    color: #001c32 !important;
    font: 600 14px/1.45 Roboto, Helvetica, Arial, sans-serif !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) > figcaption span {
    display: block !important;
    margin: 0 !important;
    color: #59595a !important;
    font: 400 14px/1.45 Roboto, Helvetica, Arial, sans-serif !important;
  }
  html body main .customer-testimonial > .customer-testimonial__logo {
    align-self: flex-start !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  html body .site-footer .site-footer__inner {
    width: min(var(--content-width, 1110px), calc(100% - 2 * var(--content-gutter, 24px))) !important;
    max-width: var(--cmo-content-max, 1110px) !important;
    margin-inline: auto !important;
  }

  html body #cmo-contact-shortcut {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab {
    background: linear-gradient(120deg, #0a9edf 0%, #41baec 100%) !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 18px rgba(0, 28, 50, 0.18) !important;
    transform: skewX(-12deg) !important;
    font-family: Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab > * {
    transform: skewX(12deg) !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab:hover {
    background: #006097 !important;
    color: #ffffff !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab:focus-visible {
    outline: 3px solid #001c32 !important;
    outline-offset: 3px !important;
  }

  @media (min-width: 768px) and (min-height: 540px), (min-width: 768px) and (pointer: fine) {
    html body main :is(h1, h2) {
      font-family: "Roboto Slab", Roboto, Helvetica, Arial, sans-serif !important;
      font-weight: 400 !important;
      letter-spacing: -0.01em !important;
    }
  }

  @media (max-width: 1099px) {
    html body [data-micro-responsive-hero] img {
      width: 100% !important;
      height: auto !important;
      max-height: 420px !important;
      object-fit: contain !important;
    }
  }
}


@layer cm-ds-priority {
  @media (max-width: 1099.98px) {
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout {
      background: transparent !important;
      color: #ffffff !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout :is(h1, h2) {
      color: #ffffff !important;
      -webkit-text-fill-color: currentColor !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout :where(p, li, dd, dt):not(.cmo-eyebrow) {
      color: #ededed !important;
      -webkit-text-fill-color: currentColor !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout .cmo-eyebrow {
      color: #0a9edf !important;
      -webkit-text-fill-color: currentColor !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout a:not(.cmo-button, [data-design-button], [class*="button"], [class*="btn"]) {
      color: #ffffff !important;
      -webkit-text-fill-color: currentColor !important;
      text-decoration-color: #41baec !important;
    }
  }
}

@layer cm-ds-priority {
  html body #main-content [data-v213-wide-hero="micro"] {
    background: linear-gradient(120deg, #001c32, #004470) !important;
  }
  html body #main-content [data-micro-responsive-hero] {
    background: transparent !important;
  }
}

@layer cm-ds-priority {
  html body [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))) {
    position: relative !important;
    cursor: pointer !important;
  }
  html body [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))) a[data-cmo-card-title-link]::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }
  html body :is(a[data-design-link-card]:is(:hover, :focus-visible),
                [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))):is(:hover, :focus-within),
                [data-design-link-card][data-cmo-link-card]:has(a:not([data-cmo-card-title-link])):has(a:hover, a:focus-visible)) {
    background: #ededed !important;
    background-image: none !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: #006097 !important;
  }
  html body :is(a[data-design-link-card]:is(:hover, :focus-visible),
                [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))):is(:hover, :focus-within),
                [data-design-link-card][data-cmo-link-card]:has(a:not([data-cmo-card-title-link])):has(a:hover, a:focus-visible))
                :is([data-design-label], [data-design-prose], p, li, span:not([class*="icon"])) {
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body :is(a[data-design-link-card]:is(:hover, :focus-visible),
                [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))):is(:hover, :focus-within),
                [data-design-link-card][data-cmo-link-card]:has(a:not([data-cmo-card-title-link])):has(a:hover, a:focus-visible))
                :is([data-design-link-title], [data-cmo-card-title-link], h3) {
    color: #006097 !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  html body [class*="related-links"] > a:is(:hover, :focus-visible) {
    background: #ededed !important;
    background-image: none !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: #006097 !important;
  }
}

@layer cm-ds-priority {
  @media (min-width: 1100px) {
    html body #cmo-contact-shortcut .cmo-contact-tab {
      margin-right: -28px !important;
      padding-right: 46px !important;
      border-right: 0 !important;
    }
  }
}

@layer cm-ds-priority {
  html body main[data-brand="comframe"] section:is([data-design-hero], [data-page-hero]) {
    border-style: solid !important;
    border-width: 0 0 clamp(8px, 0.8vw, 12px) 0 !important;
    border-image: linear-gradient(90deg, #0a9edf 0%, #59c1d8 35%, #ffdd00 100%) 1 !important;
  }
  html body main[data-brand="comframe"] section[data-design-surface="dark"] .cmo-eyebrow {
    color: #ffdd00 !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

@layer cm-ds-priority {
  html body main:not(.hp) section:not([data-design-hero], [data-page-hero], .v85-final-cta, .cmo-newsletter, .cmo-proof-strip)
    :is(p, ul, ol, h2, h3, h4, .g197-section-intro) {
    max-width: none !important;
  }

  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip) {
    --cm-slant: clamp(24px, 4vw, 64px);
    position: relative !important;
    border-top: var(--cm-slant) solid transparent !important;
    background-origin: border-box !important;
  }
  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip)::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(-1 * var(--cm-slant) - 2px) !important;
    height: calc(var(--cm-slant) + 2px) !important;
    background: #ffffff !important;
    clip-path: polygon(0 0, 100% 0, 100% 2px, 0 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  html body main:not(.hp) section:is([data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip)::before {
    background: #ededed !important;
  }
  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"]):has(+ section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip)) {
    border-bottom: 0 !important;
  }
  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip) + * {
    border-top: 0 !important;
  }
}

@layer cm-ds-priority {
  html body img[data-erklaerbild] {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    max-width: 100% !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

@layer cm-ds-priority {
  html body main section :is(:has(img[data-erklaerbild]:not([data-erklaerbild-layout])), img[data-erklaerbild]:not([data-erklaerbild-layout])) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    flex-basis: auto !important;
    width: auto;
  }
  html body main section :has(> :is(figure, picture, a, div) img[data-erklaerbild]:not([data-erklaerbild-layout])) > * {
    grid-row: auto !important;
  }
  html body main section :has(> * img[data-erklaerbild]:not([data-erklaerbild-layout]), > img[data-erklaerbild]:not([data-erklaerbild-layout])) {
    flex-wrap: wrap !important;
    flex-direction: column !important;
  }
  html body main section :has(img[data-erklaerbild]:not([data-erklaerbild-layout])):not([class*="container"], [class*="shell"], [class*="inner"], [class*="grid"], section) {
    max-width: none !important;
  }
  html body main :is(figure, picture, a, .evca-interop-option-visual):has(img[data-erklaerbild]) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html body img[data-erklaerbild] {
    display: block !important;
    width: 100% !important;
  }
  html body main figure:has(img[data-erklaerbild]) :is(h2, h3, h4, header, p, figcaption > *) {
    background: transparent !important;
    box-shadow: none !important;
  }
  html body main :is(div, ul, ol):has(> :is(figure, article, li) img[data-erklaerbild-layout="zwei"]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 24px !important;
  }
  @media (max-width: 1150px) {
    html body main :is(div, ul, ol):has(> :is(figure, article, li) img[data-erklaerbild-layout="zwei"]) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
  html body main figure:has(img[data-erklaerbild]):not(:last-child) {
    margin-bottom: clamp(32px, 4vw, 48px) !important;
  }
  html body main figure:has(img[data-erklaerbild]) + * {
    margin-top: 0 !important;
  }
  html body main section :is(div, article, ul, ol):has(> :last-child img[data-erklaerbild]):not(:last-child, [class*="container"]) {
    margin-bottom: clamp(32px, 4vw, 48px) !important;
  }
  html body main figure:has(img[data-erklaerbild]) figcaption {
    margin: 16px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    text-align: left !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body main figure:has(img[data-erklaerbild]) figcaption :is(p, span, strong, b, small, h3, h4) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body main section:is([data-design-surface="dark"], [class*="--dark"]) figure:has(img[data-erklaerbild]) figcaption {
    color: #ededed !important;
  }
  html body main section:is([data-design-surface="dark"], [class*="--dark"]) figure:has(img[data-erklaerbild]) figcaption a {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration-color: #41baec !important;
  }
}
@layer cm-ds-priority {
  html body img[src*="/assets/images/grey-bg/"] {
    mix-blend-mode: normal !important;
  }
}
:where(strong, b, h3, h4, h5, h6, th, dt, summary) { font-weight: 600; }
:where(h1, h2) { font-weight: 600; }

@media (min-width: 768px) and (min-height: 540px), (min-width: 768px) and (pointer: fine) {
  @font-face {
    font-family: "Roboto Slab";
    src: url("/assets/fonts/roboto-slab-latin-wght-100-900-50cf7d32c18e.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
}

:root {
  --dark-blue: #001c32; --mid-blue: #004470; --blue: #006097; --sky: #0a9edf; --light-blue: #41baec;
  --turquoise: #59c1d8; --teal: #18b0cc; --white: #ffffff; --silver-white: #ededed; --light-grey: #c8c8c8;
  --grey: #a5a5a5; --mid-grey: #808080; --dark-grey: #59595a; --black: #000000; --yellow: #ffdd00;
  --green: #3fa534; --red: #e30512; --marker: #ee7203; --spot: #e6007e;
  --ink: var(--dark-blue); --muted: var(--dark-grey); --line-dark: rgba(255, 255, 255, 0.24); --logo-blue: #3671c1;
  --font-sans: Roboto, Helvetica, Arial, sans-serif;
  --font-slab: "Roboto Slab", Roboto, Helvetica, Arial, sans-serif;
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-56: 56px; --space-72: 72px; --space-96: 96px;
  --radius-0: 0; --radius-round: 50%;
  --shadow-overlay: 0 6px 18px rgba(0, 28, 50, 0.12);
  --container-max: 1110px; --container-inset-lg: 44px; --container-inset-md: 32px; --container-inset-sm: 18px;
  --text-measure: 72ch; --target-min: 44px;
}

.cm-root { font-family: var(--font-sans); color: var(--ink); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.cm-root *, .cm-root *::before, .cm-root *::after { box-sizing: border-box; }
.cm-container { width: min(var(--container-max), calc(100% - 2 * var(--container-inset-lg))); margin-inline: auto; }
@media (max-width: 1180px) { .cm-container { width: calc(100% - 2 * var(--container-inset-md)); } }
@media (max-width: 620px) { .cm-container { width: calc(100% - 2 * var(--container-inset-sm)); } }

.cm-h1 { font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.cm-h2 { font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; margin: 0; max-width: 30ch; }
.cm-h3 { font-size: 28px; line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.cm-card-title { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.cm-lead { font-size: 18px; line-height: 1.5; margin: 0; }
.cm-body { font-size: 16px; line-height: 1.6; margin: 0; }
.cm-meta { font-size: 14px; line-height: 1.5; margin: 0; color: var(--muted); }
.cm-label { font-size: 14px; line-height: 1.4; font-weight: 600; margin: 0; color: var(--blue); }
@media (max-width: 720px) {
  .cm-h1 { font-size: 32px; }
  .cm-h2 { font-size: 28px; }
  .cm-h3 { font-size: 24px; }
}

.cm-dark { background: var(--dark-blue); color: var(--white); }
.cm-dark .cm-label { color: var(--sky); }
.cm-dark .cm-meta { color: var(--silver-white); }

.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--target-min); padding: 12px 22px;
  border: 2px solid var(--blue); border-radius: var(--radius-0);
  font: 600 16px/1.3 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color .18s cubic-bezier(.22, 1, .36, 1), border-color .18s cubic-bezier(.22, 1, .36, 1), color .18s cubic-bezier(.22, 1, .36, 1);
}
.cm-btn--primary { background: var(--blue); color: var(--white); }
.cm-btn--primary:hover { background: var(--mid-blue); border-color: var(--mid-blue); }
.cm-btn--secondary { background: var(--white); color: var(--blue); }
.cm-btn--secondary:hover { background: var(--mid-blue); border-color: var(--mid-blue); color: var(--white); }
.cm-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cm-dark .cm-btn:focus-visible, .cm-band .cm-btn:focus-visible { outline-color: var(--sky); }
.cm-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

.cm-link {
  color: var(--blue); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--light-blue);
}
.cm-link:hover { text-decoration-color: var(--blue); color: var(--mid-blue); }
.cm-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cm-dark .cm-link, .cm-band .cm-link { color: var(--white); text-decoration-color: var(--sky); }
.cm-dark .cm-link:focus-visible, .cm-band .cm-link:focus-visible { outline-color: var(--sky); }
.cm-link--external::after { content: " \2197"; }

.cm-hero { background: var(--dark-blue); color: var(--white); padding-block: var(--space-72) var(--space-56); }
.cm-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-56); align-items: center; }
.cm-hero__copy { display: grid; gap: var(--space-16); max-width: 40rem; }
.cm-hero__copy .cm-label { color: var(--sky); }
.cm-hero__copy .cm-h1 { max-width: 15em; }
.cm-hero__copy .cm-lead { color: var(--white); max-width: 38em; }
.cm-hero__copy .cm-body { color: var(--silver-white); max-width: 38em; }
.cm-hero__copy .cm-btn-row { margin-top: var(--space-8); }
.cm-hero__media { margin: 0; background: var(--dark-blue); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.cm-hero__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .cm-hero__grid { grid-template-columns: 1fr; gap: var(--space-32); } }

.cm-facts { background: var(--mid-blue); color: var(--white); }
.cm-facts__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-facts__item { display: grid; gap: var(--space-4); padding: var(--space-24); }
.cm-facts__item:first-child { padding-left: 0; }
.cm-facts__item + .cm-facts__item { border-left: 1px solid var(--line-dark); }
.cm-facts__value { font-size: 22px; line-height: 1.2; font-weight: 600; }
.cm-facts__text { font-size: 14px; line-height: 1.45; color: var(--silver-white); }
@media (max-width: 980px) {
  .cm-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-facts__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .cm-facts__item:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
}

.cm-anchor { background: var(--blue); color: var(--white); }
.cm-anchor__inner { display: flex; align-items: center; gap: var(--space-24); min-height: 56px; overflow-x: auto; }
.cm-anchor__back { font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; white-space: nowrap; padding-right: var(--space-24); border-right: 1px solid var(--line-dark); }
.cm-anchor__label { font-size: 14px; color: var(--silver-white); white-space: nowrap; }
.cm-anchor__links { display: flex; gap: var(--space-24); list-style: none; margin: 0; padding: 0; }
.cm-anchor__links a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.cm-anchor__links a:hover, .cm-anchor__links a[aria-current="true"] { border-bottom-color: var(--sky); }
.cm-anchor a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.cm-section { padding-block: var(--space-96); }
.cm-section--silver-white { background: var(--silver-white); }
@media (max-width: 980px) { .cm-section { padding-block: var(--space-72); } }
@media (max-width: 720px) { .cm-section { padding-block: var(--space-56); } }
.cm-heading { display: grid; gap: var(--space-16); max-width: 68ch; margin-bottom: var(--space-40); }
.cm-heading .cm-label { margin-bottom: calc(var(--space-8) * -1); }
.cm-heading .cm-lead { color: var(--muted); }
.cm-dark .cm-heading .cm-lead { color: var(--silver-white); }

.cm-grid { display: grid; gap: var(--space-24); }
.cm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .cm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cm-grid--2, .cm-grid--3 { grid-template-columns: 1fr; } }
.cm-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--light-grey); border-radius: var(--radius-0); color: var(--ink); height: 100%; }
.cm-card__media { margin: 0; aspect-ratio: 16 / 9; background: var(--silver-white); overflow: hidden; }
.cm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-card__media--product img { object-fit: contain; padding: var(--space-16); }
.cm-card__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-32); flex: 1; }
.cm-card__foot { margin-top: auto; padding-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); align-items: center; }
.cm-card--text { border-top: 3px solid var(--blue); }
@media (max-width: 720px) { .cm-card__body { padding: var(--space-24); } }

.cm-quote { margin: 0; padding: 0; border: 0; max-width: 64ch; }
.cm-quote::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: var(--space-16); background: var(--blue); }
.cm-quote blockquote { margin: 0; padding: 0; border: 0; }
.cm-quote blockquote p { margin: 0; font-size: 16px; line-height: 1.55; font-style: normal; color: var(--ink); }
.cm-quote--lead blockquote p { font-size: 18px; line-height: 1.5; }
.cm-quote figcaption { margin-top: var(--space-12); font-size: 14px; line-height: 1.45; color: var(--muted); }
.cm-quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.cm-quote figcaption span { display: block; }
.cm-dark .cm-quote::before { background: var(--sky); }
.cm-dark .cm-quote blockquote p { color: var(--white); }
.cm-dark .cm-quote figcaption { color: var(--silver-white); }
.cm-dark .cm-quote figcaption strong { color: var(--white); }

.cm-table-wrap { overflow-x: auto; border: 1px solid var(--light-grey); background: var(--white); }
.cm-table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; color: var(--ink); }
.cm-table caption { text-align: left; padding: var(--space-12) var(--space-16); font-size: 14px; color: var(--muted); caption-side: bottom; border-top: 1px solid var(--light-grey); }
.cm-table th, .cm-table td { text-align: left; vertical-align: top; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--light-grey); }
.cm-table thead th { background: var(--silver-white); font-size: 14px; font-weight: 600; white-space: nowrap; }
.cm-table tbody th { font-weight: 600; }
.cm-table tbody tr:last-child > * { border-bottom: 0; }

.cm-close { background: var(--dark-blue); color: var(--white); padding-block: var(--space-72); }
.cm-close__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-32) var(--space-56); align-items: end; }
.cm-close .cm-lead { color: var(--silver-white); max-width: 52ch; margin-top: var(--space-16); }
@media (max-width: 980px) { .cm-close__grid { grid-template-columns: 1fr; } }

.cm-footnote { border-top: 1px solid var(--light-grey); padding-block: var(--space-24) var(--space-40); }
.cm-footnote p { margin: 0; max-width: 100ch; font-size: 14px; line-height: 1.6; color: var(--muted); }
.cm-footnote a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .cm-btn { transition: none; } }

@media (min-width: 768px) and (min-height: 540px), (min-width: 768px) and (pointer: fine) {
  .cm-h1, .cm-h2 { font-family: var(--font-slab); font-weight: 400; letter-spacing: -0.01em; }
}

.cm-tab { position: relative; display: inline-flex; align-items: center; padding: 4px 14px; font: 600 14px/1.4 var(--font-sans); color: var(--dark-blue); isolation: isolate; }
.cm-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--sky), var(--light-blue)); transform: skewX(-12deg); }
.cm-tab--blue { color: var(--white); }
.cm-tab--blue::before { background: linear-gradient(120deg, var(--mid-blue), var(--blue)); }

.cm-contact-flag {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); padding: 10px 18px;
  font: 600 14px/1.2 var(--font-sans); color: var(--dark-blue); text-decoration: none; cursor: pointer;
  background: linear-gradient(120deg, var(--sky), var(--light-blue)); border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0; box-shadow: var(--shadow-overlay); transform: skewX(-12deg);
}
.cm-contact-flag > * { transform: skewX(12deg); }
.cm-contact-flag svg { width: 20px; height: 20px; }
.cm-contact-flag:hover { background: var(--blue); color: var(--white); }
.cm-contact-flag:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }

.cm-dark.cm-comframe .cm-label, .cm-dark .cm-comframe-accent { color: var(--yellow); }
.cm-dark.cm-comframe .cm-quote::before { background: var(--yellow); }

/* ===== V553 ===== */
@layer cm-ds-priority {
  /* Raster mit Erklärbild: Läuft ein Erklärbild über die volle Breite, laufen die übrigen Blöcke desselben Rasters ebenfalls über die volle Breite (keine leere Spalte daneben). */
  html body main section :has(> :is(figure, picture, a) img[data-erklaerbild]:not([data-erklaerbild-layout]), > img[data-erklaerbild]:not([data-erklaerbild-layout])) > * {
    grid-column: 1 / -1 !important;
  }
  html body main .mcs-v9-product-bridge,
  html body main .app-v13-analysis-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* EVSE- und EV-Prüfung: die sechs Punkte unter dem Bild als 3 × 2 */
  html body main .app-v13-analysis-layout > .app-v13-layer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 32px !important;
    width: 100% !important;
    max-width: none !important;
  }
  @media (max-width: 1099px) {
    html body main .app-v13-analysis-layout > .app-v13-layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 719px) {
    html body main .app-v13-analysis-layout > .app-v13-layer-grid { grid-template-columns: minmax(0, 1fr) !important; }
  }

  /* Bildunterschriften: linksbündig, beginnen an der linken Bildkante, keine eigene schmalere Breite. */
  html body main figure:not([class*="testimonial"], [class*="quote"]) figcaption,
  html body main figure:not([class*="testimonial"], [class*="quote"]) [data-design-caption="below"] {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    width: auto !important;
  }
  /* comframe-Ansichten: Das Bild ist im Rahmen beschnitten; die Abbildung ist so breit wie der Rahmen, die Unterschrift bricht darin um. */
  html body main figure.cmo-ui-evidence[style*="--ui-figure-width"] {
    max-width: min(100%, var(--ui-figure-width)) !important;
  }
  /* Produktkarte EVCA Flex: Bild an der linken Kante wie die Unterschrift */
  html body main figure.evca-flex-v15-product-card :is(picture, img) {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important;
    object-position: left center !important;
  }
  html body main figure:not([class*="testimonial"], [class*="quote"]) figcaption :is(p, span, strong, small) {
    text-align: inherit !important;
  }

  /* Stichworte unter Überschriften (z. B. „New supplier · New station type · …“): mit Trennpunkt */
  html body main .cmo-content-hints {
    column-gap: 0 !important;
  }
  html body main .cmo-content-hints > li {
    display: inline-flex !important;
    align-items: baseline !important;
    position: relative !important;
  }
  html body main .cmo-content-hints > li + li::before {
    content: "·" !important;
    position: static !important;
    inset: auto !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0.6em !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    opacity: 0.8 !important;
  }

  /* Zugeschnittene Bilder (ohne leere Randstreifen): Der Abstand zum vorherigen Block kommt jetzt aus dem CSS. */
  html body main figure:has(img[data-bildrand]):not(:first-child, figure:has(img[data-erklaerbild]) + figure),
  html body main div:has(> figure:only-child img[data-bildrand]):not(:first-child),
  html body main .bcs-v7-system-visual:has(img[data-bildrand]),
  html body main :is(div, p, a, picture):not(figure *) > img[data-bildrand]:not(:first-child) {
    margin-top: clamp(24px, 2.5vw, 32px) !important;
  }
  html body main figure:has(img[data-bildrand]):not(:last-child) {
    margin-bottom: clamp(32px, 4vw, 48px) !important;
  }
}

/* ===== V554 ===== */
@layer cm-ds-priority {
  /* Bildunterschrift an der sichtbaren Bildkante: Rand des Bildes in der Farbe der Fläche (je Abbildung gemessen, --bild-rand). */
  html body main figure[style*="--bild-rand"][style*="%"] > figcaption {
    padding-left: var(--bild-rand) !important;
    padding-right: var(--bild-rand-rechts, var(--bild-rand)) !important;
  }
  @media (max-width: 720px) {
    html body main figure[style*="--bild-rand-mobil"][style*="%"] > figcaption {
      padding-left: var(--bild-rand-mobil) !important;
      padding-right: var(--bild-rand-mobil-rechts, var(--bild-rand-mobil)) !important;
    }
  }

  /* MCS-Prüfung, Technische Details: Bild allein mittig in halber Breite, die fünf Blöcke darunter in einer Reihe */
  html body main .mcs-v9-system-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(32px, 4vw, 48px) !important;
    align-items: start !important;
  }
  html body main .mcs-v9-system-grid > .mcs-v9-connector-visual {
    width: min(100%, 555px) !important;
    max-width: 555px !important;
    margin: 0 auto !important;
    justify-self: center !important;
  }
  html body main .mcs-v9-system-grid > .mcs-v9-system-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
  }
  @media (max-width: 1099px) {
    html body main .mcs-v9-system-grid > .mcs-v9-system-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 719px) {
    html body main .mcs-v9-system-grid > .mcs-v9-system-cards { grid-template-columns: minmax(0, 1fr) !important; }
  }

  /* Erklärbild mit Hochformat-Quelle: Seitenverhältnis je Bildschirmbreite reservieren */
  html body main img[data-erklaerbild][style*="--ar-desktop"] {
    aspect-ratio: var(--ar-desktop) !important;
  }
  @media (max-width: 1150px) {
    html body main img[data-erklaerbild][style*="--ar-mobile"] {
      aspect-ratio: var(--ar-mobile) !important;
    }
  }
  /* Tablet: Hochformat in höchstens 525 px Breite, mittig; Unterschrift folgt dem Bild */
  @media (min-width: 721px) and (max-width: 1150px) {
    html body main figure:has(img[data-erklaerbild][style*="--ar-mobile"]):not(.v554-a):not(.v554-b) {
      max-width: 525px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* EVCA Multi Mobile: comframe-Testintelligenz als Seitentext (vorher Teil von E13) */
  html body main .evca-mm-intelligence {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
    gap: 32px !important;
    align-items: stretch !important;
    margin: 0 0 clamp(32px, 4vw, 48px) !important;
    padding: 24px !important;
    background: #004470 !important;
    color: #ffffff !important;
  }
  html body main .evca-mm-intelligence__label {
    margin: 0 0 8px !important;
    font: 600 14px/20px Roboto, Helvetica, Arial, sans-serif !important;
    color: #ffffff !important;
  }
  html body main .evca-mm-intelligence__title {
    margin: 0 0 12px !important;
    font: 600 22px/28px Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
  }
  html body main .evca-mm-intelligence__body {
    margin: 0 !important;
    max-width: none !important;
    font: 400 16px/1.6 Roboto, Helvetica, Arial, sans-serif !important;
    color: #ededed !important;
  }
  html body main .evca-mm-intelligence__result {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #0a9edf !important;
    color: #001c32 !important;
  }
  html body main .evca-mm-intelligence__result span { font: 600 14px/20px Roboto, Helvetica, Arial, sans-serif !important; }
  html body main .evca-mm-intelligence__result strong { font: 600 22px/28px Roboto, Helvetica, Arial, sans-serif !important; }
  @media (max-width: 719px) {
    html body main .evca-mm-intelligence { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  }

  /* Startseite: comframe-Ansicht ohne Vergrößern */
  html body main .hp-zoom--static { display: block !important; cursor: default !important; }
  html body main .hp-zoom--static img { display: block !important; max-width: 100% !important; height: auto !important; }
}

@layer cm-ds-priority {
  /* Bildschrift mindestens 14 px auch auf dem Desktop: Erklärbilder nie schmaler als ihre Zeichenfläche */
  /* halbe Breite (545 px) zu zweit: Spaltenabstand so, dass jede Spalte 545 px breit ist */
  html body main :is(div, ul, ol):has(> :is(figure, li) img[data-erklaerbild-layout="zwei"]) {
    column-gap: 20px !important;
  }
  /* halbe Breite in Karten: Spaltenabstand 16 px, Bild über den Innenabstand bis an den Kartenrahmen */
  html body main :is(div, ul, ol):has(> article > figure img[data-erklaerbild-layout="zwei"]) {
    column-gap: 16px !important;
  }
  html body main article:has(> figure img[data-erklaerbild-layout="zwei"]) {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  html body main article:has(> figure img[data-erklaerbild-layout="zwei"]) > figure:not(.v554-a):not(.v554-b):not(.v554-c) {
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
  }
  html body main article:has(> figure img[data-erklaerbild-layout="zwei"]) > figure > figcaption {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  @media (max-width: 1150px) {
    html body main :is(div, ul, ol):has(> article > figure img[data-erklaerbild-layout="zwei"]),
    html body main :is(div, ul, ol):has(> :is(figure, li) img[data-erklaerbild-layout="zwei"]) { column-gap: 24px !important; }
  }
  /* Erklärbilder in aufklappbaren Bereichen (details) mit Innenabstand: volle Inhaltsbreite 1110 px */
  html body main details figure:has(img[data-erklaerbild]:not([data-erklaerbild-layout])) {
    width: min(1110px, calc(100vw - 40px)) !important;
    max-width: none !important;
    margin-left: calc((100% - min(1110px, calc(100vw - 40px))) / 2) !important;
    margin-right: calc((100% - min(1110px, calc(100vw - 40px))) / 2) !important;
    grid-column: 1 / -1 !important;
  }
}

/* ===== V555 ===== */
@layer cm-ds-priority {
  /* Erklärbilder haben nie einen eigenen Hintergrund (durchsichtiger Grund zeigt die Fläche des Abschnitts) */
  html body img[data-erklaerbild] {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Schriftfarbe nach gemessener Fläche (data-textfarbe wird je Text aus der Kontrastprüfung gesetzt) */
  html body :is(#main-content, #page-content, main) [data-textfarbe="dunkel"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e),
  html body :is(#main-content, #page-content, main) [data-textfarbe="dunkel"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e) :is(strong, b, span, a, small, em) {
    color: #001c32 !important;
    -webkit-text-fill-color: #001c32 !important;
  }
  html body :is(#main-content, #page-content, main) [data-textfarbe="hell"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e),
  html body :is(#main-content, #page-content, main) [data-textfarbe="hell"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e) :is(strong, b, span, small, em) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  html body :is(#main-content, #page-content, main) [data-textfarbe="hell"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e) a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration-color: #41baec !important;
  }
  html body :is(#main-content, #page-content, main) [data-textfarbe="grau"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e) {
    color: #59595a !important;
    -webkit-text-fill-color: #59595a !important;
  }
  html body :is(#main-content, #page-content, main) [data-textfarbe="hellblau"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e) {
    color: #41baec !important;
    -webkit-text-fill-color: #41baec !important;
  }
  html body :is(#main-content, #page-content, main) [data-textfarbe="gruen"]:not(.tf-a):not(.tf-b):not(.tf-c):not(.tf-d):not(.tf-e) {
    color: #2a6a24 !important;
    -webkit-text-fill-color: #2a6a24 !important;
  }
  /* E13-Textkasten: Ergebnis auf Sky in Dark Blue (5,7:1) */
  html body main .evca-mm-intelligence .evca-mm-intelligence__result,
  html body main .evca-mm-intelligence .evca-mm-intelligence__result :is(span, strong) {
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* „Bild neben Text“-Abschnitte: Grafiken (contain) ohne feste Höhe, ganz sichtbar in ihrem Seitenverhältnis */
  html body main [data-design-stretch-media] > figure:is(.testing-diagram, :has(img[data-cmo-image-fit="contain"])) img:not(.v555-a):not(.v555-b) {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  /* Bildunterschrift mit Titel: „Titel: Text“ in Unterschriftengröße */
  html body main figcaption[data-caption-titel] > strong {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  /* Glossar-Suche: Text beginnt rechts neben der Lupe */
  html body main .gls-v45-search input[type="search"] {
    padding-left: 48px !important;
  }
}

@layer cm-ds-priority {
  /* Hero ohne Bild: Text über die volle Breite */
  html body main [data-cmo-hero-mode="text"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body main [data-cmo-hero-mode="text"] > * {
    grid-column: 1 / -1 !important;
  }
  /* Einleitungsbild im dunklen Band direkt unter dem Hero */
  html body main .cmo-intro {
    padding-bottom: clamp(32px, 4vw, 48px) !important;
  }
  html body main .cmo-intro > .cmo-intro-figure {
    margin: 0 !important;
  }
}

/* ===== V556 ===== */
@layer cm-ds-priority {
  /* Inhaltsbilder nie größer als ihre größte Datei: Abbildung höchstens so breit, mittig; Unterschrift folgt dem Bild */
  html body :is(#main-content, #page-content, main) figure[data-bild-max]:not(.v556-a):not(.v556-b):not(.v556-c) {
    width: 100% !important;
    max-width: min(100%, var(--bild-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }
  html body :is(#main-content, #page-content, main) figure[data-bild-max]:not(.v556-a):not(.v556-b) img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  /* Einleitungsbild im ersten Inhaltsabschnitt */
  html body main .cmo-intro-figure {
    margin: 0 0 clamp(32px, 4vw, 48px) !important;
  }
}