.p-mensch-maschine .et_pb_button_0,
.p-mensch-maschine .et_pb_button_1{
  box-shadow: 0px 20px 40px -10px rgba(23, 102, 193, 0.46);
  color: #fff !important;
  background-color: #03146b;
}
.p-mensch-maschine .et_pb_button_2,
.p-mensch-maschine .et_pb_button_3 {
  box-shadow: 0px 20px 40px -10px rgba(23, 102, 193, 0.46);
  color: #12212e;
  background-color: #24cad3;
}

.p-mensch-maschine .et_pb_image_0 {
  margin-top: -8vw !important;
  margin-right: -10vw !important;
  margin-bottom: 2vw !important;
  text-align: right;
}

.p-mensch-maschine .et_pb_image_2 .et_pb_image_wrap {
  border-radius: 250px 250px 250px 250px;
  overflow: hidden;
}

.p-mensch-maschine .et_pb_image_2 {
  margin-top: 106px !important;
  margin-left: -109px !important;
  transform: scaleX(1.21) scaleY(1.21) translateX(-6vw) translateY(6vw) rotateX(0deg) rotateY(0deg) rotateZ(55deg);
  text-align: left;
}

.p-mensch-maschine .et_pb_row_2 {
  padding-left: 15% !important;
  margin-top: -8vw !important;
  margin-right: auto !important;
  margin-bottom: -8vw !important;
  margin-left: auto !important;
  max-width: none;
}

.p-mensch-maschine .et_pb_blurb_1:hover {
  filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%) sepia(0%);
}


.p-mensch-maschine .et_pb_blurb_3,
.p-mensch-maschine .et_pb_blurb_4,
.p-mensch-maschine .et_pb_blurb_5,
.p-mensch-maschine .et_pb_blurb_6,
.p-mensch-maschine .et_pb_blurb_7,
.p-mensch-maschine .et_pb_blurb_8 {
  background-color: #ffffff;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
  padding-top: 24px !important;
  padding-right: 20px !important;
  padding-bottom: 24px !important;
  padding-left: 20px !important;
  box-shadow: 0px 10px 60px 0px rgba(10, 45, 97, 0.1);
}

.p-mensch-maschine .et_pb_blurb_3:hover {
  box-shadow: 0px 10px 60px 0px #0047e0;
  transform: scaleX(1.03) scaleY(1.03) !important;
}

/* Die sechs Kursgrafiken sitzen im selben Quadrat und werden darin
   eingepasst. Vorher galt nur eine feste Breite - das Hochformat der
   Robotergrafik lief dadurch auf 148 px Hoehe aus, die querformatige
   Stadtansicht nur auf 101 px. */
.p-mensch-maschine .et_pb_blurb_3 .et_pb_main_blurb_image .et_pb_image_wrap,
.p-mensch-maschine .et_pb_blurb_4 .et_pb_main_blurb_image .et_pb_image_wrap,
.p-mensch-maschine .et_pb_blurb_5 .et_pb_main_blurb_image .et_pb_image_wrap,
.p-mensch-maschine .et_pb_blurb_6 .et_pb_main_blurb_image .et_pb_image_wrap,
.p-mensch-maschine .et_pb_blurb_7 .et_pb_main_blurb_image .et_pb_image_wrap,
.p-mensch-maschine .et_pb_blurb_8 .et_pb_main_blurb_image .et_pb_image_wrap {
  width: 120px;
  height: 120px;
}

