/* ═══════════════════════════════════════════════════════════
   team.css — Styles für team.html (Prefix TM-)
   Reuse: base.css Tokens, MOD-BRIDGE + SF- (Founder) aus sections.css
   ═══════════════════════════════════════════════════════════ */

/* ── PAGE HERO ─────────────────────────────────────────────── */
#TM-HERO {
  position: relative;
  z-index: 2;
  padding: 148px 44px 40px;
  background: transparent;
}
.TM-HERO-IN {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.TM-EY {
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 20px;
}
.TM-H1 {
  font-family: var(--S);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.01;
  letter-spacing: -.03em;
  color: var(--k);
  margin: 0 0 22px;
}
.TM-ACC {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  color: #A78BFA;
  letter-spacing: -.012em;
}
.TM-LEAD {
  font-family: var(--S);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(12,11,8,.7);
  max-width: 640px;
  margin: 0 auto;
}
.TM-LEAD strong { color: var(--k); font-weight: 600 }

/* ── TEAM GRID ─────────────────────────────────────────────── */
#TM-TEAM {
  position: relative;
  z-index: 2;
  padding: 96px 44px;
  background: transparent;
}
.TM-TEAM-IN {
  max-width: 1340px;
  margin: 0 auto;
}
.TM-GRID {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
/* 3-Spalten-Variante (Partner-Netzwerk) — zentriert, schmaler.
   Nachfolgende Media-Queries auf .TM-GRID greifen weiterhin. */
.TM-GRID-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
}
.TM-MEMBER {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 26px 28px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(12,11,8,.08);
  border-radius: 16px;
  box-shadow: var(--gl-shd);
  transition: var(--trans);
}
.TM-MEMBER:hover {
  transform: translateY(-3px);
  border-color: rgba(155,139,247,.45);
  box-shadow: 0 18px 44px rgba(124,95,224,.14);
}
.TM-AV {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--M);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  box-shadow: 0 8px 22px rgba(124,95,224,.28), var(--gl-edge);
  margin-bottom: 20px;
}
.TM-MEMBER-NAME {
  font-family: var(--S);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--k);
  margin: 0 0 6px;
}
.TM-MEMBER-ROLE {
  font-family: var(--S);
  font-size: 14px;
  font-weight: 500;
  color: var(--p3);
  margin: 0 0 14px;
}
.TM-MEMBER-BIO {
  font-family: var(--S);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(12,11,8,.62);
  margin: 0 0 18px;
}
.TM-MEMBER-TAG {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--M);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p3);
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(155,139,247,.1);
  border: 1px solid rgba(155,139,247,.22);
}
.TM-MEMBER-TAG-DOT {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p1);
  box-shadow: 0 0 8px rgba(155,139,247,.8);
}

/* ── WERTE / WARUM UNS ─────────────────────────────────────── */
#TM-VALUES {
  position: relative;
  z-index: 2;
  padding: 96px 44px;
  background: transparent;
}
.TM-VALUES-IN {
  max-width: 1340px;
  margin: 0 auto;
}
.TM-VGRID {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.TM-VAL {
  padding: 30px 26px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(12,11,8,.08);
  border-radius: 16px;
  box-shadow: var(--gl-shd);
  transition: var(--trans);
}
.TM-VAL:hover {
  transform: translateY(-3px);
  border-color: rgba(155,139,247,.45);
  box-shadow: 0 18px 44px rgba(124,95,224,.14);
}
.TM-VAL-ICO {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(155,139,247,.12);
  border: 1px solid rgba(155,139,247,.24);
  color: var(--p3);
  margin-bottom: 20px;
}
.TM-VAL-ICO svg { width: 22px; height: 22px }
.TM-VAL-TI {
  font-family: var(--S);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--k);
  margin: 0 0 10px;
}
.TM-VAL-D {
  font-family: var(--S);
  font-size: 14px;
  line-height: 1.62;
  color: rgba(12,11,8,.64);
  margin: 0;
}

/* ── ABSCHLUSS-CTA ─────────────────────────────────────────── */
#TM-CTA {
  position: relative;
  z-index: 2;
  padding: 40px 44px 120px;
  background: transparent;
}
.TM-CTA-PANEL {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 48px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(155,139,247,.28);
  box-shadow: 0 24px 60px rgba(124,95,224,.14), var(--gl-edge);
}
.TM-CTA-PANEL::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto -20%;
  height: 360px;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.TM-CTA-PANEL > * { position: relative; z-index: 1 }
.TM-CTA-EY {
  font-family: var(--M);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 18px;
}
.TM-CTA-TI {
  font-family: var(--S);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--k);
  margin: 0 0 16px;
}
.TM-CTA-TI-ACC {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  color: #A78BFA;
}
.TM-CTA-SUB {
  font-family: var(--S);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(12,11,8,.7);
  max-width: 520px;
  margin: 0 auto 32px;
}
.TM-CTA-BTNS {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .TM-GRID { grid-template-columns: repeat(2, 1fr) }
  .TM-VGRID { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px) {
  #TM-HERO { padding: 124px 20px 32px }
  #TM-TEAM, #TM-VALUES { padding: 72px 20px }
  #TM-CTA { padding: 32px 20px 88px }
  .TM-GRID, .TM-VGRID { grid-template-columns: 1fr; gap: 16px }
  .TM-CTA-PANEL { padding: 48px 26px }
  .TM-CTA-BTNS { flex-direction: column }
  .TM-CTA-BTNS .BF, .TM-CTA-BTNS .BG { width: 100% }
}