/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2026 | 19:11:54 */
/* =========================================================
   PHOENIX ÜBER-UNS – HERO, FACTS, INTRO
   Klassen: phx-about-hero, phx-about-facts, phx-about-intro
   ========================================================= */

/* ---------- About Hero ---------- */

.phx-about-hero {
  position: relative !important;
  min-height: 620px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(255, 153, 51, .35) !important;
}

.phx-about-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 32%, rgba(0,0,0,.38) 62%, rgba(0,0,0,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.08) 42%, rgba(0,0,0,.86) 100%) !important;
}

.phx-about-hero__inner {
  position: relative !important;
  z-index: 5 !important;
  width: min(1600px, calc(100% - 96px)) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 40px 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.phx-about-hero__content {
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.phx-kicker,
.phx-kicker .elementor-heading-title {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 14px rgba(255,153,51,.35) !important;
}

.phx-about-hero__title,
.phx-about-hero__title .elementor-heading-title {
  margin: 0 !important;
  color: var(--phx-orange, #ff9933) !important;
  font-family: "FranklinGothic", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", Impact, sans-serif !important;
  font-size: clamp(52px, 6vw, 92px) !important;
  font-weight: 900 !important;
  line-height: .92 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 24px rgba(255,153,51,.22), 0 4px 0 rgba(0,0,0,.45) !important;
}

.phx-about-hero__title span,
.phx-about-hero__title .elementor-heading-title span {
  color: #fff !important;
}

.phx-about-hero__text {
  max-width: 600px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
}

.phx-about-hero__text,
.phx-about-hero__text p {
  color: rgba(255,255,255,.92) !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.phx-about-hero__text p { margin: 0 !important; }

.phx-about-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  margin-top: 34px !important;
  padding: 0 !important;
}

.phx-about-hero .phx-btn .elementor-button,
.phx-about-hero .phx-btn a.elementor-button,
.phx-about-hero .elementor-widget-button.phx-btn .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  min-height: 46px !important;
  padding: 14px 24px !important;
  border-radius: 0 !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.phx-about-hero .phx-btn-primary .elementor-button,
.phx-about-hero .phx-btn-primary a.elementor-button {
  color: #000 !important;
  background: linear-gradient(180deg, #ffad4d 0%, #ff9933 45%, #e87316 100%) !important;
  border: 1px solid #ff9933 !important;
  box-shadow: 0 0 0 1px rgba(255,153,51,.22), 0 0 24px rgba(255,153,51,.24) !important;
}

.phx-about-hero .phx-btn-primary .elementor-button:hover,
.phx-about-hero .phx-btn-primary a.elementor-button:hover {
  border-color: #ffcc33 !important;
  background: linear-gradient(180deg, #ffbd68 0%, #ff9933 52%, #f07a18 100%) !important;
  box-shadow: 0 0 0 1px rgba(255,204,51,.35), 0 0 34px rgba(255,153,51,.45) !important;
  transform: translateY(-1px) !important;
}

.phx-about-hero .phx-btn-secondary .elementor-button,
.phx-about-hero .phx-btn-secondary a.elementor-button {
  color: #fff !important;
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,153,51,.85) !important;
  box-shadow: inset 0 0 18px rgba(255,153,51,.08), 0 0 18px rgba(255,153,51,.12) !important;
}

.phx-about-hero .phx-btn-secondary .elementor-button:hover,
.phx-about-hero .phx-btn-secondary a.elementor-button:hover {
  color: #ff9933 !important;
  border-color: #ffcc33 !important;
  background: rgba(255,153,51,.08) !important;
  box-shadow: inset 0 0 22px rgba(255,153,51,.14), 0 0 30px rgba(255,153,51,.22) !important;
  transform: translateY(-1px) !important;
}

/* ---------- About Facts Strip ---------- */

.phx-about-facts {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #050505 0%, #090909 48%, #030303 100%) !important;
  border-top: 1px solid rgba(255,153,51,.38) !important;
  border-bottom: 1px solid rgba(255,153,51,.32) !important;
  box-shadow: 0 -20px 60px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,204,51,.08), inset 0 -1px 0 rgba(255,153,51,.08) !important;
}

.phx-about-facts::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,153,51,.12) 0%, rgba(255,153,51,.03) 28%, transparent 58%),
    radial-gradient(circle at 82% 50%, rgba(255,153,51,.10) 0%, rgba(255,153,51,.025) 30%, transparent 62%) !important;
}

.phx-about-facts__inner,
.elementor-element.phx-about-facts__inner,
.phx-about-facts__inner > .e-con-inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.phx-about-fact,
.elementor-element.phx-about-fact {
  position: relative !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 8px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  transition: background-color .18s ease, transform .18s ease !important;
}

.phx-about-fact:hover { background: rgba(255,153,51,.035) !important; }

