/* =========================================================================
   Seiteneigener Regelsatz /referenzen-bo-gruppe/

   Uebernommen aus dem <style>-Block im Kopf der freigegebenen statischen
   Fassung (design-v6/70-full-site-v1/referenzen-bo-gruppe/index.html). Diese Regeln
   stehen dort NICHT in assets/site.css, sondern gelten nur auf dieser einen
   Seite - deshalb liegen sie hier als eigene Datei und werden ausschliesslich
   auf ihrer Seite geladen (inc/assets.php, scriptomat_page_styles()).

   Sie haengen an 'scriptomat-site' und werden danach ausgeliefert: einige
   Regeln ueberschreiben den gemeinsamen Regelsatz. Genau diese Reihenfolge
   hatte der Master, dort als <link> gefolgt von <style>.
   ========================================================================= */

/* --- Der fotografische Seitenkopf ---------------------------------------
   Dieselbe Bildlogik wie im Kopf der Unternehmen-Seite, mit dem Bild der
   veroeffentlichten Referenz: ein Servicefahrzeug der B&O Gruppe.

   Zwei Lagen, beide als Pseudoelement, beide hinter dem Satz:

     ::before  das Bild, in der rechten Haelfte des Kopfes. Der Ausschnitt
               ist so gelegt, dass beides im freien Teil steht: der Fahrer
               und der Schriftzug auf dem Fahrzeug. Leicht entsaettigt und
               aufgehellt - der Kopf bleibt hell, kein dunkler Fotohero,
               keine Volltonauflage, keine Karte um das Foto.

     ::after   der Verlauf. Waagerecht blendet er das Bild nach links in
               --herofield aus, senkrecht sehr dezent nach oben und unten,
               damit weder zur Kopfzeile noch zur Eckdatenzeile eine harte
               Bildkante entsteht. Der Satz endet dort, wo der Verlauf noch
               vollstaendig deckt: die linke Haelfte bleibt ruhig. */
.pagehead--case {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 76px 88px;
  min-height: 640px;
}
.pagehead--case::before {
  content: "";
  position: absolute;
  inset: 0 0 0 44%;
  z-index: -2;
  background-image: url("../images/references/bo/bo-hero.jpg");
  background-size: cover;
  background-position: 72% 50%;
  filter: saturate(0.85) brightness(1.04) contrast(0.97);
}
.pagehead--case::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      var(--herofield) 0%,
      var(--herofield) 45%,
      rgba(242, 250, 246, 0.95) 49%,
      rgba(242, 250, 246, 0.70) 52%,
      rgba(242, 250, 246, 0.32) 55%,
      rgba(242, 250, 246, 0.08) 58%,
      rgba(242, 250, 246, 0) 62%
    ),
    linear-gradient(
      180deg,
      rgba(242, 250, 246, 0.70) 0%,
      rgba(242, 250, 246, 0) 18%,
      rgba(242, 250, 246, 0) 70%,
      rgba(242, 250, 246, 0.50) 89%,
      rgba(242, 250, 246, 0.96) 100%
    );
}
/* Der Satz steht in der linken Haelfte und endet vor dem Verlauf. */
.pagehead--case .pagehead__inner { max-width: 600px; }
.pagehead--case .pagehead__title { max-width: 100%; }
.pagehead--case .pagehead__lede { max-width: 100%; }

/* --- Der Absender im Seitenkopf -----------------------------------------
   Das Logo steht ueber Einordnung und Behauptung, in Originalproportion,
   ungefaerbt, ohne Flaeche und ohne Rahmen. Es ist kleiner als im
   Abschluss (34 statt 54 px): oben identifiziert es, unten belegt es.
   Es bleibt auch mit Bild im Kopf stehen - das Foto zeigt den Kunden,
   das Logo nennt ihn. */
.pagehead__client {
  display: block;
  width: auto;
  height: 34px;
  /* Enger an die Einordnung als an die Brotkrume: Absender und
     "Kundenreferenz" sind eine Aussage, die Brotkrume ist Herkunft. */
  margin: 10px 0 16px;
}

@media (max-width: 1180px) {
  /* Schmaler Kopf: der Ausschnitt gibt den Fahrer auf und behaelt den
     Schriftzug. Der Kunde bleibt im Bild erkennbar, der Satz bleibt ruhig. */
  .pagehead--case { min-height: 560px; }
  .pagehead--case::before { inset: 0 0 0 40%; background-position: 100% 50%; }
  .pagehead--case::after {
    background:
      linear-gradient(
        90deg,
        var(--herofield) 0%,
        var(--herofield) 42%,
        rgba(242, 250, 246, 0.94) 47%,
        rgba(242, 250, 246, 0.62) 52%,
        rgba(242, 250, 246, 0.22) 57%,
        rgba(242, 250, 246, 0) 63%
      ),
      linear-gradient(
        180deg,
        rgba(242, 250, 246, 0.70) 0%,
        rgba(242, 250, 246, 0) 18%,
        rgba(242, 250, 246, 0) 70%,
        rgba(242, 250, 246, 0.50) 89%,
        rgba(242, 250, 246, 0.96) 100%
      );
  }
  .pagehead--case .pagehead__inner { max-width: 470px; }
}
@media (max-width: 860px) {
  /* Auf dem Telefon stehen Satz und Bild nicht mehr nebeneinander,
     sondern uebereinander: das Bild traegt den unteren Rand des Kopfes und
     blendet nach oben in die Flaeche aus. Keine harte Kante, kein Text auf
     dem Foto. Der Ausschnitt ist enger als am Desktop gefasst, damit auf
     der kurzen Bildhoehe der Schriftzug des Kunden im Bild bleibt und
     nicht nur eine weisse Fahrzeugflanke. */
  .pagehead--case { min-height: 0; padding-block: 56px 324px; }
  .pagehead--case::before {
    inset: auto 0 0 0;
    height: 300px;
    background-size: auto 200%;
    background-position: 88% 46%;
  }
  .pagehead--case::after {
    inset: auto 0 0 0;
    height: 300px;
    background:
      linear-gradient(
        180deg,
        var(--herofield) 0%,
        rgba(242, 250, 246, 0.56) 32%,
        rgba(242, 250, 246, 0.12) 62%,
        rgba(242, 250, 246, 0) 100%
      );
  }
  .pagehead--case .pagehead__inner { max-width: 100%; }
  .pagehead__client { height: 30px; }
}