/* ==========================================================================
   90 kundenstimmen · Owner: wdf-section-builder (Auftrag P7-90)
   Fünf gleich gewichtete Stimmen (kundenstimme): fest geschnittene Vorschau (≤ 5 Zeilen ab 360 px), „Mehr lesen“ klappt den Volltext
   in derselben Karte auf. Mobil/Tablet Karussell mit nativem Scroll-Snapping (nächste Karte ragt ins Bild),
   ab 1024 Raster; die Hauptaktion steht dort unter dem Raster, linksbündig (wie in 60).
   Seiten-Stimme (Schibsted), kein .ui. Smartphone zuerst, Erweiterungen mit min-width. Nur Tokens.
   ========================================================================== */

/* ---------- Abschnitt ---------- */
/* Gruppen: Kopf | Stimmen + Bedienung | Hauptaktion. Abstand zwischen Gruppen (24 / 40) > innerhalb (8 / 16). */
.ku__wrap { display: grid; gap: var(--s-5); }
.ku__body { display: grid; gap: var(--s-5); min-width: 0; }

/* ---------- Spur ---------- */
/* Ohne JavaScript: Spalten statt Karussell (Position und Pfeile gibt es dann nicht). */
.ku-track { display: grid; gap: var(--s-4); position: relative; }

/* Mit JavaScript: Karussell. Die Spur läuft bis an den Bildschirmrand, die nächste Karte ragt hinein. */
html.js .ku-track {
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  align-items: stretch;
  margin-inline: calc(-1 * var(--page-pad));
  padding-inline: var(--page-pad);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-pad);
  scrollbar-width: none;
}
html.js .ku-track::-webkit-scrollbar { display: none; }
html.js .ku-card { scroll-snap-align: start; }

/* Nur die geöffnete Karte wächst: Höhe der anderen ist per Skript festgehalten (min-height), das Raster streckt nicht mehr. */
.ku__body[data-open] .ku-track { align-items: start; }

/* ---------- Karte (kundenstimme) ---------- */
.ku-card {
  display: grid;
  grid-template-rows: auto auto 1fr;   /* Kopf · Zitat · Platz bis zum Knopf */
  align-content: start;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-5);
  background: var(--color-ui-window);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-l);
}
/* Kopf: Monogramm + Name/Firma/Branche, darunter über die ganze Breite die Lösung */
.ku-who {
  display: grid;
  grid-template-columns: var(--s-6) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-3);
  row-gap: var(--s-2);
}
/* Initialen statt Gesicht (keine Fotos): Kachel wie die Monogramme in 40, kein Kreis (Regel 5) */
.ku-mono {
  display: grid; place-items: center;
  width: var(--s-6); height: var(--s-6);
  background: var(--color-ui-raised);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--r-s);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--color-text);
}
/* Metazeilen (Name · Firma · Branche / Lösung · Projektdauer): jedes Glied ein Span, Trennpunkt per ::before in der Lücke vor dem Glied.
   Das erste Glied jeder Zeile liegt am Rand des Kastens, sein Punkt fällt links daneben aus dem Kasten und wird abgeschnitten.
   So hängt nie ein Punkt am Zeilenende oder allein. */
.ku-id, .ku-sol {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s-3);
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}
.ku-id > *, .ku-sol > * { position: relative; min-width: 0; }
.ku-id > * + *::before, .ku-sol > * + *::before {
  content: "·";
  content: "·" / "";   /* reine Zierde: Screenreader lesen den Punkt nicht mit */
  position: absolute;
  inset-inline-end: 100%;
  inline-size: var(--s-3);
  text-align: center;
}
.ku-id {
  font-size: var(--fs-small);
  line-height: 1.35;
}
.ku-id b { font-weight: var(--fw-semibold); color: var(--color-text); }
.ku-sol {
  grid-column: 1 / -1;
  font-size: var(--fs-micro);
  line-height: 1.4;
}
.ku-sol b { font-weight: var(--fw-semibold); color: var(--color-text); }
/* „Projektdauer …“ steht auf allen Breiten und in allen Karten auf einer eigenen Zeile (nie mal daneben, mal darunter).
   Der Trennpunkt am Zeilenanfang fällt wie beschrieben aus dem Kasten und wird abgeschnitten. */
.ku-sol > :last-child { flex-basis: 100%; }

/* Zitat: Seiten-Stimme 17/400 in voller Schriftfarbe (Mensch spricht Schibsted) */
.ku-card blockquote {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Vorschau: fest geschnittener Text (letztes ganzes Wort, das bei jeder Breite ab 360 px in höchstens fünf Zeilen passt, dann „…“).
   Kein line-clamp: der schneidet mitten im Wort und setzt Zeichen doppelt. Der Volltext steht im Aufklapper. */
.ku-full { display: grid; gap: var(--s-3); }
.ku-full ol { display: grid; gap: var(--s-3); padding-inline-start: var(--s-5); list-style: decimal; }
.ku-full ol li::marker { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ku-full ol b { font-weight: var(--fw-semibold); }

/* „Mehr lesen / Weniger“: am Kartenfuß, Zielfläche ≥ 44 px (btn-text), linksbündig mit dem Zitat */
.ku-toggle { align-self: end; justify-self: start; }

/* ---------- Bedienung des Karussells (nur mit JavaScript sichtbar, nur bis 1023 px) ---------- */
.ku-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
}
.ku-arrow { aspect-ratio: 1; padding: 0; }
.ku-pos { text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Hauptaktion nach den Stimmen ---------- */
.ku-cta { min-width: 0; }

/* ---------- Tablet: nächste Karte ragt ins Bild ---------- */
@media (min-width: 768px) {
  .ku__wrap, .ku__body { gap: var(--s-6); }
  .ku-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  html.js .ku-track { grid-template-columns: none; grid-auto-columns: 44%; gap: var(--s-4); }
  .ku-nav { gap: var(--s-4); }
  .ku-card { padding: var(--s-5); }
}

/* ---------- Desktop: Raster, kein Karussell ---------- */
@media (min-width: 1024px) {
  .ku__wrap { gap: var(--s-6); }
  /* Spur wird Teil des Rasters (drei Spalten, role="list" erhält die Listensemantik); die sechste Zelle bleibt frei */
  .ku__body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: stretch;
  }
  .ku-track, html.js .ku-track {
    display: contents;
  }
  html.js .ku-card { scroll-snap-align: none; }
  .ku__body[data-open] { align-items: start; }
  .ku-nav { display: none; }
  /* Unter dem Kartenraster, linksbündig über alle Spalten (wie die Hauptaktion in 60): kein Schweben im leeren sechsten Feld.
     Abstand zum Raster = Rasterlücke + 24 px, also mindestens doppelt so groß wie der Abstand zwischen den Karten. */
  .ku-cta { grid-column: 1 / -1; justify-self: start; margin-top: var(--s-5); }
}

/* ---------- Bild (Bildwelt W2): nur ab 1024 im sechsten Rasterfeld ---------- */
/* Höhe = Höhe der Kartenreihe (Raster streckt), Rahmen wie die Karten (media--card). Mehr Höhe als 5:4 beschneidet seitlich,
   darum Fokus auf die Mitte der Übergabe (Kachel) und kein Zusatz-Zoom. */
.media.ku-media { display: none; --media-focus: 50% 40%; }
@media (min-width: 1024px) {
  .media.ku-media { display: block; width: 100%; min-width: 0; aspect-ratio: auto; align-self: stretch; }
}

/* ---------- Reduced Motion: kein Gleiten der Spur (Skript wählt behavior "auto") ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .ku-track { scroll-behavior: auto; }
}