/*
  Template "default" (wird ueber css('@auto') nur fuer dieses Template geladen,
  daher ohne SCSS-Build).
*/

/* Intro mit Hintergrundbild (Feld "Hintergrundbild" im Intro-Tab) */
.intro-has-image {
  position: relative;
  overflow: hidden;
}

.intro-has-image > .container {
  position: relative;
  z-index: 1;
}

.intro-has-image .intro-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

/* Logo ueber dem Intro-Bild hell; in den Sektionen setzt main.js light-/dark-logo */
body:has(.intro-has-image) #logo:not(.light-logo):not(.dark-logo) .fill {
  fill: #f9f9ec; /* wie .light-logo */
}

/* Mobil liegt der Text ueber dem ganzen Bild: linke, ruhige Bildseite zeigen */
@media (max-width: 991.98px) {
  .intro-has-image .intro-image {
    object-position: left bottom;
  }
}

/*
  Landingpage /webshop-weingut, Referenz Waigand: Der Laptop ragt in die
  dunkle Sektion davor. Gebunden an die ID der Layout-Zeile, weil Layout-
  Spalten keine eigenen Klassen haben.
*/
@media (min-width: 992px) {
  #weingut-referenz > .col-lg-6:last-child figure {
    position: relative;
    z-index: 2;
    margin-top: -160px;
  }

  /* Platz in der Sektion davor, damit der Laptop den Text nicht ueberdeckt */
  .section-wrapper:has(> .container > #weingut-antwort) {
    padding-bottom: 260px !important;
  }
}

/* badgeCloud auf blauem Grund: Bootstrap-Badge (secondary, 25 %) waere unsichtbar */
.bg-secondary .badgeCloud .badge {
  background-color: rgba(249, 249, 236, 0.14) !important;
  color: #f9f9ec !important;
}

/* Shopify-Logo ueber "Unsere Antwort" (Landingpage /webshop-weingut) */
#weingut-antwort figure {
  max-width: 220px;
  margin-right: auto;
  margin-left: auto;
}

/* Angebot: Personenblock unter dem Text, Foto nicht spaltenbreit */
#weingut-angebot .person .personImage img {
  max-width: 200px;
}

/* Fotozeile "Ein paar Worte zu uns": Luft zwischen Bild und Caption */
#weingut-team figcaption {
  margin-top: 1rem;
}