/* ------------------------------------------------------------------
   Eigene Anpassungen an der Übergangs-Website hkh-maschinen.de

   Wird NACH css/styles9bc4.css geladen. Das erzeugte Original-
   Stylesheet bleibt unangetastet, damit ein erneuter Export der
   Seite nichts überschreibt.
   ------------------------------------------------------------------ */

/* ---------- Kopfbild: Bildausschnitt festlegen -----------------------

   Ausgangslage: Das Original-CSS setzt am Container
   "background-position: center top". Wirksam wird das aber nie, denn
   jarallax.min.js entfernt den Hintergrund vom Container
   (inline "background-image: none") und rendert das Bild in einer
   eigenen, deutlich höheren Ebene, die es beim Scrollen per transform
   verschiebt (speed 0.5). Welcher Bildteil zu sehen war, hing damit
   an der Scrollposition — beim Seitenaufruf waren es die oberen
   10–46 % des Bildes, also Dachfläche und Straße.

   Deshalb wird die jarallax-Ebene ausgeblendet und der Hintergrund am
   Container wieder aktiviert. Der Ausschnitt ist damit fest und
   steuerbar. Preis: Das Kopfbild wandert beim Scrollen nicht mehr mit.
   Ein fester Bildausschnitt ist ohne diesen Verzicht nicht möglich.

   Zwei Werte, weil der Kopfbereich unterschiedlich hoch ist und
   derselbe Prozentwert dadurch einen anderen Bildbereich zeigt:

     Startseite  393 px hoch → Fenster = 73 % der Bildhöhe → 75 %
     Unterseiten 242 px hoch → Fenster = 45 % der Bildhöhe → 45 %

   Beide zeigen denselben Bildinhalt: Schauraum mit den roten Rahmen
   und Firmenschild mittig, Solardach oben angeschnitten. Mit einem
   einheitlichen Wert schnitten die flachen Kopfbereiche der
   Unterseiten das Gebäude weg.

   Nur ab 47.5em: Darunter lädt das Original eine eigene, enger
   zugeschnittene Bilddatei (medium-bgHeader.jpg, 800 x 440 statt
   1486 x 617). Dort bleibt alles wie bisher, statt einen Ausschnitt
   zu verändern, der nicht überprüft wurde. */

@media (min-width: 47.5em) {

  #header .jarallax > div {
    display: none !important;   /* von jarallax erzeugte Bildebene */
  }

  #header .jarallax {
    background-image: url("/images/layout/bgHeader.jpg") !important;
    background-position: center 75% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  body.sub-pages #header .jarallax {
    background-position: center 45% !important;
  }
}