/* Drei-Spalten-Block auf der Service-Hauptseite (creative-content-engine.html)
   -- scripts/service-page-rebuild.py. Ersetzt das frühere "Unsere Services"-
   Karten-Grid, das auf die inzwischen entfernten 8 Service-Unterseiten zeigte.
   Datei behält ihren Namen, weil sie sitewide bereits eingebunden ist. */
.sfx-pillars {
  background: #1F1F1F;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.4rem, 6vw, 6rem);
}
.sfx-pillars-inner { max-width: 78rem; margin: 0 auto; }
.sfx-pillars-kicker {
  margin: 0 0 .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #FF8585;
}
.sfx-pillars-inner h2 {
  margin: 0 0 1rem; color: #fff; font-weight: 300; letter-spacing: -.02em;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; max-width: 30ch;
}
.sfx-pillars-lead {
  margin: 0 0 3rem; max-width: 52rem; color: rgba(255,255,255,.72);
  font-size: 1.08rem; line-height: 1.7;
}

.sfx-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sfx-pillar {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 2rem 1.8rem 1.8rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: 1.1rem;
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  transition: border-color 250ms ease, transform 250ms cubic-bezier(.22,.68,.26,1);
}
.sfx-pillar:hover { border-color: rgba(255,133,133,.5); transform: translateY(-3px); }
.sfx-pillar-num {
  position: absolute; top: -1.1rem; right: .5rem; pointer-events: none;
  font-size: clamp(4.5rem, 6vw, 6rem); font-weight: 500; line-height: 1;
  letter-spacing: -.04em; color: rgba(255,255,255,.05);
  transition: color 300ms ease;
}
.sfx-pillar:hover .sfx-pillar-num { color: rgba(255,133,133,.16); }
.sfx-pillar h3 {
  margin: 0 0 .35rem; color: #fff; font-size: 1.45rem; font-weight: 500; letter-spacing: -.01em;
}
.sfx-pillar-claim {
  margin: 0 0 .9rem; color: #FF8585; font-size: .95rem; line-height: 1.45;
}
.sfx-pillar p { margin: 0; color: rgba(255,255,255,.72); font-size: .98rem; line-height: 1.65; }
.sfx-pillar-tags {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.sfx-pillar-tags li {
  padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.62); font-size: .8rem;
}
.sfx-pillars-cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.6rem;
  padding: .95rem 1.7rem; border-radius: 999px;
  background: #FF8585; color: #191b1f !important; font-weight: 500;
  text-decoration: none; transition: transform 200ms ease, background 200ms ease;
}
.sfx-pillars-cta:hover { transform: translateY(-2px); background: #ff9a9a; }
.sfx-pillars-cta span { transition: transform 200ms ease; }
.sfx-pillars-cta:hover span { transform: translateX(3px); }

@media (max-width: 900px) {
  .sfx-pillars-grid { grid-template-columns: 1fr; }
  .sfx-pillars { padding: 3rem 1.2rem; }
}