.phx-about-fact:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 18% !important;
  bottom: 18% !important;
  width: 1px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(255,153,51,.58) 48%, transparent 100%) !important;
}

.phx-about-fact .elementor-icon {
  color: #ff9933 !important;
  fill: #ff9933 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 10px rgba(255,153,51,.34)) !important;
}

.phx-about-fact .elementor-icon svg {
  width: 34px !important;
  height: 34px !important;
  fill: currentColor !important;
}

.phx-about-fact:hover .elementor-icon {
  filter: drop-shadow(0 0 16px rgba(255,153,51,.55)) !important;
}

.phx-about-fact__text,
.phx-about-fact__text p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Barlow", Arial, sans-serif !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

.phx-about-fact__text strong,
.phx-about-fact__text p strong {
  display: block !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

.phx-about-fact__text span,
.phx-about-fact__text p span {
  display: block !important;
  margin-top: 4px !important;
  color: #ff9933 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

/* ---------- About Intro / Wer wir sind ---------- */

.phx-about-intro,
.elementor-element.phx-about-intro {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(255,153,51,.35) !important;
  background:
    radial-gradient(circle at 74% 46%, rgba(255,153,51,.13) 0%, rgba(255,153,51,.045) 30%, transparent 62%),
    linear-gradient(180deg, #050505 0%, #0d0d0d 48%, #050505 100%) !important;
}

.phx-about-intro::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .24 !important;
  background:
    linear-gradient(90deg, rgba(255,153,51,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,153,51,.035) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  -webkit-mask-image: radial-gradient(circle at 78% 48%, black 0%, transparent 62%) !important;
  mask-image: radial-gradient(circle at 78% 48%, black 0%, transparent 62%) !important;
}

.phx-about-intro::after {
  content: "" !important;
  position: absolute !important;
  top: 8% !important;
  right: -120px !important;
  z-index: 2 !important;
  width: 420px !important;
  height: 720px !important;
  pointer-events: none !important;
  opacity: .55 !important;
  filter: blur(2px) !important;
  transform: rotate(18deg) !important;
  background: linear-gradient(180deg, rgba(255,153,51,.22) 0%, rgba(204,51,0,.12) 55%, transparent 100%) !important;
}

.phx-about-intro__inner,
.elementor-element.phx-about-intro__inner {
  position: relative !important;
  z-index: 5 !important;
  width: min(1600px, calc(100% - 96px)) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 88px 0 96px !important;
  display: grid !important;
  grid-template-columns: minmax(620px, .95fr) minmax(420px, .75fr) !important;
  gap: 120px !important;
  align-items: center !important;
}

.phx-about-intro__content,
.elementor-element.phx-about-intro__content {
  z-index: 6 !important;
  width: 100% !important;
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.phx-about-intro__kicker,
.phx-about-intro__kicker .elementor-heading-title {
  margin: 0 0 0px !important;
  padding: 0 !important;
  color: #ffcc33 !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.phx-about-intro__title,
.phx-about-intro__title .elementor-heading-title {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 5px !important;
  color: #ff9933 !important;
  font-family: "FranklinGothic", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", Impact, sans-serif !important;
  font-size: clamp(46px, 3.1vw, 62px) !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  letter-spacing: .025em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 0 18px rgba(255,153,51,.22), 0 4px 10px rgba(0,0,0,.85) !important;
}

.phx-about-intro__title::before,
.phx-about-intro__title::after,
.phx-about-intro__title .elementor-heading-title::before {
  content: none !important;
  display: none !important;
}

.phx-about-intro__title .elementor-heading-title::after {
  content: "" !important;
  display: block !important;
  width: 105px !important;
  height: 3px !important;
  margin-top: 22px !important;
  background: linear-gradient(90deg, #ff9933 0%, rgba(255,153,51,.45) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,153,51,.38) !important;
}

.phx-about-intro__text {
  width: 100% !important;
  max-width: 650px !important;
  margin-top: 0px !important;
  padding: 0 !important;
}

.phx-about-intro__text,
.phx-about-intro__text .elementor-widget-container,
.phx-about-intro__text p {
  color: rgba(255,255,255,.88) !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}

.phx-about-intro__text p {
  margin: 0 0 5px !important;
  padding: 0 !important;
}

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

.phx-about-intro__statement,
.elementor-element.phx-about-intro__statement {
  width: 100% !important;
  max-width: 560px !important;
  margin-top: 10px !important;
  padding: 14px 0 14px 22px !important;
  border-left: 3px solid #ff9933 !important;
  background: linear-gradient(90deg, rgba(255,153,51,.06) 0%, transparent 72%) !important;
}

.phx-about-intro__statement::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,.62) !important;
}

.phx-about-intro__statement,
.phx-about-intro__statement p,
.phx-about-intro__statement .elementor-widget-container {
  color: #fff !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

.phx-about-intro__statement p { margin: 0 !important; }

.phx-about-intro__visual,
.elementor-element.phx-about-intro__visual {
  position: relative !important;
  z-index: 5 !important;
  min-height: 380px !important;
  padding: 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.phx-about-intro__visual::before,
.phx-about-intro__visual::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.phx-about-intro__visual::before {
  width: 360px !important;
  height: 360px !important;
  border: 1px solid rgba(255,153,51,.25) !important;
  background: radial-gradient(circle, rgba(255,153,51,.14) 0%, rgba(255,153,51,.055) 34%, transparent 68%) !important;
  box-shadow: 0 0 80px rgba(255,153,51,.13), inset 0 0 45px rgba(255,153,51,.08) !important;
}

.phx-about-intro__visual::after {
  width: 445px !important;
  height: 445px !important;
  opacity: .8 !important;
  transform: translate(-50%, -50%) rotate(-12deg) !important;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,153,51,.55) 32deg, transparent 72deg, transparent 138deg, rgba(255,153,51,.34) 174deg, transparent 218deg, transparent 280deg, rgba(255,153,51,.42) 316deg, transparent 360deg) !important;
  -webkit-mask-image: radial-gradient(circle, transparent 0 67%, black 68% 70%, transparent 71%) !important;
  mask-image: radial-gradient(circle, transparent 0 67%, black 68% 70%, transparent 71%) !important;
}

.phx-about-intro__logo,
.elementor-element.phx-about-intro__logo {
  position: relative !important;
  z-index: 4 !important;
  max-width: 290px !important;
  width: 100% !important;
  filter: drop-shadow(0 0 26px rgba(255,153,51,.36)) drop-shadow(0 12px 24px rgba(0,0,0,.82)) !important;
}

.phx-about-intro__logo img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.phx-about-intro__visual-label,
.phx-about-intro__visual-label .elementor-heading-title {
  position: relative !important;
  z-index: 4 !important;
  margin-top: 26px !important;
  color: rgba(255,255,255,.86) !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

/* ---------- About Responsive ---------- */

@media (max-width: 1200px) {
  .phx-about-intro__inner,
  .elementor-element.phx-about-intro__inner {
    width: min(100% - 64px, 1100px) !important;
    grid-template-columns: minmax(520px, 1fr) minmax(330px, .7fr) !important;
    gap: 70px !important;
  }

  .phx-about-intro__title,
  .phx-about-intro__title .elementor-heading-title {
    font-size: clamp(42px, 4vw, 56px) !important;
  }
}

@media (max-width: 1024px) {
  .phx-about-hero { min-height: 560px !important; }
  .phx-about-hero__inner {
    width: min(100% - 44px, 900px) !important;
    padding: 120px 0 90px !important;
  }

  .phx-about-facts__inner,
  .elementor-element.phx-about-facts__inner,
  .phx-about-facts__inner > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 20px !important;
  }

  .phx-about-fact {
    justify-content: flex-start !important;
    padding: 16px 22px !important;
  }

  .phx-about-fact:nth-child(2)::after { display: none !important; }

  .phx-about-fact:nth-child(1),
  .phx-about-fact:nth-child(2) {
    border-bottom: 1px solid rgba(255,153,51,.18) !important;
  }

  .phx-about-intro__inner,
  .elementor-element.phx-about-intro__inner {
    width: min(100% - 44px, 900px) !important;
    grid-template-columns: 1fr !important;
    gap: 52px !important;
    padding: 76px 0 84px !important;
  }

  .phx-about-intro__content { max-width: 720px !important; }
  .phx-about-intro__visual { min-height: 320px !important; }
}

@media (max-width: 767px) {
  .phx-about-hero {
    min-height: 620px !important;
    background-position: center center !important;
  }

  .phx-about-hero::before {
    background:
      linear-gradient(90deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.76) 55%, rgba(0,0,0,.72) 100%),
      linear-gradient(180deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.92) 100%) !important;
  }

  .phx-about-hero__inner {
    width: calc(100% - 36px) !important;
    align-items: flex-end !important;
    padding: 130px 0 70px !important;
  }

  .phx-about-hero__content { max-width: 100% !important; }

  .phx-kicker,
  .phx-kicker .elementor-heading-title {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  .phx-about-hero__title,
  .phx-about-hero__title .elementor-heading-title {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: .94 !important;
  }

  .phx-about-hero__text,
  .phx-about-hero__text p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .phx-about-hero__actions {
    width: 100% !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }

  .phx-about-hero .phx-btn,
  .phx-about-hero .phx-btn .elementor-button,
  .phx-about-hero .phx-btn a.elementor-button {
    width: 100% !important;
    min-width: 100% !important;
  }

  .phx-about-facts__inner,
  .elementor-element.phx-about-facts__inner,
  .phx-about-facts__inner > .e-con-inner {
    grid-template-columns: 1fr !important;
    padding: 10px 18px !important;
  }

  .phx-about-fact {
    min-height: 64px !important;
    padding: 16px 0 !important;
  }

  .phx-about-fact:not(:last-child)::after { display: none !important; }
  .phx-about-fact:not(:last-child) { border-bottom: 1px solid rgba(255,153,51,.18) !important; }

  .phx-about-fact .elementor-icon {
    font-size: 30px !important;
  }

  .phx-about-fact .elementor-icon svg {
    width: 30px !important;
    height: 30px !important;
  }

  .phx-about-fact__text strong { font-size: 21px !important; }
  .phx-about-fact__text span { font-size: 12px !important; }

  .phx-about-intro__inner,
  .elementor-element.phx-about-intro__inner {
    width: calc(100% - 36px) !important;
    gap: 40px !important;
    padding: 62px 0 72px !important;
  }

  .phx-about-intro__kicker,
  .phx-about-intro__kicker .elementor-heading-title {
    font-size: 11px !important;
    letter-spacing: .13em !important;
  }

  .phx-about-intro__title,
  .phx-about-intro__title .elementor-heading-title {
    font-size: clamp(34px, 10vw, 46px) !important;
    white-space: normal !important;
  }

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

  .phx-about-intro__statement,
  .phx-about-intro__statement p,
  .phx-about-intro__statement .elementor-widget-container {
    font-size: 15px !important;
  }

  .phx-about-intro__visual {
    min-height: 260px !important;
  }

  .phx-about-intro__visual::before {
    width: 250px !important;
    height: 250px !important;
  }

  .phx-about-intro__visual::after {
    width: 315px !important;
    height: 315px !important;
  }

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

/* =========================================================
   PHOENIX ÜBER-UNS – AUSRICHTUNG / STRATEGIEBAND
   Klassen: phx-about-focus
   ========================================================= */

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

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

  background:
    radial-gradient(circle at 50% 50%, rgba(255,153,51,.08) 0%, rgba(255,153,51,.025) 28%, transparent 58%),
    linear-gradient(180deg, #030303 0%, #080808 50%, #030303 100%) !important;

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

.phx-about-focus::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;

  background:
    linear-gradient(90deg, transparent 0%, rgba(255,153,51,.08) 50%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 96px
    ) !important;

  opacity: .55 !important;
}

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

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

  padding: 62px 0 70px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
}

/* Überschrift */
.phx-about-focus__title,
.phx-about-focus__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(34px, 3vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;

  text-shadow:
    0 0 18px rgba(255,153,51,.20),
    0 4px 10px rgba(0,0,0,.85) !important;
}

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

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

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

/* Einzelner Strategiepunkt */
.phx-about-focus__item,
.elementor-element.phx-about-focus__item {
  position: relative !important;

  min-height: 170px !important;
  padding: 12px 48px !important;

  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 26px !important;
  align-items: center !important;

  background: transparent !important;
}

/* Trennlinie zwischen Punkten */
.phx-about-focus__item:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 8% !important;
  bottom: 8% !important;

  width: 1px !important;

  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,153,51,.70) 50%,
    transparent 100%
  ) !important;

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

/* Icon */
.phx-about-focus__item .elementor-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #ff9933 !important;
  fill: #ff9933 !important;

  font-size: 54px !important;
  line-height: 1 !important;

  filter:
    drop-shadow(0 0 12px rgba(255,153,51,.34))
    drop-shadow(0 8px 12px rgba(0,0,0,.75)) !important;
}

