/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2026 | 19:11:21 */
/* ================================
   PHOENIX - Vorstand & Rat Section
================================ */

/* =========================================================
   PHOENIX INTERSTELLAR – VORSTAND & RAT
   Elementor-Struktur:
   phx-board-section
   └─ phx-board-title
   └─ phx-board-grid
      └─ .e-con-inner
         └─ phx-board-card
            └─ phx-board-card-content
               └─ phx-board-name
               └─ phx-board-role
               └─ phx-board-arrow
========================================================= */


/* =========================
   SECTION
========================= */

.phx-board-section,
.elementor-element.phx-board-section {
  position: relative !important;

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

  padding: 92px 32px 120px !important;

  display: block !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255, 153, 51, 0.08) 0%, rgba(255, 153, 51, 0.02) 24%, transparent 44%),
    linear-gradient(180deg, #000000 0%, #030303 48%, #000000 100%) !important;

  color: #ffffff !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Elementor Flex-Kram im Abschnitt entschärfen */
.phx-board-section > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: block !important;
}


/* =========================
   TITEL
========================= */

.phx-board-title,
.elementor-element.phx-board-title {
  width: 100% !important;
  max-width: none !important;

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

  display: block !important;

  text-align: center !important;
  background: transparent !important;
}

.phx-board-title .elementor-widget-heading,
.phx-board-title .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;

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

  text-align: center !important;
}

.phx-board-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(44px, 4.2vw, 84px) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;

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

  text-shadow:
    0 0 10px rgba(255, 153, 51, 0.42),
    0 0 24px rgba(255, 153, 51, 0.24),
    0 8px 18px rgba(0, 0, 0, 0.9) !important;
}


/* =========================
   GRID
========================= */

/* =========================
   GRID – 7 Karten nebeneinander
========================= */

.phx-board-grid,
.elementor-element.phx-board-grid {
  width: min(1840px, calc(100% - 48px)) !important;
  max-width: 1840px !important;

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

  display: block !important;

  background: transparent !important;
  box-sizing: border-box !important;
}

.phx-board-grid > .e-con-inner {
  width: 100% !important;
  max-width: none !important;

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

  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 14px !important;

  align-items: stretch !important;
  justify-items: stretch !important;
  box-sizing: border-box !important;
}

.phx-board-grid > .e-con-inner > .elementor-element {
  width: 100% !important;
  max-width: none !important;

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


/* =========================
   CARD
========================= */

.phx-board-card,
.elementor-element.phx-board-card {
  position: relative !important;
  isolation: isolate !important;

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

  aspect-ratio: 0.64 / 1 !important;
  min-height: 430px !important;

  display: block !important;

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

  overflow: hidden !important;

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

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

  box-shadow:
    inset 0 0 0 1px rgba(255, 153, 51, 0.09),
    0 0 14px rgba(255, 153, 51, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.56) !important;

  box-sizing: border-box !important;

  transition:
    transform 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

/* Bild oben leicht sichtbar lassen, unten abdunkeln */
.phx-board-card::before,
.elementor-element.phx-board-card::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.04) 30%,
      rgba(0, 0, 0, 0.48) 58%,
      rgba(0, 0, 0, 0.92) 78%,
      rgba(0, 0, 0, 0.98) 100%
    ) !important;

  pointer-events: none !important;
}

/* dezente Rand-Vignette */
.phx-board-card::after,
.elementor-element.phx-board-card::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  background:
    radial-gradient(circle at 50% 28%, transparent 0%, rgba(0, 0, 0, 0.16) 58%, rgba(0, 0, 0, 0.46) 100%) !important;

  pointer-events: none !important;
}

.phx-board-card:hover,
.elementor-element.phx-board-card:hover {
  transform: translateY(-6px) !important;

  border-color: #ffcc33 !important;

  box-shadow:
    inset 0 0 0 1px rgba(255, 204, 51, 0.16),
    0 0 24px rgba(255, 153, 51, 0.24),
    0 20px 42px rgba(0, 0, 0, 0.72) !important;
}


/* =========================
   CARD CONTENT
========================= */

.phx-board-card-content,
.elementor-element.phx-board-card-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 5 !important;

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

  min-height: 178px !important;

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

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

  text-align: center !important;

  background: transparent !important;
  box-sizing: border-box !important;
}

