/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2026 | 19:12:03 */
/* =========================================================
   PHOENIX ÜBER-UNS – LEBEN BEI PHOENIX
   Klassen: phx-about-life
   ========================================================= */

.phx-about-life,
.elementor-element.phx-about-life {
  position: relative !important;
  overflow: hidden !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(circle at 72% 42%, rgba(255,153,51,.12) 0%, rgba(255,153,51,.032) 30%, transparent 60%),
    radial-gradient(circle at 14% 72%, rgba(204,51,0,.075) 0%, transparent 38%),
    linear-gradient(180deg, #030303 0%, #090909 50%, #030303 100%) !important;

  border-bottom: 1px solid rgba(255,153,51,.32) !important;
}

/* dezente Struktur */
.phx-about-life::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(90deg, rgba(255,153,51,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,153,51,.025) 1px, transparent 1px) !important;

  background-size: 108px 108px !important;
  opacity: .14 !important;
}

.phx-about-life__inner,
.elementor-element.phx-about-life__inner {
  position: relative !important;
  z-index: 2 !important;

  width: min(1600px, calc(100% - 96px)) !important;
  max-width: 1600px !important;

  margin: 0 auto !important;
  padding: 86px 0 96px !important;

  display: grid !important;
  grid-template-columns: minmax(420px, .72fr) minmax(620px, 1.05fr) !important;
  gap: 72px !important;
  align-items: center !important;
}

/* Textbereich */
.phx-about-life__content,
.elementor-element.phx-about-life__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100% !important;
  max-width: 560px !important;
}

/* Titel */
.phx-about-life__title,
.phx-about-life__title .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #ff9933 !important;

  font-family: "FranklinGothic", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", Impact, sans-serif !important;
  font-size: clamp(38px, 3.4vw, 64px) !important;
  font-weight: 900 !important;
  line-height: .96 !important;

  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;

  text-shadow:
    0 0 18px rgba(255,153,51,.22),
    0 5px 14px rgba(0,0,0,.85) !important;
}

/* kleine Linie unter Titel */
.phx-about-life__title .elementor-heading-title::after {
  content: "" !important;
  display: block !important;

  width: 125px !important;
  height: 3px !important;

  margin-top: 22px !important;

  background: linear-gradient(
    90deg,
    rgba(255,153,51,.95) 0%,
    rgba(255,153,51,.45) 62%,
    transparent 100%
  ) !important;

  box-shadow: 0 0 18px rgba(255,153,51,.38) !important;
}

/* Text */
.phx-about-life__text,
.phx-about-life__text .elementor-widget-container,
.phx-about-life__text p {
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,.86) !important;

  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;

  text-align: left !important;
}

.phx-about-life__text {
  margin-top: 30px !important;
}

.phx-about-life__text p {
  margin: 0 0 18px !important;
}

.phx-about-life__text p:last-child {
  margin-bottom: 0 !important;
}

/* Highlight-Reihe */
.phx-about-life__highlights,
.elementor-element.phx-about-life__highlights {
  width: 100% !important;

  margin-top: 34px !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Einzelnes Highlight */
.phx-about-life__highlight,
.elementor-element.phx-about-life__highlight {
  position: relative !important;

  padding: 14px 0 14px 22px !important;

  border-left: 3px solid #ff9933 !important;

  background: linear-gradient(
    90deg,
    rgba(255,153,51,.065) 0%,
    transparent 72%
  ) !important;
}

.phx-about-life__highlight::before {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;

  box-shadow: 0 0 18px rgba(255,153,51,.55) !important;
}

/* Highlight Text allgemein */
.phx-about-life__highlight,
.phx-about-life__highlight .elementor-widget-container,
.phx-about-life__highlight p,
.phx-about-life__highlight .elementor-heading-title {
  color: #ffffff !important;
  font-family: "Barlow", Arial, sans-serif !important;
  text-align: left !important;
}

/* Wenn du im Highlight Texteditor mit <strong> arbeitest */
.phx-about-life__highlight strong {
  display: block !important;

  margin-bottom: 4px !important;

  color: #ff9933 !important;

  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

.phx-about-life__highlight span,
.phx-about-life__highlight p {
  display: block !important;

  margin: 0 !important;

  color: rgba(255,255,255,.82) !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Galerie */
.phx-about-life__gallery,
.elementor-element.phx-about-life__gallery,
.phx-about-life__gallery > .e-con-inner {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-rows: 150px !important;
  gap: 14px !important;
}

/* Bildwidgets */
.phx-about-life__image,
.elementor-element.phx-about-life__image {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(255,153,51,.36) !important;
  border-radius: 6px !important;

  background: #080808 !important;

  box-shadow:
    0 12px 26px rgba(0,0,0,.50),
    inset 0 0 0 1px rgba(255,153,51,.04) !important;
}

/* großes Bild */
.phx-about-life__image--large,
.elementor-element.phx-about-life__image--large {
  grid-column: span 3 !important;
  grid-row: span 2 !important;
}

/* normale Bilder */
.phx-about-life__image:not(.phx-about-life__image--large) {
  grid-column: span 3 !important;
}

/* Bildcontainer */
.phx-about-life__image .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.phx-about-life__image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  filter:
    brightness(.78)
    contrast(1.08)
    saturate(.96) !important;

  transition:
    transform .32s ease,
    filter .32s ease !important;
}

.phx-about-life__image:hover img {
  transform: scale(1.035) !important;

  filter:
    brightness(.88)
    contrast(1.1)
    saturate(1.05) !important;
}

/* dezenter Overlay auf Bildern */
.phx-about-life__image::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.16) 52%,
      rgba(0,0,0,.38) 100%
    ) !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .phx-about-life__inner,
  .elementor-element.phx-about-life__inner {
    width: min(100% - 64px, 1100px) !important;

    grid-template-columns: 1fr !important;
    gap: 52px !important;
  }

  .phx-about-life__content,
  .elementor-element.phx-about-life__content {
    max-width: 760px !important;
  }

  .phx-about-life__gallery,
  .elementor-element.phx-about-life__gallery,
  .phx-about-life__gallery > .e-con-inner {
    grid-auto-rows: 140px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .phx-about-life__inner,
  .elementor-element.phx-about-life__inner {
    width: calc(100% - 36px) !important;
    padding: 62px 0 76px !important;
    gap: 38px !important;
  }

  .phx-about-life__title,
  .phx-about-life__title .elementor-heading-title {
    font-size: clamp(32px, 10vw, 46px) !important;
  }

  .phx-about-life__text,
  .phx-about-life__text .elementor-widget-container,
  .phx-about-life__text p {
    font-size: 16px !important;
    line-height: 1.56 !important;
  }

  .phx-about-life__gallery,
  .elementor-element.phx-about-life__gallery,
  .phx-about-life__gallery > .e-con-inner {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
    gap: 14px !important;
  }

  .phx-about-life__image,
  .elementor-element.phx-about-life__image,
  .phx-about-life__image--large,
  .elementor-element.phx-about-life__image--large {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* mobil nur die ersten 3 Bilder zeigen */
  .phx-about-life__image:nth-child(n+4),
  .phx-about-life__gallery > .e-con-inner > .phx-about-life__image:nth-child(n+4) {
    display: none !important;
  }
}