.ResonanzMask {
  --slant-above: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 1440 10000'%3E%3Cpath d='M0 10000h1440V0L0 64z'/%3E%3C/svg%3E");
  --slant-below: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 1440 10000'%3E%3Cpath d='M1440 0H0v10000l1440-64z'/%3E%3C/svg%3E");
  --mask-repeat: no-repeat;
  --mask-size: 100%;
}
.ResonanzMask > .__back {
  -webkit-mask-image: var(--slant-above), var(--slant-below);
  mask-image: var(--slant-above), var(--slant-below);
  -webkit-mask-position: top left, bottom right;
  mask-position: top left, bottom right;
  -webkit-mask-repeat: var(--mask-repeat);
  mask-repeat: var(--mask-repeat);
  -webkit-mask-size: var(--mask-size);
  mask-size: var(--mask-size);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}
.ResonanzMask.maskAbove > .__back {
  -webkit-mask-image: var(--slant-above);
  mask-image: var(--slant-above);
  -webkit-mask-position: top left;
  mask-position: top left;
}
.ResonanzMask.maskBelow > .__back {
  -webkit-mask-image: var(--slant-below);
  mask-image: var(--slant-below);
  -webkit-mask-position: bottom right;
  mask-position: bottom right;
}

.formula {
  all: revert;
  box-sizing: border-box;
  cursor: copy;
  display: inline-grid;
}

.formula * {
  pointer-events: none;
}

.formula mjx-container[jax="CHTML"][display="true"] {
  display: inline-grid;
  margin:unset;
}

.teamBlock {
  --congap: 0;
  --colr: 1em;
  --colshade: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  
  transition: box-shadow var(--transition-ou);
}

.teamBlock > .__conLoop > .__fore {
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content 1fr min-content;
  overflow: hidden;
}

