@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body,
.tox,
.tox-editor-container,
.tox-edit-area iframe,
.mce-content-body {
  font-family: 'Open Sans', sans-serif !important;
}

/* =========================================================
   JOOMLA SMART SEARCH – ERGEBNISSE
   ========================================================= */

.com-finder.finder {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 50px;
  color: #111c2f;
}

.com-finder.finder > h1,
.com-finder.finder .page-header h1 {
  margin: 0 0 16px;
  color: #111c2f;
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.15;
}

.com-finder.finder .finder__search {
  width: 100%;
  max-width: 1180px;
  margin: 0 0 42px;
  padding: 28px;
  background: #f5f7fb;
  border: 1px solid #e1e6ef;
  border-radius: 18px;
}

.com-finder.finder .finder__search form,
.com-finder.finder #search-form {
  width: 100%;
  max-width: 760px;
  margin: 0;
}

.com-finder.finder .finder__search .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 10px;
}

.com-finder.finder .finder__search input[type="text"],
.com-finder.finder .finder__search input[type="search"],
.com-finder.finder #q {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  color: #111c2f;
  background: #fff;
  border: 1px solid #cfd6e2;
  border-radius: 10px;
  outline: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
}

.com-finder.finder .finder__search input:focus,
.com-finder.finder #q:focus {
  border-color: #2039a0;
  box-shadow: 0 0 0 4px rgba(32, 57, 160, .12);
}

