/* ══════════════════════════════════════════════════════════════════════
   KAMUI NAEHTE: randlose Uebergaenge zwischen Bild und Flaeche
   ══════════════════════════════════════════════════════════════════════

   Gemessen wurden Spruenge von 180 bis 196 Helligkeitsstufen zwischen
   zwei benachbarten Bildzeilen, quer ueber die ganze Breite:

     Ablauf  y=2595   rgb(22,27,25) -> rgb(223,211,190)
     Ablauf  y=4582   rgb(22,27,25) -> rgb(221,210,189)
     Haltung y=1650   rgb(22,27,25) -> rgb(237,225,201)

   Das ist die sichtbare Linie: dunkle Flaeche, dann ohne Zwischenschritt
   ein helles Motiv. Das Auge liest so eine Linie als Rahmen, und der
   Abschnitt wirkt wie ein eingesetzter Kasten statt wie Teil der Seite.

   Loesung: jede Bildsektion bekommt oben und unten einen Verlauf in
   Tusche. Das Motiv taucht dadurch aus der Flaeche auf und wieder in
   sie ein. Kein Zuschnitt, kein zweites Bild - nur ein Verlauf davor.

   Warum ::before und ::after und nicht ein Verlauf auf der Sektion:
   der Hintergrund einer Sektion liegt HINTER dem Bild und waere
   unsichtbar. Die beiden Pseudoelemente liegen davor.
   ══════════════════════════════════════════════════════════════════════ */

/* Die Sektionen, die ein vollflaechiges Motiv tragen. Jarallax ist die
   Parallax-Sektion des Themes, die uebrigen sind unsere Bildbaender. */
.jarallax,
.parallax-block,
.art-about-team__section,
.art-about-team-mobile,
.fr-hero-india,
.content-section-zulu__content-wrapper {
  position: relative;
  isolation: isolate;
}

.jarallax::before,
.parallax-block::before,
.art-about-team__section::before,
.art-about-team-mobile::before,
.fr-hero-india::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* 128 px reichen: lang genug, dass der Verlauf nicht selbst als Band
     auffaellt, kurz genug, dass das Motiv Luft behaelt. */
  height: 128px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(22, 27, 25) 0%,
    rgba(22, 27, 25, 0.72) 34%,
    rgba(22, 27, 25, 0.28) 66%,
    rgba(22, 27, 25, 0) 100%);
}

.jarallax::after,
.parallax-block::after,
.art-about-team__section::after,
.art-about-team-mobile::after,
.fr-hero-india::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 128px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(22, 27, 25) 0%,
    rgba(22, 27, 25, 0.72) 34%,
    rgba(22, 27, 25, 0.28) 66%,
    rgba(22, 27, 25, 0) 100%);
}

/* Der Text in diesen Sektionen muss ueber dem Verlauf liegen, sonst
   wird er an den Raendern mit abgedunkelt. */
.jarallax > .brxe-container,
.parallax-block > .brxe-container,
.art-about-team__section > .brxe-container,
.fr-hero-india > .brxe-container {
  position: relative;
  z-index: 4;
}

/* Der Hero der Startseite bringt seinen Ausklang selbst mit
   (hero.css, .kamui-hero::after). Ein zweiter Verlauf wuerde die
   Stelle doppelt abdunkeln. */
.kamui-hero::before {
  content: none !important;
}