.teamBlock--image {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.teamBlock--name {
  grid-column: 1 / 2;
  grid-row: 2 / 3;

  --conp: var(--team-block-padding, 1.5em) var(--team-block-padding, 1.5em) calc(var(--team-block-padding, 1.5em) / 2);
}
.teamBlock--position {
  grid-column: 1 / 2;
  grid-row: 3 / 4;

  --conp: calc(var(--team-block-padding, 1.5em) / 2) var(--team-block-padding, 1.5em) var(--team-block-padding, 1.5em);
}
.teamBlock--button {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.teamBlock--button > .__fore > .__btn {
  width: 100%;
  justify-content: center;
}

.teamBlock--blurb {
  grid-column: 1 / 2;
  grid-row: 1 / 4;

  --conp: var(--team-block-padding, 1.5em);

  position: relative;
  z-index: 1;

  clip-path: inset(100% 0 0 0 round 0);
  transition: clip-path var(--transition-out);
}
.teamBlock--blurb > .__fore {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: scroll;

  mask-image: linear-gradient(#000, #000 calc(100% -(var(--line-height, 1.3125em)* 2)), transparent);
}
.teamBlock--blurb > .__back > .__color {
  background-color: var(--tertiary) !important;
  height: 0%;
}

.teamBlock--image:hover ~ .teamBlock--blurb,
.teamBlock--name:hover ~ .teamBlock--blurb,
.teamBlock--position:hover ~ .teamBlock--blurb,
.teamBlock--blurb:hover,
.teamBlock:focus-within .teamBlock--blurb{
  clip-path: inset(0 0 0 0 round 0);
  
  transition: clip-path var(--transition-in);
}




.hover-access > .__conLoop > .__fore {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.hover-access--image {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1;
}
.hover-access--text {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 2;

  clip-path: inset(100% 0 0 0 round 0);
  transition: clip-path var(--transition-out);
}
.hover-access--text > .__fore {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hover-access:hover .hover-access--text {
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path var(--transition-in);
}
.heroHeadline h1 {
  line-height: 1.02 !important;
}
@media (max-width: 767px) {
  .mobile-headline-first,
  .mobile-headline-first .dnd-row,
  .mobile-headline-first .row,
  .mobile-headline-first .columns {
    display: flex;
    flex-direction: column;
  }

  .mobile-headline-first .hero-copy {
    order: 1;
  }

  .mobile-headline-first .hero-image {
    order: 2;
  }
}
/* ==============================
   Resonanz Swiss Custom Grid Hover
   ============================== */

.ResonanzMask.resonanz-custom-grid img,
.resonanz-custom-grid img {
  transition: transform 0.55s ease, filter 0.35s ease;
  will-change: transform;
}

.ResonanzMask.resonanz-custom-grid img:hover,
.resonanz-custom-grid img:hover {
  transform: scale(1.05);
}

/* Optional: dezenter Premium Card Hover */
.ResonanzMask.resonanz-custom-grid .__col,
.resonanz-custom-grid .__col {
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.ResonanzMask.resonanz-custom-grid .__col:hover,
.resonanz-custom-grid .__col:hover {
  transform: translateY(-4px);
}
/* ===== BLOG HERO GLOBAL FIX ===== */

/* Optimize background image brightness and contrast */
#banner > .__back:nth-child(2) {
  filter: brightness(90%) contrast(105%) saturate(105%) !important;
}

/* Improve headline readability and premium feel */
#banner h1 {
  letter-spacing: -0.02em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

/* Improve supporting text readability */
#banner h2,
#banner p {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
/* ==============================
   QIS Dashboard Hero
   ============================== */

.ResonanzMask.resonanz-qis-hero {
  position: relative;
  min-height: clamp(580px, 62vh, 700px);
  max-height: 700px;
  background-color: #ffffff;
  overflow: hidden;
}

/* Background image layer */
.ResonanzMask.resonanz-qis-hero .__back {
  filter: brightness(103%) contrast(90%) saturate(82%) !important;
  background-position: 90% center !important;
  background-size: 68% auto !important;
  background-repeat: no-repeat !important;
  opacity: 0.72;
}

/* Content layer */
.ResonanzMask.resonanz-qis-hero .__fore {
  position: relative;
  z-index: 2;
}

/* Text container */
.ResonanzMask.resonanz-qis-hero .__conTxt,
.ResonanzMask.resonanz-qis-hero .__fore {
  max-width: 900px !important;
}

/* Kicker */
.ResonanzMask.resonanz-qis-hero .resonanz-qis-kicker {
  display: block;
  margin-bottom: 0.6rem;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #85A97C !important;
  text-shadow: none !important;
}

/* Headline */
.ResonanzMask.resonanz-qis-hero h1 {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  max-width: 900px !important;
  font-size: clamp(2.6rem, 4vw, 4.5rem) !important;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #222830 !important;
  text-shadow: none !important;
}

/* Supporting text */
.ResonanzMask.resonanz-qis-hero .resonanz-qis-subline {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  max-width: 760px !important;
  margin: 0.25rem 0 1.8rem 0;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(34, 40, 48, 0.78) !important;
  text-shadow: none !important;
}

/* Primary action button */
.ResonanzMask.resonanz-qis-hero a,
.ResonanzMask.resonanz-qis-hero button,
.ResonanzMask.resonanz-qis-hero .button,
.ResonanzMask.resonanz-qis-hero .btn,
.ResonanzMask.resonanz-qis-hero .__btn,
.ResonanzMask.resonanz-qis-hero .__btnModal {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.95rem 1.55rem !important;
  background: #85A97C !important;
  color: #ffffff !important;
  border-radius: 4px;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none !important;
  border: 0;
  box-shadow: 0 8px 22px rgba(34, 40, 48, 0.14);
}
/* Primary action button hover */
.ResonanzMask.resonanz-qis-hero a:hover,
.ResonanzMask.resonanz-qis-hero button:hover,
.ResonanzMask.resonanz-qis-hero .button:hover,
.ResonanzMask.resonanz-qis-hero .btn:hover,
.ResonanzMask.resonanz-qis-hero .__btn:hover,
.ResonanzMask.resonanz-qis-hero .__btnModal:hover {
  background: #608557 !important;
  color: #ffffff !important;
}

/* Content position */
.ResonanzMask.resonanz-qis-hero .__conLoop {
  transform: translateY(1rem) !important;
}

/* Mobile layout */
@media (max-width: 900px) {
  .ResonanzMask.resonanz-qis-hero {
    min-height: auto;
    max-height: none;
  }

  .ResonanzMask.resonanz-qis-hero .__back {
    background-position: center top !important;
    background-size: cover !important;
    opacity: 0.32;
  }

  .ResonanzMask.resonanz-qis-hero .__conTxt,
  .ResonanzMask.resonanz-qis-hero .__fore {
    max-width: 100% !important;
  }

  .ResonanzMask.resonanz-qis-hero h1 {
    max-width: 100% !important;
    font-size: clamp(3.2rem, 5.2vw, 6.5rem) !important;
  }

  .ResonanzMask.resonanz-qis-hero .resonanz-qis-subline {
    max-width: 100% !important;
    font-size: 1rem;
  }
}
/* ==============================
   Modal spacing fix
   ============================== */

#globalModalContact .hs-richtext p {
  margin-bottom: 2rem !important;
}

#globalModalContact .hs-form {
  margin-top: 1.5rem !important;
}
//* ==============================
   QIS Dashboard request access modal
   ============================== */

#localModalRequestAccess h1,
#localModalRequestAccess h2 {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(2.35rem, 3.1vw, 3.3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #5f6b7a;
  margin: 0 0 1rem 0;
  max-width: 820px;
}

/* Intro text above the form */
#localModalRequestAccess p {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(1.05rem, 1.1vw, 1.2rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(34, 40, 48, 0.76);
  margin: 0 0 1.75rem 0;
  max-width: 920px;
}

/* Form starts closer to the intro text */
#localModalRequestAccess form,
#localModalRequestAccess .hs-form {
  margin-top: 0 !important;
}
/* ==============================
   QIS request access modal styling
   ============================== */