.com-finder.finder .finder__search .btn,
.com-finder.finder .finder__search button {
  min-height: 54px;
  padding: 12px 24px;
  color: #fff;
  background: #2039a0;
  border: 1px solid #2039a0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.com-finder.finder .finder__search .btn:hover,
.com-finder.finder .finder__search .btn:focus,
.com-finder.finder .finder__search button:hover,
.com-finder.finder .finder__search button:focus {
  color: #2039a0;
  background: #fff;
  transform: translateY(-1px);
}

.com-finder.finder .finder__results {
  width: 100%;
  max-width: 1180px;
}

.com-finder.finder .finder__results .list-group,
.com-finder.finder .finder__results-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.com-finder.finder .finder__result,
.com-finder.finder .finder__results .list-group-item {
  position: relative;
  margin: 0;
  padding: 26px 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e5ed;
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(17, 28, 47, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.com-finder.finder .finder__result::before,
.com-finder.finder .finder__results .list-group-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #2039a0;
  content: "";
}

.com-finder.finder .finder__result:hover,
.com-finder.finder .finder__results .list-group-item:hover {
  border-color: rgba(32, 57, 160, .35);
  box-shadow: 0 14px 34px rgba(17, 28, 47, .11);
  transform: translateY(-2px);
}

.com-finder.finder mark,
.com-finder.finder .highlight {
  padding: 1px 4px;
  color: #2039a0;
  background: rgba(32, 57, 160, .12);
  border-radius: 4px;
  font-weight: 600;
}

/* =========================================================
   DESKTOP-MENÜ
   ========================================================= */

@media (min-width: 992px) {
  .sp-megamenu-parent > li {
    position: relative !important;
  }

  .sp-megamenu-parent > li > a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #182b78;
    text-decoration: none !important;
    transition: color .25s ease !important;
  }

  .sp-megamenu-parent > li.sp-has-child > a::after {
    display: inline-block !important;
    flex: 0 0 7px !important;
    width: 7px !important;
    height: 7px !important;
    margin: -4px 1px 0 9px !important;
    content: "" !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform .25s ease, margin-top .25s ease !important;
  }

  .sp-megamenu-parent > li.sp-has-child:hover > a::after {
    margin-top: 4px !important;
    transform: rotate(225deg) !important;
  }

  .sp-megamenu-parent > li::after {
    position: absolute;
    top: calc(50% + 17px);
    right: 14px;
    left: 14px;
    height: 1px;
    content: "";
    background: #2f419d;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease, opacity .25s ease;
  }

  .sp-megamenu-parent > li:hover::after,
  .sp-megamenu-parent > li.active::after,
  .sp-megamenu-parent > li.current::after,
  .sp-megamenu-parent > li.current-item::after,
  .sp-megamenu-parent > li.current-menu-item::after,
  .sp-megamenu-parent > li.current-menu-ancestor::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .sp-megamenu-parent > li > .sp-dropdown {
    padding-top: 14px !important;
  }

  .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    min-width: 265px;
    padding: 10px !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid rgba(47, 65, 157, .14);
    border-radius: 14px !important;
    box-shadow: 0 14px 35px rgba(17, 28, 47, .12), 0 4px 10px rgba(17, 28, 47, .06);
  }

  .sp-megamenu-parent .sp-dropdown li.sp-menu-item,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active {
    position: relative !important;
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
  }

  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 12px 14px 11px !important;
    color: #283548 !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
  }

  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a::before {
    position: absolute;
    right: 14px;
    bottom: 6px;
    left: 14px;
    height: 1px;
    content: "";
    background: #2f419d;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease, opacity .25s ease;
  }

  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current > a {
    color: #2f419d !important;
    background: transparent !important;
  }

  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a::before,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a::before,
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current > a::before {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* =========================================================
   RESPONSIVER HEADER UND OFFCANVAS-MENÜ
   ========================================================= */

/* Globales ECQA-Logo – unabhängig von den einzelnen Helix-Styles. */
#sp-header #sp-logo .logo > a,
.offcanvas-menu .logo > a {
  display: block !important;
  width: 145px !important;
  height: 125px !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#sp-header #sp-logo .logo > a::before,
.offcanvas-menu .logo > a::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../../../images/Logo/ecqa-gmbh-2.png') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Von Helix je Style ausgegebene Logos ausblenden. */
#sp-header #sp-logo .logo > a > img,
#sp-header #sp-logo .logo > a > picture,
#sp-header #sp-logo .logo > a > span,
.offcanvas-menu .logo > a > img,
.offcanvas-menu .logo > a > picture,
.offcanvas-menu .logo > a > span {
  display: none !important;
}

@media (max-width: 991.98px) {
  #sp-header > .container,
  #sp-header > .container-fluid,
  #sp-header .container-inner,
  #sp-header .row {
    position: relative !important;
  }

  #sp-header .row {
    min-height: 72px;
    align-items: center !important;
  }

  /* Logo wirklich mittig zwischen den Bildschirmrändern */
  #sp-header #sp-logo {
    position: absolute !important;
    z-index: 3;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  #sp-header #sp-logo .logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
  }

  #sp-header #sp-logo .logo > a {
    width: 106px !important;
    height: 62px !important;
  }

  /* Suche im mobilen Header ausblenden */
  #sp-header .sp-search,
  #sp-header .search,
  #sp-header .search-toggler,
  #sp-header .sp-search-toggle,
  #sp-header .mod-finder,
  #sp-header .finder {
    display: none !important;
  }

  /* Aufklappmenü ruhiger und passend zu den Desktop-Dropdowns */
  .offcanvas-menu .offcanvas-inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 28px 24px 34px !important;
  }

  /* Logo im Kopf des mobilen Aufklappmenüs. */
  .offcanvas-menu .logo {
    width: auto !important;
    max-width: 160px !important;
  }

  .offcanvas-menu .logo > a {
    width: 160px !important;
    height: 96px !important;
  }

  .offcanvas-menu .offcanvas-inner .sp-module {
    margin: 0 !important;
  }

  /* Die von Helix erzeugte Suche immer nach der Menüliste anordnen. */
  .offcanvas-menu .offcanvas-inner > form.search,
  .offcanvas-menu .offcanvas-inner > .search,
  .offcanvas-menu .offcanvas-inner > .mod-finder,
  .offcanvas-menu .offcanvas-inner > .finder,
  .offcanvas-menu .offcanvas-inner > .sp-module:has(.search),
  .offcanvas-menu .offcanvas-inner > .sp-module:has(.mod-finder),
  .offcanvas-menu .offcanvas-inner > .sp-module:has(.finder),
  .offcanvas-menu .offcanvas-inner > .sp-module:has(.ecqa-search) {
    order: 99 !important;
  }

  /* Helix legt die aktivierte Suche in diesen eigenen Container. */
  body .offcanvas-menu .offcanvas-inner > .header-modules,
  body .offcanvas-menu .offcanvas-inner > .d-flex.header-modules,
  body .offcanvas-menu .offcanvas-inner > div:has(> .header-modules),
  body .offcanvas-menu .offcanvas-inner > div:has(.mod-finder),
  body .offcanvas-menu .offcanvas-inner > div:has(form.search) {
    order: 99 !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body .offcanvas-menu .offcanvas-inner > .header-modules .sp-module,
  body .offcanvas-menu .offcanvas-inner > .d-flex.header-modules .sp-module {
    width: 100% !important;
    margin: 0 !important;
  }

  .offcanvas-menu .menu > li {
    border-bottom: 1px solid #e6e9f0;
  }

  .offcanvas-menu .menu > li > a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 8px !important;
    color: #283548 !important;
    font-size: 18px !important;
    font-weight: 600;
  }

  /* Helix-Untermenüpfeile rechts neben dem Menütext platzieren. */
  .offcanvas-menu .menu > li.menu-parent > a,
  .offcanvas-menu .menu > li.deeper > a,
  .offcanvas-menu .menu > li.parent > a {
    padding-right: 46px !important;
  }

  .offcanvas-menu .menu > li > .menu-toggler,
  .offcanvas-menu .menu > li > a > .menu-toggler,
  .offcanvas-menu .menu > li > a .menu-toggler,
  .offcanvas-menu .menu > li > .menu-child-toggler {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .offcanvas-menu .menu > li.menu-parent,
  .offcanvas-menu .menu > li.deeper,
  .offcanvas-menu .menu > li.parent {
    position: relative !important;
  }

  .offcanvas-menu .menu-child,
  .offcanvas-menu .menu .menu-child {
    margin: 3px 0 10px 8px !important;
    padding: 6px !important;
    background: #f5f7fb !important;
    border: 1px solid #e8ebf2 !important;
    border-radius: 10px !important;
  }

  .offcanvas-menu .menu-child li,
  .offcanvas-menu .menu-child li:hover,
  .offcanvas-menu .menu-child li.active {
    background: transparent !important;
    border: 0 !important;
  }

  .offcanvas-menu .menu-child li a {
    display: block !important;
    width: 100% !important;
    padding: 9px 11px !important;
    color: #526077 !important;
    background: transparent !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    line-height: 1.45;
    transition: color .2s ease, background-color .2s ease !important;
  }

  .offcanvas-menu .menu-child li.active > a,
  .offcanvas-menu .menu-child li:hover > a {
    color: #2f419d !important;
    background: #ffffff !important;
  }

  /* Suchmodul in der Modulposition "offcanvas" */
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .sp-module-content,
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) form,
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .input-group,
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) input {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px 44px 10px 14px !important;
    color: #283548 !important;
    background: #ffffff !important;
    border: 1px solid #d8deeb !important;
    border-radius: 10px !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 15px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) input:focus {
    border-color: #30449d !important;
    box-shadow: 0 0 0 3px rgba(48, 68, 157, 0.12) !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) button {
    position: absolute !important;
    z-index: 3 !important;
    top: 7px !important;
    right: 7px !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #2039a0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Mobile Suchvorschläge direkt unter dem Eingabefeld. */
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul {
    position: absolute !important;
    z-index: 10000 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    max-height: 280px !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    color: #283548 !important;
    background: #ffffff !important;
    border: 1px solid #e0e5ed !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 35px rgba(17, 28, 47, 0.16) !important;
    list-style: none !important;
    transform: none !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul[hidden],
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul:empty {
    display: none !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul::before {
    display: none !important;
    content: none !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: #283548 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul > li:hover,
  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul > li[aria-selected="true"] {
    color: #2039a0 !important;
    background: #f2f4fb !important;
  }

  .offcanvas-menu :is(.ecqa-search, .mod-finder, .finder, .search) .awesomplete > ul mark {
    padding: 0 !important;
    color: #2039a0 !important;
    background: transparent !important;
    font-weight: 700 !important;
  }

  .com-finder.finder {
    padding: 56px 30px;
  }
}

@media (max-width: 767.98px) {
  #sp-header #sp-logo .logo > a {
    width: 100px !important;
    height: 58px !important;
  }

  .com-finder.finder {
    padding: 44px 20px;
  }

  .com-finder.finder .finder__search {
    margin-bottom: 30px;
    padding: 20px;
    border-radius: 14px;
  }

  .com-finder.finder .finder__search .input-group {
    flex-direction: column;
  }

  .com-finder.finder .finder__search .btn,
  .com-finder.finder .finder__search button {
    width: 100%;
  }
}

/* =========================================================
   FOOTER – ICONS UND TEXTE AUF EINER HÖHE
   ========================================================= */

#sp-footer .row,
#sp-footer .container-inner,
#sp-footer .sp-module-content {
  align-items: center !important;
}

#sp-footer .sp-module,
#sp-footer p,
#sp-footer ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#sp-footer a,
#sp-footer .contact-info,
#sp-footer .social-icons,
#sp-footer .social-icons > li,
#sp-footer .sp-contact-info,
#sp-footer .sp-contact-info > li {
  display: inline-flex !important;
  align-items: center !important;
}

#sp-footer .contact-info,
#sp-footer .sp-contact-info,
#sp-footer .social-icons {
  flex-wrap: wrap;
  gap: 10px 16px;
}

#sp-footer i,
#sp-footer svg {
  flex: 0 0 auto;
  width: 1em;
  min-width: 1em;
  margin-right: 6px;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  #sp-footer .row,
  #sp-footer .container-inner {
    justify-content: center !important;
    text-align: center;
  }

  #sp-footer [class*="col-"] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
  }
}
/* =========================================================
   ECQA – GLOBALE HEADER-SUCHE
   Ausschließlich in die globale Custom CSS einfügen.
   ========================================================= */

