/* =========================================================
   00. DATEI-INFORMATION
   ========================================================= */

/*
   Projekt: Mikrobiologisches Labor Dr. Michael Lohmeyer GmbH
   Datei: custom.css
   Zweck: Zentrale Design- und Layout-Anpassungen der Website
   Arbeitsversion: custom-clean-v1-phase-e62.css
   Stand: Zweite strukturelle Bereinigung und Integration der Nachträge
*/

/* =========================================================
   01. DESIGN TOKENS
   Farben, Schriftgrößen, Abstände, Radius, Schatten
========================================================= */

:root {
  /* Logo- / Corporate-Farben */
  --ml-logo-blue: #2D2AA8;
  --ml-logo-red: #F04A3A;

  /* Primäre Website-Farben */
  --ml-blue: var(--ml-logo-blue);
  --ml-red: var(--ml-logo-red);

  /* Abgeleitete Blautöne */
  --ml-dark-blue: #1E2F5C;
  --ml-light-blue: #F3F7FA;
  --ml-bg-soft: #F8FBFD;
  --ml-bg-light: var(--ml-light-blue);

  /* Legacy-Aliasse fuer noch nicht migrierte Seitenbereiche */
  --mibi-blue: var(--ml-blue);
  --mibi-dark-blue: var(--ml-dark-blue);
  --mibi-red: var(--ml-red);
  --mibi-light-blue: var(--ml-light-blue);
  --mibi-soft-bg: var(--ml-bg-soft);
  --mibi-text: var(--ml-text);
  --mibi-heading: var(--ml-heading);
  --mibi-border: var(--ml-border);

  /* Textfarben */
  --ml-text: #4A5568;
  --ml-text-dark: #243746;
  --ml-heading: #1E2F5C;
  --ml-muted: #6B7280;

  /* Flächen */
  --ml-white: #ffffff;
  --ml-border: rgba(30, 47, 92, 0.08);
  --ml-border-strong: rgba(30, 47, 92, 0.16);

  /* Container */
  --ml-container: 1180px;
  --ml-container-wide: 1380px;
  --ml-container-narrow: 980px;

  /* Abstände */
  --ml-section-y: 96px;
  --ml-section-y-sm: 64px;
  --ml-gap-sm: 16px;
  --ml-gap-md: 28px;
  --ml-gap-lg: 48px;
  --ml-gap-xl: 72px;

  /* Radius */
  --ml-radius-sm: 14px;
  --ml-radius-md: 22px;
  --ml-radius-lg: 28px;
  --ml-radius-xl: 32px;
  --ml-radius-pill: 999px;

  /* Schatten */
  --ml-shadow-soft: 0 12px 34px rgba(30, 47, 92, 0.05);
  --ml-shadow-card: 0 18px 50px rgba(30, 47, 92, 0.06);
  --ml-shadow-strong: 0 22px 60px rgba(30, 47, 92, 0.08);

  /* Card-System – semantische Komponenten-Tokens (Charge C1) */
  --ml-card-surface: var(--ml-white);
  --ml-card-border: 1px solid var(--ml-border);
  --ml-card-radius: var(--ml-radius-md);
  --ml-card-shadow: var(--ml-shadow-soft);
  --ml-card-shadow-hover: var(--ml-shadow-card);
  --ml-card-border-hover: rgba(45, 42, 168, 0.16);
  --ml-card-hover-transform: translateY(-4px);
  --ml-card-transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;

  /* Gemeinsamer Zielstil für Bereichs- und Verwandte-Leistungen-Cards */
  --ml-area-card-border: 1px solid rgba(30, 47, 92, 0.10);
  --ml-area-card-radius: 24px;
  --ml-area-card-shadow: 0 12px 32px rgba(30, 47, 92, 0.05);
  --ml-area-card-shadow-hover: 0 18px 44px rgba(30, 47, 92, 0.09);
  --ml-area-card-border-hover: rgba(45, 42, 168, 0.22);
  --ml-area-card-min-height: 215px;
  --ml-area-card-padding: 26px;

  --ml-note-surface: var(--ml-bg-light);
  --ml-note-accent: 4px solid var(--ml-red);
  --ml-note-radius: var(--ml-radius-sm);

  --ml-panel-dark-background:
    linear-gradient(135deg, var(--ml-dark-blue) 0%, var(--ml-blue) 100%);
  --ml-panel-dark-text: var(--ml-white);
  --ml-panel-dark-muted: rgba(255, 255, 255, 0.86);
  --ml-panel-dark-radius: var(--ml-radius-lg);
  --ml-panel-dark-shadow: var(--ml-shadow-strong);

  --ml-cta-border: var(--ml-card-border);
  --ml-cta-radius: var(--ml-radius-lg);
  --ml-cta-shadow: var(--ml-shadow-card);

  /* Typografie – sieben feste Textrollen */
  --ml-type-meta: 0.875rem;                         /* 14 px */
  --ml-type-small: 1rem;                            /* 16 px */
  --ml-type-body: 1.125rem;                         /* 18 px */
  --ml-type-lead: 1.25rem;                          /* 20 px */
  --ml-type-h3: clamp(1.375rem, 1.2vw, 1.5rem);    /* 22–24 px */
  --ml-type-h2: clamp(2rem, 3vw, 2.75rem);         /* 32–44 px */
  --ml-type-h1: clamp(2.5rem, 4vw, 3.5rem);        /* 40–56 px */

  /* Bewusste Ausnahme: bisherige Größe des Hauptmenüs */
  --ml-type-main-menu: 1.28rem;

  /* Einheitliche Zeilenhöhen */
  --ml-line-body: 1.65;
  --ml-line-card: 1.6;
  --ml-line-small: 1.5;
  --ml-line-h1: 1.08;
  --ml-line-h2: 1.12;
  --ml-line-h3: 1.25;
  --ml-line-interactive: 1.2;

  /* Einheitliche Laufweiten – niemals negativ */
  --ml-letter-body: normal;
  --ml-letter-heading: 0.01em;
  --ml-letter-interactive: 0.02em;
  --ml-letter-uppercase: 0.06em;
}

/* =========================================================
   02. JOOMLA / HELIX BASIS
   Header, Wrapper, Article-Infos, Standard-Resets
========================================================= */

/* ---------------------------------------------------------
   02.1 Wrapper und Hauptinhalt
   Konservativ aus dem aktuell wirksamen Originalstand
   uebernommen. Seitenspezifische :has()-Freigaben folgen
   spaeter in den jeweiligen Seitenabschnitten.
--------------------------------------------------------- */

body,
.body-wrapper,
.body-innerwrapper,
.layout-boxed,
.sp-preloader-wrap {
  overflow: visible !important;
}

#sp-main-body {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sp-main-body > .container,
#sp-main-body > .container-inner,
#sp-main-body .row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sp-component,
#sp-component > .sp-column,
#sp-component > .sp-column > .item-page,
#sp-component > .sp-column > .com-content-article,
#sp-component > .sp-column > .blog,
#sp-component > .sp-column > .blog-featured,
.body-wrapper,
.body-innerwrapper {
  min-width: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#sp-component > .sp-column > :first-child,
#sp-component .item-page > :first-child,
#sp-component .com-content-article > :first-child,
#sp-component .com-content-article__body > :first-child,
#system-message-container:empty + * {
  margin-top: 0 !important;
}

#system-message-container:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.view-featured #sp-main-body,
.view-featured #sp-main-body .container,
.view-featured #sp-main-body .container-inner {
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------------------------------------------------------
   02.2 Joomla-Artikelausgabe
--------------------------------------------------------- */

.item-page .article-info,
.item-page .icons,
.item-page .pagenavigation,
.item-page .pager,
.item-page .article-header,
.item-page .article-footer,
.item-page .article-ratings-social-share,
.item-page .article-details > .d-flex,
.item-page .article-details > hr,
.item-page .article-details .helix-social-share,
.item-page .article-social-share {
  display: none !important;
}

.item-page .article-details,
.item-page .article-can-edit,
.article-details > .article-can-edit {
  margin: 0 !important;
  padding: 0 !important;
}

a[href*="task=article.edit"] {
  display: none !important;
}

/* ---------------------------------------------------------
   02.3 Header und Hauptnavigation
   Zusammengefuehrter, zuletzt wirksamer Stand aus den
   historischen Header-, Fix- und Feinschliff-Bloecken.
--------------------------------------------------------- */

#sp-header,
#sp-header.header-sticky,
.header-sticky,
.sticky-header {
  position: sticky !important;
  top: 0;
  z-index: 99999;
  width: 100%;
  min-height: 108px;
  margin: 0 !important;
  background: var(--ml-white) !important;
  border-bottom: 1px solid var(--ml-border) !important;
  box-shadow: none !important;
}

#sp-header::before,
#sp-header::after {
  display: none !important;
}

#sp-header .sp-header-row,
#sp-header .container,
#sp-header .container-inner {
  border-bottom: none !important;
  box-shadow: none !important;
}

#sp-header .container,
#sp-header .container-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 70px !important;
  padding-right: 70px !important;
}

#sp-header .container,
#sp-header .container-inner,
#sp-header .sp-megamenu-wrapper {
  overflow: visible !important;
}

#sp-header .logo,
#sp-header .logo a {
  display: flex !important;
  align-items: center !important;
}

#sp-header .container-inner > .row {
  align-items: center;
  flex-wrap: nowrap !important;
}

#sp-header #sp-logo {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 54px) !important;
  min-width: 0;
}

#sp-header #sp-menu {
  flex: 1 1 0% !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}

#sp-header img {
  width: auto !important;
  max-height: 72px !important;
}

/* Eine durchgehende, fluide Logobreite statt sprunghafter
   Hoehenlimits am Wechsel zwischen Offcanvas und Hauptmenue. */
#sp-header .logo-image,
#sp-header .logo-image-phone,
#sp-header .logo img {
  width: clamp(200px, calc(140px + 17.5vw), 450px) !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 72px !important;
}

.sp-megamenu-parent {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 32px !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

#sp-header .sp-megamenu-parent > li,
.sp-megamenu-parent > li {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: nowrap;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  padding: 0 !important;
  color: var(--ml-blue) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.current-item > a,
.sp-megamenu-parent > li.current-menu-item > a,
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > span:hover {
  color: var(--ml-red) !important;
}

.sp-megamenu-parent > li > a .menu-toggler,
.sp-megamenu-parent > li > span .menu-toggler {
  margin-left: 6px;
  color: inherit !important;
}

/* Desktop-Suchlupe: progressive Erweiterung durch ml-header-search.js.
   Ohne JavaScript bleibt das originale Helix-Suchformular bedienbar. */
#sp-header .ml-header-search {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  margin: 0;
}

#sp-header .sp-module:has(.ml-header-search) {
  width: auto;
  min-width: 0;
  margin: 0;
}

#sp-header .sp-module:has(.ml-header-search) > .sp-module-title {
  display: none;
}

#sp-header .ml-header-search__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ml-blue);
  cursor: pointer;
}

#sp-header .ml-header-search__toggle:hover,
#sp-header .ml-header-search__toggle[aria-expanded="true"] {
  background: var(--ml-bg-light);
}

#sp-header .ml-header-search__toggle svg {
  width: 24px;
  height: 24px;
}

#sp-header .ml-header-search__panel {
  position: absolute;
  top: calc(100% + 24px);
  right: 0;
  width: 420px;
  max-width: calc(100vw - 48px);
  padding: 24px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-md);
  background: var(--ml-white);
  box-shadow: var(--ml-shadow-strong);
  z-index: 20;
}

#sp-header .ml-header-search__panel[hidden] {
  display: none !important;
}

#sp-header .ml-header-search__panel :is(form, .mod-finder__search, .input-group, .awesomplete) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#sp-header .ml-header-search__panel label {
  display: block;
  margin-bottom: 10px;
  color: var(--ml-heading);
}

#sp-header .ml-header-search__panel input[name="q"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-sm) !important;
  font-size: 16px;
  color: var(--ml-text-dark);
  background: var(--ml-white);
}

#sp-header .ml-header-search__panel button[type="submit"] {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 12px 0 0 !important;
  padding: 12px 20px;
  border: 1px solid var(--ml-blue);
  border-radius: var(--ml-radius-pill) !important;
  background: var(--ml-blue);
  color: var(--ml-white);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#sp-header .ml-header-search :is(button, input):focus-visible {
  outline: 3px solid var(--ml-blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   02.4 Mega-Menue und Untermenues
--------------------------------------------------------- */

.sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown-main,
.sp-megamenu-parent .sp-dropdown-inner {
  overflow: visible !important;
  background: var(--ml-white) !important;
}

#sp-header .sp-megamenu-parent .sp-dropdown,
.sp-megamenu-parent .sp-dropdown {
  min-width: 390px !important;
  margin-top: 0 !important;
}

#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  padding: 14px 18px !important;
  border: 1px solid var(--ml-border) !important;
  border-radius: 0 0 10px 10px !important;
  background: var(--ml-white) !important;
  box-shadow: 0 16px 38px rgba(30, 47, 92, 0.16) !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown {
  top: 0 !important;
  left: 100% !important;
  min-width: 390px !important;
  margin-left: 0 !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown .sp-dropdown-inner {
  border-radius: 0 10px 10px 10px !important;
}

#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 48px !important;
  padding: 8px 24px !important;
  color: var(--ml-blue) !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item > a {
  color: var(--ml-red) !important;
  background: var(--ml-bg-soft) !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a .menu-toggler,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span .menu-toggler {
  margin-left: auto !important;
  padding-left: 18px !important;
  color: inherit !important;
}

/* ---------------------------------------------------------
   02.4.1 Mehrstufige Flyouts auf kompakten Desktops
--------------------------------------------------------- */

@media (min-width: 1280px) and (max-width: 1799px) {
  /*
     Die zweite Flyout-Ebene entspricht der vierten Menüebene.
     Sie öffnet nach links, da rechts neben dem Kategorienmenü
     auf kleineren Desktopbreiten nicht genug Platz verbleibt.
  */
  #sp-header .sp-megamenu-parent
  .sp-dropdown.sp-dropdown-sub
  .sp-dropdown.sp-dropdown-sub {
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 12;
  }

  #sp-header .sp-megamenu-parent
  .sp-dropdown.sp-dropdown-sub
  .sp-dropdown.sp-dropdown-sub > .sp-dropdown-inner {
    border-radius: 10px 0 10px 10px !important;
  }

  /* Lange Bezeichnungen dürfen die verfügbare Menübreite nutzen. */
  #sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
  #sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  /* Pfeilrichtung an das nun links öffnende tiefe Flyout anpassen. */
  #sp-header .sp-megamenu-parent
  .sp-dropdown.sp-dropdown-sub
  li.sp-menu-item.sp-has-child > a::after,
  #sp-header .sp-megamenu-parent
  .sp-dropdown.sp-dropdown-sub
  li.sp-menu-item.sp-has-child > span::after,
  #sp-header .sp-megamenu-parent
  .sp-dropdown.sp-dropdown-sub
  li.sp-menu-item.sp-has-child > a .menu-toggler,
  #sp-header .sp-megamenu-parent
  .sp-dropdown.sp-dropdown-sub
  li.sp-menu-item.sp-has-child > span .menu-toggler {
    transform: scaleX(-1);
  }
}

/* ---------------------------------------------------------
   02.5 Offcanvas und Breakpoints
--------------------------------------------------------- */

#offcanvas-toggler,
.offcanvas-toggler,
.burger-icon {
  display: none !important;
}

/* Offcanvas: mehr Platz vor den Untermenue-Pfeilen, deutsche
   Silbentrennung und dieselben Text-/Akzentfarben wie im Seiteninhalt. */
@media (max-width: 1279px) {
  .offcanvas-menu .offcanvas-inner ul.menu li > :is(a, .menu-separator) {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    color: var(--ml-heading) !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu li.menu-parent > :is(a, .menu-separator) {
    padding-right: 42px !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu > li + li {
    border-top: 1px solid var(--ml-border-strong);
  }

  .offcanvas-menu .offcanvas-inner ul.menu > li > :is(a, .menu-separator) {
    font-weight: 700 !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu li:is(.active, .current, .current-item) > :is(a, .menu-separator),
  .offcanvas-menu .offcanvas-inner ul.menu li > a[aria-current="page"] {
    color: var(--ml-red) !important;
  }

  .offcanvas-menu .offcanvas-inner ul.menu a:focus-visible,
  .offcanvas-menu .offcanvas-inner ul.menu .menu-separator:focus-visible {
    outline: 2px solid var(--ml-blue);
    outline-offset: 2px;
  }
}

/* Der Header ueberdeckt sonst den Anfang des festen Helix-Offcanvas.
   Die Werte sind Fallbacks; ml-offcanvas-close-e57.js misst die aktuelle
   Headerkante auch bei abweichender Logo- und Fensterhoehe. */
:root {
  --ml-offcanvas-top: 110px;
}

@media (max-width: 991px) {
  :root {
    --ml-offcanvas-top: 97px;
  }
}

@media (max-width: 575px) {
  :root {
    --ml-offcanvas-top: 84px;
  }
}

@media (max-width: 1279px) {
  .offcanvas-menu,
  #offcanvas-menu {
    top: var(--ml-offcanvas-top) !important;
    height: calc(100vh - var(--ml-offcanvas-top)) !important;
    height: calc(100dvh - var(--ml-offcanvas-top)) !important;
  }

  .offcanvas-menu .offcanvas-inner,
  #offcanvas-menu .offcanvas-inner {
    max-height: calc(100vh - var(--ml-offcanvas-top)) !important;
    max-height: calc(100dvh - var(--ml-offcanvas-top)) !important;
  }
}

/* Suchmodul auf Position offcanvas; Modulklasse: ml-mobile-search.
   Native Joomla-Ausgabe passend zum Primaerbutton-Design gestalten. */
.offcanvas-menu .ml-mobile-search {
  min-width: 0;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ml-border-strong);
}

.offcanvas-menu .ml-mobile-search label {
  display: block;
  margin-bottom: 10px;
  color: var(--ml-heading);
  font-size: var(--ml-type-small);
  font-weight: 600;
}

.offcanvas-menu .ml-mobile-search :is(.mod-finder__search, .input-group) {
  display: block;
  width: 100%;
}

.offcanvas-menu .ml-mobile-search .awesomplete {
  display: block;
  width: 100%;
  min-width: 0;
}

.offcanvas-menu .ml-mobile-search input[name="q"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-sm) !important;
  background: var(--ml-white);
  color: var(--ml-text-dark);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-interactive);
  box-sizing: border-box;
}

.offcanvas-menu .ml-mobile-search button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  margin: 12px 0 0 !important;
  padding: 12px 18px;
  border: 1px solid var(--ml-blue);
  border-radius: var(--ml-radius-pill) !important;
  background: var(--ml-blue);
  color: var(--ml-white);
  font-size: var(--ml-type-small);
  font-weight: 700;
  line-height: var(--ml-line-interactive);
  cursor: pointer;
}

.offcanvas-menu .ml-mobile-search button[type="submit"]:hover {
  background: var(--ml-dark-blue);
  border-color: var(--ml-dark-blue);
}

.offcanvas-menu .ml-mobile-search :is(input, button):focus-visible {
  outline: 3px solid var(--ml-blue);
  outline-offset: 3px;
}

/* Kompakter Desktop ab 1280px; darunter Offcanvas samt mobiler Suche.
   Grenze mit ml-header-search.js synchron halten. */
@media (min-width: 1280px) and (max-width: 1799px) {
  #sp-header .container,
  #sp-header .container-inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  #sp-header .sp-megamenu-parent {
    gap: 24px !important;
  }
}

/* Engerer Desktopmodus: Navigation bleibt bis 1280px sichtbar,
   wird aber kontrolliert verdichtet. */
@media (min-width: 1280px) and (max-width: 1399px) {
  :root {
    --ml-type-main-menu: 1.1rem;
  }

  #sp-header {
    min-height: 96px;
  }

  #sp-header .container,
  #sp-header .container-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #sp-header .sp-megamenu-parent {
    gap: 18px !important;
  }

  #sp-header .sp-megamenu-parent .sp-dropdown,
  .sp-megamenu-parent .sp-dropdown,
  .sp-megamenu-parent .sp-dropdown .sp-dropdown {
    min-width: 340px !important;
  }
}

@media (max-width: 1279px) {
  #sp-header .ml-header-search {
    display: none !important;
  }

  #sp-header {
    min-height: 96px;
  }

  #sp-header .container,
  #sp-header .container-inner {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  .sp-megamenu-parent,
  .sp-megamenu-wrapper {
    display: none !important;
  }

  #offcanvas-toggler,
  .offcanvas-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .burger-icon {
    display: block !important;
  }

  .burger-icon > span,
  .burger-icon span {
    background-color: var(--ml-blue) !important;
  }
}

@media (max-width: 575px) {
  #sp-header {
    min-height: 84px;
  }
}

/* ---------------------------------------------------------
   02.6 Footer
--------------------------------------------------------- */

#sp-footer {
  padding-top: 30px;
  border-top: 1px solid #e6ebf3;
  background: var(--ml-white) !important;
}

#sp-bottom {
  background: var(--ml-white) !important;
}

/* ---------------------------------------------------------
   02.7 Joomla Smart Search – Ergebnisseite
   Auf die Suchkomponente begrenzt; Header-/Footer-Suche separat.
--------------------------------------------------------- */

body.com-finder #sp-main-body {
  padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 88px) !important;
}

body.com-finder #sp-main-body > .container,
body.com-finder #sp-main-body > .container-inner {
  width: calc(100% - 48px) !important;
  max-width: var(--ml-container-narrow) !important;
  margin-inline: auto !important;
}

body.com-finder #sp-component {
  padding-inline: 0;
}

body.com-finder #sp-component .page-header {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}

body.com-finder #sp-component h1 {
  margin: 0 0 32px;
  overflow-wrap: anywhere;
}

body.com-finder #search-form {
  margin-bottom: 36px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--ml-bg-light);
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius-md);
}

body.com-finder #search-form label {
  display: block;
  margin-bottom: 10px;
  color: var(--ml-heading);
  font-weight: 600;
}

body.com-finder #search-form .input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body.com-finder #search-form .awesomplete {
  flex: 1 1 240px;
  min-width: 0;
}

body.com-finder #search-form .awesomplete > ul {
  z-index: 10;
}

body.com-finder #search-form input[name="q"] {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-sm) !important;
  background: var(--ml-white);
  color: var(--ml-text-dark);
  font-size: var(--ml-type-small);
}

/* Native Joomla-Schaltflaeche: an das Primaerbutton-Design anpassen. */
body.com-finder #search-form .btn-primary {
  min-height: 50px;
  margin: 0;
  padding: 12px 26px;
  border: 1px solid var(--ml-blue);
  border-radius: var(--ml-radius-pill) !important;
  background: var(--ml-blue);
  color: var(--ml-white);
  font-weight: 700;
  white-space: nowrap;
}

body.com-finder #search-form .btn-primary:hover {
  background: var(--ml-dark-blue);
  border-color: var(--ml-dark-blue);
}

body.com-finder #sp-component :is(a, button, input):focus-visible {
  outline: 3px solid var(--ml-blue);
  outline-offset: 3px;
}

body.com-finder #search-results .search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.com-finder #search-results .result__item {
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid var(--ml-border-strong);
  overflow-wrap: anywhere;
}

body.com-finder #search-results .result__title {
  margin: 0 0 12px;
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
}

body.com-finder #search-results .result__title a {
  color: var(--ml-blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body.com-finder #search-results .result__title a:hover {
  color: var(--ml-dark-blue);
  text-decoration-thickness: 2px;
}

body.com-finder #search-results .result__description {
  margin: 0;
  color: var(--ml-text);
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-body);
}

body.com-finder #search-results :is(mark, .highlight) {
  padding: 0 .08em;
  background: #fff1c9;
  color: var(--ml-heading);
}

body.com-finder #search-results .pagination {
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 575px) {
  body.com-finder #sp-main-body > .container,
  body.com-finder #sp-main-body > .container-inner {
    width: calc(100% - 32px) !important;
  }

  body.com-finder #search-form .btn-primary {
    width: 100%;
  }
}

/* =========================================================
   03. BASE / TYPOGRAFIE
   Body, Überschriften, Text, Links, Listen, Bilder
========================================================= */

/* ---------------------------------------------------------
   03.1 Dokument- und Boxmodell-Basis
   Bewusst konservativ: keine Helix-Menütypografie und keine
   Formulargestaltung in diesem Abschnitt.
--------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ml-text);
  background: var(--ml-white);
}

body,
button,
input,
textarea,
select {
  font-family: inherit;
}

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

main {
  min-width: 0;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul,
ol {
  margin-top: 0;
}

/* ---------------------------------------------------------
   03.2 Überschriften-Fallback
   Nur auf den eigentlichen Seiteninhalt begrenzt, damit
   Joomla-/Helix-Navigation und Footer nicht unbeabsichtigt
   von globalen Heading-Regeln verändert werden.
--------------------------------------------------------- */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  margin-top: 0;
  color: var(--ml-heading);
  font-weight: 700;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

/* ---------------------------------------------------------
   03.3 Gemeinsame Eyebrow-/Kicker-Basis
   Farbe, Gewicht und Versalien bleiben hier definiert;
   Größe, Zeilenhöhe und Laufweite folgen zentral in 18.1.
--------------------------------------------------------- */

.ml-eyebrow,
.ml-section-kicker,
.ml-hero-kicker,
.ml-research-kicker,
.mibi-eyebrow,
.accr-eyebrow,
.team-eyebrow,
.career-eyebrow,
.jobs-eyebrow,
.internship-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  color: var(--ml-red);
  font-weight: 800;
  text-transform: uppercase;
}

/* =========================================================
   04. LAYOUT / CONTAINER
   Container, Fullwidth-Technik, Standard-Grids
========================================================= */

/* ---------------------------------------------------------
   04.1 Allgemeiner ML-Container
   Entspricht dem wirksamen Unterseiten-System im Original.
--------------------------------------------------------- */

