/**
 * landing.css — die textlichen Sektionen der Startseite (T-09/T-14).
 *
 * Ohne eigene Regeln erbten diese Listen `max-width: var(--ec-measure)` von
 * der Grundtypografie. Bei 320 px ist 68ch breiter als das Sichtfeld, und die
 * Seite scrollte waagerecht (TC-A11Y-06). Die Listen bekommen deshalb ein
 * eigenes, rasterbasiertes Layout.
 */

.ec-cluster__list,
.ec-industries__list,
.ec-trust__list {
  display: grid;
  gap: var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .ec-cluster__list,
  .ec-industries__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .ec-trust__list {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
  }
}

.ec-cluster__list li,
.ec-industries__list li,
.ec-trust__list li {
  /* Der eigentliche Fix: kein geerbtes 68ch, sondern die Spaltenbreite. */
  max-width: none;
  overflow-wrap: break-word;
}

.ec-cluster__list li,
.ec-industries__list li {
  padding: var(--ec-space-md);
  border: var(--ec-border-width) solid var(--ec-color-border);
  border-radius: var(--ec-radius-lg);
  background-color: var(--ec-color-surface);
}

.ec-cluster__list strong,
.ec-industries__list strong {
  display: block;
  margin-bottom: var(--ec-space-3xs);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h3);
}

.ec-cluster__list span,
.ec-industries__list span {
  display: block;
  color: var(--ec-color-ink-muted);
}

.ec-cluster__list a {
  text-decoration: none;
}

.ec-trust__intro {
  margin-bottom: var(--ec-space-2xs);
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-small);
  letter-spacing: var(--ec-tracking-wide);
  text-transform: uppercase;
}

.ec-trust__list li {
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h3);
}

.ec-delimitation {
  padding: var(--ec-space-sm);
  border-left: var(--ec-border-width-thick) solid var(--ec-color-border-strong);
  background-color: var(--ec-color-surface-alt);
}

/* ---------------------------------------------------- Abschluss-Block (CTA) */

/*
 * Variante des vorhandenen Blocks .ec-cta (service-detail.css), nicht ein
 * zweiter Block mit eigenem Namen: Polster, Radius und invertierte Farben
 * kommen von dort, hier kommt nur hinzu, was den Abschluss der Startseite
 * unterscheidet.
 *
 * Warum überhaupt ein Block: randlos auf dunkler Fläche verschmolz der CTA
 * mit der ebenfalls dunklen Fusszeile direkt darunter und wirkte wie deren
 * Bestandteil. Als abgesetzte Fläche ist er eindeutig Inhalt.
 *
 * Der Verlauf unterscheidet ihn zusätzlich von der flachen Fusszeilenfarbe.
 * Erhebung wird genau einmal erklärt — über den Schatten, nicht zusätzlich
 * über eine Kontur.
 */
.ec-cta--split {
  display: grid;
  gap: var(--ec-space-lg);
  background-image: var(--ec-gradient-cta);
  box-shadow: var(--ec-shadow-lg);
}

/* Ab Tablet eine Komposition statt eines Stapels: Aussage links, Handlung
   rechts. Das verkürzt den Block und gibt dem Knopf einen eigenen Platz. */
@media (min-width: 48rem) {
  .ec-cta--split {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--ec-space-2xl);
    padding: var(--ec-space-2xl);
  }
}

.ec-cta__title {
  margin-block: 0 var(--ec-space-2xs);
}

.ec-cta__lead {
  max-width: var(--ec-measure);
  margin-block: 0;
  color: var(--ec-color-ink-muted);
}

.ec-cta__aside {
  display: grid;
  justify-items: start;
  gap: var(--ec-space-sm);
}

.ec-cta__direct {
  margin-block: 0;
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-small);
}