.phx-about-focus__item .elementor-icon svg {
  width: 54px !important;
  height: 54px !important;
  fill: currentColor !important;
}

/* Content */
.phx-about-focus__content,
.elementor-element.phx-about-focus__content {
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

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

  color: #ffffff !important;

  font-family: "FranklinGothic", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", Impact, sans-serif !important;
  font-size: clamp(20px, 1.35vw, 28px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;

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

  text-shadow:
    0 2px 8px rgba(0,0,0,.9),
    0 0 10px rgba(255,255,255,.12) !important;
}

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

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

  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.phx-about-focus__item-text p {
  margin: 0 !important;
}

/* Hover subtil */
.phx-about-focus__item {
  transition: background-color .18s ease, transform .18s ease !important;
}

.phx-about-focus__item:hover {
  background: rgba(255,153,51,.035) !important;
}

.phx-about-focus__item:hover .elementor-icon {
  filter:
    drop-shadow(0 0 18px rgba(255,153,51,.55))
    drop-shadow(0 8px 12px rgba(0,0,0,.75)) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .phx-about-focus__inner,
  .elementor-element.phx-about-focus__inner {
    width: min(100% - 44px, 900px) !important;
    padding: 56px 0 62px !important;
    gap: 34px !important;
  }

  .phx-about-focus__grid,
  .elementor-element.phx-about-focus__grid,
  .phx-about-focus__grid > .e-con-inner {
    grid-template-columns: 1fr !important;
  }

  .phx-about-focus__item,
  .elementor-element.phx-about-focus__item {
    min-height: auto !important;
    padding: 26px 0 !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .phx-about-focus__item:not(:last-child)::after {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 1px !important;

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

  .phx-about-focus__item .elementor-icon {
    font-size: 46px !important;
  }

  .phx-about-focus__item .elementor-icon svg {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .phx-about-focus__inner,
  .elementor-element.phx-about-focus__inner {
    width: calc(100% - 36px) !important;
    padding: 48px 0 54px !important;
  }

  .phx-about-focus__title,
  .phx-about-focus__title .elementor-heading-title {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .phx-about-focus__item,
  .elementor-element.phx-about-focus__item {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .phx-about-focus__content,
  .elementor-element.phx-about-focus__content {
    align-items: center !important;
  }

  .phx-about-focus__item-title,
  .phx-about-focus__item-title .elementor-heading-title,
  .phx-about-focus__item-text,
  .phx-about-focus__item-text p {
    text-align: center !important;
  }
}

/* =========================================================
   PHOENIX ÜBER-UNS – MOTTO / STATEMENT BAND
   Klassen: phx-about-motto
   ========================================================= */

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

  width: 100% !important;
  min-height: 320px !important;

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

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-color: #000 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

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

/* dunkle Bild-/Atmosphäre-Overlays */
.phx-about-motto::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.58) 34%,
      rgba(0,0,0,.48) 66%,
      rgba(0,0,0,.88) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.18) 48%,
      rgba(0,0,0,.78) 100%
    ),
    radial-gradient(
      circle at 50% 58%,
      rgba(255,153,51,.18) 0%,
      rgba(255,153,51,.06) 26%,
      transparent 62%
    ) !important;
}

/* feine technische Linien */
.phx-about-motto::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,153,51,.10) 50%,
      transparent 100%
    ) !important;

  opacity: .48 !important;
}