@media (min-width: 992px) {
    #sp-header .ecqa-search,
    #sp-header .ecqa-search .sp-module-content,
    #sp-header .ecqa-search form,
    #sp-header .ecqa-search .input-group {
        position: relative !important;
        overflow: visible !important;
    }

    #sp-header .ecqa-search {
        display: flex !important;
        flex: 0 0 52px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        margin: 0 0 0 22px !important;
        padding: 0 !important;
    }

    #sp-header .ecqa-search .sp-module-content,
    #sp-header .ecqa-search form,
    #sp-header .ecqa-search .input-group {
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #sp-header .ecqa-search .input-group {
        display: block !important;
    }

    /* Beschriftung nur für Screenreader behalten. */
    #sp-header .ecqa-search label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* Awesomplete schneidet das nach links öffnende Feld nicht ab. */
    #sp-header .ecqa-search .awesomplete {
        position: static !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Suchfeld geschlossen. */
    #sp-header .ecqa-search .awesomplete > input,
    #sp-header .ecqa-search input[type="search"],
    #sp-header .ecqa-search input[type="text"] {
        position: absolute !important;
        z-index: 9998 !important;
        top: 60px !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        box-sizing: border-box !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 50px !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #283548 !important;
        background: #ffffff !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        outline: none !important;
        box-shadow: none !important;
        font-family: "Open Sans", sans-serif !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        transition: width 0.3s ease, padding 0.3s ease,
                    opacity 0.2s ease, border-color 0.2s ease,
                    box-shadow 0.2s ease !important;
    }

    /* Suchfeld unterhalb der Lupe öffnen. */
    #sp-header .ecqa-search:hover .awesomplete > input,
    #sp-header .ecqa-search:focus-within .awesomplete > input,
    #sp-header .ecqa-search:hover input[type="search"],
    #sp-header .ecqa-search:focus-within input[type="search"],
    #sp-header .ecqa-search:hover input[type="text"],
    #sp-header .ecqa-search:focus-within input[type="text"] {
        width: 255px !important;
        min-width: 255px !important;
        padding: 11px 16px !important;
        border-color: #d8deeb !important;
        box-shadow: 0 8px 22px rgba(17, 28, 47, 0.10) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #sp-header .ecqa-search .awesomplete > input:focus,
    #sp-header .ecqa-search input[type="search"]:focus,
    #sp-header .ecqa-search input[type="text"]:focus {
        border-color: #30449d !important;
        box-shadow: 0 0 0 3px rgba(48, 68, 157, 0.12),
                    0 8px 22px rgba(17, 28, 47, 0.10) !important;
    }

    /* Unsichtbare Hover-Brücke zwischen Lupe und Suchfeld. */
    #sp-header .ecqa-search form::after {
        content: "" !important;
        position: absolute !important;
        z-index: 9997 !important;
        top: 52px !important;
        right: 0 !important;
        display: block !important;
        width: 255px !important;
        height: 8px !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    /* Button: vorhandenen Text und vorhandene Icons ausblenden. */
    #sp-header .ecqa-search button {
        position: absolute !important;
        z-index: 9999 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: transparent !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 10px !important;
        outline: none !important;
        box-shadow: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        cursor: pointer !important;
        transform: none !important;
        transition: background-color 0.2s ease !important;
    }

    #sp-header .ecqa-search button svg,
    #sp-header .ecqa-search button i,
    #sp-header .ecqa-search button span {
        display: none !important;
    }

    #sp-header .ecqa-search button:hover,
    #sp-header .ecqa-search button:focus {
        background: #f2f4fb !important;
    }

    /* Lupe ohne Icon-Font zeichnen. */
    #sp-header .ecqa-search button::before {
        content: "" !important;
        position: absolute !important;
        top: 16px !important;
        left: 16px !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 14px !important;
        height: 14px !important;
        border: 2px solid #182b78 !important;
        border-radius: 50% !important;
        transform: none !important;
    }

    #sp-header .ecqa-search button::after {
        content: "" !important;
        position: absolute !important;
        top: 29px !important;
        left: 29px !important;
        display: block !important;
        width: 7px !important;
        height: 2px !important;
        background: #182b78 !important;
        border: 0 !important;
        border-radius: 2px !important;
        transform: rotate(45deg) !important;
        transform-origin: left center !important;
    }

    /* Vorschläge direkt unter dem geöffneten Eingabefeld. */
    #sp-header .ecqa-search .awesomplete > ul {
        position: absolute !important;
        z-index: 10000 !important;
        top: 118px !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        box-sizing: border-box !important;
        width: 255px !important;
        min-width: 255px !important;
        max-width: 255px !important;
        max-height: 360px !important;
        margin: 0 !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: #283548 !important;
        background: #ffffff !important;
        border: 1px solid #e0e5ed !important;
        border-radius: 12px !important;
        box-shadow: 0 14px 35px rgba(17, 28, 47, 0.16),
                    0 4px 10px rgba(17, 28, 47, 0.06) !important;
        list-style: none !important;
        transform: none !important;
    }

    #sp-header .ecqa-search .awesomplete > ul[hidden],
    #sp-header .ecqa-search .awesomplete > ul:empty {
        display: none !important;
    }

    #sp-header .ecqa-search .awesomplete > ul::before {
        display: none !important;
        content: none !important;
    }

    #sp-header .ecqa-search .awesomplete > ul > li {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 11px 13px !important;
        color: #283548 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 8px !important;
        font-family: "Open Sans", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        white-space: normal !important;
        cursor: pointer !important;
        transition: color 0.2s ease, background-color 0.2s ease !important;
    }

    #sp-header .ecqa-search .awesomplete > ul > li + li {
        margin-top: 2px !important;
    }

    #sp-header .ecqa-search .awesomplete > ul > li:hover,
    #sp-header .ecqa-search .awesomplete > ul > li[aria-selected="true"] {
        color: #2039a0 !important;
        background: #f2f4fb !important;
    }

    #sp-header .ecqa-search .awesomplete > ul > li mark {
        padding: 0 !important;
        color: #2039a0 !important;
        background: transparent !important;
        font-weight: 700 !important;
    }
}

/* =========================================================
   FINALER GLOBALER MOBILE-OVERRIDE
   Absichtlich am Dateiende: überschreibt Helix-Style-Regeln.
   ========================================================= */