#localModalRequestAccess {
  background: #ffffff !important;
}

#localModalRequestAccess::before,
#localModalRequestAccess::after {
  display: none !important;
}

#localModalRequestAccess h1,
#localModalRequestAccess h2 {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #5f6b7a !important;
  margin: 0 0 1rem 0;
  max-width: 880px;
}

#localModalRequestAccess p {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(1.05rem, 1.1vw, 1.18rem);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(34, 40, 48, 0.76) !important;
  margin: 0 0 1.5rem 0;
  max-width: 900px;
}

#localModalRequestAccess form,
#localModalRequestAccess .hs-form {
  margin-top: 0 !important;
}
/* Remove unwanted modal top bar */
#localModalRequestAccess .__back,
#localModalRequestAccess .__fore,
#localModalRequestAccess .__con,
#localModalRequestAccess .__contain {
  background: transparent !important;
}
/* ==============================
   QIS dashboard request access modal backdrop
   ============================== */

#localModalRequestAccess {
  background: #ffffff !important;
  border-radius: 0;
  box-shadow: 0 32px 80px rgba(34, 40, 48, 0.14);
}

/* Soft brand-colored backdrop behind the modal */
body:has(#localModalRequestAccess) .modal-backdrop,
body:has(#localModalRequestAccess) .hs-modal-backdrop,
body:has(#localModalRequestAccess) [class*="backdrop"] {
  background: rgba(96, 133, 87, 0.18) !important;
}
/* Kill ONLY the dashboard overlay */
body div:has(button:contains("Request now")) {
  display: none !important;
}
/* ==============================
   QIS dashboard page spacing
   ============================== */

#main section[aria-label="Plan"] {
  padding-top: clamp(2.5rem, 4vw, 4rem) !important;
}
/* ==============================
   QIS dashboard preview section
   ============================== */

.qis-preview-section {
  padding: clamp(2rem, 3.5vw, 3.5rem) 1rem clamp(4rem, 6vw, 6rem) 1rem !important;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

.qis-preview-section .__contain,
.qis-preview-section .__con,
.qis-preview-section .__fore,
.qis-preview-section .__conTxt {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.qis-preview-section h2 {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #5f6b7a;
  text-align: center !important;
  margin: 0 auto 1rem auto !important;
  max-width: 1100px;
}

.qis-preview-section p {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(34, 40, 48, 0.76);
  text-align: center !important;
  max-width: 920px;
  margin: 0 auto 2.5rem auto !important;
}

.qis-preview-section img {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(34, 40, 48, 0.12);
}
.ResonanzMask .btn-primary,
.ResonanzMask a.btn-primary {
  background: #85A97C !important;
  color: #ffffff !important;
}
/* ==============================
   Resonanz Primary Button Fix
   ============================== */

.ResonanzMask .btn-primary a,
.ResonanzMask .btn-primary .button,
.ResonanzMask .btn-primary .hs-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 0.95rem 1.45rem !important;
  background: #85A97C !important;
  color: #ffffff !important;
  border: 1px solid #85A97C !important;
  border-radius: 4px !important;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(34, 40, 48, 0.18);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.ResonanzMask .btn-primary a:hover,
.ResonanzMask .btn-primary .button:hover,
.ResonanzMask .btn-primary .hs-button:hover {
  background: #608557 !important;
  border-color: #608557 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(34, 40, 48, 0.22);
}
/* QIS why section button */
.qis-why-button a,
.qis-why-button button,
.qis-why-button .button,
.qis-why-button .btn,
.qis-why-button .__btn,
.qis-why-button .__btnModal {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0.9rem 1.6rem !important;
  background: #85A97C !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-family: Montserrat, Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(34, 40, 48, 0.14) !important;
}

.qis-why-button a:hover,
.qis-why-button button:hover,
.qis-why-button .button:hover,
.qis-why-button .btn:hover,
.qis-why-button .__btn:hover,
.qis-why-button .__btnModal:hover {
  background: #608557 !important;
  color: #ffffff !important;
}
/* Subline sauber begrenzen */
.qis-preview-section p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.qis-preview-section p {
  font-size: 1.05rem;
  line-height: 1.55;
}
/* QIS why button hard fix */
.qis-why-button,
.qis-why-button a,
.qis-why-button button,
.qis-why-button .__btn,
.qis-why-button .__btnModal,
.qis-why-button [role="button"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0.9rem 1.6rem !important;
  background: #85A97C !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: Montserrat, Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(34, 40, 48, 0.14) !important;
  width: fit-content !important;
}

.qis-why-button:hover,
.qis-why-button a:hover,
.qis-why-button button:hover,
.qis-why-button .__btn:hover,
.qis-why-button .__btnModal:hover {
  background: #608557 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
/* QIS Access Button */
.qis-access-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0.9rem 1.6rem !important;
  background: #85A97C !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: Montserrat, Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(34, 40, 48, 0.14) !important;
}

.qis-access-button:hover {
  background: #608557 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(34, 40, 48, 0.18) !important;
}