/* innerer Textcontainer */
.phx-about-motto__inner,
.elementor-element.phx-about-motto__inner {
  position: relative !important;
  z-index: 5 !important;

  width: min(1200px, calc(100% - 48px)) !important;
  max-width: 1200px !important;

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

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

/* Kicker */
.phx-about-motto__kicker,
.phx-about-motto__kicker .elementor-heading-title {
  margin: 0 0 18px !important;
  padding: 0 !important;

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

  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

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

  text-shadow: 0 0 12px rgba(255,153,51,.24) !important;
}

/* Hauptsatz */
.phx-about-motto__title,
.phx-about-motto__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, 4.2vw, 78px) !important;
  font-weight: 900 !important;
  line-height: .95 !important;

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

  text-shadow:
    0 0 20px rgba(255,153,51,.30),
    0 0 42px rgba(255,153,51,.14),
    0 5px 12px rgba(0,0,0,.9) !important;
}

/* Unterzeile */
.phx-about-motto__text,
.phx-about-motto__text .elementor-widget-container,
.phx-about-motto__text p {
  margin: 22px 0 0 !important;
  padding: 0 !important;

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

  font-family: "Barlow", Arial, sans-serif !important;
  font-size: clamp(18px, 1.45vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;

  text-align: center !important;
}

.phx-about-motto__text p {
  margin: 0 !important;
}

/* kleiner Leuchtstrich unter dem Motto */
.phx-about-motto__text::after {
  content: "" !important;
  display: block !important;

  width: 180px !important;
  height: 2px !important;

  margin: 30px auto 0 !important;

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

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

/* Tablet */
@media (max-width: 1024px) {
  .phx-about-motto,
  .elementor-element.phx-about-motto {
    min-height: 280px !important;
  }

  .phx-about-motto__inner,
  .elementor-element.phx-about-motto__inner {
    padding: 68px 0 72px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .phx-about-motto,
  .elementor-element.phx-about-motto {
    min-height: 260px !important;
    background-position: center center !important;
  }

  .phx-about-motto__inner,
  .elementor-element.phx-about-motto__inner {
    width: calc(100% - 36px) !important;
    padding: 58px 0 62px !important;
  }

  .phx-about-motto__kicker,
  .phx-about-motto__kicker .elementor-heading-title {
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }

  .phx-about-motto__title,
  .phx-about-motto__title .elementor-heading-title {
    font-size: clamp(32px, 9.5vw, 46px) !important;
    line-height: 1 !important;
  }

  .phx-about-motto__text,
  .phx-about-motto__text .elementor-widget-container,
  .phx-about-motto__text p {
    font-size: 16px !important;
  }

  .phx-about-motto__text::after {
    width: 130px !important;
    margin-top: 24px !important;
  }
}

/* =========================================================
   PHOENIX ÜBER-UNS – ORGANISATION
   Klassen: phx-about-org
   ========================================================= */

.phx-about-org {
  --phx-about-org-bg: url("/wp-content/uploads/2026/06/phx-about-org-bg.png");
}

.phx-about-org,
.elementor-element.phx-about-org {
  position: relative !important;
  overflow: hidden !important;
	
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  background-image:
    radial-gradient(circle at 50% 0%, rgba(255,153,51,.10) 0%, rgba(255,153,51,.025) 30%, transparent 56%),
    linear-gradient(
      90deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.76) 34%,
      rgba(0,0,0,.72) 66%,
      rgba(0,0,0,.86) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.62) 48%,
      rgba(0,0,0,.80) 100%
    ),
    var(--phx-about-org-bg) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

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

.phx-about-org::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !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: 112px 112px !important;
  opacity: .18 !important;
}

.phx-about-org__inner,
.elementor-element.phx-about-org__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 104px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 54px !important;
}