/* Elementor-Wrapper innerhalb Content neutralisieren */
.phx-board-card-content > .elementor-element,
.phx-board-card-content .elementor-widget,
.phx-board-card-content .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;

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

  text-align: center !important;
  background: transparent !important;
}


/* =========================
   NAME
========================= */

.phx-board-name .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(18px, 1vw, 25px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;

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

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.96),
    0 0 8px rgba(255, 255, 255, 0.18) !important;
}

.phx-board-role,
.elementor-element.phx-board-role {
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.phx-board-role .elementor-widget-container,
.phx-board-role p {
  margin: 0 !important;
  padding: 0 !important;

  color: #ff9933 !important;

  font-family: "Barlow", Arial, sans-serif !important;
  font-size: clamp(15px, 0.9vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;

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

  text-shadow:
    0 0 8px rgba(255, 153, 51, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.9) !important;
}


/* =========================
   ROLLE
========================= */

.phx-board-role,
.elementor-element.phx-board-role {
  margin: 0 0 28px !important;
  padding: 0 !important;
}

.phx-board-role .elementor-widget-container,
.phx-board-role p {
  margin: 0 !important;
  padding: 0 !important;

  color: #ff9933 !important;

  font-family: "Barlow", Arial, sans-serif !important;
  font-size: clamp(18px, 1.1vw, 27px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;

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

  text-shadow:
    0 0 8px rgba(255, 153, 51, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.9) !important;
}


/* =========================
   PFEIL
========================= */

.phx-board-card-content .elementor-widget-html {
  line-height: 0 !important;
}

/* =========================
   PFEIL – sauberer Chevron
========================= */

.phx-board-card-content .elementor-widget-html {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
}

.phx-board-arrow {
  display: inline-block !important;
  position: relative !important;

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

  margin: 4px auto 0 !important;
}

.phx-board-arrow::before,
.phx-board-arrow::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;

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

  background: #ff9933 !important;
  border-radius: 999px !important;

  box-shadow:
    0 0 6px rgba(255, 153, 51, 0.75),
    0 0 12px rgba(255, 153, 51, 0.28) !important;
}

.phx-board-arrow::before {
  left: 0 !important;
  transform: rotate(38deg) !important;
  transform-origin: right center !important;
}

.phx-board-arrow::after {
  right: 0 !important;
  transform: rotate(-38deg) !important;
  transform-origin: left center !important;
}

@media (max-width: 1700px) {
  .phx-board-grid,
  .elementor-element.phx-board-grid {
    width: min(1560px, calc(100% - 40px)) !important;
  }

  .phx-board-grid > .e-con-inner {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .phx-board-card,
  .elementor-element.phx-board-card {
    min-height: 390px !important;
  }

  .phx-board-name .elementor-heading-title {
    font-size: 20px !important;
  }

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

@media (max-width: 1400px) {
  .phx-board-grid,
  .elementor-element.phx-board-grid {
    width: min(1120px, calc(100% - 40px)) !important;
  }

  .phx-board-grid > .e-con-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .phx-board-card,
  .elementor-element.phx-board-card {
    min-height: 460px !important;
  }

  .phx-board-name .elementor-heading-title {
    font-size: 24px !important;
  }

  .phx-board-role .elementor-widget-container,
  .phx-board-role p {
    font-size: 19px !important;
  }
}

@media (max-width: 1100px) {
  .phx-board-grid,
  .elementor-element.phx-board-grid {
    width: min(860px, calc(100% - 40px)) !important;
  }

  .phx-board-grid > .e-con-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .phx-board-card,
  .elementor-element.phx-board-card {
    min-height: 470px !important;
  }
}

@media (max-width: 850px) {
  .phx-board-grid,
  .elementor-element.phx-board-grid {
    width: min(620px, calc(100% - 36px)) !important;
  }

  .phx-board-grid > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .phx-board-card,
  .elementor-element.phx-board-card {
    min-height: 460px !important;
  }
}

@media (max-width: 560px) {
  .phx-board-grid,
  .elementor-element.phx-board-grid {
    width: min(420px, 100%) !important;
  }

  .phx-board-grid > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .phx-board-card,
  .elementor-element.phx-board-card {
    min-height: 540px !important;
  }

  .phx-board-name .elementor-heading-title {
    font-size: 28px !important;
  }

  .phx-board-role .elementor-widget-container,
  .phx-board-role p {
    font-size: 21px !important;
  }
}