/* =============================================================================
   quote-cards — Zitat-/Stimmen-Karten: Grid UND Einzelbox mit Akzentkante
   =============================================================================
   Geerntet aus den Realbauten (Sektions-Ernte 2026-09-01, recfX55otwCPVGo4Z),
   14 Vorkommen über beide Projekte:
     - Grid-Karte mit Glyphe, Foto im Akzent-Ring, Name/Rolle:
       Engpass-Funnel .voices/.voice (engpass-cover-lp.html, S7), dort vom
       .tcard-Muster der Live-Homepage übernommen (Daniel 04.08.: die Fassung
       mit Fotos wirkt persönlicher).
     - Einzelbox mit Akzentkante links (3px Primary, asymmetrischer Radius):
       Kunden-Präzedenz .quote (praesenz-check-lp) und Engpass .note/.said.

   Name und Datenfeld sind entschieden (Daniel, 01.09.2026): quote-cards mit
   text:, wie das Marker-Template in wos-copywriting (SKILL.md) es seit jeher
   lehrt. Kein zweiter Weg testimonial-card.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus. Die --qc-* sind komponenten-lokale Layout-Konstanten (kein
   Marken-Bezug), laut rules/lp-components-token-disziplin.md erlaubt.

   Statisch: braucht KEIN eigenes JS. Mit [data-reveal] (motion/scroll-reveal)
   kompatibel, aber nicht Pflicht.

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

.quote-cards {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --qc-bp-2col:     720px;   /* ab hier 2 Spalten */
  --qc-bp-3col:     1000px;  /* ab hier 3 Spalten */
  --qc-photo-size:  52px;    /* Durchmesser des runden Fotos */
  --qc-edge-width:  3px;     /* Stärke der Akzentkante (Einzelbox-Variante) */

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
  margin-top: var(--space-l);
  /* Listen-Reset: die Grid-Form ist ein ul-Element. Ohne ihn gilt in Hosts ohne
     eigenen Listen-Reset (etwa die Vorschau) der Browser-Standard
     padding-inline-start 40px, die Karten sitzen 40 px eingerückt (28.09.2026). */
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .quote-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .quote-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Einzelbox-Modus: eine Karte, volle Breite, begrenzt auf Lesemaß.
   Für den einzelnen O-Ton im Fließtext (das .said-/.note-Muster der Realbauten). */
.quote-cards--single {
  grid-template-columns: 1fr;
  max-width: 680px;
}
@media (min-width: 720px) {
  .quote-cards--single { grid-template-columns: 1fr; }
}
@media (min-width: 1000px) {
  .quote-cards--single { grid-template-columns: 1fr; }
}

.quote-cards__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* Akzentkanten-Variante: 3px Primary links, Radius nur rechts.
   Quelle: Kunden-Präzedenz .quote plus Engpass .note. */
.quote-cards__card--edge {
  border-left: var(--qc-edge-width) solid var(--color-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Glyphe als eigene Zeile ÜBER dem Zitat, nie als Overlay
   (Übernahme-Entscheidung Daniel 04.08., Realbau .voice__quote::before). */
.quote-cards__mark {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 0.6;
  color: var(--color-primary);
  margin-bottom: var(--space-s);
}

.quote-cards__text {
  flex: 1;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--font-scale-body);
  line-height: 1.65;
}

/* Quellen-/Herkunftszeile ohne Person (anonymisierte O-Töne, .said-Muster). */
.quote-cards__src {
  display: block;
  margin-top: var(--space-s);
  color: var(--color-ink-soft);
  font-size: var(--font-scale-small);
}

/* Personen-Zeile: rundes Foto im Primary-Ring, Name, Rolle. */
.quote-cards__who {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.quote-cards__photo {
  width: var(--qc-photo-size);
  height: var(--qc-photo-size);
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.quote-cards__name {
  display: block;
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--color-ink);
  font-size: var(--font-scale-small);
  line-height: 1.3;
}

.quote-cards__role {
  display: block;
  color: var(--color-ink-soft);
  font-size: var(--font-scale-small);
  line-height: 1.4;
  margin-top: 2px;
}