/* Kopfbereich */
.phx-about-org__head,
.elementor-element.phx-about-org__head {
  width: 100% !important;
  max-width: 920px !important;

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

  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Titel */
.phx-about-org__title,
.phx-about-org__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(40px, 3.6vw, 68px) !important;
  font-weight: 900 !important;
  line-height: .95 !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;

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

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

  width: 170px !important;
  height: 2px !important;

  margin: 26px auto 0 !important;

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

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

/* Intro */
.phx-about-org__intro,
.phx-about-org__intro .elementor-widget-container,
.phx-about-org__intro p {
  margin: 24px 0 0 !important;
  padding: 0 !important;

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

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

  text-align: center !important;
}

.phx-about-org__intro p {
  margin: 0 !important;
}

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

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

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

/* Einzelne Karte */
.phx-about-org__card,
.elementor-element.phx-about-org__card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 390px !important;
  padding: 34px 28px 32px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  text-align: center !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,153,51,.12) 0%, rgba(255,153,51,.035) 42%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%) !important;

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

  box-shadow:
    inset 0 0 34px rgba(255,153,51,.032),
    0 16px 34px rgba(0,0,0,.55) !important;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease !important;
}

/* obere Akzentkante */
.phx-about-org__card::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 0 !important;

  height: 3px !important;

  background: var(--phx-card-accent, #ff9933) !important;

  box-shadow: 0 0 20px var(--phx-card-glow, rgba(255,153,51,.35)) !important;
}