.p-mensch-maschine .et_pb_blurb_3 .et_pb_main_blurb_image img,
.p-mensch-maschine .et_pb_blurb_4 .et_pb_main_blurb_image img,
.p-mensch-maschine .et_pb_blurb_5 .et_pb_main_blurb_image img,
.p-mensch-maschine .et_pb_blurb_6 .et_pb_main_blurb_image img,
.p-mensch-maschine .et_pb_blurb_7 .et_pb_main_blurb_image img,
.p-mensch-maschine .et_pb_blurb_8 .et_pb_main_blurb_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-mensch-maschine .et_pb_blurb_4:hover,
.p-mensch-maschine .et_pb_blurb_5:hover,
.p-mensch-maschine .et_pb_blurb_6:hover,
.p-mensch-maschine .et_pb_blurb_7:hover,
.p-mensch-maschine .et_pb_blurb_8:hover {
  box-shadow: 0px 10px 60px 0px #0c71c3;
  transform: scaleX(1.03) scaleY(1.03) !important;
}

/* Stunde 5: der Roboter zieht als einziger ins Blaue (Farbton 195 statt
   181 bis 183) - die Drehung holt ihn auf 182. */
.p-mensch-maschine .et_pb_blurb_7 .et_pb_main_blurb_image {
  filter: hue-rotate(-16deg);
  backface-visibility: hidden;
}

.p-mensch-maschine .et_pb_blurb_9 .et_pb_module_header,
.p-mensch-maschine .et_pb_blurb_10 .et_pb_module_header,
.p-mensch-maschine .et_pb_blurb_11 .et_pb_module_header,
.p-mensch-maschine .et_pb_blurb_12 .et_pb_module_header,
.p-mensch-maschine .et_pb_blurb_13 .et_pb_module_header,
.p-mensch-maschine .et_pb_blurb_14 .et_pb_module_header {
  text-align: center;
}

.p-mensch-maschine .et_pb_blurb_9,
.p-mensch-maschine .et_pb_blurb_10 {
  background-color: #ffffff;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
  min-height: 370px;
  padding-top: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 10px !important;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.3);
}

.p-mensch-maschine .et_pb_blurb_9:hover {
  box-shadow: 0px 2px 18px 0px #88c4dd;
  transform: scaleX(1.03) scaleY(1.03) translateX(5px) translateY(0px) !important;
}

.p-mensch-maschine .et_pb_column_4 {
  transform: translateX(0px) translateY(-94px)
}

.p-mensch-maschine .et_pb_column_5 {
  transform: translateX(0px) translateY(-188px)
}

.p-mensch-maschine .et_pb_text_1 {
  margin-bottom: 64px !important
}

