/* Cases-Seite. Nav, Laufleiste, Kontakt und Footer kommen aus
   landing.css, hier steht nur das Seitenspezifische: Filter,
   Case-Raster und die Kundenstimmen. */

.cs [id] { scroll-margin-top: 120px; }
body.cs { overflow-x: clip; }

/* --- Intro -------------------------------------------------------------- */

.cs-intro { max-width: var(--seitenbreite); margin: 0 auto; padding: 88px 24px 48px; }
.cs-intro .label-klein { margin-bottom: 20px; }
.cs-intro h1 {
  font-size: var(--fs-h1); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 0 0 22px; max-width: 900px; text-wrap: pretty;
}
.cs-lead {
  font-size: var(--fs-body-l); line-height: 1.6;
  color: var(--text-2); max-width: 640px; margin: 0;
}

/* --- Kundenlogos -------------------------------------------------------- */

.cs-kunden { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 56px; }
/* max-width: none, weil das Label ein h2 ist und sonst die
   Zeilenbegrenzung der Sektionsueberschriften erbt. Zentriert wuerde
   dann nur innerhalb dieser Breite, nicht ueber die Sektion. */
.cs-kunden .label-mini { margin: 0 0 20px; text-align: center; max-width: none; }

/* --- Filter ------------------------------------------------------------- */

.cs-filterleiste {
  max-width: var(--seitenbreite); margin: 0 auto;
  padding: 0 24px 32px; display: flex; gap: 10px; flex-wrap: wrap;
}
.cs-filter {
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 20px; border-radius: var(--r-pill); cursor: pointer;
  background: #ffffff; border: 1px solid var(--n-150); color: var(--schwarz);
  transition: background var(--wipe), border-color var(--wipe);
}
.cs-filter:hover { border-color: var(--n-300); }
.cs-filter.aktiv { background: var(--gelb); border-color: var(--gelb); }

/* --- Case-Raster -------------------------------------------------------- */

.cs-raster { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px 88px; }
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.cs-karte {
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-card); padding: 26px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  transition: box-shadow var(--wipe), transform var(--wipe);
}
.cs-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hover); }
.cs-karte[hidden] { display: none; }

/* Die Karten laufen beim ersten Anzeigen gestaffelt ein, --i ist die
   Position im Raster. Rein dekorativ, deshalb per CSS statt per JS. */
