/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2026 | 19:12:17 */
/* =========================================================
   PHOENIX GESCHICHTE – HERO + TIMELINE
   Datei/Snippet: 11-page-history.css
   ========================================================= */


/* =========================================================
   1. HERO
   Klassen:
   phx-history-hero
   phx-history-hero__inner
   phx-history-hero__kicker
   phx-history-hero__title
   phx-history-hero__text
   phx-history-hero__marker
   ========================================================= */

.phx-history-hero,
.elementor-element.phx-history-hero {
  position: relative !important;
  overflow: hidden !important;

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

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

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

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

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

.phx-history-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, 0.88) 0%,
      rgba(0, 0, 0, 0.58) 32%,
      rgba(0, 0, 0, 0.48) 68%,
      rgba(0, 0, 0, 0.88) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.30) 46%,
      rgba(0, 0, 0, 0.90) 100%
    ),
    radial-gradient(
      circle at 50% 58%,
      rgba(255, 153, 51, 0.18) 0%,
      rgba(255, 153, 51, 0.06) 24%,
      transparent 60%
    ) !important;
}

.phx-history-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background:
    linear-gradient(90deg, rgba(255, 153, 51, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 153, 51, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.38) 74%) !important;

  background-size: 120px 120px, 120px 120px, auto !important;
  opacity: 0.42 !important;
}

.phx-history-hero__inner,
.elementor-element.phx-history-hero__inner {
  position: relative !important;
  z-index: 5 !important;

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

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

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

  text-align: center !important;
}

.phx-history-hero__kicker,
.phx-history-hero__kicker .elementor-heading-title {
  margin: 0 0 20px !important;
  padding: 0 !important;

  color: #ff9933 !important;

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

  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;

  text-shadow: 0 0 14px rgba(255, 153, 51, 0.28) !important;
}

.phx-history-hero__title,
.phx-history-hero__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(58px, 6.2vw, 112px) !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 24px rgba(255, 153, 51, 0.26),
    0 6px 18px rgba(0, 0, 0, 0.92) !important;
}

.phx-history-hero__text,
.phx-history-hero__text .elementor-widget-container,
.phx-history-hero__text p {
  margin: 28px 0 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.92) !important;

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

  text-align: center !important;
}

.phx-history-hero__text {
  max-width: 780px !important;
}

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

.phx-history-hero__marker,
.elementor-element.phx-history-hero__marker {
  position: relative !important;

  width: 32px !important;
  height: 32px !important;

  margin-top: 38px !important;

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

.phx-history-hero__marker .elementor-widget-container {
  width: 32px !important;
  height: 32px !important;

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

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

.phx-history-hero__marker span {
  display: block !important;

  width: 18px !important;
  height: 18px !important;

  border-right: 3px solid #ff9933 !important;
  border-bottom: 3px solid #ff9933 !important;

  transform: rotate(45deg) !important;

  filter: drop-shadow(0 0 12px rgba(255, 153, 51, 0.55)) !important;
}


/* =========================================================
   2. TIMELINE GRUNDSECTION
   Klassen:
   phx-history-timeline
   phx-history-timeline__inner
   ========================================================= */

.phx-history-timeline,
.elementor-element.phx-history-timeline {
  position: relative !important;
  overflow: hidden !important;

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

  background:
    radial-gradient(circle at 50% 18%, rgba(255, 153, 51, 0.10) 0%, rgba(255, 153, 51, 0.025) 32%, transparent 62%),
    linear-gradient(180deg, #030303 0%, #070707 52%, #030303 100%) !important;
  
border-top: 1px solid rgba(255, 153, 51, 0.85) !important;
  border-bottom: 1px solid rgba(255, 153, 51, 0.32) !important;
}

.phx-history-timeline::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, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 153, 51, 0.025) 1px, transparent 1px) !important;

  background-size: 112px 112px !important;
  opacity: 0.16 !important;
}

.phx-history-timeline::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  z-index: 1 !important;

  width: 1px !important;
  transform: translateX(-50%) !important;

  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 153, 51, 0.48) 6%,
    rgba(255, 153, 51, 0.86) 50%,
    rgba(255, 153, 51, 0.48) 94%,
    transparent 100%
  ) !important;

  box-shadow:
    0 0 16px rgba(255, 153, 51, 0.42),
    0 0 36px rgba(255, 153, 51, 0.18) !important;

  pointer-events: none !important;
}

