/* ==========================================================================
   Cards (Services, generisch) – robust mit Fallbacks
   ========================================================================== */

.cards-grid{
  display:grid;
  gap: 1.25rem; /* Fallback */
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
}
@media (min-width:700px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
.cards-grid--2x2{}

/* Card */
.card{
  background:#fff;
  color: var(--ci-dark, #333);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.08));
  padding: 1.25rem; /* Fallback */
  padding: clamp(1rem, 2.8vw, 1.25rem);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

/* Icon, Titel, Text */
.card__icon{
  color: var(--ci-primary, #169338);
  font-size: 1.5rem;
  line-height:0;
  margin-bottom: .5rem;
}
.card__title{
  font-family: var(--font-accent, inherit);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 800;
  margin: 0 0 .4rem;
}
.card__text{
  margin: 0; /* kein zusätzlicher Absatz-Rand */
  /* Fallback ohne color-mix() */
  color: rgba(51,51,51,.85);
  /* Progressive Enhancement (ok, wenn Minifier es kann) */
  color: color-mix(in srgb, var(--ci-dark, #333) 85%, transparent);
}

/* Footer + Button – konsistenter Abstand + CI-Farbe */
.card__footer{
  margin-top: auto; /* Footer immer nach unten drücken */
  padding-top: 1rem; /* Fallback */
  padding-top: clamp(.75rem, 2.2vw, 1rem);
}

/* Nur Ausrichtung und Breite – KEIN Hintergrund hier,
   damit .btn--primary global gewinnt */
.card .btn{
  display:inline-flex;
  width:auto;
  align-self:flex-start;
}