/*  Starke Typo von www.peterscheerer.com  */

/* =========================================
   Fullwidth-Utilities (wie gehabt)
   ========================================= */
#cc-matrix .j-module .cc-m-has-user-css div[style*="100vw"] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.j-hgrid .cc-m-has-user-css div[style*="100vw"],
.j-hgrid .cc-m-has-user-css div[style*="margin-left:-50vw"],
.j-hgrid .cc-m-has-user-css div[style*="margin-right:-50vw"] {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* =========================================
   NUR auf der Seite „Keynote Speaker Führung“
   (body-ID aus deinem Screenshot)
   ========================================= */
body#page-2657268933 {
  /* Falls das Template einen Seiten-Background setzt,
     bringen wir ihn schon hier sanft in Richtung Hellgrau */
  background-color: #f3f3f1 !important;
}

/* 1) Alle „Grau“-Varianten auf dieser Seite treffen
      (unterschiedliche Klassennamen/Strukturen abgesichert) */
body#page-2657268933 .bg-grey,
body#page-2657268933 .j-bg-grey,
body#page-2657268933 [class*="bg-grey"],
/* Falls die j-hgrid selbst grau gefärbt wird: */
body#page-2657268933 .j-hgrid[class*="bg-grey"],
/* Falls die j-hgrid durch einen grauen Parent eingefärbt wird: */
body#page-2657268933 .j-hgrid:has([class*="bg-grey"]),
/* Fallback: auch der Matrix-Container dieser Seite (alte ID) */
#cc-matrix-3595258333,
#cc-matrix-3595258333 .j-hgrid {
  background: linear-gradient(180deg, #f3f3f1 0%, #e7e5e1 100%) !important;
  background-color: #f3f3f1 !important;         /* falls nur background-color gesetzt ist */
  background-image: linear-gradient(180deg, #f3f3f1 0%, #e7e5e1 100%) !important; /* falls nur background-image benutzt wird */
}

/* 2) Manche Designs legen die Farbe per ::before-Overlay.
      Das machen wir auf DIESER Seite transparent. */
body#page-2657268933 .bg-grey::before,
body#page-2657268933 .j-bg-grey::before,
body#page-2657268933 [class*="bg-grey"]::before,
#cc-matrix-3595258333::before,
#cc-matrix-3595258333 .j-hgrid::before {
  background: transparent !important;
  background-color: transparent !important;
}

/* 3) Inhalte in den grauen Bereichen selber wieder transparent,
      damit nur der Abschnitt (nicht die Zellen/Spalten) grau ist */
body#page-2657268933 .bg-grey .j-hgrid > div,
body#page-2657268933 .j-bg-grey .j-hgrid > div,
body#page-2657268933 [class*="bg-grey"] .j-hgrid > div,
#cc-matrix-3595258333 .j-hgrid > div {
  background: transparent !important;
}

/* 4) Bilder und Medienelemente über eventuelle Overlays heben */
body#page-2657268933 .bg-grey img,
body#page-2657268933 .j-bg-grey img,
body#page-2657268933 [class*="bg-grey"] img,
#cc-matrix-3595258333 img {
  position: relative;
  z-index: 1;
}

/* =========================================
   Fullwidth-Image-Stütze (wie gehabt)
   ========================================= */
#image-fullwidth {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
#image-fullwidth img {
  display: block;
  width: 100%;
  height: auto;
  border: none;
  margin: 0;
}

/* =========================================
   NICHT ändern:
   Grün & andere farbige Sektionen bleiben bewusst unberührt.
   (wir targeten ausschließlich „bg-grey“-Varianten)
   ========================================= */