.phx-history-timeline__inner,
.elementor-element.phx-history-timeline__inner {
  position: relative !important;
  z-index: 3 !important;

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

  margin: 0 auto !important;
  padding: 72px 0 84px !important;

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


/* =========================================================
   3. TIMELINE ITEM
   Klassen:
   phx-history-item
   phx-history-item--left
   phx-history-item--right
   ========================================================= */

.phx-history-item,
.elementor-element.phx-history-item {
  position: relative !important;

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

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

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

.phx-history-item > .e-con-inner {
  display: contents !important;
}

.phx-history-item::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 5 !important;

  width: 24px !important;
  height: 24px !important;

  transform: translate(-50%, -50%) !important;

  border-radius: 50% !important;
  background: #0b0b0b !important;
  border: 2px solid #ff9933 !important;

  box-shadow:
    0 0 0 5px rgba(255, 153, 51, 0.10),
    0 0 22px rgba(255, 153, 51, 0.62),
    inset 0 0 10px rgba(255, 153, 51, 0.30) !important;
}

.phx-history-item::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 6 !important;

  width: 8px !important;
  height: 8px !important;

  transform: translate(-50%, -50%) !important;

  border-radius: 50% !important;
  background: #ff9933 !important;

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


/* =========================================================
   4. TIMELINE CARD
   Aktuelle Elementor-Struktur:
   phx-history-card
   └── phx-history-card__content
       ├── phx-history-card__date
       ├── phx-history-card__title
       ├── phx-history-card__image
       ├── phx-history-card__text
       └── phx-history-card__tag
   ========================================================= */

.phx-history-card,
.elementor-element.phx-history-card {
  position: relative !important;

  width: 100% !important;
  max-width: 620px !important;
  min-height: 220px !important;

  display: block !important;

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

  background:
    radial-gradient(circle at 0% 0%, rgba(255, 153, 51, 0.10) 0%, transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important;

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

  box-shadow:
    inset 0 0 30px rgba(255, 153, 51, 0.035),
    0 16px 34px rgba(0, 0, 0, 0.58) !important;

  overflow: visible !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

.phx-history-item--left .phx-history-card,
.elementor-element.phx-history-item--left .phx-history-card {
  grid-column: 1 !important;
  justify-self: end !important;
}

.phx-history-item--right .phx-history-card,
.elementor-element.phx-history-item--right .phx-history-card {
  grid-column: 3 !important;
  justify-self: start !important;
}

/* Connector-Linie */
.phx-history-card::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  z-index: 2 !important;

  width: 78px !important;
  height: 1px !important;

  background: linear-gradient(
    90deg,
    rgba(255, 153, 51, 0.90),
    transparent
  ) !important;

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

/* kleiner Winkel / Pfeil */
.phx-history-card::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  z-index: 3 !important;

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

  border-top: 1px solid rgba(255, 153, 51, 0.85) !important;
  border-right: 1px solid rgba(255, 153, 51, 0.85) !important;

  background: rgba(0, 0, 0, 0.20) !important;
}

/* Linke Karte: Connector rechts raus */
.phx-history-item--left .phx-history-card::after,
.elementor-element.phx-history-item--left .phx-history-card::after {
  left: auto !important;
  right: -78px !important;
  transform: translateY(-50%) !important;
}

.phx-history-item--left .phx-history-card::before,
.elementor-element.phx-history-item--left .phx-history-card::before {
  left: auto !important;
  right: -8px !important;
  transform: translateY(-50%) rotate(45deg) !important;
}

/* Rechte Karte: Connector links raus */
.phx-history-item--right .phx-history-card::after,
.elementor-element.phx-history-item--right .phx-history-card::after {
  right: auto !important;
  left: -78px !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

.phx-history-item--right .phx-history-card::before,
.elementor-element.phx-history-item--right .phx-history-card::before {
  right: auto !important;
  left: -8px !important;
  transform: translateY(-50%) rotate(225deg) !important;
}

.phx-history-card:hover {
  transform: translateY(-4px) !important;
  border-color: #ff9933 !important;

  box-shadow:
    inset 0 0 34px rgba(255, 153, 51, 0.052),
    0 20px 42px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(255, 153, 51, 0.18) !important;
}


/* =========================================================
   5. CARD CONTENT GRID
   ========================================================= */

.phx-history-card__content,
.elementor-element.phx-history-card__content {
  width: 100% !important;
  height: 100% !important;

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

  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  grid-template-areas:
    "image date"
    "image title"
    "image text"
    "image tag" !important;

  column-gap: 22px !important;
  row-gap: 0 !important;

  align-items: start !important;
  align-content: center !important;
}

.phx-history-card__content > .e-con-inner {
  display: contents !important;
}

/* Rechte Karten: Bild rechts */
.phx-history-item--right .phx-history-card__content,
.elementor-element.phx-history-item--right .phx-history-card__content {
  grid-template-columns: minmax(0, 1fr) 190px !important;
  grid-template-areas:
    "date image"
    "title image"
    "text image"
    "tag image" !important;
}


/* =========================================================
   6. CARD ELEMENTE
   ========================================================= */

.phx-history-card__date,
.elementor-element.phx-history-card__date {
  grid-area: date !important;
  width: 100% !important;

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

.phx-history-card__date .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #ff9933 !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: 0.09em !important;
}

.phx-history-card__title,
.elementor-element.phx-history-card__title {
  grid-area: title !important;
  width: 100% !important;

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

.phx-history-card__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(24px, 1.55vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;

  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;

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

.phx-history-card__image,
.elementor-element.phx-history-card__image {
  grid-area: image !important;

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

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

  overflow: hidden !important;

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

  background: #080808 !important;
}

.phx-history-card__image .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;

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

.phx-history-card__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(0.78)
    contrast(1.08)
    saturate(0.96) !important;

  transition:
    transform 0.32s ease,
    filter 0.32s ease !important;
}

.phx-history-card:hover .phx-history-card__image img {
  transform: scale(1.035) !important;

  filter:
    brightness(0.88)
    contrast(1.10)
    saturate(1.04) !important;
}

.phx-history-card__text,
.elementor-element.phx-history-card__text {
  grid-area: text !important;
  width: 100% !important;

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

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

  color: rgba(255, 255, 255, 0.82) !important;

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

.phx-history-card__text p {
  margin: 0 !important;
}

.phx-history-card__tag,
.elementor-element.phx-history-card__tag {
  grid-area: tag !important;
  width: auto !important;

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

  justify-self: start !important;
}

.phx-history-card__tag .elementor-widget-container,
.phx-history-card__tag span,
.phx-history-card__tag p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 7px 11px !important;

  color: #ffffff !important;

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

  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;

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

  background: rgba(255, 153, 51, 0.08) !important;

  box-shadow:
    inset 0 0 12px rgba(255, 153, 51, 0.05),
    0 0 12px rgba(255, 153, 51, 0.10) !important;
}


/* =========================================================
   7. RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
  .phx-history-timeline__inner,
  .elementor-element.phx-history-timeline__inner {
    width: min(100% - 64px, 1100px) !important;
  }

  .phx-history-card,
  .elementor-element.phx-history-card {
    max-width: 520px !important;
  }

  .phx-history-card__content,
  .phx-history-item--right .phx-history-card__content {
    grid-template-columns: 160px minmax(0, 1fr) !important;
    grid-template-areas:
      "image date"
      "image title"
      "image text"
      "image tag" !important;
  }
}

@media (max-width: 1024px) {
  .phx-history-hero,
  .elementor-element.phx-history-hero {
    min-height: 460px !important;
  }

  .phx-history-hero__inner,
  .elementor-element.phx-history-hero__inner {
    padding: 82px 0 78px !important;
  }
}

/* Tablet schmal: Timeline links, Karten rechts */
@media (max-width: 900px) {
  .phx-history-timeline::after {
    left: 34px !important;
  }

  .phx-history-timeline__inner,
  .elementor-element.phx-history-timeline__inner {
    width: calc(100% - 36px) !important;
    padding: 64px 0 74px !important;
    gap: 34px !important;
  }

  .phx-history-item,
  .elementor-element.phx-history-item {
    min-height: auto !important;

    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .phx-history-item::before,
  .phx-history-item::after {
    left: 34px !important;
    top: 42px !important;
  }

  .phx-history-card,
  .phx-history-item--left .phx-history-card,
  .phx-history-item--right .phx-history-card {
    grid-column: 2 !important;
    justify-self: stretch !important;

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

  .phx-history-card::after {
    left: -34px !important;
    right: auto !important;
    width: 34px !important;
    transform: translateY(-50%) !important;
  }

  .phx-history-card::before {
    display: none !important;
  }

  .phx-history-card__content,
  .phx-history-item--right .phx-history-card__content {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    grid-template-areas:
      "image date"
      "image title"
      "image text"
      "image tag" !important;
  }
}

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

  .phx-history-hero__inner,
  .elementor-element.phx-history-hero__inner {
    width: calc(100% - 36px) !important;
    padding: 72px 0 70px !important;
  }

  .phx-history-hero__kicker,
  .phx-history-hero__kicker .elementor-heading-title {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 16px !important;
  }

  .phx-history-hero__title,
  .phx-history-hero__title .elementor-heading-title {
    font-size: clamp(40px, 12vw, 58px) !important;
    line-height: 0.96 !important;
  }

  .phx-history-hero__text,
  .phx-history-hero__text .elementor-widget-container,
  .phx-history-hero__text p {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .phx-history-hero__marker {
    margin-top: 28px !important;
  }
}

@media (max-width: 620px) {
  .phx-history-card,
  .phx-history-item--left .phx-history-card,
  .phx-history-item--right .phx-history-card {
    padding: 16px !important;
  }

  .phx-history-card__content,
  .phx-history-item--right .phx-history-card__content {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "date"
      "title"
      "image"
      "text"
      "tag" !important;

    gap: 14px !important;
  }

  .phx-history-card__image {
    min-height: 190px !important;
  }

  .phx-history-card__title .elementor-heading-title {
    font-size: clamp(24px, 8vw, 32px) !important;
  }
}

/* =========================================================
   PHOENIX GESCHICHTE – SCROLL REVEAL
   Karten erscheinen nach und nach beim Scrollen
   ========================================================= */

/* Grundzustand: noch nicht sichtbar */
.phx-history-item {
  opacity: 0 !important;
  transform: translateY(34px) !important;

  transition:
    opacity 620ms ease,
    transform 620ms ease !important;

  will-change: opacity, transform !important;
}

/* Sichtbar */
.phx-history-item.phx-is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* leichte Verzögerung pro Seite, falls mehrere gleichzeitig sichtbar werden */
.phx-history-item:nth-child(2n) {
  transition-delay: 80ms !important;
}

.phx-history-item:nth-child(3n) {
  transition-delay: 140ms !important;
}

/* Karten selbst dürfen weiterhin ihren Hover haben */
.phx-history-item.phx-is-visible .phx-history-card:hover {
  transform: translateY(-4px) !important;
}

/* Barrierefreiheit: Wenn Nutzer Animationen reduziert haben */
@media (prefers-reduced-motion: reduce) {
  .phx-history-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   PHOENIX GESCHICHTE – LOAD MORE
   ========================================================= */

/* Versteckte Meilensteine */
.phx-history-item.phx-history-hidden {
  display: none !important;
}

/* Load-more Bereich */
.phx-history-loadmore,
.elementor-element.phx-history-loadmore {
  position: relative !important;
  z-index: 4 !important;

  width: 100% !important;

  margin: -20px auto 0 !important;
  padding: 0 0 84px !important;

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

  background:
    linear-gradient(180deg, #030303 0%, #050505 100%) !important;
}

/* Elementor-Wrapper neutralisieren */
.phx-history-loadmore > .e-con-inner {
  width: 100% !important;
  max-width: none !important;

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

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

/* Button-Widget */
.phx-history-loadmore__button,
.elementor-element.phx-history-loadmore__button {
  margin: 0 !important;
  padding: 0 !important;
}

/* echter Elementor Button */
.phx-history-loadmore__button .elementor-button,
.phx-history-loadmore__button a.elementor-button,
.phx-history-loadmore__button button,
button.phx-history-loadmore__button {
  appearance: none !important;
  -webkit-appearance: none !important;

  min-width: 280px !important;
  min-height: 58px !important;

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

  padding: 16px 34px !important;

  color: #ff9933 !important;
  background: rgba(0, 0, 0, 0.34) !important;

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

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

  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 0 18px rgba(255, 153, 51, 0.08),
    0 0 22px rgba(255, 153, 51, 0.15) !important;

  cursor: pointer !important;

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

.phx-history-loadmore__button .elementor-button:hover,
.phx-history-loadmore__button a.elementor-button:hover,
.phx-history-loadmore__button button:hover,
button.phx-history-loadmore__button:hover {
  color: #000000 !important;
  background: #ff9933 !important;
  border-color: #ffcc33 !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 0 30px rgba(255, 153, 51, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

/* Wenn alles geladen ist */
.phx-history-loadmore.phx-history-loadmore--done {
  display: none !important;
}

/* Mobile */
@media (max-width: 767px) {
  .phx-history-loadmore,
  .elementor-element.phx-history-loadmore {
    padding: 0 18px 64px !important;
  }

  .phx-history-loadmore__button,
  .phx-history-loadmore__button .elementor-button,
  .phx-history-loadmore__button a.elementor-button {
    width: 100% !important;
    max-width: 360px !important;
  }
}

/* =========================================================
   PHOENIX GESCHICHTE – TIMELINE KOMPAKTER
   ========================================================= */

/* Timeline-Abschnitt insgesamt dichter */
.phx-history-timeline__inner,
.elementor-element.phx-history-timeline__inner {
  padding: 56px 0 64px !important;
  gap: 28px !important;
}

/* Einzelne Meilensteine weniger hoch */
.phx-history-item,
.elementor-element.phx-history-item {
  min-height: 190px !important;
}

/* Node bleibt mittig */
.phx-history-item::before,
.phx-history-item::after {
  top: 50% !important;
}

/* Karte kompakter */
.phx-history-card,
.elementor-element.phx-history-card {
  max-width: 640px !important;
  min-height: 185px !important;
  padding: 14px !important;
}

/* Content-Grid enger */
.phx-history-card__content,
.elementor-element.phx-history-card__content {
  grid-template-columns: 165px minmax(0, 1fr) !important;
  column-gap: 18px !important;
}

/* Rechte Karten: Bild rechts, ebenfalls enger */
.phx-history-item--right .phx-history-card__content,
.elementor-element.phx-history-item--right .phx-history-card__content {
  grid-template-columns: minmax(0, 1fr) 165px !important;
}

/* Bild niedriger */
.phx-history-card__image,
.elementor-element.phx-history-card__image {
  min-height: 150px !important;
}

/* Datum enger */
.phx-history-card__date,
.elementor-element.phx-history-card__date {
  margin-bottom: 6px !important;
}

.phx-history-card__date .elementor-heading-title {
  font-size: 12px !important;
}

/* Titel kompakter */
.phx-history-card__title,
.elementor-element.phx-history-card__title {
  margin-bottom: 8px !important;
}

.phx-history-card__title .elementor-heading-title {
  font-size: clamp(22px, 1.35vw, 28px) !important;
  line-height: 1.02 !important;
}

/* Text kompakter */
.phx-history-card__text .elementor-widget-container,
.phx-history-card__text p {
  font-size: 14px !important;
  line-height: 1.38 !important;
}

/* Tag etwas näher ran */
.phx-history-card__tag,
.elementor-element.phx-history-card__tag {
  margin-top: 12px !important;
}

/* Connector an neue Kompaktheit angepasst */
.phx-history-card::after {
  width: 58px !important;
}

.phx-history-item--left .phx-history-card::after,
.elementor-element.phx-history-item--left .phx-history-card::after {
  right: -58px !important;
}

.phx-history-item--right .phx-history-card::after,
.elementor-element.phx-history-item--right .phx-history-card::after {
  left: -58px !important;
}

/* Pfeil etwas näher an die Box */
.phx-history-item--left .phx-history-card::before,
.elementor-element.phx-history-item--left .phx-history-card::before {
  right: -10px !important;
}

.phx-history-item--right .phx-history-card::before,
.elementor-element.phx-history-item--right .phx-history-card::before {
  left: -10px !important;
}

/* Tablet */
@media (max-width: 1200px) {
  .phx-history-timeline__inner,
  .elementor-element.phx-history-timeline__inner {
    gap: 26px !important;
  }

  .phx-history-card,
  .elementor-element.phx-history-card {
    max-width: 520px !important;
  }

  .phx-history-card__content,
  .phx-history-item--right .phx-history-card__content {
    grid-template-columns: 145px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  .phx-history-card__image,
  .elementor-element.phx-history-card__image {
    min-height: 140px !important;
  }
}

/* Schmale Ansicht */
@media (max-width: 900px) {
  .phx-history-timeline__inner,
  .elementor-element.phx-history-timeline__inner {
    padding: 48px 0 58px !important;
    gap: 24px !important;
  }

  .phx-history-item,
  .elementor-element.phx-history-item {
    min-height: auto !important;
  }

  .phx-history-card::after {
    width: 34px !important;
  }

  .phx-history-card__content,
  .phx-history-item--right .phx-history-card__content {
    grid-template-columns: 135px minmax(0, 1fr) !important;
    column-gap: 15px !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  .phx-history-timeline__inner,
  .elementor-element.phx-history-timeline__inner {
    gap: 22px !important;
  }

  .phx-history-card,
  .elementor-element.phx-history-card {
    padding: 14px !important;
  }

  .phx-history-card__content,
  .phx-history-item--right .phx-history-card__content {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .phx-history-card__image,
  .elementor-element.phx-history-card__image {
    min-height: 165px !important;
  }

  .phx-history-card__tag,
  .elementor-element.phx-history-card__tag {
    margin-top: 8px !important;
  }
}