/* Seitenspezifische Regeln fuer "die-drei-selbste".

   Die beiden farbigen Abschnitte oben stammen unveraendert aus dem
   Divi-Layout. Darunter fuehrt die Seite in zwei ruhigen Abschnitten weiter:
   erst die untersuchten Apps, dann das Team. Beide folgen demselben Muster
   wie Excellenz und Lehramt - Augenbraue, Ueberschrift, kurzer Strich,
   Fliesstext in lesbarer Breite. Form und Hover der Buttons kommen aus
   style.css, das Raster aus dpage.css. */

.p-die-drei-selbste {
  --gruen: #11af6d;         /* Flaeche: Button, Strich */
  --gruen-text: #217054;    /* dasselbe Gruen als Text - erreicht 4,5:1 */
}

/* ---------- Die beiden farbigen Abschnitte ---------- */
.p-die-drei-selbste .et_pb_section_0 {
  background-image: linear-gradient(72deg, #1bb3eb 0%, #25efcb 100%) !important;
  padding-top: var(--hero-oben);
  padding-right: 0px;
  padding-bottom: 110px;
  padding-left: 0px;
}
.p-die-drei-selbste .et_pb_section_1 {
  background-image: linear-gradient(234deg, #fbab7e 0%, #f7ce68 100%) !important;
  padding-top: 110px;
  padding-right: 0px;
  padding-bottom: 98px;
  padding-left: 0px;
}
.p-die-drei-selbste .et_pb_section_1 .et_pb_bottom_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik03MjUuMjkgMTAxLjJDMzI1LjIyIDEyMi40OCAwIDAgMCAwdjE0MGgxMjgwVjBzLTE1NC42NCA3OS45Mi01NTQuNzEgMTAxLjJ6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTU1Ni40NSAxMTkuNzRDOTUzLjQxIDE0MCAxMjgwIDE0IDEyODAgMTR2MTI2SDBWMHMxNTkuNSA5OS40OCA1NTYuNDUgMTE5Ljc0eiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik02NDAgMTQwYzM1My40NiAwIDY0MC0xNDAgNjQwLTEzOXYxNDBIMFYwczI4Ni41NCAxNDAgNjQwIDE0MHoiLz48L2c+PC9zdmc+);
  background-size: 100% 100px;
  bottom: 0;
  height: 100px;
  z-index: 1;
  transform: scale(1, 1);
}
.p-die-drei-selbste .et_pb_image_0 {
  filter: hue-rotate(252deg);
  backface-visibility: hidden;
  padding-top: 127px;
  text-align: left;
  margin-left: 0;
}
.p-die-drei-selbste .et_pb_image_1 {
  text-align: left;
  margin-left: 0;
}
.p-die-drei-selbste .et_pb_column_2 { padding-top: 60px }
.p-die-drei-selbste .et_pb_text_0,
.p-die-drei-selbste .et_pb_text_3 { margin-bottom: 20px !important }
.p-die-drei-selbste .et_pb_text_2 { margin-bottom: 62px !important }

.p-die-drei-selbste .et_pb_section_0,
.p-die-drei-selbste .et_pb_section_0 :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, address),
.p-die-drei-selbste .et_pb_section_1,
.p-die-drei-selbste .et_pb_section_1 :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, address) {
  color: #12212e;
}

/* ---------- Leseweg der unteren Abschnitte ----------
   Augenbraue statt zweiter Ueberschrift: die Zeile ordnet ein, die
   Ueberschrift traegt. Vorher war es umgekehrt - das h2 stand in einem
   Grau mit 1,6:1 fast unsichtbar ueber einem kraeftigen h3. */
.p-die-drei-selbste .augenbraue {
  margin: 0 0 .4rem;
  color: var(--gruen-text);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.p-die-drei-selbste .et_pb_divider {
  max-width: 40px;
  margin-bottom: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.p-die-drei-selbste .et_pb_divider:before {
  border-top-color: #eaf3f8;
  border-top-width: 4px;
}
/* Einstieg: bis hierher fehlte der Strich zwischen Ueberschrift und
   Vorspann, den die drei anderen Projektseiten tragen. Er folgt derselben
   Staffelung aus style.css und steht wie dort linksbuendig - die weiter
   unten liegenden Striche der Seite bleiben mittig. */
.p-die-drei-selbste .et_pb_row_0 {
  align-items: flex-start;
  padding-top: 0;
}

.p-die-drei-selbste .et_pb_text_1 {
  margin-bottom: var(--hero-strich-oben) !important;
}

.p-die-drei-selbste .et_pb_text_1 h1 {
  margin-bottom: 0;
}

.p-die-drei-selbste .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-die-drei-selbste .et_pb_divider_0:before {
  border-top-color: var(--gruen);
  border-top-width: var(--hero-strich-dicke);
}
/* Fliesstext in Lesebreite - die Zeile lief vorher ueber die vollen 1080 px */
.p-die-drei-selbste .et_pb_text_9 {
  max-width: 68ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Der dunkle Wellenkamm leitet in die Fusszeile - er gehoert deshalb unter
   den letzten Abschnitt und nicht mehr zwischen Apps und Team. */
.p-die-drei-selbste .et_pb_section_3 {
  background-image: linear-gradient(180deg, #f3fbf9 0%, #ffffff 100%) !important;
  padding-top: 88px;
  padding-bottom: 132px;
}
.p-die-drei-selbste .et_pb_section_3 .et_pb_bottom_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYTJjM2EiPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAwIDAgMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgMzAgMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgNjAgMCA2MHoiLz48L2c+PC9zdmc+);
  background-size: 100% 100px;
  bottom: 0;
  height: 100px;
  z-index: 1;
  transform: scale(1, 1);
}


/* ---------- Buttons: nur die Farben ---------- */
.p-die-drei-selbste .et_pb_button_0{
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, .16);
  color: #12212e;
  background-color: #ffffff;
}
.p-die-drei-selbste .et_pb_button_1,
.p-die-drei-selbste .et_pb_button_3 {
  box-shadow: 0px 2px 18px 0px rgba(17, 175, 109, .3);
  color: #fff;
  background-color: var(--gruen);
}

@media (max-width: 980px) {
  .p-die-drei-selbste .et_pb_image_0,
  .p-die-drei-selbste .et_pb_image_1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .p-die-drei-selbste .et_pb_image_0 { padding-top: 40px }
  .p-die-drei-selbste .et_pb_section_3 {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .p-die-drei-selbste .et_pb_section_3 { padding-bottom: 108px }
}