@media (max-width: 991.98px) {
  /* Größeres einzelnes Logo im geöffneten Menü. */
  html body .offcanvas-menu .logo,
  html body .offcanvas-menu .logo > a {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    height: 125px !important;
    min-height: 125px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
  }

  html body .offcanvas-menu .logo > a::before {
    width: 100% !important;
    height: 100% !important;
    background-image: url('../../../images/Logo/ecqa-gmbh-2.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }

  html body .offcanvas-menu .logo > a > img,
  html body .offcanvas-menu .logo > a > picture,
  html body .offcanvas-menu .logo > a > span {
    display: none !important;
  }

  /* Untermenü passend zum Desktop: transparent und ohne Box. */
  html body .offcanvas-menu .offcanvas-inner .sp-module ul.menu li ul.menu-child,
  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child {
    box-sizing: border-box !important;
    width: calc(100% - 18px) !important;
    margin: 2px 0 10px 18px !important;
    padding: 2px 0 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li > a,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li > a {
    position: relative !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 2px 7px !important;
    color: #526077 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
  }

  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li > a:hover,
  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li.active > a,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li > a:hover,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li.active > a {
    color: #2039a0 !important;
    background: transparent !important;
  }

  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li > a::after,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li > a::after {
    content: "" !important;
    position: absolute !important;
    right: 2px !important;
    bottom: 3px !important;
    left: 2px !important;
    display: block !important;
    height: 1px !important;
    background: #2f419d !important;
    border: 0 !important;
    opacity: 0 !important;
    transform: scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform .25s ease, opacity .2s ease !important;
  }

  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li > a:hover::after,
  html body .offcanvas-menu .offcanvas-inner ul.menu li ul.menu-child > li.active > a::after,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li > a:hover::after,
  html body .offcanvas-menu .offcanvas-inner .menu .menu-child > li.active > a::after {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  /* Helix-Suche unmittelbar unter der Hauptmenüliste. */
  html body .offcanvas-menu .offcanvas-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  html body .offcanvas-menu .offcanvas-inner > .header-modules,
  html body .offcanvas-menu .offcanvas-inner > .d-flex.header-modules,
  html body .offcanvas-menu .offcanvas-inner > div:has(.mod-finder),
  html body .offcanvas-menu .offcanvas-inner > div:has(form.search) {
    order: 999 !important;
    width: 100% !important;
    margin: -5px 0 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
  }

  html body .offcanvas-menu .offcanvas-inner .header-modules .sp-module,
  html body .offcanvas-menu .offcanvas-inner .header-modules .sp-module-content,
  html body .offcanvas-menu .offcanvas-inner .header-modules form,
  html body .offcanvas-menu .offcanvas-inner .header-modules .mod-finder,
  html body .offcanvas-menu .offcanvas-inner .header-modules .finder,
  html body .offcanvas-menu .offcanvas-inner .header-modules .search {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /*
   * Suche auch bei geöffneten Untermenüs dauerhaft sichtbar halten.
   * Helix macht aus .offcanvas-inner sonst einen eigenen Scrollbereich
   * und schiebt das zuletzt angeordnete Suchmodul unter den Fensterrand.
   */
  html body .offcanvas-menu {
    position: fixed !important;
    overflow: hidden !important;
  }

  html body .offcanvas-menu .offcanvas-inner {
    position: relative !important;
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: 34px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html body .offcanvas-menu .offcanvas-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  html body .offcanvas-menu .offcanvas-inner > .header-modules,
  html body .offcanvas-menu .offcanvas-inner > .d-flex.header-modules,
  html body .offcanvas-menu .offcanvas-inner > div:has(.mod-finder),
  html body .offcanvas-menu .offcanvas-inner > div:has(form.search) {
    position: relative !important;
    z-index: 2 !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    order: 999 !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /*
   * Mobiler Kopfbereich im geschlossenen Zustand:
   * etwas höherer weißer Balken und ein gut sichtbares, mittiges Logo.
   */
  html body #sp-header {
    height: 82px !important;
    min-height: 82px !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html body #sp-header > .container,
  html body #sp-header > .container-fluid,
  html body #sp-header .container-inner,
  html body #sp-header .row {
    height: 82px !important;
    min-height: 82px !important;
  }

  html body #sp-header #sp-logo {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    left: 50% !important;
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  html body #sp-header #sp-logo .logo,
  html body #sp-header #sp-logo .logo > a {
    display: block !important;
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #sp-header #sp-logo .logo > a::before {
    width: 100% !important;
    height: 100% !important;
    background-position: center !important;
    background-size: contain !important;
  }

  html body #sp-header #offcanvas-toggler,
  html body #sp-header .offcanvas-toggler {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   DESKTOP-RÜCKSETZUNG DES HEADERS
   Steht absichtlich am Dateiende und überschreibt Helix.
   ========================================================= */
@media (min-width: 992px) {
  html body #sp-header {
    height: 128px !important;
    min-height: 128px !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html body #sp-header > .container,
  html body #sp-header > .container-fluid,
  html body #sp-header .container-inner,
  html body #sp-header .row {
    height: 128px !important;
    min-height: 128px !important;
  }

  html body #sp-header #sp-logo {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 12px !important;
    transform: none !important;
  }

  html body #sp-header #sp-logo .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: 128px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #sp-header #sp-logo .logo > a {
    display: block !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    height: 108px !important;
    min-height: 108px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Sichtbare Logografik vergrößern, ohne den Header wieder höher zu machen. */
  html body #sp-header #sp-logo .logo > a::before {
    width: 100% !important;
    height: 100% !important;
    background-position: center !important;
    background-size: contain !important;
    transform: scale(1.35) !important;
    transform-origin: center !important;
  }

  html body #sp-header #sp-menu,
  html body #sp-header #sp-menu > .sp-column {
    height: 128px !important;
    min-height: 128px !important;
    align-items: center !important;
  }
}

/* =========================================================
   ECQA – EINHEITLICHE HAUPTÜBERSCHRIFTEN ALLER MODULE
   Aus der bisherigen Helix-CSS übernommen. Der Block steht
   absichtlich am Dateiende und gilt damit für alle Styles.
   ========================================================= */
html body h2.ecqa-section-title.ecqa-section-title,
html body .ecqa-hero.has-unified-heading h1,
html body .ecqa-hero h1,
html body .ecqa-titlehero h1,
html body .ecqa-accordion__heading,
html body .ecqa-contentblock__headline,
html body .ecqa-countercards__header h2,
html body .ecqa-downloads__header h2,
html body .ecqa-featurecards__header h2,
html body .ecqa-linkcards__header h2,
html body .ecqa-logocarousel__header h2,
html body .ecqa-news__header h2,
html body .ecqa-newsletter h2,
html body .ecqa-project__title,
html body .ecqa-projects__header h2,
html body .ecqa-team__header h2,
html body .ecqa-testimonials__headline,
html body .ecqa-textbanner h2,
html body .ecqa-trainingproviders__header h2,
html body .ecqa-video-services__heading,
html body .sp-module-content > h1,
html body .sp-module-content > h2,
html body .sp-module-content > div > h1,
html body .sp-module-content > div > h2,
html body .sp-module-content [class*="ecqa-"] h1,
html body .sp-module-content [class*="ecqa-"] h2 {
  font-family: inherit !important;
  font-size: 36px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  font-synthesis: none !important;
}

@media (max-width: 991px) {
  html body h2.ecqa-section-title.ecqa-section-title,
  html body .ecqa-hero.has-unified-heading h1,
  html body .ecqa-hero h1,
  html body .ecqa-titlehero h1,
  html body .ecqa-accordion__heading,
  html body .ecqa-contentblock__headline,
  html body .ecqa-countercards__header h2,
  html body .ecqa-downloads__header h2,
  html body .ecqa-featurecards__header h2,
  html body .ecqa-linkcards__header h2,
  html body .ecqa-logocarousel__header h2,
  html body .ecqa-news__header h2,
  html body .ecqa-newsletter h2,
  html body .ecqa-project__title,
  html body .ecqa-projects__header h2,
  html body .ecqa-team__header h2,
  html body .ecqa-testimonials__headline,
  html body .ecqa-textbanner h2,
  html body .ecqa-trainingproviders__header h2,
  html body .ecqa-video-services__heading,
  html body .sp-module-content > h1,
  html body .sp-module-content > h2,
  html body .sp-module-content > div > h1,
  html body .sp-module-content > div > h2,
  html body .sp-module-content [class*="ecqa-"] h1,
  html body .sp-module-content [class*="ecqa-"] h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 767px) {
  html body h2.ecqa-section-title.ecqa-section-title,
  html body .ecqa-hero.has-unified-heading h1,
  html body .ecqa-hero h1,
  html body .ecqa-titlehero h1,
  html body .ecqa-accordion__heading,
  html body .ecqa-contentblock__headline,
  html body .ecqa-countercards__header h2,
  html body .ecqa-downloads__header h2,
  html body .ecqa-featurecards__header h2,
  html body .ecqa-linkcards__header h2,
  html body .ecqa-logocarousel__header h2,
  html body .ecqa-news__header h2,
  html body .ecqa-newsletter h2,
  html body .ecqa-project__title,
  html body .ecqa-projects__header h2,
  html body .ecqa-team__header h2,
  html body .ecqa-testimonials__headline,
  html body .ecqa-textbanner h2,
  html body .ecqa-trainingproviders__header h2,
  html body .ecqa-video-services__heading,
  html body .sp-module-content > h1,
  html body .sp-module-content > h2,
  html body .sp-module-content > div > h1,
  html body .sp-module-content > div > h2,
  html body .sp-module-content [class*="ecqa-"] h1,
  html body .sp-module-content [class*="ecqa-"] h2 {
    font-size: 28px !important;
    font-weight: 600 !important;
  }
}

/* =========================================================
   LETZTER MODULTITEL-OVERRIDE
   Die Module liefern selbst denselben Selektor mit
   font-weight: 400 !important aus. Die zusätzliche Wiederholung
   der Klasse erhöht gezielt die Spezifität gegenüber der Modul-CSS.
   ========================================================= */
html body h2.ecqa-section-title.ecqa-section-title.ecqa-section-title,
html body h2.ecqa-contentblock__headline.ecqa-section-title.ecqa-section-title,
html body .ecqa-contentblock h2.ecqa-section-title.ecqa-section-title,
html body .ecqa-countercards h2.ecqa-section-title.ecqa-section-title {
  color: #111c2f !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  font-synthesis: none !important;
}

/* =========================================================
   ECQA – DESKTOP MENÜ / SUCHE: HOVER-KONFLIKT FIX
   Verhindert, dass die unsichtbare Such-Hover-Brücke über
   dem rechten Hauptmenü-Untermenü (z.B. Downloads > Archiv) liegt.
   ========================================================= */
@media (min-width: 992px) {

  /* Hauptmenü und seine Dropdowns liegen vor der Such-Hover-Fläche. */
  html body #sp-header #sp-menu,
  html body #sp-header .sp-megamenu-parent {
    position: relative !important;
    z-index: 10020 !important;
  }

  html body #sp-header .sp-megamenu-parent > li > .sp-dropdown {
    z-index: 10030 !important;
  }

  /* Die Suche bleibt normal benutzbar, überdeckt aber kein Menü-Dropdown. */
  html body #sp-header .ecqa-search {
    position: relative !important;
    z-index: 10010 !important;
  }

  /* Die bisher 255px breite unsichtbare Hover-Brücke war der Auslöser.
     Sie darf nur noch direkt unter der 52px breiten Such-Lupe liegen. */
  html body #sp-header .ecqa-search form::after {
    right: 0 !important;
    width: 52px !important;
    height: 8px !important;
    pointer-events: auto !important;
  }

  /* Das sichtbare Suchfeld und die echten Vorschläge dürfen sich beim
     tatsächlichen Öffnen der Suche weiterhin über dem Seiteninhalt befinden. */
  html body #sp-header .ecqa-search .awesomplete > input,
  html body #sp-header .ecqa-search input[type="search"],
  html body #sp-header .ecqa-search input[type="text"] {
    z-index: 10011 !important;
  }

  html body #sp-header .ecqa-search .awesomplete > ul {
    z-index: 10012 !important;
  }
}

