/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 08 2026 | 19:11:01 */
/* =========================================================
   PHOENIX FEATURE CARDS
   Bereich mit drei Info-Karten
   Klassen:
   - phx-feature-grid
   - phx-feature-card
   - phx-feature-icon
   - phx-feature-title
   - phx-feature-text
========================================================= */

.phx-feature-grid {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 40px 72px;
  box-sizing: border-box;
}

/* Einzelne Karte */
.phx-feature-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 34px;

  min-height: 280px;
  padding: 42px 48px;

  background:
    radial-gradient(circle at 20% 0%, rgba(255, 153, 51, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(18, 22, 24, 0.94), rgba(7, 8, 9, 0.96));

  border: 1px solid rgba(255, 153, 51, 0.9);
  border-radius: 10px;

  box-shadow:
    0 0 28px rgba(0, 0, 0, 0.9),
    inset 0 0 40px rgba(255, 153, 51, 0.035);

  overflow: hidden;
  box-sizing: border-box;
}

/* leichter dunkler Verlauf wie im Screenshot */
.phx-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.035), transparent 48%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025), transparent 45%, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

/* feiner Orange-Glow am Rand */
.phx-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 18px rgba(255, 153, 51, 0.13);
  pointer-events: none;
}

/* Icon */
.phx-feature-icon {
  position: relative;
  z-index: 1;

  font-size: 78px;
  line-height: 1;
  color: #ff9933;

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

  filter:
    drop-shadow(0 0 10px rgba(255, 153, 51, 0.35))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.7));
}

/* falls SVG-Icons genutzt werden */
.phx-feature-icon svg {
  width: 86px;
  height: 86px;
  stroke: currentColor;
  fill: currentColor;
}

/* Textbereich */
.phx-feature-content {
  position: relative;
  z-index: 1;
}

/* Überschrift */
.phx-feature-title {
  margin: 0 0 22px 0 !important;

  color: #ff9933 !important;
  font-family: "Franklin Gothic Heavy", "Franklin Gothic Demi", Impact, sans-serif !important;
  font-size: clamp(24px, 1.35vw, 32px);
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;

  text-shadow:
    0 0 12px rgba(255, 153, 51, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.75);
}

/* Fließtext */
.phx-feature-text {
  margin: 0 !important;

  color: #ffffff !important;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: clamp(17px, 0.95vw, 21px);
  line-height: 1.75;
  font-weight: 400;

  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.85);
}

/* Optional: Hover-Effekt */
.phx-feature-card:hover {
  transform: translateY(-3px);
  border-color: #ffcc33;
  box-shadow:
    0 0 34px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(255, 153, 51, 0.18),
    inset 0 0 44px rgba(255, 153, 51, 0.055);
  transition: 180ms ease;
}

.phx-feature-card {
  transition: 180ms ease;
}

/* Tablet */
@media (max-width: 1200px) {
  .phx-feature-grid {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  .phx-feature-card {
    min-height: 230px;
    grid-template-columns: 95px 1fr;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .phx-feature-grid {
    padding: 24px 16px;
    gap: 22px;
  }

  .phx-feature-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
    padding: 34px 24px;
    min-height: auto;
  }

  .phx-feature-icon {
    font-size: 64px;
  }

  .phx-feature-icon svg {
    width: 70px;
    height: 70px;
  }

  .phx-feature-title {
    margin-bottom: 16px !important;
  }

  .phx-feature-text {
    line-height: 1.6;
  }
}
/* CSS Code hier einfügen.

Zum Beispiel:
.example {
    color: red;
}

Um dein CSS-Wissen zu prüfen, teste es hier http://www.w3schools.com/css/css_syntax.asp

Kommentarende*/