/* ============================================================
   Startseite: CTA nach dem Ablauf + Menschen (Gründer + Team)
   Baut auf style.css auf (Tokens, .btn, .gruender-*, .person-*, .story).
   ============================================================ */

/* ---------- CTA nach dem Ablauf: Nachtbild, Überschrift + Button zentriert im Himmel ---------- */
.ab-cta { padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.ab-cta-karte {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 2.4vw, 32px);
  min-height: clamp(380px, 34vw, 480px); padding: 48px 24px; text-align: center; background: var(--dark);
}
/* Himmel abgeschnitten: nur Haus + Garten, abgedunkelt, Schrift mittig darueber */
.ab-cta-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.ab-cta-karte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 50% 50%, rgba(5, 8, 18, .62), rgba(5, 8, 18, .38)); }
.ab-cta-karte h2 { color: #fff; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; max-width: 18ch; }
.ab-cta-karte h2 em { font-style: normal; color: var(--accent-bright); }
@media (max-width: 640px) {
  .ab-cta-karte { border-radius: 20px; min-height: 340px; }
  .ab-cta-bild { object-position: 66% 75%; }
}

/* ---------- Menschen: Gründer + Team ---------- */
.people.mt { padding-bottom: 0; }
.mt-team { margin-top: clamp(64px, 8vw, 112px); }
.mt-kopf {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: end;
  padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line);
}
.mt-kopf h3 { font-size: clamp(26px, 3vw, 38px); max-width: 20ch; }
.mt-kopf p { color: var(--ink-2); font-size: clamp(15.5px, 1.3vw, 17px); max-width: 52ch; }
.mt-kopf .btn { margin-top: 20px; }

.mt-gesichter {
  list-style: none;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(28px, 3vw, 40px);
}
.mt-gesichter .person-photo { margin-bottom: 12px; }
.mt-gesichter .person-name { font-size: 15.5px; }
.mt-gesichter .person-role { font-size: 13px; }
/* Versetzte Reihe: jede zweite Karte etwas tiefer, wirkt wie ein Gruppenbild statt Raster */
.mt-gesichter .person:nth-child(even) { margin-top: 28px; }
.mt-team + .values-row { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }

@media (max-width: 1080px) {
  .mt-gesichter { grid-template-columns: repeat(4, 1fr); }
  .mt-gesichter .person:nth-child(even) { margin-top: 0; }
}
@media (max-width: 900px) {
  .mt-kopf { grid-template-columns: 1fr; }
}
/* Mobil: seitlich wischbare Reihe statt langer Liste */
@media (max-width: 720px) {
  .mt-gesichter {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(20px, 4vw, 48px)); padding-inline: clamp(20px, 4vw, 48px);
    scroll-padding-inline: clamp(20px, 4vw, 48px);
    scrollbar-width: none; padding-bottom: 4px;
  }
  .mt-gesichter::-webkit-scrollbar { display: none; }
  .mt-gesichter .person { flex: 0 0 58%; scroll-snap-align: start; }
}