/* diagonaler Hintergrundakzent */
.phx-about-org__card::after {
  content: "" !important;
  position: absolute !important;
  right: -80px !important;
  bottom: -120px !important;

  width: 220px !important;
  height: 320px !important;

  transform: rotate(22deg) !important;

  background: linear-gradient(
    180deg,
    var(--phx-card-soft, rgba(255,153,51,.10)) 0%,
    transparent 100%
  ) !important;

  pointer-events: none !important;
}

/* Abteilungsfarben */
.phx-about-org__card--security {
  --phx-card-accent: #e74c3c;
  --phx-card-glow: rgba(231,76,60,.42);
  --phx-card-soft: rgba(231,76,60,.13);
}

.phx-about-org__card--logistics {
  --phx-card-accent: #05c49c;
  --phx-card-glow: rgba(5,196,156,.42);
  --phx-card-soft: rgba(5,196,156,.13);
}

.phx-about-org__card--resources {
  --phx-card-accent: #f1c40f;
  --phx-card-glow: rgba(241,196,15,.42);
  --phx-card-soft: rgba(241,196,15,.13);
}

.phx-about-org__card--research {
  --phx-card-accent: #3498db;
  --phx-card-glow: rgba(52,152,219,.42);
  --phx-card-soft: rgba(52,152,219,.13);
}

/* Hover */
.phx-about-org__card:hover,
.elementor-element.phx-about-org__card:hover {
  transform: translateY(-6px) !important;

  border-color: var(--phx-card-accent, #ff9933) !important;

  background:
    radial-gradient(circle at 50% 0%, var(--phx-card-soft, rgba(255,153,51,.16)) 0%, rgba(255,255,255,.025) 50%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.014) 100%) !important;

  box-shadow:
    inset 0 0 38px rgba(255,153,51,.045),
    0 20px 42px rgba(0,0,0,.72),
    0 0 24px var(--phx-card-glow, rgba(255,153,51,.22)) !important;
}

/* Icon */
.phx-about-org__icon,
.elementor-element.phx-about-org__icon {
  position: relative !important;
  z-index: 2 !important;

  width: 100% !important;

  margin: 0 0 26px !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
}

