/* =============================================================================
   marker-cards — Karten-Grid mit Marker-Slot: Nummernkreis, Punkt oder Icon-Chip
   =============================================================================
   Geerntet aus den Realbauten (Sektions-Ernte 2026-09-01, recfX55otwCPVGo4Z).
   Drei belegte Marker-Formen, ein Grid:
     - Nummernkreis: Kunden-Präzedenz .steps-light (Kreis mit Zahl, Schritt-Listen).
       Deckt zugleich den Referenz-Kandidaten teaching-cards ab (1-2-3-Karten).
     - Punkt-Marker: Engpass .faq .q::before (kleiner Primary-Punkt mit Glow).
     - Icon-Chip: Engpass .card__icon (Primary-Scheibe mit Line-Icon), die
       Form des Problem-Spiegels.
   Dazu die Flächen-Variante --deep (dunkle Karte, das Problem-Spiegel-Muster:
   Engpass .cards .card, dunkler Verlauf mit Primary-Schimmer oben rechts).

   Die Nummern kommen aus einem CSS-Counter, nicht aus dem Markup: die Liste
   bleibt umsortierbar, ohne Zahlen nachzupflegen.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus. --deep malt mit --color-ink als dunklem Grund und --color-bg als
   Schrift (marken-ehrlich invertiert, keine neue Token-Rolle nötig).
   Die --mc-* sind komponenten-lokale Konstanten
   (rules/lp-components-token-disziplin.md).

   Statisch: braucht KEIN eigenes JS. Mit [data-reveal] kompatibel.

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

.marker-cards {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --mc-bp-2col:     700px;   /* ab hier 2 Spalten */
  --mc-num-size:    34px;    /* Durchmesser des Nummernkreises */
  --mc-dot-size:    8px;     /* Durchmesser des Punkt-Markers */
  --mc-chip-size:   52px;    /* Kantenlänge des Icon-Chips */
  --mc-icon-size:   24px;    /* Kantenlänge des Line-Icons im Chip */
  --mc-icon-stroke: 2px;     /* Strich-Stärke des Line-Icons */

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: var(--space-l);
  counter-reset: marker-cards;
  list-style: none;
  padding: 0;
}

@media (min-width: 700px) {
  .marker-cards { grid-template-columns: repeat(2, 1fr); }
}

.marker-cards__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  height: 100%;
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  counter-increment: marker-cards;
}

.marker-cards__body { flex: 1; }

.marker-cards__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--font-scale-h3);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.marker-cards__text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--font-scale-body);
  line-height: 1.6;
}

/* --- Marker-Formen ------------------------------------------------------- */

/* Nummernkreis: Zahl aus dem CSS-Counter (.steps-light-Muster). */
.marker-cards--num .marker-cards__marker {
  flex: 0 0 auto;
  width: var(--mc-num-size);
  height: var(--mc-num-size);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: var(--font-scale-small);
  display: flex;
  align-items: center;
  justify-content: center;
}
.marker-cards--num .marker-cards__marker::before {
  content: counter(marker-cards);
}

/* Punkt-Marker: kleiner Primary-Punkt mit Glow (.faq .q::before-Muster). */
.marker-cards--dot .marker-cards__marker {
  flex: 0 0 auto;
  width: var(--mc-dot-size);
  height: var(--mc-dot-size);
  margin-top: 0.48em;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* Icon-Chip: Primary-Scheibe mit Line-Icon (.card__icon-Muster).
   Icon-Konvention wie dna-cards: inline-SVG, viewBox 0 0 24 24, stroke erbt. */
.marker-cards--icon .marker-cards__marker {
  flex: 0 0 auto;
  width: var(--mc-chip-size);
  height: var(--mc-chip-size);
  border-radius: var(--radius-card);
  display: grid;
  place-items: center;
  background: var(--color-primary);
  box-shadow: 0 0 30px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.marker-cards--icon .marker-cards__marker svg {
  width: var(--mc-icon-size);
  height: var(--mc-icon-size);
  fill: none;
  stroke: var(--color-on-primary);
  stroke-width: var(--mc-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon-Variante stapelt vertikal (Chip über Titel, das Engpass-Karten-Layout). */
.marker-cards--icon .marker-cards__card {
  flex-direction: column;
  gap: var(--space-s);
}

/* --- Flächen-Variante: Problem-Spiegel (dunkle Karte) --------------------- */

.marker-cards--deep .marker-cards__card {
  position: relative;
  overflow: hidden;
  border: 0;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--color-ink) 88%, var(--color-primary)),
    var(--color-ink) 62%
  );
  box-shadow: var(--shadow-soft);
}
/* Primary-Schimmer oben rechts (radialer Hauch, das Realbau-Detail). */
.marker-cards--deep .marker-cards__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 80% at 100% 0%,
    color-mix(in srgb, var(--color-primary) 18%, transparent),
    transparent 55%
  );
}
.marker-cards--deep .marker-cards__title { position: relative; color: var(--color-bg); }
.marker-cards--deep .marker-cards__text {
  position: relative;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
}
.marker-cards--deep .marker-cards__marker { position: relative; }