.ml-container {
  width: 100%;
  max-width: var(--ml-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.ml-container-narrow {
  width: min(100% - 48px, var(--ml-container-narrow));
  margin-inline: auto;
}

.ml-narrow {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

/* Bestehender Unternehmenscontainer – noch keine
   Vereinheitlichung mit anderen Seitenfamilien. */
.mibi-container {
  margin-inline: auto;
}

/* Seitencontainer wie .team-inner, .pub-inner, .accr-inner,
   .services-overview-inner, .water-content-inner usw. werden
   bewusst erst mit der jeweiligen Seite migriert. Ihre final
   wirksamen Breiten unterscheiden sich im Original. */

/* ---------------------------------------------------------
   04.2 Standard-Section-Abstände
--------------------------------------------------------- */

.ml-section {
  padding-block: var(--ml-section-y);
}

.ml-section-sm {
  padding-block: var(--ml-section-y-sm);
}

/* ---------------------------------------------------------
   04.3 Fullwidth-Technik innerhalb von Joomla-Containern
   Die Technik wird zentral dokumentiert; vorhandene Klassen
   werden ohne Umbenennung beibehalten.
--------------------------------------------------------- */

.ml-fullwidth,
.ml-hero,
.ml-trust,
.ml-services,
.ml-about,
.ml-research,
.ml-subhero,
.ml-research-intro,
.ml-research-fields,
.ml-project-approach,
.ml-selected-projects,
.ml-cta-section,
.career-page-wrapper,
.internship-page-wrapper,
.jobs-page-wrapper{
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------------------------------------------------------
   04.4 Allgemeine ML-Grids
   Werte entsprechen den später wirksamen Definitionen im
   Original; fachbezogene Grids bleiben seitenspezifisch.
--------------------------------------------------------- */

.ml-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.ml-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.ml-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ml-gap-md);
}

/* ---------------------------------------------------------
   04.5 Allgemeine Section-Headings
   Bestehende Selektorgruppe aus der begonnenen Clean-Datei;
   die Typografie folgt zentral über Abschnitt 18.1.
--------------------------------------------------------- */

.ml-section-heading,
.services-overview-section-head,
.services-overview-orientation-head,
.lab-category-section-heading,
.lab-norm-section-heading,
.accr-section-heading,
.team-section-heading,
.pub-section-title,
.mibi-section-heading {
  max-width: 880px;
}

.ml-section-heading h2,
.services-overview-section-head h2,
.services-overview-orientation-head h2,
.lab-category-section-heading h2,
.lab-norm-section-heading h2,
.accr-section-heading h2,
.team-section-heading h2,
.pub-section-title h2,
.mibi-section-heading h2 {
  margin: 0 0 20px;
}

.ml-section-heading p,
.services-overview-section-head p,
.services-overview-orientation-head p,
.lab-category-section-heading p,
.lab-norm-section-heading p,
.accr-section-heading p,
.team-section-heading p,
.pub-section-title p,
.mibi-section-heading p {
  max-width: 820px;
  margin: 0;
  color: var(--ml-text);
}

/* ---------------------------------------------------------
   04.6 Responsive Grundlagen
--------------------------------------------------------- */

@media (max-width: 991px) {
  .ml-grid-2,
  .ml-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ml-container {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* =========================================================
   05. BUTTONS
   Einheitliches Button-System
========================================================= */

/*
   Verbindliche HTML-Struktur:
   .ml-btn + genau eine Farbvariante
   (.ml-btn-primary, -secondary, -accent oder -light)

   Die Farbwerte sind bewusst mit !important abgesichert.
   Dadurch bleibt das zentrale System auch gegen allgemeine
   Link- und Button-Regeln des Joomla-Templates verbindlich.
*/

.ml-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: fit-content;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--ml-radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--ml-type-small) !important;
  line-height: var(--ml-line-interactive) !important;
  letter-spacing: var(--ml-letter-interactive) !important;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.ml-btn:focus-visible {
  outline: 3px solid rgba(45, 42, 168, 0.28);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Primary Button
   Blauer Hauptbutton für helle Hintergründe
--------------------------------------------------------- */

.ml-btn-primary {
  background: var(--ml-blue) !important;
  border-color: var(--ml-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(45, 42, 168, 0.16);
}

.ml-btn-primary:hover,
.ml-btn-primary:focus-visible {
  background: var(--ml-red) !important;
  border-color: var(--ml-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(240, 74, 58, 0.20);
}

/* ---------------------------------------------------------
   Secondary Button
   Umrandeter Button für helle Hintergründe
--------------------------------------------------------- */

.ml-btn-secondary {
  background: transparent !important;
  border-color: var(--ml-blue) !important;
  color: var(--ml-blue) !important;
}

.ml-btn-secondary:hover,
.ml-btn-secondary:focus-visible {
  background: var(--ml-red) !important;
  border-color: var(--ml-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Accent Button
   Roter Button für blaue/dunkle Bereiche oder starke CTAs
--------------------------------------------------------- */

.ml-btn-accent {
  background: var(--ml-red) !important;
  border-color: var(--ml-red) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(240, 74, 58, 0.22);
}

.ml-btn-accent:hover,
.ml-btn-accent:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ml-blue) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(30, 47, 92, 0.18);
}

/* ---------------------------------------------------------
   Light Button
   Weißer Button für dunkle/blaue Hintergründe
--------------------------------------------------------- */

.ml-btn-light {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--ml-blue) !important;
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.12);
}

.ml-btn-light:hover,
.ml-btn-light:focus-visible {
  background: var(--ml-red) !important;
  border-color: var(--ml-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Button-Gruppen (ausschließlich Layout)
--------------------------------------------------------- */

.ml-hero-actions,
.ml-contact-cta-actions,
.mibi-button-row,
.accr-button-row,
.pub-hero-actions,
.career-buttons,
.services-overview-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.ml-btn:active {
  transform: translateY(0);
}

.ml-btn[aria-disabled="true"],
.ml-btn:disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   06. ALLGEMEINE KOMPONENTEN
   Cards, CTA-Boxen, Eyebrows, Section Headings
========================================================= */

/* ---------------------------------------------------------
   Card-Basis
   Gemeinsame Designfamilie für wiederkehrende Karten.
   Seiten- oder komponentenspezifische Details folgen später.
--------------------------------------------------------- */

/*
   Das Familienregister enthält nur noch die kanonische Card-Basis und
   eigenständige Komponenten, die noch nicht auf eine ml-card-Rolle
   abgebildet sind. Migrierte Seitenklassen beziehen ihre Gestaltung
   ausschließlich aus den Rollen- und Elementklassen.
*/

:where(
  .ml-card,
  .ml-trust-card,
  .ml-service-card,
  .ml-about-point,
  .ml-research-card,
  .pub-hero-note,
  .cr-situation-card,
  .id-hero-panel,
  .id-process-box,
  .id-question-list > div,
  .id-process-list > div,
  .water-process-grid > div,
  .contact-info,
  .contact-form-area,
  .contact-map-card,
  .contact-directions-card
) {
  --ml-card-local-surface: var(--ml-card-surface);
  --ml-card-local-border: var(--ml-card-border);
  --ml-card-local-radius: var(--ml-card-radius);
  --ml-card-local-shadow: var(--ml-card-shadow);
  --ml-card-local-shadow-hover: var(--ml-card-shadow-hover);
  --ml-card-local-border-hover: var(--ml-card-border-hover);
  --ml-card-local-hover-transform: var(--ml-card-hover-transform);
  --ml-card-local-transition: var(--ml-card-transition);
}

/* Kanonische Rollentokens für Fakten-, Bereichs- und Info-Cards. */

:where(.ml-card--facts) {
  --ml-card-local-border: 1px solid rgba(30, 47, 92, 0.10);
  --ml-card-local-radius: 22px;
  --ml-card-local-shadow: 0 18px 44px rgba(30, 47, 92, 0.07);
}

:where(.ml-card--facts.ml-card--water) {
  --ml-card-local-shadow: 0 14px 36px rgba(30, 47, 92, 0.06);
}

:where(.ml-card--area) {
  --ml-card-local-border: 1px solid rgba(30, 47, 92, 0.10);
  --ml-card-local-radius: 22px;
  --ml-card-local-shadow: 0 12px 30px rgba(30, 47, 92, 0.05);
  --ml-card-local-shadow-hover: 0 18px 42px rgba(30, 47, 92, 0.10);
  --ml-card-local-border-hover: rgba(45, 42, 168, 0.22);
  --ml-card-local-hover-transform: translateY(-3px);
  --ml-card-local-transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

:where(.ml-card--info) {
  --ml-card-local-surface: var(--ml-bg-soft);
  --ml-card-local-border: 1px solid rgba(30, 47, 92, 0.09);
  --ml-card-local-radius: 18px;
  --ml-card-local-shadow: none;
}

:where(.ml-card--area.ml-card--compact) {
  --ml-card-local-surface: var(--ml-white);
  --ml-card-local-border: 1px solid rgba(30, 47, 92, 0.10);
  --ml-card-local-radius: 20px;
  --ml-card-local-shadow: 0 10px 26px rgba(30, 47, 92, 0.04);
  --ml-card-local-shadow-hover: 0 16px 34px rgba(30, 47, 92, 0.09);
  --ml-card-local-border-hover: rgba(45, 42, 168, 0.22);
  --ml-card-local-hover-transform: translateY(-3px);
  --ml-card-local-transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.ml-card,
.ml-trust-card,
.ml-service-card {
  background: var(--ml-card-local-surface);
  border: var(--ml-card-local-border);
  border-radius: var(--ml-card-local-radius);
  box-shadow: var(--ml-card-local-shadow);
}

/* Klickbare Karten */

a.ml-service-card,
.ml-card--area {
  text-decoration: none !important;
  transition: var(--ml-card-local-transition);
}

a.ml-service-card:hover,
.ml-card--area:hover {
  transform: var(--ml-card-local-hover-transform);
  border-color: var(--ml-card-local-border-hover);
  box-shadow: var(--ml-card-local-shadow-hover);
}

/* Gemeinsame Inhalte des akkreditierten Leistungskatalogs */

.ml-card--facts {
  overflow: hidden;
}

.ml-card__fact:last-child {
  border-bottom: none;
}

.ml-card__fact-label {
  color: var(--ml-red);
  text-transform: uppercase;
}

.ml-card__fact-value {
  color: var(--ml-heading);
}

.ml-card--area {
  display: flex;
  flex-direction: column;
  padding: 26px;
  text-decoration: none !important;
}

.ml-card--accent-top:not(a.endo-area-card):not(a.air-area-card)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ml-red);
}

.ml-card--accent-top,
.ml-card--accent-side {
  position: relative;
  overflow: hidden;
}

.ml-card--accent-side::before {
  display: none !important;
}

.ml-card--accent-side {
  border-top: 1px solid rgba(30, 47, 92, 0.10) !important;
  border-left: 4px solid rgba(45, 42, 168, 0.18) !important;
  padding: 28px 28px 26px !important;
  box-shadow: 0 10px 28px rgba(30, 47, 92, 0.045) !important;
}

.ml-card--accent-side:hover {
  border-left-color: rgba(45, 42, 168, 0.36) !important;
  box-shadow: 0 16px 38px rgba(30, 47, 92, 0.08) !important;
}

.ml-card--accent-side > .ml-card__eyebrow {
  color: var(--ml-blue) !important;
}

.ml-card--accent-side > .ml-card__action {
  color: var(--ml-red) !important;
}

.ml-card--area > .ml-card__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--ml-red);
  font-weight: 850;
  text-transform: uppercase;
}

.ml-card--area > .ml-card__title {
  margin: 0 0 12px;
  color: var(--ml-heading);
  font-weight: 800;
}

.ml-card--area > .ml-card__text {
  margin: 0 0 18px;
  color: var(--ml-text);
}

.ml-card--area > .ml-card__action {
  margin-top: auto;
  color: var(--ml-blue);
  font-style: normal;
  font-weight: 780;
}

/*
   Verlinkte Bereichskarten der Leistungs-Kategorieseiten
   Wasserhygiene, Trinkwasserhygiene, Endotoxin- und Luftanalytik

   Die vorhandenen Seitenklassen bleiben ausschließlich als sichere
   Joomla-Layout-Hooks erhalten. Die gemeinsame Card-Gestaltung entspricht
   der bestätigten Wasseranalytik-Variante. Statische .air-area-card-Elemente
   auf Leistungsunterseiten werden durch den Elementselektor <a> bewusst
   nicht erfasst.
*/

:where(
  a.water-area-card,
  a.endo-area-card,
  a.air-area-card
).ml-card--area {
  --ml-card-local-border: var(--ml-area-card-border);
  --ml-card-local-radius: var(--ml-area-card-radius);
  --ml-card-local-shadow: var(--ml-area-card-shadow);
  --ml-card-local-shadow-hover: var(--ml-area-card-shadow-hover);
  --ml-card-local-border-hover: var(--ml-area-card-border-hover);
  --ml-card-local-hover-transform: var(--ml-card-hover-transform);
  --ml-card-local-transition: var(--ml-card-transition);
  min-height: var(--ml-area-card-min-height);
  padding: var(--ml-area-card-padding);
}

:where(
  a.water-area-card,
  a.endo-area-card,
  a.air-area-card
).ml-card--area > .ml-card__eyebrow {
  margin-bottom: 12px;
  font-weight: 800;
}

:where(
  a.water-area-card,
  a.endo-area-card,
  a.air-area-card
).ml-card--area > .ml-card__title {
  margin-bottom: 12px;
  font-weight: 750;
}

:where(
  a.water-area-card,
  a.endo-area-card,
  a.air-area-card
).ml-card--area > .ml-card__text {
  margin-bottom: 20px;
}

:where(
  a.water-area-card,
  a.endo-area-card,
  a.air-area-card
).ml-card--area > .ml-card__action {
  font-weight: 700;
}

/* Gemeinsame Inhalte statischer Informationskarten. */

.ml-card--info {
  padding: 24px 26px;
}

.ml-card--info > .ml-card__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--ml-red);
  font-weight: 800;
  text-transform: uppercase;
}

.ml-card--info > .ml-card__title {
  margin: 0 0 10px;
  color: var(--ml-heading);
  font-weight: 800;
}

.ml-card--info > .ml-card__text {
  margin: 0;
  color: var(--ml-text);
}

/* Kompakte Darstellung innerhalb der Area-Familie. */

.ml-card--area.ml-card--compact {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  padding: 24px;
  overflow: hidden;
  text-decoration: none !important;
}

.ml-card--area.ml-card--compact > .ml-card__title {
  display: block;
  margin-bottom: 12px;
  color: var(--ml-heading);
  font-weight: 780;
}

.ml-card--area.ml-card--compact > .ml-card__text {
  margin: 0 0 18px;
  color: var(--ml-text);
}

.ml-card--area.ml-card--compact > .ml-card__action {
  margin-top: auto;
  color: var(--ml-blue);
  font-style: normal;
  font-weight: 750;
}

/* Standard-Card-Inhalte */

.ml-card h3,
.ml-trust-card h3,
.ml-service-card h3 {
  margin-top: 0;
  color: var(--ml-heading);
}

.ml-card p,
.ml-trust-card p,
.ml-service-card p {
  color: var(--ml-text);
}

/* ---------------------------------------------------------
   Hinweisboxen / Notes
--------------------------------------------------------- */

.ml-note,
.contact-location-note,
.internship-note,
.accr-scope-note {
  background: var(--ml-note-surface);
  border-left: var(--ml-note-accent);
  border-radius: var(--ml-note-radius);
  padding: 18px 22px;
  color: var(--ml-heading);
}

.ml-note p,
.contact-location-note p,
.internship-note p,
.accr-scope-note p {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Dunkle Panels / blaue Boxen
   Für starke CTA-, Werte- oder Faktenbereiche.
--------------------------------------------------------- */

.ml-dark-panel,
.ml-blue-panel,
.mibi-company-quality-box,
.mibi-company-support-points,
.internship-facts,
.jobs-empty-state {
  background: var(--ml-panel-dark-background);
  color: var(--ml-panel-dark-text);
  border-radius: var(--ml-panel-dark-radius);
  box-shadow: var(--ml-panel-dark-shadow);
}

.ml-dark-panel h2,
.ml-dark-panel h3,
.ml-blue-panel h2,
.ml-blue-panel h3,
.mibi-company-quality-box strong,
.mibi-company-support-points strong,
.internship-facts strong,
.jobs-empty-state h3 {
  color: var(--ml-panel-dark-text);
}

.ml-dark-panel p,
.ml-blue-panel p,
.mibi-company-quality-box span,
.mibi-company-support-points span,
.internship-facts span,
.jobs-empty-state p {
  color: var(--ml-panel-dark-muted);
}

/* ---------------------------------------------------------
   CTA-Boxen
--------------------------------------------------------- */

.ml-cta-box,
.services-overview-cta-box,
.pub-cta-box,
.team-cta-inner,
.accr-cta,
.ml-contact-cta-inner {
  border-radius: var(--ml-cta-radius);
  border: var(--ml-cta-border);
  box-shadow: var(--ml-cta-shadow);
}

.ml-cta-box h2,
.services-overview-cta-box h2,
.pub-cta-box h2,
.team-cta-inner h2,
.accr-cta h2,
.ml-contact-cta-inner h2 {
  margin-top: 0;
}

/* ---------------------------------------------------------
   FAQ / Details / Accordion
--------------------------------------------------------- */

details {
  border: var(--ml-card-border);
  border-radius: var(--ml-note-radius);
  background: var(--ml-card-surface);
}

details + details {
  margin-top: 14px;
}

summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ml-heading);
}

summary::-webkit-details-marker {
  display: none;
}

.lab-faq summary,
.contact-accordion summary {
  list-style: none;
}

.lab-faq summary::after,
.contact-accordion summary::after {
  content: "+";
  float: right;
  color: var(--ml-red);
  font-weight: 700;
}

.lab-faq[open] summary::after,
.contact-accordion details[open] summary::after {
  content: "–";
}

/* =========================================================
   06.1 KANONISCHE INFO- UND KOMPAKTE AREA-CARDS

   Komponentenautorität für migrierte HTML-Elemente. Seiten- und
   Gridklassen regeln nur noch Einordnung und Layout.
========================================================= */

/* Statische Informationskarte */

body #sp-main-body .ml-card.ml-card--info {
  background: var(--ml-bg-soft) !important;
  border: 1px solid rgba(30, 47, 92, 0.09) !important;
  border-radius: 18px !important;
  padding: 24px 26px !important;
  box-shadow: none !important;
}

body #sp-main-body .ml-card.ml-card--info > .ml-card__eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--ml-red);
  font-weight: 800 !important;
  text-transform: uppercase;
}

body #sp-main-body .ml-card.ml-card--info > .ml-card__title {
  margin: 0 0 10px !important;
  color: var(--ml-heading);
  font-weight: 820 !important;
}

body #sp-main-body .ml-card.ml-card--info > .ml-card__text {
  margin: 0 !important;
  color: var(--ml-text);
}

/* Kompakte Area-Card für eine verwandte Leistung */

body #sp-main-body .water-next-pages-grid > a.ml-card.ml-card--area.ml-card--compact {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--ml-area-card-min-height) !important;
  padding: var(--ml-area-card-padding) !important;
  background: var(--ml-white) !important;
  border: var(--ml-area-card-border) !important;
  border-radius: var(--ml-area-card-radius) !important;
  box-shadow: var(--ml-area-card-shadow) !important;
  overflow: hidden;
  text-decoration: none !important;
  transition: var(--ml-card-transition);
}

body #sp-main-body .water-next-pages-grid > a.ml-card.ml-card--area.ml-card--compact:hover {
  transform: var(--ml-card-hover-transform);
  border-color: var(--ml-area-card-border-hover) !important;
  box-shadow: var(--ml-area-card-shadow-hover) !important;
}

body #sp-main-body .water-next-pages-grid > a.ml-card.ml-card--area.ml-card--compact > .ml-card__title {
  display: block;
  margin-bottom: 12px;
  color: var(--ml-heading);
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 750 !important;
}

body #sp-main-body .water-next-pages-grid > a.ml-card.ml-card--area.ml-card--compact > .ml-card__text {
  margin: 0 0 20px !important;
  color: var(--ml-text);
}

body #sp-main-body .water-next-pages-grid > a.ml-card.ml-card--area.ml-card--compact > .ml-card__action {
  margin-top: auto;
  color: var(--ml-blue);
  font-style: normal;
  font-weight: 700 !important;
}

/* =========================================================
   06.2 KANONISCHE FEATURE- UND PROZESS-CARDS

   Dieser Komponentenblock vereinheitlicht die inhaltlich gleichen Karten auf
   der Unternehmensseite, der F&E-Seite und der Auftragsforschungsseite.
   Seiten- und Gridklassen bleiben nur dort erhalten, wo sie Layout oder
   eine eigenständige Variante steuern. Die folgenden Rollenklassen sind
   die alleinige Autorität für das gemeinsame Card-Design. Ihre reguläre
   Kaskade benötigt nur noch gezielte Farb- und Schriftschnitt-Prioritäten.
========================================================= */

/* ---------------------------------------------------------
   Statische Feature-Card

   Für Schwerpunkte, Kompetenzfelder und mögliche Beiträge. Das optionale
   Eyebrow-Element kann entfallen, ohne eine zweite Card-Variante zu erzeugen.
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--feature {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 30px;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(30, 47, 92, 0.055);
}

#sp-main-body .ml-card.ml-card--feature > .ml-card__eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  font-weight: 850 !important;
  letter-spacing: var(--ml-letter-uppercase);
  text-transform: uppercase;
}

#sp-main-body .ml-card.ml-card--feature > .ml-card__title {
  margin: 0 0 14px;
  color: var(--ml-heading) !important;
  font-weight: 820 !important;
}

#sp-main-body .ml-card.ml-card--feature > .ml-card__text {
  margin: 0;
  color: var(--ml-text) !important;
}

/* ---------------------------------------------------------
   Prozess-Card auf dunkler Verlaufsfläche

   Die Card bleibt statisch. Nummer, Titel und Beschreibung bilden ein
   einheitliches Inhaltsmodell für F&E und Auftragsforschung.
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--process {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  padding: 28px 30px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.07);
  color: var(--ml-white);
}

#sp-main-body .ml-card.ml-card--process > .ml-card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 18px;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-red);
  color: var(--ml-white);
  font-size: var(--ml-type-meta);
  line-height: 1;
  font-weight: 850 !important;
  letter-spacing: var(--ml-letter-uppercase);
}

#sp-main-body .ml-card.ml-card--process > .ml-card__title {
  margin: 0 0 10px;
  color: var(--ml-white) !important;
  font-weight: 830 !important;
}

#sp-main-body .ml-card.ml-card--process > .ml-card__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.86) !important;
}

/* ---------------------------------------------------------
   Info-Card mit rotem Seitenakzent

   Die F&E-Kooperationsboxen bleiben Teil der C10-Info-Familie. Der Akzent
   ist ein kombinierbarer Modifier und keine neue Card-Familie.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--accent-red {
  --ml-card-local-accent: var(--ml-red);
}

body #sp-main-body .ml-card.ml-card--info.ml-card--accent-side {
  overflow: hidden;
  border-left: 4px solid var(--ml-card-local-accent, var(--ml-blue)) !important;
  box-shadow: 0 12px 34px rgba(30, 47, 92, 0.045) !important;
}

body #sp-main-body .ml-card.ml-card--info.ml-card--accent-side::before {
  display: none !important;
}

/* ---------------------------------------------------------
   Responsive Komponentendichte
--------------------------------------------------------- */

@media (max-width: 767px) {
  #sp-main-body .ml-card.ml-card--feature,
  #sp-main-body .ml-card.ml-card--process {
    padding: 26px 24px;
  }
}

/* =========================================================
   06.3 KANONISCHE INVERSE- UND ACTION-CARDS

   Dieser Komponentenblock vereinheitlicht die Karten der Karriereübersicht,
   der Stellenausschreibungen und der Praktikumsseite. Seiten- und
   Gridklassen bleiben als Layout-Hooks bestehen; die Rollenklassen
   bestimmen ausschließlich das Card-Design.
========================================================= */

/* ---------------------------------------------------------
   Inverse Card-Darstellung

   Kombinierbarer Darstellungsmodifier für Cards auf dunkler Fläche. Die
   Kartenrolle bleibt weiterhin --feature; --inverse ändert ausschließlich
   Oberfläche, Rahmen, Schatten und Textfarben.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--inverse {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  color: var(--ml-white) !important;
}

body #sp-main-body .ml-card.ml-card--inverse > .ml-card__eyebrow {
  color: rgba(255, 255, 255, 0.76) !important;
}

body #sp-main-body .ml-card.ml-card--inverse > .ml-card__title {
  color: var(--ml-white) !important;
}

body #sp-main-body .ml-card.ml-card--inverse > .ml-card__text {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* ---------------------------------------------------------
   Action-Card

   Für einen klar abgegrenzten Einstieg mit Titel, Beschreibung und eigenem
   Button. Die Karte selbst ist nicht verlinkt; die Aktion bleibt ein regulärer
   ml-btn und erhält deshalb keinen Card-Hover.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--action {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0 !important;
  height: 100%;
  padding: 48px 52px !important;
  background: var(--ml-white) !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;
  border-radius: 26px !important;
  box-shadow: 0 16px 44px rgba(30, 47, 92, 0.055) !important;
}

body #sp-main-body .ml-card.ml-card--action > .ml-card__eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--ml-red);
  font-size: var(--ml-type-meta) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: var(--ml-letter-uppercase) !important;
  text-transform: uppercase;
}

body #sp-main-body .ml-card.ml-card--action > .ml-card__title {
  margin: 0 0 18px !important;
  color: var(--ml-heading) !important;
  font-weight: 830 !important;
}

body #sp-main-body .ml-card.ml-card--action > .ml-card__text {
  margin: 0 0 30px !important;
  color: var(--ml-text) !important;
}

body #sp-main-body .ml-card.ml-card--action > .ml-btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------------------------------------------------------
   Responsive Komponentendichte
--------------------------------------------------------- */

@media (max-width: 767px) {
  body #sp-main-body .ml-card.ml-card--action {
    padding: 32px 28px !important;
  }

  body #sp-main-body .ml-card.ml-card--action > .ml-btn {
    align-self: stretch;
    text-align: center;
  }
}

/* =========================================================
   06.4 KANONISCHE CARD-ELEMENTE UND MODIFIER

   Dieser Komponentenblock vereinheitlicht Prinzipien-, Bereichs- und
   Downloadkarten der Akkreditierungsseite. Verbleibende Seitenklassen
   steuern nur Layout und Seiteneinordnung; die ml-card-Klassen beschreiben
   Card-Rolle, Darstellung und Inhaltsstruktur.
========================================================= */

/* ---------------------------------------------------------
   Verborgener Bestandsindex

   Die bisherigen Nummern der Akkreditierungsprinzipien waren bereits
   visuell ausgeblendet. Das kanonische Kind-Element konserviert den
   Bestand, ohne ihn wieder sichtbar oder für Screenreader redundant zu
   machen. aria-hidden wird zusätzlich im HTML gesetzt.
--------------------------------------------------------- */

body #sp-main-body .ml-card > .ml-card__index {
  display: none !important;
}

/* ---------------------------------------------------------
   Kombinierbarer oberer Card-Akzent

   --accent-top ist keine eigene Kartenrolle. Der Modifier kann mit
   Feature-, Info- oder Action-Cards kombiniert werden und übernimmt die
   über --accent-red beziehungsweise andere Farbtokens gesetzte Farbe.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--accent-top:not(a.endo-area-card):not(a.air-area-card) {
  border-top: 4px solid var(--ml-card-local-accent, var(--ml-blue)) !important;
}

/*
   Verwandte-Leistungen-Cards der Wasser-, Endotoxin- und Luftseiten sind
   bewusst streifenlos. Der alte Accent-Modifier bleibt im HTML folgenlos.
*/
body #sp-main-body .water-next-pages-grid > a.ml-card.ml-card--area.ml-card--compact.ml-card--accent-top {
  border: var(--ml-area-card-border) !important;
}

/* ---------------------------------------------------------
   Standardisierte Inhaltsliste innerhalb einer Card
--------------------------------------------------------- */

body #sp-main-body .ml-card > .ml-card__list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0 !important;
  padding-left: 20px !important;
  color: var(--ml-text) !important;
}

body #sp-main-body .ml-card > .ml-card__list > li::marker {
  color: var(--ml-card-local-accent, var(--ml-red));
}

/* ---------------------------------------------------------
   Kompakte Action-Card

   Die Rollenklasse bleibt --action. Der bereits bei Area-Cards etablierte
   Modifier --compact reduziert ausschließlich Dichte und Rundung. So
   bleiben die Downloadkarten visuell nah am bisherigen Stand, ohne eine
   eigene Download-Card-Familie zu erzeugen.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--action.ml-card--compact {
  padding: 36px !important;
  border-radius: 24px !important;
}

/* =========================================================
   07. STARTSEITE
   Wirksamer Seitenbestand; eigenständige Designvarianten bleiben erhalten.
========================================================= */

/* ---------------------------------------------------------
   07.1 Seitenweite Kicker und Hero
--------------------------------------------------------- */

/* Der Hinweis bleibt in jeder Bilddatei. Bei einem Hero-Zuschnitt, der ihn
   abschneidet, blendet hero-ki-hinweis-e64.js den kleinen HTML-Hinweis ein.
   Auf den bekannten kurzen Hero-Typen sorgt CSS auch ohne laufendes JS für
   eine sichtbare Markierung. Die Bildposition bleibt unverändert. */
.ml-ai-hero {
  position: relative;
}

.ml-ai-hero > .ml-ai-hero-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fallback für die zugeschnittenen Hero-Fotos: Sobald JS das Bild geprüft
   hat, setzt es .ml-ai-checked und übernimmt die Anzeige ohne doppelten Text.
   F&E und die Karriere-Fotokachel bleiben bewusst ausgenommen. */
:is(
  .ml-hero,
  .services-overview-hero,
  .lab-explorer-hero,
  .lab-category-hero,
  .lab-norm-page[class*="lab-category-"] .lab-norm-hero,
  .mibi-company-hero,
  .accr-hero,
  .water-hero,
  .endo-hero,
  .air-hero,
  .contract-research-page .cr-hero.cr-hero-image,
  .id-hero
):not(.ml-ai-checked) {
  position: relative;
}

:is(
  .ml-hero,
  .services-overview-hero,
  .lab-explorer-hero,
  .lab-category-hero,
  .lab-norm-page[class*="lab-category-"] .lab-norm-hero,
  .mibi-company-hero,
  .accr-hero,
  .water-hero,
  .endo-hero,
  .air-hero,
  .contract-research-page .cr-hero.cr-hero-image,
  .id-hero
):not(.ml-ai-checked)::after {
  content: "KI-generiert";
}

.ml-ai-hero.ml-ai-badge-needed > .ml-ai-hero-label,
:is(
  .ml-hero,
  .services-overview-hero,
  .lab-explorer-hero,
  .lab-category-hero,
  .lab-norm-page[class*="lab-category-"] .lab-norm-hero,
  .mibi-company-hero,
  .accr-hero,
  .water-hero,
  .endo-hero,
  .air-hero,
  .contract-research-page .cr-hero.cr-hero-image,
  .id-hero
):not(.ml-ai-checked)::after {
  position: absolute;
  z-index: 30;
  right: clamp(10px, 1.1vw, 20px);
  bottom: -7px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 7px 11px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: #1e2f5c;
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  pointer-events: none;
}

.ml-section-kicker,
.ml-hero-kicker,
.ml-research-kicker {
  color: #F04A3A;
  font-weight: 700;
  margin-bottom: 18px;
}

.ml-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  min-height: 520px !important;
  padding: 62px 24px 68px;
  overflow: hidden;
  background-image: url("/images/home/hero-labor.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ml-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

.ml-hero-content {
  position: relative;
  z-index: 2;
  width: min(1600px, 92vw) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 80px 0 !important;
}

.ml-hero-content > * {
  margin-left: 0 !important;
}

.ml-hero h1 {
  max-width: 560px !important;
  margin-bottom: 24px !important;
  color: #2D2AA8;
  font-size: var(--ml-type-h1) !important;
  line-height: var(--ml-line-h1) !important;
  letter-spacing: var(--ml-letter-heading) !important;
  font-weight: 800;
}

.ml-hero-text {
  max-width: 520px !important;
  margin-bottom: 30px !important;
  color: #23304d;
}

.ml-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* ---------------------------------------------------------
   07.1a Hinweis auf den neuen Internetauftritt
   Auf breiten Ansichten als Box rechts auf dem Hero; auf schmalen
   Ansichten im Hero vor dem regulären Inhalt.
--------------------------------------------------------- */

.ml-hero-content > .ml-site-notice {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 0;
  width: min(400px, 34vw);
  margin: 0 !important;
  color: var(--ml-text-dark);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--ml-logo-blue);
  border-radius: var(--ml-radius-sm);
  box-shadow: 0 14px 38px rgba(30, 47, 92, 0.14);
}

.ml-site-notice[hidden] {
  display: none !important;
}

.ml-site-notice__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: start;
  gap: 14px;
  padding: 20px 18px 20px 22px;
}

.ml-site-notice__content {
  min-width: 0;
}

.ml-site-notice__title {
  margin: 0 0 6px;
  color: var(--ml-heading);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 750;
  line-height: 1.3;
}

.ml-site-notice__text {
  margin: 0;
  color: var(--ml-text-dark);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

.ml-site-notice__close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--ml-heading);
  font-size: 1.5rem;
  line-height: 1;
  background: var(--ml-white);
  border: 1px solid var(--ml-border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ml-site-notice__close:hover {
  background: var(--ml-bg-light);
  border-color: var(--ml-blue);
}

.ml-site-notice__close:focus-visible {
  outline: 3px solid var(--ml-blue);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .ml-hero-content > .ml-site-notice {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 520px);
    margin: 0 0 30px !important;
  }
}

@media (max-width: 575px) {
  .ml-hero-content > .ml-site-notice {
    width: 100%;
    margin-bottom: 24px !important;
  }

  .ml-site-notice__inner {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 17px 14px 18px 16px;
  }

  .ml-site-notice__title {
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  .ml-site-notice__text {
    font-size: 0.9375rem;
  }

  .ml-site-notice__close {
    width: 36px;
    height: 36px;
  }
}

/* ---------------------------------------------------------
   07.2 Trust-Karten
--------------------------------------------------------- */

.ml-trust {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 42px 0 58px !important;
  background: #f5f8fc !important;
}

.ml-trust-grid {
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding-left: 90px !important;
  padding-right: 90px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(300px, 1fr)) !important;
  gap: 34px !important;
  box-sizing: border-box !important;
}

.ml-trust-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 200px !important;
  padding: 34px 28px 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(30, 47, 92, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 46px rgba(30, 47, 92, 0.09) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.ml-trust-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 42, 168, 0.24) !important;
  box-shadow: 0 24px 58px rgba(30, 47, 92, 0.12) !important;
}