.p-mensch-maschine .et_pb_section_0 {
  background-image: radial-gradient(circle at top right, #008570 0%, #0029e2 100%) !important;
  padding-top: var(--hero-oben);
}

.p-mensch-maschine .et_pb_row_0 {
  z-index: 1 !important;
  position: relative;
  padding-top: 0;
}

.p-mensch-maschine .et_pb_row_8 {
  z-index: 1 !important;
  position: relative;
  padding-top: 79px !important;
  padding-bottom: 64px !important;
  margin-right: auto !important;
  margin-bottom: -21px !important;
  margin-left: auto !important;
}

.p-mensch-maschine .et_pb_divider_2,
.p-mensch-maschine .et_pb_divider_3 {
  width: 15%;
}

/* Einstieg: Strich in der gemeinsamen Staffelung aus style.css, nur die
   Farbe bleibt die der Seite. */
.p-mensch-maschine .et_pb_text_0 {
  margin-bottom: var(--hero-strich-oben) !important;
}

.p-mensch-maschine .et_pb_text_0 h1 {
  margin-bottom: 0;
}

.p-mensch-maschine .et_pb_divider_0 {
  height: var(--hero-strich-dicke);
  max-width: var(--hero-strich-breite);
  margin-bottom: var(--hero-strich-unten) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.p-mensch-maschine .et_pb_divider_0:before {
  border-top-color: #88c4dd;
  border-top-width: var(--hero-strich-dicke);
}

.p-mensch-maschine .et_pb_divider_2:before,
.p-mensch-maschine .et_pb_divider_3:before {
  border-top-color: #88c4dd;
  border-top-width: 3px;
}

.p-mensch-maschine .et_pb_row_1 {
  width: 100%;
  max-width: none;
}

.p-mensch-maschine .et_pb_image_1 {
  margin-top: -46vw !important;
  margin-bottom: -2px !important;
  width: 100%;
  max-width: 100% !important;
  text-align: left;
  margin-left: 0;
}

.p-mensch-maschine .et_pb_image_1 .et_pb_image_wrap,
.p-mensch-maschine .et_pb_image_1 img {
  width: 100%;
}

.p-mensch-maschine .et_pb_blurb_0,
.p-mensch-maschine .et_pb_blurb_0:hover {
  filter: saturate(81%) brightness(106%);
  backface-visibility: hidden;
}

.p-mensch-maschine .et_pb_blurb_0:hover:hover {
  filter: saturate(81%) brightness(106%)
}

.p-mensch-maschine .et_pb_text_9 {
  max-width: 400px
}

.p-mensch-maschine .et_pb_row_3 {
  min-height: 38px
}

.p-mensch-maschine .et_pb_section_2 {
  background-size: contain;
  background-position: left bottom 0px;
  background-image: url(/assets/img/cyber-security-02.png), radial-gradient(circle at center, #004183 0%, #001f4c 100%) !important;
  min-height: 1140px;
  padding-top: 0px;
  padding-bottom: 147px;
  margin-top: 85px;
}

.p-mensch-maschine .et_pb_section_2 .et_pb_top_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0xMjgwIDE0MFYwSDBsMTI4MCAxNDB6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 100% 26vw;
  top: 0;
  height: 26vw;
  z-index: 1;
  transform: scale(-1, 1);
}

/* Zeile ueber den schraegen Sektionstrenner heben (der hat z-index:1),
sonst deckt die weisse Schraege das Bild oben ab. Divi macht das ueber
.et_pb_column{z-index:2}; hier gezielt pro Zeile wie bei .et_pb_row_5. */
.p-mensch-maschine .et_pb_row_4 {
  position: relative;
  z-index: 2;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.p-mensch-maschine .et_pb_divider_1 {
  margin-right: -52px !important;
  margin-bottom: 0px !important;
  width: 100px;
}

.p-mensch-maschine .et_pb_divider_1:before,
.p-mensch-maschine .et_pb_divider_4:before {
  border-top-color: #0c71c3;
  border-top-width: 2px;
}

.p-mensch-maschine .et_pb_divider_4 {
  margin-bottom: 0px !important;
  width: 100px;
}

.p-mensch-maschine .et_pb_section_3 {
  background-position: center bottom 0px;
  background-image: url(/assets/img/cyber-security-03-1.png), radial-gradient(circle at top right, #008570 0%, #0029e2 100%) !important;
  min-height: 806px;
  padding-top: 0vw;
  padding-bottom: 0vw;
  margin-top: -24px;
  margin-bottom: -24px;
}

.p-mensch-maschine .et_pb_section_3 .et_pb_top_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0xMjgwIDE0MFYwSDBsMTI4MCAxNDB6IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTTEyODAgOThWMEgwbDEyODAgOTh6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 100% 100px;
  top: 0;
  height: 100px;
  z-index: 1;
  transform: scale(1, 1);
}

.p-mensch-maschine .et_pb_row_5 {
  min-height: 734px;
  z-index: 1 !important;
  position: relative;
  padding-top: 113px !important;
  padding-bottom: 170px !important;
  margin-top: 19px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.p-mensch-maschine .et_pb_section_4 {
  background-image: linear-gradient(335deg, #05255c 0%, #148291 100%) !important;
  min-height: 886px;
  padding-bottom: 172px;
}

.p-mensch-maschine .et_pb_section_4 .et_pb_bottom_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAwIDAgMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgMzAgMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgNjAgMCA2MHoiLz48L2c+PC9zdmc+);
  background-size: 100% 187px;
  bottom: 0;
  height: 187px;
  z-index: 1;
  transform: scale(1, 1);
}

.p-mensch-maschine .et_pb_section_4 .et_pb_top_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDB2NjBzNTczLjA5IDgwIDEyODAgODBWMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAwdjMwczU3My4wOSAxMTAgMTI4MCAxMTBWMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAwczU3My4wOSAxNDAgMTI4MCAxNDBWMHoiLz48L2c+PC9zdmc+);
  background-size: 100% 100px;
  top: 0;
  height: 100px;
  z-index: 1;
  transform: scale(1, 1);
}

.p-mensch-maschine .et_pb_row_6 {
  min-height: 222px;
  padding-top: 144px !important;
}

.p-mensch-maschine .et_pb_row_7 a {
  text-decoration-line: none;
}

.p-mensch-maschine .et_pb_blurb_10:hover,
.p-mensch-maschine .et_pb_blurb_11:hover,
.p-mensch-maschine .et_pb_blurb_12:hover,
.p-mensch-maschine .et_pb_blurb_13:hover,
.p-mensch-maschine .et_pb_blurb_14:hover {
  box-shadow: 0px 2px 18px 0px #88c4dd;
  transform: scaleX(1.03) scaleY(1.03) !important;
}

.p-mensch-maschine .et_pb_blurb_11,
.p-mensch-maschine .et_pb_blurb_12,
.p-mensch-maschine .et_pb_blurb_13,
.p-mensch-maschine .et_pb_blurb_14 {
  background-color: #ffffff;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
  min-height: 170px;
  padding-top: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 10px !important;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.3);
}