.phx-about-org__icon .elementor-widget-container {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}

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

  width: clamp(120px, 9vw, 180px) !important;
  max-width: 100% !important;
  height: auto !important;

  object-fit: contain !important;

  filter:
    drop-shadow(0 0 12px var(--phx-card-glow, rgba(255,153,51,.30)))
    drop-shadow(0 12px 16px rgba(0,0,0,.78)) !important;
}

/* Karten-Titel */
.phx-about-org__card-title,
.phx-about-org__card-title .elementor-heading-title {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 0 18px !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: "FranklinGothic", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", Impact, sans-serif !important;
  font-size: clamp(22px, 1.45vw, 30px) !important;
  font-weight: 900 !important;
  line-height: 1.06 !important;

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

  text-shadow:
    0 2px 8px rgba(0,0,0,.95),
    0 0 10px rgba(255,255,255,.12) !important;
}

/* Karten-Text */
.phx-about-org__card-text,
.phx-about-org__card-text .elementor-widget-container,
.phx-about-org__card-text p {
  position: relative !important;
  z-index: 2 !important;

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

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

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

  text-align: center !important;
}

.phx-about-org__card-text p {
  margin: 0 !important;
}

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

  .phx-about-org__grid,
  .elementor-element.phx-about-org__grid,
  .phx-about-org__grid > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .phx-about-org__card,
  .elementor-element.phx-about-org__card {
    min-height: 350px !important;
  }
}

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

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

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

  .phx-about-org__grid,
  .elementor-element.phx-about-org__grid,
  .phx-about-org__grid > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .phx-about-org__card,
  .elementor-element.phx-about-org__card {
    min-height: auto !important;
    padding: 32px 24px 30px !important;
  }

  .phx-about-org__icon img {
    width: clamp(120px, 48vw, 170px) !important;
  }
}

/* =========================================================
   PHOENIX ÜBER-UNS – RÄNGE & VERANTWORTUNG
   Klassen: phx-about-ranks
   ========================================================= */

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

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
	padding-bottom: 35px !important;

  background:
    radial-gradient(circle at 50% 42%, rgba(255,153,51,.10) 0%, rgba(255,153,51,.025) 28%, transparent 58%),
    linear-gradient(180deg, #030303 0%, #080808 48%, #030303 100%) !important;

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

.phx-about-ranks::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.018) 0px,
      rgba(255,255,255,.018) 1px,
      transparent 1px,
      transparent 92px
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,153,51,.08) 50%,
      transparent 100%
    ) !important;

  opacity: .45 !important;
}

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

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

  margin: 0 auto !important;
  padding:60px 0 30px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 58px !important;
}

/* Kopfbereich */
.phx-about-ranks__head,
.elementor-element.phx-about-ranks__head {
  width: 100% !important;
  max-width: 900px !important;

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

  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Titel */
.phx-about-ranks__title,
.phx-about-ranks__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.5vw, 64px) !important;
  font-weight: 900 !important;
  line-height: .96 !important;

  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;

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

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

  width: 180px !important;
  height: 2px !important;

  margin: 24px auto 0 !important;

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

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

/* Intro */
.phx-about-ranks__intro,
.phx-about-ranks__intro .elementor-widget-container,
.phx-about-ranks__intro p {
  margin: 22px 0 0 !important;
  padding: 0 !important;

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

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

  text-align: center !important;
}

.phx-about-ranks__intro p {
  margin: 0 !important;
}

/* Timeline / Track */
.phx-about-ranks__track,
.elementor-element.phx-about-ranks__track,
.phx-about-ranks__track > .e-con-inner {
  position: relative !important;

  width: 100% !important;
  max-width: 1600px !important;

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

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

/* horizontale Linie hinter den Icons */
.phx-about-ranks__track::before,
.phx-about-ranks__track > .e-con-inner::before {
  content: "" !important;
  position: absolute !important;
  left: 0% !important;
  right: 0% !important;
  top: 86px !important;

  height: 2px !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,153,51,.45) 12%,
    rgba(255,153,51,.58) 50%,
    rgba(255,153,51,.45) 88%,
    transparent 100%
  ) !important;

  box-shadow: 0 0 18px rgba(255,153,51,.30) !important;
  pointer-events: none !important;
}

/* Einzelner Rang */
.phx-about-rank,
.elementor-element.phx-about-rank {
  position: relative !important;

  min-width: 0 !important;
  padding: 0 18px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
}

/* kleine Pfeile zwischen Rängen */
.phx-about-rank:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: -7px !important;
  top: 58px !important;

  width: 14px !important;
  height: 14px !important;

  border-top: 2px solid rgba(255,153,51,.85) !important;
  border-right: 2px solid rgba(255,153,51,.85) !important;

  transform: rotate(45deg) !important;

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