.ml-trust-head {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

.ml-trust-icon {
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(45, 42, 168, 0.07) !important;
  color: #2D2AA8 !important;
  border-radius: 16px !important;
}

.ml-trust-icon svg {
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.ml-trust-card h3 {
  margin: 0 !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.ml-trust-card p {
  margin: 0 !important;
  color: #334155 !important;
}

/* Vier gleichwertige Karten bleiben nur stehen, wenn ihre
   Mindestbreite samt Innenabstaenden wirklich verfuegbar ist. */
@media (max-width: 1499px) {
  .ml-trust-grid {
    max-width: 1200px !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }
}

@media (max-width: 700px) {
  .ml-trust-grid {
    max-width: 700px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .ml-trust-card {
    min-height: auto !important;
  }
}

/* ---------------------------------------------------------
   07.3 Leistungen-Teaser
--------------------------------------------------------- */

.ml-services {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 78px 24px 86px !important;
  background: #f5f8fc !important;
  border-top: 1px solid rgba(30, 47, 92, 0.04);
}

.ml-services-inner {
  width: min(1480px, 90vw) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 0.82fr 1.18fr !important;
  gap: 74px !important;
  align-items: start !important;
}

.ml-services-intro {
  position: sticky;
  top: 140px;
}

.ml-services-intro h2 {
  margin: 0 0 26px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.ml-services-intro > p:not(.ml-section-kicker) {
  max-width: 520px !important;
  margin: 0 0 38px !important;
  color: #334155 !important;
}

.ml-services-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

.ml-service-card {
  position: relative !important;
  min-height: 210px !important;
  padding: 34px 34px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(30, 47, 92, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 36px rgba(30, 47, 92, 0.065) !important;
  text-decoration: none !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

.ml-service-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #2D2AA8 0%, #F04A3A 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
}

.ml-service-card::after {
  content: "→" !important;
  position: absolute !important;
  right: 30px !important;
  bottom: 26px !important;
  color: #2D2AA8 !important;
  font-weight: 700 !important;
  opacity: 0.45 !important;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease !important;
}

.ml-service-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(45, 42, 168, 0.24) !important;
  box-shadow: 0 24px 58px rgba(30, 47, 92, 0.12) !important;
}

.ml-service-card:hover::before {
  opacity: 1 !important;
}

.ml-service-card:hover::after {
  transform: translateX(4px) !important;
  opacity: 1 !important;
}

.ml-service-card span {
  display: inline-block !important;
  margin-bottom: 22px !important;
  color: #F04A3A !important;
  font-weight: 800 !important;
}

.ml-service-card h3 {
  margin: 0 0 18px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.ml-service-card p {
  margin: 0 !important;
  padding-right: 28px !important;
  color: #334155 !important;
}

.ml-service-card--wide {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  align-items: center !important;
  column-gap: 32px !important;
  min-height: 160px !important;
  padding-right: 64px !important;
}

.ml-service-card--wide h3 {
  margin-bottom: 0 !important;
}

@media (max-width: 1199px) {
  .ml-services-inner {
    grid-template-columns: 1fr !important;
    gap: 54px !important;
  }

  .ml-services-intro {
    position: static !important;
    max-width: 850px !important;
  }

  .ml-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .ml-services-inner {
    width: calc(100vw - 44px) !important;
  }

  .ml-services-grid {
    grid-template-columns: 1fr !important;
  }

  .ml-service-card {
    min-height: auto !important;
  }

  .ml-service-card--wide {
    display: flex !important;
    align-items: stretch !important;
    padding-right: 34px !important;
  }

  .ml-service-card--wide h3 {
    margin-bottom: 18px !important;
  }
}

/* ---------------------------------------------------------
   07.4 Über-uns-Bereich
--------------------------------------------------------- */

.ml-about {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 78px 24px 86px !important;
  background: #f5f8fc !important;
  border-top: 1px solid rgba(30, 47, 92, 0.04);
}

.ml-about-grid {
  width: min(1480px, 90vw) !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr) !important;
  gap: 110px !important;
  align-items: center !important;
}

.ml-about-content {
  max-width: 760px !important;
}

.ml-about-content h2 {
  margin: 0 0 30px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.ml-about-text {
  margin: 0 0 24px !important;
  color: #334155 !important;
}

.ml-about-points {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 42px !important;
}

.ml-about-point {
  padding: 20px 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(30, 47, 92, 0.10) !important;
  border-radius: 16px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 32px rgba(30, 47, 92, 0.065) !important;
}

.ml-about-side {
  display: flex !important;
  justify-content: center !important;
}

.ml-about-box {
  position: relative !important;
  width: min(540px, 100%) !important;
  max-width: 440px;
  min-height: 340px !important;
  padding: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(135deg, #2D2AA8 0%, #1E2F5C 100%) !important;
  border-radius: 30px !important;
  box-shadow: 0 26px 70px rgba(30, 47, 92, 0.22) !important;
}

.ml-about-box::before {
  content: "" !important;
  position: absolute !important;
  right: -90px !important;
  top: -90px !important;
  width: 260px !important;
  height: 260px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50% !important;
}

.ml-about-box::after {
  content: "" !important;
  position: absolute !important;
  left: -70px !important;
  bottom: -70px !important;
  width: 190px !important;
  height: 190px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-radius: 50% !important;
}

.ml-about-box h3 {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 0 28px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.ml-about-box p {
  position: relative !important;
  z-index: 2 !important;
  max-width: 360px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

@media (max-width: 1199px) {
  
}

@media (max-width: 640px) {
  .ml-about-grid {
    width: calc(100vw - 44px) !important;
  }

  .ml-about-points {
    grid-template-columns: 1fr !important;
  }

  .ml-about-box {
    border-radius: 24px !important;
  }
}

/* ---------------------------------------------------------
   07.5 Forschung und Methodenentwicklung
--------------------------------------------------------- */

.ml-research {
  position: relative;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  padding: 72px 24px 78px !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      circle at 94% 0%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;
}

.ml-research::before {
  content: "";
  position: absolute;
  top: -250px;
  right: -250px;
  width: 700px;
  height: 700px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  opacity: 0.8;
}

.ml-research-inner {
  position: relative;
  z-index: 2;
  width: min(1500px, 92vw) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.ml-research-content {
  max-width: none !important;
  margin-bottom: 42px !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr) !important;
  column-gap: 90px !important;
  row-gap: 22px !important;
  align-items: start !important;
}

.ml-research-kicker {
  grid-column: 1 / -1 !important;
  margin-bottom: 0 !important;
  color: #F04A3A !important;
  font-weight: 800 !important;
}

.ml-research-content h2 {
  grid-column: 1 !important;
  grid-row: 2 / span 2 !important;
  max-width: 600px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.ml-research-copy {
  grid-column: 2 !important;
  max-width: 700px !important;
  margin-top: 8px !important;
}

.ml-research-text {
  grid-column: 2 !important;
  max-width: 680px !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.ml-research-copy .ml-research-text {
  margin: 0 0 18px !important;
}

.ml-research-copy .ml-research-text:last-child {
  margin-bottom: 0 !important;
}

.ml-research-copy,
.ml-research-text {
  min-width: 0 !important;
}

.ml-research-cards {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;
}

.ml-research-card {
  min-height: 145px !important;
  padding: 28px 32px !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.25s ease;
}

.ml-research-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(30, 47, 92, 0.09);
}

.ml-research-card h3 {
  margin: 0 0 18px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.ml-research-card p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.84) !important;
}

/* Das zweispaltige Intro benoetigt mindestens 1030px reine
   Inhaltsbreite und wird deshalb bereits auf kleinen Desktops
   untereinander angeordnet. */
@media (max-width: 1199px) {
  .ml-research-content {
    display: block !important;
  }

  .ml-research-copy {
    margin-top: 28px !important;
  }

  .ml-research-text {
    max-width: 760px !important;
  }
}

@media (max-width: 991px) {
  .ml-research-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------
   07.6 Kontakt-CTA
--------------------------------------------------------- */

.ml-contact-cta {
  position: relative;
  padding: 34px 0 56px !important;
  background: #f5f8fc !important;
  border-top: 1px solid rgba(30, 47, 92, 0.04);
}

.ml-contact-cta-inner {
  max-width: 1080px !important;
  margin: 0 auto;
  padding: 54px 62px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 58px !important;
  background: #ffffff;
  border: 1px solid rgba(45, 42, 168, 0.08);
  border-radius: 24px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.ml-contact-cta-content {
  flex: 1;
  max-width: 650px;
}

.ml-contact-cta-content .ml-section-kicker {
  margin-bottom: 18px;
  color: #F04A3A;
  font-weight: 800;
  text-transform: uppercase;
}

.ml-contact-cta-content h2 {
  margin-bottom: 22px !important;
  color: #1d3470;
  font-weight: 800;
}

.ml-contact-cta-content p {
  margin: 0;
  color: #4f5b73;
}

.ml-contact-cta-actions {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 18px;
}

.ml-contact-cta-actions .ml-btn {
  min-width: 240px !important;
  justify-content: center;
  text-align: center;
}

@media (max-width: 991px) {
  .ml-contact-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .ml-contact-cta-content {
    max-width: 100%;
  }

  .ml-contact-cta-actions {
    width: 100%;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .ml-contact-cta-actions .ml-btn {
    width: 100%;
  }
}

/* =========================================================
   08. LEISTUNGSÜBERSICHT
   Wirksamer Seitenbestand; eigenständige Designvarianten bleiben erhalten.
========================================================= */

/* ---------------------------------------------------------
   08.1 Joomla-/Helix-Freigabe fuer diese Seite
--------------------------------------------------------- */

body:has(.ml-services-overview-page) #sp-main-body,
body:has(.ml-services-overview-page) #sp-main-body > .container,
body:has(.ml-services-overview-page) #sp-component,
body:has(.ml-services-overview-page) #sp-component .sp-column,
body:has(.ml-services-overview-page) .item-page,
body:has(.ml-services-overview-page) .article-details,
body:has(.ml-services-overview-page) .com-content-article,
body:has(.ml-services-overview-page) .com-content-article__body {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   08.2 Seitenrahmen und Inhaltsbreiten
--------------------------------------------------------- */

.ml-services-overview-page {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
  background: #ffffff;
  color: #10265a;
}

.ml-services-overview-page .services-overview-hero,
.ml-services-overview-page .services-overview-areas,
.ml-services-overview-page .services-overview-orientation,
.ml-services-overview-page .services-overview-cta{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

.ml-services-overview-page .services-overview-inner {
  width: min(1360px, calc(100% - 96px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   08.3 Hero
--------------------------------------------------------- */

.services-overview-hero {
  min-height: 430px !important;
  height: auto !important;
  padding: 72px 0 68px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  background:
    linear-gradient(
      90deg,
      rgba(244, 248, 251, 0.98) 0%,
      rgba(244, 248, 251, 0.96) 31%,
      rgba(244, 248, 251, 0.82) 50%,
      rgba(244, 248, 251, 0.42) 68%,
      rgba(244, 248, 251, 0.08) 100%
    ),
    url("/images/hero/leistungen-hero.png") center right / cover no-repeat !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.10);
}

.services-overview-hero .services-overview-inner {
  width: min(1320px, calc(100% - 96px)) !important;
  max-width: none !important;
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}

.services-overview-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px !important;
  padding: 0 !important;
}

.services-overview-hero-content h1 {
  max-width: 720px !important;
  margin: 0 0 20px !important;
  color: #10265a !important;
}

.services-overview-hero-content p {
  max-width: 690px !important;
  margin: 0 0 26px !important;
  color: #10265a !important;
  font-weight: 600 !important;
}

.services-overview-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: normal;
  margin-top: 0 !important;
}

/* ---------------------------------------------------------
   08.4 Leistungsbereiche und Karten
--------------------------------------------------------- */

.services-overview-areas {
  padding: 66px 0 74px !important;
  background: #F4F8FB !important;
}

.services-overview-section-head {
  max-width: 900px;
  margin-bottom: 36px !important;
}

.services-overview-section-head h2 {
  max-width: 900px !important;
  margin: 0 0 18px !important;
  color: #10265a !important;
  font-weight: 800 !important;
}

.services-overview-section-head p {
  max-width: 850px !important;
  margin: 0 !important;
  color: #10265a !important;
}

.services-overview-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

.services-overview-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 255px !important;
  padding: 28px 28px 24px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(16, 38, 90, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(16, 38, 90, 0.06) !important;
  color: #10265a !important;
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.services-overview-card::before {
  display: none !important;
}

.services-overview-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240, 74, 58, 0.45) !important;
  box-shadow: 0 24px 54px rgba(16, 38, 90, 0.10) !important;
  text-decoration: none !important;
}

.services-overview-card > span {
  display: block;
  margin-bottom: 18px;
  color: #F04A3A !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.services-overview-card h3 {
  margin: 0 0 14px !important;
  color: #10265a !important;
  font-weight: 800 !important;
}

.services-overview-card p {
  margin: 0 0 24px !important;
  color: #10265a !important;
}

.services-overview-card em {
  display: inline-block;
  margin-top: 22px !important;
  color: #2D2AA8 !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.services-overview-card:hover em {
  color: #F04A3A !important;
}

/* ---------------------------------------------------------
   08.5 Orientierung und Akkreditierungsstatus
--------------------------------------------------------- */

.services-overview-orientation {
  padding: 58px 0 !important;
  background: #ffffff !important;
}

.services-overview-orientation-head {
  max-width: 980px;
  margin-bottom: 30px !important;
}

.services-overview-orientation-head h2 {
  margin: 0 0 18px !important;
  color: #10265a !important;
  font-weight: 800 !important;
}

.services-overview-orientation-head p {
  max-width: 940px;
  margin: 0 !important;
  color: #10265a !important;
}

.services-overview-orientation-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.services-overview-orientation-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  min-height: 270px !important;
  padding: 30px 34px !important;
  background: #F4F8FB !important;
  border: 1px solid rgba(16, 38, 90, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(16, 38, 90, 0.06) !important;
}

.services-overview-orientation-card::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: #F04A3A;
}

.services-overview-orientation-card > span {
  display: block;
  margin-bottom: 16px;
  color: #F04A3A !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.services-overview-orientation-card h3 {
  margin: 0 0 16px !important;
  color: #10265a !important;
  font-weight: 800 !important;
}

.services-overview-orientation-card p {
  max-width: 760px;
  margin: 0 !important;
  color: #10265a !important;
}

.services-overview-orientation-card .ml-btn {
  align-self: flex-start;
  margin-top: auto;
}

.services-overview-orientation-note {
  background: #ffffff !important;
}

/* ---------------------------------------------------------
   08.6 Abschluss-CTA
--------------------------------------------------------- */

.services-overview-cta {
  padding: 48px 0 58px !important;
  background: #ffffff !important;
}

.services-overview-cta-box {
  min-height: 0 !important;
  padding: 42px 52px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 48px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #243878 0%, #3029A8 100%) !important;
  box-shadow: 0 24px 60px rgba(30, 47, 92, 0.16) !important;
}

.services-overview-cta-box h2 {
  max-width: 720px !important;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  font-weight: 760 !important;
}

.services-overview-cta-box p {
  max-width: 760px !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.90) !important;
  font-weight: 400 !important;
}

.services-overview-cta-box .ml-eyebrow {
  margin-bottom: 12px !important;
  color: #F04A3A !important;
}

.services-overview-cta-box .ml-btn {
  justify-self: end !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------
   08.7 Responsive Verhalten
--------------------------------------------------------- */

@media (max-width: 1100px) {
  .ml-services-overview-page .services-overview-inner {
    width: min(100% - 48px, 100%) !important;
  }

  .services-overview-hero .services-overview-inner {
    width: min(1320px, calc(100% - 96px)) !important;
  }

  .services-overview-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) {
  .services-overview-hero {
    min-height: 0 !important;
    padding: 58px 0 56px !important;
    background-position: center right !important;
  }

  .services-overview-hero .services-overview-inner {
    width: min(100% - 40px, 100%) !important;
  }

  .services-overview-hero-content {
    max-width: 100% !important;
  }

  .services-overview-cta-box {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: 34px 28px !important;
  }

  .services-overview-cta-box .ml-btn {
    justify-self: start !important;
  }
}

@media (max-width: 900px) {
  .services-overview-orientation-grid {
    grid-template-columns: 1fr !important;
  }

  .services-overview-orientation-card {
    min-height: auto !important;
  }
}

@media (max-width: 720px) {
  .ml-services-overview-page .services-overview-inner {
    width: min(100% - 32px, 100%) !important;
  }

  .services-overview-hero .services-overview-inner {
    width: min(100% - 40px, 100%) !important;
    padding-top: 56px !important;
    padding-bottom: 58px !important;
  }

  .services-overview-card-grid {
    grid-template-columns: 1fr !important;
  }

  .services-overview-button-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------
   08.8 Hervorgehobene Auftragsforschungskarte
--------------------------------------------------------- */

.services-overview-card--research {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.35fr) max-content;
  grid-template-rows: auto auto;
  column-gap: 46px;
  row-gap: 10px;
  align-items: center;
  min-height: 190px !important;
  padding: 32px 36px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5f6ff 100%) !important;
  border-color: rgba(45, 42, 168, 0.2) !important;
  box-shadow: 0 20px 48px rgba(16, 38, 90, 0.08) !important;
}

.services-overview-card--research > .ml-card__eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0 !important;
}

.services-overview-card--research > .ml-card__title {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0 !important;
}

.services-overview-card--research > .ml-card__text {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0 !important;
}

.services-overview-card--research > .ml-card__action {
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0 !important;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .services-overview-card--research {
    display: flex !important;
    min-height: 0 !important;
    padding: 28px !important;
  }

  .services-overview-card--research > .ml-card__eyebrow {
    align-self: auto;
    margin: 0 0 18px !important;
  }

  .services-overview-card--research > .ml-card__title {
    align-self: auto;
    margin: 0 0 14px !important;
  }

  .services-overview-card--research > .ml-card__text {
    margin: 0 0 24px !important;
  }

  .services-overview-card--research > .ml-card__action {
    margin: 22px 0 0 !important;
    white-space: normal;
  }
}

/* =========================================================
   08A. LEISTUNGSVERZEICHNIS A–Z
   Eigenständige Verzeichnisseite zwischen Leistungsübersicht
   und den fachlichen Leistungsbereichen. Die Zwischenkennung
   08A erhält die bestehende Nummerierung der Folgebereiche.
========================================================= */

/* ---------------------------------------------------------
   08A.1 Seitenrahmen
--------------------------------------------------------- */

.ml-directory {
  width: min(calc(100% - 96px), var(--ml-container-wide));
  margin-inline: auto;
  padding-block: 44px 88px;
  color: var(--ml-text);
}

.ml-directory [hidden] {
  display: none !important;
}

.ml-directory__header {
  max-width: 900px;
  margin-bottom: 24px;
}

#sp-main-body .ml-directory__eyebrow {
  display: inline-block;
  margin: 0 0 9px;
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  letter-spacing: var(--ml-letter-uppercase);
  font-weight: 800;
  text-transform: uppercase;
}

#sp-main-body .ml-directory__header h1 {
  margin: 0 0 10px;
  color: var(--ml-heading);
}

#sp-main-body .ml-directory__header p {
  max-width: 820px;
  margin: 0;
  color: var(--ml-text);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: var(--ml-line-body);
}

/* ---------------------------------------------------------
   08A.2 Such- und Filterbereich
--------------------------------------------------------- */

.ml-directory__tools {
  margin: 0 0 22px;
  padding: 22px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-md);
  background:
    linear-gradient(
      135deg,
      rgba(243, 247, 250, 0.82) 0%,
      rgba(248, 251, 253, 0.94) 100%
    );
  box-shadow: 0 12px 32px rgba(30, 47, 92, 0.05);
}

.ml-directory__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.ml-directory__search {
  min-width: 0;
  margin: 0;
}

#sp-main-body .ml-directory__search-label {
  display: block;
  margin: 0 0 8px;
  color: var(--ml-heading);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  letter-spacing: var(--ml-letter-interactive);
  font-weight: 800;
}

#sp-main-body .ml-directory__search-input {
  appearance: none;
  width: 100%;
  min-height: 54px;
  height: auto !important;
  margin: 0;
  padding: 12px 20px 12px 52px !important;
  border: 1px solid var(--ml-border-strong) !important;
  border-radius: var(--ml-radius-sm) !important;
  outline: none;
  background-color: var(--ml-white) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232D2AA8'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='m20%2020-3.8-3.8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 17px center !important;
  background-size: 21px 21px !important;
  color: var(--ml-text-dark);
  caret-color: var(--ml-blue);
  box-shadow: 0 8px 24px rgba(30, 47, 92, 0.04);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

#sp-main-body .ml-directory__search-input::placeholder {
  color: var(--ml-muted);
  opacity: 0.78;
}

#sp-main-body .ml-directory__search-input:hover {
  border-color: rgba(45, 42, 168, 0.34) !important;
}

#sp-main-body .ml-directory__search-input:focus {
  border-color: var(--ml-blue) !important;
  box-shadow:
    0 0 0 4px rgba(45, 42, 168, 0.10),
    0 10px 28px rgba(30, 47, 92, 0.07);
}

#sp-main-body .ml-directory__filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 174px;
  min-height: 54px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--ml-blue);
  border-radius: var(--ml-radius-sm);
  background: var(--ml-blue);
  color: var(--ml-white);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-interactive);
  letter-spacing: var(--ml-letter-interactive);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(45, 42, 168, 0.14);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#sp-main-body .ml-directory__filter-toggle:hover,
#sp-main-body .ml-directory__filter-toggle:focus-visible {
  border-color: var(--ml-red);
  background: var(--ml-red);
  color: var(--ml-white);
  box-shadow: 0 12px 28px rgba(240, 74, 58, 0.20);
  transform: translateY(-1px);
}

#sp-main-body .ml-directory__filter-toggle:focus-visible {
  outline: 3px solid rgba(45, 42, 168, 0.24);
  outline-offset: 3px;
}

.ml-directory__filter-active-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  padding-inline: 6px;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-white);
  color: var(--ml-blue);
  font-size: var(--ml-type-meta);
  line-height: 1;
  font-weight: 850;
}

.ml-directory__filter-chevron {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.ml-directory__filter-toggle[aria-expanded="true"] .ml-directory__filter-chevron {
  transform: translateY(2px) rotate(-135deg);
}

.ml-directory__active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ml-border);
}

.ml-directory__active-filters-label {
  flex: 0 0 auto;
  color: var(--ml-heading);
  font-size: var(--ml-type-meta);
  line-height: var(--ml-line-interactive);
  font-weight: 800;
}

.ml-directory__active-filter-list {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

#sp-main-body .ml-directory__active-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(45, 42, 168, 0.24);
  border-radius: var(--ml-radius-pill);
  background: rgba(45, 42, 168, 0.07);
  color: var(--ml-heading);
  font-size: var(--ml-type-meta);
  line-height: 1.25;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

#sp-main-body .ml-directory__active-filter:hover,
#sp-main-body .ml-directory__active-filter:focus-visible {
  border-color: var(--ml-red);
  background: rgba(240, 74, 58, 0.08);
  color: var(--ml-red);
}

#sp-main-body .ml-directory__active-filter:focus-visible,
#sp-main-body .ml-directory__active-filter-clear:focus-visible {
  outline: 3px solid rgba(45, 42, 168, 0.20);
  outline-offset: 2px;
}

.ml-directory__active-filter-remove {
  color: var(--ml-red);
  font-size: 1.15em;
  line-height: 1;
  font-weight: 850;
}

#sp-main-body .ml-directory__active-filter-clear {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--ml-blue);
  font-size: var(--ml-type-meta);
  line-height: var(--ml-line-interactive);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#sp-main-body .ml-directory__active-filter-clear:hover,
#sp-main-body .ml-directory__active-filter-clear:focus-visible {
  color: var(--ml-red);
}

.ml-directory__filter-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ml-border-strong);
}

.ml-directory__filter-intro {
  margin: 0 0 12px;
  color: var(--ml-text);
  font-size: var(--ml-type-meta);
  line-height: var(--ml-line-small);
}

.ml-directory__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.ml-directory__filter {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ml-border-strong);
  border-radius: 12px;
  background: var(--ml-white);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ml-directory__filter.is-open,
.ml-directory__filter.has-active-filters {
  border-color: rgba(45, 42, 168, 0.32);
}

.ml-directory__filter.is-open {
  box-shadow: 0 8px 24px rgba(30, 47, 92, 0.055);
}

#sp-main-body .ml-directory__filter-heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

#sp-main-body .ml-directory__filter-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 11px 15px;
  border: 0;
  background: var(--ml-white);
  color: var(--ml-heading);
  text-align: left;
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-interactive);
  letter-spacing: var(--ml-letter-interactive);
  font-weight: 800;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

#sp-main-body .ml-directory__filter-category:hover,
#sp-main-body .ml-directory__filter-category:focus-visible,
.ml-directory__filter.is-open .ml-directory__filter-category {
  background: var(--ml-bg-soft);
  color: var(--ml-blue);
}

#sp-main-body .ml-directory__filter-category:focus-visible {
  outline: 3px solid rgba(45, 42, 168, 0.22);
  outline-offset: -3px;
}

.ml-directory__filter-category-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.ml-directory__filter-group-count {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  min-height: 25px;
  padding-inline: 6px;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-blue);
  color: var(--ml-white);
  font-size: var(--ml-type-meta);
  line-height: 1;
  font-weight: 850;
}

.ml-directory__filter-category-chevron {
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}

.ml-directory__filter-category[aria-expanded="true"] .ml-directory__filter-category-chevron {
  transform: translateY(2px) rotate(-135deg);
}

#sp-main-body .ml-directory__filter-title {
  display: block;
  margin: 0;
  padding: 14px 15px;
  color: var(--ml-heading);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 800;
}

.ml-directory__filter-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 14px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--ml-border);
  background: rgba(243, 247, 250, 0.62);
}

#sp-main-body .ml-directory__filter-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ml-text-dark);
  font-size: var(--ml-type-meta);
  line-height: 1.35;
  letter-spacing: var(--ml-letter-body);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.ml-directory__filter-option input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ml-blue);
  cursor: pointer;
}

.ml-directory__filter-option:hover {
  border-color: rgba(45, 42, 168, 0.16);
  background: var(--ml-white);
  color: var(--ml-blue);
}

.ml-directory__filter-option:has(input:checked) {
  border-color: rgba(45, 42, 168, 0.22);
  background: rgba(45, 42, 168, 0.08);
  color: var(--ml-heading);
}

.ml-directory__filter-option:has(input:focus-visible) {
  outline: 3px solid rgba(45, 42, 168, 0.24);
  outline-offset: 2px;
}

.ml-directory__filter-count {
  min-width: 2ch;
  color: var(--ml-muted);
  font-size: var(--ml-type-meta);
  line-height: 1;
  font-weight: 800;
  text-align: right;
}

.ml-directory__filter-option:has(input:checked) .ml-directory__filter-count {
  color: var(--ml-blue);
}

#sp-main-body .ml-directory__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 46px;
  margin: 0;
  padding: 10px 20px;
  border: 1px solid var(--ml-blue);
  border-radius: var(--ml-radius-pill);
  background: var(--ml-white);
  color: var(--ml-blue);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-interactive);
  letter-spacing: var(--ml-letter-interactive);
  font-weight: 750;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#sp-main-body .ml-directory__reset:hover:not(:disabled),
#sp-main-body .ml-directory__reset:focus-visible:not(:disabled) {
  border-color: var(--ml-red);
  background: var(--ml-red);
  color: var(--ml-white);
  box-shadow: 0 10px 24px rgba(240, 74, 58, 0.18);
  transform: translateY(-1px);
}

#sp-main-body .ml-directory__reset:focus-visible {
  outline: 3px solid rgba(45, 42, 168, 0.24);
  outline-offset: 3px;
}

#sp-main-body .ml-directory__reset:disabled {
  border-color: var(--ml-border-strong);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ml-muted);
  opacity: 0.56;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ml-directory__filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ---------------------------------------------------------
   08A.3 A–Z-Schnellnavigation und Ergebniszahl
--------------------------------------------------------- */

.ml-directory__overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 36px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--ml-dark-blue) 0%, var(--ml-blue) 100%);
  box-shadow: 0 16px 38px rgba(30, 47, 92, 0.14);
}

.ml-directory__alphabet {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ml-directory__alphabet-title {
  flex: 0 0 auto;
  color: var(--ml-white);
  font-size: var(--ml-type-lead);
  line-height: 1;
  letter-spacing: var(--ml-letter-heading);
  font-weight: 850;
}

.ml-directory__alphabet-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.46) transparent;
}

#sp-main-body .ml-directory__alphabet-link {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ml-white);
  font-size: var(--ml-type-meta);
  line-height: 1;
  letter-spacing: var(--ml-letter-interactive);
  font-weight: 850;
  text-decoration: none;
  flex: 0 0 auto;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

#sp-main-body .ml-directory__alphabet-link--all {
  width: auto;
  min-width: 58px;
  padding-inline: 10px;
}

#sp-main-body a.ml-directory__alphabet-link:hover,
#sp-main-body a.ml-directory__alphabet-link:focus-visible {
  border-color: var(--ml-red);
  background: var(--ml-red);
  color: var(--ml-white);
  transform: translateY(-1px);
}

#sp-main-body a.ml-directory__alphabet-link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

#sp-main-body .ml-directory__alphabet-link.is-disabled,
#sp-main-body .ml-directory__alphabet-link[aria-disabled="true"] {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
  pointer-events: none;
  transform: none;
}

#sp-main-body .ml-directory__count {
  justify-self: end;
  margin: 0;
  padding: 9px 14px;
  border-radius: var(--ml-radius-pill);
  background: var(--ml-white);
  color: var(--ml-heading);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-interactive);
  letter-spacing: var(--ml-letter-interactive);
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(12, 24, 58, 0.16);
}

/* ---------------------------------------------------------
   08A.4 Buchstabengruppen und einspaltige Leistungsliste
--------------------------------------------------------- */

.ml-directory__group {
  margin: 0 0 42px;
  scroll-margin-top: 132px;
}

.ml-directory__group:last-child {
  margin-bottom: 0;
}

#sp-main-body .ml-directory__letter {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ml-heading);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ml-letter-heading);
  font-weight: 850 !important;
  box-shadow: none;
}

#sp-main-body .ml-directory__letter::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(45, 42, 168, 0.30) 0%,
    rgba(45, 42, 168, 0.05) 100%
  );
}

.ml-directory__items,
.ml-directory__search-results {
  display: block;
  overflow: hidden;
  border: 1px solid var(--ml-border);
  border-radius: 14px;
  background: var(--ml-white);
}

.ml-directory__search-results {
  margin-top: 0;
}

.ml-directory__item {
  position: relative;
  min-width: 0;
  padding: 18px 22px;
  border: 0;
  border-bottom: 1px solid var(--ml-border);
  border-radius: 0;
  background: var(--ml-white);
  box-shadow: none;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ml-directory__item:last-child,
.ml-directory__item.is-last-visible {
  border-bottom: 0;
}

.ml-directory__item:hover {
  background: rgba(243, 247, 250, 0.72);
  box-shadow: inset 4px 0 0 var(--ml-red);
}

#sp-main-body .ml-directory__title {
  margin: 0 0 6px;
  font-size: var(--ml-type-body);
  line-height: 1.35;
  letter-spacing: var(--ml-letter-heading);
  font-weight: 820 !important;
}

#sp-main-body .ml-directory__title a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: var(--ml-heading);
  text-decoration: none;
  transition: color 0.18s ease;
}

#sp-main-body .ml-directory__title a::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--ml-red);
  font-weight: 850;
  transition: transform 0.18s ease;
}

#sp-main-body .ml-directory__title a:hover,
#sp-main-body .ml-directory__title a:focus-visible {
  color: var(--ml-blue);
}

#sp-main-body .ml-directory__title a:hover::after,
#sp-main-body .ml-directory__title a:focus-visible::after {
  transform: translateX(3px);
}

#sp-main-body .ml-directory__title a:focus-visible {
  outline: 3px solid rgba(45, 42, 168, 0.20);
  outline-offset: 3px;
  border-radius: 4px;
}

#sp-main-body .ml-directory__summary {
  max-width: 1120px;
  margin: 0;
  color: var(--ml-text);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  letter-spacing: var(--ml-letter-body);
}

#sp-main-body .ml-directory__no-results,
#sp-main-body .ml-directory__empty {
  margin: 0;
  padding: 28px;
  border: 1px solid var(--ml-border-strong);
  border-radius: var(--ml-radius-md);
  background: var(--ml-bg-soft);
  color: var(--ml-text-dark);
  text-align: center;
}

/* ---------------------------------------------------------
   08A.5 Responsive Verzeichnisdarstellung
--------------------------------------------------------- */

@media (max-width: 991px) {
  .ml-directory {
    width: min(calc(100% - 48px), var(--ml-container-wide));
    padding-block: 44px 80px;
  }
}

@media (max-width: 900px) {
  .ml-directory__toolbar {
    grid-template-columns: 1fr;
  }

  #sp-main-body .ml-directory__filter-toggle {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .ml-directory__active-filters-label {
    flex-basis: 100%;
  }

  .ml-directory__filter-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .ml-directory__overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #sp-main-body .ml-directory__count {
    justify-self: start;
  }
}

@media (max-width: 575px) {
  

  .ml-directory__tools {
    margin-bottom: 18px;
    border-radius: 20px;
  }

  .ml-directory__header {
    margin-bottom: 24px;
  }

  #sp-main-body .ml-directory__header p {
    font-size: var(--ml-type-body);
  }

  .ml-directory__toolbar {
    gap: 12px;
  }

  #sp-main-body .ml-directory__search-input {
    min-height: 54px;
    padding-left: 50px !important;
    background-position: 16px center !important;
    background-size: 20px 20px !important;
  }

  .ml-directory__filter-panel {
    margin-top: 16px;
    padding-top: 16px;
  }

  .ml-directory__active-filters {
    align-items: flex-start;
  }

  .ml-directory__active-filter-list {
    flex-basis: 100%;
  }

  #sp-main-body .ml-directory__active-filter-clear {
    margin-left: auto;
  }

  .ml-directory__filters {
    gap: 8px;
  }

  #sp-main-body .ml-directory__filter-category {
    min-height: 50px;
    padding-inline: 13px;
  }

  .ml-directory__filter-options {
    gap: 2px;
    padding: 8px;
  }

  .ml-directory__filter-actions,
  #sp-main-body .ml-directory__reset {
    width: 100%;
  }

  .ml-directory__overview {
    gap: 14px;
    margin-bottom: 28px;
    padding: 15px;
    border-radius: var(--ml-radius-sm);
  }

  .ml-directory__alphabet {
    flex-direction: column;
    gap: 10px;
  }

  .ml-directory__alphabet-links {
    width: 100%;
    gap: 5px;
  }

  #sp-main-body .ml-directory__alphabet-link {
    width: 32px;
    height: 32px;
  }

  .ml-directory__group {
    margin-bottom: 36px;
  }

  #sp-main-body .ml-directory__letter {
    width: 100%;
    height: auto;
    margin-bottom: 12px;
  }

  .ml-directory__item {
    padding: 16px;
  }

  #sp-main-body .ml-directory__title a {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sp-main-body .ml-directory__search-input,
  #sp-main-body .ml-directory__filter-toggle,
  #sp-main-body .ml-directory__active-filter,
  #sp-main-body .ml-directory__filter-category,
  #sp-main-body .ml-directory__filter-option,
  #sp-main-body .ml-directory__reset,
  #sp-main-body .ml-directory__alphabet-link,
  .ml-directory__item,
  #sp-main-body .ml-directory__title a::after,
  .ml-directory__filter-chevron,
  .ml-directory__filter-category-chevron {
    transition: none;
  }
}

/* =========================================================
   09. ANTIMIKROBIELLE WIRKSAMKEIT
   Übersicht, Kategorien, Normseiten und Joomla-Navigation
========================================================= */

/* ---------------------------------------------------------
   09.1 Gemeinsames Joomla-/Helix-Spaltenlayout
   Gilt automatisch auf jeder Seite mit ml-side-nav im
   linken Modulbereich. Dadurch entstehen weder Außenrand
   noch Modulabstand zwischen Navigation und Seiteninhalt.
--------------------------------------------------------- */

body:has(#sp-left .ml-side-nav) #sp-left {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--ml-dark-blue) !important;
}

body:has(#sp-left .ml-side-nav) #sp-component {
  flex: 1 1 calc(100% - 320px) !important;
  width: calc(100% - 320px) !important;
  max-width: calc(100% - 320px) !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#sp-left .ml-side-nav) #sp-left :is(
  .sp-column,
  .sp-module,
  .sp-module-content,
  .custom,
  .mod-custom
) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (max-width: 1100px) {
  body:has(#sp-left .ml-side-nav) #sp-left {
    flex-basis: 280px !important;
    width: 280px !important;
    max-width: 280px !important;
  }

  body:has(#sp-left .ml-side-nav) #sp-component {
    flex: 1 1 calc(100% - 280px) !important;
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
  }
}