/* Die vier Symbole sind Strichzeichnungen auf einem gemeinsamen Blatt und
   erben ihre Farbe ueber currentColor. Das Seitenblau statt der Textfarbe:
   als Flaeche kommt es auf Weiss auf 3,4:1 und erfuellt damit 1.4.11 fuer
   grafische Elemente, ohne so zu tun, als waere es Text. */
.p-mensch-maschine .et_pb_blurb_11 .et-pb-icon,
.p-mensch-maschine .et_pb_blurb_12 .et-pb-icon,
.p-mensch-maschine .et_pb_blurb_13 .et-pb-icon,
.p-mensch-maschine .et_pb_blurb_14 .et-pb-icon {
  font-size: 68px;
  font-weight: 400 !important;
  color: #1ba8b8;
}

/* Luft zwischen Kursmaterial und Rahmenkonzept. Stand vorher als
   <div style="height:5em">&nbsp;</div> im Markup. */
.p-mensch-maschine .et_pb_section_5 {
  margin-top: 5em;
  background-image: radial-gradient(circle at center, #004183 0%, #001f4c 100%) !important;
  min-height: 944px;
  padding-bottom: 4vw;
}

.p-mensch-maschine .et_pb_section_5 .et_pb_bottom_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYTJjM2EiPjxwYXRoIGQ9Ik0xMjgwIDE0MFYwUzk5My40NiAxNDAgNjQwIDEzOSAwIDAgMCAwdjE0MHoiLz48L2c+PC9zdmc+);
  background-size: 100% 3vw;
  bottom: 0;
  height: 3vw;
  z-index: 10;
  transform: scale(1, 1);
}

.p-mensch-maschine .et_pb_section_5 .et_pb_top_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik05NzguODEgMTIyLjI1TDAgMGgxMjgwbC0yNjIuMSAxMTYuMjZhNzMuMjkgNzMuMjkgMCAwIDEtMzkuMDkgNS45OXoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNOTgzLjE5IDk1LjIzTDAgMGgxMjgwbC0yNjYgOTEuNTJhNzIuNTggNzIuNTggMCAwIDEtMzAuODEgMy43MXoiLz48L2c+PC9zdmc+);
  background-size: 100% 6vw;
  top: 0;
  height: 6vw;
  z-index: 1;
  transform: scale(-1, 1);
}

.p-mensch-maschine .et_pb_row_9 {
  min-height: 217px
}

