/* Seitenspezifische Regeln fuer "digitale-medien-im-lehramt".

   Aufbau und Textstile folgen der Excellenz-Seite: Einstieg ueber die volle
   Hoehe mit Text links und Illustration rechts, Ueberschriften in der
   Akzentfarbe mit kurzem Strich darunter, Beitraege als Symbol plus Text.
   Form und Hover der Buttons kommen aus style.css, das Raster aus dpage.css -
   hier stehen nur noch Farben, Anordnung und die Illustrationen. */

.p-digitale-medien-im-lehramt {
  --akzent: #1ca5ff;
  /* Flaechen: Buttons, Striche */
  --akzent-text: #0c6cbe;
  /* dasselbe Blau als Text - dunkel genug fuer 4,5:1 */
  --tief: #000977;
  --schein: 0px 30px 40px -16px rgba(28, 165, 255, .24);
}

/* ---------- Einstieg ---------- */
.p-digitale-medien-im-lehramt .et_pb_section_0 {
  /* fuellt den Bildschirm unterhalb der Kopfzeile - wie auf Excellenz */
  min-height: calc(100vh - 71px);
  min-height: calc(100svh - 71px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--hero-oben);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  /* Drei Lagen, von oben nach unten: ein Schleier, der von links her
     aufhellt und den Text traegt; darunter die Illustration, gross und
     rechts angeschnitten; ganz unten der Grundverlauf der Seite. */
  background-image:
    linear-gradient(100deg, #e4f2ff 0%, rgba(233, 244, 255, .94) 38%, rgba(246, 251, 255, 0) 68%),
    url(/assets/img/app-19.png),
    linear-gradient(165deg, #e4f2ff 0%, #f6fbff 48%, #ffffff 100%) !important;
  background-repeat: no-repeat;
  /* Die Illustration steht auf der Unterkante des Einstiegs. */
  background-position: center, right -5% bottom, center;
  background-size: cover, min(64%, 880px) auto, cover;
}

.p-digitale-medien-im-lehramt .et_pb_row_0 {
  align-items: flex-start;
  width: 80%;
  padding-top: 0;
  /* Die Zeile erbt "margin: auto" aus dpage.css. In einer Flex-Spalte saugt
     ein automatischer oberer Rand den freien Platz auf und zentriert die
     Zeile - staerker als justify-content. Oben deshalb auf 0, unten bleibt
     auto und nimmt den Rest. */
  margin-top: 0;
  margin-bottom: auto;
}

/* Die Zeile hat nur diese eine Spalte - die Illustration liegt im
   Hintergrund der Sektion, nicht daneben. Als halbe Spalte blieben der
   Ueberschrift 510 px, sie braucht aber 564; "Digitale Medien im Lehramt"
   brach deshalb zweizeilig um. Mit zwei Dritteln reicht der Platz bis
   hinunter zum Umbruchpunkt bei 980 px. Der Fliesstext behaelt seine
   Lesebreite von 46 Zeichen, es wird also nur die Ueberschrift breiter. */
.p-digitale-medien-im-lehramt .et_pb_row_0 > .et_pb_column {
  width: 66.6667%;
}

.p-digitale-medien-im-lehramt .et_pb_text_0 {
  margin-bottom: var(--hero-strich-oben) !important
}

.p-digitale-medien-im-lehramt .et_pb_text_0 h1 {
  margin-bottom: 0
}

.p-digitale-medien-im-lehramt .et_pb_text_1 {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: 1.6rem !important;
}


/* ---------- Ueberschriften und Striche ---------- */
.p-digitale-medien-im-lehramt h2 {
  color: var(--akzent-text)
}

.p-digitale-medien-im-lehramt .et_pb_divider {
  max-width: 40px;
  margin-bottom: 10px !important;
}

.p-digitale-medien-im-lehramt .et_pb_divider:before {
  border-top-color: var(--akzent);
  border-top-width: var(--hero-strich-dicke);
}

/* Der Strich des Einstiegs folgt der gemeinsamen Staffelung aus style.css. */
.p-digitale-medien-im-lehramt .et_pb_divider_0 {
  height: var(--hero-strich-dicke);
  max-width: var(--hero-strich-breite);
  margin-bottom: var(--hero-strich-unten) !important;
}

.p-digitale-medien-im-lehramt .et_pb_divider_0,
.p-digitale-medien-im-lehramt .et_pb_divider_2 {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.p-digitale-medien-im-lehramt .et_pb_divider_1 {
  margin-left: auto !important;
  margin-right: auto !important;
}

.p-digitale-medien-im-lehramt .et_pb_text_2 {
  max-width: 700px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.p-digitale-medien-im-lehramt .et_pb_text_3 {
  max-width: 68ch;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ---------- Illustration im Hintergrund ----------
   Sie traegt keine Information und steht deshalb im Hintergrund statt in
   einer eigenen Spalte; die beiden Beitragsspalten ruecken an die Raender.

   Sie haengt an der Beitragszeile und nicht an der ganzen Sektion: an der
   Sektion waechst sie mit der Fensterbreite, waehrend die Beitragszeile
   dabei schrumpft (breitere Spalten, weniger Umbrueche) - ab etwa 1366 px
   stiess sie deshalb in den Einleitungssatz, ab 1600 px in den Button.
   An der Zeile kann sie nie hoeher werden als der Platz, den sie hat:
   "auto min(100%, 460px)" bindet die Hoehe an die Zeilenhoehe und deckelt
   sie, damit die Breite auch auf schmalen Fenstern in die Luecke zwischen
   den Spalten passt. Der weisse Schleier ersetzt die frueheren 75 %
   Deckkraft - ein Hintergrund laesst sich nicht direkt abschwaechen. */
.p-digitale-medien-im-lehramt .et_pb_row_2 {
  justify-content: space-between;
  background-image:
    linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)),
    url(/assets/img/asset-3.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover, auto min(100%, 460px);
}

/* ---------- Buttons: nur die Farben ---------- */
/* Das helle Seitenblau hob sich vom hellen Grund kaum ab (Flaeche gegen
   Seite nur 2,5:1). Die Hauptschaltflaechen tragen deshalb das dunklere
   Blau mit weisser Schrift; das helle Blau bleibt Akzent fuer die Striche. */
.p-digitale-medien-im-lehramt .et_pb_button_0,
.p-digitale-medien-im-lehramt .et_pb_button_1 {
  box-shadow: var(--schein);
  color: #ffffff;
  background-color: var(--akzent-text);
}

.p-digitale-medien-im-lehramt .et_pb_button_2,
.p-digitale-medien-im-lehramt .et_pb_button_3 {
  box-shadow: var(--schein);
  color: #ffffff;
  background-color: var(--tief);
}

/* ---------- Ergebnisse ---------- */
.p-digitale-medien-im-lehramt .et_pb_section_2 {
  background-image: linear-gradient(180deg, #edf8ff 0%, #ffffff 100%) !important;
  padding-bottom: 13px;
  margin-bottom: -27px;
  width: 100%;
}

.p-digitale-medien-im-lehramt .et_pb_section_2 .et_pb_bottom_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxYTJjM2EiPjxwYXRoIGQ9Ik0wIDkwLjcybDE0MC0yOC4yOCAzMTUuNTIgMjQuMTRMNzk2LjQ4IDY1LjggMTE0MCAxMDQuODlsMTQwLTE0LjE3VjBIMHY5MC43MnoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAwdjQ3LjQ0TDE3MCAwbDYyNi40OCA5NC44OUwxMTEwIDg3LjExbDE3MC0zOS42N1YwSDB6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 166.66666666667% 9vw;
  bottom: 0;
  height: 9vw;
  z-index: 10;
  transform: scale(-1, -1);
}

.p-digitale-medien-im-lehramt .et_pb_section_2 .et_pb_top_inside_divider {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik05NzguODEgMTIyLjI1TDAgMGgxMjgwbC0yNjIuMSAxMTYuMjZhNzMuMjkgNzMuMjkgMCAwIDEtMzkuMDkgNS45OXoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNOTgzLjE5IDk1LjIzTDAgMGgxMjgwbC0yNjYgOTEuNTJhNzIuNTggNzIuNTggMCAwIDEtMzAuODEgMy43MXoiLz48L2c+PC9zdmc+);
  background-size: 100% 100px;
  top: 0;
  height: 100px;
  z-index: 1;
  transform: scale(1, 1);
}

/* Die Zeile traegt links die Illustration, deshalb bleibt dort eine Spalte leer. */
.p-digitale-medien-im-lehramt .et_pb_row_4 {
  background-size: initial;
  background-position: left bottom 0px;
  background-image: url(/assets/img/app-18-1.png);
  padding-bottom: 122px !important;
  width: 100%;
  max-width: 1766px;
}

.p-digitale-medien-im-lehramt .et_pb_text_5 {
  padding-right: 80px !important;
  padding-bottom: 63px !important;
}

/* Textfarbe auf den hellen Sektionen */
.p-digitale-medien-im-lehramt .et_pb_section_0,
.p-digitale-medien-im-lehramt .et_pb_section_0 :is(h1, h3, h4, h5, h6, p, li, span, strong, em, address),
.p-digitale-medien-im-lehramt .et_pb_section_2,
.p-digitale-medien-im-lehramt .et_pb_section_2 :is(h1, h3, h4, h5, h6, p, li, span, strong, em, address) {
  color: #12212e;
}

@media (max-width: 980px) {
  .p-digitale-medien-im-lehramt .et_pb_section_0 {
    min-height: 0;
    padding-top: var(--hero-oben);
    /* Gestapelt laege die Illustration hinter dem Text. Stattdessen bekommt
       sie unten eigenen Platz: das untere Padding ist so gross wie die
       Illustration plus Luft, sie steht darin und beruehrt den Text nicht. */
    padding-bottom: calc(3rem + min(55vw, 296px));
    background-image:
      linear-gradient(180deg, rgba(228, 242, 255, .55) 0%, rgba(246, 251, 255, 0) 60%),
      url(/assets/img/app-19.png),
      linear-gradient(165deg, #e4f2ff 0%, #f6fbff 48%, #ffffff 100%) !important;
    background-position: center, center bottom, center;
    background-size: cover, min(86%, 460px) auto, cover;
  }

  .p-digitale-medien-im-lehramt .et_pb_row_0 {
    width: 90%
  }

  .p-digitale-medien-im-lehramt .et_pb_text_1 {
    max-width: none
  }

  /* Gestapelt stehen die drei Beitraege untereinander und decken die
     Illustration fast ganz ab - was durchscheint, liegt nur unter dem Text.
     Sie entfaellt deshalb im Mobillayout ganz. */
  .p-digitale-medien-im-lehramt .et_pb_row_2 {
    background-image: none;
  }

  /* Wie im Desktop-Layout schliesst die Illustration die Sektion nach unten
     ab; die 30vw davor liessen sie in der Flaeche schweben. */
  .p-digitale-medien-im-lehramt .et_pb_section_2 {
    padding-right: 0vw;
  }

  /* Gestapelt entfaellt die leere linke Spalte. Die Zeile bleibt deshalb
     randlos wie im Desktop-Layout - so steht die Illustration unten links
     am Bildschirmrand und schliesst mit der Sektion ab. Den Seitenrand
     traegt jetzt das Padding der Zeile statt ihrer Breite; sonst stuende
     die Ueberschrift am Rand, wo doch nur das Bild hingehoert.

     --bild ist die Breite der Illustration, --bild-h ihre Hoehe: sie misst
     900x680, also 0,756 der Breite. Das untere Padding stellt den Streifen
     bereit, in dem Bild und Button nebeneinander liegen. */
  .p-digitale-medien-im-lehramt .et_pb_row_4 {
    --bild: min(46vw, 300px);
    --bild-h: min(34.8vw, 227px);
    --rand: 5%;
    width: 100%;
    max-width: none;
    padding-left: var(--rand);
    padding-right: var(--rand);
    background-color: initial;
    background-position: left bottom;
    background-size: var(--bild) auto;
    padding-bottom: calc(var(--bild-h) + 1rem) !important;
  }

  /* Der Button sitzt neben der Illustration in diesem Streifen. Bezug ist
     die Zeile und nicht die Spalte - deren Unterkante liegt oberhalb des
     Streifens, an ihr liesse sich der Button nicht ausrichten. */
  .p-digitale-medien-im-lehramt .et_pb_row_4 .et_pb_column {
    position: static;
  }

  /* Der Streifen ist so hoch wie das Bild; darin zentriert sich der Button
     selbst, egal auf wie viele Zeilen seine Beschriftung umbricht. */
  .p-digitale-medien-im-lehramt .et_pb_row_4 .et_pb_button_module_wrapper {
    position: absolute;
    left: calc(var(--bild) + 4%);
    right: var(--rand);
    bottom: 0;
    height: var(--bild-h);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-digitale-medien-im-lehramt .et_pb_text_5 {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
}

/* Auf dem Telefon ist neben der Illustration kein Platz mehr fuer den
   Button: bei brauchbarer Bildgroesse blieben ihm rund 140 px, auf die
   seine Beschriftung vierzeilig umbraeche. Er geht deshalb zurueck in den
   Textfluss - direkt unter den Text, wo er hingehoert - und die
   Illustration bekommt die volle Breite des unteren Streifens. */
@media (max-width: 767px) {
  .p-digitale-medien-im-lehramt .et_pb_row_4 {
    --rand: 4%;
    --bild: min(68vw, 320px);
    --bild-h: min(51.4vw, 242px);
  }

  .p-digitale-medien-im-lehramt .et_pb_row_4 .et_pb_button_module_wrapper {
    position: static;
    display: block;
    height: auto;
    margin: 0 0 2rem;
  }
}