.cs-karte {
  animation: cs-auf 0.55s var(--ease) backwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes cs-auf {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-karte { animation: none; }
}

/* Die Grafik je Case. Die Farbwerte stehen direkt im SVG, wie in den
   Canvas-Modulen der Landingpage: Es sind Illustrationsinnereien, keine
   Flaechen des Design-Systems. */
.cs-art {
  width: 100%; height: auto; display: block;
  background: oklch(0.965 0.005 106); border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .cs-art animate, .cs-art animateMotion, .cs-art animateTransform { display: none; }
}

/* Die Einladungskarte am Ende des Rasters: gelb statt weiss, ohne Rahmen.
   Sie bleibt bei jedem Filter stehen. */
.cs-karte-cta { background: var(--gelb); border-color: var(--gelb); }
.cs-karte-cta .cs-branche { background: rgba(11, 11, 11, 0.08); color: var(--schwarz); }
.cs-karte-cta .cs-text { color: var(--schwarz); }
.cs-karte-cta-knopf { margin: auto 0 0; }
/* Auf gelbem Grund wischt der Knopf hell auf, nicht gelb. */
.cs-btn-hell { background-image: linear-gradient(115deg, var(--offwhite) 50%, var(--schwarz) 50%); }
a.cs-btn-hell:hover { background-size: 260% 100%; }

.cs-branche {
  align-self: flex-start; margin: 0;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--n-700);
  background: var(--n-75); border-radius: var(--r-pill);
  padding: 6px 13px;
}
.cs-karte h3 {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.3; margin: 0;
}
.cs-text {
  font-size: 13.5px; font-weight: 300; line-height: 1.6;
  color: var(--text-2); margin: 0; flex: 1;
}
.cs-tags { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.cs-tags li {
  font-size: 11px; font-weight: 500; padding: 4px 11px;
  border: 1px solid var(--n-200); border-radius: var(--r-pill);
  color: var(--n-700);
}

.cs-leer { font-size: 15px; color: var(--n-600); margin: 0; }

/* --- Kundenstimmen ------------------------------------------------------ */

/* Weisses Band ueber die volle Breite, der Inhalt sitzt im .bereich. */
.cs-stimmen { background: #ffffff; padding: 80px 0 64px; margin-bottom: 88px; }
.cs-stimmen .label-klein { margin-bottom: 12px; }
/* Die Ueberschrift steht in .bereich, nicht direkt in der Sektion. Mit dem
   Kind-Kombinator griff diese Regel nie, weshalb nur 8px Luft zu den Karten
   blieben statt der ueblichen 40px. Schriftgroesse, Laufweite, Zeilenhoehe
   und Zeilenbreite kommen ohnehin aus spyke.css und landing.css, hier
   bleibt nur der Abstand: 32px plus die 8px Polsterung der Spur, die den
   angehobenen Karten beim Hover Platz laesst. */
.cs-stimmen h2 { margin: 0 0 32px; }

/* Waagerecht scrollbar, die Leiste selbst wird ausgeblendet. Die Spur
   reicht bis an die Fensterraender, damit Karten sauber herausscrollen;
   das clip am Body faengt die Breite wieder ein. */
.cs-stimmen-spur {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; cursor: grab;
  scrollbar-width: none;
  margin-inline: calc(50% - 50vw);
  /* Die Spur laeuft ueber die volle Fensterbreite, ihr Inhalt beginnt aber
     am selben Rand wie die Ueberschrift darueber. Sonst sass die erste
     Karte weiter links als der Text und die Sektion wirkte verrutscht.
     Unterhalb der Seitenbreite bleibt es beim normalen Rand von 24px. */
  /* Genau der Betrag, den margin-inline herauszieht: Die Spur laeuft ueber
     die volle Fensterbreite, ihr Inhalt beginnt aber buendig mit der
     Ueberschrift. Unterhalb der Seitenbreite ergibt der Term exakt 24px.
     Bewusst nur in vw gerechnet, ohne Prozent: Bei padding bezoege sich
     Prozent auf den Elternknoten, bei scroll-padding dagegen auf den
     Scrollbereich selbst. Beide Angaben wuerden dann auseinanderlaufen. */
  --rand: max(24px, calc((100vw - var(--seitenbreite)) / 2 + 24px));
  padding: 8px var(--rand) 40px;
  scroll-padding-inline: var(--rand);
}
.cs-stimmen-punkte { margin-top: -16px; }
.cs-stimmen-spur::-webkit-scrollbar { display: none; }
.cs-stimmen-spur.zieht { cursor: grabbing; scroll-snap-type: none; }

.cs-stimme {
  flex: 0 0 min(460px, 88%); scroll-snap-align: start;
  background: #ffffff; border: 1px solid var(--n-150);
  border-radius: var(--r-card); padding: 32px 34px;
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow var(--wipe), transform var(--wipe);
}
.cs-stimme:hover { box-shadow: var(--schatten-hover); transform: translateY(-3px); }
.cs-stimme-kopf { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.cs-zeit { font-size: 12px; font-weight: 300; color: var(--n-600); }
.cs-stimme h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.3; margin: 0; text-wrap: pretty;
}
.cs-stimme-text {
  font-size: 14.5px; font-weight: 300; line-height: 1.65;
  color: var(--text-2); margin: 0; flex: 1;
}
.cs-person {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding-top: 16px; border-top: 1px solid var(--n-100);
  font-size: 13px; line-height: 1.45; color: var(--n-600);
}
.cs-kuerzel {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--gelb); color: var(--schwarz);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.cs-name { font-weight: 500; color: var(--schwarz); }

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 1080px) {
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .cs-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .cs-intro { padding: 64px 24px 32px; }
  .cs-karte { padding: 22px 20px; }
  .cs-stimme { padding: 24px 22px; }
}