.p-mensch-maschine .et_pb_column_8 {
  padding-top: 18vw
}

.p-mensch-maschine h1, h2,  p{
  color: #ffffff !important;
}

.p-mensch-maschine .et_pb_section_0 a:not(.et_pb_button),
.p-mensch-maschine .et_pb_section_3 a:not(.et_pb_button),
.p-mensch-maschine .et_pb_section_5 a:not(.et_pb_button) {
  color: #ffffff;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

@media (max-width:980px) {
  .p-mensch-maschine .et_pb_image_0 {
    margin-top: -2vw !important;
    margin-right: 0vw !important;
    margin-bottom: -24vw !important;
    max-width: 400px;
  }

  .p-mensch-maschine .et_pb_image_0 .et_pb_image_wrap img,
  .p-mensch-maschine .et_pb_image_2 .et_pb_image_wrap img {
    width: auto;
  }

  .p-mensch-maschine .et_pb_image_2 {
    transform: scaleX(1) scaleY(1) translateX(0vw) translateY(0vw) rotateX(0deg) rotateY(0deg) rotateZ(27deg);
  }

  .p-mensch-maschine .et_pb_row_2 {
    padding-left: 0% !important;
    margin-top: 0vw !important;
    margin-bottom: 0vw !important;
  }

  .p-mensch-maschine .et_pb_blurb_1 {
    filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%) sepia(0%) opacity(100%) blur(0px);
    backface-visibility: hidden;
  }

  .p-mensch-maschine .et_pb_column_4,
  .p-mensch-maschine .et_pb_column_5 {
    transform: translateX(0px) translateY(0px);
  }

  /* Gestapelt steht dieser Block allein in seiner Zeile. Die 400 px aus dem
     Zweispalter liessen ihn dann schmaler als die Bloecke darueber und
     darunter stehen - im Mobillayout nimmt er die volle Spaltenbreite. */
  .p-mensch-maschine .et_pb_text_9 {
    max-width: none
  }
}

@media (max-width:767px) {

  .p-mensch-maschine .et_pb_image_0 .et_pb_image_wrap img,
  .p-mensch-maschine .et_pb_image_2 .et_pb_image_wrap img {
    width: auto;
  }

  .p-mensch-maschine .et_pb_image_2 {
    transform: scaleX(1) scaleY(1) translateX(0vw) translateY(0vw) rotateX(0deg) rotateY(0deg) rotateZ(27deg);
  }

  .p-mensch-maschine .et_pb_blurb_1 {
    filter: hue-rotate(0deg) saturate(100%) brightness(100%) contrast(100%) invert(0%) sepia(0%) opacity(100%) blur(0px);
    backface-visibility: hidden;
  }


  .p-mensch-maschine .et_pb_column_4,
  .p-mensch-maschine .et_pb_column_5 {
    transform: translateX(0px) translateY(0px);
  }
  #mehr{
    margin-top: 10em !important;
    padding-top: 0 !important;
  }
}

/* Karten mit eigenem hellen Grund erben nicht die helle Textfarbe
der Sektion - sonst stuende Weiss auf Weiss. */
.p-mensch-maschine .et_pb_module a, p{
  color: var(--ink);
}

#material h2,
#kurs h2,
#motivation h2,
#rahmen p, 
#rahmen a, 
#rahmen h3, 
#rahmen h2,
#kurs .et_pb_text_5 a,
.et_pb_section_sticky a{
  color:#fff !important;
}
#mehr{
  padding-top:18em;
}
#mehr p, h2, h3{
  color:var(--ink) !important;
}
#material .et_pb_blurb_description p,
#kurs .et_pb_blurb_description p, a{
  color:var(--ink) !important;
}
.site-footer {
  background: var(--navy-dark);
  color: #93a7b6;
  padding: 3rem 0 2.2rem
}

.site-footer a {
  color: #c6d4de !important
}

.site-footer a:hover {
  color: var(--accent) !important
}