/* =========================================================
   ECQA – DESKTOP-SUCHE: LUPEN-HINTERGRUND TRANSPARENT
   ========================================================= */
@media (min-width: 992px) {
  html body #sp-header .ecqa-search button,
  html body #sp-header .ecqa-search button:hover,
  html body #sp-header .ecqa-search button:focus,
  html body #sp-header .ecqa-search button:active,
  html body #sp-header .ecqa-search:focus-within button {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   ECQA – ANKER-OFFSET FÜR STICKY HEADER
   Nur Position beim Anspringen von Ankern; verändert kein Layout.
   ========================================================= */

@media (min-width: 992px) {
  html {
    scroll-padding-top: 145px;
  }

  [id] {
    scroll-margin-top: 145px;
  }
}

@media (max-width: 991.98px) {
  html {
    scroll-padding-top: 100px;
  }

  [id] {
    scroll-margin-top: 100px;
  }
}
/* =========================================================
   ECQA – BACK TO TOP BUTTON
   ========================================================= */

html body .sp-scroll-up {
    background: #222d7f !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(34, 45, 127, 0.22) !important;
    transition: all 0.25s ease !important;
}

html body .sp-scroll-up:hover,
html body .sp-scroll-up:focus {
    background: #18215f !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(24, 33, 95, 0.28) !important;
}

html body .sp-scroll-up i,
html body .sp-scroll-up svg {
    color: inherit !important;
    fill: currentColor !important;
}
/* =========================================================
   ECQA – GLOBAL PRIMARY BUTTON
   Einheitlicher Stil für CMS-/Editor-Buttons
   ========================================================= */

a.btn.btn-primary,
button.btn.btn-primary,
.btn.btn-primary {
    background-color: #29358f !important;
    border-color: #29358f !important;
    color: #ffffff !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #202a73 !important;
    border-color: #202a73 !important;
    color: #ffffff !important;

    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(41, 53, 143, .20);
    text-decoration: none !important;
}
/* =========================================================
   JOOMLA ARTICLE NAVIGATION – PREV / NEXT
   ECQA Button Design
   ========================================================= */

.pagenavigation .pagination .page-link,
.pagenavigation .pagination a,
.pager.pagenav a,
ul.pager.pagenav a,
.pagination-prev a,
.pagination-next a {
    background: #29358f !important;
    border-color: #29358f !important;
    color: #ffffff !important;

    border-radius: 6px !important;
    padding: 10px 18px !important;

    font-family: "Open Sans", sans-serif !important;
    font-weight: 600 !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Hover */
.pagenavigation .pagination .page-link:hover,
.pagenavigation .pagination a:hover,
.pager.pagenav a:hover,
ul.pager.pagenav a:hover,
.pagination-prev a:hover,
.pagination-next a:hover {
    background: #222d7a !important;
    border-color: #222d7a !important;
    color: #ffffff !important;

    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(41, 53, 143, 0.18);
}

/* Tastatur / Fokus */
.pagenavigation .pagination .page-link:focus,
.pagenavigation .pagination a:focus,
.pager.pagenav a:focus,
ul.pager.pagenav a:focus {
    background: #222d7a !important;
    border-color: #222d7a !important;
    color: #ffffff !important;
}
/* =========================================================
   JOOMLA ARTICLE – BUTTONS IM ARTICLE BODY
   ========================================================= */

html body div.view-article .article-details div[itemprop="articleBody"] a.btn,
html body div.view-article .article-details div[itemprop="articleBody"] a.btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 52px !important;
    margin-top: 8px !important;
    padding: 13px 26px !important;

    color: #ffffff !important;
    background: #29358f !important;
    border: 2px solid #29358f !important;
    border-radius: 6px !important;

    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    box-shadow: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

/* Hover */
html body div.view-article .article-details div[itemprop="articleBody"] a.btn:hover,
html body div.view-article .article-details div[itemprop="articleBody"] a.btn.btn-primary:hover {
    color: #29358f !important;
    background: #ffffff !important;
    border-color: #29358f !important;

    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(41, 53, 143, .20) !important;
}

/* Fokus */
html body div.view-article .article-details div[itemprop="articleBody"] a.btn:focus,
html body div.view-article .article-details div[itemprop="articleBody"] a.btn.btn-primary:focus {
    color: #29358f !important;
    background: #ffffff !important;
    border-color: #29358f !important;
}
/* Joomla Artikel – ECQA Buttons */
body.view-article .article-details > [itemprop="articleBody"] a.btn.btn-primary {
    background: #29358f !important;
    border-color: #29358f !important;
    color: #ffffff !important;
}

body.view-article .article-details > [itemprop="articleBody"] a.btn.btn-primary:hover,
body.view-article .article-details > [itemprop="articleBody"] a.btn.btn-primary:focus {
    background: #222d7a !important;
    border-color: #222d7a !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(41, 53, 143, 0.18) !important;
}
/* =========================================================
   ECQA – MOBILE / OFFCANVAS MENU
   Blaue Untermenü-Pfeile
   ========================================================= */

/* Pfeil rechts */
body .offcanvas-menu .offcanvas-inner
ul.menu > li.menu-parent > a > .menu-toggler::after {
    color: #29358f !important;
    opacity: 1 !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
}

/* Beim geöffneten Menü Pfeil drehen */
body .offcanvas-menu .offcanvas-inner
ul.menu > li.menu-parent.menu-parent-open > a > .menu-toggler::after,
body .offcanvas-menu .offcanvas-inner
ul.menu > li.menu-parent[aria-expanded="true"] > a > .menu-toggler::after {
    transform: rotate(90deg) !important;
}

/* Menüpunkt beim Hover/Antippen ebenfalls blau */
body .offcanvas-menu .offcanvas-inner
ul.menu > li > a:hover,
body .offcanvas-menu .offcanvas-inner
ul.menu > li > a:focus {
    color: #29358f !important;
    background: transparent !important;
}

@media (max-width: 575px) {
    [id] {
        scroll-margin-top: 120px;
    }
}
/* =========================================================
   ECQA – NexusConsent Cookie Banner
   ========================================================= */

/* Banner als kompakte schwebende Box */
.nexusconsent-banner.nexusconsent-panel {
    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 40px) !important;
    max-width: 1080px !important;
    min-height: 0 !important;

    padding: 22px 28px !important;
    gap: 14px !important;

    background: #ffffff !important;
    border: 1px solid rgba(17, 28, 47, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(17, 28, 47, 0.18) !important;

    color: #111c2f !important;
}

/* Text kompakter */
.nexusconsent-banner .nexusconsent-text {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #111c2f !important;
}

/* "Current: ..." im normalen Banner ausblenden */
.nexusconsent-banner .nexusconsent-status {
    display: none !important;
}

/* Kategorien kompakter */
.nexusconsent-banner .nxc-cats {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
}

/* Necessary weniger dominant */
.nexusconsent-banner .nxc-cat-necessary {
    opacity: .72;
    margin: 0 0 5px !important;
}

/* Optional / Settings */
.nexusconsent-banner .nxc-optional {
    margin: 0 !important;
}

.nexusconsent-banner .nxc-optional > summary {
    cursor: pointer;
    font-weight: 600 !important;
    color: #111c2f !important;
}

/* Buttonbereich */
.nexusconsent-banner .nexusconsent-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin: 2px 0 0 !important;
}

/* Alle Buttons */
.nexusconsent-banner .nexusconsent-btn {
    min-height: 42px !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    transition: all .2s ease !important;
}

/* Accept */
.nexusconsent-banner .nexusconsent-accept {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

.nexusconsent-banner .nexusconsent-accept:hover {
    background: #ffffff !important;
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Decline */
.nexusconsent-banner .nexusconsent-decline {
    background: #ffffff !important;
    color: #111c2f !important;
    border: 1px solid #cbd3df !important;
}

.nexusconsent-banner .nexusconsent-decline:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* Save selection */
.nexusconsent-banner .nxc-save {
    background: #ffffff !important;
    color: #111c2f !important;
    border: 1px solid #cbd3df !important;
}

.nexusconsent-banner .nxc-save:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

/* Cookie Settings dezent */
.nexusconsent-banner .nexusconsent-revoke {
    background: transparent !important;
    border-color: transparent !important;
    color: #5f6b7a !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.nexusconsent-banner .nexusconsent-revoke:hover {
    color: #3b82f6 !important;
    background: transparent !important;
}

/* Tablet / Handy */
@media (max-width: 767px) {
    .nexusconsent-banner.nexusconsent-panel {
        width: calc(100% - 24px) !important;
        bottom: 12px !important;
        padding: 18px !important;
        border-radius: 12px !important;
        gap: 12px !important;
    }

    .nexusconsent-banner .nexusconsent-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .nexusconsent-banner .nexusconsent-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .nexusconsent-banner .nexusconsent-btn {
        width: 100% !important;
        padding: 10px 12px !important;
    }
}

@media (max-width: 480px) {
    .nexusconsent-banner .nexusconsent-actions {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================================
   ECQA – NexusConsent Cookie Banner
   ========================================================= */

/* Gesamter Cookie-Banner */
.nexusconsent-banner {
    left: 50% !important;
    right: auto !important;
    bottom: 28px !important;
    transform: translateX(-50%) !important;

    width: calc(100% - 48px) !important;
    max-width: 1320px !important;

    background: #ffffff !important;
    color: #111c2f !important;

    border: 1px solid rgba(17, 28, 47, 0.08) !important;
    border-radius: 18px !important;

    padding: 28px 32px !important;

    box-shadow:
        0 18px 50px rgba(17, 28, 47, 0.14) !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 310px !important;
    column-gap: 42px !important;
    align-items: center !important;

    min-height: 0 !important;
}


/* ---------------------------------------------------------
   TEXTBEREICH
   --------------------------------------------------------- */

.nexusconsent-text {
    max-width: 820px !important;
    margin: 0 !important;
    padding-left: 72px !important;
    position: relative !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
    color: #354158 !important;
}


/* Überschrift erzeugen */
.nexusconsent-text::before {
    content: "Your privacy matters";
    display: block;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;

    color: #111c2f;
    margin-bottom: 8px;
}


/* Schild-Icon */
.nexusconsent-text::after {
    content: "♢";
    position: absolute;

    left: 4px;
    top: 5px;

    width: 46px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #2f3fa0;
    font-size: 38px;
    font-weight: 600;

    border-right: 1px solid #e2e6ee;
    padding-right: 18px;
}


/* Status-Zeile ausblenden */
.nexusconsent-status {
    display: none !important;
}


/* Links */
.nexusconsent-banner a {
    color: #2f3fa0 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}


/* ---------------------------------------------------------
   KATEGORIEN
   --------------------------------------------------------- */

.nxc-cats {
    grid-column: 1 !important;

    margin: 14px 0 0 72px !important;
    padding: 0 !important;

    background: transparent !important;

    font-size: 14px !important;
    color: #111c2f !important;
}


/* Necessary etwas dezenter */
.nxc-cat-necessary {
    font-size: 13px !important;
    color: #687286 !important;
    margin-bottom: 8px !important;
}


/* Optional Kategorien */
.nxc-optional {
    margin-top: 6px !important;
}

.nxc-optional summary {
    cursor: pointer !important;
    color: #111c2f !important;
    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   BUTTONBEREICH RECHTS
   --------------------------------------------------------- */

.nexusconsent-actions {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;

    gap: 9px !important;
    margin: 0 !important;
}


/* Alle Buttons */
.nexusconsent-btn {
    width: 100% !important;
    min-height: 48px !important;

    border-radius: 8px !important;

    padding: 11px 18px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}


/* ACCEPT ALL – ECQA BLAU */
.nexusconsent-accept {
    order: 1 !important;

    background: #2f3fa0 !important;
    border: 1px solid #2f3fa0 !important;
    color: #ffffff !important;
}

.nexusconsent-accept:hover,
.nexusconsent-accept:focus {
    background: #ffffff !important;
    border-color: #2f3fa0 !important;
    color: #2f3fa0 !important;
}


/* DECLINE */
.nexusconsent-decline {
    order: 2 !important;

    background: #ffffff !important;
    border: 1px solid #b8c0cf !important;
    color: #111c2f !important;
}

.nexusconsent-decline:hover,
.nexusconsent-decline:focus {
    border-color: #2f3fa0 !important;
    color: #2f3fa0 !important;
}


/* SAVE SELECTION
   brauchen wir in der kompakten Hauptansicht nicht */
.nexusconsent-save {
    order: 3 !important;
}


/* COOKIE SETTINGS wie ein dezenter Text-Link */
.nexusconsent-revoke {
    order: 4 !important;

    background: transparent !important;
    border: 0 !important;

    color: #2f3fa0 !important;

    min-height: auto !important;
    padding: 5px 10px !important;

    text-decoration: underline !important;
    font-weight: 500 !important;
}

.nexusconsent-revoke:hover,
.nexusconsent-revoke:focus {
    background: transparent !important;
    color: #111c2f !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .nexusconsent-banner {
        width: calc(100% - 32px) !important;
        bottom: 16px !important;

        grid-template-columns: 1fr !important;

        padding: 24px !important;
        row-gap: 20px !important;
    }

    .nexusconsent-actions {
        grid-column: 1 !important;
        grid-row: auto !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .nexusconsent-revoke {
        grid-column: 1 / -1 !important;
    }
}


/* ---------------------------------------------------------
   HANDY
   --------------------------------------------------------- */

@media (max-width: 575px) {

    .nexusconsent-banner {
        width: calc(100% - 20px) !important;
        bottom: 10px !important;

        border-radius: 14px !important;

        padding: 20px 18px !important;

        max-height: calc(100vh - 20px) !important;
        overflow-y: auto !important;
    }

    .nexusconsent-text {
        padding-left: 0 !important;

        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .nexusconsent-text::before {
        font-size: 19px !important;
    }

    /* Schild am Handy weglassen – spart Platz */
    .nexusconsent-text::after {
        display: none !important;
    }

    .nxc-cats {
        margin-left: 0 !important;
        font-size: 13px !important;
    }

    .nexusconsent-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .nexusconsent-btn {
        min-height: 44px !important;
        font-size: 13px !important;
    }
}
/* =========================================================
   ECQA NexusConsent – FINAL POLISH
   ========================================================= */


/* Banner etwas kompakter */
.nexusconsent-banner {
    padding: 24px 28px !important;
    grid-template-columns: minmax(0, 1fr) 296px !important;
    column-gap: 44px !important;
    border-radius: 16px !important;
}


/* Text ohne falsches Symbol */
.nexusconsent-text {
    padding-left: 0 !important;
    max-width: 790px !important;
}


/* Falsches Diamant-Symbol entfernen */
.nexusconsent-text::after {
    display: none !important;
}


/* Überschrift */
.nexusconsent-text::before {
    content: "Your privacy matters" !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #111c2f !important;
    margin-bottom: 7px !important;
}


/* Beschreibung */
.nexusconsent-text {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #354158 !important;
}


/* Kategorien direkt unter Text */
.nxc-cats {
    margin: 14px 0 0 0 !important;
}


/* Necessary dezenter */
.nxc-cat-necessary {
    font-size: 12.5px !important;
    color: #7b8495 !important;
}


/* Optional-Auswahl */
.nxc-optional summary {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #111c2f !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.nexusconsent-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}


/* ACCEPT ALL MUSS OBEN SEIN */
.nexusconsent-actions .nexusconsent-accept {
    order: 1 !important;

    background: #2f3fa0 !important;
    border-color: #2f3fa0 !important;
    color: #ffffff !important;
}


/* Hover passend zu euren ECQA Buttons */
.nexusconsent-actions .nexusconsent-accept:hover {
    background: #ffffff !important;
    border-color: #2f3fa0 !important;
    color: #2f3fa0 !important;
}


/* DECLINE an zweite Stelle */
.nexusconsent-actions .nexusconsent-decline {
    order: 2 !important;

    background: #ffffff !important;
    border: 1px solid #cbd1dc !important;
    color: #111c2f !important;
}


.nexusconsent-actions .nexusconsent-decline:hover {
    border-color: #2f3fa0 !important;
    color: #2f3fa0 !important;
}


/* SAVE SELECTION erst danach */
.nexusconsent-actions .nexusconsent-save {
    order: 3 !important;

    background: #ffffff !important;
    border: 1px solid #dce1e9 !important;
    color: #596274 !important;
}


/* Cookie Settings ganz unten als Link */
.nexusconsent-actions .nexusconsent-revoke {
    order: 4 !important;

    background: transparent !important;
    border: 0 !important;
    color: #2f3fa0 !important;

    min-height: auto !important;
    padding: 5px !important;

    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
}


/* Alle echten Buttons etwas eleganter */
.nexusconsent-actions .nexusconsent-btn:not(.nexusconsent-revoke) {
    min-height: 42px !important;
    border-radius: 7px !important;
    padding: 9px 16px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

    .nexusconsent-banner {
        padding: 20px !important;
    }

    .nexusconsent-text {
        padding-left: 0 !important;
    }

    .nxc-cats {
        margin-left: 0 !important;
    }

    .nexusconsent-actions {
        width: 100% !important;
    }
}
/* =========================================================
   SAVE SELECTION NUR BEI GEÖFFNETEN KATEGORIEN
   ========================================================= */

/* Standardmäßig verstecken */
.nexusconsent-banner .nxc-save {
    display: none !important;
}

/* Nur anzeigen, wenn "Choose optional categories" offen ist */
.nexusconsent-banner:has(.nxc-optional[open]) .nxc-save {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;

    background: #ffffff !important;
    color: #2f3fa0 !important;
    border: 1px solid #2f3fa0 !important;
    border-radius: 7px !important;

    font-weight: 600 !important;
}

/* Hover */
.nexusconsent-banner:has(.nxc-optional[open]) .nxc-save:hover {
    background: #2f3fa0 !important;
    color: #ffffff !important;
}
/* =========================================================
   NEXUS CONSENT – RESPONSIVE
   ========================================================= */

/* Tablet und Smartphone */
@media (max-width: 991px) {

    .nexusconsent-banner {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 30px) !important;
        max-width: 720px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        padding: 22px !important;
        gap: 14px !important;
        box-sizing: border-box !important;
    }

    .nexusconsent-banner > * {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}


/* Smartphone */
@media (max-width: 575px) {

    .nexusconsent-banner {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        padding: 20px !important;
        gap: 12px !important;
    }

    .nexusconsent-banner h2,
    .nexusconsent-banner h3 {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    .nexusconsent-banner p {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 12px !important;
    }

    .nexusconsent-banner button {
        width: 100% !important;
        max-width: none !important;
    }
}
/* =========================================================
   ECQA – Joomla Erfolgsmeldungen
   ========================================================= */

/* Container für Joomla Systemmeldungen */
#system-message-container {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    left: auto !important;
    top: auto !important;

    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    z-index: 99999 !important;
}


/* Erfolgsmeldung */
#system-message-container joomla-alert[type="info"],
#system-message-container joomla-alert[type="success"] {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 470px !important;
    max-width: calc(100vw - 40px) !important;
    min-height: 126px !important;

    margin: 0 !important;
    padding: 24px 48px 24px 126px !important;

    background: #ffffff !important;

    border: 0 !important;
    border-left: 8px solid #f6c546 !important;
    border-radius: 16px !important;

    box-shadow:
        0 14px 38px rgba(17, 28, 47, 0.18),
        0 3px 10px rgba(17, 28, 47, 0.08) !important;

    color: #536582 !important;
    overflow: visible !important;
}


/* ---------------------------------------------------------
   Blauer Kreis mit Häkchen
   --------------------------------------------------------- */

#system-message-container joomla-alert[type="info"]::before,
#system-message-container joomla-alert[type="success"]::before {
    content: "✓" !important;

    position: absolute !important;
    left: 29px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 52px !important;

    background: #2f3fa0 !important;
    color: #ffffff !important;

    border-radius: 50% !important;

    font-family: Arial, sans-serif !important;
    font-size: 31px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    box-shadow: 0 5px 13px rgba(47, 63, 160, 0.20) !important;
}


/* ---------------------------------------------------------
   Gelbe Trennlinie neben dem Icon
   --------------------------------------------------------- */

#system-message-container joomla-alert[type="info"]::after,
#system-message-container joomla-alert[type="success"]::after {
    content: "" !important;

    position: absolute !important;
    left: 105px !important;
    top: 24px !important;
    bottom: 24px !important;

    width: 2px !important;

    background: #f6c546 !important;
    border-radius: 2px !important;
}


/* ---------------------------------------------------------
   Joomla internen Aufbau zurücksetzen
   --------------------------------------------------------- */

#system-message-container joomla-alert .alert-wrapper {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* Überschrift */
#system-message-container joomla-alert .alert-heading {
    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    color: #2f3fa0 !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* Meldungstext */
#system-message-container joomla-alert .alert-message {
    margin: 0 !important;
    padding: 0 !important;

    color: #536582 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

#system-message-container joomla-alert .alert-message p {
    margin: 0 !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   X zum Schließen
   --------------------------------------------------------- */

#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .btn-close {
    position: absolute !important;

    top: 14px !important;
    right: 15px !important;
    left: auto !important;

    width: 26px !important;
    height: 26px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;

    color: #7d8797 !important;
    opacity: 1 !important;

    font-size: 22px !important;
    line-height: 26px !important;

    box-shadow: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

    #system-message-container {
        right: 14px !important;
        bottom: 18px !important;
        left: 14px !important;

        width: auto !important;
    }

    #system-message-container joomla-alert[type="info"],
    #system-message-container joomla-alert[type="success"] {
        width: 100% !important;
        max-width: none !important;
        min-height: 112px !important;

        padding:
            20px
            42px
            20px
            102px !important;

        border-left-width: 6px !important;
        border-radius: 14px !important;
    }

    #system-message-container joomla-alert[type="info"]::before,
    #system-message-container joomla-alert[type="success"]::before {
        left: 22px !important;

        width: 46px !important;
        height: 46px !important;

        font-size: 27px !important;
    }

    #system-message-container joomla-alert[type="info"]::after,
    #system-message-container joomla-alert[type="success"]::after {
        left: 88px !important;
        top: 20px !important;
        bottom: 20px !important;
    }

    #system-message-container joomla-alert .alert-heading {
        font-size: 16px !important;
    }

    #system-message-container joomla-alert .alert-message {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
}
/* =========================================================
   PACT FOR SKILLS LEADER LOGO – HEADER
   ========================================================= */

/* DESKTOP */
@media (min-width: 992px) {

    #sp-logo {
        position: relative;
        overflow: visible;
    }

    #sp-logo::after {
        content: "";
        position: absolute;

        /* Position rechts neben dem ECQA Logo */
        left: calc(100% + 28px);
        top: 50%;
        transform: translateY(-50%);

        width: 155px;
        height: 70px;

        background-image: url("/images/About/PFS-Leader-Badge-Full-Colour-01.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        pointer-events: none;
        z-index: 10;
    }
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    #sp-logo {
        position: relative;
        overflow: visible;
    }

    #sp-logo::after {
        content: "";
        position: absolute;

        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);

        width: 100px;
        height: 50px;

        background-image: url("/images/About/PFS-Leader-Badge-Full-Colour-01.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        pointer-events: none;
        z-index: 10;
    }
}


/* SEHR KLEINE HANDYS */
@media (max-width: 480px) {

    #sp-logo::after {
        left: calc(100% + 8px);
        width: 82px;
        height: 44px;
    }
}