/* Campus Company – Vier Säulen
   Alle Regeln sind unter .cc-saeulen gescopt, damit sie das umgebende
   Theme nicht beeinflussen. Farben & Maße aus der onepager-Vorlage. */

.cc-saeulen{
  --cc-blue:#0095be;
  --cc-blue-700:#00718f;
  --cc-ink:#16282f;
  --cc-body:#46555d;
  --cc-tint:#e9f6fb;
  --cc-line:#e3edf1;
  --cc-white:#ffffff;
  --cc-radius:18px;
  --cc-shadow:0 10px 40px rgba(6,59,77,.09);
  --cc-shadow-sm:0 4px 16px rgba(6,59,77,.07);
}
.cc-saeulen,
.cc-saeulen *{box-sizing:border-box}

/* Karten-Grid */
.cc-saeulen .cc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.cc-saeulen .cc-card{background:var(--cc-white);border:1px solid var(--cc-line);border-radius:var(--cc-radius);
  padding:32px 28px;box-shadow:var(--cc-shadow-sm);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  display:flex;flex-direction:column}
.cc-saeulen .cc-card:hover{transform:translateY(-5px);box-shadow:var(--cc-shadow);border-color:#bfe3ef}

/* Icon-Kachel */
.cc-saeulen .cc-ic{width:84px;height:84px;border-radius:20px;background:var(--cc-tint);
  color:var(--cc-blue-700);display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;transition:transform .35s ease,background .35s ease}
.cc-saeulen .cc-ic svg{width:52px;height:52px;animation:ccIcoFloat 5s ease-in-out infinite}
.cc-saeulen .cc-card:nth-child(2) .cc-ic svg{animation-delay:.8s}
.cc-saeulen .cc-card:nth-child(3) .cc-ic svg{animation-delay:1.6s}
.cc-saeulen .cc-card:nth-child(4) .cc-ic svg{animation-delay:2.4s}
.cc-saeulen .cc-card:hover .cc-ic{transform:scale(1.05) rotate(-2deg);background:#d6edf6}

/* Texte */
.cc-saeulen .cc-card h3{color:var(--cc-ink);font-size:1.22rem;font-weight:600;line-height:1.12;margin:0 0 10px}
.cc-saeulen .cc-card p{color:var(--cc-body);font-size:.96rem;line-height:1.62;flex:1;margin:0}

/* "Mehr erfahren"-Link */
.cc-saeulen .cc-more{margin-top:18px;font-weight:600;font-size:.9rem;color:var(--cc-blue-700);
  display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.cc-saeulen .cc-more:hover{color:var(--cc-blue)}
.cc-saeulen .cc-more svg{width:15px;height:15px;flex:none;transition:transform .2s ease}
.cc-saeulen .cc-more:hover svg,
.cc-saeulen .cc-card:hover .cc-more svg{transform:translateX(4px)}

@keyframes ccIcoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media (prefers-reduced-motion: reduce){
  .cc-saeulen .cc-card:hover{transform:none}
  .cc-saeulen .cc-ic svg{animation:none}
  .cc-saeulen .cc-card:hover .cc-ic{transform:none}
}