/* Icon */
.phx-about-rank__icon,
.elementor-element.phx-about-rank__icon {
  position: relative !important;
  z-index: 3 !important;

  width: 92px !important;
  height: 92px !important;

  margin: 0 0 24px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background:
    radial-gradient(circle, rgba(0,0,0,.82) 0%, rgba(0,0,0,.96) 72%) !important;

  border: 1px solid var(--phx-rank-color, #ff9933) !important;

  box-shadow:
    0 0 22px var(--phx-rank-glow, rgba(255,153,51,.25)),
    inset 0 0 18px rgba(255,255,255,.035) !important;
}

.phx-about-rank__icon .elementor-widget-container,
.phx-about-rank__icon .elementor-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

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

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

/* Falls Icon-Widget genutzt wird */
.phx-about-rank__icon .elementor-icon {
  color: var(--phx-rank-color, #ff9933) !important;
  fill: var(--phx-rank-color, #ff9933) !important;

  font-size: 48px !important;
  line-height: 1 !important;

  filter: drop-shadow(0 0 10px var(--phx-rank-glow, rgba(255,153,51,.35))) !important;
}

/* Falls Bild/SVG genutzt wird */
.phx-about-rank__icon img {
  display: block !important;

  width: 60px !important;
  max-width: 70% !important;
  height: auto !important;

  filter:
    drop-shadow(0 0 12px var(--phx-rank-glow, rgba(255,153,51,.35)))
    drop-shadow(0 8px 12px rgba(0,0,0,.75)) !important;
}

.phx-about-rank__icon svg {
  width: 48px !important;
  height: 48px !important;
  fill: currentColor !important;
}

/* Farbvarianten */
.phx-about-rank--inactive {
  --phx-rank-color: #9b9b9b;
  --phx-rank-glow: rgba(155,155,155,.28);
}

.phx-about-rank--applicant {
  --phx-rank-color: #9cff57;
  --phx-rank-glow: rgba(156,255,87,.30);
}

.phx-about-rank--member {
  --phx-rank-color: #3498db;
  --phx-rank-glow: rgba(52,152,219,.34);
}

.phx-about-rank--officer {
  --phx-rank-color: #05c49c;
  --phx-rank-glow: rgba(5,196,156,.32);
}

.phx-about-rank--lead {
  --phx-rank-color: #e74c3c;
  --phx-rank-glow: rgba(231,76,60,.34);
}

.phx-about-rank--board {
  --phx-rank-color: #ff9933;
  --phx-rank-glow: rgba(255,153,51,.42);
}

/* Rang-Titel */
.phx-about-rank__title,
.phx-about-rank__title .elementor-heading-title {
  margin: 0 0 12px !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: "FranklinGothic", "Franklin Gothic Heavy", "Franklin Gothic Demi", "Arial Black", Impact, sans-serif !important;
  font-size: clamp(17px, 1.1vw, 23px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;

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

  text-shadow:
    0 2px 8px rgba(0,0,0,.95),
    0 0 8px rgba(255,255,255,.12) !important;
}

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

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

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

  text-align: center !important;
}

.phx-about-rank__text p {
  margin: 0 !important;
}

/* Hover */
.phx-about-rank {
  transition: transform .22s ease !important;
}

.phx-about-rank:hover {
  transform: translateY(-4px) !important;
}

.phx-about-rank:hover .phx-about-rank__icon {
  box-shadow:
    0 0 30px var(--phx-rank-glow, rgba(255,153,51,.38)),
    inset 0 0 22px rgba(255,255,255,.045) !important;
}

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

  .phx-about-ranks__track,
  .elementor-element.phx-about-ranks__track,
  .phx-about-ranks__track > .e-con-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 46px !important;
  }

  .phx-about-ranks__track::before,
  .phx-about-ranks__track > .e-con-inner::before {
    display: none !important;
  }

  .phx-about-rank:not(:last-child)::after {
    display: none !important;
  }

  .phx-about-rank {
    padding: 0 24px !important;
  }
}

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

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

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

  .phx-about-ranks__track,
  .elementor-element.phx-about-ranks__track,
  .phx-about-ranks__track > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 !important;
  }

  .phx-about-rank,
  .elementor-element.phx-about-rank {
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    align-items: center !important;

    text-align: left !important;
  }

  .phx-about-rank__icon,
  .elementor-element.phx-about-rank__icon {
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    grid-row: span 2 !important;
  }

  .phx-about-rank__icon .elementor-icon {
    font-size: 38px !important;
  }

  .phx-about-rank__icon img {
    width: 50px !important;
  }

  .phx-about-rank__title,
  .phx-about-rank__title .elementor-heading-title,
  .phx-about-rank__text,
  .phx-about-rank__text p {
    text-align: left !important;
  }

  .phx-about-rank__title,
  .phx-about-rank__title .elementor-heading-title {
    margin-bottom: 8px !important;
  }
}