/* ==========================================================================
   Hero mit Bannerbild
   --------------------------------------------------------------------------
   Die Startseite bekommt dasselbe Buehnenbild wie die Werbeartikel-Seite:
   dunkler Grund, Produkte rechts, Text links in der freien Flaeche.

   Das Bild ist links bis etwa 42 % der Breite gleichmaessig dunkel
   (Helligkeit 10 von 255, nachgemessen). Die Textspalte endet davor.

   Gezeigt wird das Bild mit "contain", nicht "cover": So wird es auf keiner
   Bildschirmbreite beschnitten, und was neben dem Bild frei bleibt, traegt
   denselben Ton aus der Bildecke - die Kante ist dadurch unsichtbar.
   ========================================================================== */

body.page .hero,
.hero.e-con,
.hero {
  background-color: #070B0F !important;
  background-image: url("../media/werbeartikel/hero.webp") !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
}

/* Der Hero bekommt GENAU das Seitenverhaeltnis des Bildes (1584:672).
   Dadurch fuellt "cover" die Flaeche vollstaendig aus, ohne irgendwo zu
   beschneiden - das Bild reicht bis an den oberen Rand und liegt damit
   auch unter der Menueleiste.

   Mit "contain" und freier Hoehe blieb oben und unten ein Streifen in der
   Fuellfarbe stehen. Der war am Uebergang zum Bild sichtbar, weil das Foto
   dort seine eigene Abdunklung mitbringt.

   Waechst der Inhalt einmal ueber diese Hoehe hinaus, schneidet "cover"
   links an - also in der leeren dunklen Flaeche, nicht bei den Produkten. */
@media (min-width: 900px) {
  body.page .hero,
  .hero.e-con,
  .hero {
    aspect-ratio: 1584 / 672;
    background-size: cover !important;

    /* Der Textblock sitzt MITTIG in der Hoehe, nicht oben. Auf breiten
       Bildschirmen wird der Hero durch das feste Seitenverhaeltnis sehr
       hoch - mit oben angesetztem Text blieb darunter eine grosse leere
       Flaeche. Oben etwas mehr Luft als unten, weil die Menueleiste die
       ersten 100 Pixel ueberdeckt und der Block sonst optisch zu hoch
       wirkt. */
    justify-content: center !important;
    padding-block: clamp(5rem, 9vh, 7rem) clamp(3rem, 5vw, 4.5rem) !important;
  }
  body.page .hero > .e-con-full { align-content: center !important; }
}

/* Die Lichteffekte waren fuer weissen Grund gebaut - Raster, Schimmer und
   Lichtbaender. Auf dem Foto stoeren sie nur; das bringt sein eigenes
   Licht mit. */
body.page .hero .hero__grid,
body.page .hero .hero__glow,
body.page .hero .licht__band { display: none !important; }

/* --------------------------------------------------------------------------
   Schrift
   -------------------------------------------------------------------------- */
body.page .hero .elementor-widget-container > *,
body.page .hero h1,
body.page .hero p { color: #FFFFFF !important; }

/* Die Rubrikzeile stand in Dunkelblau - auf Schwarz unsichtbar. */
body.page .hero .elementor-widget:first-of-type .elementor-heading-title {
  color: rgba(255, 255, 255, .62) !important;
}

/* "Wirkung." hob sich bisher durch ein dunkles Blau ab. Auf dem dunklen
   Grund braucht es den umgekehrten Weg: ein helles, kuehles Blau, das
   neben dem Weiss noch als eigener Ton zu erkennen ist. */
body.page .hero .text-gradient,
body.page .hero .text-gradient.text-gradient {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: #93BEE4 !important;
}

body.page .hero p:not(.elementor-heading-title) { color: rgba(255, 255, 255, .78) !important; }

/* --------------------------------------------------------------------------
   Schaltflaechen
   Der dunkle Knopf verschwaende auf dunklem Grund fast vollstaendig.
   Deshalb kehren beide um: der erste wird weiss mit dunkler Schrift, der
   zweite bekommt nur eine helle Linie.
   -------------------------------------------------------------------------- */
body.page .hero .elementor-button {
  background-color: #FFFFFF !important;
  color: #0B0D10 !important;
  border-color: #FFFFFF !important;
}
body.page .hero .elementor-button:hover {
  background-color: rgba(255, 255, 255, .86) !important;
}
body.page .hero .elementor-widget:last-of-type .elementor-button,
body.page .hero .elementor-button--zweit {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
}
body.page .hero .elementor-widget:last-of-type .elementor-button:hover,
body.page .hero .elementor-button--zweit:hover {
  background-color: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .72) !important;
}

/* --------------------------------------------------------------------------
   Textbreite
   Die freie dunkle Flaeche reicht bis 42 % - der Text endet vorher, damit
   er nicht auf dem Fahrzeug liegt.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* Der innere Behaelter bleibt 1280 breit - er bestimmt, wo links der
     Text beginnt, und das soll gleich bleiben wie auf den anderen Seiten.
     Begrenzt werden die Bausteine DARIN: Sie brechen vor dem Fahrzeug um,
     statt darueber zu laufen. */
  body.page .hero > .e-con-full > * { max-width: 520px !important; }
}

/* --------------------------------------------------------------------------
   Handy
   Dort waere das ganze Bild zur Haelfte leere Flaeche. Stattdessen steht
   oben ein Zuschnitt auf die Produkte, der Text darunter. Die Hoehe des
   Bildes haengt am Seitenverhaeltnis des Zuschnitts (951:672), damit der
   Text immer genau darunter beginnt.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  body.page .hero,
  .hero.e-con,
  .hero {
    aspect-ratio: auto;
    background-image: url("../media/werbeartikel/hero-handy.webp") !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    /* 1.35 ist das Seitenverhaeltnis des Handy-Zuschnitts. Aendert sich
       der Zuschnitt, muss diese Zahl mit. */
    padding-top: calc(100vw / 1.35 + clamp(1.5rem, 5vw, 2.5rem)) !important;
  }
}

/* Der Kopfbereich wird von hell.css und main.js behandelt - dort gilt die
   Aufhellung fuer ALLE dunklen Flaechen, nicht nur fuer diese. Damit der
   Hero dazugehoert, traegt er data-dunkel (gesetzt von heroband.js). */