/* =============================================================================
   dna-cards — Grid aus Prinzip-/DNA-Karten
   =============================================================================
   Zeigt N gleichwertige Prinzip-Karten (Default 4, generisch beliebig viele):
   pro Karte ein optionaler Line-Icon-Slot, ein Titel (h3) und ein operatives
   Versprechen (1–2 Sätze). Reflowt mobile-first: 1 Spalte → 2 → 4.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --dna-* sind komponenten-lokale Layout-Konstanten (Icon-Größe, Strich-Stärke,
   Breakpoints) — an keine Marke gekettet, laut Regel erlaubt.

   Statisch: braucht KEIN eigenes JS. Mit [data-reveal] (motion/scroll-reveal)
   kompatibel, aber nicht Pflicht — ohne scroll-reveal sind die Karten sichtbar.

   Lade-Reihenfolge: _tokens/_base.css → <brand>.css → diese Datei.
   ============================================================================ */

.dna-cards {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --dna-icon-size:    24px;    /* Kantenlänge des Line-Icons */
  --dna-icon-stroke:  2px;     /* Strich-Stärke des Line-Icons */
  --dna-bp-2col:      720px;   /* ab hier 2 Spalten */
  --dna-bp-4col:      960px;   /* ab hier 4 Spalten */

  display: grid;
  grid-template-columns: 1fr;        /* mobile-first: 1 Spalte */
  gap: var(--space-m);
  margin-top: var(--space-l);
}

/* 2 Spalten ab --dna-bp-2col */
@media (min-width: 720px) {
  .dna-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 4 Spalten ab --dna-bp-4col */
@media (min-width: 960px) {
  .dna-cards { grid-template-columns: repeat(4, 1fr); }
}

.dna-cards__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: 100%;                      /* gleiche Höhe innerhalb der Grid-Zeile */
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-l) var(--space-m);
}

/* Icon-Slot: inline-SVG erbt die Primary-Farbe über currentColor */
.dna-cards__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dna-icon-size);
  height: var(--dna-icon-size);
  color: var(--color-primary);
}
.dna-cards__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;              /* = var(--color-primary) über die .dna-cards__icon-Farbe */
  stroke-width: var(--dna-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dna-cards__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--font-scale-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

.dna-cards__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* Touch-Target-Hygiene: optionaler Link in der Karte bleibt komfortabel klickbar */
.dna-cards__link {
  margin-top: auto;                  /* schiebt den Link an den Karten-Fuß, Höhe bleibt gleich */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--font-scale-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
}
.dna-cards__link:hover,
.dna-cards__link:focus-visible {
  color: var(--color-primary-strong);
}

@media (max-width: 600px) {
  .dna-cards__card { padding: var(--space-m); }
}