@media (max-width: 991px) {
  body:has(#sp-left .ml-side-nav) #sp-left,
  body:has(#sp-left .ml-side-nav) #sp-component {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------
   09.2 BEREINIGTER FUNKTIONALER SEITENBESTAND
   Überschattete Altdeklarationen sind entfernt; fachliche Varianten und
   Breakpoints bleiben in ihrer wirksamen Reihenfolge erhalten.
--------------------------------------------------------- */

/* =========================================================
   Übersichtsseite Antimikrobielle Wirksamkeit
========================================================= */

.lab-explorer-content {
  min-width: 0;
  color: #243746;
}

.lab-explorer-hero {
  min-height: 360px;
  padding: 96px 72px 84px;
  background-color: #f3f7fa;
  background-image:
    linear-gradient(
      90deg,
      rgba(243, 247, 250, 0.99) 0%,
      rgba(243, 247, 250, 0.96) 30%,
      rgba(243, 247, 250, 0.84) 50%,
      rgba(243, 247, 250, 0.40) 70%,
      rgba(243, 247, 250, 0.05) 100%
    ),
    url("/images/hero/antimikrobielle-wirksamkeit-hero.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.lab-explorer-hero h1 {
  max-width: 700px;
  margin: 0 0 28px;
  color: #1E2F5C;
}

.lab-explorer-hero p {
  max-width: 650px;
  color: #4A5568;
}

.lab-explorer-section {
  max-width: 1220px;
  padding: 78px 72px;
}

.lab-explorer-soft {
  max-width: none;
  background: #f8fbfd;
  border-top: 1px solid rgba(30, 47, 92, 0.06);
  border-bottom: 1px solid rgba(30, 47, 92, 0.06);
}

.lab-explorer-section h2 {
  margin: 0 0 22px;
  color: #1E2F5C;
}

.lab-explorer-section p {
  max-width: 900px;
  color: #4A5568;
}

.lab-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 36px;
}

.lab-topic-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lab-goal-list,.lab-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.lab-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 1200px) {
.lab-topic-grid-3,.lab-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
.lab-explorer-hero,.lab-explorer-section {
    padding: 58px 26px;
  }

.lab-explorer-hero {
    min-height: 0;
    background-image:
      linear-gradient(
        90deg,
        rgba(243, 247, 250, 0.99) 0%,
        rgba(243, 247, 250, 0.96) 58%,
        rgba(243, 247, 250, 0.84) 100%
      ),
      url("/images/hero/antimikrobielle-wirksamkeit-hero.png");
    background-position: 72% center;
  }

.lab-topic-grid,.lab-topic-grid-3,.lab-goal-list,.lab-process-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
Leistungsseiten allgemein
========================================================= */

.lab-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0;
}

/* =========================================================
   Gemeinsame Navigation aller Leistungsbereiche
========================================================= */

.ml-side-nav,
.ml-side-nav * {
  box-sizing: border-box;
}

.ml-side-nav {
  position: sticky;
  top: 108px;
  z-index: 3;
  width: 100%;
  min-width: 0;
  height: calc(100vh - 108px);
  min-height: calc(100vh - 108px);
  margin: 0;
  padding: 28px 24px 70px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  color: #ffffff;
  background: linear-gradient(180deg, #1E2F5C 0%, #14264A 100%);
}

.ml-side-nav__header {
  margin: 0 0 24px;
  padding: 0 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.ml-side-nav__label {
  display: block;
  margin: 0 0 8px;
  color: rgba(255,255,255,0.75);
  font-weight: 800;
  text-transform: uppercase;
}

.ml-side-nav__header h2 {
  margin: 0 0 10px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  overflow-wrap: break-word;
}

.ml-side-nav__header p {
  margin: 0;
  color: rgba(255,255,255,0.84) !important;
  overflow-wrap: break-word;
}

.ml-side-nav__group {
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.ml-side-nav__group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ml-side-nav__group--plain {
  display: grid;
  gap: 3px;
}

.ml-side-nav__group-title {
  margin: 0 0 12px !important;
  color: rgba(255,255,255,0.78) !important;
  font-weight: 850 !important;
  text-transform: uppercase;
}

.ml-side-nav__details {
  margin: 0 !important;
  overflow: visible !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ml-side-nav__details:last-child {
  border-bottom: none !important;
}

.ml-side-nav__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.ml-side-nav__summary::-webkit-details-marker {
  display: none;
}

.ml-side-nav__summary::marker {
  content: "";
}

.ml-side-nav__summary:hover {
  background: rgba(255,255,255,0.08);
}

.ml-side-nav__summary:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

.ml-side-nav__category-link {
  display: block;
  min-width: 0;
  padding: 12px 0 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  line-height: inherit;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
}

.ml-side-nav__category-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

.ml-side-nav__category-link:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: -2px;
  border-radius: 6px;
}

.ml-side-nav__summary::after {
  content: "›";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  justify-self: end;
  color: #ffffff;
  font-size: 1.15em;
  line-height: 1;
  transform: none;
  transition: transform 0.18s ease;
}

.ml-side-nav__details[open] > .ml-side-nav__summary::after {
  transform: rotate(90deg);
}

.ml-side-nav__details.has-current-page > .ml-side-nav__summary::after {
  color: #F04A3A;
}

.ml-side-nav__details.is-current-category > .ml-side-nav__summary {
  background: rgba(255,255,255,0.16);
  box-shadow: inset 3px 0 0 #F04A3A;
}

.ml-side-nav__details.is-current-category > .ml-side-nav__summary .ml-side-nav__category-link {
  padding-left: 12px !important;
}

.ml-side-nav__link {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 3px;
  padding: 9px 12px 9px 16px !important;
  border-radius: 8px;
  color: rgba(255,255,255,0.88) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  overflow-wrap: break-word;
  hyphens: auto;
  transition: background 0.18s ease, color 0.18s ease;
}

.ml-side-nav__link:hover,
.ml-side-nav__link:focus-visible {
  color: #ffffff !important;
  background: rgba(255,255,255,0.10);
}

.ml-side-nav__link:is(.is-active, [aria-current="page"]) {
  color: #ffffff !important;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 3px 0 0 #F04A3A;
  font-weight: 800 !important;
}

.ml-side-nav__link[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 7px);
  left: 16px;
  z-index: 20;
  width: min(280px, calc(100% - 16px));
  padding: 12px 14px;
  visibility: hidden;
  opacity: 0;
  color: #1E2F5C;
  background: #ffffff;
  border: 1px solid rgba(30,47,92,0.14);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  font-weight: 650;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.ml-side-nav__link[data-tooltip]:hover::after,
.ml-side-nav__link[data-tooltip]:focus-visible::after {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.ml-side-nav__link > span {
  display: block;
  font-weight: 780;
}

.ml-side-nav__meta {
  display: none;
  margin-top: 6px;
  color: rgba(255,255,255,0.72);
  font-style: normal;
  font-weight: 500;
}

.ml-side-nav__link:hover .ml-side-nav__meta,
.ml-side-nav__link:focus-visible .ml-side-nav__meta,
.ml-side-nav__link:is(.is-active, [aria-current="page"]) .ml-side-nav__meta {
  display: block;
}

@media (max-width: 1499px) {
  .ml-side-nav {
    top: 96px;
    height: calc(100vh - 96px);
    min-height: calc(100vh - 96px);
  }
}

@media (max-width: 991px) {
  .ml-side-nav {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding-bottom: 34px;
    overflow: visible;
  }
}

/* ---------------------------------------------------------
   09.2.1 Seitennavigation auf Desktop
--------------------------------------------------------- */

@media (min-width: 992px) {
  /* Die linke Spalte wächst über die gesamte Höhe der Inhaltsseite. */
  body:has(#sp-left .ml-side-nav) #sp-left {
    align-self: stretch !important;
    background: linear-gradient(180deg, #1E2F5C 0%, #14264A 100%) !important;
  }

  /*
     Keine Begrenzung auf die Viewport-Höhe und kein separater Scrollbalken.
     Kurze Navigationen füllen weiterhin mindestens den sichtbaren Bereich.
  */
  .ml-side-nav {
    height: auto !important;
    min-height: calc(100vh - 108px) !important;
    overflow: visible !important;
    background: transparent;
  }

  /*
     Das Menü der antimikrobiellen Wirksamkeit ist höher als der Viewport.
     Es scrollt deshalb mit der Seite, damit jeder Eintrag erreichbar bleibt.
  */
  body:has(.lab-explorer-content) .ml-side-nav,
  body:has(.lab-category-page) .ml-side-nav,
  body:has(.lab-norm-page) .ml-side-nav {
    position: relative;
    top: auto;
  }
}

@media (min-width: 992px) and (max-width: 1499px) {
  .ml-side-nav {
    min-height: calc(100vh - 96px) !important;
  }
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category {
  margin: 0 0 6px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

/* =========================================================
   Leistungsseiten allgemein
========================================================= */

.lab-kicker {
  margin: 0 0 10px !important;
  color: #F04A3A !important;
  font-weight: 900 !important;
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-hero h1::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 16px;
  background: #F04A3A;
  border-radius: 999px;
}

.lab-norm-hero p:last-of-type {
  max-width: 680px !important;
  color: #1E2F5C !important;
}

.lab-norm-card-grid > div::before {
  display: none !important;
  content: none !important;
}

.lab-norm-card-grid h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 8px;
  background: #F04A3A;
  border-radius: 999px;
}

.lab-related-card::after {
  content: "→";
  float: right;
  color: #F04A3A;
  font-weight: 900;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
.lab-norm-hero,
.lab-norm-page .lab-cta{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

.lab-norm-page .lab-cta .lab-container {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-hero {
  padding: 46px 56px 44px !important;
  border-bottom: 1px solid rgba(30,47,92,0.08);
  position: relative;
  overflow: hidden;
  background-color: #F4F8FD;
  background-image:
    linear-gradient(
      90deg,
      rgba(244,248,253,0.98) 0%,
      rgba(244,248,253,0.92) 44%,
      rgba(244,248,253,0.40) 68%,
      rgba(244,248,253,0.15) 100%
    ),
    var(--lab-antimicrobial-hero-image, url("/images/hero/iso-22196-hero.jpg")) !important;
  background-size: cover !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
.lab-norm-applications {
    padding: 22px;
  }
}

/* =========================================================
   Normseiten
========================================================= */


.lab-faq-column, .lab-related-column {
  width: 100%;
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-applications h2 {
  margin-bottom: 22px;
}

/* =========================================================
   Leistungsseiten allgemein
========================================================= */

.lab-faq p {
  padding: 0 18px 16px !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.lab-cta {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  margin: 0;
  padding: 52px 0;
  background: linear-gradient(135deg, #1E2F5C 0%, #243f78 100%);
}

.lab-cta .lab-container {
  width: min(1320px, calc(100% - 64px));
  max-width: 1320px;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 40px;
  align-items: center;
  text-align: left;
}

.lab-cta h2 {
  margin: 0;
  color: #ffffff;
}

.lab-cta p {
  margin: 0;
  max-width: 620px;
  color: rgba(255,255,255,0.9);
}

.lab-cta .ml-btn {
  margin-top: 0;
  white-space: nowrap;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

/* Durch die 320-px-Seitennavigation steht dem CTA auf kleineren
   Desktop-Viewports nur die verbleibende Komponentenspalte zur
   Verfuegung. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .lab-explorer-content .lab-cta .lab-container {
    grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
    grid-template-areas:
      "title copy"
      "title action";
    column-gap: 40px;
    row-gap: 22px;
  }

  .lab-explorer-content .lab-cta h2 {
    grid-area: title;
  }

  .lab-explorer-content .lab-cta p {
    grid-area: copy;
  }

  .lab-explorer-content .lab-cta .ml-btn {
    grid-area: action;
    justify-self: start;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .lab-explorer-content .lab-cta .lab-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .lab-explorer-content .lab-cta .ml-btn {
    justify-self: start;
  }
}

@media (max-width: 991px) {
  .lab-cta .lab-container {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lab-cta {
    padding: 42px 24px;
  }
}

/* ---------------------------------------------------------
   09.2.2 CTA der Bereichsübersicht
--------------------------------------------------------- */

/* Der äußere Abschnitt stellt nur noch den weißen Freiraum bereit. */
.lab-explorer-content .lab-cta {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 40px 70px !important;
  background: #ffffff !important;
  color: #ffffff;
  text-align: left !important;
}

/* Die eigentliche CTA-Gestaltung liegt analog zu den Kategorien innen. */
.lab-explorer-content .lab-cta .lab-container {
  width: min(1250px, 100%) !important;
  max-width: 1250px !important;
  margin: 0 auto !important;
  padding: 36px 46px !important;
  box-sizing: border-box;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;
  border-radius: 26px !important;
  box-shadow: 0 16px 40px rgba(30, 47, 92, 0.16) !important;
}

@media (max-width: 1199px) {
  .lab-explorer-content .lab-cta {
    padding: 22px 28px 60px !important;
  }

  .lab-explorer-content .lab-cta .lab-container {
    padding: 34px 36px !important;
  }
}

@media (max-width: 991px) {
  .lab-explorer-content .lab-cta {
    padding: 20px 20px 52px !important;
  }

  .lab-explorer-content .lab-cta .lab-container {
    padding: 30px 26px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 575px) {
  .lab-explorer-content .lab-cta {
    padding: 18px 14px 44px !important;
  }

  .lab-explorer-content .lab-cta .lab-container {
    padding: 28px 22px !important;
  }
}

/* =========================================================
   Joomla / Helix Reset & Header
========================================================= */

.item-page .lab-norm-page {
  max-width: none !important;
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-section,
.lab-norm-applications{
  width: min(1380px, calc(100% - 80px)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lab-norm-page .lab-cta {
  margin: 0 !important;
  color: #ffffff !important;
  text-align: left !important;
  padding: 54px 0 !important;
  background: linear-gradient(135deg, #1E2F5C 0%, #263F78 100%) !important;
}

.lab-norm-page .lab-cta .lab-container {
  width: min(1380px, calc(100% - 80px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.2fr auto !important;
  gap: 42px !important;
  align-items: center !important;
}

.lab-norm-page .lab-cta h2 {
  color: #ffffff !important;
  margin: 0 !important;
}

.lab-norm-page .lab-cta p {
  color: rgba(255,255,255,0.86) !important;
  max-width: 650px !important;
  margin: 0 !important;
}

.lab-norm-page .lab-cta .ml-btn {
  margin: 0 !important;
  white-space: nowrap;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-page {
  max-width: none !important;
  background: #ffffff;
  color: #1E2F5C;
  width: 100%;
}

.lab-norm-section-heading h2 {
  color: #1E2F5C;
  margin: 0 0 18px !important;
}

.lab-norm-card-grid h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal !important;
  hyphens: auto !important;
}

.lab-norm-contact-card span {
  display: block;
  margin-bottom: 12px;
  color: #F04A3A;
  font-weight: 800;
  text-transform: uppercase;
}

.lab-norm-contact-card h2 {
  min-width: 0;
  max-width: 100%;
  color: #ffffff;
  margin: 0 0 14px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.lab-norm-contact-card p {
  color: rgba(255,255,255,.88);
  margin-bottom: 20px !important;
}

.lab-norm-contact-card .ml-btn {
  margin-top: 0 !important;
}

/* =========================================================
   Normseiten
========================================================= */

.lab-faq-column {
  grid-column: 1 !important;
}

.lab-faq-column h2, .lab-related-column h2 {
  margin-bottom: 18px !important;
  margin-top: 0 !important;
}

/* =========================================================
   Leistungsseiten allgemein
========================================================= */

.lab-faq {
  background: #ffffff !important;
  border: 1px solid rgba(30,47,92,0.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  box-shadow: 0 5px 16px rgba(30,47,92,0.035);
  width: 100% !important;
}

/* =========================================================
   Leistungsseiten allgemein
========================================================= */

.lab-faq summary {
  cursor: pointer;
  list-style: none;
  color: #1E2F5C !important;
  font-weight: 800 !important;
  padding: 17px 22px !important;
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-hero h1 {
  color: #1E2F5C !important;
  margin: 0 0 18px !important;
}

.lab-norm-hero .lab-kicker {
  color: #1E2F5C !important;
}

.lab-norm-main-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lab-norm-section, .lab-norm-applications, .lab-faq-column {
  width: 100% !important;
  margin: 0 !important;
}

.lab-faq-column h2 {
  margin-bottom: 16px !important;
}

.lab-norm-contact-card, .lab-related-column {
  width: 100% !important;
}

.lab-norm-card-grid {
  width: 100% !important;
  max-width: 1500px !important;
  margin-top: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.lab-norm-card-grid > * {
  min-width: 0;
}

.lab-related-grid {
  width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  margin-top: 0 !important;
  display: grid !important;
  gap: 14px !important;
}

.lab-related-card {
  width: 100% !important;
  min-width: 0;
}

.lab-norm-page > .lab-cta {
  display: none !important;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
.lab-norm-card-grid {
    grid-template-columns: 1fr !important;
  }

}

@media (min-width: 992px) and (max-width: 1199px) {
  .lab-norm-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lab-norm-card-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .lab-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-content-layout {
  width: calc(100% - 64px) !important;
  margin: 0 32px !important;
  display: grid !important;
  align-items: start !important;
  padding: 28px 0 44px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 32px !important;
}

.lab-norm-side-column .lab-norm-facts {
  display: none !important;
}

.lab-related-column h2 {
  margin-top: 0 !important;
}

.lab-norm-facts {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.lab-norm-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 28px !important;
  background: #ffffff !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;
  border-left: 5px solid #F04A3A !important;
  border-radius: 22px !important;
  padding: 30px 34px !important;
  box-shadow: 0 14px 36px rgba(30, 47, 92, 0.07) !important;
}

.lab-norm-section > div {
  min-width: 0;
  order: 2;
}

.lab-norm-section p {
  color: #40506A !important;
  margin: 0 0 14px !important;
  max-width: 780px !important;
}

.lab-norm-section .lab-norm-facts {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  order: 1;
}

.lab-norm-applications {
  margin: 0 !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;
  border-radius: 22px !important;
  width: 100% !important;
  padding: 24px 28px !important;
  box-shadow: none !important;
  background: #f8fbfd !important;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
.lab-norm-content-layout {
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    grid-template-columns: 1fr !important;
    background: #ffffff !important;
    padding: 24px 16px 36px !important;
  }

.lab-norm-section {
    padding: 24px 22px !important;
  }
}

/* =========================================================
   Normseiten
========================================================= */

.lab-norm-section h2 {
  color: #1E2F5C !important;
  margin: 0 0 22px !important;
}

.lab-norm-side-column {
  gap: 32px !important;
  display: flex;
  flex-direction: column;
}

.lab-related-column {
  width: 100% !important;
  padding-top: 0 !important;
  order: 1 !important;
}

.lab-norm-contact-card {
  background: linear-gradient(135deg, #1E2F5C 0%, #263F78 100%);
  color: #ffffff;
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(30,47,92,.12);
  align-self: stretch !important;
  padding: 28px 30px !important;
  order: 2 !important;
}

/* Erst auf sehr breiten Desktops bleibt neben der permanenten
   Leistungsnavigation ausreichend Raum fuer eine Inhaltsseitenleiste. */
@media (min-width: 1600px) {
  .lab-norm-content-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px) !important;
    gap: 32px !important;
  }

  /* Die schmale Seiten-CTA nutzt eine kompaktere H2-Rolle. Lange
     Bezeichnungen bleiben dadurch vollständig innerhalb der Karte. */
  .lab-norm-contact-card {
    --ml-type-h2: clamp(1.875rem, 2vw, 2.25rem);
  }

  .lab-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category-page {
  width: 100%;
  background: #ffffff;
  color: #1E2F5C;
}

.lab-category-eyebrow, .lab-category-kicker {
  margin: 0 0 8px;
  font-weight: 800;
  color: #001B5E;
}

.lab-category-eyebrow {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}

.lab-category-kicker {
  margin-bottom: 12px;
}

.lab-category-hero h1::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 18px;
  background: #F04A3A;
}

.lab-category-section-heading {
  margin-bottom: 24px;
}

.lab-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lab-method-card h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 9px;
  background: #F04A3A;
}

.lab-method-card a::after {
  content: " →";
  color: #F04A3A;
}

/* Ergänzende, kategorienübergreifende Prüfmöglichkeit */
.lab-category-crosslink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
  padding: 24px 26px;
  background: var(--ml-note-surface);
  border: var(--ml-card-border);
  border-left: var(--ml-note-accent);
  border-radius: var(--ml-note-radius);
}

.lab-category-crosslink__content {
  min-width: 0;
}

.lab-category-crosslink__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
  line-height: var(--ml-line-small);
  text-transform: uppercase;
}

.lab-category-crosslink h3 {
  margin: 0 0 10px;
  color: var(--ml-heading);
}

.lab-category-crosslink p {
  max-width: 980px;
  margin: 0;
  color: var(--ml-text);
}

.lab-category-crosslink .ml-btn {
  white-space: nowrap;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 1199px) {
  .lab-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .lab-category-hero {
    padding: 48px 24px;
  }
}

@media (max-width: 575px) {
  .lab-method-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .lab-category-crosslink {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
  }

  .lab-category-crosslink .ml-btn {
    justify-self: start;
  }
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category-overview {
  padding: 28px 30px 70px;
  background: #ffffff;
}

.lab-category-methods{
  margin-bottom: 22px;
}

.lab-category-methods h2{
  margin: 0;
  color: #1E2F5C;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
.lab-category-overview {
    padding: 24px 20px 56px;
  }
}

@media (max-width: 575px) {
.lab-category-overview {
    padding: 18px 14px 44px;
  }

.lab-category-methods{
    padding: 24px 20px;
    border-radius: 16px;
  }
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category-methods {
  padding: 30px 28px;
  background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(30, 47, 92, 0.05);
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category-compact-cta span {
  display: block;
  margin-bottom: 8px;
  color: #F04A3A;
  font-weight: 900;
  text-transform: uppercase;
}

.lab-category-compact-cta h2 {
  margin: 0 0 8px;
  color: #ffffff;
}

.lab-category-compact-cta p {
  margin: 0;
  color: rgba(255,255,255,0.86);
}

.lab-category-compact-cta .ml-btn {
  white-space: nowrap;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
.lab-category-two-column {
    grid-template-columns: 1fr;
    padding: 24px 20px 56px;
  }
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category-compact-cta {
  justify-self: center;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  box-shadow: 0 16px 40px rgba(30, 47, 92, 0.16);
  grid-column: 1 / -1 !important;
  max-width: 1250px !important;
  width: 100% !important;
  margin: 22px auto 0 !important;
  padding: 36px 46px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 32px !important;
  align-items: center !important;
  border-radius: 26px !important;
}

@media (max-width: 991px) {
  .lab-category-compact-cta {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 28px 30px !important;
  }

  .lab-category-compact-cta > div {
    min-width: 0;
  }

  .lab-category-compact-cta .ml-btn {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 575px) {
  .lab-category-compact-cta {
    gap: 18px !important;
    padding: 26px 22px !important;
  }
}

.lab-category-hero h1 {
  min-width: 0;
  max-width: 820px;
  margin: 0 0 22px;
  color: #1E2F5C;
  font-weight: 800;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}

.lab-category-hero p:last-of-type {
  max-width: 760px;
  margin: 0;
  color: #1E2F5C;
}

.lab-category-hero {
  background: linear-gradient(90deg, #F3F7FA 0%, #EAF6FB 52%, #DCEFF7 100%);
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 52px 56px 48px;
  border-bottom: 1px solid rgba(30,47,92,0.12);
  background-size: 100%;
  background-position: 65% center;
  background-repeat: no-repeat;
}

.lab-category-page .lab-category-hero {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 360px !important;
  padding: 64px 56px 58px !important;
  border-bottom: 1px solid rgba(30,47,92,0.12) !important;
}

.lab-category-page .lab-category-hero h1 {
  max-width: 620px !important;
}

.lab-category-page .lab-category-hero p:last-of-type {
  max-width: 650px !important;
}

.lab-category-two-column {
  grid-template-columns: minmax(0, 1fr) 420px !important;
  gap: 24px !important;
  padding: 28px 30px 70px !important;
  display: block !important;
}

/* =========================================================
   Kategorie-Seiten
========================================================= */

.lab-category-section-heading h2 {
  margin-bottom: 16px;
}

.lab-category-section-heading p {
  max-width: none;
  width: 100%;
  margin: 0;
  color: #31435b;
}

.lab-category-page .lab-category-section-heading {
  max-width: none !important;
  width: 100% !important;
  margin-bottom: 26px !important;
}

.lab-category-page .lab-category-section-heading h2 {
  margin-bottom: 18px !important;
}

.lab-category-page .lab-category-section-heading p {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  color: #31435b !important;
}

/* Phase E3: zentrale Bildgruppen für Kategorie- und Verfahrensseiten */
.lab-category-kunststoffe {
  --lab-antimicrobial-hero-image: url("/images/hero/kunststoffe-oberflaechen.png?v=e63");
}

.lab-category-textilien {
  --lab-antimicrobial-hero-image: url("/images/hero/textilien-textile-produkte.png?v=e63");
}

.lab-category-wirkstoffe {
  --lab-antimicrobial-hero-image: url("/images/hero/wirkstoffe-antimikrobielle-substanzen.png?v=e63");
}

.lab-category-farben-lacke-beschichtungen {
  --lab-antimicrobial-hero-image: url("/images/hero/farben-lacke-beschichtungen.png?v=e63");
}

.lab-category-konservierung-wasserbasierte-farben {
  --lab-antimicrobial-hero-image: url("/images/hero/wasserbasierte-farben-konservierung.png?v=e63");
}

.lab-category-papier-cellulose {
  --lab-antimicrobial-hero-image: url("/images/hero/papier-cellulose-materialien.png?v=e63");
}

.lab-category-holzschutz-schimmelresistenz {
  --lab-antimicrobial-hero-image: url("/images/hero/holzschutz-schimmelresistenz.png?v=e63");
}

.lab-category-desinfektionsmittel-antiseptika {
  --lab-antimicrobial-hero-image: url("/images/hero/desinfektionsmittel-antiseptika.png?v=e63");
}

.lab-category-reinigungsmittel-sanitizer {
  --lab-antimicrobial-hero-image: url("/images/hero/reinigungsmittel-sanitizer.png?v=e63");
}

.lab-category-biofilm-pruefungen {
  --lab-antimicrobial-hero-image: url("/images/hero/biofilm-pruefungen.png?v=e63");
}

.lab-category-konservierungsmittelbelastungstest {
  --lab-antimicrobial-hero-image: url("/images/hero/konservierungsmittelbelastungstest.png?v=e63");
}

.lab-category-page .lab-category-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(243,247,250,0.98) 0%,
      rgba(243,247,250,0.94) 30%,
      rgba(243,247,250,0.68) 48%,
      rgba(243,247,250,0.18) 64%,
      rgba(243,247,250,0.00) 82%
    ),
    var(--lab-antimicrobial-hero-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.lab-category-wirkstoffe .lab-category-hero {
  background-position: 65% center !important;
}

/* =========================================================
   09.3 KANONISCHE ANTIMIKROBIELLE KATEGORIE- UND NORM-CARDS

   Dieser Komponentenblock bindet die Übersichtsseite der antimikrobiellen
   Wirksamkeit, sämtliche gleich aufgebauten Kategorieseiten und die
   einzelnen Normseiten in das gemeinsame Card-System ein. Verbleibende
   lab-*-Klassen steuern nur Layout und fachliche Designvarianten.
========================================================= */

/* ---------------------------------------------------------
   Verlinkte Themenkarten der Bereichsübersicht

   Die Karten sind vollständig verlinkt und gehören deshalb zur bereits
   vorhandenen Area-Rolle. Das bestehende Drei-/Zwei-/Einspalten-Grid bleibt
   ausschließlich Aufgabe von .lab-topic-grid.
--------------------------------------------------------- */

body #sp-main-body a.lab-topic-card.ml-card.ml-card--area {
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  min-height: 0 !important;
  height: 100%;
  padding: 30px !important;
  background: var(--ml-white) !important;
  border: 1px solid rgba(30, 47, 92, 0.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(30, 47, 92, 0.05) !important;
  text-decoration: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
}

body #sp-main-body a.lab-topic-card.ml-card.ml-card--area:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(45, 42, 168, 0.22) !important;
  box-shadow: 0 18px 42px rgba(30, 47, 92, 0.10) !important;
}

body #sp-main-body a.lab-topic-card.ml-card.ml-card--area > .ml-card__eyebrow {
  display: block;
  margin: 0 0 14px !important;
  color: var(--ml-red) !important;
  font-weight: 850 !important;
  text-transform: uppercase;
}

body #sp-main-body a.lab-topic-card.ml-card.ml-card--area > .ml-card__title {
  margin: 0 0 12px !important;
  color: var(--ml-heading) !important;
  font-weight: 820 !important;
}

body #sp-main-body a.lab-topic-card.ml-card.ml-card--area > .ml-card__text {
  min-width: 0;
  margin: 0 !important;
  color: var(--ml-text) !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* ---------------------------------------------------------
   Kompakte Feature-Card

   Wiederverwendbare Dichtevariante für Prüfverfahrenskarten auf den
   Kategorieseiten und Einsatzbereichskarten auf Normseiten. Die Karte ist
   statisch; eine optionale Textaktion bleibt ein eigener Link.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact {
  min-height: 0 !important;
  height: 100%;
  padding: 24px 26px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(30, 47, 92, 0.05) !important;
  transform: none !important;
  transition: none !important;
}

body #sp-main-body .lab-method-grid > .ml-card.ml-card--feature.ml-card--compact {
  min-width: 0;
  min-height: 230px !important;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact:hover {
  transform: none !important;
  border-color: rgba(30, 47, 92, 0.10) !important;
  box-shadow: 0 10px 26px rgba(30, 47, 92, 0.05) !important;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__eyebrow {
  margin: 0 0 10px !important;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__title {
  margin: 0 0 12px !important;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__text {
  margin: 0 0 18px !important;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__text:last-child {
  margin-bottom: 0 !important;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__action {
  align-self: flex-start;
  margin-top: auto;
  color: var(--ml-blue) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__action:hover,
body #sp-main-body .ml-card.ml-card--feature.ml-card--compact > .ml-card__action:focus-visible {
  color: var(--ml-red) !important;
}

/* ---------------------------------------------------------
   Helle Prozess-Card

   Die semantische Prozessrolle bleibt erhalten. --light ändert nur die
   Darstellung für Ablaufschritte auf heller Fläche; die dunkle Prozess-
   variante aus C11 bleibt auf F&E und Auftragsforschung unverändert.
--------------------------------------------------------- */

body #sp-main-body .ml-card.ml-card--process.ml-card--light {
  min-height: 0 !important;
  height: 100%;
  padding: 26px !important;
  background: var(--ml-white) !important;
  border: 1px solid rgba(30, 47, 92, 0.10) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  color: var(--ml-heading) !important;
}

body #sp-main-body .ml-card.ml-card--process.ml-card--light > .ml-card__step {
  margin: 0 0 18px !important;
  background: var(--ml-heading) !important;
  color: var(--ml-white) !important;
}

body #sp-main-body .ml-card.ml-card--process.ml-card--light > .ml-card__title {
  margin: 0 0 10px !important;
  color: var(--ml-heading) !important;
}

body #sp-main-body .ml-card.ml-card--process.ml-card--light > .ml-card__text {
  margin: 0 !important;
  color: var(--ml-text) !important;
}

/* ---------------------------------------------------------
   Faktenkarte der Normseiten

   Breite und Spaltenzuordnung bleiben Teil des Normseitenlayouts. Die
   Komponentenklassen vereinheitlichen Oberfläche und Faktenzeilen.
--------------------------------------------------------- */

body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts {
  box-sizing: border-box;
  padding: 0 !important;
  background: var(--ml-white) !important;
  border: 1px solid rgba(30, 47, 92, 0.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(30, 47, 92, 0.07) !important;
  overflow: hidden !important;
}

body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts > .ml-card__fact {
  display: grid !important;
  grid-template-columns: 0.95fr 1.2fr !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.09) !important;
}

body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts > .ml-card__fact:last-child {
  border-bottom: none !important;
}

body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts .ml-card__fact-label {
  color: var(--ml-red) !important;
  font-weight: 850 !important;
  text-transform: uppercase;
}

body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts .ml-card__fact-value {
  color: var(--ml-heading) !important;
  font-weight: 780 !important;
}

/* ---------------------------------------------------------
   Verwandte Normen als kompakte Area-Cards

   Im schmalen Seitenbereich ist keine feste Kartenhöhe erforderlich.
   Rolle und Inhaltsmodell entsprechen weiterhin der C10-Area-Card.
--------------------------------------------------------- */

body #sp-main-body a.lab-related-card.ml-card.ml-card--area.ml-card--compact {
  min-height: 0 !important;
  height: auto;
  padding: 20px 22px !important;
  border-radius: 16px !important;
}

body #sp-main-body a.lab-related-card.ml-card.ml-card--area.ml-card--compact > .ml-card__title {
  margin: 0 0 7px !important;
  color: var(--ml-blue) !important;
  font-weight: 850 !important;
}

body #sp-main-body a.lab-related-card.ml-card.ml-card--area.ml-card--compact > .ml-card__text {
  display: block;
  margin: 0 0 7px !important;
  color: var(--ml-heading) !important;
  font-weight: 750 !important;
}

body #sp-main-body a.lab-related-card.ml-card.ml-card--area.ml-card--compact > .ml-card__action {
  margin-top: 0;
  color: #607286 !important;
  font-weight: 500 !important;
}

/* ---------------------------------------------------------
   Responsive Komponentendichte
--------------------------------------------------------- */

@media (max-width: 991px) {
  body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts > .ml-card__fact {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

@media (max-width: 767px) {
  body #sp-main-body a.lab-topic-card.ml-card.ml-card--area,
  body #sp-main-body .ml-card.ml-card--feature.ml-card--compact,
  body #sp-main-body .ml-card.ml-card--process.ml-card--light {
    padding: 24px !important;
  }

  body #sp-main-body .lab-method-grid > .ml-card.ml-card--feature.ml-card--compact {
    min-height: 0 !important;
  }
}

/* =========================================================
   10. UNTERNEHMEN
   Bereinigter mibi-Unternehmensbestand
========================================================= */

/* ---------------------------------------------------------
   10.1 UNTERNEHMENSKOMPONENTEN
   Überschattete Zwischenstände sind entfernt; die bestätigten
   Layout- und Designvarianten bleiben erhalten.
--------------------------------------------------------- */

.mibi-container {
  margin: 0 auto;
}

.mibi-eyebrow {
display: inline-block;
  margin-bottom: 18px;
}

.mibi-company-hero h1 {
  margin-bottom: 28px;
}

.mibi-hero-lead {
  margin-bottom: 24px;
}

.mibi-hero-sub {
  margin-bottom: 40px;
}

.mibi-button-row {
display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.mibi-company-hero-image img {
  display: block;
  box-shadow: 0 20px 60px rgba(16, 43, 70, 0.12);
}

@media (max-width: 991px) {

.mibi-company-hero-inner {
grid-template-columns: 1fr;
    gap: 50px;
}

.mibi-button-row {
flex-direction: column;
    align-items: stretch;
}

.mibi-button-row .ml-btn {
width: 100%;
}
}

.mibi-company-intro,
.mibi-company-focus,
.mibi-company-quality,
.mibi-company-research,
.mibi-company-support,
.mibi-company-cta {
padding: 100px 0;
}

.mibi-company-intro-inner,
.mibi-company-quality-inner,
.mibi-company-support-inner {
display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mibi-company-intro h2,
.mibi-section-heading h2,
.mibi-company-quality h2,
.mibi-company-research h2,
.mibi-company-support h2,
.mibi-company-cta h2 {
color: #1E2F5C;
  margin: 0 0 28px;
}

.mibi-company-intro p,
.mibi-section-heading p,
.mibi-company-quality p,
.mibi-company-research p,
.mibi-company-support p,
.mibi-company-cta p {
color: #4A5568;
}

.mibi-company-focus {
background: #f8fbfd;
}

.mibi-section-heading {
max-width: 840px;
  margin-bottom: 54px;
}

.mibi-company-quality-box,
.mibi-company-support-points {
  color: #ffffff;
}

.mibi-quality-item span,
.mibi-support-point span {
display: block;
}

.mibi-quality-item strong,
.mibi-support-point strong {
  margin-bottom: 8px;
}

.mibi-company-research h2,
.mibi-company-research p {
color: #ffffff;
}

.mibi-company-support {
background: #f8fbfd;
}

.mibi-company-cta {
  text-align: center;
}

.mibi-cta-buttons {
justify-content: center;
  margin-top: 34px;
}

@media (max-width: 991px) {
.mibi-company-intro-inner,
.mibi-company-quality-inner,
.mibi-company-support-inner {
grid-template-columns: 1fr;
    gap: 42px;
}

.mibi-company-intro,
.mibi-company-focus,
.mibi-company-quality,
.mibi-company-research,
.mibi-company-support,
.mibi-company-cta {
padding: 72px 0;
}
}

@media (max-width: 575px) {
.mibi-focus-grid {
grid-template-columns: 1fr;
}

.mibi-company-quality-box,
.mibi-company-support-points {
padding: 30px 24px;
    border-radius: 22px;
}
}

body.view-article #sp-main-body > .container:has(.mibi-company-hero),
body.view-article #sp-main-body > .container:has(.mibi-company-hero) > .container-inner {
width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.view-article #sp-main-body .row:has(.mibi-company-hero),
body.view-article #sp-main-body .sp-column:has(.mibi-company-hero),
body.view-article #sp-main-body #sp-component:has(.mibi-company-hero) {
width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mibi-company-hero,
.mibi-company-intro,
.mibi-company-focus,
.mibi-company-quality,
.mibi-company-research,
.mibi-company-support,
.mibi-company-cta {
width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.mibi-container {
width: min(1480px, 90vw) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mibi-company-hero,
.mibi-company-intro,
.mibi-company-focus,
.mibi-company-quality,
.mibi-company-support,
.mibi-company-cta {
background: #f5f8fc !important;
}

.mibi-eyebrow {
color: #F04A3A !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.mibi-company-hero-inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.85fr) !important;
  gap: 78px !important;
}

.mibi-company-hero h1 {
color: #1E2F5C !important;
  font-weight: 800 !important;
}

.mibi-hero-lead {
color: #1E2F5C !important;
  font-weight: 600 !important;
}

.mibi-hero-sub {
color: #334155 !important;
}

.mibi-company-hero-image img {
width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  border-radius: 22px !important;
}

.mibi-company-intro h2 {
  font-weight: 800 !important;
}

.mibi-company-intro-text p {
  margin-bottom: 20px !important;
}

.mibi-company-focus {
padding: 84px 0 88px !important;
}

.mibi-section-heading h2 {
color: #1E2F5C !important;
  font-weight: 800 !important;
  margin: 18px 0 22px !important;
}

.mibi-section-heading p {
color: #334155 !important;
  max-width: 780px !important;
}

.mibi-focus-grid {
display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px !important;
  margin-top: 46px !important;
}

/* Kleine Desktopbreiten: lesbare Zwischenstufe vor dem mobilen Einspaltenlayout */
@media (min-width: 992px) and (max-width: 1199px) {
.mibi-focus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

.mibi-company-quality {
padding: 84px 0 88px !important;
  background: #ffffff !important;
}

.mibi-company-quality-inner {
display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(430px, 0.85fr) !important;
  gap: 84px !important;
  align-items: center !important;
}

.mibi-company-quality h2,
.mibi-company-support h2,
.mibi-company-cta h2 {
color: #1E2F5C !important;
  font-weight: 800 !important;
  margin: 18px 0 26px !important;
}

.mibi-company-quality p,
.mibi-company-support p,
.mibi-company-cta p {
color: #334155 !important;
}

.mibi-company-quality-box,
.mibi-company-support-points {
padding: 42px 46px !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;
  box-shadow: 0 20px 52px rgba(30,47,92,0.16) !important;
}

.mibi-quality-item,
.mibi-support-point {
padding: 0 0 24px !important;
  margin: 0 0 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

.mibi-quality-item:last-child,
.mibi-support-point:last-child {
padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

.mibi-quality-item span,
.mibi-support-point span {
color: rgba(255,255,255,0.86) !important;
}

.mibi-quality-item strong,
.mibi-support-point strong {
display: block !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.mibi-company-research {
padding: 92px 0 !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;
}

.mibi-company-research-content {
max-width: 850px !important;
}

.mibi-company-research h2 {
color: #ffffff !important;
  font-weight: 800 !important;
  margin: 18px 0 28px !important;
}

.mibi-company-research p {
color: rgba(255,255,255,0.9) !important;
}

.mibi-company-support {
padding: 84px 0 88px !important;
}

.mibi-company-support-inner {
display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(430px, 0.85fr) !important;
  gap: 84px !important;
  align-items: center !important;
}

.mibi-company-cta-inner {
max-width: 1080px !important;
  background: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(30,47,92,0.08) !important;
  box-shadow: 0 20px 56px rgba(30,47,92,0.07) !important;
  text-align: center !important;
}

.mibi-company-cta p {
max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 991px) {
.mibi-company-hero-inner,
.mibi-company-intro-inner,
.mibi-company-quality-inner,
.mibi-company-support-inner {
grid-template-columns: 1fr !important;
    gap: 38px !important;
    padding: 42px 34px !important;
}

.mibi-focus-grid {
grid-template-columns: 1fr !important;
}

.mibi-container {
width: calc(100vw - 44px) !important;
}

.mibi-company-hero-image img {
height: 300px !important;
}
}

.mibi-company-hero {
padding: 0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.88) 34%,
      rgba(255,255,255,0.30) 62%,
      rgba(255,255,255,0.06) 100%
    ),
    url("/images/labor-hero.png") center right / cover no-repeat !important;
}

.mibi-company-hero-inner {
width: min(1480px, 90vw) !important;

  display: flex !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.mibi-company-hero-image {
display: none !important;
}

.mibi-company-intro-inner {
  grid-template-columns: minmax(360px, 0.85fr) minmax(620px, 1.15fr) !important;
  gap: 80px !important;
  align-items: start !important;
}

.mibi-company-intro-text {
columns: 1 !important;
}

.mibi-company-cta {
padding: 78px 0 90px !important;
  background: #f5f8fc !important;
}

.mibi-company-cta-inner {
width: min(1080px, 86vw) !important;
  padding: 52px 58px !important;
}

.mibi-company-cta h2 {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 991px) {
.mibi-company-hero,
.mibi-company-hero-inner {
min-height: auto !important;
}

.mibi-company-hero {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0.96) 0%,
        rgba(255,255,255,0.88) 100%
      ),
      url("/images/labor-hero.png") center / cover no-repeat !important;
}

.mibi-company-intro-inner {
grid-template-columns: 1fr !important;
    gap: 32px !important;
}
}

.mibi-company-hero {
min-height: 540px !important;
  background-position: center center !important;
}

.mibi-company-hero-inner {
min-height: 540px !important;
  align-items: center !important;
}

.mibi-company-hero-text {
max-width: 660px !important;
}

.mibi-company-hero h1 {
  margin: 16px 0 24px !important;
}

.mibi-hero-lead {
  max-width: 680px !important;
}

.mibi-hero-sub {
  max-width: 700px !important;
}

.mibi-company-hero .mibi-button-row {
margin-top: 24px !important;
}

.mibi-company-intro {
padding: 72px 0 78px !important;
  background: #f5f8fc !important;
}

.mibi-company-intro-inner {
display: block !important;

  width: min(1180px, 86vw) !important;
  max-width: none !important;

  background: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(30,47,92,0.08) !important;
  box-shadow: 0 20px 56px rgba(30,47,92,0.07) !important;

  padding: 58px 64px !important;
}

.mibi-company-intro .mibi-eyebrow {
display: block !important;
  margin-bottom: 18px !important;
}

.mibi-company-intro h2 {
max-width: 900px !important;
  margin: 0 0 34px !important;

  color: #1E2F5C !important;
}

.mibi-company-intro-text {
display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px 56px !important;

  max-width: none !important;
}

.mibi-company-intro-text p {
margin: 0 !important;
  color: #334155 !important;
}

@media (max-width: 991px) {
.mibi-company-hero {
min-height: auto !important;
    padding: 64px 0 !important;
}

.mibi-company-hero-inner {
min-height: auto !important;
}

.mibi-company-intro-inner {
width: calc(100vw - 44px) !important;
    padding: 42px 34px !important;
}

.mibi-company-intro-text {
grid-template-columns: 1fr !important;
}
}

/* ---------------------------------------------------------
   10.2 FORSCHUNG & ENTWICKLUNG
   Bereinigter rnd-Seitenbestand
--------------------------------------------------------- */

/* =========================================================
   Unternehmen – Forschung & Entwicklung
   finale Version
   Prefix: rnd-
========================================================= */

/* Joomla-/Helix-Container für diese Seite freigeben */
body:has(.rnd-page) #sp-main-body,
body:has(.rnd-page) #sp-main-body > .container,
body:has(.rnd-page) #sp-main-body > .container-inner,
body:has(.rnd-page) #sp-main-body .row,
body:has(.rnd-page) #sp-component,
body:has(.rnd-page) #sp-component .sp-column,
body:has(.rnd-page) .item-page,
body:has(.rnd-page) .article-details {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body:has(.rnd-page) #sp-component {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.rnd-page {
  width: 100%;
  overflow: hidden;
  color: #1E2F5C;
  background: #ffffff;
}

.rnd-inner {
  width: calc(100% - 96px);
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.rnd-eyebrow {
  margin: 0 0 16px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

/* =========================================================
   Hero
========================================================= */

.rnd-hero {
  background:
    linear-gradient(
      90deg,
      rgba(238, 244, 250, 0.99) 0%,
      rgba(238, 244, 250, 0.97) 38%,
      rgba(238, 244, 250, 0.84) 58%,
      rgba(238, 244, 250, 0.38) 82%,
      rgba(238, 244, 250, 0.10) 100%
    );
}

.rnd-hero h1 {
  margin: 0 0 24px;
  color: #1E2F5C;
  font-weight: 850;
}

.rnd-hero-content > p:not(.rnd-eyebrow) {
  margin: 0;
  color: #1E2F5C;
  font-weight: 620;
}

.rnd-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

/* =========================================================
   Forschung & Entwicklung – Hero-Bild einbauen
========================================================= */

.rnd-hero {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  padding: 76px 0 82px;

  background-color: #EEF4FA;
  background-image:
    linear-gradient(
      90deg,
      rgba(238, 244, 250, 0.99) 0%,
      rgba(238, 244, 250, 0.97) 34%,
      rgba(238, 244, 250, 0.86) 52%,
      rgba(238, 244, 250, 0.48) 72%,
      rgba(238, 244, 250, 0.14) 100%
    ),
    url("/images/hero/forschung-entwicklung-hero.png");

  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: left top, center right;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.rnd-hero-content {
  position: relative;
  z-index: 2;
  max-width: 980px;
}

/* Textbereich im Hero bleibt klar lesbar */
.rnd-hero h1 {
  max-width: 1080px;
}

.rnd-hero-content > p:not(.rnd-eyebrow) {
  max-width: 890px;
}

/* Mobile: Bild ausblenden, damit es nicht unruhig wird */
@media (max-width: 767px) {
  .rnd-hero {

    background-image:
      linear-gradient(
        90deg,
        rgba(238, 244, 250, 0.98) 0%,
        rgba(238, 244, 250, 0.94) 100%
      );
    background-size: 100% 100%;
    background-position: center;
  }
}

/* =========================================================
   Intro / Projektpartnerschaft – reduzierte Version
========================================================= */

.rnd-intro {
  padding: 68px 0 72px;
  background: #ffffff;
}

.rnd-intro-clean {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 86px;
  align-items: start;
}

.rnd-intro-heading h2 {
  margin: 0;
  color: #1E2F5C;
  font-weight: 830;
}

.rnd-intro-copy {
  max-width: 820px;
  padding-top: 42px;
}

.rnd-intro-copy p {
  margin: 0 0 18px;
  color: #4A5568;
}

.rnd-intro-copy p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   Mögliche Beiträge
========================================================= */

.rnd-support {
  padding: 72px 0 78px;
  background: #F4F8FB;
  border-top: 1px solid rgba(30, 47, 92, 0.06);
  border-bottom: 1px solid rgba(30, 47, 92, 0.06);
}

.rnd-section-heading {
  max-width: 1080px;
  margin-bottom: 36px;
}

.rnd-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* =========================================================
   Projektansatz
========================================================= */

.rnd-process {
  padding: 76px 0;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
}

.rnd-process-grid {
  display: grid;
  align-items: center;
}

.rnd-process .rnd-eyebrow,
.rnd-cta .rnd-eyebrow {
  color: rgba(255, 255, 255, 0.76);
}

.rnd-process-text h2 {
  color: #ffffff;
}

.rnd-process-text p {
  color: rgba(255, 255, 255, 0.86);
}

.rnd-process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* =========================================================
   Kooperationen
========================================================= */

.rnd-cooperation {
  padding: 72px 0;
  background: #ffffff;
}

.rnd-cooperation-grid {
  display: grid;
}

/* =========================================================
   CTA
========================================================= */

.rnd-cta {
  padding: 42px 0 78px;
  background: #F4F8FB;
}

.rnd-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 46px 54px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 26px;
  color: #ffffff;
  box-shadow: 0 20px 54px rgba(30, 47, 92, 0.17);
}

.rnd-cta h2 {
  max-width: 920px;
  margin-bottom: 14px;
  color: #ffffff;
}

.rnd-cta p:not(.rnd-eyebrow) {
  max-width: 880px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.rnd-cta .ml-btn {
  white-space: nowrap;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1200px) {
  .rnd-inner {
    width: calc(100% - 72px);
  }

  .rnd-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rnd-cta-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .rnd-inner {
    width: calc(100% - 40px);
  }

  .rnd-hero {
    min-height: auto;
    padding: 54px 0;
  }

  .rnd-intro,
  .rnd-support,
  .rnd-process,
  .rnd-cooperation {
    padding: 52px 0;
  }

  .rnd-card-grid,
  .rnd-process-steps {
    grid-template-columns: 1fr;
  }

  .rnd-cta-inner{
    padding: 28px 24px;
    border-radius: 22px;
  }
}

@media (max-width: 1200px) {
  .rnd-intro-clean {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rnd-intro-copy {
    max-width: 900px;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  .rnd-intro {
    padding: 52px 0;
  }
}

/* Projektansatz: linke Spalte kompakt halten */
.rnd-process-grid {
  grid-template-columns: 390px minmax(0, 1fr) !important;
  gap: 96px !important;
}

.rnd-process-text {
  max-width: 390px !important;
}

/* Kooperation: zwei statt drei Boxen, ruhiger und hochwertiger */
.rnd-cooperation-grid {
  grid-template-columns: minmax(0, 1fr) 520px !important;
  gap: 76px !important;
  align-items: center !important;
}

.rnd-cooperation-cards {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .rnd-process-grid,
  .rnd-cooperation-grid {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  .rnd-process-text {
    max-width: 780px !important;
  }

  .rnd-cooperation-cards {
    max-width: 760px !important;
  }
}

/* =========================================================
   11. AKKREDITIERUNG
   Bereinigter accr-Seitenbestand
========================================================= */

/* ---------------------------------------------------------
   11.1 AKKREDITIERUNGSKOMPONENTEN
   Der bereinigte Endzustand erhält Seitenlayout und Fachvarianten.
--------------------------------------------------------- */

/* =========================================================
   Akkreditierung – finale Unternehmensseite
   Prefix: accr-
========================================================= */

/* Joomla-/Helix-Container für diese Seite freigeben */
body:has(.accr-page) #sp-main-body,
body:has(.accr-page) #sp-main-body > .container,
body:has(.accr-page) #sp-main-body > .container-inner,
body:has(.accr-page) #sp-main-body .row,
body:has(.accr-page) #sp-component,
body:has(.accr-page) #sp-component .sp-column,
body:has(.accr-page) .item-page,
body:has(.accr-page) .article-details {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body:has(.accr-page) #sp-component {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.accr-page {
  --accr-red-strong: #C9342A;
  width: 100%;
  color: #1E2F5C;
  background: #ffffff;
  overflow: hidden;
}

.accr-inner {
  width: calc(100% - 96px);
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.accr-eyebrow {
  margin: 0 0 16px;
  color: var(--accr-red-strong);
  font-weight: 850;
  text-transform: uppercase;
}

/* =========================================================
   Hero mit Bild
========================================================= */

.accr-hero {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  display: flex;
  align-items: center;
  padding: 76px 0 80px;

  background-color: #EEF4FA;
  background-image:
    linear-gradient(
      90deg,
      rgba(238, 244, 250, 0.99) 0%,
      rgba(238, 244, 250, 0.97) 28%,
      rgba(238, 244, 250, 0.88) 46%,
      rgba(238, 244, 250, 0.45) 66%,
      rgba(238, 244, 250, 0.10) 100%
    ),
    url("/images/hero/akkreditierung-hero.png");

  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: left top, right center;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.accr-hero-grid {
  display: block;
}

.accr-hero-text {
  max-width: 940px;
  position: relative;
  z-index: 2;
}

.accr-hero h1 {
  max-width: 940px;
  margin: 0 0 24px;
  color: #1E2F5C;
  font-weight: 850;
  text-wrap: balance;
}

.accr-standard-nowrap {
  white-space: nowrap;
}

.accr-hero-text > p:not(.accr-eyebrow) {
  max-width: 860px;
  margin: 0;
  color: #1E2F5C;
  font-weight: 620;
}

.accr-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

/* Zugänglicher Rotton für interaktive Zustände auf der Akkreditierungsseite */
.accr-page .ml-btn-primary:hover,
.accr-page .ml-btn-primary:focus-visible,
.accr-page .ml-btn-secondary:hover,
.accr-page .ml-btn-secondary:focus-visible,
.accr-page .ml-btn-accent {
  background: var(--accr-red-strong) !important;
  border-color: var(--accr-red-strong) !important;
}

/* Falls die alte blaue Hero-Box noch irgendwo im HTML steht */

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

.accr-section {
  padding: 66px 0;
  background: #ffffff;
}

.accr-section-soft {
  background: #F4F8FB;
  border-top: 1px solid rgba(30, 47, 92, 0.06);
  border-bottom: 1px solid rgba(30, 47, 92, 0.06);
}

#akkreditierungsdokumente {
  scroll-margin-top: 120px;
}

.accr-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px;
  align-items: start;
}

.accr-intro-text {
  max-width: 1120px;
}

.accr-intro-text h2,
.accr-section-heading h2,
.accr-scope-panel h2,
.accr-cta h2 {
  margin: 0 0 22px;
  color: #1E2F5C;
  font-weight: 830;
}

.accr-intro-text p,
.accr-section-heading p,
.accr-scope-panel p {
  max-width: 980px;
  margin: 0 0 16px;
  color: #4A5568;
}

/* =========================================================
   Qualitätsverständnis / Prinzipien
========================================================= */

.accr-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}


/* =========================================================
   Abschnittsüberschriften
========================================================= */

.accr-section-heading {
  max-width: 1080px;
  margin-bottom: 36px;
}

/* =========================================================
   Transparenzpanel
========================================================= */

.accr-scope-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 70px;
  align-items: center;
  padding: 44px;
  background: #F4F8FB;
  border: 1px solid rgba(30, 47, 92, 0.09);
  border-radius: 28px;
}

.accr-scope-note {
  padding: 26px 28px;
  background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-left: 4px solid #F04A3A;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(30, 47, 92, 0.055);
}

.accr-scope-note strong {
  display: block;
  margin-bottom: 10px;
  color: var(--accr-red-strong);
  font-weight: 850;
  text-transform: uppercase;
}

.accr-scope-note p {
  margin: 0;
  color: #4A5568;
}

/* =========================================================
   Downloads
========================================================= */

.accr-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.accr-download-card {
  position: relative;
}

.accr-document-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 20px;
  color: var(--accr-red-strong);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  letter-spacing: var(--ml-letter-uppercase);
  font-weight: 850;
  text-transform: uppercase;
}

.accr-document-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--accr-red-strong);
  background: rgba(201, 52, 42, 0.08);
  border: 1px solid rgba(201, 52, 42, 0.18);
  border-radius: 11px;
}

.accr-document-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CTA
========================================================= */

.accr-cta-section {
  padding: 36px 0 74px;
  background: #F4F8FB;
}

.accr-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 46px 54px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 26px;
  color: #ffffff;
  box-shadow: 0 20px 54px rgba(30, 47, 92, 0.17);
}

.accr-cta span {
  display: block;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 850;
  text-transform: uppercase;
}

.accr-cta h2 {
  max-width: 780px;
  margin: 0 0 14px;
  color: #ffffff;
  font-weight: 800;
}

.accr-cta p {
  max-width: 860px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.accr-cta .ml-btn {
  white-space: nowrap;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1200px) {
  .accr-inner {
    width: calc(100% - 72px);
  }

  .accr-scope-panel {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .accr-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .accr-principles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .accr-inner {
    width: calc(100% - 40px);
  }

  .accr-hero {
    min-height: auto;
    padding: 52px 0;
    background-image:
      linear-gradient(
        90deg,
        rgba(238, 244, 250, 0.97) 0%,
        rgba(238, 244, 250, 0.84) 100%
      ),
      url("/images/hero/akkreditierung-hero.png");
  }

  .accr-section {
    padding: 52px 0;
  }

  .accr-button-row .ml-btn {
    width: 100%;
  }

  .accr-scope-panel,
  .accr-cta {
    padding: 28px 24px;
    border-radius: 22px;
  }

  .accr-download-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .accr-standard-nowrap {
    white-space: normal;
  }
}

/* =========================================================
   12. TEAM
   Bereinigter Teambestand
========================================================= */

.team-page {
  color: #1E2F5C;
}

.team-inner {
  margin: 0 auto;
}

.team-eyebrow {
margin: 0 0 16px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.team-section-heading {
max-width: 980px;
}

.team-note-section {
padding: 72px 0;
  background: #ffffff;
}

.team-note-box {
display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 80px;
  padding: 42px 48px;
  background: #F4F8FB;
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-radius: 24px;
}

.team-note-box h2 {
margin: 0;
  color: #1E2F5C;
  font-weight: 850;
}

.team-note-box > p {
margin: 36px 0 0;
  color: #4A5568;
}

.team-cta {
padding: 0 0 84px;
  background: #ffffff;
}

.team-cta-inner {
display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 48px 56px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(30, 47, 92, 0.18);
}

.team-cta .team-eyebrow {
color: #F04A3A;
}

.team-cta h2 {
margin: 0 0 18px;
  color: #ffffff;
  font-weight: 850;
}

.team-cta p:not(.team-eyebrow) {
margin: 0;
  max-width: 850px;
  color: rgba(255, 255, 255, 0.88);
}

.team-cta .ml-btn {
white-space: nowrap;
}

@media (max-width: 1350px) {
.team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 992px) {
.team-inner {
width: min(100% - 48px, 100%);
}

.team-note-box {
grid-template-columns: 1fr;
    gap: 28px;
}

.team-note-box > p{
padding-top: 0;
    margin-top: 0;
}

.team-cta-inner {
grid-template-columns: 1fr;
    gap: 30px;
}

.team-cta .ml-btn {
justify-self: start;
}
}

@media (max-width: 720px) {
.team-list-section,
.team-note-section {
padding: 52px 0;
}

.team-grid {
grid-template-columns: 1fr;
}

.team-note-box,
.team-cta-inner {
padding: 32px 26px;
}
}

.team-list-section {
padding-top: 68px !important;
}

@media (max-width: 992px) {
.team-top {
padding: 58px 0 54px;
}

.team-top-grid {
grid-template-columns: 1fr;
    gap: 24px;
}

.team-top-copy {
padding-top: 0;
}
}

.team-top,
.team-list-section,
.team-note-section{
width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

.team-section-heading h2 {
margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
.team-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.team-top-grid {
grid-template-columns: 1fr !important;
    gap: 28px !important;
}

.team-top-copy {
padding-top: 0 !important;
}
}

@media (max-width: 767px) {
.team-inner {
width: min(100% - 36px, 100%) !important;
}

.team-grid {
grid-template-columns: 1fr !important;
}

.team-top {
padding: 54px 0 48px !important;
}

.team-list-section {
padding: 52px 0 62px !important;
}
}

body:has(.team-page) #sp-main-body {
padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.team-page) #sp-main-body > .container,
body:has(.team-page) #sp-component,
body:has(.team-page) #sp-component .sp-column,
body:has(.team-page) .item-page,
body:has(.team-page) .article-details,
body:has(.team-page) .com-content-article,
body:has(.team-page) .com-content-article__body {
width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.team-page) .ml-container {
max-width: none !important;
}

.team-page {
width: 100% !important;
  max-width: none !important;
  overflow-x: hidden;
  background: #ffffff;
}

.team-inner {
width: calc(100% - 120px) !important;
  max-width: 1720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.team-top {
width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 78px 0 74px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.10) !important;
}

.team-top-grid {
display: grid !important;
  grid-template-columns: minmax(0, 460px) minmax(0, 900px) !important;
  gap: 120px !important;
  align-items: start !important;
}

.team-top h1 {
margin: 0 !important;
  color: #1E2F5C !important;
  font-weight: 850 !important;
}

.team-top-copy {
padding-top: 40px !important;
}

.team-top-copy p {
max-width: 900px !important;
  margin: 0 0 18px !important;
  color: #31405c !important;
}

.team-top-copy p:last-child {
margin-bottom: 0 !important;
}

.team-list-section {
width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 72px 0 88px !important;
  background: #F4F8FB !important;
}

.team-section-heading {
margin-bottom: 40px !important;
}

.team-section-heading h2 {
margin: 0 !important;
  color: #1E2F5C !important;
  font-weight: 850 !important;
}

.team-grid {
display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

@media (max-width: 1550px) {
.team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 1100px) {
.team-inner {
width: calc(100% - 72px) !important;
}

.team-top-grid {
grid-template-columns: 1fr !important;
    gap: 28px !important;
}

.team-top-copy {
padding-top: 0 !important;
}

.team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}

@media (max-width: 700px) {
.team-inner {
width: calc(100% - 36px) !important;
}

.team-top {
padding: 52px 0 48px !important;
}

.team-list-section {
padding: 52px 0 62px !important;
}

.team-grid {
grid-template-columns: 1fr !important;
}

}

/* =========================================================
   12.1 KANONISCHE PERSONEN-CARDS

   Dieser Komponentenblock vereinheitlicht die Teamkarten als eigene
   semantische Personenrolle. Team- und Gridklassen bleiben nur als
   Layout-Hooks erhalten; die ml-card-Klassen definieren Oberfläche,
   Medienbereich und Inhaltsstruktur der einzelnen Person. Layout und
   Typografie folgen der regulären, komponentengebundenen Kaskade.
========================================================= */

/* ---------------------------------------------------------
   Personen-Card

   Statische Karte mit austauschbarem Portrait beziehungsweise Platzhalter,
   Name, Qualifikation und direkten Kontaktdaten. Die Karte selbst besitzt
   bewusst keinen Hoverzustand; interaktiv sind ausschließlich ihre Links.
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--person {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-width: 0;
  min-height: 240px;
  height: 100%;
  padding: 24px;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.09);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(30, 47, 92, 0.06);
}

/* ---------------------------------------------------------
   Austauschbarer Medienbereich
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--person > .ml-card__media {
  box-sizing: border-box;
  width: 152px;
  height: 190px;
  min-width: 152px;
  border-radius: 17px;
  overflow: hidden;
}

#sp-main-body .ml-card.ml-card--person > .team-photo-placeholder.ml-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      135deg,
      rgba(45, 42, 168, 0.10),
      rgba(240, 74, 58, 0.08)
    );
  color: var(--ml-blue) !important;
  font-weight: 850 !important;
}

#sp-main-body .ml-card.ml-card--person > img.ml-card__media {
  display: block;
  object-fit: contain;
  object-position: center top;
}

/* ---------------------------------------------------------
   Personeninhalt und Kontaktdaten
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--person > .ml-card__body {
  min-width: 0;
}

#sp-main-body .ml-card.ml-card--person .ml-card__title {
  margin: 0 0 6px;
  color: var(--ml-heading) !important;
  font-weight: 850 !important;
}

#sp-main-body .ml-card.ml-card--person .ml-card__meta {
  margin: 0 0 22px;
  color: var(--ml-blue) !important;
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  font-weight: 780 !important;
  letter-spacing: var(--ml-letter-body);
}

#sp-main-body .ml-card.ml-card--person .ml-card__contact {
  margin: 0 0 8px;
  color: var(--ml-text) !important;
}

#sp-main-body .ml-card.ml-card--person .ml-card__contact:last-child {
  margin-bottom: 0;
}

#sp-main-body .ml-card.ml-card--person .ml-card__contact > strong {
  color: var(--ml-heading) !important;
  font-weight: 820 !important;
}

#sp-main-body .ml-card.ml-card--person .ml-card__contact > a {
  color: #172B85 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

#sp-main-body .ml-card.ml-card--person .ml-card__contact > a:hover,
#sp-main-body .ml-card.ml-card--person .ml-card__contact > a:focus-visible {
  color: var(--ml-red) !important;
}

/* ---------------------------------------------------------
   Responsive Personendarstellung
--------------------------------------------------------- */

@media (max-width: 700px) {
  #sp-main-body .ml-card.ml-card--person {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
  }

  #sp-main-body .ml-card.ml-card--person > .ml-card__media {
    width: 112px;
    height: 144px;
    min-width: 112px;
  }
}

/* =========================================================
   13. PUBLIKATIONEN
   Bereinigter Publikationsbestand
========================================================= */

body:has(.pub-page) #sp-main-body {
padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.pub-page) #sp-main-body > .container,
body:has(.pub-page) #sp-component,
body:has(.pub-page) #sp-component .sp-column,
body:has(.pub-page) .item-page,
body:has(.pub-page) .article-details,
body:has(.pub-page) .com-content-article,
body:has(.pub-page) .com-content-article__body {
width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pub-page {
width: 100% !important;
  max-width: none !important;
  overflow-x: hidden;
  background: #ffffff;
}

.pub-inner {
width: calc(100% - 120px) !important;
  max-width: 1720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.pub-hero {
padding: 78px 0 76px !important;
  background:
    linear-gradient(90deg, #ffffff 0%, #F4F8FB 100%) !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.10);
}

.pub-hero-grid {
display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 90px;
  align-items: center;
}

.pub-hero h1 {
max-width: 850px;
  margin: 0 0 24px !important;
  color: #1E2F5C !important;
  font-weight: 850 !important;
}

.pub-hero p {
max-width: 780px;
  margin: 0 0 32px !important;
  color: #31405c !important;
}

.pub-hero-actions {
display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pub-hero-note {
background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-left: 4px solid #F04A3A;
  border-radius: 22px;
  padding: 30px 32px;
  box-shadow: 0 20px 45px rgba(30, 47, 92, 0.07);
}

.pub-hero-note span {
display: block;
  margin-bottom: 16px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.pub-hero-note ul {
margin: 0;
  padding-left: 20px;
}

.pub-hero-note li {
margin-bottom: 10px;
  color: #1E2F5C;
  font-weight: 700;
}

.pub-hero-note li:last-child {
margin-bottom: 0;
}

.pub-section-title {
max-width: 840px;
}

.pub-section-title-centered {
margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pub-section-title h2 {
margin: 0 0 20px !important;
  color: #1E2F5C !important;
  font-weight: 850 !important;
}

.pub-section-title p {
margin: 0;
  color: #31405c;
}

.pub-feature-section {
padding: 82px 0 !important;
  background: #ffffff;
}

.pub-feature-grid {
display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 72px;
  align-items: center;
}

.pub-dialysis-section {
padding: 86px 0 94px !important;
  background: #F4F8FB;
  border-top: 1px solid rgba(30, 47, 92, 0.08);
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.pub-compact-list {
display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}

.pub-selection-section {
padding: 86px 0 96px !important;
  background: #ffffff;
}

.pub-card-grid {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}

.pub-cta-section {
padding: 0 0 90px !important;
  background: #ffffff;
}

.pub-cta-box {
display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 60px;
  align-items: center;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 26px;
  padding: 58px 70px;
  box-shadow: 0 24px 60px rgba(30, 47, 92, 0.14);
}

.pub-cta-box .ml-eyebrow {
color: #F04A3A !important;
}

.pub-cta-box h2 {
max-width: 860px;
  margin: 0 0 18px !important;
  color: #ffffff !important;
  font-weight: 850 !important;
}

.pub-cta-box p {
max-width: 880px;
  margin: 0 !important;
  color: rgba(255,255,255,0.88) !important;
}

.pub-cta-box .ml-btn {
  white-space: nowrap;
}

@media (max-width: 1450px) {
.pub-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pub-compact-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 1100px) {
.pub-inner {
width: calc(100% - 72px) !important;
}

.pub-hero-grid,
.pub-feature-grid,
.pub-cta-box {
grid-template-columns: 1fr;
    gap: 36px;
}

.pub-hero-note {
max-width: 620px;
}

.pub-cta-box {
padding: 46px 42px;
}
}

@media (max-width: 760px) {
.pub-inner {
width: calc(100% - 36px) !important;
}

.pub-hero,
.pub-feature-section,
.pub-dialysis-section,
.pub-selection-section {
padding-top: 56px !important;
    padding-bottom: 58px !important;
}

.pub-card-grid,
.pub-compact-list {
grid-template-columns: 1fr;
}

.pub-hero-actions {
flex-direction: column;
    align-items: flex-start;
}

.pub-cta-box {
padding: 36px 28px;
}
}

/* =========================================================
   13.1 KANONISCHE PUBLIKATIONS-CARDS

   Dieser Komponentenblock vereinheitlicht die hervorgehobene Publikation,
   die kompakten Fachbeiträge und die wissenschaftliche Auswahl als eine
   semantische Publikationsrolle. Publikations- und Gridklassen bleiben
   nur als Layout-Hooks erhalten. Die Karten sind statisch; ihre Flächen
   besitzen deshalb bewusst keinen Hoverzustand. Die isolierte Rolle kommt
   ohne pauschale Layout- oder Typografie-Prioritäten aus.
========================================================= */

/* ---------------------------------------------------------
   Standard-Publikationskarte

   Autoren, Titel und Quelle bilden ein festes Inhaltsmodell. Die Quelle
   bleibt am unteren Kartenrand ausgerichtet, damit unterschiedlich lange
   Titel innerhalb einer Gridzeile ruhig dargestellt werden.
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--publication {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 310px;
  height: 100%;
  padding: 30px 32px;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.09);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(30, 47, 92, 0.05);
  transform: none;
  transition: none;
}

#sp-main-body .ml-card.ml-card--publication > .ml-card__authors {
  margin: 0 0 18px;
  color: #68758f !important;
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  font-weight: 400 !important;
  letter-spacing: var(--ml-letter-body);
  overflow-wrap: anywhere;
}

#sp-main-body .ml-card.ml-card--publication > .ml-card__title {
  margin: 0 0 22px;
  color: var(--ml-heading) !important;
  font-weight: 820 !important;
  overflow-wrap: anywhere;
}

#sp-main-body .ml-card.ml-card--publication > .ml-card__source {
  display: block;
  margin: auto 0 0;
  padding-top: 18px;
  color: var(--ml-blue) !important;
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  font-weight: 800 !important;
  letter-spacing: var(--ml-letter-body);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Hervorgehobene Publikation

   Der Modifier veraendert nur Dichte, Rundung und Schatten. Inhaltsmodell
   und Typografie bleiben dieselben wie bei der Standardkarte.
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--publication.ml-card--featured {
  min-height: 0;
  height: auto;
  padding: 38px 42px;
  border-color: rgba(30, 47, 92, 0.10);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(30, 47, 92, 0.07);
}

/* ---------------------------------------------------------
   Kompakter Fachbeitrag

   Die vorhandene vier-, zwei- und einspaltige Liste bleibt Seitenlayout.
   Der bereits etablierte Modifier --compact reduziert hier ausschließlich
   Flaeche und typografische Dichte der Publikationsrolle.
--------------------------------------------------------- */

#sp-main-body .ml-card.ml-card--publication.ml-card--compact {
  min-height: 0;
  height: 100%;
  padding: 22px 24px;
  border-color: rgba(30, 47, 92, 0.08);
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(30, 47, 92, 0.045);
}

#sp-main-body .ml-card.ml-card--publication.ml-card--compact > .ml-card__authors {
  margin: 0 0 8px;
  color: var(--ml-heading) !important;
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-card);
  font-weight: 850 !important;
}

#sp-main-body .ml-card.ml-card--publication.ml-card--compact > .ml-card__title {
  display: block;
  margin: 0 0 8px;
  color: var(--ml-text) !important;
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  font-weight: 400 !important;
  letter-spacing: var(--ml-letter-body);
}

#sp-main-body .ml-card.ml-card--publication.ml-card--compact > .ml-card__source {
  margin: auto 0 0;
  padding-top: 0;
  color: var(--ml-red) !important;
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  font-weight: 800 !important;
  letter-spacing: var(--ml-letter-uppercase);
}

/* ---------------------------------------------------------
   Responsive Komponentendichte
--------------------------------------------------------- */

@media (max-width: 760px) {
  #sp-main-body .ml-card.ml-card--publication {
    min-height: 0;
    padding: 26px;
  }

  #sp-main-body .ml-card.ml-card--publication.ml-card--featured,
  #sp-main-body .ml-card.ml-card--publication.ml-card--compact {
    padding: 26px;
  }
}

/* =========================================================
   14. KONTAKT
   Kontakt, Convert Forms, Anfahrt und Karte
========================================================= */

/* ---------------------------------------------------------
   14.1 KONTAKTSEITENBESTAND
   Formular-, Karten- und Anfahrtsvarianten bleiben getrennt erhalten.
--------------------------------------------------------- */

/* =========================================================
   Kontakt & Anfahrt
========================================================= */

.contact-page-wrapper {
  width: 100%;
  padding: 90px 64px 56px;
  background: linear-gradient(180deg, #f3f7fa 0%, #ffffff 55%, #f8fbfd 100%);
}

.contact-grid {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.08);
  border-radius: 28px;
  padding: 0;
  box-shadow: 0 22px 60px rgba(30, 47, 92, 0.08);
  overflow: hidden;
}

.contact-info {
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  padding: 58px 52px;
  color: #ffffff;
}

.contact-form-area {
  background: #ffffff;
  padding: 58px 56px;
}

#sp-main-body .contact-info h2 {
  margin: 0 0 22px;
  color: #ffffff;
  font-size: clamp(2rem, 2.2vw, 2.375rem);
  line-height: 1.2;
  font-weight: 700;
}

.contact-intro {
  max-width: 520px;
  margin: 0 0 38px;
  color: rgba(255,255,255,0.86);
  font-size: clamp(1.125rem, 1.2vw, 1.25rem);
  line-height: 1.55;
}

.contact-details p {
  margin: 0 0 30px;
  color: rgba(255,255,255,0.94);
  font-size: clamp(1.125rem, 1.2vw, 1.25rem);
  line-height: 1.55;
}

.contact-details strong {
  color: #ffffff;
  font-weight: 700;
}

.contact-details a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(240, 74, 58, 0.75);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-details a[href^="tel:"] {
  font-size: clamp(1.375rem, 1.5vw, 1.5rem);
  line-height: 1.35;
  font-weight: 800;
}

.contact-details a:hover {
  color: #F04A3A;
  border-color: #F04A3A;
}

.contact-form-area form,.contact-form-area .cf-fields,.contact-form-area .cf-control-group,.contact-form-area .cf-control-input,.contact-form-area .convertforms,.contact-form-area .convertforms form,.contact-form-area .convertforms .cf-form,.contact-form-area .convertforms .cf-fields,.contact-form-area .convertforms .cf-control-group,.contact-form-area .convertforms .cf-control-input {
  width: 100% !important;
  max-width: none !important;
}

.contact-form-area .cf-control-group {
  margin-bottom: 24px;
}

.contact-form-area label {
  color: #1E2F5C;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.contact-form-area .cf-control-input input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.contact-form-area .cf-control-input textarea,
.contact-form-area .cf-control-input select,
.contact-form-area input:not([type="submit"]):not([type="button"]):not([type="reset"]),
.contact-form-area textarea,
.contact-form-area select {
  width: 100% !important;
  max-width: none !important;
  display: block;
  border: 1px solid rgba(30, 47, 92, 0.18);
  border-radius: 12px;
  padding: 14px 16px;
  color: #1f2f3f;
  background: #ffffff;
  box-sizing: border-box;
}

.contact-form-area input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
.contact-form-area textarea:focus,
.contact-form-area select:focus {
  outline: none;
  border-color: #2D2AA8;
  box-shadow: 0 0 0 3px rgba(45, 42, 168, 0.10);
}

.contact-form-area textarea {
  min-height: 150px;
  resize: vertical;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
  .contact-page-wrapper {
    padding: 56px 20px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-info,.contact-form-area {
    padding: 30px 24px;
  }
}

@media (max-width: 575px) {
  .contact-page-wrapper {
    padding: 42px 16px;
  }

  .contact-info,.contact-form-area {
    padding: 26px 20px;
    border-radius: 14px;
  }
}

/* =========================================================
   Kontakt & Anfahrt
========================================================= */

.contact-form-area .convertforms,.contact-form-area .convertforms form,.contact-form-area .convertforms .cf-form,.contact-form-area .convertforms .cf-fields,.contact-form-area .convertforms .cf-control-group,.contact-form-area .convertforms .cf-control-input {
  width: 100% !important;
  max-width: none !important;
}

.contact-form-area .convertforms input,.contact-form-area .convertforms textarea,.contact-form-area .convertforms select {
  width: 100% !important;
  max-width: none !important;
  display: block;
}

.contact-location-wrapper {
  width: 100%;
  padding: 56px 64px 100px;
  background: linear-gradient(180deg, #f8fbfd 0%, #ffffff 45%, #f3f7fa 100%);
}

.contact-location-grid {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  background: #ffffff;
  border: 1px solid rgba(15, 45, 75, 0.08);
  border-radius: 22px;
  padding: 56px;
  box-shadow: 0 18px 45px rgba(15, 45, 75, 0.06);
}

.contact-location-note {
  background: #F3F7FA;
  border-left: 4px solid #F04A3A;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 26px;
  color: #1E2F5C;
}

.contact-map-card,.contact-directions-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
}

.contact-map-card iframe {
  width: 100%;
  min-height: 520px;
  border: 0;
  border-radius: 14px;
  display: block;
}

.contact-building-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  margin-bottom: 34px;
  border: 1px solid rgba(15, 45, 75, 0.08);
}

.contact-directions-card h2 {
  margin: 0 0 24px;
  color: #0f2d4b;
  font-weight: 700;
}

.contact-accordion details {
  border-top: 1px solid rgba(15, 45, 75, 0.12);
  padding: 18px 0;
}

.contact-accordion details:last-child {
  border-bottom: 1px solid rgba(15, 45, 75, 0.12);
}

.contact-accordion summary {
  cursor: pointer;
  color: #0f2d4b;
  font-weight: 700;
  list-style: none;
}

.contact-accordion summary::-webkit-details-marker {
  display: none;
}

.contact-accordion summary::after {
  content: "+";
  float: right;
  color: #b41e2d;
}

.contact-accordion details[open] summary::after {
  content: "–";
}

.contact-accordion p {
  margin: 14px 0 0;
  color: #526579;
}

/* =========================================================
   Responsive / Media Queries
========================================================= */

@media (max-width: 991px) {
  .contact-location-wrapper {
    padding: 0 20px 64px;
  }

  .contact-location-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 24px;
  }

  .contact-map-card iframe {
    min-height: 380px;
  }
}

@media (max-width: 575px) {
  .contact-location-wrapper {
    padding: 0 16px 48px;
  }

  .contact-location-grid {
    padding: 26px 20px;
    border-radius: 14px;
  }

  .contact-map-card iframe {
    min-height: 320px;
  }
}

/* =========================================================
   15. KARRIERE
   Karriereübersicht, Stellenausschreibungen und Praktikum
========================================================= */

/* ---------------------------------------------------------
   15.1 KARRIEREKOMPONENTEN
   Überschattete Zwischenstände sind entfernt; Karriereübersicht,
   Stellen und Praktikum behalten ihre eigenständigen Layouts.
--------------------------------------------------------- */

.career-page-wrapper {
  box-sizing: border-box;
}

.career-hero {
max-width: 1380px;
  display: grid;
  align-items: center;
}

.career-eyebrow {
display: inline-block;
}

.career-hero h1 {
color: #1E2F5C;
  font-weight: 700;
  margin: 0 0 28px;
}

.career-intro {
color: #1E2F5C;
  font-weight: 600;
  margin: 0 0 22px;
}

.career-text {
color: #4A5568;
  margin: 0 0 36px;
}

.career-buttons {
display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.career-hero-image img {
width: 100%;
  display: block;
  border: 1px solid rgba(30, 47, 92, 0.08);
}

.career-values {
max-width: 1380px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  box-shadow: 0 22px 60px rgba(30, 47, 92, 0.08);
}

.career-entry-grid {
max-width: 1380px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 575px) {
.career-page-wrapper {
padding: 42px 16px 60px;
}

.career-hero{
border-radius: 20px;
    padding: 30px 22px;
}

.career-buttons {
flex-direction: column;
}

.career-buttons .ml-btn{
text-align: center;
}

.career-hero-image img {
height: 240px;
    border-radius: 18px;
}
}

.internship-page-wrapper {
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.internship-facts {
  color: #ffffff;
}

.internship-fact:first-child {
padding-top: 0;
}

.internship-requirements-grid {
  margin-bottom: 34px;
}

.internship-application {
max-width: 1380px;
  margin: 0 auto;
}

.internship-application-content{
background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.08);
  border-radius: 28px;
  padding: 46px;
  box-shadow: 0 18px 50px rgba(30, 47, 92, 0.06);
}

.internship-application-content p{
color: #4A5568;
  margin: 0 0 28px;
}

.internship-email {
margin-top: 18px !important;
}

.internship-small-note {
margin-top: 28px !important;
}

@media (max-width: 991px) {

.internship-hero,
.internship-application {
grid-template-columns: 1fr;
    gap: 34px;
    padding: 42px 34px;
}

}

@media (max-width: 575px) {
.internship-page-wrapper {
padding: 42px 16px 60px;
}

.internship-hero,
.internship-application-content {
border-radius: 20px;
    padding: 30px 22px;
}

.internship-facts {
border-radius: 20px;
    padding: 28px 22px;
}
}

.jobs-page-wrapper {
  box-sizing: border-box;
}

.jobs-current h2 {
color: #1E2F5C;
  margin: 0 0 30px;
}

.jobs-empty-state {
  color: #ffffff;
}

@media (max-width: 991px) {

.jobs-hero,
.jobs-empty-state{
padding: 42px 34px;
}

}

@media (max-width: 575px) {
.jobs-page-wrapper {
padding: 42px 16px 60px;
}

.jobs-hero,
.jobs-empty-state {
border-radius: 20px;
    padding: 30px 22px;
}
}

.career-eyebrow,
.jobs-eyebrow,
.internship-eyebrow {
  font-weight: 800 !important;
}

.career-page-wrapper {
width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 72px 0 90px !important;

  background: #f5f8fc !important;
}

.career-hero,
.career-values,
.career-entry-grid {
width: min(1480px, 90vw) !important;
  max-width: none !important;
}

.career-hero {
margin: 0 auto 54px !important;

  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.9fr) !important;
  gap: 72px !important;

  padding: 62px 70px !important;

  background: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;

  box-shadow: 0 20px 56px rgba(30, 47, 92, 0.07) !important;
}

.career-eyebrow {
color: #F04A3A !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
}

.career-hero-image img {
height: 430px !important;
  border-radius: 22px !important;
  object-fit: cover !important;
}

.career-values {
margin: 0 auto 54px !important;

  padding: 46px !important;

  background:
    radial-gradient(
      circle at 96% 0%,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.00) 38%
    ),
    linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;

  border-radius: 28px !important;
}

.career-entry-grid {
margin: 0 auto !important;
  gap: 34px !important;
}

@media (max-width: 991px) {
.career-page-wrapper {
padding: 54px 0 76px !important;
}

.career-hero,
.career-values,
.career-entry-grid {
width: calc(100vw - 44px) !important;
}

.career-hero {
grid-template-columns: 1fr !important;
    gap: 38px !important;
    padding: 42px 34px !important;
}

.career-values {
grid-template-columns: 1fr !important;
    padding: 34px 28px !important;
}

.career-entry-grid {
grid-template-columns: 1fr !important;
}

.career-hero-image img {
height: 320px !important;
}
}

body.view-article #sp-main-body > .container:has(.career-page-wrapper),
body.view-article #sp-main-body > .container:has(.career-page-wrapper) > .container-inner {
width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.view-article #sp-main-body .row:has(.career-page-wrapper),
body.view-article #sp-main-body .sp-column:has(.career-page-wrapper),
body.view-article #sp-main-body #sp-component:has(.career-page-wrapper) {
width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.view-article .career-page-wrapper {
width: 100vw !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

.jobs-page-wrapper {

  padding: 72px 0 90px !important;
}

.jobs-hero,
.jobs-current,
.jobs-info-grid {
  margin-left: auto !important;
  margin-right: auto !important;
}

.jobs-hero {
margin-bottom: 54px !important;

  background: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;

  box-shadow: 0 20px 56px rgba(30, 47, 92, 0.07) !important;
}

.jobs-eyebrow {
display: block !important;

  color: #F04A3A !important;
  font-weight: 800 !important;

  margin-bottom: 18px !important;
}

/* Der im Artikel gesetzte weiche Trennstrich nach "Stellenaus"
   hat Vorrang vor der automatischen, oft zu spaeten Trennung. */
body #sp-main-body .jobs-hero h1 {
margin: 0 0 24px !important;

  color: #1E2F5C !important;
  font-weight: 800 !important;
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}

.jobs-intro {
max-width: 720px !important;

  color: #334155 !important;

  margin: 0 !important;
}

.jobs-current {
margin-bottom: 54px !important;
}

.jobs-current > h2 {
margin: 0 0 28px !important;

  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.jobs-empty-state {

  background:
    radial-gradient(
      circle at 96% 0%,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.00) 38%
    ),
    linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;

  border-radius: 26px !important;
  box-shadow: 0 24px 62px rgba(30, 47, 92, 0.16) !important;
}

.jobs-empty-state h3 {
max-width: 900px !important;

  color: #ffffff !important;
  font-weight: 800 !important;

  margin: 0 0 28px !important;
}

.jobs-empty-state p {
max-width: 760px !important;

  color: rgba(255,255,255,0.88) !important;

  margin: 0 0 18px !important;
}

.jobs-empty-state .ml-btn {
margin-top: 18px !important;
}

.jobs-info-grid {
display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

.jobs-info-card a {
color: #2D2AA8 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

@media (max-width: 991px) {
.jobs-page-wrapper {
padding: 54px 0 76px !important;
}

.jobs-hero,
.jobs-current,
.jobs-info-grid {
width: calc(100vw - 44px) !important;
}

.jobs-hero {
padding: 42px 34px !important;
}

.jobs-empty-state {
padding: 42px 34px !important;
}

.jobs-info-grid {
grid-template-columns: 1fr !important;
}

}

body.view-article #sp-main-body > .container:has(.jobs-page-wrapper),
body.view-article #sp-main-body > .container:has(.jobs-page-wrapper) > .container-inner {
width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.view-article #sp-main-body .row:has(.jobs-page-wrapper),
body.view-article #sp-main-body .sp-column:has(.jobs-page-wrapper),
body.view-article #sp-main-body #sp-component:has(.jobs-page-wrapper) {
width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.jobs-page-wrapper {
width: 100vw !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: #f5f8fc !important;
}

.jobs-hero,
.jobs-current,
.jobs-info-grid {
width: min(1480px, 90vw) !important;
  max-width: none !important;
}

.jobs-hero {
padding: 56px 64px !important;
}

.jobs-info-card a,
.jobs-info-card strong {
font-weight: 700;
}

.jobs-empty-state {
padding: 42px 48px !important;
}

.jobs-empty-state {
max-width: 1200px;
}

body.view-article #sp-main-body > .container:has(.internship-page-wrapper),
body.view-article #sp-main-body > .container:has(.internship-page-wrapper) > .container-inner {
width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.view-article #sp-main-body .row:has(.internship-page-wrapper),
body.view-article #sp-main-body .sp-column:has(.internship-page-wrapper),
body.view-article #sp-main-body #sp-component:has(.internship-page-wrapper) {
width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.internship-page-wrapper {
width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 72px 0 90px !important;
  background: #f5f8fc !important;
}

.internship-hero,
.internship-requirements,
.internship-application {
width: min(1480px, 90vw) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.internship-hero {
margin-bottom: 54px !important;
  padding: 62px 70px !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.75fr) !important;
  gap: 76px !important;
  align-items: center !important;

  background: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;
  box-shadow: 0 20px 56px rgba(30, 47, 92, 0.07) !important;
}

.internship-eyebrow {
display: block !important;
  color: #F04A3A !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
}

.internship-hero h1 {
margin: 0 0 28px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.internship-intro {
max-width: 760px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
  margin: 0 0 24px !important;
}

.internship-text {
max-width: 760px !important;
  color: #334155 !important;
  margin: 0 !important;
}

.internship-facts {
padding: 38px 42px !important;
  border-radius: 26px !important;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.00) 40%
    ),
    linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%) !important;

  box-shadow: 0 20px 52px rgba(30, 47, 92, 0.16) !important;
}

.internship-fact {
padding: 0 0 24px !important;
  margin: 0 0 24px !important;
  border-bottom: 1px solid rgba(255,255,255,0.20) !important;
}

.internship-fact:last-child {
margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.internship-fact strong {
display: block !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.internship-fact span {
display: block !important;
  color: rgba(255,255,255,0.88) !important;
}

.internship-requirements {
margin-bottom: 54px !important;
}

.internship-requirements h2 {
margin: 0 0 32px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.internship-requirements-grid {
display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 34px !important;
}

.internship-note {
margin: 34px 0 0 !important;
  padding: 24px 30px !important;

  background: #ffffff !important;
  border-left: 4px solid #F04A3A !important;
  border-radius: 16px !important;

  color: #334155 !important;

  box-shadow: 0 10px 30px rgba(30, 47, 92, 0.045) !important;
}

.internship-application {
padding: 54px 60px !important;
  background: #ffffff !important;
  border-radius: 28px !important;
  border: 1px solid rgba(30, 47, 92, 0.08) !important;
  box-shadow: 0 20px 56px rgba(30, 47, 92, 0.07) !important;
}

.internship-application-content h2 {
margin: 0 0 22px !important;
  color: #1E2F5C !important;
  font-weight: 800 !important;
}

.internship-application-content > p:not(.internship-email):not(.internship-small-note) {
color: #334155 !important;
  margin: 0 0 26px !important;
}

.internship-email {
color: #2D2AA8 !important;
  font-weight: 800 !important;
  margin: 22px 0 28px !important;
}

.internship-small-note {
padding-top: 24px !important;
  border-top: 1px solid rgba(30, 47, 92, 0.10) !important;

  color: #64748B !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
.internship-page-wrapper {
padding: 54px 0 76px !important;
}

.internship-hero,
.internship-requirements,
.internship-application {
width: calc(100vw - 44px) !important;
}

.internship-hero {
grid-template-columns: 1fr !important;
    padding: 42px 34px !important;
    gap: 38px !important;
}

.internship-requirements-grid {
grid-template-columns: 1fr !important;
}

.internship-application {
padding: 42px 34px !important;
}
}

/* =========================================================
   16. WEITERE LEISTUNGSBEREICHE
   Wasserhygiene, Endotoxinanalytik, Luftanalytik, Auftragsforschung
========================================================= */

/* ---------------------------------------------------------
   16.1 WASSERHYGIENE
   Bereinigter Endzustand mit erhaltenen Seiten- und Leistungsvarianten.
--------------------------------------------------------- */

/* =========================================================
   Leistungsbereich Wasserhygiene
========================================================= */

.water-service-page {
  color: #1E2F5C;
}

.water-hero-inner,
.water-content-inner,
.water-cta-inner {
  margin: 0 auto;
}

.water-eyebrow {
  margin: 0 0 14px;
  color: #F04A3A;
  font-weight: 800;
  text-transform: uppercase;
}

.water-content-section {
  background: #ffffff;
}

.water-content-soft {
  border-top: 1px solid rgba(30, 47, 92, 0.06);
  border-bottom: 1px solid rgba(30, 47, 92, 0.06);
}

.water-intro-grid {
  display: grid;
}

.water-intro-text {
  min-width: 0;
}

.water-intro-text h2 {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.water-intro-text h2,
.water-section-heading h2,
.water-process-section h2,
.water-cta h2 {
  margin: 0 0 22px;
  color: #1E2F5C;
  font-weight: 750;
}

.water-intro-text p,
.water-section-heading p,
.water-process-section p,
.water-cta p {
  max-width: 860px;
  margin: 0 0 18px;
  color: #4A5568;
}

.water-facts-card div {
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.water-facts-card strong {
  font-weight: 800;
}

.water-facts-card span {
  font-weight: 700;
}

.water-area-grid {
  display: grid;
}

.water-process-section {
  display: grid;
  align-items: start;
}

.water-process-grid {
  display: grid;
}

.water-process-grid div {
  background: #F8FBFD;
  border: 1px solid rgba(30, 47, 92, 0.08);
  border-radius: 20px;
}

.water-process-grid span {
  display: inline-block;
  color: #F04A3A;
  font-weight: 800;
}

.water-process-grid h3 {
  margin: 0 0 12px;
  color: #1E2F5C;
}

.water-process-grid p {
  margin: 0;
  color: #4A5568;
}

.water-cta-inner {
  gap: 48px;
}

.water-cta span {
  display: inline-block;
  margin-bottom: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.water-cta p {
  margin-bottom: 0;
}

/* =========================================================
   Responsive Wasserhygiene
========================================================= */

@media (max-width: 991px) {
  .water-process-section {
    gap: 36px;
  }

  .water-cta-inner {
    flex-direction: column;
  }
}

@media (max-width: 767px) {

  .water-process-grid {
    grid-template-columns: 1fr;
  }

  .water-cta-inner {
    padding: 34px 24px;
    border-radius: 22px;
  }
}

/* =========================================================
   Wasserhygiene – Layout-Korrektur & kompaktere Darstellung
   unter bestehenden Wasserhygiene-CSS setzen
========================================================= */

/* Full-Width-Regeln für Seiten mit linker Navigation zurücknehmen */
.water-hero,
.water-content-section,
.water-cta {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Inhaltsbreite etwas kompakter und sauber innerhalb des Contentbereichs */

/* Hero kompakter */
.water-hero {
  background: linear-gradient(135deg, #F3F7FA 0%, #ffffff 100%);
}

.water-hero h1 {
  margin-bottom: 18px;
}

/* Abschnitte weniger hoch */
.water-content-section {
  padding: 52px 0 !important;
}

.water-content-soft {
  background: #F8FBFD;
}

/* Intro-Bereich kompakter */

.water-intro-text h2,
.water-section-heading h2,
.water-process-section h2,
.water-cta h2 {
  margin-bottom: 18px;
}

.water-intro-text p,
.water-section-heading p,
.water-process-section p,
.water-cta p {
  margin-bottom: 14px;
}

/* Faktenbox etwas kleiner */

/* Bereichskarten kompakter */
.water-section-heading {
  margin-bottom: 32px;
}

.water-area-card-large {
  min-height: 185px;
}

/* Ablaufbereich kompakter und ausgewogener */

.water-process-grid {
  gap: 16px;
}

.water-process-grid div {
  padding: 22px;
}

.water-process-grid span {
  margin-bottom: 12px;
}

.water-process-grid h3 {
  margin-bottom: 8px;
}

/* CTA stärker abheben: dunkelblau wie Corporate-Bereich */
.water-cta {
  padding: 52px 0 64px !important;
  background: #F8FBFD;
}

.water-cta-inner {
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  color: #ffffff;
  border: none;
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(30, 47, 92, 0.16);
}

.water-cta span {
  color: rgba(255,255,255,0.78);
}

.water-cta h2 {
  color: #ffffff;
}

.water-cta p {
  color: rgba(255,255,255,0.86);
}

.water-cta .ml-btn {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .water-process-section {
    grid-template-columns: 1fr;
  }

  .water-cta-inner {
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .water-hero {
    padding: 54px 0 56px !important;
  }

  .water-content-section {
    padding: 44px 0 !important;
  }

  .water-hero-inner,
  .water-content-inner,
  .water-cta-inner {
    width: min(100% - 36px, 1080px);
  }
}

/* =========================================================
   Wasserhygiene – Feinschliff Layout, Navigation, CTA
   ganz unten in custom.css einfügen
========================================================= */

/* Content stärker in die verfügbare Breite ziehen */

/* Hero-Inhalt nicht zu schmal wirken lassen */
.water-hero-inner {
  max-width: 1280px;
}

/* Intro breiter und ausgewogener */
.water-intro-grid {
  align-items: start;
}

/* Faktenbox reparieren: keine überlappenden Wörter */

.water-facts-card strong {
  display: block;
}

.water-facts-card span {
  display: block;
}

/* Hauptüberschriften etwas ruhiger */

/* Kartenbereich breiter nutzen */

/* Ablaufbereich breiter und weniger mittig-kleinteilig */

/* CTA kompakter, seriöser, Button rot */
.water-cta-inner {
  padding: 38px 46px !important;
}

.water-cta h2 {
  margin-bottom: 14px !important;
}

/* Responsive */

@media (max-width: 991px) {
  .water-hero-inner,
  .water-content-inner,
  .water-cta-inner {
    width: min(100% - 44px, 1280px) !important;
  }

  .water-intro-text {
    max-width: none;
  }

  .water-area-grid {
    grid-template-columns: 1fr;
  }

  .water-area-card-large {
    grid-column: auto;
  }
}

/* =========================================================
   Wasserhygiene – Content breiter ausrichten
   GANZ UNTEN in custom.css einfügen
========================================================= */

/* Content nicht mehr so schmal zentrieren */
.water-hero-inner,
.water-content-inner,
.water-cta-inner {
  width: auto !important;
  max-width: none !important;
  margin-left: 72px !important;
  margin-right: 72px !important;
}

/* Hero-Text weiter links im Inhaltsbereich und breiter */
.water-hero-inner {
  padding-right: 80px;
}

/* Erste Inhaltssektion breiter nutzen */

.water-intro-text {
  max-width: 860px !important;
}

/* Bereichskarten deutlich breiter */
.water-section-heading {
  max-width: 960px !important;
}

.water-area-grid {
  width: 100%;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

.water-area-card-large {
  grid-column: span 2;
}

/* Ablaufbereich ebenfalls breiter nutzen */
.water-process-section {
  grid-template-columns: minmax(0, 0.9fr) minmax(620px, 1.25fr) !important;
  gap: 90px !important;
}

.water-process-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
}

/* CTA nicht mehr schmal zentriert */
.water-cta-inner {
  max-width: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.water-cta h2 {
  max-width: 760px !important;
}

.water-cta p {
  max-width: 820px !important;
}

/* Bei sehr breiten Bildschirmen nicht komplett ausufern lassen */
@media (min-width: 1700px) {
  .water-hero-inner,
  .water-content-inner,
  .water-cta-inner {
    margin-left: 96px !important;
    margin-right: 120px !important;
  }
}

/* Tablet / kleinere Screens */
@media (max-width: 1200px) {
  .water-hero-inner,
  .water-content-inner,
  .water-cta-inner {
    margin-left: 44px !important;
    margin-right: 44px !important;
  }

  .water-process-section {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .water-hero-inner,
  .water-content-inner,
  .water-cta-inner {
    margin-left: 22px !important;
    margin-right: 22px !important;
  }

  .water-area-grid {
    grid-template-columns: 1fr !important;
  }

  .water-area-card-large {
    grid-column: auto;
  }
}

/* =========================================================
   Wasserhygiene – Faktenbox breiter / zweispaltig
========================================================= */

.water-intro-grid {
  grid-template-columns: minmax(0, 1fr) 520px !important;
  gap: 80px !important;
}

.water-facts-card {
  max-width: 520px !important;
  width: 520px !important;
}

.water-facts-card div {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start;
  padding: 22px 26px !important;
}

.water-facts-card strong {
  margin-bottom: 0 !important;
  white-space: normal;
}

.water-facts-card span {
  min-width: 0;
}

/* Falls der Contentbereich auf kleineren Screens enger wird */
@media (max-width: 1200px) {
  .water-intro-grid {
    grid-template-columns: minmax(0, 1fr) 440px !important;
    gap: 48px !important;
  }

  .water-facts-card {
    max-width: 440px !important;
    width: 440px !important;
  }

  .water-facts-card div {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }
}

/* Faktenboxen auf schmaleren Wasserlayouts vor den Text setzen. */
@media (max-width: 1549px) {
  .water-overview-page .water-intro-grid,
  .water-drinkingwater-page .water-intro-grid,
  .water-sampling-page .water-intro-grid,
  .water-legionella-page .water-intro-grid,
  .water-trinkwv-page .water-intro-grid,
  .water-dialysis-page .water-intro-grid,
  .water-dental-page .water-intro-grid,
  .water-process-page .water-intro-grid,
  .water-individual-page .water-intro-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
  }

  .water-overview-page .water-facts-card,
  .water-drinkingwater-page .water-facts-card,
  .water-sampling-page .water-facts-card,
  .water-legionella-page .water-facts-card,
  .water-trinkwv-page .water-facts-card,
  .water-dialysis-page .water-facts-card,
  .water-dental-page .water-facts-card,
  .water-process-page .water-facts-card,
  .water-individual-page .water-facts-card {
    order: -1;
    width: 100% !important;
    max-width: 900px !important;
    justify-self: start;
  }
}

@media (max-width: 991px) {
  .water-intro-grid {
    grid-template-columns: 1fr !important;
  }

  .water-facts-card {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .water-facts-card div {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* =========================================================
   Wasserhygiene – Hero mit Hintergrundbild
========================================================= */

/* =========================================================
   Wasserhygiene – Hero mit stärker sichtbarem Hintergrundbild
========================================================= */

.water-hero {
  position: relative;
  padding: 78px 0 82px !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
  overflow: hidden;

  background-image:
    linear-gradient(
      90deg,
      rgba(243, 247, 250, 0.96) 0%,
      rgba(243, 247, 250, 0.82) 18%,
      rgba(243, 247, 250, 0.46) 39%,
      rgba(243, 247, 250, 0.12) 60%,
      rgba(243, 247, 250, 0.00) 100%
    ),
    url("/images/wasserhygiene/wasserhygiene-hero.png");

  background-size: cover;
  background-position: 62% center;
  background-repeat: no-repeat;
}

.water-hero-inner {
  position: relative;
  z-index: 2;
}

.water-hero h1 {
  margin: 0 0 20px;
  color: #1E2F5C;
  font-weight: 800;
}

.water-hero p {
  max-width: 760px !important;
  margin: 0;
  color: #1E2F5C;
}

/* =========================================================
   Wasserhygiene – Trinkwasserhygiene Kategorieseite
========================================================= */

.water-area-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.water-info-block {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 70px;
  align-items: start;
}

.water-info-block h2 {
  margin: 0;
  color: #1E2F5C;
  font-weight: 750;
}

.water-parameter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.water-parameter-grid > div {
  background: #F8FBFD;
  border: 1px solid rgba(30, 47, 92, 0.08);
  border-radius: 20px;
  padding: 26px;
}

.water-parameter-grid h3 {
  margin: 0 0 12px;
  color: #1E2F5C;
}

.water-parameter-grid p {
  margin: 0;
  color: #4A5568;
}

.water-faq-column {
  max-width: 980px;
}

.water-faq-column h2 {
  margin: 0 0 28px;
  color: #1E2F5C;
  font-weight: 750;
}

.water-faq {
  background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
}

.water-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  color: #1E2F5C;
  font-weight: 750;
}

.water-faq summary::-webkit-details-marker {
  display: none;
}

.water-faq summary::after {
  content: "+";
  float: right;
  color: #2D2AA8;
  font-weight: 600;
}

.water-faq[open] summary::after {
  content: "–";
}

.water-faq p {
  margin: 0;
  padding: 0 24px 22px;
  color: #4A5568;
}

/* Aktiver Navigationspunkt für Trinkwasserhygiene */

@media (max-width: 1200px) {
  .water-area-grid-three {
    grid-template-columns: 1fr !important;
  }

  .water-info-block {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 767px) {
  .water-parameter-grid {
    grid-template-columns: 1fr;
  }

  .water-faq summary {
    padding: 18px 20px;
  }

  .water-faq p {
    padding: 0 20px 20px;
  }
}

.water-area-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 991px) {
  .water-area-grid-two {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Wasserhygiene – hochwertiger kompakter Panel-Abschnitt
========================================================= */

.water-service-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 64px;
  align-items: start;
  background: #ffffff;
  border: 1px solid rgba(30, 47, 92, 0.09);
  border-radius: 28px;
  padding: 46px;
  box-shadow: 0 16px 42px rgba(30, 47, 92, 0.06);
}

.water-service-panel-main h2 {
  max-width: 820px;
  margin: 0 0 20px;
  color: #1E2F5C;
  font-weight: 780;
}

.water-service-panel-main p {
  max-width: 860px;
  margin: 0 0 16px;
  color: #4A5568;
}

@media (max-width: 1200px) {
  .water-service-panel {
    grid-template-columns: 1fr;
    gap: 34px;
  }

}

@media (max-width: 767px) {
  .water-service-panel {
    padding: 30px 24px;
    border-radius: 22px;
  }
}

/* =========================================================
   Wasserhygiene – Probenahme: sauberer Mittelteil
========================================================= */

.water-service-panel-clean .water-service-panel-main h2 {
  max-width: 860px;
}

.water-service-situation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.water-service-situation-grid > div {
  min-width: 0;
  background: #F8FBFD;
  border: 1px solid rgba(30, 47, 92, 0.09);
  border-radius: 18px;
}

.water-service-situation-grid span {
  display: block;
  min-width: 0;
  margin-bottom: 10px;
  color: #F04A3A;
  font-weight: 800;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.water-service-situation-grid h3 {
  min-width: 0;
  margin: 0 0 10px;
  color: #1E2F5C;
  font-weight: 780;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.water-service-situation-grid p {
  min-width: 0;
  margin: 0;
  color: #4A5568;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Verwandte Leistungen schöner und ruhiger */

.water-next-pages-heading {
  margin-bottom: 22px;
}

.water-next-pages-heading h2 {
  margin: 0;
  color: #1E2F5C;
  font-weight: 780;
}

.water-next-pages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.water-next-pages-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--ml-area-card-min-height);
  padding: var(--ml-area-card-padding);
  background: #ffffff;
  border: var(--ml-area-card-border);
  border-radius: var(--ml-area-card-radius);
  text-decoration: none !important;
  box-shadow: var(--ml-area-card-shadow);
  overflow: hidden;
  transition: var(--ml-card-transition);
}

.water-next-pages-grid a::before {
  content: none !important;
  display: none !important;
}

.water-next-pages-grid a:hover {
  transform: var(--ml-card-hover-transform);
  border-color: var(--ml-area-card-border-hover);
  box-shadow: var(--ml-area-card-shadow-hover);
}

.water-next-pages-grid a > span:not(.ml-card__eyebrow),
.water-next-pages-grid a > h3,
.water-next-pages-grid a > .ml-card__title {
  display: block;
  margin-bottom: 12px;
  color: #1E2F5C;
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 750;
}

.water-next-pages-grid a > .ml-card__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  letter-spacing: var(--ml-letter-uppercase);
  font-weight: 800;
  text-transform: uppercase;
}

.water-next-pages-grid p {
  margin: 0 0 20px;
  color: #4A5568;
}

.water-next-pages-grid em {
  margin-top: auto;
  color: #2D2AA8;
  font-style: normal;
  font-weight: 700;
}

/* Alte kompakte verwandte-Leistungen-Varianten neutralisieren, falls noch vorhanden */

@media (max-width: 1200px) {
  .water-service-situation-grid,
  .water-next-pages-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .water-service-panel-clean {
    padding: 30px 24px !important;
  }
}

/* =========================================================
   Wasserhygiene – Probenahme-Panel kompakter mit Infoboxen rechts
========================================================= */

.water-service-panel-clean {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 430px !important;
  gap: 64px !important;
  align-items: start;
  padding: 44px 46px !important;
}

.water-service-panel-clean .water-service-panel-main {
  max-width: 860px;
}

.water-service-panel-clean .water-service-situation-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  margin-top: 0 !important;
}

.water-service-situation-grid > div {
  padding: 20px 22px !important;
}

.water-service-situation-grid h3 {
  margin-bottom: 8px !important;
}

/* Verwandte Leistungen etwas näher an das Panel ziehen */
.water-next-pages {
  margin-top: 30px !important;
}

@media (max-width: 1200px) {
  .water-service-panel-clean {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .water-service-panel-clean .water-service-situation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991px) {
  .water-service-panel-clean .water-service-situation-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Wasserhygiene – Probenahme Feinschliff Lesbarkeit
========================================================= */

/* Fließtexte allgemein etwas größer und lesbarer */

/* Faktenbox oben etwas kräftiger */

/* Mittleres Panel: rechte Infobox-Spalte breiter */
.water-sampling-page .water-service-panel-clean {
  grid-template-columns: minmax(0, 1fr) 500px !important;
  gap: 56px !important;
}

/* Infoboxen rechts besser lesbar */
.water-sampling-page .water-service-situation-grid > div {
  padding: 24px 26px !important;
}

/* Verwandte Leistungen unten: Text etwas größer und Karten ruhiger */
.water-sampling-page .water-next-pages-grid a {
  min-height: var(--ml-area-card-min-height);
  padding: var(--ml-area-card-padding) !important;
}

/* CTA unten: Text ebenfalls etwas größer, aber nicht wuchtiger */

.water-sampling-page .water-cta p {
  max-width: 760px !important;
}

/* Wasser-Verfahrensseiten: erst ab 1550 px zweispaltig. */
@media (max-width: 1549px) {
  .water-sampling-page .water-service-panel-clean,
  .water-legionella-page .water-service-panel-clean,
  .water-trinkwv-page .water-service-panel-clean,
  .water-dialysis-page .water-service-panel-clean,
  .water-dental-page .water-service-panel-clean,
  .water-process-page .water-service-panel-clean,
  .water-individual-page .water-service-panel-clean {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }
}

/* Kleine und mittlere Desktops: zwei lesbare Karten statt drei schmaler Spalten. */
@media (min-width: 992px) and (max-width: 1549px) {
  .water-sampling-page .water-service-panel-clean .water-service-situation-grid,
  .water-legionella-page .water-service-panel-clean .water-service-situation-grid,
  .water-trinkwv-page .water-service-panel-clean .water-service-situation-grid,
  .water-dialysis-page .water-service-panel-clean .water-service-situation-grid,
  .water-dental-page .water-service-panel-clean .water-service-situation-grid,
  .water-process-page .water-service-panel-clean .water-service-situation-grid,
  .water-individual-page .water-service-panel-clean .water-service-situation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .water-sampling-page .water-service-situation-grid > :last-child:nth-child(odd),
  .water-legionella-page .water-service-situation-grid > :last-child:nth-child(odd),
  .water-trinkwv-page .water-service-situation-grid > :last-child:nth-child(odd),
  .water-dialysis-page .water-service-situation-grid > :last-child:nth-child(odd),
  .water-dental-page .water-service-situation-grid > :last-child:nth-child(odd),
  .water-process-page .water-service-situation-grid > :last-child:nth-child(odd),
  .water-individual-page .water-service-situation-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Wasserhygiene – rechte Infoboxen in Service-Panels breiter
========================================================= */

@media (min-width: 1201px) {
  .water-service-panel-clean {
    grid-template-columns: minmax(0, 1fr) 560px !important;
    gap: 54px !important;
  }

  .water-service-situation-grid > div {
    padding: 24px 28px !important;
  }
}

/* =========================================================
   Wasserhygiene – CTA Box Textbereich breiter
========================================================= */

@media (min-width: 992px) {
  .water-cta-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 56px !important;
    align-items: center !important;
  }

  .water-cta-inner > div {
    max-width: none !important;
    width: 100% !important;
  }

  .water-cta-inner h2 {
    max-width: 980px !important;
  }

  .water-cta-inner p {
    max-width: 900px !important;
  }

  .water-cta-inner .ml-btn {
    justify-self: end !important;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------
   16.2 ENDOTOXINANALYTIK
   Bereinigter Endzustand mit erhaltenen Seiten- und Leistungsvarianten.
--------------------------------------------------------- */

/* =========================================================
   Leistungsbereich Endotoxine – Seitenlayout
========================================================= */

.endo-page {
  color: #1E2F5C;
}

.endo-hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  display: flex;
  align-items: center;
  background:
    linear-gradient(
      90deg,
      rgba(248,251,253,0.98) 0%,
      rgba(248,251,253,0.94) 34%,
      rgba(248,251,253,0.72) 52%,
      rgba(248,251,253,0.20) 72%,
      rgba(248,251,253,0.02) 100%
    );
  border-bottom: 1px solid rgba(30,47,92,0.08);
}

.endo-hero-inner {
  width: min(1440px, 86vw);
  margin: 0 auto;
  padding: 56px 0;
}

.endo-eyebrow {
  margin: 0 0 12px;
  color: #1E2F5C;
  font-weight: 850;
  text-transform: uppercase;
}

.endo-hero h1 {
  margin: 0 0 20px;
  color: #1E2F5C;
  font-weight: 820;
}

.endo-hero p:not(.endo-eyebrow) {
  max-width: 760px;
  margin: 0;
  color: #1E2F5C;
  font-weight: 520;
}

.endo-content-section {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 58px 0;
  background: #ffffff;
}

.endo-content-soft {
  background: #F4F8FB;
}

.endo-content-inner {
  width: min(1440px, 86vw);
  margin: 0 auto;
}

.endo-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 78px;
  align-items: center;
}

.endo-intro-text h2,
.endo-section-heading h2,
.endo-service-panel-main h2 {
  margin: 0 0 22px;
  color: #1E2F5C;
  font-weight: 800;
}

.endo-intro-text p,
.endo-section-heading p,
.endo-service-panel-main p {
  max-width: 900px;
  margin: 0 0 16px;
  color: #4A5568;
}

.endo-facts-card div {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(30,47,92,0.08);
}

.endo-facts-card strong {
  font-weight: 850;
}

.endo-facts-card span {
  font-weight: 750;
}

.endo-section-heading {
  max-width: 900px;
}

.endo-area-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.endo-service-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 54px;
  align-items: start;
  background: #ffffff;
  border: 1px solid rgba(30,47,92,0.09);
  border-radius: 28px;
  padding: 46px;
  box-shadow: 0 16px 42px rgba(30,47,92,0.06);
}

.endo-service-info-grid {
  display: grid;
  gap: 14px;
}

.endo-service-info-grid > div {
  background: #F8FBFD;
  border: 1px solid rgba(30,47,92,0.09);
  border-radius: 18px;
  padding: 24px 28px;
}

.endo-service-info-grid span {
  display: block;
  margin-bottom: 10px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.endo-service-info-grid h3 {
  margin: 0 0 10px;
  color: #1E2F5C;
  font-weight: 800;
}

.endo-service-info-grid p {
  margin: 0;
  color: #4A5568;
}

.endo-cta {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 42px 0 74px;
  background: #F4F8FB;
}

.endo-cta-inner {
  width: min(1440px, 86vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 42px 52px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 24px;
  color: #ffffff;
  box-shadow: 0 18px 46px rgba(30,47,92,0.16);
}

.endo-cta-inner span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.76);
  font-weight: 850;
  text-transform: uppercase;
}

.endo-cta-inner h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-weight: 800;
}

.endo-cta-inner p {
  max-width: 860px;
  margin: 0;
  color: rgba(255,255,255,0.88);
}

.endo-cta-inner .ml-btn {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1200px) {
  .endo-intro-grid,
  .endo-service-panel {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .endo-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {

  .endo-area-grid {
    grid-template-columns: 1fr;
  }

  .endo-facts-card div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .endo-service-panel,
  .endo-cta-inner {
    padding: 30px 24px;
    border-radius: 22px;
  }

  .endo-cta-inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Endotoxine – Content nicht über linkes Menü ausbrechen lassen
========================================================= */

.endo-hero,
.endo-content-section,
.endo-cta {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.endo-hero-inner,
.endo-content-inner,
.endo-cta-inner {
  width: min(1320px, calc(100% - 96px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 767px) {
  .endo-hero-inner,
  .endo-content-inner,
  .endo-cta-inner {
    width: min(100% - 36px, 100%) !important;
  }
}

/* =========================================================
   Endotoxine – kompakter Matrix-Hinweis
========================================================= */

.endo-matrix-note {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 28px;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid rgba(30,47,92,0.10);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(30,47,92,0.04);
}

.endo-matrix-note strong {
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.endo-matrix-note p {
  margin: 0;
  color: #4A5568;
}

@media (max-width: 767px) {
  .endo-matrix-note {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================
   Endotoxine – Content breiter und weniger zentriert
========================================================= */

@media (min-width: 1201px) {
  .endo-hero-inner,
  .endo-content-inner,
  .endo-cta-inner {
    width: auto !important;
    max-width: none !important;
    margin-left: 72px !important;
    margin-right: 72px !important;
  }

  .endo-intro-grid {
    grid-template-columns: minmax(0, 1fr) 460px !important;
    gap: 68px !important;
  }

  .endo-section-heading {
    max-width: 980px !important;
  }

  .endo-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }

  .endo-matrix-note {
    margin-top: 24px !important;
  }

  .endo-cta-inner {
    box-sizing: border-box;
  }
}

/* =========================================================
   Endotoxine – vertikale Abstände kompakter
========================================================= */

.endo-hero-inner {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

.endo-content-section {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

.endo-content-soft {
  padding-top: 44px !important;
  padding-bottom: 48px !important;
}

.endo-section-heading {
  margin-bottom: 28px !important;
}

.endo-cta {
  padding-top: 34px !important;
  padding-bottom: 58px !important;
}

/* =========================================================
   Endotoxine – Hero-Bild
========================================================= */

.endo-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(248, 251, 253, 0.98) 0%,
      rgba(248, 251, 253, 0.96) 28%,
      rgba(248, 251, 253, 0.82) 46%,
      rgba(248, 251, 253, 0.38) 68%,
      rgba(248, 251, 253, 0.08) 100%
    ),
    url("/images/hero/endotoxine-hero.png") !important;

  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  min-height: 300px !important;
}

.endo-hero-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .endo-hero {
    background-image:
      linear-gradient(
        90deg,
        rgba(248, 251, 253, 0.98) 0%,
        rgba(248, 251, 253, 0.94) 58%,
        rgba(248, 251, 253, 0.72) 100%
      ),
      url("/images/hero/endotoxine-hero.png") !important;

    background-position: center right !important;
    min-height: 260px !important;
  }
}

/* =========================================================
   Endotoxine – Faktenbox breiter
========================================================= */

@media (min-width: 1201px) {
  .endo-page .endo-intro-grid {
    grid-template-columns: minmax(0, 1fr) 540px !important;
    gap: 72px !important;
    align-items: center !important;
  }

  .endo-page .endo-facts-card {
    width: 100% !important;
    max-width: 540px !important;
    justify-self: end !important;
  }

  .endo-page .endo-facts-card div {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 20px 28px !important;
  }
}

/* =========================================================
   Endotoxine – Faktenbox bis 1549 px oberhalb des Textblocks
========================================================= */

@media (max-width: 1549px) {
  .endo-page .endo-intro-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
    align-items: start !important;
  }

  .endo-page .endo-facts-card {
    order: -1;
    width: 100% !important;
    max-width: 900px !important;
    justify-self: start !important;
  }
}

/* =========================================================
   Endotoxin-Unterseiten – Service-Cards unter dem Textblock
========================================================= */

@media (max-width: 1549px) {
  .endo-solids-page .endo-service-panel,
  .endo-liquids-page .endo-service-panel,
  .endo-surfaces-page .endo-service-panel,
  .endo-individual-page .endo-service-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }
}

@media (min-width: 992px) and (max-width: 1549px) {
  .endo-solids-page .endo-service-info-grid,
  .endo-liquids-page .endo-service-info-grid,
  .endo-surfaces-page .endo-service-info-grid,
  .endo-individual-page .endo-service-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .endo-solids-page .endo-service-info-grid > :last-child:nth-child(odd),
  .endo-liquids-page .endo-service-info-grid > :last-child:nth-child(odd),
  .endo-surfaces-page .endo-service-info-grid > :last-child:nth-child(odd),
  .endo-individual-page .endo-service-info-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------
   16.3 LUFTANALYTIK UND BIOAEROSOLE
   Bereinigter Endzustand mit erhaltenen Seiten- und Leistungsvarianten.
--------------------------------------------------------- */

/* =========================================================
   Leistungsbereich Luftanalytik
========================================================= */

.air-page {
  color: #1E2F5C;
}

.air-hero,
.air-content-section,
.air-cta {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.air-hero {
  display: flex;
  align-items: center;
  background:
    linear-gradient(
      90deg,
      rgba(248,251,253,0.98) 0%,
      rgba(248,251,253,0.94) 45%,
      rgba(248,251,253,0.70) 100%
    );
  border-bottom: 1px solid rgba(30,47,92,0.08);
}

.air-hero-inner,
.air-content-inner,
.air-cta-inner {
  width: auto !important;
  max-width: none !important;
  margin-left: 56px !important;
  margin-right: 72px !important;
}

.air-hero-inner {
  padding: 48px 0;
}

.air-eyebrow {
  margin: 0 0 12px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.air-hero h1 {
  margin: 0 0 20px;
  color: #1E2F5C;
  font-weight: 820;
}

.air-hero p:not(.air-eyebrow) {
  max-width: 780px;
  margin: 0;
  color: #1E2F5C;
  font-weight: 520;
}

.air-content-section {
  padding: 50px 0;
  background: #ffffff;
}

.air-content-soft {
  background: #F4F8FB;
}

.air-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 540px;
  gap: 72px;
  align-items: center;
}

.air-intro-text h2,
.air-section-heading h2 {
  margin: 0 0 22px;
  color: #1E2F5C;
  font-weight: 800;
}

.air-intro-text p,
.air-section-heading p {
  max-width: 900px;
  margin: 0 0 16px;
  color: #4A5568;
}

.air-facts-card div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(30,47,92,0.08);
}

.air-facts-card strong {
  font-weight: 850;
}

.air-facts-card span {
  font-weight: 750;
}

.air-section-heading {
  max-width: 980px;
  margin-bottom: 30px;
}

.air-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

div.air-area-card {
  min-height: 235px;
}

.air-note {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 28px;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid rgba(30,47,92,0.10);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(30,47,92,0.04);
}

.air-note strong {
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.air-note p {
  margin: 0;
  color: #4A5568;
}

.air-cta {
  padding: 36px 0 62px;
  background: #F4F8FB;
}

.air-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 42px 52px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 24px;
  color: #ffffff;
  box-shadow: 0 18px 46px rgba(30,47,92,0.16);
}

.air-cta-inner span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.76);
  font-weight: 850;
  text-transform: uppercase;
}

.air-cta-inner h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-weight: 800;
}

.air-cta-inner p {
  max-width: 860px;
  margin: 0;
  color: rgba(255,255,255,0.88);
}

.air-cta-inner .ml-btn {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1200px) {
  .air-intro-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .air-area-grid {
    grid-template-columns: 1fr;
  }

  .air-cta-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .air-hero-inner,
  .air-content-inner,
  .air-cta-inner {
    margin-left: 22px !important;
    margin-right: 22px !important;
  }

  .air-facts-card div,
  .air-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .air-cta-inner {
    padding: 30px 24px;
    border-radius: 22px;
  }
}

/* =========================================================
   Luftanalytik – Hero-Bild
========================================================= */

.air-hero {
  background-image:
    linear-gradient(
      90deg,
      rgba(248, 251, 253, 0.98) 0%,
      rgba(248, 251, 253, 0.94) 28%,
      rgba(248, 251, 253, 0.78) 46%,
      rgba(248, 251, 253, 0.36) 68%,
      rgba(248, 251, 253, 0.08) 100%
    ),
    url("/images/hero/luftanalytik-hero.png") !important;

  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  min-height: 300px !important;
}

.air-hero-inner {
  position: relative;
  z-index: 1;
}

/* Mobile: Bild ruhiger, Text besser lesbar */
@media (max-width: 767px) {
  .air-hero {
    background-image:
      linear-gradient(
        90deg,
        rgba(248, 251, 253, 0.98) 0%,
        rgba(248, 251, 253, 0.94) 58%,
        rgba(248, 251, 253, 0.72) 100%
      ),
      url("/images/hero/luftanalytik-hero.png") !important;

    background-position: center right !important;
    min-height: 260px !important;
  }
}

/* ==========================================
   Luftanalytik – breitere Faktenbox rechts
========================================== */

.air-page .air-intro-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 44px;
  align-items: start;
}

.air-page .air-facts-card{
  width: 100%;
  max-width: 440px;
}

.air-page .air-facts-card table{
  table-layout: fixed;
  width: 100%;
}

.air-page .air-facts-card td,
.air-page .air-facts-card th{
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}

/* optional: etwas mehr Luft innerhalb der Faktenbox */
.air-page .air-facts-card td,
.air-page .air-facts-card th{
  padding: 18px 22px;
}

/* Tablet */
@media (max-width: 1200px) {
  .air-page .air-intro-grid{
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 32px;
  }

  .air-page .air-facts-card{
    max-width: 400px;
  }
}

/* Mobile */
@media (max-width: 991px) {
  .air-page .air-intro-grid{
    grid-template-columns: 1fr;
  }

  .air-page .air-facts-card{
    max-width: 100%;
  }
}

/* =========================================================
   Luftanalytik – Faktenbox ausgewogen breiter
========================================================= */

@media (min-width: 1201px) {
  .air-page .air-intro-grid {
    grid-template-columns: minmax(0, 1fr) 560px !important;
    gap: 72px !important;
    align-items: start !important;
  }

  .air-page .air-facts-card {
    width: 100% !important;
    max-width: 560px !important;
    justify-self: end !important;
  }

  .air-page .air-facts-card div {
    grid-template-columns: 155px minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 18px 28px !important;
  }
}

/* =========================================================
   Luftanalytik – Faktenbox bis 1549 px oberhalb des Textblocks
========================================================= */

@media (max-width: 1549px) {
  .air-page .air-intro-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
    align-items: start !important;
  }

  .air-page .air-facts-card {
    order: -1;
    width: 100% !important;
    max-width: 900px !important;
    justify-self: start !important;
  }
}

/* =========================================================
   Luftanalytik – Bereichs-Cards unter 1440 px einspaltig
========================================================= */

@media (max-width: 1439px) {
  .air-page .air-area-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =========================================================
   Card-System – lange Titel sicher umbrechen
========================================================= */

body #sp-main-body .ml-card {
  min-width: 0;
}

body #sp-main-body .ml-card__title,
body #sp-main-body .ml-card h3 {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}

/* ---------------------------------------------------------
   16.4 AUFTRAGSFORSCHUNG
   Eigenständige Landingpage mit dem Präfix cr-.
--------------------------------------------------------- */

/* Joomla/Helix Container auf dieser Seite freigeben */
body:has(.contract-research-page) #sp-main-body,
body:has(.contract-research-page) #sp-main-body > .container,
body:has(.contract-research-page) #sp-main-body > .container-inner,
body:has(.contract-research-page) #sp-main-body .row,
body:has(.contract-research-page) #sp-component,
body:has(.contract-research-page) #sp-component .sp-column,
body:has(.contract-research-page) .item-page,
body:has(.contract-research-page) .article-details {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

body:has(.contract-research-page) #sp-component {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.contract-research-page {
  width: 100%;
  color: #1E2F5C;
  background: #ffffff;
  overflow: hidden;
}

.cr-hero,
.cr-section,
.cr-process-section,
.cr-cta-section{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.cr-inner {
  width: calc(100% - 96px);
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.cr-eyebrow {
  margin: 0 0 14px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

/* Hero */
.cr-hero {
  padding: 72px 0 76px;
  background:
    radial-gradient(circle at 92% 18%, rgba(45,42,168,0.12) 0%, rgba(45,42,168,0.04) 28%, transparent 52%),
    linear-gradient(135deg, #F4F8FB 0%, #ffffff 54%, #EEF4FA 100%);
  border-bottom: 1px solid rgba(30,47,92,0.08);
}

.cr-hero h1 {
  max-width: 980px;
  margin: 0 0 24px;
  color: #1E2F5C;
  font-weight: 850;
}

.cr-hero-text > p:not(.cr-eyebrow) {
  max-width: 900px;
  margin: 0;
  color: #1E2F5C;
  font-weight: 540;
}

/* Intro */
.cr-section {
  padding: 66px 0;
  background: #ffffff;
}

.cr-section-soft {
  background: #F4F8FB;
}

.cr-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 78px;
  align-items: start;
}

.cr-intro-text h2,
.cr-section-heading h2,
.cr-process-heading h2,
.cr-cta h2{
  margin: 0 0 22px;
  color: #1E2F5C;
  font-weight: 830;
}

.cr-intro-text p,
.cr-section-heading p,
.cr-process-heading p{
  max-width: 980px;
  margin: 0 0 16px;
  color: #4A5568;
}

.cr-situation-card {
  padding: 30px;
  background: #F4F8FB;
  border: 1px solid rgba(30,47,92,0.10);
  border-radius: 24px;
  box-shadow: 0 16px 44px rgba(30,47,92,0.06);
}

.cr-situation-card h3 {
  margin: 0 0 18px;
  color: #1E2F5C;
  font-weight: 830;
}

.cr-situation-card ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-situation-card li {
  position: relative;
  padding-left: 24px;
  color: #4A5568;
}

.cr-situation-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #F04A3A;
}

.cr-status-note {
  margin-top: 24px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid rgba(30,47,92,0.10);
  border-left: 4px solid #F04A3A;
  border-radius: 18px;
}

.cr-status-note strong {
  display: block;
  margin-bottom: 8px;
  color: #F04A3A;
  font-weight: 850;
  text-transform: uppercase;
}

.cr-status-note p {
  margin: 0;
  color: #4A5568;
}

/* Prozess */
.cr-process-section {
  padding: 72px 0;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  color: #ffffff;
}

.cr-process-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 76px;
  align-items: start;
}

.cr-process-heading h2,
.cr-process-heading p {
  color: #ffffff;
}

.cr-process-heading p {
  color: rgba(255,255,255,0.86);
}

.cr-process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Kompetenzkarten */
.cr-section-heading {
  max-width: 1080px;
  margin-bottom: 34px;
}

.cr-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* CTA */
.cr-cta-section {
  padding: 36px 0 72px;
  background: #F4F8FB;
}

.cr-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 44px 54px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 26px;
  color: #ffffff;
  box-shadow: 0 20px 54px rgba(30,47,92,0.17);
}

.cr-cta span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,0.76);
  font-weight: 850;
  text-transform: uppercase;
}

.cr-cta h2 {
  max-width: 900px;
  margin-bottom: 12px;
  color: #ffffff;
}

.cr-cta p {
  max-width: 860px;
  margin: 0;
  color: rgba(255,255,255,0.88);
}

.cr-cta .ml-btn {
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1200px) {
  .cr-inner {
    width: calc(100% - 72px);
  }

  .cr-intro-grid,
.cr-process-grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .cr-card-grid,
  .cr-process-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .cr-inner {
    width: calc(100% - 40px);
  }

  .cr-hero,
.cr-section,
.cr-process-section{
    padding: 48px 0;
  }

  .cr-card-grid,
  .cr-process-steps {
    grid-template-columns: 1fr;
  }

  .cr-cta{
    padding: 28px 24px;
    border-radius: 22px;
  }
}

/* =========================================================
   Auftragsforschung – Hero-Bild
========================================================= */

.contract-research-page .cr-hero.cr-hero-image {
  display: flex !important;
  align-items: center !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(248, 251, 253, 0.99) 0%,
      rgba(248, 251, 253, 0.97) 30%,
      rgba(248, 251, 253, 0.86) 50%,
      rgba(248, 251, 253, 0.44) 72%,
      rgba(248, 251, 253, 0.12) 100%
    ),
    url("/images/hero/auftragsforschung-hero.png") !important;

  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08) !important;
}

/* Hero-Text links gut lesbar halten */
.contract-research-page .cr-hero.cr-hero-image .cr-hero-text {
  max-width: 920px !important;
}

/* Mobile: Bild dezenter, Text klar lesbar */
@media (max-width: 767px) {
  .contract-research-page .cr-hero.cr-hero-image {
    min-height: auto !important;
    padding: 54px 0 !important;

    background-image:
      linear-gradient(
        90deg,
        rgba(248, 251, 253, 0.99) 0%,
        rgba(248, 251, 253, 0.96) 60%,
        rgba(248, 251, 253, 0.78) 100%
      ),
      url("/images/hero/auftragsforschung-hero.png") !important;

    background-position: center right !important;
  }
  }

/* =========================================================
   Auftragsforschung – Feinschliff Proportionen
========================================================= */

/* Hero etwas ruhiger */
.contract-research-page .cr-hero.cr-hero-image {
  min-height: 400px !important;
}

/* Rechte Situationsbox etwas kompakter */
.contract-research-page .cr-situation-card {
  padding: 28px !important;
}

/* Akkreditierungshinweis kompakter, aber sichtbar */
.contract-research-page .cr-status-note {
  margin-top: 22px !important;
  padding: 18px 20px !important;
}

/* Abschnittsabstände etwas ausgewogener */
.contract-research-page .cr-section {
  padding-top: 62px !important;
  padding-bottom: 62px !important;
}

.contract-research-page .cr-process-section {
  padding-top: 68px !important;
  padding-bottom: 68px !important;
}

/* =========================================================
   Auftragsforschung – Layout-Feinschliff
========================================================= */

/* Hero-Überschrift */
.contract-research-page .cr-hero.cr-hero-image h1 {
  max-width: 880px !important;
  margin-bottom: 24px !important;
}

/* Hero-Fließtext */
.contract-research-page .cr-hero.cr-hero-image .cr-hero-text > p:not(.cr-eyebrow) {
  max-width: 880px !important;
  font-weight: 620 !important;
}

/* Kompetenzkarten größer */

/* =========================================================
   Auftragsforschung – roter Hero-Text kleiner
========================================================= */

.contract-research-page .cr-hero .cr-eyebrow {
  margin-bottom: 16px !important;
}

/* =========================================================
   Auftragsforschung – kleine Abschnittsüberschriften angleichen
========================================================= */

/* Alle kleinen Überschriften über den H2/H1 einheitlich */
.contract-research-page .cr-eyebrow,
.contract-research-page .cr-hero .cr-eyebrow,
.contract-research-page .cr-section .cr-eyebrow,
.contract-research-page .cr-process-section .cr-eyebrow,
.contract-research-page .cr-cta-section .cr-eyebrow {
  font-weight: 850 !important;
  margin-bottom: 16px !important;
}

/* =========================================================
   Auftragsforschung – CTA Eyebrow angleichen
========================================================= */

.contract-research-page .cr-cta span {
  font-weight: 850 !important;
  margin-bottom: 16px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------
   16.5 MOLEKULARGENETISCHE IDENTIFIZIERUNG
   Bereinigter Endzustand mit erhaltenen Seiten- und Leistungsvarianten.
--------------------------------------------------------- */

/* =========================================================
Leistung: Molekulargenetische Identifizierung – final kompakt
========================================================= */

.id-page {
color: #102b46;
background: #ffffff;
}

/* Joomla/Helix-Container für diese Seite auf volle Breite ziehen */
body.view-article #sp-main-body > .container:has(.id-page),
body.view-article #sp-main-body > .container:has(.id-page) > .container-inner,
body.view-article #sp-main-body .row:has(.id-page),
body.view-article #sp-main-body .sp-column:has(.id-page),
body.view-article #sp-main-body #sp-component:has(.id-page) {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

/* Grundbereiche */
.id-hero,
.id-main-section,
.id-final-cta {
width: 100vw;
max-width: none;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}

/* HERO */
.id-hero {
min-height: 360px;
padding: 58px 0 54px;
background-color: #f3f7fa;
background-image:
linear-gradient(
  90deg,
  rgba(243,247,250,0.99) 0%,
  rgba(243,247,250,0.96) 30%,
  rgba(243,247,250,0.84) 50%,
  rgba(243,247,250,0.40) 70%,
  rgba(243,247,250,0.05) 100%
),
url("/images/hero/molekulargenetische-identifizierung.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-bottom: 1px solid rgba(30,47,92,0.08);
}

.id-hero-grid {
display: grid;
align-items: center;
}

.id-kicker,
.id-process-box > span,
.id-question-compact > span,
.id-final-cta span {
display: inline-block;
color: #F04A3A;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 12px;
}

.id-hero h1 {
max-width: 760px;
margin: 0 0 18px;
color: #1E2F5C;
font-weight: 800;
}

.id-hero-content > p {
max-width: 680px;
margin: 0 0 24px;
color: #263b50;
}

.id-hero-panel {
background: #ffffff;
border: 1px solid rgba(30,47,92,0.10);
border-radius: 24px;
padding: 28px 30px;
box-shadow: 0 18px 50px rgba(30,47,92,0.08);
}

.id-hero-panel h2 {
margin: 0 0 18px;
color: #1E2F5C;
}

.id-fact-list {
display: grid;
gap: 12px;
}

.id-fact-list div {
padding-bottom: 12px;
border-bottom: 1px solid rgba(30,47,92,0.10);
}

.id-fact-list div:last-child {
padding-bottom: 0;
border-bottom: none;
}

.id-fact-list strong {
display: block;
color: #F04A3A;
text-transform: uppercase;
margin-bottom: 3px;
}

.id-fact-list span {
display: block;
color: #23384d;
}

/* HAUPTBEREICH */
.id-main-section {
background: #ffffff;
}

.id-main-grid {
display: grid;
}

.id-main-left {
min-width: 0;
}

.id-main-text h2,
.id-process-box h2,
.id-question-compact h2,
.id-final-cta h2 {
margin: 0;
color: #1E2F5C;
font-weight: 800;
}

.id-main-text h2 {
margin-bottom: 18px;
}

.id-main-text p {
margin: 0 0 13px;
color: #263b50;
}

.id-note {
margin-top: 16px !important;
padding: 14px 18px;
background: #f3f7fa;
border-left: 4px solid #F04A3A;
border-radius: 13px;
color: #1E2F5C !important;
font-weight: 650;
}

/* Ablaufbox */
.id-process-box {
background: #f3f7fa;
border: 1px solid rgba(30,47,92,0.08);
border-radius: 24px;
}

.id-process-list {
display: grid;
gap: 10px;
}

.id-process-list div {
display: grid;
gap: 12px;
align-items: center;
background: #ffffff;
border: 1px solid rgba(30,47,92,0.08);
border-radius: 14px;
}

.id-process-list strong {
color: #F04A3A;
font-weight: 800;
}

.id-process-list p {
margin: 0;
color: #263b50;
}

/* Fragestellungen direkt unter dem Intro */

.id-question-list div {
border-radius: 15px;
background: #ffffff;
border: 1px solid rgba(30,47,92,0.10);
box-shadow: 0 8px 22px rgba(30,47,92,0.03);
}

.id-question-list h3 {
margin: 0 0 6px;
color: #1E2F5C;
}

.id-question-list p {
margin: 0;
color: #34495e;
}

/* CTA kompakt, nicht mehr als riesige abgeschnittene Box */
.id-final-cta {
background: #ffffff;
}

.id-final-cta-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 48px;
align-items: center;
padding: 34px 42px;
border-radius: 24px;
background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
box-shadow: 0 18px 50px rgba(30,47,92,0.12);
}

.id-final-cta h2 {
color: #ffffff;
margin-bottom: 12px;
}

.id-final-cta p {
max-width: 860px;
margin: 0;
color: rgba(255,255,255,0.88);
}

/* Responsive */
@media (max-width: 1100px) {

.id-hero-grid,
.id-main-grid,
.id-final-cta-inner {
grid-template-columns: 1fr;
gap: 34px;
}

.id-hero {
padding: 52px 0;
min-height: 0;
background-image:
linear-gradient(
  90deg,
  rgba(243,247,250,0.99) 0%,
  rgba(243,247,250,0.96) 58%,
  rgba(243,247,250,0.86) 100%
),
url("/images/hero/molekulargenetische-identifizierung.png");
background-position: 72% center;
}
}

@media (max-width: 700px) {

.id-process-list div {
align-items: start;
gap: 5px;
}

.id-hero-panel,
.id-process-box,
.id-final-cta-inner {
padding: 24px;
border-radius: 20px;
}
}

/* =========================================================
Feinschliff Identifizierungsseite – breiter & kompakter
========================================================= */

/* Seite auf Desktop deutlich breiter nutzen */
.id-container {
width: min(1640px, calc(100vw - 110px));
margin: 0 auto;
}

/* Hero etwas weiter auseinanderziehen */
.id-hero-grid {
grid-template-columns: minmax(0, 1fr) 470px;
gap: clamp(90px, 9vw, 170px);
}

/* Mittelteil breiter verteilen: mehr Platz für Ablaufbox */
.id-main-grid {
grid-template-columns: minmax(0, 1fr) 620px;
gap: clamp(70px, 7vw, 135px);
align-items: start;
}

/* Text minimal größer und angenehmer lesbar */
.id-main-text p {
max-width: 860px;
}

/* Ablaufbox breiter und Schritte flacher */
.id-process-box {
padding: 28px 30px;
}

.id-process-box h2 {
margin-bottom: 18px;
}

.id-process-list div {
grid-template-columns: 32px 1fr;
padding: 11px 16px;
min-height: 54px;
}

/* Typische Fragestellungen auf Desktop in einer Zeile */

/* Abschnitt kompakter halten */
.id-main-section {
padding: 42px 0 44px;
}

/* CTA etwas näher an Inhalt */
.id-final-cta {
padding: 26px 0 38px;
}

/* Bei mittleren Screens wieder auf 2 Spalten für Fragestellungen */
@media (max-width: 1300px) {
.id-main-grid {
grid-template-columns: minmax(0, 1fr) 560px;
gap: 56px;
}

}

/* Tablet/Mobile */
@media (max-width: 1100px) {
.id-container {
width: min(100% - 40px, 1280px);
}

.id-hero-grid,
.id-main-grid {
grid-template-columns: 1fr;
gap: 34px;
}

.id-question-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 700px) {
.id-container {
width: min(100% - 32px, 1280px);
}

.id-process-list div {
grid-template-columns: 1fr;
}
}

/* Fragestellungen wieder breiter und besser lesbar */

/* Linke Spalte darf ihre Breite besser nutzen */
.id-main-text,
.id-question-compact {
max-width: 930px;
}

/* Fragestellungen unter Intro + Ablauf über volle Breite */

.id-question-compact > span {
display: inline-block;
margin-bottom: 10px;
}

.id-question-compact h2 {
margin-bottom: 18px;
}

.id-question-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
max-width: none;
}

.id-question-list div {
min-height: 112px;
padding: 18px 20px;
}

.id-question-list h3 {
margin-bottom: 8px;
}

/* Etwas mehr Luft zwischen Hinweisbox und Fragestellungen */
.id-note {
margin-bottom: 0 !important;
}

/* Responsive */
@media (max-width: 1300px) {
.id-question-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 700px) {
.id-question-list {
grid-template-columns: 1fr;
}
}

/* Abstand zwischen Intro/Ablauf und typischen Fragestellungen reduzieren */
.id-question-compact {
grid-column: 1 / -1;
margin-top: -60px;
max-width: none;
}

/*
   Sobald Intro und Ablauf untereinander stehen, darf der negative
   Desktop-Abstand den folgenden Abschnitt nicht nach oben ziehen.
*/
@media (max-width: 1100px) {
.id-question-compact {
margin-top: 8px;
}
}

/* Hauptbereich insgesamt etwas kompakter */
.id-main-section {
padding-bottom: 20px;
}

/* CTA wieder näher an die Fragestellungen ziehen */
.id-final-cta {
padding-top: 18px;
}

/* =========================================================
   17. ZENTRALES TYPOGRAFIE-SYSTEM
========================================================= */

/* ---------------------------------------------------------
   17.1 GLOBALE TEXTROLLEN

   Alle früheren font-size-, line-height- und letter-spacing-
   Einzelwerte wurden aus den historischen Seitenblöcken
   entfernt. Textgrößen und Laufweiten werden ausschließlich
   hier und über die Design-Tokens in :root gesteuert. Im Hauptinhalt
   genügt dafür die reguläre ID-gebundene Kaskade. Die Startseitenmodule
   erhalten zusätzlich gezielte Klassen-Hooks, da Helix sie je nach Aufbau
   außerhalb von #sp-main-body ausgeben kann. Template-Navigation und
   technische Randbereiche bleiben gezielt geschützt.
--------------------------------------------------------- */

body {
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-body);
  letter-spacing: var(--ml-letter-body);
}

/* Fließtext, Listen und Formulare */
#sp-main-body :is(
  p,
  li,
  dt,
  dd,
  blockquote,
  address,
  td,
  th,
  summary,
  label,
  input:not([type="submit"]):not([type="button"]):not([type="reset"]),
  textarea,
  select
),
.ml-services-intro > p:not(.ml-section-kicker),
.ml-about-text,
.ml-about-text p,
.ml-about-box p,
.ml-research-text,
.ml-research-text p,
.ml-contact-cta-content p {
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-body);
  letter-spacing: var(--ml-letter-body);
}

/* H1: ausschließlich die größte Überschriftenrolle */
#sp-main-body h1 {
  font-size: var(--ml-type-h1);
  line-height: var(--ml-line-h1);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 850 !important;
}

/* H2: klar kleiner als H1 */
#sp-main-body h2,
.ml-services-intro h2,
.ml-about-content h2,
.ml-research-content h2,
.ml-contact-cta-content h2 {
  font-size: var(--ml-type-h2);
  line-height: var(--ml-line-h2);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 830 !important;
}

/* H3 und Kartentitel */
#sp-main-body h3,
.ml-trust-card h3,
.ml-service-card h3,
.ml-about-box h3,
.ml-research-card h3 {
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 820 !important;
}

/* Kleinere Überschriften bleiben Teil der sieben Rollen */
#sp-main-body h4 {
  font-size: var(--ml-type-lead);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
}

#sp-main-body h5 {
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
}

#sp-main-body h6 {
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  letter-spacing: var(--ml-letter-heading);
}

/* Einleitungen und hervorgehobener Text */
#sp-main-body :is(
  .lead,
  .ml-hero-text,
  .services-overview-hero-content > p,
  .lab-explorer-hero p,
  .lab-category-hero p:last-of-type,
  .lab-norm-hero p:last-of-type,
  .mibi-hero-lead,
  .rnd-hero-content > p:not(.rnd-eyebrow),
  .accr-hero-text > p:not(.accr-eyebrow),
  .team-top-copy p,
  .pub-hero > p,
  .career-intro,
  .internship-intro,
  .jobs-intro,
  .water-hero p:not(.water-eyebrow),
  .endo-hero p:not(.endo-eyebrow),
  .air-hero p:not(.air-eyebrow),
  .cr-hero-text > p:not(.cr-eyebrow),
  .id-hero-content > p
),
.ml-hero-text,
.ml-hero-text p {
  font-size: var(--ml-type-lead);
  line-height: var(--ml-line-body);
  letter-spacing: var(--ml-letter-body);
}

/* Karten verwenden dieselbe 18-px-Größe, aber etwas kompaktere Zeilen */
#sp-main-body [class*="-card"] p,
.ml-trust-card p,
.ml-service-card p,
.ml-research-card p {
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-card);
  letter-spacing: var(--ml-letter-body);
}

/* Kleine Begleittexte, Navigation und Quellenangaben */
#sp-main-body :is(
  small,
  figcaption,
  .small,
  .ml-side-nav,
  .ml-side-nav__link,
  .ml-side-nav__summary,
  .ml-side-nav__header p,
  .lab-category,
  .lab-related-card,
  .lab-related-card em,
  .lab-norm-facts span,
  .team-qualification,
  .pub-authors,
  .pub-source,
  .pub-compact-item span,
  .contact-location-note,
  .internship-small-note,
  .water-facts-card span,
  .water-next-pages-grid em,
  .endo-facts-card span,
  .endo-area-card em,
  .endo-matrix-note p,
  .air-facts-card span,
  .air-area-card em,
  .cr-status-note p,
  .id-note
) {
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  letter-spacing: var(--ml-letter-body);
}

/* Eyebrows, Kicker, Tags und kurze Versal-Labels */
#sp-main-body [class*="eyebrow"],
#sp-main-body [class*="kicker"],
.ml-section-kicker,
.ml-hero-kicker,
.ml-research-kicker,
.ml-service-card > span,
#sp-main-body :is(
  .ml-side-nav__label,
  .ml-side-nav__group-title,
  .ml-side-nav__meta,
  .lab-topic-card span,
  .lab-related-card span,
  .lab-norm-facts strong,
  .lab-norm-contact-card span,
  .lab-method-card span,
  .lab-category-compact-cta span,
  .services-overview-card > span,
  .services-overview-orientation-card > span,
  .rnd-card span,
  .rnd-step strong,
  .accr-area-card span,
  .accr-scope-note strong,
  .accr-cta span,
  .pub-hero-note span,
  .pub-compact-item small,
  .water-facts-card strong,
  .water-area-card span,
  .water-service-situation-grid span,
  .water-cta span,
  .endo-facts-card strong,
  .endo-area-card span,
  .endo-service-info-grid span,
  .endo-matrix-note strong,
  .endo-cta-inner span,
  .air-facts-card strong,
  .air-area-card span,
  .air-note strong,
  .air-cta-inner span,
  .cr-status-note strong,
  .cr-process-steps span,
  .cr-card span,
  .cr-cta span,
  .id-fact-list strong,
  .id-process-box > span,
  .id-question-compact > span,
  .id-final-cta span
) {
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  letter-spacing: var(--ml-letter-uppercase);
}

/* Hauptmenü: vereinbarte Größen-Ausnahme */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  font-size: var(--ml-type-main-menu) !important;
  line-height: 1.3 !important;
  letter-spacing: var(--ml-letter-interactive) !important;
}

/* Untermenü und mobile Navigation */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > span,
.offcanvas-menu a,
#offcanvas-menu a {
  font-size: var(--ml-type-small) !important;
  line-height: 1.35 !important;
  letter-spacing: var(--ml-letter-interactive) !important;
}

/* Seitennavigationen: Titel und Gruppen bleiben kompakt */
body #sp-main-body :is(
  .ml-side-nav__header h2
) {
  font-size: var(--ml-type-h3) !important;
  line-height: var(--ml-line-h3) !important;
  letter-spacing: var(--ml-letter-heading) !important;
}

/* Footer, Breadcrumbs und technische Zusatzinformationen */
body :is(
  #sp-footer,
  #sp-bottom,
  .breadcrumb,
  .breadcrumbs,
  .article-info
) {
  font-size: var(--ml-type-small) !important;
  line-height: var(--ml-line-small) !important;
  letter-spacing: var(--ml-letter-body) !important;
}

/* Dekorative Schriftzeichen sind Funktionsgrößen, keine Textrollen */
.ml-service-card::after {
  font-size: var(--ml-type-h3) !important;
  line-height: 1 !important;
  letter-spacing: var(--ml-letter-body) !important;
}

.lab-faq summary::after,
.contact-accordion summary::after,
.water-faq summary::after {
  font-size: var(--ml-type-lead) !important;
  line-height: 1 !important;
  letter-spacing: var(--ml-letter-body) !important;
}

/* =========================================================
   18. MIKROBIOLOGISCHE MATERIALUNTERSUCHUNGEN
   Dauerhafter Seitenbestand für Material- und Oberflächenproben.
========================================================= */

/* ---------------------------------------------------------
   18.1 Grundlayout und Basiskomponenten
--------------------------------------------------------- */

.material-page {
  color: var(--ml-heading);
  background: var(--ml-white);
}

.material-hero,
.material-content-section,
.material-process-section,
.material-related-section,
.material-cta {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

.material-inner {
  box-sizing: border-box;
}

/* Hero */

.material-hero {
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 83% 28%, rgba(45, 42, 168, 0.11) 0 8%, transparent 8.5%),
    radial-gradient(circle at 91% 70%, rgba(240, 74, 58, 0.10) 0 6%, transparent 6.5%),
    linear-gradient(
      90deg,
      rgba(248, 251, 253, 1) 0%,
      rgba(248, 251, 253, 0.98) 48%,
      rgba(243, 247, 250, 0.90) 72%,
      rgba(236, 242, 247, 0.88) 100%
    );
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.material-hero-inner {
  padding: 50px 0;
}

.material-eyebrow {
  margin: 0 0 12px;
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
  text-transform: uppercase;
}

.material-hero h1 {
  max-width: 850px;
  margin: 0 0 20px;
  color: var(--ml-heading);
  font-size: var(--ml-type-h1);
  line-height: var(--ml-line-h1);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 820;
}

.material-hero p:not(.material-eyebrow) {
  max-width: 820px;
  margin: 0;
  color: var(--ml-text-dark);
  font-size: var(--ml-type-lead);
  line-height: var(--ml-line-body);
  font-weight: 520;
}

/* Inhaltsbereiche */

.material-content-section,
.material-related-section {
  padding: 50px 0;
  background: var(--ml-white);
}

.material-content-soft,
.material-related-section {
  background: #F4F8FB;
}

.material-intro-grid {
  display: grid;
}

.material-intro-text h2,
.material-section-heading h2,
.material-faq-column > h2,
.material-scope-panel h2,
.material-cta h2 {
  margin: 0 0 20px;
  color: var(--ml-heading);
  font-size: var(--ml-type-h2);
  line-height: var(--ml-line-h2);
  letter-spacing: var(--ml-letter-heading);
  font-weight: 800;
}

.material-intro-text p,
.material-section-heading > p:not(.material-eyebrow),
.material-scope-panel p,
.material-faq p,
.material-cta p {
  color: var(--ml-text);
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-body);
  letter-spacing: var(--ml-letter-body);
}

.material-intro-text p {
  margin: 0 0 16px;
}

.material-facts-card {
  justify-self: end;
}


.material-facts-card .ml-card__fact-label {
  font-size: var(--ml-type-meta);
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
}

.material-facts-card .ml-card__fact-value {
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

.material-section-heading {
  max-width: 980px;
  margin-bottom: 30px;
}

.material-section-heading > p:not(.material-eyebrow) {
  max-width: 940px;
  margin: 0;
}

.material-sample-grid,
.material-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.material-sample-grid .ml-card,
.material-result-grid .ml-card {
  height: 100%;
}

.material-sample-grid .ml-card__title,
.material-result-grid .ml-card__title,
.material-related-grid .ml-card__title {
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
}

.material-sample-grid .ml-card__text,
.material-result-grid .ml-card__text,
.material-related-grid .ml-card__text {
  font-size: var(--ml-type-body);
  line-height: var(--ml-line-card);
}

.material-note {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-left: 4px solid var(--ml-red);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(30, 47, 92, 0.04);
}

.material-note strong {
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
  text-transform: uppercase;
}

.material-note p {
  margin: 0;
  color: var(--ml-text);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

/* Ablauf auf dunkler Fläche */

.material-process-section {
  padding: 50px 0 56px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
}

.material-section-heading-light h2 {
  color: var(--ml-white);
}

.material-section-heading-light .material-eyebrow {
  color: rgba(255, 255, 255, 0.76);
}

.material-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.material-process-grid .ml-card--process {
  min-height: 260px;
}

.material-process-grid .ml-card__title {
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
  letter-spacing: var(--ml-letter-heading);
}

.material-process-grid .ml-card__text {
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

/* Aussagegrenzen und FAQ */

.material-scope-panel {
  margin-bottom: 42px;
  padding: 30px 34px !important;
}

.material-scope-panel h2 {
  margin-bottom: 14px;
  font-size: var(--ml-type-h3);
  line-height: var(--ml-line-h3);
}

.material-scope-panel .ml-card__text {
  max-width: 1180px;
}

.material-faq-column {
  max-width: 1060px;
}

.material-faq-column > h2 {
  margin-bottom: 24px;
}

.material-faq {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(30, 47, 92, 0.035);
}

.material-faq summary {
  position: relative;
  padding: 20px 58px 20px 24px;
  color: var(--ml-heading);
  font-size: var(--ml-type-body);
  line-height: 1.35;
  font-weight: 780;
  cursor: pointer;
  list-style: none;
}

.material-faq summary::-webkit-details-marker {
  display: none;
}

.material-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  color: var(--ml-red);
  font-size: var(--ml-type-lead);
  line-height: 1;
  font-weight: 800;
}

.material-faq[open] summary::after {
  content: "–";
}

.material-faq p {
  margin: 0;
  padding: 0 24px 22px;
}

/* Verwandte Leistungen */

.material-related-grid {
  display: grid;
  gap: 24px;
}

.material-related-grid .ml-card--area {
  min-height: 230px;
}

/* Abschluss-CTA */

.material-cta {
  padding: 36px 0 60px;
  background: #F4F8FB;
}

.material-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px;
  align-items: center;
  padding: 42px 52px;
  background: linear-gradient(135deg, #1E2F5C 0%, #2D2AA8 100%);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(30, 47, 92, 0.16);
}

.material-cta-inner > div > span {
  display: block;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
  text-transform: uppercase;
}

.material-cta h2 {
  margin-bottom: 12px;
  color: var(--ml-white);
}

.material-cta p {
  max-width: 880px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.material-cta .ml-btn {
  white-space: nowrap;
}

/* Responsive */

@media (max-width: 1200px) {
  .material-intro-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 40px;
  }

  .material-facts-card {
    max-width: 420px;
  }

  .material-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .material-intro-grid,
  .material-cta-inner {
    grid-template-columns: 1fr;
  }

  .material-facts-card {
    justify-self: stretch;
  }

  

  .material-related-grid .ml-card--area {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  

  .material-hero {
    min-height: 0;
  }

  .material-hero-inner {
    padding: 44px 0;
  }

  .material-content-section,
  .material-related-section,
  .material-process-section {
    padding-top: 42px;
    padding-bottom: 44px;
  }

  .material-sample-grid,
  .material-result-grid,
  .material-process-grid {
    grid-template-columns: 1fr;
  }

  .material-process-grid .ml-card--process {
    min-height: 0;
  }

  .material-facts-card .ml-card__fact,
  .material-note {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .material-scope-panel,
  .material-cta-inner {
    padding: 28px 24px !important;
    border-radius: 20px;
  }

  .material-cta .ml-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

}

/* ---------------------------------------------------------
   18.2 Fakten-, Proben- und FAQ-Module
--------------------------------------------------------- */

.material-inner {
  width: min(1320px, calc(100% - 96px)) !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


.material-intro-text .material-method-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(30, 47, 92, 0.10);
  color: var(--ml-text-dark);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

.material-facts-card {
  display: block !important;
  width: 100%;
  max-width: 520px;
  padding: 0 !important;
  overflow: hidden;
  align-self: center;
}

.material-facts-card .ml-card__fact {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr) !important;
  gap: 18px;
  align-items: start;
  min-height: 0;
  padding: 20px 24px;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(30, 47, 92, 0.08) !important;
}

.material-facts-card .ml-card__fact:last-child {
  border-bottom: 0 !important;
}

.material-facts-card .ml-card__fact-label {
  display: block;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.material-facts-card .ml-card__fact-value {
  display: block;
  min-width: 0;
  font-weight: 700;
}

/* Typische Proben: ein kompaktes Listenmodul statt vier einzelner Cards */

.material-samples-section {
  padding-top: 46px;
  padding-bottom: 46px;
}

.material-sample-layout,
.material-faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: start;
}

.material-sample-layout .material-section-heading,
.material-faq-layout .material-section-heading {
  max-width: 440px;
  margin-bottom: 0;
}


.material-sample-item {
  border-bottom: 1px solid rgba(30, 47, 92, 0.08);
}

.material-sample-item:last-child {
  border-bottom: 0;
}

.material-sample-item strong {
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
  text-transform: uppercase;
}

.material-sample-item span {
  color: var(--ml-heading);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

/* FAQ-Bereich: Ergebnisse, Aussagekraft, Einsendung und Leistungsgrenzen */

.material-faq-list {
  min-width: 0;
}

.material-faq-list .material-faq {
  margin-bottom: 12px;
}

.material-faq-list .material-faq:last-child {
  margin-bottom: 0;
}

.material-faq-list .material-faq p {
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

.material-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

@media (max-width: 991px) {
  .material-inner {
    width: calc(100% - 48px) !important;
  }

  .material-intro-grid,
  .material-sample-layout,
  .material-faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .material-facts-card {
    max-width: none;
  }

  .material-related-grid {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .material-inner {
    width: calc(100% - 44px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .material-facts-card .ml-card__fact {
    grid-template-columns: 1fr !important;
    gap: 6px;
    padding: 18px 20px;
  }

  

  .material-sample-item {
    padding: 18px 20px;
  }
}

/* ---------------------------------------------------------
   18.3 Hero, Probenbox und Supportbereich
--------------------------------------------------------- */

/* Hero mit Leistungsumfang */

.material-hero {
  min-height: 390px;
  padding: 48px 0;
}

.material-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: clamp(64px, 7vw, 120px);
  align-items: center;
}

.material-hero-content {
  min-width: 0;
}

.material-hero-content h1 {
  max-width: 780px;
}

.material-hero-content > p:not(.material-eyebrow) {
  max-width: 720px;
}

.material-hero-panel {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 30px;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.10);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(30, 47, 92, 0.08);
}

.material-hero-panel h2 {
  margin: 0 0 18px;
  color: var(--ml-heading);
  font-size: clamp(1.75rem, 2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: var(--ml-letter-heading);
  font-weight: 800;
}

.material-fact-list {
  display: grid;
  gap: 12px;
}

.material-fact-list > div {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(30, 47, 92, 0.10);
}

.material-fact-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.material-fact-list strong,
.material-box-eyebrow {
  display: block;
  color: var(--ml-red);
  font-size: var(--ml-type-meta);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: var(--ml-letter-uppercase);
  text-transform: uppercase;
}

.material-fact-list strong {
  margin-bottom: 3px;
}

.material-fact-list span {
  display: block;
  color: var(--ml-text-dark);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
  font-weight: 650;
}

/* Einführung mit kompakter Probenbox */

.material-intro-section {
  padding-top: 46px;
  padding-bottom: 50px;
}

.material-intro-grid {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 540px);
  gap: clamp(48px, 6vw, 92px);
  align-items: start;
}

.material-intro-text p {
  max-width: 820px;
}

.material-sample-box {
  box-sizing: border-box;
  padding: 28px 30px;
  background: var(--ml-bg-light);
  border: 1px solid rgba(30, 47, 92, 0.08);
  border-radius: 24px;
}

.material-box-eyebrow {
  margin-bottom: 12px;
}

.material-sample-box h2 {
  margin: 0 0 20px;
  color: var(--ml-heading);
  font-size: clamp(1.75rem, 2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: var(--ml-letter-heading);
  font-weight: 800;
}

.material-sample-list {
  display: grid;
  gap: 10px;
  padding: 0 !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.material-sample-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--ml-white);
  border: 1px solid rgba(30, 47, 92, 0.08) !important;
  border-radius: 14px;
}

.material-sample-item strong {
  margin: 0;
}

.material-sample-item span {
  font-weight: 600;
}

.material-sample-note {
  margin: 16px 0 0;
  color: var(--ml-text);
  font-size: var(--ml-type-small);
  line-height: var(--ml-line-small);
}

/* FAQ und verwandte Leistungen im Standardlayout der Verfahrensseiten */

.material-support-section {
  padding-top: 50px;
  padding-bottom: 52px;
  background: var(--ml-white);
  border-top: 1px solid rgba(30, 47, 92, 0.07);
}

.material-support-grid {
  display: grid;
  align-items: start;
}

.material-faq-column,
.material-related-column {
  min-width: 0;
  width: 100%;
}

.material-faq-column > h2,
.material-related-column > h2 {
  margin: 0 0 18px !important;
  color: var(--ml-heading);
  font-weight: 800;
}

.material-faq-column .material-faq:last-child {
  margin-bottom: 0 !important;
}


.material-related-card .ml-card__text {
  font-style: normal;
}

.material-related-card > .ml-card__title {
  font-size: var(--ml-type-meta) !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ml-letter-uppercase) !important;
  text-transform: uppercase;
}

.material-related-card > .ml-card__text,
.material-related-card > .ml-card__action {
  font-size: var(--ml-type-small) !important;
  line-height: var(--ml-line-small) !important;
}

@media (max-width: 1199px) {
  .material-support-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .material-related-grid.lab-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .material-hero-grid,
  .material-intro-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .material-hero {
    min-height: 0;
  }

  .material-hero-panel,
  .material-sample-box {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .material-hero {
    padding: 42px 0;
  }

  .material-hero-panel,
  .material-sample-box {
    padding: 24px;
    border-radius: 20px;
  }

  .material-sample-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .material-related-grid.lab-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------
   18.4 Raster der verwandten Leistungen
--------------------------------------------------------- */

.material-support-grid {
  grid-template-columns: 1fr;
  gap: 46px;
}

.material-related-grid.lab-related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

@media (max-width: 991px) {
  .material-related-grid.lab-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   19. RESPONSIVE FEINSCHLIFF
   Kompakte Typografie und belastbare Layouts für Tablets und Smartphones.
========================================================= */

/* Horizontales Scrollen darf weder Inhalte noch das feste Offcanvas-Menü
   aus dem sichtbaren Viewport verschieben. overflow: clip erzeugt dabei
   keinen zusätzlichen Scroll-Container und beeinträchtigt Sticky-Elemente
   nicht. Die vorherige hidden-Deklaration dient als Browser-Fallback. */
@media (max-width: 1279px) {
  html,
  body,
  .body-wrapper,
  .body-innerwrapper {
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  body.offcanvas-active .offcanvas-menu,
  body.offcanvas-active #offcanvas-menu {
    right: 0 !important;
    width: min(320px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    box-sizing: border-box;
  }

  .offcanvas-menu .offcanvas-inner,
  #offcanvas-menu .offcanvas-inner {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .offcanvas-menu :is(a, span, label),
  #offcanvas-menu :is(a, span, label) {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Der Über-uns-Bereich benötigt schon auf Tablets die volle Zeilenbreite.
   Dadurch bleiben Text, Merkmalskarten und die blaue Servicebox lesbar. */
@media (max-width: 1199px) {
  .ml-about-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 42px !important;
    align-items: start !important;
  }

  .ml-about-content {
    max-width: 850px !important;
  }

  .ml-about-side {
    justify-content: flex-start !important;
  }

  .ml-about-box {
    width: 100% !important;
    max-width: 760px !important;
    min-height: 0 !important;
  }
}

/* Zwei Personenkarten sind bei 768 px für Name, Qualifikation und E-Mail
   zu schmal. Das einspaltige Raster greift deshalb vor dem Tabletformat. */
@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Belastbare Breiten für die mobile Normseite. Mehrere Komponenten hatten
   width: 100% plus Innenabstände im content-box-Modell und wurden dadurch
   breiter als der Viewport. */
@media (max-width: 767px) {
  .lab-norm-page,
  .lab-norm-hero,
  .lab-norm-content-layout,
  .lab-norm-section,
  .lab-norm-applications,
  .lab-norm-facts,
  .lab-faq-column,
  .lab-related-column,
  .lab-faq {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .lab-norm-content-layout {
    width: calc(100% - 32px) !important;
    margin-inline: auto !important;
    padding: 24px 0 36px !important;
  }

  .lab-faq summary {
    position: relative;
    padding-right: 48px !important;
  }

  .lab-faq summary::after {
    position: absolute;
    top: 50%;
    right: 18px;
    float: none;
    transform: translateY(-50%);
  }
}

/* Small-Phone-Typografie: Die bisherige Mindestgröße von 40 px für H1 und
   18–20 px für Lauftext war bei 360 px zu dominant. Die sieben bestehenden
   Textrollen bleiben erhalten, werden aber proportional verdichtet. */
@media (max-width: 575px) {
  :root {
    --ml-type-meta: 0.75rem;
    --ml-type-small: 0.9375rem;
    --ml-type-body: 1rem;
    --ml-type-lead: 1.0625rem;
    --ml-type-h3: 1.1875rem;
    --ml-type-h2: clamp(1.625rem, 7.6vw, 1.875rem);
    --ml-type-h1: clamp(2rem, 8.9vw, 2.125rem);
    --ml-line-body: 1.55;
    --ml-line-card: 1.5;
    --ml-section-y-sm: 48px;
  }

  #sp-main-body :is(h1, h2, h3),
  .ml-hero h1,
  .ml-services-intro h2,
  .ml-about-content h2,
  .ml-research-content h2,
  .ml-contact-cta-content h2 {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }

  #sp-header .container,
  #sp-header .container-inner {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Der verschachtelte Innencontainer braucht auf schmalen Displays
     keinen zweiten seitlichen Abstand. Logo und Menue bleiben in einer Zeile. */
  #sp-header .container-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #sp-header .container-inner > .row {
    min-height: 84px;
    flex-wrap: nowrap !important;
  }

  #sp-header #sp-logo {
    min-width: 0;
    flex: 0 1 auto;
  }

  #sp-header #sp-logo .sp-column,
  #sp-header #sp-logo .logo,
  #sp-header #sp-logo .logo a {
    min-width: 0;
    max-width: 100%;
  }

  #sp-header #sp-menu {
    min-width: 42px;
    flex: 1 1 auto;
  }

  #sp-header #offcanvas-toggler {
    flex: 0 0 auto;
  }

  #sp-header .logo-image,
  #sp-header .logo-image-phone,
  #sp-header .logo img {
    max-width: min(100%, calc(100vw - 92px)) !important;
  }

  /* Startseite */
  .ml-hero {
    min-height: 460px !important;
    padding: 34px 18px 42px !important;
  }

  .ml-hero-content {
    width: calc(100vw - 36px) !important;
    padding: 44px 0 !important;
  }

  .ml-hero h1 {
    margin-bottom: 18px !important;
  }

  .ml-hero-text {
    margin-bottom: 24px !important;
  }

  .ml-trust {
    padding: 36px 0 44px !important;
  }

  .ml-trust-grid {
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 18px !important;
  }

  .ml-trust-card {
    padding: 24px 20px !important;
  }

  .ml-trust-head {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .ml-trust-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .ml-services,
  .ml-about {
    padding: 48px 18px 54px !important;
  }

  .ml-services-inner,
  .ml-about-grid {
    width: calc(100vw - 36px) !important;
  }

  .ml-services-inner {
    gap: 36px !important;
  }

  .ml-services-grid {
    gap: 18px !important;
  }

  .ml-service-card {
    padding: 24px 22px !important;
  }

  .ml-about-grid {
    gap: 32px !important;
  }

  .ml-about-content h2 {
    margin-bottom: 22px !important;
  }

  .ml-about-points {
    gap: 12px !important;
    margin-top: 28px !important;
  }

  .ml-about-point {
    padding: 16px 18px !important;
  }

  .ml-about-box {
    padding: 28px 24px !important;
    border-radius: 22px !important;
  }

  .ml-about-box h3 {
    margin-bottom: 16px !important;
  }

  .ml-contact-cta {
    padding: 28px 18px 44px !important;
  }

  .ml-contact-cta-inner {
    margin-inline: auto;
    padding: 32px 22px !important;
    gap: 28px !important;
    border-radius: 20px !important;
  }

  .ml-contact-cta-actions,
  .ml-contact-cta-actions .ml-btn {
    width: 100%;
    min-width: 0 !important;
  }

  /* Leistungsübersicht */
  .services-overview-hero {
    padding: 0 !important;
  }

  .services-overview-hero .services-overview-inner {
    width: calc(100% - 36px) !important;
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .services-overview-areas {
    padding: 44px 0 48px !important;
  }

  .services-overview-section-head {
    margin-bottom: 28px !important;
  }

  .services-overview-card-grid {
    gap: 16px !important;
  }

  .services-overview-card,
  .services-overview-card--research {
    min-height: 0 !important;
    padding: 22px 20px !important;
  }

  .services-overview-card > span {
    margin-bottom: 12px;
  }

  .services-overview-card p {
    margin-bottom: 18px !important;
  }

  .services-overview-orientation {
    padding: 44px 0 !important;
  }

  .services-overview-orientation-card {
    padding: 24px 22px !important;
  }

  .services-overview-cta {
    padding: 34px 0 44px !important;
  }

  .services-overview-cta-box {
    padding: 28px 22px !important;
    gap: 22px !important;
  }

  .services-overview-cta-box .ml-btn {
    width: 100%;
    justify-self: stretch !important;
    justify-content: center;
    white-space: normal !important;
    text-align: center;
  }

  /* Leistungsverzeichnis A–Z */
  .ml-directory {
    width: calc(100% - 36px);
    padding-block: 30px 54px;
  }

  .ml-directory__tools {
    padding: 14px;
  }

  #sp-main-body .ml-directory__search-input,
  #sp-main-body .ml-directory__filter-toggle {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Norm- und Verfahrensseiten */
  .lab-norm-hero {
    padding: 36px 22px 38px !important;
  }

  .lab-norm-content-layout {
    width: calc(100% - 32px) !important;
    padding: 20px 0 30px !important;
  }

  .lab-norm-section {
    gap: 22px !important;
    padding: 20px 18px !important;
    border-left-width: 4px !important;
    border-radius: 18px !important;
  }

  body #sp-main-body .lab-norm-facts.ml-card.ml-card--facts > .ml-card__fact {
    padding: 14px 16px !important;
  }

  .lab-norm-applications {
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }

  .lab-faq summary {
    padding: 15px 44px 15px 16px !important;
  }

  .lab-faq summary::after {
    right: 16px;
  }

  .lab-faq p {
    padding: 0 16px 16px !important;
  }

  /* Auftragsforschung */
  .cr-inner {
    width: calc(100% - 36px);
  }

  .contract-research-page .cr-hero.cr-hero-image,
  .contract-research-page .cr-section,
  .contract-research-page .cr-process-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .contract-research-page .cr-hero.cr-hero-image {
    min-height: 0 !important;
  }

  .contract-research-page .cr-situation-card {
    padding: 22px !important;
    border-radius: 20px;
  }

  .contract-research-page .cr-status-note {
    margin-top: 18px !important;
    padding: 16px 18px !important;
  }

  /* Team */
  .team-inner {
    width: calc(100% - 36px) !important;
  }

  #sp-main-body .ml-card.ml-card--person {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  #sp-main-body .ml-card.ml-card--person > .ml-card__media {
    width: 128px;
    height: 160px;
    min-width: 128px;
  }
}

/* e50: Inter lokal laden; Schriftfamilie bleibt Inter. */
@font-face {
  font-family: "Inter";
  src: url("/templates/shaper_helixultimate/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/templates/shaper_helixultimate/fonts/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.sp-megamenu-parent,
.sp-megamenu-parent a,
.offcanvas-menu .offcanvas-inner ul.menu a,
.offcanvas-menu .offcanvas-inner ul.menu span {
  font-family: "Inter", Arial, sans-serif;
}